DEV Community: Kazuya Matsumoto

[VSCode] Launch dev environment automatically

Kazuya Matsumoto — Sun, 08 May 2022 14:00:44 +0000

[VSCode] Launch dev environment automatically

This is quite sudden, but there are two kinds of developers in the world, keeping the development environment up always and an engineer who drops it every time.

For developers who drop every time, including me, it is a pain to have to open multiple terminals and type a lot of commands in each one every time.

So in this article, I’m introducing how to launch the dev environment automatically when you open a project in VSCode!

If you even set up Alfred, which I'll show you as a bonus, you can launch the development environment with a single command, and it will look something like this!

Let’s go!

Writer’s VSCode and OS version

VSCode: 1.66.0
macOS Monterey

Hello Custom Task

To automatically execute commands when a project is opened in VSCode, you can use Custom tasks.

Practice makes perfect.

First, let's define a task that displays Hello Custom Task in your terminal.

Define the task

Make an empty directory and create a .vscode/tasks.json in it.

$ mkdir ~/hellovscode-tasks                    
$ mkdir ~/hellovscode-tasks/.vscode            
$ touch ~/hellovscode-tasks/.vscode/tasks.json

Open the project(You need to install code command)

code ~/hellovscode-tasks

Define a custom task, edit the .vscode/tasks.json created in step 1 as follows

{
  "version": "2.0.0",
  "tasks": [
    {
      // Display name
      "label": "Hello Custom Task",
      // Type of task。shell or process
      "type": "shell",
　　　 // 🌟 Command to execute
      "command": "echo Hello Custom Task", 
      // Write over default properties when executed in windows
      "windows": {
        "command": "echo Hello Custom Task(Windows)"
      },
　　　 // Group of task belongs to。test、build、none
      "group": "none",
　　　 // Specify how to display execution results
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "runOptions": {
    // 🌟 When the command execlutes
        "runOn": "folderOpen"
      }
    }
  ]
}

The important part is the part marked with 🌟.

"command": "echo Hello Custom Task" : Command to execute
"runOn": "folderOpen" : Runs as soon as the project is opened

You can see more detail in the schema of tasks. json

Then, I thought this would run if I reopened the folder, but it does not.

This is the big pitfall.
To work "runOn": "folderOpen", you need to allow execution by running command manually.

Allow execution of tasks

Select Cmd+P > Tasks: Run Task
Select the HelloCustomTask you defined.
Then a toast will appear in the lower right corner of the screen asking if you want to allow automatic execution when the folder is opened.

That's it, you've defined your task!

Let’s check it woking by close and reopening the project!

Try it out on a real project

Now that you understand the basics of custom tasks, let's try them out on a real project.

This time, I will use the development environment of Nitte, a service scheduling system that I am personally developing, as an example.

Please replace the command with your own development environment!

Define tasks for each command

The following two commands must be executed when launching my development environment.

yarn run serve: start server
yarn ngrok: start ngrok

So, I first define tasks to execute these two commands in .vscode/tasks.json.

{
  "version": "2.0.0",
  "tasks": [
    // yarn serve command
    {
      "label": "yarn serve",
      "type": "shell",
      "command": "yarn serve",
      "group": "none",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    // yarn ngrok command
    {
      "label": "yarn ngrok",
      "type": "shell",
      "command": "yarn ngrok",
      "group": "none",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    }
  ]
}

Combine multiple tasks into one task using dependsOn

Then, define a task that combines the tasks you have created into a single task.

To combine multiple tasks into one, use the dependsOn property.
Multiple tasks can be grouped together by describing the labels of the tasks to be grouped as an array.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "yarn serve",
      ...
    },
    {
　　　 "label": "yarn ngrok",
      ...
    },
　　　// To combine multiple tasks
    {
      "label": "dev",
      "type": "shell",
      // Describe the labels of the tasks to be grouped as an array.
      "dependsOn": [
        "yarn serve",
        "yarn ngrok"
      ],
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}

💡 By default, tasks written in "dependsOn" are executed in parallel.
To specify the order of execution, specify "dependsOrder": "sequence".💡

Then, as before, allow execution once from Tasks: Run Task.

Let’s check it working, It is OK if all defined tasks are executed and the development environment is launched by simply opening the folder.

(Bonus) Let's connect with Alfred to make it even easier.

It's already a lot easier, but for me, it is still a hassle to open a terminal and type every time.

code path/to/project

So, we use Alfred Workflows to make it easier.

⚠️Workflowを使うにはPowerPack(有料)が必要です。⚠️

On the Workflows tab in Alfred, select + > Blank Workflow at the bottom right of the screen

