Prerequisites

Before you begin this tutorial, you will need a Render account; the free plan is good enough to follow along with this tutorial.

Step 1: Set Up a PostgreSQL Database

On your Render account, click on the “New +” button and Click on PostgreSQL to create a new PostgreSQL database.

On the database creation page, add a name for your PostgreSQL instance, a database name, a user, and the region from which you want the PostgreSQL instance to run. Also, select “For hobby projects” as the instance type for a free tier.

Next, click on the Create Database button to create your PostgreSQL database.

You should be redirected to the created database page.

You can scroll down to the Connections tab to find the credentials needed to communicate with the database you created.

Copy the hostname, port, database, username, and password and save them, as you’ll need them when creating an instance of Directus later in the next step of this tutorial:

Step 2: Deploy an Instance of Directus from Docker Hub

On your Render.com account, click on the “New +” button and Click on “Web Service” to create a new web service

Select the second option on the “How would you like to deploy your web service?” page, then click next.

The next page will ask you for the image URL you want to deploy. Paste the official Directus URL from the Docker hub below into the input field, and click on next:

https://hub.docker.com/r/directus/directus

On the web service creation page, you can add your preferred name for your web service and the region where you want the web service to run; also, select the For Hobby Projects as the Instance Type plan.

On the Environment Variables tab, add the following variables to set up the Directus instance:

ADMIN_EMAIL = admin@example.com
ADMIN_PASSWORD = d1r3ctu5
DB_CLIENT = postgres
DB_DATABASE = YOUR_DB_NAME_FROM_STEP_1
DB_HOST = YOUR_DB_HOSTNAME_FROM_STEP_1
DB_PASSWORD = YOUR_DB_PASSWORD_FROM_STEP_1
DB_PORT = 5432
DB_USER = YOUR_DB_USER_FROM_STEP_1
KEY = YOUR_RANDOM_KEY
SECRET = YOUR_RANDOM_SECRET
WEBSOCKETS_ENABLED = true

Click on the “Create Web Service” button, and this will deploy a new instance of Directus as a web service for you.

After deployment, you will be redirected to the web service page with all the details about your web service. Click on the live URL of your web service, and it should open Directus in a new tab.

Congratulations! 🥳 you’ve just deployed an instance of Directus on Render and connected it to a PostgreSQL database.

Summary

In this article, you successfully created a PostgreSQL instance and deployed Directus to Render.com; some possible next steps you can take to improve your deployment might include setting up autoscaling to handle large incoming requests on your Directus application and enabling cron jobs to run backups for your application. (This involves upgrading to a paid account on Render 😉).

Directus also has a Directus Cloud version that offers constant backups, rolling updates, round-the-clock monitoring, and the ability to restart automatically in the event of a crash.

I hope this article is helpful to you.

Happy coding!🍻

I'd love to connect with you on Twitter | LinkedIn | GitHub

“But everything works fine on my machine,” you might say. The machine referred to might be a 2021 M1 MacBook Pro, yet the user complaining may be using a 2015 Windows 10 laptop or something else. How do you tackle this issue? How do you ensure your websites and web apps are compatible with all other browsers and devices, not just the one you used for developing? This article will discuss cross-browser compatibility and its significance, methods to ensure compatibility, and practical tips for ensuring cross-browser compatibility in your websites.

What is Cross-Browser Compatibility?

Cross-browser compatibility is the ability of your website or web application to function consistently and correctly across various devices and web browsers. It ensures that browsers like Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, and others interpret and render your website uniformly.

Common Causes of Cross-Browser Compatibility Issues

1. Different Browser Rendering Engines:

Each browser employs its rendering engine (e.g., Blink for Chrome, WebKit for Safari, Gecko for Firefox). These engines may interpret and display website code differently.

2. Different Devices:

Different devices, such as Laptops, Tablets, and smartphones, display your website differently to their user.

Why Cross-Browser Compatibility Matters

As a developer, understanding the importance of cross-browser compatibility is essential for several reasons:

1. User Experience: A seamless experience across different browsers contributes to positive user experiences, which in turn impact user satisfaction and business success. If a user visits your website and notices things are not displayed correctly, it might give them a bad experience and deter them from revisiting it.

2. Reach Diverse Users: The internet's diversity means users access content via various browsers and devices. Compatibility ensures your website reaches a broader audience.

   

3. Better SEO: Search engines favor websites with consistent positive experiences across browsers. Neglecting compatibility can adversely affect search rankings.

4. Future-Proofing Your Code: Evolving browsers introduce new features. Cross-browser compatibility ensures your application remains functional amid these changes.

Tips for Ensuring Cross-Browser Compatibility

1. Use Modern Web Standards

   Your HTML, CSS, and JavaScript code and website accessibility should follow the standard web practices, reducing the likelihood of compatibility issues with browsers. The World Wide Web Consortium (W3C) develops open standards to ensure the long-term growth and accessibility of the World Wide Web. Following these standards will help ensure your website is compatible with the standard web browser.

