タグ

ブックマーク / kuroeveryday.blogspot.com (2)

  • 自作フレームワークをつくって学ぶ 仮想DOM実践入門

    昨今の代表的なJavaScriptフレームワーク(ReactVue.jsなど)には「仮想DOM(Virtual DOM)」という概念が採用されているので、フロントエンド界隈の人は一度は耳にしたことがあるだろう。ただ、仮想DOMについて学ぼうと検索してもヒットするのは「フレームワークの使い方」ばかり。踏み込んでいても概念の説明どまりで、仮想DOMがどのように実装されているか解説した記事はすくない。 ということで、当記事では理解を深めるために仮想DOMを使ったフレームワークを自作し、仮想DOMに入門する! そして、ReactVue.jsを単なるブラックボックスのフレームワークではなく、中身を理解して使えるようになることを、当記事の目標とする。 フレームワークが完成すると以下のようなWebアプリケーションがつくれるようになる。 TOC 記事が長くなりそうなのでも目次 そもそもDOMとは? D

    自作フレームワークをつくって学ぶ 仮想DOM実践入門
    gendou
    gendou 2018/11/19
  • box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company

    CSSだけでドット絵(Pixel Art)を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。 ちなみに下図のようなドット絵がつくれる。 マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJavaScriptは使っていない。 box-shadowプロパティについて ドット絵を描くためには、CSSのbox-shadowプロパティを使う。 そもそもbox-shadowプロパティは、要素にドロップシャドウ効果(影をつける)を与えるのが来の使い方なので、まずは基的な使い方からまとめる。 いくつかの構文がある。 box-shadow: offset-x offset-y color box-shadow: offset-x offset-y blur-rad

    box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company
  • 1