Remix という 考え方
こんにちは、@kaa_a_zu です。今日(11/23)の日本時間早朝に React Router の制作者である @Ryan氏 と @Michael が着想した Remix V1.0 が正式リリースされました🎉 RemixがWebの世界に及ぼす影響は大きいと思っており、実際のコードやドキュメントを見ながら既存のフレームワークと何が異なっているのかを中心に書いた紹介記事です。(正直、魂が震えています) より具体的な使い方はドキュメントを見て、手を動かしていただくのが良いかと思います。また、既に国内でも使ってみた系の記事がいくつかあるようです。 Remixの機能には様々なものがありますが、当記事では筆者がより注目しているものについて書いていきます。Remixに興味があるけど、あまり追えていないという方に読んでいただけると嬉しいです。 ※この記事はGatsbyやNext.jsよりもRemix
フロントエンドのパフォーマンスを徹底解説！ブラウザの気持ちで理解するHTML/Javascript/CSSの話 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
パフォーマンスJavaScriptHTMLフロントエンドcssdomcssom こんにちは、羽山です。 今回はウェブシステムにおけるフロントエンドのパフォーマンスの話です。 皆様はウェブのパフォーマンスを気にしていますか？ おそらく大抵の方はSQLのチューニングやロジックの改良などをした経験があるのではないでしょうか？ しかしプログラムをチューニングしても、期待ほどはページ表示速度が改善しなかったことはありませんか？ 昨今のウェブサイトは大量のCSS/Javascriptファイルで構成されているページが大半です。例えばHTMLを100～300msほどで生成してブラウザに転送できたとしても、ページ表示が完全に完了するのに4～5秒かかるということも珍しくありません。 「なんか遅いけど沢山いろいろ読み込んでるから仕方ないな・・・」と諦めないでください。ブラウザがどのようにHTMLを解釈して、CS
![フロントエンドのパフォーマンスを徹底解説！ブラウザの気持ちで理解するHTML/Javascript/CSSの話 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6e392d4350342045b699dea4e2a6421740d16647/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2018%2F04%2Fphoto_47592_20151013_min.jpg)
NodeSchoolでJS力をアップしよう！ - Qiita
記事内容に間違いや改善等ありましたらコメント欄にてご指摘をお願いしますm(__)m NodeSchoolとは 詳細は公式サイトに書かれていますが要は無料でNodeやそれに関連する技術を学べるオープンソースのツールです。 NodeSchoolという名前なので、なにかしら Node関連のものしかない ように思われがちですが、JavaScriptのみに着目した科目（他にもNoSQL関係だったり、etc）などもあるので、「JavaScriptの勉強をしたい！」という人にもおすすめです！ 必要なもの 項目 説明 Node.jsインストールの推奨方法 Node.jsは活発に開発が進んでいるのでバージョンが結構頻繁に変わります。なのでNode.jsのバージョン管理をしてくれるツールのインストールを推奨します。（Rubyで言うrvmのような存在） 現時点（2015/10/27時点）で推奨するNode.js
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳 v0.1 documentation
この和訳について¶ この文章は Google JavaScript Style Guide を非公式に和訳したものです. 内容の正確性は保証しません. ライセンスは原文と同じく CC-By 3.0 とします. フィードバックは Issue への登録 , あるいは Kosei Moriyama (@cou929 または cou929 at gmail.com) へ直接お願いします. この和訳のリポジトリは こちら です.
Google Analyticsのコードがコピーされても動かないようにする方法
Web関係のブログをやっていると、なぜかページ内の JavaScript などがそのままコピーされて中小企業のWebサイトにペーストされ、Google Analytics に見知らぬWebサイトの URL が混じってくることがあります。 これで困っている方がいたので、自分のサイト以外に自分のサイト用の Google Analytics コードが使われても動かないようにする方法を考えてみました。 JavaScriptで、表示されているページのホスト名を取得する JavaScript では、location.hostname プロパティを使用すると、今表示しているページのホスト名（example.com など）を取得することができます。 参考: window.location – Web API インターフェイス | MDN たとえば、このページを表示している時に Chrome の開発者ツール
<script async>でJavaScriptの非同期読み込みを - fragmentary
JavaScriptファイルをスクリプトから非同期で読み込むパターンは古い、という話を目にしたのはもう半年前のこと。 言ったのはIlya Grigorik。月末のGoogle Japanでのイベント、月初のHTTP2ConferenceにくるWebパフォーマンス界のすごいひとですよ。 Script-injected "async scripts" considered harmful - igvita.com 件のパターンは、スクリプトで動的に script を生成して、そこに読み込みたいJavaScriptファイルをぶっこんで読み込むというもの。 <script> var script = document.createElement('script'); script.src = "//somehost.com/awesome-widget.js"; document.getEleme
Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH
フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？ という入門的な解説記事を書いてみました。 この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事 「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」 を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー （主に HTML や CSS を書くフロントエンドな人） さん向けに、初めて
[JS]とっても簡単な記述でアニメーションが実装できる単体のスクリプト -Move.js
Move#ease イージングは29種類用意されており、同時にアニメーションさせることもできます。 JavaScript move('#example-10 .box1').x(400).end(); move('#example-10 .box2').ease('in').x(400).end(); move('#example-10 .box3').ease('out').x(400).end(); move('#example-10 .box4').ease('in-out').x(400).end(); move('#example-10 .box5').ease('snap').x(400).end(); move('#example-10 .box6').ease('cubic-bezier(0,1,1,0)').x(400).end(); setTimeout(functio
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IEでpngを使った際に起きる不具合を防ぐプラグイン