If you often forward URLs (home for review later, to co-workers) – you might like this bit of JavaScript. Add it as a bookmark and enjoy. javascript:location.href=‘mailto:?SUBJECT=’+document.title+’&BODY='+

If you’re not in the programming field, you likely got hit by a bunch of acronyms there as if you had been hit by a bus. Let me break it down: AJAX : A technique that makes websites look fast and smooth, unlike “old” style application. Think about the way Google maps looks, or Netflix. DOM: HTML (the language that web pages are written in) can be seen as a “tree-like” structure. This structure goes by the name of “DOM”, or “Document Object Model” Javascript: A language for telling your browser ( Firefox, IE, etc. ), to do something to the HTML page sent from the server *within your browser.

One of the main things that really blows programmers’ minds when they really see the power of it is a topic called ‘closures’ or ‘lambda functions’ or ‘anonymous subroutines’. I decided to edit the previous post’s code to use closures, to get the hang of this technique in JavaScript. It makes your code a lot more flexible as I think the simple example below demonstrates. For the code, look after the jump…

As I posted earlier, I’m undertaking to better understand the basics of the DOM, Javascript, and DHTML on my pilgrimage to being Ajax competent. I’m using Ajax in Action as my guide.

Recently at work, we had need of a basic ‘dashboard’. It’s a pretty simple design: boxes on the left with one level of drop down for menus, a big, central ‘content’ section in the middle.

I was thinking of how I wanted to implement this.

1. It needed to be flexible (i.e. layout should be described in an XML file)
2. It needed to be updatable without touching the JavaScript (to get a feel for the Ajax design)
3. It needed to be somewhat visually appealing.

The goal was to use Javascript to create a 100% DOM rendered page that worked in IE and Firefox.

Here’s how I did it after the jump….

IMDB’s image provider has implemented the classic way of preventing image stealing: return false for the right-click or contextMenu event. This annoys me so much. And it’s so trivially easy to subvert, it just irritates me that this qualifies as security and / or is demanded by clients. A demonstration should suffice. In these examples, IMDB tries to prevent me from grabbing images out of their pictures tool. Sigh. Must it be so? So, please, stop. Just stop. Because you don’t stop the slightly-enlightened from getting the goodies:

Introduction It’s not often that many of my favorite tools intersect in an exciting way such that I find myself being saved tons of time, but it happened today and I thought I would share a powerful editing technique. The tools used were vim and ack. The payoff was to make 250 changes across dozens of files with three simple command-line operations. The Setup I’m a real fan of the EmberJS JavaScript MVC framework. Today the Ember team announced the 1.0-pre release of this product and I was anxious to implement it with my work codebase. After slotting the new version, on initial boot up of my app in Chrome reported 245 errors.

For a while now I’ve been working with the Ember.JS framework. It’s been a real pleasure (for the most part) and I think it’s got a fantastic community around it. I’m very excited as the team, and yours truly, work to bring the product to version 1.0. In efforts to help new users adopt this framework, I’ve written a fairly-extensive guide on how to build up an Ember application from scratch using the latest patterns and opinions. I hope to get it merged into the Ember documentation site, but we’ll see how it goes on that front. This guide can be found at my GitHub fork of the Ember documentation website in the routing primer documentation.

Literacy Chris Granger recently published a post that asserts “Coding is not the new literacy.” He points out that “literacy” is defined as the “laying” of characters into units that bear meaning (letters to words, words to sentences, sentences to thoughts). But “literacy” is a proxy noun for something vastly more important: a technology for storing information such that it survives across people, ages, cultures. I recall Ovid whose prophetic close to the “Metamorphoses” was: And now the work is done, which neither Jupiter's wrath, nor fire, nor the sword, nor greedy time can abolish....my better part[this work] will be immortal.

I recently read Nicholas Zackas’ The Principles of Object Oriented Javascript and I really recommend it. Many people I know (and students I teach) struggle with mapping the concept of object orientation onto a language that does not follow classical inheritance and lacks many of the visible signals that developers recognize as OO-ish.

The books makes forays into hidden attributes of the language but remains friendly throughout. It offers practical tools and exploratory exercises that will help JavaScript programmers learn more about this interesting and protean language.

I wrote the following precis of my take-aways:

From my time teaching at Devbootcamp one of my “famous” lectures was the “JavaScript is like Jesus” lecture. This is a simplification, and I would have called the lecture “What Aristotle and the Arian Heresy teach us about thinking about JavaScript,” but terseness was never my strong suit (you are reading my blog after all).

Nevertheless, if one of these simplifications managed to help my flock remember and appreciate some of the subtleties of JavaScript, then all the better. I’ll now share the “JavaScript is like Jesus” content.

Content Warning: this post is written without a religious point of view. It considers Christianity as a historical phenomenon (what happened historically) and Christian dogma as philosophy. If your beliefs forbid consideration of this faith from such a perspective, you might want to skip this post.

Let’s start with a simple demonstration:

> f = function() {}
< () {}
> o = {}
< Object {}
> Object.getPrototypeOf(x)
< () {}
> Object.getPrototypeOf(o)
< Object {}

