DEV Community: Tomoyuki Aota

Replacing with
when img.onerror is called

Tomoyuki Aota — Wed, 27 Apr 2022 15:11:10 +0000

(A Japanese translation is available here.)

When img.onerror is called, there are several options instead of leaving the broken image:

Replace img.src to set a different image
Set img.style.display = 'none' to remove the element from DOM

References:

In my case, I wanted to replace <img> with <div>. I googled for a while but couldn't find the way. I did some experiments and found that configuring img.outerHTML does the trick.

In the code above, targetImage.outerHTML = "<div>Invalid Image!</div>"; is set.
Configuring style for the <div> will make it prettier.

As an actual example, I'm developing Photo Data Viewer. This is an app to check Exif data of a photo. When the file other than photos is selected (i.e. files cannot be displayed with <img>), it displays "Unsupported File Format" using <div> instead of a photo.
The code is here.
This app uses Next.js, so the code to set onerror looks different, but setting outerHTML is the same.

I hope it helps!

Creating multiple Vercel deployments with different configurations from a single GitHub repo

Tomoyuki Aota — Tue, 26 Apr 2022 15:47:25 +0000

(A Japanese translation is available here.)

There was a case that I wanted to create multiple Vercel deployments with different configurations from a single GitHub repo.

The motivation is that I want to deploy photo-data-viewer repo as 1) a standalone web app called Photo Data Viewer and 2) a feature in an Electron app called Photo Location Map.

Implementation-wise, webpack's target needs to be different:

Web app needs target === 'web' (default)
Photo Location Map feature needs target === 'electron-renderer'

How to configure

From photo-data-viewer repo, create 2 Vercel projects.
- At first, I had an assumption that only 1 Vercel project can be created per GitHub repo. It took a while to recognize that this is wrong...
Set different environment variables for different Vercel projects.
Reference the environment variables in the code.
- In next.config.js, when environment variable PDV_IN_PLM is set to 'True', config.taget = 'electron-renderer' is set.
- Code

Deployments

The 2 Vercel projects are deployed as follows:

Vercel project	URL
Web app	https://photo-data-viewer.vercel.app
Photo Location Map	https://pdv-in-plm.vercel.app

Note that https://pdv-in-plm.vercel.app/ does not work in the web browser. It is built for Electron renderer process, so it works well when it is opened from Electron renderer process like Photo Location Map.

Reference

https://github.com/vercel/vercel/discussions/4879#discussioncomment-356114

[Markdown] Short notation for an image with a link using reference-style link

Tomoyuki Aota — Thu, 24 Jan 2019 16:26:49 +0000

(A Japanese translation is available here.)

Introduction

In Markdown, when we want to put an image with a link, the notation tends to be lengthy.

For example, the status badge for Travis CI will be like this:

[![Build Status](https://travis-ci.org/travis-ci/travis-web.svg?branch=master)](https://travis-ci.org/travis-ci/travis-web)

(This badge is an example from Embedding Status Images on Travis CI.)

In a table, such lengthy notation will be problematic, like this:

OS	Status
Ubuntu

| OS     | Status |
|:------:|:------:|
| Ubuntu | [![Build Status](https://travis-ci.org/travis-ci/travis-web.svg?branch=master)](https://travis-ci.org/travis-ci/travis-web) |

The table above has just one badge. When we want to put several badges in a row, the notation becomes so complex that it is difficult to recognize the column separator |. For example, README.md of srz-zumix/iutest has a table with many badges whose raw content looks very complicated.

Can we get shorter notation somehow?

Solution

Reference-style link is useful. For the table, it will be like this:

| OS     | Status |
|:------:|:------:|
| Ubuntu | [![travisci-image]][travisci-link] |

travisci-image and travisci-link also needs be defined in the document, like this:

[travisci-image]: https://travis-ci.org/travis-ci/travis-web.svg?branch=master

[travisci-link]: https://travis-ci.org/travis-ci/travis-web

With this short notation for the badge, the notation of the table will be kept managable even when we put several badges in a row.

travisci-image and travisci-link are arbitrary strings, so we can do whatever we want, like giving them comprehensible names, adjusting length of the names so that the column separator | aligns across rows, etc.

Lastly, I created an example GitHub Gist. Click "Raw" button to see that this notation actually works!

Exploring C++ equivalent of C#'s nameof operator

Tomoyuki Aota — Wed, 19 Dec 2018 17:12:53 +0000

(A Japanese translation is available here.)

In C#, there is nameof operator which can be used to get the string name of a variable, type, or member.
One of useful cases is to log a message with the name of the method. In this case, if we use the string literal of the method name, IDE's rename feature will not automatically rename the string literal because it is not recognized as an identifier.
If we use nameof, it will be like this:

void f(int i) {
   Log(nameof(f), "method entry");  
}

If we use nameof like this, f in nameof(f) will be treated as an identifier, so it will be renamed when renaming the method.

In this article, I'm going to explorer features in C++ which are similar to C#'s nameof operator.

`func`

C++ has __func__ which can be used in the body of a function. __func__ is a pre-defined identifier which holds the function name.
An example is like this:

void f()
{
  std::cout << "This function is " << __func__ << std::endl;
}

When f is called, This function is f will be displayed.

__func__ can retrieve the function name within its body, but C#'s nameof is more versatile because it can be used with any method, function, and variable as long as the identifiers are available.

Define a macro

In a function-like macro, when # is placed right before the parameter, the string literal of the argument value is retrieved. For example, this code displays 5+5 = 10.

#define PRINT(int) printf(#int " = %d\n",int)
PRINT(5+5);

Therefore, the following NAMEOF macro will behave similar to C#'s nameof.

#define NAMEOF(name) #name

The usage will be like this:

struct MyStruct
{
    int myMemberVariable = 0;
};

class MyClass
{
public:
    int myMemberFunction() { return 0; }
};

int myGlobalVariable = 0;

void myFunction()
{
}

int main()
{
    std::cout << NAMEOF(MyStruct) << std::endl;
    std::cout << NAMEOF(MyStruct{}.myMemberVariable) << std::endl;
    std::cout << NAMEOF(MyClass{}.myMemberFunction) << std::endl;
    std::cout << NAMEOF(myGlobalVariable) << std::endl;
    std::cout << NAMEOF(myFunction) << std::endl;
}

The code above will display the following:

MyStruct
MyStruct{}.myMemberVariable
MyClass{}.myMemberFunction
myGlobalVariable
myFunction

If I use rename feature to myFunction, the myFunction in NAMEOF(myFunction) is renamed. (I used ReSharper's rename feature.)

However, I said "NAMEOF macro will behave similar to C#'s nameof". NAMEOF macro is not exactly the same as C#'s nameof operator.

If we pass an undefined identifier, myNonexistentWhatever, like this:

    std::cout << NAMEOF(myNonexistentWhatever) << std::endl;

Build succeeds, and myNonexistentWhatever will be displayed. This is because macro expansion is just like editing plain text, which means that myNonexistentWhatever will not be treated as an identifier. When macro expansion is done, the evaluation result is "myNonexistentWhatever" (a string literal), so it will be a valid C++ code.

Therefore, we need to confirm that there is no typo when using NAMEOF macro in the first place.

That being said, using NAMEOF macro is better than simply writing string literal.

There is a library, bravikov/nameof, which enhances the functionality to be more akin to C#'s nameof. For example, when we write nameof(Foo::Bar) for enum Foo {Bar}, it will be evaluated as "Bar" without preceding Foo.

Lastly

I googled this topic but could not find a lot of information. NAMEOF macro in this article is taken from a comment on StackOverflow and this article is created by elaborating it. Therefore, I'd be grad if some convention/tips/whatever are shared regarding this topc.

Reference

Creating a Pipfile for multiple versions of Python

Tomoyuki Aota — Sun, 30 Sep 2018 12:21:39 +0000

(A Japanese translation is available here.)

A Pipfile created by pipenv install command has the version number of Python. This Pipfile cannot be used on the machine with a different version of Python. ¹ In this article, I'm going to introduce how to create a Pipfile which can be used for multiple versions of Python.

What is the problem?

When we want to start using Pipenv in a repository, the first thing we do is to issue pipenv install command. This creates a Pipfile like this:

[[source]]

url = "https://pypi.python.org/simple"
verify_ssl = true
name = "pypi"


[packages]



[dev-packages]



[requires]

python_version = "3.6"

This Pipfile is generated on a Windows PC with Python 3.6.4.

Then, if we copy this Pipfile to another PC with Python 3.7 and issue pipenv install, we will encounter the following error message:

Requested Python version (3.6) not installed
Warning: Python 3.6 was not found on your system…
You can specify specific versions of Python with:
  $ pipenv --python path\to\python

On macOS/Linux with pyenv, the required version of Python can be installed by Pipenv using pyenv, but pyenv is not available on Windows.

Solution

If there is no need of specifying Python version, we can delete the [requires] section. Then, pipenv install command will be successful regardless of the version of Python installed on the machine.


[[source]]

url = "https://pypi.python.org/simple"
verify_ssl = true
name = "pypi"


[packages]



[dev-packages]

What I've done here is described in the official document.
https://pipenv.readthedocs.io/en/latest/basics/#specifying-versions-of-python

The inclusion of [requires] python_version = "3.6" specifies that your application requires this version of Python, and will be used automatically when running pipenv install against this Pipfile in the future (e.g. on other machines). If this is not true, feel free to simply remove this section.

When this method is adopted, Pipfile.lock should not be included in version control. This because the content of Pipfile.lock can be different depending on the versions of Python.
https://pipenv.readthedocs.io/en/latest/basics/#general-recommendations-version-control

Do not keep Pipfile.lock in version control if multiple versions of Python are being targeted.

To be exact, Pipfile cannot be used when the major or minor version is different. For example, Pipfile for Python 3.6 cannot be used on a machine with Python 3.7. On the other hand, Pipfile can be used when only the patch version is different. For example, Pipfile for Python 3.6.4 can be used on a machine with Python 3.6.5. ↩

Creating a Pipfile which has different installation instructions depending on operating systems (PyTorch v0.4.1 as an example)

Tomoyuki Aota — Fri, 10 Aug 2018 10:24:12 +0000

(A Japanese translation is available here.)

In this article, I'm going to describe how to create a Pipfile when we have different installation instructions depending on operating systems.

As an actual example, I'm going to create a Pipfile which can be used on both macOS/Windows for PyTorch v0.4.1.

Introduction

For most Python packages, installation instructions are the same regardless of operating systems. For example, numpy can be installed like this:

pipenv install numpy

However, there are some packages which has different installation instructions depending on operating systems. For example, PyTorch v0.4.1 is installed by the following command on macOS:

pipenv install torch

On Windows, it is installed like this:

pipenv install http://download.pytorch.org/whl/cpu/torch-0.4.1-cp36-cp36m-win_amd64.whl

(In this example, I assume the installation of PyTorch is for Python 3.6 without CUDA.)

In Pipfile, we need to let the former instruction run on macOS and let the latter instruction run on Windows. How can we achieve it?

Solution

Specify sys_platform depending on operating systems. In the official document of Pipenv, the case of installing pywinusb only on Windows is described.

For PyTorch v0.4.1, the Pipfile I actually use is like this:

[[source]]

url = "https://pypi.org/simple"
verify_ssl = true
name = "pypi"


[packages]

theano = "*"
tensorflow = "*"
keras = "*"
numpy = "*"
scipy = "*"
matplotlib = "*"
seaborn = "*"
jupyter = "*"
jupyterlab = "*"
ipython = "*"
pandas = "*"
scikit-learn = "*"
spyder = "*"
pillow = "*"
torch = {version = "==0.4.1", sys_platform = "== 'darwin'"}
"b4b7455" = {file = "http://download.pytorch.org/whl/cpu/torch-0.4.1-cp36-cp36m-win_amd64.whl", sys_platform = "== 'win32'"}
torchvision = "*"


[dev-packages]

pylint = "*"


[requires]

python_version = "3.6"

In [packages], there are two lines for PyTorch v0.4.1.

torch = {version = "==0.4.1", sys_platform = "== 'darwin'"}
"b4b7455" = {file = "http://download.pytorch.org/whl/cpu/torch-0.4.1-cp36-cp36m-win_amd64.whl", sys_platform = "== 'win32'"}

In these lines, sys_platform = "== 'darwin'" specifies that this is only for macOS, and sys_platform = "== 'win32'" specifies that this is only for Windows.

By the way, "b4b7455" is written on Pipfile when pipenv install http://download.pytorch.org/whl/cpu/torch-0.4.1-cp36-cp36m-win_amd64.whl is executed on Windows. I added sys_platform = "== 'win32'" then.

In GitHub, I created a repository, pipenv_cross-platform_example, and put Pipfile and Pipfile.lock there, so this repository may be useful as an example.

When we read Stack Overflow, what does Stack Overflow read from us?

Tomoyuki Aota — Fri, 08 Jun 2018 14:58:15 +0000

(A Japanese translation is available here.)

Before the Internet, a famous joke is created.

In America, you watch television.
In Soviet Russia, television watches you!

After the Internet, we watch the contents of the web services like Facebook. And, the web services watch us.

Companies have to notify the users of collecting information. This is not only due to the regulations but also to gain trust from the users.

Many web services inform us about the kinds of collected information but not the actual data. However, to gain our trust, Stack Overflow allows the users to download Personalized Prediction Data collected from the users' on-site activities. In this article, I'm going to download and explore my Personalized Prediction Data to see what it looks like.

Downloading and analyzing Personal Prediction Data

To download your Personalized Prediction Data, you need to log in to Stack Exchange and click the blue "Start download" button. (If you are not logged in, values in personalized sections will be null.)

The downloaded file is a JSON file which looks like the following:

There is no document which explains what each value mean, so I looked at the data with some guesses.
The interesting data is the { tag: value } style data in root/Data/TagViews. This is a key-value pair where the key is the tag in Stack Overflow. For example, it looks like this.

TagViews : {
  c++: 440,
  javascript: 183,
  ...
}

The top 20 tags will be like this.

The tags and their values in this chart fit pretty well with my feelings of where I'm working on. It seems like Stack Overflow has a good guess of my current skills.

For details of the analysis, please read the Jupyter notebook in my GitHub repository. Clicking the badge below will take you to the notebook run by Binder.

Closing

It was interesting to see what Stack Overflow collected from my on-site activities. I hope other companies will do the same.

Visualizing the patterns of missing value occurrence with Python

Tomoyuki Aota — Thu, 24 May 2018 15:18:44 +0000

(A Japanese translation is available here.)

During data analysis, we need to deal with missing values. Handling missing data is so profound that it will be an entire topic of a book. However, before doing anything to missing values, we need to know the pattern of occurrence of missing values. This article describes easy visualization techniques for missing value occurrence with Python. The techniques are useful in early stages of exploratory data analysis.

I've uploaded a Jupyter notebook in my GitHub repo. You can run it using Binder by clicking the badge below.

Prerequisite

I'm using the Titanic train dataset from Kaggle as an example. To begin with, following code is assumed to be executed.

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns

df = pd.read_csv('train.csv')

# Confirm the number of missing values in each column.
df.info()

<class 'pandas.core.frame.DataFrame'>
RangeIndex: 891 entries, 0 to 890
Data columns (total 12 columns):
PassengerId    891 non-null int64
Survived       891 non-null int64
Pclass         891 non-null int64
Name           891 non-null object
Sex            891 non-null object
Age            714 non-null float64
SibSp          891 non-null int64
Parch          891 non-null int64
Ticket         891 non-null object
Fare           891 non-null float64
Cabin          204 non-null object
Embarked       889 non-null object
dtypes: float64(2), int64(5), object(5)
memory usage: 83.6+ KB

Method 1: seaborn.heatmap

The first method is by seaborn.heatmap. The next single-line code will visualize the location of missing values.

sns.heatmap(df.isnull(), cbar=False)

Against Index, I can see that

Age column has missing values with variation in occurrence,
Cabin column are almost filled with missing values with variation in occurrence, and
Embarked column has few missing values in the beginning part.

This is not the case for this Titanic dataset, but especially in time series data, we need know if the occurrence of missing values are sparsely located or located as a big chunk. This heatmap visualization immediately tells us such tendency. Also, if more than 2 columns have correlation in missing value locations, such correlation will be visualized. (Again, not the case for this dataset, but it is important to know the fact that there is no such correlation in this dataset.)

This single-line code tells us a lot of information of missing value occurrence.

Method 2: missingno module

If you want to proceed further, missingno module will be useful.
To begin with, install and import it.

pip install missingno

import missingno as msno

If you want the similar result to seaborn.heatmap described earlier, use missingno.matrix.

msno.matrix(df)

In addition to the heatmap, there is a bar on the right side of this diagram. This is a line plot for each row's data completeness. In this dataset, all rows have 10 - 12 valid values and hence 0 - 2 missing values.

Also, missingno.heatmap visualizes the correlation matrix about the locations of missing values in columns.

msno.heatmap(df)

missingno module has more features, such as the bar chart of the number of missing values in each column and the dendrogram generated from the correlation of missing value locations. For more information, README is a good primer.

Closing

Two easy visualization methods are described in this article. seaborn.heatmap is the first choice as it requires seaborn only, but it you need more, missingno module will help you.

Creating a short PowerShell command equivalent to "rm -rf" in Bash

Tomoyuki Aota — Thu, 29 Mar 2018 07:39:55 +0000

(A Japanese translation is available here.)

In Bash, rm -rf deletes a file or a directory. In PowerShell, I would like to do the same thing in a short command as well. Therefore, I created a PowerShell function to do the job.

Introduction

Let's say that I want to delete target. In PowerShell, the following command does the job.

Remove-Item -Recurse -Force target

This is a long command even with tab completion. The following command is shortened version using officially provided aliases.

rm -r -fo target

This is still long when compared to rm -rf in Bash.
Therefore, I decided to create a PowerShell function, rmrf, for this job.

How to create the command

PowerShell profile needs to be created.
echo $profile displays the file path of the profile. If the file does not exist, create it first.

In PowerShell profile, add the following function.

After editing the profile, restart PowerShell to reload the profile.

Result

Issuing the following command will delete target. It's short!

rmrf target

How to start using C++ Core Guidelines Checker and GSL

Tomoyuki Aota — Sun, 04 Mar 2018 16:58:10 +0000

(A Japanese translation is available here.)

Note

In this article, I described how to start using C++ Core Guidelines Checker. However, C++ Core Guidelines Checker has some immature points, and clang-tidy seems a better tool. Therefore, please consider using clang-tidy. (@tenmyo pointed out that clang-tidy has checks based on C++ Core Guidelines.)

I'm leaving the information about C++ Core Guidelines Checker just for reference.

Introduction

What is C++ Core Guidelines Checker?

C++ Core Guidelines is created mainly by
Bjarne Stroustrup and Herb Sutter for writing better C++ code. Most of the items in the guidelines are designed to be supported by an analysis tool.

C++ Core Guidelines Checker is a static analysis tool based on C++ Core Guidelines. Microsoft is developing this tool, and Visual Studio 2017 supports it by default. This tool emits warnings for violating code in Error List window when VS builds the code. Visual Studio C++ Core Guidelines Checker Reference | Microsoft Docs describes what warnings to be emitted for what kind of violation.

As of May 2018, C++ Core Guidelines Checker works only on Visual Studio on Windows. Therefore, the content of this article applies only to such environment.

What is GSL?

GSL (Guidelines Support Library) is a library which contains types and functions that are suggested by C++ Core Guidelines. The following article covers what types and functions are available.

C++ Core Guideline: The Guideline Support Library - ModernesCpp.com

There are several implementations of GSL. In this article, I will use Microsoft/GSL.

GSL supports multiple platforms/compilers. I hope C++ Core Guidelines Checker will have multi-platform support as well.

How to begin using them?

Enable C++ Core Guidelines Checker

C++ Core Guidelines Checker has to be enabled in each VS project. The following pages cover the procedure to enable it. Also, several useful things (like disabling specific warnings) are described.

Install GSL code

Copy and paste gsl in your codebase. A package manager like Conan is preferable, but I could not find a well-maintenanced one. Hmm...

A wrapper of GSL

Currently, C++ Core Guidelines Checker emits warnings to third-party libraries, and there are no settings to avoid it. (Microsoft recognizes this problem and working on it.)　To be specific, it emits warnings to GSL code when we use GSL. This behavior results in the flood of warnings to the code which are not mine. In order to avoid this, we need a wrapper of GSL, and we use GSL through the wrapper.

The code of the wrapper of GSL is shown below. Here, some ifdefs of _MSC_VER are because 1. CppCoreCheck/warnings.h are created during VS 2017 installation, and 2. #pragma directive for suppressing warnings are specific to MSVC.

#ifdef _MSC_VER
#if _MSC_VER >= 1910
#include <CppCoreCheck/warnings.h>
#pragma warning(disable: ALL_CPPCORECHECK_WARNINGS)
#endif // _MSC_VER >= 1910
#endif // _MSC_VER


#include <gsl/gsl>


#ifdef _MSC_VER
#if _MSC_VER >= 1910
#pragma warning(default: ALL_CPPCORECHECK_WARNINGS)
#endif // _MSC_VER >= 1910
#endif // _MSC_VER

Code example

I created a code example.
https://github.com/TomoyukiAota/CoreCheckerAndGsl
You should get something like this after the steps described above.

Afterword

In this article, I described how to introduce C++ Core Guidelines Checker and GSL. I recognize that there is some awkwardness. C++ Core Guidelines Checker works only on VS on Windows. GSL is installed by copy and paste and a wrapper for suppressing warnings are required. However, I believe the warnings from C++ Core Guidelines Checker allows me to write better C++ code and GSL provides better types/functions, so I hope such awkwardness is cleared someday.

DEV Community: Tomoyuki Aota

Replacing with when img.onerror is called

(A Japanese translation is available here.)

Creating multiple Vercel deployments with different configurations from a single GitHub repo

(A Japanese translation is available here.)

How to configure

Deployments

Reference

[Markdown] Short notation for an image with a link using reference-style link

(A Japanese translation is available here.)

Introduction

Solution

Exploring C++ equivalent of C#'s nameof operator

(A Japanese translation is available here.)

__func__

Define a macro

Lastly

Reference

Creating a Pipfile for multiple versions of Python

(A Japanese translation is available here.)

What is the problem?

Solution

Creating a Pipfile which has different installation instructions depending on operating systems (PyTorch v0.4.1 as an example)

(A Japanese translation is available here.)

Introduction

Solution

When we read Stack Overflow, what does Stack Overflow read from us?

(A Japanese translation is available here.)

Downloading and analyzing Personal Prediction Data

Closing

Visualizing the patterns of missing value occurrence with Python

(A Japanese translation is available here.)

Prerequisite

Method 1: seaborn.heatmap

Method 2: missingno module

Closing

Creating a short PowerShell command equivalent to "rm -rf" in Bash

(A Japanese translation is available here.)

Introduction

How to create the command

Result

How to start using C++ Core Guidelines Checker and GSL

(A Japanese translation is available here.)

Note

Introduction

What is C++ Core Guidelines Checker?

What is GSL?

How to begin using them?

Enable C++ Core Guidelines Checker

Install GSL code

A wrapper of GSL

Code example

Afterword

Replacing with
when img.onerror is called

`func`