DEV Community: David

Boost your productivity with these command-line tools

David — Sun, 02 Aug 2020 14:10:07 +0000

In this article, I will demonstrate the command-line tools that I use most often. I can almost promise you that you will learn something new.

Prerequisites

You know how to use the command-line
You are using Mac OS. (Not all tools exist on Windows or Linux, but the same concepts and most of the tools should still apply.)

iterm2

I use iterm2 instead of the standard terminal on Mac OS. I have never really used the standard terminal app because iterm2 has a wider feature set and is much easier on the eyes (especially if you use solarized-light!)

Bonus tip: Did you know you can load and save your settings to a folder? This can be found in Preferences -> General. I save and load from a file that is checked into version control.

oh-my-zsh

Set up oh-my-zsh with a script from https://github.com/robbyrussell/oh-my-zsh
Choose your theme (I just use the standard one)
Add your favourite plugins

Check out the wiki for more information.

Plugins

The plugins that I use are:

colored-man-pages: makes it easier to read man pages
fasd: file navigation (more on this later)
git: git aliases

Features

git aliases

ga='git add'
gst='git status'
gup='git pull --rebase'

Navigation

..='cd ..'
...=../..

Up arrow completion

cd
Pressing the up-arrow key might show cd dev, which is the last time cd was used.
Pressing the up-arrow key again might show cd src, which is the second last time cd was used.
Pressing the down-arrow key will show cd dev, which is the last time cd was used.

`cd` tab completion

cd space tab shows a list of possible directories to change to. For example: node_modules/ public/ src/
Pressing tab again will allow you to navigate through the list

Homebrew

Set up Homebrew with a script from https://brew.sh/

Homebrew can be used to install almost anything. Here are some commands I use most often:

brew install

Install almost any package with brew install <package>

brew install node
brew install git

brew cask install

Install almost any application with brew cask install <application>

brew cask install dropbox
brew cask install spotify

brew bundle

brew bundle dump --force copies all your packages and casks into a Brewfile
brew bundle installs packages and casks from a Brewfile

Bonus tip: Check the Brewfile into version control! Next time you get a new computer all you have to do is install Homebrew and then type brew bundle.

brew upgrade

Update all your packages and casks at once with brew upgrade.

fasd

fasd can be set up as follows:

Install fasd with brew install fasd
Add oh-my-zsh plugin.

fasd has one job (for me) and that is to navigate to recently visited directories. Let's say I want to navigate to a directory I have previously visited like ~/dev/misc/terraform/terraform-serverless-example. Instead of typing out the whole path I just type z terra ex and I'm already there!

Version managers

If you need to switch between multiple versions of a programming language it's easier to use version managers. Node has nvm, Python has pyenv, Ruby has rbenv and Java has jenv.

Switching between multiple versions is not the only benefit. If you are working on a team and using Node you could check an .nvmrc file into version control and every developer can apply the same version with nvm use.

File links

With file links you can tell your terminal where to look for certain files. For example with:

ln -s ~/dev/dotfiles/gitconfig ~/.gitconfig

you tell your terminal that your git config is actually stored at ~/dev/dotfiles/gitconfig. If you need to view or edit the file you can open the file from ~/dev/dotfiles/gitconfig or ~/.gitconfig.

Bonus tip 1: You can store all your configuration files in version control and link to them on your machine. I do this for my .gitcongfig, .zshrc and .vimrc.

Bonus tip 2: If you have different git configurations for different projects you can add the following to your gitconfig:

[includeIf "gitdir:~/dev/work/"]
  path = ~/dev/work/gitconfig

Bonus tip 3: If you don't want to check-in sensitive data (eg. environment variables) from your .zshrc into version control you can source a local file with:

source ~/.zshrc-local

bat and exa

bat is a replacement for cat but with syntax highlighting. exa is a replacement for ls but with color coding and sensible defaults.

Check out 7 Awesome Rust-powered Command-line Utilities for similar tools.

Final thoughts

Learning each of these tools has levelled up my productivity and I hope it has the same effect on you. After mastering these tools you might want to start tackling vim :D.

Before you go… Thank you for reading this far! If you enjoyed the article, please don't forget to ❤️ it.

I write about my professional and educational experiences as a self-taught software developer, so click the +FOLLOW button if this interests you! You can also check out my website or subscribe to my newsletter for more content.

You might also like:

Learn how to improve with these resources
Learning material - software development (starting with Intro to CS)

Applying the open-closed principle to UI components

