Storybook vs Styleguidist
JSer.infoのデータセットと統計前処理ライブラリを公開しました
JSer.infoというJavaScriptの情報サイトを7年半ほど続けています。 JSer.infoでは紹介する記事をすべてJSONのデータにして管理していて、次の記事でその記事データの処理フローについて書かれています。 JSer.infoを開始してから7年が経ちました - JSer.info 今回はこれらの今まで貯めたデータを簡単に扱うためのAPI?やライブラリをまとめました。 jser/dataset: JSer.infoのデータセットや処理ライブラリ jser/datasetにはJSer.info関係のデータやライブラリがまとめてあります。 データの種類 JSer.infoではいくつかのデータがあり、次のような分類になっています。 歴史的に経緯で、徐々にアイテムに対する情報量が増えたり欠損している部分もあるので、後述するライブラリ経由で扱ったほうが楽です。 データのライセンスはCr
実践PWA：光る電卓「Llumino PWA」の開発と技術解説 - ここぽんのーと
前回は、PWAの基礎知識について説明しました。今回は実際に制作してみたPWAに触れてもらいつつ、その内側・技術的側面について解説していきたいと思います。 今回の題材：光る電卓「Llumino（ルミノ）」2013年にiOSネイティブ版をお披露目したLluminoは、「計算をもっと楽しく」がコンセプトの電卓アプリ。当時は世界中で話題になりました。（もう5年前…！） 当時の制作過程については連載としてまとめていますので、興味がありましたらどうぞ。（👉 連載：Lluminoができるまで） 今回のチャレンジは、そんなLluminoを最新のWeb技術で再現・PWA化してみようというものです。 まずは実物を触ってみてください制作したWebアプリは https://pwa.llumino.app/ に配置しました。まずは実物を触って体感してみてください！ （昨日解禁になったばかりの「.app」ドメインだ
A Gentle Introduction to Prepack, Part 1
prepack-gentle-intro-1.md Note: When this guide is more complete, the plan is to move it into Prepack documentation. For now I put it out as a gist to gather initial feedback. A Gentle Introduction to Prepack (Part 1) If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code: Babel lets you use newer JavaScript lang
Using Lighthouse to improve page load performance | Blog | Chrome for Developers
Lighthouse is an automated tool for improving the quality of your site. You give it a URL, and it provides a list of recommendations on how to improve page performance, make pages more accessible, adhere to best practices and more. You can run it from within Chrome DevTools, as a Chrome Extension, or even as a Node module, which is useful for continuous integration. For a while now, Lighthouse has
BigInt: arbitrary-precision integers in JavaScript · V8
Show navigation BigInts are a new numeric primitive in JavaScript that can represent integers with arbitrary precision. With BigInts, you can safely store and operate on large integers even beyond the safe integer limit for Numbers. This article walks through some use cases and explains the new functionality in Chrome 67 by comparing BigInts to Numbers in JavaScript. Use cases #Arbitrary-precision
日経電子版を支える広告技術 — HACK The Nikkei
本稿では、現在の日経電子版モバイル Web（以下、日経電子版）における広告掲示の技術について解説する。 広告とサイトパフォーマンスの関係 dev.to に代表されるような「高速」と言われる Web サイトは、CDN や ServiceWorker などを駆使して表示に関して適切なチューニングを行っており、日経電子版もほぼ同じ思想の元チューニングを行っているが、一点大きな違いを挙げるとするならば、広告表示の有無が挙げられる。 現在の日経電子版では 7 タイプの広告を表示しており、うち 4 タイプは外部 DSP からの配信を行っている。 その他にも様々なサイトトラッキングのサードパーティスクリプトを導入しているが、ご存知の通りこれらはメインとして打ち出したいコンテンツとはほぼ関連性はなく、パフォーマンス観点から見れば劣化させる要因でしかない。広告が無ければもっと速く表示できるのに…と思ったこと
モバイル/オフラインでも動作するはてなブックマーク検索のPWAを作った
はてなブックマーク検索PWAというはてなブックマークでブクマしたデータをオフラインでも検索できるPWAを作りました。 サイト: https://hatebupwa.netlify.com/ ソース: https://github.com/azu/hatebupwa はてなブックマークの自分のブクマを検索できるPWAを作りました。 Service Workerに対応してるブラウザ(IOS Safari 11.3+を含む)ではオフラインでも検索できます。https://t.co/RCVkRYAFz0 モバイルはホームスクリーンアプリで、macOSはアプリ版もあります。https://t.co/5MDuyC9baN pic.twitter.com/KAc3KV690b — azu (@azu_re) April 16, 2018 使い方 使い方は特に難しい話でもないですが、次のように任意のはてな
Understanding JavaScript Proxies by Examining on-change Library
Javascript Proxies are a new addition in ES6. It’s a powerful feature that can be used for solving various problems elegantly. We are going to examine and re-create a small utility library by called on-change. The aim is to conceptually understand JavaScript Proxies, and in the process, build something so that the concepts are reinforced. I have tried to keep things as simple as possible.However,
Lazy Loading JavaScript Modules With ConditionerJS — Smashing Magazine
Linking JavaScript functionality to the DOM can be a repetitive and tedious task. In this article, Rik Schennink explains how ConditionerJS can help make websites more flexible and user-oriented. Step-by-step he’ll improve this logic, and finally, he’ll make a 1 Kilobyte jump to replacing it with Conditioner. By combining all of the following tiny changes, you can speed up page load time and more
SmooshGate FAQ | Blog | Chrome for Developers
What the smoosh happened?! A proposal for a JavaScript language feature called Array.prototype.flatten turns out to be Web-incompatible. Shipping the feature in Firefox Nightly caused at least one popular website to break. Given that the problematic code is part of the widespread MooTools library, it’s likely that many more websites are affected. (Although MooTools is not commonly used for new web
Lighter than Lightweight: How We Built the Same App Twice with Preact and Glimmer.js
Code Lighter than Lightweight: How We Built the Same App Twice with Preact and Glimmer.js The beauty of the web is that there is no “install” step. Someone, somewhere taps a link to your site, and moments later it appears instantly in front of them. At least, that’s the idea—but not all devices and networks are created equally. Sites that feel fast on a desktop computer with broadband can feel dow
Web Workers to the rescue | ra100 lab
If you have no idea what Web Workers are, go check out [Using Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) page. Let me start with a little backstory. I've created [small project](https://github.com/ra100/carshare-exporter-viz "Carshare Exporter Visualization"), that shows data from Prometheus timedata on map, and I though, there will be a lot of
Emscripting a C library to Wasm | Articles | web.dev
Sometimes you want to use a library that is only available as C or C++ code. Traditionally, this is where you give up. Well, not anymore, because now we have Emscripten and WebAssembly (or Wasm)! The toolchain I set myself the goal of working out how to compile some existing C code to Wasm. There's been some noise around LLVM's Wasm backend, so I started digging into that. While you can get simple
webpack4への簡単なマイグレーションガイド - 技術探し
トラッキング ローダー/プラグイン作者向け 変更一覧 簡単なマイグレーションガイド #0CJS(Zero-Config JS) 環境 Node4のサポートが切れました webpack-cliへの分離 ローダー/プラグインのアップデートが必要 side-effects(old: pure-module) configファイル mode loadersからrulesへ プラグイン 変更 uglifyJS extract-text-webpack-plugin その他 コード System.import() webpackInclude/webpackExcludeのサポート モジュールタイプ CJSとESMについて 前提知識 javascript/esm さいごに まだ、公式の方で作成中の段階ですので、一旦ここにまとめます。 この記事では、loader/plugin開発側の話はしません。 me
Load Third-Party JavaScript | Articles | web.dev
If you've optimized your code, but your site still loads too slowly, it's probably the fault of third-party scripts. Third-party scripts provide a variety of useful features that make the web more dynamic, interactive, and interconnected. Some of them might even be crucial to your website's function or revenue stream. But using them is risky: They can slow down your site's performance. They can ca
🌏 Hello World! Progressive Web-Blog!! ― ウェブボウズ
🔥 2022年にサイトの作りを変えまして、もう現状はこの記事の限りではありません。もしこちらの記事の実装を参照されるのであれば こちらのブランチ を参照ください。 これで何度目の挑戦でしょうか。記憶する限り、２年ぶり１０度目くらいのブログでございます。会社のパイセンの@ymotongpooさんは１２年もご自身のブログを継続されており、日々コンテンツとその作業に耐えうるだけの筋肉を増やし続けられているのを横目に、私はといえば過去に１年以上続いた書きものは日記も含めて一切なく、ブログはというと思い返してみれば2004年ごろのライブドアブログから始まり、辞めては乗り換え辞めては乗り換えを繰り返してきた挙句、最終的にはJekyllいじったあたりでさっぱり音信不通になったのが２年前。並びに、筋肉事情に関して申し上げると、最後にジムに行ったのも気づけば１年半が経っており、会員権が腐り始めている小太り
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Transform your codebase using codemods | _Nec
Working with the new CSS Typed Object Model | CSS and UI | Chrome for Developers
Utilizing HTTP2 PUSH in a Single Page Application