DEV Community: Jeferson Brito

Getting Started with ECMAScript Internationalization API

Jeferson Brito — Mon, 13 Sep 2021 00:30:35 +0000

One of the most important aspects of the web is to make it accessible to everyone, which also means content should be available in different languages and formats.

In this post, we're going to cover the Internalization API that came as standard in late 2012 and it's implemented alongside the official ECMAScript language specification (JavaScript).

Intl

ECMAScript Internationalization API provides a suite of objects and methods to format numbers, regions, dates, and times based on language. The Intl namespace is available in pretty most all evergreen browsers, JavaScript runtimes and works with several unicode country locales.

Let's take a look at some of them:

Intl.ListFormat

Intl.ListFormat is a constructor for language-sensitive list formatting. It can be used to make human-readable lists without having to worry with fancy string interpolations.

const listFormat = new Intl.ListFormat('en', {
  style: 'long', // the length of output message, it can be "long", "short" or "narrow"
  type: 'conjunction', // "and" separator,
})

listFormat.format(['tom holland', 'tobey maguire', 'andrew garfield'])

// tom holland, tobey maguire, and andrew garfield

Intl.DateTimeFormat

Intl.DateTimeFormat is a constructor for date and time formatting, very similar to the Date.prototype.toLocaleString method as it formats a date object into string based on series of options like year, month, day and so on.

new Intl.DateTimeFormat('en', {
  weekday: 'long',
  year: 'numeric',
  month: 'short',
  day: '2-digit',
}).format(new Date(2021, 07, 27))

// Friday, Aug 27, 2021

You can also display both date and time in different styles:

new Intl.DateTimeFormat('en', {
  dateStyle: 'long',
  timeStyle: 'short',
}).format(new Date(2021, 07, 27))

// August 27, 2021 at 9:55 PM

Intl.RelativeTimeFormat

Unlike the Date object methods we've mentioned previously, we can make use of the Intl.RelativeTimeFormat constructor to format relative time in a more readable form.

format takes two arguments, the first one being a number and the second a string between "second", "minute", "hour", "day", "month" and "year"

const timeFormat = new Intl.RelativeTimeFormat('en-US', {
  style: 'long',
  numeric: 'auto',
})

timeFormat.format(1, 'hour')
// in 1 hour

timeFormat.format(-5, 'month')
// 5 months ago

timeFormat.format(1, 'day')
// tomorrow

Intl.DisplayNames

Intl.DisplayNames is a constructor to display and translate regions, languages, and country currencies.

It can be useful when working with geolocation-based systems and financial software as you can easily see the full normalized string based on the language tag without having to maintain a huge list of country's translations.

const regionNames = new Intl.DisplayNames(['en-US'], { type: 'region' })

regionNames.of('UK')
// United Kingdom

const currencies = new Intl.DisplayNames(['en-US'], { type: 'currency' })

currencies.of('JPY')
// Japanese Yen

const language = new Intl.DisplayNames(['en'], { type: 'language' })

language.of('PT-BR')
// Brazilian Portuguese

Intl.NumberFormat

Intl.NumberFormat — it's a helpful method to format numbers to currencies, decimal, percentages and work with several units as well. Behave the same as the others constructors, it accepts the locale(s) and options. No need to rely on custom snippets and complex regexes anymore :)

Formats a number in currency-style with currency symbol and no fraction digits.

Note: This API relies on the ISO 4217 standard that defines numeric and alphabetic currency codes.

const language = navigator.language ?? 'en-US'

const euroCurrency = new Intl.NumberFormat(language, {
  style: 'currency',
  currency: 'EUR', // currency code, such as "USD", "JPY", "BRL"
  currencyDisplay: 'narrowSymbol', // show the currency symbol (default)
  maximumFractionDigits: 0,
})

euroCurrency.format(2999)
// €2,999

Formats a number to megabyte unit. When using units you can check the possible values here.

new Intl.NumberFormat(language, {
  style: 'unit',
  unit: 'megabyte',
}).format(100)
// 100 MB

Formats a number in a short way and it can also be transformed to a scientific notation.

new Intl.NumberFormat('en-US', {
  // whether to format as plain number (standard), order-of-magnitude (scientific) or compact string
  notation: 'compact',
  compactDisplay: 'short',
}).format(7_000_000_000)
// 7B

