hugolpz

Wikidata API via JS

Live JS Demo by Lopez Hugo

A Pen by Lopez Hugo on CodePen.

License.

hugolpz

This project aim to illustrate with code the similarities and differences between .data() and .datum(). Feel free to fork and add other parallel examples, where .data() and .datum() do the same work with different syntaxes.

.data() and .datum()'s generated elements are taggued and get collored accordingly using CSS class) :

.data:hover  { fill: #B10000; opacity: 1; } /*  data = RED   */
.datum:hover { fill: #00B100; opacity: 1; } /*  datum= GREEN */

Syntax

hugolpz

Handlebars.js is a convenient, easy to learn JS templating system. In this page, we will cover the basics of Handlebars.js.

What is Handlebars.js ?

Mustache.js HTML templates system have been designed to stays extremly simple, on purpose restricted to structure only (logic-less templating). As such, it excludes logical operators (IF) and alikes.

Handlebars.js HTML templates are based on Mustache.js, so you can start little and simple. Handlebars.js also have logical and advanced operators so you can later build more complex and conditional stuffs. In this 2nd logic-full level, the HTML-CSS designer of the template will need some basic coding concepts, such FOR LOOPS, IF (conditional), and few others fundamentals. The documentations will there be about 3 A4 pages long.

Why use JS templating ?

hugolpz

This page is about embedding raster images into svg or html as data URI string. Data URI being base64 string, we first need to convert our image into base64 strings. There I explain how to do it server side and client side.

Convert png to base64 file

Given image.png as a valid image, let's creates a *.b64 copy as a text file containing a valid base64 text string.

openssl base64 -in image.png -out image.b64
echo $(cat image.b64)

Convert png to base64 variable

hugolpz

!function(){function n(n){return n&&(n.ownerDocument||n.document||n).documentElement}function t(n){return n&&(n.ownerDocument&&n.ownerDocument.defaultView||n.document&&n||n.defaultView)}function e(n,t){return t>n?-1:n>t?1:n>=t?0:0/0}function r(n){return null===n?0/0:+n}function u(n){return!isNaN(n)}function i(n){return{left:function(t,e,r,u){for(arguments.length<3&&(r=0),arguments.length<4&&(u=t.length);u>r;){var i=r+u>>>1;n(t[i],e)<0?r=i+1:u=i}return r},right:function(t,e,r,u){for(arguments.length<3&&(r=0),arguments.length<4&&(u=t.length);u>r;){var i=r+u>>>1;n(t[i],e)>0?u=i:r=i+1}return r}}}function o(n){return n.length}function a(n){for(var t=1;n*t%1;)t*=10;return t}function c(n,t){for(var e in t)Object.defineProperty(n.prototype,e,{value:t[e],enumerable:!1})}function l(){this._=Object.create(null)}function s(n){return(n+="")===pa||n[0]===va?va+n:n}function f(n){return(n+="")[0]===va?n.slice(1):n}function h(n){return s(n)in this._}function g(n){return(n=s(n))in this._&&delete this._[n]}function p(){var n=[]

hugolpz

WP style user-friendly selection of geo-coordinates (decimal degrees).

hugolpz

npm install --save-dev jsdoc@latest     # install jsdoc
npm install --save-dev docdash@latest   # install theme
# Runs JSdoc, creates documentation website:
# Manual: https://jsdoc.app/about-commandline.html
jsdoc ./js/index.js --template node_modules/docdash --readme README.md --destination docs --configure conf.json

hugolpz

{
  "docdash": {
    "scripts": [
      "style-custom.css",   // source path
      "script-custom.js",   // source path
    ]
  },
  "templates": {
    "default": {
      "staticFiles": {

hugolpz

/**
 * @alias .move_to 
 * @description Moves page to new title address.
 * @param {String} move_to_title - target page's title.
 * @param {Object} [options] - options.
 * @param {String} [options.reason] - reason for the move.
 * @param {Boolean=true} [options.noredirect] - do not leave a redirect.
 * @returns {Object}- returns (does not exist on .move_to but I put it here for demo)
 * @memberof Wikiapi.prototype
 * @example

hugolpz

# .move_to(move_to_title[,options]): move page to new title address.

• move_to_title: string - target page's title.
• options: object - options.
  • reason: string - reason for the move.
  • noredirect: boolean.
• movetalk: boolean.