JavaScript Comes To WordPress

What Calypso means to WordPress Users

JavaScript has always been a part of WordPress. But within the last 5 years WordPress has expanded its use of 3rd party JavaScript libraries as seen in the current list of supported JS libraries:
Backbone.js – handles much data table operations
cropper.js – key part of media library Crop tool
emoji.js – manage emoji icons
html5.js – checks HTML elements
jQuery .js- most frequently used JavaScript library
jQuery.imageareaselect – part of Media library edits
jQueryUI. – many admin interface ops
swfupload (deprecated) – Adobe Flash is disappearing
ThickBox – Gallery views
TinyMCE.js – Visual editor features
This list of JavaScript routines varies widely depending on  the theme and plugins being used in your WordPress website.

Enter Calypso

calyp2In November of 2015, a new Calypso UI/UX interface was introduced on WordPress.com  as the screenshots below show. Matt Mullenweg,  WordPress creator and curator, has announced, JavaScript has become the dominant coding tool for the WPAdmin Client and other user interface functions at WordPress.com.

So when you  use  one of your blogs at WordPress.com you will have a choice whether to use the JavaScript-based Calypso interface or the traditional PHP-based admin and edit  interface. The key question is what does this mean in the long term to the PHP-Centric WordPress  Core and the 42,000++ PHP-based WordPress plugins currently available to WP users.

So now with WordPress.com, users have all the major WP screens and operations but with new JavaScript driven interfaces. Much of  the Calypso interface reproduces the classic WP Admin UI but there are some major changes. Here is a Calypso Post Edit screen:
calypsoMost of the PHP-based traditional Post and Page edit interface is faithfully reproduced in Calypso JavaScript but with new left versus right sidebar orientation. Unfortunately I was surprised to discover that many of the WordPress Edit Annoyances are preserved in the new Calypso editor. If you want to check this out on your WordPress.org hosted website, just add the JetPack plugin and enable the Manage Jetpack option.

Calypso is used throughout the new admin interface. Here is a sample:
wpcalmenu

In the screenshot above the drag and drop Menu interface now has  a + icon driven placement of new menuitems. In the Page/Post editor, the Visual Edit tab looks very much like the classic WP editor but the Text or HTML tab is now stripped of all its edit commands:
wpcaledithtmml

Also note that the Editor sidebar is on the left and most of the commands are contained in an accordion pulldown. However, many of the classic WP  commands have changed position,  layout or even have yet to appear in the current Calypso interface.

For example, the gallery command in the media library sees a simpler interface:
wpcalgallery

Even more useful, now there are 7 gallery layouts including tiled mosaic and slideshow layouts that are simple and easy to use. But these layouts cannot be configured at all while there is still no list of galleries . So this  removes  some of the luster for Calypso gallery support.

Major New Calypso Features

In the past few months a number of Calypso features have snuck out the door including changes to the editor  and JetPack configuration/settings, etc. But with  the Calypso unveiling, all of WordPress.com  admin interface has changed. And the new Admin interface [you can still revert to the classic old WPAdmin] takes on new functionality.

First, using a special Calypso Mac App or WordPress.com in any major browser, and a JetPack plugin enabled hoste WordPress.org website, users now can tryout many parts of the Calypso interface have a multisite admin interface for many WP tasks:
wpcaladmin

So from my WordPress.com MySites page I am able to edit my PicsofCanada.com website which is hosted on an  external server. This is attractive because it means I can go to one place to administer a host of my own and client websites. There are restrictions, see here for details.

Second Calypso key feature is that JetPack now has a uniform JavaScript base with a common setting/configurtaion interface. But this raises a question, that Matt Mullenweg is not prpapred to answer – will JavaScript replace PHP as WordPress’ Core language?

Third key feature  is the fact that WordPress now has a more general Notifications system. Users go to one place to see clients reactions and comments to messages and posts online. This messaging  answerback  page   could be extended to other social media like Faceboook, Google+ and Twitter.

In sum, WordPress with its JavaScript for admin and  client side  operations now has a new state of the art interface using the latest JavaScript libraries. Just a little future proofing by adding and/or intensifying the use of server-adept JavaScript libraries like angular.js, node.js , React.js, etc. More broadly, JavaScript after 24 years of Web evolution, emerges as the driving programming language for WordPress and also  broader Web  development.


Calypso Resources:
Definitive Overview
GitHub Open Source
Matt Mullenweg talks Calypso among other things
The Future of WordPress in 2016

Posted in coding, ui | Tagged , , , , , , , , | Leave a comment

Eco-Scroll jQuery Plugin

