DEV Community: Timothée Clain

The post-bootcamp bootcamp

Timothée Clain — Fri, 24 Jun 2022 04:03:23 +0000

Breaking into tech sucks. It's time to change that.

In the last years I've had the chance to mentor dozens of junior engineers. They all share more or less the same challenges and questions:

Is it normal to feel inadequate....
I've sent dozens of resume with no answers...
How much leetcode to (not) do ?
Do you wish there was a user manual for passsionated people like your that want to break into tech ?

I've decided to share everything I know in free monthly webinars, called the Post-Bootcamp Bootcamp. If there is enough interest I'll create sidekick courses that will be donation based. I want to make sure that any person in need can access it.

The first module incoming in july 22' will cover:

know yourself to market yourself effectively
build an attractive resume and linkedin profile
grow your network and build a job seeking pipeline
cold reach tech leaders with success
navigate initial screening
manage expectations in the process

Feel free to register here:
https://forms.gle/dn6KGKcHguybY2Xr5

Hope to see you there.

{ES/TS} bit of the day: Typed Tagged Templates

Timothée Clain — Fri, 28 Dec 2018 16:55:19 +0000

Hi there! Today I'd like to talk about one of my beloved modern javascript features. These are Tagged Templates.

Tagged What?

Basically Tagged Templates are an extension of the basic interpolation mechanism that you normally uses in ES6+.

Using backticks you can elegantly insert values in a string (multiline by the way, :-))

const greet = (name) => `hello ${name}`

greet('timothee') // hello timothee

In one work?

By using the backticks notation with a function identifier, you basically have a template engine for free.

An example please!

Don't worry, it's actually less scary than what it sounds.

Let's take a function like

function myTemplate() {}

We'll see the actual arguments later.

I can call the function with this syntax now.

myTemplate`Hello !`

Weird isn't it?

What's more interesting, is I can actually pass interpolations with the familiar ${} syntax.

Let's try it:

const externValue = "Timothee"
myTemplate`Hello ! ${externValue}`

Of course, I now can use computed values from the surrounding scope of my function call.

This syntax is an actual function call of myTemplate

So what's the magic actually?

Let's see the arguments passed to the function:

The first argument is a list of invariant strings
the n others arguments are all the other interpolation produced by ${} usage.

For instance, if I make this call:

myTemplate`Hello,${"Timothee"},World`

The first argument will be a list of all strings that don't change inside the passed string:

["Hello,", ",World"]

Of course, if you don't use any interpolations, you will have one element inside this array, the entire passed string.

The next argument will be my first interpolation, here it's a constant string: Timothee.

So if we have n interpolation in our template string, we all have n+1 elements in our first array, and n more arguments passed to the function.

Cool, but how is it useful?

Whenever you need to apply transformations to a string with interpolation (aka dynamic values), this can be very useful.

For instance, you could build a template engine respecting the native semantics of es6

html`<h1>Hello ${name}</h1>`;

Actually, this already exists: https://lit-html.polymer-project.org/

In the react context, this technique is used to generate pre-styled components from CSS code for CSS-in-js solutions as emotion or styled-components.

const PrestyledComponent = styled('div')`
/** real css here */
background-color: blue;
`

// usage
const Fragment = <PrestyledComponent />

How can we type tagged templates

In typescript, we can add type information to our tagged templates:

function tagged(strings: TemplateStringsArray, ...args: boolean[]){
  console.log(args)
}

The idea is to type the first argument as the TemplateStringsArray type and the subsequent interpolations to whatever you need.

Let's take an example. Let's say you want to have auto-completable access to your theme from a styled component

export const theme = {
  'colors.hello': true
}

export type ThemeKeys =  keyof typeof theme


function themedStyled(strings: TemplateStringsArray, ...args: ThemeKeys[]){
  console.log(args)
}


themedStyled`
  background-color: ${};
`

And you got auto-completion of your theme keys for free!

That's it for today. Till next time!

Awesome React-Hooks - Part 2 - useEffect

Timothée Clain — Thu, 01 Nov 2018 18:33:34 +0000

This post is the second in a series about React hooks.

Part 1 :

Awesome React Hooks, part 1, useState

Timothée Clain

#reactreacthooks

In the last post, we saw how to use the useState hook in React 16.7+. Today let's learn about useEffect

