Creating a Details Element That Opens But Never Closes
The <details> and <summary> elements in HTML are useful for making content toggles for bits of text. By default, you see the <summary>
While You Weren't Looking, CSS Gradients Got Better
One thing that caught my eye on the list of features for Lea Verou's conic-gradient() polyfill was the last item:
Why JavaScript is Eating HTML
Web development is always changing. One trend in particular has become very popular lately, and it fundamentally goes against the conventional wisdom about
Setting Up API Mocking With Mirage JS And Vue.js — Smashing Magazine
Almost all JavaScript projects that can be found out in the wild interact with a web service or API and either use it for authentications or getting user-related data. In this article, Kelvin Omereshone introduces Mirage JS, an API mocking library that lets you build, test and share a complete working JavaScript application without having to rely on any backend API or services. You’ll also learn h
Building an Images Gallery using PixiJS and WebGL
Sometimes, we have to go a little further than HTML, CSS, and JavaScript to create the UI we need, and instead use other resources, like SVG, WebGL, canvas,
Understanding CSS Grid: Grid Template Areas — Smashing Magazine
In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, Rachel Andrew will learn how to use the grid-template-areas property to define placement on the grid and find out how the property really works. If you haven’t used this layout method before, give it a try. We find that it is a lovely way to experiment with layouts and often use it when prototyping a layout —
How to Fetch and Parse RSS Feeds in JavaScript
Say you have an RSS feed like this one. The goal is to request that RSS feed, parse it, and do something useful with the data in it. RSS is XML, and XML is
The Hooks of React Router
React Router 5 embraces the power of hooks and has introduced four different hooks to help with routing. You will find this article useful if you are looking
An Interview With Rémi Parmentier: A SmashingConf Austin Speaker — Smashing Magazine
SmashingConf is coming to Austin, and in this post, Rachel Andrew brings you an interview with one of our speakers, Rémi Parmentier, who will be presenting on HTML email and aiming to solve all of your email creation woes. You can find all of that content, including a full transcript of the webinar in the post “Become An HTML Email Geek With These Videos From Rémi Parmentier.
Custom Styling Form Inputs With Modern CSS Features
It’s entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don’t even need a
How To Create Maps With React And Leaflet — Smashing Magazine
Leaflet is a very powerful tool, and we can create a lot of different kinds of maps. This tutorial will help you understand how to create an advanced map along with the help of React and Vanilla JS. In this article, Shajia Abidi is going to represent the locations of the non-medical fire incidents to which the SF Fire Department responded on a map.
Getting Acquainted With Svelte, the New Framework on the Block
For the last six years, Vue, Angular, and React have run the world of front-end component frameworks. Google and Facebook have their own sponsored frameworks,
Browser Version Release Spectrum
Whenever a browser upgrades versions, it's a little marketing event, and rightly so. Looks like for Firefox it's about once a month, Chrome is ~6 weeks, and
A Day in the Life of a Frontend Product Engineer at Slack
6:45am The sound of coffee grinding wakes me up 15 minutes before my alarm. I’m not a morning person, but I always stumble bleary-eyed into the kitchen for some toast and coffee with my partner, which is my favorite daily ritual. I sit down, listen to my morning news podcasts — The Daily and AM…
Magic Flip Cards: Solving A Common Sizing Problem — Smashing Magazine
In this article, Dan Halliday reviews the standard approach to creating animated flip cards, and introduces an improved method which solves its sizing problem. You’re going to build a flip card grid with some CSS basics — transforms, flex, and grid. Dan will cover: how flip cards are usually implemented using absolute positioning, the sizing problem that absolute positioning introduces, and a gene
CSS4
What is CSS4? Is it a real thing? I hate to break it to you, but not really. But maybe we could make it a thing? CSS3 was successful, so why not keep that train rolling like they do in JavaScript?
How to Create an Animated Countdown Timer With HTML, CSS and JavaScript
Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more
Get Moving (or not) with CSS Motion Path
We just linked up the idea that offset-path can be cleverly used to set type on a path. Don't miss Michelle Barker's experimentation either, with drawing
Smaller HTML Payloads with Service Workers
Short story: Philip Walton has a clever idea for using service workers to cache the top and bottom of HTML files, reducing a lot of network weight.
How To Create A Card Matching Game Using Angular And RxJS — Smashing Magazine
Today, Anna Prenzel would like to focus on data streams resulting from click events on the user interface. The processing of such clickstreams is particularly useful for applications with an intensive user interaction where many events have to be processed. This article is dedicated to Angular developers who want to harness the concept of reactive programming. This is a programming style that — si
JAMstack at the Edge: How we built Built with Workers… on Workers
We're showcasing developers building incredible projects with tools like Workers KV or our streaming HTML rewriter.
Apollo GraphQL without JavaScript
It's cool to see progressive enhancement being done even while using the fanciest of the fancy front-end technologies.
Practice GraphQL Queries With the State of JavaScript API
Learning how to build GraphQL APIs can be quite challenging. But you can learn how to use GraphQL APIs in 10 minutes! And it so happens I've got the perfect
React Native is the Future of Mobile at Shopify - Shopify
After years of native mobile development, we’ve decided to build all of our new mobile apps using React Native. As I’ll explain, that decision doesn’t come lightly.
Use and Reuse Everything in SVG… Even Animations!
If you are familiar with SVG and CSS animations and started to work with them often, here are some ideas you might want to keep in mind before jumping into
Set Type on a Circle... with offset-path
Here's some legit CSS trickery from yuanchuan. There is this CSS property offset-path. Once upon a time, it was called motion-path and then it was renamed. I
JavaScript Libraries Are Almost Never Updated Once Installed
An analysis, based on CDNJS data, of when and if JavaScript libraries are updated after being installed onto websites.
What does "revert" do in CSS?
Miriam Suzanne explains in a Mozilla Developer video on the subject.
Woodworking SVG (and Other Real Life Encounters)
Eric Meyer does his woodworking math in SVG.
What's the Difference Between Width/Height in CSS and Width/Height HTML attributes?
Some HTML elements accept width and height as attributes. Some do not. Those attributes are sometimes referred to as presentational attributes. The thing to know about them is that they are overridden by any other styling information whatsoever. That makes them ideal as a fallback.
Building Multi-Directional Layouts
There are some new features in CSS that can assist us with building layouts for different directions and languages with ease. This article is about CSS
Component-Level CMSs
When a component lives in an environment where the data queries populating it live nearby, there is a pretty direct line between the visual component and the
Amelia Wattenberger's The CSS Cascade
If you're on a small screen, remind yourself to check it out on a big screen when you have the chance.
Super Simple Start to ESModules in the Browser
All major browsers support ESModules now. Here's how to get started using them.
How To Pass Data Between Components In Vue.js — Smashing Magazine
Unless you’re creating your entire Vue app in one component (which wouldn’t make any sense), you’re going to encounter situations where you need to share data between components. With so many different ways to share data across components, you should know which technique is best for your situation. In this article, Matt Maribojoc will analyze three of the most common ways to pass data in VueJS.
Edgium
January 15th, 2020 was the day Microsoft Edge went Chromium. A drop in browser engine diversity. There is a strong argument to be made that's not good for an
How to Turn a Procreate Drawing into a Web Animation
I recently started drawing on my iPad using the Procreate app with Apple Pencil. I’m enjoying the flexibility of drawing this way. What usually keeps me from
Implementing a simple state machine library in JavaScript
Let's write a state machine abstraction together to understand it better
Recreating The Arduino Pushbutton Using SVG And — Smashing Magazine
HTML comes with a bunch of input controls, and there are tons of component libraries that include many standard controls such as checkboxes, and radio buttons. But what happens when you need something unusual? In this article, Uri Shaked will show you how to build custom HTML components that mimic physical objects, such as the Arduino Pushbutton. We’ll draw the component in Inkscape from scratch,
Autumn (macOS window manager)
I love how nerdy this is. Autumn allows you to write JavaScript to control your windows. Get this window, move it over here. Nudge this window over. There are
A Web Component with Different HTML for Desktop and Mobile
Christian Schaefer has a great big write-up about dealing with web advertisements. The whole thing is interesting, first documenting all the challenges that
Debunking the Myth: Accessibility and React
I find it notable when the blog of a major accessibility-focused company like Deque publishes an article called Debunking the Myth: Accessibility and React.
How many CSS properties are there?
Tomasz Łakomy posted a joke tweet about naming all the CSS attributes and Tejas Kumar replied with a joke answer, going as far as making an npm module. You
Magical Rainbow Gradients
If you've ever tried to animate a gradient, you've been met with a harsh reality—it isn't possible. At least, it wasn't! In this tutorial, we'll leverage bleeding-edge browser features to animate ANY CSS property, including background gradients, using CSS Houdini, CSS variables, and React.
An Introduction To React’s Context API — Smashing Magazine
In this article, Yusuff Faruq will show you how to use React’s Context API which allows you to manage global application states in your React apps without resorting to props drilling. In the process you will learn what the Context API is and the problem it solves, how to create Context and consuming it in both functional and class-based components, and when to use the Context API. Let’s start!
CSS-Only Carousel
Editor's Note: Chrome is prototyping a new feature for creating carousels directly in CSS, including scroll buttons and scroll markers for navigating between
Understanding CSS Grid: Grid Lines — Smashing Magazine
In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a look at how to use the grid lines to place items. The other methods Rachel will show you in future articles are alternate ways to specify your layout, but are based on the grid created by numbered lines. But for today, here you will find pretty much all you need to know about grid lines!
Understanding Async Await
When writing code for the web, eventually you'll need to do some process that might take a few moments to complete. JavaScript can't really multitask, so
let vs. const
There are multiple ways to declare variables in JavaScript. We had var, and while that still works like it always has, it is generally said that let and const
How To Create And Deploy Angular Material Application — Smashing Magazine
A walkthrough of creating an Angular 8 web application and a QR Code generator app completely based on Angular while hosted on Netlify. In this article, Shubham will take you into a walkthrough of creating an Angular 8 web application using the official Angular Material Design library. We will be creating a QR Code generator web application completely based on Angular while hosted on Netlify.
Cloudflare + Remote Browser Isolation
Cloudflare announced today that it has purchased S2 Systems Corporation, a Seattle-area startup that has built an innovative remote browser isolation solution unlike any other currently in the market.
Understanding CSS Grid: Creating A Grid Container — Smashing Magazine
In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a detailed look at what happens when you create a grid container and the various properties that can be applied to the container to shape your grid.
How to Build Your Resume on npm
Just yesterday, Ali Churcher shared a neat way to make a resume using a CSS Grid layout. Let’s build off that a bit by creating a template that we can spin up
New Year, New Job? Let's Make a Grid-Powered Resume!
Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that
Pseudo-HTML and Pidgin CSS: Building an Email Newsletter
Migrating millions of lines of code to TypeScript
On Sunday, March 6, we migrated we converted more than 3.7 million lines of code with a single pull request. The next day, hundreds of engineers came in to start writing TypeScript for their projects.
3D and CSS
5 CSS snippets every front-end developer should know in 2024
Toolbelt worthy, powerful, and stable CSS you can use today.
6 CSS snippets every front-end developer should know in 2023
Toolbelt worthy, powerful, and stable CSS you can use today.
CSS accent-color
Bring your brand color to built-in HTML form inputs with one line of code.