DEVseo

Making It Your Web

Thoughts About Google+

by Alex Hall (on 6th Jul 2011 @ 16:48:56)

  • 0 comments
  • 0 paragraph notes

It's everywhere at the moment. Everyone is talking about it. Not so many have managed to use it yet. I am one of the fortunate ones that has had a few days to use it and learn about it and see what it can really do. So, here's what I think about Google's new social media project Google .

The first thing I noticed about it is that it is very shiny! We knew something was coming when colour scheme of a lot of the Google products changed late last week and it would seem that Google is one of the reasons for this change. I can't deny, I love the new colours and layout of Google itself and Google feels a lot more like a web "application" than a new social media site.

Circles

So, what's different that Google hope will make Google more popular than other social networking sites, such as Facebook? Well, the first and for me most important and major step beyond what else is offered out there is the way to dish out content to a particular set of people (as defined by you) by using circles.

Circles are, fundamentally, a way for you to make groups of your friend or acquiantances allowing you to later specify which of these "circles" you would like your content to reach. It's like Facebook groups, except that you don't have to have people accept an invitation to join. You simple drag and drop them into the circle of your choice and when you specify that group in your next post, members can see what you've posted. It's very simple and intuitive to find and add people to these various circles, and you can make as many as you want.

read post

Find Your Nearest ATM

by Alex Hall (on 6th Jul 2011 @ 16:25:50)

  • 0 comments
  • 0 paragraph notes

Find Your Nearest ATM

I have been working on a few scripts recently a little different to the normal ones you might find on DeVSeO. Partly this is because I have now discovered how awesome jQuery can be, and how easy it is to learn and use. Because of this I have undertaken a few personal "mini-projects" with the help of jQuery and a little bit of HTML5 thrown in for good measure.

The first of these is my new "ATM Finder", which uses Google Maps to plot ATMs on a map for you based on one of a number of parameters. If you are using a smartphone or have an HTML5-capable browser you can use the GeoPosition functions to plot the map based on your current location. This doesn't work that well for desktop PCs because the GeoPosition is usually based on where you ISP is located. But for smartphones, from my testing at least, it should work really well!

If you have any issues with it please comment below and let me know. I am considering release it as an app for various smartphones, but it currently works pretty well as a web-based application.

read post

Blurry Text & Simple Snapshots With HTML & CSS3

by Alex Hall (on 24th Sep 2010 @ 14:02:54)

  • 0 comments
  • 0 paragraph notes

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

HTML5 Search Inputs - Tips and Tricks

by Alex Hall (on 6th Sep 2010 @ 11:55:47)

  • 0 comments
  • 0 paragraph notes

HTML5 has some great new tags and attributes allowing you to do some neat stuff without having to resort to HTML/JavaScript/CSS hacks. Today I learnt a little about the HTML5 'search' tag, which is actually a normal input with the type set to 'search' (rather than text/hidden/submit etc). It is basically meant as a quick way to create a search input for your site and webkit-based browsers have added a little support for the new type, which you can see if you have Chrome 5 or the latest Safari. Chris Coyier has also created a lovely little article detailing what can and can't be done with the search attribute, and it's (quite major) limitations. You can read more of that:

Chris Coyier on HTML5 Search

Personally, I can see a use for this, but I'm not completely convinced by the style rules that can't be overwritten. I'm all for maintaining a semantic web, but not if it stops me from making an element look just the way I want it to. Inputs in CSS always used to be a headache because of native browser styles that meant overwriting them could be a pain, especially for the old and decrepid Internet Explorer 6. This feels a little like that scenario come back to haunt us.

read post

The Decline Of Internet Explorer 6?

by Alex Hall (on 28th Jul 2010 @ 15:30:34)

  • 1 comments
  • 0 paragraph notes

Recently I've been looking at some new sites made by various designers and developers and I've begun to notice a trend. The obvious use of CSS3 and HTML5 has risen dramatically since the beginning of the year. This makes me wonder, is it because people have finally stopped caring so much about IE6 looking visually identical as all the other browsers?

I'd certainly like to think so!

One recent incident regarding this comes from the sites I've been working on at work. I've been making plenty of small style changes to various sites and building a new one from scratch. That's me in my element! But the thing that shocked me was that a lot of the use of CSS3 in the sites was not shot down. Especially when I pointed out that it still looked fine in Internet Explorer, things were just a little more 'blocky', and 'plain' (mainly through use of border-radius and box-shadow).

This was not immediately shot down as an issue as I expected but people actually accepted that things didn't look the same, but the functionality remained intact.

Going back to my recent trawling of the web I've noticed so many new sites that people are bragging about (and mostly rightly so, there are some amazing new sites popping up!) that contain multitudes of CSS3 enhancements, favouring these to using JavaScript to create simple animations, opacity and rounded corners.

read post

Microsoft Could Support IE6 For Longer!

by Alex Hall (on 14th Jul 2010 @ 15:01:48)

  • 0 comments
  • 0 paragraph notes

I know it's the most depressing news you've probably heard for a long time, but Microsoft are talking about extending the life of Windows XP based on a fact that 74% of work PC's still run the 4 and a half year old OS.

