What started out as a single meetup of a dozen (or two?) web builders, has turned into a network of events in sixteen different cities, uniting hundreds of web people for beverages and high-fives.

We personally owe an enormous debt of gratitude to this meetup; the relationships we’ve developer here over the years have led to both work and fun.

one super SquareFive^TM to Build Guild on turning 3, and many many more!

(also, we’re donating a raffle prize that should be well received)

"No parking" by Flickr user Mark Morgan (used with permission)

Apple is usually touted for their User Interface design, and rightfully so. Their focus on simplicity and empowering user intuition is unparalleled in their industry and beyond.

This is also why, when they make a gaffe, it gets a lot of attention. One thing that I think has slipped beneath the radar for too long is their Mail application.

Again, these flaws wouldn’t seem so egregious if they didn’t originate in Cupertino – one has to wonder if the internal decision makers (or Steve Jobs himself) even use Mail on the desktop anymore (or do they only see filtered messages gated by secretaries delivered via their iOS device?)

Don’t Trash your Mail

This stares me in the face every day. What does a circle with a slash mean?

In Europe, this means No Parking. In general, a Circle & Slash means something is prohibited – a behavior, an item, a pet, etc. But in Mail, this represents ‘Delete.’

Why not a Trashcan? presumably, to prevent confusion with the Trashcan icon that appears to represent the Trash in the mailboxes list. Apple’s Patent dispute over the GUI even upheld that the Trashcan icon was a uniquely created element and prohibited other Operating Systems from having “Trash.”

I’m not certain what the best representation of this would be; but I would hope that Apple would know.

being a parent, we get to have lots of brightly colored plastic items strewn about the house. we carefully inspect them for sharp corners, loose pieces, and any other hazards for the kids.

but we also get to examine the quality of design and construction. these toys, in particular, exemplify a lot of thought and caring for the user experience.

we received as a gift, this Tonka Chuck and Friends Mini 3-pack Truck. anthropomorphic faces aside (i’m learning this is a reality in almost all kids toys) i’m quite impressed by the design and material selection.

• body plastics – a slightly soft compound, with some give but not enough to crack the paint (although that’s taking quite a beating while the toddler … gives the toy a beating).
• wheel pastics – a harder compound, makes a a pleasant sound when rolling. this was completely unexpected.
• weight – while small, the toy has some heft. it appears to have an embedded weight on the bottom to help keep it upright.

while some of the toys we see seem to have had no consideration for what would happen to them once they leave the shelf, these have been carefully designed to be pleasing to play with.

• added the ability to choose Metric or English unit preference
• fixed the display of rainfall data (if it’s raining)
• updated readme and plugin info page to reflect PHP5 requirement

see the Widget Page or get it from the WordPress Plugin Directory. if you have any questions or concerns, drop me a line.

also taking place the night previous is Refresh Rochester, at the excellent ARTISANworks facility.

it will be a great weekend for people who work with web technologies in the greater Rochester area. if you’re nearby and would like to join us, please RSVP for Refresh and Register for BarCamp so they can keep track of attendance.

see you there!

in addition to the talk, i’ve signed up to volunteer at the Genius Bar – a special table set up where volunteers with advanced WordPress experience can answer questions from attendees and help them solve problems/achieve goals with their use of WordPress.

if you’re attending WordCamp Boston, stop by and say hello. i’ll be posting my presentation, and links to great Short Code resources here after the event.

it was a bit of a passion project – something that fascinates me (besides web design and development) is weather. i’ve been a weather geek and a member of the Weather Underground website for quite some time.

Weather Underground combines conditions and forecasts from the National Weather Service, with data being collected by enthusiasts using Personal Weather Stations.

that includes data from my own PWS – you can see that here at my weather station conditions page.

while there are already lots of weather plugins for WordPress, gathering data from the NWS, Weather.com, Accuweather.com, etc. i wanted to design one that was specifically for PWS owners to display their own data.

read more about installing and configuring it on the plugin page, or see it in action at my personal blog, mikeyboy.com.

in this entry, i’ll talk about how we can manipulate colors as numbers.

step 1: draw the squares

i’ve stolen my square-filled <div> from the previous demo, but this time the squares start out black.

.demo-square {
   float:left;
   width:28px;
   height:28px;
   background:#000;
   margin:1px;
}

the javascript that creates them:

var cols = 10;
var rows = 6;
for(x=0; x<(cols * rows); x++) {
  $("<div>")
  .clone(false)
  .appendTo("#demo")
  .addClass("demo-square")
}

<div id="demo"></div>

pretty boring.

step 2: alter the colors

notice we make a loop to create the squares. loops are great for incrementally doing math ($something++).

also, colors can be expressed not only in the hexadecimal #AABBCC, but also numerically from 0-225, e.g. rgb(000,120,255)

so if we wanted the squares to fade slowly from black to white, we need to take the number of squares, divide 255 by that number, and add that amount to each of the r,g,b values on every loop. (here i’m manipulating all r,g,b values equally – if you want to play with color, you can change them separately)

