Found 8591 Articles for Front End Technology

How to Convert CFAbsoluteTime to Date Object and vice-versa in JavaScript?

Saurabh Jaiswal
Updated on 21-Apr-2023 16:58:31

474 Views

CFAbsoluteTime is the elapsed time since Jan 1, 2001, 00:00:00 UTC. This is a standard time format on Apple devices. On the other hand, a date object is a built-in object in JavaScript used to represent date and time values. It has many methods for providing formatting and converting date & time from one form to another. The main difference between CFAbsolute Time and JavaScript Date objects is their format. CFAabsolute time is a numeric value representing the number of milliseconds since the Unix epoch whereas a date object is an object representing a specific date and time, year, month, ... Read More

How to convert hyphens to camel case in JavaScript?

Saurabh Jaiswal
Updated on 21-Apr-2023 16:57:25

2K+ Views

As a developer, we often encounter hyphenated strings. A hyphenated string makes our code more readable when the string’s length is high and the name is very complex. To solve this problem we use a camel case. Camel case is a very popular naming convention, in which we combine multiple words and make one string by capitalizing the first letter of each string except the first string. In javascript, we can use this convention to create variables and function names while we cannot use hyphenated strings to create a variable. In this article, we will explore step by step multiple ... Read More

How to convert Hex to RGBA value using JavaScript?

Saurabh Jaiswal
Updated on 21-Apr-2023 16:56:09

3K+ Views

While designing web pages we use colors to make web pages more appealing and engaging. We commonly use hex code to represent colors but sometimes we need to add transparency to the colors which can be achieved by RGBA values. Hex color values are represented by #RRGGBBAA and The RGBA color values are represented by rgba( red, green, blue, alpha). Here are a few examples of RGBA and hex values − Input: #7F11E0 Output: rgba( 127, 17, 224, 1 ) Input: #1C14B0 Output: rgba( 28, 20, 176, 1 ) In ... Read More

Which command is used to run SASS code from the command line?

Shubham Vora
Updated on 21-Apr-2023 16:54:46

398 Views

SASS is an abbreviation of Syntactically Awesome Style Sheets. It is a pre-process that compiles the code of SCSS and converts it into the CSS (cascading style sheet). It is a superset of CSS. This tutorial will teach us to compile the SCSS code using the terminal. Steps to run SASS From the Terminal Users should follow the below steps to run the SASS code from the terminal. Step 1 − Users should have installed Node.JS on their local computer. If not, Go to https://nodejs.org/en/download, download and install from there. Step 2 − Now, we need to create a ... Read More

Which characters are valid in CSS class names/selectors?

Shubham Vora
Updated on 21-Apr-2023 16:52:46

3K+ Views

In CSS, class names or selectors are used to select a particular HTML element. There are some CSS rules to define the class names or CSS selectors. In this tutorial, we will learn all CSS rules and about valid characters to create class names. Here are the rules for creating CSS class names. Rule 1 − Class name or CSS selectors should only contain alphanumeric characters and some special characters such as hyphens (-) and underscores (_). Rule 2 − Class names can’t start with the digits. For example, the “12sd” class name is invalid. Rule 3 − Class ... Read More

What is the use of SASS @import function?

Shubham Vora
Updated on 21-Apr-2023 16:32:51

2K+ Views

The SASS is a CSS preprocessor that keeps the CSS code dry as it doesn’t allow repetition in the code. There are various directives available in the SASS, one of which is the @import directive. The ‘@import’ directive is used to import the code of one ‘.scss’ or ‘.sass’ file into another file and execute it during compilation. We can import the variables, functions, mixins, etc., from one file to another using the ‘@import’ directive. Syntax Users can follow the syntax below to use the ‘@import’ directive in the SASS to import the file. @import 'test' We have imported ... Read More

Uses of an embedded style sheet in CSS

Shubham Vora
Updated on 21-Apr-2023 16:31:54

611 Views

CSS stands for the Cascading style sheet. HTML is used to create a web page, which adds text, images, videos, etc., to the web page. After that, we require to style the texts and images, which we can do using CSS only. Basically, we can add styles such as background, color, dimensions, direction, etc., to the HTML element using CSS. There are three ways to add style to the web page. First is the inline style, which directly adds style to the HTML element. The second is an embedded style sheet that adds styles in the ‘html’ file inside ... Read More

Transition shorthand with multiple properties in CSS?

Shubham Vora
Updated on 21-Apr-2023 16:30:10

718 Views

We can add transitions to HTML elements using CSS. Before we start with the tutorial, let’s understand what transition is. Basically, the transition is an element changing from one state to another state. For example, we change the dimensions of the element when users hover over the element. In CSS, we can add transitions to elements using two ways. First is to use ‘transition-property’, ‘transition-duration’, ‘transition-timing-function’, and ‘transition-delay’ all 4 properties together. The second is using only the ‘transition’ CSS property. The CSS ‘transition’ property is shorthand for the below CSS properties. Transition-property − It specifies the CSS property ... Read More

Top 5 HTML Tricks That You Should Know

Shubham Vora
Updated on 21-Apr-2023 16:25:32

1K+ Views

HTML is used to create web pages. In every new release of HTML, developers make some changes and add unique features. Here, we will discuss that unknown features by most developers who can help developers improve web pages. Here, we have explained the top 5 HTML tricks with examples. Color Picker in HTML We can create a color picker in HTML using the tag. It allows us to pick up any colour by clicking on the colour or adding RGB values. Syntax Users can follow the syntax below to create a color picker using HTML. In the ... Read More

Toggle class by adding the class name when element is clicked and remove when clicked outside

Shubham Vora
Updated on 21-Apr-2023 16:23:03

6K+ Views

Sometimes, we need to highlight the HTML element when we click it and make it normal when we click outside the HTML element. We can achieve it by toggling the class in the element. Here, the meaning of the toggling class is adding and removing the class. In this tutorial, we will learn to add the class name to the element when users click the element and remove the class name from the element when users click outside the element. Using the Add() and Remove() Method to Toggle Class When Clicking Inside and Outside of the Element In JavaScript, add() ... Read More

Advertisements