Forem: Muhammadamin

Writing Clean, Reusable Components in Vue 3 (Composition API): Best Practices

Muhammadamin — Mon, 04 Mar 2024 17:24:03 +0000

Vue 3's Composition API offers a new way to organize and reuse logic in your components. By following some best practices, you can write clean, maintainable code that's easier to understand and extend. Let's dive in!

Use Composition Functions

Instead of scattering logic throughout your component, extract it into reusable functions using the Composition API. This keeps your component's structure clean and makes it easier to test.

<template>
  <div>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return { count, increment };
  },
};
</script>

Use Reactive Variables

Use ref for simple reactive values and reactive for reactive objects. This ensures that changes to these values trigger reactivity in your component.

<template>
  <div>
    <p>Name: {{ user.name }}</p>
    <button @click="updateName">Update Name</button>
  </div>
</template>

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

export default {
  setup() {
    const user = reactive({
      name: 'John Doe',
    });

    const updateName = () => {
      user.name = 'Jane Doe';
    };

    return { user, updateName };
  },
};
</script>

Keep Components Small and Single-Purpose

Divide your components into smaller, single-purpose components. This makes your code easier to understand, test, and maintain.

<template>
  <div>
    <ProfileHeader :user="user" />
    <ProfilePosts :posts="posts" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ProfileHeader from './ProfileHeader.vue';
import ProfilePosts from './ProfilePosts.vue';

export default {
  components: { ProfileHeader, ProfilePosts },
  setup() {
    const user = ref({ name: 'John Doe' });
    const posts = ref([]);

    // Fetch user data and posts

    return { user, posts };
  },
};
</script>

Use Slots for Flexibility

Slots allow you to create components that are more flexible and can be customized by the parent component.

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'Card',
};
</script>

Use Composition Functions for Business Logic

Separate your business logic from your UI logic by using composition functions. This makes your code more modular and easier to test.

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

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    const doubled = computed(() => count.value * 2);

    return { count, increment, doubled };
  },
};
</script>

Use Custom Hooks for Shared Logic

Create custom hooks to encapsulate shared logic that can be reused across multiple components.

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

const useCounter = () => {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  return { count, increment };
};

export default {
  setup() {
    const { count, increment } = useCounter();

    return { count, increment };
  },
};
</script>

Use Teleport for Modal and Tooltip Components

Vue 3's Teleport feature allows you to render a component's children in a different part of the DOM, which is useful for creating modal and tooltip components.

<template>
  <teleport to="body">
    <div v-show="isOpen" class="modal">
      <slot></slot>
    </div>
  </teleport>
</template>

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

export default {
  setup() {
    const isOpen = ref(false);

    const openModal = () => {
      isOpen.value = true;
    };

    const closeModal = () => {
      isOpen.value = false;
    };

    return { isOpen, openModal, closeModal };
  },
};
</script>

Use Provide/Inject for Dependency Injection

Use provide and inject to pass data and methods down through the component tree without having to manually pass props.

<script>
import { provide, inject } from 'vue';

const key = Symbol();

export const useStore = () => {
  const store = reactive({
    count: 0,
    increment() {
      store.count++;
    },
  });

  return store;
};

export const provideStore = () => {
  provide(key, useStore());
};

export const useInjectStore = () => {
  return inject(key);
};
</script>

Use Composition API with Pinia for State Management

Pinia is a modern and elegant alternative to Vuex for managing state in Vue 3 applications. It integrates seamlessly with the Composition API, making it easy to create reactive stores and access them in your components.

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounterStore } from './store';

export default {
  setup() {
    const store = useCounterStore();

    return {
      count: store.count,
      increment: store.increment,
      decrement: store.decrement,
    };
  },
};
</script>

👏Conclusion

By following these best practices, you can write cleaner, more reusable components in Vue 3 using the Composition API. This leads to more maintainable code and a better developer experience. 🚀

What are your thoughts on these practices? Do you have any other tips for writing clean, reusable components in Vue 3? Share them in the comments below!

Support the author ☕

I would be happy if u send me a coffee ☕

Tricksters of Typescript

Muhammadamin — Wed, 08 Nov 2023 19:07:47 +0000

TypeScript is a statically typed superset of JavaScript that helps developers write safer and more maintainable code. It enforces strict typing rules that catch many common programming errors at compile-time rather than runtime. However, like any language, TypeScript has its fair share of quirks and tricks that can catch even experienced developers off guard. In this blog, we'll explore some of the tricksters of TypeScript and provide code examples to help you understand and overcome these challenges.

