DEV Community: Shefali

Why Your App Needs a Loading Skeleton (Not a Spinner)

Shefali — Tue, 14 Apr 2026 06:26:49 +0000

Open any app. Something is loading. What do you see?

If it’s a spinner, it’s just a circle going round and round. You don’t know what’s loading, how much is left, or how long it’ll take. You just wait.

Now imagine this instead: the layout shows up instantly. You see grey boxes where content will be, a circle for the avatar, lines for text. A subtle shimmer runs across them. Then the real content loads in.

Same loading time. But it feels much better.

That’s exactly what skeleton screens does.

What Are Skeleton Screens?

Skeleton screens are simple placeholders that shows the shape of the content before it loads.

Instead of a spinner, users see a basic layout of the page, even before the real data appears.

Here’s what it feels like:

Instead of showing a spinner or a “Loading…” message, the interface displays a preview of the layout, and that small change makes the experience feel much smoother.

Now that we understand what it is, let’s see why spinners don’t always work well.

The Problem with Spinners

Spinners aren’t bad.

They work well for quick actions like submitting a form, clicking a button, or uploading a file. In those cases, the user initiated something and just needs a simple signal that it’s in progress.

The issue starts when spinners become the default for every loading state. Page load, feed refresh, dashboard data, everything shows the same spinning indicator.

The problem is that a spinner gives no useful information. It doesn’t tell users what is loading, how much is left, or what to expect when it’s done. It simply shows that something is happening, without any context.

And that leads to the real UX issue: uncertainty.

When users don’t know what’s going on, it becomes frustrating very quickly. A spinner creates that uncertainty, while a skeleton screen reduces it by showing the structure of the content in advance, helping users understand what they are waiting for even before the data arrives.

