Printing Cyrillic characters with thermal printer and Node

Footer concept

WordPress navigation – add custom menu classes

Lately, I develop WordPress themes. The thing is, I don’t like the WordPress default css style names – I prefer BEM naming convention. If you’ve tried to style a WordPress theme, you know, that by default WordPress apply some classes to the menu items – like  page_item, page-item-$ and current_page_item for the current active menu. I wanted to remove all other classes, and go with navigation__item and navigation__item-active for the current selected menu. Like almost everything in wordpress, you can change this using filters. Filter function takes as arguments hook ( think about the hook as event ) , function that will modify the output, priority and number of arguments that the function will accept. So here is the snippet:

function add_custom_classes($classes){
	$newClasses[] = "navigation__item";

	if( in_array('current_page_item', $classes) ){
		array_push($newClasses, "navigation__item-active");

    return $newClasses;

add_filter('nav_menu_css_class', 'add_custom_classes', 100, 1);
add_filter('nav_menu_item_id', 'add_custom_classes', 100, 1);
add_filter('page_css_class', 'add_custom_classes', 100, 1);

Add it to your functions.php file and you have navigation__item class set to the list items, and navigation__item-active class added to the current menu item.

New Pen: Header scroll effect

Recently I had to develop one-pager, that had complicated animation in the header, that should progress forward/backward on page scroll. Because the page had to be very light, I decided to drop jQuery and TimelineMax and include only TweenLite and CSSPlugin. Here is the result:

See the Pen Page Header animation by Chrysto (@bassta) on CodePen.850

The script is very compact, easy to use and modify, cross-browser ( Actually DOMContentLoaded is supported IE9+ ).

Have fun forking and modifying it.

Onepage scrolling concept

Staggering animations with TweenLite


Wait, wasn’t there TweenMax staggerTo method? Yes, there is. I use staggered animations in a lot of my projects, but I also like to keep my javascript files as light as possible. So, for one my latest projects I needed to stagger animations, and also to have proper event handling system, but keep all as light as possible ( without including TweenMax ). So I end up digging into TweenMax code, and created this little snippet ( basically, just took the TweenMax code and modified it a bit, so it can be used standalone ) ;

var TM = {};

 TM.staggerTo = function(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {
 stagger = stagger || 0;
 var delay = vars.delay || 0,
 a = [],
 finalComplete = function() {
 if (vars.onComplete) {
 vars.onComplete.apply(vars.onCompleteScope || this, arguments);
 onCompleteAll.apply(onCompleteAllScope || this, onCompleteAllParams || []);
 l, copy, i, p;
 if (!$.isArray(targets)) {
 if (typeof(targets) === "string") {
 targets = TweenLite.selector(targets) || targets;
 if (TweenLite._internals.isSelector(targets)) {
 targets = [], 0);
 l = targets.length;
 for (i = 0; i < l; i++) {
 copy = {};
 for (p in vars) {
 copy[p] = vars[p];
 copy.delay = delay;
 if (i === l - 1 && onCompleteAll) {
 copy.onComplete = finalComplete;
 a[i] = new TweenLite(targets[i], duration, copy);
 delay += stagger;
 return a;

It can be perfect solution for banners, where the size of the javascript files is so important. Use it just like you would use TweenMax staggerTo() method.

TM.staggerTo(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope)

Here is a codepen

See the Pen TweenLite staggerTo by Chrysto (@bassta) on CodePen. blurred header effect

Tiled background parallax effect

Simple fade in/fade out slideshow with TweenLite