emotion v10 になって変わったこと

CSS-in-JS ライブラリの emotion が v10 から、だいぶ使い方が変わっていました。 package の変更 v9 では emotion package を import していました。 import { css } from "emotion" v10 では React を使っている場合は @emotion/core を、それ以外の場合は…

SAM CLI で AWS SAM と Swagger を用いた API 開発環境を構築する

AWS

追記 (2018-10-02) !FindInMap を AWS::Include とともに用いると aws cloudformation deploy で失敗することが分かったため、 SwaggerPath をパラメータとして受け取る形に修正しました。 AWS SAM と Swagger を用いてサーバーレスで API を実装する際の開…

CSS-in-JS ライブラリの glamorous が UNMAINTAINED になっていた

glamorous は PayPal が開発している CSS-in-JS ライブラリです。 この glamorous が README に記載されている通り UNMAINTAINED となっています。 github.com glamorous は npmtrends を見ると styled-components や radium と同じくらいダウンロードされて…

CSS-in-JS ライブラリの emotion が気になっている

追記 glamorous が Deprecated になり、emotion への移行が推奨されています。 yami-beta.hateblo.jp CSS-in-JS CSS-in-JS ライブラリでは styled-components が有名ですが、最近 emotion というライブラリが気になっています。 www.npmjs.com www.npmjs.com…

webpack-serve が v1 になっていた

webpack-serve が ^1.0.0 になっていました。 www.npmjs.com 少し触ってみたので、気づいた点について書いていきます。 (以下は v1.0.2 時点の内容になります) mode の扱い 以前書いた以下の記事で、webpack-serve は webpack.config.js で関数で設定を記…

webpack-dev-server の後継らしい webpack-serve について調べた

追記(2018-09-19) webpack-serve が DEPRECATED となり webpack-dev-server の利用が推奨されています。 README には DEPRECATED. Please use webpack-dev-server (he is in support and update mode again). Feel free to create a issue if some feature…

自作プラグインの webpack v4 対応をしました

自作の license-info-webpack-plugin を webpack v4 に対応させました。 www.npmjs.com yami-beta.hateblo.jp 手順 webpack v4 対応する上でそのままでは動かないことは容易に予想できていたので、以下の順で段階的に対応を進めました。 webpack v3 用のテス…

babel と webpack について

フロントエンド開発において無視できない存在となった babel と webpack について説明する機会があり、作成したスライドを折角なので掲載しておこうと思います。 スライド 注意 全体像を手早く捉えられるようにイメージ優先で作成した資料のため、正確性に欠…

ライセンスコメントを出力する webpack プラグインを作りました

【2017-10-17 追記】license-pack から license-info-webpack-plugin に名称変更しました webpack でビルドした npm パッケージのライセンスをコメントとして出力する license-info-webpack-plugin というプラグインを作りました。 browserify でライセンス…

DockerでrbenvによるRubyのインストールが失敗する話

Dockerで立ち上げたコンテナでrbenvによるRubyのインストールが失敗することがあり、その原因を調べた。 概要 以下のように、インストール以前にソースのダウンロードに失敗していた。 $ rbenv install 2.3.0 Downloading ruby-2.3.0.tar.bz2... -> https://…

ドロップダウンメニュー用のライブラリ smart-dropdown-menu を作った

ドロップダウンメニュー用のライブラリ smart-dropdown-menu を作成しました。 github.com smart-dropdown-menu は、<script> タグでの読み込みと npm での管理の両方に対応しています。 どのように両対応したかの詳細については、以下の Qiita 記事を御覧ください。…

wsltty が起動しない(すぐ落ちる)件

Bash on Ubuntu on Windows 向けのターミナル wsltty が mintty から出ています。 さっそくこれを使おうとしたところ、起動するとウィンドウが表示された後すぐ終了するという現象に見舞われました。 github.com 原因 原因はウイルスバスター クラウドでした…

npm で管理している package のライセンス一覧の作成を支援する license-list を作成した

license-list というライブラリを作成し、npm で初めて公開しました。 license-list npm で管理している package のライセンス一覧を作成するためのヘルパーライブラリです。 github.com 以下のような形で利用できます。 import licenseList from 'license-l…

browserify, babelify, watchify が遅い時の注意点

browserify, babelify, watchifyを組み合わせて使う場合,`transform` の位置に注意しないと(ファイルの変更をせずに書き込みした場合でも)トランスパイルの度に遅くなっていきます.

React での「...」(ドット3つ)の記法

React では以下のような「...」(ドット3つ)の記法を時々見かけます. これは,Spread Attributes という JSX の記法です. 子の Component へ props を渡す場合,Spread Attributes を用いると,以下のように書き換えられます.

はてなブログの公式テーマ Wideboard を2カラムにする CSS

はてなブログの公式テーマである Wideboard が好みだったのですが,1カラムでサイドバーがページ下部に表示されてしまう部分が不満でした. はてなブログは,デザイン設定の「デザインCSS」で CSS を記述することが出来るため,Wideboard を2カラムに変更す…

