新しい API1. Lazy Image Loading 2. prefers-color-scheme 3. inverted-colors 4. scroll-snap-type 5. Array.flat() 6. Intl 7. TS Compiler API 8. PointerEvent …
How using component-based design helps us build faster
With component-based design, development becomes an act of composition, rather than constantly reinventing the wheel. Using shared components as building blocks frees us up to focus on what matters, without getting bogged down in implementation details. All of the components used in the Edit List screen already exist in our library, which means there was no need to create any new components to bui
concatだらけになるtemplate literal - Qiita
Babelで変換されたあとのコードを見ると、一見無駄にも思えるコードが生成されていたのですが、実はそれが必要だった、というお話です。 Template Literalとは ES5までのJavaScriptでは、文字列を合成するには「1つ1つ+演算子で連結していく」「Array.prototype.joinで連結する」などの手法があったのですが、どちらの方法にしてもどのような構造の文字列ができるか、分かりづらいものでした。 ES6では、他言語のように文字列途中で式展開ができる、Template Literalが登場しています1。引用符として`...`を使い、式展開はその途中に${...}と書くという、他言語と比べてもそこまで違和感のない記法となっています。 Babelでの変換結果 で、例によってIEは非対応なので（MDN）、IEを切り捨てられない環境ではBabelでの変換が必要となります。こ
フロントエンドはマイクロサービス化の恩恵を受けられるのか？ — Micro Frontends パネルディスカッションレポート(前編): Microservices Meetup vol.7
(lacolaco) さんの御三方にご協力いただき、約1時間にわたりパネルディスカッションを行いました。様々な論点について議論が及び、とても充実した内容になりました。ご協力いただき、とても感謝しています。ありがとうございました。 本記事では、この中で行われたディスカッションの内容の大筋を書き起こし、また、最後に簡単な総括をしたいと思います。なお、本記事は100%正確な書き起こしではなく、編集を行っております。意図を損なわない努力をしておりますが、文責は イントロダクションqsona: 議論に入る前にまず、ご登壇者の自己紹介をいただけたらと思います。 lacolaco: 株式会社Kaizen Platformから来ました、らこといいます。フロントエンドエンジニアやってます。主にAngularを書いています (筆者注: lacolacoさんはAngular Japan User Groupの代
GitHub - facebook/hermes: A JavaScript engine optimized for running React Native.
Hermes is a JavaScript engine optimized for fast start-up of React Native apps. It features ahead-of-time static optimization and compact bytecode. If you're only interested in using pre-built Hermes in a new or existing React Native app, you do not need to follow this guide or have direct access to the Hermes source. Instead, just follow these instructions to enable Hermes. Noted that each Hermes
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や
Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division
Vue.js 講演用資料です。 # 概要 コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。 一概に正解があるとも言い切れないテーマですが、この指針を疎かにすることはチームを混乱に陥れることと同義です。 それが SPA 未経験のチームであればなおさら…
styled-componentsに独自のpropsを生やして値を渡したら怒られたときのメモ - ひと夏の技術
2行 独自に生やしたpropsをまるごと渡してはいけない 分割代入でdomのattributesに定義がないpropsを間引く エラーメッセージ なんかこういう2種類のやつを言われる React does not recognize the `isAvailable` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isAvailable` instead. If you accidentally passed it from a parent component, remove it from the DOM element. Received `false` for a non-boolean at
Babel 7.4.0で非推奨になった@babel/polyfillを使わず、core-js@3で環境構築する | nansystem
# Babel 7.4.0で非推奨になった@babel/polyfillを使わず、core-js@3で環境構築する @babel/polyfill (opens new window)のページにBabel 7.4.0から非推奨になったと書かれている。 As of Babel 7.4.0, this package has been deprecated この記事ではwebpack4でBabel7.4を使った環境構築の方法を記載する。 # 環境構築 # インストール @babel/polyfillではなくcore-jsとregenerator-runtimeをインストールしているのがポイント。 Polyfillはcore-jsにまとめられており、async-awaitを動かすにはregenerator-runtimeが別で必要になる。 そのほか、BabelやWebpackでビルドするために必
encodeURIComponentが世界基準だと誤解してた話
URLをいじくるプログラムをいじっていて、仕様がよくわからなくて悩んだのでまとめます。 2/23: 追試部分を追記 2018/7/14: JavaScriptのURLSearchParamsと、GoのPathEscapeについて追記 ことの経緯 HTTPとはなんぞやとか、GETとPOSTがどうの、それぞれでパラメータがどういう経緯でウェブアプリケーション(とかCGI)に渡って来るのかぐらいは知っていました。で、ウェブでXHRでGETリクエストを送る場合にはJavaScriptのencodeURIComponent()で各パラメータをエンコードして、&でくっつけて、URLの末尾に?で付与すればいいんだよね？と思っていました。こんな感じに。 これを受け取る側は、JavaScript(node.js)ならdecodeURIComponent()を使っているはずだ。ウェブの世界ではJavaScri
新しいフレームワークを学ぶならTodoMVCではなくRealWorldを参考にしよう - Runner in the High
よく新しいフレームワークを学ぶにはTodoアプリを作ってみるのがよい、と言われる。実際、Todoアプリを様々なフレームワークで作ってみたサンプルをまとめたサイトもあったりする。 ところが、実際に業務で作るようなアプリケーションはTodoアプリの範疇を超えている。とくにSPAにもなると、画面遷移やWebAPI連携、大規模な状態管理などなどの条件が増えるので、Todoアプリを作っているときには考慮できていなかった大変さが出てくる。 そこで参考になるのが RealWorld example apps と呼ばれるプロジェクト 端的に言うと、TodoMVCの大規模版。 規定のスペックに沿って、様々なウェブフレームワークで作られたアプリケーションのリポジトリがリストアップされている。 スペックについて "Conduit" is a social blogging site (i.e. a Medium
Babel7.x時代のpolyfillの設定方法とuseBuiltInsの仕組み
ES2015+で実装するためにBabelのpolyfillを利用する場面は多いと思いますが、Babel6.xまでと7.xではその導入方法が変わっているので注意が必要です。今回はBabel7.xでの用途別polyfillの設定方法と、キモとなるuseBuiltInsオプションの挙動についてまとめてみます(執筆時点でのBabelのバージョンは7.1.0です)。 なお、6.xまでの設定方法は「Babelの設定を見直すための逆引きガイド」にまとめてあります。polyfillのことだけでなく、Babelとは何か、どのように利用するのか、といったことも併せてまとめてありますので良ければご参考にどうぞ。 2019/06/21 追記 Babel7.4.0から @babel/polyfill が非推奨となっています。変更点や新しい設定方法は「Babel7.4で非推奨になったbabel/polyfillの代替
vuex-aggregate で map系ヘルパーも守る - Qiita
<template> <div> <p>rootName = {{rootName}}</p> <p>rootNameLabel = {{rootNameLabel}}</p> <p>nestedModuleName = {{nestedModuleName}}</p> <p>nestedModuleNameLabel = {{nestedModuleNameLabel}}</p> <p>count = {{count}}</p> <p>double = {{double}}</p> <p>expo2 = {{expo2}}</p> <p>countLabel = {{countLabel}}</p> <p>isRunningAutoIncrement = {{autoIncrementLabel}}</p> <p>name = {{nameLabel}}</p> <div> <butto
WebAssembly 開発環境構築の本
この文章は Rust を用いた WebAssembly の開発環境を構築する手法を紹介するために作成されました. ハッシュタグ: #WASMの本紹介記事: WebAssembly 開発環境構築の本を公開しました - mizdra's blog# 本書の目的Rust を用いた WebAssembly の開発環境を構築する手法を知ることモジュールバンドラと連携する方法を知ることTypeScript と連携する方法を知ることWebAssembly を利用していて陥りやすい罠を知ることWebAssembly に関する情報を調べる方法を身につけること# 本書でやらないことWebAssembly/Rust/JavaScript の文法や機能の解説が目的ではない Rust からコンパイルして生成された WebAssembly を JavaScript から利用する方法を解説する文法や機能については, W
岡田を切る技術 - Qiita
これはとある回顧録 何度も諦めかけましたが、数年の歳月を経て遂に岡田を切る技術が一旦の完成へと至りました。その技術を巡る奮闘の歴史と成果について、ここに記録を残していきたいと思います。 画像時代 まずは「切る」という動作が何を指すかを明確にしておきます。 厳密な定義というよりは、切った感を得るために必要そうなふるまいとして定義します。 平面上のある領域が、任意の直線を境界として分割されること 分割された領域は物理法則に準じてふるまうこと 要するに気持ちよく岡田を切ることができれば目標は無事達成です。 物理エンジン 切った感を高めるためにはやはり「物理法則」に準じたふるまいが欲しくなります。つまりブラウザ上で動く物理エンジンが必要です。 世の中にはフルスクラッチで物理エンジンを作れる人間と作れない人間が居ると思われますが、残念ながら私は後者でした。勝ち目の薄い勝負は避け、素直に巨人の方にすが
SPAじゃないプロジェクトのための控えめなJavaScriptフレームワーク「Stimulus」 - yuhei blog
ReactやAngularのように、アプリ内のすべてのHTMLをJavaScript側で管理して描画するアプローチは大げさすぎる。ほとんどの場合において。 もちろん一定以上の複雑さがあればその辺のJavaScriptフレームワークを使った方が良い。が、それがやり過ぎになるプロジェクトは多い。というかその方が多い。それでも、それらのアプローチではやり過ぎになってしまう場合でも、秩序のあるコードを書き続けられないと当然苦しい状態へ向かう。 この微妙な（そして多数派であるはずの）環境を適度に管理できる枠組みが必要だ。これまでちょうどいい解決策を見つけられずに苦労してきた。Web Componentsは課題を解決するかもしれないがまだ来ない。そこで出会ったのがStimulusだ。 いわく、Stimulusは既存のHTMLのための控えめなJavaScriptフレームワーク。サーバーサイドレンダリング
JavaScript が読み込まれる前でもWeb Applicationを動かす - from scratch
今回は最近取り組んでいる、 JavaScript が読み込まれる前であっても「ちゃんと」 Web Application が動作するように作る話をします。 Server Side Rendering における注意点と対策 BFFを使ってServer Side Rendering をすることに数年前から取り組んでいます。 まずはSSRをやる上での注意点と対策について紹介します。 SSRをすることはSEOのためだと思われがちですが、個人的にはSEOのためにしているわけではなく、 First View を向上するため（特に First Meaningful Paint を向上するため）にやっています。 First View SEOとSSRに関しては Google が最近出したこの記事の SEO Considerations 節が詳しいです。ここでは説明しません。 SSRをしない、Client S
JSがブラウザを固めてつらいので、新しいAPI「requestIdleCallback」を使うことにした - pixiv inside [archive]
「ピクシブ株式会社 Advent Calendar 2015」の24日目の記事です。こんにちは、今年8月からピクシブに入社した新米の@_furoshikiです。入社直後は、古くなって大変なことになっているJavaScriptのコードを、そーっと触る系エンジニアをやっていました！ 私はピクシブに入る前から、オフィスの一部を借りて「東京Webパフォーマンス」という趣味丸出しなイベントを開催しています。その中で扱ったテーマのひとつである「requestIdleCallback」が、古いJavaScriptのコードにUIをブロックされ、荒んでいた私の心を救ってくれました！ 今回、このrequestIdleCallbackというブラウザの新機能について、pixiv insideのブランド力を信じて、日本に多く広まるよう宣伝してみようかとおもいます！ そもそも、ブラウザのなにが問題なのか？ Windo
![JSがブラウザを固めてつらいので、新しいAPI「requestIdleCallback」を使うことにした - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9816ce1456c701bc9ca8189c4a1992fe7883d36e/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fcf5f8e7e9c0572236d914a69de729574796d371d%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fd%252Fdevpixiv%252F20151217%252F20151217010303.jpg)
3Dモデルからぬいぐるみの型紙を取るWebアプリを作ってみた – PSYENCE:MEDIA
この記事は RECRUIT MARKETING PARTNERS Advent Calendar 2018 の投稿記事です。 はじめに こんにちは。デザイン統括１グループの萬成です。 みなさんは「リファライオン」をご存知ですか？ リファライオンはリクルートマーケティングパートナーズの内製開発組織を体外向けに紹介するべく誕生したライオンのキャラクターです（リファラル + ライオン === リファライオン）。リファライオンの Twitter アカウントでは、社内の開発組織が日々どのような活動を行っているのかを知ることが出来るので、気になる方はぜひフォローしてみましょう。 ちなみに鳴き声は「だお〜」です。 第三回Re:OD Hackおわったおー マネジメント人材がなぜ不足するのか？その真因を語り合ったんだお！ エンジニアリングマネージャー/エンジニア/人事がそれぞれの視点で会社の垣根を越えて話し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - gjuchault/fuzzyjs: fuzzyjs is a fuzzy search algorithm in javascript
