Dan Newcome on technology

I'm bringing cyber back

Go to the H1 of the class

leave a comment »

I’m refactoring some HTML right now and it occurs to me that headings are problematic for non-frontend devs and inconsistently used at best among frontenders.

When I was at Yahoo a big part of the styling philosophy revolved around Atomic CSS. These were the kind of predecessor to React’s JS-like inline style declarations. Styles were generated by a post processor based on descriptive short class names. Eg, display: inline-block becomes D-ib for example (not the real syntax anymore but similar idea). The compiler would generate a the stylesheet to make the class name work, eg

.D-ib {display: inline-block}

The reason I’m bringing this up is that headings typically have some styling associated with them. The base stylesheets of browsers define them, and they are block-level at the very least. Most CSS template systems further define them and/or do some kind of “reset” that redefines them.

At a basic level, heading tags are semantic, telling an agent at what level in the hierarchy of information this markup resides. That’s basically it. I’m coming to think that in the age of components we need to treat headings as relative and purely semantic. On one extreme I see developers using just div everywhere. This gets around the problem of default stylings but throws away any attempt at semantic hierarchy. Maybe they sprinkle in some non-standard class name scheme for that.

Ideally H tags would have no styling different than div. Components always start with H1 at their top level, and would be rewritten during page composition to the appropriate depth based on “root” heading level. Styles are applied separately. Possibly inverting the “additional semantics” pattern by supplying “additional styling” even using .h1 class names. This seems like an anti-pattern at first but then some common trends in React styling started as anti-patterns as well.

Written by newcome

July 3, 2019 at 9:39 am

Posted in Uncategorized

Simple Ubuntu Desktop with Vagrant

leave a comment »

I wanted to spin up a Linux development environment to hack on some code that needed epoll. I could have run everything in a Docker container, but I kinda wanted to be in that environment for total hackage.

I thought maybe I’d just do it in a Virtualbox instance. Then I didn’t want to install Ubuntu or anything. Then I realized that Vagrant is supposed to solve this problem. Installed Vagrant and used Ubuntu Trusty – https://app.vagrantup.com/ubuntu

$ brew cask install vagrant
$ vagrant init ubuntu/trusty64
$ vagrant up

Then I realized I wanted a minimal desktop.

So googling.

Yep, XFCE FTW. https://stackoverflow.com/questions/18878117/using-vagrant-to-run-virtual-machines-with-desktop-environment

Then install chrome. It’s easiest to SSH into the instance and past this stuff in through the native shell.

$ wget -q -O – https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add –
$ echo ‘deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main’ | sudo tee /etc/apt/sources.list.d/google-chrome.list
$ sudo apt-get update
$ sudo apt-get install google-chrome-stable


In Virtualbox

$ startxfce4&

Written by newcome

June 25, 2019 at 3:27 pm

Posted in Uncategorized

Forgotten Javascript

leave a comment »

Every once in a while I get reminded of some dark corner of Javascript even though I’m developing with it every day. I give a lot of JS coding interviews and every once in a while something comes up that I hadn’t anticipated in the questions that I usually ask.

Recently someone tried to solve one of my coding problems using arguments.callee. I hadn’t thought about this variable in a while, and I realized why once I looked it up on MDN.

The short answer is that it doesn’t work in strict mode, which of course everyone is using right?

The long answer is that you are effectively looking at the call stack, which in most languages is sketchy due to compiler optimizations (function inlining, etc). In C# I have seen some code that relied on applying the attribute [MethodImplAttribute(MethodImplOptions.NoInlining)] to the function to keep the compiler from inlining it.

This got me thinking about today’s highly-optimized Javascript runtimes. Surely they can do inlining when generating target code right? It turns out that yes, they can, and even better, in the case of V8 we can trace how the optimizations are applied.

I took the example I found here and ran it myself to verify that my version of V8 installed via homebrew on OSX was performing the same optimizations.



Written by newcome

March 27, 2019 at 12:58 am

Posted in Uncategorized

Micro thing-uses

leave a comment »

Hello friends. I’m still writing code every day, believe it or not. I’m back in startup land. Away from big tech land mostly. Seeing both sides of the coin has been helping me have some insights I didn’t have before on the open-source adoption of technologies that trickle down from big organizations.

In the past I have mostly held the position that Your’e Not Gonna Need It with most things involving scale or performance, or (insert x thingy). Big companies need to deal with multiple facets of scale that you don’t need when your entire engineering department fits at one desk pod.

However, there are some success stories around the adoption of some technologies and some failures. I’m not sure yet if I can draw conclusions yet on what tips the scales one way or another. I think the elephant in the room right now is microservices. Leading up to microservices was containerization.

What are the technologies? Docker. Kubernetes. Lambda. Graphql. Apollo.

These don’t seem like they have that much in common but they are all attempts at granularization of the solution space in some way.

