Service Workers

July 6th, 2017 / placed in JavaScript. / Tags: , , .

“Rich offline experiences, periodic background syncs, push notifications—functionality that would normally require a native application—are coming to the web. Service workers provide the technical foundation that all these features rely on.” (Gaunt, 2016)

So what is this “Service Worker” thingy?

This article is meant to give a simple idea and introduction about that a service worker is. This blog post should help you setting up a basic web app with a service worker. So, what is a service worker exactly? A service worker is a script that your browser runs in the background, separate from a web page. It opens the door to features that don’t need a web page or user interaction once it’s installed in your browser.
Lees verder

Design Patterns in JavaScript

Design Patterns in JavaScript

June 17th, 2016 / placed in Study. / Tags: , , .

Design Patterns

A design pattern is a reusable solution to prevent programming problems that occur frequently.

Design patterns are optimized, reusable solutions for the programming problems we encounter many times. A design pattern is like an template that you can implement in your software. It’s is not language-specific and can be used in almost every programming language. Another great advantage is that reusing these patterns helps to prevent issues that cause major problems but also helps code readability for other programmers familiar with design patterns so they can understand and work with the code easily. Therefore, programmers familiar with some of the most common design patterns can contribute widely on projects with much more ease.

Every developer strives to write maintainable, readable, and reusable code. It’s like playing with Lego: there’s a handful of different pieces you get to snap together however you want. Sometimes you make something cool, but most of the time you make crap. However, the longer you play, the better you get.

Studying Design Patterns is much like learning “how to build applications in a good way”. By studying these patterns we mostly read advice from other programmers that have been programming and creating applications for decades. They have distilled their most common solutions into simple, understandable pieces of knowledge with memorable names. One could see it like an apprenticeship for the digital-age: the elders are giving their best advice. You can take it and be ahead of the game, or ignore it and repeat all of their mistakes. Lees verder

jQuery, AngularJS and JavaScript

JavaScript OOP and Prototype-based OOP

June 10th, 2016 / placed in Study. / Tags: , , , , .

JavaScript OOP

JavaScript OOP is about using self-contained chunks of code to develop applications. OOP is short for Object-Oriented Programming. These self-contained chunks of code are called objects. Building applications with objects as our building blocks in JavaScript has more potential when we use great advantages like Inheritance and Encapsulation.

Prototype-based OOP JavaScript

In prototype-based object-oriented programming we create an object. This object can have certain properties and functions. If we create an vehicle, this vehicle can have properties like vehicle.type and vehicle.color to create a simple basic vehicle. You can use this basic vehicle as a prototype for an more specific vehicle, all you need to do is to ‘clone’ that basic vehicle and add some other specific properties to it and you’ll have a custom vehicle! For example:

Lees verder

JavaScript Cubes with 'History'

JavaScript test with cubes

June 6th, 2016 / placed in Study. / Tags: , , .

A little test with JavaScript. At school I was shown an little test. In this test were 3 cubes shown, once a cube is clicked it moves to the right. So basically you can click the cubes in a random sequence and the cubes move to the right as you click. But there is also a “one step back” button that removes your last click and so the cube u clicked last should move back to the left. Now I would have to figure out how this was done and try to achieve this myself.

The idea of my solution

So, with the description above I evaluated step by step what should be done and what should happen.

– First, simply creating the cubes of course and then my “one step back” button.
– Second, I would want to store my click event from every cube inside a array.
– Count up my clicks with an increment number on each click.
– Store each individual click inside the correct array from the clicked cube.
– Let the back button find out what the last click has been with a Math through the array’s of the cubes.
– Determine in which array/cube that last click has been and move that cube back.

Lees verder