https://engineering.mercari.com/entry/2017/12/19/workbox
2017末時点での React Component 設計のベストプラクティス - Qiita
どう考えているか、というのを聞かれたので、記事に起こしておきます。個人の意見です。 Prettier を使う 気づけばコードの整形を人間がやる時代は終わりました。 細かいコーディングスタイルでレビューの時間を取るぐらいだったら、一貫した自動整形ルールを適用すべきです。 人によっては細かいこだわりがあって prettier の規則が気に食わないかもしれず、僕も最初はそうでしたが、Atomで保存する度に自動整形を走らせる prettier の強烈な開発体験によって、最終的にそれらのこだわりを全て捨てることが出来ました。 生産性を求めるなら、現時点では最優先で導入すべきものです。 React.createClass を使わない v16 で削除されたのでいわずもがな。 同様に、 createClass でしか使えなかった mixin 周辺機能も丸ごと deprecated です。 「可能な限りは」
1日10万枚の画像を検証するためにやったこと - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? お前は今までスクショした画像の枚数を覚えているのか？ こんにちは。WACULでフロントエンドエンジニアをしている @Quramy です。 冒頭のやつは書いてみたかっただけです。気にしないでください。ちなみに僕はDIOよりも吉良吉影派です。 11月末に、Node学園祭で Introduction to Visual Regression Testing というLTをさせて頂きました。 この時は大分話題を絞っての発表でしたので、今日は弊社で実施しているフロントエンドの画像回帰テストについて、LTでは割愛した部分も含めてヌルっと書いていこうと
コンポーネント指向フロントエンド開発におけるデザイナーの参画について - Qiita
この記事はドワンゴ AdventCalendar 2017の17日目の記事です。 dwangoアドベントカレンダー17日目を担当させていただきます @ln-north です。デザイナーとして2016年度新卒として入社し、もうすぐ2年になります。 エンジニアさんで埋められるカレンダーの中、ひっそりとデザイナーも参加させていただきます、どうぞお手柔らかに…。 はじめに ここ何年かのWebフロントエンド界隈の動きは非常に大きくそして速く、デザイナーから見ても様々なパラダイムシフトが起こっています。scssやwebpackからHTML5やCSS3まで…本当に大変ですよね。 特に最近はReactやVueなど、 コンポーネント指向 のWebシステム開発が発展を遂げています。Web Componentsなども含め、流れを見てるとおそらくWebはこのコンポーネント指向に向かい、しばらく進んでいくのだろうと
5文字で書くJavaScript/ Shibuya.XSS techtalk #10
Shibuya.XSS techtalk #10 の発表資料です。
ServiceWorkerを簡単に書けるworkbox-swの使い方 - Qiita
workbox-swの使い方 GMOペパボ Advent Calendar 2017の11日分のエントリーになります。 皆さんはPWA(Progressive Web Apps)をご存知でしょうか。 分かりやすさを優先して言うならば、新しい技術によってネイティブアプリのような動作が可能になったWebアプリケーションのことで、オフラインで動作したりプッシュ通知が送れるWebアプリケーションを実現することができます。 （詳細はGoogle Developersや私の発表スライドをご参照ください） さて今回はPWA作成にあたってとても便利なライブラリであるworkbox-sw（以下、workbox）の紹介記事となります。 workboxとは簡単な記述で最適なServiceWorkerのコードを生成してくれるライブラリです。 PWA自体どうやらまだ認知度が低く、それを作るためのライブラリ関連もまた
webpack時代の終わりとparcel時代のはじまり - Qiita
設定不要のビルドツール parcelというビルドツールが空前の勢いでGitHubスターを集めており、リリース数日で5000スターを超えています。今日だけでも1000スター以上増えており、Googleなどの有名企業リポジトリ以外でこのスピードで人気がでるのは異例です。 https://github.com/parcel-bundler/parcel https://parceljs.org/ 実際に試してみたところ、これはwebpack一強時代を終わらせるレベルの使いやすさだと確信しました。 作者はAdobeのエンジニアで、その他著名エンジニアも続々と参加している様子です。 webpack疲れ webpackが出た当初、webエンジニアはgulp/grunt疲れの状態だったことを覚えている方もいるかと思います。 webpackの統合された設定ファイルは、タスクランナーで逐次処理していたものを
コスパで学ぶ自動テストのはじめ方 - 若くない何かの悩み
Qiita 週間ランキング1位を獲得しました Kuniwak です。ご愛顧ありがとうございます。 qiita.com さて、本題に移りたいと思います。 つい最近ですが、勤め先の別チームに向けて自動テストの導入を支援するための資料を作成しておりました。こちらを共有したいと思います。 speakerdeck.com 資料中にある「仕様化テストを推奨しない」という決断には賛否両論あるかと思います。仕様化テストを推奨しなかった理由は、仕様化テストにかかるコストは相当に高く、本当に余裕があるときでないと選べない選択肢だったからです。今回自動テストを導入しようとしているチームは、見るからに余裕のない状況だったので仕様化テストからやれとは言えませんでした。 もし、「自分だったらこうする」等のアドバイスがあれば、ぜひ参考にしたいと思います。コメントなどに書いていただけると嬉しいです。
BFFの設計とflowtype - Qiita
株式会社FOLIOのフロントエンドエンジニアをしています、諸見里です。 この記事はFOLIOアドベントカレンダー7日目の記事です。昨日の記事はバズらせてサーバーを落とすことで有名な弊社CDOの超心に刺さってイヤでも印象に残るプレゼンの方法でした。それほどバズらずサーバーは落ちなかったようです。 会社のアドベントカレンダーということで、今回はFOLIOのBFF(Backend For Frontend)でのflowtypeの活用と、アーキテクチャについて書きます。 BFF & Microservices FOLIOのシステムは、Scalaを中心としたマイクロサービスで構成されています。そして、それらのサービスをクライアント向けに束ねるために、Node.jsで書かれたBFF(Backend For Frontend)を置いています。例えばWebアプリ用のBFFなら、各サービスからデータを集めて
dev.toがなぜinsanely fastを実現出来ているか - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? INSANELY FAST Qiitaを読んでる人なら https://dev.to をほとんどの人が見たはず。見てない人は見てきてください、速すぎて驚くはず。またmizchiさんがdev.toに書いた なぜ dev.to がこんなにも速く、こんなにも自分にとって感動的なのか - dev.to を見た人も多いと思う。個人的にHeroku, Railsを採用してここまで爆速なサイトを構築出来ていることは今までの常識を覆す衝撃な出来事だった。こんな新しい発見をもたらしてくれたdev.toには本当に感謝してる。自分もこんなサイト作ってみたいな
puppeteerでフロントエンドISUCONのためのパフォーマンス計測ツールを作りたい - Qiita
この記事は、 Recruit Engineers Advent Calendar 2017 の2日目です。 リクルートテクノロジーズで パートナーとして働いてる mizchi です。ここでの仕事は、 yosuke_furukawa が忙しくて調べられないことを、勝手に調べてくることです。 今までリクルートでやったことは Next.js, AMP, PWA, Puppeteer って感じ。今回は Puppeteer を使ったE2Eテストの自動化やパフォーマンス評価の話をします。 puppeteer とは リポジトリ名でわかりますが、GoogleChrome チームが公式に提供する Chrome の Headless Driver です。 スペルがとにかく覚えづらい クロスブラウザテスト以外にはかなり万能なツールです。E2Eテスト、スクレイピング、日々の作業の自動化、なんでもござれ。 他のブラ
React Storybookを使用したVisual regression testingの導入
全体の流れ まず、今回使用するメインツールであるLOKIとREG-SUITの紹介をします。 次に目指す全体像を共有し、最後にそれを実現するための方法を説明します。 利用技術の説明 LOKI Visualized Testを実施するためにはStorybookのページにアクセスし、キャプチャする仕組みが必要です。 この機能を持ったツールがLOKIです。 oblador/lokiloki - 👁 Visual Regression Testing for Storybook 上記に Visual Regression Testing for Storybook とある通り、LOKIはリグレッションテストまで実施することのできるツールです。 しかし、以下の理由から差分比較部分は別のツールを使うことにしています。 画像をGitにコミットしなくてはいけない 出力結果が画像のみのため結果が一目で分から
Angular 2018年進路予想
これはAngular/AngularDart/AngularJSに関するアドベントカレンダーです。 Angularに関する記事なら何でもOKです！ ---- This is an advent calendar for Angular… こんにちは、lacoです。Angular 2.0.0のリリースから1年以上経過し、SemVerによるアップデートポリシーやタイムベースのリリーススケジュールの運用も、すっかり軌道に乗って定着してきました。メジャーバージョンも2から5へ上がり、来年には6、7とアップデートが続けられていきます。 この記事では2017年のAngularの動きを振り返りつつ、2018年のAngularが進んでいく進路について、筆者が知る情報を元に予想します。 2017年のAngular2017年に起こった出来事を振り返りながら、Angularが進んでいる方向を再確認しましょう。
Vue.jsでreg-suitを利用したVisual Regression Testing | tsuchikazu blog
これは Vue.js #3 Advent Calendar 2017 - Qiita 1日目の記事です。 最近、お仕事でVue.js x SSRを使って開発を進めていた カラーミーリピート というサービスをリリースすることが出来ました。このサービスの開発を進めていく上で、とあるcssの修正が想定外の場所にも反映されてしまい、スタイルが崩れてしまう。という問題が時々発生していました。リリース前まではそれほど問題視してきませんでしたが、今後スタイル崩れに気付かずにリリースしてしまうのは非常に問題で、なんとか防ぐ方法を探していました。 先週末に東京Node学園祭2017が開催されましたが、そこで@QuramyさんのIntroduction to Visual Regression Testing の発表資料を拝見してreg-suitの存在を知り、これは求めていたものではないか！？ということで、V
60FPSへの夢、そしていかにキャッシュを従えるか / 書評「超速! Webページ速度改善ガイド 使いやすさは「速さ」はじまる」 - mizchi's blog
CAの ahomu/1000ch さんからご恵贈頂き、レビュー書いてくれと頼まれたので、自分のパフォーマンスというものへの思いの丈と共に書評を書こうと思う。 自分も6年ぐらいフロントエンドぐらいやってきたけど、あんまりちゃんと用語定義をしないまま「勘」で調査しがちだったのと、彼ら二人がどの数値見てるんだろう、という視点で読んだ。 gihyo.jp 要約: これはフロントエンドエンジニアの勘を体系化/言語化したものだ フロントエンドエンジニアにとって Chrome DevTools は日常的にお世話になる、「これナシでは生きていけない」という類のツールだ。だが、これの読み方は癖があり、経験的に蓄積してきた積み重ねがなければやや難しい側面があった。 この本は、フロントエンドエンジニアが今まで経験的に蓄積してきたでろう「勘」を、Webの仕様や各社のUXガイドラインの明確な定義を通して再整理したも
[Node.js] 無料で簡単にウェブアプリを公開できるサービス「Glitch」を使ってみた！ - Qiita
Glitchとは GlitchはNode.jsのアプリを公開するためのサービスです。 Node.jsでウェブアプリを公開しようとすると、サーバーの設定したりドメインを取得したり…とても複雑です。 Glitchは、あなたの創造性を試すことだけに集中できます。 Glitchは、あの有名なプロジェクト管理ツールのTrelloをつくったFogCreekSoftware社によって開発が進められています！ アプリを公開するためだけでなく、オンラインのEditorなどもついていい感じです。 使ってみる これまでAWSやさくらインターネットなどを使っていましたが、Glitchはずば抜けて簡単です。 まずはGlitchにアクセスします。 新しいプロジェクトの作成1 右上の①[Sign in]ボタンからログインします。 FacebookかGitHubが選べますが、後々GitHubからソースコードを取得すること
![[Node.js] 無料で簡単にウェブアプリを公開できるサービス「Glitch」を使ってみた！ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/eabad27b24c49104759a8c22d9e0641de57f6bef/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMTM0MDc2JTJGcHJvZmlsZS1pbWFnZXMlMkYxNjQ2NzA5NTAwP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPThkOTRlZWZkMGQ0NDk2ZTY5MjY0ZGNlYjk5NTM2N2Fl%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D51841677f65148d83b3a14a242bd2b20%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCTm9kZS5qcyU1RCUyMCVFNyU4NCVBMSVFNiU5NiU5OSVFMyU4MSVBNyVFNyVCMCVBMSVFNSU4RCU5OCVFMyU4MSVBQiVFMyU4MiVBNiVFMyU4MiVBNyVFMyU4MyU5NiVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFMyU4MiU5MiVFNSU4NSVBQyVFOSU5NiU4QiVFMyU4MSVBNyVFMyU4MSU4RCVFMyU4MiU4QiVFMyU4MiVCNSVFMyU4MyVCQyVFMyU4MyU5MyVFMyU4MiVCOSVFMyU4MCU4Q0dsaXRjaCVFMyU4MCU4RCVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MSVCRiVFMyU4MSU5RiVFRiVCQyU4MSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWYwNjZkNmNlNzgxYzg0ODM0ZDAwODMzYjQ0NjQyNGE1%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB5b25lZGFjbyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTg1MThiMzQ5YzgxMjI5NDJkNGE4MjliNTIxMDU3Nzhi%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D947f1d42d364d746603063057ca0ef09)
Node学園祭2017資料まとめ - 技術探し
nodefest.jp 2017/11/25, 26で開催されました。 今回は、前回よりも更にto be more more globalをテーマに作っていきました。 一日目はセッション、スポンサートーク、LT等でした。 二日目はセッションと参加者が手を動かすワークショップを行いました。 両日ともに、3ラインで進みました。 自分は一日目はBホール(402)の司会をしていて、二日目はCode And LearnでNodeへのコミットのサポートをしていました。 全部見れてないので、わかっている部分の資料だけ貼りたいと思います。 もし資料があったら教えてくれるとついったーとかでください。 Twitter ハッシュタグ モーメント 資料まとめ 1日目 Opening talk Node.js at Alibaba Source to Binary - journey of V8 javascrip
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
State of JavaScript
食べログのフロントエンドエンジニアってめっちゃ大変やねん･･･
dev.toが与えたインパクト
