ER図の自動生成について、dbdiagram.io, DBeaver, A5M2 を比較してみる。 - Qiita
はじめに データベース設計のER図について、自動で生成する以下３つのツールを比較した記事です。 dbdiagram.io DBeaver A5:SQL Mk-2（A5M2） 先日、こちらの記事をQiitaに投稿したところ、多くの方に記事を見ていただき、コメントも多数いただきました。 ER図に関するお勧めのツールをコメントいただく方が多くいらっしゃいました。 今回はその中から、無料でも利用できる3つのツールの「ER図の自動生成」の機能を試します。 比較の結論としては、〇〇が一番良いという感想ではなく、どのツールも多機能で、できることは違うので、今後使うときは用途や業務の環境によって使い分けていけたらと思っています。 目次 それぞれのツールについて、下記の内容を書いていきます。 1. dbdiagram.io 1-1. 始める 1-2. 使う 1-3. 感想 2. DBeaver 2-1. 始
SSL証明書を無料で発行してくれる認証機関「Let’s Encrypt」は、2014年の設立から安全なインターネットの利用に大きく貢献しています。しかし、ハッカーであり研究者でもあるScott Helme氏は、無料の証明書発行をLet’s Encryptのみに頼っている現状を問題として取り上げ、Let’s Encryptの代替となるサービスを紹介しています。 Introducing another free CA as an alternative to Let's Encrypt https://scotthelme.co.uk/introducing-another-free-ca-as-an-alternative-to-lets-encrypt/ Free SSL Certificates and SSL Tools - ZeroSSL https://zerossl.com/ L
IE First を避ける
まず、去年の実績として、IE のシェアが 9% から 5% になっています。 Browser Market Share Japan | StatCounter Global Stats 世界だと 1.4% です。これは途上国などでは Android Chrome が支配的だからです。 https://gs.statcounter.com/browser-market-share/all 国内で「IE シェア」などでググって出るサイトは 9% と出ていますが、これはデスクトップのみの数字で、モバイルを含めた数字は 5%前後です。日本はさらに Chrome ベースの新 MS Edge の正式リリースがコロナと確定申告の影響で延期されており、リリースのタイミングでさらに減ることが予想されます。 去年の実績値でいえば、来年度には 2% 台、再来年には 1%を切っている可能性があります。これは to
この記事は本番環境でやらかしちゃった人のアドベントカレンダー9日目の記事です。 https://qiita.com/advent-calendar/2019/yarakashi-production もう15年以上前の事なので記憶も定かではないところがありますが、ご容赦下さい。 当時の状況 当時自分は30人くらいの、孫請・曾孫請を中心に受託開発を行う小さなSIerに居ました。 この会社、自社製品も一応あるのですが売上のメインは圧倒的に受託開発で、 PHPやPerlでのガラケーサイトの開発やら、Javaや.NETを使った業務アプリケーションの開発、大手プロバイダシステムの開発保守など、わずか3年ほどの在籍期間でしたが、実に多彩な開発案件があったように思います。 プロジェクト内容 あるWebサイトのシステム移行でした。 Windows Server上に構築されたIIS+ASP+SQL Serv
React 18はReactの次期メジャーバージョンで、2021年の6月にalpha版が、11月にbeta版が出ました。また、Next.js 12でもReact 18のサポートが実験的機能として追加されました。React 18の足音がだんだんと我々に近づき、アーリーアダプターではない皆さんの視界にもいよいよReact 18が入ってきたところです。 特に、React 18ではServer-Side Rendering (SSR) のストリーミングサポートが追加されます。現在ReactでSSRを行いたい人の強い味方としてNext.jsが存在しているわけですが、Next.js 12でもReact 18を通してストリーミングの恩恵を受けることができます（Next.jsではSSR Streamingと呼んでいるようです）。また、厳密にはReact 18とは別ですが、React Server Comp
Rustでサイトを再実装
このサイト r7kamura.com の実装言語をRubyからRustに変えてみた。 アプリケーションの概観 このサイトには、大別すると次の6種類のルーティングパターンがある。 GET / トップページ GET /articles/:article_id 記事ページ GET /feed.xml RSSフィード GET /links リンク集 GET /sitemap.txt サイトマップ (Google Search Console等が利用する) GET /* その他の静的ファイル (CSSや画像など) Rubyの実装では、適当なRackアプリケーション + rack-captureという構成で、Webアプリケーションとして実装しつつGitHub Pagesのために静的ファイルも吐き出せるという仕組みになっていた。 Rustの実装もほぼ同じで、適当なHTTPサーバー + 適当なHTTPクラ
Front-End Study #1「Cloud Native時代のフロントエンド」 - connpass の発表内容のテキスト版です。 発表に載せられなかった参考資料集 StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share The "Developer Experience" Bait-and-Switch - Infrequently Noted JavaScriptよ。文明を捨て、自然に還れ。 ::ハブろぐ Deno - A secure runtime for JavaScript and TypeScript Rome Toolchain Blitz.js - The Fullstack React Framework | Blitz.js ⚡️ Prisma - Da
フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと
はじめに まずは宣伝です。 このたび保育園を地図から探せる 保育園マップ というサービスを作りました。 WEB版 iOS版 Android版 Vanilla JSのSPAで作ったのですが、思いの外色んなことをやる必要があったので、制作過程で得た知見をこの記事にまとめました。 網羅的に書いたので長いですが、一つ一つのトピックはそれ程長くないので、興味があるところだけ読んでもらってもいいと思います。 Vanilla JS ＆ SPAとは？ Vanilla（バニラ） JSというのは何もフレームワークを使っていない素のJavaScriptのことです。 ただのJavaScriptなんですが、ジョークでフレームワーク風の公式サイト？っぽいものがあったりします。 SPAというのはシングルページアプリケーションの略です。 ページごとにHTMLを用意するのではなく、1つのHTMLの中でJavaScriptに
ECMAScript 2020の変更に対応したJavaScriptの入門書としてJavaScript Primer 2.0.0を公開しました。 JavaScript Primerのウェブサイトから閲覧できます。 ウェブサイト: https://jsprimer.net/ サマリIssue: ECMAScript 2020の対応 · Issue #1145 · asciidwango/js-primer 変更内容の詳細はリリースノートを参照してください。 Release 2.0.0: ECMAScript 2020対応 · asciidwango/js-primer 2.0.0の目的 JavaScript Primerは、継続的にメンテナンスするためにOSSとして開発しています。 ECMAScriptの仕様は年に一度アップデートされていて、現実でのJavaScriptの使われ方も変化していく
Active Recordから考える次世代のRuby on Railsの方向性 / Directions for the next generation of Ruby on Rails: From the viewpoint of its Active Record
January 29, 2021 @ 銀座Rails #29
Chrome 78ベータに「Native File System API」搭載。Webブラウザからローカルファイルを読み書き可能に
Chrome 78ベータに「Native File System API」搭載。Webブラウザからローカルファイルを読み書き可能に GoogleはWebブラウザのChrome 78ベータ版で「Native File System API」を試験的機能（Origin Trial）として搭載したことを明らかにしました。 Native File System APIはWeb Platform Incubator Community Groupが策定中のAPIで、Webアプリケーションからローカルファイルを開き、読み書きを行える機能です。 「The Native File System API: Simplifying access to local files」から引用します。 The Native File System API enables developers to build powe
【待望】PayPayのオンライン決済APIが公開されたので試してみる #paypay #python | DevelopersIO
こんにちは、クラスメソッドの岡です。 7/30にPayPayが開発者向けツール、PayPay for Developersの提供を開始しました！これは嬉しい！ これで自前のサイトやアプリにPayPayの決済を導入できるようになります。 アカウント作成 まずは開発アカウントを作成しましょう。 Sandboxであれば加盟店の情報は登録しなくても利用することができます。 アカウントを作成すると、ブラウザ上でSandboxのAPIを動作確認できるPayPay Labや、API接続時のエラーハンドリングが可能なPayPay Resolveが使えるようになります。 機能 PayPay APIを使った決済フローは以下の4パターンです。 Webペイメント カスタムのモバイルアプリ/WebサイトからPayPayの決済ページ or PayPayアプリにリダイレクトして決済する ネイティブペイメント カスタムの
概要 みなさんは、このドロップシャドウを見てどう思いますか？ ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、 あまり綺麗なドロップシャドウとは感じないですよね？ この記事では、これが発生する原因 と 綺麗なドロップシャドウの使い方を解説していきます。 この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう！ ドロップシャドウが綺麗にならない原因 1. デザインを3次元として捉える UIやグラフィックデザインは、複数の平面が重なりながら、組み合わさって作られています。 例えばUIだと、 ベースとなる平面に、カードの平面が重なっていたり、 カード平面の上に画像やボタンといったオブジェクトが置かれています。 このように、UIやグラフィックデザインは２次元で作られているのではなく、 各平面・オブジェクトがZ軸上に重なることで作られています。
平尾誠@ARUTEGA.Inc @Makopontass コーディングを外に出すことが増えてきた。 やはり経験値が少ない人の品質管理は大変だと感じつつも、しぶとくピクセルパーフェクトを狙ってくる方に仕事を任せてよかった。 この再現性への執着心がないと伸び代を感じれない。 吉本 集 / aru inc. @tsuDoi220 いやー、実際そうなんですよねー。 ピクセルパーフェクトに、そもそも拘っていない人に、仕事お願いしたくない。テクニックどうこうより、全然こっちのほうが大事。ほんとに。 後、速度とちゃんと納期守ること。 当たり前のようだけど、意外とね、、、 twitter.com/makopontass/st…
DBMS に依存するロジックのテストを書く時、主に2つの手法があると思います。 Repository 層などを mock する Service 層のテストをする時は、その下位の Repository 層を mock して、DBMS に依存しない形にしてからテストする レイヤードなアプリケーションで適用できる手法 テスト実行時も DBMS を裏で動かして、それを使う 本番と同じスキーマを持つ DBMS に対して、実際に insert したり select してテストする DBMS は docker-compose upとかで事前に立ち上げておく 双方にそれぞれ良さがあって、プロダクトによってどっちでやるか変わってくると思います。 この記事では 2 の手法を Prisma でどうやるかについて紹介します。 前提 実際のテストコードの例 テストヘルパーを作る 別解: ヘルパーを自動生成する je
妄想的DHH理解 - Qiita
Caution この記事はDHHファンの妄想によるシナリオが多分に含まれます。 というかほとんどです。 成り立ちが間違ってることも当然あるように思うので話半分で読んでください。 これは一体 最近のRailsフロントエンドやDHHの活動には一連の流れがあるわけですが、一部トレンドに沿ってない部分がある故にそれが汲めないというところがあるのではと思います。 それらの流れを記憶が定かなうちにつないで記録しておこうという記事です。 前提知識 Railsの生みの親、Rubyist Basecamp(社) DHHがCTOやってる会社 Basecamp(サービス) Basecamp(社)が開発してるプロジェクト管理ツール Trixを開発してたある日 Basecamp(サービス)に組み込まれてるリッチテキストエディタのtrixをcustomElements使って開発してたある日、DHHはあることに気づく。
JavaScriptの仕様であるECMAScriptはEcma Internationalによって定められています。ECMAScript 2015（ES6）の登場以降は、ECMAScript 2016、ECMAScript 2017･･･と、年次で仕様が更新されています。ECMAScript 2022（ES2022）は2022年6月22日のEcma InternationalのGA 123rd meetingにて、ECMAScript 2023（ES2023）は2023年6月27日のGA 125th meetingで承認されました。 ES2022とES2023はすでに多くのブラウザやNode.js環境で利用可能です。本記事では新仕様と使いどころを紹介します。 ES2023 - 配列の非破壊操作 ES2023では配列を非破壊で操作できるメソッドが追加されています。非破壊とは、元の配列を変更せ
const url = "https://fetch-api-normalization.deno.dev"; await fetch(url, { method: "PATCH" }); await fetch(url, { method: "patch" }); 実行すると、次のようなエラーを得るはずです。 PATCH を小文字で書いた際のエラーの一例 さて、どのような条件でこのエラーが発生するのでしょうか？これが意図されたものなのだとしたら、 GET や POST は大文字・小文字を無視してよくて PATCH は無視できない理由がなにかあるのでしょうか？以下でその理由を探ってみましょう。 いつエラーが発生するか このエラーは、 Fetch API を利用して外部の HTTP サーバーに対してリクエストを行う時に、 PATCH と書くべきところを patch と書いていると発生します。
結果は順にtrue、true、falseです。 これがPHP7までの非厳密な比較(等価)演算子だったわけですが、まあおかしいよねってことで、この挙動がPHP8.0で変更になることになりました。 よもや今さら基本中の基本である比較演算子の動作を弄ってくるとは思わなかったぞ。 以下はSaner string to number comparisonsの日本語訳です。 PHP RFC: Saner string to number comparisons Introduction ==やその他の非厳密な比較演算子を用いた文字列と数値の比較は、現在は、文字列を数値にキャストし、その後整数か浮動小数の比較を行っています。 この結果、多数の不可解な結果が得られますが、中でも注目すべきは0 == "foobar"がtrueになることです。 このRFCでは、文字列が実際に数値型文字列である場合にのみ数値型
twitterでなんどもつぶやいてるので多分知られているとは思うんですが、Web配信の技術という本を書きました。 せっかくなんで、なんでまたこんな本を書いたのかとかどういう流れだったのかみたいなのを簡単に書いてみようかなと そもそもどういう本なのか 非常にタイトルを決めるのが難しい本でした。 サブタイトルに「HTTPキャッシュ・リバースプロキシ・CDNを活用する」とあるようにいわゆるHTTPキャッシュの本なわけですが、コンテンツ配信の技術といえばCDNの印象が強く出ますし（本書はCDNの使いかたというわけではないです）、Web配信といえば動画ストリーム配信（VTuberの配信とか）を思い浮かべる人も多いと思います。 今考えればWebコンテンツ配信の技術とすればよかったかもと思いつつ、今度は長くなりすぎるのでなかなか難しいです。 ということでHTTPキャッシュを使ってWebサイトを高速化した
現在標準化が進められている次世代HTTPの「HTTP/3」は、トランスポートプロトコルとして「QUIC」と呼ばれる新しいプロトコルを採用します。 現時点のHTTPはトランスポートプロトコルとして「TCP」が採用されています。その上で、可能な限り高速な通信が行えるようにさまざまな工夫や最適化が進められてきました。そしてもうこれ以上高速にしようとすると、TCPそのものを改善していくべきだろう、というところまできたのです。 それがHTTP/3で「QUIC」が採用される大きな理由といわれています。 TCPは内部で輻輳制御や再送などを自動的に行うことで通信が確実に行われることを保証してくれる便利なプロトコルですが、それゆえに、確実に通信が行われるまで待つ必要があるために通信環境によっては遅くなりがち、などの側面があります。 そこでQUICは、TCPのような通信の保証がない代わりにリアルタイム性の高い
はじめに こんにちは、都内でソフトウェアエンジニアをしているYSasagoです。 私はフロントエンドの開発時に、Chromeのブラウザを使うことが多いです。 Chrome には開発を便利にするchrome 拡張機能がたくさんあります。 普段、フロントエンド開発時に私が使っている拡張機能を紹介したいと思います。 UI Build Assistant アイコンは IT 大学と面白いですが、こちらの拡張機能を使えば、ワンクリックで背景と線に色付けをしてくれて、レイアウトが見やすくなります。こちらの拡張機能を使うとマージンの調整等が簡単にできるようになりとても便利です。 また、作成者のしまぶーさんの Youtube 動画は、フロントエンド学習にとても有益なのでよく拝見させていただいてます。 OFF ON Responsive Viewer 次に紹介するのは、Responsive Viewer です
Vue.jsを使用して、Webページやスマホアプリでよく使用されるフォームを簡単に実装できるVue Formulateを紹介します。 サインアップ、ログイン、メールアドレス、ファイルのアップロード、アンケートなど、さまざまなフォームをサポートしており、バリデーション機能も備えています。 Vue Formulate Vue Formulate -GitHub Vue Formulateの特徴 Vue Formulateのデモ Vue Formulateの使い方 Vue Formulateの特徴 Vue Formulateは、Vue.jsを使用してフォームを構築する最も簡単な方法です。主な機能は、フォームとフィールドの検証、ファイルのアップロード、フォームの生成、ラベルをサポートする単一要素の入力、ヘルプテキスト、エラーメッセージ、プレースホルダーなど、さまざまなプロジェクトで使用するための包
その名はBun ﾃﾞﾃﾞﾝ BunはNode.jsやDenoのようなJavascriptランタイムです。(2022/7/8現在ベータ版) ちなみにロゴが本当に肉まんなのかはわかりません。（赤ちゃんの頭にも見えるけど名前がBun/パンだしなぁ...) この記事ではNode.jsやDenoと比較をしつつ、bunの解説させていただきます。 割となんでもできる Bunはただのランタイムではありません。下のように、開発に必須の多くな機能を最初から有しています。 TypescriptからJavascriptへのトランスパイル jsxからJavascriptへのトランスパイル npmのようなパッケージのインストール&管理 webpackのようなプロジェクトのバンドル化 もちろんランタイムなのでNode.jsのようにサーバーでJavascriptを実行することも可能です。 これらに加えてBunには様々な機
ユーザーごとに異なるデータを提供するため、ログイン機能を搭載しているウェブサイトは多数存在します。しかし、ユーザー側はウェブサイトに搭載されたログイン機能の「認証方式」まで気にすることはあまりないはず。そんなウェブサイトの認証方式について、代表的な6つの方式をエンジニアのAmal Shaji氏が解説しています。 Web Authentication Methods Compared | TestDriven.io https://testdriven.io/blog/web-authentication-methods/ ◆ベーシック認証 HTTPの中に組み込まれているベーシック認証は、最も基本的な認証方式です。ベーシック認証に暗号化機能はなく、Base64でエンコードされたユーザーIDとパスワードをクライアントからサーバーに送信するとのこと。 認証フローはこんな感じ。まずクライアントはサ
マイクロソフト、「Blazor WebAssembly」正式版を5月にリリース。BlazorでPWAやデスクトップアプリも開発へ
マイクロソフト、「Blazor WebAssembly」正式版を5月にリリース。BlazorでPWAやデスクトップアプリも開発へ マイクロソフトは1月14日（日本時間1月15日未明）にオンラインインベント「.NET Conf Focus on Blazor」を開催、同社が開発中のWebアプリケーションフレームワーク「Blazor」の最新動向と今後について明らかにしました。 Blazorは、C#と.NET Coreを用いてWebアプリケーションの開発を可能にするフレームワークです。JavaScriptを用いず、C#によるプログラミングでSPA（Single Page Application）のWebアプリケーションを開発できるため、.NETの知識や経験をWebアプリケーションに活かせると同時に、Visual StudioなどC#に対応した豊富な開発ツールによる開発生産性の向上を期待できるとい
Astro 1.0 | Astro
We are thrilled to announce Astro v1.0: a web framework for building fast, content-focused websites. Over the last 16 months, Astro has grown from an empty repo to over 13,000 stars on GitHub and 30,000 early users around the world. The Astro documentation has been translated into 6 different languages, and Astro has already been deployed at amazing companies such as Firebase (Google), Trivago, Th
Fastly、JavaScriptエンジンをWebAssemblyで実装。CDNエッジのサーバレス環境「Compute@Edge」でJavaScriptサポート発表（訂正済み）
Fastly、JavaScriptエンジンをWebAssemblyで実装。CDNエッジのサーバレス環境「Compute@Edge」でJavaScriptサポート発表（訂正済み） （お詫びとお知らせ：本記事はFastlyの発表と同社へのメールでの取材に基づいて執筆いたしましたが、記事公開後に同社より、回答を間違えたとの申し出がありました。そのため改めて同社から提供された情報を基に、タイトルと本文を訂正しました。訂正前の記事内容は本文最後にHTMLでコメントアウトされています。） 大手CDNベンダのFastlyは、CDNエッジで提供しているサーバレスコンピューティング環境「Compute@Edge」で、JavaScriptのサポートを発表しました。 JavaScript on Compute@Edge is here. https://t.co/wSHiJfPdvf pic.twitter.c
CSSのユーティリティクラスと「関心の分離」——いかにしてユーティリティファーストにたどり着いたか（翻訳） - yuhei blog
Tailwind CSS作者のAdam Wathan氏による「CSS Utility Classes and "Separation of Concerns"」の日本語訳です。翻訳に当たって原著者の許諾を得ています。 2021年10月29日に全文再翻訳しました。 この数年の間で、私のCSSの書き方は、非常に「セマンティック」なアプローチから「ファクショナルCSS」と呼ばれるものに変わりました。 この書き方でCSSを書くと、多くの開発者からかなりの反感を買うことがあります。そのため、私がいかにしてここまでたどり着いたかを説明することで、その過程で得た教訓や洞察について共有したいと思います。 第1段階 「セマンティック」なCSS よいCSSのためのベストプラクティスとして、耳にするであろうことのひとつは「関心の分離」です。 考え方としては、HTMLにはコンテンツについての知識のみを含めるべきで
CSS Variablesを使ってWeb LP制作のエンジニア作業時間を0にした話 - Mirrativ Tech Blog
こんにちは。Webフロントエンジニアの駒木です。 Mirrativでは毎週の様に運営主催イベントやゲーム会社様とのコラボ企画イベント等が開催されます。 そのイベント情報をユーザーへお伝えするメディアとして、イベント毎にWebページ いわゆる LP ( Landing Page ) を制作・公開しています。 Mirrativで公開している多種多様なLP ですが毎週の様に新しいイベントが企画・開催されますので、LPをエンジニアが都度制作していてはとても追いつきません。 そこでミラティブではCSS Variablesを活用することで、イベントの魅力が伝わるWeb LPをエンジニアが作業することなく制作・運用できる体制を構築しています。 本記事ではここまでに至った過程も含めお伝えします！ 目指すはイベント運用の効率化と専門性の排除 遡ること半年ほど前、イベント企画チームの目標として『より多くのイベ
JavaScript初心者のため、デバッグ力がまだまだ拙くどうしたらデバッグ力ってつくのだ…と悩んでいたら 👨💻 < スタックトレースするといいよ！ 👨💻 < スタックトレースするにはdebuggerとかconsole.trace()使うといいよ！ と教えていただきdebuggerを使ったらとても便利だったので🙏 スタックトレースとは スタックトレース (stack trace)とは エラーが発生したときに表示される内容で、そのエラーが発生するまでの過程（どんな処理がどの順番で呼び出されたかの流れ）を、ざっくりと表示したものです。 「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 スタックトレースを使って問題をどう切り分けるか まずは問題が起きている箇所のスコープを狭くしていきましょう💡 問題の切り分け方として ざっくり入口と出口の関数に適切な値が入って
Logpointsを使おう Webフロントエンドの開発をする際、デバッグ目的で「特定の処理が実行された」ということを確認するために console.log() を使うことは多いと思います。しかし、Google Chrome や Microsoft Edge で利用可能な Logpoints を利用することで、 console.log() を使わずともコンソールにメッセージを出力することが可能です。 なぜLogpointsを使うの？ Logpoints を使うのには以下のメリットがあります。 デバッグや動作確認のためにコードを変更する必要が無い console.log() を誤ってcommitに含めてしまう心配が無い console.log() を入れた後に再ビルドやホットリロードを待つ必要が無い どうやってLogpointsを使うの？ logpoints は以下のように使用します。 Chr
はじめに 本業ではGo,Laravelでバックエンド開発したり、ECS,CDKを使ってDevOps周りを整えようと頑張ったりしてます。 今回はアプリケーションチームがインフラチームにインフラ構築依頼を出さなくても自律して環境構築ができるようにBackstageを利用するプランを考えて実装をしてみました。 対象読者 プラットフォームエンジニアリングに興味がある方 目次 解決したい課題 参考書籍 採用技術 解決策 解決できた課題 解決できていない課題とその解決策 感じたこと 解決したい課題 インフラ構築にかかるコストが大きい 見積もりよりもインフラ構築にかかるコストが大きくなっていました。CDKによるインフラのコード化は行なっていますが、必要な情報を揃えるまでに時間がかかっています。その原因としては以下の２つが考えられました。 アプリケーション担当者とインフラ担当者の間でのコミュニケーションコ
HyperForm
formタグのaction属性にURLをセットするだけで、データの管理や自動返信メールの送信などができる、ヘッドレスフォームサービスです。
この記事は以前7月に自分で書いた「Hono + htmx + Cloudflare is a new stack」という記事を一部修正し、訳したものです。 Hono + htmx + Cloudflareは新しいスタック 以前、バックエンドエンジニアだった身からすれば、Reactは複雑だと感じることがあります。さらに（私はフレームワーク開発者なのですが）フレームワーク開発者にとってはハイドレーションの仕組みを作ることは厄介です。しかし、しばしばReactを使うことになります。 Reactの優位な点の一つは「JSX」です。最初見た時、JSXは奇妙に思えました。「なんでJavaScriptの中にHTMLのタグが入っているんだ！」。しかし、一度慣れると、JSXは柔軟で、書きやすいことに気づきました。 今日はこれから、JSXをサーバーサイドのテンプレートとして使う技術スタックを紹介します。これはつ
大統一 Node ツールチェイン Rome の野望 現状の実装
つい先日 beta リリースされたフロントエンドのツールチェインの Rome について、その思想とコードを読んだ結果の現状について。 Rome Frontend Toolchain この記事は公式ドキュメント以外にもソースを読んで得られた undocumented な部分も含んでいるので、すぐ古くなる。その前提で読むように。 問題の認識とその解決手段 フロントエンドの最適化は実行前のプリプロセスに、エコシステムの開発リソースの多くが当てられている。Node のツールチェインが発達するにつれて、自前の パーサ+AST 定義を持つ実装が増えていった歴史がある。 acorn(estree) babel prettier typescript terser それぞれのツールの生成する AST はそのツールの都合で微妙に/もしくは大幅に定義がずれている。typescript に至っては完全に別物。こ
Software Design「データベース速攻入門」に「SQL50本ノック」が掲載されました - LIVESENSE ENGINEER BLOG 最近では、postgres-wasmなど、WebブラウザでDBを動かせるようになってきており、もう少しすれば、WebAssemblyを使って、ブラウザですぐにノックを始められるようになるかもしれません。もしも、また何年か後に記事を更新する機会があれば、試してみたいですね。 Web上からすぐに試せるpostgres-wasmはPagilaのデータを持っていくことが現時点で出来なさそうだったものの、SQLite3 WebAssemblyはSQLiteのデータを持っていけました。SQL50本ノックを気軽に試せそうです。 手順1 sakila-sqlite3をダウンロード まずgithubからsakila-sqlite3をダウンロードします。 gith
JavaScript / TypeScript の豆知識 10 選 初めに JavaScript / TypeScript にまつわる豆知識を、10 個ほど集めてみました。 コードは全て TypeScript で書いていますが、内容はほぼ全て JavaScript にも当てはまることです。 少し長めの読み物ではありますが、気軽に当記事を楽しんで頂ければ幸いです。 それでは、以下が目次です。 JavaScript / TypeScript の豆知識 10 選 初めに 1.Nullish と Falsy 関連参考資料_1 2. tsconfig の便利な設定 関連参考資料_2 3. 依存関係の綺麗な図示の仕方 関連参考資料_3 4.正しい XSS のやり方 関連参考資料_4 5.removeChildren 関連参考資料_5 6.数値型を関数の引数として使う時の小技 関連参考資料_6 7.hi
HTTP/3の基盤となる「QUICプロトコル」の標準化プロセスが完了、IETFの「RFC 9000」として 現在標準化が進められている新たなHTTPである「HTTP/3」のトランスポート層プロトコルとなる予定の新しい通信プロトコル「QUIC」が、インターネットで用いられる通信プロトコルなどの標準化を行う団体のIETF（Internete Engineering Task Force）により「RFC 9000」として策定を完了、新たなインターネット標準になったことが明らかになりました。 QUIC is now RFC 9000 | Fastly QUIC is RFC 9000 | daniel.haxx.se QUICはもともとHTTPをより高速化するためにGoogleが開発し、その後IETFで標準化が進められてきました。 QUICはまずは次世代のHTTPであるHTTP/3のトランスポート
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料の証明書発行を「Let’s Encryptだけに頼るのは問題」との指摘、どんな代替サービスがあるのか？
データ移行をしただけなのに…（起こってしまったメール誤配信） - Qiita
React 18に備えるにはどうすればいいの？ 5分で理解する - Qiita
Frontend Study #1: 基調講演 - Frontend 領域を再定義する
JavaScriptビルドツールの整理 各ツールの機能と依存関係
VueもReactもやったことないのでVanilla JSでやってみたSPA - Qiita
JavaScript Primer 2.0 - ECMAScript 2020に対応した入門書を公開しました
【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita
ピクセルパーフェクトは必要なのか？ HTMLコーダーの考え方まとめ
Prisma で本物のDBMSを使って自動テストを書く - mizdra's blog
JavaScriptのES2023・ES2022の新機能まとめ - ICS MEDIA
Fetch APIは「PATCH」だけ大文字と小文字の挙動が異なる
【PHP8.0】非厳密な比較演算子`==`の挙動が今さら変更になる - Qiita
Web配信の技術という本を書きました – cat /dev/random > /dev/null &
QUICの実装はTCP並みの効率を実現できるか？ Fastly奥氏らがベンチマークを紹介
フロントエンドエンジニアにおすすめchrome拡張機能 - Qiita
Vue.jsを使用してさまざまなフォームを簡単に実装できる -Vue Formulate
Node.jsを過去の物にする最速の肉まん - Qiita
ウェブサイトのさまざまな「認証方式」をまとめて比較した結果がコレ
JavaScriptのデバッグにはdebugger文を使おう - Qiita
console.log() の代わりにdevtoolsのLogpointsを使う - Qiita
インフラ構築を完全に自動化してみる - Qiita
Hono + htmx + Cloudflareは新しいスタック
SQL50本ノックをSQLite3 Fiddleで試す - Gマイナー志向
JavaScript / TypeScript の豆知識 10 選 - Qiita
HTTP/3の基盤となる「QUICプロトコル」の標準化プロセスが完了、IETFの「RFC 9000」として