UI Dev Newsletter

A Complete Guide to CSS Media Queries

Learn all about how media queries can modify the appearance (and even behaviour) or a website or app based on a matched set of conditions about the user’s device, browser or system settings.

Make Your Own Dev Tool

Amber Wilson shows how bookmarklets could be super handy during development.

Why Tailwind CSS

Shawn Wang explains some pros and cons of using Tailwind CSS.

There's a good reason why experienced devs say "it depends" so often

Jerod Santo tries to reason why devs use the term “it depends”.

Inspect CSS Grid

This guide shows you how to discover CSS grids on a page, examining them and debugging layout issues in the Elements panel of Chrome DevTools.

npm automation tokens

npm introduces a new setting for access tokens to support publishing to the npm registry from CI/CD workflows.

Achieving Vertical Alignment (Thanks, Subgrid!)

Cathy Dutton shows how to use subgrid to vertically center the content across all items.

Build a responsive media browser with CSS

Andy Bell shows how to use modern CSS layout to create a flexible media browser and video player layout that maintains its aspect ratio at all viewports.

A Gentle Introduction to Using a Docker Container as a Dev Environment

Burke Holland explains (in a sarcastic and fun way) how to set up and use Docker (from VS Code).

One of my favourite accessibility testing tools: The Tab Key.

Manuel Matuzović lists 9 points on how to why the tab key is his favourite tool for testing website accessibility.

The failed promise of Web Components

Lea Verou questions the ability to develop and use Web Components easily.

5 CSS Properties You Probably Did Not Know About

Timothy Okooboh writes about some CSS properties that you might know of/forgot about, but that could be quite useful.

Hacktoberfest 2020: Registration Now Open 🎃

Commit to open source by signing up for Hacktoberfest.

JavaScript bookmarks

Steve Gardner shows how to save JavaScript snippets as browser bookmarks.

CSS Animation with motion

Henry Zarza makes eye-catching, playful CSS-only animations.

GSAP 3 Express Free Trial

The course for absolute beginners that guides you through the best parts of the GSAP API.

Optimizing CSS for faster page loads

Tomas Pustelnik shows a series of techniques on how to optimize the CSS code for performance.

Enforcing performance budgets with webpack

Ayooluwa Isaiah describes how to set limits to code using webpack performance budgets.

Publish/Update NPM packages with GitHub Actions

Carl-W. Igelstroem describes how to use GitHub Actions to push new releases on NPM.

Stop Using React

Ender Minyard explains why you should stop using JavaScript frameworks. There is a quality discussion in comments, too.

Why I Don’t Have Time For Your Coding Challenge

Michelle Barker shares thoughts on why coding challenges might not be a good idea.

Visualize Data Structures in VSCode

Addy Osmani shows how to use VSCode extension to visualize data structures.

Editing HTML Like A Boss In VS Code

Caleb Porzio shows how to use VS Code to supercharge HTML editing.

BGJar

Free SVG background generator for your websites, blogs and app.

Writing even more CSS with Accessibility in Mind, Part 1: Progressive Enhancement

Manuel Matuzović describes how to use progressive enhancement to write more accessible CSS code.

CSS Images Module Level 4: the image() notation

The image-set() function allows an author to provide multiple resolutions of an image and let the UA decide which is most appropriate in a given situation.

Using the brightness() CSS Filter to generically highlight Content

Rick Strahl describes how to use the CSS brightness filter to highlight content without having to specify a specific color value.

70% Repetition in Style Sheets: Data on How We Fail at CSS Optimization

Jens Oliver Meiert explains how what it means to know how many declarations you use in your style sheets and how many of those declarations are unique.

How CSS Perspective Works

Amit Sheen explains all about CSS perspective, from how it works to how to use it to create 3D animations.

How to Choose the Right Website Fonts

Lucy Turner shows how you can choose fonts that are right for your website.

Beautiful CSS box-shadow examples

