DEV Community: Matias Arabolaza

Why go Headless?

Matias Arabolaza — Tue, 09 Mar 2021 13:57:27 +0000

We've heard a lot about "Headless" in the last year. Headless CMS, Headless Commerce… but what are they exactly? Which are the main benefits and drawbacks?
Let's go through all the pros and cons of this amazing architecture that is here to stay.

First of all, what’s a Headless CMS/Commerce?

In short, a headless platform is an e-commerce/cms that works without a front-end layer at all. Basically it delivers functionalities in isolation. The front end (or the head in this case), is totally decoupled from the backend.
That way, backend developers can use APIs to deliver things like blog posts, products, cart details, etc, while frontend developers can focus only on how to present that content using whatever framework they like. This seems like a dream!
On the other hand, traditional commerce/cms platforms have both the backend and the frontend tightly tied. This means that they are built with a monolithic architecture. As a consequence of this, we have a frontend that is super coupled with the backend layer.

Headless architecture works with a RESTful API that has a back-end data model and a cloud-based infrastructure. Since the platform is not coupled with the back-end, ecommerce brands can deliver things like content, products and payment gateways to smartwatches, Alexa Skills, and everything in between. (A really omnichannel experience)

How headless platforms work

Headless CMS and commerce work in a very similar way, sending requests between the presentation and application layers using web services or APIs.
For instance, when the user clicks “Add to cart” button, the frontend sends an API call to the backend layer that is in charge of adding that product to our cart and then we get a success or error message so we can notify the user if the product has been added correctly to his cart.

Ok, now that we know what is a headless CMS/Commerce and we know how they work, let’s check some key benefits.

Benefits:

Focus on business

Back when the only option was the traditional CMS/Commerce platforms people had to spend a lot of time setting up the platform, installing it, taking care of a server, and ensuring other critical aspects such as security.
Headless platforms allow you to focus on the business, to build real solutions for your customers and deliver high value features to the end user. All of this because you don’t have to spend time and money in all the chores mentioned above.

Agility and shorter time to market

Nowadays, with digital transformation impacting all industries, agility is a real necessity and not just an advantage.
Businesses need to be able to launch new products, ideas, and initiatives faster than ever before. Say goodbye to those super long projects that may take one or two years to hit the market.
With a headless platform you don’t have to wait to have the entire ecosystem finished. You can launch a static website with just a homepage and product page and then add more pages to your site.
In addition to this, having a better separation between the CMS/Ecommerce and your custom code is a real benefit when it comes to deployments, allowing for smooth CI/CD that only deploys your custom code and not the entire platform.

Omnichannel experience

A headless solution will help you ship your content anywhere and everywhere. That means that you, as a brand, can deliver your products on several channels at the same time. You can sell products on a website, mobile, TVs and any device that has a screen and internet connection.
Because we have a totally decoupled solution between backend and frontend, we can have several frontend projects and one backend providing the same information about products, carts, blog posts, etc to all the devices that we want.
Furthermore, you can add new touchpoints easily without building a new backend every time you want to add a new frontend. This opens the door for easier integrations. (We will talk about this later below 👇 )

Technology freedom (flexible Frontend development) and innovation

I think this one is one of the most important benefits of a headless solution: Technology freedom.
First of all, you can chose the technology that fits you or your company. You can chose the technology depending on your team. They use React? Vue? Angular? No matter what you chose, you can go ahead with total freedom. Do you want to use a preprocessor like SASS/SCSS? Or why not a super modern framework like Tailwind? Everything is a yes!
Frontend developers can create a user experience from scratch depending on business needs. They don’t need to worry about databases for example, they only need to do is a simple API call.
The only drawback that they have here is there is not presentation layer at all, in comparison with a traditional CMS where you have out of the box pages, like homepage, product page, etc. They have to build everything.

Easier integrations

A headless commerce/CMS solution must have an API which makes our life easier to integrate and communicate with other platforms, such as Payment methods.
What happened when your team wanted to add a new payment method in a traditional platform? It was a nightmare: you either had to go through plugin hell or integrate it yourself.
In a modern solution, integrations by APIs are super easy and straightforward to do. That’s because you have the control and the tool has an API to integrate, with documentation and steps to follow.

