Pug (formerly Jade), in the browser?

 

Over at Oasis Digital Angular Boot Camp, we teach Angular 2+ using tooling that operates entirely in the browser. It compiles TypeScript to JavaScript, it processes a module system, etc. This works very well, and makes for a fast, easy setup and edit/run cycle during class. Great stuff. (We also teach the use of heavier duty server-side tooling like Angular CLI; but CLI is still short of the convenience in-browser tooling.)

I recently wondered whether might be possible to support some of the other tools we use, in the browser. Many useful tools in the JavaScript development ecosystem (including Babel, TypeScript, and many others) are implemented such that they can execute in either a browser environment or in a server (node) environment. This appears to not be a great technical challenge, for projects intended to work this way. The aspects which require node APIs (such as talking to the file system) are simply implemented and wired up separately from the core functionality – which is “just JavaScript”.

Unfortunately, this plan didn’t get very far: the tool I wanted to add next is Pug (formally known as Jade). Pug is currently implemented using Node APIs scattered throughout the code base, rather than in a universal node/browser way. I noticed an open issue asking about this, but it appears there is not interest in achieving such a thing.

Browsing around the Pug code base, it appears would be a moderate amount of work to reshape things to make this possible; but it would involve small changes widely scattered around the code. That kind of change is generally frowned on the project unless there user and developer eagerness for the feature in question. Therefore, I am curious, readers of my blog: is there much interest out there, enough for someone to consider maintaining a fork of Pug converted to universal JavaScript? Or a wrapper/shim around it, to stub Node APIs sufficiently for Pug to operate in the browser?

Managing a To Do list

There are thousands of to do lists applications to choose from, across most every kind of programmable device we’re surrounded with. I have a to do list, but I don’t use any of the apps. A few years ago someone noticed how I did this and asked me to write a few words about it. Whoever it was… I have forgotten, sorry to take so long.

I manage my list using a spreadsheet. Yes, an old-fashioned, dawn of the PC era spreadsheet. The killer app from before that term existed. Why?

  1. A spreadsheet is an amazing general purpose tool.
  2. It has the columns of data I wanted to have right now. I want a new column? Click click and I have it. It doesn’t matter if someone who wrote the to do app thought I needed that column.
  3. Some old column of data no longer useful? Click click, it’s gone.
  4. Finding or sorting data? Yes, in arbitrary ways, right now.
  5. Fonts too large or too small? I don’t go shopping for a new application from someone with a better sense of design. Click, the font is whatever size I prefer.
  6. Sometimes color coding or bold seems like a good idea… and it can be done instantly. Or removed – without shopping for a different application or trying to persuade an author of an application is a good idea.
  7. Sometimes I want to access my list from my phone or tablet. Therefore, I use a cloud spreadsheet application – and have access to the list anytime, without yet another app.
  8. Print? Sure, everyone once in a while.

I think this is a good general pattern: pick out an app for a special purpose only when there are aspects of the behavior of such an application that are not easily met with the general application. But by default, it’s your data, keep it in one of the many applications that already deals with your data in a generalized, flexible, proven way.

At the technical level, my to do list is very well managed. But what about at the logical level, what about really managing my to do list? That’s for another post.

 

Really Managing a To Do list

Earlier, I wrote about managing a to do list, recommending a boring general purpose tool (a spreadsheet) for the purpose. But what about managing the contents of the list, not just the bits? Here are some ideas that have proven useful.

  1. If you are responsible for more items than you can easily remember, have a to do list. Ignore the advice out there to discard your list.
  2. If you’re young and don’t have a list yet, consider that having one might be a necessary step to taking on more responsibilities over time.
  3. Ideally, have one list. However, if your work involves sensitive information that can’t be mentioned (even tersely) on a personal device, have two lists. Keep your work and home lists, on your separate work and home devices.
  4. Record each new thing to do, on the one list (or the one of two lists). Don’t let other extra lists build up elsewhere. No post-it notes, no 294 inbox emails each of which is a todo, etc.
  5. Prioritize the top N items on the list each day. N might be more or less depending on the size of your items.
  6. Compare/reconcile the top of your todo list, with your calendar, briefly each day.
  7. Keep a close eye on urgent vs important while prioritizing. Research Eisenhower or re-read Covey if you forget.
  8. Each week, review: prioritize further down the list.
  9. During a review, notice items that aren’t likely to ever be of enough priority to do at all, and delete them.
  10. During a review, notice items that should be on someone else’s list instead, and delegate them there.
  11. During a review, notice items that are better not to do at all, and make a “not to do” list if necessary.
  12. Beware the arrival of new TODOs that endlessly push the old ones down the list. New items that aren’t of enough priority to do relative to what’s on the list, are better of discarded.
  13. Don’t prioritize and review too often – organization good, procrastination bad.

 