2. Practice Responsive Design

   Implementing fluid layouts, flexible images, and CSS media queries to provide a consistent user experience across various devices. These will help to make your website responsive to different devices that your users will visit from

3. Validate Your Code

   Include tools like W3C code validation service and CSS validator to ensure your code meets web standards.

4. Test Early, Test Often

   Begin cross-browser Testing in the early stages of development to identify and address these issues. Frequent Testing can help you catch issues before they turn into significant problems.

Consider Using CSS Resets

Use CSS resets to establish a baseline layout across browsers and minimize inconsistencies. Each browser has predefined padding, margin, and line height styles by default. Etc. Applying CSS resets before adding custom styling to your webpage helps you predict how elements render comfortably across different browsers.

/*

1. Use a box-sizing model.
*/
*, *::before, *::after {
    box-sizing: border-box;
}
/*
2. Removes the default margin and padding on the browsers
*/
 {
    margin: 0;
    padding: 0;
}

You can also consider using stylesheets like Normalize.css, Eric Mayer's CSS reset rules to establish a baseline layout across browsers.

How to Test for Cross-Browser Compatibility

1. Create a Plan: Based on audience research, determine target browsers and establish what your website should look like, what devices they would be using, and what browsers are primarily used in the region where your intended users will be. Having a plan will help you decide which browsers to test.

2. Development: Strive for uniform functionality across all target browsers. Or use polyfills as needed. Some Browsers interpret your code differently on some styling features, so you should try styling them using browser-specific code; you can do this using prefixes. Some general prefixes used when targeting specific browsers are:

   • Safari and Chrome (-WebKit)

   • Internet Explorer (-ms)

   • Opera (-o)

   • Mozilla Firefox (-moz)

3. Testing: There are two types of Testing you should consider when performing cross-browser compatibility tests

   • Manuel Testing: This involves using live devices and browsers to test for functionality and consistency of your website. Consider using tools like BrowserStack and Lambdatest, which provide different device stimulations and browsers to identify inconsistency and performance issues on your website. And automated Testing using tools like Selenium

   • Automated Testing: This involves using automated scripts and tools to execute test cases and verify the functionality of your website on different browsers and devices. Some automated tools you can consider when performing cross-browser compatibility tests are Playwright and Selenium

Pitfalls to Avoid in Cross-Browser Compatibility

There are a couple of pitfalls to avoid when ensuring your websites and web applications are cross-browser compatible; because cross-browser compatibility can be tedious, it's easy to fall into these pitfalls

1. Over-Engineering: Focus more on the core functionality of your website and the user experience it provides for your users rather than pursuing pixel-perfect consistency across all browsers. This will help you avoid over-engineering your product to target specific browsers.

2. Ignoring Older Browsers: Balance dropping support for outdated browsers with considering your target audience's browser usage. For example, Microsoft retired the Internet Explorer browser in favor of its new Edge browser, so it wouldn't be wise to spend time making your website compatible with browsers like Internet Explorer that are no longer supported.

3. Misusing Polyfills: While using polyfills can help you to implement features that are not present in a browser and flatten the browser API landscape, you should only use it judiciously for critical missing features to avoid unnecessary code bloat that might hurt your website performance.

Testing in Isolation: To better understand how your website will function in different environments. Test not only on individual browsers but also various combinations of devices and screen sizes.

Best Practices for Cross-Browser Compatibility

• Research Your Audience: Perform market research to understand your target audience's browser preferences based on their region. Do not test randomly with browsers, as this might not be adequate for your users.

• Prepare a Browser List To Test on: Limit development and test coverage efforts to a specific set of browsers relevant to your audience. A list of browsers will help you focus on pertinent issues for your target audience and reduce exposure to cross-browser bugs.

• Choose the Right Automation Tool: Since cross-browser compatibility testing is a tedious task and requires a lot of time and effort, consider selecting tools that are easy to use and allow Testing across a maximum number of browsers for maximum efficiency.

• Test on Real Device Browsers: Automated Testing should differ from manual Testing. Testing on actual device browsers will help you identify bugs that may arise on actual devices that your end-users will use, offering a more realistic testing environment.

Conclusion

Cross-browser compatibility is not just a checkbox; it's a journey of continuous improvement. By understanding its significance and following best practices, you can navigate this complex landscape, creating websites and software that provide a seamless experience for users across different browsers and devices.

Happy coding!

I'd love to connect with you on Twitter | LinkedIn | GitHub

Resend is a developer-friendly API you can utilize for sending transactional emails from your application, and due to its ease of integration, it

In this article, we'll explain what resend is, some of its features, and why you should use it as your email provider for your applications.

Introduction

What is Resend?

