Dennis Bruijn's blog https://www.0x1ad2.dev/blog Writing about React, Node.js, testing, performance and the craft of building software that lasts. en Sat, 10 Oct 2026 00:00:00 GMT šŸ—ļø How I build my website https://www.0x1ad2.dev/blog/how-i-build-my-website https://www.0x1ad2.dev/blog/how-i-build-my-website Sat, 10 Oct 2026 00:00:00 GMT Dennis Bruijn The stack, the guardrails and the blog features behind 0x1ad2.dev, with live three.js demos you can pause, restart and read. react vite threejs typescript blogging This site is a small React application that I treat like a client project. It has a component library, a content pipeline, tests in two runners and a CI gate. It also has more animation than any client would sign off on. This post walks through how it fits together, from the stack to the blog features, ending with three.js demos that run right inside the article.

Everything below describes the code in the repository today. When something is a trade-off rather than a win, I say so.

The stack at a glance

LayerChoice
UIReact 19 and TypeScript
BuildVite, with Tailwind CSS v4 through its Vite plugin
RoutingReact Router with lazy route modules
Componentsshadcn/ui primitives on Radix, plus effects from Magic UI and React Bits
Motionmotion for springs and layout animation, CSS for the rest
WebGLthree.js for the hero backgrounds and the demos in this post, plus ogl for one alternative background
QualityOxlint, Vitest with Testing Library, Playwright, GitHub Actions

The components live in the repository rather than in a package. shadcn/ui and the React Bits registry both work that way: npx shadcn add copies the source into src/components/ui, and from then on it's my code to read, trim and test. The effects sidebar's Jelly Radio came from the React Bits registry the same way.

There is no server. npm run build produces static files, and the host only needs to rewrite deep links such as /blog/how-i-build-my-website to index.html.

Pages, routes and lazy loading

The home page ships in the main bundle so the first visit paints quickly. Every other page is a lazy route, so its code downloads only when someone navigates there:

{
  path: "blog/:slug",
  lazy: async () => ({ Component: (await import("@/pages/BlogPostPage")).BlogPostPage }),
},

Each route group also has an errorElement. If a chunk fails to load (a flaky connection or a deploy mid-visit), the header and footer stay on screen and the reader gets a way back instead of a blank page. A Playwright test blocks the About page chunk on purpose to prove that.

The hero background and its guardrails

The home page hero runs React Bits' CRT Warp by default: blocky plasma on a curved CRT screen with scanlines, bloom and a slight RGB split, all in one three.js fragment shader. Moving your cursor bends the screen. I dimmed it from its defaults so the name and copy stay readable on top. Two earlier heroes are still available from the effects sidebar described below: React Bits' Pattern Waves, a halftone surface of dots rendered with the small ogl library, and Light Pillar, a raymarched column of light. Both take their colours from the page's primary hue, which changes on every visit (more on that below). The backgrounds are the heaviest things on the site, so they come with three guardrails:

  1. It's optional. The component is lazy-loaded and only rendered when supportsWebGL() can create a WebGL2 context.
  2. It can't take the page down. It sits inside a BackgroundBoundary, an error boundary that renders nothing if the canvas throws.
  3. It stops when nobody can see it. A small hook pauses the frame loop off-screen and in background tabs.
// Keep mounted GPU resources, but stop requesting frames outside the viewport.
export function useAnimationActive(ref: RefObject<HTMLElement | null>) {
  const [active, setActive] = useState(true)

  useEffect(() => {
    let inView = true
    const update = () => setActive(inView && document.visibilityState !== "hidden")
    const observer = typeof IntersectionObserver === "undefined" ? undefined : new IntersectionObserver(
      ([entry]) => {
        inView = entry.isIntersecting
        update()
      }
    )
    if (ref.current) observer?.observe(ref.current)
    document.addEventListener("visibilitychange", update)
    update()
    return () => {
      observer?.disconnect()
      document.removeEventListener("visibilitychange", update)
    }
  }, [ref])

  return active
}

That same hook drives the neon progress bar and every three.js demo further down this page. With reduced motion turned on, either hero background renders one still frame and never starts its loop.

A new primary colour on every visit

Reload the page and the accent changes. Buttons, links, focus rings, the reading-progress bar, the hero background, the demo colours below and even the favicon all follow it. Everything themed derives from one CSS variable, --accent-hue, an OKLCH hue angle:

:root {
  --accent-hue: 295;
  --primary: oklch(0.65 0.2 var(--accent-hue));
  --highlight: oklch(0.78 0.14 calc(var(--accent-hue) + 40));
  --ring: oklch(0.65 0.2 var(--accent-hue));
}

A tiny inline script in index.html picks a hue from a curated list before the first paint, so there's no flash of purple. It also avoids repeating the previous visit's hue. OKLCH keeps lightness perceptually even, so a blue primary looks as bright as an orange one and text contrast barely moves between hues.

CSS can't feed a three.js material or canvas-confetti, so src/lib/accent.ts reads the variable back and converts OKLCH to hex in about fifteen lines. That's how the hero backgrounds, the demos and the confetti get their colours.

A glowing status dot

The availability pill in the hero is deliberately plain: a soft border, small text and a green dot with a CSS ping. The only flourish is on the dot itself, which glows like a tiny LED. That's three stacked shadows on one element, a tight bright core and two wider, fainter halos:

<span className="relative flex size-2">
  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75 motion-reduce:animate-none" />
  <span className="relative inline-flex size-2 rounded-full bg-emerald-300 shadow-[0_0_4px_#6ee7b7,0_0_10px_#10b981,0_0_18px_#10b98199]" />
</span>

The glow is static, so it costs nothing per frame. With reduced motion turned on, the ping stops and the dot keeps glowing.

Try the same trick here. Change the shadow sizes or colours and press Run:

<style>
  body { background: #07060b; display: grid; place-items: center; min-height: 10rem; }
  .pill {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .25rem .75rem .25rem .5rem;
    border: 1px solid rgb(255 255 255 / .15); border-radius: 999px;
    background: rgb(255 255 255 / .05);
    color: rgb(255 255 255 / .8); font: 500 .75rem system-ui, sans-serif;
  }
  .dot {
    width: .5rem; height: .5rem; border-radius: 50%;
    background: #6ee7b7;
    box-shadow: 0 0 4px #6ee7b7, 0 0 10px #10b981, 0 0 18px #10b98199;
  }
</style>
<span class="pill"><span class="dot"></span>Available for select consulting engagements</span>

A neon reading-progress bar

The thin bar at the very top of the window fills as you scroll and reaches the right edge at the bottom of the page. It's a neon tube: when you start scrolling from the top, it strikes with a flicker, then hums gently while it's lit. The behaviour and prop names follow React Bits Pro's Neon Reveal. My version in src/components/ui/neon-reveal.tsx uses the Web Animations API rather than a canvas.

The tube itself doesn't know about scrolling. A wrapper sets its width from motion's scroll progress and asks it to strike again each time the page leaves the top:

const { scrollYProgress } = useScroll()
const width = useTransform(scrollYProgress, (value) => `${value * 100}%`)

useMotionValueEvent(scrollYProgress, "change", (value) => {
  if (value > 0 && !lit.current) {
    lit.current = true
    neon.current?.replay()
  } else if (value === 0) {
    lit.current = false
  }
})

Animating width instead of scaleX keeps the glow's rounded ends from being squashed while the bar is short. Every ignition animation uses a backwards fill, so nothing lingers on the element once it finishes. With reduced motion on, the bar still tracks your position but never flickers.

An effects sidebar at the edge of the screen

Move your mouse to the right edge of the window and a panel slides in. It lets you pick the pointer effect for the whole site: Sparks on click (the default), a neon Trail behind the cursor, a small burst of Confetti, or Off. It also has a hidden extra: a second choice that switches the home page hero between CRT, Waves and Light pillar. Both choices are React Bits Jelly Radios. The pointer effect is saved in localStorage, so it survives future visits. The hero choice lasts only for the tab's session, so every new visit starts with the CRT.

The edge detection is a single passive pointermove listener. The pointer has to stay in the last 12 pixels for 120 ms before the panel opens, so a quick trip to the scrollbar doesn't trigger it. Moving well to the left closes it again:

const onPointerMove = (event: PointerEvent) => {
  if (event.pointerType === "touch") return
  if (modeRef.current === null) {
    const nearEdge = event.clientX >= document.documentElement.clientWidth - EDGE_ZONE
    if (nearEdge && event.buttons === 0) dwell ??= setTimeout(() => setMode("hover"), EDGE_DWELL)
    else clearDwell()
  } else if (modeRef.current === "hover" && panelRef.current) {
    if (event.clientX < panelRef.current.getBoundingClientRect().left - LEAVE_DISTANCE) setMode(null)
  }
}

Hover-only features exclude touch and keyboard users, so a slim handle on the edge opens the same panel with a tap or Enter, and focus moves to the selected option. While closed, the panel is inert, so it never traps Tab. Each effect only runs a frame loop while something is moving. With reduced motion on, the choices are disabled and the panel explains why.

Posts are Markdown files

There's no CMS. A post is a Markdown file in src/content/blog, reviewed in a pull request like any other change. The filename becomes the slug:

---
title: "šŸ—ļø How I build my website"
description: A concrete promise to the reader.
date: 2026-10-10
tags: [react, threejs]
draft: true
---

## Start with the problem

The frontmatter parser in src/lib/blog-content.ts supports a deliberate subset: one-line strings, inline lists and booleans. Drafts appear in development and are left out of production builds. Vite's glob import turns every file into a string at build time:

export const posts = collectPosts(
  import.meta.glob<string>("/src/content/blog/*.md", {
    query: "?raw",
    import: "default",
    eager: true,
  }),
  { includeDrafts: import.meta.env.DEV }
)

A small Vite plugin parses every post again, drafts included, during npm run build. A missing title, an impossible date such as 2026-02-30, or an embedded demo that doesn't exist fails the build rather than shipping a broken page.

The trade-off is honest: posts are bundled into client code, so drafts aren't secret, and the initial HTML doesn't contain the article. For a personal blog, a reviewed diff per post is worth it.

From Markdown to a reading page

react-markdown with remark-gfm renders the body, and the post page adds the reading furniture:

  • Reading time counts prose only. Code blocks are stripped first, so a long snippet doesn't inflate the estimate.
  • Table of contents. Every ## heading gets a slug id and a hover anchor. The sidebar list is React Bits' Line Sidebar: items near your cursor lean out and take the accent colour, and an IntersectionObserver lights up the section you're reading. I changed its items from click handlers to real links, so Tab, Enter and the URL hash all work, and keyboard focus lights an item the same way hover does.
  • Search and tags on the blog index live in URL parameters, so a filtered view is a shareable link.
  • Share copies the post URL and confirms with a toast, or explains when the clipboard is blocked.
  • Reduced-motion notice. If your system asks for less motion, the post says which animations are paused and that the examples still work.

Code blocks you can copy and run

Each fenced block goes through one Pre component, which reads the fence's language and picks a renderer:

function Pre({ children }: { children?: ReactNode }) {
  const code = textOf(children).replace(/\n$/, "")
  const language = languageOf(children)

  if (language === "html-live") return <CodePlayground source={code} />
  if (language === THREE_DEMO_LANGUAGE) {
    return (
      <BackgroundBoundary fallback={<DemoMessage>This demo couldn't load. Reload the page to try again.</DemoMessage>}>
        <Suspense fallback={<DemoMessage>Loading demoā€¦</DemoMessage>}>
          <ThreeDemo name={code.trim()} />
        </Suspense>
      </BackgroundBoundary>
    )
  }
  return <CodeBlock code={code} language={language} />
}

Plain blocks get line numbers, a deliberately tiny regex tokenizer for colour, and a copy button. It's not a real parser, but it covers the TypeScript, TSX and HTML I write about without shipping a highlighting engine.

html-live blocks, like the glowing dot example above, become an editor next to a preview. The preview is an iframe with sandbox="allow-scripts" and a Content Security Policy of default-src 'none'. Scripts run, but they can't touch this page, its storage or the network.

Three.js demos inside a post

That sandbox is exactly why three.js demos need their own path. The iframe can't load modules, so a three-demo fence names a TypeScript file in src/components/blog/three-demos/ instead:

Here is the spinning cube:

~~~three-demo
spinning-cube
~~~

Every demo exports a mount(canvas, { accent }) function with the same small contract. accent is this visit's primary colour as hex. The demo owns its renderer and scene. The host owns everything around it:

export type Demo = {
  frame: (seconds: number) => void
  resize: (width: number, height: number) => void
  dispose: () => void
}

export type DemoOptions = { accent: string }

The host component loads the module and its raw source with two lazy import.meta.glob calls. The code under each demo is therefore the file that's running, not a copy that can drift. three.js itself only downloads when a post contains a demo. The host also:

  • drives one requestAnimationFrame loop that stops off-screen, in hidden tabs and when you press Pause
  • re-renders a still frame when the canvas resizes while paused
  • calls dispose() on unmount so geometries, materials and the renderer are released
  • starts paused for reduced-motion readers, who can opt in with Play
  • shows the source with an explanation when WebGL isn't available

A first scene

The smallest useful scene is a renderer, a camera and one lit mesh. Rotation comes from elapsed seconds rather than a per-frame increment, so pausing, restarting and frame drops all behave predictably:

spinning-cube

Rewriting geometry every frame

Here, 3,136 points share one BufferAttribute. Each frame rewrites their heights in place and sets needsUpdate, which uploads the buffer once without allocating anything. Move your pointer over the canvas to move the ripple. The listener is removed in dispose, like every other resource:

pointer-ripples

Ordered dithering in a shader

The site's previous hero used an ordered-dither pass. This demo is the same idea in under 20 lines of GLSL. A moving gradient is quantised to four shades, and a 4Ɨ4 Bayer matrix decides which pixels round up, so it reads as a smooth ramp from a distance:

ordered-dither

To add a demo, drop a file that exports mount into the folder and reference it from a fence. The build checks that the name exists.

Testing and shipping

Vitest runs unit and integration tests in jsdom: the frontmatter parser, date validation, routes and the playground. jsdom has no WebGL, so those tests check the fallbacks. Playwright runs the production build in Chromium, WebKit and a mobile viewport. It checks that every post renders its code blocks and anchors, that the hero canvas pauses off-screen, that a failed chunk keeps navigation alive, and that the effects sidebar opens from the edge and remembers its choice.

npm run check runs lint, tests and the build locally. CI runs the same steps plus the browser suite on every pull request and every push to main. Dependabot proposes weekly updates, and the workflow actions are pinned to commits.

That's the whole machine: a static React app, Markdown in the repository, and enough guardrails that the fun parts (neon tubes, shaders, confetti) can't make the reading worse.

]]> Part 1: Create your first Next.js application https://www.0x1ad2.dev/blog/create-your-first-nextjs-application https://www.0x1ad2.dev/blog/create-your-first-nextjs-application Tue, 28 Apr 2020 00:00:00 GMT Dennis Bruijn A step-by-step guide to scaffolding a Next.js app with Yarn, styled-components and dotenv, and rendering your first page. nextjs react nodejs tutorial Orange DevJam Next.js mini-series banner

What is Next.js

