An easier way to keep your JavaScript libraries up to date

When I first heard of Bower, I really, really wanted to love it. In theory Bower sounds like the real deal:

Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json. How you use packages is up to you. Bower provides hooks to facilitate using packages in your tools and workflows.

Bower is optimized for the front-end. Bower uses a flat dependency tree, requiring only one version for each package, reducing page load to a minimum.

Unfortunately – it’s not how it works in practice. Sure, bower finds packages for me, but that’s about it. After I’ve downloaded the packages, I have no idea where the files might end up in, what are they going to be called, how to include them, so after the package is downloaded – you’re on your own, bower just calls in quits. Even tools like gulp-bower or grunt-bower don’t help all that much. No standardized way to get an unminified version or a file. Sometimes you can guess, other times you can’t.

But the worst part, for me – bower doesn’t update the scripts properly. At first, I was very confused about how updating works in Bower, and it looks like I’m not the only one. Looks like nowadays you can update the scripts, but major version updates are still a pain in Bower, and the argument for it, in my opinion is very weak.

I’m not going to go into how the updating in bower actually works, and to be perfectly honest, I don’t care about that all that much anymore. What I’m looking for is speed and ease of use.

Workflow incompatibility

I know, there is an ocean of people who love bower. But I never managed to fit Bower in my workflow. I don’t really need to think about dependency tree in a standard way. Wordpress dictates the version of jQuery and underscore.js that I’m supposed to use.

All of JavaScript libraries that I’ve used in my life, with a few exceptions ( I’m looking at you desandro ), have every little thing built right in. In many cases, even a jQuery shim.

Sure – that’s a lot of overhead, and it’s not ideal.
An ideal tool would be like Bower that people would trust, and everyone could depend on each others snippets, shims, plugins etc., but at the moment, it looks like a very, very distant utopia. Everyone has their own workflow, standards, preferences.  We’re still debating on spaces vs tabs after all.

 

A simple solution for simple folks

I’m a simple man, looking for a plain simple solution.
I don’t need “built-in” security that prevents automatic major version upgrades. If a problem comes up because of a library update – I want to address it ASAP. I just want the latest version of the libraries I’m using.

So I came up with a simple workaround with Gulp.js.

Gulp.js to the rescue

 

In external_libs add your libraries and the URL to pull them down from and that’s it! If you prefer – you can keep it in a .json file, but this works perfectly fine for me.

Run gulp getlibs in your terminal and get the latest version of all your libs! Add version management ( like Git ) to your project, and you’ll always be aware of all changes in the libraries you use. Dead simple.

 

Snippet: Get the correct page in WordPress

Here is another really quick snippet.
If you have a page where you’re using Query Posts you’re going to have trouble with Pagination.
Wordpress for some reason likes to use page and paged randomly.

If you assign your page as the “front page”, you’re going to have to get_query_var(‘page’), and if you’re going to assign it elsewhere, it’s going to be paged. This is all fine and dandy, at least when you’re in control, but as soon as someone else starts using your theme, you need something more trustworthy, and that’s what this is.
Continue reading Snippet: Get the correct page in WordPress

Var_dump sucked.

Why I didn’t use var_dump() for a long time, even though it has very valuable information in it ?  You most probably guessed it. It looks terrible. Even when you fix it with adding <pre> tags around it, it’s still ugly.

Consider this code:

Well it is turned into this:

Plain var_dump

It’s ugly! It’s so ugly! There are no other words for it.

So I could never talk myself into using it, and because of that for the past few years, I did a print_r(), wrapped in those “pre” tags.

Until I saw a screencast by Jeffrey Way on Laravel, and I saw the single most beautiful var_dump in the history of mankind.

Pretty var_dump

Look at it! It’s so pretty! It’s the same data, but so much has changed!

So I wanted it too. After some googling, I found out, that it is a PHP Extension (that anyone can install) and not a Chrome extension (which was my initial guess). It’s called Xdebug, and you can get it at http://www.xdebug.org and you’ll probably want to read more about the installation ( http://xdebug.org/docs/install )

In addition, I initially thought, that I’d have some difficulties installing and setting Xdebug up, since I’m a MAMP user (I like graphical interfaces and all that good stuff, I just can’t help it, that’s why I am so excited about Xdebug after all). Turns out, that I was wrong (again).

