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 ;)
10. February 2018
We all have been in situations were we need content or information from a connected website, but have no access to a REST Api or any other backend feed.
In these cases screen scraping is the only option to get needed information to finalize an integration. You can do that directly in CURL, but that can be tedious. Far easier to use a nicely packaged solution that combines a component that simulates web browser behavior and a component that eases DOM navigation for HTML and XML documents. Meet Goutte!
Install via composer.
1 | composer require fabpot/goutte |
Login into a website and navigate to the page that has your needed information
1 2 3 4 5 6 7 8 9 10 11 12 13 | $client = new Client(); $crawler = $client->request('GET', 'https://www.page/login.php'); // select the form and fill in some values $form = $crawler->selectButton('Login')->form(); $form['f_loginname'] = 'HelloMe'; $form['f_loginpass'] = 'securepass'; // submit that form $crawler = $client->submit($form); // go to next page $crawler = $client->request('GET', 'https://www.page.de/overview.php'); |
Get the data you need.
1 2 3 4 5 6 7 8 | // loop over html and filter out what you need $crawler->filter('table.clients tr')->each(function ($node) { $node->filter('td')->each(function ($sub_node) { echo $sub_node->html(); } } |
Goutte @ Github
BrowserKit Documentation
DOM Crawler Documentation
23. January 2018
readmore30. 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
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
Snap.svg Animator is an open sourced plugin for Animate CC that exports animations for the web rendered in SVG.
It uses the Snap.svg JavaScript library to dynamically draw SVG content at runtime. Snap.svg is a JavaScript library created by Dmitry Baranovskiy, who also created Raphaël.js.
A simple API allows you to write and manipulate SVG content in the browser.
14. May 2017
“Element queries are a new way of thinking about responsive web design where the responsive conditions apply to elements on the page instead of the width or height of the browser.
Unlike CSS @media queries, @element Queries are aware of more than just the width and height of the browser, you can write responsive conditions for a number of different situations like how many characters of text or child elements an element contains.
Another concept that element queries brings to CSS is the idea of ‘scoping’ your styles to one element in the same way that JavaScript functions define a new scope for the variables they contain.”
min-width min-width in px, min-width in %max-width max-width in px, max-width in %min-height min-height in px, min-height in %max-height max-height in px, max-height in %min-characters on block elements, on form inputsmax-characters on block elements, on form inputsmin-lines min-lines demomax-lines max-lines demomin-children min-children demomax-children max-children demomin-scroll-y min-scroll-y demomax-scroll-y max-scroll-y demomin-scroll-x min-scroll-x demomax-scroll-x max-scroll-x demoorientation orientation demomin-aspect-ratio min-aspect-ratio demomax-aspect-ratio max-aspect-ratio demo$this $this demo$parent $parent demo$root $root demo$prev $prev demo$next $next demo6. May 2017
readmore29. March 2017
Inspect styles in a simple, well-organized & beautiful way with this Chrome extension. You can select any object to get more specific information about them. Also a nice way to browse color palettes of websites you visit.
