demosthenes.info

A blog by Dudley Storey on , , , , , , and anything else that strikes his fancy.

featured articles

popular favourites

15 More Filler Text Generators For Web Page Mockups

In a previous article I gave a brief explanation of lorem ipsum text, its historical use in typesetting, and 18 modern filler text generators. The number and diversity of loren ipsum generators continues to grow, necessitating an entirely new article.

  • Zombie Ipsum: A macabre feast of frightful filler!Ironically, the most useful of the new sites is probably Not Lorem Ipsum, which generates contextual body copy for over fifty industries and professions, including banks, florists and web design. The site is great for creating specific filter text for business website mockups.

  • In terms of fun (and great design) the best site would be ZombieIpsum.

  • Lorem ipsum for skaters has a REST API and a JQuery plugin. BaseballIpsum uses quotes from the game, while Comic Ipsum derives its content from graphic novels.

  • If you want regional variations: local dialect texdt from Newfoundland, Spanish, Yorkshire, and Australia. make | TEXT generates paragraphs in English, Spanish, Afrikaans, Dutch and French from a variety of sources (the King James Bible, the Kama Sutra, and more).

  • Still more literary sources: Fillerati uses a corpus of 19th and early 20th century writers: Edgar Rice Burroughs, Jules Verne, H.G. Wells, and more, with a great slider interface and options to generate marked-up HTML content.

  • Filler text from more celebrities: Arnold Schwarzenegger, Chuck Norris.

  • Finally, Journo ipsum, from the wonderful Neimen Journalism Lab, together with CorporateIpsum, generates appropriate business-speak boilerplate.

Many thanks to Jeff Atwood for supplying many of the links used in this post.

20 Essential Browser Keyboard Shortcuts

“Keyboard fast, mouse slow” is one of my personal mantras. Using keyboard shortcuts is always faster than moving a mouse to click on buttons. If you followed all of the shortcuts I recommend here, you’d save yourself an average of five minutes every day, even with casual web use.

These keyboard shortcuts work for both Firefox and Chrome; most of them will also work for Safari, Opera and IE. If you’re a Windows or Linux user, simply substitute CTRL for . I’ve also made a PDF of the keyboard shortcuts for you to download.

The shortcuts above, plus a dozen more, some of them browser-specific:

⌘ + TNew tab
⌘ + LFocus URL bar
⌘ + WClose tab
⌘ + shift + TReopen last closed tab
⌘ + left click on linkOpen link in new tab
⌘ + Shift + left click on link Open link in new focussed tab
⌘ + RRefresh
⌘ + shift + RHard refresh (ignore browser cache)
⌘ + 1Go to first tab
⌘ + 2Go to second tab (also works for 3 - 8)
⌘ + 9Go to last tab
⌘ + plusZoom in
⌘ + minusZoom out
⌘ + [Go back
⌘ + ]Go forward
HomeGo to top of page
EndGo to bottom of page
EscStop
ReturnStart Google search for term(s) entered in the search bar
⌘ + Shift + ReturnConverts word entered in URL bar to a .com address. (For example, converts ford to www.ford.com)
⌘ + UView Page source (Firefox)
⌘ + opt + UView page source (Chrome)
⌘ + FFind on page (works when viewing source code of a web page too!)
⌘ + Shift + IWhile signed into Google in Chrome: take the current URL, placing it in a new gMail document as a fwd
⌘ + Shift + JOpen Error Console in Firefox (useful for simple debugging of JavaScript)
⌘ + DBookmark current page
⌘ + opt + left cursorFocus on the tab to the left
⌘ + opt + right cursorFocus on the tab to the right
Page DownScroll down to next visible section of page
Page UpScroll up to previous visible section of page
A flower on the beach off Puaikura Reef, Rarotonga, Cook Islands

Puaikura Reef, Rarotonga

For the past week I’ve been in the Cook Islands, preparing for the wedding of my brother. Rarotonga is a tiny island, barely 32 kilometers around, part of a chain of islets and atolls scattered through the middle of South Pacific that were first inhabited millennia ago as the Polynesian migration expanded from Taiwan.

Wedding of Adrian Storey on a beach at RarotongaLittle has changed since I last visited: there are just a few thousand people living semi-permanently on the island, most of who get around on mopeds or one of the two buses (one marked “clockwise”, the other “counter-clockwise”). Stray chickens still wander the road, and everything works on island time. There are a few more buildings, and wireless internet is available in some locations (although ruinously expensive), so I only had to walk along the beach for a few minutes from the lodge I was staying in to get caught up on eMail.

