Chromium spelling and grammar features
Delan Azabani digs into the (hopefully) coming soon ::spelling-error and ::grammar-error pseudo selectors in CSS. Design control is always nice. Hey, if we
Smashing Podcast Episode 40 With Mike Cavaliere: What Is Chakra UI For React? — Smashing Magazine
In this episode, we’re talking about Chakra UI. What is it and how can it help with your React projects? Drew McLellan talks to expert Mike Cavaliere to find out.
Working around the viewport-based fluid typography bug in Safari
Sara digs into a bug I happened to have mentioned back in 2012 where fluid type didn't resize when the browser window resized. Back then, it affected Chrome
Positioning Overlay Content with CSS Grid
Not news to any web developer in 2021: CSS Grid is an incredibly powerful tool for creating complex, distinct two-dimensional modern web layouts.
Creating Custom Emmet Snippets In VS Code — Smashing Magazine
In this article, Manuel explains why Emmet is one of his favorite productivity tools for writing HTML and CSS, and how you can create custom Emmet snippets in Visual Studio Code to help you improve your front-end workflows even more. It takes some time to create these snippets, but it’s worth the effort because you can customize Emmet to your personal preferences, automate repetitive tasks and sav
Creating A Multi-Author Blog With Next.js — Smashing Magazine
This article explains how we can connect different types of content in a Next.js application. With this technique, we can add any kind of one-to-one, one-to-many, or even many-to-many relationship to our projects. Today, Dom Habersack is going to build a blog with Next.js that supports two or more authors. You will attribute each post to an author and show their name and picture with their posts.
Browser VNC with Zero Trust Rules
Starting today, we’re excited to share that you can now shift another traditional client-driven use case to a browser. Teams can now provide their users with a Virtual Network Computing (VNC) client fully rendered in the browser with built-in Zero Trust controls.
Smashing Online Workshops (July-October 2021) — Smashing Magazine
What’s the state of HTML Email? How do we build and establish a successful design system? Frontend and design are remarkably complex these days. That’s why we invite kind, smart folks from the community to run [online workshops](https://smashingconf.com/online-workshops/) for all of us to learn together. And we have new ones coming up, and we’d like to kindly welcome you to join in.
inherit, initial, unset, revert
There are four keywords that are valid values for any CSS property (see the title). Of those, day to day, I'd say I see the inherit used the most. Perhaps
Using Custom Elements in Svelte
Svelte fully supports custom elements (e.g. <my-component>) without any custom configuration or wrapper components and has a perfect score on Custom
If we're gonna criticize utility-class frameworks, let's be fair about it
I'm not here to raise a shield protecting CSS utility frameworks. I don't even particularly like the approach, myself, and nothing is above fair criticism.
Next.js 11, Next.js Live and more: A recap of Next.js Conf Special Edition
Learn more about the latest releases announced at Next.js Conf, including Next.js 11 and Next.js Live.
How to Create CSS Charts With Interesting Shapes, Glyphs and Emoji
Let’s forego the usual circles and bars we typically see used in charts for more eccentric shapes. With online presentations more and more common today, a
Image To Text Conversion With React And Tesseract.js (OCR) — Smashing Magazine
Do you have to process data manually because it is served through images or scanned documents? An image-to-text conversion makes it possible to extract text from images to automate the processing of texts on images, videos, and scanned documents. In this article, we look at how to convert an image to text with React and Tesseract.js(OCR), preprocess images, and deal with the limitations of Tessera
Using the `outline` Property as a Collapsable Border
The outline property in CSS draws a line around the outside of an element. This is quite similar to the border property, the main exception being that outline
Client-Side Routing In Next.js — Smashing Magazine
Next.js has a file-based routing system in which each page automatically becomes a route based on its file name. Each page is a default exported React component from the pages directory that can be used to define the most common route patterns. This article will guide you through almost everything you need to know about Routing in Next.js and point you in the direction of related topics and concep
Perfect Tooltips With CSS Clipping and Masking
Clipping and masking have been around for a while now in CSS and even have pretty decent browser support. I recently worked on a project that needed to use a
Start Serving Optimized Images in Vue
Images have become extremely important to the effectiveness of websites. They speak a 1000 words, attract attention, and stimulate emotions.
How I Used the WAAPI to Build an Animation Library
The Web Animations API lets us construct animations and control their playback with JavaScript. The API opens the browser’s animation engine to developers and
A Complete Guide To Accessibility Tooling — 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 HTML Emails and SVG Generators. This time we look into different kinds of tools to help you streamline your accessibility testing process. Don’t miss the next one.
When CSS Isn’t Enough: JavaScript Requirements For Accessible Components — Smashing Magazine
Spoiler alert: tooltips, modals, tabs, carousels, and dropdown menus are some of the user interface components that require more than CSS. To ensure accessibility of your interface, JavaScript is a necessary addition to accomplish focus management, respond to keyboard events, and toggle ARIA attributes.
Safari 15: New UI, Theme Colors, and... a CSS-Tricks Cameo!
There's a 33-minute video (and resources) over on apple.com covering the upcoming Safari changes we saw in the WWDC keynote this year in much more detail.
Adding Shadows to SVG Icons With CSS and SVG Filters
Why would we need to apply shadows to SVG?
A Cornucopia of Container Queries
I don't know about y'all, but my feeds have been flooded with articles about CSS Container Queries these past few weeks. The buzz about container queries
Meet :has, A Native CSS Parent Selector (And More) — Smashing Magazine
What makes relational selector one of the most requested features and how are we, as developers, working around not having it? In this article, we’re going to check the early spec of the :has selector, and see how it should improve the CSS workflow once it’s released.
CSS-Trickz: An Experiment with Netlify's On-Demand Builders
WordPress sites have an API by default. Wanna see this site's most recent posts, with just a specific set of data... in JSON format? Here ya go. Alex Riviere
VS Code Extensions for HTML
Let's look at some extensions for VS Code that make writing and editing HTML (and languages that are basically HTML with extra powers) better. You may not
How To Build A Geocoding App In Vue.js Using Mapbox — Smashing Magazine
In this guide, Prince Chukwudire will show you how to build a simple geocoding app from scratch, using Vue.js and Mapbox. He’ll cover the process from building the front-end scaffolding up to building a geocoder to handle forward geocoding and reverse geocoding. To get the most out of this guide, you’ll need a basic understanding of JavaScript and Vue.js and how to make API calls.
How to use React Context effectively
How to create and expose React Context providers and consumers
Getting Started With Webpack — Smashing Magazine
Modern browsers provide good support for JavaScript modules, but module bundlers such as webpack stay a critical part of the JavaScript toolchain. Module bundlers such as webpack, Parcel, Rollup and also Google’s Closure Compiler were written to create optimized bundles of your code for your end-user’s browser to download and execute. In this article, Nwani Victory will take a deep dive into what
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
