RESTful Web APIs

I review for the O'Reilly Reader Review Program

RESTful Web APIs is a well written book that continues where RESTful Web Services left off. The authors offer up a very rich example implementation using a maze api, they created, MAZE+XML. The book continues to describe HATEOAS (hypertext as the engine of application state) but dives deeper into writing and publishing your api’s. The authors go to great lengths to push you to use an existing profile / language construct where it will fit, which I applaud. However, the reading can get a little dry and repetitive, at times. I recommend this book, if you are planning on writing services for the web. RESTful Web APIs will help you create web API that can be used by as many clients as possible, as well as, helping you to create a service that doesn’t require all clients to be upgraded any time the server needs to make a change… after all, that’s not how the web is supposed to work.

RESTful Web APIs

A New Content Management System

So, what’s next? Honestly, I would like to start freelancing websites again, but I don’t want to maintain them. I don’t mind making big changes, or changes to complex pages. I really just don’t want to be the one to call to change the text of a paragraph or change the title of a page. Besides the fact that it’s boring, I quite often find myself editing my clients’ copy… which then requires approval before posting. It’s all very tiresome.

So, I need a CMS… However, I have a problem; I haven’t met a CMS that I don’t despise… I’m considering making one myself, but I’m worried it will be a waste of effort. In the end, I think I have to make one, I won’t be happy using anything existing. Besides, if it’s going to be central to your business, you should build it yourself, right?

So, what I’ve got in mind is this… The front-end and back-end have to be completely divorced. Working with our in house CMS at Cobalt has me convinced there is just no sane way to mix them, at least, not at scale.

Front End Engine

The front-end should be one set of templates, which will be rendered, before serving the website users. However, when in edit mode, everything should be responsive and speedy. We’ll need some sort of client-side templating to accomplish this. I was thinking angularjs, but, in order to get that to ship rendered to the users, will currently require actually rendering the page on the server with a gui-less browser (like phantomjs). Don’t get me wrong, I love phantom, but it feels wrong for this.

I’m currently considering an approach of, serving the front-end up as templates, then render it client-side when in edit and preview mode. Then, when you save or publish the changes, the site will be compiled into a static (or more static) web site, ready to be served to any user or robot who happens by.

Further, the front-end will be taking advantage of Web Components. I realize it’s not fully baked, yet, but it likely will be a lot closer when this is finished. Besides, it gives us a lot of modularity and is quite possibly the only SEO friendly way to keep one poorly coded part of the page from making the whole page look broken. Of course, I’ll be using Polymer to get as compatible, as possible. While Polymer doesn’t support IE9, they say it shouldn’t be too hard to get most stuff working. IE8 and below will need a different solution, probably some custom stylesheet to display just the content…

Back End Engine

The back-end becomes service end-points. None of these endpoints will return HTML… Just the data needed to build the page. The HTML should all be contained within the templates. The endpoints will return data-types specific to their domain, where appropriate (Collection+JSON, hCard and such).

  • Site data
    • Base URL
    • Template
    • Site navigation
    • Site header (cells)
    • Site footer (cells)
  • Page group data (department / section with common elements)
    • Template
    • Group title
    • Group navigation
    • Group header (cells)
    • Group footer (cells)
  • Page data
    • Template
    • Page title
    • Page description
    • Page group
    • Page navigation
    • Body (cells)
  • Cell / page-part data
    • Template
    • Title
    • Body
    • External Resources

Most sites will require more endpoints… For instance, a restaurant would also have menus, sports teams have schedules, and retail shops have products. However, this should cover the basic needs for every site. It may be a little much for some sites, but we can just leave empty any part we don’t need.

These endpoints will only be accessed when building or editing the site, otherwise, all of the data will be compiled directly into the static html to be served up.

Navigation

The various navigations would be templated much like cells, but all of the data would come from a hierarchical data structure. The link text should (in most cases) come from the page title (when it doesn’t, it’ll be the title text). The navigations may need to contain media, as well…

Cell / Page Part Structure

The cells will be associated with a template. Depending on the template, some of the other fields won’t be necessary. For instance, a map template wouldn’t really need body text (and maybe not even a title).

Body text should contain no formatting aside from strong or emphasis (or strongly emphasized). External resources and media could be linked from within the body, however, some templates may require media that’s not necessarily linked. These could include buttons, images, videos, etc…

