Meteor

I played around with meteor yesterday and I have mixed feelings. First of all, I was impressed that the whole plaform (it is not just a framework but an end-to-end development platform for all devices and browsers that matter because of the power of JavaScript). It worked out of the box on my Windows machine and it deployed out of the box to the site (http://happy2016.meteor.com/).

I watched some videos about meteor and I like their bottom line of bringing to the world what Facebook and Google have been hiding from us for their revenue. Fast interactive (reactive) web technologies.

There are a few things that make me skeptical as to whether meteor is the future. First of all, do we really want to code in Javascript? I have found debugging a minor application to be a nightmare, even with Chrome developer tools. Hot code pushing and “optimistic UI” may be neat, but it really isn’t all that elegant or robust. I like the integration of angular and node, but I’m not sure about MongoDB. I needed a random record (my bad, I’m still thinking in SQL-records with primary and secundary keys rather than in document collections) and it was pretty tricky (but of course Stackoverflow helped me out).

I normally pick a platform for its clout and the amount of contributed modules/plugins. That’s why I used Drupal back in 2011 and switched to WordPress more recently. PHP, I know.

On Atmosphere.js there are some good projects available, but many are buggy and better not used in a production environment. Eventually, the success of meteor and similar platforms will hinge on how easy it is to deploy an app.

Read more »

jQuery UI style hack

Some of us still use jQuery UI In fact, it wasn’t too bad, is still supported by all modern browsers, and performs reasonably well on mobile.

There is one issue: the graphics look horribly 2010. jQuery UI offers a user interface to cherrypick your own CSS (it’s great and kind of works: look at their themeroller here.

Still, it doesn’t let you replace the .png icons with font icons (fontawesome, dashicons). I didn’t feel like overhauling the thing so I came up with a simple hack that works for me (on this site):

.ui-corner-all { border-radius:0!important}
.ui-state-hover {border:0!important;background:transparent!important}
.ui-widget-header {background:@color1!important; color:@bkg!important}
.ui-widget-content{font-family:@font3!important}
.ui-state-default, ui-state-default:hover {color: @color1!important;background:@bkg!important;border:0!important}
.ui-corner-all thead, .ui-corner-all td {color: @color1!important;}
.ui-datepicker-prev span, .ui-datepicker-next span {visibility:hidden!important}
.ui-datepicker-prev:before, .ui-datepicker-next:before {font: 2em/1 dashicons!important;color: @bkg!important;}
.ui-datepicker-prev:before { content: "\f141"!important;}
.ui-datepicker-next:before{content: "\f139"!important;}


Read more »

Bob the Builder likes women with brick tits.

Read more »

Weekly changing random number

Simple task: How do we generate a random number that automatically changes every certain period of time. Of course, we use the week number when calculating the random number. Also, we have to cache a “large integer” that will not change until the end of the week to get a deterministic random-enough number.

The result can look something like this when we integrate it in a WordPress menu and we only take into account the tags with a minimum number of posts.

$the_tags = get_tags();
foreach ($the_tags as $t) {
if ($t->count>INFOCUS_MIN) $ft[] = $t;
}
$tag = $ft[abs(SOME_LARGE_INTEGER * date(“W”) % sizeof($ft))];
$link = get_tag_link($tag->term_id);
$infocus = ‘<li id=”menu-item-featured-tag” class=”menu-item”><a href=”‘.$link.'”>’ . __(‘In focus: ‘)
. $tag->name.'</a></li>’;

This might be useful and hooking this simple stuff into a menu doesn’t really justify a plugin. But it can be extended with other functionality. We can call it Magic Menu Items. It could integrate with Jetpack to access statistics, and so on.

Read more »

Gmail notification only for important mails

Some e-mails are more important than others. As a freelance writer/web designer/translator I often get time critical messages. I want to get an email notification with a sound alarm and a vibration for those, but not for all my mail (my phone would be abuzz continuously).

So I found this useful article on how-to geek. It is free and really simple to set up in gmail. You basically add a filter label and set your notifications only for that label in Android (the label needs to be created on a pc though).

Gmail notification is just a part of the puzzle for freelancers, especially those who want to be the first to respond to job offers.

Read more »

Feel The Bern in a Theater near you

Read more »

Light background (the best way)

When creating a fixed background image there are a few things to consider:

1. browser compatibility. Does that z-index work everywhere?
2. image size. Does this load fast enough on a 3G connection?
3. ease of change. What happens when the theme updates?

I found that the easiest way is to set the background-image property via the add-on CSS. That way it is “in between” the theme layer and the individual page. Adding an <IMG> is also possible straight from the content but it gives you z-index headaches. The content elements just don’t seem to go in front of the image element.

So on creativechoice.org I just added this 12k file stretched as the background of site-content:

.site-content {   background-image: url("http://creativechoice.org/wp-content/uploads/2015/10/bkg.jpg");   background-size: contain;  }

I hard-coded the opacity in the file. If you need more flexibility you could consider using the IMG-tag, however that might mean restructuring your HTML-structure to have all navigation elements (links) placed on top of it.

Read more »

LESS in 5 minutes

LESS is a handy precompiler for CSS, but as it develops it becomes so complex we start assuming that we need a tutorial or long read in order to understand it. I think it’s worthwhile to use just a few very basic capabilities of LESS (leaner CSS) and that you can learn how to use them in 5 minutes.

First, on Windows you can use http://winless.org/
If you use WordPress, install Jetpack which comes with an extra CSS option allowing LESS (or use another plugin that has integrated the PHP LESS-compiler).
No sweat so far.

Take an old CSS file and replace color codes with variables like so:

body {
color : 77da34;
}

becomes

@green : 77da34;
body {
color : @green;
}


Variables are the first thing we absolutely NEED if we want to write leaner CSS. The next is mixins:
Instead of

opacity : .75;

you write

.opacity (@opacity: 0.5) {
-webkit-opacity: @opacity;
-moz-opacity: @opacity;
opacity: @opacity;
}
.element {
.opacity (.75);
}

Et voilà. This is very handy for browser compatibility and with Media Queries.
Let’s offer some flesh. Here is a file of predefined mixins I found on the net and frequently use: more.less. Feel free to use.

Read more »

More.less


/* http://designshack.net/articles/css/10-less-css-examples-you-should-steal-for-your-projects/
*/

@base: 663333;
@complement1: spin(@base, 180);
@complement2: darken(spin(@base, 180), 5%);
@lighten1: lighten(@base, 15%);
@lighten2: lighten(@base, 30%);
@lighter1: lighten(spin(@base, 5), 10%);
@lighter2: lighten(spin(@base, 10), 20%);
@darker1: darken(spin(@base, -5), 10%);
@darker2: darken(spin(@base, -10), 20%);

.opacity (@opacity: 0.5) {
-webkit-opacity: @opacity;
-moz-opacity: @opacity;
opacity: @opacity;
}
.border-radius (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.box-shadow (@string: 2px 2px 4px rgb(0,0,0,0.5)) {
-webkit-box-shadow: @string;
-moz-box-shadow: @string;
box-shadow: @string;
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
-webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
-moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
-webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
-moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.transition (@prop: all, @time: 1s, @ease: linear) {
-webkit-transition: @prop @time @ease;
-moz-transition: @prop @time @ease;
-o-transition: @prop @time @ease;
-ms-transition: @prop @time @ease;
transition: @prop @time @ease;
}
.transitions (@transitions) {
-webkit-transition: @transitions;
-moz-transition: @transitions;
-o-transition: @transitions;
-ms-transition: @transitions;
transition: @transitions;
}
.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
-webkit-animation: @name @duration @delay @ease;
-moz-animation: @name @duration @delay @ease;
-ms-animation: @name @duration @delay @ease;
}
.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
-webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
-moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
-o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
-ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}
.gradient (@origin: left, @start: ffffff, @stop: 000000) {
background-color: @start;
background-image: -webkit-linear-gradient(@origin, @start, @stop);
background-image: -moz-linear-gradient(@origin, @start, @stop);
background-image: -o-linear-gradient(@origin, @start, @stop);
background-image: -ms-linear-gradient(@origin, @start, @stop);
background-image: linear-gradient(@origin, @start, @stop);
}
.quick-gradient (@origin: left, @alpha: 0.2) {
background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
}
.reflect (@length: 50%, @opacity: 0.2){
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(@length, transparent), to(rgba(255,255,255,@opacity)));
}

.scale (@factor) {
-webkit-transform: scale(@factor);
-moz-transform: scale(@factor);
-ms-transform: scale(@factor);
-o-transform: scale(@factor);
}
.rotate (@deg) {
-webkit-transform: rotate(@deg);
-moz-transform: rotate(@deg);
-ms-transform: rotate(@deg);
-o-transform: rotate(@deg);
}
.skew (@deg, @deg2) {
-webkit-transform: skew(@deg, @deg2);
-moz-transform: skew(@deg, @deg2);
-ms-transform: skew(@deg, @deg2);
-o-transform: skew(@deg, @deg2);
}
.translate (@x, @y:0) {
-webkit-transform: translate(@x, @y);
-moz-transform: translate(@x, @y);
-ms-transform: translate(@x, @y);
-o-transform: translate(@x, @y);
}
.translate3d (@x, @y: 0, @z: 0) {
-webkit-transform: translate3d(@x, @y, @z);
-moz-transform: translate3d(@x, @y, @z);
-ms-transform: translate3d(@x, @y, @z);
-o-transform: translate3d(@x, @y, @z);
}
.perspective (@value: 1000) {
-webkit-perspective: @value;
-moz-perspective: @value;
-ms-perspective: @value;
perspective: @value;
}
.transform-origin (@x:center, @y:center) {
-webkit-transform-origin: @x @y;
-moz-transform-origin: @x @y;
-ms-transform-origin: @x @y;
-o-transform-origin: @x @y;
}

@grunge : url(data:image/png;base64,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! cYHwjTtU NAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);

Read more »

Copying formula's in LibreOffice Writer

Here’s another little annoyance solved: I used LibreOffice to make simple invoices and use the nice calc function to calculate the items in my invoice. However. LO didn’t allow to copy formula’s – or so I thought. I found this after some searching and thought I’d share it with you.
It is possible, as explained in the excellent libreoffice forum.

Read more »

Sorting dates with PHP

This should have been much faster, so I’m sharing this. PHP (<5.2) creates and compares dates out of the box with the dateTime class.

This is my use case. I had saved some dates as strings in the database, using the jQuery datepicker. I had to convert them back to dateTime-objects to compare two dates. The proper way to do this is to turn them into objects either by using date_create() or new dateTime(). Note that if you use a string that can’t be recognized, the constructer returns false, and your subsequent comparison functions screams at the boolean.

Here’s that comparison function, and the usort-statement that uses it to sort an array of objects by date:

function cmp($a, $b)
{
$datetime1 = date_create($a->meta_value);
$datetime2 = date_create($b->meta_value);
if ($datetime1 && $datetime2) {
$i = date_diff($datetime1, $datetime2);
}
return ($i->invert);  /* boolean: negative when the date diff is negative */
}
usort($comments, "cmp");

Of course in some perfect universe we’d like all this object creation and type casting done automatically with a special operator ensuring MCC in programming (minimal character count), so that we can write something like:

date1 d= 'now';
date2 d= '20 April 2030';
days2go = date1 - date2;

(Actually, this should be possible already. Anyone has implemented this?)

Read more »

WP_less

I’m a heavy user of LESS and I rejoiced when I learned that some geeks plugged in the LESS PHP-compiler into WordPress – and it works out of the box! I didn’t experience any issues with syntax (although you sound be careful as there are little difference between the LESS compilers) and the LESS files in my child theme were automatically compiled.

Just go to https://wordpress.org/plugins/wp-less/ and get the integrated LESS compiler.

Enqueue your LESS stylesheet like you would normally enqueue your .CSS. (you can change back to minified .CSS on a production environment, but with fast cashing, there’s not even a need for that. Here’s how I enqueue mine:

if (class_exists('WPLessPlugin'))
wp_register_style( 'custom', get_stylesheet_directory_uri()."/css/custom.less" );
else {
wp_register_style( 'custom', get_stylesheet_directory_uri()."/css/custom{$min}.css" );
}

Note that I check if the plugin exists, and if it doesn’t I just include my precompiled css. Then I list it with the recommended plugins. This is best practice.

More LESS

LESS is a breeze. It allows me to write such clean, reusable and responsive CSS that it is the nr. 1 tool hands down that speeds up my (child) theme development. Actually, when you look at all the commercial themes offering “super sliders, portfolio pages, full responsive blahblah” the only thing that really distinguishes them is their styling – and that is something we can do very, very efficiently.

I borrow mixins from all over the web and will share my (aptly?) named file <pre>more.less</pre> here soon, so check back in a few days!.

Read more »

Wordpress 4.2

I just updated a multilingual multisite to WordPress 4.2 – without opening my FTP-client, editing settings files, are even clicking away from the WP dashboard. It works just out of the box. Awesome!

This is the first major WordPress release of 2015. There are some noticeable improvements. What do I think about them?

1. Changing themes directly in the customizer – will save some time especially if you set up many sites like I do
2. Better support for embeds – Tumblr is good and all, but I normally go the other way around, posting from my WP to tumblr (and I don’t want to embed other people’s blogs). Sharing youtube video’s is useful though
3. Faster plugin update – Comes in handy, especially in an experimental environment where you try out many plugin’s latest versions
4. Under the hood improvements – WP_Query & co have improved sorting functionality. I’d like to see some performance stats there.

The introduction video is flashy – and appeals to a large audience. When they said “You can now tell the world about your love for cats, cookies, and even jazz – without using a single world” I frowned. Where is the “code is poetry” gone? And doesn’t it only work when all that code is actually used to support poetry? I see WordPress as a powerful tool to the typography  and lead people to the meaning behind the written word. It sounds like a paradox, but good design and user interface is all we have to fight the shortening of the attention span everybody seems to suffer from;-

Read more »

Using masonry with Ajax reload

I  was struggling with masonry tonight. I know, it’s an old script and we should probably look out for something new, but still. I have this good ol’ website that uses ajax loading for search. It is triggered on the search (don’t forget e.preventDefault()) and will put what it finds in the inner element into the outer element. So far so good.

But what happens is dat the jQuery-object on which the Masonry-instance is working is now obsolete (on my site it is called $container, which captures #container. So this is important: Always make sure that you are excuting masonry on the right DOM-objects. When I added the statement $container = $("#container") after the AJAX-call was done loading (.done), things worked.

Also notice that I use imagesLoaded() to make sure masonry doesn’t start juggling DIV’s without knowing their proper sizes. Finally, consider blurring your search form’s input-field and don’t forget to bind the functionality you want to use after AJAX (there is life after AJAX). Note: this is the point where we scratch our head and sigh “perhaps we need some structured framework, after all, like node, angular, etc. Something that takes care of things.. But hey, if we follow proper practice, wrap and document our code properly, we can get a long way. At least vanilla javascript (or vanilla jquery) seems to be future-proof.

Code for reloading masonry after ajax call

$.get( url, { s: term }, function( data ){
$('#primary').html( $(data).find('#main') );
$container = $("#container");
})
.done(function() {
$container.imagesLoaded(function(){
if (typeof($container.masonry) !== 'undefined') $container.masonry();
if (typeof($container.ccb_ajaxbind) !== 'undefined') $container.ccb_ajaxbind();
});
// Blur input field
$("#searchform #s").blur();

Read more »

Good Tutorial on background video

While browsing airbnb.com I noticed the amazing background video they have there. It’s concise, relevant to what their page is about, and distracts minimally from the Big Search Field. I looked into it for another project and it turns out, Airbnb does it by the book.

1. Provide fallback .jpg image for mobile devices
2. Provide .webm and .mp4 for different resolutions, and put the .mp4 after the webm.
3. Control the layout of your <pre>HTML5 <video></pre> with css (or better: use LESS or SASS)
4. Use video’s that are easy to loop and are not longer than 10-15 seconds
5. Try crushing the file size as much as you can! Keeping it under 1MB is cool for the folks behind slower connections.

Here is a very useful tutorial over at Demosthenes.info.

Read more »

Flush Permalink Cache

I was working on some custom pagination functionality for WordPress, and after much too long I found out you <em>have to flush the permalink cache</em>. Just go to Settings > Permalinks and click on “save” without making any changes. That’s it.

Check out WordPress’ great <pre>wp_rewrite</pre> class and endpoint functionality.

Read more »

Likely Cause of White Screen of Death in Wordpress

I looked at causes for the white screen of death in WordPress today. Of course, the first thing is to turn on WP_DEBUG in config.php. This could produce a lot of clutter as there are many plugins – and even parts of core – that use deprecated functions. But never mind.

In my case, I was uploading a theme I am creating that uses some functionality (widgets) that I had originally put in a plugin. So now that code was double:

Fatal error: Cannot redeclare ccb_load_widgets() (previously declared in

Uh-oh. Facepalm. Redeclaring functions is a major cause of WordPress giving up with a white screen. Hope this is of any use to anyone.

Read more »