I took the photos you see here with an 18 – 300mm lens mounted on a Canon 5D Mark III, which impressed me very much. I also embarked on a circumnavigation of the island and shot it with a helmet-mounted Hero 2 wide-angle camera; the video of that excursion will take some time to edit together, but you can expect to see it up on YouTube shortly.

Lion Wall, Chauvet Cave, France

Everything’s Eventual: Creators As Perpetual Editors

Michelangelo’s Pietà is frozen perfection Pietàin Carrara marble. Once the last polishing pad was put aside, the sculpture was removed from the stream of time, remaining unchanged through the centuries.

Today that is no longer the case, for every form of art. James Cameron’s Titanic, originally shown a decade ago, was re-released as a “enhanced” version last month, pushed into 3D; ebooks go through multiple editions in a month. Nothing about art is fixed or permanent any longer.

Art has always faced an evolutionary imperative: inspire other creative works or die. Reflecting the impatience of their creators with the slow and indifferent process of natural selection, creative work is experiencing the selective pressure of cultural taste and creative inspiration. In response, art is beginning to evolve itself.

In the oldest cave systems, there is plentiful evidence that art was readjusted, replaced and redrawn by our forgotten ancestors; perhaps by the same painter, more likely by his descendants through the passage of deep time. In the interregnum between the birth of agriculture and today, art was enshrined, constant, unchangeable. Now, every creative work is under constant pressure to adapt to the rapidly changing expectations of its audience.

As always, this is due to technology: as editing tools become more powerful, the temptation to “tweak” becomes almost irresistible. This inevitably leads to a process of constant re-editing in which few works are ever permanent: like life, they exist in the stream of time, never left alone. In turn, the expectations of the audience changes: they grow bored with work that is static, fixed, and unchangeable.

The “mimetic drift” of constantly-evolved works leads to an entirely new set of concerns, most particularly the loss of original material. The film print of Star Wars shown in theatres in 1977 can no longer be seen, outside of some copies preserved on the archaic medium of laserdisc: according to Lucasfilm, the current edited version is all that exists. But there is immense value in the original work, even if only for archival purposes. It’s equally important to curate the process of alteration. All too often in the case of digital art, the past is disposable: there are entire digital graveyards filled with the ashes of old game code and corrupted forum postings, art that was made and lost, never to be recovered.

This process sharply brings into question concepts of ownership. If you have an oil painting on your wall, you have physical possession of it: you can reframe it, cut it into strips, and reassemble it. You don’t have the right to recreate it, at least in a traditional copyright system: that is the sole power of the intellectual owner of the work. So what happens when that painting is digital and net-connected? Does the artist have the right to come in through the internet and “fix” the painting? What about via a software update? And what does that imply about possession?

From the commercial side, “airbrushing” photos of models to make them more visually appealing has been a standard practice for decades. Coded into automatic correction algorithms, that aesthetic is making its way into consumer-level products, from simple processes that remove red-eye to suites of software that “enhance” and “beautify” images with no intervention from the photographer.

All of these trends call for an increased awareness on the part of both creators and their audience. This awareness could be summarized in a manifesto of just three points:

  • Artists need to recognize that the creative act is a negotiation between themselves and their audience, and that every iteration and derivation of their work – from flawed first generation versions to fanfic – has value and should be retained.

  • Both artists and audiences need better curative tools that will record the evolution of any piece of art and allow the audience to decide which version they want to interact with.

  • As a culture, we should be forthright about communicating changes made to artistic work: it should always be clear what was changed, when, by whom, and how.

Ozymandius Corp

HTML5 Best Practices For header section and primary navigation

Marking the end-of-semester final sites from my classes, I’m discovering the same basic misunderstandings and bad habits repeated in pages made by many students. Most of the pages are valid, which is a great start, but they’re also incomplete.

While I emphasize best practices in my classes (and elsewhere on this blog), it occurred to me that perhaps they needed to be in one place, or presented in a series of articles. Thus, this entry.

