DEV Community: Pantelis Theodosiou

Stop Rewriting the Same TypeScript Types

Pantelis Theodosiou — Thu, 30 Oct 2025 08:37:51 +0000

You know that moment when you’ve got three slightly different versions of the same interface - one for updates, one for read-only views, and another that strips out a few fields?
Yeah… we’ve all been there.

That’s where TypeScript’s built-in utility types come to the rescue.
Things like Partial, Pick, Omit, and Readonly can make your types flexible, safer, and way less repetitive — no more juggling a dozen near-identical interfaces.

In my latest post, I break down how to actually use these helpers in real projects - with short, realistic examples (think users, configs, and API payloads), not just abstract docspeak.

If you’re already comfortable with TypeScript but want to write cleaner, smarter, and more type-safe code, this one’s for you.

👉 Read the full article here: Understanding TypeScript Utility Types

Why security isn't just an afterthought?

Pantelis Theodosiou — Wed, 30 Jul 2025 17:02:38 +0000

In the fast-paced world of software development, it's easy to see security as a separate, often late-stage, concern. But what if we told you that building "secure-by-design" products from the ground up isn't just good practice, it's a powerful marketing advantage that builds undeniable customer trust?

In this article, we dive into:

The undeniable impact of security breaches on brand reputation and customer loyalty. (Spoiler: It's significant!)
Why fostering strong collaboration between engineering and marketing is essential for communicating your product's inherent reliability and safety.
How highlighting a "security-first mindset" can be your ultimate differentiator in competitive markets, especially in B2B tech, fintech, and health/pharma.

Join the conversation and discover why baking security into every step of the development lifecycle is key to a truly successful product and a trusted brand.

Read the full article here: Developers, It's Time to Talk Security

The Singleton pattern in TypeScript

Pantelis Theodosiou — Sun, 03 Mar 2024 07:30:00 +0000

In programming, there are situations when you have to make sure that your application contains just one instance of a particular class. The Singleton pattern is useful in this situation. This creational design pattern ensures the existence of a single object and offers a single point of contact for interacting with it.

Why use a singleton?

Centralized resource management: Effectively manage limited or expensive resources such as database connections, file access, and configuration options. A singleton can create, manage, and pool these resources, eliminating unnecessary duplication and ensuring consistent access throughout your application.
Controlled global state access: In well-defined use cases, a Singleton can serve as a centralized access point for specific pieces of global state information, such as user preferences or application settings. This simplifies access and modification of this data while avoiding the pitfalls of comprehensive global state management.
Streamlined logging and error handling: A centralized logging or error handling system can help simplify your code and ensure consistent behavior throughout the application. A singleton can function as this central point, directing all logs or errors to the same location for easier monitoring and analysis.

Understanding these potential benefits allows you to make informed decisions about whether the Singleton pattern is the best tool for your specific TypeScript project requirements. However, it is critical to weigh these benefits against the potential drawbacks before incorporating them into your code.

Implementing a singleton in TypeScript

While there are various methods to achieve the Singleton pattern, here's a common approach in TypeScript.

class Singleton {
  private static instance: Singleton;
  private constructor() {}

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

We first define a private static variable instance to hold the single instance of the class. The constructor is marked private, preventing anyone from creating an instance directly using new Singleton(). We then have a public static method getInstance() that checks if the instance is already created. If not, it creates a new instance and assigns it to the instance variable. And, finally, the getInstance() method returns the existing or newly created instance.

Let's see how we can use the above class.

const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();

Both singleton1 and singleton2 will point to the same object.

Some things to remember

Singletons can tightly couple your code, making it difficult to test and maintain. Consider alternatives such as dependency injection or services, if available.
Overusing singletons can cause a lack of modularity and make your code less flexible.
Be aware of potential performance implications, particularly when dealing with resource-intensive tasks within the Singleton.

Alternatives to singletons

Dependency injection: This approach relies on explicitly passing dependencies to the classes that require them, promoting loose coupling and better testability.
Services: Services, like dependency injection, are often implemented as classes with well-defined functionalities and clear responsibilities, which improves code organization and reusability.

When to use the singleton design pattern

While the Singleton pattern allows you to create a single instance of a class, it isn't always the best option. Here is a breakdown of when you should consider using it.

Suitable scenarios

Resource management: A Singleton can effectively manage the creation and usage of limited or expensive resources, such as database connections, file access, or configuration settings, preventing unnecessary duplication and ensuring consistency.
Global State Management: A Singleton can be a simple solution when you only need one point of access to global state information, such as user preferences or application settings. However, be cautious, as extensive use of global state can result in tight coupling and decreased maintainability.
Logging and error handling: A centralized logging or error handling system can simplify your code and ensure consistent logging behavior throughout the application. A singleton can function as this central point, directing all logs or errors to the same location.

Why you might avoid using singletons

While singletons provide some advantages, their potential drawbacks frequently lead developers to explore alternative design patterns.

Tight coupling: Creates dependencies between various parts of your code.
Reduced testability: It can be difficult to test code that relies heavily on singletons.
Lack of flexibility: Limits your application's adaptability to changing requirements.
Potential performance issues: Unless carefully designed, they can become performance bottlenecks.

While the Singleton pattern can be a useful tool in your TypeScript development toolbox, it must be used carefully and strategically. Consider its trade-offs, which include potential tight coupling, testability issues, and maintenance concerns. If simpler approaches, such as dependency injection or services, can achieve your desired result, choose those methods for cleaner, more maintainable code. Remember, the goal is to choose the design pattern that best suits your specific needs while encouraging code clarity, testability, and long-term maintainability.

If you found this post helpful or enjoyed it, consider supporting me by buying me a coffee. Your support helps me create more valuable content. ☕ Thank you!

State Management Showdown Vuex vs. Pinia

Pantelis Theodosiou — Sun, 25 Feb 2024 12:00:00 +0000

Vue.js developers must effectively manage application state. Vuex and Pinia, two popular libraries, take on this challenge, each with their own strengths and weaknesses. Let's do a comparative analysis to help you choose the best tool for your project.

What They Are

Vuex

The established Vue state management library provides a structured approach with centralized state, mutations, and actions. While powerful, its API may be verbose and require more boilerplate code.

Pinia

A newer, lighter library inspired by Vuex 5. It features a simpler API, modularity, and seamless integration with the Composition API. Its popularity is rapidly increasing.

Key Differences

API

Vuex: Uses getters, mutations, and actions with specific syntax.
Pinia: Provides a more intuitive, function-based approach, utilizing the Vue Composition API.

Modularity

Vuex: Offers a single store with modules for organization.
Pinia: Supports multiple independent stores, encouraging better code splitting and organization.

TypeScript Support

Vuex: Manual type definition, which can be cumbersome.
Pinia: Provides excellent native TypeScript support and strong type inference.

DevTools

Vuex: Has dedicated DevTools integration.
Pinia: It seamlessly integrates with Vue DevTools for state inspection and time travel.

Performance

Vuex: It may be slightly slower due to its centralized nature.
Pinia: Generally considered faster, particularly in smaller applications.

Learning Curve

Vuex: Has a steeper learning curve because of its complex API.
Pinia: Easier to learn, particularly for developers familiar with the Composition API.

Code Examples

Assume you're creating a simple counter app in your Vue.js project. Both Vuex and Pinia allow you to manage the app's state, which in this case is the counter value. Let's see how each library handles it.

Vuex

// store.js
const state = {
  count: 0,
};

const mutations = {
  increment(state, amount) {
    state.count += amount;
  },
};

const getters = {
  doubleCount(state) {
    return state.count * 2;
  },
};

export default new Vuex.Store({
  state,
  mutations,
  getters,
});

// component.vue
computed: {
  doubledCount() {
    return this.$store.getters.doubleCount;
  },
},
methods: {
  incrementCount() {
    this.$store.commit('increment', 1);
  },
},

In this Vuex example we define a central store with the initial count state set to 0. To increase the count, we use a mutation named increment, which directly modifies the state. And finally, to access the count in our component, we use a getter named doubleCount that returns the count multiplied by 2.

Pinia

// store.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment(amount) {
      this.count += amount;
    },
  },
  getters: {
    doubleCount() {
      return this.count * 2;
    },
  },
});

// component.vue
import { useCounterStore } from 'store.js';

const counterStore = useCounterStore();

computed: {
  doubledCount() {
    return counterStore.doubleCount;
  },
},
methods: {
  incrementCount() {
    counterStore.increment(1);
  },
},

In the above example with Pinia, we create a store named counter using the defineStore function. The store has its own status and actions. The increment action immediately updates the count state. Similar to Vuex, we define a getter called doubleCount to access and manipulate the component's state.

These examples demonstrate the fundamental capabilities of state management libraries: storing data, modifying it through actions, and accessing it via getters. Remember, this is a simplified comparison, and both Vuex and Pinia have much more in their arsenals.

Choosing the Right Tool

Vuex

Suitable for large, complex applications that demand advanced features and tight control.
A good option if you already have a Vuex codebase or prefer a structured approach.

Pinia

Ideal for small to medium applications, prioritizing simplicity and ease of use.
Excellent for those who prefer modularity, TypeScript support, and a modern API.

Finally, the best option is determined by the unique requirements of your project and the preferences of your team. Consider experimenting with both libraries to find the one that best suits your workflow.

This article presents a high-level comparison. For a deeper dive, investigate the official documentation and community resources for each library:

Vuex: https://vuex.vuejs.org/
Pinia: https://pinia.vuejs.org/

I hope this helps you make an informed decision regarding your Vue state management solution!

If you found this post helpful or enjoyed it, consider supporting me by buying me a coffee. Your support helps me create more valuable content. ☕ Thank you!

JavaScript Objects: Your Quick Guide

Pantelis Theodosiou — Wed, 06 Dec 2023 16:15:47 +0000

Photo created with Ideogram

JavaScript's robust object-oriented paradigm is largely responsible for its flexibility and power, making it a versatile and dynamic programming language. The JavaScript Object, a fundamental and essential element that makes it easy for developers to model and manipulate data, is at the center of this paradigm. We will examine the creation, modification, and application of JavaScript Objects in a variety of contexts as we delve into their subtleties in this article.

Understanding JavaScript Objects

In essence, an object in JavaScript consists of a set of key-value pairs, where the values can be any kind of data, including other objects, and the keys are strings or symbols. Because of their distinctive structure, JavaScript objects are highly dynamic and flexible, enabling developers to succinctly represent and organize complex data.

Creating Objects

In JavaScript, there are multiple methods for creating objects. The object literal notation is the most widely used method:

const person = {
  firstName: 'Pantelis',
  lastName: 'Theodosiou',
  age: 28,
  address: {
    street: '123 Main St',
    city: 'Thessaloniki',
    country: 'Greece'
  }
};

In addition to object literal notation, you can also create objects using the Object constructor or through the use of constructor functions and the class keyword.

Accessing and Modifying Object Properties

Working with JavaScript objects requires being able to access and modify object properties. You can use bracket or dot notation to access properties.

// Dot notation
console.log(person.firstName); // Output: Pantelis
// Bracket notation
console.log(person['lastName']); // Output: Theodosiou

To modify a property, simply assign a new value

person.age = 31;
console.log(person.age); // Output: 31

Since objects can have their properties added to or changed after they are created, they are mutable.

Object Methods

