coding skill boosters

tips to boost your skills

here go some open source services that developers keep quiet about, programming hacks and development tips. i’m sure that you’ll find some tips & tricks to add your toolbelt.

1. clear lists

clearing floating elements is part of the grind for most web developers. but how do you clear floated list elements without setting a height? recently i found that you just have to add the following two css properties to any list container with floated list elements:

display: block;overflow: hidden;

if you check the list container, now with any dom inspector you’ll find that the height attribute has automatically been calculated – and that fixes the issue.

2. sandbox

if you want to develop techniques, do it as a sandbox project. it makes the code easier to debug if it’s not working as expected.

3. web inspectors

every web inspector is different. you can preview css changes live in chrome or safari. right click and choose ‘inspect element’“. you can edit or add new elements here. the web inspector isn’t accessible by default in safari on mac. enable it by going to preferences >advanced>show develop menu in menu bar.

4. firebug

chrome and safari have a web inspector built in, and firefox goes by the developers toolbar.  firebug added the ability to display multiple screen sizes in one browser tab too, so you will never need to change your browser’s width to test your site.

5.  one thing at a time

each object in your code must have one function. even with css: don’t put all styles onto a .button class. split it into .button-structure and .button-face, etc.

if you don’t do that and something goes wrong, you’ll have to trace back through your code, finding which object is the problem and whether the bug is inherited from higher in the dom.

6. can you code it?

falling back on frameworks and libraries isn’t always the best solution. if you always include jquery, you may think “can it be done with vanilla js?” but you may find that you can do it in javascript, better and faster.