rssed

a collection of dev rss feeds - blogroll

Add a new feed

+

167 feeds


CSS Wizardry

Posts

Licensing Code on CSS Wizardry πŸ”—

I’ve recently decided to apply the permissive MIT License to all content on CSS Wizardry by default. How does this affect you? [...]

A Layered Approach to Speculation Rules πŸ”—

The new Speculation Rules API is incredibly powerful, but we can do so much more! By taking a layered, opt-in approach, we can add more progressive an [...]

Designing (and Evolving) a New Web Performance Score πŸ”—

Why design another new performance score?! Good question… [...]

Core Web Vitals Colours πŸ”—

If, like me, you frequently require the Core Web Vitals colour palete, here it is! [...]

The Ultimate Contract Templates for Tech Consultants: Protect Your Business and Get Paid πŸ”—

If you want to start consulting, you’re gonna need some paperwork! [...]

Optimising for High Latency Environments πŸ”—

We can’t do much to change latency, so how can we work around it? [...]

Cache Grab: How Much Are You Leaving on the Table? πŸ”—

Quantifying the importance of caching just got a lot easier [...]

blocking=render: Why would you do that?! πŸ”—

Why on earth would you make something render-blocking?! [...]

Correctly Configure (Pre) Connections πŸ”—

We’re probably familiar with preconnect, but are we getting it right? [...]

The Three Cs: 🀝 Concatenate, πŸ—œοΈΒ Compress, πŸ—³οΈΒ Cache πŸ”—

We know we should do it, but do we know how? [...]

What Is the Maximum max-age? πŸ”—

We usually set max-age directives to a year; can we go longer? [...]

How to Clear Cache and Cookies on a Customer’s Device πŸ”—

There’s a super quick and easy way to clear cache on your customers’ devices. Are you using it yet? [...]

The Ultimate Low-Quality Image Placeholder Technique πŸ”—

Can Low-Quality Image Placeholders and LCP play nicely together? [...]

Core Web Vitals for Search Engine Optimisation: What Do We Need to Know? πŸ”—

There’s still a lot of misunderstanding about CWV for SEO. Let’s work it out together. [...]

The HTTP/1-liness of HTTP/2 πŸ”—

If HTTP/2 is so much better, why does it look so similar to HTTP/1?! [...]

In Defence of DOMΒ­ContentΒ­Loaded πŸ”—

Is there any reason to still measure the DOMContentLoaded event? Perhaps… [...]

Site-Speed Topography Remapped πŸ”—

Revisiting and remapping my Site-Speed Topography technique for assessing web performance at large [...]

Why Not document.write()? πŸ”—

We’re often told not to use document.write(), but… why?! [...]

Speeding Up Async Snippets πŸ”—

Async snippets used to improve performance, but now they’re a legacy anti-pattern. How do we handle them now? [...]

Critical CSS? Not So Fast! πŸ”—

How helpful is Critical CSS? [...]

Measure What You Impact, Not What You Influence πŸ”—

When implementing performance fixes, it’s imperative that you measure the right thingβ€”but what is β€˜right’? [...]

Optimising Largest Contentful Paint πŸ”—

Let’s look at some more technical and non-obvious aspects of optimising Largest Contentful Paint [...]

Measuring Web Performance in Mobile Safari πŸ”—

How often do you test your site in iOS Safari? Do you even know how?! [...]

Site-Speed Topography πŸ”—

Learning the lay of the land [...]

Speed Up Google Fonts πŸ”—

Google Fonts is fast. Now it’s faster. Much faster. [...]

Real-World Effectiveness of Brotli πŸ”—

How effective is Brotli, really? [...]

Performance Budgets, Pragmatically πŸ”—

If you’ve ever struggled to define performance budgets, this off-the-shelf trick is what you’re looking for. [...]

Lazy Pre-Browsing with Prefetch πŸ”—

Using prefetch for fun and profit [...]

Making Cloud.typography Fast(er) πŸ”—

What issues does Hoefler&Co’s Cloud.typography introduce, and how can we mitigate them? [...]

Time to First Byte: What It Is and How to Improve It πŸ”—

Just how much does TTFB matter when it comes to front-end performance? [...]

Self-Host Your Static Assets πŸ”—

