Google発の画像圧縮ツール「Squoosh」を使ってみた
この記事は何？ Googleが開発した画像圧縮アプリ「Squoosh」を紹介する記事です。 Squooshは以下のことが出来ます。 ・ブラウザ上で簡単に画像の圧縮やリサイズが出来る ・CLIでも画像の圧縮やリサイズが出来る 圧縮が必要な理由は何か？Webサイトを作成する時は、画像を利用することはなかなか避けられません。そして画像サイズが大きい場合は、Webページのパフォーマンス低下を招きます。そこで、画像を圧縮しなるべく見た目は劣化させずに画像の容量を下げる方法の一つが「Squoosh」になります。 この記事では、「Squoosh」の使用方法や感想について紹介しようと思います。 圧縮するには、２種類の方法があるので、それぞれ紹介します。 👉 ブラウザ上から画像を圧縮 👉 CLI上から画像を圧縮 ※スクリーンショット：https://squoosh.app/ より ブラウザ上から画像を圧
Toastr by CodeSeven
toastr toastr is a Javascript library for Gnome / Growl type non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended. Demo Demo can be found at http://codeseven.github.io/toastr/demo.html CDNjs Toastr is hosted at CDN JS Debug //cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js //cdnjs.cloudflare.com/ajax/libs/toast
GitHub - yjs/yjs: Shared data types for building collaborative software
AFFiNE A local-first, privacy-first, open source knowledge base. 🌟 Huly - Open Source All-in-One Project Management Platform 🌟 Cargo Site builder for designers and artists 🌟 Gitbook Knowledge management for technical teams 🌟 Evernote Note-taking app 🌟 Lessonspace Enterprise platform for virtual classrooms and online training 🌟 Ellipsus - Collaborative writing app for storytelling etc. Suppor
typeahead.js
typeahead.js a flexible JavaScript library that provides a strong foundation for building robust typeaheads
サービスを提供するにあたって取得されたくないアカウント名が集まっているライブラリが欲しいんですけど〜みたいな時 - その手の平は尻もつかめるさ
例えば `logout` みたいなユーザ名を取得されてしまうと，ユーザ側からすると不気味に見えるし，URL設計が終了している時などに脆弱性になり得る (とは言うものの，そもそもそういった脆弱性は根本的に防ぐべきだし，URL設計を終了させてはならない)． ので，タイトルのようなことをpostしたら知見がモリモリ集まってきた．ありがとうございます． 取得させたくないアカウント名を集めてあるライブラリ欲しい気がする．authとかlogoutとかdataとか……— アドセンスクリックお願いします太郎 (@moznion) 2017年4月10日 @moznion 所得させたくないアカウント名リストならこういうレポジトリがあります https://t.co/uyYJxaFbrX— kosuge (@9m) 2017年4月10日 @moznion このリストに追加で日本向けに regist っていうアカ
Tilt.js - Parallax tilt effect for jQuery
The most basic usage: Add <script src="tilt.jquery.js"></script> right before the closing </body> tag Mark your elements with <span data-tilt></span> Creating a parallax effect Add transform-style: preserve-3d to your tilt element. Add a transform: translateZ(20px) to your inner elements that have to pop out. Glare effect: Setting this option will enable a glare effect. You can tweak the glare val
Keiyaku CSS
Keiyaku CSS Crazy Style Formatter for Japanese Contract Document Unfortunately, the style in Japanese contract document is totally crazy. I hope this CSS library cures that a bit: write a document logically structured in markdown or HTML, apply keiyaku-css to it then, you’ll get a well-formed document good luck! 概要 Keiyaku CSS（以下、「本件ライブラリ」という。）は、Markdownで書かれた契約文書を、適切な印刷書式にスタイリングするための、CSSライブラリです。 ユ
JSでグローバル汚染してる変数一覧を取得する - Qiita
今、グローバル汚染してる変数はなにか？ と思ってみるとき、たぶんconsole.log(window)とかしてwindowのプロパティを見ると思います。 ただプロパティ多すぎて、どれがもともとのプロパティで、どれが汚染してる変数だ？？ となると思います。 そんな時に使えるコードです 用途 私は主に以下の2点の用途で使います。 悪いグローバル変数を見つける フレームワークやライブラリが使ってるグローバル変数を見つける 特に2番目の用途でよく使いますね。 コード 以下を実行すればconsoleに表示されます console.log((function(){ var propsOrig = []; var propsGlobal = {}; var win = window.open(); for(var i in win){ propsOrig.push(i); } win.close();
TableFilter - HTMLテーブルのフィルタリング
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムで必ず求められるのがテーブルベースの一覧表示です。件数が少ない時にはただ表示するだけで十分ですが、数百件を越えるようになると様々な要望があがってきます。その一つがフィルタリングではないでしょうか。 HTMLのテーブルに対してフィルタ機能を追加してくれるのがTableFilterです。検索とはまた違う手軽なフィルタリングを実現してみましょう。 TableFilterの使い方 一例です。カラムの上にフィルタリングするテキストボックスが並んでいます。文字を入力してエンターを押せばデータがフィルタリングされます。 リアルタイムではないようですが、そこは改造できるでしょう。 入力はテキストだけでなく、ドロップダウンなども使えます。 より複雑に、ページネーションなども駆使したデモで
dragula - 簡単に使えるD&Dライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーションではドラッグ&ドロップインフェースがよく使われます。ファイル管理風のUIを使う場合もそうですし、リストの並び替えであったり、Gmailのようなメーラーでも使われる機能です。 そんなWeb上でのドラッグ&ドロップ操作を実現してくれるのがdragulaです。とても手軽に使えそうです。 dragulaの使い方 dragulaのデモです。 使い方は簡単で、例えばjQueryなら次のようにDOMを指定するだけです。 dragula([document.querySelector('#left'), document.querySelector('#right')]); 他にもAngular/Angular2/Reactでも使うことができます。 こんな感じにドロップでイベ
Webブラウザ上で Excel ファイルを作成してダウンロード - Excel Builder (.js) - なんとなくな Developer のメモ
Excel Builder (.js) を使って、Web ブラウザ上で動的に Excel ファイル （.xlsx） を作成し、ダウンロードする方法をご紹介します。 ソースは http://github.com/fits/try_samples/tree/master/blog/20150822/ サンプル作成 まずは、HTML を用意します。 今回は、download というリンク （a タグ） をクリックすると Excel ファイル （.xlsx） をダウンロードするようにしてみます。 Excel Builder (.js) は RequireJS に依存しているため、RequireJS を読み込むようにして data-main 属性へ実行する js ファイルを指定します。 index.html <!DOCTYPE html> <html> <head> <script data-mai
Matter.js
Rigid bodies Compound bodies Composite bodies Concave and convex hulls Physical properties (mass, area, density etc.) Restitution (elastic and inelastic collisions) Collisions (broad-phase, mid-phase and narrow-phase) Stable stacking and resting Conservation of momentum Friction and resistance Events Constraints Gravity Sleeping and static bodies See all features
JavaScriptのGridライブラリ決定版 - SlickGrid - Qiita
正直、表示だけするならどれも高機能で大差ないと思う。 ただ、多くのグリッド系ライブラリは、高機能な代わりに遅い＆書きにくかったり、編集機能はあるものの表示→編集モードへの切り替えがもっさりしていたり保存機能が書きにくかったりする。 その中で高速な表示、Excelかのような編集機能を備えているのがSlickGridだ。 「Excelみたいにできないの？」とはよく言われることでその言葉にそんな簡単じゃねーんだよ、とイラッとしたことがある人も多いかと思うが、SlickGridを使うことでお互いストレスフリーな関係を築けるだろう。 では、SlickGridのパワーが実感できる例を紹介したい。 1.パフォーマンス このExampleで表示しているデータは、なんど500,000件である。他のグリッドが数万件表示可能！と言っているそばで、ケタが違う。何せExcel(2003)の限界行より多いんだからビッ
SkyWay MultiPartyを使ってグループチャットを作ろう
SkyWay MultiPartyを使ってグループチャットを作ろう 本間 咲来（NTTコミュニケーションズ） 連載2回目の今回は、7月28日にリリースされたライブラリ、SkyWay MultiPartyのチュートリアルをお届けします。 SkyWay MultiPartyは、一言で言うと多人数によるビデオ・テキストチャットを『簡単に』作るためのライブラリです。 本ライブラリを使用することで、グループビデオチャットやテキストチャットを、 ほんの20行程度のJavaScriptコードで実装をすることができます。 サンプルコードを用意していますので、手元で実行しながら進めてみましょう。 10行ビデオチャット 以下のスクリーンショットをご覧ください。 まずはこのような複数人が参加できるビデオチャットシステムを、10行程度のJavaScriptコードで実装してみましょう。 サンプルコードを以下に記載し
ExpandJS - 多くのUIコンポーネントと役立ちメソッドを備えたJavaScriptライブラリ MOONGIFT
最近のWebはフラットなUIが主流で、かつユーザのアクションに対して何らかのアニメーションを行うマテリアルデザインも取り込まれてきています。そのためにも多くのフレームワークが出ています。しかしそれらを導入するとしばりが強いと感じている人も多いでしょう。 そこでExpandJSの導入です。PolymerとGoogleのマテリアルデザインをベースに、80以上のカスタムエレメントと350を越える関数を提供するライブラリです。 ExpandJSの使い方 フォーム入力系。フォーカスが当たるとアニメーションします。 ツールチップ。 ダイアログ。 アクション付きダイアログ。 パネル。 メニュー。 ペーパー風表示。 アバター。 ボタン。 クリックでアニメーションします。 フローティングボタン。 アイコン。 アイコン付きリスト。 リストの右側に情報追加することもできます。 四角い系統のボタン。 チェックボタ
jQueryプラグイン「ScroolMagic」2系でよく使う機能を紹介します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、づやです。 前回ScrollMagic2系について下記の記事を書きましたが、基本的な使い方しか書けなかったので、今回はよく使う機能について書きたいと思います。 個人的にTweenMaxをよく使うので、animation.gsap.jsを読み込んでる状態での記事となります。 setClassToggle スクロールの位置によってクラスを付けかえたいときは非常によくあるかと思います。そんなときは、スクロールに応じてクラスを付けたり外したりしてくれるsetClassToggleの出番。 <ul> <li id="list1"><a href="#block1">1番目</a></li> <li id="list2"><a href="#block2">2番目</a></li> <li id="list3"><a href="#block3">3番目</a></li> </ul> <s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bttn.css - Demo
GitHub - niwaringo/moji: 半角全角変換ライブラリ
una.im | Introducing CSSgram: A CSS Library for Instagram Filters
美しいUIの月間イベントカレンダー実装jQueryプラグイン「Monthly.js」:phpspot開発日誌