Need to Connect to a Local MySQL Server? Use Unix Domain Socket!

The folks at Percona have benchmarked TCP/IP vs. Unix Connections to a local MySQL server.

When connecting to a local MySQL instance, you have two commonly used methods: use TCP/IP protocol to connect to local address – localhost or 127.0.0.1 – or use Unix Domain Socket.

If you have a choice (if your application supports both methods), use Unix Domain Socket as this is both more secure and more efficient.

Not that the exact numbers really matter, but the message should be clear: Use a Unix Domain Socket to connect, if you have the chance.

Need to Connect to a Local MySQL Server? Use Unix Domain Socket! →

Use Tailwind classes within any CSS-in-JS library with Twin

To use Tailwind – or any prebuilt CSS library/framework for that matter – in a React app you can simply import its generated CSS file and use the classes it exposes:

import '../tailwind.generated.css';

// …

const Alert = ({ title = '', message }) => (
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
        {title && <strong class="font-bold">{title}</strong>}
        <span class="block sm:inline">{message}</span>
        <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
            <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <title>Close</title>
                <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
            </svg>
        </span>
    </div>
);

But what if you want to combine Tailwind with 💅 styled-components or 👩‍🎤 emotion? This is where Twin comes in handy:

import React from 'react'
import tw from 'twin.macro'
import styled from '@emotion/styled/macro'
import { css } from '@emotion/core'

const Input = styled.input`
  ${tw`border`}
  ${({ hasHover }) => hasHover && tw`hover:border-black`}
  color: white;
`
export default () => <Input hasHover />

tw will extract the styles from the classes so that the CSS-in-JS Library can use it.

twin.macro →

💡 To work with CSS Class Names in React you can use the classnames package or an implementation on top of it such as classnames-components. I personally prefer one of these methods as these packages allow me to still write my CSS in CSS … #separationofconcerns #embracetheplatform

React Performance Optimization with React.memo()

I know I’ve posted a similar article before but this is a pitfall I commonly see and therefore it can’t be repeated enough.

React internally already optimizes the performance quite a bit without having to explicitly optimize for performance. React.memo can help you to optimize the number of renders of your React components even further.

In this article I will explain to you how you can optimize React performance by using React.memo, some common pitfalls you could encounter and why you shouldn’t always use React.memo.

React Performance Optimization with React.memo() →

🔗 Related: React: When to use useMemo and useCallback

Rebuilding our tech stack for the new Facebook.com

The Facebook Engineering Team on how they’ve built the new Facebook.com – a version which I’ve been able to try for nearly two months by now.

Throughout the process, we anchored our work around two technical mantras:

  1. As little as possible, as early as possible. We should deliver only the resources we need, and we should strive to have them arrive right before we need them.
  2. Engineering experience in service of user experience. The end goal of our development is all about the people using our website. As we think about the UX challenges on our site, we can adapt the experience to guide engineers to do the right thing by default.

We applied these same principles to improve four main elements of the site: CSS, JavaScript, data, and navigation.

Rebuilding our tech stack for the new Facebook.com →

🤔 A bit weird they named the CSS section “Rethinking CSS to unlock new capabilities” though, as they’re basically using CSS as it is meant to be used: use em for font-sizes so that users can zoom, use CSS Custom Properties for theming / dark mode, etc. #embracetheplatform

Stop Using Objects as Hash Maps in JavaScript

Photo by Steve Johnson on Unsplash

A map is one of the most frequently used data structures in daily programming. It keeps key-value pairs that can easily be accessed by their keys.

In JavaScript, it is quite convenient to just use a plain object for that purpose. But there is a built-in data structure in JavaScript that was made for exactly that purpose: Map.

// Don't
const plainObjMap = {};
plainObjMap['someKey1'] = 1;
plainObjMap['someKey2'] = 2;
plainObjMap['someKey3'] = 3;

// Do
const map = new Map();
map.set('someKey1', 1);
map.set('someKey2', 2);
map.set('someKey3', 3);

Note that this isn’t a case against using a map but against “using an Object as a map”, as using the Map type comes with a few advantages such as guaranteed key order and being more performant.

Stop Using Objects as Hash Maps in JavaScript →
MDN: Map: Objects vs. Maps

Second-guessing the modern web

An article that’s been making rounds on Twitter today is Second-guessing the modern web:

There is a sweet spot of React: in moderately interactive interfaces. Complex forms that require immediate feedback, UIs that need to move around and react instantly. That’s where it excels.

But there’s a lot on either side of that sweet spot.

The low performance parts don’t need to be React. Listing pages, static pages, blogs – these things are increasingly built in React, but the benefits they accrue are extremely narrow. A lot of the optimizations that are cropping up in these corners, things like bundle splitting, server-side rendering, and prerendering, are triangulating, essentially, what we had before the rise of React.

If you’re swinging the React hammer, everything looks like a <Nail />. A smart developer knows when to use it, and when not to use it.

But what if you didn’t have to choose? As Dan Abramov from the React team tweeted (be sure to read the whole thread):

This proposed approach goes beyond Zeit’s Vercel’s Next.js file based routing and hits more close to Inertia.js.

Second-guessing the modern web →

How are Docker Layers bundled into Docker Images?

It’s impossible to work with docker containers without docker images. In this post I want to talk about what makes docker images possible: the overlay filesystems.

Interesting to know how things work behind the scenes.

How are docker images built? A look into the Linux overlay file-systems and the OCI specification →

Alternative text for CSS generated content

Great find by Stefan Judis:

Today I learned that the content property supports a way to define alternative text for generated content.

You can specify the alternative content after a /:

.new::before {
 content: url(./img/star.png) / "New!";
}

Here’s how that works with screen readers:

.new-item::before {
  /* "black star" and element content is read out */
  content: "★";

  /* "Highlighted item" and element content is read out */
  content: "★" / "Highlighted item";

  /* Generated content is ignored and only element content is read out */
  content: "★" / "";
}

Doesn’t work in Safari nor Firefox at the time of writing though.

The CSS “content” property accepts alternative text →

Deno in 100 seconds

Deno is a brand new JavaScript runtime, similar to Node.js. Use it to develop secure server-side apps with built-in TypeScript support, ES modules, and promise-based APIs.

📝 If you’re looking for a more extensive write-up on Deno, check Deno 1.0: What you need to know