CSS Animations:

Usage and Performance and Tips

🧵A thread 🧵 Usage:

Only two properties are required for a CSS animation.

1. animation-name
2. animation-duration

All other properties are optional.

CSS Easing Functions: Easing is a word used to describe the acceleration and deceleration of a transition or an animation along a timeline.

We can plot this a graph.

The graph for a linear easing is a straight line.

CSS Transitions:

Usage and Performance

🧵A thread 🧵 Usage:

Only two properties are required for a CSS transition.

1. transition-property
2. transition-duration

The other two properties are optional ( transition-delay and transition timing function )

Getting😎with JSON:

( 🧵A mini-thread🧵 )

JSON is used to exchange data with server.

Consider you are a developer for a car showroom and you need to add new cars to your database.

For example the new cars JavaScript Object is:

#javascript #100DaysOfCode Servers receive data in string format.

So you have to convert to your new cars JavaScript object to a string.

JSON.stringify() function can help you do that.

Here's how:

🔥Git Good Practices

1. Make clean commits:

Don't do too much on one commit.

Fix one bug, commit, fix second bug, commit and so on.

Break features into steps and repeat the clean commit process. 2. Good commit messages:

Capitalized, meaningful names in the present tense is the best commit message practice.

Example:

Added responsiveness to the website

CSS Property ( will-change )

The will-change property hints the browsers what properties are going to change.

Therefore, helping the browser set up optimizations before an element is actually changed.

This is great for optimizing animations / transitions.

Here's how it's done Although it seems cool to use will-change as much as you can to optimize the performance of the page.

It's recommended to use on elements that are sure to change like sliders, modals.

CSS Building Blocks:

Understanding Specificity:

🧵A thread🧵 A CSS rule has two parts:

1. Selectors
2. Properties

Selectors determine the elements that get the styles.

Pretty easy. Right.

But then specificity comes to play.

It decides which matching selectors have more specificity and the higher order (winner) one gets the rules.

#CSS Building Blocks:

Understanding Inheritance

🧵A thread🧵 Inheritance says that:

Some CSS properties when set on a parent element can be inherited by the children elements.

For example:

When you set color property to body it gets inherited by all the children of the body.

Unless you specify other color property for an element.

How to style #CSS Element State Pseudo Classes

🧵A thread🧵 :in-range and :out-of-range

Style number type inputs when the value entered by user is out-of-range or in-range.

Structural CSS Pseudo Classes

🧵A Thread 🧵 :nth-child(n)

Most common use case for this selector is the striped table / list using "odd" and "even" keywords.

One thing to note is that (n) does not start with 0 in a array but it starts with 1.

The first element is :nth-child(1) and it goes on...

CSS Phantom world feat. Pseudo Elements

🧵 A thread 🧵 Pseudo elements are really phantoms existing with the markup. Don't be scared they are the friendly or at least on our side.

Let's get to know them:

::selection

It selects the portion of an element that is selected by a user.

For example:

A 🧵about CSS Selectors:

Going from Easy -> Complex...

👇 These are the commonly used CSS selectors:

1. Universal Selector ( * )

2. Element Selector ( p , a , div , ... )

3. Class Selector ( .my-class )

4. Id Selector ( #CSS 😉)

👇

Understanding CSS Box Model:

🧵 A thread 🧵

👇 Every element is a box in web design.

Our job is to move boxes. Pretty easy.

The box contains further 4 boxes and 2 invisible (whoo) boxes.

👇

How to load images the right way:

🧵A mini-thread

👇 Always set width and height on the img tag.

Why?

You might have noticed jumps in pages when loading. It is because the height of the image is not set explicitly and it affects UX / SEO.

Google has also started measuring these shifts in a metric named Cumulative Layout Shift.

Understanding Media Queries in CSS:

🧵A thread🧵 Components of a media query:

1. An optional media query modifier
Example: only or not

2. An optional media type
Example: screen, print, etc.

3. Zero or more media features
Example: resolution, device-aspect-ratio, etc.

👇

How to build awesome forms with only HTML & CSS:

🧵A Thread🧵 Basic HTML:

Write the basic HTML

5 tips for becoming a developer:

1. Learn by doing, always play with the code while learning.

With every new topic, the sooner you start playing with the code, the faster you will learn the given concepts. 2. Grasp the fundamentals for long term benefits.

As elementary as they appear as they appear, the fundamental concepts always need to come first.

A thread on testing HTML:

-> HTML 5 semantic elements:

Make sure that the markup is structured semantically and all the required semantic elements are used appropriately.

Refer to htmlreference.io for the usage of HTML semantically.

👇 -> W3C Compliance:

All the pages should be W3C compliant and tested with validator.w3.org to identify possible issues in HTML code.

👇

5 practices to become a better developer:

1. NEVER STOP LEARNING

The tech industry is one of the most dynamic fields in which you can never stop learning in order to remain relevant to the industry. 2. DON'T GIVE UP

When a question or an error seems impossible to solve, don't give up. Be stubborn when it comes to solving problems and you will eventually succeed. Sometimes it works automatically after taking a break. 😅

HOW TO LEARN A NEW SKILL:

🧵 A thread🧵

The 10,000 hour rule:

You need 10,000 hours of deliberate practice to master a skill.
- Malcolm Gladwell

Does it really take that long?

👇👇👇 Actually, the rule is true for becoming an expert at something.

Otherwise, you need 20 HOURS to go from "knowing nothing to being pretty good".

These 4 techniques will help you acquire a new skill:

👇👇👇

HOW TO WRITE CLEAN CODE:

🧵A THREAD🧵

Don't call the world dirty because you forgot to clean your glasses!

👇 WRITE FOR HUMANS:

The code we write will be interpreted by machines. However, it will be read and improved by humans. So, write beautiful, impressive and readable code.