Rajesh Dhiman's Blog

November 18, 2020

HTML Meta Tags- Everything a front-end developer should know

Meta tags help us to provide the metadata (the information about the data) of a web page.Any website is incomplete without meta tags. The fancy little previews of websites that you see on social media or chat messages are there because of meta tags. The code used to create meta tags is not displayed on your web page, but it...

Categories html/Web Development

October 12, 2020

Powerful Web Development Tips and Tricks

We learn a lot of new things every day. Here I add some of the tips and tricks that I myself use on a regular basis. GIT Edit your last commit: Use git commit –amend to edit your last comment. It opens your last commit in a text editor in the console itself. You can edit the comment and save....

Categories web

November 12, 2020

Today I learned :focus-within

Today I learned that there exists a CSS pseudo-class called :focus-within which we can use to match an element if the element itself or any of its descendants are matched by :focus. It is very helpful in cases when you want to highlight a container which also has few child elements and you want to keep it highlighted even if...

Categories css/front-end/web

November 10, 2020

Why Code Comments Are Important?

Do you write comments in your code? If you do, that’s awesome, and if you don’t, start adding comments right away. I couldn’t do it all until the code was straightforward boilerplate code or some standard stuff that you write every day. But if it is a complex logic, some condition or group of conditions, then it takes a lot...

Categories general programming/web/webDev

September 10, 2020

How to make your website accessible for everyone

People with vision impairments use screen readers to access computers, tablets and phones. Screen readers convert text on the screen to an understandable format for users to read. Users can also navigate and run commands by using some shortcut keys or touch gestures.
Here are a few things that we can do to make your website more accessible for blind people and people with vision impairments.

Categories front-end/web/webDev

July 12, 2020

What is front-end development?

Front-end development typically involves three main languages: HTML, CSS and javascript.
Each of the languages performs a separate but essential function. They work together to determine how a webpage is structured(HTML), how it looks (CSS) and how it functions (javascript) in a web application.
And the browsers handle figuring out how to turn these files into a functioning web page.

Categories css/front-end/html/javascript/web

June 26, 2020

javaScript – Replace all occurrences of a forward slash in a string

Today I learned an easy solution to replace all occurrences of a forward slash in string in javascript. I had to convert an URL to a string in another format, so initially, I tried str.replace() method like But to my surprise, it only replaced the first occurrence in the string.Then I thought oh I might need to use a regular...

Categories javascript/web/webDev

June 10, 2020

Introduction to the javascript fetch() Api

The Fetch api is used to fetch data or resources from a server. It allows us to retrieve data from a URL without having to do a full page refresh. The Fetch api is an improvement over the XMLHttpRequest API (XHR). Here is a basic example of XMLHttpRequest. Example from MDN docs. And a simple fetch request looks like: fetch method accepts...

Categories javascript/webDev

May 31, 2020

Responsive images – Using Srcset

Srcset is a property that we can use with img tag. It lets us list a set of images which we want to load at different resolutions for an image. For example: The browser chooses one from the list and then fetches the image based upon the viewport dimensions, the image size relative to the viewport, the pixel density of...

Categories webDev

May 24, 2020

CSS – An Introduction to Flexbox

The Flexible Box Layout Module (Flexbox) is a useful and easy-to-use CSS module that helps us to make our content responsive. Flexbox takes care of any spacing calculations for us, and it provides a bunch of ready-to-use CSS properties for structuring content.You can play with some sample code here. Flexbox has two components, a parent container and child items. Flexbox...

Categories css/webDev