A collection of real-world examples of beautiful CSS box-shadow examples.

Lighthouse recommends smaller libraries

Addy Osmani introduces Lighthouse's feature, which recommends smaller libraries that improve bundle size.

Custom bullets with CSS ::marker

Adam Argyle and Oriol Brufau show how trivial it is to customize the color, size or type of number or bullet when using a <ul> or <ol>.

Ask an expert: Why is CSS... the way it is?

Chris Lilley highlights and describes many of CSS’s shortcomings.

Supercharging <input type=number>

Kilian Valkhof describes how to build a better input type=number.

CSS variables: Scoping

Chidume Nnamdi explains all about CSS Variables, including usage, support, and advantages.

Case Study: Implementing Accessible Data Charts for the Khan Academy 2018 Annual Report

Sara Soueidan explains how Khan Academy 2018 Annual Report is presented and implemented in an accessible way to site’s visitors.

What is the Value of Browser Diversity?

Dave Rupert tries to answer a question: What if Firefox switched to Chromium tomorrow, what would we lose?

Comparing Browsers for Responsive Design

Chris Coyier reviews a number of these desktop apps where the goal is showing your site at different dimensions all at the same time.

lookup.design

Find and get inspired by named, categorized and indexed by hand design examples.

Why you should hire a frontend developer

Matt Hobbs explains what the benefits of hiring a dedicated frontend developer are.

Leading-Trim: The Future of Digital Typesetting

Ethan Wang shows how an emerging CSS standard can fix old typographical problems and raise the bar for web apps.

Accordion Rows in CSS Grid

Eric Meyer describes the way he is using CSS Grid rows to make the layout more flexible.

Things I Wish I’d Known About CSS

Dave Smyth shares some useful things for easier CSS understanding, including box model, how height and width are calculated, and collapsing margins.

Fluid Images in a Variable Proportion Layout

Lari Maza shows many ways how to display images correctly on all viewports, including using the new aspect-ratio property.

What Happens When Border Radii Overlap?

Jay Sitter shows how browsers calculate the border-radius values and why it doesn’t work as expected sometimes.

CSS Animated Google Fonts

Jhey Tompkins shows how to use Google variable fonts and CSS animation to make some interesting effects.

Keyframes

Keyframes are simple visual tools to help you generate CSS for your projects.

5 most annoying website features I face as a blind person every single day

Holly Tuke describes the five most annoying inaccessible web elements she faces as a blind screen reader user every day and how to fix them.

A CSS-only, animated, wrapping underline

Nicky Meuleman explains in detail how to create eye-catching, animated link underlines using only CSS.

Create a line break while maintaining inline status

Andy Bell shows how to create a line break after an inline element while retaining that inline element’s inline status using pseudo-element magic.

Offering Options for mailto: and tel: Links

Chris Coyier introduces the mailgo JavaScript library which displays popup when you click on mailto or tel links with some useful options.

Highlighting great user experiences on the mobile web

New Chrome will display the “Fast Page” label on mobile for pages that have optimized against web performance metrics that are most representative of a user’s overall experience.

5 lessons from 50 days of CSS art

Suzanne Aitchison shares findings of CSS during her project of creating CSS art pieces.

Why "Skip Nav" Link is important!

Raja Jaganathan shows how to use and create a “Skip Nav” link.

Capture node screenshots via Elements panel context menu

Google Chrome allows you to take a screenshot of an element by right-clicking the element and select “Capture node screenshot”.

Changing World, Changing Mozilla

A big announcement of a significant restructuring of Mozilla Corporation.

What does 100% mean in CSS?

Amelia Wattenberger explains what does percent refers to in CSS for different properties.

More Control Over CSS Borders With background-image

Chris Coyier introduces Amit Sheen’s Dashed Border Generator, which helps make fancy borders.

Practical Use Cases for JavaScript’s closest() Method

