1,512 articles on Frontend.
In this episode, we’re talking about Responsible JavaScript. What does it mean for code to be responsible, and how should we approach projects differently? Drew McLellan talks to expert Jeremy Wagner to find out.
Automated testing can give you much confidence in merging your changes, especially in extensive refactoring or working with your teammates. As a result, you might have thought about including testing as part of your build routine to get the most value out of it. Don’t know where to start? Let’s implement your testing pipeline together from scratch.
We are open sourcing the production tooling we’ve built for the sk_lookup hook we contributed to the Linux kernel, called tubular
Within Drupal 10 core, we’re implementing a new auto-filling CSS Grid technique that I think is cool enough to share with the world.
When working with JavaScript-based libraries, such as React or Vue, we work with “components” which are pieces of code grouped together. A “block” is also a component, but it is high-level, asserting a definitive purpose, and defining the requirements to produce the desired layout or functionality. It is the outermost component from the hierarchy of components wrapping each other, so it has a bird
Imagine a multi-value CSS property like transform and you don't want every value applied. You might think of CSS optional custom property values.
Learn about Tailwind, our preferred way to style websites that enables developers to build beautiful storefronts quickly with Hydrogen, our React-based framework for building custom storefronts.
Here's how to created a CSS slanted container where the container itself is slanted, but the text and images are balanced for better legibility.
We’ll build a CSS-only slide deck that supports live coding, using native web functionality and modern styling, like CSS scroll snap.
A deep dive into the patterns and best practices for React Server Components learned while building Hydrogen, Shopify's React-based framework for building custom storefronts.
According to the documentation, Easy Peasy is an abstraction of Redux, providing a reimagined API that focuses on developer experience. It allows you to quickly and easily manage your state, whilst leveraging the strong architectural guarantees. We’ll use Easy Peasy as a state manager of choice to build a note application which would help us learn how it works.
I’m part of the Mambas team at Spotify, which is responsible for all the animation, presentation and personalized data in the Wrapped interactive mobile app. My job is to take the raw data from the backend and enrich it, translate it and format it for different regions before it goes to the frontend mobile engineers. That includes deciding what music to play during data stories and what images and
I found the CSS from-font value for the text-decoration-thickness property. I did a little research what I found (and learned) is interesting.
TypeScript discriminated unions are types where a key or value can be used to differentiate between the keys and values of several types at once.
In this article, we look at modern CSS mask techniques to create three fancy CSS borders without having to use a background image.
Scroll-triggered events are very useful. There are libraries to create them but let's look at how to do it ourselves with a small handful of JavaScript.
How do you handle component spacing in a design system? Do you add margin directly to the components, or outsource it to another component?
We all have run into CSS collisions and sudden regressions in our codebases when new styles are written or 3rd-party styles are added. This is because of the interdependence of styles due to source order, specificity, and inheritance. Some ways to control the cascade have included methodologies like ITCSS and BEM and other newer native features. Cascade layers will be the ultimate native solution
You probably know how annoying it could be to handle different states, if you have ever built React applications that use asynchronous data. In this article, Georgii Perepecho explains the most common React Query features that you need to be familiar with when creating a real-life application that is stable when testing.
In this article, Adrian Bece will explore fluid typography principles, use-cases, best practices, implementation with CSS clamp function and how to calculate the right parameters. He’ll also show you how to address some accessibility concerns and watch out for one important issue that you cannot fix as of yet, but have to be aware of regardless.
The CSS Me Not bookmarklet lets you see all of the CSS files on a site, notably unused files you might want to prevent from loading.
I saw some Mondrian Art in CSS going around the other day and figured I'd go looking for others I've seen over the years and round them up.
If you’re a developer who’s thinking about building a platform that requires a code editor in one form or another, then this article is for you. This article explains how to create a web code editor that displays the result in real time with the help of some HTML, CSS and JavaScript.
You know how you can get cardboard boxes that come totally flat? You fold ‘em up and tape ‘em to make them into a useful box. Then when it’s time to recycle
CSS gradients are a useful CSS feature that can be used to create interesting UI effects or even help us in drawing something without the need to create HTML elements for it. In this article, we’ll be taking a closer look at two gradients: `conic-gradient` and `radial-gradient`. You’ll see how each one of them works in detail, what the differences and similarities are between them, how and where t
There is an easy-to-use CSS container query polyfill now. You essentially conditionally load it and forget about it. Then write spec-compliant container queries code.
We recently talked with Elad Shechter on his new CSS reset, and shortly after that Josh Comeau blogged his.
We're going to make a Yarn workspaces-based monorepo that supports multiple frameworks, including React, Vue, Svelte, and Angular.
Every CSS ruleset you write will likely changes the defaults of something. But should CSS override browser defaults defaults?
Fingerprinting is bad. It's a term that refers to building up enough metadata about a user that you can essentially figure out who they are. JavaScript has
Lea Verou made a Web Component for processing Markdown. Looks like there were a couple of others out there already, but I agree with Lea in that this is a
The first time I had my breath taken away by a humble scrollbar was on this very site. When CSS-Tricks v17 rolled out with its FAT CHONKY BOI, my jaw dropped.
How do you make a great website? Everyone has an answer at the ready: Flashy animations! The latest punk-rock CSS trick! Gradients! Illustrations! Colors to
Range inputs have notoriously been a pain to style. Each browser renders the input differently requiring you to use vendor prefixes in order to create a cohesive look and feel. In this article, we’ll take a look at the quirkiness of the HTML range input and demonstrate how to style the input to look consistent across all major browsers.
Huh! I did not realize that CSS custom properties had their own resolution behavior for how !important works in their values. Uh, despite writing a guide
Jordan Scales explores the computer science concept of topological sorting, and what it might look like if applied to the concept of z-index in CSS. So, you
Three cheers for (draft stage) progress on a Sanitizer API! It's gospel that you can't trust user input. And indeed, any app I've ever worked on has dealt
I was reading Jake's "Cross-fading any two DOM elements is currently impossible" which is a wonderfully nerdy deep dive into how there is no real way to
Ya know, I used to do one of these posts after making a few podcast appearances I hadn't had a chance to link up yet, so I could share them. As fate would
Take two minutes right now and visit your current project in a browser. Then, using only the Tab key, you should be able to navigate between interactive
What if HTML had "tabs"? That would be cool, says I. Dave has been spending some of his time and energy, along with a group of "Tabvengers" from OpenUI, on
There’s a great challenge that comes with building Jamstack applications on the web. In this article, Caleb Olojo will be using Next.js to bootstrap your app. This does not mean that the [create-react-app](https://create-react-app.dev/) library will not work. You can make use of any one that you find convenient. You’re using Next.js because of the many perks that come with it.
I was playing this game on Apple Arcade the other day called wurdweb. It's a fun little game! Little touches like the little shape dudes that walk around the
Apple Music has this "Spatial Audio" feature where the direction of the music in your headphones is based on the location of the device. It's tough to explain
One of Jhey’s main mantras is to make learning fun. In this article, he shows you ways to level up your skills by bringing your ideas to life, and not forgetting that you can be playful with code. With that mindset, every idea is bound to become an opportunity to try something new. It’s fun to make things that we may not create on a day-to-day basis. Demos like this can pose different challenges a
I love little touches that make a website feel like more than just a static document. What if web content wouldn’t just “appear” when a page loaded, but
Being the first to build an App Clip in React Native that was going to be surfaced to millions of Shopify's Shop app users each day proved to be a challenging task.
There are a few ways in which you can make a large code-base easy to maintain. In this article, Nirmalya discusses some of the complex problems that he faced while building and maintaining large Next.js applications. He always explains how these problems can be solved by using various tools. Most of these points will apply to any front-end application. For any front-end application, the main prior
The browser has long been a medium for art and design. From Lynn Fisher's joyful A Single Div creations to Diana Smith's staggeringly detailed CSS paintings,
I have a set of baseline CSS styles that come with me from project to project. In the past, I'd use a typical CSS reset, but times have changed, and I believe I have a better set of global styles!
The separation of content and presentation that CSS gives us always comes in handy when we need to adapt designs to better serve different communities. With a little CSS, we can adapt our web designs to be more accommodating for people with dyslexia. In this article, John C Barstow will explore those techniques by adding a dyslexia-friendly mode to an existing design.
What’s the state of CSS, Vue.js and Next.js? What are new, smart interface design patterns we could use? Let’s figure it out. With our [online workshops on UX, front-end and design](https://smashingconf.com/online-workshops).
Handling payments inside your apps is crucial to building a business online. For many developers, the leading choice for handling payments is Stripe.
Wildcard domains often go under the radar. Hosting with a wildcard subdomain enables your users to visit your site on any subdomain of your domain (*.example.com), and as you can imagine, we can use this to create unique user experiences which we’ll be exploring in this article through a Next.js lens.
Egor Kloos describes a situation where a (purely visual) designer asks for some changes to a component. There is a misunderstanding where the (code monkey)
Did you know that your chosen color palette can have an impact on how much energy your website uses? Even a more environmentally friendly choice of colors can reduce the impact on the battery life of mobile devices. In this article, Michelle Barker shares advice on the not-so-obvious things you have to keep in mind when handling colors in CSS today.
Every time the Workers runtime code is built, a script runs over the public APIs and generates the Rust and TypeScript types as well as a JSON file containing an intermediate representation of the static types. The types are sent to the appropriate repositories and the JSON file is uploaded as well.
Now you can use JavaScript modules, also known as ECMAScript or “ES” modules, on Cloudflare Workers. This replaces the old “addEventListener” syntax with a new “import” and “export” semantics that makes it really easy to write reusable, modular code.
Jamstack has been in the website world for years. Static Site Generators (SSGs) — which often have content that lives right within a GitHub repo itself — are
In order to create lush, realistic shadows in CSS, we need to use multiple layers and colors. How do we come up with all of the parameters, though? I've built a tool that'll help.
