19. April 2019

Happy Easter 2019

I am taking a small easter break to join up with family and friends. We will have perfect weather up here in the north for the coming days.

I wish you all Happy Easter and many lovely days away from routine business life.

Enjoy
Alex

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

10. February 2019

Advanced Custom Fields – Free Your Gutenberg Blocks Data

Updated 25.03. : Some function names changed in the latest beta version.

IN BETA

ACF 5.8 Beta introduced an easy way to create your custom Gutenberg blocks. I am already using it heavily for a current project, to easily organize content and media assets.

Really powerful, when combined with Timber as well, which has been the foundation of many of my themes for years now ;)

ORGANIZE YOURSELF

Organizing data using ACF is nice, but sometimes you seek access to that saved block data directly. I hate it when I am confined to boundaries and the data flow is restricted or hidden. I need things to be accessible to choose the creative flow myself.

SIMPLE EXAMPLE

// Parse blocks from post content
$blocks  = parse_blocks($your_post_content);
$collect = array();

// Loop through the blocks
foreach($blocks as $block){

//Setup global block post data context
// before: acf_setup_postdata
acf_setup_meta( $block['attrs']['data'], $block['attrs']['id'], true );

// Get ACF fields
$fields = get_fields();

// I am using this to organize my assets.
// Each block of mine has a unique identifier as its first field:
// $uid = $block['attrs']['data'][array_keys($block['attrs']['data'])[0]]
// I would do:
// $collect[$uid] = $fields; 

// Collection of fields using the block id. 
$collect[$block['attrs']['id']] = $fields;

// Restore global context
// before: acf_reset_postdata
acf_reset_meta( $block['attrs']['id'] );

}

// Parse blocks from post content

$blocks = parse_blocks($your_post_content);

$collect = array();

// Loop through the blocks

foreach($blocks as $block){

//Setup global block post data context

// before: acf_setup_postdata

acf_setup_meta( $block['attrs']['data'], $block['attrs']['id'], true );

// Get ACF fields

$fields = get_fields();

// I am using this to organize my assets.

// Each block of mine has a unique identifier as its first field:

// $uid = $block['attrs']['data'][array_keys($block['attrs']['data'])[0]]

// I would do:

// $collect[$uid] = $fields;

// Collection of fields using the block id.

$collect[$block['attrs']['id']] = $fields;

// Restore global context

// before: acf_reset_postdata

acf_reset_meta( $block['attrs']['id'] );

}

There you go, enjoy some free block data :)

I was a big skeptic, when it comes to WordPress and the new Gutenberg editor, but combined with ACF + Timber its pure magic :) Looking forward to things to come!

Cheers
Alex

Enjoy coding …

Extended example:

$collect = [];
$blocks = parse_blocks($your->post_content);	
		
foreach($blocks as $block){
		
	if( isset($block['attrs']['data']) && !empty($block['attrs']['data'][array_keys($block['attrs']['data'])[0]])){	
								
		acf_setup_meta( $block['attrs']['data'], $block['attrs']['id'], true );
			
		$fields = get_fields();
			
		 acf_reset_meta( $block['attrs']['id'] );
				
		$collect[$block['attrs']['data'][array_keys($block['attrs']['data'])[0]]] = array('render' 	=> 	render_block( $block ),
																				 'field' 	=>	$fields,																							
																				  'block'  	=> 	$block
																				);
	}else{
          $collect['main'] .= render_block( $block );
}
}

$collect = [];

$blocks = parse_blocks($your->post_content);

