Michelle Barker is a front-end developer and writer behind CSS { In Real Life }, a blog dedicated to modern CSS and real-world web development. She shares honest, practical insights on evolving CSS features, front-end techniques, and the web community.
227 articles from this blog
A CSS Grid trick to create a contact list where all items share the width of the longest item, with alternative solutions using inline-block and inline-flex.
First part of a series on building a modern front-end project starter using NPM scripts for tasks like Sass compilation and live reloading.
A tutorial on using Parcel, a zero-config JavaScript module bundler, to build and optimize modern front-end projects.
Part 3 of a series on building a modern front-end workflow, focusing on implementing a scalable Sass architecture based on ITCSS principles.
A tutorial on creating a scrapbook-style web layout using CSS Grid's compound grid technique, inspired by a personal project.
A reflection on web development fundamentals, arguing for prioritizing accessibility, HTML, and CSS over JavaScript frameworks to build a web for everyone.
Explores accessibility issues when splitting text with JavaScript for animations and provides solutions using WAI-ARIA to ensure screen reader compatibility.
A tutorial on creating animated typography effects using variable fonts, CSS animations, and the Splitting.js JavaScript library.
A tutorial on creating an animated sun illustration using only CSS, including gradients, pseudo-elements, and mask-image.
Explores CSS Grid auto-placement, explicit item positioning, and the use of grid-template-areas for layout control.
A guide to enabling experimental web platform features like CSS subgrid in Chrome and Firefox using browser flags and hidden config pages.
A conference talk video explaining how to build complex and flexible web layouts using CSS Grid, from basics to advanced techniques.
A summary of key talks from the Pixel Pioneers 2019 web development conference, covering UX, CSS animation, flexbox, and CSS Grid.
A female front-end developer shares practical advice for tech companies to improve diversity in hiring and retention, based on personal experience.
Firefox Nightly now supports CSS Subgrid, a key feature of CSS Grid Level 2, enabling more complex and creative web layouts.
A guide explaining how to use Git's stash command to manage uncommitted changes when switching between multiple branches.
Explains CSS Grid's fr (fraction) units, covering their use for responsive layouts, common pitfalls, and how they interact with fixed tracks.
Explains the concept of implicit tracks in CSS Grid, a common source of layout issues, and how they differ from the explicit grid.
A CSS Grid tutorial on using pseudo-selectors to control the layout of leftover items (widows) in a grid, comparing it to flexbox solutions.
A guide on using Git's amend and rebase commands to edit past commit messages and modify files in previous commits.
