Vue.js 2.x with global store and reactive component data sync

This is a basic test to show how you can use a global object as your primary data store in Vue.js, and use a watcher to trigger a function that builds secondary data sets filtered from the primary source to update the display in the Vue instance (or component).

In this way you can share data between the Vue instance and components (via the global object) and work with the data specifically need by a component while still responding to changes in the global store (e.g. if the global data is updated via a service class or AJAX call).

If the embed below is not working then view it on CodePen at https://codepen.io/jsnelders/pen/dyoJPrw.

 

See the Pen
Vue.js with global store and component reactive sync test
by Jason (@jsnelders)
on CodePen.

 

 

Add Disqus comments form to Vue.js App or Component

I haven’t used with Disqus much, when following the instructions you just need to add code like the following to your page to display the comments form.

 

<div id="disqus_thread"></div>
<script>
/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://jasonsnelders-dev.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

 

But when you try to add this within a Vue application instance or component, you receiving an error like:

 

Errors compiling template: Templates should only be responsible for mapping the state to the UI. 
Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

 

If you Google for the problem “embed disqus in vue” or similar  it might seem the only solution is to install yet another bloody package from npm or yarn.

Fear not, the solution is actually quite simple.

 

Simply move the JavaScript into the Vue mount() event and it should work fine. Don’t forget to delete the actual <script> and </script> elements from your HTML.

The following is a copy of an actual Single File Component I created in a project. Unnecessary content has been removed:

 

<template>
    <div>
        <p>Leave a comment, ask a question or just say hello.</p>
        <div id="disqus_thread"></div>
        <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>  
    </div>
</template>

<script>

export default {
    name: "ContactContent",

    mounted: function()
    {
        /**
        *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
        *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
        /*
        var disqus_config = function () {
        this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
        };
        */
        (function() { // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
        s.src = 'https://jasonsnelders-dev.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
        })();
    },
}
</script>

Cheers!

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.)