(Jay Freestone's) Front-end predictions for 2021
React framework maturity, early container queries, WASM adoption, and monoliths. I'll take all four, please. Not feeling like a particularly front-end-y? Jay
Managing CSS Z-Index In Large Projects — Smashing Magazine
We use abstractions and conventions to hide away the tricky and error-prone parts, which in turn makes it easier for everyone who needs to do the same task. The ideas Steven Frieson shares here should be actionable in most applications depending on your styling solution and browser support. Migrating to use this system is not very risky since stacking contexts are already scoped individually; you
Weekly Platform News: The :not() pseudo-class, Video Media Queries, clip-path: path() Support
Hey, we're back with weekly updates about the browser landscape from Šime Vidas.
Lazy Load Routes in Vue with webpack Dynamic Comments
The way routing works in JavaScript is usually that you specify which relative URL pattern you want for which component to render. So for /about you want
Build vs Buy: Component Libraries edition
Some things to think about before you decide to create your own component library.
No-Jank CSS Stripes
My mind goes immediately to repeating-linear-gradient and hard-stop gradients when thinking of creating stripes in CSS. You make one stripe by using the same
Things You Can Do With CSS Today — Smashing Magazine
The present and future of CSS are very bright indeed and if you take a pragmatic, progressive approach to your CSS, then things will continue to get better and better on your projects, too. Some of the really handy powers CSS gives you might have slipped you by, so in this article, Andy Bell will take a look into masonry layout, :is selector, clamp(), ch and ex units, updated text decoration, and
Bulletproof flag components
A clever use of CSS grid from Jay Freestone to accomplish a particular variation of the media object design pattern (where the image is centered with the
Dynamic Static Typing In TypeScript — Smashing Magazine
In this article, we look at some of the more advanced features of TypeScript, like union types, conditional types, template literal types, and generics. We want to formalize the most dynamic JavaScript behavior in a way that we can catch most bugs before they happen. We apply several learnings from all chapters of TypeScript in 50 Lessons, a book we’ve published here on Smashing Magazine late 2020
GreenSock ScrollTrigger
High five to the Greensock gang for the ScrollTrigger release. The point of this new plugin is triggering animation when a page scrolls to certain positions,
A Whole Website in a Single HTML File
I can’t stop thinking about this site. It looks like a pretty standard fare; a website with links to different pages. Nothing to write home about except
The Holy Grail Layout with CSS Grid
How to build a very common layout with CSS grid. Header on the top, footer on the bottom. Two columns, sidebar and main content. This one has navigation above the main content but within that same column.
Re-Creating the Porky Pig Animation from Looney Tunes in CSS
You know, Porky Pig coming out of those red rings announcing the end of a Looney Tunes cartoon. We’ll get there, but first we need to cover some CSS concepts.
Using fetch with TypeScript
How to make HTTP requests with fetch and TypeScript
From Design To Developer-Friendly React Code In Minutes With Anima — Smashing Magazine
The promise of seamless design to code translation goes back to the early WYSIWYG page builders. Despite the admirable goal, their biggest flaw was the code that they generated. Skepticism remains to this day and whenever this idea reappears, the biggest concerns are always related to the quality and maintainability of the code. In this article, Miroslav Bekyarov will show you how to turn our stat
The styled-components Happy Path
styled-components is a wonderfully powerful styling library for React, and over the years I've learned a lot about how to use it effectively. This article shares my personal “best practices”.
New in Chrome 88: aspect-ratio
And it was released yesterday! The big news for us in CSS Land is that the new release supports the aspect-ratio property. This comes right on the heels of
Life with ESM
ESM, meaning ES Modules, meaning JavaScript Modules. Like, import and friends.
Wrapping React.useState with TypeScript
How to make a custom hook that wraps useState with TypeScript properly
AnimXYZ
There are quite a few CSS animation libraries. They tend to be a pile of class names that you can apply as needed like "bounce" or "slide-right" and it'll...
State of JavaScript 2020
We rounded up a bunch of published 2020 annual reports right before the year ended and compiled them into a big ol' list. The end of the list called out a
Using Grommet In React Applications — Smashing Magazine
In this tutorial, Fortune Ikechi is going to show you how to use Grommet as a UI library for React applications. He’ll use Grommet as a UI library of choice to create a pricing component, this would help you have a better understanding of how to use Grommet. This tutorial will be beneficial to readers who are interested in developing responsive components in their React application using Grommet.
On Auto-Generated Atomic CSS
Robin Weser's "The Shorthand-Longhand Problem in Atomic CSS" in an interesting journey through a tricky problem. The point is that when you take on the job of
3 Approaches to Integrate React with Custom Elements
In my role as a web developer who sits at the intersection of design and code, I am drawn to Web Components because of their portability. It makes sense:
React Server Components with Next.js
Learn about React Server Components (experimental) and how they'll change how we build React applications, creating a better end-user experience.
Integrating A Dialogflow Agent Into A React Application — Smashing Magazine
When it comes to building a conversational chat assistant that could be used at a small or enterprise level, Dialogflow would most likely be one of the first options that would show up in your search list — and why wouldn’t it? It offers several features such as the ability to process audio and text inputs, provide dynamic responses using custom webhooks, connect to millions of Google-enabled devi
Dynamic, Conditional Imports
With ES Modules, you can natively import other JavaScript. Like confetti, duh:
Day 37: A new laptop and a little Vue
Day 37: A new laptop and a little Vue
Fixing Smooth Scrolling with Find-on-Page
Back when we released the v17 design (we're on v18 now) of this site. I added html { scroll-behavior: smooth; } to the CSS. Right away, I got comments like
Define function overload types with TypeScript
Have your JS expressiveness and type it too.
Let's Bring Spacer GIFs Back!
The 90s web gave us many delightful things: web rings, guestbooks, “under construction” animations, and spacer GIFs. In this article, we'll see how I use a Spacer component to solve common layout problems, and why it's often a great tool for the job in the modern web.
Creating CSS APIs without JavaScript With the datasette-css-properties plugin
Simon Willison has a project called Datasette, an open source multi-tool for exploring and publishing data. I'm not sure I'm qualified to explain it, but it's
Win a Copy of Zell Liew's Learn JavaScript Course
Zell Liew is giving away 10 free copies of his Learn JavaScript course, and entering the giveaway is pretty easy: sign up for his newsletter. I've personally
Styling Code In and Out of Blocks
There is a <code> tag in HTML. I literally just used it to wrap that tag in the previous sentence — so meta. It is an inline-by-default element that
Whack-a-Mole: The CSS Edition
We’ve seen the checkbox hack and how it can be used to build a complete state machine in CSS. Today, we’ll take that line of thought a step further and build
Custom Properties as State
Here's a fun idea from James Stanley: a CSS file (that presumably updates daily) containing CSS custom properties for "seasonal" colors (e.g. spring is
Simulating Drop Shadows with the CSS Paint API
Ask a hundred front-end developers, and most, if not all, of them will have used the box-shadow property in their careers. Shadows are enduringly popular, and
Create a Tag Cloud with some Simple CSS and even Simpler JavaScript
I’ve always liked tag clouds. I like the UX of seeing what tags are most popular on a website by seeing the relative font size of the tags, popular tags being
Integrating TypeScript with Svelte
Svelte is one of the newer JavaScript frameworks and it’s rapidly rising in popularity. It’s a template-based framework, but one which allows for arbitrary
What’s Coming To VueX? — Smashing Magazine
Vuex is the go-to state management library for Vue applications, and the Vue core team has some big plans to make it better than ever. Vuex 5 will work more like a composition API alternative but keeps all the benefits of using an official state management library. In this article, Joseph Zimmerman will take a look at what will be changing.
"Yes or No?"
Sara Soueidan digs into this HTML/UX situation. "Yes" or "no" is a boolean situation. A checkbox represents this: it's either on or off (uh, mostly). But is a
Recognizing Constraints
There’s a “C” word in web development that we don’t give enough attention to. No, I’m not talking about “continuous integration”, or even “CSS”. The “C” word
What Makes CSS Hard To Master
Tim Severien:
How Shopify Uses WebAssembly Outside of the Browser - Shopify
At Shopify, we’re keeping the flexibility of untrusted Partner code, but executing it on our own infrastructure with WebAssembly.
25 Years of JavaScript & 25 Free Courses
Pluralsight is giving away 25 courses on JavaScript for free to celebrate JavaScript's 25th birthday. It's no cheapie, either. The courses range from getting
Write Code, Get Confetti
This year I learned about the canvas-confetti npm package. It is a simple JavaScript package that injects a (virtual, <canvas>) confetti explosion into
Co-experiences: Hanging out in the digital living room
In the spring of 2019 — a full year before the COVID-19 pandemic caused the entire world to turn our living rooms into offices, schools, and gathering places — Mark Zuckerberg shared a plan to create the digital equivalent of the living room, where people could connect and hang out together. That work was already underway early […]
Creating a React Analytics Logging Library
In the first installment of the article, we examined why we built a React analytics library. We also looked at how we use the library to share data efficiently, log smarter impressions, and simplify event logging. In this second part of the article, we will focus on how we abstracted the library for use by…
Hell Yes! CSS!
Speaking of cool CSS stuff you can buy, Julia Evans' zine Hell Yes! CSS! is hot off the presses. A "zine" being 28 pages of "short, informative, and fun
Give Users Control: The Media Session API
Here’s a scenario. You start a banging Kendrick Lamar track in one of your many open browser tabs. You’re loving it, but someone walks into your space and you
How Redux Reducers Work — Smashing Magazine
If you have used Redux at any point while developing an application to manage `state`, you will most definitely have come across reducers. In this tutorial, Fortune Ikechi will show you the concept of reducers and how they work, specifically in React applications. In order to understand and better use Redux, a solid understanding of reducers is essential. Reducers provide a way to update an applic
Let’s Create a Lightweight Native Event Bus in JavaScript
An event bus is a design pattern (and while we’ll be talking about JavaScript here, it’s a design pattern in any language) that can be used to simplify
Using CSS Custom Properties to Adjust Variable Font Weights in Dark Mode
Black isn’t always slimming.
How Instagram suggests new content
Designing a constrained exploration system […]
npm ruin dev
In 2020, I rediscovered the enjoyment of building a website with plain ol’ HTML, CSS, and JavaScript — no transpilin’, no compilin’, no build tools other than
TypeScript & Relevance
In our wide world of building for the web, we have every opportunity to talk about tools. We lunge to fill every gap we find in our projects with a definitive
Very Extremely Practical CSS Art
I've always enjoyed the CSS art people create, but I’ve never ventured into it much myself. I'm familiar with many of the tricks involved, but still find it
How To Use MDX Stored In Sanity In A Next.js Website — Smashing Magazine
MDX gives you the minimalist ergonomics of Markdown with the flexibility of custom components. By combining MDX with Sanity and Next, you can build robust, team-friendly content editing experiences while keeping the pleasant and efficient developer experience of building Jamstack sites with React.
How To Migrate From WordPress To The Eleventy Static Site Generator — Smashing Magazine
If you’re a designer or developer with intermediate knowledge of HTML and JavaScript, and know your way around GitHub and the command line, this tutorial is for you. Today, Scott Dawson is going to walk step-by-step through converting a WordPress site into a static site generated from Markdown.
CommonMark: A Formal Specification For Markdown — Smashing Magazine
Markdown is a powerful markup language that allows editing and formatting in plain text format that can then be parsed and rendered as HTML. It has a declarative syntax that is both powerful and easy to learn for technical and non-technical folks. However, due to the consequential ambiguities in its original specification, there have been a number of distinct [flavors (or custom versions)](https:/