Templates

The templates need to be understood by the front-end and the back-end, therefore, we need something like mustache. I want this to be able to run on a number of different back-ends, and I want the back-end to be able to feed any number of disparate front-ends. Therefore, I don’t want to lock myself into a templating system that only supports JavaScript. There are probably other options out there, but mustache seems to be the most ubiquitous multi-language template.

As noted before, templates will only be served to the front-end while in edit or preview mode, for the most part. There are a couple exceptions to this rule. If you have some aggregated content from other sites, that you don’t care to contribute to your SEO (think facebook widget or rss feeds), those can probably be served up via template and js.

Site Structure

The site structure should be fairly obvious…

    - Site
    |- Page Group
    ||- Page
    |||- Cell

With that said, pages will be laid out in the following manner:

  <!doctype html>
  <html>
  <head>
      <title>{Page Title}</title>
      <meta name=”description” content=”{Page Description}”>
  </head>
  <body>
      {Site Header}
      {Group Header}
      {Page Body}
      {Group Footer}
      {Site Footer}
  </body>
  </html>

Now, obviously, this is very basic. The page body could include a header and footer (and probably should include the title), but that will all be up to the author.

The Fun Part

Now, it’s time to get to work… I’ll update this post with links to the github when I get started. I’m still in the process of investigating languages and frameworks for the first instance of the back-end (leaning toward scala and play, right now), so, no real timeline, yet. However, I intend to be using it before 2014 is gone, at the very least.

Stay tuned!

JavaScript Unit Testing

I’ve been writing a lot of unit tests for JavaScript code lately. While I have had the opportunity to write tests as I’m writing the JS, lately I’ve been writing tests for existing JS. Overall, this is fairly, well-written JavaScript, so it’s not as difficult as it could be, but there has been some challenges.

The Problem – A Large Prominent Widget with Fragile JavaScript

Now, as I said, the JavaScript in question is, for the most part, very clear, concise, well-written, and has relatively few side-effects. What makes this code fragile is it’s size and lack of modularity. Let’s set the stage a little, shall we. At Cobalt, we maintain a custom CMS for auto dealers. These auto dealers can drag and drop widgets (basically, mostly autonomous chunks of HTML, CSS, and JS with a certain purpose) to make their home page (and certain other pages on their sites) look however they want. The widget in question, ends up directly under the masthead in most cases and is a *cough*rotator*cough* widget, with a lot of JavaScript code running things behind the scenes as rotator widgets usually have. Since this widget is so prominent, all of the OEM’s want some additional functionality that doesn’t yet exist (this OEM wants special events to be linked to certain slides, that OEM wants to be able to be more restrictive with changes, this OEM wants dots to indicate which slide your on, that OEM wants thumbnails). Well, this means there are usually 2 or 3 different teams making changes to this widget at the same time (granted, even if it were a single team making all of the changes, it would still break… a lot). Also, keep in mind, the 2 files that get changed the most, where most of the actual bugs happen… are the controller, at 300 lines of JavaScript and the configurator, weighing in at, wait for it… 1500 lines of JavaScript.

Adding JavaScript Unit Tests – Using Jasmine

Well, ultimately, I’d like to get this JavaScript modularized down to digestible chunks. This would help to prevent bugs by only forcing the developer to understand some elementary subset of the complete functionality. Don’t break the interface and you won’t break the existing functionality, and hopefully, we’ll be covered with unit tests, so if you do break something, we know about it before it gets pushed to production. Well, that’s still on the horizon, pretty far down the road. First, we need to get some tests on this sucker to help ensure we don’t break it as we are traveling down that path. Being a fan of behavioral tests, rather than strict unit tests, I started to ask myself, “Self, what does this controller file do?” Of course, I started with the small one… I’m not totally masochistic. Well, one of the first things it does, is gives us an object to interact with (mostly just init, meh, it’s a starting point).

describe("FlexSliderController Suite", function() {
    "use strict";
 
    var slider,
        sliderId = "ControllerTest";
 
    beforeEach(function() {
        // Setup the DOM for the slider here.
        // This is really big and ugly...
        // I know there are better ways, most of them require it
        // to be done differently depending on the test runner.
        // I built it with a bunch of document.createElement and
        // such calls.
    });
 
    it("does return a FlexSlider object", function() {
        var cont = new FlexSlider(sliderId, {
            selector: "section &gt; article",
            pauseOnHover: true,
            pauseOnAction: true,
            animation: "fade",
            slideshow: true,
            isRotatorInIntentMode: false,
            intentSlideDuration: 10
        });
 
        expect(cont).toBeDefined();
        expect(cont).not.toBeNull();
        expect(cont.constructor.name).toBe("FlexSlider");
    });
});

