rss en

Implementing Ruby's methods Method in JavaScript

Mon, 29 Jul 2024 00:00:00 GMT

Suddenly, isn't Ruby's methods method handy? When writing code, it lists all the methods and properties available for an object and allows you to search through them, which is very useful for debugging.

Besides that, it is also effective for checking methods specific to frameworks like Rails, aiding in code reading and understanding libraries. While it's good practice to refer to official documentation or source code, the methods method is quite helpful for libraries where you don’t need to dive deeply or when you have vague memories of method names.

Ruby's `methods` Method

To briefly introduce Ruby's methods method, it looks like this:

Object#method

Returns a list of the names of public and protected methods of obj. This will include all the methods accessible in obj’s ancestors. If the optional parameter is false, it returns an array of obj’s public and protected singleton methods, the array will not include methods in modules included in obj.

In other words, it returns an array object of the properties and methods accessible from the receiver.

This method is implemented in the Object class, which is the ancestor of all classes that inherit from Object, so it can be used in any class inheriting from Object.

Sample Code

class Hoge
  attr_accessor :fuga

  def bar
    puts ''
  end
end

puts Hoge.new.methods     // => [:bar, :fuga=, :fuga, :hash, :singleton_class, :dup, ...]
puts Hoge.new.grep /fuga/ // => [:fuga=, :fuga]

As shown in the example, it returns an Array object, so you can also search through the list of methods using the grep method, which is very convenient.

So, I thought about whether this could be done in JS and gave it a try.

Implementation

Below is the actual code.

The class name can be anything, but I’m naming it PropertyFinder for now.

class PropertyFinder {
    constructor(receiver) {
      this.receiver = receiver
    }

    grep(regexp, options = {}) {
      let res = []
      if (typeof regexp === 'string') {
        return this.find((name) => name.includes(regexp))
      }
      if (regexp instanceof RegExp) {
        return this.find((name) => regexp.test(name))
      }
      return []
    }

    toString() {
      return this.find(() => true)
    }

    find(detect) {
      const list = Object.getOwnPropertyNames(this.receiver).filter(it => detect(it))
      if (!this.receiver.__proto__) {
        return list
      }
      const ancestors = new PropertyFinder(this.receiver.__proto__).find(detect)
      return [...list, ...ancestors]
    }
}

I’ll explain the code later, but let’s start with how to use it.

Once the class is defined, you can add a method to the Object class's properties as follows:

Object.prototype.methods = function () {
    return new PropertyFinder(this)
}

By doing this, you can use the methods method on instances of classes inheriting from Object. However, please be aware of the caution note below and use this at your own risk.

Here are some example executions:


class Hoge {
  fuga() {
    console.log('fuga')
  }
}

