Math Is My Friend
I am working on a website that uses a very large grid of pages that are shifted around to display content. I am building a map that lets you navigate to any rectangle on the board through a simple grid box.
The HTML is laid out in a simple list. The opening ul and then 44 li tags with nothing inside. This structure is styled with CSS and then each of the 44 rectangles sit nicely in a 4×11 grid.
With jQuery it is easy to get the index of a clicked element, what I really need is that element’s position in the grid. Specifically the row and column that it is in.
I spent some time thinking about the best possible solution and after trying to normalize the numbers, I remembered that I could use remainders!
Here is the code I used, it works like a charm. If you have a different size grid, replace the proper number and you are all set.
To MXML Or Not To MXML, That Is The Question.
Just this past week I began to delve into the wonder and beauty that is Flash Builder 4 beta. There seems to be some confusion around the Flex/Flash Builder family but to me it is very clear. Flash Builder is an IDE that features a flash compiler along with a MXML compiler, a design mode and code editor that enables quick and easy use of the flex (and other) components. Flash Builder understands the needs of an object oriented programmer and the program contains a project management component that I have only yet begun to tap. The MXML language is an interesting hybrid of XML and HTML. The best way I could describe MXML would be that it is web design for an object minded designer/programmer. The most attractive feature of the language is how easy it is to lay out an entire application in the visual builder but also how efficient it is to link the visual components to hand coded methods and properties.
Another interesting aspect of MXML is that it is forcing me to carefully consider my public methods when designing objects. All of the interactive controls exist on the application MXML file, the event handlers are responsible for calling methods that are buried deep inside the main program code. I need to spend some more time learning about the Model View Controller design pattern because it seems that MXML encourages this.
I am excited about using MXML as a front end for my generative art projects. It will save me tremendous amounts of time by reducing the need to design and code control components. I believe that it will also help me get my projects off the ground in less time, leaving more time free for new experiments! I have been reading debate about MXML and it’s usefulness and I agree with some of the dissenting opinion. MXML is great for rapid application development but in some situations, it does encourage sloppy coding. Someday in the near future, I plan to design and code my own set of components in favor of pure AS3 applications and programs.
Forget You Mr. Clear
I am always in awe of the talented and clever individuals who drive the web design/development movement. In 2006 I read an article about the coming web 3.0 and all of the greatness that it entails. Web 3.0 will not represent the dramatic change from the static pages of the webs origins to the database driven, dynamic monster sites that we frequent today but it will represent a fundamental change in the way we search. Web 3.0 is the semantic web. It is a network that understands the nuances of human language and enables us to search and identify valid, useful information in a sea of search results. Microsoft has an ad campaign for their Bing search engine that illustrates the frustration many people experience while attempting to search. Search engines now deliver “cloudy” results that are peppered with useless information, obscuring the valid results. It can be theorized that part of this problem is the idea that search engines index information, but really have no deep understanding of the content that is being indexed.
It was not long ago that HTML pages were a thick soup of content and presentation. In today’s modern times they are getting much more organized, but there are still unnecessary tags that must be used to “hack” the site into behaving or to properly accomplish a certain visual. Floats are one of the problems that introduce extra markup into the page, muddying up the beautiful content. Since the beginning of my web design days, I have been using an extra div to clear my floats. Just this morning I learned that a break (br) tag is an acceptable way to clear a float. This made me smile a little bit as the break tag would never contain content so it is an appropriate alternative to the div for this situation. Moments later my mind was blown when I was taught that we can skip the extra markup if we add a simple “overflow: auto” to the parent container of our floating elements.
Beautiful. Style where it belongs, in the style sheet.
Read more about this wonderful technique at http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
My only regret is that this technique has been understood for over a year and I am only just now getting on board.
Debugging A Blog With The Chrome Element Inspector
I am new to WordPress but I am familiar with the structure of the application. CSS is a beautiful solution to what was a very troublesome problem and this is no more evident than in WordPress. There was one point in time where web pages were big static pages full of soup. This soup was a mix of all the information that a browser needed to display a page. It worked, but under the hood it was very messy. In modern times, presentation and content are two very different beasts and must be brought together with careful measures. You wouldn’t have the ringmaster live with the lion, you just bring them together at showtime to dazzle the audience.
CSS is the ringmaster and our content is the lion. We let the lion out of the big database and the ringmaster makes it perform. This setup makes it easy to pull the ringmaster aside after the show and criticize or change his performance without the lion watching you with it’s hungry eyes.
This morning I noticed an issue with the comment list element in my blog. It seems that the layout was broken and the text of the comment was placed higher than it should be. As a result, it was visually overlapping another element in an unappealing way.
So now that we have identified the problem… lets work out a solution. I have been using Google Chrome lately. I think that it is a snappy little browser, and it has given me very little trouble thus far. Chrome has a nice little debugging feature built into itself called the Element Inspector. It allows you to “Inspect” a compiled DOM and view applied CSS rules. The difference between the information given by clicking “View Source” and the information given in the Element Inspector is that the “Source” is what the page looks like before any dynamic information has been loaded. This means that if you are loading a bunch of comments out of a database, they will not show up in the source and it will be difficult to determine what rules are being inadvertently applied.
I know that my problem is in the comments, so I bring up the Element Inspector and navigate to the broken comment in the DOM view. When I select a HTML element it brings up the CSS properties that are being applied to my selection. The “computed style” displays all properties that are being inherited by the selected element while the next list down displays the name of the id or class that the element is using. While inspecting the margin property I can see that the top margin is listed as negative 125 pixels. It seems a little odd to have a negative margin in this situation so I believe that it must be the culprit. To test this theory, I am able to use the Element Inspector to turn off the offending CSS property.
My suspicions are confirmed, it was the negative margin causing the visual error. Armed with my new information, I confidently open up my style sheet and make the necessary changes. Because the Element Inspector gives me the full name of the rule that contains the offending property, I am able to navigate the style sheet with ease.
After locating, changing, saving and uploading my blog is looking good! I was able to isolate and fix my problem with minimal guess and check. As I begin to work on more and more projects that revolve around or resemble Model View Controller structures, I am realizing the need for a solid set of debugging tools. While the element inspector works wonders for CSS and simple issues, I should be on the lookout for a more robust set of tools. Tools aside, the steps are all the same.
You have a problem.
- -Identify the problem.
- -Research a solution.
- -Test in a safe environment.
- -Implement the solution.
- -Cheers.