Andreas Remdt shows how to use closest() function to do some useful things with JavaScript.

What I Learned by Fixing One Line of CSS in an Open Source Project

Benjamin Schachter describes his journey about fixing a single line in Svelte docs site.

That’s Just How I Scroll

Chris Coyier highlights some interesting techniques from Chris Smith about showing scrollable elements.

Add support for `@apply` with complex classes, including responsive and pseudo-class variants

Adam Wathan shows how to use @apply with multiple, complex classes for better clarity in Tailwind CSS.

What is the width of this div?

Adam Argyle asks a simple question about widths in CSS. Do you know the answer?

content-visibility: the new CSS property that boosts your rendering performance

Una Kravets shows how to improve initial load time by skipping the rendering of offscreen content.

Infinite Scroll without Layout Shifts

Addy Osmani describes how to avoid layout shifts with infinite scroll.

A Lightweight Masonry Solution

Ana Tudor explains how to create masonry solution using only CSS and how to make a JS fallback.

Rehearsing the Future

Members of Google’s speculative design teams discuss how they are rehearsing for what is next

The Making of: Netlify’s Million Devs SVG Animation Site

Sarah Drasner shows how latest Netlify SVG Animation is done with GSAP library.

State of Frontend 2020

The Software House team shows results from the survey for everyday frontend development according to 4,500 experts.

Spotting a Trend

Geoff Graham shows the latest trend on web design—blobby shapes.

Layout Shift GIF Generator

Chris Johnson creates a tool for visualizing the Core Web Vitals metric Cumulative Layout Shift (CLS) with a simple GIF.

New in Chrome Dev Tools: Style editing for CSS-in-JS frameworks

Chrome Dev Tools now supports CSS-in-JS.

Want to get better at code? Teach someone CSS.

Peter Murray shares five lessons he learned from teaching someone CSS.

Bold on Hover… Without the Layout Shift

Ryan Mulligan demonstrates how to use bold text on hover without the layout shift using pseudo-elements.

CSS Vocabulary

An interactive website dedicated to CSS and its vocabulary.

Useful snippets

Emil Kowalski created a web page with plenty of CSS animations that you could copy with a single click.

How To Create A GitHub Profile README

Monica Powell shows how to add personal README file to GitHub profile.

GitHub Activity in README

James George shares instructions on how to update README.md with the recent GitHub activity of a user.

Dark ages of the Web

Pavel Laptev shows the typical design elements from the past in a single page.

@property: giving superpowers to CSS variables

Una Kravets announces the implementation of the Houdini Properties and Values API in Chromium 85.

Tradeoffs and Shifting Complexity

Dave Rupert writes how to deal with complexity in frontend development.

A closure

Dan Abramov explains what is a Closure in JavaScript.

8 SCSS Best Practices to Keep in Mind

Annie Liao shares useful advice on writing SCSS code.

What ya need there is a bit of templating

Chris Coyier explains how to use templates in web development.

Keys for You to Become a Better Frontend Web Developer

Abdelrhman Yousry creates a cheat sheet for improving your web development skills.

Just JavaScript

A course by Dan Abramov and Maggie Appleton for a better understanding of JavaScript.

The Guide To Design

A free guide to learn product design in an uncomplicated way.

Develop, Preview, Test

Guillermo Rauch elaborates how prioritizing end-to-end (E2E) testing for the critical parts of your app will reduce risk and give you the best return.

Native image lazy-loading for the web - Improved data-savings and distance-from-viewport thresholds

Chrome improves its implementation of image lazy-loading by reducing the distance-from-viewport thresholds to better meet developer expectations.

CSS Painting Order

Martin Robinson describes the CSS Stacking Context in details with real-life examples.

The physics behind spring animations

Maxime Heckel explains how a spring animation in a library like Framer Motion works and the physics behind it.

Backdrop Filter effect with CSS

Uriel Bitton shows how to create a blurred transparent background.

