UI Dev Newsletter
UI Dev Newsletter is a hand-curated list of articles, tutorials, opinions, and tools related to User Interface development. Enjoy the read.
Subscribe to the newsletterUI Dev Newsletter is a hand-curated list of articles, tutorials, opinions, and tools related to User Interface development. Enjoy the read.
Subscribe to the newsletter2021-01-18
The results of the annual survey about the latest trends in JavaScript.
Idorenyin Udoh introduces the concept of rendering Adobe After Effects animation on the web with Lottie, which can make advanced animations.
Are your Anchor Links Accessible?
Amber Wilson shows how to make accessible anchor links.
Cassie Evans describes how to pass values from the mouse movement and animate SVGs.
Art Direction for Static Sites
Dave Rupert shows how to spice up your blog posts with minimal effort.
The Ultimate Collection of Google Font Pairings (Displayed Beautifully with Classic Art)
Lou Levit shares a collection of font pairings that might inspire the design for your next project.
Are These the Most Interesting Front-end Developer Tools for 2021?
Louis Lazaris writes a big superficial roundup of his newsletter’s 60 most-clicked tools of 2020 — and potentially the most interesting choices for 2021.
Tweet Cyborg is a useful tool that converts tweets to images.
2021-01-11
A quick overview of a few major CSS trends from the State Of CSS 2020 survey.
The Art of Building Real-life Components
Ahmad Shadeed describes in details how to recreate the Facebook Messenger's sidebar card and its versions.
What Can You Put in a CSS Variable?
Will Boyd shows different examples of CSS Variables usage.
Drawing Decorative Lines with CSS
Rik Schennink shows different ways how to create lines in CSS, including pseudo elements and SVG.
Jeremy Keith writes about listitis and accessible lists.
Case Study: lynnandtonic.com 2020 refresh
Lynn Fisher explains the process of the creation of new fancy features on the homepage.
So you wanna create an eco-friendly website
Eric Bailey tries to answer how you make a website or web app not-awful in ecology.
HTML CSS Easy steps to create a web template from scratch
Complete easy to follow guide to create your own web template using HTML and CSS Quick Crash course for beginners.
2021-01-04
A font-display setting for slow connections
Matt Hobbs explains all about font loading and which font-display option to use for slower connections.
Is Safari the next Internet Explorer?
Danny Guo compares Safari browser with Internet Explorer in terms of web features and implementations.
Big Review of Major UI Design Trends for Web and Mobile in 2020
Marina Yalanska takes a look back at what was popular in UI/UX design for websites and mobile applications in 2020.
Steren Giannini explains why his stack requires no maintenance, has perfect Lighthouse scores, will never have any security vulnerability, and why it will outlive yours.
How to change border width on hover without affecting layout
Alex Carpenter figures out how to use box-shadow to mimic the border width hover effect.
A community-driven gathering place for CSS Houdini worklets and resources.
2020: A round-up of all Codrops resources
A roundup of all Codrops resources of the year 2020.
Stephanie Eckles builds a tool that lets you learn what it takes to ensure your buttons or button-styled links have accessible contrast across all states and surfaces.
2020-12-28
Adam Argyle showcases five centering techniques and a series of tests which determine which one is the most resilient to change.
How the Nullish Coalescing Operator Works in JavaScript
Yogesh Chavan explains how the nullish coalescing operator that is introduced in ES11 works.
HTML tags every frontend developer should know
David Atanda describes some of the most useful HTML tags you may be overlooking.
Continuous Performance Analysis with Lighthouse CI and GitHub Actions
Ayooluwa Isaiah covers the full extent of what the Lighthouse CI tool can do and how to set it up in GitHub Actions.
Tobias Ahlin explains what does the new GitHub homepage represents and how they build it with WebGL.
What Is Full Site Editing and What Does It Mean for the Future of WordPress?
Justin Tadlock announces 2021 as the year of the site editor as WordPress prepares for 5.7 release.
How to Build a Site Structure for SEO
Erika Varagouli shows how to build a site structure that works and helps your site achieve SEO success.
Agustinus Nathaniel makes a site that helps you find some public APIs for your next projects.
2020-12-21
Tim Severien reflects on the CSS language and finds out what makes it hard.
Sarah Drasner illustrates the possibilities that SVG opens up for UI component development by walking through and breaking down one particular use case, the timeline.
Creating randomness with pure CSS
Adir Slutzki shows how to make a random card effect using pure HTML and CSS.
Lots of Ways to Use Math.random() in JavaScript
Jwahir Sundai showcases different creative usages of Math.random() in JavaScript, including random animation, random image and random background color.
Melanie Richards explains the problem and the solution on how to make a grid item sticky.
Boop! - A whimsical twist on hover transitions
Josh Comeau describes how to build an animated “boop” hover effect in React.
Customer Experience or User Experience?
Bob Salmon writes about his understanding of CX and UX terms, how they’re similar and different.
Paul Foster makes a game-like demo about how many HTML tags can you remember?
2020-12-14
HTTP Archive's annual state of the web report
The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts.
2020 End-of-Year Thoughts Archives
Web builders answer the same question: What is one thing you learned about building websites this year?
What you might not know about sizing in CSS
Tomas Pustelnik shares his findings of sizing and layout models and how to handle possible issues.
Elaina Natario writes how alt attribute and figcaption tag are interpreted by assistive technologies.
A Utility Class for Covering Elements
Michelle Barker explores different ways how to make utility class for completely covering one element with another.
How To Design A Simple UI When You Have A Complex Solution
Suzanne Scacca shares some tips for designing a simple UI regardless of your solution’s complexity.
How to cope with legacy code and technical debt
Ivo Lukač writes in-depth post explaining what legacy code and technical debt are and how to deal with it.
Find out how much turning on modern JS could save.
2020-12-08
The results of the annual survey about the latest trends in CSS.
Sarah Gooding summarizes some of the most noteworthy data from State of CSS 2020 survey.
How to Get Sticky and Full-Bleed Elements to Play Well Together
Silvestar Bistrović explains how to create a tricky non-centered layout with full-bleed and sticky elements.
How to Fix Issues With CSS Position Sticky Not Working?
Daniyal Hamid compiles a list of things you can do to fix some common issues when using position sticky.
How to Add Text in Borders Using Basic HTML Elements
Preethi Sam shows how to use fieldset and legend to place text within borders.
100 lessons for the year to come
UX Collective shares a list of what to expect for User Experience (UX) Design in the next year.
Monica Lent makes a site in which you could discover the best developer blogs on any tech stack.
Jeremy Keith describes where did web advertising go wrong and how to fix it.
2020-12-01
"Yes or No?" — One Checkbox vs Two Radio Buttons.
Sara Soueidan tries to figure out if you have a question with a binary Yes/No answer, is it better to use one checkbox or two radio buttons?
Your first attempt at making anything accessible will be awful
Sheri Byrne-Haber writes why your first effort at accessibility is unlikely to be outstanding.
The Core Web Vitals hype train
Katie Sylor-Miller writes about the pros and cons of Core Web Vitals.
Thinking Like a Front-end Developer
Ahmad Shadeed explains how to implement a layout in CSS by thinking about the possible solutions, and asking a lot of questions to get it right.
Aurora Harley writes all about how to make usable touch targets for mobile and tablet design.
How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy
Adrian Bece explains how to set up font loading that not only makes Lighthouse happy but also overcomes the dreaded flash of unstyled text.
Prevent layout shifts with CSS Grid stacks
Hubert Sablonnière explains what layout shift is, which problems might occur and how to use CSS Grid to fix it.
Super Tiny Web Icons are minuscule SVG versions of your favourite logos with average size under 465 bytes!
2020-11-23
A Deep Dive Into CSS Grid minmax()
Ahmad Shadeed writes a complete guide about minmax() plus some real-world use-cases.
A user’s guide to CSS variables
Lea Verou writes a complete guide about CSS Variables, its support, fallback, and more.
A Complete Guide to CSS Gradients
Geoff Graham makes a complete guide to CSS gradients with many useful resources.
What's New In DevTools (Chrome 87)
Jecelyn Yeen shows updates from Chrome DevTools, including new CSS Grid debugging tools.
Responsive Snakes! And what they can teach you about CSS 🐍
Vitor Paladini shares insights about CSS from creating responsive snake, a silly webdev meme.
Todd Libby writes about the benefits of using matching text labels with the corresponding accessible name.
Mostafa Gaafar makes a list of the best fonts for coding with live preview.
10 Inspiring Ideas for Your Next Front-End Project
Simon Holdorf gets inspired by these 10 great examples from CodePen.
2020-11-16
Timing for bringing page experience to Google Search
Google announces that the page experience signals in ranking will roll out in May 2021.
The State of Developer Ecosystem 2020
JetBrains identifies the latest trends around tools, technologies, programming languages, and many other exciting facets of the development world.
Emulate vision deficiencies in DevTools
Addy Osmani shows how to use Chrome DevTools to emulate color vision deficiencies, helping you better optimize your pages to be inclusive of users with differing levels of color blindness.
Chrome DevTools: Create your own keyboard shortcuts and increase productivity
Umar Hansa shows how to assign your own preferred keyboard shortcuts to common workflows in Chrome DevTools.
The Cleanest Trick for Autogrowing Textareas
Chris Coyier explains how to make a textarea more like a div, so it expands in height as much as it needs to contain the current value.
GitHub Actions to securely publish npm packages
Liran Tal explains in details how to set up GitHub Actions to automate the publishing of npm packages securely.
Andy Bell shares a technique for unifying vertical space between direct siblings.
SVGBox makes it dead-easy to include icons in your project.
2020-11-09
Chasing the Pixel-Perfect Dream
Josh Comeau answers questions about pixel-perfect development and shows tricks for the closer pixel-perfect execution.
5 ways to Identify Fonts in a Web Page.
Rob Hope shows different ways to find fonts in a website.
What I Didn't Know in the 2020 State of CSS Survey, Part 1
Max Antonucci documents all the things from the 2020 State of CSS Survey which he didn’t know and explains everything about them.
How to persistently change third party web sites with browser developer tools
Chris Heilmann describes how to fix problems in web sites without getting access to the source code.
How to Animate the Details Element Using WAAPI
Louis Hoebregts shows how to animate the native <details> element using the Web Animations API.
The lang attribute: browsers telling lies, telling sweet little lies
Manuel Matuzović describes the negative effects of a missing or wrong lang attribute that are not always evident.
Technical debt as a lack of understanding
Dave Rupert explores and explains all about technical debt in web development.
Heydon Pickering starts a new vlog with brief videos about the web, its technologies, and how to make the most of them.
2020-11-02
Josh Comeau shows how to take advantage of CSS variables and use it in React apps.
Little Things on My Personal Site
Chris Coyier documents little interesting bits of his personal website re-write, like fonts, colors and YouTube embed.
Gradient borders with curves and 3d movement in CSS (Nextjs ticket clone)
Medhat Dawoud writes a step-by-step tutorial on how to build a ticket with gradient border and 3D interaction.
NDTV achieved a 55% improvement in LCP by optimizing for Core Web Vitals
Read how NDTV enhanced user experience and thus retention by optimizing for Web Vitals.
A CSS stylesheet to quickly highlight a11y concerns.
Announcement: We've partnered with BrowserStack
Caniuse team announces its partnership with BrowserStack, which allows testing properties on real browsers and devices.
1 Step to Incentivize Stars and Forks on GitHub
Nastyox shares a copy-and-paste snippet that will enable you to feature your supporters by name in the README file.
Blobs app allows you to generate beautiful blob shapes for web and flutter apps.
2020-10-26
Thinking Outside the Box with CSS Grid
Alex Trost describes in detail how to create more complex designs with fewer elements than we could with Flexbox alone.
JavaScript ES2021 Exciting Features
Taran explains the new JavaScript ES2021 features, like String.prototype.replaceAll and Promise.any.
Largest Contentful Paint: measure and optimize it
Aymen Loukil writes a guide that helps you understand what LCP is, how to measure it, and, how to improve its score.
Alternative Text for CSS Generated Content
Adrian Roselli shares insights on how to add alternative text for content generated by CSS, like images or glyphs.
Creating CSS Shapes with Emoji
Preethi Sam explains how to use the concept of CSS Shapes with emoji to create interesting text-wrapping effects.
10 useful HTML file upload tips for web developers
Tapas Adhikary shows 10 features of HTML file upload support, including drag-and-drop and multiple uploads.
GreenSock team makes a list of common mistakes and some tips on how to avoid them.
Squircley is all you need to start creating beautiful organic shapes ready to use for logos, icons and background images.
2020-10-19
min(), max(), and clamp(): three logical CSS functions to use today
Una Kravets explains how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS functions.
Robin Rendle writes about human problems that might be bigger than technical problems.
Cumulative Layout Shift, The Layout Instability Metric
Boris Schapira writes about Layout Instability API, how to visualize CLS in the browser, how to optimize for CLS, and about some unusual characteristics.
Writing even more CSS with Accessibility in Mind, Part 2: Respecting user preferences
Manuel Matuzović writes about user preferences and how to respect them when writing CSS.
The --var: ; hack to toggle multiple values with one custom property
Lea Verou explains how to use whitespace in custom property to make an “if” statement in CSS.
Presenting v7.0.0 of the npm CLI
npm turns 11 years and it is shipping some long-awaited and requested features.
List of domains which has .new as TLD
NaveenKumar Namachivayam shares the curated collection of .new shortcut domains.
Git exercises is a new way to learn and practice Git and discover its features you might haven’t been aware of.
2020-10-12
The Widening Responsibility for Front-End Developers
Chris Coyier covers all aspects of the front-end developer role in great detail.
Matthias Ott explains how to use a new CSS feature, :focus-visible, including JavaScript polyfill.
Full-Bleed Layout Using CSS Grid
Josh Comeau shows an elegant solution to make a tricky modern layout using CSS grid.
How to Make an Unobtrusive Scroll-to-Top Button
Marcel Rojas shows three different JavaScript methods on how to reveal a “scroll-to-top” button.
How to Detect When a Sticky Element Gets Pinned
David Walsh shows how to determine when an element becomes sticky.
Webpack releases a new version which contains architectural improvements and new features.
Beautiful CSS 3D Transform Examples
Polypane showcases CSS 3D transforms which create depth and visually interesting elements on your page using perspective.
How One Guy Ruined #Hacktoberfest2020 #Drama
Joel Thoms writes about a flood of low quality PR spam.
2020-10-05
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.
Amber Wilson shows how bookmarklets could be super handy during development.
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”.
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 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.
2020-09-28
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.
Steve Gardner shows how to save JavaScript snippets as browser bookmarks.
Henry Zarza makes eye-catching, playful CSS-only animations.
The course for absolute beginners that guides you through the best parts of the GSAP API.
2020-09-21
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.
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.
Free SVG background generator for your websites, blogs and app.
2020-09-14
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.
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.
2020-09-07
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.
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.
Find and get inspired by named, categorized and indexed by hand design examples.
2020-08-31
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.
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.
Jhey Tompkins shows how to use Google variable fonts and CSS animation to make some interesting effects.
Keyframes are simple visual tools to help you generate CSS for your projects.
2020-08-24
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”.
2020-08-17
Changing World, Changing Mozilla
A big announcement of a significant restructuring of Mozilla Corporation.
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.
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?
2020-08-10
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.
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.
The Software House team shows results from the survey for everyday frontend development according to 4,500 experts.
Geoff Graham shows the latest trend on web design—blobby shapes.
Chris Johnson creates a tool for visualizing the Core Web Vitals metric Cumulative Layout Shift (CLS) with a simple GIF.
2020-08-03
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.
An interactive website dedicated to CSS and its vocabulary.
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.
James George shares instructions on how to update README.md with the recent GitHub activity of a user.
Pavel Laptev shows the typical design elements from the past in a single page.
2020-07-27
@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.
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.
A course by Dan Abramov and Maggie Appleton for a better understanding of JavaScript.
A free guide to learn product design in an uncomplicated way.
2020-07-20
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.
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.
Cassie Evans describes how to get values from the mouse movement and plug them into an animation.
Laws of UX is a collection of the maxims and principles that designers can consider when building user interfaces.
2020-07-13
Ten modern layouts in one line of CSS
Una Kravets highlights a few powerful lines of CSS for building robust modern layouts.
Rachel Andrew takes a look at some of the interesting CSS features that are making their way into browsers right now.
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.
Jeremy Keith realises that “CSS variables” is a very limiting way of thinking about custom properties.
Lynn Fisher created a Twitter thread with fun CSS gifs.
2020-07-06
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.
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.
Welling Guzman discovers five properties that can possibly affect how and when a line breaks.
Real-world server response (Time to First Byte) latencies, as experienced by real-world users navigating the web.
Marko Denic creates a CSS-only typing effect demo.
2020-06-29
A Smashing Guide To Accessibility
Smashing Magazine’s guide highlights the content which can help you create more accessible sites and web applications.
Manuel Matuzović creates a fun accessibility experiment and shares some useful lessons about it.
Learn how to use the form element, what attributes are available and how to style it.
Bootstrap 5’s very first alpha has arrived, and here is what is new.
Mikael Ainalem shares a step by step guide to creating a Hamburger Menu in SVG & CSS.
Max Böck shares his predictions about web development trends.
Sarah Drasner explains why you should build your site with care and excitement.
See your GitHub profile differently.
2020-06-22
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.
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.
2020-06-15
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.
2020-06-08
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.
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.
Jason C. McDonald analyses Triplebyte’s apology email.
Š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.
Olivia Ng created awesome newsletter layout using CSS Grid.
2020-06-01
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.
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.
A collective list of free APIs for use in software and web development.
2020-05-25
Kent C. Dodds shares how much JavaScript is enough to learn React.
Harry Roberts figures out the most efficient way to load Google Fonts.
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.
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.
2020-05-18
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.
Mariane Santana explains how Promise works.
A Complete Guide to CSS Functions
All you need to know about CSS Functions.
A drop-in solution for sites to prefetch links based on what is in the user’s viewport.
Customize your link preview.
2020-05-11
Google Chrome Developer Relations share essential metrics for a healthy site.
A Chrome extension to measure essential metrics for a healthy site,
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.
Miriam Suzanne shares how a smart way how to use a cascade of custom properties without worrying about the specificity.
The fastest dev environment for modern web apps.
2020-05-04
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 is a compact representation of a placeholder for an image.
2020-04-27
Define your own CSS property with a brand new @property.
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.
A web component for drawing patterns with CSS.
2020-04-20
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.
Leo Gopal shares some useful insights and thoughts about communication skills.
Could you fit your website on a floppy disc?
Are you ready for a new challenge?
Join The ProgramIf you found anything helpful, you could buy me a coffee.
Buy me a coffee☕️ ☕️ ☕️
Powered by Starter Project.