Owltastic — by Meagan Fisher: "I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted to tweet about this technique because it’s simple and awesome, but to my surprise I couldn’t find a good, quick tutorial that covered the use of both text and box-shadow, along with RGBA. So I decided to create one."
Sunday, December 27, 2009
Thursday, December 24, 2009
Time to stop showing clients static design visuals | For A Beautiful Web
Time to stop showing clients static design visuals | For A Beautiful Web: "Time to stop showing clients static design visuals
Demonstrating our designs to clients as XHTML/CSS pages rather than as static Photoshop or Fireworks has streamlined our workflow and helped us to set and manage a client’s expectations better than ever before."
24 ways: Make Your Mockup in Markup
24 ways: Make Your Mockup in Markup: "Die Photoshop, die
Some of you may be wondering, “what’s so bad about using Photoshop for the bulk of my design?” Well, any seasoned designer will tell you that working in Photoshop is akin to working in a minefield: you never know when it’s going to blow up in your face."
Too bad the site this article is on is really terrible, at least for my browser (Chrome), that's not the fault of the author.
Gmail Backup | Safer is better
Gmail Backup | Safer is better
toll for backing up your gmail account. works under Linux and Windows and has a command line version too.
CSS performance: UI with fewer images / Stoyan's phpied.com
CSS performance: UI with fewer images / Stoyan's phpied.com: "Often performance improvements come with their drawbacks, sometimes improving performance causes pains in other parts of the development process or strips stuff from the final product. Sometimes there's even a conflict where you have to pick: slow, unusable and beautiful or fast and looking like hacked with a blunt axe. But it doesn't have to be this way.
This post outlines some approaches to achieving common UI elements using CSS tricks in as many browsers as possible while using as fewer images as possible. Some of the tricks are brand new, some are very, very old, IE5.5. old. They all have in common the 'fewer or no images' mantra. Using fewer images comes with some pronounced benefits:
less time spent in Photoshop
lighter page, less HTTP requests, less image payload
fewer elements in the sprite to maintain (and sometimes fewer sprites) which means longer lived sprites with fewer updates and cache invalidation
generally easier maintenance - it's much easier to change a color value than to update and push a new image version
Sometimes some browsers may not be fully supported but that's ok - as long as there's progressive enhancement and the basic page is usable, people rarely notice 1px glows and other ornaments."
Wednesday, December 23, 2009
Shindig - Welcome To Apache Shindig!
Shindig - Welcome To Apache Shindig!: "Apache Shindig is an OpenSocial container and helps you to start hosting OpenSocial apps quickly by providing the code to render gadgets, proxy requests, and handle REST and RPC requests.
Apache Shindig's goal is to allow new sites to start hosting social apps in under an hour's worth of work."
An integrated Atlassian thanks to OpenSocial (Q&A) | The Open Road - CNET News
THis company uses OpenSocial for integrating its products, not for linking with other social networks. It uses Apache Shindig as its Google Gadget container.
Simons: One, it's open. OpenSocial's openness means it is consistently benefiting from the contributions of the community. Dozens of companies now are starting to work with it, from Atlassian to Google, and the spec is evolving quickly. Gadgets are an important ongoing part of Google's strategy across several products, so our customers benefit from Google's investments and innovations, as well as our own.
Two, easier for developers to grok. Writing portlets for Jira was an art form. Gadgets are far more pervasive, and the technology underpinning them--HTML and XML over HTTP--is the linqua franca of the Web. OpenSocial meant our products were immediately more accessible to more developers.
Three, instant interoperability. We not only got interoperability within our own portfolio, but with other OpenSocial gadget containers, like iGoogle and Gmail, and with hundreds of other OpenSocial gadgets, from Box.net to Remember The Milk."
CSS Techniques I Wish I Knew When I Started Designing Websites - Noupe
CSS Techniques I Wish I Knew When I Started Designing Websites - Noupe: "CSS Techniques I Wish I Knew When I Started Designing Websites"
Derek Powazek - Spammers, Evildoers, and Opportunists
Derek Powazek - Spammers, Evildoers, and Opportunists: "Search Engine Optimization is not a legitimate form of marketing. It should not be undertaken by people with brains or souls. If someone charges you for SEO, you have been conned."
Tuesday, December 22, 2009
Object-oriented CSS
The most confusing thing about OO-CSS is its name and some of the terminology used which is borrowed from Object Oriented programming.
It might have been better to have called Component Based CSS because it is way of composing layouts out of components which have no coupling to each other. Instead of true inheritance, new components can be extended through compositing.
Discussions - Object Oriented CSS | Google Groups
OOCSS video available Hi Guys, Just wanted to let you know the video from Web Directions North about OOCSS has been published over at yahoo developer network. [link] Cheers, Nicole By Stubbornella - Mar 24 - 1 message -
w3c beta site live, uses OOCSS The w3c beta website launched! It uses hybrid-OOCSS. I was very lucky to be able to contribute to the scalability and performance of the front-end. They are seeking feedback and testers. More info at [link] Cheers, Nicole By Stubbornella - Mar 21 - 1 message -
Standard module format CSS Where can I find the css for the standar module format? Thanks By byqsri - Mar 19 - 2 messages -
Designers weighing in on Object Oriented CSS Hi All, I've been pimping OOCSS at SXSW in Texas this week. :) I fly back to California today. It was great to meet some of you while I was here. Just a warning, I'm *way* behind on email (both to me and to the group)... time to start catching up. Smashing magazine has launched a poll on OOCSS. I'm really excited,... more » By Stubbornella - Mar 19 - 2 messages -
the AG test, sensible defaults, and vertical rhythm Hi again Nicole - If the default line-height is 16px, why are most styled elements in content.css given 5, 10, or 20 pixel padding? It seems to break the vertical rhythm of the page, so that different columns of text don't share a common baseline. This is visible, for example, in the AG test that's included with the current download.... more »
OOCSS testing Hi, I am a front end developer in USA and will love to be part of OOCSS. I will like to help in testing and discussion. Regards, Vinod By vinod - Mar 16 - 2 messages -
Something Good Hi Stubbornella, After looking at the slide show, I think you are on to something really good here. It will be interesting to see how it develops. I have some questions about how best to use the templates and grids in a fixed width setting. I know if I just assign a fixed width to "page" everything under page... more » By Greg Fuller - Mar 13 - 4 messages -
avoiding the cascade Hi - I'm primarily a php programmer, but I've got love for the front end. When I'm writing PHP or other object-oriented code, rather than reuse code implicitly (by "inheriting" from another class), I prefer to be explicit, by actually feeding one object to another ("composition over inheritance," a pretty basic OOP rule of style). Avoiding inheritance... more » By jared - Mar 12 - 3 messages -
Templates I'm a Programmer that is obsessed with OOP, I separate dang near everything that I have into a new framework. It doesn't matter if it's a different motivation behind the same idea, or a different name for my functions. I swear, I've been addicted since I began. I got a wiff of OOCSS I've decided to dedicate a portion of time to... more » By Jon - Mar 11 - 4 messages -
can main be moved before left & right cols? Hi All, I have adjusted the template trying to get main above the cols in mark up and between the cols example <div id="bd"> <div class="main"> <h2>Main Content</h2> <p>but remian inbetween lef and right not above</p> </div> <div class="leftCol"> <h2>Left Column</h2>... more » By sams - Mar 10 - 8 messages -
Progressive rendering via multiple flushes / Stoyan's phpied.com
Perceived page loading time is just as important as the real loading time. And when it comes to user perception, visible indication of progress is always good. The user gets feedback that something is going on (and in the right direction) and feels much better.
via phpied.com
Using chunked HTTP1.1 to improve perceived delivery times
Daring Fireball: Why the HTML5 'Video' Element Is Effectively Unusable, Even in the Browsers Which Support It
Not exactly unusable but these are certainly valid points, there is a js workaround
OAuth WRAP support in FriendFeed for feedback - Bret Taylor's blog
As David Recordon mentioned on the Facebook Developer Blog, the Facebook Platform team is working to move Facebook Connect over to OAuth over the next year. As a part of that effort, we have been working with Google, Microsoft, Yahoo!, and a number of other engineers on the OAuth WRAP standard, which aims to be much simpler to implement than the existing OAuth standard.
via bret.appspot.com
This looks like a really simple thing to implement when compared to the original OAuth standard. Instead of needing signatures this protocol uses https. here is an his example code: http://github.com/finiteloop/friendfeed-wrap-example/blob/master/friendfeedwrap.py
Monday, December 21, 2009
Open Colour Standard: free/open alternative to Pantone Boing Boing
Open Colour Standard: free/open alternative to Pantone: "'What we have, then, is a venerable, widely supported, but largely inflexible and very expensive de facto standard. It has a huge impact on both print and digital media, not to mention the clothes you wear, the color you paint your living room, even the specific shades used to define healthy dirt or high-grade orange juice. It is, in short, a bloated monopoly eating up more and more of the color market... If [Open Colour Standard] works, this effort could open up spot color, make open-source software more viable for pre-press, and maybe even inspire a little kitchen table chemistry. Most importantly, it would take the cross-platform treatment of color out of the hands of a private company and put it where it belongs, with users.'"
Persistent Trees in git, Clojure and CouchDB � EclipseSource Blog
Persistent Trees in git, Clojure and CouchDB � EclipseSource Blog: "I have to admit I found it a bit eerie seeing a single pattern pop up in so many different places. It may be just an idea whose time has come (similar to Garbage Collection a few years back). Or it may be just that now we simply have enough memory and computing resources at our disposal, which allows us to never have to delete something from the record, but instead only add incrementally. And oftentimes the history of data is just as interesting as the data itself. The benefits of immutability may also be a good way to tame the concurrency beast in the years to come."
Sunday, December 20, 2009
Charlie's Diary: Gadget Patrol: 21st century phone
Charlie's Diary: Gadget Patrol: 21st century phone Very interesting analysis of the decade's transformation of the mobile sector. Google is set to transform telcos into raw-data ISPs.
Saturday, December 19, 2009
OpenID on App Engine made easy with AEoid - Nick's Blog
OpenID on App Engine made easy with AEoid - Nick's Blog: "I'm pleased to present AEoid, a new App Engine library that aims to make user authentication with OpenID on App Engine simple."
CSS Mojo: Adding Polish To Your Pages
CSS Mojo: Adding Polish To Your Pages: "CSS Mojo: Adding Visual Polish To Your Pages" Elegant rounded corners in CSS.
Stubbornella � Blog Archive � Object Oriented CSS video on YDN
Stubbornella � Blog Archive � Object Oriented CSS video on YDN: "Object Oriented CSS: for high performance websites and web applications."
Friday, December 18, 2009
4.10.5.2 Common input element attributes — WHATWG HTML (Including HTML5)
4.10.5.2.6 The
multipleattributeLast call for comments
Tests: 0
Demos: 0
Latest Internet Explorer beta: no support whatsoever
Latest Firefox trunk nightly build: incomplete support
Latest WebKit or Chromium trunk build: incomplete support
Latest Opera beta or preview build: no support whatsoever
JavaScript libraries, plugins, etc: no support whatsoever
The
multipleattribute is a boolean attribute that indicates whether the user is to be allowed to specify more than one value.The following extract shows how an e-mail client's "Cc" field could accept multiple e-mail addresses.
<label>Cc: <input type=email multiple name=cc></label>The following extract shows how an e-mail client's "Attachments" field could accept multiple files for upload.
<label>Attachments: <input type=file multiple name=att></label>
via whatwg.org
This feauture is supported in Chrome 4, Safari 4, and Firefox 3.6
App Engine JavaScript SDK
App Engine JavaScript SDK: "Welcome to App Engine for JavaScript! With App Engine, you can build web applications using the JavaScript programming language"
Wednesday, December 16, 2009
Tuesday, December 15, 2009
24 ways: Rock Solid HTML Emails
Before getting into the details, there are some uncomfortable facts that those new to HTML email should be aware of. Building an email is not like building for the web. While web browsers continue their onward march towards standards, many email clients have stubbornly stayed put. Some have even gone backwards. In 2007, Microsoft switched the Outlook rendering engine from Internet Explorer to Word. Yes, as in the word processor. Add to this the quirks of the major web-based email clients like Gmail and Hotmail, sprinkle in a little Lotus Notes and you’ll soon realize how different the email game is.
JSON Hijacking
If you request JSON
DO NOT use GET
or if you must, DO NOT return a JSON array.
return a JSON object.
The problem is that an array on its own is a valid javascript statement while an object is not (it needs to be assigned to something or passed to something). By returning valid javascript the request can accessed via a script tag instead of an XHR and executed. Excecuted arrays can be manipulated by malicious code.
I think this article should be renamed "JSON arrays considered harmful". Vulnerability currently only in "modern" e.g. Firefox, Chrome and Safari.
IE8 is too old fashioned.
DO NOT use GET
or if you must, DO NOT return a JSON array.
return a JSON object.
The problem is that an array on its own is a valid javascript statement while an object is not (it needs to be assigned to something or passed to something). By returning valid javascript the request can accessed via a script tag instead of an XHR and executed. Excecuted arrays can be manipulated by malicious code.
I think this article should be renamed "JSON arrays considered harmful". Vulnerability currently only in "modern" e.g. Firefox, Chrome and Safari.
IE8 is too old fashioned.
via haacked.com
Sunday, December 13, 2009
Big list of image optimization tools
Dec 12 This post is part of the 2009 performance advent calendar experiment (12 articles down, 12 more to go). Stay tuned for the articles to come.
Let's continue the topic of reducing file sizes started with the previous post and talk about making images smaller.
Engineer's guide to smaller images
Just to set the frame of the discussion - this is not about using Photoshop or setting the quality of the JPEGs and so on. I realize that we, web developers, wear many hats - we're designers, client/server coders, Apache/Linux admins, database heros. But this post is not about using image programs and assumes that you or your designer has already created the images to be used on the site with the appropriate colors, quality and so on.
Now, repeat after me: you should never take an image from the designer and put it up on the web.
Most often this image is bigger than it should be. It's not the designer's fault, it's usually the software used to produce the image.
You shouldn't put an image up on your server before running it through a few tools. These tools are free, open source, cross-platform and can be run on the command line, hence scripted and run in batches over a large number of files - by you, or even better, automatically by a build deployment process. It's OK to batch-run those files without human intervention, because these tools simply optimize the files, they don't change the pixel information, so the "after" images look exactly like "before", only smaller.
Selecting the right file format
The first step towards leaner images is to select the correct file format. There are three options:
- JPEG for photos. Photos contain millions of colors and smooth transitions of colors. Blue skies, clouds, sunset, your dog, lolcats - all photos.
- GIF is for the occasional "loading..." progress animation. This is it, no other uses for GIFs.
- PNG is for everything that's not a photo or an animation. That includes all icons, graphs, buttons, gradients, and what not. Any image with sharp transitions of colors. Think (but don't use for) text. Sharp transitions become "dirty" in JPEG.
PNG is an interesting topic for a follow up post, for now let's stop here. If it's not a photo, it should be PNG. An edge case is a screenshot for example. Depends on what's on the screen of course, but most often JPEG will give a smaller size if you can live with the artifacts around the sharp edges (like text).
Optimizing GIFs
Unfortunately many people still use GIFs even for non-animated images. That's a mistake. PNG is a superior format and yields smaller file sizes.
People still use GIFs because they think either that a/ GIF is smaller than PNG or b/ there's lack of support for PNG in browsers. These are misconceptions and I'll talk more about them tomorrow.
So, the way to optimize a GIF is to convert it to PNG.
You can use many tools to turn your GIFs to PNGs, including ImageMagick, PNGOut and OptiPNG.
# option 1: ImageMagick (if you know the filename) $ convert logo.gif logo.png # option 2: ImageMagick again (if you just convert all files in a directory) $ mogrify -format png *.gif # option 3: PNGOut $ pngout *.gif # option 4: OptiPNG $ optipng *.gifThese are just some of the options, I'm sure there are others.
After the conversion you can optimize the new PNGs like all other PNGs
Optimizing PNGs
There are various ways to write a PNG file. Unfortunately not all image editing programs do a good job at writing PNGs for the minimal file size.
Luckily, to fill the void, there's a great number of tools that excel in writing small PNGs. There are different ways to optimize a PNG:
- Stripping out "chunks" - PNG is an extensible format. Extensions come in the form of chunks and most chunks are not needed for the web.
- Reducing the number of colors and switching between PNG types - truecolor PNG, grayscale, palette...
- Chosing the best "filter". Filters are a pre-compression step. You can compress any type of file, but when you know the file is an image, you can do better. Filters are for this purpose.
- Optimizing the actual DEFLATE compression algorithm
Different tools specialize in one or more of these areas. So the more tools you run, the better the results will be. But you have to run at least one tool, always. You'll be surprised how unoptimized are most PNGs coming from common commercial image programs.
So, to optimize a PNG you shoul run as many of the following programs as possible:
# optipng (skip -o7 to run faster) $ optipng -o7 my.png # pngcrush (skip -brute to run faster) $ pngcrush -rem alla -brute -reduce my.png my.png.temp $ mv my.png.temp my.png # pngout - closed source, non-windows binaries here # (add parameter -s2 to run faster) $ pngout my.png # advpng (use -z2 to run faster) $ advpng -z4 my.png # deflopt - windows only $ deflopt my.pngOther tools to note include PNGrewrite, PNGNQ and PNGquant, but they are limited because they deal only with PNG8 (256 colors) files. PNGNQ and PNGQuant are actually converters from truecolor to PNG8, so they are not guaranteed to be lossless. PNGreqwrute is safe to use, it will just silently fail if the file has more than 256 colors, so there's nothing to lose.
Oh, and another, excellent tool - PNGOptimizer, windows-only has both command line interface and a GUI.
PNGSlim for the hardcore PNG optimization
If you're really serious about optimizing your PNGs, the tool is called PNGSlim. It's a Windows-only batch file that runs pretty much all tools above and runs them (especially PNGOut) with all kinds of parameters, hundreds of times. So it can take a while to run.
Optimizing JPEGs
JPEG is a lossy format (you lose information every time you save it, even if you choose 100% quality), but there are some operations that can be done losslessly - such as tweaking comments and meta information, cropping, rotating to 90, 180, 270 degrees. The tool that does this magic is called JPEGTran and is likely already on your unix/linux box. If not - here's how to install it (for Windows - get the .exe here)
So to optimize a JPEG losslessly you remove the meta information and optimize the so called Huffman tables. For bigger JPEGs (bigger than 10K) you can also convert the image to progressive coding.
# strip meta and optimize $ jpegtran -copy none source.jpg > destination.jpg # strip meta and convert to progressive coding $ jpegtran -copy none -progressive source.jpg > destination.jpg # keep all meta but still optimize $ jpegtran -copy all source.jpg > destination.jpgImportant note on stripping meta
Only strip meta information from images you own the rights for and have permission. Otherwise you're committing a crime. Photographers put important copyright information in meta markers.
Optimizing GIF animations
Remember - no GIFs other than animations. For animations, run GIFsicle (pronounced "yo' mama"
) berfore you put them up:
# GIFSicle $ gifsicle -O2 source.gif > destination.gifMore tools?
These are the core tools for image optimization. There's a number of wrapper tools that are more or less UIs on top of these, because there are people who don't like consoles (really?!). I'll list the few that I can think of, please comment if you know of others, especially for windows. It's nice to give nice UIs to give to designers so they can drag-drop optimize images too.
- smush.it, created by yours truly and Nicole Sullivan, now part of YSlow - runs pngcrush, jpegtran, gifsicle
- PageSpeed runs optipng, jpegtran
- PunyPNG - originally inspired by smush.it, but more advanced
- ImageOptim - Nice easy UI for Mac, runs most of the tools above (hope your company firewall doesn't block the site because of the domain name ;))
- PNGSquash another UI for Mac, runs advpng, pngcrush, optipng
- PNG Monster is for Windows, runs many PNG tools, you can drag/drop on it
- IrfanView - my favorite image viewer for Windows has a plugin to use PNGOut
- WP-Smushit is a WordPress plugin by Alex Dunae which sends all your image uploads to smush.it for optimization. Talk about easy!
More reading
Series of articles on YUIBlog:
presentations:
- Image Optimization - 7 mistakes
- Image Weight Loss Clinic - a 5-minute "ignite" case study of optimizing a web site. Spoiler: 30.15% image size reduction. Transcript here.
and more:
- Derek Tonn's graphics optimization blog
- Sergey Chikuyonok's excellent articles on optimizing PNGs and optimizing JPEGs
- Installing PNG tools on the Mac
- The book "Even Faster Web Sites" has a chapter written by yours truly and Nicole Sullivan
Thanks!
Thank you for reading. Now you have a whole lot of tools/toys to install and play with. Image optimization is an easy way to improve performance, it's just running a bunch of tools. You don't need to worry that the quality will suffer (so the designer won't be disappointed in you :)). So you can only win. You may win quite a bit, you may win just a little (anywhere between 5 to 30% savings is what I've seen on random live sites when I was working on and testing smush.it). The thing is you'll almost always win something.
And because it's human to forget to optimize the images before you push them live, do take the time to setup the optimization step as part of the automated deployment process.
And to summarize once again the steps of what this automated process would be:
- Convert GIFs to PNG. Then relax and take a deep breath (instead of flaming the unfortunate soul who created the GIFs) while you string replace "gif" with "png" in all your styleshets
- Run PNGs through optipng, pngcrush, pngout, any or all of the tools listed above
- Run JPEGtran
- Run GIFsicle
This entry was posted on Saturday, December 12th, 2009 and is filed under images, performance, tools. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Get notification for future posts: follow me on Twitter or subscribe to my RSS feed
via phpied.com
Saturday, December 12, 2009
Friday, December 11, 2009
sexybuttons - Project Hosting on Google Code
Sexy Buttons
Sexy Buttons is a HTML/CSS-based framework for creating beautiful web site buttons. These stylish, attention getting buttons can be used for calls to action wherever user interaction is desired. Compare Sexy Buttons with the standard browser buttons:
The framework is focused on being simple yet flexible and strives to be as easy to implement as possible.
via code.google.com
Thursday, December 10, 2009
Wednesday, December 09, 2009
Saturday, December 05, 2009
Browser Performance Issues with Charsets � Lickity Split
Browser Performance Issues with Charsets � Lickity Split: "Not defining a character set or where you do define it can cause poor performance for your website’s visitors. In this post we will discuss character sets and how best to define them to avoid web performance problems."
Friday, December 04, 2009
call GA_googleFillSlot(); after window.onload - Google Ad Manager Help
call GA_googleFillSlot(); after window.onload - Google Ad Manager Help Get Google Ad Manager code down to the bottom of the page for loading after page content.
New Google Analytics Snippet Aims to Reduce Page Load Time
New Google Analytics Snippet Aims to Reduce Page Load Time: "
Google released a new alternate Analytics snippet. Google writes that “Unlike a traditional installation, asynchronous tracking optimizes how browsers load ga.js so its impact on user experience is minimized. It also allows you to put your Analytics snippet higher in the page without delaying subsequent content from rendering.”
A new DNS resolver from Google
Google Code Blog: Introducing Google Public DNS: A new DNS resolver from Google: "Today, as part of our efforts to make the web faster, we are announcing Google Public DNS, a new experimental public DNS resolver."
Wednesday, December 02, 2009
Google censoring docs ?
Why was I zinged for inappropriate content?: "All of a sudden, I got a a notification 'The published version of this item cannot be shared until a Google review finds that the content is appropriate.' The 'share' link is disabled."
Tuesday, December 01, 2009
Hackers bought ad space directly from New York Times
Hackers bought ad space directly from New York Times | Graham Cluley's blog: "he hackers who exposed innocent internet users to malicious computer code, bought the advertising space on the New York Times website directly from the newspaper it has been revealed.
According to a report published on the New York Times website, the hackers posed as internet telephone company Vonage, and persuaded NYTimes.com to run ads that initially appeared as legitimate online adverts."
Subscribe to:
Posts (Atom)