Jump to content

ProcessWire Screencasts / Video Tutorials


Jonathan Lahijani
 Share

Recommended Posts

Hello all,

I love ProcessWire and the community.  It is a fantastically architected CMS.

I believe over the next few years it will continue increasing in popularity as more people catch word of it.  Perhaps it can even take a few percentage of marketshare away from WordPress, which powers 20%+ of all websites on the internet (insane, right?).  Well, I'd assume a good portion of those are just wordpress.com blogs that no one reads or have been abandoned, but I could be wrong.

I believe we can speed up the adoption rate and open people's eyes faster.  They just need to see the light.  The forum recently past the 2000th signup, which is about double the number last year.  Perhaps we can have 10,000 a year from now.

With that being said, I wanted to announce a project that I will be pursing... (drumroll please)...

It will be called: Wirecasts.com

I envision it as a website containing short, 5-10 minute videos discussing various topics with ProcessWire, much like Railscasts.com is to Ruby on Rails.

My first goal is to start with a series of videos that goes head to head with WordPress.  I will demonstrate how to do things in ProcessWire that developers are accustomed to in WordPress.  For example:

  • Local Installation
  • ProcessWire Pages vs. WordPress Posts + Pages + CPT's
  • Building Menus
  • Custom Fields
  • Themes vs. Site Profiles
  • Shortcodes vs. Hanna Code
  • Showcasing all kinds of plugins in WordPress and their ProcessWire equivalents (like Gravity Forms vs. Form Builder, etc.)

I also anticipate creating videos related to some of the topics here on the forum.  What's the best way to make a login form?  What's the best way to organize content?  And so on...

Over the last few days, I've been perfecting my screencasting technique for this project.  I have a super clean virtual machine with Windows 8 and minimal software (Chrome, Sublime Text, XYplorer) specifically configured for these videos.  Videos will be shot in 720p with my Patrick Bateman-like radio voice narration (will need to work extra hard to get that part right).

Here's a video I recorded and edited today.  It does not yet have voice narration, but it will give you an idea of the quality I'm shooting for.

http://bit.ly/1m1H66B (10mb mp4 file)

I'd like to hear your feedback and any suggestions to make this a great site!

Stay tuned.

Jonathan

  • Like 27
Link to comment
Share on other sites

Awesome idea -- there's definitely demand for this. Please keep us posted on your progress!

Seems like you've already got some great ideas there too. Might want to cover various caching settings and modules too, and of course classic tasks like "how do I create tags in ProcessWire", just to add something :)

  • Like 2
Link to comment
Share on other sites

I've not had a chance to look at the video yet, but I'm wondering it might be an idea to put videos on the ProcessWire website? Just looking at the topics you're suggesting it's the sort of thing people are definitely looking for so why not have them closer to hand?

  • Like 2
Link to comment
Share on other sites

@Pete: not saying that it would be a bad idea, but there are benefits to separate site too. First thing that comes to mind is that external sites with PW focus may actually make us look bigger (not that size would really matter, you know), but this could also promote healthier ecosystem; if there are existing sites that focus on PW topics, it's much easier to setup one of your own, which IMHO benefits the project itself in the long run.

All in all I'd love to see more diverse ecosystem and don't think that we should attempt to gather everything in one place.. apart from the things it makes a lot of sense for, such as the modules directory, of course :)

  • Like 7
Link to comment
Share on other sites

Hi Jonathan,

sounds like a great plan - and the quality of the demo video is fantastic.

Me personally I'm still curious to learn more about the technique behind your processmarks app: 

But that's off topic of course ...

  • Like 2
Link to comment
Share on other sites

@jlahijani: I love this idea and the domain name sounds great (maybe you should wirecasts.tv, too) :) Maybe you could even include a "submit" function - which of course needs to be curated for best quality. Then other ProcessWire Users could submit their videos to a central space and you would have half of the work :)

  • Like 2
Link to comment
Share on other sites

Nicely done!

Video tuts/screencasts can be so useful on so many levels. I look forward to more with narration.

