How to Install and Use Chatra

Still provide phone support? Have you ever thought about the live chat effectiveness for your website? While the majority of people avoid phone conversations and lack time to read emails, live chat can be a perfect option for providing the effective support and building relationships with your visitors. You can forget about all that “Could you spell your email phonetically?” and give quick replies to the burning requests. Live chat saves you time, provides a much broader picture of your visitors, increases customers’ loyalty, and even reduces stress caused by the phone calls.
What Is Chatra?
Chatra is a user-friendly messenger tool for websites that helps you assist the website visitors promptly and build sustainable relationships with them. Chatra gives you a chance to effectively fight the cart abandonment and avoid costly delays that are common for email support and are so critical in the competitive business environment. And their mobile apps allow you to help the visitors even when you are out of the office.

Link: https://dzone.com/articles/how-to-install-and-use-chatra?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

The Power(s) of NativeScript and the NativeScript Playground

It all started innocently enough with a simple question a customer asked: “Can I use Bluetooth with the NativeScript Playground?"
My immediate reaction was: "No way! Bluetooth requires app permissions and interacting with an arcane part of the platform APIs, it should be impossible.. .or at least extremely difficult!"

Link: https://dzone.com/articles/the-powers-of-nativescript-and-the-nativescript-pl?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

The Possibilities of Web MIDI With TypeScript

If you’ve ever had any experience with music technology, or, more specifically, sequencers, keyboards or synthesisers, you will have come across MIDI (Musical Instrument Digital Interface). It’s used to send notes and controller messages from musical devices, such as keyboards or sequencers which are used to play and record music, and devices that produce sounds, such as samplers or synthesizers. It’s pure control information, for example, “play a c# in the 3rd octave with a velocity of 85," there’s no actual audio involved. It dates back to the early 1980s, when a group of musical instrument manufacturers such as Roland, Sequential Circuits, Oberheim, Yamaha, and Korg got together to define the standard. It soon lead to a huge boom in low cost music production and the genesis of new musical styles. It’s no accident that rap and electronic dance music date from the mid to late 80s.
Web MIDI is a new W3C specification for an API to allow browser applications to access MIDI input and output devices on the host machine. You can enumerate the devices, then choose to listen for MIDI messages, or format and send your own messages. It’s designed to allow applications to consume and emit MIDI information at the protocol level, so you receive and send the actual raw message bytes rather the than API providing the means to play MIDI files using General MIDI, for example. Don’t let this put you off though, the protocol is very simple to interpret as I’ll demonstrate later.

Link: https://dzone.com/articles/the-possibilities-of-web-midi-with-typescript

Let’s make a form that puts current location to use in a map!

I love shopping online. I can find what I need and get most things for a decent price. I am Nigerian currently working and studying in India, and two things I dread when shopping online are:

Filling out a credit card form
Filling out shipping and billing address forms

Maybe I’m just lazy, but these things are not without challenges! For the first one, thanks to payment processing services like PayPal and e-wallets, I neither have to type in my …
The post Let’s make a form that puts current location to use in a map! appeared first on CSS-Tricks.

Link: https://css-tricks.com/lets-make-a-form-that-puts-current-location-to-use-in-a-map/

Using data in React with the Fetch API and axios

If you are new to React, and perhaps have only played with building to-do and counter apps, you may not yet have run across a need to pull in data for your app. There will likely come a time when you’ll need to do this, as React apps are most well suited for situations where you’re handling both data and state.
The first set of data you may need to handle might be hard-coded into your React application, like we …
The post Using data in React with the Fetch API and axios appeared first on CSS-Tricks.

Link: https://css-tricks.com/using-data-in-react-with-the-fetch-api-and-axios/

Create your own Serverless API

If you don’t already know of it, Todd Motto has this great list of public APIs. It’s awesome if you’re trying out a new framework or new layout pattern and want to hit the ground running without fussing with the content.
But what if you want or need to make your own API? Serverless can help create a nice one for data you’d like to expose for use.
Serverless really shines for this use case, and hopefully this post …
The post Create your own Serverless API appeared first on CSS-Tricks.

