My Top 4 Chrome extensions

August 10, 2015

Google Chrome is awesome a browser.   There are those who prefer it to other browsers and I can see why.  For an individual, it’s very customisable and while this can cause issues for schools, it’s an up-to-date, easy to use browser.

Let's face it, if you're reading this post, you probably already have a certain viewpoint

Let’s face it, if you’re reading this post, you probably already have a certain viewpoint

Added this one for balance

Whatever your opinion on Chrome, it’s extensions are really powerful, so much so that I keep a list of them to be able to reinstall them when Chrome decides to clean them out or I accidentally hit reset all (that happened this morning and it was like losing a family album 🙂 ). I thought I’d share this list with you – which also has the happy side effect of making it easy for me to find them again 🙂

Open in IE

open_ie_icon

Link to Chrome Store

Google Chrome considers it a security issue to be able to open a link in Windows Explorer.  The trouble is that this is a really handy thing to be able to do if you’re managing an intranet server. Annoying, Google does allow you to open the Chrome downloads folder on its own downloads page, but I can’t find the code to duplicate this.  If anyone does know how, please tell the world (and me).

This extension offers the chance to open a link in Internet Explorer when you right-click on a link.   So, if you’ve got a page with a link beginning file:// the extension opens IE, which then opens Windows Explorer (and closes IE as a bonus).

There is a problem with the current extension though, it uses NPAPI which Google have announced they are shutting down by version 45.   On that day, I will be wearing a black armband.

These instructions on the Chrome help page will allow you to use this really useful plugin until then (note the slightly smug “if you must use…”  – yes Google, we must use it – make your browser better and we won’t have to!):

How to temporarily enable NPAPI plug-ins
If you must use a NPAPI plug-in, there’s a temporary workaround that will work until Chrome version 45 is released later in 2015:

  1. Open Chrome.
  2. In the address bar at the top of the screen, type chrome://flags/#enable-npapi
  3. In the window that opens, click the link that says Enable under the Enable NPAPI flag.
  4. In the bottom-left corner of the page, click the Relaunch Now button.

Window Resizer

window_resizer_icon

Link to Chrome Store

I’ve got a HUGE desktop monitor.  I know, size isn’t everything, but sometimes inches do count.   It’s really handy for me to have multiple windows all visible at the same time.  Honest.

As any web designer worth their salt will tell you, it’s very important to design pages that fit on your target audiences screen.   It’s so easy to make a page too wide without realising it, or to have an important message below the “fold” (the bit not visible until you scroll down).

Window Resizer is a brilliant way of quickly resizing your browser to the size of the user’s screen.   We have multiple devices in school now; desktops running at 1024×768, others running 1440×900, mobile phones and Chromebooks.

Being able to quickly check what a page looks like, gives me a chance to catch mistakes and produce a better looking product.  You can customise the screens and shortcuts too, which just adds to my love for it.


User-Agent Switcher

ua_switcher

Link to Chrome Store

Speaking of designing for multiple devices, User-Agent switcher allows you to quickly check how your page looks on a range of devices and browsers. There’s not much more to say about it really.

It’s helped design our mobile VLE site and is really handy when identifying problems when users complain their phone doesn’t see something.


Clear Cache

clear_cache

Link to Chrome Store

For some bizarre reason, CTRL + F5 works in Chrome, but doesn’t completely clear the cache.   Isn’t that the point of CTRL + F5, to clear the cache and refresh the page?

Apparently not. This handy extension takes care of the problem at least.

It’s the Ronseal of Chrome Extensions.


Google Email Content filtering

May 20, 2015

At Cramlington, we use Gmail for our student mail.  It’s a good system that ties in with the devices we provide to our students through 1:1 schemes (Android tablets and Chromebooks).

Chuck Norris Gmail

Modding Gmail

There can be some issues using a third-party external email service.  For instance, we made the decision to prevent students having external email access.  They can’t email anyone outside the school.  If you are an administrator for your school’s Gmail system, you can control this access through the Routing section in the Advanced settings of the Admin Console.

Outbound Routing Settings for Gmail

Outbound Routing Settings for Gmail

Stop swearing!

Swearing meme

The other side of student email is teaching responsible use.  If we don’t prepare students for interacting appropriately with others online, then we have failed as educators.

Students are like everyone else.  I’ve used swear words in personal email, but I don’t think I’ve ever sent an email which included profanity from a professional account.  It’s just not professional.   I don’t think kids are unique in not understanding the difference between personal and professional, but at least we can help teach kids the differences.

Gmail has content filtering possible.  If you go into the Advanced settings of the Gmail Admin Console, there is a section marked Objectionable Content.

Objectionable content settings

Objectionable content settings

I’ve no idea where it came from originally, but here’s a spreadsheet of inappropriate words, alternate spellings etc which can be uploaded to the Objectionable Content:

Banned_words.xls
(Don’t judge me on the contents)

Any email that comes through containing one of these words gets re-routed to my email inbox.  One additional aspect that was a bonus is this also works if a student shares a document or comments on a document which also contains inappropriate word.

Side effects

I’ve already touched on students using their emails for (very) personal communication.  Spelling mistakes and abbreviations have also caused emails to be blocked.  I generally scan the email to see what the problem word was.  I’ve removed a few words from the list (e.g. job) which is only inappropriate in certain context.

I do wish our teachers would stop shortening ‘Assessment‘ documents to ‘Ass‘!

There have been a few instances of party invitations being blocked because kids insist on using text speak:

Will you cum to my party?

For some reason, we also get quite a few copied-and-pasted rap lyrics emailed round.

The content filter has led to a few detentions and highlighted some bullying issues.  In the few instances parents have been called in to discuss their child’s email language.  Seeing the email printed out has never failed to produce an appropriately annoyed response. 🙂

I don’t like having this access.  On one occasion an email was re-routed due to a mis-spelling.  Scanning the email, I saw it was a student talking about how upset they were as their pet had died.   I was really tempted to let her tutor know, so they could be supportive.  In the end, I didn’t.  It was an invasion of privacy and while accidental, there was nothing I could do which would make that invasion appropriate.


FIXED: Webpages display correctly without using Compatibility Mode

May 19, 2014

Something strange started happening with Internet Explorer last year.  When IE10 turned up, it seemed like it rewrote the rule book on how the browser displays web pages.   For instance, if you hadn’t coded your font name in your style sheets absolutely correctly, then you had to deal Times New Roman.

Time's New Roman

That’s not what I meant!

Now of course, one should code their style sheets correctly.  But realistically, the rules change too often and there’s just too many pages I’ve built while on a learning curve.  I do not believe anyone can be reasonably expected to maintain and update static pages as browser standards change.

If you disagree…

Good for you.  Well done on having a differing opinion.  This post is not for you.  This post is to help others like me beat the system.

The Compromise

So, if something stops working in the latest version of the browser, you can switch on Compatibility Mode/View.  The problem with this is it displays everything like it’s in IE6/7.   Which means you lose anything clever or fancy.

The Solution

What’s needed is some way of telling IE to use all the bits you have at the time of coding, but don’t change things when you add new features.

And thanks to a long Google search (not having a clue what to search for) I eventually found this:

<meta http-equiv=”x-ua-compatible” content=”IE=9>

This single line of code at the top of a webpage, tells IE to run a webpage as if it is displaying it in Internet  Explorer 9, or 10 (content=”IE=10″) etc…

I love the simplicity of this.  It gives me the freedom to build a site/system however I need to and I know that there won’t be a massive panic when the browser updates and suddenly some bit of jQuery/CSS stops working.


YouTube Royalty-Free Music bank

May 1, 2014

When adding music to a video, there is always the point when you want to reach for your audio collection, be it iTunes, Amazon or that pile of dusty CDs and import your favourite song and use that.

Yeah, that’s called copyright infringement.  It’s so easy to do, but ethically and legally it’s a big NO.

Copyright infringement joke

The irony is not lost on me

The big problem is what do you do if you don’t (or know someone who does) have the talent  to create music for your video.  And let’s face it, even if you do, that’s a whole extra level of work.

There are royalty-free music websites out there, but whenever I’ve tried to use them, I’ve found it near impossible to find the right type of music for the mood I’m trying to convey.

The closest I’d found was Video Copilot, which sells a CD of audio effects and includes some music ambience tracks.   These tracks aren’t bad, but they are limited.

The Solution!

Last time I uploaded a video to YouTube* I noticed a new feature, Creation Tools.  And in there, is an Audio Library link.

YouTube's audio libraryThe mp3 files are catalogued by genre, mood, instrument, duration and sub-categorized as well.

And just like that, problem solved.  A decent, well organised collection of royalty-free music.

Thank you, YouTube*!

 

* It’s a video hosting website, some of you may have heard of it


Auto Menu (PHP)

March 19, 2014

More often than not, I get asked to upload and link some files from our teachers to one page or another.  This is part of my job and I’m happy to do it.  But sometimes, I get asked to upload 20 – 30 files in one email.  This gets tedious.  And generally, I’ve no sooner finished than I get another email requesting a couple more in another location.  Complaining about this seems a little childish, but the truth is, it’s boring work that takes time.

How geeks deal with repetitive tasks

How geeks deal with repetitive tasks

I’m a great believer in “Work Smart, not Hard”.

Work smart, not hard

Work smart, not hard – nailed it!

Being a WSNH believer (some would say an evangelist), I wrote this bit of code, which automatically populates a page full of links to the resources inside a folder.  It even takes into account sub-folders.

Script

Hopefully, you can implement this yourselves, but if not, drop me a line.

