Forem: Daryl Lukas

The Importance of Effective Logging

Daryl Lukas — Sun, 29 Dec 2024 09:04:12 +0000

Effective logging is crucial for diagnosing and resolving issues, especially during unexpected production incidents. Many developers realize their logging practices are inadequate only when faced with a 3:00 a.m. crisis, sifting through disorganized logs to find the root cause of a problem. To prevent this, it’s essential to adopt strategic logging practices that ensure clarity, structure, and actionable insights.

1. Establish Clear Objectives

Before adding log statements to your code, define your logging strategy with clear objectives. Use the following questions to guide your approach:

What are the main goals of your application?
Which critical operations need to be monitored?
What Key Performance Indicators (KPIs) are most relevant?

For example, error logs shouldn’t just indicate that something went wrong—they should provide enough context to identify and fix the issue quickly.

💡 Pro Tip: Anticipate what information you’ll need during debugging. Initially, you might over-log, but it’s easier to reduce unnecessary data later than to add missing context once in production. Regularly review your logs to identify what’s useful and eliminate noise.

2. Understand Log Levels

Logging at appropriate levels helps organize and prioritize information. Here are four common log levels:

A. Info

Captures routine operations, such as successful user logins or completed transactions.

Example:
INFO: User login successful - UserID: 12345

B. Warning

Indicates something unusual but non-critical, like a delay in payment processing.

Example:
WARNING: Payment processing delayed - OrderID: 67890

C. Error

Logs serious issues, such as a failed payment or a service crash.

Example:
ERROR: Database connection failed - Service: Checkout

D. Fatal

Represents catastrophic issues, such as an "out of memory" error causing the application to shut down.

Example:
FATAL: Application out of memory - Shutting down

In production, the default log level is often set to INFO to avoid excessive verbosity. However, during troubleshooting, increase the log level to capture more detailed information.

3. Implement Structured Logging

Structured logging formats log entries into easily searchable fields, making it simpler for both humans and machines to process and analyze them. Instead of a vague error message, structured logs should answer key questions like who, what, where, and why.

Include the following details in your structured logs:

Request IDs: To trace activity across microservices.
User IDs: For session context.
System State: Database status, memory usage, or other relevant metrics.
Error Context: Detailed messages, including stack traces when applicable.

Example of a structured log entry:

{
  "timestamp": "2024-12-29T03:00:00Z",
  "level": "ERROR",
  "message": "Payment processing failed",
  "orderID": "67890",
  "userID": "12345",
  "errorDetails": "Timeout while connecting to payment gateway"
}

4. Use Log Sampling for Cost Efficiency

High-traffic systems generate enormous amounts of log data, leading to high storage and processing costs. Log sampling can reduce these costs while preserving essential information.

How log sampling works:

Retain a subset of routine logs, such as a 20% sample of successful login attempts.
Always keep critical logs, such as errors or warnings.
Adjust sampling rates during peak traffic or for specific operations.

Example: In an authentication service handling 1,000 logins per second, a 10% sampling rate would save 90% of storage space while maintaining enough data for analysis.

Conclusion

Effective logging is more than just adding print statements—it’s about creating a reliable system for tracking and diagnosing issues. By setting clear objectives, using appropriate log levels, implementing structured logging, and employing log sampling, you can ensure your logs are both actionable and cost-effective.

When an issue arises at 3:00 a.m., these practices will save you from hours of frustration, helping you pinpoint and resolve problems swiftly.

Make your code developer-friendly with these 7 tips

Daryl Lukas — Wed, 26 Jul 2023 11:30:08 +0000

Code documentation is the unsung hero of software development. It's not just about writing code; it's about making it understandable for others (and for yourself in the future). Here's a breakdown of best practices:

1️⃣ Purpose Over Process: Always start by explaining why a piece of code exists, not just how it works. This gives context and makes it easier for others to understand its relevance.
2️⃣ Consistency is Key: Whether you're using JSDoc for JavaScript, JavaDoc for Java, or any other tool, maintain a consistent style. This makes your documentation predictable and easier to follow.
3️⃣ Avoid Redundancy: If it's obvious from the code, you don't need to document it. For instance, int add(int a, int b) doesn't need a comment saying it adds two numbers.
4️⃣ Document Assumptions: If your code assumes certain conditions (e.g., an input list is already sorted), document it. This can prevent future bugs.
5️⃣ Keep It Updated: Outdated documentation can be more harmful than no documentation. Whenever you update your code, ensure the associated documentation reflects those changes.
6️⃣ Use Code Examples: Sometimes, the best way to explain a function or a class is to show a small example of it in action.
7️⃣ Document Edge Cases and Limitations: If a function doesn't handle certain inputs or has known limitations, document them. This can save hours of debugging later on.
BONUS TIP ⭐8️⃣ Link to External Resources: If there's a blog post, paper, or any other resource that provides more context or a deeper dive into a concept, link to it.

Remember, the goal of documentation is to make code more accessible and maintainable. It's an investment in the long run.

Follow me on X, @daryllukas for more tips like this.

Today I Learned: How to Resume a screen Session on Linux 🐧

Daryl Lukas — Wed, 19 Jul 2023 10:41:25 +0000

Today, I explored how to use the screen command on Linux. If you often work on remote servers, this tool can be a game-changer.

Imagine starting a huge data transfer or running a long installation script on some remote server. Only to be disconnected halfway through because your SSH session was idle. Why? Well, it's because:

SSH allows [server] administrators to set an idle timeout interval. After this interval has passed, the idle user will be automatically logged out.

ENTER `screen`

screen is an invaluable tool that provides terminal multiplexing. In simple terms, it lets you run multiple terminal sessions in one window and, more importantly, allows you to detach from and later reattach to terminal sessions.

Here's a simple guide to using the screen:

Installing `screen`:

Ubuntu/Debian:

sudo apt-get update
sudo apt-get install screen

Fedora:
```
sudo dnf install screen
```
CentOS/RedHat:
```
sudo yum install screen
```
Arch Linux:
```
sudo pacman -S screen
```
openSUSE:
```
sudo zypper install screen
```

Usage

Here's a simple guide on using screen:

Start a session: Use the command screen. If you want to find it later, give it a name: screen -S yourname.
Leave the session: Press CTRL + A then D. Your work keeps running even if you're not watching.
See your sessions: Type screen -ls. This shows any sessions you have running.
Get back to a session: Use screen -r SessionID. If you named it, use screen -r yourname.

Final words

Using screen has made it easier to keep working even if my remote connection drops. It's a useful tool to keep things running smoothly.

Follow me on Twitter (@daryllukas) for more Linux tips like this.

Writing Cleaner JavaScript with Nullish Coalescing: A Developer's Guide

Daryl Lukas — Wed, 12 Jul 2023 05:51:20 +0000

Introduction

JavaScript has been continuously evolving, introducing new features that enhance developers' productivity and improve code readability. One such feature is nullish coalescing, introduced in ECMAScript 2020, which addresses a common challenge faced by developers when dealing with null or undefined values. In this blog post, we will delve into the concept of nullish coalescing and explore how it can be leveraged to write cleaner, more robust code.

Understanding the Problem

In JavaScript, null and undefined are commonly used to represent the absence of a value. However, when handling these values, a common pitfall occurs. Consider the following scenario:

let defaultValue = "Default Value";
let value = null;
let value2 = 0;

let result = value || defaultValue;
let result2 = value2 || defaultValue;

console.log(result); // Output: "Default Value"
console.log(result2); // Output: "Default Value"

In the code snippet above, the intention was to assign the value of value to result. However, since value is null, JavaScript evaluates it as “falsy” and proceeds to assign the defaultValue instead. While this behavior might seem acceptable in some cases, it can lead to unintended consequences and logical errors if the value is meant to be a valid, “falsy” value like 0 or an empty string.

Enter Nullish Coalescing

To overcome the shortcomings of the logical OR operator (||), ECMAScript 2020 introduced the nullish coalescing operator (??). The nullish coalescing operator evaluates the expression on its left-hand side and returns it if it is not nullish (null or undefined). Otherwise, it evaluates the expression on the right-hand side and returns that value.

let defaultValue = "Default Value";
let value = null;
let value2 = 0;

let result = value ?? defaultValue;
let result2 = value2 ?? defaultValue;
console.log(result); // Output: "Default Value"
console.log(result2); // Output: 0

In this updated example, the nullish coalescing operator ensures that result remains null since value is explicitly null. It differentiates between nullish values and valid falsy values, providing a more accurate representation of the actual data.

Use Cases and Benefits

Nullish coalescing can greatly simplify code and improve its readability in several scenarios:

Default Values: When assigning default values to variables, nullish coalescing allows for concise and explicit syntax.

let username = null;
let defaultUsername = "Guest";

let displayName = username ?? defaultUsername;

console.log(displayName); // Output: "Guest"

Function Arguments: Nullish coalescing is useful when passing arguments to functions, ensuring that default values are assigned only when necessary.

function greetUser(name) {
  name = name ?? "Anonymous";
  console.log(`Hello, ${name}!`);
}

greetUser(); // Output: "Hello, Anonymous!"
greetUser("John"); // Output: "Hello, John!"

Optional Object Properties: When accessing properties in nested objects, nullish coalescing can prevent errors when a property is missing or nullish.

const user = {
  name: "John",
  address: null
};

let city = user.address?.city ?? "Unknown";

console.log(city); // Output: "Unknown"

Bonus Tip: Nullish Coalescing Assignment

In addition to the nullish coalescing operator (??), ECMAScript 2021 introduced the nullish coalescing assignment operator (??=). This operator combines the nullish coalescing behavior with assignment, allowing for concise and efficient code when dealing with nullish values. Let's explore an example to understand its usage:

let existingValue = "Existing Value";
let newValue = null;

existingValue ??= newValue;

console.log(existingValue); // Output: "Existing Value"

In this example, the nullish coalescing assignment operator (??=) is used to assign the value of newValue to existingValue only if existingValue is nullish (null or undefined). Otherwise, existingValue remains unchanged.

The nullish coalescing assignment operator proves particularly useful when updating existing values or setting default values for variables without overwriting non-nullish values. It eliminates the need for additional conditional checks and provides a concise way to handle nullish scenarios.

let username = null;
let defaultUsername = "Guest";

username ??= defaultUsername;

console.log(username); // Output: "Guest"

In this example, if username is nullish, it will be assigned the value of defaultUsername using the nullish coalescing assignment operator. However, if username already holds a non-nullish value, it remains unchanged.

Conclusion

Nullish coalescing in JavaScript provides an elegant solution for handling null or undefined values, offering cleaner and more robust code. By utilizing the nullish coalescing operator (??), developers can accurately assign default values, handle function arguments, and access optional object properties. Additionally, the nullish coalescing assignment operator (??=) further optimizes value assignment efficiency. Embrace these features introduced in ECMAScript 2020 and 2021, respectively, to enhance your JavaScript codebase. Ensure your JavaScript environment supports these features to fully utilize their benefits in your projects.

Follow me on Twitter (@daryllukas) for more JavaScript lessons like this.

Testing in React: Best Practices and Tools

Daryl Lukas — Tue, 04 Jul 2023 06:56:00 +0000

Introduction

Testing is an essential part of software development, and React is no exception. Testing helps to catch bugs early, prevent regressions, and ensure that your app works as intended. In this blog post, we'll discuss some best practices and tools for testing React applications.

Writing Tests in React

When it comes to testing React components, there are two main approaches: unit tests and integration tests. Unit tests focus on testing individual components in isolation, while integration tests test how multiple components work together.

Unit Tests

Unit tests are typically written using a testing library like Jest or Mocha. These libraries provide functions for defining tests, running them, and reporting the results. To test a React component, you can use the render function from the react-dom library to render the component to a virtual DOM. You can then use the expect function to make assertions about the rendered output.

Here's an example of a unit test for a simple React component:

import React from 'react';
import { render } from 'react-dom';

function Greeting({ name }) {
  return <div>Hello, {name}!</div>;
}

test('renders a greeting', () => {
  const container = document.createElement('div');
  render(<Greeting name="World" />, container);
  expect(container.textContent).toBe('Hello, World!');
});

This test checks that the Greeting component renders a message with the correct text.

Integration Tests

Integration tests are more complex than unit tests and require a testing framework that can simulate user interactions. React provides a tool called react-testing-library that makes it easy to write integration tests. This library allows you to simulate user events like clicks and form submissions and test the resulting changes to the DOM.

Here's an example of an integration test using react-testing-library:

import React from 'react';
import { render, fireEvent } from '@testing-library/react';

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <div data-testid="count">{count}</div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

test('increments the counter', () => {
  const { getByText, getByTestId } = render(<Counter />);
  const incrementButton = getByText('Increment');
  const countDisplay = getByTestId('count');
  expect(countDisplay.textContent).toBe('0');
  fireEvent.click(incrementButton);
  expect(countDisplay.textContent).toBe('1');
});

This test checks that clicking the "Increment" button in the Counter component updates the count display.

Tools for Testing React

In addition to testing libraries like Jest and react-testing-library, there are several other tools that can make testing React applications easier:

React Developer Tools

React Developer Tools is a browser extension that provides a set of debugging and testing tools for React applications. It allows you to inspect the component hierarchy, view props and state, and simulate user interactions.

Cypress

Cypress is a testing framework that focuses on end-to-end testing. It allows you to write tests that simulate real user behavior in a web browser. Cypress provides a simple API for interacting with the DOM and making assertions about the state of your application. Check the documentation to learn more and get stared

Storybook

Storybook is a tool for developing and testing UI components in isolation. It allows you to view your components in various states and test different props and configurations. Check the documentation to get stared.

Conclusion

Testing is an essential part of building React applications. By following best practices and using the right tools, you can ensure that your app is robust, reliable, and easy to maintain. So next time you're building a React app, remember to write tests!

Enjoyed the insights on React testing? Don't miss out on more! Follow me, @daryllukas on Twitter for regular updates, tips, and best practices on React and other web development topics. Let's connect!

Configuring Rewrites in Next.js

Daryl Lukas — Sun, 02 Jul 2023 06:00:00 +0000

Introduction

Next.js is a popular React framework that allows developers to build server-side rendered React applications with ease. One of the features of Next.js is the ability to configure rewrites, which can be used to redirect URLs or serve different content based on certain conditions. In this blog post, we'll discuss how to configure rewrites in Next.js and provide some real-world examples of how they can be used.

What are Rewrites?

Rewrites are a feature in Next.js that allows you to modify how incoming requests are handled by the server. This can be useful in a number of scenarios, including:

Redirecting incoming URLs to new destinations
Serving different content based on certain conditions (e.g. environment variables)
Mapping incoming requests to different endpoints

Next.js provides a simple syntax for configuring rewrites in your next.config.js file. Let's take a look at how this works.

How to Configure Rewrites in Next.js

To configure rewrites in Next.js, you'll need to create a next.config.js file in the root of your project. In this file, you can export an object with a rewrites property, like so:

// next.config.js

module.exports = {
  rewrites: async () => {
    return [
      {
        source: '/old-blog/:slug',
        destination: '/new-blog/:slug',
      },
    ]
  },
}

In this example, we're configuring a rewrite that will redirect any URLs that start with /old-blog/ to the corresponding URL in the new blog (/new-blog/). The :slug parameter will be preserved in the rewrite.

You can use any valid regular expression for the source property, and the destination property can be a string or a function that returns a string.

Real-World Examples

Here are a few examples of how rewrites can be used in real-world scenarios:

Redirecting incoming URLs from an old blog to a new blog
Serving different content based on the environment (e.g. development vs production)
Mapping incoming requests to different endpoints based on the user's locale

I recently used rewrite in a NextJS and Strapi project. I had both a production and a development environment, and I needed to rewrite the image paths differently for each environment.

rewrites: async () => {
    return [
      {
        source: '/uploads/:path*',
        destination:
          process.env.NODE_ENV === 'production'
            ? 'https://fakeserver.com:1337/uploads/:path*'
            : 'http://locahost:1337/uploads/:path*',
      },
    ];
  },

Rewrites vs. Redirects

While rewrites and redirects may seem similar, there are some key differences between the two.

Redirects are used to send a client to a different URL than the one they requested. This can be useful for a number of reasons, such as when content has moved to a new location or when a URL needs to be updated for SEO purposes. However, redirects can be slow and negatively impact the user experience if they're not used correctly.

Rewrites, on the other hand, are used to modify how incoming requests are handled by the server. They can be useful for a number of scenarios, as we've discussed, but they don't involve sending the client to a different URL. Instead, they allow you to serve different content or modify how requests are handled based on certain conditions.

In general, if you need to send a client to a different URL, you should use a redirect. If you need to modify how requests are handled on the server, you should use a rewrite.

In Next.js, both rewrites and redirects can be configured using the next.config.js file. However, the syntax for each is slightly different, so it's important to understand the differences between the two and choose the appropriate one for your use case.

Conclusion

Rewrites are a powerful feature in Next.js that allows you to modify how incoming requests are handled by the server. Whether you need to redirect URLs, serve different content based on certain conditions, or map incoming requests to different endpoints, rewrites provide a simple and flexible solution. I hope this blog post has provided you with a solid understanding of how to configure rewrites in Next.js.

References

Rewrites: Official Docs

Redirects: Official Docs

ChatGPT explains Debt Restructuring

Daryl Lukas — Fri, 30 Jun 2023 21:08:30 +0000

You're probably asking why I did this.

My home nation, Zambia, has concluded a debt restructuring agreement with its creditors (as of this writing). This topic has been all over my newsfeed this week. Some people appeared to be unclear by what was going on. I then stumbled across this funny reel, which brought me to tears. Debt consolidation for "tough ohns" (local slang)

This gave me the idea to ask GPT-4 to explain what debt restructuring is in different ways. Here are some of its responses:

1. Prompt: Explain Debt restructuring to a 10-year-old

Sure, I'd be happy to simplify this for you.

Okay, so you know when you borrow a toy from your friend, and you agree to give it back to them in two days? But then, two days come and you haven't finished playing with the toy yet, so you ask your friend if you could keep the toy a bit longer. You both agree that you will return the toy in five days instead of two. This is a simple example of restructuring.

Now let's relate this to money or debt. Imagine you borrowed $10 from your friend to buy a toy you really wanted. You promised to pay back the money in a week. However, when a week comes, you don't have enough money to pay your friend back. You could talk to your friend and ask if you could pay them back in a month instead, and maybe you can pay a little bit extra for the longer time. This is like debt restructuring.

It's a way for people or companies who borrowed money but can't pay it back right now to make a new plan. They talk with the people they owe money to and agree on a new way to pay back. This might mean paying back over a longer period of time, or maybe even paying back less than they originally borrowed.

Does that make sense?

2. Prompt: Explain Debt restructuring in a rap verse

(Verse 1)
Yo, here we go, listen up, gather near,
Gonna tell you 'bout something that you need to hear.
It's about debt restructuring, don't live in fear,
Even if your pockets are empty, don't shed a tear.

(Chorus)
When you owe some green but your wallet's lean,
Debt restructuring is the scene.
Talk to your lender, make a plan,
Pay it back when you can.

(Verse 2)
You borrowed some cash, but the time did dash,
And now you're feeling the creditor's lash.
But hold up, wait, there's another gate,
Debt restructuring can change your fate.

(Chorus)
Debt restructuring, don't ignore,
It's not about showing the creditors the door.
It's about new terms, extending the time,
Or reducing the amount, it ain't a crime.

(Outro)
So that's the deal, now you know the score,
Debt restructuring ain't a bore.
Whether you're a person or a corporation,
It's a tool to help your financial situation.

3. Prompt: Explain Debt restructuring as a drunk person

Hey, buddy, ya know...haha...ya know what's funny? Money. We all need it, right? Yeah, we do. And sometimes, sometimes...hic we need more of it than we have. So we...we borrow it. Ya follow me?

Okay, so let's say, you bought rounds of drinks at the bar, right? Now the barman says you owe him a ton, but you're like, "Whoa, hold on there, I don't got all that right now." And the barman says, "You gotta pay up, mate," but you, you got an idea!

You tell him, "How 'bout I pay ya half today and half next week when I get my paycheck?" And he squints at you, you know, like the barman does. Finally, he says, "Alright, deal."

You see, that's debt re...res...haha...debt restructuring, mate! It's when you borrow money but can't pay it back, so you talk to the people you owe and make a new plan. You make a deal to pay it back later or maybe even pay back less! How great's that? hic I think it's pretty neat... Now, where's my beer?

4. Prompt: Explain Debt restructuring as an economist

Debt restructuring refers to a method employed by individuals, companies, or nations to adjust, modify or alter the terms of debts that they owe to their creditors. The necessity for debt restructuring typically arises when the debtor faces financial distress or is in a position where they are unable to meet the original payment terms.

There are several means by which this restructuring process can occur. One common method is to extend the repayment period, thereby providing the debtor more time to fulfill their obligations. This might, however, entail a renegotiation of the interest rate or the principal amount.

In more dire scenarios, especially in the context of corporate or sovereign debts, creditors may agree to a reduction in the principal amount owed, or a 'haircut', to alleviate the debtor's financial burden. This usually happens when the potential recovery from liquidation or bankruptcy is expected to be lower than the restructured repayment.

The goal of debt restructuring is two-fold. From the debtor's perspective, it provides an opportunity to manage liquidity problems, mitigate the risk of bankruptcy, and buy time to improve financial health. From a creditor's perspective, it allows the recovery of as much debt as possible, often more than would be possible in the event of bankruptcy.

While beneficial in many instances, debt restructuring is not without its implications. It can affect the debtor's credit rating and future borrowing capacity, and can also lead to losses for the creditor. Hence, it is a strategy that needs careful analysis and consideration.

5. Prompt: Explain Debt restructuring in a nursery school song

(Verse 1)
🎶 If you borrowed a toy, from your best little boy,
And can't give it back when you said.
Don't fret, don't frown, don't let it get you down,
Just talk to your friend and use your head.

(Chorus)
🎶 Debt restructuring, it's not a game,
It's about setting things right, without any blame.
A new plan to return what you took,
Like a new chapter in your friendship book.

(Verse 2)
🎶 So, you go to your friend, on this, you can depend,
And say, "Can I keep it some more days?"
He smiles and nods, against the odds,
Debt restructuring in a youthful haze.

(Chorus)
🎶 Debt restructuring, it's as simple as pie,
It's about making things right, giving it another try.
A promise to return, and a smile so bright,
With debt restructuring, everything will be alright.

(Outro)
🎶 So, when you borrow, and time turns hollow,
Remember this little song.
Debt restructuring is the key,
To make your friendships last long. 🎶

Which one is your favorite? Comment below.

Formatting dates and times without a library in JavaScript

Daryl Lukas — Mon, 21 Nov 2022 13:41:27 +0000

Dates and times can be tricky in JavaScript. You always want to be sure you are doing it correctly. Luckily, because JavaScript has a built-in Date object, it makes working with dates and times much easier. In fact, there are many different methods on the Date object that can be used to do different things with dates. In this blog, I'll run through a few of these methods.

A quick note on the `Date` object

The built-in Date object in JavaScript offers us a set of APIs for working with date and time data. A Date object instance represents a single point in time. The instance is in a platform-independent format.

Creating an instance

Current Date / Time

There are multiple ways you can get an instance (or representation) of the current date and time.

Using the constructor

let now;

now = new Date();
console.log(now); // [object Date] { ... }

Using the `Date()` function

This returns a string representation of the current date and time

now = Date();
console.log(now);
// "Mon Nov 21 2022 10:39:45 GMT+0200 (South Africa Standard Time)"

Using a static method, `.now()`

This returns a number that represents the milliseconds elasped since 1 January 1970 UTC

now = Date.now();
console.log(now);
// 1669019985182

Other ways to create an instance

Parsing strings

With the new Date() constructor (or Date.parse() ). Strings must be compliant with the ISO 8601 format, YYYY-MM-DDTHH:mm:ss.sssZ.

const nextBirthday= new Date('2023-08-02T00:00:00')

The example below is discouraged and may not work in all runtimes/browsers. A library like moment or dayjs can help if other string formats are needed.

const nextBirthday = new Date('August 02, 2023 00:00:00');
// DISCOURAGED: may not work in all runtimes

Passing integers in the constructor

This syntax is new Date(year, month, day, hours, minutes, seconds, milliseconds);

This month is 0-indexed, meaning 0 is January and 11 is December

nextBirthday = new Date(2023, 7, 2, 0, 0, 0);
console.log(nextBirthday .toString());
// "Wed Aug 02 2023 00:00:00 GMT+0200 (South Africa Standard Time)"

Epoch (Unix) Timestamp

Epoch timestamp is the number of seconds elapsed since January 1, 1970 (midnight UTC/GMT)

Sytanx new Date(milliseconds)

nextBirthday = new Date(1690927200000)

Get Epoch in seconds

const seconds = Math.floor(Date.now() / 1000);

Date methods

We can also manage and manipulate dates and times using the methods provided by the Date object.

Accessing Date components

Get the year (4 digits, e.g., 2022)

nextBirthday.getFullYear()
// 2023

Get the month. The month is zero-indexed (i.e., 0 - 11).

nextBirthday.getMonth()
// 7

Get the day of the month, from 1 to 31.

nextBirthday.getDate()
// 2

Get the day of the week. This is also zero-index (i.e., from 0 to 6). The first day is always Sunday, 0 and last day is Saturday, 6. (Not so in some countries but can’t be changed).

nextBirthday.getDay();
// 2

The methods, getHours(), getMinutes(), getSeconds() , getMilliseconds() get the corresponding time components.

All the methods above return the components relative to your local time zone. UTC-counterparts are available for each method which return values relative to UTC. Simply insert UTC right after get in the method name.

// Local time is UTC +2
nextBirthday.getHours(); // 0
nextBirthday.getUTCHours(); // 22

Destructuring assignment example

const date = new Date();
const [month, day, year] = [date.getMonth(), date.getDate(), date.getFullYear()];
const [hour, minutes, seconds] = [date.getHours(), date.getMinutes(), date.getSeconds()];

Setting Date Components

The following methods allow to set date/time components

setFullYear(year, [month], [date])
setMonth(month, [date])
setDate(date)
setHours(hour, [min], [sec], [ms])
setMinutes(min, [sec], [ms])
setSeconds(sec, [ms])
setMilliseconds(ms)
setTime(milliseconds) (sets the whole date by milliseconds since 01.01.1970 UTC)

let now = new Date();
now.setHours(12);
now.setFullYear(2015);
console.log(now.toString());
// "Sat Nov 21 2015 12:08:53 GMT+0200 (South Africa Standard Time)"

Every one of them except setTime() has a UTC-variant

let now = new Date();
now.setUTCHours(2);

Some methods can set multiple components at once. For example, setHours() gives you the option to set minutes, seconds and milliseconds as well. These options are not modified if not included in the method call.

let today = new Date();

today.setHours(12);
console.log(now.toString());
// "Mon Nov 21 2022 12:13:36 GMT+0200 (South Africa Standard Time)"

now.setHours(12, 12, 12, 12);
console.log(now.toString());
// "Mon Nov 21 2022 12:12:12 GMT+0200 (South Africa Standard Time)"

Formatting

Variations of the toString() method. Returns various string representation of a Date instance.

let now = new Date();

now.toString();
// "Mon Nov 21 2022 14:17:21 GMT+0200 (South Africa Standard Time)"

now.toDateString();
// "Mon Nov 21 2022"

now.toTimeString();
// "14:17:21 GMT+0200 (South Africa Standard Time)"

now.toISOString();
// "2022-11-21T12:17:21.595Z"

now.toUTCString();
// "Mon, 21 Nov 2022 12:17:21 GMT"

