Ask Nettuts #1: Callbacks, LESS, and Floats
“Today marks the first entry in a new ‘Ask Nettuts’ series. I’m often emailed concerning various web development related questions. Though some are more specific than others, many of these, I’m sure, would appeal to all of our readers. As such, each week or so, we’ll post a new batch of question and answers from the community, in both article and video form, for your convenience.
“This week, we discuss JavaScript callback functions, a LESS compiler, and those tricky CSS floats.”
Quick Tip: Did Internet Explorer get the Box Model Right?
“The CSS standard states that borders and padding should be applied on top of the specified width of an element. As such, if I have a 200px div, and apply 40px worth of borders and padding, total, the width will then be 240px. This makes perfect sense; however, Internet Explorer actually did things differently. They adopted a model where the maximum width is what you specified. The borders and padding are then factored into that width, reducing the content area. As a result, the width of the element never exceeds the stated width of 200px.”
CSS DIY Organization
“I detest looking at code or mark-up that I’ve written in the past, which I don’t understand right off the bat. I’m surely no different from you in that I want to be able to come back years later, pick the code up, and understand exactly what is going on. I don’t want to dissect the simplest concepts, where the brackets are located, or even how the mark-up is indented. I have created habits to help me with rapid development, which have kept my sanity somewhat intact. I will be honest though, I have never given much thought to how I write and organize my CSS until recently, and that is what I am sharing today.”
Quick Tip: Practical CSS Shapes
“A common design technique lately is to create a fold effect, where it appears as if a heading is wrapping behind its container. This is generally achieved through the use of tiny images; however, with CSS, we can mimic this effect quite easily. I’ll show you how in four minutes.”
15 CSS Habits to Develop for Frustration-Free Coding
“It’s been said that the key to a civilization’s success is mastery of the food system. Unless a group of people can effectively control the basic needs for survival, they will never achieve greatness. Likewise, before CSS skills can be expanded to an advanced level, the basics must become instinct to any CSS coder. Develop these habits and you lay a solid foundation to apply advanced CSS techniques.”
How To Build a Widget to Display your Buzzing
“A couple months ago, Google released a new Twitter-like service, called Buzz. We can use this service to display our latest buzzes on any site. So, in this tutorial, I’ll guide you through the process of building your own Buzz widget.”
Quick Tip: How to Write a Neat FlipNav Script
“Somehow, I inadvertently started a navigation series over the last few weeks. It’s purely coincidence, mostly spawned by emails and such. This week, we’re going to mimic the neat navigation functionality, found on JohnMayer.com. Simply mouse over one of the navigation items to see the effect. However, we’re going to make it a bit more flexible by removing the need for images. We’ll achieve the effect using only CSS and JavaScript.”
I always have to stop and think when setting a border radius in CSS, so I built a tool for it: border-radius.com.
Adequately Good - Preloading JS and CSS as Print Stylesheets
Here’s a nice preload hack - load, then remove JS/CSS as print stylesheet.
In Pictures: Online computer tutorials based on pictures. Free.
InPics have easy-to-follow online tutorials on HTML & CSS, MySQL Basics, PHP Basics, Perl Basics and more. Even Microsoft Office tuts. If you or someone you know needs to learn the basics, check them out.
