I’ve decided to add some randomness to this website! You may noticed that the two main colors change on every page reload - there’s a fixed number of “themes” available and they change at random.
To accomplish this I used the following JavaScript.
(function(window, document, undefined) { let theme = window.localStorage.getItem("kgde_theme"); console.log(theme); if (theme) { var [colorMain, colorSecondary] = JSON.parse(theme).colors; document.body.style = `--color-main:${colorMain};--color-secondary:${colorSecondary}`; } else { // [dark-color, light-color] // Color combinations taken from https://botsin.
Over 2015 and 2016 I got more and more interested in automating my daily workflows with scripts. For this purpose I learned Bash Scripting (or Shell Scripting) and started writing my first scripts to automate repeating tasks, creating apache vhosts files for example. Recently I started exploring how to implement command line tools in NodeJS and this post should give an overview.
Shebang If you already know what a Shebang is skip to the next section
I’ve spent the past week developing some features for our own website at work. We’re using WordPress and I almost always enjoy working with WordPress beside Magento projects, it’s way easier to keep an overview and with a good overview of data flow and available data it’s easier to measure and find performance bottleneck. In the following post I want to examine my workflow and the way I refactored our code base to increase the speed and overall performance of our site.
The past I decided to get my head around multi-dimensional navigations, like navigations that can have (endless) sub navigations nested inside them and so I started to try some ideas on CodePen. My first idea was to have a trigger element that, when clicked, triggeres the nearest Sub Navigation to activate it (e.g. giving it an open class). The JavaScript for this looks like this:
var d = document, trigger = d.
Closure is a very interesting concept in JavaScript. It basically determinse where and how variables or functions are accessable and where not. Since this is an essential part of JavaScript and one can run into quite some problems I want to try and give short introduction to closure and what it can be good for. It’s good to have at least basic understanding of JavaScript.
So before I start I’d like to say that I consider myself a JavaScript beginner and this is how I understand closure and scopes at the moment.
One of my favorite aspects of JavaScript is that it is unbelievable flexible. I am currently reading “Secrets of the JavaScript Ninja” by the amazing John Resig and try to play around with JavaScript whenever I’ve the time to do so. Just yesteday I needed to pass as many arguments to a function as the user wants which means I can’t check for every possible thingy. Anyway, I’ll cover this in a small write-up aka a blog post.
The great thing when you’re a beginner in any programming language (or in anything in general) is, that even small successes make you happy and proud of what you did. I’m very proud of my back to top script even though it’s not perfect at all. I could make a back to top button with jQuery in a few minutes but it wouldn’t be that much fun. However, I made another JavaScript thing I’m proud of: A pure JavaScript slider.
While I was re-designing my Website I decided to finally add some JavaScript to it. I’m learning JavaScript for like 2 months now and - to be honest - I finally understand most of the things I’m doing. Yesterday night’s topic was a “Back to Top” Button written in Vanilla JS. Actually the code behind it is kinda simple, however, I wrote an endless function that got to infinity and beyond (that’s where the title comes from.
Today I decided to dig deeper into JavaScript and experiment a bit with scope, query selection and the general manipulation of the DOM. To do so I set up an object to store all my functions - this is not necessary but definitely more fun.
After naming my Object $ (because I new this from jQuery and I thought it would look cool) I renamed it to I and here comes the fun part: While learning JS I build i.