DEVseo

Making It Your Web

Tweetywall - YUI Plug-In To Put Twitter Live On Your Website

by Alex Hall (on 11th Jan 2010 @ 14:20:32)

  • 1 comments
  • 0 paragraph notes

Demo

Have you ever seen those sites that have Twitter posts sprinkled all over the place? Would you like to have access to this same functionality without having to do anything? Here at DeVSeO we use Twitter for a number of things and in a number of places. I decided to help you guys out by turning one of ours scripts that we use here into a fully customisable release so that you, too, can have Twitter on your own site with absolutely no coding ability whatsoever. It couldn't be easier. All you need is:

  1. a JavaScript file (provided by us)
  2. an area on your site with a specific ID
  3. an API Key that you can get from the form at the bottom of this page.

Once you have these two things you will have Twitter directly on your site. Oh, and one more thing we require is that you sign up for an API key (which is free and easy to do too!). The sign up form can be found below as can a link to the script you require.

read post

Lovely Animated Image Captions Using YUI

by Alex Hall (on 23rd Dec 2009 @ 11:59:42)

  • 2 comments
  • 0 paragraph notes

I saw a very lovely caption effect for images at MotionLab but realised it was written for jQuery. If you have read of my other blogs here on DeVSeO you may notice that I prefer the YUI javascript library by Yahoo for all of my javascript. So, I decided to create this effect using YUI instead of jQuery.

Firstly the setup. To make this work you will need an image and some text to describe that image (including a heading for the image). Here's the one I'm going to use for this example:

  • Test 1

    This is a test to show you what this script will do. Hopefully a very nice little caption will appear when you rollover the image, which is pink!

    Brand Main
  • Test 2

    This one should do exactly the same as the other one and I have just put it in here as a bit of a test to show you how it looks with more images.

    read post

Using The YUI Chart Component

by Alex Hall (on 29th Oct 2009 @ 16:00:59)

  • 0 comments
  • 0 paragraph notes

The above shows an example of a YUI 2 chart. There are many reason why you might want a chart such as this on your website, such as showing data to users in a more friendly way, publishing commercial content that isnt just in a static table, or even just to add some colour in the form of a funky little widget showing using the latest trends on Twitter.

Whatever your reason for having a chart, I have found the YUI 2 charts library a very successful and easy-to-use component that allows you to fully customise your chart however you see fit, from changing the type of chart to show, whether it be a pie chart, or bar chart, to customise most of the detail in the chart such as the colours, the data tip, and the legend. There is so much you can do! So here is a simple guide to get you started.

So what do I need to get started?

Firstly, you will need an HTML page and a couple of files... or in my case a pre-configured truncated and minfied file containing everything you'll need (the full file list can be found in comments at the top of the script, feel free to remove any files you don't need). Here's one I made earlier. Once you have the file all you will need to do is add the following to the head of your HTML page ensuring that the paths to your file are correct:

read post

Locate Keywords In Search Engine Results With Greasemonkey

by Alex Hall (on 19th Aug 2009 @ 09:31:33)

  • 0 comments
  • 0 paragraph notes

So, I decided (with the help of Lee Johnson) to create a new Greasemonkey script that looked for keywords in search result for the major search engines (Google, Yahoo! and Bing) rather than highlighting a listing based on a domain which my other script does.

For this one to work you will need to install the script (for a quick install, clickhere) and edit line 24 and below putting whichever keywords you wish to find in the array and the colour you wish that keyword to be highlighted by, for example:

read post

Greasemonkey Script to Locate Multiple Domains in Search Results

by Alex Hall (on 18th Aug 2009 @ 13:21:23)

  • 2 comments
  • 0 paragraph notes

Greasemonkey is a Firefox Add-on that can be used to install custom scripts that run on specific pages on the internet when the page loads. This can be a very useful tool for many things such as highlighting elements, hiding elements and adding custom functionality to pages that weren't previously available.

One useful tool I have seen is written by Mark Stoecker actually highlights listing on a search results page from the big three search engines (Google, Yahoo! and Bing) based on the domain you ask it to show.

The biggest flaw with this script is that you can only manage one domain at a time so you'd either have to install multiple scripts for each domain, or change the script each time you searched for a separate domain.

I decided to write an addition to this extension, which allows for multiple domains and for each domain you can select a different colour to highlight so that you can differentiate between which domain you are referring to on a single page by the different colours of their backgrounds.

read post

Microsoft Stop Support For IE6

by Alex Hall (on 17th Aug 2009 @ 17:13:57)

  • 0 comments
  • 0 paragraph notes

In an effort to make a little more sense and to help rectify a very stupid mistake I made today I'm going to re-write this blog, which I managed to completely delete but that I also think is important enough that it needs re-adding due to the news that come to light very recently reagdring Microsoft support IE6 until 2014.

And on With The Blog

Yes, you read that correctly. Microsoft have decided to stop support for IE6 with the release of their new 'Web Office' application incorporating their office suite with online solutions and management. However, there will be no support for Internet Explorer 6, Google Chrome or Opera. This follows an article I just read on The Register

You may have been hearing and reading about various projects on the web to try and get people to upgrade their browsers from older versions to the latest, such as IE6NoMore; a group of developers who encourage visitors to add some code to their site to encourage their visitors to upgrade. The state of this news should be a welcome relief for wweb developers because of the potential meaning whereby Microsoft themselves are losing the will to produce applications that are fully supported in Internet Explorer 6.

read post

Microsoft To Support IE6 Until 2014

by Alex Hall (on 17th Aug 2009 @ 16:34:39)

  • 0 comments
  • 0 paragraph notes

In a recent article Microsoft have revealed that they plan to continue support for the years-out-of-date Internet Explorer 6, despite acknowledging that it is riddled with flaws and security issues.

The software giant said it would support IE6 until 2014 - four years beyond the original deadline.

Critics - some of which have started an online campaign - want the eight-year-old browser mothballed because they claim it slows the online experience.

What I love about the statements made by the Internet Explorer creative team are the amount of criticism they put into the browser, yet make a statement that support will continue for another four years!

Here is a small quote from Amy Barzdukas, Microsoft's general manager for Internet Explorer:

"Friends do not let friends use IE6,"

"If you are in my social set and I have been to your house for dinner, you are not using IE6," she said. "But it is much more complicated when you move into a business setting."

"It's hard to be cavalier in this economy and say 'oh it's been around for so long they need to upgrade,'"

read post

Star Rating Script With YUI

by Alex Hall (on 17th Aug 2009 @ 15:32:55)

  • 0 comments
  • 0 paragraph notes

I really needed a nice little star rating system with YUI for this blog (which can been at the bottom) and after a single search in Google I found Ville Saavuori's Star Rating Script for YUI, which is perfect for the job I needed (so you will see a direct implementation of it used here at the bottom of this blog!).

However, for a new project I am undertaking I realised that his implementation was not going to work for multiple rating systems on the same page because it is based on ID's, and as we all know, you can only have one ID reference in the DOM on one page. So I started to rework the script to allow for more rating systems on a single page using classes instead of ID's.

Below I have attached the script as a downloadable zip, which should contain everything you need to get the script working. I have based the script on using an element with the class name 'rating-el', so anything you need the rating system to override, please add that class to the element.

read post

IE6Update And Pushup For The Web

by Alex Hall (on 17th Aug 2009 @ 15:29:12)

  • 0 comments
  • 0 paragraph notes

Recently I have been conducting a fair bit of research regarding a finite resolution to one of the largest issues faced by web developers and web companies alike. Internet Explorer 6. The biggest question I have asked myself is "How on earth has this browser been around for so long, and why is it still here?".

It is now officially the oldest and yet still widely-used browser around, possibly because of the fact that it comes installed as standard on out-of-date Microsoft computers owned by large corporations and 'unupdatable' because the software used by these so-called 'large corporations' will not work on anything but.

The browser is 8 years old this year, and since it's release in 2001 has seem ONE major update. That's it. As you can imagine, since this update there have been so many new security issues facing browsers of the Internet and all other modern browsers such as Firefox, Opera, Safari and now Chrome have regular updates to target new bugs and security holes. Support stopped for IE6 A LONG TIME AGO, which means that anyone browsing with it now is constantly under potential threat by hack attempts, viruses and many other security breaches that clever 'script-kiddies' have written.

read post

How To Use The Twitter API

by Alex Hall (on 17th Aug 2009 @ 15:28:15)

  • 1 comments
  • 0 paragraph notes

How To Use The Twitter API

There are a few examples on the web about using the Twitter API, but I've noticed that more and more often they refer to using exec() commands in PHP which a lot of web hosts deny to their users automatically. This makes using the API a little tricky as the only other good method for using the service is with cURL.

cURL is a PHP library written by Daniel Stenberg, that allows you to connect and communicate to many different types of servers with many different types of protocols. This means you can use it from your web server to request documents from another web server and do all sorts of things with the response.

The Twitter API supports cURL requests and the easiest way to use these requests will be shown just below. It is also worth checking the Twitter API Documentation, which contains all of the functions they support as well as plenty of information on the sorts of things you can pass to the feed, and the response you will receive.

read post

Loading

Complete!