DEV Community: Masato Ohba

Automate Routing Specs in Rails with RouteMechanic

Masato Ohba — Tue, 22 Sep 2020 02:23:07 +0000

I guess some of Rails developers write tests as follows to ensure their applications' routings work well. I was one of them.

With assertions provided by Rails:

assert_routing({ path: 'photos', method: :post }, { controller: 'photos', action: 'create' })

With rspec-rails:

expect(:get => "/articles/2012/11/when-to-use-routing-specs").to route_to(
  :controller => "articles",
  :month => "2012-11",
  :slug => "when-to-use-routing-specs"
)
expect(:delete => "/accounts/37").not_to be_routable

However, it's a kind of boring (at least for me) to add new test cases every when adding a new route. That's enough to motivate me to build a new gem.

RouteMechanic

Here's a gem that saves our time.

https://github.com/ohbarye/route_mechanic

You no longer need to maintain Rails' routing tests manually. RouteMechanic automatically detects broken routes and missing action methods in controllers once you've finished installation.

All you have to do is:

Install the gem.
Write one test that maintains your routing automatically, forever.

RSpec

Just add a test file that has only one test case using have_valid_routes matcher.

RSpec.describe 'Rails.application', type: :routing do
  it "fails if application does not have valid routes" do
    expect(Rails.application).to have_valid_routes
  end
end

MiniTest

Just add a test file like below.

class RoutingTest < Minitest::Test
  include ::RouteMechanic::Testing::Methods

  def test_that_application_has_correct_routes
    assert_all_routes
  end
end

What if RouteMechanic detects broken routes?

It tells you broken routes as follows.

  0) Rail.application fails if application does not have valid routes
     Failure/Error: expect(Rails.application.routes).to have_valid_routes

       [Route Mechanic]
         No route matches to the controllers and action methods below
           UsersController#unknown
         No controller and action matches to the routes below
           GET    /users/:user_id/friends(.:format) users#friends
           GET    /users(.:format)                  users#index
           DELETE /users/:id(.:format)              users#destroy
     # ./spec/rspec/matchers_spec.rb:8:in `block (2 levels) in <top (required)>'

1 examples, 1 failure, 0 passed

RouteMechanic reports 2 types of broken routes.

Missing routes
- Your application has the controller and the action method but config/routes.rb doesn't have corresponding settings.
Missing action methods
- Your application's config/routes.rb has a routing declaration but no controller has a corresponding action method.

Is routing spec necessary?

Reasonable question. I believe most Rails developers write request specs instead of routing specs, and you might wonder what's worth to automate routing specs.

Having said that, I can come up with some situations that you might want to have routing specs.

When your project is kinda aged and none knows which route is alive and which one is dead.
- You can detect dead code by using this gem.
When your application doesn't have enough request specs (even controller specs).
- This gem could be a good start point to increase tests to ensure routing is valid.
When you try to make a big refactor of config/routes.rb.
- It's a burden to run all request specs during refactoring. This could save your time.
When you're compelled to write routing specs by any pressure. ;-)
- Set you free from tedious work!

Feedbacks or bug reports are welcome!

https://github.com/ohbarye/route_mechanic

Technical Growth through Being an Engineering Manager

Masato Ohba — Sun, 08 Dec 2019 04:48:28 +0000

Note: This article is translated from Japanese to English by myself. (Japanese one is here)

I made the following tweet over six months ago.

I didn't say it too loudly though, I thought my learning motivation increased and my technical skills grew after I became an engineering manager.
https://twitter.com/ohbarye/status/1110584464856354816 (The original tweet is in Japanese)

This tweet gathered some certain Likes, then I thought it would be a little worth to supplement my thoughts and experience by writing an article.

As far as I can observe, there are a lot of people who think negatively about engineers becoming managers. They say, "Managers can't have time to write code", "Managers' tech skills gently decrease", and etc.

I believe those ideas are true in most cases though, I'd like to put my personal experience as a counterexample.

Disclaimer: Of course, I admit that there are many cases in which it is impossible to write code and a manager's technical skills are reduced. This is a just personal breakthrough story that my technical ability has grown by comparing the past with the present.

Background

I became an engineering manager in 2017, about two years ago. Before that, I had worked as an individual contributor for 5 years.

As I wrote in article (Sorry, in Japanese) in the past, at that time, I was frustrated that "my growth phase was over just by continuing everyday tasks". But I didn't know how to seize more growth, how to find a problem, or how to make a proper solution.

However, working as an engineering manager, thinking about what to do in that position, and re-examining what I want to do often led me to improvements in technical capabilities.

In this article, I will write about personal experiences like that.

Why I was able to grow

In my opinion, there are two reasons: First, the influence given from my position, role, and surroundings. Next, the increase in pressure that I have on myself.

Influence from my position, role, and surroundings

When I became an engineering manager at Quipper, all the members (subordinates) were high-level colleagues who could complete their tasks on their own. The reason I became a manager was only that I spent a long time in the company relative to other employees. I never thought that such excellent members needed growth support or thorough coaching.

Even under such circumstances, there were goal setting and evaluation as an engineering manager's tasks. For this reason, I thought that "being able to talk with members about technical issues and actions to achieve them" is the minimum requirement for a manager, and it was necessary for me to try hard to pass the line.

I didn't think it was mandatory to cover all areas where I didn't keep up with members, but members sometimes raised issues that I wasn't aware of at all, so I knew my shortage regularly. This was directly linked to an increase in learning motivation.

Great engineers give insights even in a chat

Yes, I learned a lot from 1-on-1 that "I can learn from just chatting with a great engineer."

Regularly, I was blessed with the opportunity to see and hear a great engineer's skills backed up by experience and knowledge, such as how to find solutions to problems, thinking processes, how to make plans and execution ability. It can be said that it was thanks to the observation of the members for evaluation more than when they were just colleagues for me. Although 1-on-1 is never done only by the relationship between a manager and a subordinate, it is a fact that there are inevitably opportunities for exchange and chat.

I started to feel that it could be even better to make such chats and exchanges happen not only in 1-on-1 but also in daily work. And I started thinking about cultures, behaviors, skills, and ways of thinking that make it happen naturally. This article (Japanase) that introduces "working out loud" concept is for that. I didn't deeply think of this kind thing until I became an engineering manager.

Leverage hiring and mentoring opportunities

This is not limited to engineering managers though, as I become involved in recruitment activities or become a mentor for a new employee, I got more opportunities to be asked and to explain more about technology.

It is not enough to know the technology used in my company, but I should know why we are using it, why we are not using the alternative technology that has become popular in recent years, what issues exist around the stack, how to deal with the issues (technical roadmap). It is necessary to understand to the extent that it is possible to answer questions that have been deeply explored several times. This pressure is also useful as input for skill improvement.

Increased pressure I put on myself

What I have said so far has been that the necessary level has been raised by calculating backward from the situation and role that I was placed. On the other hand, there were often chances that led to success by raising the hurdles imposed on me by myself.

Although it wasn't originally eager to be a manager throughout my career, I asked myself "what would you like to be if you become a manager?". Some answers were "technically reliable manager" and "known in even out of my company by being on a stage of big conferences". (Knowing that it is not what other people want me to do, I put them on the extension of my ideal engineer image)

This is an ego because nobody forced me to become a manager with high technical skills. What manager I should become would be supposed to be decided by meeting expectations by talking with surrounding members, not what I wanted to be. Having said that, it just easily gets boring if I work for only other people's expectations.

I wanted to follow the path where my ideal manager image and my ideal engineer image overlap as much as possible, and as a result, I put pressure on myself to "strengthen my technical skills".

More concrete examples

Things I was careful in my work

If I double as a manager and a developer, I need to make sure that I do not become a bottleneck. As a result, a shift to tasks with no deadlines or relatively loose deadlines happened.

For example, updating libraries and frameworks, eliminating technical debt, removing unnecessary functions, and improving the CI / CD area. Tasks whose importance is high but their urgency is low. I found that I didn't have the skills to create opportunities to do them. By working on these, the range of technical capabilities expanded.

Involve surroundings

Also, even if I work on these tasks alone, it's necessary to have my colleagues review my work and to hand over to my team members. So I mastered how to involve the surroundings for achievement and how to have my deliverables run on production with less effort.

This is also part of the technical capabilities in a broad sense.

Choose what to do

I mentioned that my tasks had shifted, but in fact, not only it changed naturally, but also there were more opportunities to choose what to do by myself.

If team members are excellent, projects would proceed without any manager's interference. I had to think about what task is a high value to work on. This is an ideal environment but at the same time a hard mode.

Output outside of company

Outside of work, the number of actions that are conscious of output has been increased. This is what I wrote in another article (Japanese).

Contrubite to OSS
Create more personal hobby apps to learn new things
Give presentations in conferences and meetups
Organize a meetup for my interest

I was conscious of the output and chose a project and how to work carefully. Although they were possible without being a manager, it was good that I could use my position and role as a reason to push my back.

