Cielito Lindo Productions

Discovering the beauty of God's creation | Die Schönheit der Schöpfung Gottes erkennen

One piece contains 2 greeting carts. Eine Einheit enthält 2 Karten.
All prices including VAT, alle Preise inklusive MwSt.
Additional shipping costs, zusätzliche Versandkosten:
  DE: 2,75€ (excl VAT)
  AT and CH: 5,00€ (excl VAT)

item(s) -
Next | Weiter
Empty Cart | Einkaufswagen leeren

Please enter your mail address to which you would like to send the greetingcard selection:
Bitte geben Sie die Mail-Adresse ein an die Sie die Auswahlliste senden möchten:

Send list |
Liste versenden

Close | Schließen

Use Koken with a Content Delivery Network (CDN) - Part2

If you like to try Koken with a CDN but are looking for a free service (*) you might run across 2 companies: CLOUDFLARE and incapsula (although incapsula doesn't support SSL in the free version).

In order to include CLOUDFLARE CDN into your Koken page the following steps are required:

  • Deactivate any CDN plugin inside your Koken-installation if you have it activated
  • Sign up on the cloudflare page
  • Add the url of your webpage on the dashboard and wait until cloudflare analyzes your page
  • On the next page make sure that everything except your koken page is marked to bypass the cache (only yoursite.de and www should be cached via cloudflare, your mail traffic (imap, pop, pop3, smtp) should not be cached)
  • Select a plan: CLOUDFLARE offers a free plan eg. for private blogs
  • Once you click on the next page button you'll be asked to log-in to your webspace-provider and change your current namespace server to the one of cloudflare. Once you do so cloudflare will apply the settings. (Please make sure to change the namespace server only for the domain of your koken-installation and not also for other ones you own.)
  • Next you need to set up a page rule. Add as URL eg. yoursite.com/* and as property "Cache Level: Cache Everything". After that all requests that users make on your page will be routed through the namespace server of cloudflare. Webspace (per default only images, no html code) traffic will be cached, e-mail and other traffic will be sent directly to your "own" webspace.
  • It might be necessary to tell cloudflare to not cache the admin-area of koken so that it works properly (otherwise eg. you might not see update notes for new releases). To do so add a page rule in the dashboard: Add eg. http://www.yoursite.com/admin as url and set the cache level to Bypass.
  • After some days go to your dashboard and check that on the Analytics tabs the "Cached Requests" are not 0 as otherwise your Cache is not set up properly. Certain pages that offer website speed measurements also mention if code is served through a CDN, so that would be another option to verify your setup.
  • Please be aware that if you are running a statistics tool within your domain that then inside the statistics tool the locations/countries of the cloudflare servers instead of those of your page visitors will show up. This is due to the fact that CLOUDFLARE is a reverse proxy. There are several ways to fix this: Please check eg. this CLOUDFLARE support site, a second support site or the Piwik help.

If you use a shared certificate on your koken-installation it will be passed automatically to CLOUDFLARE.

That's it - you should be done now. ;-)

Please also check my other blog post about CDN here
(*) There are also plenty of other companies that offer CDN services but with a cost like SecureCDN (formerly MaxCDN), Coral, HostEurope, Cloudtront.

Cielito Lindo Productions - Behind The Scenes

If you've ever been wondering how the pictures on this page were made: They were shot with a Panasonic Lumix DMC G-5 and the following lenses:

  • Vario Lense (Kit Lense) 14-42mm
  • Tele Zoom Lense 45-200mm
  • Fixed Focal Length Lense 25mm f1.7

The camera and the lenses are part of the Micro Four Thirds standard. Micro Four Thirds Photography is relatively new - the standard was originally released by Panasonic together with Olympus in 2008.

Koken and Piwik - tips on how to improve your setup

There are quite a few tutorials out there about how to integrate the open source analytics tool Piwik (which is in my opinion a pretty good alternative to Google analytics) into Koken and they are working fine.

Unfortunately they have the disadvantage that you can't see how much time a user spends on your site unless he moves between different pages. Instead of the specific time in your Piwik statistics you can only see a visiting time of 0 seconds in these casepleases.

But there's a trick on how to improve this. Just add the following line to your Piwik tracking code:

_paq.push(['enableHeartBeatTimer']);

This line sends a heartbeat to Piwik so that Piwik knows that the visitor is still viewing the site. Per default the heartbeat is sent every 15 seconds.

In order to change this time just add instead the following line:

_paq.push(['enableHeartBeatTimer', 30]);

So as a summary the whole setup would be the following:

1. Open the admin panel of your koken installation

2. Go to the Store tab and install the HTML Injector plugin

3. Go to Settings -> Plugins page and click on the Edit button of the newly installed plugin

4. In the bottom area paste the code that you can find on your Piwik administration page under "Tracking code"

5. Add the above mentioned heartbeat-code under the line that includes the word "trackPageView" Please click here for a complete code sample or check the following screenshot.

6. (optionally) Open the developers view of your browser (or eg. Firebug on Firefox). Now on the network tab you should see that the Piwik code is reloading every eg. 15 seconds

8. Go to your Piwik installation page and check that your own visit now shows the real time

Please see this link if you wish more information about the Piwik heartbeat funtion.

Use primitive library for showing images in a different way - part 2

The library primitive.js is now also available as an electron application called primitive.nextgen

Electron is a way of building cross-plattform applications. The languages that are used are the well known HTML, JavaScript and CSS. This means that you can use one code basis for a program running on Windows, Linux and OS X (Mac).

Although there's still much that can be improved you can already give primitive.nextgen a try by checking the github repository.

Use primitive library for showing images in a different way

I'm using the image libraries primitive.js / primitive.lol for showing images in a different way.
What the libraries basically do is reading images and recalculating them using triangles, circles, rectangles...

You can find more information about the libraries on the following pages:
https://ondras.github.io/primitive.js/
https://github.com/fogleman/primitive and https://primitive.lol/

Credits for the libraries go to Ondřej Žára and Michael Fogleman. Please see the licenses on the respective pages.

In order to see the images please go to the masterpieces album.

Improve user experience on smartphones

If you want to improve user experience on smartphones then you might think about using the Photoswipe library. This enables swiping through the images (once you click on one to open the gallery), furthermore it preloads images so that when the user swipes to the next image it is already there. This makes him feel as if the photos were stored on his local device.

For Koken there already exists a plugin on github. Just download, unzip and load into the /storage/plugins folder of your Koken installation. Then enable it over the Koken admin page and that's it.

For more infos ab about the plugin please check here.

Use Koken with a Content Delivery Network (CDN)

A Content Delivery Network (CDN) is a network of servers distributed over the whole world. They mirror the page content of your Koken page. This has one big advantage: Let's take for example that your hoster sits in Europe and a possible visitor from Australia connects to your site. Without a CDN all the files (and especially the heavy images) would need to go all the long way from Europe to Australia which would result in a long waiting time for the user until the data arrives on his device.

This scenario can be improved by using a CDN. This stores the images on the CDN-servers. So if the CDN fe. has a server in Australia (or at least closer than Europe) then the Australian user gets the images from the Australian server which is obviously faster.

I've been using myself KeyCDN and been quite satisfied with them. They have a 30-day trial period so you won't loose anything on trying them out. But be aware that once this time expires they stop delivering and then you won't have any images anymore on your page. (update: this is not completely true as then images will still get delivered from your own koken homepage)
It only took minutes for me to get everything set up and the difference in image load speed is really notable comparing the page with and without CDN. (although I didn't make any measurements yet).

So what I did in detail is:
- Create an account on KeyCDN.com and log-in
- Create a new zone; in the settings assign a name, and make sure that Zone Status is "active" and the Zone Type is "Pull". In the field Origin URL enter the url to your koken-page (let's say http://myexample.com for this tutorial)
- Get the Koken CDN plugin from github
- Unzip it and upload it to you Koken-installation via FTP (make sure to get the following folder structure fe. koken/storage/plugins/koken-plugin-cdn-master/plugin.php)
- In your Koken admin panel go to Settings -> Plugins and enable the plugin (CDN for images). Perhaps you need to wait a bit or reload the page until the plugin appears.
- Go into the setup of the CDN-plugin and enter the zone URL that you got assigned from keyCDN (fe. xx-xxx.kxcdn.com)
- Leave all the check boxes selected unless the first one and wait.
- Go to your homepage and make sure that everything is working correctly. You should already see that the images are loading faster now. In your KeyCDN admin-panel under Reporting -> Analytics you can see under "Cache Hits" what percentage of files is served by the CDN.

Note: There are more explanations about the used plugin here. It suggests some preparation steps before enabling the CDN. I didn't do any of these, my page and CDN are working without them. (The only thing I did is adding KeepAlive - please see my other blog post on this)

There's still another tweak that you can apply to your Koken and CDN setup. If you load your page you probably noted in the lower part of your browser that your page connects to fe. xx-xxx.kxcdn.com. You can change this in order to state "connecting to cdn.myexample.com". To do so follow these steps:

- In your KeyCDN add a Zonealias. As Alias enter fe. cdn.myexample.com and as zone select the previously created one.
- Login into your webserver admin panel and go to the DNS settings page.
- Add a CNAME entry, fe cdn.myexample.com 120 IN CNAME xx-xxx.kxcdn.com
- Wait at least 5 minutes until the changes apply globally.
- If you want to check the DNS you can do this with a tool provided by KeyCDN. You can find it here

KeyCDN even lets you add a certificate for your CDN (fe. a Let's Encrypt certificate). So if your page is accessed via https then the user gets a valid certificate. Please be aware that after configuring the certificate you need to recreate the zonealias.

If you later on buy a signed certificate for your koken page and decide to automatically redirect all your visits on http to https then you will also need to update in your KeyCDN the zone name from http://myexample.com to https://myexample.com

Improve Koken performance

You can improve your Koken site performance by making sure that KeepAlive is enabled. KeepAlive is a webserver feature that allows the transmissions of several files at the same time and not one after another. For this you could edit either your webserver config (fe. apache or nginx) or just add the following lines to your .htaccess in the root-folder of your Koken-installation.

You can find more info about KeepAlive here