Nick Alcantara

Selected Works

Home

Blog Landing

The term *Ability to turn a Photoshop document into a "pixel-perfect" responsive website* is a bullet point on a job listing from 2012 that you laugh at nowadays. With tools like InVision, Adobe XD, Figma, and Sketch, Photoshop documents as deliverables for developers have gone from *not that bad* to truly awful.

Exporting Web-Optimized Assets From Photoshop

But that fact isn't going to stop the project manager who crammed a 160-hour sprint into 9 working days from forcing your designer to hand off half-baked PSD wireframes that received client approval to you as your only source of truth. So, now you need to figure out how to export the 8MB high-resolution stock images from that photoshop document without doing the frontend equivalent of filling your car's backseat with cement and racing for pink slips.

Brutal honesty aside, selecting the image layer you need to export and pressing **COMMAND + OPTION + SHIFT + S** will get you 90% of the way there (**Alt + Ctrl + Shirt + S** for Windows). This sequence will probably require both your hands, but will open the "Save for Web" dialog that allows you to do things like scale a 4K image down to the 600px width at which the image will actually be seen on your frontend. Additionally, you can convert the asset type from PNG, TIFF, or whatever into JPG and lower the quality percentage to something reasonable for users on 3G connections (or slower, if need be) by using the dropdown on the right side of the dialog menu. If you really need to trim out a few extra bytes, you can also strip out copyright info and other metadata that doesn't matter to you from within this same dialog.

Even while using this shortcut, exporting images this way can still be tedious when you take `srcset` into account. If you're using `srcset` (which you should be, considering the wide browser support and the ease of falling back to `src` if its not supported), you probably need to export each image like a half-dozen times or more.

In an ideal workflow, this problem would be solved by your stack's asset CDN (Personal favorites are Shopify's CDN and Sanity.io's Asset CDN). But, since you wouldn't be here if your current stack has a similar feature, you may be interesting in a quick and dirty Webpack config to power a sharp + responsive-loader setup for dynamically generating your images (tutorial coming soon - if you're reading this and really need it, feel free to [reach out](//contact)).

As an event-driven language, there's alot you can achieve in JavaScript solely with native events. However, attaching listeners to some native events can (and will) lead to performance issues (I'm looking at you, `resize` and `mousemove`). By extending these native events with your own custom events created using the `CustomEvent` class, you can mitigate these performance problems.

Things You Should Know About Javascript Events

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos commodi vero quasi soluta, ut, perspiciatis minus laudantium dolorum ab labore vel sed tempore debitis ducimus fuga facilis libero modi adipisci. 

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque molestiae porro repellendus reiciendis, perferendis non. Pariatur et ipsam qui dolorem totam, voluptates quae illo quo possimus rem sunt, esse ducimus!

Portfolio

Work Listing

Gucci

A microsite experience for Gucci fashion shows. 

Gucci Ancora

lululemon Studio

During their engagement with BASIC/DEPT®, I worked with the newly-acquired Mirror team to replatform their content and rebrand as lululemon Studio.

Chrome OS

During the engagement with BASIC/DEPT®, I worked with the ChromeOS.dev team to create new UI components celebrating the m100 release.

ChromeOS.dev

Spanx

Alibi Music Library

A music licensing company needed more out of their platform. Alibi came to Magnetic Creative to build a custom web app that would give them a way to run their business and let clients find music for themselves at the same time.

Magnetic Creative

A site as unique as the sum of its parts.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam perspiciatis adipisci fugiat vero? Qui est ipsam amet autem porro vero totam dignissimos reprehenderit molestias quaerat veniam aliquam dolore, enim nam. Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Ab sit, est architecto rerum corrupti voluptates iste expedita delectus excepturi laboriosam illum omnis, atque nesciunt provident. Voluptatem ipsa enim aliquid aperiam. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum, expedita amet. Reprehenderit ab commodi corrupti quos voluptatibus enim? Impedit, fugiat natus ratione possimus repellat ab non quia iste consequatur aut! Lorem ipsum dolor sit amet consectetur, adipisicing elit. 

Facilis, cumque, aut accusantium corporis nesciunt repellat illum fugiat animi, distinctio eveniet tenetur facere reiciendis! Corporis, sequi odio blanditiis tempora veniam minus.

Vix Paula Hermanny

A women's luxury swimwear brand needed a fresh look and monthly landing pages to showcase their seasonal releases. A new homepage, navigation, and reuseable modules for page-building gave them a site that matched their style.

NickAlcantara

©2024

Selected Works

001Gucci Ancora

002lululemon Studio

003ChromeOS.dev

004Spanx

005Alibi Music Library

006Magnetic Creative