Site Map Generators

Posted by & filed under Programming, Web Development.

The following are links to tools that generate or maintain files in the XML Sitemaps format, an open standard defined on sitemaps.org and supported by the search engines such as Ask, Google, Microsoft Live Search and Yahoo!. Sitemap files generally contain a collection of URLs on a website along with some meta-data for these URLs. The following tools generally generate “web-type” XML Sitemap and URL-list files (some may also support other formats).

code.google.com/p/sitemap-generators/wik…

CRUNCH LESS into CSS the easy way

Posted by & filed under Web Development.

Everyone loves LESS. After all, who isn’t tired of typing all the browser prefixes to make some kick-ass CSS3? But don’t you wish you could organize your LESS/CSS styles into some well-organized libraries, and then just serve a single file to the browser? Or render your page without relying on JavaScript or command-line geekery? Wouldn’t it be great if you could just edit LESS, and then save CSS?

crunchapp.net/

Lost Type — Font Co-op

Posted by & filed under Web Development.

The Lost Type Co-op is a collaboration between Tyler Galpin and Riley Cran. It was founded with the intention of providing unique and quality fonts based on a pay-what-you-want model. All designers get 100% of the donations their font receives.

losttype.com/browse/

CSS Sprites

Posted by & filed under Javascript, Programming, Uncategorized, Web Development.

I found a few handy resources for generating CSS sprites. Using sprites and sliding CSS “windows” it is possible to consolidate images into one single image, and then only display the portion of the main image that contains the image to display.

Why would you do all of this? HTTP Requests. Each time your browser has to make a request to the server for a resource, there are multiple steps occurring. Each of these requests is guaranteed to take a minimum about of time to happen plus the time it takes to transfer the actual data payload (in this case a image).

So in our example scenario, let’s say we have 35 images on our page and one CSS file linked in for styling the site. When a user visits the website, their browser makes one request for the actual web page, one request for the CSS file, and 35 separate requests for each image. So by creating a single CSS sprite out of the 35 images, we are effectively reducing the number of requests by 34. This will help page load time quite a bit. Also, similar techniques can be applied to other web resources like js files, and CSS files.

It’s not so much that these tools are required to do CSS sprites, but they do make creating them much easier.

instantsprite.com/

spriteme.org/

WordPress theme framework

Posted by & filed under PHP, Web Development.

Roots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate, Blueprint CSS (or 960.gs) and Starkers that will help you rapidly create brochure sites and blogs. It has built in support for HTML5 Boilerplate, Twitter’s Blueprint CSS, and 960Grid, along with a whole host of handy features.

www.rootstheme.com/

CSS with LESS

Posted by & filed under Programming, Web Development.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.

Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.

Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example bellow.

Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.

Are some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.
lesscss.org/

Converting a white background to transparent

Posted by & filed under Web Development.

Here is a great method to remove the background of a image without dealing with the ugly edged the magic wand tool can produce.

1. copy the image to a new layer and delete the background layer
2. copy the image to a new layer again and INVERT it
3. copy the inverted layer into the clipboard, and switch off its visibility for now
4. go back the the first image and create a layer mask
5. press ALT whilst clicking on the mask thumbnail
6. paste the inverted image, then click back to the image thumbnail in the layer palette
7. duplicate this new layer until necessary (5 times?) and delete the inverted layer you created at the start
8. merge down the layers one by one (Ctrl-E) choosing to “apply mask” each time

HTML5 Boilerplate Template

Posted by & filed under Programming, Web Development.

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.

After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.

Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.

html5boilerplate.com/

Link Dump

Posted by & filed under Javascript, Link Dump, PHP, Programming, Web Development.

Liiiinkiii liinki!!i

Iconic is a minimal set of icons consisting of 136 marks in raster, vector and font formats — free for public use.
somerandomdude.com/projects/iconic/

A quick and simple web design image placeholder service.
placehold.it/

Linked select boxes jQuery plugin
remysharp.com/2007/09/18/auto-populate-m…
Stackoverflow question for above:
stackoverflow.com/questions/431876/linke…

Datatables!!!
I’m building the 2.0 version of Ipscheme on this:
datatables.net