DEV Community: Anthony

Get information from Stripe API with no server

Anthony — Tue, 06 Oct 2020 08:58:10 +0000

Hello,

I just published a live coding session part of a project I'm working on.

In this video, I go through the steps to integrate Stripe Checkout and extract information from the Checkout session to display a confirmation page based on the Stripe product created.

What is the best library to capture international phone numbers?

Anthony — Thu, 01 Oct 2020 04:15:17 +0000

I recently integrated http://intl-tel-input.com/ to capture international phone numbers (you can see the live stream here).

I'm not 100% satisfied with this library. Do you know other libraries that do the same job?

Tailwindcss discovery and integration of international phone numbers

Anthony — Thu, 01 Oct 2020 03:35:41 +0000

Hello,

I published a new video and integrated a new website using Tailwindcss. My application also needs users to give their phone numbers, so I decided to use https://intl-tel-input.com/ with more or less success.

Feel free to give your feedback, and please, if you have some recommendation on how to improve any of that, please share :)

Part 1: https://dev.to/antho1404/stripe-checkout-setup-and-integration-33ic

Stripe checkout setup and integration

Anthony — Mon, 28 Sep 2020 06:32:25 +0000

Hello,

I just published a live coding session that I recorded to integrate Stripe into a website.

I'm focusing on a specific tool of Stripe called Checkout.

I'm just starting with Live coding, so feel free to give me feedback on how to improve that :)

Encoding mess with Javascript

Anthony — Tue, 14 Jul 2020 16:14:11 +0000

Today, I launched a new feature on a product I'm working on, letting you deploy a cloud function quickly. (Not the subject but if you're interested it's here).
Like any launch, there are always some last minutes issues, and I discovered something interesting.

I was trying to transfer data from one page (the landing page) to another one (the console). These data contain the content of the function you want to deploy so, a lot of characters like ", {, (... that's where it gets funny.

The encoding was done with the following flow:

The landing page stringifies the object with JSON.stringify
Convert in base64 of that with btoa
Encode for URL with encodeURIComponent
Redirect to the other website with result in the query of the URL
The other website decode decodeURIComponent
Decode again with atob
Extract the object with JSON.parse

So far so good. We should have:

const data = {...}
const encoded = encodeURIComponent(btoa(JSON.parse(data)))
// other website
const decoded = JSON.parse(atob(decodeURIComponent(encoded)))
data === decoded

But no...
Some characters like > (used to define an arrow function) are messing up with the encoding, and it is impossible to recover the data (more details here).

So if you already had this issue here is a sweet fix:
You can add another encode/decodeURIComponent before the atob/btoa call.

So now your flow would be:

The landing page stringifies the object with JSON.stringify
Encode the string with encodeURIComponent
Convert in base64 of that with btoa
Encode for URL with encodeURIComponent (not entirely necessary as base64 is already URI compatible but good to have anyway)
Redirect to the other website with result in the query of the URL
The other website decode decodeURIComponent
Decode again with atob
Decode again with decodeURIComponent
Finally, extract the object with JSON.parse

So that would be equivalent to:

const data = {...}
const encoded = encodeURIComponent(btoa(encodeURIComponent(JSON.parse(data))))
// other website
const decoded = JSON.parse(decodeURIComponent(atob(decodeURIComponent(encoded))))
data === decoded

Now the data can be decoded with the right content 🎉

I struggled a bit today about that, so I thought I would share it. If you have any ways to do that properly, I would love to hear your feedback, and if you want to try to break it again, you can do it here https://liteflow.com/functions.

Build an email service with Liteflow

Anthony — Thu, 04 Jun 2020 11:52:40 +0000

Today we will learn how to create and use a Liteflow service that sends emails using SendGrid.

Create the Liteflow Service

It's time to create our Liteflow application with its first service. Open a terminal and run the following commands:

npm I -g @liteflow/cli
liteflow init service-email-sendgrid-tuto
cd service-email-sendgrid-tuto
liteflow service:init services/email --template javascript

You will now have a new directory services/email with the boilerplate of a service.

Send emails through a task

Let's define the task we want to create in the liteflow.yml file (in your services/email directory).

Configure your service

This service will use Sendgrid to send emails and require the Sendgrid library and a Sendgrid API key. You can add the variable SENDGRID_API_KEY as env of your service.

The services also define a task called send responsible for sending an email. This task has the following inputs/outputs:

Inputs:

from (String): the account to send the email from
to (String): the recipient of the email
subject (String): the subject of the email
text (String): the text of the email

Outputs:

status (Number): status of the sent email

With the configuration and the send task, your liteflow.yml should look like:

name: sendgrid-service
configuration:
  env:
    - SENDGRID_API_KEY=
tasks:
  send:
    inputs:
      from: { type: String }
      to: { type: String }
      subject: { type: String }
      text: { type: String }
    outputs:
      status: { type: Number }

Continue the tutorial here > https://blog.liteflow.com/2020/06/04/send-emails-with-sendgrid/

Create Cloud Functions with the new HTTP Endpoint feature

Anthony — Fri, 22 May 2020 15:24:46 +0000

With Liteflow we just released a new really cool feature to help developers build simple Cloud Functions while having the possibility to orchestrate the different tasks, all triggered by a "classic" HTTP endpoint to connect webhooks or anything you want.

We are still in beta so we would love feedback from developers to see how we can improve even more this product :)

Check out why we are excited about this feature and how to use it here > https://blog.liteflow.com/2020/05/22/http-trigger/

Vuepress and Firebase Analytics

Anthony — Wed, 13 May 2020 02:27:19 +0000

Here is a post to describe how to integrate Firebase analytics into a Vuepress website.

Firebase analytics simplifies your analytics with only what matters, acquisition, retention, growth so you can focus on what is relevant.

Vuepress is a great tool that generates a static website based on markdown files so perfect for documentations of even blogs.

You can find more information on how to connect these two tools to get the best of each.

https://blog.liteflow.com/2020/05/11/vuepress-firebase-analytics/