#Reading → New HTML5 gallery options for Photoshop & Lightroom via John Nack on Adobe

#Reading → #GeekConfessions for Geek Pride Day via GeekDad

#Reading → Responsive Typography via Information Architects

#Reading → Improving the Digital Reading Experience via Information Architects

#Reading → Giving Users Offline Access with HTML5 Application Cache via Web development blog, news and tutorials - D...

#Reading → Free Adobe CS6 eBooks — Download 1,022 Pages of New Tutorials via ProDesignTools

#Reading → It's Content, Not Concept ... Or How We Reinvigorated via ZURB

from xkcd.com http://xkcd.com/

from AddictiveTips http://www.addictivetips.com

Sharing a collection of your photos with your friends or family on the internet is nothing new. It has now become one of the integral parts of various social networks such as Facebook and Google+, and image hosting services e.g. Imgur, Picasa & Flickr. If you’re an avid photographer who wants to share your work on your own website, by creating gorgeous looking photo galleries, then Juicebox is what you need. It’s an Adobe AIR-based application (which means you need to have Adobe AIR installed on your machine to get it working, of course). It creates stylish, HTML-compatible photo galleries with fluid navigation that you can easily embed into your website. You may upload images either directly from your local drive or even from a Flickr profile. Furthermore, the application is based on HTML5 and JavaScript, which means anyone can access your albums using HTML5-enabled web browsers like Firefox, Google Chrome, Internet Explorer and more. Apart from being highly customizable, it supports a number of plugins, which allow you to extend the functionality of native features. More after the break.

The desktop client (known as JuiceboxBuilder) is where you actually create your gallaries. The wizard based process consists of a mere four basic steps. If you’re using the builder for the first time, then you need to start by clicking the New Gallery button to proceed to the next step.

If you want to add images from a hard drive, all you need is to drag your photos over the left side of the application window under Add Images section. However, you can also click Flickr to grab the images from there, instead of inputting Flicker User Name or Flickr Tags and clicking Load Images. Under Image Size section to the bottom-left, you may mark Resize Images or Crop To Fit options, and click Change button to select the resized resolution.

Next up, you need to customize your photo gallery. Just type in your Gallery Title, Gallery Width and Gallery Height – select Background color and opacity and enable/disable other Misc. options such as Show Open Button, Show Expand Button and Show Thumbs Button. Finally, click the Publish button at the top to publish your photos.

Your published photos will be saved automatically to your local drive, and the builder app will give you the HTML5 embed Code, so that you can easily embed it into any HTML page.

The following screenshot displays the photo gallery we created during testing.

Juicebox is available as a Free (Lite) as well as two Pro versions costing $49 and 99$ for a single license and multi license, respectively. Free version is limited to 50 images per gallery, while the Pro variant (costs $49) is free from any limitations and contains 70+ customization features, options to add background audio & watermarks, and supports AutoPlay and JavaScript API. The Builder client works on Windows, Mac OSX and Linux, provided you have Adobe AIR installed. Both 32-bit and 64-bit OS editions are supported.

Download Juicebox

Related Articles:

Kurst Creates Powerful Flash-Based 3D Photo Galleries For Your Website

PhotoLikr: Create/Manage Picasa, Minus & Other Online Photo Galleries

Embed HTML5 And CSS3 Elements Directly With BlueGriffon WYSIWYG Editor

from DailyJS http://dailyjs.com

I’ve been surveying popular Node modules and the nodejs Google Group to find common portability issues people have found when testing modules in Windows.

For the most part, Node code seems very portable – there are only a few problem areas that seem to crop up frequently. Let’s take a look at these problems and the solutions so we can write code that runs everywhere.

Platform-Specific Code

Despite Node code’s inherent portability, there are times when platform-specific code is required. This is dealt with in Node’s core modules like this:

var isWindows = process.platform === 'win32';

if (isWindows) {
// Windows-specific code
}

This example is based on path.js.

For more detailed information on the operating system, the os module can come in handy.

File System

Windows can actually accept backslashes or forward slashes as a path separator. This means you don’t need to change all of your require calls to use different slashes; most things should just work. There are a few cases where we need to be careful, however, particularly if a path name is absolute or it’s going to be displayed somewhere.

One common issue I’ve found is where the developer has made certain assumptions about the structure of absolute paths. In a commit to Express, Fixed absolute path checking on windows, we can see where the authors have adapted a method called isAbsolute to support Windows:

exports.isAbsolute = function(path){
if ('/' == path[0]) return true;
if (':' == path[1] && '\' == path[2]) return true;
};

Isaac Schlueter recommends using path.resolve to make relative paths absolute in a cross-platform way.

When dealing with fragments of paths, using path.join will automatically insert the correct slash based on platform. For example, the Windows version will insert backslashes:

var joined = paths.join('\');

Notice that JavaScript strings require two backslashes because one acts as an escape, so when working with Windows path names don’t be surprised if there are lot of double slashes.

Another big source of Windows issues is fs.watch. This module is routinely used by programs that watch for file system changes. Node’s documentation makes it clear that the API isn’t portable, so the slower but more compatible fs.watchFile can be used instead.

In this patch for the Derby web framework, we can see where the developers opted to branch based on process.platform to use fs.watchFile in Windows, but fs.watch elsewhere.

Text Interfaces

Be aware that not everybody has a super-fancy UTF-8 terminal that supports colours. Certain programs depend on text output, but people may have trouble seeing it correctly if your program relies on symbols their terminal or font doesn’t support.

Mocha is a good example of such a program, and in the issue Ability to configure passed/failed checkmarks for the spec reporter, we can see where someone has struggled to read the output with cmd.exe.

Environment

Assuming certain environmental variables will exist (or mean the same thing) on every platform is a good way to create portability headaches.

James Halliday’s Browserify had its fair share of Windows issues, which was problematic due to several other popular modules depending on it.

This commit to Browserify demonstrates a fix Christopher Bennage submitted that replaces calls to process.env.HOME with the following:

var home = (process.env.HOME || process.env.USERPROFILE);

I tried this in Windows 7 and found process.env.HOME wasn’t set, but process.env.USERPROFILE worked as expected.

Sockets

Node’s TCP sockets are portable, but Unix domain sockets are not. However, Windows has named pipes. The following code is almost exactly the same as the Unix equivalent, it just has a different path to the named pipe:

var net = require('net');

net.createServer(function(socket) {
console.log('Connected');
}).listen('\\.\pipe\named-pipe-test');

Notice the escaped backslashes – forgetting to insert them here will raise a confusing EACCESS error. In node/test/common.js, there’s a branch based on platform to set the name of the pipe so it works in Windows and Unix:

if (process.platform === 'win32') {
exports.PIPE = '\\.\pipe\libuv-test';
} else {
exports.PIPE = exports.tmpDir + '/test.sock';
}

References

from Daring Fireball http://daringfireball.net/

Speaking of Paul Kafasis, he decided to try to duplicate Sam Jackson’s “remind me to put the gazpacho on ice in an hour” Siri directive:

If you’ve used Siri yourself, however, you know the disclaimer of “Sequences shortened” is more than an understatement. They’ve edited out the inevitable “No.…NO.…NO!” as well as significant quantities of exasperated sighs. After hearing Jackson say the word “hotspacho” for the umpteenth time, I decided to run a little test.

 ★ 

from Adobe Labs http://blogs.adobe.com/labs

Adobe Configurator 3 preview is now available to download. Configurator 3 introduces several new features and support for Adobe Photoshop CS6 and InDesign CS6. Key features include:

Compatible with Photoshop CS5/5.1 and CS6, and InDesign CS5/CS5.5 and CS6; supports new features and automatic conversion of existing panels.

Distribute and share panels with other Creative Suite 6 users via the Adobe Exchange. Look for more information and a new Exchange panel to be available on Adobe Labs in the coming weeks.

See the complete list of new features in Configurator

Configurator is free for anyone to use. To run the panels it generates you must install Photoshop or InDesign. Creative Suite® 6 (CS6) trials are available on Adobe.com.

Download Configurator 3 preview

Discuss Configurator 3

from Wired Enterprise http://www.wired.com/wiredenterprise

Just a little bit of useless garnish was all anyone got out of Oracle v. Google (Image: Kelley Mari/Flickr)

After sitting through the monthlong legal battle between Google and Oracle, one juror said he kept waiting for steak but all he got was parsley.

According to jury foreman Greg Thompson, this unnamed juror was critiquing Oracle’s efforts to show that Google had infringed on both its patents and its copyrights in building the Android mobile operating system. But the quip could just as easily describe the trial as a whole.

Google v. Oracle was billed as a Clash of the Tech Titans. But when the jury returned its final verdict on Wednesday, the battle all but petered out. Yes, Judge William Alsup is still set to rule on whether Oracle’s Java APIs are subject to copyright — the big question the trial was supposed to answer — but after the jury returned a partial verdict on Oracle’s copyright claims, the question is almost moot.

Judge Alsup — who has served on the federal bench for almost 13 years — said the case was the longest civil suit he’d ever presided over. And yet the fireworks never came. The most memorable moment was Alsup telling the court that he’d secretly learned to code in Java, a way of upbraiding David Boies, Oracle’s celebrity lawyer, for trying to claim huge damages on an almost insignificant amount of code. “You’re one of the best lawyers in America,” he said. “How can you make that argument?”

When it sued Google in the fall of 2010, Oracle sought as much as $7 billion as it asserted various copyrights and patents it acquired with its purchase of Java-maker Sun Microsystems. But after the copyright phase of the trial ended with a partial verdict and the jury rejected all of Oracle’s patent claims, the trial had merely shown that out of 15 million lines of Android code, Google had infringed with about eight decompiled files and nine lines of copied code.

For Google, the jury’s denial of Oracle’s patent claims showed just how flawed the system is. “This illustrates the costs when the patent system doesn’t work well,” Google general counsel Kent Walker told us after the patent verdict came down. Oracle did not respond to request for comment.

But the copyright phase of the trial was by far the messier of the two. Part of Oracle’s argument was that Google had infringed Oracle’s copyrights in cloning 37 Java APIs, or application programming interfaces. Ultimately, the jury decided that Google had infringed in mimicking the APIs, but it couldn’t decide whether this should be considered “fair use” under the law.

According to jury foreman Greg Thompson, 52, a retirement plan specialist from Fremont, California, the argument in the jury room came to down to whether Google’s use of the APIs was “transformative” — i.e., whether had changed the nature of the work enough to qualify for fair use. But the jury also tussled over whether the amount of copied material was insignificant and whether the copied material was used for material gain. Google argued that since Android open source and free to download, it isn’t a commercial product.

(Image: Afsart/Flickr)

In the end, Thompson said, the final vote was 9-3 in favor of fair use, with Thompson and two others in the minority. He had argued that even though Android was free and open source, companies like Google intend to make money from most strategic moves they make. Indeed, Android will generate huge amounts of ad revenue for Google.

After the partial verdict was read, Google moved for a mistrial, arguing that the court couldn’t assess damages without settling the “fair use” question. But Judge Alsup has yet to rule on that matter too.

As Thompson spoke with the press, Oracle counsel Mike Jacobs and most of the company’s other lawyers stood nearby and listened. Presumably, they’re preparing for an appeal. Thompson said that in the end, the jury did not feel that Oracle’s arguments were convincing. That’s when he quoted another juror as saying he was “waiting for the steak and only got the parsley.” He also said that the lawyers often spoke too quickly, making it difficult to grasp where were already complex topics.

“In hindsight maybe we should have had the testimony read back to us but we were all looking through our notes saying, ‘We know it came up, but…’” he said, trailing off. “We just couldn’t put enough information together to reach what we saw as a level of preponderance of evidence that infringement had occurred.”

Thompson also acknowledged that sorting through the expert testimony was “problematic.” Both sides paid expert witnesses to testify on their behalf. Stanford computer science professor John Mitchell and Duke computer science professor Owen Astrachan, hired by Oracle and Google respectively, gave lengthy and detailed testimony on the nature of Java code, the process of compilation, reverse engineering, and the inner workings of virtual machines. But when questioned by the other side’s lawyers, they generally gave short, dismissive answers.

“We had a lot of difficulty with that,” Thompson said. According to their answers during jury selection, only two members of the jury had rudimentary experience in computer science.

Oracle will only seek extensive damages if Judge Alsup rules that the Java APIs are subject to copyright, and his decision is expected to come sometime next week. But don’t expect steak. Only parsley.

from Lifehacker http://lifehacker.com

Whether you have an iPad or an Android tablet, you've probably been tempted to doodle a bit on it, or open up an app to make sketches or take down a few freehand notes with your finger or a stylus. Maybe you just love to draw, and you found the perfect drawing app to express your creativity. This week we want to know which app you turn to when you want to do a little drawing on your tablet screen. More »

from ZURB http://www.zurb.com/blog/posts

This week, we relaunched our ZURBexpo.com that pushed the newest content front and center. In December, we threw up a rather ho-hum, static page because we needed to get something up temporarily when we incorporated all of our publishing efforts under one umbrella. Check out the old page:

OK, we admit it, we punted on that one. But the page wasn't a priority for us at the time. Nevertheless, the page we put up was static. Newly published material wasn't being changed out as often as it was being published. For instance, there was nothing on the page to show when a new blog post went up. All in all, it wasn’t a hub where people could go again and again to see what’s new with those properties. It also didn’t feel as if it belonged visually with the other properties that make up ZURBexpo.com:

ZURBlog — where we share product design tips, tricks, lessons learned and ideas.

ZURBplayground — where we share our experiments such as JQuery plugins, CSS3 buttons, stencils and apps to make it easier to design great products.

ZURBword — where we share quick design concepts and our design methods

ZURBnews — where we keep in touch with our family of thousands of passionate hackers out there in the world

When I came aboard in February, it was decided to make an updated ZURBexpo.com a priority and pushed forward with a complete redesign. And I was put to work to come up with the new look.

The Concept Isn’t More Valuable Than The Content

One of the earliest ideas that I came up with was to capitalize on the concept of an expo, literally. Sketches were done inspired by old World’s Fair pictures and other similar exhibitions. An expo meant fun and exploration, and we thought we could carry that through to the Expo page.

A few of us, including myself, were quite fond of the fun, interactive aspect that the concept could bring to the page. One concept had a wheel that visitors would be able to manipulate to go from ZURBlog to ZURBplayground to ZURBnews to ZURBword. While another had a series of circus-like posters that would rotate out of the latest from each of the properties.

But Bryan made a good point about the concept — it was less important than the content. The content should be front and center. In other words, the concept didn’t have tremendous value, but the content did. So the content should really be the “hero” of the ZURBexpo story. With that, the World’s Fair exposition was abandoned and we concentrated on something that was more visually aligned with the rest of the properties.

For A Few Iterations More

For our first take, we still tried to include a World Fair theme. But the content (“the good stuff”) was confined and and didn’t have the spotlight it deserved. Check it out below (click for a larger image):

Our next round of iterations explored a pin board-style page, where items would look as if they’d been “pinned” to the page. The feeling we were going for was “Look at all this goodness!” but it was more of “Oh my, what should I be looking at?” They had to hunt for the latest blog post. In other words, the content was lost in the shuffle. Click the image below for a larger image:

Another idea was to go back to the idea of fun and do something that was visually similar to ZURBword’s main page with blocks of content that would constantly shift. Click the image below for a larger image:

The problem with that idea was that it didn’t allow visitors to easily select the property they want to go to directly. But when it comes to updates, not all the pages are equal. ZURBlog gets updated daily. ZURBplayground is our most popular, but it isn’t updated as frequently. ZURBnews gets updated monthly. ZURBword gets updated periodically, but not as much as the blog. It can be a challenge to balance all those properties. So we eventually moved away from the idea.

However, the blocks of content stayed through are next iterations before we came to the almost-final design. Click the image below for a larger image:

We also varied the sizes of the boxes and the amount of boxes so they were associated with a particular property. For example, ZURBlog has two long rectangular boxes while ZURBword has one rectangular boxes followed by two smaller boxes. Another way we differentiated between the properties was by using the colors associated with each particular one, such as orange for ZURBlog and blue for ZURBplayground.

The last iteration came to aligning ZURBexpo with the overall ZURB brand, which meant cleaner, streamlined graphics and simple overlays. That’s where we landed. And here is the final design (click for the larger image):

Built with Foundation

Since ZURBexpo.com was built with Foundation, that meant the design would look good on smaller devices, such as a smartphone. With Foundation's fluid grid, the content easily stacks down and allows you to scroll to each of the four properties.

With this final design, we had something that had the content front and center where it wasn't buried behind a concept. Not only that but it better matched with the other properties in terms of visual language. More importantly, this page better accomplished being a hub to all our ZURBexpo properties than its predecessor.

Check out ZURBexpo.com »

from Queness http://www.queness.com You can create wireframes in many ways and by using many tools, depending on how much money you are willing to spend on it and what you want out of it. We have a list of 10 Best Wireframe Tools For Web Designers.

#Reading → Comics and UX, Part 2: Flow and Content via The UX Booth

from Weblog Tools Collection http://weblogtoolscollection.com

The official WordPress.org Plugin Directory has received a rather significant redesign. With over 19,000 plugins listed, the team took some time to revisit this highly popular destination for the millions of folks using WordPress.

Right off the bat, you should notice a new ability to to mark your preferred plugins as Favorites. Each plugin page now has a new Support tab populated with the plugins’s support thread, and a super-handy chart showing you the resolved vs. open thread count so you can see at a glance how well supported a plugin is. Finally, there is much more focus on the authors this time around and some improved styling over all.

What do you think of the newly redesigned plugin directory?

#Reading → Resource-Oriented Computing with NetKernel via O'Reilly Media, Inc. New Titles

#Reading → Comics and UX, Part 1: Cross-disciplinary Techniques via The UX Booth

#Reading → Quiz: Manly Brand Mascots via @Issue Journal of Business & Design

from kottke.org http://kottke.org/

In this interview with The Daily Beast, Ridley Scott reveals that he's currently working on a sequel to Blade Runner.

Funny enough, I started my first meetings on the Blade Runner sequel last week. We have a very good take on it. And we'll definitely be featuring a female protagonist.

Tags: Blade Runner   movies   Ridley Scott

#Reading → Sappi Standard 5 Begs to Be Touched via @Issue Journal of Business & Design

#Reading → “This redesign is deliberately over the top.” via Cameron Moll / Designer, Speaker, Author

#Reading → Meet the Man Who Invented the Instructions for the Internet via Wired Enterprise

#Reading → Google’s Knowledge Graph: Yeah, that’s the Semantic Web (sort of) via Gartner Blog Network

from The UX Bookmark http://www.theuxbookmark.com

William Playfair — a businessman, engineer and economics writer from Scotland — created the first known pie chart in 1801. Playfair’s graphic innovations went beyond the pie chart: he also invented the bar graph. Academics conduct studies about which Playfair invention performs better. Excel and PowerPoint may abound with pie charts, but not everyone is a fan.

The data-visualization pioneer Edward Tufte wrote that “pie charts should never be used.” Dan Boyarski, a professor at Carnegie Mellon University, encourages his students to expand their horizons. He also concedes, however, that in some cases, like illustrating a budget, the pie chart is fine. “We know what it stands for, so we immediately relate to it,” Boyarski said. “That’s the advantage of the tried and true.”

Abhay’s note: The article is short and interesting. While it tells you about the origins of the pie chart, its the comments that offer better reasons on why or why not and when to use a pie chart.

Who Made That Pie Chart

from Wired Enterprise http://www.wired.com/wiredenterprise

The rumor was that Google banned the use of Windows. But CIO Ben Fried says otherwise. Photo: Google

In the wake of the late-2009 attack on Google’s internal systems that saw Chinese hackers pilfer proprietary software code, the rumor was that the search giant was dumping Microsoft Windows.

A report from the New York Times indicated that Chinese hackers had infiltrated Google’s infrastructure via an employee machine running Microsoft’s instant messenger client, and in a later story, citing several unnamed Google employees, The Financial Times reported that Google was “phasing out” the use of Microsoft’s Windows operating system in an effort to improve security, and that this would “effectively end” use of the OS inside the company.

According to one unnamed Google employee, the FT said, getting a new Windows machine required “CIO approval.”

But two years on, Google CIO Ben Fried tells Wired that Google never banned the use of Windows and that the company continues to offer the Microsoft OSes on employee machines. Employees, he says, can choose from among a Mac, a Windows PC, a Google Chromebook, and a machine running Goobuntu, the company’s modified version of the Ubuntu Linux distribution.

At Google, employees can chose from four different operating systems: Mac OS, Chrome OS, Goobuntu, and, yes, Windows.

Fried does indicate that the China hack had some effect on the way its employees choose their machines. “We wanted people to think more about why they were choosing a particular operating system,” he explains. But he says that tales of a Windows ban were well wide of the mark.

With its Google Apps suite of online business applications and its Chrome OS browser-based operating system, Google is pushing the world towards a new breed of online software that discards the old Windows model, and in many ways, it’s succeeding. Google Apps is now used by over 5 million businesses. But the company’s internal operation underlines the fact that the transition to a world of web-based software takes some time.

Although Google employees generally use Google Apps, Fried says that some employees still require the Microsoft Office suite, and he indicates that some people are just more comfortable with Windows. According to a Google spokesman, most of Google’s Windows machines run Windows 7, the newest version of Microsoft’s OS. “The vast, vast majority of our Windows machines are running Windows 7,” he says. “But there are a very tiny handful (really, a negligible amount) of machines running older versions.”

Presumably, these older versions of Windows are used to test various applications and web services.

Fried was unable to say what percentage of Google employees use what OS. But he did indicate that Goobuntu is widely used across the company, saying it’s the OS of choice not for many Google engineers, but by various other employees, including some company lawyers. The company has said that even a small problem with an upgrade to a new version of the OS can cost the company upwards of $1 million, indicating that it’s used by a large portion of its more than 24,000 employees.

Earlier this month, at a conference dedicated to Ubuntu, Google developer Thomas Bushnell — who works under CIO Ben Fried — detailed the company’s use of Goobuntu, which has long been an open secret but was rarely discussed in public. According to Bushnell, Goobuntu is based on the LTS (long-term support) releases of Ubuntu, with modifications made to improve security and stability. Fried confirms that Google is currently using the “Lucid Lynx” version of Ubuntu (10.04), but that the company is moving to the “Precise Penguin” release (12.04).

According to Bushnell, even the cook at his office building uses Goobuntu, and he indicates that “tens of thousands” of Google workstations run the OS.

A year ago, at Google’s annual developer conference, co-founder Sergey Brin said that about 20 percent of Google employees were still on Windows, but he stressed that he did not know the exact percentage. Brin also said that Google hoped to move most of its employees to Chrome OS, which not only moves all applications to the browser but seeks to improve on the security of a desktop operating system.

Though Fried declined to comment on how prevalent any OS was within the company, a blanket move to Chrome OS is presumably years away at best. At least publicly, the OS is only available on notebooks, though Google has long said it’s working on desktop Chrome OS machines as well.

from ZURB http://www.zurb.com/blog/posts

We looked at the current state of responsive tables, and we weren't happy. Today we've released a new playground piece, with a new, awesome take on responsive tables.

If you've ever tried to make large data tables work in a responsive design, you know what a pain they can be. Tables have a magical property that says they can never be so small that parts of a word have to be cut off — they can't overflow. That means that, when your design shrinks down for the width of, say a smartphone, large data tables will ensure your design doesn't actually shrink all the way down. It sucks.

We wanted to try and do better, so we got to work on a responsive table implementation that would meet three criteria:

Doesn't break responsive layouts

Doesn't unnecessarily hide table data

Still allows you to compare rows with a key column

A bit of a tall order but with some crafty CSS/JS, we cooked up something we think is pretty nifty. You can go ahead and check out our new responsive tables, or stick around to hear more about how it works.

How it Works

As we looked at tables we realized that, most of the time, the first column is the unique key for a table. That provides the reference for the other columns, while the column headers provide the legend for what everything means. With that in mind, we wanted our responsive tables to have that first column available at all times.

This is a schematic of how the table changes from a larger screen to a small one. Basically, we take the first column and pull it out of the table element, positioning it over the table in its own element. Then we allow the table itself, minus that first column, to scroll under it horizontally.

What this allows is for the user to see the entire table (albeit not all at once, they have to scroll) while still seeing that first 'key' column. We don't have to flip the table axes, or hide data, or break the layout, we just rely on the user's ability to swipe across to see all the data and compare the rows and columns.

There are a couple caveats here. First, for the small device format we have to restrict cells to a single line (for a consistent height). The separate left-hand column and other column elements don't impact each other, so they can't correctly dictate an arbitrary height. Second, this doesn't work in Android 2.3 and below as it doesn't support scrollable DIVs. Android 3+ should be good to go.

Built for Foundation

We developed these to drop right into Foundation, our responsive, open source front-end framework. They're great if you're working on a responsive prototype, or responsive production code, and need a way to manage large sets of tabular data. While they're built for Foundation, they should work in any responsive front-end.

Try it out, give us feedback

You can check out our responsive tables or you can go right to the code on Github.

If you're interested in other approaches, Chris Coyier did a great round-up a while back on responsive data tables — there are some fascinating approaches in there, but none which met our criteria.

If you have some other ideas to either improve on this approach, or something else we should check out, sound off in the comments. Have fun with this new code, it was fun to work on and hopefully fun for you to use!

from Varsity Bookmarking http://pieratt.tumblr.com/ “The extension of our nervous system as a total environment of information is an extension of the evolutionary process.”
- Twitter / @mcluhanspeaks: The extension of our nervo …

from ZURB http://www.zurb.com/blog/posts
Last week, we were excited here at ZURB to distribute new iPads to every member of the ZURB team: design, operations, marketing and engineering — even our interns. There's plenty of companies in Silicon Valley that kit their employees out with nice gear, but this wasn't just about everyone having shiny toys (though it doesn't hurt).

Multi-Device is the Future

You've probably noticed that it's not just laptops and desktops people are using these days. Other classes of device, like smartphones or tablets or eReaders (etc, etc) are beginning to dominate how people access the Web, or talk to each other, or capture and share things in their life.

We believe that, given this inevitable shift toward more disparate devices, it's important to put more of our eggs in that basket. That's why we developed Foundation, our responsive framework for developing sites and apps for any device. That's why when we relaunched ZURB.com we did so in a way that worked across devices, and it's why we develop sites and apps for our clients responsively.

We Need Multi-Device Design Literacy

There's plenty of reasons to have iPads in an office. We use them for QA, we can use them to present work to clients (or each other) ... but the biggest reason we kitted out each and every ZURBian with an iPad was to foster an environment of multi-device design literacy.

It's not just our designers who need to understand how Design works in a multi-device world. Our marketing team needs to be immersed in these devices so they can talk about it. Our engineering team needs to know about them so they can build new apps and services to cater to it. Our operations team needs to understand the multi-device world so they can plan for it, and work with it, and find new talent to drive it. We all have iPads because each and every member of our team needs to intuitively understand the multi-device world (we all have smartphones, too) and understand what it means for our business and our industry.

The Practical Effect

Here's an example of how this is already helping our team. The new iPads, with their retina displays, make for a great reading and browsing experience. We also recently relaunched ZURB.com with a visually rich design. However: we did almost nothing to cater to retina displays (it didn't even exist when we started the redesign). No high-resolution imagery, no consideration for the improved readability when it came to font sizes and the like.

We could simply serve up giant images and scale them down for everyone else, but something else the iPad teaches you is that while the resolution might be enormous, often the bandwidth is not. Even on 4G LTE Retina-sized background images are a seriously large file load. We're still working on this problem, but without team-wide exposure to this we might not have even bothered and we have to bother. These devices aren't going away, and they're not going to get less capable.

That's a technical example, but the effect is spreading already. When we evaluate new services to drive operations, we consider whether they work on different devices. We're already planning for TVs with connected AppleTVs in our breakout rooms, because our iPads can present directly on them without messing with cables. And so on.

Consider how immersed you are in a multi-device world. Smartphones, tablets, notebooks, eReaders, glasses (hehe), TVs, cars ... to work on what we all work on we need to understand these things.

from Wired Enterprise http://www.wired.com/wiredenterprise

GitHub's mascot: the Octocat. Image: GitHub

The cool and popular GitHub source-code sharing site just got a little easier to use.

On Monday, GitHub released its first client for Windows, giving users an easier way to set up a Git source-code repository on their PC that can then be shared with the GitHub website.

GitHub is changing the way that hackers share and develop software. It’s built on top of the command-line-driven Git software, created by Linus Torvalds. A good part of its success is due to the fact that GitHub simplifies many of the things that are tricky in Git, making it easier for developers to hand over source-code improvements to their favorite projects.

There’s already a GitHub client for the Mac, but until today, users who wanted to host their own projects or set up their own versions of existing projects on Windows PCs would have to install Git locally, set up encryption keys, and muck about with obscure commands such as git push -u origin master.

GitHub for Windows lets you do this kind of stuff with a nice clean graphical user interface. “GitHub for Windows is a 100% native application that will run on Windows XP, Vista, 7 and even the pre-release Windows 8,” GitHub said Monday in a blog post. They call it “the single best way to start using Git on Windows.”

More than 1.3 million people use Git already. With a free, easy-to-use Windows client out now, that number is sure to get a bump.

from I love typography, the typography and fonts blog http://ilovetypography.com

Craig Mod

A wonderfully eloquent and thought-provoking talk by writer-designer-publisher, Craig Mod. After outlining the differences (physical and emotional) between the book as artifact and as digital, he addresses how we might reduce the experiential gap. Well worth 40 minutes of your day.

Sponsored by H&FJ.Designing for the Future Book

from John Nack on Adobe http://blogs.adobe.com/jnack

The next show will be hosted on May 4-8 in Los Angeles, writes CTO Kevin Lynch. According to Kevin, it’ll focus on

Design and creativity

Web sites, including the latest on HTML5, JavaScript and CSS

Digital publishing, video, and gaming, including the latest on Flash

Applications, particularly for mobile platforms

More details will come out in the months ahead.

from John Nack on Adobe http://blogs.adobe.com/jnack

Charming: Adam Ladd showed his 5-year-old daughter logos for 5 seconds apiece, then asked her to draw what she remembered:

[Via Carolina de Bartolo]

from Adobe Labs http://blogs.adobe.com/labs

The Enterprise IT Tools for Creative Suite are designed to facilitate and simplify deployment and update management in enterprise settings.  The following list comprises all of the resources that are currently available to download.

Exceptions Deployer Application

Remote Update Manager

More tools/utilities may be added in the future.

Learn More About Enterprise IT Tools for Creative Suite

Download the Enterprise IT Tools for Creative Suite

Discuss Enterprise IT Tools for Creative Suite

 

from Caveat Lector http://blogs.adobe.com/vikrant You could always save your layouts as JPEG, but sometimes the results were less then pristine because JPEG, by design, is a lossy format. In today’s web and device dominated world, if anything you need a lossless format such as PNG. And in InDesign CS6, you can do just that. Read on to figure out [...]

from Mobile Tuxedo http://www.mobiletuxedo.com

Magazine Grid is CSS framework for you to create great magazine layouts for the iPad. It  comes with common magazine design elements such as pagination, gutters and of course a...

from Mobile Tuxedo http://www.mobiletuxedo.com

Mobile Boilerplate is a template based on HTML5 Boilerplate and a rock-solid HTML5 default for quickly developing mobile web apps. You can get cross-browser consistency among A-grade smartphones, and fallback...

from Lea Verou http://lea.verou.me

Note: To understand the following, I expect you to know how regex lookahead works. If you don’t, read about it first and return here after you’re done.

I was quite excited to discover this, but to my dismay, Steven Levithan assured me it’s actually well known. However, I felt it’s so useful and underdocumented (the only references to the technique I could find was several StackOverflow replies) that I decided to blog about it anyway.

If you’ve been using regular expressions for a while, you surely have stumbled on a variation of the following problems:

Intersection: “I want to match something that matches pattern A AND pattern B”Example: A password of at least 6 characters that contains at least one digit, at least one letter and at least one symbol

Subtraction: “I want to match something that matches pattern A but NOT pattern B”Example: Match any integer that is not divisible by 50

Negation: “I want to match anything that does NOT match pattern A”Example: Match anything that does NOT contain the string “foo”

Even though in ECMAScript we can use the caret (^) to negate a character class, we cannot negate anything else. Furthermore, even though we have the pipe character to mean OR, we have nothing that means AND. And of course, we have nothing that means “except” (subtraction). All these are fairly easy to do for single characters, through character classes, but not for entire sequences.

However, we can mimic all three operations by taking advantage of the fact that lookahead is zero length and therefore does not advance the matching position. We can just keep on matching to our heart’s content after it, and it will be matched against the same substring, since the lookahead itself consumed no characters. For a simple example, the regex /^(?!cat)w{3}$/ will match any 3 letter word that is NOT “cat”. This was a very simple example of subtraction. Similarly, the solution to the subtraction problem above would look like /^(?!d+[50]0)d{3}$/.

For intersection (AND), we can just chain multiple positive lookaheads, and put the last pattern as the one that actually captures (if everything is within a lookahead, you’ll still get the same boolean result, but not the right matches). For example, the solution to the password problem above would look like /^(?=.*d)(?=.*[a-z])(?=.*[W_]).{6,}$/i. Note that if you want to support IE8, you have to take this bug into account and modify the pattern accordingly.

Negation is the simplest: We just want a negative lookahead and a .+ to match anything (as long as it passes the lookahead test). For example, the solution to the negation problem above would look like /^(?!.*foo).+$/. Admittedly, negation is also the least useful on its own.

There are caveats to this technique, usually related to what actually matches in the end (make sure your actual capturing pattern, outside the lookaheads, captures the entire thing you’re interested in!), but it’s fairly simple for just testing whether something matches.

Steven Levithan took lookahead hacking to the next level, by using something similar to mimic conditionals and atomic groups. Mind = blown.

from HTML5 Watch http://html5watch.tumblr.com/ Recursive Drawing

#Reading → Constructing Your Personal User Interface on Harvard Business Review via Pleasure and Pain

#Reading → Designs Well with Others: Collaboration for Designers (Part 1) via The UX Booth

#Reading → Why Publishers Don't Like Apps via Secrets & Happiness of Digital Publishing

#Reading → Dieter Rams’ 1976 Speech via AisleOne

#Reading → Annotation Overlay Effect with CSS3 via Codrops

from Chrome Experiments - Recent Experiments http://www.chromeexperiments.com A fun and unpredictable kinetic vector-painter.

from World Future Society blogs http://www.wfs.org/blog

For colleges and universities, the great age of experimentation is now upon us.Harvard and MIT recently announced a new nonprofit partnership, known as edX, to offer free online courses from both universities.

The Minerva Project recently announced it will become the first elite American University to be launched in over a century, at the same time, transforming every aspect of the university-student relationship. The Ronin Institute is promising to reinvent academia, but without the academy.

read more

from A List Apart http://www.alistapart.com/articles/ We’re better connected than we’ve ever been, but we’re not always connected. ApplicationCache lets users interact with their data even when they're offline, but with great power come great gotchas. For instance, files always come from the ApplicationCache, even when the user is online. Oh, and in certain circumstances, a browser won't know that that the online content has changed — causing the user to keep getting old content. And, oh yes, depending on how you cache your resources, non-cached resources may not load even when the user is online. Lanyrd’s Jake Archibald illuminates the hazards of ApplicationCache and shares strategies, techniques, and code workarounds to maximize the pleasure and minimize the pain for user and developer alike. All this, plus a demo. Dig in.

from A List Apart http://www.alistapart.com/articles/ Browsers can do terrible things to type. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves. The results are an awkward mimicry of real type design, and can be especially atrocious with web fonts. Adobe’s Alan Stearns shares quick tips and techniques to ensure that your @font-face rules match the weight and styles of the fonts, and that you have a @font-face rule for every style your content uses. If you’re taking the time to choose a beautiful web font for your site, you owe it to yourself and your users to make certain you’re actually using the web font — and only the web font — to display your site’s content in all its glory.

from Codrops http://tympanus.net/codrops

View demo Download source

Today we want to share an experimental 3D layout with you. It’s inspired by the famous Flipboard app where a seamlessly “normal” page flips like a page in a book when swiped. We’ve tried to re-create that effect using CSS 3D transforms and JavaScript, making a layout that is “flippable” and responsive. While the swiping makes sense for touch devices, dragging will do for normal browsers.

For the demo, we’ve made a little booklet with some placeholder text and images from NASA HQ. The images are licensed under the Creative Commons Attribution-NonCommercial 2.0 Generic License. The placeholder text is by http://hipsteripsum.me/.

Please notice that this is very experimental and just a proof-of-concept. It was tested in the latest versions of Safari, Chrome and Safari Mobile. The behavior is unfortunately not as nice as expected in Firefox.

There are probably still many undiscovered bugs and although Safari and Chrome support all the properties used, we had to apply a couple of hacks to overcome some unexpected behavior. Let us know about your experience with it and how it performs.

Some of the jQuery plugins we are using for this:

History.js for keeping track of the current state/pages

TouchSwipe for dragging and swiping the pages

Modernizr for checking browser support of the CSS properties

The HTML is build up of a main wrapper with the class container and the ID flip. Inside, we’ll have all the pages, the first one being the cover and the last one being the back of the booklet. The other pages will contain some title element and boxes. These boxes will each need an additional “height” and “width” class which will give the element percentage-based dimensions. For example, w-50 is a class that will give the element a width of 50%. Depending on how a page should be laid out, we would add a fitting set of items:

Headline Published May 7, 2012

Some text

We are applying some “tricks” for making everything work responsively. The images are background-images and we set the background size of that element to “cover” while leaving the width and height fluid, in percentages. That’s of course not how it should be done. But it’s just for demonstration purpose. The teaser text is already loaded, and just “cut off” because the box is set to overflow “hidden”. To make it look smoother, we’ve just added a pseudo-element with a white to transparent gradient which covers the last bit of the box.

A great help for creating responsive layouts like these is this:

* { box-sizing: border-box }

which finally got the attention it deserves thanks to this article by Paul Irish. When laying out elements using percentages it really comes in handy to use the border-box value since we can for example, define paddings in pixels and not break our 50% width box.

We will use jQuery Templates for creating the book structure:

The trick is to create a left side and a right side of a page, hiding half of each side to make it appear as one.

Before we call our experimental plugin, we need to check browser support first:

If there is browser support for CSS 3D transforms and transitions we’ll load all the other necessary scripts and call our flips plugin.

Please note again that it’s only experimental, but nonetheless, I hope you find it interesting.

Find this project on Github

View demo Download source

from 456 Berea Street http://www.456bereastreet.com/

Most web developers who have viewed their work in an iOS device know that Safari for iOS likes to zoom in on the page and do weird things to font size when you change the device’s orientation from portrait to landscape. A too common way to prevent that is to completely disable the user’s ability to zoom, which you really do not want to do.

Luckily there is A Fix for the iOS Orientationchange Zoom Bug, a very clever one too. I’ve been using this in a few projects and have found it to work well. I have however run into a couple of issues (that in hindsight are pretty obvious) that I want to note here as a reminder to my future self.

Read full post

Posted in CSS, JavaScript, iOS.

Copyright © Roger Johansson

from Jeffrey Zeldman Presents The Daily Report http://www.zeldman.com

IN ISSUE No. 350 of A List Apart for people who make websites: keep your web type looking right across browsers, platforms, and devices; let users do stuff on your site even when they’re offline.

Say No to Faux Bold

by ALAN STEARNS

Browsers can do terrible things to type. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves. The results are an awkward mimicry of real type design, and can be especially atrocious with web fonts. Adobe’s Alan Stearns shares quick tips and techniques to ensure that your @font-face rules match the weight and styles of the fonts, and that you have a @font-face rule for every style your content uses. If you’re taking the time to choose a beautiful web font for your site, you owe it to yourself and your users to make certain you’re actually using the web font — and only the web font — to display your site’s content in all its glory.

Application Cache is a Douchebag

by JAKE ARCHIBALD

We’re better connected than we’ve ever been, but we’re not always connected. ApplicationCache lets users interact with their data even when they’re offline, but with great power come great gotchas. For instance, files always come from the ApplicationCache, even when the user is online. Oh, and in certain circumstances, a browser won’t know that that the online content has changed — causing the user to keep getting old content. And, oh yes, depending on how you cache your resources, non-cached resources may not load even when the user is online. Lanyrd’s Jake Archibald illuminates the hazards of ApplicationCache and shares strategies, techniques, and code workarounds to maximize the pleasure and minimize the pain for user and developer alike. All this, plus a demo. Dig in.

Illustration by Kevin Cornell for A List Apart

from kottke.org http://kottke.org/

Austin Seraphin, who you may remember from his review of the iPhone, recently learned how to use echolocation to navigate his physical environment in a new way.

We started out in the hallway outside of my condo. They turned an old school into lofts, so the hallways and stairwells look and sound like a school. He had me walk down the hallway without touching the walls by using echolocation. Just to make it clear: echolocation does not normally replace the use of a cane, but for this exercise I did not use a cane. I could hear the hard surfaces, and gradually the walls came into focus. I could actually do it. The walls provided the shoreline, and I could actually see them on either side and keep in the center.

I began to understand that this required a whole new way of thinking. Justin gave constant instruction to help me learn. "Scan left. Scan right. Now scan straight ahead. You have to start thinking like a sighted person." In deed, the muscles in the back of my neck would start to hurt because I did not need to move my head as much before. Now the direction of my gaze actually meant something.

We then journeyed to the stairwell. Now I would really begin to understand what thinking like a sighted person really meant. I scanned left, and saw a set of stairs going up like I had in my loft. I scanned right, and saw a set of stairs going down, which made sense. I scanned up, and saw something extend above and going back. What the hell? It took a minute to realize with Justin's help that I saw the set of steps above me on another stairway. I had never experienced that kind of vivid three dimensional emersion before. My brain flipped.

See also Daniel Kish and Ben Underwood. (via waxy)

Tags: Austin Seraphin   blind

from Web Designer Wall - Design Trends and Tutorials http://webdesignerwall.com Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I'm going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They [...]

Advertise here with BSA

from kottke.org http://kottke.org/

In this short film by Sarah Klein and Tom Mason, Ken Burns shares his thoughtful perspective on what makes a good story.

Abraham Lincoln wins the Civil War and then he decides he's got enough time to go to the theatre. That's a good story. When Thomas Jefferson said "we hold these truths to be self-evident, that all men are created equal", he owned a hundred human beings and never saw the hypocrisy, never saw the contradiction, and more importantly never saw fit in his lifetime to free any one of them. That's a good story.

Over at the Atlantic, Kasia Cieplak-Mayr von Baldegg has an interview with the filmmakers.

Tags: Kasia Cieplak-Mayr von Baldegg   Ken Burns   Sarah Klein   Tom Mason   video

from ProDesignTools http://ProDesignTools.com

We’ve mentioned Adobe TV in the past, but it just keeps getting bigger and better…  They’ve just published a large series of free new video tutorials for all Creative Suite 6 tools.

You’ll learn the basics with Getting Started overviews plus What’s New reviews by product experts, with nearly 18 hours of content covering all major CS6 applications.

And if you want to get going today, you can go ahead and download a free 30-day trial for any CS6 product for Windows or Mac – then install, run, and start your training…

Here’s how the courses break out:

Video Tutorial

Chapters

Runtime

Free Trial

See Complete CS6 System Requirements
+ All CS6 Product Configurations

Learn Photoshop CS6

21

2h 02m

Download

Learn Illustrator CS6

19

1h 32m

Download

Learn InDesign CS6

18

2h 40m

Download

Learn Dreamweaver CS6

13

1h 52m

Download

Learn Fireworks CS6

8

0h 21m

Download

Learn Flash Pro CS6

11

1h 12m

Download

Learn Premiere Pro CS6

18

1h 05m

Download

Learn After Effects CS6

23

1h 33m

Download

Learn Audition CS6

8

0h 57m

Download

Learn SpeedGrade CS6

12

1h 32m

Download

Learn Adobe Edge

9

1h 07m

Download

Learn Adobe Muse

10

0h 37m

Download

Learn Creative Cloud

22

1h 19m

Download

Much of the extensive how-to series of tips, tricks, and techniques was produced by the well-regarded Lynda.com in partnership with Adobe.

Do you have any questions about CS6?  Just ask them below and we’ll get you answers fast!

Keep up with the latest on Adobe software — subscribe to our RSS feed or follow us on Twitter or Facebook… You can also just enter your email and have new articles sent directly to your inbox.

Related Posts

Adobe Photoshop Best Tips, Tricks, Techniques, Training & Tutorials

Free New Adobe CS5 Tutorials: 17+ Hours of Online Video Training

Free Adobe Video Training

Four Hours of Free Tutorials for Lightroom 4, plus Other Resources

Using Adobe CS5 to Create Websites and Apps for Mobile & Tablets

 

Comments

Comments

Related Stories

Download Adobe CS6 Trials: Direct Links (no Assistant or Manager)

Adobe Releases CS6 – Now Shipping plus Download Free Trials

Watch a Replay of the CS6 Global Online Launch Event [VIDEO]

from kottke.org http://kottke.org/

From Steven Heller and Veronique Vienne, a book about 100 Ideas that Changed Graphic Design. Maria Popova has a preview at The Atlantic.

From how rub-on lettering democratized design by fueling the DIY movement and engaging people who knew nothing about typography to how the concept of the "teenager" was invented after World War II as a new market for advertisers, many of the ideas are mother-of-invention parables. Together, they converge into a cohesive meditation on the fundamental mechanism of graphic design -- to draw a narrative with a point of view, and then construct that narrative through the design process and experience.

Tags: books   design   Maria Popova   Steven Heller   Veronique Vienne

from Signal vs. Noise http://37signals.com/svn/posts

A common obstacle we face when releasing new features is making production schema changes in MySQL. Many new features require additional columns or indexes. Running an “ALTER TABLE” in MySQL to add the needed columns and indexes locks the table, hanging the application. We need a better solution.

Option 1: Schema Change in Downtime This is the simplest option. Put the application into downtime and perform the schema change. It requires us to have the application down for the duration of the “ALTER TABLE”. We’ve successfully used this option for smaller tables that can be altered in seconds or minutes. However, for large tables the alter can take hours making it less than desirable.

Option 2: Role Swap This is the option that we have used in the past to perform schema changes on large tables. There are quite a few steps which make this option error-prone. When the changes are made, a short downtime to swap the application between the master and replica is required.

Here’s a sample of the process we follow to change the roles of the current master “A”, and the current replica “B”.

On B, STOP SLAVE.

On B, SHOW MASTER STATUS. This requires that binary logging is enabled on B.

On B, execute schema changes with ALTER TABLE statements.

On A, CHANGE MASTER TO MASTER_HOST=’B’, MASTER_USER=’...’, MASTER_PASSWORD=’...’, MASTER_LOG_FILE=’...’, MASTER_LOG_POS=nnn; according to the master status reported by B.

On B, START SLAVE.

Let B catch up to A.

Stop applications writing to A, and watch SHOW PROCESSLIST until activity is totally quiet.

On A, SET GLOBAL read_only=1;

On B, STOP SLAVE once you’re sure it has applied all the changes replicated from A.

On B, SET GLOBAL read_only=0;

Reconfigure your applications to write to B instead of A, and restart applications.

START SLAVE on A.

Finally…Have a stiff drink. You need it at this point.

Option 3: pt-online-schema-change We have recently started using pt-online-schema-change to perform our schema updates without needing to take downtime. It was developed by the folks at Percona. During the online schema change the original table is not locked and will continue to take reads and writes. In very basic terms here is what is happening when you run pt-online-schema-change.

Create new table with same structure as original.

Update schema on new table.

Copy rows in batches from original table.

Move original table out of the way and replace with new table.

Drop old table.

Copying all rows of a table to the new table creates a lot of data that needs to be replicated to your slave. Fortunately pt-online-schema-change will monitor the status of your slave and will pause the data copy process if replication goes too far behind. We have also found that the data copy process can be disk intensive and will impact MySQL’s performance. Even with pt-online-schema-change we still choose to perform schema updates after hours to limit the impact on our applications. There are a number of settings in pt-online-schema-change which you can tune to maximize performance during the schema change. We also thoroughly test each schema change in staging prior to running production.

Next up: MySQL HA and Failover

#Reading → Working with files in JavaScript, Part 2: FileReader via NCZOnline

#Reading → If You Can Copyright an API, What Else Can You Copyright? via Wired Enterprise

from CMYBacon http://www.cmybacon.com

I have some really exciting news to share with everyone! Wired.com has launched a design blog, Wired Design, and I have been asked to write for it! Needless to say, I’m pretty excited. And there are some big fish in that pond (Caterina Fake, Christopher Jobson, Chris Anderson, etc.) that make this little fish proud to be writing alongside them.

So head on over to Wired Design and start reading!

from Daring Fireball http://daringfireball.net/

iOS has evolved in a fairly predictable manner over the years. Apple has done a good job tackling the lowest-hanging fruit on the to-do list, year after year. They crossed off a lot of big obvious features over the first few years: third-party apps, cut-copy-paste, enterprise support, push notifications, better multitasking. Last year brought a few more: over-the-air software updates, cloud-based backups and wireless syncing, and a much improved notification interface.

Another good source for iOS feature predictions has been to survey the competition and identify the areas where iOS was lacking. Those items from last year, for example, were areas where Android was ahead.

iOS is by no means feature-complete. But it’s getting harder to identify the low-hanging fruit — the things you just know Apple has to be working on, not just the stuff you hope they are. The biggest one left is mapping. Today brings a report from 9to5Mac that Apple is set to switch the back-end data in iOS’s Maps app from Google to its own mapping services; John Paczkowski confirms it, quoting a source who claims the new Maps will “blow your head off”.

Here’s the thing. Apple’s homegrown mapping data has to be great.

Mapping is an essential phone feature. It’s one of those few features that almost everyone with an iPhone uses, and often relies upon. That’s why Apple has to do their own — they need to control essential technology.1 I suspect Apple would be pushing to do their own maps even if their relationship with Google were still hunky-dory, as it was circa 2007. (Remember Eric Schmidt coming on stage during the iPhone introduction?) But as things actually stand today between Apple and Google, relying on Google for mapping services is simply untenable.

This is a high-pressure switch for Apple. Regressions will not be acceptable. The purported whiz-bang 3D view stuff might be great, but users are going to have pitchforks and torches in hand if practical stuff like driving and walking directions are less accurate than they were with Google’s data. Keep in mind too, that Android phones ship with turn-by-turn navigation.

What else remains hanging low on the iOS new-features tree, though? I can think of a few:

Clever inter-application communication. Seems crazy that iOS, the direct descendant of NeXT, doesn’t have anything like Services, which were one of NeXT’s most touted features (and rightfully so). It’s also worth noting that Android has a pretty good Services-esque system in place, called “Intents”, and Windows 8 has an even richer concept called “Contracts”.

Third-party Notification Center widgets. Like the Stocks and Weather ones from Apple — information at a glance, without launching an app.

Third-party Siri APIs. Let other apps provide features you can interact with through Siri.

But that’s about it. And even the Siri API idea seems more like a “nice to have” feature idea than a low-hanging “Apple really has to do this sooner or later” idea. Again, I’m not saying Apple’s iOS to-do list is empty; I’m just saying the list of obvious they-gotta-do-it stuff is getting short.

Tim Cook, back in January 2009: “We believe in the simple, not the complex. We believe that we need to own and control the primary technologies behind the products we make, and participate only in markets where we can make a significant contribution.” ↩

from Quotes on Design http://quotesondesign.com

Thirty spokes meet in the hub,
but the empty space between them
is the essence of the wheel.

Pots are formed from clay,
but the empty space within it
is the essence of the pot.

Walls with windows and doors
form the house,
but the empty space within it
is the essence of the home.

from Design Observer: Main Posts http://designobserver.com "Whatever else is unsure in this stinking dunghill of a world," wrote James Joyce, "a mother's love is not." Herewith, a Mother's Day celebration of designers and their mothers.

from Cameron Moll / Designer, Speaker, Author http://cameronmoll.tumblr.com/

Earlier today Erik Spiekermann made mention of FF Chartwell, and, at least conceptually, it’s pretty fantastic.

Similar to the way icon fonts replace keyboard characters with icons, FF Chartwell uses alphanumeric characters to generate beautiful charts on the fly. To my knowledge, however, this works only in software programs and can’t be embedded in web pages.

Update: It can be embedded. It’s possible to embed it, but the current EULA doesn’t allow it. Demo by Yaron Schoen who says, “Besides the FOUT which was really hard (impossible?) to remove, it was glorious.”

The family includes “weights” for creating bar, line, radar, pie, rose, and ring charts. A simple math equation, such as 10+20+30, is all that’s needed to generate the chart. Each value can be assigned a color, which in turn becomes the value’s color in the chart.

In something such as Photoshop, it’s quite cumbersome to change the values, as you have to enable and disable the OpenType feature to do so. In other programs such as InDesign, this isn’t as cumbersome (as shown in the video above).

Here’s a simple example using Chartwell Rings and Chartwell Lines. The same equation is utilized in both charts:

Conceptually, I love the idea and hope to see this and other fonts expand to include webfont embedding, assuming the data could be represented semantically and accessibly. You can purchase FF Chartwell as a whole or as separate charts, and you can find additional usage examples on the FontFont blog.

from Caveat Lector http://blogs.adobe.com/vikrant Among the various new features in InDesign CS6, Grayscale Preview and Export should come in really handy to all print designers. For any print jobs that also need a grayscale output, you no longer need to maintain a separate file. You also don’t need to send the full color PDF to the printer and cross [...]

#Reading → Our Past, Our Future: Welcome to the Anthropocene via : Futurist Speaker Glen Hiemstra

from Wolff Olins Blog http://blog.wolffolins.com/

By Mary Ellen Muckerman

We know that the New York Times are infographics geniuses. They visualize data to track sentiment on a topic, while inviting you to participate in the conversation or even start a new one. Sorting features allow you to find “your people” and compare ideas.

The one above was an instant response to an extremely timely topic—that’s NYT’s bread and butter—but it’s a lesson for other brands who trade in social currency.

From media to retail to cultural institutions to healthcare, creating timely, engaging experiences like this can keep your finger on the pulse of what your consumers are thinking, helping you stay relevant and useful.

See the infographic: Your Reactions to Obama’s Same-Sex Marriage Stand

from WebResourcesDepot http://www.webresourcesdepot.com

Advertise here with BSA

JQVMap is a jQuery plugin for rendering vector maps by using SVG for modern browsers and VML for the rest.

It is a heavily modified version of another plugin, jVectorMap, and comes with ready-to-use maps of "world, USA, Europe and Germany".

There are several customization options for beautifying the maps including colors, borders or their opacities.

Maps can have zooming enabled or not, show tooltips of data when hovered and there is callback for clicks.

Also, it is possible to select any regions on initial load or after any custom event.

Advertisements:Infragistics jQuery controls deliver the magic of HTML5, w/o sacrificing resources, time, or money.Professional XHTML Admin Template ($15 Discount With The Code: WRD.)SSLmatic – Cheap SSL Certificates (from $19.99/year)

from John Nack on Adobe http://blogs.adobe.com/jnack

What do you think of this cleverness?

 

Could people wrap their heads around the idea enough to use it productively? In my experience many people still struggle with things like symbols & Smart Objects–if they even use them at all. [Via Mausoom Sarkar]

from Futurist.com: Futurist Speaker Glen Hiemstra http://www.futurist.com

from John Nack on Adobe http://blogs.adobe.com/jnack

Automatic sync to Creative Cloud, PSD export, and more are now available on iPad and Android tablets:

You may now increase the resolution to 2048×2048 with 10 layers. The default is 1600×1600 with 16 layers, but you can change it in Preferences. 

Automatic synchronization with Creative Cloud 

Available in 6 languages (English, French, German, Japanese, Spanish, Italian) 

Added export to PSD and PNG via Camera Roll or email. 

Improved rotate and flip image workflow. 

Added ability to transfer images to desktop via iTunes [iOS only].

Added two new Tutorials.

Added four new Effects (Watercolor Paint, HDR Look, Soft Light and Soft Skin).

from O'Reilly Media, Inc. New Titles http://oreilly.com/

Take your existing JavaScript skills to the next level and learn how to build complete web scale or enterprise applications that are easy to extend and maintain. By applying the design patterns outlined in this book, you’ll learn how to write flexible and resilient code that’s easier—not harder—to work with as your code base grows.

#Reading → EPUB Changes in Adobe InDesign CS6 via The InDesigner

#Reading → How We Serve Faster Maps from MapBox via Blog - MapBox

from kottke.org http://kottke.org/

A profile of Yvon Chouinard, the founder of Patagonia and an unlikely business guru.

Then he looked at everything Patagonia made, shipped or processed, and resolved to do it all more responsibly. He changed materials, switching in 1996 from conventional to organic cotton-despite the fact that it initially tripled his supply costs-because it was less harmful to the environment. He created fleece jackets made entirely from recycled soda bottles. He vowed to create products durable enough and timeless enough that people could replace them less often, reducing waste. He put "The Footprint Chronicles" up on Patagonia's website, exhaustively cataloging the environmental damage done by his own company. He now takes responsibility for every item Patagonia has ever made -- promising either to replace it if the customer is dissatisfied, repair it (for a reasonable fee), help resell it (Patagonia facilitates exchanges of used clothes on its website), or recycle it when at last it's no longer wearable.

Posting this partially for my wife, who is a life-long Patagonia customer.

Tags: business   Patagonia   Yvon Chouinard

RT @OpenIDEO: How 'thinking wrong' can be the key to right answers /great lessons in thinking differently via @GOOD

from John Nack on Adobe http://blogs.adobe.com/jnack

Adobe’s new HTML animation tool, Edge, has just released preview 6. Improvements include:

Built-in lessons:  Six new tutorials are built right into Edge, to help new users get familiar with the basics.

Coding: A new code panel provides a complete view of the actions code in a composition, and the code editor has a new full code mode.

Publishing: Projects can be published into DPS or iBooks formats. There’s also a new Static HTML Markup feature for SEO benefits, and Google Chrome Frame support for better fidelity on non-HTML5 browsers.

Symbols: Users can now copy/paste and import/export symbols from one project to another.

Languages: Edge is now available in French, German, Japanese, Italian, and Spanish.

Other cool stuff: The Preview in Browser function is now compatible with Adobe Shadow, auto-keyframe mode has been improved, editable time codes are back, and so much more to make Edge more efficient.

Download it here.

from InDesignSecrets http://indesignsecrets.com You've copied a bunch of numbered paragraphs from a web page and now you want to use automatic numbering instead. Here's how to clean up the mess!