Getting user input is crucial for many web apps as it enables the web app to give the user a more personalized experience. However, getting user input is not so straightforward because you have to: Make sure you are getting the right input from the user Make sure the input is in the correct format […]
When a user selects a file, you may need to know what type of file the user selected to decide how to handle the file. In JavaScript, you listen to the change event on the file input. You get the file name and call .split(‘.’) on it. This creates a new array using “.” as […]
Some applications like Gmail and Facebook have a search feature where as a user enters some input, the input is sent to the server and the results are used to provide the user with results closer to what the user is looking for. To implement this behaviour in Vue, we use a library called debounce […]
When loading data in Vue.js applications, you may want to display some form of loading indicator so your users will know that something is happening. Vue.js provides us with the v-if directive which allows us to conditionally show/hide any piece of markup. In the snippet below, we have our data property loading which is set […]
In this article, you will learn to Capitalize Text with JavaScript. JavaScript has built-in methods like .toLowerCase() – to convert text to lower case – and .toUpperCase() – to convert text to upper case. However, there’s no built-in method to convert text to title case i.e. “How Are You”. However, we can combine .toUpperCase() with […]
There are a few common operations that are performed on lists: add a new item, search through the list, and deleting an item from a list. The snippet below shows how to delete an item from a list. list is an array of names. In the <template>, we render the list using v-for. For each […]
A common use for data binding is to conditionally alter the classes and styling of an element. The snippet below shows how this can be achieved: By default, the <p> tag is styled to have a red text color. However, <p> tags with the .active class get styled with a blue text. Since the data […]
There are a couple of ways to download media assets on the web. One of them involves making an HTTP request to the location of the media asset and using JavaScript inbuilt methods to manipulate the asset. To get started, we add a button to our markup that would trigger the download. We add an […]
Single-page applications (SPAs) continue to gain more and more popularity every day. As the complexity of these SPAs increases, the need for dynamic/realtime data increases as well. APIs provide a way to bridge the gap between the SPA and the backend. There are times, however, when the required API is not available or it’s just […]
Filters are part of many applications as it helps the user sort through a wide range of items. We can use the combination of v-model and computed properties to achieve this. In the snippet above, we have a list of items and an input field. As you type into the input field, the list gets […]
Sometimes you have a list of items you would like to add to, based on some user interaction or event. The snippet below gives a base template to achieve this. In the snippet above, we have a list, an input field and a button. When the button is clicked, the value of the input field […]
A Vue component to fetch and render a list Framework – Vue Use cases Recipe Todo list
Detect a user device screen orientation Framework: Vue Use cases Automatically launch fullscreen video on mobile when the user changes to landscape mode
Detect if a user has navigated away from the web page. Framework: Vue Use cases Stop animation while the page is in the background Pause video in the background
The idea of Continuous Integration (CI) stems from the principle that developers should push code more frequently to a shared repository like GitHub. With that in place, tests can be written by the developers to verify the integrity of the code. Then a CI service can pick up the code, build it and run tests […]
