Does Sublime Text support live editing of files?
I'm looking for a better workflow. I really like Sublime Text, but recently I've been spoiled by the "Live Editing" capabilites of tools like Codepen.io and (recently tested) Adobe Brackets. When I go back to Sublime, even Live Reload seems clunky in comparision.
Live Reload: Press Save To Preview..
I'm using the LiveReload Chrome plugin, and depending on the project (Ruby or JS) I'll use Guard or Grunt to watch system files. I like LiveReload. But having to press 'save' on a file to see its changes in the browser is driving me nuts. Even with CSS style injection (no full browser reload), I'm flying blind in comparision to Codepen and Brackets which have instant updates as you type.
Other Tools
** GUI Tools **: I've heard of tools like Codekit and Hammer. Please correct me if I'm wrong, but they seem to do exactly what Gaurd and Grunt do—except no command line.
** Chome Tools Spaces **: The ability to edit Sass in the browser is cool. I've set this up, but I rarely use it. Editing HTML/CSS/Sass in Sublime Text is superior to Chrome Tools in every way. And to that point, it is far superior to Adobe Brackets which is why I don't (at this point) considering using it (Also it seems most of Brackets 'cool features' work on vanilla CSS, and not on Sass).
**Live Style: I've tried this, and I just can't get it to work.
I must have Googled "Live editing Sublime", "Live Refresh Codepen Sublime Text", etc.. a thousand times this year and results have been pretty lousy.
If anyone has any gems of information regard this to add to this PLEASE POST THEM!
Yes it does, all you need is takana: https://github.com/mechio/takana
This tool creates a little server which interacts in live the the loaded css of the page. All you need is to setup the server and add the javascript snippet to your html code (you will obviously remove it afterwards…).
For now only OSX, live editing is even working on different browsers. Welcome to the awesome!
Related
I'm running sublime 3084 OSX 10.10.3 and i have three tabs open, one html document, one css and one javascript file. I have linters for all three installed but whenever I open the program only the css linter (csslint) and either the html or the javascript linter, but not both, work. If I open the program with the javascript tab open, that linter works. If I open the program with the html document open, that linter works. csslint works regardless. Does anyone know of this issue or possible bug? If so I would greatly appreciate some help, it's really frustrating.
Thanks in advance
With the release of Firefox 25 we saw a huge improvement in their development tools. SO much so that I'm rather excited to try them out over Firebug.
However I can't see how to turn on Sass debugging, which is currently working in Firebug. I've looked in all the settings that are offered within the development settings.
I'm hoping I'm wrong and it is currently supported.
With Firefox 29 the support for Sass and LESS files was introduced.
Taken from https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/
You have to right-click in the Rules section and activate Show original sources option:
Now CSS rule links will show the location in the original file, and
clicking these links will take you to the source in the Style Editor.
From there you can go on to the Styles Editor and edit your Sass/LESS file. Functionality needs Source Maps enabled!
The best suitable way to debug Sass in Firefox seems to be FireSass.
https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/
I have both dreamweaver CS5.5 and Visual Studio Ultimate 2010. Both programs I love, but I really want a way to complete all of my front end coding in Dreamweaver, and then work with the database in VS.Net.
I have been completing this by making all of the pages in VS.Net, and then clicking 'open with' Dreamweaver afterwards. Although each time I open the .master file with Dreamweaver it collapses into blank coding, propbably because it doesn't recognise it. I have researched this before,and tried to solve the problem by adding content to the documentType folder but nothing has happened. I really need some support in Dreamweaver because I am alsways changing the design of my pages, and each page uses a materpage file.
The other problem is the masterpage uses .swf files and javascript alot, which is a pain to use in VS.Net, as the code hinting doesn't work properly.
Does anyone have a solution to this problem?
I havent tested it yet, but take a look at this: http://alexle.net/archives/119
Go to **[Your_Drive_Here]:\Program Files\Macromedia\Dreamweaver MX 2004\Configuration**
Open the file Extensions.txt and add your custom extensions to the list.
...
Go to the DocumentTypes folder (still in the same path), edit the file MMDocumentTypes.xml\ (fullpath: [Your_Drive_Here]:\Program Files\Macromedia\Dreamweaver MX 2004\Configuration**DocumentTypes\MMDocumentTypes.xml**) with a Text Editor (i.e. Notepad or Notepad++). It’s not advisible to edit this particular xml file with Dreamweaver as the software may go crazy as it’s being used to edit itself.
Go to l*ine 67*, add the THTML extesion to the winfileextension and macfileextensionlist attributes. Here is the code exerpt
This instructions are for Dreamweaver MX 2004, but may work changing Macromedia\Dreamweaver MX 2004 for Adobe\Adobe Dreamweaver CS5.5 (I don't have CS5.5, but assuming this had not changed until CS4 (my version), it will be there.
Often times I use "edit css" functionality in web developer extension to edit my style sheets.
It's a great feature but it takes time to edit the css and copy it back to an editor to save it.
I am planning to use Compass for my next project and I am wondering how I can use "edit css" functionality with SASS/Compass.
There's no way to do this the way you're expecting.
The flow will have to work like the following ->
Write Compass/SCSS -> Refresh Page -> Edit CSS to get results -> Re-Edit SCSS with previous step and or copy/paste.
Because it compiles down, there's no solution I know of yet that hooks it back in to the SCSS layer.
I don't think it will be much different from what you're doing now..
Compass will precompile the stylesheet written with Sass/SCSS, it will be a regular stylesheet by the time it reaches the browser, so if you then use the "edit CSS" function of your browser toolbar it will work the same way as you do now only you will need to go back to the SASS/SCSS file and insert the changes into the right place (e.g. it could be in a nested rule or mixin or function, depending on how you've written the SASS/SCSS file) - then Compass can recompile the stylesheet
Codekit
Codekit is a great product for OSX that will allow you to edit your local files and as you hit save it will automatically inject the new compiled stylesheet into your browser without a page refresh, so it will at least save you that step. However, as of yet there is no Windows counterpart that I'm aware of.
I've used Codekit on a pretty large project recently where we were using SCSS and it was certainly helpful. Although sadly, like you, I'm used to the "Edit CSS" Web Developer Toolbar workflow, and I've yet to find an exact translation over into the SASS world.
Web Putty
One other option that has some potential (but some SERIOUS drawbacks) is a open source framework from Fog Creek called Web Putty. It was a service they offered that allowed you to live edit CSS in the browser, including SASS and SCSS flavored CSS, but they stopped the service and simply open sourced the software so getting it setup is entirely on you and requires quite some effort (THATs the drawback).
This is possible now with experimental support for Sass in the Chrome dev tools.
First enable the support for Sass:
Then make sure you're compiling to anything other than compressed and enable debug info in Sass. If you're compiling from the command line, pass the --debug-info flag, if you're using Compass, add this to your config.rb:
sass_options = { :debug_info => true }
Presto, you have access to the Sass source in the dev tools:
Clicking on the line number in the dev tools will allow you to edit and apply the local changes:
Personally, I prefer to use compass watch in conjunction with LiveReload and edit in my editor, but for those of you that like to edit in the browser, you can now edit the Sass files directly.
Don't forget to compile to compressed before deploying.
What command-line utility renders HTML as Firefox would, creating a
static image, without actually running Firefox and xwd (or ScreenGrab,
etc)?
Since all of Firefox's rendering libraries are open source, I'm
assuming someone's written something like this? It would be very
useful.
I realize static images can't have Flash animation (animated GIF/PNG
notwithstanding), JavaScript, etc, so I'm just looking for something
that renders plain HTML.
html2ps is worth a try, although it does not seem to use the css style sheets. This is a serious limitation.
On Debian/Ubuntu, it is provided as a package, so the classical sudo apt-get install html2ps will be fine.
(I know this has been given in the comments, but for the future reader, I thought it might be easier to find as an answer.)
You could write a small script which simply runs firefox using the command line options does a screen-shot, then closes firefox. Should only be about 3 lines of code to get started.
firefox -url http://mysite.com/homepage.php
https://developer.mozilla.org/en/Command_Line_Options