JSのコードの自動整形に Prettier が便利だったので、�eslint とAtomから使えるように設定した - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Web Share API | blog.jxck.io
Intro Web Share API が Origin Trials を卒業したという知らせが届いた。 コンテンツを他のサービスなどと連携するこの API について紹介する。 Web Share ブラウザで開いている Web コンテンツを、他のサービスやアプリと連携するための方法は、以前から検討されていた。 主だったものとしては、すでに策定は止まっているが Android の Intent を参考にした Web Intents が挙げられる。 Web Share API は、Web コンテンツと SNS やメールなどとの連携を主目的とした、より簡素で軽量な API となっている。 DEMO 動作するデモを以下に用意した。 (まだ Origin Trials のトークンはそのままになっている) http://labs.jxck.io/web-share/ API API は非常に簡素だ。
SPAにおけるCSSについて、ひとつの解（追記あり） - エンジニアをリングする
SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。 悩んでいたこと コンポーネント指向でSPAを作っていく上で、CSS（というかスタイリング）はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
GWの進捗としてRPG作った / redux-saga でメインループ処理、JSONSchemaからのコード生成 - mizchi's blog
作った。GWの間、コンビニと近所のカフェ以外に外出してないし、ゲームもしてない。 https://mizchi-sandbox.github.io/rpg-prototype/ で触れる。デザインはしょぼい。Chrome以外で動いてる気がしない。 コードはここ https://github.com/mizchi-sandbox/rpg-prototype 仮素材はウディタに付いてくるサンプル素材をお借りした。 WOLF RPGエディター公式サイト 【RPG作成フリーソフト】 仕様 Spaceでポーズ＆リスタート クリックでスキルの使用 一度スキルを使ったらクールダウンがある Player1 だけ操作できる あとはなんか察してほしい。 何故作ったか 前々から、ゲーム、とくにRPGを作りたいと思ってたのだけど、メインループがすんなり綺麗にかけたためしがない。趣味プロジェクトは技術的に辛いとやる
optimizer-pluginを使って、es6(es2015)でserverless frameworkのコードを書く - Qiita
もう2016年なので、皆さんは息をするようにes6を使われていることだと思います。 当然、serverless frameworkのコードもes6で書きたいですよね。 もちろん、普通に自分でbabelでトランスパイルしてもいいのですが、公式にserverless-optimizer-pluginというものが準備されているので、これを使ってみようと思います。 以下の説明はすべてmacを前提にしていますが、windowsでも雰囲気で大体いけるはずです。 コードはこちらにあります。 (リポジトリ名とproject名が合ってないですが気にしないでください...) そもそもserverless frameworkってなんぞ serverless frameworkは、AWS LambdaとAWS API Gatewayを組み合わせて、サーバレスなアプリを構築するフレームワークです。 serverle
FlowとjQueryをあわせて使うときいろいろハマった - hitode909の日記
新しく書くコードにはflowtypeで型をつけたり，既存のコードにもちょっとずつ型をつけたりしている． jQueryのオブジェクトを引数として受け取るときに型をつけるのが難しくて，しばらくハマっていた．けどできた． flow-typedにない 探してみるとなくて，typoしてないか3回くらい見た % $(yarn bin)/flow-typed search jquery No definitions found, sorry! flow-typedにはなくて，iflow-jqueryとしてnpmで公開されている https://github.com/marudor/flowInterfaces flow-typedに移行される予定はあるとのこと npmに上がってるiflow-jqueryが古い JQueryAjaxSettingsがinterfaceになる変更がnpmに上がってる版には入
"デバッグしてください", "パフォーマンスチューニングしてもらってもいいですか?" とJavaScriptが難読化された状態のページのURLを渡してくる人に、伝えなきゃならない事がある - latest log
webpackを使ったサイト、極端にデバッグしずらい (外部ライブラリが eval(文字列) の形で埋め込まれる)ので、はっきり言って大キライだったりする— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 見知らぬコードが minifyされ、さらに eval されているのをデバッグしろとか、暴力にも等しい要求なんだよね。そりゃキライになるよ— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 「環境Aの言語Bで書かれたコードを言語Fに変換した、環境C/D/Eで動くと思うのでデバッグしろ」というのも極端にデバッグしづらいという理由から避けるようにしている。 デバッガビリティに問題がある環境は、心がすり減るのでイヤ(時給1万円なら頑張る— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 js minifyあるある A「パフォーマンスに問題があるので
君はyarn.lockをコミットしているか？
Mar 31, 201715 likes31,515 viewsAI-enhanced description This document discusses Yarn and its advantages over npm. It notes that Yarn uses yarn.lock files instead of npm-shrinkwrap.json files to lock down dependency versions. Yarn is also described as being faster, able to work offline by caching dependencies, and potentially more secure than npm with features like flat mode and module folders. The
"Real" Mixins with JavaScript Classes
Mixins and Javascript: The Good, the Bad, and the Ugly.Mixins and JavaScript are a like the classic Clint Eastwood movie. The good is that composing objects out of small pieces of implementation is even possible due to JavaScript's flexible nature, and that mixins are fairly popular in certain circles. The bad is a long list: there's no common idea of what the concept of a mixin even is in JavaScr
Map - JavaScript | MDN
const map1 = new Map(); map1.set("a", 1); map1.set("b", 2); map1.set("c", 3); console.log(map1.get("a")); // Expected output: 1 map1.set("a", 97); console.log(map1.get("a")); // Expected output: 97 console.log(map1.size); // Expected output: 3 map1.delete("b"); console.log(map1.size); // Expected output: 2 Map オブジェクトは、キーと値のペアのコレクションです。Map のキーは一度しか出現しません。Map の集合の中で一意です。Map オブジェクトはキーと値のペアで反復処理されます。f
ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較 | POSTD
ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較 (編注：2016/7/27、いただいたフィードバックをもとに記事を修正いたしました。) 概要 この投稿は、HOCパターンを利用してみたいという 上級ユーザ 向けの記事です。もしReactが初めての方は、まず Reactのドキュメント を読むところから始めるとよいでしょう。 Higher Order Componentsは、さまざまなReactライブラリにとって価値があることがわかっている素晴らしいパターンです。この投稿で、HOCとは何か、できることは何か、制約は何か、どのように実装するのか……という点について詳細に見ていきます。 付録として、関連トピックについても見ていきます。それらは、HOCを学ぶ上での中核にはならないものの、カバーしておくべきだと私が思っているもので
amakan の React コンポーネント設計 - ✘╹◡╹✘
説明用の図 例として、amakan anime のトップページ https://anime.amakan.net/ の構造を挙げながら説明する。(ところで amakan anime は今月中に完成予定のサービスで実験的に公開している状態なので、まだまだ至らないところが多々あります…) 登場するコンポーネント一覧 React.Component クラスを継承したクラスをコンポーネントと呼ぶ。主に登場するコンポーネントは以下の通り。 Header Layout Router VideoPrograms Router コンポーネント 最上位のコンポーネントとして、Router コンポーネントが存在する。このコンポーネントを利用して、ページごとにどのコンポーネントを表示すべきかを分岐させる。amakan anime のトップページでは VideoPrograms コンポーネントを描画し、amaka
JavaScriptでmacOSを自動操作できるJXA - JavaScript勉強会
JavaScriptに、ちょっと便利な用途がありました！ Macには、操作を自動化できるAppleScriptという道具が用意されています。 このAppleScriptの代わりに、JavaScriptも使えるようになっていました。 JavaScript for Automation (JXA)とは？ qiita.com AppleScriptの代わりにJavaScriptを使えるようになってました。 Yosemiteからの新機能だそうです。 JXAとも呼ばれています。 そもそも、AppleScriptって何？ AppleScript - Wikipedia AppleScript（アップルスクリプト）は、アップルが開発したClassic Mac OS/macOS用のオブジェクト指向のスクリプト言語。 AppleScriptはMac OSのスクリプティング機構Open Scripting A
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
第68回HTML5とか勉強会の資料です。
スプレッド構文 - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2015. Learn moreSee full compatibilityReport feedback スプレッド (...) 構文を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数（関数呼び出しの場合）や要素（配列リテラルの場合）を目的の場所に展開することができます。オブジェクトリテラルでは、スプレッド構文によりオブジェクトのプロパティを列挙し、作成するオブジェクトにキーと値の組を追加します。 スプレッド構文は、残余構文とまったく同じように見えますが、ある意味では、スプレッド構文は残余構文の反対です
JavaScript ベスト・オブ・ザ・イヤー 2016
JavaScriptコミュニティは日々進化しています。今日のトレンドも数か月後には陳腐化しているなんてことは日常茶飯事です。 2016年は終わってしまいましたが、何か重要なことを見逃したのではないかと感じているそこのあなた！ 2016年の主要なトレンドをおさらいして、そんな不安を払拭しちゃいましょう。 過去12か月に獲得された Github のスター数を比較して、2016年に支持を集めたプロジェクトを数値に基づいて評価していきます。 2015年はなんといっても React でした。そして、Flux 実装を席巻したのは Redux でしたね。 2016年、JavaScript の人気プロジェクトはどのようなものだったのでしょうか？
Native ECMAScript modules - the first overview
All the major browsers shipped the native JavaScript modules support out of the box: which means, the time we can use them without module bundlers/transpilers has come. To understand better how we come to this point let’s start from the JS modules history and then take a look at the current Native ES modules features. ...
flowtypeによりFluxにおいて型安全を手に入れる - Qiita
この記事はfreee Engineers Advent Calendar 2016の5日目です。 こんにちは、freeeのエンジニアの @joe-re です。 僕からはflowtypeによる、Fluxアーキテクチャへの型システムの導入についてお話しさせていただきます。 背景 Reactによるコンポーネント指向設計、Fluxによる単方向フローによって、僕たちは階層化されすぎているViewにおけるイベントの発行と購読、煩雑なDOM操作と状態管理から解放されました。 Fluxアーキテクチャにおいては、Component、ActionCreator、Storeがそれぞれの層で完全に分離されています。StoreはComponentの存在を知らないし、ComponentはStoreを購読するだけで中のロジックは一切知らないし、ActionCreatorはただの関数群です。 チーム開発の中でこの関係性を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Effective E2E Test In A Electron Application // Speaker Deck
Twitter mobileのソースを漁ってライブラリ何使ってるのか知りたい