Sentinel: Your Web-Performance Watchman

CSS Wizardry Posts Archive

I have written 234 post on this site, mostly covering CSS, architecture, performance, and web development. Find a reverse-chronological list of them below, or, at random, why not read Core Web Vitals for Search Engine Optimisation: What Do We Need to Know??

2023

  1. : Core Web Vitals for Search Engine Optimisation: What Do We Need to Know?
  2. : The HTTP/1-liness of HTTP/2
  3. : In Defence of DOM­Content­Loaded
  4. : Site-Speed Topography Remapped
  5. : Why Not document.write()?

2022

  1. : Speeding Up Async Snippets
  2. : Critical CSS? Not So Fast!
  3. : Measure What You Impact, Not What You Influence
  4. : Optimising Largest Contentful Paint

2021

  1. : Measuring Web Performance in Mobile Safari

2020

  1. : Site-Speed Topography
  2. : The Fastest Google Fonts
  3. : Real-World Effectiveness of Brotli
  4. : Performance Budgets, Pragmatically

2019

  1. : Lazy Pre-Browsing with Prefetch
  2. : Making Cloud.typography Fast(er)
  3. : Time to First Byte: What It Is and Why It Matters
  4. : Self-Host Your Static Assets
  5. : Tips for Technical Interviews
  6. : Cache-Control for Civilians
  7. : Bandwidth or Latency: When to Optimise for Which

2018

  1. : ITCSS × Skillshare
  2. : What If?
  3. : CSS and Network Performance
  4. : The Three Types of Performance Testing
  5. : Getting to Know a Legacy Codebase
  6. : Image Inconsistencies: How and When Browsers Download Images
  7. : Identifying, Auditing, and Discussing Third Parties
  8. : My Digital Music Setup
  9. : Measuring the Hard-to-Measure
  10. : Finding Dead CSS

2017

  1. : The Fallacies of Distributed Computing (Applied to Front-End Performance)
  2. : Ten Years Old
  3. : Relative Requirements
  4. : Airplanes and Ashtrays
  5. : Performance and Resilience: Stress-Testing Third Parties
  6. : Refactoring Tunnels
  7. : Little Things I Like to Do with Git
  8. : Writing Tidy Code
  9. : Configuring Git and Vim
  10. : Base64 Encoding & Performance, Part 2: Gathering Data
  11. : Base64 Encoding & Performance, Part 1: What’s Up with Base64?
  12. : Code Smells in CSS Revisited
  13. : Typography for Developers
  14. : Moving CSS Wizardry onto HTTPS and HTTP/2
  15. : Ack for CSS Developers
  16. : A New Year, a New Focus
  17. : Preparing Vim for Apple’s Touch Bar
  18. : Choosing the Correct Average

2016

  1. : CSS Shorthand Syntax Considered an Anti-Pattern
  2. : CSS Wizardry Newsletter
  3. : Nesting Your BEM?
  4. : Improving Perceived Performance with Multiple Background Images
  5. : Continue Normalising Your CSS
  6. : Pure CSS Content Filter
  7. : Pragmatic, Practical, and Progressive Theming with Custom Properties
  8. : Refactoring CSS: The Three I’s
  9. : Speaker’s Checklist: Before and After Your Talk
  10. : Improving Your CSS with Parker
  11. : The Importance of !important: Forcing Immutability in CSS
  12. : Mixins Better for Performance
  13. : Managing Typography on Large Apps

2015

  1. : White October Events Workshop Partnership
  2. : BEMIT: Taking the BEM Naming Convention a Step Further
  3. : Travelling Like You Want to, When You Have To
  4. : Contextual Styling: UI Components, Nesting, and Implementation Detail
  5. : Subtleties with Self-Chained Classes
  6. : Cyclomatic Complexity: Logic in CSS
  7. : Immutable CSS
  8. : Can CSS Be Too Modular?
  9. : More Transparent UI Code with Namespaces

2014

  1. : When to use @extend; when to use a mixin
  2. : The Specificity Graph
  3. : CSS Wizardry Ltd.: Year 1 in review
  4. : CSS Guidelines 2.0.0
  5. : Advice to budding front-end developers
  6. : CSS Wizardry referral scheme
  7. : Hacks for dealing with specificity
  8. : A new focus, a new site
  9. : Vim for People Who Think Things Like Vim Are Weird and Hard
  10. : Grouping related classes in your markup
  11. : My Trello workflow
  12. : Naming UI components in OOCSS
  13. : Use zero-width spaces to stop annoying Twitter users
  14. : Extending silent classes in Sass

2013

  1. : Workshop: Event Handler, London, February 2014
  2. : I wrote (part of) a book!
  3. : My setup
  4. : The problems with ‘crafting’ code
  5. : Taming data tables
  6. : Workshop: Smashing Workshops, Zürich, December 2013
  7. : Code reviews as a service
  8. : Workshop: Make Do, Leeds, November 2013
  9. : ‘It’s because you’re polite.’
  10. : Let’s work together
  11. : Make it count
  12. : Speak The Web discount code
  13. : Leeds hangout
  14. : Writing DRYer vanilla CSS
  15. : Hashed classes in CSS
  16. : ‘Scope’ in CSS
  17. : The flag object
  18. : shame.css – full .net interview
  19. : shame.css
  20. : .net award nominee
  21. : Introducing csswizardry-grids
  22. : Responsive grid systems; a solution?
  23. : You know your context – on critical thinking and thinking for yourself
  24. : MindBEMding – getting your head ’round BEM syntax
  25. : Your logo is still an image… and so is mine!
  26. : Front-end performance for web designers and front-end developers
  27. : Discussion via Branch

