Blog | portalZINE NMN | Development meets Creativity

27. January 2018

Audiomanager for text-to-speech cloud services

I have been working on a project , that relies on text-to-speech cloud services for a lot of things.

Audiomanager abstracts access to popular text-to-speech cloud services like Google, Ivona, Amazon Polly… Really a timesaver, when evaluating different services.

Polly Example

$adapter = new \AudioManager\Adapter\Polly();
$adapter->getOptions()->initialize()
    ->setVersion('latest')
    ->setRegion('us-west-2')
    ->setCredentials()
        ->setKey('...')
        ->setSecret('...');

$adapter->getOptions()->setOutputFormat('...'); //Default 'mp3'
$adapter->getOptions()->setLexiconNames('...');
$adapter->getOptions()->setSampleRate('...'); //Default '16000'
$adapter->getOptions()->setTextType('...'); //Default 'text'
$adapter->getOptions()->setVoiceId('...'); //Default 'Salli'

$adapter = new \AudioManager\Adapter\Polly();

$adapter->getOptions()->initialize()

->setVersion('latest')

->setRegion('us-west-2')

->setCredentials()

->setKey('...')

->setSecret('...');

$adapter->getOptions()->setOutputFormat('...'); //Default 'mp3'

$adapter->getOptions()->setLexiconNames('...');

$adapter->getOptions()->setSampleRate('...'); //Default '16000'

$adapter->getOptions()->setTextType('...'); //Default 'text'

$adapter->getOptions()->setVoiceId('...'); //Default 'Salli'

GitHub

Enjoy coding ….

27. January 2018

Never store sensitive credentials in your code again – PHP dotenv

PHP dotenv loads environment variables from .env to getenv(), $_ENV and $_SERVER automagically.

You should never store sensitive credentials in your code. Anything that is likely to change between deployment environments – such as database credentials or credentials for 3rd party services – should be extracted from the code into environment variables.

Add your application configuration to a .env file in the root of your project. Make sure the .env file is added to your .gitignore so it is not being checked-in.

DEFINE

S3_BUCKET="dotenv"
SECRET_KEY="souper_seekret_key"

1 2	S3_BUCKET="dotenv" SECRET_KEY="souper_seekret_key"

LOAD

$dotenv = new Dotenv\Dotenv(__DIR__);
$dotenv->load();

// OR WITH filename

$dotenv = new Dotenv\Dotenv(__DIR__, 'myconfig');
$dotenv->load();

$dotenv = new Dotenv\Dotenv(__DIR__);

$dotenv->load();

// OR WITH filename

$dotenv = new Dotenv\Dotenv(__DIR__, 'myconfig');

$dotenv->load();

ACCESS

$s3_bucket = getenv('S3_BUCKET');
$s3_bucket = $_ENV['S3_BUCKET'];
$s3_bucket = $_SERVER['S3_BUCKET'];

$s3_bucket = getenv('S3_BUCKET');

$s3_bucket = $_ENV['S3_BUCKET'];

$s3_bucket = $_SERVER['S3_BUCKET'];

GitHub

Enjoy coding and be secure …

27. January 2018

Generate Unique User Nicenames for WordPress

Simple little snippet, that can easily be used in conjunction with wp_update_user()

/* Generate Unique User Nicename */
function generate_unique_user_nicename( $x ) {
	// set up args to query
	$args = array(
		'search'         => sanitize_title( $x ),
		'search_columns' => array( 'user_nicename' )
	);
	// query for user
	$user_url_exists = new WP_User_Query( $args );
	$results = $user_url_exists->get_results();
	// if user url is found, check for new one
	if( !empty( $results ) ) {
		$i = substr( sanitize_title( $x ), intval( strrpos( sanitize_title( $x ) ,'-' ) ) + 1 ); 
		if( is_numeric( $i ) ) {
			$i++;
			$y = substr($x, 0, strrpos($x,'-' ));
			$company_name = $y . '-' . $i;
		} else {
			$company_name = $x . '-1';
		}
		$new_company_name = sanitize_title( $company_name );
		return generate_unique_user_nicename( $new_company_name );
	} else {
		return sanitize_title( $x );
	}
}

/* Generate Unique User Nicename */

function generate_unique_user_nicename( $x ) {

// set up args to query

$args = array(

'search' => sanitize_title( $x ),

'search_columns' => array( 'user_nicename' )

);

// query for user

$user_url_exists = new WP_User_Query( $args );

$results = $user_url_exists->get_results();

// if user url is found, check for new one

if( !empty( $results ) ) {

$i = substr( sanitize_title( $x ), intval( strrpos( sanitize_title( $x ) ,'-' ) ) + 1 );

if( is_numeric( $i ) ) {

$i++;

$y = substr($x, 0, strrpos($x,'-' ));

$company_name = $y . '-' . $i;

} else {

$company_name = $x . '-1';

}

$new_company_name = sanitize_title( $company_name );

return generate_unique_user_nicename( $new_company_name );

} else {

return sanitize_title( $x );

}

Enjoy coding …

26. January 2018

Website traffic visualization with Logstalgia

“Logstalgia is a website traffic visualization tool that replays or streams web-server access logs as a pong-like battle between the web server and an never ending torrent of requests.

Requests appear as colored balls (the same color as the host) which travel across the screen to arrive at the requested location. Successful requests are hit by the paddle while unsuccessful ones (eg 404 – File Not Found) are missed and pass through.

The paths of requests are summarized within the available space by identifying common path prefixes. Related paths are grouped together under headings. For instance, by default paths ending in png, gif or jpg are grouped under the heading Images. Paths that don’t match any of the specified groups are lumped together under a Miscellaneous section.”

Logstalgia

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 …

26. January 2018

Keep container ratios with pure CSS

Container

<div class='box'>
    <div class='content'>Aspect ratio of 1:1</div>
</div>

<div class='content'>Aspect ratio of 1:1</div>

</div>

CSS

.box {
    position: relative;
    width:    50%; /* desired width */
}

.box:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

.content {
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
}

/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
    padding-top: 50%;
}
.ratio1_2:before{
    padding-top: 200%;
}
.ratio4_3:before{
    padding-top: 75%;
}
.ratio16_9:before{
    padding-top: 56.25%;
}