Let’s take the start of a valid, accessible page, shown at the top of this article. This is not yet set up for , nor has it had metadata added to it, but the page is otherwise complete. Here’s the code:

  1. <!DOCTYPE html>
  2. <html lang=en>
  3. <head>
  4. <meta charset=utf-8>
  5. <title>Ozymandius Corp – About Us</title>
  6. <link rel=stylesheet href=styles.css>
  7. </head>
  8. <body>
  9. <div id=wrapper>
  10. <header role=banner>
  11. <h1>
  12. <a href=index.php>
  13. <img src=assets/images/ozymandius-corp.jpg
  14. title="Ozymandius Corp" alt="Ozymandius Corp">
  15. </a>
  16. </h1>
  17. <nav>
  18. <a href=index.php accesskey=1>Home</a>
  19. <a href=about.php accesskey=2 class=current-page>About Us</a>
  20. <a href=about.php accesskey=3>Products</a>
  21. </nav>
  22. </header>

What makes this a well-made page?

  1. The least amount of HTML5 neccessary written.

  2. title includes both the name of the company / site and the purpose of the page.

  3. All the CSS rules are placed in a single linked style sheet.

  4. div elements kept to a minimum.

  5. ARIA roles used to make the content accessible.

  6. Whether the logo is an image or text, it is inside a <h1> tag and linked to the index page.

  7. A logical folder structure, with all filenames in lowercase. Local paths used, not absolute.

  8. The logo image has the same text in the banner as the filename, alt and title values.

  9. Avoidance of unnecessary ids and classes: we can specify the appearance of this content in CSS by using descendant selectors rather than an id.

  10. accesskey conventions used for navigation

  11. class used only where necessary (to highlight the current, active page, not repeatedly applied to sibling elements.

If you believe I've missed anything, or see room for improvement, please let me know!

Checklist

A Site Maintenance Checklist

What follows is a typical task list for iterative site management, covering tasks from a daily to annual cycle. It is scaled to a small-to-moderately sized website (a blog, a personal ecommerce site) run by a small team (one to three people) that does not carry advertising.

Every day

  • Add new content

  • Promote site via social media

  • Check for and respond to new comments and mail

  • Fix any mission-critical issues

  • Attend to any bugs that can be solved in less than an hour

  • Note new signups

  • Check visitor levels and activity on site

Every week

  • Check referrers, activity levels, devices used to access the site; make a note of overall trends

  • Ensure that latest entries on front page are appropriately tagged and entered into site navigation (side bar, feature bar)

  • Promote one article to an outside source (another person’s Twitter feed, ai inbound link from an external site) to bring in new visitors.

Every quarter

  • Add a new feature to the site and/or remove a redundant or unused feature

  • Optimize the appearance and functionality of the site for a single device (Android, Blackberry) or platform (IE7) that constitutes less than 5% of your visits.

  • Evaluate attainment of goals for quarter; set or revise goals (number of visitors, average pageviews, average time on site, etc) for next 30, 90 and 180 days

Every year

  • Re-evaluate design and functionality of the site; do a site refresh or redesign as appropriate.

  • Renew domain and pay for hosting services

Forest path over two seasons

Seasonal Affective Disorder For Blogs

Every spring this site goes through something of a personality change; this season, especially so.

As the weather warms I tend to put web development somewhat on the back burner, using my vacation time for travelling and recuperation. This year that trend will be enhanced by the fact that the entirety of what I teach in my regular classes is now present in the form of articles here, and I have several Super Secret Projects to complete over the summer (details of which will be shared as I am able).

This does not mean the end of articles, by any means; only that the topics occupying my attention over the next several months will be far more varied, and updates more sporadic. Inevitably that will involve some web development: you can expect a daily report from the An Event Apart conference I will be attending in Boston in June, for example. I am also very aware that there are topics that require additional coverage (most especially /, , and ), so you can expect more advanced tutorials in those areas. (I would also welcome your suggestions for future articles!)

On the whole, entries here will be far more diverse, and, I hope, even more interesting. If you’ve read this far, I hope you will continue to do so over the next four months.

web developer guide

featured comment

by JoelB in Goodbye, JQuery Validation: HTML5 Form Errors With CSS3

what i'm reading

A Storm of Swords: A Song of Ice and Fire: Book Three
A Storm of Swords: A Song of Ice and Fire: Book Three

what i'm watching

Californication: The Third Season
Californication: The Third Season

what i'm playing

Mass Effect 3 Collector's Edition
Mass Effect 3 Collector's Edition

what i'm hearing

Dub FX
Dub FX

blogs

podcasts

no ads ever

This blog is free of advertising, and always will be.

creative commons licensed

The content of this blog is free to use in whatever way you wish under the Creative Commons license.