レトロエンジニアのための近代Webフロントエンド事情 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には
JavaScriptにフレームワークが必要な理由 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? JavaScriptにはむしろもっと抽象化がもたらされるべき - Qiitaという記事で、もう少し踏み込んだ話を書いてみました。 某所でReact.js界隈の人に聞きたいというフレームが発生したのだが、はてなブックマークでコメントしたらIDコールされたので、反論をここに書くことにした。(最近は技術系記事はQiitaにしか書いてないので)。 あくまで僕が考えるなので、JavaScript界の人達が本当はどう思っているかはわからない。そもそもJavaScriptを本格的にさわり始めたのごく最近なので、JavaScript界では異端かもしれな
jQueryで楽になる部分、楽にならない部分、顧客が本当に必要だったもの - Qiita
俺も昔はお前のような jQueryスパゲッティジェネレーターだったのだが、膝にReactを受けてしまってな… 基本的な方針 とくにライブラリ設計者において、小さなモジュールを単機能で分割する以上、ライブラリ設計者は可能な限り依存を減らすことを求められます。node環境ならdependency hellの回避のため、フロントエンド環境ならファイルサイズを減らすためです。 ライブラリ設計者ならずともコードのポータビリティを維持するため、できるだけライブラリに依存しないコードを書くのが望ましいです。 Githubみてる限り、最近書かれるJSのライブラリの多くはjQuery非依存です。ユーザーから見る限りは、jQueryElement渡すかHTMLElement使うかぐらいの違いですけどね。 また、Angular, React等のSPAをスクラッチで設計する場合、気づいたらjQueryを使っていな
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
jQuery animiteを無駄に繰り返させない方法。animate停止中の要素のみ実行。 | Stronghold Archive
jQuery animiteを無駄に繰り返させない方法です。 animateは結構便利なので使いがちですが 落とし穴もあります。。。 ホバーやクリックを繰り返したら繰り返した分だけアニメーションが実行されたり またscrolltoであっちに行ったりこっちに行ったり…挙動がおかしかったり。 そんな時に役に立つのが animate停止中の要素のみ取り出す$(this).not(“:animated”)の記述です。 例 <script type="text/javascript"> $(document).ready(function(){ $("ul.example li a").hover( function () { $(this).not(":animated").animate({"opacity":"1"},"slow"); }, function () { $(this).anim
Raphaël―JavaScript Library
The most popular coding language for the web is javascript; so much so that since the advent of HTML5, it has now been officially accepted as the default standard. Javascript has moved beyond a smaller client-side browser-based language to become integrated not just for front-end design, but also for back-end server-side development. As a result there are has been a huge growth of Javascript libra
jQuery.stopのjumpToEnd引数が便利すぎてやばい（JavaScript Advent Calendar 2010 5日目） - KAYAC Engineers' Blog
JavaScript Advent Calendar 20105日目のago（@kyo_ago）です。 jQueryのソースを眺めててjQuery.stopに引数があることに気づいたので調べてみました。 まず、簡単なスライドダウンメニューを作ってみたいと思います。 jQuery.stop 1 - jsdo.it - share JavaScript, HTML5 and CSS JS部分は以下の通りです。 $(function () { $('div').hover(function () { $(this).find('ul').slideDown(); }, function () { $(this).find('ul').slideUp(); }); }); 少し触ると分かると思いますが、マウスがmenuから外れた後も何度も.slideDown、.slideUpが実行されるため非常に
2015年総まとめ、jQueryのプラグインとスクリプト100選
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
Turbolinksをオフしないためにやった事 - Qiita
fetchReplacement失敗時は再度レンダリングされ, landingの状態になる。 よく出てくるおまじない $(document).on 'ready page:load', -> これはjqueryが提供する'ready'とTurbolinksが提供する'page:load'の両方で定義すること。 非Turbolinks遷移時は'ready'で発火。 Turbolinks遷移時は'page:load'で発火の両方をカバーするという意味。 Turbolinksをサポートしていないブラウザでも'ready'が発火するので安心。 jquery-turbolinks gem 'ready'triggerにpage:loadを追加してくれる機能を提供。 Trigger tips 通常、page:changeでaddEventListenerしてはいけない。 fetchHistoryの際に
jQueryのDeferredを用いたモダンなAjax処理の書き方
目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes
JSのグラフライブラリを今選ぶならHighchartsで決まり（2020年版） - Qiita
トレンド（世界）：すべての国/過去12か月/基準としたキーワードを外さずに数値を取得 トレンド（日本）：日本/過去12か月/基準としたキーワードを外さずに数値を取得 #Highcharts 公式サイト：Interactive JavaScript charts for your webpage | Highcharts デモサイト：Demos / Stock Demos / Maps Demos / Gantt Demos GitHub：https://github.com/highcharts/highcharts npm：https://www.npmjs.com/package/highcharts CDN：https://code.highcharts.com/highcharts.js ライセンス：商用利用は有償、非営利向け無料ライセンスあり（詳細後述） 推薦しておきながら入門記
jqPlot - jQuery プラグイン
リファレンス jQuery の jqPlot プラグイン 導入方法や基本的使い方について。 jQuery の jqPlot プラグインのオプション オプションについて。 jqplot.barRenderer.js 棒グラフを生成するのに必要なプラグイン。 jqplot.blockRenderer.js ブロックチャートを生成するのに必要なプラグイン。 jqplot.bubbleRenderer.js バブルチャートを生成するのに必要なプラグイン。 jqplot.canvasOverlay.js グラフに線を描き加えるのに必要なプラグイン。 jqplot.dateAxisRenderer.js 年月日や時刻など、軸を時間軸として扱う際に必要なプラグイン。 jqplot.donutRenderer.js ドーナツグラフを生成するのに必要なプラグイン。 jqplot.dragable.js 系列
Highstockスゴイ！日本語化もしてみた。 - アーキテクチャをスマートに。
Yahooファイナンスなんかでよく見られる、株価のチャートを表示する必要があったので、jQueryプラグインで使いやすいのがないか探してたのですが、すごいクールなのが見つかったので紹介。 （あと自分の備忘録も兼ねた記録です） Highstockってなんだ？ グラフ描画のための「Highcharts」というjQueryプラグインがあるのですが、それをさらに株価チャート向けバージョンが「Highstock」という位置づけのようです。 すぐに試せるデモサイトがあるので、一度見てみると、、、スゴイです！ http://www.highcharts.com/stock/demo/ 見た目もかっこよくて、カスタマイズもいろいろ出来て、IE6でもOK（試してないけど）、使い方もわかりやすそう！ Very Cool !!! ってなわけで使ってみました。 使い方は、ググればいろいろ情報が出てくるのでそれだけ
Rails3.1でAjaxを使う - ひげろぐ
よく理解できていなかったのでチュートリアル的に整理した。 まずはチュートリアル用のアプリを新規作成して、コントローラーを一つ作る。 rails new ajax_tutorial cd ajax_tutorial rails g controller sandbox index update_time Ajaxなフォームやリンクを作成する form_forやlink_toといったヘルパーのオプションに:remote => trueを加えるとボタンを押した時やリンクをクリックした時のリクエストが非同期リクエストになる。 app/views/sandbox/index.html.erb <h1>Sandbox#index</h1> <%= link_to('update time', {:action => 'update_time'}, :id => 'update-time-link',
Ruby on RailsのAjax処理のおさらい - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 何気に、アプリケーションで取り扱うデータ量が増えた場合や、大容量データをデータベースとやり取りする時なんかは、Ajaxを使ってデータ通信をバックエンド側に押しやることで、WEBフロント側のUXからパフォーマンスの悪さを改善できたりする。また、ネットワーク経路的にproxyサーバとかを中継するような環境間でデータのやり取りをする場合などに、proxy側で接続時間にリミットがかけてあったりすると、通常アクセスではデータ通信時間がリミットに達して503エラーとかになってしまうような処理でもAjaxで通信をバックエンド化することで、回避できたり
twitter typeaheadはいろいろ改良されていた - Qiita
Bootstrap内にもauto complete機能としてtypeaheadがあるが、日本語の扱いに難があるみたい。 Bootstrap Typeaheadの日本語入力対応 | PLUS ARKの技術メモ: [Twitter Bootstrap]typeaheadでの日本語入力問題への対策 だが、Bootstrap内とは別にtwitter制作のtypeaheadライブラリがあり、これを使用してみると日本語問題はないっぽい。しかも、機能も強化されている。 twitter/typeahead.js typeahead.js – examples そこで、いくつかサンプルを。 なお、この説明に使用しているtypeahead.jsのバージョンは0.9.3になります。 2014年2月5日現在、バージョンは0.10.0となっており、設定が違っているみたいです（コメントありがとうございました）なので、
Railsでtypeahead.jsを使ったオートコンプリート機能（入力補完機能）の実装手順
はじめに Railsアプリ内の入力フォームでユーザの入力に合わせた候補を表示するオートコンプリート機能をTwitter社が提供しているtypeahead.jsを使って実装したのでその手順をメモしておきます。 やりたいこと 以下のgifのように、ユーザがフォームで入力を行った時に、その入力内容に合わせた候補を自動で表示するというオートコンプリート機能を実装します。以下のようにNameのテキストフィールドではNameの候補を表示し、EmailのテキストフィールドではEmailの候補を表示できるようにします。なお、以下の例では新規ユーザ作成フォームでの名前とE-mailの入力に対してオートコンプリート機能を実装した例になりますが、これ自体は実用上はなんの意味もないです。 このような機能をお手軽に実装するのにtypeahead.jsというライブラリをTwitter社が提供しているので、これを使いま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]アニメーションを使った快適操作がすごい！レスポンシブ対応のフリップコンテンツを実装する軽量スクリプト -jQuery Flipster![[JS]アニメーションを使った快適操作がすごい！レスポンシブ対応のフリップコンテンツを実装する軽量スクリプト -jQuery Flipster](https://cdn-ak-scissors.b.st-hatena.com/image/square/17e1a288172e3bbd2f08f4fe530b95a86e66a99f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016011505.gif)
アニメーションを作成するときは必ずstop()を付けましょう | WebChokoTips – ウェブチョコチップス
http://javascript-demo.e1blue.co/category/89