Categories
JavaScript PHP

How to run production mode in vue.js with laravel ?

How to run production mode in vue.js with laravel  ?   

Method 1 :

In Laravel , Vue.js is included through NPM package and will be compiled as part of webpack in node stack. so while executing the npm assets compile command we need to mention it to compile in production mode. here is the command. 
npm run production  
Method 2 : 
In Laravel, Add an environment variable in laravel configuration and based on the load the Vue Configurations in the run time.

Environment Variable Creation Guide refer : https://laravel.com/docs/5.6/mix#environment-variables

Define :
MIX_ENV_MODE=production

Usage:

process.env.MIX_ENV_MODE
In any of the scripts file make sure to add conditional execution of vue.js configurations as below :
if (process.env.MIX_ENV_MODE === 'production') {
    Vue.config.devtools = false;
    Vue.config.debug = false;
    Vue.config.silent = true; 
}

 

Categories
Angular CSS HTML HTML5 JavaScript NodeJS UI VueJS

UI Developer / Lead / Architect Interview Question and Answers

UI Developer / Lead / Architect Interview Question and Answers 

1) SASS vs LESS  which is better ? 

SASS is better and more reliable, flexible and most of the modern JS frameworks are using SASS for more feature availability.   

2)  List 4 types of memory leaks of JS ?

—  Unnecesseary Global Variables 

—  Unused Functions ex: timers  

—  Unnecesseary DOM reference elements 

—  Improper Closures 

—  Manage Garbae collection wherever required

3) backward compatibility  for libraries how to manage ? 

Shared dependencied must be defined in peerDependencies package attribute. 

When both your project and some module you are using depend on the same libraries but different versions than you should define 

project level library dependency in “peerDependencies” section of the package.json to avoid conflicts of multiple version libraries. 

So project dependency library installed in main folder and module specific dependency library will be installed within the module folder

so it will avoid the conflicts. 

4) profiling of pages ?

For web page loading in a browser it has to wait for 

Initialization (DNS resolution, TCP connection, proxy, and SSL negotiation),

Server rendering, 

Data transfer, 

and 

page rendering in the browser

A web page is composed from many resources besides the main contents that the browser has to resolve

 and load (JavaScripts and stylesheets).

 Then it needs to build the DOM tree from the HTML and execute any needed JavaScript

Server side performance can be improved by improving the infrastructure 

such as no: of clusters/servers, CPU, memory, bandwidth, location etc.. 

Client side performance can be improved by following parameters/criteria :

HTTP optimizations -> by Network optiomaizations like DNS/TCP/SSL connections, browser preloaders , Resource Loading time, Content loading time 

HTML and JavaScript loading optimizations -> Google RAIL model

Response (user interface): Tap to paint in less than 100ms;

Animation: Layout rendering should take less than 16ms per frame;

Idle: Use idle time to compute some work in chunks of 50ms;

Load: The page should be fully loaded in less than 1000ms.

Stylesheets optimizations -> 

Minify and Compress your files

Remove unused CSS rules

Optimize the CSS critical path

Analyze Stylesheets complexity

Image caching / sprite images  

Use CDN 

use Cache control expires

Gzip the componets for reduce load 

Stylesheets at TOP / Scripts at Bottom 

Remove duplicate code/scripts 

Use ETags for browser caching 

Profiling tools like : pingdom, google pagespeedtest to implement and optimize the suggestions 

5) how to make lightweight UI  ?  

Color minimalism

Operation simplification with the minimal steps of operation

Layered interface with flat design and skeumorphism

Micro-interaction  like “pull-down refresh”,”add to shopping cart”, etc.

6) How to make Data processing  better & faster ?  

For JS Frameworks 

 — Caching Your App data with cache layers like memcached, Redis etc.. 

 — Multi clustering of Data / Application for faster proecessing  

 — All data processing queries are Optimized

 — Check All Error in the Scripts by Logging and make all error scenarios are handled 

 For Angular 

 — Use Batarang tool to debug and fix any performance issue  

 — Chrome Dev Tool Profiler to Identify Performance Bottlenecks

 — Use console.time for Debugging Issues

 — Use ng-if or ng-switch instead of ng-show

