なんとなくで理解しないWebpackのCSS周辺 - Qiita
CSS in JSに夢を見たが、なかなか一筋縄では行かなかったので1、webpackにおけるCSSと本気で向き合ってみた。 しかしまだ理解が甘いところがあったのでloader, pluginまわりの関係性を整理した。 （前置き）webpackの基礎情報 css関連の本題にはいる前に、webpackの基礎を再確認する。 Webpackの特徴 webpackの特徴的な事項として、CSSや画像など、javascriptでないデータも基本的に全てをjavascriptで扱ってしまう、という事が挙げられる。 同等の対抗として挙げられるbrowserifyやrollupは、あくまでも「javascriptのmodule解決」にフォーカスしているのに対して、webpackは全く違う方向を向いている loaderとpluginの違い 結構あやふやに扱っていたが、上記のwebpackの基本部分を明確にして考
お前らのReactは遅い - Qiita
煽りタイトルですみません。 最近、Reactのプロジェクトのページを動かしていて、 もっさりしてる（レンダリングの負荷が高いな）と思ったので どうやったら無駄なレンダリングを減らせるか思考錯誤したことをまとめました。 preactとか別ライブラリの話はしません。 よかったらこちらもどうぞ ReactJSで作る今時のSPA入門（基本編） 2019年07月06日追記： ブラウザのレンダリングの仕組みに関して良記事があったので先に一読しておくことをおすすめします。 良記事１：実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか 良記事２：ブラウザレンダリング入門〜知ることで見える世界〜 １ピクセルがブラウザに表示されるまで：Life of a Pixel 2018 この記事に関してはReactのDOMツリー（レイアウト）レンダリングに関する最適化戦略です。 2020年02
Snapshot Testing APIs with Jest
You know what’s annoying? API mismatches. One day the backend devs change one of the APIs without warning the frontend devs. “We decided dateCreated was a better name than created_at,” they say. “Didn’t we tell you in standup yesterday?” And then everything is broken. There are unit tests covering the UI code. There are unit tests covering the backend code. All of those are passing. And yet, the a
ES Nextのパイプライン演算子ってどうなの？ - Qiita
const plasticModel = ` ┏━━━┳━━━━━━━┳━━┓ ┣ヽ ￣ / (･ω･)┫ ┣━━━━━━╋━━━━╋━━┫ ┣､ﾊ,,､ ＼(. ＼ ノ┫ズコープラモ ┗┻━━━━━┻━━━━┻━━┛ ` |> functions[カット] |> functions[組み立て] |> functions[設置] plasticModel |> console.log // ∧∧ // ヽ(･ω･)/ ｽﾞｺｰ // ＼(.＼ ノ // ､ﾊ,,､ ￣ // ￣ ES.nextで定義されている「the pipeline operator」（和訳: パイプライン演算子）を検討してみました。 2018/4/8現在、ようやくStage1に登った所でまだまだ先は長いって感じですね。 the pipeline operator -
【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する - Qiita
Firebase Advent Calendar 2017 21日目の記事です。 フリーランスでフロントエンドを中心にエンジニアをやっているpotato4dです。 普段はVue.jsを中心に、案件を進めたりコミュニティに関わったりしていますが、今回はそんなVue界隈で今アツいフレームワークであるNuxt.jsとFirebaseを組み合わせて、SPA + SSRにAuthと Firestore を組み合わせたアプリケーションを高速で作る方法を、サンプルとあわせてご紹介します。 2019/10/16 追記 このサンプルは Firestore が存在しない Nuxt v1.x + RTDB 時代のコードを愚直に移行している ので全体的に資料が古くなっています。 インフラ構成については順次更新していますが、特にデータストア操作周りについては できるだけ参考にしないでください。 2019/07/02
Nuxt.js他で時計アプリ (PWA) を作ってみたよ。 | Ginpen.com
ええいや時計って……という感じはあるんだけど、とにかくNuxt.jsを使ってみたかったのです。あと自分では使う。 できあがったもの アナログ時計が左に、デジタル時計が右に。あとポモドーロタイマー付き。 アプリ https://clock.ginpei.info/ コード https://github.com/ginpei/giclock/ 使った技術 ライブラリ、フレームワーク Vue.js + Nuxt.js (new) Nuxt.js’ PWA Module (new) + Workbox (new) Pug Sass ツール ESLint + JavaScript Standard Style EditorConfig Mocha + Chai + SinonJS push-dir (new) yarn vue-cli (new) Visual Studio Code (new) ウ
JavaScript Standard Style
JavaScript Standard Style English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Korean) • Português (Brasil) • 简体中文 (Simplified Chinese) • 繁體中文 (Taiwanese Mandarin) This is a summary of the standard JavaScript rules. The best way to learn about standard is to just install it and give it a try on your code. Rules Use 2 spaces for indentation. e
React's diff algorithm
Christopher Chedeau (@vjeux) is a Facebook Software Engineer in the Photos Team. Before that, he went to EPITA, a 5-year Computer Science school and majored in its R&D lab LRDE. He also worked for Curse during the nights and week-ends. React is a JavaScript library for building user interfaces developed by Facebook. It has been designed from the ground up with performance in mind. In this article
async.js の使い方
[Home] 概要 asyncは非同期動作の多いnode.jsで、見かけ上、他の言語での同期動作のようなことを実現するモジュールである。asyncは２０種類のメソッド(map, filter, each ...)を持っていて、様々な形態をサポートしている。 asyncはnpmでインストールできる(グローバルインストールの場合にはスイッチ-gを付ける)。 npm install async asyncには次のカテゴリーに属するメソッドが含まれる。 コレクション 制御フロー ユーティリティ var async = require('async'); async.map(data, asyncProcess, function(err, results) { console.log(results); }); ブラウザで使う場合は次のようなタグを追加する。 <script type="text
AWS Lambda の Node.js で連続で外部APIを叩く作法 - ボクココ
ども、@kimihom です。 今回は AWS Lambda における Node.js のコードの書き方について。 実装したいこと 例えば、id を複数持った配列があるとして、その配列を 一個一個 HTTP リクエストで叩きたい、ということがあるだろう。id単位でしかリソースを削除できないような API があった場合などは必ずそんな場面に出くわす。 これを AWS Lambda で実装するには、どうすれば良いだろうか。ここに AWS Lambda の落とし穴が潜んでいる。何も考えずに書くとこんな感じになるだろう。 var request = require('request'); exports.handler = function(event, context) { var host = "https://api.awesomeapp.com"; var ids = [1,2,3,4];
初めてのJavaScript、初めてのAWS Lambda | DevelopersIO
はじめに 佐々木です。開発経験も無くJavaScriptを触ったこともない僕ですが、どうしてもAWS lambdaを触ってみたかったので、四苦八苦しながらやってみました。 すでにバリバリ活用しているブログ記事がたくさん出ていますが、本記事は本当に何もわからない僕がよちよち歩きしている内容ですので、深いところは期待しないでください。そして識者のツッコミをお待ちしております。 AWS lambdaの基本的な使い方は以下の記事をご参照ください。 AWS Lambdaを始めてみる(1).ユーザーアプリケーションからのイベントを扱う AWS Lambdaを始めてみる(2).Amazon S3イベントを扱う やってみる MBAにnode.jsをインストールする とりあえず簡単な構文チェックだけでも手元でやりたいので、MBAにbrewを使ってnode.jsをインストールします。 $ brew insta
『[node.js]asyncを使って非同期処理を制御2』
asyncを使って非同期処理を制御2前回の続きです。前回は非同期のtaskを順次または平行に処理を行う方法を書きましたが、今回は配列に特化した関数を紹介しようと思います。前回の記事の内容は理解していることを前提に書きます。 基礎編 配列の順次処理と並行処理今回はasync.each, async.eachLimit, async.eachSeries, async.map, async.mapLimit, async.mapSeriesの6つを説明したいと思います。6つもありますが関数名で察しがつく通り、覚えることは3つぐらいです。eachとmapの違いはArray.forEachかArray.mapかぐらいの違いです。~Seriesがあると無いとの違いは順次処理か並行処理かの違いです。~Limitもそこまで難しいことはないです。 async.each(arr, iterator, cal
![『[node.js]asyncを使って非同期処理を制御2』](https://cdn-ak-scissors.b.st-hatena.com/image/square/83d61cd81373359353905d64d3800fef4d2f750e/height=288;version=1;width=512/https%3A%2F%2Fstat.profile.ameba.jp%2Fprofile_images%2F20141009%2F17%2Ffe%2FuF%2Fg%2Fo014001401412842872585.gif)
Object.assignが実装された - JS.next
概要 Object.assignはオブジェクト同士をマージするJSerの誰もが長年追い求めた夢のメソッドである。 使い方 Object.assign( target, ...sources ) 第一引数で渡したオブジェクトに、第二引数以降のオブジェクトが直接持つ、 全ての列挙可能なStringまたはSymbolプロパティを加え、結果として返す。 例： var sym = Symbol() var obj1 = { "str": 1, } var obj2 = { "str": 2, [sym]: 2 } var obj3 = Object.assign( obj1, obj2 ) console.log( obj1 == obj3 ) // true console.log( obj1["str"] == 2 ) // true console.log( obj1[ sym ] == 2
非SPAなサービスにReactを導入する - クックパッド開発者ブログ
投稿開発部の外村（@hokaccha）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
How To Use Facebook Login with React and Babel
TL;DR: You can check out the complete application at this Github repository Update (2015-12-17): This post is out of date. I will update this post for React 0.14, soon. I have a side project that uses React and Babel which I needed to use Facebook Login. Unfortunately, I had to figure it out myself because I couldn’t find good documentation. I’ve created this blog post so those who want to do the
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
State of JavaScript
articles/cypress and other non-selenium e2e testing tools.md at master · nanoflat/articles
GitHub - hakimel/reveal.js: The HTML Presentation Framework
Kept
Open Graph Page Subscribed Apps - ドキュメンテーション - Meta for Developers