Brian Finck

[brianfinck]

Roughing it. #pnwonderland #camping #upperleftusa #ivegotthemwildernessskills #cookingwithfire (at Tinkham Campground)

[brianfinck]

#washingtonferry #bainbridgeferry (at Seattle, Washington)

[brianfinck]

#maui #hawaii #beachlife (at Kihei Bay - Maui, Hawaii)

[brianfinck]

First! (at Kahului Airport)

[brianfinck]

#sounders

[brianfinck]

#snowhike #mountains #heatherlake #northcascades (at Heather Lake, Wa)

[brianfinck]

#snow #snowriver (at Sleeping Lady Mountain Resort)

[brianfinck]

#merychristmas (at Stanwood, Washington)

[brianfinck]

Back in Seattle.

[brianfinck]

Node.js Debug

How to debug with node inspector! Step one: Do test driven development so you don’t have to. Ok, just kidding. Here is step one...Install node inspector from the command line using sudo npm install -g node-inspector.

The command to open your app is node-debug “app.js”. This will open a new chrome window and it will console log the local address of the debugging server.

And you are ready to go! Navigate your browser to that local address and the debugging window will be ready for you.

On the right you have all your scoped variables and call stack. You can also call expression to be watched in the top window. Something useful is you can live edit just like you can on a front end website and save to the file but this is not enabled by default in the configurations file. What I found very helpful is by clicking in the call stack you can restart current function instead of rebooting your program.

[brianfinck]

Brief example of breaking up css

How to modularize a giant glob of css into small globs of sass...First you want to sit back and look for patterns in your code and visual patterns in your comp. Think about the document object model and how the page flows from mobile to desktop. Example below:

Many elements in your document are going to repeat across the page and repeat within the page widgets. Notice all the the headings circled in blue. They are all the same with slight changes in font size. An easy solution for this would be to make a @mixin.

$background-color: #FFFFFF; $service-heading: 700; $heading-margin: 5%; $heading-width: 100%;

@mixin headings($width) {

width: $width; }

.block {

@include headings($width: 100px);

}

What is good about the mixin above is you can now break up your fonts, colors and sizing convention into one file that makes up your theming and applies a relevant naming convention to them. Your function is reusable and is not specific to a particular dom element. Now you can make a new file that will contain your specific DOM content by calling @include and passing your variables or any other arguments.

Do not break up your code based on single views!

[brianfinck]

#farmdog #chroniclesofollie #morningsongfarm #goldenretriever (at Stanwood, Washington)

[brianfinck]

Code Fellows Week One

My first week at code fellows. We discussed in depth a semantic web. If you don’t know what  the idea of a semantic web is, here is the dirty explanation: setting a standard way of doing things so everyone can communicate. Or, according to the W3C, "The Semantic Web provides a common framework that allows data to be shared and reused across application, enterprise, and community boundaries". On face value this sounds like a great idea but as is with most “great idea!” implementation is murky at best.

In a world where technology and the way we make technology changes overnight, defining and setting standards can create the equivalent of a chained and shackled internet. As a result many javascript frameworks are ignoring semantics completely. This presents some problems such as accessibility, maintainability, and a fractured development base as developers are forced to pick technologies and a less navigable web for Web crawlers leading to poor SEO results. A potential solution for this is ARIA which has the effect of killing several birds with one stone.

ARIA or Accessible Rich Internet Applications is a way of making web applications that make use of undescriptive html markup descriptive of what the application actually is! Example below….

<ol role="tablist">  <li id="ch1Tab" role="tab">    <a href="#ch1Panel">Chapter 1</a>  </li>  <li id="ch2Tab" role="tab">    <a href="#ch2Panel">Chapter 2</a>  </li>  <li id="quizTab" role="tab">    <a href="#quizPanel">Quiz</a>  </li> </ol> <div>  <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div>  <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div>  <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Quiz content goes here</div> </div>

Notice the role attribute. By defining an attribute with a role tag we are not just describing one tag but defining the relationship of multiple tags and defining association of page elements or widget. There is more good news...Angular has a simple ngAria module.

[brianfinck]

#seattle #sunset

[brianfinck]

at Lake Serene

[brianfinck]

Happy fourth all! Here is a pic not of fireworks! (at Wailea, Maui)

[brianfinck]

Final night in maui :( (at Bubba Gump Shrimp Co. Maui)