React Native Skia—For Us, For You, and For Fun - Shopify
React Native Skia, an open source project, provides a set of powerful 2D drawing primitives that are consistent across iOS, Android, and the Web.
CTA Modal: How To Build A Web Component — Smashing Magazine
In this article, Nathan Smith explains how to create modal dialog windows with rich interaction that will only require authoring HTML in order to be used. They are based on Web Components that are currently supported by every major browser.
Cool Hover Effects That Use Background Properties
A while ago, Geoff wrote an article about a cool hover effect. The effect relies on a combination of CSS pseudo-elements, transforms, and transitions. A lot
What If Our Sliders Actually Slid? — Smashing Magazine
Creative Coding to level up your skills is fundamental. But when so much of the web is very “set in its way”, it takes a little more for us to think “outside the box” and have fun! In this article, Jhey Tompkins explores one of GreenSocks’ newest plugins alongside React to create an impractical whimsical spin on a well-known native element: ``.
Adding Tailwind CSS to New and Existing WordPress Themes
Nothing has had more of an impact on my productivity than adding Tailwind CSS to my workflow. It isn't even close. Here is how to set that up.
The Front-End Developer's Guide to the Terminal
If you want to learn a modern JavaScript framework like React or Angular, you better be familiar with the terminal! So many frameworks and tools assume that you're proficient with it, without ever explaining it. This blog post is your missing manual, covering all of the most important fundamentals.
Add a CSS Lens Flare to Photos for a Bright Touch
But what if we wanted to apply the same lens flare look without the use of photo editing tools? We can create a CSS lens flare to add a cinematic touch to our
Adding CDN Caching to a Vite Build
Content delivery networks, or CDNs, allow you to improve the delivery of your website’s static resources, most notably, with CDN caching. They do this by
How To Build A Progressively Enhanced, Accessible, Filterable And Paginated List — Smashing Magazine
Ever wondered how to build a paginated list that works with and without JavaScript? In this article, Manuel explains how you can leverage the power of Progressive Enhancement and do just that with Eleventy and Alpine.js.
The What, When, Why And How Of Next.js’ New Middleware Feature — Smashing Magazine
Next.js’ recent 12.0 release included a new beta feature: middleware. For a detailed explanation, you can read all about it in Sam’s previous article, “[Next.js Wildcard Subdomains](https://www.smashingmagazine.com/2021/11/nextjs-wildcard-subdomains/)”. This article, on the other hand, dives into the overall concept of middleware and how handy it can be in building things.
Tricks to Cut Corners Using CSS Mask and Clip-Path Properties
We recently covered creating fancy borders with CSS, and now we are going to cut the corners with gradients and CSS masks!
Understanding Layout Algorithms
As front-end developers, we often learn CSS by focusing on individual properties. Instead, we should focus on how the language uses those properties to calculate layouts. In this blog post, we'll pop the hood on CSS and see how the language is structured, and how to learn it effectively.
How We Built the Add to Favorite Animation in Shop - Shopify
"I just want you to feel it" - Jay Prince, from the song Feel It I use the word feeling a lot when working on animations and gestures. For example, animations or gestures sometimes feel right or wrong.
Remix: The Yang to React's Yin
Remix fills the missing piece that all React web applications need: The Network Chasm
Those HTML Attributes You Never Use — Smashing Magazine
In this article, Louis Lazaris describes and demonstrates some interesting HTML attributes that you may or may not have heard of and perhaps find useful enough to personally use in one of your projects. This post is the result of his research, and he hopes you’ll find some of these useful to you, as you build HTML pages in the coming months.
Write HTML, the HTML Way (Not the XHTML Way)
You may not use XHTML (anymore), but when you write HTML, you may be more influenced by XHTML than you think. You are very likely writing HTML, the XHTML way.
Windows High Contrast Mode, Forced Colors Mode And CSS Custom Properties — Smashing Magazine
CSS Custom Properties can be used for far more than just color, and their values update in realtime, both via display mode updates and JavaScript logic. This is powerful stuff. Eric explains how modern CSS is a powerful piece of assistive technology that can thread into it to create flexible, maintainable and adaptive digital experiences.
How To Make A Drag-and-Drop File Uploader With Vue.js 3 — Smashing Magazine
Building on a previous article on How to Build a Drag-and-Drop File Uploader, we’ll be adding some new features, but more importantly (maybe), we’ll be learning how to build it in Vue 3 and learn some best practices for Vue along the way.
Claymorphism: Will It Stick Around? — Smashing Magazine
This fresh new design trend has been picking up steam with the rising popularity of colorful inflated 3D graphics in web illustrations and with the latest Virtual Reality projects like “Horizon Worlds”. Let’s see if there is room for Claymorphism on the UI, and how we can create this effect with CSS.
Delightful React File/Directory Structure
How should we structure components and other files in our React apps? I've iterated my way to a solution I'm really happy with. In this blog post, I'll share how it works, what the tradeoffs are, and how I mitigate them.
Creating a React Library for Consistent Data Visualization - Shopify
At Shopify, we tell a lot of stories through data visualization. This is the driving force behind business decisions—not only for our merchants, but also for teams within Shopify. With more than 10,000 Shopify employees, though, it is only natural that different teams started using different tools to display data.
Code Verify: An open source browser extension for verifying code authenticity on the web
Update on June 16, 2023 at 10:30AM PT: Today we’re announcing the introduction of Code Verify for Instagram Web. The Instagram Code Verify extension is offered by Meta Open Source and is available on the official browser extension stores for Google Chrome, Microsoft Edge, and Mozilla Firefox. With Code Verify, you can confirm that your […]
A Guide To Audio Visualization With JavaScript And GSAP (Part 2) — Smashing Magazine
What started as a case study turned into a guide to visualizing audio with JavaScript. Although the output demos are in React, Jhey Tompkins isn’t going to dwell on the React side of things too much. The underlying techniques work with or without React.
An open source compositional deadlock detector for Android Java
What the research is: We’ve developed a new static analyzer that catches deadlocks in Java code for Android without ever running the code. What distinguishes our analyzer from past research is its ability to analyze revisions in codebases with hundreds of millions of lines of code. We have deployed our analyzer in Meta’s continuous integration […]
A Guide To Audio Visualization With JavaScript And GSAP (Part 1) — Smashing Magazine
What started as a case study turned into a guide to visualizing audio with JavaScript. Although the output demos are in React, Jhey Tompkins isn’t going to dwell on the React side of things too much. The underlying techniques work with or without React.
New CSS Features In 2022 — Smashing Magazine
2022 is shaping up to be a pretty great year for CSS, with a plethora of new features on the horizon. Some are already starting to land in browsers, others are likely to gain widespread browser support in 2022, while for one or two the process may be a little longer. In this article we’ll take a look at a few of them.
Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think
We’ve discussed a lot about the internals of using CSS in this ongoing series on web components, but there are a few special pseudo-elements and
When to Avoid the text-decoration Shorthand Property
In my recent article about CSS underline bugs in Chrome, I discussed text-decoration-thickness and text-underline-offset, two relatively new and
Manuel Matuzovic's CSS Specificity Demo
If you're looking for a primer on CSS specificity, we've got that. And if you're trying to get ahead of the game, you should be aware of CSS Cascade Layers as
Smashing Podcast Episode 45 With Jeremy Wagner: What Is Responsible JavaScript? — Smashing Magazine
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.
Testing Pipeline 101 For Frontend Testing — Smashing Magazine
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.
Production ready eBPF, or how we fixed the BSD socket API
We are open sourcing the production tooling we’ve built for the sk_lookup hook we contributed to the Linux kernel, called tubular
An Auto-Filling CSS Grid With Max Columns of a Minimum Size
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.
Implications Of WordPress Joining The Block Protocol — Smashing Magazine
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
Neat Optional Custom Property Values Trick
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.
Hydrogen & Tailwind: The Perfect Match for Building Beautiful Storefronts - Shopify
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.
How to Make CSS Slanted Containers in 3 Steps
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.
CSS Scroll Snap Slide Deck That Supports Live Coding
We’ll build a CSS-only slide deck that supports live coding, using native web functionality and modern styling, like CSS scroll snap.
React Server Components Best Practices You Can Use with Hydrogen - Shopify
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.
React State Management Using Easy Peasy — Smashing Magazine
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.
Fred Wang: Senior Backend Engineer
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
The CSS from-font Value Explained in 4 Demos
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.
Demystifying TypeScript Discriminated Unions
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.
Fancy CSS Borders Using Masks (Zig-Zag, Wavy, and More)
In this article, we look at modern CSS mask techniques to create three fancy CSS borders without having to use a background image.
How to Make a Scroll-Triggered Animation With Basic JavaScript
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.
Component Spacing in a Design System
How do you handle component spacing in a design system? Do you add margin directly to the components, or outsource it to another component?
Getting Started With CSS Cascade Layers — Smashing Magazine
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
Building The Real App With React Query — Smashing Magazine
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.
Modern Fluid Typography Using CSS Clamp — Smashing Magazine
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.
Using the CSS Me Not Bookmarklet
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.
Mondrian Art in CSS From 5 Coders
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.
Building A Web Code Editor — Smashing Magazine
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.
How to Make a Pure CSS 3D Package Toggle
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
A Deep CSS Dive Into Radial And Conic Gradients — Smashing Magazine
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
A New Container Query Polyfill That Just Works
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.
Notes on Josh Comeau's Custom CSS Reset
We recently talked with Elad Shechter on his new CSS reset, and shortly after that Josh Comeau blogged his.
Support Multiple Frameworks in a Monorepo
We're going to make a Yarn workspaces-based monorepo that supports multiple frameworks, including React, Vue, Svelte, and Angular.
Should CSS Override Default Browser Styles?
Every CSS ruleset you write will likely changes the defaults of something. But should CSS override browser defaults defaults?
CSS-Based Fingerprinting
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
On Yak Shaving and md-block, a new HTML element for Markdown
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