<![CDATA[Stories by David Leuliette on Medium]]> https://medium.com/@flexbox?source=rss-cc5b33b54088------2 https://cdn-images-1.medium.com/fit/c/150/150/2*hTEmnV-auZyOvq_Wi8kJTw.jpeg Stories by David Leuliette on Medium https://medium.com/@flexbox?source=rss-cc5b33b54088------2 Medium Sat, 06 Jun 2026 13:07:17 GMT <![CDATA[5 simple steps to use pricmic.io with Nx and Next.js]]> https://flexbox.medium.com/5-simple-steps-to-use-pricmic-io-with-nx-and-next-js-c8051facbf54?source=rss-cc5b33b54088------2 https://medium.com/p/c8051facbf54 Thu, 13 Oct 2022 20:10:14 GMT 2022-10-13T20:26:20.656Z 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
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
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

]]> <![CDATA[How I wrote and published The Road to React Native book]]> https://flexbox.medium.com/how-i-wrote-and-published-the-road-to-react-native-book-7ca80fa2fd88?source=rss-cc5b33b54088------2 https://medium.com/p/7ca80fa2fd88 Tue, 12 Jan 2021 17:59:13 GMT 2021-04-25T14:56:14.586Z You may ask yourself, what are the different steps to create and publish a book?

In this article, I will show you the different tools I used, to write my book and grow my audience to get my first 30 sales.

Feel free to join our official launch on Zoom

Requirements (you will need to have an account on different tools)

Writing

I think I tried all the writing applications available. Ulysses app is just the best one.

I am writing this article on Ulysses, when it’s done I can just publish it on Medium. If I change my mind, I can export the content to .markdown, .pdf, or even .epub. This gives me the opportunity to be "platform agnostic" and quickly iterate on the content with a single source of truth.

From a pure content perspective, my React Native Book is about my experience as a coach during workshops and as a freelance engineer.

I started out naïve in 2016 and made all the little mistakes you could make.

It’s not a book about pure coding examples. O’reilly Books are already doing a really good job if you want to learn an entire entire programming language. My content is around the ecosystem, my experience as a coach and how I connected all the small dots to create and release mobile applications.

That’s my targeted niche, writing a pure technology book doesn’t make sense because all the API’s are changing every day in the JavaScript ecosystem.

My approach here is to have evergreen content. It’s a win-win situation because: I can share the book after/before my workshops, I can sell it as a stand-alone content, or eventually, it could give me new leads as a React Native freelancer.

For examples, I choose "The Lord of The Ring" ones
For examples, I choose “The Lord of The Ring” ones

Ulysse is a paid app and I am using setapp andhave access to tons of utilities like this to get faster on my daily job.

The writing experience is nice and clean. I used only one file and I was focus on one thing: write as fast as possible and spend more time on client acquisition, and get back on content after.

I spent almost 10 minutes writing down this summary:

  • JavaScript syntax
  • React syntax
  • JavaScript Language
  • Data Structures
  • General APIs
  • Other Features
  • TypeScript
  • Front-end Frameworks
  • Data Layer
  • Back-end Frameworks
  • Testing
  • Build tools
  • Other tools
  • Resources

When I was frustrated with the quality of the content — I knew I could have spent more time on the writing phase — I started the next step: design and client acquisition.

There is no point to continue working on the content if nobody is interested.

We can write entire books on each topic, but that’s not the point. My mission is to summarize everything in a quick to read and comprehensive book.

Design

You are going to need a bunch of assets for marketing purposes, I decided to jump on Figma — a collaborative web-based vector editor and UX design tool.

I love Figma because all the Images, icons and theme for my website are created there. I already have all the font styles and colors to keep some consistency.

Creating your first image on Figma
  • F: create a new frame
  • T: add a text

I started creating the cover page of my book about React Native with this title:

The Roadmap to Become a React Native Developer

After my first design, I immediately shared it on slack and one of my friends M'Hamed Larbi said

You should rename it, Road to React — like Naruto

Well that makes sense, keep your name simple is good advice but I already started my design and content around Lord Of The Ring.

Let’s ship it with: Road to React Native.

On our way to Mordor
On our way to Mordor

If you want to have a reference for the next design resources used you can have a look at the Figma file.

Distribution

In every kind of business, distribution is one of the most important things. It can become complex quickly with payments, refunds, analytics…

To solve this problem, it’s really simple, here is what you need to do:

  1. Create a new product on Gumroad.
  2. Export the content from Ulysses as a .pdf and .epub and import the files.
  3. Add a nice cover from Figma
  4. Define your pricing
Community, Bronze, Iron and Gold Tiers
Community, Bronze, Iron and Gold Tiers

With my product distribution hosted on Gumroad, I have a piece of mind in terms of sales. I can focus on customer acquisition and connect some integrations to automate my job with Zapier.

Landing page

You can use Gumroad to have a landing page with an URL like this

https://gum.co/road-react-native

or create a custom one like me https://davidl.fr/road-to-react-native

I decided to create a custom landing page for my book because it’s my job as a developer and it’s more flexible. I added a terrible video, made with Loom just in 5 minutes, because I wanted to quickly ship the page.

Definition of success

One my my top 3 question I am asking during client interview is “What is your definition of success”. Answers can vary a lot, depending on the project and the team. With my book, my definition of success is making people happy and make 100 sales in less than 6 months.

That’s why I need KPI.

Key Performance Indicators are important. You need to measure if your actions have an impact. To gain momentum and keep a simple overview of my sales in one single place, I decided to centralize everything on Slack.

You can add Gumroad notification to slack with Zapier.

Connect Zapier and Gumroad
Connect Zapier and Gumroad
Get real time updates on your sales
Get real time updates on your sales

With this system in place, I know if I have an impact on my sales when I share the link of my landing page somewhere.

Growth

From my perspective, this part is the more complex one because you never know where to start.

I silently launched the book in this order, on differents platforms

  • Friends on Whatsapp — basically chasing 1 by 1 some olds coworkers
  • Friends on Slack — “spamming” all channels but without using @channel
  • Facebook group about React Native
  • Indiehackers — where I blog about the milestones
  • Reddit— Xavier advised me this one and the results were great!
I saw your post on Reddit and I contacted you on LinkedIn 🚀

Feedback

In the IT industry, iterations are part of the process to deliver quality software. That’s why we need a system to get constants feedback in order to improve our product.

I track my new sales AND message sent

When I am writing this article this step is manual. I can create an automated workflow on Gumroad or a nurturing on mailchimp if I have too many sales.

If you download the book, I am going to send you this message 48h later.

Hey!
Thank you for pre-ordering a copy of The Road to React Native.
The response has been good and has made me even more excited to add more content. Until the book is launched officially, I’m going to update it with your feedback.
In order to improve the quality, can you take 3:14 min (on average) to complete this form?
https://airtable.com/shryhiyeYRG2Xh5Ey
Or simply answer this email but please be brutally honest, I love having feedback — even bad ones — because it allows me to create better content for everyone.

That’s my second KPI. Asking to fill a simple form with a NPS score.

I use Airtable, because all my data about my freelance customers are there. Think of it as an excel spreadsheet on steroids. A really useful feature is how you can create a simple form to collect pieces of information.

  1. Create a new empty table with these fields
  • Email: type email
  • Rating: type rating
  • Why?: type longtext
  • Make it better: type longtext
  • Misc: type longtext

2. Create a new form view and 💥 you have a nice form

I added a Slack notification for each new record on the Airtable database.

Add slack notifications
Add slack notifications
Instant feedback from Airtable to Slack

Thank you for this feedback, I know since day one I should write an introduction but this customer confirmed my assumption.

Next steps

From an NPS perspective, my notes are between 2 and 8.

That’s a good news, some people like the content and found it useful and some people don’t. That means I have 2 solutions: improve the content OR target another niche of people.

My next steps are updating the content according to feedbacks I had and continue my work on the growth:

If you liked this article, check out:

If you want to learn more and improve your skills, you can follow me on Twitter as I continue to document my journey.

]]> <![CDATA[My Growth Hack Checklist for Spotify]]> https://flexbox.medium.com/how-i-got-more-than-4000-followers-on-spotify-ae4bcb6d6e73?source=rss-cc5b33b54088------2 https://medium.com/p/ae4bcb6d6e73 Mon, 27 Apr 2020 08:29:49 GMT 2021-04-25T14:40:52.975Z How to get 4000+ followers on Spotify

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 into 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 based on SEO.

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.

My SEO Growth Hack Checklist for Spotify

  1. I choose a keyword: Mixtape
  2. Second keyword: coding
  3. 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.

David Leuliette

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 | ## Grow your presence as a music curator on Spotify Welcome to my Spotify Playlists Template. Th...

—

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

If you liked this article, check out:

If you want to learn more and improve your skills, you can follow me on Twitter as I continue to document my journey.

]]> <![CDATA[How to build DIY ergonomic desk for less than 99€]]> https://flexbox.medium.com/how-to-build-diy-ergonomic-desk-for-less-than-99-82fa51a0d98e?source=rss-cc5b33b54088------2 https://medium.com/p/82fa51a0d98e Sun, 05 Jan 2020 14:16:45 GMT 2021-04-25T15:01:20.227Z How I built my DIY ergonomic desk for less than 99€

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:

  1. I am super tall (1m98)
  2. I just moved back to France into my girlfriend’s flat and I don’t have a dedicated room to work.
  3. 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
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
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
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
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
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 costed 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.

If you liked this article, check out:

- How I wrote my first book as a indie hacker

If you want to learn more and improve your skills, you can follow me on Twitter as I continue to document my journey.

]]> <![CDATA[What I learned at React Finland Workshop with Nik Graf]]> https://medium.com/react-finland/what-i-learned-at-react-finland-workshop-with-nik-graf-99c37dc1d8c1?source=rss-cc5b33b54088------2 https://medium.com/p/99c37dc1d8c1 Wed, 08 May 2019 09:50:01 GMT 2019-05-28T08:27:49.553Z
Is that a hook we are looking at? (Nick Tulinen)

What David learned at React Finland Workshop with Nik Graf

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 content available on the internet to introduce react hooks. 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 <TextArea> 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 pattern to display a loader like this:

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

You need to do 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:

1. useEffect and useRef
2. custom hooks and useDebugValue
3. useLayoutEffect
4. Performance
5. Time slicing
6. Suspense
7. Code splitting
8. 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!

What I learned at React Finland Workshop with Nik Graf was originally published in React Finland on Medium, where people are continuing the conversation by highlighting and responding to this story.

]]> <![CDATA[Clean up macos for a productive setup following Marie Kondo advices]]> https://flexbox.medium.com/kondo-your-mac-b2443f2ebc2f?source=rss-cc5b33b54088------2 https://medium.com/p/b2443f2ebc2f Tue, 26 Feb 2019 00:30:05 GMT 2021-04-30T15:49:22.377Z Kondo your Mac

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 hooked.

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 .

- Install sublime plugin for oh-my-zsh
- Install atom and apm on Mac
- Install code command in PATH for VSCode

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!

If you liked this article, check out:

- All the macOS I use to be efficient as a front-end developer.

If you want to learn more and improve your skills, you can follow me on Twitter as I continue to document my journey.

]]> <![CDATA[Simple release worflow for react native with expo]]> https://medium.com/le-wagon/react-native-expo-1734e6d7891?source=rss-cc5b33b54088------2 https://medium.com/p/1734e6d7891 Tue, 10 Jul 2018 14:29:06 GMT 2020-03-05T10:23:25.628Z 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 the 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

Probably 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 every time.
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 5 pm 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 development 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 different release channels Nightly, Aurora, Beta, and Release.

The release workflow for Firefox @FOSDEM

The Mozilla team have a routine: every Tuesday at 3 pm 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 different channels for development and quality insurance.

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

iOS and Android are 2 different worlds

How to onboard testers for iOS

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

How to onboard testers for Android

  1. 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. But you have some limitations.

Thanks for reading! If you have feedback or suggestions, you can find me here:

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!

Simple release worflow for react native with expo was originally published in Le Wagon on Medium, where people are continuing the conversation by highlighting and responding to this story.

]]> <![CDATA[React Helsinki 2018]]> https://flexbox.medium.com/react-helsinki-2018-19c6f07faaf8?source=rss-cc5b33b54088------2 https://medium.com/p/19c6f07faaf8 Tue, 24 Apr 2018 23:43:33 GMT 2018-05-08T12:16:01.085Z Workshop day by a front-end developer

MOI-moi 👋
This week I am in Finland to learn a new langage an improving my skill in React and React Native. On this article, I am going to share with you my notes and links about the first day of workshop.

You want to improve your design skills?
Follow the advices about Styleguide Design Developement.
If you are more in the mobile world, I have some useful links for you.

In short, here is the twitter feed of this great event.

Component Design Workshop

With Andrey Okonetchnikov and Artem Sapegin

What is the difference between German government website and the Austria one ?

The German version have a design system

Styleguide der Bundesregierung - Styleguide

In the Austria version it’s not the case.

The results?
No consistency in terms of branding and the users needs to “learn” how to use the website every time because there is no pattern for navigation.

Why do I need a Design System?

Take the example of Lego. They are using bricks (aka primitives) to build almost everything. It’s perfect for a design system, with basic things you can build different products.

If I use a Design System it’s gonna slow down the development of my product.

I agreed with this point for new projects.
But, the more you are going to add features / components / content on your website / application, more duplications are going to be introduce.
The codebase is growing, hard to maintain.
At the end of the day, It takes more time without style guide.

And we didn’t talk about how to educate and scale the team working on your project.

The broken windows theory is a criminological theory that visible signs of crime, anti-social behavior and civil disorder create an urban environment that encourages further crime and disorder. We don’t want the same for our codebase
The broken window theory

Ok, I am convinced now. Where should I start?

Style Guide Design Workflow

1. Content Inventory
Take screenshots and isolate all the components of your UI.
You can use the anotate app

2. Build a roadmap
Now that you have a list off screenshots, it’s time to make a plan and use this GitHub issue template.

Remeber that Style Guides are the single source of truth.

3. Choose your tool

Components are primitives

You can compose components from primitives

  • Human friendly API
  • Easier to communicate the intent via code
  • Easy to fix or refactor all instances at once
  • Enforce the design across the application

Don’t make CSS class names as an API, instead use primitives:

// DO
<Button primary> ... </Button>
// DON'T
<button type="button" class="btn"> ... </button>

Exercices

You want to sharpen your skills and learn how to use Styleguidist? You can download the sources on GitHub

sapegin/component-driven-development

In the meantime, I updated my mind-mapping about Design System

Design System Mindmap

React Native Workshop

With Gant Laborde

Don’t use button, use TouchableHightlight instead

Dealing with the state of your react native app

GantMan/ReactStateMuseum

What do you think about expo?

Everybody,
at some point,
is ejecting from expo

Real world debugging

GitHub - infinitered/reactotron: A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Real world deploy

Ressources

React Native Newsletter

Thanks for reading! If you have feedback or suggestions, you can find me here:

I Hope this motivates you to start hacking your next project. Just drop me a message if you have any questions — I would be glad to help you!

]]> <![CDATA[How to hack tinder]]> https://flexbox.medium.com/tinder-hack-b004037128c?source=rss-cc5b33b54088------2 https://medium.com/p/b004037128c Wed, 17 Jan 2018 13:24:34 GMT 2021-04-25T14:48:41.272Z In short, I hacked Tinder

In short, I’m coming back from work.
My flatmate says:

Did you see? Tinder just published a web version…

I opened my web browser,
opened the JavaScript console,
Select all buttons aria-label=”Like”
And I clicked

Holy sh$t dude, it’s easy to scrap tinder, automate the swipes is easier than hacking LinkedIn
How can you do that?
Simple, you target all the like buttons, you add a downtime of 300ms between each clic and…

I felt that he didn’t understand anything, and because I don’t have time to explain it, I wrote a script just for him.

It took me 30 minutes to automate 1 second.

Want to read this story later? Save it in Journal.

David Leuliette 🚀 on Twitter

Tinder web version is out. So I played with #JavaScript for autolikes https://t.co/HMxr05ngD3

Hey, done!
I wrote you a script, you just need to
right clic / inspect,
go on the console tab,
and paste this script.

I had 20 matches in a few moments.
I had too many people and didn’t know how to make a good icebreaker, I thought a momment.

Hi!

🤔

Hello!

🤔

Ola Catarina! De donde son?

I searched for an old note on my phone:

My flatmate said:

You are wrong it’s too impersonal, you need to find something else…

