CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

フローティングラベルとは、フォームのラベルが入力時にアニメーションで上方向にフローティングするテクニックです。 一昔前までは、完全にJavaScriptの範疇、もしくは強引なCSSでもたつく感じのアニメーションでしか実装できませんでした。しかし、:placeholder-shown疑似クラスを使用すると、シンプルなコードで滑らかなフローティングラベルを実装できます。 下記のデモはJavaScriptは無し、CSSのみで実装されています。

使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。 という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。 以下はFinding Dead CSSの日本語訳です。 Finding Dead CSS 私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。 今、故意に『未使用CSS ( unused CSS ) 』ではなく『死んだCSS ( dead CSS ) 』というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。 数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。 そこには既に使われていないCSSがあるだけではなく

Web技術の標準を策定するWorld Wide Web Consortium（W3C）のBrowser Testing and Toolsワーキンググループは、「WebDriver」が6月5日付けで勧告に到達したことを発表しました。 WebDriverは、Webブラウザを外部から操作することを可能にし、Webアプリケーションのテストなどの自動化を実現する技術です。 主要なWebブラウザにはすでにこのWebDriverの機能が用意されています。Seleniumに代表されるWebブラウザ自動化ライブラリを利用することで、WebDriverを用いてWebアプリケーションのUIテストなどを自動化することが可能です。 SeleniumからW3Cへ もともとWebブラウザには外部から操作を行うAPIなどはなく、WebページやWebアプリケーションをWebブラウザで表示した際に画面が正常に表示されている

幸か不幸か、この2つについていろいろ調べた機会があったのでメモ。 結果、個人的には、hyperHTML推しです。 はじめに どっちも聞いたことないな？って人のために、何を目的とした技術なのかを。 これらはReactがやってるみたく、ウェブアプリケーションのViewを構成するコンポーネントを、宣言的に記述するためのライブラリ。 ただReactやらVueはVirtualDOMという抽象化を経る一方、こちらはRealDOMであるのと、JSXとかそういう記法はなく、Tagged Templatesを使ってコンポーネントを書いてく。 まあ実装はさておき書き味としては、めちゃくちゃ薄いReactって感じの立ち位置。 Template Literalで書いたHTMLを関数にわたすと、DOM要素として返してくれたり、実際のDOMツリーに反映してくれたりする。 で、そういう目的をもつライブラリとして白羽の矢

こんにちは。前置きは抜きにすぐ作ります。 Create Application 01: create-react-app まずはcreate-react-appです。なかったらnpm install -g create-react-appしてください。 うまくいったらyarn startで起動しましょう。しましたか？うまくいってるのを確認したら即刻ジョブ止めましょう。もう二度とyarn startを実行することはありません。 02: install Some Package 以下のパッケージをインストールしてください。最新ので問題はないはずです。すべてインストール時に--dev-dependenciesを付けることを忘れないでください。まあ忘れてもいいです。 electron npm-run-all 03: setting up Electron こちらのgistを参照してください。 次に

Opensource.comは6月14日(米国時間)、「Bash tips for everyday at the command line｜Opensource.com」において、知っていると、日常の活動においてキーストロークを減らすことができる隠し機能やショートカットを紹介した。 紹介されているテクニックは次のとおり。 複数のターミナルでbashを使っている場合、そのすべてのコマンド履歴を保存するようにする設定 shopt -s histappend 直前のコマンドを先頭にsudoを追加して実行する。管理者権限が必要なコマンドを間違ってsudoを指定せずに実行した場合に利用する sudo !! 直前のコマンドの引数を!*に展開して実行する コマンド !* コマンド履歴から該当しそうなものを探す方法 history | grep キーワード インタラクティブにコマンド履歴検索を実行 Ct