8.3 Autosave

So let's say you are coding, and usually upon each save, you will come back to the browser and refresh to see the changes. Can we do better, and save that amount of time coming back to the browser and refreshing it with each single save? Yes, we can. And this video will deal with three such tools that can help us do that. The very first one is called CodeKit. We have gone through CodeKit while dealing with some of the abstractions for styles, as well as markup. The second one is LiveReload, it comes with a Chrome extension. And the third one is called the Tincr. Over here, we can also change the code in the Chrome DevTools and it will be reflected in our text editor. Now before we get started, let's briefly look at our very simple code. Now this is our code, so in our desktop, we just have two files which is index.html with a hello h1 tag here. And then simply a style.css. So this is exactly what it looks in the browser with very simple index.html and style.css. Now let's open up CodeKit. CodeKit is a very simple GUI driven application. So the very first thing we will do is add project. And once we do that, we select the folder, for our case, it's really simple, it's just the desktop. So notice here, it is just tracking the file index.html and style.css. And if you click each of the file, you will see some of the options here. So obviously, we will uncheck don't reload. And just insure that the style.css is also unchecked. And now when we come back to index.html, notice that in the browser, I'm actually running a static file. Let me do some changes, hello with the two exclamation mark. And once I save, I didn't even have to come back to the browser to refresh it. It does it at the same time. Now imagine if you have a browser on one monitor and your text editor on another monitor, or if you want, you can even split the text editor and browser in this manner, you can also see the changes. Let's try it a little bit more. How about yellow as a background, and maybe color is red. Once you save it, there you go, the style is immediately reflected here. Why don't we do with a CSS preprocessor? So I'm gonna delete style.css. And instead, I'm gonna create a new file and call style.sass. So let me come back to CodeKit once again. And let me refresh the project. So right-click here and refresh selected project. Now over here, we can set the output part. So let me do that. So, set the output path. Let's simply give it to the desktop. Great. And one style.sass is being watched. Let's go back to our text editor. Notice that it will come back to the default styles because my style.sass is completely empty. Why don't we try out some Sass syntax? So let me change the Sass syntax. And let's say in the body I will try, background-color of, say, purple. And it immediately changes. And let's see, for header 1, I will try a color of yellow. And there you go, it is being reflected even with the CSS preprocessor. Next, I will quit CodeKit, and I will go onto the next two, which is LiveReload. Now, LiveReload will do something very similar to CodeKit, and it is actually a paid app. But I definitely think it's worth it, so I bought it. And it also does CSS preprocessors and even CofeeScript. Now for LiverReload, you will need two things. Firstly, you will need to install the Chrome extension, so let's add it to the Chrome. Once you click Add, you will notice this little ring that will appear as part of the extension. In order to get started with LiveReload, we will first have to initiate the sites folder. So let me go ahead and click the Add button. And yes, for us, it will still be the desktop with the simple index and the style.css. Now, once we have set the project folder, the second thing we need to do is serve up the web page index.html with a web server. And as we learned in the previous video, we will simply do server which is an alias for Python's SimpleHTTPServer. Now once we do that, notice here how unlike CodeKit, we are serving this page via a web server. So let's do some changes, I'm gonna do h1 here, and save. Well, nothing is happening. This is because we will need to enable the LiveReload by clicking the Chrome extension. So let me do that once, and just refresh it. So once that done, you will notice that the symbol will contain a solid black, to, you know to that it is enabled. Now after this when I go to style.css, and let me just make a little change and there you go, it will be immediately reflected. This time, just like a CodeKit, why don't we try with some CSS preprocessor? So in order to do that, we need to enable it, so I'll say compile SASS and let's look at some of the options. So Ruby system, I'll just put up the latest one. I think it looks fine. And yup, I'll set it to apply. Now I will delete the style.css and this will come back to the default. And now let me create style.sass. And here, I will simply say body. How about background-color as wheat. There you go, the color is immediately changed. And similarly, you can go onto h1 and choose a font-family of let's say Helvetica. And there you go, you will have a sensory font-family here. Lastly, we will go through Tincr. And here we will also edit the files inside the Chrome DevTools. And it will be reflected in our text editor. So let's see how to make that happen. Now once we click the the download Tincr, it will actually take us to the Chrome extension. So do go through the documentation of Tincr which is really easy. So let's go ahead and download Tincr first. And just like LiveReload, I'll also add it to Chrome. Next, I will start off my project with a very simple web server. And this case, I'll use Python SimpleHTTPServer. So there you go, this is being served up by the web server. Now I will do a simple inspect element so that the Chrome DevTools can be seen. And if you'll notice, in the panel, we will have one more item. So let me just, put this full screen and show you. There you go, it will be Tincr. So firstly, let me come onto the Tincr project and let's choose a project file. For this case, it will be HTTP Web Server. Next, let's browse to the root directory. And yep, it will still be our desktop. And next, yes, let's auto-refresh it, let's save it from DevTools to the file system as well, and lastly, let's set to the file path. And, once again, I will choose index.html on the desktop. And I'll just make sure that auto-refresh performs a full page refresh option here. Looks like we are all good to go. So this time, let me split the screen. And firstly, I will come ahead and make some changes here, say hello, and there you go, it's changed here. And what about style.css? Let's say background, this time, I can choose tan. Yup, it is also changed. Now this is something we already saw in CodeKit as well as LiveReload. So let me go ahead and choose the header 1. And here, I will choose style.css. Why don't I make the background color something different to let's say lightcyan. And when I save it in my Chrome DevTools and come back to my text editor, notice that the text editor has denoted the change as well. Let's say I add to h1 a color of say coral and notice once I save here and come back to my cell.css, the color has been added. So Tincr will basically allow you to add on the changes that you have made inside the Chrome DevTools and transfer it directly to the text editor. So I hope these three little tools, CodeKit, LiveReload and Tincr has shown you how you can immensely save your time by just editing and saving it. And immediately, the browser will show the changes. This is definitely a big productive activity boost for any coding.