TLDR

useEffect take a callback function as arguments that will be re-run after each rerender of your functional component.

If this callback returns another function, this function will be called on the component unmount.

useEffect, can take a second arguments: any[], that is a list of dependencies that should trigger a rewrite. These dependencies can be a prop, or another state produced by setState.

Example with a persisted counter

Let's say we take our counter increment as before and we want the value to be persisted in localStorage,

we could use useEfffect for this.

As a reminder, here is our base code:


import React, {useState, useEffect} from 'react'
function Counter() {
  const [counter, setCounter] = useState(0)
    // persist logic will be here
  return {
    counter, 
    setCounter
  }
} 

export const App = () => {
   const {setCounter, counter} = Counter();
  return <button onClick={() => setCounter(counter + 1)}>Change {counter}</button>
}

The Counter function define a useState hook to store our counter value.

If we are defining :

 useEffect(() => {
      window.localStorage.setItem('counter', counter)
  })

The setItem operation will be run after each rerender.

We have one step left, to populate the counter value with the value from localStorage for the first time.

  const [counter, setCounter] = useState(JSON.parse(window.localStorage.getItem('counter')) || 0)

The whole example can be found here:

https://stackblitz.com/edit/react-use-effect-hook?file=index.js

Cleanup function

If you return a function from the useEffect callback, this function will be cleaned. This is super useful if you need to unsubscribe from global events ... and so on.

Practical Example

Let say we got an async search box that displays the user list from GitHub.

We could use the combination of useState and useEffect to fetch dynamically the list from the query entered by the user.

As we did it before, let's create a custom hook function.


function useGithubUsers() {
  const [query, setQuery] = useState("")
  const [results, setResults] = useState([])
  const [loading, setLoading] = useState(true)
// side effect here
    // exposing only public api !
    return {
        query, setQuery, results, loading    
    }  
}

So we are basically declaring three variables: query (the current query search
), results (an array of Github users), loading (a loading indicator).

Here how we could use this custom hook:

export const App = () => {
  const { setQuery, query, results, loading } = useGithubUsers();
  return <div>
    <input onChange={e => setQuery(e.target.value)} />
    <ul>
      {loading && <li>Loading</li>}
      {
        results && results.map((item, index) => <li key={index} >{item.login}</li>)
      }
    </ul>
  </div>
}

What's cool with hooks, we can reason very easily about the lifecycle of our data.

Here, if we insert the useEffect Hook between useState declarations and the return function, the side effect after all state will be changed and the component rerender.

Let's fetch (pun intended) the GitHub users using the search API from github.com.

 if (query !== "") {
      setLoading(true);
      fetch(`https://api.github.com/search/users?q=${query}`, { method: "GET"}).then(req => {
        return req.json();
      }).then(data => {
        setLoading(false)
        setResults(data.items)
      })
    }

If you would run this code directly, you would have a big problem, cause the useEffect is rerun after each rerender (aka infinite loop in this case), so you'll need to use the second argument of the useEffect function that takes an array of variables that need to change to run this effect (a la shouldComponentUpdate)

    setEffect( () => {...}, [query])

If you provide an empty array, any code inside the effect would run only once when the component mounts, and any code inside the dispose returned function would run only on the unmount of the component.
By the way, you could use a prop here, giving you a neat way of reacting to props change!

The resulting code is :

import React, { useState, useEffect } from 'react'
import { render } from 'react-dom'
import Select from 'react-select';
import debounce from 'lodash.debounce';


function useGithubUsers() {
  const [query, setQuery] = useState("")
  const [results, setResults] = useState([])
  const [loading, setLoading] = useState(false)
  // each rerender
  useEffect(debounce(() => {
    if (query !== "") {
      setLoading(true);
      fetch(`https://api.github.com/search/users?q=${query}`, { method: "GET"}).then(req => {
        return req.json();
      }).then(data => {
        setLoading(false)
        setResults(data.items)
      })
    }
  }, 300), [query])
  return {
    query,
    setQuery,
    setLoading,
    results,
    loading,
  }
}

export const App = () => {
  const { setQuery, query, results, loading } = useGithubUsers();
  return <div>
    <input onChange={e => setQuery(e.target.value)} />
    <ul>
      {loading && <li>Loading</li>}
      {
        results && results.map((item, index) => <li key={index} >{item.login}</li>)
      }
    </ul>
  </div>
}


