Nowadays, customers have high expectations; they want a fast, reliable, and smooth e-commerce experience across multiple devices, especially on mobile. Headless e-commerce solutions such as SAP Commerce Cloud Composable Storefront (also known as Spartacus) provide best-in-class technologies and practices to ease the creation of these experiences while supporting complex selling models. There are numerous reasons […]
Front-End Development
How to Configure Facet Search in Drupal 9
What is Facet Search? Facet search is a way to filter content dynamically. It comes with multiple filters at the same time for the various attributes of the content. Facets will also display the number of matched results next to them. It works with the Drupal core and search API. Facet 3.0.x works with drupal […]
Webpack: Get Your Module Running
Run Smarter, Not Harder When we first started setting up webpack’s package.json file we defined a single build script called “common”. “scripts” : { “common” : “webpack –config webpack.common.config.js” } To run this build, in terminal we use the following command: webpack run common We want the best performance while developing our project, reducing the […]
Webpack: Plug it in
Webpack Plugins Last time we started creating rules for file types, and sometimes we used a loader and sometimes we referenced a plugin to do any special functions. We already used the MiniCssExtractPlugin for working with Sass-like files and plain css to produce a single CSS file. Next we will look at some common use […]
WhatPack? A FED guide to webpack’s mysteries.
What’s the problem? Web development has had innumerable changes over the years and the term “front end” developer has expanded to include new ways to layout pages, new JavaScript libraries to learn and new ways to style your creations. This complexity comes with challenges on how to organize everything. In an Enterprise team environment the […]
Webpack: It Configures part 2 – The Ruler’s Back
Module Rules Previously we went over where webpack will get the instructions of what files to package and where to put the results. Before webpack can do any of this, it has to know how to deal with these files and how to convert that information into a javascript format. This requires us to create […]
Webpack: It Configures part 1 – the Ins and Outs
Webpack Configuration Files Last time we talked about how to install webpack, what files are created and how we get webpack to do something. Configuration files are that “something.” As described before, package.json lets us define which configuration files we want to use when running webpack. In package.json we need at least one build script defined. We’ll […]
Webpack Builds Too Slow? Try ESBuild-loader Plugin.
“My project is not ready to move away from webpack and deal with migration issues just yet.” “I want to speed up my project builds without having to completely uproot webpack.” If either of the statements above applies to you, please consider the ESBuild-loader plugin for webpack. This nifty little plugin essentially utilizes the amazing […]
Things we can do With React DevTools
Debugging is one of the most important and useful techniques that every developer needs to achieve while developing an application to properly navigate and find the bugs or errors in the application efficiently. React Developer Tool (React DevTools) is one of the debugging tools. What is React DevTools? React DevTools is a browser extension available […]
Vue 3 with Sitecore MVC
Intro Vue is rapidly becoming one of the most popular JavaScript frameworks for building user interfaces. Vue 3 can be used as the UI for a Sitecore MVC website (i.e., not headless). Still, a few configuration gotchas need to be addressed, and a general strategy for working with your markup needs to be implemented. There […]
How good is your AEM security? – XSS
Large scale data breaches and critical security vulnerabilities have companies thinking about security more than ever. Many developers are familiar with the OWASP top 10 (https://owasp.org/www-project-top-ten/) and there are already many resources on generic mitigation for these vulnerabilities. Instead in this series, I cover security issues and mitigations specific to AEM. XSS and AntiSamy As […]
How to disable Server-Side Rendering in Next.js
SSR in Next.js Next.js has become very popular recently because it is built on top of React. In addition, it has out-of-the-box features that are sometimes redundant to implement on React applications like server-side rendering, image optimization, Routing, and API Routes. Not like a typical React app, Next.js supports SSR out of the box. This […]