掲示板のJavaScriptこういう風に最適化しました - ✘╹◡╹✘
最近Railsで掲示板つくってて、サボって後回しにしていたJavaScriptの最適化をやりました。 掲示板の構成 Webpackを使っている Reactを使っている Server-Side Renderingをやっている Railsを使っている Sprocketsを使っていない 作業内容 webpack-bundle-size-analyzerで容量の大きいpackageを調査 HTTPクライアントに利用していたjQueryを撤廃 HTTPクライアントにaxiosを採用 lodashを一部しか読み込まないように変更 moment.jsの不要なlocaleを読み込まないように設定 変更結果 これでminify後の容量が770KB→476KBに。gzip圧縮状態では202KB→125KB。 $(npm bin)/webpack --profile --json | webpack-bundl
EventListenerを全部消すbookmarklet | kanonjiのブログ
javascript:!function(){var a=document.getElementsByTagName("body")[0],b=a.parentNode;b.removeChild(a),b.appendChild(a.cloneNode(!0))}(); EventListener削除 <- bookmarklet JavaScriptでの右クリック禁止を解除する | kanonjiのブログ ペースト禁止を解除する雑なbookmarklet(2) | kanonjiのブログ 今まで右クリック禁止の解除、ペースト禁止の解除なんかを必要に迫られてやったりしたけど、実はこれらの解除方法は完璧じゃないです。 右クリック禁止の解除は、HTML属性のイベントを消してるだけなので、EventListenerを使っての禁止だと解除出来ないし、ペースト禁止の解除も、一応jQueryによるペ
[JavaScript]rubyの「times」メソッドをJavaScriptで実装する。
Number.prototype.times = function( funct ) { if( typeof funct === 'function') { for( var i = 0; i < Math.floor(this); i++ ) { funct(i); } } return this; } //呼び出し側サンプル (5).times(function(i){ alert( i ); });
![[JavaScript]rubyの「times」メソッドをJavaScriptで実装する。](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
Command + Enter to Submit Forms
I've used Mac's for about six years now but it wasn't until I started using Tweetdeck that I realized how awesome the [COMMAND]+[ENTER] key combination was. Inside a textarea? No problem -- [COMMAND]+[ENTER] and the form is submitted. What if all forms could be that way? They can be with a little JavaScript! The JavaScript There are two routes to go: adding an event listener to the form (even
Console Utilities API reference | Chrome DevTools | Chrome for Developers
The Console Utilities API contains a collection of convenience functions for performing common tasks: selecting and inspecting DOM elements, querying objects, displaying data in readable format, stopping and starting the profiler, monitoring DOM events and function calls, and more. Looking for console.log(), console.error(), and the rest of the console.* functions? See Console API Reference. $_ $_
リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io
なお IE は(security zone setting をいじらない限り)この問題が発生しないようだ。 引用元: blankshield demo | Reverse tabnabber phishing tabnabbing 上記の挙動を、フィッシング詐欺に利用できることが既に指摘されている。 この手法は Tabnabbing と呼ばれている。 Tabnabbing: A New Type of Phishing Attack Aza on Design Target="_blank" - the most underestimated vulnerability ever この攻撃方法を解説する。 攻撃の概要 https://cgm.example.com (左上) というサービスがあるとし、これは SNS やチームコラボレーション系サービスを想定する。 攻撃者は、このサービスの不
target="_blank"を使った脆弱性Tabnabbingとその対策
About rel=noopenerの記事を見て、フィッシング詐欺の手法Tabnabbing(タブナビング)について、 以前にそれっぽい記事読んだけど、すっかり忘れていた。 改めて見直してみて、その内容と対策がまとまっていたのでおさらい。 Tabnabbing(タブナビング)の仕組みTabnabbing の仕組みは以下となる。 まず、新規のタブを開くようなアンカータグ
import/export での index.js の活用 - わからん
List ディレクトリの直下に index.js を用意すると、 import の from のところを List というディレクトリ名の指定だけですませることで、index.js が読み込まれる。 だから、以下のような構造でモジュールがあるときには、 List ├── List.js ├── ListItem.js ├── MakeSelectable.js └── index.js index.js で以下のように記述すれば、 export List from './List'; export ListItem from './ListItem'; export MakeSelectable from './MakeSelectable'; export default from './List'; List, ListItem, MakeSelectable の取得を以下のように一行
jQueryのclick()は・・・ : (*x).b=z->a+y/c
◆ jsの click() とは違って実際にクリックしたことにはなりません ◆ jQuery以外でつけたイベント実行したりクリック自体を起こさせたいなら .get(0).click() でHTMLの要素に対してクリックメソッドを実行 おかしなところや使いづらいところが多いってことですね 基本的にこのブログは何か問題あったときの解決策メモなので良い部分じゃなくて悪い部分が多いと思います 一応初心者向けなつもりなので 複雑そうな記事だと関係しそうな基本的な説明を別ページで書いてたりするのが 対策方法系じゃなくて説明系な記事になってるわけです jsのclick() jsでHTMLの要素に対してclick() メソッドを実行するとその要素をクリックしたことになります aタグだとhrefのページに飛んだり javascript実行したりメール画面開いたりできますし クリックにイベントリスナをつけてい
JavaScript で英数字や記号を全角から半角へ変換する方法
ブラウザ上で半角入力の制御は CSS の ime-mode プロパティが存在します。しかしこれは Internet Exporer 独自のものなので、Chrome ブラウザなど対応していないブラウザも存在します。 全角入力を拒否するような制御を JavaScript に組み込むことも可能ですが、半角に直してもう一度同じ内容を入力させる仕様は最適な対応方法ではないと考えています。 そこでユーザビリティを損なわず、故意ではない全角入力を許容するために、英数字や記号を全角から半角に変換する処理を提案させていただきます。 全角から半角へ変換するメリットある特定項目のデータを半角で統一することで、生まれるメリットもたくさんあります。例えば、検索画面で対象となるデータは、全角と半角が混在していると部分一致の条件を拡張しなくてはいけないので抽出するのが大変です。 Oracle であれば TO_SINGL
JavaScript Primer - 迷わないための入門書 #jsprimer
JavaScript Primer 迷わないための入門書 Tweet Watch Star Xのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことはあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 JavaScript Primerを読み始める 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。
JavaScriptでニューラルネットワーク : synaptic.jsですぐに作れる手書き数字分類器 | POSTD
ニューラルネットワークは複雑な非線形問題を解決する可能性を提供してくれるもので、信号の分類や時系列的な予測、パターン認識など様々な領域で利用できます。ニューラルネットワークは人間の脳から着想を得たモデルで、接続された複数のニューロンから構成されます。ネットワークには入力ニューロンの層(情報が入ってくるところ)と出力ニューロンの層(結果が得られるところ)、そしてその間にある「隠れ層」と呼ばれるいくつかの層があります。 より深い理解のために、 Neural Networks and Deep Learning をチェックすることをお勧めします。 ここ数年、ニューラルネットワークを色々な目的のために作成・訓練・利用する助けになるJavaScriptフレームワークがいくつも開発されました。このブログ記事では、画像の分類のためにネットワークをセットアップする方法を学んでいきます。 ニューラルネットワ
ブレークポイントを使ったJavaScriptデバッグを整理してみた【再入門】 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに プログラミングの上達において、デバッグスキルを上げることはとても重要で近道の1つだと考えています。 私自身、勉強し始めた頃に知っていれば（理解できていれば）とよく思います。 今回、JavaScriptデバッグについてChromeDevtoolsとブレークポイントを使った基本パターンを整理しました。 自身の復習かつ、あまり馴染みの無い方でも、以下おおよそ理解できるようになれば良いなぁ、というのが本稿の目的です。 どのようなものにブレークポイントが貼れるのか どういった時にブレークポイントが発動されるのか ブレークポイントが発動さ
pjax を利用したサイト向けの Chrome Extension の書き方 - @kyanny's blog
Chrome Extension の Content Scripts を使うと Greasemonkey のようにウェブサイトを加工できて便利だが、 Content Scripts はページのロード後に一度だけ実行されるので、 github.com のように pjax を利用しているサイトではページ遷移後に期待通り実行されないことがある。 pjax は pjax:success などの独自イベントを発火するが、 Content Scripts はサンドボックス環境で実行されるので pjax が発火するイベントを Listen することができない。しかし DOM の変更時に発生するイベントを Listen することはできる。 DOM の変更を検知するためには DOMSubtreeModified が利用できるが、このイベントは DOM Level 3 で deprecated になってしまっ
GitHubのpjaxによる画面遷移をユーザースクリプトなどから検知する - Qiita
pjaxによる画面遷移ではユーザースクリプトが新しく呼び出されない。ここでは、GitHubでpjaxによる画面遷移が発生したことをユーザースクリプト側で検知する方法をいくつか紹介する。Chrome Extensionなどのブラウザ拡張を書くときにも参考になるかもしれない。 URLをポーリングする setIntervalなどで定期的にURLを確認することでpjaxによる画面遷移が検知できる。 URLが変更されたときに発生するイベントはないようだ1。 MutationObserverでDOMの変更を検知する おそらく一番まっとうな方法。かつてはDOMの変更検知にはDOMNodeInsertedをはじめとするmutation eventsが使われていたが、現在は非推奨になっていて、代わりにMutationObserverが提供されている。 使用例など github-linker/injectio
jQueryで楽になる部分、楽にならない部分、顧客が本当に必要だったもの - Qiita
俺も昔はお前のような jQueryスパゲッティジェネレーターだったのだが、膝にReactを受けてしまってな… 基本的な方針 とくにライブラリ設計者において、小さなモジュールを単機能で分割する以上、ライブラリ設計者は可能な限り依存を減らすことを求められます。node環境ならdependency hellの回避のため、フロントエンド環境ならファイルサイズを減らすためです。 ライブラリ設計者ならずともコードのポータビリティを維持するため、できるだけライブラリに依存しないコードを書くのが望ましいです。 Githubみてる限り、最近書かれるJSのライブラリの多くはjQuery非依存です。ユーザーから見る限りは、jQueryElement渡すかHTMLElement使うかぐらいの違いですけどね。 また、Angular, React等のSPAをスクラッチで設計する場合、気づいたらjQueryを使っていな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - azu/large-scale-javascript: 複雑なJavaScriptアプリケーションを作るために考えること
https://www.dropzone.dev/js/
URL形式(http://example.jpg)の画像ファイルからdataURLを取得する - 人生dat落ち
JavaScript の原理：クロージャの真実 - Qiita
