Serenity

The sole reason I love working at night is simple: No interruptions. When working on a project for a few consecutive hours I get into a flow in which I work noticeably faster than during the first half-hour. At day-time interruptions are plenty: Meetings, phone calls and even e-mails can all snap me out of my flow, requiring me to get back into it once handled. At night-time there are no interruptions. There’s just the rattling sound of my keyboard… ah the sound of productivity. If I ever have zen-like feelings during my work, it’s at these moments at night.

The schedule shift

In general I don’t plan working at night, it happens. Often it’s when I’m working on something awesome which I can’t let go. Somewhere during the evening, when my girlfriend is falling asleep on the couch during a Dharma and Greg rerun on Comedy Central, I find myself crawling behind my computer to get some work done. Without any interruptions the hours pass like minutes and before I realize it, it’s approaching daybreak and the vampire inside me tells me to hide.

Guilt

Maybe I’m just awfully bourgeois but when I wake up late the next day I feel guilty. Guilty that I wasted the whole morning, that I missed calls and basically haven’t done anything yet. Instead of my normal morning health-routine I take a cup of coffee for breakfast and take care of things I usually finish before noon. The real work doesn’t start after dinner, and again, without any interruptions the hours pass like minutes… Rinse, repeat.

Even when I plan my day around working at night I can’t help but feeling guilty for waking up late and compensating that with more work, resulting in a 12 hour workday.

Carpe Diem

In the end I discovered that making a habit out of working at night is not working for me. I enjoy my sunlight and the feeling of accomplishment early on the day. I probably still need that zen state of coding I experience at night every once in a while, but I won’t try and shift my whole schedule around it again.

Carpe diem! (ha I sound old…).

The post Working at night (isn’t for me) appeared first on Arden de Raaij.

The why

“Why do we fall, sir? So we can learn to pick ourselves up.”  I’ll be the first to admit that I didn’t bother with the WP best practice for including my stylesheets and javascripts into WordPress. In all honesty I just didn’t quite understand the why and the how seemed like way too much hassle for doing something that I already knew how to. Now I’m actually using it I couldn’t create a theme or plugin without it.

Including styles and scripts in the right way makes your scripts more easily maintainable, allows you to use/replace scripts that are already used in WordPress, gives you more version control and most importantly, prevents conflicts with other themes or plugins. There’s no reason not to do this the way you’re supposed to.

The functions

We’re going to have a closer look at the following functions which allow you to respectively register and enqueue scripts and styles:

• wp_register_script($handle, $src, $deps, $ver, $in_footer)
  Registers scripts for later use
• wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)
  Call a registered script or call a script directly
• wp_register_style($handle, $src, $deps, $ver, $media)
  Register stylesheet for later use
• wp_enqueue_style($handle, $src, $deps, $ver, $media)
  Call a registered stylesheet or call a script directly

All variables are well described in the Codex so wel’ll go over them quickly:

$handle: The handle is used to queue or dequeue the script or style. Always give this a sensible name as it will make it that much easier for others to dequeue your scripts or styles

$src: The path to the file. Don’t use absolute paths but make use of functions like get_template_directory_uri() and such.

$deps: This is where the fun begins. You can add an array of dependencies by handle for your script or style. For example, if your lightbox won’t work without jquery, you can add array(‘jquery’) as a depency. This way,whever you call your lightbox script, jquery gets pulled with it if it’s not there already. Kick-ass!

$ver: The version of the file in the following format: ’1.8.3′. This actually adds a query string (?ver=1.8.3 in this case) on the end of your file which acts as a ‘cache-buster’. When you change the version of your file this part of it makes sure the new version is pulled instead of the previous cached version.

It’s great for cache busting, it’s great for version control BUT one thing: The message ‘Remove Query strings from Static resources‘ might pop-up when you scan your site with GTMetrix and Google Pagespeed. Adding a query string to an url supposedly keeps some servers from caching the resource. I’m not sure what the actual effects are, but if you want to prevent such behaviour you can add the function described here to your themes function file or just simply add NULL instead of the version. If you chose the last option you should provide yourself with another way to keep track of your file versions by renaming them with their version number or so.

