NotesAs I understand, a hugely divisive internal debate occurred among Twitter employees around this time. One camp wanted to build the entire business around their realtime API. In this scenario, Twitter would have turned into something like a realtime cloud API company. The other camp looked at Googleâs advertising model for inspiration, and decided that building their own version of AdWords would be the right way to go. FeedUnfurl
NotesThe âBashfulâ â named after the story-book dwarf in Snow White â was created alongside the Apple II computer series as an extension of the Snow White design language that frog Founder Hartmut Essligner helped create for the company in 1983. Concepts for this early pre-touch tablet included one with an attached keyboard and one with a floppy disk drive and convenient handle for maximum portability.Unfurl
NotesRocky's Boots is an educational logic puzzle game by Warren Robinett and Leslie Grimm, published by The Learning Company in 1982. It was released for the Apple II, the CoCo, the Commodore 64 and the IBM PC. It was followed by a more difficult sequel, Robot Odyssey. It won Software of the Year awards from Learning Magazine (1983), Parent's Choice magazine (1983), and Infoworld magazine (1982, runner-up), and received the Gold Award (for selling 100,000 copies) from the Software Publishers Association. It was one of the first educational software products for personal computers to successfully use an interactive graphical simulation as a learning environment.Unfurl
NotesIn 1984, the personal-computer industry was still small enough to be captured, with reasonable fidelity, in a one-volume publication, the Whole Earth Software Catalog. It told the curious what was up: âOn an unlovely flat artifact called a disk may be hidden the concentrated intelligence of thousands of hours of design.â And filed under âOrganizingâ was one review of particular note, describing a program called ThinkTank, created by a man named Dave Winer.Unfurl
NotesThe fact that some rise above the despair of the product to make it work, to make it sing even, this is not because of anything Facebook has done, but a testament to the unceasing, even unhinged resilience of the human spirit. One does not develop with the Facebook Platform, but in spite of it.FeedEmbedUnfurl
NotesSome days...some days it's frustrating to be on the web. We're compiling C++ into JavaScript and running Unreal in the browser but at the same time, here in 2013, we're still making the same mistakes. And by we, I mean, the set of web developers who aren't us, right Dear Reader? Because surely you're not doing any of these things. ;)FeedUnfurl
Notes A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing. For a real-world example, check out any of the forms on slid.es. Unfurl
NotesBut here's something you may not realize (or if you do, it's probably on a subliminal level): There are actually two different types of tabbed box-closure mechanisms out there. One is the kind described above, with a perforated slot. The other format involves two interlocking box flaps that snap together without the need for a perforated slot. You can see the differences between the two designs by looking here.Unfurl
NotesSubstitutability is a principle in object-oriented programming. It states that, in a computer program, if S is a subtype of T, then objects of type T may be replaced with objects of type S (i.e., objects of type S may be substituted for objects of type T) without altering any of the desirable properties of that program (correctness, task performed, etc.).FeedUnfurl
NotesConstructed of aluminum, steel, molded furniture-grade plywood and polymers. The seat can comfortably accommodate a person ranging in height from 4â11âł to 6â8âł and up to 300 lbs. Range of seat motion laterally is 15Âș. Fore-aft motion ranges from 5Âș to 20Âș forward. Available with a choice of either an American walnut or white oak base and a choice of three colors for the EVA seat cushion. Upgrades include a nubuck seat cushion and an anti-fatigue mat. The seat is sourced globally and assembled in Rhode Island. See Product Guide for a complete list of materials. Unfurl
NotesBut buttons are discoverable. They can have labels that describe what they do. Everybody knows how to use them. They just work. Itâs why we use them to turn on the lights, instead of installing Clappers everywhere.FeedUnfurl
NotesProgram design: The program hung at an angle, so the names were rotated accordingly to ensure optimal readability. The hole was drilled in the bottom gutter of the booklet so it could be easily flipped through while attached to the lanyard. Unfurl
NotesThe difference is subtle, but the comparison makes it very clear. There are several major problems with the computer-created icons that leaves them looking blurry and unimpressive. For example, in the transition from 66x40 to 48x30 pixels, the human version drops the border down to exactly 2 pixels but the computer drops it to 2.8 (that's two solid black pixels, plus one half-pixel at 80% intensity), which gives it an incorrect soft edge. The computer has no way of knowing that the border should always be sharp, so it ignorantly tries to maintain the ratio of the originally-specified image at the expense of sharpness. The result is not great.FeedUnfurl
NotesI'm making something that uses Markdown, and there's currently no great universal symbol for identifying Markdown support. So I created one. FeedUnfurl
NotesWhile CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let's you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.FeedEmbedUnfurl
NotesClay produced the interactive Periodic Table of Swearing for Modern Toss. It was built in our Hoxton Street studio during our summer holidays. It's constructed from over 100 buttons, CNC'ed and laser cut MDF, direct to media printing, over 100 meters of cabling, over 300 soldered joints and a whole lot of swearing!Unfurl
Notes<blockquote>Little Printer lives in your home, bringing you news, puzzles and gossip from friends. Use your smartphone to set up subscriptions and Little Printer will gather them together to create a timely, beautiful mini-newspaper.</blockquote>
Total waste of paper, but still a really cute product idea despite that.Unfurl
NotesI can understand the impulse here: Most scrollbars are kind of ugly. Even the skinny, rounded gray bar that Apple invented for the iPhone isnât the prettiest interface element ever designed. But as unpleasant as they may be to look at, scrollbars serve a purpose on a busy screen: They tell you, at a glance, where you are in a list or a document. Because most modern scrollbars are proportional to the size of the document youâre looking at, they also give you a sense of how much lies off-screenâthe smaller the scrollbar, the larger the document. And when you donât see a scrollbarâor when the scrollbar is dimmedâthis usually means thereâs nothing outside the screen to look at.Unfurl
Notes I spent a half year writing software art to generate special effects for Tron Legacy, working at Digital Domain with Bradley "GMUNK" Munkowitz, Jake Sargeant, and David "dlew" Lewandowski. This page has taken a long time to be published because I've had to await clearance. A lot of my team's work was done using Adobe software and Cinema 4D. The rest of it got written in C++ using OpenFrameworks and wxWidgets, the way I've always done it with this team ;) Uniquely however, Digital Domain's CG artists were able to port my apps over to Houdini for further evolution and better rendering than OpenGL could ever provide. Special thanks to Andy King for showing me that what seasoned CG artists do at DD is actually not so far off from what's going on in the Processing community. FeedUnfurl
Notes<blockquote>HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.</blockquote>
Seems like a nifty site to vet media queries on all my devicesUnfurl
NotesWe were charmed to the core over this ingenious book storage idea. Yes, these are just planks of painted plywood nailed to the supports for the loft above. They create perfect cubby spaces to store books, baskets and even small lights. Since we're in California, it would probably be a good idea to secure everything in place so it doesn't shake right off. Unfurl
NotesA skeuomorph, pronounced /ËskjuËÉmÉrf/ SKEW-É-morf, or skeuomorphism (Greek: skeuosâvessel or tool, morpheâshape)[1] is a derivative object that retains ornamental design cues to a structure that was necessary in the original.FeedUnfurl
NotesA quick and simple service for getting pictures of kittens for use as placeholders in your designs or code. Just put your image size (width & height) after our URL and you'll get a placeholder.Unfurl
NotesEmulating background image crop, background image opacity, background transforms, and improved background positioning. A few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.FeedUnfurl
Notes"How were these things done? Well, on PLATO, you could press SHIFT-space to move your cursor back one space -- and then if you typed another character, it would appear on top of the existing character. And if you wanted to get real fancy, you could use the MICRO and SUB and SUPER keys on a PLATO keyboard to move up and down one pixel or more -- in effect providing a HUGE array of possible emoticon characters. So if you typed "W" then SHIFT-space then "O" then SHIFT-space then "B", "T", "A", "X", all with SHIFT-spaces in between, all those characters would plot on top of each other, and the result would be the smiley as shown above in the "WOBTAX" example. "Unfurl
Notes"An empty glass resembles a meaningless colorful mosaic, until a liquid is poured into it, revealing its name. Each side of the glass is reserved for a specific drink."Unfurl
Notes"Just like higher-level programming languages compile to assembler, so Sass compiles to CSS. And just as higher-level programming languages eventually replaced the regular usage of assembler, so Sass (or a language like it) will eventually replace CSS.
Now, donât get me wrong. I am sure CSS has many more years ahead of it, but Sass and languages like it are the future. Yes, you can complain about the syntax. You can complain about the generated code. But ultimately, the productivity and simplicity that languages like Sass offer will win over the masses. Of that you can be sure."Unfurl
Notes"While Link can move a single pixel at a time, in any direction, the longer he continously moves in any direction the more he gravitates toward aligning himself with the underlying grid of the screen. The tile grid for LoZ is 16 tiles wide by 14 tiles high (including 3 tiles for the status display at the top of the screen). Each tile is 16Ă16 pixels. Link operates on a half-tile grid, though (32Ă28 tiles, 8Ă8 pixels each). As Link moves, if heâs not currently aligned with the half-tile grid, he is adjusted, one pixel at a time, toward the closest correction. As a result, if Link is 4 pixels off alignment heâll line back up with the grid after moving 4 pixels."Unfurl
Notes"The best things in life are often silly, and in this case gloriously retro. Blocktronics, a collective of the best textmode artists around the world, have released their second art pack entitled âCodename Chris Wirthâ in homage to the legendary ANSI artist RaD Man. No, itâs not 1995, and yes, this kind of art is still being produced in stunning fashion. "Unfurl
Notes"In an industry where popular magazines are dying or fighting to stay alive, it's exciting to see a fresh new independent magazine aimed at fellow designers and the crafty-alike (with every issue selling out so far). I'm currently enjoying a copy of issue 2, which is 100 colorful pages full of articles ranging from the world of Pantone color to scissor collecting, along with a creative postcard project that encourages you to get involved in the process."Unfurl
Notes"Corridors make science-fiction believable, because they're so utilitarian by nature - really they're just a conduit to get from one (often overblown) set to another. So if any thought or love is put into one, if the production designer is smart enough to realise that corridors are the foundation on which larger sets are 'sold' to viewers, movie magic is close at hand."Unfurl
Notes"design patterns are solutions to recurring problems. By extension, UI design patterns are solutions to common user interface problems. This article goes over 10 interesting UI design patterns that you can use in your own projects. In fact, you may already be using them now without knowing it."Unfurl
Notes"With the power of the underlying Mozilla Gecko engine, Pencil turns your excellent Firefox 3 browser into a sketching tool with just a 400-kilobyte installation package. "Unfurl
NotesThis goes a long ways toward explaining why everything Google does is so damn ugly. "Yes, itâs true that a team at Google couldnât decide between two blues, so theyâre testing 41 shades between each blue to see which one performs better. I had a recent debate over whether a border should be 3, 4 or 5 pixels wide, and was asked to prove my case. I canât operate in an environment like that. Iâve grown tired of debating such miniscule design decisions. There are more exciting design problems in this world to tackle."Unfurl
Notes"In general, using the browserâs run-time as a prototyping environment enables ridiculously fast rapid prototyping. There are no deployment steps to worry about, changes are reflected instantly, and all changes are dog-foodable from the get-go. Prototyping is also entirely decoupled and parallelizable: thatâs especially powerful when you donât have access to the site for which you are making a live-patch, the backend code is obtuse, or when you multiple have competing ideas for changes youâd like to make. We actually use the same technique for prototyping new behaviors for the the Ubiquity code repository."FeedEmbedUnfurl
What Twitter could have been
From the Archives: frogâs Early Apple Tablet | Blog | design mind
Stop Doing Internet Wrong. - Scott Hanselman
Cereal Box Design: New Closure | New Republic
Liskov substitution principle - Wikipedia, the free encyclopedia
How Mozilla Was Born
ignore the code: Buttons
Pixel-fitting by Dustin Curtis
The Markdown Mark by Dustin Curtis
Arctext.js - Curving Text with CSS3 and jQuery | Codrops
Computer scrollbars: Why is Apple eradicating a linchpin of user interface design? - Slate Magazine
A Brief Rant on the Future of Interaction Design
CSS Media Queries
Apple's sometimes-screwball design aesthetic
Skeuomorph - Wikipedia, the free encyclopedia
CSS background image hacks â Nicolas Gallagher
How Would You Like Your Graphic Design?
Emoticons and Smileys on PLATO in the 1970s
