Demystifying CSS Specificity | Must know the concept to master CSS

Image illustrated for CSS Specificity

So, before taking about the css specificity ,Let me ask you one question?………………….!

“Have you ever comes across a situation where you defined a property (let say color: blue) to one of the element and its not being applied.I think every developer must comes across this situation untill and unless they know about CSS Specificity.

Introduction:

Alright, CSS Specificity represents a set of rules that are used to decide which style should get applied to a particular element. Specificity is calculated based on the CSS selectors which are used to target elements.

If multiple CSS selectors are targeting the same element and trying…


Image source from canva.com

If you want to be a Good Frontend Developer then you Should Care About Web Accessibility.

When we say a site is accessible, we mean that the site’s content is available, and its functionality can be operated, by literally anyone(including differently able people)

The W3C Web Accessibility Initiative (WAI) develops technical specifications, guidelines, techniques, and supporting resources that describe accessibility solutions. These are considered international standards for web accessibility, which are linked in the resources at the end of this article.

Type of disabilities

  • Keyboard Navigation
  • Screen Readers (Assistive technologies)
  • ARIA_Attributes
  • Semantic HTML

Types of disabilities :

Web accessibility encompasses all disabilities that affect access to the…


The core concepts in Webpack

  • Entry
  • Output
  • Loaders
  • Plugins
  • Presets

Entry

Webpack uses the dependency graph traversal algorithm to processes all its module's direct and indirect dependencies to form the entire dependency graph and then bundle all the necessary modules.

The Entry Point instructs the Webpack compiler where should start from to build out its internal dependency graph.

./src/index.js is the default entry value.


Webpack

Okay, So I assume that you have come across this term Webpack or Perhaps it was mentioned in one of the jobs description(mostly in Js projs)…….!

What problem does Webpack solve?

If you are a Javascript developer you could have used a lot of new libraries(loadash, Axios, etc) and frameworks(React, Vue, Angular, etc). Imagine you are working on a project that requires a lot of libraries to use, you will use them through require or latest ES6 import statements into your project and these are stored under the Node Modules folder.

  1. Size of the application and Performance: With the introduction of JavaScript modules, the overall…

Hoisting

Synonyms of Hoist : Raise, Pullup,Uplift,……..

Hey Google, “ What is Hoisting in Javascript?

Hoisting is the JavaScript interpreter’s action of moving all variable and function declarations to the top of the current scope.

Does it physically move all the variables and functions up to the top? Perhaps a bit confusing?

Let's understand in layman’s term. Its’ not like Javascript Engine physically moves the code to the top that you've typed around and then execute.

Generally, The Execution context in Javascript is created in two phases :

1. Creation Phase

2. Execution Phase

  1. Creation phase: Suppose let’s say you have Javascript file which was declared with a couple of variables and functions. So, when you give…

MVS KIRAN

Epicure tendency!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store