$in_footer (scripts only): When set to true this loads the script in the footer instead of the header. False by default

$media ( Style only): String declaring the media which the stylesheet is meant for. (screen, all, etc).

My functions.php

I’m simply too lazy to hold your hand while we walk through this. Instead I’ll give you a well-commented snippet from my functions.php. Note that I didn’t do the commenting like this especially for you, I always comment the hell out of everything as things might seem logic when you’re working on them, they might not make any sense when you look at them in a few months.

//Initiate your script style function
function your_scripts_styles() {

//Contains all styles/script info stuff
global $wp_styles;

// set a variable ($url) as template directory value so we have to type less
$url = get_template_directory_uri();

//deregister Wordpress default Jquery because we reheally want the one from the Google CDN
wp_deregister_script('jquery');

//commence the script registering!
//re-register jquery from Google 
wp_register_script( 'jquery',"https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js",false, '1.8.3', false );

//register other scripts, note that we load them in the footer of our site
wp_register_script( 'init',"{$url}/js/init.js",array('jquery'), '1.0' , true );
wp_register_script( 'socialite',"{$url}/js/socialite.min.js",false, '2.0', true );

//Call enqueued by scripts by their handle
wp_enqueue_script( 'init');

//Oh snap, we can use conditional statements as well! We load the socialite script only on pages where we have social buttons
if( is_home() || is_singular( 'post' ) || is_category() || is_tag()) {
wp_enqueue_script( 'socialite');
}

//Dequeue some plugin scripts and styles on certain pages
if (is_home() || is_front_page() || is_page()) {
wp_dequeue_script( 'slideshow');
wp_dequeue_style( 'slideshow-style');
}

//enqueue our own stylesheet
wp_enqueue_style( 'arden-style', get_stylesheet_uri(), false, '0.03',false );
//enqueue normalize
wp_enqueue_style( 'normalize-min', "{$url}/style/normalize.min.css", false, '2.1.0',false );
//load colorbox stylesheet

}

//enqueue scripts, use wp_enqueue_scripts to do actions only on the front-end
add_action( 'wp_enqueue_scripts', 'your_scripts_styles' );

So this is how register, queue and dequeue my scripts in one neat function! If this doesn’t make any sense I’m always ready to answer your questions on Twitter, but I’d also advice you to check out this great tutorial at WPTuts and the free avaialable WP Ajax book. Good luck!

The post Enqueue your scripts and styles the WordPress way appeared first on Arden de Raaij.

The Why

When you’re not a developer and are still reading this (for some reason that goes beyond me), you might ask yourself: Is he that lazy?

Yes, I’m that lazy. I’m always looking for ways to make everything surrounding my job more easy so I can focus on what I’m good at. When typing out the coding process I described above in keyboard shortcuts it might not seem like much work: Write code, ctrl+s (or not even with autosave), alt+tab, f5, alt+tab, write some code. Now repeat this about a hundred times and you’ll understand why I’d like to avoid this tedious process.

But it’s not just about being lazy. Every extra step between the actual writing of code and visual feedback makes the process more awkward… much like painting in the dark! With auto refresh I can have my code and browser side by side (or on different screens) and directly have feedback every time I safe or focus on the browser.

So if it’s all about visual feedback, why don’t we all use  WYSIWYG editors to create websites? That’s because WYSIWYG editors suck! There’s no way for a WYSIWYG editor to interpret your ideas and have a clean code output at the same time. They might do a better job one day, who knows, but for now I still have a job!

If you’d like to watch an interesting presentation on the way coders could work I strongly advice you to watch Bret Victor’s ‘inventing on principle’ presentation.

The How

Enough with the talking, let’s get on with the good stuff! There are several tools which can keep track of your file changes and even compile your SASS/LESS/and refresh your browser accordingly.

• Livereload
  Available for both OS/X and Windows (beta), Livereload is a fantastic and easy tool for everyone that doesn’t like command lines. It works right of the box, you can track your files by adding a bit of javascript in your footer or using one of their open-source browser plugins and makes sure your SASS/Compass/LESS changes are compiled. I’ve been using the Windows version and have been enjoying it a lot without too much hassle. My installation does crash occasionally when tracking a website in more than one browser
