
CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in a markup language. A style sheet is a collection of rules that tells a web browser how to display a document written in HTML or XML.

From CSS-in-JS, utility class libraries like Tailwind, or writing vanilla CSS, we have content for you.


JavaScript is a programming language that is most commonly used in web browsers. It is also used in server-side programming, game development, and desktop applications. It's an incredibly popular programming language, and is used by millions of developers worldwide. For those that are more interested in backend application, you'll find yourself delving into Node.js. We'll cover all things Javascript on our site!


Javascript


Discover the power of NestJS, a progressive Node.js framework for building efficient, reliable, and scalable server-side applications. Delve into this category to learn about NestJS's core principles, and how it combines the best of Object-Oriented Programming, Functional Programming, and Domain Driven Design. Gain insights into creating modern web applications and become a part of the rapidly growing NestJS community!

NestJS


Next.js is a JavaScript framework that enables you to create server-side rendered React applications. With Next.js, you can create static websites, dynamic websites, and even SPAs (single page applications). Our own blog is built with Next.js, so we'll be making sure to write lots of content focussed on configuration, best practices, and trying to help you level up!

Next.js

Productivity


React.js is a JavaScript library for building user interfaces. It lets you create reusable components so that your code is easy to read and maintain. When you use React, you can use JavaScript to create UIs for your apps that are responsive and fast. It's is by far the most popular frontend javascript library, and if  you're looking to create dynamic web applications, React is a great choice.

In our articles we will cover a variety of topics, ranging from library integrations, best practices, tips and tricks, and much more. 

React.js


Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later. The most popular version control systems are Git, Mercurial, and Subversion. In our articles, we focus mainly on Git due to its popularity. However, all three systems are very similar and can accomplish the same tasks.

Version Control


Vue.js is a JavaScript framework for building user interfaces. It can be used to build single-page applications or large-scale enterprise applications. Vue.js is a lightweight framework that is easy to learn and use. There is large community behind it, and as a result, a huge variety of libraries and tools are available for it. On our site you'll find plenty of content talking about both Vue 2 and 3. 

If you're just getting started with Vue, we recommend checking out the [official Vue documentation](https://vuejs.org/guide/introduction.html). It provides a thorough introduction to the framework, including a getting started guide and a guide to creating components.

Vue.js


# Beginner's Guide to Vue 3: Build a Basic App

Vue.js has been a favorite among web developers for its simplicity and flexible design—the introduction of Vue 3 has brought even more reasons to prefer it for both large and small scale applications. In this guide, designed for beginners, you will dive into the world of Vue 3 to initiate your journey into building your own basic app. 

## Why Choose Vue 3?

Vue 3 is built with performance enhancements, new API features, and improved accessibility in mind. The Composition API is one of Vue 3’s stand-out features, allowing you to organize your code much more efficiently. Vue 3 also makes it significantly easier to build web applications with a smaller bundle size and enhanced TypeScript support.

## Setting Up Your Vue Environment

Begin by ensuring you have Node.js installed on your machine because Vue CLI relies on Node.js. You can download it from the [official Node.js website](https://nodejs.org/). With Node.js ready, install Vue CLI globally with:

```bash
npm install -g @vue/cli
```

Create a new Vue application with Vue CLI:

```bash
vue create your-vue-app
```

Follow the prompts to choose your desired configuration. For a starting point, you can use the default settings.

## Understanding Vue 3 Core Concepts

### The Composition API

The Composition API is a new addition in Vue 3, which simplifies code management and organization. The `setup` function is at the heart of this API, allowing you to use features like ref, reactive, computed, and watch, which were part of the Options API.

Example setup function:

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue 3!');

    return { message };
  },
};
```

### Reactive Data Binding

Vue 3 simplifies reactive data management. Use `ref` for reactive plain variables and `reactive` for objects.

```javascript
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
    });

    function increment() {
      state.count++;
    }

    return { state, increment };
  },
};
```

## Building Your First Vue 3 App

Let's put theory into practice by creating a basic to-do app. This will introduce you to components, data binding, and event handling.

### Creating Components

Vue components can be created in single-file components which encapsulate HTML, JavaScript, and CSS for parts of the UI.

```html
<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" placeholder="Enter a task"/>
    <button @click="addTodo">Add</button>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const newTodo = ref('');
    const todos = ref([]);

    function addTodo() {
      if (newTodo.value.trim()) {
        todos.value.push({ id: Date.now(), text: newTodo.value });
        newTodo.value = '';
      }
    }

    return { newTodo, todos, addTodo };
  },
};
</script>

