Month: December 2012

Categories
Cloud Apps Software

2012 Reflection & Working Environment

At the end of every year I like to look back and see what was changed and why I changed it. This helps me to realise where I’m at and where I’m going. It also helps steer my time. I’ll explain more about this as I progress through this post, but I highly recommend looking back at the changes you’ve made throughout the year and why they were made to see where you’re progressing in the new year.

The biggest changes that I made throughout this year were:

IaaS Services

This year I moved away from Amazon’s AWS (IaaS) and moving to Redhat’s OpenShift (PaaS).

This has helped me immensely in being able to focus on what I enjoy most: writing content, styling sites, toying around with HTML and Javascript (i.e. – all the front-end stuff).

I certainly valued the time spent learning server-side technologies, but found at the end of the day that I was breaking things too frequently and when my sites crashed I’d be scratching my head for a few hours trying to get things back up.

Now I just focus on the front-end, and the OpenShift guys make everything else work. I don’t have to worry about setting the Apache web server, PHP mail, and all that jazz. Another wonderful benefit is that the cost of setting up a site is (currently!) free – with more speed and processing power additional gears can be purchased. Definitely check OpenShift out! I’ll to report again soon on the stuff I enjoy about OpenShift.

WordPress Themes

This year I moved away from WooThemes to Genesis.

While I certainly haven’t given up on everything WooThemes, as I still use WooCommerce, I have found applying CSS changes easier in the one file Genesis provides.

I also found Woo Dojo’s custom CSS a little annoying when applying CSS styles that required apostrophes font-family:'Rouge Script',cursive;. WooThemes would escape these characters and therefore be unapplied in the browser (I even tried using HTML entity replacements, but it still didn’t work). Genesis didn’t seem to have any problems when adding CSS styles in the </head> textarea.

Moving into 2013

Coda 2 IDE

I’ve enjoyed the ease and use of Coda 2 throughout the year, and I’m still continuing with it. I found with moving to a new MacBook Air at the end of this year, from a MacBook Pro, to be quite seamless with this piece of software thanks to it using iCloud (yes, I bought it from the App Store).

WebStorm IDE

This piece of software has been great with handling JavaScript. I purchased a licence throughout the year and have been tinkering around with it for small projects. Certainly don’t use it as much as Coda, but would need to watch a few videos to become more acquainted with it.

WordPress

Am still enjoying the ease of creating websites for clients with this platform, especially with great plugins like WooCommerce.

MeteorJS

I have tinkered around with this throughout the year, but not enough to really create anything meaningful. This has therefore hindered my development in it and every time I have a spare moment I’ll pick it back up and try to run something with it, but inevitably drop the ball.

I will continue to monitor its progress and hopefully I can design something useful to see whether it suits my needs. Am also hoping for more screencasts on its use, but I think it would need to mature further before training sites begin creating courses on how to use it. Maybe 2013 will be the year for Meteor.

Leaving in 2012

Sublime Text 2

It seemed everyone went crazy over this IDE and like the rest of the coding community I tried it out and tinkered around with it. It has a wonderful community that provides heaps of additional plugins for extending the software’s use, however, I didn’t find it as user-friendly and meeting my needs as much as the other two editors (Coda & WebStorm) mentioned above. Personally I think one needs to be careful in software being created and maintained by an individual – I think it runs the risk more of being abandonware, especially if it’s not open-sourced. There’s only so much one person can do, but a group…!

Currently playing around with

RStudio IDE

If there’s one thing I really love about this free little application with web development it’s the creation of content. Most web developers use Markdown and there are an array of wonderful apps that can render Markdown pages into HTML pages well, however, RStudio has taken it up an extra notch. In integrating this software with Pandoc you can edit your .Rprofile settings to make images --self-contained by using the data:base64 attribute in <img> tags. It’s a great little feature for applying to small inline images and I’ve been amazed at the results.

Watching in 2013

Brackets

It certainly has piqued my interest with its screencast on core functionality. I haven’t used it yet, but will certainly be keeping an eye on it.

Laravel 4

I haven’t had much of an opportunity to play around with it, but will be keenly keeping an eye and possibly tinkering around with once it’s released. Hopefully it can be released soon (before I go back to work).

Anyway, that’s been the year for me and what I’m working with currently.

Categories
Coding

How To Create A Simple jQuery Background Image Slider

In one recent project I had to incorporate a traditional slider on the front page of a WordPress installation to showcase the range of products this site was selling. I was a little lazy and bought a popular package to accommodate the needs of my clients’ request.

Unfortunately though, after tinkering around with it, I found it more of a nuisance than a help. Even after setting the package to use no styling it was still difficult to manipulate the object’s css properties to do what I wanted.

In the end I thought to myself, Why don’t I just roll my own?

My requirements weren’t that complicated.

All I needed was something that could do the following:

  • Randomly loop through a set of images (and then keep that rotation)
  • FadeIn and FadeOut of the images (the client didn’t need anything fancy)
  • Images that are confined to the width and height of the div element (if the image is too small, stretch it, if it’s too big shrink it)

I found by using the background CSS properties on a div element perfect for my needs. Here’s the resulting output:

The only HTML needed:

<div class="my-bg-slider"></div>

The CSS on this object needed:

.my-bg-slider { 
    background: url("/wp-content/uploads/2012/10/DSC_011.png") no-repeat; 
    width: 960px; 
    height: 640px; 
    background-position: top left; 
    background-size: 100%; 
}

Obviously the URL of the image, the width and height properties can all be changed to suit your needs.

The JavaScript

Placed above the </body> tag:

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
// check to see if the page contains this element
if ( $('.my-bg-slider').length > 0 ) {
// insert the URIs of all the images you wish to include in the slider here:
var backgroundImages = [ 'http://www.example.com.au/wp-content/uploads/2012/12/DSC_02461.jpg',
'http://www.example.com.au/wp-content/uploads/2012/11/DSC_0161_1.jpg',
'http://www.example.com.au/wp-content/uploads/2012/12/DSC_0587.jpg',
'http://www.example.com.au/wp-content/uploads/2012/12/DSC_0293.jpg' ];
// get the existing backgroundImage of the div element
var existingImage = $('.my-bg-slider').css('background-image');
existingImage = existingImage.replace('url(','').replace(')','');
// remove the existing image from the backroundImages list (if it's there)
var tempArr = _.without(backgroundImages, existingImage);
// randomly shuffle the remaining images
var randomImages = _.shuffle(tempArr);
// load the new images in the background to speed up transfer
for ( var a = 0; a < randomImages.length; a++ ) {
$('<div class="temp-imgs">').appendTo('div.my-bg-slider').html('<img src="' + randomImages[a] + '" />').css("display", "none");
}
// insert existingImage to the front of the shuffled list
randomImages.unshift(existingImage);
var i = 0; // needs to start at the next list item (not 0)
setInterval(function() {
i++;
// check to see if we're now at the end of our slider image array
// if so, start back at the start again
if ( i === randomImages.length ) { i = 0; }
var img = "url(" + randomImages[i] + ")";
// fadeOut the current image then replace the backgroundImage then fadeIn
$('.my-bg-slider').fadeOut(1000, function() {
$('.my-bg-slider').css('background-image', img);
});
$('.my-bg-slider').fadeIn(1000);
}, 3500);
}
});
</script>
view raw simple-bg-slider.js hosted with ❤ by GitHub

Conclusion

As you can see it’s a relatively simple jQuery slider that uses Underscore.js to help with the array utilities.

Have a play around with it and let me know how you go. Of course, there are several ways to extend this by having an array of objects instead of an array of strings and then using the settings of the object to change the type of effect, adding content on the slide (etc).

You never know maybe the client will want extended functionality on the home page slider! At the moment, it meets the intended purpose.

Categories
Cloud Apps Software

Awesome Software Math Teachers Can’t Do Without

Having moved over from a new MacBook Pro to a newer MacBook Air at the end of this year I’ve had to take a hard look at the apps I had on my old computer to consider whether they were worthy of being ported over.

Here’s a run sheet of which apps made it and which ones didn’t.

Apps that made the transition

Alfred

I no longer have apps stored in the dock, and I love the clipboard, calculator and terminal features. I purchased this app during the year and have recommended it to most of my teaching colleagues.

Evernote

I wasn’t a big user of this service in 2011, but have used it extensively in 2012 and even became a premium account member in November (thanks MacHeist!). I love the Evernote Web Clipper as it easily allows me to share sites, videos and links with my students, and the only thing lacking in Evernote is notebook collaboration. My students still have to use Google Docs for this.

Dropbox

I don’t know how I lived without this service. Became a premium member when I splashed water over my MacBook Pro and the computer died – realised how vulnerable my data and documents were and learnt how to create symbolic links very quickly!

Office for Mac 2011

Even though I use Google Docs for practically everything I still ported over Office for student work. I use Excel perhaps the most out of the Suite.

Camtasia 2

Good screen-casting software. Processing of videos seems a little faster on the Air.

VLC

Great free video and DVD player without all the hassles QuickTime gives.

Reeder

Good app for keeping up to date with sites’ RSS feed. I am finding that I’m relying more on Twitter to keep up to date with popular personalities and companies. Don’t know whether this app will last much longer.

Kindle

Simple reader application for ebooks. I am finding that most of the recent books I’ve been reading on this device haven’t been purchased from Amazon, my last Amazon book was a gift to me (my last purchases being from sites such as: LeanPub and The Pragmatic Bookshelf)

MousePose

A great piece of software that allows your viewers to focus in on area where your mouse pointer is, also allows for clear display of keystrokes. Good for screen-casting software use.

Apps that didn’t make the cut

Skitch

Even though I’m a big user of Evernote, I didn’t particularly use Skitch very much. It had some advantages of being able to annotate images clearly, but that was about it.

iWork ’09

Having been a big user of the Microsoft Office Suite for many years I never really appreciated and liked the iWork Suite. Personally I think it needs an update, and I found the tables feature particularly annoying.

Mathematica 8

Sadly I haven’t had the time to devote into creating workbooks and therefore have hardly used it this year, found myself using Wolfram Alpha more.

Smart Notebook Software

I really didn’t like this software. A high school teacher needs simplicity when setting up their Smart Board, we need it to be hassle-free when moving from room to room and this service just had too many issues. From its heavy installation process where it takes forever downloading all the resources (most of which I think is geared towards primary school teachers) and connecting a Mac to it can be very painful – especially if you happen to have different versions of Smartboards within the school. My replacement is ConceptBoard – it allows for online collaboration, is quick and easy to set up, you can import any type of file and all they need for my needs is an app in case the internet drops out.

Adobe Creative Suite

Our school had a site-wide licence, but I never found any benefit with using it for my classes. Suited more the Design & Tech teachers. Have been using Sketchbook Express as a replacement – much simpler to use with Cintiq tablets.

While being a teacher means that we certainly have to be flexible with software changes, I’ll certainly be keeping an eye on innovative products in the future. It will be interesting to see next year what apps will make the list or whether any of the apps dropped will restore themselves.

Categories
Software

Workflow for Teaching Mathematics Online

One of the hardest jobs being a Mathematics teacher in todays push in online learning is finding resources that can help aide the efficient facilitation of student learning.

Currently, there are several tools which help math teachers write equations and this process either involves clicking an array of buttons, moving mouse cursors around the equation and typing expressions OR knowing some LaTeX code and typing it all into a LaTeX editor and rendering it. Either side has its advantages and disadvantages.

Like possibly many other math teachers I didn’t particularly want to have to learn another language, so I sought to take the path of least resistance and bought some magic software (e.g. MathType) or used Microsoft’s Equation Editor, which allowed me to click the buttons and type a few things to achieve the resulting equation. This looked great and worked well, but when you begin to show mathematical process and working out, clicking buttons becomes very tedious.

I then searched around for other alternatives and dove into the other pool and began learning LaTeX. I started with the wonderful MacTeX software, and it allowed me to type LaTeX code, generate an equation and embed this into practically any piece of software. Again though this didn’t help much when it came to showing mathematical process and working out. While I certainly began to fall in love with LaTeX’s complexity the software I was using was not ideal.

I then gave up on LaTeX and went to a hybrid software solution: Mathematica 8. Wow, and what a jump this was – I felt like I was sitting in a Ferrari! I had all this mathematical power under my belt, but I just couldn’t devote the time needed to learn all the functionality required. I persisted for a year using this wonderful piece of software and enjoyed the ways in which I could create documents that had both charts, normal text, LaTeX equations, however, the biggest hurdle I faced was trying to get the information I created online and into our school’s learning management system (LMS). There was no easy way.

So, when the school provided us with new MacBook Airs towards the end of this term I was faced with a dilemma: do I install Mathematica on my new Mac? I had used it much last year but found its use this year not as helpful. In fact, I found myself using Wolfram Alpha website more and the software less.

It was towards the end of this year, armed with a new MacBook Air that I tried to look for an alternative solution. And this time my focus was more dependent on finding a resource that I could use easily both online and offline.

I created my list:

  • Had to have LaTeX functionality
  • Had to have Markdown functionality (a terribly easy way to write HTML without actually writing HTML!)
  • Had to allow both within the same file (the software would differentiate between what was text, Markdown and LaTeX and would render accordingly)
  • Needed to work on a Mac
  • The resulting output had to work inside the school’s LMS (this was harder than I thought!)
  • No contracts please (I didn’t want to be locked in to any commitments or plans or expensive software)
  • Support available (or a community) should the software break

After a few days of searching I came across a solution that fit most of my requirements. It was a little involved to setup and required the downloading of several parts, however, so far I’m VERY happy with the solution.

So what is it?

My working environment now involves this setup:

Within RStudio IDE I then had to setup some additional material.

  • From the menu bar > Tools > Install Packages… > knitr
  • From the menu bar > RStudio > Preferences > Weave Rnw files using: > knitr
  • From the menu bar > Project > Create Project… > New Project… > Type in a name and select location > Create Project (you should now be within that new project directory)
  • From Console window enter file.edit("~/.Rpofile")
  • This will open up a global profile file that will be applied to all projects in your RStudio IDE, if you wanted to only create a profile specific to the project change the above to file.edit(".Rprofile"). From whichever file I then entered the following information:
options(rstudio.markdownToHTML =
function(inputFile, outputFile) {
system(paste("pandoc", shQuote(inputFile), "-s --webtex=http://chart.apis.google.com/chart?cht=tx\\&chf=bg,s,FFFFFF00\\&chl= --self-contained -o", shQuote(outputFile)))
}
)
print("Global (or Local) .Rprofile file has been loaded.") // change to Local if .Rprofile is stored in project
// there needs to be a blank file here
view raw .Rprofile hosted with ❤ by GitHub

Once this was all done I then went to the menu bar > Session > Restart R. Which would then show in the console:

[1] "Global (or Local) .Rprofile file has been loaded."

Finally, to get started on my content I would then select from the menu bar > File > New > R Markdown. I would then type away the content to be delivered to my students which would include LaTeX and Markdown and then upon finishing click the magical “Knit HTML” button.

RStudio would then output a screen showing my resulting output, which I would copy and then paste within my school’s LMS.

So far so good!