Showing posts with label My Tutorials | Java Script. Show all posts
Showing posts with label My Tutorials | Java Script. Show all posts

Enable Disable Javascript Console Output easily for development and production

Web Developers use console to log debugging information from within the script primarily. Browser console is a great place and there are many available console methods to help a developer and also an end-user what's going on in the script. A developer can output simple log messages for debugging to console along with warning, error messages for the end-user so that they know what's going on.

However, the logs a developers generally write for debugging the script isn't always required for the end-user to see. The problem is write here. Possible solutions can be like,

How to write jQuery code before loading it?

jQuery and various other JS source files are regular part of website built nowadays. But this is always suggested to load JS files at the end of the document. In that case, how you are going to write JS code that requires jQuery to be loaded?

In one of my Web Development tutorial called 10 tips to speed up your website, I also suggested that you should load your JS files at the end of the document.

5. Put JavaScript at bottom:
This is also good practice in site optimization that you load your JS files just before your footer. This will let the browser draw the page without being blocked by JS files loading.

But the problem is, if you load jQuery at the end of the document and try to write jQuery code before that, you will get errors like $ is not defined. So how to write jQuery code before loading jQuery then!

How to Easily highlight source codes in content?

So if you are a blogger who writes on computer programming and publish source codes in your blog post or if you just want to publish some source codes in your website, then what you can do to stand-out the code from other text is

  • Use <code /> tags
  • Use <pre /> tags
Cool. It will look like codes but not look like as it looks like in your favorite code editor, with different colors for constants, variables, functions, strings etc. along with line numbers.

So, what you want to do is to highlight source codes and make them appearing like in a code editor, which is just not for colors, but for more readability too.

How to Optimize syntax highlighter loading speed?

If you are using SyntaxHighlighter in your blog or website, then you might have noticed that you have to load the brushes you used in a post or page. The way you load them is generally by 

  1. Linking specific brush scripts used on a given page or post, 
  2. Or you load them statically by including all the brushes being used though-out the blog or website.
The first option for loading is disgusting as you have to write the code for each post or pages, however it is better as in this way you load only those brushes you used in an specific post or page.

The second option is better as you don't have to write code for each post or page, but will put impact on website loading speed as you will be loading brush scripts unnecessarily in every post or page despite their usage.