Image for post
Image for post
Photo by Soragrit Wongsa

Images are some of the most common types of content used on the web, they’re often used to attract user’s attention and they are usually the biggest element on-screen above the fold (think of banners, hero images, product images, etc) so it’s very important we do the best we can to make them display as fast as possible to maintain a good user experience.


Image for post
Image for post
Photo by Vincentas Liskauskas

Sliders (or carousels) are some of the most common elements in almost any website these days, regardless of how you feel about them they can offer a convenient way of displaying information specially when screen size is limited.


Image for post
Image for post
Photo by Marc-Olivier Jodoin

As much as I like working with Magento 2 I have to admit it’s never been known for its blazing performance, page loading speeds in both frontend and backend have been consistently slower than its own 1.9 version and that’s been a problem most Magento developers have had to deal with in some way or another.


Image for post
Image for post
Photo by Esther Jiao on Unsplash

CMS blocks are a popular way to enable users to edit elements in their Magento 2 websites from the backend, it requires (almost) no coding skills and provide a relatively safe way of updating content without risking breaking your e-commerce site.


Image for post
Image for post
Unrelated, please ignore…

For the past few months Magento has been working on PWA Studio which is, in summary, a collection of tools to help build modern Progressive Web Applications on top of Magento 2 stores.

  • Peregrine: collection of React-based UI components to help reuse common functionality like routing, render pages, products, prices, etc.
  • PWA Buildpack: build and layout optimisation tooling, it expands webpack to help configure PWA Studio components and sets up local development environment. …


Image for post
Image for post

I was browsing the ASOS website the other day and noticed they have a really nice animation when you click the icons to save some items for later:


Image for post
Image for post

Images are widely used in most websites, web apps and PWAs, have a look at any of your recent projects and it’s likely that images are responsible for a good portion of its bundle size.


Image for post
Image for post
Random gallery photo

I’ve been working with Vue Storefront for the past few months and it’s been a great experience. It’s one of the few open-source solutions available to implement PWAs using Magento 2 (and many other e-commerce platforms) in the backend so it brings modern solutions out of the box to a lot of common requirements for web based applications (offline support, lazy loading, small bundle size, server side rendering, etc).


Image for post
Image for post

Dropdown menus are a very common pattern around the web, their code is pretty straightforward:

  1. Use position: relative on the parent menu item.
  2. Use position: absolute on submenu.
  3. Toggle submenu visibility on parent hover.

However that doesn’t account for the fact that most users don’t move the cursor to the submenu on a straight line, most of the time they will move the cursor diagonally as it’s the shortest path to the content they’re trying to access.

The problem


Recently I had to work on a relatively simple piece of UI that I’ve seen many times around the web. In essence it’s a ‘grid’ of items that can be clicked to expand a full width section beneath them with more content.

Image for post
Image for post
The ’accordion grid’ element

As simple as it looks it ended up being more complicated to implement than I though, specially because I needed it to stack vertically on smaller screens. Every solution I had in mind involved some crazy amount of CSS and flexbox hacks or even worse having to rely on Javascript to listen to the window’s onresize event to position each box in the right place. …

About

Javier Villanueva

Lead Developer at Media Lounge · 6x Magento Certified & Full Stack Developer · E-Commerce Specialist · Currently @ Bournemouth, UK

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store