Enabling Xdebug on MAMP (Pro) is as simple as, well – enabling Xdebug on MAMP (Pro). All you really have to do is:

  • Open MAMP
  • File -> Edit Template -> PHP -> PHP (your-version).ini
  • Go to the very bottom and uncomment the Xdebug extension (remove the semicolon at the beginning of the line), like so:

  •  Restart MAMP

And That’s it! Enjoy!

 

CoffeeScript Blows. Minds.

Was looking for a simple way to write an alternative of PHP’s in_array() function in JavaScript, and since I’m using actually writing CoffeeScript, decided to look there as well. And sure enough. Mind Blown.

 

Turns into

 

 

 

Get Attachment ID from media_sideload_image()

Problem

In this scenario,

The $image variable now returns the full HTML, like this (with single quotes for some reason)

Which isn’t so bad, unless we want to get Just the image URL, or maybe the Thumbnail URL, or just the attachment ID.
Here is how to do it.
Continue reading Get Attachment ID from media_sideload_image()

FireSass with FireBug for FireFox.

Finally Nex3 released an “official update” in FireFox Addons. I’m not sure, but as far as I know the functionality still remains the same, and nothing actually had to be updated, except “FireFox compitability version” setting. There were “hacks” around (get the github version, change a line, be happy).

Crazy browser Versions

The Add-on was “outdated” for a while, just because FireFox is spitting new “major” versions every day now. I guess that is some bad influence of Chrome. In my opinion the “higher number” doesn’t really matter in the browser version, and if someone were to argue that it does, then I’d say that FireFox is still 8 versions behind chrome at the moment (what an outdated browser, meh?). Version updates (like from Version 1 to Version 2, or 3) should be with some visible significance! It doesn’t apply to Chrome, as Chrome does it in the background anyway. It doesn’t ask you if you want chrome 18 or chrome 29 or chorme 441, it just updates, and doesn’t break your extensions!

Safari is now what, 5.4 ? I wouldn’t think for a second that Safari is an “outdated” browser (even though the version number is smaller than IE6).

Anyway. I think Mozilla got it wrong there, and I’m just ranting here, because it broke the plugin at the Extension Directory, and I was lazy enough to not to compile one for myself.

What is FireSass ?

By now, I’d expect you know what is SASS, and you probably have guessed I like SASS.

Well, in short – FireSass does this:

See on the right ? It says “_type.scss (line 40)“.

Well that is because of the FireSass plugin. I can now see where the selectors “actually” came from, so this really helps when debugging with SASS. It doesn’t even mention that the only CSS file I’m using is called “style.css”, because CSS at this point is useless (for development) as I use SCSS exclusively. When looking something up, I’m interested in where did something come from in SCSS, and FireSass helps a ton with that!

Great, how do I get FireSass ?

Easy as pie.

First, you download & install the addon (you have to have FireBug first of course)
Then you go to your project you want to use FireSass with and set it to “emit debug info“.

If you’re using an app to do that, great – use that. If not, then you can look in the FireSass github page what steps you should take.

Don’t worry. It’s supersimple.

Basically what the GitHub pae says is that if you’re using SASS from Terminal, you add “–debug-info” to the watch statement.
If you’re using Compass and SASS, find the config.rb file, and add:

Dashes and Underscores in Variables – SASS

“Why aren’t my variables working properly in SASS/Compass ?”

Well, one of the reasons could be Underscores and Dashes in SASS (and therefor Compass as well). In case you’ve missed it – a little quick tip.

Quick Example

Compiles to

Say what ?

In SASS it doesn’t matter whether your variable has an underscore or a dash – they work both ways. This is something to be aware about. Trying to get two different variables (one with a dash and the other with the underscore) would be a bad practice anyway, but now you know you actually can’t 🙂

Mixins, functions too…

This doesn’t apply only to variables. You can define your mixins and functions one way, and call them the other way.

But just because you can, isn’t a good enough reason to start doing that.

But CSS Doesn’t do that…

One might argue, that SASS (SCSS) is aimed to be as close to CSS as possible, and it is. A valid CSS file is a valid SCSS file as well. But dashes aren’t considered the same thing as underscores in CSS!

I think the answer is simple: “some people like underscores, some like dashes”. That’s it.

For example I use underscores most of the time, as it is much, much easier for me to copy-paste variables from one place to another (double-click variable name with underscores, selects the whole variable name, instead of just one part in Sublime Text)

In the end

I think this is actually very useful, as I can (for example) use the whole Compass framework using underscores instead of dashes (which are used by default in Compass), and everything will work properly, as it is meant to.

