The Powers of Django – A Love Affair with Indentation:

• Part 1 – Building API’s with Django
• Part 2 – Interacting with SOAP services using SUDS
• Part 3 – Templating and custom URLS

JQuery and CSS3 – The Simplest Answer is Often Right

• Part 1 – Simple Front End Examples that can save your skin
• Part 2 – Flow and the User Experience
• Part 3 – Dealing with Older Browsers
• Part 4 – Video and Animation

WordPress – Because It’s Everywhere:

• Part 1 – Custom Post Types
• Part 2 – WordPress as a CMS
• Part 3 – Deep Dive

Using Git as part of your deployment strategy:

• Part 1 – Dev Servers
• Part 2 – Multiple Concurrent Servers, keeping them in sync
• Part 3 – Continuous Deployment using Atlasssian Bamboo
• Part 4 – JIRA, Confluence, Bamboo – The Atlasssian Tool Belt

Rackspace – Enter the cloud:

• Part 1 – Basics: Install, Setup, Configure
• Part 2 – Reusing images, Load Balancers and Cloud Databases
• Part 3 – DNS Configurations, tips & tricks

Google Apps For Business

• Part 1 – GAM – Google Apps Manager
• Part 2 – Audit Tools

This demo shows you the basics of using the Google Maps API. I have an array of sample date that get dropped around New York, while it will also ask you to authorize your computer (if it has GPS), so that it can figure out where you are. The basic Idea is to use Google Maps so that you’re able to Geo-tag places and leave notes (think Foursquare, Google+ checkins, or FB checkins). The idea was anyone can use the site and post ‘mainly’ anonymous messages about anything with a gps location. Of course for the sake of this demo I’m simply allowing you to click anywhere on the map and add a marker.

I took the back-end portion of this out. I don’t want people blowing out my MySQL instance. But if you’re interested I can share the code for the Tables, and the functions I used to save and retrieve xml data from the server. Thanks to the Maps API this also works on mobile. This was a proof of concept I made about two years ago (and it still works! For the most part…). The main idea was to try and create apps in HTML that could be run on any device, if you have a GPS tied to your device, this will find you.

Because of how I coded the backend, the services behind this could be easily propagated to be used in native apps for iOS or Android, without having to mess with your data. I have an APK somewhere that shows allows you to launch the app on your Android devices and add points and messages as you please. That one however is still tied to my database; I’ll strip the saving part out and repost soon (or never, if I don’t have the time).

If you want to view the source head over to the mapControl.js  to see the JS behind it. It’s a mashup of Google sample code, and not even close to clean. I dug it out of the cow-webs of my web server.

Enjoy.

(Click the image to use it, or go here)

So a few weeks ago, I decided I wanted to build a simple score keeping app for our volleyball games. I needed it to work on either Android or iOS, but I really didn’t want to take the time to write two native apps for each. So I figured doing an HTML app, with jQuery and some Twitter Bootstrap. a little of Twitter Bootstrap, mainly for the button styles, as I found trying to do the layout in Bootstrap was too much work, for such a simple app. The HTML is simply a few divs, with references for bootstrap, here’s the important part of the body (download the zip):

(from score.html)

 <div class="container">
 
 
        <section>
            <div class="score away">
                <div class="points">
                    0
                </div>
 
            </div>
        </section>
        <section>
            <div class="score home">
           <div class="points">0</div>
            </div>
        </section>
 
        <section>
               <div class="row-fluid show-grid">
                   <div class="scoring-buttons bleft">
                       <button class="btn-large plus">+</button>
                       <button class="btn-large">-</button></div>
                   <div class="scoring-buttons bright">
                       <button class="btn-large plus">+</button>
                       <button class="btn-large">-</button></div>
                 </div>
                   <div class="scoring-buttons bcenter">
                       <button class="btn-large">reset</button>
                 </div>
               </section>
    </div>

And the CSS, is fairly simple, I set pretty much everything to absolute so it attaches itself to the screen despite device dimensions: (From score.css)

.score
{
    border: 2px solid black;
        font-size: 100px;
        height: 100%;
 
        position: absolute;
        text-align: center;
        top: 0;
        width: 50%;
}
.away
{
    left: 0;
}
.home
{
    right: 0;
}
.points
{
    position: relative;
        top: 50%;
}
.scoring-buttons
{
 
    position: absolute;
    bottom: 0pt;
 
}
.bleft
{
    left: 0pt;
}
.bright
{
    right: 0pt;
}
.bcenter
{
    right:50%
}

And the jQuery, it’s not the cleanest but it gets the job done, and took all of five minutes to put together (from score.js):

/**
 * Created by IntelliJ IDEA.
 * User: jbonfante
 * Date: 5/10/12
 * Time: 11:16 AM
 * To change this template use File | Settings | File Templates.
 */
var scoreAway = 0;
var scoreHome = 0;
 
$(document).ready(function(){
   $(".scoring-buttons button").click(function(event)
   {
       var operation = $(event.target).hasClass("plus");
       if($(event.target).parent().hasClass("bleft"))
       {
           if(operation)scoreAway++;
           else if(scoreAway != 0)
           {
               scoreAway--;
           }
           $(".away .points").html(scoreAway.toString());
       }
       if($(event.target).parent().hasClass("bright"))
      {
          if(operation)scoreHome++;
          else if(scoreHome != 0)
          {
              scoreHome--;
          }
          $(".home .points").html(scoreHome.toString());
      }
       if($(event.target).parent().hasClass("bcenter"))
      {
          scoreHome = 0;
          scoreAway = 0;
          $(".home .points").html(scoreHome.toString());
          $(".away .points").html(scoreAway.toString());
      }
   })
 });

 
Enjoy.

(I haven’t posted anything is a while, been busy for like 2-years… however I have a slew of articles I need to write up including HTML5 / JQuery stuff, some sweet stuff you can pull off with Python, a little Flex4 (4.6) love, and even more Java, maybe some mobile stuff… I’m on stay-cation in about a week, so I’ll put some time aside to get it all up then, till then, enjoy!)

Technology Agnostic: Developing In An Adapting World.

Excerpt:

Technology Agnostic: Developing In An Adapting World

By: Juan Bonfante

As a web developer I’ve noticed that over the past five to eight years, a trend to develop applications that can run ubiquitous of their environment. With the rising popularity of cloud computing and the emerging mobile markets, enterprise clients have started to move away from the model of building web applications that would only run on one or two particular browsers, in order to create dynamic applications that can run virtually on any device, without degrading their brand or the user experience. And while this idea now permeates all aspects of our daily lives, as a developer this can almost seem like an insurmountable challenge. As a developer how do you keep up with all of the new languages, frameworks, and API’s out there? How do you become technology agnostic?

Then while iOS and Android offer extremely nice IDE’s for coding, and meticulously documented API’s, getting from idea to app can be a headache specially if you’re coding for both. Enter Appcelerator’s Titanium, which allows you to write apps for iPhone and Android using JavaScript (and a few other languages); I found the size and performance of the applications to be a little bit hard to swallow, but at least you’re not jumping around between Objective-C and JAVA.

And then I start looking through all my favorite Flash blogs and am reminded of why I love Flash so much in the first place. First off:

Simple Flash GUI Tool – an extension of MinimalComps by Keith Peters, and probably one of my favorite Flash libraries outside of TweenMax. This one is by Justin Windle over at SoulWire. And was originally posted like 5 months ago.

PixelBender 3D – Do I need to say more? Hardware 3D rendering, built on top of “Molehill”

Wallaby – This is a sweet idea to turn Flash sites into HTML. Not that I completely agree with the idea, but the option is pretty sweet.

Last but NOT LEAST:

Adobe AIR – Yup it’s AIR. If you didn’t know already, with AIR you can write Flash applications to run on your favorite Android or iOS device, as well as some of the newer Blackberry (RIM) devices. It also does desktop too… but you probably already knew that.

So to those who said Flash is dead, let me know when the other half of the internet opens up for you.

Presenting today in Denver, at Rocky Mountain Flash Camp. Talk is on Flex 4 Skinning, and here are the files needed to follow along.

FXP Project:

RMFlashCamp.fxp

Changed the background image in honor of the conference. Took it earlier this morning, on my drive into the conference… Location: Somewhere in the mountains? (Around Rollinsville somewhere)

BFusion/BFlex is no normal conference. It is a no-nonsense, learn-to-code* and learn-it-from-the-best event. Each day there are six full hours of hands-on training with the various technologies and techniques. You bring your computer and desire to learn and our excellent instructors challenge you to take your mind to new places. http://bflex.indiana.edu/

———————————

This past weekend I went out to Indiana University with Adam Flater for BFlex. We did two sessions on Flex 4; Skinning in Flex 4, and Flex 4 for Flex 3 developer. The purpose of the latter session was to try and get Flex 3 developers up to speed on the changes inside of Flex 4. One of the main details is the new Spark component architecture, and how it differs from the old MX architecture, mainly there’s just a new package nomenclature, as well as slight changes to the old component names (i.e. HBox is now HGroup) ; There are major changes to the States classes as well as the addition of new Layout class that decouples layout logic from individual component definitions. In this session we went into how to use layouts efficiently, as well as how to create custom layout classes,  the process of extending the basic layout class and applying it to components, and also how to change layouts at run-time. We went into detail about how to use the new DataGroup component, which is similar to the old Flex 3 repeater, and also using virtualization for dealing with larger data sets.

The skinning session dealt more with how to style the new components inside of Flex 4. The new major change is Flex 4′s ability to use FXG, which make drawing graphic primitives inside of Flex 4 that can be used very easily to apply skins. Using the basic example of a button, we showed how adding states and extending the basic button class is now alot easier than in Flex 3. Using the new dot(.) notation in the Spark architecture simplifies the process of creating skins, as well at how it decouples the visual implementation of a skin, from the data logic of a component, making skins extremely re-useable. The new skinning framework now allows for skins that can be state based, and even change layouts dynamically. We also showed how to extend the base SkinnableContainer class to apply styling and skinning to components that have none (i.e. Group), and even extending the Panel container to create a custom skin. We lightly touched on Flex4′s CSS capabilities, but Flex4 CSS will be a post all on its own.

We promised our code examples to the attendees, and we haven’t forgotten, but we are polishing them up, as well as we will be creating screen casts, so anyone can better follow along. (it’s about 3 hours worth of information, so please be patient

For more resources the Adobe Developer Connection is a great place to get up to speed with the newest features of Flex 4.

Thanks to all of the organizers, staff, attendees, and speakers that attended, it was great to meet all of you. Next up  I’ll speak at Rocky Mountain Flash Camp, Oct 12.

Karma

And I specially think it resonates true to this day.