31 March 2015 by Mike on software | links | markdown | mac

Thanks, Byword

David Sparks still loves Byword and by golly I do too. I write most everything that's longer than this post in it, although lately I've been running things through Hemingway as well.

I struggle with the hype that inevitably surrounds each new and shiny Markdown or RTF editor that costs $40. Most do literally nothing that Byword hasn't been doing for years now for five bucks.

11 March 2015 by Mike on front-end | reactjs

Solving the Seven Sins of CSS

Saving babies and bathwater

Recently, the ReactJS community has set its sights on a new method of building styles into React-based front ends. It comes straight from the source, Facebook. Here's the deck.

I think this presentation makes a lot of sense to a lot of developers who've begun to think in the component-based (and honestly very sensible) React methodology. But there are a lot of strange justifications and a path paved with over-engineering that leads to vjeux's ultimate solution.

Warning: This is long.


The Problems

First, here are the problems that vjeux outlines. I'm not here to provide better solutions for them, but I will say that in many cases, they're not really problems at all.

1. Global Namespace

Firstly, I think this is key to illustrating why a developer of vjeux's caliber can have a great thought process but miss the boat to some degree on CSS. He calls a class a "global variable." This seems at first like a matter of introducing programming semantics into the conversation so we all know what we're talking about, but I think it's conflating what a class and a variable actually are. The word itself indicates that the value of a variable can change — if anything, a CSS class is a constant. It's simply a pointer or reference. If you prefer, a class or ID selector is a set of rules more akin to a function (or, in OO, a class... probably no coincidence there).

But getting away from a concept I honestly feel somewhat inadequately equipped to really talk about at length, the "namespace" issue itself is the first of these that isn't really an issue. A class living on its own, even one attached to an element (e.g., div.myclass), does inhabit a "global" namespace in the sense that you can use that class anywhere with no limitations. Only good practice will limit you. But writing self-contained rules is not incredibly hard, is it? Take this piece of LESS (roughly identical in SCSS):

.specific-container {
	  input.super-specific-input {
	    /* style rules */
	  }
	  label.super-specific-label {
	    /* style rules */
	  }
	}
	

In the sense that .specific-container is available to use and abuse anywhere, it is a "global" element. But that class in itself becomes an effective namespace for anything within it. And a few simple naming conventions can take that further.

I can barely think straight to comment on these (literally) backwards extensions that the Facebook team apparently wrote before arriving at the conclusion that they should abandon CSS altogether.

2. Dependencies

I'm not entirely sure I understood this section, mostly because the expectations of CSS working like a build process (i.e., errors should cause everything to break) is such a foreign concept to me.

Maintainability and monitoring the Cascade used to be a huge issue with CSS. This is something that preprocessors have solved incredibly well, even though they don't change many fundamental aspects of CSS. That includes the Cascade itself, but one of Less's early counterarguments was that the ability to write such modular CSS discourage "proper" or cascading use of styles. I'm not exactly pedantic on that myself, but if one were so inclined to write completely modular Less/Sass with no globally-impacting styles and no large-scale cascading, it's not very hard to do. Basically the above example, repeated numerous times as separate files and associated with each module or UI component, becomes a set of dependencies. These are easily managed by Less/Sass imports.

3. Dead Code Elimination

Near as I can tell, what they're referring to as "dead code elimination" is a product of their own solution. I can't really speak to this.

What I can say is that poorly-maintained, long-running, legacy CSS (the old way, without the concatenation made possible from preprocessors) is a problem for a lot of people. This is not a fault of the language itself. Less/Sass certainly make it easier.

4. Minification

Maybe someone can help me here, but I'm confused about this one — the old, extended-CSS solution let Facebook's developers use incredibly weird, non-semantic, but very short class names in order to save a couple bytes. It's bizarre but has its logic. So how does programmatically replacing a token with a long list of inline styles — which are maintained as a single component but echoed into a page once for every instance — save bytes? Not sure. If semantic class selectors is a problem of byte size, that's fine, but I don't think it's one that huge, redundant inline styles can solve.