Okay, so we’ve got a jasmine test. I get my testem config file sorted.

{
    "framework": "jasmine",
    "launch_in_dev": ["phantomjs"],
    "src_files": [
        "FlexSliderController.js",
        "**/tests/*.spec.js"
    ]
}

Run… Fail… Hmmm… Ah, okay, of course I’m missing some dependencies. First of all, I need jQuery. The file I’m testing (FlexSliderController.js) is also expecting to find some globals that are available in it’s usual environment. Okay, I’m familiar enough with the environment, I can just mock those globals.

(function(global) {
    "use strict";
 
    global.Cobalt = global.Cobalt || {};
    global.Cobalt.WSM = false;
 
    global.LazyLoader = {};
    global.LazyLoader.register = function (img, callback) {
        callback();
    };
 
    global.ContextManager = {};
    global.ContextManager.isLazyLoad = function () {
        return false;
    };
    global.ContextManager.franchises = [
        'Chevrolet'
    ];
}(window));

Now, add the necessary files to our config…

{
    "framework": "jasmine",
    "launch_in_dev": ["phantomjs"],,
    "src_files": [
        "vendor/jquery-1.7.1.js",
        "mocks/mock.js",
        "FlexSliderController.js",
        "**/tests/*.spec.js"
    ]
}

Run… Pass… YEA!!! m/ (>.<) m/ (funny looks from coworkers…) Well, I added a few more tests and got them all to pass in testem. AWESOME!

Using Other Test Runners – grunt and venus

I’ve found that unless it requires almost zero effort or my fellow developers see a huge benefit (so far, all signs say they don’t in TDD -_-), they won’t make any effort to run your tests. So, in the interest of making these as easy to run, as possible. I decided to set this up with a couple of different ways to run. First, of course, was testem. Next, I went with grunt. I already had grunt configured to lint the CSS and JS, as well as compile some less, so this was trivial. Just install grunt-contrib-jasmine, add the necessary configs and… FAIL Well, 2 of the tests… And what do you know, they’re the 2 tests that depend on mockjax. Hmm, maybe there’s a problem with mockjax (there wasn’t). After much frustration, banging of head on desk, and general irritability, I think, well maybe there’s a plugin for testem… and there is, grunt-testem, only it wasn’t updated to work with the latest version of testem at the time (it is now). File an issue, back to grunt-contrib-jasmine. I decide to figure out what port the test server is running on in grunt so I can try to open the page in a real browser (read – a browser I know how to use, as opposed to phantomjs, which I’m still mostly faking). Hmm, it doesn’t seem to be starting a server… That’s something that may be necessary for these 2 tests. Okay, so… how do I make it start a server. Luckily, I remembered seeing grunt-contrib-connect in the plugin list for grunt. Install, configure, run… AWESOMENESS!!! Okay, now, in the week or so, I’m getting this together… one of my coworkers says to me, “Hey, you know Varun is working on getting js tests into the build?” Yup. “Well, he’s using venus as his runner, you should make sure that your tests will run with venus.” Cool! Well, venus was pretty easy to setup, and the configuration was downright simple. I like a lot of the things they are doing and the direction they are taking it… but.

  • It’s very young and buggy.
  • It runs tests far differently than other test runners (copying the files to a temporary location to run them).
  • I can’t get it to copy non-javascript files to that temporary location with it (needed for my particular mockjax setup).

However, I got it working with all but 2 tests… the 2 that need an xml file to be available in the mock directory. Now, we’re covered, right… wrong.

Process is the Only Thing that Matters

