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

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 the following commands:

sudo apt-get install libxslt-dev libxml2-dev -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

Wednesday, September 9, 2015

Install Plone 5 Release Candidate on Cloud9 IDE

These are quick instructions for installing Plone 5 RC1 RC2 RC3 on Cloud9 IDE. This walks you through the process of installing Plone on Cloud9 IDE. We 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 the following:

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

This quick cloud based installation is a great way to try out some of the new things in Plone 5. Plone 5 is still being polished so it will have rough edges. Try changing the look of your site by following these notes from Asko Soukka on customizing Plone 5's default theme.

If you get this working, please leave a comment. If you try and have issues leave a comment.

Plone Development - There's a lot of information in those ZCML files

Reading ZCML files will open up a world of understanding to you as a Plone developer. A ZCML file is basically a roadmap that explains how the pieces fit together.

If you're interested in how a Plone package works find the configure.zcml and it will lead you from there.

A Fancy but Simple Example - Collective.Multimail

The collective.multimail add-on is described as follows "Allows you to use more than one mailhost. Email is filtered by rules which determine which mailhost to send a particular email to."

It takes advantage of an additional add-on called "collective.monkeypatcher" to extend/patch the behaviour of the "mailHost" email utility provided by Plone.
Read it for yourself and see if it makes sense.

Line 5 an additional namespace is registered called "monkey".
Line 23-29 the utility is used to "patche" the original "Products.MailHost.MailHost.MailBase" > "send" with its own "patch.send".

. . You can view the file in context at: https://github.com/collective/collective.multimail/blob/master/src/collective/multimail/configure.zcml

This examples shows the power of ZCML and also how it is possible to quickly understand how a the parts of a system work together by simply reading the ZCML file. Stay tuned, there's more to say about this ZCML thing.

Final Notes

Just to wrap things up, there really is nothing about ZCML that makes it a Python technology. It stands for the Zope Configuration Markup Language and it is used for (gasp) configuring things (in fact motivated programmers have developed component style implementations in other languages such as Ruby.).

Sign up for my upcoming Plone 5 Book & Video tutorials

plone 5 for newbies book and videos