Webpack error “The operation was rejected by your operating system.”

I just tried installing webpack via npm in a new project and received the following. Notice the error in below near the end:

 

PS D:\Workspaces\profile-jsnelders-com> npm install webpack webpack-cli --save-dev
npm ERR! path D:\Workspaces\profile-jsnelders-com\node_modules\brorand\package.json.1891953989
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall rename
npm ERR! Error: EPERM: operation not permitted, rename 'D:\Workspaces\profile-jsnelders-com\node_modules\brorand\package.json.1891953989' -> 'D:\Workspaces\profile-jsnelders-com\node_modules\brorand\package.json'
npm ERR!  { Error: EPERM: operation not permitted, rename 'D:\Workspaces\profile-jsnelders-com\node_modules\brorand\package.json.1891953989' -> 'D:\Workspaces\profile-jsnelders-com\node_modules\brorand\package.json'
npm ERR!   cause:
npm ERR!    { Error: EPERM: operation not permitted, rename 'D:\Workspaces\profile-jsnelders-com\node_modules\brorand\package.json.1891953989' -> 'D:\Workspaces\profile-jsnelders-com\node_modules\brorand\package.json'
npm ERR!      errno: -4048,
npm ERR!      code: 'EPERM',
npm ERR!      syscall: 'rename',
npm ERR!      path: 'D:\\Workspaces\\profile-jsnelders-com\\node_modules\\brorand\\package.json.1891953989',
npm ERR!      dest: 'D:\\Workspaces\\profile-jsnelders-com\\node_modules\\brorand\\package.json' },
npm ERR!   stack: 'Error: EPERM: operation not permitted, rename \'D:\\Workspaces\\profile-jsnelders-com\\node_modules\\brorand\\package.json.1891953989\' -> \'D:\\Workspaces\\profile-jsnelders-com\\node_modules\\brorand\\package.json\'',
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'rename',
npm ERR!   path: 'D:\\Workspaces\\profile-jsnelders-com\\node_modules\\brorand\\package.json.1891953989',
npm ERR!   dest: 'D:\\Workspaces\\profile-jsnelders-com\\node_modules\\brorand\\package.json',
npm ERR!   parent: 'profile-jsnelders-com' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jsnel\AppData\Roaming\npm-cache\_logs\2020-02-06T20_06_02_861Z-debug.log
PS D:\Workspaces\profile-jsnelders-com> npm install webpack webpack-cli --save-dev
+ webpack@4.41.5
+ webpack-cli@3.3.10
added 10 packages from 6 contributors, updated 1 package and audited 8965 packages in 9.19s
found 0 vulnerabilities

PS D:\Workspaces\profile-jsnelders-com>


npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jsnel\AppData\Roaming\npm-cache\_logs\2020-02-06T20_06_02_861Z-debug.log

 

I just re-ran the npm install ... again and it worked fine the second time. As the message suggests, it was probably a system process in Windows locking the file the first time.

CSS Stacked Paper Effect with Fade Out Transition

A little project I started late tonight.
I want to create a web page that looks like it has a stack of paper, where you can “flip away” the top page after you finish reading it. Similar to a “flip book” (see turn.js as an example) but having only a single page showing at a time (vs the 2-page “open book” every other solution goes with).

 

I found the CodePen https://codepen.io/mlms13/pen/LKFoy which I forked as a starter for the version I’m now developing:

(Link: https://codepen.io/jsnelders/pen/xxGKBpv)

I still have a few features to add:

  • Page curl at the top right (possibly).
  • Responsive design for different screen sizes. I’m not sure what I’m going to do about that at the moment.
  • External forward and back controls.
  • List all pages (or pages already read) so you can quickly go back.
  • Give pages a title, and an optional number.

I’ll continue to work on this over the coming days and provide updates here.

Export all core WordPress data (posts, pages, attachments, comments, tags, categories and users) to a JSON formatted file.

I created a small WordPress plugin you can use to export all your core WordPress data to JSON formatted file.

Exported data includes:

  • Posts (status: publish, private, draft)
  • Pages (status: publish, private, draft)
  • Attachments (media)
  • Comments (approved)
  • Tag definitions
  • Category definitions
  • Users

The file is generated in /wp-content/export.json in your WordPress site (note: it will be available for anyone to access).

Simple create a new page in your site, add the shortcode and run the page to generate the file.
I suggest removing the page and deleting the export.json once you’re finished with it.
This is just intended as a quick and easy way of exporting your site data to a JSON file.

Note: It may degrade performance or result in a page timeout for large sites.

Complete plug-in source code at https://gist.github.com/jsnelders/fd22ebc26530468125ffed2d5d1eb279.

Feel free to adapt the script as needed.

Code to convert exported Chrome bookmarks HTML to JSON

When you can’t find an existing solution to do something “simple” like convert an exported Google Chrome bookmarks HTML to JSON, it helps to be a programmer so you can build your own.

Check out my public GitHub code repository at: https://github.com/jsnelders/chrome-bookmarks-converter

I also have it running live at: https://chrome-bookmarks-converter.netlify.com/

It’s quick and dirty and only took a couple of hours but it work.

[Vue warn] and browser caching

(Relates to: VueJS 2.x)

I just modified a VueJS project and received the following warning:

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'id' of null"

found in

---> <Anonymous>
<Root>

 

I’d split code from 1 JavaScript (JS) and 1 corresponding HTML page into 2 JS and HTML files.

After refreshing the page, I received the above error.

 

There was no problem in my code.

The problem was I needed to do a hard refresh in the browser get and execute and the new and updated files.

[Vue warn]: v-bind without argument expects an Object or Array value

(Relates to: VueJS 2.x)

I received the following error:

[Vue warn]: v-bind without argument expects an Object or Array value

found in

---> <Anonymous>
<Root>

The error was caused by the following line of code:

<input type="text" class="form-control" id="Title" v-bind="post.Title">

My mistake:

I used v-bind but I should have used v-model.

The correct code is:

<input type="text" class="form-control" id="Title" v-model="post.Title">

Get started with MongoDB and PHP with XAMPP on Windows

Getting started with MongoDB on Windows and developing it with PHP turned out to be quite easy.

You can create a MongoDB database “in the cloud” for free with MongoDB’s Atlas platform – https://cloud.mongodb.com. No credit card required and you’re up and running in under 10 minutes (most of that time is waiting) after filling in a simple form fill and a few button clicks.

Next you need to setup XAMPP if haven’t already. Follow my post Setting up XAMPP for WordPress Development on Windows for details on how to do that. That gives you Apache and PHP running capability.

Finally you need to install MongoDB drivers for PHP under XAMPP. I use https://www.configserverfirewall.com/mongodb/install-mongodb-php-driver-ubuntu-windows/#install-php-mongodb-driver-on-windows to figure that out. The steps are:

  1. Download the drivers for Windows from https://pecl.php.net/package/mongodb and extract the archive (select the “DLL” link for the version you want, scroll to the bottom of the next page, then download from the “DLL List” section for your version of PHP and OS architecture.
  2. Copy the extracted php_mongodb.dll file into <drive>:\xampp\php\ext folder.
  3. Open XAMPP php.ini and add the line: extension=php_mongodb.dll.
  4. Restart the Apache server in XAMPP. You’re good to go.

 

MongoDB Atlas connection string in PHP

If you run MongoDB locally you’ll have PHP code something link this to establish a connection:

<?php
$connection = new MongoDB\Driver\Manager("mongodb://localhost:27017");
var_dump($connection);
?>

If you connect Atlas use a connection string something like:

new MongoDB\Driver\Manager("mongodb+srv://<db-username>:<db-password>@azure-westus-1-fzl9p.azure.mongodb.net/test?retryWrites=true&w=majority");

Where <db-username> and <db-password> are the username and password you created in Atlas.
“azure-westus-1-fzl9p.azure.mongodb.net” is for my the specific Mongo instance – it will be different for you.

The connection string between the double-quotes is the same as was generated when you go into your collection, select the “Connect” button and follow the prompts.

JavaScript (.js) file interpreted as MIME type text/html

I had situation with a JavaScript (.js) file seeming to load OK but in reality it was a misdirect.

Using Chrome, I inspected the Network tab in Developer Tools and couldn’t see an error with the file load. But on closer inspection, I noticed the Status was a “302” and the Type was “text/html” as follows (I was expecting a “200” Status and “script” mime Type).

It was luck that I found the answer:

I was loading the JavaScript file using the path “/inc/assets/js/vueks/vue-2.6.10.js”.

But I had a spelling mistake in the path. It should have been: “/inc/assets/js/vuejs/vue-2.6.10.js”.

I changed “vueks” to “vuejs” and the script loaded successfully.

 

The strange thing is the incorrect path didn’t give me a “404” (Not Found) response. Instead I received a “302 Found”, where clearly the file was not found.

My guess is I was loading it in a WordPress site, and while the file was not found I do have code internally to redirect to a “/not-found” page that may have returned some form of response (even though it contained no content). That or some headers were returned which confused Chrome.

(I haven’t tried to replicate this other browsers yet.)

PHP $_POST not populating from jQuery (JavaScript) $.ajax() POST

Problem

I was trying to submit data from a web page to a back-end API in PHP using jQuery’s AJAX (ie. $.ajax()).

But the $_POST variable in PHP didn’t contain the values I was posting.

 

Solution

The problem is I was encoding the POST body data the wrong way in JavaScript.

I was using JSON.stringify(data), where “data” is a JavaScript object or array.

What I needed to do what manually create a string of key1=value1&key2=value2&keyN=valueN pairs.

Example Code from my submit function:

        //sendData = JSON.stringify(data);  //<-- This doesn't work ...

        // ... but this does.
        sendData = "";
        for (var key in data) 
        {
            if (sendData != "") sendData = sendData + "&";
            sendData = sendData + key + "=" + data[key];
        }

	var ajaxRequest = {
		url: url,
		type: "POST",
		data: sendData,
 		dataType: dataType,

		success: function(data, textStatus, jqXHR)  { successCallback(data, textStatus, jqXHR ); },
		error: function(jqXHR, textStatus, errorThrown) { errorCallback(data, textStatus, errorThrown); }
	};

	$.ajax(ajaxRequest);

 

What I searched for (which didn’t help much):

Search “$_POST empty from jquery”: https://duckduckgo.com/?q=%24_POST+empty+from+jquery&amp;atb=v147-1&amp;ia=web

https://stackoverflow.com/questions/1650516/jquery-ajax-method-post-but-post-empty

https://stackoverflow.com/questions/16360008/jquery-post-post-empty

https://stackoverflow.com/questions/54039285/ajax-form-posting-to-php-script-but-post-is-empty-in-php-script

https://stackoverflow.com/questions/1650516/jquery-ajax-method-post-but-post-empty/49948834#49948834

Git: Reset a local branch to last remote commit, remove unstages files, and fix file permissions

I use the Codeanywhere online IDE for my WordPress development. Sometimes I screw up something I’m testing (usually when I try to manipulate the filesystem with PHP) and need to reset my local branch to the last clean commit I sent to remote.

(Note that I said “remote”. I don’t trust local commits. I continually push to remote to have a safe restore point, especially if I need to do a full delete of my local branch. Yes, it has happened more than once.)

Occasionally I find folder permissions screw up as well and I need to reset via the bash command line.

The following commands are what I always come back to.

Note: The “$” in the command below represent the command-line prompt. The actual commands follow it.

 

Reset a local branch to the the last remote commit of the branch

$ git reset --hard HEAD

 

Clean up any uncommitted folders/files that the reset didn’t remove

$ git clean -f -d

 

Set full permission recursively on a folder and all files/sub-folders

Change directory (cd) to the parent folder of the folder you want to set permission on.

$ sudo chmod -R 777 vylesk-module-z1

 

Recursively delete a folder and all files/sub-folders

Change directory (cd) to the parent folder of the folder you want to delete.

$ rm -rf vylesk-module-z1

Note: The “f” means you are not prompted to delete each file/folder.