Hello codebar Sydney!

We’re excited to say that our first workshop will be held at Campaign Monitor on Tuesday 5th September at 6:30pm...

Rebuilding the Leading Design grid

Last year when I worked at Clearleft, I built the website for Leading Design Conference. CSS Grid would have been the perfect approach for this, so I've recently rebuilt it in codepen...

CSS Color Module Level 4

I recently wrote about CSS variables, which is a feature that we have previously only had available to us in preprocessors. Preprocessors have also given us color functions, allowing us to manipulate colours...

Mentoring for the junior mentor

Mentoring is an incredibly generous gift. I was lucky enough to be involved in a fantastic and successful mentoring partnership in my last job, which was invaluable. Now I'm looking for a mentor in Sydney, I've been thinking about this a lot...

What you might not know about CSS variables

CSS variables or "Custom Properties" (as per their correct name) allow you to use variables directly in CSS, with no compiling...

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...

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....