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

[robocato1]

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: <script type="text/javascript" src="index.js"></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]

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\SublimeREPL__init__.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]

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?

[ob7]

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: #33.