Better CSS Font Stacks

Faster and More Secure Webfonts

Building iPhone Apps with HTML, CSS, and JavaScript

UX Storytellers Connecting the Dots

Essential JavaScript and jQuery Design Patterns

20 Things I learned about Browsers and the Web

Taking your Talent to the Web

Dive into HTML5

Data Structures and Algorithms

Design Your Imagination

The Web Book

Getting Real: Building Successful Web Applications

Web Style Guide 3rd Edition

The Woork Handbook

Forty's Pocket Guide to SEO

Web Designers' Success Guide

1. Use Git on Windows with TortoiseGit

The tortoise has somehow become synonymous with running open source version control projects on Windows, thanks to a long line of namesake projects traced back to the 2000 release of TortoiseCVS (a Windows-based CVS client). Over the years several sibling projects were created for interfacing with other popular version control solutions, including TortoiseSVN and TortoiseHg. In late 2008 TortoiseGit became the latest addition to the series, providing Windows users with an impressively well-integrated Git client.

TortoiseGit depends upon Git for Windows, so be sure to install it before installing TortoiseGit. See the TortoiseGit website for all of the installation and configuration details.

2. Browsing Repositories with gitk

If you'd like to view repository changes using a convenient graphical interface, check out gitk. Gitk is a repository browser that makes it easy to review and search a project's commit history. Figure 1 presents a screenshot of the gitk file-browsing window opened to one of my forthcoming books.

3. Managing Repositories on OS X

If you're running OS X and are looking for a more refined interface, check out GitX. GitX aims to be a capable GUI-based Git client for the OS X platform, offering many of the most commonly used Git features, including the ability to browse repositories and commit changes. Additionally, you'll find a few slick features such as the ability to upload patches to gist.github.com using the "Gist it" button (see Figure 2).

4. Hosting Repositories with Gitolite

The majority of Git users assume the role of client, interacting with one or more specific projects which happen to be managed in Git repositories. However, somebody must assume the role of administrator, managing the repositories, repository access, and repository users. The Gitolite project was created with this administrator in mind, providing a solution for allowing a single user account to host multiple Git repositories without having to deal with the complexities of creating server accounts or even granting server shell access. Administrators can use Gitolite to easily grant access rights using a simple configuration file syntax, synchronize Gitweb permissions with those defined in Gitolite, log all project interactions, and much more.

5. Manage Git Hooks with Git-hooks

Git offers a "hooking" feature that causes certain commands or scripts to be run in conjunction with certain commands, such as when you commit changes to a repository. Believe it or not, every Git repository includes several sample hooks, which you'll find in .git/hooks. So if you're not familiar with this feature be sure to check out this directory and peruse the examples.

Benjamin Meyer's git-hooks project provides developers with an easy way to manage Git hooks within three convenient locations, including inside Git repositories, within your home directory, and globally. Meyer reasons this capability can be very useful in situations where a team member would like to execute personalized hooks such as not allowing the team member to push changes to a remote repository during late night hours. Likewise, the global hook integration allows organizations to institute global hooks such as running a spell checker when entering a commit message.

6. Git Project Management Using Tower

Although a relative newcomer and in fact still in beta, Tower is shaping up to be a truly impressive Git client for OS X users. Sporting a slick interface (see the website for several screenshots) and a ton of useful features, Tower is certainly a project to watch in the coming months.

7. Review Projects Via the Web with Gitweb

Just as millions of PHP and MySQL developers use phpMyAdmin to manage MySQL databases, so can you use Gitweb to browse your Git repositories using a convenient Web-based interface. Among all of the usual project-browsing features, such as viewing branch-specific logs and the changes made in conjunction with a specific commit, you can even configure Gitweb to generate project-specific RSS feeds.

See the Gitweb homepage for more information about this useful project.

8. Use Git and Visual Studio with Git Extensions

