Dev Corner

Welcome aboard, tech enthusiasts! In today’s digital world, there’s no such thing as being too secure. With data breaches making headlines, it’s high time we pull up our socks and look at security essentials.

So, what’s all the hullabaloo about authentication vs. authorization?

Well, let’s break it down.

These two A’s are like the Batman and Robin of security protocols. They work hand in glove to protect the Batcave (read: your data). Hang tight, as we’re about to get down and dirty with these two superheroes.

So, you are done writing your code and (finally) want to merge it to get it out there so you can get on with the next task. It is never that easy, right? You need to ensure that all the PR checks pass. A reviewer will most likely also need to approve it. The work still needs to be done. To speed up the merging, you need to make sure that your PR is as easy to review as possible.

Pull requests are instrumental in maintaining a project's integrity by fostering collaboration, enabling peer review, and ensuring that only high-quality, tested code is merged.

Before we continue ...

Imagine trying to grow a garden with poor soil and no water. Even if you’re starting with the finest seeds, you won’t get anywhere. Similarly, the hosting environment you choose for your application will have a huge impact on how successfully your eCommerce application launches, performs, and scales over time. You need a platform that’s as fast, reliable, and affordable as possible.

So, which of those millions of platforms out there is the best one for you?

Often critiqued for NOT delivering on a promise of transforming front-end development, since its release in 2013, React JS has been under the fray of the dev world.

Last year's annual State of JS report on front-end frameworks and libraries survey showed interest may be falling, but React usage is growing (source link). Furthermore, insights from the Stack Overflow Developer Survey 2023 reinforce React's position in the ecosystem as the most loved web framework, with a notable percentage of developers either using it or expressing interest in using it shortly (source link).

While we wait on fresh stats, one could argue it is the framework of the web. Still, web development is an ever-changing beast. Yesterday's underdogs are today's hyped frameworks/libraries/approaches/architectures/concepts _________________(add anything here).

Not long ago, most businesses relied on monolithic solutions for content management (CMS) and eCommerce with coupled front and back end. That became a problem as new screens, markets, and channels emerged. The rise of headless architecture allowed businesses to think differently.

New technologies/frameworks significantly simplify the web development, management, and distribution processes while allowing for better reach, performance, and the web in general.

Why are we mentioning this here? Well, if you know React and are ready to take advantage of headless architecture in your blog or online store, all you'll need is a static site generator to get you going  (so to speak).

Sure enough, staying true to your brand’s identity matters, but it matters just as much as creating a seamless, engaging shopping experience that easily guides visitors from the homepage to checkout. It matters just as much as your website performance or having an omnichannel strategy in place.

Given that the design of your eCommerce store depends greatly on your product, product industry standards, and audience expectations, crafting a one-size-fits-all web design guide is not really feasible.

So, instead of creating a universal blueprint for eCommerce web design, here we’ll focus on articulating a set of best practices we see successful online stores (our clients) implement, be it for the sake of UX or SEO or they are simply cool to have 🙂

Astro🚀 has been a hot topic since its release in June 2022, especially because it is extremely fast. So it was a no-brainer to choose which framework we should go with next for our series of minimal eCommerce boilerplates titled ‘dounut’.

This post explores three important functions: fetching products, adding to a cart using our brand-new Shop API and pushing orders. The queries mentioned in this post are not tied to any language; you will use the same queries regardless of your language.

So you want to get started with headless eCommerce, and Crystallize in particular? It’s easier than you may think! We’ll talk you through getting your entire tech stack in order so you can hit the ground running.

And is it something you should use in your application? Does it replace SSR and suspense? Let’s go through each of these questions individually and better understand the core concepts behind React Server Components, their advantages, and their impact on modern web development practices.

The world of React frameworks is ever-evolving; many frameworks are available on hand to create incredible web applications. Gatsby.js and Next.js are two such contenders, and over the years, they have evolved and learned from each other. However, things have changed (for Gatsby.js mostly).

Let's delve into the current state of affairs and inject a dose of opinion into the mix.

Having worked as a web developer for a while, I've had the pleasure (and occasional frustration) of working on projects that demanded the best from both frameworks. If you head over to the official React website, Next.js and Remix.run are the two frameworks recommended there. Each comes with its bag of tricks and quirks, making the development journey a roller coaster ride.

Next.js, loved for its strong emphasis on performance, especially with "static" mode, has become one of the most widely embraced frameworks worldwide. Its charm lies in its well-established ecosystem and seamless integration with Vercel, making it a go-to choice for many developers.

On the flip side, Remix, despite being relatively new, is receiving praise for its dynamic flexibility and smooth data handling, positioning itself as an exciting option for teams looking to create agile user experiences and robust data management systems while also keeping fantastic performance.

