Object Detection and Augmentation in Modern Web Development

I’ve been playing around a lot with the Shape Detection API in Chrome and I really like the potential it has. For example, a very simple QRCode detector I wrote a long time ago has a JS polyfill but uses new BarcodeDetector() API if it is available.
You can see some of the other demo’s I’ve built here: https://paul.kinlan.me/face-detection/, https://paul.kinlan.me/barcode-detection/ and https://paul.kinlan.me/detecting-text-in-an-image/

Link: https://dzone.com/articles/object-detection-and-augmentation-modern-web-devel?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Amazing User Agent API with userstack

We do our best to design and code websites so that they look and perform the way they should regardless of device or browser, but the truth is we sometimes we need to code for specific device, browser, or crawler. Whether it’s a quick hack or a simply wanting to display different content for a […]
The post Amazing User Agent API with userstack appeared first on David Walsh Blog.

Link: https://davidwalsh.name/amazing-user-agent-api-with-userstack

Using Scoped Slots in Vue.js to Abstract Functionality

Let’s start with a short introduction to Vue.js slots concept. Slots are useful when you want to inject content in a specific place of a component. Those specific places that you can define are called slots.
For example, you want to create a wrapper component that is styled in a specific way but you want to be able to pass any content to be rendered inside that wrapper (it might be a string, a computed value, or even another …
The post Using Scoped Slots in Vue.js to Abstract Functionality appeared first on CSS-Tricks.

Link: https://css-tricks.com/using-scoped-slots-in-vue-js-to-abstract-functionality/

Introducing Axios, a Popular, Promise-based HTTP Client

Axios is a popular, promise-based HTTP client that sports an easy-to-use API and can be used in both the browser and Node.js.
Making HTTP requests to fetch or save data is one of the most common tasks a client-side JavaScript application will need to do. Third-party libraries — especially jQuery — have long been a popular way to interact with the more verbose browser APIs, and abstract away any cross-browser differences.
As people move away from jQuery in favor of improved native DOM APIs, or front-end UI libraries like React and Vue.js, including it purely for its $.ajax functionality makes less sense.
Let’s take a look at how to get started using Axios in your code, and see some of the features that contribute to its popularity among JavaScript developers.
Axios vs Fetch
As you’re probably aware, modern browsers ship with the newer Fetch API built in, so why not just use that? There are several differences between the two that many feel gives Axios the edge.
One such difference is in how the two libraries treat HTTP error codes. When using Fetch, if the server returns a 4xx or 5xx series error, your catch() callback won’t be triggered and it is down to the developer to check the response status code to determine if the request was successful. Axios, on the other hand, will reject the request promise if one of these status codes is returned.
Another small difference, which often trips up developers new to the API, is that Fetch doesn’t automatically send cookies back to the server when making a request. It’s necessary to explicitly pass an option for them to be included. Axios has your back here.
One difference that may end up being a show-stopper for some is progress updates on uploads/downloads. As Axios is built on top of the older XHR API, you’re able to register callback functions for onUploadProgress and onDownloadProgress to display the percentage complete in your app’s UI. Currently, Fetch has no support for doing this.
Lastly, Axios can be used in both the browser and Node.js. This facilitates sharing JavaScript code between the browser and the back end or doing server-side rendering of your front-end apps.
Note: there are versions of the Fetch API available for Node but, in my opinion, the other features Axios provides give it the edge.
As you might expect, the most common way to install Axios is via the npm package manager:
npm i axios

and include it in your code where needed:
// ES2015 style import
import axios from ‘axios’;

// Node.js style require
const axios = require(‘axios’);

If you’re not using some kind of module bundler (e.g. webpack), then you can always pull in the library from a CDN in the traditional way: