DBBD.SG COLOPHON

About

The Idea

Design / Structure

Responsiveness

• Google Analytics showed that the majority of viewers of my sites and blogs are actually on Android - meaning that it is most commonly viewed from a mobile device or tablet. Therefore a big priority is to make sure that it is thoughtfully designed to always look its best at all screen sizes - right from the very start.

Fonts

• I'm partial to using a geometrical, clean, classical san-serif that will make reading a pleasure. A lot of my work is extremely text-heavy and I want it to be set in a typeface that makes me want to read more.
• I decided to use the font Larsseit because it fulfilled my requirements and is within my budget.
• I decided that my favourite size (at least when on a desktop and unconstrained by small screen size) for Larsseit is 20pt. I like big fonts and I cannot lie. Might have something to do with my eyesight.
• If I had no limit to budget, or if this were a project for a commercial client, I would use LL Circular. There is nothing else like it. Other fonts I considered were: Grilli Type's excellent GT Haptik, Calibre, Apercu, and Benton Sans.

Frameworks

• Most designers and developers would use some sort of framework or CMS to build a site like this. So if we look at this objectively, why do people use a framework? One might use a framework to standardise the way the code is written, so you can work more efficiently in teams. However, this site is going to be built by one person and that is me. Furthermore, its not like I'm going to go completely crazy and illogical on my syntax if I don't use a framework on this site; I can still use Bootstrap for commercial projects that require it, and I'm still going to write it as efficiently as I can.
• Things like Bootstrap are also great for iterating generic admin screens and mockups and such, where you might just want to quickly generate a UI before you really know if that UI is really going to work or not.
• Sites using specific frameworks and CMSes definitely end up having a specific and instantly identifiable look. You can usually see a Bootstrap page a mile off. Likewise you can also instantly see when its Wordpress, or Drupal, or Indexhibit, or whatever common CMS people are using.
• Technically, I could "Bootstrap" any design if you ask me to, but if the design is funny or unconventional, I will probably end up overriding many classes in the process, and that feels counter-intuitive and results in a lot of unforeseen code bloat.
• My Conclusion: Responsive HTML5 frameworks like Bootstrap are useful for studying some interesting and clever ways of doing stuff, and are a real time-saver for certain kinds of projects where you need it up NOW but don't care so much about making ground-breaking design. But I don't think I will use one for the DBBD sites.

CMS

• Whilst looking through RCA websites from the CRD years, I realised that many of these early sites were broken because they had so many dependencies that were obsolete. Archiving sites that relied on databases or plain ol JS scripts which were unexpectedly ganked from FTP also means broken links in the future. I worry about the longevity of these digital materials. Sometimes whether or not a file is archived in the right way is completely down to random circumstances, regardless of one's best intentions.
• I found that using Wordpress required a lot of ongoing maintenance. In previous years my focus shifted from web to other things, and the moment I stopped tending to these fragile flowers, some very old sites (10+ years old) began breaking down, being attacked by bad bots which causing high CPU load, and also resulting in security vulnerabilities being exploited in unused WP installations that I completely forgot existed. I was previously with a very unhelpful web host, Lunarpages, which was beset with dismally poor customer service. Once, Lunarpages took all my databases offline suddenly without warning, breaking my websites. Lunarpages were extremely unhelpful and slow in explaining what was going on and resolving the issue. The only sites that remained unaffected were the handcoded sites which did not depend on any other things.
• Some of these issues come with using openly available CMSes like Wordpress which people have analysed thoroughly to find its weaknesses, which is what opens it up to security issues and becoming targeted for attacks. You could argue that a skilled developer would code up their own CMS which would circumvent such problems, but the thing is that I don't have the time to code up my own CMS. Its not really my area of focus at the moment and I would take longer than it is worth.
• I've also completely stopped caring about SEO and social sharing.
• However, this is largely a site which won't have serialised content, and some things will be custom made. I also previously handcoded the previous iteration of this website and it was faster than implementing a CMS and tweaking it to suit my requirements.
• I also don't want to keep editing this page over and over again. If it is too easy to edit the theme or template, I will waste a lot of time tweaking it. BUILD THIS NOW! STOP FAFFING ABOUT! DON'T MEDDLE WITH IT!

Content Organisation

Index and Naming Conventions

• I like the idea of an idiosyncratic index - not machine generated as one might expect with a large website, but one with weird sections that I've named on my own.
• Indexes to be organised by A-Z and also by chronological order for the old fashioned. Weird, this is the first time I've listed out my works by year.
• ALL LINKS ARE TO BE SEPERATED BY HYPHEN. Definitely not an underscore. And why? Fortunately, its not just a random decision. Google treats hyphen as word seperator, but underscore is treated as a word joiner. Here's the official word from Google - Keep a simple URL structure.

