{"id":7689,"date":"2020-10-17T15:05:25","date_gmt":"2020-10-17T13:05:25","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=7689"},"modified":"2020-10-17T15:05:25","modified_gmt":"2020-10-17T13:05:25","slug":"11-frontend-tricks-that-most-frontend-developers-dont-know-about-by-daniel-anderson-javascript-in-plain-english-oct-2020-medium","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2020\/10\/17\/11-frontend-tricks-that-most-frontend-developers-dont-know-about-by-daniel-anderson-javascript-in-plain-english-oct-2020-medium\/","title":{"rendered":"11 Frontend tricks that most Frontend Developers don\u2019t know about | by Daniel Anderson | JavaScript In Plain English | Oct, 2020 | Medium"},"content":{"rendered":"

Interesting tricks you can do with HTML\/JS\/CSS<\/p><\/blockquote>\n

Source: 11 Frontend tricks that most Frontend Developers don\u2019t know about | by Daniel Anderson | JavaScript In Plain English | Oct, 2020 | Medium<\/a><\/em><\/p>\n

<\/p>\n

\n
\n

11 Frontend tricks that most Frontend Developers don\u2019t know about<\/h1>\n<\/div>\n

Interesting tricks you can do with HTML\/JS\/CSS<\/h2>\n
\n
\n
\n
\n
\n
Below are some tricks which a lot of frontend developers don’t know about. To do with HTML\/CSS\/JavaScript.<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n

Hopefully, there will be at least a couple on the list which you didn’t know about!<\/p>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n

1. Datalist element<\/h2>\n

One HTML element that you don\u2019t see used much at all and for no reason!<\/p>\n

The <datalist><\/code> tag is used to provide an “autocomplete” feature for <input><\/code>elements. You will see a drop-down list of pre-defined options as you type.<\/p>\n

\n
\n
\n
\n
<\/div>\n

\"Image<\/div>\n<\/div>\n<\/div>

<datalist><\/figcaption><\/figure>\n

Example:<\/em><\/p>\n

<input list=\"animals\"<\/strong> name=\"animal\" id=\"animal\"><\/span><datalist id=\"animals\"<\/strong>>\n    <option value=\"Cat\">\n    <option value=\"Dog\">\n    <option value=\"Chicken\">\n    <option value=\"Cow\">\n    <option value=\"Pig\">\n  <\/datalist><\/span><\/pre>\n
The <datalist><\/code> list attribute (see bold items above) must be equal to the id of the <input><\/code> , this is what binds them together.<\/p>\n<\/div>\n<\/div>\n<\/section>\n
<\/div>\n
\n
\n
\n
2. Clickable label with a checkbox<\/h2>\n
If you want a clickable label for checkbox, you would usually use have a label<\/code> element with a \u201cfor\u201d attribute, like below.<\/p>\n
<input type=\"checkbox\" name=\"checkbox\" id=\"checkbox_id\" value=\"value\">\n<label for=\"checkbox_id\">I agree<\/label><\/span><\/pre>\n
You can actually just put the label<\/code> element around the checkbox to accomplish the same thing. So when you click \u201cI agree\u201d it will select the checkbox!<\/p>\n
Example:<\/em><\/p>\n
<label><input type=\"checkbox\" name=\"checkbox\" id=\"checkbox_id\" value=\"value\">I agree<\/label><\/span><\/pre>\n<\/div>\n<\/div>\n<\/section>\n
<\/div>\n
\n
\n
\n
3. Child selectors<\/h2>\n
Probably more of the most well used on this list but most people don\u2019t know the extent of their power.<\/p>\n
Child Selectors are used to match all the elements which are a child of a specified element. It gives the relation between two elements.<\/p>\n
Examples:<\/em><\/p>\n
 \/* 1st <li> element *\/\n li:first-child { \n    color: red;\n }<\/span>\/* Last <li> element *\/\n li:last-child { \n     color: green;\n }<\/span>\/\/ Select All <li> elements but The First Three *\/\nli:nth-child(n+4) {     \n      color: yellow;    \n}<\/span>\/* Select only the first 3 <li> elemets *\/\nli:nth-child(-n+3) {     \n    color: green;    \n}<\/span>\/* Styles are elements that are not a <p> *\/\n.my-class:not(p) { \n    display: none;\n}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/section>\n
<\/div>\n
\n
\n
\n
4. Writing mode<\/h2>\n
Writing mode is little known yet quite powerful CSS property.<\/p>\n
This allows text to run vertically like this:<\/p>\n
\n
\n
\n
\n
<\/div>\n
\"Image<\/div>\n<\/div>\n<\/div>
Vertical text<\/figcaption><\/figure>\n
The code for accomplishing this very simple.<\/p>\n
writing-mode: vertical-rl;<\/span><\/pre>\n
Full example:<\/em><\/p>\n
<style>\n.sideway { \n   writing-mode: vertical-rl;\n}\n.normal {\n   width: 5%;\n   float: left;\n}\n<\/style>\n<p class=\"normal\">\n     Hi some paragraph text\n<\/p>\n<p class=\"sideway\"> \n     Hey I'm some sidway text \n<\/p><\/span><\/pre>\n
The writing-mode<\/code> property has five possible options.<\/p>\n
  writing-mode: horizontal-tb;\n  writing-mode: vertical-rl;\n  writing-mode: vertical-lr;\n  writing-mode: sideways-rl;\n  writing-mode: sideways-lr;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/section>\n
<\/div>\n
\n
\n
\n
5. calc() function<\/h2>\n
The calc()<\/code> CSS function lets you perform calculations when specifying CSS property values.<\/p>\n
The most useful ability of calc()<\/code> 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.<\/p>\n
Examples:<\/em><\/p>\n
width: calc(5px + 100px);\nwidth: calc(6em * 8);\nwidth: calc(100% - 50px);<\/span><\/pre>\n<\/div>\n<\/div>\n<\/section>\n
<\/div>\n
\n
\n
\n
6. Math.round & Math.floor alternatives<\/h2>\n
Maybe not the easiest to read but still a cool trick.<\/p>\n
Math.floor()<\/code> you can use 0|<\/code>:<\/p>\n
0|<\/strong>743.4343 \/\/ returns 743\nMath.floor(743.4343) \/\/ returns 743<\/span><\/pre>\n
Math.round()<\/code> you can use +.5|0<\/code> :<\/p>\n
812.777+.5|0<\/strong> \/\/ returns 813\nMath.round(812.777) \/\/ returns 813<\/span><\/pre>\n<\/div>\n<\/div>\n<\/section>\n
<\/div>\n
\n
\n
\n
7. Console.table<\/h2>\n
Hopefully, by now you have heard and used console.log()<\/code> but one you may not is console.table()<\/code> which takes in an array or an object. This displays a table in the console view in a very neat way!<\/p>\n
Array Example:<\/em><\/p>\n
let car1 = { name : \"Audi\", model : \"A4\" }\nlet car2 = { name : \"Volvo\", model : \"XC90\" }\nlet car3 = { name : \"Ford\", model : \"Fusion\" }<\/span>console.table([car1, car2, car3]);<\/span><\/pre>\n
\n
\n
\n
\n
\n
\"Image<\/div>\n
\"Image<\/div>\n<\/div>\n<\/div>\n<\/div>
console.table()<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/section>\n
<\/div>\n
\n
\n
\n
8. Console.time<\/h2>\n
Another useful console method. console.time()<\/code> starts a timer. It takes a parameter as a label. Then you use console.timeEnd()<\/code> with the same label name and the console will output the time in milliseconds from when you called console.time()<\/code> and console.timeEnd()<\/code><\/p>\n
\n
\n
\n
\n
\n
\"Image<\/div>\n
\"Image<\/div>\n<\/div>\n<\/div>\n<\/div>
console.time()<\/figcaption><\/figure>\n
Example:<\/em><\/p>\n
\/\/ Starts the timer\nconsole.time(\"MyTimer\");<\/span>\/\/ Ends the timer and outputs the time in milliseconds\nconsole.timeEnd(\"MyTimer\");<\/span><\/pre>\n<\/div>\n<\/div>\n<\/section>\n
<\/div>\n
\n
\n
\n
9. In operator<\/h2>\n
The \u201cin\u201d operator can check if an index exists in an array and will return true or false.<\/p>\n
Example:<\/em><\/p>\n
let cars = ['Audi', 'BMW', 'Mini', 'Bentley', 'Porsche'];<\/span>0 in cars        \/\/ returns true\n3 in cars        \/\/ returns true\n6 in cars        \/\/ returns false<\/span><\/pre>\n
You can also check if a property exists in an object.<\/p>\n
Example:<\/em><\/p>\n
const person = { firstName : \"Dave\", surname: \"Smith\", age: 34 };<\/span>'firstName' in person  \/\/ returns true\n'surname' in person    \/\/ returns true\n'age' in person        \/\/ returns true\n'gendar' in person     \/\/ returns false<\/span><\/pre>\n<\/div>\n<\/div>\n<\/section>\n
<\/div>\n
\n
\n
\n
10. Make Chrome a text editor<\/strong><\/h2>\n
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<\/p>\n
data:text\/html, <html contenteditable><\/span><\/pre>\n<\/div>\n<\/div>\n<\/section>\n
<\/div>\n
\n
\n
\n
11. Multiple statements in if block without curly brackets<\/h2>\n
I wouldn\u2019t use this actual production code but still one a lot of people don\u2019t know about. The trick is the comma!<\/p>\n
if (1 === 1)\n alert(\"Alert 1\"), alert(\"Alert 2\");<\/span><\/pre>\n<\/div>\n<\/div>\n<\/section>\n
<\/div>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Interesting tricks you can do with HTML\/JS\/CSS Source: 11 Frontend tricks that most Frontend Developers don\u2019t know about | by Daniel Anderson | JavaScript In Plain English | Oct, 2020 | Medium<\/p>\n
Read more →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[50],"tags":[],"class_list":["post-7689","post","type-post","status-publish","format-standard","hentry","category-javascript"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6daft-201","jetpack-related-posts":[{"id":9590,"url":"https:\/\/monodes.com\/predaelli\/2022\/09\/12\/mastering-these-7-basics-css-skills-will-make-you-a-frontend-wizard-%f0%9f%a7%99%e2%9c%a8\/","url_meta":{"origin":7689,"position":0},"title":"Mastering these 7 Basics CSS Skills will make you a Frontend Wizard \ud83e\uddd9\u2728","author":"Paolo Redaelli","date":"2022-09-12","format":false,"excerpt":"Sometimes I wish they won't use proprietary platoforms such as Medium. Neverthelesse its daily mail is interesting, like today's Mastering these 7 Basics CSS Skills will make you a Frontend Wizard \ud83e\uddd9\u2728 \u00a0","rel":"","context":"In "Themes"","block_context":{"text":"Themes","link":"https:\/\/monodes.com\/predaelli\/category\/themes\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9664,"url":"https:\/\/monodes.com\/predaelli\/2022\/09\/27\/15-weird-googling-tricks-99-9-of-developers-dont-know-about-javascript-in-plain-english\/","url_meta":{"origin":7689,"position":1},"title":"15 Weird Googling Tricks 99.9% of Developers Don’t Know\u00a0About | JavaScript in Plain English","author":"Paolo Redaelli","date":"2022-09-27","format":false,"excerpt":"15 Weird Googling Tricks 99.9% of Developers Don't Know\u00a0About | JavaScript in Plain English Well, I know most of them.","rel":"","context":"In "Tricks"","block_context":{"text":"Tricks","link":"https:\/\/monodes.com\/predaelli\/category\/documentations\/tricks\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":893,"url":"https:\/\/monodes.com\/predaelli\/2016\/01\/15\/wordpress-front-end-editor-plugins\/","url_meta":{"origin":7689,"position":2},"title":"WordPress Front End Editor Plugins","author":"Paolo Redaelli","date":"2016-01-15","format":false,"excerpt":"5 Best WordPress Front End Editor Plugins to consider - 85ideas.com WordPress Front End Editor is changing how we manage the front-end posts\/pages. Check out new developments in front-end editors(both free and paid). WP Front End Editor WP Quick FrontEnd Editor","rel":"","context":"In "Wordpress"","block_context":{"text":"Wordpress","link":"https:\/\/monodes.com\/predaelli\/category\/wordpress\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5369,"url":"https:\/\/monodes.com\/predaelli\/2019\/03\/19\/8-useful-css-tricks-parallax-images-sticky-footers-and-more\/","url_meta":{"origin":7689,"position":3},"title":"8 useful CSS tricks: Parallax images, sticky footers and more","author":"Paolo Redaelli","date":"2019-03-19","format":"link","excerpt":"8 useful CSS tricks: Parallax images, sticky footers and more This article shares some of my most satisfying \u201cah-hah!\u201d moments learning CSS, and I hope it can prompt some \u201cah-hah!\u201d moments for you too. Sticky Footer Zoom-on-Hover Images Instant Night Mode Custom Bullet Points Parallax Images Animation with Cropped Images\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":8400,"url":"https:\/\/monodes.com\/predaelli\/2021\/05\/04\/5-awesome-css-tricks\/","url_meta":{"origin":7689,"position":4},"title":"5 Awesome CSS tricks","author":"Paolo Redaelli","date":"2021-05-04","format":false,"excerpt":"Do awesome things in fewer code lines with CSS Source: 5 Awesome CSS tricks every developer should know | by FAM | Apr, 2021 | Level Up Coding Smooth scrolling: html { scroll-behavior: smooth; } Resize images to fit img { max-width:100%; height:auto; } #3: Setting an image as cursor\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":8592,"url":"https:\/\/monodes.com\/predaelli\/2021\/08\/04\/why-you-should-stop-using-ui-frameworks-by-beau-beauchamp-nerd-for-tech-medium\/","url_meta":{"origin":7689,"position":5},"title":"Why You Should Stop Using UI Frameworks | by Beau Beauchamp | Nerd For Tech | Medium","author":"Paolo Redaelli","date":"2021-08-04","format":"link","excerpt":"I\u2019ve been a web application developer for over 20 years. I\u2019ve seen all kinds of UI libraries come and I\u2019ve seen them go. I\u2019ve been in the\u2026 Source: Why You Should Stop Using UI Frameworks | by Beau Beauchamp | Nerd For Tech | Medium I once interviewed with a\u2026","rel":"","context":"In "Javascript"","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/7689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/comments?post=7689"}],"version-history":[{"count":0,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/7689\/revisions"}],"wp:attachment":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/media?parent=7689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/categories?post=7689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/tags?post=7689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}