2024-02-12のJS: jQuery 4.0.0、Storybook 8 Beta、Vite 5.1(Runtime API)
JSer.info #680 - jQuery 4.0.0 Betaがリリースされました。 jQuery 4.0.0 BETA! | Official jQuery Blog IE 10以下のサポートを終了、非推奨のAPIを削除、jQuery prototypeオブジェクトからArrayメソッドを削除、focusとblurのイベント順を上書きしないように変更されています。 また、FormDataのサポート、自動的にJSONPへfallbackする挙動を削除、コードベースをAMDからESMへの移行、Trusted Typesのサポートなども含まれています。 jQuery 5では、IE 11のサポートを削除する予定となっています。 Storybook 8 Betaがリリースされました。 Storybook 8 Beta デフォルトのコンパイラをBabelからSWCに変更、モバイルUIの改善とい
GitHub - vladocar/femtoJS: femtoJS - Really small JavaScript (ES6) library for DOM manipulation.
Small JS (ES6) library for DOM manipulation. So, what is femtoJS? femtoJS is a JavaScript library for basic DOM manipulation. It has a jQuery-inspired syntax and supports chaining. femtoJS is about 100 lines of code in size, and the entire library weighs in at just under 0.9kB compressed and gzipped. It works in all the browsers that support ES6. If you need to support older browsers take a look i
一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
React.js, Vue.jsが使えない状況でメンテナンス性の高いJavaScriptを書く3つのポイント - エムスリーテックブログ
エムスリー エンジニアの岩本です。 この記事は エムスリー Advent Calendar 2018 の23日目の記事です。 React.jsやVue.jsを使えれば、開発のベストプラクティスなどがあるので、メンテナンス性の高いプログラムはずいぶんと書きやすくなったと思います。本当に仮想DOMの功績は大きいですね。 しかし、世の中にはそういったライブラリを使うことができないプロジェクトもあるわけです。古すぎて、一部分だけ最新のソースコードにすることが憚られたり、サイズの問題でライブラリを入れることができなかったり。。。 その場合どのように書けばメンテナンス性の高いプログラムを書くことができるのでしょうか。そこでIE6時代からJavaScriptをもりもりと書いている私なりのベストプラクティスを紹介します。 そもそもなぜメンテナンス性の悪いコードとなってしまうのか jQueryではセレクタで
混沌を極める jQuery のコードをいかにして Vue.js に頼らずに整理したか - Qiita
序 師走ですね。年の瀬が近づいてくると、酔っ払った元社員に絡まれることが稀によくあります。 私は jQuery から Vue.js への置き換えで何をやらかしたのか - Qiita 可能ならいきなりフロントエンドのライブラリを導入するよりも jQuery のみで MVVM パターンへ移行したほうがよかったかなぁと今になると思います。 結局のところ、jQuery で苦しんでいたのは、複雑な「状態」が表示やイベントハンドル系のコードとごっちゃになっていたから です。 うん、分かる。当時、この取組みを「大変そうだなー」と思いながら横で眺めていました。 まさか、続きを自分でやることになるとは夢にも思っていませんでしたが(｡◉ᆺ◉) ごあいさつ どうも、 @cesare と申します。 クラウドワークスでサービスの開発や運用を手がける傍ら、たまに機械学習とか VR とかに手を出して遊んでいます。 この
jQueryへの依存を外す方法 - dely engineering blog
こんにちは！dely でフロントエンドエンジニアをしている @all__user です。 この記事は dely Advent Calendar 2018 の8日目の記事です。 Qiita: https://qiita.com/advent-calendar/2018/dely Adventar: https://adventar.org/calendars/3535 昨日は、iOSエンジニアのほりぐち（ @takaoh717 ）が「iOS版クラシルの開発からリリースまでの流れ」というタイトルで投稿しました。 tech.dely.jp iOS 版 kurashiru の開発体制の遍歴がよく分かるような内容となっていますので、ぜひチェックしてみてください！ はじめに ここ一年間で Web 版 kurashiru のフロントエンドは Rails から Vue の SPA へと少しづつ置き換えられ
Redirecting…
Redirecting… Click here if you are not redirected.
Replacing jQuery With Vue.js: No Build Step Necessary — Smashing Magazine
Did you know that you can incorporate Vue into your project the same way that you would incorporate jQuery — with no build step necessary? Let’s cover some common use cases in jQuery and how we can switch them over to Vue, and why we’d even want to do so. In this article Sarah Drasner shows you that Vue is also a pretty nice abstraction for small sites that don’t need a lot of overhead. Due to Vue
jQueryを使うときに安易にアロー関数を使ってはいけない(戒め) - Panda Noir
タイトルは半分ネタですが、かなり陰湿なトラップに引っかかってしまったので記録として残します。 理由その1. thisバインドが効かない 有名なやつですね。jQueryのイベントハンドラーがthisを渡せなくなるというものです。 $('.hoge').on('click', fucntion() { $(this) // これができなくなる }); これはアロー関数が呼び出し方に関係なくレキシカルにthisを束縛してしまうためです。一応解決策は存在します。 理由その2. 予期していないreturn falseが起きる 今回問題が起きた原因です。 a要素をクリックした時、イベントハンドラーがfalseを返すとページ遷移がキャンセルされるのは聞いたことがあると思います。 $('a').on('click', function() { // ... return false; // クリックされた
A safe and modern home for JavaScript technologies | OpenJS Foundation
A safe and modern home for the webOpenJS promotes the widespread adoption and continued development of key JavaScript technologies worldwide.
GitHub - camsong/You-Dont-Need-jQuery: Examples of how to do query, style, dom, ajax, event etc like jQuery with plain javascript.
Frontend environments evolve rapidly nowadays and modern browsers have already implemented a great deal of DOM/BOM APIs which are good enough for production use. We don't have to learn jQuery from scratch for DOM manipulation or event handling. In the meantime, thanks to the spread of frontend libraries such as React, Angular and Vue, manipulating the DOM directly becomes anti-pattern, so that jQu
React+Flux can do in just 137 lines what jQuery can do in 10 | Swizec Teller
Senior Mindset BookGet promoted, earn a bigger salary, work for top companies React+Flux can do in just 137 lines what jQuery can do in 10 XKCD Automation I waste almost 15 minutes a week on an annoying little task. Every email I send to an email list gets a link that says, "Click here to share with a friend." Clicking the link opens a filled-in email message. Add an address or two, click send, an
2015-07-14のJS: jQuery 3.0αリリース、JSHintとES.next
JSer.info #236 - jQuery 3.0αがリリースされました。 jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Released | Official jQuery Blog まだα版ですが、.show()と.hide()の仕組みの変更、jQuery.DeferredがPromise/A+互換になり、2.xでdeprecatedとなっていたメソッドの削除などが行われています。 また、以前断念したrequestAnimationFrameによるアニメーションがjQuery 3.0では有効化されています。 .show()と.hide()については以前の挙動に依存したものが多そうなので、α版でどうなるかを試してフィードバックをしてみるといいかもしれません。 A Formal Commitment to New Language Fe
Plain JavaScript - Functions and Helpers
Select DOM elements by CSS selectorquerySelectorAll - a CSS selector method like the one provided by jQuery. jQuery: $(selector), $(selector, context) Select elements by class namegetElementsByClassName - a fast way of selecting DOM elements by class name in modern browsers. Does not work in IE 8 and below. jQuery: $('.foo') Select elements by tag namegetElementsByTagName - a fast and cross browse
ReactをjQueryの数行に要約する | POSTD
「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？ Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
John Resig - Annotated Version of the Original jQuery Release
Recently I was prompted by Daniel Lamb to try and find old versions of jQuery for his jQuery Archive project. Thankfully I was able to find one in the Internet Archive from just a couple weeks after its release, in January 2006. I then took that opportunity to put that code online and I used the new Genius annotation beta to mark it up with a bunch of thoughts and memories around the release of th
jQuery その先のUIアニメーション - Qiita
jQueryを使わないでアニメーションしたくはないでしょうか 別に興味ないですか。私は興味あります。 ブレイクスルーJavaScript フロントエンドエンジニアとして越えるべき5つの壁―オブジェクト指向からシングルページアプリケーションまでを注文しました。 jQueryその先へ、とかそういう文言が今熱いのか。 積ん読たまってて読めるかまったくわからないんですけど。 書籍とは離れますが、jQuery を使用しないでどこまでアニメーションに耐えられるのか、ちょっとやってみました。 https://github.com/tkdn/postjQueryAnimate ※ jQuery は2~使ったので、IE10～,Chrome,Safari,Firefoxいずれも最新くらいがターゲット Velocity.js という選択 最初はCSSアニメーションでなんとかと思ってたんですが、途中で挫折、jQu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - sachinchoolur/jquery-to-javascript-converter: Automatically finds jQuery methods from existing projects and generates vanilla js alternatives.
Release Zepto.js 1.2.0 · madrobby/zepto
How to refactor spaghetti without getting depressed