DAILY NEWS

Stay Ahead, Stay Informed – Every Day

Advertisement
TECH & AI
To Level Up Your React Workflow: 3 Essential VS Code Basic Extensions Every Web Developer Needs to Use
jackminion 0



If you are a React developer, your productivity is heavily influenced by your tools. While VS Code is powerful out of the box, the right extensions can transform it from a simple text editor into a high-performance IDE tailored for modern web development.

To take your coding experience to the next level, here are three “must-have” VS Code extensions that will save you hours of debugging and boilerplate typing.

1. Tailwind CSS IntelliSense 🎨

Tailwind CSS has become the industry standard for styling modern React applications. However, remembering every single utility class can be a challenge.

Why you need it:

Auto-Suggestions: As you start typing a class name, it provides a dropdown of available Tailwind utilities.

Color Previews: No more guessing what bg-t looks like. A small color swatch appears right in your gutter or next to the code.

Faster Coding: It reduces the need to constantly flip back and forth between your code and the Tailwind documentation.

2. ES7+ React/Redux/React-Native Snippets ⚡

Stop writing export default function… manually every single time you create a new file. This extension is a massive time-saver for repetitive React patterns.

The Power Move:After installing this, you can simply type a short command like rafce (React Arrow Function Component Export) and hit Enter.

Result: It instantly generates a full, boilerplate-ready React component with imports and exports included. Whether you are working on hooks, Redux, or React Native, these snippets make your development cycle significantly faster.

3. ESLint 🔍

Writing code is easy; maintaining clean, bug-free code is the hard part. ESLint is your first line of defense against “silly” mistakes that break your build.

Why you need it:

Error Detection: It highlights potential bugs and syntax errors in real-time with red underlines before you even save the file.

Clean Code Standards: It enforces consistent coding styles across your project, ensuring your code remains professional and readable.

Auto-Fixing: Many common linting errors can be fixed automatically on save, keeping your focus on logic rather than formatting.

Final Thoughts 💡

By integrating Tailwind CSS IntelliSense, ES7+ Snippets, and ESLint into your VS Code setup, you aren’t just coding—you’re coding smarter. These tools eliminate friction, reduce errors, and allow you to focus on building amazing user experiences.

What’s your favorite VS Code extension for React? Let me know in the comments below! 👇



Source link

TECH & AI
I built a startup waitlist landing page in Next.js 15 — here are all the decisions I made
jackminion 0



I’ve been building Next.js templates as a side project and selling them on Gumroad. This weekend I shipped the fourth one: Orbit, a startup launch and waitlist landing page.

Here’s a breakdown of every technical decision I made.

Why Next.js 15 with CSS Modules (no Tailwind)

Most templates use Tailwind. That’s fine for customization, but it adds a compilation step and a learning curve for buyers who just want clean CSS they can read and edit.

CSS Modules give you:

Locally scoped class names (no conflicts)
Standard CSS syntax (no utility memorization)
Zero runtime cost
Works with Next.js out of the box

The tradeoff is more verbose than Tailwind for repetitive utilities. Worth it for a product you’re selling.

The bento grid — 1px gap trick

The features section uses CSS Grid with grid-template-columns: repeat(3, 1fr). The first card spans 2 columns via grid-column: span 2.

.bento {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(–color-border-subtle); /* gap IS the border */
border-radius: var(–radius-lg);
overflow: hidden;
}

.bento .card:first-child {
grid-column: span 2;
}

Enter fullscreen mode

Exit fullscreen mode

Instead of adding borders to each card, I set the grid’s background to the border color and use 1px gaps. The cards themselves have no borders. This gives perfectly consistent grid lines with zero extra markup.

Count-up animation with IntersectionObserver

The metrics section triggers a count-up when the section enters the viewport:

const observer = new IntersectionObserver(((entry)) => {
if (entry.isIntersecting && !started.current) {
started.current = true
const startTime = performance.now()

const tick = (now: number) => {
const progress = Math.min((now – startTime) / duration, 1)
const eased = 1 – Math.pow(1 – progress, 3) // cubic ease-out
setCount(Math.round(eased * end))
if (progress 1) requestAnimationFrame(tick)
}

requestAnimationFrame(tick)
}
}, { threshold: 0.4 })

Enter fullscreen mode

Exit fullscreen mode

The started ref prevents re-triggering if the user scrolls away and back. Cubic ease-out feels much more natural than linear. No library — 30 lines of TypeScript.

Infinite logo marquee (CSS-only)

.row {
display: flex;
gap: 64px;
width: max-content;
animation: marquee 24s linear infinite;
}

@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}

Enter fullscreen mode

Exit fullscreen mode

The key: duplicate the logos array in the component and animate exactly -50% (half the total width). Seamless loop. Edge fade via mask-image on the parent:

.track {
mask-image: linear-gradient(
to right,
transparent 0%, black 12%, black 88%, transparent 100%
);
}

Enter fullscreen mode

Exit fullscreen mode

Single content file

All editable content — name, copy, nav links, logos, features, metrics, testimonials, FAQ — lives in src/lib/constants.ts. The buyer touches one file and the whole page updates. No hunting through components.

Design tokens in globals.css

8 variables to rebrand the entire template:

:root {
–color-accent: #f59e0b; /* change this → full rebrand */
–color-bg: #09090b;
–font-display: ‘Sora’, sans-serif;
–font-body: ‘IBM Plex Sans’, sans-serif;
–radius-lg: 16px;
}

Enter fullscreen mode

Exit fullscreen mode

Connecting the waitlist form

The form ships with a simulated delay. Replace it with your stack:

/* ConvertKit */
await fetch(`https://api.convertkit.com/v3/forms/${FORM_ID}/subscribe`, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({ api_key: KEY, email }),
})

/* Loops */
await fetch(‘https://app.loops.so/api/v1/contacts/create’, {
method: ‘POST’,
headers: { Authorization: `Bearer ${KEY}`, ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({ email }),
})

Enter fullscreen mode

Exit fullscreen mode

Live demo: https://orbit-landing-iota.vercel.app/

The template is available on Gumroad for $29: https://devmaya.gumroad.com/l/orbit



Source link