<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! 🚀

Building Modern Web Applications with React and TypeScript

<h1>Next.js Blog Starter</h1>
A comprehensive starter template for building modern developer blogs and portfolios using Next.js, Tailwind CSS, and Markdown.
<h2>Features</h2>
This project includes everything you need to get started with a professional blog:
<h3>🚀 Performance</h3>
<ul>
<li>Static site generation for lightning-fast loading</li>
<li>Optimized images and assets</li>
<li>SEO-friendly structure with meta tags and structured data</li>
</ul>
<h3>🎨 Design</h3>
<ul>
<li>Clean, minimalist design inspired by modern developer blogs</li>
<li>Dark mode support with seamless theme switching</li>
<li>Fully responsive design that works on all devices</li>
<li>Beautiful typography with carefully chosen font pairings</li>
</ul>
<h3>📝 Content Management</h3>
<ul>
<li>Write posts in Markdown with frontmatter support</li>
<li>Automatic code syntax highlighting</li>
<li>Support for blog posts and project showcases</li>
<li>Easy content organization in the <code>/content</code> directory</li>
</ul>
<h3>🛠️ Developer Experience</h3>
<ul>
<li>TypeScript support for better development</li>
<li>ESLint and Prettier configuration</li>
<li>Hot reloading in development</li>
<li>Easy deployment to Vercel, Netlify, or GitHub Pages</li>
</ul>
<h2>Technology Stack</h2>
<ul>
<li>Framework: Next.js with Pages Router</li>
<li>Styling: Tailwind CSS</li>
<li>Content: Markdown with gray-matter</li>
<li>Theming: next-themes for dark/light mode</li>
<li>Deployment: Static export ready</li>
</ul>
<h2>Getting Started</h2>
<ol>
<li>Clone the repository</li>
<li>Install dependencies with <code>npm install</code></li>
<li>Run the development server with <code>npm run dev</code></li>
<li>Start writing content in the <code>/content</code> directory</li>
</ol>
<h2>Customization</h2>
The starter is designed to be easily customizable:
<ul>
<li>Modify colors and typography in <code>tailwind.config.js</code></li>
<li>Update the layout components in <code>/components</code></li>
<li>Add new content types by extending the markdown utilities</li>
<li>Customize SEO settings in the Layout component</li>
</ul>
<h2>Deployment</h2>
This project is optimized for static deployment:
<pre><code class="hljs language-bash">npm run build
npm run export
</code></pre>
The generated static files can be deployed to any static hosting provider.
<h2>Contributing</h2>
Contributions are welcome! Please feel free to submit issues and pull requests to help improve this starter template.

Next.js Blog Starter

<h1>E-commerce Dashboard</h1>
A modern, responsive admin dashboard designed for e-commerce platforms. This project demonstrates advanced React patterns, data visualization, and responsive design principles.
<h2>Overview</h2>
This dashboard provides comprehensive tools for managing an online store, from tracking sales metrics to managing inventory and customer data.
<h2>Key Features</h2>
<h3>📊 Real-time Analytics</h3>
<ul>
<li>Sales performance tracking</li>
<li>Revenue metrics and trends</li>
<li>Customer acquisition analytics</li>
<li>Product performance insights</li>
</ul>
<h3>📦 Inventory Management</h3>
<ul>
<li>Stock level monitoring</li>
<li>Low inventory alerts</li>
<li>Product catalog management</li>
<li>Bulk operations support</li>
</ul>
<h3>👥 Customer Management</h3>
<ul>
<li>Customer profiles and history</li>
<li>Order tracking and management</li>
<li>Support ticket system</li>
<li>Customer segmentation tools</li>
</ul>
<h3>📱 Responsive Design</h3>
<ul>
<li>Mobile-first approach</li>
<li>Touch-friendly interface</li>
<li>Progressive Web App features</li>
<li>Cross-browser compatibility</li>
</ul>
<h2>Technical Implementation</h2>
<h3>Architecture</h3>
Built using modern React patterns and best practices:
<ul>
<li>Component Architecture: Modular, reusable components</li>
<li>State Management: Context API with useReducer for complex state</li>
<li>Type Safety: Full TypeScript implementation</li>
<li>Performance: Code splitting and lazy loading</li>
</ul>
<h3>Data Visualization</h3>
Leveraging Chart.js and custom components for:
<ul>
<li>Interactive line charts for sales trends</li>
<li>Donut charts for category breakdowns</li>
<li>Bar charts for comparative analysis</li>
<li>Real-time updating metrics</li>
</ul>
<h3>UI/UX Design</h3>
<ul>
<li>Clean, minimalist interface</li>
<li>Consistent design system</li>
<li>Dark/light theme support</li>
<li>Accessibility-first approach</li>
</ul>
<h2>Code Examples</h2>
<h3>Custom Hook for API Data</h3>
<pre><code class="hljs language-typescript">interface DashboardData {
 revenue: number;
 orders: number;
 customers: number;
 products: number;
}

