Review: Badass: Making Users Awesome


Badass: Making Users Awesome by Kathy Sierra is from O’Reilly (2015). This book is about motivation and skills and progress and brain science. It shows you how to use motivation and skill levels and learning progress by being badass, by modeling badass, and by giving you the badass version of learning how to be badass.

If you know who Kathy Sierra is and what she’s already done as a writer and programmer, you’ll recognize what she’s talking about in this book. It’s been her topic before and she’s come back to it with a powerful teaching device – this book. Kathy’s premise is you don’t just want a great product, you want great users. You want users who find it easy to learn to be experts with your product. Even when your product is complicated and hard to learn to use at an expert level, if you approach helping users the right way, they will reach the badass level as users.

The book if full of lively graphics, funny illustrations, and simple but powerful charts.

A chart showing how an upgrade to software can move users from competent back to feeling like they suck

This chart shows exactly how I feel about every new upgrade of Dreamweaver CC. Each time I open it, I go back into the suck zone on something. Getting the labels on form fields – oh, no, I suck. Creating a new selector in the style sheet – oh, no, I suck. Using the fucking fluid layout grid – oh, no, I suck. Kathy explains how to help users avoid that oh, no, I suck sensation with upgrades and with new skills mastery in general. The people at Adobe are definitely not using all of Kathy’s suggestions to help users move to badass with updates to their products.

A chart showing the good practice is in the zone between what your good at and what you are bad at

Even something as basic as practicing a skill to get better at it has brain science examples to help you design experiences for users that let them practice the right way. There are also chapters on how to help users filter out brain spam so they can concentrate on things that matter. Here’s the table of contents:

The table of contents for Badass: Making Users Awesome

Just looking at the table of contents tells you a lot about how this book works, and how Kathy Sierra uses her deep understanding of brain science and user experience to craft an experience for you that will leave you feeling badass.

If you want to learn how to create and market a product that your users will love using and will recommend to others, read this book. After you’ve read it, go back and look at how it was written. What were you asked to do as you read? How were you helped to understand the points made? How were you helped and supported as a reader to become an expert in making users awesome? What patterns and perceptions sneaked into your brain without you knowing how it happened?

Kathy Sierra has always been about creating awesome users, and this book can help you be about that, too.

Welcome back to the conversation, Kathy. You were missed.

A review by Virginia DeBolt of Badass: Making Users Awesome (rating: 5 stars)

Summary: Kathy Sierra shows you how to make your users keep coming back by helping them be badass at using your product.

Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Links to Amazon are affiliate links. Here is my review policy. .

Resources for Material Design

Material Design is a set of design principles created by Google for developers creating apps for Android. They call it a design language. The concepts don’t apply only to Android, of course. Some of the resources I’ll mention below can be helpful to anyone.

You may be familiar with the way things designed this way look and work, because Google has deployed it on most of its sites since last June.

color blocks for picking a color scheme
The opening page of materialpalette.com

Material Palette is a bold color picking tool. Simply pick two colors and you are offered a color palette.

a group of colors with color codes
The color palette for blue and deep orange

Material Palette is quick, simple, and useful to any app developer.

To back up a bit, a definition and description of what Material Design is all about can be found at developer.android.com. It deals with more than color choices. The design concepts also involve animations, shadows, and drawables.

Google also provides a set of basics about Material Design. The Google site discusses the goals and principles of Material Design and goes on to explain style, animation and many more aspects of development using the concepts.

MaterialUp.com offers inspiration in the form of daily examples of how the concepts have been used in websites and apps. This site and Material Palette are interconnected.

A Must See Movie: The Imitation Game

Keira Knightly and Benedict Cumberbatch in The Imitation Game.
Keira Knightly and Benedict Cumberbatch in The Imitation Game.

I don’t normally review movies here, but I’m making an exception of this film about the early beginnings of the computer because I think it’s a must see for anyone working with a computer.

The Imitation Game stars Benedict Cumberbatch as English mathematician and logician, Alan Turing. Turing helped crack the Enigma machine, a Nazi encryption device, by developing a code breaking machine which has come to be known as the computer.

