Static vs Unit vs Integration vs E2E Testing for Frontend Apps
What these mean, why they matter, and why they don't
Managing Shared State In Vue 3 — Smashing Magazine
Writing large-scale Vue applications can be a challenge. Using shared state in your Vue 3 applications can be a solution to reducing this complexity. There are a number common solutions to solving state. In this article, I will dive into the pros and cons of approaches like factories, shared objects, and using Vuex. I’ll also show you what is coming in Vuex 5 that might change how we all use share
Serverless Functions: The Secret to Ultra-Productive Front-End Teams
Modern apps put high demands on frontend devs. Use serverless functions to avoid complexity & helps your team ship more with less stress.
Shipit! Presents: How We Write React Native Apps - Shopify
Join us as we talk with developers setting the React Native standards at Shopify. They’ll share more on how we write performant React Native apps.
Useful VS Code Extensions For Front-End Developers — Smashing Magazine
Meet useful Visual Studio Code extensions for web developers: little helpers to minimize slow-downs and frustrations, and boost developer’s workflow along the way. Recently, we’ve also covered CSS auditing tools, CSS generators and accessible front-end components — you might find them useful, too. In this post, we look into useful VS Code extensions for front-end development, from fine productivit
A Thorough Analysis of CSS-in-JS
Wondering what’s even more challenging than choosing a JavaScript framework? You guessed it: choosing a CSS-in-JS solution. Why? Because there are more than
Accessible SVGs: Perfect Patterns For Screen Reader Users — Smashing Magazine
Discover which SVG patterns we should avoid and which patterns are the most inclusive when comparing different combinations of OSs, browsers, and screen readers. Carie will also be running an online workshop on Accessible Front-End Patterns all around front-end accessibility.
What I Learned Building a Word Game App With Nuxt on Google Play
I fell in love with coding the moment I created my first CSS :hover effect. Years later, that initial bite into interactivity on the web led me to a new goal:
CSS Container Queries: Use-Cases And Migration Strategies — Smashing Magazine
CSS Container queries bring media queries closer to the target elements themselves and enables them to adapt to virtually any given container or layout. In this article, Adrian Bece is going to cover CSS container query basics and how to use them today with progressive enhancement or polyfills.
Should DevTools teach the CSS cascade?
Stefan Judis, two days before I mouthed off about using (X, X, X, X) for talking about specificity, has a great blog post not only using that format, but
Svelte for the Experienced React Dev
This post is an accelerated introduction to Svelte from the point of view of someone with solid experience with React. I’ll provide a quick introduction, and
CSS Hell
Collection of common CSS mistakes, and how to fix them
Learn CSS!
Ooo look at this mighty SEO flex from Google: Learn CSS! Well deserved — this is great content. Twenty-three chapters taking you through all the fundamentals
JSON in CSS
Jonathan Neal tweeted a heck of a little CSS trick the other day, putting JSON inside CSS and plucking it out with JavaScript. Valid values for custom
fit-content and fit-content()
Here's some hardcore deep-dive CSS nerdery from PPK. If you can wrap your mind around min-content (the smallest an element can be based on the content it
How to Create Neon Text With CSS
Neon text can add a nice, futuristic touch to any website. I’ve always loved the magic of neon signs, and wanted to recreate them using CSS. I thought I’d
How To Create, Edit And Animate SVGs All In One Place With SVGator 3.0 — Smashing Magazine
Three years ago, we published a comprehensive introduction to the basic use of SVGator. At that time it was an app meant solely for animating SVG files created in other apps. Two years ago, we introduced you to a new version of SVGator and its improved animation capabilities. Today, we are taking a closer look at SVGator 3.0, a new major release of the popular SVG application that lets you create,
Making Disabled Buttons More Inclusive
Let’s talk about disabled buttons. Specifically, let’s get into why we use them and how we can do better than the traditional disabled attribute in HTML
Next Gen CSS: @container
Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec being championed by Miriam Suzanne of Oddbird, and a
CSS Pie Timer Re-Revisited
Kitty reflected on an ancient blog post here on CSS-Tricks on how to make an animated pie timer. The old technique is still clever. The new technique is
A Primer On CSS Container Queries — Smashing Magazine
In more recent years, design systems and component libraries have gained popularity. There is also a desire to build once, deploy anywhere. Meaning a component developed in isolation is intended to work in any number of contexts to make building complex interfaces more efficient and consistent. CSS container queries have landed and are now available for experimentation. Let’s look at what problem
Migrating from Parcel to Snowpack
I find build tooling endlessly interesting, especially right now as we're in a juicy next-gen transitional period with players like Vite, wmr, Snowpack, and
Get Started With React By Building A Whac-A-Mole Game — Smashing Magazine
Want to get started with React but struggling to find a good place to start? This article should have you covered. We’ll focus on some of the main concepts of React and then we’ll be building a game from scratch!
Some Typography Links IV
These are a few great links about typography that have been burning a hole in my saved bookmarks folder that I'm just now getting around to sharing. There's good stuff in there, from how to choose typefaces for app design to ideas for how to fix the concept of font sizing in CSS.
Let’s use (X, X, X, X) for talking about specificity
I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and
Creating Colorful, Smart Shadows
A bona fide CSS trick from Kirupa Chinnathambi here. To match a colored shadow with the colors in the background-image of an element, you inherit the
Smashing Podcast Episode 36 With Miriam Suzanne: What Is The Future Of CSS? — Smashing Magazine
In this episode, we’re starting our new season of the Smashing Podcast with a look at the future of CSS. What new specs will be landing in browsers soon? Drew McLellan talks to expert Miriam Suzanne to find out.
Swipey Image Grids
I hope people think of SVG as a vector format that is good for drawing things. There is plenty more to know, but here's one more: SVG is good for composition.
The Evolution Of Jamstack — Smashing Magazine
Web-oriented databases, frameworks like Nuxt and Next.js, and even frameworkless approaches are evolving the Jamstack, but the core principles are more powerful than ever. As the developer community has grown, there’s also been more noise, and we’re even starting to test the boundaries of Jamstack’s best practices. It feels like the right time to both revisit the original vision some of us had fiv
List Markers and String Styles
Lists—we’ve all worked with them in one form or another. I’m talking about HTML’s <ol> and <ul>. Much of the time, because we desire styling
SSHing to my Raspberry Pi 400 from a browser, with Cloudflare Tunnel and Auditable Terminal
This is how I set up a Pi 400 on my home network, used Cloudflare Tunnel to connect it to the Cloudflare network, used Auditable Terminal to connect to the Pi 400 via Cloudflare and the tunnel using nothing more than a browser.
A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors — Smashing Magazine
The CSS Working Group Editor’s Draft for [Selectors Level 4](https://drafts.csswg.org/selectors-4/) includes several pseudo-class selectors that already have proposal candidates in most modern browsers. This guide will cover ones that currently have the best support along with examples to demonstrate how you can start using them today!
The Making (and Potential Benefits) of a CSS Font
Not a typical one, at least. Each character is an HTML element, built with CSS. A true web font!
How to Add a Double Border to SVG Shapes
Let’s say someone asks you to add a double border to some random geometric SVG shapes. For some reason, you can’t use any graphic editor — they need to be
A Complete Guide To Incremental Static Regeneration (ISR) With Next.js — Smashing Magazine
Incremental Static Regeneration (ISR) is a new evolution of the Jamstack, allowing you to update static content instantly without needing a full rebuild of your site. The hybrid approach of Next.js allows you to use ISR for e-commerce, marketing pages, blog posts, ad-backed media, and more. In this article, Lee Robinson will explore a new evolution of the Jamstack: Incremental Static Regeneration
Say Hello to CSS Container Queries
Container queries are finally here! Now available behind a flag in the latest version of Chrome Canary, you can go ahead and experiment to your heart’s
Management of Native Code and React Native at Shopify - Shopify
We had to determine how to leverage React Native while still using iOS and Android native features, and when and how we write native code.
A Zero Trust terminal in your web browser
Starting today, your team can use that same platform to seamlessly connect to non-HTTP resources from inside of a browser with the same level of Zero Trust control available in web applications.
Overflow Issues In CSS — Smashing Magazine
You may have come across horizontal scrollbar issues, especially on mobile, if you’re a front-end developer. Because there are many causes of scrollbar problems, there is no straightforward solution. Some issues can be fixed quickly, and some need a little debugging skill. In this article, Ahmad Shadeed will explore the causes of overflow issues and how to solve them. We will also explore how mode
A Complete Guide To HTML Email — Smashing Magazine
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered CSS generators, SVG generators and accessible front-end components. This time we look into templates and tools for building and designing HTML emails. Don
CSS Is, In Fact, Awesome
You've seen the iconic image. Perhaps some of what makes that image so iconic is that people see what they want to see in it. If you see it as a critique of
Coordinating Svelte Animations With XState
This post is an introduction to XState as it might be used in a Svelte project. XState is unique in the JavaScript ecosystem. It won’t keep your DOM synced
Vanilla JavaScript Code Snippets — Smashing Magazine
In a new series of posts, we highlight some of the useful tools and techniques for developers and designers. This time around, let’s look at vanilla JavaScript code snippets — resources and lightweight libraries to help you solve a problem without a large overhead or third-party dependencies.
Meet Utopia: Designing And Building With Fluid Type And Space Scales — Smashing Magazine
By systemizing the fundamentals of typography and space, and leaning into the inherent fluidity of the web, a free new **CSS tool** called [Utopia](https://utopia.fyi/) offers an alternative to breakpoint-driven design. This shared language between design and development streamlines communication and encourages the creation of bespoke constraints for your projects to ensure consistent and harmonio
You want margin-inline-start
David Bushell in ”Changing CSS for Good“:
Building a Magical 3D Button
Every action we take on the web starts with a button click, and yet most buttons are ho-hum and uninspired. In this tutorial, we'll build an animated 3D button with HTML and CSS that sparks joy.
SVG Generators — Smashing Magazine
In a new series of posts, we highlight some of the useful tools and techniques for developers and designers. Last weeks, we’ve covered CSS auditing tools, CSS generators and accessible front-end components. This time around, Iris Lješnjanin will take a look at SVG generators — for everything from shapes and backgrounds to SVG path visualizers and SVG → JSX generators.
Reactivity In Vue — Smashing Magazine
Reactivity is the ability for a variable (array, string, number, object, etc) to update when its value or any other variable that it makes reference to is changed after declaration. In this article, Timi Omoyeni is going to look at reactivity in Vue, how it works, and how you can create reactive variables using newly created methods and functions.
Takes on State
React is actually a bit of an outlier with state management. While it has first-class tools like useState and Context, you're more own your own for reactive
Browser Isolation for teams of all sizes
Protecting endpoints from browser-born zero-day attacks and malware with remote browser isolation is now easy for teams of any size.
Image Fragmentation Effect With CSS Masks and Custom Properties
Geoff shared this idea of a checkerboard where the tiles disappear one-by-one to reveal an image. In it, an element has a background image, then a CSS Grid
JavaScript Pass By Value Function Parameters
How it works and how to work with it... and around it
It's always the stacking context.
In "What the heck, z-index??," Josh Comeau makes the analogy of layer groups in design software like Photoshop or Figma to stacking contexts in CSS. If you've
A Complete Guide To Accessible Front-End Components — Smashing Magazine
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered CSS Auditing Tools and CSS Generators, and this time we look into reliable accessible components: from tabs and tables to toggles and tooltips. We sincerely hope that these tools and techniques will prove to be useful in your day-to-day work — and most important
Platform News: Prefers Contrast, MathML, :is(), and CSS Background Initial Values
In this week’s round-up, prefers-contrast lands in Safari, MathML gets some attention, :is() is actually quite forgiving, more ADA-related lawsuits,
What’s New In Flutter 2? — Smashing Magazine
As Flutter keeps evolving, there are more and more things we can do with it, but it’s still not reasonable to say that Flutter can be used for any app development project of any kind. Flutter has been transitioning from a cross-platform mobile development SDK for Android/iOS into a tool that allows you to run the same code natively in a browser on Windows, Linux and macOS. With Flutter 2, non-mobi
The Gang Goes on JS Danger
The JS Party podcast sometimes hosts game shows. One of them is Jeopardy-esque, called JS Danger, and some of us here from CSS-Tricks got to be the guests
Creating Patterns With SVG Filters
For years, my pain has been not being able to create a somewhat natural-looking pattern in CSS. I mean, sometimes all I need is a wood texture. The only
CSS Generators — Smashing Magazine
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. This time Iris Lješnjanin brings you CSS Generators: from CSS shadows to easing gradients to CSS overlays to CSS doodles.
Platform News: Defaulting to Logical CSS, Fugu APIs, Custom Media Queries, and WordPress vs. Italics |
Looks like 2021 is the time to start using CSS Logical Properties! Plus, Chrome recently shipped a few APIs that have raised eyebrows, SVG allows us to