An introduction to CSS Grid

I recently ran a class at work to introduce some of my colleagues to CSS Grid. Here's what we covered....

Respond Conf 2017

Sketches
Last week I had the pleasure of attending Respond Conference, the responsive web design branch of Web Directions. It was my first conference attendance in Sydney since moving here. It was great fun. Are you sad you missed it? Then worry not because I’m sharing some of my notes...

​Part 2: Creating my first HTTP server in Node.js

I recently wrote about my first dive into Node.js. Here's part two where I managed to get the server to read and return the correct file includes....

Creating my first HTTP server in Node.js

Until now, my job as a front-end developer has been writing HTML, CSS and JS... I'm referring to the kind of JavaScript which might add behaviour to a site—client-side JavaScript. That's what I considered a front-end developer to do. But for a while things have been changing....

Kicking off Design Week

Design Week One
​My second week at Atlassian is Design Week. Design Week is an annual event where designers, writers, researchers and prototypers at Atlassian—approx 150 in total from across the globe—get together in Sydney for a week to share their team's progress and learn from each other...

My Clearleft journey

Just over two years ago, I joined Clearleft as a Junior Developer and last week I left to begin a new chapter...

Part 3: We might not need quantity queries thanks to Flexbox

I've learnt that we don't need quantity queries to create a balanced grid. Quantity queries are very powerful, but so is Flexbox. If we just want all the items in the last row to fill the space, regardless of how many there are, then Flexbox can take care of this...

Quantity queries and Flexbox part 2

A while ago, after reading Heydon Pickering's article on quantity queries, I had a go at it myself. I wrote a post on how we can use quantity queries in CSS to alter the width of items in a grid depending on their position in the grid. Since writing that post I've realised that I didn't use Flexbox or nth-child to their full potential. The CSS can be written more efficiently....

@supports will change your life

Here's an exciting feature in CSS, which may be about to change your life.​...

Magic randomisation with nth-child and Cicada Principle

The combination of nth-child and cicada principle is a clever technique used for faking the randomisation of patterns. ...

Inline SVG spriting and currentColor

A very common use for SVGs are icon systems. When building these I've always gone by a general rule: Add decorative images as background images in CSS and add meaningful images in HTML with appropriate alternative text. This time however, I needed to make an icon system with the flexibility of being in many different colours. So I turned to the currentColor variable in CSS....

A workshop for codebar students: Build a portfolio or blog site

Banner
On Saturday, I ran a workshop for codebar students who would like to build their own portfolio or blog website. It was my first time organising and running a workshop, so it was challenging, but I loved every minute. I also learnt a lot from it....

My talk writing process (so far)

I'm still pretty new to public speaking and therefore talk writing, so I'm still figuring out the best techniques. I've only written a couple of talks so far, so I have a long way to go, but the process I've followed feels like a good starting point....

My talk at Dot York: Learn and Teach

At Dot York, I talked about my learning journey; why I joined Clearleft and what it's been like since. It was just a ten minute talk, which felt long enough because I gave an open and honest account of my journey so far...

Improving diversity

The technology industry isn't just for white men. Opportunities for senior positions aren't just for white men. We've learnt the hard way that a team of men alone won't design the best products for women and a team of women alone won't design the best products for men...

A grid-shaped Flexbox hole

I love Flexbox. All the sites I've worked on for the last year have little Flexbox enhancements scattered over them. I was feeling quite pleased with myself for a while, until I went too far. I fell down a grid-shaped Flexbox hole....

Pattern thinking

I love collaborating with organisations to build their first pattern libraries. It's great to see clients so excited by them, but sometimes it's only half way towards solving the problem....

A reusable Javascript toggle pattern

This is a toggle pattern that can be reused multiple times on a page with options to customise parts of it. It is a very common pattern, so I've been keen to get it documented for future use....

From Pages to Patterns: An Exercise for Everyone

Language defines the life of components. A “blue button” will work until the button is no longer blue—and then the name won’t make sense anymore. The pattern will have no reason to exist if blue buttons have fallen out of use...

Teaching the order of margins in CSS

At codebar this week, I was paired with a graphic designer who was just starting her HTML & CSS learning journey. I really enjoyed working with her because she wanted to understand everything, and because of this, I found a nice way to explain the order of margins in CSS....