Makers Faire 2014 Detroit

Made it to the Makers Faire this year in Detroit.  Missed the last couple of years so I was looking forward to it again and it did not disappoint me.  I enjoy seeing creative and talented people who think outside the box.  Saw the Lansing Makers tent which had a huge Tetris and Operation game set up that kids where flocked around.  I Love the Makers Faire standards like the cupcake cars, nearly getting run over by the 5 seat bicycle, Worlds Biggest Mouse trap and the Electric Kiddy Car Races.  

I took some 3D pictures which in the future I will figure out how to post so they can be viewed.  Here are a few 2D pictures that I took.

image

I understand there is an Mini Makers Faire in Grand Rapids Aug 30th and 31st at the GR Museum.

image

Our robot overloads, they had ones built and ones in bags you could build.

image

There were a number of electric guitars in this tent and they all worked.  This is the one I pick out for my friend Monty who has one of every guitar.

image

A collection of robot heads made out of coffee percolators.    Very clever but no coffee to be found anywhere.

image

OK this is an evil place.  A place with electronic kits, Raspberry Pi’s, Micro Arduinos, books and tee-shirts that all talk to me “Take me Home…”.  I go to this tent last so I don’t have to haul all my booty around.  Bad tent.

Ruby on Rails Gets No Respect

imageI have been a Microsoft .Net developer for well over a decade now and it was the only way I know to develop web based applications.  This comes from the fact that I developed Windows based applications before .NET using Visual Basic.  I admit I was a Microsoft fan boy.  Things have changed in the last X years and my eyes are now open to alternative ways to develop web based applications.   .NET is not a bad environment to do development in I just think there should alternatives that are easier, more flexible and use current technologies.  One of the alternatives is Ruby on Rails which I initially though was a playground development environment where only kiddies played around.  Wrong again.

If you are like me you may want to start learning Rails with the Rails for Zombie free video course from C<>de School.  These training courses are excellent because you learn by doing.  Watch some video then get challenged to write some code.  I have taken JavaScript, Ruby and Ruby on Rails courses here and love the idea I can download the slides and the videos and watch them over again when I get stuck.

Here are a few of the reasons why I think Rails deserves consideration for web development.

  • Uses Model-View-Controller (MVC) methodology
  • Uses JSON for data connectivity to relational databases
  • Uses RESTful for data communication and coordination
  • Helps developers use standardized coding approach
  • Helps developers by being extremely flexible
  • Lightweight application server layer. much less than .NET
  • Used by major corporations (Twitter, Basecamp, Spotify)
  • Open source server stack
  • Tools, free tools, to an excellent IDE that cost just $100
  • Ruby simplicity and flexibility as a language
  • GEMS that help with code segments that improve developer speed
  • Testing is part of the process, not something you do later
  • Works with all sorts of code repositories SVN, GIT

If you are .NET developer and wondering about Ruby on Rails then I highly recommend you read the .NET Why consider Ruby on Rails blog post from Claudio Lassala.  These posts are from 2011 but they still ring true if not more so now after 3 years of rapid Rails improvements.

I’m going down this path because it time to learn something that isn’t enterprise constrained and code again where there is some flexibility but also some disciple.  Time for me to pay some respect to the Rails.

GQueues–Task manager deluxe for Google heads

image

GQueues is another important tool in my productivity toolbox.  I tried to use the Tasks inside of Google calendar but it is rather limited.  I needed something with a bit more power and flexibility.

GQueues is a natural for those of you who are Google Heads (You use Google for Mail, Contacts, Calendar, etc.).  It has the same user interface and user experience as Google does, so much so that at first I thought it was a Google product.  Trust me it isn’t. 

Recently they asked for Beta Testers for a new feature to have attachments for any tasks.  I volunteered and was surprised when I got selected.  So I tried out the enhancement and it was great, there were some issues and the Beta testers had a Google Circles place to hang out and discuss it.  Changes and more enhancements came out days later.  If it were a Google product it would take months or years or possibly never.  This is the reason why I like small build houses like GQueues they not only meet expectations they often exceed them to show their metal.

I use GQueues for my home and work tasks.  I have a Queue for meeting agenda’s, music I want to buy or download, honey to-do queue, enhancements and lab work.  It has sub-tasks, detail text, labels, assignments and now attachments.  You can print, export and share your queues with other people.  You can limit how much you print, export and share with others.  As tasks are completed you check them off and they go into an archive that you can review to see what’s done.

I like the ability to take GMail message and quickly make a task of it and put it in the proper queue.  You can include the text of the message as the details of the task.  The task even has a hotlink in it to go right back to GMail and read the message.

There is a ton more it does that warrants you looking into this tool.

The only enhancement I would like to see is in the paid version the ability rebrand the logo so I can add my company logo and then my meeting agenda Queues I print out would look more professional.

There are two flavors of GQueues a free version and a $25 annual version.  The pay for use version has the full integration with Google and some other special goodies.  In my opinion $25 is well worth the quality and flexibility of this tool. 

Here is the Price matrix, the lite version is free.

image

Protoshare Lesson #4 (V6) Tab controls two paths

Protoshare has a couple of ways to insert a Tab control into your prototype.  One is simple but rather limited, the other more complex but much more flexible.  I prefer the second method as I can make the content of the tab windows what ever I want.

Simple Method

The simple method requires you to use one of the stencils in the Web and Desktop category.  The RIA (Rich Internet Application) is a pre-coded tab that uses HTML for the content of the tabs.  You can not add other components like grid, text boxes, etc. without coding them in HTML.  There are plenty of good HTML tools that can help you but that makes it difficult for the non HTML type designer.

image

Open up the RIA control and locate the Tab control

image

Drag and Drop this into your page and you should see

image

By double clicking in the control you will open it up in edit mode with default tab names and Lorem content.

image

Now go and change the Tab names and content using the editor, you can add some formatting.

image

Notice that the Tab 3 look funny from the other tabs?  This is because I accidently edited out the HTML tag that makes this text a tab.  It’s easy to do and a little effort to fix.  I’m not going to cover how to fix it here because I don’t use the Simple tab controls that much.

Now here is what it looks like in design mode after editing and when you test it (Press T) it looks much the same and the tab work like they should.  Notice that Tab 3 is missing, that is because I messed up the HTML tag.

image

Now if I wanted to add text fields, buttons, drills downs I would need to go back into the Tab control and click on HTML and enter the HTML.  I know HTML and use a excellent free HTML editing tool called nVu at http://www.nvu.com/ to create forms and copy them into code.  I don’t recommend this to those who are HTML weak of heart.

Flexible Method

The flexible method will use a component from the Stencils from from the same category as the Simple method but it is the Interactive set.

image

When you open this set of components you will select one of the tab control, there is one with 3 tabs and another with 5 tabs.  It is much easier to delete a tab then to add one so go big.  You can also pick vertical or horizontal tabs.  There are no vertical tabs in the Simple Method.

image

I’m going to use the 3 tab version in the lesson.  Drag and drop into to you page.

image

It looks like a single component but it is really 2 components.  The top one is tab portion of the component and the bottom is the content of the component.

image

They can be sized and moved around independent of each other and that can be scary.  First time I did it I though I broke the component.  The tab portion of the component is control by a State with the tab names in it.  More on this later.

One of the things I like to do is align the first tab with the edge of the content of the tab.  You click on the upper tab portion.

image

Then just use the arrow keys to gently move the tabs over to the left.  If you accidently move the tabs up you will notice the component doesn’t look like a tab anymore.  Just move the tabs back down until they match up with the content again.

image

Much better, now we need to adjust the names of the tabs.  This is controled by the State attached to the tabs.  Click on the tabs and open up an Inspector panel.

image

You are going to want to click on the Edit State… for the Navigation control.

image