David — Mon, 01 Jun 2020 09:29:46 +0000

In this article, I will demonstrate a simple example of applying the open/closed principle to a UI component in React or Angular.

Background

I had an aha moment this week regarding the open/closed principle, which states "software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification" and is the O in SOLID. I have always found this principle to be quite abstract and I didn't know if I was applying it until now.

The aha moment came to me when I wanted to change the style of an existing component. For simplicity's sake, let's say this was a button and I wanted to change the existing background colour. Let's see how this works in React and then Angular. Or you can skip straight to Angular.

React

Link to source code.

I will start with a simple button component:

// src/Button.js
import React from 'react'
import './Button.css'

const Button = () => (
  <button className="Button" type="button">
    Click Me!
  </button>
)

export default Button

that has the background color aliceblue:

/* src/Button.css */
.Button {
  background-color: aliceblue;
}

and is used as follows:

// src/App.js
import React from 'react'
import './App.css'
import Button from './Button'

const App = () => (
  <div className="App">
    <Button />
  </div>
)

export default App

// src/Button.js
import React from 'react'

const Button = ({ className }) => (
  <button className={className} type="button">
    Click Me!
  </button>
)

export default Button

and then use it as follows:

// src/App.js
import React from 'react'
import './App.css'
import Button from './Button'

const App = () => (
  <div className="App">
    <Button className="button-aliceblue" />
    <Button className="button-papayawhip" />
  </div>
)

export default App

By passing className to Button as a prop I can update (extend) the styles without changing (modifying) the Button component:

/* src/App.css */
.button-aliceblue {
  background-color: aliceblue;
}

.button-papayawhip {
  background-color: papayawhip;
}

This just fulfilled the open/closed principle!

CSS-in-React

A similar approach can also be used with styled-components.

Angular

Link to source code.

I will start with a simple button component:

// src/app/button/button.component.ts 
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css'],
})
export class ButtonComponent {}

<!-- src/app/button/button.component.html -->
<button class="button" type="button">Click me!</button>

that has the background color aliceblue:

/* src/app/button/button.component.css */
.button {
  background-color: aliceblue;
}

and is used as follows:

<!-- src/app/app.component.html -->
<div class="content" role="main">
  <app-button></app-button>
</div>

Now our app's stakeholders have said they would like us to add a new button in papayawhip directly beside the existing button. They have also said there are more buttons to follow. So I parameterise the style of the Button component (I would have preferred to parameterise the CSS class name, like in the React example above, but I couldn't figure out how to do it):

// src/app/button/button.component.ts 
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css'],
})
export class ButtonComponent {
  @Input() style: { [index: string]: string };
}

and then use it as follows:

<!-- src/app/button/button.component.html -->
<button [ngStyle]="style" type="button">Click me!</button>

By passing style to app-button as a property I can add a button and update (extend) the styles without changing (modifying) the app-button component:

<!-- src/app/app.component.html -->
<div class="content" role="main">
  <app-button
    [style]="{
      backgroundColor: 'aliceblue'
    }"
  ></app-button>
  <app-button
    [style]="{
      backgroundColor: 'papayawhip'
    }"
  ></app-button>
</div>

This just fulfilled the open/closed principle!

Final Thoughts

I hope this simple example has helped you understand how the open/closed principle can be applied to UI components. Feel free to look at the source code in React or Angular.

A really simple example of TDD in JavaScript

David — Sat, 30 May 2020 15:15:55 +0000

A step by step introduction to Test Driven Development in JavaScript.

Exercise

I am going to demonstrate TDD by completing FizzBuzz. I have chosen to show each step in JavaScript because most of my work so far has been in this language. However, the same concepts apply to every language (I am familiar with). The complete source code can be found on Github in JavaScript or Java.

The exercise is complete when the following input:

[1, 2, 3, 5, 6, 10, 15]

results in the following output:

'1, 2, Fizz, Buzz, Fizz, Buzz, FizzBuzz'

Things to keep in mind

When demonstrating this exercise I like to mention the following points:

Don’t write any production code before you have a failing test
Make each step as small and simple as possible.

Implementation

Here is the starter code for the test:

import fizzBuzz from './fizzBuzz'

describe('fizzBuzz', () => {
  it('executes', () => {
    expect(fizzBuzz()).toBe(undefined)
  })
})

And here is the starter code for the implementation:

export default function fizzBuzz() {}

Make sure the test is green!

For those of you following along with the source code, you can run the tests in watch mode with npm test.

