Syntax Blindness

Keyboard

An interesting post from Khan Academy about Newbie Syntax Blindness got me thinking about teaching syntax.

First let me point out that Khan Academy is dealing with a different situation than face-to-face teaching. Their problem is about finding ways to alert students who are working online with useful messages about what their syntax errors might be.

In a classroom, face to face with students, I do it very differently. I introduce either HTML or CSS syntax in minute detail. I discuss every bracket, space, comma, semi colon, forward slash, and quotation mark they will be using. I show lots of examples. Then when they begin the actual typing, I walk around and help them spot their errors.

I also teach them that when a page falls apart, look in the HTML for a syntax error right before where the problem appears. It will most likely be a missing quotation mark or bracket someone just ahead of where the problem shows us. I find that students invariably pull their hair out over the part of the page they think is broken, but never think about simple syntax errors or typos that may have occurred just prior to that. That usually where the problem is.

Another problem students have with syntax when they first begin hand coding is taking what they see on a whiteboard or a projection screen or a demonstration monitor and translating into finger strokes on their own computer. The details are minute and exacting. The more time they can spend developing some muscle memory around these strange new keys they are using on their keyboards, the better they will do. People who have been keyboarding for years can be thrown into beginner’s mode hunting for curly braces and brackets and slashes and equals signs.

If you are teaching, either face to face or in online classes, how do you teach syntax?

Useful links: School of Webcraft, Affordable Blogging Tools, Creativity

Have you looked at Mozilla’s School of Webcraft? If you have worked your way through these courses, I’d really like to hear about your experience.

5 Affordable Image Creation Tools that I use In My Blogging is from ProBlogger.

There are some interesting ideas on creativity from Minh Tran in Comic Con and Creativity.

Useful links: HTML5 Document Outline, Ugly Code?, RWD

Did you see the post where Steve Faulkner called the HTML5 Document Outline a dangerous fiction? Go read it, especially if you’ve been teaching it.

Ugly Code for Hidden Pictures or playing with canvas, as I like to call it, has some interesting ideas for coding with canvas.

10 Things You Need to Know About Responsive Web Design is an Adobe Dev article. It’s an excellent overview of the topic.

Useful Links: Content Ideas, Beauty Pageant, Date Input

I saw this tweeted by Kristina Halvorson, so I took a look. It’s a tool to help you generate ideas for new content for your blog, called Content Strategy Generator. It works through Google Drive.

To Increase Women’s Participation, They Added a Beauty Pageant. Good grief!

Date input in HTML5: Restricting dates, and a thought for working around limitations is from Tiffany B. Brown.

Useful links: Fast Forms, Slanted Tabs, Zombie Scroll

5 Killer Ways to Use Fast Forms has some interesting suggestions in form design.

Slanted Tabs with CSS 3D Transforms is a very nice tutorial from Lea Verou.

Creating game-style parallax scrolling: Zombie Edition at Dev.Opera has the world’s best blog post title and enough HTML, CSS, and JavaScript to fill your geeky heart.

Useful links: dialog element, going green, surveillance

A Preview of the New Dialog Element comes from Treehouse. A new HTML element – that’s exciting news to me!

Did you try out the Ecograder tool that James Christie told us about yesterday? Web Teacher came out pretty high on the green scale, but there are a high number of http requests. One of the things I’m going to do to cut back on them is stop linking to photos on Fllickr as decorations in the useful links posts. Just words, folks. Hope you can live with it. After a discussion with Denise in Fads and Fashions, I had resolved to use more images, but have reconsidered that plan. The other fast way I see to reduce http requests is to get rid of the Flickr widget in the footer. I’ve had a Flickr widget on this blog for years because I personally enjoy it. I am 100% sure none of you readers care about it at all.

eyes on the street or creepy surveillance? danah boyd brings up serious questions that responsible adults need to be thinking about.

Useful links: Color functions, table element, weak ties

color picker

A visual guide to SASS and Compass color functions. Very interesting and useful page for people using SASS and Compass.

A Complete Guide to the Table Element is an excellent resource. It’s from Chris Coyier at CSS Tricks.

I found this article in Wired about weak ties in networks like Twitter very interesting. Your Casual Acquaintances on Twitter Are Better Than Your Close Friends on Facebook.