In JavaScript, objects can also have methods, which are functions that are connected to the object. You can use these methods to carry out particular actions pertaining to the object.

const car = {
  brand: 'Nissan',
  model: 'Skyline R34',
  start: function() {
    console.log('The beast started');
  },
  stop: function() {
    console.log('The beast stopped');
  }
};

car.start(); // Output: The beast started
car.stop();  // Output: The beast stopped

Object Iteration

Object property iteration can be accomplished in a number of ways. One popular option is the for...in loop

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

Additionally, the Object.keys(), Object.values(), and Object.entries() methods provide arrays of keys, values, and key-value pairs, respectively.

Object Prototypes and Inheritance

As a prototype-based language, JavaScript allows objects to inherit methods and properties from other objects by way of their prototype chain. Understanding prototypes and inheritance is essential to comprehending JavaScript object relationships.

// Creating a prototype
const animal = {
  greeting: function() {
    console.log('Animal says hi!');
  }
};

// Creating an object that inherits from the prototype
const dog = Object.create(animal);

// Adding a specific method to the dog object
dog.bark = function() {
  console.log('Woof! Woof!');
};

dog.greeting(); // Output: Animal says hi!
dog.bark();     // Output: Woof! Woof!

Conclusion

The foundation of JavaScript's object-oriented paradigm are objects, which offer a versatile and potent way to model and work with data. Any developer needs to have a firm grasp of JavaScript objects, regardless of whether they're working with straightforward data structures or intricate applications. Learning the subtleties of objects will help you write more scalable, organized, and effective code as you advance in JavaScript.

If you found this post helpful or enjoyed it, consider supporting me by buying me a coffee. Your support helps me create more valuable content. ☕ Thank you!

Google One's Dark Web Report - Safeguarding Your Digital Realm

Pantelis Theodosiou — Mon, 13 Nov 2023 08:00:00 +0000

Photo by mali maeder on Pexels

Google One has incorporated a dark web monitoring feature, offering individuals a means to fortify their defenses in the event of a data breach. Let's delve into its functionality.

Google One has introduced a groundbreaking service called the Dark Web Report as part of its cloud storage subscription. Unveiled in March 2023 along with an expanded VPN service, now available to all Google One subscribers at no extra cost, the Dark Web Report aims to shield users from data breaches.

This innovative feature scans the dark web to detect if personal information, such as names, addresses, emails, phone numbers, or Social Security numbers, is available for sale. If any such information is found, Google notifies the user and provides advice on safeguarding their data. For instance, if a Social Security number is identified on the dark web, Google recommends reporting it as stolen to the government and offers guidance on credit protection.

Users can opt-in to Dark Web Report, manually enabling and selecting the information they want to monitor. Google assures users that all handled information adheres to its privacy policy, whether provided by users or obtained from the dark web. Users can also delete information from their profile or halt monitoring at any time.

Given the rising frequency of data breaches, robust measures to protect personal information have never been more crucial. With the prevalence of data breaches, individuals often rely on large corporations and government agencies for secure data storage. However, Google One's latest feature provides users with a proactive approach to protect themselves, offering a valuable resource in the event of a data breach.

If you found this post helpful or enjoyed it, consider supporting me by buying me a coffee. Your support helps me create more valuable content. ☕ Thank you!

Demystifying 'this' in JavaScript

Pantelis Theodosiou — Fri, 27 Oct 2023 15:06:51 +0000

Photo by Brad on Unspash

One of the core ideas of JavaScript is the this keyword, which is essential for figuring out the context in which a function is run. Nonetheless, many developers may find it confusing, particularly those who are unfamiliar with the language. This piece will examine the this keyword, its characteristics, and practical applications for it.

What is the "this" keyword?

Think of this as a magic pointer that indicates the context in which a function is operating. It's similar to having a code-cracking secret decoder ring that indicates your current location. Depending on how a function is called, this's value may vary dynamically. Let's dissect it using a few examples.

Default Binding

The global object, which is typically the browser's window object, is referred to as this when a function is called without any specific binding.

function sayHi() {
  console.log(this);
}

sayHi(); // Logs the global object (usually 'window' in a browser)

In this case, this points to the global context because the function is called in the global scope.

Implicit Binding

Occasionally, this is implicitly associated with the function's owning object. When a function is used as an object's method, this occurs:

const person = {
  name: "Pantelis",
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // Logs "Hello, my name is Pantelis"

Because the function is called within the context of person, this inside the greet method is bound to the person object in this instance.

Explicit Binding

Additionally, you can use methods like call(), apply(), and bind() to explicitly set the value of this.

Using `call()` and `apply()`

When contacting a JavaScript function, you can set this variable's value explicitly using the call() and apply() methods. Their handling of function arguments differs slightly, but otherwise they are fairly similar.

`call()`

The call() method is used to invoke a function and explicitly specify the value of this and any additional arguments as separate parameters.

function introduce(language) {
  console.log(`My name is ${this.name} and I code ${language}`);
}

const person = { name: "Pantelis" };
introduce.call(person, "JavaScript"); // Logs "My name is Pantelis and I code JavaScript"

In this example above, call() sets this to the person object and passes the argument JavaScript to the introduce function.

`apply()`

The apply() method is similar to call(), but it accepts an array or an array-like object as the second parameter for passing arguments.

function introduce(language) {
  console.log(`My name is ${this.name} and I code ${language}`);
}

const person = { name: "Pantelis" };
introduce.apply(person, ["JavaScript"]); // Logs "My name is Pantelis and I code JavaScript"

apply() sets this to the person object and passes the argument JavaScript in the above example, operating similarly to call().

Using `bind()`

bind() differs from call() and apply() methods. bind() creates a new function with the given this value but does not call the function right away. When you want to create a function with a fixed context for use at a later time, this can be helpful:

function introduce(language) {
  console.log(`My name is ${this.name} and I code ${language}`);
}

const person = { name: "Pantelis" };
const introducePantelis = introduce.bind(person, "JavaScript");

introducePantelis(); // Logs "My name is Pantelis and I code JavaScript"

In this example, bind() creates a new function introducePantelis, which has a fixed this value set to the person object and a predefined argument JavaScript. You can call introducePantelis() later to execute the function with these predetermined values.

Use Cases

call() and apply() are suitable for immediately invoking functions with specific this values and arguments,
bind() is useful when you want to create a function with a predefined context and arguments for future use, often in event handlers or callbacks.

New Binding

this is automatically bound to the newly created object when you use a constructor function with the new keyword:

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

const dog1 = new Dog("Rocky");
console.log(dog1.name); // Logs "Rocky"

this in this instance refers to the recently formed object within the Dog function.

Arrow Functions and `this`

The way the arrow functions differs slightly. They take on the this value from the lexical context that surrounds them rather than having their own this binding:

const outer = {
  inner: () => {
    console.log(this);
  }
};

outer.inner(); // Logs the global object (window in a browser)

Because it is defined in the global scope in this example, this inside the arrow function is the global object.

Gaining proficiency in JavaScript requires an understanding of the this keyword. You can write more efficient and maintainable code by understanding its behavior and putting the concepts of default binding, implicit binding, explicit binding, and new binding to use.

But be aware of common pitfalls as well, such as using arrow functions when dynamic binding is required or losing the this context in callback functions. If you practice a lot, you'll become an expert in JavaScript this very soon!

If you found this post helpful or enjoyed it, consider supporting me by buying me a coffee. Your support helps me create more valuable content. ☕ Thank you!

Unplugging and Recharging

Pantelis Theodosiou — Mon, 21 Aug 2023 08:00:00 +0000

Photo by Ramon Kagie on Unspash

As the summer comes to an end, I reflect on the invaluable experience of taking a break from my developer role. In the midst of the allure of warm sunbeams and peaceful landscapes, I discovered that taking a break from coding and immersing myself in the world beyond my computer screen holds extraordinary potential for personal growth and professional renewal.

Work and rest must be balanced

It was a transformative experience to manage the delicate balance between my need for relaxation and my role as a developer. I've discovered that streamlining my workday involves more than just writing code; it also entails appreciating the value of deliberate downtime. While I'm usually engrossed in coding marathons, choosing to take a summer break allowed me to engage in activities away from the keyboard. Whether it was the simple pleasure of taking a leisurely stroll by the beach, unwinding with friends while sipping cold beers around a roaring beachside fire late into the night, or just taking in the peaceful environment, these moments not only recharged my mental batteries but also nourished my creativity.

Returning to my projects after such rejuvenating breaks was like discovering a renewed sense of purpose, a new determination that added an extra layer of depth to my work. The ebb and flow of focused coding and mindful relaxation not only made me a more effective developer, but it also highlighted the importance of embracing both aspects in order to achieve a holistic sense of accomplishment.

Connecting and Networking

Aside from being rejuvenating, my summer vacation allowed me to connect with people from various backgrounds. Conversations and meaningful relationships formed outside of the tech sphere enriched my experiences. These connections provided insights and perspectives that I could later apply to my programming challenges, enhancing my problem-solving abilities.

Returning with a new point of view

As I returned to my developer role after a summer break, I discovered that I was approaching my projects with newfound clarity and creativity. The break from my routine allowed me to see my work from a new perspective, resulting in more efficient strategies, innovative solutions, and a renewed appreciation for the importance of my projects.

I am reminded of the importance of the journey of renewal and reflection as I consider the transformative power of summer vacations for developers. Our minds and spirits also profit from pauses and recalibrations, just as lines of code occasionally need debugging.

So, fellow developers, have you embraced summer vacations in your journey? If so, what insights and inspirations have you gained from your downtime? If not, how might taking a break from coding improve your perspective and creativity? Consider the profound impact that intentionally stepping away from the screen can have on your growth and innovation as the sun sets on another summer.

If you found this post helpful or enjoyed it, consider supporting me by buying me a coffee. Your support helps me create more valuable content. ☕ Thank you!

Understanding Promises in JavaScript

Pantelis Theodosiou — Mon, 29 May 2023 07:00:00 +0000

Photo by Emre Turkan on Unspash

Introduction

Modern web development relies heavily on asynchronous programming, which enables us to handle time-consuming operations effectively without delaying the completion of other tasks. Promises are a strong feature of JavaScript that make asynchronous operations easier to understand and improve code readability. The goal of this article is to give readers a thorough understanding of JavaScript promises, including information on their definition, lifecycle stages, helper functions, and inner workings.

What are Promises in JavaScript?

An asynchronous operation's eventual success (or failure) and the value it generates are represented by an object called a promise. Instead of nesting callbacks, it enables us to handle asynchronous code in a more elegant and organized way by chaining methods.

Promises can be in one of three states: pending, fulfilled, or rejected. The initial state of a Promise, which denotes that the asynchronous operation is still ongoing, is pending. If the operation succeeds, the Promise moves to the fulfilled state, and if there is a problem, it switches to the rejected state. "Settling" describes the process of going from pending to either fulfilled or rejected.

Promise Lifecycle Stages

Let's examine each phase of the lifecycle of a Promise in depth, with code examples:

Pending Stage

A Promise is in the pending state when it is created. The asynchronous operation is still ongoing at this point, and the Promise is neither accepted nor rejected.

Here's an example:

const promise = new Promise((resolve, reject) => {
  // Asynchronous operation (e.g., fetching data from an API)
  // resolve(result) or reject(error) will be called later
});

Fulfilled Stage

The Promise goes into the fulfilled state once the asynchronous operation is successfully completed. At this point, the associated value (result) becomes available. To handle a fulfilled Promise, we use the .then() method.

Here's an example:

const promise = new Promise((resolve, reject) => {
  // Simulating an asynchronous operation
  setTimeout(() => {
    resolve("Operation succeeded!");
  }, 2000);
});

promise.then((result) => {
  console.log(result); // Output: "Operation succeeded!"
});

Rejected Stage

In the event that there is a problem with the asynchronous operation, the Promise goes into the rejected state. It denotes that the operation failed and provides an error object with pertinent information. To handle a rejected Promise, we use the .catch() method.

Here's an example:

const promise = new Promise((resolve, reject) => {
  // Simulating an asynchronous operation
  setTimeout(() => {
    reject(new Error("Something went wrong!"));
  }, 2000);
});

promise.catch((error) => {
  console.log(error.message); // Output: "Something went wrong!"
});

Chaining Promises

Promises have a number of important benefits, including the ability to chain together several asynchronous operations, which improves code readability and prevents the dreaded "callback hell." We accomplish this by using the .then() method to return a new Promise.

Here's an example:

const getUser = () => {
  return new Promise((resolve, reject) => {
    // Simulating an asynchronous operation
    setTimeout(() => {
      resolve({ id: 1, name: "John" });
    }, 2000);
  });
};

const getUserPosts = (user) => {
  return new Promise((resolve, reject) => {
    // Simulating an asynchronous operation
    setTimeout(() => {
      resolve(["Post 1", "Post 2"]);
    }, 2000);
 });
};

getUser()
  .then((user) => getUserPosts(user))
  .then((posts) => console.log(posts)); // Output: ["Post 1", "Post 2"]

Helper Functions for Promises

Along with the core methods that Promises provide, JavaScript also provides a number of helper functions that improve the functionality and readability of asynchronous code. Common tasks are made easier by these helper functions, which also improve control flow and error handling.

Promise.all()

When all of the Promises in the input array have been fulfilled, this function returns a new Promise that fulfills.

Here's an example:

const fetchUser = () => {
  return new Promise((resolve, reject) => {
    // Simulating an asynchronous API call to fetch user data
    setTimeout(() => {
      const user = { id: 1, name: "John" };
      resolve(user);
    }, 2000);
  });
};

const fetchPosts = () => {
  return new Promise((resolve, reject) => {
    // Simulating an asynchronous API call to fetch user posts
    setTimeout(() => {
      const posts = ["Post 1", "Post 2"];
      resolve(posts);
    }, 1500);
  });
};

const fetchComments = () => {
  return new Promise((resolve, reject) => {
    // Simulating an asynchronous API call to fetch user comments
    setTimeout(() => {
      const comments = ["Comment 1", "Comment 2"];
      resolve(comments);
    }, 1000);
  });
};

Promise.all([fetchUser(), fetchPosts(), fetchComments()])
  .then(([user, posts, comments]) => {
    console.log("User:", user);
    console.log("Posts:", posts);
    console.log("Comments:", comments);
  })
  .catch((error) => {
    console.log("Error:", error);
  });

The three functions fetchUser(), fetchPosts(), and fetchComments() are included in the example above. For user data, user posts, and user comments, each function simulates an asynchronous API call by returning a Promise.

By passing an array of Promises ([fetchUser(), fetchPosts(), fetchComments()]) to Promise.all(), we create a new Promise that fulfills once every Promise in the array has been successfully completed. When handling the fulfillment, the .then() method applies an array destructuring syntax to retrieve the resolved values of each Promise.

When all of the Promises are fulfilled in this situation, the array destructuring assigns the resolved values of fetchUser(), fetchPosts(), and fetchComments() to the variables user, posts, and comments respectively. The user, posts, and comments are then recorded to the console.

The .catch() method is called and the error is logged to the console if any of the Promises fail.

Promise.all() allows us to efficiently fetch multiple asynchronous resources and handle them all at once after each request has successfully finished.

Promise.race()

As soon as any of the Promises in the input array settles, this function returns a new Promise that either fulfills or rejects.

Here's an example:

const fetchResource = (resource, delay) => {
  return new Promise((resolve, reject) => {
    // Simulating an asynchronous API call with a specified delay
    setTimeout(() => {
      resolve(`${resource} is fetched successfully in ${delay}ms`);
    }, delay);
  });
};

const resource1 = fetchResource("Resource 1", 2000);
const resource2 = fetchResource("Resource 2", 1500);
const resource3 = fetchResource("Resource 3", 1000);

Promise.race([resource1, resource2, resource3])
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

In the example above, there are three functions called fetchResource() that simulate asynchronous API calls by returning Promises. Each call simulates the time it takes to fetch a particular resource by having a different delay time.

When an array of Promises ([resource1, resource2, resource3]]) is passed to the Promise.race() method, a new Promise is created that settles (fulfills or rejects) in response to any Promise in the array. The resolved value of the successful Promise is passed as the result parameter and is logged to the console in the .then() method, which is used to handle fulfillment. In this case, the resource that resolves first (i.e., the one with the shortest delay) will be considered the winner, and its resolved value will be printed to the console.

The .catch() method is called and the error is logged to the console if any of the Promises fail.

We can run several asynchronous operations simultaneously and react to the outcome of the fastest one by using the Promise.race() method. It is beneficial in situations where we want to act in accordance with the initial response or completion.

Promise.resolve() and Promise.reject()

Without the need for additional asynchronous operations, these functions allow you to create Promises that have already been fulfilled or rejected, respectively.

Because of the strong capabilities these helper functions offer to manipulate and control Promises, JavaScript asynchronous programming is now more adaptable and expressive.

Promise.resolve() and Promise.reject() are used in the following example of code:

const fetchData = (shouldSucceed) => {
  if (shouldSucceed) {
    return Promise.resolve("Data fetched successfully");
  } else {
    return Promise.reject(new Error("Failed to fetch data"));
  }
};

fetchData(true)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

fetchData(false)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

The fetchData() function in the example above has a shouldSucceed parameter that specifies whether the data fetch should be successful or unsuccessful. Promise.resolve() is used to create and return a Promise that immediately fulfills with the message "Data fetched successfully" if shouldSucceed is true. Promise.reject() is used to create and return a Promise that immediately rejects with a new Error object and the message "Failed to fetch data" if shouldSucceed is false.

The returned Promise is fulfilled in the first call to fetchData() with shouldSucceed set to true and the fulfillment is managed by the .then() method. The result parameter is passed the resolved value "Data fetched successfully", which is then logged to the console.