Working Notes

Snippets

• "Back to top" link which only appears when you are partway down the page.

$(document).ready(function(){

// Hide the scrollToTop link when page first loads
  $('.scrollToTop').fadeOut(0);

// Check to see if the window within 100px of top
// If not, then display scrollTop button
  $(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
      $('.scrollToTop').fadeIn();
    } else {
      $('.scrollToTop').fadeOut();
    }
  });

// Click to animate scroll back to top (800ms)
  $('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},800);
      return false;
    });

// Add smooth scrolling to all hash links
  $("a").on('click', function(event) {

// Make sure this.hash has a value
// before overriding default behavior

  if (this.hash !== "") {

// Prevent default anchor click behavior
  event.preventDefault();

// Store the hash value
  var hash = this.hash;

// Animate page scroll to specified hash location (800ms)
  $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function(){

// Add hash (#) to URL when done scrolling
  window.location.hash = hash;
    });
      } // End if
    });
});

• Animated hover links. Interestingly the rotated ones on the sides are still the same x transform that goes -5px.

    a#transform-left:hover,
    a#transform-right:hover,
    a.menu_link:hover  {
     webkit-transform: translate(0, 5px);
     -moz-transform: translate(0, 5px);
     -o-transform: translate(0, 5px);
     -ms-transform: translate(0, 5px);
     transform: translate(0, 5px);
   } 

• Added unicode character 'TWO JOINED SQUARES' (U+29C9) after links that open in a new window

a[target='_blank']:after {content: '\29C9';}

• Flowing Columns solution for Index on landing page: used Columnizer. It degrades elegantly and resizes itself when window is resized or viewed on small screens.
• Considered using a horizontal scroll for the Index, but it is not an elegant or obvious solution. On desktop most users miss or intentionally ignore contextual cues for horizontal scroll and it would be unsuitable as one of many elements on a page.
• a is always inline by default.
• although it may seem patently obvious on hindsight, remember that a#divname targets the a with the id divname, not the div with the id divname
• Using php includes for most menus, but naming the inc files with double extensions (filename.inc.php) so that the IDE will recognise it as PHP.
• Did I mention that I've been typing out this site in Atom, a free and open source editor that is also eminently editable? I finally improved my Atom experience by adding this line to config.cson to have default soft wrap all the time.

editor: {softWrap: true}

• Also added shortcut for Toggling softwrap on and off. Add this line to keymap.cson.

'.workspace .editor:not(.mini)':
    'ctrl-shift-W': 'editor:toggle-soft-wrap'

• Was going to use slideToggle but felt it left too much to chance. Result was:

$(".az_btn").click(function(){
  	$(".az_btn").addClass("highlightIndex");
  	$(".chrono_btn").removeClass("highlightIndex");
  	$(".box_index_col").slideDown("fast");
  	$(".box_index_col_2").slideUp(0);
  });
  $(".chrono_btn").click(function(){
  	$(".az_btn").removeClass("highlightIndex");
  	$(".chrono_btn").addClass("highlightIndex");
  	$(".box_index_col").slideUp(0);
  	$(".box_index_col_2").slideDown("fast");
  });

• Used Automator workflow to get filename

# get filename.suffix and print
use strict;
use warnings;
use File::Basename;
use File::Find;
find(sub {
    return if (-d $File::Find::name);
    my($filename,undef,undef) = fileparse($_);
    print $filename."\n";
}, shift);

# get filename (no file suffix) and print
use strict;
use warnings;
use File::Basename;
use File::Find;
find(sub {
    return if (-d $File::Find::name);
    my($filename,undef,undef) = fileparse($_,qr/\.[^.]*/);
    print $filename."\n";
}, shift);


• Some images happened to have their suffix in uppercase. In localhost the case did not matter but when online those links broke and had to be manually fixed.
• Custom 404 page added. PHP function to get current page url:

function currentPageURL() {
  $pageURL = 'http';
  if ($_SERVER["HTTP_REFERER"] == "on") {$pageURL .= "s";}
  $pageURL .= "://";

  if ($_SERVER["SERVER_PORT"] != "80") {
    $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
    } else {
    $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
  }
  return $pageURL; // returns the full current page url
}

• Because I initially set the 404 page path to be direct instead of relative, the above initially would only return 404.php as the current page url. So the .htaccess had to be changed with rewrites instead so we could still get the original url that the user would have typed:

RewriteEngine on
# if the requested url is not a file or directory
# then serve the 404 page
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* 404.php [L]

• Set up Google Analytics, filtered out my IP.
• To be practical, I've optimised it for Facebook sharing based on Opengraph Best Practices. FYI for the og:image - "Images are cached based on the URL and won't be updated unless the URL changes".

Blog

Mailer

SSL Cert

What's Next?