Javascript 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

18. May 2019

Screenshot Service with Node.js

Manet is a REST API server which allows capturing screenshots of websites using various parameters.

The Node.js server can use SlimerJS or PhantomJS as headless browser engines.

I have build similar with CasperJS, but this is far better for those that want a simple straight solution.

@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

11. May 2019

portalZINE goes Multi-Language

Since I started in 2002, all iterations of portalZINE have been pure english content websites. You can read about the why on my services page.

I had potential customers in Germany complain about that a lot over the past few years. But your own website often suffers, while your customers get all the attention. That is how it is and how it should be!

Creating Multi – Language websites has been part of my services & portfolio for years, with an extreme application setup handling 13 languages in 2014 for the soccer world cup.

Multi-Language setups have come a long way and it was time to showcase that on my own setup as well. Not only to calm those potential customers, but to testdrive new functionality and possibilities on my own setup. portalZINE has always been my testlab for stability and new feature sets.

Most of my static pages are available in English and German now, the blog itself will remain pure English.

Need help setting up a multi language website, get in touch!

Cheers
Alex

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!

4. February 2018

jQuery QueryBuilder

QueryBuilder is an UI component to create queries and filters.

It can be used on advanced search engine pages, administration backends, etc.
It is highly customizable and is pluggable to many jQuery widgets like autocompleters, sliders and datepickers.
It outputs a structured JSON of rules which can be easily parsed to create SQL/NoSQL/whatever queries.
And it also comes with a set of great plugins and has a full events system for even more features.

Really neatly programmed solution, with many possible ways to hook into it with your own plugins.

GitHub

26. January 2018

Element Selections via Regular Expression with jQuery filter

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

// 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://', '//'));
});

// 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://', '//'));

});

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

21. January 2018

CodeCombat – programming can be as much fun as a game

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.

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

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

tell current window

create tab with profile "CodeCombat"

tell current session

write text "cd " & path_to_codecombat & "codecombat ; npm start"

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.

CodeCombat Website / 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.