DEV Community: jin

Apply CSS in Next.js with StayedCSS

jin — Wed, 18 Dec 2024 14:00:00 +0000

Styling Issues in Next.js App Router

Since the launch of the Next.js App Router, developers have embraced a paradigm that separates server and client components. While efficient, it introduces new challenges.

Challenge 1: Supporting server-side and client-side environments

Next.js often uses React styling libraries, as it’s based on React. However, many of these libraries are optimized for CSR (Client-Side Rendering), while the App Router defaults to SSR (Server-Side Rendering). This mismatch can lead to inconsistent styles between SSR and CSR.

Challenge 2: Flash of Unstyled Content (FOUC)

Dark mode is a common feature for better UX, but SSR typically renders HTML in light mode. The client applies dark mode later, causing screen flickering that disrupts the user experience.

I’ve faced these challenges myself during development. Despite the strengths of Next.js, styling problems kept getting in the way. Here's how I addressed them.

StayedCSS: The CSS Library for Next.js App Router

vectordxy / stayedcss

✨ A lightweight CSS library for Next.js App Router, supporting server and client components.

StayedCSS: The CSS library for Next.js App Router

Introduction

StayedCSS - beta version

StayedCSS is a static CSS library designed for Next.js App Router, offering full support for both server and client components. With a simple syntax similar to basic CSS, it enables efficient styling and aims to be the next-generation CSS library for the Next.js App Router.

Currently in its beta version, StayedCSS is rapidly improving in optimization and stability. It will continue to evolve to deliver a better styling experience for your projects.

Main Features

Server and Client Component Support: Apply styles seamlessly to server and client components in the Next.js App Router environment.
Various Styling Options: Supports various CSS styles such as :hover, ::after, and ~ p.
Media Queries: Simplify responsive design implementation.
Dark Mode: Offers flicker-free dark mode transitions.

Getting Started

Installation

npm install stayedcss
# or
yarn

…

View on GitHub

To address these issues, I created StayedCSS. This library supports both server and client environments, offering flicker-free dark mode and seamless compatibility with the Next.js App Router.

I hope StayedCSS helps other developers solve these challenges, and I’m excited to share it with the community!

1. Applying Styles to Server Components

import { st } from "stayedcss";

const styles = st({
  componentId: "components/example",
  container: {
    backgroundColor: "white",
    padding: "20px",
  },
});

export default function Example() {
  return (
    <div className={styles.container}>
      <h1>Hello, StayedCSS!</h1>
    </div>
  );
}

Define styles using the st function, which generates static CSS files and unique class names. Each style object is linked to a componentId, ensuring easy differentiation. Server components can now leverage CSS-in-JS-like syntax while benefiting from static CSS optimized for SSR.

2. Applying Styles to Client Components

'use client'

import { stClient } from "stayedcss/client";

export default function ExampleClient() {
  return (
    <div className={style.container}>
      <div className={style.title}>title</div>
    </div>
  );
}

const style = stClient({
  componentId: "components/example-client",
  container: {
    marginBottom: 60,
  },
  title:{
    fontSize: 27,
  },
});

For client components, use the stClient function to define styles. Similar to server components, it generates static CSS files and unique class names based on a componentId. Both server and client components share the same simple styling approach.

3. Dark Mode without Flickering

import { st, stDark } from "stayedcss";

export default function DarkModeExample() {
  return (
    <div className={style.container}>
      <h1>Hello world!</h1>
    </div>
  );
}

const style = st({
  componentId: "component/darkmode-example",
  container: {
    backgroundColor: "white",
  },
});

stDark({
  componentId: "component/darkmode-example",
  container: {
    backgroundColor: "black",
  },
});

StayedCSS resolves FOUC issues in SSR by using cookies to apply dark mode without delays or flickering. Define light and dark mode styles with matching componentId for smooth transitions.

4. Responsive Pages with Simple method

const style = st({
  componentId: "components/docs/media-query",
  container: {
    display: "flex",
    justifyContent: "center",
    padding: "20px",
    backgroundColor: "lightgray",
  },
  "@mobile": {
    container: {
      backgroundColor: "pink", 
      padding: "10px",
    },
  },
  "@tablet": {
    container: {
      backgroundColor: "lightblue", 
      padding: "15px",
    },
  },
  "@desktop": {
    container: {
      backgroundColor: "lightgreen",
      width: "50%",
    },
  },
});

StayedCSS makes media queries easy with keywords like mobile, tablet, and desktop. Declare responsive styles directly in the style object for clean and adaptive designs across screen sizes.

5. Taking It Further with Advanced CSS

const style = st({
  componentId: "components/docs/pseudo-classes",
  container: {
    backgroundColor: "black",
    ":hover": {
      backgroundColor: "green",
    },
  },
});

Supported features include pseudo-classes :hover, pseudo-elements ::before, and combinators ~. Write familiar CSS syntax, and StayedCSS optimizes it into static files, enabling high-performance styling across server and client components.

For detailed examples, visit the Docs page.

StayedCSS is here to simplify styling in the Next.js App Router environment. From server-client compatibility to advanced CSS features, it’s designed for a better styling experience. Try it today and share your thoughts — I’d love to hear your feedback! 🚀

Simplify TailwindCSS with TailwindBox

jin — Sat, 16 Nov 2024 07:26:26 +0000

TailwindCSS is powerful, but it can be hard to read. Writing conditional styles can also be a hassle. So I decided to create a lightweight and simple library to solve this problem.

TailwindBox

vectordxy / tailwindbox

Easily manage TailwindCSS styles with simple object-like structures

🔧 Installation

Install TailwindBox via npm or yarn:

npm install tailwindbox
# or
yarn add tailwindbox

🚀 Usage

Here's a quick example of how to use TailwindBox:

import { tw } from "tailwindbox";

function App() {
  const isDarkMode = true;

  const styles = tw({
    base: "p-4 rounded-lg shadow-md",
    dark: { if: isDarkMode, classes: "bg-gray-800 text-white" },
    light: { if: !isDarkMode, classes: "bg-white text-black" },
  });

  return <div className={styles}>Hello, TailwindBox!</div>;
}

export default App;

base: Always applies the base styles (p-4 rounded-lg shadow-md).
dark: Applies bg-gray-800 text-white only if isDarkMode is true.
light: Applies bg-white text-black only if isDarkMode is false.

🌟 Features

Object-Like Structure: Define TailwindCSS styles in an object-based format.
…

View on GitHub

TailwindBox makes your TailwindCSS code cleaner and easier to manage. Here's a quick example of how to use TailwindBox:

import { useState } from "react";
import { tw } from "tailwindbox";

function App() {
  const [isOpened, setIsOpened] = useState(false);

  const styles = tw({
    base: "pt-2 text-center font-light",
    open: { if: isOpened, classes: "inline-block border-t p-7" },
    closed: { if: !isOpened, classes: "hidden" },
  });

  return (
    <div>
      <button
        onClick={() => setIsOpened((prev) => !prev)}>
        Toggle Content
      </button>
      <div className={styles}>Hello World!</div>
    </div>
  );
}

export default App;

base: Always applies the base styles (pt-2 text-center font-light).
open: Applies inline-block border-t p-7 only if isOpened is true.
closed: Applies hidden only if isOpened is false.

Features

Object-Like Structure: Define TailwindCSS styles in an object-based format.
Conditional Classes: Apply classes dynamically based on your application's state.
Improved Readability: Simplify long and complex class strings.
Lightweight: A minimal library designed for TailwindCSS users.

It will be a great help when you develop with TailwindCSS. Try it out, and feel free to share your feedback anytime!

Why I Created a Dependency Graph: For Web Developers who Want to Write Efficient Code

jin — Fri, 15 Nov 2024 11:16:35 +0000

How Do You Manage Dependencies?

When you develop, how much attention do you pay to managing module dependencies? Every time you write code, you import and export modules and files. However, surprisingly, many developers don’t pay much attention to this aspect. If imports are not managed properly, It can cause frustrating problems later on.

To prevent these issues, I created a dependency graph library for JavaScript and TypeScript users. Just focusing on managing dependencies can lead to better code. So, let’s explore how you can achieve this and the lessons I learned while building my library.

Why Dependency Management Matters

Before talking about the library, let’s discuss the importance of dependency management. Here’s a simple example:

import { Link } from "react-router-dom";

This is a common code. To use an external module, the code imports it. This import statement might be used in many files throughout your project. Now, here’s the problem: what happens if this module changes? Or if the variable name changes?

In the fast-moving world of web development, this isn’t unusual. Libraries are updated constantly, and even small version differences can cause issues. In collaborative projects or larger codebases, you might need to update the library version and, as a result, change all related import statements. Does this mean you’ll have to update all of them?

That would be far too inefficient. So how can we avoid this situation? By wrapping external dependencies with an middle layer. Let’s look at an example.

// router/link.js - Wrapping the external dependency
import { Link } from "react-router-dom";

// CustomLink component
const CustomLink = ({ to, children, ...props }) => {
  return (
    <Link to={to} {...props}>
      {children}
    </Link>
  );
};

export default CustomLink;

Instead of directly importing the external module everywhere, we wrap it with our own interface. This is a practical application of Inversion of Control (IoC).

// pages/Home.js
import CustomLink from "../router/CustomLink";

const Home = () => {
  return (
    <div>
      <h1>Welcome to the Home Page</h1>
      <CustomLink to="/about">Go to About Page</CustomLink>
    </div>
  );
};

export default Home;

Now, the external module is imported only once, and other files depend on the interface you created. This means that if you ever need to modify the external library, you only have to change a single line of code. This is why managing dependencies effectively is critical in projects.

Why I Built a Dependency Graph Library

As I mentioned, it is important to manage module dependencies. If you ignore it, you might end up spending a lot of time fixing things later. That’s why I decided to create a dependency graph library.

