Dan Newcome, blog

I'm bringing cyber back

Archive for the ‘Uncategorized’ Category

CSStem

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.

Advertisements

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.

Navigation

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

Quantified blogging

with 2 comments

I’m starting to look through my blog stats after a while of not paying much attention to them. I posted the first post in over a year recently and it has only garnered two views. This basically tells me that nearly 100% of the traffic here is residual via search and maybe old Hacker News link juice.

The funny thing is that even after not posting for a while, I’m still getting traffic. It probably takes quite a while for traffic to fully taper off, if ever. As long as Google has some of these articles indexed, I think there will probably be traffic indefinitely.

Anyway, there seemed to be a lot of pressure in the past to hit my high water marks, but now I guess the best thing to do is just get a cadence back and see where things go. Just as a parting note, here is what WordPress is telling me about my best traffic day ever. I think it’s worth posting since this is what an artificial bump gets you, and it’s 100% unrealistic to live up to something like this without Hacker News or maybe Reddit.

Screen Shot 2015-11-06 at 1.16.26 PM

Written by newcome

November 6, 2015 at 1:23 pm

Posted in Uncategorized

Hello again

leave a comment »

I realized some time back that it has been a really long time since I wrote any blog posts. I’m trying to rectify this, but I’m not sure where to even start. I’ve been working for a large Silicon Valley tech company now for the last two years, so I’ve accumulated a lot of new knowledge working at scales that I only read about previously.

However, a funny thing started happening. I’m surrounded by people that are way smarter than me and know way more than I do. So it’s a bit of a task to figure out what is interesting knowledge that I can and should share. I’m working primarily on a Web framework based on Node and Reactjs so look out for some new articles hopefully soon.

As for .NET topics, it is unlikely that I’ll be writing much about this since I no longer use it in my daily work. I check in from time to time out of interest but I’m far from what’s currently happening in that world.

Written by newcome

November 3, 2015 at 1:36 pm

Posted in Uncategorized

Scripting Pure Data

leave a comment »

Graphical programming languages like PD are great for high level tweaking and live modding of programs, but they all seem to suffer from the problem where things get tedious when building some simple low-level constructs like loops or building data structures.

Pure Data has always been extensible by creating your own externals in C, but there is another step in between building subpatches and building first-class externals and that is scripting using a dynamic language like Lua or Python.

Lua vs Python

There are two main scripting languages in use with PD. I’m sure there are others, but they aren’t very common. I was actually looking initially for a way to script PD using Javascript and I didn’t find anything. I’m considering building something that embeds V8 into PD in the future. Or maybe even… gasp… the .NET framework. The choice between Lua and Python came down to the ease with which the language embedding was implemented and how smoothly I was able to get things working, rather than my own choice of language (I was rooting for Python since I already know it pretty well).

Python

The first thing I did was try to install Thomas Grill’s famous pyext. The prebuilt binary for OSX was crashing for me and I couldn’t figure out why. I got the sources and built my own binary but I was still getting crashes as soon as I loaded the library in PD. I later realized that this was something with my installed version of Python. I had a later version of Python installed using homebrew. I’m not sure if maybe I had a 64bit version installed. The only 64bit version of PD for OSX right now is highly experimental and doesn’t include things like GEM. So I’m running a 32bit version. All externals need to be 32bit as well. So I’m wondering if that was part of the problem.

Anyway, once I reverted back to Python 2.7.2 that shipped with OSX pyext worked fine. I still have some crashes with some of the demo patches though.

Installing pyext involves dropping py.pd_darwin under ~/Library/Pd. Then I was able to open the demo patches from the source tree. Note that many of the patches require the library to be loaded already, which can be done using the -lib py startup flag or by simply instantiating the [py] object in any open patch. When it loads you should see some text printed to the PD console window.

Instantiation looks something like [pyext <script> <object> <args>]. As we’ll see this is a little more cumbersome than Lua.

Lua

Having never had experience with Lua, I was hesitant to try this out but I’m glad I did. Actually the only reason I did was that I couldn’t get Python to work right away. Lua is interesting in that it has only one built-in data type: the table. Fortunately tables can represent just about any other data type like arrays and maps. The code for generating PD objects is very concise, even more so than some of the Python examples, which is somewhat hard to believe. Also there are easy provisions for registering names directly to PD so that objects built using Lua can be instantiated without any sort of extra syntax, which is pretty awesome. Loading a single Lua source file can register any number of externals that can be instantiated as if they were normal PD abstractions. Read that line again and rejoice.

Installing Lua isn’t necessary, as it is already part of PD-extended. Simply instantiate [pdlua]. We can open a file then with a load message sent to [pdlua].

Going forward I’m going to be using Lua, mostly for its ease of registering names in PD and nice clean instantiation of abstractions built it in. I’ll cover some programming issues I encounter in later posts.

Written by newcome

December 29, 2013 at 9:56 am

Posted in Uncategorized