Forem: Demily Clément

Recoding my portfolio using Gatsby 🤘

Demily Clément — Tue, 11 Aug 2020 07:21:43 +0000

Hello everyone ! 👋

In this article I will give you feedback on my portfolio's develpment with JAMstack using Gatsby.

A little background

I have a personal website / blog / portfolio for the past 10 years ... where I occasionally write my moods, tech favorites and tutorials. (mostly in French)
Over time, this project has been used as a sandbox to learn new skills.
In 2010, a first version was created with Wordpress hosted directly in-house 🤘 It was roots, but it allowed me to see how PHP, MySQL, Apache2 worked ... in short, everything you need to host a web application.
Then around 2013 changed to Jekyll, which allowed me very quickly to familiarize myself with the Ruby environment (and its ecosystem like Gem and Bundler ).
We are now in 2020, and it's time to change and ride the JAMstack hype train! 🚞

Why Gatsby?

To begin, I really like using React. I hesitated a bit to use Create-React-App, being familiar with this tool (at Picto Acccess, we use this boilerplate for some of our apps). Having heard more and more about the JAMstack, I told myself that it was the ideal paradigm to give my portfolio a fresh look!
I looked around and chose Gatsby because of the many benefits it offers:

A growing community (more than 46k stars on Github)
A wide choice of plugins / themes are available directly on the official website
It's easy to get started (especially if you are familiar with React!)
Improved performance (obviously ... since it is a static site)
Has a lot of similarity with CRA: hot reloading, a development environment very easy to use and a ready-to-use build script. 🙌
GraphQL support: A GraphQL server runs alongside your application, allowing you to retrieve all kinds of data related to your project.
Evolution: with all the different plugins, I could possibly upgrade my static site using a Headless CMS for exemple.

Gatsby themes

Show-time !

Here's the link to my new portfolio, in French. (I'll play with some i18n plugins later !). Feel free to give me some feedback!

Where to start ?

The documentation for Gatsby is clear: here. You'll find a tutorial as well as a "Quick Start" part.
If you don't want to start "from scratch", you can use the starters offered by Gatsby, or even use Stackbit which allows you, in a few clicks, to generate a complete site.

Deployment & hosting 🧙🏼‍♀️

Gatsby ultimately generates static files, therefore you’ll have plenty of choice to host them.

As for me, the old version of my personal site was hosted using Github Pages. This is a free solution, powered by Github. You can have have private repositories with a free account, it's a solid option. You'll find here the documentation to host your static site on Github Pages.

For this new version, I chose to host my application using Netlify. Netlify offers different services including automatic SSL certificate generation (HTTPS), CDN, continuous integration and also what they call "notifications", which allows you to integrate forms on your static site (limited to 100 notifications per month for the free version).
Netlify also takes care of building & deploying your application from a simple push to your master branch, just like Github Pages.
Best of all, the integration is very easy: just click on the "New site from Git" button on the dashboard and choose the right repository. You can add a few more configurations, if you wish ... and that's it!

Conclusion

I strongly recommend you to test Gatsby, which for me offers good benefits by removing a bunch of constraints related to setups, builds & deployments, which ultimately allows us to focus on what really matter.

Thanks for reading and good code! 👋

Resources

Docker + bash : This tip can save your time ! ⏰

Demily Clément — Mon, 03 Aug 2020 07:05:45 +0000

Today, I'm going to give you a tip on an inattention error with docker that cost me few minutes of my time!

This advice is intended for beginners with docker.

Introduction

There are quite a few kinds of docker images, we'll take the ruby image as an example.
As you can see, there are different types of images available: buster, slim, alpine, stretch, ...

Some of these images are based on particular distributions, much lighter (alpine), others come with larger OS & dependencies.

To package and deploy my application, I chose to use an alpine image. This image has minimum dependencies & pre-installed packages, and therefore ideal for deployment.

The problem

When you create your dockerfile, you have the option of using the ENTRYPOINT &CMD directives at the end of your file. These directives allow you to execute commands and to call scripts that you could have previously created.

If you are used to using bash to execute your script, you must have written the following line in your script file header: # /bin/bash.
This tells the terminal (inside docker) to use bash to run this script.

# /bin/bash

echo "test"

When you launch docker with the dockerfile, it might doing nothing: no script starts, leaving you without an error message. 😨

The solution

As said before, the alpine images are very light and do not embed superfluous dependencies. You must either install bash using the RUN directive in your dockerfile:

  RUN apk add --no-cache bash

Either change your script to make it compatible with the sh shell:

# / bin / sh

echo "test"

Hope I have been clear on how to fix this.
I wish you all a happy coding ! 🐳 ✨

Development and productivity tools on Mac 👩‍💻 👨‍💻

Demily Clément — Fri, 24 Jul 2020 09:57:31 +0000

Hello everyone ! 👋

