4. Februar 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

1. Februar 2018

Map Icons to customize your Google Map Icons

An icon font to use with the Google Maps API and Google Places API, using SVG markers and icon labels.

Map Icons makes Google Maps Markers dynamic with control over shape, color, size, and icon easily changed using options in the marker object as well as simple SVG Notation and CSS.

GitHub / Preview

27. Januar 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. Januar 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. Januar 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. Januar 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. Januar 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. Januar 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. Januar 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. Januar 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/" target="_blank" rel="noopener">Parallax tilt effect, Tilt.js</a> by Aldo Ferrari (<a href="https://codepen.io/AldoFerrari" target="_blank" rel="noopener">@AldoFerrari</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br />

GitHub