Node.js v17 で webpack error - Qiita
digital envelope routines::unsupported Node.js が v17 になって以降（2021年10月19日） 、webpack (v5) で次のようなエラーがでるようになりました。 Webpack in development mode [webpack-cli] Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:67:19) at Object.createHash (node:crypto:130:10) ... <anonymous>:6:1) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initializatio
正式仕様リリース！ JavaScriptの最新仕様ES2022で追加された「全」新機能
JavaScriptの仕様はECMAScriptで、ECMAScript 2015（ES2015）、ECMAScript 2016（ES2016）...というように毎年進化を続けています。 これまでの仕様はES2021でした。 本日6月22日、ES2022は正式仕様として承認され、ES2022が最新仕様となりました。 22.06.2022 Ecma International approves new standards - Ecma International ブラウザ対応も完了しており、全モダンブラウザ（Google Chrome・Firefox・Safari・Microsoft Edge）でES2022の全機能が使えます。 本記事では、ES2022すべての新機能を紹介します。「何が使えるようになったのか？」「どうしてそれが必要だったのか？」が、できるだけわかりやすいように解説しました
Monorepo下におけるJest実行方法のちょっとした改善
Monorepo化されたリポジトリのJestによるテストが遅い問題があり、原因調査とその対応を行なったので、それについての知見をまとめる。 環境 yarn + lerna によって複数 node.js プロジェクトを monorepo 管理している。
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
Vueでコンテキストメニューみたいにネストしたメニューを作る
本記事では以下のコードを参考にさせていただきました。 [Feature Request] Nested menus · Issue #1877 · vuetifyjs/vuetifyWhat will it allow you to do that you can't do today? Create nested menus according to MD spec How will it make current work-arounds straightforward? A current ...github.com v-menuなどを使用するため、Vuetifyが必須となっています。 完成形イメージ 上のような、ネストしたメニューを作ります。 好きなところにDividerをつけたり、それぞれクリックしたときのアクションなどを定義することができます。 サンプルコード 以下、コンポーネ
「グーグルでログインする」ボタンをカスタマイズする方法 | 4breaker's blog
ところが公式ドキュメント通りに実装すると、一つの問題に直面します それは、 ・・・ ・・ ・ 「ボタンのデザインがダサいWebサイトに合わないこと」 です この解決（ボタンのカスタマイズ）方法を紹介します カスタマイズの公式ドキュメントも存在するんですが、相変わらずわかりずらいです Before → After グーグルサインインAPIで表示される、デフォルトのログインボタン。それが、 はい、こちらです 悪くはないんですが、横幅のサイズがレスポンシブに対応できないとか、ウェブサイトのベースデザインに合わないなどの問題があります それを今回、こういう感じで表示できるようにカスタマイズします ボタンデザインのカスタマイズ Login.html ビフォアー <head> <meta name="google-signin-client_id" content="準備編で取得したクライアントID"
JavaScriptで任意のHTML要素をPicture-in-Pictureする
みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac
# CommonJS と ES6の import/export で迷うなら - Qiita
はじめに いつもはes6のモジュール管理方式であるimport/export(ES modules)を使って、npmで手に入れたライブラリや自分で作成したモジュールをロードしているが、たまに思った挙動にならないことがある。また、export defaultしたモジュールをテストしようとしてkarmaでrequire()するとエラーになったりした。そういう場合は、とりあえずmodule.exportsを使ってみるとうまくいったりすることが多いのだが、なぜなのかはあまり考えていなかった。 ということで、実際にはどうなっているのか、またモジュールシステムとは何なのかという点で基本的なことから理解を深めて、es6のimport/exportとの違いを知り、より正しく実装できるようになれば良いと思っている。 結論としては 方針としては基本的にはES6形式で記述するが、CommonJS形式の読み書きが
JavaScriptでマウスカーソルを小さいドットに変更する方法【jQueryなし】 | WEMO
今回は、マウスカーソルを標準の矢印アイコンではなく小さいドットに変更する方法をメモしていきます。 CSSでcursorにドット画像を指定するという単純な方法もあるのですが、今回はJavaScriptを軸にした方法をご紹介していきます。（jQueryには依存しないコードで） まずは完成形をお見せしておきます。（PCで見てね） See the Pen マウスカーソルをドットに変更する by ddryo (@ddryo-the-encoder) on CodePen. このような感じで、マウスカーソルを黒くて小さいドットに変更し、リンクホバー時には少し大きな赤色の円に変更するような演出も加えてみました。 考え方は「遅延しないマウスストーカー」 さて、これからコードを紹介していこうと思うのですが、あらかじめ何をしているのかを説明しておきます。 今回やりたいことは「マウスカーソルをドットに変更する」
TypeScriptのプロジェクトでESLint+Prettierを活用する ｜ Tips Note by TAM
コーディングスタイルに一貫性をもたせことは重要であると広く認識されています。 プロジェクト全体でEnumの使用を禁止する 関数内でのthisを禁止する インデントにはスペースを使う セミコロンは必要でない場合省略する 上記の様なコーディングスタイルはプロジェクトの考え方によって異なると思います。複数人が関わるプロジェクトではルールを明文化していたとしてもコードに一貫性をもたせるのは難しいですし、個人のプロジェクトであってもルールを一貫させるには少なからず苦労します。 そんな問題を解決する為にTypeScriptにはTSLintというリンターが広く使われていましたが、2019年に非推奨とされました。今はJavaScriptのリンターであるESLintにTypeScriptのプラグインを合わせて使うことが推奨されています。 この記事ではTypeScriptプロジェクトでESLint+Prett
JavaScript カメラからの動画の撮影を停止する
JavaScript デバイスのカメラから動画を撮影するでパソコンのカメラから撮影した動画をhtmlページに表示する方法を紹介しました、 今回は、カメラの撮影を停止する方法を紹介します。 以下のようにvideo要素のメディアオブジェクトのトラック情報を取得し、取得したすべてのトラックに対してstopメソッドを実行します。 最後にvideo要素のメディアオブジェクトにnullをセットしてオブジェクトを開放しています。 const tracks = document.getElementById('video').srcObject.getTracks(); tracks.forEach(track => { track.stop(); }); document.getElementById('video').srcObject = null; 関連記事 WEBアプリでプッシュ通知を実装するW
Object.defineProperty() - JavaScript | MDN
Object.defineProperty() で、あるオブジェクトのプロパティを明示的に追加または変更することができます。代入による通常のプロパティ追加では、プロパティ列挙 (for...in ループや Object.keys() メソッドなど) に現れ、値は変更可能で、また削除も可能なプロパティが生成されます。このメソッドでは、これらの詳細事項を既定値から変えることが可能です。既定では、 Object.defineProperty() を使って追加されたプロパティは書き込み不可、列挙不可、構成不可になります。加えて、 Object.defineProperty() は内部メソッドの [[DefineOwnProperty]] を [[Set]] の代わりに使用しますので、プロパティが既に存在する場合でもセッターを呼び出しません。 プロパティの記述子は、データ記述子とアクセサー記述子の二
Node.js からエクセルシートを操作する : まだプログラマーですが何か？
「エクセルファイルを扱えるライブラリ」といえば、Java であれば Apache POI などがありますが、Node.js ではどうだろう？？ と思って調べてみました。その名もズバリの xlsx という npm ライブラリを見つけたので使ってみました： npm - xlsx https://www.npmjs.com/package/xlsx ライブラリ名は xlsx ですが、対応フォーマットは xls や XML に加えて ODS まで含まれていて、かなり柔軟に使えそうです。 【扱うサンプル】 こんな感じのエクセルファイルを用意して使うことにします： データとしては "A1:C14" の範囲にまとまっていて、その右に２軸の折れ線グラフが１つあります。この表の B14 セルは B2:B13 の合計（SUM）、C14 セルは C2:C13 の平均値（AVERAGE）がマクロで定義されています
【Vuetify】v-switchとかv-checkboxのchangeをcancelする
イヤー詰まった。 ◆結論 当然ながらTypeScriptだよ。なんでJavaScriptなんて使ってるわけ？いい大人がさぁ。聡ずかしくないのかよ。 <v-switch :input-value="hoge" @click="piyo" @change="fuga" /> private hoge = false; private piyo(e: MouseEvent) { if (!window.confirm('お前はそれでいいのか？')) e.preventDefault(); } private fuga(){ // 適当な処理 } 答えが分かれば簡単だった。 ◆理解のキモ ようはclickイベント拾って、handlingしてやりゃよかったんですよ。単純な話だ。changeをキャンセルするという発想じゃ勝てなかった。 @clickのemitを拾えば、MouseEventがもらえるから
hccbe 要素の位置と大きさ
HTMLElement.style.top、HTMLElement.style.right、HTMLElement.style.bottom、HTMLElement.style.left HTMLElement.style.width、HTMLElement.style.heighttop、right、bottom、left、width、heightの概念図offsetParent属性で得られるCSSのpositionプロパティがrelative、absolute、fixedのいずれかである祖先要素（包含ブロック）のborder-top下端からこの要素のmargin-top上端までの距離。この際、包含ブロックのpadding-top高は考慮されない。offsetParent属性で得られるCSSのpositionプロパティがrelative、absolute、fixedのいずれかである祖先要
PhotoSwipe
What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cache・Session・Cookie・WebStorage・IndexedDBのデータ保管の違い
[Flutter✖️Firebase]匿名アカウントからGoogleアカウント連携
phiary
Error: Failed to launch the browser process! spawn chrome.exe ENOENT · Issue #5662 · puppeteer/puppeteer