やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

JavaScript

BlueSky API で投稿してみる JavaScript ブラウザ編

GitHub Pagesにアップロードされたページから投稿できる。

ラズパイ4B bookworm Python 3.11 CORSエラーを解決するHTTPSローカルサーバを建てる

WebAPIを叩いたりする時に必要。

WCAGのAPCAで見やすい色を自動算出する

白い背景なら黒い字にする等を自動化する。

SVG矢印を動的変更するカスタム要素を自作した

サイズ、色、角度、角丸、塗りつぶし是非を任意に指定できる。

ローカルHTTPSサーバを立てる(Python + openssl)

Webアプリ動作確認用。

Chromeのタブが多すぎるのでHTMLファイル化して保存する拡張機能を作った

思ったより簡単だった。

ドット絵で遊ぶ Piskel

今週のお題「最近見つけたかわいいもの」。ドット絵ってチマーンとしてて可愛いから好き。

Mapを使わずオブジェクト辞書にこだわった結果

JavaScriptの[Map][]で値を取得するときmap.get('key')と冗長です。でも[Object][]ならmap.keyと短く書けます。ここに夢を見た人々は、[Object][]を辞書として使い、沼に沈み死にます。

構文強調ライブラリの調査

知らない子も生まれたようですが、いつもの奴に行き着きました。

謎バグ 犯人はまさかの奴

くだらない所でハマって、ものすごく悔しい。

演算子オーバーロードする

ライブラリを使用して実現できましたが、実用性皆無です。

配列の最後の要素を取得する5つの方法

どの方法もリスクがあり最適解がない。

IcoMoonでSVGからフォントを作る

好きなSVG画像をインポートして作れる。

アイコンの設計を考える

アイコンの設計を考える レスポンシブなアイコンを作りたい。色やサイズを適切に変更でき、画像データは単一でメンテが容易。そんな理想のアイコンを、どうすれば実現できるかを考える。

JSでプライベートかつジェネレータのメソッドを定義する方法

一瞬ハマったので実際に書いてみた。

Chromeのバグ? デベロッパツールにあるスマホ・シミュレータが不正な画面サイズを返す

JavaScriptのdocument.body.clientWidthなどで画面サイズを取得すると、間違った値が返される。

JSで数値をソートすると文字列順になる罠

[9,10,1].sort()の結果が[1,10,9]になってしまう。バカなの?

HTML文書をつくる20 キャンバス(canvas)

[<canvas>][canvas]は、JavaScriptで描画する領域である。</canvas>

WEB開発の超基礎まとめ

最低でもこれくらい知っておくべき。

テスト用フレームワークを試す【vitest】

[vite]と連携できる高速なテスト用フレームワーク[vitest]を使ってみた。

JSで単体テストする(console.assert)

フレームワークもあるが、まずは標準APIを使ってみる。

フロントエンド開発環境を構築する(Node.js、テンプレートエンジン、プリプロセッサ、トランスパイラ、モジュールバンドラ、フォーマッタ、リント、タスクランナー)

ラズパイ4(4GB, 32bit)にて、WEBアプリやサイトを開発するために。

最小コード例(HTML, CSS, JS)

[規格][]に応じたコードを書いて動かしてみる。

ラズパイ4にDenoをインストールする(失敗)

DenoはNode.jsの後継版。

JSでCSSの変数を保存する(LocalStorage)

閉じたとき、更新したときなどアンロードされたら保存する。

JSでCSSの変数をセットする(CustomProperty)

CSSのカスタムプロパティをJSで操作する。

RustでWebAssembly:HelloWorld

最小コードを書いてビルドし実行して結果が正しいことを確認した。

HTMLのカスタム要素を使ってみた

文字数と読了時間を表示する要素を作ってみた。

右クリック禁止やめませんか? 引用ツールの提案

右クリック禁止は効果がありません。代わりにワンタッチで引用できるツールを導入したほうがよいでしょう。

rtをコピーしないようにする

HTMLでルビを振ったあとブラウザでテキストコピーしたら漢字かんじみたくなるのを防ぐ方法。