new Intl.NumberFormat(language, { notation: 'scientific' }).format(Math.PI)
// 3.142E0

Intl.PluralRules

Intl.PluralRules — constructor for objects that enable plural-sensitive formatting and language-specific rules for plurals.

const pluralRule = new Intl.PluralRules('RU')

new Intl.PluralRules('RU').select(0)
// many
new Intl.PluralRules('RU').select(1)
// one
new Intl.PluralRules('RU').select(2)
// few

We can make use of this method to choose a plural form of a sentence.

const usPluralRule = new Intl.PluralRules('en-US')
const pluralize = (quantity, singular, plural) => {
  const result = usPluralRule.select(quantity)
  const isSingular = result === 'one'

  return isSingular ? `${quantity} ${singular}` : `${quantity} ${plural}`
}

pluralize(1, 'car', 'cars')
// 1 car
pluralize(2, 'car', 'cars')
// 2 cars

Default options

Part of the constructors of the Intl API has a method resolvedOptions that can be used to display the default options computed to a chosen locale.

new Intl.NumberFormat('en-US').resolvedOptions()

// locale: "en-US"
// maximumFractionDigits: 3
// minimumFractionDigits: 0
// minimumIntegerDigits: 1
// notation: "standard"
// numberingSystem: "latn"
// signDisplay: "auto"
// style: "decimal"
// useGrouping: true

Bonus tip: How to properly use a language code

All constructors under the Internalization API requires at least one language code (or locale) which is based on the BCP-47 list. BCP-47 provides two types of algorithms to match the chosen locale, but it still can't be able to identify if don't enter in the right format, e.g. "EN-US" is no the same as "en-US".

Intl.getCanonicalLocales() allows us to properly identify and return valid locales:

const getLanguageCodes = (codes) => {
  try {
    const locales = Intl.getCanonicalLocales(codes)
    return locales
  } catch (error) {
    console.error(error)
  }
}

getLanguageCodes(['en-us', 'Pt-Br'])
// ['en-US', 'pt-BR']

The Intl API offers convenient methods with a standard interface to the specification and allows us to specify the control details (language code or locale) of their behavior with the advantage of your implementation being is framework-agnostic!

I hope you have found this article useful, check out the following links to learn more:

Resources

Chrome DevTools Features You Might Not Know About

Jeferson Brito — Sun, 22 Nov 2020 20:41:35 +0000

Chrome dev tools is a suite of tools that, we web developers, can use on our daily basis to prototype, analyze and debug our Javascript, CSS, and HTML code.

In this post, I'll introduce you to some of the most interesting and lesser-known Chrome DevTools Features that you might find useful.

Getting started

You can open up your browser DevTools by pressing Ctrl + Shift + I (Windows) or Cmd + Option + I (Mac)

Note: Some of the features are available only on Chrome 85+

Rendering

By default this tab is hidden, however, you can enable it by pressing Cmd/Ctrl + Shift + P and type "Show Rendering". This feature provides you a series of options to visualize your page's rendering performance.

Paint Flashing option gives you the ability to visualize when something is repainted on the screen.

Layout shift shows you which areas of your page (highlighted blue) are being shifted at any point in time. A layout shift occurs when a visible element on your page changes position or size, affecting the position of content around it.

Frame rendering stats display frames per second and GPU usage in realtime on your current page.

Scrolling performance issues option highlights elements that can slow down your page scrolling.

Highlight ad frames option shows all ad frames present on your website

CSS Media Features

Emulate CSS prefers-color-scheme prefers-color-scheme allows us to set a system theme preference for interfaces like light or dark mode

Emulate CSS prefers-reduced-motion prefers-reduced-motion can set a preference to minimize the amount of animation or motion a website uses.

Emulate vision deficiency is a nice accessibility option to simulate color vision deficiencies in realtime on your current page. This feature can give us a better understanding of how people with different types of vision deficiencies experience our website

CSS Overview

CSS Overview is a quite new and experimental tool present on newer versions of chrome that enables to take a quick overview of what colors and fonts a website use as well as unused properties, declarations, and even how many media queries are being used.

Open with CTRL + SHIFT + P and type Show CSS Overview and then we click on "Capture overview"

Animations

In the animations panel, you have access to a timeline of each animation frame happening on the page.
It's fully interactive, you can go back and forth, play, and pause in each frame.

Coverage

The Coverage tab allows us to find unused blocks of code in our application. Shipping lots of JS/CSS code can be a problem in web development if the user is downloading extra content.

Coverage shows a list of resources each containing how many bytes it has and how many of them are unused and you can actually open the file then the unused parts will be highlighted in red at the left.

Network Conditions

Network Conditions tab it's very simple, you may notice that some of the features are the same presented in the Network tab, but it has one of the most useful features, User-Agent.

In DevTools now you can emulate a browser or device by disabling "Select automatically" the dropdown will now be enabled for you to select a different User-Agent like Firefox or Safari, or Chrome on Android, and so on. You can even create your custom User-Agent.

Note: This only works in your current website tab and while the DevTools is open

Search

And finally, the search tab allows us to quickly search files by string or regex

Good to mention that even though these demos were captured on Chrome, you can experiment with the features in any Chromium-based browser as well.

I hope you found these features helpful, if you have some feedback or suggest please leave a comment in the section below. ✌

Vue 3.0 is finally out!

Jeferson Brito — Sun, 20 Sep 2020 20:36:15 +0000

The new major version of Vue is here! after 2 years of development one of the most popular JavaScript frameworks is full of new capabilities and much more approachable for large applications.

We will go through some of the exciting new features and see how the new release will affect the way you write Vue Apps.

Breaking changes
How to Create a new Vue 3 App
New Global API
New Features
- Composition API
- Better TypeScript support
- Suspense
- Teleport
- Fragments
Further Reading

Breaking changes

Vue 3 has a new Global API, now we use createApp instead of new Vue({});
No more support for Filters, you should use computed proprieties or methods instead;
$on, $off, and $once methods are removed, you might have used them in the past alongside an eventBus;
data option should always be declared as a function;
defineAsyncComponent is the new method used to import and deal with async components;
Vue's Reactivity system is now based on ES2015 Proxies;

How to Create a new Vue 3 App

The most simple way is to just plug in a cdn script tag:

<html>
    <body>
     <div id="app">
       <p>{{ message }}</p>
     </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
          data() {
            return {
              message: 'I love Vue <3',
            }
          },
        })
        app.mount('#app')
    </script>
    </body>
</html>

You can start creating a fresh new Vue 3 App today quickly with the @vue/cli@4.5.0 to take advantage of a toon of integrations that Vue CLI provides out-of-the-box.

Alternatively, you can also use Vite, a blazing fast build tool for modern JavaScript Projects, it uses Browser Native ES Modules during development combined with Hot Module Replacement, with this approach your development server does not need to bundle all the files at once, but instead, it bundles only files you actually use at the time, which makes it also starts really fast and cold.

$ npm init @vitejs/app hello-vue3 --template vue
$ cd hello-vue3
$ npm i && npm run dev

You can learn more about Vite here.

New Global API

Previously in Vue 2.x apps, you would use new Vue() to create a root instance and pass a series of options.
Now with Vue 3.x, we have a new Global API for creating an app instance.

The idea is to place everything that mutates Vue's behavior at the level of the app instance.

// main.js

import { createApp } from 'vue';
import App from './App.vue';

// Create a Vue instance or app
const app = createApp(App)

app.use(/* vue router, vuex, ... */)
app.component(/* some global component... */)
app.directive(/* some custom directive... */)

app.mount('#app')

As you can see every configuration is scoped to a certain Vue application defined with createApp.

New Features

Composition API

This is definitely one of the game-changing ones, In fact, Composition API itself deserves a whole article about it, I'll do a quick overview of what it is and how it works.

You may be used to define a new component as an object with a set of options like data, methods, computed, and so on which is perfectly fine for small components, however as your app grows you end up creating complex and large components. Typically in these situations, we create Mixins to extract the common logic to be able to share with other components, which works in some cases but is not very flexible.

How composition works

Composition API allows us to reuse logic between components creating composable functions, so instead of having your logic split up in multiple component options, you can take advantage of composition functions to have all your logic code in one place.

In short, with this approach, our components are less complex and much more maintainable.

<template>
  ...
  <input
    type="search"
    v-model="searchInput"
    placeholder="Enter your favorite game..."
  />
  <button @click="fetchGame">
    Search
  </button>
  <ul v-if="games.results">
    <li v-for="game in games.results" :key="game.id">
      <GameCard :game="game" />
    </li>
  </ul>
  <p v-if="loading">Loading...</p>
  <p v-if="hasErrors">{{ hasErrors }}</p>
    ...
</template>

import { ref, computed, onMounted, onUnmounted } from 'vue';
import GameCard from '../components/GameCard.vue';
import useFetch from '../composables/useFetch';

export default {
  components: {
    GameCard,
  },
  // Pretty much everything lives inside this setup function
  setup() {
    const searchInput = ref('');
    const { results, hasErrors, loading, execute } = useFetch();

    // Executed when computed is mounted, similiar to Vue 2.x mounted lifecycle hook
    onMounted(() => {
      execute(
        'https://api.rawg.io/api/games?dates=2020-01-01,2020-12-31&ordering=-added'
      );
    });

    function fetchGame() {
      execute(`https://api.rawg.io/api/games?search=${searchInput.value}`);
    }

    // anything that needs to be accessed in the template
    return {
      searchInput,
      games: results,
      loading,
      hasErrors,
      execute,
      fetchGame,
    };
  },
};

First off, we're importing our components, methods and declaring our setup function.

As you can see we're not using the data() option, in this case, we use a ref. A ref is a reactive reference that allows us to track changes in the template.

We're using a composable function called useFetch to handle requests, and last but not least, we return our state.

Our composable function:

import { ref } from 'vue';

export default function useFetch {
  // reactive state
  const results = ref([]);
  const loading = ref(false);
  const hasErrors = ref(null);

  const execute = async url => {
    loading.value = true;

    try {
      const response = await fetch(url);
      const data = await response.json();
      results.value = data;
    } catch (err) {
      hasErrors.value = err;
    } finally {
      loading.value = false;
    }
  };

  return { results, loading, hasErrors, execute };
}

You can view this complete example in this repo.

Another good example of Composition API implementation is to create an IntersectionObserver composition function to lazy load images or components, for instance:

// useIntersection.js

import { ref } from 'vue';

export default function useIntersectionObserver() {
  const isSupported = 'IntersectionObserver' in window
  const isIntersecting = ref(false)
  const isShown = ref(false)

  if (!isSupported) {
    console.log('Your browser does not support this feature yet.')
  }

  const observer = new IntersectionObserver((entries) => {
    const component = entries[0]

    if (component.isIntersecting && !isShown.value) {
      isIntersecting.value = true
      isShown.value = true
    } else {
      isIntersecting.value = false
    }
  })

  const observe = (element) => {
    observer.observe(element)
  }

  const unobserve = (element) => {
    observer.unobserve(element)
  }

  return { observe, unobserve, isIntersecting, isShown }
}

Now in our component, we import it like a regular function and use the methods to dynamically render the image.
(Pretty similar to creating a custom hook in the React world).

<template>
  ...
  <div ref="el">
    <img :src="isShown ? game.background_image : null" />
  </div>
  ...
</template>

<script>
  import { ref, computed, onMounted, onUnmounted, onBeforeUnmount } from 'vue'
  import useIntersectionObserver from '../composables/useIntersectionObserver'

  export default {
    props: {
      game: Object,
    },
    setup(props, context) {
      const el = ref(null)
      const { observe, unobserve, isIntersecting } = useIntersectionObserver()

      onMounted(() => {
        observe(el.value)
      })

      onBeforeUnmount(() => {
        unobserve(el.value)
      })

      return { el, isIntersecting }
    },
  }
</script>

Benefits:

Code can now be organized by logical concerns (or features)
Keeps your components more readable
Extremely flexible

Good news: You can also use Composition API with *Vue 2 through @vue/composition api module!

It's good to say this syntax (setup) is optional, therefore you don't need to use composition for every single component you build, the standard object syntax is still completely valid.

Better TypeScript support

Vue 3 is completely written in TypeScript, which is good for everyone, now you can get better type definitions, develop more maintainable apps with typescript code, and, you can also get the Intellisense and Autocompletetion of your favorite code editor.

Suspense

Suspense is a native Vue component to deal with async dependencies. It is a good option to control what should render until a condition is met and our async component is ready.

In addition, it is a better way to handle multiple API calls from different components than relying on a v-if loading condition.

Note: Suspense is pretty experimental at this stage and its API might change in the future.

<template>
  <Suspense>
    <template #default>
      <GameList /> <!-- or Whatever async component you want to render -->
    </template>
    <template #fallback>
      Loading ...
    </template>
  </Suspense>
