nik codes

Archive for the category “Uncategorized”

Developer Arcade

During the holiday season I find myself reflecting over the previous year and celebrating various traditions with family and friends alike.

One of my fondest Christmas memories was back in ‘96 when my brother and I got a Nintendo 64. I remember the two of us playing Wave Race 64 together in his room all night long.

Because of this memory I tend to think about video games, which I don’t typically play, in the lead up to Christmas. I often have a desire to unwind playing them, just a little bit, in an attempt to relive those simpler days.

arcade

So this year, I began looking for games that I could play without any guilt. I looked for games that would make me a better software developer, and I found a ton! So if you find yourself bored for a few hours over the holiday break, why not try one of these games out and improve your skills?

Txt Based Games

  • Typing.io: Improve your touch typing skills with this simple little game made specifically for programmers who have to type a lot more curly braces and angle brackets than the standard Mavis Beacon player.
  • VIM Adventures: Keep your fingers moving in this Zelda-like overhead scroller. You’ll need to learn VIM commands, motions and operators to control your character to victory.
  • Terminus: Learn to navigate your way around the Unix shell with common commands in this Zork like text adventure.

Design Eye

  • What The Color?: How well do you understand the #hex, rbg() and hsl() color space used in CSS? This game from Lea Verou times how long it takes for you to guess a particular color. Hint: HSL is much easier to navigate once you get used to it!
  • RGB Challenge: Basically What The Color in reverse. You are given an RGB value and three colors to choose from. Selecting the proper color is more difficult that it should be. My high score is 7.
  • What px?: Very similar to What The Color, What px? challenges you with CSS length units by guessing the width of various elements.
  • Pixact.ly: Another CSS lengths game, Pixact.ly asks you to draw boxes of various sizes.
  • The Bezier Game: Learn how to use the Pen tool, common in SVG/vector editing software, in this advanced connect-the-dots style game.
  • Hex Invaders: (Added June 11, 15) A “more fun” version of RGB Challenge with gameplay mechanics similar to Space Invaders.

Web Development

  • HTML5 Element Quiz: Quite possibly my favorite of the games, this quiz challenges you to name as many HTML5 elements as you can in five minutes. As a life long web dev, I was surprised how many I wasn’t able to remember – but even better, I learned about many new ones I’ve never used before.
  • CSS Diner: I’m also a big fan of this game. CSS Diner teaches you CSS3 query selector syntax by graphically having you select items from a bento box that have been arranged on a dining room table.
  • XSS: Learn to think like a hacker with this security game from Google. In each level you are presented with an increasing “secure” web page, as well as tips to figure out how to exploit the page with some cross site scripting. This game is really eye opening!
  • Flexbox Froggy: This fun little game teaches you the ins and outs of the CSS layout system called Flexbox by challenging you to re-layout a screen so that a frog sits on his lilly pad.

Languages

  • CodeCombat: A very complete video game, with music, sound effects, animations and graphical styling’s, CodeCombat will teach you Python, JavaScript, CoffeeScript, Clojure or Lua by getting you to write simple little programs that lead your character through each level. Think of it as Logo with modern day bells and whistles. This one seems perfect for the kids in your life.
  • Regex Golf: Presented with both a whitelist and a blacklist of strings, can you write an expression that matches all of the whitelist, and none of the blacklist? Each level teaches you a little bit more about Regex operators.
  • Learn Some SQL: Created by a few co-workers of mine at Red Gate, Learn Some SQL shows you a table of data and you have to write the SQL statement that would select the same dataset.
  • Elevator Saga: Put your algorithm skills to the test by programming a bank of elevators to be as efficient as possible.

Miscellaneous

  • Learn Git Branching: Very similar in style to Learn Some SQL, this game shows you a diagram of a Git repository, and you have to branch, merge, rebase and commit your repository into the matching shape. I’ve shown this game to people learning Git and it really helped them.

I hope you enjoy one or two of these games as well as your holiday time. Post your high scores in the comments below – along with any games that are missing from the list.

Happy Holidays!

Semantic Markdown

markdown

Markdown, the lite, little, plain-text markup language that could just keeps growing and growing.

It’s heavily leveraged by two of the most prominent developer communities on the internet, GitHub and StackOverflow, and is supported on more sites everyday. To be honest, I quite frequently find myself accidentally typing Markdown into Gmail because I’ve just grown so accustomed to it. Markdown has several good browser based editors (like Markable.in and Dillinger.io) as well as fantastic desktop editors for Windows (MarkdownPad) and OSX (Mou) as well we parsing libraries for every programming platform on the planet. Markdown is almost nine years old now and at this point I think it’s safe to say that it has become ubiquitous in the information technology space. What’s particularly interesting to me, and what this post it about, is the similarities in growth patterns between Markdown and the heavy weight champion of rich text markup; HTML.

