改めてRiot.jsをその他のFW・ライブラリと比較して客観的に評価した - Qiita
Riot.js（以下、Riot）は非常にシンプルかつ軽量で入門の敷居も低く、とても書きやすいコンポーネント指向のUIライブラリです。筆者はRiotが好きでよく使っていますが、今日はなるべく客観的にRiotがどれくらい有用なライブラリかを振り返って見たいと思います。ポエム形式、かつ長めの記事ですのでご了承ください。 ※ 筆者は下記のフレームワーク・ライブラリの中で、Backbone以外は触ってはいますが、実案件で導入したことはないため、あまり知見がありません。ですので後学のため、なにかご指摘いただけると助かります。 tl;dr tl:drと言いながらちょっと長いです…🙇 それぞれの評価 Backbone 古参のフレームワーク だいぶ枯れている 更新はバグフィックスが主で、あまり機能拡張はない Angular Google謹製 現在もっともフレームワークらしいフレームワーク TypeScri
Railsで構築しているWebサービスをjQueryベースからReactに移行する時の知見 | スペースマーケットブログ
こんにちは、エンジニアの小林です。 先日、スペースを貸し出すオーナー様向けのダッシュボード(管理画面)をリニューアルしました。 スペースマーケットはwebサーバもAPIサーバもRailsで構築しているのですが、JQueryをベースに構築していたリニューアル前の実装からReactをベースにした実装へ移行した際に得た知見を書きたいと思います。 サーバ構成 既存のサーバ構成では、webサイトはwebサーバから、アプリはAPIサーバからそれぞれデータベースを参照していました。 リニューアルに伴いwebサーバからもAPIサーバを参照する構成となります。 webサーバから別ドメインのAPIサーバにアクセスするためには CORSの設定 webサーバとAPIサーバはドメインが違うため、ReactのコードからAPIサーバにajaxリクエストが送れません。これを回避するためにCORS(Cross-Origin
あなたが知らないJavaScriptの便利すぎるショートハンド19選
日頃書いているJavaScriptをもっと短く書く方法を知っていますか？ 目からうろこ、すぐに使えるJavaScriptのショードハンドを紹介します。 JavaScriptを使うすべての開発者に向けて、私が長年かけて身につけたJavaScriptのショートハンド（短縮記法）を資料にしました。コードの違いが分かるように通常の記述方法も併記しました。 1．三項演算子 if-else文を1行に収めた短縮記法です。 通常const x = 20; let answer; if (x > 10) { answer = 'is greater'; } else { answer = 'is lesser'; } ショートハンドconst answer = x > 10 ? 'is greater' : 'is lesser'; 従来のif文を1行に収めることも可能です。 const big = x >
jQuery：jQueryを実行する時のready()の記述方法 | raining
jQueryを実行するときにready()を使用し記述しますが、省略して書くことができます。 また、jQueryの記述を$で省略することも可能です。 それぞれの書き方を下記に記載します。 ■ ready() jQueryを実行するのに必要な関数です。 DOMの読み込み完了時に関数を実行します。 ■ jQueryを$で書き換えた場合の記述方法 ・「jQuery」で記述した場合 jQuery(document).ready(function(){ // 実行する処理 }); ・「$」で記述した場合 $(document).ready(function(){ // 実行する処理 }); $で記述すれば何回もjQueryを記述する必要がないので楽でソースがきれいに見えます。 ■ ready()を省略した場合の記述方法 ・readyを使用した場合 documentが読み込まれてから実行します。 $(
Google Libraries API
Stay organized with collections Save and categorize content based on your preferences. The Google Hosted Libraries is a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries. Google works directly with the key stakeholders for each library effort and accepts the latest versions as they are released. Libraries To load a
ノンデザイナーも必見！Twitter BootStrapの特徴と導入前に確認すべき事 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちわ。アートディレクター兼2児のパパ、長岡です。 毎回子どもネタですが、最近アンパンマンを指さして「パンパーンパン」とそれっぽい発音をしている息子を見て「こいつ可愛いな」と癒されています（笑） 屈託のない笑顔と持ち前のあどけない仕草で、保育園のマダムたちをイチコロ（表現が古い？）にしているそうです。将来がちょっと心配です・・・。 さて今回は、HTML5・CSS3・jQueryを使用したフロントエンドツールの王道「Twitter Bootstrap（※ver2.3.1）」のお話。 ※この記事を書いている最中にver3.0がリリースされました！（汗）後でゆっくり触ってみたいと思います。 ▲Twitter BootStrap ver2.3.1 Web制作者なら、一度は触れたことがあることと思います。 そのまま使ってみたり、カスタマイズして使ってみたり・・・。 使い方を間違えなければ、とても
ASCIIcasts - “Episode 390 - Turbolinks”
390: Turbolinks (view original Railscast) Other translations: Written by Naomi Fujimoto Turbolinksは新規作成したRails 4のアプリケーションにデフォルトで含まれるgemです。Rails 3とも互換性があるので、既存のアプリケーションで使用することも可能です。このgemによって、ページ全体をロードすることなく、新規ページのHTMLのボディ部分をJavaScriptで置き換えることで、ユーザに対してアプリケーションの動作を速く見せることができます。今回のエピソードではRails 3アプリケーションでこのgemを試してみます。使用するアプリケーションは、複数のプロジェクトに対応したTodoリストで、各プロジェクトが複数のタスクを持つことができます。新規タスクは項目名の横に最初は「未完了」のマ
ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ
有名サイト各社のjQuery読み込みについて調べてわかった問題点
有名サイト各社を適当にピックアップしてjQueryの読み込みバージョン、記述位置、CDN利用の有無を調べたら意外なことがわかった。 2012年11月10日現在のjQueryの最新バージョンは1.8.2。しかし下図のサイトを見ての通りかなり古いバージョンを使用しているサイトが結構ある。しかし、jQueryは安易にバージョンを上げるといままで動作していた箇所が動かなくなってしまったりすることがあるので影響する範囲が広い場合はバージョンを古いままにしても大きな問題にはならない。 次にjQueryファイルの読み込み位置についてだがWebページというのは上から下の順に読み込んでいくのでjQueryファイルを読み込むscriptタグは</body>の直前にあったほうが望ましい。しかし、現在は<head>タグ内に記述するサイトが大半を占める。 最後にCDNについて。CDNはGoogle CDNを利用して
World Wide Deb
The first signs of mounts may appear in adolescence, with more severe development around 30-40 years. It is a deformity in the bone of the big toe, which deviates to the other toes and thus produces a prominent formation, in many cases being painful. It is not possible to say precisely what the cause is,…
jQuery 2.0リリース、IE8/7/6は非サポート
同バージョンより、Internet Explorer 8/7/6に非対応となるが、今後もIE 8/7/6に対応するバージョン1.xのサポートを継続して行うため、「jQuery 1.9」（および将来リリース予定の「jQuery 1.10」）を使えば、旧バージョンのブラウザでも「jQuery」を利用できる。 なお、IE 10/9でもCompatibility Viewで旧バージョンをエミュレートしている場合も影響を受けるため、IE 10/9では旧バージョンのエミュレートを使用せず、X-UA-CompatibleタグまたはHTTPヘッダの使用を推奨している。 その他の変更点としては、IE 8/7/6への対応終了にともない、ファイルサイズをバージョン1.9.1と比較して12パーセント削減した。また、12種類のモジュールから必要なものだけを選択することで、よりファイルサイズの小さなカスタムビルドの作
jQueryはJSONPの理解の妨げになるか？ - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） コンパクトで汎用的な「JSON」は、今やWebサービスの連携になくてはならない存在ですね。 各種APIもXML以上にJSON対応が必要とされていると思います。 今日はそんなJSON/JSONPと、jQueryが便利すぎて逆に困ってしまう！というお話。 JSONとは「JavaScript Object Node」の略で、 その名の通りJavaScriptのオブジェクトを表した物。 中身は勿論JavaScriptのオブジェクトリテラルです。 { "status" : "success", "content" : [ "hoge", "fuga", "foo", "bar" ] } 昨今はXMLにかわって情報をやり取りする際のフォーマットとして 頻繁に使われるようになりました。 ただ、外部サービスと通信する際に、 AjaxでJSONを
ページを半透明
Overview The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser[1]. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction. Usage is very simple; to block user activity for the page: $.bl
http://neteye.github.com/activity-indicator.html
NETEYE Activity Indicator A jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML. Features Lightweight script No images required No external CSS Resolution independent Alpha transparency Highly configurable appearance Works in all major browsers Uses feature detection Degrades gracefully Supported Browsers The plugin has been successfully tested in the following b
jQuery 1.9 日本語リファレンス | js STUDIO
このサイトについて jQueryの日本語リファレンスです。 jQueryの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 News 2013.03.13 ver1.9の内容に更新しました。 2012.12.02 jQueryの似ているAPIまとめ 2012.10.13 サイトをオープンしました。 API APIのカテゴリー分けについては、本家サイトでは1つのAPIが複数のカテゴリーに所属していますが、 このリファレンスでは分かりやすさを重視して1つのカテゴリーに絞っています。 また、一部本家サイトのカテゴリーを削り、別のカテゴリーに所属させているAPIがありますので、 予めご了承ください。 Ajax Ajaxに関する処理 Attri
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
フロントエンドJavaScriptにおける設計とテスト
今日話さないこと JavaScriptの基礎知識、jQueryの導入 気持ちいいUIやUXがうんちゃら CanvasやWebGLを使ったリッチでイケてるゲームの作り方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://demo.geekslabs.com/materialize-v1.0/form-validation.html
jQuery UI Combobox Variation · GitHub
ブートストラップスターターテンプレート