I have been looking for a robust jQuery plugin that would allow me throw up a wall of images very quickly – no fuss, no muss, just display them quickly in a Window. And with thef Eco-Scroll  plugin plus the Photoscape‘s Batch Image Editor I have found a very nifty solution to my problem:
ecoscroll1 Now here are the features of the Infinite Image Wall:
1)It is responsive, expanding and shrinking the image wall to fit the viewport;
2)It allows developers to determine the size of the images displayed;
3)The display size of the images can be different from the actual size;
4)The actual image sizes do not have to exactly match, the resize operation, shrinks and expand image automatically. However, mixing landscape and portrait will lead to distortions depending on what image display size is chosen;
5)For non-touch screens, mouse drag and drop moves the images in any direction; for touch screens, swipes work;
6)For developers it is easy to add lightbox or other functions to respond to clicks on any image as shown in the screenshot below;.
ecoscroll2
7)Developers can easily add “momentum” to the swipe/mouse-drag operations
In sum, there is a lot to like in this free jQuery plugin. But there is more.
ecoscroll3
Bootstrap-like Carousel with Touch and Drag support. And there is more, the Wall of YouTube.
escroll4
This again turns out to be handy because you can collect your favorite JavaScript Tutorials or Tonight Show Lip Sync Battles and put them on your online, responsive, and swipeable Youtube Wall and watch all the user traffic roll in.

Summary

I like Eco-scroll because it more than delivered on being able to quickly setup an Image Wall full of useful features. The icing on the cake was all the added features and functionality. Check it out here.

Posted in coding, reviews, ui | Tagged , , , , | Leave a comment

All the Free Lectures in the Past Year

Well being an advocate of Open Source I had not realized the number of free tutorials and lectures I have given until I gathered all the posters together. Here is what has happened from Feb 2014 to Feb 2015:

Posted in coding | Leave a comment

CodyHouse – A New JavaScript Framework?

JavaScriptures has followed the fast development of JavaScript frameworks with UI based frameworks like DHTMLx and Sencha with their nifty page oriented Visual Designers. There is also the responsive SPA-Single Page Applications JavaScript frameworks like Bootstrap, Foundation, and Ink . Well a new Web Design website CodyHouse has appeared with some striking similarities to the SPA Javascript frameworks – free, design oriented, HTML5, full CSS, JavaScript components. Here is a sampling of CodyHouse components.

cody2libraryThere are currently 36 of these components available – but a new 1-3 appear every month

And CodyHouse provides a demo of how each of their components work -doing one better than the other JavaScript frameworks :
cody1

There is a detailed explanation of the HTML, CSS, and JavaScript involved:
codydetailsClick on the above screenshot  to find one of the CodyHouse co-founders.

In addition the CodyHouse getting started page provides a HTML/CSS/JavaScript test harness for embedding CodyHouse components  for rigorous testing . Again a screenshot is worth a thousand words:
cody3start The getting started guide and test harness are  refreshingly  complete

CodyHouse components have a test harness that is quite general. And all that an adventuresome Web developer would have to do is add the various  CodyHouse components together, check the responsiveness of the code ensemble, create a small templating system – and you have another very good HTML5/CSS/JavaScript framework.

Summary

Coders who use Bootstrap, Foundation Zurb, and Ink should take a careful look at the CodyHouse’s UI components. Trust me, CodyHouse works well for SPA-Single page Apps as well as more complex multi-page designs with one proviso- be careful with the CSS.

Likewise WordPress sites [but not WordPress.com users] and Blogger users will find that CodyHouse components can bring design flare to their websites. There are several plugins and PHP code snippets in WordPress for importing CodyHouse components while Blogger allows iframe code/component embeds among other ways to add HTML/JavaScript/CSS components in.

So JavaScript coders plus Web designers and developers have with  CodyHouse  a great new source of both design ideas and viable UI components …Oh and maybe the makings of a new JavaScript framework.

Posted in coding | Leave a comment

Two jQuery Grid Layout Routines

Web design constantly uses image grids for such applications as product listing pages, portfolio sites, or travel site pages. The typical image grid uses a common size thumbnail image size  say 250 x 180 pixels or whatever the client needs. For example:
fleximisotope
This Isotope.js  list of artists with  all thumbnails at 300 x 200 pixels 
Currently there are two free jQuery routines that handle these grids very well with  comparable features but also each has some unique capabilities – Isotope.js and Fleximage.js. This review will look at the two routines and their trade-offs. But first lets consider why you would want to use an image grid rather a slider.

Comparison of Slider vs Image Grid Usage

Given the wealth of free and responsive JavaScript sliders and the equally impressive list of free WordPress  sliders, one might well ask  why use a image grid when so many good sliders are available? There are a number of free and good Carousel sliders with multiple images in a row available. But that is the problem with using sliders…they don’t do  a grid or table of images well.  Pinterest shows the power of a versatile image grid:
pinterest

