Front-End on jeffcarp

Building a Running Pace Calculator With AMP

Sun, 03 Feb 2019 23:45:38 +0000

Sometimes you need to know how fast you need to run to achieve a personal best time. Previously the way I did this was to search “running pace calculator” and follow and use one of the top results. However, I was doing this almost always on mobile and none of those results are very mobile friendly. There might be good native apps for this, but I’m a fan of the web and don’t want to download an extra app if I can avoid it.

How I Host Static Sites With Automatic Deploy on Green

Sun, 03 Feb 2019 23:19:44 +0000

This site, jeffcarp.com, is written in markdown and uses the Hugo static site generator. This post walks you through how I set automatic building, testing, and deployment to Firebase hosting.

Project Setup

I assume we’re starting from a working Hugo project. For more on how to set that up, see the Hugo docs.

Testing Setup

I want the site to be Deploy-on-Green (i.e. only if it passes the tests). The CI setup I use is GCP Cloud Build. I develop and debug these tests locally using the local-cloud-build command documented here. The steps I want are:

Where Web Payments are Going

Sun, 31 Jul 2016 15:15:40 +0000

I gave a talk at the SF Payments Engineers meetup about Web Payments. Here’s the blogified version of that talk. Check out the slides from my talk here.

Mobile checkouts are a terrible experience for customers. Both consumers and merchants are both feeling the pain. Mobile checkouts convert about 66% worse than desktop checkouts.

A slide from the PaymentRequest presentation at Google I/O 2016.

Part of the problem is that every company needs to build their own credit card form. Checkouts range from great UX to terrible UX, but the heterogeneity is what really makes it a pain for consumers.

Visualizing JavaScript Project Structure

Mon, 12 Jan 2015 00:00:00 +0000

Recently I thought to myself: fairly frequently I dive into a big JS codebase and need to poke around for a while to get acquainted with the project structure, wouldn’t it be nice if I could have a more visual way of seeing the whole thing to make sense of it all?

It was this need I was trying to fill when I embarked on my open dev project last Friday. In this post I’ll try to walk through the steps I took so you can replicate them. If you want to just to play with the final project, it’s available as an npm module named jsviz (npm: jsviz, GitHub: jeffcarp/jsviz).

Intro to Angular.js Talk

Mon, 28 Apr 2014 23:40:24 +0000

On April 24 I gave a talk, Introduction to Angular.js, to the SF HTML5 Live Code meetup group. Here’s the screencast:

Things learned while preparing for Angular Live Code

Tue, 22 Apr 2014 00:00:00 +0000

This week I learned that there’s nothing quite like signing up to teach something to make you realize you don’t actually know the material all that well.

I’m giving an introduction to AngularJS talk this Thursday at Startup House SF. You should come by if you want to learn about AngularJS.

It’s Tuesday and 124 people have signed up and I’m kind of nervous to say the least. I’ve tried to channel my nervousness into preparation (we’ll see if it pays off or not). Here are a few things I’ve learned in the process.

Prim's Algorithm in ClojureScript

Sat, 05 Apr 2014 16:24:34 -0700

If you want to jump to the animation in its natural habitat, see it here. If you want to jump to the code: see the ClojureScript or JavaScript on GitHub.

After being interested in maze generation and after checking out the Wikipedia page, I thought it’d be cool to implement one in JavaScript. After that, it looked like a good opportunity to try porting some JavaScript to ClojureScript.

For the sake of brevity I’m leaving some of the more boilerplate functions out of this post. For the full code in each language, see the GitHub links above.

Two interesting IE JavaScript quirks

Fri, 14 Mar 2014 00:00:00 +0000

In the past month I’ve diagnosed and fixed a couple particularly pernicious bugs relating to JavaScript quirks in Internet Explorer. Hopefully if you haven’t run into these before, this will save you some pain in the future.

1. `window` does not inherit from `Object.prototype`

Oddly enough, according to the ECMAScript specification, the global window object does not necessarily have to inherit from Object.prototype. In Chrome, FF, and Safari, it does, but in IE it does not.

JavaScript's Mutative vs. Non-Mutative Array Methods

Thu, 20 Feb 2014 12:00:04 +0000

This is an issue that has endlessly tripped me up in JavaScript and I hope this post will help clarify things a bit and hopefully discover a pattern one can use to discern between mutative and non-mutative array methods.

First, let me define what I mean when I say mutative:

// If a method is mutative, that means it changes the original array.
var foo = [1, 2, 3];
foo.reverse();
console.log(foo); // [3, 2, 1]

// Notice how we didn't assign foo to new variable, reverse() acted upon it in place.
// In contrast, non-mutative array methods return a new copy of the original array.

// Here, the new array concat() generates is lost since we didn't assign it
var bar = [1, 2, 3];
bar.concat([4, 5]);
console.log(bar); // [1, 2, 3]

// Now if we assign it, bar becomes the new array.
bar = bar.concat([4, 5]);
console.log(bar); // [1, 2, 3, 4, 5]

Mutative	Non-Mutative
splice	slice
shift, pop	concat
unshift, push	every *
reverse	filter *
sort	forEach *
	indexOf
	lastIndexOf
	join
	map *
	reduce *
	reduceRight *
	some *
	toLocaleString
	toString

NB: the functional methods marked with a * can be mutative if the function you pass to them modifies the original array. In my expierience this has been especially true in the case of Array.prototype.forEach.