farmdev

Profiling And Optimizing React Apps

At Mozilla, the Add-ons team hosts a casual show & tell each month. It's a public meeting and we invite community members to share their work.

This time I demo'd some of the work I've been doing to profile and optimize our code manager, a tool that the review team uses to make sure add-ons are safe for Firefox users. It's a code viewer that looks like an IDE: a file list on the left, code in the middle, and a file overview on the right. The UX is similar to reviewing a pull request on GitHub but the main difference is we integrate our automated scanning tools to provide hints about potential problems.

Watch the demo.

The big challenge we ran into is how to display very large code files and diffs without lag...

read article

The Art of UI Skeletons

A skeleton screen is a technique of rendering placeholders for text, numbers, and other parts of a UI that haven't yet loaded. As a user interacts with the UI, they immediately see the illusion of new screen states—the skeleton—and this makes the app feel very fast. The skeleton layout is typically animated in some way to convey that data is still loading.

My team at Mozilla built addons.mozilla.org with skeleton screens for all loading states. This article covers some of the details about the techniques and approaches we took and some gotchas. It focuses more on the concepts rather than the implementation...

read article

Why Server Side Rendering In React Is So Hard

React first emerged as a powerful way to build living, breathing client side web applications. When my team at Mozilla set out to build a React frontend for addons.mozilla.org in 2016 we knew we needed server side rendering (SSR) for SEO and performance but we underestimated how much of a challenge it would be.

This is a deep dive into how SSR is fundamentally different from what React was designed for...

read article

Safer Unit Testing in React with TypeScript

I hear a lot about how static typing makes JavaScript safer but what about its influence on code architecture? As someone who has worked extensively with dynamically typed languages, I was surprised to realize that type safe applications can be written in entirely new ways.

I'd like to illustrate a fast and effective unit testing strategy that is only possible once you have type safety. I'll be talking about React in TypeScript but this may apply to similar realms...

read article

Testing Strategies for React and Redux

I wrote an article for Mozilla Hacks about testing React / Redux apps.

TL;DR

  • Setting up a test for a Redux connected component is simple: just dispatch the actions needed to enter a desired state. There's no need for mock objects or API calls. If you need to assert that the component dispatches an action in response to a UI event, you can spy on store.dispatch().
  • Shallow rendering lets you run fast, encapsulated unit tests. For example, breakage in an <Icon> component (that might be used all across the app) would not break your entire test suite.
  • Testing component interfaces rather than complete end to end coverage improves encapsulation and makes tests more maintainable. For example, if the component under test passes an onSubmit prop to another component, it's better to simulate the integration by calling otherComponent.prop('onSubmit')(). There's no need to fully mount the other component.
  • I recommend using static typing with these testing strategies to ensure all components are integrated correctly.

read article

Some Tips On Working Remotely

I've been working remotely from a home office with Mozilla since about 2010 (4 years so far) and although it has challenges I still enjoy it. It requires some discipline and most importantly a routine. Matt Gemmell's article on this has excellent pointers on routines and setting up an isolated work space at home. I wanted to add a few things to his post from the perspective of working as a software engineer (my profession)...

read article

How To Protect Against Heartbleed And Other Vulnerabilities

The OpenSSL heartbleed bug was a serious kick to the Internet's collective ass. This video provides a quick overview if you want the details. In summary, an attacker could craft a payload with a fake size (up to 64k) and trick openssl into sending a random chunk of server memory. WTF?! To understand how bad this was I spent a minute hacking on this script that was going around. I pointed it at login.yahoo.com (which is no longer vulnerable) and tried to see if I could catch a username and password flying by. I had one within 30 seconds. That's how bad it was; you could read random parts of the server's memory which may contain passwords, private keys, or whatever else OpenSSL was processing for current site visitors.

I had stolen someone's credentials. Game over, right? How do you protect yourself against something as bad as this? ...

read article

Ramblings

Oh, hey! I almost forgot I have a blog. I wanted to write a quick note about where you can find stuff I write.

read article

Shame The Thieves or Fix the Music Model

