I’ve found myself using jQuery less and less recently. Partly to avoid the extra download and file size but also—as shown here—when it comes to DOM manipulation, there’s a lot you can do straight out of the box.

Tagged with
javascript
development
jquery
dom
scripting

Billy Joel’s hit song “The River of Dreams (I go walking in the middle of the night)” was inspired by a mid-sleep bathroom break at 3am. But in the web design world we can’t afford to wait for this kind of inspiration. Generally, we need to come up with new innovative and super creative ideas right now. This is when we usually go into some kind of brainstorming mode, but instead of feeling like a happy “River of Dreams” it feels more like a “Storm of Pressure.” However, even these brainstorming sessions can turn into a pressure cooker with their own set of hurdles to jump.
Usually, brainstorming sessions happen within a group so that individuals can feed off each others ideas. However, for the majority of us, brainstorming and creative innovation is a solitary task. The way I see it, there are (besides the lack of group thinking) two main hurdles to jump in your isolated brainstorming sessions:
ProcrastinationCreativityIt’s really easy to put off your brainstorming sessions for another day and it’s not real easy to thinking creatively when it’s just your brain and your ideas being kicked around. That’s the beauty of a group think; you’re forced to participate and you’re not the only brain in the game. It’s harder to think creatively when nobody else is there to push ideas further. In order to avoid being trapped in the vicious procrastination cycle or getting caught with your brain turned off, I’ve come up with some techniques that will help to establish a brainstorming method and break the innovative ice.
Write Down the Problem Over and Over Again
Before, during and after, write the problem down. Write your problem down in big bold letters on your sheet of paper, make it big enough, so that it is the first thing your eye is drawn to. When you get bored during the session and can’t think of anything, write down the problem again. The reason for the brainstorming session is to solve a problem or innovate new ideas, when you write the problem down before and during the session you will be able to focus on the solutions and ideas.
This will keep you focused on the task, keep you focused on what’s ahead, kind of like driving: it’s nice to look around every once in a while, but you need to be looking straight ahead so you don’t drive off the road and roll your car in a ditch.
Be RidiculousWhen shooting out ideas during a session write down even the dumbest, most ridiculous ideas. While brainstorming, ideas build off of each other, ideas lead to other ideas. It’s easier to write off “silly” ideas when they are just yours but writing down even the weirdest concepts can lead your brain down a different road where new, more creative ideas may be conceived. Try to avoid just laughing at crazy ideas and moving on — laugh at yourself and then don’t forget to write them down. True innovation only comes through different thinking, so let yourself think differently because you never know when a really crazy idea will blossom.
Write Ideas in Pen
White boards are great brainstorming tools, but all too often during a session you will be tempted to erase “dumb” ideas before the session is through, or even erase ideas just to simply make room for more things. Write down all your ideas in pen, that way you won’t be tempted to change your mind on an idea or just discredit an idea based upon needing space. Part of what makes brainstorming successful is the fact that even a dumb idea can turn into the most brilliant innovative concept ever conceived. Writing in pen makes sure that those dumb ideas are still floating on the page waiting for you to polish them into true innovation.
Schedule Yourself and Appointment with YourselfA brain dump session is just as critical to a project as anything else, so schedule a meeting with yourself and make yourself accountable for attending that meeting. Setting aside some time to brainstorm can be a difficult thing so treat yourself like your client and pencil yourself in. Set up a date in your Google calendar and approach that appointment just as important as a meeting with your project manager.
Define a Time Limit
In order to stay on task and not waste your entire day dreaming for inspiration, set a time limit on any brainstorming session. This will help you stay motivated on the problem at hand and also your session won’t become a time drain. Setting a time limit will also help you from day dreaming about other stuff during a brainstorming session.
Set a realistic time limit also, don’t pencil in two to three hours, an effective session doesn’t need to be that long. A half-hour to an hour should do just fine as long as you are able to stay focused on the task. If necessary, set up two or three small sessions during the day instead of one long gigantic session.
When the Session Ends — EvaluateAfter you have spent your scheduled one hour brainstorming session writing a bunch of nonsensical random thought bubbles with words and phrases that make no connection; it’s time to evaluate the confusion. Now, you don’t have to do this right after the session, I would actually recommend scheduling another day for the evaluation, but then don’t forget about it — same rules apply for the evaluation as to the brainstorming session.
The main point of looking back on your brainstorming madness is to find those ideas that seem truly plausible, that seem like you could move them to the next level. When evaluating however, don’t cross out ideas or discount anything you have written, simple read back through the ideas and more often then not, a few ideas will jump off the page and you’ll know which concepts to further pursue. Avoid crossing out things, highlighting items or circling ideas, this activity visually takes away the focus from all the ideas and narrows down the scope. Often, you can visually connect two or three ideas together that may not have a good relationship, you might hurt these connections if you highlight or create focus on only a few concepts.
And… when you do get stuck…
There will come a time when you just can’t think of anything, trust me, it will happen. You’ll just be staring at your notepad or computer, hand on mouse just itching to click on the Spotify icon. This brain block only leads to frustration and frustration will kill any creative thinking process completely. So here are a few ideas to try next time you get stuck:
What would Jesus do? Or any other notable historical or social figure. When you get stuck, ask yourself what somebody else would do to resolve the problem. This will not only allow you to break your train of thought, but it will give you a different angle on the problem.Give yourself an unlimited budget. Forget all the restraints on the project and act as if you have unlimited resources. Allow yourself to think up solutions that will break your budget or time constraints, let yourself bask in the glow of no restrictions. Freedom will allow yourself to be more creative, so think freely and worry about your budget concerns after you have found a really innovative solution, who knows, maybe your idea is so brilliant it’s worth the investment.Write a top ten list. Start with number ten and work backwards as you write down the top ten great solutions to your problem. Writing down a top ten list when you get stuck gives you a goal to shoot for, but remember, write down even the most ridiculous solutions… those may just surprise you.Look around for help. When you have a complete brain fart during a session, stop and look around. Find some random object – a pencil, a cabinet, the TV, the carpet, a garbage can – and think about how that object can solve your problem. This will help you break your current train of thought, but it will also help you look at the problem very differently.Brainstorm Happy!Creative thinking is better harvested with a positive attitude. Refrain from any brainstorming session during periods of high stress, unless a good brainstorming session is a great stress reliever for you — then be my guest. Keep a positive attitude toward brainstorming as well, if you are just sitting there wanting to be somewhere else, then your brain can’t focus on the task at hand. Brainstorming shouldn’t feel like your sitting in your High School algebra class listening to Mr. Johnson drone on about the husbandry ranch he owns. Stay positive, stay focused and make your brain drain a relaxing fun experience. You’ll probably be surprised at what ultra creative concepts will fall out of your head.
Share and Enjoy:

Having some fresh and maybe even unexpected effects on a website, can juice up the experience for the user. Be it a whole new and experimental way of navigating through the website or just a tiny surprising hover effect – fresh effects can spice up your design and bring some life to it.
We’ve collected some wonderful examples of such effects for your inspiration. Dive in!
Edits Quarterly × Ian Coyle
Edits Quarterly is a great example of a whole new navigation experience. You can scroll down or simply use the arrow keys to view the beauty of it.
neotokio!
Neotokio! will surprise you with different kind of animations while you scroll down the site.
Kyan
Kyan has an awesome slider that just animates wonderfully has gives a real 3D feel to it.
Adrian Baxter
Adrian Baxter’s website has an interesting and original parallax effect. Oh, and don’t scare when you check out the contact form :)
Alpis Design Here we have a nice hover effect in the about section.
Dawid Wadach Dawid Wadach has a very interesting hover effect which reveals his portfolio items. A combination of lines and boxes that move make this effect very original.
Dangers of Fracking “Dangers of Fracking” which is designed by brilliant Linda Dong, is just a beautiful on-scroll piece of art that explains the dangers of hydraulic fracturing, a process that is used to release natural gas. See, how the story is being told using this wonderful visualization method.
AIGA 50 DC AIGA 50 uses this great “cut-out” technique that reveals the images of a slider which always seems to be beneath the other content slides.
Create Digital Media Create Digital Media has a unique slider that shows content and images in an original way.
Mezcal Buen Viaje Now, THAT I call a scrollbar! :) “Mescal Buen Viaje” is like entering another world: everything is very original, from the scrollbar to the navigation to the way images are displayed: it’s such a fresh experience. And check out those cute kolibris that flap their wings on scroll.
Alex Pierce Alex Pierce has some nice sliding happening right after the page is loaded with CSS3 animations. Hovering over the main navigation will make the whole navigation bar move a bit. Also, other subtle (hover) effects make a visit to his website a really nice experience. And don’t you just love the typography?
Styiens – Label Musical Styiens has a very interesting slider that moves around that central circular element.
Lavazza 20Calendars 20 Calendars of Lavazza uses a beautiful full-page accordion that slides open elegantly when clicking on one of the headlines.
Shelton Fleming Shelton Fleming divides its content into “Experiences” and “Ideas”, presenting each on one side of the page and making their sub-content slide originally when opening a menu item.
Toast! Toast! has a really cool and original slider.
Five Thirty Brew by blenderbox Five Thirty Brew by blenderbox is an exciting scrolling roller-coaster that will present you their fine beer and the process of making it.
CaptainDash The delicate and original layout and design of CaptainDash makes the sliding content very interesting.
Sir John A Day Sir John A Day has some really cute subtle details that are not visible at first sight. But once you dive in, you will see those tiny animations, that complement this beautiful design and add life to it: there is something animating in every section of the page.
We hope you liked this little collection and got inspired!
Share and Enjoy:

Fred touches on the same issues that Frank highlighted in his dConstruct talk last year: what do we do with all of this wealth of material we’ve been collecting/ffffinding/scrobbling/liking/favouriting/plus-one-ing.

Tagged with
sharecropping
distributed
data
ownership

Codecademy's Code Year is a weekly lesson for people who want to learn how to program. Over at Slate, Farhad Manjoo explains a few good reasons why you might want to do that at all, with a quick quote from me. When Manjoo emailed, he asked, "What are some good reasons for people to be more familiar with programming?" I replied:

First and foremost, learning to code demystifies tech in a way that empowers and enlightens. When you start coding you realize that every digital tool you have ever used involved lines of code just like the ones you're writing, and that if you want to make an existing app better, you can do just that with the same foreach and if-then constructs every coder has ever used. Learning how to code also makes you respect the incredible accomplishments of all the engineers who came before you, the importance of good data, and the systems and services we all take for granted every day, even mundane things like the software that runs an elevator or processes a credit card.

Secondly, an app is an act of self-expression, the same way a novel, a painting, a Lego starship, or a gourmet meal is. The difference is you can distribute your app to millions of people from your spare room over a phone line, so the potential impact of your creation is enormous. You can do the same with a blog post or an ebook, but a software app is a utility as well as a work of art. If you make a great one, it can become an intimate part of your users' everyday life, like their fork or belt.

To be completely honest with you, learning and knowing how to code is a huge power trip. It's hard work, but if you keep at it, you'll experience one revelation after another, and in the end, you're a mini-god. You can say "I made that machine perform an action I imagined in my head with these words." That's the best feeling in the whole world.

You Need To Learn How To Program [Slate]

While you're waiting for the InDesign team to add a Clear All button to Find/Change, use this tip.

Kyle McDonald and Arturo Castro play around with a face tracker and color interpolation to replace their own faces, in real-time, with celebrities such as that of Brad Pitt and Paris Hilton. Awesome. And creepy.

See Castro's video of him doing the same thing, but with a different blending algorithm. His looks more like a maleable mask rather than a face substitution.

Grab the code on GitHub.

