symfony2 assetic: unexpected extra files and how I dealt with them.
The first time I used assetic for symfony2, I got unexpected results. Assetic
seemed to be including more javascript files than I had in my js directory. I experienced
this on Ubuntu 12.04, and I use gedit as my editor.
Here was my js directory:
Here was my code:
{% javascripts ‘@AcmeHelloBundle/Resources/public/js/*’ %}
<script src=”{{ asset_url }}”></script>
{% endjavascripts %}
My expected result:
<script src=”/production/Symfony/web/app_dev.php/js/addff24_part_1_one_1.js”></script>
<script src=”/production/Symfony/web/app_dev.php/js/addff24_part_1_three_2.js”></script>
<script src=”/production/Symfony/web/app_dev.php/js/addff24_part_1_two_3.js”></script>
My actual result:
<script src=”/production/Symfony/web/app_dev.php/js/addff24_part_1_one_1.js”></script>
<script src=”/production/Symfony/web/app_dev.php/js/addff24_part_1_one_2.js”></script>
<script src=”/production/Symfony/web/app_dev.php/js/addff24_part_1_three_3.js”></script>
<script src=”/production/Symfony/web/app_dev.php/js/addff24_part_1_three_4.js”></script>
<script src=”/production/Symfony/web/app_dev.php/js/addff24_part_1_two_5.js”></script>
<script src=”/production/Symfony/web/app_dev.php/js/addff24_part_1_two_6.js”></script>
So what happened? Why did assetic link to six files instead of three? I went back to the directory and clicked “View -> Show Hidden Files”
Here are the six files that were actually in my directory:
To fix the problem, I deleted all the .js~ files, then ran the following commands:
Cleared my symfony cache:
sudo rm -rf app/cache/*
Regenerated the javascript cache:
sudo php app/console assetic:dump
Problem solved.
Use PHP & YQL to find out what city a zip is from
<?php
$_GET['zip'] = '16601';
//Validate the zip
$zip = str_replace(" ", "", $_GET['zip']); //remove white-space
if (!ctype_alnum($zip)) {
die("Enter alpha-numeric numbers only");
}
if (strlen($zip) > 7) {
die("Zip query is too long");
}
$zip = urlencode($zip);
$url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20google.geocoding%20where%20q%3D%22$zip%22&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
$xml = file_get_contents($url);
$location = new SimpleXMLElement($xml);
//var_dump($xml);
//var_dump($location);
$status = (string)$location->results->json->Status->code;
if ($status !== '200') {
die('Could not get location');
}
$country = (string)$location->results->json->Placemark->AddressDetails->Country->CountryName;
switch ($country) {
case "USA":
case "Canada":
echo (string)$location->results->json->Placemark->address;
break;
default:
echo 'false';
}
Site5 hosting is great
I started hosting with Site5 for my production sites and I love it. I’m using VPS4, which gives you 4 processors and 2gb of ram. I chose the dallas option.The total is about $124.00 a month. Support was a main selling point for me. I tested Site5’s support system pretty well, and usually within a few hours someone always fixed my problems. I tested site5 for about a month before I made the great leap from my previous VPS (PowerVPS).
Site5 also upgraded me from their lowest VPS wich is $53 for 756mb of ram, to the level 4 within 2 hours (which is good).
yui compressor example
yui-compressor –type css /home/batman/Dropbox/production/alpha/httpdocs/css/bd.css -o combo.css –charset utf-8
Print Meida CSS – Check List
Print Friendly Page
(dark / black backgrounds won’t print)
font-size:100%;
serif-font
avoid floating
colors to black
display none for pages you don’t to show
css code
<link rel=”stylesheet” href=”css/master.css” type=”text/css” media=”screen”>
<link rel=”stylesheet” href=”css/print.css” type=”text/css” media=”print”>
You can combine these two into one
@media screen {} //anything between these brackets is screen
@media print {} //nest the print rules
Finished Site Check List – CSS
Finished Site Check List
CSS Usage – FireFox Addon (Detects Unused Css Rules)
Validate CSS
Validate HTML
Increase Font Size
Test WithOut Images – (White Text On White Background)
Turn Off CSS
Cross Browser Testing
Test Agreed Devices
http://www.browsercam.com
https://browserlab.adobe.com
Measure Page Load
http://www.webpagetest.org – specifically tests IE
http://tools.pingdom.com/fpt/
FireFox
Y!SLOW
Reduce Image Sizes
Add width and height to inline images (Improves Speed.. but presentational?)
CSS header – for neatness
/* ——————————–
Site:
CSS author:
Updated:
Updated by:
———————————–*/
/* ———————————
brief description
———————————–*/
yui-compressor before and after shot.
before yui-compressor (562 bytes):
AFTER (469 bytes)
Yui compressor – an easy way to minify your .css files
Yahoo! open sourced, free of charge, an easy to use linux command line tool to minify your javascript and css.
The fantastic product I speak of is called “yui-compressor”. Yui compressor strips your .css or .js file of as much whitespace as possible. For javascript, yui-compressor shortens your variable names, usually making them only a single character long, or a little longer.
Another useful feature of yui-compressor that I found is that it can combine multiple.css or .js files, and then compress them.
For example, as I develop, I like to keep many .css files for the different elements of the page I’m working on. I’ll have “toolbar.css”, “hd.css”, “bd.css”…. and so on.Of course, it makes no sense for me to send several .css files over the wire,so I combine them in a combo file.
Here is how to combine multiple .css files with yui compressor
1. Fire up the terminal, go to the directory of your .css files
2. Find the files you want to compress, in our case y.css, u.css, i.css
3. Type "yui-compressor --type css y.css, u.css, i.css -o combo.css --charset utf-8"
4. Your files are now combined, and minified in combo.css from yui-compressor
On ubuntu you can get yui-compressor from synaptic.
Here is a screen shot:
css tables – a simple 3 column layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type = "text/css"> .table, .tr, .td {border:1px solid #ff0000;} .table {display:table; width:100%} .tr {display: table-row;} .td {display: table-cell;} </style> </head> <body> <div class="table"> <div class="tr"> <div class="td nav">left</div> <div class="td main">Content</div> <div class="td right-nav">right</div> </div> </div> </body> </html>
A blog on PHP 