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 code repo at:

https://github.com/jsnelders/chrome-bookmarks-converter

It’s quick and dirty and only took a couple of hours, but this little bit of code is the foundation of something bigger in the pipeline.

Software Development: Build, to Fail. Fail, to Learn. Learn, to Succeed.

The only way to learn as a software developer is to build.

Today I started my third major application using VueJS and realised there was a better way to approach something I’ve done in the last 2 applications.

As a mature developer you must continually question and re-evaluate what you know. Keep looking for better and easier ways achieve a result, and choose to discard those that don’t suit.

I’m not ashamed to say my last 2 approaches where inadequate. It took that time, different searches, and re-framing of the problem to eventually reach the point I needed.

But coming from a Microsoft development background I’ve had a career living the philosophy: “don’t implement until version 3” (which is to say, wait until version 3 before you get it right).

In all my years I’ve never seen a developer get it “right” the first time.

Maturity is recognising success takes time and working through the process.

[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

Sample Vue.js app to demonstrate the simple concepts (app, conditionals, loops, binding, components, and routes)

Update: 11 November 2019

I’ll be honest – The cost is great example. I created this for some student teams at RMIT to give them something to get started. But it works and it is simple, so I hope you still get the underlying value from it.


 

I’ve created a very simple Vue.js sample app you can run immediately to see different Vue concepts in action.

Get the code at: https://github.com/jsnelders/vuejs-sample

Simply download the 2 files and run vueapp.html in a browser (it should even run from your hard drive). No compiling or tools required.

See in action at https://jsnelders.com/vuejs_sample/.

 

The app is a simple way to see the most common elements of Vue in action:

  • Setting up a simple in-page “app”.
  • Setting the “data” model.
  • Creating methods (for example for handling click events.
  • Using if statements.
  • Using for loops.
  • Creating “hash” routes which map to different “views” in the app that you can switch between (think of them as pages within a page).
  • Creating components
    • With templates defined in the JavaScript.
    • With templates in the HTML page.
    • Attaching them to routes.
    • Stand-alone components you can use in your app, and allow you to pass data in from the app, and get data back from the component via events.

These simple concepts should cover 95% of your Vue.js needs.

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.

Excel: Cells have left padding space (but it’s not an indent)

Working in Microsoft Excel (2013 and 2016) I noticed what looked like padding (space between the left side of the cell and the text) in some cells in my sheet.

(See the highlighted cell J39)

I didn’t have text indentation in the cell, and “Format Cells > Alignment > Text alignment > Indent” was set to zero.

The cause was the formatting based on the selected cell data type (in the “Number” section of the ribbon).

I had “Accounting” selected which automatically adds some padding.
Changing it to “General” returned it to normal (removed the space) for a cell with just text.

An easy mistake to make but hard to spot.