Build a Dependency Graph Profiler in JS
Breaking our app utilities and UI components into files brings modularity to our project. This helps us keep code organized in separate, reusable files, which improves code maintainability. Each file in the module system exposes its API to the public by using the exports or export keyword. Then, we can reference them by using the require or import keyword. Any file that we import or require become
Top-level await · V8
Top-level await enables developers to use the await keyword outside of async functions. It acts like a big async function causing other modules who import them to wait before they start evaluating their body. The old behavior #When async/await was first introduced, attempting to use an await outside of an async function resulted in a SyntaxError. Many developers utilized immediately-invoked async
Fixing layout instability | Articles | web.dev
[ { "name": "", "entryType": "layout-shift", "startTime": 210.78500000294298, "duration": 0, "value": 0.0001045969445437389, "hadRecentInput": false, "lastInputTime": 0 } ] In this example there was a single very tiny shift of 0.01% at 210ms. Knowing the time and severity of the shift is useful to help narrow down what could have caused the shift. Let's turn back to WebPageTest for a lab environme
I created the exact same app in React and Vue. Here are the differences. [2019 Edition]
Having used Vue at work, I had a fairly solid understanding of it. I had, however, been curious to know what the grass was like on the other side of the fence — the grass in this scenario being React. Note: there is a new version of this article that can be found here: https://sunilsandhu.com/posts/i-created-the-exact-same-app-in-react-and-vue-2020-edition I’d read the React docs and watched a few
![I created the exact same app in React and Vue. Here are the differences. [2019 Edition]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6195a8a85540576cc54d60f39c535c47c93dd93e/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1200%2F1%2AfiKg1ve_EvCP5FIImxXNGQ.png)
Why JavaScript Tooling Sucks
JavaScript Tooling is just too hard to use, and it's not your fault. If you clicked on this title ready to agree, you are part of the problem. Don't worry, so am I. I work on JavaScript Tooling and I think my tools can be a lot better. "Let he who is without sin" and all that. If you hate-clicked on this title ready to do an Epic Takedown™ of me, don't worry, I don't 100% agree with the premise of
Handling API request race conditions in React
Many blog articles talk about loading api/async data in React apps, with componentDidMount, useEffect, Redux, Apollo… Yet, all those articles are generally optimistic, and never mention something important to consider: race conditions could happen, and your UI may end up in an inconsistent state. An image is worth a thousand words: You search for Macron, then change your mind and search for Trump,
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
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 ideas we originally weighed. We decided to implement this alternative after a security vulnerability in the Realms shim (which our original approach uses) was privately discl
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
Antoine Vastel - Bot & Fraud Detection Researcher
Hi, I'm Antoine. I hunt bad bots for a living. I’ve been working on device fingerprinting and bot detection for about ten years. I started with a PhD focused on browser fingerprinting, its impact on privacy, and its use in web security. I then moved to industry, spending five years at DataDome as VP of Research, where I worked on device fingerprinting, behavioral analysis, proxy detection, and lar
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
