Forem: Typeform

How I used Go to generate images for my dad’s meetups

Alba Rincón — Wed, 15 Jul 2020 06:20:11 +0000

I recently read a great article by Mat Ryer about programmatically generating images in Go and got inspired by it to solve a repetitive task I usually do every month.

My dad is the head of an organization called Projecte LOC that promotes reading to kids and adults in Cornellà de Llobregat, Spain. Once a month they organize a meet-up: either a literary dinner with a book author to talk about a book or a storytelling session. He usually asks me to create an image to illustrate the event and sends the details via email to all the members of the organization. The illustration looks like this:

It's quite annoying to do it every single month by hand, importing the image, aligning text, adjusting everything... I usually make mistakes copying the day, the time and the title from the email he sends to me. I end up re-doing it entirely after he finds typos/mistakes.

So when I saw Mat's article I immediately thought that I could do something to improve this tedious process both for myself and my dad. Wouldn't it be great to have something where he would enter a few variable data about the meet-up (title, guest, image and date) and I would programmatically generate the whole image?

I needed something really simple and user friendly for him to enter the info. That was an easy decision: Typeform. He's used to typeforms and I know the API really well, after all, I helped build it. Then, I would take advantage of Typeform webhooks to get the response details from the form submission, process the info about the meet-up, generate the corresponding image and provide a link for him to download it. 💪

1. Creating the Typeform 🛠

First, I created the typeform with all the fields that would change for each meet-up. Each field has a unique identifier called reference, which is useful to identify the fields on the response payload that we'll receive on the webhook. By default, this reference is a long alphanumeric string, but I modified it on the Create Panel to look a bit more human-readable so I could identify each answer quickly in the code.

Next, I created the webhook on the Connect Panel pointing it to an endpoint that will handle each typeform submission.

2. Handling the webhook ⚓️

2.1. Signature verification ✍️

When creating a webhook we are exposing the endpoint URL to the internet, which is not secure. Potentially anyone with bad intentions could request to it with any data. I wanted to be sure that I was only processing webhooks coming from Typeform, so I added a secret on my webhook configuration. Then, Typeform would use it to sign the webhook payload and add it as a header on the request.

To accept an incoming webhook request, the first thing the handler has to do is verify that Typeform sent it.

This is done with the verifySignature function that takes multiple parameters: the request body, the shared secret with Typeform, and the value of the Typeform-Signature header.

Then, it computes the signature for the received payload with the secret and compares the result with the receivedSignature.

func verifySignature(payload []byte, secret, receivedSignature string) (bool, error) {
    signature, err := computeSignature(payload, secret)
    if err != nil {
        return false, err
    }

    return signature == receivedSignature, nil
}

func computeSignature(payload []byte, secret string) (string, error) {
    h := hmac.New(sha256.New, []byte(secret))

    _, err := h.Write(payload)
    if err != nil {
        return "", err
    }

    return "sha256=" + base64.StdEncoding.EncodeToString(h.Sum(nil)), nil
}

If the comparison succeeds we are sure the request is coming from Typeform so the execution can proceed, otherwise, the handler stops and returns an error.

func generateHandler(w http.ResponseWriter, r *http.Request) {
    // 1. Read the request body
    body, err := ioutil.ReadAll(r.Body)
    if err != nil {
        w.WriteHeader(http.StatusInternalServerError)
        return
    }
    defer r.Body.Close()

    // 2. Verify the signature
    ok, err := verifySignature(body, os.Getenv(secretToken), r.Header.Get("Typeform-Signature"))
    if err != nil || !ok {
        w.WriteHeader(http.StatusBadRequest)
        return
    }

    // 3. The verification succeeded so we can process the webhook 🙌
    ...
}

2.2. Creating a Poster from the submission 🖼

At this point, we are sure the request is perfectly safe. The next step is actually reading and parsing the JSON body of the request and storing it somewhere. To do that, we create a variable of type Webhook and unmarshal the request body into it.

Next, we want to convert the Webhook into a Poster variable holding only the answers to each of the typeform questions. This will simplify the rendering task, we won't have to work anymore with a complicated Webhook struct with full of non relevant data.

