CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames
CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Classnames Classnamesは、CSSのclass名やJavaScriptの関数名を付けるときに便利な単語をリスト化したものです。MITライセンスで、商用プロジェクトでも無料で利用できます。
View Transitions APIがSafariで利用可能になる ー フロントエンドの進化を促進するか
4月11日、AppleはSafari Technology Preview Release 192を発表した。このリリースは、認証、CSS、編集、JavaScript、メディア、レンダリング、Web API、Web Extensions、およびWeb Inspectorに関連する多数の改善と新機能が導入されている。 4月11日、AppleはSafari Technology Preview Release 192を発表した。このリリースは、認証、CSS、編集、JavaScript、メディア、レンダリング、Web API、Web Extensions、およびWeb Inspectorに関連する多数の改善と新機能が導入されている。 特に注目すべき新機能には、View Transitions APIのサポート、メディアソース拡張（MSE）のワーカーでのサポート、JavaScriptのObject
8 CSS & JavaScript Code Snippets for Creating Realistic Animation – Speckyboy
8 CSS & JavaScript Code Snippets for Creating Realistic Animation We say it all the time because it’s true: CSS and JavaScript are capable of some amazing feats. Web-based animation is a prime example. Not long ago, animation on the web was a bit rudimentary – save for add-on technology such as Flash. The movements were basic and often trended towards cartoonish. That’s not necessarily a bad thing
Improve Largest Contentful Paint (LCP) With A JS + CSS Trick - Propel Digital Marketing
Ever since Google announced that Core Web Vitals would be incorporated into their ranking algorithm, developers everywhere are sweating coffee trying to find ways to improve those notoriously difficult metrics. I’m definitely not an exception. While working on a recent website launch, I took on the challenge of trying to get these metrics into Google’s “Good” rating. But this is a feat that’s sign
Three CSS Alternatives To JavaScript Navigation | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Hey quick! You’ve gotta create the navigation for the site and you start working on the mobile behavior. What pattern do you choose? If you’re like most folks, it’s probably the “hamburger” menu that, when clicked, uses a little JavaScript to expand a vertical list of navigation links. But that’s n
Getting CSS Translate values with JavaScript | Zell Liew
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/css-translate-values-in-javascript. We hope to fix this soon!). How do you get a translateX, translateY or translateZ value in JavaScript? Turns out, you need to read transform matrices. But it can be quite easy. Matrices Brow
CSSはもう新種のJavaScript
インクルーシブ HTML＋CSS＆JavaScript（紹介記事）、コーディングWebアクセシビリティ（紹介記事）の著者ヘイドン・ピカリング氏の記事が興味深かったので、紹介します。 CSS: A New Kind Of JavaScript 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptでのスタイル CSS 最後に JavaScriptでのスタイル Web制作に携わっている人は、2つの補完的なテクノロジーに詳しいと思います。1つは文章とその構造のためのHTML、もう1つはインタラクションとスタイルするためのJavaScriptです。 JavaScriptでスタイル？と思ったかもしれません。そうです、あらゆるDOMにおけるノードをサポートしているJavaScriptのstyleプロパティのことです。
CSS versus JavaScript animations | Articles | web.dev
There are two primary ways to create animations on the web: with CSS and with JavaScript. Which one you choose really depends on the other dependencies of your project, and what kinds of effects you're trying to achieve. Summary Use CSS animations for simpler "one-shot" transitions, like toggling UI element states. Use JavaScript animations when you want to have advanced effects like bouncing, sto
JavaScriptやCSSを読み込むローダーライブラリをES Modulesとして読み込む
今どきのnpmパッケージはUNPKGやPika CDNを使えば、ES Modulesとして直接import文読み込めることがあります。 たとえばPreactなら、次のようにUNPKG経由で直接モジュールをインポートできます。 <script type="module"> import { h, Component, render } from 'https://unpkg.com/preact?module'; // Create your app const app = h('h1', null, 'Hello World!'); render(app, document.body); </script> Getting Started | Preact: Fast 3kb React alternative with the same ES6 API. Components & Vir
"CSS4" Update | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Since I first chimed in on the CSS4¹ thing, there’s been tons of more discussion on it. I’m going to round up my favorite thoughts from others here. There is an overwhelming amount of talk about this, so I’m going to distill it here down as far as I can, hopefully making it easier to follow.
Using the Web Animations API - Web APIs | MDN
The Web Animations API lets us construct animations and control their playback with JavaScript. This article will start you off in the right direction with fun demos and tutorials featuring Alice in Wonderland. The Web Animations API opens the browser's animation engine to developers and manipulation by JavaScript. This API was designed to underlie implementations of both CSS Animations and CSS Tr
Performant Front-end Architecture | DebugBear
Track page speed over time and get the data you need to optimize it. This post describes some techniques to make front-end apps load faster and provide a good user experience. We'll look at the overall architecture of the front-end. How can you load essential resources first, and maximize the probability that the resources are already in the cache? I won't say much how the backend should deliver r
マイクロソフト、新しいEdgeでDevToolsの日本語化実現。Chromiumのソースコードにもコントリビュート
マイクロソフト、新しいEdgeでDevToolsの日本語化実現。Chromiumのソースコードにもコントリビュート Chromeには「DevTools」と呼ばれる開発者向けのツールが組み込まれており、表示しているWebページのHTML/CSSの詳細の把握やJavaScriptのデバッグなど、さまざまな機能が利用ができます。 DevToolsはWebサイトやWebアプリケーションの開発にはなくてはならないツールですが、その表示内容はすべて英語で行われており、ややとっつきにくいところがあります。 そのDevToolsの日本語化が実現します。 マイクロソフトは、Chromiumをベースにした新しいEdgeブラウザで、DevToolsの日本語化を実現したと発表しました。 日本語のほかにも中国語（简体、繁體）、フランス語、ドイツ語、イタリア語、ポルトガル語、韓国語、ロシア語、スペイン語などにも対応し
rel=preload - HTML: HyperText Markup Language | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback The preload value of the <link> element's rel attribute lets you declare fetch requests in the HTML's <head>, specifying resources that your page
Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS
Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS "Eliminate render-blocking JavaScript and CSS". It's the one Google Page Speed Insights suggestion that I always get stuck with. When a web page is accessed, Google wants it to only load what's useful for the initial view, and use idle time to load anything else. That way, the user can see the page as early as possible. There are
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechFeed Conference 2022
Media Query Change Detection in JavaScript Through CSS Animations | CSS-Tricks
How I Used Brotli to Get Even Smaller CSS and JavaScript Files at CDN Scale | CSS-Tricks
https://www.hackdoor.io/articles/8MNPqDpV/build-a-full-featured-tinder-like-carousel-in-vanilla-javascript
Extending Prism ▲ Prism