Blog

How To Read Files With JavaScript And FileReader

Analysing files in PHP is easy. But what if you want to access the content of a file without the overhead of sending it to a server first (e.g. for displaying a thumbnail before uploading an image)? JavaScript provides a neat little API to achieve just that. It’s called FileReader. Let’s find out what it can do!
By paranerd | Oct 29, 2018

How To Build A Live Chat With WebSockets

WebSockets are a fascinating technology, a TCP-based network protocol that allows for asynchronous bi-directional communication. The client starts a connection, sends a request and gets a response – just like HTTP. But much unlike HTTP this connection is kept alive! This has many advantages, like Faster responses (no re-establishing connections) Less trafic (no overhead for HTTP-headers) Live updates (no periodic polling, but push notifications) If you want to learn more about WebSockets, I recommend this introduction.
By paranerd | Oct 17, 2018

How To Take A Screenshot With JavaScript

Wouldn’t it be great if you could allow users to create screenshots of your website?! Apart from being a fun exercise this feature could come in handy when you’re providing some kind of visual editor. After users customized their individual product, you could show them an image of what they created on checkout.
By paranerd | Oct 9, 2018

How To Detect Swipes In JavaScript

When working on my reverse engineering of 2048 for browsers I wanted it to be playable on mobile devices as well. Problem was, that while you could perfectly use your keyboard to control the tile movement on a desktop, this was not possible on smartphones! Digging through the web I found some partially working solutions but nothing quite good.
By | Oct 8, 2018

How To Start Scripts On USB-Connect

Having a script executed when a USB device is inserted can be quite helpful. I, for example, have an export script that syncs files to a flash drive without any interaction (except putting the drive in, of course). Here’s how you do it: Adding The Rule In /etc/udev/rules.d/ we add a rules-file.
By paranerd | Oct 8, 2018

Hello Progressive Web App | Caching Strategies

This is the last part of the series “Hello Progressive Web App”. Table of Contents Introduction Manifest Service Worker Caching Strategies Debugging There are a bunch of caching strategies out there. Here are two of them that I found particularly useful: Cache Then Network Then Cache 1 2 3 4 5 6 7 8 9 10 11 12 this.
By paranerd | Oct 5, 2018

Hello Progressive Web App | Debugging

This is the last post of the series “Hello Progressive Web App”. Table of Contents Introduction Manifest Service Worker Caching Strategies Debugging Last but not least I want to share with you some tricks and places you need to know when debugging your Progressive Web App. First and foremost I recommend using the Chrome Browser for this task as I found it to be much more convenient.
By paranerd | Oct 5, 2018

Hello Progressive Web App | Introduction

In this series I want to introduce you to a technology called “Progressive Web App”. I will give you a general overview of what Progressive Web Apps are as well as detailed instructions on how to implement this. Table of Contents Introduction Manifest Service Worker Caching Strategies Debugging Introduction to PWAs Progressive Web Apps (or PWAs for short) could possibly be the future of mobile app development.
By paranerd | Oct 5, 2018

Hello Progressive Web App | The Manifest

This is part 2 of the series “Hello Progressive Web App”. Table of Contents Introduction Manifest Service Worker Caching Strategies Debugging The manifest of a web app is a JSON file which provides information about that app. Here’s an example of a basic manifest.json: 1 2 3 4 5 6 7 8 9 10 11 { "name": "PWA Tutorial", "short_name": "PWA Tutorial", "start_url": ".
By paranerd | Oct 5, 2018

Hello Progressive Web App | The Service Worker

This is part 3 of the series “Hello Progressive Web App”. Table of Contents Introduction Manifest Service Worker Caching Strategies Debugging A service worker is a type of web worker. Its job is to intercept network requests, cache files, retrieve those files from cache and deliver push messages. A great introduction to this technology can be found here.
By paranerd | Oct 5, 2018