Engineering at BuzzFeed
My team at BuzzFeed (Web Infrastucture) has spent the last few months working on reducing the impact of layout shifts on each of our websites. This was not a straightforward task, given our reliance on third party embeddable content and ads, but it has been very fruitful: we've gone from a score of 20 to 79, signficantly improved the quantity of SEO referrals, and put in place a system that will…
Last year, my wife and I took our honeymoon in Madagascar. It was an incredible trip that I would recommend to anyone. The views, the wildlife and most of all the people, made it an unforgettable experience. Before we went, there was a lot of uncertainty about how it would be though. We heard the roads were terrible, the flights were unpredictable and that we had to be accompanied by a driver? How…
Rebuilding my personal site is always going to be very low on my list of priorities: at the time of doing it this site was running on a version of Jekyll 3 major versions behind latest. I also had no problem with Jekyll, it just worked! Which in my world is ideal. However, getting a new computer meant installing all the relevant ruby dependencies and I hit a wall that I couldn't get past. Rather…
It’s not often that we open up enough Tech roles in London to merit a blog post but now that we are I want to share them as broadly as I can! This post is my attempt to go beyond the Job Description and explain why I’m personally excited about each of these opportunities. I genuinely believe each of them present a great career and growth opportunity. We’re a team of nine in the UK: an Architect, 4…
Known by many names (Architecture Proposals, RFCs, Design Documents, Architecture Review docs, Architecture Design Records...), these all have the same objective: to present your thoughts to a wider audience, to solicit feedback, and to persuade decision makers. I’ve come to realise that their success depends heavily on how they are delivered, regardless of how good the proposal is. The reality is…
Worth a Watch is a site of mine that tells me which NBA games are worth watching from the night before: a vital service for any europe-based basketball fan! I threw it together a couple of years ago when learning to use AWS lambda and the code was so hacky it was only ever going to be understandable to me. It was built using: A static site hosted on S3 A lambda function responsible for returning…
Recently I read Radical Candor by Kim Scott . It discusses how we can communicate more directly and effectively and it’s something BuzzFeed have integrated into our culture. I find myself looking for more opportunities to give direct feedback to my colleagues, both positive and negative, where previously I would have shied away. Kim defines radical candor as: Radical Candor™ is the ability to…
I found a nice pattern today for getting rid of those global configuration variables that you're pretty sure aren't used anymore but you're a bit too scared to delete. You know the ones, they look like this: /* DO NOT CHANGE! WILL BREAK SOMETHING SOMEWHERE. TRUST ME. THX. */ window.GLOBAL_CONFIG = { env: 'dev', ... } They're the cockroaches of large sites: they outlast developers, framework…
Destructuring and rest/spread parameters for Arrays is part of the es6 specification. Support for their use with Objects is, at the time of writing, a stage 2 proposal for future inclusion . You can also use it today via a transpiler like Babel. Object Shorthand is already part of the es6 specification and with a combination of these three features you can start to use some patterns which can lead…
When I walk up the steps from Brixton tube station to street level I drop my headphones. The sound of steel drums rains down on me and wide grin is guaranteed to grow across my face. Few things are more certain. Sometimes, if you time it right, the sun shines down the street opposite, past the David Bowie mural and directly down into the station: a blinding gold exit flickering with dreadlocked…
I hear the same story all the time and the issue confuses me as much as it does others. I feel like I’m the person guiltiest of this crime, yet a lot of people I talk to will beg to differ. “Why can I hit deadlines imposed by others, but not those imposed by myself?” I’ve tried and failed at so many projects in life be they vertical leap training (we’ve all failed Air Alert 2 right?) and gym…
Originally it was non-jQuery, right? Or did it come before that? Anyway the term definitely got popular when people were eschewing jQuery in the quest for lighter pages at the expense of a few browser bugs. Zero dependency libraries became a thing, which meant each library had their own tiny abstraction of DOM selection utilities and polyfills for Array methods. None of which could be extracted…
The Ultra Trail du Mont Blanc offers five different races over a memorable week in August. This year I decided to do the OCC: the shortest of the five (a measly 54k and 10,000ft of ascent) and the only one that you can do without any qualifying points. It begins in Orsières in Switzerland and finishes in Chamonix Town, nestled at the foot of Mt. Blanc. It was the first Ultra I had attempted and an…
Part 1 of this 2 part series on the UTMB OCC can be found here and covers my preparation for the race. Race Day I got out of bed at 3.30am, an hour and a half before my bus was set to leave Chamonix for Orsières. I had laid out all my kit the night before and all I had to now was obsessively triple-check I had everything on my list and collect any provisions I wanted to take to the start line. I…
One of the most common resistances to getting into running is the idea that it’s boring. It's fine for a while, but after thirty minutes I'd rather be anywhere else. I was exactly the same. When it feels like you're just fighting the terrain with each step, when you're not improving or working towards something, or your heart just isn't in it, it really can be boring. Having pushed past that…
A lot of people who want to get in to Triathlons are put off by the swimming stage. Understandably. Certainly in the UK we're not a nation of swimmers and the memory of school swim lessons hardly evoke pangs of nostalgia. I had the exact same trepidation before signing up to my first Tri in 2014. Don't let the fear put you off getting started: it can transform from a bore and a trial to one of…
There isn’t much you can’t buy in Ciudad del Este . Three borders meet above one of nature’s most powerful spectacles, Iguazu Falls , itself cutting a crescent through the two most affluent countries in the region. Left out of the party, Paraguay seems to have forged an identity antithetical to its neighbours and whilst it fell short on wealth it far exceeded them on edge and intrigue, at least in…
Flow, a state of total immersion in a task , was researched by Mihaly Csikszentmihaly (pronounced - "six-cent-mihaly"), and first presented in his 1990 paper: Flow: The Psychology of Optimal Experience . He describes flow as: A state of concentration or complete absorption with the activity at hand and the situation. [...] The flow state is an optimal state of intrinsic motivation, where the…
You know them. You hear them around your office, often locked away in meeting rooms but occasionally let loose to roam around behind your backs: eager to be heard and expert at unleashing their unknowing but paralytic tension. HIPPOs - The Highest Paid Person's Opinion . You know them. You were hired to represent your user and for what you can bring to the product. You were hired because other…
Components allow us to build simpler applications by composing independent parts into a greater system. Good component design means you should only need to focus on one component at a time, holding less information in your active mind in order to complete a task. This gives you more mental capacity to focus on the task at hand and ultimately make better decisions. The future standard of…
I've heard recently that a few different companies have created a version of Rizzo to build on the work we have done at Lonely Planet. It's extremely flattering to hear about our ideas helping other organisations. It also makes me a little nervous because if someone were to copy Rizzo as it exists now they would inherit some of the decisions which ultimately we would change in hindsight (and plan…
Inspired by Mark Otto 's post Github's CSS I thought I would quickly jot down how Lonely Planet's CSS is structured. I thought it was interesting to read some of the parallels and it's good to share how we work. Quick Facts We write in Sass (Indented syntax). We have more than 150 source files. The compiled CSS is split into two stylesheets to allow for stronger caching across apps. The average…
Anyone who has attempted to maintain a UI Style Guide over a long period of time will attest that it is a very difficult process. They are generally prioritised below the maintenance of your applications themselves and as such are likely the first candidates to fall behind and the last to be brought out of tech debt. This is bad because once your Style Guide falls out of sync with your…
We use a lot of icons on lonelyplanet.com and recently went through the task of transferring them from an icon font to SVG files. I wanted to share why we did this along with some of the drawbacks to SVG and how we got around them. 1. Separation of concerns We use a custom font on lonelyplanet.com and we used to bundle the icons into the same file, storing the glyphs within the Private Unicode…
If you need to create a comparison of two other videos you can do so easily with ffmpeg. Recently I needed to compare two WebPagetest videos but couldn't find the original test results. Fortunately I had the videos stored locally so I just needed a way to recreate their video comparison feature offline. You could almost certainly place them side by side using a video editor but it can also be done…
I chose to speak @frontendlondon on this subject but, given the small audience, I wanted to create a guide that would work online in isolation from the talk. As such I created this interactive overview exposing some of the core concepts that we associate with Front End Ops. This guide doesn't cover topics such as Grunt, Bower or Yeoman, instead it approaches the subject at a broader level. Hitting…
his blog corresponds to my May 2013 talk @frontendlondon . The slides for that talk can be found on slideshare . The story behind FOUT CSS is justified critical due to the flash of unstyled content which would ensue if we deferred it. This is the main reason why web fonts are deemed critical to web pages: to avoid the flash of unstyled text which is then later repainted. When font-face landed we…
Recently we've been nurturing the document outlines at Lonely Planet to create a simpler snapshot of the page for both accessibility and SEO reasons. One thing I was surprised about is how the nav element creates a new section in the document outline. Sectioning content requires a heading or it will appear in the document outline as "untitled". bostonglobe.com smashingmagazine.com How often do you…
The reason Why would you want to serve two javascript files rather than concatenating them? If you want to leverage better caching of assets which are rarely updated. At Lonely Planet our files are broken up into: core.js - Common libs and abstractions(eg. jquery), header and footer code, analytics application.js - The code responsible for everything between the header and footer Core.js is likely…
Our acceptance of competent 3rd party code and adoption of tools seems to have been the biggest shift in Front End Development over the past 12 months. The plague, and fear, of jQuery plugins have been replaced by the adoption of libraries like requireJS , backbone and underscore . The take-up of pre-processors like Sass , Less and Coffeescript have been staggering (and wrought by confusion and…
Edit 28 September 2014 Whilst the performance results of this post still stand true, I wouldn't advise using this technique. It became unmanageable for use on lonelyplanet.com and we have almost completely phased out the use of placeholders in favour of explicit classes in the dom. I’ve been re-examining how we declare and manage CSS objects at LP, recently using the placeholder syntax (%) in Sass…
The smoke hung to the ceiling, the smokiness of the whisky clung to the back of our throats. The comfort of the walls liberated our expression. We were conspiring, and madness dared to precede us. Conspiring on change, deliberating on decision, gathering our thoughts for the future of the web: as we could each see it. Tongues flew fast on the back of ideas and tangents. We bounced from process to…
Use the app View the source code Last Saturday, in a canyon of a hangover, I decided to ditch my client work and just make something fun . I'd encourage others to do the same. Maybe not in favour of client work but do try and make some time just to play around, experiment and recapture that feeling of why you first got enraptured by the web. It's fun to just mess about with code like no one is…
I'm hungover, on crutches and my girlfriend is at work. I have loads of client work to deal with and by rights that is what today should involve but instead I'm going to do something different, something I rarely do. I'm going to make something FUN . For no other reason. I'm just going to take a few hours out and see what comes up at the far end. Maybe it's something I should do more often,…
Did you know there's a cheat sheet you can build into Terminal? It's one that allows you to run complex git commands and change directories by hitting a couple of keys. The best part is they're keys that you define for yourself. If you're a designer/front end developer who is wary and resistant to the growing impetus of the command line then you're in luck. By defining rules around my most common…
I'm constantly impressed by businesses who are switched on to the growing impact social media is having on our day to day decisions. Before we commit to anything, be it buying a watch or choosing a restaurant, there is a high chance that we have used the internet to qualify it to ourselves. Right now, that may be Google but in the future every restaurant, boutique shop, airline and fish and chip…
In our ever changing industry we have at least one truth: there are no experts. Sure, in our midst are industry leaders, consultants, even the odd guru, but it must be remembered that no one has all the answers. For every good link, there are ten bad ones. For every insightful tweet there are a hundred misleading ones (not to mention a million mentioning iPads). And in the time between…