Introduction to Sass

“Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rulesvariablesmixins,selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.” -- Sass

Mastering Sass: Lesson 2

Prototype to Influence Production

“Aza Raskin, creative lead at Firefox, shares some tips and tricks about rapid prototyping at the Mozilla Drumbeat festival” – Mozilla Drumbeat

5 Video Technology Start Ups In San Francisco

Adap.tv

Adap.tv develops video advertising trading, serving and management technology that make video more profitable and less painful. It is the way video advertising works. The adap.tv marketplace (atm) is the industry’s first online video advertising marketplace. atm connects advertisers, agencies, publishers and ad networks with a robust marketplace to make smart buying and selling decisions in real-time. adap.tv is also the creator of OneSource, the online video ad serving platform that empowers publishers to succeed in online video. A complete end-to-end solution, OneSource helps publishers increase advertising revenue, grow streams, make the right business decisions, and simplify every aspect of ad operations.

Affine Systems, Inc.

Affine Systems is a venture-backed technology startup that was founded in December 2007 and is funded by Highland Capital Partners. Affine has spent the past two years building out its computer vision technology in order to shine a bright light on the current black box of broadband video.

Auditude

Auditude is based in Palo Alto with offices in Los Angeles and New York City. Our team comes from some of the top Internet, technology, and advertising companies in the industry, including Google, Yahoo!, Idealab, IDEO, PayPal, eBay, and DoubleClick.

FreeWheel

FreeWheel offers the most formidable system for digital video ad management and monetization.  Founded and led by a team of executives from the world’s leading technology companies, FreeWheel’s solution arms content owners and distributors with the tools and services necessary to make the most money possible from video content.

FreeWheel was founded in 2007 and is privately-held with offices in Silicon Valley, New York, and Beijing.  We are well-funded by Steamboat Ventures, Turner Broadcasting System, Battery Ventures, and Foundation Capital.

Visible World

Visible World is the leading provider of targeted television advertising solutions. Our suite of services enables advertisers, agencies, and media companies to deliver addressable, interactive, and measurable ads. Visible World campaigns increase ad relevance and engagement by providing capabilities to target real-time offers, products, and creative based on geography, programming, inventory levels, time of day, weather, and other data-driven conditions. Today, Visible World helps over 200 advertisers target consumers in ~100 millions U.S. television households and across more than 1,500 major websites.

Cycle Spotting – Your Bike In The Wild

I’m developing this website which features your bike in the wild – kinda like foodspotting but for cycles. Expect many updates in the future…

“At Cycle Spotting we capture the imagination of your gear in the wild. Cycle Spotting is a San Francisco based company finding and sharing bike recommendations: Instead of reading and writing reviews of bikes, you can share photos of any bike you find and see what’s hip wherever you go.” – Cycle Spotting

Collapsible Div With JavaScript

Add this in your header tag.

<script language=”javascript”>

function toggleDiv(divid){
if(document.getElementById(divid).style.display == ‘none’){
document.getElementById(divid).style.display = ‘block’;
}
else{
document.getElementById(divid).style.display = ‘none’;}
}
</script>

Add this anywhere in your body tag.

<a href=”javascript:;” onmousedown=”toggleDiv(‘YOURDIVID’);”>Close</a>

You need to create another div ‘YOURDIVID’, so the javascript can function on mousedown.

Here is a example using the function in a beta product (Select Publisher or Select Category): http://dev.affinesystems.com/~david/Affine%20Widget/target.html

CSS Browser Hacks for Internet Explorer, Safari, Firefox, Chrome and Opera

Here is a list of CSS Browser Hacks for the majority of popular browsers. Using this as a personal guide to some of my most common daily headaches. I’m still trying to figure out how to target FF2.0 w/ Mac… [coming soon].

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

Build Successful Web Applications with Getting Real from 37signals

I just ordered this a few days ago, should be in the mail today. :)

