What I’ve learned (so far) from building my website from scratch
In search of texture, color, and a weirder internet
The last few weeks I’ve begun building my site “from scratch”. I’m doing this with Replit, and only using CSS, HTML, and JS.
Why am I doing this? Well, a few reasons.
The first and most honest is that I find it very fun. I like giving myself a large project and seeing how far I can take it. One day I simply thought “I should code my own website” and immediately knew that was my new project.
The next is a desire to make my site more like me, more dynamic and customized. I’d been feeling growing frustration with my other sites (built with Squarespace, WordPress, and Notion) due to the lack of customizability. I want my personal website to feel like me. It is an extension of myself. And template based site builders won’t allow me to get there in the way that I want. I’ve decided I want my site to feel like my house in digital space. Here I invite visitors in to explore at their leisure and “make themselves at home”. They can open a random desk drawer and read through my messy notes and rough drafts. They can browse my library and see what I like to read. Or they can simply vibe in the living room and have a good time. That is the goal.
There is a related sub-reason to the desire for more control over my site that is the desire for more interesting digital spaces. We live in the SaaS era, the React app era, the Squarespace and template based website era. Things online have been made slick and reliable, predictable and similar. I want to find the creative programmers, the kooky corners of the internet, the wonky algorithmic Rube Goldberg machines, and the experimental UIs out there. I am on the prow for the digital places that have texture and color and personality. And I want to help make the internet more like this. It is only right that I contribute to making the world closer to what I wish it was.
The next reason for doing this is to keep improving at programming. I’ve built things with CSS, HTML and JS before, but I’ve only ever learned concepts based on very specific things I wanted to accomplish. I still think that is the best way to learn (mainly because you are less likely to quit), but I wanted to do that with something broader by nature, so that I’d be exposed to a wider field of concepts. Building a site feels like a good candidate for that.
The last reason for doing this is to save money on hosting costs / monthly fees.
And now… an ongoing list of programming concepts I’ve learned while building my personal site over at polymathematics.net
How to play, pause, stop and restart audio files with JavaScript. I used this knowledge, or rather acquired it in order to, set up the retro Casio walkman which plays a random demo of mine when you click it.
Building nav bars. Didn’t realize these are simply lists of anchor elements. I always thought navigation bars had some “special” quality to them.
Form to Email API via Mail To API. This is a free service that saved me from a rabbit-hole of hunting for the best way to take form input from site visitors and email it to myself. What are the most common approaches to this?
How to prevent default functions for forms via JS. Comes in handy when I need to store visitor input to certain variables before the form submits.
Learned you can use onclick events on images, had previously only used them for buttons. If you haven’t programmed before, this basically means you can specify fun or important things to happen when visitors click on an image on your site. I’ve used these to trigger forms to pop-up, music to play when an image of a radio is clicked, and more cool stuff.
Learned the difference between methods and ordinary JS functions. I'd used methods (like "alert( )" for instance) but thought they were some weird special thing. I've been utilizing the "push( )" method related to the array object a lot.
The concept of a z-index (like in photoshop or PowerPoint when you “send to front”).
Mouseover events. These are super fun. Basically they make something happen when a visitor’s mouse goes over some element on your website. I used this for my “spill Orange Juice” / “Orange Juice Mode” feature.
“Don’t Spill the Orange Juice”
Ahhh CSS nightmares (media queries, positions (relative, fixed, etc), animations, and more). I’ve come to have a mix of love and hate for CSS. On one hand, it has helped me do super fun things very simply (like doing all sorts of dynamic things like hiding images when certain conditions are met or building a stretching cat loading screen for Tim’s site). But on the other hand, it has proven exceptionally difficult to get things to look good on all device types. I would’ve thought there was a simple single standard for doing this, but I’ve found many approaches to handling site layouts which has made it harder to learn. Learning the power of divs was my first step up the infinite CSS staircase. Next, Emmett helped me understand flex boxes. More recently, thanks to Joodaloop, I’ve learned to use “Left”, “Middle”, and “Right” columns to organize content. I feel this might be an odyssey.
Using target = “_blank” for buttons. Simple, but this lets you determine when links should open in new tabs rather than on the current selected window.
Updating CSS and tons of HTML element properties in JavaScript. This was an early discovery that instantly unlocked new abilities for me. One example would be the previously discussed ability to change the site’s background image to orange when the OJ gets spilled. Another cool one is I have a variable on my site called “isCurious” that is set to false by default but gets set to true when a visitor shows that they like to explore (i.e click on non-obvious things). When “isCurious” gets set to true, it’s like a VIP pass for my site, which opens up hidden pages. I do this using tiny doors. Depending on the “isCurious” state, the doors will lead visitors different places or only appear to certain visitors.
Using column divs with floats for responsive design. This was particularly useful for getting my portfolio stamp collection looking good on mobile. I learned this from Ghostwriter.
Using rgba instead of hex for simple opacity adjustments. Again, simple but awesome. I’d previously only ever used hex codes.
The simple beauty of the details element. This creates a functioning dropdown UI. I used these a lot on my old portfolio site, so finding this gem was great.
Setting media card / social media preview images and info with metatags. This let’s you determine how your website link preview looks when shared on the internet.
CSS animations. These let you create UI animations with pure CSS. The idea of keyframes was helpful because I’ve used them in video editing software before.
I plan to add to this as I keep building out the site. This is another reminder to myself that doing the things that interest me personally is an infinitely more exciting way to learn than a generic curriculum. You can learn anything you want, simply exercise it for things you already love. Don’t simply try to “learn history”, learn the specific history of something you already love (baseball, American Fashion, cars, graphic design). Doing that will be the most enjoyable (and arguably quickest) path to longterm knowledge.
“Being enthusiastic is worth 25 IQ points” – Kevin Kelly