Below are some useful JavaScript code snippets that any frontend/web developer can add to their application and use in everyday development.

A lot of the snippets are one-liners and easy to understand and can be added to any web development frontend project.

With JavaScript changing all the time, it's important to create reuseable methods so if anything changes you only have to change it in one place. Hopefully, there will be the least one from the below the list which will help create some of your own reusable methods!

1. Gets an input value as a number

const checkMyValueType = (event) => { console.log(typeof event.target.value) // string console.log(typeof…

1. Picture

The <picture> tag gives web developers more flexibility in specifying image resources. The most common use of the picture element is for responsive design.

The <picture> element contains two tags: one or more <source>tags and one <img>tag.

The browser will look for the first <source> element that matches the media query, which is got by the srcset attribute. If none of the media queries is matched, the browser will use the <img> element.

Example:

<picture>
   <source media="(min-width:1024px)" srcset="dog-big.jpg">
   <source media="(min-width:465px)" srcset="dog-small.jpg">
   <img src="cat.jpg" alt="Flowers" style="width:auto;">
 </picture>

1. Measuring good code by the number of lines

Whether the code was done with a small number of lines or a lot of lines of code, good clean code should not be measured by the number of lines!

If you produce great code, with few bugs and easy to maintain, it is pretty much all that matters.

2. Looking for the answer before trying to solve the problem

Not having the confidence to believe that they can solve the problem for themselves so they go look online or ask another developer before even looking at it themselves.

One of the bigger problems with this is when code is copied from somewhere like StackOverflow and if any problems happen the…

1. Useless error messages

Whatever programming language or technology you’re using as a developer you will always come across them generic useless error messages. These type of errors are very time consuming when it comes to debugging as often it leaves developers with no starting point.

2. Badly named things

Names which do not reflect what a function, class or variable is for. This can make the code hard to follow very quickly and can become misleading.

Examples:

var d = 2;
var myInt = 12;
var message = "An error";

3. “We’ll write tests later”

When a project comes in and is needed in a hurry the tests can sometimes take a…

Below are some tricks which a lot of frontend developers don't know about. To do with HTML/CSS/JavaScript.

Hopefully, there will be at least a couple on the list which you didn't know about!

1. Datalist element

One HTML element that you don’t see used much at all and for no reason!

The <datalist> tag is used to provide an "autocomplete" feature for <input>elements. You will see a drop-down list of pre-defined options as you type.

1. Timebox

“A timebox is a previously agreed period of time during which a person works steadily towards completion of some goal. Rather than allow work to continue until the goal is reached, and evaluating the time taken, the timebox approach consists of stopping work when the time limit is reached and evaluating what was accomplished.”

This can help you evaluate where you are up to without you getting too frustrated and potentially wasting to much time.

It might be your approach is going fine and that's fine but this could also be a good time to change your approach after your…

What is a software company (house)?

A software company (house) specializes in building software products. Such companies can focus on business or consumer software. The defining trait of a software company is that it’s a company that focuses on developing and distributing software products.

Different types:

• SAAS (Software as a service) also known as web-based software, hosted software, and on-demand software is where a company host its application on the cloud which is available to the consumers.
• COTS (Commercial off-the-shelf) products are packaged solutions which are then adapted to satisfy the needs of the purchasing organization. This could be something like a CMS (Content Management System)
• …

Rule of 3.

Is a code refactoring rule of thumb to decide when a replicated piece of code should be replaced by a new code/procedures/methods.

It states that you are allowed to copy and paste the code once, but that when the same code is replicated three times, it should be extracted into a new procedure.

The main concept is to make code/procedures/methods generic so it can be reused in many places.

Consistency is king

Being consistent with the structure and how you code things. This can help with the readability & maintainability of your application.

Try and come up with coding standards, that help with…