
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


NestJS, a progressive Node.js framework, is renowned for its robust architecture and scalability. When it comes to securing web applications, authentication and authorization are critical aspects. In this article, we will delve into how to implement JSON Web Tokens (JWT) for authentication and authorization in a NestJS application, ensuring your application remains secure while providing a seamless user experience.

### Understanding Authentication and Authorization

Before diving into NestJS specifics, it's crucial to differentiate between authentication and authorization. Authentication is the process of verifying the identity of a user, while authorization determines what resources or actions a user has access to. Together, they form a comprehensive security solution for web applications.

### What is JWT?

JSON Web Tokens (JWT) are an open standard (RFC 7519) used to securely transmit information between parties as a JSON object. They are compact, self-contained, and can be used for authentication and information exchange. A typical JWT consists of three parts: a header, a payload, and a signature, encoded as a base64 string.

- **Header:** Contains the algorithm and token type.
- **Payload:** Contains claims, which are statements about an entity and additional metadata.
- **Signature:** Verifies the sender of the JWT and ensures the message wasn't altered.

### Setting Up a NestJS Application

To begin, ensure you have NestJS CLI installed and create a new NestJS project:

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

Navigate to your project directory:

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

### Installing Necessary Packages

For JWT authentication, we'll need to install the following packages:

- `@nestjs/jwt`: Provides JWT utilities.
- `passport-jwt`: A Passport strategy for handling JWTs.
- `passport`: Middleware for Node.js that simplifies authentication.

Install the packages with:

```bash
npm install @nestjs/jwt passport passport-jwt
```

### Implementing JWT Authentication

1. **Creating the Authentication Module**

First, generate an `auth` module:

```bash
nest generate module auth
```

2. **Creating the AuthService**

Generate a service within the auth module for handling authentication logic:

```bash
nest generate service auth
```

Within `auth.service.ts`, write a function to validate the user's credentials and return a JWT:

```typescript
import { Injectable } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';

@Injectable()
export class AuthService {
  constructor(private jwtService: JwtService) {}

  async validateUser(username: string, password: string): Promise<any> {
    // Simulated user validation logic
    if (username === 'test' && password === 'test123') {
      return { username };
    }
    return null;
  }

  async login(user: any) {
    const payload = { username: user.username };
    return {
      access_token: this.jwtService.sign(payload),
    };
  }
}
```

3. **Setting Up JWT Strategy**

Create a JWT strategy to handle token verification. Generate a new file `jwt.strategy.ts` in the auth folder:

```typescript
import { Injectable } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { ExtractJwt, Strategy } from 'passport-jwt';

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor() {
    super({
      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
      ignoreExpiration: false,
      secretOrKey: 'secretKey',
    });
  }

  async validate(payload: any) {
    return { username: payload.username };
  }
}
```

4. **Integrating JWT in the Auth Module**

Update the `auth.module.ts` to include the JWT and Passport strategies:

```typescript
import { Module } from '@nestjs/common';
import { JwtModule } from '@nestjs/jwt';
import { PassportModule } from '@nestjs/passport';
import { AuthService } from './auth.service';
import { JwtStrategy } from './jwt.strategy';

@Module({
  imports: [
    PassportModule,
    JwtModule.register({
      secret: 'secretKey',
      signOptions: { expiresIn: '60s' },
    }),
  ],
  providers: [AuthService, JwtStrategy],
  exports: [AuthService],
})
export class AuthModule {}
```

### Applying Authentication Guards

Now, protect specific routes using NestJS guards. Create a `jwt-auth.guard.ts` file:

```typescript
import { Injectable } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';

@Injectable()
export class JwtAuthGuard extends AuthGuard('jwt') {}
```

Apply this guard to routes that require authentication:

```typescript
import { Controller, Get, UseGuards } from '@nestjs/common';
import { JwtAuthGuard } from './auth/jwt-auth.guard';

@Controller('profile')
export class ProfileController {
  @UseGuards(JwtAuthGuard)
  @Get()
  getProfile() {
    return {
      message: 'This is a protected route',
    };
  }
}
```