I make it habit of changing the Name of tab to something more meaningful.  Then I changes the tab values to be the names of the tabs I want.  If you want one less tab then delete the last one in the list.  If you want one more your going to have to wait until further on in this lesson.

image

Now here is what the Interactive tab control looks like after I save the State back.

image

Nice but the tabs aren’t wide enough to handle the text I entered, so you can just grab one of the handles and stretch it out.   As you stretch it the text in the tab will adjust dynamically.

image

Looking good….  Now on to the content.  Note the default content reminds you have to enter test mode (Press T) to change tabs and thus change the content for that tab.

First thing I’m going to do is change the content in the first (Introduction) tab to be just some sample RTF text.  I will delete the controls currently in the first tab content and drag a (form field label) onto the content.  Make sure the label is inside of the container.  Then I will go to the Inspector and change the label to RTF by clicking on the (Make Rich Text).

image

I had to stretch out the label so it fit in the panel.  Notice how I formatted the text with size. color and decoration (Bold).  I would also typically align the text to the Top of the label control.

Now I want to add a Grid control to the second tab to show a list of projects.  Grid controls are covered in Protoshare Lesson #3.  First I have to do is switch to Tab 2.  Remember you have to enter Test mode (Press T).  Then click on the second tab.

image

Then press (esc) to get out of test mode and back into design mode.  I’ll delete all the exiting controls and drag a Grid control in from the Stencils, Web & Desktop category, RIA Controls.  Next I would edit the Grid control to have some data in it that makes sense for the tab.

image

To do this grid using the Simple Method you would have to use a HTML editing tool, create the grid, tweak it, get the HTML and copy it, then go into the Simple Tab control, switch to HTML and locate the spot to paste it and carefully paste it.  Your chances of making a mistake go way up trying to make the Simple method flexible.

Next I want to put a form in the Reports tab.  First I will switch to Test mode (Press T) and drag and drop Protoshare controls into the tab. 

image

I do good work Winking smile.   To do this in the Simple method would require you to use the HTML editing tool again and put a table down to layout the labels and fields, draw labels and fields using HTML form components which have different properties than Protoshare inspector properties, get the HTML…. da ta da ta da…….  Even though I use an HTML edit all the time I would rather drag and drop PS controls into a container any day.

Simple is not necessarily flexible.  Having said that I must admit there are some things about the Flexible Tab control that are more difficult.  One of them is adding a tab.

Protoshare Hint #1 (V6)–CSS Style Sheet Overrides

In a Protoshare project I wanted to have the hyperlink behave differently than a normal hyperlink.  I wanted the regular hyperlink to appear blue with no underline and when you hovered over the link it would stay blue but the underscore would appear.  You can do this manually by going into each and every hyperlink and changing the style for regular and hover events using the Inspector.  This is very time consuming and prone to error.  The other way to change the style of a Hyperlink is with a style sheet change which is a global change of the style of an object.

Protoshare has single CCS style sheet per project.  You can make updates to the style sheet file to customize layouts.  There are some restrictions on what you can style with the Protoshare Style Sheet.  Typically an Anchor or hyperlink is the (A) CSS style identifier but in Protoshare it is (s9-link) identifier.

So I went in knowing that the hyperlink is called (s9-link) and did what I thought was the correct style sheet settings.

.s9-link {
      color: blue
      text-decoration: none;}

.s9-link:hover {
       color: blue;
      text-decoration: underline;}

Yep I was wrong.  So after a chat session with Protoshare I discovered I was close which only really counts in horse shoes.

So here is the hint it is the secret word (!IMPORTANT) and the keyword (s9-document)

.s9-link .s9-content {
      color: blue !important;
      text-decoration: none !important;}

.s9-link:hover .s9-content {
      color: blue !important;
      text-decoration: underline !important;}

I’m wondering where else this might work in a Protoshare Style Sheet to get around some of the default settings that some Protoshare controls have?   You might see an update on this topic.