<style scoped>
input {
  margin-bottom: 10px;
}
</style>
```

### Handling Forms and Events

Vue 3's binding capabilities allow forms to respond dynamically to user input. We use `v-model` for two-way data binding, which syncs input and data instantly.

### State Management with Vuex

For managing global state across components, consider using [Vuex](https://vuex.vuejs.org/), which is a state management pattern + library for Vue applications. Vuex offers centralized storage where all the components can share data.

Installation:

```bash
npm install vuex@next --save
```

## Bonus: Using Vue Router

To turn this basic app into a full-fledged multi-page app, utilize [Vue Router](https://router.vuejs.org/). Vue Router provides the ability to navigate between components seamlessly.
 
Install Vue Router:

```bash
npm install vue-router@next
```

With Vue Router set up, create routes for different components and enjoy navigation capabilities in your Vue app.

## Conclusion

The versatility of Vue 3 allows web developers to explore a plethora of functionalities smoothly. For more advanced features and tutorials, check out the official [Vue documentation](https://v3.vuejs.org/). As you continue to delve deeper, consider experimenting with the Composition API, Vuex, and Vue Router to streamline your app development process. 

Web development is an ever-changing field, and staying updated with the latest advancements like Vue 3 can greatly impact how you build and manage projects. This guide should serve as a valuable stepping stone in your journey of learning Vue 3 and crafting efficient, hands-on applications.

Master Vue 3 basics by building a simple app. Follow this guide for key concepts on your journey to creating your Vue 3 app.

Beginner's Guide to Vue 3: Build a Basic App


Creating custom decorators in NestJS is a powerful way to enhance your application's functionality and maintain clean code. NestJS, a progressive Node.js framework, heavily relies on decorators from TypeScript. These decorators make the code more succinct and readable by allowing you to attach metadata to classes, methods, or properties. In this article, we'll walk you through the process of creating custom decorators and provide real-world examples of their use in NestJS applications.

### Understanding Decorators in NestJS
Before you start creating custom decorators, it's crucial to understand what decorators are. In NestJS, decorators are special functions prefixed with the `@` symbol, which allow you to define behaviors without changing the existing code. Common decorators include `@Controller`, `@Get`, `@Post`, among others.

### Why Create Custom Decorators?

Custom decorators can:
- **Promote Code Reusability**: Encapsulate common operations and use them across multiple components.
- **Enhance Readability**: Abstract complex tasks and improve code readability.
- **Ensure Consistency**: Standardize behavior across various parts of your application.

### Setting Up a NestJS Project

To illustrate how to create custom decorators, first ensure you have a NestJS project set up. If not, create one using the following command:

```bash
npm i -g @nestjs/cli
nest new my-nestjs-app
```

Navigate to the project directory:

```bash
cd my-nestjs-app
```

### Creating a Custom Decorator

Custom decorators are functions that accept a target (like a class or method), property name, and descriptor. Let’s create a basic example to log method execution time.

#### Step 1: Define the Decorator

Create a new file named `log-execution-time.decorator.ts` in your project:

```typescript
import { Logger } from '@nestjs/common';

export function LogExecutionTime(): MethodDecorator {
  return (target, propertyKey, descriptor: PropertyDescriptor) => {
    const originalMethod = descriptor.value;

    descriptor.value = async function (...args: any[]) {
      const start = Date.now();
      const result = await originalMethod.apply(this, args);
      const end = Date.now();

      Logger.log(`${String(propertyKey)} executed in ${end - start}ms`);

      return result;
    };

    return descriptor;
  };
}
```

#### Step 2: Apply the Decorator

Now, apply the decorator to a method inside a service or controller. Here is an example using a service method:

```typescript
import { Injectable } from '@nestjs/common';
import { LogExecutionTime } from './log-execution-time.decorator';

@Injectable()
export class AppService {
  @LogExecutionTime()
  async fetchData(): Promise<string> {
    // Simulate a time-consuming task
    await new Promise(resolve => setTimeout(resolve, 2000));
    return 'Data fetched';
  }
}
```

### Real-World Example

Let's consider a real-world scenario where you might need a custom decorator. Suppose you want to control access to certain routes based on user roles.

#### Step 1: Create a Role-based Decorator

Create a new decorator `roles.decorator.ts`:

```typescript
import { SetMetadata } from '@nestjs/common';

export const Roles = (...roles: string[]) => SetMetadata('roles', roles);
```

#### Step 2: Use the Roles Decorator

Attach the `Roles` decorator to your route handlers:

```typescript
import { Controller, Get, UseGuards } from '@nestjs/common';
import { Roles } from './roles.decorator';
import { RolesGuard } from './roles.guard';

