When we want to protect our online accounts or protect sensitive data, we use a strong password. Creating a secure, random password is a little complex but in Ruby, we can easily and quickly generate a random password. In this article, we are going to discuss how we can generate a random password using ruby, different approaches, example codes, and outputs. Generate a Random Password Using Ruby Using Ruby's rand Method Using the SecureRandom Module Custom Password Generator Since the code generates random passwords, ... Read More

This 100 Days of Web Development is a structured path to learning web development in 100 days. This study plan breaks down web development concepts into daily tasks, starting with HTML, CSS, and JavaScript and covering modern web frameworks, web security concepts, and full-stack deployment. So, if you want a complete overview of web development, read this article, and for a detailed overview on each topic, visit the attached hyperlinks. What is Web Development? Web development is the process of creating and maintaining websites on the Internet. It involves three parts: first front-end development, which focuses on ... Read More

JavaScript does not have a specific attribute protection level like the one that exists in some other languages, but we can come close using a few techniques. Protected properties are those that are accessible only to certain methods of an object and are not exposed to outside access. This idea is helpful when securing information against illegitimate access since only specific functions or methods can read or alter it. Approaches to Create Protected Object Properties Using Closures Using WeakMap Using Closures Closures in JavaScript can encapsulate properties and ... Read More

Centering the middle item in a layout while ensuring it doesn’t move if other items are removed is a common design challenge, this article explores ways to center the middle item using CSS techniques that maintain its position even if adjacent elements are absent. Using Flexbox with Absolute Centering Flexbox offers a straightforward way to center an item within a container. By setting the middle item to have margin property set to auto, it remains centered without depending on adjacent items. Example Code ... Read More

Working with web applications often requires parsing some HTML tables to extract the content in the appropriate format, most often in JSON format which is better for storage, transfer, or API communication. One of the most popular formats used for data exchange is JSON, mainly due to its lightweight nature and ease of integration on the front and back end. This article highlights different methods for making a JSON representation of an HTML table in JavaScript. Approaches to Convert HTML Table to JSON Using JavaScript’s querySelector and loops. Using forEach ... Read More

Flexbox is a powerful layout tool that allows us to align items within a container dynamically. However, sometimes you may want a flex item to take up only as much width as its content, rather than stretching to fill the available space within the container. In this article, we’ll go over different techniques to make specific items within a flex container take up only the space needed for their content, without stretching to fill the available space. Approaches to Make Flex Items Take the Content Width Using CSS align-self Property ... Read More

When creating web pages, a common design practice is to center a background image in a div. There are several options available, and each one is useful in its area. A background image will be centered inside a div box in an article regardless of the screen size or the size of the div. Whenever the window is resized, the image in the background should remain exactly at the center. Center a Background Image Inside a div Here are some of the most effective methods to center a background image within a div. Using ... Read More

In standard CSS positioning, relatively positioned elements occupy space within the normal document flow even after being offset by top, left, right, or bottom properties. This can create a gap in the layout where the element would have naturally sat, disrupting the alignment or layout of other elements around it. In this article we will position an element so that it appears relatively within the document but does not affect the design of surrounding elements, effectively making it "overlay" without creating extra space. Relatively Position an Element without It Taking Space Use a combination ... Read More

In CSS, there are times when you want to stretch a child div out over its parent div, thanks to some specific characteristics of the given content. In CSS, this is usually counterproductive since a div that is larger than its parent is going to get clipped, but certain properties can be amended for it to work. Making Child div Wider than Parent div This can mainly be done in two ways, the use of the overflow property and the change of position properties. Step 1 - Use of Oveflow: This scenario wouldn’t be ... Read More

In this article, we will style the label for the radio button which is currently selected. CSS also allows you to eliminate the default radio button and style the selected and unselected states of the labels. This will be accomplished with the help of the :checked pseudo class. Additionally adjacent sibling selectors will be used to achieve this effect. Styling the Selected Label of a Radio Button To begin with, we set the display property of the original circular radio button to none and it disappears from view. Next, we apply default styles to the label elements for unselected ... Read More