David Lowery wrote a piece on how downloading music is hurting musicians (which is a response to Emily White's piece on admitting to not buying music). Here is my response.

Music is a really interesting "product," especially when distributed digitally for $0.001 cents per download (that's my snarky guess at the production costs of a download: bandwidth, storage, etc). The real production costs are for the time put in by the artist, studio fees, and creativity. Besides the creativity part, that formula sounds a little bit like the FDA drug market, right? It costs about $0.001 cents to manufacture a pill so the hefty price tag goes to recoup the money spent on drug research. Or does it? Pharmaceuticals is a messed up industry...

read article

The Key To A Successful Startup Is Not Its Concept

In this article, a coffee shop entrepreneur laments a more "celebrity" entrepreneur who launched a similar startup but got more traction.

His conclusion: "The difference between the guy in the coffeeshop and the celebrity entrepreneur isn’t just press connections, money, and experience; ultimately it is this combination of factors."

I don't think this is true. A successful startup has very little to do with money and connections...

read article

Let's Buy Lobbyists To Save The Internet

At ORD Camp last weekend Ben Huh led a discussion about how we -- a group of geeks and artists -- can save the Internet. We won the fight against SOPA and PIPA for now but those laws will just sneak in through some other bill. Will wikipedia be there to black out again in protest? The fight is nowhere near from over and we have to get organized...

read article

What's Happening at Mozilla?

Most people at Mozilla are remote so each quarter we sync up face to face as a group for an all-hands meeting. There are over 600 employees! We of course sync up in smaller groups more frequently but this is a chance to see what's going on across the entire Mozilla horizon.

So what's happening at Mozilla? We're on the cusp of a huge shift towards an open web platform. That is, something more than a web browser -- something you can run "native" apps on. There's a lot of work left to do, of course. Here is a random dump of interesting projects in the works...

read article

How Do We Open Up The Social Web?

The release of Google Plus presents a unique opportunity to open up the social web. Why? Because it's a compelling product -- it's intuitive and fun with innovative features like circles, hangouts, sparks, etc. In many ways it's a clone of Facebook but that's just a reinforcement of what Facebook (and before that, Friendster) got right. If Plus continues to succeed then the optimist in me envisions this as a golden opportunity! ...

read article

Music Everywhere: Amazon Cloud Player

A few services have been popping up lately that let you stream music from any computer or device (the so called "cloud"). Amazon just released theirs, uncreatively named Cloud Player.

I'm pretty excited about this one because it's the first I've seen to actually offer sane, reasonable pricing ...

read article

Firefox Goes Mobile

When I got my first Android "smart phone" it felt like a slow, hard-to-use computer on dial-up Internet. Now I use an Android G2 (HTC Vision) which I'd call a pretty snappy, easier-to-use computer. I can't say I do much on it besides calls, texting, and Twitter but I'm excited that Firefox Mobile has just been released. You'll need a newer Android phone (arm v7) to install it and it's going to eat up a whopping 14MB (plus caching) but, hey, Firefox is now mobile! ...

read article

Firefox 4 Is Here And It's Glowing

read article

What Happened To The Feeling Lucky Search In Firefox 4's Awesome Bar?

read article

How To Achieve True Privacy On The Web: DOMCrypt

read article

What The New Open Web Can Do: Firefox 4 Demos

read article

Fudge Goes 1.0

read article

The Promise of the Cloud

read article

I've Joined the Web Dev Group at Mozilla

read article

Compiling Python 2.5 on Mac OS X 10.6 (Snow Leopard)

read article

CHIRP Radio Is Looking For Android Developers

read article

Dark-Launching or Dark-Testing New Software Features

read article

Python Package Index (PyPI) Mirrors

read article

PyCon 2010 - Get Your Proposals In

read article

Fixture 1.3, Now With That Tangy Django Flavor

read article

Using Dropbox As A Worm Hole To All My Computer Worlds

read article

Why you should NOT license your code as GPL

read article

Unit Testing JavaScript With JsTestDriver

read article

Nose 0.11 released (nifty new features)

read article

Degradable Ajax by Sharing Mako Templates With Dojo

read article

The Python Packaging Problem

read article

PyCon Happenings

read article

Fudge 0.9.2 Released

read article

A new version of Fudge, mock object library for Python

read article

What Makes Pylons Stand Out As a Web Framework

read article

Googlebot's Fatal Flaw And How You Can Fix It (or Get Rich Trying)

read article

Fudge: Another Python Mock Framework

read article

Debugging doctests interactively

read article

Chicago JavaScript Meetup: JS.Chi()

read article

Glögg, Swedish mulled wine, the Chicago recipe

read article

Python 3.0 On Mac OS X (alongside 2.6, 2.5, etc)

read article

Are you hiring web developers?

read article

Try out the Mercurial Subversion extension (hg svn) on Mac OS X

read article

Automated Model Based Testing of Web Applications (GTAC 2008)

read article

Taming The Beast: How To Test an AJAX Application (GTAC 2008)

read article

The Future of Testing (GTAC 2008)

read article

When Online Advertising Actually Works

read article

Presenting a Solid Tutorial at PyCon

read article

Adrenallin For The Brain

read article

T'is be'a Fixture 1.1.1 fer ya!

read article

Web Frameworks Do Not Make DBAs Happy

read article

Real Test Engineers Love Dots

read article

It's Time to USE The Web : Mozilla Labs Releases Ubiquity

read article

aintjustsoul.net: A portable record player for the Internet

read article

Chicago's Google App Engine Hack-A-Thon Recap

read article

Fixture Goes 1.0 (Testing With Data In Python)

read article

An In-Process, Headless Web Browser for Python?

read article

After the release of Google App Engine, the Rubyists ...

read article

Making Erlang indentation-sensitive

read article

The Python Make tool

read article

Testing Google App Engine sites

read article

PyPi (Cheeseshop) on Google App Engine

read article

Unicode In Python, Completely Demystified (slides available)

read article

Data mining in Python and beyond?

read article

The Monty Hall Problem (win a goat or a car)

read article

Building Flash/ActionScript sites entirely in code and using FireBug for debugging

read article

Software is written by hand

read article

Converting ReStructuredText to Wiki syntax

read article

Leapfrog Online is looking for some Django developers (Chicago area)

read article

Datejs - A JavaScript Date Library

read article

WSGI Intercept Has A New Home

read article

importing modules from setup.py (chicken vs. egg!)

read article

How To Get Started Writing Open Social Applications

read article

Pycon in Chicago, Excited Yet?

read article

GTAC Highlights Part 1 - Selenium is Alive and Well, Model Based Testing Is Smart, And...

read article

Python on TextMate demo (Chicago area)

read article

Hacking python frames

read article

fileinput : nice module for file processing

read article

context_tools, bridging the gap between test methods and test classes?

read article

Going to the GTAC (Google Test Automation Conference)

read article

What does the def-star-variable (or def-asterisk-parameter) syntax do in Python?

read article

What I Thought I Knew About Unicode in Python Amounted To Nothing

read article

undefined reference to `__stack_chk_fail' (compiling subversion 1.4.3 on Ubuntu)

read article

documentation for fixture module

read article

Humans are here to stay!

read article

multiple inheritance woes

read article

testing just got easier (a few nose plugins)

read article

unicode and unicorns

read article

Live doctest in TextMate (IPython + Twisted?)

read article

PyCon: A Star Schema in pure python code? Is this guy INSANE?

read article

You vs. The Real World: Writing Tests With Fixtures (Sunday at Pycon!)

read article

Why People Don't Use Hand Dryers

read article

Industry of the Ordinary

read article

2 stupid things I coded this week

read article

Coffee! ... and python

read article

Housecall from the pydoctor (finally, a doc generator that works!)

read article

Generating python with python

read article

Python gets true closures in 3000 - do I care?

read article

New Chicago City Sticker

read article

You vs. The Real World: Testing With Fixtures (Coming Soon)

read article

Creating a subversion checkout/ dev target for easy_install

read article

Blogging, Blogosphere, or something

read article