この発想はすごい！アニメーションgifの再生・停止をコントロールできるJavaScriptライブラリ -Freezeframe.js
アニメーションgifの再生・停止をホバー・クリック・タップ、そしてボタン・アイコンでコントロールできる軽量JavaScriptライブラリを紹介します。 canvasに書き込むという発想がすごいですね。 通常アニメーションgifは自動再生されますが、このスクリプトを使用すると、ユーザーの操作をトリガーに再生・停止させることができます。 Freezeframe.js -GitHub Freezeframe.jsの特徴 Freezeframe.jsのデモ Freezeframe.jsの使い方 Freezeframe.jsの特徴 Freezeframe.jsではアニメーションgifの最初のフレームだけをcanvasに書き込み、gifの静止画バージョンを自動作成します。あとは、この静止画バージョンとアニメーションgifをトリガーで切り替え、アニメーションgifを再生・停止させます。 下記は、ホバーで
[Web フロントエンド] 状態更新ロジックをフレームワークから独立させる - 株式会社カブク
はじめに はじめまして。 null です。最近の悩みは 2 歳半の息子が言うことを聞いてくださらないことです。 2 歳児もそうなのですが、 ソフトウェアフレームワークに振り回されてるって感じること、稀によくありませんか？？ ある程度の学習コストがかかるのは当然としても、冗長な書き方を要求されるわ、かゆいところに手が届かないわ、実データ投入したらパフォーマンス問題だらけだわ、バージョンアップしたら動かなくなるわで、あぁ私いま振り回されてるなぁ、みたいな。 「じゃあ使わなければいい」「じゃあ自分で作ればいい」という話ではなく、「必要以上には依存しない方が無難だよね」「フレームワークの外へ切り出せるところは切り出してみよう」という話をします。 続きを 3 行で 状態更新ロジックってフレームワーク非依存にできそうだよね でもフレームワークによって状態をイミュータブル（状態更新=状態オブジェクト生成
![[Web フロントエンド] 状態更新ロジックをフレームワークから独立させる - 株式会社カブク](https://cdn-ak-scissors.b.st-hatena.com/image/square/897d9c48832ba7e3a66c89a7941ffe151d3d8705/height=288;version=1;width=512/https%3A%2F%2Fwww.kabuku.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2019%2F05%2Fcut20_bunsin-1200x801.jpg)
JavaScriptを使わずCSSだけで構築したWebチャット | スラド IT
JavaScriptを使わず、CSSだけでWebブラウザ上で動くチャットを実装した人が登場した（ソースコードなどを公開しているGitHubリポジトリ）。 画面上に表示される文字ボタンをクリックして文字を入力し、「submit」をクリックするとそのテキストが送信されるという仕組み。 CSSの「:active」セレクタでbackground-imageスタイルを指定すると、その要素がクリックされてアクティブになった際にその画像を取得するリクエストがサーバーに送信されることを文字の入力や送信に利用している。 また、サーバーからクライアントへのメッセージ送信は、「Transfer-Encoding: chunked」ヘッダを送ってコンテンツの送信を中断状態にしておき、随時「続きのコンテンツ」を送信することで行っている。 作者はCSSでマウスカーソルを追跡する方法に触発されたと述べている。
Shibuya.XSS techtalk #11
Yosuke HASEGAWA @hasegawayosuke 本日のShibuya.XSSの入館IDをconnpassのメッセージでお送りしましたので、参加者のみなさまご確認くださいませ！ #shibuyaxss 2019-05-16 16:40:18
JSでDoSる/ Shibuya.XSS techtalk #11
Shibuya.XSS techtalk #11 の発表資料です。
【JavaScript SEO】AngularとReact、VueはGoogle検索のSEOで利用可能。ただし注意点あり
[レベル: 上級] メジャーな 2 大 JavaScript フレームワークである Angular と React、そしてこの 2 つには及ばないもののシェアを伸ばしてきている Vue.js を採用したウェブサイトは基本的に Google 検索においてうまく機能します。 SEO と相性が悪いフレームワークではありません。 ただしいくつか気をつける点もあります。 Angular/React/Vue は Google SEO に問題なし JavaScript SEO をテーマにした DeepCrawl との Q&A 動画チャットで、Google の Matin Splitt 氏が、メジャーな JavaScript フレームワークの Google 検索での利用について説明しました。 次の 3 つの JS フレームワークは Google の SEO に害を与えるようには作られていないと自身で詳しく
YubinBango
YubinBangoは、Webフォームにて郵便番号を入力すると自動的に住所が自動入力されるライブラリ（ajaxzip3の開発者による正式な後継）です。 郵便事業株式会社（旧郵政省）提供のデータを利用しています。 郵便番号データの更新はCIで自動化しております。 詳しくはGithub内のYubinBangoのレポジトリに記載のガイドをご覧ください。 ＃お気に召しましたら任意で結構ですのでNPO法人Family1st宛にご寄付をお願いいたします。（お振込先はこちらです） 〒 <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script> <form class="h-adr"> <span class="p-country-name" style="display:non
「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
拝啓 Google様、JavaScriptとJSONで動的に変化するページをインデックスしてください - Qiita
[ { "id": 1, "title": "ページ１", "description": "これはページ１のディスクリプションです", "contents": "これはページ１の本文です" }, { "id": 2, "title": "ページ２", "description": "これはページ２のディスクリプションです", "contents": "これはページ２の本文です" }, { "id": 3, "title": "ページ３", "description": "これはページ３のディスクリプションです", "contents": "これはページ３の本文です" } ] $(window).on("load", function() { //URLパラメータ(id)の値を取得 var id = myGetQuery("id"); //data.jsonのidとURLパラメータのidとを
実践: React Hooks - mizchi's blog
hooks が発表されてから趣味でも現場でもずっと hooks を使っています。おかげでだいぶこなれてきて、だいたいなんのライフサイクルでも表現できるようになってきました。 最初は単に useState が state を、 useEffect が componentDidMount/componentDidUpdate を置き換えるもの、と説明を済ますつもりでしたが、 useEffect についてはライフサイクルのモデルがぜんぜん違うので、別の説明をする必要があるように感じていました。 で、その結果 React Hooks を理解するには、関数のメモ化を理解するのが最も簡単だと思ったので、その説明をしつつ、イディオムを解説していこうと思います。 最初に: React Hooks は何であり、何ではないか 関数コンポーネントが状態を持てるようにするもので、関数のメモ化のテクニックを多用しま
次世代の管理画面を作るフロントエンドの取り組み - BASEプロダクトチームブログ
フロントエンドエンジニアの松原(@simezi9)です。BASEでは現在ショップ向けの管理画面をリニューアルするプロジェクトが進んでいて、UI/UXの更新と同時に創業当時から継ぎ足して作ってきたフロントエンドの技術スタックを一新しようとしています。この記事では、具体的にそのフロントエンドの更新でどのようなことに取り組んでいるのかをいくつかご紹介したいと思います。 Vue + TypeScriptを利用したMPA(multi page application)化 HTMLの構築をPHP(サーバーサイド)からJS(クライアントサイド)へ移行する 従来の「BASE」の画面ではPHPでHTMLの構築を行っていましたが、HTMLの構築をすべてPHPのコードから分離させて、Vueによるクライアントサイドでのレンダリングにしています。また管理画面の特性上（1ページあたりの閲覧時間が長く相対的にローディン
自作のOSSライブラリをFlowからTypeScriptに全面移行した理由と所感 - ここぽんのーと
パラメーター調整用のJavaScriptライブラリ「Tweakpane」について、FlowからTypeScriptに全面移行したので、その理由と所感を。 3行まとめ業界におけるFlowのマイナーさ・不人気を憂い、調査も兼ねてTypeScriptへ移行してみた型の表現力自体はそれほど変わらず、周辺ツールのサポートも特に問題なし複雑だったパッケージの依存関係がシンプルになり、minify後のサイズも小さくなっていい感じJavaScriptと型JavaScriptは明示的な型を持たないプログラミング言語です。コードを気軽に書き捨てられる寿命の短い案件ならそれでも問題ないのですが、大規模かつ長期的に保守運用するプロジェクトには正直不向きでしょう。 JavaScriptに型を導入するための選択肢として挙がるのがFlowあるいはTypeScriptですが、それぞれアプローチが異なっています。 Flow
一休.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削
1年後に差がつくFont Awesome5 ～フロントエンド開発(ES6,Webpack4,Babel7)への導入～ - Qiita
概要 Font Awesome(フォントオーサム)はFreeで使えるアイコン集で、このジャンルでほぼデファクトといって良い存在になっています。Free版とPro版がありますがFree版でも約1500種類のアイコンが使えます。 本稿では、node.js環境での開発を前提としたWebフロントエンド開発で Font Awesome5 を使う時のポイントを説明します。Font Awesomeはv5になってフロントエンド開発との連携機能が大幅強化され、お手軽にJavaScriptのバンドルにフォントを埋め込むことができます。 Font Awesomeのアイコンを使う（バンドルする）には以下の3ステップを踏みます。 Font Awesome を npm でインストールして、 JavaScriptのコードで必要なアイコンだけを import して Font Awesomeの必要最小限が含まれるように w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://azu.github.io/slide//2019/template-engine/template-engine-security.pdf
submitボタンのnameがsubmitだとsubmit()が効かない - Qiita
GitHub - daybrush/scenejs: 🎬 Scene.js is JavaScript & CSS timeline-based animation library
Pioneering Client-Side Protection Platform | Jscrambler
GitHub - niklasramo/mezr: A lightweight JavaScript library for measuring and comparing the dimensions and distances of DOM elements.
【Laravel 6 & PHP 7.4 対応】Vue + Vue Router + Vuex + Laravel チュートリアル（全16回）を書きました。 - Qiita