Let's get cracking and delve into the details of these frameworks.

Do you want to build an eCommerce storefront using SvelteKit, Houdini, Tailwind, and with product information from the Crystallize GraphQL API? Well, look no further. We have created an open-source boilerplate that connects the dots for this stack.

Welcome back! In my last post, I showed how easy it was to install Crystallize’s open-source NextJS retail eCommerce boilerplate even though my programming days are some years behind me. The boilerplate is now deployed locally on my machine, pointing to my own custom tenant populated with demo data. Right off the bat, it’s got all these products, beautiful design elements, assets, and multiple payment integrations built in. Awesome!

Fonts are a crucial part of every app or website and play a significant role in front-end performance. However, making sure you have a fast web font is a practice usually overlooked.

But first, a background story to give you context. I didn't take the path most Computer Science students take once they graduate. At some point during my college career, while coding my brains out in Java, C++, and assembly, I decided that being a full-time developer was not for me.

To be fair, I hadn't known what to do with myself even before college. I’d always liked writing, but you couldn’t get paid for that. (Right?)

As the Internet became more popular, I’ve enjoyed building homemade websites in HTML+CSS, learned a great deal about how to use search engines, connected with people worldwide, and even bought books and Star Trek memorabilia off eBay.

Therefore, the elders in my life had nudged me toward Computer Science, saying I’d be sure to make a lot of money once I graduated. I’d started with programming classes in high school, then continued with that path into college. And while I kept up with my coursework, I was never all that into coding for coding’s sake. It wasn’t something I itched to do in or out of the classroom.

As a result, my career path has been colorful: tech support, technical training, business analysis, and project management. I once had a job helping developers who used my company’s SaaS and APIs to get up and running and troubleshoot their programming issues. But by far, my favorite thing to do has always been technical writing and documentation. I enjoyed writing articles for the company website, for the knowledge base, you name it.

It turned out I could get paid for writing. Who would’ve thunk it?

I like writing so much that I’ve done a fair bit of it outside work as well. It’s been mostly for myself and my own fun, but I was able to get some work self-published under a pen name.

Now I’m doing technical writing full-time. Although I enjoy every second of it and wouldn’t want things any other way, there’s no denying that my technical side has atrophied a bit. It's super-hard for a full-time developer to keep up with all the latest technological trends, never mind someone who isn’t constantly immersed in it.

So, every once in a while, I like to dip my toes back into that water to learn what’s going on. It helps me to write better documentation when I know firsthand what’s important from the developer’s perspective.

On one occasion, I wanted to see if I could deploy one of the Crystallize boilerplates myself. And if I wanted to later on, I could eventually customize the boilerplate to sell my short stories and novels without having to rely on the big A or the big G.

What follows is a nice bit of hands-on experience. How easy or hard was it for a beginner like me to pull off?

3rd party scripts are also notorious for hurting your website’s performance in addition to posing security risks. With that being the case, let’s look at the cost of third-party scripts and how to manage their impact better.

Putting those frontend performance checklist suggestions to work.

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.

Webhooks are popular in web development, especially in headless and strongly decoupled architectures.

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.

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!

A payment gateway is a tech backend solution that facilitates the payment process for online businesses. Important, right?

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.

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.

Remix and eCommerce go well hand in hand, and we have a free open-source boilerplate for retail storefronts to prove it.

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.

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?

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?

What does it mean to be a productive developer, and how can you become one?

Let me introduce you to the idea of magic link authentication, its security risk, and its basic implementation.

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?

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.

TypeScript is developed with the idea to help teams avoid common mistakes early through a type system and to make JavaScript development more efficient. An awesome tool to have in your toolset.

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.

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 is getting quite some attention lately, and being in the eCommerce space, it has caught our eye.

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.

Let us dive into the topic typically described as the most complicated topic to learn for developers. Or better, the hardest to master.

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).

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.

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.

Every web page we visit on the internet has text to explain something, give us indications, or tell us a story. They can also be fundamental in design and branding. As we can see, typography is essential on the web, and it's also something we should consider when building a website or application for many reasons, like availability, readability, and performance.

But first, let's cover some basic fonts theory.

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.

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.

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.

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 serve 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

Now there's 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.

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!

When using srcset, always accompany that with the sizes attribute.

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.

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.

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 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.

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.

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

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.

React does not come with built-in lazy loading for images, but it can be easily implemented using various techniques and third-party libraries.

The Crystallize React frontend boilerplate folder ships with a couple of nifty functions that will help you become a developer rockstar in no time. These basic building blocks 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.