babel-plugin-external-helpers について

babel-plugin-external-helpers は,babel での変換時に各ファイルごとに出力される共通コードを,グローバル変数を用いて1つにまとめることで,重複するコード出力を削減するプラグインです.

git でファイルを過去の履歴から除外する

git

git を使っていて,後からファイルをリポジトリから削除したいという場合があります. git rmを用いるとファイルをリポジトリから削除することが可能ですが,今回は過去の履歴からもファイルを除外したい場合の操作について紹介します.

gulp を用いたフロントエンドのタスク自動化レシピ (1)

browserify でのトランスパイルや uglify といったフロントエンド用のタスクを gulp で自動化するレシピを Github に上げ始めました. github.com browserify でトランスパイルを行い,1つのファイルにまとめるタスクを書いたので,簡単な解説を残します. b…

gulp, browserify, uglify の話 ( vinyl-source-stream と vinyl-buffer について )

gulp, browserify, uglify でトランスパイルをする場合、以下のようなタスクを書くことになります。 import browserify from 'browserify'; import gulp from 'gulp'; import source from 'vinyl-source-stream'; import buffer from 'vinyl-buffer'; import…

Visual Studio CodeのIntegrated Terminalでmsys2のzshを使う

Visual Studio Codeのversion 1.2でターミナルが実装されたみたいです。 そこで、このターミナルでmsys2のzshを用いるように設定しました。 code.visualstudio.com 追記(2016/06/09) mattnさんによる実行モジュールがあるようなので、そちらを用いると良さ…

ConEmu, msys2, zshで出力される謎の「%」の原因

ConEmu, msys2, zsh Startup > Tasks で以下のタスクを定義して使っています(conemu-msys2-64.exeについては後述)。 set CHERE_INVOKING=1 set MSYSTEM=MINGW64 & %ConEmuDrive%\msys64\usr\bin\conemu-msys2-64.exe /usr/bin/zsh --login zshに変えて気づ…

docker machine(VirtualBox driver|boot2docker)での共有フォルダのバグ

共有フォルダ Docker Toolboxで環境構築するとVirtualBox driverでDockerホストが構築され、その上でコンテナが走る。 なお、 ホスト Mac, Windows等のVirtualBoxを動かしているマシン Dockerホスト VirtualBox上で動くVM、コンテナから見た時のホスト と表…

Visual Studio Codeでタブ・スペースを可視化する

Visual Studio Code(以下、VS Code)がPreview版で公開されたので、とりあえず使ってみた。 VS Codeは、User Settingsでフォントを指定したり、タブ・スペースを可視化出来るオプションがある。 しかし、可視化オプションを有効にしても、フォントによって…

iOS8.1のSafariで$(window).height()を使うときの注意点

表示領域を取得するときにお馴染みの $(window).height(); をiPhoneのSafariで考えなしに使うと痛い目を見るのでメモとして残しておく。 環境 iPhone 5s(iOS8.1) jQuery 1.11.1 注意すべきところ iPhoneのSafariが他のブラウザと比べて特徴的なのがURLバー…

AtomでDirectWriteを有効にする

最近噂のGithub製エディタのAtomですが、自分はDirectWriteを有効にする方法が分からず、Sublime Textから乗り換えが出来ませんでした。 どこかに設定があるんじゃないかと探してみたら見つかったのでメモとして残しておきます。 環境 Windows 7 Atom 0.141.…

Sublime Text 3 - コメント文で日本語変換を確定すると消える問題

問題 コメントに日本語を使おうとして、変換後にEnterキーを押すと確定されずに改行されてしまう 追記1(2014-11-21) 対処法を書いている方がいらっしゃったので、以下を参考にされると良いかと思います。 MacのSublimeText3で日本語が消えるバグを回避する -…

Chefでのexpectコマンドを利用したprovisioning

vagrant+Chef soloで仮想マシンをたてる時に詰まったのでメモ 詰まったパターン expectに関する記事を探すと #!/bin/sh expect -c " spawn (コマンド) expect \"(待機する文字列)\" send \"(入力する文字列)\n\" interact " という感じで、expectでの最終行…

WindowsでVagrant+Chef+knife-soloがうまくいかない

Gemのインストールに失敗 bundle exec knife configure で ERROR: Ohai::Exceptions::DependencyNotFound: Can not find a plugin for dependency os となるため調べてみると、bundlerで入れた Chefのバージョンがよろしくない。 そこでGemfileを gem 'chef'…

ParallaxScrollを作りました

最近、Parallax Effect(視差効果)を取り入れたサイトを一つ作ることになりまして、その際に、jQueryを利用したスクリプトを一つ書いたのでご紹介しようと思います。 Parallax Effect(視差効果)とは 詳しくは調べていただくとして、Parallax Effectを取り入れ…