Demo blog

Just another WordPress weblog

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

Kick procrastination's ass: Run a dash

Original Post: http://www.43folders.com/2005/09/08/kick-procrastinations-ass-run-a-dash

Procrastination can drive most of us into a spiral of shame that’s as mundane as it is painfully personal. We know what we should be doing, but some invisible hang-up keeps us on the line. Unfortunately, the guaranteed consequence of procrastination is growth in the scale of the task you’ve been putting off—as well as the anxiety that it creates. All the time you’re putting something off, your problem’s getting bigger—both in reality and in your head, where your colorful imagination is liable to turn even the most trivial item into an unsolvable juggernaut that threatens to overwhelm you. And that means extra stress, more procrastination, and the music goes round.

My favorite tonic for procrastination—which I have mentioned in passing previously—is what I call a dash, which is simply a short burst of focused activity during which you force yourself to do nothing but work on the procrastinated item for a very short period of time—perhaps as little as just one minute. By breaking a few tiny pebbles off of your perceived monolith, you end up psyching yourself out of your stupor, as well as making much-needed progress on your overdue project. Neat, huh?

Why the Heck Should This Work?

By making even the most modest bit of progress on your hated task, you’ve done what once seemed impossible: you got started. When you realize how much of the anxiety you’d experienced was created in your head, you’ll experience huge relief and give yourself the jolt needed to get back on track.

You can do a dash any time and for virtually any kind of project. The task has not been conceived that cannot be made smaller and more dash-able.

Three kinds of dashes

Time your dash

Try using a kitchen timer
to run your time-based dash.

Plan your dash based on whatever works best for both your project and the particular block that’s hanging you up. The key is to pick a goal that’s laughably modest. Seriously, this is not the place for extravagant predictions and overly ambitious goals (that’s probably what helped land you here, right?).

  • Time-based dash – Most jobs lend themselves to a time-based dash, so pick up a kitchen timer at your local drugstore. Choose an amount of time that gives you enough room to do something but that’s brief enough to seem completely unintimidating. For some reason, eight minutes seems to work well for most of my own dashes.
  • Unit-based dash – Alternatively, depending on the tasks you’ve been avoiding, you could go with a unit-based dash, during which you agree to plow through an arbitrary number of pieces associated with your project (such as pages to read, words to write, glasses to wash, etc.).
  • Combination dash – In many cases, the best solution is a combination dash, in which you get to stop the hated work whenever you reach either the time or unit goal first.

Above all, remember that this is all about doing something, so pick a goal at which you can’t possibly fail.

Some Sample Dashes

Here are a few ideas to get you started, although dashes can work for virtually any project you’ve procrastinated–no matter how monolithic.

  • Messy garage – Goal: 10 minutes or 1 full garbage bag. Spend 10 minutes working in one area of the garage. Take out old papers, break down some boxes, or move the Christmas ornaments to the top shelf. When the timer buzzes at you, stop.
  • College application – Goal: 5 minutes or 1 page. Start by filling in the easy boxes. If you reach the bottom of the page before time is up, stop.
  • Overdue report – Goal: 10 minutes or 100 words. Just start writing, even if it’s complete crap. Just keep scribbling for 10 minutes or until you have a paragraph or two. When time’s up, stop.
  • Holiday cards and family correspondence – Goal: 5 minutes or 2 notes. Grab a pen and start making with the nice. Tell them about Tyler’s big day at Computer Camp. Brag about Ashley-Marie’s jazz and tap recital. When you’ve hit two finished cards, stop.

Feel Like Working More? Well, do ya, punk?

Once you’ve made any progress on something you’ve been procrastinating–even the ridiculously minor amounts of progress you make in your dash–you might find it irresistible to keep working at it. That’s okay. Seriously, go nuts.

Although you must begin your dash with the confidence that your life preserver is never more than a few minutes or units away, there’s nothing to stop you from paddling forward if you’re making happy progress. That’s the trick, and, believe it or not, it totally works. Give it 8 minutes, and find out for yourself.

Five Pros and Cons of Blogging

  • No Tags
  • 3 Categories

Original Post: http://blogsolid.com/ideas/2007/five-pros-and-cons-of-blogging/

Blogging has become an immensely popular activity, no doubt about that. In fact, if you’re reading this, chances are you already have a blog of your own, or at the very least, are thinking of starting one.

As with all things in life, there are some pros and cons that come with the deal. Here are my top five reasons to blog… and my top five reasons not to blog:

To blog:
pros and cons of blogging

  1. Communication
    More personal than a press release, yet less personal than a phone call. Blogging is the perfect way of keeping friends, family and acquaintances up to date. Some of my favourite blogs are those of my friends who live abroad.
  2. Networking
    It is amazing how many new people I have connected with through my blog, especially those who share similar views and interests.
  3. Promotion
    Blogging is a great tool for introducing yourself, your knowledge, your skills and your business to potential clients.
  4. Creativity
    Looking for an opportunity to develop your creative thinking and share ideas? Blogging squeezes your brain for creative juice. From philosophy to design and technical wizardry – blogging offers a very wide range of creative opportunities.
  5. Blogging
    Odd listing blogging as a benefit of blogging, but essentially a weblog (blog) is exactly that: a journal. It’s a good idea to keep track of a project, hobby, travel experience or simply life. You will probably find your blog to be be a valuable point of reference in future.

…or not to blog:

  1. Commitment
    If you start a blog, post two or three entries and then quit, it’s not much of a blog, is it? Unfortunately blogging requires some long-term commitment for it to have real value as a communication tool.
  2. Time
    Blogging takes time and if you don’t limit it, you could find that other essential daily tasks get neglected and your productivity is affected negatively.
  3. Discipline
    As a creative process, blogging requires you to dream up fresh content on a regular basis. You might often find that you simply don’t feel like blogging. If you give in to that feeling, your blog will die a slow and quiet death.
  4. Solo
    Unfortunately blogging is not a very social affair. When last did you hear of someone inviting their friends over for a blog? Time spent blogging is time not spent walking the dog or hanging out with your loved ones.
  5. Computer
    Does your work require you to spend a lot of time staring into that good ol’ computer screen… Blogging requires you to do the same! If you are sick of your computer, forget about blogging.

Did I leave something out? Feel free to add your blogging pros and cons in the comments!

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

Agile Process

  • Short Post

