ウェブ開発 | 
   | 
   | 
ブラウザ | 
設計 | 
ニュース | 
おもしろい | 
 ウェブ開発 
      -   Webパフォーマンス: 
      
  レスポンシブデザインだけでは不十分:適応パフォーマンスが必要 
 スマートな方法で画像を使用して帯域幅を節約する 
  Webフォントパフォーマンスの詳細な分析 (Webフォントパフォーマンスの分析) 
  Webページを高速化する 
  ページのリフローにつながるプロパティとメソッドの完全なリスト (レイアウト/リフローを強制するもの) 
 -   Webアニメーション: 
      
- css-live.ruコミュニティは 、Web Animations APIに関する一連の記事の翻訳を開始しました:Web Animations APIの話 、 パート1:基本的なアニメーションの作成 、 パート2:AnimationPlayerおよびタイムライン管理
 
  SVGを使用して手描きの効果でアニメーションを作成する( SVGで Celアニメーションを作成する) 
  Google Developersのモダンアニメーションの基本 
  Ada Rose Edwards は 、London Web StandardsによるWebでのパフォーマンスをアニメーション化しました 。 
  Ana Tudorが、彼女が最も人気のある3Dデモを作成した方法について (どのように私の最もハート型のペンをライブコーディングしたか) 
 -   壮大なウェブ: 
      
- CSS / SVG / JS#4の美しいエフェクトの毎週の編集
 
  David Walsh によるCodePenの9つのクールなデモ 
  SVGを使用したマテリアルデザインのリップル効果の作成( JSおよび SVGを使用したマテリアルデザイン ) 
  SVGおよびBorder-Imageを使用したハイテクUI要素 
  CSS3およびjQueryで視差効果を使用してApple TVポスターを作成します(CSS3およびjQueryでApple TVポスター視差効果を作成します) 
 -   カンファレンス: 
      

  London Web Standardsの10本の新鮮なビデオ 
  8月22日のOdessaJSカンファレンスのビデオ 
  9月19日にエカテリンブルクで開催されたFrontTalks 2015カンファレンスの放送の録音 
 - Anachronistic Beard:サイトをどこでも動作させる新しい方法論 )( Anachronistic Beard:サイトをどこでも動作させる新しい方法論 、Bruce Lawson訳)
 
  Web Field Manual -Web開発に関する重要なプロジェクトや記事へのモデレートリンク(デザインおよびフロントエンド) 
  Bosonic-日常的なWebコンポーネントの実用的なコレクション 
  ビデオ:Gruntの使用を開始する 
  Gruntをダウンロードし、... npmをビルドツールとして使用するためのガイド) 
  アクセシビリティの観点からソース順序が重要である理由について 
  ページごとに1つの<main>のみを使用します 
  Chrome DevToolsをプロフェッショナルに使用する方法(Chrome DevToolsをプロのように使用する方法) 
 ひどいフロントエンド開発者になる方法 
  CSS 
      
  今日のCSS4機能をcssnextで使用する 
  基本に戻ります。  戻る: simuraiによるルーツの記事 
  カスタマイズHTML5進捗要素 
  ファイル入力要素のスマートなスタイル設定とカスタマイズ - 幅と最後の行の要素を左に揃えてグリッドをレイアウトする簡単な方法
 
  Adobe開発者ブログでの最終的なCSSとSVGの比較 
  CSSアニメーションをHTML5オーディオと同期します 。 ハートビートアニメーションの作成に関するレッスン(CSSアニメーションとHTML5オーディオの同期) 
  CSSを使用して高解像度の背景画像を作成する (webkit-min-device-pixel-ratioおよびmin-resolution) 
 入力不純物とSass関数の検証(Sass Mixinsと関数での入力の検証) 
  ModernizrでFlexboxを使用する 
  JavaScriptおよびCSSでApple TVアイコンを再作成する 
  Chris PearceがCSSモジュール (Elephants、The Three Code Ilities、および2か月とCSSモジュール)を使用して2か月間どのように生きたかに関する詳細な記事 
 複数のクラスベースのCSSトランジションを作成してステージングされたアニメーションを作成する 
  エンタープライズCSSフレームワークの作成 
  CSSSteal-目的のクラスからCSSを抽出するChromeの拡張機能 
  Javascript 
      - Om、cute Om:(high?)? ClojureScriptとReactを使用した機能的なフロントエンドデザイン
 - RadioJSポッドキャスト:第30号 。 Proteinチーム、Node 4.0、JSとFalcorのスタイル、BEMツールとライブラリなどへのインタビュー。
 -   新しいリリース: 
      
