20. May 2019

A runtime developer console, interactive debugger and REPL for PHP.

PsySH can be used as an interactive debugger, much like JavaScript’s debugger statement, saving you from endless var_dump() and die() iterations. Just drop this line in where you’d like to have a breakpoint: eval(\Psy\sh());
PsySH has tab completion for variable names, functions, classes, methods, properties, and even files! Just start typing, then hit [tab]. But you probably already guessed that.
Most PHP shells are terrible at namespaces. PsySH does just what you’d expect.
Have a question about a core PHP function? Try doc array_map. Want to read the documentation for an object property? Run doc $response->statusTexts.
The list command knows all about your code — and everyone else’s. Easily list and search all variables, constants, classes, interfaces, traits, functions, methods and properties.
Easily show the source code for any userland object, class, interface, trait, constant, method or property.
No worries, PsySH has your back. We caught it for you, and made it available via the wtf command.
Show, search, save and replay your shell history.
and much more :)

Integrations

CakePHP: cake console
CiviCRM: cv cli
CodeIgniter: craftsman console
Drupal: drush php, drupal shell
Emacs: psysh.el
eZ Publish: ezsh
Grav: bin/plugin psysh shell
Jupyter: Jupyter-PHP
Laravel/Lumen: artisan tinker
Magento: magerun console
MediaWiki: php maintenance/shell.php
Pantheon CLI: terminus cli console
Phalcon: phalcon console
SilverStripe: sliver
Symfony: sf1-psysh-bootstrap
Symfony2: PsyshBundle, symfony-repl
WordPress: wp-cli shell
Yii 2: yii shell
Zend Framework 1: zf1-psysh
Zend Framework 2: PsyshModule

Github
Website

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

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!

15. May 2019

“After Meltdown, Spectre, and Foreshadow, we discovered more critical vulnerabilities in modern processors. The ZombieLoad attack allows stealing sensitive data and keys while the computer accesses them. While programs normally only see their own data, a malicious program can exploit the fill buffers to get hold of secrets currently processed by other running programs. These secrets can be user-level secrets, such as browser history, website content, user keys, and passwords, or system-level secrets, such as disk encryption keys.” – zombieloadattack.com

There seems to be a new security related story every day. Read about the latest CPU related issues at CPU.fail.

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

10. May 2019

Composercat – a GUI for composer

Composercat is a comprehensive GUI for the Composer package manager, designed both for professionals and people taking their first steps with Composer.

A nice entry point for everyone that is afraid of the console. The GUI application is currently in beta and available for Windows, MacOS and Linux.

“Composer is a tool for dependency management in PHP. It allows you to declare the libraries your project depends on and it will manage (install/update) them for you.”

Composercat
Composer

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]])){