Resend.com is an email API for developers. It's designed to help developers build, test, and send transactional emails at scale. Resend offers a simple, elegant interface that makes it easy to get started, and it integrates with popular programming languages like JavaScript, PHP, Java, Python, Go, and Ruby.

Resend can be used to send a variety of email types, including welcome emails, password reset emails, and order confirmation emails. It also offers a variety of features to help developers ensure that their emails are delivered successfully, such as email tracking and spam prevention.

Features of Resend

Resend comes with a variety of features that make it stand out from other transactional email services. Let's consider some of them.

Integration with popular tools and languages

Using Resend, you can create email functionalities and send emails using your favorite tools and technologies. At the moment, you can send emails using Resend with popular programming languages and frameworks such as TypeScript, Node.js, PHP, the Laravel framework, Go programming languages, Python, Ruby, and the Rails framework, as well as serverless functions. A few months ago, they added integration and support for sending emails with SMTP, You can read about it here.
They also continually add new integrations for new tools and technologies; most recently, they released a Java SDK, you can read about it here.

Better Debugging and Developer Experience

Resend One cool thing I like about resend is that you can easily test your email functionality in different environments, and the results will remain the same.
Its error handling feature makes it easy for you to handle different scenarios during development when your emails are not going through

With its analytic dashboard, you can easily tell when your emails are getting bounced or throwing errors during production

Email Tracking, Spam Prevention

When creating transactional emails to send from your application, you most times will want to be able to do the following:

• Track emails to see if they were delivered, opened, or clicked.

Hooks functionality

Webhooks

• Features to help ensure email delivery, such as email tracking and spam prevention

• Affordable

• Once you configure a webhook, you'll be able to receive real-time updates about email events. Add webhook

Examples

NextJs

Install the

npm install resend

as an API

import type { NextApiRequest, NextApiResponse } from 'next';
import { EmailTemplate } from '../../components/EmailTemplate';
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export default async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const data = await resend.emails.send({
      from: 'Acme <onboarding@resend.dev>',
      to: ['delivered@resend.dev'],
      subject: 'Hello world',
      react: EmailTemplate({ firstName: 'John' }),
    });

    res.status(200).json(data);
  } catch (error) {
    res.status(400).json(error);
  }
};

Go

install the Resend SDK for Go

go get github.com/resendlabs/resend-go

package main

import "github.com/resendlabs/resend-go"

func main() {
    apiKey = "re_123"

    client := resend.NewClient(apiKey)

    params := &resend.SendEmailRequest{
        From:    "Acme <onboarding@resend.dev>",
        To:      []string{"@test.com"},
        Html:    "<strong>hello world</strong>",
        Subject: "Hello from Golang",
        Cc:      []string{"cc@example.com"},
        Bcc:     []string{"bcc@example.com"},
        ReplyTo: "replyto@example.com",
    }

    sent, err := client.Emails.Send(params)
    if err != nil {
        fmt.Println(err.Error())
        return
    }
    fmt.Println(sent.Id)
}

You can find some other examples on the official Resend documentation

Conclusion

• Resend is a great email API for developers who need to send transactional emails.

• It's easy to use, reliable, and affordable.

• If you're looking for an email API to help you send transactional emails, Resend is a great option

https://resend.com

https://resend.com/docs/introduction

https://react.email

In this article, we'll go over developer relations, what it is, what the team does, and their importance.

Developer Relations by Definition

Developer Relations (DevRel), as the name implies, means building relationships with developers between a product and the developers that use the product.

DevRel is a multifaceted field comprising various activities designed to bridge the gap between a company and its developer community. At its core, DevRel focuses on creating a positive and supportive environment for developers, ensuring they have the resources, tools, and information needed to succeed in building their product.

As Ewan Dennis said:

To the community, I represent the company. To the company, I represent the community. I must have both of their interests in mind at all times.- Ewan Dennis, quoted in The Business Value of Developer Relations

What does the team do?

There are a couple of activities the DevRel team does to ensure that this includes:

1. Communication and Advocacy:

   • The DevRel team act as liaisons between developers and the company, advocating for the needs and interests of the developer community.

   • Effective communication is crucial, and DevRel often involves creating content, blog posts, tutorials, and documentation to help developers understand and utilize a company's products or services.

2. Community Building:

   • Online forums, discussion groups, and social media platforms are common channels to facilitate community interaction and collaboration.

   • DevRel teams work to cultivate and nurture communities around a company's products or technologies. This involves organizing events, meetups, and webinars and engaging in social media to foster a sense of belonging among developers.

3. Feedback Loop:

   • The DevRel team serves as a feedback channel between developers and the company's product and engineering teams. They do this by collecting iterative feedback loops that help enhance products, address issues, and tailor offerings to better meet developer needs.

   • They also collect insights on pain points, feature requests, and general sentiments to help improve and refine the developer experience.

