New Project – blocks

I’ve started a new CSS and JavaScript framework. It’s still very much in the making. You can check out the progress on GitHub.

The project uses Bower to manage dependancies and Grunt JS to manage the components and build process.

The goal behind this framework is to give a starting point for any new front-end web project. It will be easily configurable to only include the parts that you need. You will also have the option to adapt the frameworks folder structure and integrate your own code, or use the framework as a stand-alone file (almost like a library of CSS classes).

This is only for my own use as I prefer not to use Bootstrap or something else all the time, but it’s on GitHub so you can use it if you wish. I’ll probably just keep updating it over time.

Consistent buttons using different elements

You might have noticed that different types of buttons will render slightly different in certain browsers. For example, in Firefox, <button> elements, <a> elements and <input type="submit"> elements will render in a slightly different size, even if you apply size CSS properties (such as height, line-height and padding etc.).

In the case of Firefox, this is because of the the ::-moz-focus-inner pseudo class. It basically creates a little more space around the text node in <button> elements and <input type="submit"> elements. To get around this, you can remove the padding and create a negative margin to bring in line with the <a> elements.

This will only solve part of the problem. You will also need to apply the rest of the CSS properties to ensure they all have the same font-size etc. I have used LESS in the example below. Variables should be pretty self-explanatory.

This should give a consistent button size, no matter what element you’re using. You should also be able to use icons with FontAwesome or something similar by using another element inside the .button element.

Quick tip

A little bit off subject, but kind of related. I thought I’d share a quick tip for how to use icon buttons with <input type="submit"> elements, as you can’t give these elements any children, and they don’t support pseudo elements, so you can’t just apply the FontAwesome classes straight to the button it’s self.

The concept is, wrap the element in a <label class="button> and hide the button it’s self. I’ll use the screen reader only class to hide the button inside the label, but I’m not sure if this matters, because there is a label for the screen reader anyway.

You should be able to use the CSS explained above with this method as well, and it should also stay the same size as every other button in Firefox. I’ll get a pen knocked up soon There’s a pen to show this below.

See the Pen Same size buttons (no matter what element) by Todd Gallimore (@tgallimore) on CodePen.

When I say “the same size”, I mean the height, line-height and vertical alignment.

Getting my head around inheritance in PHP

If you’re like me and are used to writing a lot of JavaScript, but only write a limited amount of PHP, mainly using PHP frameworks or applications like WordPress etc, You might share the same confusion around certain things like: Inheritance in PHP, Public, private and protected variables, the difference between isset() and empty() as well as some other weird PHP stuff.

I decided to write this article mainly for my own reference, but there is always the chance it will clear up some confusion for other people as well, so I may as well write about it here.

Public, Private and Protected

In JavaScript, we only use commonly recognised coding patterns to differentiate between public and private functions. Usually in JavaScript, a private function’s name will begin with an underscore. This isn’t because the language requires it, we just do it to help each other out so that other developers can see what’s going on. This isn’t the case with PHP. In PHP, we actually have a way of telling PHP it’s self whether the function is public or private. We do this prepending the function name with the key word private or public. Private and public functions in PHP work differently. It is important to have at least an understanding of how these work if you’re going to use them.

Inheritance in PHP

In the words of the PHP manual:

Class members declared public can be accessed everywhere. Members declared protected can be accessed only within the class itself and by inherited and parent classes. Members declared as private may only be accessed by the class that defines the member.

This means that when we create classes in PHP, we can literally prevent the rest our PHP from using our class’ methods in ways that we don’t want, by declaring them either protected or private.

Let’s consider this:

This is going to echo out to our page:

Hello
Goodbye
Hello again

But what if try to use these variables directly, instead of using them by calling a method within our class?

We’re going to get an error as soon as it tries to echo $talk->say_goodbye.

Hello
Fatal error: Cannot access private property Talk::$say_goodbye in /index.php on line 19

This is because private variables and methods can only be used inside the class it was physically written in. If we comment out that line and let it run echo $talk->say_hello_again, we would actually get exactly the same result, except the error would be talking about the protected variable instead.

Hello
Fatal error: Cannot access protected property Talk::$say_hello_again in /index.php on line 20

So what exactly is the difference between these two? It confused me for a while, but it’s fairly simple to understand when you think about it.

Inheritance

If we now extended that class and tried to use the same three variables by calling the speak_it_all method, like this:

This will give us a different output for our private variable, but the same for the other two

