Monday, March 7, 2016

Gloss - Build a dynamic site by assigning content areas to your static HTML theme

What if you could make a static HTML page into a living breathing dynamic site simply by "tagging" sections of your page as dynamic? Gloss aims to be just that, simply "tag" or "assign" sections of your static page with special gl- css classes and it will magically transform into a dynamic site. Currently we built Gloss as an extension of the Plone CMS and it has changed the way we look at the design/prototype/build workflow.

Here's a short video explaining Gloss.



For more information about Gloss visit the documentation page at http://the-gloss-project.readthedocs.org


Friday, February 12, 2016

Using Requirejs to load Jquery UI from a CDN

This post discusses how to use Require.js to load an external library.

One big benefit of Require.js is that it allows a developer to reliably load javascript modules without introducing dependency related conflicts. I needed to include Jquery UI into Plone 5 (which now manages the loading of javascript modules and dependencies using Require.js). If you're curious you can read more about use of Require.js in Plone.

In Plone 4.x you basically use the plain old javascript approach (with a bit of jquery magic) to load and run your scripts. Loading and using the Jquery UI datepicker might look like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
 $(document).ready(function(){
    $(function() {
    $( ".my-calendar-box" ).datepicker(
        { dateFormat: "dd/mm/yy" }
        );
  });
   
 });
</script>

With the introduction of Require.js in Plone 5 the code above would now look something like this:

<script>
require.config({
    "paths": {
      "jquery-ui": "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min"
    }
});
require([ "jquery", "jquery-ui" ], function( $ ) {
       $(".my-calendar-box").datepicker(
        {
            dateFormat: "dd/mm/yy"
        }
        );
});
</script>

Note that when we define the path to "jquery-ui" the ".js" is removed from the end of the path. We can now call our newly defined "jquery-ui" module by using a require() call.
Plone 5 ships with some common modules such as jquery so we only need to  require "jquery".

If you want to get a list of all the javascript modules that Require.js has already loaded, run the following command on the javascript console of your Require.js powered app:
require.s.contexts._.defined

It is more common to put all your require.js related code in a separate ".js" file and then load that file. I have notes on doing something like that with SemanticUI.

Thursday, January 21, 2016

From Zero to Plone - Towards faster on-boarding

About 4 months ago we took on a new developer and I started by explaining that it takes about 3 months to become confident with Plone. Being a confident developer he took this as a challenge, assuming that he would be over the learning curve within 3 weeks.

After 4 months plus of working with us I asked him to give me his feelings about my 3 month timeline. This was his response (with a few additions from me):

"I think I'm comfortable with it. However, it [depends on] the type of task you've given me... I might be uncomfortable with [doing a migration]. It's like giving a recently graduated doctor the task of performing a heart surgery as his first task at the hospital..."

So he's comfortable with some tasks but there are others that will require more experience.

I've actively been experimenting with ways of making Plone easier for at least 3 years (and less actively for longer than that). In that period I've come up with the idea of Plone Drills, created a Diazo Snippets Library and Chrome Plugin, worked out fast cloud based installation of Plone, done work on a Plone Newbie Developer Toolkit (Plone 4 only), contributed to Alex Clark's Plock Plone Installer project and spent a lot of time on a theming approach for Plone which "extends" Diazo called Gloss. I also created a short video series related to using Gloss with Webflow.

I'm still haunted by this problem space and the general idea of on-boarding web developers. It's led me to my latest side project, the aim being to provide a faster on-boarding experience for new Plone developers. I've been calling it a book but that might be a poor description since it will most likely involve more than just a text.

BTW... If you are interested in the fastest way to get going with Plone then I'd encourage you to sign up for my upcoming book/project/thing. You should see the option to sign up somewhere on this page.

Monday, December 14, 2015

Semantic UI + Plone + RequireJS (just a gist)

I wanted a way to include a jquery plugin in a Plone 5 add-on that I'm working on, but I really wanted to find the simplest way, without using bundles and registering resources with Plone's Genericsetup mechanism.
I was able to pull it off with standard page templates and static resources and it ended up being very close to the way it would be done without all the additional framework related code.

Perhaps I will go into more detail about this approach at a later date. But, following the principle of release early, release often, I'm posting a gist of what I've been doing.

