Discover Top Posts Tagged with #site-revisions

Reading and Revising: Week Two

Following my revision/rereading notes from the first week's readings, here are my notes for the second week (chapters 9-12, although in truth I also assign 12 the first week; this just keeps its revision notes in sequence).

Chapter 9

Overall this chapter holds up pretty well; even in HTML5, I still advocate writing in XHTML-Strict style by following the six rules on pages 94-96.

I've come to favor the Mozilla Developer Network, MDN, Documentation for HTML5, CSS, and JavaScript over SitePoint or HTML Dog (p. 94)

Introduce the stripped-down HTML5 Doctype: <!DOCTYPE html> (p. 94)

On 96, I should be more explicit that classes and IDs, like file and directory/folder names, are case-sensitive. It's implied, but it could be better.

The Metadata stuff on 97 needs to be rewritten for HTML5 and RWD: the meta-charset and meta-viewport tags especially.

The sample structure on 99 could move on to use <header>, <footer> and other new sectioning elements in HTML5. The IDs can still stay in place, and open a discussion of modular CSS that relies on IDs without the element when possible (e.g., #footer instead of div#footer or footer#footer).

Page 100 is missing the vocabulary term fragment identifierfor URLs that point to specific IDs in the HTML.

HTML5 now specifies that <cite> works as described on page 100.

Page 101 should mention HTML5's <aside> element under "Naming Classes and IDs."

Chapter 10

There are some significant changes (minor, but significant) that Chapter 10 requires.

I think it is better practice to use elementless ID and class selectors whenever possible (e.g., #header or .callout) for general use, reserving the use of the element with the selector only for styles that deviate from the general case (pp. 106-107).

Need to add additional CSS2 and CSS3 selectors that have broader browser support, particularly CSS2 and CSS3 [http://www.w3.org/TR/css3-selectors/#attribute-selectors](attribute selectors) (pp. 107-113).

Need to double-check status of styling sibling relationships where the first element is the target, not the second (p. 109).

Reference the rgba() color declaration (p. 114).

Deal more with relative units em and rem in all text/font style declarations (e.g., p. 114).

Address percentage over pixel units in the Boxes sections (pp. 115-118).

Address newfound utility of float: in certain RWD layouts (as part of a broader treatment of RWD).

Completely rewrite the "Design Images and Textures" section to address both CSS3 and pixel-doubled/@2X retina/high-density graphics (p. 118-119).

Chapter 11

The entire Rapid Prototyping Kit is in need of an HTML5-based refresh. Although there is a simple HTML5 version on the companion site, for reasons I can't explain it does not appear in the RPK GitHub repo.

Instead of the clunky, temperamental XAMPP Web server, I'm going to advocate for installing Node.js and running a package like http-server, which fires up a little web server in any directory where you run the http-server command from the command line (p. 124).

Typography is a design issue that needs a lot more attention, including typographic or modular scales, the use of @font-face in CSS as well as hosted solutions like TypeKit or Google Fonts (p. 130).

Chapter 12

There are also in this chapter some significant changes that would appear to be minor:

In addition to the graphical File view in Windows, OS X, etc., I want to add the view of files as seen from the command line and the ls command (pp. 134-135).

When I go to add more material about Git, there will need to be a sidebar or something that addresses how Git on Windows handles line breaks (pp. 138-139).

Big change: In the book, I advocate for using Tabs for indentation. I'm now of the mind that two spaces are superior (in the intervening years, the two-space convention from Ruby made its mark on me). Need instructions for setting up editors to convert a strike of the Tab key into two spaces (p. 140).

For JavaScript comments, I will probably go the way I've trying to go in my own commenting, which is to use //-style inline comments, even for blocks, as jQuery implements in their style guide (p. 143).

#book-revisions #site-revisions #rpk

Rereading and Revising my Own Book

I’m rereading and revising my book, the unfortunately-titled How to Design and Write Web Pages Today. This first post reflects the first reading assignment I give my students: the preface and chapters 1–5 and 12. I’m going to go through this chapter-by-chapter; it will also eventually appear in more usable form in a rebooted version of the book’s companion website. I’m also planning some online-only chapters to update and extend the book’s content.

But first, here are the things that I noted in my recent rereading (most of them yes-buts, a few of them actual corrections):

Preface

The big things missing from this chapter are the Big Things that were getting big just before the book was published in March 2011: social media and mobile experiences.

In addition to the Web-friendly text editor, a search engine, and a good Web browser mentioned on p. xvi, I would now also add Node.js and Git as essential tools. They’re just not luxuries anymore (then again, I don’t know that I would mention them in the preface).

Chapter 1

TweetDeck is pretty much now defunct. And Twitter’s official mobile apps basically rule the desktop and mobile experience (the big exception being Tweetbot, but there are others; p. 6).

The Usernames and Passwords advice still holds up. It needs to have two-factor authentication and well-respected password managers (aka 1Password) added to it (sidebar, p. 6).

Twitter’s RSS feeds are no longer; RIP. Their own widgets are available, as is the API, but the latter is probably too involved for this book anyway (p. 7).

The Controlling Your Name sidebar is a lessson in how things have changed in the last 5 or so years: Myspace is irrelevant; nobody has heard of Diigo (which was a last-minute swap for Delicious, which appeared as the book was about to go to press to be about to disappear; it didn’t). Missing from the list: Google+, LinkedIn, Instagram, Tumblr, Vine. Possibly even Pintrest. What else? (p. 8–9).

Also in need of dicussion, either in the Controlling Your Name sidebar or elsewhere: the glut of new TLDs in addition to the incumbant .com, .net, and .org. What advice to give people pondering purchasing, for example, a .shoes TLD? (p. 8)

Chapter 2

Mobile/tablet and high-density (aka retina) displays are the big missing pieces in this chapter. The iPhone 4 was a high-density outlier released in 2010, and the 4th-gen iPad would be the first tablet with a high-density display (I believe) at its release in autumn 2012.

All of the links need to be checked in the Web-Reading Toolkit sidebard. Lynx for Windows is definitely gone, and I’m not sure about the Microsoft Expression SuperPreview. It also needs to be revised to emphasize Desktop. There are tons more devices and emulators for the mobile space, obvs (p. 14).

I need to clarify that the WebKit engine used in Safari and elsewhere is itself open source (p. 15).

The whole pie-in-the-sky “good news” paragraphs need to be rewritten and rethought because of mobile devices and access. The picture is much more complicated than the book lets on (p. 15–16).

Lose the AOL Explorer ref on page 16. Hello, 21st century.

Stop advocating for word processors in the sidebar on page 17. Lots of note-taking apps, such as Evernote, would be a better substitute. Esp. with tools like the Evernote webclipper (need other possible services/tools, too).

Reading for Content section (pp. 18–19) needs to mention high-density displays on images and video; also any content-clipping experienced on phone-sized screen.

Reading for Design section should encourage looking at the same site on multiple devices to look for sites that use RWD, a separate mobile site, etc.; especially so on the layout/design bullet-point (pp. 19–20).

Performance and Breaking sections need to be rethought, perhaps made more sophisticated (pp. 20–24).

The screenshots on pages 22–24 are uninspiring and lame. Rather than showing CSS-less displays, it’s now better to show off a responsive site, perhaps using a layout similar to MediaQueri.es.

Chapter 3

I’ve gotten a number of reader requests to talk about wireframing in this chapter. I’ve always disliked wireframing, because I think it’s busywork. With RWD, wireframing is even more irrelevant. But–even if that all is true, I should at least address it.

Open Source Software sidebar could point to some additional, newer projects worth checking out. I was reading about Gravit, an up-and-coming open-source project meant to take the place of the now-defunct Fireworks software that [http://www.creativebloq.com/creativity/free-fireworks-replacement-youve-been-looking–81412661](Creative Bloq recently reviewed).

On page 27 and elsewhere, I want to stop talking about word processors and advocate plain-text wherever possible, including shorthands like Markdown. That’s how I’m teaching my students this semester: plain-text from early on, including Markdown (although we don’t use any Markdown converters, opting instead to write the HTML by hand and use that as an opportunity for revision for both content and strucure).

The Essential Equipment sidebar should acknowledge the importance and utility of smartphone cameras. No shortage of statistics going back to 2011 showing how iPhone is taking over as the most popular camera on Flickr, for example (p 20).

High-density displays and responsive design complicate the design advice of “coordinate [images] with your layout” on page 29. (The image-treatment examples on the book companion site need updating, too; p. 30).

Audio and video preparation advice needs to account for an HTML5-based, post-Flash Web (although Flash fallbacks are still useful for devices in use that actually still support flash, but not the newer HTML5 features; p. 30–31).

Need to research the veracity of the YouTube embed code and all of that; that’s exactly the kind of material that shouldn’t have been in the book in the first place.

Chapter 4

The running text in this chapter is in good shape. The sidebars are another matter:

The What You Won’t Learn sidebar on 34 could use a note about Flash and its abandonment on mobile devices as spearheaded by Apple with the original iPhone.

The Validate This! sidebar should mention validator extensions in, e.g., the Pederick Web Developer Toolbar (although the Validate Local HTML behavior was broken in Chrome, last time I checked; p. 38).

The whole HTML5 sidebar should disappear and be rewritten within the rest of the book. Need to make good on the HTML5 resources promised on the companion siten (p. 40).

Chapter 5

I need to do testing to see how Portable Apps hold up on newer versions of Windows. Also worthwhile to suggest apps that can be installed without administrator permissions and/or that are browser-based (p. 44).

The FTP/SFTP stuff on 45 should be augmented with a broader discussion of Git and version control, and guidance in later chapters on using Git with something like Capistrano for deployment. Moving files around by hand is cumbersome, risky, and annoying.

Google’s Chrome browser deserves mention on 48.

The domain-registration advice on page 51 needs to address new TLDs that are available, like .guru and .shoes; should also cover hipster TLDs like .co and .io, and domain hacks with country-code domains like .is, .it, .ws, etc.

All of the web-hosting advice on pages 51–53 needs a refresh, especially for getting away from MySQL and PHP and moving towards Ruby- or JavaScript/Node.js-based stacks, NoSQL databases, etc. Should also mention things like GitHub pages for hosting basic pages without any server-side scripting.

#book-revisions #site-revisions