令和の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
ヘッダー（グローバルナビゲーション）のデザイン事例100選｜akane
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、ヘッダー（グローバルナビゲーション）のデザイン事例を調べてみました！パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍ はじめに：グローバルナビゲーションとは？グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。 一般的には画面上部のヘッダーに設置されることが多く、ユーザーが「今、どこにいるのか？」「目的のページはどこか？」と迷わないように誘導する大切な役割があります。 どんなサイトを作るときもほとんど必須のパーツですが、わたしは気付けばいつも似たようなレイアウトを使いがち…。そこで今回は、グローバルナビゲーションのデザインを100事例見比べて分類してみます🔍 ・ ・ ・ 1. スタンダード型まずは、一般的に「ヘッダー」の言葉で想像
スタディサプリ最大の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.
3兆円市場になるとは....｜miyasaka
インターネット広告がついに3兆円の見込みとのこと。メディア＆広告の最前線からは10年以上も離れてるけど3兆円は驚いた。 自分も昔、この業界で仕事してたんだけどいつからこんなに巨大化したんだろうと思って市場推移を調べてみたら 1996年 16億円 1997年 60億円 2003年 1,000億円 2009年 新聞を上回る 2014年 1兆円突破 2019年 テレビを上回る 2024年 3兆円超予測 良質なコンテンツは大事だけどそれ支えるのはアドテク。コンテンツが花だとするとアドテクは地下茎。両方ケアしないとね。地下茎が弱ると花は咲かない。 そして大事なアドテクノロジーを内製化できてるか？他社依存しちゃってるかはメディアの将来にとってとても大きいと思う。最近だと課金型メディアも増えてきたので地下茎に課金決済システムも入るのかな。地下茎が外部か？自分のものか？ これは自分の印象なんだけど、メディ
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
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 のエンジニアリングマネジメントをしています
Gmailに届かない神奈川県立高校入試のインターネット出願システムのメールを調べてみた | DevelopersIO
Gmailに届かないと報告されている2024年神奈川県立高校入試の出願システム自動返信メール、 2024年1月15日にYahooメールに届いたメールヘッダー情報などから、送信ドメイン認証(SPF、DKIM、DMARC)の確認を試みました。 2024年2月の神奈川県立高校の受験を予定している家族から、 "インターネット出願システムの登録を試みたが、システムからの返信メールがGmailのアドレスが届かないため、代わりにYahooメールを利用した。" との報告を受けました。 今回、2024年1月15日にYahooメールで受信したインターネット出願システムのメールを調査する機会がありましたので、紹介させて頂きます。 2024年1月19日 追記 ネット出願システムの不具合解消後のメールの調査結果を公開しました。 2024年1月18日 追記 ネット出願システムのメールサーバ側の問題について調査結果を公
祖母が就寝するとDBインサートができなくなる - Qiita
世の中には、一見関係なさそうな物理現象がITシステムに不可思議な影響を及ぼすことがあります 例えば,500マイル以上離れた場所にメールが送れないという話だったり 中国人のAさんがお茶を入れると会社のネットが繋がらなくなる という話があります。 私の場合は、祖母が就寝するとDBインサートが失敗する、という状況でした 実家の見守りシステム 問題が起きているのは、離れた実家にいる一人暮らしの祖母の状態を見守るために作成した自作のシステムです。 気温や湿度、CO2濃度、明るさ、部屋のドアの開閉、冷蔵庫の開閉の状況をモニタリングできるようにしています。 Raspberry Piに各種センサが接続され、定期的にInfluxDBに送信し、Grafanaという可視化ツールでいつでも見られるようにしています。 これらの情報を見ることで、祖母の家の部屋の温度が適切か、活動しているか、部屋にいるかなどが分かりま
思わず天を仰いでしまうID関連システムトラブル - =kthrtty/(+blog)
こんにちは。アドカレ12/24の記事を簡単にではありますが書かせていただきました。(25日のポストで遅刻ですが) Digital Identity技術勉強会 #iddanceのカレンダー | Advent Calendar 2023 - Qiita はじめに 本日のテーマ：思わず天を仰いでしまうID関連システムトラブル 本日のテーマは、みんな大好き「トラブル」の話です。CIAM(Consumer Identity and Access Management)領域のさまざまなシステムにさまざまな立場で関わり、さまざまなトラブルに遭遇してきた経験を踏まえて、クリスマスの合間の気楽な読み物として記載しましたので、一息ついていただければ幸いです。 今回はトラブルの中でも思わず「天を仰いでしまう」激ヤバトラブルにフォーカスして、私的ランキング形式でお届けしたいと思います。 天を仰ぐトラブルとは？ 私
「定年まで逃げ切れなかった」デイリーポータルZ独立 林さんに聞く不安と希望「もう一度、インターネットらしく」
記事やイベントで抜群の存在感を誇る一方で、運営が赤字続きだったことは周知の事実。独立後も赤字が続く見通しだという。新会社は林さんの“1人会社”でオフィスもないため、屋根や壁もなくなる。 それって大丈夫なのだろうか？ そもそもなぜ今独立したの？ サイトは本当に維持できるの？ 赤裸々な実情から収支構造、サーバやCMSの詳細まで、林さんにぶっちゃけてもらった。 自分でやれば、「やめろ」って言われないから ――2002年から21年間、大手企業の傘下で運営されてきたサイトが独立とは驚きました。 「自分でやりたいな」という気持ちはずっとあったんです。そうすれば「やめろ」って言われないから。雇われている限り、サイトをやめろって、いつか言われるんじゃないかと。 続けるかやめるかの判断を、自分じゃない人が握っているのは嫌だなあと思っていて。仮に黒字化したとしても、次の年は5％成長とかを期待されますよね。何の
デイリーポータルZは2024年1月1日から運営会社が変わります :: デイリーポータルZ
デイリーポータルZは2024年1月1日から運営会社が変わります。 新しい運営会社は「デイリーポータルZ株式会社」です。 独立します 流浪のサイトとして運営会社が2回変わってきましたが、ついにデイリーポータルZ株式会社になります。代表は私、林がつとめます。 これまでお世話になったみなさま、ありがとうございました！ そして支えてくれた読者のみなさま、これからもよろしくお願いします！ サイトは変わりません、もっとおもしろくなります サイトは変わりません。暖かい靴下専門サイトになることも考えましたが、冬しかアクセスがなさそうなので踏みとどまりました。 これからも楽しく、読んだ人の気分を良くするサイトであり続けます。 来年からはデイリーポータルZのための組織で間接業務が少なくなりますし、出張申請せずにどこにでも行けます（ただし全部高速バス）。思いつきを実現できる環境になるのでサイトはもっとおもしろく
一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog
このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2
Google — 25 Years in Search: The Most Searched
Google is celebrating the most searched figures and moments in 25 years of Google Search. From BTS to Taylor Swift, see the moments that have changed the world and inspired the next generation to come. Explore more at https://trends.google.com/trends/yis/2023/GLOBAL/ #YearinSearch Audio described version here: https://www.youtube.com/watch?v=AqduXftWeEE Music by: U2 “I Still Haven’t Found What
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「SQL」の読み方論争に決着？ 「しーくぇる」vs「えすきゅーえる」にPostgreSQLがケリ／冠詞にはくれぐれも注意【やじうまの杜】
アドビ、Figmaの買収を断念 欧州規制当局の承認を得られず
