Jacques Lalancette

Vim as an IDE on Windows 10

2020-02-28T00:00:00+00:00

I want the same experience independent of the platform I’m using. For this reason, I’m a die-hard Vim fan. With mosh and FiraCode life is good. On Windows, it has been a challenge to have an excellent vim experience.

Issues with Visual Studio Code:

Vim plugin didn’t work how I wanted. For example: I couldn’t hit 5{tab} to indent a block.
The clipboard didn’t work sometimes. (I still can’t explain it.)
Multiple histories (vim and & Visual Studio Code) means that undo and redo operations are messy.
No relative line numbers making it hard to quickly do 5dd or something when I want to move a code block.
I love splitting windows, but don’t like navigating through tabs.

Several months ago, I started looking for solutions around Neovim, but I had trouble finding something that would support FiraCode’s ligatures. Neovide looked like a possible solution, but there were a few challenges. The biggest one is that it won’t run on my home computer (it builds, but no errors).

I started looking at other solutions.

Running vim through WSL. Disk, i/o with WSL, is usually too slow, and I want to access my local filesystem without symlinks. Additionally, I can’t open Ubuntu in the windows store and don’t want to troubleshoot it.
NeovimGTK’s windows build. While the binary available ran, it wouldn’t display ligatures. I spent a lot of time trying to build it from source with MSYS2 & GTK, but on step 144/145, I always saw this error: fatal error LNK1181: cannot open input file 'gtk-3.lib' msys2

There’s a broad spectrum of possible solutions to get vim working with FiraCode (WSL, building Linux apps on windows, etc…), but in the end here is what I found to work the best.

A week ago, Microsoft released the preview of Windows Terminal. FiraCode works in Windows Terminal with the following settings:

{
  ...
  "profiles": {
    "defaults": {
      // Put settings here that you want to apply to all profiles
      "fontFace": "Fira Code Retina",
      "fontSize": 10,
      "background": "#141414" // Hide the ugly blue.
    },
    ...
  }
  ...
}

Windows Terminal experience.

Chrome store Mosh client connected to VPS.

Blink on an iPad connected to VPS. (Retina screens are so nice…)

Performant CSS Sprite Sheets in React

2020-02-21T00:00:00+00:00

My original implementation for rendering for a single tile was causing performance issues. It was slow because whenever the client added a row (scrolling to the next row/column), there was some lag as it read the 250kb image from the cache for each new tile. This caused my game to drop frames unless the entire (small) map was already on screen. The offending code was something like this:

MapTile.js

import React from react;

export const MapTile = props => (
  <div
    style={{
      // ...
      background: `url(${props.tileset})
        -${props.tileX * TILE_SIZE}px
        -${props.tileY * TILE_SIZE}px`,
    }}
  />
);

I send a Tiled map from the server to the client. These maps use tilesets, which are large images with hundreds of tiles, so I wanted to implement CSS sprite sheets inside of a React component.

My final solution is this:

Create a CSS file containing all of the tileset names used in tiled. For example:

MapTile.module.css

.tilea {
  background-image: url(/assets/tilea.png);
}

Assign the class to the div that holds the tile sheet and only explicitly specify the backgroundPosition with inline styles.

import React from 'react';
import styles from './MapTile.module.css';

export const MapTile = props => (
  <div
    className={styles[props.tileset]}
    style={{
      // ...
      backgroundPosition: `-${props.tileX}px -${props.tileY}px`,
    }}
  />
);

See it in action on YouTube

Scratching an Itch

2020-02-19T00:00:00+00:00

Twenty years ago, I was an exchange student in Japan. I was in the countryside, and my host family didn’t have the internet. In the evenings, I developed a simple online RPG, called Aspereta, in VB6 and DirectX.

A couple of times a year, I get the itch to make a game of some sort. I don’t usually scratch it because making a game can be a lot of work. In January, I had a short trip to Europe that involved a long flight. I started looking at game development using React and React Native.

I saw a few posts on Medium and videos on YouTube that I saved locally for the flight.

I spent the flight playing with react-native-game-engine and its documentation. When I got back home, I spent some time looking into the various options for creating things with React Native. There were some tutorials for using Three, Phaser, etc. with React Native, but there wasn’t much information available on these.

With React Native, I didn’t want to spend my time learning a graphics/game library. I made a basic tilemap with multiple players rendered by react-native-game-engine, but it wasn’t quite what I wanted.

Eventually, after revisiting some resources and examples like Drew Conley - The Danger Crew: Lessons learned from building an RPG in React, Making an RPG with React + Redux, and Making an RPG with React, I settled on building everything in React. I also saw this video series about making an online RPG with a server written in node.

After a week of tinkering, I have a server that sends a Tiled map and lets players walk around, and a client that connects and renders the map.

See it in action on YouTube

Updates for this project: @lost.aeon

Three Months of Development on an iPad

2019-11-10T00:00:00+00:00

For over three months, I wrote (JavaScript) code from my iPad every day. There was one exception when I had to attend a funeral. There are a few gaps on my GitHub profile from when I forgot to push code, or lost track of time in and pushed after midnight. This post is an update after a few more months of consistent usage.

As I’ve outlined before, my setup is simple. I use DigitalOcean and connect to my server with Blink. Once connected, I tmux and vim - old habits die hard. During this time, I’ve encountered a few minor annoyances, and I’ll share them here.

IME change

I map the escape key to capslock in Blink through Settings -> Keyboard -> Special Keys -> Caps as Esc. Most of the time, everything works fine, but I have Japanese and Emoji keyboards enabled, so sometimes this changes the input mode. To fix this unwanted behavior, I turned off General -> Keyboard -> Hardware Keyboard -> Switch Languages using Caps Lock.

Random Zooming

Blink randomly zoom in, just a little bit, just enough to seem off. I’m using a setting of 16px for my font, which might not be the default font size for Blink. It seems to correlate with app switching, or creating a new session. So I need to hit [Command] + [=] whenever I open Blink. When there are phantom zoomed sessions, I need to kill all mosh sessions and reconnect.

Lagging Input

Input lags a little. Mosh smooths it out and it’s only an issue when I’m in vim, and I press [esc]:w[return] then see this: 😢😢😢😢

The ability to write code on an iPad is improving, and while I find myself only reaching for my laptop when I need react/redux dev tools or other advanced debugging tools, the overall experience is enjoyable.

One Month Developing a Web App on an iPad

2019-08-30T00:00:00+00:00

I have been developing a single page app from my iPad for the last four weeks trying to push something to GitHub every day. It all started because I wanted to use GraphQL more. Using GraphQL, Vue, and Onsen UI, I built something similar to the iPhone Calendar app.

Getting Started

It was challenging to get started. I wasn’t sure which tools I needed to to make the process work. I set up a server on DigitalOcean that I connect to using Mosh, and I edit my code using tmux and vim. Secure ShellFish and using Textastic as a code editor worked well too.

Once I could write code, I struggled to find a substitute for developer tools. I tried Firebug Lite, but no console output from page loading and multiple taps to load it was too much. I also struggled with Safari caching things. I discovered Inspect, and I was skeptical about buying Inspect because it didn’t have a large number fo reviews. After using it for almost a month, it checks all the boxes for me, and I found it helpful to separate Safari (documentation) and debug screen. I also acknowledge that it isn’t at the same level as Chrome’s developer tools.

When I was up and running, hot module reloading (HMR) with Vue wasn’t working, and reloading my entire app.js was slow. For HMR, I needed to allow WebSocket connections to pass through my reverse proxy (Nginx). This post helped me get going.

Results

There are three positive points about developing from the iPad. I enjoy the focused environment of the iPad. I always have battery and internet connectivity. (I can’t stand fiddling with pocket wifi devices, carrying them around and keeping them charged, especially on public transportation. It’s easier to switch contexts for me than with a PC as the tools are separate from my other daily work. It’s worth noting that I have two small children and can’t accurately predict when and where I’ll have time to work on things. I’m willing to sacrifice a little usability for speed and convenience.

The Best Terminal Experience from an iPad

2019-08-25T00:00:00+00:00

Mosh mobile shell is a game-changer. Mosh lets me keep my session even when my IP changes, which means when I change between wifi and 3G, my connection stays. It also instantly shows my input, underlining it until it reaches the server.

The client I use is Blink. I have been using it on my iPad for over three weeks trying to write code on a remote machine running tmux and vim.

Once in a blue moon, something gets tripped up, and I need to kill some phantom mosh sessions that are messing up tmux.

kill `pidof mosh-server`

It’s worth noting that I’ve tried using two different VPS providers. Linode has servers in Tokyo, while DigitalOcean does not. Despite there being 100+ ms more latency with DigitalOcean, the experience is the same. DigitalOcean’s machines built my code faster at the same price point.

From my iPad

2019-08-06T00:00:00+00:00

I built this site solely from my iPad. That was undoubtedly the easy part.

Built using this Lanyon Jekyll Theme and deployed it on GitHub Pages.

How I Learned About Machine Learning

2018-06-01T00:00:00+00:00

Originally an email to a friend in June 2018.

A friend asked me how I got started with machine learning the other day. I found the train and test nature of machine learning addictive, to say the least, and spent 2016 obsessed with the topic. Stealing any moment I could work on a Kaggle problem or read the latest posts that flooded Hacker News at the time. The response below is what I told my friend.

I started with the two courses mentioned in a Medium article. The Udacity course is overly simplistic. After that, I moved to Andrew Ng’s Coursera course – it’s rough, but I plowed through it.

After that, I went on to use this course by Jeremy Howard, which was the most practical. The right balance between theory (all the linear algebra) and implementation (using Keras).

Python Machine Learning was also a good book. When I have the willpower, I try to avoid screens before bed, so I was using this to supplement before bed. Happy to lend you this one if you’re interested.

I also enjoyed listening to Talking Machines during my year of ML. Partially Derivative was also okay, but too focused on politics.

Some of the Kaggle tutorials are helpful too! :)

I haven’t taken this one, but it’s on my radar: https://developers.google.com/machine-learning/crash-course/

If I could do it again, I would do the Udacity course, then take the google and/or fast.ai course and supplement it with a book and the Andrew Ng class.

The Google course on Android development was well done. However, it focuses directly on TF, while fast.ai uses Keras, which can use TF or Theano as a backend.

Why Blog in 2018?

2018-05-01T00:00:00+00:00

Originally posted in May of 2018

Recently, a friend of mine started writing some blog posts, and a few of his first posts were centered around the reason for starting a blog.

When I was younger, I owned the top spot on Google for my name. I had a website at https://jacqueslalancette.com (it redirects here now), which never was home to much. For most of its existence, it just pointed to my Facebook and LinkedIn profile pages. When it had content, I would get snarky comments. While these comments would usually come from people that I had little respect for, it wasn’t enjoyable. So after a while, I just took everything down.

Since then, I was overtaken by #99, a French Canadian stock car driver with the same name. At the same time, I also stopped using most social media sites. I still use Facebook on occasion for messaging.

That said idea of a blog has always been intimidating. I have lived in Japan for my entire adult life, and my writing hasn’t improved since I received poor marks in school. When I write anything in prose, usually at work, my bosses tell to remove the details and turn it into PowerPoint slides. People love bullet points because using them helps people hide behind ambiguity.

On top of that, I was always concerned about the content being perfect enough, profound enough, insightful enough, consistent enough, etc. One day, I realized that it doesn’t matter. I have witnessed a program touching the hands of an end-user for the first time and know nothing is perfect on the first try, in fact usually it’s far from it. Listening to Seth Godin’s Akimbo podcast made me realize that eventually, something I write will resonate with someone and contribute something to them. If it helps one person, it’s enough.