Why does JavaScript interpret leading zeros differently?

A long time ago, in many programming languages like C, numbers with leading zeros were treated as octal (base 8) numbers. JavaScript followed this rule too. So, when a number starts with a zero (0), JavaScript thinks it’s an octal number.

Surprising Examples of Leading Zeros in JavaScript

Here’s what Lala Ji found:

let number = 010;
console.log(number); // Output: 8

You might think number would be 10, but it's actually 8! That’s because 010 is seen as an octal number, which is 8 in decimal (base 10).

Understanding Different Number Bases in JavaScript

JavaScript also understands other bases:

• Hexadecimal (base 16): Starts with 0x or 0X.

• Binary (base 2): Starts with 0b or 0B.

• Octal (base 8): In modern JavaScript (ES6), use 0o or 0O.

For example:

let hex = 0x1A;    // Hexadecimal 1A -> Decimal 26
let binary = 0b1010; // Binary 1010 -> Decimal 10
let octal = 0o10;    // Octal 10 -> Decimal 8

How parseInt Handles Leading Zeros in JavaScript

The parseInt function turns strings into numbers. It can take a second argument called the radix, which tells it what base to use.

Without the radix, parseInt might confuse you:

let number1 = parseInt('010'); // Thinks it's octal -> 8
let number2 = parseInt('10');  // Thinks it's decimal -> 10

Always give the radix to avoid confusion:

let number1 = parseInt('010', 10); // Parse as decimal -> 10
let number2 = parseInt('010', 8);  // Parse as octal -> 8

Best Practices to Avoid Confusion with Leading Zeros in JavaScript

1. Don't Use Leading Zeros: Don’t use leading zeros for decimal numbers. Use strings if you need to pad.

    let number = 10;       // Correct
    let paddedNumber = '010'; // Use a string for padding
   

2. Use Clear Prefixes: Use 0o for octal, 0b for binary, and 0x for hexadecimal.

    let octal = 0o10;    // Clear octal
    let binary = 0b1010; // Clear binary
    let hex = 0x1A;      // Clear hexadecimal
   

3. Use Strict Mode: Turn on strict mode to stop using old octal numbers.

    'use strict';
    let number = 010; // Error: Octal numbers not allowed in strict mode.
   

4. Specify Radix withparseInt: Always give the radix when using parseInt.

    let decimal = parseInt('10', 10); // Clear decimal
    let octal = parseInt('10', 8);    // Clear octal
   

Conclusion

Thanks to Lala Ji, we learned something cool about JavaScript. Knowing these quirks helps us write better code. Always be curious and keep learning!

Happy coding!

NestJS, a framework built on top of Node.js, offers a robust and structured architecture for building scalable and maintainable applications. At its core are three fundamental concepts: Modules, Controllers, and Providers. In this comprehensive guide, we will delve into each of these components to gain a deep understanding of how they contribute to the overall architecture of a NestJS application.

1. Understanding NestJS Modules

Modules are the cornerstone of NestJS applications, serving as containers for organizing related components. Here's a closer look at their key characteristics:

• Modularity: Modules encapsulate a cohesive set of features, promoting code organization and maintainability.
• Dependency Management: NestJS manages dependencies between modules, ensuring that components can be easily reused and tested.
• Entry Point: Every NestJS application must have at least one module, known as the root module, which serves as the entry point for the application.
• Hierarchical Structure: Modules can import functionality from other modules, enabling the composition of complex applications from smaller, reusable modules.

2. Exploring NestJS Controllers

Controllers are responsible for handling incoming requests and producing appropriate responses. Let's delve into their core functionalities:

• Request Handling: Controllers define routes and their corresponding request handling methods.
• Decorators: Controllers are annotated with decorators such as @Controller() and HTTP method decorators (@Get(), @Post(), etc.) to define their scope and route mappings.
• Separation of Concerns: Controllers delegate the actual request processing to corresponding service classes, promoting the separation of concerns.

3. Dive into NestJS Providers

Providers are injectable components responsible for encapsulating various functionalities. Here's what you need to know about them:

