MindBeacon provides online mental health support. This isn't my first time hearing about online mental health support. I first heard about this through the creator of FunFunFunction (I pretty much learned JavaScript through his channel) moving to Mindler. This was before the pandemic so the significance of online mental health support access isn't as obvious.

At MindBeacon, I want to commit to better tests in the code that I write. TDD has always been on the horizon but I've never committed to using it before. Exploring a brand new code base with TDD as a form of REPL development for fast feedback felt pretty nice. You are contributing tests, catching errors, and learning about the codebase all at the same time.

In the push for better DX, I've revisited environment issues for for Angular, Node, and Storybook. JavaScript still has some hard to replicate errors that pops up only for some developers using specific workflows. Resolving them let the team code with confidence and ultimately saves development time.

Storybook was everything I'd hoped it would be for UX development. It's easy to setup and use. Quick to write and update. However, it's sadly not compatible with Angular. There are lifecycle inconsistencies, un-rendered visuals, and awkward DX. Hopefully these issues are only temporary and will be addressed beyond 2021. If you use React? Go for it.

Cypress is easy to use and setup, but my expertise isn't in DevOps. So far, it's already proving it's use and reduces the repetitive end-to-end tests QA would have to do for feature launches. I enjoy using Cypress to write tests and hope to see more of it.

Policy Reporter provides accurate data and reports in the healthcare landscape. Stakeholders are doctors, insurance companies, and manufacturers. It's business is data.

Even though the framework is old, the patterns we use in the backend are well tested are well established. The team promoted testing which is great. I've neglected testing in my previous work. It's something I want to do but never found the time for when chasing after features. I grew to be more thoughtful about tests because of this test first culture.

I am happy to work closely with Postgres again on a data-heavy visualization project. It's always a little daunting to commit to a database schema. Is it correct? Is it future proof? Is the business well understood? It's almost like a theory. You want to challenge the schema as much as possible before you are stuck with it. While the schema isn't immutable, the effort to change it can be just as daunting as the initial design. Is it correct? Will migrations work? Is it future proof?

I came away with some thoughts on this.

• You want a living document that captures up-to-date schema
• The schema should allow for easy updates
• The schema should allow for easy inserts
• The schema should allow for easy deletions
• The schema should get feedback from all stakeholders because it is how we see the business data
• The schema should allow for performant reads

Projects will have to move on but you can always try your best to validate the above as much as possible between development and launch.

Previously at BarterBay I had to work alone on Postgres so my resources were limited. I've always wanted to work with another developer experienced with Postgres. So it has been a pleasure to just chat and learn new tricks and dig more into query optimization. I can't say I have a very structured method to optimization yet. You run the query. You observe the query planner and performance. You look for places where optimization that would make an impact. The process isn't as speedy or obvious yet, but I can feel that overtime it'll become more straightforward.

Gapminder visualization is my first experiment with D3. I've had the opportunity to use other visualization libraries in previous projects but never D3. I've always wanted to use D3. It seems to be the most flexible visualization library out there. 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 should be 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 the time sinks 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 so this time around and make the content more portable.

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

One of the goals of this project is to learn more about Webpack. CRA ships with performant builds but Webpack isn't directly exposed. My previous CRA website also requires me to code a lot of the content, all of which require individual styling. Performance goes down as I integrate more libraries. CSS is another concern because libraries such as P5.js impacts styles.

Maintainability is the theme of this project. I've converted my resume to a Markdown file to separate content from code. Styling the .md in a single stylesheet saves me a lot of future work.

In this project you can find emoji animation, imported P5 starfield animation, and a solar system built in A-Frame. I am trying out subdomain prefixing to see if it makes sense to separate future projects this way.

Update:

Ideas from this project is now moved to the portfolio-gatsby project instead. Using markdown is a good idea but hosting individual projects requires integration work between the framework and whatever library or technology the project will be using. Libraries can too easily be incompatible.

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. I borrowed some concepts from React to enable VR components to drop and work. There were many unknowns but deadlines help push this experiment forward and we ended up with a novel A-Frame to Angular integration that is easy to maintain and use.

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.

Frontend 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.

Update:

Expect danlin.ca to host a newer web project.

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.

This is my very first website. Key concepts here are self-executing 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 painting. At one point, project polymer came out and an early version of this website started to use it. 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. I worked on the playback, permissions, and file scanning since mobile development caught my interest.

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 mostly on:

• 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 is a good way to learn the basic syntax for both languages. It is an opportunity to learn the business logic for the port.

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.