console.log(new Object().methods().toString()) // => ['constructor', 'constructor', '__defineGetter__', '__defineSetter__', 'hasOwnProperty' ...]
console.log([].methods().toString())           // => ['length', 'length', 'constructor', 'at', 'concat', ...]
console.log(new Hoge().methods().grep(/fuga/)  // => ['fuga']

Safety Introduction

**This code is not recommended for use in production environments **

Adding properties to higher-level classes through monkey-patching is an anti-pattern and could lead to problems with future changes in JS specifications. Use it with caution and at your own risk.

Reference : The cons of monkey patching

Code Explanation

Now, let's move on to explaining the code.

The most important method in PropertyFinder is the find method. This method traverses the prototype chain of the given object, searches for accessible properties, and returns them as a list.

The toString and grep methods simply use find, so they don't need further explanation.

Prototype Chain

The prototype chain might be unfamiliar to some, but it’s the inheritance of properties from the Object class.

Inheritance and the prototype chain | MDN

The details are covered in the MDN documentation, but JavaScript's inheritance mechanism is supported by the prototype chain.

Although it's not always obvious, when referring to some property, the process involves:

Checking if the receiver itself has the property.
Checking if the parent class instance has the property.
Checking if the property exists in the parent class’s instance's parent class.

This process continues up the chain until a match is found, which is then returned.

What the `find` Method Does

Given the above, the find method in PropertyFinder implements this mechanism, allowing you to get a list of properties by recursively exploring __proto__.

Here's the implementation that achieves this by exploring __proto__ recursively to get the list:

    find(detect) {
      const list = Object.getOwnPropertyNames(this.receiver).filter(it => detect(it))
      if (!this.receiver.__proto__) {
        return list
      }
      const ancestors = new PropertyFinder(this.receiver.__proto__).find(detect)
      return [...list, ...ancestors]
    }

That concludes the explanation of PropertyFinder.

Wrap up

That wraps up the explanation of the code and what I’ve tried.

This was more of an experimental or playful exercise, but since it involved some knowledge and techniques, I hope you find it useful or inspiring for your own applications.

How to fix the problem of not working key repeating in CodeSandbox's Vim key binding.

Sun, 18 Apr 2021 00:00:00 GMT

I usually use CodeSandbox to write some front-end code, but I had a small problem with it, so this article is about how to fix it.

Problem: Not working key repeating in CodeSandbox's Vim key binding

I usually use vim when writing code, so as you might expect, I use vim key bindings on CodeSandbox as well.

When I set up Vim key bindings, key repeating stopped working, and even if I held down the j key, the cursor didn't move down, and I had to hit the key repeatedly to move it, which was very annoying.

How to fix

Run command in your termnal.

defaults write -g ApplePressAndHoldEnabled -bool false

It seems that the current CodeSandbox inherits the settings of VSCode, and when I want to use Vim Keybinding in VSCode, I need to change the Mac settings in the terminal, but I can't do that in CodeSandbox because the conditions for using the terminal seem to be limited.

Setting for VSCode is written in here

It seems that Mac has a mechanism to set the behavior of each application when a key is held, but in order to enable key repetition, I need to disable this setting ApplePressAndHoldEnabled.

In VSCode, I was able to disable the setting by running command in local terminal but I couldn't do the same thing in CodeSandbox so I turned off the global setting of ApplePressAndHoldEnabled once. (It is necesary to reboot your computer to apply the setting)

If there is any problem, you can turn it back on, so I have turned off the global setting as a workaround.

defaults write -g ApplePressAndHoldEnabled -bool true

I tried setting it up to target Chrome and it didn't work, so I guess I need a bit more additional settings to limit the scope.

This may not seem like much of a problem, but I hope you will be able to use it with caution since you will be changing the global settings.

How do you design icon in your private project?

Fri, 06 Dec 2019 00:00:00 GMT

Recently, I released my private project application for beta version.

I have been working as web developer for 5 years in some companies and I am web developer. However, I will not talk about programming in this article but how to design icon in your private project.

I am going to write about programing in other articles someday.

Introduction

Self Introduction

As I said, I am web developer not designer. I mainly use Rails and React. At the beginning of my web developer carrer, I started to work as server side developer and generally I get interested in front end technology and React. Finally, I also use React Native these days.

Besides, actually I am developing an memo application. The name is "Papyrus".

PaPyrus

It is released as beta version.

I already have released my some applications until now, but I couldn't make my application's logos be cool. I don't know why. I could never design it as I expected.

However, finally, I could finish the karma, thanks to my designer friend. I have a confident of the current icon for my application. (I will show you the icon below) I ask him how I should desing apllication's logo and he gave me some advices. I can't say that if you follow this process, you can definetly create cool icon though, you'll come to be able to do better by the process I organized.

What's Papyrus?

Papyrus is memo application which run on Mac OS and it is implemented by Electron.

There are some memo application in the world, but it usually has a feature to organize your notes.

It's overspec for me because I'm lazy. Those memo apps are better way to write down but I 'm too lazy to handle it.

I usually use such applications' draft for my blog but I needed a memo application like flyer on purpose of writing down my idea or command temporally.

That is why I created Papyrus. Beta version is released now and that is developing. If you download and use it, I'm going to feel happy. Besides, giving me feedback is going to make me be happy.

Applications such as Inkdrop, Boostnote and Evernote are too great,

Jet down your Todo list
Memoize your command it's hard to remember
Draft message you are sending
Copy a part of logs

These are Papyrus's usecase. It is going to fit these kind of short-lifespan memo.

Papyrus's Icon

Without further ado, I will talk about icon. I designed and implemented in PaPyrus by myself and of course, I designed icon as well.

This is the icon:

How do you think about this icon?

I have ever run some private web services though, my icons I designed before were too ugly to show others. Compared to them, this is cooler and This one is the best icon I have ever made. Besides, I got to sort of understand how to design an icon for application so I decided to verbalize.

How to make icon in your private project

For making PaPyrus icon, I wanted to make cool log match with application designe so I need some advice from designer and I asked a designer I know about it.

I summarized the advices and tips I googled as follows:

Select an basic object associating with application
Sketch object
Abstract the sketch
Give the abstact sketch the finishing touch

Select an basic object associating with application

This idea is from result I googled and I did trial and error though. First of all, You get to choose a basic object assocating with your application.

This time, PaPyrus has a image of paper literaly so I decided the object is "paper".

Evernote log is an elephant and it has a part fliping page on upper left of it. Thus, Evernote's logo associate with "elephant" + "paper". That of Apple is "apple" and Sketch applies something like "diamond" for its symbol.

In this way, you have to pick up an object for your project at first. It is intersting to select multiple objects as Evernote do ( "elephant" + "paper"). However, it is harder for beginner or developer who are not familier with designing logo to do that.

Anyway, if you want to choose more than two motif, I recommend you sketch each motif and combine with them in post process.

Sketch the object

This is most impressive advice I recieved from the designer. He said

"Don't open Illustlator at first. Sketch first."

As he said, I have made not good icon by starting from using Illustlator...

Then, I thought I started from sketching, but I have never doing since I was high school student. However, You can't tell unless you try. I tried to draw my hand.

I have no idea about sketching so I sketched while I watching a vide on YouToube.

However, at that time, An idea come up with in my mind.

" How can I make good icon through this process???"

I asked him to give me some advices about that with such a anxiety. And then, He said the purpose of sketching is "polishing observing skill"

Certainly, you can't draw in detail while you are sketching if you originally recognize those differences. (You can't illustlate well, if you copy an incorrect image with a paper.)

After I understand this point, I did trace some icons and sketching in order to understand how cool icon is drawn.

How about? I rolled the paper because I wanted to express the texture of paper. Now, it seems like harder for a paper, but this goal is not to sketch it well so it's OK. For me, this sketch was enough and I maked icon base on this sketch.

Besides, Following is too terrible sketch to continue..

What is this? This is like spring roll. I was not going to draw it! Anyway, let's enjoy the process with failure.

Abstract the sketch

Next, you abstract the sketch you drew and it approaching to icon. Until this, I sketch it with Procreate so I keep on illustrating with it.

First, this is a first idea.

This image is colored but I recommend you draw only outline of then abstracted icon with lines and add colors to it after that. I emphasized the looks rolling up the paper while I was abstracting.

I thought icon was getting better, but it was a little bit too artisitc. That was why I gave it finishing touch by using Papyrus's imaging color.

Give the abstact sketch the finishing touch

If you can make icon you are satisfied, you can skip this process. However, I needed to organize it with Illustlator.

This is final version.

I wanted to compated between some sort of version so I made difference patterns' icons. Finally, I picked up upper left one. I liked black one though, it's far from application theme so I didn't choose.

Done!

When you finished, export your favourite icon. As for now, I show you icons of before and after.

Final version was daramaticaly changed from the original version I sketched thouhgh, you would be able to clear your image about icon if you sketched before that.

