Mastodon.ie @mastodonie

5 posts5 participants0 posts today

**Chris Ferdinandi ️** @cferdinandi@mastodon.social · 7h

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: text-decoration-style in WebKit https://ift.tt/iyTIAjv #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.tttext-decoration-style in WebKitKelp uses a dotted underline for its links. (Like all things in Kelp, this can be customized with a CSS variable.) The dots are more subtle than a solid underline, but still provide a visual affordance other than color. This is an important guideline in how Kelp focuses on accessibility at its core. But of course, Safari fucks things up a bit! The text-decoration property is a shorthand property that combines text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness into a single declaration.

**Chris Ferdinandi ️** @cferdinandi@mastodon.social · 1d

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: Bulletproof web component loading https://ift.tt/trVm6Ws #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttBulletproof web component loadingToday, I wanted to talk about the “right” way to load web components to ensure they work predictably every time. Let’s dig in! The challenge Web components are self instantiating. Let’s imagine you’re creating a table of contents. When you use a traditional JavaScript library, you explicitly instantiate the library on a specific element. <div id="toc"></div>const myTOC = new TableOfContents('#toc'); But with web components, all you need to do is include the custom element associated with the component.

**Chris Ferdinandi ️** @cferdinandi@mastodon.social · 2d

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: How to automatically create a new release and publish to NPM whenever package.json is updated using a GitHub Action https://ift.tt/VqHsIUl #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttHow to automatically create a new release and publish to NPM whenever package.json is updated using a GitHub ActionWow, that title is a mouthful! Today, I wanted to share the GitHub Action I built to automatically create a new release for Kelp whenever I update the version number in the package.json file. Let’s dig in! (Don’t want to read all of those. Grab the GitHub Action script here.) Automate the boring stuff! Every time I add a new feature to Kelp, my UI library for people who love HTML, I have complete a series of steps…

**Chris Ferdinandi ️** @cferdinandi@mastodon.social · 4d

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: People who act like machines https://ift.tt/PqB2HW4 #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttPeople who act like machinesThis morning, I read this fantastic article from Kelly Hayes on techno-fascism… Rather than throwing up barriers that make it harder to seek companionship and support in each other, we are being offered an artificial replacement for other people’s humanity, and for our own thoughts. We are being bundled away from one another and deskilled, as critical thinking atrophies or goes undeveloped in people who outsource their thought work to an autocomplete mechanism.

