Hi there
I'm Mike
(
caffeine
)
=> {
return (
Frontend developer && Interface designer
)
}
About me =
{education: "BSc Construction & Project Management",location:"Johannesburg"}
I have always had a passion for technology, particularly when it comes to improving human interactions. Not much makes me as happy as optimising performance, whether between server and host or keyboard and chair. I'm highly fascinated by the entire front-end spectrum, from saving clicks for the user to shaving milliseconds off of requests.
I am a driven individual; my friends would describe me as high energy and full of jokes. In my free time, I enjoy keeping fit, playing soccer and trying to learn something new every day; occasionally, I spend some time practising typing or questioning keyboard ergonomics.
I started my journey in development at the beginning of 2019. Prior to the era of social-distancing, I enjoyed attending developer meetups. 2020 opened many doors where I had opportunities to attend online conferences and join live teleconferenced courses.
Places I've been
Frontend Team Lead
Raging River
June 2021 - Present
Frontend Developer
Saicom
Jan 2020 - June 2021
Training Manager
Saicom
Jan 2019 - Dec 2019
Network & VOIP Support Engineer
Saicom
July 2018 - Dec 2018
Things I have done
Image Resizer
Fastify
A service to resize images, with the intention of serving meta tags for Opengraph and twitter cards
Nov 2021
MMMovies
Express, Pug & Tailwind
An Express based MVC webapp to manange movies to be watched
May 2021
Tailwind Datepicker
React & Tailwind CSS
Datepicker built with Tailwind as there are currently no easy to use solutions that allow for Tailwind integration without
April 2021
Contention Ratio CLI tool
NodeJS & Jest
An internal tool to expedite a process whereby the core infrastructure team ensured contention ratios were within spec
February 2021
Carbon Car Wash
React & Bootstrap & SASS
Loyalty and sales tracking webapp for a car wash based in Ferndale, serving users, staff and management
July 2020
Web scraper
NodeJS
A small tool I used to monitor when stock of a limited edition keyboard dropped
June 2020
Some fun things about this site
I debated heavily between using a static site generator or writing a SPA for this page. Although a static site would have yielded the smallest bundle size, I chose to use a SPA to avoid latency when navigating to new pages. Even serving a custom font from the front end, I was able to keep a smaller bundle size than a basic CRA.
After much deliberation, I built it using Preact, Typescript and Tailwind CSS's just-in-time compiler. By lazy loading the both the font and images, I was able to get load times down to 114ms (from an average of 10 local loads - so not accounting for network latency), even using Chrome's "Fast 3G" profile, DOMContent is loaded in ~1.4s thanks to limited network requests. In comparison, a standard CRA using a similar set of libraries had a bundle size of 441kg and loaded DOMContent in ~2.1s using the "Fast 3G" profile and a load time of 600ms.
| Framework | Bundle Size (excl font) | DOMContent (Fast 3g) |
|---|---|---|
| React | 241kB | 2.1s |
| Preact | 41kB | 1.4s |
I was quite impressed with the bundle size improvement I gained by using Preact. It was able to provide all functionality I needed, while maintaining performance that is competitive with static sites. These numbers are preliminary, as the page grows, but it has proven to be enough fo a difference to continue in this direction.