In contrast image grids like Isotope and Fleximages thrive on being able to display grids of thumbnails for a product listing, portfolio showcase or people catalog with extra features like captioning, links, varying gutter and borders, filters of the images, etc. Image grids with flexible capabilities  are vital to Web apps and website UI design.

Comparison of Fleximages.js and Isotope.js

There are a number of JavaScript image grid routines. However, the following list of features for Fleximage and Isotope show the features that sets them apart:

Feature Fleximages.js Isotope.js
Cost  Free  Free, $25 one time for commercial use
Documentation/Examples Good Very Good
Responsive Yes Yes
Fixed size image Fast, well fit Fast, well fit
One image dimension varying Fast, well fit slower, more blank spaces in grid
Both dimensions vary Fast, well fit  slower, more blank spaces in grid
Control of border, gutter Yes Yes
Captions with positioning Yes Yes
Links & HTML in image grid Yes Yes
video, iframe Yes Yes
Lightbox popup 3rd party 3rd party
Infinite Scroll Ajax routine Yes
Filter out images No Yes
Randomize Image order No Yes
Infinite Scroll Ajax routine Yes
Lazy loading Yes 3rd party
Truncate incomplete last line of images Yes No
WordPress Support iframe plugin

Fleximages.js has 3 advantages over Isotope.js. First and foremost Fleximages handles the case of images varying in size on one dimension or both with much faster performance and  a better first fit than Isotope.js. The example below shows

flex1

Fleximages, like Isotope, allows different sized images in the grid. But in case above, the grid was rendered faster  and with a better first fit than Isotope. Also,  shown below, Fleximages has truncated off an incomplete row of images and/or videos.

flex2videoAnd like Isotope, Fleximages is responsive –  resizing the videos as the row is shrunk in a mobile app. In this coding, Fleximage is set to truncate any video/image that stands alone in a row using the option truncate: 1 .

Can Fleximage deliver captions and links within those captions?
flexcaptionsAgain, Fleximage like Isotope, easily handles captioning including wrapping to a second [or more] lineas required. Note the blue 222 in the second caption is a link to another page. Like Isotope, users can position the caption anywhere above, below and on top of the contained image/object. This captioning and linkage is vital for product and portfolio grids of images.

Isotope.js comes to the fore in three cases over Fleximages.js. First and foremost, is the ability of Isotope to filter images based on  tags [CSS class names]:
peggysbookClicking on the tag Fiction will show just the Fiction books written by Peggy Leavy.  A click on Mystery  reveals Peggy’s mystery titles. This capability  is vital in displays of product showcases or travel catalogs, etc.

Another feature of Isotope is its ability to randomize the order of the grid images each time it is displayed on a website. This requirement arises on joint artists sites for example, where no one artist should always be at the head of the image grid. Finally, Isotope.js has excellent documentation with lots of examples.

Summary

With Fleximages and Isotope  I have found two  jQuery routine that can  display images grids with great flexibility. These images can have captions, links, and contain videos or iframes. Fleximage gives greater speed and a better fit on first try [Isotope on screen refresh hones in quickly on a better fit]. But Isotope provides vital instant filtering of images. Best of all both routines can be used very effectively with Foundation, Ink, or Bootstrap JavaScript SPA-Single Page Application frameworks. In addition, using iframes, Fleximage or Isotope can be used in WordPress or Drupal and other CMS websites.

Posted in coding, reviews | Tagged , , , , , , , , | Leave a comment

Working with Foundation 5 JS Framework

JS Frameworks for delivering mobile responsive websites have improved dramatically over the past 3 years. Twitter Bootstrap 3.2 has already been reviewed for its fit with DHTMLx and then another demo of Bootstrap with several UI/Widget JS Frameworks. One thing is for sure, developing with Bootstrap and its 12-column grid styling plus basic JavaScript routines is indeed fast and effective. However, there are some problems when using other JS Frameworks with Bootstrap. Read the above reviews for the details.

This prompted a review of other JS Mobile Responsive Frameworks like Foundation, InK-Interface Kit, and Skeleton. The common thread among these JS Frameworks is:
1)easy to use 12 column or higher grid layouts;
2)powerful menu navbars with dropdowns, buttons, and sticky positioning;
3)enhanced CSS usually with LESS or SASS/SCSS;
4)JavaScript components which implement basic UI widgets like tabs and modals.

So this review will look at Foundation 5 and how it measures up to Bootstrap for simple event and portfolio apps. This first comparison will  not use other JS UI/Widget Frameworks but rather will use some sliders and iframe routines. Here is the Northumberland Hills Fall Festival of Events schedule:

Click on the screenshot to get all the details on Northumberland Hills Fall events.

