diff --git a/README.md b/README.md
index 8176c02..2bc5b87 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,9 @@
-## [ProKeys](https://chrome.google.com/webstore/detail/prokeys/ekfnbpgmmeahnnlpjibofkobpdkifapn)
+[![logo of prokeys](http://s27.postimg.org/7z02emgg3/main_logo.png)](https://chrome.google.com/webstore/detail/prokeys/ekfnbpgmmeahnnlpjibofkobpdkifapn)
+
 **Latest version**: 2.5.4
 **Status**: active, stable build
 
-A completely free Google Chrome and Opera extension that lets you be productive in online text-related work with its number of features like:
+ProKeys is a completely free, [Google Chrome](https://chrome.google.com/webstore/detail/prokeys/ekfnbpgmmeahnnlpjibofkobpdkifapn) and [Opera](https://addons.opera.com/en/extensions/details/prokeys/?display=en) extension that lets you be productive in online text-related work with its number of features like:
 
 [More info on all these in Help section inside the app]  
 1. **Snippets** - define custom abbreviations, and retrieve the text associated with them simply by pressing the hotkey (default: Shift+Space). Example: "brb" can expand to "Be right back!"  
@@ -29,7 +30,7 @@ First of all, thanks for contribution! Every small bit of it counts! You can:
 3. Fork the repo, make changes, and submit a pull request, describing the changes made.
 4. Help me translate ProKeys to your native language.
 5. Share the word about ProKeys with people!
-6. [Flattr ProKeys](https://flattr.com/thing/3a21a326ed09014a80254c2938cd5bee) - buy me a beer!
+6. [Flattr ProKeys](https://flattr.com/thing/3a21a326ed09014a80254c2938cd5bee) - buy me a ~~beer~~ coffee!
 
 **Contact me** - prokeys.feedback@gmail.com - to discuss anything related to the above if you want to.
 
@@ -39,12 +40,32 @@ First of all, thanks for contribution! Every small bit of it counts! You can:
 
 1. Snippets/settings access in context menus
 2. Clipboard access in snippet body
-3. Update Opera with latest release
-4. Create ProKeys for Firefox, IE, Edge, Safari
+3. Get started with gaurangtandon.github.io/prokeys. Use http://dns.js.org/ for hosting. Use: https://github.com/Khan/tota11y
+4. Update Opera with latest release
+5. Create ProKeys for Firefox, IE, Edge, Safari
 
 ## Change Log
 
-**2.5.4** - Current -  14/08/2015
+**2.6.2** - upcoming
+- settings access in context menu // (show modal in settings page on context menu click)
+
+**2.6.1** - upcoming
+- remove case-sensitivity for snippet names!
+-  highlight snippet on save, edit to indicate save
+-  fix for certain keycodes not corresponding with their actual key name (in hotkey feature)
+-  support for http://ckeditor.com/demo // (if possible)
+
+**2.6.0** - Current - 06/10/2015
+- shorter image names
+- minified images - saving nearly 10 KB :)
+- new Google Plus logo in About page
+- fix for [excessive CPU usage issue](https://github.com/GaurangTandon/ProKeys/issues/3)
+- disabled ProKeys for input boxes using ReactJS (they possess `reactid ` in `dataset`)
+- refactored detector.js code and others with ESLint
+- fix for bug when pressing hotkey while having some text selected
+- fix for GitHub, JSFiddle, and other sites which use their own editor (CodeMirror, ace, etc. which interferes with ProKeys)
+
+**2.5.4** - 14/08/2015
 - changes in links to the tryit editor in Help section
 - fix super ugly bug of "Search" button in popup
 
diff --git a/css/options.css b/css/options.css
index 6bc98a6..793008a 100644
--- a/css/options.css
+++ b/css/options.css
@@ -283,6 +283,19 @@ ol{
 	display: none;
 }
 
+#help dd a{
+	color: #1143BB;
+}
+
+#help dd a[data-target="#tryit"]{
+	display: inline-block;
+    min-width: 150px;
+    max-width: 350px;
+    margin: 10px 0;
+    color: #1143BB;
+	cursor: pointer;	
+}
+
 #help h3{
 	font-size: 26px;
 	margin-bottom: 15px;
@@ -319,35 +332,39 @@ ol{
 	font-size: 15px;
 }
 
-.tryit{
+#tryit{
 	margin: auto;
 	width: 70%;
 	height: 210px;
 	border: 1px solid grey;
 }
 
-.tryit .nav{
+#tryit .nav{
 	width: 100%;
 	height: 30px;
 	background: rgb(232, 232, 232);
 }
 
-.tryit .nav p{
+#tryit .nav span{
+	padding-left: 10px;	
+}
+
+#tryit .nav p{
 	display: inline-block;
 	height: 100%;
 	max-width: 200px;
 	padding: 5px;
 	cursor: pointer;
 	min-width: 50px;
-	margin: auto 10px;
+	margin: auto 0 auto 5px;
 	font-family: 'Segoe UI', Tahoma, sans-serif;
 }
 
-.tryit .nav .show{
+#tryit .nav .show{
 	background: white;
 }
 
-.tryit > .show{
+#tryit > .show{
 	display: block;
 	height: 180px;
 	width: 100%;
@@ -358,11 +375,11 @@ ol{
 	overflow-y: auto;
 }
 
-.tryit textarea{
+#tryit textarea{
 	resize: none;
 }
 
-.tryit > :not(.nav):not(.show){
+#tryit > :not(.nav):not(.show){
 	display: none;
 }
 
@@ -656,4 +673,4 @@ td{
 		width: 55px;
 		height: 55px;
 	}
-}
+}
\ No newline at end of file
diff --git a/css/popup.css b/css/popup.css
index dcf4cb5..166fda0 100644
--- a/css/popup.css
+++ b/css/popup.css
@@ -716,4 +716,4 @@ body.darkened .fade{
 
 .zoom75 .new_user_msg button{
 	font-size: 25px;
-}
+}
\ No newline at end of file
diff --git a/css/reset.css b/css/reset.css
index d190e90..6b2c685 100644
--- a/css/reset.css
+++ b/css/reset.css
@@ -33,4 +33,4 @@ body {
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
-}
+}
\ No newline at end of file
diff --git a/html/options.html b/html/options.html
index a523df1..812a1ae 100644
--- a/html/options.html
+++ b/html/options.html
@@ -84,14 +84,15 @@ <h1>Help</h1>
 				
 				<section>
 					<p class="warning"><em><strong>Heads up!</strong> "Using a snippet" means performing snippet substitution in a web page with an already created snippet. "Creating a snippet" means creating a new snippet in the popup box.</em></p>
