Small Bites

Working with Images in Your Blog Posts

Jack — Tue, 30 Jan 2024 00:00:00 GMT

Working with Images in Your Blog Posts

This post demonstrates how to add images to your markdown blog posts. You can include images from various sources and they'll be displayed beautifully in your blog.

External Images from URLs

You can embed images directly from external URLs. Here's an example using an Unsplash image:

Different Image Sizes

Full Width Image

Medium Size Image

Small Inline Image

Here's a smaller image that can be used inline with text:

- perfect for adding visual interest to your paragraphs.

Images with Alt Text

Always include descriptive alt text for accessibility:

Multiple Images in a Row

You can place multiple images to create a gallery effect:

Best Practices for Blog Images

Use descriptive alt text - This helps with SEO and accessibility
Optimize image sizes - Use appropriate dimensions for your content
Choose relevant images - Images should enhance your content, not distract from it
Consider loading performance - Use lazy loading for better page speed
Maintain consistency - Use similar styles and quality across your posts

Technical Implementation

In this blog, images are automatically:

Centered in the content area
Given rounded corners for a modern look
Styled with a subtle shadow for depth
Made responsive to fit different screen sizes
Lazy loaded for better performance

Using Local Images

You can also use local images by placing them in the public folder:

![Local image](/images/my-image.jpg)

Conclusion

Adding images to your blog posts is simple with markdown. Just use the standard markdown image syntax, and the blog will handle the rest - making your images look great on all devices!

The State of Modern Web Development in 2024

Alex Chen — Thu, 25 Jan 2024 00:00:00 GMT

The State of Modern Web Development in 2024

Web development continues to evolve at a breakneck pace. New frameworks emerge, paradigms shift, and what was best practice yesterday might be outdated today. Let's explore the current landscape and what it means for developers.

The Rise of AI-Assisted Development

AI has fundamentally changed how we write code:

GitHub Copilot and Beyond

Autocomplete on steroids - Full function generation from comments
Bug detection - AI spots potential issues before runtime
Code review assistance - Automated suggestions for improvements

Example: AI-Generated React Component

// AI can generate this entire component from a simple comment:
// Create a card component with title, description, and image

function Card({ title, description, imageUrl }) {
  return (
    <div className="rounded-lg shadow-md overflow-hidden">
      <img 
        src={imageUrl} 
        alt={title}
        className="w-full h-48 object-cover"
      />
      <div className="p-4">
        <h3 className="text-xl font-bold mb-2">{title}</h3>
        <p className="text-gray-600">{description}</p>
      </div>
    </div>
  );
}

Edge Computing and Serverless

The edge is no longer just a buzzword:

Benefits of Edge Deployment

Reduced latency - Serve content from locations nearest to users
Better scalability - Automatic scaling without infrastructure management
Cost efficiency - Pay only for what you use
Global distribution - Deploy once, run everywhere

Popular Edge Platforms

Vercel Edge Functions
Cloudflare Workers
Netlify Edge Functions
Deno Deploy

The TypeScript Takeover

TypeScript has become the default choice for serious JavaScript projects:

interface User {
  id: string;
  name: string;
  email: string;
  createdAt: Date;
}

async function fetchUser(id: string): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) {
    throw new Error('User not found');
  }
  return response.json();
}

Why TypeScript Wins

Catch errors at compile time - Not in production
Better IDE support - Autocomplete and refactoring
Self-documenting code - Types serve as inline documentation
Easier refactoring - Change with confidence

Component-Driven Development

Building UIs as composable components is now standard:

Design Systems

Modern teams build their own component libraries:

Consistent UI across applications
Faster development through reuse
Better collaboration between design and development

Tools Leading the Way

Storybook - Component development environment
Bit - Component sharing and collaboration
Figma Dev Mode - Design to code workflow

Performance Obsession

Web performance is more critical than ever:

Core Web Vitals

Google's metrics that impact SEO:

LCP (Largest Contentful Paint) - Loading performance
FID (First Input Delay) - Interactivity
CLS (Cumulative Layout Shift) - Visual stability

Optimization Techniques

// Lazy loading with React Suspense
const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <HeavyComponent />
    </Suspense>
  );
}

The Jamstack Evolution

Jamstack architecture continues to mature:

Modern Jamstack Stack

Framework: Next.js, Nuxt, SvelteKit
CMS: Contentful, Sanity, Strapi
Deployment: Vercel, Netlify, Cloudflare Pages
Database: PlanetScale, Supabase, Neon

Web3 and Decentralization

While the hype has cooled, practical applications emerge:

Real Use Cases

Decentralized storage - IPFS for content distribution
Authentication - Wallet-based login systems
Smart contracts - Automated, trustless transactions

Mobile-First Everything

Mobile traffic dominates, demanding mobile-first approaches:

Progressive Web Apps (PWAs)

Offline functionality
App-like experience
Push notifications
Home screen installation

What's Next?

Looking ahead, several trends are emerging:

WebAssembly mainstream adoption - Near-native performance in browsers
AI-powered user experiences - Personalization at scale
Voice and gesture interfaces - Beyond traditional input methods
Micro-frontends - Independent, deployable frontend modules
Green coding - Sustainable, energy-efficient development practices

Conclusion

Modern web development is more exciting and challenging than ever. The tools are more powerful, the possibilities endless, but the fundamental goal remains the same: creating exceptional user experiences.

The key to thriving in this environment? Stay curious, keep learning, and remember that not every new tool needs to be in your stack. Choose technologies that solve real problems for your users.