Did those things never happen if I'm not a manager?

Looking back now, there was no need of being an engineering manager to make the above-mentioned efforts, processes of work, ways to imporove skills. Even if I was just an individual contributor, none would stop me doing such things. All I needed is to just do it.

However, to be fair, I should say it is a fact that the manager's position is often more advantageous in terms of ease of transfer of work, ease of movement, and ease of task adjustment. Even in a flat and transparent organization, some kind of information is quickly notified of managers, which can help find issues across teams.

For me, an ordinary engineer like me, one of the survival strategies is to create an opportunity to improve technical skills using the manager's position and role.

As an aside, there is also the idea of a pendulum model that goes back and forth between managers and engineers without making the roll change to managers irreversible.

Reproducibility

What I wrote above is a completely personal experience, so I'm not sure if it is reproducible.

The previous two years and the next two years would be quite different even in the same environment, so I can't say "Yes, you can do it" even at my company. But at least there is a manager (me) who behaves as described above, I think there will be plenty of opportunities in the future.

Engineering managers work differently depending on the company or team, so I really don't know how effective my story is in other companies!

However, I believe that it should be a general goal for managers to be able to make appropriate delegation and create and select valuable tasks, so it would be nice to see examples and impressions similar to those of me.

Modern Rails app boilerplate with React + TypeScript + Docker Compose

Masato Ohba — Sat, 07 Jul 2018 13:16:07 +0000

TL;DR

Here is a just bootstrapped app built on Ruby on Rails + React.js + TypeScript + Docker Compose: https://github.com/ohbarye/rails-react-typescript-docker-example

With this boilerplate, you can quickly start to build your own app.

Motivation

Nowadays, I feel like we need a wide range acknowledgment on web development even if we call ourselves "backend developer" or "frontend developer".

As for my experience, I've been a Rails engineer, I'm but recently working like kinda frontend developer because I spend all of my working time for building an SPA (single page application) built with React + TypeScript.

The SPA, Of course, has a backend API, Ruby on Rails connecting PostgreSQL in my case. I use Docker Compose for defining and running multi-container Docker applications because it's not much simple to bootstrap all of applications and middlewares.

Learning each technology itself is not a burden. I rather like learning. But I've thought I'd like to pursue my playground whose tech stacks are virtually same as ones I develop in work.

Rails-React-TypeScript-Docker Example

Therefore, I built an example application with the following modern web technology stacks.

https://github.com/ohbarye/rails-react-typescript-docker-example

Ruby 2.5.1
Rails 5.2.0
React.js 16.4.1
TypeScript 2.9.2
Docker
PostgreSQL

Usage

$ git clone https://github.com/ohbarye/rails-react-typescript-docker-example.git && cd rails-react-typescript-docker-example

# Setup
$ docker-compose run frontend yarn
$ docker-compose run backend rake db:create

# Start
$ docker-compose up -d
$ open http://localhost:3000

Once I've got a playground, it's time to build something on the base. I hope that this would help other developers who have had concerns the same as mine.

How to find Good First Issues to Contribute OSS

Masato Ohba — Wed, 27 Jun 2018 16:24:08 +0000

This post is based on my presentation titled "How to find Good First Issues".

Target Reader

This post would be helpful to you if you:

want to contribute OSS
are struggling to find a repository or an issue to contribute
(would rather you preferred major/popular OSS 😇)

Honestly speaking, the target was just me. I was an OSS newbie and wondering how I could contribute to any OSS.

Good First Issue List

In this article, I'm going to introduce a tip to find good first issues with a simple script to make an issue list like below.

This list has tons of issues waiting for beginners' contribution. You can see the full list as a spreadsheet here

BTW, What "good first issue" is?

It is a kind of a label name that GitHub provides to each repository by default.

According to the official, this label indicates below.

Apply the help wanted and good first issue labels to issues in your repository to highlight opportunities for people to contribute to your project.

How to list up good first issues

To list up those issues, I wrote a simple script named goofi and published on GitHub: https://github.com/ohbarye/goofi

That just does the following three things.

Call GitHub GraphQL API to fetch issues
Format its response
Create CSV

Easy?

GraphQL Query

Even though I could do the same with GitHub API v3 REST version, it'd better off using GraphQL API so that I could avoid N+1 query problem.

Here is a query that the script runs. It fetches issues:

whose repository has more than 500 stars.
whose repository has more than 1 issue labeled good first issue.
whose repository's language is javascript.
labeled good first issue.

