Animations on Scroll – Made Easy!

Have you ever wanted to rapidly increase the usability of your site or the application? It’s going to be an undoubted yes because that’s what every developer dreams of making it – right? There are various ways that we can experiment with our sites, some work better than others and some require more time to get working! Even if you’ve found the user experience challenging, you can make it better, and I’ll show you how!

Anything that doesn’t jump off the page as interesting, exciting, funny, or relevant is liable to get slashed user experience. Most people will at least have a glance throughout the page just by scrolling since they’re not intended to read the entire page content at first. So, scrolls are one of the perfect places to grab the attention of the users and to enhance the usability of them. If you make scrolling, an exciting and an addictive one, you can boost the user’s experience while being able to brand your site and keep them engaged!

Let’s jump right into the ways in which we can implement the animations on scrolling. Animation on Scroll (AOS) is a perfect library that makes animations really easy and fascinating while scrolling the page. I recommend taking a look at the AOS official docs which has ready to use templates with several use cases. So the idea of this blog is to cover the initial setup for implementing the scroll animations in your project which is not explained in their doc.

I’ve listed the initial setup for Angular, Vue.js and React projects since they’re the most popular amongst the biggest front end frameworks. Let’s get them done one by one. But in general, we need to add AOS to our dependencies.

Run npm install aos --save

Either run npm i or add the CDN sources for CSS and JS in your index.html file.

CSS: <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

JS: <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Next comes the initialization part of AOS. A piece of common information on initialization of AOS is, we always need to import and init them in the app or any other parent level component of which we need to do animations. This is due to the fact that AOS has observers in it, so whenever a new element appears in DOM, it is supposed to animate them properly.

  1. Initialize AOS in Angular

    We need to initialize the AOS in your app.component.ts as follows,
    a. Import the AOS library in your component
import * as AOS from 'aos';

b. We need to initialize the AOS library during the initialization of your component. So let’s initialize AOS on the ngOnInit lifecycle hook.

AOS.init();
  1.   Initialize AOS in Vue.js

a. Import the AOS library in main.js file.

import * as AOS from 'aos';
import 'aos/dist/aos.css';

b. We need to initialize the AOS library during the creation of your component. So let’s initialize AOS on the Created() lifecycle hook. Add the following snippet in the new Vue portion of the main.js file.

new Vue({
   created () {
       AOS.init()
   },   
   router,
   store: Store,
   render: h => h(App)
}).$mount('#app');
  1. Initialize AOS in React

The steps are apparent now so let’s just have a glance at the following code snippet to understand the flow in React.

import AOS from 'aos';
import 'aos/dist/aos.css';
.
.
.
 componentDidMount(){
   AOS.init({
     duration : 2000
   })
 }

Initialization is now complete! Try adding data-aos=”fade-up” to any of your HTML element and admire the animations on scrolling. Refer the AOS docs for more customized scroll animations.

Reference

  1. https://michalsnik.github.io/aos/

Routing in nativescript-vue

I’m a big fan of Vue JS. So, when heading into mobile app development, Native script was the one thing which made me excited to work on. For those who are new to this, Nativescript is an open source framework which is used to create true native mobile apps for both Android and IOS. Nativescript supports Angular, Vue, Vanilla JS and Typescript. It is known for its performance, compared to other mobile app development frameworks like react native and ionic.

Here in this blog, we are going to focus on nativescript-vue routing…

Nativescript-vue is basically, Nativescript core combined with Vue JS.

nativescript

 

How do we implement routing in nativescript-vue?

The shocking news here is, Vue routing is not supported in nativescript-vue. The Nativescript community is currently working on it. But for now, we have to go with manual routing methods.

oh my god

 

Let’s go ahead with manual routing…

To implement manual routing, you just need to know the following three methods:

  1. $navigateTo
  2. $navigateBack
  3. $showModal
  • $navigateTo:

The functionality of $navigateTo is to redirect from one component to another. This method can be used in the view and in the methods like given below:

Consider a scenario where the current component should be redirected to homePage component on click of the “Go” button. We use the $navigateTo methods like:

<Button text="Go" @tap="$navigateTo(homePage)" />

Or we could add in the method like :

<Button text="Go" @tap="goToHomePage" />

goToHomePage() {

    this.$navigateTo(HomePage);

}

There might be a scenario where we need to pass data from one component to another component. In that case, the data can be passed as props using the $navigateTo method by.

this.$navigateTo(ComponentName, {

  props: {

   // pass the data as an object here

 }

});

 

What else we can do with “$navigateTo”?

This method also gives us properties to apply transitions while navigating to the next page.

There are three ways to set the transition:

  1. transition: Applies on all platforms.
  2. transitioniOS: Applies only to IOS.
  3. transitionAndroid: Applies only to Android.

The default transition is “platform”.

this.$navigateTo(NextComponent, {

  transition: {

     name: 'flip',

    duration: 2000,

   }

});

The below listed are the available transitions:

  1. curl (same as curlUp) (iOS only)
  2. curlUp (iOS only)
  3. curlDown (iOS only)
  4. explode (Android Lollipop(21) and up only)
  5. fade
  6. flip (same as flipRight)
  7. flipRight
  8. flipLeft
  9. slide (same as slideLeft)
  10. slideLeft
  11. slideRight
  12. slideTop
  13. slideBottom

Another important property is clearHistory.

“clearHistory” is used to clear the navigation history. It accepts a boolean value. Setting it to “true”, clears the navigation history.

There are still a few other things that $navigateTo method can do. Refer here for the properties that are accepted by this method.

  • $navigateBack:

This method is used to navigate back to the previous page. It is used like:

<Button text="Back" @tap="$navigateBack" />
  • $showModal:

This method is used to display the component inside a modal.

For closing the modal we use “$modal.close”. Props are passed as an option to the $showModal as the following:

this.$showModal(Component, { props: { message: “Props is passed here”  }});

That’s it…. We have now mastered manual routing in nativescript-vue by learning simple three methods. Hope this blog was helpful and let me know your thoughts on this in the comments!

Thanks for reading!

Reference:

https://nativescript-vue.org/en/docs/routing/manual-routing

 

Lint Driven Development

It is no wonder that “Lint Driven Development – LDD” is one of the most essential development approach that every developer should follow up! It is an integral part of every developer’s toolbox! If you could agree my statement, then you’re already on the track of super cool development. If not, then I can get you a step further towards that through this blog.

What is linting?

You write code. Probably a lot of code. And you make mistakes. Probably a lot of mistakes. Sometimes your mistake is a real bug that can be fixed. Sometimes it’s just an unclear coding style which may seem trivial at first but they become patently important as the codebase grows and as more people stick their hands in it. You can’t always focus on fixing this inevitable mistakes that you do! Isn’t it? Because, there is probably no practical way to make it impossible to write sloppy and unclear code, but it is fascinating to consider how tooling has evolved to make it harder. One fine tooling is “Linters” which understands you and your code.

Linter is part of the style guide. It’s a small piece of software that automatically checks if your code has any stylistic or potential errors and meets the predefined code convention rules. You don’t have to manually go through the code base to check style and any errors. Linting helps us in two ways. First, it looks for code that will potentially break. Second, it provides a style guide for the development team to follow.

Why Linting is Important?

Some great movies involves compelling stories, and colorful screenplays that are easy to watch and understand. From that aspect, the job of a developer is similar to that of the movie director, since the code has to be easy to read and comprehensive. I know it’s pretty hard to focus on code quality when you’re under pressure to meet the next deadline, but if you’re thinking long term, you definitely need to write code that’s readable and maintainable.

In addition to its readability and maintainability there lies an important third reason which is lower technical debt which allows speeding up long term software development since it can be reused without involving any future developer’s time to work on fixing the old bugs and styling the code.

How Linters prevent our problems?

Linting tools throws warnings about certain types of code that can lead to common problems. Some are quite major. As a Javascript Engineer, I’ll list down some major problems in JS code and how linters could prevent those problems!

Problem #1
Most of us have got this one common question in our mind that our code works in development but why not in production? We all knew that most modern web stacks support minification, but neither the minifiers nor the browser tell us when are we missing semicolons. But a missing semicolon can break minified javascript and so it stops in production. So Linters notify you about the missing semicolons, braces, etc..

Problem #2:

Have you ever created a variable called “id” or “name” or “value”? Yeah, so has every other developer in history, and people who work on the same codebase as you is not an exception. And if someone forgets to declare all their variables with var, as they can overwrite each other unexpectedly. The scope of the variables is gone as well as your code.

You don’t always need to rely on your reviewers to find mistakes in your code and in some cases it takes too much of your reviewer’s time to find some sloppy mistakes or even they might miss it completely. Linting your JS can prevent potential XSS security holes, readability problems, and many more!

Linting Tools

Linters comes with a lot of tools that are capable of finding stylistic errors and sloppy mistakes in every technology that we use. Among many JS linters, ESLint seems to be the best available linter as it is completely plug-able, every single rule is a plugin and we can add more rules at run-time. It gives concise output, and also includes the rule name by default so it’s always easy to know which rules are causing the errors. We also have Linters for most languages like TS, CSS, HTML, Python, etc..

There are different means by which one can use linting tools to improve the code quality. To mention a few,

Linting manually, in the browser

Copy and Paste your code into JSHint or CSSLint or HTMLHint or any other static code analysis tool to check for some interesting lint errors. This might be the quickest way to get started with linting.

Linting from your code editor

Many code editors have support for configurable linting, such as VSCode. Here is the guide to configure Linters in VSCode. It has many extensions for all of the linters above. Grab one and have it check your code automatically which is really great since you’re already in your editor, where you can clean your code up simultaneously while you write it.

Linting from the command line

If you’re using a command line tool like Npm, you’re ahead of the curve. Just install a linter of your choice and follow some commands to get notified of your errors in code.

Linting as part of the build process

This is the best way to ensure that these types of problems never see the light of day. I recommend adding a flag to the ng serve and the ng build commands that automatically runs ng lint before each build and causes a build failure on any linter rule violation.

Even if you set up a linter, it might warn you against invalid code but it cannot stop you from pushing this code to the repo. This is where Git pre-commit hook comes into the picture. It’ll restrict the developer from committing the code if it doesn’t pass the rules available in .git/hooks. For information about Git Hooks, please visit here.

It is NoteWorthy!

I recommend turning off most of your linter’s settings when you start using it, so that you have a minimal set of errors to start with. Consider the ones it throws out, learn what they mean and then fix them. Later, re-enable another setting and repeat until you understand all the rules. I understand, it takes some time to understand everything and to get them fixed up. Let me copy out some words from Bruce Lee.

“I fear not the man who has practiced 10,000 kicks once,

         but I fear the man who has practiced one kick 10,000 times.”

– Bruce Lee

Software development is pretty much always slower than anyone wants it to be. It takes time. Sometimes you just have to be patient enough to turn out the code you need to write. No matter how long you’ve been in this field, you should keep practicing the craft of coding.

Conclusion

Linting is a vital part of our workflow, and will definitely help us improve our skills. If you were not using linting, I hope this blog convinced you a bit to configure lint to your code. I think Linting is one of the traits that makes a good developer! What do you think makes a great developer? Love to hear from you!

A dive into “Vuex” !

Let’s meet our hero – “The Vuex”!

Vuex is a state management library that is used commonly in vue.js. But why do we use it? Vuex is very much useful in passing the data from one component to another component.

We can pass data from the parent component to child component using props, but when the child component has many nested siblings, the data passing between the child components becomes difficult and that’s where “Vuex” comes into play !!

Store :

A store is a global object that keeps track of all the state changes of the app across the components.

But what makes it different from other objects?

  • Vuex stores are reactive – every state changes are updated efficiently in the store
  • Vuex stores are read-only – It is not possible to change the state properties directly in the store. The only way to change a store’s state is by explicitly committing mutations.

We can create a store by creating an instance of vuex like :

const store = new Vuex.Store({ state: {} })

In order to integrate vuex with vue, we have to add the store in the vue instance by :

const App = new Vue({ store })

In order to keep track of the state changes, we have to access the state in the “computed” property in vue component

Now we have created a store, but how do we access the store data?

We access the store by the following methods :

  • Mutations
  • Getters
  • Actions

Mutations :

These are functions used to update the state. They behave like events and we have to use “commit” in order to invoke them.

To be clear, we define the mutation by :

const store = new Vuex.Store({

mutations: {

  yourMutationFunction (state, payload) => {

     }

   }

});

We invoke the above mutation by:

this.$store.commit(MUTATION_NAME, {payloadData});

Getters :

Applicable to a scenario where we have to get a value from the store that is obtained by manipulating the state data, then we use “Getters”. Having these manipulations in the store makes the “Getters” reusable in other components as well.

Getter functions are created by :

const store = new Vuex.Store({getters: { yourGetterFunction : (state) => ( ) } });

And we invoke the getters by,

this.$store.getters.yourGetterFunction

We also have a helper method called “mapGetters” to invoke a getter function in the component.

Example :

import { mapGetters } from ‘vuex’

export default {
 // some code ..
 computed: {
   …mapGetters([   // we use spread operator to append the mapGetters to the computed object
    ‘yourGetter’
   ])
 }
}

But when we have no manipulation in the state, we have to use mapState helper to fetch the data in the store directly from the store.

computed: {

  …mapState([‘yourStateName’]);

}

Actions :

They are generally functions, that is invoked to perform some backend calls or any other asynchronous operations before mutations. Actions keep track of the mutation changes correctly in case of asynchronous operations.

actions: {
 yourActionMethod({ commit }) {
   commit(‘mutationMethod’)
 }
}

Actions are invoked by dispatching them using store object or mapActions helper function

Example :

   this.$store.dispatch(‘actionName’)

Or in components by :

methods: {
   …mapActions([‘actionName’])

}

Thus, the flow for the state from component to store will be like :

Sources :