• Injectable Components: Providers can be services, repositories, factories, or any other injectable component.
• Dependency Injection: NestJS leverages dependency injection to manage the lifecycle of providers and facilitate loose coupling between different components.
• Decorator: Providers are annotated with the @Injectable() decorator to indicate that they can be injected into other components.
• Seamless Integration: Providers can be injected into controllers, other providers, or even modules, enabling seamless integration and extensibility.

4. Module Organization and Dependency Injection

Proper organization of modules and effective use of dependency injection are crucial for building maintainable NestJS applications. Here are some best practices:

• Single Responsibility Principle (SRP): Design controllers and services with a single responsibility in mind, promoting code clarity and maintainability.
• Modular Design: Keep modules focused on specific functionalities to enhance modularity and reusability.
• Providers as Singletons: Providers declared within a module are automatically treated as singletons, ensuring that the same instance is reused throughout the module.

5. Best Practices and Tips for NestJS Architecture

To build robust and scalable applications with NestJS, consider the following best practices:

• Use Guards and Interceptors: Implement guards and interceptors to handle cross-cutting concerns such as authentication, authorization, and logging in a reusable and decoupled manner.
• Middleware Usage: Leverage middleware for request pre-processing and post-processing tasks, enhancing the flexibility and extensibility of your application.
• Regular Refactoring: Regularly review and refactor your application architecture to ensure scalability and maintainability as the application grows and evolves.
• Documentation and Testing: Document your code thoroughly and invest in comprehensive testing to ensure the reliability and robustness of your NestJS applications.

Conclusion

Understanding the architecture of NestJS is essential for building scalable and maintainable Node.js applications. By mastering the concepts of modules, controllers, and providers, developers can design applications that are not only efficient and performant but also easy to manage and evolve over time. Embracing NestJS's modular architecture enables developers to create applications that meet the evolving needs of their users and stakeholders.

NestJS, with its modular architecture and robust features, empowers developers to build scalable and maintainable applications. Two essential features that contribute significantly to NestJS's versatility and security are Guards and Custom Decorators. In this comprehensive guide, we'll delve into the world of Guards and Custom Decorators in NestJS, exploring their functionalities, use cases, and best practices for mastering them.

Understanding Guards:

Guards in NestJS act as middleware components that intercept incoming requests before they reach route handlers. They allow developers to implement authentication, authorization, rate limiting, and other custom logic to control access to routes and resources within an application.

Creating Custom Guards:

To create custom guards in NestJS, developers can implement classes that adhere to the CanActivate interface for synchronous guards or the CanActivate interface for asynchronous guards. Within the guard class, they implement the canActivate() method, where they write the logic to determine whether the request should be allowed or denied.

Example of an Authentication Guard:

import { Injectable, CanActivate, ExecutionContext } from '@nestjs/common';
import { Observable } from 'rxjs';

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(
    context: ExecutionContext,
  ): boolean | Promise<boolean> | Observable<boolean> {
    // Implement authentication logic here
    return true; // or return false to deny access
  }
}

Using Guards in Routes:

To apply guards to specific routes in NestJS, developers use the @UseGuards() decorator at the controller or method level. This decorator accepts one or more guard classes as arguments, which will be executed in the order they are provided.

Example of Using Guards in a Controller:

import { Controller, Get, UseGuards } from '@nestjs/common';
import { AuthGuard } from './auth.guard';

@Controller('users')
export class UsersController {
  @Get()
  @UseGuards(AuthGuard)
  getUsers() {
    // Route handler logic
  }
}

Understanding Custom Decorators:

Custom Decorators in NestJS allow developers to extend the framework's functionality by adding custom metadata and behavior to classes, methods, properties, or parameters. They enhance code readability, promote code reuse, and enable a declarative programming style.

Creating Custom Decorators:

To create a custom decorator in NestJS, developers define a function that returns a decorator function. This decorator function can then be applied to classes, methods, properties, or parameters using the @ syntax.

Example of a Custom Decorator:

import { createParamDecorator, ExecutionContext } from '@nestjs/common';

export const CustomDecorator = createParamDecorator(
  (data: unknown, context: ExecutionContext) => {
    const request = context.switchToHttp().getRequest();
    // Custom logic here
    return request.customData;
  },
);

Conclusion:

Guards and Custom Decorators are powerful features in NestJS that enable developers to implement authentication, authorization, and custom behavior with ease. By mastering guards and custom decorators, developers can enhance the security, readability, and extensibility of their NestJS applications. Experiment with these features in your projects, and unlock their full potential to build scalable, secure, and maintainable applications with NestJS.

In NextJS, the usual method of ensuring a module only renders on the client is to use next/dyanamic with SSR disabled, but this approach doesn't work in NextJS 13:

// nextjs13 - doesn't work - gives "window is not defined"
"use client";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });

export default function ApexChart(props: any) {
  return <Chart {...props} />;
}

My current workaround is to import "react-apexcharts" inside a useEffect to force NextJS to only import on the client side:

// nextjs13 - works
"use client";
import { useEffect, useState } from "react";

export default function ApexChart(props: any) {
  const [Chart, setChart] = useState<any>();
  const hasType = typeof props?.type !== "undefined";

  useEffect(() => {
    import("react-apexcharts").then((mod) => {
      setChart(() => mod.default);
    });
  }, []);

  return hasType && Chart && <Chart {...props} />;
}

But in my opinion, I feel this is unnecessary if the Apex Charts library would just check that the window object is available first before trying to access it.

Here are some suggested packages that could be useful for your Flutter app development:

1. flutter_bloc: If you're seeking a reliable state management solution for your app, flutter_bloc is a great choice. It offers various tools to handle state changes and events effectively.

2. provider: For a simpler way to manage the app state, you can opt for the lightweight package called provider, which can be quite helpful.

3. dio: To handle API calls and HTTP requests with ease, consider using dio, a powerful package designed for this purpose.

4. shared_preferences: If your app requires storing small amounts of data on the device, shared_preferences is a lightweight package that can fulfill this need.

5. intl: When your app needs to support multiple languages or locales, intl provides essential tools for handling internationalization and localization.

6. flutter_svg: To seamlessly work with SVG images, you can rely on flutter_svg, which enables you to render SVG images directly within your app.

7. google_maps_flutter: For displaying maps and working with location data, google_maps_flutter is a valuable package to consider.

8. url_launcher: If your app needs to open URLs or external links, the url_launcher package provides a simple solution for this functionality.

9. cached_network_image: To optimize the loading of internet-based images, cached_network_image can help by caching images and improving loading speeds.

10. HTTP: Another option for HTTP requests, HTTP provides basic functionality and serves as an alternative to dio.

11. path_provider: When dealing with files or directories on the device, path_provider provides a set of tools to access common locations within the file system.

12. flutter_html: For rendering HTML content, flutter_html is a useful package that allows you to display formatted text and images.

13. flutter_spinkit: To showcase loading indicators or progress spinners, flutter_spinkit offers customizable widgets for this purpose.

14. flutter_webview_plugin: If your app requires displaying web content or utilizing web views, flutter_webview_plugin enables you to embed web views directly in your app.

15. firebase_core: For integrating Firebase services, firebase_core provides essential tools to initialize and configure Firebase within your app.

16. firebase_auth: When your app needs to support user authentication, firebase_auth offers tools for working with Firebase authentication services.

17. firebase_database: For real-time data management, firebase_database allows you to store and retrieve data in real-time using Firebase.

18. firebase_storage: To work with file storage in the cloud, firebase_storage facilitates interaction with Firebase Storage.

19. flutter_map: When displaying maps using providers like OpenStreetMap, flutter_map offers a customizable solution to render maps directly in your app.

20. flutter_redux: If you prefer the Redux state management pattern for your app, flutter_redux provides a specific implementation tailored for Flutter.

21. flutter_form_builder: To build forms with ease, flutter_form_builder offers a set of customizable widgets for collecting user input.

