This patch is then transmitted to all clients and is applied to the associated CSS source. Whenever you update a CSS source, it performs structural comparisons with the previous state and creates a special patch that describes how the CSS structure was changed. “in body, change background value to red,” he can perform the very same changes in his own CSS file and get the very same result! Your answer could be: “On line 2, I replaced the characters from 12 to 16 with the word red.” But I’m pretty sure your answer will rather end up being: “In the body selector, I changed the background property value to red.” In other words, instead of describing how bytes were changed within the text file, you would describe how the structure of the CSS file was changed.īut the thing is, if you pass this very same information to another developer, i.e. Imagine you’re editing a CSS file and I ask you, “What did you just change?” It maps changes from one source to the other. Unlike other tools, it does not work directly with files, nor does it replace them in the browser or editor. To solve these issues, LiveStyle was created. The browser or editor must receive only the updated sections, not the entire source. The editor should be able to talk to the browser directly, without using any files or Web servers. Any middleware between the browser and editor.So, you don’t have much options now, right? If you ask me, there are two things that must be eliminated: In some large projects, you can’t use a local file system - your files might be in your private sandbox on the dev server.You can’t get the DevTools changes back into your file since (concatenated and minified) CSS within browser is not the same as your source code.You can’t use the tooling Web server because you need to use your own one for backend/CMS.In some cases, use a special tooling Web server.Īll of these tools work just fine once you’ve started your project development, but what happens when your website goes into production? What if you concatenate and minify your CSS code for better performance and UX? Most of these tools become pretty much useless:.Keep your files in a local file system.Use the same CSS files in your text editor and Web browser. Summing up, to use these tools for truly live development (deliver updates from editor to browser and vice versa), you have to: There are a few tools like Tin.cr that allow you to save your DevTools changes back to the file (the Chrome Dev team introduced Chrome Workspaces recently for this very same purpose). Getting changes from DevTools back into your CSS file is not so popular. But in order to use live edit, they require a special built-in Web server to be used to properly map your local files with browser URLs. They send the updated file content to the browser every time you change something. Editors like Brackets and WebStorm integrate with Web browsers (more specifically, with Google Chrome) directly and allow you to see updates instantly, e.g. You can use these tools together with preprocessors so your webpage gets updated automatically whenever you save your LESS or SASS file.Ībout a year ago, a new breed of live editing tools appeared. Not exactly a “live” update, but this simplicity has its own benefits. So users have to edit the CSS file and save it before they can preview the changes. Most live reload/edit tools work in a pretty simple manner: They look out for CSS files in a special folder and update the Web browser once something has been changed. In order to better understand how LiveStyle works, let us first take a look at the current state of live edit tools. Unlike other live editors, it doesn’t simply replace a whole CSS file in a browser or an editor, but rather maps changes from one CSS file to the other. This plugin takes a completely different approach on updating CSS. The tool I’d like to introduce to you today is Emmet LiveStyle. Today, we present LiveStyle, a plugin for live bi-directional (editor ↔ browser) CSS editing of the new generation! - Ed. All of them have been developed and released by active members of the Web design community as open-source projects. In the past, we featured some exciting tools and libraries: PrefixFree, Foundation, Sisyphus.js, GuideGuide, Gridpak, JS Bin and CSSComb. So, why would someone ever need to create yet another tool and even call it a “live CSS editor of the new generation”? You may already be familiar with tools like LiveReload, CodeKit and Brackets. Tools for live CSS editing aren’t new these days.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |