Tag Archives: css

Programming Challenges are With Me Everywhere I Go

image_712016 is shaping up to be a big year in the life cycle of Apoxe.   After letting some competing technologies battle for supremacy its time to re-evaluate the winners, methods, and techniques and vet them against core fundamentals of what Apoxe is so that it can move to the next level.

Taking Apoxe down to the studs so to speak has me excited and anxious to get in there and get geeky.  This reminded me of an article I read a few years ago by Joel Lee that I feel is still relevant and at least for me – reaffirms that I’ve chosen the right profession.  If any aspiring programmers are reading this, I highly recommend you take the time to let the following points sink in.  Its ok, I’ll wait… http://www.makeuseof.com/tag/6-signs-meant-programmer/

Each point made in his article about why you shouldn’t be a programmer rings true for me on some level.  For example, the first point “You Lack Experimental Creativity” made me chuckle because I can think of a few times that I spent hours coding, only to scrap it later because some revolutionary thought came to me later in the day.  I wasn’t that sad to scrap it, instead I was excited to try a different approach.   Or, You Want Normal Work Hours.   Just this past holiday season I was on the couch programming away ideas for Apoxe while kids were watching TV, and I found it very relaxing. Even in church I may have wondered from the sermon thinking about a lingering problem I wanted to solve.  Programming challenges are with me everywhere I go, and most of the time, I’m OK with that.

As I approach 16 years with TKG, and 20 years (holy crap) since building my first websites –  I feel lucky that challenges that got me hooked on programming and web development have been replaced with new challenges to continue to grow – and that the thought of getting in there to solve them continues to motivate me.

Image Credit

The Return of Frames

20 years in the web design business has allowed me to see a lot of change.

So, who remembers frames? You know that clunky, multi-document approach to leaving branding and navigation in place while the user scrolled?

I have fond memories of heated debates I had with our team years ago about frames. Believe it or not, I was a fan of the evil technique. I always felt that leaving navigation and branding in place for the user had some real value.

Navigation is essential for guiding users through a site’s content, and an effective and useful navigation must be accessible and intuitive. Frames allowed essential website elements, like branding and navigation, to stay in place while the rest of the website content moved around it. This made it easy for users to find what they were looking for, no matter where they were on a site.

Of course, I was never a designer or developer, so I didn’t have to deal with the nasty details of making a frames site work.  Let alone the mess that they made for the search engines if not done properly.

As it turns out, a little over a decade later, the concept has returned.  Today it’s done by setting a fixed position of elements from within the CSS.  It’s fair to point out that it’s much cleaner this way and doesn’t require the multiple html docs that frames did.

I’d be willing to bet that many who argued vehemently against frames years ago, if they are still web developers today, have either built or will soon build a site with fixed navigation and branding.  They don’t even realize that they are helping to bring back an old technique they once fought so hard against.

Have additional thoughts about the return of frames? We’d love to hear them!

Getting SASSy

I recently got acquainted with SASS and I’m a big fan! SASS stands for “Syntactically Awesome Stylesheets” and its purpose is to simplify writing CSS and compiling everything into as few of stylesheets as possible. Overall it was not a very difficult transition into the new syntax that comes along with SASS. After all, it still requires developers to use CSS, it just spices it up a little bit. A few things that SASS adds to CSS that isn’t there normally:

  • Functions to dynamically write CSSSass
  • Easy way to minify the code (compresses all of the code into one line to decrease file size and the amount of connections the website has to make to the server)
  • Allows selector nesting rather than typing out long selectors for specific items
  • Grants the capability to copy the styles of another item without re-typing them

Another feature takes a bit of explaining. With SASS, developers can use the “%” sign to create dummy-classes. And what I mean by that is you can create a set of styles with no intention of adding that specific class to your markup. This is great for two reasons, the greater of which being that there is now no need for multiple classes on an element just to get the right styles going. Instead you can create a selector for the element and extend (@extend) the styles of one of those dummy classes to apply those general styles without adding a class to the markup. It cleans up the code and provides the same functionality.  The other great part is that they function just like a class. You can apply those styles and then add to them as you see fit in your stylesheet.

SASS runs in the background while you’re writing your code. There are two ways that it works, either by command line, or downloading a program to do it for you. I personally have been running with command line but that is mainly because I feel comfortable doing so. In command line I type “compass watch” in the directory for the site and it does everything else. If you choose to use a program to do it for you, the program typically runs in the background and will even automatically refresh your web browser to see your changes in real time. Every time you hit “save” on a SASS file, either the command line or the program will run the code necessary to compile the file and save it as a CSS file to be used on the website.

When I was developing with SASS I was working on responsive websites. To help with that I used two frameworks. The first is Susy, which is a responsive framework that provides grid functionality and a very simple way to write media queries. Susy relies on Compass, which is the other framework I used, which adds in ways to easily write CSS3 styles with all of the different vendor prefixes.

Like learning any new set of frameworks, it does take time to become efficient with the new workflow and the formatting of the stylesheets. With more experience it becomes easier, and truly speeds up the markup process. Would I recommend it for other developers? The answer is yes. The more I use SASS the more I am finding that I enjoy coding more that way. It makes more sense and in the end decreases the page weight that is downloaded from the server.

Have experience using SASS? Share with me in the comments!