DevFlow

Filter posts:
Show

Show

showmma-sho • 4 days ago

awsome

Emily Watson

Emily Watson

🎨

emilycodes • about 2 months ago

CSS Grid vs Flexbox: Use Grid for 2D layouts (rows AND columns), Flexbox for 1D layouts (either rows OR columns). Both are powerful! 💪

csslayoutgridflexbox
Jessica Lee

Jessica Lee

💡

jessdev • about 2 months ago

Authentication doesn't have to be complicated! Next-Auth makes it so easy to add social login to your apps.

TYPESCRIPT
1import NextAuth from 'next-auth'
2import GoogleProvider from 'next-auth/providers/google'
3
4export default NextAuth({
5  providers: [
6    GoogleProvider({
7      clientId: process.env.GOOGLE_CLIENT_ID,
8      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
9    })
10  ]
11})
authnextauthsecurity
Alex Johnson

Alex Johnson

🚀

alexdev • about 2 months ago

Hot take: Writing tests isn't just about catching bugs - it's about designing better APIs and understanding your code better. 🧪

testingdevelopmentphilosophy
Mike Rodriguez

Mike Rodriguez

⚡

mikedev • about 2 months ago

Loving the new features in ES2024! Top-level await and the Temporal API are game changers for modern JavaScript development.

JAVASCRIPT
1// Top-level await
2const config = await import('./config.json', { assert: { type: 'json' } });
3
4// Temporal API (when it arrives)
5const now = Temporal.Now.plainDateTimeISO();
6const tomorrow = now.add({ days: 1 });
javascriptes2024temporalfeatures
Tom Wilson

Tom Wilson

🛠️

tomcodes • about 2 months ago

Docker tip: Use multi-stage builds to keep your production images lean! Here's how I reduced my Node.js image from 1GB to 200MB.

DOCKERFILE
1# Multi-stage Dockerfile
2FROM node:18-alpine AS builder
3WORKDIR /app
4COPY package*.json ./
5RUN npm ci --only=production
6
7FROM node:18-alpine AS runtime
8WORKDIR /app
9COPY --from=builder /app/node_modules ./node_modules
10COPY . .
11EXPOSE 3000
12CMD ["npm", "start"]
dockeroptimizationdevops
Alex Johnson

Alex Johnson

🚀

alexdev • about 2 months ago

Just discovered the power of React Server Components. The mental model shift is real, but the performance benefits are incredible! 🚀

TYPESCRIPT
1// Server Component - runs on server
2async function UserProfile({ userId }: { userId: string }) {
3  const user = await fetchUser(userId); // Direct DB call
4  
5  return (
6    <div>
7      <h1>{user.name}</h1>
8      <ClientComponent user={user} />
9    </div>
10  );
11}
reactserver-componentsperformance
Emily Watson

Emily Watson

🎨

emilycodes • about 2 months ago

Working on a new React component library. Here's a sneak peek of the Button component with variants and sizes!

TYPESCRIPT
1interface ButtonProps {
2  variant?: 'primary' | 'secondary' | 'outline';
3  size?: 'sm' | 'md' | 'lg';
4  children: React.ReactNode;
5}
6
7export const Button = ({ variant = 'primary', size = 'md', children, ...props }: ButtonProps) => {
8  return <button className={`btn btn-${variant} btn-${size}`} {...props}>{children}</button>;
9};
reactcomponentsuilibrary
Jessica Lee

Jessica Lee

💡

jessdev • about 2 months ago

Quick tip: Always use TypeScript strict mode in your projects. It catches so many bugs before they reach production! 🐛➡️✅

typescripttipsdevelopment
David Kim

David Kim

🔥

davidtech • about 2 months ago

Database optimization tip: Use indexes wisely! They speed up reads but slow down writes. Profile your queries first! 📊

databaseperformanceoptimization
Jessica Lee

Jessica Lee

💡

jessdev • about 2 months ago

Just deployed my first full-stack app! 🎉 Built with Next.js, PostgreSQL, and Drizzle ORM. The learning curve was steep but totally worth it!

TYPESCRIPT
1// Simple Next.js API route
2export async function GET() {
3  const users = await db.select().from(usersTable);
4  return Response.json(users);
5}
nextjspostgresqldrizzlefullstack