<h1>Syntax Highlighting Test</h1>
This post demonstrates syntax highlighting with various programming languages using highlight.js and the beautiful Dracula theme.
<h2>JavaScript</h2>
<pre><code class="hljs language-javascript">function greetUser(name) {
 const greeting = `Hello, ${name}!`;
 console.log(greeting);

 return {
 message: greeting,
 timestamp: new Date().toISOString(),
 success: true,
 };
}

// Usage example
const result = greetUser("World");
console.log(result);
</code></pre>
<h2>TypeScript</h2>
<pre><code class="hljs language-typescript">interface User {
 id: number;
 name: string;
 email: string;
 isActive: boolean;
}

class UserService {
 private users: User[] = [];

 addUser(user: Omit&#x3C;User, "id">): User {
 const newUser: User = {
 id: this.users.length + 1,
 ...user,
 };

 this.users.push(newUser);
 return newUser;
 }

 getUserById(id: number): User | undefined {
 return this.users.find((user) => user.id === id);
 }
}
</code></pre>
<h2>Python</h2>
<pre><code class="hljs language-python">def fibonacci(n):
 """Generate Fibonacci sequence up to n terms."""
 if n &#x3C;= 0:
 return []
 elif n == 1:
 return [0]
 elif n == 2:
 return [0, 1]

 sequence = [0, 1]
 for i in range(2, n):
 next_value = sequence[i-1] + sequence[i-2]
 sequence.append(next_value)

 return sequence

# Example usage
fib_sequence = fibonacci(10)
print(f"Fibonacci sequence: {fib_sequence}")
</code></pre>
<h2>CSS</h2>
<pre><code class="hljs language-css">.syntax-highlight {
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 border-radius: 8px;
 padding: 1.5rem;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 transition: all 0.3s ease;
}

.syntax-highlight:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
 .syntax-highlight {
 padding: 1rem;
 border-radius: 6px;
 }
}
</code></pre>
<h2>HTML</h2>
<pre><code class="hljs language-html">&#x3C;!DOCTYPE html>
&#x3C;html lang="en">
 &#x3C;head>
 &#x3C;meta charset="UTF-8" />
 &#x3C;meta name="viewport" content="width=device-width, initial-scale=1.0" />
 &#x3C;title>Syntax Highlighting Demo&#x3C;/title>
 &#x3C;link rel="stylesheet" href="styles.css" />
 &#x3C;/head>
 &#x3C;body>
 &#x3C;header class="main-header">
 &#x3C;h1>Welcome to My Blog&#x3C;/h1>
 &#x3C;nav>
 &#x3C;ul>
 &#x3C;li>&#x3C;a href="#home">Home&#x3C;/a>&#x3C;/li>
 &#x3C;li>&#x3C;a href="#about">About&#x3C;/a>&#x3C;/li>
 &#x3C;li>&#x3C;a href="#contact">Contact&#x3C;/a>&#x3C;/li>
 &#x3C;/ul>
 &#x3C;/nav>
 &#x3C;/header>

 &#x3C;main>
 &#x3C;article class="blog-post">
 &#x3C;h2>Hello World!&#x3C;/h2>
 &#x3C;p>This is a sample blog post with syntax highlighting.&#x3C;/p>
 &#x3C;/article>
 &#x3C;/main>

 &#x3C;script src="script.js">&#x3C;/script>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
<h2>JSON</h2>
<pre><code class="hljs language-json">{
 "name": "syntax-highlighting-demo",
 "version": "1.0.0",
 "description": "A demo of syntax highlighting with highlight.js",
 "main": "index.js",
 "scripts": {
 "start": "node index.js",
 "dev": "nodemon index.js",
 "build": "webpack --mode production",
 "test": "jest"
 },
 "dependencies": {
 "express": "^4.18.0",
 "highlight.js": "^11.9.0"
 },
 "devDependencies": {
 "nodemon": "^2.0.0",
 "jest": "^29.0.0"
 },
 "keywords": ["syntax", "highlighting", "demo"],
 "author": "Developer",
 "license": "MIT"
}
</code></pre>
<h2>Bash/Shell</h2>
<pre><code class="hljs language-bash">#!/bin/bash

# Deploy script for static site
echo "Starting deployment process..."

# Build the project
npm run build

# Check if build was successful
if [ $? -eq 0 ]; then
 echo "✅ Build successful!"

 # Deploy to production
 rsync -avz --delete ./out/ user@server:/var/www/html/

 echo "🚀 Deployment complete!"
else
 echo "❌ Build failed!"
 exit 1
fi
</code></pre>
This demonstrates the beautiful Dracula theme syntax highlighting across multiple programming languages!

Syntax Highlighting Test

<h1>Getting Started with Next.js and Static Site Generation</h1>
Static Site Generation (SSG) has become increasingly popular for building fast, SEO-friendly websites. Next.js makes SSG incredibly easy with built-in support and powerful features that help you create performant web applications.
<h2>What is Static Site Generation?</h2>
Static Site Generation is a method of building websites where pages are pre-rendered at build time, rather than on each request. This results in:
<ul>
<li>Faster loading times - No server processing required</li>
<li>Better SEO - Search engines can easily crawl pre-rendered HTML</li>
<li>Improved security - No server-side vulnerabilities</li>
<li>Better caching - Static files can be cached globally</li>
</ul>
<h2>Setting Up SSG with Next.js</h2>
Next.js provides two main functions for static generation:
<h3>getStaticProps</h3>
Use <code>getStaticProps</code> to fetch data at build time:
<pre><code class="hljs language-javascript">export async function getStaticProps() {
 const data = await fetchData();

 return {
 props: {
 data,
 },
 };
}
</code></pre>
<h3>getStaticPaths</h3>
For dynamic routes, use <code>getStaticPaths</code> to specify which paths to pre-render:
<pre><code class="hljs language-javascript">export async function getStaticPaths() {
 const paths = await getAllPostSlugs();

 return {
 paths,
 fallback: false,
 };
}
</code></pre>
<h2>Benefits for Blog Sites</h2>
For content-heavy sites like blogs, SSG offers several advantages:
<ol>
<li>Performance: Pages load instantly since they're pre-built</li>
<li>SEO: Perfect for content that needs to be indexed</li>
<li>Deployment: Easy to deploy to CDNs and static hosts</li>
<li>Cost: Often cheaper than dynamic hosting solutions</li>
</ol>
<h2>Conclusion</h2>
Next.js static site generation is perfect for blogs, portfolios, and documentation sites. It combines the developer experience of React with the performance benefits of static sites.
Ready to get started? Check out the <a href="https://nextjs.org/docs">Next.js documentation</a> for more detailed guides and examples.

Getting Started with Next.js and Static Site Generation

<h1>Building Modern Web Applications with React and TypeScript</h1>
TypeScript has become an essential tool for React developers who want to build more reliable and maintainable applications. In this post, we'll explore how TypeScript enhances the React development experience and share some best practices.
<h2>Why TypeScript with React?</h2>
TypeScript brings several key benefits to React development:
<h3>Type Safety</h3>
TypeScript catches errors at compile-time rather than runtime, preventing many common bugs before they reach production.
<pre><code class="hljs language-typescript">interface UserProps {
 name: string;
 email: string;
 isActive: boolean;
}

const UserCard: React.FC&#x3C;UserProps> = ({ name, email, isActive }) => {
 return (
 &#x3C;div className={`user-card ${isActive ? "active" : "inactive"}`}>
 &#x3C;h3>{name}&#x3C;/h3>
 &#x3C;p>{email}&#x3C;/p>
 &#x3C;/div>
 );
};
</code></pre>
<h3>Better Developer Experience</h3>
Modern IDEs provide excellent autocomplete, refactoring tools, and inline documentation when using TypeScript.
<h3>Self-Documenting Code</h3>
TypeScript interfaces and types serve as living documentation for your components and data structures.
<h2>Best Practices</h2>
<h3>1. Use Proper Component Typing</h3>
Always type your component props and state:
<pre><code class="hljs language-typescript">interface Props {
 title: string;
 onSubmit: (data: FormData) => void;
 children?: React.ReactNode;
}

const MyComponent: React.FC&#x3C;Props> = ({ title, onSubmit, children }) => {
 // Component implementation
};
</code></pre>
<h3>2. Leverage Union Types</h3>
Use union types for props that can accept multiple value types:
<pre><code class="hljs language-typescript">interface ButtonProps {
 variant: "primary" | "secondary" | "danger";
 size: "small" | "medium" | "large";
}
</code></pre>
<h3>3. Type Your Hooks</h3>
Custom hooks should be properly typed for better reusability:
<pre><code class="hljs language-typescript">interface UseApiResult&#x3C;T> {
 data: T | null;
 loading: boolean;
 error: string | null;
}

function useApi&#x3C;T>(url: string): UseApiResult&#x3C;T> {
 // Hook implementation
}
</code></pre>
<h2>Setting Up TypeScript with React</h2>
Getting started is easier than ever:
<ol>
<li>
Create a new TypeScript React app:
<pre><code class="hljs language-bash">npx create-react-app my-app --template typescript
</code></pre>
</li>
<li>
Add TypeScript to an existing project:
<pre><code class="hljs language-bash">npm install --save typescript @types/node @types/react @types/react-dom
</code></pre>
</li>
<li>
Configure TypeScript:
Create a <code>tsconfig.json</code> file with appropriate settings for React development.
</li>
</ol>
<h2>Common Patterns</h2>
<h3>Event Handlers</h3>
Type your event handlers correctly:
<pre><code class="hljs language-typescript">const handleClick = (event: React.MouseEvent&#x3C;HTMLButtonElement>) => {
 // Handle click
};

const handleChange = (event: React.ChangeEvent&#x3C;HTMLInputElement>) => {
 // Handle input change
};
</code></pre>
<h3>Refs</h3>
Use proper typing for refs:
<pre><code class="hljs language-typescript">const inputRef = useRef&#x3C;HTMLInputElement>(null);
</code></pre>
<h2>Conclusion</h2>
TypeScript significantly improves the React development experience by providing type safety, better tooling, and clearer code documentation. While there's a learning curve, the benefits far outweigh the initial investment in setup and learning.
Start incorporating TypeScript into your React projects today, and you'll quickly discover how it makes your code more robust and maintainable.
Happy coding! 🚀