Blog

Creating a stickyfooter with flexbox (and Foundation)

The other day I realised I needed to create a stickyfooter for my app. i.e. getting something to always stay at the bottom of the page. This is needed when there is not much content on the page itself.

Probably the most popular method today is using Ryan Fait’s method.

However, this method still requires a fair bit of code, and assumes you know the height of your footer.

I didn’t know the height of my footer as I am dynamically inserting a new quote everytime.

And then I discovered flexbox. It makes solving a lot of traditionally tricky CSS issues rather trivial. Check out Solved by Flexbox to see examples of this.

I really like using Zurb’s Foundation CSS framework, but they don’t offer a standard solution for stickyfooters. I didn’t want to stop using Foundation, and wasn’t sure if flexbox was going to conflict with Foundation’s Grid layout. So I coded something up to test. And it works great..

 

See the Pen Creating a stickyfooter with flex. by magician11 (@magician11) on CodePen.0

Frontend Developer’s Support Group

I’m looking at starting a support group for frontend devs. You know who you are.. you live and breathe HTML5, CSS3 and JS.

A lot of us work on our own (I think) particularly if we’re freelancers.

There are already some great resources for tech support like stackoverflow.com But these can be a cold/impersonal even though they do serve their purpose for sure.

So I’m looking for a more generalised and personalised support group:

  • Where it feels safe to ask “stupid questions”. As we all know there are so many frontend technologies, and we all have varying levels of skills in each one. So part of the function of this group will be tech mentoring and supporting each other. Or even just knowing which resource to point someone to is helpful.
  • A group to share struggles and wins with.. like how to deal with a difficult boss or “hey, I just got a new contract!”
  • A group of people to just connect with during the day.. a virtual team.
  • A group to get feedback from for our current projects.
  • To make it more personal, I’m thinking of maybe a monthly catchup on Google Hangouts. And possible in-person meetups.
  • You can live anywhere in the world.
  • You speak English fluently.

This group will probably work best smallish.. less than 10.

Possibly using #slack to communicate generally on. But being a more tight-knit group, we’ll probably have each other’s Skype id’s and have some voice chats with each other over the week to bounce ideas around or get more 1-on-1 support.

I’m just looking for feedback at this stage and an expression of interest from anyone who loves frontend dev and wants more of a team feeling. Where we actually support each other. My other job is as a coach and counsellor, so I’ll bring that area of expertise to the group too.

It’ll be free to join. There’ll be some level of commitment to connecting so relationships are formed; I’m not interested in dropins.

So please comment below or email me direct from the contact form.

How to display a WordPress feed in an AngularJS app

I have a landing page where I wanted to show my latest articles from a WordPress blog I have.

It turns out it’s not that hard to do.

First I created a factory to get my WordPress feeds

Then use this factory from some controller

Then use this data in a view like this

And that’s it! Pretty simple :)

Working demo at the bottom of this page.

Use Autoprefixer to add vendor prefixes to your CSS

The latest CSS properties are getting implemented in browsers before they become standardised. Which is great for us developers in that we can start using the latest CSS3 features quicker than not. But to use these latest implementations, we need to add vendor prefixes to our CSS rules, specific to those browser vendors (e.g. for Chrome and Firefox).

For example, to make sure the animation property works across all browsers, we would need to write out something like…

h2 {
-webkit-animation: example 5s linear 2s infinite alternate;
        animation: example 5s linear 2s infinite alternate;
}

This can be tedious to work out which CSS properties need to be vendor prefixed, and then to actually duplicate each of those properties with a vendor prefix.

My first stab at solving this was to write my own Sass mixins that I could use to preprocess my CSS.

Then I discovered Bourbon which is a library of mixins that includes mixins to add vendor prefixes for specific CSS properties. I prefer to go with well maintained and well supported libraries than essentially re-writing that code, so I opted to use them.

And then I read Bourbon is deprecating their support in generating the vendor prefixes. And that’s when I discovered Autoprefixer.

Autoprefixer is a postprocessor.

For the above two previous methods (using Sass or Bourbon) we need to know which CSS properties need to have vendor prefixes added to them. In the case of Autoprefixer, all I now need to do now, is just write my CSS, then pipe that CSS through Autoprefixer using a build tool like Gulp. Autoprefixer will then automagically add the vendor prefixes onto the CSS properties that need them.

A snippet of one of my gulpfile.json files using autoprefixer looks like this

So much simpler! And we’re done.

My interview process with Toptal

Toptal connects top freelance developers with various companies.

So I was keen. More freelance work sounded good to me. The interview process was fairly intense.

Stage 1 involved chatting with some guy who asked relatively general questions. Pretty sure the main objective was to assess my English level.

Stage 2 was an automated online test on Codility. There were 3 questions. The first one was relatively straight forward, but the second one on negabinary stumped me. I went blank.. maybe due to the time pressure. I had 90mins to complete the test. Of course afterwards I worked out how to do it by implementing an AngularJS app that converted any decimal number to negabinary. You can see a working demo here. It’ll even display how the calculation was made. Source code on GitHub. Essentially implemented using an AngularJS filter.

 

The 3rd stage was to do live coding examples while being watched by another developer via Skype screenshare. Something about being watched unnerved me. I didn’t get through the first task which I had 20 mins to do. So my application was rejected. It was a fairly simple jQuery task on adding and removing elements. Again, I sat down and worked it out soon after my interviewer left. My final solution is on JSFiddle here.

Apparently I can re-apply in a month!

Hope that helps someone out there :)

Implementing a deep comparison between JavaScript objects

The == operator compares objects by identity. But sometimes, you would prefer to compare the values of their actual properties.

— (Taken from Eloquent JavaScript Ch4)

I spent a bit of time figuring this one out, and finally have a working solution.

Continue reading Implementing a deep comparison between JavaScript objects