Original Post: http://konigi.com/wiki/agile-process

About

User Experience Design in the Agile Software Development method and Agile Process.

Agile Method

Agile software development refers to a group of software development methodologies based on iterative development, where requirements and solutions evolve through collaboration between self-organizing cross-functional teams. The term was coined in the year 2001 when the Agile Manifesto was formulated.

Agile methods generally promote a project management process that encourages frequent inspection and adaptation, a leadership philosophy that encourages teamwork, self-organization and accountability, a set of engineering best practices that allow for rapid delivery of high-quality software, and a business approach that aligns development with customer needs and company goals. Conceptual foundations of this framework are found in modern approaches to operations management and analysis, such as lean manufacturing, soft systems methodology, speech act theory (network of conversations approach), and Six Sigma.

Source: “Agile Software Development.” Wikipedia.

Agile Design Process

Agile design is an interative design process fit into the Agile Design Method. A bit more exploration of this concept is described in James Hobart’s article:

We’re faced with shorter timelines, more aggressive development goals, and limited resources to complete our projects. Each project requires a UI design strategy successfully implemented with the other aspects of the project. Agile design addresses these constraints by limiting the level of documentation to a point that works well for the team based on the skill, complexity, and proximity of the team participants. Agile design acknowledges that great user interfaces are an iterative process and require time-tested, user-centered design techniques as a foundation for success.

Agile design is built upon the principles established by a talented team of professionals who wrote a manifesto on agile development to address the needs of the current development environment we all seem to face. We often attempt to layer usability into a fast moving agile development environment where successive iterations of the code base are commonplace. This approach can backfire if we insist on heavy documentation and human factors studies before getting prototypes in front of users. On the other hand, just putting a few developers in a room with some end users can often result in a product that works for a subset of users on the team, but not a product that truly delivers the benefits of user-centered design. This is because specific design decisions need to be validated with actual usability testing to verify how the users behave, rather than relying on what they think they want.

Source: “Optimizing User Experience with Agile Design.” By James Hobart. Classic Systems Solutions, Inc..

Articles and Presentations on Design in the Agile Process

8 Web Design Tactics to Help You When You're Stuck

  • Linked Images from Other Site

Original Post: http://www.seomoz.org/blog/web-design-tactics

Web design can be incredibly frustrating.  You’d think that with the infinite possibilities of what-goes-where it’d be pretty easy to land a design that works, yet somehow we’ve all been stuck before: working hour after hour on a design that refuses to look right.  Throwing away pixels like they’re going out of style.

These 8 tactics are what I use to get out of that sticky spot.

  1. Design from the inside out
    This is some of the best advice anyone ever gave me about web design (thanks Cameron).  A lot of designers start off a design by focusing on the header.  Often times what’s inside the page is what makes it look good; the header is supplementary.  Try leaving the header alone for awhile and working on some elements in the body, you’ll be surprised at how much easier it is to design a page once you’ve got a solid body going.  The next time you’re designing a header with no body imagine yourself adjusting a tie in front of the mirror, but being completely nude.   (yikes)
  2. Sketch something
    My whiteboard is my salvation.  Pencil and paper works too.   I read an article years ago by a designer who would draw dozens of little 2×3″ mockups in his spiral notebook before even opening up a graphic design program.  It helped him identify where elements were going to be placed and what options looked best .  The best part of creating mockups this way is the speed at which you can burn through possible layout ideas.  Sketch something, scribble it out.  Sketch something else, scribble it out.  Do this ten times and you’ve probably got a fairly decent idea of how to the page should come together.  I’ve used a few wireframe applications like Axure, but I’ve still found myself to be my most efficient while bathed in the saucy aroma of whiteboard markers.
  3. Seek inspiration offline
    If you’ve paid attention to anything design related in the past two years then you’ve no doubt seen a few of the countless CSS galleries and design showcase websites that popped up.  These are excellent sources of inspiration, but sometimes a bit of offline media can be just what you need to spur some fresh ideas.   Open up a newspaper or magazine, go to the grocery store and look at the packaging, watch a television ad.   Pay attention to things that are applicable to your design such as typography, color, and element placement.  Ask yourself questions like “What is it I like about this magazine ad?” and “What is about this packaging that just works?”  There’s a lot you can learn from observing traditional media.  A few years ago a co-worker of mine lent me a book full of Russian posters and print ads from the 1920’s.  The lessons learned from looking at some of the material were invaluable – I was particularly impressed by how they were able to cram a ton of information into a tiny area but kept it from appearing too “busy.”
  4. Learn to let it go
    Ever make a button that looks ridiculously awesome but just doesn’t belong in your design?  You put so much effort into your ridiculously awesome button, you’ll go to great lengths to make it work.  You’ll bend the laws of space and time to make that goddamn button look right in your page.

    Learn to let it go.  Save the button and file it away.   Although you’ve lost this battle, you’ll soon have an arsenal of ridiculously awesome buttons you can use in designs later on.

  5. Step away from the computer
    We’ve all heard this before: If you’re having a difficult time with something, leave it alone for awhile and come back later.  It’ll probably be easier after you’ve had a bit of a break and your mind has settled.  Regarding web design, I’ve noticed this always plays out in a certain way:  If I’m hating a design I’m working on and I shelve it for a few days,  a lot of the time my reaction upon returning will be “Holy crap that’s fantastic!”   On the flip-side, I’ll often toil away long into the night working on what looks like the best design I’ve ever created.  The next morning I’ll look at it again and cringe at the horrible abomination I’ve created.    The moral here is to give your design some space.
  6. Be absorbent
    No art is born in a vacuum.  Learn to effectively pinpoint what it is you love about other designer’s work and incorporate it into your own.    Don’t steal designs, but don’t deprive yourself of external stimuli either.  Become better at identifying why you love the way something looks.   When I come across a design that blows my mind, I try to pick it apart what aesthetically makes it tick.
    The Tangerine Tree is a good example.  Sure, it looks wonderful, but why?  Personally, I love the way the designer has taken a very modern set of shapes and applied them against a vintage medium: Cartoonish bubbles and clouds that appear to be cut out of distressed paper.  When looking at this design I ask myself: What could I do with textures like that?  What is it about those shapes and icons that look so remarkable?
  7. Don’t be a one-hit-wonder
    Try to avoid using the same techniques over and over again, even if you’ve done really well with them in the past.  Gradient rectangles are my crutch – I have a terrible habit of using them whenever I feel like a design isn’t working.  “This design sucks…I’ll add a rectangle with a gradient fill!”  The result is usually something that I’m unhappy with because it looks the same as all my previous work.  Try imposing yourself with silly rules, such as “No drop shadows today” or  “2D elements ONLY.”  Locking yourself out from certain design habits forces you to learn new ones.   My happiness as a designer coincides with my ability to produce something that looks great but is different from anything I’ve done before.
  8. Seek input from others
    This is a tricky one.  There are so many ways to ruin a web design, especially when the wrong kinds of people are involved.  Be careful who you ask and find people who can provide constructive criticism.  I’ve seen many great designs die at the hands of aesthetically-challenged secretaries who have printed a few corporate bake-sale flyers in the past and consider themselves to EXPERTS at all things design.  If anyone ever tells you that your design doesn’t “feel right,” or that they “just don’t like it,” you might want to look elsewhere for input.  Find someone who can tell you specifically what’s wrong and how it could be improved.   Grow some thick skin, too. Don’t assume every criticism is an attack on your work of art.    Roll with the punches.

