2013s on Mika Tuupola

Flat UI Theme for Developers

Sun, 03 Nov 2013 00:00:00 +0000

Grab a Flat UI theme for TextMate 2 and Sublime Text. It is based on colors of the amazing Flat UI Pro framework made by Designmodo. Theme is for oldschool hackers who prefer their terminal windows to be green or yellow on black. It offers just enough highlighting without looking like a rainbow.

** NOTE! ** Designmodo link above contains my referral code. If you buy something from them I will get a reward and be a happy puppy.

Textmate 2

To install download the zipped bundle. Unzip it and doubleclick on the resulting file. It will ask if you want to install the bundle.

Click yes. Open a document in TextMate 2. Choose Flat UI from the theme menu. Now you are all set.

Sublime Text

To install download the theme file and copy it to Sublime Text Packages folder.

$ cp Flat\ UI.tmTheme ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/

To start using the theme go to settings.

Change the color_scheme setting.

Chained Selects for Zepto

Sun, 27 Oct 2013 00:00:00 +0000

New version of Chained mostly updates the remote version. Plugin now supports both Zepto and jQuery. You can avoid initial AJAX requests by bootstrapping select values. You can configure extra values to be sent to server. Since plugin now accepts more configuration options new prettier syntax was implemented. Lastly support for Bower was added.

Zepto support

Since plugin uses :selected you must also include Zepto selector extension. It is not included by default.

<script src="zepto.js"></script>
<script src="zepto.selector.js"></script>
<script src="jquery.chained.js"></script>

After this you can use the plugin as you normally would.

Bootstrapped selects

There are cases when you know values of the selects on page load. For example when linking directly to a saved order or a specific car model. When you know the values you can bootstrap the remote selects by giving the values in the options. This also avoids making the initial AJAX requests. If you have HTML code like below.

<select id="mark" name="mark">
  <option value="">--</option>
  <option value="bmw" selected>BMW</option>
  <option value="audi">Audi</option>n
</select>
<select id="series" name="series">
  <option value="--">--</option>
</select>

To have BMW Series 3 selected by default you can bootstrap the select values.

$("#series").remoteChained({
    parents : "#mark",
    url : "/api/series.json",
    bootstrap : {
        "--":"--",
        "series-3" : "3 series",
        "series-5" : "5 series",
        "series-6" : "6 series",
        "series-7" : "7 series",
        "selected" : "series-3"
    }
});

PRO TIP! Note also the new prettier syntax in the example above. You can pass all configuration options in one hash.

Send additional values

Sometimes you want to send more values than only the parent selects. Lets say you have select for transmission. Content of transmission select changes when user chooses new engine. However in your database possible different transmissions also depend on what series the car is. You have four different selects.

<select id="mark" name="mark">
  <option value="">--</option>
  <option value="bmw" selected>BMW</option>
  <option value="audi">Audi</option>
</select>

<select id="series" name="series">
  <option value="--">--</option>
</select>

<select id="engine" name="engine">
  <option value="--">--</option>
</select>

<select id="transmission" name="transmission">
  <option value="--">--</option>
</select>

Then you could use the following JavaScript code to send values of both #series and #engine to server.

$("#transmission").remoteChained({
    parents : "#engine",
    url : "/api/transmissions.json",
    depends : "#series"
});

PRO TIP! Parent select values are always sent. You do not have include then in depends setting.

Install

Download latest minified or remote version minified. You can also install with bower.

$ bower install chained

Lazy Load with CSS Backgound Image Support

Tue, 15 Oct 2013 00:00:00 +0000

You can now lazyload CSS background images. Bind the plugin to non image element and it will automatically change the background-image style attribute when element is scrolled into view. You can also use effects.

<div class="lazy" data-original="img/bmw_m1_hood.jpg" style="background-image: url('img/grey.gif'); width: 765px; height: 574px;"></div>

$("div.lazy").lazyload({
    effect : "fadeIn"
});

Optional placeholder image

The placeholder image is now optional. If you omit it plugin will use the default which is data uri grey png. One less http request to make.

<img class="lazy" data-original="img/example.jpg" width="765" height="574">

$("img.lazy").lazyload();

Download

Latest source or minified. Plugin has been tested with Safari 6, Chrome 30, Firefox 24 on OSX and IE8, IE9, IE10, IE11, Chrome 28 on Windows and Mobile Safari on iOS 7.02 and 6.1.3. Full changelog in GitHub.