Functional stateful components in hyperapp

Hyperapp is a tiny JavaScript library to create views. It stands out with it's small size (1kB gzipped) and its simplicity. Its functional approach doesn't allow to use objects/classes as components. Here I show you how to create components with a local state. This can come in handy for example when one wants to create a form and only persist the state when submitting it.

Note, that I assume you already have a basic knowledge of hyperapp and JavaScript since I don't explain in detail how to use hyperapp.

Advanced sass handling with vueify

Vueify enables using .vue files with browserify. Inside them, one can use sass/scss to write the style definitions.

This works pretty well but I recently recognized a drawback. Since all .vue files get compiled separately, some sass features like combining extended selectors get lost. This can lead to increased css file sizes because extended classes and placholders will be duplicated all over the file.

Let asynchronous JavaScript functions return promises

In node.js there is the convention of error first callbacks, which get passed to nearly every asynchronous function and get called on completion or when an error occurs. Some developers (like me) rather work with promises, since they tend to be more readable. Therefore there are libraries, which provide some or even all the node.js functions in a way, that they don't get the callback passed, but return simply promises, which can be used for flow control.

Here's a method how you can simply convert such asynchronous functions into promise returning ones.

Making PHP classes available to Pico CMS templates

Yesterday I looked deeper into Pico CMS. It's a small and simple file based CMS with which one can create websites very fast, concentrating on the site's content.

The system doesn't provide you very much functionality but since it uses the Twig Template Engine and allows you to hook into the setup and rendering steps, you can easily create plugins which extend the CMS to satisfy your needs.

In this tutorial I will show you how to create plugins, which you can access in the Twig templates.

Analyze your website traffic the simple way

Every page owner comes to the point when she wants to see, if and how her site gets visited. Often the choice of the weapon is google analytics. It's so easy, isn't it? You just have to create an account, add a small JavaScript snippet to your page and then you can already see, how many visitors arrive at your site.

But I think, sometimes it's a bit too much. First of all, not everyone wants to create an account at google just to see, how much traffic a site gets. Also today many customers don't like to see, that their habits get tracked by google. They want to have a small digital fingerprint. The last point is of course performance. Even if the google analytics script isn't that large, it's still some code which has to get fetched and evaluated.

To the rescue, every web server has something built in which is called an access log. This gets updated as soon as a user comes to your page or does a request on any resource on the web server. Now, this is one of the ugly files, no one wants to read. It's a simple text file, which shows all the requests line per line in a not very readable format.