{
  search(first: 100, query: "language:javascript good-first-issues:>1 stars:>500", type: REPOSITORY) {
    repositoryCount
    pageInfo {
      startCursor
      endCursor
      hasNextPage
    }
    nodes {
      ... on Repository {
        owner {
          login
        }
        name
        url
        issues(first: 100, labels: ["good first issue"], states: OPEN, orderBy: {field: UPDATED_AT, direction: DESC}) {
          totalCount
          nodes {
            title
            url
          }
        }
        stargazers {
          totalCount
        }
      }
    }
  }
}

What made me surprised here is, GitHub API can handle quite specific filters.

"good-first-issues:>1"
"stars:>500"

If you're interested in the API specification, see https://help.github.com/articles/searching-repositories/.

Response

That is a part of response though, the query above results like below.

{
  "data": {
    "search": {
      "repositoryCount": 196,
      "pageInfo": {
        "startCursor": "Y3Vyc29yOjE=",
        "endCursor": "Y3Vyc29yOjEwMA==",
        "hasNextPage": true
      },
      "nodes": [
        {
          "owner": {
            "login": "vuejs"
          },
          "name": "vue",
          "url": "https://github.com/vuejs/vue",
          "issues": {
            "totalCount": 4,
            "nodes": [
              {
                "title": "warn if $set is used on a property that already exist",
                "url": "https://github.com/vuejs/vue/issues/8129"
              }
            ]
          },
          "stargazers": {
            "totalCount": 105267
          }
        }
      }
    }
  }
}

Format data ~ Write CSV

Once we can easily get data via the GitHub API, it's not a hard task to format the data.

writeIssues(repository) {
  const owner = repository.owner.login;
  const name = repository.name;
  const stars = repository.stargazers.totalCount;

  repository.issues.nodes.forEach((issue) => {
    const title = issue.title;
    const url = issue.url;
    this.writer.write({owner, name, stars, title, url});
  });
}

const nodes = response.data.data.search.nodes;
nodes.forEach(this.writeIssues);

Then?

Now that we have the candidate list, all you have to do is check issues one by one to find a point that you can contribute.

Another way

I was initially using Jasper, really cool GitHub issue reader, to find such issues by creating a stream to gather issues.

But...

It cannot sort repositories by stars count
It cannot reject a wrong usage of "good first issue"
It notifies me every when an issue is updated

In short, this way does not work for me because that was too noisy for me.

Are they really nice ways? 🤔

At least, I could have contributed some popular repositories even though I was initially not familiar with them.

e.g., Node.js

Next Try

I'm willing to try to build GUI part of the script so that everyone can find good first issues anytime when they want to contribute. Once I'm done it, will write another article!

Let's find your "good first issues" and contribute to making this world better! 💪

Pixelate characters with canvas, and draw generative art!

Masato Ohba — Sat, 12 May 2018 16:20:05 +0000

As I posted before, I'm learning generative art with p5.js.

In this article, I introduce a tool, "String Pixelater", which I made through the learning process.

What's String Pixelater

This is a simple tool to pixelate any characters. pixelate means to "convert a character to a two-dimensional array" so that we can deal with the tabular data for several purposes. I actually compose this and p5.js for painting generative art.

Let's dig into how it works... It has only one API so far though!

> StringPixelater.pixelate('hello', {fontSize: 24})

[
  [0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,1,1,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0],
  [0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0],
  [0,0,1,1,1,1,1,0,0,1,1,1,1,0,0,0,0,1,1,1,0,0,0,1,1,1,1,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,1,1,1,1,0,0,0,1,1,1,1,0,0,0],
  [0,0,1,1,1,1,0,0,0,0,1,1,1,0,0,0,1,1,1,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,1,1,1,0,0,0,0,0,1,1,1,1,0,0],
  [0,0,1,1,1,0,0,0,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,1,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,0,1,1,1,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,1,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,1,0,0,0,0,1,1,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,0,1,1,1,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,1,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,0,1,1,1,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,1,1,1,0,0,0,0,1,1,1,1,0,0,0,1,1,0,0,0,1,1,1,0,0,0,1,1,1,1,0,0,0,1,1,1,1,0,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0]
]

Could you vaguely see "hello" in the above?

How does it work?

In short, it uses <canvas> element as a temporary canvas to render characters. Then it extracts and parses rasterized image data. Its essential code is the following.

const canvas = <HTMLCanvasElement> document.createElement('canvas');
const context = <CanvasRenderingContext2D> this.canvas.getContext('2d');
context.fillText("hello", 0, 0);

