I'm testing a new text editor, GitHub's Atom Editor, I'm writing HTML, so I want to open .html files in browser just like in Sublime Text 2/3 then I installed a package called run-in-browser.
I cannot get it to work, it will open one of my .html files, any other .html file doesn't open. Then, I changed to another package called open-in-browser. It seems to have the same issue!
I've had a bit of a play with the open-in-browser package, by creating a very simple test case I have created two files, test1.html and test2.html, by using the Ctrl-Alt-Q keyboard shortcut I am able to get both files to open up in Chrome:
All of this said I strongly recommend taking a look at Live Reload and the associated Atom Package, it takes a little bit of time to get everything setup but once it is done you will never need to open new tabs or hit the reload button.
Related
So I have the following situation:
There is an HTML file in some directory on my PC. If I open this HTML file in a browser, I want to click a button with which I can write or change a file in the same directory.
So there is no server whatsoever, just an HTML file opened in a browser.
Is this possible?
Calling a python script from a button would also work for me.
I just have to be able to detect a change in the directory when the button is clicked.
TL;DR
Yes it is. but there is additional system like git. and you need to implement using javascript.
Not a solution
I am sorry about I can not provide exact solution about your question. but I can give you keywords. I assume you do not know about git.
I recommend implement local git system for your local directory. because there is lot of changes your files. (like edit single character or add new files) and some of files you do not want detected (that's mentioned in .gitignore)
and there is suitable project for you isomorphic-git
. and If you heard about git first, also check github guide.
Is there a simple way to start programs on mac from html?
I made an html page with a text field and a number of buttons. The intention is that when a code (numbers) is entered, it is copied to the clipboard. Via the buttons (each of which must open an application) the desired app opens and paste the code into the application (search or something ...). I already made this in AppleScript, but the layout is not that nice. That is why I wanted to work with HTML / CSS. Is there a simple way to run programs on mac starting from html/ Javascript?
I'm not sure if this is what you're looking for, but on Macs you can define custom URL schemes that will launch script applications to handle data. See:
Launch Scripts from Webpage
Which is an AppleScript-specific discussion of this:
How To Create Your Own URL Scheme
I'm also not sure of what you are looking for exactly, however, if it is vanilla JS, you can open the HTML file in the browser, which will also let you use the JavaScript as long as it is imported properly.
To open the HTML file in the browser, you can go to the file in the Finder then right-click and select "Open with Chrome". If you prefer to use a different browser, you can open it with whatever browser you want.
I've build a project with pure reactJS using create-react-app and I successfully uploaded the app to my server but unfortunately I've lost my laptop and all of my data :( but my project working on the site my question is:
Is it possible to get my project back again to development mode through existing files?
You may be able to use https://github.com/1egoman/debundle to un-bundle the index.js file (in the case of create-react-app, Webpack is the bundler). If the bundled file was built in production mode, you may need to use something like https://www.npmjs.com/package/unuglify-js to get it back in somewhat readable order.
Sorry to point you to libraries which may or may not work, but the truth is that you may be better starting from scratch--the real knowledge in your mind, not in the source code. You may be able to throw in some improvements the second time around... look at the bright side!
solution in here: Can I use a sourcemap and bundle file to retrieve original react code
THIS IS 90% fix.
Publish the APP so you can access it through browser (e.g. NETLIFY, can publish by accessing your Git repo) -> open the published project in the browser -> then inside the browser press ctrl + shift + i (chrome and pc).
This gives you access to developer tools.
Find: SOURCES TAB
on left hand side you will see folder structure -> click into STATIC
Now you can see all CONTENT inside JS files and CSS by clicking on them.
You can now either copy and paste them into you IDE or download them by right clicking them and Save As.
I've downloaded the Trumbowyg WYSIWYG editor: http://alex-d.github.io/Trumbowyg/ as well as django-trumbowyg for integrating it with django: https://github.com/sandino/django-trumbowyg
I want to edit the editor by removing some buttons, changing colors/sizes etc. So to test it out I searched the package directory for trumbowyg-button-pane, which is the toolbar for the text editor (Bold, Italic, Underline etc). And there was only one result, a file called trumbowyg.scss. So I went into the file and found .trumbowyg-button-pane, and changed it to display:none. However it didn't change anything, as the toolbar still appears on my site. So now I'm not sure how else to edit the html/css of the package.
Not sure if it makes any difference, but the Trumbowyg WYSIWYG editor: http://alex-d.github.io/Trumbowyg/ (the front-end) is located in my static/js, wheras the django-trumbowyg (back-end) https://github.com/sandino/django-trumbowyg, which also has the same front-end directory in it (css, js files) is located in site-packages. However I don't think this is used as my script and link tags (for my js and css) point straight to those in my static/js.
If someone can suggest what the problem would be thad be great.
I am unfamiliar with the package, but unless you are running DEBUG=True, you may need to collectstatic: python manage.py collectstatic as seen in the django documentation
Looked at the network tab in the console which showed a different css file being used, so I'm now able to edit the file.
Current situation
I'm developing a bookmarklet by using a stub as the actual bookmark that sources JavaScript code in a file on GitHub. I test the bookmarklet on a webpage and then I make changes to the JavaScript code in a text editor, push it to the GitHub file with git on the command line, and then run the bookmarklet again on the web page.
Problems with current situation
This approach seems tedious to me. Every time I make a change to the JS code in the text editor I have to save in the text editor and write 3 commands (git add, git commit, git push) to update the changes in the GitHub file (and then click the bookmarklet again).
What's more frustrating is that it seems like Chrome takes a very long time to recognize the changes in a recently changed GitHub file. I test this by making a simple alert("message"); command, changing the message value, pushing the changed code to GitHub (successfully), and seeing if the bookmarklet stub sources the recently changed file (it doesn't).
I avoid caching by appending a random number to the GitHub file URL sourced by the stub - stub shown below:
javascript:(function(){
var script=document.createElement('script');
script.type='text/javascript';
script.src='https://rawgit.com/username/repo_name/master/bookmarklet.js?v='+(Math.random()*1000);
document.body.appendChild(script);})();
Question
Is there a better way to develop bookmarklets where you can quickly see changes in bookmarklet code when the bookmarklet is used? Or can anyone see any problems in what I'm doing?
Thanks!