Wrapping Titles and Phrases as a Whole

More and more practice with responsive web design has been introducing a plethora of nuances as I go along. One interesting thing I have run into has to do with the way text wraps when testing at different viewport widths. For single words, we can use the attribute word-wrap: break-word; to wrap them (particularly for longer words) as a whole to the next line. What if we have an entire phrase and we don’t its words to be split to different lines?

Consider the following inline list of movie titles:

Young Frankenstein, Madagascar, Back to the Future, The Last of the Mohicans, Star Wars, The Shawshank Redemption, Big, Gone With the Wind, Anchorman, Beaches, A Night at the Roxbury, Animal House, The Great Gatsby

I find that when the title of a movie breaks to the next line, it can be a little annoying to read. A very simple solution to guarantee that the whole title of each movie will not split into new lines (unless the viewport itself is too narrow to fit the whole title) is to wrap each title in a <span> tag using display: inline-block;. Here is the movie list updated so that each title wraps as a whole:

Young Frankenstein, Madagascar, Back to the Future, The Last of the Mohicans, Star Wars, The Shawshank Redemption, Big, Gone With the Wind, Anchorman, Beaches, A Night at the Roxbury, Animal House, The Great Gatsby

The titles are now a lot easier to read! I have wrapped each title in <span class="movie-title"> where the "movie-title" class has the attribute display: inline-block;. Adding this class to a dynamic application via a loop would be a breeze.

Class for Show, ID for (win)Dow

As I strive to be a diligent and disciplined developer, I am always looking for ways to improve my coding methods and development processes. I tend to take algorithmic approaches to methodology. I have thought a lot recently about proper use of Classes and IDs in writing my HTML, and there has never before been a black and white answer to when I should use which.

Class or ID?

In general, most developers tend to stick with the classic definition of Class and ID. Classes are typically used when an element might appear more than once on a page so that the CSS only need be written once to affect all elements with the same class. IDs are typically used when an element is unique to a page and will only be used once on that page.

The aforementioned definitions of Class and ID usually cover most of the bases. However, there have been enough times when I thought I should apply an ID to a seemingly unique element only to realize I want to reuse it later on on another element, warranting giving the decision process a second thought. I am still a fairly new front-end developer, but now that I have been spending a great deal more time working with JavaScript, I have found a new solution.

Classes for Style, IDs for JS and the Window

Besides their assigned definitions, what are the real differences between Classes and IDs in practice? Really, the only difference is the fact that an ID can be used as a “hash value” for a URL. This means that www.myurl.com#my-section will load www.myurl.com and will automatically scroll the window down to the element with the ID of #my-section.

OK, so the browser cares which attribute you use, but what about the CSS? No. CSS doesn’t care whether you use a Class or an ID as long as you match the dot or hash symbol with the appropriate attribute in the HTML. And JavaScript? Well, JS does care a bit. JS knows that IDs are to be unique and that Classes should be grouped together, so when I need to access a single element with JS I’ll just create and ID for it. This does not eliminate the need to access multiple elements via their Class name, but the need for this seems to always come without ambiguity.

Styling an H1 tag? Use a Class. Use JS on one <nav> but not the other? Use an ID. Manipulate the JS Window Object to focus on an element? Again, use an ID. Maybe (hopefully) sometime in the future I will find a problem that makes me re-think my method. For now, this is my algorithm and I’m sticking to it!

Langton’s Ant with jQuery – Version 1.0

Langton's AntI have finished my first version of Langton’s Ant using jQuery. You can learn about Langton’s Ant here. I was inspired to write this program by one of my favorite YouTube channels, Numberphile. I am quite fascinated by many aspects of mathematics, and I thought this would be a great way to explore the phenomenon myself.

In short, Langton’s Ant is a cellular automaton that follows some very simple rules. If the ant lands on a blank square, it fills in the square and turns 90 degrees counter-clockwise, and if the ant lands on a filled in square, it makes it blank and turns 90 degrees clockwise. The idea that intrigues me the most about Langton’s Ant is that even though the movement is based on just a few simple rules, the outcome can never be predicted unless one works back from a certain arrangement of squares after a certain amount of time. There is no (known) formula for generating the end result of filled squares!

Please check out my version of Langton’s Ant here.

Features to Add in Version 2.0

Here are a few features I plan on adding in the next version:

  • User Controls (start, stop, single move)
  • User Input (starting direction, number of moves, grid size)
  • Manual Grid Setup (clickable squares to turn ‘on’ or ‘off’)