Make Jamstack Slow? Challenge Accepted.

Steve Keep purposely makes a slow site to better understand possible site performance bottlenecks.

Making lil’ me - part 1

Cassie Evans describes how to get values from the mouse movement and plug them into an animation.

Laws of UX

Laws of UX is a collection of the maxims and principles that designers can consider when building user interfaces.

Ten modern layouts in one line of CSS

Una Kravets highlights a few powerful lines of CSS for building robust modern layouts.

CSS News July 2020

Rachel Andrew takes a look at some of the interesting CSS features that are making their way into browsers right now.

The ultimate guide to iframes

Nada Rifki goes through many iframe element features and talks about usage, tricky situations, security, and accessibility.

A (Very) Beginner’s Guide to WEBPACK

Carrie Pascale explains basic webpack concepts and usage.

An Overview of Scroll Technologies

Zach Saucier writes an overview of scroll related technologies and tools.

15 Vanilla JavaScript PROJECT IDEAS: BEGINNER TO EXPERT [WITH FREE TUTORIAL]

Muhammad Ali shares 15 project ideas for practicing your Vanilla JavaScript skills.

Custom properties

Jeremy Keith realises that “CSS variables” is a very limiting way of thinking about custom properties.

CSS Gifs

Lynn Fisher created a Twitter thread with fun CSS gifs.

Styling Layout Wrappers In CSS

Ahmad Shadeed explains everything about layout wrappers in CSS, how they work, how to use them, and when not to use them.

When Sass and New CSS Features Collide

Ana Tudor explains how to solve a problem when a new CSS Feature has the same name as the existing Sass function like min() or linear-gradient().

Responsive Styling Using Attribute Selectors

Jakob Eriksen thinks of a new naming convention that could help make responsive styling possibly easier.

New in Chrome: CSS Overview

Robin Rendle shows how to turn on the new (and still experimental) feature that shows an overview of the CSS used on a site.

How-to guide for creating edge-to-edge color bars that work with a grid

Marcel Moreau explains how to use linear-gradient and math to create an edge-to-edge background that works well with grid like Bootstrap.

When a Line Doesn’t Break

Welling Guzman discovers five properties that can possibly affect how and when a line breaks.

Is my host fast yet?

Real-world server response (Time to First Byte) latencies, as experienced by real-world users navigating the web.

CSS Typing Effect

Marko Denic creates a CSS-only typing effect demo.

A Smashing Guide To Accessibility

Smashing Magazine’s guide highlights the content which can help you create more accessible sites and web applications.

Accessible to some

Manuel Matuzović creates a fun accessibility experiment and shares some useful lessons about it.

The form element

Learn how to use the form element, what attributes are available and how to style it.

Bootstrap 5 alpha!

Bootstrap 5’s very first alpha has arrived, and here is what is new.

The 🍔 menu

Mikael Ainalem shares a step by step guide to creating a Hamburger Menu in SVG & CSS.

The Return of the 90s Web

Max Böck shares his predictions about web development trends.

In Defense of a Fussy Website

Sarah Drasner explains why you should build your site with care and excitement.

Github statistic reporter

See your GitHub profile differently.

What is Developer Experience (DX)?

Chris Coyier explains all about developer experience, the experience of developers.

CSS-only Slide-up Caption Hover Effect

Michelle Barker describes how to create a caption that needs to slide over an image on hover, revealing more content.

Hybrid positioning with CSS variables and max()

Lea Verou shows how to position an element with some smart JS and CSS calculations.

The Surprising Things That CSS Can Animate

Will Boyd explores some of the unexpected things that CSS can animate and some nifty things you can do by animating them.

Global and Component Style Settings with CSS Variables

Sara Soueidan explains how she uses CSS variables to create more manageable project styles and more portable patterns.

CUBE CSS

Andy Bell explains his CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism.

Junior Developers Checklist for Landing a Remote Job

