ReactとVueを改善したSvelteというライブラリーについて - Qiita
海外のフロントエンド界隈で話題になっているSvelte 最近海外のフロントエンド界隈でSvelteが少し話題になっています。 この記事では、なんでSvelteが話題になってるのか、そしてReactやVueの代わりに、Svelteを使うメリットについて私が感じたことを共有していけたらと思います。 My talk from @YGLF_IL, 'Rethinking Reactivity', went online yesterday — https://t.co/eoGiBBAkKI. You probably don't have time to watch a 35 minute video though, so I'm going to pull out a few key slides into a quick tweet thread: — Rich Harris (@Rich_H
静的サイトジェネレーター Gatsby - Qiita
静的サイトジェネレーターとは？ Static Site Generator（SSG） WebサイトのHTMLファイルを生成するツールのこと Wordpressのような従来CMSの仕組みは、MySQLなどのDBをもとに、サーバーでHTMLを生成して返すものだった それに対し静的サイトジェネレーターは、コンパイル時にGraphQLやAPIからすべてのデータを取得し全てのHTMLを最初に生成する さらに、生成されたファイルを、Netlifyなどのホスティングサービスを用いて、サーバーレスで公開する仕組みが主流になっている 静的サイトジェネレーターのメリット ※ Netlifyなどホスティングサービスを用いた場合 レスポンスが速い。サーバーでHTMLを動的に生成しないから サーバー代 ¥0✨ サーバーが必要ないため サーバー落ちない。メンテが不要 ※ ただしホスティングサービスが落ちる可能性はあり
Qiitaのユーザーページにナビゲーションタブを追加するUserScript作った - Qiita
Note: Qiita のアップデートにより現在は動作しない。 現状ではユーザーの「LGTMした記事」「フォローしているユーザー」「コメント履歴」「編集リクエスト履歴」を見るためにはいちいち「...」ボタンをクリックしなければいけない。これは面倒なので、より快適に閲覧できるようにナビゲーションタブを追加するUserScriptを作成した。 インストールにはUserScript管理用の拡張機能が必要。 Chrome: Tampermonkey Firefox: Tampermonkey, Greasemonkey // ==UserScript== // @name Qiita User Page Nav // @namespace https://qiita.com/righteous // @version 0.1 // @description Adds an navigation t
ES2019で追加されたflatMap()の使いどころ - Qiita
はじめに ES2019のアップデートで配列のメソッドflatMap()が追加されました。 はじめてflatMap()を見たときは「これはどんなときに使うのだろう」と思いました。 私のようにflatMap()をいつ使うのかピンと来ていない方も多いと思います。 しかし調べていくうちに色々使える事がわかったので、flatMap()の使いどころをご紹介します。 flat()とは まず事前知識として同じくES2019で追加されたflat()について説明します。 flat()は配列のメソッドで、自身の配列の次元を1つ下げたものを返します。 const example1 = [ [1, 2, 3], [4, 5, 6], [7, 8, 9], ]; example1.flat(); // 実行結果：[1, 2, 3, 4, 5, 6, 7, 8, 9] const example2 = [ 1, 2,
【決定版？！】モダンブラウザでIME入力検知：MutationObserver - Qiita
Chromeだけはcompositionendの後に最後のMutationOvserverが発火します。厄介な問題で、後述します。 また、やはり、MacのSafariだけはcompositionend後にbackspaceのkeydownが発火してしまいます。自前でDOM操作する場合はこのEnterは無視するように対応が必要です。 Firefoxは基本的にWindowsとMacで同じ挙動です。素晴らしい。 Safariの問題１：compositionend後のkeydown発火 Safari特有の問題ですが、compositionendの切っ掛けになるEnterキーやBackspaceキー(おそらくDeleteキーも)の入力に対して、compositionend後にkeydownが発火します。これはIME入力中以外のこれらのキー入力と区別しなければ、独自のDOM操作の邪魔になります。com
preventDefault, stopPropagation, stopImmediatePropagationまとめ - Qiita
const div0 = document.getElementById("div0"); div0.addEventListener("keydown", OnKeydown1, false); div0.addEventListener("keydown", OnKeydown2, false); div0.addEventListener("input", OnInput, false); div0.addEventListener("keyup", OnKeyup, false); window.addEventListener("keydown", OnKeydownWin, false); window.addEventListener("keyup", OnKeyupWin, false); addEventListenerの登録順序も表記の順とします。 さて、これを実行し、
top-level awaitがどのようにES Modulesに影響するのか完全に理解する - Qiita
先日、TypeScript 3.8 RCが公開されました。TypeScript 3.8はクラスのprivateフィールド（#nameみたいなやつ）を始めとして、ECMAScriptの新機能のサポートがいくつか追加されています。この記事で取り扱うtop-level awaitもその一つです。 この記事ではtop-level awaitに焦点を当てて、その意味や使い方について余すところなく解説します。top-level awaitは一見単純な機能に見えますが、実はモジュール (ES Modules) と深い関係があり、そこがtop-level awaitの特に難しい点です。そこで、この記事ではECMAScriptのモジュールについても詳しく解説します。この記事を読んでtop-level awaitを完全に理解して備えましょう。 ※ この記事は3分の1くらい読むと「まとめ」があり、残りはおまけで
一度入れたJavaScriptライブラリは二度とアップデートされることはない - Qiita
以下はCloudflareによるレポート、JavaScript Libraries Are Almost Never Updated Once Installedの日本語訳です。 JavaScript Libraries Are Almost Never Updated Once Installed Cloudflareは、WebページにJavaScriptやその他のフロントエンドリソースを配置するための一般的な方法である、CDNJSを支援しています。 今回我々は、CDNJSチームの許可を得て、CDNJSへのリクエストから匿名化・集約されたデータを収集し、インターネットでWebサイトがどのように構築されているかを分析することにしました。 今回のエントリでは、ひとつの疑問に焦点を当てています。 すなわち、いちどJavaScriptライブラリをサイトにインストールしたあとで、ライブラリは更新さ
MediaDevices: getDisplayMedia() method - Web APIs | MDN
options Optional An optional object specifying requirements for the returned MediaStream. The options for getDisplayMedia() work in the same as the constraints for the MediaDevices.getUserMedia() method, although in that case only audio and video can be specified. The list of possible option properties for getDisplayMedia() is as follows: video Optional A boolean or a MediaTrackConstraints instanc
録画 - Hatena::Let
/* * @title 録画 * @description 画面をwebmで録画するやつ * @include http://* * @include https://* * @license MIT License * @javascript_url */ (function() { 'use strict'; if (!navigator.mediaDevices) { alert(location.protocol === 'http:' ? 'httpsでないサイトでは使えません。' : '対応していないブラウザです'); return; } const tag = (name, props = {}, children = []) => { const e = Object.assign(document.createElement(name), props); if (type
bfcache について覚えて帰ってもらいます。
【追記】 「mixiページ」サービス終了に向けてのスケジュールは、2020年8月31日に全てサービス提供終了としていましたが、以下の日程に変更します。 ・2020年9月7日11時頃 モバイル版mixiページ終了 ・2020年9月14日11時頃 PC版、スマートフォン版mixiページ終了 終了時刻は前後する場合がございます。 ダウンロード機能はPC版スマートフォン版mixiページ終了と同時の2020年9月14日11時頃に終了いたしますので、「mixiページ」データのダウンロードをご希望の方は、お早めにダウンロードをお願いします。 以上、どうぞよろしくお願いいたします。 【追記】 終了予定の「mixiページ」とは、SNSmixi全体の中の一部特定サービスの名称でございます。 SNSmixiの全てが終了するわけではございません。2020年8月31日以降も引き続きSNSmixiはご利用いただけます
Nuxt.js、Google Apps Script、スプレッドシート（DB）を組み合わせて検索アプリケーションを作ってみた - Qiita
Nuxt.js、Google Apps Script、スプレッドシート（DB）を組み合わせて検索アプリケーションを作ってみたJavaScriptGoogleAppsScriptVue.jsclaspNuxt Google Apps Script（GAS）で Nuxt 動かしてみたら面白いのでは？ と思い試していたら動いたので、スプレッドシートをDBにして検索アプリケーションを作ってみました！ Nuxt.js の SPAモードを GAS を使って実際に GAS で Nuxt を動かしているURL https://script.google.com/macros/s/AKfycbw9rOqkFPqP4Ym3n7goiL0tI4V3cx0UTOjVM8DTHT8FRG3ogjJs/exec そして Google サイトで上記 URL を埋め込んで完成です。（GAS の 分かりづらい URL を隠
カルネージハートぽいAPIのJavaScript対戦ゲーム作った紹介 - Qiita
JavaScriptのプログラムを書いて対戦させるゲームを作ったのですが、カルネージハートを少し意識したルール・APIとなっているので、きっとカルネージハート Advent Calendarを観に来る方であれば興味を持ってもらえるんじゃないかと思い13日目の記事として紹介。 作ったもの 以下のようにJavaScriptのプログラムを書いて対戦できるゲームです。 Sourcer ( https://github.com/benishouga/sourcer ) といいます。 カルネージハートっぽさ カルネージハートのように以下のように状況を判断してアクションするというようなプログラムが書きやすいAPIとなっています 敵が遠くにいる ⇒ 近づく！ 弾が飛んできている ⇒ 避ける！ 敵が近づいてきた ⇒ 攻撃！ 敵や飛来物を探すAPIはカルネージハートのように扇形のレーダーを使って探すAPIとな
僕は、なぜ絵文字の長さが、直感に反するのか理解したい...!! - Qiita
対象者 UnicodeやUTF-16について、よくわかってない人 -> ここから "😀".split("")で文字化けする理由がわからない人 -> ここから [..."👨👩👧"].lengthが5になる理由がわからない人 -> ここから 文字コードについてもう一度 文字コードは以下の二つで構成されています 符号化文字集合: 文字と、その文字の位置を示す一意の番号の集合 文字符号化方式: 文字に振られた番号をバイト表現にエンコードする方法 符号化文字集合 符号化文字集合は、 文字 その文字の位置を示す一意の番号 この二つの組み合わせの集合のことを指します。 例えばASCIIでは 8bit(128通り) でラテン文字や英数字を表現しています。 しかしASCIIには日本語などの非英語圏の文字が収録されていません。 そのため、日本語を収録したShift-JISやアジア圏の文字を収録した
キング・クリムゾン.js【Guess.js】 - Qiita
Ateam Hikkoshi Samurai Inc. & Ateam Connect Inc. Advent Calendar 2019 7日目は、19新卒@hinoraがお送りいたします。 みなさんはアニメジョジョ５部、見ましたでしょうか？ 僕は今更ながら最近になって見終えました。（めちゃ面白かった） 物語の最後の敵、ディアボロのスタンド「キング・クリムゾン」の能力、とても強力ですよね...! 本人の説明によると... 『読める』…… 動きの『軌跡』が読める…… 『未来への動きの軌跡』が… 『キング・クリムゾン』の能力の中ではこの世の時間は消し飛び…… そして全ての人間はこの時間の中で動いた足跡を覚えていないッ！ 要するに 1. 👁🗨 未来への動きを読む 2. ⌛️ 時間を消し飛ばす という二つの能力を持っているのですが、 今回はそれと大体同じ事ができるGuess.jsをNuxt
ml5js·Friendly Machine Learning For The Web
Breonna Taylor, George Floyd, Ahmaud Arbery, Tony McDade, Regis Korchinski-Paquet, Nina Pop, Monika Diamond, Yassin Mohamed, Finan H. Berhe, Sean Reed, Steven Demarco Taylor, Sandra Bland, David McAtee, Ariane McCree, Terrance Franklin, Miles Hall, Darius Tarver, William Green, Samuel David Mallard, Kwame Jones, De’von Bailey, Christopher Whitfield, Anthony Hill, De’Von Bailey, Eric Logan, Jamario
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Symbol.asyncIterator - JavaScript | MDN
Animation.prototype.finished polyfill
jqueryのFileListのマージ
colorpickerの色選択後にinputへ反映させたい