Any other techniques you can think of to jumpstart your design powers?

Compass, the 960 CSS framework, and Semantic Markup

  • Code Samples

Original Article: http://blog.carbonfive.com/2009/03/html/compass-960-semantics

My problem: Grid layouts – crazy, sexy, cool. Presentation classes in my semantic markup – neither sexy nor cool, and arguably crazy.

These days I can’t help but notice a burgeoning awareness regarding seasoned typographical principles and practices and lively discussions around the best way to bring these ideas and procedures to bear in the realm of web design. One area of these discussions that dovetails with my own interests is the subject of grid layouts. Grid systems are the architectonic foundation of a well structured and holistically interrelated design. They originated during the reign of the International Typographic Style, a primarily Swiss graphic arts movement which occurred after World War II. Grid layouts were cultivated and matured in the hands of such legendary designers as Emil Ruder and Josef Müller-Brockmann, acknowledged masters of simultaneously presenting information in a functional and stylistic manner. As web designers, I feel we should constantly strive for these same goals – the presentation of information in a readily understandable way, yet also striving for an elegance in our presentation. Grids can help us accomplish this goal.

Over the past few years much headway has been made in cultivating an online consciousness of Grid Systems. Khoi Vinh and Cameron Moll have shown us the benefits of using grid systems for web layouts, and Antonio Carusone from AisleOne has recently pieced together the awesome grid oriented hub, The Grid System. Further, a number of CSS based grid frameworks have been popping up on the scene. Those that have much traction in the blogosphere–Blueprint, YUI Grids, 960 grid system–are only the tip of the iceberg.

I’ve been interested in experimenting with one of these frameworks for a while, but I have a single nagging concern with the way they are structured. All of the frameworks I have looked at use CSS class definitions which possess names that reek of presentational concerns. For example, Blueprint requires class names like “span-7 last” or “span-8″; 960 favors the equally presentational “grid_1 prefix_1″ or “grid_7 alpha.” I just can’t get on board with this approach. I’m a firm adherent to notions of lean, minimal, and semantically vaible (X)HTML markup. The web development community has made great strides in separating out presentational concerns from the meaning inherent in well-crafted (X)HTML, divorcing the two orthogonal axes of style and semantics. And while I am a firm believer in the power of the grid to unify these two axes, as has been so well exhibited in the world of print, I cannot support said unification if it comes at the cost of reintroducing presentational markers into our markup – even something as ostensibly innocuous as a ‘mere’ presentational class.

So, where does that leave us? Is it possible to get the best of both worlds? Can we simultaneously develop semantic markup while leveraging those tried and true grid layout principles common enough to be packaged into a framework?

A potential solution to my problem: Compass – crazy? sexy? cool? To be determined…

Much to my pleasure, I am alone in neither my conviction nor my desire. Enter Compass, a ruby based application which provides Sass based APIs to many of the most prominent CSS frameworks, including those concerned with providing grid layouts. Compass sits on top of Sass, a domain specific language (DSL) for programmatically crafting CSS. The power of Sass derives from the fact that it is a real programming language, replete with all the benefits of such a thing: pragmatic tools such variable declarations, control structures, and method invocations, as well as more theoretical, but no less useful, concepts like abstraction, DRY-ness, encapsulation, modularity, and code re-use. I’ll admit, I’m new to Sass, having used it only superficially on a small work project. I have barely scratched the surface of its capabilities. And while some feel its application fails when applied to large scale projects, I can’t help but favor the programmatic benefits Sass brings to the table given my software engineering background.

Armed with Sass, developers can effectively write small libraries of code which will ultimately be translated into CSS. And Compass provides them with a mechanism for collecting these Sass libraries together and incorporating multiple APIs to into their own projects.

So, how does Compass help preserve semantic markup?

One of Sass’s most compelling features is known as a ‘mixin’. A mixin is a small module of Sass code, defined but once, that can be included into a Sass file and then referenced throughout. You can see where this is going. Imagine that in your application’s Sass file, you can gain access to, for example, 960’s grid layout API. You can ‘mixin’ these snippets of Sass code directly into your own semantic class definitions forgoing the need to use 960’s presentational class names anywhere in your (X)HTML. In short, Compass grants you the power to marry a tightly structured grid-layout with the beauty of lean, semantic markup. Pretty nifty, no?

So I decided to put all this to the test. I needed to learn more Sass, I wanted to play with the 960 grid system, and I wanted to vet Compass’s claim that it can help you eat a grid-layout cake iced with sugary semantic goodness. Follow along if you will…

Sussin’ the Solution: My first Compass-960 project

Installing Compass and the 960 plug-in

Since I already had Ruby and RubyGems installed, I was ready to start straight away with the installation of Compass.

First, I installed the bleeding edge of Haml, which includes Sass:

$ git clone git://github.com/nex3/haml.git
$ cd haml
$ rake install

I verified my Sass installation:

$ sass -v
Haml 2.1.0

Good to go. Next, I installed Compass and the 960 plug-in:

$ gem install chriseppstein-compass
$ gem install chriseppstein-compass-960-plugin

Creating a Compass-960 website project

Time to create a template Compass-960 project:

$ compass -r ninesixty -f 960 the_obscurantist

Now I had my template project, which comprised:

$ find the_obscurantist/
the_obscurantist/config.rb
the_obscurantist/src
the_obscurantist/src/grid.sass
the_obscurantist/src/text.sass
the_obscurantist/stylesheets
the_obscurantist/stylesheets/grid.css
the_obscurantist/stylesheets/text.css

Out of the box, the 960 plug-in produced two Sass files, grid.sass and text.sass. These two files mirrored the CSS files that come with the 960 framework, 960.css and text.css respectively. Whe I inspected the *.sass files, I noticed they already contained code to get me up and running with a basic 960 grid layout.

At this point I took some time to finagle things into a state commensurate with my overall goal – the elimination of 960’s presentational class names. First, I wasn’t interested in 960’s typography, so I ditched text.sass and text.css. Second, I also ditched grid.sass and grid.css, because those files provide access to styles designated with presentational class names, for example: ‘.container_12′, ‘.grid_4′, etc. Next, as learning exercise, I converted my variation on Eric Meyer’s CSS reset to Sass. Finally, I set up an application.sass file, being sure to include the 960 API and Compass’s clearfix module.

@import compass/utilities/general/clearfix.sass
@import 960/grid.sass

Ok, cool. I had some Sass files, but where were my CSS files? Simply enough, I had to run Compass to generate them.

$ compass
   exists stylesheets
  compile src/application.sass
identical stylesheets/application.css
  compile src/reset.sass
identical stylesheets/reset.css

Manually regenerating your CSS files everytime you make a change is burdensome. Compass can be run as a process that detects changes to your source files and automatically regenerates your css. I’ve found that leaving this process running in its own shell is useful so I can keep an eye on the Sass log for parsing errors.

So I ran compass as a daemon to forgo manual re-generation:

$ compass --watch

Great. Setting up a basic Compass project went off with out a hitch. I added in the remaining requisite files — an index page and the jQuery javascript library — and was ready to… Oh wait, what am I building?!

Using 960’s handy design resources to brainstorm ‘The Obscurantist’ daily newspaper

Because my whole endeavor was motivated by an intuitive yearning for transparent and easily interpretable semantic information, I decided to tip a hat to my favorite muse, Bittersweet Irony, and design a newspaper that had but one purpose – proffering the opaque and the impenetrable. Enter, The Obscurantist! As newspapers traditionally adhere to very strict grid layouts, the Obscurantist would allow me to learn the basics of the 960 framework.

In my view, some of the most useful resources provided by the 960 framework are the sketchsheets and grid templates. The sketchsheets were great for quickly thumbnailing rough ideas.

Here’s an example of a sketchsheet, marred only by my attempt at artistic expression:

Example usage of the 960 frameworks 16-grid sketchsheet

Example usage of the 960 framework

16 columns was overkill, so I decided to fire up Illustrator and utilize 960’s Illustrator 12-column grid template as a background layer to help me lay out my page design. (960 comes with a range of templates catering to the most prominent graphics programs.)

Here’s the final design:

The Obscurantist Illustrator layout using a 960 template file as background layer

The Obscurantist Illustrator layout using a 960 template file as background layer

Mark It Up

The next step was converting my design to semantic and valid XHTML. This post is already long enough, so I won’t bore you with the details. Suffice it to say, I tried my best not to let presentational concerns influence my markup. By keeping things as semantic as possible, I set the stage for seeing how well Compass would facilitate leveraging 960’s layout structure in spite of the framework’s presentational class names. Feel free to pop open firebug and check out the The Obscurantist’s markup for yourself.

Stylin’ with Sass, 960 degrees o’ heat, straight sexified son!

The next step was to implement my 12-column grid layout in application.sass. As I had already designed The Obscurantist in Illustrator using the 960 grid template as a backdrop, coding up the grid was very straight forward. It turns out I can count to twelve, so I was in good shape. I’ve included the relevant aspects of application.sass below. Read it over, and below I’ll explain Compass’s 960 API in more detail.

@import compass/utilities/general/clearfix.sass
@import 960/grid.sass

/* ...omitted for brevity... */

#container
  +grid-container
  +clearfix

  .title
    +grid(12,12)

  .publication-info
    +grid(12,12)
    .volume
      +grid(2,12)

      +alpha
    .date
      +grid(8,12)
    .number
      +grid(2,12)

      +omega

   #article
    +grid(12,12)
    .body

      +grid(7,12)
      +alpha
    .captioned-photo
      +grid(5,12)

      +omega

  #sidebar
    +grid(12,12)
    img
      +grid(5,12)

      +alpha
    .body
      +grid(7,12)
      +omega

  #tagline

    +grid(12,12)
  • ‘+grid-container’ establishes the overall 960px wide centered layout
  • ‘+grid(m, n)’ assigns an element a width based on the number of columns(m) it should take up with respect to a number of total colums(n)

Keen readers will notice that while the 960 grid system supports only 12 and 16 column layouts, +grid(m,n) is a method call which supports any number of columns. That’s right, Compass provides a completely customizable 960 pixel wide layout. The various column widths are calculated when Sass generates your CSS. (More on this below.)

So what about this ominous sounding “Alpha” and “Omega” business? As it happens, the 960 framework defines a gutter of 20px, each neighboring element contributing a 10 pixel margin to the overall gutter. Therefore, there will be a 10 pixel margin on the left and right hand sides of the overall grid container, constituted by the left side of the first element in a row and the right side of the last element in a row. (Check out The Obscurantist in Firebug for a better understanding.)

But, what happens if you are nesting grid elements? In that case you don’t want the child to re-contribute 10 pixels of outside margin, as the parent element already took care of this. What do you do? Simply demarcate the left most nested element as the ‘Alpha’ and the right most nested element as the ‘Omega’. Doing so will remove the outside margins and your grid layout will remain locked in place.

One additional note, the container element has had a clearfix applied to it, so that it will expand to

contain its floated child elements. This allowed me to attach 960’s 12-column grid image as a background to ensure my layout exactly matched my mockup.

The end has come: Sexiness – attained. Coolness – attained. Craziness – Why not?

The end result – The Obscurantist. You can toggle the 12-column grid background using the button in the upper right-hand corner.

I’m sold. Compass successfully allowed to me attain my goal: overall clean, minimal, and semantic markup and a rigid adherence to an underlying grid-system.