• Guard: Livereload
  An open source livereload Ruby gem. If you’re not scared of the command line, this tool offers a very stable performance and a huge feature-set for live-reloading. It’ll take some configuration but it’s worth the hassle
• Browser refresh for Sublime 2
  An easy way to integrate browser refreshing in Sublime 2. Hitting CTRL+SHIFT+R will perform an alt tab, a browser refresh and optionally an autosave as well.
• Codekit (OS/x only)
• Fire.app
• Live.js – Javascript based, continuous browser refreshing
• Smalify – quite similar to Livereload without the SASS support
• Reloadr – PHP based, does continuous refreshing

And that’s it! If you know any other great tools I’d love to hear about ‘em on Twitter.

The post Livereload / Autorefresh (never F5 again) appeared first on Arden de Raaij.

ManageWP is a kick-ass ‘management console’ for WordPress sites. Basically it allows you to add all your sites to their dashboard and gives you a huge set of features to keep these sites, safe, up-to-date and sexy! It allows for one-click logins (no more searching for passwords!), one click-updates, back-ups, monitoring and plenty more. In all honesty there are a whole lot of features I haven’t even began to discover but I’m already happy with their options to update and back-up sites without having to take half a day off!

Updates

Updates are the main reason why I began my search for a management tool. I’ve stated it before, but manually keeping your sites up-to-date is a b*tch. ManageWP takes most of this meticulous job out of my hands by giving me an overview on which sites need which updates all at once. Then you have the options to run updates individually, per site or everything at once! I’d strongly advice against that last option though as it only takes one ‘turd in the punchbowl’ to get you into a world of hurt. Still, it’s nice to have!

Premium plugins like Gravity Forms are supported as well but somehow updating those through the one-click update service doesn’t always work for me. It’s not a major annoyance though, as ManageWP also offers a one-click login I can still manually update the premium plugins without having to navigate away from the ManageWP dashboard.

On a small side note: even though ManageWP makes updating as easy as pushing a single button, never forget to scan your sites for errors and problems after updating!

Backups

There are plenty of great WordPress plugins available that let you back-up your site, but as I already subscribed to ManageWP I might as well use their back-up service too ! It’s a breeze to create back-ups with ManageWP. Simply select the sites you want to back-up, press the button and presto: the installation is backed up and on the site server. Want to store the back-up somewhere else? ManageWP offers options to store your back-ups on Amazon S3, Dropbox, Google Drive, FTP and even per e-mail.

Do note that Google Drive is limited to back-ups of a 100mb or such for reasons that escape me. If your site is bigger you can save it on the site server and ftp it to your Google Drive from there. I might switch to Amazon S3 for this reason.

Pricing

ManageWP kind of loured me in with their 30 day trial plan. Once I got used to it I didn’t want to work without it any more so I chose the standard plan for bloggers and small businesses for 15 sites. I’m already over that limit so I’ll be upgrading to 25 or 50 sites which will cost me $162 or $270 a year.

Besides the standard account they also offer a professional and a business plan with even more features like easy cloning of websites, scheduled back-ups and user management. Of course this’ll cost you a more as well. The scheduled back-ups and website cloning are reasons why I might switch to professional one day. For now the standard plan will do just fine.

One minor annoyance with the standard plan: All the options that aren’t available are visible in the dashboard as well. You get a warning that they require a different pricing plan but you can walk-through the configuration anyway, only to end up with the same warning again.

Support

In an ideal world we wouldn’t need any support, but hey, Madonna still isn’t retired so I guess it’s not an ideal world! In the 3-4 months I’ve been using ManageWP I’ve only had one question concerning site backups and got a detailed answer with instructions within 15 minutes! In other words, their support is lightning fast and well capable, just the way we like it.

Conclusion

ManageWP, where have you been all my life? Sure it costs me a bit of cash but that’s nothing compared to all the time it safes me. Instead of taking half a day or a day out of my schedule for updates and back-ups, I now get this done in a small hour. It also puts my mind at ease knowing that I’ve got all my websites and crucial information about them available in one spot.

I could not imagine going back to the meticulous process from before so ManageWP is here to stay. But hey, you don’t have to take my word for it, I say give the trial a try and see for yourself!

