Forem: Kyohei Fukuda

Visualized Communication Strengthens Both Individuals and Teams - Featuring CleanShot X

Kyohei Fukuda — Wed, 20 Sep 2023 04:01:08 +0000

Asynchronous Communication for Remote Workers

In a time where remote work has become the norm, I find that asynchronous communication on platforms such as GitHub and Slack has become an essential factor in determining whether or not work can be accomplished efficiently.

Personally, I was not very good at remote communication. Therefore, I was searching for ways to collaborate effectively.

During this process, I noticed something and it eased by CleanShot X, which I will introduce here.

CleanShot X is a paid (one-time purchase) screenshot extension tool. I have been using it for a while and recommended it to friends. Recently, they started an affiliate program, so I thought I'd write an article about it. Purchases made through the links in this article will give me a 25% kickback.

Combining Images and Videos in Communication

Communication isn't just about words

As developers, we write code and documents daily, but I believe that remote worker’s asynchronous communication is only 50 points if it is only based on text. In other words, communication has aspects of mixed martial arts; we should use everything available to us. (This is even more so for me as I develop in a non-native language environment)

Conveying messages by combining images and videos not only reduces the burden on the reader but also provides a specific visual, preventing misunderstandings.

Work Efficiently Using CleanShot X

For example, when pasting a screenshot in GitHub Issues, there are times when you want to edit it to mask personal information or depict reproduction steps. You can easily achieve this as shown below. Moreover, images are saved to the clipboard, so your desktop won’t be cluttered with screenshots.

I want you to use it and experience the smoothness and high UX. It’s truly easy to use! They offer a 30-day money-back guarantee, so I encourage you to try it out with the intention of getting a refund...!

I find it very useful for various tasks including creating documents, using Slack and email, creating slides, etc., both for work and personal use on my PC. I use it daily.

I especially love and frequently use the following features:

Quick Access
You can quickly capture and edit after taking a shot. It's modeless and offers the highest UX.
Convenient annotations that can't be done with Mac's preview app
- Mosaic
  You can hide personal and confidential information using the mosaic feature.
- Numbering
  It's handy when creating step-by-step explanations or instructions.
GIF, MP4 (including 4K) recording possible
You can easily screen record, including mouse clicks, keystrokes, and even include your face, which is great.

As you can see, CleanShot X facilitates communication using images and videos and is a useful tool.

Actual Valuable Use Cases

Development

For instance, adding a video eliminates the need to write reproduction steps and can significantly avoid misleading information.

Example:
https://github.com/pdfme/pdfme/pull/196#issuecomment-1640880711

Conveying the usefulness of attaching screenshots and videos to teammates, a screenshot culture naturally emerged in the pdfme repository.

Example:
https://github.com/pdfme/pdfme/pull/230

Communication costs have reduced, and collaboration has become easier. It’s truly helpful.

Documentation

To prevent readers from losing interest, utilizing visual elements (images and videos) to convey information is extremely effective, along with keeping paragraphs short.

Example:
https://pdfme.com/docs/getting-started#template

Also, GIFs can easily convey UI movements and behavior within documents, which is very convenient.

Example:
https://pdfme.com/docs/getting-started#designer

Training

Video content creates a sense of familiarity and enables efficient training.

CleanShot X’s screen recording can include camera footage at the corner, highlighting mouse clicks and keystrokes.

I usually create code explanatory videos using iPhone and CleanShot X. If you're interested in that, please check out my past presentation materials on "DevRel video production".
https://www.docswell.com/s/hand-dot/58GV1E-2023-05-09-175645

Conclusion

Visualized communication is a technique that can easily cover weaknesses such as being poor at communication, not being able to explain things well, and operating in a non-native language environment.

Of course, this technique can be practiced right away even without using CleanShot X.

And the greatest advantage of visualized communication is that it reduces the burden on the recipient.

This is especially the case if your written message, proposal, or comments are being seen by many people. The more recipients there are, the more you can confer this benefit.

I would be happy if this article encourages you to skillfully utilize screenshots and screen recordings to facilitate smoother communication.

CleanShot X is available here!

That's all for now.

Published Chrome extension for streamlined React development🎉

Kyohei Fukuda — Tue, 06 Sep 2022 02:54:49 +0000