Finally, the example site is up on github, feel free to peruse it if you need a more comprehensive view of the working parts.

$ git clone git://github.com/aaronsbrown/obscurantist.git

Final Thoughts and Takeaways

  • My background is in server-side software development and therefore the client-side space and its attendant technologies are relatively new to me. Before I experimented with Sass, I took it for granted that styling presentation via CSS was categorically a different process than developing software. But Sass directly counters my assumption. And even though I no longer directly write CSS when coding with Sass, its DSL makes me feel right at home when describing my presentational styles. Most importantly, Sass gives me the ability to bring my software engineering practices to bear in the presentational realm. I can’t help but think this is a big deal.However, I will say getting comfortable with “programmatic” CSS took a bit of mental re-orientation. I was used to having all my style definitions right in front of me, explicit and clear. Yet Sass, especially when coupled with Compass, introduces to the CSS space welcomed notions of abtraction, like modularity and encapsulation. As such, things are no longer directly in front of me. Rather, I have to approach coding CSS with the mindset of using libraries. So i have to fire up the docs (in this case the 960 plug-in Sass code), see what resources the library provides, and then determine the best use of those resources. Again, I go through this process daily when writing application code, but it felt a little awkward when first incorporating this practice in the CSS space. But once I began approaching coding my presentation layer like any other programming task, things immediately fell into place. Also, because the end product of the Sass work cycle is CSS, I had ready access to those files if I wanted want to see what was being sent to the client. And since I use Firebug as my main debugging tool, my approach to debugging the presentation layer didn’t have to change at all.
  • I think that for small personal and professional projects Sass and Compass will help streamline CSS development. The ability to modularize and re-use code is a big win in terms of best practices and efficiency. It can also help maintain consistency throughout the code base. I think the tool would even be useful in large-scale organizations where the developers share similar values and engineering practices, and whom are disciplined enough to learn and use the Sass/Compass libraries.I’m perhaps a bit more skeptical about the promise of Compass to distribute reusable CSS plug-ins throughout larger engineering ecosystems. While there are surely commonplace CSS problems, I think the idiosyncratic nature of website design will at some point outweigh the ability for large scale CSS reuse. But, I do hope I am wrong on this point, as I feel Compass’s aims and values are admirable. Time will tell.
  • There is one big concern I have with respect to using Compass to maintain semantics, and it concerns optimization. The Sass ‘mixin’ model basically inlines style attributes (from, for example, 960) into your own custom CSS. The (potential) downside of this is lots of duplicated CSS rules in Sass’s generated end product. How might this model impact the file size of my custom CSS? And how to weigh this increase in file size against the benefits Sass and Compass bring to the development side of things? Are we sacrificing consumer performance for producer best practices? I don’t have an answer to this question. If anyone out there can speak to this issue, I’d love to hear your thoughts.If I have time, I would like to implement The Obscurantist with only the 960 framework, sans Compass, and compare the resulting CSS. I’ll just have to stomach presentation class names in my markup for the sake of enlightenment.
  • Given the programmatic nature of Sass, the Compass port of the 960 framework is extremely customizable. In effect,you get an API to generate a grid of N columns, each separated by a configurable gutter, that all together span 960 pixels. For example, let’s say you want to create a layout that is 960 px wide and comprises 5 columns separated by 10 pixel gutters. It’s pretty easy:
    @import 960/grid.sass
    
    !ninesixty_gutter_width = 10px
    
    #container
      +grid-container
      #main-content
        +grid(4,5)
    
      #nav
        +grid(1,5)

    I encourage you to dig into the 960 plug-in’s Sass files to see what other things you can tweak.

  • More generally, there seems to be a growing number of Compass modules available. Some modules come installed with Compass, while others are available as plug-ins. Therefore, you can pick and choose from various CSS frameworks as the need arises. Say you love 960’s approach to grid layouts but you prefer Blueprint’s typographic standards. Well, Compass allows you to selectively incorporate mixins from both frameworks. And since you don’t have to rely on the frameworks’ class definitions you remain in full control of your semantics.
  • And finally, a few words about the 960 CSS framework. I’ll be honest, when all was said and done, I thought – “All this for some width and margin definitions? I could have come up with that on my own with not much effort. It all seems pretty simple.” But part of me thinks such a reaction reflects, perhaps ironically, rather well on a framework. 960 does one thing-it helps you execute a grid layout rapidly, easily, and with little preparation. It doesn’t get in your way and simply optimizes and enhances your work-flow. And while it makes grid layouts seem intuitive and transparent, I’m quite sure there are subtleties hidden away that I’m not taking into account with my cursory ascription of, “That seems pretty simple.” So I’m perfectly happy leveraging the hard work of people who have spent more time focusing on grid layouts and spending my time concentrating on other aspects of my project.Also, and perhaps most importantly for me, the 960 framework sports the following tagline: “Sketch, Design, Code.” As I hope this article has demonstrated, I was able to utilize 960’s resources starting with the brainstorming phase (via sketchseets), during the design phase (via grid templates), and finally throughout the implementation phase (via the grid template background images and the Compass plug-in). In short, 960 provides helpful resources that can, and I would argue should, be used from project inception to project end.

In summary, if you want to leverage CSS frameworks while maintaining the semantic purity of your markup, take a moment to check out Compass. I think you’ll find it opens up a great new space of possibility.

Resources:

Crash course in learning theory

  • All Categories
  • 3 Tags
  • With Excerpt
  • Images Linked from Other Site

Original Post: http://headrush.typepad.com/creating_passionate_users/2006/01/crash_course_in.html

One formula (of many) for a successful blog is to create a “learning blog”. A blog that shares what you know, to help others. Even–or especially–if that means giving away your “secrets”. Teaching people to do what you do is one of the best ways we know to grow an audience–an audience of users you want to help.

It’s what I try to do here because–let’s face it–you’re just not that into me ; ) But I assume (since you’re reading this blog) that you ARE into helping your users kick ass. So to make content that’s worth your time and attention, I try to make this a learning blog. I reckon y’all could not care less what I had for dinner, who I ate with, or what I think about the latest headlines.

So, as promised in an earlier post, here’s a crash course on some of our favorite learning techniques gleaned from cognitive science, learning theory, neuroscience, psychology, and entertainment (including game design). Much of it is based around courses I designed and taught at UCLA Extension’s New Media/Entertainment Studies department. This is the long version, and my next post will be just the bullet points with the pictures–as a kind of quick visual summary.

