DEV Community: Arnaud Leymet

Building an App 📱 and its Stack in minutes with LOLstack 🥡

Arnaud Leymet — Sat, 07 Aug 2021 22:10:51 +0000

Hello there (ʘ‿ʘ)╯
This post is part of a short series you may prefer to read chronologically.

Preface

Chosing what will compose a stack is both a matter of experience, opinion and timing.

Experience helps identifying what will stick, but opinion has a major role in the final chosing.

As of timing, what seems to be a good idea at the time, may be compromised by a lack of maintainers goodwill or vision a year later.

So by no means is the LOLstack The Perfect Stack™️. Now that's out, let's cover what it has to offer.

TL;DR: Enough with the stalling, Access the good stuff

What you'll get

An App, an API, a Database and all of the in-between that make an App and its stack work.

The tech stack

Category	Tech used
Mobile app that targets iOS, Android & the web	React Native Expo
Design system for a component-based, modular & consistent design	Eva Design UI Kitten
Typing for a type-safe runtime & auto-generated interfaces	TypeScript
Database with both relational and unstructured data	PostgresQL
GraphQL API autogenerated from the database schemas	PostGraphile
RESTful API autogenerated from the database schemas	PostgREST
Custom RESTful API for implementing server-side specific needs	ExpressJS TypeScript
Authentication flow for handling sign-up and sign-in	JSON Web Token
Role-based permissions for a granular and low-level security	PostgresQL
Containers for services isolation and reproducibility	Docker
Job queue for handling asynchronous tasks	Graphile Worker
Job scheduler for running repetitive automated tasks	ofelia
Web proxy with SSL certificate handling, access logs	traefik
Admin interface for accessing & manipulating the data directly	pgweb adminer
Unit testing for ensuring that code is functional	Jest plpgunit
Status page to communicate outage and downtime to customers	Cachet

Some of these choices are questionable? Please drop a comment, and let's 👊 discuss 'em softly :)

Don't leave just yet!

Feeling overwhelmed? Don't. That was the boring part.

Now is the good part, as booting this stack is just a copy-paste away:

git clone git@github.com:codename-co/stack.git && cd $_
docker-compose up

🤭 Installing Docker first would be a good idea by the way.

Open source

The LOLstack boilerplate is open source.
This is great news to you right now for your 🤪 crazy app idea.
Happy crafting!

Building an App Was Hard. 🤯 But Stop Making Excuses.

Arnaud Leymet — Sat, 07 Aug 2021 22:10:40 +0000

Top 4 reasons not working on your MVP

So this 🤪 crazy app idea has been growing in your head lately. Yet nothing has been done about it, as you don't see clearly how nor when building it.

Business and Market reasons aside, the most common reasons (/cough excuses) not starting working on your crazy idea Minimum Viable Product (MVP) are in my opinion:

🧍‍♀️ Being alone

Ok you don't have a team yet, but suck it on.
If/when reaching for potential cofounders or hires later in the process, you'll be glad to have your MVP. It'll help convey both your idea and investment in the project.
⌛ Takes too much time

Sure. Creating something new and different takes time. But what if? is took less than expected?
😫 Technology fatigue

Behind hypes, technology cycles and experts contradictory opinions, there can be some technology fatigue, which will tickle beginners to tech veterans.
Poundering what language, framework and services to use in a project can be daunting and exhausting. But what if the fatigue were no more?
🤯 Cognitive complexity

It's actually sane to think that there is a lot of area to cover for an app to work, and that a lot of knowledge in multiple areas are needed. On top of the actual app development, there is also the question of the database, of the APIs, of the security, authentication, production debugging, etc.
But what if this cognitive complexity were already tackled by others?

Are you thinking of a 5th reason? Please drop your suggestions in the comments 💬
Also, the 🍰 cake is a lie.

These reasons are outdated

What if all these reasons were no more? (Well... Apart being alone, you're on your own mate)
What if there were a kind of a shortcut?

As lots of us have been tickering, playing and working with lots of technology bits, some of us have converged all this know-how into ready-to-use stacks, that help bootstrapping your next projects.

At codename, we have been developing our take of what a stack should be.

Featuring LOLstack, your ready-to-dev & ready-to-deploy software stack.

Building an App Was Hard. 🤯 Now Stop Making Excuses.

Display Formatted Durations in TypeScript 🗓️

Arnaud Leymet — Wed, 04 Aug 2021 20:00:21 +0000

const formattedDuration = (duration: number): string => {
  const sec = duration % 60
  const min = Math.floor(duration / 60)
  return `${min}min${sec > 0 ? ` ${sec}s` : ''}`
}

formattedDuration(600)
//=> "10min"

formattedDuration(640)
//=> "10min 40s"

formattedDuration(6640)
//=> "110min 40s"

▶️ Try it out

7 TypeScript Tricks with Enum (and Fruits) 🧺

Arnaud Leymet — Tue, 27 Jul 2021 16:06:10 +0000

Enums are one of the key features of TypeScript.

Relying on basic enums, (numeric and auto-incremented) is standard and the most common use case. Yet Enums can offer much more:

Merge enums
Enum subsets
Get the keys of an enum
Get the values of an enum
Iterate over an enum keys
Iterate over an enum values
const enum

In the rest of this post, let's assume the following code is available:

enum Fruit {
  APPLE = '🍎',
  BANANA = '🍌',
  CHERRY = '🍒',
}

1. Merge enums

Merging enums is pretty straightforward using the pipe | operator:

enum OtherFruit {
  DATE = 'date',
}

type AnyFruit = Fruit | OtherFruit

▶️ Try on TypeScript Playground

2. Enum subsets

Because cherries may not be as tasty as other fruits, let's exclude them:

type YummyFruits = Exclude<Fruit, Fruit.CHERRY>
// => type YummyFruits = Fruit.APPLE | Fruit.BANANA

▶️ Try on TypeScript Playground

3. Get the keys of an enum dynamically

This one needs the use of two type operators: keyof and typeof.

type FruitKey = keyof typeof Fruit
// => type FruitKey = "APPLE" | "BANANA" | "CHERRY"

const keys = Object.keys(Fruit) as FruitKey[]
// => ["APPLE", "BANANA", "CHERRY"]

▶️ Try on TypeScript Playground

4. Get the values of an enum dynamically

This snippet leverages the Template Literal type operator:

type FruitValue = `${Fruit}`
// => type FruitValue = "🍎" | "🍌" | "🍒"

const values: FruitValue[] = Object.values(Fruit)
// => ["🍎", "🍌", "🍒"]

▶️ Try on TypeScript Playground

5. Iterate over an enum keys

Looping through the enum keys is as simple as:

for (let fruit of Object.keys(Fruit)) {
  console.log(fruit)
}
// => APPLE
//    BANANA
//    CHERRY

▶️ Try on TypeScript Playground

6. Iterate over an enum values

In the same spirit, looping through the enum values:

for (let fruit of Object.values(Fruit)) {
  console.log(fruit)
}
// => 🍎
//    🍌
//    🍒

▶️ Try on TypeScript Playground

7. `const enum`

By default, enums generate a bunch of code when compiled to JavaScript:

var Fruit;
(function (Fruit) {
    Fruit["APPLE"] = "🍎";
    Fruit["BANANA"] = "🍌";
    Fruit["CHERRY"] = "🍒";
})(Fruit || (Fruit = {}));

There is however a way not to generate this much code: by leveraging const enum.

Adding just a const in front of our Fruit enum makes a big difference:

const enum Fruit {
  APPLE = '🍎',
  BANANA = '🍌',
  CHERRY = '🍒',
}

...as it compiles to nothing. 🕳️

Just until we use part of its values:

const chosenFruit = Fruit.BANANA
// => compiles to:
// var chosenFruit = "🍌";

▶️ Try on TypeScript Playground

DEV Community: Arnaud Leymet

Building an App 📱 and its Stack in minutes with LOLstack 🥡

Preface

What you'll get

The tech stack

Don't leave just yet!

Open source

Building an App Was Hard. 🤯 But Stop Making Excuses.

Top 4 reasons not working on your MVP

These reasons are outdated

Display Formatted Durations in TypeScript 🗓️

7 TypeScript Tricks with Enum (and Fruits) 🧺

1. Merge enums

2. Enum subsets

3. Get the keys of an enum dynamically

4. Get the values of an enum dynamically

5. Iterate over an enum keys

6. Iterate over an enum values

7. const enum

7. `const enum`