Portfolio

Portfolio

Here’s all my webdevelopment projects. I take inspiration from devon zeugel’s project’s page here. Every project has a rich history behind it. From the motivation, idea, conception, time spent banging my head trying to figure out an answer on stackoverflow & getting downvoted, all the way to final execution. These projects are something I can reflect on – the lessons learned and wisdom gained.

Most projects were small extensions and plugins. But I have bigger projects coming. Somes are unique solutions, others remixes of things elsewhere.

Not all projects had the same goals. A few to test to see if I could build something cool & refer back to later. Others to solve an actual problem I and many others had.

I have no formal background in computerscience or webdevelopment. Never did bootcamp. Never had much help starting out asides stackoverflow & youtube university. I learned to really learn on my own. I take pride knowing that I built these solutions out of sheer motivation & willingness to challenge myself. But I’ve come to learn and appreciate a good mentor. So some are collaborative projects, where I only am a small piece of the puzzle.


Enterprise Ecommerce Project

April 2018 – now
👉 JS – SASS – JADE/PUG – REACT scaffolding – ASP.NET
👉 Things Learned:
  • Risk mitigation / content strategy layout
  • Project management
  • Building an entire frontend from scratch
  • RWD (responsive web design) and UX

This is a collaborative ongoing project I have with a backend developer for work. Pick 2 of 3 – quick, cheap, good quality. I choose the latter 2 here.

I can’t go into more details here, but it’s been extremely challenging. It isn’t a traditional ecommerce project like selling T-shirts, where you can rapidly iterate, make mistakes, and improvise. Its big bulky heavy industrial equipment with razortight margins. Getting something wrong is expensive, and grounds for litigation. Scaling is very important to do right from the beginning, or technical debt adds up.

Risk mitigation comes in the form of detailing every userstory, documentation and SOP for handling and pushing new content changes. Note I hadn’t had any experience doing this before, so its the wild west for me. This includes insights on data modelling & mapping, business process mapping & optimization, and the need for advanced optimized widgets VS simple plain pages, etc. But, I’ve had to do literally acquire all the resources myself and mentors to learn from, nothing was handed to me.

Project coordination in slack. This isn’t something I’ve done either. Much like hiring your first employee, hiring your first dev is not an easy leap even if its outsourced. There’s many right and wrong ways to go about this. Because I’m a developer as well – this makes communicating easier.

Building an entire frontend ecommerce site from scratch. This is perhaps the most challenging. How do you even go determining what the best tech stack solution is for your company? Ecommerce is no different. There’s so many solutions – prestashop, magento 1 & 2, woocommerce, bigcommerce, shopify are just some of those to name. I decided to build everything custom and agnostically, but I had to develop my own build-tools for accomplish this. There were more struggles I had to overcome – how do you manage 10-15 uniquely styled page layouts? I ended up learning to become a sass architect and rolled my own mini-CSS framework with bootstrap. My private codepen is littered with these webcomponents.

RWD and UX design. Seems simple but I’ve learned to appreciate how powerful colors are. Most these lessons I had learned from studying catalog design in my brutalist design approach. RWD is actually more complex than I thought, see this [POST IN PROGRESS, 3 SASS MIXINS YOU NEED POST].

I don’t believe in reinventing the wheel, but I also don’t believe in pigeon holing myself without a recourse backup plan. I am building this site with that in mind.


Florida Abolutionist

April 2018 – now
👉 NodeJS/Typescript +HTML/CSS/JS
👉 Things Learned:
  • Endpoint design
  • Backend infrastructure / strategy

Florida Abolutionist is 503(c) nonprofit organization dedicated in stopping human trafficking. As part of [INSERT POST], I’m doing backend API design here. I’m not managing this project, infact I am the most incompetent here which is great.


Hope Community Center

August 2018 – now
👉 Airtable / Business CRM
👉 Things Learned:
  • Being the actual “go to” guy
  • 3rd Party Consulting
  • Process Mapping

Hope Community Center is 503(c) nonprofit organization dedicated in taking people out of homelessness. As part of [INSERT POST], I did initial CRM consultation work. Developed custom airtable prototype. Its not very good, but it was a starting process in solution exploration.


Javascript Calculator

February 2018 – April 2018
👉 JS/ CSS Grid
👉 Things Learned:
  • Advanced Javascript
  • Debugging
  • Breaking Down JS libraries
  • Functional Programming vs Iterative/OOP
  • Unit Testing

Early 2018, one of my goals was to really learn javascript. Like really really learn it. Javascript is always going to be used on any webapp, so its always a good investment in time.

I had read all of YKDJS (You don’t know JS) and watched gordon zhu’s practical javascript + premium course. But I needed to apply this to one project. I realize how powerful learning to build a simple CRUD app can be with TODOMVC. But my hardware knowledge was lacking.

What better to build than a calculator? It is the TODOMVC of hardware, and a good bridge to learn about low-level programming as well. I built this app with functional programming in mind. And I learned how to implement a simple MVC design pattern using object literals.

The code isn’t the best, in fact its partially broken some edge cases aren’t working, display is slightly broken. All the same, I realized why writing things functionally is not easy – because that’s not how the world works. Things behave in iterative fashion. Even if it can be represented mathematically. A good example of this is how integrals in calculus works. You can represent things functionally like so:

In reality its just the sum of a bunch of rectangle areas together. Done iteratively. You can’t have declarative functional programming without iteration & something are better off with an OOP approach, such as these canvas balls.

I learned to appreciate the features a SPA framework like React has to offer. Managing state change, such as a calculators display button, is not easy with FP style programming. In fact the solution that I concluded was React, before I knew about it. Reinventing the wheel is silly, so I chose to adopt instead.

I wrote about my shuntyard javascript calculator on stackexchange here and things I learned from it.

See the Pen Javascript Calculator with Shuntyard Algo and Unit Tests by Vincent Tang (@vincentntang) on CodePen.33644


Dynalist Plugins

December 2016 – now
👉 JS/ CSS Grid
👉 Things Learned:

Dynalist is a notetaking app that I use everyday. It lets you have infinitely nested outlines. I use it to capture ideas I have, take course notes, log daily sprints & summaries. I spent 6 months devising a notetaking workflow that works for me.

If I use a webapp long enough, I end up writing my own extensions for it. In this case a CSS theme, because I can’t stand ugly UX.

Making a stylish theme was quite challenging. Because I had never really popped open the debugger before. Or knew how to use CSS selectors all that well. Plus, dynalist is rather complex in that there’s an infinite number of potential child bulletpoints.

The solution isn’t special. Its mostly me asking stupid questions on stackoverflow. And taking baby steps figuring out how things are organized. How to use pseudoselectors work, debugging, upload and override CSS client side, and CSS specificity. I learned all the caveats of the 30 selectors found on envatotuts. The most challenging part was determing how to target specific bulletpoints. Here’s a snippet of code showcasing this:

There actually isn’t a simpler way to write that out.

The next thing I made was a userscript extension. It was my first time injecting javascript on a page. I learned how to use tools like tampermonkey as a middleman for injection. And things like greasyfork for hosting the javascript assets. I made a write up of how I developed it here. What the tool does is add a jquery slider on a page, and resizes any img html element.


Airtable Plugins

May 2017 – August 2017
👉 Excel VBA / VB6, Windows batchscripting
👉 Things Learned:

If google spreadsheets and microsoft access had a baby, and it inherited the best genetics, that’s Airtable. When I first used this tool, it solved so many issues I had at work. I posted many of these workflows on the forum. Things like keeping track of product spec revisions for private labelled item overseas, or designing a product database from scratch. I had already knew how to design databases as I learned the hard way of what NOT to do. Long story short, I own all of ralph kimball‘s datawarehouse books now.

One problem that I had with airtable is that I had many images sitting in an amazon s3 bucket. I wanted to dump it into airtable, but it would just not autoupload. Being the lazy guy that I am, I wrote a keyboard mouse autohotkey script that saved me hours of time.

While uploading images to this program was one thing, I wanted a way to backup data as well. Unfortunately, airtable did not have a tool to do this. It still doesn’t. Leaving all your image assets on someone else’s amazons3 bucket is risky. I decided I needed a backup tool, but the problem was more complex than I thought.

The reason is because you can have one image assigned to multiple primary keys. That’s just confusing to the end user. Say for instance you have a bunch of dogs. And you name those dogs “HuskyHappy” and “HuskyHappy1” and “HuskyHappy2” for whatever strange reason. Let’s say they all look the same too, because they’re triplets. So there is only one image attached to 3 dog names.

The end user doesn’t want a single UUID (unique identifier) image called “3269ce88-ad8e-11e8-98d0-529269fb1459.png”, that’s just confusing. Rather they want something dubbed “HuskyHappy.png”, “HuskyHappy1.png”, “HuskyHappy2.png”. Like this:

Surprisingly no solution actually existed in the market (as far I as know). I am always testing/seeking/contributing alternatives to alternativeto.net. I tried many bulk renaming & bulk downloading image tools, but none did what I wanted. They didn’t work because you can’t save the same image name to the same folder.

Instead, I developed a custom excel VBA script here, along with an explanation of its applications and how I did it pst mostly copying things off stackoverflow. It is perhaps the sloppiest code I’ve ever written, and I made a post detailing my thoughts about it.

But it WORKS! And it saves lots of time and money.


Reddit r/place

April 2017
👉 Moderating
👉 Things Learned:
  • Organizing A LOT of data quickly
  • 1200 data image sets from 100 contributors in real time for 20 hours

I got bored one day browsing reddit. It was April Fools. There was this thing called the r/place.

Reddit r/Place was one of the largest online art collaboration ever done in April 2017. The only thing similar to it in history is the milliondollarhomepage back in 2005.

TO BE WRITTEN LATER


Youtube Content Creator

April 2017
👉 Moderating
👉 Things Learned:

Some other day I write about past experience

TO BE WRITTEN LATER


 Coursework / Other

I didn’t mention coursework I’ve done or codepen samples I’ve made. Instead, I apply the insights gained to above examples. I have taken about 40 courses on lynda.com and audited an additional 500. Probably around 10 or 20 youtube playlist courses. Finished CS50 from harvard and finished most of freecodecamp. I’m currently focusing on learning specific subjects to reach my goals and broaden my knowledge in computer science. Mostly following the outlined laid out by github’s open-source-university. Currently learning advanced math subjects, datastructures & algorithms, and hardware design. Later computer vision, and machine learning, because I actually need it as a version 2.0 in one of my projects.

I intend on only mastering C, C#, C++, RoR / ruby, python, react, and javascript because you can build almost anything with those tools. I intend on picking up other things like GO for concurrency along the way.

I have 2 other planned backend projects in the pipeline too, those I intend on monetizing. One is a simple backend with no frontend framework, the second is more complex from idea explosions post