Symfony 2: Enable Twig Extensions

The other day I was dicking around with some code and I felt like I needed to truncate a string.

Fortunately I was working with Symfony, which uses Twig templates, which is definitely my preferred templating system in 2014.

But by default Symfony’s Twig extensions, which give you stuff like a truncate filter, is not enabled.

It’s easy to get turn it on though, just add this to your services.yml file.

// app/config/config.yml
services:
 twig.extension.text:
     class: Twig_Extensions_Extension_Text
     tags:
         - { name: twig.extension }

Once you have the Twig extensions loading, you can do stuff like this.

{{ user.middlename|truncate(1) }}
Screen shot 2015-11-22 at 8.53.10 PM

Responsive Design: Unfloat An HTML Element

Have you ever sat down and said, “I’m going to float that fucking logo to the right.”

Whether it makes any sense to float that motherfucker to the right is irrelevant, you do it.

But doing so has caused your design to get all tore up for users at less than 800 pixels.

That fucking logo is crashing into shit now.

Fuck it. When the screen resolution hits 800 pixels or less, just don’t float that fucking logo to the right.

@media (max-width: 800px) {
  #logo {
    float:none;
  }
}

How to Fire Up jQuery

When I want to fire up jQuery, I do it like this.

$(document).ready(function() {
   setInterval(function() {
       console.log('Poop');
   }, 30000); 
});

How to Insert Data with PHP PDO

Here’s one way to insert a record using PHP PDO into a MySQL database.

$dbh = new PDO('mysql:host=localhost;dbname=myfunkydata', 'dbusername', 'dbpassword');
$dbh->beginTransaction();
$sth = $dbh->prepare("INSERT INTO recording(name, date) VALUES(?, ?)");
$file = time();
$sth->execute(array($file, date('Y-m-d H:i:s', $file)));
$dbh->commit();

How to Create PHP PDO MySQL Connection

Here’s how I create a PDO connection to a MySQL database.

$dbh = new PDO('mysql:host=localhost;dbname=myfunkydata', 'dbusername', 'dbpassword');
$dbh->beginTransaction();
$sth = $dbh->prepare("INSERT INTO recording(name, date) VALUES(?, ?)");
$file = time();
$sth->execute(array($file, date('Y-m-d H:i:s', $file)));
$dbh->commit();

Tutorial: HTML5 Local Storage

HTML 5 Local Storage

Until HTML5 came along, storing data on the client side was always a total hack. Now it is remarkably easy and it works consistently across all modern browsers.

I’ll demonstrate how to do it by creating a dummy application for saving user preferences. I wrote this demo app as a Symfony bundle. You can download the source code from Git. If you’re not developing with Symfony, the files you want to look for are Resources/views/Default/index.html.twig and Resources/public/js/html5storage.js.

Here’s what the application should look like, if you are loading the css and everything.

Tutorial: HTML 5 Storage Screenshot

The index.html.twig loads a form that looks like this.

<p>Enter colors as just the hex code without the pound sign.</p>

<form id="user-prefs">
    <fieldset><legend>Background Color</legend><input id="bgcolor" name="bgcolor" type="text" value="" /></fieldset>
    <fieldset><legend>Foreground Color</legend><input id="fgcolor" name="fgcolor" type="text" value="" /></fieldset>
    <fieldset><legend>Font</legend><input id="font" name="font" type="text" value="" /></fieldset>
    <button id="submit" type="submit">Save Changes</button>
</form>

The real work happens in the html5storage.js, which looks like this.

$(document).ready(function() {
    $('#user-prefs input').change(function(data) {
       savePrefs(); 
    }).keypress(function(evt) {
        if (evt.which === 13) {
            evt.preventDefault();
        }
        savePrefs();
    });
    loadPrefs();
});

function savePrefs() {
    prefs = ['bgcolor', 'fgcolor', 'font'];
    for (var i = 0; i < prefs.length; i++) {
        save(prefs[i], $('#' + prefs[i]).val());
    }
    loadPrefs();
}

function loadPrefs() {
    $('#bgcolor').val(recall('bgcolor'));
    $('body').css('background-color', '#' + recall('bgcolor'));
    $('#fgcolor').val(recall('fgcolor'));
    $('body').css('color', '#' + recall('fgcolor'));
    $('#font').val(recall('font'));
    $('body').css('font-family', recall('font'));
}

function supportsLocalStorage() {
    if (Modernizr.localstorage) {
        return true;
    } else {
        return false;
    }
}


function recall(key) {
    if (!supportsLocalStorage()) return;
    return localStorage['tutorialhtml5storage.' + key];
}
    
