100 days of modern CSS
source link: https://frontendfoc.us/issues/564
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Frontend Focus Issue 564
|
|
 |
|
Creating a World-Class Code Playground with Sandpack — A couple of months ago we featured the release of CodeSandbox’s Sandpack, a toolkit for creating your own ‘live code editor’ components. Josh Comeau shows off how to actually use it to good effect to boost your blog posts, documentation, etc. Josh W Comeau |
|
▶ The State of CSS Frameworks — An hour-long discussion with “knowledge leaders, library and methodology authors, and CSS aficionados” about the recent features added to CSS and what libraries and trends you should investigate for your projects. (1 hour 3 minutes.) This Dot Media |
|
Discover New HTML Elements & CSS Selectors — Join Jen Kramer for this detailed video course on intermediate HTML and CSS techniques, covering semantic HTML, inheritance, specificity, the cascade, and more. You'll also get a hands-on look at using new selectors such as :has(), :is(), and :where(). Frontend Masters sponsor |
|
Creating Halftone Patterns with CSS — Looks at how to recreate a dotted, halftone style image effect using vanilla CSS, including the Michelle Barker |
|
A First Look at the 'Websites and Software Applications Accessibility Act Bill' — The U.S. Congress recently introduced a new bill to ensure digital accessibility for websites and applications. Here, Ben takes a look. Ben Myers |
|
📙 Tutorials, Articles & Opinion |
 |
|
When Life Gives You Lemons, Write Better Error Messages — So, what makes a good error message? The Wix team attempts to offer clarity on that — they’ve recently edited thousands of error message prompts to ensure they are all inclusive, helpful, and aid the overall user experience. Jenni Nadler |
|
From Development to Real Users: How to Create a Web Performance Story — An engineer at Spotify shares how having good tooling in place can help you measure, monitor, and identify key moments in a user’s journey, and take appropriate action for impactful results. Vinicius Teixeira Dallacqua (Spotify) |
|
Marketing Notifications Suck and Everyone Toggles Them Off — Make sure important and transactional notifications get delivered with Courier. Get a Demo. Courier.com sponsor |
|
Using Web Components with Next.js (or any SSR Framework) — A current shortcoming of web components is that they lack support for server-side rendering. This means that, in JavaScript frameworks, the code to make Web Components work doesn’t run until hydration occurs. This post looks at a potential solution to this (with some significant caveats). Adam Rackis |
|
"Why We're Breaking Up with CSS-in-JS" — A software engineer shares what originally attracted them to the idea of keeping CSS and JS together, and why they (along with the rest of their team) have decided to shift away from it. Sam Magura |
|
The Wasted Potential of CSS Attribute Selectors — A long-time BEM user muses on treating attribute selectors on par with classes “as first-class citizens”. Elise Hein |
|
▶ Let's Implement Tic Tac Toe with React, HTML and CSS — For those newer to React a simple, clear application objective implemented from start to finish. (21 minutes.) Chris Power |
|
▶ Behind the Source: jQuery with Tomasz Łakomy — In this podcast Tomasz Łakomy and Mike Street discuss jQuery - asking if it is still relevant today, and whether it is really “so bad”? ~30 minutes. Mike Street podcast |
|
How to Animate CSS Box Shadows and Optimize Performance
|
|
Dark Mode UI Design Best Practices
|
🔧 Code, Tools & Resources |
 |
|
Introduction to WebC for Single File Web Components — A new single file web components tool by Zach Leatherman (creator of popular SSG Eleventy) for serializing custom elements at build time. It aggregates component-level CSS and JS, allowing devs to keep their styles/scripts together with the markup as single file components (the way you may be used to if you work with frameworks such as Svelte or Vue). ▶️ Here's a quick crash course video on how to use it. W. Evan Sheehan |
|
whyframe: Develop Components in Isolation Inside Bjorn Lu |
|
Shortcut Brings Product and Engineering Together. Try It for Free Shortcut (formerly Clubhouse.io) sponsor |
|
Selection: A Library to Enable Visual Selection of DOM Elements — For example, if you want users to be able to drag a box around various elements they want to select. Touch device friendly. Has wrappers for use with React, Preact and Vue too. Simon Reinisch |
|
Intl Explorer: A Way to Learn and Experiment with the ECMAScript Internationalization API — Supported by all major browsers, the Jesper Orb |
|
Tailwind Color Picker: A Chrome Extension Color Picker that Copies the Closest Tailwind Equivalent Color — Note: It's a Chrome extension though isn't on the extension store just yet.. Hassan El Mghari |
|
svg-path-morph: JS Library to Smoothly Interpolate Between Variations of SVG Paths Anders Brams |
|
👾 Gotta code 'em all? |
 |
|
Pokemon Deckz — A neat demo showing a collection of advanced CSS styles to create realistic-looking effects for the faces of Pokemon cards. Repo here. Simon Goellner |
Recommend
-
18
100 Days of Dio January first 2020 (99 days ago) Dio was released. Today is the hundredth day Dio has been released to the public I the author and lead developer expected a few things to happen. I thought...
-
8
100 Days Of Commitment - My Journey Through A 100DaysOfWriting...
-
10
100 Days of Code ~ Day 3 Well, did take a day off for the holiday, but made sure I was right back at it today! Completed the 3rd and 4th activities from JavaScript30. Activity 3...
-
9
100 days of code Today, we'll go through the Symfony Routing component, which allows to set up routing in PHP applications. We can add this component to the project with this command...
-
4
How it works Welcome to the 100 Days of SwiftUI! This is a free collection of videos, tutorials, tests, and more, all drawn from around my work here on Hacking with Swift, and all designed to help you learn SwiftUI effectively....
-
3
1. How to center an div element vertically or horizontally. There are many ways to center an div element, few of them are:- Method-1: Using margin:auto (For horizontal centering) In this method, if th...
-
16
Pseudo Elements in CSS Don't try to put pseudo elements on images, it will not work.The first point to keep in mind is that the before and the after pseudo-elements come before and after "the content" of the conta...
-
6
100 days of hackingThe #100daysofCode challenge was created by Alex Kallaway when he decided that he wanted to become a better programmer. In order to do that, he made a public commitment to code for...
-
4
Lightning Talk: My 100 Days of F# This website stores cookies on your computer. These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this informatio...
-
4
100 Days Of More Or Less Modern CSS This site is updating in the open Things might look unstyled because they probably are. ...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK