Skip navigation
Help

Condé Nast Publications

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.
Original author: 
Scott Gilbertson

The Internet Archive’s Wayback Machine is deceptively simple — plug in a website and you can see copies of it over time.

What you don’t see is the massive amount of effort, data and storage necessary to capture and maintain those archives. Filmmaker Jonathan Minard’s documentary Internet Archive takes a behind the scenes look at how (and why) the Internet Archive’s efforts are preserving the web as we know it.

The interview with Brewster Kahle, founder of the Internet Archive, especially offers a look at not just the idea behind the archive, but the actual servers that hold the 10 petabytes of archived websites, books, movies, music, and television broadcasts that the Internet Archive currently stores.

For more on the documentary, head over to Vimeo. You can learn more about the Internet Archive on the group’s website.

0
Your rating: None

The basic elements of responsive design — fluid grids, flexible media and CSS media queries — are key to building successful websites that work across platforms and devices, but these three components are not the end of the responsive design story. In fact, as developer Brad Frost argues in the talk embedded above, there is, or should be, much more to it than that.

While many would call the broader approach “adaptive” design, Frost wants the phrase “responsive web design” to go the way of Corn Flakes, as he puts it. That is, to become a more general term that can “encompass all the things that go into creating a great multi-device web experience.” That means things that go beyond fluid grids, flexible media and media queries — things like performance, device support, device optimization and future-friendly designs.

In Frost’s analogy responsive design is the tip of the adaptive design iceberg, where all the good stuff is under the water. “Below the waterline, that’s where the true opportunity is,” says Frost, “that is where we actually have the potential to basically reshape what the web is, what it can do, where it can go and who it can reach. And that is powerful.”

Just what’s below the waterline and how do you roll these broader ideas into an actual website? Well, be sure to watch the video — Frost walks through an example of a mobile-first responsive design, which you can also read about on his site. If you prefer a tutorial sans video, Frost’s write-up from last year is available on HTML5Rocks.

0
Your rating: None

Students: Step into your summer office. Image: Lost In The RP/Flickr

Students, start your coding engines. Google’s annual Summer of Code program, which helps college students write open source software during their summer vacations, starts today.

Past participants have helped improve everything from popular web frameworks to browser add-ons and even operating systems. Summer of Code is also not a half bad way to get yourself on Google’s radar — the company looks at the results of the program to help it “identify potential recruits.”

Summer of Code has served as a launchpad for quite a few new open source software projects as well as helping to jumpstart work on existing favorites. This year’s roster includes some 1,208 students who will spend the next 12 weeks writing code for 180 different open source organizations.

With 208 proposed projects, there’s a pretty good chance that some Summer of Code improvements will be rolled into your favorite open source projects later this year. Among the things we’ll be keeping an eye on are Metalink’s various efforts to improve the download capabilities in Firefox and Chrome. Eventually Metalink wants to bring error recovery/repair for large downloads to everything from Chrome to wget.

Other promising projects include several efforts to help improve OpenStreetMap, the so-called “Wikipedia of maps,” as well as Code for America’s various projects, some new features for Git and an ambitious plan to bring Pylint into the modern world of Python 3.

For more info on this year’s Summer of Code, head over to Google’s Summer of Code website, which has details on all the various projects and participants. You can also get updates from the Summer of Code page at Google+.

0
Your rating: None

Inspired by Bret Victor's demo, Chris Granger's live editor helps connect you with what you're building.

Last month we pointed you to a video of Bret Victor’s talk, “Inventing on Principle.” Victor has worked on experimental UI concepts at Apple and also created the interactive data graphics for Al Gore’s book, Our Choice. In the talk Victor showed off a demo of a great real-time game editor that makes your existing coding tools look primitive at best.

Inspired by Victor’s presentation, developer Chris Granger has put together a similar live game editor in Clojurescript.

If you haven’t watched the video of Victor’s talk, you should start there, but the basic idea behind his real-time editor is to make your code more closely connected to what it creates, in this case a simple game. Granger’s take on the idea is similar — all changes you make to the code are reflected immediately in the running game. You change a line of code and the game immediately changes right with it. Here’s Granger’s video demonstrating the editor:

As Granger writes on his blog, “essentially I learned that Victor was right — there’s unquestionable value in connecting yourself with your creation.”

Granger’s demo code is available on GitHub and there’s a .jar file available for download if you’d just like to play with the demo.

0
Your rating: None

We just had a moment similar to the time we first saw content-aware scaling in action, but this time it’s even better — we’ve seen the future of programming tools and it looks awesome.

Check out the video above of Bret Victor‘s recent talk, “Inventing on Principle.” Victor has worked on experimental UI concepts at Apple and also created the interactive data graphics for Al Gore’s book, Our Choice. The video above of Victor’s keynote at the Canadian University Software Engineering Conference, captures a wonderful talk on living your life based on principles, but for many developers what’s most arresting are the software development tools demoed.

Do your current tools suddenly feel incredibly outdated? Perhaps you thought you were using a well-tuned coding machine but suddenly realize you’re really just hitting two stones together? Thought so. Sadly, the apps demoed in the video aren’t available. That’s all right, though; it just means someone needs to build them. Be sure to let us know if you do.

4
Your rating: None Average: 4 (1 vote)

Photo: tobias.munich/Flickr

Anyone who’s ever tried to optimize a website has faced the very basic question — how long does your site take to load?

The answer seems like it would be easy to discover: Load your site in a page speed crawler like WebPagetest and soon you’ll have your numbers. But that’s just it; you won’t have a number, you have numbers and figuring out which numbers to listen to is trickier than you might think.

Strangeloop’s Joshua Bixby recently tackled the performance metric question in a blog post titled a Non-Geeky Guide to Understanding Performance Measurement Terms. The whole article is well worth reading, but perhaps the best advice is to make a video of the page load. “If you want to get a ground-zero look at your site’s performance,” writes Bixby, “capturing videos and filmstrip views of your pages’ load times are one of the best ways to go.”

The filmstrip view Bixby refers to is part of the WebPagetest results and shows what the visitor sees in a progressive series of page captures. To create a filmstrip or video test of your website, head over to WebPagetest and select the “visual comparison” tab.

Some common performance mistakes Bixby cautions against include using “response time” and “load time” interchangeably and “not realizing that ‘response time’ can mean any number of completely different things.”

To help those unfamiliar with the nuances of loading metrics, Bixby then breaks down and defines all the terms, including what exactly is meant by “start render” or “time to first byte,” as well as some caveats to bear in mind when going over the numbers for your website.

While Bixby’s post can be extremely helpful, especially to those who are just starting out in the often confusing world of website optimization, bear in mind that testing sites like WebPagetest are no substitute for real-world tests. “As a matter of due course, you always need to gather large batches of data and rely on median numbers,” writes Bixby, “but you also need to periodically get under the hood and take a real-world look at how your pages behave for real users.”

0
Your rating: None

The web is buzzing, and rightly so, about Wilson Miner’s incredibly inspiring talk from the 2011 Build Conference in Belfast. You may recognize Miner’s name from his role in developing Django, as part of the team that built Apple.com or as one of the founders of Everyblock.

Miner’s talk is not your typical web developer talk; in fact, he hardly mentions the web for most of it. Rather, Miner focuses on the broader impact that technologies, and the developers and designers who create them, have on our world, and how that world in turn shapes us. Miner reminds us that we aren’t building “just websites” but shaping the world we will live in for much of the foreseeable future. And, as the Alistair Smith quote shown in the talk says, “at times of change, the learners are the ones who will inherit the world, while the knowers will be beautifully prepared for a world which no longer exists.”

So turn off your music, throw the video in fullscreen mode and give it 38 minutes. Trust us, you won’t be sorry.

After you’re done be sure to visit Miner’s website, which has links to all the material used in the talk, including books, videos, music and images for anyone who would like to learn more.

4
Your rating: None Average: 4 (1 vote)

If you ever doubt your nerdery, head on over to Destroy All Software and watch the video of programmer Gary Bernhardt’s Wat talk. If you find yourself laughing, rest assured, you’re a nerd.

The talk comes from CodeMash 2012, where Bernhardt took a few moments to highlight a few WAT? (link NSFW) moments in some of the web’s favorite languages like Ruby and JavaScript.

Seriously JavaScript, what’s up with this:

> [] + {}
[object Object]
> {} + []
0

0
Your rating: None

A handful of the many screens your site needs to handle. Photo: Ariel Zambelich/Wired.com

This week’s Consumer Electronics Show in Las Vegas has seen the arrival of dozens of new devices from tablets to televisions. Some of these newfangled gadgets will soon be in the hands of consumers who will use them to access your website. Will your site work? Or will it end up mangled by a subpar web browser, odd screen size or slow network connection?

No one wants to rewrite their website every time a new device or browser hits the web. That’s why approaches like responsive design, and the even broader efforts of the future-friendly group, are trying to develop tools and techniques for building adaptable websites. That way, when a dozen new tablets suddenly appear on the scene, you can relax knowing your site will look and perform as intended, no matter which devices your audience is using.

Even if you aren’t a gadget lover, CES should help drive home the fundamental truth of today’s web — devices, they are a comin’. Webmonkey has compiled helpful resources for creating responsive design in the past, but the field is new and evolving rapidly so here’s an updated list of links to help you get started responsive, future-friendly sites that serve your audience’s needs whether they’re browsing with a tiny phone, a huge television or the web-enabled toaster of tomorrow.

Basics:

  • Use @media to scale your layout for any screen, but remember that this alone isn’t really responsive design.
  • Use liquid layouts that can accommodate any screen size. Don’t simply design one look for 4-inch screens, one for 7-inch, one for 10-inch and one for desktop. Keep it liquid, otherwise what happens when the 11.4-inch screen suddenly becomes popular?
  • Roll your own grids based on the specifics of your site’s content. Canned grid systems will rarely fit the bill. The problem with canned grids is that they don’t fit your unique content. Create layouts from the content out, rather than the canvas (or grid) in.
  • Start small. Start with the smallest size screen and work your way up, adding @media rules to float elements into the larger windows of tablet and desktop browsers. Start with a narrow, single-column layout to handle mobile browsers and then scale up from there rather than the other way around. Starting with the smallest screen and working your way up means it’s the desktop browsers that need to handle @media, make sure older browsers work by using polyfills like Respond.
  • Forget Photoshop, build your comps in the browser. It’s virtually impossible to mock up liquid layouts in Photoshop, start in the browser instead.
  • Scale images using img { max-width: 100%; }. For very large images, consider using something like Responsive Images to offer the very smallest screens smaller image downloads and then use JavaScript to swap in larger images for larger screens. Similar techniques can be used to scale video.
  • Forget about perfect. If you haven’t already, abandon the notion of pixel perfect designs across devices. An iPad isn’t a laptop isn’t a television. Build the perfect site for each.

Further Reading:

  • Future Friendly — An overview of how some of the smartest people in web design are thinking about the ever-broadening reach of the web: “We can’t be all things on all devices. To manage in a world of ever-increasing device complexity, we need to focus on what matters most to our customers and businesses. Not by building lowest common-denominator solutions but by creating meaningful content and services. People are also increasingly tired of excessive noise and finding ways to simplify things for themselves. Focus your service before your customers and increasing diversity do it for you.”
  • Building a Future-Friendly Web — Brad Frost’s excellent advice: “Think of your core content as a fluid thing that gets poured into a huge number of containers.”
  • There is no mobile web — “There is no mobile web, nor desktop web. It is just the web. Start with the content and meet people halfway.”
  • Responsive by default — Andy Hume on why the web has always been responsive, but was temporarily sidetracked by the fad of fixed-width sites.
  • COPE: Create Once, Publish Everywhere — NPR’s Director of Application Development, Daniel Jacobson, walks through how NPR separates content from display and uses a single data source for all its apps, sites, APIs and feeds. A great example of what Frost talks about regarding content as a fluid thing.
  • Support Versus Optimization — It can seem daunting to support dozens of mobile browsers, but if you aren’t up to the challenge of a few mobile browsers now what are you going to do when you need to support car dashboards, refrigerators, televisions and toasters, all with dozens of varying browsers?
  • The Coming Zombie Apocalypse — Not satisfied thinking a few years ahead? Scott Jenson explores further into the future and tries to imagine what the web might look like when devices all but invisible.

Techniques:

0
Your rating: None

Embedded above is an excellent presentation by Brad Frost. Below you can find a video that goes along with the slides.

Frost’s slides and talk revolve around the idea that the web is changing too rapidly to claim we can create future-proof websites or webapps. Instead we need to think in terms of future-friendly sites. In other words, forget perfection and start embracing what elements you can today. For Frost that means tools like responsive design, but also creating content that is “like water.”

“Think of your core content as a fluid thing that gets poured into a huge number of containers,” writes Frost. “Get your content ready to go anywhere because it’s going to go everywhere.”

Of particular note in the slides is Frost’s breakdown of Forbes.com into content and, ahem, not content. As Frost says, “people’s capacity for bullshit is rapidly diminishing… we need to respect people’s time and give them relevant, purposeful content without the extra cruft.” In other words, don’t be Forbes.

Be sure to check out the various helpful websites and books Frost lists toward the end for more on how to make your own sites future-friendly. [Update: Here's a link to Frost's collection of helpful links and resources for future-friendly sites.]

For a Future Friendly Web from Brad Frost on Vimeo.

See Also:

0
Your rating: None