Input name and select Create
In the Workflow view, right-click > Inputs > Keyword
Enter a keyword to call Workflow. Change to No Argument and select Save
Select the projection coming out of the keyword node > Actions > RunScript
Write a script to open the VSCode project and Save.

# Backend
/usr/local/bin/code /Users/matsumoto.kazuya/ghq/github.com/WombatTechnology/nitte-backend/functions
# Frontend
/usr/local/bin/code /Users/matsumoto.kazuya/ghq/github.com/WombatTechnology/nitte-frontend
# Open Browser
/usr/bin/open -a "/Applications/Google Chrome.app" 'http://localhost:8080'

💡When I ran bash from Alfred, for some reason there is no path, so I ran it with the full path /usr/local/bin/code instead of code💡

Now everything is up and running in the development environment with a single command, just like in the video at the beginning!
We did it 🎉

Get hands-on with the Cocoa MVC pattern

Kazuya Matsumoto — Mon, 29 Jun 2020 09:01:35 +0000

Introduction

In this article, I will discuss the Cocoa MVC pattern, which is probably the most commonly used pattern in iOS app implementation.

Although there are various software architectures such as clean architecture, I think Cocoa MVC pattern is the best for building applications in Swift iOS Storyboard based app, unless you want to use it on a large scale.

When you read about software architecture in books, you feel understand, but it's often difficult to implement in real applications.

So, this time, I will try to explain it by implementing a very simple application.
Please take a little time to read it as you move through it with your hands.

Get an idea of the Cococa MVC pattern

It's not very efficient to learn Cocoa MVC without knowing anything about it, so you should get a feel for it first.

We'll review it after implementations, so it's fine if you only have a basic understanding of what it is at this point.

The MVC pattern stands for Model-View-Controller Pattern, and as the name implies, it divides the code in your application into three roles: Model, View, and Controller.

Model

The Model is responsible for maintaining and processing data. For example, connecting with network, calculating something, save data to a local storage...etc.
Everything other than View and Controller is included in Model.

You should be careful about that Model is different from Model, which represents a table in the SQL database in the framework, in web frame work like Ruby on Rails.

Also, if the Model changes the data it holds, it will notify the Controller that subscribes to the Model of the change.

View

The View is responsible for drawing the screen.
In order to increase reusability, it is important to design View so that it receives input and draws it as it is, without logic as much as possible.

Controller

The Controller has references to the Model and View and monitors changes to the Model.
The Controller receives the user's input, requests the Model to process it, and updates the drawing of the View when it detects changes to the Model.

These can be summarized as follows

Name	Role
Model	Processing and holding data
View	Drawing View
Controller	Accept User input and connect View and Model

A very important point here is that the Controller acts as a bridge between the View and the Model, so that the View and the Model are completely independent of anything else.
By doing so, the View and the Model can be reused in a variety of ways.
On the contrary, Controllers are highly dependent on specific Views and Models, and Cocoa MVC is
design takes reusability of the View and Model to the extreme, at the expense of reusability of the Controller.

The entire process, from user input to screen drawing, looks like the following

[Controller] Accept a user's input.
[Controller] Request Model to process data.
[Model] Process data.
[Model] Notify changes to a subscribing Controller.
[Controller] Detect changes in the Model.
[Controller] Request View to draw.
[View] Draw on the screen.

Now that we've gotten the general idea up to this point, let's move on to the next section, where we'll actually start implementing the code!

Write Cocoa MVC by yourself

This app is a simple counter application that allows you to increase or decrease numbers with the + and - buttons.

Let's implement this project using the Cocoa MVC pattern.
You can create a project from scratch, or you can clone it and start with EN/Starter, as I've prepared the initial and final state of the project.
https://github.com/kazuooooo/CocoaMVCFromScratch

Implementing the CounterModel.

First, let's start by implementing the MVC M, the Model, the CounterModel.
As mentioned earlier, the role of the Model is to hold and process data.
So required them

Keeps how much the number is now (data retention)
Increase/decrease the number (data processing)
Notify the controller monitoring the Model of the change

import Foundation
class CounterModel {
    static let notificationName = " CounterModelChanged"

    let notificationCenter = NotificationCenter()
    // Retain how much the number is now (data retention)
    internal var count: Int = 0 {
        didSet {
            // Notify the controller monitoring the Model of the change
            notificationCenter.post(
                name: .init(rawValue: CounterModel. notificationName),
                object: count
            )
        }
    }
    // Retain how much the number is now (data retention)
    func countUp(){ count += 1 }
    func countDown(){ count -= 1 }
}

Implementing CounterView.

The next step is to implement CounterView, the V in MVC.
The role of the View is to render.
CountView is responsible for rendering the countLabel through the method render.

import Foundation
import UIKit

class CounterView: UIView {

    @IBOutlet weak var countLabel: UILabel!
    public func render(count: Int){
        countLabel.text = String(count)
    }
}

Then create the actual screen in StoryBoard. (If you're using a starter, it will be created in advance.)

Don't forget the Count Label is connected with an IBOutlet and the CounterView is set to the Custom View.

Implementing CounterViewController.

Finally, we implement the MVC C, CounterViewController.

In order to bridge the gap between the View and the Model,
Controller needs

Monitor Model changes
Accepts user input and asks the Model to process it
Request the View to draw when the Model is changed.

The source is below

import UIKit

class CounterViewController: UIViewController {
    // Keep the View and Model references.
    @IBOutlet var counterView: CounterView!
    private(set) lazy var counterModel = CounterModel()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Monitor changes to the Model
        counterModel.notificationCenter.addObserver (
            self,
            selector: #selector(self.handleCountChange (_:))),
            name: .init(NSNotification.Name(rawValue: CounterModel.notificationName))), object: nil
        )
    }

    // Detects changes.
    @objc func handleCountChange(_ notification: Notification) {
        if let count = notification.object as? Int {
            // requesting the drawing process to the View
            counterView.render(count: count)
        }
    }

    // Accepting input.
    @IBAction func OnPlusButtonTapped(_ sender: Any ) {
        // Ask the Model to do something.
        counterModel.countUp()
    }

    @IBAction func OnMinusButtonTapped(_ sender: Any) {
        counterModel.countDown()
    }
}

Here, too, don't forget to connect button to an IBAction and set up the ViewController class.

Now, the implementation is complete.
Try a Run and see if the +/- buttons work properly!

Review the pattern again

The implementation is complete, but it still doesn't feel like it's just a sutra, and it doesn't feel right somehow, does it?
Finally, let's go over the big picture again, looking at the code.
This will give you a better understanding.

Look at dependencies.

First, let's go over the code again, looking at this diagram we saw earlier about dependencies !

If you look at the code in the Controller, you can see that the CounterViewController has CounterView and CounterModel references and monitor changes of CounterModel.

class CounterViewController: UIViewController {
    // Has CounterView and CounterModel references
    @IBOutlet var counterView: CounterView!
    private(set) lazy var counterModel = CounterModel()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Monitor model's change
        counterModel.notificationCenter.addObserver(
            self,
            selector: #selector(self.handleCountChange(_:)),
            name: .init(NSNotification.Name(rawValue: CounterModel.notificationName)), object: nil
        )
    }
...
}

Also, be sure to check the code to see that the View and Model are completely independent of the Controller, which only accepts processing and can be reused.

Check process flow

Finally, we will check the whole process flow by looking at the diagram and code, using the + button as an example.

1. Accept a user’s input.

At first, Counter View Controller accepts input via OnPlusButtonTapped method.

// Accept input
@IBAction func OnPlusButtonTapped(_ sender: Any) {
    ...
}

2. Request Model to process data

Secondly, the Controller requests Counter Model to count up

// Accept input
@IBAction func OnPlusButtonTapped(_ sender: Any) {
    // Request model to process
    counterModel.countUp()
}

3. Process data

Thirdly, CounterModel count up the count.

class CounterModel {
    ...
    // Count up count
    func countUp(){ count += 1 }
    ...
}

4. Notify changes

After process data, Model notify changes to subscribers.

class CounterModel {
    ...
    internal var count: Int = 0 {
        didSet {
            // Notify changes to subscribers
            notificationCenter.post(
                name: .init(rawValue: CounterModel.notificationName),
                object: count
            )
        }
    }
    ...
}

5. Detect model's change

Controller detects model's change via the notification observer.

class CounterViewController: UIViewController {
    override func viewDidLoad() {
        ...
        // Monitor model's change
        counterModel.notificationCenter.addObserver(
            self,
            selector: #selector(self.handleCountChange(_:)),
            name: .init(NSNotification.Name(rawValue: CounterModel.notificationName)), object: nil
        )
    }
    ...

    // Method fires when model is changed
    @objc func handleCountChange(_ notification: Notification) {
        ...
    }
}

6. Request View to render

Controller requests View to render updated count.

@objc func handleCountChange(_ notification: Notification) {
    if let _ = notification.object as? Int {
        // Request View to render
        counterView.render(count: counterModel.count)
    }
}

7. Render View

CounterView reflects counter changes to the view.