Ruby on Rails and MAMP PRO – It’s a jungle out there.

Introduction

If you’re looking for the how to, and have no intention reading my rambling, go on and scroll down a little bit 🙂

So I’ve started learning Rails for a while now. I’ve been exploring a lot in the world of ruby and rails. Found tons of interesting stuff, watched a lot of screencasts, graduated from Rails for Zombies, and much more, but now, about a week ago I decided to finally get my hands dirty on my own Mac OS X Lion, and thats where it all started. Finally, today I decided not to give up and finish setting up Rails.

MAMP PRO Is a pit of bugs.

I develop with PHP a lot, and MAMP Pro has worked for me flawlessly up until now. I love the nice graphical interface I get to manage my local domain hosts (myproject.dev/), etc. and probably because of that I’ve managed to overlook all the bugs (for example not being able to reboot/shutdown my mac, until I’ve force quitted MAMP), but this day changed my perspective a little bit. But that is not what this story is about.

 

MAMP PRO and Ruby On Rails

This is the part where it got bad. At first, I thought – hey – wouldn’t it be nice to run Rails with the same MySQL server as MAMP, but hey – MAMP has moved MySQL installation to their local directory. Not only that, but it is missing files, so I can’t compile Ruby gems to install with MAMP.

So I went ahead and searched. I found some useful posts, or at least at that moment I thought so, about MAMP And Ruby: [ Article 1 ] , and [ Article 2 ] , but all I did was screw up my system.

In the end, I wish in all the hours I spent on Google, that I found a blog post like this one. It turns out, installing MAMP Pro and Ruby On Rails, and setting them up is super-duper-easy.

 

How to install Ruby on Rails 3.2.1 with Ruby 1.9.3 and MAMP PRO 2.0.1

First of all. If you don’t already have MAMP or MAMP PRO on your system, and you don’t have any intention of using PHP, stop reading this article. You don’t need MAMP Pro. Period. Take a look at POW and Brew. That’s all you need.

For the less fortunate – I assume you already have MAMP Pro, and have tried running gem install mysql2 without any success.
I use RVM, and if you don’t then I guess you have to be careful, and before certain commands need a sudo (like sudo gem for example), I’ll be writing about the RVM process, and yours shouldn’t be much different, just tweak it a little accordingly.

First, make sure you get to this point:

[plain]

~ ruby -v
ruby 1.9.3p0 (2011-10-30 revision 33570) [x86_64-darwin11.3.0]
~ rails -v
Rails 3.2.1

[/plain]

Now that we’re on the same page this is what you do.

First install brew. Here is their installation documentation: https://github.com/mxcl/homebrew/wiki/installation
Basically all you need is this command:
[plain]mkdir homebrew && curl -L https://github.com/mxcl/homebrew/tarball/master | tar xz –strip 1 -C homebrew [/plain]

Now, MAMP stands for Mac- Apache, MySQL and PHP. I know you (and I) have MySQL already installed, but that isn’t going to cut it, as I said before – MAMP has moved MySQL to a different location. Even their mysql.sock file is somewhere else, so we’re going to install another MySQL on the system with

[plain] brew install mysql [/plain]

Now that you have MySQL – Just install the mysql2 gem

[plain] gem install mysql [/plain]

 

You also might want to make an alias for the mysql.sock file, which MAMP has also moved for us, by running:

[plain]sudo ln -s /Applications/MAMP/tmp/mysql/mysql.sock /tmp/mysql.sock[/plain]

 

I would also suggest that you take a look at POW, it is a great, tiny, rails server for local development. Here is some information on Stack Overflow.
Thats it. I hope this helps you with MAMP and Rails, it sure as hell would helped me.

Cheers.

 

 

 

 

Fix: MySQL MAMP PRO – Neverending “Loading”

So Today I encountered a weird bug in MAMP PRO 2.0.1:

After doing a restart of MAMP PRO, MySQL was loading, but didn’t load. None of the settings were accessible, even after I killed everything and restarted it. This happens when you add a new “host”, and don’t specify the file-path (“Disc Location”). To get out of the loop here is what you have to do:

  1. Start MAMP PRO
  2. Open Terminal
  3. Enter: /Applications/MAMP/bin/stop.sh

Whola!

p.s. Ohh, and if you’re not to happy about using a Terminal, easy pie. You just have to actually go to your MAMP folder in Applications, open up “bin” folder, and double clickaty on your “stop.sh”. (opening Terminal is a little quicker though…)