DEV Community: Antoine Mesnil

Code faster with custom VScode snippets

Antoine Mesnil — Tue, 06 Dec 2022 17:38:25 +0000

Code snippets are templates that make it easier to enter repeating code patterns and who better than yourself knows what code you copy again and again. The best way to tackle this problem is with tailored-to-you snippets and I will show how to create them in less than 2 minutes.

Transform your code into snippets

First of all, open the snippets settings (File > Preferences / Code > Preferences on macOS, and then select the language for which the snippets should appear, or Global Snippets file for it to be available for every language).

Then get the code you want to turn into a snippet and head over to this website https://snippet-generator.app

You will get the body of the snippet, which is the text interpreted by VScode to generate your code.

You also have to fill in the rest of the snippet:

name a short name that will be displayed when the snippet is suggested
prefix defines the trigger to call the snippet
scope is the list of languages for which the snippet applies (ex: javascript, typescript, typescriptreact)

You should have something that looks like this

Placeholders and advanced syntax

You can further improve your snippet with placeholders, tabstops and variables. You can find the documentation here: snippet syntax doc

You can set cursor locations with $0, $1... if you write multiple times the same number you will edit the same text at each location.

Placeholders are default values that are linked to those cursor locations like this ${1:foo}

You also have default variables for example if you want the name of the current file you write TM_FILENAME_BASE . The best of it is that you can combine with placeholders.

Here is a snippet where you will have the file name as the name of the component and the default export but with cursor locations on them if you want to quickly edit it. (you will find the gist of all my snippet at the end)

One special trick, if you want to get the name of the folder, you have to use the directory path variable and transform it like this: ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}

You can find some examples of my snippets here

😄 Thanks for reading! If you found this article useful, consider following me on Twitter, I share tips on development, design and share my journey to create my own startup studio

Quick i18n setup in React native with autocomplete

Antoine Mesnil — Thu, 17 Nov 2022 17:22:49 +0000

Introduction

I always make sure to set up i18n (internationalization) in my apps even if there will probably be only one language used. The pain of adapting an app that wasn't thought to be multilingual in the first place is too big to procrastinate on it.
Fortunately, I now have an easy setup, with auto-completion with typescript, autodetection of the user language and more.

Setup

To get the user language and handle our translations, we use 2 libraries:

react-native-localization: a toolbox with a simple API to get the user's locale, units and timezone. (nb: if you use expo, expo-localization is also a good library to use)

react-i18next: a powerful and popular framework for internationalization in React / React-native.

npm install react-native-localize react-18next i18next

After the installation, we need only one configuration file and JSON files that will contain our translations for each language.

import AsyncStorage from '@react-native-async-storage/async-storage'
import i18n, {
  LanguageDetectorAsyncModule
} from 'i18next'
import {
  initReactI18next
} from 'react-i18next'
import * as RNLocalize from 'react-native-localize'

import fr from './dictionaries/fr.json'

export const locales = {
  fr: {
    translation: fr
  },
}

export const DEFAULT_LOCALE = 'fr'

export const defaultLanguage =
  RNLocalize.findBestAvailableLanguage(Object.keys(locales))?.languageTag || DEFAULT_LOCALE

export const currentLanguage = i18n.language || defaultLanguage

const useLanguageStorage: LanguageDetectorAsyncModule = {
  type: 'languageDetector',
  async: true,
  detect: async (callback) => {
    AsyncStorage.getItem('language').then((lang) => {
      if (lang) return callback(lang)
    })
  },
  init: () => null,
  cacheUserLanguage: async (language: string) => {
    AsyncStorage.setItem('language', language)
  },
}

i18n
  .use(useLanguageStorage)
  .use(initReactI18next)
  .init({
    fallbackLng: defaultLanguage,
    resources: locales,
    react: {
      useSuspense: false,
    },
  })

export default i18n

Then you will have to import that file in your App.tsx and that's it.

Autocompletion with Typescript

One annoying thing when using translation keys is typing the paths again and again. To improve the developer experience I add a small definition to get suggestions with Typescript, it helps to avoid mistakes and reduce the coding time.

Create a file react-18next.d.ts at the root of your project directory or in a types folder and add this code:

import 'react-i18next'

import fr from './i18n/dictionaries/fr.json'

declare module 'react-i18next' {
  // and extend them!
  interface Resources {
    translation: typeof fr
  }
}

With this setup, you should have something like this in VScode

Usage

Most common usage

Almost every time a text is used in a screen, you will add that text linked to a key in the JSON file, use the hook provided by i18next which is called useTranslation and use the key in your text

Access outside of components

Sometimes you may need to use your translations outside of your components in config files or whatever. To do that you can directly import your i18n file and access the t method

import i18next from './i18n'

i18next.t('my.key')

Nested texts/multiple styles

One powerful feature of react-i18next is the Trans component which can interpret custom tags in your translations to use a component for a part of your text.

"myKey":"it is my text <color>colored part</color> end of text"

<Text>
  <Trans 
    components={{ color: <Text font="bold" 
    color="primary" /> }}
  >
    {t("path.to.my.key"}
  </Trans>
<Text>

Update the language

To update the language, you use the same hook

const { t, i18n } = useTranslation('');
...
<Button onPress={()=>i18n.changeLanguage("de")>{i18n("switchLanguage")}<Button/>

Handle dates, currencies, API values

To handle dates, my go-to library is dayjs because it is a very popular library, complete and it has the same API as Momentjs (which I used by in the days).

import 'dayjs/locale/fr' // load on demand
dayjs.locale('fr') // use French locale globally
dayjs('2018-05-05').locale('fr-FR').format() // use on a specific text

For currencies you have multiple ways to tackle this problem, now I use Intl

const { i18n } = useTranslation()
<Text>{Intl.NumberFormat(i18n.language, {
    style: 'currency',
    currency: 'EUR'}).format(45012)}</Text>

On a final note, make sure that all your form/dynamic values are linked to a slug or a key that is related to your API. With that setup, add another language will be extremely fast instead of a tedious task.

😄 Thanks for reading! If you found this article useful, consider following me on Twitter, I share tips on development, design and share my journey to create my own startup studio

Scrape images from a search engine with JavaScript and Puppeteer

Antoine Mesnil — Fri, 04 Nov 2022 16:37:23 +0000

Introduction

In the previous post of this series, we discovered how to use Nodejs and Puppeteer for scraping and searching content on web pages. I recommend reading it first if you have never used Puppeteer or need to set up the project.

In this article, we will fetch full-resolution images from a search engine. Our goal time is to get a picture of every dog breed.

Script to get the images links

You should have Node.js and Puppeteer installed with npm or yarn.
We will use the same methods than on the first part.
We are going to use a simple JSON as our list of dog breeds that can be found here: dog breeds dataset

As for the search engine, we will scrape on Duckduckgo because it allows us to easily get the images at a full resolution which can be more tricky on Google images.

const puppeteer = require("puppeteer")
const data = require("./dog-breeds.json")

const script = async () => {
  //this will open visibly a chromium window, this is useful to see what is going on and test stuff before the finalized script
  const browser = await puppeteer.launch({ headless: false, slowMo: 100 })
  const page = await browser.newPage()

  //loop on every breed
  for (let dogBreed of data) {
    console.log("Start for breed:", dogBreed)
    const url = `https://duckduckgo.com/?q=${dogBreed.replaceAll(
      " ",
      "+"
    )}&va=b&t=hc&iar=images&iax=images&ia=images`

    //in case we encounter a page without images or an error
    try {
      await page.goto(url)

      //make sure the page is loaded and contain our targeted element
      await page.waitForNavigation()
      await page.waitForSelector(".tile--img__media")

      await page.evaluate(
        () => {
          const firstImage = document.querySelector(".tile--img__media")
          //we open the panel that contains the image info
          firstImage.click()
        },
        { delay: 400 }
      )

      //get the link of the image from the panel
      await page.waitForSelector(".detail__pane a")
      const link = await page.evaluate(
        () => {
          const links = document.querySelectorAll(".detail__pane a")
          const linkImage = Array.from(links).find((item) =>
            item.innerText.includes("fichier")
          )
          return linkImage?.getAttribute("href")
        },
        { delay: 250 }
      )
      console.log("link succesfully retrieved:", link)
      console.log("=====")
    } catch (e) {
      console.log(e)
    }
  }
}

script()

After running the script with node scrapeImages.js you should get something like this:

Download and optimize the images

We now have the links of every images but some of them are quite heavy (>1mb).
Fortunately we can use another Node.js library to compress their size with minimal loss of quality: sharp

It is a massively used library (2M+ weekly download) to convert, resize and optimize images.

You can add this at the end of the script to have a folder filled with the optimized images

const stream = fs.createWriteStream(dogBreed + ".jpg")
await https.get(link, async function(response) {
  response.pipe(stream)
  stream.on("finish", () => {
    stream.close()
    console.log("Download Completed")
  })
})

//resize to a maximum width or height of 1000px
await sharp(`./${dogBreed}.jpg`)
  .resize(1000, 1000)
  .toFile(`./${dogBreed}-small.jpg`)

Conclusion

You can adapt this script to get pretty much anything, you can also not limit yourself to the first image for each query but get every image. As for myself, I used this script to get the initial images for a tool I'm working on https://dreamclimate.city

😄 Thanks for reading! If you found this article useful, consider to follow me on Twitter, I share tips on development, design and share my journey to create my own startup studio

Practical intro to scraping with Puppeteer: fetch your country climate data

Antoine Mesnil — Fri, 28 Oct 2022 16:46:20 +0000

Introduction

I will show how to setup Puppeteer with Nodejs, we will use some essential functions to move on different pages and search content on them. Our goal is to scrape the climate data of your country's main cities on Wikipedia.
You only need Node.js and your IDE (like VScode) installed

1. What is Puppeteer and why choose it

Puppeteer is a popular Node library (80k stars on Github) and the Chrome DevTools team maintains it.
With Puppeteer you can control a headless chrome browser with an easy API and a simple setup.
If you are looking for alternatives, Playwright is a good match but it focuses much more on testing. There is also Selenium which has the benefit to work with many browsers and languages but comes with a more complex setup and API.

2. Setup the project

At the end of this part, you should have a running script that opens chrome and a new page automatically.

Run those commands:

npm init
npm install puppeteer

Create a file scrapeWikipedia.js or the name of your choice and copy-paste this:

const puppeteer = require("puppeteer");

const script = async () => {
  const browser = await puppeteer.launch({
    //this will open a chromium window, this is useful to see what is going on and test stuff before the finalized script
    headless: true, 
  });
  const page = await browser.newPage();
  //
  //your code will go there
  //
  await browser.close()
}
script()

now you can run:

node scrapeWikipedia.js

3. Search within a page and scrape data

Now we are going into the core of this script, we will search our targeted content into multiple pages.

To do that we are going to use 3 functions :

page.goto - which is used to navigate to a page

page.evaluate - uses a callback which we use to execute javascript in the page, in this introduction we use it to search and handle elements with common JavaScript methods like document.querySelectorAll

page.waitForNavigation - as its name, it is used to wait for the content to load, there is also waitForSelector which can be useful

First we are going to fetch the list of cities of your country

  //Get the page where your country is between those : A-B • C-D-E-F • G-H-I-J-K • L-M-N-O • P-Q-R-S • T-U-V-W-Y-Z
  await page.goto(
    "https://en.wikipedia.org/wiki/List_of_towns_and_cities_with_100,000_or_more_inhabitants/country:_A-B"
  )
  const cityLinks = await page.evaluate(() => {
    //set your country here
    const country = "YOUR COUNTRY"

    //remove the elements between the countries and the cities to make the scrapping easier
    const thumbs = document.querySelectorAll(".thumb")
    thumbs.forEach((thumb) => thumb.remove())

    //get the list of countries and cities
    const countries = document.querySelectorAll(".mw-headline")
    const countryIndex = Array.from(countries).findIndex((item) =>
      item.innerText.includes(country)
    )
    const cityTables = document.querySelectorAll("h2 + table.wikitable")
    const cityList = cityTables[countryIndex].querySelectorAll("tbody tr")

    return Array.from(cityList).map((row) => row.querySelector("a")?.href)
  })

At this point you should have a list of cities with a link for each of them.
Now are going to go to every page and get the data from their climate tables

   const data = []
  await page.waitForSelector("table.wikitable > tbody")
  for (let link of cityLinks.filter((item) => !!item)) {
    await page.goto(link)
    const cityData = await page.evaluate(() => {
      const name = document.querySelector("h1").innerText
      const values = { name }

      //there are more types of data if you need
      const labels = ["Average high", "Average precipitation", "sunshine hours"]
      const tables = Array.from(
        document.querySelectorAll("table.wikitable > tbody")
      )
      const table = tables.find((item) => item.innerText.includes("Climate"))
      labels.forEach((label) => {
        const data = Array.from(table?.children || {}).find((item) =>
          item?.innerText?.includes(label)
        )

        const dataValues = Array.from(data?.children || {}).map(
          (item, index) => ({
            value: item?.innerText || "",
            time:
              table?.children?.["1"]?.children[String(index)]?.innerText || "",
          })
        )
        values[label] = dataValues
      })
      return values
    })
    data.push(cityData)
  }
  console.log(data)

Get the full code here: Gist of the code

This should give you a result like this:

4. Conclusion

You can adapt this script to get pretty much anything, all you have to do is study the structure of the pages you want the data from and do some trials and errors. As for myself, I used this method to get the initial data for a tool I'm working on https://dreamclimate.city

😄 Thanks for reading! If you found this article useful, it's part of a series and the next article will be about scraping images on a search engine. To get notified follow me on Twitter, I also share tips on development, design and share my journey to create my own startup studio

Upload media to Supabase from remote URL with nodejs

Antoine Mesnil — Tue, 27 Sep 2022 15:18:31 +0000

Introduction

Recently I had to upload images in bulk to Supabase but I was kind of rusty on my nodejs and lost some time so I thought I would share the simple result to spare time for others.

Supabase setup

The first step is to create your bucket on supabase, make it public or make sure to create policies to have the right access.

You can also get your service_role API key to bypass any RLS policies at this URL (do not share or display in public):
https://app.supabase.com/project/{YOUR_PROJECT_ID}/settings/api

Script setup

To init your project we are going to need npm or yarn and run those two commands

npm init
npm install @supabase/supabase-js node-fetch@2

It will create a package.json and install the necessary dependencies. Now you can create your script.js file and run

node script.js

If you wish to use typescript you can also do

npx ts-node script.ts

Script

import fetch from "node-fetch"
import { createClient } from '@supabase/supabase-js'

const script = async () => {
  const options = {
    schema: 'public',
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  }

   const supabase = createClient(
    `https://${process.env.SUPABASE_PROJECT_ID}.supabase.co`,
    process.env.SUPABASE_API_KEY || '',
    options,
  )

  const url = "https://www.grapheine.com/wp-content/uploads/2015/09/nouveau-logo-google-2015.jpg"
  const blob = await fetch(url).then((r) => r.blob())
    await supabase.storage.from('my-new-bucket').upload("my-name" + '.jpg', blob)
    const { publicURL } = supabase.storage.from('covers').getPublicUrl("my-name" + '.jpg')

    //To save it in your DB
    await supabase.from('myTable').update({ logo_url: publicURL }).eq('id', the_thing_id)
}
script()

That's it, now you can run the script and loop it for bulk upload.

😄 Thanks for reading! If you found this article useful, want more tips and follow my journey to create my own startup studio follow me on Twitter

Best practices for styling React native apps

Antoine Mesnil — Tue, 20 Sep 2022 15:21:37 +0000

Introduction

Coming from the web and CSS, in React Native I've felt restrained and I had to pick up some tricks to improve my developer experience with styling.
Today, I use four main tricks in all my projects and the best thing is that they can be used independently and easily configurable thus I can adjust for my needs and the specificities of the projects.

1. Theming

To have a theme in your application make sure you will stay consistent in your styling and make it easy to maintain in case of updates (to avoid those mass "find and replace" in the whole codebase when the font or the colors change).
It usually includes colors, fonts, font sizes, spacings, border radius, shadows, basically anything relevant and used globally in your app.

I use the simplest way to use a theme: a plain javascript object.

2. Conditional styles with functions and typescript

You often need multiples styles based on variables and to achieve that you traditionally have two ways to do it:

One way is to have a style for each condition and apply the condition to the component which can lead to complexity in your render method.

Another way is to have a function to handle the whole style with all the necessary variables:

But I disliked that because it forces you to have the whole logic and all the variables for your styling in one place and I had to copy/paste that in many components which seemed inefficient.

My solution is a combination of those two, it's using functions but directly in StyleSheets and whenever needed (avoid abusing this syntax if there is no variable in your style to not clutter the readability with functions everywhere)

But it has one default, typescript is unhappy with it and you need to declare a definition in a d.ts file to remove type errors:

Gist of the code

3. Responsive design with a single function

Making your designs work flawlessly on every screen is hard even so I tackle almost all problems with this single helper:

Gist of the code

For every screen size smaller than an iPhone 11 it will scale down the size and for larger screens, it will scale up (not intended for tablets, even if it could work it is usually more complex to convert your design to tablet screens).

Then you can use it in your styles:

button : {height:normalize(40)}

There will still be many things to check and tweak espacially on small screens but it still helps a lot in the majority of cases

4. Utility "classes"

I realized that most of the styles I wrote were only about a handful of properties and I would write files only for spacing and flex.
To avoid 20 files with just margin-top everywhere, I created a single style file with those properties and I can use it for all my components and screens. It is inspired by "css utility classes" applied to react native.

It avoid to create files with the same styles over and over
Can be linked to your theme and be consistent easily
Avoid the hassle de find names for everything

The only downside I can find is that we can be tempted to add all our properties and have a big array of styles like Tailwind which weaken the readability of your components, I would recommend to stick to 2-3 properties max and still write styles files when necessary

😄 Thanks for reading! If you found this article useful, want more tips and follow my journey to create my own startup studio follow me on Twitter

3 Tips to tidy up your ES6 imports

Antoine Mesnil — Mon, 12 Sep 2022 14:45:29 +0000

Introduction

Over the past years I've picked up many habits to keep my projects consistent and easy to maintain. One of them is to have clean imports with short paths, grouped and sorted that I can scan with just a glance and as I'm lazy like any developer it's done automatically.

Here is an example of how imports would change after the clean up:

To achieve this change I did 3 things

1. Barrel Pattern

A barrel is a way to rollup exports from several modules into a single convenient module. The barrel itself is a module file that re-exports selected exports of other modules.

basarat gitbook

Instead of importing every single file everywhere, we use an intermediary. For each folder where we want a common export, we create an index.js file that will contain the exports for every file of the folder.
But an example will be more understandable than a long explanation.

2. Uses aliases

I found 3 reasons to use aliases

It shortens paths to make it more readable
If you have to move a file, imports won't change
It makes the use of snippets easier (I have them to template the starts of my files)

Depending on your tech stack, you can have different configs. For projects like Create-react-app, React-native, or anything using babel / webpack :

The first step is to install the babel plugin
npm i babel-plugin-module-resolver or if you prefer yarn add babel-plugin-module-resolver

Then in the "babel.config.js" file, you add this config

when using Nextjs: Nextjs alias documentation
when using Vitejs: Example of setup

when using typescript

3. Order imports

The last important thing I do to keep my imports clean, is to order and group them.

To do that automatically one tiny lib (prettier plugin) : https://github.com/trivago/prettier-plugin-sort-imports

I chose to use this library because prettier is used on every projects, it's easy to setup and fully configurable with regexes.

I know what you may think, regex and easy in the same sentence but for this use case it's pretty straightforward. Here is my personal config :

It makes 3 groups, one for external imports (libraries), one for internal imports (components, helpers, hooks...) and the last one for everything related to styles, styled-component...