class CounterView: UIView {
    // Render view
    public func render(count: Int){
        countLabel.text = String(count)
    }
}

At the end

How was that?
Software architecture patterns are hard to understand at first, but once you understand them, they are a very powerful weapon for engineers.
If you don't fully understand something, I recommend you to try to understand it by writing example by yourself.

Never seeking downloads folder with apple script

Kazuya Matsumoto — Sat, 25 Apr 2020 06:29:38 +0000

How many times do you download something ever?

Download any new software
Download photos and icons
Download the file sent to you by email
...etc.

And what is the one thing you must do after you download it?
That's right.

*Open the download folder! *

I'm sure I'll do it, I'd love to meet someone who doesn't open the download folder after downloading it 😜

I think most people do this, don't they?

cmd + space to find finder
select the download folder
move or open files

This is such a hassle and a waste of time, isn't it?
This time, I'll show you how to automate the process of opening this download folder using apple script!

How to do it

This time, we'll use a feature called WatchingFolders in apple script.

About apple script itself, you can see here.

First of all, you need to create an apple script by using the script editor, which is the editor of apple script. Just 5 lines of script will save your time.

on adding folder items to theAttachedFolder after receiving theNewItems
    tell application "Finder"
        open theAttachedFolder
    end tell
end adding folder items to

Something like this.

To explain a little since this is a technical article, when a file is added to a folder, the event handler is called and the object of the folder is put into theAttachedFolder.

on adding folder items to theAttachedFolder

to open that folder in the Finder.

tell application "Finder"
    open theAttachedFolder
end tell

Once the script is created, save it. At this time, it is important to note that you need to save it to one of the folders of

/Library/Scripts/Folder Action Scripts/ ## Available to any user
~/Library/Scripts/Folder Action Scripts/ ## Current user only