2012

  1. : A new CSS Wizardry
  2. : Open Sourceome
  3. : My Git workflow for inuit.css
  4. : Code smells in CSS
  5. : A classless class—on using more classes in your HTML
  6. : Announcing pr.ofile.me
  7. : inuit.css v4.0.0—OOCSS, Sass and more
  8. : Canvas Conf, 2012
  9. : Tags in CSS files
  10. : Video: Breaking Good Habits—Front-Trends, 2012
  11. : Shoot to kill; CSS selector intent
  12. : Quasi-qualified CSS selectors
  13. : The open/closed principle applied to CSS
  14. : Single-direction margin declarations
  15. : Keep your CSS selectors short
  16. : Front-Trends 2012
  17. : The single responsibility principle applied to CSS
  18. : My HTML/CSS coding style
  19. : Introducing faavorite
  20. : Comments on CSS Wizardry
  21. : Hacker News rebuttal
  22. : Pragmatic, practical font sizing in CSS
  23. : Breaking Good Habits—The Digital Barn

2011

  1. : On HTML and CSS best practices
  2. : Measuring and sizing UIs, 2011-style (and beyond)
  3. : Create a notched current-state nav
  4. : Build-along #1, reflection and reasoning
  5. : CSS Wizardry build-along #1
  6. : Sam Penrose Design—process and write-up
  7. : Fully fluid, responsive CSS carousel
  8. : The CSS Wizardry build-along is go!
  9. : Build-along (testing the water)
  10. : Reset restarted
  11. : The ‘island’ object
  12. : The ‘nav’ abstraction
  13. : Ordered and numbered lists; the differences
  14. : Writing efficient CSS selectors
  15. : Do designers need to code?
  16. : When using IDs can be a pain in the class...
  17. : Two titillating table tips
  18. : Building better grid systems
  19. : Good developers are illusionists
  20. : Updated CV
  21. : More logo markup tips
  22. : Borders on responsive images
  23. : hry.rbrts.me
  24. : .net magazine awards nominee
  25. : Responsive images right now
  26. : Fluid grid calculator
  27. : Namespacing fragment identifiers
  28. : What is inuit.css?
  29. : Styling alt text on images
  30. : Introducing igloos—inuit.css gets plugins
  31. : DIBI 2011
  32. : Annotated <figure>s in HTML5 and CSS
  33. : Font sizing with rem could be avoided
  34. : jQuery placeholder plugin/polyfill
  35. : On negative hovers
  36. : Introducing inuit.css
  37. : Ideas of March
  38. : Coding up a semantic, lean timeline
  39. : Link: Technical Web Typography: Guidelines and Techniques
  40. : Problems with the sans-serif hack
  41. : Mobile business card
  42. : Creating a pure CSS dropdown menu
  43. : Pure CSS(3) accordion
  44. : CSS powered ribbons the clean way
  45. : in:focus—a case study
  46. : Announcing in:focus
  47. : Forget responsive web design…
  48. : Create a centred horizontal navigation
  49. : Link: Recreating the Luke's Beard social icons with CSS3
  50. : Using the <body> element as a wrapper
  51. : HTML(5) and text-level semantics
  52. : Client respect
  53. : Maximising hit-area for usability
  54. : HTML elements, tags and attributes
  55. : A new year, a new CSS Wizardry II
  56. : Scrolling overflowed content in iOS
  57. : The real HTML5 boilerplate
  58. : A new year, a new CSS Wizardry

2010

  1. : Mo’ robust paragraph indenting
  2. : Media queries, handier than you think
  3. : Remote controlled hyperlinks (or multiple links in one hyperlink)
  4. : Simplified page borders in pure CSS
  5. : The implementation ∝ appreciation rule
  6. : CSS: CamelCase Seriously Sucks!
  7. : Tweet this!
  8. : Let it snow!
  9. : Improving CSS tooltips
  10. : Design and education
  11. : Mark up a semantic, accessible, progressively enhanced, mobile optimised progress bar (bonus: style the numbers in an ordered list!)
  12. : I hate that I love Writer
  13. : Unsung heroes
  14. : Things are changing at CSS Wizardry
  15. : Your logo is an image, not an <h1>
  16. : Hyperbolic title using the word sexy to describe some code
  17. : Good developers vs. good salespeople
  18. : Designing in the browser leads to better quality builds
  19. : In response to 'Invisible captcha to prevent form spam'
  20. : Keeping code clean with content
  21. : A quick counter to 'The Digital Agencies of the Future!'
  22. : Set then unset (or reset...?)
  23. : Zebra-striping rows and columns
  24. : Semantics and sensibility
  25. : Building sites without using IDs or classes
  26. : 30 days without an iPhone
  27. : Moving forward is holding us back
  28. : A quick note on border radius
  29. : Suzanna Haworth Photography redesign
  30. : Usability in everyday items
  31. : Type tips—quick tips on all things web typography
  32. : Typographic phrases (or: how to turn sayings geeky)
  33. : Multiple column lists using one <ul>
  34. : Upside down domains—registering an international domain name
  35. : CSS bar charts—styling data with CSS3 and progressive enhancement
  36. : iPhone CSS—tips for building iPhone websites
  37. : The three types of dash
  38. : The importance of proper punctuation
  39. : A reconsideration—in defence of <b> and <i> (or: people fear what they don’t understand)
  40. : A suitable alternative—on proper use of alt attributes

2009

  1. : Typographic work planner

Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.

You can now find me on Mastodon.

Suffering? Fix It Fast!

Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Next Appearance

Learn:

I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.

Suffering? Fix It Fast!