I created a Chrome extension called React Inspector.

It launches the inspector on Chrome and opens the source code of the clicked React component in an editor. (Currently only VSCode is supported)
PS: ↑2022/09/12 "Open in Editor URL" can be set from the options page to open with Any Editor 's URL schema...!

Chrome web store: https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh
GitHub: https://github.com/hand-dot/react-inspector

You can jump directly to the React source code, which makes it very easy to identify the code from the UI.

Newly joined projects
Multilingual website
Maintenance of old apps

I think it would be convenient and save time to identify the source code if you can use it for projects such as

How it works

You are probably already familiar with React Developer Tools, a Chrome extension officially provided by the React team.

React Developer Tools sets a global named __REACT_DEVTOOLS_GLOBAL_HOOK__, then React communicates with that hook during initialization.

The __REACT_DEVTOOLS_GLOBAL_HOOK__ has a Map object called renderers.
The method findFiberByHostInstance of renderers can be used to find React Fiber from HTML elements on a web page.

Fiber is a reconciliation engine for React.
But in addition to the information needed for reconciliation, Fiber has some other information that the developer can use for debugging that is added during development builds.

https://github.com/facebook/react/blob/f0efa1164b7ca8523b081223954d05c88e92053b/packages/react-reconciler/src/ReactInternalTypes.js#L193

React Inspector opens files in VSCode using the _debugSource information set in Fiber.

Requirements

As explained above, it works using the React Developer Tools setting of REACT_DEVTOOLS_GLOBAL_HOOK and React Fiber at development build time, so it will not work unless the following two points are satisfied.

React Developer Tools must be installed.
React must be in development build. If you visit a site with React in development mode, the icon will have a red background

How to start the Inspector

With the React Developer Tools installed and the React development server up and running, you can launch the inspector in the following three ways.

Click on the extension icon
From context menu
By Shortcut Mac: Command+Shift+X Win: Ctrl+Shift+X

Impressions on how I made it

I could develop Chrome extension quickly with TS using https://crxjs.dev/
I learned a little bit about the internal structure of React, and I discovered many things when I read the source code of React.
I've opened a GitHub repository, so if you have any ideas or problems, please feel free to open an Issue!

Chrome web store: https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh
GitHub: https://github.com/hand-dot/react-inspector

Why are you setting disabled property for each input element?

Kyohei Fukuda — Thu, 09 Jun 2022 12:03:18 +0000

If you set a disabled property on the fieldset element, there is no need to set disabled on each input element.

Before😅:

<form onSubmit={handleSubmit}>
  <div>
    <label>
      Email:
      <input disabled={loading} type="email" />
    </label>
  </div>
  <div>
    <label>
      Password:
      <input disabled={loading} type="password" />
    </label>
  </div>
  <input disabled={loading} type="submit" value="submit" />
</form>

After😎:

<form onSubmit={handleSubmit}>
  <fieldset disabled={loading}>
    <div>
      <label>
        Email:
        <input type="email" />
      </label>
    </div>
    <div>
      <label>
        Password:
        <input type="password" />
      </label>
    </div>
    <input type="submit" value="submit" />
  </fieldset>
</form>

Bonus: Use legend element to display caption in the fieldset element

<form onSubmit={handleSubmit}>
  <fieldset disabled={loading}>
    <legend>Login</legend>
    <div>
      <label>
        Email:
        <input type="email" />
      </label>
    </div>
    <div>
      <label>
        Password:
        <input type="password" />
      </label>
    </div>
    <input type="submit" value="submit" />
  </fieldset>
</form>

Manage your life task with GitHub

Kyohei Fukuda — Wed, 08 Jun 2022 07:11:11 +0000

Many things happen in life. Sometimes nothing happens, and we are bored.

Why don't you create a life repository to "To Create Issue for now" to move forward in the direction you want as much as possible?

This article describes my efforts to make my life as stress-free as possible using GitHub, which I am sure many developers use.

Many task management and blogging services are available, but I assume you are engineers here. So, I suggest that you use GitHub, which you are probably familiar with, for task management and blogging. All of the services introduced here are free of charge, so please look at them until the end.

There are many things to do in my life. I tried to handle it on GitHub, and it was good.

Create a life repository on GitHub