### Conclusion

In conclusion, JWT is a powerful way to handle authentication and authorization in your NestJS applications. It provides a scalable and efficient means to secure APIs. By understanding the mechanics of JWTs and integrating them with NestJS's powerful tools, you can ensure your applications remain secure and performant.

For further reading on JWTs, consider exploring [MDN's documentation on JSON Web Tokens](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes) to gain deeper insights into their usage and benefits.

Secure NestJS apps with JWT authentication & authorization.

Implement JWT Authentication in NestJS


Building a full-stack video streaming application using NestJS and React is a rewarding project that enables web developers to harness the power of two robust technologies. Whether you're a seasoned developer or just starting, this guide will walk you through creating a seamless video streaming experience. We'll cover everything from setting up your development environment to deploying your application.

## Prerequisites

Before diving into the development process, ensure you have the following:

- Node.js installed on your machine. You can download it from [Node.js](https://nodejs.org/).
- Basic understanding of JavaScript, TypeScript, React, and NestJS.
- MongoDB Atlas account for database management. Sign up at [MongoDB Atlas](https://www.mongodb.com/atlas).

## Setting Up Your Development Environment

### Step 1: Initialize Your Project

Start by creating a new directory for your application. Inside this directory, initialize a new NestJS project:

```bash
mkdir video-streaming-app
cd video-streaming-app
nest new backend
```

Set up a new React project:

```bash
npx create-react-app frontend
cd frontend
npm install axios react-router-dom
```

### Step 2: Set Up Backend with NestJS

NestJS is a progressive Node.js framework that's great for building efficient and scalable server-side applications. We'll use NestJS as our backend framework to handle video uploads and metadata.

1. **Install Dependencies**: Inside the backend directory, install the required dependencies:

   ```bash
   npm install mongoose multer
   ```

   - **Mongoose** for handling MongoDB operations.
   - **Multer** for managing file uploads.

2. **Configure MongoDB**: Connect your backend to MongoDB Atlas. In `src/app.module.ts`, replace the MongoDB URI with your connection string.

3. **Create File Upload Service**: Create a service to handle video uploads, using Multer middleware for parsing multipart/form-data.

4. **Generate a Video Module**: Use Nest CLI to create a new module for videos:

   ```bash
   nest generate module videos
   nest generate service videos
   nest generate controller videos
   ```

### Step 3: Build Frontend with React

React will serve as the frontend framework, responsible for the user interface and experience. We'll handle client-side routing and HTTP requests.

1. **Set Up Routing**: Use `react-router-dom` to handle navigation between components like video upload and video player.

2. **Creating Components**: Develop components such as `UploadVideo`, `VideoPlayer`, and `VideoList` to enable uploading, playing, and listing of videos.

3. **API Integration**: Utilize `axios` for making HTTP requests to the NestJS backend.

### Step 4: Implementing Core Features

#### Video Upload

- **Backend**: Use Multer in the NestJS app to handle file streams.
  
  ```typescript
  @Post('upload')
  @UseInterceptors(
    FileInterceptor('file', {
      storage: diskStorage({
        destination: './uploads',
        filename: (req, file, cb) => {
          const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
          cb(null, file.fieldname + '-' + uniqueSuffix);
        }
      })
    })
  )
  uploadFile(@UploadedFile() file: Express.Multer.File) {
    console.log(file);
  }
  ```

#### Video Streaming

- **Backend**: Implement video streaming using HTTP Range requests.
  
  ```typescript
  @Get('stream/:id')
  streamVideo(@Param('id') id: string, @Res() res: Response) {
    const videoPath = path.resolve(__dirname, '..', 'uploads', `${id}.mp4`);
    const videoSize = fs.statSync(videoPath).size;

    const headers = {
      'Content-Range': `bytes 0-${videoSize}/${videoSize}`,
      'Accept-Ranges': 'bytes',
      'Content-Length': videoSize,
      'Content-Type': 'video/mp4',
    };

    res.writeHead(206, headers);
    const videoStream = fs.createReadStream(videoPath);
    videoStream.pipe(res);
  }
  ```

- **Frontend**: Use the `<video>` HTML element to stream the video content.

  ```jsx
  <video src={`http://localhost:3000/videos/stream/${videoId}`} controls />
  ```

## Deployment and Scalability

Deploy your application using services like Heroku or Vercel for the frontend and AWS or DigitalOcean for the backend. Refer to their documentation for guidelines regarding hosting and scaling your applications.

## Enhancing Your Application

Consider incorporating features such as user authentication, a commenting system, and recommendations based on user preferences. Integrate a front-end framework like Material-UI or TailwindCSS for an improved UI.

For more detailed information about NestJS and React, you may refer to the [NestJS Documentation](https://docs.nestjs.com/) and [React Documentation](https://react.dev/).

By following this guide, you've created a foundation for a full-stack video streaming application using NestJS and React. Keep exploring, improving your application, and pushing the boundaries of web development with innovative technologies.

Discover how to create a video streaming app with NestJS and React. Improve your web development prowess with practical insights.

Build a Full-Stack Video Streaming App with NestJS & React


In the ever-evolving landscape of web development, CSS Grid stands out as a robust and versatile layout system that has revolutionized the way developers approach web design. With its ability to create complex layouts with precision and ease, CSS Grid has quickly become an essential tool for web designers and developers alike. In this article, we will delve into the fundamentals of CSS Grid and explore its practical use cases, providing insights and examples to help you master this powerful layout system.

### What is CSS Grid?

CSS Grid is a layout system available in CSS that allows web developers to create complex and responsive web page layouts efficiently. Unlike flexbox, which is primarily a one-dimensional system that deals with either rows or columns, CSS Grid is a two-dimensional layout system. This means you can handle both rows and columns, making it perfect for creating intricate grid-based designs.

CSS Grid is equipped with new properties for defining areas of your web page and placing child elements within them. This flexibility enables developers to simplify HTML markup and CSS while maintaining precision in layout design.

### Key Concepts and Terminology

To effectively use CSS Grid in your web projects, it is important to understand the key concepts and terminology:

- **Grid Container**: The element on which `display: grid` is applied. It becomes the parent container for all grid items.

- **Grid Item**: The direct children of the grid container that participate in the grid layout.

- **Grid Lines**: The dividing lines that form the structure of the grid.

- **Grid Tracks**: The space between two adjacent grid lines, which can be rows or columns.

- **Grid Area**: A rectangular space defined by four grid lines.

- **Grid Cell**: A single unit of a grid area where a row and column intersect.

### Creating a Basic Grid

To create a grid, you first transform a container into a grid container using `display: grid`. Here's a basic example:

```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}
```

In this example, `grid-template-columns` defines three columns, each taking up an equal fraction of the available space, and `grid-template-rows` specifies two rows, each 100 pixels tall. The `gap` property creates a spacing of 10 pixels between grid items.

### Responsive Design with CSS Grid

One of the major advantages of CSS Grid is its capacity to build responsive layouts seamlessly. By utilizing media queries and the `fr` unit, you can create grids that adapt to various screen sizes.

```css
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}
```

In this example, the `auto-fit` keyword automatically adjusts the number of columns based on the container's width, with each column having a minimum size of 200 pixels.

### Use Cases of CSS Grid

#### Complex Web Layouts

CSS Grid is ideal for designing complex web page layouts, such as a magazine, news site, or portfolio. By defining multiple grid areas, alignment is easy, and layouts can be achieved without convolution.

#### Centering Elements

Centering elements on a web page — both vertically and horizontally — can sometimes be challenging. CSS Grid simplifies this with just a few lines of code:

```css
.container {
  display: grid;
  place-items: center;
}
```

#### Overlapping Elements

For creative layouts where elements overlap each other, CSS Grid offers an intuitive solution. You can easily specify grid areas or positions to control the overlapping behavior.

```css
.container {
  display: grid;
  grid-template-areas: 
    "header header"
    "main sidebar"
    "footer footer";
}

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}
```

### Advanced Techniques in CSS Grid

Utilize CSS Grid Template Areas to define specific areas of a layout by naming grid items. This allows you a more semantic control over your layout.

### Conclusion

CSS Grid has transformed the world of web design by providing a feature-rich, streamlined approach to layout design. By mastering the fundamentals and understanding various use cases, you can create dynamic, responsive, and visually appealing websites that stand out in today's competitive web environment. For more detailed guidance and examples, be sure to check out [Mozilla Developer Network's documentation on CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout).

By embracing the capabilities of CSS Grid, developers can enhance their projects and deliver exceptional user experiences.

Explore CSS Grid layout fundamentals and practical use cases in web design.

Mastering CSS Grid Layout: Fundamentals and Use Cases


Creating complex layouts on the web used to be a formidable task. However, with the advent of CSS Grid and Flexbox, web designers and developers have been empowered to design visually appealing, intricate, and responsive layouts without the headaches of earlier methods. Both CSS Grid and Flexbox provide robust tools for layout design, and understanding how to harness their power is essential for modern web development.

### Understanding CSS Grid

CSS Grid excels at creating two-dimensional layouts. It allows developers to define both rows and columns, offering precise control over layout structure. With CSS Grid, you can break free from linear layouts and explore more complex, dynamic arrangements.

#### Key Features of CSS Grid

1. **Grid Container and Items**: The magic begins with defining a grid container. Inside this container, any direct child becomes a grid item.
   
2. **Explicit and Implicit Grids**: An explicit grid allows you to define the number of rows and columns. Anything outside these explicit definitions extends into an implicit grid, which CSS Grid can handle effortlessly.

3. **Grid Lines and Areas**: Grid lines can be used to precisely place items, whereas grid areas can be particularly useful for naming sections of your layout.

4. **Fractional Units**: CSS Grid provides the `fr` unit, which is a flexible length unit that takes available space and divides it into a defined fraction of grid tracks.

5. **Responsive Design**: Media queries work seamlessly with CSS Grid, allowing you to adjust your layouts for different devices.

###### Example:

```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 10px;
}
.item1 {
  grid-column: 1 / 3;
}
```

In this example, three columns are created, each taking an equal amount of available space. The first item stretches over two columns, demonstrating the flexibility of grid lines.

### Dive into Flexbox

Flexbox, or the Flexible Box Layout, is invaluable for managing layouts on a singular axis, be it a row or column. It’s particularly effective for centering elements and distributing space within a container.

#### Key Features of Flexbox

1. **Flexible Items**: Items can grow or shrink to fill space within the flex container.
   
2. **Axis Orientation**: The main axis can change direction with the `flex-direction` property. Options include row, column, row-reverse, and column-reverse.

3. **Alignment and Spacing**: Properties such as `justify-content`, `align-items`, and `align-content` provide multiple options for spacing and alignment.

4. **Item Ordering**: The `order` property allows you to change the visual order without changing the underlying HTML.

###### Example:

```css
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
```

In this example, Flexbox is used to horizontally align child elements within the container with equal spacing around them.

### Combining CSS Grid and Flexbox

While each method has its strengths, combining CSS Grid and Flexbox can lead to even more powerful layouts. Use CSS Grid for the overall page layout, and Flexbox for arranging items within the grid cells.

Example of nested Flexbox within a Grid layout:

```css
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.flex-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