foreach($blocks as $block){

if( isset($block['attrs']['data']) && !empty($block['attrs']['data'][array_keys($block['attrs']['data'])[0]])){

acf_setup_meta( $block['attrs']['data'], $block['attrs']['id'], true );

$fields = get_fields();

acf_reset_meta( $block['attrs']['id'] );

$collect[$block['attrs']['data'][array_keys($block['attrs']['data'])[0]]] = array('render' => render_block( $block ),

'field' => $fields,

'block' => $block

);

}else{

$collect['main'] .= render_block( $block );

}

The $collect array will hold all data, including all ACF fields. You will have full access to any field, including repeater fields. The $collect[‘main’] will just collect the standard post content.

5. February 2019

SVG Cleaner – streamline your vectors

svgcleaner has been around for some time and is constantly being optimized! It helps you clean up your SVG files, keeping them free from unnecessary data.

Temporary data used by the vector editing application
Non-optimal SVG structure representation
Unused and invisible graphical elements

Github project.

The GUI application adds batch file processing, decompression & compression and parallel cleaning jobs, GUI application.

23. January 2019

GREENTONIC – Agency for design & consulting

GREENTONICs key concept is sustainability, which encompasses consulting, concept, design and implementation. I have a close relationship with the agency and have done a couple of projects with and for them.

WordPress Backend
Custom template based theme (TWIG / TIMBER / SASS / Turbolinks & Prefetch)
Custom plugin for internal functionality
Detailed Product Presentation
Analytics
On-Page SEO / Off-Page SEO
AMP
Social Integration
Maintenance

GREENTONIC

23. January 2019

Villa Anna Speyer – Bed & Breakfast 2.0

Villa Anna Speyer – Classic Bed & Breakfast offering, with 3 double rooms & bathroom.

WordPress Backend
English / German / French
Custom template based theme (TWIG / TIMBER / SASS)
Custom plugin for internal functionality
Detailed room / offer overview
Analytics
On-Page SEO
AMP
Social Integration
Maintenance

Villa Anna Speyer

21. December 2018

Merry Christmas

Merry Christmas,
enjoy your off-time with friends and family, as well as the transition into the new year. Looking forward to our work together in 2019.

Even during this small holiday break, I will be keeping an eye on things :)
Kind regards
Alex

ps. During the christmas holidays, baked apples are a must-have for me. Quick recipe below:

Core the apples generously with an apple cutter
Fill the apples as desired, eg. with raisins , almonds or marzipan.
Bake in preheated oven at 200 ° C for about 30 minutes.
Remove baked apples from the oven and enjoy while still warm. Sprinkle with sugar and cinnamon. The brave among you, may also use some vanilla sauce ;)

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!

21. April 2018

Pimp my Log – Log viewer for your web server

Pimp my Log is a web app written in PHP. It displays server logs friendly.

By default, Pimp My Log supports :

Apache web server
NGINX web server
IIS web server
PHP log files

Key features:

Display any text and multi-line logs in your web browser
Chrome, Safari, Firefox, IE9+, Opera are supported
Be notified on your desktop as soon as a new log line is available
Be notified when log file is rotated
Apply a search filter (plain text or regular expression) on the log file
Refresh logs : Pull to refresh, push key stroke R, click on the refresh button or set an auto-refresh timer
Show/hide columns during runtime to improve readability
Mark lines during runtime to improve readability
Sort lines and view new logs lines directly in list
Export logs in various formats ( JSON, XML, CSV, RSS, ATOM, …) and expose them as webservices

Pimp my Log

9. March 2018

Pretty checkboxes and radio buttons in pure CSS

Easily add beautiful checkboxes and radio buttons in pure CSS. Highly customizable via SCSS.

Basic
- Shapes – Square, Curve, Round
- Variants – Default, Fill, Thick
- Colors – Primary, Success, Info, Warning, Danger
- Color types – Solid, Outline
- Animations – Smooth, Tada, Jelly, Pulse, Rotate
Switch – iOS style – Outline, Fill, Slim
Responsive
No JavaScript
Custom Font Icons
SVG Icons
Image support
Toggle between icons / SVG’s / images
Lock
State – Focus, Hover, Indeterminate
Supports frameworks – Bootstrap, Foundation, Sematic UI, Bulma, …
SCSS customization
Supports all modern browsers, including mobile devices
Print friendly

  <!-- add class p-default -->
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state">
            <label>Default</label>
        </div>
    </div>

    <!-- add class p-fill -->
    <div class="pretty p-default p-fill">
        <input type="checkbox" />
        <div class="state">
            <label>Fill</label>
        </div>
    </div>

    <!-- add class p-thick -->
    <div class="pretty p-default p-thick">
        <input type="checkbox" />
        <div class="state">
            <label>Thick</label>
        </div>
    </div>

<label>Default</label>

</div>

</div>

<label>Thick</label>

</div>

GitHub