const useDashboardData = (): UseApiResult&#x3C;DashboardData> => {
 const [data, setData] = useState&#x3C;DashboardData | null>(null);
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState&#x3C;string | null>(null);

 useEffect(() => {
 fetchDashboardData()
 .then(setData)
 .catch((err) => setError(err.message))
 .finally(() => setLoading(false));
 }, []);

 return { data, loading, error };
};
</code></pre>
<h3>Reusable Metric Card Component</h3>
<pre><code class="hljs language-typescript">interface MetricCardProps {
 title: string;
 value: number;
 change: number;
 icon: React.ReactNode;
 format?: "currency" | "number" | "percentage";
}

const MetricCard: React.FC&#x3C;MetricCardProps> = ({
 title,
 value,
 change,
 icon,
 format = "number",
}) => {
 const formatValue = (val: number) => {
 switch (format) {
 case "currency":
 return new Intl.NumberFormat("en-US", {
 style: "currency",
 currency: "USD",
 }).format(val);
 case "percentage":
 return `${val}%`;
 default:
 return val.toLocaleString();
 }
 };

 return (
 &#x3C;div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm">
 &#x3C;div className="flex items-center justify-between">
 &#x3C;div>
 &#x3C;p className="text-sm text-gray-600 dark:text-gray-400">{title}&#x3C;/p>
 &#x3C;p className="text-2xl font-bold">{formatValue(value)}&#x3C;/p>
 &#x3C;/div>
 &#x3C;div className="text-blue-500">{icon}&#x3C;/div>
 &#x3C;/div>
 &#x3C;div className="mt-4">
 &#x3C;span
 className={`text-sm ${
 change >= 0 ? "text-green-500" : "text-red-500"
 }`}
 >
 {change >= 0 ? "+" : ""}
 {change}%
 &#x3C;/span>
 &#x3C;span className="text-sm text-gray-500 ml-1">from last month&#x3C;/span>
 &#x3C;/div>
 &#x3C;/div>
 );
};
</code></pre>
<h2>Performance Optimizations</h2>
<h3>Code Splitting</h3>
<ul>
<li>Route-based splitting for faster initial loads</li>
<li>Component-level splitting for heavy features</li>
<li>Dynamic imports for chart libraries</li>
</ul>
<h3>Data Management</h3>
<ul>
<li>Efficient API caching strategies</li>
<li>Optimistic updates for better UX</li>
<li>Pagination and virtual scrolling for large datasets</li>
</ul>
<h3>Bundle Optimization</h3>
<ul>
<li>Tree shaking for smaller bundles</li>
<li>Webpack optimization for production builds</li>
<li>Service worker for offline functionality</li>
</ul>
<h2>Lessons Learned</h2>
Building this dashboard taught me valuable lessons about:
<ol>
<li>Scalable Architecture: How to structure a complex React application</li>
<li>Performance: Optimizing for large datasets and real-time updates</li>
<li>User Experience: Creating intuitive interfaces for complex data</li>
<li>Accessibility: Building inclusive web applications</li>
</ol>
<h2>Future Enhancements</h2>
<ul>
<li>Advanced filtering and search capabilities</li>
<li>Export functionality for reports</li>
<li>Real-time notifications system</li>
<li>Mobile app companion</li>
<li>Multi-tenant support</li>
</ul>
<h2>Technologies Used</h2>
<ul>
<li>Frontend: React 18, TypeScript, Tailwind CSS</li>
<li>Charts: Chart.js, React Charts</li>
<li>State: Context API, useReducer</li>
<li>Build: Vite, ESLint, Prettier</li>
<li>Testing: Jest, React Testing Library</li>
<li>Deployment: Vercel</li>
</ul>
This project showcases modern web development practices and demonstrates how to build complex, data-driven applications that are both performant and user-friendly.

Welcome to My Digital Space

Latest Posts

Syntax Highlighting Test

Getting Started with Next.js and Static Site Generation

Building Modern Web Applications with React and TypeScript

Featured Projects

Next.js Blog Starter

E-commerce Dashboard