Link: https://css-tricks.com/create-your-own-serverless-api/

Working Toward a JavaScript-Driven Drupal Administration Interface

As web applications have evolved from static pages to application-like experiences, end-users’ expectations of websites have become increasingly demanding. JavaScript, partnered with effective user-experience design, enable the seamless, instantaneous interactions that users now expect.
The Drupal project anticipated this trend years ago and we have been investing heavily in making Drupal API-first ever since. As a result, more organizations are building decoupled applications served by Drupal. This approach allows organizations to use modern JavaScript frameworks, while still benefiting from Drupal’s powerful content management capabilities, such as content modeling, content editing, content workflows, access rights and more.

Link: https://dzone.com/articles/working-toward-a-javascript-driven-drupal-administ?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Introduction to the Fetch API

In this article, we’ll learn what the new Fetch API looks like, what problems it solves, and the most practical way to retrieve remote data inside your web page using the fetch() function.
For years, XMLHttpRequest has been web developers’ trusted sidekick. Whether directly or under the hood, XMLHttpRequest has enabled Ajax and a whole new type of interactive experience, from Gmail to Facebook.
However, XMLHttpRequest is slowly being superseded by the Fetch API. Both can be used to make network requests, but the Fetch API is Promise-based, which enables a cleaner, more concise syntax and helps keep you out of callback hell.
The Fetch API
The Fetch API provides a fetch() method defined on the window object, which you can use to perform requests. This method returns a Promise that you can use to retrieve the response of the request.
The fetch method only has one mandatory argument, which is the URL of the resource you wish to fetch. A very basic example would look something like the following. This fetches the top five posts from r/javascript on Reddit:
fetch(‘https://www.reddit.com/r/javascript/top/.json?limit=5’)
.then(res => console.log(res));

If you inspect the response in your browser’s console, you should see a Response object with several properties:
{
body: ReadableStream
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: “"
type: "cors"
url: "https://www.reddit.com/top/.json?count=5"
}

It seems that the request was successful, but where are our top five posts? Let’s find out.
Loading JSON
We can’t block the user interface waiting until the request finishes. That’s why fetch() returns a Promise, an object which represents a future result. In the above example, we’re using the then method to wait for the server’s response and log it to the console.
Now let’s see how we can extract the JSON payload from that response once the request completes:
fetch(‘https://www.reddit.com/r/javascript/top/.json?limit=5’)
.then(res => res.json())
.then(json => console.log(json));

We start the request by calling fetch(). When the promise is fulfilled, it returns a Response object, which exposes a json method. Within the first then() we can call this json method to return the response body as JSON.
However, the json method also returns a promise, which means we need to chain on another then(), before the JSON response is logged to the console.
And why does json() return a promise? Because HTTP allows you to stream content to the client chunk by chunk, so even if the browser receives a response from the server, the content body might not all be there yet!
Async … await
The .then() syntax is nice, but a more concise way to process promises in 2018 is using async … await — a new syntax introduced by ES2017. Using async Ú await means that we can mark a function as async, then wait for the promise to complete with the await keyword, and access the result as a normal object. Async functions are supported in all modern browsers (not IE or Opera Mini) and Node.js 7.6+.
Here’s what the above example would look like (slightly expanded) using async … await:
async function fetchTopFive(sub) {
const URL = `https://www.reddit.com/r/${sub}/top/.json?limit=5`;
const fetchResult = fetch(URL)
const response = await fetchResult;
const jsonData = await response.json();
console.log(jsonData);
}

fetchTopFive(‘javascript’);

Not much has changed. Apart from the fact that we’ve created an async function, to which we’re passing the name of the subreddit, we’re now awaiting the result of calling fetch(), then using await again to retrieve the JSON from the response.
That’s the basic workflow, but things involving remote services doesn’t always go smoothly.
Continue reading %Introduction to the Fetch API%

Link: https://www.sitepoint.com/introduction-to-the-fetch-api/