DEV Community: Ashal Farhan

How to duplicate a browser tab

Ashal Farhan — Fri, 24 Feb 2023 19:53:59 +0000

I'm going to show you how to duplicate a browser tab that you are currently focused on into another tab in the same window.

Right Click

The first method is to just right-click on the tab that you want to be duplicated in another tab, I've tested this on a MacOS machine and it works on the following browsers:

Keyboard Shortcut

Based on the official reference from some of the browsers below, there's no keyboard shortcut for Duplicate Tab on MacOS. But I found a hacky way to do this:

Make sure you're in the tab that you want to duplicate.
Press Cmd + L to focus and highlight the Address Bar.
Press Cmd + Return or Cmd + Enter to open the website in a new background tab.

In short:

Press and hold Cmd.
Press L.
Press Return or Enter.

Conclusion

In conclusion, duplicating a browser tab is very useful when developing a web application, but a keyboard shortcut is more conventional.

I hope this is useful for you, let me know if I missed something in the comments.

References

How to Add Dark Mode to Your Website

Ashal Farhan — Sat, 11 Jun 2022 04:02:20 +0000

In this article, we will take a minimalist approach, focusing on the implementation of dark mode using the inherent capabilities of web browsers. By harnessing native features, developers can seamlessly integrate dark mode into their applications without relying on third-party libraries or complex solutions.

Native Browser Features for Dark Mode

There are some of the native browser features that we can utilise to implement dark mode.

CSS Variables

Or sometimes called CSS Custom Properties. We can use this feature to store some of the colour palettes so that we don't have to repeatedly specify the hex or the rgba value.

Let's create a stylesheet file styles.css that will look something like this:

html {
  --bg-color: #fff;
  --color: #000;
}

html[data-theme='dark'] {
  --bg-color: #000;
  --color: #fff;
}

body {
  background-color: var(--bg-color);
  color: var(--color);
}

In the above snippet, we declared 2 variables --bg-color and --color, we set them to white and black.

Below that, we declare the same variables but with reversed colours. The second selector means: "If the HTML document has data-theme attribute set to dark, then modify both variables with the value inside of the html[data-theme='dark'] block".

Then we use the variables by applying them to the body element. With this, all we need to do is to add data-theme attribute set to "dark" with JavaScript.

JavaScript for Dynamic Dark Mode

Before we start to get our hands dirty with scripting, let's create the HTML file, and reference the stylesheet that we've been created earlier.

<!-- index.html -->
<head>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <nav>
    <button id="theme-button">Switch to dark</button>
  </nav>
</body>

This button will be responsible for toggling the data-theme attribute of the HTML document.

Now here's the fun part, create a script file script.js:

// script.js
const themeButton = document.getElementById('theme-button');

function setTheme(theme = 'light') {
  document.documentElement.setAttribute('data-theme', theme);
  const text = theme === 'light' ? 'dark' : 'light';
  themeButton.innerText = `Switch to ${text}`;
}

themeButton.addEventListener('click', () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  if (currentTheme === 'dark') {
    setTheme('light');
  } else {
    setTheme('dark');
  }
});

In the above snippet, we grab the toggle theme button and store it in a variable called themeButton, and we declare a function called setTheme to change the HTML's data-theme attribute and change the button's text to the opposite of the selected theme.

Then we're listening to the button's click event, and what we're doing is:

Get the current theme that is retrieved from the HTML's data-theme attribute.
Check if the current theme is "dark", then we call the setTheme function and pass "light" as the argument, otherwise pass "dark".

✨ Great! Now you should be able to toggle the theme.

Real-world scenarios

Now let's improve the current implementation based on real-world scenarios.

Persisting

To persist the user-selected theme, we can use the Web Storage called localStorage. It's a simple persistence storage that is tied to our site's domain.

What we need to do is to save the selected theme to the storage every time we call the setTheme function.

// script.js
//... rest of the code
function setTheme(theme = 'light') {
  document.documentElement.setAttribute('data-theme', theme);
  const text = theme === 'light' ? 'dark' : 'light';
  themeButton.innerText = `Switch to ${text}`;
  localStorage.setItem('theme', theme); // Add this line
}

After we save the selected theme, we can load the selected theme from the localStorage when the page loads.

// script.js
//... rest of the code
function setTheme(theme = 'light') {
  document.documentElement.setAttribute('data-theme', theme);
  const text = theme === 'light' ? 'dark' : 'light';
  themeButtom.innerText = `Switch to ${text}`;
  localStorage.setItem('theme', theme);
}

// We read from the `localStorage`
// If there's nothing saved, then the fallback will be `"light"`
const preloadedTheme = localStorage.getItem('theme') || 'light';

// Immediately call `setTheme`
setTheme(preloadedTheme);
//... rest of the code

At this point, your site's theme preference should already be persisted.

Try that out by toggling the theme to dark and then reloading the page.

Prevent FUOC

If you try to set the theme to dark and reload the page, you should notice some sort of flashing. This is because the script that has the logic to set the theme from the localStorage is executed after the first browser paint.

FUOC stands for "Flash of Unstyled Content".

Preload

To solve this, we need to move the logic of reading from localStorage to the head of the HTML document.

<head>
  <script>
    let preloadedTheme = localStorage.getItem('theme');
    if (preloadedTheme == null) {
      const isPreferDark = window.matchMedia(
        '(prefers-color-scheme: dark)',
      ).matches;
      preloadedTheme = isPreferDark ? 'dark' : 'light';
    }
    document.documentElement.setAttribute('data-theme', preloadedTheme);
  </script>
  <!-- ... rest of the head -->
</head>

Here we are reading from the localStorage and check if there's no value from the localStorage with the key of 'theme' (which means this is the first time the user visit our site) then we try to detect their system preference by using window.matchMedia method, and set the data-theme to whatever the system preference is. We are saving this to the preloadedTheme variable, and now we can remove the step of reading localStorage in our script.

// script.js
const preloadedTheme = localStorage.getItem('theme') || 'light'; // Remove this line

// The `preloadedTheme` variable is coming from the head of our preload script
setTheme(preloadedTheme);
//... rest of the code

Color Scheme

We can also utilise the color-scheme CSS property to hint the browser about the colour scheme of our site. The common values for this property are dark and light. This property will also change our initial element styling including form controls, scrollbars, etc.

What we need to do is to set this property to the HTML document whenever the user changes the theme.

// script.js
//... rest of the code
function setTheme(theme = 'light') {
  document.documentElement.setAttribute('data-theme', theme);
  document.documentElement.style['color-scheme'] = theme; // Add this line
  const text = theme === 'light' ? 'dark' : 'light';
  themeButtom.innerText = `Switch to ${text}`;
  localStorage.setItem('theme', theme);
}

Then we also need to set this property in the preload script.

<head>
  <script>
    let preloadedTheme = localStorage.getItem('theme');
    if (preloadedTheme == null) {
      const isPreferDark = window.matchMedia(
        '(prefers-color-scheme: dark)',
      ).matches;
      preloadedTheme = isPreferDark ? 'dark' : 'light';
    }
    document.documentElement.setAttribute('data-theme', preloadedTheme);
    document.documentElement.style['color-scheme'] = preloadedTheme; // Add this line
  </script>
  <!-- ... rest of the head -->
</head>

And now you shouldn't get that flashing anymore, Cool!

Reacting to system preferences changes

The last tip is to make our site respond to the device's system preference. Whenever the user changes their system preferences, we will make our site also follow whatever the system preferences that they currently chose.

// script.js
// ... rest of the code

const darkMode = window.matchMedia('(prefers-color-scheme: dark)');
darkMode.addEventListener('change', e => {
  if (e.matches) {
    setTheme('dark');
  } else {
    setTheme('light');
  }
});

