Browsersync
When we do Web development, we make some changes and refresh the page to see what happens. Browsersync lets you skip the latter step by simply changing your web file save, monitoring changes to the file (HTML/JS/CSS) and automatically refreshing the page so you don’t have to manually refresh the page. Good!
Image from Internet
The real power of Browsersync is in cross-device synchronization. You can open a web page you’re working on at the same time on your desktop, phone, tablet, etc., and actions on any one page (click, scroll, form fill, submit) are automatically synchronized on all the other pages! Of course, the same browser on the same machine or multiple pages in different browsers will work, too.
Image from Internet
For example, if you open a specific page on two computers (Win and Mac), an Android phone and an iPad tablet at the same time, any changes you make to a file will automatically refresh on each of the four browsers. Scrolling or clicking a link on any of the open pages will do the same on all the other pages. This greatly increases your development and testing efficiency on multiple devices and browsers!
Installation and use
1. Install
Shell
|
npm install–gbrowser–sync |
2. To enable
Shell
|
browser–sync start—server—files“css/*.css” |
The command above starts a simple Web Server for static web pages and monitors CSS file changes. Proxy mode is used for dynamic pages:
Shell
|
browser–sync start—proxy“myproject.dev”—files“css/*.css” |
Additionally, Browsersync can be integrated with Gulp or Grunt.
After the service is started, the default service address is http://localhost:3000 or http://your-ip:3000. Use a browser to open the page under this address.
http://localhost:3001 is a configuration page for Browsersync, where you can set synchronization options, speed emulation, and more.
In addition to Browsersync, another similar tool is LiveReload.
WhatFont
If you want to know WhatFont to use in a particular place on a page, try WhatFont! It is a Chrome extension that displays the font used for text at any point of the mouse.
Alfred
Alfred is another great Mac productivity tool. It can help you quickly open a program, file/folder, perform custom searches, etc. Spotlight, which comes with the Mac, has gotten a lot better in recent years. However, Alfred has many additional capabilities.
By Kay Han. This series of articles was based on The Totally Tooling Tips video series from Addy & Matt, introducing some of the tools and Tips favored by developers.
Unless otherwise stated, the content of this article is licensed under the Creative Commons Attribution 3.0 license, and the code samples are licensed under Apache 2.0. Please check our terms of Service for more details.