先日、Qiitaに投稿された一つの記事が注目を集めました。 元記事では、htmxというJavaScriptライブラリが英語圏で認知を獲得しているとして、インストールの仕方から使い方について公式のドキュメントの全体にわたって簡単に説明が行われています。 さまざまなプラットフォームでこの記事に対する反応を観察してみると、どちらかというと懐疑的な見方のほうが優勢のように見受けられます。ただ、多くのコメントは誤解に基づいているように見受けられました。「JSが要らない」といった元記事のミスリードによるところも大きそうですが1、なぜhtmxが大きく支持を得つつあるのかを理解するには、背景情報を含めて理解することが必要です。 htmxは、最近の複雑化するフロントエンド技術に対する単なる逆張りではありません。これまで30年ほどのあいだウェブ上のシステムを支え続けた「ハイパーメディア」の持つ強力さに今一度目
パスキーに入門してみた話 - Qiita
久しぶりの投稿です。 はじめに 昨今、様々なサイトがどんどんパスキーに対応しはじめてきました。 まだまだパスキーがデフォルトになっていくには時間が掛かりそうですが、どのような仕組みでパスキーを実装するのか、早めにキャッチアップしておくのも悪くないと思い、パスキーについて色々と調べてみました。 パスキーとは？ パスワードの代わりに、自分の持つデバイスによる生体認証やパターンを用いて認証を行う方法のことです。 次世代認証技術であるFIDO（Fast IDentity Onlineの略で、「ファイド」と呼びます）を使った認証方式（詳細は後述）で、Apple、Google、MicrosoftがFIDOを普及させるために命名したブランド名になります。 FIDOとは？ 脆弱なパスワードは安全ではありません。 2段階・2要素認証を採用してもそれを有効にするユーザーは少なく、昨今では2段階認証を突破する攻
API gateway + lambda + S3でDDoS攻撃を受けて1日あたりで$3000溶かした話 - Qiita
qiita夏祭りに乗り遅れてしまったので一人後夜祭 ~2019年某日~ パイセン「それじゃあ、ワイ君は明日からフロントのログデータを飛ばすのにAPI gatewayとlambdaでS3に保存するようにしてな。木曜までな。その間に自分はサービンのドメイン取ったりRoute53周りの構築するから」 ワイ「これもcloud formationに書くんです？」 パイセン「serverless frameworkっていう基本的な設定はデフォルトで構築してくれる便利なものがあるんやで。これ使い」 ワイ「めっちゃ素敵やん。わかったやで」 パイセン「週初めのMTGは終わりや飯食いに行こう。上野に新しい醤油ラーメン屋ができたんや」 ワイ「いいですね〜」 パイセン「それじゃ自分は新しいロードバイク持ってきたからワイ君も付いてきてな！」 ワイ「ワイ無手なんやが？え、本気で漕初めやがった！こなくそおおおぉぉぉ！」
「Cloudflare Pages」が正式版に。JAMスタックによる高速なWebサイトを構築、CDNに展開へ
Cloudflareは、JAMスタックを用いてWebサイトを構築する新サービス「Cloudflare Pages」が正式版として提供開始されたことを発表しました。 JAMスタックによるWebサイトの構築とは JAMスタックとは、JavaScript、API、Markup Language（HTML）を主な構成要素としてWebサイトを構築する手法を指します。 WordPressに代表される多くのCMSでは、ユーザーからのリクエストに反応して動的にHTMLが生成されることで、動的なWebサイトを実現しています。この場合、HTMLの生成に一定の時間がかかるため高速なWebサイトの構築が容易ではないこと、サーバへの負荷によりスケーラブルなWebサイトの構築も容易でないことなどが課題です。 JAMスタックでは、HTMLの生成はWebサイトの生成時に行うことで、基本的には静的なWebサイトと同様の高速
LINEがオープンソースで「LINE FIDO2 Server」公開。パスワード不要でログインできる「FIDO2/WebAuthn」を実現
LINEがオープンソースで「LINE FIDO2 Server」公開。パスワード不要でログインできる「FIDO2/WebAuthn」を実現 LINEは、スマートフォンやPCの指紋認証や顔認証などを用いることでパスワード不要でログイン処理を可能にする標準技術「FIDO2」や「WebAuthn」に対応したサーバ「LINE FIDO2 Server」をオープンソースで公開しました。 これにより、さまざまなWebアプリケーションやモバイルアプリケーションなどでFIDO2/WebAuthnを利用したログインが容易に実装できるようになることが期待されます。 LINE Security R&DチームがFIDO2認証標準を実装したFIDO2 ServerをOSSとして公開しました。 FIDO2-Serverは、FIDO2の登録と認証の主要部分を提供します。さまざまなWebブラウザとOSプラットフォーム、お
特に例は挙げられないけど体感でなんとなく分かるよね？ 5つ以上になると地獄
Rewind
Your AI assistant that has all the contextRewind is a personalized AI powered by everything you’ve seen, said, or heard. Your colleagues will wonder how you do it all.
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
フロントエンドエンジニアの方が個人開発をしてみたいと思える発表にします。 # 個人開発の目的 - 学習か、リリースか # ツールやフレームワーク ランニングコストを抑えるためのサービス選定 # 楽しさとメリット - ものづくりの楽しさ - 視野が広がる - デザイン、PMF、マネタイズ、マーケティング、イノベーションetc. - キャリアを拓いてくれる - 私は元々サーバーサイドエンジニアだった # 私の開発事例 技術ブログ（Next.js + Tailwind UI + Storybook + Cloudflare Pages） 仕事に活かすためには「コードの質」を追求しよう
無料 SSL の認証局である Let's Encrypt は、有効な証明書のうち 2.6% に当たる300万件の証明書に対し、2020年3月4日に失効手続きを行うと宣言しました。しかもその事がユーザーに通知されたのは失効手続きの数時間前です。一体、Let's Encrypt に何が起きたのでしょうか？ 私が調べた事を共有したいと思います。 この記事は Let's Encrypt の証明書失効に関する一連の出来事についてまとめた物です。今回の失効処理の対象となっているかどうかの確認方法等については、以下の記事をご覧下さい。 Let's Encrypt に重大なバグが発覚。該当サイトは2020/3/4 までに対応が必須 更新しました(2020/3/7) 影響の度合いについての記載が正しくなかったので修正 現在の Let's Encrypt の見解が正しくなかったので修正 何が起きているのか？
VSCodeでDraw.ioをLive Shareしたら最高の体験だった - 弥生開発者ブログ
こんにちは、弥生のMisoca開発チームの黒曜(@kokuyouwind)です。 Kaigi on Railsの登壇が決まったのでよろしくおねがいします。弥生社員としては初登壇になります。 「おめでとうございます。 選考の結果、あなたのプロポーザルは採択されました！」 とのことなので、Kaigi on Railsお話しにいきますー— 黒曜 (@kokuyouwind) August 25, 2020 前回の記事が濃厚だったため、今回はライトなTips記事です。よろしくおねがいします。 tech.misoca.jp 👯♀️ VSCode LiveShareを使ったリモートペアプログラミング 皆さん、ペア作業してますか？ ペアプログラミングはドライバー・オペレータの交代など具体的なノウハウも多く、このブログでも以前に紹介記事を書きました。 tech.misoca.jp 上記の記事ではリモー
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~ - Qiita
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~初心者umlVSCode新人プログラマ応援mermaid はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 （簡単7steps） (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2)
JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
jQueryとCSSアニメーションを はじめたばかりの方へ Webデザインのスクール講師が 「動かしたいパーツ」ごとの 逆引きリストをつくりました News 2024.03.27Gmailにおける特典受け取りについて2024.01.185-1-1、5-1-2 グローバルナビゲーション ドロップダウンメニュー（上・左）に関するCSSコード不備のお詫び2023.08.305-1-3、5-1-4 グローバルナビゲーション ドロップダウンメニュー（写真付 上・左ナビ）に関するコード不備のお詫び2022.10.195-1-7 「グローバルナビゲーション-スクロールするとハンバーガーメニューに変化-」に関するコード不備のお詫び Gmailにおける特典受け取りについて 【お知らせとお詫び】 2024年2月にGmailのガイドラインが変更となった影響で、特典受け取りとお問い合わせフォームの内容がGmail
すごいReactフック8選 - Qiita
はじめに React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。 Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。 ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。 1. useTimeout 宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取
The Modelとは、マーケティング・インサイドセールス・外勤営業・カスタマーサクセスに至るまで、「各部門の情報を可視化・数値化し、それぞれの部門の特性や専門性を最大化することで生産性を最大化する」というビジネスモデルのことです。 The Modelが生まれた背景には、2つの時代変化があります。 ひとつは、購入検討の主導権が売る側から買う側に移ったことです。インターネットの発達などによって「購買プロセスの67%は、営業が接点を持つ前に終わっている」という時代になりました。買い手側による購入前の調査・評価が重要な意思決定の要素になっていることが伺えます。 もうひとつの時代変化は、SaaS企業やサブスクリプション型サービスなどを筆頭にサービス・商品を売ってからがビジネスの始まりになったことです。買い切り型のサービス・商品と異なり、契約更新型のサービス・商品は、顧客が成果を出せなければ契約が終
Web標準に新たなステータス「Baseline」が登場。変化し続けるWeb標準のうちWeb開発者が安心して使える機能群を示す。MDNドキュメントなどで表示開始
Web標準に新たなステータス「Baseline」が登場。変化し続けるWeb標準のうちWeb開発者が安心して使える機能群を示す。MDNドキュメントなどで表示開始 Web開発者の開発体験を改善することなどを目的としたW3CのWebDX Community Groupは、つねに新たな機能などが登場し変化し続けるWeb標準のうち、Web開発者が安心して使える機能群を示す新たなステータス「Baseline」を発表しました（Googleによる発表、MDNによる発表）。 現在、Web標準はリビングスタンダードとしてつねにアップデートが行われており、ChromeやFirefox、Safariなどの主要なWebブラウザは、Web標準で新たに策定される機能をそれぞれ実装し、最新版に反映させています。 そのため、それぞれのWebブラウザがWeb標準のどの機能をいつ頃実装し、最新版に反映させるのかは時期が異なりま
RDBMS 理解度の壁: プロダクションや運用保守で困らないシステムを作れる知識 ＜＜＜それっぽく動くものを作れる知識 実際のシステムで遭遇・見聞きした事象をもとに、上記のスキマにある各種 RDBMS 知識を説明します。 RDBMS 本体の運用よりも、現実のアプリケーションにおける設計・実装上のハマリどころが中心。
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
バグハンターmageに聞くバグハンティングの方法とセキュアなサービス作りに必要なこと｜ハイクラス転職・求人情報サイト AMBI（アンビ）
バグハンターmageに聞くバグハンティングの方法とセキュアなサービス作りに必要なこと バグハンターとは、Webサービスやソフトウェアなどに含まれる脆弱性を、システム改善のために探し出す人々です。バグハントの方法は非常に多岐にわたりますが、具体的な手法、使用ツール、ハントのマナーを凄腕のバグハンターに聞きました。mageの名で知られる馬場将次さんが語り下ろす実践的なノウハウは、サービスをセキュアなものにしたいエンジニアのみなさんにとっても重要な知見になるでしょう。 バグハンティングを犯罪にしないために必ず知っておきたいこと 馬場流バグハント手法「調査」「解析」「実証」。そして「普通はやらない」を無数に試す 防御のために、言語やフレームワークの実装を学ぼう。コード読解から、違和感を見つけ出す方法を実践してみる XSSの現在。技術の進化と並走する攻撃手法の進化 セキュリティを理解するためにまずは
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
プログラミングをする人なら1度や2度は「コーディングを不要にする」という宣伝文句にイラッと来たことがあるのではないでしょうか。Coral Capital創業パートナーの澤山陽平も、そんな1人です。「最近シリコンバレーで話題の No code startups について何か書こうと思う。ハイプ気味ではあるものの注目のトレンド」と、私が伝えると、一気に顔が曇りました。 またか、というところかと思います。澤山は日本では珍しいScalaという玄人好みのプログラミング言語を使いこなすベンチャーキャピタリストです。過去10年、20年と、どれほど「コーディング不要」というマーケティングコピーが派手に宣伝されてきたかを思えば、澤山の反応は、当然かと思います。 それでも私には、いまノーコーディングと呼ばれるムーブメントから、優れたサービスや企業が出てきつつあるように思えます。 全てのコーディングが不要になる
基本思想 とにかく薄く。必要なものだけ。基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEmit でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 eject しない、dist ディレクトリをそのまま使うこと前提。 style-loader/css-loader は外部CSSを読むときに設定する worker-plugin はなくてもいいけど、 worker もビルドしたいことが多いので、入れていることが多い html-webpack-plugin と webpack-dev-server 組み合わせると、他と組み合わせずに完結して動く。このHTMLを本番で使わずとも、デバッグで使ってることが多いの
過激派が教える！ useEffectの正しい使い方
ReactのuseEffectは、フックの中でも使い方が難しいものの一つです。そこで、この記事では筆者が考えるuseEffectの望ましい使い方を皆さんに伝授します。 基本原則 技術やその要素の使い方を考えるにあたって、筆者が好んでいるのは基本原則を置いてそれに基づいて判断することです。ということで、この記事ではまず筆者が考えるReactの基本原則を紹介します。 筆者がもっとも重要視する原則は、ReactはUIライブラリであるということです。つまり、ReactにはUIの管理をさせるべきであって、その他のことはReactの役目ではないということです。Reactが難しいと思う人がいる場合、何でもかんでもReactにやらせようとするから余計に難しくなっているのだと思います。 例えばアプリケーションのロジックの管理やそれに付随するステートの管理はReactの役目ではないので、Reactの外部で処理
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースを紹介します。 当ブログでもよく紹介しますが、見逃していたものがありました。 1年間分、52個もあるので、時間のあるときにチェックしてみてください。 The 52 most popular projects from the last year of Trending Projects by Iain Freestone 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私を注目をあつめたプロジェクトをキュレーションしており、人気があるWeb開発プロジェクト10個を紹介するニュースレターを毎週、配信しています。この記事では、ここ1年間に配信した各ニュースレターから最も多くクリックされたプロジェクトをリストアップしました。 ニュ
はじめに 今回はフロントエンド(主にReact, Next, TypeScript)でおすすめの学習教材をまとめました。 対象者 エンジニア初心者 モダンフロント技術を学びたい人 ロードマップ Developer Roadmaps エンジニア向けの学習ロードマップが整理されています。 現在の自分の立ち位置を把握し、次にやるべきことの方向性を知ることができます。 エンジニアが使うであろう、ほぼ全技術が網羅的にまとめられているので、まずはこのロードマップを使って現在の立ち位置を掴んでみてください。 TypeScript typescriptlang 公式が提供している学習サービス。 基本文法から実践的な内容まで学ぶことができる。英語が苦手でなければここで一通り学ぶべき。 サバイバルTypeScript 実務で使えるTypeScriptの実装方法を学ぶことができる。応用的な内容も多いが、解説が丁
はじめに バックエンドエンジニアは、プログラミングの中で特にイメージがわきにくい分野である。簡単に言えば、バックエンドエンジニアはユーザから見えない部分にあるシステムである。(例えば、ユーザ認証やデータベース設計・操作・運用などが例として挙げられる) 例えば、ECサイトを運用する際に、ユーザから見えるUIだけを作っても作動しない。バックエンドになるシステムの構築も必要なのだ。 今回はバックエンド開発を理解する上で必要な10の知識を徹底解説する。その中で、個人の見解に過ぎないが初心者にオススメのバックエンドのフレームワークを3選紹介する。あくまで一個人の見解に過ぎないが、今回の記事を通してバックエンドの学習方法またはその魅力を十分に理解していただければ非常に幸いである。 本題に入る前に、本記事における「バックエンド」はあくまで認証やデータベースなどシステムやソフトウェアの裏側で動作しているも
マイクロソフト、Webアプリのテスト自動化サービス「Microsoft Playwright Testing」プレビュー公開。クロスブラウザ／クロスプラットフォームのテストを並列実行
マイクロソフトは、Webアプリケーションのテスト自動化ライブラリ「Playwright」を用いた、Microsoft Azure上のテスト自動化サービス「Microsoft Playwright Testing」のプレビュー公開を発表しました。 Microsoft Playwright Testingに使われている「Playwright」は、マイクロソフトが中心となってオープンソースで開発しているWebアプリケーション向けテスト自動化ライブラリです。対応環境が幅広く柔軟で、精度の高いテストを特長としています。 具体的には、Chrome、Edge、Firefox、Safariの主要なWebブラウザのすべてを対象にしたテスト自動化が可能で、ヘッドレス、ヘッドありのいずれにも対応。モバイルエミュレーションを用いたAndroid版Google ChromeとMobile Safariのテストも、実
個人開発エンジニア集まれ！~個人開発LT会~ #3 ( https://individual-development.connpass.com/event/303818/ ) で発表した内容です。
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っていきます。第1回はMisskey、ひいては分散型SNSの簡単な紹介とその内部実装の概略を説明します。 はじめまして！ はじめまして、Misskey（みすきー）のプロジェクトリーダーをしている、しゅいろ（@syuilo）です！ この度連載の機会をいただきましたので、ちょっと仰々しい気もしますが「Misskey & Webテクノロジー最前線」と題して、今後Misskeyやそれに関わる最新のWeb技術について解説をしていく予定です。 今回はMisskey、ひいては分散型SNSの簡単な紹介とその内部実装の概略を説明します。 対象読者は、後半の実装解説の部分においてはある程度のWeb開発の知識がある人を想定しています。 Misskeyとは、そして分散型とは Misskeyは、オープン
このエントリーは Classi developers Advent Calendar 2022の18日目。 ネタはなんでもいいよ！とのことなので、Claasiに全く関係なく、MysqlからPostgreSQLに移行する際の注意点を書く。 なお、まだRDSにPostgreSQLがなかった頃のような昔の記事だがこちらに無いことを書いていく。 soudai1025.blogspot.com soudai1025.blogspot.com MySQL から PostgreSQLにデータ移行する際の注意点 MySQLとPostgreSQLは互換性がもちろんありませんので、細かいところで違いが発生します。 よく踏むデータ移行の注意点は以下の通り。 timestampやdatetimeを移行する先はtimestamp型になるが、timestamp型はタイムゾーン付きと無しがある timestamp wi
はじめに Web技術は日進月歩で新しい技術が増えているが、実務でそれらすべてを触る機会はない。そこで、今回の記事では2023年下半期に赤の他人に勧めたいWeb技術を個人の独断と偏見で解説する。 対象者 これから何をすればいいのかわからないプログラマー 新しい技術に興味があるひと スキルセットを拡大したいひと タイトルでなんとなく気になったひと フレームワーク FastAPI FastAPIはPythonでAPIを開発するために開発された軽量のWebフレームワークだ。FastAPIでは、主に以下の特徴がある。 Node.jsやGo言語に匹敵する高速なアプリケーションを開発できる 構造が簡単(Flaskの影響を受けている) Pythonに型定義を含められる 環境構築がコマンド一つで終了する 非同期処理を簡単に実装できる Pythonで開発されているので、機械学習との相性が抜群 RESTとGra
強い思想: Go を Web 開発に採用する上で
Go は Web 開発に向いているか？ 最も向いている領域は「CLI ツール」「ミドルウェア」「マイクロサービス」だと思っている。なぜならそれらはコードベースを比較的小さく抑えることを前提としているからだ。 Go は大きなコードベースを抱えやすい設計の言語になっていない。 ミドルウェアとマイクロサービスに関しては小さく作ることが正義。 CLI ツールに関しては単一責務なツールであれば小さくなるが，複数を束ねるツールであっても Web サービス開発に比べれば考えることは少なくて済む。 Web 業界における「一般的な Web 開発」，すなわちモノリスを基本とした中規模以上の開発にははっきりと 向いていない と言うべきだろう。 フラットパッケージは正義か？ 私が SNS で何度か言及した以下の記事がある。 フラットパッケージ戦略は，確かに Go の文化圏においては一定の支持を集めている。Go の
State of JavaScript 2020：いちばん利用率の高いJSフレームワーク、フロントエンドがReact、バックエンドはExpress、テストにはJest。2万4000人の調査結果
IT技術者のSacha Greif氏とRaphaël Benitte氏が、JavaScriptに興味を持つ世界中のIT技術者約2万4000人にアンケートを取り、結果をまとめたWebサイト「State of JavaScript 2020」が公開されています。 JavaScriptの最新のシンタックスや命令がどれくらい使われているか、フロントエンドやバックエンド、ビルドツールなど分野ごとにさまざまなJavaScript関連の技術はどれくらい興味を持たれているかなど、アンケート結果を基にして、満足度（Satisfaction）、興味（Interest）、利用率（Usage）、認知度（Awareness）などを計算。それぞれについてランキングを作成しています。 それぞれの値は次の式で計算されると説明されています。それぞれの項目にはアンケートの回答数が入ります。 満足度＝またこの技術を使いたい／（
Intro 従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。 これは、 History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、 SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。 この API の目的と仕様を解説しつつ、実装のメモを残す。 画面遷移と SPA の軌跡 Web は HTML の取得と描画を繰り返す、画面遷移(Navigation)を前提としたアーキテクチャ(のちに SPA からの逆算で MPA と呼ばれる)が基本であり、ブラウザなどの実装もそれに最適化されている。 一方「アプリケーション」の設計手法をそのまま Web に持ち込んだ SPA は、この Navigation によってもたらされる UX の低下を防ぐ部分がある一方
元ネタ @localdisk さんの記事です。 こちらで概ね適切に説明されているものの，文章のみで図が無くて直感的に把握しづらいので，初心者にもすぐ飲み込ませられるように図に描き起こしてみました。 図 解説 illuminate/auth: 最小限の認証認可コアロジック コアコンポーネント群の laravel/framework に含まれているものです。 Socialite 以外のすべてのパッケージが，実質このコアに依存していることになります。 以下の記事でこのパッケージの詳細について説明しているので，ここでは端折って説明します。 伝統的 Cookie ベースのセッション認証 こちらでも解説している， 「Cookie に識別子を載せ，それに対応する情報はサーバ側のファイルに記録する」 という手法に近いものです。 実装は illuminate/session にあり， PHP ネイティブのセ
今回はバックエンドAPIでページネーションをどうやるかについての話なので、よくある無限スクロールUIのようなフロントエンド側の実装に関する話はしない。あくまでもAPI、もっと言えばRESTfulなAPIのリクエスト・レスポンスにおけるページネーションの話。 本気で深く考えるというよりざっくり検討したときの話です。 はじめに REST APIを実装するにあたってリスト系のAPIを提供する場合に必須といっても過言ではないのがページネーション。大量のリソースをレスポンスする場合にそれらを一気に返してしまうことは応答速度、転送量、クライアントサイドでの扱いづらさなどなどに繋がるので必須と言える。 最近、新たなAPIを開発するにあたってページネーションをする必要があったこともあり、今回はこのページネーションをどうやって提供するか整理して改めて検討してみた。 前提 TypeScript Nest.js
v0とは v0は自然言語で作りたいUIをAIに指示するとそのUIをTailwind (shadcn/ui)ベースで作ってくれるサービスです。 shadcn/uiとは shadcn/uiはRadix UIというUIをもたないヘッドレスUIに対してスタイルを当てたコンポーネント集で、TailwindというCSSライブラリを使ってRadix UIに対してスタイルを当てています。 shadcn/ui本体のライブラリがあるわけではなく、自身のプロジェクトにコンポーネントを直接コピーして使うことが特徴です！ Tailwindが好きな人にはたまらないコンポーネント集ですね！ shadcn/uiに最適に作られていますが、Tailwindユーザーであれば作られたUIをほぼそのまま使うことができます。 下の画像のようなチャット風のUIが特徴なサービスになっていて、このチャットに指示を出すことでUIを作ってくれ
ssh-rsa，非推奨のお知らせ
2020-05-28T14:11+9:00 追記 これは SHA-1 を用いた RSA 鍵についての話で，OpenSSH 7.2 以降で生成・利用される RSA 鍵はまだ利用可能です 2020-05-28T19:27+9:00 追記 既に生成されている RSA 鍵でもホスト・クライアントの両方が OpenSSH 7.2 以降ホスト・クライアントの両方が OpenSSH 7.2 以降，ただしサーバー側は OpenSSH 7.4 以外であれば SHA-2 で署名するので大丈夫なようです。（OpenSSH 7.4 はバグがあるようです） ssh-rsaという名前は"公開鍵の形式"と"公開鍵を使った署名方式"の二つで使われていて、廃止対象となっているのは署名方式の方だけです。なのでOpenSSH 7.2以降を入れれば、鍵自体は古いOpenSSHで生成した物がそのまま使えます。 — いわもと こうい
メリークリスマス！ 週末もPHPを楽しんでますか？ ところでWebセキュリティはWebアプリケーションを公開する上で基礎中の基礎ですよね！ メジャーな脆弱性を作り込まないことはWeb開発においては専門技術ではなく、プロとしての基本です。 中でもXSS (Cross-Site Scriptingクロスサイトスクリプティング)やインジェクションについての考慮は常に絶対に欠いてはならないものです。 現実にはプログラミングには自動車のような運転免許制度がないため、自動車学校に通わず独学で公道に出ることができてしまいます。つまりは基礎知識がないままにWebプログラマとして就職したり、フリーランスとして案件を請けることも現実には罷り通っています。それは一時停止標識も赤信号も知らずにタクシー営業しているようなものです。 このような事情により、体系的な理解のないWeb開発初心者は (時にはn年のキャリアを
ssig33: "最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 ##..."
新人声優 +81-9014502501 mail@ssig33.com 0088-7709-7529 it/it. my opinion may be not my own. but my fate is my own. 最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 前提: デカいフレームワークは使わない next.js, Astro, Remixは使わない。next.jsとAstroは大好きなのだが、社内向けとか個人用とか小さいアプリに使うにはあきらかに恐竜であると思う。Remixは大好きではない。 前提: SSRしない SSRもSSGもISGもしない。CSRでいい。SSRしたいならReactをそもそもぶん投げたほうが(個人レベルなら)いいと思ってる。それがほしいならPHPやRails でええ。今更RailsでView書きたくないとか思うかもしれない
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
htmxとは何なのか？ その背景にある思想について - Qiita
ブクマするときにタグを4つ以上つけてる人はヤバい人が極端に多い
証明書300万件を強制失効。Let's Encrypt に一体何が起きたのか？ - Qiita
動くWebデザインアイデア帳 | 動くWebデザインアイディア帳
「The Model」（ザ・モデル）とは？概念と実践をSalesforceが分かりやすく解説
RDBMS in Action
Webサービスを作るときのテンプレートを作った - hiroppy's site
コーディングを不要にする「ノーコード・スタートアップ」が注目される理由 | Coral Capital
俺の webpack.config.js-20200503 - mizchi's blog
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースのまとめ
【2023年】モダンフロント学習教材まとめ - Qiita
バックエンド開発の基本を理解するために必要な10の知識 2022年版
サービスを軌道に乗せるまで一人でやったすべてのこと
分散型SNS「Misskey」、それを支える技術スタック | gihyo.jp
MySQLからPostgreSQLに移行する際のTips - そーだいなるらくがき帳
2023年下半期に他人に勧めたいWeb技術まとめ
Navigation API による「JS での画面遷移」と SPA の改善 | blog.jxck.io
Laravel の認証・認可パッケージが多すぎてわけわからんので図にまとめた - Qiita
令和時代のページネーションを考える (REST API編) - Sweet Escape
指示したUIをAIがTailwindベースで実装してくれるv0が凄い
なぜ出力時のHTMLエスケープを省略してはならないのか - Qiita