valid,invalid

関心を持てる事柄について

JavaScript

必要なときだけ Polyfill.io のCDN から polyfill を読み込むようにする

以下のような script tag を HTML の最初の script tag として埋め込む。 <script> ( function(doc){ if([].find&&window.fetch)return; var firstScript = doc.getElementsByTagName('script')[0]; var scriptToInsert = doc.createElement('script'); scriptToInse…

最近の構成 (backend: Rails + PostgreSQL, frontend: React + TypeScript) を docker-compose で立ち上げる boilerplate 作った

TL;DR 現プロジェクトと近似した構成で素振り出来るよう Rails + PostgreSQL による backend と React + TypeScript による frontend を docker-compose で立ち上げる boilerplate 作ったhttps://t.co/iCqMc2TWrD— 広島の粗大ゴミ (@ohbarye) July 7, 2018 g…

Roppongi.jsで『貢献できるOSSの見つけ方 -How to find "Good First Issues"-』についてLTをしてきました

第4回 Roppongi.js に参加し、『貢献できるOSSの見つけ方 -How to find "Good First Issues"-』というタイトルでLTをしました。 リンク付きの原稿はこちら https://ohbarye.github.io/slides/2018/roppongi.js-4/ 紹介したスクリプト github.com Good first …

Roppongi.jsで『エンジニアも気にしたい色のアクセシビリティ』についてLTをしてきました

第3回 Roppongi.js に参加し、『エンジニアも気にしたい色のアクセシビリティ』というタイトルでLTをしました。 スライドのタイトルを575にしたかったものの「エンジニア アクセシビリティ 気にしよう」のような駄作しか生まれなかったために断念しました。 …

Generative Art を始めて7日間、作品を毎日公開した記録

ゴールデンウィーク(以下、GW)の途中で以下の記事を読んで Generative Art (ジェネレーティブアート - Wikipedia)*1 なるものを知り、試しに触ってみたら面白かった。 ジェネラティブアートを始めよう|なめらかサンショウウオ|note Generative Art with …

GitHub GraphQL API v4 を JavaScript から利用する

TL;DR 開発している Slack bot で発生する N+1 問題を解消するために GitHub GraphQL API v4 を利用した クライアントサイド(今回は JavaScript)側から使ってみただけだが、かなり開発体験が良かった 背景: review-waiting-list-bot について review-waiti…

babel-eslint を使って非標準仕様でも lint できるようにする

Parsing error on ESLint review-waiting-list-bot の実装中に以下のようなオブジェクトの分割代入するコードを書いたら eslint で parse error が起きるようになってしまった。 const { authors, ...conditions } = { authors: [], owner: '', repo: '' } $…

package.json の dependencies を JavaScript のコード内で参照する

package.json に書かれた、依存しているライブラリの名前 (dependencies) を JavaScript のコード内で参照するやり方。 import pkg from './package.json'; const dependencies = Object.keys(pkg.dependencies) const devDependencies = Object.keys(pkg.de…

スプレッド構文と Object.assign の違い

JavaScript の Object の spread operator (スプレッド構文) と Object.assign の違いを調べてわかった気になるが何度も忘れるので整理 結論 実質ほぼ同じことが実現できるが互換性の問題があるので Babel や TypeScript でトランスパイルするなら spread op…

JavaScript が動作する Capybara の feature spec でブラウザのコンソールを確認する

結論 page.driver.browser.manage.logs.get(:browser) 調べた経緯 フォームの text input に対する fill が働かないのでどうしたかと思い、Selenium で操作中のブラウザをのぞいてみると React の component が一切 render されていなかった。 どこかで Java…

Bower は deprecated なので Yarn へ移行した

一度もまともに使ったことなかったけど bower って死んでたんだね…。正確にいうと "maintained, but deprecated" か。 github.com snyk.io 自分には関係ない話かと思っていた…が、普段まったく触らないがひっそりと稼働を続けるレポジトリに2014年来の bower…

gulp-util の問題、deprecation warning と migration path について

2017年12月28日に The Problem with gulp-util という記事が公開された。 medium.com gulp をウォッチしていたわけではないのだが、たまたま残された gulp 資産を触っている時に deprecation warning がコンソールに出力され、そのメッセージ中にこの記事へ…

builderscon 2017 - day 1 メモ

以下、所感混じりのメモ。まとめや感想はあとで書く。 ※ 内容については間違っている可能性あり。 Desktop Apps with JavaScript Electron = node.js(JavaScript) + Chromium(のレンダリングエンジン) + C++(OSネイテイブ機能の活用) monaco editor Electron…

JavaScript や CSS を読み込む時の type 属性はもはや不要

kechol 氏からレビューを受けて知ったのでメモ。 https://google.github.io/styleguide/htmlcssguide.html#type_Attributes によると CSS や JavaScript を読み込むときのタグに type attribute は HTML5 では不要、というか非推奨とのこと。 引用 Omit type…

kpt-bot を使って KPT も Slack に集約しよう

ES6 の勉強がてら kpt-bot という Slack bot を作ってみたので github.com 「kpt-bot を使って KPT も Slack に集約しよう」という記事を Qiita に投稿した。 qiita.com Node.js、JavaScript というだけで web フロントエンドと地続き間があるから書けなくは…

ohbarye.me

Twitter や GitHub のプロフィール欄にある「あなたの web サイト」的な箇所に登録するリンクがこのブログだったり GitHub の個人アカウントへのリンクだったり、統一感がなくて良くない!となんとなく思い立って About me page を作ってみた。 http://ohbar…

npm run eject で create-react-app はアプリケーションの長寿を保証する

create-react-app すごい。React アプリを開発する環境構築が圧倒的に楽になった。 開発も素早く始められて build も一瞬で出来るように用意されている。Rails なんかもこうやって参入障壁を下げていくことで広まったのかなと思う。 npm run eject まだ始め…

jQuery の古いバージョンでは SVG の class 属性を操作する API の一部が使えない

複数サイトを管理していて、片方のサイトでは動くのにもう一方では動かない以下のようなコードがあった。 $svg('svg.target') $svg.toggleClass('hide') jQuery 2.2 and 1.12 Released | Official jQuery Blog を見るに、以下のバージョン以上であれば動くと…

ロードされた jQuery のバージョンを確認する

developer console で $().jquery # => "2.2.4" etc. ref: How to check what version of jQuery is loaded? - Stack Overflow

jQuery セレクターのエスケープにはバックスラッシュを使う

以下のような HTML 要素がある時に <input type="text" id="hatena.jp" /> $('#hatena.jp') 上記のセレクターではこの要素を取得できない。 id == "hatena.jp" ではなく id == "hatena" && class.include?('jp') にマッチする要素を探してしまう。 メタ文字 (!"#$%&'()*+,./:;<=>?@[\]^{|}~) を含…

three.jsで3Dロゴジェネレータ作ってみた

前記事でチラっと書いたけども、再度。 three.jsで3Dロゴジェネレータ作ってみた。 3D Logo Generator という話をQiitaにも書いた。 JavaScript - three.jsで3Dロゴジェネレータ作ってみた - Qiitagoo.gl three.js楽しい。

wait~リトライを行う処理

クライアントサイドJavaScriptでwait処理に相当するものが必要になったので調べてみた。そもそもJavaScriptにはwait / sleep に相当する関数が無いみたいだが、遅延処理を実現する setInterval() / clearInterval() の2つのメソッドにて同様の関数を実装でき…

信頼済みゾーンのサイトでIEオブジェクトが動かない

社内システムから定期的に情報を取得してメールを送信するバッチをJavaScriptで実装していると、 "そのインターフェイスは認識されません。"やら "エラーを特定できません。"とのエラーが。 エラー発生箇所を見ると↓の4行目で落ちていた。var ie = WScript.C…

JScriptでメール送信ができる (Outlook, Gmail)

宛先や内容は毎回異なるが、ほぼ定型のメールを毎月送る定常業務がだるい~ので自動化しようと調べてみたら、Jscriptでメール送信ができると知った。[Outlook]OutlookとWSHでメール送信 - くじらはんど★ブログ[Gmail]定型メールの送信を自動化する~GmailとJ…

画像の一部を範囲選択してぼかす(もしくはその他の加工を行う)

ブラウザに表示される画像の一部を範囲選択してぼかす機能を実装したい。まだ試してないけども下記なんかを組み合わせて実現できそう。1.範囲選択Jcrop - Deep Liquid - 2.ぼかし(その他の加工も多く用意されている)Pixastic: JavaScript Image Processing…