All Posts

Front-end tricks for developers


Oct 26, 2020

Share this post:

Have you ever ask yourself about the best practices for your front-end? What can you do without any damage to the website’s performance? Front-end development involves more than writing clean code. 

Here are some front-end tricks that developers must know for HTML, CSS, and JavaScript.


  • Datalist element

Usually, this element is not used that much for no reason. The <datalist>tag provides an “autocomplete” feature for <input> elements. As a result, you will see a drop-down list with your pre-defined options.


Above, the <datalist> id attribute in bold must be the same as the list attribute of the <input>

  • Indentation

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. All of these bring up an organized view, as you can see in the image below.


  • Class and ID Names

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. 

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. 


  • Writing mode

It is known as a powerful CSS property because it allows you to put the text vertically; for example: 

Also, the write-mode property has other possibilities:

  • Inline Style

  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. 

Web developers should use inline styles in the following cases:

  • HTML Email
  • Content Management System Content (WordPress, Drupal, etc.) 
  • Dynamic Content
  • Older Websites
  • CSS Reset

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, CSS Reset 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. 


  • Name variables

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. 

Developers use a writing practice called camelCase. It involves writing each word or abbreviation in the middle of phrases without any spaces or punctuation. 

  • Private Instance Fields

Usually, they appear next to a #, for example:

#onePrivateInstanceField = 20;

These fields enforce 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.

  • Indications

You should always use indications for functions, objects, and conditions to make it easier to read from the other parts of the code.


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 Glajumedia can give you that peace of mind by expanding your front-end tricks. 

Enjoy this post?

Join Our newsletter

    Keep reading

    UI/UX in the Real World: Successes in Physical Products

    UI/UX in the Real World: Successes in Physical Products

    Discover how User Interface (UI) and User Experience (UX) transform physical products. Examples like the Tesla Model S and Apple iPhone show how great UI and UX can revolutionize customer satisfaction and efficiency in everyday products. Invest in excellence and make a difference!

    Magento: Boosting your eCommerce Success

    Magento: Boosting your eCommerce Success

    Magento is a leading eCommerce platform thanks to its versatility, advanced features, and focus on SEO. It allows for complete customization and effortless scalability, ideal for businesses of all sizes. Magento is the perfect choice for lasting success. Boost your online business with Magento!

    Top 8 WooCommerce Themes for an Online Store

    Top 8 WooCommerce Themes for an Online Store

    Explore our selection of the 8 best WooCommerce themes for online stores. These themes not only offer spectacular design but also powerful features to boost your digital success. Find the perfect theme for your online store and captivate your customers from the first click.

    Artificial Intelligence in the Retail and E-commerce World

    Artificial Intelligence in the Retail and E-commerce World

    Discover how Artificial Intelligence (AI) is reshaping the retail and e-commerce landscape. From automating operations to predicting trends, AI’s impact is transformative. Enhancing customer experiences through personalization, optimizing processes, and preventing fraud, AI is redefining the way businesses thrive in this evolving digital era.

    Maximizing the Potential of Email Marketing

    Maximizing the Potential of Email Marketing

    Email marketing has emerged as a powerful and versatile tool. Despite the rise of social media and other online communication forms, email remains an essential channel to reach customers directly and personally.