グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと
apiDoc - Inline Documentation for RESTful web APIs
apiDoc creates a documentation from API annotations in your source code. Java, JavaScript, PHP, … CoffeeScript Elixir Erlang Perl Python Ruby Lua /** * @api {get} /user/:id Request User information * @apiName GetUser * @apiGroup User * * @apiParam {Number} id Users unique ID. * * @apiSuccess {String} firstname Firstname of the User. * @apiSuccess {String} lastname Lastname of the User. */ ### @api
🚀⚙️ JavaScript Visualized: the JavaScript Engine
JavaScript is cool (don't @ me), but how can a machine actually understand the code you've written? As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳 | Note: This post is mainly based on the V8 eng
async/await 入門（JavaScript） - Qiita
はじめに 今更ですが、JavaScriptのasync/awaitに関する備忘録になります。 「今まで$.Deferred()やPromiseなどで非同期処理は書いたことがあるが、async/awaitはわからない」 「$.Deferred()やPromiseなどの非同期処理の書き方より、もっと簡潔に書ける書き方があれば知りたい」 「今までの非同期処理の書き方と比べて何が良いのかわからない」 といった人達向けの記事です。 $.Deferred()やPromiseなどで非同期処理を書いたことがある前提のため、非同期処理自体に関する説明は記載しておりません。 記載している利用例のコードはChrome（最新）のコンソール上で動きますので、コンソール上で実行して動作を確認してみると理解が深まりやすいと思います。 本記事で用いている用語 Promiseを返す Promiseオブジェクトを返すこと。
package.json のチルダ(~) とキャレット(^) - Qiita
バージョン指定でいっつもこいつの違いを忘れてしまって、npm とか semver のドキュメントを探すところから始まるから自分用のメモ。 ^1.1.2 = 1.x ~1.1.2 = 1.1.x (追記 一応↑は間違っていないのだけど、厳密にいうとちょっと間違っていた) チルダ表記 ~ "明記したところ以下のバージョンがあがることのみ許容" ~1.1.2 = 1.1.2 <= version < 1.2.0 ~1.1 = 1.1.x ~1 = 1.x オリジナルの定義は、 Allows patch-level changes if a minor version is specified on the comparator. Allows minor-level changes if not. キャレット表記 ^ "一番左側にある、ゼロでないバージョニングは変えない (それ以下があがることは
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017 JavaScriptフレームワークとして知られるAngularのイベント「ng-japan 2017」がAngular Japan User Group主催で6月17日に都内で開催されました。 Angularは基本的にWebブラウザで実行されるJavaScriptアプリケーションのフレームワークですが、一方でサーバサイドでAngularが備えるHTML構成機能を実現する、いわゆるServer Side Rendering機能の開発も「Angular Universal」として進んでいます。 そのため、Server Side Renderingに興味を持つAngularデベロッパーも増えてきました。 ng-
Headless Chromium
Headless Chromium allows running Chromium in a headless/server environment. Expected use cases include loading web pages, extracting metadata (e.g., the DOM) and generating bitmaps from page contents -- using all the modern web platform features provided by Chromium and Blink. As of M118, precompiled headless_shell binaries are available for download under the name chrome-headless-shell via Chrome
結婚式二次会用に Node.js x ブラウザでタイピング対決アプリを作ってみた - 凹みTips
はじめに 先月、友人の結婚式の二次会でタイピング対決をしたいとの企画を、幹事の友人から受けました。面白かった要件としては、 二人の顔を 2 台のカメラで映したい タイピングしてる様子をリアルタイムで見たい というものです。これをサーバは Node.js で、クライアントはブラウザで作成しました。エントリ書いてもいいよ、と許可を頂いたので、今後似たような依頼を受けた方のご参考になるように、エッセンス部分をご紹介します。 （追記：2013/11/20） 幹事さんも記事を公開されました： http://tjun.org/blog/2013/11/wedding-typing/ やったこと ホスト PC 側で新郎新婦それぞれの PC からのログインを待ち受けします。イイ感じに○で切り抜いてくれるような PNG をイラレで作っておきました。 それぞれの PC からログインしてもらいます。 ログインし
【React】ブラウザからドラック＆ドロップでaws s3に画像を直接アップロードする - Qiita
s3に画像をアップロードするために、一度サーバを通すのはリソースの無駄なのでやめておきたいですよね。 今回は、ブラウザから複数画像を直接アップロードし、それをReactを用いて描画するところまでやりたいと思います。 コードはすべてgithubに置いてあります。 akameco/react-s3-uploader-sample スクリーンショット aws-sdkを使って署名付きURLを発行 ブラウザに直接アップロードするには、一度サーバに署名付きURLを発行してもらう必要があります。検索するとブラウザ側にアクセスキーやシークレットキーを直接配置している例も見かけましたが、危険なのでやめた方がいいです。署名付きURLですが、aws-sdkを利用することでこの処理を自分で書かずに20行程度で実装可能です。 以下が、s3の署名付きURLを発行するサーバ側のコードです。アクセスキーなどは自分の環境と
タスクランナーを使わずにnpm+webpackのみでWebアプリ開発 - Qiita
はじめに タスクランナーを使わずにnpm+webpackのみでWebアプリを開発するためのシードプロジェクトを作成しました． フロントエンド開発のツールが多く煩雑なので，できるだけシンプルにしたいというのがモチベーションです． テストまわりは未対応で，順次追加していく予定です． [2015/9/7] 画像ファイル（png, jpg）をビルドできるようにしました． シードプロジェクトの内容 ソース https://github.com/nihsuy/webapp-seed-project プロジェクト構成 ├── src : ソースファイル │ ├── index.html │ ├── images │ │ └── logo.png │ ├── scripts │ │ └── app.js │ └── styles │ └── app.scss ├── packa
webpack(v1)とbabelでES6コードをさくっと書く - getalog
最低限のコストで最近よく聞くいい感じのjsを書きたい時の構成をずらーっと書いてみる 準備するもの node/npm (最近はrbenvクローンのnodenvがいい感じ、操作は同じ) webpack babel .babelrc .babelrcを設置しとくとbabelのデフォルト設定がこいつの中身で書き換わる Reactを使わないなら、presetのreactはいらない export defaultされたパッケージをimportした時に.defaultで引くのを許せるなら、add-module-exportsはいらない(後述) Reactいる { "presets": [ "es2015", "stage-0", "react" ], "plugins": [ "add-module-exports" ] } いらない { "presets": [ "es2015", "stage-0"
npm パッケージの unpublish に関するゴタゴタの大まかなまとめ - ヤルキデナイズド
（最終更新：3月24日16:50ごろ） 事件の流れ kik の作者が同名の会社 KIK の弁護士特許出願代理人からパッケージ名を変更するよう要請される 作者が拒否したところ弁護士代理人は npm の運営にコンタクトする 運営が作者の許可なくパッケージを unpublish するパッケージの所有権を移し替える 作者がこれに反発し自身が所有する270あまりのパッケージをすべて unpublish する I’ve Just Liberated My Modules — Medium unpublish されたパッケージは npmjs.com からダウンロードできなくなる unpublish されたうちのひとつである left-pad に間接的に依存したパッケージが多数あったため世界中でビルドがぶっ壊れる npmjs.org tells me that left-pad is not availa
Rubyist Magazine - スはスペックのス 【第 1 回】 RSpec の概要と、RSpec on Rails (モデル編)
『るびま』は、Ruby に関する技術記事はもちろんのこと、Rubyist へのインタビューやエッセイ、その他をお届けするウェブ雑誌です。 Rubyist Magazine について 『Rubyist Magazine』、略して『るびま』は、Rubyist の Rubyist による、Rubyist とそうでない人のためのウェブ雑誌です。 最新号 Rubyist Magazine 0064 号 バックナンバー Rubyist Magazine 0064 号 Rubyist Magazine 0063 号 Rubyist Magazine 0062 号 Kaigi on Rails 特集号 RubyKaigi Takeout 2020 特集号 Rubyist Magazine 0061 号 Rubyist Magazine 0060 号 RubyKaigi 2019 直前特集号 Rubyist
可読性アップのためのes2015入門 - Qiita
さてjavascriptを書いている皆さん、 es2015への対応準備はいかがでしょうか？ 個人的には **2016年こそがes2015元年になるのではないか(ややこしい)**という見立てでおります。 無論、ブラウザ自体の対応はまだまだなのですが、 ブラウザ互換のjavascriptに変換してくれるBabelも(あるていど)安定し、 browserify等々との連携も便利になってきたこの頃、意識しなくても使えるようになってきたのでは、というこのごろです。 「そうは言っても、本来ブラウザで動かないし、javascriptに新しい機能が付くわけでもないし、使うメリットなんてそんなにないのでは？」 と思う方もいるかもしれません。自分もしばらくそう思ってました。 しかし明確なメリットが一つあります。 javascriptならではの読みづらい部分を、圧倒的に読みやすく書き直せることです。 そんなわけ
async.jsでフロー制御 - すぎゃーんメモ
よく分からなくなるのでメモ。 Nodeの非同期を扱うライブラリasync。の機能でフロー制御関数が幾つかある。 var async = require('async'); async.waterfall([ function (callback) { console.log('waterfall 1'); setTimeout(function () { console.log('waterfall 1 done.'); callback(null, 1); }, 500); }, function (arg, callback) { console.log('waterfall 2'); setTimeout(function () { console.log('waterfall 2 done.'); callback(null, arg + 1); }, 300); }, funct
Electronでアプリケーションを作ってみよう - Qiita
はじめに Electronをご存知でしょうか. Electron(旧称: Atom-Shell)は, Atomエディタを開発するために生まれたクロスプラットフォームデスクトップアプリケーションエンジンです. Node.js + Chromiumをランタイムとしており, Atomだけでなく, Slackや先日のBuildで発表されて話題となったVisualStudio CodeもElectronで実装されています. いわゆるWeb系の技術, Node.js + HTML + CSSでアプリケーションを作成できるのが特徴です. 類似した思想のフレームワークとして, node-webkit(NW.js)もありますが, アプリケーションのエントリポイントの考え方等が異なります. このエントリでは, Electronの使い方をサンプルアプリを実装しながら説明していきます. お題 このエントリのお題と
Yosemite風のアイコンが簡単に作れるツール作った - Qiita
はじめに 最近Electronを使った最強のTwitterアプリとかが話題ですが、みなさんアイコンのデザインとかどうしてますか？ UIはともかくとして、Dockにブチ込めるいい感じのアイコンデザインちょっと面倒くさい……。 そんな人のためにこんなツールを作ってみました。 Yosemite風アイコンジェネレーター http://ls8h.com/yosemite-icon/ API 使い方としては2通り用意しました。 まず、アイコンジェネレータのページから直接マウスやペンタブなどで普通に書いてみる方法。 もう一つは、APIです。 ここはQiitaですので、とりあえずkobitoのアプリアイコンを元にAPIを使って自動生成してみたいと思います。 まずは元となるアイコンを用意します。 大きいですね。1024*1024のサイズで作っています。 Dockにあるアイコンを参考に、マークをいい感じの大き
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress.com
GitHub - webtorrent/webtorrent: ⚡️ Streaming torrent client for the web
JavaScriptでクロージャ入門。関数はすべてクロージャ？ - Qiita
