Big Sur OS version 11.4 comes with pre-installed Apache and php:

  • Apache : 2.4
  • Php : 7.3.x

Start apache server using cmd :

sudo apachectl start

After starting apache, check http://localhost in browser, should show “It works!”

That’s Default Document Root, lets enable User Level Root to run sites @ http://localhost/~{username}/

Note : {username} is placeholder, please replace it with your valid username.

Create Sites folder @ root of account, /Users/{username}

Add {username}.conf at /etc/apache/users/ with following content

<Directory "/Users/{username}/Sites/">
  AllowOverride All
  Options Indexes MultiViews FollowSymLinks
  Require all granted
</Directory>

Load apache modules modifying httpd.conf file :

Open httpd.conf file :
sudo vi /etc/apache2/httpd.conf
Uncomment following modules: 
LoadModule authz_core_module libexec/apache2/mod_authz_core.so
LoadModule authz_host_module libexec/apache2/mod_authz_host.so
LoadModule userdir_module libexec/apache2/mod_userdir.so
LoadModule include_module libexec/apache2/mod_include.so
LoadModule rewrite_module libexec/apache2/mod_rewrite.so

Find and uncomment following line : 
Include /private/etc/apache2/extra/httpd-userdir.conf
Then open following file :
sudo vi /etc/apache2/extra/httpd-userdir.conf
and uncomment line :
Include /private/etc/apache2/users/*.conf

Restart apache 
sudo apachectl restart
Check http://localhost/~{username}/ in browser,
should list all files and directories in Sites folder.

Leave a comment

Your email address will not be published.

React is javascript library but Next.js is React framework why?

  • Server side rendering – together client side rendering
  • File based routing
  • Write api in same project repo

Leave a comment

Your email address will not be published.

Create variables by extracting data from array or object using de-structuring javascript expression.

Example :

// array example
const [a, b] = [10, 20]; 
console.log(a);
// output: 10
console.log(b);
// output: 20

// object Example 
const { first_name, last_name } = { 
     first_name: 'Amol', 
     last_name : 'V' 
};
console.log(first_name); 
// output : 'Amol'
console.log(last_name); 
// output : 'V'

Along with this we can set default values to variables, can ignore some values in array, swap variables in single lines.

Using rest operator (…) we can split array if required.

const { rollNo, ...studentDetails } = {
rollNo : 123,
name : 'Amol',
subjects : ['Physics', 'Mathematics', 'Biology'], 
extras : ''
}

console.log( rollNo );
// output : 123
console.log( studentDetails );
// output : {
//    name : 'Amol',
//    subjects : ['Physics', 'Mathematics', 'Biology'], 
//    extras : ''
// }

Important : Rest operator should be used as last element in array or object.

Leave a comment

Your email address will not be published.

Symlink a package folder.

Consider the example where you have test package inside node modules and you want to change in that package.

You could make changes in node_modules and manually copy the changes to the git repository of the dependency once you are done. But there is a much cleaner approach: npm link.

Package linking is a two-step process:

  1. Create a global symlink for a dependency with npm link. A symlink, short for symbolic link, is a shortcut that points to another directory or file on your system.
  2. Tell the application to use the global symlink with npm link test.

cd ~/projects/test npm link cd ~/projects/my-app npm link test.

The symbolic links are local and will not be committed to git. When you are ready to share your code, publish a new version of test or push to a branch that you specify in my-app’s package.json

If you want to switch back to normal dependency even that is also super easy by npm unlink. But npm unlink is an alias of npm uninstall.

Leave a comment

Your email address will not be published.

One has to use JavaScript to accomplish this. If the user has JS disabled, you cannot prevent the right click.

You can do it either by adding an event listener to for the “contextmenu” event and calling the preventDefault() method.

Eg:

document.addEventListener('contextmenu', event => event.preventDefault());

or just by adding “oncontextmenu” to body tag.

<body oncontextmenu="return false;">

Leave a comment

Your email address will not be published.

If you need to create modal/popup window in WordPress admin, its easy. You can use buit-in thickbox jquery library.

It’s very well documented @ https://codex.wordpress.org/Javascript_Reference/ThickBox, though lets see quick integration sample code below.

Load thickbox js and css by calling function <?php add_thickbox(); ?>

Add a link to html with class name ‘thickbox’ example below –

<a href="#TB_inline?&width=300&height=300&inlineId=my-content-id" class="thickbox">Open Popup</a>

Then add popup html,

<div id="my-content-id" style="display:none;">
     <p>
          This is hidden content! It will appear in Popup when the link is clicked.
     </p>
</div>

Now when you click on a link to open popup, above html will display in popup with overlay at back, you can customise as per requirement, check codex for details.

Leave a comment

Your email address will not be published.

Add following code to theme function file.

//Remove the REST API endpoint.
remove_action('rest_api_init', 'wp_oembed_register_route');
// Turn off oEmbed auto discovery.
add_filter( 'embed_oembed_discover', '__return_false' );
//Don't filter oEmbed results.
remove_filter('oembed_dataparse', 'wp_filter_oembed_result', 10);
//Remove oEmbed discovery links.
remove_action('wp_head', 'wp_oembed_add_discovery_links');
//Remove oEmbed JavaScript from the front-end and back-end.
remove_action('wp_head', 'wp_oembed_add_host_js');

Leave a comment

Your email address will not be published.

It depends on which ubuntu version you have and upgrade to?

Let’s see difference first :

do-release-upgrade – will upgrade to next release from version installed. Example use this to upgrade from 14.04.5 LTS to 16.04.1 LTS

upgrade – upgrade will install/upgrade to latest versions of all installed packages.

Leave a comment

Your email address will not be published.

How to solve when you get Less @keyframe animation error. Follow the following steps:

  • Check less version and upgrade it if it is not latest globally by
    sudo npm install less@3.9.0 -g
  • Check less version by   lessc -v
  •  If above command gives an error "/usr/bin/env: ‘node’: No such file or
    
    directory" then run below command
  • ln -s /usr/bin/nodejs /usr/bin/node
(Reason why to run this command - if you install from a package manager
your bin may be called nodejs so you just need to symlink it like so "ln
-s /usr/bin/nodejs /usr/bin/node")

Leave a comment

Your email address will not be published.

To install Zip and Unzip by using the apt-get install command, perform the following steps.

Enter the following command to download the package lists from the repositories and update them:

sudo apt-get update

Enter the following commands to install Zip and Unzip:

sudo apt-get install zip
sudo apt-get install unzip

To verify whether Zip and Unzip are installed correctly, run the following commands:

zip -v
unzip -v

Leave a comment

Your email address will not be published.