Forem: David Leuliette 🤖

5 simple steps to use pricmic.io with Nx and Next.js

David Leuliette 🤖 — Thu, 13 Oct 2022 20:10:14 +0000

For my brand new website I wanted to use prismic as I do on my personal website. Both are Next.js project, the prismic documentation is pretty neat, so what could go wrong?

A rare picture of a monorepo by @clembazard on Unsplash

The problem I am using Nx — an awesome tool for handling monorepo complexity — and the folders architecture is not really what expect the new slicemachine feature from prismic.

# What I have

./apps/weshipit/next-*.files
./node_modules/
./package.json

# What slicemachine want

./next-*.files
./node_modules/
./package.json

Here are 5 simple steps to solve this problem.

Create manually the types on Prismic

As I said using slicemachine is tricky in a monorepo. I am not the only one who is struggling with that.

If I use npm run slicemachine —after the setup— at the root level. I encountered issues.

If I use npm run slicemachine —after the setup— at project level. I encountered issues.

So I decided to…

🥁

Create new repository with “another framework” — because slicemachine does not plays well with Nx architecture.

add a framework on prismic.io

And choose plain React.

Don’t panic we are going to use SRR feature from Next.js later in this article.

Select React.js

Finally, manually create your new type.

Install Prismic to your Nx monorepo

Run this command in your terminal to install the Prismic React integration and client library

yarn add @prismicio/react @prismicio/client

Create your API client

// ./apps/weshipit/pages/api/prismic.ts

import * as prismic from '@prismicio/client';

// Fill in your repository name
export const repositoryName = 'weshipit';

export const client = prismic.createClient(repositoryName, {
  routes: [
    {
      type: 'client',
      path: '/',
    },
  ],
});

We want to have the PrismicProvider component available in our entire project by updating _app.tsx

// ./apps/weshipit/pages/_app.tsx 

import { AppProps } from 'next/app';
import Head from 'next/head';

import { PrismicProvider } from '@prismicio/react';
import { client } from '../prismic';

function CustomApp({ Component, pageProps }: AppProps) {
  return (
    <PrismicProvider client={client}> <------- add this
      <Head>
        <title>weshipit.today — React Native Experts</title>
      </Head>
      <main>
        <Component {...pageProps} />
      </main>
    </PrismicProvider>
  );
}

export default CustomApp;

Create a local /api

Following Next.js the documentation

Any file inside the folder pages/api is mapped to /api/ and will be treated as an API endpoint instead of a page.

That’s what I created to get my data to render the list of my clients.

// apps/weshipit/pages/api/client.ts

import { client as prismicClient } from './prismic';

export async function getAllClients() {
  try {
    const clients = await prismicClient.getAllByType('client');

    return {
      clients: clients ? clients : [],
    };
  } catch (error) {
    console.error('getAllClients -> error', error);
    return error;
  }
}

getInitialProps and render data to your page

I can pull the data to render my clients page.

// apps/weshipit/pages/clients.ts

export default function ClientsPage({ clients }: clientsPageProps) {
  return (
    <div>
      {clients.map((client) => (
        <div key={client.id}>
          <Text>{client.data.name}</Text>
        </div>
      ))}
    </div>
  );
}

ClientsPage.getInitialProps = async function () {
  const clients = await getAllClients();
  return clients;
};

Release to prod

The last step is releasing to production. Using vercel on the project settings page you will need to override build settings.

Build command

npx nx build weshipit --prod

Output directory

dist/apps/weshipit/.next

This is not perfect, but it’s working and weshipit.today

Spotify Mixtapes For Coding

David Leuliette 🤖 — Sun, 25 Apr 2021 13:14:58 +0000

Curated mixtapes

Last year, I published my growth hack technique to get some followers on Spotify.

I reached 12 playlists and I hope it will help some of you to get "into the zone" and release amazing products to production!

The List

👉 Discover all my curated playlists for programming

Supporting Huawei store for Android application

David Leuliette 🤖 — Thu, 15 Oct 2020 16:15:37 +0000

I am a Freelance React Native developer, I noticed a weird bug on the phone of my client —a Huawei P30— the app seams not getting the updates from the Google Play Store 🤔

Apparently you can open a developer account on https://developer.huawei.com/

Supporting 2 stores (Google Play and Apple Store) is already a big task in terms of bugs and deployment infrastructure.

I am just looking for some inputs from the community about this, as a mobile developer would you support third part stores ?

(And in the near future probably the Epic store and the others)

How to get 4000+ followers on Spotify

David Leuliette 🤖 — Mon, 27 Apr 2020 08:29:49 +0000

If you know me personally, you may have noticed that I have a passion for music. I am always keen on going to music festivals to see live gigs.

That’s why I am a paid Spotify user since day one.

When I am working, I am always listening to some music for getting in the zone.

I started to create some playlist for focusing on my work during my coding sessions. During the process, I followed a growth strategy.

Nowadays, I am contacted by artists themselves to add some music, was interview on specialized websites and even getting paid to promote artists on my playlists.

SEO growth hack on Spotify

First of all, I choose a keyword: Mixtape

Second keyword: coding

when you hit 50 sounds, create a new playlist by adding a new keyword.

On my case I have:

Mixtape for coding
Rock Mixtape for coding
Movies Mixtape for coding
Electro Mixtape for coding
…

Simple right?

All my playlists are available on my website.

Curated music for focused work

Design template for your playlists

Famous Youtubers spend hours to create the thumbnails of their videos.

In my case, I used Figma with nice colored gradients.

Here is the Figma Template. If you want to use it, feel free to duplicate

Figma - Spotify Playlists Template

That’s it for today.

Don’t forget to send me your playlists, I am always looking for new sounds.

How to build DIY ergonomic desk for less than 99€

David Leuliette 🤖 — Sun, 05 Jan 2020 14:16:45 +0000

Improve productivity and health.

As a freelance React Native developer, My weekly routine is working 4 days per week for a client based in London, and one day per week — on-site — in for a French client. Since I am working remotely mostly from home , I needed to have a decent office.

You can design your perfect productive environment

I had 2 constraints: budget and space. There is tons of affordable desk available on the internet but they are not working on my case because:

I am super tall (1m98)
I just moved back to France into my girlfriend’s flat and I don’t have a dedicated room to work.
I need to fix my desk on one wall.

Step 1: Collect materials

If you want to make your own DIY desk, just start by taking the measurement for the woods boards. In my case, space is a big requirement , so I choose to have only one big metal adjustable foot. I found the GERTON one on IKEA.

I cheated a little bit at this point, because my parents are living in the countryside. They helped me with the painting and cutting the wood boards. And they have all the tools whereas in my flat in the city I don’t have a garage.

Painting in progress

As a design Engineer, I didn’t forget to add an Apple-style curve to one of the edges. Back home, I had everything ready to fix on the wall.

Need to find the prefect wall for this

Recap:

2 wood boards
2 wood rails
2 metal
8 ankles for plaster
1 adjustable metal foot
(optional) White painting

All theses materials should cost less than 99€, my biggest expense was the ajustable metal foot 39€.

Step 2: Ergonomic metrics

Do you know there are rules for ergonomics desks? I worked for ages in different companies in an open space where these rules are simply ignored. I understand that at scale, people in charge of furniture are using excels spreadsheets to calculate budgets. And they often choose the less expensive solution who’s going to work for most of the people.

According to this ergonomic calculator website, with a height of 198cm, my desk should be 80cm high, and my chair should be 53cm high (distance from the floor to seat).

Desk height: 80cm
Height of chair: 53cm

Just found the perfect wall

After fixing the ankles and the 2 wood rails you are ready for the last step: fixing the adjustable foot.

Et voila

*Pro-tip * : Don’t forget to cut one edge for the cables when you have all the tools available.

Always have a swiss army knife at home

Step 3: Add a Giant Screen (not included in the price)

You are now ready to work, just add a giant screen, a timer and some cables.

32 inches screen fits almost perfectly

Bonus Step: Find the perfect chair

This article is for people who don’t want to spend a lot of money BUT you need a decent chair because you are going to spend a lot of time in front of your screen.

I spend some time searching for chairs on eBay and I found the perfect one.

It cost me 120 €

One of the things I like being a freelance working remote is that you can design your perfect productive environment.

For my next office, I will definitely invest in a standing/walking desk if I have space. Working remotely is great because you don’t lose your time on commuting but you are living like a kind of a hermit. Don’t forget to go out for some exercice or even better go to the gym.

Your health is more important than your job.

What I learned at React Finland Workshop with Nik Graf

David Leuliette 🤖 — Wed, 08 May 2019 09:50:01 +0000

Is that a hook we are looking at? (Nick Tulinen)

Advanced React — Suspense, Time Slicing, Hooks, and more

If you are not yet familiar with React Finland, you should. Let me tell why: It’s like a summer camp. Each year, you can see familiar faces who are really excited to share their knowledge with the community. I like the format: one workshop day and two days of conference on a single track.

In this article, I am going to cover the workshop of Nik Graf: Advanced React with all the new buzzwords!

React — Reinvented

In the last months, React has changed a lot with some new features (not all are in a public release yet):

New lifecycle methods
Suspense and Time Slicing — Upcoming feature
Hooks
And more

In this context, Nik Graf ran a workshop for intermediate and experienced React developers.

All the materials can be downloaded on the GitHub repo 2019-react-finland-workshop.

Sketchnote with React Hooks and Performance in React (David Leuliette)

React Hooks

Hooks are everywhere. Since React 16.8 was released, it’s a hot topic in the react community. Things like class component and functional component are a thing from the past, long live function based components.

There are literally millions on content available on the internet to introduce react hooks but during this day this is what I learned:

useEffect can have 2 arguments. The first one is a function that contains imperative. The second can take an array of values that the effect depends on.
You can create custom hooks to share code, but try to follow a convention like useMyhook to be explicit.
useLayoutEffect for synchronous operations, but use it with caution because it’s blocking rendering and expensive operations can lead to a bad experience.

useLayoutEffect is perfect for auto-height textarea

⚠️ Pro tip: Don’t put hooks in loops or if…else. To avoid mistakes there is eslint-plugin-react-hooks for that.

If you want to dig on custom hooks Nik Graf built this cool website to collect all of them:

Collection of React Hooks

Performance

As in video games, we want a slick experience with 60 frames per seconds and 15 ms delay. When I am writing this article the react-devtool profiler is not the best for that. The Google Chrome profiler (console > performance) is better in this scenario.

In this example, we found our performance enemy: the function sometimesSlowCalculation.

⚠️ Pro tip: When you start to dig on performance start your journey by measuring what you are doing.

Sketchnote with Time Slicing, Suspense, and Context

Async React

In the second part of the workshop, we played with some unstable API. If you want to follow this path, repeat after me 3 times the next sentence:

I will not use time slicing in production

— First rule of the React Club

Time Slicing

Awesome react markdown preview application

Imagine you need to create a CMS application. 2 column layout and you want a nice writing experience with real-time feedback for the user.

On the left, you can edit markdown content and on the right, we have the preview in real time. For the we need to have a fast experience. On the other hand, we can delay the preview because it’s gonna be slow with huge content.

First, we need to create a new function deferredPreviewUpdate

<TextArea
  value={text}
  onChange={value => {
    setText(value);
**deferredPreviewUpdate(value);**
  }}
/>

Calling the function with unstable_LowPriority allows the rendering part to have a small delay. Just remember, this code is experimental for now, but it was a great introduction to the concept of time slicing.

function deferredPreviewUpdate(text) {
  **unstable\_runWithPriority(unstable\_LowPriority, function() {**
    **unstable\_scheduleCallback(unstable\_LowPriority, function() {**
      const content = markdownToReact(text);
      setPreview(content);
    **});  
  });**  
}

Check the full example in part 5-time-slicing.

If you want to dig more on how scheduling in User Interfaces, I recommend this article by Philipp Spiess:

Scheduling in React

React.lazy and React.Suspense

The Suspense API allows components to “wait” for something before rendering. When I am writing this article Suspense works only with one scenario: loading components dynamically with React.lazy.

In the future, Suspense will support other use cases like data fetching.

On this exercise, I used react-apollo-hooks and it looks promising. Instead of using this classic loading state to display the loading like this:

if (loading) {
  return <div>Loading …</div>;
}

You can 2 things. First, add another param to you GraphQL query:

const { data, error } = useQuery(profileQuery **, { suspend: true }** );

Second, add a fallback loading component:

<React.Suspense **fallback={<div>Loading...</div>}** >
  <Profile />
</React.Suspense>

You can check the diff on the exercise on GitHub:

Add Suspense · flexbox/2019-react-finland-workshop@63ddbbc

Cascading loading experience

⚠️ Pro tip: This feature is not yet available for server-side rendering.

Code Splitting

Code splitting your app can help you “lazy-load” just the things that are currently needed by the user, which can dramatically improve the performance of your app.

— extracted from https://reactjs.org/docs/code-splitting.html

In this exercise, we used the code splitting feature to reduce the size of the bundle of our app.

⚠️ Pro tip: You don’t need to code split everything. Sometimes a single HTTP request with one big file is enough.

Context

The context API can be used as your global store, aka you don’t need Redux for everything. That said use best to learn the pros and cons before jumping ship.

Check what Nik is saying about it at React Finland.

Take the example of a profile page. For a currently authenticated user, the avatar is not often updated. It’s a perfect use case for using context because it solves the classic problem of props trilling.

In the context exercise, we worked on theming React applications. First, you need to create a context like ThemeContext :

//ThemeContext.js

import React, { **createContext** } from "react";

export const themes = {
  dark: {
    foreground: "#fff",
    background: "#666"
  },
  light: {
    foreground: "#222",
    background: "#eee"
  }
};

**const ThemeContext = createContext({**
  theme: themes.dark,
  toggleTheme: () => {}
**});**

export default ThemeContext;

After that, in this example, we are using hooks to use the context.

// Toolbar.js

import React, { **useContext** } from "react";
import Button from "./Button";
import ThemeContext from "./ThemeContext";

function Toolbar() {
  **const { toggleTheme } = useContext(ThemeContext);**

return (
    <>
      <Button onClick={ **toggleTheme** }>Toggle Theme</Button>
    </>
  );
}
export default Toolbar;

⚠️ Pro tip: Remember that when using useContext , every change in the context store will trigger a re-render of all the components where it’s used.

I really enjoyed all the different exercises. It was a great workshop and now I am more confident with the usage of Hooks in React.

As a recap, here is the list of the exercises:

useEffect and useRef
custom hooks and useDebugValue
useLayoutEffect
Performance
Time slicing
Suspense
Code splitting
Context

You can clone the repo https://github.com/nikgraf/2019-react-finland-workshop to do your homework. 🙂

If you are interested to level up your knowledge in the React ecosystem, subscribe to the newsletter to receive pre-sales early-bird access for the next edition.

👋 See you next year!

Kondo your Mac

David Leuliette 🤖 — Tue, 26 Feb 2019 00:30:05 +0000

How to setup a distraction free macOS to focus on shipping code

Last week, I was chilling on Netflix and I found one famous TV Show with Marie Kondo. She’s a Japanese organising consultant and author. Organising… Consultant… Wow! We are really living in exciting times…

And then I found this great article by Rubens Cantuni about organizing your sketch files.

I got hoocked.

Before opening my own agency of cleaning consultant, I decided to share with you my best hacks to tidy your Mac and transform your developer life.

Your real life begins after putting your house in order.

– Marie Kondo

Spark joy in your terminal

As a developer, I spend around 1h / day in the terminal. That’s literally my remote control for everything. My awesome and well-organized naming framework for my coding projects is this one:

~/workspace/\<CLIENT\>/\<PROJECT\_NAME\>

I am using iTerm2 to split, and navigate across projects and files. And if you are using the script z — jump around, you are literally 125% more effective than people using the keyboard + mouse combo.

refined theme for iTerm2

I have plenty of shortcuts thanks to oh-my-zsh –with this clean theme called refined– to be super efficient. If I need to keep only one productivity hack , I would definitely choose this: Launch your editor form the terminal.

// Sublime Text
st .

// Atom
atom .

// VSCode
code .

Everything has its place in your Finder

Let’s face it, the proportion of mess on your machine is exponential. If you don’t set some rules at the beginning, after 1 month your new shiny computer is full of crap.

Your computer is infected

Here is my Shinto Workflow for cleaning and organizing files properly:

Add Favourites

Open your terminal and write open . to open the finder. Remove all the distractions links and add the favourites ones like this.

Create a screenshot folder

By default, all your screenshot are saved on your desktop. I changed that for another folder called… Screenshots.

# Save screenshots to the Screenshot (or elsewhere)
defaults write com.apple.screencapture location ${HOME}/Screenshots

Store vertically

You can’t do 2 things at the same time. So why are you keeping the dock with all the applications available on your Mac? You can launch them with your keyboard thanks to spotlight and the shortcut ⌘ + space.

Marie Rondo says storing vertically will save space and allow your belongings to become more eye-catching. Let’s hide our dock when we don’t need it with a left vertical position.

Custom Window Organizer

Windows users are going to love this one: you can tilling and organise your applications since a long time with windows + →.

On macOS we have the fullscreen mode. But it’s not really powerfull, and it’s complicated to assign keyboard shortcuts to be effective.

Split your screen

I am using Divvy since ages to fix this issue, I can split my screens and I have differents shortcuts for my needs: full screen, half-left, top-right... You can pick-up any windows manager to “Hikidashi” your working days.

Clean your menu bar icons

Everything you own needs his own designated space. Dozer is a little application to hide icons on your menu bar. With this hack you can finally get rid of the spotlight icon! The easiest way to install it is with brew.

$ brew cask install dozer

You can check on GitHub the installation notes.

Before:

After:

Tidy by category

Yes! I am looking at you modern full stack developer! I know you have the hype and can solve the cancert problem with JavaScript, but in my opinion, you have too many tabs opened.

That means a lack of focus and we are going to be late for the mars missions because you are not focus.

soooooooooooooooooooooooooooooooo many tabs opened

You can pin tabs if you want to keep something, and try to organise your browsing experience by category :

Google Chrome: Work emails and backlog in ZenHub
Safari: React Native releases on app Store and play store
Google Chrome Canary: Personal emails and youtube
Firefox developer Edition: Main browser for everything else

At least here I can quit / restore tabs depending on the context

After theses small hacks you gonna have the same kind of zen distraction-free laptop, ready to focus and ship code!

📝 Read this story later in Journal.

Simple release worflow for react native with expo

David Leuliette 🤖 — Tue, 10 Jul 2018 14:29:06 +0000

Just push a button

How much time it takes to release a React Native application to the iOS App Store and Android Play Store

It’s 2pm and my delivery manager is asking me to release our React Native application to the iOS and Android stores.

“Great! I am happy to release our application, just for your information, this will take an entire day.”

“What are you saying? It’s just pushing a button.

I don’t see why it’s so long?”

I made a drawing for you. I think now you can see why it’s a long process 😉

First of all, there are 2 main application stores (Apple and Google). The release process is a little bit different for each, and the testing workflow is different as well. In this article, I am going to cover a specific scenario: How to release a React Native application with a standalone build from expo.

`create-react-native-app` versus `react-native-cli`

If you are in charge of releasing your react native application, you need to understand 2 different application architectures generated with your CLI.

create-react-native-app

According to the official documentation, this solution is the simplest one. You can run your application on any OS with no build config. Xcode or Android Studio are not required. You just have to install another amazing tool called expo.

react-native-cli

If you want to use custom component for each platform or add React Native code into your existing application you are probably using this solution.

If you are looking for the workflow when you have “ejected” from expo, I hightly recommand theses 2 articles from the legendary Gant Laborde 🦄

Building a standalone app with expo

It’s 2pm and a half because of the coffee break and you are ready to deploy. Let’s do this!

Check the dependencies and run the build:

yarn
exp build:ios

This first task takes — at least — 30 minutes. I am lucky, at the office the connection is fast.

I have an idea, maybe I can run the android build in the meantine.

Bad news rookie. At the moment with expo, you can’t build for iOS and Android at the same time.

35 minutes later

Yeah! Build successful!

The application is available on expo servers, now I need to download the .ipa file. I am a developer, I can’t be bothered with mouse clicks on a website. Let’s open a terminal and download the build with curl .

curl -o app.ipa “$(exp url:ipa)”

28 minutes later

Download done!

Now I need to upload the .ipa file with Application Loader to the apple store servers (Because I don’t need to use Xcode with standalone builds).

34 minutes 55 seconds later

Build uploaded!

Guess what?

I can’t push the button yet, because my app is analysed by robots.

Your build is not available yet for your QA team

10 minutes 12 seconds later

My build just disappeared from Testflight! 😱

Listen to me rookie, releasing a native application is a complex task. You have no idea how works the replication of your build accross all the CDN’s in the world! Give me some time to process your build.

The good new is, you can follow the progress in the activity tab.

Still processing

Probally less than 10 minutes later

Your app is back again!

But you have small extras steps to do: Provide export compliance information. It’s simple, you just need to push a button.

Push another button for the iOS release

Straight after accepting the compliance your app should be available for your testing team 🎉

But wait a minute. I am not going to repeat this workflow everytime.

My friends know me as an automation machine. I wrote this little script to half-automate the process of releasing our react native application with standalone expo build.

Create a new file and run this script from a terminal

./bin/ios

It’s 5pm and your application is released for your end users!

Are you sure about that?

Rookie, you forgot the android version. You need to run the same script for your .apk

Even if the engineering team working on expo is the best in the world, you need to test on real devices. Developing with expo XDE is fine, but you can’t rely on the emulator for testing.

By the way, If you don’t have a release note and a testing team, there is no point to deploy.

Creating a slick testing workflow

Testing your application with the real world is hard. Expo is a great solution for developement but it’s not exactly the same as using the final build delivered to your users.

It reminds me this talk: “A new version of Firefox is available”. The mozilla team have 4 differents release channels Nightly, Aurora, Beta and Release.

The release workflow for Firefox @FOSDEM

The mozilla team have a routine: every Tuesday at 3pm it’s release day! Builds are deployed in release channel for millions of users.

Maybe we can follow this weekly routine? The last version is released in production every x week, and we have 2 differents channels for developement and quality insurance.

Fun part: the worflow for testing your standalone app is different on the 2 platforms.

iOS and android are 2 differents worlds

How to onboard testers for iOS

Add fullname and Apple ID on https://appstoreconnect.apple.com/ Apple store connect > Users and Roles
Download Testflight

How to onboard testers for Android

Add fullname and Google play account on https://play.google.com/apps/publish/ Google Play Console > Manage testers > Create list

It’s your lucky day rookie, you didn’t have problems with updates of npm packages, screenshot issues on the app store or release notes.

Your app is deployed. Remember the lesson of the day:

Deploying an app to the store takes–at leat–one day

Notes: You can use Over the Air Updates to bypass the validations in the stores and speed up the deploy deploy. But you have some limitations.

I hope this motivates you to start building the perfect workflow for releasing your React Native app. Just drop me a message if you have any questions — I would be glad to help you!