DEV Community: sasurau4

How to install New Relic infrastructure agent to AWS Elastic Beanstalk with Amazon Linux 2

sasurau4 — Fri, 03 Dec 2021 08:10:05 +0000

Problem

I want to install New Relic infrastructure agent to Elastic Beanstalk with Amazon Linux2.

The guide is following.

https://docs.newrelic.com/jp/docs/infrastructure/install-infrastructure-agent/config-management-tools/configure-infrastructure-agent-aws-elastic-beanstalk/

But this guide is not correct about Amazon Linux2.

Why is the document wrong?

The aws official document says,

On Amazon Linux 2 platforms, instead of providing files and commands in .ebextensions configuration files, we highly recommend that you use Buildfile. Procfile, and platform hooks whenever possible to configure and run custom code on your environment instances during instance provisioning. For details about these mechanisms, see Extending Elastic Beanstalk Linux platforms.

In Amazon Linux2, it seems that customizing with .ebextensions doesn't work anymore.

We should use https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/platforms-linux-extend.html instead of .ebextensions

How to install

The solution is following.

eb setenv NEW_RELIC_LICENSE_KEY=<YOUR_NR_LICENSE_KEY>
Put the following content at .platform/hooks/prebuild/00_install_nr_agent.sh

#!/bin/bash
set -e

# NEW_RELIC_LICENSE_KEY has set as one of Elastic Beanstalk Environment properties
NR_LICENSE_KEY=`/opt/elasticbeanstalk/bin/get-config environment -k NEW_RELIC_LICENSE_KEY`
DISPLAY_NAME=<YOUR_APPLICATION_NAME>

sudo cat > /etc/newrelic-infra.yml <<EOL
license_key: ${NR_LICENSE_KEY}
display_name: ${DISPLAY_NAME}
EOL

sudo curl -o /etc/yum.repos.d/newrelic-infra.repo https://download.newrelic.com/infrastructure_agent/linux/yum/el/7/x86_64/newrelic-infra.repo
sudo yum -q makecache -y --disablerepo='*' --enablerepo='newrelic-infra'
sudo yum install newrelic-infra -y

# Restart the process because the update of config isn't reload automatically
sudo systemctl restart newrelic-infra

chmod 755 ./.platform/hooks/prebuild/00_install_nr_agent.sh
eb deploy

Conclusion

I found Elastic Beanstalk is based on EC2.

I hope the article helps someone to install newrelic agent with EB.

Thanks!

References

Wrote a cli tool in Rust

sasurau4 — Sat, 23 May 2020 14:26:17 +0000

Intro

I wrote a simple cli tool named github-cli-utils in Rust. This tool suppports daily OSS activity in GitHub.

I'll introduce why and how write it!

Usage

Install from crate.io

cargo install github-cli-utils

After you installed github-cli-utils, you run it and show following.

λ github-cli-utils help
github-cli-utils 0.1
Daiki Ihara <sasurau4@gmail.com>
Support developing OSS via cli

USAGE:
    github-cli-utils [FLAGS] <SUBCOMMAND>

FLAGS:
    -d, --debug      Turn debugging information on
    -h, --help       Prints help information
    -V, --version    Prints version information

SUBCOMMANDS:
    add-upstream    add upstream to your git repository
    help            Prints this message or the help of the given subcommand(s)

This tool provide add-upstream command. It add upstream repository to your forked repository!

Motivation

My motivation of writing github-cli-utils is 2 following points.

Add upstream is a bit troublesome
Curiosity to Rust
Needs to platform and shell agonistic command

Add upstream is a bit troublesome

When you find a bug or typo at readme about the OSS, you forked the repository, clone it and add upstream.

Adding upstream is a bit troublesome because it needs to copy parent repository's url in browser.

Going back and forth between terminal and browser is annoying, isn' it?

Curiosity to Rust

I've been curious to Rust for about 2 years...

Time has passed and congrats five years from Rust's birth.

I began to write the simple cli tool to solve my daily little trouble.

Needs to platform and shell agonistic command

I use macOS in my work and also use Ubuntu in my private coding. The enviroment is a bit different.

If I just want to achieve my usecase, I would done it by writing shell script like following.

git-remote-add-upstream() {
  if ! type jq > /dev/null 2>&1; then
    echo "'jq' is not installed." >&2
    exit 1
  fi
  if [ $# -ne 1 ]; then
    echo "Need repo name. e.g : 'user/repo'"
    exit 1
  fi
  local upstream=$(curl -L "https://api.github.com/repos/$1" | jq -r '.parent.full_name')
  if [ "$upstream" = "null" ]; then
    echo "upstream not found." >&2
    exit 1
  fi
  git remote add upstream "git@github.com:${upstream}.git"
}
alias grau='git-remote-add-upstream'

This script is quoted from https://tech-blog.sgr-ksmt.org/2016/03/04/git_remote_add_upstream/

It's very fine, but need to be jq command installed. To be worse, I'm using fish shell.
So I wrote a command that add upstream automatically without thinking about platform and shell.

Hard point of implementation

The codes is https://github.com/sasurau4/github-cli-utils.

Argument parsing

I used clap to parse argument. clap is useful library for that purpose.

I implemented add-upstream by subcommand. I wanted to use debug argument after command like github-cli-utils add-upstream --debug.
In default, clap only allows flags place before subcommand like github-cli-utils [FLAGS] <SUBCOMMAND>. I had to use global(true) in argument setting to allow flags placed after subcommand.

Https access

At first, I use hyper as http client. It's very useful but a bit complicated when accessing some resource via https.¹

I use reqwest instead of hyper. It's very easy to use.

Conclusion

Rust is a good language to implement cli tool thanks to language itself and the ecosystem.
I hope this article help you implement cli tools.

Also, I'm welcome PRs and issues to github-cli-utils!

https://github.com/hyperium/hyper/issues/1025 ↩

Meetup report about React Native users in Japanese Startups the 3rd.

sasurau4 — Tue, 02 Apr 2019 14:13:07 +0000

Intro

I participated on the event of React Native users in Japanese startups at March 28, 2019.
This me7 people talked about React Native such as its advantage and disadvantage or hard point to use etc.
etup was the 3rd and held in Tokyo.
https://r-n.connpass.com/event/121961/

7 people talked about various things about React Native such as its advantage and disadvantage or hard point to use etc in 5 or 10 minutes.

Although all lightning talks and its slides are Japanese, it's very excited.
So, I posted the report about the meetup in English because I want to help empowering the react native community.
There are many React Native users in Japan!

Note

Following summaries are originally Japanese so my translation may be wrong.
If there were mistakes, they were not presenter's mistake and they were probably my mistakes.

Summary of LTs

Launch the React Native app based on the react web app.

presenter: @t0m0120
slide: https://speakerdeck.com/t0m0120/reactzhi-websabisuworeactnativedeapurihua-sitahua

The presenter talked about how speedy it is they launched the new react native app based on react web app.
socialdog is a service that make us smart and efficient Twitter Account Management.
They launched a new iOS app based on react web app in only 4 month.
Why so short developing? The answer is they use same logic in both web and native.
The best example is redux code. The presenter said our code was almost the same code in react and react native!

Do you think it is an success of Learn Once, Write Anywhere that is the one of React's core concept?
I think absolutely yes.

I want to talk about many many pitfalls of react-native-firebase

presenter: @tkow39
slide: https://www.slideshare.net/TakeoKusama/react-nativefirebase-startupmtup-138554329

The presenter talked about how useful react-native-firebase library is. But there are many fitfalls because of its various functionality.
The presenter talked the cases he was stuck in theTo make matters worse, the tool named react-native-git-upgrade that provided React Native haven't
alreeady maintained and didn't work fine. pitfalls like authentication, DeepLink, Firestore etc.

I think some pitfalls are caused by firebase itself rather than react-native -firebase.
Of course firebase and react-native-firebase are both great and useful! I hope somebody who stucks in pitfalls shares the knowledge or workaround and even contribute to official documents!

Testability in React Native

presenter: @L_e_k_o
slide: https://talks.leko.jp/react-native-testability/

The presenter talked about how to write tests for React Native Application.
React Native Application generally consists of many parts like redux, usecase, universal JS and native layer.
He introduced some useful techniques and libraries for writing test. For example interface injection, using reselect, [supertest(https://github.com/visionmedia/supertest) and storyshots.
Keep connect logic as simple as possible benefit for no need writing E2E tests.
And he wanted to know about how to write tests for some native modules like Bluetooth and Push Notification. They are not available in Simulators. Do you know how to test them?

There is no royal road to upgrading React Native.

presenter: @natural_clar
slide: http://slides.naturalclar.com/

The presenter talked about why and how upgrading React Native.
The reason why is very simple. Upgrading makes us to use new features like React Hooks!
But upgrading occasionally breaks our app for example TextInput broken for Chinese and Japanese and the build failed because of XCode 10 new build system.
Upgrading React Native needs many steps like upgrading npm dependencies, changing build config (build.gradle or .pbxproj file) and so on.
To make matters worse, the tool named react-native-git-upgrade that provided by React Native has not maintained and didn't work fine.
But new tool named rn-diff-purge solves this situation. We can get the diffs of each versions that react-native inited by using the tool.
So comparing the diffs with our project and applying them make us ease to upgrade React Native.

Usefulness of Development with React Native and GraphQL

presenter: @mediaboxes
slide: https://speakerdeck.com/mediaboxes/react-native-x-graphql-dekai-fa-sitarabian-li-datutaohua

The presenter talked about the advantages and disadvantages of React Native x GraphQL.
He explained about GraphQL and talked he used Apollo Client. He benefits from cache system of apollo that available auto cache update without Redux. And he explained disadvantages was also cache controll and error handling.

I thought the combination of React Native and GraphQL was very good when I used React Native and GraphQL before. Apollo client has many functions so using them is a bit complicated but it's very useful!

Struggle with introduction of E2E test library Detox

presenter: @ariiyu
slide: https://speakerdeck.com/ariiyu/struggle-with-introduction-of-e2e-test-library-detox

The presenter talked about Detox and its trouble shoots.
Detox is a good library for E2E test of React Native app.
He met the trouble that E2E test not ending. He dived into how Detox works and debugged step by step steadily. Finally, he found the cause. Detox waited for animations end by default and there were background infinite animation loop in the app. So he solved the problem by replacing the file only when E2E test.
He finished the LT saying he wanted Detox buddies to share the knowledge.

How a web engineer fights in React Native

presenter: @NaoshiHoshi
slide: https://www.slideshare.net/NaoshiHoshi/how-web-engineer-fight-in-the-reactnative-138559060

The presenter talked about how a web engineer fights in React Native.
His company met difficult situation that there were iOS app without native application engineer. The main developer has already left his company and the remaining engineers don't have developing experience of native application. They couldn't continue to develop existed iOS app.
So, they changed the way by choosing React Native instead. He decided to implement functionalities only in React Native + Expo. Not Ejected.

I think his idea is right because React Native has some constrains because of cross platform. Avoiding these constraints is a key of developing with React Native.

Others

The meetup organizer tries very interesting challenges in each time. At this time, there were seat that the applied person must take the champagne to the meeting place. We drunk champagne at the start of meet up!
And, the organizer announced he was planning a big meetup with around 100 participants.
I'm looking forward it!

Conclusion

There are many React Native users and its community in Japan.
React Native is a good framework and exciting tools. Thanks for maintainers and the community!

Thanks for reading!

Metro Bundler in Web

sasurau4 — Wed, 27 Feb 2019 13:08:56 +0000

Intro

Do you know Metro Bundler?
If you using React Native, you are familiar with it.
Metro Bundler is the JavaScript bundler for React Native.
I found one tweet about surprising thing about Metro Bundler few month ago.

// Detect dark theme var iframe = document.getElementById('tweet-1088628642970783744-724'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1088628642970783744&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1088711186424758272-68'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1088711186424758272&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1088825340829421569-100'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1088825340829421569&theme=dark" }

Hahaha, I couldn't believe it!
Because The document says "The JavaScript Bundler for React Native" at the top.
But Ms. Nakazawa and Mr.Conner are inside Facebook team members and more Mr.Conner is the tech lead for web foundation of Instagram.
So, I checked whether Instagram use metro bundler for web or not.

Checking

Metro Bundler has document about using as CLI, so I bundles some JavaScript files and compare it with web's bundled file.
I found common points like __BUNDLE_START_TIME__=this.nativePerformanceNow?nativePerformanceNow():Date.now().
And enter window._sharedData in Chrome's Developer tools console, you'll find bundle_variant: "metro" that seems the bundle config.

I confirmed Instagram use Metro Bundler for Web. I'm very curious how to do it.
Let's try it!

Using Metro Bundler in Web!

The repo: https://github.com/sasurau4/sample-metro-bundler-in-web

I explain how to use Metro Bundler in Web.

Metro Bundler provides its functions as CLI, server itself and express middleware according to the document.

So, I choose express middleware and the server is following.

const Metro = require('metro');
const express = require('express');
const app = express();

Metro.loadConfig().then(async config => {
  const metroBundlerServer = await Metro.runMetro(config);
  app.use(metroBundlerServer.processRequest.bind(metroBundlerServer));

  app.use('/', express.static('public'));

  const { server: serverConfig } = config;
  const { port } = serverConfig;
  app.listen(port);
});

This server serve static files inside public dir and bundle file bundled by Metro.

The static file is following.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Metro Bundler in Web!</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="index.bundle?platform=web&dev=true&minify=false"></script>
  </body>
</html>

We can get bundle file from the path of index.bundle with various parameters.

If you want to only bundling files, it's all done.

In the real world, we often need to transpile JS files with babel or like that.

It's very easy to use Babel with Metro.

If you want to use React, put the babel.config.js like following.

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
  plugins: ['@babel/plugin-proposal-export-default-from'],
};

Run the server and access to localhost, the application run in the browser!
It's all done.🎉

I explain how to use Metro Bundler same like webpack-dev-server.
If you want to deploy artifacts to hosting services, you can do it from cli!

Conclusion

Although Metro Bundler is mainly focus to the React Native, we can also use it for web.
I also learned functions provided by the webpack and webpack-dev-server.
It is rare to use Metro Bundler for web in production today.
I imagine If someday that Metro Bundler is regulary used for web comes true, we could write Universal Application with React Native and React Native Web.
It's exciting future!

Thanks for the Metro team about documentation and maintenance.
Thanks for reading!

Tips for react-native upgrade to v0.58.4

sasurau4 — Fri, 08 Feb 2019 03:19:01 +0000

What is the article

I tried upgrade react-native v0.57.7. to v0.58.4.

This article is the saga of upgrading.

Steps

At first, upgrade react-native to v0.58.4, , react to 16.6.1 and metro-react-native-babel-preset to 0.51.1 by yarn or npm.

You might meet errors when yarn react-native ios or android.

Additional steps here.

For iOS

Mentioned from changelog, you need to link JavaScriptCore.framework as librariy by manual.

It's all done when my use case.

For Android

Upgrading for android is a bit complicated, follow the changelog

I met error of More than one file was found with OS independent path 'lib/x86_64/libjsc.so' same as this issue comment

So, I fixed errors by modifying build.gradle files.

The final result of files are following.

android/build.gradle

...
ext {
    ...
    buildToolsVersion = "28.0.2"
    compileSdkVersion = 28
    ...
}

android/app/build.gradle

android {
    ...
    packagingOptions {
        pickFirst 'lib/x86_64/libjsc.so'
        pickFirst 'lib/arm64-v8a/libjsc.so'
    }
    ...
}

Conclusion

I hope these tips are helpful for you.
Have a habby react-native developing!

The way to downgrade expo client on Android

sasurau4 — Wed, 30 Jan 2019 10:55:41 +0000

Intro

React Native is one of the most actively developed project in the world.
According to The State of the Octoverse, React Native has the second largest number of contributors in 2018.

This means React Native is often released.
The latest version at the beginning of 2018 is 0.52.0. And the latest version (at the beginning of 2019) is 0.57.8. How fast developing React Native was!

So, Expo that is a set of tools, libraries and services for React Native app is developing as fast as React Native is.

One day I met the error like No compatible manifest found. SDK Versions supported: 32.0.0, 31.0.0, 30.0.0, 29.0.0, 28.0.0, 27.0.0, 26.0.0 Provided manifestString: 25.0 in expo client.

This error means the expo sdk version in your app has not been already supported by expo client.
I strongly recommend to upgrade your expo sdk version when you meet the error!

I'll explain the workaround to continue developing your app in Android.
But I strongly recommended upgrade expo sdk as soon as possible.

Steps

Step1.

Check the client version compatible with your expo sdk version from https://expo.io/--/api/v2/versions

In my case, my app use expo sdk of v25.0.0, so the compatible expo client version is v2.3.0.

Step2.

Access https://expo.io/tools#client and click link of Download APK <Version>. You can download apk file from CDN.

Step3.

Modify CDN link to compatible version that you checked at Step.1

Example: https://d1ahtucjixef4r.cloudfront.net/Exponent-2.3.0.apk

Step4.

Download apk, transfer it to the Android device and install app directly from apk! That's all!

Conclusion

Though I explained the workaround that you continue developing the app using deprecated expo sdk, it is important to upgrade sdk as soon as possible.
Upgrade may need a lot of time and effort but you can benefit from new libraries and performance improvements as much.

I hope this article help you meet the same error.
Thanks for reading!

How to migrate store persisted by redux-persist?

sasurau4 — Tue, 22 Jan 2019 12:14:57 +0000

Intro

Recently, I got caught in a pitfall about redux-persist when developing react-native application.
It 's because two reasons. The one is the redux store in app has complicated shape. Another is redux-persist's migration sample document is very simple and I can't find any other douments about migration.

If you read the doc and figure it out, you don't perhaps need to read following.
But you have questions about how to migrate store or how migration works, this article would be helpful.

Prerequisite

This article based on following version.

yarn: v1.13.0
redux-persist: v5.10.0

First Step

All codes in this article is here.
This repo made by create-react-app and already setup.

Please clone the repo and checkout v1.0.0.



git clone https://github.com/sasurau4/sample-redux-persist-migration.git
cd sample-redux-persist-migration
git checkout v1.0.0

Starting development server following commands.



yarn install
yarn start

Then automatically open new tab on your browser! First step is done🎉

Inspect what happen in app

You would see very simple app consists of counter and favorite fruit picker.
Play with the app by increment or decrement or choose your favorite fruit!
Reload the page after playing. What happens to the app?

The state of the app will be the same as before the reload!
It's thanks to the redux-persist.

What happen in the app? Go to inspect it.

I usually use Google Chrome. I use it for explanation too.

Open your developer tools and see like following.

You can find persist:root key in local session and _persist key inside the value.
It shows redux-persist serialize our reducers by JSON.stringify.
You can see code
_persist is meta data added by redux-persist.

If no version specified the config, the library recognize the reducer as minus 1 version.

You can see the persisted data in local storage sync to the state of the app when change something!

So, go to the main question, migrate.

Store Migration

Keep te webpack-dev-server running and enter following command.



git checkout v2.0.0

What happened to the app?

The favorite animal item appear in the app and some log in the console!
It's the success of redux-persist migration.

The migration setting is following extracted here.



...
const migrations = {
  0: state => {
    return {
      ...state,
      favorite: {
        ...state.favorite,
        animal: 'Tiger',
      },
    };
  },
};

const persistConfig = {
  key: 'root',
  version: 0,
  storage,
  debug: true,
  migrate: createMigrate(migrations, { debug: true }),
};
...

Migrated state has favorite animal as Tiger, so you see favorite animal as Tiger in the app!
Check the version in _persist, you'll find version 0.

Next, checkout to master. What happened?

You see I don't like fruit! message on the app!
The migration of v0 to v1 succeeded.

The code is here



...
const migrations = {
  0: state => {
    return {
      ...state,
      favorite: {
        ...state.favorite,
        animal: 'Tiger',
      },
    };
  },
  1: state => {
    return {
      ...state,
      favorite: {
        animal: state.favorite.animal,
      },
    };
  },
};
...

You find the difference of missing state.favorite between key of 0 and 1.
Migrated store of version 1 already doesn't have fruit key in Favorite reducer.
So, you see "I don't like fruit!" message.

If you want to more playing with the app, you checkout any version what you want.
If you want to know more details about redux-persist, I recommend checking the repo
It's very helpful and well documented.

Conclusion

redux-persist is very useful library when you think about persist store.
It provides simple and powerful APIs!

If you find any mistakes or misunderstanding, please pointed it out to me. 🙏

Thanks for reading!

Note: After posted this article, I found the article told same theme from redux-persist's README!
It's be helpful too! Please read it if you need.

VimConf 2018 Report

sasurau4 — Thu, 29 Nov 2018 11:12:05 +0000

What is VimConf?

VimConf is the international conference of Vim held in Japan.
This conference is organized by VimConf Jumbikai that mainly consists of vim-jp members.
I think VimConf is the only one conference about text editors all over the world.

VimConf 2018 held Nov 24th in Japan.

The conference is 6th of VimConf and this time is very special and memorable to organizers.
Because the Author of Vim, Mr. Bram Moolenaar, come to Japan and attend the conference!

The organizers had a dream that they invite him to the conference someday when they held the first VimConf in 2013.
Someone said "just a kidding!" when organizers tell them about that.
But, the dream has come true for six years.

I'd like to quote the sentence from VimConf 2018 website. That is the best explanation of the conference.

VimConf is a place to share your love of Vim to everyone

I explains a summery of each keynotes, sessions and lighitning talks. Then write my impressions.
If you want to know more about contents, see the movies on youtube or session's slides.

Keynotes

What is the next feature?

presenter: Yasuhiro Matsumoto aka mattn
slide: Keynote - What is the next feature?
video:

This keynote tell us 2 things. One is why vim-jp started and what they doing. The other is 3 proposals of new feature from mattn!

vim-jp is very famous to Vim users in Japan. I usually refer to the site when I want to know something difficult about Vim. vim-jp seems very active development and discussion for Vim.
I was impressed that mattn said "vim-jp did only two things from started. Feedback to vim dev group about bug and patch, and writing patch."
Today, vim-jp is one of ideal managed OSS community. But what they did is very simple.

Also I was surprised that Vim became a Web Server in the presentation.
Vim evolved to a Web Application Platform.
If you wonder what was going on the presentation, watch the video!

Vim: From hjkl to a platform for plugins

presenter: Bram Moolenaar
slide: Vim: From hjkl to a platform for plugins
video:

Mr.Bram is the author of Vim. He talked about 3 things, Vim's history, plugin performance tuning and (plugin support poll)[https://github.com/vim/vim/issues/3573]
He explained how Vim evolved from the start to the recent. I was suprised to how big PDP-11 was. I thought that is refrigerator rather than a computer.
Also, I was excited about new feature ideas like official dependency manager, Compile Vim script etc.
I was happy to hear the keynote directly from Mr.Bram!

Sessions

Migrating plugins to standard features

presenter: daisuzu
slide: Migrating plugins to standard features
video:

How many plugins do you install to vim? If you count them and you think it may be a bit too much, this session is very helpful.
The session told me that vim have how various functions in default. Vim seems poor at first glance, but they are just hiding. The more you use vim, the more you find them!
I decided check my installed plugins and organize them well someday.

Modes

presenter: Tatsuhiro Ujihisa
slide: Modes
video:

This session described the vim implementation by demo with GNU Project Debugger. I didn't understand the session content perfectly, but felt the convenience of :Termdebug.
I was surprised to the demo because I didn't think Vim support step by step execution!

A day in the life of (ordinary) Vimmer

presenter: OKURA Masafumi
slide: A day in the life of (ordinary) Vimmer
video:

This session explained tips from an one ordinary day of presenter. Demos were not succeeded, tips were very practical to use from tomorrow!

Modern editor-independent development environment for PHP

presenter: USAMI Kenta
slides: Modern editor-independent development environment for PHP
video:

This session described about today's development environment focusing on PHP. I didn't know that PHP has a lot of funcsions lke abstract class, trait interface, etc until this session.
I recognized VimConf is a conference of Text editor. If vim was the only text editor in the world, did vim evolved so far? I don't think so. Text editors have evolved as they mutually influence each other.
So, we are friends that wish to become text editors more useful and convenient.

Effective Modern Vim scripting

presenter: Alisue
slide: Effective Modern Vim scripting
video:

If you are interested in creating vim plugin, I strongly recommend to watch the video and see the slide.
The presenter explained how to write modern vim script step by step. This was very easy to understand.
I want to fall into dark side motivated by the presentation.
See you again at the dark side!

Oni - The GUI-fication of Neovim

presenter: Akin
slide: ?
video:

Have you ever thought vim become an IDE? I have.
If you want to make vim as IDE, you need to spend a lot of time and customize .vimrc.
Manage .vimrc is very very excited but it's time consuming.
So, Oni solve the problem. You can use IDE like Vim just install Oni!
It's very easy and fantastic. Why don't you try Oni?

Vim ported to WebAssembly

presenter: rhysd
slide: Vim ported to WebAssembly
video:

We use Vim everywhere for example Mac, Linux and Windows etc..
Today, new wave is coming and we also use Vim on Web Browser!
Try https://rhysd.github.io/vim.wasm/
This presentation how the presenter ported Vim to WebAssembly. It seems magic of WebAssembly.
I'm looking forward to the future work of wasm.vim!

LTs

Lighitning Talks were also very excited.
Talks are very short but contains various things!
See the slides for more details.

videos:

After party

After party was awesome. Participants talked about a lot of things like Emacs, programing languages, their work, Of course Vim in Japanese and English. Foods and drinks were delicious.
I satisfied with the after party.

Conclusion

VimConf 2018 was great and awesome. We didn't know where and when the next VimConf 't will be held.
I can't wait for the next VimConf!

Thanks for Mr.Bram, organizers, staffs and all related people!
Thank you for your reading. If you find any mistakes about this article, feel free to point it out.

Finally, I'd like to say every one.

"Happy Vimming!"

P.S. Updated at Dec 7 adding videos. You can check all videos about VimConf 2018 at vim-jp youtube channel!

metro v0.48.1 needs react-native v0.53.3 when run test with jest

sasurau4 — Sun, 28 Oct 2018 06:55:39 +0000

TL;DR

If you met a problem that test fail unexpectedly after upgrading metro-react-native-babel-preset v 0.48.1, you try to upgrade react-native v0.57.3.

Jest failed situation

One day, I upgraded many libraries. After upgrade, I ran yarn test and saw jest failed with below error message.

 TypeError: Cannot read property 'default' of undefined
      at new Icon (node_modules/react-native-vector-icons/lib/create-icon-set.js:42:389)
      ...

On my environment.

OS: Ubuntu 18.04
node: v11.0.0
react-native: v0.57.2
react-native-elements: v0.19.1
metro-react-native-babel-preset: v0.48.1
react-native-vector-icons: v6.0.2
@babel/runtime: v7.1.2

my package.json

...
"jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    }
...

For more details, see my reproduce repository
Umm, why jest test failed?

The reason why jest failed

It is because that metro changed the default config of using @babel/runtime or not when jest.
This config affects babel use plugin-tranform-runtime or not.

metro-react-native-babel-preset at v0.48.1 use plugin-transform-runtime by default.
https://github.com/facebook/metro/pull/285/files#diff-691dcb134bb2a1276f7a1fea8728f634L150

But preprocessor.js at v0.57.2 has only disableBabelRuntime option.
https://github.com/facebook/react-native/blob/v0.57.2/jest/preprocessor.js#L55

So, our javascript code are transpiled by babel with plugin-transform-runtime.

Upgrade react-native to v0.57.3 solve the problem.

Detailed question: why jest fails with @babel/runtime?

I didn't understand the difference with @babel/runtime or not.
I read https://babeljs.io/docs/en/babel-runtime.

It's sense for me. But still remain unknown point.
My situation has @babel/runtime in dependencies, why the property 'default' of undefined?

So, I investigated transpiled codes by modifying preprocessor's code.

Jest failed at create-icon-set.js in react-native-vector-icons package.

First, I change the file of preprocessor.js to intercept generated code and write it to file.
Here is generated codes.
Babel generated code is minified and not human-readble, so the repo codes are formatted by prettier.

The deference of two files is same as babel's document explained.

I matched generated code and error massage from jest.
The problem is at line 82 in babeled-by-jest-with-runtime.js

...
        (_getPrototypeOf2 = (0, _getPrototypeOf2.default)(Icon)).call.apply(
...

This code correspond to static propTypes in react-native-vector-icons

Second, I transpile create-icon-set.jsby @babal\cli.
The result is here

The result is here

The different point of result is below.

...
        (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(Icon)).call.apply(
...

babel by jest code is _getPrototypeOf2.default, babel by cli is _getPrototypeOf3.default.
This difference may cause of jest fail.

I'm not convinced because I don't fully understand about jest and babel.

Also, metro use babel runtime from this commit.

From this issue, jest still use old regeneratorRuntime from regeneratro-runtime.

I think it affects the above result.

The full result of analyze is here

I'll happy that this article help you when you show jest fail.
If you found the cause of the proble or my misunderstood, tell me about it!
Thanks for your reading!

Create mock API server with Authorization by Micro, GraphQL

sasurau4 — Thu, 02 Aug 2018 13:24:16 +0000

In these days, Modern web application divided into 2 parts.
One is client side such as web browser, iOS or Android application.
Another is server side.
They are connected with web API.

If we define API schema like GraphQL or Swagger, this Architecture enable us to develop frontend and backend in parallel.

Parallel development seems good and faster than other methods, but it cause problem about frontend development.
How to develop frontend when no backend implementation?

One answer is mock backend server from schema.

So, This article introduce how to mock GraphQL server with json-web-token authorization.
The code is here

Tools

The reason why I choice micro as mock-server

micro-dev features are very useful.
Hot reloading make us faster to write mock server, Pretty logs in stdout are very convenient for debugging and some other feature are good.

Of course, we can also use same features as micro-dev with express-server.
To enable hot reload, install webpack and some related npm modules, modify webpack config and some others.
To enable pretty log, apply middleware, customize morgan output.
They are a bit complicated.

So, micro-dev has these features by default.

Recipe

All routes

module.exports = router(
  post('/auth/login', loginHandler),
  post('/graphql', graphqlHandler),
  get('/graphql', graphqlHandler)
);

Only two routes one is for login, another is graphql.
micro doesn't have router itself, so use micro-router.
This is very simple!

Login Handler

const loginHandler = async (req, res) => {
  const body = await json(req);
  const { email, password } = body;

  // check correct user's email and password set
  if (!isUser({ email, password })) {
    return send(res, 401, 'Incorrect email or password');
  }

  const access_token = createToken({ email, password });
  return send(res, 200, { access_token });
};

LoginHandler simply check whether email and password in request body is correct combination or not.
If pass the check, send 200 with access_token.

More details about authorization with jwt, see auth.js

GraphQL Handler

const apolloHandler = apolloServer.createHandler();

const graphqlHandler = async (req, res) => {

  const { authorization } = req.headers;

  // check authorization format check
  if (authorization === undefined || authorization.split(' ')[0] !== 'Bearer') {
    return send(res, 401, { error: 'Error in authorization format' });
  }

  // check token
  const { error } = await verifyToken(authorization.split(' ')[1]).catch(e => ({
    data: null,
    error: e,
  }));

  if (error) {
    console.log(error);
    return send(res, 401, { error: 'Error access_token is revoked' });
  }

  return apolloHandler(req, res);
};

GraphQL handler simply check whether Bearer token in request header is valid or not.
If pass the check, it return apolloHandler that is defined in apollo-server-micro.

GraphQL resovers and schemas are ommited this article, see apollo-server.js.

Note:
You want to see GraphQL playgruond in your browser for trying queries.
Adding some checks and early return of apolloHandler.
In my repo, check user-agent as Chrome or not.

Conclusion

Micro-dev server using API mock server is very good for developmer experience.
No config, Good looks log, Hot reloading.

If you interested in micro, see awesome-micro!
Thanks for reading.

Reference

This article inspired by below articles. Thanks!
https://qiita.com/acro5piano/items/d421e2d41ee15e20e1de
https://qiita.com/oz4you/items/3f3223048bd2109de47b

DEV Community: sasurau4

How to install New Relic infrastructure agent to AWS Elastic Beanstalk with Amazon Linux 2

Problem

Why is the document wrong?

How to install

Conclusion

References

Wrote a cli tool in Rust

Intro

Usage

Motivation

Add upstream is a bit troublesome

Curiosity to Rust

Needs to platform and shell agonistic command

Hard point of implementation

Argument parsing

Https access

Conclusion

Meetup report about React Native users in Japanese Startups the 3rd.

Intro

Note

Summary of LTs

Launch the React Native app based on the react web app.

I want to talk about many many pitfalls of react-native-firebase

Testability in React Native

There is no royal road to upgrading React Native.

Usefulness of Development with React Native and GraphQL

Struggle with introduction of E2E test library Detox

How a web engineer fights in React Native

Others

Conclusion

Metro Bundler in Web

Intro

Checking

Using Metro Bundler in Web!

Conclusion

Tips for react-native upgrade to v0.58.4

What is the article

Steps

For iOS

For Android

Conclusion

The way to downgrade expo client on Android

Intro

Steps

Step1.

Step2.

Step3.

Step4.

Conclusion

How to migrate store persisted by redux-persist?

Intro

Prerequisite

First Step

Inspect what happen in app

Store Migration

Conclusion

VimConf 2018 Report

What is VimConf?

Contents

Keynotes

What is the next feature?

Vim: From hjkl to a platform for plugins

Sessions

Migrating plugins to standard features

Modes

A day in the life of (ordinary) Vimmer

Modern editor-independent development environment for PHP

Effective Modern Vim scripting

Oni - The GUI-fication of Neovim

Vim ported to WebAssembly

LTs

After party

Conclusion

metro v0.48.1 needs react-native v0.53.3 when run test with jest

TL;DR

Jest failed situation

The reason why jest failed

Detailed question: why jest fails with @babel/runtime?

Create mock API server with Authorization by Micro, GraphQL