4. Education and Training:

   • Providing educational resources is a key aspect of DevRel. This can include webinars, workshops, tutorials, and documentation that empower developers to master a company's technologies.

   • DevRel teams often collaborate with educational institutions, ensuring a pipeline of skilled developers and fostering the growth of the overall developer ecosystem.

What values does the DevRel Team provide to the company?

1. Developer Empowerment:

   • DevRel is instrumental in empowering developers by providing them with the knowledge and tools needed to succeed in their projects. This, in turn, builds loyalty and trust within the developer community.

2. Product Improvement:

   • The constant feedback loop between developers and the company helps refine and improve products. Developers become valuable contributors to the evolution of a company's offerings, making them more aligned with user needs.

3. Brand Advocacy:

   • Through effective communication and community building, DevRel turns developers into brand advocates. These advocates are crucial in promoting a company's products within their networks.

Conclusion

In this article, we covered what DevRel is, what the team does, and the important work it does in fostering collaboration, communication, and community building. As companies continue to recognize the importance of developer ecosystems, the role of DevRel is likely to evolve and expand, contributing to the growth and success of both developers and the organizations they support.

Prerequisite

Before you begin, this article requires basic knowledge of the terminal/CLI and bash commands.

What is a Bash Alias?

A bash alias is a user-defined shortcut for frequently used commands. When you create an alias, you assign a custom name to a command or a series of commands. Once defined, you can use the alias instead of typing the entire command. Aliases are specific to your user profile and can be stored in your shell's configuration file, such as .bashrc or .bash_profile.

For example, the following alias command creates a shortcut for the ls -al command:

alias ls="ls -al"

This shortcut can then be used to list all of the files and directories in a directory. So, instead of writing the longer command ls -al every time you need to list the files in a directory, you can now type ls.

Benefits of Using Bash Aliases

There are several benefits to using bash aliases:

1. Increased productivity: By reducing the time spent typing repetitive commands, you can focus more on coding and development tasks.

2. Customization: Bash aliases are entirely customizable, tailored to your specific needs and preferences.

3. Error prevention: Since aliases can be designed to avoid complex or risky commands, you can reduce the chances of making mistakes when running important commands.

Creating a Bash Alias

To create a bash alias, follow these steps:

1. Open your terminal.

2. Navigate to your home directory (cd ~) if you're not already there.

3. Edit your shell configuration file using a text editor like Nano or VSCode. For example, to edit .bashrc, use nano ~/.bashrc or code ~/.bashrc.

4. Add your alias definitions to the file. The syntax for creating an alias is: alias shortcut='command'. Replace shortcut with the name of your desired alias and command with the actual command or commands you want to associate with the alias.

5. Save the file and exit the text editor.

6. To make your changes take effect, restart your terminal or run the command source ~/.bashrc.

Aliases with Multiple Commands

Using logical operators such as the AND (&&) and OR (||) operators, you can create aliases with multiple commands.

alias shortcut='command1 && command2'

Using the AND (&&) Operator

The double ampersand is a logical AND operator used to execute the second command only if the first command succeeds (i.e., returns an exit status of 0). However, if command1 fails (returns a non-zero exit status), command2 will not be executed. Here's an example alias in bash:

alias npmsetup='npm install && npm run dev'

In this example, you've created an alias called npmsetup. When you execute npmsetup, it will first install all the packages in the project using the command npm install. If the installation is successful, it will then run the development server using the npm run dev command.

Using Semicolon (;)

In bash, the semicolon is a simple command separator. When you use it to separate commands, bash will execute each command sequentially, regardless of whether the previous command succeeded or failed. This means that all commands separated by semicolons will be executed, even if some of them produce errors.

alias shortcut='command1 ; command2 ; command3'

In this case, command1 will be executed first, followed by command2, and then command3, irrespective of whether any of them fail or succeed.

Using the OR (||) Operator.

The double pipe is a logical OR operator used to execute a second command when the first command fails: When you use command1 || command2, it will execute command1 first. If command1 fails (returns a non-zero exit status), then bash will proceed to execute command2. However, if command1 succeeds (returns an exit status of 0), command2 will not be executed. let’s have a look at an example of using the || operator:

Imagine you want to create an alias command dev that turns on the development server in a JavaScript/Typescript project, using the || operator you can create the alias as follows:

alias dev='npm run dev || npm run develop'

In this example, you've created an alias called dev. When you execute dev, it will first try to run the development server using the command npm run dev. If that command is not found or fails, it will then try the second command npm run develop.

Bash Alias Examples

Let’s consider some practical examples of bash alias commands that can help improve your development workflow.

I use the following alias commands to run common git and development commands with just a few keystrokes without having to type the whole command:

alias gm='git commit -m'
alias pull='git pull'
alias push='git push'
alias gs='git status -sb'
alias gc='git checkout'
alias gb='git branch'
alias gline='git log --oneline'
alias gcp='git cherry-pick'
alias add='git add'
alias addall='git add .'
alias dps='docker ps'
alias dcu='docker-compose up'
alias cf='STAGE_BACKEND=true yarn start'
alias dev='npm run dev || npm run develop'
alias clean='npm run clean'