This is not a comprehensive look at the state of learning theory today, but it does include almost everything we think about in creating our books. And although it’s geared toward blogs/writing virtually everything in here applies regardless of how you deliver the learning–you can easily adapt it to prentations, user documentation, or classroom learning. And remember, this is a BLOG, so don’t expect academic rigor ; ) but I do have references, so leave a comment if there’s something in particular you want.


Crash Course in Learning Theory

The long version…
• Talk to the brain first, mind second.Brain_3
Even if a learner is personally motivated to learn a topic, if the learning content itself isn’t motivating, the learner’s brain will do everything possible to look for something more interesting. This applies to both getting and keeping attention, as well as memory. Remember, you can’t do anything until you get past the brain’s crap filter! And to the brain, a dry, dull, academic explanation is definitely CRAP (regardless of how much your mind cares about the topic).
Learning is not a one-way “push” model.
Learningnotoneway
Learners are not “empty vessels” waiting to be filled with content pushed into it by an expert, blogger, author, etc. Learning is something that happens between the learner’s ears–it’s a form of co-creation between the learner and the learning experience. You can’t create new pathways in someone’s head… your job is to create an environment where the chances of the learner “getting it” in the way that you intend are as high as possible.

• Provide a meaningful benefit for each topic, in the form of “why you should care about this” scenario.
Learning is much more effective if the learner’s brain knows why what you’re about to talk about matters. The benefit and/or reason why you should learn something needs to come before the actual content. Otherwise, the learner’s brain gets to the end of what you’re telling them and says, “Oh, NOW you tell me. If you’d said that earlier, I would have paid more attention…” This process of not-paying-attention is not completely within the learner’s conscious control so, like I said, even if the person is motivated to learn this thing, their brain can still tune out during specific parts that don’t start with a compelling benefit.

To find a “meaningful benefit”, play the “Why? Who Cares? So What?” game with someone else. Describe the thing you’re trying to explain, to which the other person asks, “Why?” Provide an answer, to which the person then asks, “Who cares?”. Provide an answer, to which the person asks, “So?” At this point, when you’re nearly ready to kill them for not getting it, you probably have the thing you should have said instead of whatever you said first (and second). The most compelling and motivating reason/benefit is almost always the thing you say only after you’ve answered at least three “Yeah, but WHY do I care?” questions.
• Use visuals!
Picturesandwordschart
We are all visual creatures, and the brian can process visual information far more efficiently than words. These pictures can come in many forms:
* Info graphic or diagram
* Visual metaphor
* Picture of the thing being described, with annotations
* Picture of the end state
* Picture designed to create attention and recall
• Use redundancy to increase understanding and retention.
Redundancy
Redundancy doesn’t mean repetition–it means “say the same thing again, but differently.” And “differently” can mean:
* From a different perspective.
* Using a different information channel (channels include things like Graphics, Examples, Prose explanations, step-by-step instruction/tutorial, case studies, exercises, summaries, bullet points, commentary, devil’s advocate, Q & A, personal POV, etc.)

Also, the more senses you engage, the greater the potential for retention and recall. Even having a bowl of just-popped popcorn or the smell of freshly-baked cookies while learning, can make a difference. Bummer about web-delivered content, though…

Being terse is good for a reference document, but deadly in learning content. The best learning experience considers the way you’d learn that particular thing in real life — but offers it in a safe, simulated, compressed form. Real-life learning is never terse; it’s choas and confusion punctuated with moments of insight (”Ah-ha!”) and clarity. It’s a wave, not a straight line. A learning blog, book, or classroom shouldn’t try to straighten it out!
• Maintain interest with variety and surprise.
Surpriselearning_1
• Use conversational language.
Conversationalwords
The brain pays more attention when it thinks it’s in a conversation and must “hold up its end.” And there’s evidence that suggests your brain behaves this way even if the “conversation” is between a human (you) and a book or computer screen (or lecture).
• Use mistakes, failures, and counter-intuitive WTF?
Wtfgirl
People usually learn much more from failures than from being shown everything working correctly or as expected.
The most memorable learning experiences are usually those where things are going along fine, making sense, etc. when you suddenly slam into something that goes terribly wrong. Describing the things that do NOT work is often more effective than showing how things DO work. (We call this the “WTF learning principle”).

But showing is even better than describing. And even better than showing is letting the learner experience. Take the learner down a garden path where everything makes perfect sense until it explodes. They are far more likely to remember than if you simply say, “Oh, and be sure you do it such and such a way.”

It’s tempting to want to protect the learners from the bumps and scrapes experienced in the real world, but in many cases (with many topics) you aren’t doing the learner any favors.
• Use the filmaker (and novelist) principle of SHOW-don’t-TELL.
Rather than lecture about the details of how something works, let them experience how it works by walking them through a story or scenario, where they can feel the bumps along the way.
• Use “chunking” to reduce cognitive overhead.
Remember, we have very little short-term memory (RAM) in our heads. The standard rule is that we can hold roughly 7 things before we must either commit some of it to long-term storage or toss it out to take in something new. And the things you hold in short-term memory vanish as soon as there is an interruption. You look up a phone number, and as long as you repeat it to yourself and nobody asks you a question, you can remember it–usually just long enough to dial the number. By the time you finish talking to the person on the other end of the line, the number is long gone.

Chunking takes fine-grained data/facts/knowledge and puts them into meaningful or at least memorable chunks to help reduce the number of things you have to hold in short-term memory, and increase the chance of retention and recall. For example, imagine you were asked to take 30 seconds to memorize the following “code symbols” for the numbers 1-10:

Chunkingbad
you’d be lucky to get 60% correct in a follow-up quiz given immediately after those 30 seconds. There are simply too many symbols to memorize in such a short time, and there’s no instantly obvious way to relate them to one another.

But… with one simple change to the way in which the symbols are presented–and without changing the symbols:
Chunkinggood