Why is it so much better to self-host your static assets? [...]

Tips for Technical Interviews πŸ”—

How can you prepare for and survive a technical interview? [...]

Cache-Control for Civilians πŸ”—

What does Cache-Control really do? In basic terms? Let’s find out! [...]

Bandwidth or Latency: When to Optimise for Which πŸ”—

How can you tell when bandwidth or latency are your bottlenecks? [...]

ITCSS Γ— Skillshare πŸ”—

The official introduction to ITCSS on Skillshare [...]

What If? πŸ”—

How do we so often forget to ask the simple question: what if? [...]

CSS and Network Performance πŸ”—

How can CSS impact network and resource-loading performance? Can things be that serious? [...]

The Three Types of Performance Testing πŸ”—

How can we make it easier for businesses to understand when and what to measure? [...]

Getting to Know a Legacy Codebase πŸ”—

What should you do when you first get launched into an old, sprawling CSS codebase? [...]

Image Inconsistencies: How and When Browsers Download Images πŸ”—

How and when do browsers download certain types of image? What does that mean for performance? [...]

Identifying, Auditing, and Discussing Third Parties πŸ”—

Gathering data about third-parties using free and open-source tooling [...]

My Digital Music Setup πŸ”—

An overview of my hardware and software setup for listening to digital music [...]

Measuring the Hard-to-Measure πŸ”—

How can we gather valuable data about previously hard-to-measure things? [...]

Finding Dead CSS πŸ”—

Finding dead or unused CSS on a live website [...]

The Fallacies of Distributed Computing (Applied to Front-End Performance) πŸ”—

What can front-end and performance engineers learn from the Fallacies of Distributed Computing? [...]

Ten Years Old πŸ”—

csswizardry.com turns ten today! [...]

Relative Requirements πŸ”—

Define the relative importance of project traits in order to make development smoother [...]

Airplanes and Ashtrays πŸ”—

Sometimes you need to make it possible to do the wrong thing… [...]

Performance and Resilience: Stress-Testing Third Parties πŸ”—

Assessing the fragility and resilience of third party resources [...]

Refactoring Tunnels πŸ”—

A metaphor for defining the scope of refactoring tasks [...]

Little Things I Like to Do with Git πŸ”—

Git is a bunch of fun [...]

Writing Tidy Code πŸ”—

Even the most inexperienced developers can write great looking code [...]

Configuring Git and Vim πŸ”—

Both amazing tools in their own rights, how can we get both playing nicely together? [...]

Base64 Encoding & Performance, Part 2: Gathering Data πŸ”—

Statistics, tests, and numbers looking at the performance costs of Base64 [...]

Base64 Encoding & Performance, Part 1: What’s Up with Base64? πŸ”—

A look at the many huge disadvantages of Base64 encoding assets into your CSS [...]

Code Smells in CSS Revisited πŸ”—

An update to my 2012 article, Code Smells in CSS [...]

Typography for Developers πŸ”—

A look at the simple differences that developers and engineers can make in order to improve the quality of their typography [...]

Moving CSS Wizardry onto HTTPS and HTTP/2 πŸ”—

Improving security and performance on CSS Wizardry [...]

Ack for CSS Developers πŸ”—

Using the Ack tool to audit and profile your CSS [...]

A New Year, a New Focus πŸ”—

In 2017, I want to begin shifting my focus more toward making things fast [...]

Preparing Vim for Apple’s Touch Bar πŸ”—

Apple are replacing their function row with a Touch Bar; how will this affect Vim? [...]

Choosing the Correct Average πŸ”—

A look at which average works best for representing certain types of data [...]

CSS Shorthand Syntax Considered an Anti-Pattern πŸ”—

Avoid using CSS’ shorthand syntax [...]

CSS Wizardry Newsletter πŸ”—

CSS Wizardry has just got itself a newsletter… [...]

Nesting Your BEM? πŸ”—

A look at the possible benefits of nesting BEM, and mitigating the side effects [...]

Improving Perceived Performance with Multiple Background Images πŸ”—

Using CSS gradients and multiple backgrounds to improve resilience and perceived performance [...]

Continue Normalising Your CSS πŸ”—

Why we should still be using Normalize.css [...]

Pure CSS Content Filter πŸ”—

Experiment: Making a content filter using CSS [...]

Pragmatic, Practical, and Progressive Theming with Custom Properties πŸ”—

A low-cost approach for providing user customisation in UI projects [...]

Refactoring CSS: The Three I’s πŸ”—

Three key steps to help you refactoring legacy code [...]

Speaker’s Checklist: Before and After Your Talk πŸ”—

Giving talks is stressful. Follow these tips to make the logistics of it a little simpler. [...]

Improving Your CSS with Parker πŸ”—

Using static analysis to learn where to improve your CSS [...]

The Importance of !important: Forcing Immutability in CSS πŸ”—

Forcing immutability in our utility classes by using !important [...]

Mixins Better for Performance πŸ”—

A look at the performance difference between Sass’ mixins and @extend [...]

Managing Typography on Large Apps πŸ”—

A look at managing typography more practically on larger sites and apps [...]

White October Events Workshop Partnership πŸ”—

An exciting new partnership to offer public workshops [...]

BEMIT: Taking the BEM Naming Convention a Step Further πŸ”—

Adding further meaning and information to the BEM naming convention [...]

Travelling Like You Want to, When You Have To πŸ”—

My own personal tips and tricks for surviving lots of air travel. [...]

Contextual Styling: UI Components, Nesting, and Implementation Detail πŸ”—

How to style specific components when they’re in specific locations [...]

Subtleties with Self-Chained Classes πŸ”—

A brief note on some of the subtleties and oddities when chaining classes with themselves. [...]

Cyclomatic Complexity: Logic in CSS πŸ”—

A look at how CSS has always contained logic and conditions [...]

Immutable CSS πŸ”—

Treating CSS rules as being immutable [...]

Can CSS Be Too Modular? πŸ”—

Looking at the dangers of abstracting CSS too far [...]

More Transparent UI Code with Namespaces πŸ”—

Employing a suite of namespaces to make your UI code more readable and transparent [...]

When to use @extend; when to use a mixin πŸ”—

When is it suitable to use Sass @extend or mixin features, and why? [...]

The Specificity Graph πŸ”—

The Specificity Graph as a model for visualising specificity issues in your code [...]

CSS Wizardry Ltd.: Year 1 in review πŸ”—

A look back on my first year of self employment [...]

CSS Guidelines 2.0.0 πŸ”—

Announcing the next iteration and business model of my popular CSS Guidelines document [...]

Advice to budding front-end developers πŸ”—

A collation of the advice I regularly give out to new and emerging web developers [...]

CSS Wizardry referral scheme πŸ”—

A way to say thank you to the individuals responsible for their companies hiring me [...]

Hacks for dealing with specificity πŸ”—

A couple of quick hacks and tricks for manipulating specificity [...]

A new focus, a new site πŸ”—

Redesigning CSS Wizardry to better suit my needs [...]

Vim for People Who Think Things Like Vim Are Weird and Hard πŸ”—

An introduction to the whats and the whys of using Vim as your text editor [...]

Grouping related classes in your markup πŸ”—

An interesting way of visually and β€˜physically’ grouping multiple class attributes [...]

My Trello workflow πŸ”—

How I manage development projects using Trello [...]

Naming UI components in OOCSS πŸ”—

A way of giving complex, OOCSS-built components more meaningful names [...]

Use zero-width spaces to stop annoying Twitter users πŸ”—

A little trick to stop mentioning Twitter users when you write @import, etc. [...]

Extending silent classes in Sass πŸ”—

A simple trick for controlling the reach of Sass’ `@extend` [...]

Workshop: Event Handler, London, February 2014 πŸ”—

My first workshop in association with the fine folk at Event Handler [...]

I wrote (part of) a book! πŸ”—

My section in the latest Smashing Book [...]

My setup πŸ”—

A brief overview of my tools and software I use for work [...]

The problems with β€˜crafting’ code πŸ”—

Some thoughts on our use of the word β€˜craft’ to describe our work [...]

Taming data tables πŸ”—

Laying out data tables in a consistent way, finally! [...]

Workshop: Smashing Workshops, ZΓΌrich, December 2013 πŸ”—

Announcing my first workshop in association with Smashing Workshops [...]

Code reviews as a service πŸ”—

