Posts in the Projects Category

Can CSS create art?  That’s a question I set out to explore recently, and I like to think that the answer is yes.  You can judge for yourself: Spinning the Web, a gallery on Flickr.

To be clear, when I say “Can CSS create art?” I don’t mean that in the sense of wondering if art, or artful designs, can be accomplished with CSS.  I think we all know the answer there, and have known at least since the Zen Garden got rolling.  What I’m doing here is using some basic CSS to generate art, using web sites as the medium.  For the series I linked, I spun all of the elements on a page using transform: rotate() to see what resulted.  Any time I saw something I liked, I took a screenshot.  After I was done, I winnowed the shots down to the best ones.

As some of you old-schoolers will probably have recognized, I’m absolutely following in the footsteps of Joshua Davis here, and in fact my working title for this effort was “Once Upon a Browser”.  I saw Josh speak years ago, and clearly remember his description of how he generated a lot of his art.  My process is almost identical, albeit with a bit less automation and computational complexity.

Because this is me, I built a little commentary joke into the first images in the series.  It’s not terribly subtle, but with luck one or two of you will get the same chuckle I did.

I’m already thinking about variants on this theme, so there may be more series to come.  In the meantime, as I surf around I’ll stop every now and again to spin what I see.  I’ll definitely mention any new additions via Twitter, and new series both there and here.  And of course if you follow me on Flickr, you’ll see new pieces as they go up.

I hope you enjoy them half as much as I enjoyed creating them.  And if anyone wants to use the originals as desktop wallpapers, as Tim proposed, feel free!

• Spinning the Web was published on Friday, June 3rd, 2011.
• It was assigned to the CSS, Projects, and Web categories.
• There have been fourteen replies.

Over the weekend, Aaron Gustafson and I created a tool for anyone who wants to resolve a series of CSS transforms into a matrix() value representing the same end state.  Behold: The Matrix Resolutions.  (You knew that was coming, right?)  It should work fine in various browsers, though due to the gratuitous use of keyframe animations on the html element’s multiple background images it looks best in WebKit browsers.

The way it works is you input a series of transform functions, such as translateX(22px) rotate(33deg) scale(1.13).  The end-state and its matrix() equivalent should update whenever you hit the space bar or the return key, or else explicitly elect to take the red pill.  If you want to wipe out what you’ve input and go back to a state of blissful ignorance, take the blue pill.

There is one thing to note: the matrix() value you get from the tool is equivalent to the end-state placement of all the transforms you input.  That value most likely does not create an equivalent animation, particularly if you do any rotation.  For example, animating translateX(75px) rotate(1590deg) translateY(-75px) will not appear the same as animating matrix(-0.866025, 0.5, -0.5, -0.866025, 112.5, 64.9519).  The two values will get the element to the same destination, but via very different paths.  If you’re just transforming, not animating, then that’s irrelevant.  If you are, then you may want to stick to the transforms.

This tool grew out of the first Retreats 4 Geeks (which was AWESOME) just outside of Gatlinburg, TN.  After some side conversations betwen me and Aaron during the CSS training program, we hacked this together in a few hours on Saturday night.  Hey, who knows how to party?  Aaron of course wrote the JavaScript.  Early on we came up with the punny name, and of course once we did that the visual design was pretty well chosen for us.  A free TTF webfont (for the page title), a few background images, and a whole bunch of RGBa colors later we had arrived.  Creating the visual appearance was a lot of fun, I have to say.  CSS geeks, please feel free to view source and enjoy.  No need to say “whoa” — it’s actually not that complicated.

So anyway, there you go.  If you want to see the matrix(), remember: we can only show you the door. You’re the one that has to walk through it.

• Seeing the matrix() was published on Tuesday, April 12th, 2011.
• It was assigned to the CSS, Projects, and Tools categories.
• There have been thirteen replies.

Earlier today, I updated the CSS Tools: Reset CSS page to list the final version of Reset v2.0, as well as updated the reset.css file in that directory to be v2.0.  (I wonder how many hotlinkers that will surprise.)  In other words, it’s been shipped.  Any subsequent changes will trigger version number changes.

There is one small change I made between 2.0b2 and 2.0 final, which is the replacement of the “THIS IS BETA” warning text with an explicit lack of license.  The reset CSS has been in the public domain ever since I first published it, and the Reset CSS page explicitly said it was, but the file itself never said one way or the other.  Now it does.

Thanks to everyone who contributed their thoughts and perspectives on the new reset.  Here’s to progress!

• Reset v2.0 was published on Wednesday, January 26th, 2011.
• It was assigned to the CSS, Projects, and Tools categories.
• There have been twenty-five replies.

It’s well past time for me to spend a few minutes reflecting on An Event Apart in 2010.  In two words: absocrazifreakiperfluously staggerblasticating.  [I totally stole those.  — Ed.]  From the first show to the last, 2010 was an incredible year for An Event Apart, easily our best yet on every front.  Jeffrey and I stand in humbled awe of the amazing speakers and wonderful attendees who joined us this year.  I’ve said before that AEA attendees are “as much colleagues as anything else” and that continues to be so.  While I love our speakers, I love the attendees even more.  What I look forward to most at every show is time spent talking with my fellow craftspeople in the hallway, at lunch, and at the social events.

