Wolstenhol.me Drupal 8 redesign (thanks and credits)

I’m in the process of redesigning my personal site to bring it more in line with modern techniques and to demonstrate what I’ve learnt in the many years since I made my current site. It’s also a good excuse to play around with Drupal 8.

I thought it might be nice as well as interesting to others to have a credits link in the site footer to give props to the people whose work has made building the site easier. So, here’s a list of some of the great projects/products which I’ve used to make the new version of my website. I’ll update it as I add more dependencies to the project.


The basics

Front end tool chain (the usual!)

CSS libraries

  • Basscss (I used this in lieu of something more heavyweight such as Bootstrap and it worked really well for rapidly developing the site. I’m a fan of single-purpose utility classes and Twig makes this style of development much easier in D8 than it was in D7)
  • Animate.css (For super easy CSS animations. I should probably use these more sparingly, but… ¯\_(ツ)_/¯)
  • Normalize.css (This is a great project and there is a lot that can be learned about browser specific intricacies from looking at the source code and Github issues)

Javascript libraries

These aren’t loaded on every page, instead the D8 libraries system is used to load them only when required.

  • Adaptive backgrounds (This is used to pick out the dominant colour from Instagram images and use it as the background-color value for the elements that contain the image’s metadata)
  • Masonry (This is used to layout the cards in a Pinterest style column layout. I could have used CSS columns but that would have meant the content was laid out top-to-bottom, instead of in rows from left-to-right)
  • Images loaded (This is used to only call Masonry after all images have loaded and the height of each card can be accurately determined. This is useful as lots of the cards within the Masonry layouts feature images, such as the Instagram card and the Medium card)
  • Wow (Used to trigger Animate.css animations when an element comes into the viewport)
  • What input (This is used to remove :focus rings/outlines for users who are not navigating the site with a keyboard. It is also used to trigger between Instagram captions being shown in full below the image for keyboard and touch users, and captions being shown with a :hover effect for mouse users)
  • jQuery timeago (For turning ISO-8601 dates in <time> elements on my Twitter teasers into relative (‘23 minutes ago’/‘2 hours ago’/‘22 days ago’) strings)

PHP libraries

  • Twitter-text-php (Used to parse text returned by the Twitter API for hashtags, username mentions, Twitter list mentions, etc.

Contributions made to other projects

APIs used

  • Twitter
  • Instagram
  • Foursquare
  • Last.fm
  • Spotify
  • Cloudinary

Highlighted integrations

Spotify

  • Spotify ties in with the Last.fm integration
  • Recently played music is shown on the homepage
  • The user can click the card for each item and listen to a 30s clip of the audio provided by the Spotify API
  • While the clip is playing a CSS animation is applied to the music card. Eventually, the intensity of the animation will be linked to the ‘energy' value provided by the Spotify API for that track

Other useful things

  • This function to fire an event on horizontal browser window resize events, but not on vertical resize events. This is useful to avoid the address bar in mobile browsers firing a full resize event whenever it appears/disappears in response to user scrolling.

Reading

CSS methodology

I’ve used a utility/single-purpose-class approach based on Basscss. Some people seem to react badly to this (‘How is this different to inline styles?!’) but I’ve found it a very useful approach to rapidly build and modify components. It’s a much easier approach to take in Drupal 8 than Drupal 7 as Twig makes it so much easier to add classes to whatever you want. Here’s some related reading that explains the benefits of this approach: