Front-end Developer Code

+========= What is TypeScrpt ? ==========+ Typescript is not entirely new language , it 's a super set of JavaScript. that means any valid JS code is also valid typescript code . Additional feature : - -->      Strong Typing / static typing , -->      Object oriented features ( class , interfaces , constructors , access modified like public and private , fills , Properties , Generics and so on . ) -->      Compile time errors -->      great tooling ( i like Intelligence that we get in code editors ) -->      Typescript is a super set of JavaScript   Many Browser Transpile Our TS code , into JS . ++========= Use full Commands below ============++ ``` npm install -g typescript ( Install typescript Globally ) tsc -...

menu . css ({ position: 'fixed' , top: 0 , left: 0 , transform: $interpolate ( 'translate({{x}}px, {{y}}px)' )({ x: scope . position . x , y: scope . position . y }) }); scope . menu = menu ; scope . menu . bind ( 'click' , closeMenu ); $timeout ( function () { scope . menuHeight = menu . height (); scope . menuWidth = menu . width (); //alert('Window Height :'+scope.windowHeight+'Menu Height:'+scope.menuHeight+'Menu Top'+scope.position.y); var menuHeight = scope . menuHeight ; var menuWidth = scope . menuWidth ; var menuLeft = menuWidth + scope . position . x ; var childLeft = menuLeft + menuWidth ; var gChildLeft = menuLeft + ( menuWidth * 2 ); var menuBottom = menuHeight + scope . position . y ; var menuHightbottom = menuBottom + menuHeight ; var gMenuHightbottom = menuBottom + ( menuH...

Navigate to vendor/magento/Magento_Checkout/view/web/js/view/minicart.js Under initialize: function, you will see Replace the function with this code php bin/magento cache:clean $ ( '[data-block="minicart"]' ). on ( 'contentLoading' , function ( event ) { addToCartCalls ++; self . isLoading ( true ); $ ( '[data-block="minicart"]' ). on ( 'contentUpdated' , function () { $ ( '[data-block="minicart"]' ). find ( '[data-role="dropdownDialog"]' ). dropdownDialog ( "open" ); setTimeout ( function () { $ ( '[data-block="minicart"]' ). find ( '[data-role="dropdownDialog"]' ). dropdownDialog ( "close" ); }, 4000 ); });

HTML MVC freamwork , HTML include all pages one page . =============================== Create HTML MVC Project ================================ RootFolder -- build -- incliude -- base ------ footer . html ------ header . html ---- html - head . html - ( include header and footer in this page ) -- site ---- assets ------ css ------ js ------ images ------ fonts ---- index . html - ( include all pages like header and footer etc ..) ================================ site folder : Index . html ================================ include "html-head.html" include "main.html" include "html-footer.html" ================================ Create file : Gruntfile . js ================================ module . exports = function ( grunt ){    grunt . initConfig ({      clean: {        build: [ 'build/' ]     }, ...

@font-face { font-family : 'Material Icons' ; font-style : normal ; font-weight : 400 ; src : url ( https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 ) format ( 'woff2' ); } .material-icons { font-family : 'Material Icons' ; font-weight : normal ; font-style : normal ; font-size : 24px ; /* Preferred icon size */ display : inline-block ; line-height : 1 ; text-transform : none ; letter-spacing : normal ; word-wrap : normal ; white-space : nowrap ; direction : ltr ; /* Support for all WebKit browsers. */ -webkit-font-smoothing : antialiased ; /* Support for Safari and Chrome. */ text-rendering : optimizeLegibility ; /* Support for Firefox. */ -moz-osx-font-smoothing : grayscale ; /* Support for IE. */ font-feature-settings : 'liga' ; }

.flex-display(@display : flex ) { display : ~ "-webkit-@{display}" ; display : ~ "-moz-@{display}" ; display : ~ "-ms-@{display}box" ; // IE10 display : ~ "-ms-@{display}" ; // IE11 display : @display; } .flex(@columns : initial ) { -webkit-flex : @columns; -moz-flex : @columns; -ms-flex : @columns; flex : @columns; } .flex-direction(@direction : row ) { -webkit-box-orient : @direction; -webkit-box-direction : @direction; -webkit-flex-direction : @direction; -moz-flex-direction : @direction; -ms-flex-direction : @direction; flex-direction : @direction; } .flex-wrap(@wrap : nowrap ) { -webkit-flex-wrap : @ wrap ; -moz-flex-wrap : @ wrap ; -ms-flex-wrap : @ wrap ; flex-wrap : @ wrap ; } .flex-order(@order : 0 ) { -webkit-box-ordinal-group : @order; ...