
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


When it comes to crafting visually engaging web designs, CSS offers a plethora of tools and properties to elevate aesthetics and user experience. Among those, CSS shapes and the clip-path property stand out as powerful features for developers eager to bring a touch of creativity and innovation to their projects. In this article, we will delve into the use of CSS shapes and clip-path, explore their syntax, discuss practical applications, and see how they can be used to create captivating web designs.

CSS Shapes and clip-path allow developers to define geometric shapes without the need for custom graphics or images. These tools open up new possibilities for layouts and visual compositions, enabling developers to create aesthetically pleasing and unique designs.

### Understanding CSS Shapes

CSS shapes enable developers to wrap content around custom shapes instead of the typical rectangular shape. Using the `shape-outside` property, content can be arranged to follow a non-rectangular path, creating a more harmonious and fluid design.

#### Basic Usage

Here's a basic example of using the `shape-outside` property with the `circle` function:

```css
.float-image {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: circle(50%);
  clip-path: circle(50%);
}
```

In this example, an image with a circular shape has text wrapped around it. This result offers a contrast to conventional rectangular layouts, creating visual interest and improving the flow of textual content.

#### Supported Functions

CSS shapes support various functions, such as `circle()`, `ellipse()`, and `polygon()` which allow for diverse and complex designs:

- **circle()**: Defines a circle with `radius` as percentage or length.
- **ellipse()**: Similar to circle, but with two radii for more flexibility.
- **polygon()**: Offers greater control by defining any polygon with a series of points.

### Exploring the CSS clip-path Property

The `clip-path` property is another remarkable tool that developers can use to create intricate designs without depending on images or graphics. This property allows you to control which part of an element should be visible by defining a clipping region.

#### Using clip-path

The `clip-path` property can be used in the same way as CSS shapes functions. By applying this property to an element, you can create sophisticated designs:

```css
.clip-element {
  width: 300px;
  height: 300px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
```

The example above uses the `polygon()` function to clip an element into a triangular shape, showcasing how developers can make dynamic, eye-catching designs.

### Practical Applications

#### Asymmetrical Layouts

By combining CSS shapes and the clip-path property, developers can break away from symmetrical, grid-based layouts. This allows for the creation of more organic and natural compositions, which can engage users and improve readability.

#### Enhancing Branding

Unique shapes can be used to align more closely with a brand’s identity. For instance, using circular or triangular shapes reminiscent of a brand’s logo can enhance recognition and brand association.

#### Interactive Design

With CSS shapes and clip-path, interactive elements such as buttons or hover effects can be transformed into more engaging components. For example, a button can take on diverse shapes that change on hover, guiding users’ attention and adding a layer of interest.

### Compatibility and Performance

