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;
}
4. Writing mode
Writing mode is little known yet quite powerful CSS property.
This allows text to run vertically like this:
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.
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.
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]);
console.table()
8. Console.time
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()
console.time()
Example:
// Starts the timer
console.time("MyTimer");// Ends the timer and outputs the time in milliseconds
console.timeEnd("MyTimer");
9. In operator
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
10. Make Chrome a text editor
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>
11. Multiple statements in if block without curly brackets
I wouldn’t use this actual production code but still one a lot of people don’t know about. The trick is the comma!
This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish.AcceptRead More
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.