Tag Archives: programming

What Makes Front End Coding So Difficult (or HTML Black Magic)

24 Friday Feb 2012

Posted by in On Technology

≈ Leave a comment

Tags

, ,

Do you know what front-end programmers dream about? It is not an answer to the national debt, or if Democrats and Republicans can get along, or even if there is life on other planets. No, front-end programmers dream of something that seems entirely more difficult to attain.

A front-end programmer wants a world where they can do their work one time and be done.

It sounds simple, doesn’t it? Most of us go through life completing a task and knowing that having completed the task, there is nothing more to do.

Not so for the much maligned front-end programmer. Before I take you too deep into their dark, esoteric world of angled brackets, cascading styles and the abomination that is javascript, it will be helpful to know what a front-end programmer is.

I am sure there are many different definitions, but at MINDSCAPE, our front-end programmers take the pretty designs from a designer and turn it into the code that displays the website in a browser. It is not enough to take the design, turn it into an image and put that on the Internet. Once upon a time the world was that simple. But it’s not 1995 anymore, and our clients want to be found on the Web by their visitors. So, our front-end programmers must turn the design into hundreds of lines of code so that automated bots can crawl the site and index the content found there.

Our front-end programmers work their magic with HTML, CSS, javascript, flash and a number of frameworks and standards that help them do their work better.

It may not be simple, but it’s a fairly straightforward process. Or so it seems, until the first time they open up the webpage they just built in Internet Explorer. That is where things start to get messy.

You see, there are a lot of browsers out there. A browser is the program you use to see the Internet. Google Chrome, Firefox and Safari are a few of the modern browsers. They are considered modern because they support many of the features from the latest HTML standards (HTML 5) and CSS standards (CSS 3). The new standards allow our front-end programmers to do really cool stuff. And when not doing cool stuff, it helps them do the mundane tasks very quickly.

Well, Internet Explorer is a bit behind the curve, and that’s sort of an understatement. So our front-end programmers find themselves in a bind. Do they build the website to use the latest and greatest technology, or do they build the website to work in what is somehow still the most popular browser (see stats at StatCounter)? And if they choose to build the website for Internet Explorer (IE), do they optimize it for IE 6, IE 7, IE 8, or IE 9. You see, each version has its own interpretations of the standards. So what you build for one, is not going to work for the other.

Perhaps you begin to see why the ritual of making a site work in IE usually begins with animal sacrifices, pounding drums and incense. It’s another reason they make us work in the Pit.

Alright, so we don’t have to go quite that far. However, there are additional wrinkles to contend with. You see, we want to make our websites so that it is easy to extend them to work on mobile devices. Most new mobile devices, thankfully, use browsers that handle the latest CSS and HTML. That allows us to build a version of the site that works for both mobile and desktop with a minimum of additional effort beyond building the mobile site styles.

In the end, our front-end programmers must build the same site multiple times if we are going to make it compatible with all possible browsers. That means each site must be:

A site for modern desktop browsers such as Google Chrome, Firefox, and Safari. IE 9 handles most of what these other browsers do, so that is a step in the right direction. However, many of the features are supported in different ways by each browser, so we still have to define rules in multiple ways.

A site for IE 8 and IE 7. These browsers are pretty close together, and most of the time standard HTML and CSS will work well with them. Either way, it needs to be tweaked.

A site for IE 6. Microsoft has finally announced that they will be killing off this browser, and the front-end world rejoiced. It’s a nightmare to work with, and for the longest time it was the most used browser in the world. Check out the Internet Explorer 6 Countdown website. IE 6 usage is less than 1% in the US now! Yay!

A site for mobile. Even though the browsers are standards compliant, we still need to design and style the site differently for the mobile space. It seems easy enough, until you realize that there are dozens of potential screen sizes between mobile phones and tablets.

Now, there are ways that we combat this without having to build entirely new sites for the different browsers but it involves trade-offs. For example, IE 7 and 8 will not have rounded borders when we finish the site. To make rounded borders, we have to create many small images to create the corner. On modern browsers, it is a line of CSS to create a rounded border. That saves us time and allows us to concentrate on hundreds of other details that make your site successful.

