フロントエンド/Node.js エンジニアの mizchi です。plaid では新しい分析エンジンのフロントエンド側の技術的な仕様を考えたり、それを実装したりしています。趣味として社内の他のプロダクトのパフォーマンスを勝手に測って、貼り付けていくこともあります。 plaid のエンジニア組織には「組」という制度があって、メインとなるプロダクト以外にも、そのテーマで会社横断で活動するグループがあ
エンジニアお茶会 2020/08/19 pastak.icon @pastak この発表のゴール 現代のウェブブラウザの目指している方向性について紹介する モダンブラウザで使える最新の面白便利APIを紹介する ちゃんと仕様に入りそうなもの(Googleの力技で…も含む) （前半の各ベンダの話はpastak.icon個人の見解を含みます） 次ではない フロントエンドなんでも相談室 前提知識のコーナー "WebAPI"とは何を指すのか、標準化について ECMAScript Ecma InternationalにてECMA-262という規格番号 ほぼLiving Standardという雰囲気もあるけど、年に1回タグが付く ES2020: ECMAScript® 2020 Language Specification 最新の様子: https://tc39.es/ecma262/ Array、Nu
こんにちは、福岡オフィスでエンジニアをしている petamoriken です。 ECMAScript と DOM API が好きで、気づいたらいつも仕様を眺めています。よろしくお願いします。 この記事では画像に関する新しい DOM API を紹介します。一般的に DOM API は二つのブラウザによる実装があれば安定していると言われていますが、プロダクトなどに採用する際には十分気をつけてください。また将来的に仕様が変更される可能性があることにも留意してください。 HTMLImageElement#decode() 明示的に画像のデコードをさせるメソッドです。Promise<void> を返します。 実は画像の load イベント完了後では画像の大きさを取得することは出来ますが、まだデコード処理はなされていません。今まで明示的にデコードさせたかったらこのようなコードを書いていたと思います。
ES modules are now available in browsers! They're in… Safari 10.1. Chrome 61. Firefox 60. Edge 16. <script type="module"> import { addTextToBody } from './utils.mjs'; addTextToBody('Modules are pretty cool.'); </script> // utils.mjs export function addTextToBody(text) { const div = document.createElement('div'); div.textContent = text; document.body.appendChild(div); } Live demo. All you need is t
フロントエンドチームの @urahiroshi です。Mercari Advent Calendar 2018 12日目を担当します。 今年の8月から12月にかけて，メルカリ・メルペイのフロントエンドチーム有志で「超速！Webページ速度改善ガイド」の社内輪読会を行いました。 この本の中で，「推測するな，計測せよ」という言葉が紹介されていますが，今回の記事は，輪読会で学んだことのまとめとして，Chrome DevToolsを用いてメルカリWebのパフォーマンス計測と簡単な分析を行ったものです。 なお，現在メルカリWebのアーキテクチャを刷新するための開発が進んでいるため，ここで計測したパフォーマンスの値は大幅に変化していく可能性が高いです。アーキテクチャの刷新後に振り返って見られる楽しみが増えることも、この記事を書いた目的の一つです。 計測方法，環境 計測はGoogle Chrome 71.
Learn how Dexecure improved website performance by 35% for theAsianparent! What is decoding Image decoding is the process of converting the encoded image back to a uncompressed bitmap which can then be rendered on the screen. This involves the exact reverse of the steps involved in encoding the image. For example, for a JPEG, it involves the following steps:- The data goes through a Huffman decodi
TypeScript + Preact + Material UI + material-table で作っている管理画面のビルドツールを Rollup から esbuild に変えたお話です。 2021/01/07 追記 esbuild に新しく CSS ローダーやプラグイン機構が実装されたので紹介記事を書きました！ esbuild の機能が足りないならプラグインを自作すればいいじゃない https://www.kabuku.co.jp/developers/create-your-own-esbuild-plugin はじめに これまでの JavaScript ビルドツールと私 以前は私も定石通り「アプリには webpack、ライブラリには Rollup」をビルドに利用していましたが、近年はアプリのビルドにも Rollup を利用することが多くなり、 webpack を利用することはな
WPTとは WPT (web-platform-tests)という、ブラウザを作っている人のためのテストスイートがある。これは、ブラウザがどう動くべきかを定義している様々なWeb標準を、各ブラウザが満たしていてるかを確認するためのテストなのだが、Webサイトを作っているWebデベロッパーが新しいWebのAPIをどう使ったらいいかを調べるときにも役立つと思う。 という話を、電車で横に座っていたとある人に話したら「じゃあ、やり方を(日本語で)紹介してくださいよ。」と言われたので、簡単に紹介したい。 手軽に試す 手軽に試したければ、https://w3c-test.org 以下にある目的のテストファイルを開くといい。 例えば、Service Worker Navigation Preloadのテストであれば https://w3c-test.org/service-workers/service
ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になります。ブラウザがページの最初のペイントを実行するために必要とするこのシーケンスは「クリティカル レンダリング パス(Critical Rendering Path)」と呼ばれます。 クリティカル レンダリング パスを理解することで、サイトのパフォーマンスを改善するのに役立ちます。 Understanding the Critical Rendering Path 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 クリティカル レンダリング パス(Critical Rendering Path)には、6つの段階があります。 クリティカル レンダリング パスの6つの段階 01. DOMツリーの構築
Goals and guidelines In the context of RAIL, the terms goals and guidelines have specific meanings: Goals. Key performance metrics related to user experience. For example, tap to paint in under 100 milliseconds. Since human perception is relatively constant, these goals are unlikely to change any time soon. Guidelines. Recommendations that help you achieve goals. These may be specific to current h
masawada castを開始する お使いのブラウザはPresentation APIに対応していないようです Presentation APIの練習をやっておきたいとは以前から思っていて、しかしHTMLをもう1個用意するのがめんどうで手が伸びていなかった。 ページめくりなどのコントロールを用意せず、動画を表示してほったらかしにするくらいならちょろっと書けば動く事に気づいたので試してみた。 突然家のテレビでmasawadaさんが表示されるのでおもしろい。PCのChromeでは動いたけど、Androidではうまく動かなかった。押しても反応しないときは動きません。 navigator.presentation.defaultRequestに代入できるのがへえというポイントで、この記事をブラウザ側のUIからキャストしても、この記事ではなくてmasawadaさんが表示される。右クリック禁止みたい
LT about periodic background sync at #remo_study
ソフトウェア作ってて，最初は一つしかない想定で作るけど，あとから複数出現することになって改修するのが大変，ということがある． 最悪サーバーサイド もう終了したサービスであったのが，ユーザーは自分のアイテムを飾れる部屋を1つ持てるという仕様だったのが，複数の部屋を切り替えられるようにして，部屋ごとに置けるアイテムのシリーズが変わって，シリーズごとにグリッドの細かさも変わるとか．とにかく大変で，全部のテーブルにあとからシリーズidを持たせたり，クラスメソッドで済んでたのをシリーズidを持つオブジェクトのメソッドにしたり，ORMのItemをRoomに渡すのをやめて，その層とは別に独立した画像合成用のItemとRoomを作ってやり取りするとか，最初からそうなってるときより大変なことになる． 最悪クライアントサイド クライアントサイドでも同じようなことはあって，HTML内に一つしか出現しない前提で作
今どきのnpmパッケージはUNPKGやPika CDNを使えば、ES Modulesとして直接import文読み込めることがあります。 たとえばPreactなら、次のようにUNPKG経由で直接モジュールをインポートできます。 <script type="module"> import { h, Component, render } from 'https://unpkg.com/preact?module'; // Create your app const app = h('h1', null, 'Hello World!'); render(app, document.body); </script> Getting Started | Preact: Fast 3kb React alternative with the same ES6 API. Components & Vir
2020/02/13 DevSumi 発表資料
Intro <form> の onsubmit をフックして、入力された値を <input> から集めて送るといった処理はよくある。 このとき、submit されたデータの収拾方法はいくつかある。 submit に限らず、そのイベントに付随する情報は、基本的にイベントオブジェクトに内包されている。 Form を例に、イベントオブジェクトを意識したコーディングについて解説する。 Form Submit Form が Submit されたことをフックして、処理を挟む場面はよくある。 HTML がこうであった場合。 <form id=login action=/login method=post> <fieldset form=login> <legend>Login</legend> <label for=username>Username</label> <input type=text n
プロジェクト推進室の服部 (@yhatt) です。 この記事は Marp 公式ブログ の記事 "The story of Marp Next" をベースに、意訳と一部加筆・修正を行ったものです。現在オープンソースで開発に取り組んでいる、次世代の Marp（通称 Marp Next）への取り組みについて、現在の状況をお伝えできればと思います。 marp.app はじめに tech.speee.jp Marp の最初のバージョンは、およそ 3 年前に個人開発の成果として公開されました。プレゼンテーションスライドライターとしての価値が認知され、 GitHub では ⭐️ 8000 over のツールに成長し、スライド作成のためのオープンソースアプリケーションとして、一定の成功を収めることができました。 多くの要望やフィードバックを Marp に頂きましたが、Marp は開発のメンテナビリティが低
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