I like these videos. One thing I notice with many efforts in this arena is that some videos "move" too slowly or too fast. Some have poor video quality which creates eye strain with the viewer missing out on important details. Some videos will get bogged down covering details that everyone is familiar with and some will skim over important details that deserve more time. Narration is huge as well. It can really reinforce the learning experience.

In short, producing this kind of content is an art form itself. Please continue...

:)

  • Like 1
Link to comment
Share on other sites

Excellent idea, I'm on the same page as you and currently working on processwirevideotutorials.com.  Same idea, except that I'm thinking more along mini-series tutorials on different processwire topics from beginner to advanced topics. I know for sure I'd have appreciated video tutorials when learning my way around PW, so quite keen to create and share some with newbies :)

I think all these resources will be great for bringing more people to PW and increasing it's reach.

Rock on. Will share mine when it's up and running :)

  • Like 7
Link to comment
Share on other sites

If you guys want some hi-res assets (Skyscrapers, clouds, PW mark and logotype) here's a zip file you'll really like.

All contents are free to use. Open Sans should contain the license file with it (it's from Google Fonts anyway) and is only included because I was going to have a title slide after the logo faded in and out where I wanted to use a font that was consistent, but obviously you can do what you like on your own videos :)

Use the files if you like, if not then maybe you can use the PSD file to make yourself a nice ProcessWire desktop wallpaper like I have ;)


@Pete: not saying that it would be a bad idea, but there are benefits to separate site too...

My thought was that this site is the first place people would look, but to be honest if we get a lot of videos then as long as the videos page on the ProcessWire.com site can be changed to perhaps categorise them if we get lots (which we know it can because it's written in ProcessWire :rolleyes: ) then that would work equally as well.

PW Assets.zip

  • Like 2
Link to comment
Share on other sites

Mary,

I am really pleased to hear that you are working on a set of PW video tutorials! The more the merrier. I like short focused tutorials that build from previous episodes. Your MODx tutorials were so helpful for so many people...

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

Hi jlahijani,

in your bookmarking demo you mentioned you cashing your rendered HTML in a custom field. Does that mean you are using PW built in tag cashing or you created something different. Would love to hear learn more about the project as well. 

Thanks. 

Link to comment
Share on other sites

Hi jlahijani,

in your bookmarking demo you mentioned you cashing your rendered HTML in a custom field. Does that mean you are using PW built in tag cashing or you created something different. Would love to hear learn more about the project as well. 

Thanks. 

Hi Neeks,

That video is quite old now and much has changed with my system since then, especially the caching technique.  Also, caching is not needed as much anymore since I made a lot of optimizations to the code and eliminated a lot of issues that were causing lag.

Regardless, PW has a proper caching module called MarkupCache which is the correct way to do the sort of caching I had in the video:

http://modules.processwire.com/modules/markup-cache/

My bookmarking system is a good clone of Diigo along with features that suit the way I organize things.  (note: Diigo now lets you edit previously bookmarked URLs, which was a major complaint I had about it).

Given that this is a true webapp, building it with ProcessWire isn't the best fit, compared to a comprehensive webapp framework like Rails, Laravel, or some of the new NodeJS based frameworks out there (Meteor, MEAN, etc.) although it does get the job done.  Being forced into an MVC way of doing things would make sense for a pet-project like this.  However, I'm glad I originally built it in PW because it served as a great way to learn about a bunch of features I wouldn't have otherwise been exposed to.  I mainly reserve PW for general CMS type sites or sites that wouldn't become true web apps.

  • Like 1
Link to comment
Share on other sites

Jlahijani, thanks for sharing you experience with the system. If you are building a true web app, you don't need the CP, and then your just relent on the API so why not go with a framework for app building. Makes perfect sense to me. 

I have made the mistake of building projects with the wrong tools before. (a learning management system in expression engine), and while it's doable, it's way better to have the right tool for the right job. (processwire would have been a great tool for that project though, had I known about it at the time (almost perfect...no Amazoon S3 files yet)). 

Link to comment
Share on other sites

  • 3 weeks later...
  • 2 months later...

It was a busy summer and I finally have a little time to breathe.

Now that ProcessWire 2.5 is out (as well as WordPress 4.0), it's a great time to get going with this project.

I gave the idea more thought, and I'm going to start with a series of videos called "WordPress vs. ProcessWire".  Each of the episodes in this series will begin by demonstrating a task/feature/approach in WordPress, then the equivalent task/feature/approach in ProcessWire.  The episodes will also touch upon the architectural differences between both systems and highlight the strengths and weaknesses.  Each video will be quick and to the point... somewhere between 3-8 minutes.

Some episodes in the works:

  • installation: just a simple walkthrough of the installation process of both systems
  • pages
  • page templates
  • custom fields
  • custom post types
  • taxonomies
  • page ordering
  • plugins (an explanation of the repositories and how to install)
  • forms (gravityforms vs. formbuilder)
  • shortcodes (vs. hanna code)
  • images
  • embedding videos
  • caching
  • documentation
  • etc. etc.

I've actually created 10 episodes in one day today.

This "WordPress vs. ProcessWire" series is targeted towards intermediate to advanced WordPress developers... anyone who knows how to custom theme WordPress well and has been using it regularly for at least one year.  My thought is they are comfortable with WordPress despite some of its annoyances (speed, security issues, generated markup, api, data architecture, custom fields and custom post types approach), but they haven't found an alternative system that can match it pound for pound.  This series will reduce the anxiety that's associated with a decision to invest one's time to learn an alternative technology.  If I can prove that almost everything they are comfortable with in WordPress can be done with ProcessWire more elegantly, my hope is that it'll get a lot of people to switch. :)