The "this" Keyword Trickster

One of the common sources of confusion in TypeScript is the behavior of the this keyword. Understanding how this works in different contexts is essential for writing reliable TypeScript code.

class Trickster {
  private name: string = "The Trickster";

  printName() {
    console.log(this.name);
  }

  withTimeout() {
    setTimeout(function () {
      console.log(this.name); // Oops, this.name is undefined!
    }, 1000);
  }
}

const tr = new Trickster();
tr.printName(); // Works as expected
tr.withTimeout(); // Throws an error

In the code above, when you call tr.printName() it logs "The Trickster" to the console as expected. However, when you call tr.withTimeout(), you might expect it to log the same value, but it actually logs undefined. This is because this inside the setTimeout callback refers to a different context.

To fix this, you can use an arrow function, which preserves the outer this context:

withTimeoutFixed() {
  setTimeout(() => {
    console.log(this.name); // Works as expected
  }, 1000);
}

The "any" Type Trickster

TypeScript is all about static typing, but sometimes, you might encounter the any type, which effectively turns off type checking. While any can be useful in certain situations, overusing it can undermine the benefits of TypeScript.

function add(a: any, b: any): any {
  return a + b; // No type checking here
}

const result = add(5, "10"); // No error at compile-time
console.log(result); // "510"

Here, the function add accepts two arguments of type any, and it returns any. This means that you can pass any types to this function without TypeScript raising any warnings or errors. In the example, adding a number and a string results in a concatenated string, which might not be what you intended.

To fix this, you should specify the types explicitly or use union types:

function addTyped(a: number, b: number): number {
  return a + b; // Type-safe
}

const result = addTyped(5, 10); // Type error if you pass incompatible types
console.log(result); // 15

The "Never" Type Trickster

The never type in TypeScript represents values that never occur. It is often used in functions that throw exceptions or never return.

function throwError(message: string): never {
  throw new Error(message);
}

function infiniteLoop(): never {
  while (true) {
    // Infinite loop
  }
}

The never type can be tricky to understand, especially when you encounter it for the first time. It essentially signifies that a function won't produce a value, and it's useful for making your code more expressive and error-resistant.

The "Type Assertion" Trickster

Type assertions, denoted by the <Type> or as Type syntax, allow you to tell the TypeScript compiler to treat an expression as a specific type.

const someValue: any = "Hello, TypeScript!";
const strLength: number = (someValue as string).length;

While type assertions can be helpful in certain situations, they should be used cautiously. Relying too much on them can lead to runtime errors and bypass TypeScript's type checks.

The "Type Narrowing" Trickster

Type narrowing in TypeScript refers to the process of refining the type of a variable within a block of code, based on conditions or operations. While it's a powerful feature for making your code type-safe, it can sometimes behave unexpectedly.

function narrowTypeExample(input: string | number) {
  if (typeof input === 'string') {
    // Within this block, TypeScript knows that input is a string
    console.log(input.toUpperCase()); // Works fine
  } else {
    // TypeScript considers input to be a number here
    console.log(input.toUpperCase()); // Error: Property 'toUpperCase' does not exist on type 'number'
  }
}

In the code above, TypeScript narrows the type of input to string within the first if block, allowing you to call the toUpperCase method. However, in the else block, TypeScript treats input as a number, resulting in a type error when trying to use toUpperCase.

The "Type Inference" Trickster

Type inference is one of TypeScript's strengths, but it can sometimes lead to surprising behavior if you're not careful. TypeScript often infers types from the values you assign to variables, and this can lead to unexpected results.

let x = 5; // TypeScript infers the type of x as number

x = "Hello, TypeScript!"; // Error: Type 'string' is not assignable to type 'number'

In the code above, TypeScript initially infers that x is a number based on the assigned value. However, when you later try to assign a string to x, TypeScript throws an error because it expects x to be of type number. This is where type annotations can be useful to explicitly specify the type of a variable.

let x: number = 5; // Explicitly specifying the type
x = "Hello, TypeScript!"; // Error: Type 'string' is not assignable to type 'number'

The "Tuple vs. Array" Trickster

TypeScript allows you to define both arrays and tuples, but understanding the differences between them is crucial. Arrays are meant for collections of values of the same type, while tuples allow you to specify the types of elements at specific positions.