Wrap Up

This is way I din't write about programming at all though, I'm glad if this article help your project and process of designing icon.

Papyrus is implemented by some interesting technologies such as React, TypeScript, Electron, Go and GraphQL. So, I'm going to write arrticles on the theme of them some time.

Thank you!

How to write Circle CI Config 2.1 from basic to advance

Tue, 24 Sep 2019 00:00:00 GMT

Recently, I didn't have a chance to write a lot of config in Cicle CI so far, but I had a chance to touch it at work. That is why I would like to share what I learned there.

I heard that you can use Github Actions nowadays. It's better to compare and contrast these things to see which one is best for your project. However, Circle CI already was used and I didn't have any complain about it so I deceided to use it.

In this case, we had an automated test environment in the current project, but we didn't have an automated deployment environment It seems like the deployment procedure is pretty much dependent on the person in charge. To improve it, we've stareted to automate deployments to make the procedure anyone can use.

Documentation.

First of all, better material to learn Circle CI is the official documentation, which is pretty well written. I used that as a reference to automate the deployment process this time.

Configure CircleCI

I mean, if you read the documents carefully, you may not have to read much of this article here. LOL! However, anyway , I'll try to summarize the documentation and explain it in a way that makes it easier to understand.

What I'll be explaining is the 2.1 version of config, which is different from 2.0.

The 2.1 version of config is different from 2.0, for example you can use "Command", "Executor" and so on.

Summary of concepts to keep in mind in Circle CI

First of all, I will talk outline of Circle CI. Circle CI can write CI configuration in .circleci/config.yml from the project's root directory, and define the processes to be executed in CI.

Job and Workflow.

In the following, we will explain the concepts necessary to define the process, but as a brief explanation, there is a basic unit of the process called Job, which is We'll take that in turn and define a single Workflow.

Some of you may not understand what a Workflow is, but it is the flow of the entire process as translated.

In CI,

Run the test code.
make sure it passes the test and deploy

Workflow is this flow of 1 and 2.

In the real world, it would be more complicated because it is necessary to test and deploy the source of the API server, test and deploy the source of the front end, and so on. But the basic concept is the same.

In this example, the

Testing of the API server
Deploying the API server
Test the frontend
Deploying the frontend code

The workflow consists of four jobs (1), and the order in which these jobs are executed is the workflow.

If you write this in a simple yaml, it looks like the following.こめ

This is not the correct format, so please follow the official documentation.

The following is an example of a simple yaml file.

version: 2.1
jobs:
  - api-test
      name: 'Test the API server'
  - api-deploy:
      name: 'Deploy the API server'
  - front-test:
      name: 'Test the frontend'
  - front-deploy:
      name: 'Deploy the frontend'
workflow:
  - test-and-deploy:
      jobs:
        - api-test
        - front-test
        - api-deploy
            requires:
              - api-test
        - front-deploy
            requires:
              - api-deploy
              - api-front

In the workflow section, there is a section called "requires". You need to write the job. In short, you need to write the dependent tasks for the job.

If you don't write the job requires, CirecleCI will execute the job without paying attention to the order of the tasks, so you need to write the requires in It's also possible that it will be deployed (depending on the number of parallelism). (Depending on the number of parallels)

In this way, Workflow is a high-level concept for Job and if you understand thes small/large relationship of some concepts, you can learn how to set up the configuration more easily.

Steps.

Now that we have the definition down, let's look at the details further.

Job consists of Steps and we describe the actual process in Job in the config file. In Steps, you can execute shell commands and just describe the process in these steps.

jobs:
  - api-test:
      name: 'Test the API server'
      steps:
        - checkout
        - run:
          name: 'Install a library'
          command: /var/spool
            command: | bundle install
        - run:
          name: 'Run a test'
          command: | | bundle exec rspec
            bundle exec rspec

I'll leave the details to the official documentation, but you can use the When clause to control things like executing a command if the previous command fails and there are also commands for checking out of the repository.

The actual execution of the commands is mainly done with the run command, but you can specify a working directory or define environment variables that are valid only in run clause.

Command(available since 2.1)

Command is one of the features from 2.1 and it makes you be able to commonize Steps with Command. For example, in many cases, you may want to activate the cache because it is redundant to install a package for every test.

In order to do so.

Check if the cache exists
Install the package (use the cache if you have it).
Overwrite the cache with the latest state.

but it's too tedious to copy and paste this process for each job, so we'll define this process as a Command and reuse it.

commands:
  package-install:
    description: 'Package installation with cache'
    steps:
      - restore-cache
        keys:
          - v1-hoge-server-{{ checksum: 'Gemfile.lock }}
          - v1-hoge-server
      - run
        name: 'bundle install'
        command: bundle install vender/bundle
      - save-cache
        key:
          - v1-hoge-server-{{ checksum: 'Gemfile.lock }}
          - v1-hoge-server
        paths:
          - vender/bundle

If you write the package installation commands in advance, you don't need to write a process, just call the command, and you can make a DRY configuration.

In addition, you can also pass parameters to this command in the form of parameters to make it easier to create reusable commands.

Executors (available since 2.1)

Executors are for reusing your environment; you can create a docker image and use it in your environment.

Orbs(available since 2.1)

The word "orbs" may be unfamiliar to you, but in essence it is a library. Once you write configuration as "orbs" of the Commands and Jobs I've introduced and publish the "orbs", you can use it in other projects, or more specifically, in all projects that use CircleCI.

https://circleci.com/orbs/registry/

The registry is for Orbs, so check the Orbs you can use.

As far as I can see, there are some orbs such as Slack's orbs, so it seems to be easy to implement notifications by using them. It's easy to install a specific version of Ruby, Node and so on to CircleCI.

Concepts Summary

To summarize what I've been explaining so far

Workflow
Jobs.
Steps.
Commands
Executors.
Orbs.

If you understand those things, you can start to use CircleCI for now. And the relationship between each of them is

Workflow > Jobs > Steps with a relationship (dependency) like this Commands are common jobs, Orbs are common public jobs across projects, and Executors seems to be better understood as common execution environment.

More in-depth.

The description so far should be enough to get you started with CirecleCI, but I was a little curious to get started. A somewhat in-depth summary of the content is as follows.

Using Cache.

CircleCI allows you to specify a directory and save it as a cache. It resolves the problem of installing packages envery build.

dependency cache

You can specify the key and path for caching by using save_cache in Steps in Job. You can use it all the time.

Control on a per-branch basis.

You can use branches to control which branches run Workflow and Job.

With this, you can do things like "if merged into develop, deploy after the tests are finished". You can also register a regular expression whitelist so you can control which feature branch to run tests on

Use SSH.

You may need to do SSH with Ansible, Capistrano, your own scripts, etc., but you will need to use CirecleCI You can use SSH to log in to the remote server by registering the private key to

The private key can be registered in the console. However, if you need to use the private key in your job, you need to add a commanod add_ssh_keys with the key's fingerprint to use the key.

Default Environment Variables.

Here are the predefined environment variables.

Predefined Environment Variables

The user who created the pull request.
Current job name.
The branch name of the current build.

and other build metainformation are defined as environment variables.

Scope of Environment Variables.

Environment variables can be used by defining environment variables in the environments of Workflow, Job, and Executor. The scope of the variable depends on the location where the variable is defined;

If you define them in the job, they are valid in the job; if you define them in the Executor, they are valid in the execution environment.

Validation of the Config file

If you are not used to it, you may not be able to follow the syntax of the Config file at first. If you install CircleCI's CLI beforehand, you can validate your config file in your local env.

To avoid unnecessary pushes to the repositories, it is recommended to push the config file after the validation.

Installation Instructions

Here's the command for validation.

circleci config validate

Summary

How do you think of the concept of CircleCI?

I made the config while referring to the document repeatedly in actual work, but the document is written more carefully and so helpful. In addition, the original config (befor I worked in) was 2.0, but Commands and Executor came to be able to use, and it became quite comfortable because a lot of processes can be commonized. Thanks to this, I was able to automate the deployment of my project.

I will use other features I didn't use this time like "orbs".

Create React+TypeScript+ES6 template for Electron

Sun, 14 Jul 2019 00:00:00 GMT

It's been a while since I've posted.

I have a feeling that a lot of things are going to change these days, and I'm going to have to deal with that. I haven't been able to update this page, but I hope I can update this page periodically as well.

I've been using electron for my personal project, so I'll write about that. I thought it would be fun to make apps on the desktop a long time ago, so I tried to use electron a little bit so I started to use it since then.

I was writing in Vallila js then so naturally, I want to use React in it this time.

Once I install React into the project, I started to fell like writing code in TypeScript, so I tried with create-react-app. However, the fact that the main process does not support import statements is becoming more and more worrisome.

When the app is small, I can ignore the fact that the main process is responsible for the old way of writing style, but I've been able to use the electron API to tweak window and The amount of code that you have to do is gradually increasing as you go through all of this, and it's getting harder and harder. Plus, you have to use the same constants between both processes. Thus, I would have to write the code in the old way like export, modules or something like that.

In order to solve this problem, I made a template repository for React + TypeScript + ES6 for Electron.

Here is repository. Check it out.

version-1/electron-react-ts-es6

You can easily start Electron with React + TypeScript + ES6 (if you are familiar with it) which you are used to in your projects.

Main Process and Renderer Process.

If you don't know Electron in depth, you won't know what Main Process and Renderer Process are. The main process, which exists only one process per application, is the one that starts up first when you run Electron.

On the other hand, render process is fired up for each window , and one application has multiple renderer processes.

The main process, as the name suggests, can handle ready and all-window-close ready, executes callbacks, creates new windows (renderer process), and so on. You can also handle each renderer process by operating on a specific window.

Example Code for Main Process (Entry Point)

The following is the entry point for the repository I mentioned earlier, which creates an instance of BrowserWindow (starts the renderer process) at the time of launching the app, and exits the app itself when all the windows are closed. This is the kind of process I've written.

When you create a more complex app, you need to add process like closing window or change the menu depending on input in render process.

import { app, BrowserWindow } from 'electron'

const onReady = async () => {
  win: BrowserWindow | null
  win = new BrowserWindow();
  win.loadURL('http://localhost:8080');

  // Open the Chromium Dev tool.
  win.webContents.openDevTools();

  win.on('closed', function() {
    win = null;
  });

}
app.once('ready', onReady)
app.on('window-all-closed', () => { app.quit() })

Example Code for Renderer Process (Entry Point)

On the other hand, you can think of Electron's renderer process as the front page of a web service, and most of the web development know-how can be directly transferred here, and React runs on the renderer process.

import React from 'react'
import styled from 'styled-components'
import { GlobalStyle } from 'styles/Index'

const Container = styled.div`
  max-width: 200px;
  height: 100%;
  width: 100%;
  margin: auto;
  display: flex;
  align-items: center;
}
`

const Title = styled.h2`
  text-align: center;
`

const Description = styled.p`
  text-align: center;
`

function App() {
  return (
    <Container>
      <GlobalStyle />
      <div>
        <Title>Hello World! </Title> <Title>Hello World!
        <Description>This is a sample of ES6 + TypeScript + React for Electron.</Description
      </div>.
    </Container>
  )
}

export default App

As you can see here, you can write code almost the same way as you can run React on the web: if you want to use Redux or Hooks in your project, you can do in same way.

IPC (The communitation style between two processes)

By now, you may understand the difference between the main process and the renderer process, but as a matter of course, when you actually develop, the communication (state synchronization) between the main process and the renderer process. In the case of Electron, this is accomplished by IPC. It is basically done by registering a listener in the main process and waiting for the renderer process to send messages to the listener.

To borrow an example from official

Main Process.

const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.reply('asynchronous-reply', 'pong')
})

Renderer Process.

const { ipcRenderer } = require('electron')

ipcRenderer.send('asynchronous-message', 'ping')
ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg) // prints "pong"
})

