ZOZO の開発における詰みポイントとそれの改善例。割と出回ってるベストプラクティスに準じて頑張っていくような印象。TypeScript とか Atomic design とか Vuex / Vue component に依存しすぎないロジックを書いたりとか、それを浸透させるために努力したこととか。

CSS

CSS Transform
CSS Transform Functions Visualizer

とてもみやすく使いやすい CSS Transform Visualizer。

copy-paste css snipet
CSSFX - Beautifully simple click-to-copy CSS effects

コピペで簡単に実装できる、小さな CSS アニメーションスニペット集。

WebGL

WebGL tips
WebGL コンテンツの開発フローと抑えどころ - KAYAC engineers’ blog

実際のプロダクションで行われる WebGL の開発フローについて。機能単位で mock を作り、GUI を導入してビジュアル的な詰め作業をしたり、モニタリング環境を整えてパフォーマンスチューニングしたり。

30 Experimental WebGL
30 Experimental WebGL Websites which will make you want to sit in a dark room and work more

すごい WebGL 集。

Processing
GitHub - p5aholic/pcd-tokyo

Processing を使ったジェネラティブアートの考え方やアイデア。

TypeScript x Three.js
160106_threejs_trigonometric/demo at master · ics-creative/160106_threejs_trigonometric · GitHub

TypeScript x Three.js のサンプルに。

FrontEnd

facebook architecture
Building the New facebook.com with React, GraphQL and Relay

facebook は React x GraphQL x Relay でできててパフォーマンスいいよ、lazyload うまく取り入れてパフォーマンスやってるよ。

GitHub pages is fastly
Github : Case Study | Fastly

github pages は fastly で動いてる

Internet Explorer mode
［速報］次期 Micrsoft Edge に「Internet Explorer mode」搭載。企業向けに IE11 のレンダリングも提供。Microsoft Build 2019 － Publickey

さよなら IE？

new evergreen Googlebot
Official Google Webmaster Central Blog: The new evergreen Googlebot

Googlebot は最新の Chromium レンダリングエンジン (v74) を使ってるので、ES6 / IntersectionObserver / Web Components とかの API などをポリフィルなしで利用できるように。

Microsoft Edge preview builds for macOS
Introducing the first Microsoft Edge preview builds for macOS - Microsoft Edge Blog

Mac で Edge with Chromium の Canary が使えるようになった。

HTML / CSS performance
HTML と CSS のパフォーマンス改善について | AnyPicks magazine

Play 5g
5G モバイルの速さを実感しよう

5g の速度を比較して体感してみる。

1Password performance
1Password X: May 2019 update | 1Password

1Passwoed、WebAssembly を利用することで、Chrome では最大 13 倍、 Firefox では同じく最大 39 倍の高速化に成功。

DataGrid Model generation AI
【データグリッド】全身モデル自動生成 AI | DataGrid Model generation AI - YouTube

GAN を使った新しいファッション分野の事例

Iframely
ブログにあらゆる外部コンテンツを埋め込める Web サービス「Iframely」の使い方 | Takumon Blog

SNS 埋め込み iframe まとめサービス。

codic-intellij-plugin
GitHub - codic-project/codic-intellij-plugin: IntelliJ IDEA codic プラグイン (PhpStorm, PyCharm, RubyMine, WebStorm, …)

メソッドやクラスの命名を楽にしてくれる codic を IDE で使うための拡張機能。

Frontend architecture history
SPA における状態管理: 関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷 - エンジニア Hub ｜若手 Web エンジニアのキャリアを考える！

フロントエンドでの状態管理の変革、ページをまたいだ state の管理を実現するためのアーキテクチャの歴史。

PixelSnap 2
PixelSnap 2 for macOS

OS 上で動作する計測ツールのバージョンアップ。

CloudFront x WordPress
CloudFront の下で Wordpress を実行する時に色々ハマった話前編 - Qiita

free png images
IMGBIN.com - Download Transparent PNG Images, For Free

free の透過 png 素材を検索できる。

Design

muzli
Muzli Design Inspiration

ブラウザの新しいウィンドウを開くと、デザインや WEB のインスピレーションやトレンドをプッシュしてくれる拡張機能。Web ソースをマイニングして、単純な RSS でなく自動キュレーションと人力を組み合わせて選定してるみたい。ずっと Panda 使ってたけど Product of the Day で Muzli 試してデザインに特化してる Muzli の方がこのみ。

systematizing motion design
5 steps for systematizing motion design

モーションデザインをデザインシステムとして構築する方法。1.audit : Timing curves / usage / choreography patterns / Effect Patterns / motion is missing / motion is too heavy. 2.Guiding Principles: hierarchy / feedback / status / character animation - delight and usability. 3.Develop duration - Scales / Dynamic(component, distance traveled, time, ease, even animation complexity), ease - control “in / out” states(quick linear / emotion-driven) adds life, effects - descriptive names(Check Keynote slide or After Effect’s effect panel), choreography - Complex & simple / Principle-based / Narrative / Accessibility. 4.Preparing Translation: diagrams(Gantt chart) and text(After Effects Inspector Spacetime)

Google I/O 2019

Portals
Hands-on with Portals: seamless navigations on the Web | web.dev

クロスドメインでもシームレスな画面遷移ができるよ

Flutter for Web
Google、「Flutter for Web」発表。Flutter から Web アプリを生成。Flutter はマルチプラットフォーム対応のフレームワークに。Google I/O 2019 － Publickey

Flutter は Dart で iOS/Android 対応のネイティブアプリを可能にするフレームワーク。Flutter アプリケーションのコードから Windows/Mac/Linux のデスクトップアプリを生成する「Flutter Desktop Embedding」、および Web アプリの生成する「Hummingbird」、Flutter はマルチプラットフォーム対応へと踏み出します。「Flutter for Web」は、この Hummingbird によって Flutter から Web アプリケーションの生成が実用的であることが確認した。

Dart
Dart programming language | Dart