While CSS shapes and the clip-path property are extensively supported in modern browsers, ensuring compatibility across all devices is essential. Tools like [Can I use](https://caniuse.com/) can help verify the compatibility of these features with different versions of browsers.

### Conclusion 

CSS shapes and the clip-path property provide developers with the tools to transcend traditional design patterns, fostering creativity and a more engaging visual experience. By integrating these properties into web projects, developers can craft innovative layouts that captivate users and convey content in a fresh and inviting manner. For further reading and to deepen your understanding of these techniques, browse the comprehensive documentation on [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path) which offers detailed information and further examples. 

Whether you are revamping an existing website or crafting a new one from scratch, leveraging CSS shapes and clip-path can set your designs apart, resonating with users through both functionality and aesthetics.

Learn how CSS shapes and clip-path transform web designs, enhancing creativity and aesthetics.

Mastering CSS Shapes and Clip-Path for Web Creativity


State management is a crucial aspect of any robust web application. Vue.js, a progressive JavaScript framework, offers flexible ways to manage the state of your applications through a variety of tools. In this article, we'll dive deep into Vuex, the official state management library for Vue.js, various alternatives, and tips on when to employ them to build scalable and maintainable applications.

### Understanding State Management

State management refers to the handling of data that components in an application share and interact with. As your application grows in complexity, managing state becomes critical for ensuring seamless data flow and maintaining code readability. This is where Vue.js shines, thanks to its support for advanced state management techniques.

### Vuex: The Official State Management Library

Vuex is the go-to state management library for Vue.js applications. It operates on the principles of a centralized store, enabling predictable state mutation through actions and mutations. Here are key features of Vuex that make it a preferred choice:

- **Centralized Store**: Vuex provides a centralized store for all components in your application, which encourages a single source of truth.
- **Reactive**: Vuex ensures that any updates to the state are reactive and automatically propagate throughout the components.
- **DevTools Integration**: Vuex integrates seamlessly with Vue.js DevTools, aiding in state snapshotting, time-travel debugging, and zero-setup hot module replacement.
- **Modularity**: Large applications can be organized into modules, aiding in code organization and scalability.

An example of a simple Vuex store implementation is as follows:

```javascript
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    counter: 0
  },
  mutations: {
    increment(state) {
      state.counter++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});
```

In this example, Vuex's initialization provides a straightforward syntax for managing application-wide state.

### Alternatives to Vuex

While Vuex is widely used, some scenarios may benefit from alternative solutions due to differing project requirements or simplicity considerations:

1. **Pinia**: As the next-generation state management library for Vue.js, Pinia offers a more streamlined experience than Vuex. It's especially praised for its simpler API design and TypeScript support. Pinia is Vue 3 compatible and is becoming increasingly popular as a Vuex alternative.

2. **Composition API**: With Vue 3, the Composition API has emerged as a lightweight state management option. It involves using reactive references and computed properties directly in components, negating the need for an external library in smaller applications.

3. **Apollo Client**: For Vue.js applications utilizing GraphQL, Apollo Client can manage local state alongside remote queries, bypassing complex setups. This library serves data-fetching and state-managing purposes efficiently, especially when most of the state is remote.

4. **Using Reactivity API**: Vue.js's own reactivity system can be leveraged for basic state management, thanks to reactive compositions—ideal for mid-size projects not requiring Vuex-level complexity.

### When to Use Vuex or Its Alternatives

Choosing between Vuex and its alternatives depends on the scope and characteristics of your project:

- **Use Vuex** when your application has more than a few store modules to manage, requires structured data flow, or when you need advanced features such as debugging and hot-reloading.

- **Opt for Pinia** if you value TypeScript support or if you're looking for a more modern approach that remains familiar to Vuex users.

- **Consider Composition API** for smaller projects using Vue 3, where introducing an external library might be redundant.

- **Select Apollo Client** if your application heavily relies on GraphQL, allowing you to pair server-side state with client-side.

- **Employ Reactivity API** if you aim for quick setups and prefer a minimalistic approach in your state management.

In conclusion, choosing the right state management solution for Vue.js applications is integral to ensure scalability and maintainability. Whether you decide on Vuex, try out its alternatives like Pinia, or explore other options like Apollo Client and Composition API, each method offers unique benefits tailored to different application needs.

For more information, check the [official Vuex documentation](https://vuex.vuejs.org/) and explore [Pinia's guide](https://pinia.vuejs.org/). Additionally, you might want to delve into the Composition API and the reactivity fundamentals at the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript) to further your understanding of dynamic state management with Vue.js.

Discover Vue.js state management solutions, including Vuex and alternatives, to enhance your application's scalability.

Master Vue.js State Management: Vuex & Alternatives


Creating a tooltip component in Vue 3 is a rewarding exercise that leverages the reactive nature of Vue to enhance your web applications. Tooltips provide additional information and improve user experience by offering concise details on hover or focus. Let's dive into building a simple yet effective tooltip component using Vue 3.

## Why Use Tooltips?

Tooltips are crucial for augmenting a user's understanding of an interface, especially in data-driven applications where clarity is key. They serve as non-intrusive components that provide context, hints, or explanations for elements within an application.

## Setting Up Your Vue 3 Project

First things first, let's set up a basic Vue 3 project. If you haven’t already, install Vue CLI to begin:

```bash
npm install -g @vue/cli
vue create vue-tooltip-project
cd vue-tooltip-project
```

After initializing your project, navigate into your project directory and open the source files.

## Creating the Tooltip Component

In your `src/components/` directory, create a new file named `Tooltip.vue`. This component will be reusable and customizable to fit various needs.

### Step 1: Define the Basic Template

The template consists of a container that wraps the default slot content and a tooltip element that will appear on hover.

```html
<template>
  <div class="tooltip-container" @mouseover="showTooltip" @mouseleave="hideTooltip">
    <slot></slot>
    <div v-if="isVisible" class="tooltip">{{ text }}</div>
  </div>
</template>
```

### Step 2: Craft Your Script

Within the `<script>` section, define the component's logic. Use Vue 3's Composition API to create reactive data properties.

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

export default {
  name: 'Tooltip',
  props: {
    text: {
      type: String,
      required: true
    }
  },
  setup() {
    const isVisible = ref(false);

    const showTooltip = () => {
      isVisible.value = true;
    };

    const hideTooltip = () => {
      isVisible.value = false;
    };

    return {
      isVisible,
      showTooltip,
      hideTooltip
    };
  }
};
</script>
```

### Step 3: Style Your Tooltip

Add styles to make the tooltip visually appealing and ensure it appears near your component.

```css
<style scoped>
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1000;
  opacity: 0.9;
}
</style>
```

## Implementing the Component

Now that the Tooltip.vue is ready, it's time to use it within another component. Let's implement it in `src/App.vue`:

```html
<template>
  <div id="app">
    <h1>Vue 3 Tooltip Example</h1>
    <Tooltip text="This is a helpful tooltip!">
      <button>Hover over me!</button>
    </Tooltip>
  </div>
</template>

<script>
import Tooltip from './components/Tooltip.vue';

export default {
  components: {
    Tooltip
  }
};
</script>
```

## Further Enhancements

To make your Tooltip component more robust, consider the following improvements:

- **Event-Driven Tooltips**: Besides `mouseover`, implement tooltips that appear on other events, like `focus` for accessibility purposes.
- **Dynamic Positioning**: Update the tooltip position based on screen real estate to ensure it never goes off-screen.
- **Fade-in/out Effects**: Use Vue's transition component to add smooth animations.

For more in-depth study of Vue transitions and animations, the [MDN Web Docs on CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) offers comprehensive guidance.

By utilizing Vue 3's powerful Composition API, you can create interactive, reusable UI components like tooltips with ease. This not only enhances functionality but also improves user experience within your application.

Leverage these strategies to build a wide range of components, and you'll find your Vue 3 applications becoming more engaging and user-friendly. Visit the [Vue.js documentation](https://v3.vuejs.org/) for more insights on mastering Vue 3 development.

Create an interactive tooltip component in Vue 3 seamlessly.

Building a Tooltip Component in Vue 3


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.

Delving Developer

Mastering CSS Shapes and Clip-Path for Web Creativity

Master Vue.js State Management: Vuex & Alternatives

Building a Tooltip Component in Vue 3

Implement JWT Authentication in NestJS

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