∞ Permalink

∞ Permalink

As you might know, it’s considered as good practice to combine and minify all your CSS and JavaScript when deploying a website into production. This will not only reduce the file size, but also reduce the number of HTTP requests that’s needed to deliver your website.

I decided to make a watch-script that would combine both JavaScript and my Sass-files. By doing this, I don’t have to mess around in my HTML-files as much, and I can freely add or remove files (like libraries) without having to do any extra work.

So without further ado…

Below is the watch-script, you can find a Gist here as well. Add this file to your root directory, and change the top variables to match your needs. JS_PATH and SASS_PATH are the input directories, and FINAL_JS and FINAL_CSS is the output files.

#!/bin/sh

JS_PATH="_js"
FINAL_JS="scripts.js"

SASS_PATH="_sass"
FINAL_CSS="."

sha=0
previous_sha=0

update_sha()
{
    sha=`ls -lRT $JS_PATH $SASS_PATH | gsha1sum`
}

build () {
    # Build/make commands here
    rm $FINAL_JS
    touch $FINAL_JS
    cat $JS_PATH/*.js >> $FINAL_JS
    echo "  \033[0;32m$FINAL_JS\033[0m"
    sass --update $SASS_PATH:$FINAL_CSS
}

changed () {
    echo " ≫ Change detected. Rebuilding..."
    build
    previous_sha=$sha
}

compare () {
    update_sha
    if [[ $sha != $previous_sha ]] ; then changed; fi
}

run () {
    update_sha
    previous_sha=$sha
    while true; do

        compare

        read -s -t 1 && (
            echo " ≫ Forced rebuild..."
            build
        )

    done
}

echo " ≫ Watching for changes. Press Ctrl-C to stop. Press enter to force rebuild."

run

The script will scan for changes by running the ls -lRT command and hash the result with a sha1-tool. Note that I’m using gsha1sum here, since that’s what Homebrew installed for me, on some systems you might have to change that to sha1sum.

The watch-script will combine all files but it won’t minify the code, since I want to be able to debug code while developing. For minifying, I’ve made a little “deploy-script”, as seen below. You can find a gist here.

#!/bin/sh

JS_PATH="_js"
FINAL_JS="scripts.js"

SASS_PATH="_sass"
FINAL_CSS="."

echo " ≫ Building and minifying assets."

rm $FINAL_JS
touch $FINAL_JS
cat $JS_PATH/*.js >> $FINAL_JS
echo "  \033[0;32m$FINAL_JS\033[0m"
sass --force --update $SASS_PATH:$FINAL_CSS --style compressed

jsmin --overwrite scripts.js

This script requires that you have jsmin installed. I installed it via NPM. The Sass is compiled with the “compressed style”, which will remove comments and whitespace.

So yeah, these are some tools I use almost every day. I hope you’ll like them! And if you have any suggestions for how I can make them better, leave a comment!

∞ Permalink

Understanding the concept of nothingness is as much a philosophical issue as it is a pragmatic one. We are inhabitants of a universe of somethings, yet reason in a logical universe of existential uncertainties. As a physical manifestation of a logical system, computers are faced with the intractable problem of how to represent nothing with something.

Wonderful!

∞ Permalink

∞ Permalink

A few years back I made a theme called Strict, that users could download and use for free. Later the guys at Tumblr released their theme directory, then known as the Theme Garden. Strict became pretty popular and has since then been installed over 150,000 times.

As you can see in the image above (1, 2, 3, 4), the theme can be customized a lot, with your own colors, bakground image or fonts. And of course, if you’re comfortable with CSS you can do pretty much anything!

You can install the theme by over here, or read more about it here.

In a recent project I made a bash-script to make this easier. This script will copy all resources from Resources/iphone/images to Resources/android/images, and move them around so you get a XHDPI-, HDPI- and MDPI-folder.

It currently has some limitations though, that I might resolve in the future if needed:

• You must provide an @2x file on iOS, even when it might not be required.
• This script will remove Resources/android/images before copying, which might be an annoyance if you have Andorid-specific images.
• It doesn’t care if there hasn’t been any changes to an image.

If this isn’t a problem for you, or if you think you can modify the script to fit your needs, you can find it in a gist here.

-(void)setHideShadow_:(id)arg
{
  for(UIView *wview in [[[webview subviews] objectAtIndex:0] subviews])
  {
    if([wview isKindOfClass:[UIImageView class]])
    {
      wview.hidden = [TiUtils boolValue:arg];
    }
  }
}

Clean and rebuild your project, and you’ll be able to use the hideShadow-property.

var webview = Ti.UI.createWebView({
  hideShadow: true
});

∞ Permalink

January 2013 update

In January 2013 I released a new version of Instameme. This update features a new responsive design that looks great both on your desktop and in your phone. If you own an iPhone, save the site to your homescreen for quick access!

The new version also features a tag-based search function. Tags can be set when you upload new memes to the site.