now.toLocaleString();
// "11/21/2022, 2:17:21 PM"

now.toLocaleDateString();
// "11/21/2022"

now.toLocaleTimeString();
// "2:17:21 PM"

now.toJSON();
// "2022-11-21T12:17:21.595Z"

The `Intl.DateTimeFormat` object

On modern browsers and runtimes, JavaScript includes an Internationalization API that allows for language-sensitive date and time formatting. You can start using it right away without having to import a massive date formatting library.

const now = new Date();

const formatted1 = Intl.DateTimeFormat('en-ZM').format(now);
const formatted2 = Intl.DateTimeFormat('en-ZM', { dateStyle: "full" }).format(now);
const formatted3 = Intl.DateTimeFormat('en-ZM', { dateStyle: "long" }).format(now);
const formatted4 = Intl.DateTimeFormat('en-ZM', { dateStyle: "medium" }).format(now);
const formatted5 = Intl.DateTimeFormat('en-ZM', { dateStyle: "short" }).format(now);

console.log(now); // [object Date] ...
console.log(formatted1); // "21/11/2022"
console.log(formatted2); // "Monday, November 21, 2022"
console.log(formatted3); // "21 November 2022"
console.log(formatted4); // "21 Nov 2022"
console.log(formatted5); // "21/11/2022"

Conclusion

In today's blog post, we learned how to format date/time data in JavaScript. There are many libraries that handle this for us already, but if you're working in a legacy codebase or have performance reasons for wanting to avoid a library, you may have to handle date/time formatting natively.

Learn more about the Date object on MDN references docs

Handling JavaScript Errors in React

Daryl Lukas — Wed, 28 Sep 2022 06:17:38 +0000

An error boundary is an important design pattern that helps you deal with errors in your code. It helps you identify where and why an error has occurred and handle it gracefully. If you’re new to React or have never heard of it before, don’t worry. Many developers have probably come across an error boundary without knowing what it is called or how to use it. Let’s explore what this design pattern is and how we can use it in our code base.

What are React Error Boundaries?

Errors and exceptions happen in any application. They can be caused by incorrect input, external issues, and even unexpected behavior. Before version 16, React was often criticized for its failure to handle JavaScript errors. JavaScript errors inside components used to corrupt React’s internal state and cause it to emit cryptic errors on next renders. React 16 introduced a new concept called error boundaries to solve this problem.

Error boundaries are React components that catch JavaScript errors anywhere in the component tree, log those errors, and display a fallback UI. They allow us to mark a section of our application as an error region. Inside the region, we can log the errors and return a different UI. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. However, they do not catch errors for:

Event handlers
Asynchronous code
Server-side rendering
Errors thrown in the error boundary itself (rather than its children)

How to Create an Error Boundary in React?

Let's start by creating a "buggy" component:

pages/BuggyCounter.jsx

import React from 'react';

class BuggyCounter extends React.Component {
  state = {
    counter: 0,
  };

  handleClick = () => {
    this.setState({
      counter: this.state.counter + 1,
    });
  };

  render() {
    if (this.state.counter === 5) {
      // Simulate an error!
      throw new Error('Simulated error.');
    }
    return (
      <div>
        <h1>{this.state.counter}</h1>
        <button onClick={this.handleClick}>+</button>
      </div>
    );
  }
}

export default BuggyCounter;

If you run this and click the + button until it reaches 5, an error (simulated in this case) will cause the component completely unmounts itself and the user is left with a blank page (this behavior may be different if running on a development server). This can be confusing to your users as they may not know what to do next. You will also notice an error message in the console.

Let's fix this using an error boundary. Before we create one, here are a few things to note:

Only class components can be error boundaries.
A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch().
Use static getDerivedStateFromError() to render a fallback UI after an error has been thrown.
Use componentDidCatch() to log error information.

Now, let's create our error boundary.

components/ErrorBoundary.js

import React from 'react';

class ErrorBoundary extends React.Component {
  state = {
    error: null,
  };

  static getDerivedStateFromError(error) {
    // Update state so next render shows fallback UI.
    return { error: error };
  }

  componentDidCatch(error, info) {
    // Log the error to an error reporting service
    // Logging to console for demo purposes
    console.log(error, info);
  }