What aliases do you use to speed up your workflow? Please share in the comments section; I'll be waiting :)

Reference

• Bash scripting for beginners

• Advanced Bash-Scripting Guide

• Install Bash on Windows

Conclusion

Bash aliases can help you optimize your workflow as a developer. By creating shortcuts for common commands, you can save time, improve productivity, and make your development experience more enjoyable. So, don't hesitate to start creating your custom aliases today to improve your productivity on your daily development tasks.

Happy coding!

I'd love to connect with you on Twitter | LinkedIn | GitHub

What are Generics in Typescript?

Generics enable us to create reusable components that work with different data types while maintaining type safety. They provide a way to define placeholders for types that are determined when the code is used. This enables us to write more generic and flexible code.

Consider this example of this function below:

function echo(value) {
  return value;
}

//Call the function
echo("Hello World")

The echo function receives a value and returns that value without any modification. At the moment, TypeScript frowns at our function parameter and complains that “parameter 'value' implicitly has an 'any' type.“ meaning that since there’s no type explicitly specified, TypeScript has inferred a type of any to the parameter of the function. This doesn’t help us check the data of the parameter of our function, so how do we check that the right type is passed when our function is called and that our function also returns the correct data?

One way we could do this is by explicitly setting the type of parameter value passed and returned.

function echo(value:string):string {
  return value;
}
echo("Hello World")

This example works perfectly as we know the type of data being passed as a parameter and the data our function returns, but there is a tiny bit of an issue. What if we want to make the echo function reusable and call it somewhere else with a different data type? Typescript will complain that we’re passing the wrong data type to the echo function.

function echo(value:string): string {
  return value;
}
//Argument of type 'number' is not assignable to parameter of type 'string'
echo(3.14159)

So how do we fix this? How do we create a reusable function that accepts and returns the types we pass to it? Generics!

Basic Generics

Starting with the basics, using the echo function as an example, let’s spice it up and update the function with generics to be reusable.

function echo<T> (value: T): T {
  return value;
}

 //calls the function with no errors from typescript
echo("Hello World")
echo(3.14159);
echo(false);
echo([1, 2, 3, 4])
echo({id: 1, fullName: "John Doe"})

In this example, The echo function is a generic function that takes an argument value of type T and returns the exact value of type T without any modification. The generic type parameter <T> we passed to the function allows it to work with different types, thus allowing us to reuse the same function with different data.

Generally, you can write a generic type with any alphabet you like, <X>,<Y>, but T is for type, and it's just a tradition of naming generics, and there is nothing to prevent you from using other names or alphabets.

Generics on Type Declarations

Generics don’t only work with functions; we can also use generics to make types more robust, reusable, and flexible when declared. For example, let's say we are building an e-commerce application and have a Repository interface defining common CRUD operations for working with different entities in our system. Instead of creating separate interfaces for each entity (e.g., UserRepository, ProductRepository, etc.), we can use generics to create a single, generic Repository interface that can handle various entity types.

interface Repository<T> {
  getById(id: string): T | undefined;
  getAll(): T[];
  create(item: T): void;
  update(item: T): void;
  delete(id: string): void;
}
class UserRepository implements Repository<User> {
  // Implementation specific to User entity
}

class ProductRepository implements Repository<Product> {
  // Implementation specific to Products operation
}

// Usage
const userRepository: Repository<User> = new UserRepository();
const user = userRepository.getById('123');
userRepository.create(newUser);

const productRepository: Repository<Product> = new ProductRepository();
const products = productRepository.getAll();
productRepository.update(updatedProduct);

In this example, the Repository interface is defined with a generic type parameter T representing the entity type. It provides common methods like getById, getAll, create, update, and delete that can be used with any entity.

By implementing the Repository interface with specific entity types like User and Product, we can create specialized repositories that handle operations particular to those entities. The generic nature of the interface allows for code reuse and flexibility when working with different types of entities.

This approach makes the code more modular, maintainable, and extensible, as we can easily add new entity-specific repositories without duplicating the same set of methods for each entity type.

Generics in Functions with Type Constraints

As we’ve seen from our first generics example in this article, we can use generics with functions and combine them with some other features of TypeScript to produce more exciting results. Let’s say we want a function called printLength that accepts only items with lengths and prints the length of any items we pass on it. Using the extend keyword in Typescript, we can create a function that constrains the data passed to the function.

interface Lengthy {
  length: number;
}

function printLength<T extends Lengthy>(item: T): void {
  console.log(`Length: ${item.length}`);
}

const stringItem = "Hello, World!";
printLength(stringItem); // Output: Length: 13

const arrayItem = [1, 2, 3, 4, 5];
printLength(arrayItem); // Output: Length: 5

