You can get the amazing 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>
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)
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
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]);
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>
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>
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>
Direct children
Utilizing > to choose the immediate offspring of a component.
#footer > a
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)
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?
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!
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.
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.
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.
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.
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.
Post your own oga, I.T.K
I didn't know about console table shrug
Math? Like really???
Yeaasπ€©
Actually: No.
developer.mozilla.org/en-US/docs/W...
Uh man. Browserπ€
Woo.
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.
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
Awesome I didn't know about the math one, very cool!
Supported in Safari and Firefox... so if those are your userbase... happy days
Thanks Man.
Nice. But you made a mistake in the console.table example, you wrote console.log instead.
Yea. Forgot to make changes
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.
in operator
is cool , Thanks.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 theLegals or TnC
section π )Awesome!!!
Thanks for sharing.
Glad you liked itπ
Math was new for me, thnx
Thanks for the post!!! Every effort is appreciated... not everyone knows about the "little things."