Type

html {
    -webkit-font-smoothing: antialiased;
}

Articles

Jeffrey Way illustrates a technique using CSS3 and some proprietary WebKit sauce to create an effect that looks like something you'd do with Photoshop.

There is a 13 minute video that outlines the technique.

http://net.tutsplus.com/tutorials/html-css-techniques/subtle-css3-typography-that-youd-swear-was-made-in-photoshop/

WebKit supports styling scrollbars

http://webkit.org/blog/363/styling-scrollbars/

Supporting IE

IE is usually left out when it comes to these CSS3 techniques. However there is a project that utilizes HTC scripts to enable the newer stuff.

http://css3pie.com

Cheat sheets

The guys at Sencha have created this reference that hits most of the high spots for CSS3. It includes animation, rounded corners, and a lot of the well-known CSS3 additions. It does a good job of handling the tricky ones like text-overflow: ellipsis giving you the additional information you need to make those work.

http://downloads.sencha.com/extras/css3-cheat-sheet.pdf

Tips

nav, .toolbars {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

Links

3D transforms

http://webkit.org/blog/386/3d-transforms/

Reflections

http://webkit.org/blog/182/css-reflections/

Multi-column text

http://www.alistapart.com/articles/css3multicolumn/

Line clamping on paragraphs

http://dropshado.ws/post/1015351370/webkit-line-clamp

Masking

http://webkit.org/blog/181/css-masks/

The tricky stuff

Positioning with CSS, like the box model, trips up a lot of designers. It's one of those things that isn't clear upon first explanation.

This article on Stop Design does a very good job of educating on CSS positioning.

http://stopdesign.com/archive/2003/09/03/absolute.html

CSS content property

Credit for most of this content goes to http://css-tricks.com.

li:before {
    content: '\00bb';
}

#main-content a:visited:before {
   content:  "\2713 ";
}

@media print {
    #main-content a[href]:after { " (" attr(href) ") "; }
}

Links

Using Less CSS syntax and some components from BaselineCSS, a good starting point for project needing a baseline grid and sane styling defaults.

Typography

Jason Santa Maria uses lettering.js to apply style to each individual letter on this example from Lost World's Fairs.

A great resource for learning how traditional typographic style can be applied to web development.

http://webtypography.net/

James Godfrey and Patrick Wilkey outline 34 sins to avoid when excersizing your typographic prowess.

http://www.rayelder.com/teaching/_downloads/pdf/typographic-sins.pdf

Tips and tricks

Making a template tag library built-in

http://stackoverflow.com/questions/1184983/load-a-django-template-tag-library-for-all-views-by-default

Optimization

Database guidelines to keep your system running quickly and avoid data bottlenecks for as long as possible.

http://docs.djangoproject.com/en/dev/topics/db/optimization/

Interesting projects

Luke Plant has a project for creating fake data and auto-populating your Django models with a facsimile of real data. There are some really good reasons that you always want to use fake data: protecting sensitive data, performance testing, and creating fixtures. Check it out at http://pypi.python.org/pypi/django-anonymizer/

Authoring content

Hands down my favorite desktop publishing tool is Adobe InDesign.

It offers some nice tooling for publishing in the ePub format. This guide is written for CS4 but the guidelines apply more broadly.

Fonts

This article was helpful in choosing the typefaces that I used. Apple is somewhat non-standard when it comes to supporting this format.

http://www.michaelcritz.com/2010/04/02/fonts-for-ipad-iphone/

The simplest workflow

vim myfile

With Git, you have to be explicit:

git add myfile

Now we commit locally:

git commit

Now we push:

git push

Getting up stream changes

This is something I do quite often, I fork on Github and push up my own changes but at some point I also want to pull down what's been going on with the main branch.

Register the upstream:

git remote add upstream git://github.com/somewhere/something.git

Now pull down the up stream changes:

git fetch upstream
git merge upstream/master

This will merge, and now one of these will push it back to your forked repo:

git push

More info here http://help.github.com/forking/

Dealing with branches and tags that have the same name

Pretend for a moment that you've created a branch and a tag with the name "foo".

Normally you can delete the branch and to update GitHub, you'd do this

git push origin :foo

With a tag of the same name, you'll see this warning from GitHub.

error: dst refspec foo matches more than one.

The proper way to accomplish this is to tell it you are specifically targetting heads.

git push origin :refs/heads/foo

Long-lived branches

As soon as you incorporate some QA practices into you development cycle, your repository can get more complicated. It doesn't have to, but a lot of people choose to create a branch that testing is done out of. Developers can fix bugs in this branch and QA is isolated from master branch instability.

Create a test branch

git branch test

Developers checkout this branch

git checkout test

They fix the bug

vim src/buggyfile.py
git add src/buggyfile.py
git commit -m 'Fixed the foo because it was bugging the bar'

QA tests it out, and now we come to the end of the sprint and merging of master and test needs to occur

git checkout master
git merge test

Now we want to basically move the HEAD for test to the commit we created when we merged master and test.

Let's pretend we do a git log and figure out the hash for that commit is 7482cd250a86b1c05d7e2ed361b9a9413882f36c.

