はてなブックマーク

This post was written by vjeux and edited by jlongster. We officially announced prettier over two months ago as a way to solve the problem of wasting time formatting your code. It started as an experiment but it clearly resonated with a lot of people, amassing ~7000 GitHub stars and over 100,000 monthly npm downloads in just two months. In case you don't know, prettier is a JavaScript formatter th

Several people at React Conf asked me for advice on becoming a better programmer. For some reason, people see me as a pretty advanced programmer worth listening to. I thought it would be worthwhile to write down my "mental model" for how I have approached programming over the years. Some details about me: I'm 32 years old and have over 10 years of solid experience. It probably wasn't until the las

Today I am announcing prettier, a JavaScript formatter inspired by refmt with advanced support for language features from ES2017, JSX, and Flow. Prettier gets rid of all original styling and guarantees consistency by parsing JavaScript into an AST and pretty-printing the AST. Unlike eslint, there aren't a million configuration options and rules. But more importantly: everything is fixable. I'm exc

Note: the examples here only work with outlet lisp. Refer to your version of lisp/scheme's documentation for how read works (and possibly other forms) I know it's an old post by now, but something about the article Why I love Common Lisp and hate Java, part II rubbed me the wrong way. The examples just aren't that good. The usage of macros is plain baffling, when a function would have been fine. T

Many people have heard the word “continuation” because it has something to do with node’s callback hell. I don’t think most people understand what continuations really are, though. They aren’t just a callback function used by async functions. A continuation is a representation of the control flow of your program at any point in time, essentially the stack. In abstract terms, it represents "the res

In my previous post I introduced Unwinder, a project which implements continuations in JavaScript. What does that have to do with stepping debuggers? Unwinder uses continuations to implement a debugger, since it can reuse the same machinery to pause code at any time. This post could be titled "Implementing Continuations in JavaScript," but a lot more people know what a stepping debugger is. Beside

I have now used Redux pretty extensively in multiple projects by now, especially the Firefox Developer Tools. While I think it breaks down in a few specific scenarios, generally I think it holds up well in complex apps. Certainly nothing is perfect, and the good news is when you want to do something outside of the normal workflow, it’s not hard. I rewrote the core of the Firefox debugger to use re

Journal Entry, 12/18/2015 - “It’s late Friday night, my wife is already asleep, and I finally found time to go through those pull requests on that old project I put up on github last year. My daughter is getting up at 7:30 though, so I better not stay up too late. 9 new issues since I last checked. 2 new pull requests. Hopefully most of the issues can be closed, and the pull requests are trivial.

This post took months to write. I wasn't working on it consistently, but every time I made progress something would happen that made me scratch everything. It started off as an explanation of how I integrated react-router 0.13 into my app. Now I'm going to talk about how redux-simple-router came to be and explain the philosophy behind it. Redux embraces a single atom app state to represent all the

A little while ago I briefly talked about my latest blog rewrite and promised to go more in-depth on specific things I learned. Today I'm going to talk about immutable data structures in JavaScript, specifically two libraries immutable.js and seamless-immutable. There are other libraries, but the choice is conceptually between truly persistent data structures or copying native JavaScript objects,

It's that time of year again! The weeds are growing, the air is thick and stagnant, and I just deployed another refactoring of my blog. "Why does he keep working on his blog," you're thinking, "when I could do all of that with a static-site generator like Jekyll?" Writing my own blogging engine has been one of the best decisions I've made. Having a side project that I actually use and get value fr

I gave this talk at a local JavaScript meetup in Richmond, VA on May 5th and recorded it using screencasting software. The sound quality is poor, but it's still very watchable. Check this out if you want a good explanation for why React Native will change how you write native mobile apps, and how the web can learn from it. To the women readers/watchers: I apologize for saying "guys" in a few place

