A look at new (stable + experimental) Web platform APIs that we can already use nowadays.

Dynamic import() introduces a new function-like form of import that unlocks new capabilities compared to static import. This article compares the two and gives an overview of what’s new. Static import (recap) #Chrome 61 shipped with support for the ES2015 import statement within modules. Consider the following module, located at ./utils.mjs: // Default export export default () => { console.log('Hi
Browser automation revisited - meet Puppeteer I've always been more interested in back-end technologies, scalability, and security. But during the past years, I had my fair share of working on the frontend as well. These stories included testing the UI with functional tests, mostly using Selenium. When it came to that, the team usually went with Nightwatch - if you are interested in how to get sta
知り合いに聞かれて気づいたんですが、Google Chromeのv61からスクロールの取得方法が変わったっぽい。とりあえずこんなコードで取れます。 なんだこれ Chrome 60までとか未対応のやつは document.documentElement.scrollTop が常に 0 を返すので、 || で繋げてやるとどっちに対応してる環境でも動きます。 事前にUAから分岐して要素を分けて、みたいなことしてると駄目なので、こっちがおすすめです。そんなに実行コストかからんでしょ。知らんけど。 Chromeは変わったけどSafariはまだ変わってないので、対応しときましょう。 あとEdgeも document.body の方みたい。IEは document.documentElement だったのに。はしごを外されちゃったね。 scrollingElement なるものが で、ちらちら見てたら
As a new developer, finding and fixing bugs can be difficult. You may be tempted to randomly use console.log() in an attempt to get your code working correctly. Not Anymore! This article is all about debugging the correct way! You’ll learn how to use the Chrome Developer Tools to set up breakpoints and step through your code. This workflow is often a much more efficient way to find and fix bugs in
const BMParser = require('bookmark-parser'); // Read from (NETSCAPE/Firefox) bookmark HTML file BMParser.readFromHTMLFile(htmlFilePath) .then(res => { ... }); // Read from (NETSCAPE/Firefox) bookmark HTML file and export BMParser.readFromHTMLFile(htmlFilePath, exportFilePath) .then(res => { ... }); // Read from (NETSCAPE/Firefox) bookmark HTML readStream BMParser.readFromHTMLReadStream(readStream)
Implement Element.scrollIntoView for scroll-behavior: smooth. Currently in Chrome, a call to Element.scrollIntoView will calculate the amount each scroller needs to scroll to align the Element as specified and instantly set the scroll position on that scroller (going from the innermost to the outermost scroller). If Element.scrollIntoView is called with scroll-behavior: smooth, instead of scrollin
Hit that Subscribe button for more like this 👌 → #JavaScript30 Video 8 — Grab all the videos and starter code over at JavaScript30.com.
We know that scrolling responsiveness is critical to the user's engagement with a website on mobile, yet touch event listeners often cause serious scrolling performance problems. Chrome has been addressing this by allowing touch event listeners to be passive (passing the {passive: true} option to addEventListener()) and shipping the pointer events API. These are great features to drive new content
When is a click not a click? For a web developer working on a complex user interface, that's not an abstract philosophical question. If you're implementing custom mouse input behavior, it's crucial to keep user intent in mind. If a user clicks on a link with their mouse's middle button, for instance, then it's reasonable to assume that they wanted to open a new tab with that link's contents. If a
Payment Request APIという仕様の策定が進んでいるという話を聞きまして、ちょっと触ってみました。 あまりコードは書いてないですが、ここに置いてあります。 github.com https://joe-noh.github.io/payment_request_api/でも試せるようにしてあります。108円取られそうになりますが、途中で失敗して中断するようになってます。 できること ECサイトなんかで買い物をするとき、フォームにクレカ番号とか届け先とかを入力すると思いますが、あの辺の情報の入力をブラウザに丸投げできちゃいます。言葉で書くより、以下のページのスクショを眺めたほうが速いと思いますので貼っておきます。 developers.google.com ここではブラウザの画面で説明されていますが、今後はPCはもちろんもっと多様なデバイスで使えるようになって、夢が広がるねとい
// Check if site's storage has been marked as persistent if (navigator.storage && navigator.storage.persist) { const isPersisted = await navigator.storage.persisted(); console.log(`Persisted storage granted: ${isPersisted}`); } When should I ask for persistent storage? The best time to request your storage be marked as persistent is when you save critical user data, and the request should ideally
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く