Computers talking to each other

There is a lot of development going on in artificial intelligence. AI is back from the long “AI Winter”, and this time it seems like it is getting somewhere useful. There are types of programs which we would’ve previously called AI, the we now sometimes called the machine learning, doing real valuable work.

(How soon will this end up with a real genuinely “intelligent” computer program? Is the singularity near? Is it far? I have no idea.)

But I think this is how actual AI will make it into our lives. In an irritating, mundane, wasteful way.

Our smart phones are getting smarter and smarter. There are now features by which they can help us answer incoming messages, SMS and email. They can gather statistics about the way we have answered different messages, they can use all of the vast trove of data that are gathered about all of our activity (hello Google, how are you today?), they can mix in some “AI” techniques, and produce much-better-than-random results.

Now simply imagine progress on this for a few years, with faster and better processors in our smart phones and in the cloud. Eventually, our smartphones will get pretty decent at offering us proposed replies to incoming messages, guessing what we would say to each other. Eventually we will get tired of having to always tell our phone “yes, go ahead and answer the way you guessed”. We will be a switch offered which simply turns that feature always-on. Our devices will then be able to answer incoming messages, automatically, as if they are us, without our intervention.

More than one person will turn this on.

Artificial intelligence will then consist of our devices talking to each other, pretending to be us. If this works well enough, are we even needed at all? Some days it seems like all I do is read and write email. On such a day, if my devices could guess what I would’ve written sufficiently well (not perfectly, just sufficiently well), I can simply take that day off. Or that week. Or forever.

Fast Angular 2 compile cycle with TSC

There are numerous choices for tooling in a TypeScript Angular 2 project. This list is no doubt incomplete:

  • SystemJS with JSPM
  • SystemJS without JSPM
  • Webpack
  • Angular-CLI (which uses System and Broccoli and other things behind the scenes)

At Oasis Digital, we have worked with all of these variations, and experienced trouble at least with all of them but have been around long enough to have trouble with. There is no clear winner yet, there are only trade-offs.

Speed matters. Specifically, speed of the development cycle, of how long it takes to compile/recompile an application and reload it in the browser during development. (I’m less concerned with the speed of a “production build” because those happen much less often and usually without a human actively waiting.)

As of May 2016 (these things change rapidly) we have found the following yields the very fastest results for the development cycle:

  • Bundle libraries using JSPM/System-Bundler or WebPack, or use bundles shipped by the Angular 2 team.
  • Set up tsconfig to use “module”: “system” and “outFile”: “somebundlenamehere.js”. TypeScript both compiles your code, and produces a single-file bundle of the results. This is much faster than having typescript emit numerous files and then bundling them with another tool.
  • Run tsc in your IDE; don’t bother to “watch” from the command line or by other means – better for compile errors to land in the IDE. There is no benefit to simultaneously compiling in your IDE and in a concurrent “watch” – omitting that (for example, by moving away from Webpack) roughly cuts in half the total CPU effort spent on each development cycle.

To demonstrate how little work is typically needed to set this up, see the following tiny “fork” of the angular.io “quickstart”. This single commit shows the slightly less configuration needed with the “module”: “system” approach.

https://github.com/kylecordes/quickstart/commit/3cf3041dd80ee8701a3cffb0cbe6264784017a2b

Of course, there is no benefit to this change in the quickstart application – the tutorial adds only a handful of components. But we have confirmed the performance lead with other teams developing on Angular 2 “at scale”. This approach is, as of May 2016, the fastest compile-reload cycle for large Angular 2 applications.

It might not last long; there are many efforts underway, including the official angular-cli, to build better development tooling. Moreover, Hot Module Reloading might make speed up the development cycle enough that the clean-reload time isn’t important.

(Cross posted to the Oasis Digital blog.)