Intro SPA の隆盛で進化したフロントエンドライブラリによって生み出された「コンポーネント」という資産は、それを View 層の最小単位として扱うエコシステムにその重心をずらした。 近年の Web 開発は、虫食いのテンプレートエンジンにデータをはめ込む方式から、デザインシステムにカタログされたコンポーネント群に、API から取得したステートを流し込み、それらを「いつ、どこで、どう」レンダリングするかという課題への最適解を、各位が模索するフェーズとなっている。 コンポーネントを敷き詰めるコンテナ側の設計は、Flexbox および Grid の登場によるレイアウトの進化が手助けしたところも多いにある。しかし、「ページ」を前提に設計された CSS は、「コンポーネント」を前提にした設計に移行するうえで、ミッシングピースが多かった。 現在、提案/実装が進んでいる CSS の新機能群には、この
目次 CSS小史 SUIT CSS - 命名規約ベースのCSS方法論 styled-components - CSS in JS Tailwind CSS - Utility-first CSS なぜインラインスタイルではダメなのか まとめ タイムライン 参考リンク CSS小史 CSSでアプリのUIを実装するための手法は、これまでいくかの変遷を辿ってきた。 はるか昔、CSSが生まれて間もないころには、関心の分離という文脈から、FONT要素などの物理タグはよくないものとされ、 コンテンツ(HTML)とスタイル(CSS)をきっちりと分離することが奨励されはじめた。 そこでは、HTMLはあくまで文書であり、CSSのクラスセレクタという接点でコンテンツと見た目が隔離されることで、それらは別世界のものとして管理されていた。 また、大規模サービス開発においていかにCSSを管理するかという問題意識はまだ
詳細度を0にする:where()、iOSのSafariで100vhが高さいっぱいにならないを解決できる新しいビューポート単位など、CSSの便利な新機能の各ブラウザでのサポートも完了し、すでに使用されている人も少なくないと思います。 CSSの新機能を効果的にうまく使った、新時代のCSSリセットを紹介します。 CSSリセットとして使用するだけでなく、CSSの勉強にもなるCSSリセットです。 @acab/reset.css -GitHub :where()とか新しいビューポート単位など、CSSの各新機能については以前の記事をご覧ください。 CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！ CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる CSSの疑似クラス「:focus-within」が素晴らしい
WebKit Features in Safari 16.4
Mar 27, 2023 by Patrick Angle, Marcos Caceres, Razvan Caliman, Jon Davis, Brady Eidson, Timothy Hatcher, Ryosuke Niwa, and Jen Simmons ContentsWeb Push on iOS and iPadOSImprovements for Web AppsWeb ComponentsCSSHTMLJavaScript and WebAssemblyWeb APIImages, Video, and AudioWKWebViewDeveloper ToolingWeb InspectorSafari Web ExtensionsSafari Content BlockersNew Restrictions in Lockdown ModeMore Improve
What's New In DevTools (Chrome 94) | Blog | Chrome for Developers
Use DevTools in your preferred language Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language! Open Settings, then select your preferred language under the Preferences > Language dropdown and reload DevTools. Preferences" width="800" height="494"> Chromium issue: 1163928 New Nest Hub devices in the Device list You can now simulate the dimensions of Ne
=>htmz> a low power tool for html htmz is a minimalist HTML microframework for creating interactive and modular web user interfaces with the familiar simplicity of plain HTML. [GitHub] plain🍦 Use straight up HTML. No supersets. No hz- ng- hx- v- w- x-; no special attributes. No DSLs. No <custom-elements>. Just vanilla HTML. lightweight🪶 166 bytes in total. Zero dependencies. Zero JS bundles to l
この記事は BASE アドベントカレンダー 13 日目の記事です。 はじめに こんにちは。 BASE BANK 株式会社 Dev Division にて Software Developer をしている永野(@glassmonekey)です。 普段はバックエンドエンジニアとして、Go/Python/PHP を主に書いてたりします。 最近はチームの分析基盤づくりとかもやってたりします。 そのことについて先日書いたりもしたので、もし良かったらご確認ください。 devblog.thebase.in 私達のチームでは、「BASE」でショップを運営しているショップオーナーが簡単に資金調達をできる「YELL BANK」というサービスの開発・運営しています。 thebase.in あるプロジェクトで、ショップオーナーへのコミュニケーション手段に HTML メール を新しく作ることになりました。その際に
Security is important. Nobody wants to be the person advocating for less security. So nobody wants to say it. But somebody has to say it. So I guess I’ll say it. The way npm audit works is broken. Its rollout as a default after every npm install was rushed, inconsiderate, and inadequate for the front-end tooling. Have you heard the story about the boy who cried wolf? Spoiler alert: the wolf eats t
How modern browsers work
Note: For those eager to dive deep into how browsers work, an excellent resource is Browser Engineering by Pavel Panchekha and Chris Harrelson (available at browser.engineering). Please do check it out. This article is an overview of how browsers work. Web developers often treat the browser as a black box that magically transforms HTML, CSS, and JavaScript into interactive web applications. In tru
公式ブログによると、Laravel Boostは17,000以上のベクトル化されたドキュメントにアクセスし、使用しているLaravelのバージョン固有（10.x、11.x、12.x）の情報を提供する仕組みになっているとのことです。 Laravelに特化したガイドラインを生成してくれる AIエージェントを活用したLaravel開発でよく起こる問題（バージョン差異によるディレクトリ構造の違いなど）を防ぐためのガイドラインを作成してくれます。 公式ブログでは、このガイドラインについて以下のように説明されています。 These are composable, version-specific rules that nudge the agent to follow conventions, add tests when appropriate, use the correct APIs, and
[[toc]] This post will be a bit longer than usual. It's quite a big announcement to me, and there are many things I want to talk about. I'll be appreciated if you take the time to read through it. The table of contents is hidden on the left if you are on a desktop. Hope you enjoy :) 中文 Chinese Version What is Atomic CSS? Let's first give a proper definition to Atomic CSS: From this article by John
HTMLのチェックボックス（<input type="checkbox">）やラジオボタン（<input type="radio">）をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。 結論 従来の手法 appearanceプロパティを使う手法 外枠の配置 未チェックとチェック済みの切り替え 強制カラーモードへの対応 透明なボーダーやアウトライン 内向きの影や背景グラデーション 画像やテキスト ブラウザ組み込みの外観 状態に応じたスタイルの指定 参考文献 結論 単に色調を整えられればよいという場合は、accent-colorプロパティを使います。 input[type="checkbox"], input[type="radio"] { accent-color: #d31; } くだもの や
Nic Jansma (@nicj) is a software developer at Akamai building high-performance websites, apps and open-source tools. Table of Contents The JS Self-Profiling API What is Sampled Profiling? Downsides to Sampled Profiling API Document Policy API Shape Sample Interval Buffer Who to Profile When to Profile Specific Operations User Interactions Page Load Overhead Anatomy of a Profile Beaconing Size Comp
モダンブラウザが主流となった現在、リセットCSSの必要性が薄れてきました。とは言え、各ブラウザに搭載されているUAスタイルシート（ユーザーエージェントスタイルシート）だけをベースにするのはまだ時期尚早です。 スタイルをリセットしたり、ノーマライズするのではなく、既存のUAスタイルシートを改善し、ブラウザの仕様が不十分な要素にのみスタイルを適用することに重点を置いた、これまでとは異なる新時代のリセットCSSを紹介します。 UA+ UA+ -GitHub UA+の特徴 他のリセットCSSとの比較 uaplus.cssの中身 uaplus.cssの中身（コメント付き） UA+の特徴 UA+（ユーザーエージェントプラス）は、これまでのリセットCSSとは異なるタイプのスタイルシートです。各プロパティのリセットとノーマライズ（正規化）を行うのではなく、既存のUAスタイルの改善に注目し、ブラウザの仕様が
You might be here because Lighthouse told you to "eliminate render-blocking resources". Render-blocking resources are a common hurdle to rendering your page faster. They impact your Web Vitals which now impact your SEO. Slow render times also frustrate your users and can cause them to abandon your page. I worked with one client to reduce their render-blocking resources and improved their site load
If you’re a web developer, you may have already heard that some CSS selectors are faster than others. And you’re probably hoping to find a list of the better selectors to use in this article. Well, not quite. But bear with me, I promise that by the end, you’ll have learnt something new about CSS selector performance. A quick look behind the scenes The way you write CSS selectors does play a role i
The Web’s Next Transition
The web is made up of technologies that got their start over 25 years ago. HTTP, HTML, CSS, and JS were all first standardized in the mid-nineties (when I was 8 years old). Since then, the web evolved into a ubiquitous application platform. As the web has evolved, so too has the architecture for the development of these applications. There are many core architectures for building applications for
The Humble <img> Element And Core Web Vitals — Smashing Magazine
Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from Addy Osmani’s new book (also, check a free PDF preview). We’re happy and honored to have teamed up with Addy to publish
WebKit Features in Safari 17.4
ContentsArchitectural improvementsWeb AppsForm elementsCSSWeb APIJavaScriptMediaSVGWebGLWeb AssemblyWeb InspectorChanges to SafariSafari ExtensionsWeb AuthenticationBug Fixes and moreUpdating to Safari 17.4Feedback Just like Safari 15.4 and Safari 16.4, this March’s release of Safari 17.4 is a significant one for web developers. We’re proud to announce another 46 features and 146 bug fixes. You ca
Over the years, the web community has built up a wealth of web performance optimization knowledge. While any one optimization may improve performance for many sites, all of them at once can feel overwhelming and, realistically, only some of them are applicable to any given site. Unless web performance is your day job, it's probably not obvious which optimizations will be the most impactful for you
Leaving Neovim for Zed
I think every developer has their own text editor journey and how they landed on the tool they use today. Perhaps I’m a geek but I love those stories. I have a great appreciation for developer tools and the work that goes into them. This post is for the other geeks out there that also care, and I hope my journey and perspective can prompt others to experiment and try developer tools outside their
CSS :has Parent Selector
Do you want to master CSS layouts? I'm building a new course. Learn more Have you ever thought about a CSS selector where you check if a specific element exists within a parent? For example, if a card component has a thumbnail, we need to add display: flex to it. This hasn’t been possible in CSS but now we will have a new selector, the CSS :has which will help us to select the parent of a specific
We’re excited to announce the release of Biome 2.3, bringing several features that have been highly requested by the community. This release marks a significant milestone in our journey to support the broader web ecosystem. Once you have upgraded to Biome v2.3.0, migrate your Biome configuration to the new version by running the migrate command: biome migrate --write Full support for Vue, Svelte,
This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important. This guide is intended to help you fully understand what cascade layers are for, how and why you might choose to use them, the current levels
Vjeux » Birth of Prettier
React Conf is around the corner and it's been almost 10 years since Prettier was released. I figured it would be a good time to recount the journey from its early days to now. This is the story of how the "Space vs Tabs Holy War" ended, not through one side winning over the other but instead a technological invention making it the underlying source of tensions no longer being a thing. Back Story S
WebKit Features in Safari 18.0
ContentsNew in Safari 18Web apps for MacCSSSpatial WebHTMLJavaScriptWeb APICanvasManaged Media SourceWebRTCHTTPSWebGLWeb InspectorPasskeysSafari ExtensionsApple PayDeprecationsBug Fixes and moreUpdating to Safari 18.0Feedback Safari 18.0 is here. Along with iOS 18, iPadOS 18, macOS Sequoia and visionOS 2, today is the day another 53 web platform features, as well as 25 deprecations and 209 resolve
Introducing XMLUI
In the mid-1990s you could create useful software without being an ace coder. You had Visual Basic, you had a rich ecosystem of components, you could wire them together to create apps, standing on the shoulders of the coders who built those components. If you’re younger than 45 you may not know what that was like, nor realize web components have never worked the same way. The project we’re announc
After learning a little bit more about web accessibility last year I had been exploring some of the less common HTML elements, and making changes to this website, like wrapping the text of the posts on this blog in <article> tags and adding a <main> tag in the website’s layout templates (this website is built using Eleventy). I had previously done some work to make sure that <figure> and <figcapti
UPDATE October 2024: Since this article was published, members of the CSS Working Group have concluded that all of the grid abilities described here — variable-width tracks, explicit placement, spanning, and subgrids — are worth including in masonry layout, and are possible to implement performantly. There is now an official W3C Working Draft for CSS Grid Layout Module Level 3 documenting how it w
Published: January 19, 2023, Last updated: November 28, 2025 Time to First Byte (TTFB) is a foundational web performance metric that precedes every other meaningful user experience metric such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP). This means that high TTFB values add time to the metrics that follow it. It's recommended that your server responds to navigation requests
1. 毎回Wi-Fiパスワードを共有するの、面倒じゃないですか？ 家に友人が来たとき、ほぼ毎回こうなります。 「WiFiパスワード教えて〜」 「いいよ〜！これパスワード！」 「ありがとう！（入力…）あれ、つながらない、、、」 「えっ、ここ一文字間違えてるかも」 いつもちょっと面倒だなと思ってました。 口頭で伝えるのもそれはそれで面倒なので、いっそのことちょっと変な共有の仕方にしたいと思い、WifiパスワードをQRコードで共有することにしました。 2. できたものがこちらです！ どう考えても家には必要ありませんが、おしゃれにできたのではないかと思います。 3. 実装 3.1. 全体コード コード全体はこちらです <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" conten
The evolution of scalable CSSA deep dive into the problems with scaling CSS on large projects. Understand the evolution of CSS best practices. IntroductionHow we write and think about CSS has changed significantly since the web’s beginning. We’ve come a long way from table-based layouts, to responsive web design, and now into a new era of adaptive layouts powered by modern CSS features. Managing a
WebKit Features in Safari 16.0
Today, we are excited to announce the release of Safari 16.0 for iOS 16, macOS Monterey and macOS Big Sur. This release contains quite a few new web technologies that web developers can use to make their sites and web apps even better. To update to Safari 16.0 on macOS Monterey and macOS Big Sur, go to System Preferences → Software Update → More info. To update to Safari 16.0 on iOS, install iOS 1
Version 1.108 is now available! Read about the new features and fixes from December. Release date: May 8, 2025 Update: Enable Next Edit Suggestions (NES) by default in VS Code Stable (more...). Update 1.100.1: The update addresses these security issues. Update 1.100.2: The update addresses these issues. Update 1.100.3: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Univers
Jun 9, 2025 by Jen Simmons, Saron Yitbarek, Jon Davis, Richard Robinson, Eddy Wong, Brandel Zachernuk, Marcos Cáceres, Tim Nguyen, Daniel Liu, Razvan Caliman, Blaze Burg, Qianlang Chen, Brian Weinstein, Aditya Keerthi, Karl Dubost, David Johnson, Luming Yin ContentsSVG IconsEvery site can be a web app on iOS and iPadOSHDR ImagesWebKit in SwiftUI<model> on visionOSImmersive video and audio on visio
2024-03-11In this blog post series I will compare the following JavaScript frameworks: Vue.js, React, Angular, and Svelte. In part 1 the focus will be on comparing JavaScript framework template languages. The template language of a JavaScript framework is used to define the HTML of the application / website. You can say that the main reason any of the JavaScript frameworks exists is the following:
Update 1.97.1: The update addresses these security issues. Update 1.97.2: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the January 2025 release of Visual Studio Code. There are many updates in this version that we hope you'll like, some of the key highlights include: Next Edit Suggestions (preview) - Co
CSSにまだ詳しくなかったり、ページデザインよりも本文の執筆に注力したい人のために、Vivliostyleでは簡単にデザインを適用できる「Vivliostyle Theme」が用意されています。第3回では、Vivliostyle Themeの使い方や、Vivliostyle Themeを実現するためのCSSの機能、自分でVivliostyle Themeを作って公開する方法について紹介します。 Vivliostyle Themeについて Vivliostyle Themeは、Vivliostyleワークフロー上で簡単にページデザインを適用するための仕組みです。CSS組版を実現するVivliostyleは、ページデザインをCSSで実現できることが最大のメリットですが、逆説的に言うとCSSを知らないとデザインの変更ができないとも言えます。CSS自体は広く普及しており、CSSを学ぶ環境も十分に整
WebKit Features in Safari 17.2
ContentsHTMLCSSImages and videoJavaScriptWeb APIWeb AppsWebGLPrivacyWeb InspectorFixes for Interop 2023 and moreUpdating to Safari 17.2Feedback Web technology is constantly moving forward, with both big new features and small subtle adjustments. Nowadays, web developers expect web browsers to update multiple times a year, instead of the once or twice a year typical of the late 2000s — or the once
Posted on 2022-05-06 Last updated on 2024-03-13 These are some technical tips for publishing a blog. These have nothing to do with good content, just how to share that content. The recommendations are roughly in order of importance and have rationale for why they are that important. Formats People generally call feeds “RSS Feeds” but usually they aren’t specifically talking about RSS. RSS isn’t th
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
次世代 CSS 仕様が与えるコンポーネント時代の Web への影響 | blog.jxck.io
Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史
CSSの新機能を効果的にうまく使った、新時代のCSSリセット -acab/reset.css
htmz - a low power tool for html
MJMLでhtmlメールを楽にいい感じに書くことができた話 - BASEプロダクトチームブログ
npm audit: Broken by Design — overreacted
なぜSerenaからLaravel Boostに変えるとAIの精度が上がるのか
Reimagine Atomic CSS
CSSでチェックボックスやラジオボタンをカスタマイズする 2024年版: Days on the Moon
JS Self-Profiling API In Practice
アクセシビリティを重視した新時代のリセットCSS、ベースとなるより良いスタイルシートを求める人に最適 -UA+
How to Eliminate Render-Blocking Resources: a Deep Dive
The truth about CSS selector performance
The most effective ways to improve Core Web Vitals | Articles | web.dev
Biome v2.3—Let's bring the ecosystem closer
Cascade Layers Guide | CSS-Tricks
A Blog Post With Every HTML Element
Help us invent CSS Grid Level 3, aka “Masonry” layout
Optimize Time to First Byte | Articles | web.dev
家に来た人に毎回Wi-Fiパスワード聞かれるのが面倒なので、QR化したら謎の歓迎ページが爆誕した - Qiita
The evolution of scalable CSS
April 2025 (version 1.100)
News from WWDC25: WebKit in Safari 26 beta
Comparing JavaScript Frameworks part 1: templates
January 2025 (version 1.97)
CSSフレームワークVivliostyle Themeで簡単にページデザインを編集する | gihyo.jp
RSS Feed Best Practises - Kevin Cox