In this setup, the grid divides the page into two areas, each area further organized by Flexbox for precise placement and alignment.

### Responsive Design and Browser Support

Both CSS Grid and Flexbox provide impressive tools for responsive design, crucial for creating websites that work on a multitude of devices. Although browser support for both has matured significantly, always verify compatibility with tools like [Can I Use](https://caniuse.com/).

### Final Thoughts

Proper understanding and implementation of CSS Grid and Flexbox enable web developers to relinquish outdated layout methods and embrace a more streamlined, efficient workflow. Not only does this improve the visual quality of web designs, but it also enhances accessibility and user experience. For further reading and technical details, explore the official documentation at [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout). With practice and creative experimentation, you can leverage these modern CSS tools to orchestrate beautiful, efficient designs effortlessly.

Discover the potential of CSS Grid and Flexbox for creating complex layouts efficiently.

Master Complex Layouts with CSS Grid & Flexbox


NestJS has quickly risen to prominence as a popular framework for building efficient and scalable server-side applications. It extends concepts from Angular and brings them into the backend world with TypeScript, enabling developers to create robust, testable, and maintainable applications. 

Why Choose NestJS?

NestJS stands out because it addresses various challenges of traditional backend development by incorporating both object-oriented and functional programming principles. Its modularity, extensibility, and use of decorators greatly improve developer productivity. With built-in support for TypeScript, NestJS ensures that developers can leverage the full power of type checking and modern JavaScript features.

Setting Up Your Environment

To start developing with NestJS, ensure your development environment is ready:

1. **Node.js**: Ensure you have Node.js installed (version 10.13.0 or newer) as it's essential for running NestJS applications.
  
2. **Nest CLI**: Install the Nest CLI globally using npm:
   ```bash
   npm install -g @nestjs/cli
   ```
   This CLI tool will streamline the process of creating, building, and maintaining NestJS applications.

3. **TypeScript**: Although it comes out-of-the-box with NestJS, make sure you are familiar with TypeScript, as it is integral to the development process.

Creating Your First NestJS Application

Once your environment is set up, use the Nest CLI to create a new project:

```bash
nest new my-nest-app
```

This command scaffolds a new NestJS project with the default setup and installs all necessary dependencies. Navigate to your project directory:

```bash
cd my-nest-app
```

The project structure consists of key components such as modules, controllers, and services, each playing a critical role in your application’s architecture.

Understanding the Core Concepts

1. **Modules**: Often compared to Angular modules, NestJS modules organize applications into cohesive blocks of code. Declare them using the `@Module` decorator. A sample module definition might look like:

   ```typescript
   import { Module } from '@nestjs/common';
   import { AppController } from './app.controller';
   import { AppService } from './app.service';

   @Module({
     imports: [],
     controllers: [AppController],
     providers: [AppService],
   })
   export class AppModule {}
   ```

2. **Controllers**: These handle incoming requests and return responses to the client. A basic controller can be defined as follows:

   ```typescript
   import { Controller, Get } from '@nestjs/common';

   @Controller('cats')
   export class CatsController {
     @Get()
     findAll(): string {
       return 'This action returns all cats';
     }
   }
   ```

3. **Providers and Services**: Services handle any business logic. They are typically encapsulated in a provider and injected into controllers via NestJS's dependency injection system.

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

   @Injectable()
   export class AppService {
     getHello(): string {
       return 'Hello World!';
     }
   }
   ```

Enhancing Application Capabilities

- **Middleware**: Intercept requests and execute bodiless processes. They act similar to middleware in frameworks like Express.

- **Guards**: Implement custom authentication and authorization processes to guard your routes.

- **Interceptors**: Transform or modify requests/responses. A typical use case is to implement caching.

Deploying Your Application

Once development is complete, deployment becomes crucial. NestJS applications can be deployed to various platforms, including traditional VM-based infrastructures and modern containerized setups like Docker and Kubernetes. The modular nature of NestJS simplifies scaling by allowing specific modules to be deployed independently.

Resources for Mastery

As you further delve into NestJS, make use of resources available on the [NestJS Official Documentation](https://docs.nestjs.com/) and explore community-driven content and examples. Consider contributing to the community by sharing insights or challenges you encounter, perhaps through blog posts or open-source contributions.

Embracing this powerful framework can transform how you approach backend development, laying the groundwork for building feature-rich applications. Dive into the enthralling world of NestJS and unlock its potential today!

Begin your NestJS adventure with our beginner-friendly guide to setting up and developing apps.

Delving Developer

Implement JWT Authentication in NestJS

Build a Full-Stack Video Streaming App with NestJS & React

Mastering CSS Grid Layout: Fundamentals and Use Cases

Master Complex Layouts with CSS Grid & Flexbox

Get Started with NestJS: A Guide for Beginners