Although I haven't developed .NET applications for several years now, Visual Studio remains far and away my favorite IDE, offering a stunning array of features, which are sorely missing in many other programming environments.

If you're a Visual Studio user and would like to manage your .NET projects in Git, you're in luck. Git Extensions is a Visual Studio plugin (compatible with VS 2008 and 2010) that allows you to carry out all of the usual Git commands from a convenient user interface. In addition to checking out the previously linked-to GitHub link, also see additional information about this project on its Google Code page.

9. EGit

The Eclipse IDE has long been known as a one-stop shop for developers seeking a unified interface for all aspects of the software development process. Thanks to an active plugin development community, not only is Eclipse a great IDE for creating applications using your favorite programming language (Java, JavaScript, C++, Python and PHP are just a few of the many supported languages), but it can also be used for designing UML diagrams, analyzing and profiling code, and wireframing, among other capabilities.

Within the Eclipse Marketplace you'll also find the Eclipse Git plugin EGit. Although still classified as an incubator project, EGit has quickly climbed the charts to become the fifth most downloaded plugin during the past 30 days (at the time of writing).

Lars Vogel has put together a comprehensive tutorial explaining how to install and use EGit, including information about integrating EGit with GitHub.

10. Coloring Commits with Flashbake

I use Git to track not only my software projects, but also all of my writing projects, including this very article. In fact, it can be such a valuable tool for writers that I devoted a recent article titled 10 Ways Git Version Control Can Streamline Your Writing Projects to the topic.

If you'd like to experiment with managing your own writing projects in Git, check out flashbake, a tool originally created by Thomas Gideon for science fiction author Cory Doctorow. Flashbake streamlines the commit process by automating the generation of commit messages each time your changes are committed to the Git repository. But rather than merely commit a placeholder message, flashbake can be configured to include commit messages that include data related to the commit timestamp, such as the weather details, recent Twitter posts, iTunes songs you recently listened to, and your current time zone.

Dive Into HTML5

HTML 5 Demos

HTML 5 Forms Demo

HTML 5 Video

HTML5 Doctor

HTML5 for Beginners

HTML5 Gallery

The WHATWG Blog

When can I use

WTF is HTML 5

CSS3 Previews

HTML5 and CSS3 Experiments

HTML5 Canvas

HTML5 Readiness

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

Coding a CSS3 & HTML5 One-Page Website Template

Coding A HTML 5 Layout From Scratch

Create Windows 7 Start Menu Using CSS3 Only

CSS3 Gradient Buttons

Quick Tip Learning About HTML5 Local Storage

Structural Tags in HTML5

CSS 3 Cheat Sheet

CSS Properties Index

HTML 5 Cheat Sheet

HTML 5 Pocket Book

HTML5 Canvas Cheat Sheet

HTML5 Forms

HTML5 id class name cheatsheet

HTML5 Visual Cheat Sheet

Border Radius

CSS3 Generator

CSS3 Gradient Generator

CSS3 Please

Widget Pad

HTML5 introduces new methods for enabling a web site or web application to function without a network connection. When you’re working on a mobile connection and your signal drops, or you just have no connection to the internet for whatever reason, having some level of access is better than nothing. In this article, we’ll look at how the application cache can store resources to be used by the browser when it’s offline, granting your users partial access to your web site or application.

The application cache is controlled by a plain text file called a manifest, which contains a list of resources to be stored for use when there is no network connectivity. The list can also define the conditions for caching, such as which pages should never be cached and even what to show the user when he follows a link to an uncached page.

If the user goes offline but has visited the site while online, the cached resources will be loaded so the user can still view the site in a limited form. By carefully considering the contents of your manifest file, you can offer a suitable web experience to a disconnected user.

The manifest file

Let’s start with an example of a full manifest file. (Don’t worry, I’ll explain it all in detail!)

CACHE MANIFEST
     
# This is a comment

CACHE:
/css/screen.css
/css/offline.css
/js/screen.js
/img/logo.png

