Top 20 Developer Tools of 2016

Here are the list of top 20 Developer utilities that are must to have for Developer.

1. GitKraken: The downright luxurious Git GUI client for Windows, Mac, and Linux.
2. Atom: A hackable text editor for the 21st Century.
3. VS Code: A free, lightweight tool for editing and debugging web apps.
4. Git: A free and open source distributed version control system.
5. GitHub: A web-based Git repository hosting service.
6. Visual Studio: Developer tools and services for any platform with any language.
7. Sublime Text: A sophisticated text editor for code, markup, and prose.
8. Chrome DevTools: A set of web authoring and debugging tools built into Google Chrome.
9. Docker :An open platform for developers and system administrators to build, ship, and run distributed applications.
10. GitLab: Git repository management, code reviews, issue tracking, activity feeds, and wikis.
11. IntelliJ IDEA: A Java IDE.
12. PhpStorm : A commercial, cross-platform IDE for PHP.
13. Postman: A powerful GUI platform to make your API development faster & easier.
14. ReSharper : A Visual Studio extension for .NET developers.
15. Slack: Real-time messaging, archiving, and search for modern teams.
16. PyCharm: An IDE used specifically for Python.
17. Android Studio: The official IDE for Android platform development.
18. Notepad++: A free source code editor which supports several programming languages running under the MS Windows environment.
19. Xcode : an IDE for macOS/and iOS development.
20. Stack Overflow: The largest online community for programmers to learn, share their knowledge, and advance their careers.

Tips for Cross Browser Compatibility

Cross-browser compatibility is one of the most time consuming tasks for any web designer. We’ve seen many different articles over the net describing common problems and fixes. There are some things you should consider for Safari and Firefox also, and IE isn’t always the culprit for your CSS woes. Here is a quick summary of How to get Cross Browser Compatibility Every Time:

• Always use strict doctype and standards-compliant HTML/CSS
• Always use a reset at the start of your css
• Use -moz-opacity:0.99 on text elements to clean up rendering in Firefox, and text-shadow: #000 0 0 0 in Safari
• Never resize images in the CSS or HTML
• Check font rendering in every browser. Don’t use Lucida
• Size text as a % in the body, and as em’s throughout
• All layout divs that are floated should include display:inline and overflow:hidden
• Containers should have overflow:auto and trigger hasLayout via a width or height
• Don’t use any fancy CSS3 selectors
• Don’t use transparent PNG’s unless you have loaded the alpha

RockMelt, the Social Savvy Browser

RockMelt, a new browser that lives in the cloud and uses Facebook authentication to synchronize a user’s browsing experience across machines, went into limited public beta today.

It was built around the premise that the browser is busted. The thought is that older browsers aren’t made for the way we now use the web, and maybe it’s a solid way of thinking. After all, browsing is a passive activity, and the Internet is increasingly about interaction.

There are some unique concepts here, namely the fact that RockMelt lives in the cloud. This allows your “browser experience” to be, in a way, profiled. Your settings, bookmarks, etc., are all backed up online.

Using Facebook for authentication, your user environment can be replicated anywhere RockMelt is installed. And really, that’s what RockMelt is all about: The user environment.

Users of Google Chrome will feel at home, because RockMelt is built on Chromium, the open source project behind Google’s browser. The major differences are columns running down each side of the browser.

The left side depicts your favorite Facebook contacts. When a contact is listed on the left bar, you’ll be able to quickly initiate Facebook chats with them or post content to their Facebook walls. You can also easily send them e-mails through the seamless contact pop out.

Straddling the right side is your bookmarks — and here’s another area where RockMelt’s cloud is put to clever use. Bookmarks are updated from the cloud, so content is cached and waiting for you when you log on.

All in all, RockMelt is an interesting twist on the browsing experience. The social elements of the browser make for a compelling and streamlined online interaction process. And because it’s powered by Chromium, it not only supports Chromeextensions, it’s guaranteed to support the latest and greatest aspects of the web, like HTML5 and CSS3.

