GitHub - dypsilon/frontend-dev-bookmarks: Manually curated collection of resources for frontend web developers.You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Navigation Timing APIでブラウザの処理時間を可視化するツール作った - ( ꒪⌓꒪) ゆるよろ日記
最近のブラウザでは、 Navigation Timing API ってのがサポートされていて、これを利用すればブラウザがページをロードするのに要した処理時間の内訳を知ることができる。 例えば、"DNSのlookupに要した時間"や"DOMの構築処理時間"、"onloadイベントの処理時間"などを見ることができるので、クライアントサイドのパフォーマンス計測に役立てることができる。 Navigation Timing Navigation Timing APIの仕様 #JavaScript - Qiita HTML5で Speed Test, Navigation Timing APIによる性能データ収集 - ぼちぼち日記 Navigation TimingでWebアプリの読み込み時間ログ取得 - l4l このAPIは、 window.performance.navigationオブジェクトや
Navigation Timing API
Loadtime Breakdown drag the button to bookmarks toolbar ↓ click it on any page you want to check you may also click it first here to see what it does This script uses Navigation Timing object to present timing of different phases of loading the page by a browser. It measures everything from triggering the action (hitting enter on url bar, refreshing page or clicking a link/button) to the moment wh
Navigation Timingを使ってパフォーマンス計測（Google アナリティクス） | MOL
本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系のAdvent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。もちろん、ここでのテーマは「HTML5」になります。HTML5に関することならなんでもOKです！ HTML5 Advent Calendar 2011 : ATND ども、HTML5 Advent Calendar 2011, 19日目担当のt32kでございます。今回もがんばります！ 若干、9日目の@jovi0608さんとかぶってますが、気にせずNavigation Timingを実際にどのように利用できるかについて書きたいと思います。 Navigation TimingはW3C Web Performance
CSS and jQuery 3D Items Quick View | CodyHouse
3D Items Quick View A simple 3D animation for your gallery items, to make it easy for users to discover more about your products without having to leave the page. The idea behind this resource is: if I have a gallery of products, I'm gonna pick the best image for each one of them. But what if one image is not enough? The client clicks on the product, he/she goes to the single product page, and, in
JavaScript初級者から中級者になろう — uhyohyo.net
このページの最終更新日：2019年7月4日 JavaScript。主にWebページを作るのに使われるほか、現在ではさまざまなところで活躍しているプログラミング言語です。 このページはJavaScriptの中級講座です。最新鋭ではないかもしれませんが、読み進めれば大抵のものを自分で作れるようになることでしょう。 言い訳とJavaScriptの歴史 / 問い合わせ 最近の更新2017/10/05 全ページを手直ししました。十六章第六回を追加。2017/11/9 十六章第二十一回・十六章第二十二回を追加。2017/12/2 十七章第三回・十七章第四回を追加。2017/12/3 十七章第五回・十七章第六回・十七章第七回を追加。概要コンテンツは第一篇と第二篇に分かれています。 JavaScriptは昔からWebページに動きを与えるものとして用いられてきましたが、第一篇ではそのような、昔からあるJav
食べられないほうのカリー化入門 - Qiita
『カリー化』(Currying) という概念をご存知でしょうか。"Curry" は食べ物のカレー(Curry)と同じスペルですが、ここでいう Curry はそれとは別のもので、多くのプログラミング言語に応用できるかもしれない、とても便利かもしれない概念です。 では教えてくれ。”カリー化”とはなんのことだ？ 『ふたつの引数のうち、大きい方の数を返す』という機能を持った関数 max を実装したいとしましょう。そのようなとき、大抵は次のように定義すると思います。 この関数 _max も『大きい方の数を返す』という機能を持っていますが、_max は max とは呼び出し方が少し異なります。たとえば、_max で 1 と 2 のうち大きい方を求めるには、 _max(1)(2) のように書きます。 _max が通常の max と異なるところは、関数を呼び出すときに引数をひとつづつ渡すようになっていると
Googleはなぜモバイルに力を入れるのか？これからのWebパフォーマンスで注力すべきポイント
こんにちは、川田です。Googleはここ最近、デスクトップ向けWebに対して、ほとんどの関心を失っているように見えます。HTML5ブームも過ぎて、やることがなくなってしまったのでしょうか？……いえいえ、そうでもありません。昨今の待ったなしで進む技術革新の中で、彼らは「ある問題」と戦っているようです。 Webは「モバイル」中心の時代へ移っていく すでにご存知の方も多いと思いますが、GoogleのビジネスモデルはWebに強く依存しています。2014年1Qの決算で、Googleは全売上の約68%が自社のWeb系サービスの広告収入であり、約22%はAdsenseなどの他のWebサイト向けの広告であると報告しました。Webに依存したビジネスが実に9割を占め、1日に約120億円の収入をWebから得ています。もっと簡単に言えば、Webだけで、タイの国民全員の給料分ぐらい稼いじゃってます。当然、Webの進
Load CSS or JS Files Simply & Asynchronously | Filament Group, Inc., Boston, MA
Load CSS or JS Files Simply & Asynchronously Posted by Scott Jehl 07/14/2014 Ever wonder about the simplest, fastest way to load a CSS file or a JavaScript file asynchronously? Well, we happen to think about these things a lot, and over the years we’ve been using and improving a couple of basic functions, which we call loadCSS and loadJS, that do just that. Here’s how they work, in brief. loadCSS
A Compendium of SVG Information | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. A huge pile of information about SVG. How to Use SVG These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: <img>, background-image, <svg>, <iframe>, and <object>/<embed>. Using SVG by me SVG on the Web — A
[ヅ] JavaScript で CSS Transforms するためのウェブブラウザ別 transform と transform-origin 一覧 (2011-08-25)
スタイルシート(CSS3)でDIV要素を回転して表示するサンプルを書いてみた。 JavaScript で DOM element の style プロパティ経由で transform や transformOrigin プロパティをセットしている。 ⇒ locating and transforming by JavaScript and CSS 以下のウェブブラウザで動作確認済み。 - Mozilla Firefox 6 - Google Chrome 13 - Apple Safari 5.1 - Microsoft Internet Explorer 9 - Opera 11.50 IE9 は Windows Vista 上で、それ以外は Windows XP 上で動作するのを確認。 サンプルコードの中身。 <!DOCTYPE html> <html> <head> <meta ch
CSS3 Animate It Examples - Animate Elements on Scroll
Include css3-animated.js at the end of your file and animations.css in the head. Once you have done that you can just define "animatedParent" as the parent class which is what will trigger the child class "animated" to animate whichever animation is defined, here we are using "bounceInDown". Click here to see an example of all the CSS animations. This CSS animation library utilises the lastest har
Срок регистрации домена истек
Оплатить продление необходимо до 25.01.2024, или домен освободится и станет доступен для регистрации всем желающим.
Übersicht
At a Glance Übersicht lets you run system commands and display their output on your desktop in little containers, called widgets. Widgets are written using HTML5, which means they are easy to write and customize can show data in tables, charts, graphs ... you name it can react to different screen sizes The following screenshots give you a glimpse of Übersicht in action: Support Übersicht The app i
Prefilling Forms With A Custom Bookmarklet | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Adam Lichtenstein. Adam works at Wufoo, a web app for building web forms, so you can imagine the need for testing forms is at least double what the rest of us need. Adam took a different road than I took, so I’ll let him share. Like most devs, I spend a lot o
Smart Fixed Navigation | CodyHouse
Smart Fixed Navigation A fixed navigation that allows your users to access the menu at any time while they are experiencing your website. It's smaller than a full-width fixed header, and replaces the back-to-top button with a smarter UX solution. Web pages with a lot of content require a quick way for the user to get back to the top, where the navigation is (most of the time). Hence the old back-t
Bento - Learn to code and be a self-taught expert developer
Bento will never post information on your behalf without your permission first. By signing in and using this site, you agree to our privacy terms. Learn to code for free We curated the best tutorials from around web and created a free full stack web development curriculum by top engineers. See our free learning tracks 100+ web development topics Stop searching for the right tutorial for a specific
Scaling Down The BEM Methodology For Small Projects — Smashing Magazine
To make the right choices for your project, you need to start with a general approach, or methodology. You probably already know of BEM, one of those methodologies developed by a big company, but Maxim Shirshin decided to try BEM on a smaller scale. He wanted the same benefits that Yandex gets from BEM: code sharing, a live style guide, scalability, faster development. He is now convinced that BEM
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - sourceful/awesome-javascript: A collection of awesome browser-side JavaScript libraries, resources and shiny things.
Prefill Your Own Forms In Dev | CSS-Tricks