Basic bash, node, and npm setup on Windows

I never thought this would be something I’d be writing about but it’s actually super exciting. This has been a major bane when trying to dev on my Windows machines. A lot of developer tools installation instructions walk you through some terminal commands, then the Windows people are all commenting at the bottom trying to figure out what additional steps need to be taken to make it work on Windows. This is crazy, and I’m glad Microsoft recognized this was a problem and included a bash prompt on Windows 10.

When I first installed it and launched it, I didn’t quite get it. I was in a ~ home directory but it wasn’t my Windows home directory which I kind of expected. I was in the home directory of this Ubuntu VM that has been booted to provide a bash prompt. I searched around and found that if you want to access your Windows home folder through the bash prompt, you’d have to:

cd /mnt/C/Users/<USER NAME>

Ok, now I can do an ll command there and see all my files, just as I’m used to when working with Linux and Macs. Pretty exciting!

Now, I don’t want to cd to my Windows home every time I login. To get around this, I edited my .bashrc file with an alias. The .bashrc file is in the home (~) folder of the Ubuntu VM.

alias home='cd /mnt/C/Users/jfitz/Workspace'

This sets an alias for home so anytime I want to go back to this directory I can just type “home”. It also executes so that when bash starts up I’m already in my Windows home directory.

Working with node and npm

I tried to install create-react-app via npm and got the following error.

npm ERR! Linux 3.4.0+
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install" "-g" "create-react-app"
npm ERR! node v7.4.0
npm ERR! npm  v4.0.5
npm ERR! path /usr/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access

npm ERR! Error: EACCES: permission denied, access '/usr/lib/node_modules'
npm ERR!  { Error: EACCES: permission denied, access '/usr/lib/node_modules'
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/lib/node_modules' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

Turns out, this is a permissions issue that can be easily rectified.

sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/lib/node_modules
sudo chown -R $(whoami) /usr/bin

The future

It would be absolutely bonkers if you could launch Windows apps from the bash terminal. So say I’m in my Workspace folder, I’d be able to open up Sublime text or PHP Storm from the bash terminal. I looked into this situation and there is an issue thread on Github. This comment is pretty promising:

The project definitely has its issues, but its very promising to see Microsoft trying to make this work. I think we’re another year or two off from having a super solid *nix development environment in Windows.

Successful web projects begin with content

If I had a nickel for every time someone jumps to design and layout in a web project meeting, I’d have about $5 (that’s a lot of nickels).

As Mike Monteiro puts it in his (excellent) book You’re My Favorite Client:

No one comes to a site because of the design. They come for the content or the service, like booking air travel. The design should encourage them to stay, offering a wonderfully easy-to-understand and even delightful way to interact with that content or service. Bad design can certainly bury good content, but you can’t design a “premium experience” and pour crap content into it with any expectation of success.

I think this is a little scary for people who design and make websites, because it demotes the importance of how a site looks.

Consider this post from SimpleBits:

This is my favorite website. I visit it almost every day. It’s not responsive. It’s not optimized for iPhone. It looks blurry on a Retina display. It doesn’t use the latest HTML5/CSS3 framework. It doesn’t have a thoughtful vertical rhythm. The fonts are nothing special. It is neither skeumorphic nor flat. It doesn’t have its own favicon. It doesn’t have a native app or Twitter or Instagram. It doesn’t use AJAX or SCRUM or node.js or Sinatra. It doesn’t have an API or an RSS feed or VC funding. It hasn’t been featured on a prominent tech blog or won an award.

It tells me the soups of the day.

Freely distributed information that’s relevant to the person reading it. That’s web design.

I’ve gotten incredibly invested in projects before and become so enamored with how I implemented a certain design pattern or how clever a design element was, only to see it met with a tepid response from users. This is typically what happen when you put the cart before the horse. The design could be incredible but if it’s not useful to the user, who cares? The user doesn’t look at your website the same way the person who made it does.

The user is looking for helpful content or a helpful service. They’re not there to look at how it was implemented or how it looks. The only people who do that are other designers and developers.

Most successful web projects start with great content. Design serves to highlight the content. So if all this is true, why do so many meetings quickly move into design?

This is something Monteiro also touches on repeatedly in his books, but we — people who design and create websites — all share some guilt for allowing this to happen. The people who move the conversation towards design before a) purpose of the site is settled and b) engaging content is developed simply don’t know that they’re trying to derail the process.

It’s our job to remind them what is important. It’s our job to prioritize content over design. Ideally, a great content strategist can work with the client and help tease out what is most important to be shown and developers can focus on building a great technical foundation.

So everyone who is reading this, go forth into your next meeting and remind people of the solid foundation that web projects should be built on: a purpose, something useful to the user, and great content to support it. Once those things are decided, the design will follow.

Thoughts on scalable, maintainable CSS

This post is heavily inspired by the article referenced in the above tweet. If you haven’t already read it, stop what you’re doing and go read it. Every once in a while you come across a post that challenges your assumptions and makes you take a step back and evaluate your process.

I know a little bit about maintaining large CSS code bases. At my current job, we have a 140 site network of Drupal 7 sites for the college. We also have a few WordPress installs and some other sites and static pages in the mix.

