tillsanders

Animate the transformation of a mobile menu toggle into a cross

Animation Transition for a mobile menu toggle. Three horizontal lines transform into a cross and back again. The top and bottom lines fall into the center, transforming into one line. The line(s) rotate clockwise, spawning a line at 45deg and stop at 135 deg, forming a cross. Demo: http://jsfiddle.net/SYYr5/84/

Annotations:

• the animation uses four additional elements inside the a tag. This is not semantic, but we can at least use elements without a semantic meaning, like div and span
• using a div as a second container, we are able to apply a padding to our a tag
• We may need to use vendor prefixes :/

tillsanders

SCSS: rem-unit mixin provides support for older browsers

This mixin was taken from David Walshs Blog (great blog, by the way!); the article was witten by Sébastien Axinté. It provides a mixin to convert rem to px for older browsers.

Link different stylesheets in your head section. main.css for decent browsers and main-ie.css for IE < 9:

<!--[if (gt IE 8) | (IEMobile)]><!-->
      <link rel="stylesheet" href="/css/main.css">
<!--<![endif]-->

tillsanders

Install older versions of laravel via composer

php composer.phar create-project laravel/laravel <path> 4.1.*

Or, in case composer is installed globally:

composer create-project laravel/laravel 4.1.*

tillsanders

Language url prefix for Laravel 4

Not sure, where I got the initial code from :( But this is, what I use at the moment:

Add to app/config/app.php:

<?php
// [...]
'languages' => array('de', 'en'),

tillsanders

Automatically get page meta from language files with Laravel

Use this in your blade layout:

<title>{{ trans('pages.'.Route::currentRouteName().'.title').trans('pages.title-suffix') }}</title>
<meta name="description" content="{{ trans('pages.'.Route::currentRouteName().'.description') }}" />
<meta name="keywords" content="{{ trans('pages.obligatory-keywords').trans('pages.'.Route::currentRouteName().'.keywords') }}" />

An example for lang//pages.php:

tillsanders

Favicons, Tiles, etc.

• favicon.ico - 32x32
• favicon.png - 32x32
• apple-touch-icon.png - 180x180 (iPhone 6 Plus, others resize it automagically)
• tile.png - 558x558
• tile-wide.png - 558x270
• tile-150x150.png - 150x150
• tile-310x310.png - 310x310
• tile-70x70.png - 70x70

tillsanders

Generate menus using Laravel routes

<li>{{ HTML::link(URL::route('home'), trans('pages.home.name'), Route::currentRouteName() === 'home' ? array('class' => 'active') : null) }}</li>

{{ HTML::link(URL::route('news'), trans('pages.news.name'), in_array(Route::currentRouteName(), array('news', 'news-details')) ? array('class' => 'active') : null) }}

tillsanders

#!/bin/bash
glue graphics/sprites \
--img=./graphics \
--scss=./styles \
--sprite-namespace= \
--namespace="sprite" \
--margin=5 \
--retina
mv ./styles/sprites.scss ./styles/scss/_sprites.scss

tillsanders

$('a').click(function(e) {
    if($(this).attr('href').substr(0, 4) !== 'http') {
        if($($(this).attr('href')).length > 0) {
            e.preventDefault();
            history.pushState({}, $('title').text(), window.location.protocol + '//' + window.location.host + window.location.pathname + $(this).attr('href'));
            $('html, body').animate({
                scrollTop: $($(this).attr('href')).offset().top
            }, 500);
        }
    }

tillsanders

Laravel: drag-and-drop repositioning with auto-save of DB entries

Use case: Database entries are represented in a table. By grabbing and moving a row up or down the table, you can change the entries' order/position. The changes are submitted automatically via ajax.

• Uses jQueryUI (custom download: sortable is needed)
• newly created elements are added to the top (see route /jobs/create)