@Controller('users')
export class UserController {
  @Get()
  @Roles('admin')
  @UseGuards(RolesGuard)
  getUsers() {
    return 'This route is restricted to admin users';
  }
}
```

### Implementing Guards

To make the `Roles` decorator functional, create a guard `roles.guard.ts`:

```typescript
import { Injectable, CanActivate, ExecutionContext } from '@nestjs/common';
import { Reflector } from '@nestjs/core';

@Injectable()
export class RolesGuard implements CanActivate {
  constructor(private reflector: Reflector) {}

  canActivate(context: ExecutionContext): boolean {
    const roles = this.reflector.get<string[]>('roles', context.getHandler());
    if (!roles) {
      return true;
    }
    const request = context.switchToHttp().getRequest();
    const user = request.user;

    return roles.some(role => user.roles?.includes(role));
  }
}
```

### Conclusion

Creating custom decorators in NestJS is a straightforward process that can greatly simplify and streamline your application’s codebase. By using custom decorators like `LogExecutionTime` and `Roles`, you can ensure your code remains clean, reusable, and maintainable. As you become more familiar with NestJS and TypeScript decorators, you'll find myriad ways to apply these patterns to your projects.

For further reading on NestJS decorators and their applications, you might visit [NestJS Official Documentation](https://docs.nestjs.com). Engaging with the broader developer community on platforms like [GitHub](https://github.com/nestjs/nest) can also offer insights and advanced examples.

Master the art of creating custom decorators in NestJS with practical examples to boost your application's functionality.

Create Custom Decorators in NestJS Easily


## Boost NestJS Development with Docker: A Guide for Web Developers

In today's fast-paced software development world, efficiency is key. Employing Docker in your development toolkit can significantly boost NestJS development and deployment operations. This guide not only covers how to leverage Docker to run NestJS in a local environment but also delves into deploying it efficiently to third-party services.

### What is Docker and Why Use It with NestJS?

Docker is a containerization platform that automates the deployment of applications inside lightweight, portable containers. It offers numerous benefits, including:

- **Consistency**: Containers ensure applications run the same, regardless of the environment.
- **Portability**: Easily move applications across systems seamlessly.
- **Isolation**: Containers encapsulate software, libraries, and configurations, preventing dependency conflicts.

NestJS, a popular Node.js framework, benefits immensely when paired with Docker, allowing developers to streamline setup and deployment while maintaining an organized and isolated development environment.

### Setting Up Docker to Run NestJS Locally

To begin harnessing Docker for NestJS development, follow these essential steps:

**1. Install Docker**

Ensure Docker is installed and running on your system. You can download it from the [official Docker website](https://www.docker.com/products/docker-desktop).

**2. Create a Dockerfile**

A `Dockerfile` contains instructions to build a Docker image for your NestJS application.

```dockerfile
# Use the official Node.js 14 image.
FROM node:14

# Set the working directory in the container.
WORKDIR /app

# Copy package.json and package-lock.json to the working directory.
COPY package*.json ./

# Install dependencies.
RUN npm install

# Copy the rest of your application code to the working directory.
COPY . .

# Build the NestJS application.
RUN npm run build

# Expose the port the app runs on.
EXPOSE 3000

# Start the NestJS application.
CMD ["npm", "run", "start:prod"]
```

**3. Build the Docker Image**

Open your terminal, navigate to your project directory, and build the Docker image:

```bash
docker build -t nestjs-app .
```

**4. Run the Docker Container**

Now, you can run your NestJS application inside a Docker container:

```bash
docker run -p 3000:3000 nestjs-app
```

Your application should now be available at `http://localhost:3000`.

### Deploying NestJS with Docker to a Third-Party Service

After establishing your local development environment with Docker, deploying your application to a third-party service is the next logical step.

**1. Choose a Suitable Deployment Service**

