Tweet

Maybe Scrolly?

Shripal Soni

Follow @codewithshripal

Jan 16 • 6 tweets • 2 min read

HTML Tip 💡

4 real world use cases of <article> element to clearly understand when to use it ⚡

A thread 🧵 ↓

1️⃣ For Product Listing

2️⃣ For each forum post

3️⃣ For blog post/article

4️⃣ For each comment

@codewithshripal

Hope this thread has helped you in clarifying when we should use <article> element.

Follow @codewithshripal for getting daily tips/threads about web development ✨

Retweet/like the first tweet of the thread to help spread the word.

https://twitter.com/codewithshripal/status/1614946575956021251

• • •

Missing some Tweet in this thread? You can try to force a refresh

This Thread may be Removed Anytime!

Twitter may remove this content at anytime! Save it as PDF for later use!

More from @codewithshripal

Shripal Soni

@codewithshripal

Jan 5

4 ways to iterate over javascript object properties, you should know!

A thread 🧵 ↓

Let's first create an object with enumerable, non-enumerable and prototype properties as these 4 ways give different outputs based on such parameters.

Now, let's see 4 ways to iterate over the properties of this object.

1️⃣ Using Object.keys()

Read 7 tweets

Shripal Soni

@codewithshripal

Nov 10, 2022

7 very useful VS Code extensions that you should definitely install ⚡

A️ thread 🧵 ↓

1️⃣ Code Spell Checker

It is always better to write our code and comments with correct spelling.

Code spell checker highlights spelling mistakes and also gives quick suggestions to correct it.

It even works with camelCase or snake_case code ✨

marketplace.visualstudio.com/items?itemName…

2️⃣ ESLint

ESLint library statically analyzes our code to quickly find problems.

This extension integrates VS Code with the ESLint library installed locally/globally.

It highlights those problems in our code and also shows quick fixes for them.

marketplace.visualstudio.com/items?itemName…

Read 9 tweets

Shripal Soni

@codewithshripal

Nov 8, 2022

CSS Tip 💡

Easily enhance list style using ::marker pseudo-element ✨

A thread 🧵 ↓

What is ::marker pseudo-element?

1️⃣ Change color of the bullet/number of the list item

Read 13 tweets

Shripal Soni

@codewithshripal

Oct 17, 2022

HTML Tip 💡

Improve UX for input controls using <datalist> element ✨

A thread 🧵 ↓

What is <datalist> element and how to use it?

We can provide label for each option of datalist to provide extra information.

Read 11 tweets

Shripal Soni

@codewithshripal

Sep 14, 2022

4 ways to use SVG image in HTML/CSS ⚡️️

Includes use-cases, pros & cons of each way ✨

Thread 🧵 ↓

1. Using <img> element

Use Cases:
- Brand Logo
- Non-interactive icons

2. Using <object> element

Use Cases:
- Third-party interactive SVG widgets
- Interactive SVG charts where SVG code is prepared by backend which is in our control