Getting Real details the business, design, programming, and marketing principles of 37signals. The book is packed with keep-it-simple insights, contrarian points of view, and unconventional approaches to software design. This is not a technical book or a design tutorial, it’s a book of ideas. Anyone working on a web app — including entrepreneurs, designers, programmers, executives, or marketers — will find value and inspiration in this book.

37signals used the Getting Real process to launch five successful web-based applications (Basecamp, Campfire, Backpack, Writeboard, Ta-da List), and Ruby on Rails, an open-source web application framework, in just two years with no outside funding, no debt, and only 7 people (distributed across 7 time zones). Over 500,000 people around the world use these applications to get things done. Now you can find out how they did it and how you can do it too. It’s not as hard as you think if you Get Real.

Free Online Version Here

PrestaShop – Designers Choice for Simple e-Commerce

PrestaShop provides a simple e-Commerce solution for designers in the need of something clean yet extremely powerful putting your brand into the spot light. Other e-Commerce like Zen Cart, OS Commerce, and WordPress (Using Plugins like: WP e-Commerce) -- gives the user an overwhelming amount of admin tools and data. Experienced web developers would consider community size and usability support which PrestaShop lacks being founded in France and standards could vary depending on your location and needs.

Over the years I’ve seen the PrestaShop community grow from strictly European to a slow mix of American’s or at least people speaking English. I tested version 1.0 back in 2005 for an experiment to see if my sisters clothing site could benefit from something they could easily use and adapt to. Since they were familiar with online stores like eBay, Etsy, and Smashing Darling I knew when it came time to launch a website for them I would considered form over function (not to say PrestaShop doesn’t understand function).

8 Popular Extensions for Google Chrome

Here’s a list of the top 8 most popular Google Chrome Extensions. Google currently has 100′s of extensions available which they list here. I’ve personally used all 8 plugins for chrome and recommend giving 1 a try to see how easy it is to install and operate. Also, if your a developer and interested in publishing your own extension visit the Google Dev for Chrome Extensions.

AdBlock -

AdBlock for Chrome! Blocks ads all over the web. Rated 4.5 out of 5 stars by our users! More @ Google Extensions

Google Mail Checker – Displays the number of unread messages in your Google Mail inbox. You can also click the button to open your inbox. More @Google Extensions

IE Tab – Display web pages using IE in a tab. More @Google Extensions

Google Translate – This extension translates entire webpages into a language of your choice with one click. By the Google Translate team. More @Google Extensions

FastestChrome – Save time and enhance your productivity! Get quick definitions, auto-load next pages, search faster, and more. More @Google Extensions

Cooliris -

Cooliris transforms your browser into a full-screen 3D Wall for searching, viewing and sharing the Web. More @Google Extensions

Google Dictionary – View definitions easily as you browse the web. More @Google Extensions

Docs PDF/PowerPoint Viewer – Automatically previews pdfs, powerpoint presentations, and other documents in Google Docs Viewer. More @Google Extensions

Internet Explorer 9 Browser to Support HTML 5

Microsoft announced today that Internet Explorer 9 is almost halfway finished and it will support HTML5. Although Microsoft hasn’t announced the release date which was to be expected. Microsoft published a blog post yesterday asking for feedback within it’s beta ‘platform preview’ which has been released to developers & designers.

Microsoft says:

Internet Explorer Platform Preview is not a full web browser. It’s intended to give Web developers an early look at the Web platform technology coming in the next release of Internet Explorer. To distinguish it from a full browser, we call it a platform preview.

HTML 5 Demos

Border Radius – This demo illustrates the CSS3 border-radius property in conjunction with border-width and border-style.

CSS3 – CSS3 Selectors provides new, more powerful ways to select nodes using CSS. This helps when styling complex documents or making CSS that can apply to a document as its structure changes.

DOM Events – DOM Events provides an interoperable eventing mechanism.

DOM Style – DOM Style enables reading and interacting with all the style information for a document.

HTML5 T-Shirt Designer – This demo shows a cross-section of features in Internet Explorer 9, including XHTML, that make our platform more standards-compliant and interoperable.

Download Here @: Microsoft – Internet Explorer 9

Microsoft announces Internet Explorer 9