DEV Community: LuisPa

Mastering JavaScript Generators: Understanding and Using the Power of Pausable Functions

LuisPa — Tue, 17 Jan 2023 03:19:25 +0000

JavaScript generators are a special type of function that can be paused and resumed, allowing you to control the flow of execution and produce a series of values. This makes them a powerful tool for tasks such as iterating through a large dataset or generating a stream of data.

To define a generator function, you use the function* syntax instead of the regular function keyword. Inside the generator, you can use the yield keyword to pause the function and produce a value. When the generator is resumed, it picks up right where it left off, allowing you to iterate through a series of values without the need for a loop.

Here is an example of a simple generator that produces the Fibonacci sequence:

function* fibonacci() {
  let [prev, curr] = [0, 1];
  while (true) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}

const sequence = fibonacci();
console.log(sequence.next().value); // 1
console.log(sequence.next().value); // 1
console.log(sequence.next().value); // 2
console.log(sequence.next().value); // 3
console.log(sequence.next().value); // 5

You can use the next() method to advance the generator to the next value. The method returns an object with a value property that contains the yielded value, and a done property that is true when the generator has completed.

Generators can also be used in combination with the for-of loop, which allows you to iterate through a series of values without the need for a traditional loop.

for (let value of fibonacci()) {
  console.log(value);
  if (value > 100) {
    break;
  }
}

In addition, you can use the yield* statement inside a generator to delegate to another generator or iterable object. This allows you to easily compose multiple generators together and create more complex data streams.

Generators are a powerful feature in JavaScript that can help you write more elegant and efficient code. They allow you to control the flow of execution, iterate through a series of values, and create complex data streams. With their help, you can easily create efficient, sophisticated, and robust applications.

Thanks for reading, happy hacking!

Originally posted in my personal blog: https://blog.luispa.dev/posts/mastering-javascript-generators-understanding-and-using-the-power-of-pausable-functions

How do I find the last version of a deleted file in Git

LuisPa — Thu, 05 Jan 2023 00:43:50 +0000

A few months ago, I deleted a file.

Today, I realized that actually, I need it! I picked a random commit 6 months ago and found the file… but hm, what if it changed after that point?

How do I find the final version of that file?

Here's the Git command I used:

$ git log --full-history -- src/path/to/file.js

This finds the commit that deleted the file. So, I checked out that commit, and then backed up one more:

$ git checkout HEAD~1

This loads the file right before it was deleted! 🎉

Git is such a powerful tool.

Happy hacking!

Originally posted here: https://blog.luispa.dev/posts/how-do-i-find-the-last-version-of-a-deleted-file-in-git

How to remove accent marks in a string using vanilla Javascript

LuisPa — Tue, 27 Sep 2022 01:09:15 +0000

In JS is quite of easy to replace chars by using str.replace for example, but, what happens when you want to remove accent marks?

I'm a native Spanish speaker, so this could be helpful if you need to handle some Spanish words.

This tiny post will build an example on how to make a slug from a Spanish sentences strings.

The code

// Input example
const spanishSentences = [
  "teléfono",
  "árbol",
  "colibrí",
  "cómpramelo",
  "Mandó una carta",
  "Qué grande es ese perro"
];

// Function definition
function createSlug(input){
  return input
    .toLowerCase()
    .trim()
    .replace(/[\s_-]+/g, "-")
    .replace(/^-+|-+$/g, "")
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "");
}

// Usage
const output = spanishSentences.map(createSlug);
console.log(output);
// Output:
/*
[
  "telefono", 
  "arbol", 
  "colibri", 
  "compramelo", 
  "mando-una-carta", 
  "que-grande-es-ese-perro"
]
*/

You can test it in this JS Bin

And that's it, happy coding!

How to bypass Gmail captcha using Puppeteer and Node.js

LuisPa — Tue, 17 Aug 2021 20:11:09 +0000

I had a situation this week, I wanted to read and validate some data from a private Google Spreadsheet using Puppeteer. Initially, I found 2 problems:

I needed to log in with a custom email/password to have the access to the spreadsheet. A captcha appears if we use a "vanilla" implementation of the puppeteer app.
The spreadsheet was blocked, we have read-only permission. We can't click, read, modify or make any operation on the cells.

This seems pretty awful, don't you think? Well, let's solve the first topic.

This is how I could bypass the Gmail captcha login and could read the data like a charm:

The Tools