During the late 90’s browser wars, vendors “embraced and extended” HTML in all kinds of crazy ways. (Remember the <blink> and <marquee> tags?) Likewise, Markdown is “embraced and extended” in the form of “flavors”, the most famous of which is GitHub’s flavored Markdown. GitHub has extended the language with all sorts of auto-hyperlinking syntactic sugar, syntax highlighted code and to-do lists complete with checkbox status indicators. The Markdown Extra project adds the ability to create tables, definition lists, footnotes and abbreviations. MultiMarkdown includes bibliographical style citations, support for mathematic equations, and “critic markup” similar to how you’d see an editor review a document. Aaron Parecki has enhanced Markdown to support user defined macros and binding to YAML data sets and there are several other flavors roaming around out there (which mostly do less interesting things).

Here’s some examples of Markdown flavors:

GITHUB FLAVOR
=============

## syntax highlighted code
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

## to-do list
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item

MARKDOWN EXTRA FLAVOR
=====================

## table
| Item      | Value |
| --------- | -----:|
| Computer  | $1600 |
| Phone     |   $12 |
| Pipe      |    $1 |

## definition list
Apple
:   Pomaceous fruit of plants of the genus Malus in 
    the family Rosaceae.
Orange
:   The fruit of an evergreen tree of the genus Citrus.

## footnote
That's some text with a footnote.[^1]
[^1]: And that's the footnote.

MULTIMARKDOWN FLAVOR
====================

## citation
Let's cite a fake book.[p. 42][#fake]
[#fake]: John Doe. *A Totally Fake Book*. Vanity Press, 2006. 

## review
Strike out a {--word--}.
Insert a {++word++}.
Replace a {~~word~>with another~~}.
Highlight a {==word==}.
Comment on something.{>>This is a comment<<}.

AARON PARECKI FLAVOR
====================

## yaml binding
---
title: Semantic Markdown
author: {first: Nik, last: Molnar}
description: some yaml content
---
This post, '#{title}', is by #{author.first}...

## macro
![:vimeo 600x400](13697303)
![:youtube 600x400](G-M7ECt3-zY)
![:github](nikmd23/ossperks)

Of course, just like HTML, the deviations from “the Markdown standard” have some people concerned. Jeff Atwood posted a call to action to see Markdown standardized and the W3C Markdown Community Group has produced a set of standard Markdown tests to test parsers with. We’ll all have to wait and see what shakes out of the debates moving forward.

The really exciting, somewhat recent, advancement in this space is the rise of what I’m calling Semantic Markdown. Semantic Markdown, like semantic HTML, is just standard (or flavor enhanced) Markdown that is structured in such a way to make it machine readable.

I’ve been thinking about this technique for several months now since it is the cornerstone of Semantic Release Notes, a specialized format for writing software release notes that Anthony and I have been working on in our spare time. The idea is simple, a user writes Markdown formatted in such a way that our parser can understand what new features, breaking changes and bugs were addressed in a given release of a piece of software.

Turns out, we’re not the only ones who have had this idea!

API Blueprint uses Semantic Markdown to document REST and web API’s. The input Semantic Markdown can be automatically turned into an interactive documentation website, test suites, mocks and more. The creators of API Blueprint even have tools that help developers generate Markdown from cURL trace output.

With much less focus on developers, Memofon uses Semantic Markdown to generate interactive, shareable mind maps. For example this Markdown:

MEMOFON
=======

- _italic_
- **bold**
- [links](http://google.com)
 - images
	![](/images/doc/grasshopper.png)
- blockquote
  > The question is, whether you can make
  >> words mean so many different things.
- code
    var test = function test() {
      return this.isTest();
    };

produces this mind map:

mindmap

which is extremely cool!

Finally, Fountain, a Semantic Markdown based screenplay authoring format that provides for things like characters, scenes and dialog is rendered out in the standard screenplay format. This can be seen in the Fountain and PDF versions of the screenplay for the 2003 movie Big Fish.

I really like the idea of Semantic Markdown and am glad to see it beginning to gain traction. Of course it’s easy to write, requires no special tooling and is human readable – but all those benefits come directly from Markdown itself. It’s also easy to parse out domain specific semantics once the Markdown has been parsed into HTML because libraries like CsQuery and HTML Agility Pack make it easy to navigate HTML with CSS selectors and XPath expressions, at least more approachable than dealing with abstract syntax trees yourself.

So take a spin with these Semantic Markdown tools and continue to expand the possible uses of Markdown!

All the Small Things – The Restroom

Last time I talked about ways to increase your learning in the car. Today I will cover some vary nifty ways to digest information when you can’t have podcasts playing.

My nifty way? Reading!  I know that’s not really that nifty, but there is some technology to help you out.

First of all, if you downloaded FeedDemon as I suggested previously – start adding blogs to it.  The next highly useful step it to sign up for a NewsGator account.

FeedDemon and NewsGator will sync up what you have and haven’t read – so when you are at your desk you can use the nice responsive interface of FeedDemon to read articles, and when you are away from your desk you can log into NewsGator and use their online interface.  NewsGator even has a mobile version of the site for reading from your cell phone.  It’s very analogous to using Outlook to check your gmail account over IMAP.

I realize I’ve yet to talk about the restroom in this post, and I know how your all eagerly anticipating my mention of it: well here it goes.

Unfortunately for me I really only get a chance to read in the restroom.  This leaves me without a screen to read on.  Sure I won’t lie and say I’ve never taken my laptop in with me, but for the most part I try not to do that.  I definitely can’t do that at work.

This is where FeedJournal comes in handy for me.  FeedJournal is a blog aggregator which puts all your new articles into a multi-column newspaper view, and generates a PDF file for you to print out. 

feedJournal

FeedJournal includes images used in the posts and everything.  It really is a great experience.  Now when I know I will be “away for a little while” I can quickly print my queue of articles to read and away I go.  I fold up the printout and put it in my pocket – nobody even knows what is going on.

To make the experience a tad nicer, check out BookletCreator.  BookletCreator is a simple service that takes any PDF and converts it into a book that can be simply folded in half.  By default the pages sizes are 17 x 11, but your can tell you new PDF to resize it to 11 x 8.5.

bookletCreator

I run my FeedJournal PDF through BookletCreator and print that out.  Just fold your personalized newspaper in half and your good to go. 

I printed out Coding Horror and it really did feel like Jeff Atwood in the Wall Street Journal or New York Times.

Also, just to let you know, this tip can come in handy in many other places.  Print out a few pages before a doctors appointment so you don’t have to read those old issues of Golf Digest.  A few more pages can get your through a plane flight.

All the Small Things – The Car

Sometimes people ask me how I stay up to date with all the “goings-on” of the development world.

I have a simple trick to stay on top of the deluge of information coming from the community: use the small, inefficient parts of your day to catch up.stopSign

I have found a few different times to inject with some learning: driving, mowing the lawn, exercising and, as much as I’d like not to bring it up, using the restroom.

Today I will focus on how I maximize my time in the car.

Basically I burn a few CD’s every weekend of the podcasts I like to listen to and listen to them as I drive.  (I really wish my car had an auxiliary port – but that’s another topic.)  I’m in my car a good hour a day just driving to and from work and running the miscellaneous errands I have.  Listening to the podcasts actually makes traffic less of a pain.

If you’re unsure what podcasts are good, here’s my developer oriented recommendations:

  1. zune Dot Net Rocks (Pwop Productions) – Obviously this podcast covers .Net and Microsoft related technologies.  It has the best production value I’ve heard out of a podcast and they record two shows a week!
  2. HanselMinutes (Pwop Productions) – Microsoft employee Scott Hanselman is a beast!  This man just oozes information.  He covers all different topics and his employer does not affect his opinion.  This is my “if you only listen to one” podcast.
  3. Run As Radio (Pwop Productions) – At my work I am constantly surrounded by IT Pros.  This show helps me keep up to date with what’s new in their world and helps me understand how to make their lives easier.  Sometimes it even gives me an edge over them!
  4. Security Now (TWIT Network) – Security guru Steve Gibson and ex Screen Savers host Leo Laporte discuss what’s new in the world of computer security.  Very interestingipod stuff!
  5. Windows Weekly (TWIT Network) – Leo Laporte again discussing the world of Windows and Microsoft with Paul Thurrot.  There is also a version of this show for the Apple faithful – Mac Break Weekly.
  6. Diggnation (Revision3) – This is the Wayne’s World of the internet.  Two guys on their couch talking about what hot on the web.  They are very funny, but can be NSFW sometimes.
  7. The GigaOm Show (Revision3) – Om Malik interviews the luminaries of Silicon Valley.   It’s neat to hear what is going on in that space.

I’ve found that the easiest way to manage my CD burning is to use FeedDemon.  It will automatically download any podcast you add to it, and once the podcast has finished downloading it will add it to a playlist of your choice.  (Windows Media Player and ITunes are both supported.)

This works out really well for me because I have a playlist of all my new podcasts in WMP, which I drag to the burn pane and away it goes!  No mess, no fuss.

Stay tuned to this blog for more info on how I maximize my time in the restroom!

Post Navigation