The post ManageWP – WordPress management at its finest appeared first on Arden de Raaij.

Well, I finally ran out of excuses and decided to give SASS and Compass a try. Getting it up and running indeed was a bit of a hassle but one that was absolutely worth is as SASS is a fantastic tool to make writing CSS more DRY (Don’t Repeat Yourself) and actually, more fun. I’m just beginning to discover the possibilities of using SASS so I won’t be posting my own experience yet. Instead I’ll share the tutorials I used to get it all up and running.

The blue pill or the red pill?

First things first: Don’t be afraid of the command line! If you want to manually get SASS and Compass up and running you will have to use the good old Command prompt. To my huge surprise I found many articles directly recommending users to download an application because the authors themselves fear the command line for one reason or the other. I even read the words “There’s a reason why MS-DOS is history and the world is run by OS’es that have pretty windows, boxes, and buttons.” Aaargh! Command prompts aren’t history and you don’t hear any MAC users being afraid of their terminal either do you? If pretty windows, boxes and buttons would solve anything we’d all be working in a WYSIWYG editor right now instead of coding our websites. /RANT

Blue Pill

But okay, if you want to take the blue pill and live in blissful ignorance there are a few applications you can install. I’ve read a lot of great things about the Compass application. It’s $10,- but does have everything in one neat package, comes with its own Ruby installation, its own web-server, is compatible with LiveReload and gives you a GUI to monitor and compile your SASS / Compass. It sounds so easy I almost convinced myself…

• Getting started with SASS on Windows the easy way – Even though he doesn’t like Command lines, Mark Senff wrote a great article on how to get started with SASS and COMPASS the easy way
• Compass App ( $10,-)
• Scout app (free of charge)

Red Pill

So you’ve decided to take the read pill? Good for you, welcome into the harsh but rewarding reality of the command line. Here are a few excellent tutorials on how to get your SASS on in no-time.

• http://www.impressivewebs.com/sass-on-windows/
• http://sickdesigner.com/sass-for-designers/

Conclusion

Now you can’t tell me that was very difficult now, was it? Whether you used Scout / Compass app or used the command line like the masochist you are, installing SASS and Compass doesn’t take more than 10 minutes of your time. It’s incorporating it in your workflow and setting it up so that it fits your development environment which can be a bit of a challence. I’ll write some more about that when I’m satisfied with my set up for WordPress development. Meanwhile, check out the resources I’m currently checking out to make WordPress theme development a breeze

• Using Sass to code better WordPress templates - A speakerdeck by Dana Janssen
• Forge - Excellent tool for wordpress development or so they say (I haven’t managed to install it yet)
• Compass compiling and WordPress themes – css-tricks.com
• Tutorial: Using Sass and Compass for managing CSS in WordPress – Technosailer.com

The post Starting with SASS and Compass for Windows appeared first on Arden de Raaij.

Creative Commons

To start of this story I have to tell you that I think traditional copyright laws have as much place in the digital world as the Bible has in modern society. As zero’s and one’s are free to copy and internet transcends borders it seems only multi-nationals have the ability to defend their intellectual property, and even they fail miserably. The regular man on the web has little to no means to protect his digital work from being copied, or even to detect if copyright infringement is happening in the first place. Luckily a lot of people agree with me that besides procrastinating, the internet is also good for sharing and there should be copyright licenses aimed at sharing intellectual property under certain conditions. The Creative Commons organisation is a successful example of a group of people who created such a set of copyright licenses. From their website: “Creative Commons is a non-profit organization that enables the sharing and use of creativity and knowledge through free legal tools.” The mentioned free legal tools are a range of copyright licenses aimed at sharing your work under particular conditions.

When I started out with photography, I immediately decided to share my non-commercial photography work under Creative Common licenses. I used the attribution licence which means that I allow others to distribute, remix, tweak, and build upon my work, even commercially, as long as they credit me for the original creation. As far as I figure your pictures are ‘free to copy’ as soon as they’re on the internet. That doesn’t mean it’s very ethical to steal copyrighted photo’s but it does mean that it’s impossible to stop. If someone really wants it, he or she will get it one way or another. ‘All rights reserved’ just isn’t very impressive in a browser-window. When using a CC license on your pictures many won’t even take the effort to steal pictures because all they have to do to take them is give credits! I do have to state that I don’t know how many people do still take the effort to steal my pictures, or don’t take the effort to give proper credits to me as I have little ways of checking.

