8 Hidden Tricks for Web Developers Make Them Perfect

It’s always wonderful to pick up tips that make your job as a web developer a little bit simpler. Especially if you can start using these tips right now. The number of tips that may ease your life is almost limitless, but not all of them can be used often. One golden tip is to take web development course from reputed institute can help you.

As a result, I’ve included a few HTML, CSS, and JavaScript tips that I believe every web developer should be familiar with. I hope this list teaches you a few new tricks that you haven’t seen before!

1. External connections

There are several methods for styling external links. Adding an additional class to all of the external links is one approach to doing this. Since this can be done quite quickly by using CSS alone, this is difficult and unneeded.

Let’s look at the subsequent selector.

a[href*=”/”]:not([href*=”yourwebsite.com”]) (

Apply your style here.

(

This CSS selector grabs all tags that don’t include the URL of your website and whose href property has two forward slashes (to filter out relative URLs).

That is simple, right?

This selector is often used in conjunction with a before or after pseudo-element, where the pseudo-element typically includes an icon. See the example below.

All of the external links in the aforementioned example contain a before pseudo-element that inserts an external link icon before the link.

2. Simple numbering

Console.log is presumably a tool you’ve used often. For many web developers, it’s the method to follow while debugging. However, did you realise there are a tonne more beneficial features available?

The count function is one of these methods. The count function call that was made in this specific instance is recorded by this function. This eliminates the need for you to construct a counter in order to keep track of how often an event occurs.

The label, or name in the example above, serves as the only parameter for the count function. This parameter functions as a counter identifier. A “default” label will be supplied if the label is not passed.

The names array in the aforementioned example comprises five names. Every loop calls the count method. Therefore, the counter will always return 5.

Because no label was supplied, the default label was used.

3. Angles

In CSS, angles are often used to rotate an element or produce an animation. For instance, we often use something like transform: rotate(180 deg). But you could also use a variety of different units in this situation. Rad, Grad, and Turn are further options.

The turn unit is the most intriguing. You may also use transform: rotate in place of writing transform: rotate(180 deg) (0.5turn). Alternately, you could use transform: If you wanted to rotate an element twice (720 degrees), use rotate (2turn) instead of transform: rotate.

turn (0.5 turns); put into action

4. Subtitles and captions

Your website’s viewers will benefit greatly if all of the audio and video included captions or subtitles. There is probably no additional explanation required for that.

By utilising the track tag, you may provide a caption or subtitle. This tag may be included in an audio or video tag.

This is how it seems.

src=”/video.mp4″ in the video controls

track title=”subtitles” label=”English” Default srclang=”en” and src=”captions/video-en.vtt”

Deutsch, sort subtitles, de, srclang, and captions/video-de.vtt are the track labels for this video.

track kind=”subtitles” label=”Espaol” SRC=”captions/video-es.vtt” srclang=”es”>

/video>

The text track’s title is specified via the label element. Captions, chapters, descriptions, information, and subtitles are just a few examples of the possible values for the sort property, which identifies the nature of the text track. If the type property is subtitles, the srclang element, which determines the language of the track text, must be present.

5. Dynamic characteristics

You may sometimes find yourself in a position where you need to provide an object with dynamic characteristics. Fortunately, JavaScript makes this feasible. There are really several methods to do this.

The first approach looks like this:

dynamic const =”name”

const person is equal to

age: 33,

‘John’ [dynamic]

(

It’s useful to note that if you’re using ES6, you can also mix interpolation with dynamic properties.

Let’s look at the example below, where we used interpolation to provide the person object an additional attribute.

dynamic const =”name”

const person is equal to

age: 33,

“John” [dynamic]

[interpolated-$dynamic]

: true

(

The last technique to add a dynamic property to an object is to set it in a manner similar to adding a key-value pair to an array.

dynamic const =”name”

if individual =

age: 33,

(

dynamic person=”John”

The main benefit of this technique is that you can include static properties as well when defining an object. This method of adding dynamic characteristics is often used with if-statements.

if individual =

age: 33,

(

If a condition is met,

someValue = individual[someProperty]

(

6. Creating optional and required input components

The input, select, and textarea tags each have an optional and required pseudo-class in CSS. When the needed attribute is not set on an element, it is represented as the “optional” pseudo-class. An element that does not have the needed property set on it is represented by the required pseudo-class.

optional input

1px black solid border;

(

input is necessary.

1 red dashed pixel;

(

It appears as follows:

7. Lists separated by commas

Here’s a clever tip that enables you to make a comma-separated list out of an HTML unordered list and a few lines of CSS.

ul > li: not(following: last-child):

“, “;

(

In order for this to work, the display property of the li tag must be set to inline-block.

ul>

First thing: li>

The second point is: li >

The third point is li.

/ul>

The outcome appears as follows:

8. Specific array values

You may eliminate duplicate values from an array by using the last tip on this list. Making use of the filter function is a typical method for doing this. As usual, there are several solutions to this issue.

My preferred method for getting rid of duplicate values from an array is to use the spread operator and the set function Object() [[native code]] together—it’s quick and easy!

Stay in Touch

To follow the best weight loss journeys, success stories and inspirational interviews with the industry's top coaches and specialists. Start changing your life today!

Related Articles