Jacob Gable's Posterous

Software Developer, Amateur Philosopher, Young Punk

    • 0
      25 Apr 2012

      Bare Minimum JS - Part 2 - Scoping

      • Edit
      • Delete
      • Tags
      • Autopost
      Scoping Things Out

      In our last post, we talked about ways to create objects in order to keep our code tidy and organized.  The next concept we're going to explore is also a way to keep our code tidy and out of the way of each other; Closures and Scoping.

      The Old and Busted way

      Here's a common story.  You start out with just a couple pages on your website.  You don't see the harm in just throwing your javascript on each page, maybe even (<gasp>) directly calling javascript from html event attributes.  But, quickly, you've added a bunch of new objects to the global scope and if your application ever gets much more complicated your going to end up having a hard time finding what functions are firing and debugging code paths because of the lack of structure.

      Javascript-onedoesnothtmlattib

      First off, shame on you for putting javascript in an HTML attribute.  Somebody has to make a value judgement at some point, and for me, it's javascript event handlers on HTML tags.  Sorry, had to be said.
        
      The New Hotness

      Here is a much more stable way to encapsulate your page logic using a "closure" technique.

      Whoa.  Settle down.  I know, it's a little bit more complicated.  Let's start with the toughest thing on the page; the self executing function we wrapped everything in.

      Breaking it Down

      All we are doing is creating a function and immediately executing it.  The main reason we would want to wrap our code like this is to keep it out of the global scope and therefore more modular and tidy.  After running this function, we've created a new page1 object and subscribed to the document.ready event with the page1.ready handler all without any artifacts in the global scope.  Plus, we get a nice way to represent the logic on our page in an object oriented way.

      The "use strict" is kind of esoteric, but it brings some helpful checks for some of the quirks of javascript.  I won't go too much into detail here, but check out John Resig's great article on strict mode.

      Next, we use the handy dandy object initialization syntax we talked about in our last post to group together the functionality for page1.  Also, in the setupEvents() method I show an example of how to subscribe to events on elements in a more isolated way than putting functions in html attributes.

      Next Time

      Classes and scoping can really start to make your Javascript heavy projects much easier to handle.  But, it gets even better when we start to introduce another concept called the Module Export pattern.  Stay tuned, it's gonna be good for you, I promise.

      Now Playing - Dashboard Confessional - Screaming Infidelities

      _
      • views
      • Tweet
    • 0
      18 Apr 2012

      Bare Minimum JS - Part 1

      • Edit
      • Delete
      • Tags
      • Autopost
      The Bare Minimum You Need To Know About Javascript

      Part 1 -Getting Classy

      These days, it seems JavaScript is taking over the whole earth.  Chances are, if you're starting a new project it's probably going to involve some JavaScript.

      Javascript-allthethings

      A wise man once told me, "JavaScript is for hackers" and, that is both a blessing and a burden for the common developers relationship with the language.  A common developer coming from a strict OOP language like C# or Java is going to be turned off by some of the functional concepts and the lack of an easy way to keep things modular and tidy.

      With that in mind, let's dive in by introducing one of the basics that will help keep your code organized.

      Get Object Oriented

      JavaScript has two common ways to create an object.  First, let's take a look at the quick and dirty way to make an object.

      That is the easiest way to just group a bunch of variables into a class.  It's quick and easy but has some downsides to keep an eye out for.  If you need to make a lot of these you're going to have to type that out a lot which could lead to fat-fingering it some place.  There's also the fact that the `speak()` function we created is an instance variable on each object, which means it will take up more memory than if we defined it in the more classical prototype fashion that would share the function across objects.

      The classical prototype way is a little more verbose, but it comes with the benefit that we now have a way to really pump out some `Baby` objects if we needed to.  Notice the way we use `this` in the constructor to make instance variables on the object (more on the magic of `this` in another post.

      My rule of thumb is to use the quick and dirty way when I'm making a "one off" object that is just temporary and won't have many instantiations.  

      I try to be strict about using the classical approach when I'm creating something that will have more than one instance of itself in my app.

      Next time, we'll talk about closures and some of the ways we can keep our newly created objects from banging into each other in the global scope.

      Now Playing - The American Dollar - Anything You Synthesize

      _
      • views
      • Tweet
    • 1
      7 Mar 2012

      Ramblings On the Magnitude of Our Work

      • Edit
      • Delete
      • Tags
      • Autopost

      I love code.  I like to write code, I like to read code.  I dream about code, sometimes good dreams, sometimes bad repetitive ones where I’m stuck in a for loop and can’t get out (anybody else ever have that dream?).

      Although not the best metric, sometimes a project is measured by lines of code.  As of right now, the GDCT Next Gen site has over 10,000 lines of javascript code alone; not counting the server side code that handles the database interactions, authentication, logging, profiling and business rules.

      Here is some code that updates a timer questions response.  There is certainly more code that this code relies on, but it’s the front line in how we start the process of updating the bubbles and scores for a timer question.

      This is about 17 lines of a 1200 line file called pages.surveyTimers.js.  All of the code in this file is written by hand, none of it is generated by a tool; blood, sweat, tears and quite a bit of dubstep music have gone into every line.

      ... blood, sweat, tears and quite a bit of dubstep music have gone into every line.

      But, there’s a bug in this code.  It’s a small one, a sneaky little one character bug that causes the score not to update in certain situations and in other situations the scoring bubble will not update either. 

      There is no compiler error in the console because of this bug, no indication from anywhere that there is an incorrect character that will cause 5 new tasks, and widespread panic, to be created.  This character could be the result of just a small instantaneous lapse in focus while refactoring one of the other 1200 lines of code in this one particular file; perhaps while adding a new feature or abstracting out this common code from somewhere else.

      I wanted to share a bit of the magnitude of our work with you.  This app is no small feat of software engineering.  It’s a complex and mysterious bird.  That’s why when I hear about the tasks coming up as a result of testing, I am not disheartened.  No piece of software comes out perfect the first time and we have the processes in place to fix issues and respond to feedback.

      Now Playing - M83 - Midnight City

      _
      • views
      • Tweet
    • 0
      18 Oct 2011

      Modern Web Projects with HTML5 and Javascript

      • Edit
      • Delete
      • Tags
      • Autopost
      I've been doing web development since 2005, matter of fact, the first website I ever built is still around .  Back then it was DotNetNuke and WebForms projects, and it sucked.

      I honestly had no idea what real HTML was until .Net MVC came out.  The first time I had to write a real form and learn what happened when you posted information was a mind blowing experience.  I've been hooked ever since.

      Modern web development still sucks.  But I've learned to manage some of the sucky parts with what your going to see here today.

      Step 1: MVC FTW

      You need to learn MVC 3 immediately.  There should be absolutely no reason we ever willingly start a new WebForms project again.  It's beyond this article to teach the intricacies of MVC style web development, but I will say that it will immediately boost your HTML, CSS and Javascript understanding.

      MVC Resources
       - Intro to ASP.NET MVC 3
       - Introducing "Razor"

      Step 2: HTML5 Boilerplate, Normalize.css, Modernizr and YepNope + Polyfills for browser consistency

      Battling display inconsistencies with different browsers is never really going to go away.  Legacy IE versions are entrenched in the enterprise world and likely will be there for years to come.  However, we can stand on the shoulders of giants in the web community who have put together a group of collected tips, tricks, magic spells and hacks that give us a pretty consistent baseline experience across most browsers.

      Browserlineupin20191

      The HTML5 Boilerplate project is a great project for not only getting a jump start on a consistent site look and feel, it's also a great way to learn about the cutting edge in web development.  HTML5 Boilerplate code is chock full of tasty bits of knowledge ready for you to expand your mind when you're ready.

      Html5_boilerplate_-_a_rock-sol

      HTML5 Boilerplate and Normalize.css Resources
       - HTML5 Boilerplate Site
       - Normalize.css Site
       - Modernizr Site
       - YepNope Site

      Step 3: HTML5 != Just put a Canvas in it, bro

      I've worked on a couple HTML5 sites... err applications, and I've never once found it helpful to use a canvas element in something that is not a game.  There are so many other cool things in the HTML5 spec that aren't a canvas element that people don't even know about.  The best parts of HTML5 are the things that make you write less code that is more readable.

      Isn't that cleaner than a bunch of div's?  And, not pictured, but equally as important is the cleaner CSS that results from not having class pollution everywhere.

      I could go on about all the new API's but the point I want to make is that it's no longer acceptable to say "All HTML5 adds is just a canvas and audio element, right?". No,  HTML5 is a collection of state of the art browser API's and semantic markup elements built to let you make the next generation of applications that make use of native resources without the native application walled garden.

      HTML5 is a collection of state of the art browser API's and semantic markup elements built to let you make the next generation of applications that make use of native resources without the native application walled garden.

      HTML5 Resources
       - HTML5 Rocks

      Step 4: Javascript: with great power comes great responsibility

      It's amazing how intimidating javascript is to the new comer.  I think when faced with the intricacies and inconsistencies of javascript people often fall back to a mess of procedural code with the caveat that "Hey, it works, so I don't want to change it".  This is lazy, and not the good kind of lazy either.  We need to, and can, write javascript code that is object oriented, loosely coupled and efficient.

      Here are some signs that your javascript code is starting to suck:
       - You have one long javascript file
       - You have everything in the global namespace

      If you find yourself with a long javascript file and wish you could separate things out into nice manageable chunks, try using a framework like SquishIt to combine and minify your javascript files for you as part of the build process.  Complicated open source projects like jQuery use a similar process to break things down into smaller, more manageable chunks.

      Cluttering the global namespace is like having all your variables in an application be shared with everything else.  Information hiding is a core principle of object oriented programming and to that end you should know how to write code that protects it's private data and exposes a nice clean API for you, or someone else, to take advantage of.  One way of doing this is by taking advantage of the Module (or Module-Export) pattern.

      These two tips amplify their awesomeness when used together.

      Step 5: jQuery... I mean YAYQUERY!!!

      Now, all the purist code snobs out there are going to tell you that you should know how to get elements, modify attributes and animate things with pure javascript.  Well, I think that's crap.  If I want to build a deck I'm going to use a damn circular saw because it's fast and I'm trying to build a deck, not learn all about the art of building decks or the inner workings of wood cutting devices.  Just to drive this metaphor home; jQuery is a damn fine circular saw.  And I like to build decks.

      If I want to build a deck I'm going to use a damn circular saw because it's fast and I'm trying to build a deck, not learn all about the art of building decks or the inner workings of wood cutting devices.  Just to drive this metaphor home; jQuery is a damn fine circular saw.

      There are lots of other javascript frameworks out there, but they all do pretty much the same thing and with about the same amount of performance.  Most of us are never going to need much better performance than what jQuery can provide to us, so the easy learning curve and vast amount of plugins available make it a superior choice in my opinion.

      Here are some of my favorite jQuery Gems I'll share with you:

      jQuery Resources
       - jQuery Cheatsheet by Future Colors
       - YayQuery Podcast

      Wrapping it up

      That ought to get most people up to speed on what I use for Modern Web Projects.  Maybe next time we can talk about taking a site from design file to HTML.

      Now Playing: A Real Hero - College feat. Electric Youth

      _
      • views
      • Tweet
    • 0
      6 Oct 2011

      Programmer Values

      • Edit
      • Delete
      • Tags
      • Autopost
      Tonight I've been thinking a lot about my career.  Every now and then I like to get back to "First Principles" and re-evaluate my core values.

      To that end, here is what I think I value as a software developer.

      1.  A consistent working location.
        - see Your Commute is Killing You
        - Part of a community that I can contribute to

      2.  Solving interesting problems that help people be more productive and prosperous.
        - Challenging work
        - Not micro-managed
        - Do no evil

      3.  Working with people who I can learn from and hang out with
        - Continuous learning
        - see Why Friends Matter at Work

      4.  Sharing my knowledge with other people.
        - Presentations, discussions
        - Grow your people
        - New business from new ideas

      All this is sprinkled with most of the stuff you see in the RSA Animate - Drive video:

      That's it for now, maybe some future me will look back at this and re-evaluate.  Next time I'll talk about my career as a consultant and how that meshes with these values.

      Now Playing - Drake - I'm On One

      _
      • views
      • Tweet
    • 3
      27 Sep 2011

      document.ready with jQuery Mobile

      • Edit
      • Delete
      • Tags
      • Autopost
      One of the first hurdles I had with creating sites with jQuery Mobile was figuring out how to run my code when a page loads.  Since navigating to a new page no longer requires a postback, the standard $(document).ready approach isn't going to cut it.  I've come up with a solution that I think helps you modularize and isolate your code to prevent having one large unmaintainable lump of a javascript file.

      Creating a Namespace

      Now when I work on javascript heavy applications, I take care to modularize my javascript but I don't necessarily follow the pattern exactly.  I start out by creating a namespace object, and I usually place this in a file called core.js.

      So, what we're doing here is creating a blank object (MYAPP) to "scope" our application objects.  We extend that object with some new objects to hold our pages and maybe even some options.  We would also maybe put some other stuff in here, but for this example we'll keep it mostly clean.

      The Page Event Mapper

      Now it's time to do some plumbing work to hook the new page objects we are going to create up to the jQuery Mobile navigation framework.  We want to pass the page events from jQuery Mobile to a page class that will handle the events.

      Every page in jQuery mobile is wrapped in a div with a data-role attribute set to "page", so what we're doing here is handling the jQuery Mobile page events and passing them to our corresponding page.

      A Page Class Example

      Speaking of pages, let's take a look at what an example page looks like in my code.

      As you can see, I've kept the code pretty simple.  This class will now be able to respond to init events (which get fired before the page is modified by jQuery Mobile) and the show event which gets fired every time the page is navigated to (even when it's cached and navigated back to).

      But Don't Take My Word For It

      If you want to give a try for yourself, head on over to the jsFiddle I set up with this example code already set up.

      Now Playing: Nas - It Ain't Hard to Tell (Reading Rainbow Remix)

      _
      • views
      • Tweet
    • 1
      18 Sep 2011

      On Windows 8 Metro HTML Apps and the Web Developer Ethos

      • Edit
      • Delete
      • Tags
      • Autopost
      Ethos (noun): The characteristic spirit of a culture, era or community as seen in its beliefs and aspirations.

      TL;DR: I hear a lot of people talk about the what the value of offering a way to create "Metro" style apps for Windows 8 using HTML and Javascript is, and I disagree.  I believe the common web developer has a different value system than what the Win 8 "Metro" environment encourages and as a result not many people will end up using the HTML options for creating "Metro" apps on Windows 8.

       

      Current Web Development Values

       - Optimized javascript and css for fast page loading.
           - Combined, Minified JS and CSS
      - Load from CDN, fallback to local
       - Simple, short javascript code
       - Reactive and Responsive to different devices.

      I'll take some liberties and really just boil these down to the following:
       - Fast Page Loading
       - Simple Code
       - Platform Agnostic

      Fast Page Loading 

      As a web developer I have certain performance implications in mind when I organize my site and its resources.  I like to minify and combine all my script and css files for quicker loading along with loading certain libraries from CDN rather than locally to take advantage of Caching.  The examples I've seen so far tend to have about 87 obscure scripts loading in the head of the page and it makes my face twitch every time I see it.

      Simple Code

      The WinJS and WinRT namespaces are insanely long and ugly to use.  Again, the average to elite js developer has it ingrained to limit the size of their javascript files for performance.  Using something like WinJS.Class.define(...) or some of the other longer examples for subscribing to certain app events like startup is going to turn off developers to creating apps.  The good thing is that this could be fixed by someone just wrapping all that stuff up in a shorter namespace utility library ($win sounds good).

      The javascript examples I've seen so far tend to degrade into this monolithic amount of JS in one file.  There needs to be a better story for architecting javascript heavy solutions.  I think the .Net world isn't used to this type of project yet and it would have been nice to see MS give some guidance about managing them in a responsible way.  I'd like to see a convention based solution that encourages a module + export pattern for managing the complexity of javascript code.

      Platform Agnostic

      I'll start out by saying that it's unfair when I see people comparing the Metro app development with developing a website.  This is a native app and as such will have a heavy reliance on the underlying platform.  The better comparison for development is that of a ChromeOS application.  On the other hand ChromeOS application doesn't have the same heavy importance on a radical theme/styling for apps like Metro apps will.

      Host enforcement rules add an extra layer of security for "Metro" HTML apps by only allowing "safe" html and javascript references.  Host enforcement rules add an extra layer of security at the expense of clean and easy to implement javascript.  The fact is that most web sources are going to not have "safe" html (especially since most data- attributes are considered harmful).

      That's all I have for now as far as notes, I'm sure I'll tidy this up a bit for a more official review later on when I've made a couple apps.

      Now Playing: Mt Eden - Gambler
      • views
      • Tweet
    • 0
      15 Jul 2011

      MVC 3 jQuery Mobile Site Template

      • Edit
      • Delete
      • Tags
      • Autopost
      I spent most of the night creating a basic jQuery Mobile Site Template for .Net MVC 3 Razor sites.

      The source for this project can be found over at the MVC 3 jQuery Mobile Site Template project on GitHub.

      Nothing much to say really about the template.  It's very similar to my previous MotherEffin HTML5 Template but I kept it a little bit more bare bones this time.

      Most people will want to check out the jQuery Mobile site and Demo / Documentation before the template will be that useful.

      Now Playing - AudioSlave - Shadow on the Sun
      • views
      • Tweet
    • 0
      21 Jun 2011

      Anatomy of an HTML5 Page Transition

      • Edit
      • Delete
      • Tags
      • Autopost
      One of the sexy new trends in HTML5 development right now is Page Transitions.  One of the first places I noticed Page Transitions in use was the GitHub Repository Explorer; as you click around to different directories and files, the content slides in and out without reloading the page.

      While most of this functionality can be achieved through Javascript alone, the actual URL History manipulation has only been available in the (relatively) recent incarnations of HTML5.  When you add in the ability to take advantage of CSS3 transitions for sliding pages in and out, you end up with a pretty modern example of HTML5 capabilities.

      Overview

      Here is a pretty typical scenario; two pages with identical layout, but different content.

      Second

      1. User clicks a link that has the transition-link attribute
      2. Download the page with $.ajax call and grab content (<div> with role="main" attribute)
      3. Slide out the old content, slide in our new content.
      4. Change the menu button highlight and URL.
      Page HTML Structure

      Setting up your pages to use transitions requires some plumbing hookup to specify what parts of the page are content and what links should load new content in.  In our case, we attach handlers for any link elements with a transition-link attribute, and we look for a div element with a role="main" attribute as our content area.

      Retrieving The Other Page With jQuery

      When our page loads, we attach to all our transition links click events so we can load our other page with ajax instead of with a browser refresh.

      You may notice that we are taking advantage of jQuery's new $.Deferred object for the loadPage function.  This lets us specify callbacks for when the page is done loading, or if there is an error loading the other page.

      Transitioning The Page Contents Out and In

      Once we've loaded the new page's contents, we're ready to start transitioning the old content out and slide the new content in.  To do this, I took advantage of the jQuery UI Effects library and chained some call backs to insert the new content after we finish hiding the current content.

      Bonus Points: We get some bonus points here at the bottom for detecting CSS Transitions and using those instead.  The style for the CSS3 Transitions can be found in the jQuery Mobile source on GitHub.

      A more styled fleshed out version of this concept can be found live on my DropBox account.

      Now Playing - Lupe Fiasco - Superstar
      • views
      • Tweet
    • 0
      12 May 2011

      HTML5 Dialog Element Styling For Pleasure and Profit

      • Edit
      • Delete
      • Tags
      • Autopost

      Recently I had a great opportunity to work on a small part of a Lync Powered Expert Question Answer Service.  My portion of the code was a simple one page HTML popup that allowed a person to chat with an expert.

      One of the cool things I found out about during the project was the HTML5 Dialog Element

      The dialog element represents a conversation, meeting minutes, a chat transcript, a dialog in a screenplay, an instant message log, or some other construct in which different players take turns in discourse.

      Nifty, eh?  I use jquery to insert the root dialog element, then whenever a message is sent or received I inject the dt and dd elements.  Here is an example of what the conversation looks like in HTML

      By default, the browser will display this like this:

      Defaultstyle

      Now that's kinda lame, I want it to look like a real chat screen (with some slick Metro UI Styling), so I added some CSS (take a look at the JSSFiddle CSS Tab for my styles) to hide the dt element and give it a nice blue bubble look.  I even added some nice CSS triangles into the mix for some minor speaker perspective.

      Webchat

      I've put up a fully coded example with a boring chat bot over at jsFiddle for you to enjoy and mess around with.

       

      Now Playing - La Roux - In For The Kill (Skream Remix) [WTC Mashup]

      Jacob

      • views
      • Tweet
    « Previous 1 2 3 4 5 6 7 Next »

    • Search

    • Tags

      • C#
      • personal
      • professional
      • WP7
      • wp7dev
      • silverlight
      • deck
      • xaml
      • .Net
      • construction
      • mobile
      • DotNetNuke
      • MVC
      • boston
      • functional programming
      • javascript
      • web design
      • web development
      • Aggregate
      • DNN
      • Dare Obasanjo
      • JSON
      • Jquery
      • Scripting Games
      • WPF
      • dog
      • fight
      • html5
      • notprofessional
      • perfessional
      • scripting
      • subway
      • AdMob
      • CSS
      • Carnage4Life
      • DIV
      • DatePicker
      • Event
      • F#
      • Fluent Interface
      • HTML
      • Jtemplate
      • LINQ
      • Logging
      • Microsoft
      • Module
      • PRISM
      • Pattern Matching
      • Rx
      • SEO
      • SailCity
      • Sailing
      • TERD
      • Visual Studio 2008
      • WinPhone7
      • api
      • auger
      • beam
      • boston cares
      • brian
      • brother
      • buddha
      • business of software
      • cache
      • calendar
      • coding
      • communication
      • community service
      • concrete
      • decision maker
      • designer
      • developer
      • dirty code
      • diy
      • douchebaggery
      • economy
      • fonts
      • furniture
      • glorious green
      • greed
      • halo
      • hand rails
      • harvard business review
      • home improvement
      • house
      • imitation is flattery
      • joists
      • joomla
      • knockoutjs
      • lambda
      • leadership
      • mathew 6:3
      • metro
      • mvvm
      • mycode
      • old fogey
      • pale guy
      • pessimism
      • phone
      • planning

    • Archive

      • 2012 (4)
        • April (2)
        • March (2)
      • 2011 (22)
        • October (3)
        • September (3)
        • July (1)
        • June (1)
        • May (2)
        • April (3)
        • March (5)
        • February (4)
    • Obox Design

  • Jacob Gable's Posterous

    I am a developer at Clarity Consulting where I spend most of my time doing custom programming with C#, ASP.Net MVC, WPF, Silverlight, Win Phone 7 and various other facets of the .Net Framework.

    Resume available at Stack Overflow Careers

    The opinions and examples here are my own and not necessarily my employers.

    21262 Views

  • Get Updates

    Subscribe via RSS
    Bloggermetaweblog