Give Firefox Developer Edition a shot

December 14th, 2014

When it comes to browsers, I switched back between Firefox and Chrome for browsing the web. Both have their good features and their bugs that annoy me which are the things that usually cause me to switch. And although one of them is created by a massive corporation, both browsers have changed the web for the better. But for the last couple of years at work, I’ve been using Chrome as my main browser for development mainly because of Chrome’s Dev tools which I like just a little bit more than Firebug for JavaScript work. But I’ve switched to Firefox ever since they released the Developer Edition.

What’s the difference between it and Chrome or it and then regular version of Firefox? There’s a bunch of stuff for FIrefox OS devs but since I haven’t worked on anything for that platform, all I can really say is that it looks like they’re useful features. The things that just out at me as a front-end developer is the Dev Edition are it’s light, so it loads up nice and fast, something I can’t say for the other versions of the browsers I use. Although that might be partly my fault considering the add ons I’ve installed over the years. The built in developer tools, especially the console, have become just as good as Chrome’s, at least in my opinion. They’re quick and light, which when you’re working to debug something makes life a lot less frustrating. My workflow usually involves me reloading a lot and having to sit and wait gets old pretty quickly.

But has really jumped out at me is one thing. In the inspector next to some DOM elements you’ll see a little grey box with the letter “ev” in it. Click on it and get this:


It shows you every single JavaScript event tied to that element. How sweet is that? I’ve found it an amazing feature at work when I’m helping someone debug a page I’ve never looked at before. Bring up the inspector and you can look at everything that‘s running and where it’s called. Plus, it makes it a lot easier when you’re looking at a site that has some cool feature or effect that you want to figure out how to do.

It’s a small difference but really all the browsers are so close now that it comes down to a matter of personal preference when pick which one you’ll use regularly. Give Firefox Dev Edition a show. I find the best way to figure out if something is actually useful or not is to use if for a week minimum. I did that and now I think Firefox Developer Edition will be my go to development browser for a long while.

Seriously, the internet is amazing

June 24th, 2013

I can remember a time when there was no World Wide Web. I can remember when I had one friend that could access it. I can remember when it took all night to download a couple of songs. I remember when streaming a live audio cast required luck to got more than 5 minutes without it cutting out and needing to buffer. I can remember when you had to pick Real Player, Windows Media Player or Quicktime to watch a video and they might not all be an option. I remember when you were lucky if the video was large enough to actually see what was going on. I can remember when you have to pick between Altavista, Webcrawler or Excite when you wanted to search for something. I remember when the idea of accessing the Internet while you were in the middle of a field was something that happened in sci-fi shows.

I think the web is amazing. I think we all take it a bit for granted. We live in a world where we can find out anything whenever we want. We can watch entire seasons of TV shows in high def whenever we want. We can create and upload our own videos for free. Nearly everything I thought “Wouldn’t it be cool if we could…” when I was a kid has come true. We live in the future and I think we need to appreciate it more. All we need is flying cars, replicants and hoverboards and everything will be perfect.

I need to start coding in my spare time again

June 4th, 2013

Over the last few months, I’ve stopped coding for fun. There’s a couple of reasons why, I got to a point where most of the stuff I was looking into was getting complicated and after coding all day, I found myself not wanting to code when I got home. Another is I’ve really got back into fitness over the last few months and I’ve been getting used to working out twice a day finding the energy to do other things.

But I’ve decided to start putting aside at least ten minutes a day to code for fun. I was inspired by this post by Christian Heilmann about just coding. I might work on the same thing everyday or I might just mess around with something quick that I thought about on the way home from work. Really, the only rule is that I have to code for at least ten minutes everyday.

I’m also going to get back into blogging but unlike before I’m not going to make all my posts be coding examples like I tried to make a majority of them. I’m going to start posting more videos and links that I come across and also post my opinion about web development because I know everyone wants to know what I think about stuff.

Trust me though, nothing feels better than getting healthy and losing weight. Especially when your job involves sitting at a desk all day.

I think Firefox OS might have as big an impact as the browser has

April 14th, 2013

I love HTML5, I love CSS and JavaScript. So when Mozilla announced Firefox OS or Boot2Gecko as it was called then, you’d think I’d have been excited about it. But at first all I could wonder was why? Did Mozilla really need to get into the ring with Apple and Google? Mozilla is awesome and I’m a huge fan but going up against the big guys like Microsoft and Google when it comes to making free browsers is a whole different world than making the OS that runs a six hundred dollar phone.

But then Mozilla explained that competing against the iPhone and Android wasn’t their objective. It was to make a smartphone for people that didn’t have access to or the resources to buy a cutting edge smartphone. That’s pretty noble and fits right into Mozilla’s vision.

As great as that is, that’s not what has me excited for Firefox OS. It’s the fact that it’s 100% HTML/CSS/JS and that you can access the OS code. Just imagine, you don’t like the way that the phone displays your contacts, you can just go in and change it to be the way you want. Have an idea on how you can improve something? Then do it yourself and put it online for others to use. Come up with a cool little app that would be really helpful for you? Code it up and put it on your phone without having to download Xcode or learn Java.

I’ll be honest with you, I might be a little biased. I’m a huge Mozilla fan and Firefox is my browser of choice. ( If Mozilla needs an awesome JS dev, they should give me a shout :) ) And I’m not sure how Firefox OS is ultimately going to compare to iOS and Android in terms of features but I think it’s a fantastic example of what we can do with HTML5 and JavaScript. Plus, the more competition there is out there, the better it’s going to be for everyone.

One Game A Month. I’m doing it.

April 4th, 2013

If there’s one thing I really suck at, it’s finishing personal projects. I don’t even want to know how many barely started projects and games I have on my hard drive. So, as a challenge to myself to start finishing what I start, I’m going to tale part in One Game A Month. And I don’t plan on this being a one month thing, I plan on doing it every month.

There’s no rules to this thing, you can use whatever tech you want, Flash, C++, Unity, etc. But, in what should come as no surprise, I’m going to make my games using HTML5. In all my HTML5 game tutorials and experiments, I’ve made shooter games, so for the first couple, at least, I’m going to try to make other types of games, like platformers or puzzle games. And I’ve told myself, even if the game looks like crap or barely works, I’m putting it out there. This why I’ll put my all into it because I want to prove to myself that I can do this.

What do I hope to gain from this besides forcing myself to finish what I start? I want to become even better at writing JavaScript. I want to use other web technologies, like local storage for saving scores. ANd I would love to work my way up to making a game using WebGL. And I’m telling everyone about this so that I can hold myself accountable if I don’t do it

JS Bin has become essential to me

February 24th, 2013

Something that has really helped me improve my workflow over the last year or so has been JS Bin. The ability to just test some small snippets of code without having to create a new file the leads to me ending up having a full desktop has really helped me out. And I have to admit, I’m really surprised at how many developers I’ve talked to that haven’t heard of it or any of the similar web apps out there. So what does JS Bin do for you and why do I love using it?

JS Bin really does two things that I find make it indispensable. The first is, while working on a large JavaScript file, I usually come up with a little snippet that I want to test, but I don’t want to start writing test inside that file. As I mentioned earlier, it can become a pain when you’re creating new JS files that have 10 lines of code just to test something. So, if I have an idea, I can just open JS Bin and take a quick look at if my idea will work. Or I can take some code that’s not working and just concentrate on it without have the 500 other lines of code there to distract me. Which leads me to the second reason I really like using it.

Everything thing you create has it’s own unique URL, so if you’re having a problem with some code, you can create a JS Bin for it and send it to someone to take a look at. A few times, I’ve had someone at work show me a problem they’re having, so I create a JS Bin and when I figure out a solution, I can just send them the URL and they can take a look at what I came up with. Plus, it has the feature of saving all your bins if you’re logged in, so you can always come back later and take another look.

JS Bin isn’t the only one of these out there. There’s JS Fiddle which is good but I’ve found it to be a bit buggy when you’re using Firefox. And I find the four set panels can be a bit annoying sometimes, especially when you just want to write some JavaScript and see what it spits out in the console. JS Bin allows you to open and close panels so you only see the ones you need.

There’s also Codepen but because it shows all your pens publicly unless you have the pro version, I feel it’s more for showing stuff off than for writing little tests. It is the best looking one, I’ll give it that.

If you need to test HTML, CSS or JavaScript then definitely use one of these. It’s a great way to test code and share code. And thank Remy Sharp for creating such a useful tool and letting us all use it for free.

There’s a definite cycle to web languages and technologies

February 13th, 2013

I don’t think there’s a lot of industries with a rate of change like the web. The code you’re writing today and the language you’re using might not even be on your radar anymore a year from now. And every time something new comes out or becomes popular.the same basic cycle seems to happen. For a front-end developer like me, it started with Flash, then jQuery and most recently CSS3.

First it starts with some introductory blog posts and articles. Then a flood of tutorials as people discover more and more of what you can do. Next is the how you should do things posts. And the last stage is the complex stuff and this is when people start to drop off. There’s a couple of reasons, some devs don’t have time to dig into the really complicated stuff just for fun and other people just don’t want to go there. They just want to use jQuery to make an image slider not a huge app.

When I first came into the world of web development, Flash was the cool thing and I wanted to be a part of it. I missed the beginning tutorial period but a lot of them were still easy to find and the really cool, more complex stuff was being made. ActionScript 3 came out and suddenly you needed to be a hardcore programmer or a part of a team to make anything really cool. And all the tutorials were about features the average Flash dev wouldn’t use that much. Take a look at gotoandlearn and see how it goes from something simpler like 3D Logo Animation to ByteArray Image Decoding.

After Flash fell out of favor, jQuery became the new hotness and there seemed to be daily jQuery tutorials. In fact, I think Nettuts lived off jQuery for a year or two by putting up a video every couple of days. I know I did almost every one of them. Plus, you had sites like jQuery for Designers. Of course, once all the tutorials about jQuery animations and selectors that could be made, were made, things slowed down. Look at the last time jQuery for Designers was updated. And who can blame Remy, what else is there to talk about? Just the more complex features of jQuery, nothing that designers would care about.

But, if you’re like me, while jQuery is really useful, to keep your dev cred you needed to start writing vanilla JavaScript. There was a flood of Reintroduction to JavaScript and JS for Beginners posts. Then articles talking about advanced JS and explaining the weird crap JS likes to do. And then there was the complex JS articles and ones explaining why you shouldn’t use jQuery for web apps. In fact, I think because JS had become the main scripting language of the web, we’re going to be getting these articles and posts for a while yet.

I think the CSS3 cycle was smaller than the others, mainly because there isn’t as much to learn. After the intro articles, there was the how we should use the features ones and now there’s the odd, hey this is supported now ones. I’m pretty sure in the next year or so we’ll be seeing a lot of flex-box tutorials and if variables get added, I’m probably be among to people figuring out every little thing we can do with them.

What’s the next big thing? I’m not too sure. I thought maybe Dart might interest people but if you don’t work at Google, I’m pretty sure you forget it exists. TypeScript might have a chance but I don’t see compiled languages being popular amongst devs that just want to add a popup or an ajax call to their site.

I’ve finally learned I don’t need to write all the code

February 11th, 2013

If there’s one thing it’s taken me forever to accept I should be using, it’s JavaScript frameworks. I’ve been working with Spine.js and I’ll admit, at first, I didn’t see the point of it. The basics of the app had already been written, I’d just taken over to finish up and add some new features. And for the first while, all I could think was, I could have written this without the framework and then things would be exactly how I wanted them. But after it took me a couple of minutes to add new features because the framework did all the heavy lifting, I finally realized just how great frameworks can be.

It’s not because I thought I was smarter or a better coder or something like that. I didn’t want to use them because I wanted to learn. Writing an app from scratch can be an amazing learning opportunity but unfortunately, clients don’t always have the time for you to learn. And, think about it, if you chose the right framework, is the code you write actually going to be better than the stuff that’s in the framework?