More coming soon.

  • Like 15
Link to comment
Share on other sites

jlahijani, I'm looking forward to this WPxPW videos! My suggestion, if you have time, is to include a comparison between mysql queries response times and memory usage for complex operations and others under the hood performance metrics.

  • Like 1
Link to comment
Share on other sites

Thanks for the support and suggestions.

Been working hard on episodes.  About 1/3 done so far with episode recording, but still need to do editing as well as record the rest.

I've began creating the website on my local server.  I've inputted a list of all the episodes the "WordPress vs. ProcessWire" series will have (29 so far).  Some more may be added to this series if I realize I've forgotten anything.

Screenshot: http://goo.gl/3LUYTo

Jonathan

  • Like 3
Link to comment
Share on other sites

After you have, convinced everyone that PW > WP (presumably that will be the outcome ;)), what about adding one more video showing how easy it can be to migrate WP content to PW using MigratorWordpress?

Maybe Nico or I could help with that?

  • Like 2
Link to comment
Share on other sites

I've been working on the site quite a bit.  Here are some very early screen grabs (a lot will be changed and improved):

Home Page: http://goo.gl/rxjQ5t (more sections will be added below the masthead)

Series Page: http://goo.gl/tNfJnk

Episodes Page: http://goo.gl/fGJzqJ (very preliminary, many modifications to be made)

Episode Page: http://goo.gl/zrIcXf (top of the screenshot is cut off)

As you can see, I went with a very bright color palette.  I want the site to appear fun, friendly and unintimidating.  The colors are also inspired by the PW site.

Color palette: http://www.paletton.com/#uid=60R1h0kwi++bu++hX++++rd++kX

  • Like 2
Link to comment
Share on other sites

I've been working on the site quite a bit.  Here are some very early screen grabs (a lot will be changed and improved):

......

As you can see, I went with a very bright color palette.  I want the site to appear fun, friendly and unintimidating.  The colors are also inspired by the PW site.

Color palette: http://www.paletton.com/#uid=60R1h0kwi++bu++hX++++rd++kX

I'll just go and fetch my sunglasses...won't be a minute... :P   O0...looking good (but the lime green is a bit too much? - Don't mind me! Thanks for this massive effort! :-)

  • Like 3
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...