16. März 2016

Easily create guides in Photoshop with GuideGuide

Enter a few numbers and GuideGuide will draw a grid on your document using Photoshop’s guides.

It helps, if a website needs multiple columns and gutters. Especially fun, when working with grid based frameworks like Bootstrap.

You can give it try feely, but the investment of $10 is worth it :)

GuideGuide

16. März 2016

Multifunctional floating panels with jsPanel

jsPanel are multifunctional floating panels, that can also be used as a simple modal or tooltip. Panels can be minimized and maximized and have a huge amount of options.

Really impressive projectand well documented.

API / Examples & Github

24. Februar 2016

Visual Composer to Bootstrap Grid Cleanup

Simple way to do some Visual Composer Grid cleanup, when you are using Bootstrap within your theme. This removes and cleans up classes.

add_filter('vc_shortcodes_css_class', function ($class_string, $tag) {
  $tags_to_clean = [
	  'vc_row',
	  'vc_column',
	  'vc_row_inner',
	  'vc_column_inner'
  ];
  if (in_array($tag, $tags_to_clean)) {
	
	  $class_string = str_replace(' wpb_row', '', $class_string);
	  $class_string = str_replace(' vc_row-fluid', '', $class_string);
	  $class_string = str_replace(' vc_column_container', '', $class_string);
	  $class_string = str_replace('wpb_column', '', $class_string);
	  
          // replace vc_, but exclude any custom css 
          // attached via vc_custom_XXX (negative lookahead)
	  $class_string = preg_replace('/vc_(?!custom)/i', '', $class_string);
          
          // replace all vc_
          // $class_string = preg_replace('/vc_/i', '', $class_string);
  }
  $class_string = preg_replace('|col-sm|', 'col-sm', $class_string);
  return $class_string;
}, 10, 2);

add_filter('vc_shortcodes_css_class', function ($class_string, $tag) {

$tags_to_clean = [

'vc_row',

'vc_column',

'vc_row_inner',

'vc_column_inner'

];

if (in_array($tag, $tags_to_clean)) {

$class_string = str_replace(' wpb_row', '', $class_string);

$class_string = str_replace(' vc_row-fluid', '', $class_string);

$class_string = str_replace(' vc_column_container', '', $class_string);

$class_string = str_replace('wpb_column', '', $class_string);

// replace vc_, but exclude any custom css

// attached via vc_custom_XXX (negative lookahead)

$class_string = preg_replace('/vc_(?!custom)/i', '', $class_string);

// replace all vc_

// $class_string = preg_replace('/vc_/i', '', $class_string);

}

$class_string = preg_replace('|col-sm|', 'col-sm', $class_string);

return $class_string;

}, 10, 2);

Visual Composer for WordPress
Bootstrap / Bootstrap Sass

Enjoy coding …

16. Februar 2016

Build drag-and-drop multi-column grids – gridstack.js

„gridstack.js is a jQuery plugin for widget layouts. It allows you to build draggable responsive bootstrap v3 friendly layouts. “

Demo @ Github

28. Januar 2016

PNotify – simple javascript solution for notifications on the web and desktop

„PNotify is a JavaScript notification plugin, developed by SciActive. PNotify can also provide desktop notifications based on the Web Notifications spec. If desktop notifications are not available or not allowed, PNotify will fall back to displaying the notice as a regular, in-browser notice.“

PNotify @ GitHub

22. Dezember 2015

Bootcards – cards-based UI with dual-pane capability for mobile and desktop

Bootcards @ Github

19. Dezember 2015

Ladda for Bootstrap – button loading animation

Nice simple addon to add a loading animation to your Bootstrap buttons, when doing Ajax requests. Always better to let users know, that your system is doing something ;)

Ladda for Bootstrap @ Github

20. November 2015

My Javascript Stack

Some time ago I said: „My perfect framework, is a set of solid singular solutions that have proven themselves over the years. Working solo or together in harmony“.

Here is a list of some of my core components, that I use in combination or standalone.

CORE

jQuery – jquery.com
Underscore – underscorejs.org
Directives – github.com/mennovanslooten/jquery.directive.js

LAYOUT

Bootstrap – getbootstrap.com

TEMPLATING

jQuery loadTemplate – github.com/codepb/jquery-template
OR
jsViews / jsRender – jsviews.com/#jsrender

OBSERVABLES

jsViews Observable – jsviews.com/#jsoapi

ROUTER

Director – github.com/flatiron/director

STORAGE

simpleStorage – github.com/andris9/simpleStorage

DEPENDENCY MANAGER

RequireJS – requirejs.org
jQuery Tweak: If you have already loaded jQuery before RequireJS, you can not use define([„jquery“], …) in your module defines. Add this to your main RequireJS config before doing anything else …

define('jquery', [], function() { return jQuery; });

1
2
3

define('jquery', [], function() {
return jQuery;
});

NOW you can live happily ever after :)
OR
Loadrunner – github.com/danwrong/loadrunner

This is basically the core stack that I use to build out ideas :) While Angular is always an option, the above satisfies most of all needs and is often far slimmer. The rest depends on how you organize your code yourself, but at least you are not forced into fixed structures ;)

„

12. November 2015

AjarnOnline E-Learning for Thailand

E-Learning platform for Thailand

WPLMS (Learning Management System) setup / tweaks / fixes
WooCommerce tweaks / fixes / optimization
Language setup / localization cleanup / changes
Optimization
BuddyPress tweaks / changes / addons
Custom Teacher commission dashboard (MyCred integration / teacher payout)
Messaging changes and tweaks

AjarnOnline

1. November 2015

Material Design for Bootstrap

Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new Google Material Design in your favorite front-end framework.

Download