A new service I’m offering: remote code reviews [...]

Workshop: Make Do, Leeds, November 2013 πŸ”—

Announcing my first workshop in association with Make Do [...]

β€˜It’s because you’re polite.’ πŸ”—

A personal post about helpfulness and politeness. [...]

Let’s work together πŸ”—

I’m looking for amazing people to work with on great products. [...]

Make it count πŸ”—

Everything you do, do it for a reason, and make that reason a good one. [...]

Speak The Web discount code πŸ”—

Amazing events with 25% off! [...]

Leeds hangout πŸ”—

I have a couple of days off in Leeds around two conferences; let’s meet…? [...]

Writing DRYer vanilla CSS πŸ”—

DRYing out our CSS at its most basic level [...]

Hashed classes in CSS πŸ”—

Spoofing the uniqueness of IDs by putting hashes in your classes [...]

β€˜Scope’ in CSS πŸ”—

Applying the concept of scope to our CSS [...]

The flag object πŸ”—

A new OOCSS abstraction [...]

shame.css – full .net interview πŸ”—

The full version of the .net magazine shame.css interview [...]

shame.css πŸ”—

Keeping track of your hacks [...]

.net award nominee πŸ”—

I’ve been nominated for a .net award! [...]

Introducing csswizardry-grids πŸ”—

A responsive, fluid, nestable, Sass-based grid system. [...]

Responsive grid systems; a solution? πŸ”—

A look at building a practical, robust, flexible, usable responsive grid system. [...]

You know your context – on critical thinking and thinking for yourself πŸ”—

About learning to look at things objectively and apply your own context [...]

MindBEMding – getting your head ’round BEM syntax πŸ”—

A primer on the oft-confusing BEM notation for CSS [...]

Your logo is still an image… and so is mine! πŸ”—

Balancing image semantics with performance ideals [...]

Front-end performance for web designers and front-end developers πŸ”—

A comprehensive primer on front-end performance for designers and front-end developers [...]

Discussion via Branch πŸ”—

Adding comments though Branch [...]

A new CSS Wizardry πŸ”—

Big changes for CSS Wizardry [...]

Open Sourceome πŸ”—

We’re pretty awesome, really… [...]

My Git workflow for inuit.css πŸ”—

A brief overview of how I use Git, specifically on inuit.css. [...]

Code smells in CSS πŸ”—

The things I look out for when writing or reviewing CSS. [...]

A classless classβ€”on using more classes in your HTML πŸ”—

An analogy to explain why it is a good idea to use more classes. [...]

Announcing pr.ofile.me πŸ”—

A new project! [...]

inuit.css v4.0.0β€”OOCSS, Sass and more πŸ”—

Canvas Conf, 2012 πŸ”—

Tags in CSS files πŸ”—

Video: Breaking Good Habitsβ€”Front-Trends, 2012 πŸ”—

Shoot to kill; CSS selector intent πŸ”—

Quasi-qualified CSS selectors πŸ”—

The open/closed principle applied to CSS πŸ”—

Single-direction margin declarations πŸ”—

Keep your CSS selectors short πŸ”—

Front-Trends 2012 πŸ”—

The single responsibility principle applied to CSS πŸ”—

My HTML/CSS coding style πŸ”—

Introducing faavorite πŸ”—

Comments on CSS Wizardry πŸ”—

Hacker News rebuttal πŸ”—

Pragmatic, practical font sizing in CSS πŸ”—

Breaking Good Habitsβ€”The Digital Barn πŸ”—

On HTML and CSS best practices πŸ”—

Measuring and sizing UIs, 2011-style (and beyond) πŸ”—

Create a notched current-state nav πŸ”—

Build-along #1, reflection and reasoning πŸ”—

CSS Wizardry build-along #1 πŸ”—

Sam Penrose Designβ€”process and write-up πŸ”—

Fully fluid, responsive CSS carousel πŸ”—

The CSS Wizardry build-along is go! πŸ”—

Build-along (testing the water) πŸ”—

Reset restarted πŸ”—

The β€˜island’ object πŸ”—

The β€˜nav’ abstraction πŸ”—

Ordered and numbered lists; the differences πŸ”—

Writing efficient CSS selectors πŸ”—

Do designers need to code? πŸ”—

