Techformist

Wait for User to Stop Typing in Search Fields on Vue UI

📅 Jan 23, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

Let us see how we can easily accumulate requests when user types in a search (or auto-complete) fields and collate them in one go. When implementing the ‘instant search’ fields in Vue, the cycle of events is pretty standard - User keys in characters System keeps getting those characters and sending them to the server for processing System reacts to changes from server and displays search results The same cycle repeats for fields include auto-complete that take user action and return stuff from server.

Format Data Using Vue Filters

📅 Jan 22, 2019 · 📝 Jun 9, 2020 · ☕ 1 min read

Vue filters provide an excellent way to format data on the UI. Define Vue filters using a filter: block in single file components, or use global filters. Consider the following use cases - Purchase date is stored in yyyy-mm-dd in DB, but you have to display dd-mm-yyyy format Cost data needs to be displayed in currency of user’s locale Apply separators in bill number for better readability These and many more are easily accomplished in Vue filters.

Simple Form Validation in Vue

📅 Jan 21, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

You find forms everywhere in a data-driven application. Forms, as a rule, need some validation on the client-side to nudge users to fill in data in line with what we want. These validation are easy to implement in Vue. Consider an example that includes Vuetify for styling the UI -

Top Javascript Frameworks for 2019 (Yes, clickbait)

📅 Jan 20, 2019 · 📝 Jun 9, 2020 · ☕ 3 min read

tldr; There is no spoon. Longer version There is no one answer. Choose one, and get the job done. Even longer version Javascript is versatile and blah blah. But, how should you begin your search for the right framework? It took me no less than 3-4 weeks to get acclimatized with the nuances and settling down with a favourite framework.

Using Props in Vue Router

📅 Jan 19, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

Vue router can pass props to the view on invocation. This can be super useful when same views cater to different contexts, and the context is known at the time of clicking URL. Vue router just catches the context and passes it on to the view. For example: if you want to show “My Todos” to all users, and “All Todos” to administrators.

VueJS Proxy Error for Backend Connection

📅 Jan 18, 2019 · 📝 Jun 9, 2020 · ☕ 3 min read

VueJS has been my ‘go to’ front-end development framework for the last two quarters. I use VueJS with Laravel, FeathersJS and AdonisJS, and cannot just stop loving the development cycle. While you are developing the backend and frontend on same machine, and, if you fly solo - you end up using the same development machine for all purposes.

Authentication in Vue Router

📅 Jan 17, 2019 · 📝 Jun 9, 2020 · ☕ 3 min read

Vue router has a simple job - receive client-side requests and invoke the view that needs to be rendered in the browser. That is also a powerful job. Typically, this is what you see in a Vue router - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 // client/router.

Persistent Storage in VueJS

📅 Jan 16, 2019 · 📝 Jun 9, 2020 · ☕ 3 min read

VueJS is massively useful tool. And, I love churning out SFCs like there’s no tomorrow. Vue helps us provide a super user experience. Combine it with Vuetify, Buefy and the like, and you have an application that is loved by all. Except, when the user hits F5 in the browser.

Using Lucid vs. Database Raw in AdonisJS

📅 Jan 15, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

Lucid ORM, the official ORM of AdonisJS, is based on knex.js. It is one of the friendlier ORMs that provides the ease of using a readable syntax along with a better performance than some of the feature-heavy ORMs. But, I have been recently torn between using one or the other.

Manage incremental changes to database in AdonisJS

📅 Jan 14, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

Use database migration utilities in Adonis to its complete potential. Carry out incremental updates - may it be a new table, or changes to existing table using distinct migration files that are version controlled. You have a beautiful Todo application that has a todos table with the following columns: description status end_date Now, let’s say our users ask for a new field called planned_end_date.

Handle Creation of Single or Multiple Records in AdonisJS

📅 Jan 13, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

Support creation of a single record or a group of records using same business logic and in the same controller in AdonisJS. Typically you create the following controller to handle record creation - 1 2 3 4 5 6 // TodoController.js async create({ request, auth }) { const data = request.

Custom Configuration Parameters in AdonisJS

📅 Jan 12, 2019 · 📝 Jun 9, 2020 · ☕ 1 min read

AdonisJS stores its configuration values in config folder in root. For e.g. you will set database environment values in database.js, authentication params in auth.js and so on. You can update or set new configuration parameters required by your application in those files. You could also create a new configuration file for your application variables and refer to those values from services, controllers, or from any place where it makes sense.

Pagination in AdonisJS

📅 Jan 11, 2019 · 📝 Jun 9, 2020 · ☕ 3 min read

AdonisJS provides a standard way to handle pagination and query only a pre-defined number of records in your query result. A typical controller without any pagination looks like the below - 1 2 3 4 5 6 7 8 // TodoController.js const Todo = use("App/Models/Todo"); class TodoController { async index({ request, response, view }) { return await Todo.