大企業は無償利用せず金銭的支援を行えと警告したのに改めないので作者がついに激怒、毎週2000万回以上ダウンロードされるcolors.jsとfaker.jsを破壊し使用不能に
人気オープンソースライブラリ「colors.js」と「faker.js」の開発者であるMarak氏が、これらのnpmライブラリを意図的に破壊しました。colors.jsおよびfaker.jsに依存しているプロジェクトは多数存在しているため、その影響が懸念されています。 Dev corrupts NPM libs 'colors' and 'faker' breaking thousands of apps https://www.bleepingcomputer.com/news/security/dev-corrupts-npm-libs-colors-and-faker-breaking-thousands-of-apps/ Open source developer corrupts widely-used libraries, affecting tons of projects
どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS
アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 ユニバーサル スライダー、ポップアップ、アコーディオン、メニュー、パララックス、ジャスチャーなど、さまざまなUIパターンを簡単に実装できます。 ピュアHTML HTMLのdata属性を使用して、インターフェイスをレイアウトし、インタラクションを定義します。 互換性 React、VueJS、Angu
全米に1000人以上いる「Infinity」さん、名前がjQueryで適切に処理されない恐れ | スラド デベロッパー
「infinity」は「無限大」という意味の英単語だが、女性の名前としても使われているという。全米には1000人以上のInfinityさんがいるそうなのだが、この名前はJavaScriptライブラリjQueryで適切に扱えない可能性があるそうだ（Reddit）。 「Infinity」という文字列が含まれた要素に対し、jQueryの.data（）メソッドを使ってその値を取得しようとすると、このメソッドは「Infinity」という文字列を数字の+∞として解釈してそれを返してしまうという。 JavaScriptでは数値を0で割ったときなどに無限大を意味する「Infinity」という値を返すようになっている。.data()メソッドは指定された要素の値を可能な限り適切なJavaScriptオブジェクトとして変換しようとし、変換できなかった場合のみその値を文字列として返すという。「Infinity」と
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
ブログの表示速度が激遅！僕がGoogleの評価を上げた対策5選 - パパむすブログ
こんにちは！パパむすです。 ブログの表示速度って日ごろから気にして対策を立てていますか？ 特に何も気にせずにフリー素材やスマホで撮った画像を貼り付けしたり、jQueryの読み込みを最適化しないままにしてるなんてことはないですよね！？ もし心当たりのある方は非常に危険です！！ ブログの表示速度がめちゃめちゃ遅くなっている可能性がありますよ！ ん？ブログの表示が少し遅いくらい別に問題ないじゃんって思いました？ もしあなたがブログでたくさんのPVを集めるのが目的であったり、少しでも効率よく収入を稼ぎたいと考えているのであれば、ブログの表示速度は絶対に気にしてください！！ なぜなら、Googleはサイトの評価をするにあたって、そのサイトの表示速度を尺度にしていることを宣言しています。 また、読者があなたのサイトに訪れたときに、サイトが少しでも重いなと感じたら、訪問者は容赦なく離脱していくことも統計
コピペで簡単！レスポンシブ対応の固定ヘッダーナビ作成！ | 刈谷、豊田でウェブサイト制作！合同会社beReady
豊田、刈谷、知立、安城でホームページ制作をやっている合同会社beReadyの奥山です！ 僕は基本的に寝るときはエアコンをつけていないのですが、さすがに暑いので竹マットを敷いて寝ています。 寝返りうつたびにひんやりとして、かなり体温下がります。あとは熱さまシートの枕のやつですね。 あれも体がじんわり冷えていくのが体感できて、おすすめです。 竹シーツ セミダブル「竹駒シーツ」(#9897640)【IT】【tm】セミダブル：約108×176cm冷感寝具 敷きパッド 冷感シーツ ひんやりマット 冷感 敷パッド 竹 マット 価格：2980円（税込、送料無料) (2016/7/30時点) というわけで今回はヘッダーのグローバルメニューのレスポンシブ対応をコピペで使えるコードと解説を行っていきたいと思います！ 結構時間かかりました！！笑 ぜひ見ていってください。 レスポンシブなヘッダーグローバルメニュー
WordPressでjQueryを使う一番シンプルな方法
WordPressを使ってサイト構築するとき、jQueryを使ってカスタマイズすることが多いと思います。 このサイトでもAjax+pushStateなどの技術を使うためにjQueryを多用しています。 WordPressでjQueryを使う じつはWordPressにはjQueryもパッケージされているので、自分のサーバーにjQueryを置いたりGoogleなどのCDNを読みこまなくても、header.phpに<?php wp_head(); ?>と書けば必要に応じて勝手に読み込まれます。 しかし問題があります WordPressにパッケージされているjQueryは、WordPressの独自仕様になっていて、ちょっと使いづらいんです。 具体的には、jQuery.noConflict();という関数が実行されていて（参考記事）、要はjQueryと似たような記法のjQuery以外のJavaSc
SlickGridを使ってみる - Qiita
JavaScriptのGridライブラリ決定版 - SlickGrid - Qiita [キータ]で紹介されているmleibman/SlickGridを使ってみたメモです。 Examples · mleibman/SlickGrid Wikiにいろいろ例があるので、それを見ながら自分でも試してみました。 この記事では基本機能を使った例を紹介します。 完全なソースは https://github.com/hnakamur/slickgrid_example/tree/91e89396374cb23ad9d1ec339888896867f9a0a4 にあります。 Dependenciesに書かれているようにSlickGridは以下のライブラリに依存しています。 jQuery jQueryUI Sortable (optional, only if column reordering is en
ThreeDubMedia · jquery.event.drag
A jquery special event plugin that makes the task of adding complex drag interactions, to any element, simple and powerful. Overview The plugin works by using standard DOM events, and simulating custom events to create a drag interaction. It simplifies a recurring pattern of event interaction that can be fairly complex to design in a consistent, cross-browser manner. The drag interaction, while si
csv2tablejQuery でCSVをテーブル表示
あと、最近のブログはここ JavaScript++かも日記 Facebookの仮想通貨Libra/Diemが来春リリースらしいので久しぶりに触ってみてます Facebookの仮想通貨Libra/Diem関連 |Blog | Demo | Facbook JavaScript部 | jQuery › Downloads › Plugins › csv2table | ( ccchart/ jQchart ) nightly- testing themeroller width jQuery 1.3. test-tm.htm blog デフォルトCSSのリセット方法 Reset the CSS ( default style sheet of csv2table ) csv2tableのデフォルトCSSをリセットし、自由にCSS設定する。 このページに$.csv2table.cssReset(
JavaScript / jQueryでtableの行を「追加」「削除」「移動」「変更」させる方法
まず「リスト選択」の列の選択肢から「B」を選択します。 ⇒「リスト名」が「B」に変更されます。（変更）「追加/削除」の列の「+」ボタンを押します。 ⇒行が追加されます。（追加）追加された行の「リスト順」の列の「↑」をクリックします。 ⇒行が上へ移動します。（移動）移動した行の「リスト順」の列の「↓」をクリックします。 ⇒行が下へ移動します。（移動）最後に、好きな行の「追加/削除」の列の「-」ボタンを押します。 ⇒行が削除されます。（削除） いかがでしょうか。まあ、よくある機能ですね。では、この機能の実装方法について以下にまとめておきたいと思います。 HTMLHTMLでは、以下の点がポイントとなります。 それぞれの機能を発生させるためのイベントハンドラをセットしておきます。操作の対象となる「行」の部分は<tbody>タグ内に記述するようにします（これが後々大事になります）。JavaScrip
HTMLの<table>内をソートできるjQueryプラグイン - Qiita
jQueryプラグインとして作ってはみたものの、sortableという名前がいろいろとかぶっていることに気づいたので、github公開はよしてこっちに 使い方 <table> に sortable クラスを付与 ソートしたい <thead> の <th> に sort_number または sort_number_attr クラスを付与 <th> に sort_number_attr クラスを付与した列の <td> には、sort-value 属性でソート順の数値を指定 ソートアルゴリズムはマージソートなので安定ソート ソートのキーにした列の <td> には sort_by_asc および sort_by_desc クラスが付与されるので、cssで色をつけたりできる コード ;(function($) { $.fn.sortableInit = function(){ var elemen
10 million bugs in my code @nanoris : jQuery, table の列幅を変更する [1.0]
2013年08月01日16:34 jQuery, table の列幅を変更する [1.0] カテゴリJavaScript 1 Col.1 Col.2 Col.3 Col.4 Col.5 Col.6 Col.7 th.mousemove - マウスカーソルを変更する。ドラッグ中の幅を変更する。 th.mousedown - ドラッグモードに遷移する。 windows.mouseup - ドラッグモードを終了する。 サンプルコード <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> //$ が jquery 以外で使用されている競合を回避する。 (function($){ //$=JQuery var sheet_nm =
テーブルのセルをクリックしたときに編集できるようにする（Edit in Place） | GUNMA GIS GEEK
画面遷移を行わずに、その場でDOM要素を編集できる機能を「inplace editor」とか言うらしいです。 プラグインを使う方が簡単なのですが、作りたいものに合わせてカスタマイズするのが思うようにいかなかったので、自分で書いてみました。 <table id="edit-table"> <tr> <th>要素１</th> <th>要素２</th> <th>要素３</th> </tr> <tr> <td>1</td><td>hoge</td><td>hoge</td> </tr> <tr> <td>2</td><td>hello</td><td>world</td> </tr> <tr> <td>3</td><td></td><td></td> </tr> </table>
Ginpen.com | Powered by JavaScript and JapaneseSushi
JavaScript and Web by Ginpei
css3のanimationで作る永久ループのスライドショー | パソコン倶楽部りんご
「Pure CSS3 Cycle Slider」をお手本にして、css3のanimationで永久ループするスライドショーを作ります。 とても美しい動作ですので、まずは動作を確認して下さい。 画像にマウスホーバーすると、スライドが止まる マウスホーバーで画像に対応するh1が現れる スライドの表示秒数を伝える工夫もされている マークアップをキチンと考える 最終的にCSSで動作させるのか、jQueryで動作させるのかに関わらず、まずはきちんとマークアップします。そうすると以下の利点があります。 スライドの中身が、クリックさせたいリンクの列挙だとすれば、SEOの効果も望めます。単に画像を動かすのと、見出しタグ付きの要素が動いているのとでは大違いです。 対象ブラウザに合わせて、実装方法を選択できます。例えば、古いIEなどでも動かしたければ、古いIEにだけIEの条件コメントで自作のjQueryを読み
CSS だけで Web ページのフェードイン表示を実装する方法 | q-Az
jQuery を使って実装する方法が過去には一般的でしたが、フェードインだけであれば CSS だけで実装が可能です。 現在このページもその CSS が適用されていますので、ポワーンとフェードインでページが表示がされたと思います。更新する度にフェードインします。 CSS だけでフェードイン body { animation: fadeIn 2s ease 0s 1 normal; -webkit-animation: fadeIn 2s ease 0s 1 normal; } @keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } @-webkit-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} }body にアニメーションを施すことでフェードイン表示が可能です。これだけで簡単に
[jQuery] [HTML] えっ！？ <script>にも読み込み順序とかあんの？ - Qiita
今日jQueryを初めた人の記事です。 あしからず。。。 経緯 最近Webアプリケーションの構築にドハマりしていて、JSONを返すだけの面白くないAPIづくりは一旦おいておいて、インターフェイス作りもやろうということでHTML + CSSを猛勉強している次第です。 いや、別に仕事で使うとかじゃなくて、趣味でなんですけどね。 Node.jsは使っている人なので、Javascriptはあらかたわかっているのですが、今日からみんな大好きjQueryを使いはじめることにしました。 で、いきなり3行しかないjavascriptのコードにハマりまくりました、ええ、それはもう盛大に。 問題のコード 今までバリデーションは全てPHPでやってエラーを返していましたが、そりゃ画面側でリアルタイムにやれるならやりたいということでPOST前検診（変な言い方・・・）をjavascriptさんに担当してもらおうと一番
![[jQuery] [HTML] えっ！？ <script>にも読み込み順序とかあんの？ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bb2ff3e5de904b12403d02094643ed2cd1157626/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCalF1ZXJ5JTVEJTIwJTVCSFRNTCU1RCUyMCVFMyU4MSU4OCVFMyU4MSVBMyVFRiVCQyU4MSVFRiVCQyU5RiUyMCUzQ3NjcmlwdCUzRSVFMyU4MSVBQiVFMyU4MiU4MiVFOCVBQSVBRCVFMyU4MSVCRiVFOCVCRSVCQyVFMyU4MSVCRiVFOSVBMCU4NiVFNSVCQSU4RiVFMyU4MSVBOCVFMyU4MSU4QiVFMyU4MSU4MiVFMyU4MiU5MyVFMyU4MSVBRSVFRiVCQyU5RiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YmFjZjVkMWU1OGIxNTIyNjc0ODkyYmZhNzRiY2Y0YzI%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwb2trbiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MWZiNTQzYzVjMzk1NWQ3YTNhNjA0MjhmOTVhZTY3OGE%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D75f7e279ae67f9a0fe4ee232357e3f27)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SlickNav
webnonotes.com
