Posts

Showing posts from 2019

angula rtree

Angular Tree: ts:     entitiesTree = [     {       title: 'Backlog',       child: [         {           title: '3A4 Backlog',           child: [             {               title: '3A4 Backlog'             }           ]         }       ]     },     {       title: 'Bill Of Material (BOM)',       child: [         {           title: 'dummy title'         }       ]     }   ];

async vs promise

    /////////////////////////////////////////////////////////////////////////////////////////////     //////////////////////////////////////// Async ////////////////////////////////////////////     /////////////////////////////////////////////////////////////////////////////////////////////     // const promise = fetch('https://jsonplaceholder.typicode.com/todos')     // promise     //     .then(res => res.json())             //     .then(data => console.log(data))     //     .catch(err => console.log(err))     const getBlogs = async (name) => {         const fruits = {             "one": "One 1",             "two": "Two 2",             "three": "Three 3"         }         await delay(2000);         return Promise.resolve(fruits[name]);     }     // for small     const makeMe = async () => {         try {             let a = getBlogs('one');      

Create README.md files

Create README File Online Tool:  https://www.makeareadme.com/ Dummy File.

Module Bundel

package.,json {    "name" :  " moduletutorial " ,    "version" :  " 1.0.0 " ,    "description" :  " creating module " ,    "main" :  " dom.js " ,    "scripts" : {      "test" :  " echo  \" Error: no test specified \"  && exit 1 " ,      "start" :  " webpack "   },    "author" :  "" ,    "license" :  " ISC " ,    "dependencies" : {      "webpack" :  " ^4.39.3 " ,      "webpack-cli" :  " ^3.3.8 "   } } webpack.config.js var   path   =   require ( " path " ); module . exports   =  {     entry: ' ./app.js ' ,     output: {         path:  path . resolve (__dirname),         filename:  ' main.js '     },     mode:  ' development ' }

css grid

. gchild1  {      display :  grid ;      // grid-template-areas: "grr grl";      grid-template-columns :  repeat ( auto-fit ,  minmax ( 300px ,  1fr ));      // grid-template-rows: 1fr;      // column-gap: 1%;      . grr  {        background :  $color2 ;     }      . grl  {        //   margin-right: 10px;        background :  $color2 ;     }   }    . grr  {      // grid-area: grr;      background :  $color3 ;      padding :  10px ;      margin-right :  5px ;   }    . grl  {      // grid-area: grl;      background :  $color3 ;      padding :  10px ;      margin-right :  5px ;   } } < div   class = " grow " >              < div   class = " grl " >                  < div   class = " gchild1 " >                      < div   class = " grl " >                          < h5 > 1._) What is Lorem Ipsum? </ h5 >                         

async css loading..

< link   rel = " stylesheet "   href = " ./css/cui-standard.min.css "   media = " none "   onload = " if ( media   !=' all ' ) media =' all '" >      < link   rel = " stylesheet "   href = " ./css/style.css "   media = " none "   onload = " if ( media !=' all ' ) media =' all '" >      < noscript >          < link   rel = " stylesheet "   href = " ./css//cui-standard.min.css " >          < link   rel = " stylesheet "   href = " ./css//style.css " >      </ noscript >

Javascript Prototype to Class

Prototype /**         * Leve 0         */          function   Animal ( name ) {              let   obj   =  {};              obj . name   =   name ;              obj . myName   =   function () {                  console . log ( obj . name )             }              return   obj         }          let   dog   =   Animal ( ' puppy ' );  // --> Actually  its creating own obj so memory will losss will happen          let   cat   =   Animal ( ' cat1 ' );  // its creating multiple obj for each animals          console . log ( dog . name );          console . log ( dog . myName ());                   /**         * Leve 1         */          function   Animal ( name )  {              let   obj   =   Object . create ( Animal .prototype);              obj . name   =   name ;              return   obj ;         }          Animal .prototype. myName   =   function   ()  {              console . log ( this . name )       

Async load css

Async load css        

Service worker fetch all data

main.js // Make Sure service work is supported if ( ' serviceWorker ' in navigator ){ console . log ( ' Service work is supported ' ); window . addEventListener ( ' load ' , () => { navigator . serviceWorker . register ( ' ./sw_cached_pages_V2.js ' ) . then ( reg => console . log ( " Service Worker: Registered " )) . catch ( err => console . log ( ` Service Worker: Error : ${ err } ` )) }) } sw_cached_pages_V2.js // Service Worker Fetch all data from sites const cacheName = " v2 " ; // call install Events self . addEventListener ( ' install ' , function ( event ) { }); // call Activate Events self . addEventListener ( ' activate ' , e => { console . log ( " ServiceWorker: Activated " ); e . waitUntil ( caches . keys (). then ( cacheNames => { return Promise . all (

Service worker fetch Particular data

main.js // Make Sure service work is supported if ( ' serviceWorker ' in navigator ){ console . log ( ' Service work is supported ' ); window . addEventListener ( ' load ' , () => { navigator . serviceWorker . register ( ' ./sw_cached_pages.js ' ) . then ( reg => console . log ( " Service Worker: Registered " )) . catch ( err => console . log ( ` Service Worker: Error : ${ err } ` )) }) } sw_cached_pages.js // Caches Datas const cacheName = " v2 " ; const assets = [ ' /css/cui-standard.min.css ' , ' /css/grapes.min.css ' , ' /grapes.min.js ' , ' /img/favicon.png ' ] // call install Events self . addEventListener ( ' install ' , function ( event ) { event . waitUntil ( caches . open ( cacheName ). then ( function ( cache ) { return cache . addAll ( assets ); }) ); }); // call Activate Events self . addEvent

Fetch vs Axios

Fetch JSON post request let url = 'https://someurl.com' ; let options = { method : 'POST' , mode : 'cors' , headers : { 'Accept' : 'application/json' , 'Content-Type' : 'application/json;charset=UTF-8' }, body : JSON . stringify ({ property_one : value_one , property_two : value_two }) }; let response = await fetch ( url , options ); let responseOK = response && response . ok ; if ( responseOK ) { let data = await response . json (); // do something with data } Axios JSON post request let url = 'https://someurl.com' ; let options = { method : 'POST' , url : url , headers : { 'Accept' : 'application/json' , 'Cont