Tachyons Components

Today I learned a bit more about using Tachyons to make components. I read about Tachyons a long time ago and had a pretty common reaction to it which was to dismiss it outright. I come from a background of having learnt CSS when semantics were being preached. Carefully named classes were chosen for their meaning, and keeping styles out of HTML was important.

But my views have matured over time as I started to use BEM for CSS naming and realised the limitations of creating classes and how rubbish humans are at naming things. Especially when maintaining larger systems. I read articles about utility classes and slowly I began to agree with their perspective.

Editor config is still hard

Today I learned that configuring your code editor to lint and format code in a predictable way is still hard.

I use two editors frequently - Sublime Text and VS Code. Both are great. Both have plugins and their own settings. Today I was trying to update my environment for a Vue project in VS Code. I wanted the .vue files to be linted with ESLint, and for Prettier to handle the formatting. I was concentrating on how multiple attributes per line were being formatted on the <template> part.

React Prevent Re-renders

Today I learned how to prevent React from unnecessarily re-rendering a component:

shouldComponentUpdate(nextProps) {
  // Compare the props with one another
  if (this.props.actions !== nextProps.actions) {
    return true;
  }

  return false;
}

I was trying to use a loop to sort some items prior to rendering them in a component. During the debug step I kept seeing the loop run twice, when I was only expecting it to run once.

React Conditional Rendering

Today I learned how to conditionally render a React component. I was using CSS to show and hide different components in reaction to the App’s state. Setting a component to be display: none; or control it’s opacity. The problem was that React was throwing up some warnings that were coming from “invisible” components, that were receiving props before they were really meant to. This is probably representative of a deeper problem in my App structure.

Having finally read the conditional rendering page, I have chosen the “Inline If with Logical && Operator” pattern for my App. Below is a stripped down example:

Parent App

import React, {Component} from "react";
import MyComponent from "./components/MyComponent.jsx";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      componentIsActive: false
    };
  }
  setComponentActive() {
    // Something else could trigger this
    this.setState({
        componentIsActive: true
    });
  }
  render() {
    return (
      // The component is passed a prop from the state
      <MyComponent
        active={this.state.componentIsActive}
      />
    );
  }
}

export default App;
React With Debounce

Today I learned how to debounce inputs in a React component. This is something I have done in many other places, in plain JavaScript, in jQuery, in AngularJs and in VueJs. Whilst the concept is the same - have a user input some data (text, date, email, whatever), wait a short amount of time so that the user has finished typing and then do something. The idea being the “do something” does not happen whilst the user is still adding their data.

Hugo Variables

Today I learned that I do not know how to concatenate strings using golang.

My Hugo theme has an ‘about’ page, which is supposed to have a conditional css class applied to the navigation when you are actually on that page. The default class is site-header__nav-item and that is meant to become site-header__nav-item active when visiting the ‘about’ page. This was not happening, so I have refactored the code a little and fixed the issue.

The old code

<header class="site-header">
  <section class="site-header__ident">
    <a href="{{ .Site.BaseURL }}" class="site-header__link">{{- .Site.Title -}}</a>
  </section>
  <nav class="site-header__nav">
    {{ with .Site.GetPage "about" }}
    <a href="{{ .Site.BaseURL }}about/" class="site-header__nav-item {{ if eq .URL "/about/"}}active{{ end }}">About</a>
    {{ end }}
  </nav>
</header>
Hugo deploy

Today I had a lesson in RTFM. I noticed my Hugo public/ folder had a bunch of orphaned content from a previous deploy that used dummy content. There is a clear reference to this in the Hugo documentation.