Photo by Chris Ried on Unsplash

To achieve clean code, programmers should value:

  • Simplicity over complexity
  • Clarity over obfuscation
  • Being dumb over being clever

Clean code allows others to understand how it works. This improves:

  • Readability (shared mental models)
  • Maintainability
  • Quality (confidence that it does what it’s supposed to do and not cause bugs)

If you’re given a choice between (1) code that’s prematurely optimized but hard to read and (2) code that’s less performant but easier to understand, you should prefer the latter over the former. Developers will thank you.

This article was originally published on remarkablemark.org on May 20, 2021.


Git branch in code editor
Git branch in code editor
Photo by Yancy Min on Unsplash

Colocating tests is putting your test next to its file.

Why colocate tests? Because colocating provides:

  • Better visibility
  • Simpler mental models
  • Less context switching

Layout

Example of a directory structure containing colocated tests:

.
└── src
├── file.js
└── file.test.js

Example of a directory structure containing non-colocated tests:

.
├── src
│ └── file.js
└── test
└── file.test.js

Import

Colocated tests simplifies import paths:

// src/file.test.js
const file = require('./file');

Compared to non-colocation:

// test/file.test.js
const file = require('../test/file');

For small projects, non-colocation is manageable. But for larger projects, the import paths can get unwieldly:

const file = require('../../../test/dir/subdir/file');

Refactor

For colocated tests…


YouTube:

CodeSandbox:

Motivation

Why use Context to handle React state? The same reason you use Redux to manage your application store. If your components talk to one another and lifting state becomes cumbersome, then Context is a native way to deal with your application state.

Prerequisites

We will be refactoring <App>—which uses local state—to use Context:

As you can see, there’s a counter with 2 buttons that increments or decrements the count.

Provider

Create <Provider> and set prop value to 0:

Render <Provider> as the top-level component in index.js:

Get the Provider value with useContext in <App>:

useReducer


YouTube:

CodeSandbox:

Class

Rendering initial state:

Updating state:

Class state property must be an object since setState takes an object of state variables to update.

Function

Rendering initial state:

Updating state:


Half cucumber on a white background
Half cucumber on a white background
Photo by Mockup Graphics on Unsplash

Background

What are Gherkin feature files? They’re human-readable documentation that can map to automated tests.

Gherkin is a DSL (domain-specific language) for BDD (behavior-driven development).

Example

Here’s an example of using Gherkin to describe how to search for remarkablemark on Google:

Given I am on "https://www.google.com/"
When I click on the search bar
And I type "remarkablemark"
And I press "Enter"
Then I see in the search results "remarkablemark.org"

Each line is a step:

  • Given sets up the scenario.
  • When describes the action.
  • Then states the expected outcome.
  • And chains successive Given’s, When’s, and Then’s.

Steps can be organized under Scenario’s, and…


This article goes over how to remove Travis CI from your GitHub’s:

Personal

Revoke Travis CI from Account settings > Applications:

In Applications, check if Travis CI is added in:

Organization

Deny Travis CI access from Organization > Account settings > Third-party access:


Sticky notes on planning board
Sticky notes on planning board
Photo by Daria Nepriakhina on Unsplash

This article describes the difference between planning, grooming, and estimation in agile methodology.

Planning

Based on the company goals and user research, the Product Manager (PM) comes up with the business case.

The Designer comes up with prototypes and conducts user testing. This happens during design sprints, which engineers can participate in the discussion and activity.

Once the business case is approved, the PM creates an initiative with an epic for spikes and tech designs. (See guide for writing technical specs.)

The Tech Lead (lead engineer) works on the tech design, which is reviewed by the team.

Once the tech design…


Heroku logo
Heroku logo
Heroku

This article goes over how to deploy to Heroku using the GitHub Actions workflow.

Prerequisites

Heroku

Create a Heroku app and save the app’s name and email associated with your account. Then go to Account settings and copy your API Key.

GitHub

Go to your GitHub repository’s Settings > Secrets and set the secrets:

  • HEROKU_API_KEY
  • HEROKU_APP_NAME
  • HEROKU_EMAIL

GitHub Action

Workflow to deploy using Deploy to Heroku action:

The action pushes to the main branch.

Check out the additional options.

Custom Workflow

Workflow to deploy using a custom job:

The differences between the 2 workflows are explained below.

Checkout

The Checkout action must fetch the entire Git…


Set an output parameter for .nvmrc:

Evaluate the expression in setup-node:

Here’s the full example of setting up Node.js with the .nvmrc version in a GitHub Actions workflow:

The original solution is from @damccorm’s comment. The updated solution is from @peaceiris’s comment. Credit goes to them.

This article was originally published on remarkablemark.org on March 11, 2021.


Close up of a foosball table
Close up of a foosball table
Photo by Florian Schmetz on Unsplash

What

What’s a story kickoff? Like the name implies, it’s an event to kick off the story with key stakeholders before working on it.

Why

Why should development teams do story kickoffs? Because a story kickoff:

  • Confirms the requirements and approach
  • Creates clarity and alignment with the team
  • Calls out risks and uncertainties
  • Shares knowledge and ideas

Every ticket goes through a lifecycle from Open to Done. Changes are cheaper when they’re introduced early on, and they get more expensive to implement later on.

Imagine a developer who goes down the wrong path and isn’t called out until the review stage. The…

remarkablemark

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store