Techniques to make a web app load fast, even on a feature phone | Articles | web.dev
At Google I/O 2019 Mariko, Jake, and I shipped PROXX, a modern Minesweeper-clone for the web. Something that sets PROXX apart is the focus on accessibility (you can play it with a screenreader!) and the ability to run as well on a feature phone as on a high-end desktop device. Feature phones are constrained in multiple ways: Weak CPUs Weak or non-existent GPUs Small screens without touch input Ver
Practical Ways to Write Better JavaScript - Stack Overflow
In our 2019 Dev Survey, we asked what kind of content Stack Overflow users would like to see beyond questions and answers. The most popular response was “tech articles written by other developers.” So from now on we'll be regularly publishing articles from contributors. If you have an idea and would like to submit a pitch, you can email pitches@stackoverflow.com. Hey there, I'm Ryland Goldstein, a
✩ Wikipedia's JavaScript initialisation on a budget
This week saw the conclusion of a project that I've been shepherding on and off since September of last year. The goal was for the initialisation of our asynchronous JavaScript pipeline (at the time, 36 kilobytes in size) to fit within a budget of 28 KB – the size of two 14 KB bursts of Internet packets. In total, the year-long effort is saving 4.3 Terabytes a day of data bandwidth for our users'
Moving Your JavaScript Development To Bash On Windows — Smashing Magazine
Love your Bash terminal but also love your PC? Maybe you’ve had your eye on some of that new Surface hardware, but can’t make the switch without your terminal. Now you can have Windows and Bash. In this article Burke Holland will take an in-depth look at how to set up a Windows/Linux development box for JavaScript development. I’m one of those people who can’t live without their Bash terminal. Thi
X3D: Declarative 3D for the Modern Web
Introduction Modern web technologies enable developers to create clean, yet visually rich, user experiences which are widely supported as standard by all of the major browsers. So, how do you actually go about writing standards-based visualisations for the web…? And what support is there exactly for 3D graphics? Let’s start by reviewing the two main supported approaches in the HTML standard: SVG a
How to build a plugin system on the web and also sleep well at night | Figma Blog
How do you run plugins with security, stability, and performance? Our pursuit for the perfect plugin solution, and how our approach helps us run Figma plugins in a safe way. Since we published this blog post, we decided to change our sandbox implementation to an alternative approach: compiling a JavaScript VM written in C to WebAssembly. As you'll see in the blog post below, it was one of several
void in JavaScript and TypeScript
If you come from traditional, strongly typed languages you might be familiar with the concept of void: A type telling you that functions and methods return nothing when called. void exists in both JavaScript as an operator and in TypeScript as a primitive type. And in both worlds void works a little bit different than most people are used to. void in JavaScript # void in JavaScript is an operator
5 Handy Applications of JavaScript Array.from()
Any programming language has functions that go beyond the basic usage. It happens thanks to a successful design and a wide area of problems it tries to solve. One such function in JavaScript is the Array.from(): a workhorse allowing lots of useful transformations on JavaScript collections (arrays, array-like objects, iterables like string, maps, sets, etc). In this post, I will describe 5 use case
A simple homemade JavaScript obfuscator
In this post, I present how you can create your own simple JavaScript obfuscator. To illustrate our example, we will apply our obfuscator on a simple fingerprinting script. In the remaining of this post, we consider we are working in a directory with the following structure: The src/ directory will contain the source of the JavaScript files we write, while the dist/ directory will contain transpil
Creating an Object Validator in JavaScript the Test-Driven Development Way | TypeOfNaN
Creating an Object Validator in JavaScript the Test-Driven Development Way Introduction Test-Driven Development (TDD) seems like a great concept, but it’s hard to fully understand and appreciate until you see it in action. In this blog post, we’re going to implement a JavaScript object validator using TDD. A Quick Primer on Test-Driven Development TDD flips a lot of “conventional” software develop
MarkdownやAsciidoc中に書いたJavaScriptのサンプルコードをdoctestするツールを作った
技術書、ブログ、READMEを書いてていて、文章中に出てくるコードブロックのコードをテストしたいことがあると思います。 そのサンプルコードが本当に動いてるのか不安になることがあるからです。 power-doctestは、そのコードブロック中のコードにコメントを入れるだけでテスト可能にするツール群です。 power-doctestの例 具体的な例から見ていきます。 次の例では、Markdownで説明とJavaScriptのコードブロックを書いています。 デフォルト引数を使って書くことで、このような挙動は起きなくなるため安全です。 デフォルト引数では、引数が渡されなかった場合のみデフォルト値が入ります。 ```js function addPrefix(text, prefix = "デフォルト:") { return prefix + text; } // falsyな値を渡してもデフォルト
Optional chaining · V8
Long chains of property accesses in JavaScript can be error-prone, as any of them might evaluate to null or undefined (also known as “nullish” values). Checking for property existence on each step easily turns into a deeply-nested structure of if-statements or a long if-condition replicating the property access chain: // Error prone-version, could throw. const nameLength = db.user.name.length; //
Using Native JavaScript Modules in Production Today — Philip Walton
Two years ago I wrote about a technique—now commonly referred to as the module/nomodule pattern—that allows you to write ES2015+ JavaScript and then use bundlers and transpilers to generate two versions of your codebase, one with modern syntax (loaded via <script type="module">) and one with ES5 syntax (loaded via <script nomodule>). The technique allows you to ship significantly less code to modu
Puppeteerで不要なCSSを消す - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートチームの穴井（@pirosikick）です。福岡在住で、普段は福岡のweworkで働いています。他のメンバーは皆、東京に居てリモートで仕事をしていますが、モブでわいわい開発していますし、weworkが快適すぎて、毎日楽しいです！ フロントエンドエキスパートチームでは、サイボウズの各プロダクトが抱えるWebフロントエンドの課題を解決するのが仕事の一つです。 blog.cybozu.io 最近の取り組みとして、Puppeteerで不要なCSSを消した事例を紹介します。 このブログは、6/19に福岡で開催した「Google I/O '19のWebをまとめる会」で登壇したときの内容を詳細に説明しつつ、アップデートした部分もあるので、発表見たぞ、スライド見たぞという方も見ていただけますと幸いです。 speakerdeck.com きっかけ とあるプロダクトのCS
Promise.allSettled と Promise.any | blog.jxck.io
Intro Promise.allSettled() と Promise.any() の仕様策定が進んでいる。 両者は近いレイヤの仕様では有るが、作業の進捗には差がある。 Promise.allSettled は Stage 4 であり、Chrome や Safari TP には実装もされている Promise.any は Stage 2 であり、実装はまだない ここでは、これらがあると何が嬉しいのかを Promise.all(), Promise.race() の特徴を踏まえて解説する。 Promise.all()/race() Promise.all(), Promise.race() は、いずれも複数の Promise をまとめて処理する Utility Method のようなものである。 all は全ての Promise が Resolve したら Resolve し、race は
Introduction to Svelte
A few months ago, Svelte 3 was released. I tried it out, ran through their tutorial, and built a few small things. And I can honestly say that I think writing Svelte feels even faster and easier than React. Svelte gave me the same spark, the same feeling of “wow!” that I had with React. In this post I want to tell you a bit about Svelte, show you how it works with a few live example apps, and poin
Nullish Coalescing と Optional Chaining | blog.jxck.io
Intro JS における null/undefined の扱い改善するための 2 つの機能が提案されている。 Nullish Coalescing Operator (stage 3) Optional Chaining Operator (stage 3) いずれも Stage 3 に進み、実装も始まっているので、現時点での解説を行う。 Nullish Coalescing 対象が null/undefined だった場合にデフォルト値を返したいといった場合を考える。 function main(option) { option.param = option.param || 'default' } main({param : 'hello'}) しかし、この場合は null/undefined 以外にも param が 0, false, '' など falsy な値の場合も上書きさ
Getting More Out of Vue Async Components
We mainly use Vue async components to split them into their own bundle to reduce our initial bundle size, I explore how to get out more of those components. Async Component Options If you are using Nuxt, you are bound to love the asyncData feature as it allows you to fetch arbitrary data and inject them into the page component’s data. But it only works for page components, when it comes to compone
ES feature: `globalThis`
Warning: This blog post is outdated. Instead, read section “globalThis” in “Exploring JavaScript”. The ECMAScript proposal “globalThis” by Jordan Harband provides a new standard way of accessing the global object. JavaScript’s global scope # JavaScript’s variable scopes are nested and form a tree whose root is the global scope. That scope is only the direct scope when a script runs in a web brows
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A guide to JavaScript bitwise operators - LogRocket Blog