Benedict Cumberbatch as Alan Turing next to his "Turing machine."
Benedict Cumberbatch as Alan Turing next to his “Turing machine.”

Cumberbatch gives a brilliant performance. He’s absolutely flawless as this graceless, socially inept, mathematical genius who was a marathon runner and a closeted homosexual.

The team of mathematical genius watching the first time they decrypt a message from the Enigma machine
The team of mathematical geniuses at Bletchley Park watching the first time they decrypt a message from the Enigma machine.

Others starring in The Imitation Game are Keira Knightley, Matthew Goode, Allen Leech, and Matthew Beard as the team at Bletchly Park, site of the UK’s code and encryption school, who worked together to crack the Enigma machine.

Charles Dance plays the commander and Rory Kinnear plays the detective whose decision to prosecute Turing for homosexuality probably led to his death.

Alex Lawther plays the school boy Turing: a wonderful performance from one so young. By peering into Turing’s past, it helps the audience see how so many things that happened were the way they were.

The movie starts in 1951 and jumps between that time, the war years, and Turing’s school days.

For anyone interested in computers (and who isn’t) this movie is a must see. Additionally, it’s an excellent rendering of an important historical period, complete with film from the time. The film looks at what it means to be different, to not fit in, and to be forced to hide what you are for fear of imprisonment.

Images ©Black Bear Pictures

For Completeness

For completeness, you may want to watch some of the other movies about Alan Turing. Sir Derek Jacobi played him in the 1997 Breaking the Code. There’s a documentary called Codebreaker. If you haven’t already seen these two films, they should be watched as well. I intend to watch them!

If you want to go old school and get more factual information than a movie offers, there are some books about Alan Turing: Alan Turing: The Enigma: The Book That Inspired the Film “The Imitation Game” and Alan Turing: Unlocking the Enigma.

The Relevance of Dreamweaver

Stefan Mischook from Studioweb.com posted an article a day or two ago called Is Dreamweaver still Relevant in Web Design? His conclusion was no, it is not.

Granted there are many more ways to make an effective and functional website than there used to be. I often steer people away from Dreamweaver toward some other tool when I don’t think they need to know everything you must know to use Dreamweaver properly.

However, that does not mean that the software is past its useful prime. What that article failed to take into consideration is all the site-wide tools and integrated tools that come with Dreamweaver. Dreamweaver does more than just write HTML and CSS. There are tools save a great deal of time for a developer who knows how to use them. There are tools that track links, update links, manage snippets, write JavaScripts, insert jQuery, write PHP. Dreamweaver works with Photoshop and other Adobe tools in ways that save both time and effort. In many ways, Dreamweaver forces developers to use accessible techniques – something other software doesn’t necessarily do.

I’ve certainly aired some complaints about Dreamweaver since Creative Cloud came along. But that doesn’t mean I think it’s irrelevant.

Anyone who doesn’t know enough to built a good website is going to build a bad website whether they are using Dreamweaver or some other tool. If I use Microsoft Word to write a terrible book, is that the fault of Word? Developers have to know what they are doing. When they do, their choice of software is just a choice. That software will do what they tell it to do.

 

Intro to the Web Developer Toolbar

I always tell students to use the Web Developer Toolbar developed by Chris Pederick. It’s free, it works in Firefox, Opera, or Chrome and it’s very helpful.

This short video explains a bit about it. Although it’s talking about Joomla specifically and is an ad for Lynda.com, it’s still a good video. You hear Jen Kramer doing the description. It’s almost the same speech that I give students when I introduce them to this tool, so I thought it was worth sharing with you.

Review: HTML & CSS: Design and Build Websites


HTML and CSS: Design and Build Websites
by Jon Duckett is from Wiley & Sons (2011). This book is a little old (4 years) but I was so impressed with the JavaScript book by the same author and in the same format that I requested a copy from the publisher for review.

Everything I said about pedagogy and color coding in the review of the JavaScript book applies to this book as well. In fact, this book is where the author first honed the techniques used in presenting information so simply and clearly.

An infographic page from the book
A diagram and infographic page from the book

