For a couple of months I’ve been carefully preparing to dive into JavaScript and the purpose of this post is to outline the steps I’m going to take, which books I’m going to read and which sites I’m going to use to start learning Javascript.
With the REST API being scaffolded into WordPress in 4.4 and with live examples such as Calypso demonstrating how we can build applications on top of WordPress in new ways with JavaScript libraries such as React, we really have no other choice but to embrace what JavaScript can bring to the table.
Web Development
SMACSS – Scalable and Modular Architecture for CSS
Many of you may already be aware of it, but in case not, I thought I’d point out that Jonathan Snook has released a site/ebook called Scalable and Modular Architecture for CSS or SMACSS (pronounced “smacks”). If you’ve read any of his previous stuff or had a chance to meet him at past events like South by Southwest Interactive, you know he’s a smart cookie, and nice to boot.
SMACSS is an interesting look into Jonathan’s process and structure, and as he puts it “a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It’s an attempt to document a consistent approach to site development when using CSS.”
I’ve personally spent a lot of time thinking about how I organize my CSS, so I love the opportunity to see the path that Jonathan has followed. We follow different practices in some cases (organization of attributes for example), but at a minimum, reading through his choices has caused me to think about the patterns I have set for myself.
Beyond the content, I love the fact that he’s sharing it publicly on the Web, in ebook format and via a third “Full Membership” option, so the information is freely available but he’s still able to profit from his efforts. I’ve signed up for that last option, in part to support him, but also because I’m excited to see what he’ll release to those members.
Image from the SMACSS site
All That’s Programmed is Not Code
We’re all programmers now. We all have to decide what to post next, what to point to next, what to launch next. Is there a skill in dreaming up Must-See Thursday nights, or in establishing a season of Shakespeare or even in deciding what’s on the special list at the restaurant? I think there is.
This is one of the most important lessons I’ve learned over these last few years working at a high-tech media company. Crafting, combining and scheduling content is just as important as, and not that different from, writing code and designing interfaces.
If your work hits the screen, you’re programming at some level.
Being Geek, a Review
Michael Lopp, one of my favorite bloggers, has a couple of books out. The first, Managing Humans (Kindle), is a compendium of his blog posts about geeks and software engineering stories. It’s a great read. The second, Being Geek (Kindle), is fresh and insightful material focusing on the career of software engineers, and given the close similarity, I’d say web developers as well. If you’re an engineer, developer or coder, you should buy and enjoy this book.
I’ve read 42% of the book (I love the Kindle for surfacing that info) and I’m taking my time to allow my brain to apply the lessons to my world. I’ve been a geek my entire life, and I’ve managed geeks for over a decade, but I still have a lot to learn. Being Geek has made me better at my job already and I fully expect I will start it over as soon as I’ve finished it to catch details or angles I missed the first time through.
Not a Geek, but You Work or Live with One?
Read his post The Nerd Handbook. I think that’ll show the value of his perspective and provide enough encouragement to pick up a copy of the book. A deeper understanding of your colleagues worldview and motivation is never a bad thing right? Right.
From Chapter 15, “A Deep Breath”:
I admit it. I love it when the sky is falling. There is no more delicious a state of being than the imminent threat of disaster.
During these times, I’ve done great work. I’ve taken teams from “We’re fucked” to “We made it.” Yeah, we had to cancel Christmas that one time, and there was that other time I didn’t leave the building for three days straight, but it was worth it because there’s no more exhilarating place to hang than the edge of chaos. We’re wired to escape danger.
There’s a reputation you get after successfully performing the diving saves. You’re “the Fixer.” You’re the one they call when hope is lost, and while that’s a great merit badge to have, it’s a cover story. It’s spin. See, someone upstream from you fucked up badly. When the sky falls, it means someone, somewhere underestimated the project, didn’t make a decision, or let a small miss turn into a colossal disaster, and while fixing a disaster feels great, you’re not actually fixing anything.
Management by crisis is exhilarating, but it values velocity over completeness; it sacrifices creativity for the illusion of progress.
Michael Lopp, Being Geek
It isn’t easy to choose from the passages I’ve highlighted in the book, but I believe that should provide a glimpse at the content focus and writing style that you’ll find if you pick up a copy of Being Geek. I hope you do. You and your team will be better for it.
Switching to Chrome: Essential Extensions
The Web browser is the most important tool to my profession, yet I continued to use a memory-intensive and often times, slow browser day in and day out. Firefox is great for many reasons, but it’s no longer good enough.
Enter Chrome
In the last two years Google Chrome has matured quickly and the community has ported all of the functionality I need. So for the last couple of weeks I’ve put Chrome through its paces, using it as my default browser at work and home. I’m very happy with the results.
For those of you contemplating the move, here are the extensions I’ve installed, and some quick notes on the browser.
Extensions
One quick note – given how young the platform is and the size of the community compared to that of Firefox, there are a lot of rough edges. I expect these will be taken care of with time.
1Password
1Password support is a requirement for me given the amount of sites I use on a daily basis. The great people at Agile Web Solutions have us covered though. The extension is new and not as full featured as that available for Firefox and Safari, but it covers about 90% of what I need.
AdBlock
While I don’t run AdBlock on every site (I like to support content creators), there are some sites where the ads are so distracting it makes it hard to read their content, which is where AdBlock (as well as the excellent Readability bookmarklet) shine. The Chrome version functions just like its Firefox sibling.
After the Deadline
Automattic’s spelling and grammar checker is amazing and should be baked into every browser. Perhaps then the writing quality of the Web as a whole would improve.
Awesome Screenshot: Capture & Annotate
A great utility for grabbing the entire page or a selected portion. A must-have for anyone who reports bugs or keeps bits of great design for future inspiration. I do both.
Chromicious (Delicious Bookmarks)
I prefer this extension over the official (beta) Delicious version for one important reason – the save dialog is a separate window, allowing me to copy and paste snippets of the page into the description. The official version uses a drop-down drawer, which is wiped as soon as you click anywhere else.
Neither extension includes the handy bookmarks sidebar that’s available in Firefox.
Clip to Evernote
I use Evernote as a repository for interesting designs and products on the Web in addition to a general note tacking app. The plugin makes it simple for me to quickly import the current page and it also provides quick access to my other notes.
While it uses the same drop-down drawer as the one I dislike for the official Delicious extension, it doesn’t wipe the content when you click elsewhere.
Eye Dropper
A useful color picker. This functionality is already baked into the Web Developer Extension (below), but I like the quick access that the separate extension provides.
Firebug Lite for Google Chrome
I go back and forth on Firebug List as so much of its functionality is already available in Chrome’s Developer Tools. Luckily it doesn’t noticeably increase memory usage, so I’ll keep it around until I make a decision.
RSS Subscription Extension (by Google)
This should be baked into the browser. The entire purpose of the extension is to add the small RSS notified to the address bar, simplifying the process of subscribing to a feed.
Web Developer
Another great tool ported from Firefox to Chrome. The extension includes many utilities that make the life of a Web Developer much easier – everything from a color picker, guides and a ruler to the ability to enable and disable CSS and JavaScript on a page
Syncing
I love the fact that I’m able to keep extensions in sync across computers. If you aren’t aware of this feature, open the app’s Preferences, select Personal Stuff and follow the directions to enable syncing. It saves a lot of time and effort.
Rough Edges
- Some sites seem to forget that I’m logged in when I use Chrome, though they will remember me for weeks while using Firefox. There aren’t many, but the fact that our bug tracking system (Jira) at work forgets me is very frustrating when I’m attempting to file a ticket.
- I find it odd that Chrome didn’t adopt the long-standing View Source keyboard shortcut (CMD/CTRL-U). I remapped it in my OS given my muscle-memory automatically hits those keys when I’m debugging a page.
- Another keyboard annoyance is that the F5 key isn’t mapped to reload a page. Again, my fingers are used to hitting CMD-R and F5 to reload a page. While it’s not a requirement to have two different ways to force a reload, it can be very convenient.
- I hit an odd issue with fonts on my home machine recently, the cause of which I still don’t understand. While I resolved it, I’ve noticed other font rendering issues since, even after cleaning up my font installs on this machine.
Random Bits that Make Me Happy
Here’s a quick brain dump of little touches that I love about Chrome:
- Chrome makes it easy to resize textareas, making long-form input easier in apps and forms.
- The unified address/search bar works beautifully. The Firefox implementation is pretty good, but Chrome is noticeably better in terms of ease of use and recognizing my intent to search over my intent to navigate straight to a URL.
- Chrome is fast. Very very fast.
- Extensions are written with JavaScript, making them very easy to create and modify. This also widens the scope of extension-developers.
Do You Use Chrome?
If so, what cool things am I missing? If not, what’s holding you back?
Change the Thesis Doctype and Add Meta Tags
I love using Thesis because it lets me focus on content, while providing all of the design and development hooks I need to tweak the theme as I see fit. I’ve dug in a good bit, and while I’m far from an expert, I’m confident that anything and everything I want to do is available to me.
One thing I discovered early is that the default doctype is XHTML Strict, which is great in many respects, but can add some complexity given enough design changes and external data sources.
In 1.6 I was able to add some custom code to change the doctype to XHTML Transitional, simplifying some issues I was having with IE 8. Those same reasons necessitated that I include a new meta tag as well. Thesis 1.7 changed the implementation methods, so I’m documenting the new, right way to modify the doctype and add items to the page head in the hope that others might find it useful.
Credit: I learned about of this from girlie, who was kind enough to point me in the right direction on the Thesis forums.
Modify the Thesis Doctype
Simply add this to custom_functions.php in your Thesis directory:
/* !Custom Doctype */
function custom_doctype() {
return '< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
}
add_filter('thesis_doctype','custom_doctype'); Adding Meta Tags or Conditional Comments
This hadn’t occurred to me as I’m used to placing these directly in the code, but once girlie pointed me in the right direction I found it is a simpler solution.
- Go to the WordPress Dashboard
- Click Thesis in the sidebar – this should open the Site Options page. If it doesn’t, click the Site Options link
- Click the plus icon for the Additional Scripts box under Document Head
- Paste your tags, conditional comments and or anything else you’d like included in the
<head> - Click the save button and verify that it worked on your site
Thinking About Thesis?
If you’re thinking about purchasing Thesis, and I highly recommend you do, I’d appreciate it if you follow this link when you want to learn more or are ready to buy the theme.