Blog
I created a technique for using SVG icons without pain with a simple gulp task. Since HTTP/2 is not widely supported yet, it has always been a pain to use icons on web pages. There are many ways to include icons and all of them have some tradeoffs. This interesting technique shows a way to include SVG-icons in a cross-browser way with using custom elements. TLDR The code can be found here:…
Event delegation is a powerful concept of event handling. If you are using jQuery, you might know it as jQuery.on(). Since I don't use jQuery anymore, I had to write a similar function myself. If you are wondering how the code looks like, read on. What is event delegation? With event delegation we only set one event handler function, which then analyzes the event's target element and executes the…
I wish you all a happy new year and much fun and success for 2015! Let's have a quick review of the past 365 days. In 2014 amongst other things I ... published 34 articles researched better webfont loading 1 , 2 learned static site generation with node.js tools 1 , 2 , 3 , 4 began using Instantclick.io for providing better percieved performance 1 pimped up the good old textarea 1 , 2 wrote about…
In my previous article about webfont loading I showed a technique about how to load webfonts without blocking page rendering and without annoying the users with flickering text on all pageloads. This time I show you an optimized version of the script and provide a solution for WOFF2 support for the newest browsers. Expectations The users must see the text as soon as possible. As longs as the font…
At the Nordic.js 2014 Douglas Crockford was giving a talk about what he considers to be "the good parts" of JavaScript in 2014. He talks about ECMAScript6, what parts of it he could already identify as the new good parts, and of which he thinks, that they are going to be the new bad parts. Read on for my summary or just whatch the video. The "good parts" he identified in ES6 ES6's new (proper)…
While I was working on a simple web based markdown editor I needed something where the users can type their texts. My first thought was to use a DIV with the contenteditable attribute. But it introduced many problems, which I did not want to fight. I only needed something simple and stupid - the good old TEXTAREA. But also textareas have a big problem: they have a fixed height per default. You can…
Once upon a time every website was only using Arial, Verdana, Garamond or Times New Roman for rendering the text, because these font were the only ones reliably installed on almost any computer. But these times are over. Webfonts are spread all over the internet, but we still don't really know, how to load them efficiently. Here is my simple guide on what to do, to offer the optimal user…
There is a very clever trick, which can turn any web page into a single page app. Without requiring you to do any significant work. Fortunately there is also a very handy tool, which makes use of this trick and does a great job. As web developers we usually want to anything to load pages faster for the user. What about if started loading a page, before the user clicks a link? Optimistic page…
A few years ago I came across a simple library with which we can easily generate 8-bit sound effects for JavaScript games and apps. This library is very handy for hackathons or weekend coding sessions. This small library is called jsfx . Info on usage and a demo site can be found on its GitHub page. How does it work? This lib generates wave files as data URIs and then feeds them to an <audio>…
As I already mentioned before, I really like simple things like static webpages. To speed things up, I created a boilerplate, which can be used by anybody to generate static websites. This blog is also statically generated. Statically generating websites has many advantages. Some of these are These sites can be hosted everywhere No backend to be hacked Outstanding performance etc. The boilerplate…
Have you ever installed a new GruntJS-plugin and then forgotten to load it as a task in the gruntfile.js? Matchdep is a handy tool, which can solve this issue. What is matchdep? Matchdep is a tool which can filter node.js dependencies, which are in the package.json file. Installing it is very easy: npm install --save matchdep Automatically loading GruntJS tasks…
Embedding Google Maps in a website is very easy with its JavaScript API. A simple trick can improve the usability of large maps when users scroll with the mouse wheel over them. Usability problem If you embed Google Maps via its JavaScript API, there is usually a usability question: What should happen, when the users scroll over the map with their mouse wheels? The API defaults say: the user…
As a web developers we sometimes come across some tasks which are not that strictly related to development, but rather to design. For me such a task was a few days ago, when I found a neat background pattern, but the color just didn't fit the site I was working on. For this mini tutorial I'm using this pattern from subtlepatterns.com Before on the left, after on the right Here is what to do: Open…
I'm planning to create a simple 2D game in plain JavaScript. As the first step I would like to show, how to animate (pan or scroll) a background image using the canvas element. I am also going to show some basic setup code in order to have a loop where we can draw the frames. There are two common scenarios for simple 2D games: There is a huge background image for the entire level. All the…
Finding a random element is not a trivial task when using MongoDB - especially when performance is crutial. Finding one random document - Method 1 First of all you have to count how many documents you have in the collection. Optionally you can provide a filter condition (query). N = db.myCollection.count(query) Then you have to generate a random number which is less than the number you counted…
Every website has some links or buttons, users are clicking on them. But do webmasters know which ones do users click most often? Are there maybe some, which are not clicked at all? Maybe you just built a shiny new navigation and you may ask "do users use it?". Clicktracking gives you the answer. When using Google Analytics the results are just shown on your dashboard. Why would you track clicks…
Personally, I was always missing some sort of comparison helper in Handlebars.js. I know, I know, it's sort of being against the philosophy of Handlebars - being logicless. But I still wanted to have it. Comparing two variables almost like in plain JavaScript Thankfully I found a similar question on Stack and a superb answer from a user called Jim . Handlebars.registerHelper('ifCond', function…
Some JavaScript fun without further explanation. var a = [0, 1, 2, 3, 4, 5, 6]; console.log(a[3]); // 3 console.log(a[[3]]); // 3 console.log(a[[[3]]]); // 3 console.log(a[[[[3]]]]); // 3 console.log(a[[[[[3]]]]]); // 3 console.log(a["3"]); // 3 console.log(3 == [3]); // true console.log(3 == [[3]]); // true console.log(3 === [[3]]); // false 3 === Number([3].valueOf().toString()) // true…
In JavaScript it is perfectly valid to have a return statement in a finally block. But this doesn't mean, you should really put it in there. Consider the following code: function whatDoesThisReturn() { try { return false; } finally { return true; } } console.log(whatDoesThisReturn()); Basically the finally block is called after the try block, therefore it overrides the return value. So this…
Installing modules globally has never been a problem for me, neither on Windows nor on Ubuntu. At least until today, when I ran into a somewhat strange problem. I tried to install the pm2 package on an Ubuntu 12.04 Server ( sudo npm install -g pm2@latest ), but the package just didn't want to install correctly. I kept getting gyp error messages and this one: "OSError: [Errno 13] Permission…
JavaScript has always supported basic properties on objects. But the time is approaching when IE8 support is not relevant anymore, so we can use a more modern approach (ES5) for defining properties. There is one difference though to other programming languages - like C# - that we always define properties on objects and not on types. Defining properties on objects with Object.defineProperty() var…
Have you enjoyed playing Mario in the old days? Me too. If you want to play with it again, you just have to follow some simple steps and the game is ready to be played right in your browser. Let's try it. Screenshot from the game I found a very interesting project on Github: FullScreenMario . As the creator says: An HTML5 remake of the original Super Mario Brothers - expanded for wide screens. The…
Native apps with web technologies are not a mobile-only thing anymore. The node-webkit project makes it possible to write standalone desktop apps with JavaScript, HTML5 and CSS3. The coolest thing about this is, that both server side (node.js) and client side (jQuery, AngularJS, etc.) JavaScript libraries can be used. Screenshot of a hello world app created with node-webkit A few hours ago I found…
One thing almost every website needs is redirection. Many websites decide to serve their visitors both over www and non-www site, just in case the user types it into the browser. But for SEO it's bad, when you have the same site over two different domains. Here is, how to solve this issue with NGINX. Redirecting www to non-www with if statement server { listen 80 ; server_name www.example.com…
A few weeks ago I posted about my PubSub module . Since then I registered it as a bower package. It was actually my first bower package. I am going to show you how easy it was. Installing bower is as simple as typing npm install -g bower . If you don't know bower, here is what the docs say about it: Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem…
Many people think that it is some kind of magic, how AngularJS resolves dependencies given as function arguments. But it isn't any magic. I'll show you, how they achieve it. This technique can be used everywhere, not just with AngularJS. If you don't know what does dependency injection look like with AngularJS, here is an example: <div ng-controller="GreetCtrl"> Hello {{name}}! </div> <script>…
Have you ever needed to quickly deploy a website somewhere? Maybe to show a client some demo content? Or to show a buddy your newest static web app? Here's the solution. Google Drive officially supports hosting static files (like web pages and their assets). According to a discussion on Stack Exchange it doesn't violate the TOC when hotlinking these resources (free CDN?). Here is what to do:…
Strong caching is very important nowadays since it can reduce page load times for the users (and eventually it can also reduce network transfer costs for the publishers). Here we see a simple example how to do it with NGINX for static files like css, JavaScript and images. server { location ~* \.(?:ico|css|js|gif|jpe?g|png)$ { root /var/www/mysite; expires max; add_header Cache-Control "public";…
Have you ever wondered, what's the proper way of throwing JavaScript errors? And how to handle them? Here we'll see some examples and we'll define some custom error types. Additional bonus: the following code examples also work in node.js not just in the browsers. Throwing Errors Throwing errors is very simple, we just need the throw statement. function throwsAnError() { throw new Error('An error…
Have you ever wondered how is it possible to support tabs in a textarea? Normally when you press the tab key, the focus jumps to the next element. But with some JavaScript 'magic' it's possible to indent or unindent the text. The code detects when the user presses TAB or SHIFT+TAB - the current line gets indented or unindented. Source code for the example can be found here:…
A few weeks ago I found a very amazing tool - it's called "serve". What can it do for you? Just simply serve you files over http:// protocol. Besides static files it supports jade templates, stylus and less. I usually use it, when I need an ad-hoc web server, like when downloading some sources from github and I want to check out the examples. They sometimes need a 'real web server', because of the…
I have to admit, I have completely overseen, that fat arrows ( => ) are coming to JavaScript. The syntax is much the same as in C#. This also means that LINQ is also on its way to the JavaScript world. I have to say one thing I really like, when I'm working with C#, is LINQ and the lambda expressions. If you don't know what they are, here is an example: var areThereAnySportsCars = cars.Where(x =>…
I was long searching for the perfect blog engine for this site. More precisely I was planning to build a blog engine myself. I wanted to keep it simple, so I didn't want to use something overkill like Wordpress or Drupal. And I also like to code. But then I realised I don't really need to do this. Building a blog engine is boring, time consuming and so on. So I had to find a simpler alternative.…
I have always been a fan of simple things, such as the PubSub pattern. A few weeks ago I discovered this pattern again, when I was looking for a way to separate some JavaScript modules which don't really have to know about each other but have to have some sort of communication. TLDR I believe that publish/subscribe (PubSub) is a very powerfull pattern. Therefore I have recently open sourced my…
So the new year has come and I decided to start a blog. I try to learn new things every day. Here I want to collect my thoughts and document what I have learned so far, so that I don't forget them and don't have to learn them again later.