Exploring Front-End of Photoshop Online

Рет қаралды 3,210

Күн бұрын

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: / photoshop-is-now-on-th...
Ahmad Shadeed’s Article: ishadeed.com/article/photosho...
DevTools Tips: • Chrome DevTools Tips -...
Styling console.log(): • Start Styling Your con...
Guide to color-scheme Property: • Start Using color-sche...
Kevin Powell’s Video: • Using CSS custom prope...
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 KZfaq25 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: / cssweekly
👉 Instagram: / cssweekly
👉 Facebook: / cssweekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
- Zoran Jambor
#css #photoshoponline

Пікірлер: 11

@AhmadShadeed 8 ай бұрын

Great walkthrough, Zoran! I like everything you mentioned. Thanks a lot for mentioning my article, appreciate it! 🙏

@CSSWeekly 8 ай бұрын

Thank you so much, Ahmad! And thanks for all your fantastic work! 🙂

@badcatdesign 8 ай бұрын

It's been super interesting to see Adobe finally bring PS to the web (along with their other apps). Congrats to Adobe and the Lit teams! I think it would also be interesting to peek "under the hood" of Photopea which has had an image editor on the web for many years, likely pre-dating the current implementation of Web Components.

@CSSWeekly 8 ай бұрын

Thanks for the insightful comment, my friend! 🙏 I wasn't even aware that Photopea exists! It's impressive that it supports all relevant file types like .psd, .ai, .xd, .fig 😳 I'm not sure how interested people are in watching this type of content, but I certainly find it interesting to peek under the hood from time to time. 🙂

@ahmad-murery 8 ай бұрын

I wonder how the web version performs compared to the native desktop app version, in my opinion the desktop version will do better job as it can directly access the system resources an not through a mediator (the browser) anyway, does it work offline? Thanks Zoran!

@CSSWeekly 8 ай бұрын

These are fantastic questions, Ahmad! 🙏 Yes, it seems like the native version should be more performant. I tried it in Firefox, and it's pretty much unusable. Still, it feels smooth in Chrome, and I'm not sure if you'd experience any problems unless you're working with massive files. All in all, this is something that should be tested thoroughly. It doesn't work offline in a true sense. It remains usable if you lose the connection, but you can't refresh the page or save your work. There certainly are areas where it can be improved. 🙂

@ahmad-murery 8 ай бұрын

@@CSSWeekly Just what I thought, Thanks for the info!

@CSSWeekly 8 ай бұрын

You’re very welcome, Ahmad! Thank you for always watching and commenting! 🙂

@badcatdesign 8 ай бұрын

@@CSSWeekly Photoshop web should be slightly more performant in Chrome vs other browsers at this time. There's a "Common Questions" FAQ on the Adobe site about this. Even with "massive" files like PSB (Large Document Format) was originally called "Big Data" back in the day - it's file over 2GB or 30k x 30k in dimensions, PS buffers "chunks" of data for what's visible onscreen and based on display res vs actual so it's always optimizing performance.

@CSSWeekly 8 ай бұрын

Good to know this! Thanks so much for your in-depth clarification! 🙏