ZUIHITSU - Collected Miscellaneous Writings of Colin May

Learning HTML, CSS and Javascript

satsuki — Wed, 14 Sep 2011 06:13:09 +0000

At work today I was asked if I could throw together a list of resources for back-end developers and possibly others who would like to start learning front-end web technologies. This, more or less cut and pasted, is what I whipped up.
——————————————————————————–

First off, back-end programmers should note that “HTML5″ is often, but not always, used as a catch-all term for HTML5+CSS3+Javascript, i.e. the full Web 2.0 front-end suite. It can be confusing.

Getting started

Google Code University has a good, brief, clear overview of HTML, CSS and Javascript.

CSStutorial.net looks to me like a good site.

w3schools.com – Maybe start at this page, with an intro to XHTML (note that XHTML is really only needed to support legacy sites…like GHC…). But caution! W3Schools is the most easily ‘found’ tutorial resource on the Web, meaning that it shows up at the top of the search rankings. Their material is very easy to follow — I have used it a lot — but some of the information there needs updating or correction and in fact there is another website built by some top-class dev gurus that totally rips on it: w3fools.com. Still, I think W3Schools can be helpful to beginners getting started, as long as they don’t entrench the knowledge they pick up there.

Dive Into HTML5 is possibly the best place to start on HTML5 after getting familiar with basic (X)HTML, CSS and Javascript/DOM scripting.

Html5rocks.com has good stuff.

Sitepoint.com is a popular source for Web 2.0 materials. They publish articles and sell books, web video courses, etc.

For Javascript, I suggest book learning rather than just online study. Online study will get you oriented to basic scripting, but established back-end developers will soon start asking pointed questions about the whys and hows and details, at which point I think books are probably the way to go.

I vote for the O’Reilly books. “The Rhino Book” is big and fat and has everything in it (and I like it); Javascript: The Good Parts is small but intense, and great for serious developers who want to “interrogate” Javascript (Why is made the way it is? What’s the point of that?). Neither of these books is a step-by-step tutorial. I own both, and am willing to bring them in for sharing, but you can’t keep ‘em!

jQuery has exploded in part because it has had the best documentation out of all the frameworks (MooTools, Dojo and YUI are names of other frameworks similar to jQuery, but they have pretty much lost out). Start with the jQuery beginners’ tutorial. Picking through the online documentation will explain most else in readily comprehensible terms.

Some useful stuff

HTML5 Boilerplate – my favorite way to start a new website
CSS3Please
Modernizr

Gurus (read their articles and trust what they say)

Paul Irish (all-around badass)
John Resig (jQuery founder)
Eric Meyer (CSS kingpin)

——————————————————————————–

Egypt, Technology and Human Rights

satsuki — Fri, 11 Feb 2011 22:58:58 +0000

The political upheaval in Egypt has me thinking again about the role of technology in peaceful revolution. Could it be true that peaceful revolutions have only become possible in the age of mass communication?

Gandhi’s approach, as put to me recently by my friend Andrew Crowder, was to work directly on the consciences of the oppressors themselves, to lead them to recognize the loathesomeness of their own acts. This, of course, is nigh impossible to achieve if protesters themselves act violently or contemptibly.

Iraqi voter (please supply copyright information if you have it—perhaps The Washington Post?)

But I wonder, is mass communcation technology perhaps a necessity for a change of conscience to be achieved on a statewide scale? I suspect it is. I suspect that without swift, widespread publicizing of documentary evidence of oppression or abuse, members of the abusive class or regime can easily fool others and themselves that their actions are, if not righteous on their face, at least justified. This is why China’s regime has not fallen to peaceful revolution: broadcast media are so tightly controlled that the regime’s supporters can let themselves believe each other that their actions are acceptable.

(What are the chances this blog will ever be read in China, eh?)

Print, while perhaps a broadcast medium of some stripe, doesn’t count for as much since it is not real-time evidence—it’s just another form of hearsay, really, one party’s word against another as to what has transpired. By Gandhi’s era, radio and newsfilm had come along, and large, widespread audiences could hear and see the news much more directly. In the time of Dr King, television was the medium of truth.

Now we have the internet. We have satellites. We have smartphones. Mubarak tried turning off the internet, but at best only bought a little time. Obviously that tactic of control will get harder as time goes by, both as connectivity worldwide gets wider and denser, and as activists get more practiced at getting around obstacles (thanks for the training, Hosni!). Good luck, China—may you find your way peacefully through Change.

Implementing HTML5-Boilerplate

satsuki — Mon, 07 Feb 2011 20:28:49 +0000

