Football training weather

I recently twisted my ankle :( and during my recovery I was unable to play for awhile. As I dreamed of playing again, my mind turned to the upcoming football training days that might be rainy and with slippery field conditions. Days like those I would not be able to play, but how many possible days might I miss?

Ok, this might look bad as X-ray, but all in all the injury was restricted to only my ligament

Ok, this might look bad in X-ray, but all in all the injury was restricted to only my ligament

Ahhh, I love Python I said to myself. This would be a perfect opportunity to use Python again. I could use it to create a list of all the football training days and weather conditions for those days.

The Plan
Since I’ve always checked wunderground.com for weather updates I decided it would be the perfect place to get weather data. From here I would have to find the weather for every day I have football training (Mondays and Thursdays). After finding the weather for those days I would then print them to a HTML document. Here is the final live webpage, yearly football weather.

football-weather-webpage

Final output, HTML webpage

Weather data

wunderground-accessing-api

Create a api key to access data

First I had to create a api key in order to access the weather data, which was rather quite and easy to setup from here Wunderground’s documentation on how to access the data was also straight forward. There’s a nifty api testing tool, apigee, this tool allows you to determine what type of weather data you want to access, in my case it was weather history.

wunderground-api-returned-query

Playing around with apigee to get the right weather data

wunderground-code-samples

Wunderground provides examples of how to access their data

Parsing and Scripting
After retrieving the data I desired, I then wrote a script to firstly determine the days of the week that I would have football on for the current year. From these days I was able to then query the weather data and save the results to a HTML webpage.

yearly_football_day_weather-script_in_terminal

Testing the wunderground api

yearly_football_day_weather-script1

The script to parse the weather data and generate the HTML webpage – part 1

yearly_football_day_weather-script2

The script to parse the weather data and generate the HTML webpage – part 2

The final output
With the generation of the HTML webpage one task was left, styling and adding the weather icons to the webpage. For the weather icons Wunderground again has provided a great set of icon sets to chose from, in my case I went with icon set #9 as it was the cleanest looking one. Here again is the webpage live, yearly football weather.

wunderground-weather-icon-sets

Wunderground is awesome with it’s resources, providing icon sets

wunderground-weather-iconset-used

I used icon set #9

 

Email any file from Mac OSX desktop

This has been on my to-do list for ages. And whilst it may have been an easy thing to tackle I always seem to be too busy to get to it. But alas here it is and it only took me 1 min to do it :| Funny thing is I actually though it was going to take a much longer time but with Apple’s Automator it was a breeze although, I still don’t know why this isn’t built into the finder. So here are the steps.

1. First download this file > Email File Automator workflow

2. Unzip the file,

3. Put “email-file.workflow” file into: ~/Library/Workflows/Applications/Finder/,

4. You might have to create the “Applications” and “Finder” folders if they don’t exist,

5. Then goto the finder right-click on any file, from the pop-up window goto “More“, then goto “Automator” and then select “email-file”

You should then see Mail open with the file attached :D

Placeholder Text

Well you discover something new everyday and every project and in this case I learned some interesting things about creating and styling placeholder text.

Placeholder text? Yes you know, that text that’s inside the search or input field on your favorite website. Well for my recent and on going project (Statify) I wanted to add some place holder text in the subscription box and I wanted it to be something that would be easy to implement and maintain.

So I first did a quick search and came across this, http://stackoverflow.com/questions/1077859/how-to-show-hide-input-value-on-focus which initially was looked like a possiblity but I didn’t want to mess around with a bunch of javascript, I wanted a simpler cleaner solution (I’m so digging python and django right now!).

So I did some more searching and found this, http://css-tricks.com/snippets/css/style-placeholder-text/ which was awesome, what I wanted could be achieve via CSS. But, I found it difficult to get it to work for some reason until I found this, http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css (I’m loving html5 by the way). This helped a lot to clarify what I had to do, but then I also realized I had not included the “:” colons in front of the rule (silly me). To see this working visit http://statifyme.com.

I also thought this was very useful for reference, https://developer.mozilla.org/en/CSS/%3a-moz-placeholder from mozilla, this of course applies only to firefox, but you can lookup the version for the other browser vendors.

< !doctype html>
<html>
<head>
  <title>Placeholder demo</title>
  <style type="text/css">
    input:-moz-placeholder {
      color: green;
    }
  </style>
</head>
<body>
  <input id="test" placeholder="Placeholder text!"/>
</body>
</html>

Understanding CSS3 Transitions

So I finally got a chance to play around with come CSS Transitions. And I must say I like it. The effect that can be achieved is quite subtle but still impressive.

How to create an Adobe Air installation badge on a Drupal site

While I was trying to post the article, Adobe Air App: Drupal Jobs I discovered that setting up the Adobe Air installer badge was not that obvious to do in Drupal and that although it might seem to be quite simple, it proved to be quite hard to find any direct and detail guides to solve the problem. So here and now I present to you a guide of how to create a Adobe Air installation badge on your Drupal site.

One of the first things to do is to read these two articles, Getting started with the custom install badge and Using Badger for Adobe AIR applications.

  1. First create a folder on your remote web server in the root directory of your website, example: APPS
  2. Now create a folder inside APPS for your application, example: EXAMPLE-AIR-APP
  3. Now open Badger (created by Grant Skinner) and create the Adobe Air install badge.
  4. In Badger press SELECT .AIR FILE, this will automatically fill-in a majority of the fields for you.
  5. In Badger make sure to change the APPLICATION URL to reflect where the .air app will be located on your remote web sever, example: http://www.mydomain.com/apps/example-air-app/example-air-app.air.
  6. Also do the same for the IMAGE of the installer badge, example: http://www.mydomain.com/apps/example-air-app/example-air-app-badge-image.jpg, the image should be the same size as the settings under BADGE SETTINGS in Badger.
  7. Once these key fields are set, you can then press EXPORT BADGE, this will then export the necessary files into a folder of your choice, on your local machine.
  8. Go to the folder where you have exported the Air installer badge, transfer all the files excluding the INDEX.HTML file to your remote folder on your server, http://www.mydomain.com/apps/example-air-app/
  9. Open INDEX.HTML and copy,
    10. 1

    <script type="text/javascript" src="http://www.mydomain.com/apps/example-air-app/swfobject.js"></script>

    and copy

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

    <div id="flashcontent" style="width:215px; height:180px;">
		<strong>Please upgrade your Flash Player</strong>
		This is the content that would be shown if the user does not have Flash Player 6.0.65 or higher installed.
	</div>
 
	<script type="text/javascript">
		// < ![CDATA[
		// version 9.0.115 or greater is required for launching AIR apps.
 
			var so = new SWFObject("http://www.mydomain.com/apps/example-air-app/AIRInstallBadge.swf", "", "215", "180", "9.0.115", "#000000");
 
		so.addVariable("airversion", "1.5.2");
 
		so.addVariable("appname", "APP-NAME");
 
		so.addVariable("appurl", "http://www.mydomain.com/apps/example-air-app/DrupalJobs.air");
 
		so.addVariable("image", "http://www.mydomain.com/apps/example-air-app/drupal-jobs-badge.jpg");
 
		so.addVariable("appid", "APP-NAME");
 
		so.addVariable("appversion", "v1");
 
		so.addVariable("hidehelp", "true");
 
		so.addVariable("str_error", "Error1");
 
		so.write("flashcontent");
 
		// ]]>
	</script>

    and paste into a new document pasting them in the order in which they were copied, one after the other.

  10. Before the next step make sure, in Drupal that your input filters are setup correctly, we will be using the HTML input filter.
  11. Now open a node (or create a new node), and in the Body of the node, paste in the previously created new document of the copied snippets from the INDEX.HTML file.
  12. Once this is done, you can save the node, and you should see the Adobe Air installer badge.

Adobe Air App: Drupal Jobs

Please upgrade your Flash Player This is the content that would be shown if the user does not have Flash Player 6.0.65 or higher installed.

Drupal Jobs is a simple Air app that I did that retrieves the latest drupal job listings from drupal.org. It then displays them in a list, where you can click the title and go directly to the relative web link of that particular job. Drupal Jobs uses a simple RSS feed url as the data source, so it only retrieves the default RSS listing.

I would like to add a custom itemRenderer to have a button for the link and also have that button display the job listing instead the Air app instead of opening up in the browser.

I’ve also included the mxml file from Flash Builder so you can use to your hearts content, even though it would be great if you would give me some credit if you do use it. I know it’s nothing spectacular, but it’s FREE and I believe a great example of a simple RSS powered app.

<!--?xml version="1.0" encoding="utf-8"?-->
 
&lt; ![CDATA[ import flash.events.Event; import mx.collections.ArrayCollection; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import flash.net.navigateToURL; import mx.controls.Alert; import mx.events.CloseEvent; [Bindable] public var jobs:ArrayCollection = new ArrayCollection(); protected function init():void { stage.nativeWindow.x = (Capabilities.screenResolutionX - stage.nativeWindow.width) / 2; stage.nativeWindow.y = (Capabilities.screenResolutionY - stage.nativeWindow.height) / 2; service.send(); trace("started service"); refresh.visible = false; } public function serviceResult(event:ResultEvent):void { trace("trying to get results"); jobs = event.result.rss.channel.item as ArrayCollection; trace(jobs); refresh.visible = true; } public function serviceFault(event:FaultEvent):void { Alert.show('Sorry, there was a problem connecting to the drupal jobs site.', 'Connection Error', 4, this); refresh.visible = true; } public function serviceActive(event:Event):void { trace("active service, getting Jobs"); } public function getNewJobs():void { service.send(); } ]]&gt;
 
&lt; ![CDATA[ import flash.net.navigateToURL; public function getLink():void { trace(data.link); var urlRequest:URLRequest = new URLRequest(data.link); navigateToURL(urlRequest); } ]]&gt;

And here is the Style.css file

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
 
s|Label {
    roll-over-color: red;
    mouseOver: red;
    selection-color: #C1FFC5;
}

Please let me know what you think, by following me on twitter, @garthhumphreys

Quick Tabs 6.x-2.0-rc3 Review

Overview
Ever wanted to quickly add a tabbed box to your site’s sidebar like the many you’ve seen around the web. Then Quick Tabs is the module for you.

The Quick Tabs module allows you to create blocks of tabbed content for views, blocks, nodes and other Quick Tabs. Clicking on the tab menu item makes the corresponding content display instantly, using ajax or you can opt for the non-ajax mode.

Module Usage
7,902 (as of this posting)

Installation/Dependencies
None

Settings
There are two areas where you can change settings.

1. Site Building
2. Site Configuration

Site Building
Here is where you can see a list of all the Quick Tabs you’ve created, you can edit, delete and clone these existing tabs. You can create new Quick Tabs by clicking ‘New QT Block’ and setting these options;

1. Set a block title
2. Choose a Quick Tab style
3. Choose to use Ajax – this determines how content of Quick Tabs will be loaded. (Yes: Tab content will be loaded at tab click. or No: All tabs will be loaded at page load.)
4. Create tab menu item by creating,
a) Tab title
b) Tab type – Block, Node, QTab, View
c) Tab content – Select the content to be displayed in the tab
d) Operations – Delete tab menu item

Site Configuration
You can now select one of the default included tab styles;

1. No style
2. Basic
3. Bullets
4. Excel
5. Garland
6. Mac
7. Navlist
8. Phylactere
9. Sky
10.Zen

Documentation
I found the documentation to be moderate and to the point. Not a lot of detail, could have had more info pertaining to creating a custom tab style.

Community activity
Activity and commits have been frequent. The issues (212 open, 490 total) have been resolved fairly quickly and Bug reports
(44 open, 145 total) are kept to a minimum.

Developer friendly/Customization
I would have to say, YES! With four main selectors you can easily customize a pre-existing tab style. And of course you can create your very own from scratch.

Theme-able
Creating a new Tab style is fairly easy and a matter of duplicating one of the preset styles located in the ‘tab styles’ folder. Each preset Tab style has two style sheets one for normal left to right languages and another for right to left languages.

Conclusion
Pros: I’ve found that this is one of the easiest and quick modules when it comes to tabbed box navigation. It’s really customizable both with setup and with styling.

Cons: Well it’s not all bad but I do wish they had more preset themes, one’s that were more user friendly and easy on the eyes. For example there is an example photo of the Quick Tabs that is not included in the preset styles, which I feel should have been added because I think it more modern that the others that are included.