Animating like you just don’t care with Element.animate – Mozilla Hacks - the Web developer blog
In Firefox 48 we’re shipping the <a href="https://developer.mozilla.org/docs/Web/API/Element/animate" target="_blank"><b>Element.animate()</b></a> API — a new way to programmatically animate DOM elements using JavaScript. Let’s pause for a second — “big deal”, you might say, or “what’s all the fuss about?” After all, there are already plenty of animation libraries to choose from. In this post I wa
フロントエンドのエラーを「Sentry」で可視化！技術力の向上にも効果的な、その活用法 | SELECK [セレック]
今回のソリューション：【Sentry/セントリー】 〜エラー検知ツール「Sentry」を導入し、把握するのが難しいフロントエンドの不具合対応を高速化した事例〜 結婚式場のクチコミサイト「ウエディングパーク」を運営する、株式会社ウエディングパーク。同社は、Webサイトの表示崩れや、ちょっとした動作のバグに、気が付くのが遅れてしまうという問題を抱えていた。 Webサイトが巨大になるにつれて、ページ数が増え、テストが漏れる箇所が出てきてしまうことも多い。同じような悩みを抱えている企業も、少なくないだろう。 同社ではその問題に対して、フロントエンドのエラーを検知できるツール「Sentry（セントリー）」を導入した。JavaScriptのエラー情報だけでなく、OSやブラウザの情報も合わせることで、デバイス固有のエラーの発見も容易になったという。 Sentryにはチケット管理ツールのような一面もあり、
![フロントエンドのエラーを「Sentry」で可視化！技術力の向上にも効果的な、その活用法 | SELECK [セレック]](https://cdn-ak-scissors.b.st-hatena.com/image/square/75c85b819ace3661f52b6693a34fa1eb464d3b40/height=288;version=1;width=512/https%3A%2F%2Fdpd29bjwmgbr8.cloudfront.net%2Fwp-content%2Fuploads%2F2016%2F08%2F24124048%2Fcfb8f062-b095-47e5-bda2-615c02b8a685.jpg)
webpackを使い倒す - Thujikun blog
本エントリーJavaScript Advent Calendar 2014 7日目の記事になります。 webpackとは 概要については最近いろんな方が書いてるいるのでそちらを参考にしていただければつかめるかと。 全部のせRequireJSっぽいWebpackを使ってみた。 RequireJS等はもう古い。WebPackとは？ ようはナウいフロントエンドの依存解決ツールですね。 っていうネタで書こうと思っていたら、昨日yutaponさんが既に書いていたりするので（gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】）、いいところはパクリ参考にしつつ、もうちょっとwebpackに突っ込んだ内容を書いてみようと思います。 Options entryとoutput 簡単に試すときはentryは1ファイルだけ指定できればよいですが、実際にプロジェクトで使うとなると複
npm install electron | Electron Blog
As of Electron version 1.3.1, you can npm install electron --save-dev to install the latest precompiled version of Electron in your app. The prebuilt Electron binary If you've ever worked on an Electron app before, you've likely come across the electron-prebuilt npm package. This package is an indispensable part of nearly every Electron project. When installed, it detects your operating system and
Let Your Content Do the Talking - Fullscreen API | Blog | Chrome for Developers
Most browsers have the ability to enter a fullscreen or kiosk mode for a while now. Basically, the browser's chrome UI gets out of the way, and the content takes over. For apps installed from the Chrome Web Store, it's even been possible for users to manually configure an app to run fullscreen when it's opened from the New Tab Page. Manual fullscreen is good. Programmatic fullscreen is better! The
特定の要素を全画面(フルスクリーン)にするFullscreen API
Updated 2013.10.30 / Published 2013.10.30 HTML5のFullscreen APIは、YouTubeなど動画画面の右下にある全画面表示ボタンを押すと動画部分のみが画面いっぱいに表示されるように、特定の要素を全画面（フルスクリーン）で提供できる機能です。IEもIE11から対応しており、いよいよ本格的に使える環境が整ってきました。 Fullscreen APIの実装状況 IEIE11よりmsのベンダー識別子付きで先攻実装 ChromeChrome15よりwebkitのベンダー識別子付きで先攻実装 FirefoxFirefox10よりmozのベンダー識別子付きで先攻実装 SafariSafari5.1よりwebkitのベンダー識別子付きで先攻実装 OperaOpera12.1よりサポート Opera15よりwebkitのベンダー識別子付きで先攻実装 iO
The Service Worker Lifecycle
If you have worked with Service Workers, you may have run into some issues with previous Service Workers still being in control of a document, even though the file itself has been updated. The reason for this is to do with some nuances in the lifecycle of the Service Worker; it may be installed and valid, but not yet actually in control of the document. A Service Worker can be in one of the follow
ServiceWorker: A Basic Guide to BackgroundSync
A relevant ad will be displayed here soon. These ads help pay for my hosting. Please consider disabling your ad blocker on Pony Foo. These ads help pay for my hosting. Picture the scene. You’re using your mobile device to browse a website and book some important concert tickets. You’ve have been eagerly awaiting this concert for months. You get right through to the checkout screen, enter your card
Frontend NE
The home for all the talks from Frontend NE.New videos drop on the third Thursday of each month. 2 weeks after each event.To see what the next event will be,...
【完全日本語訳＋解説】ECMA-262 Edition 5.1を読む
最もホットなプログラミング言語の一つ「JavaScript」の仕様書「ECMA-262」の最新版「Edition 5.1」を、元SC22/ECMAScript ad hoc委員が完全翻訳+解説。 目次 訳者まえがき ・JavaScriptの歴史 ・ECMAScriptの登場 ・ECMA-262 Edition 5とは ・本書の読み方 謝辞 はじめに 第1条 適用範囲 第2条 準拠条件 第3条 引用規定 第4条 概要 第5条 表記規約 第6条 ソーステキスト 第7条 字句規約 第8条 型 第9条 型変換とテスト 第10条 実行可能コードと実行コンテキスト 第11条 式 第12条 文 第13条 関数定義 第14条 Program(プログラム) 第15条 標準の組み込みECMAScriptオブジェクト 第16条 エラー 付属文書A 文法要約 付属文書B 互換性 付属文書C ECMAScriptの
第1回 Webセキュリティのおさらい その1 | gihyo.jp
はじめに みなさんこんにちは、セキュアスカイ・テクノロジーのはせがわようすけと申します。 周知のとおり、ここ数年のブラウザの機能強化は目覚ましいものがあり、CSS3やSVGを含むHTML5ブーム以降のブラウザ内での表現力の向上や、JavaScriptエンジンの最適化による実行速度の向上は、数年前では考えられないような目を見張るものがあります。また、HTML5の仕様策定後の現在でも、WHATWGやW3Cではさまざまな議論が継続的に行われており、これまでブラウザ上に存在しなかったような多様なAPIの仕様が生み出され、各ブラウザに日々実装されています。 利用者視点だけでなく、以下のような開発者視点での需要に応えるフロントエンド開発環境の改善も、ここ数年でかつてないほど大きく進んでいます。 CoffeeScriptやTypeScriptに代表されるaltJSと呼ばれる言語処理系の登場 ES2015
Six nifty ES6 tricks
In this blog post, I show six tricks enabled by new ES6 features. At the end of each section, I point to related material in my book “Exploring ES6” (which is free to read online). Enforcing mandatory parameters via parameter default values # ES6 parameter default values are only evaluated when they are actually used. That lets you enforce that a given parameter be provided: /** * Called if a par
EventListenerOptions/explainer.md at gh-pages · WICG/EventListenerOptions
Passive event listeners are a new feature in the DOM spec that enable developers to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners. Developers can annotate touch and wheel listeners with {passive: true} to indicate that they will never invoke preventDefault. This feature shipped in Chrome 51, Firefox 49 and landed in WebKit. Ch
How to Use npm as a Build Tool
Update: I frequently get asked, considering this post is now years old, whether or not I still stand by the advice in this post, and whether new developers should use npm as a build tool. The advice still stands, and I believe developers should use npm as a build tool. Myself; I’ve been Gulp & Grunt free since 2013™. Should I ever change my stance on this, I will immediately update this post. Last
Why Javascript Development is Crazy
Published 04/11/16 by sean Follow @sfioritto Grunt/Gulp npm, require.js, browserify, es6, compilers, transpilers, jasmine mocha chai, react/angular/ember, closures, prototypes. *head explodes* Web development is fun! Javascript is ... daunting. Everything else in web development clicks for you, but when you dig into Javascript it's like you're missing some big, foundational piece of knowledge that
Web Music Documentation
Web Music とは, Web (ブラウザ) をプラットフォームにした音楽アプリケーション, あるいは, そのような Web アプリケーションを実装するために必要となる, クライアントサイドの JavaScript API の総称です. これは, 一般的な技術用語ではなく, ある種の技術マーケティング的な造語です. 具体的には, 以下のような, クライアントサイド JavaScript API の総称です. Web Audio API HTMLMediaElement (HTMLAudioElement) WebRTC Web MIDI API WebCodecs API Web Audio API, HTMLMediaElement, WebRTC に関しては, 本サイト制作開始時点の 2023 年時点で W3C recommendation となっており, モダンブラウザであれば利
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - sindresorhus/screenfull: Simple wrapper for cross-browser usage of the JavaScript Fullscreen API
sw-precache/app-shell-demo at master · GoogleChromeLabs/sw-precache
ServiceWorker for github pages.
GitHub - TalAter/awesome-service-workers: :nut_and_bolt: A collection of awesome resources for learning Service Workers
