8 Apr 2021

Vue Component Registration Global & Local Scope


Hi guys, How are you?

Today we will try know that How we can create component in Vue js Globally & Local.

To create a component in Vue is very easy. It can be exported from & import to any other Vuejs project. You can find lots of Vuejs component on GitHub.

Global Scope Components

A component that is registered with Vue.component() static method of Vue Object. And any Vue instance can use it. For better understanding take an example javascript variables. A variable which is create outside of a javascript function is called Variable with Global Scope.

Vue.component("componet-name", {
template : /*    */
});

Local Scope Components

Vue local componet are available to a Vue instance in which the componet are defined. Defined componets are pass through Vue instance as object value `components`. see it in below Example.

const componet1 = {
//defining the template for Vue UI Component

template : "<div> Hello, I am Vue Component </div>"
};
const componet2 = {
template : "... "
}; 

var vm = new Vue({

componets : {
     'component-a'  : componet1,
     'component-b' : componet2
   } 
});


2 Apr 2021

BabelJS JavaScript Compiler & JSX( Javascript + XML)


In this post we will know about What is Babeljs & why the babeljs has been made? What is main work of Babeljs?

BabelJS is a javascript compiler which help to translate new version of javascript syntax like ES2020 to Older version of javascript syntax which will help to run javascript code in all modern & as well as older web browser.
What's Reactjs? Introduction to reactjs Front End UI library

Input - ES2020 (Nullish Coalescing)

In new javascript newer version of ES2020 has been introduced a new Js operator. that's Nullish Coalescing .

    
function greeting(input) {
  return input ?? "Hello world";
}
      

Output - To Backward JS Syntax
This is the output of above one given js code example By BabelJS. Babeljs compliles ES2015+ version of Javascript to lower version of JS. Which helps to achieve backward compatibility for most web browsers.

function greet(input) {
  return input != null ? input : "Hello world";
}

Import BabelJS CDN

Copy the BabelJS CDN script tag to webpage's head section.


<head>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

BabelJS Compiler

For Norma Script ( Without ESM Module System).


Add type Attribute to Script "text/babel". eg.
  <body>
  
  
  <script type="text/babel">
  // JS Codes
  </script>
  
  </body>
  

For ESM (Module)


To work with ES Module, add an extra custom Attribute data-type="module" to above one Normal Script tag. It's changed to Module module.
  <body>
  
  
  <script type="text/babel" data-type="module">
  // JS Module Codes
  </script>
  
  </body>
  

1 Apr 2021

Threejs MeshMatCapMaterial Demo/Introduction/Explained


in this post, I am going to share knowledge, demo about and details explanation about Threejs THREE.MeshMatCapMaterial .

MeshMatCapMaterial is a Material type like other ( MeshBasicMaterial, MeshPhongMaterial etc.) which is defined by MatCap texture. Generally MatCap texture having a lite Color Sphere Image. From which material color & shading are encoded & used over THREE.Mesh.

28 Mar 2021

Introduction to Framer Motion |Framework Based React Library


framer motion library production ready prototype animation

Hi Today we are going share with a most popular & powerful framework that Framer Motion. Framer Motion is a framework which is usually use to create Awosome User Interface (UI). This framework depends over Reactjs and React DOM.

Framer Motion is a open source React based library to power the your projects by production-ready animations.

25 Mar 2021

Introduction to React Js | Front End Js Library for Building User Interface


ReactJS is a javascript library for building intractive user interface (UI) for Web Development.
ReactJS is used to create a intractive & daynamic User Interface in Web Browsers. Here Dynamic means- A webpage which create different types of page on User input without refreshing the current website. And Intractive means here - A page with Reactjs Looks great in front of user, Because Reactjs is mainly focus to Front-End.

ReactJS
  • Authors - Jordan Walke
  • Developers(s) - Facebook and community
  • Initial release - May 29, 2013; 7 years
  • Repository github.com/facebook/react
  • • Written inJavaScript
  • PlatformWeb platformTypeJavaScript libraryLicenseMIT License
  • • Websitereactjs.org

Import CDN

if you want to import Reactjs as CDN under your web projects. Keep below code under your webpage's <head/> section.


<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>

<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> 

Import Reactjs as ES6 Module

if you want to add Reactjs to your project via ES6 Javascript Module. Then copy below bunch of code and put it under <body /> HTML element of your web application's webpage.

Div Element with id attribute is an Root Node for your ReactJS Application.
Script tag with Attribute type="module", indicated that this script tag is a type mode, which is quite differ than normal script tag with Attribute type="text/javascript".
SkyPack.dev is website that provides React & React-DOM API through ES6 Module.


<
div id="root"></div>
<script type="module">
            import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
</script>

Resources References