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.
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.
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?