Google推奨「JSON-LD」で構造化マークアップ - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
フロントエンドの制作者が、HTML, CSS, JavaScriptでWebページのパフォーマンスを改善するためのテクニックを磨ける良書 | コリス
Webサイトやアプリを制作する際、パフォーマンスは重要なポイントの一つです。ページが早く表示されることは、それだけでユーザーの満足度に繋がり、Googleにおいても非常に重要な項目に挙げられています。 ページを表示するブラウザのレンダリングの仕組み、HTML, CSS, JavaScriptをどのように改善すべきか、フロントエンドの制作者がチューニングを基礎からくわしく学べるオススメの本を紹介します。 本書は中・上級者向けの解説書で、既にフロントエンド制作者としてのスキルを備えている人を対象したものです。 HTMLやCSSやJavaScriptの使い方を基礎から解説したものではなく、パフォーマンス面において基礎から徹底的に解説されてします。
Reactのサーバサイドレンダリングとパフォーマンスについてのメモ - Qiita
Reactのサーバサイドレンダリングとパフォーマンスについて調べてたのでメモ 基本的なこと サーバサイドとReactのproduction build 要約: Reactをサーバサイドで使うときも、クライアントサイドのように圧縮(というよりはcode eliminate)しないと遅い Reactはdev向けのコードを大量に含んでいる。 これはprocess.env.NODE_ENV !== 'production'の時実行されるassertや警告などが主となりproductionには必要ない。 そのため、process.env.NODE_ENV = 'production'をしないとかなり不利な結果を得る。 I tend to agree that "compiling server side code with webpack to remove access to process" i
Railsフロントエンド技術の今とこれから
待望されたYarnサポートの入ったRails5.1が2017年4月にリリースされました。 Ruby on Rails 5.1 Release Notes — Ruby on Rails Guides 他にもjQueryがデフォルトdependencyから外されたり、Optionalでwebpackサポートが入ったりしており、Railsのフロントエンドは大きな転換点を迎えたと言ってよいでしょう。本エントリではRailsのフロントエンド技術の今を振り返り、今後どうなっていくかをまとめてみたいと思います。 DisられてきたRailsフロントエンド Railsのフロントエンド技術スタックは、フロントエンドを専業とするエンジニアにDisられるものでした。具体的には下記の技術要素です。 jQueryCoffeeScriptAssets Pipeline (sprockets)gemのエコシステムに乗っ
結局VanillaJSである。 - nobkzのブログ
anond.hatelabo.jp nida3001.hatenablog.com 上記のブログに刺激されて私もフロントエンドというかJavaScriptに対する思いを綴ったポエムをば。しかし、なんか書くのダルいので、大分大雑把にかくぞ。 さて、さっそく結論を述べよう。今のフレームワーク論争やらに対する解決策はVanillaJSを使うってことである。 フロントエンドSPAのフレームワークについて まず、今のほとんどのフレームワークが使えないってのはそのとおりである。その話してみよう。その理由は、「フロントエンド」 ってのは一括りにできないからである。「ハッカーと画家」のとある言葉をアレンジして言えば「フロントエンドはユーラシア大陸のようなものである」。フロントエンドが関わる範囲が大きすぎるのである。ヨーロッパもあればアジアもあれば中東もあるという感じである。 範囲が大きすぎて、フレームワー
そろそろWebpackと真剣に向き合ってみる
We Are JavaScripters! @6th【初心者登壇歓迎！LT大会】で使用した資料です。 https://wajs.connpass.com/event/54667/
Prepack · Partial evaluator for JavaScript
*Prepack is still in an early development stage and not ready for production use just yet. Please try it out, give feedback, and help fix bugs. What does it do? Prepack is a tool that optimizes JavaScript source code: Computations that can be done at compile-time instead of run-time get eliminated. Prepack replaces the global code of a JavaScript bundle with equivalent code that is a simple sequen
javascriptでfunction()を省略して書く 〜 アロー関数 〜 - イノベートな非日常
function って書くの冗長だなと思っていたら、いつの間にか実装されていた。 chrome拡張の開発だったら、chromeが常に最新版に更新されるし、chrome以外のことを 考える必要ないので、使ってもいいんじゃね。 chrome拡張の開発は、最新の技術を心置きなく盛り込めるのですごく楽しい。 反面、chrome依存で実装されてない機能があるときはちょっと困る。cssのjustifyとか アロー関数が実装された - JS.next 全部これに書き換えようと思ったら、thisのスコープの扱いが違うので、注意が必要。 便利なんだけど、そのまま置き換えるとはまる。 例えば,オブジェクトのメソッド定義でアロー関数を使う場合 var obj = { a: 'test', init: function(){ console.log(this.a); } } 単純に以下のようにアロー関数に置き換え
React Conf 2017 現地レポート (1日目) - Akatsuki Hackers Lab | 株式会社アカツキ（Akatsuki Inc.)
ライブエクスペリエンス事業部 エンジニアの高松(@shimpeiws)です。 2017/3/13 ~ 14の期間で開催中のReact Conf 2017に参加するためにサンノゼに来ています。 React Conf 2017 つい数時間前に終わったばかりの1日目のレポートを現地からお送りします! 会場の様子 1日目の感想 Keynote (Tom Occhino, Jing Chen, Sebastian Markbage) 概要 Tom Occhino Jing Chen Sebastian Markbage A Cartoon Intro to Fiber (Lin Clark) 概要 メモ Next.js: Universal React Made Easy and Simple (Guillermo Rauch) 概要 メモ React + ES.next = ♥ (Ben Ileg
React Conf 2017 現地レポート (2日目) - Akatsuki Hackers Lab | 株式会社アカツキ（Akatsuki Inc.)
ライブエクスペリエンス事業部 エンジニアの高松(@shimpeiws)です。 React Conf 2017 現地レポート (1日目)に引き続き、React Conf 2017 2日目の様子をサンノゼの会場から直接お届けします!!! 1日目のセッションの録画がYouTubeにアップされていました! 1日分が1本の動画(8時間25分!)なので見るのに気合がいりますが、 昨日のレポートやスケジュールを見ながら、気になるセッションをぜひチェックしてみてください! http://conf.reactjs.org/schedule 食事 2日目の感想 Goodbye Flatland! An introduction to ReactVR and what it means for web developers (Michaela Lehr) 概要 メモ Realtime React Apps wi
他のフレームワークとの比較 - vue.js
ガイド 基本的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基本 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ
jquery クリックで内容の表示・非表示の切り替え（ボタンのテキストも入れ替え）
【この記事を読むのに必要な時間は約 11 分です。】 要素を振動させるjqueryプラグインを利用したいと思いデモページを見ていると、「toggle」でソースコードの表示、非表示を切り替えていた。 当サイトでは、ショートコードでtoggle表示できるWordPressプラグインを既に導入しているのだが、jqueryプラグインで、早速自分も利用してみたいと思った。 jQuery toggleメソッド toggleメソッドを利用して設置してみたが思うように動作しない。というのもjQuery1.9以降toggleメソッドは廃止されたとの事。それでも動かしたい場合は、「jQuery toggleの廃止と解決法」を参考にすればよい。 結論としては、「jQuery Migrate」というjqueryプラグインも追加で読み込めば使えるようだ。ホスティングも利用できるので、以下のようにjQuery本体と一
jQuery の on() と off() を理解する - tacamy--blog
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Universal JavaScript
ｼｭｯと見るwebpack2(仮)()
CORSリクエストでクレデンシャル(≒クッキー)を必要とする場合の注意点 - Qiita
自分がやってるjQueryのソースを少しでも読みやすくする書き方 - Qiita
GitHub - tinymce/tinymce: The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular
javascriptをcoffeescriptに書き換えるときは「==」演算子に気をつけるんだ！ - Qiita
脱jQueryのためにしたこと - Qiita
