Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Mohit Panchasara
Page 4 of 7
Various tricks for :before pseudo elements using position property in CSS
The CSS :before pseudo-element allows you to insert content before an HTML element. When combined with the position property, you can precisely control where this content appears relative to its parent element, creating effects like custom icons, tooltips, notification badges, and styled form elements. Syntax selector:before { content: "text or symbol"; position: absolute | relative | fixed | static; top: value; left: value; right: value; bottom: value; } Example 1: Custom ...
Read MoreTargeting only Firefox with CSS
While developing web applications, developers must make them look consistent across all browsers. Some CSS properties are not supported by Firefox but work in other browsers like Chrome, Opera, etc. In such cases, we need to write CSS code that targets only the Firefox browser. In this article, we will learn two different methods to write CSS that targets only Firefox browsers. Syntax /* Method 1: Mozilla-specific CSS Extension */ @-moz-document url-prefix() { /* CSS code for Firefox only */ } /* Method 2: @supports Rule */ @supports(-moz-appearance:none) { ...
Read MoreLogical Properties in CSS
In CSS, logical properties allow developers to define styles based on the logical structure of the web page rather than the physical layout. This means you can apply CSS according to text direction or content flow, making your designs more adaptable to different languages and writing modes. Logical properties are primarily used to set HTML element's margin, padding, and border. They provide different variants of traditional margin, padding, and border properties that adapt to content flow direction. Syntax selector { property-block-start: value; property-inline-end: value; ...
Read MoreLoading Text Animation Effect using CSS
Loading text animations are essential for providing visual feedback to users while content loads. They improve user experience by indicating that something is happening in the background and keep users engaged during wait times. In this tutorial, we will learn to create different types of loading text animations using HTML and CSS. These animations are lightweight, smooth, and don't require JavaScript libraries. Syntax @keyframes animationName { 0% { /* starting properties */ } 50% { /* mid-point properties */ } 100% { /* ending ...
Read MoreIs there any selector for elements containing certain text in CSS?
To select elements containing certain text in CSS, we can use CSS attribute selectors. We can either use pre-defined attributes or add custom attributes in the HTML document. Syntax /* Exact match */ [attribute="value"] { } /* Contains word */ [attribute~="word"] { } /* Contains substring */ [attribute*="substring"] { } /* Starts with */ [attribute^="prefix"] { } /* Ends with */ [attribute$="suffix"] { } Method 1: Using Attribute Value Selector The attribute value selector [attribute="value"] selects elements with an exact attribute value match − ...
Read MoreHow to prevent XSS with HTML/PHP?
Cross-Site Scripting (XSS) is a major threat to web application security because it allows attackers to inject malicious scripts into reputable websites. This attack depends on innocent consumers, exposing important information or potentially gaining control of their accounts. Understanding and combating XSS threats is critical for maintaining a strong security posture as web applications become more complex and dynamic. What are XSS Attacks? Cross-Site Scripting (XSS) attacks are a common security risk in web applications. Attackers take advantage of vulnerabilities in web pages to inject and execute malicious scripts on the browsers of unaware users. The Different ...
Read MoreWhy TypeScript is the best way to write front-end?
TypeScript has been gaining popularity in the web development community for quite some time now, and for good reason. It is a powerful programming language that offers several benefits over traditional JavaScript. TypeScript is a strongly typed language that allows developers to catch errors earlier in the development process, making it easier to maintain and scale large codebases. In this article, we will explore why TypeScript is the best way to write front-end code. What is TypeScript? TypeScript is a superset of JavaScript that was developed by Microsoft in 2012. It is a statically typed language that provides optional ...
Read MoreWhy and How to Use TypeScript in your React App?
React has emerged as one of the most popular JavaScript libraries for building dynamic and interactive web applications in recent years. With its component-based architecture and virtual DOM, React offers developers a powerful and efficient way to create complex user interfaces. However, as projects grow in size and complexity, it becomes crucial to ensure code maintainability, catch potential bugs early, and improve collaboration among team members. This is where TypeScript, a statically typed superset of JavaScript, comes into play. In this tutorial, we will explore why and how to use TypeScript in your React app and how it can significantly ...
Read MoreInterviewing Typescript
In this tutorial, we will delve into the world of TypeScript and explore some important interview questions and their corresponding answers. TypeScript, a statically typed superset of JavaScript, brings enhanced features and static type-checking to JavaScript development. By understanding these questions and answers, developers can gain insights into TypeScript's core concepts and capabilities. TypeScript Basics Here are some important questions that cover the basics of TypeScript − What is TypeScript, and how Does it Differ From JavaScript? TypeScript is a programming language that extends JavaScript by introducing optional static typing and additional features. While JavaScript is a dynamically typed language, ...
Read MoreHow to work with form elements in typescript?
Forms are an essential part of web development, enabling users to input and submit data. TypeScript, with its static typing and enhanced tooling, provides a robust environment for building form-driven applications. In this tutorial, we will explore various scenarios for working with form elements in TypeScript. We'll cover form submission, input validation, handling events, and accessing form values. Creating a Basic Form To get started, let's create a basic HTML form and enhance it with TypeScript. We'll capture user input and display it on submission. Syntax The syntax to create a form in HTML − ...
Read More