Web develpment Tips and tricks

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

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.

Customize Scroll Bar:

You can customize scrollbar of the browser to your needs everytime your website is loaded. Webkit browsers such as Apple’s Safari and Google Chrome have built-in css selectors allowing designers to customize the scrollbar. Here’s the css code snippet to customize scrollbar on Google Chrome & Safari:

 

width: 15px;

height: 15px;

}

::-webKit-scrollbar-track-piece  {

background-color: #C2D2E4;

}

::-webKit-scrollbar-thumb:vertical {

height: 30px;

background-color: #0A4C95;

}


Also Read: Top 10 websites for Programmers to learn coding


Content Attribution:

Bloggers deserve credits or attribution for every quality content they produce, they don’t want someone to use the content in the blog post on their website, social media and blog without attribution. A simple javascript by Tynt works like magic, generating a backlink and traffic to your page if someone tries to copy-paste your content.

To make this work, all you need to do is to signup for an account on Tynt and insert the unique javascript you get in the <head> section of all the pages on your site where you want this magic to work. Here’s a sample javascript code by Tynt.

<script type=”text/javascript”>if(document.location.protocol==’http:’) {var Tynt=Tynt||[];Tynt.push(‘biao6-iCir45cQacwqm_6l’);(function(){var s=document.createElement(‘script’);s.async=”async”;s.type=”text/javascript”;s.src=’http://tcr.tynt.com/ti.js’;var h=document.getElementsByTagName(‘script’)[0];h.parentNode.insertBefore(s,h);})();}</script>

BOX SIZING

Alright, I would say this is my recent favourite CSS properties. It can solve layout issue. for example, when you add padding to a textfield, the width will be the width of textfield + paddings, it’s annoying and it usually will break the layout. However, by using this property, it solved the problem. For more explanation, you can read it from CSS Trick Box Sizing

Support: Opera 8.5+, Firefox 1+, Safari 3, IE8+, Chrome 4+

textarea {

               -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

               -moz-box-sizing: border-box;    /* Firefox, other Gecko */

               box-sizing: border-box;         /* Opera/IE 8+ */

}

JQUERY.TRIM()

Last time, I always search for a trim function only and didn’t realize that jQuery actually has it built in as one of the utilities. This method can come in handy if you want to remove white spaces at the start and at the end of the string.

$.trim(”       a lot of white spaces, front and back!      “);

BOX SIZING

Alright, I would say this is my recent favourite CSS properties. It can solve layout issue. for example, when you add padding to a textfield, the width will be the width of textfield + paddings, it’s annoying and it usually will break the layout. However, by using this property, it solved the problem. For more explanation, you can read it from CSS Trick Box Sizing

Support: Opera 8.5+, Firefox 1+, Safari 3, IE8+, Chrome 4+

textarea {

               -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

               -moz-box-sizing: border-box;    /* Firefox, other Gecko */

               box-sizing: border-box;         /* Opera/IE 8+ */

}

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *