Thinking Things Over

Jan 09, 2022 — Reyan Chaudhry

For those of you familiar with the way I usually do—or more accurately, don't—do things around here, the recent changes to this website may seem shocking. In light web development growth, I've decided to present a fresh take on what I consider to be my corner of the internet, and the changes I've made to have it be just that much more "pleasant" of an experience for those unfortunate enough to find their way here.

General Design

To people familiar with swiss-like typography and the laid-back style of more floral design studios, the overall look of this website shouldn't seem that odd to you; in fact it's quite reminiscent of aesthetics visible in works by studios like MOUTHWASH.

I've decided to tone it down a little more, however, revealing only content that's necessary and trying to immerse the reader in the actual content of the page as much as possible, this is an article after all, not a billboard (a sentiment I wish more journalism corporations would pick up).

I made the amazing decision of properly learning SCSS/SASS before beginning the re-work of this website and god am I thankful I decided to do so. If you aren't already using it, please give SASS a try, it makes writing CSS go from a pain to quite literally enjoyable.

Colour Choices

For colours I decided to keep it high-contrast again, better readability and an overall cleaner look is a benefit that's hard to not take up. Here are the colours (main shades) summarized:

background: #f5f5f5
text: #272727
red: #a93232

I've tried to keep it easy on the eyes while also maintaining contrast, but that's honestly a pretty uphill battle so I'll settle with these for now, it leaves me enough breathing room to tone down things later while also keeping the shades modular enough so that I have the ability to add light backgrounds, subtle borders etc.

Typography

After an arguably unreasonable amount of time changing line 4 of this CSS and reloading the main page over and over again, I finally settled on Aeonik as the main display typeface for this website. It's considerably more respectful than it's rather playful predecessor Alegreya Sans yet also more relaxed than my runner-up choice of Neue Haas Unica, one of my usual go-tos when I need a font for this purpose.

font comparisons — I promise I'm not delusional.

Aeonik is just that little bit more geometric, and its slightly wider figures give an air of luxury that doesn't exactly rival the legendary presence of Unica but provides a nice break from it. Overall I find it serves my needs very well and keeps me from folding to over to Suisse Int'l for just a little longer.

For headers, the choice was obvious, I have been a fan of Tiempos for just about forever, and its "headline" weight was just begging to be tried. It matches quite well (though not as well as I'd like) with Aeonik so for now I think it's a fine enough choice, I only use it for h1's anyways so it's not too much of a bother.

Body text was a different story, however; I found myself in the same struggle that I was in last year: searching for a readable serif font that didn't take up too much horizontal space and wasn't EB Garamond.

I decided to instead settle with another one of my all time favourites: Lyon Text, It's vaguely reminiscent of Electra and makes posts just extremely pleasant to read. For font sizes, I'm going with a clamp(1.125rem, 1.4vw, 1.375rem) strategy in order to get the most out of possible screen sizes while also making things readable for those on lower resolution displays. 18px might be cutting it close but I think more than enough people are sporting HD displays by now, so it shouldn't be a problem.

For example, I no longer have to overstress block quotes as much, they look pleasant on their own with very minimal styling.

And last but definitely not least considering how technical I get here sometimes, the monospace font. I decided to go a little bespoke with Akkurat Mono It's sturdy, typographically sound, doesn't have character ambiguation issues, and overall just gets the job done; no complaints here.

I've kept the syntax-highlighting system however, it's about as easy and minimal as I can get and is a grand step up from just a boring pre element in my opinion, although it does take some time to generate:

void fillArrayWithRandNos(int nos[], int size) {
   for (int i = 0; i < size; i++) {
     nos[i] = rand() % (45) + 55;
   }
 }

void displayArray(int nos[], int size) {
  cout << "\nThe Array of Scores: \n" << endl;
  for (int i = 0; i < size; i++) {
    cout << nos[i] << " ";
    if ((i + 1) % 10 == 0)
      cout << endl;
  }
}

double variance(int nos[], int size) {
  double avg = mean(nos, size);
  double variance, sum = 0;
  for (int i = 0; i < size; i++) {
    sum += pow(nos[i] - avg, 2);
  }
  variance = (double)sum / (size);
  return variance;
}

Aside from just font choices, I've also let go of the "header to the side" notion I had in my previous design, instead opting to let headers rest where they belong in between paragraphs, but leaving considerable breathing room for them as well. I've also decided to have the paragpraphs that immediately precede a header be indented, it just adds that little bit of book-like feel that I want articles on this site to (mostly) have.

Responsiveness!

Yes, believe it or not, the Retard Supreme himself has actually taken the time to make his website usable on all sorts of devices. I mostly have the immense power of SCSS to thank for this, but god does it feel good to slide the side of the browser window left and right on this site and watch things get bigger smaller, and—lord forbid—even go away entirely. Comments will disappear when hard to read, and there's actually stages to the main menu's slow but sure deformation as the viewport gets smaller.

It's of course not perfect (the home page could use a little spicing up on longer phones), but it is far more than I would've ever expected from myself and genuinely good enough for now.

The gallery is best viewed on desktop though.

Nitpicks

It wouldn't be a certified nuaNce article without some of these.

First and foremost, no amount of fiddling with borders and shadows makes images look good anymore, I've decided to just leave them how they are for now but besides hand editing every image I post to look like an aesthetic film photo I don't think I'll be making any progress in this regard.

As you can see with this one, certain combinations of headers and first line lengths can lead to the occasional strangely typeset section. This one is quite unavoidable even without my indentation rule so I guess we'll just deal with it.

The current bland landing page definitley needs some work, but I'm not quite sure what to add to it aside from perhaps a rotating list of recommendations or something, I'll have to think more on this one.

And... that's it? Surpiringly I don't have much more to rant on about, I'm generally satisfied with the work I've done here, which is definitely a first when it comes to my relationship with web development.

Conclusion being: take the time to learn how to do things properly you won't really regret it, also remember keeping things simple can never hurt and that javascript is about as haram as it gets around these parts.

Of course, don't forget to have a good day.