The elements that are common between BootStrap and Foundation, are the following:
1)The sticky menu. Scroll down in the file and note that the menu stays at the top.
2)Dropdown menu items. Click on Fall Colors and Fall Colors 2 to see the dropdown menuitems.
3)Collapse to menu icon in small display mode. Collapse screen to mobile phone portrait.
4)Easy 3 column [or any from 2 to 6] layouts.
5)Auto-resizing of text, images, video and iframes. Test this by resizing the screen.
6)Support of modal popup windows. Click on Northumberlad Hills menuitem.
7)Support of core slider functions. Click on Fall Pictures to see slider.
8)Using a dropdown to allow users to select the iframe Fall Scene they want.
In sum on basic functionality for this Northumberland Hills website, both Bootstrap and Foundation have more than enough features to make building this SPA-Single Page App easy and fast. It took 7 hours using Foundation. But that includes 9 Fair events, 2 summaries, a slider with 9 images, a choice of 18 fall scenes, plus a  popup modal window with image plus Mapquest map of Northumberland Hills. In less than a day a major promotional site was produced.

The Differences

We have argued that in basic functionality, Bootstrap and Foundation offer roughly equivalent capabilities. However, the JavaScript components are a bit richer in Bootstrap but Foundation gives users the ability to create their own script extensions. Foundation has a very good set of onsite templates. But Bootstrap has a very good 3rd party site with many free and useful Bootstrap templates. Perhaps the most significant difference is that Bootstrap has available both LESS and SASS source versions whereas Foundation is exclusively SASS based.

Nonetheless, one can see a trend here; each JS Framework has some distinctive attributes but for the most part they are closely matched. For example, this reviewer found the Bootstrap Getting Started guide easier to follow than Foundation; however both have very good overall documentation. Likewise, both Bootstrap and Foundation power several WordPress themes each. However, Foundation has a broad set of other resources conveniently listed on its site.

Summary

To create a very good SPA-Single Page Application website promoting various events, fairs and festivals around Northumberland Hills, Foundation 5.3.3 JS Framework proved more than equal to the task. However, this reviewer has done a roughly equivalent portfolio site in Bootstrap 3.2 in slightly faster time – 4-5 hours. However, with Bootstrap we did have conflicts when using multiple JS libraries with Bootstrap. Unfortunately, a project requiring multiple JS libraries using Foundation has not yet been done.

So a definitive conclusion on the relative performance of Foundation versus Bootstrap is not possible. However,  right now one can say creating Single Page Apps or attractive Landing Pages using either framework will be  easy to do. And  all the indications are that these two JS Mobile Responsive Frameworks will not be too far apart in performance as well as development.

Posted in coding | 3 Comments

Working with Bootstrap 3.2 II

In a previous post , using BootStrap 3.2 with DHTMLX4 was described as a mixed proposition. Use the Standard edition of DHTMLX and users get only semi-responsive widgets – many widgets  do not respond to resizing events. Use DHTMLX touch and resizings now work but the choice and feature set of the UI components/widgets available is more limited.

So to respond to this trade-off, our second demo test looked at using DHTMLX Touch for tabs  and some other popular JS UI/Widget frameworks for the accordion, grid and other widgets. Also the test was to see how Bootstrap stood up to usage of multiple JavaScript Frameworks.  Here is the screenshot of the test app:

Click here to to go to the demo test.

Again, the results of using Bootstrap 3.2 with several other JS libraries presented some problems . There were some  JS library conflicts which utterly halted the program. The most notable were the Bootstrap and jQuery-ui.js clash plus Prototype.js and Bootstrap [ see here for details]. But also CSS3 :Hover and :Focus accordions did not work with conflicts with Bootstrap CSS. Another vexing anomaly was the failure of anchors to work in Bootstrap, so we had to write a jQuery hack function [scrollToAnchor()]to restore functional anchors.

In general, working with Bootstrap and  several different JS libraries means precautions have to be taken. Be sure to test out as soon as possible that the different JS libraries and CSS are compatible. Given that jQuery is used to power several of Bootstrap’s own widgets, it is generally the safest library to use. Sencha EXTjs  and Touch have their own connector scripts with Bootstrap.

But there is another, perhaps more worrying problem using JS Frameworks like Bootstrap – increasingly incompatible browsers. More often apps that work on the LOCALHOST test machine in all of the 5 major browsers  suddenly do not work when deployed to the Web as seen here. More often the problem is that some of the JS code was tested early and worked; but then when a full set of JS methods and requisite CSS were loaded up, deployment problems occurred. Hence one can quickly appreciate the advantage of test-intensive development.

Posted in coding, ui | Tagged , , , , , , , | 2 Comments