How to Create Search Engine-friendly Internationalized Web Apps with Angular Universal and ngx-translate
Search Engine Optimization (SEO) is important for many Angular single-page applications (SPAs). You can build SEO-friendly Angular websites with Angular Universal, but how do you make your app SEO-friendly in every language your website supports? Google, Yandex, and Baidu, might request your pages in English, Spanish, Russian, or Chinese: how do you make your server-side rendering return the correct language?
The answer is ngx-translate, the internationalization (i18n) and localization library for Angular. This module makes it easy to use translation files that provide the correct language for both client-side and server-side rendering. This post will show you how to use it.
In this post we will:
- Create an Angular application with one component, the home page
- Add server-side rendering for SEO purposes with Angular Universal
- Set up internationalization in four languages with ngx-translate
To accomplish the tasks in this post you will need to install the following:
How to Call the Twilio API from Java Programs on the Commandline
If you you need to do a quick Twilio test, or compile and run programs on a remote computer without any GUI, or run test programs on your own computer and you don’t want to use a full blown IDE development environment, this is the article for you.
Check Java Installation
Confirm that you have a Java runtime environment (JRE) on your computer for running Java class files:
$ java -version java version "1.8.0_131"<br/>Java(TM) SE Runtime Environment (build 1.8.0_131-b11)<br/>Java HotSpot(TM) 64-Bit Server VM (build 25.131-b11, mixed mode) Check that you have the Java compiler on your computer: $ javac Usage: javac <options> <source files> ...
If you don’t have both, please go to Oracle’s Java SE page and download the Java JDK.
The Java Standard Edition (Java SE) is what you need for developing ...
You know that awkward feeling when you get a nice text from a friend but for some reason, you don't have their number saved? You can't remember and it’s too late for you to respond with, "I'm sorry. Who is this?"
We're going to save you from the embarrassing moment of not knowing who it is by building an app that will let you identify numbers on the go over text.
How We’re Going to Avoid This Problem
Our app will take advantage of three Twilio APIs:
- Functions: the serverless environment which will hold our app
- Lookup: to look up the phone number and see who it belongs to
- SMS: to send us a text with the phone number.
The combination of these three will allow us to send a text with a phone number to our Function which will then perform a Lookup and respond to ...
Preventing Memory Leaks in Angular Observables with ngOnDestroy
A memory leak is one of the worst types of issues you can have. It’s hard to find, hard to debug, and often hard to solve. Unfortunately, this problem occurs in every programming language or framework, including Angular. Observables are awesome, because of the incessant stream of data, but this benefaction can cause serious problem with memory leak. Today we will take a closer look at the
ngOnDestroyAngular hook, and answer the question: “When should I unsubscribe from an observable? What is the best pattern to use?”
In this post we will:
- Create an app which generates random numbers.
- Reproduce a memory leak in it.
- Fix the memory leak with the
To accomplish these tasks, make sure you:
- Install Node.js and npm (at the time of writing I am using Node.js v8.11.1 and npm 5.8.0).
- Install @angular/cli (in ...
How to send an SMS from React with Twilio
We talk a lot about sending SMS messages from web applications, but what about sending SMS messages from a React application? There's a bit more to it than just the server-side version, but it won't take us long.
Why shouldn't I use the REST API from the client-side?
Live view of a hacker with your account credentials
To avoid this we will create a back end application that implements the Twilio REST API, wraps up your credentials and sends SMS messages for you. Then you can call your back end ...
Set up a React app with a Node.js server proxy
Create React App is a great tool for getting a React application up and running. It's a little less clear when you're building or prototyping an application that requires a server side component, like generating access tokens for Twilio Video or Chat, though. I've found it easiest to work with a server within the same project so that you can start everything up with one command.
How it works
There is an option that you can set in Create React App's
package.jsonthat proxies non
text/htmlrequests through to an alternative back end. You can use this feature to proxy to applications running elsewhere, but today we want to be ...
How to Capture Call Tracking Metrics in Google Analytics with Twilio Programmable Voice
Call tracking involves saving a phone number and recording related the information about the calls made by that number. The metrics can then be used to measure the impact of marketing efforts on lead generation and sales.
Say that you are an entrepreneur or the marketing head of an organization and your main source of leads are phone calls. To spend your marketing dollars wisely, you will have to know which of your campaigns generate the maximum number of calls. This can be done using a call tracking system.
Call tracking systems used to be very expensive and cumbersome. However, in this blog post we will create an easy call tracking system that combines the powers of Twilio and Google Analytics to give you a very detailed picture of the calls and locations of these calls.
Configuring Google Analytics
Start by logging into your Google Analytics account or signing up ...
Audio visualisation with the Web Audio API and React
The Web Audio API is a powerful browser API for creating, manipulating and analysing audio. I'm no musician, so I'll leave the creating and manipulating to the experts. Instead, in this post we're going look at analysing audio. To make things extra interesting, we're going to see how to visualise the audio in a React component with
When we're done we'll have a React application that can listen to the microphone on your computer and show a waveform to visualise the data.
- Clone or download the repo from GitHub
git clone -b getting-started https://github.com/philnash/react-web-audio.git
- Change into the directory and install the dependencies with npm
cd react-web-audio npm install
- Start the application
npm start ...
How to Build A Twilio-Hosted Group Messaging Service with Sync, Functions and SMS
With Twilio’s services you can manage your own group SMS application for Scheduling business meetings, planning wedding activities, parties, or a dinner get together. A friend of mine uses group SMS for family communications among his siblings and parents.
Don’t like Facebook? Or someone you want to include in your group doesn’t use Facebook or WhatsApp? No worries, use SMS. Yes, everyone with a mobile phone has an SMS app because your phone comes with an SMS app. You’re Group SMS app ready for group messaging.
The blog, How To: Set Up SMS Broadcasts in Five Minutes, says, “SMS messages are opened 98% of the time within minutes of being received. When you need to reach your constituents quickly and consistently, there’s no better medium than SMS.”
This blog gives you the configuration steps to communicate quickly and effectively with your friends, colleagues or customers ...
Here is a preview of what we'll be building:
Basic knowledge of the following will be useful, but extensive knowledge is not required:
Before you continue, make sure you have Node.js installed on your system.
Getting Your Twilio API Keys
The first step to using Twilio Programmable Video chat is to get an access token. Twilio will generate a ...