I spent 3 hours by watching all the Natural Language Processing techniques available to optimise my icebreaker and automate my “sales pipeline” to get a date.

It was 2 am.

I had 20 matches on my waiting list.

And still no icebreaker sentence…

In short, I hacked Tinder.

Originaly published on LilleLettré

If you liked this article, check out:

- My Growth Hacking checklist for Spotify

If you want to learn more and improve your skills, you can follow me on Twitter as I continue to document my journey.

]]> <![CDATA[Best online banking account for travelers]]> https://flexbox.medium.com/bank-for-digital-nomad-583c86f93096?source=rss-cc5b33b54088------2 https://medium.com/p/583c86f93096 Mon, 14 Aug 2017 09:08:09 GMT 2019-06-03T07:20:35.757Z Banking account for digital nomad lifestyle

Why old banking systems are going to die. Glory to clean UX and modern real time technology 🙏

Years ago, I completely changed my bank because the website was not accessible and fast enough. I was looking for those 2 topics according to my nomad lifestyle, a secure & online banking account.

I choose ING because it was the only solution I found. After many years I am still disappointed about the service. We are living in the XXI century, and financial industry have money to invest in a decent website.
Why the experience is still mediocre?
My frustration is growing day after day. Hopefully, there are awesome newcomers in the banking industry for my traveler lifestyle.

Middle Ages Banking Experience

Traveling in foreign countries

In 2016, I traveled during 100 days in South America with 3 friends. Before my trip, I called my financial advisors (a real human being).

Hello my dear banking advisor!
I am going to travel out of Europe for a long period of time.
It’s perfectly normal.
Can you please unlock my account and allow me to burn all my money during my trip in South America? 😘

Of course, it worked only for our first country in Peru.

When we all moved to Bolivia all our credit cards were locked — including my friends’ cards — because of some voodoo restrictions or bullsh$t process.

🌟 Bonus: My credit card was completely locked because of “security reasons”. It costs me around 100€ to have a new one (cost of international call to lock/order a new credit card, sending to an embassy, send a new code by paper…)

I am still wondering how a code sent by postal letter is a secure and online solution… But that’s another story.

Pietz Levels on Twitter

Now after @rabobank, my new bank @INGnl has ALSO blocked me because I travel too much, incredible 🤷‍♀️

⭐ Protip: When you are traveling in foreign countries, always have a backup plan.
1. Use MoneyGram or WesternUnion.
2. For international transferts write all your names on your passport in the right order when you fill the form.
3. Be careful with the timezones if you are in real trouble.

Extra fees for nothing

I decided to share my experience and write a story because of this.
I just subscribe to Medium premium.
I want to keep alive this awesome community and great ecosystem who is giving me some value — every time I open the app.

I subscribed to medium membership and after the first month, I discovered this bill.

In my case, the only value provided by ING is bullsh$t.

Every month the bank add an extra 0,50 € fee for… nothing.

At the end of the year, it costs 6€ because it’s a monthly subscription plan.

WAT! 😤

WEBSITE 2.0

I work as a front-end developer. Every day I try to craft good looking web application and fast websites for happy users. I mean, how is it possible to deploy one of the worse UI I have ever seen?

Dear ING, do you need a carousel on your homepage? The answer is no.

Grid system design exist since medieval times, and Ethan Marcotte published an article on A List Apart about “CSS Fluid Grids” in 2009.

Maybe ING didn’t have inhouse design team. I can understand that… But I can’t believe that no one haven’t done a research “dashboard template example” There are plenty of examples available for inspiration on the internet.

Here is a great User eXperience. A simple layout with the list of my lasts transactions. Simple and effective.

List of my expenses on the homepage and the categorization is automatic 😍 Number 26 bank

Every time — I am not going to talk about ING in-house double authentication factor based on your birth date —the user experience mistakes on ING web application are really frustrating because dealing with your money is not the funniest thing to do.

The navigation on the web is horrible (A carousel on your dashboard homepage–seriously?) — but wait there is a native application. Since mobile is eating the world maybe the user experience is better. With 50 000+ employee on linkedin, I am pretty sure they have hired some UX Designer.

The mobile revolution

Design a native mobile application is not the same thing as designing a website. You can’t just put random content and advertisement. You are not Facebook, people don’t want advertisements and Farmville invitations on their online bank account.

On ING Group mobile application, 50% of the layout is used for bullsh$t. On the other hand N26 and Revolut have a navigation on the bottom (Maybe because people are using thumb on their smartphone)

I am not going to order a credit for a house when I am waiting the bus

So the User Interface is not great. No respect of mobile navigation pattern. On the top corner right, the logout icon is a 🔒… It’s not a joke.

My frustration is growing day after day…

Here is my feeling when I open the ING mobile app: I don’t care about your credit offers or sponsorship program. I just want to quickly check if everything is okay with my money (And check if you didn’t add fees for nothing BTW).

Performance matters

It’s… worse… because… the… mobile… app… is… slow…

There are still lots of others issues like sharing money with family/friends, days offs for transferring money between your own accounts (and have an extra fee because you are on overdrawn with your main account. Even if you have money on others accounts, in the same bank 🙈)

Revolution on march

Thank goodness some startups are working with real time technologies as disruptors in financial and banking industry. I already showed you Numer26 and Revolut examples. I use theses 2 modern banking sytem.

N26 because I am an early adopter and a traveler. Every week I save 20 € on my N26 account. After 1 month, I have 80 €. At the end of the year I have 1000 € for traveling. With the money saved, you can visit Indonesia during 1 month and hike volcanos.

Saving 20€ per week gives you 1000€ per year for traveling

I am very happy to use my card. There is no extra fees if you are going to an ATM in a foreign country. I trust them about their mission : Designing a bank the world loves to use.

Solve the pain, less friction, better design

Recently I encounter the design Leader at N26 at the Campus London. Akarsh explained the pain he had with his bank in Germany. Almost the same as mine… in worse: he received postal letters of all his transactions each month. 🙅‍

Talk with Akarsh Sanghi, Design Lead at N26 Bank - Le Wagon

David Leuliette 🚀 on Twitter

Designing a bank 101 by @akarshsanghi @n26 @LeWagonLondon #design #sketch

The financial product developed by N26 is amazing because the core feature are very useful:
- You can change the password of your credit card directly from the app
- The categorisation of your expenses is automatic
- Real time notifications (Sometimes at the ATM you have a smartphone alert before you can get your money back)

The mobile bank

I recently moved to London for my new job. 🇬🇧
I was sad because I could’nt use my N26 account, I needed a uk based account to be paid.

No worries the Revolut HQ is in London. I decided to try their service because during the day I have a job. Taking an appointment in a middle aged bank with a human seams a painful experience.

Contrary to Number26, Revolut have only a mobile app at the beginning. The features are the same, you can:

Track Your Expenses
The team built a feature which shows you exactly how much you’re spending, on what, and where.

Spend Without Fees
Revolut is eliminating fees to use your money abroad.
Banks charge up to £47 to spend just £500 in Europe. Revolut always gives you the real exchange rate when you pay in shops, online or withdraw cash.

Get Paid Back
Request money from your phone contacts for dinner, rent, anything.
Forget paying debt collector — get paid back in 3 taps: Choose a contact, enter an amount and request. They hit accept and the money is added to your account instantly.

Request Money Instantly
Did you know you can request money from people who don’t have Revolut? Simply send a sms and people can pay you directly. fast and efficient.

Modern banking for traveler

If you are a traveler, my advice is to open a Revolut account now. This app can become your entire travel wallet. You can keep your money at the same place in 3 differents currencies £ € and $.

The onboarding for new users is perfect and paperless. You only need:
- A picture of your passport
- Your best selfie
- A smartphone

David Leuliette 🚀 on Twitter

OMG! @RevolutApp is super efficient! Open a 🇬🇧 bank account in 3min Order your new credit card 💳 Receive it 2 days after 😍

On the other hand it’s the same for N26. If you are living in Europe it’s a great solution.

⭐ Protip: In both case, don’t forget to keep your phone number alive. My sister recently dropped her old Spanish number for a new one in Asia.
It’s a little bit complicated if you receive confirmation code by sms.

Thanks for reading! If you have feedback or suggestions, you can find me here:

I Hope this motivates you to travel more without the pain of a crappy bank. Just drop me a message if you have any questions — I would be glad to help you!

]]>