Blog

Category Archives: Developers

The Case for a Stricter Flux

addthis-react-flux-javascript-scaling

With companies like Yahoo, AirBnB, Atlassian, and Github embracing React.js, I think it’s safe to say that Facebook has set a new standard in front-end development with this remarkable library. What drew me to React, at first, was its genius approach to rendering. What has kept me using it are things like propTypes, invariant, and the belief that it’s a library’s responsibility to yell at a developer when they are doing something wrong. Continue reading

Using Routie for React.js

addthis-react-flux-javascript-scaling

React is a great new Javascript framework for building fast, dynamic single-page websites. Paired with Flux, you can construct a single page application very quickly. But in a single page application, all of your content is available under a single, unchanging URL. That makes it harder to measure engagement per content, the user cannot easily return to an URL or share it without pointing to the homepage, and interpreting a user’s interaction can be murky if all the URLs are the same. Thus the need for routing within a React.js application. Continue reading

Scaling the Single Page Application with React.js and Flux

addthis-react-flux-javascript-scaling

Here at AddThis, we just completed a rewrite of our dashboard using Facebook’s React.js framework and the Flux application architecture. Managing a large Javascript application as its complexity, number of users, and number of developers grows is something that we’ve spent a lot of time thinking about during this process. In this post I’ll attempt to distill down some of the lessons we learned along the way and how React.js and Flux can help to address them. Continue reading

PageSpeed Insights: Removing Render-blocking CSS

If you write javascript which dynamically loads CSS files on your page, you have probably seen PageSpeed Insights complain to you about removing render-blocking CSS. Fixing render-blocking javascript is relatively easy: just add an async attribute to the script, and include it before the closing body tag, or use an async loader like Google Analytics. Fixing render-blocking CSS is a little trickier. We employ a little media query magic to get the job done.

// append css dynamically to head
var head = document.getElementsByTagName('head');
var element = document.createElement('link');
element.rel = 'stylesheet';
element.type = 'text/css';
element.href = '//www.my-external-css.com/my.css';

//here's the magic
element.media = 'non-existant-media';
head.appendChild(element, head.firstChild);
setTimeout(function () {
    element.media = 'all';
});

Continue reading

How Our Developer Squads Use Slack, Phabricator & Google Docs

addthis-developer-management-tools

Maximizing our productivity is key to meeting goals and releasing on time. We use all sorts of project management tools, but we also have a series of informal guidelines as to how we use Slack, Phabricator, and Google Docs among our developer squads. Specifically, how we integrated into their API, follow informal internal guidelines of conversation, and how the tools themselves work great to make our work great. Continue reading

7 Things to Consider When Making iOS and Android Apps with Cordova or PhoneGap

addthis-cross-mobile-application-cordova-phonegap

The promise of PhoneGap/Cordova development is quite alluring. Use your existing HTML/JS/CSS skills (and team) to build cross-platform mobile applications for iOS/Android, and other mobile platforms. As a bonus, you can then update your existing codebase once for all platforms instead of maintaining separate repositories (or paying specialized developers). This post will talk about some of the questions and decisions you should consider before beginning your next cross-platform Cordova project. Continue reading

5 Lessons Learned In Automated Browser Testing

addthis-automated-browser-testing

We really love testing our tools and products to verify they’re working correctly and efficiently. We’ve been expanding our set of automated browser testing for the addthis.com website and our suite of publisher tools. We use the Selenium browser automation framework and we are big fans of this framework. Our philosophy has been to automate the simple workflows and allow QA to focus on the more intricate workflows. Here are 5 guidelines that we’ve learned to write more effective browser automation tests. Continue reading

Behind the Scenes of Our Scrolling Engagement Report

This morning, we released our 2014 Q2 Engagement Report analyzing scrolling behavior on content across the AddThis network. In this report, we break this data down broadly by time and operating system, but also go deeper into how users were referred to the page (i.e. through ad campaigns), and which AddThis tools the pages were using. Here I’ll describe the mechanics of how we created the report. Continue reading

Hydra: Storage of Nested Hierarchical Data

Hydra is a distributed data processing and storage system developed at AddThis, which we recently released as open source. It ingests streams of data and builds hierarchical tree structures that are aggregates, summaries, or transformations of the data. Sibling nodes in the tree are stored in lexicographic sorted order. This ordering is often used explicitly by the human when writing queries or implicitly by the query system to optimize the execution of queries. Continue reading