And that’s one of the problems, isn’t it? Which framework do you use? I used Spine because the app had already been started but I do like it. I’ve done a few AngularJS tutorials and I have to admit, I like that too. But I’m not too sure about all the extra markup you have to add to the HTML. But at the same time, does it really matter if you’re building an app? You might as well go all in. Plus, AngularJS is made by some guys at Google and they seem to know what they’re doing.

I’ve also noticed something over the last week or so, mainly on Twitter. A lot of the JavaScript developers, whose opinions I trust, have been commenting on all the new frameworks being released. The opinion seems to be most of the new frameworks are the result of people not understanding the existing ones and now the market is getting saturated. Will something rise to the top like jQuery? I’m not too sure because people seem to be a bit more attached to frameworks than to libraries like jQuery.

So what’s the point of my ramblings? Don’t be afraid to use a framework if you’re building something complicated or something that you need to get done quickly. But do some reading first and pick the one that works best for you. I’m partial to Spine because it’s light and if you’ve used jQuery, then you’ll be used to how Spine handles things like events. And like I said before, I’m interested in AngularJS. Watch some of the videos on the site and you’ll be amazed at how simple it is to get some basic functionality set up in your app.

Use Chrome’s Developer Tools to check for event listeners

February 7th, 2013

I don’t know how long this feature has been in the Dev Tools but I know it’s something that I could have used a few times over the years. When you inspect an element hidden down in the corner underneath the “Styles”, “Properties”, “DOM Breakpoints” among others, is the “Event Listeners” panel.


Ok, that’s pretty interesting but why should you care? Well, I’ve had a couple of situations where this could really help out. First, I’m sure everyone that’s written JavaScript has assigned a click event listener to an element and when they clicked it, nothing happened. So they went over their code trying to figure out why the code wasn’t firing when the element was clicked only to figure out that they’d made a spelling mistake and hadn’t actually assigned the event listener to the element. Now you can just check the element right away to see if there’s actually an event listener assigned to it.

Second, there’s be a couple of times where I’ve added a click event to an element and nothing happens or something other than what I wanted to happen happened. Turns out it had another click event assigned to it and that one was overriding it. Something that took me forever to figure out would have taken me five minutes if I’d checked it using the Dev Tools first.

Again, I’m not sure if I’m late to the party on this but I didn’t know about it until I watched Secrets of the Chrome Developer Tools a few days ago. But this is definitely something that every front-end developer should have in his or her tool kit.

Plus, you can use it to take a look at all the event listeners jQuery adds when you assign a click event to an element.


It’s 2013, why is making HTML emails still the most frustrating thing to do?

January 27th, 2013

If there’s something that should be insanely easy, it’s making an email with a pretty simple HTML layout. But instead we’re forced to code something like it’s 1997 using tables for layout. I’m not asking for full CSS3 support just being able to use things like absolute positioning, floats and background images.

A majority of the audience for the emails I build use Outlook which use Word to render HTML. That’s right, in 2013, Microsoft uses Word to render HTML in emails while telling us how awesome Internet Explorer is now. They claim it’s for security reasons but I’m sure there’s a way to use IE to render the emails while still maintaining good security. I’ll be honest, I have zero idea how any of it works, but I’m sure they can allow HTML and CSS support while blocking JavaScript.

What’s really frustrating is that what’s not supported seems completely random sometimes. The last time I checked, Gmail didn’t support background images and for some reason Yahoo Mail strips out margin from paragraph tags which can completely mess up the layout of even the simplest email.

Of course, this is the reason for all the testing options you get with a service like Mailchimp and there’s also the HTML Email Boilerplate. But if the major email clients just gave us decent HTML and CSS support we wouldn’t need them.

If you don’t have to build HTML emails then you’re a lucky person and those that do it everyday, I don’t envy you (unless you’re getting paid crazy cash for it!). Hopefully, this improves in the future because really all we need is the basic CSS support even IE 7 has. Because I would love to be able to make a basic layout, put into a mass email service and press send.