…version of Raphael.js to generate SVG, and this gets the job done nicely ( SVG works on practically every modern browser, and Raphael falls back to VML on older Internet Explorer versions). Of course, you could use Canvas or any other HTML supported by WebKit just as well.
This is all great in your web browser, but not for emails. First off, obviously, JavaScript
is disabled in HTML emails, so we can't use that to generate the SVG on the fly; moreover
SVG only …
- Matthew Bass: Excluding iPads from the mobile-fu Rails plugin
- Ruby on Rails Tutorial News: Rails Tutorial Russian translation
- A Fresh Cup: Double Shot #1040
- Engine Yard Developer Blog: Building Mobile Web Applications With Kendo UI And Engine Yard
- Opscode Blog: The Making of #learnchef
- Giles Bowkett: How I Wrote My eBook
…I'll go over a big component of D3 and other javascript visualization tools - SVG or Scalable Vector Graphics.
Scalable Vector Graphics
SVG is an XML based, 2 dimensional open-standard that's been around since 1999. Since SVG graphics are vector based, they can be zoomed or scaled to any resolution without quality loss.
What can you do with it? SVG has a lot of functionality : paths, basic shapes, vertical text, text on a curve, gradient fills, masks, …
- ZURB: New on the Playground: Social Web Icons from Adam Fairhead
- Sneaky Abstractions: Barby 0.3: Ruby 1.9 compatible and pure-ruby SVG outputter
- a timocracy of one: Compiling Flex apps with external swc libs and RSLs using ruby and rake
- Global Nerdy: SVG Girl
- Labnotes: Graphite charts without the Graphite app
- Alex R. Young : JsChat and Ico Updates
…lazy), so I'll typically have an @2x sprite that I resize for all users. I'll also try to save highly compressed images in large dimensions for web so they look good when resized in the browser.
Some other, more obvious, techniques that I haven't mentioned above are making good use of CSS, @ font-face, icon fonts and SVG, instead of relying on bitmap images.
Have you any other advice designing for high-resolution?
- mir.aculo.us: 3 low-hanging fruit for retina websites
- A Fresh Cup: Double Shot #897
- New Relic: Designing and building a UI that works for all of your users, in all contexts
- Signal vs. Noise: Backstage: Basecamp for mobile
- Global Nerdy: Hello! HTML5 and CSS3-Manning's Deal of the Day (Feb. 21)
- Simone Carletti's Blog: Understanding the Unobtrusive JavaScript technique
Just design "retina-first", use SVG and modern CSS whenever possible and for bitmapped images, go high-resolution and let the browser scale down. Make exceptions when you have to.
Like this little tip? This is an excerpt from my ebook Retinafy your web sites & apps . Grab your copy now and have your web sites and apps retinafied in no time—avoid pitfalls like JavaScript libraries that do more damage than good and learn all the other tricks!
- The "Tech. Arch.": Creating Rich Interactive Web Apps With KnockoutJS - Part 1
- DevChix: Hello Meteor
- » Product Launch Blog: What I'm missing in HTML5 today
- Engine Yard Developer Blog: Mobile development with HTML5
- igvita.com: HTML5 Visibility API & Page Pre-Rendering
- Ruby Inside: The Mega Ruby News and Release Roundup for May 2012
Surveying a landscape of too many things to do and not enough time to do them in. Business as usual.
Unicon, SASSified - Use SASS and a bunch of JavaScript to serve HD images with fallback to PNG, given a folder full of SVG files.
Zeus - Rails app preloader for faster use of server and console, among other things.
Pogoapp - New app hosting service (now in beta) with buildpack compatibility.
Registration Dates & Competition Details - For the upcoming Rails Rumble.
- giant robots smashing into other giant robots: Towards a Retina Web: Follow-up
- Coding Horror: How to Hire a Programmer
SVG : the vector graphic format of the web. Ideal for icons, logos, and simple graphics. SVG works best with a PNG fallback for older browsers.
Icon fonts : consists in serving resolution-independent icons using @ font-face with a custom web font. The lack of pixel-level control and editability are easily made up for with more flexibility and ease of use.
Live Examples
Following the suggestion of some readers, I put together a live examples page showcasing most of the …
- Viget.com Blogs: Static Asset Packaging for Rails 3 on Heroku
- igvita.com: Debunking Responsive CSS Performance Myths
- Luigi Montanez: Web-Based Slide Decks Done Right
- Labnotes: Rounded Corners 379 - Clouds on a plane
- Alex R. Young : Pop: A Static Site Builder
- ZURB: Responsive Video Embeds On All Devices
In Learning D3 Part 5 , I waxed poetic about D3′s functions for drawing axis lines and labels. This time I'll talk about scales. Here's a pretty graph to go with it. This is similar to the earlier examples, but now drawn with SVG, using axes and scales. Ooh la la.
What are scales?
According to the ol' wikipedia, a scale is "a graduated range of values forming a standard system for measuring or grading something". In D3 though, scales are functions. "Functions that map from an input domain to an output range".
- Labnotes: Rounded Corners 381 — robot.js
- A Fresh Cup: Double Shot #866
- Saaien Tist: Clojure, visualization, and scripts
…D3 Part 4 , I briefly introduced SVG, the differences between SVG and Canvas, and drew a chart grid to illustrate how SVG's canvas goes from top/left to bottom/right.
D3 has a nice axis component for drawing reference lines, tick marks, and labels, which cleans up some of the code from the previous example. Here's another good tutorial on it. Here's the previous example, now drawn using d3.axis.
This example also contains tick marks as part …
- A Fresh Cup: Double Shot #880
- jlaine.net: New Zealand SVG Map in Black and White
- Labnotes: Graphite charts without the Graphite app
- Alex R. Young : JsChat and Ico Updates
- mir.aculo.us: Zepto.js in the wild: Typotheque's Greta Sans Type System Specimen
- Engine Yard Developer Blog: Building Mobile Web Applications With Kendo UI And Engine Yard
…library . All the power of D3, Crossfilter and SVG but with a simple API.
Charts rendered using dc.js are naturally data driven and reactive therefore providing instant feedback on user's interaction. The main objective of this project is to provide an easy yet powerful javascript library which can be utilized to perform data visualization and analysis in browser.
{00..99} Bash One-Liners Explained, Part II: Working with strings .
Acceptance An InfoQ…
SVG FTW
SVG images are a powerful but ill-understood image format. Browsers have pretty shaky support for them, and it doesn't help that there are several different formats for SVG. That's why we thought it was great that Adam built these as SVGs, and took the time to ensure they worked correctly with fallbacks to PNG for older browsers.
We asked Adam why he went ahead with SVG despite the challenges, and he answered: SVGs are really great for vector work, which …
- Sneaky Abstractions: Barby 0.3: Ruby 1.9 compatible and pure-ruby SVG outputter
- Lindsay Holmwood - auxesis' musings: Searching for the perfect presentation toolchain
- Giles Bowkett: Simplified 2D Particle Systems In Ruby & SVG
- jystewart.net | notes, tips and commentary by James Stewart: Week 131
- mir.aculo.us: I Can't Believe It's Not Flash!
- Alex R. Young : JsChat and Ico Updates