Next.js is a minimalistic framework for server-rendered (SSR), and production-ready React applications. Here are some other cool features Next.js brings to the table:

  • An intuitive page-based routing system (with support for dynamic routes)
  • Automatically statically optimizes page(s) when possible
  • Server-side renders page(s) with blocking data requirements
  • Automatic code splitting for faster page loads
  • Client-side routing with optimized page prefetching
  • Built-in CSS support, and support for any CSS-in-JS library
  • Webpack-based dev environment which supports Hot Module Replacement (HMR)
  • API routes to build your API with serverless functions, with the same simple router used for pages
  • Customizable with community plugins and with your own Babel and Webpack configurations

What we are going to create

Browser at localhost:3000/placeholder showing the DevJam logo and ā€œWoo-hoo you've created your first Next.js appā€

Prerequisites

Before creating our first Next.js project, there are some essential dependencies that you need to install in order to at least run our app and install our application-specific dependencies:

  • NodeJS: NodeJS is a cross-platform JavaScript run-time that executes JavaScript code outside of the browser. NodeJS lets developers use JavaScript to write command-line tools and server-side applications.
  • Yarn: Yarn is a package manager for your code. It allows you to use and share (e.g., JavaScript) code with other developers from around the world. Yarn does this quickly, securely, and reliably so you donā€™t ever have to worry.
  • Visual Studio Code: Visual Studio Code is a lightweight but powerful source code editor that runs on your desktop and is available for Windows, macOS, and Linux. It comes with built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages (e.g., C++, C#, Java, Python, PHP, Go) and runtimes (e.g., .NET and Unity).

Iā€™m in favor of Yarn but you could also use NPM instead if you want to! Both are good tools for managing your packages.

Setup your project

With those essential dependencies installed, we are now able to scaffold our first project using the yarn interactive setup form.

If you donā€™t know what mkdir, cd and other CLI commands mean click here

Create a new folder on your system where your project lives. I call our new folder ā€œdevjam-dasboardā€.

$ mkdir devjam-dashboard

Traverse into that directory

$ cd devjam-dashboard

Initialize a new Yarn project

$ yarn init

This command walks you through an interactive session to create a package.json file, after that we can start adding our application-specific dependencies.

Install dependencies

Weā€™re going to add a whole lot of packages to the application, most of them are a must-have (some of them arenā€™t used in this part of the series yet).

$ yarn add body-parser dotenv dotenv-webpack express isomorphic-fetch next react react-dom styled-components bootstrap react-bootstrap

If everything did go well our package.json should look like this

{
  "name": "devjam-dashboard",
  "version": "1.0.0",
  "description": "A small administrative dashboard for DevJam.",
  "main": "index.js",
  "author": "Dennis Bruijn",
  "license": "MIT",
  "dependencies": {
    "body-parser": "^1.19.0",
    "bootstrap": "^4.4.1",
    "dotenv": "^8.2.0",
    "dotenv-webpack": "^1.7.0",
    "express": "^4.17.1",
    "isomorphic-fetch": "^2.2.1",
    "next": "^9.3.5",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.0",
    "react-dom": "^16.13.1",
    "styled-components": "^5.1.0"
  }
}
  • body-parser: This package lets your NodeJS application parse different types of request bodies (e.g., application/JSON).
  • dotenv: Loads environment variables from .env for NodeJS projects.
  • dotenv-webpack: A secure webpack plugin that supports dotenv and other environment variables and only exposes what you choose and use.
  • Express: Fast, unopinionated, minimalist web framework for NodeJS
  • isomorphic-fetch: This package adds an isomorphic fetch function that you can use both on the front-end and the back-end.
  • Next.js, react, and react-dom: Together, these packages let you build React apps with Next on top.
  • bootstrap and react-bootstrap: These packages allow you to use Bootstrap components without having to use jQuery.
  • styled-components: Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components.

Launching from the command line

Launching Visual Studio Code from the terminal looks cool and is a productive way to edit (if you split your screen with the terminal on one side and Code on the other).

To enable this, press cmd + shift + P, type in shell command, and select Install code command in path

Configure babel

Create a file called .babelrc inside the project root

$ touch .babelrc

Open the file

$ code .babelrc

Paste the following into the file and hit save.

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

This will make styled-components work with Next.js and let Babel know that you are developing with this package. Configuring Babel with the next/babel preset is needed to make this package compile your code correctly.

Configure dotenv

Create a file called .env inside the project root

$ touch .env

Open the file

$ code .env

Paste the following into the file and hit save.

PORT=3000

An env file is a simple configuration text file that is used to define some variables you want to pass into your applicationā€™s environment. This file needs something like a parser to make it work. The parser reads the variable definitions one-by-one and parses them to the environment. In our case, the parser is webpack in combination with dotenv.

Configure Next.js

Create a file called .next.config.js inside the project root

$ touch next.config.js

Open the file

$ code next.config.js

Paste the following into the file and hit save.

require("dotenv").config();

const path = require("path");
const Dotenv = require("dotenv-webpack");

module.exports = {
  webpack: config => {
    config.plugins = config.plugins || [];

    config.plugins = [
      ...config.plugins,

      new Dotenv({
        path: path.join(__dirname, ".env"),
        systemvars: true
      })
    ];

    return config;
  }
};

A Next.js config file is a regular NodeJS module, not a JSON file. It is used by the Next.js server and build phases, and itā€™s not included in the browser build.

Letā€™s build!

Create a pages directory

In Next.js, a page is a React Component exported from a .js, jsx, .ts, or .tsx file in the pages directory.

$ mkdir -p src/pages
^ the -p flag makes sure src is created first

Add a new page

Create a file called placeholder.js inside the src/pages directory

$ touch src/pages/placeholder.js

Open the file

$ code src/pages/placeholder.js

Paste the following into the file and hit save.

import styled from "styled-components";

const Placeholder = styled.div`
  margin-top: 25vh;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  img {
    width: 100px;
  }
  h1 {
    color: #4a566e;
  }
`;

function Index() {
  return (
    <Placeholder>
      <img src="https://cdn-images-1.medium.com/max/222/1*CAL6MRkz-KF6U2oZY4JWJg@2x.png" />
      <h1>Woo-hoo you've created</h1>
      <h1> your first Next.js app šŸŽ‰</h1>
    </Placeholder>
  );
}

export default Index;

Each page is associated with a route based on its file name. e.g., if you create pages/placeholder.js that exports a React component like below, it will be accessible at domain.io/placeholder

Run it

To wrap things in this section, open the package.json file add a script property to the main object.

Open the file package.json

$ code package.json

Paste the following into the file and hit save.

"scripts": { "dev": "next" },

After defining the dev script, you can execute

$ yarn dev

to run the first version of your Next.js app.

If everything works as expected, in a few seconds, you will be able to open http://localhost:3000/placeholder in a web browser.

You did it! You did it!

Github repository

If you want to check out the code without following the guide or just check if you did everything right DevJam Part 1ā€Šā€”ā€ŠRepository

]]> ā© React Live: the interactive conference https://www.0x1ad2.dev/blog/react-live-the-interactive-conference https://www.0x1ad2.dev/blog/react-live-the-interactive-conference Mon, 30 Sep 2019 00:00:00 GMT Dennis Bruijn Key learnings from React Live in Amsterdam: Theme UI, SVGR, Framer Motion, Ignite, MobX State Tree and Next.js 9. react conference react-native Two weeks ago I attended the React Live conference; itā€™s one of the biggest React conferences in the Netherlands. Besides being a conference, Passionate People (the event organizers) tried to spice it up by adding live coding to their sessions.

The conference was hosted at Theater Amsterdam, a tier-A location. The conference was hosted at Theater Amsterdam, a tier-A location.

ā€œMost impressive Conference Venue I have ever been tooā€ā€Šā€”ā€ŠEvan You

šŸ”‘ Key learnings

I usually write my conference blogs talk by talk, but since everyone is doing that, itā€™s quite annoying to read. I collected my key learnings below.

Theme UI
Build consistent; theme-able React apps based on constraint-based design principles.

This way of working allows you, your product team, and the UI/UX team to be consistent when making changes. You can define a theming object based on the rules that the UI/UX team gives you.

export default {
  fonts: {
    body: 'system-ui, sans-serif',
    heading: '"Avenir Next", sans-serif',
    monospace: 'Menlo, monospace',
  },
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#33e',
  },
}

You can later use emotion (a CSS-in-JS library) in your components to read the object that youā€™ve defined.

You can also tokenize the above values, so they have a single source of truth.

GitHub - system-ui/theme-ui: Build consistent, themeable React apps based on constraint-based design principles

Transform SVGs into React components
SVGR is an SVG to React transformer. The transformed SVG will be a simple React component that becomes highly configurable. SVGR is available as a module, webpack plugin or via CLI.

SVGR - SVGR

Framer motion
As an addition to the SVG part, you can use Framer Xā€™s motion library to power your transformed SVG with fluid cross-device animations.

Motion - JavaScript & React animation library

Infinite Red Ignite
Infinite Red has released a new version of their React Native boilerplate tooling called Ignite. Check it out, itā€™s incredible!

GitHub - infinitered/ignite

Besides Ignite, Infinite Red also offers a tool called ReactorTron: a desktop app for inspecting your React and React Native projects on macOS, Linux, and Windows.

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

Mobx state tree
An Opinionated, transactional, MobX powered state container. That is combining the best features of the immutable and mutable world for an optimal DX.

mobxjs/mobx-state-tree

Besides MobX, Overmind was also mentioned as a proper state container https://overmindjs.org/

I donā€™t use MobX, but it was refreshing to see whatā€™s possible

Next level NextJS 9
Tim did a live coding session with Zeitā€™s product NextJS. It was interesting to see what new features have been added since the time I first tried it (over a year ago). It now has zero-config TypeScript support, file-based dynamic routing, automatic static optimization, and many more features.

Next.js 9

Video thumbnail: React Live Conference 2019 - Aftermovie ā–¶ Watch ā€œReact Live Conference 2019 - Aftermovieā€ on YouTube

Fun fact: During the talks, we had WiFi problems, and as you can imagine, thatā€™s not ideal for a live coding conference. šŸ˜… Luckily they managed to fix it rather quickly by providing a UTP cable for the speakers. Shout out to the team!

]]> āš”ļø Build your own CLI power tool using NodeJS https://www.0x1ad2.dev/blog/build-your-own-cli-power-tool-using-nodejs https://www.0x1ad2.dev/blog/build-your-own-cli-power-tool-using-nodejs Sun, 28 Jul 2019 00:00:00 GMT Dennis Bruijn Automate setting up a new machine with a small Node.js CLI that uses Enquirer and Homebrew to install the apps you always need. nodejs cli tutorial Banner with a cartoon robot and the title Build your own CLI power tool using NodeJS, with Node.js and Sytac logos

Hopefully, some of you can relate to the following problem. You buy yourself a new machine or get a new device from a client to work with. You go to the process of installing, updating, and configuring the device. Even worse when youā€™re done store your work in a safe place, sign off across the system and format your SSD.

What are we using

NodeJS
NodeJS is a cross-platform JavaScript run-time that executes JavaScript code outside of the browser. NodeJS lets developers use JavaScript to write command-line tools and server-side applications.

Enquirer
Enquirer is fast, easy to use, and lightweight system to build stylish, intuitive, and user-friendly prompts.
https://github.com/enquirer/enquirer

What are we building

For this use case, we can make ourselves a powerful command-line interface to automate some of these tasks. Since NodeJS allows us to write and execute code that primarily interacts with the system disk and network, tasks like downloading and installing binaries will become a breeze.

Setup a new project

Make sure youā€™ve got a terminal of choice set up (I use Zsh with oh-my-zsh). Also, get homebrew for Mac so we can fetch binaries and install them via CLI commands.

1.) Create a new directory called ā€œnode-power-cliā€

$ mkdir ~/Projects/node-power-cli

2.) Traverse into that directory

$ cd ~/Projects/node-power-cli

3.) Grab the MIT license and add it to the project

$ npx license mit > LICENSE

4.) Add a .gitignore file to the project

$ npx gitignore node

5.) Generate a new package.json file

$ npm init -y

6.) Create a new file

$ touch power-cli.js

7.) Allow the file to be executed

$ chmod u+x power-cli.js

8.) Edit the new file

$ code power-cli.js

#! /usr/bin/env node
// will tell shell enviroment which program it needs execute this, in our case it's node
// always run your code in strict mode
"use strict";

console.log(`My first Node CLI app šŸŽ‰`);

To execute your NodeJS script, you can use the following command $ ./power-cli.js To execute your NodeJS script, you can use the following command $ ./power-cli.js

If youā€™ve not seen npx before, it searches locally to see if there is a command to run and executes it. If there is no local command, it will try to download, install the command from npm, and run it. This is useful when generating new projects and saves you from globally installing a lot of stuff.

Add and use Enquirer

1.) Install Enquirer

$ npm install enquirer --save

2.) Define your list of frequently used binaries

// make a list of frequently used binaries
const frequentlyUsedBinaries = [
  "iterm2",
  "visual-studio-code",
  "google-chrome",
  "zsh",
  "whatsapp",
  "spectacle",
  "spotify",
  "slack",
  "github",
  "node",
  "grammarly",
  "figma"
];

3.) Add multi-select prompt

// require the enquirer module
const { MultiSelect } = require("enquirer");

// create a new multi select prompt
const multiSelectPrompt = new MultiSelect({
  name: "value",
  message: "Select all the binaries that you want to install",
  choices: frequentlyUsedBinaries
});

// run the prompt and handle the answer
multiSelectPrompt
  .run()
  .then(binaries => {
    console.log("Selected binaries:", binaries);
  })
  .catch(console.error);

To execute your NodeJS script, you can use the following command $ ./power-cli.js To execute your NodeJS script, you can use the following command $ ./power-cli.js

Execute CLI commands

Now we get an answer from the multi-select prompt, and we can parse that to a function to generate a command-line string. After that use brew to install all the selected binaries.

// require utility tools and child_process exec to execute CLI commands
const util = require("util");
const exec = util.promisify(require("child_process").exec);

// define a async function execute commands
async function executeCommands(CommandLineString) {
  const { stdout, stderr } = await exec(CommandLineString);
  console.log("Standard output:", stdout);
  console.log("Standard error:", stderr);
}

// create command line string
function getCommandLIneString(binaries) {
  return binaries
    .map(binary => {
      return `brew cask install ${binary} &&`;
    })
    .join()
    .replace(/,/g, " ")
    .slice(0, -3);
}

// run the prompt and handle the answer
multiSelectPrompt
  .run()
  .then(binaries => {
    console.log("Selected binaries:", binaries);
    console.log("Installing them all");
    executeCommands(getCommandLIneString(binaries));
  })
  .catch(console.error);

Run it!

Now weā€™re done and we can run the program and see if it works the way we expected.

Select the binaries that you want and hit ENTER Select the binaries that you want and hit ENTER

Terminal output of power-cli.js installing Grammarly and Firefox through Homebrew casks

Thatā€™s it. Thereā€™s your first ā€œfriendly & powerfulā€ command-line tool that you can extend with all the possibilities youā€™ve got in mindā€Šā€”ā€ŠE.G., a feature that sets your default user preferences for macOS.

If you have any questions? Either comment on this story or tweet me at @0x1ad2 If you want to check out the project yourself hereā€™s the Github repository.

]]> šŸ‡«šŸ‡· React Europe 2018 https://www.0x1ad2.dev/blog/react-europe-2018 https://www.0x1ad2.dev/blog/react-europe-2018 Sun, 20 May 2018 00:00:00 GMT Dennis Bruijn Highlights from React Europe 2018: the Context API, new lifecycle methods, Suspense, Apollo, Replicated Redux, CodeSandbox and Lona. react conference graphql ReactEurope 2018 banner over photos of the conference audience and the Eiffel Tower

I visited React Europe with my colleague Peter. The conference hold in France just like the previous years. It allowed us to learn a lot of new things about React, GraphQL, React Native, and Reason. Also, a lot of excellent product releases šŸ’•

Hereā€™s a break down with the things I loved the most

React

Keynote

It all started with an all-American šŸ‡ŗšŸ‡ø keynote from Ken Wheeler he told us about The state of React, probably a reference to the American State of the Union, I would vote for Ken as President of the React Community (spreading some love here šŸ’™).

Context API
Context provides a way to pass data through the component tree without having to pass props down manually at every level. So basically teleporting data between components.

There are two main steps to set up the Context API into your application
1. add a context provider & define the data you want to store
2. use a context consumer where ever you need the data from the store

Want a code example? Head over to https://legacy.reactjs.org/docs/context.html

New lifecycle methods
We all know the current component lifecycles (componentWillMount, componentWillReceiveProps, and componentWillUpdate). These also happen to be the lifecycles that cause the most confusion within the React community. For these reasons, Facebook is going to deprecate those methods in favor of better alternatives. Those alternatives would be the following.

1. getDerivedStateFromProps is being added as a safer alternative to the legacy componentWillReceiveProps.

2. getSnapshotBeforeUpdate is being added to support safely reading properties from e.g. the DOM before updates are made.

All the legacy lifecycle methods will be available until react 17 comes around the corner, for then the lifecycle methods will be prefixed by ā€œUNSAFE_ā€ to indicate that they might cause issues.

React lifecycle diagram with render, pre-commit and commit phases, including getDerivedStateFromProps and getSnapshotBeforeUpdate

Suspense
And there was React Suspense, it was everywhere, everyone was talking about it Suspense jokes everywhere, even the React Europe cup we got some Suspense stuff on it.

In short: the new feature allows you to defer rendering part of your application tree until some condition is met e.g. loading data from an endpoint or when a resource is loaded.

The mechanism basically works like this as explained by @acdlite
- in the render method, read a value from the cache.
- if the value is already cached, the render continues like normal
- if the value is not already cached, the cache *throws a promise*
- when the promise resolves, React retries where it left off

A good example of suspense would be async placeholders, hereā€™s a code example

import React, { Fragment } from "react";

function Placeholder({ delayMs, fallbackUI, children }) {
  return (
    <React.Timeout ms={delayMs}>
      {didTimeout => {
        return (
          <Fragment>
            <span hidden={didTimeout}>{children}</span>
            {didTimeout ? fallbackUI : null}
          </Fragment>
        );
      }}
    </React.Timeout>
  );
}

export default Placeholder;

thanks to Peggy Rayzis!

Placeholder.js on GitHub Gist

Video thumbnail: Keynote - @Ken_Wheeler at @ReactEurope 2018 ā–¶ Watch ā€œKeynote - @Ken_Wheeler at @ReactEurope 2018ā€ on YouTube

The Case for Whimsy
Joshua Comeau give an awesome talk about The Case for Whimsy, we usually tend to just craft new features and fix bugs but besides that, we could also build fun things e.g. at Khan Academy, they fill the userā€™s screen with confetti rain when they get 100% correct on an exercise. Thatā€™s pure joy, go make something fun!

Animated illustration of confetti, party hats and champagne bottles

Video thumbnail: The Case for Whimsy - Joshua Comeau aka @joshwcomeau at @ReactEurope 2018 ā–¶ Watch ā€œThe Case for Whimsy - Joshua Comeau aka @joshwcomeau at @ReactEurope 2018ā€ on YouTube

On Apollo
Peggy Rayzis is an Open Source Engineer **@**apollographql the talk was created around the future of Apollo, whatā€™s available right now and whatā€™s the next big thing in the near future.

The new 2.1 version of Appolo now supports Render Props šŸŽ‰ a component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.

And of course, coming in 2018, Suspense support!

Video thumbnail: A Journey Through React Apollo - Peggy Rayzis aka @peggyrayzis at @ReactEurope 2018 ā–¶ Watch ā€œA Journey Through React Apollo - Peggy Rayzis aka @peggyrayzis at @ReactEurope 2018ā€ on YouTube

Replicated Redux
Jim Purbrick is doing awesome things in ReactVR on the Oculus team at Facebook. He showed us the potential of Redux for building networked ReactVR applications.

Avatars gathered around a colourful board game table in a networked React VR room

Reduxā€™s reified events, serializable actions and state, middleware, side effect free functional reducers and time travel superpowers make it well suited for building simple, networked, testable decoupled simulations.

Video thumbnail: Replicated Redux - Jim Purbrick aka @JimPurbrick at @ReactEurope 2018 ā–¶ Watch ā€œReplicated Redux - Jim Purbrick aka @JimPurbrick at @ReactEurope 2018ā€ on YouTube

A year of CodeSandbox
Ives van Hoorne is the owner of one of the most awesome products currently around, itā€™s called CodeSandBox, CodeSandbox is an online editor that helps you create web applications, from prototype to deployment.

CodeSandbox recently turned one year old and gave him some valuable insights heā€™s shared that in his talk ā¬‡ļø

Video thumbnail: A year of CodeSandbox - Ives van Hoorne aka @CompuIves at @ReactEurope 2018 ā–¶ Watch ā€œA year of CodeSandbox - Ives van Hoorne aka @CompuIves at @ReactEurope 2018ā€ on YouTube

Beyond React

Devin Abbott is a software engineer working at AirbnbEng heā€™s currently working on Lona, a perfect fit for a gap that a lot of companies have, a bridge between design and development. Lona is a design tool that allows you to design flexible, compassable component systems and transpile these components into any language on any platform, such as Swift components on iOS, or Kotlin components on Android.

Video thumbnail: Beyond React - Devin Abbott aka @dvnabbott at @ReactEurope 2018 ā–¶ Watch ā€œBeyond React - Devin Abbott aka @dvnabbott at @ReactEurope 2018ā€ on YouTube

Check out the Github repo https://github.com/Lona/Lona this tool is šŸ”„

And last but not least Bridging React Native Back to its Roots

An epic talk by @vincentrimer heā€™s a software engineer at Symantec he released React Native DOM an experimental, comprehensive port of React Native to the web. Itā€™s multithreaded by default, build with the same bundler and it has the same layout behaviour as React Native on mobile.

Video thumbnail: Bridging React Native Back to its Roots - Vincent Riemer (@vincentriemer) at @ReactEurope 2018 ā–¶ Watch ā€œBridging React Native Back to its Roots - Vincent Riemer (@vincentriemer) at @ReactEurope 2018ā€ on YouTube

Check out the Github repo https://github.com/vincentriemer/react-native-dom

]]> šŸ‘ØšŸ»ā€šŸ’» GDG DevFest 2017 https://www.0x1ad2.dev/blog/gdg-devfest-2017 https://www.0x1ad2.dev/blog/gdg-devfest-2017 Wed, 22 Nov 2017 00:00:00 GMT Dennis Bruijn Notes from GDG DevFest 2017 in Amsterdam: Google's machine learning APIs, an early look at Flutter and real-time data lessons from BUX. conference google flutter Last weekend I visited GDG DevFest 2017 at the University of Amsterdam. This conference is the biggest Google related event in The Netherlands, carefully crafted by the GDG community!

Credits to @elizacamber Credits to @elizacamber

Usually, the conference is visited by approximately 500 attendees and speakers all over the world, several of these attendees are GDEā€™s (Google Developer Experts) so thereā€™s a lot to learn šŸ§ 

Every year there are three parallel lecture tracks dedicated to Mobile, Web & Cloud technologies.

Machine Learning APIs and how to get the most of it

In this session, we dived into what the different Google Cloud Machine Learning APIs can do. We combined various solutions to get an interesting results and they even released a new feature called Google speech API timestamps

Collage of a Google Cloud machine learning talk, a slide on two ways to benefit from ML and the GDG DevFest Netherlands banner

Creating your first flutter app

Flutter is a new cross-platform SDK from Google to create Android and iOS apps with a single-codebase written in Dart.

It allows fast development through a feature we already knew from React Native called hot reload. Hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster.

Collage of the ā€œCreating your first flutter appā€ talk, a code slide and the audience

Flutter has built-in beautiful Material Design and Cupertino (iOS-flavor) widgets, rich motion APIs, smooth natural scrolling, and platform awareness to delivery the best experience to the client.

It also allows access to native features and SDKs

āš  ļøBe aware of the fact that flutter is still in ALPHA

Designing a real-time data application: a case study on the stock market

Applications that require data from real-time events impose their own challenges. How to store data? Can you cache data at all? How to make sure data that is constantly changing is consistent throughout the app?

Collage of the BUX talk ā€œDesigning a real-time data application: a case study on the stock marketā€ and its slide on how trades are matched

The guys at BUX have quite a lot experience with this and where happy to share their best practices. I think the main lesson for me was:

If a technology works (has proven itself) stick with it but do not be afraid to experiment with upcoming technologies.

They just completed a ā‚¬10.6 million funding round so I think youā€™ll see them around.

Altogether I had an amazing day! Attended serval cool talks, met new and old friends and was able to write some code in between. See you next year!

Collage of a laptop with code open, a sandwich lunch and the GDG DevFest Netherlands banner

Douglas Adams quote ā€œI may not have gone where I intended to go, but I think I have ended up where I needed to beā€ above DevFest swag: a fidget spinner, a notebook and an Android sticker

]]> šŸ”„ Firebase Dev Summit 2017 https://www.0x1ad2.dev/blog/firebase-dev-summit-2017 https://www.0x1ad2.dev/blog/firebase-dev-summit-2017 Tue, 31 Oct 2017 00:00:00 GMT Dennis Bruijn What Google showed at the Firebase Dev Summit 2017 in Amsterdam, from Crashlytics and Predictions to Cloud Firestore. conference firebase google Today I visited the Firebase Dev Summit in Amsterdam šŸ‡³šŸ‡± This summit showcased the latest product releases and features. We learned how Firebase helps to solve key infrastructure & growth challenges that the industry faces.

The Muziekgebouw aan 't IJ and Bimhuis venue on the Amsterdam waterfront

Huh, Firebase Dev Summit?

The Firebase Dev Summit is an annual event held by Google. Every year a country is selected to host the summit and the event is mostly based around Firebase.

Since Firebase isnā€™t just a real-time database anymore but a platform that helps developers build, analyze and grow there is a lot of awesome knowledge that could be shared.

Whatā€™s new in Firebase?

Basically, Google integrated Crashlytics into Firebase, enabled first-class A/B support and take their first step in bringing the power of Machine Learning šŸ¤– into Firebase with a new product called Predictions.

Predictions automatically create dynamic user groups based on predicted behaviour from your analytics, you can use these predictions i.e. to send users who are about to churn in the next 7 days a customised notification

Firebase Predictions illustration: players grouped by predicted behaviour, with those about to churn offered three extra lives

They are also working hard to prepare for the General Data Protection Regulation (GDPR) across Firebase and they are committed to helping us (developers) succeed under it.

Talks, talks, talks!

Iā€™ve tried to attend the talks that were most aligned with my day to day job as a front-end web developer. And to sum it up, the most exciting feature for me isā€¦Cloud Firestore! šŸŽ‰

Cloud Firestore diagram of phones, tablets and laptops syncing a shared list through the cloud

A fully-managed NoSQL document database for mobile and web app development. It operates using documents and collections as a data model.

It allows for expressive queries. Queries scale with the size of your result set, not the size of your data set.

So youā€™ll get the same performance fetching 1 result from a set of 100, or 100,000,000

Firestore syncs data between devices, enables offline data access through an on-device database and they provide SDKā€™s for Node, Python, Go, and Java.

Firebase Dev Summit 2017 attendee badge next to a cup of coffee

I had an amazing day!

Did meet some new people, a couple I already knew, and some I used to work with in the past.

The food was delicious, the venue was perfect and it had all the features I think a conference needs to be able to offer their attendees.

Collage of the keynote stage at Firebase Dev Summit 2017 and slides about building and growing apps

Collage of speakers on stage, a code slide and the audience at Firebase Dev Summit

Collage of a talk building an app with Cloud Storage, Authentication and Cloud Firestore, including live coding

Collage of a fastlane talk asking ā€œHow would you like 2 extra hours every week?ā€ next to a list of release-day excuses

Collage of a serverless talk showing an app with client SDKs talking directly to Cloud Firestore

]]> šŸ¦‘ Simplify testing your local environment on physical devices by using Squid https://www.0x1ad2.dev/blog/test-local-environments-on-physical-devices-with-squid https://www.0x1ad2.dev/blog/test-local-environments-on-physical-devices-with-squid Wed, 20 Sep 2017 00:00:00 GMT Dennis Bruijn Route a phone's traffic through SquidMan on your Mac so cookies, headers and hosts-file entries keep working when you test on real devices. testing mobile devtools Banner with a pink octopus: Simplify testing your local environment on physical devices by using Squid

Big companies use a lot of HTTP cookies šŸŖ to store all the information you need to interact with the application in a proper way. Besides using cookies there are other things to take care of like setting HTTP request headers or tweak your application to fix HTTP access control issues.

If you are working on your local machine and have setup all these things everything works well but when you need to test it outside of this machine i.e. on a physical Android or iOS device itā€™s a hard to get it all working.

Hereā€™s where squid comes in

squid : Optimising Web Delivery

Basically, squid allows you to forward all your device requests through your machine so everything youā€™ve set stays set.

Squid is a fully-featured HTTP/1.0 proxy which is almost (but not quiteā€Šā€”ā€Šweā€™re getting there!) a fully-featured HTTP/1.1 proxy. Squid offers a rich access control, authorization and logging environment to develop web proxy and content serving applications.

How to install it?

I would recommend using SquidMan for configuring and running, SquidMan is a graphical installer and manager for the Squid proxy cache.

You can install SquidMan trough a brew cask

$ brew cask install squidman

Configure squid to use your OS host file

SquidMan 3.8 window showing ā€œSquid is not runningā€ and a Start Squid button

When you launch SquidMan you would see the following window, go to SquidMan > Preferences to configure it.

SquidMan General preferences with the HTTP port set to 7777

Once there go to General and change the port a less used one i.e. 7777.
After that go to template and add the following, if not already set.

#host file
hosts_file /etc/hosts

SquidMan Template preferences with hosts_file /etc/hosts added at the end of the Squid configuration

This means that SquidMan would use your local machine itā€™s hosts(file) to route the traffic trough.

Now press the save button and start SquidMan to use it.

Configure squid on your iPhone to forward traffic

Unlock your phone, go to Wifi networks (make sure you are on the same network as your machine) and press the ( i ) icon next to the network. This will open up network settings.

iPhone Wi-Fi network details with the HTTP proxy currently set to Off

Click on configure proxy Manual and configure based upon your SquidMan settings.

iPhone Configure Proxy screen set to Manual with server 10.0.30.189 and port 7777

Configure squid on your Android phone to forward traffic

Unlock your phone, go to Connections (make sure you are on the same network as your machine) and long-press the SSID (network name).

Android Connections settings with Wi-Fi turned on

This will open up a pop-up, click on Manage network settings.

Android Wi-Fi list with a long-press menu offering Forget network, Manage network settings and Write to NFC tag

Another screen pops-up.

Android network dialog with advanced options shown, proxy set to Manual, host 10.0.30.189 and port 7777

Click on show advanced options, proxy Manual and configure based upon your SquidMan settings.

Press save and youā€™re done you can now visit your http://local-development-url.host on your mobile device through a proxy on your local machine. šŸ™ŒšŸ¼ šŸš€

]]> šŸ’Ž Visual Studio Code treasures https://www.0x1ad2.dev/blog/visual-studio-code-treasures https://www.0x1ad2.dev/blog/visual-studio-code-treasures Mon, 17 Jul 2017 00:00:00 GMT Dennis Bruijn A list of Visual Studio Code extensions I can't live without, from Prettier and Quokka to GitLens and Import Cost. vscode devtools Visual Studio Code Treasures title card with a treasure chest full of gems

It has almost been a year since I published my story about Atom the hackable text editor from our friends at GitHub hereā€™s my take on VS Code šŸ‘‡šŸ¼

@Microsoft did an exceptional job by creating a super performant and flexible editor. Thereā€™s a big community behind it and itā€™s constantly improving. Besides flexibility and performance, it also offers IntelliSense, interactive debugging and build-in GIT commands.

If you havenā€™t switched yet, give it a try and let me know what you think about it.

Visual Studio Code

How to install extensions?

Installing extensions in Visual Studio Code is a breeze! Launch Visual Studio Code Quick Open with Ctrl+P (āŒ˜P) and paste the extension installation command in there: ext install prettier-vscode

Another thing you can do is open the extensions marketplace by clicking on the extension icon in Visual Studio Code Another thing you can do is open the extensions marketplace by clicking on the extension icon in Visual Studio Code

The list

Prettier

This extension enables you to use Prettier in your projects.

Prettier - Code formatter - Visual Studio Marketplace

Prettier is an opinionated code formatter with support for: JavaScript, (including ES2017) JSX, Flow, TypeScript, CSS, LESS, SCSS, JSON and GraphQL

You can learn more about prettier by watching this React Conf video.

Video thumbnail: āš”ļø - James Long - A Prettier Printer (plus bonus clip!) - React Conf 2017 ā–¶ Watch ā€œāš”ļø - James Long - A Prettier Printer (plus bonus clip!) - React Conf 2017ā€ on YouTube

Quokka

This extension enables you to use Quokka.js in your projects.

Quokka.js - Visual Studio Marketplace

Quokka.js is a rapid prototyping playground for JavaScript and TypeScript. It runs your code immediately as you type and displays various execution results in your code editor.

Quokka.js showing the value of a JavaScript object inline as it is typed

Use command Start on current file from the quokka.js command list or press Ctrl+K(āŒ˜K)

Import Cost

This extension enables you to display import/require package size inside the file you are working in.

Import Cost - Visual Studio Marketplace

Import Cost showing the size of each imported package next to its import line

ESLint

This extension enables you to use ESLint. ESLint is an open source JavaScript linting utility originally created by Nicholas C. Zakas in June 2013. Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesnā€™t adhere to certain style guidelines. There are code linters for most programming languages, and compilers sometimes incorporate linting into the compilation process.

ESLint - Visual Studio Marketplace

ESLint problems panel in VS Code listing lint errors for the open files

Markdown all in one

This extension enables you to have keyboard shortcuts (toggle bold, italic, code span and heading), a table of contents generator, automatically show preview, list editing and much more.

Markdown All in One - Visual Studio Marketplace

Because we all ā¤ Markdown, donā€™t we?

Project manager

This extension allows you to manage multiple projects inside visual studio code, the projects are listed in a projects.json that gives you full control over names and paths

Project Manager - Visual Studio Marketplace

Command palette filtered to Project Manager commands to edit, list, refresh and save projects

Regex previewer

This extension enables you to validate your regular expressions in real-time.

Regex Previewer - Visual Studio Marketplace

Shows the current regular expression matches in a side-by-side document. This can be turned on/off with Ctrl+Alt+M (āŒ„āŒ˜M).

Regex Previewer highlighting matches of an email regular expression in a side-by-side sample file

Settings sync

This extension enables you to synchronize: settings, snippets, themes, file icons, key bindings, workspaces and extensions across multiple machines using GitHub gist.

Settings Sync - Visual Studio Marketplace

It basically does the same as sync-settings did in Atom

Auto close tag

This extension allows you to automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

Auto Close Tag - Visual Studio Marketplace

Auto Close Tag adding the closing HTML tag while typing in test.html

Path intellisense

This extension enables auto completion of file paths in your HTML tags.

Path Intellisense - Visual Studio Marketplace

Path Intellisense suggesting file paths while editing an HTML file in a small project

Auto rename tag

This extension allows you to automatically rename paired HTML/XML tag.

Auto Rename Tag - Visual Studio Marketplace

Auto Rename Tag renaming the matching closing tag as an opening HTML tag is edited

Change case

This extension enables you to quickly change the case of the current selection or current word, you can change the cases to camelCase, CONSTANT_CASE, snake_case, kebab-case, etc.

change-case - Visual Studio Marketplace

Change Case converting selected identifiers in a TypeScript file between casings

Stylelint

This extension enables you to use Stylelint in your project, Styelint is a modern CSS linter and fixer that helps you avoid errors and enforce consistent conventions in your stylesheets.

stylelint - Visual Studio Marketplace

Stylelint warnings for a CSS rule with a universal selector, an unspaced calc operator and trailing zeros

Donā€™t forget to add a .stylelintrc config file to your project root. https://stylelint.io/user-guide/configure/

Git Lens

This extension supercharges the built-in Visual Studio Code Git capabilities. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore the history of a file or branch, gain valuable insights via powerful comparison commands, and so much more.

GitLens - Git supercharged - Visual Studio Marketplace

TODO Highlight

This extension allows you to highlight TODOs, FIXMEs, and any keywords, annotations.

TODO Highlight - Visual Studio Marketplace

TODO Highlight colouring TODO and FIXME comments in a JavaScript file

SVG Viewer

This extension enables you to view SVGā€™s on the fly, just right click the file and view.

SVG Viewer - Visual Studio Marketplace

SVG Viewer previewing an SVG file opened from the VS Code explorer

Extra

Color Info

This extension enables you to view color information specifics on a color entry in CSS.

Color Info - Visual Studio Marketplace

Color Info hover showing a colour swatch with its RGB, HSL, CMYK, hex and alpha values

VScode icons

This extension enables you to have specific file icons for almost every extension. By default Visual Studio Code now uses seti as icon pack, this is why I didnā€™t list VScode icons in the main list.

vscode-icons - Visual Studio Marketplace

You can see it in action here

vscode-icons giving each file type its own icon in the VS Code explorer

VS Code Spotify

This extensions allows you to use Spotify inside Visual Studio Code.

vscode-spotify - Visual Studio Marketplace

VS Code status bar with vscode-spotify playback controls and the current track

Calculate

This extension allows you to do evaluate your math.

Calculate - Visual Studio Marketplace

Calculate evaluating sums like 1+1 and 5^5 in an untitled file

Insert Numbers

This extension allows you to insert incrementing/decrementing numbers with a custom starting point.

Insert Numbers - Visual Studio Marketplace

Insert Numbers adding incrementing numbers at several cursors in a C struct

Did I miss something powerful? āš”

If thereā€™s a good extension available thatā€™s not listed, please let me know in the comments. I tried to create a list of extensions that fit well into the generic workflow of a web developer. I might do a write up on specifics if requested, there are pretty powerful extensions out there if you are an Angular or React developer.

]]> šŸ”¦ How to create a PWA with a 90+ score in Google Lighthouse using Ionic 2 https://www.0x1ad2.dev/blog/pwa-with-a-90-lighthouse-score-using-ionic-2 https://www.0x1ad2.dev/blog/pwa-with-a-90-lighthouse-score-using-ionic-2 Wed, 22 Mar 2017 00:00:00 GMT Dennis Bruijn How I built an Ionic 2 Progressive Web App that scores 99 in Google Lighthouse, from enabling the service worker to Firebase Hosting. pwa ionic performance firebase Lighthouse on a rocky coastline under a blue sky

I just created a Progressive Web App that scores 99 out of 100 in the Lighthouse auditing report. I used Ionic 2 (Angular) to get the results I wanted, hereā€™s how I did it:

Install Ionic globally

To use the Ionic CLI we fist need to install Ionic globally.

$ sudo npm install -g ionic cordova

Create a new blank Ionic 2 project

After that we can make a new Ionic 2 project by executing the following command using the Ionic CLI.

$ ionic start MyPWA blankā€Šā€”ā€Šv2

Serve the application

Execute the ionic serve command to serve the application in your browser. Serving the application in the browser automatically creates a web based build of your Ionic project.

$ ionic serve

Install Lighthouse for Google Chrome

Click here and install Lighthouse. After installation and icon will appear.

Google Lighthouse logo: a striped lighthouse under a starry night sky

Run Lighthouse to generate a report

If you click on the Lighthouse icon it will do some tests and generate a report.

You need to close Chrome Developer tools to be able to run the test.

First Lighthouse report scoring the Ionic app 60 out of 100, failing offline support, load performance and progressive enhancement

Optimize šŸ“ˆ

1. App can load on offline/flaky connections

Ensuring your web app can respond when the network connection is unavailable or flaky is critical to providing your users a good experience. This is achieved through the use of a Service Worker.

You can enable the Service Worker in Ionic by un-commenting the Service Worker part in the index.html

Commented-out service worker registration script in Ionic's index.html

After enabling you automatically resolve the Service Worker fail under User can be prompted to Add to Homescreen

2. Site is progressively enhanced

Progressive enhancement means that everyone can access the basic content and functionality of a page in any browser, and those without certain browser features may receive a reduced but still functional experience.

Weā€™re going to add some code to our index.html file to let the user know that they need to enable JavaScript to get the full experience. Ionic wouldnā€™t be able to provide a functional experience without using JavaScript.

<noscript>
  <h1>You donā€™t have javascript enabled.</h1>
  <p>Please enable it to get the full experience.</p>
</noscript>

4. Page load performance is fast

Users notice if sites and apps donā€™t perform well and that will give them a bad experience. To pass this point in the report letā€™s make a production build using Ionic CLIā€™s build command and theā€Šā€”ā€Šprod flag.

$ ionic buildā€Šā€”ā€Šprod

Create a secure hosting environment using Firebase šŸ”„

Head to Firebase and create an account. Once your account has been created go to the Firebase console to create a new project.

Firebase console Create a project dialog with the project name MyPWA and region Netherlands

Thatā€™s it youā€™ve created your first Firebase project šŸŽ‰

Firebase console overview of the new MyPWA project with options to add Firebase to iOS, Android and web apps

As youā€™ve might have noticed Firebase includes a lot of features from analytics, to cloud messaging to hosting. We are going to use the last one to host our PWA in a secure environment.

Deploy šŸ“¦

We can deploy to Firebase by using the Firebase CLI login, init & deploy commands. First, you need to login into your Firebase account (a web browser will pop-up).

$ firebase login

After that traverse to the right directory and execute Firebase init, select hosting and select the project weā€™ve created above.

$ firebase init

Terminal running firebase init and asking which Firebase features to set up

Set the www folder as default

firebase init Hosting setup asking for the public directory, answered with www

After initializing the project we can simply deploy the application to Firebase by executing.

$ firebase deploy

Terminal output of firebase deploy uploading 33 files from www and printing the hosting URL

Thatā€™s it weā€™ve deployed our package šŸ‘šŸ»

Run Lighthouse (again) to generate a report

Click on the lighthouse icon when in your Firebase environment, again it will do some tests and generate a report. This time, and most of the times it will generate a 90+ score.

Lighthouse report scoring the deployed PWA 99 out of 100 with every progressive web app audit passing

100 out of 100?

If you want to get a perfect score you should need to optimize more. Due to the way Ionic was build the first meaningful paint, perceptual speed index, time to interactive are higher than recommended. In my opinion, this wouldnā€™t be an issue but thereā€™s always room for improvement.

We can measure our application by applying the RAIL method. RAIL is a user-centric performance model. Every web app has these four distinct aspects to its life cycle, and performance fits into them in different ways:

The RAIL performance model: Response, Animation, Idle and Load

There a couple of ways to improve the performance, the two main parts would be Optimizing Content Efficiency & adjusting the Critical Rendering Path

Diagram comparing optimized progressive rendering, which shows content from 0.3 seconds, with unoptimized rendering that stays blank until 1.5 seconds

]]> Fingerprint end-to-end encryption https://www.0x1ad2.dev/blog/fingerprint-end-to-end-encryption https://www.0x1ad2.dev/blog/fingerprint-end-to-end-encryption Fri, 19 Aug 2016 00:00:00 GMT Dennis Bruijn Improved endpoint security using FE2EE: an idea for requiring a fingerprint scan before you can read end-to-end encrypted messages. security encryption Green title card with a fingerprint: Fingerprint end-to-end encryption, improved endpoint security using FE2EE

šŸ”‘ What is E2EE?

According to Wikipedia End-to-end encryption (E2EE) is a system of communication where only the communicating users can read the messages. In principle, it prevents potential eavesdroppersā€Šā€”ā€Šincluding telecom providers, Internet providers, and even the provider of the communication serviceā€Šā€”ā€Šfrom being able to access the cryptographic keys needed to decrypt the conversation.

https://www.wired.com/2016/05/allo-duo-google-finally-encrypts-conversations-end-end/ https://www.wired.com/2016/05/allo-duo-google-finally-encrypts-conversations-end-end/

šŸ’” What is FE2EE?

FE2EE stands for Fingerprint end-to-end encryption Itā€™s just a made up term based on my idea on how we could improve end-to-end encryption or at least the authentication around end-to-end encryption.

In a nutshell: applications should allow users to switch on FE2EE. After that, a fingerprint scan is required to authenticate that the receiver is the owner of the device and thus is authorized to read the contents of that message.

šŸ›  A good way to implement FE2EE?

Existing applications should be able to keep their current E2EE techniques/features the fingerprint only adds a level of authentication. And must be enabled throughout the settings panel of the application (so you can opt-in if you want).

After the authenticity of the user is validated. The user should have the possibility to edit the level of (re)authentication. I can imagine a user would just want to receive an authentication request on app start or maybe before each message.

Note: This is just an idea on how to implement it if you think thereā€™s a better/safer/easier way, please share it.

šŸ“± How could FE2EE be used on my phone?

Some iOS and Android devices can do fingerprint scans (a biometric scanner module on your device is required). It allows the devices to perform the most secure security check to date.

Note: Although fingerprint scanning has already be hacked a couple of times by the Chaos Computer Club itā€™s still much safer than a passcode or pattern.

āœļø Share you toughts

Please share your toughs below, tweet me or send me an email. Also if you have some constructive feedback on my writings please, reach out to me.

]]>