5. Sharing Constants

What's the old quote? There are two hard things in computer science: cache invalidation and naming things. Making your stuff sync up between content, presentation, and behavior is a problem old as the hills, but most teams don't have the specific problem in this deck because they're not working with this weird system.

What vjeux shows here is a worst-of-both-worlds scenario where style has been mixed into behavior, but not all the way. I would argue that yes, in fact, his completely inline solution is a better answer than the hodgepodge here.

var buttonPadding = 5;  
	

Reading that physically hurt me. He says "unfortunately there are many real world use cases where you need to do it." Not sure I buy that. If you really, really feel this need, there are tools for your Grunt or Gulp file that will transform a list of Less/Sass variables into Javascript at build time and thus keep the values synced automatically.

Upon reading the solution they developed, I got pretty confused at "CSS Variables."

6. Non-deterministic Resolution

This is another case of holding CSS to the same standards of behavior as a logical programming language, which it is not. The "linear" flow of later rules overriding earlier ones is always something that programmers struggle with because they can't organize things according to how they like; they must organize according to how the web browser is going to read the document.

Writing with the modular, "namespaced" blocks of Less/Sass eases these problems in two ways: one, confining the rules to their own pocket of markup will keep them from affecting anything else in the application, and two, the ease of auditing the styles will prevent unexpected cascades.

7. Breaking Isolation

I feel sad for the team at Facebook who've been burned by a poor understanding and even poorer practices of CSS writing. Overriding in the way shown in the example is unfortunate. But imagining myself as a designer in that organization, forced to think in an upside down way about my CSS, it kinda feels like it's no wonder the designers reach for non-ideal solutions as long as they work.


My Problems with the Solution

I can certainly see the appeal of just styling within the component as Javascript. The author does fall into a pattern that is common among devs (I've done it too): a post-hoc justification.

Second, style is actually a much better name than class. You want to "style" the element, not "class" it.

Let's not bring the semantics into it — I get that the actual english words make more sense, but we've all agreed on what that word means in the context of markup. This is a side point though.

1. Redundant bytes and information

Whether you're talking in terms of human readability or the space taken on disk/downloaded over the internet, I have to question whether multiple references to a single CSS class:

.btnClass {
	  background: #333;
	  border-radius: 2px;
	  color: #fff;
	}
	

is not preferable to

<button style="background:#333;border-radius:2px;color:#fff">One button</button>  
	

repeated over and over throughout the application. And here of course I'm using a very simple example; most real-world CSS rules are going to be significantly larger. This is one of those questions that I assume has been empirically answered, but there isn't a lot of usage of this method going around yet, so I don't know.

2. Separation of Concerns

I get the very real benefits in React of mixing concerns while separating physical application pieces. Everything associated with this piece (structure, style, behavior) is in one place, so I know exactly what needs to be done in order to make a change to that piece.

But part of the benefit of the classic "separation of concerns" philosophy is the ability to take a holistic look at the styles. For all the supposed solutions with regard to maintenance and dead code elimination, I'm afraid this has created many more potential ones. Obviously, this is to some degree going to be dependent on how a React application is structured, but components can't truly share stylistic elements, even if they have individual styles in common. So the ability to change that stylistic element from a central place is now lost.

The best we can really do with this method is reference a central variable, or possibly (I'm not even sure about this) something like a mixin. Like any of the CSS-based solutions that vjeux writes off as non-enforceable, this requires good practice.

3. Separation of Work

vjeux himself admits that part of the motivation for Facebook's crazed bolting on to CSS is due to having a large team of developers working on highly focused portions of code, most wiht limited expertise in front end. This is, let's be frank, not an uncommon problem but it is a specific one.

Though tools like KSS have been around for a while, style-guide-based development is just now coming into its own. Mailchimp, Starbucks, Lonely Planet and others have made huge and very public strides in building component libraries that developers can then reference and drop into new pages.

The benefits are easy to see: a streamlined design process, easy enforcement of standards, and a refocused approach that encourages solving problems with the same design patterns where possible.

With all styles inside the React components, control over front end is not only not handled holistically, it is handled entirely by developers who may or may not have much expertise with browser discrepancies, best practices, and all the other myriad of things that CSS writers actually focus their time on.

4. Missing Features

Generated content and other pseudo-class selectors are pretty much not available here. Is it overkill to impose a hover state just for a color? Perhaps not with React, whose bread and butter is state change.

And what about media queries? This is beyond unfortunate:

Not the best Responsive Design

Toward a better way

These are all fairly new issues. vjeux's still giving this presentation, and it only went online in November. React developers are still discovering the process and trying it on. The argument on Hacker News is still somewhat active.

My problem is not with upending dominant paradigms. It's not with trying to find new ways of styling. But ditching most of the primary benefits of CSS/Less/Sass and justifying that with arguments based on some inaccurate assumptions is a paradigm shift that doesn't quite feel necessary.

09 February 2015 by Mike on fb | long | personal

So Long, And Thanks For All The Lone Star Tallboys

I spent 7 years in Pittsburgh, another in Detroit, and now just shy of 7 years I'm leaving Austin. That's as lucky a number as any, although it feels like an incredibly short time in a city that grows and changes as rapidly as this one. But ultimately, the exciting stuff in this town suits young people who go out a lot, tech-libertarians, people who aren't yet sick of Texas's inability to "do" public transit, and the sort of day drinkers who've always occupied the Town of Linklater Films.

At least, I'll probably continue telling myself that indefinitely.

But there's a lot of truth there — it really is tough when you have a young child to even imagine enjoying the fruits of a town known for its nightlife, and eventually you start to wonder if that's really for you anymore. As a musician, it's hard to always play for nobody or to keep pace with the younger, better looking indie-poppers filling up the increasingly snobby and hard-to-book venues. As a person who tries to have some perspective, sometimes taking a step back you realize how much Austin is clinging to its fun slacker persona, even as it gets big enough that it really could stand to clean up its act maybe just a little before it loses everything that people love about it.

This isn't about how "Austin has changed, man"; That was old even when I moved here. Of course places change and that's part of what makes a town ok to continue living in more than 7 years. But I'm not a lone wolf slacker musician, I'm now some kind of "family man" (imposter syndrome doesn't just work at your job) and that is a super rewarding part of my life that's taking me away from the both the eye-rolling mustachioed coolness I'm so over and the merciless, dash-cracking sunshine I love so much. So yeah, there is a flipside.

I wasn't too great at making friends until moving here. I've become more social and worked in an office again, so I'm leaving behind maybe the closest, coolest bunch of people ever — people who, I'd like to think, "get" me.

I'm not exactly headed to unstable territory now, but if I'm being real it's difficult to leave behind 75-degree winters, constant restaurant openings, or that slight swell of pride when even a big city slicker's eyes brighten at the mention of where you live. It's even harder to leave those friends I've worked with, played music with, or lived next to. Having them all gather at a party for us yesterday was beyond cool — it was downright humbling that that many people care enough (A friend called the beautiful weather "one last kick in the nuts").

party

Now... It's not in the least bit hard to leave constant traffic, lines to sit in literally every one of those restaurants, or the Texas government, none of which are gonna go anywhere anytime soon. And I could do without the hypocritical faux-liberals who nod sagely about how we need affordable housing and mass transit, but then get all predictably NIMBY when it comes time to do something.

But rather than dwell on what great things I'm leaving or bemoan the bad ones, I think it'd be more productive to commit yesterday's laughs and hugs to memory, give thanks for the all that's happened to me here, and think of what other positive stuff lies ahead.

I know I'm going to a culturally rich, meteorogically mild place with incredibly friendly people, and my new commute is going to add hours to my week (time) and probably years to my life (I-35 stress). But that's just the beginning. Now that I'm a little better at life than I was seven years ago, my hope is that I can create an even more amazing one there.

If this is me in the "Before" picture, look for the "After" soon. And at least check out my Instagrams from the road.

27 January 2015 by Mike

My favorite albums of 2014

Now that it's almost February, I assume everyone has already read all the best-of-the-year lists that matter to them. So here's one that won't. These are the best records I heard that came out in 2014.

Ben Frost - A U R O R A
I honestly really didn't know anything about Ben Frost and hadn't heard his earlier stuff, but this is a magical concoction of computerized and percussion-heavy experimental electronics that takes me back to the days of playing shows with fellow laptop jockeys and industrial car-part-smashers. It's a varied, rich, and constantly surprising piece of work, and it has Thor Harris on it too!

St. Vincent
I've seen St. Vincent, and I've heard pretty much all of her albums, but this was the first one to really catch my ear. This is the kind of art rock that people like Peter Gabriel and Kate Bush used to do — accessible but genuinely attempting to go places. She's also the kind of guitar player who's super talented but intriguing, not shreddy.

Scott Walker and SunnO))) - Soused
As Scott Walker gets increasingly prolific in his old age, it's starting to be apparent that he's actually got a pretty in-tune sense of humor. On paper, Walker with Sunn is the Lou Reed/Metallica album that actually works. In practice, it's basically a Scott Walker album with guitars, and that's just fine.

