Friday, July 31, 2015

This is an overview of getting Plone 4 (4.3.6 at the time of writing) up and running in 5 minutes or less on Cloud9 IDE. The aim of this is to make it easy, especially for students, to try out Plone, and more importantly Plone development for zero dollars. My previously recommended cloud based options (Nitrous and Codio) no longer offer a viable free tier.

Step 0 - Get a Cloud9 IDE account

You will need to get an account with Cloud9 IDE, so go and sign up over there and then come back here.

Step 1 - Start a new Custom Box

Not much to say here. You can accept all the defaults to and then click "Create Workspace".

Step 2 - Run the Plone installer script

In the terminal paste the following command and press enter to begin the installation:

curl -L https://goo.gl/Enjwms | bash

You will see output similar to this:

Step 3 - Launch the server

Run the following commands to start Plone as a foreground process.

cd $HOME/workspace/zinstance
bin/instance fg

To stop plone use Ctrl + C.

Step 4 - Setup Plone

You will know that Plone is running when you see the following message in the terminal.

"Zope Ready to handle requests" ([3] in the screenshot below).

You can view the default administrator credentials, username and password under 'workspace' > 'zinstance' in a file called adminPassword.txt ([2] in the screenshot below). To go to your live server select 'Preview' > 'Preview Running Application' ([1] in the screenshot below).

You will see the Zope server ready to create your first Plone site. Start by clicking the little icon to pop it out into a new window.

You can now create a new Plone site, you will be prompted for your Admin credentials (we discussed the adminpassword.txt above)

Zope server, ready to create a Plone Site

Click create Plone site and enter your credentials.

Important things of note

Cloud9 IDE provides a proxy that listens on port 8080, this is the default port for Plone if you change the port later on you will not be able to access the site using the Preview link.

This is for the purpose of development NOT PRODUCTION USE. For developing your new Plone based site you can work right here.

Thursday, July 2, 2015

I kept noticing that whenever I updated certain posts they would end up at the top of the Planet Plone RSS feed aggregator. I haven't dug too deeply into the issue, but it seems to be a mixture of the way the Planet is configured and the way default blog feeds are presented by Blogger. Thankfully, the default Blogger feed format can be easily changed.

Previously the feed I used for Planet Plone looked something like this:http://pigeonflight.blogspot.com/feeds/posts/default/-/plone
Which resulted in a feed enclosed between feed tags like this:

<feed xmlns='http://www.w3.org/2005/Atom'...

My new URL now looks like this:http://pigeonflight.blogspot.com/feeds/posts/default/-/plone?alt=rss
The new approach (ie. appending ?alt=rss) resulted in a feed with an rss tag like this:

<rss xmlns:atom="http://www.w3.org/2005/Atom"...

I did not delve into what other things get changed by using '?alt=rss', but the most important outcome is that the "Planet" (Planet Plone) is now safe from the occasional updates and revisions to my blog posts.

Notes
At this point my aim is to get a general grasp of what ReactJS is, I'm focusing on understanding the mechanics of the framework. I think my next step will be to follow along more closely with the "Thinking in ReactJS" presentation.

Impressions:
ReactJS flies in the face of convention and eschews the idea of templates, favouring what they call views, also very counter-intuitively they "redraw" the DOM for every update yet in benchmarks are able to outperform AngularJS. To achieve this they use a virtual DOM and only render to the real DOM on an "as needed" basis.

Day 2 - Friday May 1, 2015

What I did on this day

Back on the ReactJS website and then decide to work my way through the Thinking in react tutorial again.

Notes
In following the tutorial the first example failed because the code was out of date. This slowed me down for about 5 minutes. It turns out that React.renderComponent() is now replaced with React.render() so I was working with a slightly dated tutorial, after replacing switching the code to use React.render() instead of React.renderComponent() I was able to make my way through the tutorial.

After an hour of following the tutorial I had the static version working and started to learn about React's concept of "state". I decided to break for a while and grab a snack.

What I know now

ReactJS is about building components, usually from existing HTML and Javascript

They provide a HTML like syntax called JSX which simplifies the creation of these components

I'm learning some of ReactJS's methods such as render()

Two days in, I think I know enough to tentatively try this in a new project. I'm sure I'll gain a lot more facility with a week or two of usage.

Parting thoughts

So far I've spent 3 to 5 hours on this journey and things are starting to make sense. My feeling at the moment is that I first needed to capture the overall concept of what React does, the virtual DOM and React's JSX syntax. Once I was fine with that I needed to use it in a trivial example, in my case the static version from Thinking in React tutorial. I'm confident about being able to do that now.

Next I'll spending time getting comfortable with idea of working with state.

Tuesday, April 28, 2015

While building out your Diazo themes, have you ever needed to include a slideshow or transform a drop down menu so that it is compatible with the Bootstrap or Foundation grid systems? For me these kinds of tasks have introduced unwanted distraction to my otherwise fluid theming process, easily adding hours to what the task. In the past I've blogged about the need for some kind of theme reference library and so, to scratch my own itch, the DiazoSnippets Library Chrome Extension was developed. It is built on top of lessArcane a small library devoloped by +Rhys Allister and myself (mostly Rhys though) for the purpose of sharing code snippets stored in json format.

It started out as a collection of examples stored in GistBox. I invited a few persons from the Plone community to participate by contributing snippets of their own. The result was a couple dozen useful snippets organized and classified using labels such as "portlet", "navigation" and "breadcrumbs".

It wasn't enough to stop there, in order to share the work with the wider community, these snippets are reviewed and periodically bundled and released as an updated version of the Diazo Snippets Library Chrome Extension.

Get involved

The growth of this library depends on the contributions of members of the Plone community. In order to contribute just request access to our Diazo gistbox group and we'll send you an invite. Once you're signed up we ask that you review existing snippets and add new ones.

A Diazo Snippets Library

Not much to see, but it scratches an itch I've had for a while. The library makes it possible to locate useful Diazo rules snippets, filtered by different categories, not much more yet.

Background

It all started with Gistbox

To pull this off, I first started aggregating snippets from around the web in Gistbox and also solicited help from others to submit their own snippets.

After shopping around a bit I came upon Gistbox which supported the idea of groups. So I set up a group for Diazo snippets.

The drawback with using Gistbox groups was that the snippets were only available to persons who joined the group. I wanted them to be more public so I set about working on a way to export the snippets. It turns out that Gistbox passes around their data in JSON format, so I was able to "sniff" out the JSON data and export it as a data file.

A new Open Source JS library is born (kinda)

With the help of front-end developer and GIS man +Rhys Allister I set about putting together a static system for displaying the Diazo snippets based on the outputted JSON. From that work we developed a very alpha library with the working title "less Arcane".

One nice spin off of the collaboration with Rhys is that we now have the beginnings of a generic library which can be used to display JSON retrieved from Gistbox. I like that, being straight JS, it is cheap and trivial to deploy.