Exploring the new way to structure components in Vue applications

Image for post
Image for post
Photo by Stefany Andrade on Unsplash

Introduction

Vue has been around for a while now. It has been gaining immense popularity within the developer community and has managed to grab the attention of many react/angular developers. Much of this was owed to the absolutely simple and intuitive component APIs that exist in Vue. With Vue 3, however, the makers have decided to change(or introduce an alternative) the way we make components in Vue. This is the composition API.

When initially released, it received mixed reactions from the community but slowly and surely, most Vue developers have come to realise how easy it is to use and how…


A few uncommon but useful typescript types - with examples

Image for post
Image for post
Photo by TR Davis on Unsplash

Introduction

Typescript is awesome! It allows developers to use primitive and user-defined types in javascript. Lately, more and more javascript frameworks are providing firsthand Typescript support; Angular, Vue, NodeGUI and many more.

If you haven’t tried it out yet, I would highly recommend it. You can get started here.

Disclaimer: This tutorial assumes basic knowledge of javascript and typescript. If you’re not familiar with them, use the resources provided above to learn more before continuing with the rest of the article!

Let us now look at a few different “types” in typescript and how they can be used.

Optional types

Most readers probably…


A quick React Custom Hooks tutorial — with examples!

Image for post
Image for post
Photo by Tatiana Rodriguez on Unsplash

Introduction

React introduced hooks in the v16.8 release and they’re just plain fantastic! They’ve enabled developers to extract business logic out from components that weren’t otherwise possible with class-based components. This not only made the code shorter and cleaner but also provisioned for the sharing of logic and not just UI components in react code. If you’re new to hooks and want to learn more about them, head over to the official documentation.

React has extracted a lot of its functionalities out as hooks - state, effects (component lifecycle methods, basically), refs, context and much more. But, along with all this…


Image for post
Image for post

Ever wondered how facebook’s create-react-app handles the bundling and bootstrapping behind the abstraction of yarn build? Let’s try to bootstrap our own react application using webpack 4 and babel. 😸

I’ll be using yarn through this article but please if you use npm, well, that’s fine too. 😁

What is webpack and babel?

Essentially, converting any es5+ code to its browser compatible version is a two step process; Transpiling and bundling.

Transpiling is the process of converting modern javascript code to a form that is understood by even older browsers. Babel takes care of this. Babel also has various presets which allow for transpiling different…


Image for post
Image for post

So this is going to be a super short primer for people who’re trying to write JOI extensions. I recently wrote an extension to validate mongodb object IDs and I’ll document the steps for the same here; Let’s get started

Joi uses something called as extension objects to “extend” its functionality.
These objects typically look something like this:

{ base: any_joi_base_function_you_want_to_use, name: 'the_name_of_your_validation', language: { // This is where you'd store error messages 'key_name': 'Error messages', }, pre(value, state, options) { you can parse the object value here or even add a base check and throw error }, rules: [{…


Not so long ago, I got myself into a “many-to-many associations” soup (Yes, me is noob 😓). Hence, I am composing this tutorial as a follow up to my previous post in order to help anybody avoid the certain common pitfalls.

But, before we begin:

Disclaimer: It is assumed that anybody reading this article works with nodeJS, sequelize and has a good understanding of how databases work.

Image for post
Image for post

To begin with, let me explain a (highly) simplified version of the issue I faced. Let us assume that we are to maintain, create and fetch records for a certain vehicles showroom. We…


Image for post
Image for post

Ever spent hours of your time trying to accumulate data from multiple tables and serve a combined response but only ended up with buggy code? So did I. Associations were my way out, I figured. As a novice, after spending hours trying to parse the incomprehensible sequelize docs, consulting a few seniors and tinkering my way around it, I decided that the internet finally needed a tutorial on associations in sequelize.

So if you’re looking for a comprehensive guide through the same or simply want to understand associations better, your search ends here. 😉

Disclaimer: This article assumes that the…

Shubham Zanwar

@szanwar22 on twitter :D

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store