In the end, sometimes it is important that we fully support older browsers. In that case, we can make it happen but it takes additional time and costs extra money. If you know you need older versions of Internet Explorer to work, be sure to consult with your Web developer before starting the project.

And if you do ask him to do it and you hear pounding drums, see strange flickering lights and smell smoke coming from his room, do not go in. You don’t want to know what it takes to make it happen.

Advertisements

Life in the Pit (or How to Pamper your Programmers

19 Thursday Jan 2012

Posted by in On Technology

≈ Leave a comment

Tags

,

The office of MINDSCAPE at Hanon McKendry is located in the heart of Downtown Grand Rapids. It’s on the sixth floor of an old building next to Van Andel Arena.

When the elevators open on the sixth floor, visitors are treated to an open floor plan, a nice reception area, a nifty coffee bar, some fancy table and chairs for informal gatherings and a half-dozen nice cubes where information workers are busily executing strategies for website success.

It’s a great place to walk into, and a great atmosphere to work in. The free soft drinks, breakfast foods and a hidden cupboard full of M&Ms and trail mix add to the lure for workers.

But there is a hidden danger, one that the programmers who used to inhabit the cubes near the reception area found out first hand.

You see, the lights are really bright and cast harsh glares on their dual monitors. Co-workers and clients bustle to-and-fro past the cubes, catching their eye and interrupting their code flow. Phones rang, impromptu meetings and parties broke out at the coffee bar and the student tours gawked at the programmers, making them feel like white collared monkeys in a zoo.

MINDSCAPE’s merger with Venux in 2010 precipitated a change. We needed more room for the programmers and the six cubes in the entrance area of the sixth floor were no longer enough.

The programmers moved down to an empty office space on the first floor, and it fits their needs much better. Take a gander at the advantages they enjoy, and see if you can figure out why it is called the Pit.

A look at the “Pit”

1. No Lights – it’s true, this is an advantage. Fluorescent lights are harsh and being able to see your surroundings clearly only entices distraction.

2. Silence – it really is golden. The phones are used rarely, the inhabitants speak softly and everyone understands they walk on hallowed ground. Creation is happening and it is given the respect it duly deserves.

3. Privacy – it is hard to say if no one visits because they do not want to interrupt, or because it has been forgotten what office they are in, or if it’s the four digit combination lock on the door. Either way, the programmers thrive knowing they can put their heads down and get work done.

Programming Nirvana

4. Windows – There is a lot of natural light during the summer thanks to a number of windows along edge of the office. True, it sometimes brings too much light, but being able to see outside is a pleasant reminder that there is a world beyond the 1’s and 0’s on their computer screen.

It’s nearly a programmer nirvana, although there are some drawbacks.

1. Bathroom Breaks – Here’s a recipe for disaster: put eight intense, focused programmers in an office with no bathroom on that floor and only one key to access the bathroom on the next floor up. They aren’t concerned with simple bodily needs like waste disposal, so when the need makes itself urgently known, mad dashes for the key are inevitable. Then imagine it happens at eight in the morning on an overcast day in the winter. Ahh, you see the issue. There is no light. And there happen to be a lot of chairs in the middle of the room by the conference table. And there is only one key.

2. Communication – Sometimes it’s almost like the Pit is in another country and not just a short elevator ride (or walk down the stairs) from the main office. We had some communication issues for a while, but we are learning to overcome that through repeated training sessions with both the Morlocks and the lofty denizens of the sixth floor, the Eloi. Walking through the door into the Pit is not akin to entering one of Dante’s circles. Riding the elevator up to the sixth floor and having it open to a bright, vibrant atmosphere full of smiling, intelligent, bubbly people is not at all like their nightmare of showing up to do a presentation naked. It will take continual effort, but the gap will be bridged.

(If you ask me, any blog post that manages a reference to two classics like the Time Machine and Dante’s Inferno is a success.)