Friday, June 5, 2020

running your own npm repository

Verdaccio seems pretty good to set up your own local npm repository, like a poor man's artifactory (guess these all have passthroughs to the main npm).  Here's a decent walkthrough for a hello, world.

Thursday, June 4, 2020

great twitter thread and article on how few coders actually remember everything these days

If You Want to Be a Senior Developer, Stop Focusing on Syntax has a delightful twitter thread starting
Hello, my name is Tim. I'm a lead at Google with over 30 years coding experience and I need to look up how to get length of a python string. --@tdierks
That's really the way of the world these days.

Tuesday, June 2, 2020

challenges prioritizing specific classes using sass themes and css modules

At work we're proof-of-concepting using Sass and CSS modules, trying to find easy, flexible patterns to allow projects to have their own themes while still having shared components carry their own CSS.

Things built up pretty well: we had a project that had its own .scss file, and then a subproject with a .scss file that imported the base .scss.

I made it so our shared components could take in a className property, so that individual instances of a shared component can use a different class - or rather, can use that class as well. That worked ok for the main project, but the subproject's defaults were being applied after the individual override class.

I thought of insisting that override classes be "inside" of the class their overriding, like:
.btn {
   .specialcaseclassname {
  }
}

But that wouldn't work for the subproject including the base projects "btn" (but overriding it) - the name were munged

Three possible solutions:

  1. !important would work, but everyone would hate that. 
  2. We could set up a rule that every override class in .scss would have to use @extend against the base class, and then change our components so it would leave out the theme's class.
  3. We can declare that all override classes (at least those that are shred by multiple subprojects) must be in a separate file (and the override Sass files must be imported after the main theme Sass)
It's really a bummer that the order CSS classes are specified in for a DOM element don't matter,
<div class="mainthing specialcase">
is the same as 
<div class="specialcase mainthing">

Otherwise we might have another option. But I guess "3" it is.

Sunday, May 31, 2020

adding git branch info to macos zsh prompt, and using pico

I'm trying to get a more fluent with command-line git, and it's pretty easy to get zsh to show you the current git branch as your prompt. Here's my new ~/.zlogin:

alias ls="ls -F"

autoload -Uz vcs_info
precmd() { vcs_info }

# Format the vcs_info_msg_0_ variable
zstyle ':vcs_info:git:*' formats ' 🛰 %b'

# Set up the prompt (with git branch name)
setopt PROMPT_SUBST
PROMPT='${PWD/#$HOME/~}${vcs_info_msg_0_} 🚀'
I like using emoji as concise and obvious at a glance prompt delimiters.

Also I have to be sure to set a default editor I am comfortable with:
git config --global core.editor "nano"
Interesting that emacs doesn't ship with MacOS, but I'm not so enamored of it that I'm going to seek it out. Never got my mind around the modality of vim. nano/pico feel kind of clunky and almost DOS-ish, but for the small number of tasks where it's not worth firing up Visual Studio Code, it's fine.

Saturday, May 30, 2020

for people considering a career in ux

I was contacted on LinkedIn by a person thinking of doing a UX Designer bootcamp. And I have another friend going down the same route.

I know it's easy to think of the career choice as "UI for people who are too intimidated by front end programming" but that's not fair - there are a lot of skills a good fulltime UX designer has that I only have in a rudimentary form (my current job title of "UX Engineer" not withstanding... I do fear they are using the aspirational sense of UX vs UI vs the in the trenches one.)

My partner M. got a bit frustrated with her role as UX Researcher.  She finds Nobody told me UX would be like this to be pretty accurate. It's not meant to scare people off, but to have realistic expectations - many places don't embrace UX expertise as much as they should, since often it can run counters to the "gut knowledge" of developers and business planners.

A Day In The Life Of A UX Designer is a bit more sanguine.

Also M says if you're in Boston, check out some of the meetups (not sure if they are still operating in quarantine times in a virtual form or what) - UXPA BostonBostonCHI, and Ladies That UX Boston.

Friday, May 29, 2020

combining css modules, sass, and context providers for swappable themes with locally scoped css

Esay Silva's How to use Sass and CSS Modules with create-react-app does a great job of setting up Sass with create-react-app and then using them as CSS modules... node-sass does a good job of letting your create-react-app created react app use Sass - if you name a css file Foo.module.css or Foo.module.scss, it gets automagically locally scoped classnames, so your react code can be like

import BrandStyle from "./GreenCo/Theme.module.scss";

and then later 

<button className = {BrandStyle.btn}>Assuming .btn was the original class name</button>
The css sent to the browser will prefix .btn with a unique bit of randomness, so you can safely have lots of components with css code that refers to "btn" and they won't interfere with each other in the browser.