Carl-W. Igelstroem shares his story about landing a remote job and a checklist that could help you land one, too. Bonus: Remote Junior Developer jobs directory.

40+ High Quality Free Resources for Web Development

Jose Felix shares free illustration, development, CSS, Tailwind, design, and productivity resources.

Website performance is getting worse

Gerry McGovern shares his concerns about web performance.

Case study: Analyzing Notion app performance

Ivan Akulov reverse-engineer the Notion app and analyses possible ways to improve its performance.

How to Get All Custom Properties on a Page in JavaScript

Tyler Gaw shows how to get all CSS Custom Properties using JavaScript.

Cool Little CSS Grid Tricks for Your Blog

Ana Tudor found a solution to a long-running problem using a modern CSS grid technique.

Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis

Preethi shows how to use gradients and other things, like CSS shapes and emoji, to make background patterns.

Learn Z-Index Using a Visualization Tool

Thiru Manikandan shows how to understand z-index and stacking order.

How to Start Freelancing (The Basics)

Kyle Prinsloo shares advice on how to start freelancing.

These free tools for developers are 🔥🔥🔥

Fayaz Ahmed made a list of free tools for web development.

CSS :is() and :where() are coming to browsers

The new CSS :is() and :where() pseudo-classes are now supported in the preview versions of both Safari (Tech Preview 106) and Firefox (version 78). Chrome’s implementation remains behind flag.

Overlapping Header with CSS Grid

Jonathan Snook found a way to make an overlapping header with CSS Grid using before pseudo element.

Reverse ordered lists

Manuel Matuzović found interesting solutions for a list of items in reverse order.

Where to Find Remote Developer Jobs

Kyle Prinsloo reviews some remote job boads with pros and cons for every single one.

How to Apologize

Jason C. McDonald analyses Triplebyte’s apology email.

Web Dev Feeds

Šime Vidas created a collection of over 800 RSS feeds for web developers, updated monthly.

CSS Section Separator Generator

A tool for creating unique section separators.

CSS Grid: Newspaper Layout

Olivia Ng created awesome newsletter layout using CSS Grid.

HTMHell special: close buttons

Manuel Matuzović inspects one of the most complicated and most controversial patterns in front-end development: the close button.

Using Structured Data to Enhance Search Engine Optimization

Tristram Tolliday shows how to use structured data to help surface content in more useful and engaging ways.

Block Links: The Search for a Perfect Solution.

Vikas Parashar explores possible solutions for block links

On fixed elements and backgrounds

Chen Hui Jing shares insights about position: fixed and backgrounds.

CSS Tips for New Devs

Amber Wilson shares CSS tips for beginners.

Netlify Build Plugins Are Here!

Build Plugins allow you to automate build tasks, customize your build process, and make your development process even easier.

How to de-Google-ify your website

Marko Saric explores in depth how to remove/replace Google products from your website.

Public APIs

A collective list of free APIs for use in software and web development.

JavaScript to Know for React

Kent C. Dodds shares how much JavaScript is enough to learn React.

The Fastest Google Fonts

Harry Roberts figures out the most efficient way to load Google Fonts.

Overflow In CSS

Ahmad Shadeed digs deep in overall in CSS.

How to Ruin Your Career in 8 Easy Steps

Excellent list of advices how not to ruin your career.

Let’s Make One of Those Fancy Scrolling Animations Used on Apple Product Pages

Jurn van Wissen shows how to recreate an animation from Apple’s site.

My favourite line of CSS

Damon Muma shares how to make a responsive grid without media queries.

Fast Software, the Best Software

Craig Mod shares his thoughts about building fast and light software.

PerfectPixel by WellDoneCode (pixel perfect)

Chrome extension which make it easier to develop pixel-perfect sites.

Modern CSS Solutions

Stephanie Eckles shares modern CSS solutions for old CSS problems.

Why does writing matter in remote work?

