Chris Worfolk's Blog

A lot has changed since I wrote my first line of CSS – which is probably going on a decade ago now. Other things have been there all along, but have sometimes been overlooked or neglected. Below is a collection of CSS that it is easy to forget exists.

Selectors

Obviously you can use . # * etc, but there are actually far more options. As well as chaining them (p, div) and specifying them being inside each other (p div) you can also specify they must be the parent (p > div) or immediately after one another (p+div).

As well as checking attributes (input[type=text]) you can also do contains (input[title~=something]) and starting with (input[type|=something]).

We’re probably all familiar with :visited and :hover states, but there are actually dozens you can use – :focus, :first-letter, :first-line, :first-of-type, :last-of-type, :only-child, :empty, :enabled and “checked just to name a few.

Sizing in rem

It’s good practice to use em sizing to make everything relative – that way if a user scales up the page then everything stays in proportion (though modern browsers tend to handle this well anyway). But isn’t it annoying that it stacks? A 2em value inside a 2em value will give you a font size of 4.

You can solve this by using rem. Specifying 2rem will make it 2 x the root (html) element of the document – so you can make it all relevant to that and not worry about nesting.

Gradients

You can add gradients as backgrounds and even create complex patterns with multiple colours starting and stopping at different points.

background-image: linear-gradient(bottom, #22E7D2 12%, #3EFFFC 56%, #2FAB24 100%);

Shadows

It’s simple to add a drop shadow to an element.

box-shadow: 10px 10px 5px #888;

You can add it to text as well.

text-shadow: 2px 2px #ff0000;

Box sizing

Tired of having to work out what width you want something to be, then taking off the padding and the border? Sometimes maybe you don’t even have the option to do that because you want it to be 100% wide. Box sizing to the rescue. Set the box sizing to border and it will calculate the width factoring these properties in.

box-sizing: border-box;

Border radius

Want some nice rounded corners? Easy.

border-radius: 5px;
border-top-left-radius: 3px;
border-bottom-right-radius: 10px;

Clipping

You probably shouldn’t clip as it means you’re sending an image to the browser that is too big and then cutting it down. However, the functionality to do it does exist within CSS>

position:absolute;
clip:rect(0px,70px,100px,0px);

There is a background-clip property too.

Columns

Want to present your text in a series of columns? Theres a property for that.

column-count: 3;
column-gap: 5px;

Last month I attended the Toastmasters D71 (UK & Ireland) spring conference in Torquay. It featured the district finals of the international speaking contest and evaluation contest, as well as a fancy dress disco, banquet and a series of workshops.

Torquay was quite a drive, taking nearly six hours from door to door once you include picking people up. I’ve also decided that it rains more often in Leeds than it does in Bristol – because it only really rains once in Bristol, and just keeps going forever. The weather at Torquay was a bit better, but certainly not the sun I was hoping for.

We turned up on the Thursday night, which I thought was just going to be a social. As such, we turned up an hour after the start having been to a restaurant first, and walked in to find a formal sit down meeting – a little embarrassing, but we were soon settled into our seats.

The workshops were very enjoyable. I took plenty from all of the ones I attended and would have liked to see more of them – after all, I imagine there are plenty of Toastmasters who would be willing to get some stage time to deliver one.

The semi finals were interesting too, but things really got interesting when we got to the finals as the big stage really adds something to the speeches. The winner of the speech contest, William Dempster, won with a speech entitled “Scotch, The Way To A Better Life”. It won because of it’s clear purpose and William’s beautiful delivery – must mostly because it’s just objectively true.

Torquay as a place is a bit tired, especially the conference centre. It felt a little corporate too – the big pubs seemed to be a Wetherspoon, a Harvester and a Beef Eater. We stayed at The Grand, which would have been a nice hotel, but is now dating fast. It reminds me of the Britannia in Manchester – beautiful building and huge rooms, but the endlessly creaking floors and ageing facilities make for a disappointing experience. The pool was small and too shallow to swim in properly, but to their credit the staff were very friendly and helpful.

The catering was a mixed bag. I enjoyed both the Friday night buffet and the Saturday banquette, the standard of food was quite high at both. Elina didn’t have much luck with the buffet though as everything had onions in it (which she can’t eat). We didn’t specify it as a dietary requirement as she can just eat the things that don’t have onion in, but in an unexpected twist, they had put onions in almost everything.

Some things you expect it in, but there was onion mixed in with the salmon and the pasta. We weren’t sure about the quiche, so we asked the woman behind the table, but she said she didn’t know – what is the point of her even standing there at a self service buffet when she doesn’t know what the food is? Surely her only job is to answer questions about the food?

There was a lack of younger people there and I wonder if that lead to a bit of a generation gap. I found some of the procedure a little strange – playing the national anthem, toasting the queen and saying grace before the meal. I didn’t take part in any of these and felt rather uncomfortable having them included. One guest even hit me in a “you insulent youngster” kind of way.

I also find some of the comments made by people speaking to be racist or sexist. Examples including Kwame being interviewed, “that’s not a British name – where are you from? How long have you been here? 20 years – that’s pretty settled then!” Or an area govenor being described as having “hot little hands”, down to little things like people refusing to sit down at dinner before the women sat down (needless to say I just sat down) or a steam of jokes that that reinforced inaccurate gender stereotypes on both sides.

That certainly isn’t a reflection on the majority of the conference though, which on the whole was a very pleasant and professional experience. The conference team did an excellent job of organising everything, all the events ran smoothly and you felt you were in competent hands throughout the event. They can be really proud of the event that they put together.

In summary, I did enjoy the conference and look forward to attending further conferences in the future.

It wasn’t all serious business in Torquay – I got time to take some photos too.

While in Torquay, we visited their costal zoo, Living Coasts. I had read some dubious reviews of it online, and some of the points were valid – they did have quite a few exhibits closed, above and beyond the otters that we knew would be missing when we entered. Kids might get a little bored too. But given the range of wildlife we got to see and the range of talks and feedings put on, I thought it was well worth the £11 we paid to get in and the pricing structure seems in proportion to what you would pay at Chester Zoo.

Following the Atheist Society’s AGM, Hugh Clayden delivered a talk on the European Witch Hunts. You can watch the video on Worfolk Lectures. Not only was it a really interesting talk, but you have to love Hugh’s gestures.

Earlier this month, the Atheist Society held their AGM. Congratulations to Dan Murgatroyd (President), Josh Hulks (Secretary), Gabrielle Stakaityte (Treasurer), Hugh Clayden and James Murray who were all elected. It’s really looking like a superb committee and I wish them all the best for the coming year – I’m sure they’ll do brilliantly.

Chester Zoo have the most amazing range of slushie flavours I have ever seen.

More photos from Chester Zoo, these ones have been cropped.

Here are some photos from my trip to Chester Zoo.

Earlier this month we held the elections for White Rose Speakers. Erik was elected president, Jane will be taking over from me as Vice President of Education, I’ll be moving to Vice President of Public Relations, Tony will be remaining as Sargent At Arms and Michael will be remaining as Treasurer. Kartik and Sam will be joining the committee as Vice President of Membership and Secretary. Congratulations to everyone who was elected!

We also celebrated our District Governor Anthony’s birthday with some cake.