Skip to main content

Dev Corner

Fast Vue.js Headless Storefront With Nuxt.js

Learning Vue.js doesn’t require a lot of upfront knowledge (classic CSS, HTML, and JavaScript is enough). That fact alone plays a huge part in its adoption. The lightweight nature of Vue.js is the other.

PIM + Gatsby = Jamstack eCommerce

Looking to build a content-rich storefront with a performant, stable, secure ecommerce backend? How about Gatsby as a static site generator for your fast frontend, Crystallize for all your backend ecommerce and content management needs, and Vercel to host your project?

How to Build Beautiful and Fast Jamstack eCommerce in 3 Steps?

Combine the power of Crystallize, our open source Jamstack eCommerce boilerplate using Next JS and React with serverless hosting on Vercel to launch fast headless commerce in just a few minutes.

Frontend Performance: Fast Web Fonts

Fonts are a crucial part of every app or website, and they can also play an essential role in the frontend performance.

Using WebP in React

Images usually make up for the better part of the bytes on a website, so it is one of the most important things to evaluate when you optimize your website for front-end performance.

React srcset for Responsive Images

If you ever read about the srcset attribute on images, but never got around to implementing it, keep on reading. Your users with their limited phone data packages will love you!

React Image Sizes Attribute for Fast ecommerce

Images are crucial for frontend performance. Responsive images with srcset is a good start. If you have many and large images consider lazy load them, soon we get native HTML lazyload in our favorite browser also. When we wrote about srcset we mentioned the sizes attribute, but not the importance of using this attribute so the browser loads the properly sized image.

Let’s dig in.

Product Taxonomy Using Topic Maps

Product taxonomy implies organizing all the products in the catalog in a manner that makes it easy for customers to find the product they are looking for in the least amount of time. This can be done by categorizing products according to different properties such as color or material.

Polymorphic Content Modeling

Polymorphic comes from Greek where poly means many and morph means forms. Related to content it basically means that the content can have many forms. In the context of content modeling and Crystallize this allows you to define multiple editorial choices for specific content.

Speeding Up Next JS Websites By Removing JavaScript

Jamstack is now more popular than ever due to its promise to deliver better performance and scalability than traditional server-rendered websites. Still, when comparing performance to a traditional server-rendered site, many Jamstack sites lose, leaving the end-users worse off.

Content Modeling Using Figma Design System

A great content model is the best starting point when starting a new webshop, App, or marketing website. The content model serves as documentation and overview and connects information architects, designers, developers, and business stakeholders. We have created a design system in Figma for content modeling.

Build a React Native eCommerce App with Crystallize

You can use React Native to build native Apps that run on both iOS and Android. When building your App you typically need a backend to serve your products, marketing content and to receive those orders. Crystallize serves as a fast backend for your App with both product information and the rich marketing content you need to build enjoyable App experiences. We got your back(end).

Simple Responsive Illustrations in Plain HTML

When using illustrations, infographics, or diagrams you would often like to use a simplified version for mobile devices vs a full desktop display. Using the picture tag and a simple media query you can easily do this in good old HTML. No JavaScript or CSS trickery is needed. The same technique can also be used to serve responsive images that are optimized for site speed.

How to Use GraphQL to Populate Figma with Real Product Information?

Being able to use actual data is a great way to stress-test your design. Thanks to the use of API and a pre-made plugin you can now populate your Figma design file with product information from your Crystallize PIM.

Webhooks with GraphQL for Simpler Integration

Webhooks are used to orchestrate events in our headless ecommerce service. We have now introduced GraphQL to allow you to select exactly the data you need for each webhook. You do not need to circle back to fetch the data you need. Simple, quick - and you are in control.

CSV Product Import into PIM

The core of PIM is products and product information. The base product information is often created initially in an ERP system like SAP or ERPNext, then imported to your PIM. You can manually create the product information in Crystallize or; when working with large product sets that frequently update create an automatic import and update integration. We have made an open-source CSV product import for Crystallize to get you started.

Simple Example of React Hooks

React Hooks was recently announced by Dan Abramov at React Conf and it offers a new, way to do really simple state management without the use of class constructors. Let us see how we can use this in a very simple way.

Secret Exposed: Crystallize Server Timings

One of the most sought-after features in Crystallize is the fast ecommerce API. You can expect us to spend not more than a fraction of a second crunching your data before sending it back to you. This is what fast headless ecommerce is all about, and is one of the most important reasons people are looking towards Crystallize. A fast API is key for frontend performance and helps drive ecommerce SEO.

CSS Animations with React = Juicy Frontend UI

Conditionally rendered CSS animations are core ingredients for a juicy user experience. With the styled-components library along with managing React’s component lifecycle, this is a cakewalk. Couple this with Fast APIs, and you have the recipe for an addictive website user interface (UI).

Native HTML lazyload in React

Lazy loading is a great concept that aims at enhancing frontend performance results. In essence, it enables us to defer the loading of assets until they are needed.

How to Pass a GraphQL Response as Props to a React Component?

The Crystallize React frontend boilerplate folder ships with a couple of nifty functions that will help you become a developer rockstar in no time. They are basic building blocks that make your components come alive with product data delivered super fast from Crystallize.

Crystallize delivers product information data using GraphQL. The boilerplate uses an export in the graph-data.js files to define how your data should be presented in your component.

Accessible React Dialog

Dialogs in React are something that I have never fancied. The available open-source libraries out there don't really fit my need as they either do too little, too much, or simply do the wrong thing. I want my dialog library to be:

  • Accessible
  • Simple to style
  • Not forcing me to include an extra .css file
  • Usable with default config
  • Be promise based
  • Callable via functions, not as JSX elements
  • Provide alternatives to the native alert() and confirm()
  • Do nothing else. No magical image slideshow gallery thingy. I don't want a myriad of different transitions options.

After a long time researching and evaluating, I concluded that no libraries out there do exactly this, and so I decided to create one for Crystallize. Using the excellent a11y-dialog as the base, it does not require much code to give me exactly what I want!

Getting Started with Crystallize React Components

Getting your own shop up and running with Crystallize is a breeze. We have prepared a boilerplate for you to get started, as well as standalone React components to help you with doing stuff like managing the basket and collecting payment. As a frontend developer, you just need to have NodeJS installed, and then execute this:

npx @crystallize/cli my-new-ecommerce

That’s all it takes. You will be guided through the rest of the setup process to connect to your tenant and to set up your shop.