Validating JavaScript using ESLint in Visual Studio Code

February 9, 2018

#ESLint #JavaScript #jQuery #JSLint #node.js #SSHFS #Visual Studio Code

ESLint / Visual Studio Code
ESLint highlighting sloppy code

I switched to Microsoft Visual Studio Code originally because Brackets seemed to struggle with remote file systems mounted using via SSHFS (using Fuse for macOS).

Brackets has JSLint built in. Various JavaScript linting options exist for Visual Studio Code. I’m using ESLint and this extension which integrates ESLint into VSCode.

ESLint requires node.js & npm. Install node.js locally using the pkg. The npm package manager is installed as part of that. We then use npm to install ESLint globally (sudo npm install -g eslint).

Then run eslint --init from the root directory of any project where you want to use ESLint to validate the code. That will create a project specific configuration file.

Sulby Theme Slider

January 23, 2018

#CSS #JavaScript #jQuery #JSON #PHP #Shortcode API #Sulby Theme #WordPress

 

I built this simple slider for my standalone "Sulby" WordPress theme. Written in PHP and JavaScript with jQuery + CSS defining the layout, responsiveness etc. The code is below.

In several past projects we used a well known third-party slider. Now I wanted something more minimal, lightweight and extensible. If we want to change the look and feel then we can do that that in CSS. If we want different functionality then let’s do it in the code. It’s much simpler than trying to work out how to achieve a result via a convoluted plugin interface or restrictive settings.

The PHP creates a WordPress Shortcode. The WordPress Shortcode API can be used to create macros which can be added to a Post or a Page – or to a PHP template using the do_shortcode() function. Eg the slider shown here is added like this:

[insertSulbySlider images=1005,992,1003,1002,993 message-title="Slider Demo" message-body="stock images from my legacy portfolio at Getty Images & iStockPhoto" slider-caption="Bunhill / Getty Images" slider-caption-link="https://www.gettyimages.com/search/photographer?excludenudity=true&family=creative&phrase=bunhill&photographer=bunhill&sort=best" delay=8 aspect-padding=56.25 header-bool=false]

The images are added by ID. The json_encode function sanitizes this input and then translates the data to a JSON string to be passed to a JavaScript function. The $custom_aspect variable allows me to specify the aspect ratio of the slider. The TL;DR:

eg – 100 = 1:1 / 75 = 4:3 / 66.66 = 3:2 / 56.25 = 16:9

We need to be able to specify the aspect ratio every time. The slider is a div background image but there is not currently a way in CSS to set height such that it is dynamically proportional to widthcalc only works with vw and vh. We could do it in Javascript but that would be clunky (the function would be repeatedly called as the user resized a browser window). Instead we set width to 100% and height to 0 (in the CSS). Then use padding-top as a percentage. The method is described here at w3schools.com.

The $header_bool variable flags a specific exception – if the slider is at the top of the page then it wants to be approaching full height relative to the device or browser window – 79vh set in the JavaScript. This particularly matters on phones and the $custom_aspect variable is effectively ignored.

Each slider needs a unique #ID – because elements must be unique per page and potentially we may have more than one slider per page with different properties. That means naming them dynamically. PHP’s uniqid() is a perfectly adequate solution here.

Show Code

Google Maps: from XML with Marker Clustering

January 2, 2018

#Google Maps #HTML5 Geolocation #JavaScript #jQuery #Marker Clustering #PHP #Shortcode API #WordPress #XML

 

This is something I was working on recently. We wanted to use Google Maps to show the location of the client’s many distributors and agents. And we wanted to implement marker clustering. You can use the MarkerClusterer library in combination with the Google Maps JavaScript API to combine markers of close proximity into clusters, and simplify the display of markers on the map. Zooming in you begin to see the individual markers on the map. Zooming out of the map consolidates the markers into clusters again.

I have defined the markers as XML elements with properties defined as attributes. Apart from latitude and longitude – the other properties define how I have chosen to implement the Info Windows – what a user sees when they click on a marker. In this example simply the business name, address and telephone number. But an Info Window can potentially provide much more detailed or layered information. Obviously in a real implementation of this example the name and address info would be different for each marker:

... <marker name="Business Name" address="Street Address Line 1, Street Addresss Line 2, City, Country, Code" tel="+XX 123 456 7890" lat="-36.7624557" lng="144.2874504" /><marker name="Business Name" address="Street Address Line 1, Street Addresss Line 2, City, Country, Code" tel="+XX 123 456 7890" lat="51.555386" lng="5.082930000000033" /><marker name="Business Name" address="Street Address Line 1, Street Addresss Line 2, City, Country, Code" tel="+XX 123 456 7890" lat="51.2164861" lng="4.4046062" /> ...

I am using the browser’s HTML5 Geolocation feature to attempt to locate the user on the map. That’s going to be confusing if your corporate network is routed through another jurisdiction. The user will be asked to allow the site to use their position. NB: Browsers including Chrome no longer support obtaining the user’s location using the HTML5 Geolocation API from pages delivered by non-secure connections. This means that the page making the Geolocation API call must be served from a secure context – eg HTTPS.

In this example I have implemented the map using the WordPress Shortcode API. We can simply add [insertSulbyMap] to the page or post where we want it. But it could equally be contained as a plugin or coded into a PHP template (which is how I did it in the version we built for the client).

The takeaway from this, for me, was that it was simple to code my own implementation using the Google documentation. Better than being an additional third party dependency by using a commercial plugin. Google already make it easy.

WordPress Customised Data Entry Interface – PT3

December 20, 2017

#JavaScript #jQuery #PHP #WordPress

The Custom Taxonomy [ Product Line ] is itself an entity and has 2 additional fields – for a PDF and an image to be attached – ie in the case where a single PDF and image is applicable to all products in a particular line.

WordPress has hooks to achieve this. In each case we use _add_form_fields, _edit_form_fields, created_product_line and edited_product_line. Not forgetting to santitize the input before writing it to the database.

Additional fields added to the Custom Taxonomy
Additional fields added to the Custom Taxonomy

Show Code

1 2

Show All Posts