Platforms such as [AWS Elastic Beanstalk](https://aws.amazon.com/elasticbeanstalk/), [Google Cloud Run](https://cloud.google.com/run), and [Heroku](https://www.heroku.com/) are popular choices for hosting containerized applications. Each offers unique features, but they generally require a Docker image to deploy.

**2. Push Your Docker Image to a Container Registry**

Services like [Docker Hub](https://hub.docker.com/) or [Google Container Registry](https://cloud.google.com/container-registry) store Docker images that can be accessed during deployment.

For Docker Hub:

```bash
docker tag nestjs-app your-dockerhub-username/nestjs-app
docker push your-dockerhub-username/nestjs-app
```

**3. Deploy Using the Chosen Service**

Each third-party service has specific deployment procedures. Typically, you configure your service to pull the Docker image from your registry and manage deployments via their respective interfaces or CLI tools.

### Additional Tips for Dockerizing NestJS

- **Utilize Docker Compose**: For handling multi-container NestJS applications (e.g., incorporating databases or caching layers). Docker Compose allows you to define and run multi-container Docker applications.

- **Optimize Dockerfile**: Minimize the number of layers in your Dockerfile and avoid using resource-heavy base images.

- **Environment Variables**: Use environment variables to manage different configurations for development, testing, and production stages.

### Conclusion

Integrating Docker into your NestJS development and deployment processes transforms the way you build applications. Whether running your application locally or deploying to third-party services, Docker provides a reliable and efficient pathway from development to production. Explore more about using Docker with Node.js frameworks and consider sharing your experiences on platforms like [Medium](https://medium.com/) or tech communities such as [Dev.to](https://dev.to/). The benefits of Docker are clear, and its impact on speeding up the development and deployment process is undeniably beneficial.

Discover the benefits of using Docker to run NestJS locally and deploy efficiently to third-party services.

Boost NestJS Development with Docker


Navigating the world of backend development, specifically using the Node.js framework NestJS, can be a game changer for developers. Known for its efficiency and scalability, NestJS is styled after Angular, making it intuitive for developers familiar with the Angular ecosystem. One integral part of NestJS applications is the use of middleware—a crucial component in controlling the request-response cycle. This guide will delve into understanding how NestJS middleware functions, provide complex examples, and show how to implement it effectively. 

### Understanding NestJS Middleware

In NestJS, middleware acts as a function operating during the request and response cycle, essentially intercepting the requests sent to a server. This allows developers to execute baseline processing on requests, filter requests, inject properties into requests, log requests, and much more. Middleware can either be third-party or custom-made to suit the specific needs of applications.

#### Types of Middleware

1. **Application Middleware**: Executed for every route handler.
2. **Router Middleware**: Binds to a specific router, allowing selective execution.

### The Essentials of Middleware Implementation

To implement middleware in NestJS, follow these steps:

1. **Create a Middleware**: Define a middleware class implementing the `NestMiddleware` interface.
   
   ```typescript
   import { Injectable, NestMiddleware } from '@nestjs/common';
   import { Request, Response, NextFunction } from 'express';

   @Injectable()
   export class LoggerMiddleware implements NestMiddleware {
     use(req: Request, res: Response, next: NextFunction) {
       console.log(`Request...`);
       next();
     }
   }
   ```

2. **Apply Middleware**: Include it in the module using the `configure` method from the `NestModule` interface.
   
   ```typescript
   import { MiddlewareConsumer, Module, NestModule } from '@nestjs/common';
   import { LoggerMiddleware } from './logger.middleware';

   @Module({
     imports: [],
   })
   export class AppModule implements NestModule {
     configure(consumer: MiddlewareConsumer) {
       consumer
         .apply(LoggerMiddleware)
         .forRoutes('cats');
     }
   }
   ```

### Complex Middleware Use Case

To illustrate the capabilities and flexibility of middleware within NestJS, let's tackle a complex use case—a request validation middleware that checks for valid API keys before proceeding with the request.

#### Step 1: Define the Validation Middleware

The middleware will check incoming requests for a valid API key and either allow or deny access based on its presence and validity.

```typescript
import { Injectable, NestMiddleware, UnauthorizedException } from '@nestjs/common';
import { Request, Response, NextFunction } from 'express';

@Injectable()
export class ApiKeyMiddleware implements NestMiddleware {
  use(req: Request, res: Response, next: NextFunction) {
    const apiKey = req.headers['x-api-key'];
    if (!apiKey || apiKey !== 'my-secret-key') {
      throw new UnauthorizedException('Invalid API key');
    }
    next();
  }
}
```

#### Step 2: Integrate Middleware into Routes

Incorporate this middleware into appropriate application routes to ensure requests are authenticated before reaching their controllers.

```typescript
import { MiddlewareConsumer, Module, NestModule } from '@nestjs/common';
import { ApiKeyMiddleware } from './apikey.middleware';

@Module({
  imports: [],
})
export class AppModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer
      .apply(ApiKeyMiddleware)
      .forRoutes('*');  // Apply globally or specify certain routes
  }
}
```

### Middleware and the Middleware Stack

NestJS allows stacking multiple middleware to create a robust pipeline. This functionality means that you can handle logging, authentication, error handling, and more in a streamlined, performant manner. Middleware runs in sequence from top to bottom within the stack, allowing intricate request manipulation through a layered approach.

### Conclusion

Middleware is a powerful aspect of NestJS, unlocking numerous possibilities for enhancing application capabilities. Whether for logging, validation, or manipulation, effectively leveraging middleware can greatly optimize your backend structuring and workflow. By following this guide on NestJS middleware, web developers can create more secure and efficient applications, leading to refined user experiences and impactful application performance.

For more information, delve into the [NestJS documentation](https://docs.nestjs.com/middleware) to explore additional features and applications of middleware in your development journey.

Discover how NestJS middleware works and how to implement it with complex examples. A guide tailored for advanced NestJS applications.

Mastering NestJS Middleware: Implementation Guide


The landscape of web development is constantly evolving, and as a developer, it can be challenging to keep up with the latest frameworks and technologies. While Laravel has been a popular choice among PHP developers for years, NestJS is quickly gaining traction in the Node.js community. In this article, we'll delve into the key differences between Laravel and NestJS, as well as the advantages of migrating over to NestJS for modern web development.

## Laravel vs. NestJS: The Key Differences

### Architecture

**Laravel**: Laravel is a PHP-based web application framework that follows the Model-View-Controller (MVC) architectural pattern. Laravel is known for its elegant syntax and powerful tools, such as Eloquent ORM, an expressive syntax that simplifies database querying, and robust CLI functionality with Artisan.

**NestJS**: NestJS is a progressive Node.js framework for building scalable and maintainable server-side applications. Unlike Laravel, NestJS is heavily inspired by Angular and implements a modular architecture based on "modules" and "providers". It adheres to the SOLID principles, which results in a more structured codebase and improved maintainability. Additionally, NestJS embraces TypeScript by default, but can also work with vanilla JavaScript.

### Learning Curve

**Laravel**: Given its years of popularity and the large PHP community, Laravel has an abundance of learning resources, ranging from official documentation to online tutorials, making it relatively easy to learn for PHP developers.

**NestJS**: While NestJS has a smaller community and fewer resources compared to Laravel, those familiar with Angular will find it easier to transition to NestJS, as it borrows concepts like dependency injection and decorators from Angular.

### Performance

**Laravel**: As a PHP framework, Laravel's performance may not be as optimal compared to Node.js-based frameworks, especially when it comes to event-driven and non-blocking scenarios.

**NestJS**: Running on top of Node.js, NestJS benefits from the asynchronous nature and exceptional I/O performance of the Node.js environment, making it an excellent option for high-traffic or real-time applications.

### Ecosystem

**Laravel**: Laravel has a mature ecosystem with a vast range of stable packages and tools, like Laravel Nova, Laravel Spark, and Laravel Forge, to help you build powerful applications.

**NestJS**: Although the NestJS ecosystem is growing, it currently doesn't match the wide variety of packages available for Laravel. Nonetheless, since NestJS is built on Node.js, it can take advantage of the massive npm registry to find suitable packages for various use cases.

## Pros of Moving to NestJS

1. **Scalability**: With its modular architecture and Node.js foundation, NestJS enables the development of highly scalable applications that can handle a large number of concurrent connections with ease.

2. **Type Safety with TypeScript**: NestJS is built with TypeScript, which provides static typing and improved tooling, thereby allowing developers to catch errors early and write more robust code.

3. **Code Organization**: Relying on SOLID principles and Angular-like structure, NestJS promotes a cleaner, more maintainable codebase, which facilitates better collaboration within development teams.

4. **Real-time Applications**: NestJS supports the development of real-time applications out of the box, making it easier to build WebSockets or GraphQL-based applications.

5. **Active Community and Future Prospects**: NestJS has an active and growing community, which translates to regular updates, new packages, and support from the developer ecosystem.

In conclusion, NestJS may represent the future of web development— but that doesn't mean Laravel is going away anytime soon. Ultimately, the choice to migrate from Laravel to NestJS will depend on your project requirements, the skill sets of your team, and your familiarity with the language and architectural concepts. Regardless of which framework you choose, continue to expand your skill set and embrace new technologies to stay ahead in the ever-evolving landscape of web development.

Jump into this insightful guide on moving from Laravel to NestJS - learn the key differences, the pros of NestJS, and how it can transform your web development experience.

Delving Developer

Beginner's Guide to Vue 3: Build a Basic App

Create Custom Decorators in NestJS Easily

Boost NestJS Development with Docker

Mastering NestJS Middleware: Implementation Guide

Moving from Laravel to NestJS: Key Differences and Benefits