Here we are listening for a change event of the CSS prefer-color-scheme media query, then we check if the event matches (which means the user's system preference is on the dark mode), and then change our site's theme to dark.

To test this, you can change the system preference of your device and make sure that your site reacts to that.

Conclusion

As we wrap up our exploration of dark mode implementation, it's evident that the native features of web browsers offer a powerful toolkit for developers. By leveraging CSS variables and a touch of JavaScript, we can seamlessly introduce dark mode to our applications. This minimalist approach not only enhances user experience but also contributes to efficient and lightweight code.

Here's a working codesandbox

Helpful links

CSS Variables: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
CSS color-scheme: https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
window.matchMedia: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

TypeScript Narrowing.

Ashal Farhan — Tue, 17 May 2022 04:50:48 +0000

In this post I'm going to show you how to use Discriminated Unions in TypeScript, and the realworld usecase. Discriminated Unions is really useful when we working with complex object structure.

Example

Imagine that we have a function that will call an ability of an animal. Bird will have the ability to fly, and Fish have the ability to swim. We will use a field called kind to determine which animal we're dealing with. Take a look at our first attempt to declare an interface of Animal.

interface Animal {
  kind: 'bird' | 'fish';
  fly?: () => void; // Optional, because fish cannot fly
  swim?: () => void; // Optional, because bird cannot swim
}

If you're wondering the type of kind property, it's called String Literals, basically is a string but the value must be that exact string. This will prevent us from typo or misspelling issue.

We can write the callAbility function that will applies the logic to determining of calling the right ability between fish and bird.

function callAbility(animal: Animal) {
  if (animal.kind === 'bird') {
    animal.fly();
    // If you're using vscode, you will notice above code will have red squiggly lines that says:
    // `Cannot invoke an object which is possibly 'undefined'.`
  }
}

It looks like TypeScript still doesn't know what todo there. At this point we feel like we know more about our values than the type checker does. To simplify this issue, we can just use non-null assertion (a ! after null or undefined property) to tell TypeScript that "Nope, this will never be undefined or null."

function callAbility(animal: Animal) {
  if (animal.kind === 'bird') {
    animal.fly!();
  }
}

Note that non-null assertion must not oftenly be used since those assertions are error-prone. It would be better if we always check if something null or undefined.

So this still would be a problem, we need to somehow communicate with TypeScript to give a better idea of what animal looks like. Let's rewrite the Animal interface.

interface Bird {
  kind: 'bird';
  fly: () => void;
}

interface Fish {
  kind: 'fish';
  swim: () => void;
}

type Animal = Bird | Fish;

Now we've separated the Animal out into two types with different values for the kind property and both methods now becomes required. If you check again the first callAbility function declaration, you will notice that there's no red squiggly line when we call the fly method.

function callAbility(animal: Animal) {
  if (animal.kind === 'bird') {
    animal.fly();
    // Hover over the animal inside the if block, and it should says:
    // `(parameter) animal: Bird`
  }
}

Cool, Now the error is gone! When every type in a union contains a common property with literal types, TypeScript considers that to be a discriminated union, and can narrow out the members of the union.

In this case, kind was that common property (which is what’s considered a discriminant property of Animal). Checking whether the kind property was "bird" got rid of every type in Animal that didn’t have a kind property with the type "bird". That narrowed shape down to the type Bird.

Btw, you can try this out with the switch statement.

The keynote thing here is that Bird and Fish were really two separate types but both have specific kind field.

Realworld Examples

I'm going to give you two realworld example how to implement Discriminated Unions on your code.

Narrowing API Response

This example will implement Discriminated Unions in API Response with axios. Consider your backend have consistent shape of response, take a look at the following:

type SuccessResponse<T> = {
  data: T;
  success: true;
};

type ErrorResponse = {
  error: { message: string };
  success: false;
};

type BaseResponse<T> = SuccessResponse<T> | ErrorResponse;

We create the generic BaseResponse type that will take a single type parameter to represent what the data looks like if it was successful. Now here's what we would implement the discriminated unions:

import { axios, BaseResponse } from 'somewhere';

type Todo = {
  id: string;
  name: string;
  done: boolean;
};

const getTodos = async () => {
  const { data: response } = await axios.get<BaseResponse<Todo[]>>('/todos');
  if (response.success) {
    // Do something with `response.data` in this block
  } else {
    // Handle error because the response is not success
    // Uncomment below code and you will notice a squiggly line when we access the `data` property
    // console.log(response.data);
    // `Property 'data' does not exist on type 'ErrorResponse'.`
  }
};

I love using the above pattern because we can make sure that we only access the data if the response was successful.

Narrowing `dispatch` from `useReducer`

If you need to manage complex state but only in specific component, and the rest of the application does not need to know, you can use useReducer instead of useState or redux. Let's take a look at below example:

The source code of this example is in here

Create the todo.ts file that will handle all the logic of our todo list.

// todo.ts
import { nanoid } from "nanoid";

export type Todo = {
  done: boolean;
  name: string;
  id: string;
};

export type TodoState = {
  todos: Todo[];
};

// You can also extract each action into dedicated type
export type TodoAction =
  | {
      type: "addTodo";
      // Takes name of the todo
      payload: string;
    }
  | {
      type: "removeTodo";
      // Takes id of the todo
      payload: string;
    }
  | {
      type: "resetTodo";
    }
  | {
      type: "toggleTodo";
      // Takes id of the todo
      payload: string;
    };

export function todoReducer(state: TodoState, action: TodoAction): TodoState {
  switch (action.type) {
    case "addTodo":
      return {
        ...state,
        todos: [
          ...state.todos,
          { id: nanoid(), done: false, name: action.payload }
        ]
      };
    case "removeTodo":
      return {
        ...state,
        todos: [...state.todos.filter(val => val.id !== action.payload)]
      };
    case "toggleTodo":
      return {
        ...state,
        todos: [
          ...state.todos.map(val => ({
            ...val,
            done: val.id === action.payload ? !val.done : val.done
          }))
        ]
      };
    case "resetTodo":
      return {
        ...state,
        todos: []
      };
    default:
      // The default case can just return the state 
      // if we don't know the action type.
      // But we can also throw an error if we will,
      // so that we can make debugging easier 
      // if we pass incorrect action.
      return state;
  }
}

Then create the CreateTodoForm.tsx component for creating a new todo

// CreateTodoForm.tsx
import { FormEvent, useState } from "react";

export function CreateTodoForm({
  onSubmit
}: {
  onSubmit: (name: string) => void;
}) {
  const [name, setName] = useState("");
  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    onSubmit(name);
    setName("");
  };
  return (
    <form onSubmit={handleSubmit}>
      <label>
        <span>Name: </span>
        <input
          onChange={e => setName(e.target.value)}
          value={name}
          type="text"
        />
      </label>
      <button type="submit">Create</button>
    </form>
  );
}

