24 April 2014

The Ruby Reflector

Topic

Scalable Vector Graphics

  Source Favicon
By Scott Becker of Synthesis almost 2 years ago.
Email

…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, …

synthesis.sbecker.net Read
  Source Favicon
On ZURB 1 month ago.
Email

…with your markup and not in a JavaScript file or footer. The charts and graphs uses pure SVG so they can scale without losing quality. An easy Sass mixin helps easily create a simple monochromatic color scheme. We even took advantage of Adobe's new cutting edge animation library, Snap.SVG , to make the animations as smooth as a Chianti.

If you can write an unordered list, you can make a graph. There's no graphing library so you can get right to kneading the dough of …

zurb.com Read
  Source Favicon
By Assaf Arkin of Labnotes 3 months ago.
Email

andreaferretti/paths-js to "generate SVG paths for geometric shapes."

nastyicons.com : vector fonts, gone horribly horribly wrong.

Lines of Code

Javier Arevalo :

Any programming team has at least two programmers: you, and you three months later.

lantiga/ki uses sweet.js to create "a lisp with Clojure data structures and semantics that can be intermixed with Javascript code at any level".

Node for iPhone . …

blog.labnotes.org Read
  Source Favicon
By Assaf Arkin of Labnotes 4 months ago.
Email

espadrine/gh-badges lets you put SVG badges on your GitHub pages.

Bill Scott highlights a pet peeve of mine, undecided signup options:

Did I sign in with twitter, facebook or google? Or maybe I created an account. Or maybe I did all four. Or maybe I don't have an acct. # sigh

Startup Life

Recruit More Engineers in Less Time looks at conversion metrics and where you should optimize:

We put together this calculator to help you plan your recruiting …

blog.labnotes.org Read
  Source Favicon
On ZURB 6 months ago.
Email

Snap and its predecessor, Raphael.js, give developers a whole library of SVG tools with JavaScript, we wanted markdown-centric pie charts. HTML, not JavaScript.

Built into Foundation with a quick install into your current project, Pizza uses SVG so its curves and angles look great on Retina displays and other HiDPI devices. Each chart takes on the full width of its parent container by default. But you can also give charts a max-width or max-height.

Thinking mobile-first…

zurb.com Read
  Source Favicon
By Jeremy Frank of Viget.com Blogs 7 months ago.
Email

Grunticon takes a folder of SVG/ PNG files (typically, icons that you've drawn in an application like Adobe Illustrator), and outputs them to CSS in 3 formats: svg data urls, png data urls, and a third fallback CSS file with references to regular png images, which are also automatically generated and placed in a folder.

Tommy Marshall

handlebars-helpers

This library of 100+ handlebars helpers is a dependency for assemble, with some helpful features like {{default}}, …

viget.com Read
  Source Favicon
By miraculous1 of mir.aculo.us 7 months ago.
Email

…the advantage of allowing you to easily customize the color but is slightly more verbose, is using SVG:

Transparencies and blurs

Using blurs should be limited to very few occasions since it's a major performance hog—you can't have any surfaces that blur out the background layers and still expect scrolling to be smooth for example. But it's useful for example when you want to show an important message in a modal dialog but want to be able to hide it again when an event occurs …

mir.aculo.us Read
  Source Favicon
By miraculous1 of mir.aculo.us 9 months ago.
Email

SVG images for some of the logos

Self-serve web fonts

Hover over the top area with the piecharts and you see an animated tooltip popping up, just as in Freckle (this is done with just CSS)

The "screencast" further down the page is an animated GIF at retina resolution (biggest asset on the page at 386K)

The press logos under the plan selection are using webkit-filter to show them in greyscale (hint: add -webkit-transform: translateZ(0) so this works correctly on retina …

mir.aculo.us Read
  Source Favicon
By Lee of Lee Munroe 1 year ago.
Email

…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?

leemunroe.com Read
  Source Favicon
By Mike Gunderloy of A Fresh Cup over 1 year ago.
Email

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.

afreshcup.com Read