The ng-show directive toggles the CSS display property on a particular element, while the ng-if directive actually removes the element from DOM and re-creates it if needed. 

 — Avoid using ng-repeat

 — Overuse of the ng-repeat directive can drastically drive down performance. 

 — Lower the number of elements that get looped over by implementing pagination or infinite scroll. AngularJS even has a directive called ngInfiniteScroll for that purpose. 

7) what is STRICT mode in JS ? 

 “use strict”; Defines that JavaScript code should be executed in “strict mode” so it will make “bad syntax” into real errors.

Using a variable, without declaring it, is not allowed:

Using an object, without declaring it, is not allowed:

Deleting a variable (or object) is not allowed.

Deleting a function is not allowed.

Duplicating a parameter name is not allowed:

Octal numeric literals are not allowed:

Octal escape characters are not allowed:

Writing to a read-only property is not allowed:

Writing to a get-only property is not allowed:

Deleting an undeletable property is not allowed:

The string “eval” cannot be used as a variable:

The string “arguments” cannot be used as a variable:

The with statement is not allowed:

For security reasons, eval() is not allowed to create variables in the scope from which it was called:

In function calls like f(), the this value was the global object. In strict mode, it is now undefined.

Keywords reserved for future JavaScript versions can NOT be used as variable 

Categories
LAMP Linux PHP

How to Upgrade PhpMyAdmin in Linux

How to Upgrade PhpMyAdmin in Linux distributions OS like Ubuntu, Redhat etc.. ?

There are 2 ways to install & maintain upgrade phpmyadmin in Linux operating systems.


First way :

Automated installations by using the personal archive repository for phpmyadmin


For adding repository list to Linux –

sudo add-apt-repository ppa:nijel/phpmyadmin

For first time installations

sudo apt-get install phpmyadmin

For updating the existing phpmyadmin second time onward where installation was done using the above command

sudo apt-get update phpmyadmin

Second way :


Manual installation by using the phpmyadmin download package

Make sure you have the sudo/root permissions for all software installations. 


Example takes was to upgarde to 4.8.1 version phpmyadmin –


Goto your home directory

cd /home/{username}


Download phpmyadmin package

wget https://files.phpmyadmin.net/phpMyAdmin/4.8.1/phpMyAdmin-4.8.1-all-languages.tar.gz


extract the downloaded package to folder

tar -zxvf phpMyAdmin-4.8.1-all-languages.tar.gz


rename it to proper folder as used in the webserver configurations

mv phpMyAdmin-4.8.1-all-languages phpmyadmin


Goto user share directory where all shared software installations are managed

cd /usr/share


Move if any existing phpmyadmin folder to rename as old folder

sudo mv phpmyadmin phpmyadmin_old


Goto your home directory

cd /home/{username}


move the download& extracted phpmyadmin folder to user share directory

sudo mv phpmyadmin /usr/share/phpmyadmin


Goto user share directory

cd /usr/share


Provide the required permissions for www-data webserver user to read/write/execute

sudo chgrp -R www-data phpmyadmin

sudo chmod -R ug+rwx phpmyadmin


Your phpmyadmin has been upgraded to latest version.

Categories
Agile

Agile SCRUM interview questions and answers

What does SCRUM refers to in AGILE ? Scrum is a framework for Agile software development that emphasizes teamwork, accountability and iterative progress toward a well-defined goal. It is an agile way to manage a project think of it as a framework for managing a process.

Explain the Roles / Ceremonies /Artifiacts / Events used  in SCRUM ?
Scrum suggests 

three roles

             The team, 

             ScrumMaster, 

      and Product owner

  

four ceremonies

             The sprint planning meeting, 

             Daily Scrum, 

             Sprint review meeting, 

     and Sprint retrospective meeting.   

four formal events 

           Sprint Planning , 

           Daily Scrum , 

           Sprint Review, 

           Sprint Retrospective.

three artifacts

           The product increment, 

            Product backlog,

    and Sprint backlog.   

What is Sprint Burn Down Chart ?

Progress on a Scrum project can be tracked by means of a release burn down chart. The Sprint Burn down Chart is a graphic representation that shows the rate at which work is completed and how much work remains.

What is Sprint Backlog ? 
The sprint backlog is a list of tasks identified by the Scrum team to be completed during the Scrum sprint. 

What is extreme programming model? what activities are involved in it ? 
Extreme programming (XP) is a software development methodology which is intended to improve software quality and responsiveness taken to “extreme” levels to changing customer requirements. 

4 Activties of XP are : Listening, Designing , Coding and Testing.  

What are the Best Practices for Agile/SCRUM methodology ?

  • Daily meetings must not be longer than 15 minutes. 
  • Stand up meeting style is better for daily meetings.
  • Sprint length (in weeks) changes are not recommended
  • sprint hour capacity per story point is 6.5 hrs / day 
  • Prioritize the requirements in Product backlog 
  • Active stakeholders participation continuously
  • Collective Code Ownership 
  • regular Retrospective meeting for improvements   

what is retrospective meeting ? 
An Agile retrospective is a meeting that’s held at the end of an iteration in Agile software development. During the retrospective meeting the team reflects on what happened in the iteration and identifies actions for improvement going forward. 

What are the strength of Agile ? 

Strength of Agile are  

– improving communication between groups 

– A way of working against normal software development methodology 

– Allowing organizations to be flexible to take the products to market faster. 

Categories
AJAX JavaScript

Chart JS canvas dynamic draw chart and clear using AJAX based JSON data

Chart.js  :  How to Clear canvas after drawing a chart based on the dynamic data received from AJAX based JSON response data ?

Normally  if you try to draw a new dynamic chart after an AJAX request based on the JSON data received than the the graph starts jumping around and gets fuzzy between the grid lines. This issue happens every time when the JSON data has changing datasets based on the AJAX cal request. 

To sort out this issue , you need to destroy the chart before redrawing with new dataset. 

create a global variable and use that variable while creating chart :

myChart:

and use this variable to assign chart instance, before assigning the chart instance make sure to check if any previous chart instance is available with the global variable, if exist than clear and destroy the chart distance : 
createChart: function() {
var ctx = document.getElementById(myChart); // check if any existing chart instance data is available and destroy
if(this.myChart instanceof Chart){
this.myChart.clear();
this.myChart.destroy();
} //draw new chart
this.myChart = new Chart(ctx, {
type: this.chartData.type,
data: this.chartData.data
});
}
I have taken the vue.js implementation with chart.js as the example in above scenario. 
Categories
CSS DRUPAL JavaScript LAMP MySQL PHP

Drupal 8 Interview Questions and Answers

How do I add external CSS OR JS libraries in Drupal 8 ? 

You need to add external library (CSS, JS) into your_theme.libraries.yml and attach the library either in twig or in your controller


myLibrary:
js:
https://xyz.com/bootstrap/4.1.11/js/bootstrap.min.js: { type: external, minified: true }
css:
component:
https://xyz.com/bootstrap/4.1.11/css/bootstrap.min.css: { type: external, minified: true }

{{ attach_library ('mythemename/mylibrary') }}

What is TWIG ? 
Drupal uses a new theme engine called Twig. Its a flexible, fast, and secure PHP based theme engine.its templates are written in a syntax that’s less complex than a PHP template and easier to create interactive and more functional Drupal templates using Twig.

What is Clean URLs ? 
user-friendly URLs, or search engine-friendly URLs, are Uniform Resource Locators (URLs) intended to improve the usability and accessibility of a website is called Clean URLs.
In Drupal 8, ‘Clean URLs’ are enabled by default and can’t be disabled. Check your site’s URLs which should not contain ?q= within the URL. It has certain dependencies on Webserver modules to work properly.

Which are all the Symfony components used by Drupal 8 ?
Symfony Components used by Drupal 8 project :
ClassLoader
Console
CssSelector
Debug
DependencyInjection
EventDispatcher
HttpFoundation
HttpKernel
PHPUnit Bridge
Polyfill Iconv
Process
Routing
Serializer
Translation
Validator
Yaml

how to improve DRUPAL performance for anonymous and authenticated users ?
Anonymous Traffic
Lighter user, basic configuration and performance tuning should handle more use cases.

Authenticated Traffic
Heavier user, can lead to more complex configurations to handle load and performance.
Caching for Drupal Websites

so here are five of the most important caching solutions for a Drupal website:

Drupal’s built-in caching
Boost module
Memcached
Varnish
Views caching