Can’t get your friends together? No problem!

We had a birthday party coming up for my sister-in-law, Abi. We’d booked ourselves in to an awesome looking restaurant right in central London called the Fat Bear.

Gumbo, fried chicken, burgers, waffles, bourbon, oh baby. I was excited for weeks. Not half because I’ve been trying to lose some of that Christmas weight.

Then what happens? That damn Coronavirus pops up and next thing you know we are all socially distancing and the restaurants have been shut down. …


Answers from a pro.

I’ve been working remotely for over 3 years now, you’d be surprised how easy it is. I work for a remote, distributed, software studio with employees dotted around the UK and France. Whilst it took some getting used to at first, I don’t think I would go back to a regular office.

Do I need to get dressed?

Whilst you could come to work in your dressing gown (I’ve done emergency bug fixes naked before), it can help psychologically to put on your normal work clothes. …


The like button is destroying communication on the internet.

30,000 years ago, humans (Homo Sapiens) were sharing the planet with another similar species — Neanderthals. Neanderthals and Homo Sapiens co-existed for 20–40,000 years together, but eventually the Homo Sapiens won out.

One of the reasons we are still here? Communication.

Some scientists believe that Neanderthals were more intelligent than humans at a base level, but had less brain power devoted to social communication and less capable voice boxes. This meant that Homo Sapiens, whilst less capable individually, were able to transmit information between each other more successfully. …


How to judge a digital agency by their contact form.

So you need to pick a digital agency. There’s hundreds of them out there and they all look great. Lovely portfolios, lots of clever sounding words about responsive web design, mobile first, design systems, agile, etc etc…

How do you know who is truly a master of the web and who is faking it?

Every time I find a new agency site, I run a series of experiments on their contact form as a litmus test of their quality.

We’re going to look at 3 agency contact forms and run a series of quick tests that will arm you with…


Well I guess it runs on Javascript so why not?

You’ve probably used some javascript debugging like console.log or even the old classic alert() if you’ve been around long enough.

If you’ve ever had to delve into PHP, you probably used var_dump(), print_r(), or even die().

Well it turns out Sass has some debugging power too!

There’s 3 main directives, @error, @warn and @debug.

@error: "Variable: #{$foo} is invalid or missing.";
@warn: "Color: #{$bar} is pretty awful, why not try #f66";
@debug: "Current value of baz is: #{$baz}";

The @error directive will cause a fatal Sass error and is probably…


CSS Transforms are awesome! They’re especially great for animations. Sometimes your transforms need to get a little more complicated.

So you probably know about being able to transform multiple properties.

.foo {
transform: scale(2) translate(50%, 0);
}

But did you know you can add transform properties multiple times?

.foo {
transform: translate(50%, 0) scale(2) translate(0, 50%);
}

Each of the transforms will be applied in order. Which is quite important because…

Bonus: Transform property orders matter.

Transforms are calculated from right to left.

This:

.foo {
transform: scale(2) translate(50%, 0);
}

Will produce a different result to this:

.foo {
transform: translate(50%, 0) scale(2);
}


DIY is cooler than off the shelf.

Do you install Bootstrap just for the grid? Maybe you use another grid system? Why not have your own? Learn to make a flexible flexbox flex grid.

This tutorial assumes you know a bit about React and Sass. If not, go pick up the basics at one of the many great tutorials.

Why?

Using other peoples grids can be frustrating. They’re never quite right for what you want and then it’s difficult to get at the code to update them.

Rolling your own only takes about 30 minutes and then it’s ready to use anywhere in your project!

We’re going to…


Creating new objects just got a whole lot neater.

So you already try to create new objects rather than mutating current ones because you like your javascript to be functional.

const foo = { id: 1, name: 'Etch' };
const bar = Object.assign({}, foo);
// bar = { id: 1, name: 'Etch' };

Well the object rest spread syntax lets you do this in a little bit of a nicer way.

const bar = { ...foo };

This one is still in the proposal stages so you’ll need to use babel or something similar to make it work.

Arrays

Hey this…


In React, you can only return one JSX element (Edit: Not any more!), so inserting spacers between items is awkward.

I didn’t want to loop through the array and update it so it was lodash to the rescue.

_.flatMap([1,2,3,4], (value, index, array) =>
array.length -1 !== index // check for the last item
? [value, "s"]
: value
);

Produces:

[1, "s", 2, "s", 3, "s", 4]

Which is really neat, concise and declarative!

At Etch we’re always learning so we can continue to build awesome software.

Let’s see if we can help your team today hey@etch.co


Don’t dump people in without context.

We love our linters at Etch, they keep us on track with the latest, up to date, standards automatically.

The other day I was adding autofocus on an input in React:

<input type="text" autoFocus />

I got flagged by jsx-a11y.

If you haven’t heard of it, jsx-a11y is an eslint plugin that lints your React code for accessibility problems, helping to catch them before you get to production.

Autofocus can dump screenreader users into your form with zero context, leaving them lost and confused on your page.

Autofocus can also confuse regular users, especially…

Gavyn McKenzie

UK based front-end architect. I work @etch building the internet, one brick at a time.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store