the life of a web developer » CSS

WDC2011 is approaching

Gavin — Tue, 06 Sep 2011 11:25:42 +0000

October is defiantly conference season for me, with the PHPNW conference at the start of the month and now WDC towards the end.

The Web Developers Conference is aimed at both professionals and students, and focuses on the front end side of web development.

The schedule has now been released, and the speakers have been known for a while, there are a couple of well-known speakers that will be there so I’m really looking forward to this and hopefully learning a few things front end related , as a PHP developer that’s where my skills aren’t so strong.

Tickets are still available at a very reasonable £50 for the days festivities, and will be entering a Late Bird stage at the start of October, so get your tickets now to avoid disappointment if they sell out or go past your budget! Various discount codes are floating around on Twitter if you need one, or just ask one of the speakers if you’re struggling.

You can find out more information on the conference website http://webdevconf.com/

standards>next: CSS3

Gavin — Thu, 24 Mar 2011 12:08:23 +0000

Last night I went along to the latest standards>next meetup, to learn about the exciting new features we get to play with in CSS3 and though I’d share the slides.

CSS3: stay tuned for style – @chrisdavidmills

Typography online – @jake74

Adaptive layouts – @patrick_h_lauke

CSS3 for dynamic, responsive UIs – @13twelve

the first three may not be much use as without the talk the slides dont really help if you weren’t there, but they do contain links to other articles etc that you may find useful. The adaptive layouts talk was particularly interesting as we are going to have to start thinking about mobile devices in our designs/work.

The last link isn’t slides but an example site he used for his talk. It contains examples of what we can do with CSS3 in terms of transitions and animations.

The examples are best viewed in chrome especially the animations (in fact the animations only work in chrome), but as animations should be done with JavaScript not css that’s not really problem as we would never use it cross browser.

What happened to the design?

Gavin — Thu, 08 Apr 2010 13:12:53 +0000

Today, one or two of you may notice the site looks a little different. That’s because the style sheets for both my site and the blog have been removed for one international day (that’s about 48 hours to you and me) to celebrate CSS Naked Day.

Every year, website developers across the world remove their style-sheets and show off their to help promote web standards. Its a great opportunity to double check and show people that your website is written for and accessible to all.

To know more about why styles are disabled on this website visit the Annual CSS Naked Day website for more information.

Enable broken image placeholders in Firefox

Gavin — Thu, 11 Mar 2010 07:01:48 +0000

Something that has always bugged me about Firefox is that if it encounters a broken image it doesn’t display an image place-holder. Instead it displays the alt attribute as in-line text. This can cause problems if your primary development browser is Firefox, as you may not notice broken images on a page.

For a while there has been an option in the config to display image place-holders while a page loads but not for broken images as on IE (yes I’m praising an IE feature!).

Image placeholders on load is set to ON by default, your can change this if you want by going to about:config and searching for ‘image’. The option your looking for is:

browser.display.show_image_placeholders

Just double click to change the value.

As I said before, this doesn’t affect broken images after the page has loaded, and after several searches it looks like the option just isn’t available to Fx users as a general setting. There is however a solution…

Firefox allows users to specify custom CSS to be applied to websites on a global basis, e.g if you want your default link colour on unvisited links to be black instead of the default blue.

You do this by making changes to your global content css file. You can find it at the following location (OS Specific – I’m on windows 7) ‘%appdata%\Mozilla\Firefox\Profiles\\chrome’ (if your on a domain you will need to edit it in your roaming folder), look for a file called ‘UserContent-example.css’ and rename it to ‘UserContent.css’, this will then be loaded by Firefox when it fires up.

Add the following CSS to the file and restart Firefox..
/* Enable image placeholders */ @-moz-document url-prefix(http), url-prefix(file) { img:-moz-broken{ -moz-force-broken-image-icon:1; width:24px; height:24px; } }

Thats it… when you next come accross a broken/missing image, you will get a box the size you have defined in its place with the alt inside it.

Update:
I was asked if I could add a broken image in this post as an example to see the css tweak in action, so here it is -> <-

preventing SPAM

Gavin — Mon, 25 Jan 2010 19:45:48 +0000

Since I moved to my VPS, one of the biggest problems I’ve had is with spam. Not just with my email account but everyone who’s email accounts Im hosting on the VPS have all seen a sharp increase in spam emails.

On the reseller server I had access to grey-listing and SpamAssassin to filter mail as it arrived and I got maybe 2 or 3 a week, but the day after I moved onto the vps this shot up to between 20 and 50 a day! I have my emails pushed straight to my phone as well so this fast became a bit of a pain.

My VPS did come with SpamAssassin pre-installed as part of Plesk but due to the licence I have installed I couldn’t use it so this caused two problems, 1) emails are not filtered for spam and 2) SpamAssassin is using up precious memory while not actually helping.

The first thing I did was to turn off SpamAssassin, it was using a lot of memory as even tho it wasn’t filtering any mail it was still scanning every message that arrived on the server, On advice of my hosting providers tech support I decided not to un-install it in case it caused problems so I just stopped the service from running and then disabled it from auto starting on system reboot to preventing it restarting if I ever need to reboot the server.

I then tried to find the grey-listing software used on my old reseller server, this seemed to work really well so I wanted it on my server too. Support told me they were using a script put together by Brent Meisher written to work specifically with Plesk but unfortunately the repo had been removed and I couldn’t download the files.

I was speaking with a support engineer about it and he mentioned a new tool he was playing with called SpamDyke and how it was looking promising as a replacement to their current grey-listing solution, so I decided to give it a try.

The good news is, that since I started writing this blog post, SpamDyke has been added into the atomic repositories, so to install it is as simple as using apt get or yum. Configuration is just as simple, the default settings are actually quite effective and I’ve been using them for two weeks and haven’t received a single piece of spam.

All the information you need can be found on the SpamDyke website and the README file is really useful.
This is something I defiantly recommend to everyone who is running their own mail server.

An Early Look At Internet Explorer 9

Gavin — Wed, 18 Nov 2009 21:19:09 +0000

The Microsoft Internet Explorer Development team has made a post on their blog about the next instalment of the Internet Explorer Saga (rumoured to be the last Redmond based browser to bear the name Internet Explorer). Unfortunately there is no alpha build available with this post for us to play with, just the usual spiel telling us about how good IE9 is will be might be, and how it compares to the “latest” (as of 18/11/09) builds of other more popular browsers.

Full of “how are javascript engine is better than your javascript engine” talk, there isn’t much about the features it will include, or a reason why they dont just release a version 8.* will all these updates rather than just going for version 9, but it does highlight their focus on improving CSS support (including rounded corners), its defiantly worth a quick read and also a bookmark for those of you not already subscribed to the RSS feed.

You can find the post on the IE Developer Blog

Fonts….coming to a site near you

Gavin — Wed, 31 Dec 2008 11:44:02 +0000

Just thought i would make a note to say Fonts are finally here….no more putting up with arial, being funky with verdana or stuck with times new roman…. as Firefox 3.1 continues to be flooded with features we have been waiting an age for, P0RN mode, faster javascript, html 5.
We are finally getting the ability to use what ever font we wish, as part of our website designs, as long as its a public font of course.

Firefox 3.1 allows us to use the CSS3 rule @font-face, allowing us to specify a font not necessarily installed on a visitors system. The rule alerts the visiting browser a non-standard font is required and is given a location it can download the font into the temp files to display the website as intended.

Syntax

@font-face {
  font-family: ;
  src: ;
}

Example

More details on this can be found over at the Mozilla Dev site , they have also publised a list for developers with all the features being added to 3.1