Introduction
Greetings! My name is Kevin Brousseau and I am a web developer. Four years ago I started learning modern web development and in this blog I will write about the things I've learned throughout these formative years. Read on and hopefully I can teach you a thing or two...
My Animated Logo
In 2015 I started my collegiate studies at Collège de Maisonneuve, in a Computer Science meets Natural Science pre-university program. This is where I learned to code, and I immediately knew that I wanted to work as a programmer. In 2017, I started my undergraduate degree at Concordia University (Montreal) in Computer Science, with the Computer Games option since I had always wanted to be a video game developer. Little did I know that I would soon fall in love with a different branch of development...
During my first semester in University, I realized that my college degree had given me an advantage compared to the other students who were themselves learning to code for the first time. Given this head start, I decided that I would take it upon myself to deepen my coding knowledge. Specifically I wanted to create visually pleasing experiences, and since I wasn't coding anything of the sort for my introductory classes, I took it upon myself to discover a different technology - one that merged coding and visuals.
A few Google searches later I landed on a Youtube channel called The Coding Train. This channel posts creative coding video tutorials and I started watching a series about algorithmic art using the HTML canvas element and Javascript. Specifically, Dan the conductor uses a library called P5.js which includes notbaly functions for drawing and interactivity. As I followed his tutorials, I was able to create simple visual effects using Javascript but I wanted to see the algorithmic art other more experienced programmers were able to create. One Google search later I landed on Codepen - a website that would teach me there is more to Javascript than algorithmic art...
According to Wikipedia:
"CodePen is an online community for testing and showcasing user-created HTML, CSS and
JavaScript code snippets. It functions as an online code editor and open-source learning environment, where developers
can create code snippets, called 'pens', and test them."
I spent hours browsing 'pens' in absolute awe of what this
community was able to create, studying the code and trying to understand how everything worked. Unfortunately, I knew nothing
about HTML or CSS so I only really understood Javascript focused 'pens'.
HTML and CSS didn't seem too complicated but they were quite different from what I had learned in school. Luckily for me, there was this free online resource called CodeAcademy (which is now a paid service) that taught me the basics of these front-end languages. Soon enough I started writing my own 'pens', expressing my creativity through code, and I knew that I found my calling - front-end development.
After a while of participating in weekly challenges and sharpening my skills, I eventually wanted to be able to showcase my creations without linking to Codepen. Luckily, there is an option to export a 'pen' as static files. All I needed from there was a way to host this website. There were multiple options, but the one I gravitated towards at the beginning was Netlify...
Netlify is originally a website hosting service for static websites. Their Content Delivery Network provides high availability and performance for distributing web content. Netlify felt like an adequate option for hosting my code since I was building static sites. However, Netlify was in the process of expanding their services to include this thing called serverless functions, coining the term JAMstack and spending resources popularizing the term.
According to Wikipedia:
"JAMstack is a cloud-native web development architecture based on client-side JavaScript code, reusable APIs, and markup
content. In its purest form, the idea of JAMstack is that a web application is pre-built into static pages, using content
and code to generate the output."
Basically, JAMstack provides a shift in focus from the back-end to the front-end. Reading more about the capabilities of
the JAMstack architecture showed me that websites can be intricate and data-centric without having to acquire and set up
backend infrastructure. Instead JAMstack demands a different skill set...
For a service like Netlify to be able to serve your website, you must provide it with a static site. This means that dynamic data such as documents in a database must be queried and added to the code at build time. Static Site Generators (SSGs) do just that. SSGs are web application frameworks and generally built on top of a front-end language. Examples include Next for React and Nuxt for Vue. I knew that if I were to find a job in web development I would need to learn how to work with these frameworks - so I did...
These days I'm still learning new SSGs as they become popular in order to understand their use cases and the problems they solve. Not only that, I'm also learning about new Database APIs for storing and retrieving data for my sites. At this point I consider myself very proficient at developing websites not only with the JAMstack architecture, but also with any technology stack that uses HTML and CSS.
I would in fact call myself quite the generalist web developer. I've spent quite a lot of time absorbing information about many different facets of web development, from User Experience design to Search Engine Optimization. It's all of this information in conjuncture with the powers of the JAMstack that makes me confident in my ability to design and develop feature-complete and highly performant web project from start to finish.
If you want to learn some web development tips and tricks that I've learned and discovered over the years then keep on reading...