Red, green, red, green, ..., green

The first real assertion can be written as follows:

describe('fizzBuzz', () => {
  it('executes', () => {
    expect(fizzBuzz([1])).toBe('1')
  })
})

The following snippet will make the test pass:

export default function fizzBuzz() {
  return '1'
}

How easy was that!

I then add another assertion to the test:

describe('fizzBuzz', () => {
  it('executes', () => {
    expect(fizzBuzz([1])).toBe('1')
    expect(fizzBuzz([1, 2])).toBe('1, 2')
  })
})

And fulfil it:

export default function fizzBuzz(input) {
  return input.join(', ')
}

Here I implement Fizz when the entry is 3:

describe('fizzBuzz', () => {
  it('executes', () => {
    expect(fizzBuzz([1])).toBe('1')
    expect(fizzBuzz([1, 2])).toBe('1, 2')
    expect(fizzBuzz([1, 2, 3])).toBe('1, 2, Fizz')
  })
})

export default function fizzBuzz(input) {
  return input
    .map((entry) => {
      if (entry === 3) {
        return 'Fizz'
      }

      return entry
    })
    .join(', ')
}

If you are not familiar with map, you could use a for loop instead:

export default function fizzBuzz(input) {
  const result = []
  for (const entry of input) {
    if (entry === 3) {
      result.push('Fizz')
    } else {
      result.push(entry)
    }
  }
  return result.join(', ')
}

Then I implement Buzz when the entry is 5:

describe('fizzBuzz', () => {
  it('executes', () => {
    expect(fizzBuzz([1])).toBe('1')
    expect(fizzBuzz([1, 2])).toBe('1, 2')
    expect(fizzBuzz([1, 2, 3])).toBe('1, 2, Fizz')
    expect(fizzBuzz([1, 2, 3, 5])).toBe('1, 2, Fizz, Buzz')
  })
})

export default function fizzBuzz(input) {
  return input
    .map((entry) => {
      if (entry === 3) {
        return 'Fizz'
      }

      if (entry === 5) {
        return 'Buzz'
      }

      return entry
    })
    .join(', ')
}

Here I implement Fizz if the entry is a multiple of 3:

describe('fizzBuzz', () => {
  it('executes', () => {
    expect(fizzBuzz([1])).toBe('1')
    expect(fizzBuzz([1, 2])).toBe('1, 2')
    expect(fizzBuzz([1, 2, 3])).toBe('1, 2, Fizz')
    expect(fizzBuzz([1, 2, 3, 5])).toBe('1, 2, Fizz, Buzz')
    expect(fizzBuzz([1, 2, 3, 5, 6])).toBe('1, 2, Fizz, Buzz, Fizz')
  })
})

export default function fizzBuzz(input) {
  return input
    .map((entry) => {
      if (entry % 3 === 0) {
        return 'Fizz'
      }

      if (entry === 5) {
        return 'Buzz'
      }

      return entry
    })
    .join(', ')
}

The same for Buzz if the entry is a multiple of 5:

describe('fizzBuzz', () => {
  it('executes', () => {
    expect(fizzBuzz([1])).toBe('1')
    expect(fizzBuzz([1, 2])).toBe('1, 2')
    expect(fizzBuzz([1, 2, 3])).toBe('1, 2, Fizz')
    expect(fizzBuzz([1, 2, 3, 5])).toBe('1, 2, Fizz, Buzz')
    expect(fizzBuzz([1, 2, 3, 5, 6, 10])).toBe(
      '1, 2, Fizz, Buzz, Fizz, Buzz'
    )
  })
})

export default function fizzBuzz(input) {
  return input
    .map((entry) => {
      if (entry % 3 === 0) {
        return 'Fizz'
      }

      if (entry % 5 === 0) {
        return 'Buzz'
      }

      return entry
    })
    .join(', ')
}

Here I implement FizzBuzz when the entry is multiple of 3 and a multiple of 5:

describe('fizzBuzz', () => {
  it('executes', () => {
    expect(fizzBuzz([1])).toBe('1')
    expect(fizzBuzz([1, 2])).toBe('1, 2')
    expect(fizzBuzz([1, 2, 3])).toBe('1, 2, Fizz')
    expect(fizzBuzz([1, 2, 3, 5])).toBe('1, 2, Fizz, Buzz')
    expect(fizzBuzz([1, 2, 3, 5, 6, 10])).toBe(
      '1, 2, Fizz, Buzz, Fizz, Buzz'
    )
    expect(fizzBuzz([1, 2, 3, 5, 6, 10, 15])).toBe(
      '1, 2, Fizz, Buzz, Fizz, Buzz, FizzBuzz'
    )
  })
})