- ノードv4.1.0(安定) 、 ESLint v1.4.0
 
  TypeScript 1.6がReact.jsをサポートし、さらにその他のJavaScriptニュースもリリース 
 -   ES6: 
      
  ES6の詳細:プロキシ 
  ES5、ES6、ES2016、ES次:JavaScriptのバージョン管理はどうなりますか?  (ES5、ES6、ES2016、ES.Next:JavaScriptのバージョン管理はどうなっていますか?) 
  Nicolas BevacquaによるES6に関する一連の興味深い記事: ES6 Reflection 、 ES6プロキシ (ES6プロキシの詳細 )、 プロキシに関する詳細 、ES6での数値の操作の改善(ES6数値の改善)、 ES6 WeakMaps、Sets、およびWeakSets (ES6 WeakMaps、Sets、およびWeakSetsの詳細) 
  ECMAScript 6:配列のボイド (ECMAScript 6:配列の穴) 
  ECMAScript 6の __proto__( ECMAScript 6の __proto__) 
  15分のES2015の主な機能 
 -   フレームワーク 
      
  Angular 1を使用したAngular 2スタイルコンポーネントの作成(パートI) (Angular 1を使用したAngular 2スタイルコンポーネントの作成) 
  AngularからReactに移行した理由(AngularからReactに移行した理由) 
  React Nativeアプリの作成から学んだこと。  (React Nativeアプリの構築から学んだこと) 
  Webソケットを使用してReactJSで実行されるリアルタイムアプリケーションを作成する (ReactJSをWebsocketでリアルタイムにする) 
 -   プラグインとライブラリ: 
      
  lrStickyHeader-スティッキテーブルヘッダーを作成するための依存ライブラリ 
  OpenSeadragon-モバイルデバイスをサポートする純粋なJSの高解像度画像ビューア 
  HashMap.js - HashMapsを操作するための軽量ライブラリ(<500バイト) 
 -   ビデオ: 
      
  Screencast Functional JavaScript:部分的なアプリケーション 
  Picturefill.jsを使用したレスポンシブ画像(ウォッチ:Picturefill.jsを使用したレスポンシブ画像) 
  Devday.plのビデオ : Video Quo vadis、JavaScript? 
  Polymer Summit 2015のビデオ: ES6とPolymerを使用して 、Polymerでのアプリケーションのパフォーマンスを評価する 
 
  SpeckJS-コメント駆動型開発。  JavaScriptを解析して単体テストを受け取るnpmモジュール 
  JSエコシステムの神秘化 (JavaScriptエコシステムの神秘化 ) 
  あられ、バベル!  透明な君主 
  Node.jsとOpenCVを使用した顔検出アプリケーションの作成 (Node.jsとOpenCVを使用した顔検出アプリの構築) 
  アニメーション付きのフルスクリーンビデオを作成する方法 