-					<p>Click the question you want to know about. Try the features as you learn them in this editor.</p>
+					<p>Click the question you want to know about. Try the features in this editor</p>
 					
-					<div class="tryit">
+					<div id="tryit">
 						<div class="nav">
+							<span>Swap editor mode: </span>
 							<p class="show" data-selector="textarea">Textarea</p>
 							<p data-selector=".editor">Editable Div</p>
 						</div>
-						<textarea class="show">This is a normal text editor. It does not support HTML formatting.
+						<textarea class="show">This is a normal text editor. It does not support bold, italics, etc. formatting using HTML.
 
 But multiline text is still supported.</textarea>
 						<div class="editor" contenteditable=true>This is a contenteditable or editable div. These editors are generally found in your email client like Gmail, Outlook, etc.<br><br><i>This editor supports </i><b>HTML formatting</b>. You can use the "my_sign" sample snippet here, and see the effect.</div>
@@ -104,7 +105,7 @@ <h2>Info</h2>
 							<p><b>Example:</b> Snippet with snippet name - "brb". The snippet name is the abbreviation. It is <b>case-sensitive</b>, so "brb", "BRB", and "bRb" are all different.
 							Typing "brb" and pressing the hotkey, would replace it with the snippet body, which here is "be right back".
 							Snippets can be created in the popup box.</p>