Then, create an issue from a life repository, like below.

To renew a lease agreement.
Dental treatment
Open an investment account.

I've been operating it for almost a year already, and the key points that have kept it going are.

Because I use this service for my work, I can manage it with the same operation, so I don't have to switch my brain on how to operate it.

That is one of the main reasons I recommend GitHub as a task management tool for engineers outside of development.

Just as in typical software development, let's register more and more issues that you want to realize or improve.

Unlike a general TODO list, as you may know, We can write issue descriptions in markdown, milestones can create, and we can create on the project board, etc.

It is very functional. You should be able to use these features right now without learning new operations because we're using them all the time in our work.

For example:

You can create a project called "house moving," create an Issue of things to do, write down the procedures and other details, and manage them in the Kanban section.
Set up an Issue of the book to read, and then once you read it, you can leave a comment on your Issue notes.

Like that, you can imagine a use case.

The point is to register more than TODOs.
Tasks too simple, such as shopping, are not enough to be an issue, so I use Microsoft To-Do for the TODO list that I share with my wife.
I think you will know what is suitable after operating it for a while.

We can divide complex tasks using a task list.
This function is also handy, and I use it often.

Commit to today's events and daily emotions!

Since the above life repository has successfully managed issues, I have also started keeping a diary. Here are some of them.

There is a Github repository called "TIL" (Today I Learned) to make small outputs a habit; think of it as a diary version.

GitHub is also straightforward to use in point for writing a diary. Photos are an essential part of a diary, aren't they?

See below.

When editing GitHub source code in a browser, I noticed that I could directly upload images by drag and drop if the code was markdown. Also, Since May 2021, we can upload .mp4 and .mov.

The scalability of blogging on GitHub is the best of any service.

Because:

Image URLs are https://user-images.githubusercontent.com/xxxx~ instead of relative paths to image files, so they can be easily transferred when publishing to other media such as DEV.
- Note that the URL of https://user-images.githubusercontent.com/xxxx~ is published on the web even in private repositories.
If you write Front Matter, you can create a site anytime with Gatsby, Jekyll, etc.

I write Front Matter like this.



---
title: GitHubで人生を管理する
description: 人生はいろんなことが起こります。なにも起こらなくて退屈な時もあります。
少しでも自分の望む方向に進めるために「とりあえずIssue立てるか」というレポジトリ life を作ってみてはいかがですか？
author: hand-dot
layout: post
date : 2021-12-17T12:04
category: 雑記
tags:
    - ブログ
---

This article was also written on GitHub and copied and pasted for posting.

If you are not satisfied with GitHub's online editor, don't worry, you can open VS Code by pressing the '.' key on the repository.
That is useful if you need to do batch replacements, etc.

Conclusion

Many things happen in life. Sometimes nothing happens, and we are bored.

Why don't you create a life repository to "To Create Issue for now" to move forward in the direction you want as much as possible?

That was a unique way to use GitHub.
If you are an engineer, you will be able to use it well.

Thank you for reading to the end.

A full comparison of 6 JS libraries for generating PDFs

Kyohei Fukuda — Mon, 15 Mar 2021 11:45:22 +0000

Introduction

In this article, we’ll talk about a series of Javascript libraries for
generating PDFs.
We'll look into real-world use cases and we'll mainly focus on 5
things:

the running environment
the supported modules
typings
custom fonts
easy to use

After this read, you'll be able to find the right PDF library for your
Javascript application.
In the end, we'll also introduce pdfme, a very handy and
powerful PDF library!

Let's GO pdfme Official Site

if you like it, give me a start⭐ https://github.com/pdfme/pdfme

Comparison

Compare 6 libraries

1. PDFKit

PDFKit is one of the first pdf libraries released in the huge
Javascript ecosystem. Available since 2012 has gained strong
popularity and it is still receiving updates as of 2021.
A little bit more difficult to use if compared to other libraries offers
support to both Node and the browser through Webpack.

And as we will see later in this comparison some PDF libraries are
wrappers around PDFKit.

It supports custom fonts and image embedding, but lacks of a high-
level API;

In addition, the documentation tends to be complex.
As you can expect, it requires a certain amount of time to get used
to it, and at the very beginning,
you'll find that designing PDFs will not be the easiest thing to do.