Here's a screenshot of a page that's using the ratings component provided by SemanticUI (a jquery plugin).



I've posted the code with some explanatory notes as a github gist available here: https://gist.github.com/pigeonflight/69313231ad8c8a38082f

Hopefully it will save someone lots of time.

Thursday, November 26, 2015

Building a Self Hosted CMS Site using Webflow and Plone (Video Series)

One of my personal goals is to make it easier for persons to get started with web development technologies. I teach web programming at my local university, I blog about my preferred CMS (Plone). For front-end development I now point designers at Webflow. In line with that I've recently created a video series that shows how to use Plone as your CMS and Webflow for theme development.


Last month I spent 10 full days (and some nights) building out the initial videos which demonstrate the process of integrating Plone with Webflow.  I noticed a few days ago that there was additional money in my Paypal account, apparently as a result of a sale. I haven't exactly been over the top with my promotion and marketing since the launch, so it was an encouraging event.  While I did blog about it at medium.com, I never posted anything here on my personal blog. So this is my "official" blog announcement.

The video series focuses on using Plone 5 with Webflow.  Each video walks you through what you need to know in order to take advantage of Webflow for the look and feel of your site and Plone as a robust, self hosted CMS platform. The idea was to release new videos that will complete the series as I go, if you purchase today you lock into all the new videos for today's purchase price.
The topics covered so far:
  • Introduction
  • Installing Plone Sandbox
  • The Webflow Steps
  • Organize- Structuring your theme
  • What is Gloss?
  • Gloss Marker Classes
  • Marking your theme - Hands on Linking
Learn more on the "Webflow meet Plone" page.

I fell off a bit, I planned to add more videos to the series (for which I must apologize) I can safely promise the next video in the first week of December and more to come after that.

Monday, October 12, 2015

Taking Inspiration from the Webflow CMS (yes this is about Plone)

Webflow just released their CMS and it's slick. There are lessons for Plone and other CMS communities here. In case you didn't know who Webflow's target audience is you might want to watch this video.


I love this promotional video. Especially when he says that Webflow creates "Clean compliant HTML and CSS that I will NEVER EVER look at". That's the point, Webflow aims to free designers from depending on coders.

