Month: May 2012

Sass: the superduper guide

Installing in Mac:

gem install sass

comments: use /* */ for anything that will appear on the compiled file, and // for things that only show on the sass development files

When compiling, you can specify if you want your file compacted:

sass yourfile.scss ../css/yourfile.css –style compressed

Other styles: nested, compact, expanded

One of the most powerful features, mixings (example):

@mixin blue_text($size) {
color: #336699;
font-family: helvetica, arial, sans-serif; font-size: $size;
font-variant: small-caps; }

.product_title {
@include blue_text (15px); }

Example of rounded corners mixin:

@mixin rounded_borders($color, $width: 5px, $rounding: 5px) { -moz-border-radius: $rounding $rounding; -webkit-border-radius: $rounding $rounding; -khtml-border-radius: $rounding $rounding; -o-border-radius: $rounding $rounding;border-radius: $rounding $rounding;
border: $width $color solid; }

For mixings, it is always a good idea to put them on their own import file for maintainability (example):

@import “cross_browser_opacity.scss”; .h1 {@include opacity(60); }

@mixin opacity($opacity) {
filter: alpha(opacity=#{$opacity}); // IE 5-9+ opacity: $opacity * 0.01; }

Interpolation means you can have rule definitions that are dynamic:

.red_#{$carname}   will generate .red_volvo if volvo is $carname

Here is an example of using this:

@mixin car_make($car_make, $car_color) {
// Set the $car_make with “_make” at the end as a class .car.#{$car_make}_make {
color: $car_color;
width: 100px;
.image {
background: url(“images/#{$car_make}/#{$car_color}.png”); }

} }

And, this is the way you iterate in sass:

@each $member in thom, jonny, colin, phil { .#{$member}_picture {

background-image: url(“/image/#{$member}.jpg”); } }

But just wait a minute: you can also use if statements:

@mixin country_color($country) { @if $country == france {

color: blue; }
@else if $country == spain {

color: yellow; }
@else if $country == italy {

color: green; } @else {
color: red; } }

 

Writting media queries:

.main {
color: #336699; font-size: 15px; @media print { font-size: 10px; } }

This compiles to:

.main {
color: #336699; font-size: 15px; } @media print {
.main {
font-size: 10px; } }

CSS: Utilities

/* _____ UTILITIES _____ */
.oldSchool{width:750px;}
.gs960{width:960px;}
.liquid{width:auto;margin:0;}
.sidebar{width: 300px}
.clear{clear:both;}/* Layouts */
.line:after,.lastUnit:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:” x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x “;}
.line{*zoom:1;}/* Container of the grid, examples of use at https://github.com/stubbornella/oocss/wiki/Grids */
.unit{float:left;} /* Examples: class=”unit size1of2″ produce a cell 50% of the container size */
.unit-right{float: right} /* class=”unit size2of5 lastUnit” produce a cell 2/5 the size of the container, last in the row */
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.lastUnit{display:table-cell;float:none;width:auto;*display:block;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}/* Grids */
.pn{padding: 0}
.ps{padding: 5px}
.pm{padding: 10px}
.pl{padding: 20px}
.mn{padding: 0}
.ms{padding: 5px}
.mm{padding: 10px}
.ml{padding: 20px}
.pts{padding-top:5px}
.ptm{padding-top:10px}
.ptl{padding-top:20px}
.prs{padding-right:5px}
.prm{padding-right:10px}
.prl{padding-right:20px}
.pbs{padding-bottom:5px}
.pbm{padding-bottom:10px}
.pbl{padding-bottom:20px}
.pls{padding-left:5px}
.plm{padding-left:10px}
.pll{padding-left:20px}
.mts{margin-top:5px}
.mtm{margin-top:10px}
.mtl{margin-top:20px}
.mrs{margin-right:5px}
.mrm{margin-right:10px}
.mrl{margin-right:20px}
.mbs{margin-bottom:5px}
.mbm{margin-bottom:10px}
.mbl{margin-bottom:20px}
.mls{margin-left:5px}
.mlm{margin-left:10px}
.mll{margin-left:20px}/* Spacing */
.bold{font-weight: bold;}
.nonbold{font-weight: normal;}
.font-24{font-size: 24px;}
.font-22{font-size: 22px;}
.font-20{font-size: 20px;}
.font-18{font-size: 18px;}
.font-16{font-size: 16px;}
.font-14{font-size: 14px;}
.font-12{font-size: 12px;}
.font-10{font-size: 10px;}
.white{color: #FFFFFF;}
.black{color:#000000;}
.seo-hide{text-indent: -9999px;}/* fonts */
.hidden {display: none;}
.invisible{visibility:hidden;} /* General tricks */
.rounded-corners-3 {-moz-border-radius: 3px;-webkit-border-radius: 3px;-khtml-border-radius: 3px;border-radius: 3px;}
.rounded-corners-5 {-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 3px;border-radius: 3px;}
.rounded-top-corners-3{-moz-border-radius-topright: 3px;-webkit-border-top-right-radius: 3px;-khtml-border-top-right-radius: 3px;border-top-right-radius: 3px;-moz-border-radius-topleft: 3px;-webkit-border-top-left-radius: 3px;-khtml-border-top-left-radius: 3px;border-top-left-radius: 3px;}
.rounded-top-corners-5{-moz-border-radius-topright: 5px;-webkit-border-top-right-radius: 5px;-khtml-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px;-khtml-border-top-left-radius: 5px;border-top-left-radius: 5px;}
.rounded-bottom-corners-3{-moz-border-radius-bottomright: 3px;-webkit-border-bottom-right-radius: 3px;-khtml-border-bottom-right-radius: 3px;border-bottom-right-radius: 3px;-moz-border-radius-bottomleft: 3px;-webkit-border-bottom-left-radius: 3px;-khtml-border-bottom-left-radius: 3px;border-bottom-left-radius: 3px;}
.rounded-bottom-corners-5{-moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;-khtml-border-bottom-right-radius: 5px;border-bottom-right-radius: 5px;-moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;-khtml-border-bottom-left-radius:
5px;border-bottom-left-radius: 5px;} /* rounded corners */
ul.vertical-tabs{margin: 0;padding-left: 0;list-style: none;}
ul.vertical-tabs li{float: left;} /* vertical tabs */

SSH: Setting up a public / private key

Your sys admin should set you up, but here’s the nutshell showdown:

run ‘ssh-keygen’ in your home directory

You will be prompted for a couple of options, for enhancement security,

but optional.

A .ssh directory will be created containing your public and private keys.

Send the .pub file generated to your sys admin to complete the process

on the server you are trying to connect.

After he give you the green light, you are ready to ssh to that server

SVN cheatsheet

svn status // Tells you what has changed

svn add file_or_dir_name // Add files to codebase

svn delete file_or_dir_name // Remove them

svn commit -m "Saving recent changes" // Commit your changes

svn update // Update your local files, from the folder where you run this one down

svn resolve filename –accept working  // You guess it: once you manually fix conflicts in a file, this is the way to let svn you have done so

svn revert [myfile] // Get rid of uncommited local changes

svn delete [myfile] // Delete the file from the repo

svn log [filename] // Check file history

svn log -r 34137 -v // See what files were submitted in a given revision

svn diff -r 33721:33635 [filename] // Test file difference between revision. To find out revision numbers, use svn log above

 

To ignore files:

export SVN_EDITOR=emacs
svn propedit svn:ignore .
You need to be at the directory where this happens

Web Developer Tools: MAMP

The error log is at:

/Applications/MAMP/logs/php_error.log

To avoid SQL using the wrong time, add –default-time-zone=’+00:00′ to the following file:

/Applications/MAMP/bin/startMysql.sh

To log all the queries that hit the database:

Login all the queries that hit your mysql database:
if you are running MAMP, edit
/Applications/MAMP/bin/startMysql.sh
and put this in the command line

–log=/Applications/MAMP/logs/mysql_query_log