Simple illustrations with color coding and annotations for every point are used to teach the coding rules.

A reference page shows the HTML (or CSS) and the results of using it.
A reference page shows the HTML (or CSS) and the results of using it.

The reference pages are also color coded, with HTML shown in blue and CSS in pink as well as results examples.

As with the JavaScript book, all the code is downloadable. And, as with the JavaScript book, the language used to explain each concept is exceptionally clear and simple. Here’s a quote from the page introducing CSS.

CSS Associates Style Rules with HTML Elements

CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed. A CSS rule contains two parts: a selector and a declaration.

The book went completely through all the HTML it included (page structure, text, lists, links, images, tables, forms, audio and video and a few other bits of HTML) before getting to any CSS. Normally that would bother me, but it worked in this book. The CSS part of the book included color, text, boxes, lists, tables, forms, layout, images and some info on layout using HTML5.

Where the book is a little out of date is the information about HTML5. It’s no fault of the author, it’s just that the book came out in 2011. A few things are included (like hgroup or codec issues with video elements) that have gone away, and a few things that are more recent (like the main element) didn’t get mentioned. I reduced the star rating on the book because of that, but if I’d seen the book and reviewed it 4 years ago, I would have given it 5 stars. I simply want anyone who buys and uses it now to be aware that small parts of the book in the HTML 5 descriptions are different now. The book is still a perfectly good way to learn HTML and CSS – in fact, the book is an excellent way to learn HTML and CSS.

A review by Virginia DeBolt of HTML & CSS: Design and Build Websites (rating: 4 stars). The rating is based not on the quality of the book but on the fact that some of it is a little out of date.

Summary: Detailed, careful, guide to HTML, CSS and more.

Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Here is my review policy. Links to Amazon are affiliate links. You can buy the book from Wiley, as well as Amazon. The link to Wiley is not an affiliate link.

Review: JavaScript & jQuery: Interactive Front-End Web Development

JavaScript & jQuery: Interactive Front-End Web Development by Jon Duckett is from Wiley & Sons (2014). This book earns high praise from me as educationally sound. It reminds me a little of the Head First series of books, except this book isn’t silly. But it does use a number of interesting techniques to help you learn that are based in sound pedagogy.

Color Coding

There’s color coding for everything, which helps some people learn. Diagrams and infographics are on a dark background. Within the page itself, various elements are also color coded.

An example diagram page

Background pages and examples are on a light background.

An example page
An example page

Again, there is color coding within the page itself.

Reference pages are on a gray background with HTML, CSS, and JavaScript codes all shown in different colors. There are also separate color schemes for introductory pages and summary pages in each chapter.

Clear Language

The language is plain, very careful, easy to understand by anyone. Every single detail is explained in clear, simple sentences. It’s a masterpiece of clear writing. For example, here’s the initial description of jQuery:

jQuery is a JavaScript file that you include in your web pages. It lets you find elements using CSS-style selectors and then do something with the elements using jQuery methods.

Scope

Beyond the pedagogy that went into presenting the material in the book in a way that makes it easy to grasp, there is also the scope of the book. It covers more concepts than I’ve seen in a book of this type. It covers all the JavaScript basics, the Document Object Model, jQuery, Ajax & JSON, APIs, error handling and debugging, filtering, form enhancement and more. The book is over 600 pages long.

The examples are real world with downloadable code. The code shown in the book is  annotated (and color coded) with every detail fully explained. The output for every code example is pictured next to it.

Programming books often make my eyes cross and close automatically, but this one kept my interest. I learned many new things about topics that I hadn’t really understood before. I’d recommend it for independent learning. The exercises and examples in the book would also work as a classroom text for a JavaScript class.

Summary: Detailed, careful, guide to JavaScript, jQuery and more.

A review by Virginia DeBolt of JavaScript & jQuery: Interactive Front-End Web Development (rating: 5 stars)

Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Links to Amazon are affiliate links. Here is my review policy. You can buy the book from Wiley, as well as Amazon. The link to Wiley is not an affiliate link.

Images © http://javascriptbook.com/