Maintainability is something I strive for. There are also some issues with maintaining CSS for large sites that haven’t been addressed until now.

With all the different naming conventions out there, you’d think we’d have nailed it by now. The truth is, CSS is still a mess.

Preprocessors and build tools have brought us a long way, but what if that is the wrong place to focus?

What if you could open up your text editor and build the interface you want without writing a single line of new CSS?

could open up Sublime Text and write some fancy mixins and Sass functions that really are clever and then make some new classes for my components, but why? Chances are I’ve written CSS that does all of those things already.

I’m not very interested in what I can do with css. I’m interested at this point in what I can help groups of people do with css. –mrmrs

This brings me to why I’m so interested in the concept of one class, one function.

When working with a giant network of sites with distributed authorship, you learn real quick that you can almost never come up with a solution that everyone will like. Certain groups want slight variations to components that you built. Things come up.

What if we threw a bunch of lego bricks at them and said “Here’s all the tools you need”?

Consider the following HTML:

<div class="card card--red">
<h2 class="card--headline">Headline</h2>
<p class="intro">Here is some test text</p>

Without looking at the CSS for this, can you imagine what it would look like? I’m guessing you would know it looks something like a card and maybe it has a red background? Other than that, it would be difficult to tell what is happening here. Are there any clues about fonts, padding, borders, or text styling?

Now, consider this HTML:

<div class="bg-red padding-2rem border-1px">
<h2 class="sentinel italic font-large">Headline</h2>
<p class="whitney drop-cap">Here is some test text</p>;

You’ll notice a couple differences right off the bat. There are more CSS classes, yes. But you can also get a much better idea of what the HTML will do. It is semantically clear.

Benefits of this approach include rapid interface development without having to write a line of CSS. Once you come up with all your “utility” classes, you’re free to construct your interface using classnames in HTML.

Also, it allows a broader group of people to benefit from your CSS. People who may not be comfortable with CSS can now in plain English, add classes to their markup which does one thing without having to worry about side effects.

Let me be clear: I don’t think this is a substitute for writing some abstract classes. I think there is still a need to write classnames that don’t map directly to a function (ex: .header-top, .footer, etc) but the point is that a majority of the CSS functionality will be easily exposed in the form of plain English utility classes.

I think this has the potential to help large sites with lots of CSS and lots of people who use the CSS. I’m interested in giving this a try at my organization. When I do, I will most certainly report back here with my findings.

Check out the followup to this piece.

Thing one thing I don’t understand about Google Photos

Let me be clear: Google Photos is awesome and I love using it, but as a loyal Google user, I feel a little slighted. Here’s why.

When photos were managed by Google+, they counted against your storage. I accumulated a lot of photos during this time.

Now that Google Photos is out, they are offering FREE storage (that does NOT count against your storage quota) if the photo is under 16MP.

But wait a minute, all those previously uploaded photos are still counting against my storage, even though they were imported into Google Photos and are less than 16MP.

Not a huge deal, but a little disappointing. Anyone else have this experience?


Get into the browser as soon as possible

I decided a little while ago that I would try and change my workflow. This has happened many times over the years. In 1998 when I was making Nintendo 64 websites, Notepad and a FTP client were major parts of my workflow. Since then, my tools and and process have changed a lot. I think one of the tenets of a good designer/developer is the ability to keep learning and recognizing when something in your process could be done better.

My new workflow is the result of a lot of reading and a lot of trial and error. I’ve come a long way from the days of Notepad and a FTP client.

Get in the browser!

This is something I would’ve been against in the past. I was still remembering the waterfall process where everything takes place in silos. The designer designs a layout, then passes it to a developer, who then pass it to the people who enter content. This method presents a lot of problems, mostly that the three phases happen in isolation. The graphic designer gets to make a lot of decisions without knowing if a) their design is even possible to implement and b) if the actual content would even fit into the design. If the developer and the content experts were involved in the design process, conversations could happen that would prevent issues like that.

Design, content, and development are all inherently intertwined. Design, content, and development need to happen somewhat simultaneously. As a developer, by getting right into the browser, I can work closely with designers to iterate on the design, get feedback, and enhance the interactive aspects of the site. I can also work with content experts who can provide me with some real world content to test in my prototypes.

Getting into the browser as soon as possible allows all three of these phases to happen simultaneously. Currently we’re trying something new. Instead of fully committing to a design in Illustrator or Photoshop, our designer roughs up some wireframe-y type stuff in Illustrator, and then I get that prototyped into something like Pattern Lab as soon as possible. Then lots of conversations happen. Content, design and development are all being considered at the same time now.

Tools like Slack make it easy to share links, screen shots, inspiration, and feedback with everyone on the team. Our Pattern Lab is at a public URL and is commonly referenced and discussed. So far this is leading to a lot of progress in a short period of time. Workflows within Pattern Lab could be a whole other post, but however you want to do it, get your styles broken down into atoms, molecules, organisms, etc. It makes prototyping so much more efficient.

Dave Olsen discusses this topic in detail in the video below and does a much better job than I discussing the problem and potential solutions.