DEVseo

Firebug, Firebug, Firebug!

If you are a web developer and you haven't heard of Firebug you need to get it now! It is a free Firefox addon that lets you traverse the contents of any web page, view the CSS, view the javascript, debug your scripts and edit them live. Basically, everything you could want from a development tool. And the best part is that it's free!

All you need to do to use it is download it/install it (if you are not using Firefox you can download the Lite version (installation instructions are on that page too) which will allow you to use a version of the tool in any other browsers), restart your browser (Firefox users), then either hit F12 or right-click on the element you want to inspect and click 'Inspect Element'.

You will see that a window has appeared at the bottom of your browser with a load of code (hopefully) and the element you inspected should be highlight. From this view you can see and CSS applied to that element (in the right hand pane) as well as any CSS properties it has inherited styles from. You can also make changes to the CSS here (live on the page) by clicking any of the properties or values and updating them. This is one of the greatest features of Firebug, although it is not limited to this. If, for example, you are having some slight issues with sizing you can resize anything you need without having to change your CSS, upload, then refresh the page!

read post

Here comes the blog...

read post

Whilst browsing the Internet today I came across this great letter, which contained a link to a blog written by Internet Explorer and how IE9 is going to eventually almost comply to the acid 3 test (although the time that happens the acid 4 test will have been released and IE9 won't have a chance!).

This led me to wonder how the current array of popular and up-to-date browser versions are complying with the acid 3 test as it stands today. The results were interesting in some cases, bhut as you would expect them to b in others. Continue reading to find out how they all did!

Our Base Reference

Here is a picture of the acid 3 test completed and how it should look in a browser that adheres to it's strict ruleset.

The main criteria are that it has to pass 100/100 on the javascript test (noted by the numbers 100/100) and each of the squares should render smoothly and be the correct colour once they have loaded.

Firefox 3

Might as well start with a browser that we would all expect to do pretty well on this test, if not pass (and for this test a pass is getting 100% in each criteria, which is no easy feat!). Below is the image for Firefox 3.6.3 (which I believe is the latest build of Firefox 3).

read post

Since the introduction of Twitter, Facebook and other social media platforms it's safe to say that the interaction on the web has risen by a substantial factor. I cannot think of a single commericial industry that either hasn't had or couldn't have a positive impact from reaching into the social media stream.

A brilliant example of this can be found here entitled "How Social Media and the Web Helped Avatar Make $1 Billion". This story is quite amazing and just shows the extent to which social media can impact even the film industry. By advertising on social media platforms before the films release it had a staggering knowledge base and advertising market that you simply couldn't fail to know about it if you were part of any of these media channels. That's huge! Especially when you think of the number of people that use Twitter, and Facebook and the rest.

I have been trying to find an article somewhere that detailed the number of users that Twitter currently has. Note: I have found some information that states:

read post

Is it just me, or do RSS feeds detract the user from a website? Let me try to explain what I mean by this.

Recently, because I've been reading a lot, and particularly a lot from Smashing Magazine (@smashingmag), I've installed a Firefox add-on called "Google Reader Watcher", which allows me to instantly see how many feeds I have unread in my statusbar. That's just great! It means i don't have to go and check myself and when something new pops up I click it and it takes me to my Google Reader where I can check out the latest articles from my favourite places.

No the point of this article is not to sell Google Reader, surprisingly. I have noticed that in using this, and the RSS feeds from various sites I never actually visit the site anymore. Whether this is a good or bad thing or not is up to the site themselves. But it makes you wonder what impact RSS has had on traffic statistics, as well as peoples' ability to keep up with the latest news and trends circling the various niches of the Internet.

read post

Demo

I wanted to create a simple tooltip for a project I was working on and have seen plenty of jQuery examples, but as you may know by now I prefer to use the YUI library for all of my javascript. So I took this opportunity to write myself a nice little script that would do exactly what I wanted with the greatest of ease.

I also thought I would share the finished result with you, in case you are looking for the same sort of thing. It is configurable by changing a couple of the options at the top of the javascript, and if you know what you are doing you can always play about with the rest of the code as well.

I have a simple example page that can be found here, which contains all the javascript and CSS. As always I have used my own utilities function which combines a load of the library components into one and serves this purpose wonderfully. The CSS is in page, but in case you are lazy I'll post it all below anyways.

CSS (3)

Because I love the many functions found in CSS3 I've used that to enhance the tip as much as possible but it still degrades nicely enough that IE users will see something nice enough!

read post

YUILight is a customisable YUI Script that will highlight an element on your page simply by applying a class of 'yuilight' to that element. When that element is clicked and focused on, everything else on the page will be covered by a mask and that single element will stand out from the rest.

It is a very simple script to implement only requiring two javascript files and no CSS! The options for customising the script can be found at the top of the javascript file (which is fully commented for you). At the moment you can change the generic background colour (when no background colour has been specified for the element). This option is so that your element doesn't disappear with the text.

You can also configure the opacity of the mask element and the animation speed that it shows and hides. I will be adding more customisable fields later on but if you have any requests please feel free to leave them in the comments section at the bottom of this post.

<script type="text/javascript" src="yui/utilities.js"></script>
<script type="text/javascript" src="yui/yuilight.js"></script>

I've prepared a little example page here which will guide you through the various options in a little more detail. Comments welcome below and please enjoy the script!

read post

I love CSS3. If you're viewing this in a decent modern browser (not Internet Explorer) then you can probably see that because of the amount I use. I do, however, always try to use progressive enhancement in my projects so that anything that looks great in the good browsers still looks presentable in other browsers.

What I love most about CSS3 is how easy it is to do some of the things that used to be an absolute chore for us web developers. Simple things such as creating rounded corners for expandable boxes used to require lots of extra markup and generally didn't work all that well in sub-par browsers. Now, with a couple of extra lines of CSS you can do these things no sweat! Here is an example for rounded corners:

Some HTML:

<div class="roundme">
<p>Here is some text to go inside my example<p>
</div>

And some CSS:

.roundme {
background: #050505;
border: 10px solid #050505;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
}

That's it. It really is that simple. And I've had no end of playing with it since I started reading everything I could about it.

read post

During the creation of web pages the most difficult task set forth before any web developer is that of cross-browser compatibility. Internet Explorer, Mozilla Firefox, Opera, Safari and so forth, have their own default margins and padding for certain elements on the page, and the page itself. This means that when building a web site there are going to be differences between browsers in terms of display and layout.

The Universal Selector is not as widely known as many of the CSS selectors because of the fact that you never see it in the HTML document anywhere and yet it does apply to everything contained there. Because of each separate browsers tendency to adds it's own padding and margins to a lot of the elements found in HTML, such as the heading tags, h1, h2 h3, h4 etc. differences can be very noticeable between them in terms of layout and positioning of objects and dividers.

Internet Explorer is one of the worst culprits (are you surprised?) and tends to add it's own to most of the HTML attributes used for layout, such as the HTML and BODY elements. Firefox, and I'm sure the other browsers, do as well simply because a style sheet is built in to each defining link colours and font-sizes and such. However, in order to create effective cross-browser compatible web pages you may well wish to "zero out" all of this browser-own padding and margins in order for each browser to more strictly adhere to the style you want for your site. Of course, the other way to do this would be to add padding and margins set to zero in each of the HTML elements you are editing as you go. But this will add unnecessary bulk and length to your style sheet.

read post

Have you somehow managed to amass a great following of people you just don't know on Twitter? It happens. You probably don't realise it, especially if you have one of those tools that automatically follows anyone that is following you.

All too easily you may find that you have a great number of followers that you simply don't want! I have seen quite a number of tools on the Internet that say they can mass remove or delete all of your Twitter followers but I have found almost none of those to be anywhere near successful! Well, there is something you can do about it.

So how do I unfollow all my Twitter followers already?

Here at DeVSeO we have written a tool you can use, for free, to unfollow all of your Twitter followers with the greatest of ease. All we require is your Twitter username and password (both of which will completely private to you, we do not store any information passed through by our forms) and if you only want a set number removed we can do that too, just fill in the extra field in the form.

So, you may be asking where you can find this amazing tool? Well follow the link below, insert your details into the form and watch your followers disappear. We'll tell you how many we removed, but be aware that this could take some time depending on the number of followers you want to be removed.

read post