I'm probably going to regret this, but this post is about promises. There are a few details that I'd like to spell out so I can point people to this post instead of repeating myself. First, let's talk about try/catch. The problem with exception handling in JavaScript is that it's too aggressive. Consider the following code: try { var result = foo(getValue()); } catch(e) { // handle error from `foo

Part I and Part II of this series lay the groundwork for building not only the frontend code of your app, but also the backend. So far, while the system has a nice consistency, it offers little to the casual observer. Today, in this final post, we are going to look at something that no other build system can touch: using hot module replacement to update a running app live. I've always wanted a liv

Webpack is an amazing tool. It calls itself a "module bundler" but it is much more than that: it provides an infrastructure for building, transforming, and live updating modules. While its wall of configuration options may not be your style, this approach works really well for the problem it's solving. In fact, the style of its documentation and APIs are not my favorite, but it all comes together

I drafted a long post about the mobile web, but then Flipboard released their new mobile site with a detailed explanation of why they used canvas instead of the DOM to layout content. Subsequent blog posts ensued in response. Since the topic of 60 FPS mobile apps has already been discussed greatly, my original post isn't relevant anymore (and I don't have time to polish it up). However, I would st

Facebook gave all attendees of React Conf early access to the source code of React Native, a new way to write native mobile apps. The technology takes everything that's great about React.js and applies it to native apps. You write JavaScript components using a set of builtin primitives that are backed by actual native iOS or Android components. First off, I know it sucks it's not completely public

Transducers.js: A JavaScript Library for Transformation of Data If you didn't grab a few cups of coffee for my last post, you're going to want to for this one. While writing my last post about js-csp, a port of Clojure's core.async, they announced transducers which solves a key problem when working with transformation of data. The technique works particularly well with channels (exactly what js-cs

Taming the Asynchronous Beast with CSP Channels in JavaScript This is an entry in a series about rebuilding my custom blog with react, CSP, and other modern tech. Read more in the blog rebuild series. Every piece of software deals with complex control flow mechanisms like callbacks, promises, events, and streams. Some require simple asynchronous coordination, others processing of event or stream-b

JSX is a Facebook project that embeds an XML-like language in JavaScript, and is typically used with React. Many people love it and find it highly useful. Unfortunately it requires its own compiler and doesn't mix with other language extensions. I have implemented a JSX "compiler" with sweet.js macros, so you can use it alongside any other language extensions implemented as macros. I have a vision

Removing User Interface Complexity, or Why React is Awesome I've been studying frameworks and libraries like Ember, Angular, and React the past several months, and given Web Components a lot of thought. These all solve similar problems to varying degrees, and are in conflict in some ways and in harmony in others. I'm mostly concerned with the core problems of data binding and componentizing UIs. A

Sweet.js Tutorial #2: Recursive Macros and Custom Pattern Classes In the first tutorial, we covered the basic concepts of sweet.js macros. Now we will look at a few techniques which help build more complex macros: recursion and custom pattern classes. All of these tutorials are available in the sweet.js-tutorials repo along with a working environment to build sweet.js macros. For this tutorial, le

Back in 2009-2010, I got Gambit Scheme running on iOS and decided to build a game with it. The result was Farmaggedon, a stupid game where you blow up farm animals to avoid being hit by them. I blogged about my progress working with Scheme on iOS back then and evidently a lot of people were inspired by it. This was the main blog post, in addition to a bunch of videos. Recently another iOS game was

This is the first entry in a series about writing JavaScript macros with sweet.js. You will learn how to write your first macro, basics of pattern matching, and how to run the sweet.js compiler and use sourcemaps for debugging. All of these tutorials are available in the sweet.js-tutorials repo along with a working environment to build sweet.js macros. The next tutorial is about recursive macros a

Stop Writing JavaScript Compilers! Make Macros Instead The past several years have been kind to JavaScript. What was once a mediocre language plagued with political stagnation is now thriving with an incredible platform, a massive and passionate community, and a working standardization process that moves quickly. The web is the main reason for this, but node.js certainly has played its part. ES6,

When I first started writing node.js code, there were 2 things I hated: all the popular templating engines, and the proliferation of callbacks. I was willing to put up with callbacks because I understood the power of event-based servers, but since I saw that generators were coming to JavaScript, I have eagerly awaited the day they were implemented. That day has come. Today, they have landed landed

I'd like to announce that I have LLJS successfully compiling to asm.js, so we can tap into the amazing optimizations provided from it. This is just a start, and there are many things missing, but I'd like to show that it works. You can get it from the asm.js branch of my fork. asm.js is a highly optimizable subset of javascript being worked on by Mozilla. It's a specification that allows you to op

The web is everywhere, and offers a very powerful and non-traditional environment for creating and distributing apps. Instead of the code-compile-run cycle, simply refresh your app or even write code live within the browser. Additionally, it's relatively painless to distribute your app across a huge number of platforms. It's exciting that in the past few years, developing games using HTML5, the te