DEV Community

loading...
Cover image for 8 Nice tricks Front-end Developers

8 Nice tricks Front-end Developers

Dev Write Ups
Group of Devs providing free resources to the beginners
・Updated on ・2 min read

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.

Discussion (40)

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 Author

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
tboss09 profile image
Akosile Oluwatayo Samuel

Vawlence not allowed here πŸ˜‚ πŸ‡³πŸ‡¬

Collapse
bl1133 profile image
BL1133

I didn't know about console table shrug

Collapse
kalashin1 profile image
Kinanee Samson

Math? Like really???

Collapse
devwriteups profile image
Dev Write Ups Author

Yeaas🀩

Collapse
kyr profile image
Thread Thread
devwriteups profile image
Dev Write Ups Author

Uh man. Browser🀐

Thread Thread
ishofix profile image
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
Collapse
baptistefkt profile image
Baptiste Firket

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

Collapse
hseritt profile image
Harlin Seritt

I thought it was just for the Dev Tools console but nah, I can do it in an Ubuntu terminal! That's pretty f****** cool. I like that :-)

image

Collapse
devwriteups profile image
Dev Write Ups Author

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 Author

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."

Collapse
urielbitton profile image
Uriel Bitton

lol I knew every single one of those besides for the console.table().
But you don't seem to be using it, your code shows console.log()

Collapse
freeollo profile image
freeollo

I am not a Front-end Developer, but 6 out of 8 I knew :) Anyway, thank you for 2

Collapse
devwriteups profile image
Dev Write Ups Author

Thank you🀩

Collapse
scrabble96 profile image
Scrabble96 • Edited

Just a typo, but your </small> end tag is missing the >

Collapse
nhoclove9x profile image
Pham Ngoc

Awesome, very cool!

Collapse
skarjan42 profile image
Arjan

Neat

Collapse
mmoutih profile image
marouane moutih

I didn't know about datalist, thanks.

Collapse
jlouzado profile image
Joel Louzado

Clickbaity

Collapse
thommorais profile image
Thom Morais

Math thing is really new to me

Forem Open with the Forem app