Have you ever faced the situation where the layout of your beautifully crafted interface “breaks” if the image (depeding on the quality of your user’s connections) takes some time to load? Something like the example below:

This happens because the browser has no clue about the dimensions of the image you want to display on your content beforehand.

The easiest way to solve this issue is using the aspect-ratio property to tell the browser how much space (based on the user’s size display) it should reserve before the image is loaded. Check the difference:

img {
/* Makes all images responsive */
  width: 100%;
  height: auto;

/*
  Here, I'm using the image's width and height,
  but you can come up with diference aspect ratios.
*/
  aspect-ratio: 760 / 235;
}

So, it solves the sudden layout change, but we can do even better do better adding an animated background.

Displaying an animated background

You can give a hint for the user that the blank space on your app should be filled with something by adding a background color or animating the transition between two o more colors, like in the example below:

And our code will look like this:

:root {
  /*
  Set the default aspect ratio. You can change
  this CSS variable per class/id or event
  creating diferente classes.
  */
  --aspect-ratio: 16/9;
}

img {
/* Makes all images responsive */
  width: 100%;
  height: auto;
}

/* Put all your images inside this container */
.image-container {  
  aspect-ratio: var(--aspect-ratio);
  position: relative;
  animation: background-loading .8s linear infinite alternate;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
}

/* The placeholder animation */
@keyframes background-loading {
  0% {
    background-color: #f9fafb;
  }
  100% {
    background-color: #d1d5db;
  }
}

And this is the result (check the code on CodePen):

Yet, this can be even better by displaying a colorful background that matches the image colors.

Displaying colorful image placeholders

BlurHash is a compact representation of a placeholder for a image. You use it to process your image before sending it to the browser and you’ll get a string of 20-30 characters that the algorithm can turn into a blurred image that you can show to your user before the actual image is downloaded. Check how it looks like:

I have implemented that last effect in React for the sake of simplicity and time, but you can re-implement it in whatever framework you like. Just pay attention to the onLoad event that changes the opacity of the image.

Most of the work needed to create custom HTML elements that fit the design system of your company resides styling and adding your own props. So, let’s say you have to create a custom Button, that should receive a children prop and should have DOM access via ref. That’s how you can do it:

import { forwardRef } from 'react';

type ButtonProps = {
  loading?: boolean; // custom prop
} & React.PropsWithChildren<React.ComponentPropsWithRef<'button'>>;

const Button: React.FC<ButtonProps> = forwardRef(
  ({ loading, children, ...props }, ref) => {
    return (
      <button data-loading={loading} {...props} ref={ref}>
        {children}
      </button>
    );
  }
);

export default Button;

We use the PropsWithChildren generic interface that gives the children prop and receive React.ComponentPropsWithRef<'button'>, that passes all props that a button can receive.

Of course, you can change the interface ComponentPropsWithRef for ComponentPropsWithoutRef and drop the forwardRef function on the definition of your component (although, I do not recomend it - refs may be useful later on your application):

type ButtonProps = {
  loading?: boolean; // custom prop
} & React.PropsWithChildren<React.ComponentPropsWithoutRef<'button'>>;

const Button: React.FC<ButtonProps> = ({ loading, children, ...props }) => {
  return (
    <button data-loading={loading} {...props} ref={ref}>
      {children}
    </button>
  );
};

export default Button;

You may, even, drop the interface PropsWithChildren, but on doing that, you’d have to implement the children prop by yourself:

type ButtonProps = {
  loading?: boolean; // custom prop
  children?: React.ReactNode;
} & React.ComponentPropsWithoutRef<'button'>;

const Button: React.FC<ButtonProps> = ({ loading, children, ...props }) => {
  return (
    <button data-loading={loading} {...props} ref={ref}>
      {children}
    </button>
  );
};

export default Button;

Want more? Check the live implementation on StackBlitz

Have you ever needed to create an EditorConfig to your programming projects but can never remember all the options you can use? Worry no more: just type npx create-editorconfig -y in your terminal and have one generated for you. Those are the default options:

# editorconfig.org
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true

If you want to customize the settings or even add more for a different set of files (by defining a glob pattern), just ommit the -y argument in the terminal and answer the prompted questions.

What is EditorConfig?

EditorConfig is a configuration file (the .editorconfig) that defines the coding styles that a given code editor (such as VS Code) should apply in the files. You can even set a different set of rules for the files of your project according to your their extension or directory, by using a glob pattern.

My code editor is not applying the EditorConfig settings

To apply your .editorconfig rules, your code editor should have a plugin or have EditorConfig rule parsing implemented natively (if you are using VS Code, you must install this extension.

How can I contribute to create-editorconfig?

Please, go to the official GitHub repository and open an issue.

YouTube videos (along with all modern video implementations on the web) uses the HTML5 video element. This new media tag implements the HTMLMediaElement API, which gives a plenty of media-related methods common to audio and video.

The standard YouTube player just allow us to increase video speed up to 2x, but, if you want to increase it even more? Well, there’s a solution for that: just set the playback rate to whatever number you want!

In order to do that, you need to select the <video> element in the page and change its playback rate to the desired speed:

document.getElementsByTagName('video')[0].playbackRate = 2.5;

It’s a good solution, but not a practical one. Gracefully, there’s a better way to make use of this functionality without having to open the console of your browser.

JavaScript bookmarklet

If you want to have this script always at hand, the best way is to put it inside a JavaScript bookmarklet. Just create a new bookmark in you favorite browser and add the code below:

javascript:(function() {
  const rate = prompt('Set the new playback rate', 2.5);
  if (rate != null) {
    const video = document.getElementsByTagName('video')[0];
    video.playbackRate = parseFloat(rate);
  }
})();

And here is an screenshot of the bookmarklet working:

Feel free to contribute with this code in my public gist.