Now the App.tsx is where we call the useReducer hook

import { useReducer } from "react";
import "./styles.css";
import { todoReducer, TodoState } from "./todo";
import { CreateTodoForm } from "./CreateTodoForm";

const initialState: TodoState = {
  todos: []
};

export default function App() {
  const [state, dispatch] = useReducer(todoReducer, initialState);

  return (
    <div className="App">
      <h1>Todo List</h1>
      <CreateTodoForm
        onSubmit={name => dispatch({ type: "addTodo", payload: name })}
      />
      <ul>
        {state.todos.map(todo => (
          <li key={todo.id}>
            <span>{todo.name}</span>
            <input
              type="checkbox"
              checked={todo.done}
              onChange={() =>
                dispatch({ type: "toggleTodo", payload: todo.id })
              }
            />
            <button
              // Try to remove the property 'payload' below when calling dispatch
              // and you will get TypeScript error that says:
              // `Property 'payload' is missing in type '{ type: "removeTodo"; }'`
              onClick={() => dispatch({ type: "removeTodo", payload: todo.id })}
            >
              Remove
            </button>
          </li>
        ))}
      </ul>
      <button onClick={() => dispatch({ type: "resetTodo" })}>Reset</button>
    </div>
  );
}

When we dispatch any action to our reducer, we will get the better hints of what the payload type of the specific action type should we passed, this will prevent us from passing wrong payload to an action.

If you revisit the todoReducer function, inside of each case of the action.type, the action.payload will be the correct type of what we declared in TodoAction type. So inside of the "resetTodo" action, the action object doesn't contain the payload property anymore, since we've already handle all of the possible case of action.type.

Thank you

I hope this is a useful knowledge to share, let me know if I missed something. This is my first time to write an article 😅.

References

Literal Types https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#literal-types
Narrowing https://www.typescriptlang.org/docs/handbook/2/narrowing.html
useReducer https://reactjs.org/docs/hooks-reference.html#usereducer

DEV Community: Ashal Farhan

How to duplicate a browser tab

Right Click

Keyboard Shortcut

Conclusion

References

How to Add Dark Mode to Your Website

Native Browser Features for Dark Mode

CSS Variables

JavaScript for Dynamic Dark Mode

Real-world scenarios

Persisting

Prevent FUOC

Preload

Color Scheme

Reacting to system preferences changes

Conclusion

Helpful links

TypeScript Narrowing.

Example

Realworld Examples

Narrowing API Response

Narrowing dispatch from useReducer

Thank you

References

Narrowing `dispatch` from `useReducer`