Website Rewrite from AngularJS to Angular

#angular  #gwenduling.com 

Story by gioweeargao

August 24, 2018

coffee shop photo of laptop and food

I read a tweet a few months back that says our code is only good for a few months before it becomes a mess, a mess we judge ourselves about.

And that's true. Give it a month and there's already a much better approach/syntax/plugin for the things we already wrote (for things that are currently still working).

I attempted to start the #100daysofcode challenge because I honestly thought that's the only way I get to redo this website again (long story short I couldn't commit to it, yet). But then once upon a time I had too much energy to watch Netflix and ended up researching about Angular CLI. So here we are a few weeks later. ๐Ÿ’ฏ

I suck at automation

Long gone are the days it's just an HTML, CSS and a JS file on our text editors and we're good to work. (My fave blog post about advance/modern frontend development)

And that's why the old version of this site sucked. I used an Angular Starter Kit so that everything's configured already. Big oops when I found out about a month ago that it uses Angular JS version 1.3 when I was trying to implement something and it wasn't supported. 

So here we are now using the latest Angular 6 together with Angular CLI ๐Ÿ™Œ๐Ÿป๐Ÿ™Œ๐Ÿป๐Ÿ™Œ๐Ÿป. I don't have to get lost a bunch of times in the repo anymore before finding out why my new component wasn't registered ๐Ÿ˜ญ๐Ÿ˜ญ

An opportunity to learn

And that's how I see this rewrite, an opportunity.

Kinda feeling FOMO lately because there are so much new technology we don't get the opportunity to try (yet) at work. So maybe side projects are good ways to experience what it's like, for now. 

It's my first time to try:

  • Angular 6 (we use Angular JS 1.5x @ work)
  • Angular CLI
  • Typescript
  • CSS Grid

CSS absolute positioning vs CSS Grid

(CSS absolute positioning vs CSS grid)

I would love to dive deeper into these technologies but sadly, this website is mostly UI and does not require a lot of complicated stuff.

For the love of refactoring/rewriting

This is a very timely post because my current task at work is also a rewrite and all I can say about it is that I'm having so much fun. The kind where time seems to go by too fast.

When I check my website (before this rewrite), I keep on judging my own work. Sometimes I feel like it's not me enough. Other times there are just some stuff that doesn't feel/look right any more.

As much as I hate the fact that what I once wrote didn't stand the test of time, it's nice seeing how far I've grown since then ๐Ÿฃ

And what I thought would be a month's worth of work, actually was just a few nights with a Starbucks grande Javachip + hazelnut syrup โšก๏ธ 

I guess this website is always going to change

A much bigger question would be: how long can I keep up with paying for it?

What I want for this website changes over time, because, what I want changes over time. And that's totally fine because I am the boss here. ๐Ÿ˜Ž

For now I want it to be simple, direct and yellow. 

So, what did change?

  • Removed CV link/page because it felt like I was selling myself too much with that
  • Removed Works page because it's only client side, meaning updating it needs a lot of work. And also this medium post convinced me.
  • Added 404 page (but I'm not ๐Ÿ’ฏsatisfied with it)
  • Changed photos for the home page

Gwenduling photos for home page

  • Added a try again button when getting data fails
  • Added a Kweh ๐Ÿฃemoji in the home page because I have Kweh now. Also wanted to implement a lot of emojis in here so that it feels more human like.
  • Added meta tags that I haven't tested yet

Also, some fail attempts

  • tried different versions for the 3 photos in my homepage

Hong Kong photos for the home page

  • tried to display Kweh (my chick/duck/chocobo stuff toy ๐Ÿค) in the 404 page but it ended up being too yellow

Kweh

What's next?

Honestly I'm not quite sure yet. Here's all that I know:

  • I want to focus on getting more traffic (since I suck at social media promotions because of my social anxiety). I want to learn how do I get more clicks in the most organic way (I tried using focus keywords and I ended up sounding fake).
  • I want to try automating the process of deployment which will be triggered every time I push to master.
  • I want to include Kweh ๐Ÿค a little bit more in terms of design. Or maybe I'll just create a separate website for it as a challenge. Who knows.
  • I definitely want to include other pages but I don't know what they are just yet. ๐Ÿค”

So yeah, enjoy ๐Ÿป

loading

loading

Hello, your viewport is too small. โ˜น๏ธ