In achieving this goal the Webflow.com team does one thing very well, user interface (UI) and user experience (UX) design (maybe that's two things). The screen below is an example of how they manage dynamic data.


I've labelled what I think are the key aspects that drive this interface, (1) A clear link to an introductory tutorial especially important for first timers, but out of the way enough that regular users can just skip over it, (2) at the top of the next panel is the instruction to "Create Collection" this is effectively the "save" button, if you want to just accept the defaults, click this and you're done. (3) Some ready made "Collection Templates"  with predefined fields, you can select one of these and then further customize it to your liking. (4) "CMS Preview", a preview of the form, as it will be experienced by an editor of the site.

Collections & Collection templates... where have I seen this before?

The interface isn't just about being clean or slick, there is very purposeful choice of language. While many other platforms have gone with the idea of content types, they've made the underpinning concept "Collections", the whole focus is on creating collections of data such as recipes, events or blog posts and then displaying the individual items "Collection templates" or "Dynamic Lists".

In this paradigm what you might call a content type in a CMS like Plone or Drupal is now referred to as a "Collection template", which makes much more sense in the context of the the Webflow universe.

The interface also flows logically based on the idea of defining a "Collection" then a corresponding "Collection Template". Add to this logical flow very obvious visual cues and you have the makings of a beautiful interface.

Upon further reflection I realized that I had seen this somewhere before. In database programs like Filemaker Pro and Access. What Webflow has done is place the design firmly in the forefront. So a "Collection" is analogous to a database table, the "Collection templates" are associated with underlying forms which allow a user to add new records, finally custom display of the data is controlled visually through the same "Collection Templates" to make it display things the way we want. To top it off, an otherwise ordinary static page can also be made dynamic by embedding a "Dynamic List" which is effectively a feed from the table (uhm) collection.

Designer Friendly

It's clear that they've put a lot of thought into making it designer friendly.

I think the use of the term "Collection Template" instead of "Content Type" is a stroke of genius. It fits nicely into the visual designer paradigm and emphasizes the visual display of the content. Of course you'll need to define the fields of your content but that action is towards a specific end, templates are things that a designer interacts with all the time, by qualifying the name as a "Collection Template" there is no confusion with the other kinds of templates used in Webflow.

If you want to see where this really shines take a look at this video that explores Webflow Dynamic Lists:


After interacting with the Webflow system and then going back to Plone's dexterity content type editor I think there's room for UX improvement. The truth is Plone's Dexterity approach is far more capable and extensible but isn't as friendly for the visually oriented. The Webflow CMS wins in one important category, the ability to link a custom design process with real world dynamic content in a visual and easy way.

So now we have a really nice bicycle

The Webflow CMS is now a very slick bicycle, lightweight and fun to use. By contrast, your average CMS is more like an ugly car or helicopter, very capable but far less fun to use. Complexity is often a result of additional features and what we're witnessing with Webflow vs other CMSes is a slicker less complex ( though less feature rich) system when compared to older more capable but less slick CMSes. From the perspective of the Plone CMS I'd say we have a helicopter, not as slick as the Webflow bicycle but more powerful. Calling Plone an ugly helicopter is not meant to discourage the Plone team, but the fact is, while a lot of improvement has happened, there's a lot of UX work that will need to happen to bring the Plone experience on par with the Webflow experience, but we certainly have the tools make it happen. One thing I'm keeping my eyes on is the the newly emerging Mosaic drag and drop layout editor. Here's a video of Mosaic in action:


So why don't I just use Webflow by itself? For really small projects I may, but there are some limitations to committing to a bicycle, even a slick one. I consider Plone to be far more powerful and it has a mature ecosystem of add-ons, I can implement custom authentication for example to integrate it as an intranet solution or use it for file management, just to name a few things.

I suspect that this won't matter much for Webflow's core audience (the visual designers who want to ditch the coders), they will definitely adopt the new Webflow CMS.

As for me, my workflow is a mixture of Webflow for developing the design and interactions to generate clean compliant HTML and CSS. I then make my static Webflow site dynamic with Plone. This has worked beautifully for me over the past 2 and half years. Next on my agenda is to refining our tools and processes to make it even simpler for the visual designers that work with us to prepare layouts that work seamlessly with Plone.

Monday, September 28, 2015

Installing Plone 5 on Cloud9 IDE

March 21, 2016 - updated the commands to ensure that all dependencies are installed before running the custom script (thanks to CodinCat for comment below)

Plone 5 was released today. Here's how to quickly try it out on Cloud9 IDE.
I'll assume you have already signed up with Cloud9 IDE.

Step 1 - Create a new Workspace

On the Cloud9 IDE dashboard select Create a new workspace

Use the default settings as a Starting Point

Then click Create workspace.

Step 2 - Enter the installer command in the terminal

in the terminal type (or cut and paste) the following commands:

sudo apt-get update
sudo apt-get install python-dev python-virtualenv libssl-dev libxml2-dev -y
sudo apt-get install  libxslt1-dev libbz2-dev python-tk python-gdbm -y
wget -qO- goo.gl/HBzmFw | bash

You will see output similar to this:

Step 3 - Launching Plone 5

After successful installation (takes about 5 minutes) run the following command:
cd zinstance
bin/instance fg
Once it has started successfully you'll see the following message on the terminal:
INFO Zope Ready to handle requests
At that point select Preview > View Running Application.




IMPORTANT: You'll need to get the adminPassword, it is located under the 'zinstance' folder see the screenshot below.


Once it's running, click on the "pop out" button



This will lead you to the Plone installer (it will look a little weird, because of an issue with proxying the site via https). Click on Create a new Plone site and following the instructions.

Once you're successful you'll see a running Plone 5 site:

Things to Know

Here are a few things to know about Plone.
  1. Plone runs on an application server called Zope 
  2. You can actually run multiple copies of Plone on one Zope application server

Next Steps


  1. Enable caching "Admin" > "Site setup" > "Advanced" > "Caching". Plone will go much faster.
  2. Browse around the Plone 5 docs

Sign up for my upcoming Plone 5 Book & Video tutorials

plone 5 for newbies book and videos