DEVseo

I've been a little annoyed with the font rendering in  Google Chrome recently because it just hasn't been a crisp as in other modern browsers such as Firefox (see here, and here, and here). It seems that Chrome 37 has now  fixed this issue released in May (so get your browser updated!) meaning that locally hosted web fonts that use SVG formats for Chrome users now look very polished.

However, there's still a slight issue in Chrome when you use fonts from their hosted  fonts. When you include the link to the web font in the head of your page it detects the browser being used and serves the correct font type for that browser (speeding things up and keeping the filesize as small as possible). But this method does not return an SVG for Chrome users, it returns a .woff file. Chrome can't cope with these so the anti-aliasing will be very much non-existent.

read post

So, there seems to be a bit of a debate going around at the moment about how to highlight what a link does, or where it goes. As an example, external links on Wikipedia have a little arrow to the right that indicates you will leave the site when you click it (or it opens in a new window. This is a moot point). That's quite handy, but doesn't look that great. Especially when you have lots of them together, like at the bottom with all of the references.

So, how about we jazz things up with a little CSS magic!? Below is an external link. I've made this external by adding a rel attribute of "external" to it. Semantic. But, this also comes in handy with CSS3 where you can style elements based on their attributes. This means we can style any anchor that has an attribute of rel="external" in any way we want!

I give you, the animated external link!

An External Link

Please note, there is no javascript here and it will only work this nicely in browsers that support attribute styles in CSS3, and transitions (those that don't it'll just appear). But, that's pretty much all of the modern, and popular ones covered!

read post

So, a requirement of a recent project of mine was to create a "Metro"-themed website. I really wanted those nice loaders that you get with Microsoft applications today and thought it's probably possible with CSS3. And it is!

Check it out on JSFiddle and let me know what you think and whether there are any improvements you can think of. I've added support for the browsers that support transitions so the code is currently fairly bloated but using a CSS pre-processor you can avoid this headache.

For an example here check out the below!

read post

Quite a while ago now I posted a blog about how to interact with a database to save the star ratings from my Star Rating Script built with YUI. I recommend you do not follow the guidelines in that post any more because it uses an old method of database interaction with PHPs built-in mysql_* functions, which are really not secure any more and deprecated in the newest version of PHP.

What you should be using for database interactions from PHP these days is what is known as PDO, which stands for PHP Data Objects. From the PHP website:

The PHP Data Objects (database-specific PDO driver to access a database server.

PDO provides a data-access abstraction layer, which means that, regardless of which database you're using, you use the same functions to issue queries and fetch data. PDO does not provide a database abstraction; it doesn't rewrite SQL or emulate missing features. You should use a full-blown abstraction layer if you need that facility.

read post

So, here's a bit of fun. How do you change the welcome banner when you log on to Ubuntu via SSH? Well, it's not quite as straightforward as I first thought...

As root, if you nano/vi/editor of choice /etc/motd you can see the current message of the day (motd - ta-da!) and can edit this file to your hearts content to change it. However, the caveat is that on most systems this file gets re-created when you log in as there are some other scripts that run to actually write the file on log in. So, how do you change it?

Well, it's fairly easy. Firstly, cd into /etc/update-motd.d and list the directory (ll, ls -la). You should see one or more files starting with a number. For example, I have 00-header, 10-help-text and 99-footer. What happens is, when the SSH session starts, this list gets read and anything that is readable by the server gets read and dumped into that /etc/motd file. What I decided to do was only run what I wanted to run, that is, my own file. However, when the server gets upgraded it is quite possible that these files all get re-created so if you make changes to them they may well be lost.

read post

Firefox has just been updated to version 22, 6 weeks after the previous release of 21. There are lots of changes in the new version, but one of the most interesting for me is the native support for Web Notifications. I'm not one for reading specs though and wanted to dive right in so here's how to use the API quickly and easily.

In it's most simplest form, the following code will produce a Notification in Firefox:

var myNotify = new Notification("Test Title", {
	'body': "This is the body of the notification",
});

That is literally all of the code you need! Lovely. However, there are some caveats. Obviously, the most important for security, and to prevent unwanted annoyances, you must first ask for permission to show a notification on a domain. But, it turns out this is a pretty darn easy thing to do too! See the following code:

read post

I've seen loads of "scrollTo" functions dotted around the internet and many are quite convoluted for what you actually want to do. I wrote this for the new design on DEVseo and it's very simple indeed. Any link that I give a class of "scroller" to will automatically call a function that checks whether an internal anchor point exists in the page. If it does, the page will scroll to that anchor point. If not, the link will be followed. For simplicity I used a data attribute so that the href can be set to an actually location and followed where JavaScript is disabled . If you didn't want this to happen simply set the href to the internal anchor too.

So, on with the code! The call looks like: $(".scroller").on("click", ScrollPage); and you'd want to put this in a document load function so that it runs when the page is ready (see complete script at the bottom). Then, use the following function for "ScrollPage":

function ScrollPage(e)
{
	// Get the data attribute for the element
	var objEl = $(this).data("el");
	// Get the element we're internally scrolling for
	var scrollEl = $(objEl);
	if(scrollEl.length > 0)
	{
		// Don't follow the link
		e.preventDefault();
		$('body, html').animate({
			scrollTop: scrollEl.position().top - 40
			// I subtract 40 so it's not hugging the top of the page
		}, 600);
		// Change this number to change the scroll speed
	}
}

And then in your HTML all you need is a link that looks something like: <a href="/somewhere" title="Link Title" class="scroller" data-el="#internal-nchor">A Link</a> and you're done! For the complete script, see below. For an example of what this does, click the arrow in the bottom right! And don't forget to actually put an element on the page that has an id attribute the same as the one the data attribute is pointing to.

read post

I was reading the latest post on Ajaxian and found Marcin Wichary (the creator of the Google Pacman Logo) to be an absolute genius with some very interesting ideas. Thought I'd try out a couple of them here, so to start with here's some blurry text:

Blurry Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus arcu sit amet erat feugiat accumsan. Morbi rutrum dui a lacus sollicitudin in accumsan quam vestibulum. In hac habitasse platea dictumst. Donec sed sapien mi, ut blandit orci. Integer iaculis, massa vitae blandit posuere, sem leo bibendum lacus, vel varius arcu ligula eu eros. Integer gravida scelerisque eros eget auctor. Sed malesuada volutpat vehicula. Vivamus est nunc, adipiscing ut auctor congue, laoreet ac purus. Nunc vel velit sed est sodales molestie. Cras semper pharetra ullamcorper. Nam sollicitudin vulputate gravida. Suspendisse nec odio tellus. In ipsum nibh, scelerisque quis tincidunt eget, tempus vel risus. Mauris viverra convallis ligula at vulputate. Nullam accumsan tristique diam, non mattis justo dapibus et. Donec sodales ligula a nisl tincidunt ut tempor mi adipiscing.

read post

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

In the last installment of this tutorial I went through the first few parts of YSlow that tell you how your site is performing when it comes to page loading. After reducing the number of HTTP requests by reducing the number of files and images that the browser has to call and load from the server there are still a number of optimisation practices you can use to better optimise the front-end performance of your sites.

Adding An Expires Header

An expires header is basically a header that can be set up, which will tell the browser how long the file can remain in cache before the browser needs to request an updated version. If this is not set up the browser will decide when to request a newer version of that particular file, which usually isn't that long. This method specifically aims to target those files that you do not work on often, or ever, such as javascript library files, page images and some CSS.

The easiest way to add an expires header to the files on your server is by using an .htaccess file and setting the expiry there. An htaccess file is a file that should reside in the main directory of your web server and allows you to set up some server configuration before the browser even sees a file on the server. You can set up URL re-writing, header redirecting, in this case expires headers and many other configurations.

read post