テストの学習へようこそ！ | web.dev
テストの学習へようこそ！ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このコースでは、ウェブ用のテストの概要と探索について説明します。 このコースで学習する内容は次のとおりです。 テストの基礎 自動テストと手動テスト テストを実施する場所と方法 ベスト プラクティス 何をテストすべきか、誰に責任があるのか、目的そのものとしてではなく、目的を達成するために手段をテストすることを検討する方法など、テストの理念。 このコースには、学習に役立つ簡潔で実用的なサンプルコードも含まれています。 コースのスコープには、Node.js などの環境で実行される、フロントエンドの JavaScript とドキュメント モデル、バックエンドでのライブラリ テストが含まれます。テストの経験はありませんが、JavaScript の基礎知識と Node.js などに関する経験が必
Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説
ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. HTMLの解析（パース）を開始する 2. 外部リソースを取得する 3. CSSを解析し、CSSOMを構築する 4. JavaScriptを実行する 5. DOMとCSSOMをマージしてレンダリングツリーを構築する 6. レイアウトとペイントを計算する はじめに 私の考えとしては、高速で信頼性の高いWebサイトを構築するには、実装中に各ステップを最適
モダンフロントエンドエンジニア勉強会を、お試し開催してみた｜erukiti
フロントエンド技術は、ある時期を境に爆発的進化を遂げて、面白く・DX（開発者体験）の良い世界に発展しています。 DXはDeveloper eXperienceの略で、2017年くらいから話題になっているようです。（正しい起源はわかりませんが、雑に検索した限りは、2017年のMediumやdev.toでの英語記事がヒットします） DXに関して日本語での記事は「DX: Developer Experience （開発体験）は重要だ」を読むとわかりやすいと思います。 ウェブ技術をやっている人の中で、バックエンド側しかまだ触ってない、JavaやRuby、PHPのような言語でしかウェブに触れてない人は多く、そういった人に、今のフロントエンド情勢ってこんな感じだよ！って知ってもらいたいという思いがあり、都内の某所にある「ラボ」でモダンフロントエンドエンジニア勉強会というのをお試しで開催してみました。
Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
web audio lesson
web audio lesson lessons lesson 01 lesson 02 lesson 03 lesson 04 lesson 05 lesson 06 quizzes lesson 01 / answer lesson 02 / answer lesson 03 / answer lesson 04 / answer lesson 05 / answer
2016-06-13のJS: jQuery 3.0、Firefox 47.0、Web Audio API入門
JSer.info #283 - jQuery 3.0が正式にリリースされました。 幾つかの非互換性が含まれていますが、jQuery 1.xや2.xからアップグレードする場合のドキュメントも公開されています。 基本的にはjQuery Migrateという移行用のプラグインを入れて、警告を修正したら本体をアップグレードする流れになっています。 jQuery Core 3.0 Upgrade Guide | jQuery 【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita また、今回のjQuery 3リリースと同時に、ajaxとeffectを取り除いたslimビルドが公開されています。 Firefox 47がリリースされました。 Widevine CDM(DRMなストリーミング)のサポート、Service Worker/Push APIのデバッグ機能の改善、 about:
Why We Need WebAssembly: An Interview with Brendan Eich
An Interview with Brendan EichBrendan Eich & Eric Elliott Discuss WebAssembly Details & Misconceptions Last week (June 17th, 2015), Brendan Eich announced a new project to bring new low level primitives to the web — a move that will make it easier to compile projects written in languages like C & C++ to run in browsers and other JavaScript environments. If this is your first time hearing about it,
サイトパフォーマンス: 1000msを目指す取組み - ワザノバ | wazanova
Guardian誌のPatrick HamannがLondon Web Performance Meetupで、モバイルサイトのパフォーマンス向上の取組みについて講演しています。 まずは、Web Performance TodayのeCommerceに関する調査で、 ユーザの期待するページ読込み時間は、2000年の8秒から、2012年には2秒を切るレベルまで下がってきている。 ことを挙げ、1秒以下を達成するには、 3Gネットワークでは、DNS Lookup / TCP Connection / HTTP Request & Responseで 600ms （Guardianのある英国ではそれ以上）はかかる。残りの400msで、Server Response TimeとClient-side Renderingを最適化する必要がある。 というGoogleのPageInsightの分析結果を紹
はてなブログにおけるページ表示速度改善の取り組みについて - Hatena Developer Blog
こんにちは、id:hakobe932です。はてなブログではユーザ体験の改善のために、ページ表示速度を向上させるための様々な取り組みを行っています。このエントリーでは、はてなブログで行っている、ブラウザキャッシュの活用、JavaScriptのページ最下部での読み込み、JavaScriptの圧縮、という3つの取り組みについて解説します。 ブラウザキャッシュの活用 同じ内容のJavaScriptやCSSを、ページを表示するたびにダウンロードすると、余分なHTTPリクエストが発生しますし、読み込み時間がかかります。 ブラウザのキャッシュを利用できれば、余分なリクエストを減らすことができます。はてなブログでは、なるべく長い間ブラウザにキャッシュを保存するために、JavaScriptなどの一部の種類のファイルのレスポンスに、以下のようなヘッダを指定しています。 $ curl -I http://hat
Ember.js - Webアプリケーションを正しく行う
この記事では、これら2つの質問に答えていきます。やらなきゃいけないことはたくさんあります。早速、はじめましょう。なお、これから構築するアプリケーションのソースコードは、 GitHub に置いてあります。 何を作るか？ シンプルなフォトアルバムアプリを構築していきましょう。ページの下部には、写真のサムネールを横に並べます。ユーザが写真を選択するとURLが更新され、選択された写真がサムネールの並びの上に表示されます。 シンプルなスライドショー機能も用意しましょう。4秒毎に次の写真に切り替えます。 最終的なアプリケーションは図1のようになります。 （クリックすると拡大） GitHubに最終的なソースコードが置いてあります。アプリケーション本体はそのsiteディレクトリにあります。アプリケーションを開始する方法にはいろいろありますが、シンプルなのは以下のやり方です。 図1 – 最終的なアプリケーシ
JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」:phpspot開発日誌
JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」 2009年10月23日- JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」というサイトを発見。 ちょっとした動作確認用のコードを書いたり、入門者の方がJavaScriptを学ぶのに非常に有用ですし、その結果も保存してサーバに置いてホスティングしてもらうことも可能。 また、比較的面倒なjQueryやjQuery UI、prototype.js 等の有名どころのフレームワークを簡単に読込めて使える機能もあります。 サイトを開くと、まず3つのタブがあって、JavaScript のタブにはJSを、HTMLのタブにはJavaScript から操作するHTMLを、Output には実行結果が出力されるようになっています。 JavaScript
Web 開発者の責任 (翻訳): Days on the Moon
John Resig 氏による A Web Developer's Responsibility という記事が素晴しかったので、著者の許可を得てここに日本語訳を掲載します。 Web 開発者の最大の負担は、ブラウザのバグと非互換性への対応に膨大な時間を費やすことであるといって間違いないでしょう。それゆえに、それらへの対応に不満をいうのは、Web 開発者全員の常となっていました。ブラウザのバグは迷惑でいらだたしく、仕事を大幅に難しくします。 ブラウザのバグはとてもいらだたしく、通常の開発における最大の負担です。ですから、開発対象のブラウザが、自身のバグを見つけ修正できるようにしてやるのは、すべての Web 開発者にとっての責任です。自分が見つけたバグに対して責任を持ち、「ほかの誰かがこれを見つけるだろう」とは思わないことで、ブラウザの進歩の速度は加速していくでしょう。 ブラウザを支援する解決策
フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント
<script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&pid=877160106″></script><noscript><a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&pid=877160106″ target=”_blank” ><img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&pid
ユーザビリティの大切さに気づいてもらう - inucaraの日記
こないだの「インターネットってどういう仕組みで動いているの？」に書いた事前研修でユーザビリティの大切さについても話したいと思って簡単なフォームを作ってみたよ。 想定ターゲットはユーザビリティのユの字も知らないような人や、これからウェブサイトの設計、構築の仕事をしようとしている人。これらの人にユーザビリティの大切さに気づいてもらうために、前回と同じように話す内容をとりあえず書いてってみる。 ちなみに前回のインターネットの仕組みからユーザビリティって話が飛んでるけど、そういうことは気にしないで思いつくことをメモ的にどんどん書いてって、流れは最後に考えようかなって感じ。 じゃあ、さっそく始める！ ユーザビリティって何？ まず始めに、みんなは「ユーザビリティ」って言葉は聞いたことあるかな？ 日本語で「使いやすさ」って意味なんだけど、利用者がいかにストレスなく、便利で簡単で直感的な操作ができるか、っ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Atom configuration for Web project (Python, JavaScript, HTML, SCSS, etc) - pl.python.org/planeta
大手Webサービスがクライアント側で発生したJavaScriptのエラーをどう収集しているのか まとめ - Qiita
GitHub - hatena/Hatena-Textbook: はてな研修用教科書
透明感のあるデザインをJavaScriptで実装する（glassbox.js） - youmos