I recently had to re-install my development environment on Mac. I took the opportunity to sort out the utilities & software that I use on a daily basis. So I share with you this list of tools that allow me to be productive!

How

We will first install Brew, then we will configure our new terminal (iterm2).
Then we will install some interesting extensions of visual studio code.

Brew

Brew is a package manager for mac. It allows you to install command line programs as well as graphics programs. I offer you a small list of utilities & software that I use daily.

brew install \
  nvm # node version manager
  nmap # network utils
  curl # make resquests via terminal
  jsonpp # json pretty print
  imagemagick # image utils
  catimg # cat image in terminal
  dive # inspect docker images
  git # Source Control Manager

brew cask install
  cakebrew # homebrew GUI
  google-chrome # web browser
  visual-studio-code # IDE
  imageoptim # optimize pictures utils
  mtmr # touchbar utils
  postman # request API utils
  graphiql # same as postman, but specific for graphql
  docker # Docker desktop
  iterm2 # Alternative terminal
  psequel   # Postgres GUI interface

Iterm2 configuration

Oh my zsh is an open source framework that allows you to easily manage your zsh configuration. You can install themes, plugins ...

Setup

Open Iterm2, and install oh my zsh.

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

then advise you to install the "Powerline Fonts" fonts (here)

You will then have to change the preferences and themes directly on iterm2 ("session" menu) to choose a theme that you like with a "Powerline Fonts" font.

Vscode configuration

Install extensions

You will find here several types of extensions:

Support for languages & snippets (jsx, toml, js, react, rails)
Themes & graphic enhancement (material theme, bracket pair colorizer, LogFileHighlighter, rainbow-csv, ...)
Productivity (json-pretty-printer, vscode-eslint, guides, vscode-wakatime, ...)
git utilities (gitlens, git-graph)
New features (gc-excelviewer, vscode-docker, vsliveshare, ...)

File: vs_code_extensions_list.txt

blanu.vscode-styled-jsx
bungcip.better-toml
CoenraadS.bracket-pair-colorizer
DavidAnson.vscode-markdownlint
dbaeumer.vscode-eslint
eamodio.gitlens
emilast.LogFileHighlighter
Equinusocio.vsc-community-material-theme
Equinusocio.vsc-material-theme
equinusocio.vsc-material-theme-icons
euskadi31.json-pretty-printer
esbenp.prettier-vscode
formulahendry.auto-rename-tag
GrapeCity.gc-excelviewer
HookyQR.beautify
Hridoy.rails-snippets
karigari.chat
kisstkondoros.vscode-gutter-preview
mechatroner.rainbow-csv
mhutchie.git-graph
mikestead.dotenv
ms-azuretools.vscode-docker
MS-CEINTL.vscode-language-pack-fr
ms-vsliveshare.vsliveshare
ms-vsliveshare.vsliveshare-audio
ms-vsliveshare.vsliveshare-pack
slevesque.vscode-zipexplorer
spywhere.guides
TabNine.tabnine-vscode
WakaTime.vscode-wakatime
wix.vscode-import-cost
xabikos.JavaScriptSnippets
xabikos.ReactSnippets

First, run vscode & install vscode in the PATH (more info here)

Then, create the file vs_code_extensions_list.txt with the contents of the extensions. Then run the following command, which will install the extensions listed in this file.

cat vs_code_extensions_list.txt | xargs -n 1 code --install-extension

Vscode settings configuration

Here is an excerpt from my settings.json file, which you can use to configure your IDE & extensions.

{
  "window.zoomLevel": 1,
  "breadcrumbs.enabled": true,
  "workbench.colorTheme": "Dracula",
  "editor.fontSize": 15,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.wordWrapColumn": 100,
  "editor.minimap.enabled": false,
  "editor.smoothScrolling": false,
  "editor.minimap.showSlider": "mouseover",
  "editor.minimap.maxColumn": 120,
  "editor.cursorStyle": "block",
  "editor.cursorBlinking": "phase",
  "editor.insertSpaces": true,
  "terminal.external.osxExec": "iTerm.app",
  "terminal.integrated.shell.osx": "zsh",
  "files.associations": {
    "*.inky": "slim",
    "*.js": "javascriptreact"
  },
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true
  },
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/*/**": true
  },
  "[ruby]": {
    "editor.defaultFormatter": "jnbt.vscode-rufo"
  },
  "[json]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "gitlens.views.repositories.location": "gitlens",
  "gitlens.views.fileHistory.location": "gitlens",
  "gitlens.views.lineHistory.location": "gitlens",
  "gitlens.views.compare.location": "gitlens",
  "gitlens.views.search.location": "gitlens",
  "gitlens.advanced.messages": {
    "suppressLineUncommittedWarning": true
  },
  "files.autoSave": "off",
  "guides.enabled": false,
  "diffEditor.renderSideBySide": true,
  "extensions.ignoreRecommendations": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "git.confirmSync": false,
  "workbench.statusBar.visible": true,
  "git-graph.maxDepthOfRepoSearch": 2,
  "git.showPushSuccessNotification": true,
  "tabnine.experimentalAutoImports": true,
  "auto-rename-tag.activationOnLanguage": [
    "*"
  ],
  "terminal.integrated.fontFamily": "Roboto Mono for Powerline",
  "scm.inputFontFamily": "Roboto Mono for Powerline"
}

And There you go ! 👏

Do not hesitate to suggest tools that are useful to you on a daily basis!

Resources and useful links

Using GraphQL apollo client in Redux-Thunks actions

Demily Clément — Fri, 13 Mar 2020 15:15:30 +0000

Hi everyone 👋

React-Apollo is the go to library to use graphQL alongside React. Their documentation is really cool and comprehensive, but they promote the usage of React Hooks to perform all your requests.
Regarding your frontend architecture, you may not be thrill by the idea of letting all your React components handling these kind of responsibility.
In my case, we were integrating GraphQL within an existing frontend app with React, React-redux and redux-thunk. The code is written the way that all network API calls are executed via redux actions (using redux thunk).

Assuming you have knowledge of redux-thunk and React-Apollo, I will show some basic example of actions.

For these examples, I will use a public GraphQL API :

import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";
import { setContext } from "apollo-link-context";
import * as UserUtils from "../utils/user";

const cache = new InMemoryCache();
const link = new HttpLink({
  uri: `https://directions-graphql.herokuapp.com/graphql`
});

const authLink = setContext((_, { headers }) => {
  const token = UserUtils.getTokenFromLocalStorage();

  return {
    headers: {
      ...headers,
      authorization: token
    }
  };
});

const client = new ApolloClient({
  cache,
  link: authLink.concat(link)
});

export default client;

import gql from 'graphql-tag';
import graphQlClient from "client"

export const signUp = (username = "johndoe", email = "john.doe@test.com", password = "mypassword") => (dispatch, getState) => {
  dispatch(setLoading(true))

  graphQlClient
    .mutate({
      mutation: gql`
        mutation($username: String!, $email: String!, $password: String!) {
          signUp(username: $username, email: $email, password: $password) {
            user {
              id,
              username,
              email
            }
          }
        }
      `,
      variables: { username, email, password },
      update: (_cache, result) => {
        const { data: { signUp: { user: { username, email } } } } = result
        dispatch(signIn(email, password))
      },
    })
    .catch((error) => {
      console.log('error', error)
    })
    .finally(() => {
      dispatch(setLoading(false))
    })
}

const setTokenToLocalStorage = (token) => {
  localStorage.setItem('token', token)
}

const getTokenFromLocalStorage = () =>
  localStorage.getItem("token") || null;

export const signIn = (email, password) => (dispatch, getState) => {
  dispatch(setLoading(true))

  graphQlClient
    .mutate({
      mutation: gql`
        mutation($email: String!, $password: String!) {
          signIn(userIdentifier: $email, password: $password") {
              token
          }
        }
      `,
      variables: { email, password },
      update: (_cache, result) => {
        const { data: { signIn: { token} }} = result
        dispatch(setTokenToLocalStorage(token))
      },
    })
    .catch((error) => {
      console.log('error', error)
    })
    .finally(() => {
      dispatch(setLoading(false))
    })
}

export const direction = (coordinates = {startLat: 50.6333, startLng: 3.0667, endLat: 48.8534, endLng: 2.3488} , travelMode = "driving" ) => (dispatch, getState) => {
  dispatch(setLoading(true))

  graphQlClient.
    graphQlClient.query({
      query: gql`
        input PlaceCoordinatesInput {
          startLat: Float!
          startLng: Float!
          endLat: Float!
          endLng: Float
        }

        enum AllowTravelModes {
          transit
          driving
          walking
        }

        query($coordinates: PlaceCoordinatesInput!, $travelMode: AllowTravelModes!) {
          direction(coordinates: $coordinates, travelMode: $travelMode) {
            steps {
              stepInstruction
            }
          }
        }
      `,
      variables: { coordinates , travelMode },
    }).then((result) => {
      const { data: { direction } } = result
      dispatch(doSomethingWithDirection(direction))
    })    
    .catch((error) => {
      console.log('error', error)
    })
    .finally(() => {
      dispatch(setLoading(false))
    })
}

For the sake of the example I used default values for the actions parameters.
As you can see, you easily manipulate graphql apollo client inside redux thunks actions.

To conclude, I will share you some links to help you during your journey of learning GraphQL and react-apollo as well as the repository containing the source code of these examples.

Documentation :

Further reads :

Source code :

https://github.com/clementdemily/react-redux-thunks-apollo-graphql