会社で「AMPページ内でこういう操作したときにこういうDOMを差し込むことってできるんですか？」って質問されて、「それworker-domがAMP使えるようになったらできそうですね」ってなったのでworker-domを触ってみました。 ※この記事でやってることはamp-bindとか既存のAMPコンポーネントでも実装可能ですが、worker-domの素振りログなのでご了承ください。 今回出てくるコードはgistに置いています。 worker-domとは GitHub - ampproject/worker-dom: The same DOM API and Frameworks you know, but in a Web Worker. AMPプロジェクトが開発しているWorker内でDOM操作をするライブラリです。現時点(2018年12月)ではalpha版です。 Workerっていうのは

この記事では私が2年以上PostCSSを実務で利用してきた、CSS Level 4の状況を振り返ります。 CSS4を使うための環境について まず、PostCSSが出てからcssnextを使ってCSS Level 4を使えるようにという記事が世に多く出回り、（ぼくの中で）実質的にpostcss-cssnextを使うことがPostCSSにおけるデファクトのようになっていました。 PostCSSとcssnextで最新CSS仕様を先取り！ | HTML5Experts.jpにも以下のようにアツいメッセージが書かれています。 cssnextでFuture CSS syntaxを先取る！ これには非常に心を掴まれました。 また、cssnextが発信しているコピーも簡潔に心を捉えています。 Use tomorrow’s CSS syntax, today. これには「トゥモローズシーエスエスをわれもトゥ

We reduced our vendor.js from 210kb to 16kb in about five minutes of work and ten lines of code Even though we strive for a minimal JavaScript load on dev.to, we had gotten lazy with our optimization. Our vendor.js file, which includes all the code from our external libraries, had ballooned to 210kb. The total size of the JavaScript we deliver had gotten up to about 250-300kb depending on context.

An exploration of an animated interactive landscape built with three.js. Today we are going to explore a playful animated landscape with a psychedelic look. The idea is to show how an experimentation on art and design with a generative process can lead to interesting interactive visuals which can be used in a variety of mediums like web, print, illustration, VJing, installations, games and many ot

Just wanted to leave this here for people who are interested. "DRY is about Knowledge, Code duplication is not the issue." verraes.net/2014/08/dry-is-about-k... single, unambiguous, authoritative representation A "single" representation leaves a lot to be desired. From the view of a devops engineer, a single representation might be an entire application they need to deploy. To a frontend dev, that

This post was originally posted in May 2018 by Pedro Rolo and updated in May 2020 by André Santos. When one thinks about ReasonML, the fact that it's backed by Facebook, does not tell it all. It's a technology that evolved over the last couple of years with a lot of potential, not only due to the influence of JavaScript tools, but also on a compiler to native code perspective. In this article, I’l

配列とかおれおれAdvent Calendar2018 – 19日目 ここまで何度か出てきた反復可能 (iterable) と反復子 (iterator) のお話です。やっと。 先にまとめ Iterableオブジェクトは Iteratorを返すメソッド [Symbol.iterator] を持つ for-of で使える Iteratorオブジェクトは IteratorResultを返すメソッド next() を持つ IteratorResultオブジェクトは プロパティ done, value を持つ 配列は Iterableである Iteratorではない arr.values() は Iterableである Iteratorである Generatorオブジェクトは Iterableであり、かつIteratorである Generator関数は function*(){} のやつ Gene

今日は開発中に見つけたruby/railsのマイナーだけど便利?なメソッドを紹介しようと思います。 開発中に「これ聞いたことないなー、どこで定義されてるんだろう」と思ってプロジェクト内を調べるもどこにも定義されていなかったものたちやなんかの技術ブログでたまたま見つけたものたちです。 deep_symbolize_keys ハッシュのkeyを階層を問わず、全てをシンボルに変えてくれるメソッドです [1] pry(main)> { 'hoge' => 1, 'fuga' => 2, 'foo' => { 'bar' => 3 } }.deep_symbolize_keys # => {:hoge=>1, :fuga=>2, :foo=>{:bar=>3}}

A few years ago, I wrote about how we can use css to style broken images. The technique leveraged on the fact that any styling to the ::before or ::after pseudo-elements on the <img> element will only be applied if the image doesn’t load. So, we could style those elements and they would only display if the image was broken. Here’s an example of how I’ve styled broken images on this site: There are

UPDATE: Some people have pointed out some genuinely great use cases for this property which I've listed at the end of the article. I still stand by all the points I made against the use cases I pointed out in this article, but I now believe there are some good reasons to use pointer-events for HTML elements! The pointer-events CSS property controls if and how elements can be targeted by pointer in

Research By: Yoav Alon, Netanel Ben-Simon Introduction The year 2017 was an inflection point in the vulnerability landscape. The number of new vulnerabilities reported that year was around 14,000, which is over twice the number from the year before (see table below). The probable reason for this is the increased popularity of automatic vulnerability finding tools, also known as “fuzzers”. The mere

はじめに みなさん、npmでパッケージ公開してますか？ 自分はこれまでいくつか公開したんですが、ここ最近「モダンに使ってもらうために何をパッケージングして配布すべきか」を見つめ直したので、自分なりの結論を語らせていただきたいと思います。 CommonJSのモジュール Node.js環境でモジュールとして使用されるために、CommonJS形式で実装したモジュールは現状必須かなと思います。 CommonJSモジュールをpackage.jsonのmainフィールドに設定すると、require("パッケージ名")で利用可能になります。 配布例 CommonJS形式で定数hogeをexport