Point of evaluation	Evaluation
Works in Node and browser	△(a bit complicated)
Typings	○(DefinitelyTyped)
Custom fonts	○(Be careful when using this in a browser)
Easy to use	△(a bit complicated)

2. pdfmake

pdfmake is a wrapper library built around PDFKit. The main
the difference is in the programming paradigm:

while PDFKit adopts the classic imperative style, pdfmake has a
declarative approach.

That's why it's easier to focus on what you want to do, instead of
spending time telling the library how to achieve a determined result.

But not all that glitters is gold, you might encounter issues when
you try to embed custom fonts while using Webpack. Unfortunately,
there is no much documentation available on the web about this
issue. However, if you are not using Webpack you can easily clone
the git repository and run the font embedding script.

Point of evaluation	Evaluation
Works in Node and browser	△(Be careful using Webpack)
Typings	○(DefinitelyTyped)
Custom fonts	△(Need to build your own)
Easy to use	○

3. jsPDF

jsPDF has the highest number of start among the pdf libraries in
GitHub, and not by chance it’s very stable and well maintained.
The modules are exported according to the AMD module standard,
which makes easy to use it with node and browsers.

As for PDFKit the APIs provided have an imperative pattern, with
the result that creating a complex layout tend to be very hard.

Embedding fonts it’s not difficult but needs an extra step: converting
the fonts to TTF files.

jsPDF is not the easiest library to master, but the documentation is
very rich so you’ll not encounter any particular obstacle while
working with it. https://rawgit.com/MrRio/jsPDF/master/docs/index.html)

Point of evaluation	Evaluation
Works in Node and browser	○
Typings	○
Custom fonts	○(ttf files need to be converted)
Easy to use	△(a bit complicated)

4. Puppeteer

As you may know, Puppeteer is a Node library that provides a high-
level API to control Chrome, but it can also be used to create PDFs as well.

The templates have to be written in HTML, which makes jsPDF
very easy to use for web developers.

The following article is a good reference to use while you are
developing: Generate a PDF from HTML with puppeteer

Puppeteer has mainly two disadvantages:

You need to implement a backend solution.
You need to start Puppeteer every-time you need to create a PDF, which creates some overhead. It is slow.

If the disadvantages listed above are not a big problem for you,
then it may be a good option especially if you need to design
HTML-tables etc.

Point of evaluation	Evaluation
Works in Node and browser	x
Typings	-
Custom fonts	○(web fonts)
Easy to use	?

5. pdf-lib

pdf-lib is a library for creating and editing PDFs implemented
entirely in Typescript, and as for pdfmake is built around PDFKit.

Although it was released after all the other libraries, it’s very popular
with thousands of stars on GitHub.

The design of the APIs are awesome and of course, works with
both: node and browsers.

It supports PDF merging, splitting, embedding, and has a lot of
features that other libraries just don’t have;

pdf-lib is very powerful, but also very simple to use.

One of the hottest features is the support to Unit8Array and
ArrayBuffer to embed font files, which allows using fs in case you
are working with node and xhr in case you are working in the
browser. You’ll be able to feel its superiors in terms of performance
when you compare it with other libraries, and of course it can be
used with Webpack.

Also, this library has an imperative approach, and as can be
deduced working with complex layouts it’s not so easy.

Point of evaluation	Evaluation
Works in Node and browser	○
Typings	○
Custom fonts	○
Easy to use	△(a bit complicated, the layout needs to be calculated)

6. pdfme

Finally, we are at the end, so let me introduce pdfme. I personally developed this library, with the aim of
making Pdf-lib as declarative as possible.

In contraposition with pdf-lib, pdfme doesn’t require the
developer to calculate the layout by himself:
no need to define every time alignments, line-height, etc.

With the advantages of pdf-lib, such as the ability to use Uint8Array and ArrayBuffer for font data, and the ability to embed PDF files,

pdfme allows developers to create complex layouts efficiently.

You can also try Template Design & Code Generator to design your
favorite PDF layout and generate some executable code!

Point of evaluation	Evaluation
Works in Node and browser	○
Typings	○
Custom fonts	○
Easy to use	○

Let's GO pdfme Official Site

if you like it, give me a start⭐ https://github.com/pdfme/pdfme