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

A simple HTML5 Progress bar

HTML and CSS for a simple progress bar with a fallback...

JavaScript week #2: YDKJS notes

We have started a book club in the dev team at Clearleft and our first read is You Don't Know JS: Up & Going, the first of five books in a series by Kyle Simpson. ...

JavaScript week #1: Randomly pick content from an array

Here's how to randomly pick content from an array of items in JavaScript. ...

What a year! What next?

Codebar Midde St
2015 has been a big year: lots of changes, challenges, scary moments and exciting moments, but most importantly it's been fun and I've learnt loads...