When using IDs can be a pain in the class... πŸ”—

Two titillating table tips πŸ”—

Building better grid systems πŸ”—

Good developers are illusionists πŸ”—

Updated CV πŸ”—

More logo markup tips πŸ”—

Borders on responsive images πŸ”—

hry.rbrts.me πŸ”—

.net magazine awards nominee πŸ”—

Responsive images right now πŸ”—

Fluid grid calculator πŸ”—

Namespacing fragment identifiers πŸ”—

What is inuit.css? πŸ”—

Styling alt text on images πŸ”—

Introducing igloosβ€”inuit.css gets plugins πŸ”—

DIBI 2011 πŸ”—

Annotated <figure>s in HTML5 and CSS πŸ”—

Font sizing with rem could be avoided πŸ”—

jQuery placeholder plugin/polyfill πŸ”—

On negative hovers πŸ”—

Introducing inuit.css πŸ”—

Ideas of March πŸ”—

Coding up a semantic, lean timeline πŸ”—

Link: Technical Web Typography: Guidelines and Techniques πŸ”—

Problems with the sans-serif hack πŸ”—

Mobile business card πŸ”—

Creating a pure CSS dropdown menu πŸ”—

Pure CSS(3) accordion πŸ”—

CSS powered ribbons the clean way πŸ”—

in:focusβ€”a case study πŸ”—

Announcing in:focus πŸ”—

Forget responsive web design… πŸ”—

Create a centred horizontal navigation πŸ”—

Link: Recreating the Luke's Beard social icons with CSS3 πŸ”—

Using the <body> element as a wrapper πŸ”—

HTML(5) and text-level semantics πŸ”—

Client respect πŸ”—

Maximising hit-area for usability πŸ”—

HTML elements, tags and attributes πŸ”—

A new year, a new CSS Wizardry II πŸ”—

Scrolling overflowed content in iOS πŸ”—

The real HTML5 boilerplate πŸ”—

A new year, a new CSS Wizardry πŸ”—

Mo’ robust paragraph indenting πŸ”—

Media queries, handier than you think πŸ”—

Remote controlled hyperlinks (or multiple links in one hyperlink) πŸ”—

Simplified page borders in pure CSS πŸ”—

The implementation ∝ appreciation rule πŸ”—

CSS: CamelCase Seriously Sucks! πŸ”—

Tweet this! πŸ”—

Let it snow! πŸ”—

Improving CSS tooltips πŸ”—

Design and education πŸ”—

Mark up a semantic, accessible, progressively enhanced, mobile optimised progress bar (bonus: style the numbers in an ordered list!) πŸ”—

I hate that I love Writer πŸ”—

Unsung heroes πŸ”—

Things are changing at CSS Wizardry πŸ”—

Your logo is an image, not an <h1> πŸ”—

Hyperbolic title using the word sexy to describe some code πŸ”—

Good developers vs. good salespeople πŸ”—

Designing in the browser leads to better quality builds πŸ”—

In response to 'Invisible captcha to prevent form spam' πŸ”—

Keeping code clean with content πŸ”—

A quick counter to 'The Digital Agencies of the Future!' πŸ”—

Set then unset (or reset...?) πŸ”—

Zebra-striping rows and columns πŸ”—

Semantics and sensibility πŸ”—

Building sites without using IDs or classes πŸ”—

30 days without an iPhone πŸ”—

Moving forward is holding us back πŸ”—

A quick note on border radius πŸ”—

Suzanna Haworth Photography redesign πŸ”—

Usability in everyday items πŸ”—

Type tipsβ€”quick tips on all things web typography πŸ”—

Typographic phrases (or: how to turn sayings geeky) πŸ”—

Multiple column lists using one <ul> πŸ”—

Upside down domainsβ€”registering an international domain name πŸ”—

CSS bar chartsβ€”styling data with CSS3 and progressive enhancement πŸ”—

iPhone CSSβ€”tips for building iPhone websites πŸ”—

The three types of dash πŸ”—

The importance of proper punctuation πŸ”—

A reconsiderationβ€”in defence of <b> and <i> (or: people fear what they don’t understand) πŸ”—

A suitable alternativeβ€”on proper use of alt attributes πŸ”—

Typographic work planner πŸ”—