  render() {
    if (this.state.error) {
      // You can render any custom fallback UI
      return <p>Something broke</p>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

We then wrap our ErrorBoundary around BuggyCounter so that it catches the error.

App.jsx

import React from 'react';
import './App.css';
import ErrorBoundary from './components/ErrorBoundary';
import BuggyCounter from './pages/BuggyCounter';
function App() {
  return (
    <div className="App">
      <ErrorBoundary>
        <BuggyCounter />
      </ErrorBoundary>
    </div>
  );
}

export default App;

Our app will now gracefully handle the JavaScript error and display a friendly UI to the user, instead of completely crashing.

Why Use React Error Boundaries?

Errors are an inevitable part of building software. It is therefore considered good practice to create a component that is purpose-built as an Error Boundary instead of mixing error-handling logic into your generic components. However, Error Boundaries aren’t in direct competition with try/catch statements and should not substitute them. They’re both needed as a robust strategy for handling errors in React. Remember that Error Boundaries are only designed for intercepting errors that originate from 3 places in a React component

During render phase
In a lifecycle method
In the constructor

Final Words

Thanks for reading this article on how to deal with errors in React. I hope that this has helped you understand more about error boundaries and how they can help you in your projects. Check out the offical documentation for more on Error Boundaries.
If you want to learn more about React, I'm offering a 100% online training in React. Apply here for more details.

Lists and Keys in React

Daryl Lukas — Fri, 23 Sep 2022 09:49:22 +0000

Did you know that React has a built-in method that automatically assigns the keys for you when rendering a list of children?

If you are new to React, you might be wondering what keys are and what they do.

If you are familiar to keys and lists, you can skip to the bottom and learn how to automatically assign keys in React.

Introduction to Lists and Keys in React.

Suppose you have the following list of data you would like to render:

const someData = ['Chipata', 'Kasama', 'Mongu',
'Livingstone', 'Mansa', 'Kabwe',
'Ndola', 'Lusaka', 'Solwezi'];

To render this in JSX, we use curly braces and loop through and transform the array using the JavaScript map() method.

const cities = someData.map(city => (
    <li>{city}</li>
));

The map() callback function will transform each element in our original array into a component that can be rendering. The result from map() will a be an array of React components (or HTML elements in this case).

We can then render the cities array inside a <ul> element like this:

<ul>{cities}</ul>

However, if you run this code, you will notice a warning in the console stating that a key should be proved for list items.

Keys help React identify which components have been added, updated, or removed. They serve as identification for components/elements. You can learn more about why you should provide keys for list items.

Using Keys in React

Keys should be unique. A simple way to correctly map the cities array above would be to use array indices as keys.

const cities = someData.map((city, i) => (
    <li key={i}>{city}</li>
));

If you are working with an array of objects, for example, users. You could use identifiers from your data as keys.

const users = someData.map((user) => (
    <li key={user.id}>{user.full_name}</li>
));

Don't Use Indexes

It is not recommended to use indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Learn more about why Indexes as Keys is an Anti-pattern

Auto-assign Keys

If you don’t have stable IDs for rendered items, you can let React handle this for you using a built-in method.

const cities = React.Children.toArray(
  someData.map((city) => <li>{city}</li>)
);

Thanks for learning with me. Happy coding.

I'm offering a remote, 1-on-1 training in React. Interested? Apply here

RESTful API Resource Naming Guide (URI Naming)

Daryl Lukas — Thu, 08 Sep 2022 14:14:41 +0000

When it comes to API Design, having an API resource naming convention, which is followed consistently, is very important. Coupled with the correct use of HTTP verbs, this helps to standardize API access and reduce potential security concerns. Here's a quick guide on naming REST API resources and endpoints, which will help you design APIs which are intuitive, easy to use and will make frontend developers fall in love with you 😉.

URIs as resources (nouns)

One of the most common mistakes that API developers, including myself, make is misusing nouns and verbs in REST URIs. Here is a quick note to help you understand REST URI naming:

REST APIs are used to get and manipulate resources (nouns), not actions (verbs). Therefore, REST URIs should not indicate any kind of action or CRUD (Create, Read, Update, Delete) functionality.

Examples:

// Get all user resources
GET "https://example.com/api/v1/users" // Correct
GET "https://example.com/api/v1/listUsers" // Wrong

// Update a single photo resource
PUT "https://example.com/api/v1/photos/{id}" // Correct
PUT "https://example.com/api/v1/updatePhoto/{id}" // Wrong

Pluralized Resources

Unless you have a singleton or function resource, you should pluralize all resource names.

Examples

"/users/{id}"
"/schema" // Singleton resource
"/auth/login" // Function resource

Resource hierarchy

A resource may have sub-collection resources. Conventionally, the hierarchy between individual resources and collections is displayed using Forward slashes.

Example:
Get all order resources which fall under a single customer resource.

GET "/customers/123/orders"

Letters and dashes

Resource names must exclusively use lowercase letters. In the case of resource names with multiple words, use dashes instead of underscores or the camel case convention.

Example

"/users/123/pending-orders" // Correct
"/users/123/pendingOrders" // Wrong
"/users/123/pending_orders" // Wrong

Additional Tips

No abridging. /users/{id}/phone-number instead of /users/{id}/tel-no
No trailing forward slash. /users/{id}/pending-orders instead of /users/{id}/pending-orders/
Consistency is key
Use query parameters to filter, sort or limit a URI collection. /users?country=ZM&sort=createdAt&limit=100

Please comment to share any other best practices when it comes to RESTFul APIs.

Azure AD Authentication using MSAL and Next.js (React)

Daryl Lukas — Tue, 27 Jul 2021 08:23:51 +0000

Microsoft Authentication Library (MSAL) for Javascript enables client-side web applications to authenticate users using Azure Active Directory (Azure AD), using security tokens acquired from the Microsoft Identity platform. It is particularly helpful if you want to specify which users can sign in to your application, e.g., your organization or school. You can learn more about it here.

App Registration

To get started, we need to register our application in the Microsoft Identity Platform (Azure AD). We will register a single-page application (SPA) and use the recommended authentication flow, MSAL.js 2.0, which supports the authorization code flow with PKCE. More on this can be found here.

Sign in to the Azure Portal
Search for and select Azure Active Directory.
Under Manage in the side menu, find and select App Registration
Create a New Registration and fill in the form by entering the name of the app (can be changed later) and selecting the support account types (I used the single-tenant option, the first option in the screenshot below). DO NOT enter a Redirect URI for now.
Select the newly created application and then select Authentication > Add Platform under the Manage menu
Select the Single-Page Application tile under the Web applications heading
Enter a redirect URI. I'll be using http://localhost:3000/. DO NOT check the boxes under Implicit grant and hybrid flows heading
Click on the Configure button to finish.
Note You can add more than one redirect URI, for instance, for different environments, development, staging, production, etc.

Installation

Open your terminal and create a Next.js app

npx create-next-app msal-next-auth --use-npm

cd msal-next-auth

The only dependencies that you will need are the MSAL react and browser libraries.

npm install @azure/msal-react @azure/msal-browser

Initialization

Create a file services/msal.js in the root of the project and add the following code

import * as msal from "@azure/msal-browser";

const msalConfig = {
    auth: {
        clientId: process.env.NEXT_PUBLIC_AZURE_AD_CLIENT_ID,
        authority: `https://login.microsoftonline.com/${process.env.NEXT_PUBLIC_AZURE_AD_TENANT_ID}`,
        redirectUri: '/'
    }
};

const msalInstance = new msal.PublicClientApplication(msalConfig);

export { msalInstance }

You can find your CLIENT ID AND TENANT ID in the Azure portal. Select the app you registered and copy and paste the actual values from the Overview page (under Essentials) into an environment variables file, .env.local, in the root of the project folder.

.env.local

NEXT_PUBLIC_AZURE_AD_CLIENT_ID='your-client-id'
NEXT_PUBLIC_AZURE_AD_TENANT_ID='your-tenant-id'

We'll be using React's Context API to provide/share the MSAL service instance to all our components/pages. To do that, make the following changes to pages/_app.js

import { MsalProvider } from '@azure/msal-react';
import { msalInstance } from '../services/msal';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <MsalProvider instance={msalInstance}>
      <Component {...pageProps} />
    </MsalProvider>
  );
}

export default MyApp;

Sign-in Functionality

The MSAL React library allows us to protect our pages and components by wrapping them with the MsalAuthenticationTemplate component. Paired with UnauthenticatedTemplate, this can be useful when rendering specific content to authenticated or unauthenticated users respectively.

Update our home page pages/index.js, with the following code

import {
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
  useMsal,
} from '@azure/msal-react';
import Head from 'next/head';
import styles from '../styles/Home.module.css';

function SignInButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return <button onClick={() => instance.loginRedirect()}>Sign In</button>;
}

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Azure AD Authentication using MSAL and Next.js</title>
      </Head>

      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <WelcomeUser />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
        <SignInButton />
      </UnauthenticatedTemplate>
    </div>
  );
}

