September 16th, 2020
Hi! The last half year has been rough not just for me but for everyone. I’ve just had my head down and have been busy building things (both at work and at home). Here are a few things that I’ve built:
This carousel makes the most out of css-snap to give the swipe that native feel. It came with a lot of headaches, as I had to rebuild it 3 times!
The carousel seems very straightforward at first, but there’s actually a lot happening.
CSS transitions are expensive if you’re not careful. They get expensive fast. Building this carousel that contains a lot of moving parts while minimizing expensive computations (ie preventing reflows and relayouts) was a real challenge. I enjoyed it very much!
I am proud of this one. I took a lot of learnings from the carousel project and applied it here. I also implemented my own virtual list! Existing solutions exist but I needed something that was more tailored for our onboarding.
I chose to build my own virtual lists because the circumstances in which our onboarding was to be used was very specific. It's a key part of our customer onboarding experience and I wanted to reduce the amount of “unknowns” that exists in our codebase. (Though you can say this for pretty much all of the things I build). Also, I had never built my own virtual list before so it was a fun undertaking!
Not going to go through any more detail as the graphic illustrates it all! I am very pleased to be able to virtually render multiple infinite lists of providers. The experience can be better, since I feel having a search function on each list will greatly increase user experience. I’ll have to talk to our designer about that.
A simple one. I was given a day to play with any library I desired. I chose react-spring haven’t tinkered with vectors since my last stint as a designer but I was pretty happy with what I came up with!
This is the only project I’ve put time into outside of my dayjob. It’s for a good friend back home! The idea started out with a simple brochure site to act as a menu, but one thing led to another and now you can order directly from the site!
The backend is powered by a barebones wordpress theme, with intentions of moving the entire thing into Shopify in the coming months. The front end uses the react-boilerplate and orders are handled by sendgrid sending receipts left and right. The entire thing is hosted on DigitalOcean and I had set up everything from the servers, continuous integration, all the to signing the SSL certificates myself.
It's the first time in a long time that I’ve built a full website! I miss that feeling! It’s also my first time trying a completely new architecture for the front-end via the react-boilerplate. Always nice to try different stuff!
I’m delving into Shopify theming since that's something I want to be doing a bit down the road. I'm trying to make a full move into TypeScript and I figure the best way to get the ball rolling with that is to rewrite this entire blog into TypeScript!
Lastly, I’d like to be writing more. Writing is hard, hence I should write more. I have a few topics in mind that I would like to write about. They revolve around CSS and design but nothing is really set in stone at this point!