Level up your Twilio API skills in TwilioQuest, an educational game for Mac, Windows, and Linux. Download Now
Build the future of communications.
Start building for free

html posts

  • By Luís Leão
    Cómo crear entradas internacionales de números de teléfono en HTML y JavaScript Cómo crear entradas internacionales de números de teléfono en HTML y JavaScript

    Los números de teléfono están estandarizados en un formato internacional denominado E.164, el que combina códigos de país y números de suscriptores en un formato similar al siguiente: +14155552671. Muchas API (incluida Twilio) requieren este formato, lo que significa que no es necesario almacenar los códigos de país y los números de teléfono en dos columnas de base de datos separadas.

    Sin embargo, probablemente no desee que los usuarios tengan que escribir un signo + y un código de país cuando proporcionan su número de teléfono para:

    • Registrar una cuenta nueva
    • Activar SMS 2FA
    • Solicitar una devolución de llamada al servicio de atención al cliente
    • Registrarse para recibir notificaciones de marketing

    En esta publicación de blog, se explicará cómo crear un campo de entrada de número de teléfono para procesar y analizar los números de teléfono mediante HTML básico, JavaScript y el plugin intl-tel-input. Incluiremos recomendaciones para la …

    Read More
  • By Phil Nash
    HTML-Attribute für eine bessere Benutzererfahrung bei der Zwei-Faktor-Authentisierung HTML-Attribute für eine bessere Benutzererfahrung bei der Zwei-Faktor-Authentisierung


    Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von HTML attributes to improve your users' two factor authentication experience. Während wir unsere Übersetzungsprozesse verbessern, würden wir uns über Dein Feedback an help@twilio.com freuen, solltest Du etwas bemerken, was falsch übersetzt wurde. Wir bedanken uns für hilfreiche Beiträge mit Twilio Swag :)

    Es gibt viele Reibungspunkte, die sich auf die Benutzererfahrung bei der Anmeldung auswirken können, vor allem bei der Eingabe eines Codes für die Zwei-Faktor-Authentisierung. Unsere Aufgabe als Entwickler ist es, Anwendungen zu erstellen, die zwar die Kontosicherheit im Auge behalten, aber nicht die Benutzererfahrung beeinträchtigen. Manchmal erscheint es einem aber fast so, als ob sich diese beiden Anforderungen ausschließen.

    In diesem Blog betrachten wir uns das bescheidene <input>-Element und die HTML-Attribute, die zu einer besseren Erfahrung unserer Benutzer bei der Zwei-Faktor-Authentisierung führen können.

    Die Standarderfahrung

    Wenn wir eine Zwei-Faktor-Authentisierung für eine Webanwendung implementieren, vielleicht sogar …

    Read More
  • By Kelley Robinson
    Coder une saisie de numéros de téléphone internationaux Comment coder une saisie de numéros de téléphone internationaux avec HTML et JavaScript

    Les numéros de téléphone sont standardisés en un format international connu sous le nom de E.164. Il combine les codes de pays et les numéros des abonnés sous la forme suivante : +14155552671. Ce format est requis par beaucoup d’APIs (dont celles de Twilio) et signifie que vous n’avez pas à stocker les codes de pays et les numéros de téléphone dans deux colonnes séparées de la base de données.

    Cependant, vous ne voulez probablement que vos utilisateurs aient à entrer un “+” et un code de pays lorsque qu’il saisissent leurs numéros de téléphone pour :

    • S’inscrire en tant que nouvel utilisateur
    • Activer la 2FA par SMS
    • Faire une demande de rappel d’un service client
    • Souscrire aux notifications marketing

    Cet article vous accompagnera étape par étape pour coder un champ de saisie de numéros de téléphone pour traiter et parser les numéros de téléphones en utilisant du …

    Read More
  • By Phil Nash
    HTML属性を使い、ユーザーに優しい2要素認証を実現する方法 HTML attributes to improve your user's two factor authentication experience

    この記事はTwilio Developer EvangelistのPhil Nashこちらで公開した記事の日本語版です。

    ユーザーから見ると、ログイン操作、特に2要素認証コードの入力は面倒なものです。開発者として、アカウントセキュリティ要件を満たすアプリケーション構築は必須ですが、快適な操作性にも気を配る必要があります。この2つの要件がトレードオフに感じることもあるでしょう。

    この記事では、基本的な<input>要素とHTML属性に焦点を当て、スピーディーな2要素認証を実現する方法を解説します。

    デフォルトのユーザー体験

    <form action="/sessions/check-2fa" method="POST">
      <div>
        <label for="token">Please enter the code you were sent:</label>
        <input type="text" name="token" id="token" /> 
      </div>
      <button type="submit">Check token</button>
    </form>
    

    このままでも、使いやすいフォームです。<input>には名前と一意のIDを割り当てます。<label>には、適切なfor属性を明確に割り当てます。これはアクセス性を確保するために重要です。<i …

    Read More
  • By Kelley Robinson
    How to build international phone number input in HTML and JavaScript Build internation phone number input in HTML and JavaScript

    Phone numbers are standardized in an international format known as E.164 which combines country codes and subscriber numbers in a format like this: +14155552671. This format is required by many APIs (including Twilio's) and means that you don't have to store country codes and phone numbers in two separate database columns.

    However, you probably don't want your users to have to type in a + sign and country code when they provide their phone number to:

    • Register a new account
    • Enable SMS 2FA
    • Request a callback from customer service
    • Sign up for marketing notifications

    This blog post will walk through how to build a phone number input field to process and parse phone numbers using basic HTML, JavaScript, and the intl-tel-input plugin. We'll include recommendations for phone verification and fraud prevention.

    You can find the finished code on my GitHub.

    What can the intl-tel-input plugin do?

    This project …

    Read More
  • By Diane Phan
    Build React Projects with a Background in Python, Flask, HTML, and CSS header - How to Pick Up React from a Python, Flask, and HTML Background

    There comes a time in every developer's life when they have to figure out – do I need to learn a new language for this? Should I stop using Python and try out a JavaScript project? How do I know if React is the right tool for me to use over Vue? There's just so much out there – and you're not alone in having these thoughts.

    Although learning Python can help you pick up other languages, it can be a challenge to figure out which technologies make the most sense for you and your project. In this post, I’ll show you React, a JavaScript library that has plenty of support online from professionals within the industry as well as independent developers.

    In this article we’ll build a simple Flask app and change it so that it can be scaled up further using React. This will help you see the …

    Read More
  • By Diane Phan
    How to Make a Cute Virtual Mirror Using Twilio Video, JavaScript, HTML, and CSS header - How to Make a Cute Virtual Mirror Using Twilio Video, JavaScript, HTML, and CSS

    I miss using the Purikura machines with my friends in the Japanese inspired arcades because not only were they super fun, but there were a ton of cute and colorful digital stickers that I could throw onto a picture of my friends and I. As someone who loves cute anime characters and pixelated art, I wish all of my selfies or professional video chats could be as cute as the pictures on a Purikura machine.

    Then I realized - I know how to code, so making a pretty overlay for a video IS possible!

    In this article, we'll use Twilio Video's JavaScript SDK to give us a video that we can "draw" over with HTML and CSS. This is an introduction to an app that you can expand on to empower yourself and your friends from home - kind of like a cute mirror you never had!

    Tutorial Requirements …

    Read More
  • By Phil Nash
    HTML attributes to improve your users' two factor authentication experience HTML attributes to improve your users' two factor authentication experience

    There are plenty of opportunities for friction in the user experience when logging in, particularly while entering a two factor authentication code. As developers we should be building applications that support the need for account security but don't detract from the user experience. Sometimes it can feel as though these requirements are in a battle against each other.

    In this post we will look at the humble <input> element and the HTML attributes that will help speed up our users' two factor authentication experience.

    The default experience

    When you implement two factor authentication for a web application, perhaps with the Authy two factor authentication API, you will need a form for your user to input the one time password you are going to send them. You might create something similar to the following HTML:

    <form action="/sessions/check-2fa" method="POST">
      <div>
        <label for="token">Please enter the code you were sent:</label>
        <input type="text" name="token" …
    Read More
  • By Dominik Kundel
    Building a chat with Twilio, lit-html, Parcel and TypeScript eRdunQ0Ne_pDmUihXu946Engcm5amvSnpC09bTnmPp4Fp3Zz9mtr88dnW1b3cmDyCoPnDTQaStBcb3ZNhGMb1RSHEF9NLOmdrFKg_5AbBJHCnMNwhODx1AyJ-Z66c5KqqrhbEgfO

    When building a web application you often reach a place where you’ll have to render a similar element multiple times and as efficiently as possible. That’s when a lot of web developers start reaching out to frameworks and libraries such as React, Vue or Angular. But what if we only want to do efficient templating and don’t want the tooling & code overhead of these libraries?

    One library that aims to solve this problem is lit-html by the Polymer team. It uses browser-native functionality such as <template/> tags and tagged template literals to create efficient templating. Let’s take a look at how we can use it by building a Twilio Chat application with lit-html.

    Prerequisites

    Before we get started make sure that you have Node.js and npm installed. Since we’ll be using Twilio Chat at one point in this application, you want to get a Twilio account as …

    Read More
  • By Dominik Kundel
    Phone Number Verification without Regular Expression htVsvrjo5aD8VLnehiQGDJjyFHhA3wdfY29RcO0Rq9PZ22bwBEsNnTPmDhXJafGqJcg75WyisI6RNio4epBhewuNzZ-ZY_abpjoj4l8rq4Q6YaHSR-dcO8MOVU1tf9QB6_wsxfDb

    Having invalid data in your database can be a nightmare. Especially if you are intending to use the data to do things like sending important SMS to your users. A typical solution is to use /Regular Expressions/gi to make sure the value at least looks like a phone number, but that still doesn’t prevent someone from entering a fake number and supporting international numbers makes it even harder. What if I told you that you can test for valid phone numbers using Twilio Lookup!

    v2OWXglWr9PAk.gif

    Before I show you how, we need to make sure we are all set for this adventure. Check that you have the following things:

    The Basics

    Let’s start by creating a …

    Read More
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.