In the second invocation of fetchData() with shouldSucceed set to false, the returned Promise is rejected, and the .catch() method is used to handle the rejection. The error object containing the message "Failed to fetch data" is passed as the error parameter and logged to the console.

By utilizing Promise.resolve() and Promise.reject(), we can easily create Promises that are already resolved or rejected without the need for additional asynchronous operations. This is useful when handling synchronous values or errors as Promises.

Conclusion

JavaScript's asynchronous programming has been revolutionized by promises, which offer a well-organized and beautiful way to handle laborious tasks. Promises help us avoid callback hell and create more readable, maintainable code.

The definition of promises, their lifecycle stages, and the function of helper functions like Promise.all(), Promise.race(), Promise.resolve(), and Promise.reject() were all covered in this extensive guide. We can handle asynchronous operations efficiently and gracefully handle success and error scenarios by understanding the lifecycle stages - pending, fulfilled, and rejected.

Developers can create dependable and effective applications that easily handle complex asynchronous tasks by utilizing Promises and their helper functions. Control flow is streamlined and code readability is improved by Promise chains. Additionally, JavaScript's helper functions improve error handling and streamline the execution of numerous asynchronous operations.

Modern web development requires the use of asynchronous programming, and becoming proficient with promises enables developers to produce code that is cleaner and easier to maintain. You can build robust applications that effectively handle asynchronous operations by integrating Promises into your JavaScript projects and utilizing their strength and helper functions.

If you found this post helpful or enjoyed it, consider supporting me by buying me a coffee. Your support helps me create more valuable content. ☕ Thank you!

Understanding the Fundamental Differences between API and SDK: A Comprehensive Guide

Pantelis Theodosiou — Mon, 01 May 2023 08:33:38 +0000

Businesses face the challenge of selecting the best tools to integrate their software systems as technology develops. Software Development Kits (SDK) and Application Programming Interfaces (API) are two of the most frequently used integration tools. Despite the fact that these phrases are frequently used interchangeably, they are fundamentally distinct. In this thorough guide, I'll go over the distinctions between API and SDK, as well as their benefits and how to incorporate them into your software system.

Introduction to API and SDK

What is an API?

Developers use an API, which is a collection of protocols, procedures, and tools, to create software applications. It makes it possible for various software systems to communicate with one another by exchanging information and features. By offering pre-built functions that are simple to incorporate into new applications, APIs are intended to streamline the process of developing software. In order to improve already existing applications, new features and capabilities are added using APIs.

As more businesses adopt cloud-based software systems, APIs have grown in significance within the technology sector. APIs allow programmers to create cloud-based applications that have access to data and functionality. This has prompted the creation of a wide variety of APIs that give users access to various cloud-based services like analytics, messaging, and storage.

What is an SDK?

A set of development tools called an SDK is what programmers use to create software applications. It contains a range of programming tools, including libraries, manuals, examples of working code, and debugging tools. An SDK is made to make the process of creating software easier by giving developers access to tools and pre-built functions that they can use to create applications.

Applications for particular platforms, such as mobile phones or gaming consoles, are frequently made using SDKs. They give programmers the resources they require in order to create platforms-specific applications. Additionally, SDKs give programmers access to platform-specific features and capabilities, such as mobile device camera and GPS services.

Key Differences between API and SDK

Platform Specificity

In general, APIs are platform-neutral. They can be used to create software for any platform that the API is supported by. Platform-specific SDKs, on the other hand, are available. They are made to be used in the development of applications for a particular platform, such as gaming consoles or mobile devices.
Functionality

Access to particular functionality or data that is kept on a server is made possible by APIs. They give programmers a way to access this information or functionality without having to create it themselves. On the other hand, SDKs give developers a set of resources and features to use when creating their own applications.
Customization

In general, APIs cannot be customized. They offer a predetermined set of features that are intended for use by developers. On the other hand, SDKs offer a lot of customization. The SDK's tools can be used by developers to make their own custom features and functions.

Advantages of using API

APIs offer both developers and businesses a number of benefits. The following are some benefits of using APIs:

Time and Cost Savings

By providing pre-built functionality that is simple to integrate into new applications, APIs can save developers both time and money. Developers will need to spend less time and money creating unique functionality as a result.

Improved Integration

The ability of various software systems to communicate with one another is made possible by APIs, which enhances system integration. Businesses are now able to create more intricate software systems that can communicate with one another without a hitch.

Increased Flexibility

Due to their ability to access cloud-based functionality and data, APIs give businesses more flexibility. This makes it possible for companies to create applications that can be used on any device and from any location.

Advantages of using SDK

SDKs offer both developers and businesses a number of benefits. The following are some benefits of using SDKs:

Platform-Specificity

SDKs are intended to be used in the development of software for a particular platform, such as gaming consoles or mobile devices. As a result, programmers can create applications that are tailored for a specific platform and make use of its unique features and functionalities.

Enhanced Performance

By giving developers access to low-level system resources such as memory and processing power, SDKs can improve the performance of applications. This makes it possible for developers to create highly optimized applications that run smoothly on a specific platform.

Customization

SDKs give programmers a lot of customization options. Developers can create their own functions and features using the SDK's provided tools, allowing them to create highly specialized applications.

SDK vs API: Which one to choose?

An SDK or an API should be chosen based on the particular needs of your software system. An API may be your best option if you need to access specific server-stored data or functionality. An SDK may be the best option if you need to create a highly customized application that makes use of platform-specific features and functionality.

Prior to choosing, it's crucial to weigh the benefits and drawbacks of both possibilities. The degree of customization needed, the complexity of the application, and the platform on which it will be built are all important factors to take into account.

How to integrate API and SDK

It can be difficult to integrate an API or SDK into your software system. The following actions should be taken to guarantee a successful integration:

Understand the API or SDK

It's crucial to comprehend an API's or SDK's functionality before integrating it. To fully comprehend the features and capabilities of the API or SDK, read the documentation that the vendor has provided.

Prepare for Integration

To guarantee that the integration satisfies the unique requirements of your software system, carefully plan the integration. Determine the precise functionality you must access or create, and how it will be incorporated into your system.

Test the Integration

To make sure the integration is operating properly, thoroughly test it. Work with the API or SDK vendor to resolve any problems or bugs you find.

Examples of popular APIs and SDKs

For developers to use, a variety of APIs and SDKs are available. Among the most well-liked APIs and SDKs are:

Google Maps API

Developers have access to the Google Maps service through the Google Maps API. It gives programmers the ability to integrate maps and location-based features into their applications.

Facebook SDK

Developers have access to the Facebook platform thanks to the Facebook SDK. It enables programmers to create Facebook-integrated applications like social media games and apps.

Conclusion

The best integration tool for your company will depend on a number of variables, such as the particular needs of your software system and the degree of customization necessary. While SDKs are best for creating highly customized applications that make use of platform-specific features and functionality, APIs are typically best for gaining access to specific functionality or data stored on a server.

Before making a choice, it is crucial to carefully weigh the benefits and drawbacks of both options. You can create software applications that are incredibly functional, adaptable, and platform-specific with the right integration tool.

If you found this post helpful or enjoyed it, consider supporting me by buying me a coffee. Your support helps me create more valuable content. ☕ Thank you!

Comparing Vue and React in 2023: Pros and Cons

Pantelis Theodosiou — Sun, 09 Apr 2023 15:17:40 +0000

Photo by Glenn Carstens-Peters on Unspash

Vue and React are still two of the most popular JavaScript frameworks for building web apps in 2023. Both frameworks offer advantages and disadvantages, so developers must weigh the benefits and negatives when deciding which one to use for their projects. In this article, we will compare Vue and React based on their pros and cons in 2023. Keep in mind that these are my thoughts on some of their advantages and disadvantages.

Vue

Pros of Vue

Easy to Learn and Use: Vue offers a smooth learning curve that makes it suitable for both novice and professional developers.
High Performance: Vue's virtual DOM and efficient rendering result in speedy and performant apps.
Flexible and Incremental Adoption: Vue enables progressive adoption in existing projects, making it adaptable to a variety of use cases.
Composition API: Vue's Composition API allows you to handle state and logic in components in a modular and flexible manner, enhancing code organization and maintainability.
Strong Ecosystem: Vue has a growing ecosystem of libraries, tools, and plugins that are backed up by excellent documentation and a welcoming community.

On the other hand, there are some disadvantages.

Cons of Vue

Smaller Community: Vue's community is still smaller than React's, making it more difficult to find extensive resources and support.
Limited Enterprise Adoption: When compared to React, which has a longer history and established presence in the enterprise space, Vue may have limited adoption in large-scale enterprise applications.

React

Pros of React

Huge Ecosystem and Community: React has a massive ecosystem of libraries, tools, and resources, which is supported by a large developer community.
Performance Optimization: The virtual DOM and efficient rendering mechanism of React make it extremely performant, particularly in complex applications.
Component-Based Architecture: The component-based architecture of React encourages web application reusability, maintainability, and separation of concerns.
Strong Developer Tooling: React has a robust set of developer tools to help with debugging, testing, and building React applications.
Backed by Facebook: React is backed by Facebook, which ensures its stability and continuous updates.

As every coin got two sides, React also has some cons.

Cons of React

Steeper Learning Curve: React may have a steeper learning curve than Vue, as it requires knowledge of JSX and a different way of thinking about UI components.
Boilerplate Code: React may necessitate more code than Vue, resulting in more boilerplate code and longer development time.
Complex State Management: React lacks built-in state management capabilities, necessitating dependency on other libraries for complicated state management scenarios.

Conclusion

Vue and React are still popular web development frameworks in 2023, each with its own set of advantages and disadvantages. When deciding between Vue and React, developers should evaluate the specific requirements of their projects as well as their personal experience with the frameworks. Both frameworks have significant communities and ecosystems, and understanding their advantages and downsides will help you make an informed decision for successful web development projects.
Let me know what's your personal go-for JavaScript framework for building web apps in 2023.

If you found this post helpful or enjoyed it, consider supporting me by buying me a coffee. Your support helps me create more valuable content. ☕ Thank you!

Copy to Clipboard with JavaScript

Pantelis Theodosiou — Sun, 23 Oct 2022 05:30:00 +0000

Photo by Caio on Pexels

When creating advanced web pages and applications, you may want to include the copy feature. This allows your users to copy text by simply clicking a button or icon rather than highlighting the text and pressing a couple of keys on the keyboard.

This capability is typically used when someone has to copy an activation code, recovery key, code snippet, or other similar information. You can also include features such as an alert or text on the screen (which could be a modal) to notify the user that the text has been copied to their clipboard.