This could potentially mean that IE6 (which shipped with the original versions of XP and therefore must be supported as long as the OS) could well be supported for a longer length of time too to accommodate businesses that don't want to update their IE6-specific software until they really have to (which pushes us developers further into a dim spiral of despair).

Engadget Has More

At this rate, the perspective time for the official release and full support of the new HTML5 spec (and CSS3 spec), which is currently about 2022, may well come quicker than the death of IE6. That must be some kind of oxymoron, as IE6 will never support the HTML5 or CSS3 spec to any degree, so it could push everything back further. That just makes me wonder why we have to still be so dependant on Microsoft updating their products before we can update our service (styles & functionality).

read post

CSS3 Rounded Images Without Clipping

by Alex Hall (on 7th Jul 2010 @ 16:17:03)

  • 0 comments
  • 0 paragraph notes

Have you ever tried to style an image in CSS3 with a border radius of anything except 0? If you have you may have noticed that the image clips outside of the container, which looks absolutely horrible! The desired effect would be for the image to sit below the border and clip underneath so it looks like the image has a nice rounded corner. However, because of this (Firefox?) bug, the desired effect cannot be achieved this way.

However, there is a workaround! (Actually there's a couple, but this is the easiest.) It requires a minimal amount of extra markup in the form of a span element wrapped around the img so that the markup you end up with looks something like:

<span>
    <img src="" alt="" />
</span>

All you need to do to get the effect working properly is stop the image from the image tag appearing and set the background image of the span to the same href. So for example, if your image was located at http://www.yourdomain.com/images/test.jpg your code would look something like:

<span style="background: url(http://www.yourdomain.com/images/test.jpg) no-repeat;">
    <img src="http://www.yourdomain.com/images/test.jpg" alt="Test Image" style="opacity:0" />
</span>

As you can see we have hidden the original image with opacity (which allows it to be selectable as an image, but not visible as an element) and set the background image of the span to the same image (making sure not to repeat it if there is a blog set somewhere). Because the dimensions are the same we don't need to worry about setting a size and/or width on the span as it will automatically expand to fit the image tag inside (unless you have floats/displays set, in which case you may need some extra styling).

read post

The Complete Guide To Commenting On Any Blog

by Alex Hall (on 7th Jul 2010 @ 14:19:15)

  • 1 comments
  • 0 paragraph notes

I read this post this morning and it cannot be closer to the thruth of it. I'll sum it up below but you should really go ahead and check it out and read the whole post for yourself as it's very intuitive.

The Complete Guide to Commenting on Web Design Blogs

Read the Whole Article :-)

If you've posted comments on blog posts before have you always read the whole post before commenting? I will admit that I have not always done so, and generally had good reason. But in order to come across well in your comments you should really make sure you have read the whole post and understood it. Or, if you haven't understood it asking questions about theories you don't understand is always welcome. But guessing the content based on a title, or first paragraph is likely to make you look silly, especially if your comment has already been answered elsewhere in the blog.

Another point I would make is that you should probably read most, if not all, of the previous comments before you post yours because, especially if you're asking a question, it is likely that if the post has lots of comments someone has already asked and been answered this question.

read post

Eric Meyer On CSS3

by Alex Hall (on 6th Jul 2010 @ 16:06:38)

  • 0 comments
  • 0 paragraph notes

Okay, if you haven't read this amazing article on alistapart I think you should head over there now and read it.

Eric Meyer (of so much CSS fame, if you don't know who he is you're here for the wrong reasons! Or if you would like to learn head overt to Complex Spiral and be amazed!) delivers a beautifully written, and very comprehendable argument for the use of vendor prefixes in CSS3.

The article basically states that the vendor prefix (e.g. -moz, -webkit) is a great way to allow vendors to test, or beta the newest technologies they support. It allows for progressive enhancement in a non-detrimental way to your website. Adding or removing a couple of lines to add extra functionality (or remove them once fully supported) is a lot cleaner and easier than those umpteen nasty hacks we used to use to clean up pages for IE <= 6.

Do you use vendor prefixes for the latest CSS3 techniques? Let us know below.

read post

Star Rating Script PHP And MySQL Tutorial

by Alex Hall (on 18th Jun 2010 @ 08:42:21)

  • 3 comments
  • 0 paragraph notes

Edit

This post is now very old and the methods within have now been deprecated. Please reference my  newer article to see an updated version of the best way to get information from a database using PHP PDO.

If you have been to this blog before you may know that I have released a script written in JavaScript that allows you to easily add star ratings to anything you require. You can find that blog here.

However, in that blog I didn't go through the steps required to actually save the rating. After being contacted asking for help on the matter and wanting to write an nice introduction to PHP and MySQL I felt that this would be a good time to kill two birds with one stone. So, read on to learn how to write to and read from a MySQL database with PHP (and how to incorporate that into my Star Rating script.

Starting With PHP

If we're starting from the very beginning I guess it would be beneficial to make sure that you have everything you need before you start using the tutorial. You will obviously need some form of web server that is running both MySQL and PHP (whether it be on a hosting package or your local computer). I'll not go into details here but if you do not have this, or do not know how to set this up yourself check this tutorial.

read post

Loading

Complete!