22. flutter_icons: For displaying icons in your app, flutter_icons provides a range of customizable icon options.

23. flutter_local_notifications: When your app requires sending notifications to users, flutter_local_notifications enables you to create and schedule local notifications directly within your app.

24. flutter_secure_storage: For securely storing sensitive data, such as passwords or API keys, flutter_secure_storage ensures a safe approach on the device.

25. flutter_reorderable_list: If you need to implement a feature that allows users to reorder items in a list, flutter_reorderable_list offers a set of widgets to enable drag-and-drop functionality for reordering.

26. url_launcher: If your app needs to launch external apps or open links in the browser, url_launcher provides a simple way to achieve this functionality.

27. flutter_keyboard_visibility: To respond to changes in keyboard visibility and adjust UI elements accordingly, flutter_keyboard_visibility provides a convenient way to listen to keyboard events.

I hope this list assists you in finding the right packages to build your Flutter app effectively!

It is especially used on devices such as computers (laptops or desktops) and mobiles (smartphones or tablets) with an Internet connection. Developed with the development of information technology, this crime is being used more and more through social media.

Social media including Facebook, Messenger, Tiktok, YouTube are being used as a form of imitation or imitation of videos, photos, the voice of a person against one's will, thus affecting one's value, dignity, reputation and honour. Provisions for Cyber ​​Crime Control in Nepal:

A. legal system

• Electronic Transactions Act - 2063
• Electronic Business Rules - 2064
• Information Technology Tribunal Rules-2064

B. Institutional arrangements

• Establishment of Central Cyber ​​Bureau in Nepal Police to investigate and investigate cybercrime-related offences,
• Establishment of Information Technology Tribunal to initiate and settle the case of misconduct related to electronic transactions, arrangement of Information Technology Appellate Tribunal to hear the appeal against its order or decision.

1. Tailwind CSS
2. Bootstrap
3. Pure CSS
4. Bulma CSS
5. Foundation CSS
6. Skeleton CSS
7. Materialize CSS
8. Tachyons
9. Semantic UI
10. UIKit

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that is different from other best CSS frameworks like Bulma, Bootstrap where you get pre-designed components, which you can use as a base for further development.

Bootstrap

Bootstrap is considered to be one of the best CSS frameworks due to its responsive design. It was developed by Twitter and released in the year 2011. HTML, SASS, and Javascript are all configured into the Bootstrap framework.

Pure CSS

Pure CSS is considered to be one of the best CSS frameworks. Pure CSS is built on Normalize.css and developed by Yahoo. It comprises a set of small, responsive CSS modules that you can use in every web project.

Bulma CSS

Bulma is another best CSS Framework based on flexbox. It is a 100% responsive open-source CSS library and includes a variety of predefined components.

Foundation CSS

Foundation is yet another one of the best CSS frameworks. It is a sophisticated frontend CSS framework that includes HTML, CSS, SASS, and Javascript.

Skeleton CSS

Skeleton is a super-light or boilerplate CSS framework designed for the development of responsive and mobile-friendly websites. Skeleton includes all of the standard components for responsive web design, such as the grid, aside from its small size.

Materialize CSS

Materialize CSS also comes under the category of best CSS frameworks. It is a CSS UI component library developed by Google with CSS, Javascript and HTML. It is also known as Material Design.

Tachyons

Tachyons is considered among the best CSS frameworks. It is a lightweight, responsive CSS toolkit (utility first design) that claims to be ‘built for designing’. Going by the name ‘Tachyons’ means ‘a hypothetical particle that travels faster than light.

Semantic UI

Semantic UI is another one of the good CSS frameworks released in 2013 by Jack Lukic. It contains pre-built semantic components that are super helpful in creating a beautiful and responsive layout using human-friendly HTML syntax.

UIKit

UIKit is regarded as one of the best CSS frameworks. It is a lightweight, open-source and modular front-end framework for developing fast and powerful web interfaces. UIKit framework is simple to learn and is used to build user interfaces for iOS and Android-based web.