Category Archives: Code

Notes on frontend development

I’m a Web UI Developer in Singapore and I realized frontend development has gotten really complex. It wasn’t far long ago when users were bitching about Internet Explorer. Today’s Internet Explorer is becoming a better citizen and whoever still screaming about its deficiencies apparently aren’t realizing the bigger issues with UI design in general.

Your pixel is not a pixel

The new issues are resolution independences. Much of the web is still defined by pixels and this no longer makes a lot of sense given Apple having their Retina displays and Samsung having their high resolution Samsung Galaxy S4 coming to Singapore soon. One pixel is no longer one pixel any more.

And given the higher resolutions, the devices do deserve better images. Sometimes this acts as a competitive advantages, your icons are prettier than your competitor, it shows dedication. The issue is not every device support such high resolutions and sending these images to them is just a waste of their bandwidth. Lower end devices might not have LTE either. There’re lots of CSS tricks and JavaScript detection methods to deduce the device capabilities and these workarounds aren’t the most elegant.

DevOps dude says lower number of requests per page

Mobile also has a new priority, to come up with icons all embedded into one image file. This lets the server only load your sprites just one. Sounds like a good deal? It really is, only problem is putting up with the hassle of doing background-position. It’s just too tedious. UI developers struggled and there are better tools to automate this process now.

Backend development might be a little easier these days

Contrasting to backend development, frontend has a different sort of complexity. The challenges of UI development is always learning new technologies and how to achieve productivity through embracing these technologies. There’s often a set back initially and we have to discover (or even make our own) automation tools to remain as agile while still delivering within our deadlines. If you don’t do that, you just can’t survive for long.

How to install Laravel to a subdirectory

Simple! Just need to change a setting in the .htaccess file. I am using Laravel 4, you might be using some other version but the method should apply nevertheless. I use an alias to point to this directory.

Add this line “RewriteBase /l4″ to your .htaccess where l4 is your sub directory or folder.

<IfModule mod_rewrite.c>
    Options -MultiViews
    RewriteEngine On
    RewriteBase /l4
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

Have fun!

How to install Composer in Windows

I wanted to install PHP Composer in Windows. And to begin, I already have a copy of XAMPP 1.8.1, I think if you have a different way to get your PHP that should not matter. I tested this to work for Windows 7 but it should work for all versions of Windows.

0. Download and install XAMPP

You can download XAMPP here. I got the 7zip version rather than the installer itself. The ZIP version is similar, just with a larger file size. I extract the xampp folder into my C: drive, i.e. to C:\xampp. Then install it by opening the file C:\xampp\setup_xampp.bat. That will set the paths in XAMPP’s configurations.

1. Setting up environment variables

Continue reading “How to install Composer in Windows” »

How to use sudo without a password

This may sound like a bad idea in general but I do this in my testing virtual machine (VM) with Ubuntu or Debian operating systems. It makes it easier to restart servers.

First you need to edit your /etc/sudoers file through:

visudo

In the editor, locate this:

# Allow members of group sudo to execute any command
%sudo   ALL=(ALL:ALL) ALL

Change to this:

# Allow members of group sudo to execute any command
%sudo   ALL=(ALL:ALL) NOPASSWD:ALL

Now you can use sudo without a password.

How to add Ruby string interpolation highlighting for Sublime

To add Ruby string interpolation highlighting for Sublime Text 2, you need to edit your .tmTheme file. It can be found in your SublimeText 2, go to Preferences, then Browse Packages. This will open up your finder or Windows Explorer. Look for the folder “Color Scheme – Default”, you should be able to find themes like Monokai and others inside.

In order to add the syntax highlight for Ruby’s ${} in strings, for example:

puts "Working in #{pwd}"

Open up your .tmTheme file and add the following lines:

        <dict>
            <key>name</key>
            <string>Embedded Ruby Punctuation</string>
            <key>scope</key>
            <string>string punctuation.section.embedded.ruby</string>
            <key>settings</key>
            <dict>
                <key>foreground</key>
                <string>#75715E</string>
                <key>background</key>
                <string>#444444</string>
            </dict>
        </dict>
        <dict>
            <key>name</key>
            <string>Embedded Ruby Source</string>
            <key>scope</key>
            <string>string source.ruby.embedded.source</string>
            <key>settings</key>
            <dict>
                <key>foreground</key>
                <string>#FFFBF7</string>
                <key>background</key>
                <string>#444444</string>
            </dict>
        </dict>

You can change the colors of background and foreground to your liking too. Hope you’ll find this useful!

How to set SVN global ignores

There are some customizations that I make that pertains to my development computer only and because I work in a team environment I cannot commit in things that are customized towards my development environment. In order to do this, I do a global ignore on the file. Here’s how to do a global ignore. The subversion config file for Ubuntu 12.04 LTS or 12.10 is here:

sudo nano /etc/subversion/config

There is a section that looks like this

[miscellany]
### Set global-ignores to a set of whitespace-delimited globs
### which Subversion will ignore in its 'status' output, and
### while importing or adding files and directories.
### '*' matches leading dots, e.g. '*.rej' matches '.foo.rej'.
# global-ignores = *.o *.lo *.la *.al .libs *.so *.so.[0-9]* *.a *.pyc *.pyo
#   *.rej *~ #*# .#* .*.swp .DS_Store

You can uncomment that “global-ignores” part.