The name can be anything, but this time I chose open_directory_on_add_item.
(If you don't have Folder Action Scripts, you can create your own one with the same name.)

Apply the script to the Download folder after saving it.
1. Control-click the folder in Finder.
2. Choose Folder Actions Setup from the contextual menu.
3. Choose a script to connect to the folder and click Attach.

Also make sure that Use Folder Actions is checked.

We're ready to go!

Operation check

Finally, let's make sure it works!
I'm going to try to download some kind of icon, whatever it is.
Wombat - Free animals icons
The download folder should open automatically when it completes!

Now you're free from the pain of looking for the download folder! You have to try it!

List all only files under directory with shell script

Kazuya Matsumoto — Thu, 05 Mar 2020 10:04:38 +0000

Thanks to @BenSincla, this article become very simple!

For example, you have directory like this.

$ tree A
A
├── B
│   └── b.txt
├── C
│   └── c.txt
└── a.txt

2 directories, 3 files

Relative path

find ./A -type f

Absolute path

find ./A -type f | \
while read file; do
  echo $file | sed -e "s|^.|$PWD|g"
done

Let's make your cardfolio site 💳💨

Kazuya Matsumoto — Fri, 27 Dec 2019 12:59:20 +0000

What is Cardfolio! ?

Cardfolio! is a Gatsby-based cardfolio site framework.

Wait, what is cardfolio?

See below

That's right! It is a portfolio site just like business card.It has the paper texture and rotation as if a real business card.

Cardfolio site's true worth is definitely seen when you hand over your business card to someone. Below is my business card, imagine you receive this card.(If you browse this site by mobile, you can access from here)

How was that? You can make a great impression to receiver like you just felt 😄

And this time, I released on Github as OSS so that anyone can create a your own card folio site 😙 I also designed the logo 🖌

Cardfolio!

If you have used react before, you can easily create it! Also, you can customize your design and paper texture.

How to rotate of business card?

You might think

How this rotation implemented?

Let me explain about this.

Both side page

To create both side of card, implement these steps.

Create front and back components respectively and pile up them under container (card) with position: absolute.
Rotate y axis of the backside component 180 degrees by transform rotateY.
To switch between frontside and backside, rotate container.

But, there is a pitfall. When it is turned over, mirror inverted frontside component is displayed.

This is because if you turn over the DOM with transform3d, the back side of the object will be displayed by default. To solve this, it is necessary to change the default behavior by set backface-visibility to a hidden.

.frontSide {
  backface-visibility: hidden; 
}

.backSide {
  backface-visibility: hidden; 
}

This way, if you flip it over, the frontside displays nothing, and as a result the back side will be displayed on the screen as the top. Sample code here

Rotate according to user operation

Now rotate the card as the user drags. First of all, to detect a drag, you can easily get it using the hook called useDrag in react-use-gesture

import { useSpring } from 'react-spring'
...
const bind = useDrag(({ down, movement: [moveX], last }) => {
  ...
})

When the drag is detected, the current x coordinate is converted to the y axis angle and the card is rotated.

   // convert Xposition to degree
   const degree = lastDegree + moveXToDegree(moveX)
...
　 // in draggin
  if (down) {
    // rotate as user dragging
    set({ transform: `rotateY(${degree}deg)` })
    return degree
  }
...

Furthermore, when user release his/her finger, need back to a front or back to horizontally with an animation(ReactSpring used). The decision logic is as shown in the following figure

In first quadrant or third quadrant, decrease the angle.
In the second and fourth quadrants, increase the angle.

if (last) {
  // judge back or front and set degree
  const horizontalDegree = calcHorizontalDegreeToReturn(degree)
  setDegree(horizontalDegree)
}

Please see Source Code for details.

Summary

How was that? Gatsby is a great framework to build a website on a regular basis, moreover it's a good idea to build an OSS based on Gatsby because you can develop while taking advantage of the various benefits of Gatsby 🎁
I hope that one of the readers of this article make their own card folio site using Cardfolio! !

What is Linux test command?

Kazuya Matsumoto — Wed, 26 Sep 2018 17:49:23 +0000

Overview

In a word, it is a command to judge conditions.
It can be written as follows.

test condition

In the condition part, write the condition you want to judge and result returns below.

In case of true: 0
In case of false: 1

(It is opposite judgment of general programming language, because of the practice of returning 0 if the UNIX program is normally terminated and 1 if it is abnormally terminated)

Whether a file with a specific file name exists as an example is as follows.

`shell test -e exist.text; echo $ status # => 0 test -e not_exist.text; echo $ status # => 1 `

Format using []

Apart from the above writing method, the test sentence can be written as follows.

[ conditions ]

With this notation the previous example will be as follows

shell [ -e exist.text ]; echo $ status # => 0 [ -e not_exist.text ]; echo $ status # => 1
At this time, it is necessary to empty one space in [] as a caveat.

Use with if

In the previous example, we output the result as echo $status, but in reality it is often used with if.
Try writing FizzBuzz with if and test command.

shell for i inseq 1 15do if [$ (($ i% 3)) - eq 0] && [$ (($ i% 5)) - eq 0]; then echo 'FizzBuzz' elif [$ (($ i% 3)) - eq 0]; then echo 'Fizz' elif [$ (($ i% 5)) - eq 0]; then echo 'Buzz' else echo $ i fi done

Various condition judgment

The options available with the test command are as follows.

File processing

| Condition | Determination |
|: ----------- | ------------: |
| -d file | True if file is a directory |
| -e file | True if file exists |
| -f file | True if file is a regular file (not a directory, etc.)
| -L file | True if file is a symbolic link |
| -r file | True if file is readable |
| -s file | True if size of file is not 0 |
| -w file | True if file is writable |
| -x file | True if file is executable |

String processing

| Condition | Determination |
|: ----------- | ------------: |
| -z str | True if the length of str is 0 |
| -n str | True if the length of str is greater than 0 |
| str1 == str2 | True if the strings are equal |
| str1 != str2 | True if the strings are not equal |

Numerical processing

| Condition | Determination |
|: ----------- | ------------: |
| int1 -eq int2 | True if int1 and int2 are equal |
| int1 -ne int 2 | True if int1 and int2 are not equal |
| int1 -lt int2 | True if int1 is smaller than int2|
| int1 -le int2 | True if int1 is smaller than equal to int2 |
| int 1 -gt int 2 | True if int 1 is greater than int2 |
| int 1 -ge int 2 | True if int 1 is greater than equal to int2 |

logical condition

| Condition | Determination |
|: ----------- | ------------: |
|! Condition | True if condition is false |
| Condition1 -a Condition2 | True if both Condition1 and Condition2 are true |
| Condition1 -o Condition2 | True if either condition1 or condition2 is true |

Condition determination using && and ||

shell command1 && command2 # When command1 is executed correctly, execute command2 command1 || command2 # When an error occurs with command1, execute command2

Sometimes you can write an if statement more concisely using the notation

For example

shell if cat $ 1; then echo OK fi

↓

sh cat $ 1 && echo OK

sh if! [$ ((1% 3)) - eq 0]; then echo NG fi

↓

sh [$ ((1% 3)) - eq 0] || echo NG

You can write like this.

Casually until now
if [hogehoge]
Although I wrote it, I used the test command before I knew it.
It is a useful command which is indispensable when writing a complicated shell.