Frontend

Javascript Bundling in Magento 2

Javascript bundling is a technique that groups separate files in order to reduce the number of HTTP requests that are required to load a page. Bundling is commonly used in today’s “module-based” development where some functionalities are basically split into Modules (roughly explained). For loading modules, we usually use some of popular module loaders such as rollup.js or RequireJS (which is Magento’s weapon of choice).

Read more

Using PostCSS with Sass

In this article we’ll be looking to a basic overview of PostCSS from the perspective of a developer whose current CSS development process includes use of CSS preprocessor, or in particular, Sass. If you’re a Sass user, there are a couple of approaches when starting out with PostCSS. You could make a complete switch and recreate your basic preprocessing environment with PostCSS, or you could start using it as a supplement.

Many of you will say that you still only rely on your favorite preprocessor, but then, it’s possible that you’re also using Autoprefixer for vendor prefixing, and guess what? In this case, you have already included PostCSS into your workflow.

Read more

How to keep your CMS blocks organized (and not go insane)

Head on over to Magento dashboard in your store and take a look at CMS blocks. How many CMS blocks have you got? Can you tell which of the blocks are being used on site and which are currently not active or can be safely removed? Can you pick a random CMS block and instantly know what it is and where to find it on site? In this article we’re going to cover a powerful way of organizing, searching and filtering CMS blocks by simply naming them in a specific way. And the best part is that it works out of the box in vanilla Magento without any extensions.

Read more

Getting started with CSS Flexbox

The CSS3 Flexible Box Layout, or as a shorter and more widely recognised term – Flexbox, is a CSS box model optimised for designing user interface layout.

It is the addition to the four basic layout modes, previously defined in CSS: block layout, inline layout, table layout, and positioned layout. But, in contrast to these earlier ones, this is the first CSS module designed for laying out complex pages.

Read more

Evaluating and improving accessibility of eCommerce websites

Sir Tim Berners-Lee once said that “Access (to the Web) by everyone regardless of disability is an essential aspect”. We, as developers, always strive to create a website which looks and feels good on a wide range of devices, resolutions, operating systems, network speeds, etc., but how often do we consider designing or creating a website for a wide range of people? In this article, we’re going to cover some basic frontend principles of improving accessibility and what that means in context of a Magento website.

Read more

Improve default Magento reviews

If you’ve ever worked on Magento framework you’re familiar with the fact that Magento provides bunch of useful features. In this article we will cover one of them – Customer Product Reviews. Maybe some will say that we don’t need to change anything regarding this feature, but when we are in custom development a lot of things can’t just work “out of box”. Especially if you willing to provide fully polished retina responsive theme, default isn’t the way we roll.

So let us improve the default Magento product reviews feature.

Read more

Adding static blocks to specific CMS pages with Magento layouts

While working on a project, I had to add a unique static block between header and main content of the CMS page on each CMS page. Element had to be fully customizable via Magento admin panel and it had to be easy to create on new CMS pages, easily modifiable and removable. Since that element needed to be placed outside of the main content, it couldn’t have been added using CMS in Magento admin. It had to be added using Magento layouts. Here’s how I achieved that.

Read more

Creating a Magento theme from scratch

Powerful fallback system, organized folder structure and tons of functionality is what makes Magento one of the most flexible and powerful eCommerce platforms out there. By default, Magento offers a lot, but as eCommerce evolved during the years, there is always additional work required to fit client needs.

Probably the first thing you will do when starting a new Magento project will be to create a Magento theme that will have custom styling and functionality. Although creating a Magento theme is a pretty simple thing to do (just ask any certified frontend developer), by not following Magento recommendations and rules you can easily make your life a bit complicated.

So, how to do it properly? Read on…

Read more

6 ways to prepare your online storefront for holiday season

6ways

Holiday season is just around the corner, consumers are eager to start shopping, there is no doubt — it’s very important time for any retailer in the business. There are numerous marketing strategies to prepare your online store for all that online rush, but hey — let’s not forget that sometimes a pleasant holiday atmosphere can play a quite important role.

In this article I’ll present 6 possible ways to prepare your Magento storefront for the upcoming holiday season.

Read more