let array: number[] = [1, 2, 3];
let tuple: [number, string] = [1, "two"];

Here's where the trickster comes in:

let array: number[] = [1, "two", 3]; // No error at compile-time
let tuple: [number, string] = [1, "two", 3]; // Error: Type 'number' is not assignable to type 'string'

In the first case, TypeScript doesn't catch the error because arrays are meant to hold elements of the same type. In the second case, TypeScript correctly identifies the type mismatch because tuples have predefined types for each position.

The "Optional Properties" Trickster

TypeScript allows you to define optional properties in interfaces and object types using the ? syntax.

interface Person {
  name: string;
  age?: number; // Age is an optional property
}

const john: Person = { name: "John" }; // Works fine

This flexibility can lead to subtle bugs if you forget to check for the existence of optional properties:

function greet(person: Person) {
  console.log(`Hello, ${person.name}! You are ${person.age} years old.`);
}

greet(john); // Error: Object is possibly 'undefined'.

In this example, the greet function assumes that the age property exists, but TypeScript raises a type error because age is optional and might not be present on the john object.

To handle optional properties safely, you can use a conditional check or the nullish coalescing operator (??):

function greetSafe(person: Person) {
  console.log(`Hello, ${person.name}! You are ${person.age ?? 'unknown'} years old.`);
}

greetSafe(john); // No error, handles optional property gracefully

I hope you found this blog helpful. If you have any questions, please feel free to leave a comment below. 🤗

I can write a blog like that about any programming language or framework/lib. What would you like me to blog about next time?
Send me a coffee ☕ with what you would like me to write about next time and I will definitely consider your suggestion and if I like your suggestion I will write about your suggestion in the next blog post. 😉

SEO Optimization with Nuxt.js

Muhammadamin — Mon, 25 Sep 2023 17:02:03 +0000

In today's digital world, having a well-optimized website for search engines is crucial. SEO, or Search Engine Optimization, plays a pivotal role in ensuring your website ranks higher in search engine results pages (SERPs), driving more organic traffic to your site. When it comes to building Vue.js applications, optimizing for SEO can be a challenge due to the client-side rendering nature of Vue.js. However, there's a powerful solution: Nuxt.js. In this blog post, we'll explore how to perform SEO optimization with Nuxt.js, unlocking the full potential of your Vue.js applications.

Understanding the SEO Challenge with Vue.js 💻

Vue.js is an exceptional JavaScript framework for building interactive and dynamic web applications. However, by default, it's a client-side framework. This means that when search engine crawlers visit your Vue.js application, they may not see the fully rendered content, as Vue.js applications often load and render content dynamically in the browser. To overcome this SEO challenge, we turn to Nuxt.js.

What is Nuxt.js ?🤔

Nuxt.js is a framework built on top of Vue.js, designed to simplify the process of creating server-rendered Vue applications. With Nuxt.js, you can pre-render your Vue components on the server before delivering them to the client. This server-side rendering (SSR) capability is a game-changer for SEO because it ensures that search engines can easily crawl and index your content, resulting in improved SEO rankings.

Getting Started with Nuxt.js for SEO 👀

Let's dive into some practical steps for optimizing your Vue.js applications for SEO using Nuxt.js:

1. Server-Side Rendering (SSR)

One of the primary benefits of using Nuxt.js is its built-in support for SSR. This means that your Vue components are rendered on the server before being sent to the client. To enable SSR in Nuxt.js, all you need to do is create a vue file inside the pages directory of your Nuxt project. Nuxt.js takes care of the rest, ensuring that the content is server-rendered.

2. Manage Meta Tags and Titles

Meta tags, including the <title> tag and <meta> tags for descriptions, play a vital role in SEO. With Nuxt.js, managing meta tags is straightforward using the vue-meta plugin. You can customize meta information for each page within your Vue components, ensuring that search engines understand the content of your pages.

<template>
  <div>
    <h1>Welcome to My Nuxt.js Blog</h1>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: "'My Nuxt.js Blog',"
      meta: [
        { hid: 'description', name: 'description', content: 'Optimizing Vue apps with Nuxt.js for SEO' }
      ]
    }
  }
}
</script>

3. Sitemap Generation

Creating a sitemap for your website is essential for SEO. Nuxt.js simplifies this process by allowing you to add the @nuxtjs/sitemap module to your project. This module will automatically generate a sitemap.xml file containing all the necessary URLs for your website.

4. Proper Routing

Maintaining a clear and logical URL structure is essential for SEO. Nuxt.js provides a robust routing system that allows you to define routes in a structured manner. This not only benefits SEO but also enhances the overall user experience.

I hope you found this blog helpful. If you have any questions, please feel free to leave a comment below. 🤗

I can write a blog like that about any programming language or framework. What would you like me to blog about next time?
Send me a coffee ☕ with what you would like me to write about next time and I will definitely consider your suggestion and if I like your suggestion I will write about your suggestion in the next blog post. 😉

That blog wrote for Nuxt 2 if u want use it in Nuxt 3 there is no problem with using with that.

Top 10 Nuxt.js Secrets to Boost Your App's Performance

Muhammadamin — Thu, 06 Jul 2023 13:38:36 +0000

Nuxt.js is a powerful framework for building Vue.js applications, providing a streamlined development experience and excellent performance. To work faster and optimize your Nuxt.js app, here are ten secrets that can help you boost its performance, along with code examples.

1. Enable Static Site Generation (SSG):

// nuxt.config.js
export default {
  target: 'static'
}

Enabling SSG improves your app's loading speed by pre-rendering pages and serving them as static files.

2. Code Splitting with Lazy Loading:

<!-- Component.vue -->
<template>
  <div>
    <button @click="loadComponent">Load Component</button>
    <div v-if="showComponent">
      <AsyncComponent />
    </div>
  </div>
</template>
<script>
import AsyncComponent from '@/components/AsyncComponent.vue';

export default {
  data() {
    return {
      showComponent: false
    };
  },
  methods: {
    async loadComponent() {
      const { default: AsyncComponent } = await import('@/components/AsyncComponent.vue');
      this.showComponent = true;
    }
  }
};
</script>

Utilize dynamic imports and lazy loading techniques in Nuxt.js to load components and routes only when necessary.

3. Optimize Images:

// nuxt.config.js
export default {
  buildModules: ['@nuxt/image']
}

Use Nuxt.js plugins like @nuxt/image to optimize and deliver images in the appropriate format, size, and quality based on the user's device.

4. Cache API Requests:

// store/index.js
export const actions = {
  async fetchUserData({ commit }) {
    const cachedUserData = this.$axios.$get('/api/user/cache');
    if (cachedUserData) {
      commit('SET_USER_DATA', cachedUserData);
    } else {
      const userData = await this.$axios.$get('/api/user');
      commit('SET_USER_DATA', userData);
    }
  }
};

Implement caching for API requests to minimize unnecessary network calls.

5. Use Server-Side Rendering (SSR):

// nuxt.config.js
export default {
  target: 'server'
}

SSR renders Vue components on the server, resulting in faster initial page loads and improved SEO.

6. Optimize CSS:

// nuxt.config.js
export default {
  build: {
    extractCSS: true
  }
}

Extract and optimize CSS to reduce file sizes and improve loading times.

7. Lazy Load Images:

<!-- Component.vue -->
<template>
  <div>
    <img v-lazy="imageSrc" alt="Lazy Loaded Image">
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageSrc: '/path/to/image.jpg'
    };
  }
};
</script>

Use the v-lazy directive to lazily load images as they become visible on the screen.

8. Use WebP Format for Images:

// nuxt.config.js
export default {
  image: {
    formats: {
      webp: {
        quality: 80
      }
    }
  }
}

Configure Nuxt.js to deliver images in the WebP formatto reduce file sizes and improve loading times.

9. Optimize Server-Side Rendering (SSR) Bundle Size:

// nuxt.config.js
export default {
  build: {
    terser: {
      terserOptions: {
        compress: {
          drop_console: true
        }
      }
    }
  }
}

Configure the build options to remove console logs and reduce the bundle size for SSR.

10. Preload and Prefetch Assets:

<!-- Component.vue -->
<template>
  <div>
    <link rel="preload" href="/path/to/asset.js" as="script">
    <link rel="prefetch" href="/path/to/asset.css" as="style">
  </div>
</template>

Preload critical assets using the <link> tag with the rel="preload" attribute, and prefetch non-critical assets using the rel="prefetch" attribute.

I hope you found this blog helpful. If you have any questions, please feel free to leave a comment below. 🤗