It seems like a lot of people feel the same way, because every single one of our 2010 shows sold out in advance.  We’re understandably proud of this, and also very, very grateful for your faith and trust in what we do, and hope to continue earning both into the future.  (In honor of your support, AEA recently made a donation to Computers For Youth in support of the next generation.)

So in 2011, we’re building on what we learned in 2010.  We’re going from five to six shows, including a long-delayed return to Atlanta (site of our sophmore effort), and each sporting an optional A Day Apart featuring in-depth coverage of topics like mobile web design, HTML5/CSS3, and content strategy.  If you’re interested, check out our Events page for the show nearest, or of most interest, to you.

Again, our deepest thanks to all our attendees and supporters.  We couldn’t do what we do without you, and we’re looking forward to the challenge of clearing the bar you’ve set for us!

• A Year Apart was published on Friday, December 10th, 2010.
• It was assigned to the An Event Apart and Projects categories.
• There have been two replies.

It’s that time again: the 2010 edition of The Survey For People Who Make Websites is open and taking your input.  If you’re someone who creates web sites,  whether all the time or some of the time or even just occasionally, please take just a little bit of your day (as I write this, the average time-to-completion is just over 10 minutes) to let us know about you.  Furthermore, please spread the word to any groups to which you belong—local SIGs, mailing lists, newsgroups, forums, message boards, and so on.  I truly believe it’s important to the profession as a whole to have as many web folks as possible participate.

I was asked a little while back why we do the survey, and my answer surprised me not just for its content but also for how much passion I felt.  I said:

I think it’s a vital investigation, a look into our profession that nobody else is even attempting and is… essential if we’re going to be taken at all seriously by anyone other than ourselves.

And even more vital than that, it tells us who we are, collectively speaking. We’re scattered. Many of us are solo. We don’t even know what kind of community we’ve joined. The Survey, though limited and imperfect, tells us something profound and essential about us.

That’s why I’ve wholeheartedly supported this effort from its very outset, putting in hours upon hours of thought and effort into its operation and approving the use of [funds] to pay for professional analysis. This matters.

Other professions have it easy: they require certification or degrees or membership in a professional organization before you can take part.  Because of that, they can often estimate to a reasonable degree, or even count directly, how many of them there are.  They can go to their membership rolls and survey a few thousand randomly picked members to find out their age, location, experience, salary, and anything else that seems interesting to know.

We who build the web don’t have that luxury.  Our profession, just like the medium it serves, has no gatekeepers, no central organization, no clear boundaries.  The Survey is our attempt to disambiguate ourselves.

So please, if you’re someone who makes web sites, take ten minutes to tell us about yourself.  If you know people who make web sites, please point them to the survey and ask them the same.  Thank you.

• The Survey, 2010 was published on Wednesday, October 20th, 2010.
• It was assigned to the Projects and Web categories.
• There has been one reply.

A friend and I have decided to build a web service/site/whatever the kids are calling them these days.  A thing on the web to help you out from time to time.

As a result, we’re looking for a web host with great service, reliability, and scalability, and I was curious about your experiences.  Here are a few details on what we need:

• A managed server where patches are applied automatically.  Neither of us are Linux experts, and we want something secured for us without us having to worry about whether some patch breaks the system. 
• mySQL with phpMyAdmin.  (Don’t judge.)
• PHP w/cURL, mySQLi, and mCrypt, as well as an editable php.ini file.
• Apache!
• Some sort of CVS (Subversion and the like) built in.
• Bonus: some experience on the hosting side with the ability to escalate to Memcached and other noSQL techniques.

The mySQL and PHP bits are of course incredibly common, but still, no point not mentioning those requirements.  In our case, the bigger issue is really “Who can we trust to provide support for what may turn out to be a reasonably large-scale service?”  So the features aren’t nearly as important as the reliability and trust.

Thus: what say you, friends?  Who rates as a great place to plant a web service seed that could one day grow into a mighty forest?  Let me know!

• Seeking Hosting Advice was published on Thursday, April 29th, 2010.
• It was assigned to the Projects and Web categories.
• There have been fifty-nine replies.

The winners of Microsoft’s MIX 10K Smart Coding Challenge (for which I was honored to serve as one of the judges) have been announced, and the Grand Prize has been awarded to…

Jimmy D‘s Frog Log.

Which is an HTML5/CSS/JS entry.

That doesn’t run in Internet Explorer.

Yep.

Frog Log was my top pick, and obviously did very well with the other judges too, for a good reason: it’s a fun game.  It doesn’t play quite the same in Firefox previous to v3.5, as the drag-n-drop doesn’t work.  Instead, you click on a frog, then click where you want to place it.  I actually found that made the game a touch easier for me, but your interaction may vary.  In addition to working in Firefox, Safari, and Opera, it also runs on a number of mobile devices.

Here’s an excerpt from my judging remarks:

Just a great little game, addictive and well thought out with some interesting gameplay.  I would LOVE to see this developed further by the author…  My only ding was that drag-n-drop failed in Firefox 3.5; clicking worked fine, though.

I’m not sure why I had trouble with drag-n-drop in Firefox 3.5, since I don’t have have the same problem now.  Maybe I got confused with browser version numbers or something.  Regardless, it works fine, it’s a great game, and remember: it’s less than 10K unzipped.

I also gave high marks to the HTML5 runner-up, Chris Evans’ 100pxls, which was the source of my Dadaist tweet a couple of weeks back and lands right in my personal sweet spot for “doing odd things with popular web services”.  Here’s some of what I had to say in my remarks:

…really liked the concept here, especially the nonsensical tweets that were generated by drawing your own icon.  The icons could be made easier to see in the main display, but I suppose that’s a minor quibble.

I’d like to thank the MIX 10K crew for getting me involved as a contest judge; I really enjoyed seeing what people created and had a hard time narrowing down my votes to just a handful of winners.  More importantly, though, I offer my heartiest congratulations to all the winners, and most especially to Jimmy and Chris for doing such fun, interesting, and downright cool stuff with 10K of web standards goodness!

• MIXmasters was published on Wednesday, February 24th, 2010.
• It was assigned to the Projects and Standards categories.
• There has been one reply.

I’m a bad conference organizer.

Why?  Because we opened the An Event Apart 2010 schedule for sales back in, um, flippin’ November, and I never mentioned it here.  Cripes, I never even posted when we announced the lineup of cities.  I could go through the great big long sob-story list of reasons why 2009 was really tough and blah blah blah, but when you get right down to it, I fell down on my job.

Okay.  So.  Time to correct that.

(deep breath)

Hey everyone, check it out: the complete tour schedule for An Event Apart 2010!  Woohoooo!

1. Seattle: April 5-7, 2010 (yes, three days; more on that anon)
2. Boston: May 24-25, 2010
3. Minneapolis: July 26-27, 2010
4. Washington, DC: September 16-17, 2010
5. San Diego: November 1-2, 2010

We’ve got a pretty killer lineup, if I do say so myself.  You can get the mostly-complete list from our opening-of-sales announcement last November.  It lists the people we had confirmed at the time; there have been a few additions since then.  Check out your city of choice to see who’s going to be there!  (But always remember that speaker lineups are subject to change: speakers are people too, and life has a way of interfering with schedules.  I myself had to withdraw from An Event Apart Boston last year due to a family emergency.)

The price to register for these two-day, one-track Events is the same as it was in 2009, and there are educational and group discounts available for those who are interested.

But wait, I just said “two-day” when the first show of the year is clearly three days.  What gives?

Seattle is the site of our first-ever A Day Apart, a full-day workshop that can be attended on its own or as part of a full three days of Event Apart ecstasy.  And the inaugural Day Apart will be nothing less than a detailed plunge into HTML 5 and CSS3 with Jeremy Keith and Dan Cederholm.  Jeremy handles the markup; Dan gets stylish.  It’s going to be fantastic.  I’m going to be in the back of the room for the whole day, soaking up as much as I can.

If you want to attend just the workshop, it’s $399 for the whole day if you buy an early bird ticket (available through March 5th).  The price goes up $50 when early bird ends, and another $100 if you show up at the door.  But I wouldn’t recommend that last, because I don’t think there will be any tickets available at the door.  Again: if you show up unannounced on the day of the workshop and ask to buy a ticket, we will most likely have to turn you away, because I expect that there won’t be any seats available.

On the other hand, maybe you’d like to experience more than just one day of AEA goodness.  Maybe you’d like to go whole hog and attend both the two-day Event Apart and the subsequent Day Apart, soaking up all the knowledge and enthusiasm and camaraderie that typifies An Event Apart.  And who could blame you?  If you do that, then the total early bird price for all three days is $1,190, whereas buying the event and workshop passes separately would total $1,294.  That’s right: you actually get slightly more than $100 off the cost of the workshop if you attend all three days, over and above the early bird discount.  (Or you can think of it as getting $100+ off the cost of the conference.  We’re not fussy.)

As it happens, these three-day passes have proved quite popular.  So if you want to get your hands on one of those — or on any Seattle tickets, whether one, two, or three days — I wouldn’t wait too long.  Our internal analyses suggest that there will come a time, some time before the doors open on April 5th, that the ability to buy a ticket will cease to be.  It may even pine for a fjord or two.

As for the four shows that come after Seattle, well, they’re looking pretty popular too.

I know I say this every year, but I’m really excited about what we’ve got planned for the year.  Jeffrey and I constantly and (we hope) consistently strive to create an event that we ourselves want to attend, and that’s absolutely true of the shows and workshop we have planned in 2010.  I can’t wait to hear what the speakers and attendees have to share.  Hope to see you there!

• Events and A Day, Belatedly was published on Monday, February 8th, 2010.
• It was assigned to the An Event Apart and Projects categories.
• There have been six replies.