</template>

Teleport

We can use Teleport to write components that can have to move/teleport into different parts of your application, by selecting where (DOM element) to place even if this place is not where your app is mounted.

Teleport re-uses the DOM elements, so the state is preserved.

<div id="app"></div>
<div id="move-to-here"></div>
 
...
<template>
  <teleport to="#move-to-here">
    This should live outside of #app
  </teleport>
</template>

And you can select the target element in many ways

<teleport to="#id">
<teleport to=".class">
<teleport to="[data-modal]">

Simple, but very powerful!

Fragments

If you used React before you might know this one, in Vue 2.x we could not create a template with 2 elements at the same root and the reason for that is Vue instance that represents any Vue component needs to be bound into a single DOM element.

Now with Vue 3 you don't have to worry about that:

<!-- Before -->

<template>
    <div>
        <div>...<div>
        <div>...</div>
    </div>
</template>

<!-- After -->

<template>
    <div>...<div>
    <div>...</div>
</template>

Create a simple Note-taking app with Deno

Jeferson Brito — Wed, 20 May 2020 21:33:59 +0000

Since Deno 1.0 version was released last week it started to really catch the attention of all of us from the JavaScript Community, especially on the server-side of the ecosystem.

For those who don't know, Deno is a secure runtime for TypeScript and JavaScript, it was invented by the same creator of Node.js, Ryan Dahl.
It is written in TypeScript and Rust and built on top of V8 Engine.

In this tutorial, we're going to learn Deno by building a simple command-line interface for taking notes. We're going to go through his Standard Modules like File System operations (Read and Write JSON files) and Third-party modules to create commands and interact with the terminal.

So without further do, Let's get started

Installation

Shell (macOS, Linux)

$ curl -fsSL https://deno.land/x/install/install.sh | sh

Powershell (Windows)

$ iwr https://deno.land/x/install/install.ps1 -useb | iex

Homebrew (macOS)

$ brew install deno

Chocolatey (Windows)

$ choco install deno

We can test if the Deno is successfully installed by running this example app in your command line:

deno run https://deno.land/std/examples/welcome.ts

Application structure

.
├── data
│   └── notes-data.json
└── src
    ├── app.ts
    └── notes.ts

First off, let's create our initial JSON file containing our notes,
open notes-data.json and write the following:

[
  {
    "title": "Note one",
    "body": "Go to the Grocery Store"
  },
  {
    "title": "Note two",
    "body": "Watch a TV Show"
  }
]

Now we switch to our src folder and open app.ts to bootstrap our application:

// Thirty-party modules
import Denomander from 'https://deno.land/x/denomander/mod.ts';

// Local imports
import * as notes from './notes.ts';

const program = new Denomander({
  app_name: "Deno Notes App",
  app_description: "Create notes in json format from the command line",
  app_version: "1.0.0",
});

We are using a third-party module called Denomander, it's pretty much like commander.js, we will use it to create commands for us to run in the terminal.

Writing commands

After declaring our program we're going to implement five commands:

...

// Add command
program
  .command("add")
  .description("Add a new note")
  .action(() => {
    const title = prompt("Note title:") ?? "Note three";
    const body = prompt("Note body:") ?? "";
    notes.createNote({ title, body });
  });

// List command
program
  .command("list")
  .description("List all notes")
  .action(() => {
    notes.listNotes();
  });

// Read command
program
  .command("read")
  .description("Read a note")
  .action(() => {
    const title = prompt("Note title: ");
    notes.readNote(title);
  });

// Update command
program
  .command("update")
  .description("Update a note")
  .action(() => {
    const existingNote = prompt(
      "What note do you want to update? [title]",
    ) as string;
    const title = prompt("New title:") ?? "Note one";
    const body = prompt("New body:") ?? "";
    notes.updateNote(existingNote, { title, body });
  });

// Remove command
program
  .command("remove")
  .description("Remove a note")
  .action(() => {
    const title = prompt("Note title:");
    notes.removeNote(title);
  });

program.parse(Deno.args);

Deno 1.5 introduced prompt API to interact with input from the user, so our application is now able to respond to list, add, read, update and remove commands.

Writing operations

Then we can implement each separately, so let's write some I/O operations:

Open notes.ts file and import the following modules:

// Standard deno modules
import * as path from "https://deno.land/std/path/mod.ts";