30 seconds gets most people to 100% accuracy in the follow-up quiz. In other words, by grouping the symbols into a meaningful, memorable pattern, we reduce the number of individual (and potentially arbitrary) things you have to memorize, and increase the chances.
Relax
• Since stress/anxiety can reduce focus and memory, do everything possible to make the learner feel relaxed and confident.
That does not mean dumbing-down the material, but rather letting the learner know that — “This IS confusing — so don’t worry if it’s still a little fuzzy at this point. It will start to come together once you’ve worked through the rest of the examples.” In other words, let them know that they aren’t stupid for not getting it at this point. For especially difficult and complex topics, let the learner know where they should be at each stage, and help them decide whether they need to go back and repeat something. Make sure they know that this repetition is part of the normal learning process, not something they must do because they failed.

If you’re worried about being patronizing, then don’t patronize. Just be honest about what it takes for people to learn that content. But you can’t do that unless you know how hard it is for a beginner to learn it. As experts, we have a tough time remembering what it was like NOT TO KNOW, so if you’re not sure, do the research. One of the best ways to find out what newcomers struggle with is to visit online discussion forums for beginners in your topic. This is also a great way to come up with a table-of-contents or topic list, because what you THINK should be a no-brainer might be the one thing everyone gets stuck on, and what you think would be confusing could turn out to be easy for most people.

The point is, YOU are not necessarily the best judge of how your audience will learn the topic. And empathy rarely helps — you cannot truly put yourself in someone else’s shoes unless their brain and background are a very close match for yours. You have to find out what your learners are struggling with, and suspend any judgement about “This should be a no-brainer.”

Those who have taught a topic have a big advantage writing about it–they’ve fielded the questions and watched people struggle. They know how things should be “weighted” according to how difficult they are. But you can learn almost as much simply by lurking on beginner discussion forums (or attending user group sessions for newbies).
• Use seduction, charm, mystery to build curiosity.
Seductioncuriosity
We’re hard-wired to pay attention and pursue things we’re attracted to. This isn’t about selling them on an idea–it’s about helping them stay engaged and learning. Knowing what–and when–to withold is one of the most powerful tools you have. If you’re writing reference material (like this post), witholding will just piss people off. But in a learning experience, you want a page-turner. And don’t even think about suggesting that “page-turner” doesn’t apply to, say, technical material. If the purpose is learning, the learner has to stay engaged. It’s up to you to craft an experience that keeps them hooked. This engagement might be within a single post, or you might offer little cliffhangers or teasers to keep them engaged across multiple posts, if that’s what it takes to cover a topic.
• Use a spiral model to keep users engaged.
Spiralexperiencemodel_2
Game developers know the importance of “The Next Level”, and learning experiences must do the same. Each iteration through the spiral should start with a meaningful, motivating goal, followed by the interaction/activity/reading that moves you toward that goal, followed by a meaningful payoff. Ideally, the “meaningful payoff” leads right into the next motivating goal.

For example, in a game the payoff for completing a level might be “You Get A New Weapon”. But now that you have that new weapon, here’s the cool new thing you can do that you couldn’t do before. Learning doesn’t need to be any different. “Imagine you want to do X on your website…” is the goal that starts the topic, but when the topic is complete, the learning content can say, “Now that you have THAT new [superpower capability], wouldn’t it be cool if you could do Y?” And off they go into the next round of learning.
Nextlevel_1
• Don’t rob the learner of the opportunity to think!
Opportunitytothink
Rather than simply spelling everything out step by step, ask questions, pose multiple and potentially conflicting viewpoints, show the topic from different perspectives, and set up scenarios (and possibly exercises) that allow the learner to use deeper brain processing. Things that encourage deeper thinking are those that cause the learner to categorize, organize, apply, infer, evaluate, etc. Don’t be afraid to pose questions that you don’t answer right away.

Think back to those teachers you had who would ask a question then immediately answer it, as opposed to those who would answer a question then just sit there… waiting…
• Use the 80/20 principle to reduce cognitive overload.
8020chartsmall
It’s far more important that they nail the key things than be exposed to everything. Be brutal, be brave, be relentless in what you leave out. Knowing what NOT to include is more important in learning design than knowing what TO include.
• Context matters.
Try to place facts, concepts, procedures, examples in a bigger context. Even if you’ve already discussed the context, don’t be afraid to repeat that context again. For example, instead of always showing code snippets, show the code within the larger context of where it usually appears. Highlight the code you’re focused on by bolding it, putting it in a box, etc., so that the learner is not overwhelmed by the amount of code, and can focus on just the part you’re talking about, but still be able to see how that new code relates to the rest of the code. Our rule of thumb in our books is to show the same code context two or three times before switching to just the snippets (although this rule varies greatly with the type of code).
• Emotion matters!
Shockedface
People learn and remember that which they FEEL. Look back at what you’ve written and if it’s dry and lifeless, try to inject some energy. Dry, academic, formal, lecture-style writing is usually the WORST form of learning content.

One of the many ways to help tap into emotions (and increase attention and memory) is to use the brain’s reaction to faces. Almost any kind of face with a strong expression evokes a part of the brain reserved just for processing faces. The ability to accurately recognize faces and read facial expressions is a key element of survival for the brain…
Facesmad
Babypicface
• Never underestimate the power of FUN to keep people engaged.
Havingfun
The act of having fun is also an emotion, so anything associated with fun has a greater chance of being remembered.
• Use stories.
Humans have been learning from stories for, well, a really really really long time. Millenia longer than we’ve been learning from lectures on just the data and information. When we say “stories”, we don’t necessarily mean actual fictional “John’s network went down just as he was plugging in the…”, although those do work. But a “story” can simply mean that you’re asking the learner to imagine herself wanting to do a particular thing, and then offering an experience of what that would be like if she were actually trying to accomplish it, with all the ups, downs, false leads, etc. (but again, with less of the actual pain she might experience in real life). A flight simulator, for example, is a kind of story.You aren’t just up there learning the controls; you’re actually flying in a particular storyline.

If you’re a software developer, another way to think about story-driven learning is to map use-cases to learning stories. Base your learning content around individual use-cases, and put the learner in the center of the use-case. One easy trick for designing story-driven learning is to start each topic with something like, “Imagine you want to do…” and then walk though that experience. It makes the learning organic and real, and helps make sure you get rid of the stuff that doesn’t need to be there. If it doesn’t show up in a use-case/story, are you so sure you should be teaching it?
• Use pacing and vary the parts of the brain you’re exercising.
Timingandpacing
Learning–and especially memorization–doesn’t happen at an even pace. Brains–or especially parts of brains–get tired and lose focus. By varying the pace–and type–of learning content, you give a user’s brain the chance to let one part rest while the other part takes over. For example, follow a heavy left-brain technical procedure with a big-picture example/story that covers the same topic. This helps the learner’s memory in two different ways–the redundancy means two different chances to save the information, and the fact that you gave one part of the brain a break while shifting to a different part keeps their brain working longer without fatigue.

