Markus Weingärtner @markusblogde

7 Beiträge6 Beteiligte2 Beiträge heute

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

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: Short-wave radio: the original internet https://ift.tt/M8ZHBTQ #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttShort-wave radio: the original internetThe 99-Percent Invisible Podcast is always great, but a recent episode about short-wave radio really caught my attention. Short-wave radio is a band of radio that uses waves that are, as the name implies, really short. Shorter than AM/FM radio. Because long waves generally travel farther, a lot of folks wrote short-wave radio bands off under the assumption that they wouldn’t travel very far at all and were basically useless.

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

6 Std.

Chris Ferdinandi ️ @cferdinandi@mastodon.social

New Video: Is this REALLY the best way to structure web components!?! https://www.youtube.com/watch?v=AwAcchY28yA #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

YouTubeIs this REALLY the best way to structure web components!?!Von Go Make Things

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

1 T.

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 · 2 T.

2 T.

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 · 3 T.

3 T.

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 · 5 T.

5 T.

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 · 6 T.

6 T.

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 · 3. Juli

3. Juli

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 · 2. Juli

2. Juli

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 · 1. Juli

1. Juli

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 · 30. Juni

30. Juni

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 · 28. Juni

28. Juni

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 · 27. Juni

27. Juni

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 · 26. Juni

26. Juni

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 · 25. Juni

25. Juni

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!

**TechKeysX** @TechKeysX@mastodon.social · 25. Juni

25. Juni

TechKeysX @TechKeysX@mastodon.social

Single Element Tuple in Python:
A single element tuple in Python is defined by placing a comma after the element, e.g., t = (5,).
#Python #Tuple #PythonTips #LearnPython #Coding #PythonBasics #DevTips #SingleElementTuple #PythonProgramming #codenewbie

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

23. Juni

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

**Chris Ferdinandi ️** @cferdinandi@mastodon.social · 23. Juni

23. Juni

Chris Ferdinandi ️ @cferdinandi@mastodon.social

️ New Article: How to create light and dark color modes with CSS https://ift.tt/tKoVAkz #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie

ift.ttHow to create light and dark color modes with CSSLast week, we looked at how to create accessible and semantic color palettes as part of my deep dive into how I’m building Kelp, my UI library for people who love HTML. Today, I wanted to show you how I’m implementing light and dark modes. Let’s dig in! Base Colors For this article, we’ll look at one of our semantic colors: --color-primary-*. All of the others work the same way, and focusing on just one will make this easier to explain and understand.

**TechKeysX** @TechKeysX@mastodon.social · 21. Juni

21. Juni

TechKeysX @TechKeysX@mastodon.social

Dictionaries in Python:
Dictionaries in Python are collections of key-value pairs that allow fast data retrieval based on unique keys.
#Python #PythonTips #Dictionaries #LearnPython #Coding #PythonProgramming #CodeNewbie #100DaysOfCode #pythonbasics

**TechKeysX** @TechKeysX@mastodon.social · 20. Juni

20. Juni

TechKeysX @TechKeysX@mastodon.social

Iterate in Dictionaries in Python:
Iterating in dictionaries means looping through keys, values, or key-value pairs using a for loop.
#Python #PythonTips #CodeNewbie #100DaysOfCode #LearnPython #DevLife #Coding #PythonDictionaries #PythonLoops #womenwhocode

Zum Hochladen hereinziehen

Frühere Suchanfragen

Suchoptionen

Verwaltet von:

Serverstatistik:

#codenewbie