If you run the application (npm run dev), you should see the following in the browser.

When you click the sign in button, you will be prompted to sign in and accept requested permissions...

... and then you will be redirected back to the application.

Notice the change in content rendered, when unauthenticated to authenticated. This is determined by the UnauthenticatedTemplate and AuthenticatedTemplate wrappers.

MSAL React also provides an alternative way to determine a user's authentication status using hooks, specifically the useIsAuthenticated hook. Learn more here

Sign-out functionality

Make the following changes to pages/index.js

...
// Define sign out button
function SignOutButton() {
  const { instance } = useMsal();

  return <button onClick={() => instance.logoutRedirect()}>Sign Out</button>;
}

...

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Azure AD Authentication using MSAL and Next.js</title>
      </Head>

      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <WelcomeUser />
        <SignOutButton /> // <-- Add to authenticated content
      </AuthenticatedTemplate>
...

Run the app again, if not already running, npm run dev.
The authenticated render should now look like this...

Clicking the sign-out button will redirect and prompt you to select the account to sign out from...

You can read more about Sign in and sign out functionality here.

That's it! What's Next?

We have successfully built a simple Next.js app with MSAL authentication. We can now acquire access tokens which can be used to call APIs securely. Let me know if you would like me to write another guide like this one about how you acquire and use tokens in Next.js. Leave a comment below or tweet me

Check out the full source code on Github.

Forem: Daryl Lukas

The Importance of Effective Logging

1. Establish Clear Objectives

2. Understand Log Levels

A. Info

B. Warning

C. Error

D. Fatal

3. Implement Structured Logging

4. Use Log Sampling for Cost Efficiency

Conclusion

Make your code developer-friendly with these 7 tips

Today I Learned: How to Resume a screen Session on Linux 🐧

ENTER screen

Installing screen:

Usage

Final words

Writing Cleaner JavaScript with Nullish Coalescing: A Developer's Guide

Introduction

Understanding the Problem

Enter Nullish Coalescing

Use Cases and Benefits

Bonus Tip: Nullish Coalescing Assignment

Conclusion

Testing in React: Best Practices and Tools

Introduction

Writing Tests in React

Unit Tests

Integration Tests

Tools for Testing React

React Developer Tools

Cypress

Storybook

Conclusion

Configuring Rewrites in Next.js

Introduction

What are Rewrites?

How to Configure Rewrites in Next.js

Real-World Examples

Rewrites vs. Redirects

Conclusion

References

ChatGPT explains Debt Restructuring

1. Prompt: Explain Debt restructuring to a 10-year-old

2. Prompt: Explain Debt restructuring in a rap verse

3. Prompt: Explain Debt restructuring as a drunk person

4. Prompt: Explain Debt restructuring as an economist

5. Prompt: Explain Debt restructuring in a nursery school song

Formatting dates and times without a library in JavaScript

A quick note on the Date object

Creating an instance

Current Date / Time

Using the constructor

Using the Date() function

Using a static method, .now()

Other ways to create an instance

Parsing strings

Passing integers in the constructor

Epoch (Unix) Timestamp

Date methods

Accessing Date components

Setting Date Components

Formatting

The Intl.DateTimeFormat object

Conclusion

Handling JavaScript Errors in React

What are React Error Boundaries?

How to Create an Error Boundary in React?

Why Use React Error Boundaries?

Final Words

Lists and Keys in React

Introduction to Lists and Keys in React.

Using Keys in React

Don't Use Indexes

Auto-assign Keys

RESTful API Resource Naming Guide (URI Naming)

URIs as resources (nouns)

Pluralized Resources

Resource hierarchy

Letters and dashes

ENTER `screen`

Installing `screen`:

A quick note on the `Date` object

Using the `Date()` function

Using a static method, `.now()`

The `Intl.DateTimeFormat` object