Here we define f and o and then ask the Chrome V8 JavaScript engine to tell us what it considers f and o to be. Helpfully enough, Chrome tells us that f is a Function and o is an Object.

From a certain perspective, and certainly in common programing pedagogy, we learn that Functions are things-that-do-work and Objects are things that hold data like 1 or 3.14 or "Manhattan". Functions change data, but data is not runnable.

Consider this JavaScript expression: x.color = "Red";

“Is x an Object or a Function? What is the essential nature of x?”

The battle of wits has begun! More after the jump.

TL; DR I have written and extension for the Chrome browser that allows you to visit your Notes and Highlights (https://read.amazon.com/notebook) page and export a given book’s notes and annotations as JSON. From This… Visit a book’s note page and right-click a menu To a Clipboard With This… { "title": "A Mind at Play: How Claude Shannon Invented the Information Age", "author": "Jimmy Soni and Rob Goodman", "highlightCount": 65, "noteCount": 7, "annotations": [ { "highlight": "But before Shannon, there was precious little sense of information as an idea, a measurable quantity, an object fitted out for hard science. Before Shannon, information was a telegram, a photograph, a paragraph, a song.

Introduction I recently shipped the amaJSON Chrome extension and I believe I’ve come up with an improved process for understanding how to build similar applications. This tutorial will help you create a practical “context-menu” Event Page extension. With Extensions, Google has delivered (yet) another astounding technical platform with superior reference documentation. Nevertheless this documentation leaves delivery practices beyond a trivial proof of concept hard to determine or worse leaves the guidance to — “look at these examples.” This guide fills in any gaps and attempts to move step-by-step. For beginners to programming there’s also a meta-lesson in this post: how to approach programming to someone else’s API.

Our Project Recently, JavaScript educator Kyle Simpson mused on LinkedIn that he found himself sending the same messages repeatedly on the site. He said he would have liked to have the ability to select pre-typed or “canned” responses for LinkedIn. Our extension will therefore create canned responses for linkedin.com. Let’s write out a few user stories to guide our development. User Stories AS A LinkedIn user I WANT to be able to reply with canned responses SO THAT I can more effectively manage my inbox AS A $TOOL user I WANT to be able to add new responses SO THAT I can more effectively manage my inbox AS A $TOOL user I WANT to activate my response by using a drop down from a context menu AS A $TOOL user I want the drop down to have a list of “headings” which correspond to long-form text responses e.

Meta-Post This post is really a meta-post. Here I’m going to document how I went about educating myself on a Google API. If you’re a seasoned hand at picking up API docs and making a product out of it, you might want to skip this post and move to the next part. Getting Underway Our starting point for documentation is the Chrome Extensions page. It serves as a table of contents for us and prompts us to first visit their tutorial page. The first introduced type of user interface to an extension described is the browser action which: “…[allows] us to place a clickable icon right next to Chrome’s Omnibox for easy access.

Introduction In this post we actually implement our canned response extension. This post is vertically long (mostly because of code samples and screen shots). Type along and take it slow. Extension development rewards patience and discipline. If you can’t be disciplined be patient. If you can’t be patient be disciplined. Whatever it is, don’t get overwhelmed by the length of this post. For beginner developers, I hope also to show you my software development process for unfamiliar code APIs. First Goal: Unprivileged Page Doing Something, Anything Let’s create a new developer extension. I’m not going to cover the directory setup because it’s covered very well in the Extension tutorial.

Interlude In the previous section we set up our communications conduit, and wrestled with the basics of the Chrome Extension API. We’re now going to do a pass where we change the “debuggy” messages from being noise into being canned responses. Let’s create a new branch called: boilerplate-pass-through. Our goal is to get our canned responses passed through from background to content scripts. Build Context Menu UI Per our user stories, we want to add a contextMenu element. Let’s add something trivial to verify it works. You should now see the pattern that many APIs require an additional permission. To use the contextMenus API you must add the contextMenus permission.

We’re ready to make this real! Get Ready to Ship! Well the things that need to change are few indeed! We’ll stop using stevengharms.com We’ll change the selected input fields We’ll tighten up the code’s footprint ADVANCED We’ll optimize a critical UX bug cased by LinkedIn’s JavaScript-heavy render From stevengharms.com to linkedin.com My simple site has served me well enough. Time for the big leagues. I’ll present this only as a diff. diff --git a/background.js b/background.js index 0762faf..d68eed9 100644 --- a/background.js +++ b/background.js @@ -17,7 +17,7 @@ chrome.webNavigation.onCompleted.addListener(function(details) { id: MENU_PREFIX + details.tabId, title: "Canned Response", contexts: ["editable"], - documentUrlPatterns: [ "*://stevengharms.

When I’m reading on my Kindle, I can export my notes to JSON using my Chrome Extension, AmaJSON. I love being able to share / search / re-use notes that I store in JSON (example).

But what if I’m reading a paper book? Writing JSON by hand is tedious. An application could help! But I don’t want to have to create a whole custom application with storage, hosting, etc. JavaScript and ReactJS to the rescue.

I made bn.stevengharms.com to help out.