Cracking the Code
Inside Medium’s World-Class Editor
Big websites are often seen as great mysteries to the common web developer. With technologies changing every week, and new updates to Ember releasing once every few years, it can be hard to keep up. Such changes prompt us to ask some of technology’s toughest questions: How do they scale this layout? How does this page load so quickly? How do they make money? No website fits this bill quite like Medium.com.
But for the expert web developer, as you will soon become, discovering the world behind the webpage is only a few keystrokes away.
Meet your new friend, Chrome DevTools. If you have Chrome, you already have DevTools installed. If you don’t have Chrome, you can download it for free at the following link: http://mac.softpedia.com/get/Internet-Utilities/Google-Chrome.shtml.
Now that you have chrome, go ahead and press the following key combination: ⌥⌘I. Please note that this key combination is only available on a Mac. If you don’t have a Mac, you can get one for free at the following link: http://www.freemacbookpro.com.
You should see a scary window underneath the current webpage. This is your pathway to developer nirvana — the Chrome Web Inspector. Here we can bounce around the webpage, view in detail the layout of all the HTML elements, and even change the styles of the page.
Let’s use this technique to check out one of our favorite websites.
Taking a closer look at the <body> tag, we see the following:
<h1>Medium</h1>
<h2>good stories. good people. good times.™</h2>
<table id="medium">
<tr>
<td id="post">
<h1>The Last Article You'll Ever Need To Read About Dads</h1>
</td>
</tr>
<tr>
<td id="post">
<h1>JavaScript Is Literally The Worst</h1>
</td>
</tr>
<tr>
<td id="post">
<h1>Are there bees?</h1>
</td>
</tr>
</table>
<script src="jquery.min.js"></script>
<script src="editor.js"></script>
<script src="tooltips.js"></script>The <script> tags at the bottom tell us that Medium consists of three main components: jQuery, the editor, and tooltips.
We can dive in even further now, by checking out the source code of the webpage — the code that makes Medium work™. Clicking the “Sources” tab should show all of the JavaScript running on Medium. From here, click through to “editor.js” and see the following source.
(function(z){
var LW = function(a) {
a.Dh && z.ce(a.Dh);
a.Dh = null;
a.yd && a.yd.close();
a.yd = null;
};
var MW = function(a, b, c) {
z.AO.call(this, a);
this.on = b;
this.yd = c;
this.pa = new z.Jc;
};
var NW = function(a) {
z.Oe.call(this);
this.$ = a;
this.W = a.get(“dialog”);
this.pa = z.Qc(new z.Jc, function() {
this.pa = null;
}, this);
this.$p = !1;
this.on = “”;
};
...Wow, okay, this is awkward. So this code is not very easy to read, so we can’t exactly run through it. Instead, let’s do what every junior web developer would do, and implement the Medium editor ourselves.
We’ll start off by making a <div> with the “id” field set to “editor.”
<div id="editer">
Write your post here...
</div>Next we’ll use some new JavaScript features to turn this <div> into a <work of art>. This will enable us to use many of the features Medium uses to create one of the best writing experiences on the web™.
<div id="editer">
Write your post here...
</div>
<script>
document.editer.contentEditable = true;
alert("Welcome to Medium — go ahead and start writing!");
</script>And, that’s it! Congratulations, you’ve made yourself a basic Medium editor. You may be thinking, “Why is our JavaScript so compact while Medium’s is so long and verbose? By the way, are you single?” To answer your first question, it’s because our editor does not quite have all the features of the Medium editor. For example, double-clicking on a word on Medium brings up the following:
This is what’s known as a “tooltip” and Medium’s tooltips are very good. To write our own tooltips, we’ll start by using a library I wrote in anticipation for this post. You can download it for free from this link.
Then just include it in your document and create a new tooltip with the following JavaScript:
var Tooltip = new ToolipSingletonFactory.createTooltip({
withStrategy: Tooltip.STATIC_POSITION | Tooltip.UPWARD_FACING,
content: Tooltip.EDITOR_CONTENTS
});
document.editor.ondblclick = function (e) {
Tooltip.attachToAndDisplay("editor");
};And here we have the last piece of the front-end puzzle.
We can see how using DevTools enables us to copy some of the most prestigious real estate on the web. A whole world of opportunity now lies at our fingertips. Behind every website are key design decisions and engineering trade-offs that you don’t need to make yourself, so go forth with your newly-found DevTools knowledge, and discover the hidden secrets behind some of your favorite websites.
Don’t forget to write.
Jordan Scales is a web developer and it has been three weeks since his last incident.