// Thirty party modules
import iro, {
  bgGreen,
  bold,
  inverse,
  red,
  yellow,
} from "https://deno.land/x/iro/src/iro.ts";


const currentDir = Deno.cwd();
const notesFilePath = path.resolve(`${currentDir}/data/notes-data.json`);

path is a file system standard module that we're going to use to manipulate file paths and directories . If you know some of Node.js, you'll notice that it's pretty similar to the path module.

iro is a third-party terminal coloring and styles utility module.

Now Let's implement our first operations

...

interface Note {
  title: string;
  body: string;
}

export async function fetchNotes() {
  try {
    const file = await Deno.readTextFile(notesFilePath);
    const notes: Note[] = JSON.parse(file);
    return notes;
  } catch (error) {
    console.error(error);
    return [];
  }
}

export async function listNotes() {
  const notesList: Note[] = await fetchNotes();

  console.log(iro(" Your notes ", inverse));
  for (const note of notesList) {
    console.log(" - ", note.title);
    console.log("●".padStart(5), note.body);
  }
}

export async function saveNotes(notes: Note[]) {
  try {
    await Deno.writeTextFile(notesFilePath, JSON.stringify(notes));
  } catch (error) {
    throw new Error(`Unable to write contents to file: ${error}`);
  }
}

Our app is going to fetch our initial notes, and then perform operations to list and save notes.

Deno's runtime API provides the Deno.readTextFile and Deno.writeTextFile asynchronous functions for reading and writing entire files as text files.

Moving on, with these methods we are able to create and read commands:

export async function createNote({ title, body }: Note) {
  const notesList = await fetchNotes();
  const isDuplicate = notesList.find((note: Note) => note.title === title);
  if (!isDuplicate) {
    notesList.push({ title, body });
    await saveNotes(notesList);

    console.log(iro("New note added!", bold, bgGreen));
  } else {
    console.log(iro("Note title already taken!", inverse, red));
  }
}

export async function readNote(noteTitle: string) {
  const notesList = await fetchNotes();
  const searchedNote = notesList.find((note: Note) => {
    return note.title.toLocaleLowerCase() === noteTitle.toLocaleLowerCase();
  });

  if (searchedNote) {
    console.log(iro(searchedNote.title, inverse));
    console.log(searchedNote.body);
  } else {
    console.log(iro("Note not found!", bold, inverse, red));
  }
}

Finally, we implement the last two I/O operations for updating and removing our notes.

export async function removeNote(title: string) {
  const notesList = await fetchNotes();
  const notesToKeep = notesList.filter(
    (note: Note) => note.title.toLowerCase() !== title.toLowerCase(),
  );
  if (notesList.length > notesToKeep.length) {
    await saveNotes(notesToKeep);

    console.log(iro("Note removed!", bgGreen));
  } else {
    console.log(iro("No note found!", inverse, yellow));
  }
}

export async function updateNote(note: string, { title, body }: Partial<Note>) {
  const notesList = await fetchNotes();
  const currentNote = notesList.find(
    (n: Note) => n.title.toLowerCase() === note.toLowerCase(),
  );
  const newNote = { title, body } as Note;

  if (currentNote) {
    notesList.splice(notesList.indexOf(currentNote), 1, newNote);
    await saveNotes(notesList);

    console.log(iro("Note updated!", bgGreen));
  } else {
    console.log(iro("This note does not exists", inverse, yellow));
  }
}

Our application now can remove and update notes based on the title.

Experimenting

Last but not least, we can run our program by entering one of these commands

$ deno run --unstable --allow-write --allow-read src/app.ts add

// or

$ deno run --unstable -A src/app.ts add

Note title: Note three
Note body: This a new note

By the time of this writing, some of these APIs are still experimental, so we need a --unstable flag to run it.

Deno does not provide default access to files, so you need to explicitly define the flags to read and write.

$ deno run --unstable --allow-read src/app.ts read

Note title: Note 3

- Note 3
● my new note

We also use --allow-read to list our notes:

$ deno run --allow-read src/app.ts list

 -  Note one
    ● Go to the Grocery Store
 -  Note two
    ● Watch a TV Show
 -  Note 3
    ● my new note

You can see all the commands and the source code of this application in this repo.

That's all folks!
This my very first post written entirely in English, So I'd love to hear your opinion, if you have any questions please leave a comment in the section below.