func generateHandler(w http.ResponseWriter, r *http.Request) {
        // 1. Read the request body
      ...
        // 2. Verify the signature
      ...

        // 3. Parse the webhook from the request body
        var wh poster.Webhook
        err = json.Unmarshal(body, &wh)
        if err != nil {
            log.WithFields(log.Fields{"error": err}).Error("could not unmarshal webhook")
            w.WriteHeader(http.StatusInternalServerError)
            return
        }

        // 4. Convert the webhook data to a Poster
        p := wh.ToPoster()

        // 5. Generate the image
        ...

The ToPoster() function loops over the answers of the webhook using the reference attribute (that we previously set when creating the form) to identify to which poster field it corresponds.

type Poster struct {
    Title  string
    Guest  string
    Date   time.Time
    Time   string
    PicURL string
    Type   string
}

func (w Webhook) ToPoster() Poster {
    poster := Poster{}

    for _, answer := range w.FormResponse.Answers {
        switch answer.Field.Ref {
        case "title":
            poster.Title = answer.Text
        case "guest":
            poster.Guest = answer.Text
        case "date":
            date, _ := time.Parse("2006-01-02", answer.Date)
            poster.Date = date
        case "time":
            poster.Time = answer.Text
        case "type":
            poster.Type = answer.Choice.Label
        case "pic":
            poster.PicURL = answer.PicURL
        }
    }

    return poster
}

3. Generating the image 👩‍🎨

Finally we have our Poster ready to be rendered! 👏

func generateHandler(w http.ResponseWriter, r *http.Request) {
        // 1. Read the request body
      ...
        // 2. Verify the signature
      ...
        // 3. Parse the webhook from the request body
        ...
        // 4. Convert the webhook data to a Poster
        ...

        // 5. Generate the image
        err = p.Render()
        if err != nil {
            log.WithFields(log.Fields{"error": err}).Error("could not generate poster")
            w.WriteHeader(http.StatusInternalServerError)
            return
        }
}

Let's dive into the Render method. We will use the Go Graphics https://github.com/fogleman/gg rendering library to generate the final image.

func (p Poster) Render() error {
    ctx := gg.NewContext(width, height)

    err := drawBackground(ctx, "assets/images/background.png")
    if err != nil {
        return err
    }

    err = drawBackground(ctx, "assets/images/logos.png")
    if err != nil {
        return err
    }

    err = drawPicture(ctx, p)
    if err != nil {
        return err
    }

    err = drawText(ctx, p)
    if err != nil {
        return err
    }

    err = ctx.SavePNG("poster.png")
    if err != nil {
        return err
    }

    return nil
}

The poster always has a similar format with the same background and sponsors logos at the bottom, so that's the first part we will render with the drawBackground and drawLogos methods.

Drawing the picture poster is a bit more interesting since it's uploaded through the typeform and we don't really know the size it will have. In the Poster variable, we have the url of the picture. First we will download it to a temporary file with the [poster.Picture()](https://github.com/albarin/nit-del-llop/blob/master/pkg/poster/poster.go#L71) method, resize it to fit into the poster and position it in the right image coordinates.

func drawPicture(ctx *gg.Context, poster Poster) error {
  // Download the picture to a local file
    filepath, err := poster.Picture()
    if err != nil {
        return err
    }

  // Load it
    pic, err := gg.LoadImage(filepath)
    if err != nil {
        return err
    }

  // Resize it
    resizedPic := resize.Thumbnail(
        uint(pic.Bounds().Dx()),
        250,
        pic,
        resize.Lanczos3,
    )

  // Position and draw it
    contentWidth := ctx.Width()/2 - margin
    ctx.DrawImageAnchored(resizedPic, margin+contentWidth/2, 185, 0.5, 0)

  // Delete the temporary file
    err = os.Remove(filepath)
    if err != nil {
        return err
    }

    return nil
}

The only part left now is drawing all the info about the meet-up (title, guest, image and date) with the drawText method. The challenge here is making sure all the text lines fit in our image, since it comes from a user input we have no idea how long those lines could be. We need to change the font size depending on the length of the line.

To simplify the task we create an array of Line structs holding all the info of the poster. Each Line has the text to render, the margin to position it, the font name, and the default font size. If the font size is too big causing the text to overflow the image, it will be decreased until it fits.

func drawText(ctx *gg.Context, poster Poster) error {
    ctx.SetColor(color.White)

  // Lines with all the info to render
    lines := []Line{
        ...
        {
            text:      fmt.Sprintf(`"%s"`, poster.Title),
            marginTop: 290,
            fontSize:  45,
            fontPath:  RobotoBold,
        },
        {
            text:      "amb",
            marginTop: 25,
            fontSize:  25,
            fontPath:  RobotoLight,
        },
        {
            text:      fmt.Sprintf("%s", poster.Guest),
            marginTop: 20,
            fontSize:  45,
            fontPath:  RobotoBold,
        },
        {
            text:      poster.When(),
            marginTop: 35,
            fontSize:  45,
            fontPath:  RobotoLight,
        },
        {
            text:      poster.Where(),
            marginTop: 20,
            fontSize:  45,
            fontPath:  RobotoLight,
        },
        ...
    }

    contentWidth := float64(ctx.Width()/2 - margin)
    positionX := margin + contentWidth/2
    positionY := margin

    // Loop through each line adjusting the font and drawing it
    for _, line := range lines {
        err := ctx.LoadFontFace(line.fontPath, line.fontSize)
        if err != nil {
            return err
        }

        err = adjustFontSize(ctx, line, contentWidth)
        if err != nil {
            return err
        }

        positionY = calculatePositionY(ctx, line, positionY)
        ctx.DrawStringAnchored(line.text, positionX, positionY, 0.5, 0)
    }

    return nil
}

And we have our poster! We just need to save it as a PNG file.

func (p Poster) Render() error {
  // Draw everything
    ...

    // Store the poster in a file
    err = ctx.SavePNG("poster.png")
    if err != nil {
        return err
    }

    return nil
}

4. Downloading the poster ⬇️

Lastly, the most important part. You must be thinking how my dad is going to access this beautiful poster file and download it. 🤔Let me explain:

As you saw in the last step, we always save the image with the same name, so we know for sure that after the typeform submission, we'll have the poster available in the same path. We'll take advantage of that fact and create another handler on the /download endpoint that shows the poster on the browser.

func download(w http.ResponseWriter, r *http.Request) {
    image, err := os.Open("poster.png")
    if err != nil {
        log.WithFields(log.Fields{"error": err}).Error("could not open image")
        w.WriteHeader(http.StatusInternalServerError)
        return
    }
    defer image.Close()

    w.Header().Set("Content-Type", "image/png")
    _, err = io.Copy(w, image)
    if err != nil {
        log.WithFields(log.Fields{"error": err}).Error("could not write image")
        w.WriteHeader(http.StatusInternalServerError)
        return
    }
}

Now, we go back to our typeform Create Panel and add that link into the Thank You Screen button. With this setup, after the form is submitted, the Thank You Screen will be shown and we'll be able to download the poster by clicking on the button.

5. Deploying it 🚀

I wanted to practice my Docker skills a bit so I decided to use Docker and Heroku to deploy the application.

5.1. Dockerize it 📦

The first thing to do was to dockerize the app. I did it with a multi-stage build. In the first part, we are using golang:1.14-alpine image to build the app into a binary called poster. Then, in the second step we use the alpine:latest image to copy the binary from the previous stage and run it.

FROM golang:1.14-alpine AS builder
ADD . /poster
WORKDIR /poster
RUN go mod download
RUN CGO_ENABLED=0 go build -ldflags "-s -w" -o poster cmd/poster/*.go

FROM alpine:latest
RUN apk --no-cache add ca-certificates
COPY --from=builder /poster ./
RUN chmod +x poster
CMD ./poster

5.2. Deploy to Heroku

I choose to go with Heroku for the deployment, because they support Docker image deploy with their CLI app.

I created a free account and installed the CLI app. After that, creating the application was just logging in and running a simple command:

heroku create

As a result of that command a new app is created in our account and it displays a generated URL to access it.

Once your app is created, you need to tell Heroku which Docker file to use to run your app. We create a heroku.yml at the root of our application.

build:
  docker:
    web: Dockerfile

Finally, our app is ready to be deployed using git:

git push heroku master

Now that the app has been deployed. We can access the handler at https://{something}.herokuapp.com/download

The last step is to update our webhook and Thank You screen buttons to point to the new URLs. Now it works! 💥

I took the opportunity to change the design a bit, this is what it looks like now! 😁

Here you can find the full code: https://github.com/albarin/nit-del-llop

Thanks for reading, any comments or questions are welcomed 😊

Collect Addresses on Typeform using Algolia Places

Nicolas Grenié — Wed, 06 May 2020 20:16:41 +0000

During the last weeks as the world was getting under lockdown, many small businesses had to close doors and put their activities on hold. This was actually a new beginning for many business owners, as they were looking for opportunities to continue running their shops while respecting government measures and social distances.

At Typeform we've seen many initiatives to help digitalize small businesses, by providing for example interfaces to take online orders or do deliveries. From farmers in the mountains of Chamonix to a bakery in Barcelona, all stores were facing similar issues and were looking for simple solutions.

Typeform lets you create easily a visual "menu" where customers can pick what they want to buy. Typeform then calculates the price automatically and displays a credit card payment field using Stripe. Overall it's a very seamless process until you reach the part where you have to ask your customer for their address and where you should deliver the goods.

In most cases, it's done by asking a group of questions. Usually, you ask first the street, then the postcode and finally the city. But when it comes to addresses it's hard to be consistent as there are so many ways to write it. Especially right now when this typeform is shared with people that are not tech-savvy. This means business owners have to spend countless hours going manually to every single order a check if the address was correctly filled.

Unfortunately, we currently don't have native support in Typeform's product for an autocomplete address field. But as a Developer Advocate, I don't take no for an answer!

There has to be a better way! And this is where hacker spirit kicks in!

Algolia has been maintaining since 2016 a library called Places, doing exactly what we need. It's based on data from OpenStreetMap, and do autosuggestion as you type.

In this article, I will show you how you can connect it to your Typeform and collect accurate addresses.

Try it live 📺

If you want to get a preview of what we are about to build, check it out here

Enter the address of your choice, and you should be redirected to a typeform to order some good pizzas 🍕

Pre-requisites 🛒

A Typeform account, create one for free here
An Algolia Places account, get one for free here

Add Algolia Places to your project 📍

The good thing about this hack? We don't need any server-side code!
Everything could happen in a plain HTML page with a bit of Javascript.

Let's start by loading the library on our page.
Adds this at the bottom of just before </body>

<script src="https://cdn.jsdelivr.net/npm/places.js@1.18.1"></script>

In our page, we then add an HTML element that will be the autocomplete field.

<input type="search" id="address-input" placeholder="Where do you live?" />

Then we have to initialize the library and connect it to this field.

Add this snippet at the end of your page

<script>
      var placesAutocomplete = places({
        appId: "YOUR_APP_ID",
        apiKey: "YOUR_API_KEY",
        container: document.querySelector("#address-input"),
        type: 'address'
      });
</script>

Replace YOUR_APP_ID and YOUR_API_KEY by the values given in Algolia dashboard.

💥You should now have a functioning autocomplete field. Open your HTML page and try it out.

Customize the library 🖌️

Right now, our example auto-suggests addresses all over the world, but the library is very flexible. If you add countries: ['us'] for example it will only show addresses in the US.

I recommend you to check the documentation to customize it the way you want 😉

Listen to changes 👂

What is happening when the user has selected their address? At the moment nothing, because we haven't coded this part.

To do that we add an event listener to the placesAutocomplete object we created earlier. The Algolia Places library has many events available, but we are only interested by the change event. This event will be triggered every time the address selected changes.

In your code add the following lines:

placesAutocomplete.on("change", e => {
 console.log(e.suggestion)
})

Now you can restart your app, type an address, and select it. In your browser developer console, you now see the details of what's returned by the library.

🤩 That's a lot of interesting data formatted exactly the way we need, but we may just need a subset of it.

Let's prepare your typeform 👩‍🎨

Now that you've seen the potential of this library, you may have a better understanding of which type of data you want to use in your typeform.

For this example, we are going to pass address, city, postcode and country value only. To pass the data from our code to the typeform we are going to rely on Hidden Fields. Hidden fields are a way to pass data to a typeform by adding query parameters to its URL.

Your original typeform URL was:
https://picsoung.typeform.com/to/FWq00K

It's now going to be https://picsoung.typeform.com/to/FWq00K?address=xxxx&postcode=xxxx&country&city=xxxx where xxxx is the value extracted thanks to Algolia Places.

Let's now add hidden fields to your typeform. Click + and select hidden fields. Hidden fields are sitting at the top of your form and you can add as many as you want. Only the parameters declared as hidden fields will be passed to the results. You can also use hidden fields in the conditional logic, for example, to showcase that you don't do deliveries in certain postcodes.

Make sure it works by opening the URL of your typeform with hidden fields values put manually. Once you've submitted the typeform, in the Results panel you should see that the values have been passed and recorded correctly.

Link our code to the typeform 🔗

Now that we have the two pieces working independently, let's connect them together!

Construct the URL of the form 🏗️

As we saw we need to append query parameters to our Typeform URL.
In our code, add this snippet and replace YOUR_TYPEFORM_URL with your own typeform URL.

let typeformURL = "YOUR_TYPEFORM_URL";
let hidden_values = {
  address: `${e.suggestion.value}`,
  postcode: `${e.suggestion.postcode}`,
  country: `${e.suggestion.country}`,
  city: `${e.suggestion.city}`
};
let hidden_query = Object.keys(hidden_values).map((key)=> `${key}=${hidden_values[key]}`).join('&')
let completeURL = `${typeformURL}?${hidden_query}`

We create a hidden_values object with all the parameters we get from Algolia Places.
We then turn this object into a string so it looks like country=France&city=Paris... using a bit of ES6 magic to store it in hidden_query variable.
completeURL is then the concatenation of our original URL and the hidden values.

We now have two options, either we redirect the user to our typeform, or we embed it in our page.

Redirect ↪️

Redirection is the easiest thing, just after the previous snippet add this line in your code:

window.location = completeURL

And that's it, you are now redirected to your form and location data are passed as hidden fields.

Embed 🖼️

To embed your typeform in your page we will use our Embed SDK.

First, let's add the Embed SDK at the bottom of your page.

<script src="https://embed.typeform.com/embed.js"></script>

In the <body> of your HTML page you need to add an HTML element where the form will be embedded.

<div id="typeform_embed" style="height: 900px;width: 100%;"></div>

Give it the size you want by modifying the height and width properties.

Now we need to embed the typeform when we receive the change event from the Algolia library.

Just after the line let completeURL ... add the following:

const embedElement = document.querySelector("#typeform_embed");
typeformEmbed.makeWidget(embedElement, `${completeURL}`,
  {
    hideHeaders: true,
    hideFooter: true,
    opacity: 75,
    buttonText: "Take the survey!",
    onSubmit: function() {
      console.log("Typeform successfully submitted");
    }
  }
);

This piece of code loads the typeform with all the parameters and place it in the object with id typeform_embed.

Typeform's Embed SDK has a lot of features and you can personalize many things on the look and feel of the embed, we just went for the easiest path.

Note, the onSubmit function, this will be triggered when the form is submitted. This could be useful to hide the form after being submitted, for example.

You should now have a typeform appearing on your page after selecting an address in the field. And if you change the address it will update the typeform URL and embed it again.

Going further 🚀

With this hack, you are now collecting sanitized addresses from your customers when they are filling up a typeform. 🎉

You can personalize the settings of the Algolia Places library to restrict to certain countries or to a different type of address. The library even supports searching for airports!

You can also pass other types of data as hidden fields to your form. Like the latitude or longitude.

With a bit of CSS you can modify the look and feel of the search box and make it your own.

On Typeform you can now add some logic jumps to react differently depending on the locations data collected in the hidden fields.

I hope you liked this hack and found it useful.
Feel free to suggest some other ideas ;)

The complete source code is available on Glitch

Tutorial: Hacking a robot while respecting fundamental laws of robotics

Nicolas Grenié — Mon, 19 Aug 2019 18:43:45 +0000

This past week I got invited to attend Twilio Signal conference in San Francisco as part of their Champions program.

I had the chance to meet other awesome Champions at our Summit. You should all follow them, they are all doing amazing things in their communities all around the world. Find more about the Twilio Champions program over here.

The conference itself was full of great announcements around the Twilio eco-system. I am mostly excited by Conversations, as a way to connect many people uing different systems (SMS, WhatsApp, chat...) into the same conversation. The new Twilio CLI to do everything around Twilio directly in the terminal looks pretty awesome too.

Another big announcement at Signal was version 3 of TwilioQuest available on Desktop. If you are not familiar with TwilioQuest, imagine a video game where you gain XP points by solving coding challenges.
It's a fun way to learn about the Twilio world and programming in general.

Screenshot of TwilioQuest

The main character you interact within TwilioQuest, is named Cedric and is a friendly robot that is guiding you through your quest against the Legacy Systems.

The thing I did not realize: Cedric is real! He and his friends attended Signal too. They were so many roaming the expo floor and booths.

There even was a special Signal mission on TwilioQuest to earn XPs if you were spending some time with the team of Misty Robotics (parent company of the Misty robot, Cedric's robot family).

And this exactly what I did! I went over to meet the Misty Robotics team to learn more about those friendly robots🤖

The team was organizing Developers testing sessions, and inviting people to try their Hello World tutorial to "hack" the robot.

Misty is an incredible robot, among many things she has multiple sensors to move around your house without bumping into anything, a speaker to express herself, a screen to show some emotions, and a camera with face recognition capability. And all that is hackable through an SDK! 🎉

Isn't she lovely?

I had a lot of fun following the tutorial. I made Misty move, make her blink her light and even taught her to recognize me. At the end of the session, the team was handing out surveys to collect feedback. And as you may have already guessed it was a Typeform! 🤩

Then I had no option... I had to connect Misty to Typeform.

I wanted to make Misty react every time someone was filling up the survey.

Here is how I managed to connect the two.

Overall principle 📖

We rely on Typeform webhooks functionality to react immediately after someone answered.

The webhook is received by an app that can call the Misty API and make the robot react.

But to be able to communicate with the Misty robot, your app needs to be on the same WIFI network, so it's most likely that you will run it locally on your laptop.

We will use ngrok to expose localhost to the world 🌍.

Make the Misty move her arm

We create a small express app with only one endpoint in a file named app.js. This endpoint will receive webhook notification and then call Misty API.

This is how it looks:

const express = require('express')
const app = express()
const port = 3000

const axios = require('axios')
const bodyParser = require('body-parser')

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())

const ROBOT_IP = '10.41.129.96' //change to your own
app.post('/', (req, res) => {
  res.sendStatus(200)

  axios({
    method: 'POST',
    url: `http://${ROBOT_IP}/api/arms`,
    data:{
        Arm: "left",
        Position: -90,
        Velocity: 100,
        Units: "degrees"
      }
  }).catch(function(err){
    console.log(err)
  })
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

You can run the app by using the command node app.js

And to make her arm go up, run the following command curl -X POST https://localhost:300 in your terminal.

And if everything works well you should see Misty's left arm going up 🎉

Connect it to Typeform 🔗

All this is working well locally, but wouldn't it be cool to connect it to other services?

To make it happen we need the help of an awesome tool called ngrok. ngrok will expose your localhost and make it available to rest of the internet by giving it a URL. This URL is unique to you and every time you launch ngrok. Make sure to read its getting started guide.

Once you have ngrok installed you can run the command ngrok http 300.
This should give you a URL back. We are going to use it to call our app from the outside.

Screenshot of ngrok

On your Typeform dashboard, we can now select the form we want to connect to Misty, and under Connect > Webhooks add a new webhook with this URL.

And voilà 🎉
You now have a robot that raises her arm every time someone fills up your typeform.

This will work until you kill ngrok or the node app. Ngrok will give you a new URL every time you launch it, so just keep it open while you are developing.

Go beyond 🚀

After seeing Misty raising her arm the first time, I could not restrain myself, and I shouted a loud "Woo-hoo" on the conference floor 😊.

But I could not stop jus now when I was so close to building something even cooler.

My ultimate goal was to build an app that will make Misty speak and react to the things that were posted on the typeform.

Make her arm move dynamically 👋

So I built a simple typeform, where people could leave their name and decide which arm Misty should raise.

To make it easier to extract data from typeform webhook payload, I had to update the ref of my questions. On your typeform select the question and look at the bottom of the sidebar and click Edit. There you can change it to whatever you please. I called mine username and arm_choice.

Edit Ref on typeform question

Now let's see how to extract those values from the webhook payload 👇

  const { form_response } = req.body
  const {answers} = form_response

  let arm_field = answers.find((a) => a.field.ref === 'arm_choice')
  let selected_arm = arm_field.choice.label

  let username_field = answers.find((a) => a.field.ref === 'username')
  let username = username_field.text

Then you can pass select_arm value to Misty API, and raise the corresponding arm.

axios({
    method: 'POST',
    url: `http://${ROBOT_IP}/api/arms`,
    data:{
        Arm: selected_arm,
        Position: -90,
        Velocity: 100,
        Units: "degrees"
      }
  }).catch(function(err){
    console.log(err)
  })

Maker her speak 🤖🗣️

Misty REST API lets you send WAV audio files using the SaveAudio endpoint (doc) but... they have to be encoded in base64 😤

So I had to find a hack to generate a .wav file and convert it to base64.

It took me a couple of trials to find the perfect library to do it, but say.js saved my day!

const say = require('say')
say.export(`Hello ${username}`, 'Alex', 0.75, `hello_${username}.wav`, (err) => {
  if (err) {
    return console.error(err)
  }
})

Using those few lines, it creates a .wav file named hello_${username}.wave with a voice that says Hello nicolas for example.
Unfortunately, I could not find the name for the female voices on my mac, so we are stuck with Alex for now 🤷‍♂️

cont fs = require('fs');
let wav = new WaveFile(fs.readFileSync(`hello_${username}.wav`));
let wav64 = wav.toBase64()

  axios({
    method: 'POST',
    url: `http://${ROBOT_IP}/api/audio`,
    data:{
      FileName: `hello_${username}.wav`,
      Data: wav64,
      ImmediatelyApply: true, //make Misty play it right away
      OverwriteExisting: true
    }
  }).catch(function(err){
    console.log(err)
  })

And this 🔝 is how I read the file, convert it to base64 and call Misty API to make it play on the robot.

And this how it finally looks 🤩
// Detect dark theme var iframe = document.getElementById('tweet-1159195895646183424-934'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1159195895646183424&theme=dark" }

The code for the entire app is available here👇

Hope that got you excited to hack things around and play with Misty 🤖.
Their crowdfunding campaign is over, but you can already pre-order it.

🙏 Special thanks to Twilio Champions team for inviting me to be part of this great adventure 😃

The self-confidence toolbox for job interviews

anabella — Tue, 02 Jul 2019 13:09:56 +0000

One of the biggest challenges I faced when starting my career in software engineering was applying and interviewing for jobs.

I went through a ton of interviewing processes, and for most of them, I was unprepared and under-qualified. In spite of this, I realised that every not-so-good interview helped me improve my "technique" and become more confident.

Then, about a year ago, I started participating in the other side of interviews, that much more comfortable side of the conversation: interviewing candidates instead of being a candidate myself. This change in perspective allowed me to observe interviewing in more detail (and with less stress) and reflect on all the things that I've learned about it.

This post describes tactics that helped me reduce stress during those conversations, as well as some mental tools I used to frame the interviewing process and ultimately be more confident about my performance, whatever the outcome.

Getting an interview means you’re already 50% in 🌓

I know it doesn't feel like it, but it is often true. A friend of mine used to say this, and I didn't believe him. Years later, I realised that companies only spend time talking to candidates who they already suspect might be a good fit. If they asked you in for an interview, they want to learn more.

You're also interviewing them 👀

Yes, you're being evaluated during an interview. But it’s a two-way street: the interview is also your chance to evaluate the company as a potential employer and learn whether the company and team are a good fit for you. It's important (and empowering) to keep this in mind during the interview–you’re also trying to find out if you want to work there.

Tell your story 📜

This is an elevator pitch about yourself, and pitches need a good story. So, how can you describe your experience and objectives in a way that captivates others? Find that story you want to tell, and once you have it, keep working on that narrative to make it engaging.

You don’t have to recite your resumé by heart. Instead, fill in the gaps between every milestone, from your own human perspective. Think about the most relevant point in time to start from, then pick and choose the events you tell so that they follow a logical, purposeful path. You're not trying to prove anything–instead, focus on making them remember you.

In my case, my "story" changed every time I was looking for a new job: I would usually explain how each of my previous jobs contributed to my professional growth and what I was looking for next. I found that it would take me a couple of tries before I had my story clear enough in my mind to be able to transmit it to others.

Please don't lie! 🤥

Lying will just make you more nervous. I've done it, and it backfired. I still remember that interview as the worst in my life.

You can, however, frame the truth without lying. For example, instead of saying, "I don't know anything about React..." you could say, "I've heard about React and its popularity…although I haven't used it yet, I'm curious and would like to give it a try."

Ask questions 🗣

I used to get very nervous when interviewers asked me if I had any questions for them until I understood that I needed to think of some questions in advance and adapt those to the specific context of each conversation.

So, prepare some questions beforehand. Do a little research about the company and think about what you're looking for in a new job and what you care about (remember, you're also interviewing them).

Think about what you'd like to ask and what you want to communicate with your questions. The interviewer’s answers will give you a deeper understanding of the job and your questions will show them the things you care most about.

Trust them, they know 👥

This is one of my favourite tools in the self-confidence toolbox. There may be times when you feel you're not good enough for the job. Ye olde imposter syndrome, right?

Well my best tool against this is simply putting my trust in the people doing the interviews: telling myself, "They know."

Why? Because they have a lot more context about the company, the team, and the position, and they're more likely to assess the situation correctly. So if I'm feeling like I might not be up to challenge, I just tell myself: "You don't know that. They do." Remember my first point: companies spend time with candidates they already think might be a good fit.

There's no such thing as being too interested 🙇🏽‍♀️

It's totally OK to express your interest up front and ask for feedback or updates throughout the process. It's also a great strategy to go the extra mile to demonstrate it. If you really want to land a particular job, ask yourself, "What can I do to stand out from every other candidate?"

When I was interviewing for my current job, I decided I would go an extra 2 or 3 miles because I wanted the job so badly. Before my coding interview I researched the company's APIs and created a suite of acceptance tests for them. I wrote an email to HR, asking if they would be interested in reviewing the project during the upcoming interview. Even if my small project wasn't anything special, they were impressed with my commitment, and I think that played a great part in the outcome.

It's not you, it's them 💔

Rejection is gonna happen…and it's probably not about you. Many factors come into play during a hiring process, and the ones that are not related to you greatly outnumber the ones that are about you specifically. The best you can do is ask for feedback, reflect on what you've learned, and use it to feel more confident in your performance next time.

In the end, they want this as much as you do 👯‍♀️

The people interviewing you are spending time getting to know you because they think you might be a great fit. They're not looking to rule you out, but quite the opposite: they want you to succeed.

The hiring process can feel like a series of challenges to overcome to get a prize–challenges that the interviewers want most candidates to fail. This is not the case: they should want you to succeed and they should help you get there. But if it feels like the interviewers pressure you and want to see you at your limit, maybe it’s not the best place for you after all.

Also, if you’re working with a recruiter, remember that it's their job to get a hire. Don't forget to use this to your advantage, let them help you: listen to what they say, as they have a lot of useful insights that can help you perform better.

I once asked for 2 weeks of preparation for a coding interview, saying that I was a bit rusty with the subject we'd be covering in the test. Truth is I wasn't rusty, I had no experience with the subject at all. During the interview I asked to look at my own study files to recall something and it was fine. In the end it all went well and I passed the interview.

A final note about coding interviews 🖥

This article focuses mostly on the "talking" part of interviews, but I feel there are a couple things left to be said about live coding interviews.

It’s OK to say "I don't know" 🤷‍♀️

There's no shame in saying "I don't know that." Take it as another opportunity to evaluate them as an employer. They should be able to explain a task or concept to you and give you the opportunity to show how easily you can pick up something new and apply it right away.

This has happened to me twice, and it turned out to be a great learning experience. On one occasion, I got the chance to ask questions and demonstrate my learning process, and on the other I showed my Googling skills. In the end, I got both jobs!

It's not about the code 💫

While you're coding or white-boarding, think out loud as much as you can. Coding interviews aren't supposed to be about producing perfect code on the first try. They're about your thought process and your ability to think of solutions, debug problems, and communicate your ideas. Turn it into a conversation.

Easier said than done, right? I agree, but these strategies do make interviewing less stressful. They allow you to step back and approach interviewing not as a stress-filled contest to win a job but as a process that helps both sides evaluate whether the fit is right. Plus, the more you practice, the easier it gets.

Have you used anything similar to these tools before? Do you have others? Drop them in the comments! 😉 I'd love to read them!

BarcelonaJS Meetup May

Tiago Pombeiro — Wed, 29 May 2019 23:30:34 +0000

Javascripters from Barcelona and beyond got together once again in one more BarcelonaJs meetup. We had two great speakers:

Jepser Bernardino @jepser
Slides at this link

The dark side of React, Server Side Rendering

Server Side Rendering is a topic that pops up when taking about SEO or performance improvements for Single Page Applications.

In the React space, with a lot of tools around, which would be the way to go. Let's dive into the space beyond client side rendering, how routing works and data persistence is done with SSR.

Oriol Torrillas - @otorrillas
Slides at this link

Demystifying design systems

Design systems are sometimes seen as myths. They can play a fundamental role in an organization, but yet we fail to implement them "properly".

In this talk, we will discuss about some patterns, common pitfalls and give practical examples that can help in turning a design system into a success story, for both designers and coders.

Here is the link for the event - with more details about the talks:
https://www.meetup.com/BarcelonaJS/events/261419277/

You can find the recording of the meetup here:

Here is the direct link: https://youtu.be/6v_1kCuvQyA

Kudos to both the speakers and Typeform for hosting this event.

Follow our next events here: https://www.meetup.com/BarcelonaJS

Create a Salesforce lead from Typeform in less than half an hour

Nicolas Grenié — Thu, 14 Mar 2019 19:56:42 +0000

At Typeform, we love to use our product to run things. As you may have read in a previous post, we use typeforms to rate our lunches every day, gather feedback about upcoming features, and even run our internal FIFA contest. There are so many ways to use Typeform :)

We are also heavy Salesforce users: we use it to keep our partner program organized. Companies that are interested in integrating with Typeform contact us via this partner form, but then nothing happens. If we believe a lead could produce an interesting conversation, we have to create the lead manually in Salesforce.

I can hear developer folks out there saying, “There should be a better way!” 🤔

You’re right! We should be able to enjoy both by using the engaging Typeform UI to collect data and the powerful Salesforce funnel to organize the data into leads.

And this is what I’m going to explain here. I connected our typeform to our Salesforce organization and saved our team precious time.

Prerequisites 🛒

To follow this tutorial, you will need:

A Salesforce organization
A Typeform account--create one for free
A half hour of free time

Buckle up and let's get started! 🛫

Principles 📖

This hack relies on Typeform webhooks. You can attach one or more webhooks to a Typeform so that when a new response is submitted, you are notified at the URL of your choice.

Webhooks happen in real time, so they allow you to react quickly and keep everything in sync.

On the Salesforce side, we will rely on their Web-to-Lead solution. It's a quick way to generate leads from a web form.

To receive webhook details from Typeform and send them to Salesforce, we use Glitch. Glitch is both an online IDE and a server. The app is deployed automatically, so there’s no need to worry about servers.

You can also use other serverless solutions like AWS Lambda, Google Cloud functions, Azure, and Stdlib. Your choice! 😉

Implement the solution 👩‍💻

Prepare the typeform

Our typeform contains all of the questions we want to ask. Each question is identified by both an id and a ref property. Both are unique and automatically generated, but the id value can't be changed. Example of form definition.

details of field definition

We can update the ref values to make the code more readable. I’ll use the Typeform Edit Block Ref app to modify the ref properties of fields in our typeform.

screenshot of edit ref app

Now the questions have ref values like first_name, last_name instead of random characters. 👍

Looks better, no? 😉

Get your Salesforce organization ID 🗄️

To send leads to our Salesforce organization, I need to identify it by passing our oid (organization ID) as a parameter.

You can find the OID in your Salesforce dashboard. Click on the ⚙️ icon, and you should find it under Settings in the Company Information section.

Where to find your Salesforce OID

Keep the OID handy! You will need it later. 😉

Let's code 🎉

I knew you wanted to get to this part as soon as possible! So let's get our hands dirty. 😈

As I said earlier, our function will extract details from the Typeform webhook payload and then call the Salesforce API to create a lead.

app.post('/hook', function(request, response) {
  response.sendStatus(200) // let's answer back quickly to typeform 👌
  let { form_response } = request.body
  let { answers } = form_response

  console.log('received from Typeform webhook', form_response)

  // build the lead object
  let lead_data = {
    first_name: answers.find(a => a.field.ref === 'first_name').text,
    last_name: answers.find(a => a.field.ref === 'last_name').text,
    email: answers.find(a => a.field.ref === 'email').email,
    company: answers.find(a => a.field.ref === 'company').text,
    oid: process.env.OID,
    debug: request.query.debug===1 ? 1 : 0 // salesforce debug mode
  }
})

As you can see in this snippet, you’ll create a /hook route, excepting a POST request. Then, you’ll process the incoming request and extract the relevant data to build the lead_data object.

For security reasons, don't store the OID value directly in the code. Instead, store it as an environment variable.

I also added a debug parameter so you can test it out without harming your real organization.

The only thing left to do is to call the Salesforce Web-to-Lead API and create a lead.

This is the missing piece to add:

axios({
    method: 'POST',
    url: 'https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8',
    data: qs.stringify(lead_data),
    config: { headers: {'Content-Type': 'application/x-www-form-urlencoded' }}
    })
    .then(function (response) {
        console.log('res',response.status, response.data);
    })
    .catch(function (err) {
        console.log('err',err);
    });

That's all you need to connect things together. 🎊

Try it live

To quickly try this integration, follow these steps:

Remix the project on Glitch
Add your own OID to the .env file
Remove, add, or modify data extraction from the Typeform webhook payload in lines 21-28 in server.js
Click Show to see the URL of your project hosted on Glitch (and keep it for the next step)
In Typeform, select your lead generation typeform and add your Glitch app URL under Connect > Webhooks The URL format should be https://{random_name}.glitch.me/hook
Test by filling in and submitting your lead generation typeform--after you submit it, you should see a new lead in your Salesforce organization
Celebrate! 🎉

Succesfully created a lead in Salesforce

Go beyond 🗺️

This is a simple hack to connect Typeform and Salesforce. To make it more complete, you can map more fields from your lead object to your typeform questions. It even works with custom Salesforce fields.

If you are curious about connecting Typeform with other services, check out our developer documentation and build your own solution! 😉

To stay updated about projects like this one, subscribe to our Developer Newsletter.

A whole new world to explore

Nicolas Grenié — Thu, 07 Feb 2019 01:51:00 +0000

Photo by sergio souza on Unsplash

In 2018 the Typeform crew had the pleasure to meet some of you at conferences like Nordic APIs, or JS Heroes, or hackathons like HackUPC in Barcelona, or Hackference in Birmingham. It’s always great to meet users and partners at those events. You help us build the future of Typeform and its platform 🤩

I can tell you that for 2019, from where we are we have a new fantastic point of view, the head full of ideas and no one to tell us no. A hundred thousand things to see and as many dazzling places we never knew we wanted to visit…

The only thing that’s crystal clear is that now we are in a whole new world with you, our beloved Developer Community!

So let’s get this year started, hop on this magic carpet ride together, and let’s check out our next destinations.

We will begin our adventure by going to Boulder for a few events:

🇺🇸 BoulderJS meetup, Boulder

20th February 2019

For the first step of our Boulder trip, we will stop by BoulderJS meetup, meeting the local Javascript community.

I will be sharing my experience building my first app using Vue.js, when I created https://🌚🌞.ws to track events for the 2018 Solar Eclipse.

🎟️ Register (FREE)

🇺🇸WriteTheDocs Boulder

21st February 2019

WriteTheDoc is a global community of tech writers. Last year we participated in their sister events API the docs in Paris and London. It’s a great pleasure to be welcomed by the Boulder local group to exchange about documentation and Developer Experience best practices.

I will be presenting about best practices on Developer Experience on Webhooks.

🎟️ Register (FREE)

🇺🇸Typeform Office Hours

While we will be in Boulder, we thought we wanted to meet our lovely users. That’s why we are organizing some Office Hours on Thursday 21st and Friday 22nd.

It’s your opportunity to come meet us and come with your questions about Typeform product.

We will be here to assist you, especially if you are interested to build things using our APIs.

🎟 ️Signup here (FREE)

🇺🇸HackCU, Boulder

23–24th February

We don’t sponsor a lot of student hackathons but when we do, but do it’s because we have a special connection with their team. We are delighted to visit Gerard Sans founder of HackUPC and now a master student at CU-Boulder and Shubha Sharma, our summer intern in senior year in the same university. They are part of the outstanding team organizing HackCU.

Can’t wait to see what hackers will build!

🇪🇸API Meetup BCN, Barcelona

28th February

It now has been more than 10 years that Barcelona has been selected to be the Mobile Capital of the World for a week every year. During a week more than 100 thousand people will come from all over the world to discuss the newest trends in technology.

Taking the opportunity of all those folks coming to Barcelona, the local API meetup is hosting their annual MWC meetup and we are excited to host it in our HQ! Join us for a night of API nerding! 🤓

🎟️ Register (FREE)

🇪🇸Women Techmakers, Barcelona

6th April

You still have a bit of time to get ready, but we are beyond excited to be part of the second edition of the Women Techmarkers conference in Barcelona.

🔗 Learn more

I really hope you have a chance to catch us at one of those events! Remember, if you are organizing a meetup, a conference, a hackathon or an AI-powered ostrich race, and you want someone from Typeform to show up, let us know by filling the this typeform.