Uploaded October 2023 | Updated September 2026, 2 hours ago

---

A look at behind-the-scenes of online Photoshop to understand what it took to bring Photoshop to the web, from Web Components (Spectrum framework) to some interesting code patterns, with a focus on CSS.

🔗 Links
Photoshop Online: photoshop.adobe.com
Addy Osmani’s Article: medium.com/@addyosmani/photoshop-is-now-on-the-web-38d70954365a
Ahmad Shadeed’s Article: ishadeed.com/article/photoshop-web-css
DevTools Tips: youtu.be/W7GQglXn-jQ
Styling console.log(): youtu.be/sXT5DkeZnrA
Guide to color-scheme Property: youtu.be/nQzRTsjBXfQ
Kevin Powell’s Video: youtube.com/watch?v=_2LwjfYc1x8

Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com

Course Mastering Prettier & Stylelint
🔥 Learn everything about best linting tools while supporting CSS Weekly: masteringlinting.com
🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted, pre-launch price.

📖 Timestamps
00:00 About Photoshop for Web
00:32 Recommended reading
01:24 How to inspect Online Photoshop with DevTools
02:09 What is touch-action: manipulation;
02:42 How to style console.log()
03:09 Dark/light mode implementation
04:27 Web Components (Spectrum Framework)
05:49 :host() pseudo-class & Custom Properties
07:09 Layout for online Photoshop (Flexbox/Grid)
08:40 Editing engine of Online Photoshop

Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor
#css #photoshoponline