Frontend Weekly Vol.113

Headlines

Scrolling on the web: A primer by Microsoft Edge Dev BlogMicrosoft Edge Dev Blog

Webにスクロール

スクロールはWebにおいて最も頻繁に行われるインタラクションの1つ。そのスクロールについて、どれくらいの知識を持っているだろうか? この記事ではスクロールという基本的な機能について掘り下げて解説している。

A horizontal scrolling navigation pattern for touch and mouse with moving current indicator by Ben Frain

マウスとタッチで利用できる横スクロールナビの実装

レスポンシブなデザインで頭を悩ませる横スクロールするナビゲーション。マウスユーザでも、タッチユーザでも利用できるようにコントロールを入れながら、CSSとJavaScriptを使って実装する。

Grid + Flexbox: the best 1-2 punch in web layout

GridとFlexboxでWebにおけるレイアウトを支配する

GridとFlexbox(ついでにCSS Shape)の両方を上手に使ってバウハウスなプリント・グリッドをブラウザで再現する方法。

In AMP we trust by Adactio

AMPはどこへ向かうのか?

Apple NewsやFacebook Instant ArticleとGoogle AMPの違いとは何か? 先日行われたAMP Confに出演したJeremy Keith氏が感じているAMPに対する疑問たち。

Using CSS Transitions on Auto Dimensions by CSS-Tricks

AutoとCSSのアニメーション

CSSのアニメーションにおいて、autoという値は鬼門。この問題を解決・回避するにはどんな方法があるのか? 記事ではよく知られる方法からハッキーな方法までを紹介。

Introduction to Web Audio API by CSS-Tricks

Web Audio APIについて

ブラウザで音を作り、再生することを可能にするWeb Audio API。やや特殊なAPIではあるが、面白いものを作るのには丁度いいくらいの特殊さなので、ぜひ。

Stop Making Garbage: A Guide to Designing Interfaces That Last by Toptal

長持ちするUIをデザインするために

トレンドだけにとらわれず、長く利用できるUIをデザインする際に気をつけるべき3つのこと。そして長持ちしているデザインの実例。

Video

Announcing CSS Grid & the Firefox Grid Inspector Tool by Mozilla Hacks

CSS GridとFirefoxの開発者ツールで利用できるGrid Inspectorについて。

Announcement

Slack for Frontend Weekly (PR)

Frontend Weeklyの『実験的』Slackコミュニティに興味がある方は、こちらから招待をリクエストしてください。 週次で50人くらいずつ招待をして行くつもりです。

In Brief