initial commit
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
---
|
||||
title: 'Building Beautiful UIs with shadcn/ui'
|
||||
date: '2025-12-08'
|
||||
excerpt: 'Discover how shadcn/ui can accelerate your UI development with beautiful, accessible components.'
|
||||
---
|
||||
|
||||
# Building Beautiful UIs with shadcn/ui
|
||||
|
||||
shadcn/ui has revolutionized how we build component libraries. Unlike traditional component libraries, shadcn/ui gives you full ownership of your components.
|
||||
|
||||
## What Makes shadcn/ui Different?
|
||||
|
||||
Instead of installing components as dependencies, shadcn/ui copies the component code directly into your project. This means:
|
||||
|
||||
- **Full Control**: Modify components however you need
|
||||
- **No Lock-in**: You own the code, no vendor lock-in
|
||||
- **Tailwind CSS**: Built on top of Tailwind CSS for easy customization
|
||||
|
||||
## Getting Started
|
||||
|
||||
Installation is straightforward:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init
|
||||
```
|
||||
|
||||
Then add components as needed:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add button
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
Since the components are in your codebase, customization is as simple as editing the files. No need to override styles or fight with CSS specificity.
|
||||
|
||||
shadcn/ui is the perfect choice for teams that want beautiful components with complete control.
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
title: 'Getting Started with Next.js'
|
||||
date: '2025-12-12'
|
||||
excerpt: 'An introduction to building modern web applications with Next.js and React.'
|
||||
---
|
||||
|
||||
# Getting Started with Next.js
|
||||
|
||||
Next.js has become one of the most popular frameworks for building React applications. In this post, we'll explore why Next.js is such a powerful choice for modern web development.
|
||||
|
||||
## What is Next.js?
|
||||
|
||||
Next.js is a React framework that enables functionality such as server-side rendering and generating static websites. It's built by Vercel and has become the go-to choice for many developers.
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Server-Side Rendering**: Render your React components on the server for better performance and SEO.
|
||||
- **Static Site Generation**: Pre-render pages at build time for lightning-fast load times.
|
||||
- **File-based Routing**: Create routes by simply adding files to the `app` directory.
|
||||
- **API Routes**: Build API endpoints right within your Next.js application.
|
||||
|
||||
## Why Choose Next.js?
|
||||
|
||||
Next.js takes care of many of the common challenges in web development, allowing you to focus on building features rather than configuration.
|
||||
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: 'Tailwind CSS Tips and Tricks'
|
||||
date: '2025-12-05'
|
||||
excerpt: 'Level up your Tailwind CSS skills with these advanced tips and tricks.'
|
||||
---
|
||||
|
||||
# Tailwind CSS Tips and Tricks
|
||||
|
||||
Tailwind CSS has changed how we write styles. Here are some advanced tips to take your Tailwind skills to the next level.
|
||||
|
||||
## Use @apply Sparingly
|
||||
|
||||
While `@apply` is useful for extracting repeated patterns, overusing it defeats the purpose of utility-first CSS. Keep most styles in your JSX.
|
||||
|
||||
## Leverage JIT Mode
|
||||
|
||||
The Just-In-Time compiler generates styles on-demand, giving you:
|
||||
|
||||
- Faster build times
|
||||
- Smaller file sizes
|
||||
- All variants enabled by default
|
||||
|
||||
## Custom Utilities
|
||||
|
||||
Extend Tailwind with custom utilities in your `tailwind.config.js`:
|
||||
|
||||
```javascript
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
spacing: {
|
||||
'128': '32rem',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Conclusion
|
||||
|
||||
These tips will help you use Tailwind CSS more effectively and build better UIs faster.
|
||||
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: 'TypeScript Best Practices for 2025'
|
||||
date: '2025-12-10'
|
||||
excerpt: 'Learn the latest TypeScript best practices to write more maintainable and type-safe code.'
|
||||
---
|
||||
|
||||
# TypeScript Best Practices for 2025
|
||||
|
||||
TypeScript has evolved significantly, and with it, the best practices for writing type-safe code have also matured. Let's explore some essential practices for 2025.
|
||||
|
||||
## Use Strict Mode
|
||||
|
||||
Always enable strict mode in your `tsconfig.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"strict": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Leverage Type Inference
|
||||
|
||||
TypeScript's type inference is powerful. Let the compiler infer types when it's obvious:
|
||||
|
||||
```typescript
|
||||
// Good
|
||||
const count = 42;
|
||||
|
||||
// Unnecessary
|
||||
const count: number = 42;
|
||||
```
|
||||
|
||||
## Avoid `any`
|
||||
|
||||
The `any` type defeats the purpose of TypeScript. Use `unknown` instead when the type is truly unknown, or take time to properly type your data.
|
||||
|
||||
## Conclusion
|
||||
|
||||
Following these best practices will help you write more maintainable and bug-free TypeScript code.
|
||||
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: 'Markdown Editor'
|
||||
description: 'A sleek markdown editor with live preview and export options'
|
||||
links:
|
||||
github: 'https://github.com/username/markdown-editor'
|
||||
gitea: 'https://gitea.example.com/username/markdown-editor'
|
||||
---
|
||||
|
||||
# Markdown Editor
|
||||
|
||||
A beautiful and intuitive markdown editor with real-time preview, syntax highlighting, and multiple export formats.
|
||||
|
||||
## Features
|
||||
|
||||
- Live preview
|
||||
- Syntax highlighting
|
||||
- Export to PDF, HTML
|
||||
- Dark mode support
|
||||
- Keyboard shortcuts
|
||||
- Auto-save
|
||||
|
||||
## Built With
|
||||
|
||||
- React
|
||||
- CodeMirror
|
||||
- react-markdown
|
||||
- Tailwind CSS
|
||||
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: 'Portfolio Website'
|
||||
description: 'A modern portfolio built with Next.js, TypeScript, and shadcn/ui'
|
||||
links:
|
||||
gitea: 'https://gitea.muszyn.dev/muszyn/portfolio'
|
||||
live: 'https://site.muszyn.dev'
|
||||
---
|
||||
|
||||
# Portfolio Website
|
||||
|
||||
A fully responsive portfolio website built with the latest web technologies. Features a clean, minimalist design with dark mode support.
|
||||
|
||||
## Technologies Used
|
||||
|
||||
- Next.js 16
|
||||
- TypeScript
|
||||
- shadcn/ui
|
||||
- Tailwind CSS
|
||||
- Markdown for content management
|
||||
|
||||
## Features
|
||||
|
||||
- Blog with markdown support
|
||||
- Project showcase
|
||||
- Fully responsive design
|
||||
- Dark mode
|
||||
- Fast static site generation
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
title: 'Task Manager App'
|
||||
description: 'A collaborative task management application with real-time updates'
|
||||
links:
|
||||
github: 'https://github.com/username/task-manager'
|
||||
live: 'https://tasks.example.com'
|
||||
---
|
||||
|
||||
# Task Manager App
|
||||
|
||||
A full-stack task management application that helps teams collaborate and stay organized.
|
||||
|
||||
## Key Features
|
||||
|
||||
- Real-time collaboration
|
||||
- Task assignments and due dates
|
||||
- Project organization
|
||||
- Priority levels
|
||||
- Search and filtering
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- Frontend: React, TypeScript
|
||||
- Backend: Node.js, Express
|
||||
- Database: PostgreSQL
|
||||
- Real-time: Socket.io
|
||||
Reference in New Issue
Block a user