DEV Community

Cover image for 8 Nice tricks Front-end Developers
Dev Write Ups
Dev Write Ups

Posted on • Edited on

8 Nice tricks Front-end Developers

You can get the amazing Daily.dev Extension to be updated daily with amazing Development news

This post comes with some of the unique and secrets(🀐) tricks developer don't know. Some tricks will help you in your career and will make you productive, take you to next level in development.


Datalist Tag

You can create an "autocomplete" feature for <input> elements by using the <datalist> tag. With this feature you will create a drop-down list of pre-defined options as you type.

<input list="cars" name="car" id="car">
<datalist id="cars">
     <option value="BMW">   
     <option value="Mustang">    
     <option value="Sienna">      
     <option value="Avalon">   
     <option value="Fortuner">   
</datalist>
Enter fullscreen mode Exit fullscreen mode

111.png

CSS calc() function

This function allows you to perform calculations when specifying CSS property values. The most useful ability of calc() is that it mixed units, like percentages and pixels.

width: calc(5px + 100px)
width: calc(6em * 8)
width: calc(100% - 5px)
Enter fullscreen mode Exit fullscreen mode

in operator

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

let cars = ['tesla', 'bentley', 'mustang', 'fortuner', 'Audi', 'BMW']; 

0 in cars // returns true
2 in cars // returns true
9 in cars // returns false
Enter fullscreen mode Exit fullscreen mode

console.table()

This tools allows you to display a table in a console view in a very neat way by taking in an array object.

let actor = {name: 'Leonardo Di Caprio', movie: "Titanic"}
let actor2 = {name: "Shah Rukh Khan", movie: "DDLJ"}
let actor3 = {name: "Robert Downey JR", movie: "Iron Man 2"}

console.table([actor, actor2, actor3]); 
Enter fullscreen mode Exit fullscreen mode

233.png

Writing mode

This trick allows text to run vertically. This property has five possible options.

<p class="nlt">Subscribe to DevWriteUps</p>

<style>
 .nlt {
   writing-mode: vertical-rl;
 }
</style>
Enter fullscreen mode Exit fullscreen mode

rtl.png

Legals or TnC

You can add legal docs, citations, terms and conditions or other prints in the bottom of your page with <small> tag.

<p>
  <small>* Please read Terms and Conditions</small>
</p>
Enter fullscreen mode Exit fullscreen mode

Math equations

Embeddings numerical problems, utilizing the MathML language is really basic in HTML5. You can put all your equations between the <math> tags.

<math>
            <mrow>
                <mrow>
                    <msup>
                        <mi>a</mi>
                        <mn>2</mn>
                    </msup>
                    <mo>+</mo>
                    <msup>
                        <mi>b</mi>
                        <mn>2</mn>
                    </msup>
                </mrow>
                <mo>=</mo>
                <msup>
                    <mi>c</mi>
                    <mn>2</mn>
                </msup>
            </mrow>
</math>
Enter fullscreen mode Exit fullscreen mode

s2.png

Direct children

Utilizing > to choose the immediate offspring of a component.

#footer > a
Enter fullscreen mode Exit fullscreen mode

This will choose and style the entirety of the dynamic connection components that are quickly under the Footer ID. It will not choose anything past the dynamic component, or whatever else contained in the footer, similar to plain content. This works extraordinary with high level route components, as well.


Thank you For Reading🀩 Subscribe to our newsletter , we send it occasionally with amazing news, resources and many thing.

Top comments (37)

Collapse
 
damienpirsy profile image
Matteo Vignoli • Edited

Most of these are basic knowledge - "direct children" it's CSS 101, "small" is basic html, the "in operator" is pretty common, CSS calc() has been around for years...I credit you for the "math" tag and the never seen in the wild "datalist", but the post is quite disappointing, considering its title.... Why Frontend developers shouldn't know something that's pretty Frontend to me?

Collapse
 
spiropoulos94 profile image
NikosSp

No post is disappointing unless it promised you to make you a full stack developer just by reading it. I agree that most of them were pretty 'front end things' but lets just appreciate the effort.

Have a good day!

Collapse
 
damienpirsy profile image
Matteo Vignoli

