By now, a lot of us have already participated in one or more Optimizely CMS 12 upgrade projects. The others are still evaluating whether they should do it now or wait some more. Regardless of when you do it, there will definitely be some unique upgrade challenges you will come across, as I and many […]
Front-End Development
Headful or Headless AEM? Why not both with Hybrid? – Part 2
Previously I presented a common situation where an engineering team might push for Headless AEM and covered why, in my opinion, a Hybrid solution is a better approach. I discussed how Content Fragments, Experience Fragments, and Sling Model Exporters are used in combination to deliver the Headless side of the AEM experience. In case you […]
Introduction to Tailwind CSS
What is Tailwind CSS? Tailwind is a utility CSS library that allows developers to use the styling properties within the HTML file. It is done by labeling the class name as styling properties. Instead of defining the class name such as Navbar, and Footer, developers can define the classes as styling properties. Such as display […]
You Just Got Vectored! SVG Image Formats
If you’re reading this, you’ve come across a need that nearly all Opti developers encounter in their careers; You need to correctly display a vector image format (SVGs and the like). The <IMG> tag just isn’t going to cut it anymore. Posts like this are a right-of-passage for Opti bloggers. “So,” you think, “if there […]
Headless Commerce with SAP Commerce Cloud Composable Storefront
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 […]
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 […]