Like it or not, I end up having to detract for writing code, and work with css. I started using Tm for this the other day. Great auto complete in the css markup, that truly is a time saver.
I see a lot of people use FireBug to open a css file left side, browser on right, and start seeing in real time their changes. This is probably the best way to do CSS dev IMO, not refreshing a page and seeing it happen in real time is a real time saver.
I am not a huge fan of FireFox, or Firebug, and it is not a solid solution, you can not save, there are some deficiencies.
Apple's Web Inspector tool gets me part there, but you can only edit CSS in their fields, can not get raw access to a file.
I see in TM I can do a "Show Web Preview", which is pretty nice. It is not pure real time. Why is this? Why can something like FireBug do real time updates, but TM is more on a schedule? Not knocking it, I am genuinely curious about the technical aspects of how this is working.
The trouble is, I do not want to do inline CSS editing, I want to edit the references CSS file. If I open a html file, which has a link to a .css file, make change to the .css file, the .html file that is open in the web preview is not updated. I have to toggle back to the .html file, make a space or other change, and then I see the update.
Any other way to trigger the update from the linked file?
TM also only works on local files. If I am working on a remote file over ssh/ftp all image links will be broken, so something as simple as <img src="icons/blue.png" /> which would load in a browser just fine, will be broken in the web preview.
Any suggestions to get out of the change/save/switch/reload cycle that is going to give me carpal tunnel syndrome soon enough.
I am going to look at CSSEdit as some others have suggested, but I really do not want to add another huge dev tool to the list of things I need to learn, and I am already 110% happy with hose TM auto completes CSS.
If you use firefox and you do cmd-shift-r you will get an updated web page, in safari I think its like shift-r or cmd-r. Firebug has plans to allow you to download your css changes.
I am not sure I understand? cmd-r is just refresh in Safari. Shift-r is just a capital R.
On May 2, 2009, at 5:18 PM, alex kessinger wrote:
If you use firefox and you do cmd-shift-r you will get an updated web page, in safari I think its like shift-r or cmd-r. Firebug has plans to allow you to download your css changes.
what I am saying is. In firefox you may not see changes reflected in the browser when you just click refresh, because of the browser cache. In firefox if you use cmd-shift-r it overrides the cache as gets the latest files.
You can see it here http://support.mozilla.com/si/kb/Keyboard+Shortcuts
On Sat, May 2, 2009 at 5:27 PM, Scott Haneda talklists@newgeo.com wrote:
I am not sure I understand? cmd-r is just refresh in Safari. Shift-r is just a capital R.
On May 2, 2009, at 5:18 PM, alex kessinger wrote:
If you use firefox and you do cmd-shift-r you will get an updated web page, in safari I think its like shift-r or cmd-r. Firebug has plans to allow you to download your css changes.
-- Scott * If you contact me off list replace talklists@ with scott@ *
textmate mailing list textmate@lists.macromates.com http://lists.macromates.com/listinfo/textmate
Right, but this entire process of refreshing a page is what I am wanting to get away from. I want a window of code on one side, and a window of a browser on the other.
I guess what I am looking to do is get TM's "Show Web Preview" to follow <head> links, and when working on remote files, I would like it to know the URL the file is at, so it can locate all the images and other resources.
ExpanDrive may solve the broken images issues, but it is not going to solve the problem of a page that needs to be parsed with a language before I get a chance to see the resulting rendered html.
I looked at CSSEdit, it does all I need, but their auto-complete system just does not hold candle to TM.
On May 2, 2009, at 5:32 PM, alex kessinger wrote:
what I am saying is. In firefox you may not see changes reflected in the browser when you just click refresh, because of the browser cache. In firefox if you use cmd-shift-r it overrides the cache as gets the latest files.
You can see it here http://support.mozilla.com/si/kb/Keyboard+Shortcuts
On Sat, May 2, 2009 at 5:27 PM, Scott Haneda talklists@newgeo.com wrote:
I am not sure I understand? cmd-r is just refresh in Safari. Shift-r is just a capital R.
On May 2, 2009, at 5:18 PM, alex kessinger wrote:
If you use firefox and you do cmd-shift-r you will get an updated web page, in safari I think its like shift-r or cmd-r. Firebug has plans to allow you to download your css changes.
FWIW, CSSEdit is a pretty strong app in this regard, were it not for the poor auto completion in the app, I would probably take the time to learn it.
I am pretty sure TM has the flexibility to work how I need it to, just a matter of figuring it out. This comes back to my previous post of wanting to get host, path, and URL/URI data in TM from remote ftp apps. With this data, there is a lot more than could be done, like downloading images and files in the background. As it is now, TM has no way to know what the remote host is.
I have a feeling not too many people do a lot of html and css in TM, and more use it for programming, so this is going to be a tough one to solve on my end.
Appreciate any suggestions anyone who does spend some of their time doing css in TM. Thanks.
On May 2, 2009, at 4:47 PM, Scott Haneda wrote:
I am going to look at CSSEdit as some others have suggested, but I really do not want to add another huge dev tool to the list of things I need to learn, and I am already 110% happy with hose TM auto completes CSS.
On May 4, 2009, at 1:56 AM, Scott Haneda wrote:
FWIW, CSSEdit is a pretty strong app in this regard, were it not for the poor auto completion in the app, I would probably take the time to learn it.
If you have CSSEdit you can
1. Open the CSS file in its editor. 2. Open the HTML file in its previewer. 3. Choose Edit in TextMate… to (re)open the CSS file in TextMate. 4. Edit the file in TM. Every time you save in TM, the CSSEdit previewer will update.
Recognize that the saves you do in TM will *not* save the CSS file to disk; they will only "save" to the CSSEdit window. You'll have to periodically save the file from within CSSEdit.
-- Dr. Drang drdrang@gmail.com
Scott Haneda wrote:
Any suggestions to get out of the change/save/switch/reload cycle that is going to give me carpal tunnel syndrome soon enough.
One option, which is obviously completely editor-independent, would be to set your browser to refresh the page at regular intervals (for example, once a second) whilst you're working on it. Firefox has an extension [1] which will do this for you, and you could do the same with Safari with AppleScript.
I doubt this will be practical for when you're not working locally, but in those cases it does work well.
I'd be interested to hear if you come up with any other solutions.
Cheers, Tony.
On May 5, 2009, at 7:59 AM, Anthony Park | 29degrees wrote:
Scott Haneda wrote:
Any suggestions to get out of the change/save/switch/reload cycle that is going to give me carpal tunnel syndrome soon enough.
One option, which is obviously completely editor-independent, would be to set your browser to refresh the page at regular intervals (for example, once a second) whilst you're working on it. Firefox has an extension [1] which will do this for you, and you could do the same with Safari with AppleScript.
I have thought about this, and tried it, I think it had issues. Firstly, every load in safari seems to be another 1MB of memory is sucks up, this was killing me. I also think there was an issue with focus, Safari kept getting in my way.
I'd be interested to hear if you come up with any other solutions.
Something just kicked into my head, I remembered the base href meta tag. I downloaded a index.html file from a random site, and as the first tag in the head section, I set the base href to the sites domain path:
<base href="http://example.com/" />
All of a sudden, the css file and images all came alive, all links worked. So this given me my local file to work on, all I would have to do is download my .css files and what I want would be accomplished. I could then use the web preview feature in TM.
I could even take it one step further, and use a remote ftp app, set the base href, and all css and image files would work. So this solves it to a degree. The web preview in TM is not perfectly responsive, but it does work, and this makes all .css files followed even the @included types.
The last one I was thinking, is a bundle item. I little more work, but more transparent. Make a bundle item that will curl a url, grep for all urls and download them to /tmp/random_folder. Find the css bits and files you want, and generate a project plist file in /tmp as well.
Pass the path to the project file to TM to be opened, and there you are, you just were asked for a url, and given back a TM project you can edit and work on locally. You still have the issue of editing a css file not being able to refresh the web preview of the parent html file.
This is probably only going to be truly solved in TM core, at least in a graceful way. So far, not a lot of demand given the lack of replies on this thread. Maybe it could be done in a plug-in, I have no idea.
Right now, I am pretty pleased with the base href idea, that works amazingly well actually. It is a tag I forgot about, never really had a need for it. There is also <base target="_blank" /> which could come in handy, but I usually just find and replace those away.
On May 5, 2009, at 6:51 AM, Dr. Drang wrote:
On May 4, 2009, at 1:56 AM, Scott Haneda wrote:
FWIW, CSSEdit is a pretty strong app in this regard, were it not for the poor auto completion in the app, I would probably take the time to learn it.
If you have CSSEdit you can
- Open the CSS file in its editor.
- Open the HTML file in its previewer.
- Choose Edit in TextMate… to (re)open the CSS file in TextMate.
- Edit the file in TM. Every time you save in TM, the CSSEdit
previewer will update.
Recognize that the saves you do in TM will *not* save the CSS file to disk; they will only "save" to the CSSEdit window. You'll have to periodically save the file from within CSSEdit.
Wow, very nice to know, that is probably perfect. Seems like a lot of apps to have to pull one thing off that is previously done in a small plug in within a browser though :)
Thanks so much, this is a solid method, I will look into it.
On 4 May 2009, at 08:56, Scott Haneda wrote:
[...] This comes back to my previous post of wanting to get host, path, and URL/URI data in TM from remote ftp apps. With this data, there is a lot more than could be done [...]
Just for the record, the ftp application only provide a custom display name, it does not provide the info as you describe it above. With knowledge of the ftp application used though you might be able to parse that from the display name (which will be provided to commands in the future).
On May 20, 2009, at 2:36 AM, Allan Odgaard wrote:
On 4 May 2009, at 08:56, Scott Haneda wrote:
[...] This comes back to my previous post of wanting to get host, path, and URL/URI data in TM from remote ftp apps. With this data, there is a lot more than could be done [...]
Just for the record, the ftp application only provide a custom display name, it does not provide the info as you describe it above. With knowledge of the ftp application used though you might be able to parse that from the display name (which will be provided to commands in the future).
Out of general curiosity here...
My probe to the Interarchy developer.. Textmate and Interarchy communicate via the ODB Editor Suite so it should have the remote url. There may be some way to affect Textmate such that it displays this URL...
I recommend contacting Macromate's support. They might be able to point you in the right direction.
I assume TM uses the ODB Editor suite, meaning that I should be able to get to the info? You mentioned parsing the display name, is this the same thing? Where can I see this display name?
Just for kicks, as I remember this from BBEdit, I set my editor to TextWrangler, and inspired an edit from Interarchy, at the top of the window in TextWrangler, I see: File-path: ftp://username:@example.com/file.php
Can you elaborate on the "custom display name" and how to get to it, or point me to any helpful docs about it? Or is this something that is not user accessible in 1.x?
This is all I have found: http://manual.macromates.com/en/using_textmate_from_terminal Who makes the "ODB Editor Suite", is this an Apple API, there seems to be some confusion for me in who this api was made by.
Thank you Allan, I appreciate you taking the time to reply to this one.
-
alex kessinger -
Allan Odgaard -
Anthony Park | 29degrees -
Dr. Drang -
Scott Haneda