http://example.com/css/styles.css

FALLBACK:
/ /offline.html

NETWORK:
*

An example application cache manifest file

Each directive is placed on a new line, with comments prefixed by a hash (#). The first line, CACHE MANIFEST, tells the browser that this is a manifest file. The uppercased lines with trailing colons are section headings.

There are three different sections in a manifest file:

CACHE

A list of explicit URLs to request and store

FALLBACK

What to do when an offline user attempts to access an uncached file

NETWORK

Which resources are available only while online

Each section serves a specific purpose that you must understand in order to successfully and effectively cache your resources.

CACHE

The CACHE section is considered the default — i.e., if no section heading has been defined, the browser will assume this is the CACHE section. Beneath this heading, you can list URIs to resources you want the browser to download and cache for offline use, including URIs hosted externally.

CACHE MANIFEST

/css/screen.css
/css/offline.css
/js/screen.js
/img/logo.png

http://example.com/css/widget.css

Telling the browser to cache some stylesheets, an image, and a JavaScript file

In this example, I’ve omitted the CACHE: heading to take advantage of the default behaviour. I have provided the browser with four paths relative to the root of the domain plus one external resource. When the browser downloads the cache manifest file, it will read these five resources, fetch them over HTTP, and store them for later use.

Every single resource that you want to cache explicitly should be listed here, right down to the last image. The browser is not aware of a resource unless you provide the full path to it. This means you can’t use wildcards. If you list /images/* as a resource, the browser will request that URI as if you typed it into your address bar.

But don’t run off and shove URIs for every single page on your site into your manifest! When a user visits a page that points to the manifest file, that page will also be cached. This means that if you want to allow users access to pages they’ve already viewed, just make those pages point to the manifest file and the browser will cache them appropriately.

Now let’s tell the browser what to do with uncached resources.

FALLBACK

The FALLBACK section tells the browser what to serve when the user tries to access an uncached resource while offline. Because of this, it looks a bit different than CACHE and NETWORK. It contains two values per line, separated by a space. The first value is the request URI to match, and the second is the resource sent upon matching. It caches the resource on the right for offline use, so this should be an explicit path.

Lost? Take a look at this example:

CACHE MANIFEST

FALLBACK:
/status.html /offline.html

Declaring a FALLBACK section

On the line below FALLBACK:, we have the URI “/status.html” followed by a second URI, “/offline.html”. We’re telling the browser that when an offline user requests a URI matching “/status.html”, it should instead serve the cached file “offline.html”.

However, the FALLBACK section can be far more powerful:

CACHE MANIFEST

FALLBACK:
/ /offline.html

Matching all resources

In this example, I’ve dropped “status.html” and simply provided “/” as the request URI to match. Now when an offline user requests a resource that matches “/”, he will be served “offline.html” in its place. So if the user clicked on a link for “/status.html”, “/about.html”, or even “/my/nested/resource.html”, the browser would match the “/” at the start and serve up “offline.html”. Since I’ve used the root path, every uncached resource under this domain will point to “offline.html”.

Unlike the CACHE section, both the FALLBACK and NETWORK sections can use wildcards to aid their URI matching.

It’s no use pointing uncached images at an HTML file. That’s just never going to work. So let’s fix it:

CACHE MANIFEST

FALLBACK:
/images/avatars/ /offline_avatar.png
*.html /offline.html

A smarter fallback declaration

The first line tells the browser to serve “/offline_avatar.png” in place of user-uploaded avatars. The second rule then matches all .html files and uses “offline.html” as their replacement.

Remember when I said that any document referencing the manifest will also be cached? Well, you can use this to your advantage! You can cache each page the user visits while online so that they will have access to that page while offline. Then anything they didn’t view will be caught by the FALLBACK section. This keeps you from explicitly stating you want all your pages cached, and, more importantly, avoids the huge performance penalty of serving all the resources you want cached every time someone first visits your site.

NETWORK

Finally, we have the NETWORK section, used to tell the browser explicitly which resources are only available while online. By default, this uses the wildcard *, meaning all resources that are not cached will require a connection.

CACHE MANIFEST

NETWORK:
*

Adding a NETWORK section

You can explicitly define resources not to cache by providing a list of URIs — essentially a whitelist of online-only assets.

CACHE MANIFEST

NETWORK:
register.php
login.php

Excluding certain pages from caching

Serving the manifest

You can reference a manifest file on a web page by adding the manifest attribute to your opening <html> tag. The browser will only cache pages that include this attribute (in addition to those specified in the manifest itself, though in that instance, the user would have to visit a page including the manifest in order for the browser to be aware of it).

<!DOCTYPE html>
<html lang="en" manifest="/offline.manifest">
  // your html document
</html>

Referencing the manifest file from an HTML page

The linked file should also be served with a MIME-type of text/cache-manifest. If you’re using Apache as your web server, add this to your .htaccess file:

AddType text/cache-manifest .manifest

And there you have it! Supporting browsers will retrieve the manifest file and cache each item on the list for offline use. Won’t your parents be proud?

Triggering a cache refresh

Once a cache has been successfully downloaded, the browser will retain those assets until either the user clears the cache or you trigger an update. Triggering an update with your manifest file requires that the contents of that file change, not just the assets themselves.

Updating the assets on your server will not trigger a cache update. You must modify the manifest file.

If you’re adding or removing resources completely, you’ll have to edit your manifest file anyway. But what if you’re just amending an already cached stylesheet?

This is where comments come in handy. Just throw in a simple version number comment that you change when you want to trigger an update:

CACHE MANIFEST
     
# Version 9

CACHE:
/css/screen.css

A version comment in a manifest file

The next time you want to trigger a cache refresh, just increment the version number. When the user next visits the online version of a page including this manifest, it will re-download the manifest file, notice the change, download the listed assets, and purge the existing cache.

Browser bug: Firefox caches the manifest file itself and will not update it even if the manifest has changed on the server. With some server config wizardry, you can tell browsers that the cache of the manifest file is instantly invalidated and should be requested from the server every time it’s referenced. Add this to your .htaccess to put Firefox in its place:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/cache-manifest "access plus 0 seconds"
</IfModule>

Conclusion

The application cache is a powerful beast, and to tame it you need to be clear on what’s involved. Give thought to your CACHE, FALLBACK, and NETWORK sections to provide a suitable offline experience to your users.

In a future article, we’ll show you how to use the applicationCache JavaScript object to manipulate the cache. Until then, this should be enough to get you started on the path to offline web content.

You can see a live demo using the application cache over on Doctor Remy’s HTML5 Demos. Happy caching!

O World-Wide Web Consortium (W3C) mostrou a nova logomarca do HTML5

The web design industry has been on a climb over the past decade. Designers are needed on new startups every day, and considering the influx of social media and blog designs it's a popular trade to consider.

Popular Design Magazines & RSS Feeds

The first logical tool would be RSS feeds and magazine subscriptions. Web design and development blogs are some of the most popular communities on the web. They offer useful tutorials, tips, tricks, and articles relating to the latest and greatest web design trends.

It's simple to keep up-to-date with this technology. A Google Reader account is the first that comes to mind, allowing you to sort and rank your subscriptions based on labels (design, tutorials, programming). Blogs in the community provide excellent resources for new information in such a changing industry.

You may also consider visiting popular video streaming websites like YouTube or Vimeo. They contain countless tutorials ranging from beginner to expert in difficulty. No designer is perfect and nobody actually does "know it all" when it comes to digital design work. Keeping up with the curve is a creative way to follow new trends and be exposed to the latest and greatest technology - even if it's only for an hour a day.

You'll also ingrain yourself as part of the web design community over time. Leaving comments and re-tweeting design articles helps connect you with other designers from around the globe, all through simple tools which didn't even exist 10 years ago.

Color Matching for Designs

Whether you're an icon designer or branding artist, color theory is an essential skill. If you haven't got formal knowledge of colors or design theory don't fret, there are plenty of tools online to help.

ColorSchemer is my personal favorite when it comes to selecting a palette to work with. There are many pre-designed color schemes from previous designers which have been shared throughout the community, but you can also mess around with your own concepts to create a beautiful mockup. Color Blender is another useful tool which helps to match similar colors.

This is something you may consider using when you've got a certain shade of blue or green you want to work with but don't know how to take the next step. It doesn't require much work on your part, the color matching software will determine a select few sets to implement and mess around with.
There are many other popular tools out there for color matching and palettes and most come with the best price tag - completely free! Finding new tools online to help expedite the design process is always a welcome aspect to any day. This is especially the case when they're free of charge and simple to utilize.

Free Icon Resources

Icons have become a signature part of the new web. Designs today consist of social media icons, comment and user profile icons, and many other interface buttons and widgets. The most notable set is the infamous famfamfam collection which has been done to death by now.

There are many free icon search engines which have started to pop up all over the web and they're the perfect tool for finding just the right icon set to complement your design. FindIcons is one of the newer engines containing just over 300,000 unique icons for download. You can find most of them in different sizes and can download the files directly from the site in both .png and .ico format.

These search engines have revolutionized the way we create mockups. No longer do you need to be a master at Adobe Photoshop or Fireworks to create a custom icon set for your website. Modern icon search engines have become mainstream media tools for designers. You may also consider Icon Finder as another tool in your belt.

The best part of these engines is how easily accessible the communities are. Icon designers are able to upload their own icons and share them with the world - hopefully gaining a bit of notoriety out of the process as well. These sites are just one step closer to an open and secure web and seem to be growing in popularity every day.

CSS3 Made Simple

With the recent support for CSS3 properties coming to most major browsers we've seen an influx in interesting design concepts. Web designers have become much more crafty in utilizing these new selectors.

However the knowledge necessary to create such effects is daunting. It could potentially require a few weeks of studying to master everything CSS3 has to offer. Because of this CSS3 Generator has to be one of my favorite tools as a modern designer.

You select a type of effect you're trying to create from a drop-down list, modify some settings and get a block of CSS code to copy. Effects include rounded corners, text and box shadows, gradients, transitions and so much more.

You're also given a small display of icons letting you know which browsers the code is compatible with. Hovering over each one displays a tooltip of which versions the code will work on, thus saving even more precious time during project work.

Although I haven't seen anything similar for CSS2 or XHTML markup you never know when a new app will spring up on the web. For now CSS3 Generator has been an enormous help in my day to day work. I can't imagine finishing a design project without it!

Collaboration Tools for Designers

Collaboration and teamwork are just as important in the business world as they are anywhere else. Web designers especially must communicate with many different groups - clients, developers, and even other artists to name just a few.

Some of the simplest tools can often be used to your advantage. GTalk, or Google Talk, is Google's prime IM client which connects directly into your Google account. Many professionals in the Internet industry use this as a means for communicating online and via video chat to collaborate on ideas for projects.

It's completely free and will even run right from your Gmail account page! This means you can send a chat invite to any contacts you've added into your GMail account and they'll show up in your GTalk list. Communication at its finest in our booming Internet-fuled era.

ConceptShare makes Design Collaboration a Breeze

Many have not heard of ConceptShare and even fewer are using it, but the web app has been rising in popularity over the past few years and garners a strong foothold in the business design industry.

The idea is simple - create a workspace where you can share important design updates and documents with clients from all around the web. This removes the clutter of e-mailing new screenshots or updates between multiple people and trying to keep everything up to speed.

ConceptShare allows you to send invites to individual people to join only specific work spaces. This means you can run multiple projects for different clients in 1 single account (talk about productivity!). You can share documents and spreadsheets, basic image formats, video and even complex docs such as PSD and AI files.

The services does run a free trial allowing for 1GB of total space and 15 simultaneous projects. However if you're really interested in utilizing the power of this application you can pay for any of their advanced plans. This allows for sharing upwards of 5GB+ and inviting clients into over 50 project workspaces.

If you'd like to learn more check out their project tour for outlines and details about more of their services. They also have a small tutorials section for newbie looking to learn more about the process.

Web Design & CSS Inspiration Galleries

One of the worst situations to be in as a designer is stuck in a creative rut. Staring at a blank page in Photoshop, frozen and unable to choose a first move. Web inspiration galleries started popping up for just this scenario and have been extremely influential in my own design works.

There's nothing wrong with hitting a brick wall when it comes to design. To be fair it happens to even the most skilled digital designers. Checking out galleries for inspiration and creativity can be a great way to boost morale and take a load off your brain. Website mockups generally borrow similar elements and concepts between each other. It's truly about the graphical details and placement which separates each unique design from the rest.

This is where borrowing creative potential from others can get interesting. There is certainly a difference between finding motivation and creativity in a few blog designs vs blatantly stealing and ripping off another site's concept. Utilize inspiration galleries as tools to get the creative juices flowing and take it to your own level from there.

You may also consider using these galleries as a showcase for your own design work. Many directories such as CSS Drive and Best Web Gallery allow for user submissions of web designs. If you have a new concept art you'd like to share and read feedback it's not a bad idea to share your creativity with the design community. Your site may even inspire another designer's works and start an inspiring chain of causality.

Wireframe Layout Creations

Creating and testing out a website's wireframe design is an important part of the initial design process. Many graphics and branding artists will skip over this and dive right into glossy buttons and shiny logos, but creating a structure for your design can be a huge time saver.

One set of tools useful for wireframing are stencil kits. These contain graphics for web boxes, scrollbars, generic browser submit buttons and a ton more. These help take up the space you need based on placement in relation to other elements on the site. You can find many completely free from all over the web.

Grids are also applicable when it comes to designing a structure for your site design. Many web designers in the modern era work through a 960 grid system. You can find tons of examples for Photoshop grid templates everywhere.

These can help expedite your initial workload tenfold by starting with a set grid of pixels to work on. Many designers will create these and pass them around free for download, so they're truly not difficult to find & work with. These templates are a great help when it comes to browser testing for web standards.

Testing your Design with Browsershots

An annoying little pain during the design and development stages of creating a website is consistency amongst all browsers. This has always been a problem in web development and although there are some useful pieces of code and style to help out, it's an uphill battle.

Working with Browsershots should save you a lot of time and frustration in your design process. The site takes screenshots of how your design looks on multiple browsers and operating systems to display side-by-side. It doesn't provide immediate results and takes some computing time to fill a URL request, but the return is fantastic and provides unspoken ease for web designers.

There are more options for browsers than anybody has ever heard of and a set of 4 major operating systems - Linux, Windows, Mac, and BSD. All of these settings may be a bit overkill for the average designer. Luckily the app allows you to pick and choose which browser shots you want. It goes without saying the less selections you choose for snaps the quicker your shots will come in through the queue, so tread carefully.

Conclusion

These are just a few of the countless tools out there on the web. As the new web grows and expands into new mobile and tablet markets we're going to see enormous changes in the web design industry. Digital designers will be the leaders into uncharted territory as the future of the Internet presses onward.

Utilize these tools for what they are - simple applications to help create lavish designs. There are plenty more out there and new ones are being created every day. Be on your toes, it's the one trait which keeps web designers ahead of the game.

What tools do you utilize in your daily design work? Do you have any that weren't mentioned in the article? Share your top tools as a designer and why they're so important to your productivity.

Source