let table = new Array(canvas.height);

const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

for (let row = 0; row < canvas.height; row++){
  table[row] = new Array(canvas.width);

  for (let col = 0; col < canvas.width; col++){
    const alpha = imageData.data[(canvas.width * row + col) * 4 + 3];
    if (alpha >= 64) {
      table[row][col] = 1;
    } else {
      table[row][col] = 0;
    }
  }
}

Usage

Just install and call StringPixelater.pixelate method with a string which you want to pixelate.

$ npm install --save string-pixelater
or
$ yarn add string-pixelater

You can use as ES module or load through <script> tag

import StringPixelater from 'string-pixelater';

const table = StringPixelater.pixelate('Hello, world');

<script type="text/javascript" src="path/to/dist/js/string-pixelater.js"></script>
<script type="text/javascript">
  var table = StringPixelater.pixelate('Hello, world');
</script>

`transpose`

If you use p5.js like me, transpose option is quite convenient because it has inverted axes,

> StringPixelater.pixelate('B', {fontSize: 24, transpose: false})
[
  [0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0],
  [0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,1,1,1,1,0,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,0,1,1,1,0,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,0,1,1,1,0,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,1,1,1,1,0,0,0],
  [0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0],
  [0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,0,1,1,1,0,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0],
  [0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0],
  [0,0,1,1,1,0,0,0,0,0,0,1,1,1,1,0,0,0],
  [0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0],
  [0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0]
]