We are going to tell git that, being that we are in the test branch, and we've already merged test into master, we want to move the pointer for HEAD of test to the commit with hash 7482cd250a86b1c05d7e2ed361b9a9413882f36c.

git reset --merge 7482cd250a86b1c05d7e2ed361b9a9413882f36c

Thanks to Tim Pope.

Rebasing

Rebasing modifies the commit tree.

Here is a good Stack Overflow question that outlines some general techniques.

http://stackoverflow.com/questions/495345/git-removing-selected-commits-from-repository

Blogs

Good article by Jeff Kreeftmeijer that outlines some of the things he's learned while working with Git.

http://jeffkreeftmeijer.com/2010/git-your-act-together/

Basic template

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Something clever</title>

    <link rel="stylesheet" href="css/main.css" type="text/css" />

    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    </head>
    <body>
    </body>
</html>

Another well-tested alternative is this HTML5 boilerplate.

Detecting support

Figuring out if the browser that is rendering your content can support the <audio> or offline storage is not hard, but it's not something you want to repeatedly write Javascript for either.

Use Modernizr. Simple as that.

If you're curious as to which browsers support which feature check out http://caniuse.com/

Styling

You can start using the new elements.

section, article, header, footer, nav, aside, hgroup { display: block; }

If you use section, check out this guide

To get IE to behave, use Remy Sharp's JS tool in a conditional comment:

<!--[if IE]>
    <script
    src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
<![endif]-->

Headings

Use Geoffrey Sneddon's tool to generate outlines. http://bkapart.com/html5/9.

Notable features

<ul contenteditable>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<input name="email" type="email" placeholder="Your email address" />

<audio autoplay="autoplay" controls="controls">
    <source src="file.ogg" />
    <source src="file.mp3" />
    <a href="file.mp3">Download this file.</a>
</audio>

<video controls preload>
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
    <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
    <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>

Google Chrome Frame

A lot of the stuff that HTML5 and CSS3 simply don't work well or not at all in Internet Explorer. Google provides a product called Google Chrome that brings a WebKit browser into Internet Explorer as a plugin.

http://code.google.com/chrome/chromeframe/

ARIA

I'll be honest with you, making an accessible website falls into a lower category of priority than writing tests and documentation. I feel guilty about this. As a developer creating a website I can make the eperience for someone with a visual impairment 1 ba zillion times better if I follow some simple rules. And just like writing tests almost always creates a better code, making a website accessible almost always makes the information architecture better.

So like excersising, I have to develop a discipline to do this.

As it relates to HTML5, there are some things to discuss. The most basic unit is role. A full list of these are available at http://bkapart.com/html5/10.

Validation

Check out Henri Sivonen's HTML5 validator at http://validator.nu.

Doing wireframes and mockups

Adobe Illustrator vector template

http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements

Briefs

http://giveabrief.com

Libraries and resources

Lazy loading images in table views

http://www.markj.net/iphone-asynchronous-table-image/

HTTP requests

http://allseeing-i.com/ASIHTTPRequest/How-to-use

Unit testing just got easier?

http://www.levelofindirection.com/journal/2010/12/28/unit-testing-in-c-and-objective-c-just-got-easier.html

Home screen icon

From within MobileSafari, you can add the current site to an iOS device's home screen.

The icon used here can be specified by creating a 114 by 114 pixel icon in PNG format.

Put this in the head of your document.

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

If you want to prevent the device from adding the gloss, do this.

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png">

Media queries

With the iPad, iPhone, retina display and the ability to rotate the device's orientation developing for all scenarios can be challenging.

Luckily, @media queries save the day.

http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

Here is an excerpt from Stuff and Nonsense.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Techniques

Jordan Dobson demonstrates how to recreate a tab bar

http://jordandobson.com/webkit_mask_iphone_nav/retina/

Links

Icons for mobile apps

http://glyphish.com/

Tools

Firediff allows you to see what changes happen to the DOM, giving you a log of attribute differences. Great for tackling complex interactions.

http://www.incaseofstairs.com/firediff/

Lighter frameworks

Underscore.js provides some Ruby-esque features that make the language more pleasant to use. It's similar to jQuery and Prototype.js.

http://documentcloud.github.com/underscore/

Backbone.js is an MVC framework to make working with and maintaining larger Javascript applications easier.

http://documentcloud.github.com/backbone/

Password-less SSH access

ssh remote-machine 'cat >> .ssh/authorized_keys' < .ssh/id_rsa.pub

Linux man pages

I've seen this in Gentoo specifically when running man [ARG].