Scaling your application effectively

Since we are in a decoupled architecture, the front-end and back-end teams can work separately and simultaneously.
In a traditional platform they are tightly coupled, so if you want to scale one part of the application you have to scale everything. But in moderns headless solutions, our frontend or backend can be scaled independently. If the marketing team wants to create a promotion or discount for a product, we only need to scale our frontend! We have the control!

Some drawbacks

Time, ongoing costs and responsibility

Like the word says, “Headless” means that we don’t have a presentation layer in the front end at all.
We were talking about this like a big benefit, of course it is. But on the other hand, developers have to build the frontend layer from scratch. Create templates, user interfaces, maintain and support their creations, etc.
In traditional platforms you have the frontend layer working out of the box.

Marketing team can be affected

With headless solutions we don’t have a way to create content using WYSIWYG (What you see is what you get) and they can no longer preview the content to see how it looks like on the end user screen. But some moderns solutions are working on a way to preview the content before you publish it.

Do I need a headless commerce/CMS?

To answer this question I would recommend checking your requirements.

Some important use cases to have in mind for Headless platforms:

Build a website with a technology you or your team know
Use static site generators it’s a possibility because of headless
You need to go omnichannel. With a headless platform you can provide your content where you need it

In conclusion, Headless platforms (CMS and Commerce) are not a silver bullet. But definitely going headless is the way to go! It provides several benefits and very few drawbacks.
This architecture gives you the ability to distribute your content anywhere and everywhere.
Also the shorter time to market and the freedom to choose any technology that fits better for your business is a key benefit that this solution gives us.

Thanks for reading!
Follow me on Twitter: https://twitter.com/matias2205

Image management made simple with React + Cloudinary

Matias Arabolaza — Wed, 26 Aug 2020 10:14:37 +0000

Whether in small personal projects or big enterprise ones, image management can get annoyingly complicated. Where to put the files, how to upload them, where are we going to store them, are we going to use a third party service?

Today I’m going to tell you about a super easy way to upload images to Cloudinary with React (Or you can adapt it to whatever framework/library you’re using)
So, let’s get into it!

What is Cloudinary?
Cloudinary is an end-to-end image and video management solution for websites and mobile apps, covering everything from image and video uploads, storage, manipulations, optimizations, and delivery.

Ok, a bit more of information?
With Cloudinary, you can easily upload images and videos to the cloud and automate smart manipulations without installing any other software. Cloudinary then seamlessly delivers your media through a fast content delivery network (CDN), optimized with the industry’s best practices.

Does it have a free plan? Can I try it? Can I have a free account for development or small projects?
Yes, yes, and yes! Cloudinary offers a full-featured, free plan with a generous usage limit
They give you “credits”. That is equal to:

1,000 Transformations OR
1 GB Storage OR
1 GB Bandwidth

That means, at least for dev purposes, A LOT!

Main Features

Media upload
Image and Video transformations
Optimized and responsive delivery
Digital Asset Management (DAM)

Setting up our Cloudinary account:

Create an account at https://cloudinary.com/
Once you go through the Signup process, you will get on your dashboard.
Important: Remember to activate your account.

Click on the gear icon in the top right of your screen to go to Settings. Then “upload” tab => Scroll down to the “Upload presets” section and click on “Add upload preset”.

Here we have two important sections: Storage and Access and Upload Manipulations.

In Storage and Access section you have to put an Upload preset name and a folder name for your images (whatever name you prefer) and set the Signing Mode to “Unsigned” (just so you don’t have to go through any signing process to upload images to your account). You will have something like this:

Done that, go to Upload Manipulations.

Click on Edit on Incoming transformation section.
We are going to use two things from here: Incoming transformation and Eager Transformation.

What is an Incoming Transformation?
Any combination of transformation-related parameters for transforming the uploaded media before storing in the cloud.

What is an Eager Transformation?
A list of transformations to generate for the uploaded media during the upload process, instead of lazily creating these on-the-fly on access.

Once you click on the “Edit” button you will get a pop-up with some options:

Resize & Crop: We can put whatever size we want here and select the mode: scale, crop, fit, fill, etc. I will leave it with Scale, a 250px width and blank height (so it gets adjusted automatically to keep the aspect ratio)

