「UIT meetup vol.7 集まれ!(タブン)実務では使わないフロントエンド芸発表会」に参加してきました

  • UIT meetup vol.7 集まれ!(タブン)実務では使わないフロントエンド芸発表会に参加してきました。

uit.connpass.com

タイトル 発表者
@1-div challenge kawasako3
SVGで作るワードアート hashrock
React.js と動くもの、鳴るもの Leonardo
本気でCSS芸やりたい人ためのbox-shadow講座 ダーシノ
CSS PANICを支える技術 GeckoTang

SVGで作るワードアート

  • hashrockさん
  • SVG芸人

何でSVG

  • なくてもフロントエンドは作れる
  • やってて楽しくなる系

ワードアート

  • MS Wordで作れる
  • パワポとかエクセルでもできる

SVGでワードアート

  • SVG
    • <svg>
    • d属性で曲線
  • SVG DOM
    • ReactとかVueで扱える
  • ベジェ曲線
  • SVGの世界は単位がない世界
    • ブラウザのスクリーンの世界はpx
    • クリックされた位置を取得する時にSVGの世界の単位に変換しないといけない
  • SVGフィルタ
    • drop shadowみたいなものも作れる

React.js と動くもの、鳴るもの

  • Leonardoさん(LINE)

React + ReduxでWebGL

  • レンダリングのタイミングが大切
  • Three.jsのレンダリング
    • composer.render()を繰り返し呼ぶ
  • オブジェクトがぐるぐるしてるだけのアプリはあまりない
    • ユーザの操作にあわせて動かしたり
  • requestAnimationFrame()でrender呼ぶ
    • Reactのライフサイクルで呼んでstate管理するとかなり重い

React + ReduxでWebAudioAPI

  • AudioNodeどこで持つか
    • 全部Storeで持つようにした

参考

qiita.com

本気でCSS芸やりたい人ためのbox-shadow講座

  • ダーシノさん

box-shadowの基礎

  • 影のサイズは要素と同じ
  • 影は要素の背面に表示される
  • 影はカンマ区切りで複数指定し表示させることができる

box-shadowでファミコン風UI

nostalgic-css.github.io

  • NES.cssはbox-shadowを使っていろいろやっている
    • inputの枠とかbuttonの外枠とか

box-shadowでドット絵

  • もとの要素のheight/widthを1pxにする
    • 影のサイズは要素と同じだから

box-shadow芸のハマリポイント

  • ギガを消費する
    • 大量のピクセル情報を持っている
    • ドット絵だとピクセル単位でたくさん定義が必要
    • 複数サイズ用意する場合サイズごとにbox-shadowの指定が必要
  • ギガを抑える
    • currentcolorを使う
    • サイズの調整はtransform: scale(x)を使う
  • メンテできない
    • box-shadowの定義が大きすぎてどこを変えたいかわからない
    • Sassをうまく使って頑張る

まとめ

  • box-shadowはアイデア次第でいろんなことができる