11 Frontend tricks that most Frontend Developers don’t know about

Interesting tricks you can do with HTML/JS/CSS

Daniel Anderson
Oct 14 · 5 min read
Frontend tricks. HTML/CSS/JavaScript
Frontend tricks. HTML/CSS/JavaScript
Photo by FLOUFFY on Unsplash

Below are some tricks which a lot of frontend developers don't know about. To do with HTML/CSS/JavaScript.

Hopefully, there will be at least a couple on the list which you didn't know about!

One HTML element that you don’t see used much at all and for no reason!

The <datalist> tag is used to provide an "autocomplete" feature for <input>elements. You will see a drop-down list of pre-defined options as you type.

Image for post
Image for post
<datalist>

Example:

<input list="animals" name="animal" id="animal"><datalist id="animals">
<option value="Cat">
<option value="Dog">
<option value="Chicken">
<option value="Cow">
<option value="Pig">
</datalist>

The <datalist> id attribute (see bold items above) must be equal to the list attribute of the<input> , this is what binds them together.

If you want a clickable label for checkbox, you would usually use have a label element with a “for” attribute, like below.

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">I agree</label>

You can actually just put the label element around the checkbox to accomplish the same thing. So when you click “I agree” it will select the checkbox!

Example:

<label><input type="checkbox" name="checkbox" id="checkbox_id" value="value">I agree</label>

Probably more of the most well used on this list but most people don’t know the extent of their power.

Child Selectors are used to match all the elements which are a child of a specified element. It gives the relation between two elements.

Examples:

 /* 1st <li> element */
li:first-child {
color: red;
}
/* Last <li> element */
li:last-child {
color: green;
}
// Select All <li> elements but The First Three */
li:nth-child(n+4) {
color: yellow;
}
/* Select only the first 3 <li> elemets */
li:nth-child(-n+3) {
color: green;
}
/* Styles are elements that are not a <p> */
.my-class:not(p) {
display: none;
}

Writing mode is little known yet quite powerful CSS property.

This allows text to run vertically like this:

Image for post
Image for post
Vertical text

The code for accomplishing this very simple.

writing-mode: vertical-rl;

Full example:

<style>
.sideway {
writing-mode: vertical-rl;
}
.normal {
width: 5%;
float: left;
}
</style>
<p class="normal">
Hi some paragraph text
</p>
<p class="sideway">
Hey I'm some sidway text
</p>

The writing-mode property has five possible options.

  writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;

The calc() CSS function lets you perform calculations when specifying CSS property values.

The most useful ability of calc() is its ability to mix units, like percentages and pixels. No Preprocessor will ever be able to do that. It is something that has to happen at render time.

Examples:

width: calc(5px + 100px);
width: calc(6em * 8);
width: calc(100% - 50px);

Maybe not the easiest to read but still a cool trick.

Math.floor() you can use 0|:

0|743.4343 // returns 743
Math.floor(743.4343) // returns 743

Math.round() you can use +.5|0 :

812.777+.5|0 // returns 813
Math.round(812.777) // returns 813

Hopefully, by now you have heard and used console.log() but one you may not is console.table() which takes in an array or an object. This displays a table in the console view in a very neat way!

Array Example:

let car1 = { name : "Audi", model : "A4" }
let car2 = { name : "Volvo", model : "XC90" }
let car3 = { name : "Ford", model : "Fusion" }
console.table([car1, car2, car3]);
Image for post
Image for post
console.table()

Another useful console method. console.time() starts a timer. It takes a parameter as a label. Then you use console.timeEnd() with the same label name and the console will output the time in milliseconds from when you called console.time() and console.timeEnd()

Image for post
Image for post
console.time()

Example:

// Starts the timer
console.time("MyTimer");
// Ends the timer and outputs the time in milliseconds
console.timeEnd("MyTimer");

The “in” operator can check if an index exists in an array and will return true or false.

Example:

let cars = ['Audi', 'BMW', 'Mini', 'Bentley', 'Porsche'];0 in cars        // returns true
3 in cars // returns true
6 in cars // returns false

You can also check if a property exists in an object.

Example:

const person = { firstName : "Dave", surname: "Smith", age: 34 };'firstName' in person  // returns true
'surname' in person // returns true
'age' in person // returns true
'gendar' in person // returns false

Maybe a very random one on the list. If you enter the below in URL bar and hit the return key. It will turn Chrome into a notepad

data:text/html, <html contenteditable>

I wouldn’t use this actual production code but still one a lot of people don’t know about. The trick is the comma!

if (1 === 1)
alert("Alert 1"), alert("Alert 2");

Conclusion

All of the above in the list might not be the most practical but some of them are definitely not used enough in frontend development and can really help you expand your frontend skills. I’m sure there are a lot more tricks!

Hope you’ve enjoyed reading!

Did you like reading this? If so, get more similar content by subscribing to Decoded, our YouTube channel!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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