Web Tricks

Last time on the Code Challenge #11 we solved problems in JavaScript using functions to manipulate objects. This week on the code challenge we shall delve further into the important basics with String Manipulation challenges. Strings in JavaScript are data types containing characters in single or double quotes. Manipulating Strings are an integral part of app development and is applied in numerous cases from modifying user input data to making UX and UI decisions on a page depending on specific user inputs. The Challenge In this challenge, we'll be solving five problems with possibly increased difficulty from first to last. The five problems are: Padded Number In this challenge, an array is provided and stored in a variable, create a function which evaluates the strings in the array by ad...

Angular has been around for a few years now and since its release it has been useful when creating many different categories of applications, including web as well as mobile. The problem, at least for me, has always been that the experience for creating these various applications has been inconsistent and often confusing even though the driving technology has always been the same. Things have gotten better now that custom schematics can be used with the official Angular CLI. So what does that mean for us? We can take a project created with the Angular CLI, add a schematic, let's say for NativeScript, and end up with CLI compatible for both web and mobile. We're going to see how to use the Angular CLI to build a web and mobile compatible application with the NativeScript schematics. Install...

Having interacted with several apps over the years, there is a very high chance that you have interacted with apps that provide some form of voice experience. It could be an app with text-to-speech functionality like reading your text messages or notifications aloud. It could also be an app with voice recognition functionality like the popular Siri or Google Assistant. With the advent of HTML5, there has been a very fast growth in the number of API available on the web platform. Over the years, we have come across API such as WebSocket, File, Geolocation, Notification, Battery, Vibration, DeviceOrientation, WebRTC, etc. Some of these API have gained very high support across various browsers. However, most of them are still in the experimental phase of development and are to be used with mu...

TL;DR I’m building a custom WordPress dashboard for an enterprise client which is powered by React.js on top of Node.js with MongoDB Atlas as the database. This dashboard uses several Microsoft Azure services, e.g., Cognitive Services, Azure App Services, and especially serverless ⚡ Azure Functions. In this post, you’ll learn how to build a small module from it and the reason behind my choice of stack, apps, and products. ? One of my enterprise clients who owns a huge networking and media company has a large-scale WordPress site set up. He recently consulted me about the possibility of building a custom WordPress dashboard (based on the WordPress REST API) — to help him make intelligent business decisions via Machine Learning and Artificial Intelligence. ? With JavaScript eating up the wor...

Vue is a progressive Javascript framework that makes building frontend applications easy. Coupled with vue-router, we can build high performance applications with complete dynamic routes. Vue-router is an efficient tool and can handle authentication in our Vue application seamlessly. In this tutorial, we will look at using vue-router to handle authentication and access control for different parts of our application. Getting Started To begin, install Vue cli and create a vue application with it: $ npm install -g @vue/cli $ npm install -g @vue/cli-init $ vue init webpack vue-router-auth Follow the setup prompt and complete the installation of this application. If you are not sure of an option, simply click the return key (enter key) to continue with the default option. When asked to install ...

When developers start exploring the JavaScript programming language, the concept of Scope and Closures can be expected to be a hurdle to their progress. The reason behind this behavior is the complexity of the other concepts that lie under the hood of this feature in JavaScript. However, a solid understanding of JavaScript’s Scope and Closures is so important that a good grasp of the concept will significantly augment the developer’s knowledge and prepare him/her for many years of writing elegant code. In his book: You Don't Know JS: Scope & Closures, Kyle Simpson took the time to go over the concept in detail, treating each underlying logic as a single entity that merits intense study. Why do we need Scopes? For us to see the need for a scoping mechanism, we will use variables as a ca...

I Used The Web For A Day With Just A KeyboardI Used The Web For A Day With Just A Keyboard Chris Ashton 2018-07-04T13:30:05+02:00 2018-07-10T16:18:00+00:00 This article is part of a series in which I attempt to use the web under various constraints, representing a given demographic of user. I hope to raise the profile of difficulties faced by real people, which are avoidable if we design and develop in a way that is sympathetic to their needs. Last time, I used the web for a day without JavaScript. Today, I forced myself to navigate the web using just my keyboard. Who Uses The Keyboard To Navigate? Broadly, there are three types of keyboard users: Mobility-i...

CSS Grid Level 2: Here Comes SubgridCSS Grid Level 2: Here Comes Subgrid Rachel Andrew 2018-07-03T13:00:47+02:00 2018-07-10T16:18:00+00:00 We are now over a year on from CSS Grid Layout landing in the majority of our browsers, and the CSS Working Group are already working on Level 2 of the specification. In this article, I’m going to explain what is currently part of the Working and Editor’s Draft of that spec. Note that everything here is subject to change, and none of it currently works in browsers. Take this as a peek into the process, I’m sure I’ll be writing more practical pieces as we start to see implementations take shape. CSS Specification Levels The...