I was wondering how we could solve the oncoming global problem of vaccination proof. For example, I can imagine in near future in order to be able to get on to the aeroplane, one will have to provide proof of COVID-19 vaccination. Here’s how I can imagine a worldwide blockchain solution.

Base idea

There’s a publicly available blockchain that shows all the issued COVID-19 vaccination certificates. Besides that, this blockchain keeps the information about authorities that can issue them.

Since the blockchain is publicly available for everyone, there is no personal information that would allow someone to know exactly who was vaccinated…


Me drinking Bedouin tea at Wadi Rum desert sunset

I was recently playing with Tailwind CSS framework with React. One of the things that bothered me were these long className=”…” declarations. I personally don’t like to have too much style related stuff in my JSX. I think it makes things much less readable and that’s why I’m a fan of Styled Components' way of declaring styles. But I figured out I could try to use Tailwind and just declare these class names in a more readable manner.

Here is an example of how you could implement <Card /> in the most straightforward way:

And here how it can…


Me and the rain in Hamburg

Let say you have started building a project using yarn workspaces. Since you’re developing some small “api” and “web” services you want to keep a “shared” package where you’ll keep common js utilities for your project, like for example field validators or some constants or whatever else you find convenient to share. Yarn workspaces are perfect for such scenarios, but when it comes to packing your services to Dockerfiles you can stumble upon some new issues.

Yarn workspaces will move (hoist) most of the dependencies of your services in root level node_modules folder. Because of that you will have to…


Picture of me doing breakfast in Tokyo share-house I was living in while working @ Mangaido.com
Picture of me doing breakfast in Tokyo share-house I was living in while working @ Mangaido.com
Picture of me doing breakfast in Tokyo share-house I was living in while working @ Mangaido.com

I will explain a concept of authentication flow I’m exercising recently in my full-stack projects. If you’re crazy enough to build your own authentication with Apollo and JWT this may be an inspiration for you.

The stack I’m using:

API:

  • express.js
  • apollo-server-express
  • some database (mongo, postgres …)
  • JSON Web Tokens

Frontend app:

  • next.js
  • apollo-boost
  • react-apollo (I use hooks)
  • next-with-apollo

Full user flow with Server Side Rendering

  • User hits some url that is restricted for logged-in users
  • Next.js server takes user’s cookies and push them to ApolloClient instance
  • Next.js server will pre-render a page
  • During pre-rendering ApolloClient will query a refreshToken endpoint
  • ApolloServer receives a query and is looking for a refreshToken


Me on Shibuya crossing in Tokyo while I was working on my startup Mangaido.com

I recently wanted to check if it’s possible to create a simple js chat with no servers in-between, so that you can directly talk with someone else via secure channel.

I found that some browsers support WebRTC. It wasn’t clear for me at the beginning how to deal with it but eventually I was able to establish p2p connection with my friends in different networks. There is still a need for STUN/TURN servers to establish connection but as far as I know it’s secure.

Currently demo chat works in Firefox. I had some issues with STUN servers in Chrome. I…


That’s me at Valassis office. I commute everyday to the office on a bicycle and I recently bought this awesome helmet that I’m proud of :D Just to clarify, I’m not usually working in a helmet on, tough.

I will walk you through setting up basic Express server with TypeScript. By “basic” I mean:

  • eslint + prettier config
  • testing setup (mocha, chai, supertest)
  • alias for local dependencies, so that you can import modules from root
  • watch mode for faster development
  • TypeScript setup
  • VSCode workspace settings

I assume you have node and typescript globally installed.

Let’s create our directory:

mkdir express-boilerplate && cd express-boilerplate

Set up git:

git init

Set up npm:

npm init -y

Add ./.gitignore file:

logs
*.log
npm-debug.log*
pids
*.pid
*.seed
*.pid.lock
node_modules
*.tsbuildinfo
.env
build

Add all dependencies we will need:

Dependencies:

  • body-parser
  • express
npm…


Unrelated to this article picture of me eating Saturday breakfast.

I found myself copy pasting the same configuration over and over every time I start new “create-react-app” project, so here is how I always start.

I’m using create-react-app v3.1.1 as of writing this document (September 18th, 2019)

I will show here how to setup a project in a certain configuration:

  • create-react-app with TypeScript
  • VSCode as code editor
  • eslint with prettier (style on save)
  • set up root alias for local imports (“components/Button.tsx” instead of “../../../../components/Button.tsx”)

Bootstrap a new typescript project:

npx create-react-app create-react-app-boilerplate --typescript && cd create-react-app-boilerplate

Install all dev dependencies (eslint + prettier):

npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier…


That’s me grilling some sausages on my an apartment’s terrace in Brussels. It was raining.

(As of: September 8, 2019)

I recently was investigating how I can approach building simultaneously web and mobile apps in a most optimal way. At first I started a Lerna monorepo approach where I could have my shared package with all the code I want to share with web and mobile. But I quickly noticed that there’s a ton of issues bundling it properly and wiring it, especially with Expo/React Native.

My Solution

First of all, I think Lerna monorepo is a good way to keep web & mobile apps together. What I did a bit differently is that I would keep…


Let’s say you want to create an NPM package with React components styled in styled-components and you also want to use Typescript.

Let’s assume your library is going to be named test-react-component-lib.

I prepared a boilerplate repository that will allow you to easily develop and deploy your components library to NPM. It’s based on Typescript version of rollup-starter-lib + I added and configured an example-app based on Typescript version of Create React App that will let you test your library and publish a demo to GitHub pages.

Boilerplate: https://github.com/michal-wrzosek/react-component-lib

Boilerplate repo setup

Clone the boilerplate repo and navigate to root folder:

git clone…


If you ever will struggle with typing HOC in React here are some code snippets that could help you.

Let say you have a simple withTheme HOC, that provide additional theme property to your Component.

Now let’s see how we could type this code:

Ok, let’s walk through this code.

Omit

First, we have Omit type that is really helpful in typing HOCs. Since our HOC is providing theme prop, if we wrap Component in withTheme the resulted Component don’t need theme prop anymore. What Omit is doing is removing from ones type another’s type keys:

HOC

Then, we’re…

Michał Wrzosek

Senior Software Engineer currently on contract assignment @ Shell Agile Hub in Rotterdam, Netherlands. Currently also working on my side project pitupitu.chat

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store