Here’s a checklist of 10 skills that are some of the most important for good web developers to have. These focus a bit on front-end skills, but they apply to all developers:
1. Regular expressions
Regular expressions are used to parse strings, basically to find and replace bits of text. While this may seem trivial, the versatility of regex makes it quite powerful. There are a wide variety of methods for optimizing a regex string, which can mean huge performance differences for your app.
Regular expressions can be used with just about any language, they work great with Javascript’s
replace() and PHP’s preg_replace() to name a few. They are also great for Apache rewrites.It’s surprising how few web devs use regex considering how useful it is. So if you haven’t already, make sure to learn regular expressions.
2. Basic SEO
A knowledge of basic SEO is essential for any good web developer. While you can leave keyword research to your clients, a developer should have sound strategies for targeting those keywords on the page. This means clean markup and good use of
</code>, <code><meta></code>, <code><h1></code> and <code><h2></code> tags on the front-end, as well as solid link and directory structure organization on the back-end. </p> <p>The best resources I’ve found for learning SEO are the <a href="http://www.seomoz.org/article/beginners-guide-to-search-engine-optimization">Beginner’s Guide to Search Engine Optimization</a> and <a href="http://www.seomoz.org/article/search-ranking-factors">Search Engine Ranking Factors v2</a>, both from SEOmoz.</p> <p><a name="js-library"></a></p> <h2>3. A good Javascript library</h2> <p><img src="http://jonraasch.com/img/blog/jquery-logo.gif" alt="jQuery javascript library" class="leftImg"></p> <p>Even if you don’t write much Javascript, knowing a good Javascript language can make that little bit so much easier. Whether it’s <a href="http://jquery.com/">jQuery</a> (my personal favorite), <a href="http://mootools.net/">Mootools</a>, or whatever, learning a Javascript library will cut your Javascript dev time in half. First, these libraries take the cross-browser guess-work out of Javascript programming so you can stop feature checking and start animating. Additionally, they provide a ton of easy animation options and make selecting nodes in the DOM a piece of cake.</p> <p>More adventurous Javascripters might even want to tackle a Javascript UI language. There are plugins for the libraries above, but I’d recommend <a href="http://www.dojotoolkit.org/">Dojo with Dijit</a>.</p> <p><a name="cross-browser"></a></p> <h2>4. Cross-browser debugging</h2> <p><img src="http://jonraasch.com/img/blog/cross-browser.png" alt="cross-browser" class="leftImg"></p> <p>In order to reach as many viewers as possible, your websites need to work in all the major browsers (IE6, IE7, IE8, FF2, FF3, Safari 4, Opera 9). Everyone hates cross-browser debugging, but the better you get the less you’ll have to do it.</p> <p>The best cross-browser debugging is preventative, starting with valid HTML and a good reset stylesheet. For my reset CSS, I just use <code>* { margin: 0; padding: 0 }</code> but you can also use <a href="http://meyerweb.com/eric/tools/css/reset/">a more robust option</a>. </p> <p>Beyond this it helps to understand the various <a href="http://www.quirksmode.org/compatibility.html">quirks specific to certain browsers</a>. Top of this list is usually Internet Explorer, and in particular IE6 (yes, still). And while most IE issues boil down to the infamous <a href="http://www.satzansatz.de/cssd/onhavinglayout.html">haslayout bug</a>, you shouldn’t rely on something heavy-handed like <code>* { zoom: 1 }</code> to solve these.</p> <p><a name="images"></a></p> <h2>5. Image processing and optimization</h2> <p><img src="http://jonraasch.com/img/blog/photoshop-cs4.png" alt="photoshop" class="leftImg"></p> <p>Although most developers rely on professional designers for design assets, it is just as important for devs to know their way around Photoshop. A strong knowledge of image processing not only allows you to make quick changes to comps without bouncing them back to the designer, it also helps you to understand what is possible when asking for design changes.</p> <p>One Photoshop skill that is particularly important for webdevs is image optimization. Image file sizes are probably the largest threat to bandwidth and optimizing images can make or break a site’s load time. Photoshop and Illustrator’s “Save for Web” option makes image optimization a lot easier: simply press Ctrl-Alt-Shift-S on PC or Command-Alt-Shift-S on Mac to access this wizard.</p> <p><a name="valid-html"></a></p> <h2>6. Building layouts with valid HTML/CSS (and no tables)</h2> <p><img src="http://jonraasch.com/img/blog/box-model.gif" alt="CSS box model" title="The CSS box model"></p> <p>Let’s face it: it’s not 1996 and even back-end developers need to know how to write good front-end code, meaning valid HTML and CSS—not a bunch of tables. The markup should be clean and validate according to it’s doctype and the CSS should be separated from the HTML, which means no inline styles and especially no <font> tags.</p> <p>For starters learn the <a href="https://developer.mozilla.org/en/CSS_Reference">various CSS tags</a> and the <a href="http://jessey.net/simon/articles/003.html">CSS box model</a>. From there you should learn W3C specifications on how to write valid code.</p> <p>Whenever you write HTML it should naturally be valid xHTML; meaning properly nested nodes, closed image tags with specified alt attributes and other basics. Then you can go on to learn which nodes can be nested within which, and other more complex validation issues. In the end you’ll find that the <a href="http://validator.w3.org/">w3c’s HTML validator</a> hardly ever throws an error, which is a really good feeling.</p> <p><a name="law"></a></p> <h2>7. Copyright / cyber law basics</h2> <p><img src="http://jonraasch.com/img/blog/justice-illustration.png" alt="law" class="leftImg"></p> <p>You don’t need a law degree, but it’s best for all developers to have at least a basic knowledge of copyright and cyber law wherever they do business.</p> <p>Since websites are essentially publications, copyright issues tend to be the most common legal issue for sites. From user generated content with stolen Flickr photos to quoting paragraphs from the New York Times, it’s important to know when you’ll get sued, when you’ll get an angry letter and when you’re okay. It’s also good to know when to sue and when to send an angry letter <img src="http://jonraasch.com/blog/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"> .</p> <p>Beyond copyright laws it’s good to understand privacy and <a href="http://www.coppa.org/comply.htm">COPPA</a> regulations as well as read carefully through any agreements you have with registrars / hosting companies (and clients!).</p> <p><a name="rewrites"></a></p> <h2>8. Apache rewrites</h2> <p><img src="http://jonraasch.com/img/blog/apache-logo.jpg" alt="apache http" class="leftImg"></p> <p>Apache rewrites make it easy to take messy URLs and make them clean and easy to type (if you know <a href="http://jonraasch.com/blog/10-things-every-web-developer-should-know-2#regex">regular expressions</a>). You can take something ugly like <code>index.php?section=about&page=bio</code> and rewrite it to the much prettier: <code>about/bio</code>.</p> <p>But beyond simply cleaning URL’s, Apache’s mod_rewrite can be used to quickly turn a simple page into a complete app with a directory structure. Simply rewrite the various query string variables to be directories, and you’re all set. </p> <p>However be careful: Apache rewrite issues are notoriously hard to debug. The rewrites can’t provide any debugging info themselves and will often skip over info you include through other methods. So be aware, rewrites can cause a nightmare that you can’t track down.</p> <p><a name="debugger"></a></p> <h2>9. Debugging Software</h2> <p><img src="http://jonraasch.com/img/blog/firebug.jpg" alt="firebug debugger" class="leftImg"></p> <p>A good debugger will make your web programming go so much quicker. </p> <p>When it comes to the front-end, I like <a href="http://getfirebug.com/">Firebug</a>, which allows you to click elements on the page and analyze which styles are being applied and from which stylesheet. You can additionally add or remove styles on the fly, as well as edit the page markup. </p> <p>Firebug also helps with Javascript debugging, providing a better analysis of Javascript errors, as well as a console for running Javascript on the fly and displaying output from <code>console.log()</code>. Finally it provides NET info, showing you the loading time of various front-end assets as well as anything that is 404′ing or otherwise not loading.</p> <p>I don’t use a back-end debugger but I hear <a href="http://xdebug.org/">xDebug</a> is good for PHP.</p> <p><a name="version-control"></a></p> <h2>10. Version control</h2> <p><img src="http://jonraasch.com/img/blog/mercurial.gif" alt="Mercurial VC" class="leftImg"></p> <p>Last but definitely not least, every good developer should know and use version control. Version control not only is the best way to backup files as you work on them, it is really the only way to effectively collaborate with other developers. </p> <p>Version control works by keeping a record of the changes in a directory’s contents. As you work you can commit any changes to this record, or roll back to any previous version.</p> <p>I personally like <a href="http://blog.ianbicking.org/distributed-vs-centralized-scm.html">distributed as opposed to centralized</a> version control, since it provides two levels of VC: you can commit changes to your local repository and then push these changesets to a centralized server. This allows you to make a number of small or potentially unstable changes locally, then push a set of final changes to your team.</p> <p>When it comes to distributed VC I like <a href="http://mercurial.selenic.com/wiki/">Mercurial</a>, and for centralized I like <a href="http://subversion.tigris.org/">Subversion</a>.</p><p> </p><h2>Now what do you think?</h2> <p>Did I leave anything off the checklist above? What do you think of the items on there? They aren’t in any order, but is any item more or less important? Please post any thoughts in the comments below.</p><p> </p></DIV> 
Hi,The design process doesn't stop after the website goes live in Web Design Cochin. You need to see how visitors use your website and what areas you need to fine tune.Thanks.........
ReplyDelete