The Importance of Complementary Skills
The Importance of Complementary Skills
|
|
If you’ve been a reader of CSS Newbie for any length of time, I’m sure you’ve noticed that not all of my articles are directly related to CSS. I also talk about HTML, JavaScript, content management systems, ecommerce solutions, and other related skill sets and areas of expertise.
This is for many reasons (for starters, I’d get bored otherwise!), but the main overarching rationale is that these areas of expertise are all complementary. Without HTML, CSS is useless. Without JavaScript, CSS can’t realize its full potential.
This means these skills are just as important as the CSS my site’s name suggests you’ll learn.
However, there’s only so much I can teach. I’m not an expert in everything related to web development, nor will I ever be. And while I consider myself pretty decent at writing these tutorials (which means my English degree wasn’t a total waste!), I consider myself to be a complete newbie when it comes to the art of “selling” my knowledge and authority. If there is such a thing as a natural marketer, I am not he.
Earlier this year, I came across Brian Clark’s (of Copyblogger fame) online course called Teaching Sells. I was immediately intrigued. Here was a guy with a complementary skill set who was willing to teach me what he knew. Brian’s expertise is not in building web sites, but in writing and teaching: the other half of what I do.
So I signed up for the Teaching Sells mailing list and downloaded their free report with the great title, “Forget Everything You Know About Making Money Online… And Start Making Some.” And that report was pretty motivating for me. So when the class opened up in February, I signed up right away.
I started out very excited and motivated. The course is full of detailed information, and comes with a lot of worksheets and planning guides you can download and fill out to map what you’re learning to your own personal projects (I have a manila folder full of those worksheets). But then… well, I’ll admit it: I didn’t make it all the way through the course!
I got busy with work, with freelancing, with planning my wedding (only 17 days to go now!). But here’s one benefit of the program that I don’t think Brian and his crew tout loudly enough: Once you’re a member of Teaching Sells, you’re a member for life.
What does that mean? That means I can go back whenever I want, and I’ll still have access to the dozens of learning modules, the forums, the downloads, the interviews… and anything new they decide to add to the mix down the road. So my new and revised goal is to take up the class again this fall, start back up with a whole new group of motivated, excited students, and see if I can make it all the way through this time.
So if you’ve got a few minutes, take my advice: head over to Teaching Sells and watch the new video they have up that explains what it is they do better than I ever could (they’re the marketers, after all).
And if you think their pitch sounds plausible, sign up for their email list. You’ll get the free report, some case studies in your inbox to get you started, and once they open the doors to their class, you’ll be the first to know.
And if all goes well, I’ll see you in the forums.
(Note: Yes, the links above are affiliate links — past members of the program are given the option to be affiliates for future offerings. This means if you click one of those links and sign up, you’re helping CSS Newbie. However, even if there weren’t an affiliate program, I’d still recommend this course to anyone and everyone looking to learn the art of teaching online! So check it out.)
Similar Posts
- I published 99 articles, or an average of a little more than eight per month.
- You-all have left 670 comments(!). That’s an average of 56 per month, or roughly seven comments per article. And I appreciate it!
- Alexa gives CSS Newbie a 3-month average traffic rank of 124,122… and a 1-week average of 58,318. Growth is in the cards!
- 152,907 unique visitors have stopped by this year, generating 293,329 page views.
- 50% of my traffic came from other sites. Thanks to all of you who linked here!
- 38% of visitors get here through search engines.
- The CSS-Only Accordion Effect
- A Semantic List-Based CSS Calendar
- Equal Height Columns with jQuery
- Book-Style Chapter Introductions Using Pure CSS
- Intelligent Navigation Bars with JavaScript and CSS
- The CSS-Only Accordion Effect
- Six Ways to Style Blockquotes
- Horizontal CSS Dropdown Menus
- Intelligent Navigation Bars with JavaScript and CSS
- Show/Hide Content with CSS and JavaScript
- Show the user where they can go, and
- Show the user where they currently are.
The Year In Review: 2008
Photo by yewenyi.
2008 was a great year for CSS Newbie. And in the same nostalgic spirit of CSS-Tricks, Smashing Magazine and (I’m sure) countless other web entities, I thought I’d take a minute or two to step back and reflect on what the year has brought for CSS Newbie.
Although I first purchased cssnewbie.com some time in the middle of 2007 and wrote my first “intro to CSS” article in November of last year, I didn’t officially launch the site until February 1, 2008. Thus, this article also serves as History of CSS Newbie – before 2008, there wasn’t such a website, and now there is. And thanks to you fantastic readers and commenters out there, it’s become a better and more rewarding website than I had imagined it could.
Growth
On January 1, 2008, CSS Newbie had exactly zero visitors – it seems even I was too busy recovering from my celebrating to stop by! Luckily, that trend hasn’t continued. I published my first “official” article on the site (talking about how to create book-style article introductions) on February 1st. That day I saw a huge jump in traffic… 11 visits!
By the end of the week, that one article had gained me a couple hundred visitors, and a milestone against which to work. Although the number was small, that first week’s worth of traffic meant a great deal to me. It proved, if nothing else, that maybe I wasn’t entirely crazy to think that I could put together a website talking about CSS. Maybe, just maybe, a few people would find what I had to say interesting.
That first successful article gave me the drive to write a second, and so forth until here we are at the end of 2008 and the CSS Newbie table of contents is chock full of interesting tidbits, so much so that I often find myself looking through the archive to remember how to do things I’ve forgotten! That’s one benefit of writing for CSS Newbie that I never expected.
Statistics
I’m a bit of a statistics nerd. As such, here are some interesting stats that help visualize the year’s progression.
The five most responded-to articles of the year were:
And here are the five most popular articles of the year in terms of traffic:
Progression
And where will CSS Newbie go from here? Well, I certainly hope to increase both overall usefulness and visitor levels between the end of this year and the end of 2009. But how that happens could have a lot to do with you, the reader.
To that end, I’ve started a new survey to find out what you’d like to see happen with CSS Newbie over the course of the next year. I’ve made a few suggestions for ideas that I’ve thrown around, but if you can think of anything that I should be doing that I haven’t considered, please let me know about it in the comments.
The survey:
Note: There is a poll embedded within this post, please visit the site to participate in this post’s poll.The survey is also available in the footer of every page on the site. Please take a second to let me know what you’d like to see from the site over the next year – I’ll take your suggestions into very serious consideration.
Thanks
Thank you, the reader, for making CSS Newbie what it is today, and for helping me make it what it will become in 2009. Thanks to my guest authors for the year: Scott Philips, Chris Coyier, and Aaron Webb. Thanks to Jeremy Harrington for designing the new CSS Newbie that launched at the beginning of this month. Thanks to my coworkers and friends for helping me talk through my article ideas and suggesting fantastic articles of their own. And thanks to the Twitter crowd for expanding my online and inlife communities in ways I never imagined.
Here’s to a fantastic 2008, and an even better 2009!
Using JavaScript to Style Active Navigation Elements
I’m all about efficiency when I’m writing web code. Any time I find myself writing the same functionality more than once or twice, I try to consider whether my repeated code could be wrapped into a function of some sort.
Navigation is often one of those areas where I try to improve my efficiency. I like my navigation elements to pull double duty. I want them to:
In other words, I want some sort of visual indication in my navigation that shows my user which section of my site they’re in. You can see this on the CSS Newbie site: if you click on the TOC (Table of Contents) link in the bar at the top of the page, you’ll see that link gets special styling when the table of content loads.
Now, I could manually set this on every page using a CSS class. But that’s inefficient — depending on the size of my site, I could end up writing dozens or hundreds of lines of one-off code. And why go to all that work, when you could just wrap it all up into a nice JavaScript function?
First, I’ll explain the logic behind my functions — because they won’t work equally well for every site. Then I’ll walk you through a few examples of the code that makes it all happen.
The Logic
All of my functions assume a very clean, straightforward directory structure. For example, if you have an About section, a Blog section, and a Contact section on your site, a logical directory structure might be:
/ /about/ /blog/ /contact/
And if you had several blog entries inside your blog directory, your structure might grow like this:
/ /about/ /blog/ /blog/post-one/ /blog/post-two/ /blog/post-three/ /contact/
And therefore, a function could logically assume that anything inside the blog directory should be considered a part of the blog section of your site, and mark the blog link as active for those pages. This makes our job a lot easier. And luckily, most CMS platforms make this sort of directory structure pretty easy to create.
The functions also assume that you have either a fairly shallow directory structure, or that you’re not linking to too many similarly nested directories. What I mean by this is, if you have this sort of a structure:
/ /contact/ /contact/me/ /contact/me/here/
And you wanted to link to both /contact/ and /contact/me/here/ in your navigation bar, you might run into problems distinguishing between the two. There are ways to increase precision, but they come at the cost of flexibility.
But enough of that. Let’s get to the good stuff!
A JavaScript Solution
I’ve written about this method before, when I previously talked about building intelligent navigation bars. This technique is nice because it doesn’t rely on any JS frameworks, so you can add it to older sites without needing jQuery or the like. The basic function looks like this:
function setActive() {
aObj = document.getElementById('nav').getElementsByTagName('a');
for(i=0;i<aObj.length;i++) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
}
}
}
This function looks for an element with an id of “nav” (presumably your navigation bar), then looks at each of the anchor tags inside it. It then compares the anchor tag’s href tag with the page’s URL. If the href tag is contained within the URL anywhere, it gives that link a class of “active,” which I can then style specially in my CSS.
As an example of what I mean by all that, if I had an anchor tag in my navigation bar that linked to “/blog/” and the page I was on was “/blog/this-is-a-post.html”, my blog link would be styled as active, because “/blog/” is contained within “/blog/this-is-a-post.html”.
As a final note, you wouldn’t want to call this function until the page was finished loading: if you call it too soon, your links won’t exist yet! So you can either call it at the very end of your document, or dynamically call it when your page is done loading, with something like this:
window.onload = setActive;
A jQuery Solution
If you are already loading a framework like jQuery (like I do on almost every site I work on these days), this sort of functionality could be written even more succinctly. And like I said earlier, I’m a sucker for efficiency. Here’s a jQuery solution that does essentially the same thing in a much smaller space:
$(document).ready(function() {
$('#nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});
This function is making use of both native JavaScript and jQuery tricks to reach a whole new level of brevity. First, the whole thing is wrapped in a “document ready” function, which means it won’t fire until the page is loaded and our links are in place. Next, we’re looking for anchor tags inside our “nav” ID. And really, we’re looking for a very specific anchor tag: one whose href starts with (^=) a slash, followed by a part of our page’s location (location.pathname). Specifically, we’re looking for the first directory in our page’s URL.
We’re doing this by making use of the JavaScript split() method, which lets us take any string (for example, “/blog/this-is-a-post.html”) and break it into an array based on a substring (in our case, the forward slash). If you’re familiar with PHP, it’s similar to the explode() function. In our example, we’d end up with a three-part array that looked like this:
["","blog","this-is-a-post.html"]
Which means that if we look at the second value of our array (arrays start counting at zero, so [1] is the second value), that should give our first-level directory (”blog”, in our example). This lets us match any subsequent child directories with our parent in the navigation bar.
Tweaking for Home Links
Our jQuery function works great in most scenarios, but it fails if you have a “home” link where you’re just pointing to the root directory, like this:
<a href="/">Home</a>
And because I tend to have a link like that, I needed a workaround. Here’s a way to get around that with just a little more code to account for our special case:
$(document).ready(function() {
if(location.pathname != "/") {
$('#nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
} else $('#nav a:eq(0)').addClass('active');
});
Here, we’re checking to see if we’re in the root directory. If so, we’re skipping the loop through our anchor tags and just making a specific anchor tag active. In this case, I’m giving the active class to the first anchor in our list (which is the most common location for a home link).
And that’s that. If you know of even more efficient or fool-proof ways to accomplish this task, I’d love to hear about them in the comments section. Or if you’re skilled in a framework other than jQuery, feel free to share the equivalent code!
Note: I apologize for the long gap between articles. I had some problems while rebuilding my PC (DOA motherboard) and was without my computer for several weeks.
Working With External Cascading Style Sheets
Syntax: How to Use the CLASS Attribute to Apply CSS Formatting … Is the name of the Cascading Style Sheet class you are applying to format the report component. …Digg – How to make sexy buttons with CSS
This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise …Create Simple Transparent Tooltips with CSS and jQuery
This tutorial will teach you how to create some basic tooltips with about 10 lines of CSS and jQuery Code. … CSS. Online Tools. SUBMIT NEWS. Archive. Contact …CSS – SupportWiki
… How do I use CSS? 1.1 The Basics. 1.2 Classes and ID’s. 1.3 Inheritance and … A pseudo-class is a CSS class which means you can give different properties to …SlickMap CSS Lets You Create Beautiful Visual Site Maps Easily
Bored with the same old uninspiring, list-based sitemaps? If you’re like me, most likely you will find that creating better looking sitemaps can be quite time consuming. Thus, we end up having to settle for text-based unordered lists that look nothing like a map.
Well well well, worry not my friends, for now you can have a very beautiful and visual site map with nothing more than your standard unordered list and some CSS magic. Thanks to the efforts of Matt Everson of Astuteo, LLC, who released for public consumption what they call SlickMap CSS.
SlickMap CSS is “a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.”
The first thing that really impressed me with SlickMap was the way data is visualized. The arrangment, grouping, and color coding of data makes it very easy to identify and find relevant data. The “Home link” is color blue and found at the top left most corner, immediately followed by the “Main links”, also colored blue. Level 2 and level 3 links can be found below them, each level having its own color, with a connector leading to each link. “Utility links” are grouped at the top right corner, separate from the main map.
What’s even more amazing about SlickMap is that everything is implemented in pure CSS. There is not a single line of JavaScript to be found anywhere. It’s also very easy to implement. Simply create an HTML file with an unordered set of links and import the slickmap.css file. Couple this up with an online site map tool like WriteMaps and you should be all set to rock and roll.
It supports most standards-compliant browsers, which means Safari, Firefox, and Opera. Sorry, IE but no love for you.
In the README file:
SlickMap CSS was created for web designers, and such was tested and developed for use with Safari, Firefox, Opera, and other standards-compliant browsers. Because of that, current versions of Internet Explorer (and probably IE versions long into the future) might look like sh*t.
The only downside I could think of right now is actually a strength in itself. While those large boxes would work for small to medium websites with a fairly standard site map layout like the one Astuteo has, it might do very well for larger websites with hundreds of links on their site maps. But then again there are methods to optimize and trim down those gigantic things.
It is a very well thought out and solid demonstration of the power of CSS, and for this reason I raise my glass and give my kudos to Matt Everson and the folks at Astuteo. Well done guys!