Well, not the only thing that matters… but, I think it’s the only way to get something like this to be used consistently. Until we have a jshint and csslint check on build, people will checkin code that won’t pass (and most won’t go to any extra effort to check these on their development environment until they start failing builds). The same is true with JavaScript unit testing. I got a few people to jump on board and get the tools installed. I think there may even be a couple of other front-end developers doing test-driven development with their JavaScript at Cobalt. However, the vast majority are not… and I’ve come to the conclusion, that unless we start failing builds, they never will (honestly, I can’t even get the java developers that write JS to write JS unit tests, and they write jUnits constantly). The truth is, everybody has work to do and everybody feels that if they spend half a day trying to improve they write code, that’ll be another half a day they are behind in their actual work. Everybody already knows all of the arguments for unit testing and linting your CSS and JavaScript. Everybody knows that people say it will make them able to do their job faster and more consistently… they’ll get to it when they have time. The time is NOW!!! Start by taking 20 minutes a day to learn something new or improve your development environment. Here’s just a few ideas:

  • Learn a better way to do some common tasks in your text editor.
  • Setup csslint and/or jshint to run on save.
  • Try out grunt, bower, node
  • Learn about some new HTML5 stuff, like canvas, local storage, media, etc…
  • Share what you learned (show your cube mate, write a blog, or even do a presentation to your fellow devs).

Once you start seeing the benefit from this (and you will… fast), you’ll find that you have more time to spend learning and trying new things. Your coworkers and supervisors will notice, too. Not that your spending time working on stuff that isn’t your work, but that your getting your work done faster and doing fun, interesting things. Be the change that you want to see at your workplace, in your chosen field of expertise, in your life. Yea, it’s frustrating that nobody is using the stuff I’ve implemented to keep the code clean and functional on the widget, but I’ve learned a lot in the process. I’m not going to let other people discourage me. In fact, I’m going to work toward getting jshint and csslint into the build process, to kind of nudge the other developers at my workplace to start caring about it. I know that when the jasmine tests start running on build, and we get some code coverage tools in place (and we will soon, we have to) people will start writing and worrying about the JavaScript tests. Most of all, though, I’ll be ready… will you?

Responsive Lessons…

Responsive Design - Greenlee County
Responsive Design - Greenlee County

The responsive design for Greenlee County

So, I recently redesigned the web site for Greenlee County (a local government in Arizona). I made this site responsive, this is some of the stuff I learned…

Responsive is Easier than it Sounds

For the most part, I only needed to make a few tweaks to some html and rewrite the base css. Since I had written the site (some years back) using ASP.NET master pages, this was pretty simple. I just tweaked the template. This time around, I took advantage of gruntjs, lesscss, jasmine, and uglify (using grunt to run the others). I needed to modify a couple of pages that used some fixed widths (seriously, what was I thinking when I wrote that), but otherwise, making the site was mostly CSS changes, and a lot of those changes was ripping out stuff that I had added without really knowing what I was doing (did I mention this was written some years ago).

Don’t Lump in Extraneous Changes if not Necessary

Honestly, I spent more time on getting the menu moved to a new database structure, that should allow for faster access, and off of SQL Server into a fresh MySQL install (I only found Maria, after… still need to install and get that running). All in all, this change wasn’t absolutely necessary… I could have modified the current menu to allow for responsiveness, and even the new split menu style the director at Greenlee was asking for.

Ultimately, I would have wanted (and needed) to make the change, if nothing else, just to get Greenlee County off of Navajo County’s SQL Server. Navajo County hosts Greenlee’s server and I didn’t want them to be dependent on any Navajo hardware of software that wasn’t entirely necessary. I also developed a menu editing tool for Greenlee to use with their new menu (almost finished, I should say).

I also wanted to get away from Telerik’s RadControls, not because there’s anything wrong with them, more because my license for them had been from my previous employer and I haven’t been able to update them in a couple of years… they were getting dated, and it showed. Well, moving to a different structure (database and visible), a different design (responsive)… might as well build my own new menu control, I mean, I can make it to be what they need and nothing more, so I did. It’s light fast and mins down to just under 1k, and it’s on Github.

Draw it First

If you don’t know where to start, or you’re not a wizard with graphic design tools, or you have a general idea of what you want to do, but nothing concrete, start by getting it closer to concrete. If you’re great with Photoshop or GIMP, by all means draw it there… I’m not… I used pencil and paper. I drew details I didn’t need to draw, but drawing them allowed me to see things that I might have missed, otherwise. I started out drawing the desktop sized version of the site, then remembered the mantra, “Mobile First”. So I scrapped it and started over with mobile. It helped, after I knew what I wanted the mobile to look like, I was able to better design the desktop site, knowing what the html structure was going to need to be (without using flexbox or something similar).