What trends are you most excited about? The web's future is being written now, and we're all part of it.

Integrating Obsidian with Your Blog Workflow

Jane Smith — Sat, 20 Jan 2024 00:00:00 GMT

Integrating Obsidian with Your Blog Workflow

Obsidian has revolutionized how many of us take notes and manage knowledge. But what if you could seamlessly turn those notes into published blog posts? Let's explore how to create a powerful content creation workflow.

Why Obsidian for Blogging?

Obsidian offers unique advantages for bloggers:

Bidirectional linking helps you discover connections between ideas
Graph view visualizes your content relationships
Templates streamline post creation
Plugins extend functionality infinitely
Local storage keeps your content under your control

Setting Up Your Obsidian Vault

Here's how I organize my Obsidian vault for blogging:

📁 Vault/
├── 📁 Blog/
│   ├── 📁 Published/
│   ├── 📁 Drafts/
│   └── 📁 Ideas/
├── 📁 Research/
├── 📁 Templates/
└── 📁 Archive/

Creating a Blog Post Template

Templates save time and ensure consistency. Here's my go-to blog post template:

---
title: "{{title}}"
date: {{date}}
tags: []
status: draft
---

## Introduction

## Main Points

### Point 1

### Point 2

### Point 3

## Conclusion

## References

The Publishing Workflow

Step 1: Write in Obsidian

Use Obsidian's powerful editing features to craft your post. Take advantage of:

Live preview
Vim mode (if that's your thing)
Quick switcher for linking related notes

Step 2: Process Obsidian-Specific Syntax

Obsidian uses some special syntax that needs conversion:

[[Internal Links]] → Regular markdown links
![[Embedded Notes]] → Inline content
Tags: #blog #writing → Front matter tags

Step 3: Export to Your Blog

Simply copy your processed markdown file to your blog's content directory. The front matter transfers seamlessly!

Advanced Tips

Using Dataview for Content Management

The Dataview plugin can help you track your blog posts:

table title, date, status
from "Blog"
sort date desc

Automating with Templater

Create dynamic templates that auto-fill dates and generate slugs:

<%* 
const title = await tp.system.prompt("Post Title");
const slug = title.toLowerCase().replace(/\s+/g, '-');
const date = tp.date.now("YYYY-MM-DD");
-%>
---
title: "<% title %>"
slug: "<% slug %>"
date: <% date %>
---

Handling Images

For images in your Obsidian vault:

Store images in a dedicated folder
Use consistent naming conventions
Consider using Cloudinary or similar for hosting
Or reference images from Unsplash for quick placeholder images

Benefits I've Experienced

Since adopting this workflow:

Writing speed increased 2x - No context switching
Ideas flow naturally - Everything is interconnected
Research is integrated - Notes become posts organically
Version control - Git tracks everything

Challenges and Solutions

Challenge: Syncing Between Devices

Solution: Use Obsidian Sync or Git for version control

Challenge: Special Syntax Differences

Solution: Build a simple conversion script or use find-and-replace

Challenge: Image Management

Solution: Establish clear conventions and use cloud hosting

Conclusion

Integrating Obsidian into your blogging workflow transforms how you create content. Your notes naturally evolve into posts, your research feeds directly into your writing, and everything stays organized and searchable.

The key is starting simple and gradually adding complexity as you become comfortable with the workflow. Your blog becomes a natural extension of your thinking process.

What's your note-taking to blog workflow? I'd love to hear about your process!

Getting Started with Next.js and MDX

John Doe — Mon, 15 Jan 2024 00:00:00 GMT

Getting Started with Next.js and MDX

Building a modern blog has never been easier with the powerful combination of Next.js and MDX. In this post, we'll explore how to create a beautiful, performant blog that's a joy to write for and read.

Why Next.js?

Next.js provides an excellent foundation for building blogs:

Static Site Generation (SSG) for blazing-fast performance
Built-in routing with file-based routing system
Image optimization out of the box
SEO-friendly with built-in metadata support
Great developer experience with hot reload and TypeScript support

Setting Up MDX

MDX allows you to write JSX directly in your markdown files, giving you the power to include React components alongside your content. Here's how to get started:

// next.config.mjs
import createMDX from '@next/mdx'

const withMDX = createMDX({
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
})

export default withMDX(nextConfig)

Creating Your First Post

With MDX configured, creating a new blog post is as simple as adding a new .mdx file to your content directory:

---
title: "My First Post"
date: "2024-01-15"
author: "Your Name"
---

# Hello World

This is my first blog post using MDX!

Styling with Tailwind CSS

Tailwind CSS makes it easy to create beautiful, responsive designs without leaving your HTML. Combined with the @tailwindcss/typography plugin, your blog posts will look great out of the box.

Key Benefits:

Utility-first approach - Style directly in your components
Responsive design - Mobile-first breakpoints
Dark mode support - Built-in dark mode utilities
Customizable - Extend with your own design system

Deployment Options

When it comes to deploying your Next.js blog, you have several excellent free options:

Vercel

The creators of Next.js offer seamless deployment with automatic SSL, global CDN, and preview deployments.

Netlify

Great for static sites with form handling and serverless functions support.

Railway

Perfect if you need a full-stack solution with database support.

Conclusion

Building a blog with Next.js and MDX gives you the perfect balance of developer experience and user performance. Whether you're a seasoned developer or just getting started, this stack provides everything you need to create a professional blog.

Happy blogging!