DEVseo

Making It Your Web

Adsense Pong

by Alex Hall (on 15th Jul 2013 @ 15:14:36)

  • 0 comments
  • 0 paragraph notes

Only June 18th Google Adsense was 10 years old. To celebrate Google added a really awesome little Easter egg to the Adsense site. Pong! If you log into your Adsense account (https://www.google.com/adsense/) there's an image in the bottom left of the number 10. Hover your mouse over that image for just a second and a game of pong will begin taking up your whole screen. It's annoyingly addictive and I may have already spent some time today playing it!

Adsense Pong 10 Years

Go on, treat yourself to some 10 year pong! https://www.google.com/adsense/

read post

Change SSH Welcome Banner On Ubuntu

by Alex Hall (on 3rd Jul 2013 @ 14:34:28)

  • 0 comments
  • 0 paragraph notes

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

Using The Web Notifications API

by Alex Hall (on 26th Jun 2013 @ 09:58:17)

  • 0 comments
  • 0 paragraph notes

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",
});

A notification in Firefox

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

Simple ScrollTo Function with jQuery

by Alex Hall (on 12th Jun 2013 @ 12:35:16)

  • 0 comments
  • 0 paragraph notes

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

The Coolest Thing

by Alex Hall (on 24th May 2013 @ 23:07:34)

  • 0 comments
  • 0 paragraph notes

There are LOADS of really cool things happening with CSS3 at the moment. Have you seen the CSS3 solar system? Or really cool and detailed CSS3 Clouds? If not, I really suggest you check those out first. The solar system is quite a simple concept now with the use of border radius and simple rotation animations being quite standard among users and the latest browsers. The clouds are something a little more special using some JavaScript on top of CSS to get the major effects (check out the tutorial here).

However, as cool as these things are something came along today that I found very cool indeed! It's a bit of fun with what you can do these days, but has some practical possibilites for certain projects. Check out the link below before a quick explanation.

read post

I Love Responsive Design

by Alex Hall (on 13th Mar 2013 @ 16:42:08)

  • 3 comments
  • 0 paragraph notes

I should probably be a little more specific. I love writing the CSS that produces a responsive website. I've been reading up on responsive design since it's inception and then popularity. And why wouldn't it be popular? A massive percentage of browsing these days is done on the ever faster and better mobiles. Responsive design takes the middle-ground between a website built for the desktop, and an app built for the phone. It covers both with beauty and simplicity!

Of course, when I say simplicity I mean it's simple when you know how. But the fundamentals to create a responsive website are pretty basic thanks to CSS media queries, and the plethora of responsive toolkits you can find on the web today (Bootstrap, Foundation, Skeleton to name but a few). In fact, if you want to go ahead and don't want to do it yourself, dropping any of these into your site (with a few tweaks) will see you all responsive in no time!

read post

Royal Slider - A Beautiful, Modern Example

by Alex Hall (on 5th Sep 2012 @ 18:23:07)

  • 0 comments
  • 0 paragraph notes

Today I stumbled upon something magical. I've recently started really getting into responsive designs and media CSS rules and how much power they can bring to a website that is likely to run on a mobile device. Technologies have changed a lot and what's available to us, web developers, is nothing short of a miracle compared to a couple of years ago. However, a lot of the tools and funky plugins available out there for such libraries as jQuery are still falling behind in a lot of ways compared to what is available. And so, it is with great pleasure that I bring to your attention Royal Slider.

I encourage you to click that link. The slider has loads of options for different styles, types and animations as you would expect from the update to an already popular plugin. But the best part happens when you resize your browser window or view the page on a mobile. Go on. Do it.

The way everything scales so effortlessly is superb. The animations remain smooth on my testing including when changing the orient of my mobile device. I also really like the default animation shown on the home page of the plugin. It's smooth and looks great. Some of the gallery examples are really great too.

read post

New Version of Google Calendar Watcher

by Alex Hall (on 6th Aug 2012 @ 19:29:21)

  • 1 comments
  • 0 paragraph notes

Whether you know it or not, I am a Firefox Extension Developer and have about 7 or so extensions that I've written for Firefox over the last couple of years. Some are functional, such as the Google Calendar Watcher extension, or the Codesnipp.it extension (for users of http://codesnipp.it). And others were created as a little bit of fun, such as the Profanity extension, which puts random swear words on any web page throughout any text!

My most popular extension by far is the Google Calendar Watcher, and it's definitely the one I've been most proud of as I use it on a daily basis. However, it has taken me a long to finally perfect it enough to a). be happy enough with it to release it, and b). for the very strict extension testers to approve it! But, I'm very happy to say that the new version is now available for download on the Firefox Add-on website and can be found Google Calendar Watcher.

read post

Updates

by Alex Hall (on 10th Jun 2012 @ 02:53:15)

  • 0 comments
  • 0 paragraph notes

It's been a while since anything has happend on DeVSeO recently due to other commitments, work, running, the gym and guitar! However, I've finally managed to put some time into the site today and here's what has happened!

Firstly, I know that a couple of the tools haven't been working for a while and, among other things, this was due to the server migration from a shared host to my shiny new VM (thank you http://gandi.net!). This should hopefully mean that the site runs a little faster and has less down time (although that wasn't the case this week thank you kind spammer!).

YouTube Playlist RSS Feed Creator

I have now fixed the YouTube Playlist RSS Feed Creator tool we have here in two ways. Firstly, it was completely broken because the YouTube Data API changed and I didn't notice (sorry!). The way in which playlists are looked up is now slightly different and annoyingly YouTube don't actually give you the playlist ID required to use the tool. However, I've added a secondary function that allows you to look up a list of playlists for a given YouTube user and from that list create your RSS Feed by clicking the link to the relevant playlist, hurray! I've also set it up so that you don't need toworry about only 25 returning. It will loop through all pages of playlist items and return them all to you in one list!

read post

Get The Distance Between Two Addresses

by Alex Hall (on 11th Aug 2011 @ 16:33:27)

  • 0 comments
  • 0 paragraph notes

Find The Distance Between Two Addresses

After having a lot of fun working on the "Find Your Nearest ATM" script I decided to have a go at something similar, but a little bit different.

Some Background

This is actually going to be part of a project I'm currently working on in my job at Worldview Limited. I have recently been writing a "Proposal Generator", which uses a lovely JavaScript "Web App" interface to add options and text to generate a PDF "proposal" for our corporate clients.

Part of the specification for the new system was to include the distance from a given location to one of our supplier locations. This needed to be dynamic based on the two addresses given so I decided to have a hunt around and see what I could find.

read post

Loading

Complete!