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年のキャリアを
まもなくやってくる Vue.js 3
Amazon Aurora Serverless v2が意外と高かった話と、�AWS Database Migration Serviceの話
こんにちは！小田島です。さくらのナレッジで初めて記事を書きます。よろしくお願いします！ 先日5月13日、Deno 1.0がリリースされました。Denoについては後日記事を書きますが、今回はDenoが生まれるきっかけとなったNode.jsについて、いまさら聞けないことを色々書いていきます。 対象者 本記事は、Node.jsについて以下のような疑問を持っている人が対象です。 Node.jsって何？ Node.jsを使うと何がうれしいの？ Node.jsを使うときに何を注意すればいいの？ なお、本記事はNode.jsのイメージを掴んでもらうのが目的であり、ハンズオンではありません。そのためコードは1行も出てきませんのでご了承ください。 そもそもNode.jsとは？ 超ざっくり説明すると、JavaScriptの実行環境です。 それまではJavaScriptといえばウェブブラウザー上で動かすのが普通
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書きたくないとか思うかもしれない
Private Relay と IP Blindness による Fingerprint 対策 | blog.jxck.io
Intro iOS15 がリリースされたため、 Private Relay のベータを試すことができた。 このようなサービスが提供されるようになった背景を踏まえ、挙動を簡単に確認しつつ、解説する。 背景 そもそも、なぜこのようなサービスが出てきたのかを理解するには、現在のインターネットが抱える問題の背景を理解する必要がある。 特に Web において問題になっている「トラッキング」を防ぐために、法的な規制や業界団体の自主規制による対策は長いこと行われてきたが、それでも看過できないインシデントなどが目立ったために、 Apple の ITP を皮切りに 3rd Party Cookie の制限が始まった。 ここで重要なのは、「本来防ぎたいのは 3rd party Cookie という技術ではなく Tracking というユースケースだ」という点だ。 この前提が伝わっていない場合、トラッキングのユ
Google、マイクロソフトらが設立、「Open Web Docs」を発表。MDNなど支援、Web技術のドキュメント化を推進
オープンソースやテクノロジーを中心としたコミュニティの維持や発展を支援する組織「Open Collective」は、Web技術のドキュメント化を長期的に支援する取り組みとして「Open Web Docs」を発表しました。 Open Web Docsはおもに既存のコミュニティによるドキュメント、特にMozillaのMDNをまずは優先的に支援するとしています。 We’re happy and proud to announce Open Web Docs, to support a community of technical writers around creation and long-term maintenance of web platform technology documentation that is open and inclusive for all.https://t
AWS、コンテナにWebアプリを置くと簡単にデプロイが完了する「App Runner」リリース。オートスケール、ロードバランス、証明書の管理などすべておまかせ
AWS、コンテナにWebアプリを置くと簡単にデプロイが完了する「App Runner」リリース。オートスケール、ロードバランス、証明書の管理などすべておまかせ AWSは、コンテナに特化したWebアプリケーション実行環境のマネージドサービス「AWS App Runner」をリリースしました。 #AWS App Runner is a fully managed container application service that makes it easy for customers to build, deploy, and run containerized web applications and APIs without container or infrastructure experience.#Developer #CloudComputing https://t.co/eMw
Dockerfile自信持って書けてますか？おすすめlintツール 「hadolint」について紹介 - Qiita
はじめに Dockerfile、サッと書こうと思ったのに、書き始めたら意外と時間かかったりしますよね。 突き詰めるとすごく奥が深いなと思います。 公式のドキュメントでも、Dockerfileのベスト・プラクティスという形で公開してくれていますが、 これを毎回意識するのは大変です。 また、意識できていたとしても、複数人で管理していると、各個人のスキルレベルによって差が出てしまいます。 そんなときにおすすめのツールを見つけたので紹介します。 hadolintというツールです。 Haskell Dockerfile Linterの略だそうで、Dockerfileの静的解析を行ってくれるlintツールです。 hadolintを使うとこんな利点があります。 build前にシンタックスエラーなどに気付ける (地味にトライアンドエラーしてると時間食うんですよね...) 自然とベストプラクティスに則ったD
ここ数年、PWA（プログレッシブウェブアプリ）が非常に注目されています。通常のWebページとスマホアプリそれぞれの利点を兼ね備えており、導入したサイトではコンバージョンやユーザーエクスペリエンスの改善が大きく見込めます。 WebサイトをPWAにする手順とその必要性を紹介します。 Turn Your Website into a PWA by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 PWA（プログレッシブウェブアプリ）とは なぜPWAを構築する必要があるのですか？ すでにPWAを採用しているのはどこですか？ PWAを作成する時に必要なもの Web App Manifest Service Worker PWAを5分で構築しよう 静的キャッシュ 動的キャッシュ 静的と動的のどちらを使用すべきですか
JavaScriptのデザインパターンについて
どうもoreoです。 今回はモダンなJavaScript開発環境で役立つデザインパターンを紹介します。 この記事は、JavaScript Patterns WorkshopとPatterns.devを参考にしています。 有名な「Java言語で学ぶデザインパターン入門」などでは、古典的な23個のデザインパターンが紹介されていますが、JavaScript Patterns WorkshopではPatterns.devをベースとして、モダンなJavaScriptにおける6つのデザインパターンについて言及されています。この記事ではそれらについてまとめてみたいと思います！ ※本記事中のコードは、JavaScript Patterns WorkshopとPatterns.devから引用させていただいております。 1 Design Patternsとは？ デザインパターンとは、ソフトウェア開発で繰り返し
ライブドアブログが15年かけて積み上げた技術的負債への挑戦 LINEのブログサービスのエンジニアが明かす、光と影 Inside of Blog 15年熟成されたサービスの光と影、カオスとレガシーへの挑戦 #1/2 2019年11月20、21日の2日間、LINE株式会社が主催するエンジニア向け技術カンファレンス「LINE DEVELOPER DAY 2019」が開催されました。1日目は「Engineering」をテーマに、LINEの技術の深堀りを、2日目は「Production」をテーマに、Web開発技術やUI/UX、プロジェクトマネジメントなど、より実践的な内容についてたくさんのプレゼンテーションが行われました。「Inside of Blog; 15年熟成されたサービスの光と影、カオスとレガシーへの挑戦」に登壇したのはLINE 開発Bチームの大森貴博氏。前半パートとなる今回は、今年で3
Update 2024-03-30: Chrome 123 から "Emulate a focused page" が追加された。 これを用いれば良いため、以降の全ての方式は古くなった。 Apply other effects: enable automatic dark theme, emulate focus, and more https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page マウスが乗ってないと出ない UI も、そこに Tab などでフォーカスを移し、その状態で Dev Tools の "Emulate a focused page" を有効にすれば良い。 Intro 先日、後輩が「mouseover 中にしか表示されない DOM のデバッグ」に手こずっ
9/7 タイトルを修正&一部加筆しました。 非エンジニアでもできる！ウェブ地図サイトの作り方 → 非エンジニアの自分がウェブ地図サイトを公開するまで こんな風にグリグリ動かせるウェブ地図サイト、作ってみたいけどハードルが高いなぁ…という方もいらっしゃるのではないでしょうか。 実際、自分もサイトを作るまではそう思っていました。 しかし意外と簡単に、オープンソースのソフトのみで作れてしまうんです！ （サーバ代や取得するのであればドメイン代等はかかりますが…） 非エンジニアのデザイナーの自分ですがサイト公開までできたのでやり方を共有します！ ※自分のスキルとしては関してはgithubもVScodeも使えない、CSSとhtmlぐらいならツギハギでなんとか…(10年前ぐらいの知識)というレベルなので、特に後半のサーバ周りに関してもっと楽なやり方があるかもしれません。 QGISで地図を作る 一番の肝は
最近以下のような記事で個人開発のコストの話をよく見かけて、ちょうど自分も個人サービスをコストカットのためにVPSからほぼ無料なスタックに移行していたので構成とかを書いてみる。 前提としてはこんな感じ。 仲間内で使ってるだけのWebアプリケーション。月イチくらいしか使わない 技術スタックは技術的な実験とか学習を兼ねているので多少オーバースペックになるのはいい お金はなるべくかけたくない 移行前のスタック フロントエンドはNuxt.js、Netlify バックエンドはRailsでgRPC、envoyを噛ませてフロントエンドからはgRPC-Webで呼んでる VPS上にバックエンドのアプリケーションとDB（postgres）を動かしてる バックエンドは普通のRailsアプリにしてHerokuにするのが一番楽でお金もかからないんだけど、gRPC-Webを試してみたくて、そうするとproxyが必要にな
ジャバの異常な愛情 またはSpringはいかにしてモダンであることを止めて時代遅れになったのか - Qiita
Spring以前 RPC 業務で使うシステムはサーバー間で連携することが多い。2019年現在ではREST apiに対してjsonやprotocolbufferで呼び出す事が当たり前のように行われているが、まだjsonも発見されていない時代はもっと複雑な仕組みが取られていた1。異機種間でやりとりするためのCORBAや、機種に依存しないデータプロトコルのASN.1なども利用されていたが、仕様は複雑でそれぞれをハンドリングするライブラリは有償で売られ、ベンダーからサポートを受けながら使用するようなものだった。 RMI Javaの世界ではJava同士でやりとりするためのRMIが定義され、比較的に楽にRPCできるようになった2。とはいえhttpでrestをコールすることに比べたらアホみたいな複雑さである。 https://docs.oracle.com/javase/jp/1.3/guide/rmi
https://blimpup.io TL;DR docker-compose をリモートで実行するための開発フェーズ向けのサービス ローカルマシンへ負荷をかけずに開発できる URL を発行してくれるため第三者への公開も可能 概要 blimpup はざっくりいうと「docker-compose をリモートで実行する」ためのサービスです。 用途としては本番環境としてではなく開発フェーズでの利用を想定されており、docker-compose を使用した開発の効率化を行ってくれます（k8s のtelepresence に近いイメージです）。 従来開発フェーズで使用していたdocker-compose をローカルで直接コンテナを動かすのではなく、blimp の提供するインフラ上で動かし、ローカルマシンに負荷をかけることなく開発が可能になります。ローカルのファイルと同期を行ってくれるためファイルの更
（追記）Qiita側での修正リリース完了 こんにちは。元 @500 です。 Qiitaのご担当者様から、当該ユーザー名を取得出来ないようにする修正リリースを11月19日に行ったと連絡を頂きました。 同時に、ユーザー名の変更依頼を受けましたので、 別のユーザー名に変更し今に至ります。 この記事をご覧になった方からいろいろな意見が来ていましたので、11月12日時点の記事内容に加筆をして以下に残します。 その出会いは偶然に…… なぜか空いていた「短いユーザー名」 これまで備忘録はiCloudのメモに書いて同期していたのですが、今さらQiitaに記事を書こうと先ほどアカウントを作成しました。 私は特に共通のハンドルネームみたいなのもなく、各種サービス登録時には超適当にユーザーIDやユーザー名を決めるタイプです。 Qiitaでは3文字以上とあったので、適当にユーザー名500と打ってみたら、意外にも一
2024年のファビコンを極める: 本当に必要なファイルはほぼ6つ（翻訳）｜TechRacho by BPS株式会社
はじめに モダンブラウザで使われるファビコンの作り方を見直して、今こそアイコン生成であくせくするのを終わりにしましょう。昨今のフロントエンド開発者は、ブラウザタブやらタッチ画面やらにWebサイトの小さなロゴを表示する、ただそれだけのためだけに静的なPNGファイルを20個以上扱わなければなりません。よりスマートな方法で、現代のニーズに合う最小限のアイコンセットを使う方法を紹介します。 ファビコンは見かけよりもずっと幅広く奥深いトピックで、実は誰もがファビコンについてしっかり学びたいと思っていることもわかってきました。本記事全体の内容を実質わずか2行のスニペットに凝縮したものも紹介していますので、今ファビコンで苦しんでいる方は（正確な使い方をご存知なら）そちらをお使いいただけますが、そこをぐっとこらえて記事を最後までお読みいただくことをおすすめいたします。 🔗 忙しい人向け: ウルトラショー
Let’s Encrypt は無料でサーバー証明書を発行してくれる認証局です。2016 年のサービス開始以来、 急速に普及しています。 Let’s Encrypt の証明書発行には ACME プロトコルに対応したクライアントソフトウェアを使います。主要な ACME クライアントソフトウェアは ACME Client Implementations で紹介されています。Let’s Encrypt のサイトでは certbot というツールが推奨されているのですが、 このツールは Windows には対応していません。Windows 環境では win-acme （旧名 letsencrypt-win-simple） というツールが良く使われているようです。 私も、 これまで win-acme を使ってきたのですが、 先日、 ふとしたことで mod_md という Apache モジュールの存在を
JavaScript を書いたことがある人ならば一度は使うであろう console.log ですが、この関数は思ったよりも厄介な性質を持っています。その性質を知らずに console.log を使うと、デバッグ時に大ハマリしてしまうことがあります。この記事では console.log の落とし穴についてお話します。 今回は Chrome に特化して解説しますが、Firefox や Safari でも同じ落とし穴があります。 console.log とは まずはさらっと基本をおさらいしましょう。 大前提なのですが、console.log は JavaScript の言語仕様（ECMAScript）で定義されていません。ブラウザ向けには whatwg の仕様がありますが、あくまでもそれはブラウザ向けの仕様であり、Node.js を含むほぼ全ての JavaScript 環境で使えるのは cons
普段何気に使っているPostman。最近まで「手軽にGUIで疎通を試せて、設定を共有できてべんり〜」くらいで使っていました。 けどふと「実はもっと便利な機能があるのでは？」と思って調べてみたところ、色々出てきたのでせっかくなのでシェアしたいと思います。 たまたまですがちょうど10選！ 地味に便利な機能10選 VSCode拡張 PostmanにはVSCode拡張機能があります。 インストールするだけで、VSCodeのサイドバーから利用可能です。 日本語設定 日本人なので日本語で使いたい。 右上の歯車→Settingsから以下の通り選択することで日本語化が可能です。 変数の定義 複数のAPIで同じ値を使いたい場合があるとします。例えばテスト用のユーザーIDなどです。 Postmanではそんな値をAPIファイルに逐一ハードコードする必要はなく、変数に保存することが可能です。 Postman Ec
はじめに Webサーバーを使うときに、NginxとApacheって言葉よく耳にしますよね。 ただその違いっていまいち良くわからなくないですか？？（僕だけだったらすみません笑） ちなみに僕は「Nginxの方がなんか人気だし良さそうな気がする。。。」という何の根拠もないイメージしか持っていませんでした。 さすがにもう少しちゃんと理解したいと思い、今回はこの違いを記事にしてみました。 ぜひぜひ最後まで読んでみてください〜！ ※ちなみにNginxとApacheはそれぞれ、「エンジンエックス」「アパッチ」と読みます。 そもそもNginxとApacheとは？ NginxとApacheはWebサーバーのソフトです。 サーバーにこれらのソフトをインストールすると、Webサーバーとしての機能をもちます。 Webサーバーソフトにおいて、2021年12月時点でNginxとApacheが圧倒的シェアを誇っています
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
Niigata 5分 Tech #4と、モニクル社の社内LT大会で喋ったやつです https://niigata-5min-tech.connpass.com/event/307076/
私が愛するフロントエンドのツールたち2023
自分がチームでフロントエンドの開発をするときの技術選定について書きます。 ログインしてユーザーごとに個別の情報を扱うことがメインのサービスを前提に書きます。 考え方 メンテナンス性の優れたものを選ぶ 制限が少ないものを選ぶ 余計なことに気を使わない 一気にいろんなことに挑戦しすぎない フレームワーク 正直に書くと最近は問答無用でNext.jsを選択しています。 慎重な性格なので、自分が責任を持って開発、運用するプロダクトであれば自分の経験値が高く、多くの課題をクリアできるNext.jsを選びます。 一部インフラの制約があるものの、ページごとにSSGやSSR、On-demand ISRなどができること、Reactの大きなエコシステムの恩恵を受けられることは非常に大きいです。 採用面でも現状Reactを扱える人は他のフレームワークを扱える人より多く感じます。 次点でCloudflare Wor
はじめに さっぶ。どうも、だーやまんです。 この記事は、本番環境でやらかしちゃった人 Advent Calendar 2019 - Qiitaの11日目の記事です。 これは、中途半端な知識でサービスを運用していた結果、タイトル通りの大失敗をしてしまったお話です。個人開発での出来事なので、業務で起きたことかと胃薬を握られていた方はご安心ください。 語るのもすごい恥ずかしいレベルですが、戒めのために晒しておきます。 この記事を読んでほしい人 初めてインターネット上にサービスを公開しようとしている人 喋太郎の利用者様(この場をお借りして、改めてお詫び申し上げます。本当に申し訳ございませんでした。) 背景とか Discord読み上げBot 「喋太郎」にてやらかしました www.dayaman.work 利用者が約10万人 さくらのVPSにてAppサーバ2台、DBサーバ1台で運用 各サーバの死活監視
vite4がリリースされましたが、プロジェクト作成時に「vite@latest」を指定しているため問題ありません。 vite4は、以下を参照してください。 https://vitejs.dev/blog/announcing-vite4.html はじめに Reactの開発環境は、CRA(Create React APP)がよく使われますが、CRAは沢山のモジュールの整合性の確認などのため、アップデートがリリースされるまでの間隔が結構あります。 また、使われているモジュールをアップデートするとエラーに悩まされたりします。 ゼロからReactの開発環境を作成していたのですが、いろいろとトライを繰り返すうちに以下の方法に落ち着きました。 比較的短時間で環境が作成できますし、全て最新のモジュールが使えます。 Vite nodejsを用いたJavaSriptプロジェクトは、、Webpackなどでプ
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
GitHub、Rails 6がリリースされてからわずか9日で移行を完了。短期間で問題なく移行できた理由とは？
GitHub、Rails 6がリリースされてからわずか9日で移行を完了。短期間で問題なく移行できた理由とは？ 2019年8月17日、Ruby言語によるWebアプリケーションフレームワークの「Rails 6」がリリースされました。 Rails 6は、Railsアプリケーションでのメールやリッチテキストなどを扱いやすくした新機能に加えて、マルチデータベース対応、パラレルテスト機能なども追加されています。 参考：Rails 6.0正式版がリリース。Action Textでリッチテキスト対応、Action Mailboxでメール処理、マルチデータベース、パラレルテストなど新機能 GitHubはRails 6の正式リリースから約9日で、同社の本番システムをRails 6に問題なくアップグレードしたことをブログ「Running GitHub on Rails 6.0」で報告しています。 On Augu
経緯 私Google系はド素人だったのでハンズオン勉強会に参加した所短時間でスムーズにざっくり理解できた気がするので自分なりに整理するために記事にしました。（開催元には許可頂いてます） 参加した勉強会 こちらの勉強会に参加しました。案内のとおり、若手エンジニアが多く私浮いてた気がしますが全く気にしてないです。若い世代のエンジニアと交流すると私もがんばらなきゃという気になります。 ハンズオンスライドがとてもわかりやすかったです。このスライドの手順さえあれば1時間で簡単に作れます。 こういうの作るの大変だけど自分自身勉強になるんだよね。 おそらく、Googleが提供しているここのFirebaseWebCodelabのチュートリアルから翻訳とカスタマイズして作成したんだと思います。 完成イメージ こんなのが作成できます。Google認証も簡単に実装できちゃう。 アプリの構成 作成するチャットアプ
「jqueryとかbootstrapってオワコンだよね」という人がいますが、本当にオワコンなんですか？どの辺がオワコンなんですか？
回答 (9件中の1件目) 使える人が増えて、人材としてのコストが下がったからじゃない？昔ほど使えるからってたくさん給料が貰える訳じゃないかならね。 雇う側からしたら、安価で頼めるから全然終わって無いんだけど（笑）むしろ使いこなせる人が増えると依頼を掛けやすくて良いよね。もちろん、イイデザインに仕上げてくれるのなら高いお金を払う価値はあると思っています。 道具としてマズくなかったら全然問題ない。
JSON にもコメントを書きたい - Qiita
JSON の構文は至ってシンプルです。 JSON は名前（キー）と値のペアがセットになった「オブジェクト」から構成されています。 キーはダブルクォートでくくられた文字列です。 値はダブルクォートでくくられた文字列、数値、真偽値、null 値、配列、またはオブジェクトです。 キーと値はコロン（ : ）で区切ります。 ペアとペアの間はカンマ（ , ）で区切ります。 前後を中括弧（ { , }）で挟みます。 { "文字列": "文字列", "数値": 0, "真偽値": true, "null値": null, "配列": [ "要素1", "要素2" ], "オブジェクト": { "キー": "値" } } そう、JSON にはコメントを記載するための構文がないのです。近年では設定ファイルなどで利用されることも多い JSON ですが、コメントによる説明が不要なキーを名付けることは現実的ではあり
モジュラモノリスに移行する理由 ─ マイクロサービスの自律性とモノリスの一貫性を両立させるアソビューの取り組み｜ハイクラス転職・求人情報サイト AMBI（アンビ）
モジュラモノリスに移行する理由 ─ マイクロサービスの自律性とモノリスの一貫性を両立させるアソビューの取り組み 大規模なソフトウェア開発においてモノリシックかマイクロサービスかというアーキテクチャの議論がありますが、近年は第3の選択肢としてモジュラモノリスが話題になっています。いったんマイクロサービス化に舵を切りながら現在はモジュラモノリスに取り組むアソビューの考え方や進め方について、VPoEの兼平大資（disc99）さんによる寄稿です。 アソビューでは、現在の事業状況にマッチしていることや過去の経緯から、モジュラモノリスを中心としたアーキテクチャを採用しています。 今回は、なぜその選択をし、どのように実現しているかを紹介します。 記事の前半では、アソビューが提供する事業や、アーキテクチャに対する考え方、開発組織の歩みなどを説明します。 中盤以降は、アソビューにおけるモジュラモノリスへの取
Intro SPA の隆盛で進化したフロントエンドライブラリによって生み出された「コンポーネント」という資産は、それを View 層の最小単位として扱うエコシステムにその重心をずらした。 近年の Web 開発は、虫食いのテンプレートエンジンにデータをはめ込む方式から、デザインシステムにカタログされたコンポーネント群に、 API から取得したステートを流し込み、それらを「いつ、どこで、どう」レンダリングするかという課題への最適解を、各位が模索するフェーズとなっている。 コンポーネントを敷き詰めるコンテナ側の設計は、 Flexbox および Grid の登場によるレイアウトの進化が手助けしたところも多いにある。しかし、「ページ」を前提に設計された CSS は、「コンポーネント」を前提にした設計に移行するうえで、ミッシングピースが多かった。 現在、提案/実装が進んでいる CSS の新機能群には、
<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイル方法をはじめ、ボタンの実装時にある落とし穴の解決方法についても明らかにします。 Styling The Good Ol' Button Element by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 button要素のデフォルトのスタイル button要素の基本的なデザイン アイコン付きのボタン 複数行のボタン アンカーリンクとしてのa要素とbutton要素 アウトラインボタンの
![[CSS] button要素のスタイルシート、最新テクニックを徹底解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/e9ba8b37585d86205a71d0de6b3c024cd8265254/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202001%2F2020031410.png)
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
指示したUIをAIがTailwindベースで実装してくれるv0が凄い
なぜ出力時のHTMLエスケープを省略してはならないのか - Qiita
いまさら聞けないNode.js | さくらのナレッジ
WebサイトをPWA（プログレッシブウェブアプリ）にする手順とその必要性
ライブドアブログが15年かけて積み上げた技術的負債への挑戦––LINEのブログサービスのエンジニアが明かす、光と影
mouseover 中に表示される DOM のデバッグ | blog.jxck.io
非エンジニアの自分がウェブ地図サイトを公開するまで - Qiita
デジタル庁が公開している『ウェブアクセシビリティ導入ガイドブック』がお勧めらしい／「電車内で動画を見たいのにイヤホンを忘れた」ときにも役立つみんなのためのデザイン
個人開発のサービスをVPSからVercelとCloud Runに移行した話
ローカルマシンでDocker を動かさないためにBlimp を採用する - y-ohgi's blog
「Qiitaのユーザー名に3桁数字を使うときの注意」とその後 - Qiita
ApacheでのLet's Encrypt運用が簡単になりました
Chrome の console.log でハマらないために
Postmanを使い始めた時に知っておきたかった地味に便利な機能10選 - Qiita
NginxとApacheって何が違うの？？ - Qiita
postgresのデータを盗まれた話 - のんびりやの日記
2022年秋版 最新React/Typescript開発環境の作成 - Qiita
Nondestructive_TypeScript.md
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
Firebaseで1時間で簡単なWebチャットアプリが作れるハンズオン - Qiita
Internet Explorer は Microsoft Edge へ – Windows 10 の Internet Explorer 11 デスクトップアプリは 2022 年 6 月 15 日にサポート終了 - Windows Blog for Japan
次世代 CSS 仕様が与えるコンポーネント時代の Web への影響 | blog.jxck.io
[CSS] button要素のスタイルシート、最新テクニックを徹底解説
Vue.js 3 に向けた Vue.js 入門