DEVseo

Making It Your Web

Chrome Extension Development

by Alex Hall (on 2nd Apr 2014 @ 08:54:18)

  • 0 comments
  • 0 paragraph notes

I have recently become quite a Chrome Extension developer enthusiast and in the past few weeks have written five extensions for the  Chrome Webstore that I'm going to talk about here. If you haven't tried Chrome by Google, or don't use it, I highly recommend giving it a download and a try. It's fast, packed with features, and makes the lives of us developers a lot easier! Plus there are a plethora of great extensions that anyone will find useful and I hope some of those below fit into this category.

Link Alert

link_alert_main_ad.jpg

read post

The Problem With Underlines

by Alex Hall (on 21st Mar 2014 @ 11:23:01)

  • 0 comments
  • 0 paragraph notes

It's not something I've really considered before, but the age-old problem arises whereby, as soon as you know something it becomes the most important thing and you won't see anything the same again.

This occurred to me today with the basic underline. I had never considered that it might render differently in different browsers, with different fonts, at different resolutions, etc etc. However, it turns out that it can be a real pain, and the differences are somewhat surprising to say the least!

Check out this Medium article about this issue and the potential solutions we can implement to get that clean, consistent underline feel wherever/whatever you are looking at a web page from.

read post

Helping Towards Informative Links

by Alex Hall (on 21st Jan 2014 @ 11:02:37)

  • 8 comments
  • 0 paragraph notes

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

Marketing Metrics That Matter

by Alex Hall (on 10th Jan 2014 @ 09:57:50)

  • 0 comments
  • 0 paragraph notes

I received a follow up email to one of my recent posts on Twitter today with a really handy Marketing Metrics cheatsheet so thought I would share it with you all. Follow the following link:

http://www.pardot.com/marketing-metrics/marketing-metrics-matter-cheat-sheet/

Full credit to Matt Wesson at Pardot for the email and resource!

read post

How Many People Are Missing Out On JavaScript

by Alex Hall (on 23rd Oct 2013 @ 13:51:22)

  • 0 comments
  • 0 paragraph notes

Here's an interesting story about how it was discovered that 1.1% of people using UK government web services are missing out on the enhancements that JavaScript brings to everyday web browsing.

http://digital.cabinetoffice.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/

read post

Microsoft Loader With CSS3

by Alex Hall (on 9th Aug 2013 @ 11:28:36)

  • 0 comments
  • 1 paragraph notes

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!

Microsoft loader in CSS3
.....

read post

PHP and MySQL Tutorial (Updated)

by Alex Hall (on 17th Jul 2013 @ 12:49:40)

  • 0 comments
  • 0 paragraph notes

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

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

Loading

Complete!