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 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 newsletter
Chris Coyier covers all aspects of the front-end developer role in great detail.
Josh Comeau shows an elegant solution to make a tricky modern layout using CSS grid.
David Walsh shows how to determine when an element becomes sticky.
Webpack releases a new version which contains architectural improvements and new features.
Polypane showcases CSS 3D transforms which create depth and visually interesting elements on your page using perspective.
Joel Thoms writes about a flood of low quality PR spam.
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.
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.
Cathy Dutton shows how to use subgrid to vertically center the content across all items.
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.
Burke Holland explains (in a sarcastic and fun way) how to set up and use Docker (from VS Code).
Manuel Matuzović lists 9 points on how to why the tab key is his favourite tool for testing website accessibility.
Lea Verou questions the ability to develop and use Web Components easily.
Timothy Okooboh writes about some CSS properties that you might know of/forgot about, but that could be quite useful.
Commit to open source by signing up for Hacktoberfest.
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.
Tomas Pustelnik shows a series of techniques on how to optimize the CSS code for performance.
Ayooluwa Isaiah describes how to set limits to code using webpack performance budgets.
Carl-W. Igelstroem describes how to use GitHub Actions to push new releases on NPM.
Michelle Barker shares thoughts on why coding challenges might not be a good idea.
Addy Osmani shows how to use VSCode extension to visualize data structures.
Caleb Porzio shows how to use VS Code to supercharge HTML editing.
Free SVG background generator for your websites, blogs and app.
Manuel Matuzović describes how to use progressive enhancement to write more accessible CSS code.
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.
Rick Strahl describes how to use the CSS brightness filter to highlight content without having to specify a specific color value.
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.
Lucy Turner shows how you can choose fonts that are right for your website.
A collection of real-world examples of beautiful CSS box-shadow examples.
Addy Osmani introduces Lighthouse's feature, which recommends smaller libraries that improve bundle size.
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>.
Chris Lilley highlights and describes many of CSS’s shortcomings.
Kilian Valkhof describes how to build a better input type=number.
Chidume Nnamdi explains all about CSS Variables, including usage, support, and advantages.
Sara Soueidan explains how Khan Academy 2018 Annual Report is presented and implemented in an accessible way to site’s visitors.
Dave Rupert tries to answer a question: What if Firefox switched to Chromium tomorrow, what would we lose?
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.
Matt Hobbs explains what the benefits of hiring a dedicated frontend developer are.
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.
Dave Smyth shares some useful things for easier CSS understanding, including box model, how height and width are calculated, and collapsing margins.
Lari Maza shows many ways how to display images correctly on all viewports, including using the new aspect-ratio property.
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.
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.
Nicky Meuleman explains in detail how to create eye-catching, animated link underlines using only CSS.
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.
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.
Suzanne Aitchison shares findings of CSS during her project of creating CSS art pieces.
Raja Jaganathan shows how to use and create a “Skip Nav” link.
Google Chrome allows you to take a screenshot of an element by right-clicking the element and select “Capture node screenshot”.
A big announcement of a significant restructuring of Mozilla Corporation.
Amelia Wattenberger explains what does percent refers to in CSS for different properties.
Chris Coyier introduces Amit Sheen’s Dashed Border Generator, which helps make fancy borders.
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.
Adam Wathan shows how to use @apply with multiple, complex classes for better clarity in Tailwind CSS.
Adam Argyle asks a simple question about widths in CSS. Do you know the answer?
Una Kravets shows how to improve initial load time by skipping the rendering of offscreen content.
Addy Osmani describes how to avoid layout shifts with infinite scroll.
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
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.
Chrome Dev Tools now supports CSS-in-JS.
Peter Murray shares five lessons he learned from teaching someone CSS.
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.
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.
Una Kravets announces the implementation of the Houdini Properties and Values API in Chromium 85.
Dave Rupert writes how to deal with complexity in frontend development.
Annie Liao shares useful advice on writing SCSS code.
Chris Coyier explains how to use templates in web development.
Abdelrhman Yousry creates a cheat sheet for improving your web development skills.
A free guide to learn product design in an uncomplicated way.
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.
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.
Maxime Heckel explains how a spring animation in a library like Framer Motion works and the physics behind it.
Uriel Bitton shows how to create a blurred transparent background.
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.
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.
Carrie Pascale explains basic webpack concepts and usage.
Zach Saucier writes an overview of scroll related technologies and tools.
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.
Ahmad Shadeed explains everything about layout wrappers in CSS, how they work, how to use them, and when not to use them.
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().
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.
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.
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.
Chris Coyier explains all about developer experience, the experience of developers.
Michelle Barker describes how to create a caption that needs to slide over an image on hover, revealing more content.
Lea Verou shows how to position an element with some smart JS and CSS calculations.
Will Boyd explores some of the unexpected things that CSS can animate and some nifty things you can do by animating them.
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.
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.
Jose Felix shares free illustration, development, CSS, Tailwind, design, and productivity resources.
Gerry McGovern shares his concerns about web performance.
Ivan Akulov reverse-engineer the Notion app and analyses possible ways to improve its performance.
Ana Tudor found a solution to a long-running problem using a modern CSS grid technique.
Preethi shows how to use gradients and other things, like CSS shapes and emoji, to make background patterns.
Thiru Manikandan shows how to understand z-index and stacking order.
Kyle Prinsloo shares advice on how to start freelancing.
Fayaz Ahmed made a list of free tools for web development.
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.
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.
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.
A tool for creating unique section separators.
Olivia Ng created awesome newsletter layout using CSS Grid.
Manuel Matuzović inspects one of the most complicated and most controversial patterns in front-end development: the close button.
Tristram Tolliday shows how to use structured data to help surface content in more useful and engaging ways.
Vikas Parashar explores possible solutions for block links
Chen Hui Jing shares insights about position: fixed and backgrounds.
Amber Wilson shares CSS tips for beginners.
Build Plugins allow you to automate build tasks, customize your build process, and make your development process even easier.
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.
Harry Roberts figures out the most efficient way to load Google Fonts.
Ahmad Shadeed digs deep in overall in CSS.
Excellent list of advices how not to ruin your career.
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.
Craig Mod shares his thoughts about building fast and light software.
Chrome extension which make it easier to develop pixel-perfect sites.
Stephanie Eckles shares modern CSS solutions for old CSS problems.
Tim Casasola shares insights on why writing is important.
Caleb Williams has figured out how to enhance line-height in CSS.
Mariane Santana explains how Promise works.
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.
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.
Peter Tasker shows how to create custom Gutenberg blocks for laying out content in WordPress.
Dmitry Mayorov explains how to define instances of existing blocks using WordPress Block Variations.
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.
Sarah Drasner shares useful tips on how to build your resume.
If you are into #100DaysOfCode, this tool could help stay on track.
Barry Pollard explains why you should put width and height attributes to every image.
Will Boyd teaches how to handle text selection using CSS only.
There are 71 free development courses on Udemy.
Manea Adrian shows 5 free amazing tools that will make you a more overall productive developer.
Addy Osmani collected recipes for automating Web Performance measurement with Puppeteer.
BlurHash is a compact representation of a placeholder for an image.
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.
Adam Laki shares his thoughts on using the <br> elements.
Julia Evans and Chris Coyier agree that being positive could get you a long way, even when debugging.
Ahmad Shadeed breaks down the new Facebook designs and finds many interesting CSS things.
Devon Campbell shares tips about working remotely.
Another discussion about “frontend developer” title.
A web component for drawing patterns with CSS.
Matt Smith’s collection of well-received talks about CSS.
Matt Smith’s collection of tips to help take your CSS skills pro.
Utsav Ahuja shares his learnings and advice on software engineering offers.
Harry Roberts shares his Git tips and tricks.
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 Program
If you found anything helpful, you could buy me a coffee.Buy me a coffee
☕️ ☕️ ☕️
Powered by Starter Project.