> StringPixelater.pixelate('B', {fontSize: 24, transpose: true})
[
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
  [1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,1,1],
  [1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1],
  [1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1],
  [1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1],
  [1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1],
  [1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1],
  [1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1],
  [1,1,1,0,0,0,0,1,1,1,0,0,0,0,0,0,1,1,1],
  [1,1,1,1,0,0,1,1,1,1,1,0,0,0,0,0,1,1,1],
  [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
  [0,0,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,0],
  [0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
]

The latter looks correct when it's rendered with simple and intuitive loops.

// Note: This is just pseudo code!
function draw() {
  const imageData = StringPixelater.pixelate('B', {fontSize: 24, transpose: true})
  const pixelSize = 10;

  imageData.forEach(function(row, i) {
    row.forEach(function(cell, j) {
      if (cell === 1) {
        ellipse(i * pixelSize, j * pixelSize, pixelSize, pixelSize);
      }
    })
  })
}

This results like below:

Artworks with String Pixelater

Just with StringPixelater.pixelate('hello'):

We can get pixelated emoji as like StringPixelater.pixelate('🐈').

I would be glad if anyone would have an interest in generative art or string-pixelater through this article. :)

What I felt through 7 Days of Learning Generative Art

Masato Ohba — Sun, 06 May 2018 16:07:01 +0000

As I wrote in My first step in learning Generative Art, I started learning the generative art. I was glad that there were some reactions to the article and the tweet about it so I decided to draw a picture and post it every day for seven days.

Development environment

There's a language and an environment named Processing but I've used p5.js because I would want to write familiar JavaScript code.

I drew them using an interactive editor on the web at https://alpha.editor.p5js.org/ or https://www.openprocessing.org/. These sites are quite awesome to draw a picture even if you're a beginner. When auto-refresh is enabled, you can check the appearance quickly and it's convenient. But be careful, if you make mistakes in code that causes an infinite loop or OOM, the browser gets hanging up and your code in the editor might get lost. That was the most painful thing I faced.

Impression & What I learned

Because I had used HTML Canvas, the hurdle to begin drawing a picture with p5.js was not so high.

"Well, I can draw a line with line function, easy". "Hum, I can draw a rectangle with rect function, okay".

Makes sense, I thought that it was perfectly understandable --- until I saw high-level real artworks on the earth. At the moment I saw them, I unintentionally said to myself "Huh!?!?".

Having said that, I knew that the only way to get used to it is to use it patiently. After I started moving my hands, I found it fascinating soon.

Unlike code in real business, Generative Art has no exact answer to choose, and there is no end until I admit it good. Even when I would think "I'm getting done", comparing some patterns I couldn't make up my mind which one to choose, then I would spend some time. However, as time was being sucked indefinitely, I found me remember the joy of coding.

Although it is difficult to continue everyday posting, I would like to continue drawing generative art in the future so that I never forget the feeling.

Artworks

All of my artworks are published in OpenProcessing. I would like to look back them with some comments.

day 1: "Interfering objects" & "Light path in the dark"

I was copying examples in a reference without any idea. I was feeling delighted with creation when I could draw anything.

But... I now don't understand what I was thinking at that time. 😅

day 2: "Feather"

I wanted to be able to reproduce some sort of motif present in this real world. I don't like the color that I have not care so much.

day 3: "Strings"

In contrast to "Feather", I tried to put an abstract image in the picture. Although the theme is "strings", I drew an object that does not exist in the real world. I like the cool feeling.

day 4: "Flower on a Lofty Height"

Like day "Feather" I tried to draw something real with more delicacy. I think that the curved line using curveVertex just looked like petals of a flower and the ephemeral feeling by noStroke.

day 5: "Unknown Language"

This one that I do not like next to those artworks of the day 1... I jumped to a difficult theme of expressing "feelings when I heard an unknown language", but I got lost what I would like to draw.

day 6: "Surface Wave"

On this day I was clearly deciding to draw a picture with a wave using 2D noise. I tried adding a movement that looks like a wave traveling through the earth or a cross-section of the earth so that it does not end as just a copy and paste of a tutorial.

The code is getting complicated from around here and it seems to be hard to read back later.

day 7: "Pandora's Box"

The motif "Pandora's Box" slightly makes me itchy, but I like this picture the most due to its dynamism, afterimage atmosphere, vivid coloring.

If you've got interested in generative art, maybe it's time to start!

Learning Generative Art; day 7 "Pandora's Box" 🗃

Masato Ohba — Sun, 06 May 2018 12:51:41 +0000

Continuation of My first step in learning Generative Art. I'm finally finishing my seven days challenge to post artworks every day!

"Pandora's Box"

I've tried to express Pandora's box with circles and triangles only.

In publishing this article, I should confess that I was truly inspired by evanyou.me's design and code. It reminded me of lightning first; then I came up with the idea to draw Pandora's box with the lightning somehow.

By the way, are you wondering why the drawn "box" is not literally a box, but a kind of a circle? Then let's check the myth again.

The container mentioned in the original story was actually a large storage jar but the word was later mistranslated as "box".
https://en.wikipedia.org/wiki/Pandora%27s_box

Yes, that's not originally a "box". So I drew it as a form of a jar. Well, I admit that it's possibly still far from a jar though... 😇

// Sorry for the quite ugly code...

var f = 60,
  r = 0,
  u = Math.PI * 2,
  v = Math.cos,
  q;

function setup() {
  createCanvas(1000, 400);
  frameRate(10)

  // To capture static screenshot
  // noLoop();
  // for(var i=0; i < 10; i++) { draw() } 
}

function draw() {
  // background(225, 200); // Try this for white background pattern
  background(25, 200);
  drawLightnings();
  drawCircles();
}

function drawLightnings() {
  // stroke(0, 100); // Try this to emphasize lightnings
  noStroke()
  for(var i=0; i < 10; i++) {
    q = [ {x: f, y: height * 0.7 + f}, {x: random(f-10, f+10), y: height * 0.7 - f} ]
    while(q[1].x < width + f) drawTriangle(q[0], q[1])
  }
}

function drawTriangle(i, j, direction){
  r -= u / -50;
  c = (v(r)*127+128<<16 | v(r+u/3)*127+128<<8 | v(r+u/3*2)*127+128).toString(16);

  fill(color(
    parseInt(c.substring(0, 2), 16),
    parseInt(c.substring(2, 4), 16),
    parseInt(c.substring(4, 6), 16),
    200));

  beginShape();
  vertex(i.x, i.y);
  vertex(j.x, j.y);
  var k = j.x + (Math.random()*2-0.25)*f;
  var n = y(j.y);
  vertex(k, n);
  endShape(CLOSE);

  q[0] = q[1];
  q[1] = { x: k, y: n };
}

function y(p){
  var t = p + (Math.random() * 2 - 1.1) * f;
  return (t > height || t < 0) ? y(p) : t;
}

function drawCircles() {
  stroke(255, 200);

  var radius = 10;
  for(var i=0; i < 100; i++) {
    fill(color(random(100, 255), random(100, 255), random(255), 100));
    ellipse(random(f-radius, f+radius), random(height - f -radius, height - f +radius, ), random(50));
  }
}

Learning Generative Art; day 6 "Surface Wave" 🏄

Masato Ohba — Sat, 05 May 2018 13:16:22 +0000

Continuation of My first step in learning Generative Art. I'm going to finish this series tomorrow, so this is the second to last.

"Surface Wave"

I've tried to express surface wave with 2D noise. It looks like a wave, and also surface on the earth.

I can calm down by watching a wave no matter whether the wave is electric or natural. What about you?

var yoff = 0.0;
var backgroudColor;

function setup() {
  createCanvas(1400, 400);
  backgroudColor = 255;
  // backgroudColor = 22;
}

function draw() {
  background(backgroudColor, 2);

  fill(backgroudColor, 2);
  stroke(color(random(22),random(100, 255),random(255), 200));
  // stroke(color(random(222, 255),random(100, 155),random(10), 200));
  strokeWeight(random(4))
  beginShape();

  var xoff = 0;

  for (var x = 0; x <= width; x += 10) {
    var y = map(noise(xoff, yoff), 0, 1, 100, height);
    vertex(x, y);
    xoff += 0.05;
  }

  yoff += 0.01;
  vertex(width, height);
  vertex(0, height);
  endShape(CLOSE);
}

Learning Generative Art; day 5 "Unknown Language" 👁‍🗨

Masato Ohba — Fri, 04 May 2018 16:08:48 +0000

Continuation of My first step in learning Generative Art.

"Unknown Language"

I've tried to express what I feel in a situation of facing an unknown language. On that occasion, I never understand what strangers say, what they think, what they feel. Then I feel incredibly isolated and my eyesight turns out gray.

var xoff = 0.0;
var words = ["Lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipiscing", "elit,", "sed", "do", "eiusmod", "tempor", "incididunt", "ut", "labore", "et", "dolore", "magna", "aliqua.", "Ut", "enim", "ad", "minim", "veniam,", "quis", "nostrud", "exercitation", "ullamco", "laboris", "nisi", "ut", "aliquip", "ex", "ea", "commodo", "consequat.", "Duis", "aute", "irure", "dolor", "in", "reprehenderit", "in", "voluptate", "velit", "esse", "cillum", "dolore", "eu", "fugiat", "nulla", "pariatur.", "Excepteur", "sint", "occaecat", "cupidatat", "non", "proident,", "sunt", "in", "culpa", "qui", "officia", "deserunt", "mollit", "anim", "id", "est", "laborum"];

function setup() {
  createCanvas(800, 400);
  background(220);
  noStroke();
}

function draw() {
  fill(220, 4); // Create an alpha blended background
  rect(0, 0, width, height);

  // Get a noise value based on xoff and scale 
  // it according to the window's width
  var n = xoff * xoff * width;
  // var n = random(0,width);  // another expression

  xoff += 0.01; // With each cycle, increment xoff
  if (n > width) {
    xoff = 0.0; // reset
  }

  fill(color(random(100, 133), random(250), random(200, 255), random(200, 255)));
  ellipse(n, random(height), random(64), random(64));
  text(random(words), n, random(height));
  textSize(random(8, 24));
}

TIL 📝

`noise`

noise function is another way to introduce randomness into generative art. noise uses Perlin Noise unlike random. It means that we can express more natural texture or behavior than random.

(By the way, I didn't know random function accepts an array as its argument.)

Learning Generative Art; day 4 "Flower on a Lofty Height" 🌻

Masato Ohba — Thu, 03 May 2018 16:04:40 +0000

Continuation of My first step in learning Generative Art.

"Flower on a Lofty Height"

I drew an image expressing a flower on a lofty height; I wonder if there is a flower that varies its color during one day.

function setup() {
  createCanvas(800, 700);
  // background(48);
  petals();
  stalk();
}

function petals() {
  // noStroke();

  for (var i = 0; i < 200; i++) {
    var r = random(600);
    // fill(color(random(200, 255), random(200, 255), random(255), 78)) // yellow
    fill(color(random(255), random(200, 210), random(200, 255), 78)) // blue

    beginShape();
    curveVertex(0, 0);
    curveVertex(400, 350);
    curveVertex(random(400), random(600));
    curveVertex(random(400), random(400));
    endShape();
  }
}

function stalk() {
  for (var i = 0; i < 30; i++) {
    fill(color(144, random(200, 255), 144, 60));
    beginShape();
    curveVertex(400, i);
    curveVertex(400, 350);
    curveVertex(800, 700);
    curveVertex(random(500), random(700));
    endShape();
  }
}

TIL 📝

curveVertex function can draw a complex curve. It's still difficult for me to master. However, such a curve is necessary to draw any kinds of stuff in nature.

I started publishing my artworks on a cool hosting web service, OpenProcessing as well.

Learning Generative Art; day 3 "Strings" 🎻

Masato Ohba — Wed, 02 May 2018 14:46:24 +0000

(I accidentally updated this article with another content. I retrieved the original content as much as possible... 😢)

Continuation of My first step in learning Generative Art.

"Strings"

I drew an image expressing "strings"; One string is dull, weak, and ephemeral. But once it gathers, it could be string and persistent. We can weave everything with strings.

Maybe Western people have a proverb like "three pillars of stability"? We Japanese say that "three arrows" though.

function setup() {
  createCanvas(600, 400);
  frameRate(4)
}

function draw() {
  background(255)
  for (var i = 100; i < 400; i++) {
    var r = random(200);
    stroke(color(random(r),random(i),random(i), 60));   
    line(300, r, i, 100)
    line(300, i, i, 100)

    line(i, i, i, 300)
    line(i, i, r, 300)
    line(i, r, i, 300)

    line(500, r + 200, i + 200, i)
  }
}

TIL 📝

line function just draw a simple line. However, it has infinite possibilities in the generative art world.

.eslintrc without file extension is deprecated

Masato Ohba — Wed, 02 May 2018 10:15:23 +0000

`.eslintrc` file format

As you may know, the ESLint officially encourages us to give an adequate file extension to .eslintrc.

ESLint supports configuration files in several formats:

JavaScript - use .eslintrc.js and export an object containing your configuration.

YAML - use .eslintrc.yaml or .eslintrc.yml to define the configuration structure.

JSON - use .eslintrc.json to define the configuration structure. ESLint's JSON files also allow JavaScript-style comments.

package.json - create an eslintConfig property in your package.json file and define your configuration there.

Deprecated - use .eslintrc, which can be either JSON or YAML.

https://eslint.org/docs/user-guide/configuring#configuration-file-formats

This deprecation started at https://github.com/eslint/eslint/pull/4406. Yes, almost 2.5 years ago.

Contribution chance

It's been quite some time since it got deprecated. However, I still see plenty of JavaScript projects using .eslintrc as a configuration file for ESLint even in some big projects.

In other words, there are plenty of chances to contribute toward OSS. I started sending a patch for that to some projects.

Bonus

Do you feel it too nitpicky? I initially felt so when sending a pull request, but the following words from a Gatsby.js maintainer encourage me to make this world better. 🙃

A 1000 nitpicky fixes add up to an amazing project so thanks :-)

DEV Community: Masato Ohba

Automate Routing Specs in Rails with RouteMechanic

RouteMechanic

RSpec

MiniTest

What if RouteMechanic detects broken routes?

Is routing spec necessary?

Technical Growth through Being an Engineering Manager

Background

Why I was able to grow

Influence from my position, role, and surroundings

Great engineers give insights even in a chat

Leverage hiring and mentoring opportunities

Increased pressure I put on myself

More concrete examples

Things I was careful in my work

Involve surroundings

Choose what to do

Output outside of company

Did those things never happen if I'm not a manager?

Reproducibility

Modern Rails app boilerplate with React + TypeScript + Docker Compose

TL;DR

Motivation

Rails-React-TypeScript-Docker Example

Usage

How to find Good First Issues to Contribute OSS

Target Reader

Good First Issue List

BTW, What "good first issue" is?

How to list up good first issues

GraphQL Query

Response

Format data ~ Write CSV

Then?

Another way

Are they really nice ways? 🤔

Next Try

Pixelate characters with canvas, and draw generative art!

What's String Pixelater

How does it work?

Usage

transpose

Artworks with String Pixelater

What I felt through 7 Days of Learning Generative Art

Development environment

Impression & What I learned

Artworks

day 1: "Interfering objects" & "Light path in the dark"

day 2: "Feather"

day 3: "Strings"

day 4: "Flower on a Lofty Height"

day 5: "Unknown Language"

day 6: "Surface Wave"

day 7: "Pandora's Box"

Learning Generative Art; day 7 "Pandora's Box" 🗃

"Pandora's Box"

Learning Generative Art; day 6 "Surface Wave" 🏄

"Surface Wave"

Learning Generative Art; day 5 "Unknown Language" 👁‍🗨

"Unknown Language"

TIL 📝

noise

Learning Generative Art; day 4 "Flower on a Lofty Height" 🌻

"Flower on a Lofty Height"

TIL 📝

Learning Generative Art; day 3 "Strings" 🎻

"Strings"

TIL 📝

.eslintrc without file extension is deprecated

.eslintrc file format

Contribution chance

Bonus

`transpose`

`noise`

`.eslintrc` file format