#デザインの教室 をFigmaで写経してデザインの勉強をした
デザインの教室｜株式会社エムディエヌコーポレーションという書籍を読みながら、Figmaでその内容を写経してたので、そのまとめです。 デザインのレイアウトについてがメインの書籍で、グリッド/要素の置き方/色の出し方など基本的なことが手を動かしながら学べてよかった。 あと、Figmaの機能を一通り使えた気がします。 次のFigmaにそれぞれのレッスンごとに写経したものをまとめてあります。 Figma: https://www.figma.com/file/baa9B8NeN7pxR0RRNZOEwZ/DesisnTraning GitHub: https://github.com/azu/designtraning Lesson 2-1: 線を使ったデザイン Lesson 2-1 練習1 線でページを分割する。 #デザインの教室 練習1https://t.co/SLomaMAxb4 pic.t
はてなダイアリーの記事をダウンロードして1枚のHTMLにまとめるツールを書いた
はてなダイアリー(not はてなブログ)の記事をダウンロードしてローカルで見られるツールを書きました。 azu/hatenadiary-downloader: はてなダイアリーの記事を一括ダウンロードするCLI t-wadaの日記を古い記事からさかのぼるように読みたいと思った時、はてなダイアリーは記事を古い順に表示する方法がありませんでした。 はてなダイアリーで記事を古い日付から並べなおす事はできますか… - 人力検索はてな そのため、指定したはてなダイアリーの記事をすべてダウンロードしてローカルでソートしたHTMLを作って表示することにしました。 neue cc - はてなダイアリー to HTMLを参考にhatenadiary-downloaderというCLIを書きました。 azu/hatenadiary-downloader: はてなダイアリーの記事を一括ダウンロードするCLI 使い
モバイル/オフラインでも動作するはてなブックマーク検索のPWAを作った
はてなブックマーク検索PWAというはてなブックマークでブクマしたデータをオフラインでも検索できるPWAを作りました。 サイト: https://hatebupwa.netlify.com/ ソース: https://github.com/azu/hatebupwa はてなブックマークの自分のブクマを検索できるPWAを作りました。 Service Workerに対応してるブラウザ(IOS Safari 11.3+を含む)ではオフラインでも検索できます。https://t.co/RCVkRYAFz0 モバイルはホームスクリーンアプリで、macOSはアプリ版もあります。https://t.co/5MDuyC9baN pic.twitter.com/KAc3KV690b — azu (@azu_re) April 16, 2018 使い方 使い方は特に難しい話でもないですが、次のように任意のはてな
LDRがサービス終了のため、Inoreader/Feedlyをバックエンドに動くRSSリーダを書いている
LDRがサービス終了のため、Inoreader/Feedlyをバックエンドに動くRSSリーダを書いている 追記: 1.0.0を出して説明を書き直したので、Irodrを使いたい方はLDRライクなRSSリーダのIrodr 1.0.0をリリースした | Web Scratchを参照してください。 2017年8月31日をもってLDRはサービス終了です。乗り換え先となるRSSリーダを探したりしましたが、求めるものを見つけることができなかったので作ることにしました。 【重要】Live Dwango Reader/LDR Pocketサービス終了のお知らせ｜LDR / LDRポケット 開発日誌 次の記事でも書いていましたが、RSSリーダのバックエンドを自前で管理するのはコスト的に難しそうでした。そのため、バックエンドとしてInoreaderやFeedlyのAPI使ったRSSリーダのウェブクライアントを書
LDRのフィードをレート情報付きでエクスポートする
LDRのフィードデータからレート（★★★☆☆）をカテゴリとしたOPML(XML)ファイルを作成するコマンドラインツールを作りました。 azu/ldr-export-opml: Convert exported json from LDR to opml with Rate. Live Dwango Readerから他のRSSリーダへ移行する際に、レートデータを維持して移行する用途です。 fastladderへの移行の場合は別の方法もあります。 LDRのレートの保存と復元 必要なもの Node.js 6>= 後述するldr.json ldr.json LDRのopmlエクスポートにはカテゴリ（ディレクトリ）の情報しか含まれていません。 なので、編集画面に使われてるAPIのレスポンスデータ(ldr.jsonとここでは呼ぶ)を使います。 ldr.jsonは http://reader.lived
Almin 0.13リリース - アプリケーションレイヤーのトランザクション
Almin 0.13.xのStable版をリリースしました。 今後に向けて下地となる基盤部分をかなり書き換えたのと、Strict modeや試験的にTransactionを追加しました。 Release Almin 0.13.10 · almin/almin まとめ 0.12xからの0.13.10の変更をまとめると次の通りです。 🔥 Breaking Changes IE9/IE10のサポート終了 CIから落としただけなのでまだ動くかもしれないですが 一部Deprecatedはありますが基本的にコードは変更しなくても動くはずです ⚠️ Deprecated リネーム context.onWillExecuteEachUseCase -> context.events.onWillExecuteEachUseCase almin/migration-toolsを使うことで自動的にマイグレー
Array.prototypeのImmutable版メソッドを個別のパッケージで使えるものを作った
JavaScriptの配列には破壊的なものと非破壊的なものが混在しています。 例えばArrray.prototype.pushは破壊的ですが、Array.prototype.concatは結合した新しい配列を返すので非破壊的です。 破壊的か非破壊的かは、基本的には覚えることでしか区別できません。 配列のメソッドの使い方については次の記事やjs-primerで今書いています。 JavaScriptの配列のパターン | Web Scratch 配列 · JavaScriptの入門書 #jsprimer それらの破壊的メソッドの非破壊的なバージョン - Immutableバージョンのライブラリを作成しました。 azu/immutable-array-prototype: A collection of Immutable Array prototype methods(Per method pa
#teppeis_sushi でクライアントサイドDDDについて発表した
#teppeis_sushiというイベントで、Faao - ドメイン駆動設計で作るGitHub Issue Client -という話をしました。 Electronやブラウザなどで動くfaaoというGitHubクライアントを書いていてそれの技術的な話です。 クライアントサイドでDDDを取り入れた設計になっていて、その設計や規約の作り方やそれを守る方法についての話をしました。 azu/faao: Faao is a GitHub issue/pull-request client on Electron. Living Documentation by design, with Domain-Driven Design by Cyrille Martraire [PDF/iPad/Kindle]という無料から買える書籍では、ドキュメントとコードを同じ速度で成長させていくためにはドキュメントに対
GitHubのラベルをいい感じにセットアップするツール
Usage 基本的にはデフォルトのプリセットがあるので、--tokenでGitHubのtokenを渡すだけで後は自動でやってくれます。 ラベルを設定したいプロジェクトのディレクトリに移動してコマンドを叩くだけです。 (git remoteのoriginを見ます) Usage $ github-label-setup --token xxx Options -h, --help output usage information -l, --labels <path> the path or npm packages name to look for the label configuration in. Default: labels.json --token <token> a GitHub access token (also settable with a GITHUB_ACCESS_
AlminでFluxアーキテクチャをやってみる
AlminでFluxアーキテクチャについてを見ていく話です。 AlminはいわゆるFluxライブラリ的なものですが、ドメイン駆動設計（DDD）を行うにあたって既存のReduxやFluxでは上手くレイヤー分けをやりにくい部分がありました。 この辺の経緯については以前スライドやドキュメントにまとめてあるので、以下を参照してください。 azu/large-scale-javascript: 複雑なJavaScriptアプリケーションを作るために考えること 複雑なJavaScriptアプリケーションを考えながら作る話 この記事では、実際のサンプルコードを見ていきながら、Flux的なデータフローについて見ていきます。 Alminでカウンターアプリを作る このサンプルではAlminを使って次のようなカウンターアプリを作っていきます。 次に英語のチュートリアルもあるので参照してください。 Counter
GitHubのPull Requestのレビューコメントをコマンドラインから取得するツール
get-github-pr-review-commentsというシンプルなCLIを作りました。 GitHubでPull Requestを出して、そこへレビューコメントを書いて、それを反映というのを繰り返すと思います。 そのときに、レビューコメントの位置をソースコードの位置で探すのが毎回大変でした。 （特に文章をPRしてるときは細かいtypoをレビューコメントで印を付けて直すみたいなことがよく起きるので、位置が見つけにくい) get-github-pr-review-commentsは次の事を行うCLIです。 指定したCommitShaを含むPull Requestを取得 ブランチのshaとかでいい Pull Requestについているレビューコメントを取得 実際のファイルパス:行数 + レビューコメントを出力 VSCodeやWebStormなど大体のエディタはファイルパスをクリックしてジャ
アーキテクチャをめぐるたび
タイトルに特に意味はありませんが、Alminを作る参考にしたものをまとめた感じの記事です。 スライド: 複雑なJavaScriptアプリケーションを考えながら作る話 リポジトリ: azu/large-scale-javascript: 複雑なJavaScriptアプリケーションを作るために考えること 主に書籍を並べていますがその他のスライドなどの参考資料は以下にまとめてあります。 large-scale-javascript/refs.md at master · azu/large-scale-javascript 自分用のメモなので、読んだ順で並べておきます。 右側の年は書籍の出た年です。 実践ドメイン駆動設計 @ 2013 一番最初に読んだDDD系の本。 この辺ででてくるレイヤーとか用語を把握した感じ。 けど、そこまでよく分かってない感じはする。 カウボーイが出てくるの読みにくい。
JavaScript Plugin Architectureというプラグイン設計について学ぶ無料の電子書籍を書いた
JavaScript Plugin ArchitectureというJavaScriptのプラグイン設計についての電子書籍を書きました。 この書籍はJavaScriptのライブラリやツールにおけるプラグインアーキテクチャについて見ていく事を目的としたものです。 以下の形式で読むことができます。 Web版 PDF形式 ePub形式 Mobi形式 GitHub上にソースコードも公開されているでので直接Markdownファイルを読むこともできます。 MarkdownよりはWeb版の方が見やすいのでそちらをオススメします。 Twitterのハッシュタグは#js_plugin_book 更新情報はRSSやリリースノートから見ることができます。 v1.0.0 最初に書くと決めたプラグインアーキテクチャが揃ったので1.0.0としてリリースしました。 JavaScript Promiseの本の時と同じく、継
Reactで条件によって出したり消したりするコンポーネントを書いた
<TogglePattern /> というコンポーネントを書きました。 azu/react-toggle-pattern: React Component that provide toggle pattern 名前の通りトグルするボタンとかを実装するのを想定して作りましたが、 もっと汎用的にパターンマッチ的な感じの制御ができるようになってます(A/Bテスト的なやつにも使えそう) 使い方は、childrenに表示が切り替わる要素を置く形で書くようになっています。 (こういう親になるコンポーネントってなんというのだろう?) 次の例ではisEditingの値が trueならばLeaveEditingButtonが表示 falseならばEnterEditingButtonが表示 という形になっています。 import {TogglePattern} from "react-toggle-patt
npmで名前空間を持ったモジュールを公開する方法(scoped modules)
npmにモジュールを公開することは多くなってると思いますが、今までのnpmだと名前は早い者勝ちでした。 最近npm Private Modulesというprivateで扱えるモジュールを有料でサポートしましたが、これはscoped modulesをprivateで扱う時だけ有料でpublicで公開する時は無料で行えます。 scoped modulesというのは、@username/project-name という感じで、@ユーザー名がパッケージ名に入るので異なるユーザー間では重複しません。 The npm Blog — solving npm’s hard problem: naming packages 公開手順 実際にscoped modulesをpublicに公開する手順としては、 npm init --scope=<npmユーザ名> パッケージの名前が@<npmユーザ名>/パッケー
npmで同じライブラリの複数バージョンをインストールして使う方法
追記: [email protected]で別のパッケージを特定のパッケージ名で指定できるpackage aliasesが追加されました。 rfcs/0001-package-aliases.md at latest · npm/rfcs 注意: この手法はnpm ciで壊れてる場合があります npm ci fails with transitive local packages - 🐞 bugs - npm forum Add support for ESLint v2 by Daniel15 · Pull Request #107 · fkling/astexplorerを見ていて、一つのプロジェクト内で複数のバージョンの同じライブラリを使う面白い方法が使われてたのでメモです。 前述したAST explorerの場合だと、ESLint@1とESLint@2の両方に対応したPlaygr
#child_process_sushi でJavaScriptアーキテクチャについて話してきた
#child_process_sushiで最近やってたJavaScriptの設計の話をしてきた。 Almin.js | JavaScriptアーキテクチャ Fluxとかで上半分は皆やるようになったけど、ドメインモデルとかFluxの場合にビジネスロジックとかをどこに書くとかはまだ未成熟な気がしているので、そのパターンを考えててAlmin.jsというのを書いたという話をした。 Almin自体は大した実装ではないので、サンプルとかドキュメントとしてパターンについて学べるものを書いていきたいイメージ。(このアーキテクチャ話自体は、色々な言語で繰り返しやっては言語が廃れて、パターンがちょっと違う形で残るというのを繰り返している by @t_wada) JavaScriptでもウェブアプリやElectronでのアプリのような、APIを叩いて表示して終わりじゃなくて、ドメインモデルの生存期間が長いものが
power-assert + babel as a development tool
3行まとめ espower-babelは役目を終えたので、Deprecated Babel + power-assertはbabel-preset-power-assertを使う コード上はrequire("power-assert")とrequire("assert") どちらでもpower-assert化できるようになった espower-babelは非推奨へ Babel + Mocha + power-assertの組み合わせを出来るだけ設定ファイルなどを作らずに使えるespower-babelというモジュールを書いていましたが、役目を終えたので非推奨(deprecated)にしました。 テストコードをES6+power-assertで書けるespower-babel 3.0.0リリース | Web Scratch 理由としては、Babel@6からは設定(ファイル)を必ず必要とするの
ecmascript-paper
ECMAScriptのカンペ ECMAScript関係についてざっとみるカンニングペーパー。 2015年10月18日の次世代 Web カンファレンスでstandardizationのセッションで議論に参加するらしいのでそれのカンペです。 ここに書かれている情報は2015年10月17日現在のものです。 追記: 縦に長い記事読むのが面倒な人向けにスライド形式にしたものも置いておきます。 Introduction | ECMAScriptとは何か？ ECMAScriptとは? Ecma Internationalによって標準化されてるJavaScriptの仕様の事。 仕様: ECMAScript 実装: JavaScript 2015年10月18日のStableな最新版はECMAScript 2015(aka. ES6)。 ECMAScript® 2015 Language Specificat
ECMAScript, TC39 Meeting Notesの読み方と修正方法
ECMAScriptは毎年リリースの方針となったため、最新の仕様を管理しているtc39/ecma262には毎日のようにコミットされています。 ECMAScriptのリリース方針についてなどは以下を参照してください。 ECMAScriptの仕様策定に関するカンニングペーパー | Web Scratch これらの最新の変更が反映されたLiving Standardなものは以下のURLで公開されています。 tc39.github.io/ecma262/ また、Proposalを元にECMAScript 2016に入る機能は既に決まっています。 何か新しく入るのかは以下の記事を見てみてください。 ECMAScript 2016 features & changes - JSer.info “どこで”決まっているのかというと2ヶ月に1回行われているTC39のミーティングです。(物理的に集合してF2F
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
