CSS-in-JS ライブラリの emotion が v10 から、だいぶ使い方が変わっていました。 package の変更 v9 では emotion package を import していました。 import { css } from "emotion" v10 では React を使っている場合は @emotion/core を、それ以外の場合は…
追記 (2018-10-02) !FindInMap を AWS::Include とともに用いると aws cloudformation deploy で失敗することが分かったため、 SwaggerPath をパラメータとして受け取る形に修正しました。 AWS SAM と Swagger を用いてサーバーレスで API を実装する際の開…
glamorous は PayPal が開発している CSS-in-JS ライブラリです。 この glamorous が README に記載されている通り UNMAINTAINED となっています。 github.com glamorous は npmtrends を見ると styled-components や radium と同じくらいダウンロードされて…
追記 glamorous が Deprecated になり、emotion への移行が推奨されています。 yami-beta.hateblo.jp CSS-in-JS CSS-in-JS ライブラリでは styled-components が有名ですが、最近 emotion というライブラリが気になっています。 www.npmjs.com www.npmjs.com…
webpack-serve が ^1.0.0 になっていました。 www.npmjs.com 少し触ってみたので、気づいた点について書いていきます。 (以下は v1.0.2 時点の内容になります) mode の扱い 以前書いた以下の記事で、webpack-serve は webpack.config.js で関数で設定を記…
追記(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…
自作の license-info-webpack-plugin を webpack v4 に対応させました。 www.npmjs.com yami-beta.hateblo.jp 手順 webpack v4 対応する上でそのままでは動かないことは容易に予想できていたので、以下の順で段階的に対応を進めました。 webpack v3 用のテス…
フロントエンド開発において無視できない存在となった babel と webpack について説明する機会があり、作成したスライドを折角なので掲載しておこうと思います。 スライド 注意 全体像を手早く捉えられるようにイメージ優先で作成した資料のため、正確性に欠…
【2017-10-17 追記】license-pack から license-info-webpack-plugin に名称変更しました webpack でビルドした npm パッケージのライセンスをコメントとして出力する license-info-webpack-plugin というプラグインを作りました。 browserify でライセンス…
Dockerで立ち上げたコンテナでrbenvによるRubyのインストールが失敗することがあり、その原因を調べた。 概要 以下のように、インストール以前にソースのダウンロードに失敗していた。 $ rbenv install 2.3.0 Downloading ruby-2.3.0.tar.bz2... -> https://…
ドロップダウンメニュー用のライブラリ smart-dropdown-menu を作成しました。 github.com smart-dropdown-menu は、<script> タグでの読み込みと npm での管理の両方に対応しています。 どのように両対応したかの詳細については、以下の Qiita 記事を御覧ください。…
Bash on Ubuntu on Windows 向けのターミナル wsltty が mintty から出ています。 さっそくこれを使おうとしたところ、起動するとウィンドウが表示された後すぐ終了するという現象に見舞われました。 github.com 原因 原因はウイルスバスター クラウドでした…
license-list というライブラリを作成し、npm で初めて公開しました。 license-list npm で管理している package のライセンス一覧を作成するためのヘルパーライブラリです。 github.com 以下のような形で利用できます。 import licenseList from 'license-l…
browserify, babelify, watchifyを組み合わせて使う場合,`transform` の位置に注意しないと(ファイルの変更をせずに書き込みした場合でも)トランスパイルの度に遅くなっていきます.
React では以下のような「...」(ドット3つ)の記法を時々見かけます. これは,Spread Attributes という JSX の記法です. 子の Component へ props を渡す場合,Spread Attributes を用いると,以下のように書き換えられます.
はてなブログの公式テーマである Wideboard が好みだったのですが,1カラムでサイドバーがページ下部に表示されてしまう部分が不満でした. はてなブログは,デザイン設定の「デザインCSS」で CSS を記述することが出来るため,Wideboard を2カラムに変更す…
babel-plugin-external-helpers は,babel での変換時に各ファイルごとに出力される共通コードを,グローバル変数を用いて1つにまとめることで,重複するコード出力を削減するプラグインです.
git を使っていて,後からファイルをリポジトリから削除したいという場合があります. git rmを用いるとファイルをリポジトリから削除することが可能ですが,今回は過去の履歴からもファイルを除外したい場合の操作について紹介します.
browserify でのトランスパイルや uglify といったフロントエンド用のタスクを gulp で自動化するレシピを Github に上げ始めました. github.com browserify でトランスパイルを行い,1つのファイルにまとめるタスクを書いたので,簡単な解説を残します. b…
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のversion 1.2でターミナルが実装されたみたいです。 そこで、このターミナルでmsys2のzshを用いるように設定しました。 code.visualstudio.com 追記(2016/06/09) mattnさんによる実行モジュールがあるようなので、そちらを用いると良さ…
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 Toolboxで環境構築するとVirtualBox driverでDockerホストが構築され、その上でコンテナが走る。 なお、 ホスト Mac, Windows等のVirtualBoxを動かしているマシン Dockerホスト VirtualBox上で動くVM、コンテナから見た時のホスト と表…
Visual Studio Code(以下、VS Code)がPreview版で公開されたので、とりあえず使ってみた。 VS Codeは、User Settingsでフォントを指定したり、タブ・スペースを可視化出来るオプションがある。 しかし、可視化オプションを有効にしても、フォントによって…
表示領域を取得するときにお馴染みの $(window).height(); をiPhoneのSafariで考えなしに使うと痛い目を見るのでメモとして残しておく。 環境 iPhone 5s(iOS8.1) jQuery 1.11.1 注意すべきところ iPhoneのSafariが他のブラウザと比べて特徴的なのがURLバー…
最近噂のGithub製エディタのAtomですが、自分はDirectWriteを有効にする方法が分からず、Sublime Textから乗り換えが出来ませんでした。 どこかに設定があるんじゃないかと探してみたら見つかったのでメモとして残しておきます。 環境 Windows 7 Atom 0.141.…
問題 コメントに日本語を使おうとして、変換後にEnterキーを押すと確定されずに改行されてしまう 追記1(2014-11-21) 対処法を書いている方がいらっしゃったので、以下を参考にされると良いかと思います。 MacのSublimeText3で日本語が消えるバグを回避する -…
vagrant+Chef soloで仮想マシンをたてる時に詰まったのでメモ 詰まったパターン expectに関する記事を探すと #!/bin/sh expect -c " spawn (コマンド) expect \"(待機する文字列)\" send \"(入力する文字列)\n\" interact " という感じで、expectでの最終行…
Gemのインストールに失敗 bundle exec knife configure で ERROR: Ohai::Exceptions::DependencyNotFound: Can not find a plugin for dependency os となるため調べてみると、bundlerで入れた Chefのバージョンがよろしくない。 そこでGemfileを gem 'chef'…
最近、Parallax Effect(視差効果)を取り入れたサイトを一つ作ることになりまして、その際に、jQueryを利用したスクリプトを一つ書いたのでご紹介しようと思います。 Parallax Effect(視差効果)とは 詳しくは調べていただくとして、Parallax Effectを取り入れ…