Prior to its deprecation, you would have handled this with the document.execCommand() command. Despite being frequently used, it struggles with huge text. Since it's synchronous, the user experience is negatively impacted. Additionally, there are problems with permissions that differ between browsers.

These issues are resolved with the Async Clipboard API.

In this blog post, we'll examine a technique for using the Clipboard API to copy text and images to the clipboard.

The Asynchronous Clipboard API

Now that the Clipboard API is available, you can read from and write to the system clipboard asynchronously as well as respond to clipboard actions (cut, copy, and paste).

Clipboard API permissions

The clipboard can be accessed, which creates various security issues. To reduce security threats, the Clipboard API has been made safe.

Only pages provided through HTTPS are supported by the Clipboard API.
Only when the page is the active browser tab is access to the clipboard permitted.
It is never okay to read from the clipboard without permission.

The two permissions connected to the Clipboard API are listed below:

clipboard-write permission: Limits who can use the write method.
clipboard-read permission: Limits who can use the read technique of the clipboard.

According to how we use the Clipboard API, developers must always ask the browser's permission before doing any operation. Using navigator.permissions we must look for the clipboard-write permission to see if we have write access.

navigator.permissions.query({ name: "write-on-clipboard" }).then((result) => {
  if (result.state == "granted" || result.state == "prompt") {
    console.log("Write access granted!");
  }
});

Using the subsequent code, we can also confirm that clipboard-read access exists:

navigator.permissions.query({ name: "read-text-on-clipboard" }).then((result) => {
  if (result.state == "granted" || result.state == "prompt") {
    console.log("Read access granted!");
  }
});

Text to Clipboard

Let's discuss how to copy text to the clipboard right now. With the new Clipboard API, we must utilize the writeText() function, which only accepts one parameter: copying text to the clipboard.

export const App = () => {
  const copyText = async () => {
    try {
      await navigator.clipboard.writeText("Some text to copy");
      console.log("Clipboard content has been copied.");
    } catch (error) {
      console.error("Failed to copy content to clipboard.");
      console.log(err.name, err.message);
    }
  };

  return (
    <div className="wrapper">
      <button className="btn" onClick={copyText}>copy text</button>
    </div>
  );
};

Result

Image to Clipboard

To copy photos, we must use the Clipboard API's write() method, which accepts just one parameter, an array holding the data to be copied to the clipboard, like the previous function.

For instance, by using the following code, we can retrieve a photo from any remote URL and copy it to the clipboard.

export const App = () => {
  const copyImage = async () => {
    try {
      const response = await fetch("/logo-with-shadow.png");
      const blob = await response.blob();
      await navigator.clipboard.write([
        new ClipboardItem({
          [blob.type]: blob,
        }),
      ]);
      console.log("Image copied to clipboard.");
    } catch (error) {
      console.error("Failed to copy image to clipboard.");
      console.log(error.name, error.message);
    }
  };

  return (
    <div className="wrapper">
      <button className="btn" onClick={copyImage}>copy image</button>
    </div>
  );
};

Result

Up until this point, only text/plain text/html and image/png were supported by the Async Clipboard API for copying to and pasting from the system clipboard. The browser often does this sanitization in order to, for instance, eliminate embedded script components or javascript: links from an HTML string or to stop PNG decompression bomb assaults.

Summary

This concise tutorial has explained how to use the new Clipboard API to copy text and other data, such as photos, to the clipboard. When writing to or reading from a user's local computer, use caution to keep the process secure and transparent.

If you found this post helpful or enjoyed it, consider supporting me by buying me a coffee. Your support helps me create more valuable content. ☕ Thank you!

DEV Community: Pantelis Theodosiou

Stop Rewriting the Same TypeScript Types

Why security isn't just an afterthought?

The Singleton pattern in TypeScript

Why use a singleton?

Implementing a singleton in TypeScript

Some things to remember

Alternatives to singletons

When to use the singleton design pattern

Suitable scenarios

Why you might avoid using singletons

State Management Showdown Vuex vs. Pinia

What They Are

Vuex

Pinia

Key Differences

API

Modularity

TypeScript Support

DevTools

Performance

Learning Curve

Code Examples

Vuex

Pinia

Choosing the Right Tool

Vuex

Pinia

JavaScript Objects: Your Quick Guide

Understanding JavaScript Objects

Creating Objects

Accessing and Modifying Object Properties

Object Methods

Object Iteration

Object Prototypes and Inheritance

Conclusion

Google One's Dark Web Report - Safeguarding Your Digital Realm

Demystifying 'this' in JavaScript

What is the "this" keyword?

Default Binding

Implicit Binding

Explicit Binding

Using call() and apply()

call()

apply()

Using bind()

Use Cases

New Binding

Arrow Functions and this

Unplugging and Recharging

Work and rest must be balanced

Connecting and Networking

Returning with a new point of view

Understanding Promises in JavaScript

Introduction

What are Promises in JavaScript?

Promise Lifecycle Stages

Pending Stage

Fulfilled Stage

Rejected Stage

Chaining Promises

Helper Functions for Promises

Promise.all()

Promise.race()

Promise.resolve() and Promise.reject()

Conclusion

Understanding the Fundamental Differences between API and SDK: A Comprehensive Guide

Introduction to API and SDK

What is an API?

What is an SDK?

Key Differences between API and SDK

Advantages of using API

Advantages of using SDK

SDK vs API: Which one to choose?

How to integrate API and SDK

Examples of popular APIs and SDKs

Conclusion

Comparing Vue and React in 2023: Pros and Cons

Vue

Pros of Vue

Using `call()` and `apply()`

`call()`

`apply()`

Using `bind()`

Arrow Functions and `this`