To share my photography I use photo community website Flickr. Flickr account enables me to upload an unlimited amount of pictures in the highest quality and interact with other photographers through comments and groups. One of the first groups I joined was the 365 days project, a group where all the members post a self-portrait each and every day for a year. No, I’m not that fond of looking at myself that I needed to do this, but it was a great venture into conceptual photography. I made tons of fun and goofy self-portraits not thinking about the fact that anyone could use them. And even though I uploaded my pictures to a public available place I kind of trusted on anonymity in numbers: There are millions of uploads every single day, how big is the chance that someone bumps into my pictures and use them for whatever? Pretty damn big, so it turned out.

What are the odds

Call me naive but I had no idea that people were so actively looking for pictures to accompany their blog articles, fancy up their website or presentation. When I first did a Google search on my flickr screen name (ardenswayoflife – give it a try) I discovered that my pictures were used to accompany articles on Amsterdam, traveling, Technology and even sex and relationships. I was honoured that people were actively enjoying my photography, but that there are websites that actually use my self-portraits… Well I thought that was some scary shit! After a while I came to terms with it, partially because I didn’t look like a complete idiot in most of the pictures and they weren’t on high-profile websites either. Or so I thought. Friends and acquaintances actually stumbled upon some pictures of me on the web and shared them on my Facebook wall.

Out of context

When I first saw my picture above the Guardian article I wasn’t sure if I liked posing as a paranoid conspiracy-theorist to the world. Then I realized that this picture fits the article perfectly and I’m happy my goofing off was useful to someone. I also realized how easy it is to take a picture out of context. If they used this picture for an article about mental institutions I’m sure no-one would’ve second-guessed that choice either. Have fun explaining that at your next job interview…

Like I said, taking a picture out of context is easy

Now what if this picture wasn’t on the well-respected Next Web but on a daily newspaper article about frustrated murderers? I could go on like that, but news-articles aren’t the biggest issue here. The internet is a place where everyone can share their opinion or frustration, making for a huge pile of nearly un-erasable discrimination, racism, sexism, other kinds of bad ‘isms’ and just down-right hate. Sharing your picture on the internet means any idiot can use them and take them out of context. Of course this goes for any picture of yourself you share on the web and not just the ones with a Creative Commons license. Just realize that giving permission to use your creative work by forehand can also backfire in ways you could’ve never imagined. Think about what you do and don’t want to share with the world because before you know it, you’ll never be able to get your head of the almighty internet again!

Now enjoy some of my self-portraits .

The post How I became the village idiot (Unexpected effects of CC licenses) appeared first on Arden de Raaij.

The post Cuidad de las artes y Ciencias appeared first on Arden de Raaij.

The Eye museum itself is an impressive piece of architecture in the North of Amsterdam which is quite happening on the cultural front nowadays. Just a 5 minute ferry ride away from the Central Station of Amsterdam, from which the building directly sticks out. I’ve tried taking some pictures of the building itself, though I don’t feel like I’ve captured the essence of it yet. I’m sure I will return there soon to take some more pictures. I was suprised to find that the inside is smaller than expected, probably because a lot of space is taken up by the big restaurant and terrace which have a great view over town.

The exhibition was set up amazingly though. It was set-up as a walkthrough of Kubricks entire life work; From the photograph that landed him his first job to all of his movies, beginning with Fears of Desire and ending with Eyes Wide Shut. Every movie had his own hall dedicated to it with used props, screens with documentary’s and a big projection with parts of the particular movie.

The exhibition is an excellent celebration of Kubrick’s life work and a must-see for any film-fan in town!

The post Stanley Kubrick exhibition at the Eye museum appeared first on Arden de Raaij.

The post Traces Exhibition at Canvas appeared first on Arden de Raaij.

The post Wie belt er nou nog appeared first on Arden de Raaij.