RXGX

Notes on JavaScript Execution

Execution context (or scope):

1. “activation object” created
2. creates the arguments array-like object
3. assign [[scope]] to chain of objects
4. variables (vars & params) are instantiated
5. assigns value for this (global if null)

Chaining

var o = new Obj2();

Obj2.prototype =
new Obj1() =
Obj1.prototype || null

ActInner1 > ActOuter1 > global
ActInner2 > ActOuter2 > global

Movability

Scopes are real objects. They travel with function instances created within them.

Accessibility

The difference between execution scopes and JavaScript objects is their accessibility.

Execution scope:

• not directly accessible
• properties accessed using naked identifier

JavaScript objects:

• directly accessible
• access to properties requires qualified identifiers (i.e. object.property)

Notes on Web Workers

Web workers are either:

• Dedicated workers
• Shared workers

Web workers have access to:

• navigator
• location (read only)
• XMLHttpRequest
• setTimeout / clearTimeout
• setInterval / clearInterval
• Application cache
• import scripts
• (spawning new workers)

Web workers have no access to:

• DOM
• window
• document
• parent

Child workers:

• Must be same origin as parent page
• URIs are relative to parent location

BlobBuilder’s blobURL:

• window.URL.createObjectURL
• window.URL.revokeObjectURL

4 Front End Openings in New York City

Looking to write some JavaScript in NYC? I’ve come across four job postings during my web browsing tonight.

Front End Developer at Squarespace

UI Designer/Developer at Foursquare

Product Engineer at Tumblr

UI Engineer at Meetup

Front End Job Postings in San Francisco

Are you spending cyber monday shopping for a job? Following are some interesting openings I’ve found in the Bay Area for the week of Monday, November 28.

Senior Front End Software Engineer at Rdio

Senior Front-End Engineer at Identified

Senior Innovation Developer at Salesforce

Javascript super-Ninja at lumatic (for those with experience in murdering?)

JavaScript Framework Developer at WebMynd

Front End Engineer at Social Shield

Bonus: The below is not in San Francisco, but interesting, nevertheless.

Mobile Web Front End Engineer at Blizzard

Create Web Interfaces without Extra Markup

In CSS2, two selectors were introduced to manipulate the style before and after an element. These selectors, :after and :before, when combined with the content property, allow us to add style and structure to our HTML without adding extra <div> tags.

Back to the Past

I recently had to build a tooltip for to a media player. The following HTML is what I used to use to build it’s structure. You can see where I had to add empty layers towards the end in the .indicator layer.

tooltip.html

<div class="tooltip">
    <div class="times">
        <time class="time current">11:34</time>
        <time class="time duration">32:27</time>
    </div>
    <div class="indicator">
        <div class="line"></div>
        <div class="ring"></div>
    </div>
</div>

tooltip.css

.tooltip {
    width: auto;
    display: inline-block;
    font: normal 12px Arial, Helvetica, sans-serif;
}

.times {
    border: 1px solid black;
    background: rgb(220, 220, 220);
    display: inline-block;
}

.times .time {
    display: inline-block;
    padding: 4px;
}

.times .time:first-child {
    border-right: 1px solid black;
}

.indicator {
    position: relative;
}

.indicator .line,
.indicator .ring {
    content: "";
    position: absolute;
}

.indicator .line {
    top: 0;
    left: 25px;
    width: 1px;
    height: 10px;
    background-color: black;
}

.indicator .ring {
    top: 10px;
    left: 25px;
    width: 7px;
    height: 7px;
    border: 1px solid black;
    margin-left: -4px;
    border-radius: 7px;
}

Do you see the extra lines I had to add just to create the line and the ring? I could’ve used a <img> tag or a background-image like I’ve been doing for the last 5 years. However, this allows for the flexibility of adjusting colors and sizes on the fly with CSS.

Return to the Future

Did you know you can do the above without the extra markup? Here’s where the power of :after and :before comes in. If I remove the .line and .ring elements, rename their CSS selectors to :before and :after respectively, and give those selectors blank content content: "";, we’ll achieve the same effect.

tooltip.css with before and after!

.indicator:after,
.indicator:before {
    content: "";
    position: absolute;
}

.indicator:before {
    top: 0;
    left: 25px;
    width: 1px;
    height: 10px;
    background-color: black;
}

.indicator:after {
    top: 10px;
    left: 25px;
    width: 7px;
    height: 7px;
    border: 1px solid black;
    margin-left: -4px;
    border-radius: 7px;
}

tooltip.html without extra markup!

<div class="tooltip">
    <div class="times">
        <time class="current">11:34</time>
        <time class="duration">32:27</time>
    </div>
    <div class="indicator"></div>
</div>

Configure Your Rails Applications with YAML

So I heard you need to store configuration values? Let’s explore how to keep configuration data like API keys, names and passwords out of your app and organized using YAML. You can even separate values by environment!

Separation of Code and State

Do you have usernames, passwords or other configuration values mixed with code in your Ruby on Rails application? A YAML file will help keep these values out of your code. For example, I use YAML:load to load and parse my twitter.yml file stored in the config folder. This file contains the credentials for the Twitter account I am accessing.

# app/controllers/twitter_controller.rb
file_path = File.join(Rails.root, 'config', 'twitter.yml')
config = YAML::load( File.read(file_path) )

# config/twitter.yml
email: email@domain.com
password: twitter

After the YAML file is loaded, the values in twitter.yml are saved to my local variable, config. I can use them in my Ruby file such as the following example with a Twitter class I have created.

# app/controller/twitter_controller.rb
file_path = File.join(Rails.root, 'config', 'twitter.yml')
config = YAML::load( File.read(file_path) )
twitter = Twitter.new(config['email'], config['password'])

Update: This example was written for Ruby 1.8.7 and Rails 2.3.2. The connection between your application and Twitter falls outside the scope of this article.