How to: Javascript Loading Conditionally for IE

Loading Javascript conditionally for IE. When rendering fixes are needed for IE, you can enclose CSS, JavaScript, or HTML markup in conditional comment tags directed at one or more versions of IE with an "if" statement; IE will then execute the code specified within them, while all other browsers treat them as standard comment tags and ignore them. The "if" statement must reference IE in square brackets as shown below; in this example include script only for IE

<!--[if IE]>

    <script type="text/javascript">

        /*  Do Stuff */
    </script>
<![endif]-->

below example shows how to exclude a script block from IE:

<![if !IE]>

    <script type="text/javascript">

        /*  Do Stuff */

    </script>

<![endif]>

Conditional comments can also be targeted to a particular version of IE, or a subset of versions, like those released prior to IE7 or IE6

<!--[if lt IE 7]>

  <link rel="stylesheet" type="text/css" href="ie_fixes.css" />

<![endif]-->

Hope this helps!

Browser Sandbox - Run any browser from the web

As a developer sometimes we face problems with compatibility issues on few versions of browsers, for that we need to test them on those browsers. So some times we need to have them installed on our system. I have found a wonderful utility to test my applications in all versions browsers in my machine without having them installed. This is a great utility for all the developers to test their applications to resolve browser compatibility issues.

Download and install this plug-in.

I personally found this very helpful. Hope this is useful for you.

URL Escape Characters

What is the % Code in My URL?

In order to prevent the misinterpretation of special characters such as a space, bracket (< and >), or % in the URL (which stands for Uniform Resource Locator - it is the address you see in your browser's address bar indicating the location of the website you are visiting), browsers parse certain special characters using URL escape characters.

Table of URL Escape Characters
Character	Escape Character	Character	Escape Character
Space	%20	#	%23
$	%24	%	%25
&	%26	@	%40
'	%60	/	%2F
:	%3A	;	%3B
<	%3C	=	%3D
>	%3E	?	%3F
[	%5B	\	%5C
]	%5D	^	%5E
{	%7B	|	%7C
}	%7D	~	%7E

 

Good Coding Practice

It is good coding practice to avoid the need for URL escape characters. As a rule of thumb, avoid using the special characters above when formulating a URI string (filename), and I recommend using the hyphen (-) instead of the underscore (_) (as all search engines recognize the hyphen as a space separator, but the same is not true for the underscore; and older browsers do not correctly interpret the underscore in CSS). If you must use the above characters make sure to escape them using the above escape characters so when the browser parses your code it will not misinterpret the link. It's important to note that these URL escape characters differ from HTML escape characters.

asp:Menu Server Control - Cross Browser Compatibility (Safari/Chrome)

 

Cross browser compatibility is upsetting while working with asp:Menu Server Control, and It was not rendering/working well with Safari and Chrome.

After bit of googling... :-) and found a solution for this.

Approach 1:

I have added below small piece of code snippet in my MasterPage's Page_Load event

        if (Request.UserAgent.IndexOf("AppleWebKit") > 0)
        {
            Request.Browser.Adapters.Clear();
        }

This will tell asp.net not to use an adapter when rendering the menu control. This will work for both Safari and chrome as well because they both use webkit which is how asp.net identifies.

Approach 2:

You can force the menu to work by overwrite the Page_PreInit method on the page and telling the page that the client target is a modern “uplevel” browser:-

protected void Page_PreInit(object sender, EventArgs e)
{
if (Page.Request.ServerVariables["http_user_agent"].ToLower().Contains("safari"))
{
Page.ClientTarget = "uplevel";
}
}

Unfortunately, you can't just add the fix to your Master Page, it doesn't contain a PreInit method as it's a web control not a web page.

Please note that you have to do this in the page class file, and not in the master page class file. Obviously this means you have to do it for every page – which is not ideal.