Tim Casasola shares insights on why writing is important.

What’s Deno, and how is it different from Node.js?

Everything you need to know about Deno, a new runtime for JavaScript.

How to Tame Line Height in CSS

Caleb Williams has figured out how to enhance line-height in CSS.

Promises in 15 minutes

Mariane Santana explains how Promise works.

A Complete Guide to CSS Functions

All you need to know about CSS Functions.

Quicklink

A drop-in solution for sites to prefetch links based on what is in the user’s viewport.

LinkFork

Customize your link preview.

Web Vitals

Google Chrome Developer Relations share essential metrics for a healthy site.

Web Vitals Extension

A Chrome extension to measure essential metrics for a healthy site,

List Style Recipes

Learn how to style ordered and unordered lists and somewhat unusual styling situations.

How to Create Custom WordPress Editor Blocks in 2020.

Peter Tasker shows how to create custom Gutenberg blocks for laying out content in WordPress.

How to Use Block Variations in WordPress

Dmitry Mayorov explains how to define instances of existing blocks using WordPress Block Variations.

Combined Attack on Elementor Pro and Ultimate Addons for Elementor Puts 1 Million Sites at Risk

Wordfence shares insights of last’ week’s exploitation of vulnerabilities in two related plugins, Elementor Pro and Ultimate Addons for Elementor.

Custom Cascades

Miriam Suzanne shares how a smart way how to use a cascade of custom properties without worrying about the specificity.

Snowpack

The fastest dev environment for modern web apps.

Advice for Writing a Technical Resume

Sarah Drasner shares useful tips on how to build your resume.

Codiamo, a code journal platform built for code newbies!

If you are into #100DaysOfCode, this tool could help stay on track.

Setting Height And Width On Images Is Important Again

Barry Pollard explains why you should put width and height attributes to every image.

Using CSS to Control Text Selection

Will Boyd teaches how to handle text selection using CSS only.

Free Udemy Development courses

There are 71 free development courses on Udemy.

5 Free Tools That Will Make You More Productive

Manea Adrian shows 5 free amazing tools that will make you a more overall productive developer.

Automating Web Perf measurement with Puppeteer

Addy Osmani collected recipes for automating Web Performance measurement with Puppeteer.

BlurHash

BlurHash is a compact representation of a placeholder for an image.

CSS @Property

Define your own CSS property with a brand new @property.

Chrome + System Fonts Snafu

Chrome developers are aware that the browser renders the system font incorrectly, but don’t plan to fix the bug until mid-May.

Using the Line Breaking Element

Adam Laki shares his thoughts on using the <br> elements.

When debugging, your attitude matters

Julia Evans and Chris Coyier agree that being positive could get you a long way, even when debugging.

CSS Findings From The New Facebook Design

Ahmad Shadeed breaks down the new Facebook designs and finds many interesting CSS things.

Remote Work Tips for Developers

Devon Campbell shares tips about working remotely.

The title "frontend developer" is obsolete

Another discussion about “frontend developer” title.

<css-doodle />

A web component for drawing patterns with CSS.

Must watch JavaScript by AllThingsSmitty

Matt Smith’s collection of well-received talks about JavaScript.

Must watch CSS by AllThingsSmitty

Matt Smith’s collection of well-received talks about CSS.

CSS Protips by AllThingsSmitty

Matt Smith’s collection of tips to help take your CSS skills pro.

My journey to 9 software engineering offers

Utsav Ahuja shares his learnings and advice on software engineering offers.

Little Things I Like to Do with Git

Harry Roberts shares his Git tips and tricks.

The Top 100+ Developer Tools 2019

A single place with more than 100 tools and apps for developers.

4 Simple Tips to Better Communication for devs (or how to avoid conflict, confusion, and talk to people).

Leo Gopal shares some useful insights and thoughts about communication skills.

Fit on a Floppy

Could you fit your website on a floppy disc?