False. "Unique tricks developers don't know" creates high expectations: I'm hoping to read something I don't find in every beginner tutorial out there, something my years of experience never showed me; I'm surely not expecting how to use a basic CSS rule. If you don't know something, that doesn't mean no one knows. Stop with the forced relativism, the statement "everyone is right" is false.

Thread Thread
 
devwriteups profile image
Dev Write Ups

Respected sir, Everything you know doesn't means everything everyone knows. We're highly sorry if you didn't like the content. We'll try to research more about this.

Thread Thread
 
damienpirsy profile image
Matteo Vignoli

You don't seem to understand my point: the problem is NOT the content, it's the click-bait title; i you wrote "Nice tricks for Frontend Developers" it would have been a ok piece, with this title it's just upsetting.
Anwyay, have a nice day.

Thread Thread
 
appurist profile image
Paul / Appurist

I agree with Matteo, the title is only click-bait because most developers know it is probably false and then click it to confirm their suspicion. Just a small change to the title would have been much better, such as "8 Unique tricks some experienced Front-end Developers still don't know". Then we click to find out how many we do know. I knew and have used 6 of the 8: small and math were new to me. So I appreciate the article and the chance to review all 8, but the title is getting the reader off to a poor start.

Thread Thread
 
afif profile image
Temani Afif

The whole internet use "click-bait" titles πŸ˜‰ and it works ... almost 600 reactions for 8 secrets everyone knows and the real secrets are lost in the very bottom of the list and you probably need 2 days scrolling to find them.

Collapse
 
destinykidd profile image
destinykidd • Edited

Post your own oga, I.T.K

Collapse
 
bl1133 profile image
Bryan Lee

I didn't know about console table shrug

Collapse
 
kalashin1 profile image
Kinanee Samson

Math? Like really???

Collapse
 
devwriteups profile image
Dev Write Ups

Yeaas🀩

Collapse
 
kyr profile image
Kyrylo Fedorov
Thread Thread
 
devwriteups profile image
Dev Write Ups

Uh man. Browser🀐

Thread Thread
 
ishofix profile image
Ishmael Kargbo

Woo.

Collapse
 
daviddomingoslalom profile image
David Domingo

So, the in operator returns true if the specified property is in the specified object or its prototype chain.

reference

I wouldn't recommend using it. But thank you for the datalist tag and the math tag! I had no idea those existed.

Collapse
 
sebring profile image
J. G. Sebring

if the specified property is in the specified object or its prototype chain

That makes it more handy than simply array length indeed - could be handy I guess, not sure I'll use it either. However I'm looking forward to start using optional chaining as it get more support, like let myCar = car?.make

Collapse
 
aminnairi profile image
Amin • Edited

Awesome I didn't know about the math one, very cool!

Collapse
 
dannyengelman profile image
Danny Engelman

Supported in Safari and Firefox... so if those are your userbase... happy days

Collapse
 
devwriteups profile image
Dev Write Ups

Thanks Man.

Collapse
 
baptistefkt profile image
Baptiste Firket

Nice. But you made a mistake in the console.table example, you wrote console.log instead.

Collapse
 
devwriteups profile image
Dev Write Ups

Yea. Forgot to make changes

Collapse
 
beernutz profile image
beernutz • Edited

While you are making changes, you should probably close your < small > tag example correctly, given that this is for front-end developers. Oh, and make a note that the < math > tag is VERY poorly supported.

Collapse
 
shaijut profile image
Shaiju T

in operator is cool , Thanks.

Collapse
 
omril321 profile image
Omri Lavi

That's really cool, thanks! I didn't know the datalist tag .

(Psst, I think you have a typo: there's a missing > on </small, in the Legals or TnC section πŸ˜„ )

Collapse
 
santhosjery profile image
Santhosh N

Awesome!!!
Thanks for sharing.

Collapse
 
devwriteups profile image
Dev Write Ups

Glad you liked it😍

Collapse
 
sheikhrashed profile image
Sheikh Rashed

Math was new for me, thnx

Collapse
 
jay52_tx profile image
Jay πŸ™ˆπŸ™‰πŸ™ŠπŸ‹οΈ

Thanks for the post!!! Every effort is appreciated... not everyone knows about the "little things."