The monolithic app has been derided since I started in the software industry. My entire career we have been splitting things into libraries, creating dependencies and fighting the ugly monolith. He’s an easy enemy. A strawman. Kill the monolith!

Companies like Microsoft, Google and Facebook have been  known to keep all their code in one big repository. A monolith? Not necessarily but in some cases yes. Death to the monolith, long live the monrepo?

The distinction between units of code reuse and units of deployment is still something that confuses the issue. Remember n-tier apps? Of course we will handle x in the n tier. In reality there was one server with all the tiers on it. Was the database a tier? How many cycles of splitting and joining database schemas did the app go through?

It was an imperfect abstraction at best. What is a tier?

Now I ask, “what is a service”? What makes a service “micro”?

This post is not for answering questions but for asking them.

When we wrote .NET remoting objects, were those microservices? Why was DCOM so hated? Were they microservices? Remember registries for COM components – service locators in Java? Is this the old new thing, microservices?

Two ideas in computer science that have endured like viruses are functional programming and the UNIX philosophy. Why are these good ideas? Maybe they are bad ideas but somehow they keep popping up like bad pennies. Functional means never having to remember that you said you were sorry. UNIX means dance to your own drum beat, but only one.

Are UNIX commands proto-microservices? Is Bash the proto-orchestration framework? We are giving way too much credit to the shell here. It was UNIX pipes that was the stroke of genius. Does UNIX have side effects? Does it ever. However it’s interesting that there are some general patterns that hold. Standard I/O, return codes, and file handles cover almost everything. Pipes are special files. Sockets can be as well. So two basic subsystems cover almost everything in UNIX.

This brings us back to making some generalizations about service models. Why didn’t CORBA deliver on its promises? .NET remoting? I’m going to put out a strawman here and say – state and side effects.

Sounds like a familiar refrain. Functional programming vilifies these two things as its raison dêtre. What if, rather than fighting state and side effects, we use these as the very definition of a service? Monads are designed to encapsulate state. Could the same be said of a microservice? What about side effects? Any time in a system that there is a state boundary, is that a microservice? What about a specific side effect?

I was going to philosophize on containers and connectivity here too, but I think I’ll save it for next time.

Written by newcome

March 26, 2019 at 2:38 pm

Posted in Uncategorized

Editing Javascript

leave a comment »

One of the things I heard over and over again when I first started doing large applications with Javascript was “which IDE do you use?”. At the time I was using Visual Studio. Believe it or not, ancient Visual Studio had pretty good debugging capabilities with Internet Explorer. Everyone knows now that duo did not last.

There was a long stretch of time where I was using the editor of the month. Sublime text or something along those lines. Extensible editors were the rage but it didn’t feel like Javascript was a first-class citizen. I used to tell people that I didn’t use an IDE, which was not really true looking back. I had (and still have to some extent) a collection of VIM scripts that did things like open my editor windows and manage files on the left side. Searching open files and switching buffers. Compared to event to the old Visual Studio it was a little crude. But it was fast and it worked.

Later on I worked for a startup doing Python development. Intellij’s PyCharm was the IDE that we used there and it was amazing. Just every little thing catered to the language and I realized that the shortcuts from their Java IDE were the same. Later when I moved back to doing JS I tried out WebStorm and was hooked.

WebStorm is an amazing IDE. JetBrains did a great job at making it a seamless and consistent experience. Over time I think I kept buying it and extending the license. I ended up using Atom on a team at Yahoo along with the other devs and forgot about WebStorm for a while. Atom was a good editor. It was cool because it was written in Javascript. It was a JS app. While this had a certain appeal, there were some limitations that irked me like speed and opening large files. Coming from VIM this is kind of hard to compete with but it bothered me nonetheless.

I joined a new startup and loaded up WebStorm for the first time in a few months and realized my license had expired again. Not wanting to expense this on my first day of a new job, I opened up MS Visual Studio Code (VSCode). I had it installed out of curiosity that MS was doing an open cross-platform editor written in JS like Atom of yore.

I installed some plugins and started using it. Some people at work asked me what I was using immediately. People started using it. It was catching on for some reason. One guy found that it had a plugin for Emmet HTML generation and he was hooked. People were starting to use it and it seemed like overnight everyone was there. I never even advocated for it, it just happened.

Whatever the case JS is a first class citizen and there are tools out there that rock for dealing with it. The days when I tell people I don’t use an IDE for Javascript are over.

Written by newcome

January 15, 2018 at 1:25 pm

Posted in Uncategorized

Front-end trends

leave a comment »

The last few years have seen an incredible acceleration in the JS and general front-end ecosystem. However, the more things change, the more that they stay the same. The general problem that the Web is solving is still the promise of write-once run most places in some compatible way and without pre-installation. The paradigm is so strong that even native app development is trying to get in on the action.