If an external module is overly dependent on too many internal modules, it can make maintenance challenging. But it is inefficient to manually search through dependencies with Ctrl+F. I realized a visualization tool was necessary.

vectordxy / decode-deps

Debug Tool: a Dependency Graph, visualizing module dependencies in js, jsx, ts, tsx projects.

DecodeDeps is a dev-tool that analyzes and visualizes module dependencies in js, jsx, ts, tsx projects. It identifies modules using import and require statements and generates a graph to illustrate these relationships. By providing a visualization of module dependencies, it offers insights for building a more structured codebase.

🚀 Last Update v.1.2.0 (November 13, 2024)

Add functionality to distinguish and display external and internal modules
Update UI for the side menu

🌟 Key Features

For js, jsx, ts and tsx files: Visualizes module dependencies by analyzing import and require statements, providing a graph view.
Multiple folders: Make it easy to analyze entire projects or specific subfolders.
Detect circular dependencies: Automatically identifies circular dependencies within your modules.
Various Node Color: Node colors vary based on module size, offering a quick visual indication.
Interactive Graph: Navigate and explore the dependency graph with zoom and pan features, as…

View on GitHub

This library visualizes the relationships between dependencies in JavaScript and TypeScript projects. It distinguishes between external and internal modules and shows the size of each module. The graph helps you not only see how modules are connected but also identify potential issues, such as overly dependent modules, that could cause problems later.

It also makes it easy to detect circular dependencies. For example, if module A depends on Modules B, and B depends on A, it creates a circular dependency that could lead to significant issues during code updates. A dependency graph makes it easier to identify such issues.

Ultimately, this library is not just a tool for displaying dependencies; it’s a powerful way to improve code quality and simplify maintenance. It allows developers to understand the overall structure of their projects clearly, enhancing both code stability and scalability.

If you want to write more efficient code, feel free to give it a try. Feedback and feature suggestions are always welcome!

[Blog Template] Create your own blog site with this Ready-to-use Template, built with Next.js

jin — Sun, 10 Nov 2024 11:34:48 +0000

Introduction

Do you want to create your own personal blog site? Bbut don’t know how to start? Starter-Template-For-Blog is a ready-to-use blog template made for developers, especially beginners. With this template, you can quickly build a blog site using the latest dev stack, including Next.js.

Preview

In Desktop

In Mobile

Explore the Demo Site

Why is this template useful?

Simple Setup
- This template has all the essential configurations in place, so there’s no need for complex setup. Just clone the code, and you’re ready to start creating your blog.
Write Posts in Markdown
- Write posts in Markdown format in your local folder, and the template will automatically convert them into HTML to display on your blog.
No File Storage Server Required
- Since it use Markdown files from local folders, there’s no need to set up an external file storage server. This is incredibly convenient for those just starting to build their own blog site.
Easy Customization
- This template let you easily change various elements like colors, profile information, and logos. Style your blog just the way you want, and make it uniquely yours!
Latest Web Technology with Next.js
- Built on the latest version of the Next.js App Router, TailwindCSS and TypeScript. This allows you to experience working with the latest development technologies.

How to Get Started

If you are interested in it, visit the GitHub repository and check out the setup guide. Start using the template and customize it to create your own unique blog!

https://github.com/vectordxy/starter-template-for-blog

I made a Dependency Graph Library for JavaScript & TypeScript

jin — Tue, 05 Nov 2024 07:42:30 +0000

Hello! I'd like to introduce my project, DecodeDeps. It is a development tool to enhance the efficiency of JavaScript and TypeScript development.

What is DecodeDeps?

DecodeDeps is a tool for analyzing and visualizing module dependencies in JavaScript, JSX, TypeScript, and TSX projects. It identifies modules through import and require statements and represents the relationships between modules in a graph, helping you build a more structured codebase.

Preview

Step 1. Prepare your project and install the library.

Step 2. Enter the command.

Step 3. Check the results on localhost5001.

Key Features

JS, JSX, TS, TSX Support: Analyzes and visualizes dependencies for JavaScript, JSX, TypeScript, and TSX files.
Import & Require Support: Captures dependencies across ES modules and CommonJS modules through import and require statements.
Flexible Folder Input: Allows you to input multiple folders as an array to analyze the entire project or specific subfolders with ease.
Dynamic Node Colors: Node colors vary by module size, providing a quick overview of module weight. Hover over a node to view the precise module size.
Interactive Graph Customization: Adjust node size and link distance, zoom in/out, and use drag-and-drop functionality to explore the dependency graph freely.

Who Should Use This Tool?

Refactoring Teams: Easily identify optimization points during refactoring.
Large Codebase Managers: Efficiently handle complex module dependencies.
Junior Developers: Quickly understand the overall code structure.
Performance-Critical Project Teams: Improve build and loading performance through optimized bundling.

This project is open-source, and your feedback and contributions are always welcome. I'm continually working to develop DecodeDeps into an even more efficient tool by adding new features and providing regular updates.

If you'd like to try using this library, please visit GitHub.
https://github.com/vectordxy/decode-deps

Thank you!