Over the weekend I took the time to update the Baker Street Irregulars website to a full-blown implementation of HTML5 using HTML5 Boilerplate. The homepage update feels pretty much done, so I expect so put it in place this week. It’s already in public beta* at www.bakerstreetirregulars.net/5. If you have L33t webitation skillz, please visit and share your observations here via Comments.

*I must admit that when I say ‘public beta,’ I’m just posing: I haven’t yet studied the industry’s protocols for software release, so I’m probably abusing the terminology. Feel free to set me straight in the Comments.)

Next I need to update the mobile browsers’ page.

For those who haven’t heard of it, HTML5 Boilerplate is a set of templates and supporting files for creating web pages using the newest generation of HTML, called HTML5. (I presume anyone reading this article knows what HTML is.) Since it includes some new features that aren’t naturally recognized by old browsers, a number of tricks must be employed to get those old browsers to display the HTML5 pages acceptly. The Boilerplate package provides those tricks.

To the Boilerplate I have added styles from CSS3, Please!, a kickass tool I discovered just last week. At the moment that’s only being applied to instruct newer browsers to natively (via CSS) render the rounded corners of the black panel containing the site’s main content, but you can expect to see me use it to add some rotation, shadows other nifty styles in the near future.

Now, Internet Explorer up to version 8 will not render round corners via CSS, but the page looks ugly without them. So I caved in and used conditional comments to implement the non-nested-div, single-dot-bgimage solution that is being used for all browsers on the current, pre-Boilerplate homepage. Right now I can’t find the link to the tutorial that taught me that solution, so I’ll have to blog about it later again later. I have some other ideas and comments to share on the subject anyway.

The boy vs the girl (part 1)

satsuki — Mon, 24 Jan 2011 21:50:04 +0000

My views as a stay-at-home dad (SAHD) have been solicited upon many occasions. I hope that this will be the first of a number of entries on the subject of parenting.

My children are different. Duh, you say, that’s a truism; be specific for us: different how, and how does that play out in the parenting line?

My boy, D—my sensitive, caring, cuteness-loving, stereotype-challenging boy—does in fact match stereotype in the manner in which he needs to have his dad-and-son time. He needs about half an hour a day (more like an hour on weekends) of my undivided attention, and we need to do something together: read, play a hardware- or software-based game, build something together (rarely), do art, play ball, wrestle—whatever it is, there must be an activity, and we both must be involved, just the two of us. He’s easy-going, so others may join in, but then the time doesn’t really count towards quota. Ideally our one-on-one time should come in one or two big blocks.

When we do get this time, it seems that the rest of our time goes better: D remains generally happy and comfortable with or without me in his picture. All else being equal, he’s happy to encounter me, to come to me when he needs something, and to cooperate when I direct him. Overall his mood and his attitude are good. Conversely, when we don’t get our dad-and-son time, especially for multiple days, in general his mood gets more brittle and his attitude less congenial.

This is in contrast with J, my rather stereotype-reflective girl. She needs plenty of attention too (you better believe she does!), but the nature and distribution of that time is different. She likes company and interaction, but often she is happy to be the one doing the activity while I watch, lob compliments and make suggestions. Our dad-and-daughter moments may be shorter and spread across the day. Just sitting on the sofa next to each other does count toward that time. On the other hand, anyone (usually that means D) who comes along to muscle in on our private moment—even if it’s happening somewhere public—had better be careful.

There are a couple of other contrasts I note between the two—their broad cognitive profiles and the difference in the way they react to expectations—but I think I had better leave those subjects for later writing.

O reader, what do you think? Can you point to research which supporting or dismissing these stereotypical images of boy versus girl? Are your kids comparable or contrastive? If you personally know my kids, do you have any observations about them relative to this article? Speak up!

H.P. Lovecraft & Susanna Clarke

satsuki — Wed, 12 Jan 2011 06:21:23 +0000

Recently, in reading The Call of Cthulhu, I thought I recognized the probable gene of style, tone and even concept displayed in Susanna Clarke’s Jonathan Strange & Mr Norrell. The appearance of the spellings ‘shew’ and ‘connexion’ first got me thinking; then the shared central theme of madness and its relation to the supernatural struck me. I was all ready to feel clever when my sensible side stepped in and made me look into it. Sadly her interview nowhere mentions Lovecraft, and seems to suggest that Clarke’s use of language was more a reflection of prior, English writers, particularly Jane Austen. Oh, well, maybe some supporting evidence will show up later, allowing me to shout smugly, ‘See, I knew it!’

Actually I haven’t read Jonathan Strange for a long while. It’s probably about time to get it another whirl.