Friday, July 31, 2015

5 minute Plone 4 install on Cloud9 IDE

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

Help, my updated posts keep bubbling to the top of the Planet

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.

How to connect your Chromebook to a Windows SMB/CIFS Share

In order to connect to the share you'll need to know the name or ip address the host and the domain name.

1. Install the Files System for SMB/CIFS and Windows
Go to the Chrome Web Store and search for SMB/CIFS, you'll find the File System for SMB/CIFS and Windows.

2. Go to the ChromeOS File manager and select Add new services

You'll see an option for "File System for SMB/CIFS and Windows".


3. Enter your credentials
In my experience I found that the domain name was case sensitive.



Monday, May 25, 2015

Plone 5 Beta 2 in the Cloud

These are quick instructions for installing Plone 5 Beta 2 on Codio.com.
I have found no faster (or more newbie friendly) way to get a Plone sandbox up and running.

I'll assume you have already signed up with Codio. If not, go ahead and do that first.

Step 1 - Create a new Project

On the Codio dashboard select Create Project


Use Default as the Starting Point and click Create.


Step 2 - Open the terminal

Select Tools > Terminal.

Then on the terminal enter the following command:

wget -qO- https://goo.gl/XxDEOO | bash

You will see output similar to this:

Step 3 - Launching Plone 5

After successful installation (takes about 6 minutes) you'll see that the menu in you project has updated.
Select Start Plone from the menu.


Get the admin password by selecting Admin Password from the menu, you'll be promoted for it later.



Select Plone site port 8080. This will show you the Plone installer


This will lead you to the Plone installer

Things to Know

Here are a few things to know about Plone.
  1. Plone runs on an application server called Zope (this is why you'll see mention of Zope and ZEO as you work)
  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 you're stuck

Monday, May 18, 2015

Baby steps in learning ReactJS

As a way to better understand my process of learning a new technology I've captured the first two days of my journey of learning ReactJS


Day 1  - Thursday April 30, 2015

What I did on this day


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

The Diazo Snippets Chrome Extension

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 the Extension

To get started with the Diazo Snippets Library extension, visit the Chrome web store and install it on your Chrome browser. Once installed you will be able to browse and filter various snippets based on their label.

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.

Saturday, December 27, 2014

Introducing the Diazo Snippets Library (and less Arcane)

TL;DR.

Roughly a year ago today, I wrote a blog post entitled "Diazo theming is great, now we need a snippets library". It is therefore somewhat appropriate that I am able to reveal my first simple attempts at addressing the snippets library problem in a blog post almost exactly 1 year later.

update April 16, 2015:   The Diazo Snippets Library is now available as a Chrome Extension Now available as a Chrome Extension


A Diazo Snippets Library

One year later to the day, we now have a basic Diazo snippets library. You can check it out at http://pigeonflight.github.io/lessArcane/.



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.

Check out Diazo Snippets Library here:  http://pigeonflight.github.io/lessArcane/
Check out the lessArcane Library code here: https://github.com/rhysallister/lessArcane.