ブラウザ
- MicrosoftはVP9コーデックサポートをEdgeに追加します
 - MozillaがFirefoxで推奨タイルを起動
 - Firefox 41は、Flashを使用せずにJavaScriptクリップボードを獲得します
 - MozillaはFirefoxでより低いバッテリー消費で動作します
 - データ保護テクノロジーを搭載したYandexブラウザー
 - Yandex Browserはロシアで2番目に人気のあるインターネットブラウザーになりました
 - あるコンピューターから別のコンピューターにブラウザーCookieを転送する方法
 
  Dev.OperaブログのOpera 32およびChrome 45のリリースに関する開発者向けの詳細 
  iOS 9の新しいSafariに関する技術的な詳細:3D Touch、新しいレスポンシブデザイン、ネイティブ統合、HTML5 API 
  モバイルChromeでフォントサイズを変更する際のステーションに関する注意 
  DetoxはChromeとFFの拡張機能で、FacebookフィードをHacker News、Designer News、Dribbbleなどのニュースに置き換えます。 
 設計 
      - Webデザインのタイムライン
 - Adobe Photoshopのテキストからのポートレート
 - Adobe Illustratorの最小限の食べ物アイコン
 
 適切なタイミングで適切なデザイン 
 デザインにおける数字の心理学 
 ロングスクロールWebデザイントレンドの調査 
 製品を殺す4つの UXミス(およびそれらの修正方法) 
  デザイナーが今日使用するツールのセット ( デザイナーが今日使用しているツール) 
  レイアウトの設計における2015年の主な傾向の説明 (2015年のトップWebデザインレイアウトの傾向の説明) 
  比較される3つのプロトタイピングツール、Principle、Flinto for Mac、およびTumult Hypeの比較) 
 世界の知識を視覚化する 
  デザイナーは...?  (デザイナーはだまされたくありませんか?) 
  カスタムスクロールバーインジケーターを使用する必要がありますか?  視線追跡のテスト結果 (カスタムスクロールインジケーターを使用する必要がありますか?視線追跡の研究) 
  創造的なチームのための創造的な演習(創造的なチームのための創造的な演習のリスト) 
  トビアス・ファン・シュナイダー、デザイナーおよび開発者に質問してください (AMA:トビアス・ファン・シュナイダー、デザイナーおよびメーカー) 
 ハンドレタリングデザインワークの10の例 
  2015年に最適なデザインを備えた24以上のアプリケーション ( 2015年の21のベストデザインアプリ) 
  UIデザインのインスピレーションをお探しですか?ここにいくつかの概念があります 
 ブラックインデザイン 
  アルバムアートの進化(パッケージの進化) 
  空 borneの設計( 空 borneの設計) 
  「ユーザー」アイコンを修正しましょう 
  Adobe Edge Web Fontsの紹介 ( Adobe Edge Web Fontsの紹介 ) 
  Hoefler&Co. Obsidianフォントの詳細  (Hoefler&Co.による黒曜石内部) 
 無料のデザイナーCookieのセレクション 
      - 無料のPSDウェブサイトテンプレート
 - ベクトル形式の無料のお菓子
 
  ビンテージベクトル画像 (30ビンテージベクトル景品ダウンロードラウンドアップ) 
  PSDウェブサイトテンプレート (25個のダウンロード可能な景品PSDウェブサイトレイアウトモックアップ) 
 ベクトルヴィンテージバッジ(景品:ベクトルヴィンテージバッジ(AI&EPS)) 
  今週のUIキット ( 今週の無料UIキット) 
  UIキット「Land.io」+ランディングページデザイン(スケッチ)(景品:「Land.io」UIキット+ランディングページデザイン(スケッチ)) 
  イラスト:36個のアイコンのセット (イラスト:36個の無料アイコン) 
  SEO関連のアイコン(36個の無料のseoアイコン) 
  今週の無料フォント集:ATZUR to Athene ( 無料フォントの週刊コレクション) 
  バルバロ-セリフレトロフォント (バルバロフォント) 
  Banthers Retro Font (Banthersフリーフォント) 
 ニュース 
      - Flash要素を持つサイトの数は4年で50%から22%に減少しました
 - GoogleはSSLv3およびRC4のサポートを終了し、HTTPS要件を増やします
 - Google:HTTPSは、2つの等しい検索結果から選択する際に優位性を提供します
 - 次のWeb:Facebookは絵文字を使用して嫌いなボタンを実装します
 - Facebookは、年末までに企業ネットワークFacebook at Workを開始します。
 - ウィキメディア財団は独自のマッピングサービスをテストしています
 - GoogleのLoonプロジェクトのバルーンが住宅の建物の中庭でクラッシュする
 - GoogleはAd Injectorsソフトウェアに戦争を宣言しました
 - ヒュンダイの元ヘッドが自動車プロジェクトGoogleを率いる
 - GoogleはYandexとの紛争の有罪判決
 - Apple、iPhoneの販売記録を更新すると約束
 - 他のAppleデバイスのディスプレイと比較したiPad Proの解像度
 - エリック・シュミットはキュレーションされたストリーミングを批判しました
 - キヤノンは、独自の仮想現実デバイスに取り組んでいます
 - NASAは4Kでテレビチャンネルを開始します
 
 おもしろい 
      - Microsoft Virtual Academy:初心者向けのオンラインプログラミングコースの選択
 - Amazonの予算タブレットは1パックあたり6個で販売されています
 - 異なるソーシャルネットワークに追加するハッシュタグの数(インフォグラフィック)
 - AmazonのCEOがケープカナベラルで再利用可能な打ち上げロケットを打ち上げる
 - デジタルエチケット:メールの添付ファイルの代わりにリンク
 - 激怒しないようにFacebookを設定する方法は?
 - Facebookに嫌いなボタンが必要な理由
 - ポルノ-進歩のエンジン、またはアダルトビデオが世界をどのように変えたか
 - ハッカーの20周年:ステレオタイプに満ちた映画がどのように未来を予測したか
 - インターネット上の情報の流れに対処し、夢中にならない方法
 - プログラミングを学んでいます:コードへの5つのゲームアプローチ
 - eSportsが世界を征服している理由と、eSportsが世界に投資する理由:eSports Conferenceの投資家レポート
 - Airbnb、BuzzFeed、LinkedIn、およびYouTubeの初期のプレゼンテーションから学べること
 
  ビデオ:WebGLを使用してiPhone 6s 製品ページに作成されたグレアのように見えます (iPhone 6s 製品ページのリアルタイムリフレクション) 
入力ミスやリンクの破損/重複をおaびします。 あなたが問題に気づいた場合-個人的なメールに書いてください、私たちはすぐにそれらを修正しようとします。
先週のダイジェスト 。
dersmollとalekskorovinが作成した資料。