Using JavaScript modules on the web | Web Fundamentals | Google Developers
JavaScript modules are now supported in all major browsers! Chrome: supported since version 61Firefox: supported since version 60Safari: supported since version 11Node.js: supported since version 13.2.0Babel: supported This article explains how to use JS modules, how to deploy them responsibly, and how the Chrome team is working to make modules even better in the future. What are JS modules? #JS m
Understanding the Almighty Reducer | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. I was recently mentoring someone who had trouble with the .reduce() method in JavaScript. Namely, how you get from this: const nums = [1, 2, 3] let value = 0 for (let i = 0; i < nums.length; i++) { value += nums[i] } …to this: const nums = [1, 2, 3] const value = nums.reduce((ac, next) => ac + next
Node.jsでつくるNode.js - もくじ - Qiita
はじめに 「RubyでつくるRuby ゼロから学びなおすプログラミング言語入門」(ラムダノート, Amazon) という本を手を動かしながら読んで、非常に感銘を受けました。そんなおりに PythonでつくるPythonという記事を読み、自分でもNode.jsでミニNode.js作りにチャンレンジすることにしました。 予想以上に手間取り端折った部分もありますが、なんとか最後はブートストラップまで行くことができました。 目次 ミニインタープリター編 Step1：ソースのパース ... 初めての esprima Step2：単純化 ... 抽象構文木(AST)を単純化 Step 3: +演算子を評価する ... 足し算を実行 Step 4: 四則演算で電卓を作る ... 電卓を作るところまでと、比較演算子の実装 Step 5: 変数を使う ... 変数の宣言、代入、参照 Step 6: 条件分岐
JavaScript engine fundamentals: Shapes and Inline Caches · Mathias Bynens
This article describes some key fundamentals that are common to all JavaScript engines — and not just V8, the engine the authors (Benedikt and Mathias) work on. As a JavaScript developer, having a deeper understanding of how JavaScript engines work helps you reason about the performance characteristics of your code. Note: If you prefer watching a presentation over reading articles, then enjoy the
🚀 Introducing Akita: A New State Management Pattern for Angular Applications
Every developer knows state management is difficult. Continuously keeping track of what has been updated, why, and when, can become a nightmare, especially in large applications. In the Angular world, the most popular solution is ngrx/store, which was inspired by the famous Redux model. Personally, I’m a big fan of Redux and worked a lot with ngrx; However, both as a developer and as a consultant,
Detecting autofilled fields in Javascript
One of my colleagues is transitioning to the front-end team that I used to be a part of. To prepare him mentally for his journey into front-end development, I’ve been sending him a newsletter I call Front-End Hack of the Day. I’m posting them to Medium now for the world to enjoy. When the browser autofills a form field, it adds some styling to highlight which fields it has edited. In Chrome, as yo
PhantomJSの開発が終了しリポジトリがアーカイブ化された
QtWebKitをベースにしたヘッドレスブラウザであるPhantomJSの開発が終了され、2018年6月2日にリポジトリもアーカイブされました。 ariya/phantomjs: Scriptable Headless Browser 以前にもお伝えしていましたが、PhantomJSはQtWebKitをベースにしていて安定版が利用しているバージョンも古いままでした。 また、QtWebKitの新しいバージョンへアップデートを行うベータ版も開発されていましたが、Headless Chromiumが公開されたことや個人でPhantomJSのメンテナンスを続けていくの難しいという問題もあり開発は停止していました。 2017-05-03のJS: Headless Chrome/FirefoxとPhantomJS/SlimerJS、ES modules - JSer.info 2017-09-05のJ
2018 年の tree shaking - 株式会社カブク
Discussion 1. CommonJS は tree shaking されない ※追記、修正あり すべてのモジュールバンドラーが、 import { isEqual } from 'lodash'; を tree shaking できませんでした。これは、 CommonJS は静的に解析することができない困難または不可能（2018/06/15 修正）なためです。 例えば、 ES Modules の import, export に対応する CommonJS の require、 exports は、それぞれ以下のように動的に書くことが許容されています。 require const fooOrBar = require(Math.random() < 0.5 ? 'foo' : 'bar'); exports for(const name of ['foo', 'bar']) { ex
これからpjaxを使う人に知っておいてほしいこと
連載モノとなっております。 今回より全5回に渡り、pjax（pushState + Ajax）に関する基本から使用時の注意点、トラブルシューティングやtips、果てはちょっとマニアックな内容を書き綴らせていただきます。 第1回 「これからpjaxを使う人に知っておいてほしいこと」 第2回 「How to use pjax well?」 第3回 「pjaxでのイベント処理」 第4回 「jquery-pjax」 第5回 「Barba.js」 この記事を書こうとした2016年の春頃にはReactだ、Vueだ、Web Componentsだ、Riotだ…と、これまでの高コストなDOM操作をする方法ではなく、ユーザーの操作に応じてインタラクションを返す際は、Virtual DOMを使ったりコンポーネントを取り替えるようにしろ、的なものが主流になってきていたのでpjax自体もう枯れた技術になるかな…と
How to assess loading performance in the field with Navigation Timing and Resource Timing | Articles | web.dev
Published: October 8, 2021 If you've used connection throttling in the network panel in a browser's developer tools (or Lighthouse in Chrome) to assess loading performance, you know how convenient those tools are for performance tuning. You can quickly measure the impact of performance optimizations with a consistent and stable baseline connection speed. The only problem is that this is synthetic
Beyond SPAs - alternative architectures for your PWA | Blog | Chrome for Developers
Let's talk about... architecture? I'm going to cover an important, but potentially misunderstood topic: The architecture that you use for your web app, and specifically, how your architectural decisions come into play when you're building a progressive web app. "Architecture" can sound vague, and it may not be immediately clear why this matters. Well, one way to think about architecture is to ask
David East - Simplify Web Worker code with Comlink
Workers are brilliant. A single worker can give the main thread some much needed breathing room, extending an application’s processing capacity. The application’s UI hums along whether you’re processing video, auto-tuning some audio, or generating a dank meme. But if workers are so great, why are they so under utilized? Are UI performance issues not common? That can’t be the case in a world full o
Drupal JavaScript Initiative: The Road to a Modern Administration UI | Lullabot
Resources Articles Drupal JavaScript Initiative: The Road to a Modern Administration UI It's now been over 10 years since Drupal started shipping jQuery as part of core, and although a lot of Drupal's JavaScript has evolved since then it's still based on the premise of progressive enhancement of server-side generated pages. Meanwhile, developing sites with JavaScript has made huge strides thanks t
JavaScriptのStreams APIで細切れのデータを読み書きする
近年、PCに搭載されるメモリは爆発的に増えました。16GBや32GBのメモリが搭載されているのが当たり前の時代です。性能の制限が強いスマートフォンですら4GBほど搭載していることがあります。ストレージの読み書き速度もどんどん加速し、昔では扱えなかったようなデータ量をリアルタイムで処理できます。インターネット回線も同様に大量のデータを扱えるようになりました。 しかし現実的な大きさのデータを一度に扱おうとすると、現代でもそれなりに処理時間がかかります。ユーザはレスポンスに対して敏感で、反応が0.1秒でも遅れるとストレスを感じます。しかし時間がかかるものはかかるのです。この問題は一見どうしようもないように思えます。 そこで登場するのが「データを細切れにして処理する」というコンピュータにおける万能の薬です。細切れにして逐次処理すれば、少しずつデータを処理することができ、素早いレスポンスを実現するこ
Storybook vs Styleguidist
Update Oct 2019: Storybook Docs now allows you to write Markdown/MDX to generate styleguides directly from Storybook. Take a peek if you’re on the fence about which tool to choose. If you’re looking for UI component tools chances are you’ve stumbled across Storybook and Styleguidist. On the surface, both have similar features and are used by teams around the world. It can be tough to pick the righ
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