that loop looks like this:

var increment = 255 / ((cols * rows)-2);
var current = 0;
for(x=0; x<(cols * rows); x++) {
   rounded = Math.round(current);
   $("<div>")
   .clone(false)
   .appendTo("#demo")
   .addClass("demo-square")
   .css("background","rgb("+rounded+","+rounded+","+rounded+")");
   current += increment;
}

notes:

• rounding – CSS doesn’t like decimals in rgb() values)
• for the increment value, i subtract two from cols * rows, because we want the first one fully black, and the last one fully white.

step 3: random, and other uses

i know, i don’t have a big sweeping gradient in the back. i have random shades. the theory is the same, to loop through every square and alter it’s rgb() value, but instead of incrementing it, we pick a (rounded) random value every time.

var rand = 0;
for(x=0; x<(cols * rows); x++) {
  rand = Math.round(Math.random()*255);
  $("<div>")
  .clone(false)
  .appendTo("#demo")
  .addClass("demo-square")
  .css("background","rgb("+rand+","+rand+","+rand+")");
}

my last demo showed how random things could happen with mousemove(). do you want the squares to react to user input as they mouse over them individually? we’ll tie the change to the hover() event on each square.

for(x=0; x<(cols * rows); x++) {
   $("<div>")
   .clone(false)
   .appendTo("#demo")
   .addClass("demo-square")
   .css("background","#000000")
   .hover(function() {
      rand = Math.round(Math.random()*255);
   $(this).css("background","rgb("+rand+","+rand+","+rand+")")
  })
}

(mouse over the div below to see it in action)

you could do something interesting with opacity and images (for browsers that support it):

add an image to the background of the container with CSS:

#demo {
  background:url('/images/demo.jpg') top left no-repeat;
}

and adjust the opacity of each square to a random value (divided by two here to make it reveal more of the image)

for(x=0; x<(cols * rows); x++) {
  $("<div>")
  .clone(false)
  .appendTo("#demo")
  .addClass("demo-square")
  .css("background","#000000")
  .css("opacity",Math.random()/2)
}

is there any practical usage for this? i think so. creating an appealing or joyful experience is practical because it makes the user happy. a happy user will read/learn/buy/share.

i hope you’ll consider using clever technology to make fun and functional designs for your users. if you do, please contact me and let me know how this inspired your own creations!

the answer: it’s not a graphic. it’s all HTML, CSS, and Javascript.

as a designer / developer, i try to find ways of using the capabilities of the browser to provide advanced design and functionality, instead of pushing a large payload like a Flash movie down to the browser for every effect i want to create.

my inspiration came from John Resig’s port of the Processing library to processing.js. there are some really beautiful visuals in those examples, all of which are generated in the browser. while i didn’t use processing.js to create my design, i did leverage the JQuery library to do a lot of the heavy lifting for me.

for this demonstration, i won’t get into the math involved to do the random colors – that would probably fill another article by itself. instead, let’s focus on the rendering and animation.

step 1: pick a container

for this example, let’s take this <div> element:

<div id="demo"></div>

pretty boring.

step 2: fill it up

now let’s fill the <div> with smaller <div>s – a grid of them 10×6

this CSS will style the small squares that we will create:

.demo-square {
	float:left;
	width:28px;
	height:28px;
	background:#dfd;
	margin:1px;
}

here’s the javascript that creates them:

var cols = 10;
var rows = 6;
for(x=0; x<(cols * rows); x++) {
	$("<div>")
	.clone(false)
	.appendTo("#demo")
	.addClass("demo-square")
}

that gives us this:

(i styled them with a bit of margin between so you could see the separate squares)

step 3: make it go

while there are other ways to animate the squares, most of them use a lot of CPU time, and would run even when the user wasn’t watching. i got the idea to tie the animation to the mousemove() event that JQuery provides. this would insure that it wouldn’t be eating CPU cycles while the user had another tab or window focused. also, i hope it adds a bit of fun!

the CSS for the alternate square style:

.demo-square-dark {
	background:#6a6;
}

the javascript that toggles the alternate class on a random square as the mouse moves:

var demosquares = $('#demo .demo-square');
$("#demo").mousemove(function(e) {
  pick = Math.round(demosquares.length * Math.random());
  $(demosquares[pick]).toggleClass("demo-square-dark");
});

mouse over this div to see how the mousemove() event triggers that toggle

and that’s basically how the animated background of my site works. in another post, i’ll get into the details of the math that makes the different shades. until then – check out a toy i made with the background squares – you can even select the two colors that it differences between!

if you look at a block comment:

/* */

you realize you can stack two of these up on each other:

/* */ i'm not commented!  /* */

and by quickly inserting a space in the closing side of the first comment, you can make the comment tag expand to encompass the whole line or block.

/* * / <-- that space makes me commented now!  /* */

the finished example:

/* no space */ #example{} /* enabled */
/* with space * / #example{} /* disabled */

you can use this to toggle a debug class, e.g.

/*  */  .todo { font-weight:bold; color:red; } /* */