Memory NoteというプログラマブルなTodoアプリのミドルウェアを書きました。 ややこしいですが、大雑把に言えばReminder的なTodoリストを扱うREST APIをCloudflare Workersで動かす仕組みです。 Headless Todo Appという単語がしっくりくるのかもしれません。 単体だと何ができるのかよくわからないものですが、Todoサービスを自分用に作れる仕組みです。 対象ユーザーは主に自分ですが、Memory NoteのREADMEにセットアップ方法や関連するクライアントの実装も公開しています。 自分の場合は、iOSのショートカットから音声入力で、メモをGitHub Projectのボードにカードして記録しています。 この記録したメモを、iOSのWidgetsとしてホーム画面に出したり、AlfredのHotKeyでワンタッチで表示したり、部屋に電子ペー
SPA認証トークンはlocalStorageでもCookieでもない、Auth0方式はいいねというお話 - @mizumotokのブログ
SPA認証トークンをどこに保存するかは論争が絶えません。localStorageやCookieがよく使われますが、Auth0は違う方法を採用しています。この記事では、Auth0のトークン管理の方式を理解でき、トークン管理上のセキュリティへの理解を深めることができます。 SPAの認証トークンをどこに保存するか ブラウザでトークンを保存できる場所 保存場所の比較 メリット・デメリット Auth0のアプローチ トークンはインメモリに保存 OpenID Connect準拠とトークン取得のUI/UXの悪化回避を両立 Auth0のjsライブラリ ログイン アクセストークンの（再）取得 図解 ログイン アクセストークンの（再）取得 自サービス内の認証だけのもっと簡易な構成 ログイン IDトークン取得 まとめ SPAの認証トークンをどこに保存するか React やVueで認証付きSPA（Single Pa
Macaron | Visual component editor for Web development
Macaron is an open-source UI design tool to create and maintain Web Components.
2022年に起きたフロントエンドの変化
Burikaigi 2023 https://burikaigi.dev/ Twitter https://twitter.com/__sakito__
配信動画はこちら https://www.youtube.com/watch?v=x1XdqWtPUdg もし良かったらムーザルちゃんねるのチャンネル登録お願いします！ https://www.youtube.com/channel/UCLPHXwLp90A5R69Eltxo-sg Tw…
JSONをいい感じに見るCLIを作った
その他 OS の方は GitHub のrelease ページから DL することができます。 使い方 tv はミニマムな CLI として作ったのでテーブル表示の機能とそれに付随したオプションのみを提供しています。 配列になっている JSON をテーブル表示する キーを指定することでそのキーを使ってソートできる いくつかのスタイルでテーブルを表示できる 以上が主の機能です。 Table 表示 ユースケースとして JSON が帰ってくる API を想定します。 API の例として jsonplaceholder を利用します。 今回は https://jsonplaceholder.typicode.com/users を使います。 この API は以下のようなデータが返ってきます。 $ curl -s https://jsonplaceholder.typicode.com/users [
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと
Webフロントエンド入門
まずはじめに HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ
効率よくコーディングを進めるためにChatGPTを使ってみよう
この記事について この記事は、 Web制作の基礎から学べる「Webコーディングスクール」 などの資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 ChatGPTとは ChatGPTはOpenAIが開発した対話型のチャットボットです。質問を入力すると質問に対する回答が出力されます。 今回はChatGPTを使って、効率よくコーディングを進めてみます。 headタグ内のコードをChatGPTで生成しよう HTMLの大枠をChatGPTを使ってコーディングしてみよう グロナビをChatGPTで生成してみよう ボタンをホバーした時のCSSをChatGPTで生成してみよう H
はじめに Webエンジニアの皆さん、日々の業務お疲れ様です。皆さんは、さぞや楽しいエンジニアライフを送っていることでしょう。最近は技術の進歩も落ち着いてきましたので、Rustなんかに手を出して、先行者利益を目論んだりしているのではないでしょうか。 さて、そんな楽しい中、たまにやってくる何とも言い難い案件というのが「WordPressのテーマ作成」です。普段、大規模開発や自社サービスに携わっている方は、WordPressに関わることはないかもしれませんが、請負業務やフリーランスの方には、ふと湧いてくる案件でもあります。そして、何かと言い訳を付け、できる限りWordPress関連の案件は避けているのではないでしょうか。 なぜ、エンジニアはWordPressを嫌うのか エンジニアというのはWordPressを嫌う傾向にありますが、それは何故でしょうか。 プライドがゆるさない WordPress界
この記事は、 Rails を主戦場としている自分が今後学ぶべき技術について(随筆) | うなすけとあれこれ についてのアンサー記事です。 うなすけ君が Ruby on Rails で育ってきたように、僕も JavaScript とともに育ってきたという自覚があります。なので、これについて書くことは、ポジショントークは避けられない、という感覚があります。 冷静に比較しようとも思いましたが、やっぱり開き直って思いっきりポジショントークをすることにしました。そっちのほうが面白いと思うので。 自分の基本的な主張は、こちらの記事にあるとおりです。 Frontend Study #1: 基調講演 - Frontend 領域を再定義する 自分と Ruby on Rails 僕は、キャリアとしては Rails の会社で JavaScript を書いてきたことが多かったです。学生の頃は socket.io
先日、このようなツイートを書いたところ、かなりの反響がありました。 JavaScript の正規表現の脆弱性の例でいうと、例えば /\s+$/ は脆弱性があると言える console.time(); /\s+$/.test(" ".repeat(65536) + "a"); console.timeEnd(); 結構時間がかかるのがわかる。でも /\s+$/ を見て「これは危険だな」と理解出来る人はそんなにいない。JavaScript に限らないけれど。 — Takuo Kihira (@tkihira) February 17, 2022 これは一般に ReDoS (Regular expression Denial of Service) と呼ばれる脆弱性です。正確に理解するのが難しい脆弱性なので、少し解説してみたいと思います。 結論 長い記事になるので、最初に「とりあえずこれだけ知っ
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか https://d.potato4d.me/entry/20220405-nodejs/ へのアンサーソング。 プログラミング言語としての JavaScript の話をする。 2010年頃、Python 2 でプログラミングを学習した自分にとっては Node.js + CoffeeScript が Better Python だった。 CoffeeScript は当時の JS(ES3~5) に足りない機能を補ってくれて、Python と同じく空白制御のオフサイドルールなのが気に入った。見た目が少しだけ Ruby っぽいので当時全盛だった Rails の人間に訴求するにも有利だった。 Node.js のモジュールシステムである Commonjs は Pytho
Your shopping website is not an SPA. I repeat: your shopping website is not an SPA. Stop trying to sculpt David with a JS chainsaw and get yourself an HTML/CSS chisel.— Alex Russell (@slightlylate) 2021年8月10日 この主張、界隈（少なくとも自分の観測範囲）では割とよく見かけるし、なんか定期的に話題になるトピックなのかなーと。 まあ持論としてもコレには概ね同意しており、会社のスタンスとも相まって、常日頃からぼんやり考えてたりすることでもある。 で、そんな折にこのツイートを発見して、さらにそれに言及してる人々を見て、ふと自分でも現状を整理しておきたいなーという気持ちになったので筆を執った次第。
ブラウザキャッシュの仕組みについてまとめた
Web開発において、ページの読み込み速度は非常に重要になります。 そのためにもブラウザのキャッシュは効率的なWebサイト運営に不可欠な機能です。 ブラウザのキャッシュには次のHTTPヘッダを設定することができます。 Expiresヘッダ Cache-Controlヘッダ Last-Modifiedヘッダ ETagヘッダ これらのキャッシュには強いキャッシュと弱いキャッシュで分類が可能です。 「Expires」「Cache-Control」は強いキャッシュであり、「Last-Modified」「ETag」は弱いキャッシュに分類できます。 強いキャッシュと弱いキャッシュ 強いキャッシュは設定された期間内は完全にローカルキャッシュを利用して、サーバーへのリクエストを行いません。 一方で弱いキャッシュはキャッシュされたリソースの検証が必要であり、ETagやLast-Modifiedヘッダを利用して
はじめに 今回の記事では、個人の独断と偏見で2022年～2023年で必ず確認するべきGitHubのリポジトリを紹介する。私のTwitterでこれまで紹介したものもあれば、そうではないものもある。 GitHubはプログラマーにとって、普段の学習・開発を進めるうえでもっとも重要な情報源の１つである。本記事では、分野ごとに確認するべきGitHubリポジトリを紹介する。 なお、今回の記事で紹介するGitHubリポジトリの分野は以下の通り。内容はWeb開発に特化している。 確認必須 Web Python JavaScript TypeScript ちなみに、「確認必須」は分野を問わずすべてのプログラマーに役立つGitHubリポジトリを紹介している。 今回の記事を通して、年末年始の学習・開発に大いに役立ててもらえたら幸いだ。 確認必須 freeCodeCamp 世界最大規模のプログラミングメディア「f
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 今回はVSCodeでおすすめの拡張機能を分野別に紹介していきます。 拡張機能は下記の分野に分けて紹介していきます。 VSCodeを使う全員向け Web制作関連 HTML&CSS関連 WordPress関連 フロント向け JavaScript React Vue サーバーサイド向け PHP Ruby その他 拡張機能を利用することで開発の生産性を上げることができるので、ぜひ参考にしていただければなと思います。 この記事の対象者 プログラミング初心者の人 分野別におすすめの拡張機能を知りたい人 開発の生産性をより上げたい人 VSC
プログラミング1ミリも分からない人がGemini CLI始めるまでの全手順（Win篇）｜ミヤマ｜営業部にいるデザイナー
【無料】で全員、Gemini CLIを動かすまで読めます！ 会員さんは、ボーナス記事までお読みいただけますよ😊 GoogleのGemini CLIが無料ですごい！ なんかよく分からんが、MCPにも対応？とかなんとか……。 とにかく、すごく便利そうなのは分かった！ そしてAIで自然言語で処理できるっぽいのも分かった！ 「でもインストール分からない～🤤」 「プログラミング1ミリも分からない～🤤」 というド素人、プログラミング全然分からないわたし「ミヤマ」と、サポーターの「Gemini（WEB）くん」との戦いの記録を共有します。 ターミナルを「黒い画面」と言う、本気で1ミリも分からない人間がインストールして使えるようにセットアップするまでの全記録です。 ちなみにAIじゃなくて、人間ががんばって書きました！ 💡オススメなポイント💡 プログラミング分からない人特有の「つまずきポイント」も、
2024年バージョンの全面改定された新しい本が公開されているので移動してください 関数型プログラミングをゼロからわかりやすく実用的に幅広い視点から解説！〜 圏論からFRPの構築まで a岡部 健Ken Okabekentutorialbook@gmail.com 関数型プログラミングが『銀の弾丸』である という非常識な常識 2022Functional Programming as the Silver bullet, that is the Insane common sense 2022
JSer.infoは2011年1月16日に公開したJavaScriptの情報サイトで、2021年1月16日で公開してからちょうど10年です。 JSer.infoでは、10年間で10201サイト紹介し、522コの記事書いてきました。 JSer.infoの紹介したサイト数(累計)。ソース 10年間途切れることなく毎週更新していて、月別の記事数は毎年同じ推移です。 JSer.infoの月別の記事数。ソース この記事では、10年間やってきたJSer.infoの目的を振り返り、 JavaScriptの情報の集め方、書き方、まとめ方について書いていきたいと思います。 ⚠️ すべてを書いているのでものすごく長いです。 この記事やJSer.infoに関する意見や感想などは、次の場所に書いてください。 この記事をTweetする Twitter: #jserinfo GitHub Issue: JSer.in
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事では、Webフロントエンド開発において役に立つと思われるサービスやツールをまとめます。 全般 Can I use 指定した特定の機能が、どのブラウザのどのバージョンで利用可能かを確認するためサービスです。新しいJavaScriptのAPIやCSS3の機能を使ってモダンなWeb開発を行う場合、必須とも言えるくらい利用することになります。 指定した国におけるブラウザのシェア情報をもとにして、特定の機能が何割のユーザーで使用可能かを調べることもできます。 npm / webpack BUNDLE PHOBIA 指定したnpmパッケージ
プログラミングの原則：構造化テキストを文字列結合で作らない、置換でいじらない - Uzabase for Engineers
こんにちは、ソーシャル経済メディア「NewsPicks」のむとうです。 先日から『Ghost of Tsushima』の開発者が書いた『ルールズ・オブ・プログラミング』という本をちょっとずつ読み進めていて、プログラミング熱が高まっています。この本は大きな指針を示すだけで具体の話をするものではないのですが、読み物として面白いので私も似たようなことをやってみたくなりました。 何年もこういう仕事をしているとバグが入るパターンというのが見えてきます。そしてだいたいどこに行っても何の仕事でも似たようなことをすることになるのですが、今回の話もその一つです。 構造化テキストを文字列結合で作らない、置換でいじらないというのはこれだけみると何のことか分かりづらいかも知れませんがSaaS Product Team セキュアコーディングの啓蒙 第2回 （SQL インジェクション編）の内容とある面では同じ話です。
2021.05.21 働き方 登大遊落合陽一イベント 4月13日から17日にかけてエンジニアtypeが開催したオンラインカンファレンス『ENGINEER キャリアデザインウィーク』（ECDW）。本イベントの基調講演に登壇したのは、登大遊さんと落合陽一さんのお二人。 前編の記事に引き続き、本記事ではセッション後半の参加者からの質疑応答パートの内容を、一部抜粋してご紹介しよう。 ＞＞前編記事も合わせて読む 登 大遊さん（写真左） 1984年兵庫県生まれ。2003年に筑波大学に入学。同年、IPA（独立行政法人情報処理推進機構）の「未踏ソフトウェア創造事業 未踏ユース部門」に採択、開発した『SoftEther』で天才プログラマー／スーパークリエータ認定を受ける。17年、筑波大学大学院システム情報工学研究科博士後期課程修了。博士 (工学)。現在、IPAサイバー技術研究室長のほか、ソフトイーサ株式会社
なぜ僕が「SPAはコストが高い」と考えているのか
どうもみなさんこんばんは ちょっと前に「個人開発者やスタートアップの初期からSPAで開発するのはコスト高いっすよね」みたいな事を書いたらフロントエンドエンジニアの皆様からバチバチに叩かれた僕です 彼らには彼らの考えがあるのでそれはどうでもいいのですが、どういう理由があってその発言をしたのか～と言う部分が気になっている方もいたようなので説明しておこうと思います ちなみに今でも全く意見は変わっておらず、この発言に同意できるかできないかは単純に視点の違い、規模の違い、スキルの違いだと思ってます 追記: もちろんSPAじゃないと実現できないようなサービスを作りたい場合はSPA一択ですし（インタラクティブにHPつくるサービスとか。でも世の中の95%くらいのサービスはそうじゃないと思います）、サイトの利用はログインした人にだけ提供するような業務系ツールなどはまた話が別です 前提の話 こういう記事ではコ
最近趣味や仕事の Web アプリケーションでメモリリークに遭遇して、頑張ってメモリリークの原因を突き止めて修正する、ということがあった。その過程でメモリリークについて色々調べて知見が溜まったので、学習資料の紹介という形でアウトプットしてみる *1。 前置き 紹介する記事がかなり偏っていることに注意 冒頭で触れたメモリリークを解決するために読んだ記事をまとめただけなので、内容にそれなりの偏りがある 例えば id:mizdra が遭遇したメモリリークは全てブラウザ上で発生していたものだったので、これから紹介する内容も主にブラウザにおけるメモリリークに焦点を当てたものになる GC がどうメモリをどう解放しているか、何故メモリリークが発生するのかは全てカット 調べれば色々な記事が出てくるので、必要に応じて読んでください 基本的な知識を抑える まずメモリリークとメモリ撹拌の違いを学ぼう どちらも同じ
DevLOVE X Day1 C-5のセッションです。 ITの活用範囲の広がりとともに、費用・品質よりもデリバリを優先するプロジェクトも増えてきました。しかし「しっかり考えるよりも、作ってリリースしちゃおうぜ、正解なんて誰にも分からないんだから」というマントラを唱えながら、返済見込みの立たない大量の技術的負債を抱える。それが最善の選択なのか、もう少しだけ立ち止まって考えてみませんか? YAGNIという言葉を便利に使いすぎてはいませんか? コードを書きなぐるのと、ちょっと考えて設計して作るのとで、そんなに開発スピードに違いがありますか? 考えてみたいと思います。
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すべての新機能を紹介します。「何が使えるようになったのか？」「どうしてそれが必要だったのか？」が、できるだけわかりやすいように解説しました
タリーズの件、CSPが設置されていたら防げていたという話がありますが、それは正しいでしょうか？ CSPを設定していなかったとしても、想定していない外部へのリクエストが発生していないか、定期的にチェックすることも大事ですよね？ タリーズのサイトからのクレジットカード情報漏えいについて、CSP(Content Security Policy)やintegrity属性（サブリソース完全性）の重要性がよくわかったという意見をX(Twitter)上で目にしましたが、これらでの緩和は難しいと思います。 まず、CSPの方ですが、今回の件では元々読み込んでいたスクリプトが改ざんされたと考えられるので、オリジンとしては正規のものです。evalが使われていたのでCSPで制限されると考えている人が多いですが、evalは難読化のために使われているので、evalを使わないことは可能です。個人的には、難読化しない方が
を読んで思い出したのでご紹介です。 元の記事と同様に以下の関数 sum について、 function sum(nums, acc = 0) { console.log({ nums, acc }); if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } この関数sumの引数 (nums と acc) の呼び出しごとの変化を見たい場合は、所謂プリントデバッグや debugger を使うのは一般的なテクニックとしてよく知られていますが、このような関数呼び出し時の引数を知りたい場合はmonitor(function)という関数を使うことで同様の効果を得ることが出来ます。 この場合は monitor(sum)とした後に、関
はじめに 本当に悔しいし許せないし、エンジニアとして不甲斐ないです。2025年2月26日深夜にハッキングにあいました。どのように相手と繋がり、どのような手口でハッカーに資産を抜かれたか、コードベースで全てお伝えします。今後同じ被害に遭う方が少しでも減ることがあればこんな嬉しいことはないです。 コード解説、さらに対策案も書いていきます。もし他に良い対策案などあればコメントでご教示ください。 ハッカーとのやりとりの流れ ハッカーとは Linkedin でブロックチェーンを使ったプロジェクトを手伝ってくれないかという連絡がりそこからやりとりが始まりました。そして移行の大まかな流れは下記のような感じです。 Linkedinでプロジェクトを手伝ってほしいと言う内容でDMがくる Githubリポを見て実装できそうか確認してほしいと言われる 自分のGithubアカウントを共有してプライベートリポジトリに
自己紹介 https://x.com/mizchi Node.js とフロントエンドの専門家 経歴 ゲームクライアント開発 Electron アプリ開発 サードパーティスクリプト フリーランス(2回目) 現在: 1ヶ月でパフォチュする傭兵 Core Web Vitals CI/CD 今日のスコープ 話すこと 主にフロントエンド/アプリケーション視点での計測 とくにエンドユーザーから見たウェブパフォーマンス体験 話さないこと 各クラウドやDBに特化したチューニング 結果として観測できるが、最初からターゲットにはしない パフォーマンス傭兵を始めた経緯 前職でサードパーティがサイト全体に与える影響(CWV)について調査 とにかくいろんなサイトを外部から計測 真の問題を特定しても「弊社とは無関係」で打ち返す以外なく、歯痒い コスパよく直せる部分をみんな放置している！！！ 非機能要件の優先度が上がら
Mermaid Flow is a Visual Mermaid live editor that aims to simplify creating Mermaid JS Diagrams online. Currently Mermaid Flow supports Flowchart diagrams, giving you the ability to Drag and Drop nodes, edges and labels to create your Flowchart diagrams visually. This mermaid live editor is useful for creating and maintaining complex diagrams such as Software Architecture diagrams. Once drawn, sim
Rails の問題は Rails のベストプラクティスがフロントエンドのベストプラクティスの邪魔になるどころか全く逆方向で相反してる点です。DHHの思想がフロントエンドと根本的に逆行してる。そういう人が作るフレームワークなのでwebpackerの抽象化を根本的に間違ったりする。 — prev.js (@mizchi) December 1, 2020 昨日もリプライで少し書いたけど、DHH自体が直近のHeyの開発でも明確にJavaScriptというものを触れないようにすることを是としているような主張をしているので、DHH wayが色濃く反映される以上この状態はもう避けられない気がしている — potato4d / Takuma HANATANI (@potato4d) December 1, 2020 Railsがフロントエンドの最先端をゆく人々1から良く思われないのは事実として。 Vie
ウェブサイトの表示スピードはサイトの健全性における重要な観点の一つです。Googleが提唱するCore Web Vitalsコア・ウェブ・バイタルズと呼ばれる指標の中にもサイト表示スピードに関する項目があり、表示されるまでの時間が単なるユーザー体験だけでなく、SEOでも無視できない存在です。表示スピード低下の要因はネットワークやサーバーサイド、そしてフロントエンドまで広範囲におよびます。本記事ではその中でも画像の読み込みについて改善できるテクニックを改善前と改善後を比べながら紹介します。 改善前サンプルを別ウインドウで開く 改善後サンプルを別ウインドウで開く 画像読み込みBefore / Afeter 上図はLighthouseによるチェックの結果です。Lighthouseはウェブサイト検査ツールで、ウェブページのパフォーマンス、アクセシビリティ、SEOなどの状態を計測できます。Googl
徳丸さん、こんにちは。 読売のような大手メディアのサイトでもサポート詐欺の偽警告が表示されるようになってしまいましたし、今の時代は広告ブロッカーが必須と考えたほうが安全なのでしょうか？ 徳丸が書いていないことを質問いただくことが時々ありますが、私が書いてないのは書きたくない理由があるから（単にめんどうくさいも含む）です。ですが、せっかく質問いただいたので、思うところを書いてみようと思います。 まず、私自身は広告ブロッカーを使っていないです。その理由は、広告ブロッカーには危険なものがある（原理的にあり得るし、過去にあった）からです。過去には、広告ブロッカーが元の開発者から売却され、マルウェア化した例が複数あります。具体例は示しませんが、検索するとすぐに見つけられると思います。 広告ブロッカーがマルウェア化すると、これらはブラウザアドオンの形で動くため、非常に強い権限があり、すべてのサイトの情
とにかくケチりたい、そんな気持ちで作ったツールの話です。 元々開発にCline(Claude Dev)やAiderなどの開発ツールを駆使していました。 ただ、APIの料金が常に心配で、できる限り安く済ませたい気持ちもあり、Claude Proを契約してWeb版にファイルを1つ1つアップロードする日々を過ごしていました。 ある日それが面倒になってきて「全部1ファイルにしたらいい感じに読み込んでくれるのでは？」と思い、作ってみたら思いのほかうまくいったので公開しました。 百聞は一見にしかずということで、 こちらのデモにお気に入りのGitHubリポジトリ(例: honojs/hono)を入力してみてください。 Claudeが得意とするXMLっぽいフォーマットで出力し、そのままClaudeにアップロードすることができます。 完全にAIバブルの波に乗ったとも言えるのですが、多くの競合がいる中でスター
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに はじめまして、セキュリティエンジニアのSatoki (@satoki00) です。今回はブラウザの開発者ツールのネットワークタブから隠れて、Webサイト内の情報を送信する手法をまとめます。所謂Exfiltrationというやつです。中にはCSPの制限をBypassするために用いられるテクニックもあります。CTFなどで安全に使ってください。 前提 発端はWeb上でテキストの文字数をカウントできるサイトが閉鎖する際の話です。カウント対象のテキストデータがサイト運営 (やサイトを改竄した攻撃者) に盗み取られていないかという議論が巻
スピーカー自己紹介、『JavaScript コードレシピ集』を出版池田泰延 氏（以下、池田）：みなさんよろしくお願いします。ICSの話として、私と鹿野の2名で発表します。HTMLとかCSSとかJavaScriptとか、フロントエンドまわりの最新を説明していきたいと思います。では始めていきましょう！ ます自己紹介します。ICSの池田と言います。株式会社ICSの代表をやっています。これはオフィスの写真でして、南麻布にあるのですが、こんなところで仕事をやっています。今はこの状況下なので、会社にはほとんど誰も行っていませんが、こんなところでやっていました。 JavaScriptに関して2年ほど前に『JavaScript コードレシピ集』という本を出しています。この本はまだ役に立つ内容もあるかなと思いますので、もし書店で見かけましたらぜひご購入を検討ください。宣伝でした。 Webの劇的な変化は少なく
素晴らしい課題でコーディング意欲を高めよう。 Photo by Ferenc Almasi on Unsplash. はじめに コーディングを上達させる最も効率的な方法の1つは、できるだけたくさん作ることです。 コーディング課題は、ものを作ることで自分のスキルアップする楽しい方法です。この記事のリストを参考に、何か選んで作り始めましょう！ 急いでいる時や、コーディングのアイディアを枯渇させたくない時は、100以上の課題をここにまとめてあります。 課題には好きなツールを使えるので、練習したいものがあれば、気軽に挑戦してみてください。 1. タスクマネージャUI なんて美しいアプリケーションでしょう！クリーンでモダン、インテリジェントなUIです。 Aysenur Turkによる「CSSグリッドを使ったタスクマネージャーUI」 学べること HTMLでCSSを使用する方法。新しいCSSグリッドを試
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
記憶に残らないものをメモするためにMemory Noteという仕組みを書いた
JavaScript 今ドキな書き方 ES2020
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA
WordPressのテーマを作る羽目になったWebエンジニアへ
Re: Rails を主戦場としている自分が今後学ぶべき技術について
正規表現の脆弱性 (ReDoS) を JavaScript で学ぶ
なんでもSPAにするんじゃねぇ！という主張のその先 - console.lealog();
【決定版】2022年～2023年で必ず確認するべきGitHubリポジトリ 40選
【分野別】VSCodeのおすすめ拡張機能まとめ - Qiita
関数型プログラミングが『銀の弾丸』であるという非常識な常識2022
JSer.info 10周年: JavaScript情報の集め方、書き方、まとめ方
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
Webフロントエンド開発で役立つサービスまとめ - Qiita
登大遊・落合陽一に7つの質問。最もけしからんエンジニアとは？【ECDWレポート】 - エンジニアtype | 転職type
ブラウザにおけるメモリリークを解決するために読んでおけると良い資料 - mizdra's blog
WebAssemblyのWeb以外のことぜんぶ話す
正式仕様リリース！ JavaScriptの最新仕様ES2022で追加された「全」新機能
タリーズの件、CSPが設置されていたら防げていたという話がありますが、それは正しいでしょうか？ CSPを設定していなかったとしても、想定していない外部へのリクエストが発生していないか、定期的にチェックすることも大事ですよね？ | mond
Chrome Devtoolのmonitorを使うと関数の呼び出しを観察できて便利 - ぱすたけ日記
Web3開発者をねらったハッキング手口の全て（わたしは全て抜かれました...）
なぜあなたのウェブサイトは遅いのか
Online Mermaid Visual Editor | Mermaid Flow
Railsを主戦場としている自分が今後学ぶべき技術について(随筆) | うなすけとあれこれ
1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA
徳丸さん、こんにちは。 読売のような大手メディアのサイトでもサポート詐欺の偽警告が表示されるようになってしまいましたし、今の時代は広告ブロッカーが必須と考えたほうが安全なのでしょうか？ | mond
思いつきで作ったAIツールが5000スターを獲得した話
ブラウザ開発者ツールのネットワークタブに表示されない情報送信手法 - Qiita
「Angular」「React」「Vue」の3大フレームワークに集約 ICSの代表が教える「フロントエンド技術」のトレンド | ログミーBusiness
フロントエンドの刺激的なコーディング課題6選 - Qiita
www.tokyo-np.co.jp
note.com/nix_ki
hinata0.st.coresv.net
tomokutchi.hatenablog.com
approach.yahoo.co.jp
b.hatena.ne.jp