Posts

Showing posts from June, 2020

Emmet in Sublime Text 3

Image
Emmet is a very useful plugin to boost the productivity and save time. It helps in development of product with more efficiency. In Sublime Text 3 Emmet auto completes the syntax for web design languages like HTML and CSS. To install Emmet follow this :   Sublime Text 3 >> Preferences >> Package Control >> Install Package >> Emmet. Syntax for Emmet : Child: > nav>ul>li <nav> <ul> <li></li> </ul> </nav> Sibling: + div+p+bq <div></div> <p></p> <blockquote></blockquote> Climb-up: ^ div+div>p>span+em^bq <div></div> <div> <p><span></span><em></em></p> <blo

Color Picker in Sublime Text 3

Image
While developing the web page, everyone must have faced the problem in finding the color code during testing that which color is suitable. It is hard to change and guess the color code value. To solve this problem there is a plugin named Color Picker in Sublime Text 3 which makes possible to chose color based on hex value, RGB value, HSL value or directly using the color picker. Follow these to install color picker : Sublime Text 3 >> Preferences >> Package Control >> Install Package >> ColorPicker Now search for ColorPicker and click on it to install. Once the Color Picker has been installed then it can be launched using the shortcut command Ctrl+Shift+C . If not launching then try to restart the Sublime Text 3. ( Color Picker Interface )

LiveReload and Auto-save simultaneously in Sublime Text 3

Image
Every front end developer must have encountered the problem that every time the web code is updated in the editor they have to refresh the browser each and every time. It becomes a hectic when the code is updated very often and the result is observed in parallel. So, here's the solution for this problem. This tutorial is for Sublime Text 3 Editor. The solution is to install the LiveReload plugin in Sublime Text 3 and its extension in the browser. Refer for tutorial on installing LiveReload . While writing the website code in Sublime Text 3, it lacks for Auto-Saving the code. Repeatedly saving of code lead to less efficiency of the web coder. To over come this a plugin named Auto-Save can  be installed. Refer for tutorial on installing Auto-Save . Now as you have installed Auto-Save and LiveReload  plug-in, so whenever auto-save triggered to save the file the change can be seen Live in the browser.

Auto save in Sublime Text 3

Image
While writing the website code in Sublime Text 3, it lacks for Auto-Saving the code. Repeatedly saving of code lead to less efficiency of the web coder. To over come this a plugin named Auto-Save can  be installed. To install the plugin follows the steps given below. Steps to install and enable Auto-Save: Step 1 : Sublime Text 3 >> Preferences >> Package Control >> Install Package >> Auto-Save   Step 2 : Preferences >> Package Setting >> Auto-Save >> Key Bindings-User A file will open and copy the below code to the file. It will bind commands to turn the plugin on or off. [     {"keys":["ctrl+alt+s"],"command":"auto_save" ] and now save this file. To toggle it for only the current file, and instruct to make a backup of the file instead of saving the file itself, you could add: [ {"keys": ["ctrl+al

LiveReload webpages during editing in Sublime Text 3

Image
Every front end developer must have encountered the problem that every time the web code is updated in the editor they have to refresh the browser each and every time. It becomes a hectic when the code is updated very often and the result is observed in parallel. So, here's the solution for this problem. This tutorial is for Sublime Text 3 Editor. The solution is to install the LiveReload plugin in Sublime Text 3 and its extension in the browser. Follow these steps to load the LiveReload package in ST3: Step 1 : Go to Sublime Text 3 Preferences >> Package Control >> Install Package >> LiveReload * Wait for a while to load the below search box and type for LiveReload when the library loads :  Step 2 : Restart the Sublime Text 3. Step 3 : Go to chrome and navigate to extension store in chrome to install the LiveReload extension for Chrome. Step 4 : Now in chrome go to More too