Web development
There are plenty of tutorials and guides on how to make a chome extension and there are hundeds for jQuery manipulation of the DOM. There are also a few about using jQuery in a chome extension, but only for the popup window. There seems to be a lack of using jQuery to actually do something on a page.This is something that too me a while to get my head around and a bit of googling to figure out, so now it's time to share.
Create a folder for the extension files. It's probably best to name it after your extension so you can find it later on.
In a plain text editor such as Notepad, Textmate or TextEdit create 3 blank documents. You can save the files as manifest.json, background.js and background.html. Using your favorite image editing software create a png icon with a transparent background (20px x 20px should be ok for now). Chome should scale the icon for the different areas it shows. Later we can create different resolution icons and tell chome to use them.
Get a copy of jQuery. and add it to the folder.
In your folder you should now have the following files:
manifest.json
background.html
background.js
icon.png
jquery.min.js
Let's go over what each of the files will contain, and then what that does.
manifest.json
{
"name": "jQuery DOM",
"version": "1",
"description": "Manipulate the DOM when the page is done loading",
"background_page": "background.html",
"browser_action": {
"name": "Manipulate DOM",
"icons": ["icon.png"],
"default_icon": "icon.png"
},
"content_scripts": [ {
"js": [ "jquery.min.js", "background.js" ],
"matches": [ "http://*/*", "https://*/*"]
}]
}
The important part of the manifest.json is:
"content_scripts": [ {
"js": [ "jquery.min.js", "background.js" ],
"matches": [ "http://*/*", "https://*/*"]
}]
The js tells the extension to load jquery and then ...
Continue reading (permalink)
Posted in 'Web development'.
When setting up a new mac or fresh install of Mac OS X there is a issue that many developers may come across. The issue is with getting MySQL-python to work properly. This guide was written with 10.6.8 in mind, but it will probably work for earlier versions of the OS as well as (hopefully) 10.7 a.k.a.Lion.
EDIT: This will get you up and working, but for some reason it needs you to type the following into terminal before you start each time:
export DYLD_LIBRARY_PATH=/usr/local/mysql/lib/
After you have typed this it will work until you next quit/restart. I will update this when I have figured out the best way of adding this into your paths so that you don't have to do it each time. If you know then feel free to comment below. Thanks.
The way to get this to work is a good clean install. You can google for how to remove older versions of MySQL , and I wouldn't remove Python since some OS utilities apparently use it. We will also need to get Xcode so that some of the files can be compiled.
Download Xcode (It's about 4Gb so find sonething else to do for a bit): http://developer.apple.com/tools/Xcode/
Download MySQL(Latest 64bit): http://dev.mysql.com/downloads/mysql/
Download Python (2.7.2 64bit): http://www.python.org/getit/
Install both. Install the MySQL pref pane too and start the MySQL service/server.
Open up terminal and type:
export DYLD_LIBRARY_PATH=/usr/local/mysql/lib/
Keep terminal open after doing this until we are done. Use the same window for the following. /usr/local/mysql/lib/ is where MySQL is where the MySQL installer puts MySQL. The command is ...
Continue reading (permalink)
Posted in 'Web development'.
jQuery is great, but sometimes on some browsers/devices it can be pretty slow to be implemented and take effect. I'm looking at you iPad/iPhone!
Why is this such a problem?
In the case I came across this was a problem because the jQuery .hide() I was using was acting after the DOM was loaded and the iPad was slow to do this. It was creating a noticable 'pop' when the page was loaded before elements then disappeared. Not the end of the world, but annoying. I asked on stackoverflow and this is the best solution that was provided, not to mention being a bit of genius.
It works by applying the class to the document if javascript is present, otherwize the hide class is not applied and we get a nicely enhanced page for the javascript users.
You will need to put in javascript tags in the head of the document:
document.documentElement.className = 'js';
Then add this to your css, and target any of the elements you want to hide stright away on detection of javascript. This can be in your normal css file or in the head of the document so it is loaded before the rest of the page.
.js #element{display:none;}
It is an incredibly simple and clever solution.
Continue reading (permalink)
Posted in 'Web development'.
A lesser know property of CSS3 is the selection property. This allows you to change the properties of text when selected so you can highlight it in any way you want
/* Webkit */
::selection {
background: #000;
}
/* Firefox */
::-moz-selection {
background: #000;
}
This sentence should highlight in black. And this in red.
Don't forget that some browsers won't show this as it's CSS3
Continue reading (permalink)
Posted in 'Web development'.
When building forms for websites, much time can be spent making sure that all the elements fit together in a nice way, all lining up and looking neat. So then along came Google's Chrome browser and with it came the ability to drag resize a text area to any size possible. Great. Great?
While the ability to resize the text are to be the right size for the content being entered is a great feature, the need to do it on a well designed and styled site may make everything mess up. A well designed form should anticipate the users need and supply forms that are able to fit the data they are collecting.
Luckily you can disable it easily with one line of styling.
textarea{resize: none}
Alternatively you could anticipate the need for bigger text areas and constrain the user's resizing to a value that will fit your design. You can even constrain to just one axis by setting a min and max width/height. The following would allow a textarea to be resized to 400px high but the width would always be fixed to 200px.
textarea{
max-width: 200px;
min-width: 200px;
max-height: 400px;
}
Now you have the ability to make sure your textareas behave just how you want them to. Just make sure you consider the types of data that the users will be putting in them and they need to resize shouldn't even be an issue.
Continue reading (permalink)
Posted in 'Web development'.
Using the wonderful GS server from mediatemple allows the use of svn & git versioning systems. SVN was really easy to setup as was git, but git has a few issues when trying to push to it in the way that mediatemple suggest.
Since git likes to push back to its 'origin' the best way to do this is to clone from the ssh side rather than the read only http side. If you set up the repo on a subdomain of your site such as git.mt-example.com then you can clone the repo like this (all one line, I just broke it to fit it in):
git clone ssh://serveradmin%mt-example.com@mt-example.com
/home/#####/domains/git.mt-example.com/html/mt-example.git
Once you have that cloned you can then push without having to specify the url.
Continue reading (permalink)
Posted in 'Web development'.
Widgets are a simple and quick way to share your photos, videos, general chatter and other information from the big sites to your own site or blog. In an ideal situation it would probably be better to write your own custom implementation of each of these, so they can be fitted in to your site with a more seamless result. Here are some links to some of the more popular sites and their widget generators:
Flickr: http://www.flickr.com/badge.gne
Twitter: http://twitter.com/about/resources/widgets/widget_profile
YouTube: http://code.google.com/apis/youtube/getting_started.html#widgets
Facebook: http://developers.facebook.com/docs/reference/plugins/like-box
Continue reading (permalink)
Posted in 'Web development'.
If you ever wondered how to remove the auto phone number conversion on webpages then look no further. Just place this in the head of your document and all should be ok.
<meta name="format-detection" content="telephone=no" />
Of course you may want to force pages to link a number. You can do this using:
<a href="tel:+1-123-3456-7890">
Call my fake number on: 123-3456-7890
</a>
Of course if you are browsing other peoples sites on your i/Pad/Phone/OS device then I have no idea how to turn it off in the settings.
Continue reading (permalink)
Posted in 'Web development'.
Having searched and searched and researched to figure out how to get a related article to show along side a blog post or article I stumbled upon this gem of an example which I am now using to show related articles. This works by comparing the words and the frequency of their existence, dropping any common words and giving a result between 0 and 1, with 1 being a 100% match. I have been modifying some of the implementation also to also sort the results by the rating of related-ness.
Now the problems with this method. The only issue I have had with looking for similar results is that the calculations are slow, even just comparing titles of articles has a small lag. For the full documents the comparison adds extra seconds to load time. This leads me nicely on to possible solutions that I am thinking of so far... Cacheing and/or creating lookup tables for the results... Or moving the comparison to a save and using a database to store the results.
Sources:
http://allmybrain.com/2007/10/19/similarity-of-texts-the-vector-space-model-with-python/
Continue reading (permalink)
Posted in 'Web development'.
I was having had an issue with Django on my mediatemple hosting and the urls being affected by a certain "main.fcgi". It happened a while back, and then again recently so I decided to share the solution I found.
Simply add the following to your settings.py file. Then restart the app and you should be good to go.
FORCE_SCRIPT_NAME = ''
Continue reading (permalink)
Posted in 'Web development'.