[Video Link via Waxy]

TL;DR I am moving as much of my internet curating to pinboard.in as I can, because I like the dude who runs it, and it’s easier to backup. You can find me on pinboard.

Whenever I move arounds large bits of information, that I don’t ever look at, I ask the question why am I moving around information that I don’t ever look at. It can put you in a philosophical mood. When this happens I entertain the idea that data should be temporary like temporary sand paintings. You put a bunch effort into an elaborate work of art, and then you wipe it away. A lot of my work could fall into this category, and why not just wipe it away after you are done? You probably learned something. Hopefully you internalized something. Why not delete the work. The last time this mood struck, and I started philosophizing, I was surprised to find that some of my cloud services, without bothering to ask, were trying to erase my data for me. Now I am the point where I need to decide what data means to me. I need to do this before the Internet personal-data-apocalypse happens.

The sand painting route exposes fundamental difference’s between spiritual pursuits, and intellectual ones. While pursing one’s intellect It’s helpful to have a large library on which to build intellectual arguments. Standing on the shoulders of giants and all. Spirituality, especially the kind practiced by temporary sand painters, seems to be a pursuit of salvation that comes from within. Salvation here meaning that real truth is found by turning to your own mind. If salvation, or spirituality is all that maters to you. It would make sense that the ritual is what matters, and by not archiving data you are freeing your own mind to do some serious thinking. On the other hand, if you want to make a sound and reasoned argument, or you want to experiment in some academic fashion it can help to know what others have done, or even what you did years ago.

There is this article I read about preserving ones data. As far as I can remember it had salient thoughts about giving up all your data, and how this brings you some kind of powerful calm. Funny thing though, I can’t find it. I forgot to bookmark it with one of my million social bookmarking tools. I can’t point you to it, and I can’t go back to review it to inform my thinking about this article now. I’d like to review that article now because It probably made made some good points, at least I think it did.

The start of my plan to be the master of my data has to start with defining what my data is, and what I want to keep. While I can easily see that storing everything forever is an act of madness, you might not. Here are some of my guidelines to what I want to store, and why.

I don’t need to keep all my mp3s, and movies. Wait a few years until the next millie vainly, and you will see why most music has a short cultural timespan. Besides, streaming services have partially alleviated my need to keep everything. There are still holes in streaming services catalogs, but it won’t be that way forever.

After that comes my pictures, and videos. Right now I rely upon things like YouTube, and Flickr, to archive these things, in reality I shouldn’t and I know this is a weakness in my archival system. It’s okay for them to be one prong of your system, but they probably shouldn’t be the only prong.

After media, and pictures comes various bits that are mostly text. There are two vectors on to which I map text content: private and public. Basically it comes down to how secure do you want to keep this information. Text like passwords, bank info, personal id numbers all need to be stored in a very secure way, in a private way. Things that I find on the internet, or my annotations on those things could be stored in public for all I care.

It’s these text bits of information that tend to be the most important to me. For secure data I try and store that in something like 1password, or KeePass. I have one very large password that I have committed to memory, and then I use these programs to generate passwords for all my online services. Everything else that is textual I store in dropbox. So far I have been able to store all my code, everything I have ever written for my blog in a free 2gig dropbox account, someday I am sure this will grow. I also probably need to create some snapshot of my Dropbox folder in case of some cataclysmic Dropbox failure where they send the delete signal to all of my nodes, and they loose their backups.

After I built a mental model of what I wanted to store, and where I wanted to store I had to take a look at my toolset. I need to build a plan to archive my flow. After years of using a menagerie of tools, for various reasons, that keep my stuff spread out everywhere, I am trying to reign in my tools set, and hopefully use less then a handful to consume, process, and publish items that interest me. What I don’t have under control at the moment is my curation process. Keeping track of all the things that I collect from the internet is the reason I was prompted to have this philosophical debate with my self. It started when in short order I found a couple of my favorite internet services screwing up my data.

My beloved Google Reader did an abrupt change this year. Leaving its users understandably wary of the companies less then stellar commitment to anything that doesn’t make money, or isn’t google plus. The hard way is the wrong way to learn that sometimes your hot little tools don’t do the right thing.

It’s wrong of course to complain at all about Googles actions they were offering a free service, and under no agreement to carry on doing so. What’s worse is that I totally understand why they did it. They are ruthlessly aligning all products around their Facebook killer. A Facebook killer needs people, and lots of them. One tool they have at their disposal to bootstrap people is the change their other products, like google reader, to feed users into it. The changes to google reader in some crazy way make sense, but they still boned me. I started a survey of my data, and tools.

The details of the Reader change are what make it pertinent to the topic of preserving data. Many of us knowingly use free tools like Reader. We know that they often pretend to be fully open, and sell their service as if at any time you can just take all your data and leave. BTW, I have a good straw man going here, but to be clear when I say pretending i don’t mean willful pretending, just pretending that good intentions are all you need. Alas, they are all lying. I mean, come on, the road to hell is paved with good intentions and all that. I am being dogmatic here, by the way. I am essentially saying that if any user can’t get all there data out then they are lying about being open. They are, but like 99% of there users don’t ever run into the problems that I run into.

Google Reader, my favorite whipping boy, is one such example. When I went to save my history of sharing everything looked grand. They even had support for multiple export formats. I downloaded my 5 year long-heavy-duty-use history. Great. I can put it all in one place now. Pinboard allows you to import Readers particular format. This was going to be so easy. I could finish it before lunch. After importing, pinboard reported that I only had 1500 links. LOLWUT. That number was so small, and so perfect I knew someone wasn’t telling the truth.

It turns out Reader was only exporting up to a certain amount of items, and then silently finishing. If I hadn’t taken the time to check, and had waited years until I decided to do something with this file I would have been pissed. Really though, at no one but myself.

I cobbled together a script that got all my data, but it wasn’t easy, and what I did was out of reach for a normal consumers.

I suppose even this in isolation wouldn’t really be a cause for alarm, but it’s not the first time. Instapaper has the same problem. When you try and export your entire history, and it’s large, you can’t.

When you put these two things together you start to find a larger trend. Both services, Instapaper and Google Reader, are services used by people who care about data, and data preservation. Yet, they are both a little rough around the edges. They are both penalizing highly active users. It alarmed me, and this warn us all. So, its time to fight back against the bell curve. I am going all in on pinboard.in.

The old codger that runs pinboard – I don’t know if he’s old, or a codger I just have this image of him – has put out all the right signals about how he can keep the business sustainable. He is putting out the signals that he is going to run the site in a manner that can make it cost effective to do so over a long run. How long, I’m not sure, but my guess is that it’s at least 5 years, and up to 20 years.

By coalescing around one service I now have a known quantity. I can make sure that the tools I need to backup my data are simple. Which is what I am now doing. I am in the process of building a local/cloud hybrid. Because I think that storing interesting articles from the internet before the get removed from the internet for any number of reasons is the best way to build up a library for which to build intellectual arguments. And, I just like the idea if preserving knowledge.

Folding, indexing, epubbing, templates, and tips! You gotta' check out these great new year InDesign articles and videos

Being right is nice, but we learn more when we're wrong. Conduct an "annual errors review" this year to identify negative patterns and break them.

With an increasing number of mobile design options emerging by the day, creative people are finding new and powerful ways to flesh out their visual concepts while on the move. The era of the mobile studio is upon us, so we thought we’d share a handful of brilliant apps to help you capture your inspiration whenever–and wherever–it may strike you.

Adobe Ideas
A vector app for iOS and Android that lets you finger paint and sketch. In addition, It works seamlessly with the desktop versions of Illustrator and Photoshop so you can take your creations to the next level when you get home.

http://www.adobe.com/products/adobeideas.html

Source: http://www.adobe.com/products/adobeideas.html

Adobe Photoshop Touch
Create multilayered images, apply filters, and share your creations using your Android tablet. Not only this, the layers are preserved when you bring you creations into Photoshop on your desktop.

http://www.photoshop.com/products/mobile

Source: http://www.adobe.com/products/touchapps.html

Air Display
Brought to you by Avatron. Multiple monitors in a coffee shop for ten bucks. Hard to argue the creative benefit when paired with your laptop and your favorite creative software.

http://avatron.com/

Bamboo Paper
A simple and effective sketchbook app from Wacom, the ever-popular tablet people. Use your fingers or try their Bamboo Stylus for even greater precision.

http://www.wacom.eu/index2.asp?pid=294&lang=en&gm=3

Moodboard2
Collect and organize things that inspire you. Plan your creative projects when the mood strikes, then share with friends or clients.

http://www.atinytribe.com/apps/moodboard

Source: http://www.atinytribe.com/

Photoforge2
Full resolution editing and layer support make this one powerful tool for creative nomads.

http://photoforge2.com/

Source: http://itunes.apple.com/app/photoforge2/id435789422?mt=8

Procreate
Savage Interactive delivers a whopping 1920x1408px canvas to your ipad. Use their intuitive interface to sketch, paint, and even edit photos.

http://savage.si/procreate/

Source: http://itunes.apple.com/us/app/procreate/id425073498?mt=8

Sketchbook Pro
Autodesk introduces their digital sketching software to iOS and Android. Voted one of the “5 Must-Have iPad Apps” by Wired Magazine.

http://usa.autodesk.com/adsk/servlet/pc/index?id=6848332&siteID=123112

Snapseed
Nik Software brings us a stunningly simple photo editing app for iOS that features some innovative new filters and options.

http://www.niksoftware.com/snapseed/usa/index.php?view=intro%2Fmain.shtml

Source: http://itunes.apple.com/us/app/snapseed-for-ipad/id439438619?mt=8&ls=1

And last, but not least… the zero dollar app that requires no installation:

Light Table Pro-Series Alpha: Championship Edition
Photo courtesy of Andrew Heine. All Rights Reserved.

Now go download one or a bunch of these apps and hit the road!

Yes! Yes! Yes!!!

Progressive enhancement is the only sane approach to today’s massively divergent landscape of devices. It can’t be repeated often enough.

Tagged with
mobile
progressive
enhancement
javascript
devices
testing
futurefriendly
ffly

Deep-Dive™ is the name of a technique used to rapidly immerse a group or team into a situation for problem solving or idea creation. This approach is often used for brainstorming product or process development.

Originally developed by the IDEO group (a learning design company) for rapid product development, the Deep-Dive technique is now widely and increasingly used for innovation not only in product development, but process improvement and customer service strategies. The method used by IDEO was documented by Andy Boynton and Bill Fischer (of International Institute of Management Development (IMD) business school), who latterly further enhanced the process and sold the rights to Deloitte Consulting in 2006.

What is the Deep-Dive Brainstorming technique?

A one-stop-shop with links to the authentication settings of various online services. Take the time to do a little Spring cleaning.

Tagged with
authentication
permissions
services
oauth
privacy
settings

Jeanne Gang's vision for carp-free Great Lakes
The Great Lakes are facing an invasive species crisis. Asian carp, a group of foreign invaders with no known predators and a voracious appetite, are threatening one of the greatest fresh water resources in the world. Elected officials and the Army Corps of Engineers have failed to act, and the situation is dire. But architect Jeanne Gang sees an opportunity to clean up the river, to improve Chicago's water treatment system, and to revitalize a neighborhood. Just weeks after becoming the first architect in more than a decade to win a MacArthur genius grant, Gang released a slender book outlining her vision of how to fix the Chicago River. Reverse Effect, which is the result of a yearlong collaboration with the Natural Resources Defense Council, advocates completely separating Lake Michigan from the Mississippi River basin and restoring the natural flow of the Chicago River. Not only would the separation prevent carp and other invasive species from traveling between the Mississippi and the Great Lakes, Gang's proposal would use a physical barrier as a catalyst to reimagine an urban neighborhood and to introduce green infrastructure to Chicago's South Side. Back when Chicago was the world's hog butcher, animal waste from the stockyards and raw sewage were discharged directly into the Chicago River, creating a serious public health problem. So officials did what anyone with a backed-up toilet would do: they unclogged it and flushed it away. In 1900, work was completed on a 28-mile canal connecting the Chicago and Des Plaines rivers, reversing the flow of the Chicago River, and sending the city's waste down to the Gulf of Mexico. The canal created a vital shipping link between the Great Lakes and the Mississippi, but it also created a passageway for invasive species to travel between the watersheds. Now, the only thing preventing carp from entering the lakes is an electric fence that's both ineffective and expensive. An architect is an unlikely candidate to solve this kind of problem, but Gang isn't your typical architect. The 47-year-old Chicagoan has a knack for engaging with the environment in unexpected and clever ways. Her most prominent work, the 82-story Aqua tower in downtown Chicago, uses wavy concrete balconies to create a unique, undulating form. And her design for the (still-unbuilt) Ford Calumet Environmental Center on Chicago's far South Side would be built largely out of salvaged materials from the surrounding industrial area, and it would use a "Living Machine" artificial wetland to treat wastewater.  In Reverse Effect, Gang and her collaborators follow in the footsteps of Daniel Burnham, who recommended in his 1909 Plan of Chicago that all of the city's lakefront property should be preserved as parkland. Gang's plan calls for constructing a second waterfront by damming the river at its natural terminus and creating an inland lagoon that would collect and clean storm water. Separating the river from the Chicago Sanitary and Ship Canal wouldn't just stop the free flow of invasive species, it would require the city to improve its wastewater treatment infrastructure so that cleaned water could be returned to Lake Michigan instead of being sent downstream. The idea to separate the Great Lakes from the Mississippi basin was born out of a 2003 summit that was hosted in Chicago. Then, in 2010, NRDC issued a report offering some practical solutions for separating the waterways, and Studio Gang Architects hosted an event on the day of publication. At that event, Gang pulled up Google Earth on a computer and started thinking about some of the new city planning opportunities a hydrological barrier might present. In spring 2011, she taught a studio course at Harvard Graduate School of Design and asked students to imagine how a barrier between the river and the canal could serve as a catalyst for neighborhood revitalization and environmental remediation. (Student work takes up the bulk of the book, and much of it is quite thoughtful.) A close look at Studio Gang's digital rendering of the barrier and the surrounding area shows a strikingly utopian vision of a 21st century city in perfect harmony with nature. A patchwork of urban farms, aquaculture tanks, artisan workshops, and bird-watching stations surround lush wetlands. Kayakers paddle around beneath glassy, green-roofed high-rises, and existing city streets are virtually unrecognizable. It's hard not to ask: Where would the money come for all of this? How would the city acquire all of that privately-owned land? And why would anyone build a dozen skyscrapers – or even a single one – in the borderland between two sleepy industrial and residential neighborhoods? It's easy to poke holes in the idealized image or to criticize the plan's lack of depth, but as Gang explains, the book is a conversation piece, not a concrete proposal. "I present it here not as a formal, shovel-ready plan," she writes, "but in the hopes that its ideas will spark energy and enthusiasm among architects, designers, experts, policy makers, community members and all of the other people who will be needed if we are to successfully renew our waterways." But what will it take to move the plan beyond the realm of conversation, and to actually get some shovels in the ground? The Army Corps of Engineers has been dragging its feet on the issue, and unless the US Congress passes legislation prompting the Corps to act, Gang's plan will be just another pretty rendering.
Image courtesy of Studio Gang Architects.

Mashing up Angry Birds and spreadsheets to better visualise project time-tracking.

Tagged with
charts
dataviz
gaming
angrybirds
time
management
productivity

Re-examining Von Neumann probes, reconciling their apparent scarcity with the Fermi paradox.

Tagged with
pdf
paper
science
selfreplication
probes
fermi
seti
space
technology

Provides a new drush command which scans a project and creates a Sublime Text 2 autocompletion file. This allows completion of all Drupal core, contrib and custom functions with tab stop parameter completion.

Requirements
Requires drush to be installed as well as PHP5.

Installation
Place the sublime.drush.inc file in your ~/.drush/ directory.
The command works no matter which version of Drupal you have installed.

Usage
On the command line, navigate into your project's document root and run the drush command with:drush sublime
ordrush sc
The command will create the completions file and Sublime Text 2 should pick it up immediately and start using it for completing your functions.

Status
Basic testing on OS X shows the file is being created fine and autocompletion is working with Drupal functions as well as any contrib or custom functions.

This has not been tested on Linux yet and I'd really like some feedback from Linux users.

Here’s a challenge for the new year: use each month as an opportunity to try out a new web technology.

Set yourself small, achievable projects to work on and use 12412.org as a support group. We will all help to motivate each other and join in to offer help where we can.

Tagged with
web
technology
challenge
12412
learning

We want to use ctools' modal frames and field collection forms to create a better user experience.

As we know, ctools comes with a lot of useful apis and tools to use in our own modules. One of them is the modal frames.

Read moreSubmitted by Dominique De Cooman on Fri, 2011-12-30 08:50ctools modal framesDrupal 7 Using ctools' modal frames and field collection forms to create a better user experienceread more

The recent blog post, "A MOET and POET Curve-Fitting Approach to Project Management & Meeting Time Estimation" details my investigation into historical data to see what sorts of projects tended to have increased project management and meeting time. Our guess was that project timeline relative to project scope could heavily influence the overhead in terms of meetings and PM required. I was able to verify the hypothesis with our own project data and came up with two new theories that need some outside validation before I'd consider them laws by any stretch of the imagination, MOET and POET.
Read more

Typical planners and diaries force you into a confined grid when planning your day and taking notes. Scription Chronodex breaks that confinement by providing a freeform area to use text, drawings, or whatever to keep track of your days and get things done. More »

Think you are familiar with all of the variations of Batman’s batsuit? Then test your knowledge versus this comprehensive chart showing the significant versions from comics, movies, TV, video games, and theater since Batman’s debut in 1939.
This is only a small section from the chart, so browse on over to see the rest on the full-size version linked below.
View the Full-Size Chart (Very Large)
Batman Infographic: Every (Significant) Bat-Suit Ever [via Neatorama]

Hardware Upgrade: How To Install New RAM The How-To Geek Guide to Custom Photo Bokeh Photography With HTG: 10 Tips for Better Christmas Photos

Augmented reality’s been on our minds since our trip to Microsoft’s cutting-edge Building 99 research center earlier this month, so we were excited when we saw Sahar Fikouhi's Grid, an augmented reality game constructed with nothing more than an iPhone, the Qualcomm Augmented Reality SDK, Xcode, and a big room with a bunch of squiggly writing on the walls.

According to Fikouhi’s blog, "Grid is an Augmented Reality environment which provides a spatial configuration for real-time gaming at an architectural scale," meaning, "Grid is a life-size virtual maze game that you play by walking around." A video on the blog shows a number of players stepping gingerly through a 3D maze that's visible only on the screen of their phone as they...


Continue reading…

IN The ‘trouble’ with Android, Stephanie Rieger points out the ludicrous number of Android screen sizes on a typical UK client’s website and comes to this conclusion:

If … you have built your mobile site using fixed widths (believing that you’ve designed to suit the most ‘popular’ screen size), or are planning to serve specific sites to specific devices based on detection of screen size, Android’s settings should serve to reconfirm how counterproductive a practice this can be. Designing to fixed screen sizes is in fact never a good idea…there is just too much variation, even amongst ‘popular’ devices. Alternatively, attempting to track, calculate, and adjust layout dimensions dynamically to suit user-configured settings or serendipitous conditions is just asking for trouble.

I urge you to read the entire article—it’s brief yet filled with rich chocolatey goodness.

Responding to it, Marc Drummond concludes that responsive web design default breakpoints are dead and urges designers to “use awkwardness as your guideline, not ephemeral default device widths” and return to fluid design. (I believe he may actually be thinking of liquid layout—the kind we practiced back in the early mid-1990s when cross-platform and multi-manufacturer desktop screen sizes and pixel-per-inch ratios—not to mention strong user font, size, and color preference options—made fixed-width layout design challenging if not impossible. As I understand fluid design, it is merely another word for responsive design, in that it relies on CSS3 media queries set to breakpoints.)

We’ve lost our compass
Rieger and Drummond are hardly alone in feeling that “our existing standards, workflows, and infrastructure” cannot support “today’s incredibly exciting yet overwhelming world of connected digital devices” (futurefriend.ly) and that something new must be done to move the web forward. And of course ppk has been warning us about the multiplicity of platforms and viewports on mobile since 2009.

Agreed: that is an exciting and challenging time; that fixed width layouts do not address, and adaptive layouts (multiple fixed-width layouts set to common breakpoints) do not go far enough in addressing, the challenges posed by our current plethora of mobile screen sizes, zoom settings, embedded views (i.e. “browser” windows inside app windows, often with additional chrome) and what Rieger calls “the unintended consequences” that occur as these various settings clash in ways their creators could not have anticipated.

As consumers, we’ve all had the experience of seeing the wrong layout at the wrong time. (Think of a site with both mobile and desktop versions—whether these versions are triggered by CSS3 media queries or JavaScript and back-end magic is beside the point because technology is beside the point—good user experience is all this is supposed to be about. On a Twitter app on a mobile device, the user follows a link; the link opens in the browser built into the Twitter app. Which version of the site does the user see? The mobile one or the desktop? Often it is the desktop, and that can be a problem if the app’s version of the browser does not permit zoom. Even if it is a mobile version, it may be the wrong mobile version, or it may not fit comfortably inside the app’s browser window.) Considering our own experiences and reviewing Rieger’s chart, it is easy to share Drummond’s conclusion that breakpoints are dead and that all sites should be designed as minimally as possible.

If breakpoints are dead, responsive design is dead
Of course, if breakpoints are dead, responsive design is dead, because responsive design relies on breakpoints both in creative workflow and as a key to establishing user-need-and-context-based master layouts, i.e. a minimal layout for the user with a tiny screen and not much bandwidth, a more fleshed-out one for the netbook user, and so on.

But responsive design is not dead; it has only begun. It is not a panacea but was never intended to be. It is simply the beginnings of an approach.

I respect those colleagues who say breakpoints are dead, understand how they reached this conclusion, and am eager to see where it takes them in the coming months as they experiment with new methods, perhaps developing wonderful and unforeseen best practices. I hope design will be a brilliant part of these new methods, not something that gets abandoned to create a bland but workable lightweight experience for all.

But I also believe it is possible to draw a different conclusion from the same data. It is even possible, I believe, to say the present data doesn’t matter—at least not in the long run.

Tale of the chart
There was a time in the late 1990s when industrious web designers showed how atrocious CSS support was in browsers. Eric Meyer’s Master Compatability Chart for Web Review, formerly at http://www.webreview.com/pub/wr/style/mastergrid.html, was one of the best, but is no longer available for your historical viewing pleasure—not even at the mighty Wayback Machine. That’s too bad, as it would have perfectly illustrated my point. The chart used a variety of colors to show how each detail of the entire CSS specification was or was not supported (and if supported, whether it was supported correctly and completely, partially and correctly, partially and somewhat incorrectly, or completely incorrectly) in every browser which was available at the time, including, if memory serves, close to a dozen versions of Netscape, Explorer, and Opera.