ESC[1mNAMEESC[0m
       /sbin/ldconfig - configure dynamic linker run-time bindings

ESC[1mSYNOPSISESC[0m
       ESC[1m/sbin/ldconfig ESC[22m[ ESC[1m-nNvXV ESC[22m] [ ESC[1m-f conf ESC[22m] [ ESC[1m-C cache ESC[22m] [ ESC[1m-r root ESC[22m] ESC[4mdirectoryESC[24m ...
       ESC[1m/sbin/ldconfig -l ESC[22m[ ESC[1m-v ESC[22m] ESC[4mlibraryESC[24m ...
       ESC[1m/sbin/ldconfig -pESC[0m

Setting the pager environment variable can fix the display of ESC characters:

export PAGER="less -E -r"

Application listening to network ports

sudo lsof -i -P | grep -i "listen"

Thanks to Stefan Saasen. http://juretta.com/

Tips along the way

class MyTest(TestCase):
    @classmethod
    def setup_class(cls):
        // do something, remember you don't have an instance of cls, but the
        //class object itself

    @classmethod
    def teardown_class(cls):
        // do something, remember you don't have an instance of cls, but the
        //class object itself

Little things I missed the first time through

When I first started learning Python I was eager to start building something right away. The language is simple and elegant and I felt like I could jump right in since I was already familiar with other dynamic languages.

There were certain things that I missed while reading those early chapters. Here are just a few.

if any((foo, bar, baz)):
    print 'One of these is truthy'

var1 = something
var2 = somethingElse

var1, var2 = something, somethingElse

Favorite standard library modules

with open('file.txt') as fp:
    content = fp.read()

   from contextlib import contextmanager

   @contextmanager
   def tag(name):
       print "<%s>" % name
       yield
       print "</%s>" % name

   >>> with tag("h1"):
   ...    print "foo"
   ...
   <h1>
   foo
   </h1>

Working with HTML
-----------------

Sanitizing HTML can be tricky.  James Socol has created a project that works to
make it a lot easier.  Check out https://github.com/jsocol/bleach.

Getting Things Done

David Allen created a system for work-life management that involves some simple principles for handling the amount of stuff that comes at a human being. He named it Getting Things Done or abbreviated GTD.

I currently implement GTD with OmniGroup's OmniFocus on my iPhone, my Mac, and my iPad.

I have no doubt that I would have gone insane without this system many years ago.

Using OmniFocus to report daily scrums

For a few years I've been a team member on several agile development teams. Part of the duty of a scrum team member is to report their daily scrum.

I utilize a custom OmniFocus perspective to remind me of what I've done the previous day.

Pomodoro technique

Once you've captured the tasks you need to do on a day-to-day basis and you are managing them in a trusted system, you have to actually do the work.

I still found trouble maintaining focus but found a technique that works well for me.

Invented by Francesco Cirillo, the Pomodoro Technique outlines some simple procedures that you follow to improve your focus and concentration. In a nutshell, you work 25 minutes on a task and take small breaks inbetween.

I highly recommend this for anyone who considers themselves ADD. You can read the free Pomodoro Technique book.

Fixing silly stuff

When CTRL-D and CTRL-U start scrolling one line at a time, which can happen by accidentally hitting 1 CTRL-D or 1 CTRL-U.

:set scroll=0

Sudo writing

On occasion I will edit a file using my local unix account that has permission to read but not to write. When I go to write the file, Vim presents an error telling me I do not have permission.

Here is a handy command that can be ran to get past this.

:w !sudo tee % > /dev/null

tee is a small utility that takes standard in and pipes it to standard out.

Advanced visual block mode

This is a comman pattern, I start with something like this

Cap'n Reynolds
Zoe
Hoban
Inara
Jayne
Kaylee
Simon
River
Derrial

And I need to surround each one with something else like

firefly_character("Cap'n Reynolds")

This is a long list, I don't want to do it manually so in Vim put the cursor on the C in Cap'n and type this:

<CTRL-V>9jIfirefly_character("<ESC>

You'll end up with this:

firefly_character("Cap'n Reynolds
firefly_character("Zoe
firefly_character("Hoban
firefly_character("Inara
firefly_character("Jayne
firefly_character("Kaylee
firefly_character("Simon
firefly_character("River
firefly_character("Derrial

Now that's one rainbow special, to get the double rainbow we are going to do it with the ragged ending too.

Again put the cursor on the C in Cap'n and type this:

<CTRL-V>9j$A")<ESC>

And you get this

firefly_character("Cap'n Reynolds")
firefly_character("Zoe")
firefly_character("Hoban")
firefly_character("Inara")
firefly_character("Jayne")
firefly_character("Kaylee")
firefly_character("Simon")
firefly_character("River")
firefly_character("Derrial")

Examples

Some of the top designers in the industry get together to demonstrate the capabilities.

http://lostworldsfairs.com/

Tooling

FontSquirrel offers a great service for converting your existing fonts (make sure have license to use them first).

http://www.fontsquirrel.com/fontface/generator

Google also offers a handful of fonts that you can use. Their instructions are good and you can even download the original font to use in mockups.

http://code.google.com/webfonts

Another service, TypeKit, has a large selection of high quality fonts. You can sign up for a limited free plan, or pay a yearly fee to get access to their library.

http://typekit.com/

I haven't used the Open Font Library service, but the idea sounds great. Would be worth keeping an eye on as it appears it's not a finished product yet.

http://openfontlibrary.org/

Podcasts about it

http://5by5.tv/bigwebshow/1

Jeffrey Zeldman and Dan Benjamin grill Ethan Dunham of Fontspring and Font Squirrel and Jeffrey Veen of Typekit about real fonts on the web