This is a major update for this site. I overhauled the complete backend and added some sweet new features.
In short:
- New website navigation bar with:
- Home button
- Play button for full-page background interactions.
- Settings page
- Mute background
- Enable/disable new features
- New Features
- Share background interactions with others.
- Share articles via Twitter.
- New backend *magic*
- The website has a build script.
- JSON database for articles
- Performance improvements
- Minify and inline scripts/styles
- Vendor code loaded in the build and insert into web pages.
- Only a few articles are loaded into the website, the rest is loaded afterward.
Website navigation bar:
This website is no longer a one-page structure, this website evolved into much more.
For now, this navigation bar allows users fast access to the homepage, a neat play button and access to the settings page.
Home button:
Each article has its own page, with the home button you can get back to the start page. This allows me to write longer posts, like this one, without flooding the front page. Also, by having each article on its own page, sharing posts via Twitter with a preview image and a unique URL becomes possible.
Play button:
I wanted to give more attention to the playfulness of the background. This button hides all content and grants full page access to the background. This also fixes the issue of mobile devices, which are otherwise unable to interact with the background. Just click and have fun!
Settings page:
I don't want to force all new features on everyone, but much more important is privacy. Features like Twitter's share button can track your browsing history. I wanted one place where every user can choose to enable the new features. For each feature that is provided by an external company, I list the service name and a link to their terms of service.
New Features:
Share background interactions with others:
When you enable this feature, each interaction on the background is shared with others who have also enabled this feature. I use Google Firebase for this feature.
This service provides a real-time database, which synchronizes the last interactions of every user on my site, who enabled this service. I hope to see your interactions soon!
Share articles via Twitter:
When you enable this feature, each article will get a Twitter share button.
This share button is pre-filled, with the URL of the article and some text. In combination, each article has its own Twitter information, with a full-size-image and details. This enables Twitter to show more information when you share my article.
New backend *magic*
In order to add these new features, I had to completely rewrite my website. I love the easy structure of GitHub Pages with only HTML pages and I do not want to move away. I created a Build script so every article can be stored and edited much more efficiently. This allows me to show each article on the front page and on their own page without writing everything twice.
Build script
I use Node.js for the task-runner Gulp and the template Engine, Jade. This is not all, I also use these packages:
- gulp-clean-css
- gulp-concat
- gulp-copy
- gulp-data
- gulp-filter
- gulp-google-fonts-base64-css
- gulp-inject-string
- gulp-json-transform
- gulp-less
- gulp-rename
- gulp-sitemap
- gulp-uglify
- gulp-jade
These tools allow me to save all of my articles in JSON, minify scripts & styles, load fonts and convert templates into final HTML-Files.
These are wonderful tools, which make all this possible. On the website I use:
- Cookie.js -> for setting storage
- FontAwesome -> great icons
- pureCheckboxToggle -> Sweet checkbox design on the settings page
- Google Font Lato
Many thanks to all of them!
This website code is public, and you can find it on GitHub renmuell.github.io if you want to know more.
The teaser of this article I had lying around and thought this would fit the "level up" theme of this post. I created this image on 28.09.2014, almost four years ago.