render(<App />, document.getElementById('root'));

You can test it live here:

https://stackblitz.com/edit/react-use-effect-hook-github?

Github has some rate limit on this API so if it does not work, wait a minute and retry.

Of course, this example is trivial and very basic.
Nothing prevents you to abstract a little more and reuse it for AJAX Requests :-)

In the next post, we'll see how to optimize this logic by using the memoization hooks.

Awesome React Hooks, part 1, useState

Timothée Clain — Tue, 30 Oct 2018 15:48:27 +0000

So, if you follow the react community right now, we are on fire !

Please welcome an incredible thing for functional components: hooks

What is a hook ?

Till now, we, react developpers, made the distinction between stateless components (functions) and stateful ones (classes).

With hooks, we got a set of primitive that will help us to interact with local state, side effects, ... for functional components.

This post is the first in a series that will cover the available react-hooks.

useState hook

Let's start with a very useful and easy one:

useState

Hooks are available from the 16.7.0-alpha.0 tag onward on npm, so you can run:

npm install --save react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0

or use a online editor to test 'em:

(playground)[https://stackblitz.com/edit/react-avqzi1]

With this trivial example, we can demonstrate the main features of the useState hook:

import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

When we call useState(initialValue: any), this will return an array of 2 elements:

first the actual current value of the data
second is a function that let you change the data.

At first the count is equal to 0, and each time we call setCount(count + 1), a rerender will occur !

If you ever used withState from recompose, this is basically the same things except:

this is much simpler to reason about
you don't complexify your tree with another layer of indirection,

One thing to note is that the generated state is isolated. With Hooks we are able to reuse state logic and not state data.

So if you call again useState (or use generated useState from a custom hook [more of this later] ), you will refer to another data cell !

Concrete Application: Validation

The most interesting part is that I can generate a hook from another function that could be reused in differents components.

As useState is mapped to the 'rerendering' lifecycle of the component, we can reason about it very easily.


function setWithValidation(businessRule, setValidated, setData) {
        // simple IOC
        // create a new function that is able to set validated state and change the data value
        return newValue => {
            setValidated(businessRule(newValue))    
            setData(newValue)
        }
}

function withValidation(businessRule) {
    return initialData => {
        // create an data cell for the main data we need
        const [data, setData] = React.useState(initialData)
        // create a data cell for the validation state
        const [validated, setValidated] = React.useState(businessRule(initialData))
        // return in a nice object, the data, a modified set function and the validated state
        return {data, set: setWithValidation(businessRule, setValidated, setData), validated}
    }
}

Now I have a flexible data cell that can validated !
The usage is trivial:


function isEven(value){ return value % 2 === 0}

const useEvenData = withValidation(isEven)

function Example() {
  // Declare a new state variable, which we'll call "count"
  const {data, validated, set} = useEvenData(0);

  return (
    <div>
      <p>You clicked {data} times</p>
        {validated ? <p>The number is even</p> : <p>The number is odd :-(</p> }
      <button onClick={() => set(data + 1)}>
        increment
      </button>

      <button onClick={() => set(data -1)}>
        decrement
      </button>
    </div>
  );
}

You can try it here:

Online example

Beware, you cannot use a hook outside a context of a component. Also place it at the top level of your component (not inside a loop, conditionnal...)

That's it ! Feel free to comment and see you in the part 2, with side effects hooks.

Awesome React-Hooks - Part 2 - useEffect

Timothée Clain

#react#reacthooks

Links

https://reactjs.org/docs/hooks-intro.html
https://reactjs.org/docs/hooks-overview.html

DEV Community: Timothée Clain

The post-bootcamp bootcamp

{ES/TS} bit of the day: Typed Tagged Templates

Tagged What?

An example please!

So what's the magic actually?

Cool, but how is it useful?

How can we type tagged templates

Awesome React-Hooks - Part 2 - useEffect

Awesome React Hooks, part 1, useState

Timothée Clain

TLDR

Example with a persisted counter

Cleanup function

Practical Example

Next

Awesome React Hooks, part 1, useState

What is a hook ?

useState hook

Concrete Application: Validation

Awesome React-Hooks - Part 2 - useEffect

Timothée Clain

Links