TypeScript vs JavaScript: Why Should You Learn TypeScript?

Muhammadamin — Sun, 25 Jun 2023 19:40:16 +0000

Here are some of the reasons why you should learn TypeScript:

Type Safety: TypeScript introduces static typing to JavaScript, allowing you to catch potential errors during development. It helps identify and prevent common bugs and enhances code quality by enforcing type checking. This leads to more reliable and maintainable code, reducing the likelihood of runtime errors.
Better Tooling and Editor Support: TypeScript is supported by a wide range of powerful IDEs and text editors. These tools offer intelligent autocompletion, refactoring support, and improved error detection based on the type information provided by TypeScript. This can significantly boost productivity and streamline the development process.
Enhanced JavaScript Features: TypeScript is a superset of JavaScript, meaning that any valid JavaScript code is also valid TypeScript. However, TypeScript extends JavaScript by incorporating features like interfaces, classes, modules, generics, and more. These additional language features enable better code organization, abstraction, and modularity.
Improved Collaboration: TypeScript enhances collaboration among developers, especially in large codebases or team projects. By explicitly defining types and interfaces, it improves code readability and documentation. It helps team members understand the expected data structures, function signatures, and overall API contracts, making collaboration and code reviews more effective.
Code Maintainability and Scalability: TypeScript's static typing enables better code maintenance and scalability. As projects grow in size, managing JavaScript code becomes increasingly challenging. With TypeScript, you can leverage its type system to navigate and understand codebases more easily, refactor code confidently, and introduce changes without worrying about breaking existing functionality.
Widely Adopted: TypeScript has gained significant traction in the web development community. It is widely used in popular frameworks and libraries such as Angular, React, Vue.js, and Node.js. Learning TypeScript opens doors to a wealth of tools, resources, and opportunities within the JavaScript ecosystem.

TypeScript and JavaScript a few main differences

Static Typing:

One of the significant differences between TypeScript and JavaScript is static typing. TypeScript allows developers to define types for variables, function parameters, and return values. On the other hand, JavaScript does not have built-in static typing. Let's look at an example:

TypeScript:

function add(a: number, b: number): number {
  return a + b;
}

const result: number = add(5, 3);

JavaScript:

function add(a, b) {
  return a + b;
}

const result = add(5, 3);

Interfaces:

TypeScript introduces interfaces, which define a contract for the shape of an object. This helps to ensure that objects have the correct properties and methods at compile time.

TypeScript:

interface Person {
  name: string;
  age: number;
}

function greet(person: Person) {
  console.log(`Hello, ${person.name}!`);
}

JavaScript:

function greet(person) {
  console.log(`Hello, ${person.name}!`);
}

Class-based Object Orientation:

TypeScript introduces class-based object orientation, which allows developers to use object-oriented design patterns like inheritance, encapsulation, and polymorphism.

TypeScript:

class Animal {
  constructor(public name: string) {}

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Rufus");
dog.speak();

JavaScript:

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a noise.`);
}

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
  console.log(`${this.name} barks.`);
}

const dog = new Dog("Rufus");
dog.speak();

Optional Parameters and Default Values:

TypeScript allows developers to specify optional parameters and default values for function arguments. This makes functions more flexible and easier to use.

TypeScript:

function greet(name: string, greeting?: string) {
  console.log(`${greeting || "Hello"}, ${name}!`);
}

greet("John"); // Outputs "Hello, John!"
greet("Mary", "Hi"); // Outputs "Hi, Mary!"

JavaScript:

function greet(name, greeting) {
  greeting = greeting || "Hello";
  console.log(`${greeting}, ${name}!`);
}

greet("John"); // Outputs "Hello, John!"
greet("Mary", "Hi"); // Outputs "Hi, Mary!"

TypeScript extends JavaScript by incorporating static typing, type inference, interfaces, and other advanced features. It provides enhanced developer experience, improved code quality, and better tooling support. However, JavaScript remains the fundamental language for web development and is widely supported across all browsers.

Understanding the differences between TypeScript and JavaScript allows developers to make informed decisions based on the requirements of their projects and the trade-offs associated with each language.

I hope you found this blog helpful. If you have any questions, please feel free to leave a comment below. 👨‍💻

If you like:
Buy me a coffee ☕

Top 10 Books About JavaScript Clean Code: Enhance Your Coding Practices

Muhammadamin — Wed, 21 Jun 2023 06:36:26 +0000

Writing clean and maintainable code is crucial for JavaScript developers. It not only improves code readability but also facilitates collaboration and reduces bugs. In this article, we will explore the top 10 books that delve into JavaScript clean code practices. Whether you're a beginner or an experienced developer, these books will provide valuable insights and guidelines to enhance your coding practices and produce high-quality JavaScript applications.

1. "Clean Code: A Handbook of Agile Software Craftsmanship" by Robert C. Martin

This classic book offers invaluable advice on writing clean code in multiple programming languages, including JavaScript. It covers principles, best practices, and techniques for creating code that is readable, maintainable, and efficient.

2. "JavaScript: The Good Parts" by Douglas Crockford

While not solely focused on clean code, this book highlights the essential aspects of JavaScript and emphasizes the importance of writing clean and effective code. It covers the best parts of the language and provides insights into creating high-quality JavaScript applications.

3. "Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript" by David Herman

This book presents 68 practical tips and techniques to improve your JavaScript code. It covers a wide range of topics, including code organization, functions, objects, and error handling, all aimed at helping you write clean and efficient code.

4. "JavaScript Patterns" by Stoyan Stefanov

This book explores various design patterns and best practices in JavaScript. It focuses on writing modular, maintainable, and clean code. The examples and explanations provided help developers understand how to apply these patterns effectively.

5. "Refactoring: Improving the Design of Existing Code" by Martin Fowler

Although not JavaScript-specific, this book is a must-read for any developer interested in improving their codebase. It teaches the art of refactoring, allowing you to transform messy code into clean, maintainable code while preserving its functionality.

6. "Clean Architecture: A Craftsman's Guide to Software Structure and Design" by Robert C. Martin

While not specific to JavaScript, this book delves into designing clean and modular architectures. It covers architectural principles and patterns that promote clean code, allowing for flexibility, scalability, and maintainability in your JavaScript projects.

7. "You Don't Know JS" series by Kyle Simpson

This series of books delves deep into the intricacies of JavaScript. It covers topics such as scope, closures, types, coercion, and more. By understanding the language deeply, you can write cleaner and more effective JavaScript code.

8. "JavaScript: The Definitive Guide" by David Flanagan

This extensive reference book covers JavaScript in great detail. While not solely focused on clean code, it provides a comprehensive understanding of the language, enabling you to write cleaner and more efficient code. It covers syntax, language features, and common practices.

9. "Eloquent JavaScript: A Modern Introduction to Programming" by Marijn Haverbeke

This book serves as both an introduction to programming and a comprehensive guide to JavaScript. It covers the language's features and provides interactive examples that promote clean and effective coding practices.

10. "Clean JavaScript: A concise guide to learning Clean Code, SOLID and Unit Testing" by Miguel A. Gómez Álvarez

This concise book by Miguel A. Gómez Álvarez provides a quick introduction to the principles of clean code and how to apply them to JavaScript. It also covers SOLID principles and unit testing.

These are just a few of the many great books about JavaScript clean code that are available on Amazon. By reading one or more of these books, you can learn the principles of clean code and how to apply them to your own JavaScript code.

I hope you found this blog helpful. If you have any questions, please feel free to leave a comment below.

Top 10 Vue.js Tricks You Might Not Know

Muhammadamin — Thu, 15 Jun 2023 10:00:23 +0000

1. Scoped Slots with v-slot and Dynamic Names

Scoped slots in Vue.js allow you to pass data from a parent component to a child component, enabling greater flexibility and reusability. Did you know you can use dynamic names with scoped slots? Here's an example:

<template>
  <child-component>
    <template v-slot:[dynamicSlotName]="slotProps">
      <!-- Your content here -->
    </template>
  </child-component>
</template>

In this example, dynamicSlotName can be a computed property or a variable that determines the slot name dynamically.

2. Conditional Components with and :is

Vue.js provides the <component> element for rendering dynamic components. You can leverage this feature to conditionally render components based on a variable or computed property:

<template>
  <component :is="componentName"></component>
</template>

Here, componentName represents the name of the component you want to render dynamically.

3. Event Modifiers for Cleaner Code

Vue.js event modifiers allow you to simplify event handling. For example, instead of using event.preventDefault() in your event handler, you can use the .prevent modifier:

<button @click.prevent="submitForm">Submit</button>

Other event modifiers include .stop, .capture, .self, .once, and more.

Async Components for Lazy Loading

Vue.js supports lazy loading of components using async components. This can greatly improve the initial load time of your application. Here's an example:

<template>
  <async-component :is="componentName"></async-component>
</template>

<script>
export default {
  data() {
    return {
      componentName: null
    };
  },
  mounted() {
    import('./AsyncComponent.vue').then(component => {
      this.componentName = component.default;
    });
  }
};
</script>

In this example, AsyncComponent.vue is loaded asynchronously when the component is mounted.

5. Using the Key Attribute for Efficient Re-Render

The key attribute in Vue.js helps optimize rendering by preserving component state. It tells Vue.js to reuse or re-render an existing component instead of creating a new one. Use it when iterating over a list of items:

<template>
  <div>
    <div v-for="item in items" :key="item.id">{{ item.name }}</div>
  </div>
</template>

The :key attribute ensures Vue.js can track and update the elements efficiently.

6. Custom Directives for Enhanced Functionality

Vue.js allows you to create custom directives to extend the functionality of your application. You can define custom directives globally or locally within components. Here's an example of a simple directive that focuses an input field:

<template>
  <input v-focus />
</template>

<script>
export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      }
    }
  }
};
</script>

7. Scoped Styles with CSS Modules

Vue.js supports CSS Modules, which allow you to encapsulate styles within a component. By enabling CSS Modules, you can avoid style conflicts and maintain a modular structure:

<template>
  <div :class="$style.container">
    <p :class="$style.text">Scoped Styles with CSS Modules</p>
  </div>
</template>

<style module>
.container {
  background-color: blue;
}

.text {
  color: white;
}
</style>

Here, the styles defined within the <style module> block are scoped to the component.

8. Vue.nextTick for Synchronous DOM Updates

Vue.js provides the Vue.nextTick method, which allows you to execute code after the next DOM update cycle. This is useful when you need to perform operations that rely on the updated DOM state:

<template>
  <div ref="myDiv">{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  },
  mounted() {
    this.message = 'Updated Message';
    this.$nextTick(() => {
      console.log(this.$refs.myDiv.textContent); // Outputs 'Updated Message'
    });
  }
};
</script>

9. Emitting Custom Events from Components

In addition to emitting standard events, Vue.js allows components to emit custom events. This can facilitate communication between components:

<template>
  <button @click="notifyParent">Notify Parent</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('custom-event', 'Data to be passed to the parent');
    }
  }
};
</script>

The parent component can listen to this custom event using @custom-event="handler".

10. Using v-html for Rendering HTML Content

By default, Vue.js escapes HTML in data bindings to prevent XSS attacks. However, in some cases, you may want to render HTML content dynamically. You can use the v-html directive for this purpose:

<template>
  <div v-html="htmlContent"></div>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<p>Rendered HTML content</p>'
    };
  }
};
</script>

Caution: Be careful when using v-html with user-generated or untrusted content to prevent potential security risks.

These 10 Vue.js tricks will enhance your Vue.js development skills and allow you to build more efficient and powerful applications. Keep exploring and leveraging the capabilities of Vue.js to create amazing experiences!

If you like:
Buy me a coffee ☕

Author: Hakimov-dev

JavaScript Secrets Unveiled: Top 10 Hidden Gems with Code Examples

Muhammadamin — Mon, 12 Jun 2023 05:06:20 +0000

1. The Power of Destructuring Assignment:

Destructuring assignment provides a concise way to extract values from arrays or objects. Let's explore its hidden powers, such as swapping variables, extracting nested values, and setting default values.

// Swapping variables
let a = 1;
let b = 2;
[a, b] = [b, a];

// Extracting nested values
const person = { name: 'John Doe', age: 25, address: { city: 'New York' } };
const { name, address: { city } } = person;

// Setting default values
const { phoneNumber = 'N/A' } = person;

2. Unleashing the Potential of Spread Operator:

The spread operator allows you to spread elements of an iterable into various contexts. Discover its hidden powers, such as array concatenation, object merging, and function argument manipulation.

// Array concatenation
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];

// Object merging
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObject = { ...obj1, ...obj2 };

// Function argument manipulation
const myFunction = (param1, param2, ...rest) => {
  // ...
};

3. Mastering Higher-Order Functions:

Higher-order functions like map(), filter(), and reduce() offer powerful functional programming capabilities. Discover their hidden powers, including transforming data, filtering arrays, and calculating aggregated values.

// Transforming data with map()
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((num) => num ** 2);

// Filtering arrays with filter()
const evenNumbers = numbers.filter((num) => num % 2 === 0);

// Calculating aggregated values with reduce()
const sum = numbers.reduce((acc, num) => acc + num, 0);

4. Asynchronous JavaScript with Promises:

Promises provide an elegant way to handle asynchronous operations. Discover their hidden powers, including chaining operations, parallel execution, and error handling.

// Chaining operations
fetchData()
  .then(processData)
  .then(displayResult)
  .catch(handleError);

// Parallel execution with Promise.all()
const promises = [promise1, promise2, promise3];
Promise.all(promises)
  .then((results) => {
    // Process the results
    // ...
  })
  .catch(handleError);

5. The Magic of Generator Functions:

Generator functions enable iterative control flow and lazy evaluation. Discover their hidden powers, including infinite sequences, async iteration, and cooperative multitasking.

// Infinite sequences
function* infiniteSequence() {
  let num = 1;
  while (true) {
    yield num++;
  }
}

// Async iteration
async function* asyncGenerator() {
  // ...
}
for await (const value of asyncGenerator()) {
  // ...
}

6. Supercharging Regular Expressions:

Regular expressions provide powerful pattern matching capabilities. Discover their hidden powers, including lookaheads, capturing groups, and advanced modifiers.

// Lookaheads
const positiveLookahead = /John(?= Doe)/;
const negativeLookahead = /John(?! Doe)/;

// Capturing groups
const regex = /(\d{2})-(\d{2})-(\d{4})/;
const [_, day, month, year] = regex.exec('15-06-2023');

// Advanced modifiers
const globalMatch = /pattern/g;
const caseInsensitiveMatch = /pattern/i;

7. Unraveling the Mystery of Memoization:

Memoization is a technique that caches function results for improved performance. Discover its hidden powers, including caching expensive operations and optimizing recursive functions.

// Caching expensive operations
const memoizedFunction = memoize(expensiveOperation);

// Optimizing recursive functions
function fibonacci(n, memo = {}) {
  if (n <= 1) return n;
  if (memo[n]) return memo[n];
  memo[n] = fibonacci(n - 1, memo) + fibonacci(n - 2, memo);
  return memo[n];
}

8. Simplifying Date and Time Manipulation with Luxon:

Luxon is a powerful library for working with dates and times in JavaScript. Discover its hidden powers, including date formatting, parsing, timezone handling, and relative time calculations.

// Date formatting
const now = DateTime.now();
const formattedDate = now.toFormat('yyyy-MM-dd');

// Parsing dates
const parsedDate = DateTime.fromISO('2023-06-15');

// Timezone handling
const localTime = now.setZone('local');
const newYorkTime = now.setZone('America/New_York');

// Relative time calculations
const diff = DateTime.fromISO('2023-06-15').diffNow().toObject();
const { days, hours, minutes } = diff;

9. Exploring Web Storage:

Web Storage allows you to store data locally in the browser. Discover its hidden powers, including storing and retrieving data, handling expiration, and tracking storage events.

// Storing and retrieving data
localStorage.setItem('key', 'value');
const storedValue = localStorage.getItem('key');

// Handling expiration
localStorage.setItem('key', JSON.stringify({ value, expires: Date.now() + 3600 }));
const storedObject = JSON.parse(localStorage.getItem('key'));
if (storedObject.expires < Date.now()) {
  localStorage.removeItem('key');
}

// Tracking storage events
window.addEventListener('storage', (event) => {
  // Handle storage events
});

10. Building Responsive Web Applications with ResizeObserver:

ResizeObserver is a modern API that allows you to observe changes to element sizes. Discover its hidden powers, including responsive design, lazy loading, and dynamic layout adjustments.

// Observing element size changes
const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    // Handle size changes
  }
});
observer.observe(element);

JavaScript is a language that keeps on surprising us with its hidden secrets and lesser-known features. By exploring these top 10 JavaScript secrets, you've expanded your toolkit and gained insights into optimizing your code, improving performance, and building more sophisticated applications. Embrace these hidden gems, experiment with them, and continue exploring the depths of JavaScript to become an even better developer. Happy coding!

If you like:
Buy me a coffee ☕

Author: Hakimov-dev