export default function fizzBuzz(input) {
  return input
    .map((entry) => {
      if (entry % 3 === 0 && entry % 5 === 0) {
        return 'FizzBuzz'
      }

      if (entry % 3 === 0) {
        return 'Fizz'
      }

      if (entry % 5 === 0) {
        return 'Buzz'
      }

      return entry
    })
    .join(', ')
}

This might be a good time to commit the code. Make sure there are no lint warnings/errors and the test is green beforehand! You can run npm run precommit if you are following along with the source code.

Refactor, green, refactor, ..., green

First I remove some duplication:

export default function fizzBuzz(input) {
  return input
    .map((entry) => {
      const multipleOf3 = entry % 3 === 0
      const multipleOf5 = entry % 5 === 0

      if (multipleOf3 && multipleOf5) {
        return 'FizzBuzz'
      }

      if (multipleOf3) {
        return 'Fizz'
      }

      if (multipleOf5) {
        return 'Buzz'
      }

      return entry
    })
    .join(', ')
}

Make sure the test is still green!

Finally, I decide to extract processEntry into a separate function:

function processEntry(entry) {
  const multipleOf3 = entry % 3 === 0
  const multipleOf5 = entry % 5 === 0

  if (multipleOf3 && multipleOf5) {
    return 'FizzBuzz'
  }

  if (multipleOf3) {
    return 'Fizz'
  }

  if (multipleOf5) {
    return 'Buzz'
  }

  return entry
}

export default function fizzBuzz(input) {
  return input.map(processEntry).join(', ')
}

At this point, I tend to prefer to amend the previous commit with git commit --amend. Make sure there are no lint warnings/errors and the test is green beforehand (with npm run precommit)!

Final Thoughts

That's the end of the exercise. I hope you enjoyed it and were able to learn something new. The most important take-away from this exercise is to take small steps! The complete source code can be found on Github in Java or JavaScript.

Before you go… Thank you for reading this far! If you enjoyed the article, please don't forget to ❤️ it.

You might also like:

Learn JavaScript with these resources
Testing Apollo Server with Typescript
Learning material - software development (starting with Intro to CS)

Testing Apollo Server with Typescript

David — Sun, 26 Apr 2020 16:07:01 +0000

In this article, I will demonstrate a way to test GraphQL endpoints of an Apollo Server with a RESTDataSource in Typescript.

Note: The most up to date version of this article is on my website.

Background

At the beginning of the month, I joined a new project that is using Apollo Server as a back end for a front end. Some months before I joined, a RESTDataSource was introduced but the implemented code didn't get tested. I was lucky enough to join the team in the middle of writing those missing tests and this article is a demonstration of what I came up with.

Disclaimer: I only had minimal experience with GraphQL beforehand and I still haven't invested much time into Typescript. However, my knowledge of testing should be pretty sound! That aside, having this article a week ago might have saved me a day's work.

The following exercise is inspired by the docs and also uses apollo-server-testing.

Exercise

The app is a simple GraphQL server that can be consumed as follows:

  query GetMovies {
    movies {
      id
      title
    }
  }

  mutation CreateMovie($newMovie: NewMovie!) {
    createMovie(newMovie: $newMovie) {
      movies {
        id
        title
      }
    }
  }

Feel free to follow along with the source code. (If you need help setting up eslint or nodemon, it might also be worth having a look.) Let me show you how I tested the query.

The code under test

Let's start with the MoviesAPI:

// src/MoviesAPI.ts

import { RESTDataSource } from 'apollo-datasource-rest'
import { Movie } from './types'

export default class MoviesAPI extends RESTDataSource {
  constructor() {
    super()
    this.baseURL = 'http://localhost:5200/'
  }

  async getMovies(): Promise<Movie[]> {
    return this.get('movies')
  }
}

As you can see, we have a method that fetches movies from a REST API being served at http://localhost:5200/ with a movies endpoint.

The data sources:

// src/dataSources.ts

import MoviesAPI from './MoviesAPI'

const dataSources = (): any => {
  return {
    moviesAPI: new MoviesAPI(),
  }
}

export default dataSources

The resolvers:

// src/resolvers.ts

import { Movie } from './types'

