Scroll to the future—Martian Chronicles, Evil Martians’ team blogIf you are an AI agent, LLM, or automated tool, a clean Markdown version of this page is available at: https://evilmartians.com/chronicles/scroll-to-the-future-modern-javascript-css-scrolling-implementations.md?ref=hint
The CSS Paint API | CSS-Tricks
The CSS Paint API is extremely exciting, not only for what it is, but what it represents, which is the beginning of a very exciting time for CSS. Let’s go over what it is, why we have it and how to start using it. What is the CSS Paint API? The API is just one part of a whole suite of new specifications all under the umbrella of what is known as CSS Houdini. Houdini, in essence, gives developers l
Detecting autofilled fields in Javascript
One of my colleagues is transitioning to the front-end team that I used to be a part of. To prepare him mentally for his journey into front-end development, I’ve been sending him a newsletter I call Front-End Hack of the Day. I’m posting them to Medium now for the world to enjoy. When the browser autofills a form field, it adds some styling to highlight which fields it has edited. In Chrome, as yo
Storybook+AtomicDesignでデザイナーが開発に参加した話 | Nagisaのすゝめ
はじめに こんにちは、デザイナーの浜田です。 マンガZEROのWebリニューアルを担当することになり、AtomicDesignに則ってSketchでデザイン制作をしました。 そして今回デザイナーがAtomicDesignで言うAtoms/Molecules/OrganismsあたりのHTML/CSSを書いてみようという話になり、Storybookが導入されることになりました。 本記事ではデザイナーがStorybook+AtomicDesignを使って開発に参加してみてどうだったか、どのように活用ができたか、について紹介したいと思います。 デザイナー＆エンジニア間でStorybookが有用に使えそうかどうかの参考になればと思います。 ※本記事では、Storybookの環境構築やコードについての解説などは行いません。 AtomicDesignについては以前に弊社デザイナーが記事にしているので紹
frontend-tooling-survey-2018-results#js-knowledge
Front-end development Blog and Portfolio for Ashley Watson-Nolan – Senior UI Engineer at Just Eat Update 12/09/2019 The results for the 2019 edition of the Front-end Tooling Survey are now available. If you'd like to view them, check them out here. Update 25/07/2018 Since publishing the initial results, I've updated the survey after receiving 5,461 responses and updated the article and results dat
Responsive Components: a Solution to the Container Queries Problem — Philip Walton
Now all we have to do is ensure our container elements always have the right breakpoint classes on them, so the correct component selectors will match. Observing container resizesFor most of web development history, it’s been possible to observe changes to the window, but it’s been hard or impossible (at least in a performant way) to observe size changes to individual DOM elements. This changed wh
MDN browser compatibility data: Taking the guesswork out of web compatibility – Mozilla Hacks - the Web developer blog
MDN browser compatibility data: Taking the guesswork out of web compatibility Building the web is hard The most powerful aspect of the web is also what makes it so challenging to build for: its universality. When you create a website, you’re writing code that needs to be understood by a plethora of browsers on different devices and operating systems. It’s difficult. To make the web evolve in a san
Electronアプリをリリースするまでにあった知見 - Qiita
はじめに こんにちは、@tsuwatchです。普段はRubyを書くのですが、仕事の幅も広がりつつあり、フロントエンドも本格的にやっていこうということで、 Kaizokuというニコニコ生放送のデスクトップアプリをリリースしました。 人生の大半の時間がニコ生に溶けているわけですが、かねてからコメントビューワを作ろうと思っていたので、この機会に作ってみました。 しかし、Mac版のコメントビューワにはHakumaiという大変素晴らしいコメントビューワが存在するので、少し違う方向を向いた生放送ビューワをかねたアプリにしました。 Hakumaiはコメントビューワとしては数少ないオープンソースなので、実装やコメントサーバの仕様など大変参考にさせて頂きました。この場をお借りして、お礼を申し上げます。 アプリの機能や今後についての紹介はまた別途ブログで書くと思います。 ご興味がありましたら、ぜひ使ってみてい
una.im | Locally Scoped CSS Variables: What, How, and Why
Locally Scoped CSS Variables: What, How, and Why Published on June 5, 2017 CSS Custom Properties (also popularly called CSS Variables) are here! This is really exciting because we finally have true variables in CSS! What do I mean by true variables? I mean variables that can be updated and altered dynamically in the file. While we had “variables” with pre/post-processors (like Sass and PostCSS), t
chromium/src - bbf870d971 — Implement Element.scrollIntoView for scroll-behavior: smooth.
Implement Element.scrollIntoView for scroll-behavior: smooth. Currently in Chrome, a call to Element.scrollIntoView will calculate the amount each scroller needs to scroll to align the Element as specified and instantly set the scroll position on that scroller (going from the innermost to the outermost scroller). If Element.scrollIntoView is called with scroll-behavior: smooth, instead of scrollin
Browser animation in 2017
// Style: // transition: opacity 1s // transitionを発火する elem.style.opacity = '0'; getComputedStyle(elem); // 終わったら次の画面をactiveにする elem.addEventListener('transitionend', evt => { if (evt.propertyName === 'opacity') { evt.target.remove(); homeScreen.classList.add('active'); } }); /* * でも… */ button.addEventListener('focus', () => { // もしこれがmustacheのようなテンプレート仕組み… render(); }); transitionendが発火されないケース 要
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SLOBSERVER - L'actualité de Second Life
GitHub - MQuy/webpack-deadcode-plugin: Webpack plugin to detect unused files and unused exports in used files
GitHub - popcodeorg/popcode: An HTML/CSS/JavaScript editor for use in the classroom
Working with the new CSS Typed Object Model | CSS and UI | Chrome for Developers
画像の最適化 | Web | Google Developers
Release v1.0.0 · addyosmani/critical
GitHub - UpperCod/attrClass: 💬 una pequeña funcion de >=0.2kb, ideal para la generacion de **className** dinamicos
Amazon.co.jp: インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン: Heydon Pickering (著), 太田良典 (監修), 伊原力也 (監修), 株式会社Bスプラウト (翻訳): 本
Release 1.4.0: TypeScript and CSS support · prettier/prettier
