Webブラウザ上にNode.jsを実装、Webブラウザ上のサーバサイドでNext.jsやVite、Astroなどが実行可能な「Sandpack 2.0」が登場
Webブラウザ上にNode.jsを実装、Webブラウザ上のサーバサイドでNext.jsやVite、Astroなどが実行可能な「Sandpack 2.0」が登場 クラウド上でマイクロVMベースのオンライン開発環境などを提供するCodeSandboxは、Webブラウザ上で抽象化したNode.jsを実装しWebブラウザ上にJavaScriptのサーバサイド環境を作り出すことで、WebブラウザだけでNext.jsやAstroなどを実行可能にする新しいソフトウェア「Sandpack 2.0」を発表しました。 WindowsやMacなどのデスクトップPC用のWebブラウザだけでなく、iOS上のSafariでもNode.jsが実行可能。ただし現時点でのiOS版Safariへの対応は、メモリリークなどが発生するためβ版だと説明されています。 先週、StackBlitzからはWebブラウザ上で実行できるWe
Webブラウザ上でWebAssemblyベースのNode.js環境を実現する「WebContainer」がAPI提供開始。ブラウザ内ファイルシステム、HTTPサーバ、Node.js CLIなど
Webブラウザ上でWebAssemblyベースのNode.js環境を実現する「WebContainer」がAPI提供開始。ブラウザ内ファイルシステム、HTTPサーバ、Node.js CLIなど WebAssemblyを用いてWebブラウザ上でNode.js環境を実現する「WebContainer」などを提供するStackBlitzは、WebContainerにアクセスできるAPIの提供を開始したと発表しました。 Today, after years of battle testing by millions of developers, in collaboration with browser vendors: WebContainer API is now available to everyone. Start building the next generation of inte
HTML 要素の innerText プロパティで要素が生成されうる: Days on the Moon
この記事は HTML アドベントカレンダーの 10 日目の分、兼 JavaScript アドベントカレンダーの 10 日目の分です。 HTML 標準では、HTML 文書を JavaScript などのプログラミング言語から扱うためのインターフェイスも定義しています。そのひとつが HTML 要素の innerText プロパティ、要素の内容を文字列として取得・設定するプロパティです。かつて Internet Explorer が独自に実装し、他の Web ブラウザも追従した結果として標準化されたものですね。 innerText プロパティの値の取得 innerText プロパティで取得できる値は、ブラウザにレンダリングされたようなテキスト内容となります。CSS で display: none; が指定された要素の内容は含まれませんし、display: block; が指定された要素の内容の前
HTML の img 要素と image タグ: Days on the Moon
この記事は HTML アドベントカレンダーの 20 日目の分、兼 JavaScript アドベントカレンダーの 20 日目の分です。 HTML のタグといえば、要素の開始位置、終了位置、そして属性を指定する記述のことですね。開始タグは小なり記号 (<) の後に要素名が続きます。しかしながら、タグに既述した名前とは別の名前の要素が生成される場合があります。 以下の JavaScript コードを実行すると、JavaScript コンソールには (IMAGE ではなく) IMG と出力されます。タグに記述された名前は image なのに、img 要素が生成されているのです。 const div = document.createElement('div'); div.innerHTML = '<image src="" alt="">'; console.log(div.firstChild.
Remember The Milk - MilkScript
MilkScript makes it easy to automate a wide variety of things—for example, creating tasks from templates, removing unused tags, generating task reports, and more. How this works You write code in modern JavaScript and have access to a built-in library that allows you to manage tasks in your Remember The Milk account. There's nothing to install—we give you a code editor right in your browser, and y
A Proposal For Type Syntax in JavaScript - TypeScript
Today we’re excited to announce our support and collaboration on a new Stage 0 proposal to bring optional and erasable type syntax to JavaScript. Because this new syntax wouldn’t change how surrounding code runs, it would effectively act as comments. We think this has the potential to make TypeScript easier and faster to use for development at every scale. We’d like to talk about why we’re pursuin
JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD
筆者はES6以前のVanilla JSがあまり好きではありませんでした。 そこで、バニラJavaScriptをなるべく書かなくていいように、2000年代を通じてさまざまなアプローチを追求してきました。最初はRJS（Ruby-to-JavaScript）、次はCoffeeScriptでした。どちらのアプローチも、バニラJavaScriptより楽しく書けるソースコードを、ブラウザが実行できるバージョンのJavaScriptへトランスパイルするものです。ある程度は、うまくいっていました。 とはいえ、これは明らかにその場しのぎの手段に過ぎず、ブラウザがより洗練されたJavaScriptを理解できる日を待ちわびていたのです。ただ、そんな日が来ることはなく、永久にその場しのぎでやり過ごすのかと思われる時期がしばらく続きました。 しかし、幸いなことにJavaScriptは改善を続け、2015年にはES6
Safe DOM manipulation with the Sanitizer API | Articles | web.dev
Safe DOM manipulation with the Sanitizer API Stay organized with collections Save and categorize content based on your preferences. The new Sanitizer API aims to build a robust processor for arbitrary strings to be safely inserted into a page. Applications deal with untrusted strings all the time, but safely rendering that content as part of an HTML document can be tricky. Without sufficient care,
アクセシブルじゃないクリックイベントを発見する
(() => { "use strict"; const elements = Array.from(document.querySelectorAll("*")); const clickEvents = elements .map((element) => { const listeners = getEventListeners(element); const clickListeners = listeners.click || []; clickListeners.forEach((event) => (event.owner = element)); return clickListeners; }) .flat(); for (const event of clickEvents) { if (event.owner.matches("button, a[href]")) {
Rust+Webフロントの最前線！tauriを試してみた
@Pctg_x8です。 Deno 1.0の登場でRustとWeb関連技術の繋がりがより高まっていく中で、Electronライクな新しいアプリケーションフレームワークである「tauri」を見つけましたのでちょっと触ってみようと思います。 tauriについて 公式サイト: https://tauri.studio/ ※この記事ではv0.9.2をベースに解説しています。 tauriはまだメジャーバージョンが1になっていないため、頻繁にAPIの変更が起こる可能性があります。 概要 フロントはElectronと同じくWebViewですが、ベースの起動プログラム（Main Process）をRustで書くことができるものです。 ElectronではMain ProcessもJavaScript（Node.js）なので、例えば大量のデータを並行してバッと読むとか解析するとかの処理をさせようとすると マル
全世界の夜更かしさんに送る、Google Home(mini) + Nature Remo + 鯖(Synology NAS) + Node.jsでつくる夜更かし防止装置のすヽめ(google-home-notifier未使用) - Qiita
全世界の夜更かしさんに送る、Google Home(mini) + Nature Remo + 鯖(Synology NAS) + Node.jsでつくる夜更かし防止装置のすヽめ(google-home-notifier未使用)JavaScriptNode.jsIoTGoogleHome はじめに ついつい夜更かしをしてしまうの方に向けにGoogle HomeとNature Remoを組み合わせて「指定した時間以降、部屋が明るければGoogle Homeより早く寝るように警告を発する装置」をNode.jsで実装する作例をご紹介します！！ 市販品を組み合わせるだけなのでお手頃に作れます！！(たぶん) ちなみに似たような作例はよくありますが、多くの記事では「google-home-notifier」と呼ばれるGoole Homeに簡単にプッシュ発話をさせるライブラリが使われており、google
Web Share APIを試してみた - アクトインディ開発者ブログ
morishitaです。 いこーよやいこレポでは、情報を共有してもらいやすいようにシェアボタンをページに置いています。 シェアボタン 現状はTwitterやFacebookなど各サービスごとにシェアボタンを用意していますが、 モバイルに於いてはWeb Share APIを使っても良い状況ではないか？ と思って調べてみました。 ちなみにCan I use... ではこんな感じです。 Can I use ... Web Share API スマホに限るとiOS SafariもAndroid Chromeもサポートしているようです。 モバイルでは使えそう?! コード とりあえず、試すためのページを用意をしないと、ということで Web Share APIを使ったシェアボタンだけのページを作りました。 コードは次の通りです。 <html lang="ja"> <head> <meta charset
JavaScriptに参照渡し/値渡しなど存在しない - Qiita
tl;dr JavaScriptに参照渡し/値渡しなど存在しない 存在するのは変数に入る値の参照のみ 変数に値を代入すると参照が切り替わる という様に考えれば不毛な議論を避けられるのではないかという妄想 そしてタイトルは明らかな誇張表現 はじめに よくJavaScript界隈で見られる変数に関する話題として、「値渡し/参照渡し」が上がりますが、そもそもJavaScriptにはC++のような参照渡しなど存在しないです。それなのにわざわざ値渡し、参照渡しと分類することで、勝手が違うC++の参照渡しと混同しかねないです。実際にそのような話題が人目に付く程度盛り上がったときには、大抵「それはC++の参照渡しと違う」などと指摘が入り、JavaScriptでの参照渡しと呼ばれていたものが「参照渡しのようなもの」で片付けられるのを何度も見たことがあります。 ここまでの自分はJavaScriptにはJav
Webでどこまで遊べるか試してみた - Qiita
Sound Walker という Web アプリを作りました。 ↓ここで遊べます↓（スマートフォンで開いてください） https://www.sound-walker.app リポジトリはこちら https://github.com/Leonardo-mbc/sound-walker ホーム画面に追加することで、インストールしたアプリのように遊べます。 Webでどこまでできるかをやってみようと思って作り始めて、 ほっといて数年たったら技術がみるみる変わっていて、いろいろ味が出てきました。 Service Worker, Add To HomeScreen などなど Webでできるゲームってだけだったのが、普通にスマホで動くゲームになる時代になっております。 Sound Walker で使ってる技術は WebGL(Three.js), WebAudioAPI, ServiceWorker,
スプレッド演算子……じゃなくて、スプレッド構文の使える場所とか使い方とかそういう。（配列とかおれおれAdvent Calendar2018 – 20日目） | Ginpen.com
const arr1 = [11, 22, 33]; const arr2 = [44, 55]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // => [ 11, 22, 33, 44, 55 ] const arr4 = [0, ...arr1, 0, ...arr2, 0]; console.log(arr4); // => [ 0, 11, 22, 33, 0, 44, 55, 0 ] 次の個所で利用可能です。 配列初期化子 [] オブジェクト初期化子 {} 関数呼び出し時の引数 () 分割代入 = 、関数の仮引数 () 配列初期化子 [] ... に続けて反復可能 (iterable) なオブジェクトを置きます。まあ普通は配列ですね。 ECMAScript® 2018 Language Specification 12
Google Apps Scriptを使って簡易APIをサクッと作る - Qiita
今回、クライアント側のみでフォームに入力されたコードを事前に決められたコードかどうかを判断したい、という要望がありました。 が、適切なコードかどうかをクライアントサイドに埋め込んでしまうと問題があるので、どうしたらいいかを考えた結果、Google Apps Scriptを使ってSpreadSheetに記載されたコードとのマッチングを行う、という方法に辿り着きました。 今回はその方法と簡単なコードのメモを残したいと思います。 実際の動作デモ jsdo.itの動作デモ Google SpreadSheetデータサンプル jsdo.itのサンプルに、SpreadSheetに記載されてるコードを入力してCheckボタンを押すと、バリデーションしてくれます。 手順 実際の手順については以下のフローを踏みます。 Google Spreadsheetを新規作成 Spreadsheetのスクリプトエディタ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今までああ書いてたアレ、これからはこう書けそう 2022 - DevFest Tokyo 2022
JavaScriptで「そうはならんやろ」「なっとるやろがい！」という事例が見つかる／割と古典的な罠らしい【やじうまの杜】
Using es6 promises server side in Apps Script - Desktop Liberation
空じゃないけど空の配列の話。（配列とかおれおれAdvent Calendar2018 – 22日目） | Ginpen.com