Front End Tech

August 23, 2021

HTML, CSS, JS | Design | UI Frameworks | Auth | Build Tools | Testing

HTML, CSS, JS

  • K.I.S.: Keep It Simple. The best code is no code. The best libraries are no libraries. However, in the real world, espcecially in public facing web sites, we often need more.

  • HTML and CSS Seperation of Concerns: I believe in the sepearation of concerns. I also realize that users turn off JS but designers still want to do some animations, etc, so CSS is growing more functional. I can also see that a user might not want superfulous animations and effects because they are trying to save their battery, so functional CSS is ignoring their wishes, and at scale, wasting energy and contributing to global warming. Ideally, vanilla, static, CSS would be seperate from CSS animations. Browsers would let users cleanly enable/disable CSS animations. The browser could check the battery status and turn off animations when the battery was low.

  • Javascript: I remember when JS was only supposed to communicate with Java Applets and do form validation. I’m rooting for ECMAScript and Typescript, but the whole thing is a tottering mess and feels a lot like VBScript. If I had not worked with strongly typed languages like Java, I would not know what I was missing.

    • Wasm: Web browsers need a strongly typed alternative to JS. Typescript is just a clever bridge but someday we’ll complile strongly typed languages to JS/WASM and be done with it.

Design

  • I have a minor in Architecture. I appreciate good design. However, the fundamental physical reality is that web apps run over a network and usually operate on a mobile device.
    • Ecological Design: Animation, even mouseovers, uses energy. Light color themes use more battery than dark mode themes. Designers must recognize this. It not only affects user engagement and retention, at scale it is an ecological issue.
    • Accessiblity (a11y): This is a broad topic. Low hanging fruit: Use REM for font sizes. A lot of people can’t read tiny fonts on their mobile devices, out in the sun.
    • Don’t make scrolling alter the size of web elements, or play animation, instead of scrolling. I’m looking at you Google Store.
  • Lighthouse: Build a good LightHouse score into your CI/CD pipeline.

UI Frameworks

  • React: I’m not a huge fan of JSX and shadow DOM. BUT its the leading SPA tech by a long shot so I’ve learned it.

    • GatsbyJS SSG, GraphQL, highly opinionated. I picked this for my site just before NextJS added SSG. The GraphQL data lake is cool but it is limitiing when you want to pull in data during certain build phases (V3).
    • NextJS SSR, and now SSG. I’m interested in trying this out to compare with Gatsby.
    • React Native I watch this from afar. Reasons:
      1. I believe in PWAs (progressive web apps) vs native apps. React Native is a good transition, but it still is trying to run on local OS and strategically, I’m not interested.
      2. I heard too many horror stories about it not working, though I’ve heard it is better now.
      3. WASM is coming which will make PWAs dominant.
    • Redux State container. I like what it gives you (replayability), but I don’t like the nomenclature (reducers?). They should use event bus nomenclature and it would be more clear. I will try Redux Toolkit at some point in 2022.
    • Reach Router Used by Gatsby.
    • Vercel They own NextJS. They are competing with Netlify, GatsbyJS.
    • Create React App
  • Svelte: Compiles to vanilla JS during build. Reactive. I am VERY interested but have not built anything yet. Vercel hired its creator in late 2021, which makes me even more interested in NextJS.

  • Angular 2+ I love that its Typescript from the ground up but unfortunately market share is low. Coming from JSP development, it has a lot to offer. Strong typing, event driven, dependency injection.

    • AngularJS is legacy and very different from Angular 2+.
  • Vue I decided to ignore this one because I have to draw boundaries somewhere. Sounds like an improvement over React but Svelte is where I think things are heading.

  • JQuery: The old fat standby, but recently lighter (30kB) and more modular. Polyfill vanilla apps. Good for non-SPA intranet apps.

  • Component Libraries

    • Bootstrap: I like the large ecosystem. Very approachable. Heavy, sadly.
    • Material-UI: less approachable but I appreciate its design philosphy. Also heavy.
    • Web Components I’m watching this. Unfortunately, it uses a Shadow DOM.
    • Figma I’ve played with this but I have not used it in production.
    • Adobe XD I think Figma is displacing this.
  • CSS: I prefer using StyleSheets the way they were designed: with CSS variables at the top level, like Grandma taught me. I like using Material Design and Typography to generate default values. Then, I use locally scoped CSS that refers to the top level style sheet classes and variables.

Client Side Authentication, Authorization

Build Tools

Testing

  • Jest

  • Mocha.js: Test framework/suite. Modular.

  • Chai: TDD and BDD assertion framework. Mocah pluginable.

  • Sinon.js: stub, spy, mock. Standalone or plugin.

  • Jasmine No external dependencies!

  • Runtime Testing

    • Selenium
    • Test at build, CI
    • Testing live site remotely.
© 2022, Edward Pike
Built with Gatsby v4 in production mode.