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/" 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

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

20. January 2018

Working with MongoDB? … Use Robo 3T

Robo 3T gives you the full power of the MongoDB shell, but also allows you to easily save, load, edit your queries, do copy/paste, view your results as JSON/trees/tables… and get a decent autocompletion!

It is cross-platform, free and open-source (GitHub repo here).

7. November 2017

KAIAKOO – Adventure Coaching goes online!

A new customer website goes online. KAIAKOO offers private and group coaching events, fire walks and more.

KAIAKOO – Adventure Coaching

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.

20. August 2017

Using SQLite in Javascript with sql.js

Fun Fun Fun :)

var sql = require('sql.js');
// or sql = window.SQL if you are in a browser

// Create a database
var db = new sql.Database();
// NOTE: You can also use new sql.Database(data) where
// data is an Uint8Array representing an SQLite database file

// Execute some sql
sqlstr = "CREATE TABLE hello (a int, b char);";
sqlstr += "INSERT INTO hello VALUES (0, 'hello');"
sqlstr += "INSERT INTO hello VALUES (1, 'world');"
db.run(sqlstr); // Run the query without returning anything

var res = db.exec("SELECT * FROM hello");
/*
[
	{columns:['a','b'], values:[[0,'hello'],[1,'world']]}
]
*/

// Prepare an sql statement
var stmt = db.prepare("SELECT * FROM hello WHERE a=:aval AND b=:bval");

// Bind values to the parameters and fetch the results of the query
var result = stmt.getAsObject({':aval' : 1, ':bval' : 'world'});
console.log(result); // Will print {a:1, b:'world'}

// Bind other values
stmt.bind([0, 'hello']);
while (stmt.step()) console.log(stmt.get()); // Will print [0, 'hello']

// You can also use javascript functions inside your SQL code
// Create the js function you need
function add(a, b) {return a+b;}
// Specifies the SQL function's name, the number of it's arguments, and the js function to use
db.create_function("add_js", add);
// Run a query in which the function is used
db.run("INSERT INTO hello VALUES (add_js(7, 3), add_js('Hello ', 'world'));"); // Inserts 10 and 'Hello world'

// free the memory used by the statement
stmt.free();
// You can not use your statement anymore once it has been freed.
// But not freeing your statements causes memory leaks. You don't want that.

// Export the database to an Uint8Array containing the SQLite database file
var binaryArray = db.export();

var sql = require('sql.js');

// or sql = window.SQL if you are in a browser

// Create a database

var db = new sql.Database();

// NOTE: You can also use new sql.Database(data) where

// data is an Uint8Array representing an SQLite database file

// Execute some sql

sqlstr = "CREATE TABLE hello (a int, b char);";

sqlstr += "INSERT INTO hello VALUES (0, 'hello');"

sqlstr += "INSERT INTO hello VALUES (1, 'world');"

db.run(sqlstr); // Run the query without returning anything

var res = db.exec("SELECT * FROM hello");

[

{columns:['a','b'], values:[[0,'hello'],[1,'world']]}

]

// Prepare an sql statement

var stmt = db.prepare("SELECT * FROM hello WHERE a=:aval AND b=:bval");

// Bind values to the parameters and fetch the results of the query

var result = stmt.getAsObject({':aval' : 1, ':bval' : 'world'});

console.log(result); // Will print {a:1, b:'world'}

// Bind other values

stmt.bind([0, 'hello']);

while (stmt.step()) console.log(stmt.get()); // Will print [0, 'hello']

// You can also use javascript functions inside your SQL code

// Create the js function you need

function add(a, b) {return a+b;}

// Specifies the SQL function's name, the number of it's arguments, and the js function to use

db.create_function("add_js", add);

// Run a query in which the function is used

db.run("INSERT INTO hello VALUES (add_js(7, 3), add_js('Hello ', 'world'));"); // Inserts 10 and 'Hello world'

// free the memory used by the statement

stmt.free();

// You can not use your statement anymore once it has been freed.

// But not freeing your statements causes memory leaks. You don't want that.

// Export the database to an Uint8Array containing the SQLite database file

var binaryArray = db.export();

sql.js @ Github

20. August 2017

Font Face Observer … gives you a font promise ;)

Font Face Observer is a fast and simple web font loader. You can use it to load fonts and customise your browser’s font loading behaviour.

Font Face Observer gives you control over web font loading using a simple promise based interface. It doesn’t matter where your fonts come from: host them yourself, or use a web font service such as Google Fonts, Typekit, Fonts.com, and Webtype.

Font Face Observer @ Github

20. August 2017

Easy leaderlines for your webpage

Quickly draw a leader line in your web page.

<div id="start">start</div>
<div id="end">end</div>

1 2	<div id="start">start</div> <div id="end">end</div>

// Add new leader line from `start` to `end` (HTML/SVG elements, basically).
new LeaderLine(
  document.getElementById('start'),
  document.getElementById('end')
);

// Add new leader line from `start` to `end` (HTML/SVG elements, basically).

new LeaderLine(

document.getElementById('start'),

document.getElementById('end')

);

Leaderline @ Github