Through and through

Exploring experimental and tangible interaction design is the course that I am looking forward to the most! This is an elective that I desire to take even though it clashes with my timetable because it is within my field of interests for emerging creative technologies. These past two weeks has been busy because, not only on living alone or going back and forth from NUspace and Callaghan, but I have decided to take the opportunity to start my very first personal website from scratch but with the help of tutorials and content APIs, so that all my blogging content would be one in one place rather than having it scattered in WordPress and Wix.

Week 1

February 24 was an exciting day where I surveyed lots of my family and friends on which domain name I would go for, such as:

• apv.dev,

• apdv.dev,

• ap-v.dev, and

• amazellia.dev

Because our first small assignment is to submit a blog URL on March 3. The bolded ones where the most popular, so I first tried to search up apv.dev since it was the shortest and most memorable one. It was available, the only problem is that it is super expensive, ranging from $120-160/year which was insane compared to apdv.dev where it was just around $11-$25/year. So, I went for apdv.dev which was will great since it is just another letter added.

In February 25, I’ve researched on website hosting, blogging, and domain registrars and picked what is best suited for my needs which is to have an affordable website domain and have full control on my content. Because I discovered that using Content Management System (CMS) poses vulnerable security risks, overhead of server resources and overdependency on plugins can slow down the website.

Used Porkbun to register my domain name apdv.dev for only $34.82 in 3 years and renewal of $11.82/year, which is a great price compared to GoDaddy, NameCheap, or Google Domains which can cost around $16 – 30/ per year.

It took me the whole day to get it up and running because it was my first time using it, there are many things to consider such as the SSL certificate and knowing where to host your domain. Thank Lord that I was able to find this article that helped me through the process of using Porkbun as domain and hosting using GitHub!

I just used a basic HTML to test it out and it works perfectly! Used my old picture (Picture 1) requested by my mom because I know it will make her happy and laugh at the same time while I still try to create a blog area and website design.

Initial blog look. Feb 25.

The next day, February 26, I tried to create a blog within my domain by using Blogger (https://blog.apdv.dev). But before that, I had to research on what works best, getting a plan with WordPress, use DropInBlog (which lets you instantly place a plugin inside your HTML), or use the good old website development scripts (HTML/CSS/JS). I figured that using the scripting works best for my case because I have to pay WordPress $48/year or DropInBlog $228/year using their cheapest plans while scripting it out just cost $0 to do. In order to have a blog within, I would just have a hyperlink in apdv.dev to Blogger would be sufficient which I hope would be sufficient.

Not going to lie, but it took me almost the whole day to figure out how to connect the sub-domain (blog.apdv.dev) to Blogger. I encounter too many errors and I had to know how to deal with DNS records (I just had to use one CNAME, instead of two – lots of confusion on Google Blogger and Porkbun’s articles to the point I had to contact Support services of Porkbun on what was going on) and enabling HTTPS on Blogger to get it working. Thankfully, everything worked out in the end!

During the weekends, February 27 and 28, I didn’t do much for the website itself and I have just been drawing sketches of possible sitemaps and wireframes. I also took down notes on the DESN3600 week 1 lecture.

Week 2

March 1 was just enabling HTTPS in GitHub for my apdv.dev for more security and authenticity of website domain. But the next day, March 2 was the most difficult time I had for the past week. Early morning, I discovered an email showing recommendations from my searches in Medium and introduced to me headless CMS which was what I initially needed for my website – platform independence, developers first, and free-technology choice!

Half of the entire day, I have been trying to connect Ghost, a well-known CMS, with GitHub. But I have been doing it wrong all along since I need to host my own website (which is my laptop) at the initial start of the website project rather than having GitHub and a hosting service. So, I went back to square one around 7pm and followed a tutorial called “Build a Blog with Next.js and Ghost” to build my website from scratch.

It was painfully challenging because these were increasingly popular languages, I don’t know but are useful for the web development, which is a great practice for me even though I had to stay up until 2am to work it out. But at the end, I still could not figure it out and went to sleep, tired and frustrated at myself that I could not fix the errors that always keeps popping out.

By March 3, I enjoyed learning circuits again and all the creative, awesome possibilities we can do for this course. While it was exciting, it was also intimidating because of the Makerspace induction and all the equipment they use were all very new to me. I probably just need more help in that area but overall, it was intriguing. I was also worried about the shopping list because I am an international student living on budget and I do not want to ask my parents, I hope I get to share with people on some materials and pay half to them at least…

I immediately tried to fix the website again right after the lab for DESN3600 and it finally worked! I realised that I just needed my laptop, the server, and myself to have some time off before going crazy again on coding it out, thank goodness! I was honestly worried if I could not make the website work ever again.

Current apdv.dev look

I know the website does not look ‘interesting’ compared to others, but at that moment, it was a masterpiece for me because I knew what was going on behind the scenes on this creation of mine (and it looks pretty minimalist which is cool).

The coding was a work of art because it was able to display the needed functions for a website to work! I will continue to improve on my website’s presentation but for the time being, I need to focus on the important stuff like noting everything down that happened on the journey of my blog making website, the content matters more! I really owe it to the video I mentioned previously or else I would be lost on what to do.

March 4 was more on figuring out how to use the Ghost Content API and designing the website to make it sleek. I was able to narrow my sitemap more, it previously looked like this:

And the display now is in Picture 'Current apdv.dev look'. I also found another video that would help me in designing the website using the languages I used, hopefully I would find the time to learn it.

A working progress of wireframes for my website in mobile view.

March 4- 6 - Still kind of worried about the shopping list because I discovered a dark pattern of RS Component, and they place a hidden fee on my order on the Bare Electronics by adding 20 dollars more. Hopefully I can figure out how to save money from this traumatizing situation…

Reflection

The first two weeks of this Semester 1 2021 has been a roller coaster as I create my own website. It has taught me more web development like never before and I get to have a taste of all the languages that I had to use for this personal project such as React, Node.js, TypeScript, Next.js, Sass, Heroku (Ghost CMS) and Vercel! Although it may affect the presentation layer of my content, I can make it more accessible to more people with its cross-platform capabilities than a traditional CMS like WordPress, Wix, or Weebly and I have control over whatever I want to put rather than having a plugin apocalypse which leads to server overhead of resources. Of course, I still want to make my website look attractive but I also have to keep note of the time duration I have for this and to other commitments.

It has pushed my problem-solving skills in order to fix countless problems I had, especially during March 2 where I worked 8 hours straight, which was insane. And I’m pretty proud of the outcome as a developer, but not yet as a designer, hahaha. As you can see in the Emotion Point Graph, in-between my days of being happy, there were times I felt frustrated or blue especially on March 2 where I worked 8 hours straight trying to make the website functionable as possible. Then by the next day, I was super joyful for the success of the website working!

I know I went full-on with this website, but I loved the challenges it gave me to improve and hopefully share with people that to not give up and if you are tired, do not overheat yourself and take a good rest (including your laptop/desktop). It is like a ‘restart button’ as Carl Morgan says to open yourself to a new perspective rather than looking at it at one view for too long.