There's nothing too magic about that object you get from the import (the one I'm calling BrandStyle here) - it's just a map from the name as it appears in your original .scss or .css to the name it shows up as in the css that is sent to the browser. (And you can further refer to multiple class names, either with the lightweight classnames utility or just by gluing various parts together with spaces.)

But if you're thinking in terms of a customizable Component Library where you would like developers to be able to override styles of some basic components, but without passing in the overridden styles or CSS to every child, you can do it via context.

I was  rusty on React Contexts - at first I thought by wrapping a segment of JSX/Dom in a Context, each child would get new properties automagically... nope! "Context" is its own beast and doesn't use props to do its thing.

It seems best to make up a trivial custom Context object that can be referenced both by the parent / grandparent app or component as well as the children that will be reading from it...

ThemeContext.js:
import React from "react";
const ThemeContext = React.createContext();
export default ThemeContext;

and then use it as a Provider in the parent:

App.js
import BrandStyle from "./GreenCo/Theme.module.scss";
import ThemeContext from "./core-ux/ThemeContext.js";
//... 
      <ThemeContext.Provider value={{ brandstyle: BrandStyle }}>
        <header>
          <PushButton>Button by Theme....</PushButton>
        </header>
      </ThemeContext.Provider>

and then refer to it in the child:

PushButton.js:
import styles from "./PushButton.module.scss";

import ThemeContext from "./ThemeContext.js";

const PushButton = (props) => {
  const theme = React.useContext(ThemeContext);

  const comboStyle = `${styles.btn} ${theme.brandstyle.btn}`;

  return (
    <button
      className={comboStyle}
//...

So here we see how it can have its own local styles in PushButton.module.scss, grab an additional style from the ThemeContext, and then combine them in a string. (In the actual code I do more checking to make sure theme.brandstyle exists.)



making a new mac feel like home

When I replaced my 2012-era MacBook Air with one of the new models I used Apple's Migration Assistant - good results in the end.

With my new work laptop (mercifully one of the new MacBook Pros with a proper escape key) I was setting it up from scratch, so here were some notes on the quality of life improvements I make, most of which I've written about before:

Settings I fix up:
  • Add a "Quick Action" for convert to jpg (for HEIC images bumped over from iPhone)
  • Make Paste and Match Style the system wide default for cmd-V - especially noticeable for the Stickies application
  • Change the default Screenshot location to ~/Downloads
  • Arrange the Finder sidebar - I do favor ~/Downloads as my generic "temp" space so it makes sense to make it higher in the shortcut list there.
  • Get all that extra crap out of the Dock and make it automatically hide
  • Make Terminal automatically close when I exit the shell ( Go to Terminal|Preferences|Profiles|Basic/Default and select “When the shell exits:”)
  • Finder I set to always show extensions
  • I don't like most of the "More Gesutres" under Trackpad settings except for Mission Control (3 finger swipe up to see all windows) and I enable App Exposé (3 finger swipe down for just the windows of the current app - not sure why that's disabled by default.)
  • MacOS' default shell is now zsh. I fire up `pico ~/.zlogin` and set the following:
    alias ls="ls -F"
    PROMPT='%~🚀'
    That shows me which directory entries are directories themselves, and then a nice minimalist prompt with a condensed version of the path, and the rocketship (from Edit | Emoji & Symbols) reminds me I'm on my home system.
Some Apps I add:
  • SizeUp and HyperSwitch - I set up opt-cmd-arrows to bounce around windows like a boss with the keyboard in SizeUp, and HyperSwitch restores sanity to switching to Terminal or Finder - opening a window if there aren't any there, just like clicking on the Dock.  
  • Add the convenient menu bar status menu quick note apps Tot and Tyke - (also for the first time I noticed I can use cmd-drag to rearrange that top bar! My employer has a bunch of VPN and file sharing stuff that has to live there but I can shunt it off to the side)
  • Add Haptic Touch Bar, switch over to traditional button like controls, and shove them over to the side where they won't be accidentally brushed... (still so foolish that a finger brush is the same as a click for the touch bar!)
Common Apps I need to tweak:
  • In Chrome I like the "Humble New Page Tab" for getting a view of my bookmarks, and adding the React plug in etc.
  • Install Visual Studio Code... I like the “Quiet Light” Color Theme, and then I've been using plugins Prettier - Code Formatter (making sure format on save is on), ESLint, ES7 React/Redux-Native snippets, Babel JavaScript - and I disable auto-completion of quotes and braces

Anyway, nice to have reference to the little things that make a Mac more comfortable for me.