5000人に聞いた、2018年最先端のフロントエンド開発者が使ってるツールはこれだ - Qiita
先日Launching the Front-End Tooling Survey 2018というフロントエンドツールのアンケート調査を和訳しましたが、その結果が発表されました。 以下はThe Front-End Tooling Survey 2018 - Resultsの日本語訳です。 The Front-End Tooling Survey 2018 - Results 今年3月のFront-End Tooling Surveyに、5097人のフロントエンド開発者から回答をいただきました。 参加された皆さんには感謝致します。 毎回、調査の目標は単純です。 フロントエンドエンジニアが現在仕事で使用しているツールについて光を当てたいのです。 どのようなツールが使われているのか、自分の知識や経験だけで判断してしまうのは早計です。 以下の結果は、フロントエンドツールの現在の動向を把握するのに役立
Topへ戻ろう！シンプルなスムーズスクロールJSライブラリ、jump.jsをご紹介！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
バスタオルはフワフワよりゴワゴワ派、フロントエンドエンジニアのザワです。 ウェブサイトでよく見かける動きの一つ、ボタンをクリックすると、するするっと目的の位置にスクロールする動きがありますよね。TOPへ戻るボタンや、ページ内アンカーなどが代表的に見られると思います。jQuery信仰派であった時は、animate関数を使用していたものです。今回は、jQueryを使わずに簡単に実装できるJSライブラリであるjump.jsをご紹介したいと思います。 インストール まずはライブラリをインストールしましょう！ github Demo 使い方 jump(‘.target’); え、それだけ？ はい。それだけです。 第一引数には、上に挙げた例のように、セレクタを渡す他に、ノードを渡したり、現在位置からの相対値を渡すことができます。 //node const node = document.querySe
フォームをより使いやすくするためのJavaScript/CSSツール10選
この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 10 JavaScript and CSS Tools to Enhance Your Forms フォームは多くのWebサイトにとって欠かせないものです。しかし私たちは、その細部にまでいつも気を配れるわけではありません。 フォームを改善する方法はたくさん存在します。バリデーションの追加や、マスクやその他のビジュアルガイドをインプットしたりすることが挙げられるでしょう。そしてこれは表面的な対処でしかありません。最終目標は、できる限り使いやすく魅力的なフォームにすることです。 この記事では、最適なフォームを作るための10の無料ツールを紹介します。 formbase formbaseは、CSS/SASSを使用してフォーム要素に改善されたデフォルト要素をもたらすパッケージ
jQuery 2.0を利用するために注意すること
jQuery 2.0を利用するために注意すること 4月18日にjQuery 2.0がリリースされました。これまで1.x系でバージョンアップを進めてきたjQueryでは初のメジャーバージョンアップとなります。 jQuery 2.0がjQuery 1.x系と大きく異なるのは、これまでjQueryはIEのバージョンは6以上をサポートしてきましたが、jQuery 2.0ではIE9のバージョンは9以上がサポートとなります。 誤解しないようにして欲しいのはjQuery がIE8以下を切り捨てたわけではないということ。jQuery 1.x系は今後もバージョンアップされていき、jQuery 1.x系はjQuery 2.x系と基本的には同じ機能が実装される予定です。ちなみにjQuery 1.x系の次のバージョンはjQuery 1.10です。 jQuery 1.x系とjQuery 2.x系の使い分け 追記:正
pickadate.js
There’s a tonne of options to customize the date and time pickers, such as month/year selectors, time intervals, etc. There’s also a rich API to extend the functionality of the picker. Some examples are displayed on Codepen. When using the “classic” theme, it is important to have a wrapper div with position: relative around the source input to ensure the picker is sized according to the input elem
jQuery Anti-Patterns for Performance & Compression
The document discusses various jQuery anti-patterns that can negatively impact performance and compression. It describes caching selections, using document fragments to append content outside of loops, avoiding unnecessary re-querying of elements, and leveraging event delegation with delegate() instead of binding individual handlers. The document emphasizes optimizing selector syntax from right to
jQuery 1.7 の $.Callbacks の解説 - わからん
jQuery 1.7 で導入される $.Callbacks についての "Demystifying jQuery 1.7′s $.Callbacks" と題された解説記事をみつけたので紹介します。内容を少しはしょったり、補ったりした翻訳です。元記事の著者 Addy Osmani さんは jQuery チームのメンバーとのこと。本文に出てくる jQuery.Deferrd, Pub/Sub の話題を理解するのに、次の資料に目を通しておくとよいかもしれません。 jQueryのDeferredオブジェクトについて調べてみた - AOEの日記 Script Junkie | Understanding the Publish/Subscribe Pattern for Greater JavaScript Scalability Pub/Subメッセージングモデル 元記事 AddyOsmani.c
jQueryのlive関数が超便利な件について | さくらたんどっとびーず
先日 jQueryMobile をいじくってたらいまいちよく分からなかった部分があったので jQueryMobile のソースとかサンプルをだらだら見ていたのですが、live() という関数がちょいちょい使われてたので気になって調べてみました…ら、超便利なことが判明したので生存戦略しとこうと思います。 とりあえず semooh.jp さんの日本語リファレンスによると、live 関数は未登録の DOM オブジェクトに対しても動作するイベントハンドラを登録する関数のようです。 jQuery 1.3より実装。 イベントに対してハンドラを登録します。 登録されたイベントは、現在および将来的にも、セレクタにマッチする全ての要素に適用されます。 カスタムイベントに対してbindすることも可能です。 live(type, fn) – jQuery 日本語リファレンス って、これって超便利じゃん！ って、
一日一歩 : jQueryでFormのデフォルト値を変更する方法
2010年07月20日23:23 カテゴリ開発 jQueryでFormのデフォルト値を変更する方法 今回は以下のことを書いています。 jQueryを使って、Formのデフォルト値、特にテキストタイプのデフォルト値を変更する方法。お久しぶりです。 忙しいとか、適当に理由は述べることができますが、更新を一カ月ばかりサボりました。 ここ数週間くらい、jQueryであることがうまくいかなくて、ハマっていました。 ちなみに、jQueryってご存知でしょうか？ 多分、みなさんはご存知の上で、ここに来られた方が大半だと思います。 簡単に言うと、JavaScriptであったらいいな的なものを上手にまとめた便利な道具です。 それ以上は、この記事の本質じゃないので、軽く流しておきます。 なににハマっていたのか？ それは、Formのデフォルト値を変更することです。 Formは項目を作って、ユーザーに入力させる部
pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ
pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る／進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax
cystein » jquery-railsを使ってみる
jquery全盛のこんな世の中じゃ、ってことでrails3でjqueryを使えるように設定。 とりあえずインストール gem install jquery-rails プロジェクトのGemfileの末尾に追記して、bundle gem 'jquery-rails' bundle プロジェクトで使うようにgenerate rails generate jquery:install remove public/javascripts/controls.js remove public/javascripts/dragdrop.js remove public/javascripts/effects.js remove public/javascripts/prototype.js fetching jQuery (1.4.4) create public/javascri
prototype.jsベースからjqueryベースに変更する - Ruby1.9とRails3で何か作ってみる
Railsがデフォルトで使っているJavascriptライブラリはprototype.jsとscript.aculo.usなのだが、 何となくjqueyがいいなと思って変更することにした。 ちなみに環境はWindows Vista 64bit、Ruby1.9.2p0（RubyInstallerでインストール）。 最初にRailsプロジェクトを作成するとき、 「rails new xxx -J」などと「-J」オプションを入れるとprototype.jsを入れないようだが、 そんなことはつゆ知らずとっくの昔にプロジェクトを作成してしまったので、 「RAILS_ROOT/public/javascripts」以下のファイルをごっそり手動で削除した。 ・・・いいのだろうか その後に「jquery-rails」というライブラリをgemを使って入れる。 「RAILS_ROOT/Gemfile」に以下の
jQuery for Designers - Tutorials and screencasts
Welcome to jQuery for Designers Learn how easy it is to apply web interaction using jQuery Search Search for Featured Simple use of Event Delegation Posted on 14th June 2011 — Event delegation may be some techie term that you’d rather shy away from, but if you’ve not already used it, this example will show you a simple but powerful use of event delegation. View Tutorial 16 Comments Tutorials – It’
jQuery Tutorials for Designers
This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. In case you don’t know about jQuery, it is a "write less, do more" Javascript library. It has many Ajax and Javascript features that allow you to enhance user experience and semantic coding. Since these tutorials are focused on jQuery, I’m not going to get into the detai
jQueryを使用し、キーボード操作で表示する画像を切り替える
ボタンを押すと、画像を切り替えるサンプルを作ってみました。 jQueryを使用し、表示する画像を切り替える 最終的には、漫画のビューアーにしたいので、矢印キーでページ切り替えが 行えるようにしてみます。 サンプル 矢印キーに対応したサンプルはこちら。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Image Viewer</title> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> //ブラウザの表示領域取得用 function getClientHeight(){ var client = getC
チュートリアル - jQuery JavaScript ライブラリ
", items.join("") + "") //*/ var iframe = document.createElement("iframe"); iframe.src = "index-blank.html"; iframe.width = "100%"; iframe.height = $(this).prev().attr("rel") || "125"; iframe.style.border = "none"; $(this).prev().append(iframe); $(window).load(function(){ var doc = iframe.contentDocument || iframe.contentWindow.document; source = source .replace(/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
