It’s often said that there’s no substitute for experience - but there are shortcuts to it. We spoke to seasoned developers; people who toil over loops and slave over attributes day in and day out. This collection of tips comes straight from the code-face
.
Overflowing like an inadequately specified buffer, a googolplex of know-how has been filtered to bring you 25 fine features, tricks and tips. There are open source services that developers keep quiet about, mobile programming hacks and responsive development tips.
We’d heard a few of these stellar secrets before, but many were brand new even to us. We’re sure that you’ll find more than one or two to add your toolbelt.
.Overflowing like an inadequately specified buffer, a googolplex of know-how has been filtered to bring you 25 fine features, tricks and tips. There are open source services that developers keep quiet about, mobile programming hacks and responsive development tips.
We’d heard a few of these stellar secrets before, but many were brand new even to us. We’re sure that you’ll find more than one or two to add your toolbelt.
Coding
1. Clear lists
Clearing floating elements is part of the grind for most web developers. We can still get caught out though. For example, how do you clear floated list elements without setting a height? “The answer to this little dilemma is actually really simple,” says Rhys Little of Plug and Play, “Just 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, CSS effects or new kinds of transition, for example, do it as a sandbox project. “Keeping experimentation uncluttered by outside influences makes the code much easier to debug if something isn't working as expected,” says Creative Director Shane S. Mielke.
3. Web inspectors
Developers differ on which web inspector is best, but they all agree that we struggled before our favourite browsers had them. New Context’s Paul Wilsonpoints out that you can preview CSS changes live in Chrome or Safari. Right click on an element, and choose ‘Inspect Element’, says Wilson, “All the applied CSS will be shown in the right inspection pane. You can edit or add new elements here, to see the effects of your changes.”
The web inspector isn’t accessible by default in Safari on the Mac. Enable it by going to Preferences >Advanced>Show Develop menu in menu bar.
The web inspector isn’t accessible by default in Safari on the Mac. Enable it by going to Preferences >Advanced>Show Develop menu in menu bar.
4. Firebug and beyond
Chrome and Safari have a web inspector built in, but Mike Ballan, Digital Designer at Jellyfish stands by the original Firefox Developers Toolbar. “It’s the perfect thing to detect those little CSS problems when testing your site in multiple screen sizes,” says Mike.
“Firebug has just added the ability to display multiple screen sizes in one browser tab too - which means you will never need to change your browser’s width to test your site again.