Format & shape: Here I’m not going to set anything special, you can play around with these options. I’d prefer not to transform any Corner radius or something like this, because you can do it later without transforming the original one.

Look & feel: Same as above. You can apply some cool effects like Blur, Grayscale, Colorize, Sepia, etc.

Click Ok and then go to Add Eager Transformation. Here you will have same options as Incoming transformations. Let’s put some bigger width here like 500px.

Once you finish, click “ok”. And click “Save” in the right corner above. And that’s it for our account!

Time to write some code!

First, let’s create our app

npx create-react-app react-image-app

Then go to that folder with the “cd” command and run “yarn start” or “npm start” (You don’t need to use “npm run start”)

This will start our development server.

You can get rid of everything inside App.js and leave it like this:

Then, we can create a new component called UploadImage.js (You can create a component folder inside src/ and put it there)

What we need to do now is import our new component on our App.js

(That’s all for our App.js)
Our app will look like this:

Pretty ugly isn’t ?

We can add some basic styles using styled-components.

If you don’t know what Styled Components is:
Is a CSS-in-JS framework. It uses tagged template literals in JavaScript and CSS to provide you the ability to write CSS to style react components.

So, stop your dev server and run:
npm install — save styled-components

Once finished we have to:

Import styled-component in our component to use it
Create two styled elements one is a FormContainer and the another one is a FormElement
Then use them in the layout

Looks somewhat better!

If you want to know more about Styled Components you can visit the official site, it has a great document section! https://styled-components.com/

Now let’s keep improving our UploadImage.js component

Next steps:

Add onChange listener to the input file
Create a new method called handleOnChange uploading the image
Log upcoming data from Cloudinary

Let’s check the data coming from Cloudinary!

We received a bunch of data here. The important ones for us are:
secure_url for the incoming transformation and eager that can be an array of eager transformations in this case we have only one.

Now let’s update our component state and the layout to use these images:

Import useState hook from react
Create uploadedImage and isLoading for the state
Check if loading, we show a loading message to the user.
Then once the images are ready we show that to the user.

It’s working!

Yay!

That’s all! Now you have simple image management for your projects, using an amazing tool like Cloudinary.
This is only the basics, Cloudinary has a bunch of cool features there!

If you want to take a look to the repo, here’s the url: https://github.com/matias220510/image-upload-cloudinary

And if you like my content please follow me on Twitter: Matias Arabolaza

Do you like Nuxt and Cloudinary? Well, Maya Shavin wrote an amazing article about Image optimization using her new Cloudinary Nuxt Module.
Don’t wait a minute to check this out: https://www.mayashavin.com/articles/images-optimized-cloudinary-nuxt
Twitter: Maya Shavin

If you have any questions, please ask in the comments and share if you like it!

Resources:
https://cloudinary.com/documentation/javascript_image_and_video_upload

How to be productive working from home

Matias Arabolaza — Tue, 28 Jul 2020 11:26:31 +0000

Work from home is everyone’s dream. The illusion of having entire control of the time, responsibilities, and freedom is something that many want. But while some people adapt quickly, others struggle and decrease their productivity.

In my career, I had the experience of working both in office and from home; Something that gave me a very good picture of these two way of working.

With the current situation of COVID-19, many people and companies were forced to implement WFH (Work from home) practically overnight, without having the necessary infrastructure or the right culture.

Furthermore, many companies were totally unprepared for this and had to take on this challenge. People in confinement are experiencing moments of uncertainty and fluctuation in mood and emotions, which can directly affect their productivity.

I want to bring you 10 tips that will help you cope with this stage in an easier way:

1 — You have to work:
Yes, although this sounds too obvious, many people confuse working from home with barely working.

This has to do with the freedom that this mode offers to us, the idea that no one “sees” us and having our own schedules, working little or nothing, can be tempting. But beware, companies don’t take remote working lightly.

There is nothing better than mentalizing yourself and starting the day with all the desire, that at the end of the day, working, the mind is busy and the day goes super fast :).

2 — Eat that frog
While ago on a trip to NYC, looking for a book that talks about productivity, procrastination and effectiveness, I read “Eat that frog” by Brian Tracy. The book focuses on a saying that says:

If the first thing you did would be to eat a live frog first thing in the morning, nothing worse could happen in the rest of the day.

In practical terms, these frogs would be the task we have been delaying for a while.

Having identified these tasks, we will realize that they are the most impact on our day or our work week.

Let’s imagine examples: That meeting that is postponed day after day, that task that you don’t want to face because it is scary, that email you have to answer that is impossible, that course that you won’t be encouraged to start, etc.

It doesn’t necessarily have to be something that takes a lot of hours. Sometimes they can be tasks or things that don’t take soo long, but they’re tasks that have a big positive impact on us.

3 —Beware of procrastination
Procrastination, the art of delaying things. Procrastinating is leaving things for “later” or “never.” It’s one of the things that point number 2 tells about.

In the internet there are thousands of articles, hundreds of books and videos that tell us about the subject, since it can be very difficult for many people. And of course, this directly impacts our productivity.

Is necessary procrastinate? What is what truly makes us dilate the time? I encourage you to read more about procrastination.

4 — Use techniques to control your times
While working in the office as well as at home, reading a little about productivity and how to be effective in both areas, I found some techniques that could help you improve your productivity. Among all the ones I saw, I’ve chosen two of them: Pomodoro and Rest budget.

“Pomodoro” technique:
Consists of dividing our working time into 30-minute sessions and 5-minute breaks. These sessions are called pomodoros. When the four pomodoros are reached, a 20mins break is made.

For this, there are desktop applications, mobile apps, and we can even do it manually with a timer.

“Rest Budget” technique:
The Rest Budget technique consists of having a “time” budget for rest. Unlike the Pomodoro technique, we’re going to be responsible for managing that budget. This technique is much more flexible than the Pomodoro one.

First thing we need to do:

Define the time to work, for example, 8 hours.
Defining the time to rest from those hours, for example, 1 hour.

Every time we take a break, we put a timer, and we reduce that time from our budget.

This technique has a little more flexibility, since it doesn’t “tie us” to 5 minutes breaks, but is based on what we need at that time.

5 — Set your work environment
Setting your environment to work will make your day to day easier. Also, it will prime you to start your workday in an environment dedicated exclusively to that. The armchair, is not a good place to work all day, it is, to take a short break or change places from time to time. But having your workplace is going to help you focus and be able to work quiet without distractions.

6 — Have a schedule
Set up your routine. Having a schedule to respect, is going to be that you have a much more defined structure in your day. Believe me, it’s tempting to get up 5 minutes before working, but it’s not the best way to start the day.

7 — Visibility
Even if we work standalone, in the case of being freelance, we will always have a team to respond to (our project colleagues, the client, etc.). The best thing we can do is give visibility about what we are doing and how we are moving forward, what is blocking us and what we need from others.

How do we do this?

Let the team know you have a break or go for a walk. We’re going to eat. If we have meetings. Today many tools like Outlook, Slack, Skype, let us see the calendar and status of each person. Don’t be afraid to use these features.

8 — Breaks
An important part of our day are our breaks. Although in many moments we go into flow mode (so much inspiration that we can’t stop working), we have to take a break. For this, our pomodoro tools or rest budget will help us.

9 — Environmental changes
Throughout the day we will get tired of our posture or environment. Taking advantage of every corner of our home is key to having a change of light, air and position. That’s why it’s recommended to have a “base” place to work most of the time, but it’s also good to spend some time in the armchair, garden, outside or where we think it’s convenient.

10 — Avoid distractions
A great ally of procrastination is distractions. Techniques to control your times are going to help at this point. But you also have to prepare your environment to cover these risks.

For that reason, try not to have the cellphone around when you work. Notification sounds, even if you put it on vibrate mode, will make you want to check it and know what’s going on.

Avoid having social networks open all the time, WhatsApp, news. Any of those things are going to distract us and make us lose focus on what we were doing. Don’t be tempted by “just look and don’t answer” because most of the time that triggers major distractions and you can lose between 20 and 30 minutes of your day.

Conclusion:
Many of these points deserve an article on themselves, but in a very short way these tips will help us to keep us productive in our working hours from home and also in the office!