HTML5 Archives | portalZINE NMN | Development meets Creativity

30. May 2019

Have you heard of GatsbyJS?

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

What they have to say …

Go Beyond Static Websites. Get all the benefits of static websites with none of the limitations. Gatsby sites are fully functional React apps so you can create high-quality, dynamic web apps, from blogs to e-commerce sites to user dashboards.
Use a Modern Stack for Every Site. No matter where the data comes from, Gatsby sites are built using React and GraphQL. Build a uniform workflow for you and your team, regardless of whether the data is coming from the same backend.
Load Data From Anywhere. Gatsby pulls in data from any data source, whether it’s Markdown files, a headless CMS like Contentful or WordPress, or a REST or GraphQL API. Use source plugins to load your data, then develop using Gatsby’s uniform GraphQL interface.
Performance Is Baked In. Ace your performance audits by default. Gatsby automates code splitting, image optimization, inlining critical styles, lazy-loading, and prefetching resources, and more to ensure your site is fast — no manual tuning required.
Host at Scale for Pennies. Gatsby sites don’t require servers so you can host your entire site on a CDN for a fraction of the cost of a server-rendered site. Many Gatsby sites can be hosted entirely free on services like GitHub Pages and Netlify.

What I have to say …

While researching some popular static site generation tools, GatsbyJS comes up often. I have played with NuxtJS and Hugo in the past, but what I REALLY like about GatsbyJS is the plugin / modular system. You can build your website with plain-old React and CSS styles, but make your development more efficient by adding node_modules.

Also being able to import any data source with ease, using GraphQL, is amazing. And when it comes to content management, you can easily hook a headless WordPress or Drupal setup into the mix and consume their REST APIs :)

I am not switching my own website to GatsbyJS anytime soon, but its another tool in my toolbox for future project consideration !

There are many tutorials on Youtube about getting started, maybe something to consider for the next freetime testdrive ;) Enjoy …

GatsbyJS @ Github

17. May 2019

CSS3 Animations with Special Effects.

A nice set of CSS3 Animations that can be easily used to spice up your design.

The animations can be triggered through Javascript, jQuery and the timings can be tweaked through pure CSS. The package also provides gulp, so that you can tweak every aspect easily.

Demo
Github

15. May 2019

A Helping Hand for Image & CSS Sprites

SPRITEOWL is a Photoshop extension that takes over the boring part of working with sprite images and CSS.
Retrieves x, y, width and height info of all sprite elements
Exports retina ready PNG files and required media queries of your Photoshop sprite file
Supports preprocessors LESS, SASS/SCSS & Stylus
Spriteowl
CSSOWL is a mixin library that works with Spriteowl.
LESS, SASS/SCSS & Stylus support
Open source
Cssowl

Two tools that can enhance your workflow immensely. Enjoy!

26. February 2019

VisBug – Hover inspect in the browser

Visbug is an amazing new browser extension that allows you to do a visual inspection of your website in development.

What they have to say about their tool and capabilities

Point, click & tinker
Edit or style any page, in any state, like it’s an artboard
Hover inspect styles, accessibility and alignment
Nitpick layouts & content, in the real end environment, at any device size
Leverage adobe/sketch skills
Edit any text, replace any image (hi there copywriters, ux writers, pms)
Design within the chaos: use production or prototypes and the odd states they produce, as artboards and design opportunities
Design while simulating latency, i18n, media queries, platform constraints, CPUs, screensize, etc
Make more decisions on the front end of your site/app (a11y, responsive, edge cases, etc)
No waiting for developers to expose their legos, just go direct and edit the end state (regardless of framework) and execute/test an idea

For Designers & Content Creators

A really nice tool for designers & content creators, helping them to optimize the look and feel of a website.

The extension is currently available for Chrome, but a Firefox Addon is in development.

Github
Chrome Extension

7. June 2018

Youtube iFrame API and Cookieless Domain solution (GDPR / DSGVO)

GDPR / DSGVO REQUIREMENTS

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.

EMBED YOUTUBE VIDEOS

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.”

IS THAT ENOUGH

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.

THE IFRAME API

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 :

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
		}
        });

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 ;)

Enjoy coding!

10. February 2018

Screen Scraping with Goutte

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!

STEP 0

Install via composer.

composer require fabpot/goutte

1	composer require fabpot/goutte

STEP 1

$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');

$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');

STEP 2

Get the data you need.

// 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();
  }
}

// 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

Enjoy coding …

23. January 2018

60+fps lightweight parallax for jQuery

A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.

See the Pen <a href='https://codepen.io/AldoFerrari/pen/JELBwJ/'>Parallax tilt effect, Tilt.js</a> by Aldo Ferrari (<a href='https://codepen.io/AldoFerrari'>@AldoFerrari</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

GitHub

30. August 2017

GreenApe is breathing again

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 … gives you a font promise ;)

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.

Font Face Observer @ Github

20. August 2017

Easy leaderlines for your webpage

Quickly draw a leader line in your web page.

<div id="start">start</div>
<div id="end">end</div>

1 2	<div id="start">start</div> <div id="end">end</div>

// Add new leader line from `start` to `end` (HTML/SVG elements, basically).
new LeaderLine(
  document.getElementById('start'),
  document.getElementById('end')
);

// Add new leader line from `start` to `end` (HTML/SVG elements, basically).

new LeaderLine(

document.getElementById('start'),

document.getElementById('end')

);

Leaderline @ Github