令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
Tailwind CSSチーム、GitHubスター数2.4万超のUIコンポーネント集「Headless UI」をメジャーアップデート
5月8日、Tailwind LabsはReact用の「Headless UI v2.0」をリリースした。 Headless UIとは、Tailwind CSSベースのUIコンポーネント集である。 Tailwind CSSチーム自身が開発を行っており、GitHubスター数も2.4万を超えるなど、高い人気を博している。 このアップデートは、開発者がより少ないコードでより良い開発体験を実現できるようにするための多数の改善を含んでいる。 主な更新点は以下の通りだ。 組み込みアンカーポジショニングのサポート 新しいチェックボックスコンポーネントの追加 HTMLフォームコンポーネントの拡充 状態検出の向上 コンボボックスリストの仮想化 新しいウェブサイトと改善されたドキュメント 組み込みアンカーポジショニングのサポート Floating UIがHeadless UIに直接統合され、Menu、Popov
The Front End Developer/Engineer Handbook 2024
This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and
Ruby のメソッド定義時に仮引数があるとき、それをカッコでくくらないのは私だけなの？ - STORES Product Blog
テクノロジー部門で Ruby インタプリタの開発をしている笹田です。RubyKaigi 2024 楽しみですね。 さて、Ruby のメソッドを定義するとき、仮引数がある場合、カッコを省略することができます。 def foo(x, y) end def bar x, y end bar の定義の方法ですね。私は好んでこの書き方をしてたんですが、同僚の遠藤さんに「そんな書き方をしているのは今時笹田だけだ」と言われてショックを受けたので、ちょっと調べてみました。 ちなみに、カッコがないと使えないメソッド定義の方法があるので、その時には涙を呑んでカッコをつけます。 def foo(kw:) # 必須キーワード引数 end def bar(&) # 無名ブロック引数 end 補足１：Ruby では「メソッド呼び出し時にカッコをつけるかどうか」にいろいろな論争がありますが、ここでは「メソッドを定義する
スタディサプリ最大のRailsアプリケーションにYJIT+pitchforkを導入してメモリ使用量を劇的に削減するまで - スタディサプリ Product Team Blog
こんにちは。SREのkyontanです。Rubyが大好きなのでRubyの話をします。ちなみにリクルートはRubyKaigi 2024へGold Sponsorとして協賛しています! *1。ぜひ沖縄でお会いしましょう。 これはあるアプリケーションのメモリ消費量を示すグラフなのですが、まさかgemを入れ替えるだけでこんなに嬉しい変化が見られるとは思っていませんでした。今日はそんなgemの話をします。 話は遡って2023年4月のある日、インターネットを眺めていたところ、ShopifyがpitchforkというOSSを公開したという情報が目に留まりました。 調べてみると、どうやら著名なRackサーバー実装の1つであるunicornの派生版であり、メモリ使用量の削減に特化しているらしいのです。 github.com これはスタディサプリ小中高のあのリソースドカ食いマイクロサービス第一位である api
ブラウザからDBに行き着くまでただまとめる
はじめに あなたはブラウザからデータベース(DB)に情報が行き着くまでにどんな技術が使われているか説明できますでしょうか？ どのようなプロトコルが用いられ、どの技術を駆使してサーバと通信しているのか、Webサーバでは何が行われ、どのようにして負荷が分散されているのか、トランザクションはどのように管理されているのか、そしてデータベースではシャーディングや負荷対策のためにどのような対策が取られているのか… なんとなくは理解しているものの、私は自信を持って「こうなっている！！」とは説明ができません。 そこで今回は「大規模サービス」を題材としてブラウザからデータベースに至るまでの、情報の流れとその背後にある技術について、明確かつ分かりやすく解説していきたいと思います。 対象としてはこれからエンジニアとして働き出す、WEB、バックエンド、サーバーサイド、インフラ、SREを対象としております。 1.
Railsを高速かつセキュアにするHTTP/2プロキシ「Thruster」、37signalsがオープンソースとして公開
RailsのためのHTTP/2プロキシ「Thruster」がオープンソースで公開された。ほとんど設定不要で、導入によりRailsアプリをより高速かつセキュアにする。 Ruby on Rails（以下、Rails）の開発元である37signalsは、より高速でセキュアなRailsアプリケーションを実現するHTTP/2プロキシ「Thruster」をオープンソースとして公開しました。 We've released Thruster as open source! It's a tiny, no-config HTTP/2 enabling, asset caching, X-Sendfile sending proxy for Rails' default web server Puma. One of the secret sauce elements of ONCE, now availab
サービスアカウントキーの漏洩検知・自動無効化を試してみた - G-gen Tech Blog
G-gen の杉村です。Google Cloud では、「サービスアカウントキーの漏洩レスポンス（Service account key exposure response）」という組織ポリシーの制約により、サービスアカウントキーがパブリックな Git レポジトリ等に漏洩した場合でも、自動的に検知され、キーが無効化されます。当記事では意図的にキーを漏洩させた場合の検証結果をご共有します。 キーの漏洩検知・無効化の自動化 有効化 設定画面へ遷移 制約を有効化 GitHub のパブリックレポジトリにキーを push 自動検知と無効化の確認 メールでの通知 WAIT_FOR_ABUSE の場合の挙動 キーの漏洩検知・無効化の自動化 サービスアカウントキーの漏洩レスポンス（Service account key exposure response）は、組織のポリシーの制約の1つであり、制約の正式な
GitHub、脆弱性のあるコードの自動修正機能発表。AIボットが修正済みコードと解説をプルリクエスト
GitHubは、脆弱性のあるコードをAIボットが自動的に発見、修正したコードとその解説をプルリクエストしてくれる「code scanning autofix」（コードスキャン自動修正機能）を発表しました。 Meet code scanning autofix, the new AI security expertise now built into GitHub Advanced Security! https://t.co/cTDuKZCWMv — GitHub (@github) March 20, 2024 下記がそのコードスキャン自動修正機能の説明です。「Found means fixed: Introducing code scanning autofix, powered by GitHub Copilot and CodeQL」から引用します。 Powered by GitH
個人的Rails開発環境構築2024
新規でRailsプロジェクトを始める時の個人的な環境構築についてまとめる。前提とする条件等は下記。 規模: ~中規模 開発者数: 個人 利用シーン: PoC作成・スタートアップ立ち上げ・並の業務アプリ開発等 基本戦略 利用シーン的に「思い立ったらすぐアプリの開発ができる」という感じの運用がしたい。極力セットアップで悩みたくないから必要なミドルウェアなどは全部Dockerでインストールできるようにして立ち上げれば終わり、の環境を作る。その環境の中で色々とコマンドを叩いたり、rails newやrails gなどでRailsアプリを作成していく。 この辺のRailsの初期セットアップの手間を出来るだけ省きたいのでtemplateとなるリポジトリを作成し、そこからcloneしてくるだけでOKにする。 フロントエンドはReactなどを使わずをRails標準のerbとHotwireを軸に開発する。開
App Store Connect の赤字警告「デジタルサービス法(DSA法)」の対応 - Qiita
注意点 警告メッセージから調べた内容をメモとしてまとめたものです。 内容には推測であったり、主観が大きく入っております。 この記事を参考にして、いかなる損害が生じた場合でも、筆者は責任を負いかねます。 警告メッセージ いきなりApp Store Connectにこんな警告が出てきた。 内容 ちょっと調べてみると、「欧州連合のデジタルサービス法(DSA)導入に伴い、トレーダーであれば情報を開示するように」ということです。 EU圏内のリリースにあたって、そのEU内のルールには従いましょうというところで、おそらくこのデジタルサービス法に準拠する必要がありそうです。 ただ、よくわからん ざっくり用語理解 デジタルサービス法(DSA) オンライン上の違法な商品やサービス・コンテンツから利用者を守るため、 オンラインプラットフォーム等の仲介サービス提供者の責任を明確にして、対応を促す EU・デジタルサ
Flyde | Visual Programming. For Developers.
Open source, runs in VS Code, integrates with existing TypeScript code, browser and Node.js.
Pkl :: Pkl Docs
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>name</key> <string>Swallow</string> <key>job</key> <dict> <key>title</key> <string>Sr. Nest Maker</string> <key>company</key> <string>Nests R Us</string> <key>yearsOfExperience</key> <integer>2</integer> </dict> </dict> </pl
Ruby on Railsはどのように生まれ、発展してきたのか［前編］。作者DHH氏やコアチームが語る動画「Ruby on Rails: The Documentary」が公開
「1999年か2000年頃、私は37signalsというWebデザイン企業を経営していました。2人のビジネスパートナーとWebデザインを受注していたのです」（Fried氏） Fried氏は本業とは別に再度プロジェクトとしてオンライン書籍データベースの開発に取り組んでいました。開発はPHPで行っていたものの、Fried氏はプログラミングでつまづきます。 当時はまだStackOverflowのような技術的な質問に答えてくれる掲示板などなかった時代。Fried氏はブログに「誰かこの問題を解決する方法をご存じですか？」と書き込みます。 するとデンマークからメールが届きます。メールを書いてきたのがDHH氏でした。 「私は（37signals社の）Signal vs. Noiseというブログを以前から熱心にフォローしていました」とDHH氏。 「ブログで彼の質問を見て、私は『おお、この答えを知っているぞ
型キャストの場所のせいで、秒で終わっていたクエリに1時間超かかるようになってしまった話 - SmartHR Tech Blog
SmartHRで届出書類という機能を担当しているプロダクトエンジニアのsato-sと申します。 今日は、以前私が調査にとても苦労したパフォーマンス上の問題の話を紹介したいと思います。 TL;DR PostgreSQLのアップグレードを実施した アップグレード後、今までは問題のなかった特定のクエリの実行に1時間超かかり、DBのCPU使用率がピッタリ100%に張り付くようになった 色々調査した結果、PostgreSQL上の型キャストの場所のせいで、良くないクエリプランが選択されることが原因だった 型キャストの場所には気をつけよう PostgreSQLのアップグレードと挫折 SmartHRでは基本的にWebアプリケーションのデータベースとしてGoogle CloudのCloudSQLによって提供されるPostgreSQLを利用しています。 私の担当している届出書類機能では、利用中のPostgre
もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita
HTMXとは HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogleトレンドで調べた結果である。 アメリ
リリース頻度を毎週から毎日にしてみた - NTT Communications Engineers' Blog
目次 目次 はじめに NeWork とは リリース頻度変更の背景 それまでの運用 課題 実現方法 解説 日次でワークフローが起動するようにする main ブランチの HEAD にタグが付与されていなければ付与する develop に差分があれば main へのマージを自動で行う 細かな工夫点 main の内容を develop に自動で取り込む 祝日はリリースしないようにする 自動リリース・自動 develop → main マージの制御 Slack にリリース結果を通知する stg 環境に変更内容を通知する その他の考慮 上司への事前説明の省略 スプリントレビュー前のリリース リリースノート 品質面 リリース頻度を変えてみて おわりに はじめに こんにちは、NeWork 開発チームの藤野です。普段はオンラインワークスペースサービス NeWork のエンジニアリングマネジメントをしています
GitHub、SDKを刷新。今後はOpenAPI仕様の生成ツールで生成したSDKを提供へ
GithHubは、今後はAPI仕様を記述する業界標準であるOpenAPIに対応した生成ツールで生成したAPIクライアントをSDKとして提供することを明らかにしました。 現在まで同社は「Octokit」と呼ばれるSDKを提供しています。これはGitHubの開発者が、外部のアプリケーション開発者のために、さまざまな言語でGitHub APIを呼び出しやすいように開発したライブラリと言えます。 それに対して今後は、GitHubのAPIがどのような仕様であるかを業界標準であるOpenAPIに従って記述したドキュメントを基に、そこからAPIクライアントを生成するツール「Microsoft Kiota」によって生成したAPIクライアントをSDKとして提供することになると説明されています。 GitHubはこれを同社にとって大きな転換点だと、ブログ「Our move to generated SDKs」（
Ruby の JSON ライブラリ Oj のパフォーマンス改善を行いました - Repro Tech Blog
Development Division/Repro Team/Feature 1 Unit の Watsonです。Feature 1 Unit は Repro Tool の機能開発と保守を担っています。 弊社でも利用している Oj gem のパフォーマンス改善 PR を送った話と、その PR の内容について共有します。 ことのはじまり 以前、同僚が Ruby on Rails で JSON を返す REST API を作成した際、JSON のエンコード部分のパフォーマンス計測をしていました。JSON のエンコード方法は JSON.generate、ActiveSupport::JSON.encode、Oj gem を利用する方法など色々ありますが、私としては Oj gemの ほうがパフォーマンス的にいいだろうからそちらを利用したほうが良いのではと思っておりました。 計測結果を拝見したら確
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「SQL」の読み方論争に決着？ 「しーくぇる」vs「えすきゅーえる」にPostgreSQLがケリ／冠詞にはくれぐれも注意【やじうまの杜】
