teleren/devto huggingface dataset:
Shopify Hydrogen Introduction
Tags: headless, shopify
Published: 2022-01-12 21:59:46

---
title: Shopify Hydrogen Introduction
published: true
description: Shopify Hydrogen introduction to take the right business decision, native or headless.
tags: headless, shopify
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2km4sx8n88tebnovx8j.png
canonical_url: https://rafaelcg.com/blog/shopify-hydrogen-introduction
---

Headless is the new method to give you the freedom to apply customizations needed in an easier way. This [Shopify Hydrogen](https://hydrogen.shopify.dev/) introduction shows how to analyze this solution to your business.

If you want to learn how to code using Shopify Hydrogen, check out my [Shopify Hydrogen development course](https://rafaelcg.com/course-shopify-hydrogen-developer-2022) helping you to get a layout from Figma and create a theme ready for production.

Before Hydrogen, we had some alternatives of using Headless architecture, you can check them in my previous article [Enterprise Shopify headless architecture](https://rafaelcg.com/blog/strategy/enterprise-shopify-headless-architecture/).

## What do you need to know?

Before deciding to use Shopify Hydrogen you will need to challenge yourself about the business model you need. Try to start with these questions:

-   Do I have enough technical guidance and strategy?
-   What are the trade-offs?
-   Why I can't use Liquid instead?
-   Could I add Hydrogen in a future implementation instead of the current phase?
-   My time is ready to start the new development stack?

After having these initial analyses your company will be able to measure the main points to make the right decision.

## How it's different from a traditional store?

Your traditional store involves less code, less cost of maintenance and more limits, Shopify Hydrogen has more flexibility and more cost of ownership too.

Your team might be very good at coding a traditional store and struggle to code this new Shopify headless model. Below you see the development stacks required for each store.

### Dev stack -- Shopify Store 2.0

-   HTML
-   CSS
-   JS
-   Liquid

### Dev stack -- Shopify Hydrogen

-   HTML
-   CSS
-   JS + React
-   APIs

Thank you for reading this article, I hope you liked, are you're working with Hydrogen too?

[<img alt="Course Shopify Headless with Hydrogen" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arvuabf7iihl8o66x8eh.jpeg">](https://rafaelcg.com/course-shopify-hydrogen-developer-2022/)
Phoenix Store ( Ecommerce Store Built with MongoDB, React.JS, Express and Node.js)
Tags: atlashackathon, react, webdev, mongodb
Published: 2022-01-12 21:42:28

### Overview of My Submission

Below is the project link to the Github repository
[phoenix_Repo](https://github.com/RahmanC/phoenix-commerce
)

### Submission Category: 

E-Commerce Creation


### Link to Code

Please click the below link to access the E-Commerce platform
[Phoenix Store](https://phoenixcom.herokuapp.com/)

### Additional Resources / Info


Below are some screenshots from the platform

> Landing Page
![Landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o03khi7xrkswemavneu9.png)
 

> Product Category Page
![Product Category](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrtcqvfss4u2u9bxjorc.png)
 

> Search Result
![Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2b4cr81yx7wa7av5m6yc.png)
 
 
> Back Order for Out-of-Stock items
![Back order](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nv6ibzlkco1xl7u52tay.png)
 

> Products Review and Related Products
![Product Review](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6d7c392dk6bkehn0mkv.png)
 
 
 
The name of the project's contributor is included below.
@tylerjusfly
Contact Form API (TypeScript/NestJS) Submission for the Atlas Hackathon
Tags: atlashackathon, nestjs, typescript, mongodb
Published: 2022-01-12 21:39:09


### Submission Category: 

Action Star

### Link to Code

[GitHub Repo](https://github.com/ddgroleau/contact-api)

### Additional Resources / Info

This project is a web API designed to support a common contact form. The form user will receive an email acknowledgment upon submission of the form, and the form owner will receive an email with the contents of the form. These actions are performed by a MongoDB Realm trigger.

Built with TypeScript, NestJS, MongoDB, and containerized with Docker.
Pizza Delivery App
Tags: atlashackathon, react, node, mongodb
Published: 2022-01-12 21:30:32

### Overview of My Submission
This app is pizza ordering app. You can browse through different pizzerias from my favorite local pizzerias. Goal of the app is to order your selected pizza easily and quickly.

### Submission Category: 
E-Commerce Creation

### Link to Code
GitHub repository - frontend: https://github.com/eruj22/pizza-delivery
GitHub repository - backend: https://github.com/eruj22/pizza-delivery-backend
Working demo: https://pizza-delivery-33.netlify.app/


### Additional Resources / Info
Technologies used:
-	ReactJS
-	NodeJS
-	mongoDB
-	Atlas Search
-	Stripe

#### Overview of the app
Let's start with the backend. NodeJS backend is connected with mongoDB. There are 3 collections:
-	Orders: finished orders
-	Pizzas: information about each pizza
-	Pizzerias: basic information about pizzerias

I also implemented search option. It is made for the pizzas collection and you can search for pizzas name and ingredients. The backend is deployed to Heroku. I have used free option so some users can wait for the dynos to wake up. Well, it's free, you can't argue with that.

So, when the app finally starts, you will see home page. There you can select from 3 pizzerias. After clicking on one, you will see all the pizzas that it offers. You can freely select which one you would like and in modal select its size. You can see your selected pizzas on the right side.
![Single pizzeria page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igblve66lj1qryfkvagl.png)
 
When you click order items you are navigated to the checkout page. There you have a form to fill with inputs validated. In the payment section you have option to pay with cash or card. When you choose with cash, you can submit form and pizza should be on its way to you. When you choose card, you need to input credit card number (it's in testing mode). I have used stripe CardElement for displaying card payment element. 
![Checkout page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g77kwj3k8bv0r06pqclj.png)

When your inputs are all correct and you submit your order, then you are navigated to the success page. It informs you that your order was successful. All the information about it is sent to the mongoDB collection named orders.

One more thing to note. When you are in selected pizzeria page and you navigate to another page, your selected pizzas are deleted. This is because you can't order from many different pizzerias at the same time. 

Last but not least, the search function. It has been there the whole time, hiding in the navigation section. When you input at least 2 letters the autocomplete function is activated (presuming you tried to write pizza name or some ingredient). When you submit the searching term you are navigated to the search page, where you can see all the results. It is using mongoDB search option for the collection of pizzas. 
![Search page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqz2jft8k4q1houcwaug.png)
 
If you have any additional questions or improvements, write a comment down below.
Compound IDs When Importing Existing Infrastructure Resources With Terraform Import Command
Tags: terraform, iac, newrelic
Published: 2022-01-12 20:59:12

Quick tid bit gotcha I found when I was attempting to import an existing New Relic alert condition.

The usage is like so:
`Usage: terraform import [options] ADDRESS ID`
Reference: https://www.terraform.io/cli/commands/import

Documentation noted above states the following concerning the "ADDRESS ID" that one has to pass when attempting to import an existing resource. 

> ID is dependent on the resource type being imported. For example, for AWS instances it is the instance ID (i-abcd1234) but for AWS Route53 zones it is the zone ID (Z12ABC4UGMOZ2N). Please reference the provider documentation for details on the ID format. If you're unsure, feel free to just try an ID. If the ID is invalid, you'll just receive an error message.

I knew that for a given alert in New Relic, there is an associated unique ID value which can be had from the New Relic UI. (See below for example)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uk68h3wnawq10s62y3of.png)

So after you have added the terraform code to create the alert as if you were we were wanting to create it and it did not exist yet (see reference noted above), I attempted to simply use that ID value captured from New Relic UI, in the `terraform import` command:

`terraform import newrelic_nrql_alert_condition.nameofexistingalert 123456789`

But that failed with this:

`Error: compound ID item count cannot be less than expected default ID item count: [123456789]`

Here is where I googled the error and could NOT find any good documentation.

So I went to the terraform state file to look at an ID for another alert that was already in the state file and I found this for the ID in the json file:
`id": "98765432:123456789"`

There are two values that are used in terraform for the ID of an New Relic alert. The policy id and the alert id.

Seeing that and then looking at the documentation (again, noted above), I came up with this.

```
❯ terraform import newrelic_nrql_alert_condition.Streaming_Service_Disconnect 98765432:123456789:static
newrelic_nrql_alert_condition.Streaming_Service_Disconnect: Importing from ID "98765432:123456789:static"...
newrelic_nrql_alert_condition.Streaming_Service_Disconnect: Import prepared!
  Prepared newrelic_nrql_alert_condition for import
newrelic_nrql_alert_condition.Streaming_Service_Disconnect: Refreshing state... [id=98765432:123456789]

Import successful!

The resources that were imported are shown above. These resources are now in
your Terraform state and will henceforth be managed by Terraform.

Releasing state lock. This may take a few moments...
```
Qadha'a Reminder Telegram Bot
Tags: atlashackathon
Published: 2022-01-12 20:59:02

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission

Greetings, we are from the team called Maggi KawKaw! For our submission, we created a Telegram Bot using python-telegram-bot as a Qadha'a Reminder! Qadha'a is something that Muslims must do when they skip a prayer. It is like replacing the prayer at a later time. However, we sometimes lose track of how many replacements we need to make or which prayer that we skipped over. Hence, we created this bot on Telegram to help users keep track of their prayer replacements and the amount of them needed. For the backend, we use MongoDB Atlas. The data of the user as well as how many prayers they missed or replaced is stored on the database. Some of the main functions are also locked and needs the user to be registered(using a bot command) and logged in to use. This is for the privacy of the user. However, one Telegram account can only create one user for this bot. 

To use this bot:
1. Open Telegram
2. Search for Qadhaabot and click on it
3. Press Start

### Submission Category: 

Choose Your Own Adventure


### Link to Code

The code for this Telegram bot is here {% github https://github.com/firdauskotp/Qada_Reminder_Bot %}. However, the bot token and MongoDB credentials were censored


### Additional Resources / Info

The official python-telegram-bot documentation can be read from [here](https://python-telegram-bot.readthedocs.io/en/stable/)

Here are some screenshots of the bot

1. Start

![Start command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fhc2g9sei10xv04pot9.PNG)
2. Qadhaa(Replace)/Remove (Replaced already)/Total

![Some main commands](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6duh0ceve2r31om08zy0.PNG)
3. Help

![Help command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzwro7htlny51f6krxbw.PNG)
4. Logout

![Logout command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wf2u6rauwyvo8cdjs87a.PNG)


Here is a video on how the bot works

{% youtube https://youtu.be/5nGsMJvr-Lo %}


There are 5 people in my team including me. However, most of them do not have a DEV account

Some of them are [nasyraf97](https://dev.to/nasyraf97), [afiqhusin](https://dev.to/afiqhusin)
How to push changes to Production
Published: 2022-01-11 10:59:57

Git amend

     git commit --amend 

Create Branch

    http://open-ci.mmt.com/view/DVOP/job/DVOP-Branch-Creation/

Check Branch

    git branch

Git commit

    git commit -m "RAILS-1483 CLUSTER CACHE"
    
Git Push

    git push origin HEAD:refs/for/___branch_name_______
    

Once the gerrit link is generated ask for peer review and recieve a +2 on the same 

Open jenkins to check the status by clicking on the link that got generated after +2

Then go back to ide


    git pull origin __Branch__Name__

Check out to integration and take a pull

    git checkout integration
	
	git pull origin integration



Merge your changes to integration


    **git commit -m "RAILS-1483 CLUSTER CACHE"**
**`git merge --no-commit --no-ff origin/fb_branch_name`**



Git push in integration

     git push origin HEAD:refs/for/integration


Open the gerrit link that got generated

Scroll down till you find the docker image link

Now open any one 

    http://ecs-jenkins.goibibo.com/job/~~gotrainspp~~/
    https://ecs-jenkins.goibibo.com/job/~~gotrainspp1~~/

Click build with parameters and Enter your image 

Click on build enter name like `integration-1456`

Now test whatever changes you did on prodpp environment

Once done Do

    git checkout release
    git pull origin release
    git pull origin release

Now do git merge

     git merge --no-commit --no-ff origin/fb_branch_name
	 git status

Do git commit 

     git commit -m "RAILS-1483 CLUSTER CACHE"

Do git push for production

      git push origin HEAD:refs/for/integration

Make your jira ticket dev complete and deployment ready

![enter image description here](https://i.ibb.co/w4Nn7Lh/Screenshot-2022-01-11-at-4-23-09-PM.png)

Make 2 tickets for deployment 1 for ECS and other for Kubernetes

like

http://jira.mmt.com/browse/RAILS-1483?jql=assignee%20%3D%20currentUser()%20AND%20resolution%20%3D%20unresolved%20ORDER%20BY%20priority%20DESC%2C%20created%20ASC

Once created 

Send those urls to be approved by the manager 

Once approved it'll be deployed on EDGE and will be live 

>  - [x] No thing in this blog is confidential or have any sensitive info
Temperature Sensing with Raspberry Pi into Mongodb
Tags: atlashackathon
Published: 2022-01-12 20:24:14

### Overview of My Submission
Manual labor and monitoring on water quality affected the mortality of the fishes.

Fixed location sensors are installed to multiple fish ponds for water quality monitoring and optimal predictive maintenance scheduling.

The potential outcomes: A smart fish pond monitoring system to produce good quality fish and aquatic plants.

Our PoC was built purely based on temperature sensor only (later we can add more sensors, like electrical conductivity (EC), dissolved oxygen (DO), pH, salinity, carbon dioxide, ammonia, nitrite, hardness, turbidity and biochemical oxygen demand (BOD) of water). 

Temperature is an important water quality parameter. It can affect fish and shrimp metabolism, feeding rates and the degree of ammonia toxicity. Temperature also has a direct impact on biota respiration (O2 consumption) rates and influences the solubility of O2 (warmer water holds less O2 than cooler water).

### Submission Category
Prime Time + Choose Your Own Adventure

### Link to Code

{% github kafechew/rpi-temp-mongo-ts %}

### Additional Resources / Info

**Raspberry Pi Zero 2**

![Raspberry Pi & Temperature sensor](https://i.imgur.com/9uMZ8OB.jpeg)

**DS18B20 Temperature Sensor (Waterproof)**

![DS18B20 Temperature Sensor](https://i.imgur.com/9ml8Co1.jpeg)
![DS18B20 Temperature Sensor](https://i.imgur.com/YAEm3hK.jpeg)
![DS18B20 Temperature Sensor](https://i.imgur.com/6Gs2Jjw.jpeg)

**Python**

![Python](https://i.imgur.com/aF3QL96.jpeg)

**Mongodb Atlas**

![Mongodb Atlas](https://i.imgur.com/dgaXy9e.jpeg)

{% youtube ncLIKKiMYoU %}

**Meteorjs & d3js**

![MeteorJS & D3.JS](https://i.imgur.com/U3W1G1o.jpeg)

### Additional information at the request of participants

We help smaller Critical Industries to build a custom industrial automation system 200x faster, with 1000+ pre-built templates based on our 10 years experience in supply chain management.

* [LinkedIn - Kai Chew](https://www.linkedin.com/in/kafechew/)
* [Descriptive, Predictive & Prescriptive Analytics: Port Operations Case Study](https://www.linkedin.com/pulse/descriptive-predictive-prescriptive-analytics-port-operations-case-/)
* [Youtube Video](https://www.youtube.com/watch?v=ncLIKKiMYoU)
* [Get your hardware here with RM 10 coupon](https://my.cytron.io/referral?referral_id=81802146507541)
Use Bootstrap Pagination with Laravel 8
Tags: laravel, bootstrap, webdev
Published: 2022-01-12 20:46:12

If you are using [Laravel 8](https://laravel.com/docs/8.x) for your application and want to use [bootstrap](https://getbootstrap.com/docs/4.6/getting-started/introduction/) pagination instead of the default one. Then we need to add the `Paginator::useBootstrap();` in `boot` function in `AppServiceProvider` file.

You `AppServiceProvider` file should look like this:

```php
<?php

namespace App\Providers;

use Illuminate\Pagination\Paginator;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Paginator::useBootstrap();
    }
}
```
After this, your application pagination will use [bootstrap](https://getbootstrap.com/docs/4.0/components/pagination/) pagination look and feel.
Simple Book Finder Application using MERN Stack
Tags: atlashackathon
Published: 2022-01-12 20:45:53

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)

### Submission Category: 

 Choose Your Own Adventure


### Link to Code

{% github https://github.com/SantamRC/BookFinder %}


### Additional Resources / Info

## ScreenShot

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zeh8b9r1edlzegpnon3.png)
Components search by Bit
Tags: javascript, webdev, programming, react
Published: 2022-01-12 20:36:13

Components search by Bit is extremely powerful. Being able to search across all your components, narrow it down to just one org but still search across all scopes in that org, find the component you are looking for and then install it in your project

Mind-blowing and it is so fast. Really love what Bit is doing. So many cool things. Make sure you sign up to get access.

Check out the video I made here:

https://www.linkedin.com/posts/nitsan-cohen_webdev-components-javascript-activity-6887018727347367937-PGI3
All-Inkl: Halbherziges WordPress Hosting vom Hoster der Herzen
Tags: wordpress, hosting
Published: 2022-01-13 16:48:45

---
title: All-Inkl: Halbherziges WordPress Hosting vom Hoster der Herzen
published: true
date: 2022-01-12 20:24:58 UTC
tags: WordPress,hosting
canonical_url: https://bloggerpilot.com/allinkl/
---

![All-Inkl Hosting](https://bloggerpilot.com/wp-content/uploads/2022/01/all-inkl-desktop.png)

Bei einer passenden Überschrift zu All-Inkl musste ich ehrlich gesagt...

Der Original-Artikel erschien auf [All-Inkl: Halbherziges WordPress Hosting vom Hoster der Herzen](https://bloggerpilot.com/allinkl/).
MongoShare - Share Code
Tags: atlashackathon
Published: 2022-01-12 20:15:18

### Overview of My Submission
MongoShare helps with sharing your code. Users can share the code with others through a link, and the code would be editable with a password created by the author.

MongoShare uses the MongoDB Atlas as a database and Next.js as a frontend.

### Submission Category: 
Choose Your Own Adventure

### Demo Link :- https://mongoshare.vercel.app/

### Link to Code
{% github https://github.com/RajvirSingh1313/MongoShare %}

### Additional Resources / Info
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1ptv4ef8clkp6s6b2wy.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10xvgen29jvkdnt4glpy.png)
  

I want to thanks the open source community for making my life easy. I also want to thanks the Dev.to and MongoDB for hosting this hackathon.
AtlasHackathon - A Quiz API using MongoDB and FastAPI
Tags: atlashackathon, python, mongodb
Published: 2022-01-12 20:06:47

I created this application to take part in MongoDB Atlas Hackathon.

### Project Idea
I wanted to create a quiz API. The API allows to create quizzes and subsequently also to submit a quiz and calculate the achieved points. Quizzes can also be tagged with categories (e.g. fun, programming, general knowledge etc.).
The API also includes authentication using OAUTH2, the user data as well as all other data is stored in the MongoDB cloud atlas database.

Core functions at a glance: 
- Authentication/ Authorization using OAuth2
- CRUD Operations for quiz categories
- CRUD Operations for quizzes
  - Including Quiz submition and calulating the total and reached points 
- Also, the project is fully covered by unit tests

### Overview of My Submission
This project was built on top of the following tech-stack:
- Python 3.9
- [FastApi](https://fastapi.tiangolo.com/)
- [MongoDB Cloud Atlas](https://www.mongodb.com/cloud/atlas)
- [MongoEngine](http://docs.mongoengine.org/index.html)

You can test the API with the included [Postman collection](https://github.com/manukanne/cloudatlas-quiz-api#executing-program): 
![Postman Collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8j0j6gypuea83uo8bp7o.png)

Before using the collection, please create a Postman environment:
![Postman environment configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7vh03sgiciwa3fg13ci.png)

- api_url: URL to the API
- username: email of your user
- password: plain text password of your user

After this step the Access Token can be obtained:
![Optain access token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mvjxougtwviw53ftlo1.png)

Alternatively, the API can also be tested with the built-in [Swagger UI](https://fastapi.tiangolo.com/features/#automatic-docs):
![FastAPI Swagger UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6uykg9u3hhpxh68zfeu.png)
The docs are available at this link: {host}:{port}/docs
 

After that: Have fun :)

For more details, please read the [README.md](https://github.com/manukanne/cloudatlas-quiz-api/blob/main/README.md)

### Submission Category: Choose Your Own Adventure


### Link to Code
{% github manukanne/cloudatlas-quiz-api %}

### Additional Resources / Info
- [Architecture Patterns with Python](https://www.oreilly.com/library/view/architecture-patterns-with/9781492052197/)