Behind the Scenes of crystallize.com: All the Performance Tricks and Hacks
Putting those frontend performance checklist suggestions to work.
Monolithic Applications vs. Microservices
More and more businesses are relying on cloud-native microservice apps to increase development speed and take advantage of the cloud's scalability and availability.
What Are Webhooks? Understanding and Implementing Them in Web Development
Webhooks are popular in web development, especially in headless and strongly decoupled architectures.
GraphQL Typescript Generators
GraphQL is a query language that optimizes performance by returning only the requested data, while TypeScript is a statically-typed language that helps catch errors during development. Together they can create robust and efficient web applications.
End-to-End (E2E) Testing Checkout Flow
Running tests against the checkout flow can help you discover issues at an early stage and ensure that clients can always complete their orders. Happy customers, happy business!
Best Payment Gateway Providers for 2023
A payment gateway is a tech backend solution that facilitates the payment process for online businesses. Important, right?
User Identity Management
Protecting your data and ensuring that only authorized people have access to it is of utmost importance. With that in mind, I wanted to talk about a few popular user identity management methods most devs have used, emphasizing the pros and cons.
Development and Design Trends In eCommerce
Headless, composable, API-first, Remix, UI or UX-driven design, etc. Tracking development and design trends in eCommerce is both tough and rewarding at the same time.
Retail eCommerce Remix Boilerplate Has Been Released!
Remix and eCommerce go well hand in hand, and we have a free open-source boilerplate for retail storefronts to prove it.
Powered by Turborepo
Why Turborepo? We wanted to expose Crystallize App components in a public design system, speed up build times in the CI and on local machines, and create the foundation for micro frontends.
Frontend Application End-to-End Testing
We all know that testing our website or web applications is important in helping us avoid breaking things down the line. It is what makes refactoring, adding new features, or simply fixing bugs so much easier. But are unit or integration tests enough?
What Is a Static Site Today?
There are numerous approaches to developing a web application that is performant. Going the static site way is just one of them. Pause here. What do we/I mean when we/I say static sites?
7 Tips For Maximizing Developer Productivity
What does it mean to be a productive developer, and how can you become one?
Implementing Magic Link Authentication On Your eCommerce Website
Let me introduce you to the idea of magic link authentication, its security risk, and its basic implementation.
Estimating Cost of Query
Our PIM API is built to let you do it all, so how do we protect our server from a possible influx of deeply-nested graphQL requests?
Keeping Websites Fast when Loading Google Tag Manager
Google Tag Manager can influence your overall website performance just as any other external 3rd party script. Luckily, there are a couple of things that you can do in that regard.
Migrating Our Frontend to TypeScript
Working Locally with HTTPS and All Your Services
Working as a team on a professional setup that implies many “micro/macro” services is challenging and can lead to invisible and unexpected errors if not set up well. Time to market, first time to success, and reducing the feedback loop are important topics for all your teams. This article is about setting up your project for a successful production workflow.
Gatsby Vs. Next JS
Next.js vs Gatsby, what to choose? This is an age-old question many developers have to ask whenever they start a new React application.
Build a React Native eCommerce App with Crystallize
React Native is a popular framework for building cross-platform mobile apps. With this in mind, we've built React Native ecommerce app boilerplate from scratch, and in this short tutorial, I will explain how to use it.
Remix.run eCommerce Starter
Remix is getting quite some attention lately, and being in the eCommerce space, it has caught our eye.
How to use GraphQL API with generated TypeScript Types?
Using GraphQL types in a frontend application avoids unexpected bugs and errors. There are code generators to automatically generate GraphQL types from a given API.
Event-Driven HTTP Caching for eCommerce
Let us dive into the topic typically described as the most complicated topic to learn for developers. Or better, the hardest to master.
Using AVIF in React
With online shopping becoming the new normal, the performance of your store is of utmost importance. One of the biggest contributors to overall page size (and thus page load speed) is the images used for products (their formats, their size).
Free Conference Website Template
Hosting a conference? You’re already in talks with speakers, sponsors, venues, etc. while planning marketing activities, and you need an awesome-looking website, but don't have too much time for it. Enter the Intergalactic Conference boilerplate.
Practical Guide to Web Rendering
Server-Side Rendering. Client-Side Rendering. CSR with Prerendering, etc. The differences, trade-offs, and similarities between most common web rendering solutions and why you should care about them as a dev.
Web Safe Fonts
Is there a best font for the web? Or what are the safest fonts to use on your web-based projects?
Fast Vue.js Headless Storefront With Nuxt.js
PIM + Gatsby = Jamstack eCommerce
The Jamstack strategy is gaining momentum these days, and rightfully so. Benefits such as better performance and easier scaling alongside better developer experience come to mind immediately. One of the main reasons we got into the business of reimagining ecommerce is giving devs the freedom to BYOF (bring your own front end). To tailor-make the front end and build a process for continuous deployment for fast iterations and deliver the best possible customer experience.
To make it even easier to start a Gatsby JS ecommerce project, we combined our Crystallize PIM with Gatsby, a modern React-based framework, to build out a super scalable Jamstack headless commerce solution. The results are staggering. Pagespeed score of 100 and a 3ms average response time when scaling out with 500 concurrent users on Vercel. Fast.
How to Build Beautiful and Fast Jamstack eCommerce in 3 Steps?
With the rapid growth of tools and solutions available in the space now is probably the best time to move your online store to Jamstack eCommerce architecture.
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
Fewer bytes to download for the user equals better pagespeed index, better conversion rate, and in general better user experience. It is also an important factor in ecommerce SEO.
The most well-known tricks to server fewer bytes to download are:
- Optimize the quality of the images
- Use JPG where possible
- Use srcset to serve different sized images for the different devices
Today though, there is another way to reduce the size of the images, the relatively new image format WebP. It supports both lossless and lossy and can be used both for images with and without transparency.
React srcset for Responsive Images
If you read about the srcset attribute on images previously but never got around to implementing it, keep 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.
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.
Simple Responsive Illustrations in Plain HTML
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:
- 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.