SWANS - To Be Kind
The Seer was maybe the peak of Gira's output, ever. It was the realization of the promise that Swans are Dead teased us with just before he originally disbanded the group. The only thing wrong with To Be Kind is that it's not The Seer.

Sumerian Fleet - Just Pressure
I basically kind of started following Dark Entries records around the time I got super into the Minimal Wave catalog as well. That led me to their flagship release of 2014. This retro slice of Linn-driven heavy old-school EBM meets sparse synth-wave makes me think of the best of early 242, and it's immaculately produced.

Run the Jewels 2
It topped a lot of the pros' lists, and it's probably obvious why. The first RTJ was a cool side project, but the real potential of an El-P/Killer Mike collaboration opened up on the second one.

BLXPLTN - Black Cop Down
This is one of Austin's most exciting local bands, but they're not going to get the press that the mellower or more rockist indie groups will. They're a hardcore band with a drum pad. What a weird thing, but they're so fierce, catchy, and fist-in-the-air angry it's hard to deny the live show or the record.

Protomartyr - Under Color of Official Right
The first Protomartyr album was kind of out of nowhere, and doing the jagged Fall-inspired post-punk thing in Detroit is unexpected. But the production is better, the songs are tighter and darker, and Joe Casey's incredible lyrics are more audible on the second one. It's a mix of a realistic portrait of alcoholic depression, a lament for Detroit, and what Casey calls "bad dad songs" (one of which, "Bad Advice," is about Kwame). This, from "I Stare At Floors," sums up well:

The day comes
same as before
it goes on again
the television a concave window
lawyers and murderers
the Law's confusing, the Order makes no sense

Scratching the skin
Staring at walls, staring at floors
The plan today is not to die
The cure-all's always over ice

I listened to it every day for like 3 months and still can't get enough.

Other stuff
Fennesz, Aphex Twin, The Bug, FKA Twigs, and of course Shellac all put out solid albums this year that I enjoyed a lot.

Honorable Mention from 2013
Speaking of Minimal Wave, I also discovered Veronica Vasik's sub-label Cititrax and the act Kontravoid. He apparently used to be the live drummer for Crystal Castles but in any case his self-titled dark synthpop LP from 2013 got a lot of play from me as well.

20 January 2015 by Mike on UX | links

UX for Enterprise

A good read, although a bit long for something that I've repeatedly had to answer more concisely as an interview question.