search

mechio / takana

Takana lets you see your SCSS and CSS style changes live, in the browser, as you type them
http://takana.io
MIT License
1.11k stars 61 forks source link

[noobs] WindowsOS -> Sublime Text 2 -> mechio/Takana -> Q&A #81

Open robocato1 opened 9 years ago

robocato1 commented 9 years ago

I have spent endless hours now trying to figure this live-editor Takana out. I have a lot of questions that people can answer on the spot, and I would like to do that since I cannot find any answers to the questions that I have. I can see a lot of other people are having the same issues. I'm a semi-noob to web dev and I know a lot of others are too, so they will benefit from this also. So please keep in mind that some of us are needing very basic help, because we don't understand how some of these things are inter-related. A simple answer, with example if possible, will suffice.

So, I am asking these questions to help myself figure this out, and hopefully helping others also.

Question #1: Does Takana live-editing work on Windows OS?

Question #2: Do I absolutely have to have "Node.js" to install and use Takana live-editing? I.e. I do not know how to use node.js yet, and know nothing about it.

Question #3: HOW do I setup the script for Takana? I copy and pasted the script into my HTML header like stated: 

<script type="text/javascript" src="http://localhost:48626/takana.js"></script>
<script type="text/javascript">
     takanaClient.run()({
           host: 'localhost:48626' // optional, defaults to localhost:48626
     });
</script>

...but since I am a noob, I don't understand exactly what is happening here. So when I say "how" do I set it up, I mean, do I leave src="http://localhost:48626/takana.js" the way it is? Or am I supposed to change the src to point to my custom .js file? [My common sense is telling me to leave it like it is, because i'm not currently using a .js file.

Question #3a: If I AM supposed to leave the script as it is, without changing it at all, what else do I do to run and use Takana? Is it automatic? Do I have to do anything with my root folder for my project? I'm not seeing any "menubar icon" for Takana and do not know where it is supposed to pop up if working or anything.

Question #4: If I already have a script: to access my .js file, do I have to make both this script AND the script above for takana? Or can I incorporate them both into the script for accessing the Takana script above?

Question #5: If I can install and use Takana with Sublime Text 2 on Windows OS, then what do I do from there, once I copy and paste the script for Takana into my HTML file? Do I need to do anything with my directories if I install it with package control instead of CLI? Do I even need the suggested CLI? Do I have to do anything to chrome like add an extension for Takana or enable it to my webpage like 'dev tools" does for livestyle?

[ADDITIONAL INFO] I am using Windows 7, Google Chrome, and Sublime Text 2 with package control manager for direct installs. I am currently using "Emmet LiveStyle" and "LivePage" with Dev Tools open on Chrome.

robocato1 commented 9 years ago

dev tools console takana failed access 1 dev tools console takana failed access

Console Log:

startup, version: 2221 windows x64 channel: stable executable: /D/Program Files/Sublime Text 2.0.2 x64/sublime_text.exe working dir: /D/Program Files/Sublime Text 2.0.2 x64 packages path: /D/Program Files/Sublime Text 2.0.2 x64/Data/Packages settings path: /D/Program Files/Sublime Text 2.0.2 x64/Data/Settings PackageSetup not required Py_GetProgramName(): sublime_text.exe Py_GetExecPrefix(): D:\Program Files\Sublime Text 2.0.2 x64 Py_GetProgramFullPath(): D:\Program Files\Sublime Text 2.0.2 x64\sublime_text.exe Py_GetPath(): D:\Program Files\Sublime Text 2.0.2 x64\python26.zip;D:\Program Files\Sublime Text 2.0.2 x64\DLLs;D:\Program Files\Sublime Text 2.0.2 x64\lib;D:\Program Files\Sublime Text 2.0.2 x64\lib\plat-win;D:\Program Files\Sublime Text 2.0.2 x64\lib\lib-tk;D:\Program Files\Sublime Text 2.0.2 x64 Py_GetPythonHome(): D:\Program Files\Sublime Text 2.0.2 x64 catalogue loaded found 11 files for base name Default.sublime-keymap found 1 files for base name Default.sublime-mousemap found 41 files for base name Main.sublime-menu Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\0_package_control_loader\00-package_control.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\0_package_control_loader\01-ssl-windows.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\0_package_control_loader\02-bz2.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\0_package_control_loader\02-select-windows.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\BracketGuard\BracketGuard.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\CSS\css_completions.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\ColorPicker\sublimecp.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\ColorSchemeSelector\ColorSchemeSelector.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\comment.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\copy_path.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\delete_word.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\detect_indentation.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\duplicate_line.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\echo.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\exec.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\fold.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\font.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\goto_line.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\indentation.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\kill_ring.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\mark.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\new_templates.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\open_file_settings.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\open_in_browser.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\paragraph.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\save_on_focus_lost.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\scroll.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\set_unsaved_view_name.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\side_bar.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\sort.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\swap_line.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\switch_file.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\transform.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\transpose.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Default\trim_trailing_white_space.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Diff\diff.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Emmet\emmet-plugin.py Emmet: No need to update PyV8 Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\HTML\encode_html_entities.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\HTML\html_completions.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\LiveStyle\livestyle.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\LoremGibson\Loremgibson.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Package Control\Package Control.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Package Control\bootstrap.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\PackageResourceViewer\package_resource_viewer.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\PackageResourceViewer\package_resources.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\SublimeREPLinit.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\SublimeREPL\completions.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\SublimeREPL\lang_integration.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\SublimeREPL\run_existing_command.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\SublimeREPL\sublimerepl.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\SublimeREPL\sublimerepl_build_system_hack.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\SublimeREPL\text_transfer.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\SublimeWebColors\colorpicker.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\SublimeWebColors\webcolors.py Reloading plugin D:\Program Files\Sublime Text 2.0.2 x64\Data\Packages\Takana\takana.py

Takana plugin v0.4 Takana: connecting Takana: connection failed plugin init time: 4.3797 loading bindings loading pointer bindings found 1 files for base name predawn.sublime-theme Errors parsing theme: Unknown attribute value Unknown attribute value theme loaded app ready pre session restore time: 5.17398 wrote startup cache, added files: 1 orphaned files: 0 total files: 222 cache hits: 221 startup time: 5.81869 (package setup was not run) loaded 837 snippets Package Control: No updated packages Writing file /D/Program Files/Portfolio Website/ROBOCATOS Portfolio/index.html with encoding UTF-8 Writing file /D/Program Files/Portfolio Website/ROBOCATOS Portfolio/index.html with encoding UTF-8 Writing file /D/Program Files/Portfolio Website/ROBOCATOS Portfolio/index.html with encoding UTF-8 Writing file /D/Program Files/Portfolio Website/ROBOCATOS Portfolio/index.html with encoding UTF-8 Writing file /D/Program Files/Portfolio Website/ROBOCATOS Portfolio/index.html with encoding UTF-8 Writing file /D/Program Files/Portfolio Website/ROBOCATOS Portfolio/index.html with encoding UTF-8 Writing file /D/Program Files/Portfolio Website/ROBOCATOS Portfolio/index.html with encoding UTF-8 Writing file /D/Program Files/Portfolio Website/ROBOCATOS Portfolio/index.html with encoding UTF-8 Writing file /D/Program Files/Portfolio Website/ROBOCATOS Portfolio/index.html with encoding UTF-8 Writing file /D/Program Files/Portfolio Website/ROBOCATOS Portfolio/index.html with encoding UTF-8 Writing file /D/Program Files/Portfolio Website/ROBOCATOS Portfolio/index.html with encoding UTF-8

robocato1 commented 9 years ago

I noticed this setup in "Takana.py" python file: 

  VERSION            = "Takana plugin v0.4"
  DEBUG              = False
  TAKANA_SERVER_PORT = 48628

I wasn't running LivePage and LiveStyle while trying to run Takana, but maybe this could have some reference? I know LiveStyle works just fine when it is setup on websocket 5400. For Takana, it looks like it would be '48628' above. If I switched this to 5400 port would it make a difference possible? Why or why not?

emmet livestyle websocket port 5400

ob7 commented 9 years ago

Since LiveStyle and takana are seperate plugins that attempt to do the same thing, I would not run them at the same time. My experience with the two is takana updates browser faster while live style lags on refreshing browser. If your on Windows, you will need to read about it here: https://github.com/mechio/takana/issues/33.