TILs Winter 2019/2020 - a little bit of everything

Published: · Reading time: 2 min

The Winter is over, and it’s been quite busy for me, nonetheless, I did manage to learn a few things and I’d like to share them with you.

  1. JavaScript’s document.activeElement property
  2. CSS motion path
  3. Disabled attribute on a fieldset element
  4. Copy object from console

1. JavaScript’s document.activeElement property

This method returns the Element within the DOM that currently has focus. Quite handy when working with forms.

document.activeElement // returns DOM element with focus or <body> if no active focus

Supported in all major browsers. Find more on document.activeElement property.

2. CSS motion path

A cool feature that:

allows authors to animate any graphical object along a custom path

Now you can create more complex and intricate animations with offset-path. The example below I’ve made inspired by CSS IRL.

See the Pen CSS Motion path loader by Nikita Hlopov (@nikitahl) on CodePen.

However, this functionality is not supported by Edge, IE, and Safari. Find out more on CSS Motion Path.

3. Disabled attribute on a fieldset element

I knew that disabled attribute can be set on separate form elements like <input>, but it turns out that it can be used on <fieldset> element as well.

Add the "disabled" attribute on a <fieldset> element to disable inputs & buttons inside – all at once. Very handy to disable groups of fields in a form.

Find more on the disabled attribute.

4. Copy object from console

I actually came across this one on stackoverflow by searching how to copy an object from the console.

This method will copy an object from console to clipboard, that you, later on, can paste to an editor or linter.

const obj = {
  title: "Developer",
  age: 42
}

// inside console type
copy(obj)

Useful when you need to retrieve large objects that come from a request’s response.

Like this article? Share it on:
Tags: