Gapminder viz is my first experiment with D3. I've had the opportunity to use other visualization libraries in previous projects but never D3. The goal is to produce a widely recognizable visualization. I had just finished reading Factfulness: Ten Reasons We're Wrong About the World--and Why Things Are Better Than You Think in 2018. The data on Gapminder make for excellent visualizations.

I chose Gatsby because they provide a convenient plugin that converts .json files into object data at build time. It makes loading data a seamless process.

Sadly, React does not work well with D3 when I was working on this. Both libraries try to manipulate the DOM. React relies on the Virtual DOM and creates a lot of friction with D3. Some integration code is required to get the two libraries to work together. Even then, transition animations are missing in D3.

The integration code is not ideal. I want D3 code to be independent of frameworks so that D3 experience and documentation translate directly. No additional tweaks are required! I want to revisit D3 at a future date and try out other integrations.

I am trying out wasm to hopefully include more Rust as well as other languages on the web. So far wasm isn't straightforward, but this can change with experience and time.

You are looking at it!

A lot of time sink on previous websites came from integrating libraries and frameworks. A-frame to React. P3 to React. D3 to Gatsby. There are too many libraries to maintain a living project. I want to avoid doing that this time around and make the content more portable.

Content are now written in markdown and projects are hosted separately on GitHub pages.

Learning Webpack gives me the excuse I need to start again from scratch. The previous CRA website requires me to custom code a lot of the content, all of which require additional styling. They are not maintainable at all.

Maintainability is one of the issues I want to address. Markdown simplifies the website because the content is separate from the code. Styling the .md in a single stylesheet offloads a lot of my future work.

You can find emoji animation, imported P5 starfield animation, and a solar system built in A-Frame at dev.danlin.ca. I am trying out subdomain prefixing to see if it makes sense to separate future projects this way. Maintaining both danlin.ca and dev.danlin.ca is confusing, instead, I am going to migrate the Webpack website to GitHub Pages. Only one main project should be hosted on danlin.ca with a subdomain prefix allocated for development and staging.

I worked on the legacy tour, rebuild tour, spotlight, and analytics for the Eyexpo platform.

Legacy uses Angular.js, MySQL, Laravel, and the VR system uses A-Frame. Extending legacy is time-consuming because there are many side effects to track. It is the reason why there is a rebuild. We want to speed up development.

Legacy features I worked on:

• Authentication
• Music playback
• VR editor: translate, scale, and rotate

Rebuilding the platform is an evolving process because none of the developers have Angular experience. Conventions and best practices evolved through research and experience. We code to expect change.

My goal with the rebuild is to have reusable A-Frame components. For example, a VR video requires multiple A-Frame components because a video implies a preview, a play button, a pause button, and they need to have predictable life cycles. Developers should be able to use the video component out of the box.

Novel integration successes:

• Angular and A-Frame configurations
• Extend A-Frame with Three.js
• A-Frame components for Angular

The spotlight model viewer project uses lessons learned from the rebuild. The development speed of the spotlight project validates the new front-end VR architecture designs.

The analytics project leverages ElasticSearch, Elastic APM, OpenMetrics (now OpenTelemetry) to provide tracing, metrics, and logging, intending to show user insights. The design encompasses front-end visualization, analytics micro-service, and additional modification to existing micro-services to write to telemetry.

Front-end went through many incremental changes. Different ways of handling states are tested:

• RxJS
• Services
• Smart & dumb components
• Caching
• Apollo
• NgRX
• Websocket events

The goal is always to test and verify solutions for our projects.

I want to revisit web development using React. It is similar to React Native as they share the same React library. CSS translates well between these frameworks.

This website is built on top of create-react-app, and the default starter is highly optimized. Very little work needs to be done to get started. There are some parts where I had to dig in further, such as their cache-busting implementation and how CRA abstracts away Webpack.

I heard good things about styled-components before starting on my website. The speaker claims that refactoring non-styled-component CSS to styled-component is a totally zen experience. They got me curious. Not having to worry about interfering CSS styles and confidently write CSS with no worry is an attractive feature. So I gave it a try! I love the CSS isolation, and I like the first-class component support. styled-component has the potential to solve a lot of React CSS issues. I'd recommend them if developers struggle with leaky styles.

I played a little bit with p5.js integration in React. I can get them working. However, support for both is limited and potentially hacky.

This website is hosted on AWS. I want to register an account, buy a domain, host a website, secure the website, and optimize the performance of the website. As of writing, this project is hosted on danlin.ca. It will only serve HTTPS for the following URLs: danlin.ca, www.danlin.ca, http://danlin.ca, http://www.danlin.ca. It also prevents direct bucket access because having unknown users access my S3 bucket is a terrible security risk! Cutting off S3 was non-trivial, but in the end, I have Cloudfront, and a way to cache-bust the deployment.

The website ends up costing about $1 CAD per month. I will be retiring the CRA website and migrate it to GitHub Pages in favor of moving newer projects to my primary domain.

BarterBay uses Next.js, React Native, Node.js, PostgreSQL, and AWS services. My focuses are the following:

• Business & marketing research
• Business proposals
• Terms of service & user agreements
• React Native development
• Authentication services
• Security
• PostgreSQL functions & schema designs

Most of the complex business logic for our bartering system is located in the PostgreSQL database:

• Full-text search
• Anonymized GIS
• Bartering system
• Real-time chat
• Authentication

We work in a small team consisting of the CEO, designer, and developers. The environment is informal but has a heavy emphasis on research and design. Every design is analyzed by the team and goes through a dogfooding process. We end up with an in-depth understanding of our system and our business needs, which increased our confidence in our designs.

Much of the time is spent on these design meetings, which may be a necessary cost. I end up with a great love for the whiteboarding process and sequence diagrams here.

A website to learn the basics of web development. Key concepts are self-executing JS scripts, ES5 syntax, partial re-render of web elements, and HTML/CSS design patterns.

Here you can find my attempt at a JS Fiddle and a CSS scene. Sadly regression occurred at some point so I reverted this project to its pre-Polymer commit.

Android Music Player is a student group project for the mobile development course in BCIT. It allows for .flac playback as well as commonly supported file extensions. It plays music asynchronously and recursively scans through the user's media folders. It follows the 2016 Android permission guidelines.

SAAB is a Swedish aerospace and defense company. SAAB Technologies, based in Burnaby, is part of its maritime traffic management division. I worked at SAAB through BCIT's Co-op program for two semesters:

• Migrating legacy Delphi application to C#
• SQL reports for various ports

Migrating and updating tariff scripts from the 2-tier Delphi application to the newer n-tier C# application for the Port of Papua New Guinea helped me learn the basic syntax for both languages. It is an opportunity to learn the business logic for ports.

Client T-SQL scripts are written for port departments. The data is parsed by FastReport for printable views. They show business, financial, and resource information for port stakeholders. These scripts can be complex SQL queries and require an in-depth understanding of database schemas.