I’m quite content with the default OS X mail app. It handles all my non Gmail email addresses and it’s very stable. If I remember correctly, it only crashed once during the whole year.

Sublime Text

A joy to work with. I’m actually writing this blog post in Sublime and I’m using the MarkdownEditing package to do so. Just shows that it can be used for more than just writing code.

Sketch

I used it this year to design both Sketch Repo and PSD Repo, along with a few other things as well. And although there has been some controversy around the 3.4 release, Sketch remains a solid app and gets my recommendation.

Transmit

My favorite FTP client, without a doubt. I use it daily for uploading images to Amazon S3 and I really appreciate that it allows you to set custom headers for each file type.

ImageAlpha

I think it reduces my CloudFront bill by 50%, if not more. I use it every day to convert fat PNG32 images into bandwidth and performance friendly PNG8 images. Awesome tool!

ImageOptim

ImageAlpha’s older and more popular brother. This app, as well, has become an important part of my daily workflow. And it’s a pleasure to use.

1Password

Removes the hassle of logging in to websites almost completely. A good example of an app that doesn’t get in the way.

Plug

An awesome OS X player for The Hype Machine. They just released version 2 for El Capitan, but I haven’t tested it yet since my main machine is still running Mavericks.

Mailplane

Last year, I think, it was on the top of this list. But as my email habits have changed, I now open Mailplane maybe twice a day and close it quickly afterwards.

Evernote

This was a pretty disappointing year in regards to Evernote. Most of the time whenever I would start the app the whole UI would become unresponsive until the synchronization with the server would be complete. But lately I noticed this issue is gone, so in 2016 I hope to use Evernote more than I did this year.

CodeKit

I wanted to use Sass, but not learn how to use Gulp or Grunt or other task automation tool. CodeKit fit the bill.

SourceTree

My Git client of choice. Does a lot more than I need, but without getting in the way.

Skype

The only video calling app that still works on my parents’ first generation iPad. And I use it mostly to talk to them.

Integrity

A pretty handy app if you’re running a website that links to a lot of external content. I use it once a week to check for dead links and other issues.

The process wasn’t much different either. We had two Skype calls a few days before the hackathon in which we discussed some ideas. And, like last year, we chose one by Maarten: a web app that turns GitHub milestones into fun countdowns.

Saturday

We set up a Slack account in the morning mostly because I chose to work from home, while the other guys gathered at Maarten’s place. My initial plan was to have some “proto-design” ready by noon and then meet the rest of team to talk about it. As a side note, I don’t think it’s a bad thing to show unfinished work, especially when you’re on a short deadline.

Unfortunately, design is not always easy to schedule. Sometimes you’re not lucky and a good idea takes longer to show up. But I respected my promise and at 12 o’clock I showed the guys what I had.

No surprise when they said it looks a bit generic. So I decided to skip the in person meeting, which would have been a 2 hour round trip, and work on another idea I had. A good bet, ultimately.

By the end of the day we had a big chunk of this page implemented and we were back on track.

Sunday

I started the morning by continuing the HTML and CSS work on the milestones page, while the other guys were busy with sharing options and the public dashboards.

After lunch, I began designing the home page and we brainstormed a bit about the catchphrase.

By dinner time we had the big parts ready, so we spent the last few hours dealing with bugs and polishing the hard edges.

When the email came, a week later, I was as surprised as last year that we won. Maybe even more.

At the end of this article, there are mainly two things I would like to point out. First, having a designer on your team before entering a hackathon is probably a good idea. And second, with the right people, remote work can deliver good results. Even with short deadlines.

I would like to thank the Rails Rumble organizers, the sponsors and, of course, to everybody who voted for us. Thank you!

Here are some other projects of mine:

Front-End Front – A crowd-curated news website focused on front-end development
PSD Repo – Free quality PSDs available for download
Sketch Repo – Free, high quality Sketch resources

Our problem, as you see in the picture, was the icons’ presence in front of the links.

Ideally, an icon should become semi-transparent if it’s corresponding link was visited. The non JavaScript solution we thought of, comes in two steps.

The DuckDuckGo trick

I’m calling it so because I first saw it used on the DDG website. In short, they use two <a> tags and style the first one to be an icon. When someone clicks on the link with text, the <a> in front also gets affected. You can read more about this trick here.

But it was not enough in our case. As you may know, for privacy reasons, browsers limit the number of CSS properties that can be applied to visited links. Whether it’s text, background, or border, you can only change the color.

A note: yes, you can use only one link, but for certain layouts, like ours, it might introduce other problems.

CSS blend modes

Coming back to the issue, we still need to fade the icons somehow. Since, like I mentioned, “opacity” is not a supported CSS property for :visited, we have to simulate it.

This is where I can finally make use of my 10 years of Photoshop :). I know that if an element on a black background has a screen blend mode applied to it, it will be fully opaque. While if it’s on a white background, the element in question becomes completely transparent.

So in order to achieve the semi-transparency we were looking for, using a shade of gray as the background will do the trick.

You can have a better look at the code in the pen bellow:

See the Pen Styling :visited with CSS blend modes by Stelian Firez (@stelianfirez) on CodePen.

Here are some other projects of mine:

Front-End Front – A crowd-curated news website focused on front-end development
PSD Repo – Free quality PSDs available for download
Sketch Repo – Free, high quality Sketch resources

No surprise here. Same as last year, I use Mailplane to manage my Gmail accounts and, occasionally, Google Calendar.

Mail

I use the default mail app on OS X for all of my non Gmail email accounts. It’s easy to set up, free and it doesn’t cause any problems for moderate usage.

Sublime Text

Having written more code this year than in last two or three combined, Sublime was at the center of my workflow. Reliable, fast, flexible.

Sketch

I’ve used it to design Front-end Frond and a few other projects. It holds pretty well. To be honest, I don’t miss Photoshop at all.

Twitter

Because I started following more popular people, I became extra interested in Twitter conversations. Something Yorufukurou did not handle well. So I returned to the Twitter default app.

TweetDeck

Departing from Yorufukurou wasn’t easy. I still had to cover a very important feature: Twitter lists. Luckily, TweetDeck does that very well.

1Password

I have about 150 logins in 1Password. And although I can figure out all of the passwords for these accounts, I wouldn’t want to type them in. For me, 1Password is mostly about convenience.

Evernote

My biggest use of Evernote is for writing down ideas and recipes. Not food recipes, but more like rough tutorials authored by me. How to do things that I only do occasionally.

Pixelmator

It does a great job at covering my modest needs for graphic editing. There’s even an iPad version of Pixelmator that was demoed at the Apple Keynote in October.

Transmit

My favorite FTP client. Although, I think I’m using it more for transferring files to S3 than for FTP. The fact that you can set custom headers when uploading to Amazon’s data storage service, is one of the things I love most about Transmit.

Skype

Living in a different country than the one my parents live in, I use Skype to keep in touch with my folks. It’s pretty reliable, but its biggest selling point for me, is that it runs on the first gen iPad. Which my parents own.

Plug

It provides a very sleek interface for The Hype Machine. So Plug is the app I use every day to listen to music.

ImageOptim

I’m not sure if it needs an introduction anymore, but a short one would be “compresses images without losing quality”. I use it for every image I put online.

CodeKit

Although I’ve only started using in the second half of the year, CodeKit has become an important part of my workflow. Little or no setup required was the main reason I chose it over alternatives.

Here are some other projects of mine:

Front-End Front – A crowd-curated news website focused on front-end development
PSD Repo – Free quality PSDs available for download
Sketch Repo – Free, high quality Sketch resources

Link to the interview

Small clarification: The TV show about wrestling I’m mentioning during the interview was in fact about sumo. My memory didn’t do its job right. My apologies to all the Belgian wrestlers.

The Sunday before the Hackathon weekend

That’s when we had our first team meeting. Maarten, who I already knew, contacted me a few days before, but Sunday evening was the first time ever I’ve talked to the other two team members, Dale and Anthony. And not even in person, but on Skype. Being a kickoff meeting not a lot of things were decided. We made a Google Docs document for everyone to write their app ideas and we scheduled the next call for Wednesday. That’s pretty much how the evening ended.

The 2nd meeting

It was even shorter than the first one. Maarten had this idea about an app that would scan open source code on Github and return a list of issues for a certain project. This way, anyone interested in contributing to open source would be able to discover code that might benefit from improvements. He even had a name for this app – RefactorCop.

It didn’t take long before we decided this is what we’ll be working on. How we’ll be working was not really a problem either: I was in charge of design and front-end while the others would do the rest: setup Heroku, code Ruby on Rails, configure Rubocop, integrate my HTML and CSS, etc. We even had a place where to work. Anthony put his famous garage at our disposal. The guys accepted, I sort of declined. Moving my iMac seemed a bit of a hassle, but I promised to visit them on Saturday, so we can talk better. Fun fact: I found out that Anthony’s house is within walking distance of where I live.

The Hackathon: day 1

Starting earlier on Saturday morning, the first idea I had was to use the newer Robocop style. But as I was arranging the elements on the screen, I realized the theme was a bit dark, maybe too “robotic”. So I thought I should try something else, spend a couple of hours to see if I can come up with something else. This time I chose the classic Robocop as a starting point and went for a friendlier color scheme.

Once I had the two half of homepages ready I put them on Skype and went to the garage to talk to the guys. By the time I got there they already had a favorite. This helped a lot because in the next hour we managed to establish what other information will be displayed on the homepage and how many more pages need to be designed.

So I returned to my iMac, got the front page design finished and began turning it into HTML code. Which I had ready around 12PM. Not longer after that I went to bed. The other guys kept on coding tillmorning.

The Hackathon: day 2

Again, I woke up early in the morning and as soon as I did I just started putting some color and setting the fonts on the wireframe we drew a day before in the garage. By the time the developers woke up I already had the project page designed. We decided it was OK, so I began writing the HTML and the CSS.

Later, in the evening, about 6 hours before the Hackathon ended I went to join the crew in Anthony’s garage. At this point we were just polishing things, fixing bugs, adding last minute features, pretty much enjoying the whole thing. An hour or so before the deadline “Code Freeze!” was declared and we ended the Hackathon with a glass of bubbly.

I would like to show my appreciation to the Rails Rumble organisers, the sponsors and all the people who voted for us. Thank you!

Here are some other projects of mine:

Front-End Front – A crowd-curated news website focused on front-end development
PSD Repo – Free quality PSDs available for download
Sketch Repo – Free, high quality Sketch resources

• Bill Burr’s Monday Morning Podcast
• You Are Not So Smart
• Accidental Tech Podcast
• Debug
• NPR: Planet Money Podcast
• Stansberry Radio
• The James Altucher Show
• Trend Following with Michael Covel

Sometime in April, I’ve been contacted by the nice people from Ibuildings if I’d be interested to give a presentation at the upcoming Dutch Mobile Conference. I said ‘yes’, so a month from now I’ll be in Amsterdam speaking about Web Performance Optimisation.

To give you a better idea of what to expect, here is the structure of my keynote:

• In the beginning of the talk I will try to make some strong arguments, backed by numbers, why Web Performance Optimisation is still extremely relevant and how it helps users and businesses as well.

• Afterwards, my focus will shift towards listing the most effective optimisation techniques and explaining how they work. I will also share a number of tools that help automate these techniques. This will be the core of the presentation.

• The final part of the session will be dedicated to discussing the new challenges of web optimisation and how to make better use of a device’s capabilities.

Besides me, obviously, there will be other talented people that will speak about various topics, so if you decide to attend DMC14 I’m sure there will be plenty of interesting things to see. In the meantime you can get tickets here.

The best presentation I attended the first day was JavaScript ♥ Unicode by Mathias Bynens. Although the topic was a bit obscure, Mathias, besides being a great developer is also a talented speaker, so the talk was both informative and entertaining.

Another keynote that interested me a lot was given by Sakri Rosenstrom. He shared a few tips and tricks on how to improve the performance of HTML5 Canvas, something that I’m currently using on a project.

Day 2

For me, the most anticipated part of the second day was Bert Timmermans’ presentation: “Gotta code them all, a Pokémon and HTML5 love story”. While I used to work with Bert and have seen various demos before, I was really curious to see the progress on his project – writing a Pokémon game in Javascript. The highlight of the talk was, obviously, the demo. Which I think impressed everybody. Well done, Bert!

Somewhat surprising, because I almost skipped it, the talk that, let’s say, inspired me the most was the one from Dominic Wilcox. Dominic is an artist that makes wacky and interesting things. But it was not his work that stuck with me, it was the fact that people were talking about it and even using it. So what I realised at the end of his presentation was that almost no matter what you do, the internet is a pretty big place. And almost always there is a group of people that will be interested in what you make. You just have to make something and put it out there.

Here are some other projects of mine:

Front-End Front – A crowd-curated news website focused on front-end development
PSD Repo – Free quality PSDs available for download
Sketch Repo – Free, high quality Sketch resources