randylien

Learn JavaScript concepts with the Chrome DevTools

Authored by Peter Rybin , Chrome DevTools team

In this short guide we'll review some new Chrome DevTools features for "function scope" and "internal properties" by exploring some base JavaScript language concepts.

Closures

Let's start with closures – one of the most famous things in JS. A closure is a function, that uses variables from outside. See an example:

randylien

From SocialCalc to EtherCalc

Previously, in The Architecture of Open Source Applications, I described SocialCalc, an in-browser spreadsheet system that replaced the server-centric WikiCalc architecture. SocialCalc performs all of its computations in the browser; it uses the server only for loading and saving spreadsheets.

For the Socialtext team, performance was the primary goal behind SocialCalc's design in 2006. The key observation was this: Client-side computation in JavaScript, while an order of magnitude slower than server-side computation in Perl, was still much faster than the network latency incurred during AJAX roundtrips:

---

******

randylien

You're Missing the Point of Promises

Promises are a software abstraction that makes working with asynchronous operations much more pleasant. In the most basic definition, your code will move from continuation-passing style:

getTweetsFor("domenic", function (err, results) {
    // the rest of your code goes here.
});

randylien

An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.

Everything is broken up by tag, but within each the selectors aren't particularly ordered.

I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A

A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:

-webkit-appearance:none;

randylien

Template Components

Used to provide structural templates.

Pattern

t-template-name
t-template-name--modifier-name
t-template-name__subcomponent-name--subcomponent-modifier-name

randylien

• RCBO understand the difference between freelancing and entrepreneurship
• RCBO sell knowledge
• RCBO leverage teams
• RCBO build a brand
• RCBO make time to think, write and learn
• RCBO know a lot of the right people
• RCBO recognize theire own value
• RCBO seek out coaching and mentoring
• RCBO constantly innovate new products and services
• RCBO take risks

randylien

/**
 *  Tutorial
 *  
 *  Step1. install nodejs & npm (download: http://nodejs.org/download/)
 *
 *  Step2. install express (http://expressjs.com/)
 *         $ sudo npm install express -g
 *
 *  Step3. $ node app 
 *         default port is 3000

randylien

<div class="wrapper">
	<div class="container">
		<header>
		
		</header>
		<div id="content">
		
		</div>
	</div>
	<div class="footer-push"></div>

randylien

A timeline of the last four years of detecting good old window.localStorage.

---

Jan Lenhart, bless his heart contributed the first patch for support:

October 2009: 5059daa

randylien

javascript:(function(){var%20prefixes=['','glocken','das','borfa','maushe','uber'],suffixes=['','hausen','%20die%20vander','gleuten','noshan','flagellan','mek','dak','en%20das','ga'],xPathResult=document.evaluate('.//text()[normalize-space(.)!=\'\']',document.body,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null),i,textNode,cnt,out,j,pfx,sfx;for(i=0,l=xPathResult.snapshotLength;i<l;i++){textNode=xPathResult.snapshotItem(i);if(textNode.parentNode.nodeName.toLowerCase()=='script'||textNode.tagName=='style')continue;cnt=textNode.data.split(/\s/g);out=[];for(j=0;j<cnt.length;j++){if(cnt[j].replace(/[\s]/g,'')=='')continue;pfx=(!Math.floor(Math.random()*10))?'':prefixes[Math.floor(Math.random()*prefixes.length)];sfx=(!Math.floor(Math.random()*10))?'':suffixes[Math.floor(Math.random()*suffixes.length)];out.push(pfx+cnt[j]+sfx);}textNode.data='%20'+out.join('%20')+'%20';}})();