Kevin C. Krinke

JOURNAL PROJECTS CONTACT

JOURNAL

Musings, anecdotes and errata.

Relax parallax

2017-05-14 15:43

Yep, you guessed it. The last big feature used in this site is the parallax-scrolling theme layout behavior.

This is a fairly simple mechanic thanks to CSS3 and basically revolves around the background-image property being configured in such a way that it's statically-pinned to the "background" and the content can flow overtop nicely.

For this one, w3schools.com has a wonderful How To - Parallax Scrolling page that really demystifies the technique.

So how do the menus actually work?

2017-05-14 15:30

What a great question! So glad you asked instead of just viewing the source Luke ;)

The menus employ a CSS technique which relies upon radio-button input tags for the selection tracking. Quite ingenious really.

For the record, I didn't invent this, I just wrote up a nice little bit and a demonstration / proof-of-concept which you can find on codepen.io

I learned about this technique while googling for HTML5 and CSS3 menu examples. Too many results to say it was just one or another that taught me the concept. Trying a bunch and then writing my own codepen was what brought it all together in my head.

Navigation can be NoScript friendly!

2017-05-14 15:01

NoScript is a wonderful tool and a decent first-line-defense against the wild interwebs. When a machine, with any operating system, plugged into the internet is typically probed and prodded within minutes of having an IP allocated; it's only prudent to reduce our attack surface.

If you've never used NoScript before; here's a quick tip - it instantly breaks 2/3rds or more of the internet when you turn it on... and that's A-OKAY by me!

I use NoScript all the time and have built up a habit of temprarily allowing and denying every connection and chirp the plugin(s) make in my browser(s). Sometimes, websites unexpectedly work with NoScript enabled and that makes me proud and happy that I don't have to disable or fiddle with the settings.

So, as a general rule, if I can avoid JavaScript for navigational menus - I try to diligently do so. It may seem absurd or even snobbish perhaps, but think of this one thing alone - software support.

Debugging is far more difficult than writing code. What's worse is that as humans with egos and so on, we tend to compete with ourselves and write things as clever and impressive as we can. That's a mistake and a sure-fire way cripple your deliverables and/or timelines.

Someone far smarter than I once said: "Everyone knows that debugging is twice as hard as writing a program in the first place. So if you're as clever as you can be when you write it, how will you ever debug it?"

One stream to rules them all...

2017-05-14 14:42

This site is entirely contained within a single file, with the exception of the binary image data.

There are a number of reasons why one would want to take this approach with a website, particularly statically-generated sites. The biggest and most important reason is efficiency.

By reducing the total number of connections made by the client browser, we reduce overhead. Webservers can be configured to utilize GZIP compression, web application firewalls can be configured for aggressive caching and so on.

There are many situations of course where the single-page-all-content model breaks down and that's when you've got dynamic or user generated content or there is just so much content that it makes downloading all of it not worthwhile when the average visitor only visits a handful of links.

Always use the right tool for the right job and this is just a simple example worth knowing.

What's so special about this site?

2017-05-14 14:10

Nothing really.

All of the tricks and techniques that are being employed on this site are in some way or another answered by stackoverflow, w3schools or any of the bazillion examples of cool things on sites like codepen.io which of course are littered in Google's results for anyone who cares to learn.

The next three journal entries will elaborate upon the individual techniques of interest that have been applied to this site design.

Why don't I like JavaScript?

2017-05-14 10:11

It's pretty simple really.

Use the right tool for the right job and HTML5 + CSS3 have come a long way from 1994 (not that CSS even existed back then). "Back in the day" when JavaScript became prevalent, I've always felt like it did serve some sort of "band-aide" purpose for solving the lack of browser support and general document formatting features that we've not got in HTML5+CSS3.

I do use JavaScript for work and other appropriate situations, however, I fail to see why I should need yet another programming language involved when really - I just want to have your browser render a nice looking website regardless of the plugins and configurations you may or may not have monkied up.

I also don't like the security model of JavaScript - a JVM is running on my local machine, running code delivered from sites I don't even know (ad networks, etc), inside my browser, inside my desktop... Sure that's a lot of layers to break through, but that's also a lot of layers that are potentially riddled with unknown flaws or weaknesses.

The above are all just irrelevant personal biases that I get to enforce upon my own personal space. When it comes to my professional life; I don't care if it's Win/Lin/Mac or VB or LISP - I get paid to fix problems and problems I be fixin' wherever I can. If that means I've gotta be just as good with iptables as I am with Vyatta routers - so be it; I get to learn something new!

Vanilla Pureness

2017-05-14 07:55

Looks like I've achieved a personal goal! Paralax theme, responsive CSS and not a spit of JavaScript anywhere!

All of the background images were taken by me during my recent trip to Japan.

At some point I'll do a quick write-up for each of the main techniquese emplyed by this site design (including where I learned the examples from).

Woots!

Here's to a fresh start...

2017-05-13 04:20

Over the years I've gone from Gopher all the way to Go and as my personal website has been sitting in a sorry state for so long, I've decided to finally flex the HTML5+CSS3 skills I've picked up and implement something interesting to me.

Once upon a time I ran Blosxom (circa 2004-06 according to the wayback machine). I loved blosxom – the simplicity, the Perl, but... it was not meant to last. Massive server outage and corruption - site gone.

Then I got lazy and decided to setup Wordpress (2012-15) because I didn't want to be so hands-on with my website. I just wanted things to work and be done with it at the time... then it was hacked a few times and yeah. (Note: typical incident report included a combination of Wordpress, PHP and PEBKAC errors.)

Then I switched things around and wrote up some as-plain-as-it-can-get HTML site which resulted in the abomination that was the prior-to-this-relaunched site.

This time, I'm going forward with a certain bar of execution: No JavaScript. The ideal goal (probably unattainable) is nothing beyond HTML, CSS and art assets will be used.

Here we go!

PROJECTS

My free softvaporware and other digital things.

CONTACT