const numberItem = 42; // Error: Type 'number' does not have a property 'length'
printLength(numberItem);

In this example, The printLength function takes a generic type parameter T that extends the Lengthy interface using the extends keyword. This means the type T must have the length property of the type number.

Within the printLength function, we can safely access the length property of the item argument without causing type errors because the generic type T is guaranteed to have a length property.

Using the printLength function with items(stringItem and arrayItem ) that satisfy the Lengthy requirements, we got no errors from TypeScript. However, when we try to pass a number (numberItem), which doesn't have a length property, TypeScript raises an error.

Let’s consider another example that combines generics with some more inbuilt features of TypeScript. The function below accepts an array of objects, finds an object by the id key property of the object, and returns the key value we specified as a parameter when calling the function.

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

function getObjectValue<T extends { id: number }, K extends keyof T>
  (arr: T[], key: K, id: number): T[K] | undefined {
  const foundObject = arr.find((obj) => obj.id === id);
  return foundObject ? foundObject[key] : undefined;
}

const people: Person[] = [
  { id: 1, name: "John", age: 25 },
  { id: 2, name: "Jane", age: 30 },
  { id: 3, name: "Bob", age: 40 },
];

const nameValue = getObjectValue(people, "name", 2);
console.log(nameValue); // Output: Jane

Whoops! That looks like a complex function with lots of types flying everywhere. Let’s break it down bit by bit.

1. The first line of the function contains two generic types <T, K> where T is an object and has a constraint that it must have an object property of {id: number } and K is a key property of the object T (using the keyof operator) and has a constraint that it must only contain properties from T object (using the extend keyword).

2. The second line contains the parameters the function receives and what the function returns.

   • arr: is an array of our object T.

   • key: is a key property of object T.

   • id: is a number unique to every object T in the array.

   • The function getObjectValue then returns the value of the object key property found, T[K], or undefined if the value is not found.

3. The third line checks through the array using the id as a criterion, finding the object with the same id.

4. The fourth line checks if the object foundObject we just searched for actually exists and if it does, we extract a value from it using its key foundObject[key] and return it, or return undefined if it’s not found.

That’s it. We just broke down the getObjectValue function into small chunks to better understand the generic type definitions it has.

Generics can have default values.

We can also use generics with default values when working with functions. On our previous getObjectValue function, imagine we’d like to add a default parameter for our id parameter as the default value our function filters by. We could rewrite the function like this:

function getObjectValue<T extends { id: number }, K extends keyof T>
  (arr: T[], key:K, id:number = 2): T[K] | undefined {
  const foundObject = arr.find((obj) => obj.id === id);
  return foundObject ? foundObject[key] : undefined;
}

By updating the id: number to be id: number = 2, we set the default value to be 2 whenever our function runs.

Conclusion

In conclusion, we covered generics in TypeScript, how they make our code reusable, and how they help to add flexibility to our code using some examples of type declarations and functions.

Generics is one of the features of TypeScript that might look overwhelming at first, but once you get to know it better, you’ll appreciate how it makes your code more strictly typed.

I hope this article helps you better understand generics.

Thanks for reading. Cheers.

References

• Official TypeScript documentation on generics

I'd love to connect with you on Twitter | LinkedIn | GitHub

Types and interfaces in Typescript represent two distinct methods for defining the structure and shape of values or objects. They help ensure that variables, objects, arrays, parameters, and function return values match the structure and type set by the developer. This article emphasizes the distinctions between types and interfaces and their appropriate use cases.

Types

Types describe a value type such as string, boolean, number, etc. It enables you to explicitly specify the data type of variables, objects, function parameters, and function return values of functions, for example:

//types in variables
const age: number = 24;


//types in functions
function addNumbers(a: number, b: number): number {
  return a + b;
}

You can also use types to describe an object's structure or shape.

//type alias
type User = {
  id: string;
  firstName: string;
  lastName: string;
  isAdmin: boolean;
  age: number;
};

Interfaces

Interfaces allow you to specify the shape of an object by declaring the properties it should have, along with their types and optionally their accessibility modifiers.

The Differences

Below are some key differences between an interface and a type in typescript:

Types can be used to describe primitive types

One key distinction between interfaces and types is that only types can describe primitive types.

In the following code, the type declarations are suitable for describing the shape of data that isn't an object, but they are not valid for interface declarations.

// Types
// works fine with types
type Status = "pending" | "success" | "error";
type FamousQuotes = string[] | undefined;


 //Interface
 //Error! parsing error "{" expected
interface IStatus = "pending" | "success"

Interfaces for declaration merging

One advantage interface has over type is that you can always reopen them to add more properties. this is not possible when using type.

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

// Reopen the Person interface and add a new property
interface Person {
  gender: string;
}

const person: Person = {
  name: "John",
  age: 25,
  gender: "Male",
};

console.log(person.name); // Output: John
console.log(person.age); // Output: 25
console.log(person.gender); // Output: Male

When using type this would throw an error:

type Person = {
  name: string;
  age: number;
}

// Error: "Duplicate identifier 'Person'"
type Person = {
  gender: string;
}
// Error: Object literal may only specify known properties, and 'gender' does not exist in type 'Person'
const person: Person = {
  name: "John",
  age: 25,
  gender: "Male",
};

Interface extension and type union

When working with objects and classes, interfaces offer a more seamless experience, allowing you to extend other interfaces to inherit their properties and methods.

interface Animal {
  name: string;
  age: number;
  eat(): void;
}

interface Dog extends Animal {
  breed: string;
  bark(): void;
}

const myDog: Dog = {
  name: "Max",
  age: 3,
  breed: "Chihuahua",
  eat() {
    console.log("Eating...");
  },
  bark() {
    console.log("Woof!");
  },
};

console.log(myDog.name); // Output: Max
console.log(myDog.age); // Output: 3
myDog.eat(); // Output: Eating...
myDog.bark(); // Output: Woof!

However, we can perform something known as "intersection types" with types. Intersection types allow you to combine multiple types into a single type with all the properties and methods of each type. This is achieved by using the & symbol between the different types.

// type

type Animal = {
  name: string;
  age: number;
  eat(): void;
}

type Dog = Animal & {
  breed: string;
  bark(): void;
}

VS Code IntelliSense performs better with types.

When using types, you can hover over the type declaration, and IntelliSense in VS Code displays the internal properties of that type. However, interfaces only show the name of the declared interface. A related issue can be found on GitHub, as this is a significant factor for some people to prefer using types over interfaces.

Intellisense on VS Code when using interface:

Intellisense on VS Code when using type:

Comparison Table

The table below compares types and interfaces in TypeScript:

Which should I use for a typescript project?

Often, as someone starting with TypeScript, you might ask yourself, "When should I use 'type' over 'interface' and vice versa?" The comparison above shows that both have different approaches to describing the shape of values and objects in your TypeScript project.

A short, opinionated answer is to use interfaces until you encounter areas where you need to explicitly use types, as interfaces represent how Javascript behaves in a real-world scenario. However, it boils down to a matter of personal preference. This Stackoverflow discussion also highlights different developers' choices and reasons for picking interfaces over types and vice versa.

Conclusion

In this article, we explored some of the differences between types and interfaces in typescript and the best occasions to use one over the other. Ultimately, the decision of whether to use type or interface in a TypeScript project depends on your personal preference and the specific needs of your project. Both have their own strengths and weaknesses, and it's up to you to weigh them and make an informed decision. It's also worth noting that as you gain more experience with TypeScript, your preferences, and needs may change, so don't be afraid to experiment and try different approaches.

Reference

• Official typescript documentation on Type alias vs interface

• Stackoverflow discussion

• VSCode Intellisense issue with interfaces on GitHub

I'd love to connect with you on Twitter | LinkedIn | GitHub

Thanks for reading; I hope you find this article helpful. Cheers

Imagine this scenario: you have a website hosted on Netlify and want to send custom emails using your domain name, e.g., yourname@domain.com, so you purchased a shared hosting plan that gives you domain-based mailboxes for sending and receiving emails.

Why would you deploy your website on Netlify instead of your shared hosting plan? Well, they're both hosting providers for deploying modern frontend applications such as React and Vue, and they provide you with benefits such as automatic SSL, serverless functions, continuous deployment using git, and lots more. This article gives you a workaround to enjoy the best of both worlds.

Prerequisites

To begin, you need the following:

1. A free or Netlify account where you hosted your website

2. A domain name linked to your website

3. A hosting (shared or full access) plan that provides you with custom emails and Cpanel access.

With these, you're good to go.

Step 1: IP Address

Login to your Cpanel dashboard on your hosting and get the IP address assigned to your server.

Step 2: Email Server Address

To create and access your email details, go to the email section of your cPanel. Here is a guide on how to create emails and retrieve the details. Below is a screenshot of the details you need.

So far, here are the details you've gathered from the shared host server:

• IP Address

• Email server address

These two items are essential for ensuring emails are sent from the shared hosting server.

Step 3: Configure DNS Records

Now that you have the details you need from the shared hosting, you need to add those details to Netlify so that your emails can go through whenever you try sending an email.

You can find a step-by-step guide on deploying a website on Netlify here, and you can set up a custom domain here.

With those details set up, visit https://app.netlify.com/teams/team-name/dns/yourdomain.com (replacing team-name and yourdomain.com with your team name and domain name.

This shows you the DNS records for your domain.

Using the same record from steps 1 and 2, click on the add new record button to update the records on Netlify with these two DNS records:

Record 1

• Type: A

• Name: mail.yourdomain.com (See step 2).

