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.

Wednesday, October 8, 2014

Sandy's first day with Plone and the Plone Newbie Developer Kit



"Plone add-ons?".

Sandy had never heard of Plone before, now she had a weekend to become familiar with it.

It started when she finally got a call back to work with a medium sized non-profit looking to add a full stack developer to their team. She had applied because she figured her experience with both backend and frontend development made here a good fit. It was now Friday and they wanted her to start next Monday.

No problem. Except for that little Plone thing. During the last discussion the head of the development team mentioned that they expected her to be able to "build Plone add-ons".

So she did what any sensible developer would do. She turned to Google.

After a bit of googling she was able to determine that Plone is a content management system written in Python and Javascript with some XML involved here and there. Thankfully she knew enough Python to help herself, having done a bit of Flask development in the past. With some further exploration she discovered that Plone runs on an application server called Zope, this made her a bit uneasy, she had never had to interact with an application server before. A bit more googling and she discovered the Plone Newbie Developer Kit (PNDK), what a relief!

Update April 27, 2014: Changed the command for plock to use pip install --user.
Update Oct 8, 2014: If you'd like to get updates about the PNDK, fill out the sign up form.


After ensuring that her machine had all the recommended dependencies she followed the instructions in the guide.

pip install --user plock
plock -e http://goo.gl/2aVZTB helloplone

Woah, a 7 minute install, that's faster than when she tried out Node.js. She then launched the application server and created her first Plone instance. Adding Dexterity content types she was able to create a deceptively simple looking "staff profile" content type and a few minutes later she had deployed the whole thing to Heroku. Not bad for her first day.

All in all the PNDK was just enough to kick start her Plone journey, not too fiddly with additional side notes that helped to fill in some of her newbie gaps. She was especially thankful for the screenshots, which she would constantly compare to her screen to confirm that she was on the right track.

This is the story I now carry in my head as I work on my latest personal project, the Plone Newbie Developer Kit. For more information about the rationale read the background to the PNDK. At the time of writing the PNDK is a work in progress and certainly has some gaps. All of that will change as it is refined over the next 3 to 6 months to make it match the experience of the story told above.

Monday, October 6, 2014

A Spontaneous Weekend Plone Sprint

TLDR; I unintentionally did a Plone sprint this weekend with Alex Clark on the fantastic Plone installer called Plock.

How I came to Plock

I'm working on something called the Plone Newbie Developer Kit (PNDK), more about that in another post. My philosophy in developing the Plone Newbie Developer Kit (PNDK) is to make use of tools that have already been developed. Where necessary this may involve contributing to the development of those tools. One such tools is a Plone installer called Plock developed by Alex Clark.

I had tried Plock in the past and it worked, however, because it used a methodology of pulling each dependent package as an individual download, it just took too long to do an install. So I contributed some code that allows a user to harvest the packages from Plone's Unified Installer cache. Yeah, I know that last sentence or two was basically jargon for 99% of the world but the bottom line is that Plock can now do faster installs. On my machines (Chromebook in devmode and an iMac) that translated to a 6 minute installation time down from 17 minutes with the old Plock way.


How the sprint was conducted

All communication was conducted via the Plone IRC channel on freenode. The Plock code was already in a repository at Github.com so I basically forked the code to my own repository, added my unified installer related changes and did a pull request and alerted Alex about it. and the conversation 



By the afternoon of the day we had a new release of Plock and Alex was inspired enough to start hacking on getting a pure pip deployment approach for Plone to Heroku using the new features.



 Alex added an issue tracker to which we've added a growing list of "todos" in the form of future features and fixes.



Summary of tasks accomplished

The following is a bullet list of what we got done on the weekend.
Given that this was a spontaneous and virtual sprint, just imagine what we can get done with a bit more planning. I think Plock is a good project for a motivated newbie who knows enough Python, one thing that I'd like to see is making Plock work on the Windows operating system, there's an entry in the issue tracker for that.

Wednesday, April 16, 2014

Install Plone in under 5 minutes on Codio.com

I was introduced to Codio.com by +Rok Garbas. It turns out to be a very nice platform for developing Plone projects. So far what I like is that every Codio box pretty much ships with all the Plone dependencies while at the same time having a full suite of Node based tools (important for modern Javascript development), this is a great time saver on new projects.

These are still early days so I can't say much more about the platform but I do love that Codio.com offers unlimited projects. The system feels like a good cross between Nitrous.io and Cloud9 IDE.

Here's a script (based on my Plone Nitrous.io installer) that will get you up and running on Codio.com in less than 5 minutes.

Once you've opened an account at Codio.com do the following:

Step 1 - create a new blank project


Step 2 - Open the terminal and run the script

Open a terminal by going to "Tools" > "Terminal".


Then paste the following command into the terminal.
curl -L http://goo.gl/5gwGgo | bash
You will see output similar to this:


Step 3  - Customize your Codio Project

Next to the help menu you should see the "Configure" option, if you don't see it click the little arrow near the end and then select "Configure".


This opens a .codio file which you can customize. Replace the existing text with the text below:
{
// Configure your Run and Preview buttons here.
// Run button configuration
  "commands": {
       "Start Plone":"plone-start.sh",
       "Stop Plone":"plone-stop.sh",
       "Debug Plone":"plone-debug.sh",
      "Admin Password": "cat $HOME/workspace/zeocluster/adminPassword.txt"
  },
// Preview button configuration
  "preview": {
        "Dynamic Site": "http://{{domain}}:8080/",
        "Static Index (static)": "https://{{domain}}/{{index}}",
        "Current File (static)": "https://{{domain}}/{{filepath}}"
  }
}

Now you're all set, you can manage Plone from the Codio menu.

Start and Set up of Plone

You can start Plone using the Codio menu. You should now see options such as:
Start Plone, Stop Plone, Debug Plone and Admin Password. 

To setup your first site "Start Plone" and wait about 20 seconds, make a note of your "Admin Password" and then select the "Dynamic Site" menu entry and click "Create a new Plone site". 

You should be good from there.

Monday, March 3, 2014

Video on getting a Plone Development Box up and running with Nitrous.io

This week at the March Jamaica Plone Meetup will be focused on learning about using the Robot Framework. This is a video designed to get participants up to speed before the event.




I've also prepared some slides and a github gist

The Gist