Check it Often

Open the page in a browser. Keep an eye on how things change as you tweak the CSS. Chances are, you don’t need as much CSS as you think you do (most people use way to many extraneous properties and rules). After you get the mobile size built, start looking at it in desktop mode, and try not to add much. Start by just rearranging what’s already there, most of the time, that’s all you need. Don’t add the flare until you have the content just right, and then, only add flare sparingly, be sure it doesn’t distract from the content. While the flare may make users hang around for a few minutes, content is what keeps them coming back.

I know there were a lot of things I did, that I thought would have a certain effect, but either they did nothing or did something totally unexpected. Viewing the page while I was working, allowed me to back out just the changes that didn’t do anything (or did the wrong thing).

Version Your CSS

I mistakenly forgot to switch the site to using the minned CSS when I made the site live. Unfortunately, this meant that the CSS file the site was using had the same address as the previous CSS file. Most people that visited the site often, saw what looked like a horribly broken site that mostly still the old design. I logged in and got it fixed, as soon as I noticed the problem, but still… how many people saw that mess and didn’t think to clear their cache to get the correct CSS. Probably almost all of them.

Furthermore, as I continued to make tweaks to the site to fix other smaller problems, it was taking a local cache clear for users to see the changes. Needless to say, the CSS file now has a ?v=1 on the end of it, and the master site looks for the last updated time, then increments the counter, when necessary.

More to Do…

There’s still more to be done on the site. In keeping with the agile mentality of getting it out there early, I left some stuff incomplete and released it as soon as it was functional and didn’t look broken. As such, there’s still a lot to do:

  • The contact form needs a more mobile friendly design.
  • The CSS still needs pruning and modularizing.
  • The menu editor needs finished.
  • The login (did I mention I’m adding CMS functionality) needs to be completed.
  • And the director wanted a carousel on the home page (I know, I know…).

All in all, this was a great experience, and I can’t wait for my next project.

Clean, Sustainable CSS

Well, I’ve been planning on writing something on this for a while now, however, while browsing Open Web Platform Daily Digest, I stumbled across csswizardry‘s CSS-Guidelines. This guide is far more inclusive than the article I was planning to write. I plan on integrating most of the suggestions into my current workflow (that I don’t already use).

I would only make a couple of small changes to the guide (in order of importance):

  1. Use the least specificity possible.
    While following the suggestions in this article will lead to less specific CSS and it was mentioned, I don’t feel that enough emphasis was placed on this. High specificity is BAD!!! It’s harder to override, not to mention that it overrides CSS that is written more correctly with less specificity. It’s okay to add specificity to override a specific rule, but only do so for that purpose, and only add enough to override it. Never add specificity for specificity sake.
  2. Shorthand is not evil.
    I know, I know… The guide didn’t call it evil… I agree, if you don’t mean to override all of the rules the shorthand specifies, don’t use it. However, shorthand can shorten your stylesheets fairly significantly. It almost felt like the guide was saying to default to not using shorthand, where I would say, if you’re specifying all of the properties the shorthand modifies, then you should go ahead and use it. In other words, don’t specify margin-top, margin-bottom, margin-left, and margin-right on the same selector as separate statements. Not only does it look horrible and make your stylesheet unnecessarily long, but it adds weight to your stylesheet. Remember, if you have TRouBLe with the order of measurements, well, there you go.
  3. Leave the units off of 0 length measurements… I know, I know, it’s only two bytes, but how many of these do you have in a single page. It adds up.

 

Why You Didn’t Get That Job as a Web Developer… And What You Can Do About It

After doing around 50 to 60 interviews over the phone, on-site,  and using web conferencing software, I’m really disappointed in the state of the Web Developer, UI Engineer, Front-End Specialist market. How many have gotten the nod from me? I think it’s around 5, certainly less than 10 (that’s counting one I gave a nod, but ultimately, didn’t get an offer due, in part, to compartmentalization). One thing one of my co-workers, Brett, thought of, what if it’s our job advertisements that are attracting the wrong sorts of applicants? Seriously, do we need somebody that knows about and has used every web technology out there? Maybe our job descriptions are implicitly telling people to exaggerate their resumes. However, that’s outside the scope of this article.

Now I’m not going to give you resume tips… actually, I take that back… here’s one.