We choose to use 3 extra packages aside puppeteer:

So my package.json looked like this.

{
  "name": "spreadsheet-checker",
  "version": "1.0.0",
  "description": "an google spreadsheet reader",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "puppeteer": "^8.0.0",
    "puppeteer-extra": "^3.1.18",
    "puppeteer-extra-plugin-adblocker": "^2.11.11",
    "puppeteer-extra-plugin-stealth": "^2.7.6"
  }
}

The Script

To get access to the spreadsheet we need to login first, and then make the redirect to the spreadsheet. So the script will be like this:

const puppeteer = require("puppeteer-extra");

// Add stealth plugin and use defaults (all tricks to hide puppeteer usage)
const StealthPlugin = require("puppeteer-extra-plugin-stealth");
puppeteer.use(StealthPlugin());

// Add adblocker plugin to block all ads and trackers (saves bandwidth)
const AdblockerPlugin = require("puppeteer-extra-plugin-adblocker");
puppeteer.use(AdblockerPlugin({ blockTrackers: true }));

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}
(async function () {
  // That's it, the rest is puppeteer usage as normal 
  const browser = await puppeteer.launch({
    headless: false
  });
  const page = await browser.newPage();
  let navigationPromise = page.waitForNavigation();

  await page.goto("https://accounts.google.com/");
  await navigationPromise;
  await page.waitForSelector('input[type="email"]');
  await page.type('input[type="email"]', process.env.email); // Email login
  await page.click("#identifierNext");

  await page.waitForSelector('input[type="password"]', { visible: true });
  await page.type('input[type="password"]', process.env.password); // Password login

  await page.waitForSelector("#passwordNext", { visible: true });
  await page.click("#passwordNext");
  navigationPromise = page.waitForNavigation();
  await navigationPromise;
  await page.goto(process.env.file_url); // Spreadsheet url

  await page.screenshot({ path: "spreadsheet-screen.png", fullPage: true }); // We take a screenshot to have probe of the bypass
  await browser.close();
})();

Now, let's solve the second topic.

The capture

So now we are in, how we can read the data? Well, the best approach with this scenario (read-only spreadsheet) we can download the data by using 2 things:

Setting the download folder handler for the puppeteer app.
Using page.keyboard.down and page.keyboard.press to trigger the shortcuts to save the file in the format we want it (PDF, CSV, XLSX).

The download handler

We need to bind a local folder to be the download folder for the puppeteer. To do this, we need to import the path package and configure a downloadPath, and then bind the page._client.send("Page.setDownloadBehavior") with a custom configuration.

const path = require("path");
const downloadPath = path.resolve("./download");
// puppeteer-extra is a drop-in replacement for puppeteer,
// it augments the installed puppeteer with plugin functionality.
// Any number of plugins can be added through `puppeteer.use()`
const puppeteer = require("puppeteer-extra");

// Add stealth plugin and use defaults (all tricks to hide puppeteer usage)
const StealthPlugin = require("puppeteer-extra-plugin-stealth");
puppeteer.use(StealthPlugin());

// Add adblocker plugin to block all ads and trackers (saves bandwidth)
const AdblockerPlugin = require("puppeteer-extra-plugin-adblocker");
puppeteer.use(AdblockerPlugin({ blockTrackers: true }));

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}
(async function () {
  // That's it, the rest is puppeteer usage as normal 
  const browser = await puppeteer.launch({
    headless: false
  });
  const page = await browser.newPage();
  let navigationPromise = page.waitForNavigation();

  await page.goto("https://accounts.google.com/");
  await navigationPromise;
  await page.waitForSelector('input[type="email"]');
  await page.type('input[type="email"]', process.env.email); // Email login
  await page.click("#identifierNext");

  await page.waitForSelector('input[type="password"]', { visible: true });
  await page.type('input[type="password"]', process.env.password); // Password login

  await page.waitForSelector("#passwordNext", { visible: true });
  await page.click("#passwordNext");
  navigationPromise = page.waitForNavigation();
  await navigationPromise;
  await page.goto(process.env.file_url); // Spreadsheet url
  // Our download configuration


  await page._client.send("Page.setDownloadBehavior", {
    behavior: "allow",
    downloadPath: downloadPath,
  });


  await browser.close();
})();

With this, we are ready to make the download action via shortcuts.

The shortcuts

In this case, I downloaded all the pages via HTML, using the next shortcuts.

ALT + F to open the File tab.
ALT + D to open the Download menu.
ALT + W to select Website option, and donwload all the content as HTML.

The script updated:

const path = require("path");
const downloadPath = path.resolve("./download");
// puppeteer-extra is a drop-in replacement for puppeteer,
// it augments the installed puppeteer with plugin functionality.
// Any number of plugins can be added through `puppeteer.use()`
const puppeteer = require("puppeteer-extra");

// Add stealth plugin and use defaults (all tricks to hide puppeteer usage)
const StealthPlugin = require("puppeteer-extra-plugin-stealth");
puppeteer.use(StealthPlugin());

// Add adblocker plugin to block all ads and trackers (saves bandwidth)
const AdblockerPlugin = require("puppeteer-extra-plugin-adblocker");
puppeteer.use(AdblockerPlugin({ blockTrackers: true }));

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}
(async function () {
  // That's it, the rest is puppeteer usage as normal 
  const browser = await puppeteer.launch({
    headless: false
  });
  const page = await browser.newPage();
  let navigationPromise = page.waitForNavigation();

  await page.goto("https://accounts.google.com/");
  await navigationPromise;
  await page.waitForSelector('input[type="email"]');
  await page.type('input[type="email"]', process.env.email); // Email login
  await page.click("#identifierNext");

  await page.waitForSelector('input[type="password"]', { visible: true });
  await page.type('input[type="password"]', process.env.password); // Password login

  await page.waitForSelector("#passwordNext", { visible: true });
  await page.click("#passwordNext");
  navigationPromise = page.waitForNavigation();
  await navigationPromise;
  await page.goto(process.env.file_url); // Spreadsheet url

  await page._client.send("Page.setDownloadBehavior", {
    behavior: "allow",
    downloadPath: downloadPath,
  });

  await page.keyboard.down("Alt");
  await page.keyboard.press("KeyF");
  await page.keyboard.press("KeyD");
  await page.keyboard.press("KeyW");
  await browser.close();
})();

Now we have the data downloaded. Cool! The reading process will be for another post.

Wrap up

This is a simple but useful implementation to solve this kind of problem. Hope you enjoy it.

Happy Hacking!

How to add a dynamic title on your React app

LuisPa — Mon, 31 Aug 2020 15:45:46 +0000

Hi there!

The last time I posted How to add a dynamic title on your React app using react-helmet. Since then, I found a way to do the same using React Hooks. Both approaches solve the problem, in my opinion, this is more simple. In the end, you choose :)

Let's start.

In this post, I'll show you how to create a simple React Hook to add a dynamic title behavior on your web app.

If you don't have any idea what React Hooks is, you can read all the things related here

Here you have a repo with an applicable example: GitHub Repo

Summary

Create a function to handle the title change.
Use it in every page component of your application.

1. Create a function to handle the title change.

We will create the hook that will make the title change, we will be called it useDocumentTitle.js:

// useDocumentTitle.js
import { useRef, useEffect } from 'react'

function useDocumentTitle(title, prevailOnUnmount = false) {
  const defaultTitle = useRef(document.title);

  useEffect(() => {
    document.title = title;
  }, [title]);

  useEffect(() => () => {
    if (!prevailOnUnmount) {
      document.title = defaultTitle.current;
    }
  }, [])
}

export default useDocumentTitle

We will use this hook to handle the title change, every time the title parameter change.

Some notes here:

This function handles prevailOnUnmount configuration.
This is optional, but the idea is to maintain the same title if the component using this hook is unmounted.
If you don't want to use it, the default value is false.

Let's see how to use it

2. Use it in every page component of your application.

For this example, we will see two scenarios: A simple one and a complex one.

Let's see the simple one:

// AppSimple.js
import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import useDocumentTitle from './useDocumentTitle'

function Page(props) {
  return <h2>{props.content}</h2>
}

function Home() {
  useDocumentTitle('Home title 👻')
  return <Page content='This is Home! ' />
}

function About() {
  useDocumentTitle('About title 👽')
  return <Page content='About!' />
}

function Other() {
  useDocumentTitle('Other title 👾')
  return <Page content='And this is Other!' />
}

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to='/'>Home</Link>
          </li>
          <li>
            <Link to='/about'>About</Link>
          </li>
          <li>
            <Link to='/other'>Other</Link>
          </li>
        </ul>

        <hr />

        <Route exact path='/' component={Home} />
        <Route path='/about' component={About} />
        <Route path='/other' component={Other} />
      </div>
    </Router>
  )
}

export default App

As you can see, every component uses the useDocumentTitle hook. This is the most simple way to manage the title change.

Some notes here:

We are using react-router to handle multiple pages for our app.
Every page component have a useDocumentTitle execution.
The title will change every time the component is mounted.
You can see the live example here
To see it better, select the option Open In New Window to see the title change.

Just take a look in a second approach using something just a little bit more complex.

// AppSimple.js
import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import useDocumentTitle from './useDocumentTitle'

function Page(props) {
  const titlePrefix = 'AppName 🤠 | '
  useDocumentTitle(`${titlePrefix}${props.title}`)
  return <h2>{props.content}</h2>
}

function Home() {
  return <Page content='This is Home!' title='Home Title 👻' />
}

function About() {
  return <Page content='About!' title='About title 👽' />
}

function Other() {
  return <Page content='And this is Other!' title='Other title 👾' />
}

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to='/'>Home</Link>
          </li>
          <li>
            <Link to='/about'>About</Link>
          </li>
          <li>
            <Link to='/other'>Other</Link>
          </li>
        </ul>

        <hr />

        <Route exact path='/' component={Home} />
        <Route path='/about' component={About} />
        <Route path='/other' component={Other} />
      </div>
    </Router>
  )
}

export default App

As you can see, just one component called Page is calling the hook. In this way, we send every title as a prop on each page, and the Page component uses it to change it.

Some notes here:

We are using the same structure of react-router to handle multiple pages for our app, in comparison with the simple example.
We have one component centralized to execute useDocumentTitle.
This Page component has a new thing called titlePrefix this value is just to see you can set a prefix (text before your title) in every title change.
This is absolutely optional, but it's cool to understand it and play with it.
You can see the live example here
To see it better, select the option Open In New Window to see the title change.

And that's it. Thanks for reading and happy coding!

Repo here
Live example here

What the heck is a rune in Golang

LuisPa — Wed, 08 Jul 2020 00:12:18 +0000

Photo by Gerson Repreza on Unsplash

The banner is a Cancún beach because I miss it some much.

Well, let's begin.

If you're familiarized with Golang might you already know what a rune is, but if you wanna clear more, you can continue reading.

In this short post, we will learn why the rune is a type of structure important and powerful in the Golang environment.

Let's start with the origin.

Characters, ASCII and Unicode

The rune type is an alias for int32 and is used to emphasize than an integer represents a code point.

ASCII defines 128 characters, identified by the code points 0–127. It covers English letters, Latin numbers, and a few other characters.

Unicode, which is a superset of ASCII, defines a codespace of 1,114,112 code points. Unicode version 10.0 covers 139 modern and historic scripts (including the runic alphabet, but not Klingon) as well as multiple symbol sets.

Strings and UTF-8 encoding

A string is a sequence of bytes, not runes.

However, strings often contain Unicode text encoded in UTF-8, which encodes all Unicode code points using one to four bytes. (ASCII characters are encoded with one byte, while other code points use more.)

Since Go source code itself is encoded as UTF-8, string literals will automatically get this encoding.

For example, in the string "café" the character é (code point 233) is encoded using two bytes, while the ASCII characters c, a and f (code points 99, 97 and 102) only use one:

fmt.Println([]byte("café")) // [99 97 102 195 169]
fmt.Println([]rune("café")) // [99 97 102 233]

Important points

Golang uses runes to manage Unicode chars, instead to limit the development only for ASCII values.
The importance to know this difference is to manage better the iteration between elements, and have a more clear scope of spaces, values, and differences between a string and a rune.
All of these values are bits and bytes as well, but it's better if we know when to use it and where to use it.

Original post

Happy coding!

Writing a simple API with Deno

LuisPa — Sat, 23 May 2020 22:50:50 +0000

Today we gonna write a REST API using Deno.

Deno is a simple, modern, and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust. You can look more about Deno on his official website

We're not here to fight and compete between Deno and Node, we're here to learn something new.

Steps

Install Deno.
Create API
Run the API with permissions.
Test our API

1. Install Deno

With Shell:

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

With PowerShell:

iwr https://deno.land/x/install/install.ps1 -useb -outf install.ps1; .\install.ps1 v1.0.2

2. Create API

Open a text editor, and create a file called index.ts. Add this to the index.ts file.

// Import the oak utils for app and router. Oak works similar than Express in Node, we are using the version 4.0.0 of oak
import { Application, Router } from 'https://deno.land/x/oak@v4.0.0/mod.ts'

// Let use the host parameters, but we set default values
const PORT = 8000
const HOST = 'localhost'

// Start instances of app and router
const app = new Application()
const router = new Router()

// This API will have only an get method
router.get('/api', (context) => {
  context.response.body = 'Hello from Deno API!'
})

// We let the app use the routes define above
app.use(router.routes())
app.use(router.allowedMethods())

// Start the app in the host and the port setted
const HOST_PORT = `${HOST}:${PORT}`
console.log(`Listen on ${HOST_PORT}`)
app.listen(HOST_PORT)

3. Run the API with permissions.

Deno has a feature to explicitly ask for permission to use the computer resources, protocols, and more.

To run the API we need to set the --allow-net flag to use the network protocols in our app. Now, run this script in your path where the index.ts is.

$ deno run --allow-net ./index.ts

You will see something like this:

4. Test our API

Now we can go to our browser and test the API at http://localhost:8000.

You will see something like this:

Wrapping up

This is a simple example of how to create a simple API in Deno.

I invite you to explore new things like Deno, use your energy on learning new things, and ovoid as much as you can the comparison between Deno and other tools.

Remember that this code is just an example, take this implementation as a reference to build your own solid, secure, and scalable solutions.

If you're more curious about Deno, I recommend these resources:

Build a Chat app with Deno
The Deno Handbook
Deno — How’s it Different to Node.js and Should I Learn it?

Happy coding!

Adding days to a date using Vanilla JS

LuisPa — Tue, 24 Mar 2020 14:01:36 +0000

This is a short post about how we can manage a common situation with our propper implementation.

Despite the JavaScript Date warts, it’s straightforward to add days to a date in JavaScript.

Today we have a ton of libraries and external modules to work with dates. It's overwhelming!

While it would be very easy to reach for moment.js or another date manipulation library (date-fns, luxon, dayjs) to do something as simple as adding days to a Date in JavaScript, writing a short helper function might just be easier.

A utility function that creates a Date copy

function addDays(date, days) {
  const copy = new Date(Number(date))
  copy.setDate(date.getDate() + days)
  return copy
}

const date = new Date();
const newDate = addDays(date, 10);

Mutating the Date directly

const date = new Date();
date.setDate(date.getDate() + 10);

Gotchas and examples

This actually works as expected, eg. the month rolls over.

const d = new Date('2019-04-14');

const monthRollsOver = addDays(myDate, 31);
console.log(monthsRollOver)
// 2019-05-15

Of course, if you’re already using a data manipulation library elsewhere in your code, you should leverage that since you’re already paying the download/parse cost.

Rest Parameters in TypeScript

LuisPa — Tue, 24 Mar 2020 13:52:50 +0000

TypeScript introduced rest parameters to accommodate n number of parameters easily.

When the number of parameters that a function will receive is not known or can vary, we can use rest parameters. In JavaScript, this is achieved with the "arguments" variable. However, with TypeScript, we can use the rest parameter denoted by ellipsis ...

We can pass zero or more arguments to the rest parameter. The compiler will create an array of arguments with the rest parameter name provided by us.

function Greet(greeting: string, ...names: string[]) {
    return greeting + " " + names.join(", ") + "!";
}

Greet("Hello", "Steve", "Bill"); // returns "Hello Steve, Bill!"

Greet("Hello");// returns "Hello !"

In the above example, we have a function with two parameters: greeting and names. Here, names is a rest parameter denoted by ellipses .... While calling the function, we first pass "Steve", "Bill" as the rest parameters. These are combined into a string array by joining the elements of the names array. Hence, it returns "Hello Steve, Bill!". During the second function call, we do not pass any arguments as the rest parameters. This is accepted by the compiler and hence the output is "Hello !"

The rest parameters can be used in functions, arrow functions or classes.

let Greet = (greeting: string, ...names: string[]) => {
    return greeting + " " + names.join(", ") + "!";
}

Greet("Hello", "Steve", "Bill"); // returns "Hello Steve, Bill!"

Greet("Hello");// returns "Hello !"

Remember, rest parameters must come last in the function definition, otherwise, the TypeScript compiler will show an error. The following is not valid.

function Greet(...names: string[], greeting: string) {  // Compiler Error
    return greeting + " " + names.join(", ") + "!";
}

Readonly properties in TypeScript

LuisPa — Tue, 24 Mar 2020 13:48:46 +0000

TypeScript introduced the keyword readonly, which makes a property as read-only in the class, type or interface.

Prefix readonly is used to make a property as read-only. Read-only members can be accessed outside the class, but their value cannot be changed. Since read-only members cannot be changed outside the class, they either need to be initialized at the declaration or initialized inside the class constructor.

class Employee {
    readonly empCode: number;
    empName: string;

    constructor(code: number, name: string)     {
        this.empCode = code;
        this.empName = name;
    }
}
let emp = new Employee(10, "John");
emp.empCode = 20; //Compiler Error
emp.empName = 'Bill'; //Compiler Error

In the above example, we have the Employee class with two properties- empName and empCode. Since empCode is read only, it can be initialized at the time of declaration or in the constructor.

If we try to change the value of empCode after the object has been initialized, the compiler shows the following compilation error:

error TS2540: Cannot assign to empCode' because it is a constant or a read-only property.

An interface can also have readonly member properties.

interface IEmployee {
    readonly empCode: number;
    empName: string;
}

let empObj:IEmployee = {
    empCode:1,
    empName:"Steve"
}

empObj.empCode = 100; // Compiler Error: Cannot change readonly 'empCode'

As you can see above, empCode is readonly, so we can assign a value at the time of creating an object but not afterward.

In the same way, you can use Readonly<T> to create a readonly type, as shown below.

interface IEmployee {
    empCode: number;
    empName: string;
}

let emp1: Readonly<IEmployee> = {
    empCode:1,
    empName:"Steve"
}

emp1.empCode = 100; // Compiler Error: Cannot change readonly 'empCode'
emp1.empName = 'Bill'; // Compiler Error: Cannot change readonly 'empName'

let emp2: IEmployee = {
    empCode:1,
    empName:"Steve"
}

emp2.empCode = 100; // OK
emp2.empName = 'Bill'; // OK

In the above example, emp1 is declared as Readonly<IEmployee> and so values cannot be changed once initialized.

Big O notation in short

LuisPa — Tue, 24 Mar 2020 13:35:28 +0000

tl;dr:

You should make a habit of thinking about the time and space complexity of algorithms as you design them.
Beware of premature optimization
Every operation in an algorithm counts. Be wise to select your battles.

The idea behind big O notation

Big O notation is the language we use for talking about how long an algorithm takes to run. It's how we compare the efficiency of different approaches to a problem.

It's like math except it's an awesome, not-boring kind of math where you get to wave your hands through the details and just focus on what's basically happening.

With big O notation, we express the runtime in terms of—brace yourself—how quickly it grows relative to the input, as the input gets arbitrarily large.

Let's break that down:

How quickly the runtime grows: It's hard to pin down the exact runtime of an algorithm. It depends on the speed of the processor, what else the computer is running, etc. So instead of talking about the runtime directly, we use big O notation to talk about how quickly the runtime grows.
Relative to the input: If we were measuring our runtime directly, we could express our speed in seconds. Since we're measuring how quickly our runtime grows, we need to express our speed in terms of...something else. With Big O notation, we use the size of the input, which we call "n." So we can say things like the runtime grows "on the order of the size of the input" O(n) or "on the order of the square of the size of the input" O(n^2).
As the input gets arbitrarily large: Our algorithm may have steps that seem expensive when n is small but are eclipsed eventually by other steps as n gets huge. For big O analysis, we care most about the stuff that grows fastest as the input grows, because everything else is quickly eclipsed as n gets very large. (If you know what an asymptote is, you might see why "big O analysis" is sometimes called "asymptotic analysis.")

The Big O describes the asymptotic performance, and more specific it gives the upper bound for the time complexity of an algorithm. This means that it doesn't look at how much actual, time a function takes, could be 1 ms could be 1 min, just at how efficient your algorithm is.

O(n) means that the script will run in linear time. Example of that would be:

// javascript

for(int i=0; i<n; ++i) {
   print(i);
}

Now if you then need to run through that array again, you'll get different performance.

O(n^2) = O n squared = Outer loop (i) x outer loop (x)

// javascript

for(int i=0; i<n; ++i) {
    for(int x=0; x<n; ++x) {
        print(x);
    }
}

Big O analysis is awesome except when it's not

You should make a habit of thinking about the time and space complexity of algorithms as you design them. Before long this will become second nature, allowing you to see optimizations and potential performance issues right away.

Asymptotic analysis is a powerful tool but wields it wisely.

Big O ignores constants but sometimes the matter of the constant. If we have a script that takes 5 hours to run, an optimization that divides the runtime by 5 might not affect big O, but it still saves you 4 hours of waiting.

Beware of premature optimization. Sometimes optimizing time or space negatively impacts readability or coding time. For a young startup, it might be more important to write code that's easy to ship quickly or easy to understand later, even if this means it's less time and space-efficient than it could be.

But that doesn't mean startups don't care about big O analysis. A great engineer (startup or otherwise) knows how to strike the right balance between runtime, space, implementation time, maintainability, and readability.

You should develop the skill to see time and space optimizations, as well as the wisdom to judge if those optimizations are worthwhile.

Posted here

React hooks with TypeScript

LuisPa — Fri, 21 Feb 2020 13:46:28 +0000

Hi! This is a short post about how to use React Hooks with TypeScript.

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Check out this page for more details about hooks. I think they’re pretty awesome. Probably game-changing! Hooks make formerly “stateless” functional components to basically everything old class components can be.

So much cleaner API, with no breaking changes.

Just quickly after their release in React 16.7., React typings in DefinitelyTyped got an update as well. Check out how you can use hooks with TypeScript!

Benefits of use TypeScript

Code scalability with “Interface oriented development”
TypeScript helps you dealing with growing teams.
Tooling and Community, for example, Microsoft made an awesome community effort work.
ES-next compliance.
Types have a proven ability to enhance code quality and understandability.

You can start testing this very quick using codesandbox.io or StackBlitz or locally using:

$ npx create-react-app my-app --template typescript

In this post we will see:

useState
useEffect
useContext

useState

useState is probably one you are going to use a lot. Instead of using this.state from class components, you can access the current state of a component instance, and initialize it, with one single function call. Our desire for strong typing is that values we initially set, get per component update, and set through events, always have the same type. With the provided typings, this works without any additional TypeScript:

// import useState next to FunctionComponent
import React, { FunctionComponent, useState } from 'react';

// our components props accept a number for the initial value
const Counter:FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
  // since we pass a number here, clicks is going to be a number.
  // setClicks is a function that accepts either a number or a function returning
  // a number
  const [clicks, setClicks] = useState(initial);
  return <>
    <p>Clicks: {clicks}</p>
    <button onClick={() => setClicks(clicks+1)}>+</button>
    <button onClick={() => setClicks(clicks-1)}>-</button>
  </>
}

And that’s it. Your code works with out any extra type annotations, but still typechecks.

useEffect

useEffect is here for all side effects. Adding event listeners, changing things in the document, fetching data. Everything you would use component lifecycle methods for (componentDidUpdate, componentDidMount, componentWillUnmount) The method signature is pretty straightforward. It accepts two parameters:

A function that is called without any parameters. This is the side-effect you want to call.
An array of values of type any. This parameter is optional. If you don’t provide it, the function provided is called every time the component update. If you do, React will check if those values did change, and triggers the function only if there’s a difference.

// Standard use case.
const [name, setName] = useState('Stefan');
useEffect(() => {
  document.title = `Hello ${name}`;
}, [name])

You don’t need to provide any extra typings. TypeScript will check that the method signature of the function you provide is correct. This function also has a return value (for cleanups). And TypeScript will check that you provide a correct function as well:

useEffect(() => {
  const handler = () => {
    document.title = window.width;
  }
  window.addEventListener('resize', handler);

  // won't compile
  return true;

  // compiles
  return () => {
    window.removeEventListener('resize', handler);
  }
})

This also goes for useLayoutEffect and useMutationEffect.

useContext

useContext allows you to access context properties from anywhere in your components. Much like the Context.Consumer does in class components. Type inference works brilliantly here, you don’t need to use any TypeScript specific language features to get everything done:

import React, { useContext } from 'react';

// our context sets a property of type string
export const LanguageContext = React.createContext({ lang: 'en' });

const Display = () => {
  // lang will be of type string
  const { lang } = useContext(LanguageContext);
  return <>
    <p>Your selected language: {lang}</p>
  </>
}

And that's it. We just learned how to use 3 of the most used hooks from React Hooks with TypeScript.

Happy coding!