任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリ・「CSS Code Quality」 - かちびと.net
CSS Code Qualityは任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリです。JavaScriptで書かれています。 解析したいCSSを利用しているWebサイトのURLを入力すると自動で解析し、メンテナンス性、複雑さ、パフォーマンスの3項目をそれぞれスコアリングし、その内訳レポートを提出してくれます。 大きくスコアを下げる要因は赤、出来るだけ改善すべき要因はオレンジのラインが引かれます。レポートはその場に表示されますがJSONでも提供してくれます。直接CSSコードを貼り付けてチェックする事も可能です。 CSSの最適化や改善作業などを手助けしてくれそうですね。ライセンスはMIT。 CSS Code Quality
【現在は対応不要】Chrome80以降でALBの認証を使っているとcookieが4096バイトを超えて認証できないことがあり、社内サービスではcookie名を縮めて対応した - hitode909の日記
2020/2/18追記 サポートに問い合わせたところ、ALBの不具合はロールバック済みで、cookie名を縮める対応は不要、とのことでした。試してみたところ、たしかにcookie名の指定をやめても問題なく認証できました。 AWSのApplication Load Balancerの認証機能を使って、スタッフからのアクセスのみ許可する社内向けウェブサービスを運用しているのだけど、昨日くらいからGoogle Chromeで認証が通らなないという声を聞くようになった。 現象としてはリダイレクトループが発生していて、コンソールを見るとSet-Cookie headerが長すぎるというエラーが出ていた。 Set-Cookie header is ignored in response from url: https://****/oauth2/idpresponse?code=e51b4cf0-8b
WHERE 条件のフィールドを UPDATE するのって，明示的にロックしてなくても安全？全パターン調べてみました！ - Qiita
WHERE 条件のフィールドを UPDATE するのって，明示的にロックしてなくても安全？全パターン調べてみました！MySQLSQLPostgreSQLDatabaseQiitaEngineerFesta2022 TL; DR MySQL/Postgres とも， MVCC アーキテクチャの恩恵で， SELECT と UPDATE は基本的には競合しない。 単一レコードのシンプルな UPDATE でも排他ロックされ，排他ロック中のレコードへの UPDATE での変更操作は トランザクション分離レベルによらず ブロックされる。UPDATE 文に含まれる WHERE 句での検索もブロックされ，これはブロックされない SELECT による検索とは別扱いになる。 但し UPDATE 文の WHERE 句上で，更新対象をサブクエリの SELECT から自己参照している場合は例外。トランザクション分離
RubyとRailsの何が強いのか
Presented in Qiita Night Lightning Talks on 2022-12-02 https://increments.connpass.com/event/265957/
はじめに Laravel Advent Calendar 2021 7日目の投稿です。 枠があまっていたので1日目に続いて7日目も投稿します。 他の記事のタイトルを見ると応用的な内容が多かったのでLaravel初心者の方向けにおすすめのLaravelデバッグ方法(tips)を22個ご紹介します。 思ったより数が多くなったので、1つ1つは掘り下げず概要と簡単な使い方をご紹介します。 公式ドキュメントや参考リンクも載せているので詳細はそちらを見てください。 どれか一つでもLaravel開発のヒントになれれば幸いです。 おすすめの手法 特におすすめの方法をご紹介します。 2.17. テストコードを書く 一番のおすすめはテストコードを書くことです。 予期する値と実際の値をテストしながらコードを書くことで一つ一つの処理を確認しながら進めることができます。 2.5. beyondcode/larave
この記事は NIJIBOX Advent Calendar2019の13日目の投稿です。 背景 何かしらのロジックを作る際に、仕様変更に強いコードを書きたいぞい！ってエンジニアだったら思いませんか。今の仕様なら動くけど、もし仕様が変わり、そのために関数全書き直しとかしんどみが深すぎます。今回はこのしんどみを少しでも回避できるように柔軟なコードを書くぞい！って記事です。 ページネーションコンポーネントを例にしますが、なぜページネーションなのかというと僕が最近業務でページネーションを作り、かつ仕様の変更に強いコードの大切さを実感したからです。 そもそもページネーションとは ページネーション（pagination）とは、日本語で丁付け、ページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために
WebAssemblyをWin/Mac/Linuxで実行可能なランタイム「Wasmer 1.0」正式リリース。事前コンパイルによる高速起動やクロスコンパイルなどにも対応
WebAssemblyをWin/Mac/Linuxで実行可能なランタイム「Wasmer 1.0」正式リリース。事前コンパイルによる高速起動やクロスコンパイルなどにも対応 米Wasmer社はオープンソースのWebAssemblyランタイム「Wasmer 1.0」の正式リリースを発表しました。 Windows、Mac、Linux、FreeBSDに対応。Apple M1チップのMacにも対応します。 Wasmer v1.0.0 released!https://t.co/95zx1K7QAu — Wasmer (@wasmerio) January 5, 2021 WebAssemblyはもともとWebブラウザ上でネイティブコードに近い実行速度で高速に実行できるバイナリフォーマットとして開発され、2019年10月にW3Cの勧告に到達しました。 その後、WebAssemblyをWebブラウザだけで
はじめに 新年早々に面白そうな記事を見つけました。ReactでのAPI呼出しを最適化するために「部分的にサーバサイドで実行するコンポーネントを作る」というもののようです。 あるいは去年の記事ですが気になってたものとしてBlitz.jsでReactベースのFWであるnext.jsに永続化層を持たせてRailsのようなFWにしようというアプローチもあります。 どちらの記事も書かれてる内容自体は分かる気がするものの 「それをフロントエンドでやる意味あるの？」 というのが拭えずイマイチ腑に落ちなかったんですが、単純に 「私と最前線でやられてる方々で期待してるものがたぶん違う」 という気がしてきたので、その辺を整理のために書いてみます。 注意書き Vue.js/Nuxt.jsは少し触ったことがありますが、React Server ComponentsやBlitz.jsを触ったことは無いです 「なんで
フロントエンドのパフォーマンス計測は得意なのだが、サーバーサイド node.js のメトリクスの取り方はあまり知らなくて、いつも勘でやりがちだった。最近は業務でこの周辺で困ることが増えたので、勉強しなおした。 また、最近使ってみたかった cloudflare workers の制限で、メモリ 128MB、CPU 時間 50ms という制約があり、このためにも Node.js の CPU のメトリクスを計測できるようになっておく必要があった。 という目的を踏まえて、今回は OS やデータベースの最適化は扱わず、ネットワークとアプリケーション層だけに絞って学習した。あと仕事の Docker イメージのサイズにも悩んでたので、ここも。 (あと ISUCON 参加者が楽しそうだったのもある。 ISUCON のチューニング対象にフロントエンドは含まれないので…) 計測対象 今回実験したリポジトリはこ
プロダクト開発部バックエンド開発グループでエンジニアをしています、おかだです。 ココナラには開発環境改善委員会があり、開発スピードの維持・改善に取り組んでいます。 本日は、取り組みの一環としてAppleシリコンのMacでのDocker開発環境のパフォーマンスを5-10倍程度改善したお話をしたいと思います。 はじめに AppleシリコンのMacが発表されてから数年が経ちました。ココナラでも昨年から導入が進んでおります。新しく入社したメンバへはM1 MacBook Pro(最近だとM2)が標準で支給されるようになっており、現在はIntel MacとM1 Macが混在して利用されている状況です。 バックエンドの開発では、ローカルでの動作確認や単体テストはコンテナ内で実行できるようになっています。 Dockerパフォーマンス問題 M1 Macを導入したメンバから 単体テストが遅い 静的解析が遅い
基盤チーム所属の沖中( @okinaka )です。 「リファクタリング」という言葉、エンジニアのみなさんならご存知でしょう。 システムの振る舞いを変えずに内部を改善することを指す言葉です。 一般的に、コードの修正を指すことがほとんどですが、今回はデータベース設計のリファクタリングについてお話ししたいと思います。 絶版になってしまいましたが、データベース・リファクタリング という書籍に様々な手法が紹介されていて参考になります。英語で良ければ 原書 はまだ入手可能ですね。 データベース・リファクタリング 作者:スコット W アンブラー,ピラモド・サダラージ発売日: 2008/03/26メディア: 単行本 Refactoring Databases: Evolutionary Database Design (Addison-Wesley Signature Series (Fowler)) (
僕としてはGoのおすすめのフレームワークを聞かれたら、標準ライブラリのnet/httpと答えるようにしています。というよりも、Goの他のフレームワークと呼ばれているものは、このnet/httpのラッパーでしかないからです。 Goでアプリケーションを作成する場合のイメージは次の通り。battery includedなアプローチは他の言語でもたまにありますが、ついてくる機能が今時のものが多くて、標準ライブラリで済むことが多いです。ウェブ開発についてもそんな感じです。 PythonとかRubyとかもそうですが、言語組み込みのウェブサーバー機能はテスト用で本番運用には機能が足りない、性能が足りない、ということから「プロダクションに耐えうるフレームワークを別に入れないと」と思う人も多いんじゃないかな、と思いますが、Goの場合は組み込みのサーバーで問題なかったりします。Node.jsに近いかも？ 世間
こんにちは、デザイナーの小蕎です。UX DAYS TOKYOの読書会で学んだ”心理学や脳科学”の内容を取り入れた「脳科学で習慣化を促すアプリ（以下、習慣化アプリ）」を作ってみようということになりました。 アプリの画面設計をして、オーガナイザーである大本さんからUIを指摘されることで多くのナレッジを得られました。知識として頭にいれるだけでは身につかない、実際に作ってみたことで学べた事例をご紹介します。 CTAはメインカラーと異なるものを利用する 色を決定していく時に、ヘッダーや行動を誘導するボタン（CTA）もメインカラーにあわせた色にしていました。 それが左の画像です。ヘッダーと「次へ」ボタンが同じ色になっていて一見まとまりがあるように見えますが、馴染みすぎてしまいCTAであることや強調したい部分がユーザーに伝わりません。 メインカラーとボタンを同じにしてしまうと画面に馴染みすぎてユーザーの
2023/09/21 @ Findy のカンファレンス
はじめに この記事では、consoleメソッドについて紹介を行っていきます。consoleメソッドには例えばconsole.log()などが挙げられます。web開発においてconsole.log()を使用する方は多いかもしれません。しかしconsoleにはconsole.log()以外にも様々なメソッドがあるので、状況に合わせて使い分けることで少しでも快適なデバック、開発ライフを目指しましょう。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 consoleについて consoleオブジェクトを用いることで変数の値などをコンソール上に出力することができます。主に出力の確認であったり不具合の原因特定などのデバックするために
追記（2023.09.13） X にて、この記事が引用されて多くの議論が投稿されました。 それらの多くは以下の通り「ALB等の利用できる環境の現代であればもうNginxコンテナは不要」という内容が多数です。 その上で、本文に入って頂ければと思います。一部「いいね」が多いポストを貼り付けさせていただきます。 本文にショートカットしたい場合は、ここをクリック ここから本文 以前、チームで以下のような会話が生まれました。 「コンテナに nginx 立てずに、直で rails Appサーバに ALB から流せばいいじゃん？」 みたいな話。その際に理由を即座にレスできなかったので、調査しました。 puma や Unicorn はあくまでAppサーバなのでユーザ直アクセス用途として設計されていない バッファリング処理が弱い バッファリング処理（処理速度や処理にかかる時間の違いを調整すること） ngin
フロントエンドが遅いと言われた時に
Webアプリケーションで、ブラウザ上でJavaScriptを用いてAPIからデータを取得して画面に反映する挙動が遅いと言われた時にフロントエンド側が確認することと対処方法。 ユーザのボタンクリックなどのアクションをトリガーとして、APIからデータを取得し画面に反映するというシナリオがあった際に、ユーザのアクションから画面への反映に時間を要しているという状況を想定しています。 Largest Contentful Paint (LCP)が遅い場合に関しては、別のアプローチになるので今回は除外します。 本当にフロントエンドがボトルネックになっているか まず最初にすることは、APIのレスポンスタイムと、APIのデータを画面に反映する処理のどちらがボトルネックになっているかの確認です。 ユーザのアクションから画面への反映までの時間の中でAPIのレスポンスが大部分を占めている場合、プリフェッチなどの
Cookie2 とは何か | blog.jxck.io
Intro タイトルを見て「Cookie の新しい仕様か、キャッチアップしよう」と思って開いたのなら、以降を読む必要はない。 Cookie History 2000 年に発行された Cookie の仕様である RFC 2965 では、仕様中に Set-Cookie2/Cookie2 (以下 Cookie2) という 2 つのヘッダが定義されている。しかし 2011 年に改定された現行の RFC 6265 ではそれらヘッダは deprecate されており、実際の Web でこれらのヘッダが交換される場面を、少なくとも筆者は見たことがない。存在すら知らない開発者も多いだろう。 筆者はずっと、この仕様がどのように出てきて、どうして消えていったのかが気になっていた。 Web 上にも情報が少なく、「歴史上の理由で」とか分かったようなことを言ってる人がたまにいるくらいだ。四半世紀前のことなので経緯を
前回: Qiita APIで記事からYoutube動画を集めてみた 🎬 、Qiita APIを使って、Qiita記事を取得してYoutube動画のURLを抽出することができました。 今回は、特定APIに関連したQiita記事を取得して、API毎に分類、タグを集計してドーナツグラフ化することでAPIの特徴を表してみました。 最新のAPI一覧はこちら API一覧 | DOGAKIITAA! ～ APIごとにQiita記事を分類 ～ Google系 Cloud Vision API https://cloud.google.com/vision/docs/quickstart 📝 機械学習を使用して画像を解析します。画像ラベリング、顔やランドマークの検出、光学式文字認識（OCR）、不適切なコンテンツへのタグ付けなどができます。 Cloud Vision APIの凄さを伝えるべくRasPi b
corepack is 何?
追記: 2023-11-19 corepack v0.20.0 にて、CLI のコマンド体系が一新されて多少わかりやすくなりました (PR#291)。新しいコマンドは README を参照。 追記: 2022-02-03 Node.js v14.19.0 に corepack が標準バンドルされました。 corepack がバンドルされていない Node.js v12 系は 2022-04-30 に EOL を迎えるので、あと 3 ヶ月もすればアクティブな Node.js 環境には必ず corepack が揃っているという状態になりますね。引き続き experimental ステータスのままではありますが。 追記: 2021-09-08 Node.js v16.9.0 で corepack が標準バンドルされました。まだ experimental 扱いですが。 デフォルトでは yarn も
2022/9/21 Techfeed カンファレンスで発表した MPA化するSPAとSPA化するMPA の話です。
なぜ <div> に onClick がダメなのか？
■ はじめに <div>要素にonClickを渡すべきではない、ということ聞いたことはないでしょうか？ ただ、なぜ渡すべきでないのか？ 理解してなかったので今回調べてみました。 サンプルコード 今回動作確認に利用したサンプルリポジトリのコードはReactで書いています。 ■ 結論：<div>にonClickを定義するのがなぜダメなのか？ ユーザーにとって操作性の低いボタンになってしまうから、です！ 要するに UX が悪くなってしまうから！ その理由を解説していきます！ ■ 操作性の低いボタンになってしまう理由 大きく３つあると考えています。 div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないから スクリーンリーダーが認識しない要素だから ◎ focus を持たないから <div>要素はfocusを持ちません。 なので、tabキーで要素に
［速報］Chromium版Microsoft Edgeがリリース候補に到達。2020年1月15日が正式リリース日と発表。Ignite 2019
［速報］Chromium版Microsoft Edgeがリリース候補に到達。2020年1月15日が正式リリース日と発表。Ignite 2019 マイクロソフトは、フロリダ州オーランドで開催中のイベント「Microsoft Ignite 2019」で、レンダリングエンジンにChromiumを搭載した新版のMicrosoft Edgeが2020年1月15日に正式リリースされる予定であることを発表しました。
CSSの新しいプロパティ「field-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更
今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-heightやmax-heightを同時に設定できるので、上限下限のサイズを設定することもできます。 CSSの新しいプロパティはfield-sizingです。field-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。 参考: Feature: field-sizing CSS property CSSは
最近調べた qwik というライブラリが結構面白かったので、実際どういうものなのかとか紹介してみます。 qwik とは qwik は Web 向けの View ライブラリです (React や Vue.js の仲間)。パフォーマンスオタクがパフォーマンスの最適化 (Web Vitals の改善) にこだわって作ったライブラリです *1。 すでにいくつも良い紹介資料があるので、まずはこれらをいくつか読んでみると良いと思います。 Resumable な JavaScript フレームワーク Qwik を学ぶ Qwikの基本概念である Resumable を理解する Qwikというフレームワークについて - console.lealog(); Qwik調べてみたら結構面白かった qwik の詳しい使い方などは先人の記事に譲ることにして、以降は id:mizdra が個人的に面白いと思ったことを書
（2023/08/29） 全ブラウザでネストに対応したので記事を更新しました。 本日2023/08/29、全ブラウザでCSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。
1KBのWebフレームワークをつくる - ゆーすけべー日記
1KBのWebフレームワークをつくりました。 名前は「Pico」。 minifyしてビルドした模様。 コードはこれだけ。依存なし。ほんとにこれだけです。 Cloudflare WorkersとDenoで動きます。 今回はこのPicoというフレームワーク、 それに必要不可欠なURLPattern、実装について、 そして僕がつくっているもう一つのフレームワークHonoとの関係などを紹介します。 Hello World text/plainでレスポンスを返す、“Hello World"相当のコードは4行で書けます。 import { Pico } from "@picojs/pico"; const app = new Pico(); app.get("/", (c) => c.text("Hello Pico!")); export default app;
2023/3/24、Encraft #1 フロントエンド×設計にて発表した資料です。
SameSite属性とCSRFとHSTS - Cookieの基礎知識からブラウザごとのエッジケースまでおさらいする - Flatt Security Blog
こんにちは、 @okazu_dm です。 この記事は、CookieのSameSite属性についての解説と、その中でも例外的な挙動についての解説記事です。 サードパーティCookieやCSRF対策の文脈でCookieのSameSite属性に関してはご存知の方も多いと思います。本記事でCookieの基礎から最近のブラウザ上でのSameSite属性の扱いについて触れつつ、最終的にHSTS(HTTP Strict Transport Security)のような注意点を含めて振り返るのに役立てていただければと思います。 前提条件 Cookieについて Cookieの属性について SameSite属性について SameSite属性に関する落とし穴 SameSite属性を指定しなかった場合の挙動 SameSite: Strictでも攻撃が成功するケース 例1: スキームだけ違うケース 例2: サブドメイ
CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
Docker版OWASP ZAPを使用してWebアプリの簡易的な脆弱性診断をしてみた | DevelopersIO
こんにちは、CX事業本部の若槻です。 最近Webアプリケーション向けのセキュリティ診断ツールについて調べてみたところ、OWASP ZAPというオープンソースツールが定番としてよく使われているそうです。 https://owasp.org/www-project-zap 今回は、Docker版OWASP ZAPを使用してWebアプリのログインページの簡易的な脆弱性診断を行ってみました。 なぜDocker版を使ったのか OWASP ZAPにはWindows、Mac、Linuxで使えるインストーラー版およびパッケージ版と、Docker版があります。 https://www.zaproxy.org/download/ 当初はMac向けインストーラー版を使おうとしましたが、Macのセキュリティによりインストールできなかったため断念しました。 よってインストールを要しないDocker版を使うこととしま
PHPとSQLiteをWebAssembly化し、Webブラウザ上でWordPressを実行可能にしたデモをVMwareが公開
VMwareのWasm Labsは、Webブラウザ上でWordPressを実行可能にしたデモを公開しました。 デモページをWebブラウザで開くと、実際にWebブラウザ上でWordPressが実行されます。 WordPressはオープンソースで開発されている代表的なCMSです。PHPで開発されています。バックエンドデータベースとしてMySQLが使われることが一般的ですが、今回のデモではSQLiteが使われています。 今回のデモを公開したVMwareのWasm Labsは、C言語をWebAssemblyバイナリにコンパイルできるEmScriptenコンパイラを用いて、PHPとSQLiteのコンパイルを行っています。 さらにメモリ上にファイルシステムを構築し、Service Workerをプロキシとするなど追加でWordPressを実行可能な環境を作り上げ、デモを作成したとのことです。 WebA
Ruby言語によるWebアプリケーションフレームワークの最新版となる「Rails 7」が正式リリースされました。 Rails 7.0 FINAL: The fulfillment of a vision to present a truly full-stack approach to web development that tackles both the front- and back-end challenges with equal vigor. https://t.co/WxJ0nKYfE7 — Ruby on Rails (@rails) December 15, 2021 Rails 7の最大の変更点は、フロントエンド開発環境が刷新されてNode.jsを用いない構成がデフォルトとなったことでしょう。 Rails 6では、優れたフロントエンド開発環境を実現するためにトランスパ
この投稿ではJavaScriptで文字数をできるだけ正確にカウントする方法について取り上げます。 文字数とは？ 要件で「文字数を表示してほしい」「○文字以上はバリデーションエラーにしたい」と文字数を考慮しないとならないことがあります。 そもそも文字数とは何でしょうか。 たとえば、アルファベットの「A」は1文字と数えられそうです。 次の絵文字は、何文字になるでしょうか？ この絵文字はiOSであれば14.5の環境では、UI上では上のように1文字のように表示されます。しかし、それ以前のバージョンでは、同じ文字列データでも😵💫のように2文字で表示されます。なお、この絵文字は3つのコードポイントU+1F635 U+200D U+1F4ABからなります。この絵文字の「文字数」はいったい何文字として扱ったらよいのでしょうか。 以上のように、ひとことで文字数と言ってもデータと見た目と環境の3つのややこ
この記事は JavaScript Advent Calendar 2019 - Qiita の初日の記事です。 2019年を締めくくるアドベントカレンダーの初日ということで、今年のJavaScriptを簡単に振り返りたいと思います。2020年のJavaScriptについても予習しましょう。 2019年、2020年が何を指しているかは後述します。 カテゴリが「プログラミング言語」なので、React、Vue、AngularやNode.jsなどJavaScriptを使った技術ではなく、JavaScriptの言語機能にフォーカスしたいと思います。 はじめに ES2019 Optional catch binding JSON superset Symbol.prototype.description Object.fromEntries Well-formed JSON.stringify Arr
こんにちは。フロントエンド開発で一番好きなのはCSS、Mhousetreeです。 普段はCSSアニメーションで遊んだりしています。 （頑張って作ったのでよかったら見てね！！！！！） 何かと使う中央揃え。なんとなく覚えているものを順番に試して中央に来たらOK！と思っていませんか？ 現在ではかなりいろんな種類の方法があり、それぞれ異なる特徴を持っています。 この記事ではCSSでよく使う（気がする）レイアウトパターンの中で、センタリングに関するものをまとめました！ まえがき この記事では各実例を独自の指標で評価して示しています。 長い記事になる予定なので、部分的に読まれる場合の参考になさってください。 実用性：記述量や例外（中身の文章が長い・改行がある要素など）への対応力など。 よく見る度：コーディングしていて出てくる頻度(n=1)。 お前しか勝たん度：独自性が強い・他の方法では代替しづらいもの
Amazon Web Servicesは、コンテナ実行専用に開発されたLinuxベースのOS「Bottlerocket」をオープンソースで公開したことを明らかにしました。 Running containers on Amazon EC2? Try the new Bottlerocket OS purpose built to run containers. https://t.co/0tnx2nk1HB pic.twitter.com/GPuWWB9N90 — Amazon Web Services (@awscloud) March 10, 2020 一般的なLinuxディストリビューションで提供されているOSはコンテナ環境に最適化されているわけではないので、コンテナの実行には不要なソフトウェアが含まれていることなどによるストレージやメモリのオーバーヘッドや、不要なネットワークポートが
GitHub のAutomatically generated release notesを使ってリリースノートの内容を PR に基づいて自動生成するフローを作りました。 今までは、コミットメッセージのルールであるConventional Commitsとconventional-github-releaserを使って、コミットからリリースノートを自動生成していました。 他の人の PR でも、squah merge でコミットメッセージを書き換えることで、リリースノートに反映されるようにしていました。 ただ GitHub に仕組みは違うけどほぼ似たことをするAutomatically generated release notesという機能が実装されているので、これをベースに移行しようと思って、そのワークフローを作っていました。 リリースノート自動生成テクニック - mizdra’s bl
AWS、ElasticsearchとKibanaのフォークによる「OpenSearch」プロジェクトを発表。Elasticとの溝は埋まらないまま
AWS、ElasticsearchとKibanaのフォークによる「OpenSearch」プロジェクトを発表。Elasticとの溝は埋まらないまま AWSは、オープンソースの検索エンジンと可視化ツールの「OpenSearch」プロジェクトを発表しました。これは検索エンジンおよび可視化ツールとして人気のElasticsearchとKibanaをフォークしたものです。 Introducing the #OpenSearch project: a community-driven, open source fork of Elasticsearch & Kibana. https://t.co/VmlP14DiIC pic.twitter.com/YFAI0KkIx3 — AWS Open Source (@AWSOpen) April 12, 2021 すでにGitHub上には、Elastics
2022年Reactを使ってる人には必ず知っていてほしい最強のdata fetchingライブラリであるRTK Queryの優位性とメンテナンスの際に役立つTips - Qiita
import type { ConfigFile } from "@rtk-query/codegen-openapi"; // https://redux-toolkit.js.org/rtk-query/usage/code-generation#simple-usage const config: ConfigFile = { schemaFile: "https://petstore3.swagger.io/api/v3/openapi.json", apiFile: "./store/emptyApi.ts", apiImport: "emptySplitApi", outputFile: "./store/petApi.ts", exportName: "petApi", hooks: true, }; export default config; import { empty
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【超入門】Laravelのデバッグ手法22選 - Qiita
仕様の変更に強いコードを書きたいよねって話 - Qiita
React Server Componentsに感じたフロントエンドの消失
node.js のメトリクスの計測、ベンチマークの改善、Docker イメージの絞り方を勉強した
AppleシリコンのMacでのDocker開発環境のパフォーマンス改善
データベースをリファクタリングしたお話 - BASEプロダクトチームブログ
Goのおすすめのフレームワークはnet/http | フューチャー技術ブログ
ユーザーが迷わない、直感的に操作できるUIの作り方 | UX TIMES
フロントエンドの開発生産性とは
今からでも遅くないconsoleを使いこなそう - Qiita
なぜ Rails の前段に Nginx を置くのか - Qiita
WEB開発に役に立つAPI一覧+API毎に関連するQiita記事を分類 ！ - Qiita
MPA化するSPAとSPA化するMPA
qwik の発明、及びマイクロフロントエンドへの活用について - mizdra's blog
Sassなしで入れ子が可能に。CSSネストが全ブラウザ対応
Webアプリケーション設計の第一歩は
ディレクトリの整理から / Encraft 1
Rails 7.0正式リリース、Node.js不要のフロントエンド開発環境がデフォルトに
JavaScript: 文字数を正確にカウントするには？ - Qiita
2019年、2020年のJavaScript - 別にしんどくないブログ
【中央揃え編】CSS限界オタクと学ぶレイアウトCSSサンプル集 - Qiita
AWS、コンテナに最適化したLinuxベースのOS「Bottlerocket」をオープンソースで公開
GitHubのリリースノートを自動化する仕組み