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.
In e-commerce websites use cases range from displaying featured products, banners, promotions, product galleries, you name it! There’s no shortage of these bad boys in the wild even though their effectiveness is a bit controversial it’s one of those things users are used to seeing so it provides a low-friction experience for most people.
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.
Don’t get me wrong, there are a lot of changes Magento’s done to improve development experience: using composer, the plugin system, dependency injection, just to name a few, but page loading speeds (specially on the frontend) have suffered because the frontend stack that Magento decided to go with hasn’t scaled very well and it’s so tied to the core that making drastic changes to it involves a lot of work. …
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.
Out of the box Vue Storefront provides support for CMS blocks, if you’re using the official Magento 2 VS Indexer or mage2vuestorefront data pump (v1.6+) CMS blocks and pages are synced to the Elastic Search database so we can query this data very efficiently.
Vue Storefront also includes a component to help us render this content anywhere in our sites, let’s see how that would look if we wanted to make one of the blocks in the homepage editable from a CMS…
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.
For the most part these tools have been used in production by other projects with great success so it makes sense that PWA Studio is built on top of them, for example:
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:
So I was wondering if it would be easy to replicate this in Vue Storefront, after all it’s mostly just CSS animations with some JS sprinkled on top, and it turns out it was very simple.
There’s a wishlist component already in the Vue Storefront core, we could work directly on top of that but it’s probably a better idea to create a new one based on this because we’ll be changing quite a few things. …
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.
Because of this you might have run into this scenario: you have a mix of images and text based content in your page but, as images load, the whole layout shifts, jumps and changes providing a very poor user experience.
This is particularly worse on mobile devices due to the limited screen sizes and connection speeds. Also it doesn’t help that modern best practices recommend lazy loading images below the fold because it means the jumping and shifting will continue as users scroll down the page. …
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).
To get a basic understanding of how Vue Storefront works I thought it would be a good idea to document how to implement an Instragram feed in your store. …
Dropdown menus are a very common pattern around the web, their code is pretty straightforward:
position: relativeon the parent menu item.
position: absoluteon submenu.
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 main problem with the “hover parent, toggle children” approach is that as soon as the cursor leaves the parent item then the submenu is hidden. This is a bigger issue with full width dropdowns because in some cases users will try to click on content on the furthest end of the submenu. …
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.
I couldn’t find a name for this kind of elements so, for the sake of this post, I’ll name it ‘accordion grid’ but please let me know in the comments if there’s a more widely known way to call it.
onresize event to position each box in the right place. …
Gutenberg is the codename for the new WordPress post and page editor, the main idea behind it is to provide a better experience for us to create feature rich content by adopting the idea of “blocks” so, instead of messing with shortcodes, custom HTML structures or post metadata, everything is laid out into small pieces that can be put together to shape our site’s content easily.
The current editor is one of the most powerful features of WordPress, it’s powered by TinyMCE and it’s been customised to allow us to effortlessly manage how content looks, upload images with drag and drop or even embedding third party stuff like YouTube videos or tweets by just copy/pasting a URL, however when it comes to editing non-textual content it falls short. …