Table of Contents with IntersectionObserver
If you have a table of contents on a long-scrolling page, thanks to, say, position: fixed; or position: sticky;, the IntersectionObserver API in JavaScript is
The Guide To Ethical Scraping Of Dynamic Websites With Node.js And Puppeteer — Smashing Magazine
All of us use web scraping in our everyday lives. It merely describes the process of extracting information from a website. For a lot of web scraping tasks, an HTTP client is enough to extract a page’s data. However, when it comes to dynamic websites, a headless browser sometimes becomes indispensable. In this tutorial, Andreas Altheimer will build a web scraper that can scrape dynamic websites ba
The WordPress Evolution Toward Full-Site Editing
The block editor was a game-changer for WordPress. The idea that we can create blocks of content and arrange them in a component-like fashion means we have a
Too Many SVGs Clogging Up Your Markup? Try `use`.
Recently, I had to make a web page displaying a bunch of SVG graphs for an analytics dashboard. I used a bunch of <rect>, <line> and <text>
How to write a Constrained Identity Function (CIF) in TypeScript
A handy advanced TypeScript pattern to increase your productivity.
How to write a React Component in TypeScript
There are plenty of ways to do it, here's how I recommend typing React Components
The Importance of Learning CSS
I know so many super-talented developers who share the same achilles heel: CSS. Instead of trying to “outrun” CSS, this article explores why leaning in and going deeper can be a tremendous boon for your development life and your career.
Creating An Outside Focus And Click Handler React Component — Smashing Magazine
In this article, we’ll look at how to create an outside focus and click handler with React. You’ll learn how to recreate an open-source React component (react-foco) from scratch in doing so. To get the most out of this article, you’ll need a basic understanding of JavaScript classes, DOM event delegation and React. By the end of the article, you’ll know how you can use JavaScript class instance pr
How to Map Mouse Position in CSS
Let’s look at how to get the user’s mouse position and map it into CSS custom properties: --positionX and --positionY.
CSS Border Font
Every letter in this "font" by Davor Suljic is a single div and drawn only with border. That means employing some trickery like border-radius with exotic
Next.js on Netlify
If you want to put Next.js on Netlify, here's a 5 minute tutorial¹. One of the many strengths of Next.js is that it can do server-side rendering (SSR) with a
The Things I Add to Tailwind CSS Right Out of the Box
In every project where I use Tailwind CSS, I end up adding something to it. Some of these things I add in every single project. I’ll share these with you, but
TypeScript Function Syntaxes
The syntax for various functions and function types in TypeScript with simple examples.
Building A Discord Bot Using Discord.js — Smashing Magazine
An introduction to building a Discord bot using the Discord.js module. The bot will share random jokes, assign or revoke user roles, and post tweets of a specific account to a Discord channel. In this article, Subha Chanda will showu you how to build a bot from scratch using JavaScript and with help from Discord.js. He’ll cover the process from building the bot up to deploying it to the cloud.
Hiding Content Responsibly
We've covered the idea of hiding things in CSS many times here, the most recent post being Marko Ilic's "Comparing Various Ways to Hide Things in CSS" which
React Component Tests for Humans
React component tests should be interesting, straightforward, and easy for a human to build and maintain.
What's the Backup Plan for Your WordPress Site?
Of all the reasons we love and use Jetpack for CSS-Tricks—a poster child WordPress site—is that we can sleep easy at night knowing we have real-time backups
Create Responsive Image Effects With CSS Gradients And aspect-ratio — Smashing Magazine
A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. The newly supported `aspect-ratio` property in combination with `object-fit` provides a remedy to this headache of the past! In this article, Stephanie Eckles will show you how to use these properties, in addition to creating a responsive gradient image effect for extra flair.
Three Ways to Blob with CSS and SVG
Blobs are the smooth, random, jelly-like shapes that have a whimsical quality and are just plain fun. They can be used as illustration elements and background
Barebones CSS for Fluid Images
Zach takes a look at some fundamental HTML+CSS usage for fluid, responsive images. Most of it, I'd say, is what you'd expect, but things get weird when srcset
Let’s Create a Custom Audio Player
HTML has a built-in native audio player interface that we get simply using the <audio> element. Point it to a sound file and that’s all there is to it.
Listify a JavaScript Array
Make a human readable list from an array in JavaScript.
Use CSS Clamp to create a more flexible wrapper utility
I like Andy's idea here:
How to Create a Shrinking Header on Scroll Without JavaScript
Imagine a header of a website that is nice and thick, with plenty of padding on top and bottom of the content. As you scroll down, it shrinks up on itself,
Vercel & Next.js Experts Help Teams Build the Next Big Thing
Learn more about how to collaborate, build, and succeed with one of Vercel's Agency Experts, or become an Agency Expert today.
Building A Web App With React, Redux And Sanity.io — Smashing Magazine
Headless CMS is a powerful and easy way to manage content and access API. Built on React, Sanity.io is a seamless tool for flexible content management. It can be used to build simple to complex applications from the ground up. In this article, Ifeanyi Dike explains how to build a simple listing app with Sanity.io and React. The global states will be managed with Redux and the application will be s
HTML Video Sources Should Be Responsive
Scott Jehl doesn't mince words here:
Nested Media Queries
We don't have "regular" nesting in CSS. Maybe this becomes a thing someday, or something like it. That would be cool, although that pre-spec doesn't mention
An Interactive Guide to CSS Transitions
This comprehensive guide shows how to use CSS transitions! A back-to-basics look at the fundamental building blocks we need to create microinteractions and other animations.
Smashing Podcast Episode 35 With Stephanie Stimac & Melanie Richards: What’s Next For HTML Controls? — Smashing Magazine
In this episode, we’re talking about HTML controls. Why are they so hard to style, and how might that change in the future? Drew McLellan talks to Microsoft’s Stephanie Stimac and Melanie Richards to find out.
(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.