A selection of articles I’ve written for online publications.
-
Why Are We Talking About CSS4?
Around the web and within the CSS Working Group, there has been some discussion about whether we should specify a version of CSS — perhaps naming it CSS4.
-
Understanding CSS Grid: Grid Template Areas
Part of a series on CSS Grid Layout for Smashing magazine. This time, we take a look at how to use grid-template-areas to place items.
-
Understanding CSS Grid: Grid Lines
In this article in the series on Grid Layout I take a look at how to use the grid lines to place items.
-
Understanding CSS Grid: Creating A Grid Container
In this series I break down the CSS Grid Layout specification. This time, we take a detailed look at what happens when you create a grid container and the various properties that can be applied to the container to shape your grid.
-
2019: A Smashing Year In Review
The Smashing Team looks back at 2019. It’s been a busy year with new team members, four conferences, two books, a print magazine, and many, many articles.
-
Helping Browsers Optimize With The CSS contain Property
The CSS contain property gives you a way to explain your layout to the browser, so performance optimizations can be made. However, it does come with some side effects in terms of your layout.
-
A History of CSS Through Fifteen Years of 24 ways
I’ve written nine articles in the 15 years of 24 ways, and all but one of those articles had something to do with CSS. In this last year of the project, I thought I would take a look back at those CSS articles.
-
Web Design and Development Advent Round-up 2019
A roundup of Advent Calendar sites of interest to web designers and developers. From accessibility to UX, coding challenges to Perl, there really is something for everyone this December.
-
Black Friday 2019: Support Indie Makers
Rather than do a round-up of the best deals available this Black Friday, we decided to do a round-up of the best independent products and makers. If you have money to spend, why not send some of this to folk creating great stuff in our community.
-
Teaching CSS
Chris Coyier asked me and a bunch of other web folk, “What about building websites has you interested this year?” This was my answer to that question.
-
Things We Can’t (Yet) Do In CSS
In this article, Rachel Andrew looks at some common layout patterns that we can’t yet do on the web and the CSS Specifications that might let us achieve them in the future.
-
The W3C At Twenty-Five
In this article, I explain how the W3C works and shares her “Web Story” to explain why the Web Standards process is so vitally important for everyone to have an open web platform where they can share their stories and build awesome things for the web together.
-
Editorial Design Patterns With CSS Grid and Named Columns
By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids.
-
Smashing Magazine is Thirteen
Smashing Magazine is thirteen years old! In this article, I share the stories of some of our Smashing Team. The people behind the magazine, books, and conferences.
-
Overflow and Data Loss in CSS
In this article, I explore the situations in which you might encounter overflow in your web designs and explains how CSS has evolved to create better ways to manage and design around unknown amounts of content.
-
Pitching Your Writing To Publications
Writing for a publication such as Smashing Magazine can help to build your reputation as an expert. I explain how to pitch to publications, and how to have the best chance of an accepted proposal.
-
Writing Modes And CSS Layout
An understanding of CSS Writing Modes is useful if you want to work with vertical scripts, or change writing mode for creative reasons. However, they also underpin our new layout methods, and those ideas are increasingly being applied across all of CSS.
-
Everything You Need To Know About CSS Margins
Margins in CSS seem simple enough at first glance. Applied to an element it forms a space around the element, pushing other elements away. However, there is more to a margin than you might think.
-
CSS Lists, Markers, And Counters
There is more to styling lists in CSS than you might think. In this article, I start by looking at lists in CSS, and move onto some interesting features defined in the CSS Lists specification — markers and counters.
-
How To Create A PDF From Your Web Application
There is a wide variety of choices when it comes to creating a PDF from a web application. In this article, I take a look at the tools that are available and shares her recommendations to help you find the tool that works best for you.
-
Digging Into The Display Property: Grids All The Way Down
Continuing a series on the display property in CSS, this time Rachel Andrew takes a look at what happens when you use grid as a value of display, with added information about how subgrid changes that behavior.
-
Digging Into The Display Property: Box Generation
Continuing a series on the display property in CSS, this time I take a look at the values which control box generation, for those times when you don’t want to generate a box at all.
-
Looking Back At SmashingConf San Francisco 2019
We had a wonderful time at the sold-out SmashingConf San Francisco! In this article, I round up all of the videos, photos, tweets and resources that were shared on- and offstage.
-
Digging Into The Display Property: The Two Values Of Display
We talk a lot about Flexbox and CSS Grid Layout, but these layout methods are essentially values of the CSS display property, a workhorse of a property that doesn’t get a lot of attention.
-
How To Align Things In CSS
There are a few ways to align elements in CSS. In this article, I explain what they are with some tips to help you remember which to use and why.
-
Designing An Aspect Ratio Unit For CSS
What problems will the new aspect ratio unit solve? A look at the design of a new CSS feature.
-
Breaking Boxes With CSS Fragmentation
What is fragmentation, why might you want to use it, and what is the current state of browser support?
-
A Guide To CSS Support In Browsers
It can be frustrating when you want to use a feature and discover that it is not supported or behaves differently across browsers. In this article, I explain how CSS is evolving to make it easier to deal with them.
-
When And How To Use CSS Multi-Column Layout
The Multi-column Layout spec is often overlooked as we use Grid and Flexbox. In this article I explain why it is different to other layout methods, and shows some useful patterns and sites which showcase it well.
-
How To Learn CSS
You don’t need to commit in memorizing every CSS Property and Value, as there are good places to look them up. There are some fundamental things, however, which will make CSS much easier for you to use. This article aims to guide you along your path of learning CSS.
-
2018: A Smashing Year In Review
The Smashing Team looks back at 2018. Conferences, articles, books and the Smashing Membership — there has been a lot going on.
-
Getting Paid to Speak
A post for people who speak professionally, or hope to do so. How and why should you ask for payment for your work?
-
Taking Care of Yourself on the road
If you speak at one or two conferences a year then this post is probably not for you. However if you speak at more than one a month, you can easily find yourself exhausted, unable to enjoy them or to do a good job with your talk. In order to survive, if speaking is going to be a big part of your life, you need to figure out how to look after yourself on the road.
-
Recommended Books for Public Speakers
There are many books on public speaking available, but which should you spend your Christmas Amazon voucher on? Here are some that I have learned from and would recommend.
-
How to Find Ideas for Your Talks
Sometimes there are things that you are simply burning to talk about, however if you are a frequent speaker, there will be days when you feel all out of ideas. In this post I’ll describe some of the ways I think up ideas for new presentations.
-
How to Deal with Conference Q&A
At some events, having given your talk, the floor will be turned over to the audience for questions. For many speakers this is the hardest part of the talk, and while I’m not really a fan of conference Q&A you can learn to deal with it, and at least not have it a a source of dread!
-
Researching a Property in the CSS Specifications
In this article my aim is to give you the basic details you need to grab quick information about any CSS property detailed in the CSS specs.
-
Will You Be Introduced?
A strong start to your talk is easier if you know how you will be introduced to the audience. Take control over the first time the audience meets you with this tip.
-
Protecting Your Site With Feature policy
Feature Policy can help protect your site from third parties using APIs that have security and privacy implications, and also from your own team adding outdated APIs or poorly optimized images. Find out how.
-
Travel Tips for Public Speakers
For many speakers, speaking means a lot of travel. I possibly travel more than most, being on the road for half of the year. In this article I’m going to round up some of the ways in which I make this amount of travel work reasonably smoothly, most of the time!
-
Create a Talk Toolkit
I am very keen on reducing the number of decisions I have to make when preparing to give a talk. Presenting can be a highly stressful event, and the fewer things that you need to worry about, and potentially forget while under stress, the better. In order to remove the need to worry about what I need for my talk I always bring the same things with me to the stage.
-
Learn From the Questions
The questions that people ask after your talk can be a goldmine to help you improve that presentation and write new ones.
-
Web Design and Development Advent Roundup For 2018
A roundup of Advent Calendar sites of interest to web designers and developers. From accessibility to UX, coding challenges to Perl, there really is something for everyone this December.
-
CSS Frameworks Or CSS Grid?
Have you ever considered whether CSS Grid can actually replace the need for CSS frameworks or third-party component libraries? In doing so, I discovered a range of reasons people use a third-party framework and the positive and negative things about doing so.
-
The CSS Working Group at TPAC: What’s New In CSS?
I attended the CSS Working Group meeting at W3C TPAC, and round up some of the discussions in this post — including those things where you can help make a decision.
-
Use Cases For Flexbox
In this final article of the series, we wrap up by taking a look at some of the common uses for Flexbox. What should we use Flexbox for, and what it is not so good at?
-
Representing Web Developers in the W3C
I write about my involvement with the CSS Working Group, and why I feel it is important that web developers understand what is being worked on in CSS, and have a way to offer feedback.
-
Flexbox: How Big Is That Flexible Box?
In the last two articles, we have looked at what happens when we create a flex container, and also taken a look at alignment. This time we explore the often confusing issue of sizing in Flexbox. How does Flexbox decide how big things should be?
-
Take A New Look At CSS Shapes
In this article, we take a look at CSS Shapes and how to create non-rectangular shapes using images, gradients, and basic shapes. We also discover how the new tools in Firefox make editing shapes easier.
-
Everything You Need To Know About Alignment In Flexbox
In this article, we take a look at the alignment properties in Flexbox while discovering some basic rules to help remember how alignment on both the main and cross axis works.
-
What Happens When You Create A Flexbox Flex Container?
In this article, the beginning of a series on Flexbox, we will take a detailed look at what actually happens when you add display: flex to your stylesheet.
-
Text Editing Tips and Tricks Roundup
We asked the Smashing Community for their favorite tips and tricks when editing text and code. With so many great suggestions, we’ve decided to collect them all into one article so you can add it to your useful bookmarks.
-
Pattern Library First: An Approach For Managing CSS
CSS can be hard to manage across a project, especially when you need to include media queries for various breakpoints and fallbacks for older browsers. In this article, we will take a look at using Fractal to manage components which use CSS Grid.
-
CSS Grid Level 2: Here Comes Subgrid
CSS Grid Level 2 is already in the process of being specified, and the main feature of this level of the spec is to bring us subgrid. In this article, I explain the new features.
-
Getting Started With CSS Layout
Whether you’re fairly new to CSS or an experienced developer from elsewhere in the stack who wants to make sure your understanding of layout today is up to date, this guide covers everything you need to know about CSS Layout today.
-
Google I/O Developer Roundup: What’s New?
I attended the Google I/O 2018 event in Mountain View. Here’s a roundup of the announcements and launches that were presented at the event.
-
Contributing to MDN Web Docs
MDN has been documenting the web platform for over 12 years and is a go-to resource for many. Its strength is the fact that it is a community resource, and anyone can contribute and help to improve it.
-
A Guide To The State Of Print Stylesheets in 2018
We have covered print stylesheets in the past here on Smashing Magazine. In this article, I take a look at the state of printing from the browser today.
-
Working Together
How Designers And Developers Can Communicate To Create Better Projects
-
Best Practices With CSS Grid Layout
The results of a survey about the use of CSS Grid Layout.
-
Understanding Logical Properties and Values
CSS Logical Properties and Values aren’t quite ready to be used yet, however learning about them can help you to understand CSS Layout, and the interaction with Writing Modes.
-
Styling Empty Cells With Generated Content and CSS Grid Layout
Ever wondered how achieve styling of empty grid cells without adding redundant empty elements? Well, CSS Generated Content can help you do just that.
-
Getting Started In Public Speaking: Global Diversity CFP Day
The recent Global Diversity CFP Day aimed to help more people submit their ideas to conferences and get into public speaking.
-
Using Media Queries For Responsive Design in 2018
This article will take a look at the use of media queries for responsive design today, how they work alongside Flexbox and Grid Layout, and also have a look at what is coming in the future.
-
How Big Is That Box? Understanding Sizing in Grid Layout
-
Starting Over
-
Productivity Tips and Tricks
-
Understanding CSS Layout And The Block Formatting Context
-
Testing the Web Platform
-
Using CSS Grid: Supporting Browsers Without Grid
-
Naming Things in CSS Grid Layout
-
CSS Grid Gotchas And Stumbling Blocks
-
The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment
-
Getting Ready For HTTP2: A Guide For Web Designers And Developers
-
Grid, Flexbox, Box Alignment: Our New System for Layout
-
It’s The People They Know
-
Introducing the Grid Layout Spec
-
Offering Feedback
-
HTTPS Everywhere with Nginx, Varnish and Apache
-
14 Pro Tips for launching your own App
-
Creating Process to Free Up Time for Productivity
-
A simple workflow from development to deployment
-
Software Audits for the Tiny Business
-
On Being King of a Shrinking Castle
-
How To Get Started With CSS Shapes
-
Looking Outside
-
Being creative while in pain
-
Controlling the Cache: Using Edge Side Includes in Varnish
-
Designing for print with CSS
-
CSS You Can Get Excited About in 2015
-
Everything Web Designers Need To Know About VATMOSS
-
The Ways We’ve Changed – and Stayed the Same
-
Developing Robust Deployment Procedures
-
Managing Feature Requests
-
Getting to the Action
-
Lessons Learned By Being The Client
-
Pro Tips for Launching a Digital Product
-
Our Enclosed Space
-
Your Side Project as Insurance Policy
-
Speed up your mobile website with Varnish
-
Start Small and Listen
-
Does our industry have a drinking problem?
-
Pricing underpins everything you do
-
How do you go on vacation?
-
The Local Shops of the Web
-
You Can’t Do Everything
-
Giving Content Priority with CSS3 Grid Layout
-
Monday, 3 December
-
Friday, 16 November
-
Thursday, 11 October
-
Tuesday, 11 September
-
Monday, 6 August
-
Friday, 6 July
-
5 June 2012
-
Friday, 11 May
-
Monday, 9 April
-
Monday, 5 March
-
Saturday, 11 February
-
Thursday 5 January
-
A guide to PHP error messages for designers
-
Supporting Your Product: How To Provide Technical Support
-
Cleaner Code with CSS Selectors
-
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
-
Getting Started With E-Commerce: Your Options When Selling Online
-
Faster development with CSS Constants
-
CSS Layout Starting Points