Developer Spotlight: Winning a Game Jam with Jamstack and Durable Objects
Guido won the innovative category in one of the biggest Game Jams with a combination of Pages, Durable Objects, modern browser APIs, and a hefty amount of ingenuity.
Defining and Applying UI Themes Using the Mimcss CSS-in-JS Library
Theming UI refers to the ability to perform a change in visual styles in a consistent manner that defines the “look and feel” of a site. Swapping color
Other Looks at the Conditional Border Radius Trick
Remember when Ahmad Shadeed wrote about that border-radius "toggle" he found in Facebook's CSS? It was interesting! I covered it. A few weeks after that surge
Useful React Hooks That You Can Use In Your Projects — Smashing Magazine
React class-based components are messy, confusing, hard for humans and machines. But before React 16.8, class-based components were mandatory for any projects that require states, life-cycle methods, and many other important functionalities. All these changed with the introduction of hooks in React 16.8. Hooks are game-changers. They have simplified React, made it neater, easier to write and debug
Semantic menu context
Scott digs into the history of the <menu> element. He traced it as far back as HTML 2 (!) in a 1994 changelog. The vibe then, it seems, was to mark up a
Quick and Dirty Bootstrap Overrides at Runtime
Bootstrap 5.2 shipped with solutions for the methods covered in this post. So, if you're using Bootstrap 5.2 or newer, you should be able to tinker with CSS
Detecting Specific Text Input with HTML and CSS
Louis Lazaris breaks down some bonafide CSS trickery from Jane. The Pen shows off interactivity where:
React Suspense: Lessons Learned While Loading Data
Suspense is React’s forthcoming feature that helps coordinate asynchronous actions—like data loading—allowing you to easily prevent inconsistent state in your
Localizing Your Next.js App — Smashing Magazine
Internationalized routing is not exactly a new feature on Next.js. (It has been out since [v.10](https://nextjs.org/blog/next-10).) In this article, we are not only checking what we get from this feature, but also how to leverage such functionalities to achieve the best user experience and a smooth developer experience as well. Keep reading if you enjoy self-documented code, lean bundle-sizes and
The State Initializer Pattern
A simple pattern used in libraries like downshift and ReachUI to enable component/hook users to initialize your state and even reset it to that initial value.
Introducing Svelte, and Comparing Svelte with React and Vue
Josh Collingsworth is clearly a big fan of Svelte, so while this is a fun and useful comparison article, it's here to crown Svelte the winner all the way
Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline
The Scroll-linked Animations specification is an upcoming and experimental addition that allows us to link animation-progress to scroll-progress: as you
GraphQL On The Front-End (React And Apollo) — Smashing Magazine
Within the last decade, technologies like GraphQL have changed how we build web apps and how they communicate with each other. GraphQL provides certain benefits over REST APIs — let’s find out what they are. In this article, David Atanda will cover advanced topics to achieve real-time update of data using the update() function, subscription, and Optimistic UI. All in a bit to improve user experien
How to React ⚛️
Let's see how learning React ⚛️ in the right order can make it less overwhelming.
A Deep Dive Into Serverless UI With TypeScript — Smashing Magazine
Serverless UI is simply a free, open-source command-line utility for quickly building and deploying serverless applications on the AWS platform. In this article, we will learn and cover everything needed on using Serverless UI to deploy our projects or serverless applications to cloud services providers.
Responsible JavaScript
High five to Jeremy on the big release of Responsible JavaScript on A Book Apart. There is a lot of talk about how the proliferation of JavaScript has had a
Proxying Third-Party JavaScript as First-Party JavaScript (and the Potential Effect on Analytics)
First, check out how incredibly easy it is to write a Cloudflare Worker to proxy another URL:
CSS-ing Candy Ghost Buttons
Recently, while looking for some ideas on what to code as I have zero artistic sense so the only thing I can do is find pretty things that other people have
Building an Angular Data Grid With Filtering
Kendo UI makes it possible to go from a basic idea to a full-fledged app, thanks to a massive component library. We're talking well over 100 components that
Get a catch block error message with TypeScript
TypeScript forces you to acknowledge you can't know what was thrown making getting the error message a pain. Here's how you can manage it.
Sticky Definition Lists
I ran across this 30 seconds of code website the other day, and they have a CSS section which is really good! The first example snippet I looked at was this
Optimizing Next.js Applications With Nx — Smashing Magazine
Nx is a build framework that facilitates optimization, efficient scaling of applications, and other features such as shared libraries and components. In this article, Melvin Kosisochukwu will be looking at how you can effectively scale Next.js applications by using Nx. If you’re a developer looking to optimize applications and create reuseable components across applications, this article is for yo
The Greatest CSS Tricks Vol. I eBook (PDF and EPUB)
When I wrote the "book" The Greatest CSS Tricks Vol. I, I put "book" in quotes because there wasn't anything terribly book-like about it. The only way you
A Deep Dive Into object-fit And background-size In CSS — Smashing Magazine
If we use a width and height that isn’t proportional to the image’s aspect ratio, the image might either be compressed or stretched. That isn’t good, and it can be solved either with object-fit for an img element or by using background-size. In this article, Ahmad Shadeed will go through how `object-fit` and `background-size` work, when you can use them, and why, along with some practical use case
An Introduction To Quasar Framework: Building Cross-Platform Applications — Smashing Magazine
Quasar is an open-source Vue.js-based cross-platform framework that allows you, as a developer, to easily build apps for both desktop and mobile using technologies such as Cordova and Electron and writing your code once. The app we’ll build will store and get its data from Firebase, meaning that we will also be seeing how to use Firebase in Quasar.
Can Include (a Certain HTML element within another Certain HTML Element)
A single-serving website from Alexander Vishnyakov for testing if it's valid to put any particular HTML element within another type of HTML element. Kinda
Exploring the CSS Paint API: Rounding Shapes
Adding borders to complex shapes is a pain, but rounding the corner of complex shapes is a nightmare! Luckily, the CSS Paint API is here to the rescue! That’s
What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?
It's not uncommon for my front-end workflow to go something like this:
Building The SSG I’ve Always Wanted: An 11ty, Vite And JAM Sandwich — Smashing Magazine
Back in January 2020, Ben Holmes set out to do what just about every web developer does each year: rebuild his personal site. In this article, he shares his story of how he set out to build his own build pipeline from absolute ground zero and created [Slinkity](https://slinkity.dev/).
Introducing the Payment Element
Today, we're introducing the Payment Element, an embeddable UI component for your checkout flow that supports 18 payment methods with a single integration.
An Interview With Elad Shechter on "The New CSS Reset"
Hey folks! Elad reached out to me to show me his new CSS reset project called the-new-css-reset. It’s quite interesting! I thought a neat way to share it with
Solving CLS Issues In A Next.js-Powered E-Commerce Website (Case Study) — Smashing Magazine
Cumulative Layout Shift is one of the hardest core web vital to debug. In this article, we go through different tools to investigate CLS, when to use them(and when not), and solutions to some of the CLS issues we faced in our Next.js-based e-commerce website.
Smart CSS Solutions For Common UI Challenges — Smashing Magazine
Writing CSS has probably never been more fun and exciting than it is today. In this post we’ll take a look at common problems and use cases we all have to face in our work and how to solve them with modern CSS. If you’re interested, we’ve also just recently covered [CSS auditing tools](https://www.smashingmagazine.com/2021/03/css-auditing-tools/), [CSS generators](https://www.smashingmagazine.com/
Bonsai Browser
Web-browser for research that helps programmers think clearly.
Less Absolute Positioning With Modern CSS
Ahmad Shadeed blogs the sentiment that we might not need to lean on position: absolute as much as we might have in the past. For one thing: stacking elements.
How Remix makes CSS clashes predictable
Remix has this beautifully simple feature for CSS that I want to tell you all about.
Upcoming Live Workshops On Front-End & UX (Oct 2021–Jan 2022) — Smashing Magazine
Do you like a good interface design challenge? What about accessibility testing and design systems? Or maybe Next.js and advanced CSS? With our [new online workshops](https://smashingconf.com/online-workshops/) on front-end & design, we cover all of it. Below you’ll find a schedule of what’s coming up next. Ah, and [here
WooCommerce + Google Analytics
Google Analytics is powerful analytics software. A common way to use it is to just slap the JavaScript snippet on every page template you have and let it
Useful React APIs For Building Flexible Components With TypeScript — Smashing Magazine
React with JSX is a fantastic tool for making easy-to-use components. Typescript components make it an absolute pleasure for developers to integrate your components into their apps and explore your APIs. Learn about three lesser-known React APIs that can take your components to the next level, and help you build even better React Components in this article.
The Autofill Dark Pattern — Smashing Magazine
A “dark pattern” is a deceptive UX pattern that tricks users into doing things they may not really want to do. Autofill is a widespread feature either by choice or by accident: who hasn’t accepted to let the browser save/use web form information, either on purpose or by mistake? In this article, Alvaro Montoro does a little experiment to find out how much privacy is taken away from users across th
Composable CSS Animation In Vue With AnimXYZ — Smashing Magazine
Most animation libraries like GSAP and Framer Motion are built purely with JavaScript or TypeScript, unlike AnimXYZ, which is labelled “the first composable CSS animation toolkit”, built mainly with SCSS. While a simple library, it can be used to achieve a lot of awesome animation on the web in a short amount of time and little code. In this article, Ejiro Asiuwhu will show you how to use the Anim
Building a Tennis Trivia App With Next.js and Netlify
Today we will be learning how to build a tennis trivia app using Next.js and Netlify. This technology stack has become my go-to on many projects. It allows
A Themeable React Data Grid With Great UX-Focused Features
KendoReact can save you boatloads of time because it offers pre-built componentry you can use in your app right away. They look nice, but more importantly,
A Guide To CSS Debugging — Smashing Magazine
Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. Today, Stephanie Eckles will look at a few categories bugs often fit into, see how you can evaluate the situation, and explore techniques that help prevent these bugs.
Quickly Testing CSS Fallbacks
Dumb trick alert!
Animation Techniques for Adding and Removing Items From a Stack
Animating elements with CSS can either be quite easy or quite difficult depending on what you are trying to do. Changing the background color of a button when
How To Build An Expandable Accessible Gallery — Smashing Magazine
One of the use cases for using CSS Grid is to display a gallery of images, but a gallery on its own may not be that exciting. In this article, Silvestar Bistrović will be looking at how to set up a gallery that is expandable as well as accessible with a few tips and tricks along the way. Let’s get started!
Comparing HTML Preprocessor Features
Of the languages that browsers speak, I'd wager that the very first one that developers decided needed some additional processing was HTML. Every single CMS
Open-sourcing Mariana Trench: Analyzing Android and Java app security in depth
We’re sharing details about Mariana Trench (MT), a tool we use to spot and prevent security and privacy bugs in Android and Java applications. As part of our effort to help scale security through building automation, we recently open-sourced MT to support security engineers at Facebook and across the industry. This post is the third […]
Our Learning Partner: Frontend Masters
Frontend Masters has been our learning partner for a couple of years now. I love it. If you need structured learning to up your web development skills,
Rebuilding A Large E-Commerce Website With Next.js (Case Study) — Smashing Magazine
Developing with Next.js is amazing, but there are definitely some challenges. The developer experience with Next.js is something you just need to experience. We made the switch from a more traditional integrated e-commerce platform to a headless platform with Next.js. Here are the most important lessons learned while rebuilding a large e-commerce site with Next.js.
Simplifying Form Styles With accent-color — Smashing Magazine
The new CSS `accent-color` property makes it quick and easy to roll out our brand colors to certain form inputs by leveraging user agent styles. It has the potential to provide quick and easy styling for many of our form elements, especially where extensive customization isn’t needed, as well as allowing the browser to pick the best options for accessibility. In this article Michelle Barker will t
Twitter's div Soup and Uglyfied CSS, Explained
When I came up in web development (2005-2010 were formative years for me), one of the first lessons I learned was to have a clean foundation of HTML. "What
Proposal for CSS @when
CSS is on a tear lately. Again, I've heard of a brand new thing I've never seen before, and again it's via Miriam: CSS Conditionals.
7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS
CSS ::before and ::after pseudo-elements allow you to insert "content" before and after any non-replaced element (e.g. they work on a <div> but not
Exploring the CSS Paint API: Polygon Border
Nowadays, creating complex shapes is an easy task using clip-path, but adding a border to the shapes is always a pain. There is no robust CSS solution and we
imba
It's not every day you see a new processor for building websites that reinvents the syntax for HTML and CSS and JavaScript. That's what imba is doing.
Announcing Project Turpentine: an easy way to get off Varnish
Project Turpentine is the easiest way to replicate a varnish configuration on Cloudflare. Just export your full VCL from another provider and use Turpentine to move to a TypeScript-based runtime for varnish on Cloudflare Workers.
Designing Beautiful Shadows in CSS
My favorite kind of blog post is when someone takes a subject that I’ve spent all of five minutes considering and then says—no!—this is an enormous topic
Early Hints: How Cloudflare Can Improve Website Load Times by 30%
Today, Cloudflare is announcing support for Early Hints. Early Hints takes advantage of “server think time” to asynchronously send instructions to the browser to begin loading resources while the origin server is compiling the full response, which can improve page load time by 30%.
