Dive into IndexedDB
Dive into IndexedDB By Flavio Copes Feb 28, 2018 updated May 24, 2019 Learn how to use IndexedDB, the async key/value database built into browsers, to create stores, add and read data with transactions, and handle versions. Introduction to IndexedDB Create an IndexedDB Database How to create a database Adding data into a store Adding data when the store is created, initializing it Adding data when
Improving third-party web performance at The Telegraph
At The Telegraph we’re currently going through a process of rebuilding our public-facing website. This gives us the opportunity to take learnings from the existing build but also write some of the code from scratch. You can see our progress so far on pages such as Gaming and Culture. We can monitor the impact this has on metrics across usability, performance and accessibility. We’re incredibly pas
イメージで伝われ！図解JavaScriptの非同期処理 - メモを揉め
ものすごい久しぶりのブログ更新になってしまいましたが、今回はJavaScriptの非同期処理について書いてみたいと思います。 このテーマはうまく説明できない部分が毎回ちょいちょいあるのですが、こうしてまとめることで頭の中が整理されていくということもあるので、最後まで頑張りたいと思います。 前提としてブラウザの実装の詳細や仕様については分からない部分も多いため、間違っている部分もあるかもしれません。 もし、お気づきの点などありましたら、教えていただけると助かります。 目次 目次 同期と非同期の比較その1 同期的実行 非同期的実行 同期的実行 非同期的実行 同期と非同期の比較その2 同期的実行 非同期的実行 並行処理と並列処理 非同期API 非同期APIの特徴 その他の非同期API addEventListenerに渡したコールバックの同期的実行 非同期処理のユースケース コールバック Pro
WebAssembly at eBay: A Real-World Use Case
From the time it was announced, WebAssembly caused a huge buzz in the front-end world. The web community readily embraced the idea of taking code written in programming languages other than JavaScript and running that code in the browser. Above all WebAssembly consistently guarantees native speeds much faster than JavaScript. At eBay, we were no different. Our engineers were very excited about thi
SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷｜ハイクラス転職・求人情報サイト アンビ（AMBI）
こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな
Folding the DOM • Josh W. Comeau
Filed underReactoninMay 19th, 2019.May 2019.Last updatedoninSeptember 13th, 2024.Sep 2024. IntroductionIn my day-to-day life as a front-end developer, I generally treat CSS as a collection of 2D layers. Other than reordering them using z-index, I don't often move things in 3D space. And yet, for years now, browsers have bundled in a surprisingly capable 3D CSS engine! Someone even built an experim
【SSRも】Fleur − 新しいFluxフレームワーク【イケる】 - pixiv inside
みなさんこんにちは！ VRoid Hubでフロントエンドエンジニアをしている花倉ミツカ (a.k.a. ラグ)です 🙌 今回のpixiv insideはちょっとだけお仕事から離れて(ガチ)アイスブレイクです。私が1年ほど開発しているFluxフレームワーク、Fleur (フルール, @fleur/fleur)について、その設計や使い方についてご紹介させていただきます！ 目次 どういうフレームワーク？ 実際の使い方 質問 まとめ どういうフレームワーク？ pixiv Sketchで採用されている Fluxible というFluxフレームワークを参考に、「書きやすさ」と「現代的な機能の採用」の二点を重視してTypeScriptでフルスクラッチしました。（Fluxibleは私が知ってる中で一番"整っている"フレームワークだと思っています♨） Fleurの大規模なプロダクションでの採用実績はまだあ
[Web フロントエンド] 状態更新ロジックをフレームワークから独立させる - 株式会社カブク
はじめに はじめまして。 null です。最近の悩みは 2 歳半の息子が言うことを聞いてくださらないことです。 2 歳児もそうなのですが、 ソフトウェアフレームワークに振り回されてるって感じること、稀によくありませんか？？ ある程度の学習コストがかかるのは当然としても、冗長な書き方を要求されるわ、かゆいところに手が届かないわ、実データ投入したらパフォーマンス問題だらけだわ、バージョンアップしたら動かなくなるわで、あぁ私いま振り回されてるなぁ、みたいな。 「じゃあ使わなければいい」「じゃあ自分で作ればいい」という話ではなく、「必要以上には依存しない方が無難だよね」「フレームワークの外へ切り出せるところは切り出してみよう」という話をします。 続きを 3 行で 状態更新ロジックってフレームワーク非依存にできそうだよね でもフレームワークによって状態をイミュータブル（状態更新=状態オブジェクト生成
![[Web フロントエンド] 状態更新ロジックをフレームワークから独立させる - 株式会社カブク](https://cdn-ak-scissors.b.st-hatena.com/image/square/1a19f6987c32590cd24beb3c1c66dc0b7df0a00e/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fwww.kabuku.co.jp%2Fwp-content%2Fuploads%2F2019%2F05%2Fcut20_bunsin-1200x801.jpg)
Renato Athaydes
Comparing JVM alternatives to JavaScript Written on Wed, 17 Apr 2019 21:11:00 +0000 (Last updated on Sun, 21 Apr 2019 19:56:00 +0000) I am mostly a backend developer, but every now and then I need to do some frontend work. Even if just for personal use. For that reason, I’ve been following developments in the JavaScript world from a distance, but I dislike much of what I see. The thing I dislike m
A Real-World Comparison of Front-End Frameworks with Benchmarks (2019 update)
By Jacek Schae Also available in: Turkish — thanks to @erdenizZz, Portugues — thanks to @felipefialho For the third time, we are comparing Front-End frameworks by using the Real World example apps. RealWorld example app gives us: RealWorld App Something more than a “todo”. Usually “todos” don’t convey enough knowledge and perspective to actually build real applications. Standardized A project that
The perfect unit test - Jack Franklin
April 12, 2019The perfect unit testThere's a common theme I find with people who tell me that they don't find unit testing useful, and it's normally that they are writing bad tests. This is completely understandable, particularly if you're newer to unit testing. It's hard to write good tests and it takes practice to get there. All the things we're going to talk about today were learned the hard wa
A horrifying globalThis polyfill in universal JavaScript · Mathias Bynens
The globalThis proposal introduces a unified mechanism to access the global this in any JavaScript environment. It sounds like a simple thing to polyfill, but it turns out it’s pretty hard to get right. I didn’t even think it was possible until Toon blew my mind with an unexpected, creative solution. This write-up describes the difficulties with writing a proper globalThis polyfill. Such a polyfil
アメブロ2019: こえのブログでのPWA | CyberAgent Developers Blog
こえのブログは「声で書くブログ、声で聴くブログ、声で観るブログ」をコンセプトに書き手、読み手双方にバージョンアップしたブログを提供するアメブロの新機能です。 投稿者は端末に向かって喋るだけで、その音声が活字化されブログとして公開できます。閲覧者は活字化された文字を通常のブログと同じように読めるほか、音声を聴きながらでもコンテンツ消費できます。 モバイル端末、テレビ端末やスマートスピーカーなどの普及により、今後ますます増えると予想される利用形態に対して、それぞれに適した形でコンテンツを提供できるように挑戦しています。 この記事では、技術的な側面を中心にこえのブログを紹介します。 こえのブログは、文字でも音声でもコンテンツ消費できるのが特徴です。読者の方へのメッセージや質問に回答など利用法は様々です。龍玄としさんやクロちゃんさんなど著名人の方の声も聴けます。 できる限りサーバーにアクセスしない
Handlebars template injection and RCE in a Shopify app
TL;DR We found a zero-day within a JavaScript template library called handlebars and used it to get Remote Code Execution in the Shopify Return Magic app. The Story: In October 2018, Shopify organized the HackerOne event "H1-514" to which some specific researchers were invited and I was one of them. Some of the Shopify apps that were in scope included an application called "Return Magic" that woul
An Overview of JavaScript Testing in 2020
(Updated on: 21.11.2021) This guide is intended to catch you up with the most important reasoning, terms, tools, and approaches to JavaScript testing for the year 2022. It combines information from the best articles recently released (they are referenced at the bottom) and adds from my own experience. It’s a little long but whoever reads and understands this guide, can safely assume they know the
Understanding Event Emitters | CSS-Tricks
Consider, a DOM Event: const button = document.querySelector("button"); button.addEventListener("click", (event) => /* do something with the event */) We added a listener to a button click. We’ve subscribed to an event being emitted and we fire a callback when it does. Every time we click that button, that event is emitted and our callback fires with the event. There may be times you want to fire
Expo CLI and SDK web support beta – Exposition
Expo is on a mission to create the best possible end-to-end developer experiences for building and deploying apps on multiple platforms. Today we are very excited to announce experimental* web support for the Expo CLI and SDK! It is stable enough for you to start playing with it, but not quite stable enough that you should use it to deploy an important app to production quite yet. Additionally, it
ES5 to ESNext — here’s every feature added to JavaScript since 2015
I wrote this article to help you move from pre-ES6 knowledge of JavaScript and get you quickly up to speed with the most recent advancements of the language. JavaScript today is in the privileged position to be the only language that can run natively in the browser, and is highly integrated and optimized for that. The future of JavaScript is going to be brilliant. Keeping up with the changes shoul
Intro to RxJS Concepts with Vanilla JavaScript
A webinar recently inspired me that egghead.io hosted with Andre Staltz and I wanted to share what I learned. Before the webinar, I was unfamiliar with RxJS and it was the first time I was exposed to the observer pattern. Before it was broken down, Observers seemed like magic. JavaScript has multiple APIs that use callback functions that all do nearly the same thing with slight variations. Streams
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
An introduction to the MediaRecorder API