Ambrose's profile

Ambrose

Learning about systems that scale, occasionally taking apart (physical and digital) things. Currently serving NS under the CyberNSF scheme, until 2022.

Moving to pfSense

Quite a while back, I was introduced to pfSense by a friend. At first looks, I didn't much get the benefits of using pfSense over manual iptables or a hardware router. The MakerForce server had been behind a consumer RT-N56U (quite a rock-solid access point cum router), with port forwards, and for a while, fully 1:1 NATed (or "DMZ"). It served us well for quite a while, but recently I noticed some occasional freezes. So, I decided to jump ship and revamp the networking at home.

I began by decommissioning the RT-N56U to just act as an access point. I have two NICs on my main box, and since I didn't have another box and was already running QEMU/KVM, virtualising pfSense was the best and only option.

The two NICs are important, because it allowed me to use one NIC for WAN, and the other for LAN. In virt-manager, I configured the WAN NIC to use macvtap to passthrough into pfSense, and then set up a bridge in the host networking side (I had problems when QEMU managed the bridge). The host bri

The MakerForce Show #0

The MakerForce Show is a podcast recorded, produced and edited by MakerForce. We talk about ideas, hardware, software and occasionally interview friends.

Download: MP3 or OGG (RSS)

#0: try {} catch (e) {}

In this (less technical) episode, we start off the podcast with a quick overview on MakerForce and each of us, then talk about the Google announcement, Arduino merger and Note 7 recall.

Intro music: ZigZag by KevinMacLeod

CSS negative stroke-dashoffsets inconsistencies

SVG line animations are awesome. Having images look as if they are being drawn, live, has a nice effect. CSS-Tricks has a nice article on creating line animations.

While working on a project, I came across this bug in the handling of negative stroke-dashoffset in Safari and Firefox. Here's a pen I forked from Chris Coyier:

See the Pen stroke-dashoffsets by Ambrose Chua (@ambc) on CodePen.

The first one is an animation from stroke-dashoffsets: 0; to stroke-dashoffsets: 820; whereas the second animates to stroke-dashoffsets: -820;. Here's how it renders in Chrome:

You'd expect the lines to start undrawn, right? But here's how it renders in Safari (and Firefox):

Pretty unconventional behaviour, right? To make matters worse, let's reduce the dash lengths. Here's Chrome again:

Safari and Firefox doesn't even make the lines continuous, it loops them for every length of the dash:

A quick Google search does not reveal any bug reports, except for multiple stackoverflow.com answers. So I de

CSS screen blending caveat

When messing with screen blending, I came across a bug in Chrome and Firefox when using screen blending with transform animations. Surprisingly, Safari rendered it right.

This is when you get when applying mix-blending-mode: screen; on an <img> with position: absolute;, so as to stack it on another element. Of course, this doesn't work in Edge.

See the Pen Screen Blending: Without animation by Ambrose Chua (@ambc) on CodePen.

When applying an animation on the <img> element, this is what you would get in your current browser:

See the Pen Screen Blending: With animation by Ambrose Chua (@ambc) on CodePen.

Hey, what's going on here?

When using CSS animations, browsers switch to GPU acceleration to provide smooth animations. But when using GPU acceleration, transparent backgrounds are "lost", and the renderer interprets background-color: transparent; as black. Since we are using mix-blend-mode: screen; where black is used to make cutouts, the whole area on the page

Our server setup

First, some history!

I started off my sysadmin adventures back in 2012. After learning Python, PHP and web for one and a half years, I discovered Node.js. Back then, there was quite a bit of media hype on Node.js and it's potentials. Having stronger JavaScript experience and used to the event-driven style of writing code, I picked it up in a breeze.

Now, that was at the age of 12 and I had no credit card, neither did I know of any free VPSes, nor could I explain to my parents what a VPS was. I had been using 000webhost to run a couple of sites written in PHP or static HTML, but I wanted to host Node.js apps.

I had a laptop. Or rather, I shared a family laptop, but no one else uses it so I had Ubuntu installed on the HP520 (with a long backstory on how I accidentally switched to Ubuntu). My home network was a "3G WiFi Router" that had horrible reception issues and was unstable, so I switched to a USB dongle attached to my laptop, and left my laptop on its side on my desk.

So t

Why you should buy cables online

Today, I went to the often infamous Sim Lim Square with JiaCheng and Daniel. It's the best place to get PC parts and certain electronics in Singapore. A large number of mobile phone accessories stores are scattered around Sim Lim Square, frequently selling large numbers of Micro USB and Lightning cables in open bins. They are sold around $8 a piece, all not worth because they go for a dollar from Taobao (and I'm sure they buy from there too), and they are made terribly. I once got cables at these kind of stores that stopped working in a month, because of terrible solder joints that I had to resolder back on.

I made a bet with JiaCheng that these stores would not sell USB Type C cables, and that if he found one, I would buy it for him. Sure enough, we came across a store that did sell USB C cables. So I wasted $8 on one, despite that I wouldn't use it because I don't have any USB C devices yet (and I doubt the quality). Of course, you shouldn't buy consumer goods at SLS.

We bought it of

SAFMC 2016

It paid off.

SAFMC is an annual competition held by DSO, with five competition categories for different types of flying machines. This year, we decided to give Category D2 a try, to prepare for next year (and get a Judges Award again).

In category D2, we have to build and fly an autonomous drone through an obstacle course shared between category D1 and D2. The course is a artificial setup consisting of mostly walls.

The bullseye in the center of the hall is a ball drop, and following that there is a low-light area where we have to obtain a photograph of the code printed on the board. When we participated last year, it was an open area.

In December, we started work on a frame design. We chose a tic-tac-toe frame design because it was easy to build. For electronics, we used a Naze32 flight controller and a Raspberry Pi for our processing, mostly because we wanted to use the Raspberry Pi and not have any PWM problems.

The Raspberry Pi Setup

The camera was supposedly for recording a video for playback later t

Hack&Roll 2016

Hack&Roll is an annual hackathon organised by NUS Hackers. We participated in Hack&Roll 2015 (It was our first hackathon), making this our second Hack&Roll.

There used to be more images here but I broke the links

TP-Link Archer T4U teardown & thoughts

So, I went on Carousell and bought a Wireless USB card, being a poor guy with no income. The seller had used it quite a bit, but I was fine with second hand equipment. It came with a USB 3.0 extension cable, capable of 802.11ac at 867Mbps. And the WPS button on the side of the adapter made me cringe.

Back of the T4U

As usual, I decided to take it apart.

The top face of the PCB

While I was researching on this adapter, I stumbled upon the WikiDevi page for this adapter (WikiDevi is a really cool site to find wireless equipment information, like routers and radio chipsets). It uses a Realtek RTL8812AU chipset.

Because I originally intended to find a dual band USB adapter for wireless sniffing, I went on to find Linux driver support for the RTL8812AU chipset. Because this chipset seems to be quite recently released, driver support information I found was contradictory, but the Gentoo wiki confirmed driver support. It's currently provided by two open source drivers, this one written from scratch and this one based on the Realte

Daydreams

daydreams are nice
you get to look at the datacenter you are gonna build
and all the twisted pairs you imagine yourself routing
and the switches and patch panels
then you fill each 4U slot with those hotswap storage servers
and 2U slots with application servers
and then you look at the SFP+ connectors
with fiber cables stuck inside
and all the link aggregation
with 20Gbps throughput from a single node
then you imagine the processors in each node
probably a dual socket motherboard
with two Xeon 8 core processors
and that low clock rate
the SSDs that are the drives
epic cable management inside too
dont forget the router running pfSense
and the 10Gbps connection to your ISP
all the application servers running CoreOS
all the management and data storage servers running Ubuntu
and so your storage nodes
are all btrfs
in the btrfs RAID10 configuration
exposed using NFS to your app servers
your app servers
all would run rkt containers
with 4 designated as etcd leaders
but due to cost constraint

NGINX vs nghttpx

Recently in version 1.9.5, NGINX introduced their experimental HTTP/2 support, purposefully dropping SPDY protocol support in favour of HTTP/2. Having no SPDY support in NGINX would leave about 60% of users capable of SPDY/3.1 having to fall back to HTTP/1.1 connections, thus lowering performance.

So being interested in webserver performance, I decided to do some small benchmarks, as a rough guide to how NGINX and nghttp2 may perform in a deployed environment. Of course, my tests are an inaccurate representation of real life performance: I'm only serving a single 100kb text file through NGINX.

Setup

The tests are done on my Ubuntu machine, the server this very site runs on. It's an i7 4790 desktop with 20GB of RAM, running Ubuntu 15.10 Desktop.

I'm running three tests:

  1. NGINX 1.9.7 with HTTP/2
  2. nghttpx using the above as a backend over HTTP
  3. NGINX 1.9.7 with SPDY/3.1

And here are my compile flags:

nginx version: nginx/1.9.7
built by gcc 5.2.1 20151010 (Ubuntu 5.2.1-22ubuntu2) 
built wit

Hackathon@SG

Recently, team MakerBreak (consisting of me, Isaac and Sudharshan) competed in the student category of Hackathon@SG. The competition theme this year was on "Smart Nation", where we are to work on a project related to building a smart nation. There was even hardware provided by the sponsors, including the Nabu X, VR One and Tweeq.

Of course, as adventurous students, we took the VR One as we wanted to play with VR. It was a nice piece of equipment, being much much better than the Google Cardboard.

We came up with a few ideas, before the hackathon. Most of the students there were studying in university and junior college, and we were among the few secondary students there.

Armed with a (Relay Shield), WiFly RN-XV module, an Arduino Uno, a power adapter, soldering irons, wires