• Value: IP address of your shared server (see step 1).

• TTL: 60 (or allow to use default)

Record 2

• Type: MX

• Name: yourdomain.com

• Value: mail.yourdomain.com

• TTL: 60 (or allow to use default)

• Priority: 0

DNS changes usually take 24–48 hours to reflect the changes made.

Conclusion

That's it. You've just added details from a shared host to Netlify. Here is a quick summary of what you accomplished.

• Retrieved IP addresses from shared hosting

• Retrieved email server details

• Update the DNS records on Netlify to point to your shared hosting for sending emails.

References

• Create a free Netlify account.

• Deploying on Netlify

• Add a custom domain to Netlify sites.

I'd love to connect with you on Twitter | LinkedIn | GitHub

I hope you find this article helpful. Cheers.

MongoDB

MongoDB is a popular cross-platform NoSQL database. This means that, unlike traditional relational databases, it stores data in a way that is not a table. MongoDB stores data in a format that is similar to JSON. This makes it flexible and scalable for a wide range of uses, from small applications to large enterprise systems. Here are some ways their DevRel team has actively educated and enabled its users:

• Community: The company has a community version for its members and has built a developer community that is friendly and helpful. They host a variety of events and webinars, both online and offline, centered around MongoDB, and also go on global tours to connect with developers and learn from their experiences. This commitment to engaging with their community and seeking feedback is a testament to the company's drive to constantly improve and innovate its product.

• Education: MongoDB has several educational resources to help developers become skilled in their products, such as the MongoDB University program, certification programs, and academic courses and curriculums on their products for educators and universities. There are also numerous how-to guides provided by the community for its members.

• Resources and Tools: Their documentation is well structured and has code samples, an easy how-to-get-started guide, and specific sections for different developers on how to use their product, such as JavaScript, C#, and Python. Etc., use cases, examples, and code samples as to how to use their products. They’ve also created tools to empower developers, such as CLIs, plugins, and drivers.

Overall, the MongoDB DevRel team has put in a great effort to create a sense of community, a well-thought-out educational guide, an easy-to-use user guide, and amazing events and activities.

Amazon Web Services (AWS)

AWS is the world's most widely adopted cloud computing platform. AWS provides a range of cloud-based services, including computing, storage, databases, analytics, machine learning, IoT, security, and more, to individuals, businesses, and governments worldwide. AWS allows developers to build and deploy scalable, reliable, and cost-effective cloud applications. Here are some initiatives they've implemented that have made them stand out:

• Community: The AWS community includes developers, architects, administrators, engineers, business leaders, and more from all over the world. Overall, the AWS community is passionate, collaborative, and supportive. They share knowledge through various channels, such as events, meetups, and webinars, both in person and virtually, and host conferences about their tools and how best to use them. Amazon is also big on open-source, and they show this by supporting, contributing to, and partnering with open-source leaders globally.

• Education: They have several customer enablement programs, like certification programs, to help their users learn new skills. These programs have helped build a strong community of certified professionals who are known all over the world for their knowledge and skills in AWS.

• Resources and Tools: Having multiple products, AWS has put great effort into creating good documentation, how-to-get-started guides, blog posts from experts, and tutorials on how to use their products. It's also interesting to know that their documentation and tutorials are available in different languages so that users from all over the world can use them easily.

Vercel

Vercel is a cloud-based platform for developing, deploying, and hosting modern front-end applications. They are also the creators of Next.js, a popular open-source React framework for building server-side rendering (SSR) and static web applications.

• Community: Vercel's developer community is extremely active. As a company with a strong commitment to open source, they have developed valuable, free, and user-friendly software that thousands of developers around the world adore. Nextjs, their open-source React framework that thousands of developers use to create front-end applications, is an illustration of this. In addition, they host conferences about the software and tools they've created for developers. This provides the community's developers with a sense of belonging.

• Education: The DevRel team at Vercel not only educates developers on how to use their platform and open-source software through tutorials, blog posts, practical use cases, and video content, but they also showcase their expertise by building amazing products using Vercel's tools and writing tutorials on how they accomplished their goals. This provides developers with real-world examples of how to build their own products, making it an exciting and valuable learning experience.

• Resources and Tools: Vercel provides developers and managers with a comprehensive set of tools and resources for utilizing their products. There are CLI tools, excellent documentation on how to use their product, guides for integrating with other tools, and simple-to-use templates for the most popular front-end frameworks and libraries.

Conclusively, while the developer relations (DevRel) approach companies take depends entirely on the goals and mission of the company, based on my research, I have discovered that these companies have something in common. They all work towards building a healthy relationship with their customers by educating, enabling, and inspiring them to build with incredible tools.

Thanks for reading. I hope you had as much fun reading it as I did writing it.
This article is part of my #90DaysofDevRel learning journey. For more updates on the challenge, feel free to connect with me on Twitter, where I document my daily activities.