In the last few months I’ve been involved with a production React Native iOS app and a Chrome extension and a “regular” React JS app. Javascript is everywhere and the tooling has become so fluid that we end up with new tools and best practices between projects only months apart.

When I was working on the Yahoo homepage, the decision to use React had just been made. The Media organization did a full turn to embrace it. The Web framework being used was called Touchdown. The “old” touchdown used Jade templates believe it or not. This had been pretty cutting edge only a year or two ago. Since we had control over this framework we went full steam into converting everything to use React.

However, there were a few old-timers around still that would just open up debugging tools or run things through a proxy and point out all of the issues we were ignoring about page weight, multiple requests, slow rendering, web fonts, and a litany of other issues. This is the old school web. The browser makes requests. CSS comes down the wire. Things block. JS is parsed. Rendering happens. Repaints, reflows, DOM thrashing.

React was created to solve a problem. The problem was how to make rendering UI based on data mutations predictable and easy. That’s really it. It didn’t tackle any of these other issues of content delivery or page performance other than to make disposing and updating DOM very fast and efficient. Effectively re-render for (almost) free. There were some leaks in this abstraction that could be patched manually with things like ShouldComponentUpdate.

Already there are serious competitors to React like Vue and Marko. Web Components have been on the horizon for some time now. We will likely learn the lessons of react and move on.

The JS ecosystem can be likened to learning how to learn or designing a process to produce and artifact faster rather than producing the actual artifact. Babel is ubiquitous so we are transpiling our code everywhere. I wonder if JS is even going to remain. Once browsers support a more general virtual machine and we transpile our JS to that VM, nothing is stopping us from replacing JS wholesale in this ecosystem.

Which brings me back to my initial point. The more things change the more they stay the same. Web front end has nothing to do with JS specifically. It’s HTTP requests and assets. DOM and styling. Browser rendering engines.

Written by newcome

January 15, 2018 at 11:48 am

Posted in Uncategorized


leave a comment »

I’m trying to distill some design wisdom I’ve come across over the years doing front-end work. There’s always this phase of any project where designers have a system of styles and components in Sketch or Illustrator. Sometimes this system is ad-hoc and sometimes it’s quite premeditated and referential. Either way the system must be translated to code by developers.

In the code world, we strive to define things as few times as possible (ideally once) and reuse things where we can while still allowing us to easily break out of the defaults where we need to without much effort.

Getting this all set up is easier said than done and many times the system is quite clean until part way through the project where it gets messy all of a sudden when some assumption made earlier suddenly doesn’t apply after all.

I’m being deliberately general here since what I want to do is put forth a few simple rules to derive the specifics from. These are:

Avoid semantic styles

When I was first introduced to atomic CSS I started to realize how problematic commonly created custom CSS rules like `button` and `top-navigation` were. This is the root of unmaintainable and impossible to reuse styling. Atomic CSS espouses composition of small rules. If `button` is a rounded corner box with a border and gradient it’s better to have rules for the border style and background applied separately to form a component called `button` rather than describing the styling directly in CSS.

Themes are pulled instead of pushed

It’s tempting to create page-level rules that define things like font sizes and colors. This is dangerous because it’s hard to prevent unwanted side effects in the components to which the rules are applied. It’s also tempting to create top-level rules that affect only certain things on the page but not others by pure coincidence such that later changes will cause undesirable effects that need to be locally overridden. Theme elements should be available globally but applied locally. I’m referring to this as “pulling” values from a global context rather than having the CSS engine “pushing” things down automatically from the stylesheet.

Themes consist of a fixed set of attributes

Decide on a fixed set of things that are part of a theme. This includes colors, sizes, border radii, etc. Provide default values in the theme. Having well-known theme elements will avoid confusion and allow re-theming to be done smoothly without errors.

Use sequences/functions (scales) for sizes

I learned a secret about layout from a CSS library called Tachyons. The idea here is that you don’t need that many pixel sizes to make a well-designed layout. In fact the sizes/proportions that aren’t used are just as important as the ones that are. Make omission part of the design. An example here (I never used this, and it probably looks bad but it illustrates the point) is to use a Fibonacci sequence for margin sizes [1,1,2,3,5,8,13…]. I think of these like a musical scale. There are certain notes (sizes) in the scale but some are omitted.

Distill intent

It’s important to specify the meaning of layout and positioning. What I mean by this is that sometimes designers will nudge spacing around elements to that they line up in some way that isn’t explicit by looking at the design. For example an element might be two-thirds of the way down its parent but looking at the Sketch layout we see that it’s 235 pixels or something like that. It’s easy to see centering and sometimes the tools support notions like that but often implicit layouts are hard for developers to pick out.

The only answer here is to design with these intent rules in mind and call them out or reverse-engineer them with the help of design by asking “what did you mean here?”. Which brings us to the last point:

Specify exceptions

Not everything fits into a neat box and sometimes design is akin to kerning text where we need to take visual weight or color or any one of a hundred different subtle factors into account when doing layout. Exceptional cases should be called out and reused if possible. This is kind of an anti-theme. The things that apply once instead of the things that apply always.

I’m thinking of calling this CSStem (CSS System). I’m not sure what form it will take. Probably a document and some examples along with tooling for generating a style guide/gallery/storybook type of web page as output.

Written by newcome

August 23, 2017 at 5:33 pm

Posted in Uncategorized

Sprint tactics versus strategy

leave a comment »

At work right now we have moved from a one week sprint to a two week sprint. This didn’t seem like a big deal at the beginning. The idea was that we spent a lot of the time as a percentage of the work week doing sprint planning and retrospectives. We thought that a two week sprint would let us get an ideal ratio of work to planning.

The reality is a bit different. What we saw was that we had to do a mid-week correction after things didn’t go as planned in the first week. This arose on Tuesday standup of the second week as we looked at the burndown chart.

I’ve been a few places now where we wanted to change the sprint length, and I think I’m starting to see a pattern. The stakeholders see sprint planning as a strategic tool, and the implementers see it more as a tactical tool. Strategically it is advantageous to see out two weeks in advance, but tactically it’s more useful to look at the next few days. I think a lot of conflict and misunderstanding around agile stems from this split.

So is a sprint a strategic tool or a tactical one? I’m still not sure.

Written by newcome

May 16, 2017 at 9:53 am

Posted in Uncategorized

React Native

leave a comment »

I’ve started a major React Native app recently after doing a bunch of “regular” react stuff. I had pretty early access to React Native when it first came out, but really didn’t check back in on it until I started using it in earnest recently. It turns out I had some preconceptions about it that aren’t really accurate and I thought it would be interesting to talk a little bit about that here.

Write once, run anywhere

We’ve heard this one before. The first for me was Java applets, but some form of this narrative seems to pop up in different forms over and over. The Web is pretty close to this but it’s more like “write once run most places sort of”, which is honestly a little bit better than “write once crash and do nothing in 10% of target environments”.

How does this relate to React Native? Well, in the back of my mind I thought of the project this way. Write React components and use them on mobile and the Web. Well, it doesn’t take long to realize that there are no divs in React Native. In fact apart from the same jsx syntax, the components are all different. What about CSS? That’s there sort of, with slightly different attribute names. Oh and layout is centered (no pun intended) around flexbox.

Components and Composition

Ok, this one I actually had right. The basic ideas around composing an interface translate pretty well, just without much ability to share components between Web and native.


Getting from screen to screen is totally different using React Native’s own navigation components. This makes sense since the target is different, but again, it’s a major difference between a Web app done in React and a React Native app. Apparently react-router now supports React Native as well but from my cursory looks it’s not clear how standard app navigation transitions work in that context.

That’s it for now. I’ve been super busy lately but more React Native stuff to come.

Written by newcome

May 15, 2017 at 2:13 pm

Posted in Uncategorized

React reactions

leave a comment »

One of my past articles commenting on the future of Web development has gotten consistent traffic in the years since I wrote it, and now I feel the need to follow it up because I think I was way off about a few things.

Just to be clear up front, Reactjs is eating the Web when it comes to front-end development. I’m aware that Angular and Emberjs hold sway in many shops, but I think that the virtual DOM model that react is based on will eventually become a standard way of dealing with front-end Web development.

Most frameworks and methodologies in the past have centered around data binding or observers of some sort to implement some variant of the MVC stack. React really just implements views. The difference is that the views are much simpler than the average MVC view (in which case the view really has some complicated state-management code along with it that makes it more like a view+viewmodel to handle updates to its state).

React views still have state, but the view is re-rendered fully every time the state changes, rather than having some kind of JS functions for things like adding/removing items from a list. This fact makes the nuts and bolts of keeping a dynamic view up to date trivial. No sequence of add/remove/updates need to be tracked in order to manipulate the DOM into the state needed to accurately reflect the current application state.

This isn’t without its problems though, since many things in the DOM don’t like to be manhandled (iframes). Also, React basically has full control of your DOM. If you don’t want React to mess with something on the page, you are out of luck unless you want to put it outside of the React render tree.

Apart from views, the Reactjs model is a little more ambiguous. Facebook prescribes the Flux architecture, which essentially leaves everything up to you other than the enforcement of single-direction data flow.

I’m going to save Flux for another article, but just to give you a teaser I think that functional programming is finally winning. Neckbeard nerds have been blabbing about functional forever now (I love me some Clojure) but I think that when the tide turns (as it has) away from Ruby-style mixins to higher-order components we are going to see things really starting to shift.

Written by newcome

November 6, 2015 at 1:46 pm

Posted in Uncategorized