**Chris Ferdinandi ️** @cferdinandi@mastodon.social · 5d

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: Web components don't need a constructor() https://ift.tt/Ylx9oqA #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttWeb components don't need a constructor()For years, I’ve written my web component classes with a constructor() method that calls super() to get access to the parent HTMLElement class’s properties… customElements.define('my-awesome-web-component', class extends HTMLElement { constructor () { // Inherit properties super(); // The rest of your code... } }); For my demo projects, I often do all the things in the constructor(). But with Kelp, my UI library for people who love HTML, I’m initializing my in the connectedCallback() method.

**Chris Ferdinandi ️** @cferdinandi@mastodon.social · 6d

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: Catching early DOM events in Playwright https://ift.tt/PCdEgSJ #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttCatching early DOM events in PlaywrightYesterday, I wrote about how to test custom events in Playwright. In building out the tests for Kelp’s web components, I ran into an interesting challenge on the ready events I emit when the component is first instantiated. Today, I wanted to explain the problem, and how I fixed it. Let’s dig in! The challenge Kelp uses an HTML Web Component approach for most of it’s components, but there are a few exceptions where that doesn’t make sense.

**Chris Ferdinandi ️** @cferdinandi@mastodon.social · Jul 2

Jul 2

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: Testing custom events with Playwright https://ift.tt/ZBj9Apq #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttTesting custom events with PlaywrightI’m about to dive into building all of the Web Components for Kelp, my UI library for people who love HTML. Today, I wanted to share how to test custom events in Playwright, because it’s not quite as straightforward as you’d expect. Let’s dig in! Embracing Playwright & TDD As part of this project, I really want to embrace test-driven development (TDD) now that I’ve had my lightbulb moment about how it works…

**Chris Ferdinandi ️** @cferdinandi@mastodon.social · Jul 1

Jul 1

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: Generating colors with the CSS oklch() function https://ift.tt/eoyx5uR #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttGenerating colors with the CSS oklch() functionDid you know CSS is a programming language, actually? A few weeks ago, I wrote about creating an accessible color palette using LCH. Today, I wanted to share how the CSS oklch() function makes that even easier! Let’s dig in! The CSS oklch() function The CSS oklch() function is a CSS-based way to generate a color using the Oklab color space. You pass in the Lightness, Chroma, and Hue as arguments, and it generates the color.

**Chris Ferdinandi ️** @cferdinandi@mastodon.social · Jun 30

Jun 30

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: Public and private CSS cascade layers in a design system https://ift.tt/reVuO9y #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttPublic and private CSS cascade layers in a design systemOne of the most important native modern CSS features I’m using in Kelp UI is cascade layers and the @layer at-rule. Today, I wanted to share how I use a mix public and private cascade layers in Kelp to provide CSS hooks for developers. Let’s dig in! (If you haven’t read my article on cascade layers yet, start there or this article won’t make sense.) A wrapper layer The entire Kelp UI library is wrapped in a kelp cascade layer.

**Chris Ferdinandi ️** @cferdinandi@mastodon.social · Jun 28

Jun 28

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: On being a whole person https://ift.tt/3SmD18Y #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttOn being a whole personThis week, a friend shared this wonderful article from Lea Verou about the messy path we take in our paths to being our best selves. It’s full of gems, but this little bit in particular really stood at for me… Then there’s breadth. Most jobs try to box you in: PM or engineer? Scientist or practitioner? UX Researcher or designer? DevRel or standards? … It’s silly that people are forced to choose, and present themselves as less than to seem more attractive to hiring managers…

**Chris Ferdinandi ️** @cferdinandi@mastodon.social · Jun 27

Jun 27

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: gzip performance is wild! https://ift.tt/P8xVKpU #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttgzip performance is wild!This week, I wrote about using the CSS @import rule to modularize CSS, and some performance challenges with that approach. I ran a few additional tests, and wanted to share the data I found. tl;dr: the issue isn’t the @import rule itself, but that files under 1kb often end up the same size or even bigger when gzipped, so you get no compression benefits. Let’s dig in! wtf is gzip!

**Chris Ferdinandi ️** @cferdinandi@mastodon.social · Jun 26

Jun 26

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: Modular CSS Redux https://ift.tt/J8TkM0l #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttModular CSS ReduxThey say the best way to get an answer to a technical question is to post the wrong answer on the internet! Yesterday, I wrote about modular CSS architecture using the browser-native @import operator. And while I wouldn’t say that what I wrote was wrong, I did learn a whole lot and have some really interesting conversations that shifted my perspective a bit. Let’s dig in! Gzipping makes things weird The modular files in Kelp are really small.

**Chris Ferdinandi ️** @cferdinandi@mastodon.social · Jun 25

Jun 25

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: Rethinking modular CSS and build-free design systems https://ift.tt/CcsW9A0 #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttRethinking modular CSS and build-free design systemsOne of my big goals with Kelp, my UI library for people who love HTML, was build-free customization. I want to use the best of modern HTML, CSS, and JavaScript to let people customize the hell out it without every having to open up terminal or run a build step. Today, I wanted to share how I decided to approach modularizing CSS and customizing which components get loaded. Let’s dig in!

**LogicLuminaryBill** @LogicLuminaryBill@mastodon.social · Jun 25

Jun 25

LogicLuminaryBill @LogicLuminaryBill@mastodon.social

June 22, 2025 – Sunday Sync & Reflect

#Beyond365DaysOfCode Day 175
#100DaysOfCode Day 175
#freeCodeCamp • #Python • #TheOdinProject • #WeekInReview

Daily Progress:
Read 1 article – freeCodeCamp News
Read 1 article – Daily.dev
Trello board refreshed
Codecademy CSS: Styling practice in progress

Another week of showing up.
Code. Learn. Reflect. Repeat.

#DevJourney #CodeEveryDay #SelfTaughtDev

**LogicLuminaryBill** @LogicLuminaryBill@mastodon.social · Jun 25

Jun 25

LogicLuminaryBill @LogicLuminaryBill@mastodon.social

June 21, 2025 – Saturday Grind

#Beyond365DaysOfCode Day 174
#100DaysOfCode Day 174
#Python • #freeCodeCamp • #Codecademy • #WeekendWarrior

Daily Progress:
1 article read – freeCodeCamp News
1 article explored – Daily.dev
Trello board updated
Codecademy CSS: Nailed down position

No days off—just different pace.
Coding on weekends isn't extra... it’s momentum.

#DevLog #SelfTaughtDev #CodeEveryDay

**LogicLuminaryBill** @LogicLuminaryBill@mastodon.social · Jun 25

Jun 25

LogicLuminaryBill @LogicLuminaryBill@mastodon.social

June 20, 2025 – Friday Focus

#Beyond365DaysOfCode Day 173
#100DaysOfCode Day 173
#Python • #freeCodeCamp • #TheOdinProject • #FridayFocus

Daily Highlights:
Read 1 article – freeCodeCamp News
Explored 1 article – Daily.dev
Trello board updated
Codecademy: Mastered CSS position

Ending the week strong.
Discipline today builds momentum tomorrow.

#DevJourney #CodeConsistency #WebDevLog

**LogicLuminaryBill** @LogicLuminaryBill@mastodon.social · Jun 25

Jun 25

LogicLuminaryBill @LogicLuminaryBill@mastodon.social

June 18, 2025 – Midweek Momentum

#Beyond365DaysOfCode Day 171
#100DaysOfCode Day 171
#freeCodeCamp • #Python • #TheOdinProject • #ProjectMode

Progress Recap:
Read 1 article on freeCodeCamp News
Daily.dev insights logged
Trello board organized
Continued Codecademy practice

Midweek, not mid-effort.
Stacking skills. Building discipline.

#DevJourney #CodeEveryDay #LearningHabit

**LogicLuminaryBill** @LogicLuminaryBill@mastodon.social · Jun 25

Jun 25

LogicLuminaryBill @LogicLuminaryBill@mastodon.social

June 16, 2025 – Monday Motivation

#Beyond365DaysOfCode Day 169
#100DaysOfCode Day 169
#Python • #freeCodeCamp • #TheOdinProject • #Codecademy
#LearningHabit in full force today!

Daily Wins:
Read 1 article on freeCodeCamp News
Explored insights on Daily.dev
Trello board updated & organized
Continued Codecademy lessons

Staying consistent. Staying sharp.
Let’s build better days—one line of code at a time.

#CodeEveryDay #DevJourney #LearnToCode

**TechKeysX** @TechKeysX@mastodon.social · Jun 24

Jun 24

TechKeysX @TechKeysX@mastodon.social

Slicing Tuple in python:
Slicing a tuple in Python means extracting a portion of it using the syntax tuple[start :stop :step].
#Python #PythonTips #Tuple #PythonSlicing #CodeSnippet #LearnPython #DevTips #100DaysOfCode #Programming #pythonlearning

**TechKeysX** @TechKeysX@mastodon.social · Jun 23

Jun 23

TechKeysX @TechKeysX@mastodon.social

Comprehension to create dictionaries in Python:
Dictionary comprehension is a concise way to create dictionaries in a single line using a syntax similar to list comprehension.
#Python #PythonTips #DictionaryComprehension #CodeNewbie #100DaysOfCode #LearnPython #OneLiner #PythonTricks #DevTips #CodingInPython

Drag & drop to upload

Recent searches

Search options

Administered by:

Server stats:

#100daysofcode