.box {

position: relative;

width: 50%; /* desired width */

}

.box:before {

content: "";

display: block;

padding-top: 100%; /* initial ratio of 1:1*/

}

.content {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

}

/* Other ratios - just apply the desired class to the "box" element */

.ratio2_1:before{

padding-top: 50%;

}

.ratio1_2:before{

padding-top: 200%;

}

.ratio4_3:before{

padding-top: 75%;

}

.ratio16_9:before{

padding-top: 56.25%;

}

23. January 2018

Cleaning up the WordPress Feed (Validation)

When using your main content feed to share posts via buffer or other services, it is crucial that your feed validates cleanly.

There are always things in the generated WordPress content that can break your feed validation. Here some things to cleanup or alter your delivered feed content.

CONDITIONAL TAGS

is_feed()
Check for syndication request. This tag is not typically used by users; it is used internally by WordPress and is available for Plugin Developers.

Check for feed syndication in your themes functions.php

if (is_feed()) {
    /.. tweaks go here ../
}

if (is_feed()) {

/.. tweaks go here ../

}

REMOVE IFRAMES

function rss_noiframe($content) {
        
    $content = preg_replace( '/<iframe(.*)\/iframe>/is', '', $content );

    return $content;
}

add_filter('the_excerpt_rss', 'rss_noiframe');
add_filter('the_content_feed', 'rss_noiframe');

function rss_noiframe($content) {

$content = preg_replace( '/<iframe(.*)\/iframe>/is', '', $content );

return $content;

}

add_filter('the_excerpt_rss', 'rss_noiframe');

add_filter('the_content_feed', 'rss_noiframe');

REMOVE / DISABLE COMMENTS

function rss_nocomments($content) {
    
     global $post;
      $post->comment_status="closed";
   
  
}

add_filter('the_excerpt_rss', 'rss_nocomments');
add_filter('the_content_feed', 'rss_nocomments');

function rss_nocomments($content) {

global $post;

$post->comment_status="closed";

}

add_filter('the_excerpt_rss', 'rss_nocomments');

add_filter('the_content_feed', 'rss_nocomments');

REMOVE RESPONSIVE IMAGES

The sizes attribute breaks feed validation, here how to clean it up.

function no_responsive_image_feeds() {
    add_filter( 'max_srcset_image_width', function() {
       return 1;
    } );
}

add_action('rss2_head', 'no_responsive_image_feeds' );
add_action('atom_head', 'no_responsive_image_feeds' );
add_action('rss_head', 'no_responsive_image_feeds' );

function no_responsive_image_feeds() {

add_filter( 'max_srcset_image_width', function() {

return 1;

} );

}

add_action('rss2_head', 'no_responsive_image_feeds' );

add_action('atom_head', 'no_responsive_image_feeds' );

add_action('rss_head', 'no_responsive_image_feeds' );

INCLUDE PAGES IN POST FEED

if (is_feed()) {
function feedFilter($query) {
	if ($query->is_feed) {
		$query->set('post_type','any');
		}
	return $query;
}
add_filter('pre_get_posts','feedFilter');
}

if (is_feed()) {

function feedFilter($query) {

if ($query->is_feed) {

$query->set('post_type','any');

}

return $query;

}

add_filter('pre_get_posts','feedFilter');

}

ADJUST AMOUNT OF POSTS

if (is_feed()) {

function feedFilter($query) {
	if ($query->is_feed) {
		$query->set('posts_per_page','11');
	}
 
	return $query;
}
add_filter('pre_get_posts','feedFilter');

}

if (is_feed()) {

function feedFilter($query) {

if ($query->is_feed) {

$query->set('posts_per_page','11');

}

return $query;

}

add_filter('pre_get_posts','feedFilter');

}

LIMIT BY CATEGORY

if (is_feed()) {
function feedFilter($query) {
	if ($query->is_feed) {
		$query->set('category_name', 'my-special-cat');
	}
 
	return $query;
}
add_filter('pre_get_posts','feedFilter');
}

if (is_feed()) {

function feedFilter($query) {

if ($query->is_feed) {

$query->set('category_name', 'my-special-cat');

}

return $query;

}

add_filter('pre_get_posts','feedFilter');

}

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

Villa Anna Speyer – Bed & Breakfast

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

Static html placeholder for first initial introduction & offer
WordPress Backend (coming soon)
Booking Backend (coming soon)
Maintenance

Villa Anna Speyer

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