Why Skeleton Screens Feel Faster (Even When They're Not)

Here’s something interesting: skeleton screens don’t actually make your app load faster. The data still takes the same amount of time to arrive.

And yet, users often feel like the app is faster.

This is the concept of perceived performance, which is about how fast something feels, not just how fast it actually is. In many cases, that feeling matters just as much, because user experience is shaped by perception.

When a skeleton screen appears, your brain starts forming a mental picture of the page. You can already see where things will go, so you begin to anticipate the content. By the time it loads, it feels less like waiting and more like something gradually revealing itself.

With a spinner, there’s nothing to engage with. With a skeleton, there’s something to expect, and that shift changes the entire experience.

This isn’t just theory: Apps like YouTube, LinkedIn, Facebook, GitHub, and Airbnb all use skeleton screens for content-heavy experiences.

These companies have already tested different approaches and looked at the data. Their decision isn’t based on trends or aesthetics, but on what actually improves user experience.

When you see the same pattern across so many large products, it’s a strong signal that skeleton screens work.

Once you see this, the difference becomes much easier to understand.

Spinners vs Skeletons

Here's a simple comparison to understand why skeleton screens feel better than spinners.

Feature	Spinner	Skeleton
Shows what’s loading	No	Yes
Feels faster	No	Yes
Shows page structure	No	Yes
User frustration	More	Less

So when should you use each one?

When to Use Skeleton Screens vs Spinners

It’s not about avoiding spinners completely, but about choosing what fits the situation.

Use a skeleton screen when you’re loading a full page, a list, a feed, a dashboard, or any section where the layout is predictable and there’s a lot of content coming in. In these cases, users are waiting for a whole view to appear, so showing the structure helps.

Use a spinner when the user performs a quick action like submitting a form, clicking a button, or deleting something. In these moments, there isn’t a layout to show, and the spinner simply tells the user that the action is in progress.

Once you start using skeletons, a few small things can improve the experience a lot.

Best Practices for Skeleton Screens

Here are a few best practices to make skeleton screens actually helpful, not confusing.

Match the real layout: Your skeleton should look like the actual content. When the shapes and structure are similar, the transition feels smooth. If it looks completely different, it can confuse users.
Don't overdo it: Showing a few skeleton cards is helpful, but showing too many at once can feel overwhelming. For long lists, it’s better to combine skeletons with pagination or lazy loading.
Always have an error state: If the data fails to load, don’t keep showing the skeleton forever. Replace it with a clear and friendly error message so users know what went wrong.
Accessibility matters: Some users are sensitive to motion, so constant shimmer effects can be uncomfortable. Good implementations respect reduced motion settings and adjust automatically.

Even with all this, performance still matters behind the scenes.

Performance Tip

Skeleton screens make your app feel faster, but they don’t replace real performance improvements.

The best approach is to do both: reduce the actual loading time and use a skeleton for whatever delay is left. A skeleton can make a slow load feel better, but when the load is already fast, it can make the experience feel almost instant.

Here are a few quick wins that work well alongside skeleton screens:

Cache aggressively: If a user has visited the page before, show cached data right away and update it in the background. In many cases, this means the skeleton won’t appear at all.
Prioritise above-the-fold content: Load only what’s visible on the screen first, and fetch the rest as the user scrolls. This helps the most important content appear quickly, making the skeleton disappear sooner.
Avoid waterfall requests: If your page makes multiple API calls one after another, the wait time adds up. Try to run requests in parallel so everything loads faster.

A skeleton gives you a smoother waiting experience, but it works best when you also make that waiting time as short as possible.

Now let’s quickly look at how you can start using them.

How to Get Started

You don’t need to build skeleton screens from scratch. There are good libraries for every major framework that handle animation, sizing, and accessibility for you. You can pick one based on your stack and get started quickly.

Library	Framework	What it does
react-loading-skeleton	React	A popular and easy option with ready-to-use components that work with minimal setup.
vue-content-loader	Vue	Uses SVG, which makes it very flexible and lightweight for custom designs.
content-loader	Any	A framework-agnostic option that works with React, Vue, Svelte, or even plain JavaScript.
animate-pulse	Tailwind	If you’re already using Tailwind, you can create skeletons without adding any extra dependencies.

The concept is the same across all of them: show the skeleton while data is loading, swap it for real content when it arrives. That's it.

Conclusion

Spinners aren’t bad, but they’re often used in places where better options exist. For content-heavy screens, skeletons usually provide a much smoother and more helpful experience.

Skeleton screens are simple to add, don’t take much effort to implement, and can instantly improve how your app feels to users.

The next time you reach for a spinner, take a moment to think if you can show the structure of the content instead. In many cases, giving users a preview of what’s coming will make the experience feel faster and more intuitive.

That’s all for today!

I hope you find this blog on loading skeleton screens helpful!

For paid collaboration, connect with me at: connect@shefali.dev

If you enjoy my work and want to support what I do buy me a coffee!

Every small gesture keeps me going! 💛

Follow me on X (Twitter) to get daily web development tips & insights.

11 AI APIs You Can Integrate in Your Apps Right Now

Shefali — Tue, 07 Apr 2026 05:51:32 +0000

AI is not just the future anymore, it’s already part of the apps you use every day. From chatbots and image tools to voice assistants and smart recommendations, you can now add powerful AI features in just a few hours.

If you’ve been thinking “I should add AI to my app” but don’t know where to start, this list will help you.

In this post, I’ll share 11 AI APIs you can start using right away. These APIs let you add advanced features without building everything from scratch.

Let's jump right into it! 🚀

1. OpenAI API

If you want to add:

Chatbots
AI assistants
Content generation
Code helpers

This is usually the first choice.

Why it’s useful:

Natural conversations
Great for SaaS tools, support bots, writing tools
Can also generate images and embeddings

Use cases:

AI writing assistant
Customer support chatbot
Code explanation tool

2. Anthropic Claude API

Claude is known for being more “controlled” and safer in long conversations.

Why it’s useful:

Handles long context really well
Great for structured outputs

Use cases:

Document analysis
Legal or research tools
Long-form content generation

3. Google Gemini API

Google’s AI ecosystem is getting really strong, especially if you’re already using Firebase or Google Cloud.

Why it’s useful:

Multimodal (text, images, more)
Works well with Google products

Use cases:

Smart search features
AI-powered dashboards
Knowledge assistants

4. Stability AI API

This is very useful for generating images inside your app.

Why it’s useful:

Open and flexible
Good alternative to proprietary image APIs

Use cases:

AI art generators
Thumbnail creators
Design tools

5. Hugging Face Inference API

You can think of it like a GitHub for AI models, but instead of just browsing them, you can actually use them directly through an API.

Why it’s useful:

Huge model library
Supports NLP, vision, audio

Use cases:

Sentiment analysis
Text classification
Named entity recognition

6. ElevenLabs API

It's useful for super realistic voice generation.

Why it’s useful:

Human-like voices
Great for storytelling or voice assistants

Use cases:

Audiobooks
AI voice assistants
Accessibility features

7. AssemblyAI API

If your app deals with audio, this is a solid choice.

Why it’s useful:

Accurate transcription
Extra features like summarization & sentiment

Use cases:

Podcast transcription
Meeting notes
Voice-based apps

8. Cohere API

It's great for NLP-focused apps.

Why it’s useful:

Strong text embeddings & classification
Easy to integrate

Use cases:

Search ranking
Text summarization
Content moderation

9. Replicate API

This one is underrated.

Replicate lets you run open-source AI models via API without managing infrastructure.

Why it’s useful:

Access to multiple models (image, video, audio)
No need to host models yourself

Use cases:

AI video tools
Face generation
Style transfer apps

10. DeepL API

If your app needs high-quality translations, DeepL is one of the best options out there.

Why it’s useful:

Extremely accurate translations (often better than typical alternatives)
Supports multiple languages with natural tone
Also offers writing improvements (DeepL Write)

Use cases:

Multi-language SaaS apps
Content localization
Translating user-generated content
AI-powered writing assistance

11. Pinecone API

This is not exactly an “AI model,” but critical for AI apps.

Why it’s useful:

Stores embeddings for semantic search
Enables retrieval-based AI systems

Use cases:

AI search engines
Chat with your data
Recommendation systems

That’s all for today!

I hope you find this list of AI APIs helpful!

For paid collaboration, connect with me at: connect@shefali.dev

If you enjoy my work and want to support what I do buy me a coffee!

Every small gesture keeps me going! 💛

Follow me on X (Twitter) to get daily web development tips & insights.

11 Free Hosting Platforms for Your Side Projects

Shefali — Wed, 01 Apr 2026 07:14:11 +0000

Have a side project on your laptop but not hosting it because it feels expensive or confusing? You’re in the right place. In this post, I’ll share 11 free hosting platforms you can use to put your projects online without spending a single penny.

Let’s jump right into it!🚀

1. Appwrite

An open-source backend platform that gives you APIs for authentication, databases, and storage. It's great for building full-stack apps quickly.

2. Cloudflare Pages

A fast and secure platform for hosting frontend websites with global CDN and easy Git integration.

3. Sevalla

A modern cloud platform where you can deploy apps, databases, and static sites in one place, without worrying about infrastructure or complex setup.

4. Firebase Hosting

A reliable hosting service by Google for static sites and web apps, with built-in security and fast performance.

5. GitHub Pages

Perfect for hosting static websites straight from your GitHub repository. It's super simple and beginner-friendly.

6. InfinityFree

A completely free hosting service with no ads, suitable for small PHP and MySQL projects.

7. Netlify

A popular platform for deploying frontend apps with features like forms, serverless functions, and CI/CD.

8. Render

A modern cloud platform to host static sites, APIs, and databases with a clean developer experience.

9. Supabase

An open-source Firebase alternative that provides a database, auth, and APIs for building apps quickly.

10. Surge

A super simple tool for publishing static websites with just a few commands.

11. Vercel

A developer-friendly platform (great for Next.js apps) that makes deploying frontend and full-stack apps fast and seamless.

That’s all for today!

I hope you find this list of free hosting platforms helpful!

For paid collaboration, connect with me at: connect@shefali.dev

If you enjoy my work and want to support what I do buy me a coffee!

Every small gesture keeps me going! 💛

Follow me on X (Twitter) to get daily web development tips & insights.

25+ Websites to Practice HTML, CSS, and JavaScript

Shefali — Wed, 25 Mar 2026 06:57:58 +0000

Learning HTML, CSS, and JavaScript is easy, but practicing them consistently is the hard part.

When you watch tutorials, you understand everything. Then you open your editor, try to build something on your own and suddenly your brain goes blank.

It happens to all of us.

So instead of thinking “what should I build?”, here are 25+ websites where you can actually practice through projects, challenges, and simple exercises.

1. CodePen

A super popular online editor where you can write HTML, CSS, and JavaScript and instantly see the results. It’s perfect for experimenting with ideas, building small components, and exploring how others structure and style their code in real projects.

2. JSFiddle

A simple and lightweight playground to quickly test small snippets of code. It's great for debugging, trying out new concepts, or sharing examples with others without setting up a full development environment on your machine.

3. CodeSandbox

An advanced online development environment where you can build complete frontend apps directly in the browser. It supports modern frameworks and gives you a real development-like experience without needing to install anything locally.

4. StackBlitz

Runs full development environments inside your browser using WebContainers. It feels almost like working on your own computer, so you can try modern tools, frameworks, and build projects quickly without installing anything.

5. Frontend Mentor

Provides real UI design challenges where you convert designs into working code. It’s a great way to build portfolio projects while improving layout skills, responsiveness, and attention to small details.

6. Frontend Practice

Lets you recreate real-world websites from companies you already know. This helps you understand how professional interfaces are built and improves your ability to break down complex designs into smaller components.

7. Codewell

Provides clean and realistic UI challenges focused on modern design. You also get ready-to-use files and assets, so you can focus on coding and building layouts instead of spending time creating the design from scratch.

8. CSSBattle

A fun platform where you recreate designs using CSS. It challenges your creativity and helps you deeply understand positioning, shapes, and how CSS actually works under the hood.

9. Javascript30

A collection of 30 JavaScript projects that help you build consistency. Each project focuses on basic concepts and encourages you to build things on your own without using frameworks.

10. freeCodeCamp

A complete learning platform that combines tutorials with hands-on challenges. You don’t just learn concepts, you immediately apply them through exercises and projects, which makes it great for building strong fundamentals.

11. Learnify

A simple platform where you can learn and test your frontend knowledge through tutorials and quizzes. It helps you understand concepts clearly, revise what you’ve learned, and identify gaps before moving on to building real projects.

12. Codecademy Projects

Offers guided projects where you build real applications step by step. It’s especially helpful if you like structured learning and want to apply concepts without feeling overwhelmed.

13. W3Schools Exercises

Offers simple and quick exercises to check your understanding of HTML, CSS, and JavaScript. It’s great for beginners who want to practice concepts without getting into big or complex projects.

14. LearnJavaScript.online

An interactive platform focused on JavaScript. It explains concepts and gives you coding challenges, so you can learn by actually writing and testing code as you go.

15. CodePractice.dev

A platform focused on practice, with problems in HTML, CSS, JavaScript, and more. It’s useful when you want to improve specific skills with targeted exercises.

16. Flexbox Froggy

A game that teaches Flexbox through interactive levels. Instead of memorizing properties, you learn by solving visual puzzles, which makes layouts easier to understand.

17. Grid Garden

Similar to Flexbox Froggy but focused on CSS Grid. It helps you learn grid layouts in a simple and visual way, making them easier to understand than just reading theory.

18. CodinGame

Turns coding practice into a game-like experience. You solve problems, compete with others, and learn concepts while playing, which makes it much easier to stay consistent and motivated.

19. LeetCode

A well-known platform for practicing data structures and algorithms. While not UI-focused, it’s excellent for improving your problem-solving skills and writing better JavaScript logic, especially if you're preparing for technical interviews.

20. HackerRank

Offers structured coding challenges across multiple domains, including frontend topics. It’s beginner-friendly and also useful for interview preparation, with clear problem statements and guided practice paths.

21. CodeWars

Provides coding challenges called “kata” where you solve problems in different ways. It’s great for improving JavaScript thinking, exploring different solutions, and learning from how others approach the same problem.

22. CodeChef

A competitive programming platform with a wide range of problems. It’s useful for improving logical thinking and consistency, especially if you enjoy solving challenges regularly.

23. Codeforces

One of the most advanced competitive programming platforms. It’s more challenging but helps you push your limits and improve problem-solving speed and accuracy over time.

24. HackerEarth

Offers coding challenges, hackathons, and skill assessments. It’s useful not only for practice but also for exposure to real-world coding environments and hiring-related tests.

25. CodeSignal

Focuses on company-style coding assessments and challenges. It helps you practice in a format similar to real hiring tests, making it especially useful when preparing for job opportunities.

Bonus Platforms

Topcoder: Competitive programming + challenges
Exercism: Mentored coding practice with feedback
Coderbyte: Interview-style questions
SPOJ: Large archive of coding problems
Project Euler: Math + programming challenges

Final Thoughts

You don’t need 25 websites, you just need a few good ones.

One to learn, one to build, and one to practice.

That’s enough.

You don’t improve by saving more resources. You improve by building regularly, getting stuck, and figuring things out step by step.

That’s all for today!

I hope you find this list of websites to practice HTML, CSS, and JavaScript helpful!

For paid collaboration, connect with me at: connect@shefali.dev

If you enjoy my work and want to support what I do buy me a coffee!

Every small gesture keeps me going! 💛

Follow me on X (Twitter) to get daily web development tips & insights.

The Ultimate Python Roadmap: Learn Step by Step

Shefali — Fri, 16 Jan 2026 06:06:24 +0000

Python is one of the most beginner-friendly and versatile programming languages. You can use it for many things like building websites, working with data, automating tasks, creating backend systems, or even getting started with AI.

To learn Python, there’s a lot to cover: basics, data types, loops, functions, OOP, and more. But don’t worry, you’re in the right place. I’ve put together a step-by-step Python roadmap to guide you through everything in a clear and logical order.

Let’s jump right into it!

Stage 1: Getting Started

Before writing real programs, understand what Python is and how it works:

Introduction: What Python is and where it’s used
Getting Started with Python: Installing Python and running your first program
Comments: Writing notes in code
Print Function: Displaying output
Escape Sequence Characters: Formatting text output

💡Tip: If you want a detailed explanation with examples while following this roadmap, you can check out Python tutorials on Learnify.

Stage 2: Variables, Data Types & Input

Next, learn how Python stores and handles data:

Variables in Python
Data Types in Python
Typecasting in Python
Input Function: Taking user input
Strings: Basics, indexing, slicing, and methods

Stage 3: Control Flow & Logic

Now start controlling how your program behaves:

Conditional Statements: if, elif, else
Match Case Statements
Loops: for loop, while loop

Stage 4: Functions & Code Organization

Make your code reusable and clean:

Functions
Local and Global Variables
Lambda Functions
Modules
Importing Modules
if name == "main"

Stage 5: Python Style & Best Practices

Learn how to write clean and professional Python code:

String Formatting
Docstrings
Comments vs Docstrings
PEP 8
The Zen of Python

Stage 6: Data Structures

Work with structured data efficiently:

Lists
Tuples
Sets
Dictionaries
Enumerate Function

Stage 7: Error Handling & Utilities

Handle errors and improve reliability:

Exception Handling
is vs ==
requirements.txt File

Stage 8: Functional Programming Concepts

Understand Python’s functional side:

Map, Filter, and Reduce
Function Caching
Generators
Walrus Operator

Stage 9: Object-Oriented Programming (OOP)

Learn how to build scalable and maintainable programs:

Introduction to Object-Oriented Programming (OOP)
Classes and Objects
Constructors
Inheritance
Polymorphism
Encapsulation
Access Modifiers
Instance vs Class Variables
Static Methods
Class Methods
Class Methods as Alternative Constructors
Decorators

Stage 10: Advanced OOP & Internals

Explore how Python works internally:

super() Function
Magic / Dunder Methods
dir() Method
dict Attribute
help() Method

Stage 11: Working with Files & Environments

Let's look at the real-world project essentials:

Handling Files
Virtual Environment

Prefer a Visual Roadmap?
You can also check out this step-by-step Python roadmap in visual form here!

That’s all for today!

I hope you find this Python roadmap helpful!

For paid collaboration, connect with me at: connect@shefali.dev

If you enjoy my work and want to support what I do:

👉 Become a Patreon supporter
👉 Or buy me a coffee

Every small gesture keeps me going! 💛

The Ultimate CSS Roadmap: Learn Step by Step

Shefali — Tue, 25 Nov 2025 11:23:49 +0000

To learn CSS, it often feels like there’s an endless list of things to cover: selectors, layouts, responsive tricks, animations, and so much more. But don’t worry, you’re in the right place, as I’ve put together a step-by-step CSS roadmap to guide you through everything in a logical order.

Stage 1: Foundations

First, we start with the basics.

Basics

Understanding CSS syntax
Ways to add CSS to HTML

Selectors

Basic selectors
Combinators
Pseudo-class
Pseudo-elements
Attribute selectors
Grouping selectors

Colors

Ways to define colors
Useful color utilities: currentColor keyword, transparent keyword, inherit / initial / unset

Units

Absolute & relative units

💡Tip: If you want a detailed explanation with examples while following this roadmap, you can check out CSS tutorials on Learnify.

Stage 2: How CSS Behaves

After that, you’ll learn how CSS decides which styles actually get applied.

Inheritance, Specificity & Cascade

What inheritance means
Why CSS specificity matters
How the cascade decides the final applied style

!important and When to Avoid It

Why !important works
When to use it
When to avoid it
Better alternatives
Common mistakes

Stage 3: Layout Fundamentals

Once that makes sense, you can begin working on layout and structure.

Box Model & Layout

Margin (properties, values, shorthand)
Padding (properties, values, shorthand)
How padding affects width
Margin vs padding
The complete box model

Display Property

block
inline
inline-block
flex
inline-flex
grid
inline-grid
none
inherit
initial

Position Property

Static
Relative
Absolute
Fixed
Sticky

Stage 4: Modern Layout Systems

Then, you’re ready to learn modern layout tools like Flexbox and Grid.

Flexbox
Grid Layout
Centering (Vertical & Horizontal)
Z-index & Stacking Context

Stage 5: Visual Presentation

Next, after your layouts look good, you’ll learn how to make your designs visually appealing.

Typography

Fonts
Responsive typography
Media queries
clamp() for scalable typesetting
Text alignment / decoration / transform
Line height, letter spacing, word spacing
Text shadows

Visual Effects

Backgrounds
Borders & radius
Shadows
Opacity & color functions
Filters & blend modes
Handling text overflow
Object-fit & object-position

Stage 6: Responsive & Interactive CSS

At this point, you’ll make your designs responsive and interactive for all screen sizes.

Responsive Design

Media Queries
Container Queries
Viewport Units
Responsive Images

Animations

Stage 7: Advanced Concepts

Then you’ll learn advanced CSS features to write cleaner, smarter code.

Advanced CSS

CSS variables (syntax & benefits)
calc(), clamp(), min(), max()
Modern CSS nesting
Why nesting helps
How it works

Stage 8: Professional Standards

And finally, you’ll finish with best practices and accessibility to make your work professional and user-friendly.

Best Practices & Accessibility

BEM naming
DRY CSS
Proper focus states
prefers-reduced-motion
Maintaining color contrast
display: none vs visibility: hidden vs ARIA
Accessible responsive layouts
Semantic HTML + CSS
Avoiding unnecessary !important
Limiting fixed width/height
Using variables for consistency
Giving clear visual feedback
Preventing layout shifts

Prefer a Visual Roadmap?
You can also check out this step-by-step CSS roadmap in visual form here!

That’s all for today!

I hope you find this JavaScript roadmap helpful!

For paid collaboration, connect with me at: connect@shefali.dev

If you enjoy my work and want to support what I do:

👉 Become a Patreon supporter
👉 Or buy me a coffee

Every small gesture keeps me going! 💛

The Ultimate JavaScript Roadmap: Learn Step by Step

Shefali — Mon, 29 Sep 2025 05:41:29 +0000

To learn JavaScript, there’s so much to cover: basics, DOM, closures, async stuff, and more. But don’t worry, you’re in the right place, as I’ve put together a step-by-step JavaScript roadmap to guide you through everything in a logical order.

Let’s jump right into it!

Stage 1: Getting Started

Before you start, get comfortable with the basics:

Introduction: What JS is and why it’s awesome
Adding JS to HTML: Inline, internal, external scripts

💡 Tip: If you want a detailed explanation with examples while following this roadmap, you can check out JavaScript tutorials on Learnify.

Stage 2: Core Concepts

Next, focus on the building blocks of JavaScript:

Data Types: string, number, boolean, undefined, null, symbol, bigint
Variables: var, let, const
Operators: arithmetic, comparison, logical, assignment
Truthy & Falsy Values
Equality Operators: == vs ===, reference comparison
Console Methods

Stage 3: Control Flow & Loops

Now you can start controlling how your code runs:

Conditional Statements: if, else, else if, switch
Loops: for, while, do…while, for…of, for…in

Stage 4: Functions & Scope

Let’s dive into functions:

Functions: declarations, expressions, arrow functions
Function Parameters and Arguments
Scope: block vs function vs global
Hoisting
Type Conversion & Coercion

Stage 5: DOM & Events

Make your pages interactive:

DOM Manipulation & Events
Optional Chaining & Nullish Coalescing (?., ??)

Stage 6: Arrays & Objects

Handle structured data confidently:

Arrays & Methods: map, filter, reduce, forEach, find
Objects: creation, access, nested objects
Shallow vs Deep Copy
Map, Set, WeakMap, WeakSet
Destructuring & Spread/Rest Operators
Template Literals

Stage 7: ES6 Modules & Utilities

Level up your code:

ES6 Modules: import/export
Dates & Math
Error Handling: try…catch
Timers: setTimeout, setInterval

Stage 8: Asynchronous JS

Understand async operations:

Call Stack & Event Loop
Callback Functions
Promises: resolve, reject, .then, .catch
async / await
Fetch API
Error Handling in Async Code

Stage 9: Advanced Concepts & Patterns

Let’s look at the advanced stuff:

Object-Oriented Programming (OOP)
Closures
IIFE (Immediately Invoked Function Expressions)
Currying & Memoization
Debounce & Throttle
bind, call, apply
this keyword in depth
Event loop + microtasks/macrotasks
Generators & Iterators
Garbage Collection

Prefer a Visual Roadmap?
You can also check out this step-by-step JavaScript roadmap in visual form here!

That’s all for today!

I hope you find this JavaScript roadmap helpful!

For paid collaboration connect with me at: connect@shefali.dev

If you enjoy my work and want to support what I do:

👉 Become a Patreon supporter
👉 Or buy me a coffee

Every small gesture keeps me going! 💛

10+ Free Font Resources for Your Projects

Shefali — Mon, 22 Sep 2025 08:39:28 +0000

Fonts play a big role in your website design. They can make or break your design. In this post, I’ll share 10+ free font resources that you should know about. These fonts will help make your project look more professional and make the text easier to read.

Google Fonts

This is probably the most popular free font library. It provides over 1,800 fonts with an easy embed option for web projects.

1001FreeFonts

Despite the name, it has way more than 1,001 fonts, most of which are available for personal use, with some licensed for commercial projects.

Fontjoy

Perfect for designers who find it hard to match fonts. It helps you create font pairs automatically using AI.

Fontsly

A collection of cool and stylish fonts, with categories from simple ones to fancy decorative styles.

FontSpace

More than 150,000 free fonts shared by designers worldwide. You can preview them and download them easily.

AbstractFonts

A trusted site with thousands of free fonts sorted by categories.

FontZone

Has a big collection of quality fonts you can use for free, for both personal and commercial use.

DevFonts

Made for developers, this site offers fonts that work really well for coding and tech projects.

DaFont

A popular site for fun and creative fonts, perfect for posters, logos, and unique designs.

FontSquirrel

A great collection of free fonts that are safe to use for business. It also has a handy tool to identify fonts.

FontFabric

A font site with professional-quality fonts, and many of them are free to use.

That’s all for today!

For paid collaboration connect with me at : connect@shefali.dev

If you enjoy my work and want to support what I do:

👉 Become a Patreon supporter
👉 Or buy me a coffee

Every small gesture keeps me going! 💛

How to Create a Text Glitch Effect with CSS

Shefali — Mon, 15 Sep 2025 05:30:15 +0000

Want to make your text look cool with a glitch effect? In this post, I’ll show you how to create a text glitch effect using only CSS animations, no JavaScript needed!

It’s a fun way to add style to headings, banners, or any part of your website where you want that techy, glitchy look.

Let’s start building this cool text glitch effect step by step!

Step 1: Set Up the Basic HTML

<div class="text" title="Glitch">
  Glitch
</div>

Here we use a <div> with the class text.
The title attribute holds the text, which we’ll reuse in the animation.

Step 2: Style the Main Text

.text {
  font-size: 26px;
  color: #000;
  font-weight: bold;
  animation: text-animation 1s linear infinite;
}

This styles the text’s size, color, and makes it bold.
We apply the text-animation to move the text slightly, making it glitch.

Step 3: Create Two Layers with Pseudo-elements

.text:before,
.text:after {
  content: attr(title);
  position: absolute;
  left: 0;
}

We create two layers of text using ::before and ::after.
content: attr(title) takes the text from the title attribute and displays it.
Later, we’ll clip and animate them differently to make the glitch effect.

Step 4: Style the Top Layer

.text:before {
  animation: text-animation-top 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

We only show the top part of the text using clip-path.
The animation text-animation-top moves this layer in different directions.

Step 5: Style the Bottom Layer

.text:after {
  animation: text-animation-bottom 1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

We only show the bottom part of the text.
This layer has a slightly different animation speed to make the glitch feel more interesting.

Step 6: Animate the Whole Text

@keyframes text-animation {
  2%, 64% {
    transform: translate(2px, 0) skew(0deg);
  }
  4%, 60% {
    transform: translate(-2px, 0) skew(0deg);
  }
  62% {
    transform: translate(0, 0) skew(5deg);
  }
}

This animation makes the whole text move a little side to side and skew briefly.
These quick changes make it look like the text is shaking.

Step 7: Animate the Top Layer

@keyframes text-animation-top {
  2%, 64% {
    transform: translate(2px, -2px);
  }
  4%, 60% {
    transform: translate(-2px, 2px);
  }
  62% {
    transform: translate(13px, -1px) skew(-13deg);
  }
}

The top part of the text shakes and twists at certain times.
This creates the glitch burst effect.

Step 8: Animate the Bottom Layer

@keyframes text-animation-bottom {
  2%, 64% {
    transform: translate(-2px, 0);
  }
  4%, 60% {
    transform: translate(-2px, 0);
  }
  62% {
    transform: translate(-22px, 5px) skew(21deg);
  }
}

The bottom part moves in different directions at set intervals.
The randomness makes the glitch effect feel more natural.

Final Notes

These steps create a layered glitch animation using only CSS.
You can adjust the timing, movement, and clipping to make it stronger or more subtle.
Avoid using glitch effects on long blocks of text; they can become hard to read.
You can pair it with bold fonts to make it stand out more.
Use it sparingly on headings or call-to-action buttons to maintain user experience.
Check out CSSnippets for more UI components and effects you can easily integrate into your projects!

That’s all for today!

For paid collaboration, connect with me at: connect@shefali.dev

If you enjoy my work and want to support what I do:

👉 Become a Patreon supporter
👉 Or buy me a coffee

Every small gesture keeps me going! 💛

13 CSS Best Practices and Accessibility Tips for Developers

Shefali — Mon, 08 Sep 2025 15:09:15 +0000

When you write CSS, following best practices and making your site accessible helps your website look better, work well for everyone, and is easier to maintain.

In this post, I’ll share 13 CSS best practices and accessibility tips to help you do that.

Before we get started, don’t forget to subscribe to my newsletter!
Get the latest tips, tools, and resources to level up your web development skills delivered straight to your inbox. Subscribe here!

1. BEM Naming Methodology

BEM (Block Element Modifier) is a way to name your CSS classes so your code stays clean and easy to understand.

Block: The main part or component, like a button or header.
Element: A smaller part inside the block, like an icon inside a button.
Modifier: A special version or state, like a large button or a disabled button.

Example:

.button { /* Block: base button styles */ }

.button__icon { /* Element: icon inside button */ }

.button__large { /* Modifier: large version of button */ }

Using BEM makes your CSS organised and avoids confusing class names or accidental style conflicts.

2. DRY CSS (Don’t Repeat Yourself)

DRY means you don’t write the same CSS code again and again. Instead, create reusable classes and components.

For example, instead of making separate styles for each button, make one .button class and add modifiers for variations:

.button { padding: 10px; background: blue; }
.button__red { background: red; }

This saves time, reduces mistakes, and makes your code easier to update.

3. Focus States & Outline Management

Focus states show which element is selected when you use a keyboard (like pressing Tab). This is very important for people who don’t use a mouse.

Browsers usually add a blue outline to focused elements by default. Don’t remove this outline completely, it helps users know where they are on the page.

Instead, style the focus outline so it looks good but stays visible:

.button:focus {
  outline: 3px solid purple;
  outline-offset: 2px;
}

4. prefers-reduced-motion & Reduced Transparency

Some people feel dizzy or uncomfortable with too many animations or effects. You can respect their preference by checking if they want less motion.

Use the CSS media query:

@media (prefers-reduced-motion: reduce) {
  /* Turn off animations or transitions */
  .animated {
    animation: none;
    transition: none;
  }
}

Similarly, some users might prefer less transparency for better clarity. Avoid heavy transparent backgrounds if possible.

5. Color Contrast Best Practices

A good contrast between text and background makes your content easy to read for everyone, especially for people with poor eyesight.

Use dark text on a light background or light text on a dark background.
Check your colors using free online tools like WebAIM Contrast Checker.
Aim for a contrast ratio of at least 4.5:1 for normal text.

6. Visibility: display: none vs visibility: hidden vs ARIA

Sometimes you want to hide elements on your page, but the way you hide them affects accessibility:

display: none;

The element is completely removed from the page and is not visible to screen readers. Use this when you want to hide content from everyone.

visibility: hidden;

The element is invisible but still takes up space, and screen readers can still access it. Use this when you want to keep layout space but hide visually.

aria-hidden="true"

This tells screen readers to ignore the element but does not hide it visually. Use this to hide decorative elements from screen readers.

Choosing the right method depends on what users should or shouldn’t see or hear.

7. Accessible Responsive Layouts

Responsive design means your website looks good on phones, tablets, and desktops.

To make responsive layouts accessible:

Use flexible grids and CSS media queries to adjust content for different screen sizes.
Don’t rely only on color to convey information. Use icons, text, or shapes too.
Make buttons and links easy to tap on small screens by making them big enough.
Ensure keyboard users can navigate through content easily.

8. Use Semantic HTML with CSS

Write your HTML with proper tags like <button>, <nav>, <header>, <main>, and <footer>. CSS styles these elements, but good HTML structure improves accessibility by helping screen readers understand your page better.

9. Avoid Using !important

Using !important can make your CSS hard to maintain because it overrides other styles. Instead, try to write clear and specific selectors or use proper CSS structure like BEM to manage styles.

10. Limit Use of Fixed Widths and Heights

Fixed sizes can break layouts on small or large screens. Use relative units like %, em, rem, or vw/vh to make your design flexible and more accessible.

11. Use CSS Variables for Consistency

CSS variables (--primary-color, --font-size) help keep your styles consistent and easy to update. Changing a variable once updates every place it’s used.

:root {
  --primary-color: #007bff;
  --font-size: 16px;
}

.button {
  background-color: var(--primary-color);
  font-size: var(--font-size);
}

12. Provide Clear Visual Feedback

Make sure buttons, links, and form inputs change visually when hovered or clicked. This helps all users understand what’s interactive and what’s happening.

.button:hover {
  background-color: #0056b3;
}

13. Avoid Content Shifts

When your page loads or resizes, try to avoid layout shifts (like text or buttons jumping around). This helps people with cognitive disabilities and improves user experience.

Use CSS properties like min-height or reserve space for images to reduce shifts.

By following these CSS best practices and focusing on accessibility, your website will be easier to build, easier to maintain, and usable by everyone, including people with disabilities.

That’s all for today!

By the way, if you ever need free HTML website templates, I recommend checking out HTMLrev, I use it all the time. And when I’m looking for web design inspiration, Websitevice is one of my go-to resources.

For paid collaboration connect with me at : connect@shefali.dev

If you enjoy my work and want to support what I do:

👉 Become a Patreon supporter
👉 Or buy me a coffee

Every small gesture keeps me going! 💛

Stop Repeating CSS! Learn CSS Nesting

Shefali — Mon, 01 Sep 2025 04:14:44 +0000

CSS Nesting lets you write CSS rules inside other CSS rules. This makes your code cleaner, shorter, and easier to understand.

Think of it like how HTML elements are placed inside each other. For example, a <ul> inside a <nav>.

CSS Nesting works the same way, so you write styles for child elements inside the parent’s styles.

Why use CSS Nesting?

Keeps your CSS organized: You group styles that belong together.
Makes your code easier to read: You can see the relationship between elements clearly.
Saves time: You write less repeating code.

How CSS Nesting Works

Here’s a quick example:

nav {
  background: #333;
  ul {
    list-style: none;
    li {
      color: white;
      padding: 10px;
    }
  }
}

Here,

The <nav> element has a dark background (#333).
Inside <nav>, all <ul> lists will have no bullet points (list-style: none).
Inside those <ul> lists, every <li> (list item) will have white text and 10 pixels of padding.

Because the styles for ul and li are written inside the nav block, these styles only apply to ul and li elements inside the nav. This makes sure your CSS affects exactly the parts of your page you want, without extra code.

Browser Support

Good news! CSS Nesting now works in all major browsers:

Chrome: from v112 (April 2023)
Edge: from v112 (April 2023)
Safari: from v16.5 (May 2023)
Firefox: from v117 (August 2023)
Opera + Mobile browsers: fully supported too

So yes, it’s safe to use CSS Nesting in your projects today without worrying about compatibility.

Check browser support for CSS nesting!

Final Thoughts

CSS Nesting is such a handy feature. It:

Keeps your CSS clean and organized
Saves you from writing the same code again and again
Matches the way your HTML is structured

Give it a try in your next project and let me know how it goes for you in the comments!👇🏻

That’s all for today!

For paid collaboration, connect with me at: connect@shefali.dev

If you enjoy my work and want to support what I do:

👉 Become a Patreon supporter
👉 Or buy me a coffee

Every small gesture keeps me going! 💛

19 JavaScript One-Liners That’ll Blow Your Mind

Shefali — Mon, 25 Aug 2025 07:46:40 +0000

Sometimes the shortest code is the most powerful. JavaScript one-liners are practical, clean, and make your code easier to read.

In this post, I’ll share 19 powerful JavaScript one-liners you’ll want to bookmark.

Before we get started, don’t forget to subscribe to my newsletter!
Get the latest tips, tools, and resources to level up your web development skills delivered straight to your inbox. Subscribe here!

Now, let’s jump right into it!

1. Capitalize Text

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);

// Example:
console.log(capitalize("hello")); // Output: Hello

This is useful for formatting names, headings, or labels.

2. Compare Arrays and Objects for Equality

const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);

// Examples:
console.log(isEqual([1, 2, 3], [1, 2, 3])); // Output: true
console.log(isEqual([1, 2], [2, 1])); // Output: false — different order
console.log(isEqual({ a: 1, b: 2 }, { a: 1, b: 2 })); // Output: true — identical objects
console.log(isEqual({ a: 1, b: 2 }, { b: 2, a: 1 })); // Output: false — key order matters in JSON.stringify
console.log(isEqual({ a: 1, b: 2 }, { a: 1 })); // Output: false — missing property
console.log(isEqual(null, null)); // Output: true — both null
console.log(isEqual(undefined, undefined)); // Output: false — JSON.stringify(undefined) is undefined
console.log(isEqual(42, 42)); // Output: true — primitives equal
console.log(isEqual(42, "42")); // Output: false — different types
console.log(isEqual([1, 2, { x: 3 }], [1, 2, { x: 3 }])); // Output: true — nested object

This is useful for detecting state changes or deep comparisons.

3. Check If an Array Is Empty

const isEmpty = arr => Array.isArray(arr) && arr.length === 0;

// Examples:
console.log(isEmpty([])); // Output: true (empty array)
console.log(isEmpty([1, 2, 3])); // Output: false (non-empty array)
console.log(isEmpty('')); // Output: false (string, not an array)
console.log(isEmpty(null)); // Output: false (null)
console.log(isEmpty({})); // Output: false (object, not an array)
console.log(isEmpty(undefined)); // Output: false (undefined)
console.log(isEmpty([undefined])); // Output: false (array with one element)
console.log(isEmpty([null])); // Output: false (array with one element)

This is useful for showing fallback UIs when there’s no data.

4. Check If a Number Is Even

const isEven = n => !(n % 2);

// Example:
console.log(isEven(7)); // Output: false
console.log(isEven(2)); // Output: true
console.log(isEven(0)); // Output: true 
console.log(isEven(-4)); // Output: true
console.log(isEven(-3)); // Output: false
console.log(isEven(1.5)); // Output: false 
console.log(isEven("4")); // Output: true (string coerced to number 4)
console.log(isEven("abc")); // Output: true (NaN % 2 = NaN, !NaN is true — unexpected!)

This is useful for conditional logic, games, and filters.

5. Copy to Clipboard

const copy = text => navigator.clipboard.writeText(text);

This is useful for copying code, URLs, or promo codes with a click.

6. Detect Dark Mode

const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

// Example:
console.log(isDark); // Output: true

This returns true if the user prefers dark mode, and useful for auto-switch themes based on OS settings.

7. Get Day Name from Date

const getDay = date => new Date(date).toLocaleDateString('en-US', { weekday: 'long' });

// Examples:
console.log(getDay('2025-07-26')); // Output: Saturday
console.log(getDay('2025-07-27')); // Output: Sunday
console.log(getDay(new Date())); // Output: Current day name, e.g., "Saturday"
console.log(getDay('invalid-date')); // Output: Invalid Date

This is useful for calendars, task reminders, and scheduling apps.

8. Get a Random Element

const randomItem = arr => arr[Math.floor(Math.random() * arr.length)];

// Example:
const colors = ['red', 'green', 'blue', 'yellow'];
console.log(randomItem(colors)); // Output: yellow
console.log(randomItem(colors)); // Output: red
console.log(randomItem(colors)); // Output: green

This picks a random item from an array, and this is useful for random quotes, colors, tips, or products.

9. Get Query Parameters as Object

const getParams = url => Object.fromEntries(new URLSearchParams(new URL(url).search).entries());

// Examples:

// Basic URL with parameters
console.log(getParams('https://example.com?name=Shefali&lang=js')); // Output: { name: "Shefali", lang: "js" }

// URL with empty parameters
console.log(getParams('https://example.com?foo=&bar=123')); // Output: { foo: "", bar: "123" }

// URL with no parameters
console.log(getParams('https://example.com')); // Output: { }

// URL with encoded characters
console.log(getParams('https://example.com?search=hello%20world')); // Output: { search: "hello world" }

This is useful for reading filters, UTM tags, or search queries.

10. Insert Element at a Specific Position

const insertAt = (arr, val, i) => [...arr.slice(0, i), val, ...arr.slice(i)];

// Examples:
console.log(insertAt([1, 2, 3], 99, 1)); // Output: [1, 99, 2, 3]
console.log(insertAt(['a', 'b', 'c'], 'x', 0)); // Output: ['x', 'a', 'b', 'c']
console.log(insertAt([true, false], true, 2)); // Output: [true, false, true]
console.log(insertAt([], 'start', 0)); // Output: ['start']

This will insert val into arr at index i and useful for reordering lists, inserting dynamic content.

11. Merge Two Arrays

const merge = (a, b) => [...a, ...b];

// Examples:
console.log(merge([1, 2], [3, 4]));            // Output: [1, 2, 3, 4]
console.log(merge([], [1, 2]));                // Output: [1, 2]
console.log(merge([1, 2], []));                // Output: [1, 2]
console.log(merge([], []));                    // Output: []
console.log(merge(['a'], ['b', 'c']));         // Output: ['a', 'b', 'c']
console.log(merge([true, false], [false]));    // Output: [true, false, false]

This is useful for merging fetched results or local + remote data.

12. Generate a Random Hex Color

const randomColor = () => '#' + Math.floor(Math.random() * 16777215).toString(16);

// Examples:
console.log(randomColor()); // Output: #b35d91
console.log(randomColor()); // Output: #94a444
console.log(randomColor()); // Output: #16b3ce

This is useful for creating random backgrounds, themes, and colorful elements.

13. Remove Duplicates from an Array

const unique = arr => [...new Set(arr)];

// Examples:
console.log(unique([1, 2, 2, 3, 4, 4])); // Output: [1, 2, 3, 4]
console.log(unique(['a', 'b', 'a', 'c'])); // Output: ['a', 'b', 'c']
console.log(unique([true, false, true])); // Output: [true, false]
console.log(unique([1, '1', 1])); // Output: [1, '1'] (different types)
console.log(unique([])); // Output: []

This is useful for tags, filters, and user input cleanup.

14. Reverse a String

const reverse = str => str.split('').reverse().join('');

// Example:
console.log(reverse("hello")); // Output: olleh

This is useful for fun puzzles, palindrome checks, and string transforms.

15. Sleep / Delay Execution

const sleep = ms => new Promise(res => setTimeout(res, ms));

This will wait for a given number of milliseconds and is useful for simulating loading, pausing between async steps.

16. Shuffle an Array

const shuffle = arr => arr.sort(() => Math.random() - 0.5);

// Examples:
console.log(shuffle([1, 2, 3, 4, 5])); // Output: [ 1, 4, 2, 5, 3 ]
console.log(shuffle(['a', 'b', 'c'])); // Output: [ "a", "b", "c" ]

This rearranges array elements randomly and is useful for quiz questions, game cards, and featured content.

17. Swap Two Variables

[a, b] = [b, a];

// Example:
let a = 5, b = 10;
[a, b] = [b, a];
console.log(a); // Output: 10
console.log(b); // Output: 5

This is useful for cleaner logic during sorting or toggling.

18. Flatten an Array

const flat = arr => arr.flat(Infinity);

// Example:
console.log(flat([1, [2, [3, [4]]]])); // Output: [ 1, 2, 3, 4 ]

This flattens deeply nested arrays into one and is useful for simplifying data from APIs or recursive logic.

19. Check for Palindrome

const isPalindrome = str => str === str.split('').reverse().join('');

// Examples:
console.log(isPalindrome('madam')); // Output: true
console.log(isPalindrome('racecar')); // Output: true
console.log(isPalindrome('hello')); // Output: false

This returns true if the string reads the same forward and backward, and is useful for interview questions, games, and input validation.

That’s all for today!

For paid collaboration, connect with me at: connect@shefali.dev

If you enjoy my work and want to support what I do:

👉 Become a Patreon supporter
👉 Or buy me a coffee

Every small gesture keeps me going! 💛