As shown in the above example, the main process registers a listener named "asynchronous-message " in the main process and sends a request from the renderer process at any given time.

So, in summary, the main process will be the parent process of the app, and the parent-child communication will be done using the IPC communication method

Let's get back to the main topic.

** When we make a complex application, the main process that manages the renderer process is going to be quite large and complicated, isn't it? **

** It's hard not to be able to share constants and other things between the renderer and the main process. **

This was my big concern about Electron app. That is wahy I have explained about the main process and the renderer process in the hope that you will understand what I mean.

So, in order to solve this problem, I created a template for both the main process and the renderer process that can be applied to ES6 (especially import).

Configure Webpack to call the main process with the ES6 syntax

From now on, I will focus on how to convert Electron to ES6.

First of all, the renderer process is really easier, such as importing, reacting and installing TypeScript.

As I wrote earlier, the renderer process can take over the know-how of web development almost as it is, so you can do something like create-react-app, and then you will be able to do it by googling. You can build an ES6 + React + TypeScript environment in just a few minutes, just by imitating the way you would find the article.

But for the main process, there are not so many articles about it, and you have to dive into the webpack world by yourself to configure it and use ES6 syntax. (It's very useful for writing react-script and renderer processes, but I ejected it because it's black-boxed and seems to be hard to configure).

The result is the repository I mentioned earlier.

version-1/electron-react-ts-es6

The key part of webpack configuration is to output entry points of main process and renderer process separately.

The code for the main process is put together under src/main and the renderer process code is put together under src/renderer beforehand. The following is the configuration.


module.exports = (env = {}) => {
  return [
    {
      name: 'main',
      ... .defaultConf(env),
      entry: path.resolve(__dirname, '... /src/main'),
      output: {
        path: path.resolve(__dirname, '... /public'),
        filename: 'main.js'
      },
      target: 'electron-main'
    },
    {
      // for renderer
      name: 'renderer',
      ... .defaultConf(env),
      entry: path.resolve(__dirname, '... /src/renderer'),
      output: {
        path: path.resolve(__dirname, '... /public'),
        filename: 'renderer.js'
      },
      target: 'web',
    }
  ]
}

With this configuration, the renderer process code is rendered as public/renderer.js and the main process code is rendered as public/main.js. In this way, Electron can be converted to ES6 by bundling the renderer process and the main process code separately.

It is also convenient to use webpack-dev-server to distribute the renderer process. In the repository, we deliver code from http://loalhost:8080 and can hot-reload it if we change the code during development.

Here are the commands for developing in the repository (scripts in package.json)

"scripts": {
  "start": "yarn build:main && electron ." ,
  "start:inspect": "yarn build:main && electron --inspect=5858 ." ,
  "start:inspect-brk": "yarn build:main && electron --inspect-brk=5858 ." ,
  "develop": "webpack-dev-server --host 0.0.0.0 --hot --config config config/webpack.config.js --config-name renderer",
  "build:main": "webpack --config config config/webpack.config.js --config-name main"
},

When you develop Electron, you need to set up a server of the renderer process (webpack-dev-server) with the yarn develop command. In parallel, it starts the main process as yarn start in a separate window (as you can see, it builds and starts electron based on the built files.) The main process is launched as yarn start (as you can see, once built, it launches electron from the built files) in a separate window.

In this development environment, the webpack-dev-server automatically hot-loads the code and reloads it for the renderer process only if you fix it a little bit. The main process code needs to be restarted by yarn start after you modify the code.

Ideally, it would be nice to be able to hot reload the main process code as well, but I'll give you the repository at this point. (If you want to hot reload it, use nodemon.)

Summary

So, I wrote a story about how I set up the environment to be able to develop in ES6 syntax and TypeScript for both the main process and the renderer process.

I like javascript, but it's a bit troublesome to set up this kind of environment. If you don't care about ES6, you may not need such a setting. It's important to be stress-free while developing because those troublesome setting affects my motivation to write the code.