Looking at that chart induced nausea and vertigo. It was easy to draw the conclusion that CSS wasn’t ready for primetime. (That was the correct conclusion at the time.) It was also easy to look at the table and decide that table layouts and font tags were the way to go.

That’s what most designers who even bothered looking at Eric’s chart decided, but a few (Eric and me included) drew a completely other inference. Instead of trying to memorize all the things that could go wrong in each browser, we created general rules for what worked across all browsers (e.g. font-size in px, floats for layout) and advocated design based on the things that work. This, I believe, is exactly what the futurefriend.ly and Move the Web Forward folks are doing now: trying to figure out commonalities instead of bogging down in details. (This is why some in our community have labeled futurefriend.ly and Move the Web Forward “WaSP II.”)

The other inference Eric, I, and others in the 1990s drew from Eric’s chart was that browser makers must be petitioned to support CSS accurately and correctly. We and many of you reading this engaged in said petitioning, and thanks largely to help from with the browser engineering community (from people like Tantek Çelik and Chris Wilson and organizations like Mozilla) it came to pass.

Of mice and markets
We cannot, of course, petition all the makers of, say, Android devices to agree to a set of standard breakpoints, because there are over 500 different Android devices out there, many of which will fail in the coming months—or if not outright fail, simply be replaced in the course of planned obsolescence AKA upgrading that drives the hardware segment. And each new product will in turn introduce new incompatibilities (AKA “features”).

In the short run it’s going to be hell, just as the browser wars and their lack of support for common standards were hell. But it is the short run.

500 standards is no standard. Give a consumer 500 choices and the price-driven consumer picks what comes with her plan, while the selective consumer begins gravitating toward a handful of emerging market leaders. Eventually this nutty market will stabilize around a few winning Android platforms (e.g. Kindle Fire) and common breakpoints will emerge. What The Web Standards Project achieved with browser makers, the market will achieve with phones.

Until that time, designers certain can abandon breakpoints if they can find a way to do good design under purely fluid conditions—design that pleases the user, satisfies the client, and moves the industry forward aesthetically. But designers who persist in responsive or even adaptive design based on iPhone, iPad, and leading Android breakpoints will help accelerate the settling out of the market and its resolution toward a semi-standard set of viewports. This I believe.

When I see fragmentation, I remind myself that it is unsustainable by its very nature, and that standards always emerge, whether through community action, market struggle, or some combination of the two. This is a frustrating time to be a web designer, but it’s also the most exciting time in ten years. We are on the edge of something very new. Some of us will get there via all new thinking, and others through a combination of new and classic approaches. Happy New Year, web designers!

The 101 Most Useful Websites [list updated for 2012]


This story, The 101 Most Useful Websites [Updated], was originally published at Digital Inspiration on 29/12/2011 under Websites, Tech Notes.

In recent years there has been an explosion of websites dedicated to tips, tricks and methods for being more productive. Every day my Twitter stream fills up with articles titled “5 Ways To…” and “7 Simple Steps For…” and “The [Insert Famous Person] Guide To…” [I resisted the urge to title this post "The 1 Easy Way To Be More Productive".]

The problem is that, while many of these articles contain elements of solid advice, they all feed the insatiable hunger we have for the killer app. The golden key. The one-size-fits-all system that will forever change how we do our work and enable us to unleash hell on our next project. We simply need to know the five steps and then the world will be ours. (By the way, I’m writing this with one finger pointed squarely in my own chest.)

The problem is that many of us are in love with the idea of being productive more than we really want to produce.

The real killer app? It’s understanding that the root word of the adjective productive is a verb: produce. What we’re really after is to produce something, not to feel productive. The something we produce might be bad. Really bad, actually. Or it might be great. But at the end of the day no one really cares how you produced it, they only care that there is something there to see, hear or poke.

A carpenter can know all of the best practices and tips and tricks for making things out of wood, but real learning only comes through splinters and mistakes. Knowledge means nothing without practice of craft. A manager can read every best-selling book about how to lead people, but that’s useless until there are emotions and real risk involved. It’s clinical. Sterile, even. (And yes, I’d rather you make something valuable today than read a single word of my book. I wrote it to inspire action.)

The problem is that many of us are in love with the idea of being productive more than we really want to produce.

The only job of the artist is to produce something. To make the ineffable tangible. How the artist does this is between the artist and the wind. No one needs to know.

So if you (me, or anyone) want to be more productive today, the best way to do so is to begin each day with a single question:

What will I produce today?

At the end of the day, what will exist that didn’t before? What will I bring into the world? What questions will I answer, problems will I solve, rock will I move? The delta is what matters. What changed about the world today because I existed?

Yes, read tips and advice articles and take value from them. That’s fine. (I do too.) But remember that at the end of your life, no one will care how many productivity hacks and tips you know. All that will stand – as a monument to your life’s work – is what you actually produce.

This past year was a big one for the QR code as the mobile call-to-action surfaced in campaigns for The Home Depot, Taco Bell and other mainstream brands. In some cases, however, brands are adopting QR codes without thoroughly thinking through their application.

Looking back over 2011′s QR code campaigns, Mike McGuinness, VP of sales for QRblaster.com, a firm that generates QR codes, has identified five of the top QR Code fails of 2011. If you’re a marketer eager to hop on the QR code trend, you might want to learn from these negative examples:


1. Red Bull


Red Bull ran a campaign featuring subway ads with QR Codes. Sounds like a great idea until you consider that most subways don't offer mobile phone connectivity, making the codes inaccessible.
Click here to view this gallery.

More About: Advertising, continental, esquire, Marketing, Mobile, nirvana, QR Codes, red bull, trending, washington redskins

Adobe has two major new products in free public beta right now – Adobe Edge for developing HTML5 animations (like Flash Pro but outputs HTML5) and Adobe Muse which allows designers to create websites as easily as creating a layout for print. Adobe says interest in these betas has far exceeded their expectations.

Both tools will be shipping in their first official release in 2012. And while it’s been known for a while that Muse would be “subscription-only,” we now know too that Edge will likely follow the same path. Furthermore, neither will be included in the Creative Suite.

At a recent Adobe Analyst meeting during the question and answer session, it was revealed that Adobe is planning for both new design tools to be available only via subscription or through their new “Creative Cloud” software rental offering – and neither will be a part of CS6 – in other words, they will only be sold separately.

Here it is at the 33-minute mark of the Q&A:

Q: You talked about Edge and Muse… Just wondering if those will be included in the CS6 upgrade, or only available through the Creative Cloud?

A: So, we’ve announced Edge and Muse, and they will be available in the CS6 timeframe. They’ll be available as point product subscriptions and through the Creative Cloud; the current thinking is not that we will be adding them to Creative Suite. Again as [CEO] Shantanu pointed out, we do expect and anticipate adding and driving more value into the Creative Cloud, that is the destination that we believe adds the most value to our customers, and we want to continue to drive people in that direction.

So while all current applications in the Creative Suite (like Photoshop, Dreamweaver, InDesign, Illustrator, etc.) will continue to be available with perpetual/permanent licensing in CS6, and sold either standalone or as part of a larger suite, neither Edge nor Muse will be offered in these customary ways. This is according to Adobe’s shared current thinking, which of course is always subject to change.

See more from this analyst call here.

In other news, Adobe Edge has a new free beta version slated to be out soon – the Preview 4 release, and here’s an advance look:

Get the scoop:

Read more about Adobe’s Creative Cloud, including the impact on Acrobat & Lightroom.
See when CS6 is scheduled to be released, with big changes to Adobe’s upgrade policy.
Watch the latest sneak peek videos for Photoshop, InDesign, Premiere Pro, and more.

Give your input before the products ship – what would you like to see from Adobe in 2012?  Share your thoughts below or at Adobe’s official feature request “wishlist” or on Adobe Ideas…

Related PostsAdobe: New Tablet Apps Soon, “Doubling-Down” on HTML5 for CS6Acrobat & Lightroom: Impact of Creative Cloud and Upgrade ChangesAdobe: The Future of Flash – and HTML5 (Questions Answered)The New Adobe Creative Cloud: What It Is and Why You Should CareInDesign (CS6?) Sneak Peek: Liquid Layout from Adobe MAX 2011
Related StoriesAcrobat & Lightroom: Impact of Creative Cloud and Upgrade ChangesAdobe: The Future of Flash – and HTML5 (Questions Answered)InDesign (CS6?) Sneak Peek: Liquid Layout from Adobe MAX 2011

Ready to refresh your outlook for 2012? Check our super-simplified guide to setting goals for the new year, and actually accomplishing them.

Notepad++ is becoming more and more versatile and useful text editor with every new plugin added to its arsenal. Today, we bring you another plugin called NppExport that allows you to generate report of your source code in HTML and RTF format. You can also copy the source code to Windows clipboard in specified format (HTML or RTF), and paste it in your default Word Processor to get highlighted syntax of code. It may come helpful in situations where you need to share the code with those who don’t have the required software IDE to view the code with highlighted syntax.

To install NppExport, open Plugin Manager from Plugins—> Plugin Manager—> Show Plugin Manager. Under Available tab, select NppExport and click Install.

Once installed, click Plugins—> NppExport to access Export to RTF, Export To HTML, Copy RTF to Clipboard, Copy HTML to Clipboard and Copy All Formats to Clipboard options.

Select, for instance, Export to HTML to save the code in HTML format with the highlighted code intact with the same colors. The code can then be viewed in any regular browser.

Npp Export is an open source plugin that works on all versions of Notepad++. Testing was done on Notepad++ 5.9.5.

Download NppExport

More On AddictiveTips Right Now

No related posts.

An interactive timeline where we, the wise crowd, can add our predictions (although the timeline for the past, showing important technological breakthroughs, is bizarrely missing Cooke and Wheatsone’s telegraph).

Tagged with
nytimes
timeline
interactive
prediction
future
technology
computing
history

Our old and busted blog that we decided to rebuild

Things have been insanely busy around here at ZURB this past year. As you recently read, we did more open source projects than ever before. Yet we still managed to squeeze in time to make some changes to ZURBlog so that it looked freakin' awesome on any device, which you astute web surfers may have noticed. Over the course of several months, we worked vigorously to build a brand-spanking new and sexier blog with nifty features, such as the ability to comment on posts with Facebook and finding older posts faster.

The Problem

Our old blog just wasn't performing up to snuff. That's because our old system was based on Rails 2.3 and chained to the behemoth ZURB.com master repository, which several programmers had hacked over in the course of five years. As a result, our code base had grown to a gargantuan scale over the years and was all interconnected. A slight change would be enough to crash the entire application, and that would bring an engineer who deployed the latest change to tears.

We realized that making any changes to the blog would require some hacktackulous programing.

The Remedy

So the team deliberated. Briefly. Then it hit us! We needed to move everything off ZURB.com, transforming it into a static site that would become the central hub for everything ZURB. The rest of the site — the portion that required a more dynamic experience — would be deployed as individual applications thanks to a nifty feature called sub-URIs.

Our blog would be the first to adopt this new structure, ushering in a new era of blogdom.


Rails Action Caching

Besides severing the blog’s ties to ZURB.com, we wanted to boost the speed into warp. So we upgraded to Rails 3 and built the blog with action caching.

The old blog, bless its heart, had to make the trek from your computer to our server, where it plummeted into the bowels of the ZURB.com database to fetch your post — for each and every page request.

Rails action caching enabled us to halve the request time, which prevented a bunch of unnecessary trips to the database, and made for a happier reading experience.

Nix Out Third Party APIs

As part of the rehabilitation process, the dodgy and sly third party APIs — Twitter, Delicious , and Flickr — had to be quarantined and given second-rate seating. Something we wanted to avoid was making direct requests to the Twitter and Flickr APIs, which our old blogging system did continuously and without persisting any data in a database.

We know ... this was silly, but we’ve since come to our senses.

Before, if Twitter went down — which, by and large, happens almost every day — our site would take a beating. We remedied this by using the amazing wheneverize to schedule all of our processes and run them in the background. The new code fetches new Twitter updates and Flickr photos every few hours and stores them in the database.

The blog on a mobile phone.

Hot New Features

Yes, we’ve sped up the old blog, but we also added some hot new features. You can now search through our growing collection of posts, leave a comment through Facebook, and spread the word through better social interactions. You can also read the blog on your mobile phone, tablet, and desktop thanks to Foundation.

Built on Foundation

Using Foundation’s grid system, we were able to see what the blog would look like across those devices. The blog’s new layout was built nearly identical to the old one, but we gave it a more modern polish and also made it easier to search through our previous posts.

Searching with Sphinx

We’re currently somewhere around 800 post and we're posting more and more everyday. So we thought it was necessary to make it easier for our users to search for our snazzy CSS3 buttons article through the blog rather than going through Google.

The new search functionality is built on the ever popular Sphinx via the Thinking Sphinx Rails gem by Pat Allan over at Freelancing Gods.

Facebook Comments

Besides making searching easier, we've made it a snap to leave a comment through Facebook. With more and more people using Facebook to comment, we could no longer avoid building a Facebook presence. (You can also comment using Yahoo or AOL!)

We must say, it has paid off. It has allowed us to quickly engage with our Facebook contingent, syncing up with our friends and customers through another channel.

The only major concern we've had with Facebook comments is keeping our comment count in sync via the Event.Subscribe method that Facebook suggests. Sometimes that method just doesn't fire correctly, and our comment count gets out of whack and has to be manually updated.

But that shouldn’t stop you from commenting below and telling us what you think about the changes we made to the new blog.

Our own Joshua Topolsky recently toured Microsoft's research campus, where the company's cooking up all kinds of crazy tech. Today we're pleased to share a look at Microsoft's Envisioning Lab, a space where the company shares innovations from its visions for the future.

In this clip, Microsoft's Harald Becker walks Josh through the lab, showing off a number of devices and concepts. Most notably, Becker shares a future vision for the Office suite — it's got a slick, free-flowing interface on a futuristic looking computer with numerous touchscreen monitors. With the exception of Microsoft's Segoe UI typeface and some Metro UI elements, the concept is a far cry from anything Microsoft's got on the market right now. Becker says you should...


Continue reading…

The hive mind of servers behind Watson may have conquered Jeopardy, but now it's turning its attentions to a more altruistic challenge — choosing the best treatment for cancer sufferers. Set to be piloted by doctors at Cedars-Sinai research hospital in Los Angeles, the system will offer evidence-based suggestions to doctors on what treatments could work for each person using case studies and the records of other patients. The server will be housed at insurance company WellPoint's HQ and accessed via the internet for easy expansion for other oncology departments in the future. Language recognition technology from Nuance is integrated into the software, meaning that using alternative phrases or wording shouldn't cause the system to...


Continue reading…

Champions of Design is a paperback book and free-to-download PDF published in December 2011 by Jones Knowles Ritchie (jkr).

“In this book we celebrate twenty-five great works of design, the people who created them and the clients who bought them.”

Here’s an excerpt, featuring on one of the 25 brands.

Penguin
Given its beloved status as a British institution to rival the BBC, it’s worth remembering what a revolutionary idea Penguin originally was. The company’s cheap but well-made, well-designed books found a new audience of working and middle-class readers that few believed existed. The future really was orange.

If the point of a brand mark is to guarantee quality, then Penguin excels. My father, a lifelong devotee, describes it as ‘my university’. Many share his trust and appreciation. Like holding a Guinness at the bar, one feels part of a select band when reading a Penguin on the Tube or beach. Generations of investment in great design has helped earn this status.

Photo source: James Muspratt (not in Champions of Design book)

The original (Tube map inspired?) system of distinctive coloured stripes met the business strategy; they would have been cheap to produce, compared with myriad cover designs and illustrations. However, we don’t want cheap brands. We want great brands cheap. Penguin used good paper, quality binding and typography that allowed the words to breathe. They were designs of hardback quality in soft covers.

This flightless bird has adapted beautifully over the years, radically changing its design approach in response to market forces and trends, from the graphical covers of the 60s, to the commercial designs of today. Penguin achieved coherent change mostly from having a strong in-house design culture. This ethos was not elitist. Edward Young was a 21-year-old office junior when he drew the logo and devised the colour-coding system. A secretary came up with the name.

Luck also plays a part in great brand design. Penguin was still young as World War II erupted, and its format just so happened to prove the perfect fit for a battledress pocket. On such quirks are great brands built.

Written by Silas Amos, a founder designer at jkr in 1990.

—

Each of the 25 case studies includes a brand timeline and “Did you know?” page.

Did you know that in 1989, following Penguin’s publication of Salman Rushdie’s The Satanic Verses, bombs were planted in a Penguin bookshop in York and in Liberty’s in London where the company also had a concession?

Download your free copy of the PDF here on the jkr website.

Somewhat related: Penguin logo evolution.
Published on David Airey, graphic designer

Related posts on David Airey dot comJust My Type (14)Aesop on hiring a professional (6)Symbol, by Angus Hyland & Steven Bateman (6)Eight languages (35)Designing Brand Identity (22)

You may ask yourself, among other things, why we need another blog about food?  What might compel you to continue reading, when you already know damn well how to make a fluffy quiche, and you are less swayed by one person’s opinion than the egalitarian democracy of Yelp?  Fear not, because this is not just another blog about food, but a way to think about food as infrastructure that defines and is reciprocally defined by urban development.  To keep it interesting for a broader audience, I also promise to pepper the content, eh hum, with various other media, travel notes, exotic recipes, maps, diagrams, and the occasional (potentially) humerous anecdote.

 

 

Something about me

My name is Chris DeHenzel.  I was born (my mother swears “induced”, so that the doctor wouldn’t miss a minute of the game) during half-time of Super Bowl Sunday, in 1982.  Later that year Time Magazine would name “The Computer” the person of the year.  My biggest fear, as a toddling explorer in rura...

Autodesk, the makers of AutoCAD and 3ds Max, has had several Android applications out on the Market including a tablet version of their industry favorite AutoCAD and of course, our favorite sketching application, SketchBookX. Well today, we will be going over some of the features and goodies available that make this free app the bee's knees when it comes to... Read more

View source.

Tagged with
web
singleserving
http
viewsource
browsers

Advertise here with BSA
Spine Mobile is a JavaScript framework, built on top of SpineJS, for building mobile web apps that look and feel native.

The framework comes with specialized controllers, panel layout, hardware accelerated transitions and touch events.

Apps are developed with HTML5-CSS3 and the easiest way of building Spine Mobile apps is with Hem, Spine.app, GFX and jQuery. Also, you'll need Node.js.

It is well documented and there are open sourced examples to easily get started.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Popular recipes in July included a warm chickpea salad, lemon braised chicken with mint pesto and beans, and a dish of old-fashioned strawberry shortcake.

TOP ROW
• 1 Warm Chickpea Salad with Cumin and Garlic
• 2 Lemon Braised Chicken and Beans with Mint Pesto
• 3 Cheesy Corn Bake
• 4 Old-Fashioned Strawberry Shortcake
• 5 Grits with Corn, Goat Cheese and Roasted Tomatoes
Read Full Post

"Start with questions, not answers," says visionary designer Yves Béhar in this in-depth 99% talk on his seven principles for "holistic making."

Steven Johnson describes the beautifully chaotic way that ideas collide and coalesce. Oh, and this bit…

Listening to Cerf talk about the origins of the Internet — and thinking about the book project — made me wonder who had actually come up with the original idea for a decentralized network. So that day, I tweeted out that question, and instantly got several replies. One of those Twitter replies pointed to a Wired interview from a decade ago with Paul Baran, the RAND researcher who was partially responsible for the decentralized design.

That reply on Twitter was from me!

Tagged with
ideas
creativity
remix
coincidence
mashup
networks
process

Add this one to your Instapaper/Readability queue: the behind-the-scenes story of the train wreck that was the 1978 Star Wars Holiday Special.

Tagged with
starwars
television
article
special

Advertise here with BSA
Etherpad is an open source application for working on the same document in real-time with any number of users.

It is a web-based word processor that has formatting options, supports infinite undos and can import/export documents from/to multiple formats.

Each document gets a unique URL and users can simply go to that URL to start collaborating.

Users working on the same document can see each other's updates instantly, can chat with a built-in messenger.

The application has 2 versions, full and lite, where the full version comes as a debian package and the lite version completely based on Node.js (which is much easier to deploy).

There is also an API provided for easily interacting with the application and wrappers in multiple scripting languages are created for it.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

apachebench is an excellent performance and load-testing tool for any website, and Drupal-based sites are no exception. A lot of Drupal sites, though, need to be measured not only under heavy anonymous traffic load (users who aren't logged in), but also under heavy authenticated-user load.

Drupal.org has some good tips for ab testing, but the details for using ab's '-C' option (notice the capital C... C is for Cookie) are lacking. Basically, if you pass the -C option with a valid session ID/cookie, Drupal will send ab the page as if ab were authenticated.

Instead of constantly going into the database and looking up session IDs and such nonsense, I have a simple script, which is quite revised from the 2008-era script originally from 2bits that worked with Drupal 5, which will give you the proper ab commands for stress-testing your Drupal site under authenticated user load. Simply copy the attached script (source pasted below) to your site's docroot, and run the command from the command line as follows:

# [PATH_TO_SCRIPT] [HTTP_HOST] [URL_TO_TEST] [#_SESSIONS] [#_REQUESTS]$ /path/to/drupal/root/ab-testing-cli.php www.example.com http://www.example.com/node/1 2 10
You'll get back the command to paste into the cli in order to test the URL you provided as an authenticated user. (Note: The sessions table needs to be populated for this to work, so someone (or a few someones) will need to have logged in during the past few hours/days for this to work correctly).

Here's the full code (file attached to bottom of post):

<?php/** * @file * * Script to generate ab tests for logged in users using sessions from database. * This script is based on an older script by 2bits for load testing Drupal 5, * located at: http://goo.gl/4pfku * * Place this script into the webroot of your Drupal site. * * Usage (from command line): *   # [PATH_TO_SCRIPT] [HTTP_HOST] [URL_TO_TEST] [#_SESSIONS] [#_REQUESTS] *   $ php /path/to/drupal/root/ab-testing-cli.php example.com http://www.example.com/ 2 200 * * After the script runs, it will output a list of commands for you to use to * test your website as a logged-in user. */
// Set the variable below to your Drupal root (on the server).
$drupal_root = '/path/to/drupal/root/';

// If arguments not supplied properly, warn user.if ($argc != 5) {  $prog = basename($argv[0]);  print "Usage: $prog host url concurrency num_requests\n";  exit(1);}

// Get the arguments for ab.$url = $argv[2];$number_concurrency = $argv[3];$number_requests = $argv[4];

// Set this directory to your drupal root directory.chdir($drupal_root);

// Set up required variables to help Drupal bootstrap the correct site.$_SERVER['HTTP_HOST'] = $argv[1];$_SERVER['PHP_SELF'] = basename(__file__);$_SERVER['REMOTE_ADDR'] = '127.0.0.1';define('DRUPAL_ROOT', getcwd());

// Boostrap Drupal.require_once('./includes/bootstrap.inc');drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);

// Get as many sessions as the user calls for.$results = db_query_range("SELECT sid FROM {sessions} WHERE uid > 1", 0, $number_concurrency)->fetchAll();

// Loop through the results and print the proper ab command for each session.foreach ($results as $result) {  $cookie = session_name() . '=' . $result->sid;  print "ab -c 1 -n $number_requests -C $cookie $url\n";}?>

AttachmentSize

ab-testing-cli.php_.txt1.73 KB

Tags: drupal planetdrupaldrupal 7cliphpperformanceabscalabilitysnippets

This has been a crazy year for us here at ZURB. In between laser tag, pumpkin carving, tons of great soapbox talks and one madcap 24-hour ZURBwired, we did more open source projects than we ever have in the past. It's been tremendously fun and extremely rewarding as well as difficult, frustrating, and challenging. Here's the top 4 things we learned on our open-source escapades in 2011.

The Need for Open Source Tools is High
We don't go out of our way to broadcast our open source efforts, our marketing efforts are usually devoted to other aspects of our business. On the ZURBplayground, we post pages talking about plugins or tools we've created and made available, and we'll blog or tweet a bit, but the adoption and feedback we get on these things is incredible. With very little effort to spread the word, these things really get around.

The Bar for Quality of Open Source Tools is High
We try and ensure that the open-source code we push out is as good as we can make it — and we still need to make it better. As soon as you make something available, even when it's free, you will immediately start to hear how it could be better, or more robust, or more capable. Tools like jQuery have set a very high bar for open source (at least technically).

Open Source Requires Serious Commitment
When we released Foundation, we decided from the start that we were in it for the long haul. No matter how successful it might be out of the gate, we knew there was a degree of dedication and a show of commitment that would be required for people to trust a new tool. We were right, and our day-to-day commitment to these projects is surprisingly high.

Open Source is Full of Fascinating Challenges
Build something open source if you ever want to know if you can handle building something well, cleanly, and elegantly. You'll learn more about the edge cases, unique needs and general mindset of users than you ever will from other avenues.

Here's a recent example: Foundation lets you tag items to be shown on specific types of devices, like phones or tablets. Our implementation wasn't perfect – some laptops would appear as tablets and some tablets as desktops. After exhausting our options in CSS alone we decided we had to use Javascript — but how? Whatever we did would need to work everywhere Foundation works (which is pretty close to everywhere), and it would need to work without any new effort or a learning curve. It would need to fall back in case the user didn't include our JS, or even if JS was turned off. Every decision we made would have ramifications for thousands of users, and would cause a flurry of emails asking for support if we did it wrong (or even if we did it right).

We settled on including a version of Modernizr with a CSS fallback, but we'll no doubt hear from users soon about how that's solved their problems and created some new ones. That's the way it goes.

Bonus: It's Fun
We've had a pretty great time working on open-source projects this year. It's tough and demanding, but the payoff is great. Not in terms of dollars (although our efforts do have an impact on our consulting and product business) but in terms of community, and the joy of seeing someone use something you worked on to get great things done.

We'd love for you to chip in on our projects, including Foundation, the Sass and Rails gem versions of it, Joyride, Reveal, Orbit, Flickrbomb, or any of our other playground pieces where we always try to keep things as open as we can.

Here's to more awesome open source projects in 2012! Let us know what you're working on, we'd love to see it.

If you're interested in hearing more, we were interviewed for The Changelog podcast.

Zombie films, zombie walks, zombie shops, zombie TV series: our darkest fears are now mainstream.

I think Rebecca is on to something here. Everyone has been so quick to self-identify as a UX designer while marginalising visual design as a purely surface-level layer …but it’s all part of the design process.

Tagged with
design
visual
ux
graphic

#Reading → Advent Calendar via

A good round-up of what web development means today …and what web developers need to do to keep pace.

Tagged with
web
development
mobile
responsive
typography

From the folks at Viewpoint Creative:

[Via Ben Zibble]

For the past six years, IBM has been issuing their 5 in 5 reports that present their vision of what technologies will mature in the next 5 years and become commonplace. Their list for 2011 (left) includes innovations that have the potential to change the way people work, live and interact during the next five years. This year's five in five are: Energy - People power will come to life; in addition to smaller, longer life batteries we will capture more of our own movements, the water in home pipes, bicycles, and ocean waves to convert it into useable energy.Security - You will never need a password again; Biometric passwords like retinal scans and voice recognition will become more common so we don't have to remember a dozen different passwords. Interfaces - Mind reading is no longer science fiction; Keyboards, the mouse, and voice recognition will be joined by another way to interact with computers - tapping into our own brain waves and transforming them into commands.Access - The digital divide will cease to exist; 80% of the 7 billion people on the planet will have access to technology in the next 5 years.Analytics - Junk mail will become priority mail. Our devices will gather and use information without our having to ask for it. Booking events, changing our schedules based on the weather, and even online purchases will be done for us automatically based on our known desires and preferences.The IBM 5 in 5 is based on market and societal trends as well as emerging technologies from IBM's research labs around the world that can make these transformations possible. You can find earlier predictions online to see how accurate they have been in the past.Click on the heading above to see IBM's video announcing this year's 5 in 5 forecast.

Reading interesting articles can be both relaxing and rewarding, but reading them online can be quite tiring. dotEPUB, a Chrome extension, allows you to generate eBooks from webpages that you can read later. When you come across interesting but lengthy articles or webpages, dotEPUB allows you to download them as EPUB eBooks. These can then be read on different EBook readers, including all major smartphone platforms. dotEPUB can also be of help when you don’t have access to the internet and want to read something. It lets you create a library of all your favorite articles, posts and more.

Once you’ve installed the extension, a dotEPUB button is added right next to the URL bar. Whenever you find an interesting article online, just click this button to generate an eBook. The dotEPUB eBooks come with a green title page, which consists of the title of the page and its URL. Your eBook is also compatible with multiple e-readers, so choose one and enjoy reading.

Images and links are all removed from the converted webpage, so you can easily focus on your reading.

The dotEPUB options allow you to enable the Immersive mode and select a language from the drop-down menu. Three languages are supported, which are English, Spanish and Catalan. The immersive mode removes all links and images from a webpage. Even when you disable the Immersive mode, you might not be able to download images within an article.

dotEPUB is an easy-to-use extension that allows you to read articles when offline. It is free, and does not require any registration. It can be grabbed at the Chrome Web Store link below.

Install dotEPUB For Google Chrome

More On AddictiveTips Right Now

No related posts.

Brad is on a roll. He knocks it out of the park again, this time talking about the difference between supporting the huge range of mobile browsers out there compared to trying to optimise for them.

Tagged with
mobile
browsers
ios
android
blackberry
opera
futurefriendly
ffly
support

By Moussa Beidas

In centuries past, branding a makers mark on ceramics and hand made goods was done to prevent copies or recreations of the real thing. Their purpose was to guarantee the future integrity of their brand and encapsulate the design and style from which they stemmed, (timelessness). Todays marks do just that for businesses; a successful visualization of a business’ experience ensures its longevity through the ages and cements its purpose in the future of a modern social environment. 

This might seem to be a clear chain of thought, but identifying which brands practice what they preach is a different matter. The true nature of endorsement now only works with high end + durable products, such as Patek Philippe.  Oddly though, brand owners from many other industries think otherwise which is perhaps why they like to endorse products needlessly. Everything from food to electronics is falling into that very same category. Not because they want to remain relevant, but because they don’t want to be the same.

Same versus relevant. The parameters that define “same” are consistent quality assurance defined by the era of its relevance. 

Lalique, the French glass maker, would not release new products with their respective parameters (methods of glass making like blowing, which was the standard or wax moulding which created one offs every time, greatly increasing the price and value of the product). But when they did, they looked to redefine relevance. Apple began their reign doing just that: taking available technology and crafting a timeless amalgamation that would remain the standard for decades to come.

Is stretching appropriation the standard now? Could the brand mark purpose grant the same consolation prize. A heritage or belief system in a service that is just as sworn by as a Patek Phillipe. Why stop at Apple? Could perhaps the service from the Four Seasons or the Ritz be placed in that category for their consistency. Managing to keep opulence relevant.

In last week's episode of On The Verge, our own Josh Topolsky visited Microsoft labs to scope out the facilities and see what the gang in Redmond is up to — we're now able to give you an extended look at Microsoft's model shop, where hardware prototypes for keyboards and other devices are designed and printed in 3D. Karsten Aagaard, user experience designer, says that the team tries to print 3D prototypes in "real-time" so that designers can work rapidly. If a prototype design is submitted at 5PM, the team endeavors to have them printed by the time the designers return the following morning. 

Using various UV cured liquid epoxies, the printer is able create items with multiple parts: in the video, Aagaard shows off a working wrench...


Continue reading…

Ten years ago, when the Massachusetts Institute of Technology created its OpenCourseWare project, giving free access to college course materials was a revolutionary concept. Now, the school plans to take the spirit of OCW to the next level by launching MITx, a new online learning platform.
Like OCW, courses taught on the MITx platform will be completely free. What sets the new program apart, though, is that students who complete the courses and demonstrate mastery of the content will be able to receive a certificate that can be added to a resumé (certificates will not be free). The venture is not-for-profit, so MIT officials say they’re working to make the credentialing component of the project "highly affordable".
The head of the project, provost L. Rafael Reif, says MIT has been long been "experimenting with integrating online tools into the campus education"—including everything from online tutors and crowd-sourced grading to machine learning and automatic transcription. Through MITx, the university hopes to use these pioneering learning technologies to "offer the best possible online educational experience" to anyone who wants it.
An experimental prototype version of MITx will launch sometime in spring 2012 with a few classes, and the project will grow over time. MIT leaders hope other educational institutions—including K-12 schools as well as universities and other nonprofit learning initiatives—will eventually participate in MITx. To that end, they plan to make the open-source software free to anyone who wants to use it for their own online learning projects.
Photo via (cc) Flickr user vobios

Autodesk 123D is the free 3D modeler for everyone. It brings a powerful 3D solid modeling tool with accuracy to satisfy the tinkerers, DIYers, and Makers. This is not another simple imprecise faceted surface tool but a 3D solid modeler with accuracy at the core including sharing common DNA with Autodesk Inventor Fusion. You can design almost anything and produce 3D parts even send them to a 3D printer or laser cutter. I am hoping to get a MakerBot 3D printer kit soon from Santa that will allow me to be my own personal manufacturing shop designing parts in 123D and printing them as solid ABS plastic parts.
You or someone you know perhaps a young aspiring Maker can design Christmas ornaments or other holiday decorations and then share them or even print them on a 3D printer or Shapeways or create the 3D model in cardboard or plywood using the free 123D Make.

This Beta 8 adds sketching enhancements, 3D printing, and laser cutting. Beta 8 Overview Videos: What's new in 123D Beta 8 - Part 1 http://youtu.be/hIquH5FnqBo What's new in 123D Beta 8 - Part 2  http://youtu.be/oWkO3q0_quY
123D Snowman Challenge http://blog.123dapp.com/2011/12/123d-snowman-challenge
Go ahead and give the free Autodesk 123D a try or if you have someone that asks you “what free 3D design application can I get to release my inner engineer or Maker”, you now have a perfect response. Try 123D! http://www.123dapp.com/123D
Cheers, Shaan

QuickText is a multi-purpose text expansion/text substitution plugin for Notepad++, that lets you create tags for most frequently used code modules and structures, so that you don’t have to write them over and over again. In a nut shell, QuickText is to Notepad++, what ReSharper is to Visual Studio. While it offers a convenient configuration console to define the tags and their substitution text, you can easily make changes to defined substitution text, and edit and modify ‘tags’ text. The Tab key is a trigger key. Once you’ve defined the tags and substitution text, all you need is to write the tag, press the trigger key, and it will replace the tag text with defined substitution text.

QuickText supports a wide range of programming languages, including HTML, PHP, C, C++, XML, ASP, SQL, VB, Objective-C, Java, Fortran, Perl, Assembly and so on. If you’re a web developer and hate to press ‘greater than’ and ‘less than’ keys on keyboard while writing HTML, PHP, XML etc tags , QuickText will change the way you define tags in HTML and other markup languages; you can associate head tag with <head>, and /head with </head> in its Options dialog, Once set up, just write head and then press Tab key, it will immediately replace it with <head>. Similarly, you can associate as many tags as you want to save not only the time, but also the effort involved in complying with programming language syntax.

Since it doesn’t impose a limit on lines or characters that can be substituted, you can define an entire code module, such as Java class declaration with indented code block and starting and ending parenthesis, with tag to quickly replace it with defined code module. QuickText comes with both Unicode and ANSI versions. Before you begin installation, bring up About Notepad++ dialog from ? menu, and check the Notepad++ edition. If it’s UNICODE, unzip the download package, and copy QuickText.UNI.dll to Notepad++/plugins folder, whereas for ANSI edition, copy QuickText.ANSI.dll to Notepad++/plugins folder.

Once correct plugin version is copied, launch Notepad++, and open Options from QuickText menu, which is accessible from Plugins.

In QuickText Configuration, just pick the language from left sidebar and then enter the Tag name. Now, you have to enter the substitution text that will replace the tag text. The screenshot below shows if-else construct tag for Java language. Likewise, you can create tags for just about any language of your choice.

Moreover, if you want to create text expansion function for normal text, choose Normal Text from Languages, and then add text tag followed by substitution text. Clicking OK will save the changes made to text snippet repository.

Since QuickText deals with saved text snippets separately according to the defined programming language, you can create multiple snippets with same name for different programming languages. It first checks the file type, and then replaces the text snippet. This means you can create tag by the name of Class for Java, C, C++, VB and other programming languages without having to worry about text replacement conflicts.

Sadly, it doesn’t support defining text placeholders, which would’ve made it even more useful, but it brings the most powerful text substitution controls for application developers. If you use Notepad++ for your coding projects, we recommend using this extension to speed up the development process.

It supports Notepad++ 5.4 and higher. Testing was carried out on 5.9.3.

Download QuickText

More On AddictiveTips Right Now

No related posts.

Muse beta 5, with over 40 updates including key image and output improvements and bug fixes, is now available to download.

Learn more about Muse beta 5
Download Muse

Keeping visitors to your site reading and clicking (and -- let's be honest, viewing ads) once they've finished an article can be challenging. Often, lists of related articles or hot news are embedded at the end of each article to provide readers with an easy "next step," but these can easily be lost in the noise of a dense footer or link-heavy site. Enter Slidebox, a svelte module that uses interesting jQuery tricks to prompt users who've finished an article with a smoothly animated link to another one.

Setting up Slidebox is a snap: just turn it on, tell it what node types its "Next article" box should appear on, and you're ready to go. While it's possible to tweak the values that control how long the Slidebox animations should take, the defaults it ships with are sensible. The magic happens once you pop open a node and scroll to the bottom of its content: a tidy little box slides out from the right side of the window, prompting you with the title of the "Next Article." It's simple, attractive, and easy to dismiss. Also, because it appears when the user scrolls to the end of the node content, not the bottom of the page, it doesn't require that readers wade deep into a crowded site's footer or other "below the fold" content to see the link.

Definitions
Storyboarding is the technique interaction designers and information architects have adopted from film and animation to specify interaction in user interfaces. Storyboards in interaction design typically show a sequence of key frames that depict when a change in state occurs in the interface. They are often illustrated with a linear, multi-cell diagram, often accompanied by annotations to describe the actions taken by the user, and the responses or behavior of the system.

In Interaction Design
Storyboards were originally conceived at Disney Studios about seventy years ago. They are a sequential series of illustrations or rough sketches, sometimes including captions of events. Storyboards provide a synopsis for a proposed story (or a complex scene) involving its action and characters.

Storyboards transfer well into the world of the user interface. With a storyboard we can present as frames each step in a sequence of user interactions. Viewing the interaction in a story format helps to refine the interaction and provide feedback for user testing.

Source: "Storyboarding Rich Internet Applications with Visio," by Bill Scott. Boxes and Arrows.

In Film
"a sequential series of illustrations, stills, rough sketches and/or captions (sometimes resembling a comic or cartoon strip) of events, as seen through the camera lens, that outline the various shots or provide a synopsis for a proposed film story (or for a complex scene) with its action and characters; the storyboards are displayed in sequence for the purpose of visually mapping out and crafting the various shot divisions and camera movements in an animated or live-action film; a blank storyboard is a piece of paper with rectangles drawn on it to represent the camera frame (for each successive shot); a sophisticated type of preview-storyboard (often shot and edited on video, with a soundtrack) is termed an animatic"

Source: AMC Film Site

See also definitions from Wikipedia.

Examples

Professional development goal-setting is challenging for designers who sometimes feel like they have no control over their destiny. Ask your manager for the right things, and you may yet achieve your goals.

Folded into shape and held together with a couple of rubber bands, the Blinky from d-school pals Liv and Léa holds a standard roll of 35mm film that’s manually advanced using wooden dowels. It’s compact size offers ease of use and the standard film size makes processing a snap. [via DIYP]

Elements can have multiple class names. For instance:
<div class="module accordion expand"></div>Then in CSS, you could match that element based on any one of them:
/* All these match that */
.module { }
.accordion { }
.expand { }You can limit your selectors to match only if several of them are present, for example:
// Will only match if element has both
.accordion.expand { }But what about other attributes?Class names are unique in the ability outlined above. Other attributes are not treated as "multiple values" just because they have a space in them. For instance:
<div data-type="module accordion expand"></div>This element just has a data-type attribute with a value of "module accordion expand", not three unique values "module", "accordion" and "expand". But let's say we wanted to be able to select elements based on individual values like we can with class names.
We could do it by using a "*" substring matching attribute selector which will match if the provided string appears anywhere in the value:
[data-type*="module"] {

}or only match when multiple of specific "values" are present:
[data-type*="accordion"][data-type*="expand"] {

}Ever better, use the whitespace separated selector (e.g. [data-type~="expand"]). That way you won't get burned by something like "expand" matching "expander" when you didn't want to.
[data-type~="accordion"][data-type~="expand"] {

}View Demo
Works in IE7+ (because IE 7 was first IE to support attribute selectors)
Multiple Attribute Values is a post from CSS-Tricks

This year, you couldn't be blamed for getting caught up in design that's all surface with no substance. As the world makes it easier for anyone to cheaply prototype and market their seemingly brilliant idea, the link between what looks good and what works well seems to be weakening. In this way, the role of the designer—as craftsperson, as storyteller, as fabricator—becomes even more important. Today's products and experiences have to look attractive enough to entice consumers in a saturated market, but the best ones also manage to solve big systemic problems around materials, manufacturing, and efficiency. These 2011 innovations all feature the perfect marriage of design and technology, reminding us that the greatest design is not only beautiful, but functional as well.
How many designers does it take to change a lightbulb? Ask the folks over at Plumen, which literally transformed the lightbulb this year. The Plumen 001, available for the first time in the United States this year, is a game-changer in every way:  It looks like someone made a balloon animal with a light saber and has an amazing eight-year lifespan. The highly efficient bulb represents not only a technological achievement, but an aesthetic breakthrough as well, changing the way people think about low-impact lighting.
Anyone can pull up a location on Google Maps, but not everyone can make stunning, full-color maps that look like a vintage batik textile. Prettymaps, a new experiment by San Francisco-based Stamen, uses community-sourced data to create gorgeous, highly detailed maps where designers can tweak elements like color and line weight according to their preferences. If you think these maps are pretty enough to hang on your wall, you’re in luck: You can order maps of major cities designed by Aaron Straup Cope from affordable art purveyor 20x200.
Little Printer, a concept by London-based BERG, was designed to consume all your  online data and spew it back out like a social-media receipt. But it's more than just a pretty (little) face; it’s the first in a planned suite of products by BERG, which says it  seeks to make home electronics a lot more user friendly. In the meantime: Do you really need a tiny printout of your Facebook wall? Who cares. Look how cute it is!
Forget Photoshop in 2012. Download the free app Mixel for your tablet and not only can you create stunning collages with a flick of your hand, you can then share, disassemble, remix, collaborate on, and publish them as well. Created by Khoi Vinh, former design director for The New York Times' website, Mixel blasts the claims that the iPad is only good for consuming content. The simple interface will hopefully inspire designers and developers everywhere to build more ways to create using a few fingers and an imagination. But you know what it really inspires? Fun.
Brazilian company Melissa makes jellies, but these are not the jellies of your childhood. Melissa produces dozens of styles of women’s shoes, all of them durable, vegan, and 100 percent recyclable. What's more, each shoe is molded from a single piece of nontoxic PVC plastic called MELFLEX, meaning there’s no wasted materials. Collaborations with designers like Vivienne Westwood, the Campaña brothers, and Zaha Hadid ensure the styles are fashion-forward, making them that much more likely to stick around. Oh, and no polishing with toxic chemicals: Melissa shoes can be washed in the sink like a piece of Tupperware.
Just when you thought Twitter and Facebook were the only ways to document your journey through the world, artist and technologist Jonathan Harris brings us Cowbird, a beautiful and groundbreaking new way of telling stories. Users create "sagas," multimedia narratives with multiple components that can be navigated, mapped, and shared. Want proof? Check out Harris’s first saga, which tells the story of the Occupy movement, in raw, high-definition emotion. Then make your own.
The fact that Jeanne Gang won a MacArthur "genius" grant this year was more than a victory for female architects everywhere. The first architect in 11 years to win a MacArthur is also one of its most tech-savvy, incorporating new materials and techniques into her work with a focus on creating lean, efficient buildings. Gang's Aqua Tower, completed in Chicago last year, showcases smart new ideas for reclaiming water and natural lighting, while sacrificing nothing for its rippling, dramatic form poised high above the city.
The Walker Art Center in Minneapolis has always been a practitioner of the great art and design which hangs within its walls. But this year they managed to transform the mundane—a museum website—into a vibrant and thoughtful portal for the local creative community. Walkerart.org uses original content, intelligent aggregation and a streamlined editorial approach to tell important stories around its process. Museums everywhere should take note, yes, but publications should be paying attention as well.
In the Steve Jobs biography, the release of the iPad is tainted for Jobs by the fact that so many people bought his perfect devices and then tucked them into imperfect carrying cases. Upon the iPad 2's release this year, Apple not only made its own cover, it made a cover that protects a gadget better than anything had before. The Smart Cover uses tiny magnets to grab onto the screen, then flips off in segments, tucking under itself like an origami project, to create a stand. Siri may not have changed our lives as Apple promised, but this product, though simpler, is arguably even better.
It's been said by designers more than a few times this year that the world doesn’t need another chair. Rather, what we do need are more responsible manufacturing practices. Los Angeles designer Brendan Ravenhill wanted to build a better trash can, so he looked to his own neighborhood for inspiration. The Dustbin is manufactured exclusively in Los Angeles using a 60-year-old metal stamping company and a brush-maker that makes parts for the Mars Rovers. It's an inspired and elegant case for working locally. And a darn fine place to put your trash.
After vacuum and hand-drying empire Dyson turned their focus on fans, the next logical step was heaters, and this year, the Dyson Hot began populating design blogs. Only slightly bigger than a hair dryer, the heater has no blades or coils; it simply pulls air quickly through a tiny space and spins it up a ramp, much like the wing of an airplane. It heats a room more efficiently and without all the superfluous pieces that are likely to get lost or broken. Hot indeed.

Advertise here with BSA
AMPPS is a software for quickly installing Apache, MySQL, PHP, Perl and Python and creating a web server environment.

What differentiates it from other similar solutions is the built-in Softaculous package which makes 1 click installations of popular web apps possible.

There is a huge list of installable apps (250+) including WordPress, Joomla, Magento, phpBB and much more.

Using the AMPPS panel, the server resources can be configured and all the installations can be managed.

It has versions for Windows + Mac OS X and also installs phpMyAdmin + SQLite manager for controlling databases.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

We’ve had a great response to Foundation so far (thanks everyone!) but one piece of feedback we’ve received is that the small device layout for the Grid is too limiting. Currently, everything just stacks up, and sometimes you need more. Well, we heard you!

Enter the Foundation Phone Grid, released last month. We wanted to take a few minutes and show you how it works and how to use it on your projects.

How it Works

The Foundation grid is 12-column, meaning you can have any combination of columns that add up to 12. One, seven, four; five, five, two, etc. We didn’t think it made sense to maintain that many columns on small devices, so we opted for a four-column grid.

You’ll notice that, of course, we can’t just translate the 12-column grid sizes into four by dividing them all by three or something like that. How many columns is 5/12 when you only have 4? It’s close to six, but not quite there, so do we round … up? Down?

Rather than guess, we created four special classes that can be added directly to the existing grid and give you control of how you use the phone grid. By adding classes of:

.phone-one
.phone-two
.phone-three
.phone-four

…to the existing columns you can determine how your layout adapts on a smartphone or other small mobile device. Let’s look at an example.

Example Time

We’ll use one of our existing Foundation example pages to see how this works. Consider this page:

This is a fairly simple layout for a fake social network, laid out entirely with the grid. Let’s look specifically at the block on top left, an entry from a particular CGI movie character. We’ve used the grid to set this up, and the markup looks like this:

With only the default Foundation grid, every one of these column sections will get stacked on top of each other. For things like user avatar, or images with comments on them, this sucks.

By adding in classes for the phone grid and relying on Foundation’s innate ability to nest rows, we can switch that up to something much more robust. Check it out:

The markup for this revised layout looks like this:

Notice how we simply added phone-one and phone-three classes right alongside the existing column sizes? Easy peasy.

Try it out!

The phone grid is part of Foundation 2.1 and can be downloaded from Github, or from the Foundation website. We’d love to hear what you’re using Foundation for whether you use this feature or not. Just link it up in the comments below or email us at foundation@zurb.com.

We’ve got a lot more fun in store for Foundation including video-embed scaling that works (really), source ordering, bug fixes, and refined styling. Stay tuned!

[Image: From the Morpholio app].A few of my colleagues at Columbia have just released a free portfolio app called Morpholio, with the aim of creating "a new platform for presentation, critique, and collaboration relevant to all designers, architects, artists, or members of any image driven culture." As such, the app aims to be "both a utility and a community"—part social network, part alternative portfolio. "Capable of communicating with multiple devices," the accompanying press release says, Morpholio "organizes image collections in a comprehensible and accessible format that makes sharing and presenting work seamless, and infinitely flexible."[Images: From the Morpholio app].As the app's co-creators explain it, "re-imagining the portfolio" like this in the form of interactive digital media was inspired by asking: "what would happen if you could merge processes of presentation, critique and collaboration into a single elastic platform?"The app is optimized for iPad—so I haven't been able to test it out—but you can download it for free and give it a spin.

The Render K is the latest machined pen to hit Kickstarter, built to take advantage of the world-famous Pilot Hi-Tec-C refill. I have been lucky to be able to test drive a prototype of the Render K for the last few days, so let me explain a few differences this pen has over previous Kickstarter projects.

The Render K is manufactured in the US by KarasKustoms. I have chatted with Dan from KarasKustoms via email several times and he made it clear: the guy selling you the pen is the same guy manufacturing it in his shop in Mesa, Arizona. This is one of the reasons I was able to get an early prototype.

The Kickstarter page is full of details, drawings, and videos of the Render K for you to check out, but let me tell you what sets it apart. First of all, the design is portable. I backed both the Pen Type-A and PHX-1 projects and can’t wait to get both of those pens. The thing is, neither one is going to leave the house with me. The Render K is based around a standard pen design. Standard length, standard weight - hey look - a pen clip! Toss it in your shirt or pants pocket and you are ready to go.



Another unique feature is the ability to swap out the Pilot Hi-Tec-C refill for a Parker compatible refill. KarasKustoms provides a spacer and a spring to make this happen, giving you more flexibility and choice in your ink.

I have been really happy with my prototype so far. I included a few pictures so you can see it for yourself. Dan made it perfectly clear that the pen I have is not in its final production state, so keep that in mind when looking at the photos. My untrained eye is hard pressed to find any flaws.

Thanks to Dan and KarasKustoms for giving me an early look, and don’t forget to check out the Render K project on Kickstarter.

Despite the admiration given to webOS, HP's TouchPad has been the target of many hackers aiming to put the various flavors of Android onto the device, largely driven by HP's $99 firesale on the devices back in August. The latest of these is MIUI, which has just been released in alpha form for the tablet courtesy of the developers at MIUI.us. It's not Ice Cream Sandwich just yet, but instead is built on Android 2.3.7, and remarkably for an alpha, the list of working features is pretty exhaustive. The usual suspects like audio, Wi-Fi, Bluetooth, and the touchscreen are all present and correct, with only an on-screen menu bar (to replace the lack of hardware buttons) and "other random bugs" listed as not working. The former's easily fixed...


Continue reading…

In an ideal world there would always be a clean way of displaying data supplied by a third party on your site. Two examples would be getting the data in JSON or XML format from a Web Service and having an API to code against. But you don’t always have any of those options.

Sometimes the only way of incorporating data from a third party is by loading it in an iframe element. A few examples are financial reports, e-commerce applications, and ticket booking applications. Using an iframe is not ideal for many reasons, one of which is that it can make multiple sets of scrollbars appear on the page. Not only does it look ugly, it also makes the site less user-friendly. But there is a workaround.
Read full post
Posted in JavaScript, Usability.
Copyright © Roger Johansson

The best part about Lea Verou's new in-browser HTML/CSS demo tool? It saves your demos to your GitHub account as gists.
Direct Link to Article — Permalink
Dabblet is a post from CSS-Tricks

On Monday of this week I travelled from Berkeley across the Bay Bridge into San Francisco to have dinner with a friend who was staying at a hotel next to the Museum of Modern Art, so I decided to go a little early and enjoy the current exhibits. I’m glad I did, because the work of industrial designer Dieter Rams is currently on exhibit, along with his extraordinary principles for good design.

For several decades Rams designed products for Braun and Vitsoe, and has been a leading inspiration behind Apple’s approach to product design. The simple beauty of products such as the iPhone reflect Rams’ design aesthetic. According to the website of Vitsoe, “Back in the early 1980s, Dieter Rams was becoming increasingly concerned by the state of the world around him — ‘an impenetrable confusion of forms, colours and noises.’ Aware that he was a significant contributor to that world, he asked himself an important question: is my design good design?” In response to this question, he developed the following 10 principles of good design:

Good design is innovative.

The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.

Good design makes a product useful.

A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasises the usefulness of a product whilst disregarding anything that could possibly detract from it.

Good design is aesthetic.

The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.

Good design makes a product understandable.

It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.

Good design is unobtrusive.

Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.

Good design is honest.

It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.

Good design is long-lasting.

It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years — even in today’s throwaway society.

Good design is thorough, down to the last detail.

Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the consumer.

Good design is environmentally-friendly.

Design makes an important contribution to the preservation of the environment. It conserves resources and minimises physical and visual pollution throughout the lifecycle of the product.

Good design is as little design as possible.

Less, but better — because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.

I hope you find these principles as sensible, insightful, and inspiring as I do.

Today, Rams looks at the world and sighs. Quoted in The Telegraph on June 4, 2011, he said:

I am troubled by the devaluing of the word “design”. I find myself now being somewhat embarrassed to be called a designer. In fact I prefer the German term, Gestalt-Ingenieur. Apple and Vitsoe are relatively lone voices treating the discipline of design seriously in all corners of their businesses. They understand that design is not simply an adjective to place in front of a product’s name to somehow artificially enhance its value. Ever fewer people appear to understand that design is a serious profession; and for our future welfare we need more companies to take that profession seriously.

What concerns Rams about the design of physical products today is perhaps even more evident in the design of software. Most software vendors bother little with design and fill their products with the kinds of contrivances that Rams has fought for years to discourage. “My goal is to omit everything superfluous so that the essential is shown to best possible advantage” (Rams, 1980). Business intelligence and so-called analytics vendors are notorious for their insatiable appetites for wasteful, ill conceived, and dysfunctionally designed features. With few exceptions, what they call innovation is anything but. “Things which are different in order simply to be different are seldom better, but that which is made to be better is almost always different” (Rams, 1993).

The best designers, whether of the industrial variety, such as Rams, or any other type, including those who apply their skills to data visualization, strive for a marriage of form and function, beauty and usability, which refuses to see these forces in necessary conflict. Thanks to designers like Rams who care, we might someday live in a world where bad design is the exception rather than the norm.

Take care,

While Autodesk is still talking about adding 3D to its AutoCAD WS software, IMSI/Design has delivered its second release of TurboViewer Pro, which displays 2D and 3D CAD drawings. The non-Pro version is free; release 2.0 of the Pro edition is $20.

The primary feature in this new release is the support for 21 file formats, including multi-page formats (see list after the photo).

The viewer supports model and paper space layouts, SHX and TrueType fonts, and custom perspective 3D viewpoints.

 

IMSI Formats===========TCW - TurboCAD for Windows2CD - DoubleCADDCD - DesignCADCAD Formats============3DM - RhinoDGN - Microstation (2D only)DWF - Design Web FormatDWG - AutoCAD Native FormatDXF - Drawing eXchange FormatFCW - FastCAD WindowsSKP - SketchUpExchange Formats===============ASAT and SAT - ACISIGS - IGES DrawingOBJ - OBJ DrawingSTEP and STP - STEPOther Formats===========3DS - 3D StudioCGM - Computer Graphics MetafileEPS - Encapsulated Postscript FormatPDF – Adobe Portable Document FormatPLT - Hewlett-Packard HPGL plot filesSTL - StereolithographyWRZ - VRML Worlds

The only way to get it, unfortunately, is through Apple's online software store. We await the Android version.

http://www.itunes.com/AppStore

[Disclosure: IMSI/Design provided the iPad with which to test the software, which I can't, because Apple locks its app stores to countries.] 

 

 

Get it while you can: an hour-long BBC documentary about Steve Jobs with on-camera interviews with Woz, Stephen Fry, Tim Berners-Lee, John Sculley and many others.

(thx, jteve)
Tags: Apple   Steve Jobs   video

If you downloaded Edge Preview 3 prior to December 14, 2011, it is set to expire on December 31, 2011. An updated version (3.1) is now available, which extends the expiration date until Edge Preview 4 is available in January 2012. Learn more in the Edge product team blog.

Download Edge Preview 3.1
Discuss Edge

LUKE WROBLEWSKI: As mobile devices have continued to evolve and spread, so has the process of designing and developing Web sites and services that work across a diverse range of devices. From responsive Web design to future friendly thinking, here’s how I’ve seen things evolve over the past year and a half: LukeW | Multi-Device Web Design: An Evolution.