DEV Community: Walid Chahmi

Last minute Frontend interview checklist✅

Walid Chahmi — Thu, 01 Jan 2026 21:52:58 +0000

Here are some key frontend concepts that can serve as a useful checklist for interview preparation:

Pagination and Virtualization
Debouncing
Websocket and REST APIs
Authentication vs Authorization
Redux and Zustand
Lazy Loading and Code Splitting
Bundle Size Optimization
Tree Shaking
Memoization (useMemo, useCallback)
Caching (Client + Server)
Core Web Vitals (LCP, INP, CLS)
Cross Browser Compatibility
Suspense (React)
Image Optimization (WebP, AVIF)
Accessibility (a11y)
Micro-frontend Architecture
Testing - Jest, Playwright

Most websites don’t fail because of bad design.

Walid Chahmi — Thu, 01 Jan 2026 21:51:51 +0000

They fail because of small frontend mistakes no one notices.
Here are 5 fixes that instantly improve conversions:
1️⃣ Buttons above the fold
If users have to scroll to take action, you’ve already lost some of them.
2️⃣ One primary action per page
More buttons ≠ more conversions.
Clarity always wins.
3️⃣ Perceived speed > raw speed
Skeleton loaders & smooth transitions make sites feel faster.
4️⃣ Readable spacing beats fancy fonts
White space increases comprehension more than any font choice.
5️⃣ Mobile-first layouts
Over 70% of users won’t forgive a broken mobile experience.
This is frontend work most teams ignore — and it costs them money.
If you want a website that looks good and converts,
DM me. I’m a freelance frontend developer.

Why React Is a Game-Changer for Modern Web Development

Walid Chahmi — Thu, 01 Jan 2026 21:25:52 +0000

🚀 Why React Is a Game-Changer for Modern Web Development

React has become one of the most powerful and trusted tools for building modern web applications — and for good reason. 💡

From component-based architecture to scalability, SEO optimization, and reusable code, React helps developers build fast, secure, and user-friendly applications with ease.

✨ Key benefits of React include:
✔ Faster development with reusable components
✔ Scalable architecture for growing applications
✔ Better performance and app-like user experience
✔ Strong support for SEO and PWAs
✔ Cross-platform development using React Native
✔ Backed by a huge developer community and industry leaders

Whether you’re a student, developer, or business, learning React is an investment in the future of web development. 🌐

📌 Consistency, performance, and scalability — React delivers it all.

System Design Quick Guide

Walid Chahmi — Thu, 01 Jan 2026 18:46:51 +0000

System Design is the language of scale, and every engineer needs to speak it.

I’ve created this 1-page Quick Guide to help you decode complex system design topics at a glance.

Why does it matter?

✅ Big tech interviews are incomplete without system design
✅ Real-world systems break if you ignore concepts like latency, replication, or retries
✅ And whether you're working on backend, infra, or cloud - system design is the glue that holds your solution together

This visual distills everything into 5 core sections:

🧠 Core Concepts — From CAP theorem to vertical vs horizontal scaling
🧩 Key Components & Tools — Load balancers, databases, object stores, CDN, containers, service mesh
⚙️ Reliability & Fault Tolerance — Health checks, chaos testing, retries, failover logic
📊 Monitoring & Observability — Tracing, logging, metrics, dashboards
📐 Design Patterns — Circuit breaker, BFF, bulkhead, event-driven flows

You’ll also find foundational system terms like rate limiting, cold start, session stickiness, service discovery, and more - all mapped for clarity.

🧭 Whether you're a:

Developer preparing for interviews

Tech lead managing architecture

Or someone transitioning to system design

This guide will help you think better, build smarter, and scale with confidence.
👉 Save, share, and comment below if you want deep dives on any of these blocks.
Let’s make system design simple, and scalable.

How to Make Any CSS Element Resizable 🔧 (Without JavaScript):

Walid Chahmi — Thu, 01 Jan 2026 18:43:45 +0000

Wanna let users resize a box by dragging its edge?

Here’s how it works:

🔍 The resize property

By default, elements aren't resizable.

But if you want to make them resizable (like a textarea), you can use:

resize: both;
overflow: scroll;

The second line is crucial. Resize won’t work unless you also set overflow to something scrollable (like auto or scroll).

🧪 The 3 values of resize

resize: both;
➤ You can resize horizontally and vertically.

resize: horizontal;
➤ Only resize left ↔️ right.

resize: vertical;
➤ Only resize up ↕️ down.

Now users can grab the bottom-right corner and drag to resize it.

The only limitation I found is that you can only resize by grabbing the corners, not the sides.

But it could be useful in many cases, where we don't need that functionality.

So, I'll leave that up to you.