You can download the script here.  I could have pasted it here, but the formatting was lost and it looked really ugly.


Creating custom fields in Frog forms

October 7, 2012

Frog’s forms are great.  They might not be as simple to use as their Google counterparts, but the results are always user tagged for easy reference and they come with an export button.

Export a database as a CSV

Google can suck it

Alright, maybe I’m over playing their usefulness, but while it is possible to get usernames to automatically pass into Google, it’s a lot easier in Frog.

The only real issue with Frog forms though is that you’re limited to the bricks in the toolkit and the formatting they offer.

The Form Bricks

It’s like they want you to fail

You get everything you need to make a survey or question set, but sometimes you want a different layout for a question than the ones available.

Example

Recently, I wanted to have a survey where users could rate along a line.  You’ve all seen the sort of thing, 1 – 6 strongly agree to strongly disagree.  This would normally be achieved using a radio set:

A Frog Radio Set brick

You can recreate the functionality of this question type, but not the look, as the options can only appear vertically.  That’s when I remembered a trick I employed with Frog forms a few years ago before the hidden field brick was available.

The Trick

Frog bricks are essentially packets of html pre-coded that you can drop in and a page will build.   I know this because if you view the source of any Frog page, you can find the html behind each brick.

Code example

The relevant section of the source code for the radio set example. CTRL + F will be your best friend here.

If you view the full size version of the picture, you’ll see the HTML code which creates the radio set.  This is the relevant bit:

<table border=0><TR><TD align=right valign=top>Radio Set Example</TD><TD width=250>&nbsp; 

<input type=radio name=’frg_Radio_Set_Example’   value=’1′>&nbsp; option 1<BR>&nbsp; 

<input type=radio name=’frg_Radio_Set_Example’   value=’2′>&nbsp; option 2<BR>&nbsp; 

<input type=radio name=’frg_Radio_Set_Example’   value=’3′>&nbsp; option 3<BR></TD></TR></TABLE>

Those of you familiar with HTML will recognise this is standard radio but code, although, note the name of the radio options:

name=’frg_Radio_Set_Example’ 

Frog’s bricks place frg_ in front of any option name you create.  All of this is leading up to the actual trick, which is that you can use an HTML brick inside a Frog form as long as your field name starts with frg_

The catch

Actually, no you can’t. If you drop in a form field inside an HTML brick with frg_ on the front and test the form, your field isn’t passed into the results.  Which is strange because I swear it used to be.

The Fix

Studying the source code again, I did spot another line of code, just underneath the end of table tag:

<input type=hidden name=form_details[] value=’frg_Radio_Set_Example’>

The field name frg_Radio_Set_Example matches the radio set name, so I tried adding it to the HTML brick and tested the form.   Success!  I’ve no idea what it does, but clearly it’s important (at least for the radio set brick).

So my final code for the HTML brick looks like:

<table border=”0″ width=”500″>
<tr>
<td valign=”bottom” rowspan=”2″>
Strongly agree
</td>
<td align=”center”>1</td>
<td align=”center”>2</td>
<td align=”center”>3</td>
<td align=”center”>4</td>
<td align=”center”>5</td>
<td align=”center”>6</td>
<td valign=”bottom” align=”right” rowspan=”2″>
Strongly disagree
</td>
</tr>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’1′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’2′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’3′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’4′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’5′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’6′>
</td>
</tr>
</table>
<input type=hidden name=form_details[] value=’frg_rating_example’>

And what it looks like:

Radio buttons in Frog created with an HTML brick

And once again Google can suck it

I like to imagine Larry Page reading my blog just asking “why?”.

Hey we can all dream.

Of course in reality, if Larry Page even did read this blog, I’ve probably blown any chance of ever working for Google all for a really, really weak joke.


How to take screenshots on a Samsung Galaxy Tab P1010

April 1, 2012

In previous entries about the Samsung Galaxy Tab, I’ve included screenshots from the device.  Getting these screenshots has always been a little tricky.  Until Ice Cream Sandwich, there wasn’t a standard way on Android to achieve this.

Android Screen Capture

I had been preparing a post about a piece of development software called Android Screen Capture but then the download link seemed to disappear and there were other issues regarding its use. I think you have to install the Android SDK for example. I’ll just say that while I like ASC it can be a little tricky to set up.  You can also display your device fullscreen which is very handy for presentations and demonstrations.

Android Screen Capture

A screen capture of a screen capture program. That's practically Inception.

Screengrab all the things!

Screengrab all the things

Yes, even I use memes

It turns out there is a simple method to take a screen shot just using the Galaxy Tabs themselves.

  • Hold the back button
  • Press the power button

The picture taken is saved into a ScreenCapture folder accessible using the gallery.

A screenshot from my Samsung Galaxy Tab P1010

The emptiest of my home screens. It's filling up fast though