function save(key, value) {
    if (!supportsLocalStorage()) return;
    localStorage['tutorialhtml5storage.' + key] = value;
    return true;
}

Those last three functions are the only ones that interact at all with the HTML5 local storage container. The HTML 5 local storage stores a very basic key:value set of data. It’s basically an associative array, or in Perl they called them hashes.

The localStorage variable is actually an object, but because this is Javascript, we can interact with it like it’s an array. It’s just easier to work with it as an array when creating the storage keys. I’m using tutorialhtml5storage as my namespace in the local storage container. That prevents my application from stepping on another application’s proverbial toes (that other application must be from the same origin to read this application’s localStorage, unlikely but possible depending on how your environment is configured).

The function supportsLocalStorage just checks to make sure the browser is capable of saving data locally. I’m doing this with Modernizr because it’s just a great tool to use and everyone should use it, even for small stuff.

The other two functions, recall and save, do pretty much what it sounds like they do. The save function saves one piece of data to local storage. The recall function pulls up one piece of data from local storage.

The other two functions, loadPrefs and savePrefs, just support the demo application by calling save and recall and updating the user interface accordingly.

Now before you go too hog wild with HTML5 local storage, currently browsers limit you to 5 megabytes of space. And while the data is protected in terms of same origin policies, the data is still stored on the user’s computer and so it’s outside of your server’s environment and control. Just be mindful of putting personal and private data in local storage.

Tip Jar

If you think what I’m publishing here is worth more than nothing and you want to see me keep publishing, leave a tip.

When I bartend, I get a buck for pouring someone a beer, the shit I’m doing here is worth at least a dollar.

And no, I don’t want to sell ads.

Why I hate Modernizr

Modernizr is great, but I hate it.

I hate, hate, hate it that the name is simply a misspelled word. Every time I add Modernizr to a new project, it always takes like three tries to spell modernizer, er, modernzr, derp, modernizr correctly.

Tip Jar

If you think what I’m publishing here is worth more than nothing and you want to see me keep publishing, leave a tip.

When I bartend, I get a buck for pouring someone a beer, the shit I’m doing here is worth at least a dollar.

And no, I don’t want to sell ads.

How to Create a Symfony Bundle

Technically, it is not terribly complicated of a process to manually create a Symfony bundle. I would just need to create the bundle directory structure in the src directory. That’s just four directories and then a few subdirectories. Then I just need to update app/AppKernel.php to load the new bundle. Oh yeah, I would need to create the bundle class in the new bundle src directory. Then all I have to do is add a reference to the routing configuration file I created in my new bundle’s Resources/config directory.

Obviously creating a bundle by hand would be stupid.

To create a bundle, I just run this command in my Symfony root directory.

php app/console generate:bundle --namespace=MikePatton/MrBundle

I don’t have to specify the namespace parameter. When I am creating a bundle, I’m usually creating more than one, so having that parameter on the command-line is easier for me. The aforementioned command would create a bundle called MrBundle in the MikePatton namespace.

Symfony Peeve: Inconsistent Namespace References

One thing that peeves me about Symfony is that it’s inconsistent in how it expects the user to refer to what’s seemingly the same thing.

For instance, if you want to create a bundle with the command-line tool, you would do something like this.

php app/console generate:bundle --namespace=Acme/Bundle/BlogBundle

That’s fine, but then when you want to create a controller in this bundle, you do this.

php app/console generate:controller --controller=AcmeBundleBlogBundle:Post

I’m sure there’s some totally legit reason for referencing the namespace (Acme/Bundle/BlogBundle) with slashes in one instance and without in the other, but it’s annoying to have to always be asking yourself, “Is it with the slashes or without when I create a controller?”

It’s probably just me, but whenever I guess, I’m invariably wrong 50 percent of the time.

Color Eye Drop Selector for Mac

I often feel the desire to grab a particular color from an image or graphic I find on the Internet.

And because I’m an ignorant fool, I’ve always struggled with doing this. I’d grab a screenshot, open the file in Photoshop or some similar program. It was always such a pain in the ass. I even installed a horrible Chrome plugin called colorPicker – it never really worked right.

And then the other day I decided to Google color eyedropper for Mac, or something like that, and there I had found it, there is an application for that. It’s actually included with every Mac.

DigitalColor Meter.app

DigitalColor Meter.app

It’s called DigitalColor Meter. It’s located in Applications/Utilities.

I feel like an idiot for not knowing this.

I switched from Linux to Mac as my desktop and development environment in probably 2003, maybe 2002. Whenever OS X started to become usable. I never knew this tool was available. While most of my color selecting is done inside some sort of application like Photoshop, it is really nice to be able to just grab any color whenever I want from whatever I want.