const resolvers = {
  Query: {
    movies: (
      _: void,
      __: void,
      { dataSources }: { dataSources: any }
    ): Movie[] => dataSources.moviesAPI.getMovies(),
  },
}

export default resolvers

The type definitions:

// src/typeDefs.ts

import { gql } from 'apollo-server'

const typeDefs = gql`
  type Movie {
    id: String
    title: String
  }

  type Query {
    movies: [Movie]
    movie(id: ID!): Movie
  }
`

export default typeDefs

The test

To test our code we can use apollo-server-testing and create the test server as follows:

// src/testUtils/testServer.ts

import {
  createTestClient,
  ApolloServerTestClient,
} from 'apollo-server-testing'
import { ApolloServer } from 'apollo-server'
import resolvers from '../resolvers'
import typeDefs from '../typeDefs'

export default function testServer(
  dataSources: any
): ApolloServerTestClient {
  return createTestClient(
    new ApolloServer({ typeDefs, resolvers, dataSources })
  )
}

Then we can create our first test as follows:

// src/MoviesAPI.test.ts

import { Body } from 'apollo-datasource-rest/dist/RESTDataSource'
import gql from 'graphql-tag'

import MoviesAPI from './MoviesAPI'
import { Movie } from './types'

import testServer from './testUtils/testServer'
import { moviesSample } from './testUtils/moviesSample'

class MoviesAPIFake extends MoviesAPI {
  async get(path: string): Promise<any> {
    return super.get(path)
  }
}

describe('MoviesAPI', () => {
  it('fetches all movies', async () => {
    // We cannot stub a protected method,
    // so we create a fake.
    const moviesAPI = new MoviesAPIFake()

    // We create a stub because we don't
    // want to call an external service.
    // We also want to use it for testing.
    const getStub = (): Promise<Movie[]> =>
      Promise.resolve(moviesSample())
    moviesAPI.get = jest.fn(getStub)

    // We use a test server instead of the actual one.
    const { query } = testServer(() => ({ moviesAPI }))

    const GET_MOVIES = gql`
      query GetMovies {
        movies {
          id
          title
        }
      }
    `

    // A query is made as if it was a real service.
    const res = await query({ query: GET_MOVIES })

    // We ensure that the errors are undefined.
    // This helps us to see what goes wrong.
    expect(res.errors).toBe(undefined)

    // We check to see if the `movies`
    // endpoint is called properly.
    expect(moviesAPI.get).toHaveBeenCalledWith('movies')

    // We check to see if we have
    // all the movies in the sample.
    expect(res?.data?.movies).toEqual(moviesSample())
  })
})

Ways to break the test

The test would break if:

someone accidentally deletes anything from our resolver, data source method or associated type definitions
someone adds a required field to the associated type definitions
someone accidentally renames the endpoint
GraphQL throws an error
(Anything else?)

Caveats

If you have a lot of additional logic in your data sources or resolvers, I could imagine that it might be difficult to locate the source of an error thrown. In this case, it might make more sense, to add some unit tests alongside the integration test shown above.

Final Thoughts

For the sake of demonstration, I first showed the application code and then showed you how I would test it. In practice, I would recommend doing it the other way round.

I only ended up showing you how to test a query. If you are interested in how to test a mutation and see how the rest of the code was implemented, feel free to have a look at the repo.

As I said at the beginning, I am quite new to GraphQL and I haven't invested much time into Typescript, so any feedback would be great. Getting rid of those anys would be especially helpful.

Before you go… Thank you for reading this far! If you enjoyed the article, please don't forget to ❤️ it.

You might also like:

A really simple example of TDD
Learning material – software development (a list of learning resources, starting with Introduction to Computer Science)
Learn JavaScript with these resources

Learn Ruby and Rails with these resources

David — Tue, 11 Feb 2020 16:25:10 +0000

During the holidays I decided to learn Ruby and Rails. In this article, I share the resources I have used and would recommend.

Assumed knowledge

If you already know one programming language it should be enough to make the most out of the resources below. If you feel that you are lacking some (or a lot of) knowledge I would recommend having a look at Learn how to code with these resources.

Install and learn Ruby

Install rbenv

I would recommend using rbenv to install ruby.

Learn Ruby - Codecademy

I would recommend learning Ruby here. You can get the course done in a day if you can focus that long!

Cheat sheets

A couple of cheat sheets you might also find helpful:

Get started with Rails

Rails guides

I found this to be a really friendly place to start. After completing the first guide I was able to pick and choose where to go next.