-							<p><b>Try this in editor:</b> in the editor above, use any of the sample snippets that have been provided to you in the popup box.</p></dd>
+							<a href="#tryit">Try snippets in editor</a> - you can view the snippets in the popup box</dd>
 						
 						<dt>Can a deleted snippet be restored?</dt>
 						<dd>No, unfortunately, snippets once deleted cannot be restored. Therefore, it is recommended you take a backup regularly.</dd>
@@ -112,7 +113,7 @@ <h2>Info</h2>
 						<dt>What are Placeholders?</dt>
 						<dd><p>Placeholders are fields in the snippet body which are populated with dynamic values provided by you on using the snippet. A placeholder has the format `%text%` such that the text can only contain alphabets, digits and the underscore symbol.</p>
 							<p><b>Example:</b> snippet "wishBDay", which you can use to wish your friends Happy Birthday! Since the name of the friend keeps changing, so you can add a placeholder to the snippet body, as "%name%"(without quotes). It would be auto-highlighted whenever you use the snippet and you can type your friend's name into it.</p>
-							<p><b>Try this in editor:</b> in the editor above, use the "letter" sample snippet to see placeholders in action.</p>
+							<a href="#tryit">Try the "letter" sample snippet in editor</a>
 							<p><b>Usage</b> of a placeholder:
 							<ol>
 								<li>Insert placeholders into the snippet body while creating or editing a snippet. Then, use this snippet.</li>
@@ -133,7 +134,7 @@ <h2>Info</h2>
 								<li>Press `=` (equals) key and the result of evaluation would replace the `[[...=]]`!</li>
 							</ol>
 							</p>
-							<p><b>Try this in editor:</b>Type some expression like: "[[5^3=]]"</p>
+							<a href="#tryit">Try math expressions in the editor</a> (like "[[5^3=]]")
 						</dd>
 						
 						<dt>What are Date/Time macros?</dt>
@@ -239,8 +240,8 @@ <h2>Info</h2>
 							<p><B>Evaluation</b> of these symbols is from left to right, and the symbol that appears first (at the top) in the symbols list, is evaluated first.</p></p>
 							<p><b>Example: </b>Consider this date/time macro: <span class="code">[[%d(YYYY:MM:D)]]</span>. If you want to move 10 days forward and 5 months backward,
 							 you could write: <span class="code">[[%d(YYYY:MM-5:D+10)]]</span> This was independent calculation. If you it to be relative, use <span class="code">[[%d(!YYYY:MM-5:D+10)]]</span> (with that <span class="code">!</span>)</p>
-							 <p><b>Try this in editor: </b>In the editor above, use the "dateArithmetic" sample snippet to see magic of date and time arithmetic.</p>
-							 <p><b>Limitation</b>: The "date" and "time" symbols do not support date and time arithmetic (for now; I might fix this in future).</p>
+							 <a href="#tryit">Try date and time arithmetic in editor</a> (use dateArithmetic sample snippet)
+							 <p><b>Limitation</b>: The "date" and "time" symbols do not support date and time arithmetic (I might fix this in future).</p>
 							 </dd>
 						<dt>What are Variables?</dt>
 						<dd><p>Variables are used to insert dynamic values at any time while typing. They are inbuilt and cannot be created by you. Of course, I would love a recommendation from you for a new variable! (email: prokeys.feedback@gmail.com)</p>
@@ -273,7 +274,7 @@ <h2>Info</h2>
 								</tr>
 							</table>
 							</p>
-							<p><b>Try this in editor:</b> Use any of the three variables (usage as specified above)</p>
+							<a href="#tryit">Try these variables in editor</a>
 						</dd>
 						<dt>How are Variables different from Snippets?</dt>
 						<dd>Variables are more useful when you need to retrieve system-related dynamic values. Like the version of the browser, which would need to be manually entered into a snippet. A Variable would get it automatically.</dd>
@@ -297,7 +298,7 @@ <h2>Troubleshoot</h2>
 			<div id="about">
 				<h1>About</h1>
 				Made by <a href="https://plus.google.com/u/0/110764286121755681313/posts">Gaurang Tandon</a><br>
-				Version: 2.5.3<br>
+				Version: 2.5.4<br>
 				&copy; 2015 Copyright Reserved<br><br>
 				
 				Check out the <a href="https://github.com/GaurangTandon/ProKeys">change log and source code on GitHub!</a><br><br>
@@ -377,4 +378,4 @@ <h1>Backup, Restore and Print</h1>
 		</div>
 	</main>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/html/popup.html b/html/popup.html
index 5412bd1..61b96b6 100644
--- a/html/popup.html
+++ b/html/popup.html
@@ -50,4 +50,4 @@
 	<!--used to fade the body when modal is shown-->
 	<div class="fade"></div>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/js/background.js b/js/background.js
index c5bde7d..c041456 100644
--- a/js/background.js
+++ b/js/background.js
@@ -22,7 +22,7 @@ chrome.runtime.onInstalled.addListener(function(details){
 	}else if(details.reason === "update"){
 		version = chrome.runtime.getManifest().version;
 		title = "ProKeys updated successfully to v" + version;
-		text = "Please reload active tabs to use new version. Major changes:\nArithmetic support in date/time macros. For more, visit the changelog in \"About\" page.";
+		text = "Please reload active tabs to use new version.\nThis version implements bug fixes and other updates";
 	}
 
 	// either update or install was there
@@ -47,4 +47,4 @@ chrome.runtime.onMessage.addListener(function(msg, sender){
 			}
 		});
 	}
-});
+});
\ No newline at end of file
diff --git a/js/detector.js b/js/detector.js
index f58e375..7a35ea9 100644
--- a/js/detector.js
+++ b/js/detector.js
@@ -1556,9 +1556,8 @@
         return node.className.search('(\\s|^)' + className + '(\\s|$)') != -1 ? true : false;
    }
 
-	// attaches event to document
-	// receives `this` as the function to call
-	// on event
+	// attaches event to document receives
+	// `this` as the function to call on event
 	function eventAttacher(event){
 		var node = event.target;
 
@@ -1649,4 +1648,4 @@
 			}
 		});
 	}
-})();
+})();
\ No newline at end of file
diff --git a/js/options.js b/js/options.js
index 79a5e50..ed2811e 100644
--- a/js/options.js
+++ b/js/options.js
@@ -2,7 +2,7 @@
 	"use strict";
 
 	window.onload = init;
-
+	
 	var storage = chrome.storage.local,
 		DataName = "UserSnippets",
 		Data = {
@@ -542,8 +542,8 @@
 			return false;
 		});
 
-		$(".tryit .nav p").on("click", function(){
-			var ots, s = "show", t = ".tryit "; // otherSibling
+		$("#tryit .nav p").on("click", function(){
+			var ots, s = "show", t = "#tryit "; // otherSibling
 			
 			if(!this.hasClass("show")){
 				// hide current
@@ -570,6 +570,10 @@
 		function showHideDIVs(newID){
 			$("#content > .show").toggleClass("show");
 			$("#content > #" + newID).toggleClass("show");
+			// the page shifts down a little
+			// for the exact location of the div;
+			// so move it back to the top
+			document.body.scrollTop = 0;
 		}
 		
 		$("#btnContainer button").on("click", function(){
@@ -687,15 +691,10 @@
 
 		var url = window.location.href;
 
-		if(/#\w+$/.test(url))
+		if(/#\w+$/.test(url) && (!/tryit|symbolsList/.test(url)))
 			// get the id and show divs based on that
 			showHideDIVs(url.match(/#(\w+)$/)[1]);
-
-
-		// set scroll to zero because somehow it scrolls below
-		//?
-		document.body.scrollTop = 0;
-
+		
 		// boolean parameter transferData: dictates if one should transfer data or not
 		function storageRadioBtnClick(str, transferData){
 			var bool = false,
@@ -822,95 +821,84 @@
 			alert("Use this text to print snippets");
 		};
 
-		function resetHotkeyListenerData(){
-			// counts keypress of keys other than ctrl/shift/alt/meta
-			hotkeyListener.dataset.letter_counter = "0";
+		// prevent exposure of locals
+		(function(){
 			// stores hotkey combo
-			hotkeyListener.dataset.key1 = "";
-			hotkeyListener.dataset.key2 = "";
-		}
-
-		resetHotkeyListenerData();
-
-		// does not catch shift/ctrl/alt
-		hotkeyListener.onkeypress = function(){
-			// increase by one
-			this.dataset.letter_counter = parseInt(this.dataset.letter_counter, 10) + 1;
-		};
-
-		hotkeyListener.onkeydown = function(event){
-			var arr = [];
-
-			// first element should be the modifiers
-			if(event.shiftKey) arr.push("shiftKey");
-			else if(event.ctrlKey) arr.push("ctrlKey");
-			else if(event.altKey) arr.push("altKey");
-			else if(event.metaKey) arr.push("metaKey");
-          
-			// then push the key also
-			arr.push(event.keyCode);
-
-			// set the keys
-			this.dataset.key1 = arr[0];
-			this.dataset.key2 = arr[1];
-		};
-
-		hotkeyListener.onkeyup = function(){
-			var keyCombo = [this.dataset.key1, this.dataset.key2 === "undefined" ? void 0 : this.dataset.key2],
-				nonMetaKeyIndex = keyCombo[1] ? 1 : 0;
-
-			// dataset.nonmetakey was string; change it to integer and store
-			try{
-				keyCombo[nonMetaKeyIndex] = parseInt(keyCombo[nonMetaKeyIndex], 10);
-			}catch(e){
-				// nothing can be done
-			}
-
-			var bool_a = parseInt(this.dataset.letter_counter, 10) === 1,
-				bool_b = (keyCombo.length === 2 || keyCombo.length === 1),
-				bool_c = (typeof keyCombo[nonMetaKeyIndex] !== "string"),
-				bool_d = keyCombo[nonMetaKeyIndex] === 13 ||  // key2 can be enter key or
-							/./.test(String.fromCharCode(keyCombo[nonMetaKeyIndex])); // key2 must be some letter, symbol, digit
-
-			if(bool_a && bool_b && bool_c && bool_d){
-				Data.hotKey = keyCombo.slice(0);
+			var	combo,
+				// determines if keyCode is valid
+				// non-control character
+				valid;
+			
+			// the combo refreshes with every key down
+			// so we don't need keyCount to keep track of
+			// number of keys pressed
+			hotkeyListener.on("keydown", function(event){
+				var arr = [], keycode = event.keyCode;
+
+				// first element should be the modifiers
+				if(event.shiftKey) arr.push("shiftKey");
+				else if(event.ctrlKey) arr.push("ctrlKey");
+				else if(event.altKey) arr.push("altKey");
+				else if(event.metaKey) arr.push("metaKey");
+			  
+				// below code from 
+				// http://stackoverflow.com/questions/12467240/determine-if-javascript-e-keycode-is-a-printable-non-control-character
+				// http://stackoverflow.com/users/1585400/shmiddty
+			  
+				// determine if key is non-control key
+				valid = 
+					(keycode > 47 && keycode < 58)   || // number keys
+					keycode == 32 || keycode == 13   || // spacebar & return key(s)
+					(keycode > 64 && keycode < 91)   || // letter keys
+					(keycode > 95 && keycode < 112)  || // numpad keys
+					(keycode > 185 && keycode < 193) || // ;=,-./` (in order)
+					(keycode > 218 && keycode < 223);   // [\]' (in order)
+			  
+				if(valid)
+					// then push the key also
+					arr.push(keycode);
+
+				// set the keys
+				combo = arr.slice(0);
+			});
 
-				DB_save(function(){
-					// display current hotkey combo
-					$(".hotkey_display").innerHTML = getCurrentHotkey();
+			hotkeyListener.on("keyup", function(){
+				var len = combo.length,
+					nonMetaKeyIndex = len === 2 ? 1 : 0;
+								
+				if(valid){
+					Data.hotKey = combo.slice(0);
 
-					hotkeyListener.blur();
-				});
-			}else{
-				alert("Setting new hotkey failed!");
-				if(!bool_a)
-					alert("Hotkey combo was missing a key other than ctrl/shift/alt/meta key. Or, it was a key-combo reserved by operating system. Or, you may try refreshing the page.");
-				else if(!bool_b)
-					alert("Hotkey combo length is greater than 2, or is zero.");
-				else if(!bool_c)
-					alert("Please press the shift/ctrl/alt key you want to use first, and then the second key.");
-				else if(!bool_d)
-					alert("Unable to detect the second key.");
-			}
-
-			changeHotkeyBtn.disabled = false;
-			changeHotkeyBtn.innerHTML = "Change hotkey";
-		};
+					DB_save(function(){
+						location.href = "#settings";
+						location.reload();
+					});
+				}else{
+					alert("Setting new hotkey failed!");
+					alert("It was missing a key other than ctrl/alt/shift/meta key. Or, it was a key-combo reserved by the Operating System. \
+							Or you may try refreshing the page. ");
+				}
 
-		changeHotkeyBtn.onclick = function(){
-			this.disabled = true; // first diable the button
-			this.innerHTML = "Press new hotkeys";
+				changeHotkeyBtn.disabled = false;
+				changeHotkeyBtn.innerHTML = "Change hotkey";
+			});
 
-			resetHotkeyListenerData();
+			changeHotkeyBtn.on("click", function(){
+				this.disabled = true; // first disable the button
+				this.innerHTML = "Press new hotkeys";
 
-			hotkeyListener.focus();
+				combo = ["", ""];
+				valid = false;
+				
+				hotkeyListener.focus();
 
-			// after 10 seconds, automatically reset the button to default
-			setTimeout(function(){
-				changeHotkeyBtn.disabled = false;
-				changeHotkeyBtn.innerHTML = "Change hotkey";
-			}, 10000);
-		};
+				// after five seconds, automatically reset the button to default
+				setTimeout(function(){
+					changeHotkeyBtn.disabled = false;
+					changeHotkeyBtn.innerHTML = "Change hotkey";
+				}, 5000);
+			});
+		})();
 	}
 
 	DB_load(function(){
@@ -960,4 +948,4 @@
 		// display current hotkey combo
 		$(".hotkey_display").innerHTML = getCurrentHotkey();
 	}
-})();
+})();
\ No newline at end of file
diff --git a/js/popup.js b/js/popup.js
index bb33bc2..9cec389 100644
--- a/js/popup.js
+++ b/js/popup.js
@@ -966,11 +966,11 @@
 			showErrors(snipSValBox, snipLValBox, vldS, vldL);
 		});
 		
-		function searchButtonClick(title, text, searchModeBool){
+		function searchButtonClick(title, textToSet, searchModeBool){
 			var s = "shown", h = "hidden";
 			
 			this.toggleClass("shortened");
-			text(this, text);
+			text(this, textToSet);
 			this.setAttribute("title", title);
 
 			searchField.toggleClass(s);
@@ -982,7 +982,7 @@
 
 		searchButton.on("click", function(){			
 			if(!this.hasClass("shortened")){
-				searchButtonClick.call(this, "Done", "Click when done searching", true);
+				searchButtonClick.call(this, "Click when done searching", "Done", true);
 
 				// 1000 => after animation finishes; focus searchField
 				setTimeout(function(){
@@ -1163,4 +1163,4 @@
 			chrome.runtime.sendMessage("inject");
 		});
 	}
-})();
+})();
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index fd704c6..cb69f64 100644
--- a/manifest.json
+++ b/manifest.json
@@ -3,7 +3,7 @@
 
   "name": "ProKeys",
   "description": "Save time and effort in emails, etc. with ProKeys! Define snippets, do math in browser, auto complete braces, and much more.",
-  "version": "2.5.3",
+  "version": "2.5.4",
   
   "author": "Gaurang Tandon",