7. June 2018
The GDPR makes us jump through a lot of hoops to cleanup our websites and make all our code compliant. Many aspects of the GDPR are far from completely defined yet and there is a great uncertainty what is required, what can stay and what needs to be adjusted right now.
Embeding Youtube videos is one area, that many are afraid of. You need to mention the use of youtube in your data privacy policy.
Something like that :”Our website uses plugins from YouTube, which is operated by Google. The operator of the pages is YouTube LLC, 901 Cherry Ave., San Bruno, CA 94066, USA.
If you visit one of our pages featuring a YouTube plugin, a connection to the YouTube servers is established. Here the YouTube server is informed about which of our pages you have visited.
If you’re logged in to your YouTube account, YouTube allows you to associate your browsing behavior directly with your personal profile. You can prevent this by logging out of your YouTube account.
YouTube is used to help make our website appealing. This constitutes a justified interest pursuant to Art. 6 (1) (f) DSGVO.
Further information about handling user data, can be found in the data protection declaration of YouTube under https://www.google.de/intl/de/policies/privacy.”
The question remains, if that is actually enough?
Youtube allows you to switch to a cookieless embed on their website, that limits the data flowing to Google servers.
But how do you use that programmatically, with the Youtube iFrame API?
The iFrame API documentation has not been updated since 2014 and does not mention any option to switch to the cookieless youtube host.
But there is an easy option, just add the host option “https://www.youtube-nocookie.com” to your calls :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var player; var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); player = new YT.Player('player1', { wmode: 'transparent', host: 'https://www.youtube-nocookie.com', playerVars:{ wmode: 'transparent', showinfo:0, autohide:1, }, videoId: YOUR_VID_ID, events: { 'onReady': onPlayerReady } }); |
There we go, so simple and painless :)
The GDPR is a good thing, as it helps to secure our privacy. Those that are complaining now, are those that waited until the GDPR went live and did not take the time to really prepare soon enough.
BTW the email spam sent by so many services, was so not required, but helped me to clean up / delete those dormant accounts ;)
4. February 2018
QueryBuilder is an UI component to create queries and filters.
Really neatly programmed solution, with many possible ways to hook into it with your own plugins.
26. January 2018
Easily target images with the jQuery filter function, using a Regular Expression. With this you can easily find elements that have a matching class, like ‘featured_image’ or ‘testimonial_image’.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// build our desired collection. // matches both $('img.featured-testimonial__image') & $('img.featured-work__image') const matches = $('img').filter(function() { return this.className.match(/__image/); }); // Do something to collection $.each(matches, function(i, item) { $item = $(item); src = $item.attr('src'); $item.attr('src', src.replace('http://', '//')); }); |
23. January 2018
readmore21. January 2018
CodeCombat is a multiplayer programming game for learning how to code. The ultimate goal of CodeCombat is to bring more users into the field of computer programming by making the logic and syntax more accessible and enjoyable to learn. The end game is to educate a whole new generation of computer programmers that started their journey by slaying ogres and defending their castles from oncoming enemy hordes.
CodeCombat teaches Python, JavaScript, and other languages directly in the browser.
CodeCombat itself can be found on GitHub under the free MIT license. All the art assets (sprites, backgrounds, sound effects, etc.) can also be found on GitHub and are published under a Creative Commons CC BY 4.0 license. This allows easy use of the game artwork for projects of students.
You can subscribe online or setup a dev environment on Windows, Mac or Linux yourself. You need to be able to follow instructions and have some basic technical knowledge.
While the setup on the Mac and Linux are straight forward, Windows is the hardest to get working! (CodeCombat Wiki)
I have setup a local dev environment on my Mac for my daughter, as she does not play regularly but loves to tinker with it from time to time … learning Javascript!
Used some AppleScript magic and Automator to ease the startup of the setup when needed. The setup might vary on your end, as I am using iTerm2 as a Terminal replacement.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
on run {input, parameters} set app_name to "mongod" set user_name to "pzTV" set path_to_codecombat to "/Users/pzTV/Entwicklung/" set the_pids to (do shell script "ps ax | grep " & (quoted form of app_name) & "| grep -v grep | awk '{printf \"%d \", $1}'") do shell script ("for PID in " & the_pids & "; do kill -9 $PID; done ") tell application "iTerm2" create window with profile "Mongo" tell current window tell current session write text "cd " & path_to_codecombat & "codecombat ; ./bin/coco-mongodb" end tell end tell tell current window create tab with profile "CodeCombat" tell current session write text "cd " & path_to_codecombat & "codecombat ; npm start" end tell end tell end tell delay 15 tell application "Google Chrome" open location "192.168.1.32:3000" end tell end run |
CodeCombat is a really fun way to get into programming and keep your kids motivated.
30. August 2017
After some downtime, GreenApe is breathing again. I revived the brand with a good friend of mine and we will be reopening shop options shortly.
Michael and I have been friends for a long time. We have been working on many different projects over the years.
He launched GreenApe in 2011 and I helped him with his first steps. A couple of months ago we decided to merge our competences and expand what GreenApe offers and stands for.
From the website: “The GreenApe brand was established in 2011. GreenApe’s career began with the 1st Single Malt Whisky Coffee.
As the first of its kind, our coffee is refined with Original Single Malt Whisky. To this day, he pampers many connoisseurs and gourmets with his unique taste. Now there is another reason to rejoice.
From now on, we are continuously expanding the GreenApe product world with several stylish gadgets and useful accessories. For you this means that you will be able to discover even more beautiful, special or practical things in the future.“
GreenApe is all about lifestyle & leisure products, fun gadgets and unique food & drinks.
20. August 2017
Fun Fun Fun :)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
var sql = require('sql.js'); // or sql = window.SQL if you are in a browser // Create a database var db = new sql.Database(); // NOTE: You can also use new sql.Database(data) where // data is an Uint8Array representing an SQLite database file // Execute some sql sqlstr = "CREATE TABLE hello (a int, b char);"; sqlstr += "INSERT INTO hello VALUES (0, 'hello');" sqlstr += "INSERT INTO hello VALUES (1, 'world');" db.run(sqlstr); // Run the query without returning anything var res = db.exec("SELECT * FROM hello"); /* [ {columns:['a','b'], values:[[0,'hello'],[1,'world']]} ] */ // Prepare an sql statement var stmt = db.prepare("SELECT * FROM hello WHERE a=:aval AND b=:bval"); // Bind values to the parameters and fetch the results of the query var result = stmt.getAsObject({':aval' : 1, ':bval' : 'world'}); console.log(result); // Will print {a:1, b:'world'} // Bind other values stmt.bind([0, 'hello']); while (stmt.step()) console.log(stmt.get()); // Will print [0, 'hello'] // You can also use javascript functions inside your SQL code // Create the js function you need function add(a, b) {return a+b;} // Specifies the SQL function's name, the number of it's arguments, and the js function to use db.create_function("add_js", add); // Run a query in which the function is used db.run("INSERT INTO hello VALUES (add_js(7, 3), add_js('Hello ', 'world'));"); // Inserts 10 and 'Hello world' // free the memory used by the statement stmt.free(); // You can not use your statement anymore once it has been freed. // But not freeing your statements causes memory leaks. You don't want that. // Export the database to an Uint8Array containing the SQLite database file var binaryArray = db.export(); |
20. August 2017
Font Face Observer is a fast and simple web font loader. You can use it to load fonts and customise your browser’s font loading behaviour.
Font Face Observer gives you control over web font loading using a simple promise based interface. It doesn’t matter where your fonts come from: host them yourself, or use a web font service such as Google Fonts, Typekit, Fonts.com, and Webtype.
20. August 2017
Quickly draw a leader line in your web page.
|
1 2 |
<div id="start">start</div> <div id="end">end</div> |
|
1 2 3 4 5 |
// Add new leader line from `start` to `end` (HTML/SVG elements, basically). new LeaderLine( document.getElementById('start'), document.getElementById('end') ); |
18. June 2017
CSS responsive grid of hexagons allows you to easily create just that for images and some text. Nice way to present a portfolio.
#hexGrid)