Hello
Notice: Undefined property: Talking::$say_goodbye in /index.php on line 19
Hello again

So now we can see the difference between private and protected variables. Private variables will not even allow child classes to access them, but protected variables will.

Static Functions

In PHP, we don’t even need to create an instance of a class before we can use it’s methods. We can use the Scope Resolution Operator to allow us to just dive into a class and use one of it’s methods as we need to.

If we consider the example above, and try to use the public variable straight from the class, like this:

This will actually give us an error

Fatal error: Access to undeclared static property: Talk::$say_hello in /index.php on line 18

This is because we would specifically need to declare the variable as a static property, to allow it to be used like this. So instead of using the public keyword, we use the static keyword.

Notice we have never needed to create an instance of this class using $talk = new Talk();

In Summary

Here’s a quick overview of each of the types of variables you can use in PHP classes.

Type of varible Access in child class Access anywhere
Public Yes Yes
Protected Yes No
Private No No
Static With :: operator With :: operator

Email client CSS support

For the last few weeks I’ve been working a contract for JD Sports in Bury UK. During my time here, I’ve been asked to build a LOT of emails (boring, but no worries).

As we’re all aware, coding for email clients is like coding for 90’s browsers, and nothing is ever the same between them. Because of this, I needed some help. I could remember a link that one of my ex colleges had sent me. I think now is a perfect time to share this Ultimate Guide to CSS support in email clients.

Red Routes

Important roads in London are known as ‘red routes’ and Transport for London do everything in their power to make sure passenger journeys on these routes are completed as smoothly and quickly as possible. Define the red routes for your web site and you’ll be able to identify and eliminate any usability obstacles on the key user journeys.

Dr. David Travis

Source: http://mediatemple.net/blog/news/read-routes001/

Finding Time – Updates on What I’ve been up to

It’s been a while since I wrote a blog post here. Trying to find time to share the thing I learn isn’t the easiest thing in the world. I’ve been up to all kinds recently keeping me busy. So instead of trying to get up to date with posts and writing new articles about all the stuff I’ve learned, I thought I’d just try and cram it all into one blog post and briefly go over each point. I’m still probably forgetting stuff.

WordPress API’s

As I continue to work more and more with WordPress, I have learned and gained experience using more of the API’s built into WordPress. This has enabled me to build much more powerful websites and themes for clients, as well getting more out of WordPress for my own projects. Instead of going over everything that I’ve learned recently about WordPress, I’ll just list a few of the API’s that I have recently come to use more and more.

Server Management

A while back I started an account with Media Temple for a dedicated virtual private server (VPS). At the time, I only had any experience dealing with grid hosting. Trying to set up a server with several hosting spaces and other things just blew my mind. It didn’t take me long to switch back to grid hosting.

I’ve recently upgraded again back to a VPS, and I couldn’t be more pleased with myself.
Having gained a better understanding, I have set up my server successfully with multiple hosting spaces. I have also installed Git as well Node sj and Grunt. This gives me my ideal set up for managing code and deployments. I’m also buzzing off the fact I can do a build on the live server, meaning I don’t need to keep compiled files in the repo :D! I can imagine anyone who has done this before will understand the headache behind trying to solve merge conflicts in a minified file (well… impossible I think is the best way to describe this nightmare).

JavaScript Frameworks

JavaScript is an ever growing language. The amount of frameworks and libraries to use is huge, so you’ll never run short of choices. The problem is, which one do I use? Well, just like anything… it depends on the situation at hand. I’ve dipped my fingers into a few of them. Ember, Backbone and Angular to name them. I think it’s probably worth noting that my favourite has to be Angular. I haven’t yet gained a HUGE amount of experience with Angular, but I think I’ve got enough knowledge to solve a wide range of problems with it. Expertise in Angular is something I’m still working towards I guess.

Applying Lean Principles in UX Design

I bought a book called Lean UX by Jeff Gothelf. This book covers way too much stuff to write about here. The concept, however, can be summed up pretty easily. “FAIL FAST”. I’ve been learning new ways to experiment and get the best user experience possible, with minimal resource and minimal time wasted. I haven’t quite finished the book yet though, I’m sure I’ll be posting about it all when I have.

More to Come

There is a lot more stuff to talk about here, but I’ll be here for weeks trying to write this article so I think I’ll leave it as that for now. I’d prefer to go into more detail about each subject anyway, so it’s probably best if I leave the rest for future posts. So… watch this space.