It is fun and refreshing to see the application I made working on the desktop, but there is no best practices for Electron system design (as long as I know) like the web. It's not easy. It seems to be good to make the main process as the server side of the web (or rather, as an API), . But it runs on the same place so it's hard to think about the design because you can share the model and so on. (I'd like to know if there are best practices somewhere...)

However, once the JS environment is set up like this one, you can write code comfortably afterwards, so if you are annoyed with building an environment, I hope you can use it while referring to this repository or forking it.

Tried to Create Crud API Gin+Gorm+GraphQL(gqlgen)

Sat, 15 Jun 2019 00:00:00 GMT

I have been studying after coming Reiwa era. Now, I tried to develop web API with Go and GraphQL.

My Repository. gin-gorm-gqlgen-sample I usually develop backend with Ruby on Rails so I'm not famillier with golang and it takes long time to create this repository...

I will explain about entire flow. Next, I will talk about stack point I was working in.

Technolodies I used

Followings are technolodies I used this time,

Docker
Dep (package manager)
Gin (WAF)
Gorm (ORM)
gqlgen (GraphQL Library)

Gin

Gin is one of the Go language WAF. It have got the most star on github in go lang WAF(as far as I know).

Gorm

Gorm is Go Lang ORM. According to web articles, its interface is like Rails's ActiveRecord. I am familliar with Rails so I choose this library.

Dep

Dep is pacakge manager. I need to "go get" to install some libraries but it seems like disturbing my Dockerfile. So I used dep

gqlgen

gqlgen is GraphQL server library. There are some graphql libraries for golang such as graphql-go/graphql. But I selected gqlgen becuase I really like a point of generating code after I defined schema.

99designs/gqlgen

If you use gqlgen, you can proceed your development with following procedure.

Define Schema
Write logic about query in resolvers

In this process, you can focus on writing logic and you don't need to write boring code because gqlgen genearate code based on your schema.

Entire Flow

The gqlgen sample in the document is baout Todo List. If you will read "Getting Start", you start it easily. But, I need to do something when you use it with Gorm or you develop CRUD. So, I will explain those way, So, I will explain those way.

Install gqlgen with dep

You can install gqlgen by "go get" but if you use dep, you have to prepare wrapper scripts to generate boilerplate.

scripts/gqlgen.go

package main

import "github.com/99designs/gqlgen/cmd"

func main() {
	cmd.Execute()
}

If you do this,

$go run scripts/gqlgen.go init

you will be able to execute it like this. When you finished to write scripts, make files you need on gqlgen.

$go run scripts/gqlgen.go init

Gqlgen will generate followings files.

gqlgen.yml ・・・ Configure file. you write the configure fo generated code.
genereated.go ・・・ When you define schema and execute scripts, this file will be generatted. Must not edit manually because it is generated.
models_gen.go ・・・ This file is also generated from schema. Must not edit manually because it is generated.
resolver.go ・・・ This is generated if you yet to create this name file.
server/server.go ・・・ Entrypoint.

When you generate code, excecute following command and install pacakges.

dep ensure

Create Entry Point for Gin

I have to prepare entry point for gin if you want to use gin. prepare two endpoints.( for playground and main)

import (
  "github.com/99designs/gqlgen/handler"
  "github.com/gin-gonic/gin"
)

// Defining the Graphql handler
func graphqlHandler() gin.HandlerFunc {
  h := handler.GraphQL(NewExecutableSchema(Config{Resolvers: &Resolver{}}))

  return func(c *gin.Context) {
    h.ServeHTTP(c.Writer, c.Request)
  }
}

// Defining the Playground handler
func playgroundHandler() gin.HandlerFunc {
  h := handler.Playground("GraphQL", "/query")

  return func(c *gin.Context) {
    h.ServeHTTP(c.Writer, c.Request)
  }
}

func main() {
  // Setting up Gin
  r := gin.Default()
  r.POST("/query", graphqlHandler())
  r.GET("/", playgroundHandler())
    r.Run()
}

Prepare Gorm Model

Next, I will define model which are used on schema definition. I put it on internal/models according to go language standard layout.

// user.go
package models

import (
	"time"
)

type User struct {
	ID        int
	Name      string
	Todos     []Todo
	CreatedAt time.Time
	UpdatedAt time.Time
}

// todo.go
package models

import (
	"time"
)

type Todo struct {
	ID        int
	Text      string
	Done      bool
	UserID    int
	User      User
	CreatedAt time.Time
	UpdatedAt time.Time
}

Certainly I think it is preferd to wirte it with embed (please refer to Gorm documents) but errors occur when I excecuted. I wrote all attributes..(I would like to know better way..)

// todo.go
package models

import (
	"time"
)

type Todo struct {
  gorm.Model
	Text      string
	Done      bool
	UserID    int
	User      User
}

If you finish to define your model, you have to wirte mapping of model in gqlgen.yml. Followings is definition in this case.

models:
  Todo:
    model: gin_graphql/internal/models.Todo
  User:
    model: gin_graphql/internal/models.User

Define Schema

What I introduced until now is to prepare to develop in schema drriven, I'll to write the code and logic for api from now.

type Todo {
  id:   Int!
  text: String!
  done: Boolean!
  userID: Int!
  user: User!
  createdAt: Time!
  updatedAt: Time!
}

type User {
  id: Int!
  name: String!
  createdAt: Time!
  updatedAt: Time!
}

type Query {
  todos: [Todo!]!
  users: [User!]!
  todo(input: FetchTodo): Todo!
}

input NewTodo {
  text: String!
  userId: Int!
}

input EditTodo {
  id: Int!
  text: String!
}

input NewUser {
  name: String!
}

input FetchTodo {
  id: Int!
}

type Mutation {
  createTodo(input: NewTodo!): Todo!
  updateTodo(input: EditTodo!): Todo!
  deleteTodo(input: Int!): Todo!
  createUser(input: NewUser!): User!
}

scalar Time

Above is schema.graphql to realize CRUD. You have to use graphql syntax to write this. Processes to change resouce is wrriten in Mutations and Processes to read it is wrriten in Query. And Types you need is also defined in schema.graphql.

Until now, you got reday to generate code and you start to edit resolver.In resolver, IO is defined by schema.graphql and it is generated automatically. So you focus on writing logic between input and output.

Implemntaion Resolver

In resolver, write code to get data from database or create some records. You have to know that resolver is not overwritten when it is already exist.

Following is resolver I wrote. I can't explain all because it is about gorm and bored for us.


type Resolver struct {
}

func (r *Resolver) Mutation() MutationResolver {
	return &mutationResolver{r}
}
func (r *Resolver) Query() QueryResolver {
	return &queryResolver{r}
}

type mutationResolver struct{ *Resolver }

func (r *mutationResolver) CreateUser(ctx context.Context, input NewUser) (*models.User, error) {
	user := models.User{
		Name: input.Name,
	}
	db.Create(&user)
	return &user, nil
}

func (r *mutationResolver) CreateTodo(ctx context.Context, input NewTodo) (*models.Todo, error) {
	todo := models.Todo{
		Text:   input.Text,
		UserID: input.UserID,
		Done:   false,
	}
	db.Create(&todo)
	return &todo, nil
}

func (r *mutationResolver) UpdateTodo(ctx context.Context, input EditTodo) (*models.Todo, error) {
	todo := models.Todo{ID: input.ID}
	db.First(&todo)
	todo.Text = input.Text
	db.Model(&models.Todo{}).Update(&todo)

	return &todo, nil
}

func (r *mutationResolver) DeleteTodo(ctx context.Context, input int) (*models.Todo, error) {
	todo := models.Todo{
		ID: input,
	}
	db.First(&todo)
	db.Delete(&todo)
	return &todo, nil
}

type queryResolver struct{ *Resolver }

func (r *queryResolver) Todo(ctx context.Context, input *FetchTodo) (*models.Todo, error) {
	var todo models.Todo
	db.Preload("User").First(&todo, input.ID)
	return &todo, nil
}

func (r *queryResolver) Todos(ctx context.Context) ([]models.Todo, error) {
	var todos []models.Todo
	db.Preload("User").Find(&todos)
	fmt.Println(todos[0].User)
	return todos, nil
}

func (r *queryResolver) Users(ctx context.Context) ([]models.User, error) {
	var users []models.User
	db.Find(&users)
	return users, nil
}

Run

Finally, you can run your code if you finish process I introduced. The entrypoint of the repositry I prepared is cmd/app/main.go so you can run following command.

ENV=development go run cmd/app/main.go

We should pass env in this command because I implemented it to load configuration by env. When you success to run the server, you can try it on http://localhost:8080.

Stack Points

Next, I will write about points I stacked while I was building.

How can I define type of Time like CreatedAt and Updated?

Schema Types are only 5.

ID
Int
Float
String
Boolean

So we have to define types we need such as Date.

When I create this sample, I'm stack here but I found gqlgen provide Time Type so I can use it.

You only do like this as above schema definition.

scalar Time

After you declare the type, the type is mapped to Go Embeded tim.Time Type. Gqlgen support Map, Upload and Any type so if you want to use their type, only declare it with scalar declaration.

Error Occured in Gorm Model while I generate code.

This problem is not resolved. I got away with it by workaround though.. I defined a model with gorm embed type but error occured during generation...

type User {
  gorm.Model
  name
}

I got away with writing all attributes but it is not good. If anyone know better way, I would like to teach me.

Get association model while I get list

This is about not GraphQL but Gorm. I often get list which include associated model so I tried it in this sample, too. That is simpler than I expeceted. All you need is to add fields to struct.

type Todo {
  id:   Int!
  text: String!
  done: Boolean!
  userID: Int!
  user: User!
  createdAt: Time!
  updatedAt: Time!
}

For example, when you define Todo model, you can do that by adding userId and user fields to Todo model.

db.Preload("User").Find(&todo, input.ID)

And add this line to resolver.

You already write preload clasue so you already solved N+1 problem. This is sql when I execute.You can make sure that users query is preloaded.

(/app/src/gin_graphql/resolver.go:65)
[2019-05-14 15:27:07]  [0.90ms]  SELECT * FROM `todos`  WHERE (`todos`.`id` = 2) ORDER BY `todos`.`id` ASC LIMIT 1
[1 rows affected or returned ]

(/app/src/gin_graphql/resolver.go:65)
[2019-05-14 15:27:07]  [2.65ms]  SELECT * FROM `users`  WHERE (`id` IN (1)) ORDER BY `users`.`id` ASC
[1 rows affected or returned ]

Wrrap Up

I tryied to build hot stacks of Web API and Graphql.

I currently feel the limit of REST API while I develop system with it so I feel stronger the good points of graphql. In REST API, When I create new endpoint, I have to write code to request that endpoint in client-side.

In GraphQL, if you define schema once, you can fetch necessary resouce anytime. When I develop api in REST, I think how I don't depned on frontend but I often need to change code of server-side code when the front is changed.

I think such problems will be solved by GraphQL (many people say so though..) Certainly, I learn it deeply and I would know that drawbacks and I can never know that now but I can feel that potential.

If you are familiar with REST or are sick of creating Web API, try GraphQL

Thank you,

Summary of fixing errors when migrationg webpack2 to webpack4

Sun, 17 Feb 2019 00:00:00 GMT

I happened to have a chance to upgrade from webpack2 to webpack4 in a project using vue, so I had to use Here's a summary of the errors I've encountered when upgrading webpack and their solutions.

Impression after migrating webpack

The first impressions are that the version of package.json was rewritten before the work started, and then the I thought that I could make it if I did npm install and solved some errors, but it was not so easy.

Because the version of babel-loader was not usable with webpack4 in 6 series, I upgraded it to 8(latest version) skipping version 7. Then, I also had to change the version of babel to 7. Finally that's not a light task.

The other package versions such as file-loader and vue-loader didn't match with the 4 series, so I also needed to update them.

The first thing we did in the migration.

When upgrading, basically, you need to update the version of webpack to 4 first and then I was planning to just keep resolving the errors until the build was successful. It's not very efficient, so I went to the official document first.

Here is something like an explanation of how to migrate from webpack3 -> webpack4. You can find it here: https://webpack.js.org/migrate/4/

The basic policy is to kill errors as they are encountered, but I've already destroyed what I can find in the documentation.

add mode option

In webpack4, you can set the mode options, and if you build in production mode, you can uglify. For more information on how to set it up and how it behaves differently, the following link will help you.

https://webpack.js.org/concepts/mode/

The mode options can be specified with the -m option at the time of webpack's execution, or config it like following code.

module.exports = (env, argv) => {

  if (argv.mode === 'development') {
    config.devtool = 'source-map';
  }

  if (argv.mode === 'production') {
    //... }
  }

  return config;
};

webpack-cli setup

Since webpack4 has cli as webpack-cli, so I've also installed it.

I also installed it.

npm install -D webpack-cli

Remove Unnecessary Plug-ins

The following four plugins are the default for production mode in v4.

* NoEmitOnErrorsPlugin
* ModuleConcatenationPlugin
* DefinePlugin
* UglifyJsPlugn

This is the development mode default

* NamedModulesPlugin

The next two are deprecated and removed

* NoErrorsPlugin
* NewWatchingPlugin

So, if this plugin is included in your project's webpack.config.js, you should remove it.

Errors that appeared after the upgrade and their countermeasures.

As I wrote earlier, read the migration instructions and remove what I could destroy first so next I needed to fight against the unknown errors.

Cannot read property 'fileLoader' of undefined

It seems that the version of file-loader was simply too old. It was throwing up an error per leaflet.

https://github.com/tcoopman/image-webpack-loader/issues/153

npm install file-loader@[latest version]

TypeError: Cannot read property 'stylus' of undefined

https://github.com/shama/stylus-loader/issues/189 https://github.com/shama/stylus-loader/pull/190/files

A minor version of the stylus-loader had become an error with only 1 small version. It's solved by updating to 3.0.2.

Parse error in dynamic import.

When I built it, there was a parse error in the dynamic import. The project uses this preset-stage-2. It was already migrated it while following document, but it didn't work.

https://github.com/babel/babel/blob/master/packages/babel-preset-stage-2/README.md

Here's the solution, and it's in the

https://github.com/webpack/webpack/issues/8656

There are some posts that say it worked when I downgraded to wepback 4.28. It seems like last resolution, and if you read on as if there's a better way, webpack relies on acorn@^6.05 It seems to need to be installed.

Furthermore, the webpack relies on acorn, acorn-dynamic-import and I needed to dedupe like this

npm dedupe

It seemed to be an error because each one did not reference the same version.

https://github.com/webpack/webpack/issues/8656#issuecomment-456010969 ...

For now.

npm install -D acorn@^6.0.6
npm dedupe

Then it worked.

Cannot read property 'vue' of undefined

https://github.com/vuejs/vue-loader/issues/1177

Upgraded this because more than vue-loader@14.2.2 is required to webapck 4.

Cannot read property 'context' of undefined

Now they want me to update the css-loader

https://stackoverflow.com/questions/50418896/webpack-4-css-modules-typeerror-cannot-read-property-context-of-undefined

The answer says that ^0.28.11 is fine, but if you can build it with no problems, then the newer version is better, so I upgraded to 1.xx.

WARNING erupts on build.

No parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. inferred.

I started to see this kind of WARNING spewing out during the build, so I looked it up and this is what I found

https://github.com/rails/webpacker/issues/1734 ...

I was told to give it to vue-loader v15. Though I couldn't get rid of the feeling that "I just updated it to 14 just now". However, there was no way so I upgraded to a new version.

Click here to see how to upgrade.

https://vue-loader.vuejs.org/migrating.html#notable-breaking-changes

In my project, this is how I add plug-ins and

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

I did the pug and css settings as described in the documentation and I was able to build it with no problems.

Summary

I have introduced the errors and its solutions in the upgrade to webpack4. I wrote a quick note about giving it to v15, but I was usually stuck in it for a couple of hours.

The whole time I assumed that "I can't parse the pug!" However, it took me a while to realize that I hadn't been able to load the stylus, which was a horrible mistake. I wasted a lot of time.

When the version up is skipped, it becomes hard to skip it after. If other libraries are not supported, or it will need version-up like domino. It's not easy. If you focus on only development, version up and maintenance of the environment will be neglected. If you can create a team or system to be able to upgrade immediately when one person notices, it would be better to manage the project in a peaceful way.

Well then. Thank you for reading.

rss en

Implementing Ruby's methods Method in JavaScript

Ruby's methods Method

Implementation

Safety Introduction

Code Explanation

Prototype Chain

What the find Method Does

Wrap up

How to fix the problem of not working key repeating in CodeSandbox's Vim key binding.

Problem: Not working key repeating in CodeSandbox's Vim key binding

How to fix

How do you design icon in your private project?

Introduction

Self Introduction

What's Papyrus?

Papyrus's Icon

How to make icon in your private project

Select an basic object associating with application

Sketch the object

Abstract the sketch

Give the abstact sketch the finishing touch

Done!

Wrap Up

How to write Circle CI Config 2.1 from basic to advance

Documentation.

Summary of concepts to keep in mind in Circle CI

Job and Workflow.

Steps.

Command(available since 2.1)

Executors (available since 2.1)

Orbs(available since 2.1)

Concepts Summary

More in-depth.

Using Cache.

Control on a per-branch basis.

Use SSH.

Default Environment Variables.

Scope of Environment Variables.

Validation of the Config file

Summary

Create React+TypeScript+ES6 template for Electron

Main Process and Renderer Process.

Example Code for Main Process (Entry Point)

Example Code for Renderer Process (Entry Point)

IPC (The communitation style between two processes)

Main Process.

Renderer Process.

Configure Webpack to call the main process with the ES6 syntax

Summary

Tried to Create Crud API Gin+Gorm+GraphQL(gqlgen)

Technolodies I used

Gin

Gorm

Dep

gqlgen

Entire Flow

Install gqlgen with dep

Create Entry Point for Gin

Prepare Gorm Model

Define Schema

Implemntaion Resolver

Run

Stack Points

How can I define type of Time like CreatedAt and Updated?

Error Occured in Gorm Model while I generate code.

Get association model while I get list

Wrrap Up

Summary of fixing errors when migrationg webpack2 to webpack4

Impression after migrating webpack

The first thing we did in the migration.

add mode option

webpack-cli setup

Remove Unnecessary Plug-ins

Errors that appeared after the upgrade and their countermeasures.

Cannot read property 'fileLoader' of undefined

TypeError: Cannot read property 'stylus' of undefined

Parse error in dynamic import.

Cannot read property 'vue' of undefined

Cannot read property 'context' of undefined

Ruby's `methods` Method

What the `find` Method Does