Practice

Once you have completed the resources above I would recommend practising the concepts by starting a project of your own. It can be something similar to address-book, which is a project I started for the same reason.

Testing

It can be a little overwhelming learning how to test before you have had any practice but that is not a reason to forget them altogether! A nice place to get started is with Testing Rails - Josh Steiner and Joël Quenneville. Some of the libraries have been deprecated since the time of writing, but don't let that deter you from good content!

Additional resources

Podcasts

Ruby on Rails Podcast. I particularly enjoyed 287: Recruitment on Rails with Brian Mariani
Ruby Rogues. I particularly enjoyed RR 428: Arming the Rebels with Rails 6 Featuring David Heinemeier Hansson

Ruby Weekly newsletter

Before you go… Thank you for reading this far! If you enjoyed the article, please don't forget to ❤️ it.

You might also like:

Is full-stack web development worth learning?
Learning material – software development (a list of learning resources, starting with Introduction to Computer Science)
How to write a CV as a software developer (CV included)

Learn Data Structures and Algorithms with these resources

David — Tue, 31 Dec 2019 14:22:28 +0000

Data Structures and Algorithms is a very dense field of study. Companies such as Google and Amazon include solving problems in this area as a large part of their application processes. As a web developer, I don't think it's as important to know, but I enjoy learning about it. In this article, I share the resources I have used.

Assumed knowledge

All the resources below assume basic coding skills and some assume basic knowledge of JavaScript, Python and/or JavaScript. If you feel you need to brush up on these skills, I would recommend:

Resources

Algorithms - Khan Academy

I discovered this course a little bit later, but it would have been a great place to start because it is very beginner-friendly.

Language: JavaScript
Type: Course with exercises

Intro to Data Structures and Algorithms - Udacity

A nice place to start. The course goes through the most common data structures and algorithms and also demonstrates a mock interview.

Language: Python
Type: Video course with exercises

Cracking the Coding Interview - Gayle Laakmann McDowell

A practical guide to data structures and algorithms. This book has so much content, which can be overwhelming, but I found it useful and enjoyable. Examples and solutions are in Java, but there are community solutions in other languages as well.

Language: Java
Type: Book

LeetCode

Great for practice with varying levels of difficulty. Almost all problems have an official solution in Java, but there are also community solutions in other languages. You can also compare the runtime and memory with other submissions. However, I found this to be inconsistent sometimes. Nevertheless, I compared this website with a lot of similar ones and liked it the most.

Language: Many
Type: Exercises

Exploring the Two-Sum Interview Question in JavaScript - Nick Scialli

An in-depth article that looks at a common interview question solved using JavaScript.

Language: JavaScript
Type: Article

Other helpful resources

Other resources I haven't used yet

Final Thoughts

Learning Data Structures and Algorithms can be quite challenging. LeetCode categorises their problems as easy, medium and hard but I haven't even attempted a hard problem yet. I was surprised how much there is to learn in this space and how much you need to know to get a job at one of the big tech companies. However, I do get the impression it is only a matter of practice, and there are unlimited ways of doing that.

Before you go… Thank you for reading this far! If you enjoyed the article, please don't forget to ❤️ it.

You might also like:

Is full-stack web development worth learning?
Learning material – software development (a list of learning resources, starting with Introduction to Computer Science)
How to write a CV as a software developer (CV included)

DEV Community: David

Boost your productivity with these command-line tools

Prerequisites

iterm2

oh-my-zsh

Plugins

Features

git aliases

Navigation

Up arrow completion

cd tab completion

Homebrew

brew install

brew cask install

brew bundle

brew upgrade

fasd

Version managers

File links

bat and exa

Final thoughts

Applying the open-closed principle to UI components

Background

React

CSS-in-React

Angular

Final Thoughts

A really simple example of TDD in JavaScript

Exercise

Things to keep in mind

Implementation

Red, green, red, green, ..., green

Refactor, green, refactor, ..., green

Final Thoughts

Testing Apollo Server with Typescript

Background

Exercise

The code under test

The test

Ways to break the test

Caveats

Final Thoughts

Learn Ruby and Rails with these resources

Assumed knowledge

Install and learn Ruby

Cheat sheets

Get started with Rails

Practice

Testing

Additional resources

Podcasts

Learn Data Structures and Algorithms with these resources

Assumed knowledge

Resources

Other helpful resources

Other resources I haven't used yet

Final Thoughts

`cd` tab completion