Think about it–if you hopped up and down on your right foot repeatedly, that right leg would give up after fewer repetitions than if you kept switching from right to left. Pacing–by frequently switching which parts of your body (or in this case, brain) you’re using–lets you stay fresher for a longer period.

Also, recording something to long-term memory is rarely instant (although the stronger the associated emotion, the faster (and more likely) your brain is to record it). Memory is a physical/chemical process that happens after you’ve been exposed to something, and if anything interrupts the process, the memory is not stored. That’s why people with serious head injuries often cannot remember what took place just prior to the injury–the process of recording those things to long-term memory was stopped.

If you want someone to remember something, you must give them a chance to process that memory. Relentlessly presenting new, tough information (like tons of code and complex concepts) without also including chances to reflect, process, think, apply, review, etc. virtually guarantees that much of the learning will be forgotten.
• Remember, it’s never about you. It’s about how the learner feels about himself as a result of the learning experience.
Notaboutyou
Don’t use learning content as a chance to show off your knowledge–that virtually guarantees your content won’t be user-friendly. Use it as a chance to help someone’s life a little.
A successful learning blog is about helping the readers learn and grown and kick ass! Make that happen, and your stats will take care of themselves. In contrast, the best way to ensure a low readership is to assume that readers are into you. Offering users nothing but your opinions, however well-reasoned, might not be enough to make it worth their scarce time and attention.

“If you teach it, they will come.”

Wordpress.TV

  • No Category
  • 1 Tag
  • No Comments or Trackbacks
  • Embedded Video

Original Post: http://blog.wordpress.tv/2009/01/16/welcome-to-wordpresstv/

Our goal with WordPress.tv is simple:

To make it easy for you to find up-to-date, WordPress-themed video content within a couple of clicks. Without having to wade through spammy promotional videos, out-of-date content, and missing chunks of presentations. There’s a quick intro video if you’re curious:



To kick off with, there are basically two flavors of content on offer:

How To video training

If you want to learn how to use WordPress, how to do cool stuff with it, how to push it to the bloody edge of reason – we’re building an exponentially growing library of video training content. You’ll find the beginnings of that in the How-To section of the site. There’s a lot more to come, both WordPress.com and WordPress.org side, but it’s happening, and fast.

WordCamp to your door

If you’re interested in catching up on presentations, slides, interviews and behind-the-scenes mayhem from the WordCamps springing up all over the globe, we have WordCampTV for you. The idea here is that even if you can’t get to the real thing (and even if you can), you can still get a good idea of what went on there.

Now and next

WordPress.tv is just getting started. As of today you’ll find a whole bunch of tutorials with a focus on the basics, alongside some choice presentations from last year’s WordCamps.

In the coming weeks and months you can expect to see a lot more content – we’re actively seeking out WordCamp footage, and there are already a huge amount of screencast tutorials in production and post. If the focus with our launch content has been on the basics, don’t let that put you off if you have more advanced needs – those *will* be catered to soon.

We’d love to know the type of thing that you’d like to see and hope you’ll leave some feedback in the comments here. If you know of video captured at your local WordCamp or have found a really useful, up-to-date tutorials – we’re all ears.

It’s all about you

Above everything the idea here is to produce and curate top-notch content that makes it easier for you to get things done with WordPress, and keep abreast with the latest stuff going on with the platform – whether you’re a WordPress.com user, or run your own WordPress.org installation.

WordPress is all about the community, and as WordPress.tv evolves, we hope you’ll play an active part in shaping its direction and content. With that in mind, expect to see screencasting and video-making tutorials in the WordPress.tv blog, along with an ongoing discussion about what you want to see, and how you want to see it.

Follow the latest releases, give us feedback, tip us off

If you’d like to keep up to date on the latest content added to WordPress.tv, consider subscribing to the blog. If you come across some nice screencasts, videos or WordCamp presentation slides or presentations, let us know via the handy dandy contact form. Or if Twitter floats your boat, follow the action over there.

We’re looking forward to hearing your ideas. Until then – happy viewing!

Building Better Template Documentation

  • 2 Tags
  • 3 Categories

by Jarel Remick

Original Post: http://blog.themeforest.net/site-news/building-better-template-documentation/

Since I’ve started reviewing templates, I’ve seen non-existent template documentation up to screen-cast tutorials covering much more than required. In the long run, a more thorough documentation will save you time.

Building on the Help File Template by Jeffrey, I’ve put together an HTML version to step it up a notch.

The Help File Template

Back in October, Jeffrey put together a basic help file text document to serve as a template for Theme Forest authors. I see it used all the time which is great because it’s simple and functional. More and more frequently however, I see authors using new types of documentation that really add extra value and sometimes functionality for buyers.

So, having seen lots of great documentation files, I thought I would put together a basic HTML/CSS documentation template for our authors to start with.

The New Help File Template

I went with an HTML/CSS format because it can be viewed by anyone with a browser (PDF’s and Videos might require extra software for the buyer to view), it offers additional functionality to make navigating and reading the information easier and authors can more easily demonstrate template features and how to’s.

The template uses the Blueprint CSS framework and keeps to Jeffrey’s original help file structure.

What To Do

One of the most common reasons template submissions are rejected is for inadequate documentation. If you use this template and only change a few things, it won’t be enough.

  • Expand upon the sections listed with appropriate information.
  • Provide code examples.
  • Include source file links (for files like jQuery plugins).
  • Provide image examples.
  • Cover the general structure of the HTML and CSS files.

Remember that your template documentation is supposed to provide information on your work, the features you’ve included and anything out of the ordinary that a buyer might need to know. Feel free to customize the template to look prettier but remember to keep it simple and clean, it is a document for help and information.

What Not To Do

As Jeffrey said in the first version, you aren’t writing a novel. Your job isn’t to teach buyers how to code, script or design. If you don’t use this template, stick with Jeffrey’s text file or use a common format such as PDF. Don’t use .doc, .docx or other proprietary file formats.

Download