Be Honest!

Even if you are able to skate by HR with a few buzz words and a positive, confident attitude, you’ll have a hard time convincing me that you’re an expert in CSS when you can’t even draw the box model. Go on and keep using the buzz words, if they’re getting you technical interviews. However, don’t say you’re an expert if you’re not. Honestly, the more I learn, the more I realize I don’t know. If you’ve copied and pasted code in some technology, or been exposed to it in some way, you might want to go with a totally non-specific term, like “experience with”.

I’m not even here to give you interview tips… honestly, I don’t have any tricks, I don’t watch for body signals (others probably do, think managers and bosses). I’m here to evaluate your technical chops. Can you do my job, effectively? Would I mind working beside you for 8 hours a day, 5 days a week? Am I going to have to hold your hand for the 1st 6 months to bring you up to a level where you can be effective without jeopardizing other projects? One thing I always think about when doing an interview is, “when this person sends me a code review, am I going to flinch?” If I think there will be more wrong with most of your code reviews than is right… I might as well have done the work myself.

A “willing to learn attitude” is good; an “excited to learn and advance attitude” is better, but I’m not looking for a blank slate. I don’t want to have to slog through the basics with you. I don’t have time to teach you all the different ways to do a clearfix, and how to tell which is appropriate for each situation (hint: it’s never the empty element).

Clean, Well Structured HTML

You need to be able to write clean, clear, well laid out HTML, with good structure. Now, that’s not just making sure all of your tags are closed and being certain only to use id attributes once. Those things are important, but most of the time, it’s pretty easy to spot a mistake as soon as you refresh your browser. What I’m talking about is:

  • Is your document laid out semantically?
  • Are you using classes and tags appropriately?
  • Is the structure going to be easy to style?
  • Is it overly complex?
  • Do you even know where to start?

When I ask for an html fragment, when I make it clear that I don’t care what’s in the head or anywhere else in the html document, don’t start your code with <!doctype… or even <html… It’s a waste of time, and we have precious little of it to begin with. If you’re at a level, where you think it’s necessary to show me that you know how to write out the whole html document, you’re probably not going to do very well. Besides, you’re already demonstrating your ability (or lack thereof) to take advice and use it.

Another thing, we can’t afford to have somebody compartmentalized as a web developer. If you’re really strong in JavaScript, start reading up on CSS and HTML. Notice I didn’t say CSS3 and HTML5? That’s because, while those are relevant, you need the basics more. I honestly don’t care if you know how to use local storage and canvasses if you can’t even structure your document well. If you’re strong in HTML and CSS, start writing some JavaScript. Do the code kata series with JavaScript. For the first few, you will be referencing Mozilla Developer Network (MDN, use this for your reference for most things, web… ) a lot, but you’ll be learning. Unfortunately, I don’t know of any real practice problems for HTML and CSS, but here’s a couple things you can build, just to get the start to finish experience (if you don’t have a web host, setup apache on your home computer):

  • Build your resume in HTML. It doesn’t need to be fancy, just get it up there. In fact, this is the perfect opportunity to go mobile first and responsive.
  • Start a blog… and customize it.
  • Build a developer web site on squarespace.
  • Build a developer web site. If you do consulting, you should have one already… give it a face lift, make it responsive.

Currently, I don’t use any tools to check my HTML. I know tools exist, like html tidy and such, but I am kind of a perfectionist when it comes to indentation and I tend to have some quirky ideas about how my HTML flows best… I don’t like my tools reformatting my code for me. Some basic tips, that you probably already know:

  • Close your tags.
  • Lay out the page with a clean clear structure that is based around the content (not presentation).
  • Indent tag contents.
  • Don’t put your JavaScript and CSS into your html.
  • CSS goes at the top, JavaScript goes at the bottom (imports, of course).
  • Know a few ways to make the page load faster (reduce http requests, min everything, use sprites, use a cdn).

Just Enough CSS

Find some clean well designed pages and look at the source code. The CSS and JavaScript files will probably be minned, but almost nobody mins their HTML… and even if they do, the browser tools will restructure it for you. Pay attention to when id’s are used as opposed to classes. Over-using id’s is one of the most obvious mistakes that beginning web developers make. You’re only supposed to have one of each on a page, so as soon as you throw an ID in there, your widget (or chunk of HTML) can only appear on the page once. Also, id’s in css selectors are extremely hard to override, as they are the highest specificity.

Start using csslint on all of your CSS. You’ll be surprised at how much CSS you have that you don’t need or is just plain invalid… Start by pasting into the box on the site, but you’ll eventually want this integrated with your development process. Whether you check on save or during a build cycle (you do minify your css before deploying to production, right?), your choice. Personally, I use a vim plugin that checks on save. Csslint will warn you about these, but here are my pet peeves:

  • Be as general as possible (less specific), it not only makes fewer rules necessary, but makes it easier to override those rules later.
  • Know how specificity works, don’t just keep adding stuff in firebug until your styles get applied (in order of lowest to highest specificity: element, class or pseudo-class, id).
  • Don’t put id’s into a selector unless absolutely necessary.
  • Know that display:inline takes away your block level styling (no more width, height, float…).
  • Know a couple of ways to clear a float.
  • Bonus: use display: inline-block.

Robust, Reusable JavaScript

Start using jshint or jslint, they will tremendously improve your JavaScript. Don’t get me wrong, they will hurt your feelings, but will make your JavaScript more robust and portable. Start by pasting your code into the box on the website of whichever one you choose. You’ll eventually want to integrate it with your development process. I have a vim plugin that checks on save, but you could opt for a lint on build process using grunt (or some other tool), as well. Here’s some quick JavaScript tips, some of the things I’m looking for when you write code on the whiteboard:

  • Don’t create globals.
  • Encapsulate your JavaScript into immediate functions, (function(){…}()).
  • Use “use strict”;.
  • Know how events work. We’re using events for everything, lately. If you can trigger an event and bind something to that event, that’s a leg up.
  • Start wrapping your head around object oriented javascript. It’s quite different from OOP in other languages, but very important.

If you’re familiar with jQuery, if that’s what most of your experience is with regarding JavaScript, you may not be as good at native JavaScript, however, you should know, at least, the following:

  • Know how to use execute code on document ready.
  • Know how to effectively select items for changing or moving or doing something to (hint: it’s just like CSS).
  • Know how to do something to each of those items (reverse the string contents, for example).
  • Bonus: Know how to attach event handlers.

So, I think that’s the end of my rant. I probably missed a ton. This is nowhere near everything you need to know to be a great web developer, however, I think this will get you on the right track. If you spend 10 – 20 hours on this stuff, I think you would be able to demonstrate a deep enough understanding to get the nod from me to get hired as a web developer. If you’re already developing and start using the tools mentioned here, and following the tips here, everyday, I think you’ll find your progression and growth as a web developer will explode. Others will notice, too. Then, maybe you won’t even need to look for another job.

I feel like I should make it clear that, I’m not the last step in the interview process. Even if you blow my mind, you still may not get an offer. With that said, we have many career opportunities available at Cobalt. If you’ve got this, and are in the market for a job as a web developer, check us out.

Object Oriented Programming and the Search for a Decent Book

Are there any?

Really, I was just reading a book about Ruby, thinking about using rails for a new personal project I want to tackle. In the second chapter, it starts going off on how inheritance works. It starts off okay with the standard cat, dog, animal example… but then, something horrible happens… he starts writing a game (cue dramatic dunt dunt duh).

Now, don’t get me wrong… a game, in and of itself, is fine… it’s all about how you create the objects in that game. So, he starts with a treasure object. This treasure object has a name, description and a method to override to_s. So far, so good, right? Next he explains that a lot of the objects in this game are going to have names. This is where he goes off track. He proceeds to create a thing class with a name property, which then becomes the parent (super?) class of treasure. Okay, okay, I realize this is how object oriented programming has been taught for years, but I thought it was becoming common to use inheritance for classification, not specialization.

Since I heard that phrase uttered a year ago, I knew that it was the key to useful OOP that I had been looking for. Use inheritance for classification, not specialization. Six (not so little words) that can change your life. It helps to avoid the 100 levels of abstraction that seem to be the norm on every java and C# program I’ve seen the source code to.

Now this Ruby book I was reading was published last year… that’s one of the reasons I picked it. I tried to keep reading it (really, I did), but it kept on going back to that same wrong premise that creates programs that are impossible to follow and hard to maintain. What if you decide treasure shouldn’t have a name anymore, or you want to put some restrictions on the names its allowed to have. Now you have a couple choices… change the base class (thing) and refactor anything else that had inherited it (there was a room class before I stopped reading) or stop inheriting thing. I guess you could also override name, but at that point, you’re overriding the only thing the thing class gives you… what’s the point?

Now, back to the topic at hand… does anybody know of a decent OOP book? I don’t care what language, I’m just hungry for more concepts and principles. Give me java or ruby or c# or even smalltalk… just make sure it doesn’t base OOP on outdated principles and doesn’t read like an elementary chapter book.

How I Learned to Fix Computers

I started out in this business as a computer technician and I still do it some, as a consultant. The first computer I ever fixed was an IBM Compatible (remember when they were called that… heh) Packard Bell 386. I don’t remember how much RAM it had or the size of the hard drive, but I do remember it had a 2400 Baud modem that we never got to use (there was no ISP’s in the small town I grew up in).

I had been saving money for a couple of months, so I could buy… a computer game! I didn’t really care what game, I just wanted a computer game. I ended up buying Ninja Gaiden 2 (the coolest looking game that I had enough cash for). I read the instructions on the way home from Wal-Mart (30 minutes of wide open freeway away). When we finally arrived, I was ready to play, but… it was bed time. The next day, my dad went to work (he worked 12 hour shifts at the power plant) and I proceeded to install my new game… some indiscernible amount of time later, I was playing Ninja Gaiden 2 (not very well, I was never very good at video games, when I was little).

Well, a couple of hours later, I was stuck. So I decided to take a break and switch back to normal computing mode (you know… Windows 3.1) and play around a little while. Well, during the install, I guess I overwrote the autoexec.bat file. Of course, I didn’t know that… I didn’t know what I did. All I knew, is that when I turned on the computer that morning, Windows came up… now, when I turn on the computer, all I got was C: and a blinking cursor… Oh shoot… my dad is going to kill me… I broke the computer…

Okay, calm down, think… Okay, the computer came with a bunch of books (really thick books, I was around 10 years old at the time). I have until 7 PM before dad gets home, and if the computer wasn’t back to how it was before he went to work, I wasn’t going to sit down for a month (or much worse, touch another computer until I was 18). Well, time to dig in. So, I start looking through the manuals for a solution.

Now, I don’t really know what happened between that moment and 7 PM, but I know there was a lot of rebooting and popping disks in and out and I’m pretty sure I read 80% of both the DOS and Windows manuals. I think I may have re-installed both DOS and Windows. However, the important thing is, by the time my father walked in the house after work, I was moving and resizing program manager windows to make the screen look the same as it did when he left for work.

Anyways, that’s my story, what’s yours?

Sitewide Alert on ASP.NET Master Page

Well, I finally got the sitewide alert for Navajo County working to well enough to call it done. It started out as a text file in the root directory of the server, if it was present a new box would show at the top of every page on the site with the text in the box displayed in bold with a yellow background. Ugly, but simple and effective.

Well, now I’ve got a table in the database that holds html and is updated by a CKEditor control. It uses integrated authentication so that only specific users have access to update it and it logs when it was last edited and by whom.

Web Updater Control Read On…

Watch Out for the Bad OS Install Disc

I’ve been troubleshooting a coworkers computer for the past 2 days, trying to figure out why the Vista install freezes when it is trying to partition the disk.

It’s an old case and power supply, but almost everything else in the computer is new (installed by the coworker/client), so naturally, I assume that something is defective or installed incorrectly.

I start by reseating all of the cables, still a no go. I go into the bios to check the configuration and find that the hard drive is set as slave, fix that, still a no go.

This is where I hitting it with diagnostics. The hard drive doesn’t show any SMART errors and all tests with Data Lifeguard Tools pass. On to the memory… MemTest86 doesn’t come up with anything.

Now I am starting to think it might be the disc, but the thing looks immaculate, I can’t see a scratch or other physical defect on it. Well, maybe it can’t partition the hard drive for some reason, so I use partition magic to cut out 100 GB of the 500 GB Western Digital and format it with NTFS. It still won’t install… In fact, now I don’t get any UI screens, just a mouse pointer on a pure black screen… weird.

Well, in order to be thorough, I thought I’d try one of my XP install discs that I’ve used before… Lo and behold, the system now has a working operating system.  What a hassle, all because of a bad disc with no visible flaws.