Things I've Tagged ‘Web Design’

Page 1 of 5

My Experience as A Front End Developer

Update: Just to clarify this, I see it more as a description of the fact that I am not happy with my level of knowledge rather than an indication of my total lack of it. I feel like this attitude is a motivator for me more than anything else.

It’s certainly no lie that I’ve fallen behind in my knowledge of the Latest & Greatest™ (best) practices emerging in the last year or so; staying abreast of new ideas in the world of development is without a doubt one of the toughest things to do in this profession–aside from the work itself.

What got me thinking about this was a post I read today from Mr. Noah Stokes about the advice he gave a young front end dev on how to expand his skill set.

The easy answer to this is to just do more work. Take on as many projects as you can. The more work you do, the more you’ll learn as you arrive at different problems and challenges with each project. How you solve those problems is how you build your skill set.

Noah Stokes, Advice for Up and Coming Front-End Developers

And that right there is the greatest challenge I face on a day to day basis. I’m simply not diving into code nearly as often as I should simply because my day job isn’t about building new things and facing new development challenges. In fact, I’m often working in some facet of design that does not require a single line of code. Instead, my job is about code maintenance, expansion, and refinement. How do I take legacy work and content and turn that into something built for modern consumption?

That in itself is a challenge, but not one that is at the bleeding edge of development work.

For me the most glaring weakness in my toolkit is my knowledge of JavaScript. I come from a php background so OOP (haha, php isn’t a good language) is not a foreign concept to me, but I am by no means a CS graduate nor was I particularly interested in the finer points of programming logic while I was building up my skill set. This has come back to bite me in the past two years as my chosen path is starting to require the knowledge, of and expertise in the use of, JavaScript.

My goal for 2013 is to make my weakness a potential strength. Perhaps that means posting a bit of code every week exploring some problem I have. Who knows, but the bottom line is, if I want to survive, I have to improve.

Another Numbers Revamp

A couple of years ago I put together a little program to generate random numbers for the Mega Millions lottery and produce some analysis on the numbers most often drawn. Most recently I wrote about a revamp I had done to the tool to simplify its functionality.

Well, I’ve done it again. I’ve completely redesigned the interface, and let me tell you, it’s quite nice looking. The functionality is largely the same, though slightly modified, and everything is done asynchronously, so it’s nothing flashy, but I like it just the same.

My primary reasoning for redevelopment was that I wanted to use this on my phone, but the older interface was just a little clunky. This works perfectly for this purpose–though, some more modifications need to be made to make it more of a ‘mobile web app.’ It’s also a little buggy in spots, but oh well. Explore the tool, use it, and enjoy!

By the way, I make no guarantees about the results, but if you happen to pick the winning numbers, would you ?

‘Font Awesome’ Icon Font

Icon fonts are apparently all the rage these days–and for a very good reason. They’re infinitely scalable, adjustable, and customizable. Anything you can do with text in css, you can do with icon fonts. Plus, they’re a light weight option when compared to icons from images. Their downside is minimal, but it exists; you’re not always going to get great results from older browsers.

I’m personally using Font Awesome, “The iconic font designed for use with Twitter Bootstrap,”1 as my icon font of choice even though I’m not using bootstrap as my theme’s base. These icons are peppered throughout the site, and to be honest this setup has kept me from using images in cases I would have in the past.

Implementation is pretty simple, but not necessarily contextually relevant. The code is not semantically correct mostly because you’re using an element containing no content, though I don’t find it to be a particularly expensive solution:

<div style="font-size: 1.125em; padding: 10px; background: #f3f3f3;">
    <i class="icon-hand-right"></i> icon-hand-right

Pretty darn simple, if I don’t say so myself. I highly recommend Font Awesome if you’re looking for an icon font on your website, and obviously doubly so if you’re using Twitter Bootstrap, as it’s built to work with it from the ground up. And hey, I use it.

Update: I forgot to mention that the reason this might not work is that it relies on the :before pseudo selector, which does not work in some older browsers.

  1. Font Awesome on Github. This project is quite useful.

More Responsive Changes

When I was first building/designing my responsive site, I based my initial efforts on a slightly modified version of Joni Korpi’s Golden Grid System. It served me fairly well to begin with, but the way the media queries were set up made the layout’s reaction to changes in screen size never look quite right.

Needless to say I needed to make it work, and so I kept a lot of the underlying code intact, but pretty much abandoned the grid that was in use in that system, and came up with something that worked a little bit better for me. This allowed me to set a static width for larger screens and then adapt a little more naturally for smaller sizes.

Which is precisely the point in systems like that. You take what works for you, then adapt and modify the rest to better fit your needs.

Making Changes, Responsive Experimentation

With all of the changes going on in my industry, the improvement and exceedingly common use of responsive design techniques, and my general evolution as a web developer I needed to take a leap forward on my personal site. Hard to sit back and see all that was changing, see my own skill as a developer improve, and not do something. The problem has always been time.

I’ve been sitting on this redesign since at least November, and have scrapped many an iteration since then, but the holiday season kept me busy, and quite frankly I was never going to finish this unless I just launched the thing.

So in all it’s glory this is what it is for now. I’ll be making several changes as I go, improvements in the details, making sure I get everything right, because right now, it’s a hot mess, and adding back a lot of important functionality that I’ve not included in this theme just yet.

This site is tentatively responsive, but not everything plays nicely at this time. I’ll get there, I’m new to this. I’ve based the grid on Joni Korpi’s Golden Grid System, and it’s been modified slightly to accommodate my needs. A lot of my needs, unfortunately, made creating a workable grid kind of tough, but it works mostly.

I have a lot of modification to go through on older posts once I get to adding my archive links and search. I stupidly used a hacky grid in the old layout.

Well, take a look around, let me know what you think.

WordPress Site Funtionality: Plugin or Functions.php?

If you’re developing websites using WordPress as your CMS, you’ve probably had to decide whether or not to create a plugin for that site’s functionality or to just dump it into your theme’s functions.php file. My solution used to be the latter, but lately I’ve found the former to be superior for one simple reason: themes are less permanent and more likely to be changed after you’ve passed it off to the client than a plugin. Hell, even I change my theme frequently enough for it to be an issue.

That news is likely old hat to you, but it took me a while to really see things that way. I’m not much of a serious developer, and so I don’t have extensive training or knowledge of programming models and logic, but I’ve always had an interest in it. Unfortunately, using object oriented programming wasn’t something that I understood how to do. Don’t get me wrong, I get the model, and how useful it is, I just never knew how to implement it logically, efficiently, and usefully.

I found, though, that as WordPress progressed, it was going to become quite useful to understand OOP on at least a basic level.

As it stands, I’m becoming heavily invested in developing for WordPress, and when I create a site now, I am generally going to be modifying the user experience in such a way as to require the creation of a plugin. This is to make sure clients aren’t doing something that breaks the site, or to shut down some unneeded functionality mostly, but occasionally I’m adding some handy widgets and custom post types.

Bottom line: if you need some Theme dependent functionality, the obvious choice is to keep it in the functions.php file, otherwise create a plugin to preserve that functionality across themes.