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
Water.css
It's notable that Water.css was the #1 clicked thing from Louis Lazaris' Web Tools Weekly in 2019. It's from a 13-year old developer named Felix!
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
Components and the World of Chaos
Why chaos theory suggests that component assembly may not be as easy as it's cracked up to be.
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.
Accessibility audit with react-axe and eslint-plugin-jsx-a11y
react-axe is a library that audits a React application and logs any accessibility issues to the Chrome DevTools console. eslint-plugin-jsx-a11y is an ESLint plugin that identifies and enforces a number of accessibility rules directly in your JSX. Using them in combination can provide a comprehensive auditing approach to find and fix any accessibility concerns in your application.
Audit your Angular app's accessibility with codelyzer
Learn how to make your Angular application accessible using codelyzer.
Adapting typography to user preferences with CSS
A method to adapt a font to your users' preferences, so they're maximally comfortable reading your content.
Add a web app manifest
The web app manifest is a simple JSON file that tells the browser how your web app should behave.
Add a web app manifest with Create React App
Create React App includes a web app manifest by default. Modifying this file will allow you to change how your application is displayed when installed on the user's device.
Additional HTML elements
Essential metrics for a healthy site
Advancing the web framework ecosystem
Learn about how Chrome is investing efforts in a number of open-source tools to advance the JavaScript ecosystem
Why are some animations slow?
Animating well is core to a great web experience. This post explains why certain types of animation perform better than others.
The CSS aspect-ratio property
Maintaining aspect ratio within images and elements is now easier to achieve with the new aspect-ratio CSS property.
Asymmetric animation timing
Breaking symmetry provides contrast and appeal to your projects. Learn when and how to apply this to your projects.
@property: giving superpowers to CSS variables
Learn how to implement CSS custom properties with semantic typing, a fallback value, and more, directly in your CSS file.
Measure browser autofill on your forms
To optimize user experience, it's essential to understand how users interact with your forms. Browser autofill plays a significant role in this process. Learn how to collect and analyze data on how users use autofill in your forms.
Avoid large, complex layouts and layout thrashing
Layout is where the browser figures out the geometric information for elements - their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element. The process is called Layout in Chrome.
Create OS-style backgrounds with backdrop-filter
Learn how to add background effects like blurring and transparency to UI elements on the web using the CSS backdrop-filter property.
The nuances of base64 encoding strings in JavaScript
Understand and avoid common problems when applying base64 encoding and decoding to strings.
Color themes with Baseline CSS features
Learn how to create color themes with Baseline web features available in CSS.
Container queries and units in action
Learn how to use CSS container queries for adding both responsive typography and styles based on container dimensions in this guide.
Responsive and fluid typography with Baseline CSS features
Learn how to use Baseline CSS features to create typography that responds to the user with accessibility and developer ergonomics in mind.
Back/forward cache
Learn to optimize your pages for instant loads when using the browser's back and forward buttons.
Compiling to and optimizing Wasm with Binaryen
Using the example of a synthetic toy language called ExampleScript, learn how to write and optimize WebAssembly modules in JavaScript using the Binaryen.js API.
Browser-level image lazy loading for the web
This post covers the loading attribute and how it can be used to control the loading of images.