HOW I BUILT DEVALTER.COM

There comes a time when every developer must take the time to carve out their corner of the internet. Then the question quickly become. How? How should it look? How should it work? How should I build it? This is the phase I searched for inspiration, documentation and was in the clouds dreaming of what it could be. Maybe we start a collection of other dev portfolios we like and dislike.

In this part, I took what I learned to begin scoping out the essentials my portfolio must include. A perfectionist could get lost in the details here (ask me how I know). A solution for that is to build it in a way that make it easy to make changes in the future, just in case. After careful consideration a list emerges that cleary specifies the desired look/feel and functionality, our north star.

Here we get a little more technical figuring out the fundamentals. One of my requirements was to code it myself, so no WordPress. I researched the technology stack of other major companies to see how the industry is building and how all the pieces fit together. It took a while to try out different frameworks, identify distinctions in docs and listen to other developers opinions. Eventually I ended up with the diagram above.

Now that the blueprint is drawn I can focus on the look(UI) and feel(UX) of the site. Since it's my personal portfolio, another requirement was to make it match my personal taste, so no flying Shiba Inu's or flashy colors. I prefer a simple, minimalist design that is easy on the eyes but still gets the point across. A wireframe was enough for me here, the rest was iterative and changed on the fly.

Devalter is a portmanteau word made up of DEVeloper's ALTERations. "There are only two hard things in Computer Science: cache invalidation and naming things." It would have been easier to use daviddiaz.com but it was already taken, trust me, don't check, ha I warned you! (The guy's unreachable.) I was able to get diazdavid.com but I didn't want people mixing them up.

Ah, yes, the server! Given the work I did at several startups I was already familiar with AWS and many of the services they provided. So this was an easy choice, but any VPS provider would have been fine. Give me a terminal and I'll turn it into a web server. I'm hosting everything on a single t3.small EC2, I don't expect a lot of traffic here and auto-scalability wasn't a requirement.

More DevOps work, how exciting! (said slightly sarcastically) I needed to configure the firewall, setup necessary ports, whitelist IPs, update DNS with Cloudflare and GoDaddy, configure a reverse proxy with Nginx, install SSL certificates so communication over http is secure and setup systemd to reboot monitoring programs in case of a crash. Oh the memories...

For the database I went with MongoDB, I wanted a flexable schema design and a non-relational document model to store data (NoSQL, aka "not only SQL"), for development efficiency. MongoDB also has nice GUI tools that allow you to examine the data and create complex queires with aggregate piplines in seconds. It makes building the API for the web app much easier.

This portfolio is more for show-and-tell so there isn't much functionality on the visitors end. However, I still took the time to setup Redis since I wanted to learn more about it and use it in other projects. At the moment I use it as a pub-sub for my email microservice (written in Python and connected with Outlooks API) and also to send commands and data to/from my RaspberryPi.

After trying out the standered "Hello World" examples from React, Angular and Vue. I picked Vue.js! I knew once I picked one I was going to have to take a deep dive into its documentation so it was an important decision to consider. Luckely, this frontend framework accompanies with the UI library from Veutify make the development experience so much more enjoyable and efficient.

The show here is mainly run by NodeJS and it's libraries like express, bcryptjs, jsonwebtoken, etc. But I also made microservices in Python that communicate with the Node app via Redis and with the outside world to collect and prep data for later use. I'm also using Nuxt which is yet another framework, but it's so worth it! With SSR out of the box, auto-code splitting and file system routing.

I mentioned the email microservice that sends an automatic email confirmation from my contact section. After a while you accumulate these loosely coupled and reusable scripts of code that can be written in any language and deployed to any project with a little help from Redis. I have other microservices that use the APIs and SDKs of twitter, yahoo finance, youtube, etc.

Okay, I'll admit it... I didn't do much testing in dev or prod. I mean, come on! This is my personal site, not something commercial that needs to be extremely fault toulerent. I do have code in place that can reboot indiviual services and report errors to Opsgenie in case they persist and demand my attention. But it seemed like overkill to work with a test library in both python and javascript.

At long last the time has finally come to bring forth the fruit of my tiresome labor as it all coalesces beautify into my new creation, now before you. Quick shout out to all the giants who came before me that created all these layers of abstraction making it relatively simple to program everything myself. So that's it, one moment your programming alone, the next, you've gone international.

After running a Lighthouse report I get a score measuring my sites performance, accessibility, best practices and SEO. What's really nice is that it'll lists the opportunities I have to improve my score. After working on it for a bit I increased all the benchmarks, but it still needs work. Another measure of performance is in the users behavior while active, for that I'm testing Hotjar.