{"id":6544,"date":"2020-10-26T20:44:48","date_gmt":"2020-10-27T01:44:48","guid":{"rendered":"http:\/\/www.glajumedia.com\/en\/?p=6544"},"modified":"2022-03-22T21:55:45","modified_gmt":"2022-03-22T21:55:45","slug":"front-end-tricks-for-developers","status":"publish","type":"post","link":"https:\/\/www.gmedia.la\/en\/front-end-tricks-for-developers\/","title":{"rendered":"Front-end tricks for developers"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Have you ever ask yourself about the best practices for your front-end? What can you do without any damage to the website\u2019s performance? Front-end development involves more than writing clean code.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here are some front-end tricks that developers must know for HTML, CSS, and JavaScript.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">HTML TRICKS<\/span><\/h2>\n<ul>\n<li>\n<h3><span style=\"font-weight: 400;\">Datalist element<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Usually, this element is not used that much for no reason. The <code>&lt;datalist&gt;<\/code>tag provides an \u201cautocomplete\u201d feature for <code>&lt;input&gt;<\/code> elements. As a result, you will see a drop-down list with your pre-defined options.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Example:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6547\" src=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-26-at-7.40.46-PM.png\" alt=\"\" width=\"481\" height=\"152\" srcset=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-26-at-7.40.46-PM.png 481w, https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-26-at-7.40.46-PM-480x151.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 481px, 100vw\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Above, the <code>&lt;datalist&gt;<\/code> id attribute in bold must be the same as the list attribute of the <code>&lt;input&gt;<\/code>.\u00a0<\/span><\/p>\n<ul>\n<li>\n<h3><span style=\"font-weight: 400;\">Indentation<\/span><\/h3>\n<\/li>\n<\/ul>\n<p>It uses as a visual representation of the nested elements. Your most recent open and close tags are placed to ensure your code operations. Also, you can even add a blank line to separate large code blocks.\u00a0All of these bring up an organized view, as you can see in the image below.<\/p>\n<p><span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6548\" src=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-26-at-7.44.08-PM.png\" alt=\"\" width=\"469\" height=\"267\" \/>\u00a0<\/span><\/p>\n<ul>\n<li>\n<h3><span style=\"font-weight: 400;\">Class and ID Names<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">By using these names, you can get practical and relevant HTML practice since this class of attribute uses to define a specific element style. Indeed, class attributes reuse between multiple elements, which allow them to carry identical modifiers.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Besides, an ID tag handles a specific variable and sometimes use alongside a class attribute. Since IDs assign to one specific element, they never are reused.\u00a0<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">CSS TRICKS<\/span><\/h2>\n<ul>\n<li>\n<h3><span style=\"font-weight: 400;\">Writing mode<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">It is known as a powerful CSS property because it allows you to put the text vertically; for example:\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6549\" src=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-26-at-7.46.31-PM.png\" alt=\"\" width=\"496\" height=\"231\" srcset=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-26-at-7.46.31-PM.png 496w, https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-26-at-7.46.31-PM-480x224.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 496px, 100vw\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Also, the write-mode property has other possibilities:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6550\" src=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-26-at-7.46.40-PM.png\" alt=\"\" width=\"489\" height=\"89\" srcset=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-26-at-7.46.40-PM.png 489w, https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-26-at-7.46.40-PM-480x87.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 489px, 100vw\" \/><\/p>\n<ul>\n<li>\n<h3><span style=\"font-weight: 400;\">Inline Style<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">\u00a0<\/span> <span style=\"font-weight: 400;\">CSS is written in a different CSS file with the .css file extension. Indeed, inline style is a CSS sheet include on an HTML document. This practice must be avoided when you are writing HTML and CSS code.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Web developers should use inline styles in the following cases:<\/span><\/p>\n<ul style=\"list-style-type: circle;\">\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">HTML Email<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Content Management System Content (WordPress, Drupal, etc.)\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Dynamic Content<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Older Websites<\/span><\/li>\n<\/ul>\n<ul>\n<li>\n<h3><span style=\"font-weight: 400;\">CSS Reset<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">As you know, each browser has its style by default. A CSS Reset is a practice that resets all the styling from the ground up. In fact, <a href=\"http:\/\/html5doctor.com\/html-5-reset-stylesheet\/\" target=\"_blank\" rel=\"noopener\">CSS Reset<\/a> is a set of rules that reset the styling of HTML elements to a baseline. It will allow every single browser to have all its styles reset to null.\u00a0<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">JAVASCRIPT TRICKS<\/span><\/h2>\n<ul>\n<li>\n<h3><span style=\"font-weight: 400;\">Name variables<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">You always use variables names that make sense. For instance, by grabbing an ID element from the HTML file, you have to store in a variable.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Developers use a writing practice called camelCase. It involves writing each word or abbreviation in the middle of phrases without any spaces or punctuation.\u00a0<\/span><\/p>\n<ul>\n<li>\n<h3><span style=\"font-weight: 400;\">Private Instance Fields<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Usually, they appear next to a #, for example:<\/span><\/p>\n<p><code><span style=\"font-weight: 400;\">#onePrivateInstanceField = 20;<\/span><\/code><\/p>\n<p><span style=\"font-weight: 400;\">These <a href=\"https:\/\/medium.com\/@coman.alexandru.2006\/6-frontend-javascript-tricks-you-should-know-for-2020-2c7cb2fc8a66\" target=\"_blank\" rel=\"noopener\">fields enforce<\/a> a class encapsulation. With this process, you can use private instance fields to encapsulate and hide your information. It will make it inaccessible outside its scope.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6551\" src=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-26-at-7.50.09-PM.png\" alt=\"\" width=\"455\" height=\"202\" \/><\/p>\n<ul>\n<li>\n<h3><span style=\"font-weight: 400;\">Indications<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">You should always use indications for functions, objects, and conditions to make it easier to read from the other parts of the code.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">CONCLUSION<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The list from above might not be the most practical but not use enough in the front-end development. Indeed, it can help you to improve your front-end skills. Above all, developers at<\/span><a href=\"http:\/\/www.glajumedia.com\/en\/\" target=\"_blank\" rel=\"noopener\"> <span style=\"font-weight: 400;\">Glajumedia<\/span><\/a><span style=\"font-weight: 400;\"> can give you that peace of mind by expanding your front-end tricks.\u00a0 <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever ask yourself about the best practices for your front-end? What can you do without any damage to the website\u2019s performance?<\/p>\n","protected":false},"author":1,"featured_media":6554,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[38],"tags":[160,162,163,161],"class_list":["post-6544","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-category-web-design","tag-front-end","tag-front-end-developers","tag-front-end-developers-peru","tag-front-end-tricks"],"_links":{"self":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts\/6544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/comments?post=6544"}],"version-history":[{"count":0,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts\/6544\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/media\/6554"}],"wp:attachment":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/media?parent=6544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/categories?post=6544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/tags?post=6544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}