Introducing Design Systems Ops: Who bridges the gap between the design systems and the engineering team? I call these enablers: “Design Systems Ops”.
Mindful documentation for (web) components and frameworks: Many individuals and teams fail at documenting their projects properly, effectively drawing other developers away from their code. Fortunately, the most common documentation pitfalls are quite simple to overcome. In this article, I’m going through techniques that have helped make our projects more approachable to new developers whilst also appealing to power users, eventually bringing more people into using them.
Read more
We’ve made it.: responsivenews:
We’ve finally crossed the line. After almost 4 years, 5000 pull requests from 50 contributors, we’ve migrated the BBC News site to a totally new stack. We now have a single code base for all devices, in 30 different languages thanks to RWD. How can it possibly take 4 years? Let’s start…
I had the pleasure of speaking at re:develop alongside amazing professionals: Liz Keogh (who gave one of my favourite talks of this year), Paul Adam Davis from Ghost, Tom Byers from GDS, Phil Bennet, Ben Howdle, Ross Tuck (who delivered his talk brilliantly), and Patrick Hamann from the Guardian too.
We had a surprise guest: Richard Evans from WDS, who spoke about how he developed the AI architecture for the game Versu, based on of developing multi-agent simulations. His work and career are truly humbling, it was a great change to see him speak.
If re:develop happens again next year, it’s a no-brainer: get tickets!
Read more
Media Queries Level 4 are super exciting. In combination with Custom Properties (aka CSS Variables), they can help respond to the user’s environment in a very elegant way.
Let’s say we want to boost the contrast when the environment is bright to make text more readable.On the other hand, when reading the content at night (or in a dark alley, as I am sure you often do), we want a dark background, easier on the eyes. Here’s what it could look like in code, using light-level Media Queries:
:root { --body-copy: #555; --body-background: #eee;
}
body { color: var(--body-copy); background-color: var(--body-background);
}
@media (light-level: dim) { /* Night time… light text on dark background */ :root { --body-copy: #eee; --body-background: #333; }
}
@media (light-level: washed) { /* Boost contrast in bright environment */ :root { --body-copy: #000; --body-background: #fff; }
}
And here is what it would look like in browser depending on the light level:
I think you can already accomplish this effect with JavaScript in some browsers, but isn’t that more elegant when done with CSS?
Read more
In his presentation at O’Reilly Fluent Conference, Dan Tocchini goes through the weaknesses of current CSS tools for layout and then explains how GSS, Grid Style Sheets solves complex layout problems.“GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout.
Very promising!
Read more
DHH wrote a very interesting post about his view on Responsive Web Design. He says:
By going with dedicated templates, we don’t have to include needless data or navigation that’s going to be hidden by the responsive rules. We have less variables to think about on the individual page. It’s just a simpler workflow where it’s easier to make changes without considering a smather of side effects.
So the next time you’re marveling at a responsive design that’s able to make the best use of a 27” iMac at full screen and a fit neatly on a 3.5” iPhone as well, you might want to ask yourself why you’re trying to make one performer do so many tricks.
I totally agree with his view. Being responsive should be secondary to being fast, maintainable, and beautiful.At the Guardian, Responsive Web Design has been sold as such a golden principle that we would not even try to serve different templates depending on what type of device our readers are visiting us.I wish we could try RESS or Responsive Delivery instead of building very complex responsive templates that become more and more fragile and slow down mobile performance.As I wrote a few weeks ago: RWD is not the answer, it is only part of it.
Read more
Improving Sass code quality on theguardian.com: You won’t believe how the Guardian front-end developers managed to reduce their time reviewing code with this old simple trick…
Friday evening was Sassy at the Grand Connaught Rooms!Friday, Sass won an award at the Net Awards, a ceremony that rewards the best technologies and individuals in the industry for their achievements. It doesn’t really mean anything, but what a great party!
Although I think this type of competitive event is a bit wanky in our industry, let’s celebrate, and then take a step back to see why Sass won this award…
Why is Sass a game changer?
Large companies now openly use CSS pre-processors. In 2013 the discussion fully shifted from “Should I use a CSS pre-processors?” to “What CSS pre-processor should I use?”. Sass’ maturity, support, robustness and power have made such tools acceptable for teams that want a truly reliable front-end stack.
What people don’t necessarily know, it’s that Chris and Nathan (the two current core developers of Sass) are included in discussions about new features with the CSS Working Group directly. What this means is that Sass can be a ground for experimentation, and if something is portable to CSS, it might get standardised by the W3C.
CSS Custom Properties (aka CSS variables) are being implemented by browser vendors as we speak. I hope we can see selector nesting and mixins standardised at some point.
Sass 3.3 was recently released. With all the great features bundled in this new version, I think it’ll be an even bigger game changer in 2014.
Thanks to the community who voted for Sass! And most of all, a massive thank you to Hampton, Nathan and Chris. Guys, this award is yours!
I wore a tie to collect the award. That’s how far I’d go for Sass.
Read more
On April 24th, I spoke at Front-End London about how we bridge the communication gap between developers and designers at the Guardian.
Here are a few resources I mention during the talk:
theguardian.com on GitHub Sass-mq: a @media query abstraction in Sass Guss: Guardian Style Sheets
A massive thank you to the organisers, Made by Many, for welcoming me at this event where I got to meet a lot of passionate developers.
Read more
Guest
