How napchart.com is constructed - javascript

I want to build a site similar to this one.
So I downloaded the source code from https://github.com/larskarbo/napchart on my Windows 10 machine, but I don't know how to execute the thing and see it running in a page so I can play with the code and see how it is working.
I have node.js installed but I am not sure of how to use it, so detailed instructions are welcomed
Also, I tried saving the code from the site directly by clicking Save As but it didn't work though. Why is that happening?

Considering napchart has been pushed to the npm registry, you shouldn't need to interact with its source code directly.
As per your second question, I don't advise to download any of it manually. Running npm install napchart --save in your project directory should get you going.
That being said, the author also published the source of https://napchart.com/app, which can help you bootstrap your project.

Related

Unable to Run JavaScript in Atom with Script package

I am trying to run JavaScript code in Atom with Script package. It can run Python successfully, but with JS files it gives the following error message:
The system cannot find the file specified.
I had the same problem while analyzing some JavaScript code of an extension for Chrome.
Using: Windows 7 64Bit Atom:1.24.0 x64
Since I my coding Folder is somewhere else I copied the files in that folder. Let’s say:
C:\Users\USER\CodingStuff\
then it started working. I have also tried adding the extension file the Sources via:
1 - CTRL+SHIFT+I
2- Right click -> add folder to workspace
But that did not work.
Side note: node.js has to be installed on the system.
Hope it helps.
I know I am late, but if any other faces the same issue, my answer will be helpful.
Assumed that you want to run your javascript outside browser and you installed node.js.
There is a bug in "script" package of Atom. Check ur path of the script if there are spaces then this leads to the aforementioned error. Work around is remove spaces.
for ex:
E:\Java script\trial.js
change to:
E:\Javascript\trial.js

Typeahead using NPM and MVC Core in Visual Studio 2015

I've entered the brave new world of MVC core and using NPM to get various JavaScript packages. However, I've hit a problem which I'm not entirely sure what the best option to solve is. Just to set the scene, I've got a gulpfile which is copying JS from various NPM packages in my project (such as jQuery and bootstrap etc...) to the 'wwwroot/lib' folder.
I now want to add a typeahead 'autocomplete' search box to a particular view, so I added typeahead to the package.json file and updated my gulpfile to copy the additional *.js files to 'wwwroot/lib'. All fine so far, the problem is when I debug my project and open that particular page I get an error where the typeahead.js file has some code at the beginning:-
require('xtend')
I wasn't aware of this command in JavaScript, but a quick search on the internet reveals this is part of JS when run on 'node' or node.js?
I have not used 'node' before (yes, ignoring the fact I'm using NPM to get packages - I only ended up doing that due to a Visual Studio bug in how Bower works) so the question is how do I now get (this particular) typeahead to run within a browser? So I figure options are:-
1) just manually download typeahead instead - but is that not defeating the point of having all these package managers in the first place?
2) start using Bower again (don't think the 'version' bug has been fixed yet)
3) use something to 'fake' the node 'require' commands so that it will work in browser
4) something else...
I've seen a few things that may solve this problem on the internet, but I didn't want to spend ages sorting out a fix which may be the complete wrong way of doing it. Has anyone any suggestions for the best route to follow?
Scratch that, I found another typeahead package on NPM called 'typeahead.js' instead of 'typeahead' and this is just standard JS no NODE stuff. Works perfectly in browser

[React-Native]RN Version Upgrade Wiped Out Android Plugin Projects

I was trying to upgrade my RN from 0.19 to 0.27 using the commands from the doc,
i.e.
npm install --save react-native#0.27
react-native upgrade (I chose the overwrite option when asked to update the latest RN files)
The npm install step worked fine but the upgrade step wiped out all my code in android plugin folders and any changes made to MainActivity.java. My environment is : MacOS, Genymotion, Android development
Thanks!
You've missed that react-native upgrade asked you if you want to overwrite your files. react-native upgrade replaces your files with newer version if it's different than the default one. It does not merge your changes. Also jump from 0.19 to 0.27 is a big one so probably there was a lot of changes.
Yes, react-native upgrade will wipe everything out. There's a command line option now (react-native link) that will put most of it back in, but not everything.
If you choose not to overwrite the files you are risking not including something very important and it may break the upgrade.
I don't know of a good way around this. My process is to use a good ide that shows me exactly what has changed between upgrades. Then I go though each change and see if I'm missing something. The java code and android studio files tend to be quite easy. But the xCode stuff is not, the pbxproj file is particularly awkward. You mostly need to reconstruct it by using Xcode. So... every time you do something to the xCode project, make a note of it! Yes this is a terrible solution, but I don't know what else to do.
I've ended up making detailed notes about everything I do during an upgrade. And I upgrade recently because its easy to forget.

Electron (Atom-Shell) Run unix command from link in page

I am trying to learn Electron (Atom-Shell) but I am finding it pretty tough to find documentation for it...
I am simply trying to figure out how to create a link with in index.html, and have it open a terminal window or run some sort of program.
I learn languages by learning specific tasks as I need them in a program, so that is why I am asking so then I can utilize the technique used in other ways in my programs.
Thank you for helping.
Well, essentially Electron is just a customised version of a Chromium browser that comes packaged with Nodejs and some really cool packages that basically allow you to run the custom browser as if it was a native platform application. Because of that creating an Electron app is very similar to creating a web-app that has a Nodejs back-end.
So to get started with a simple "Hello World!" app, you can just run the following npm...
npm install electron-prebuilt --save-dev
Once the npm is installed you'll need three files to run an Electron app.
A package.json file
A javascript file (default is main.js)
An html file (default is index.html)
See this GitHub repo for a quick copy/paste version of each and more detailed instructions: https://github.com/mafintosh/electron-prebuilt
after that you're ready to simply run your app...
$ electron .
Finally, one way to open a terminal window would be to use an onclick attribute in your html to trigger a child_process, found here, in a function.
That's it! You should be able to edit your html and javascript files as you would for any web-app, and take advantage of the added features that Electron provides.
I'd also check out these resources for more info:
A Quick Start intro to how Electron works -- https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md
The Atom discussion forum (Because Atom was built with Electron, and is made to be hackable, the community is quite active) -- https://discuss.atom.io/c/electron
A cool repo to keep up with the latest info. It includes links for apps that currently use Electron, tutorials, videos, and more --
https://github.com/sindresorhus/awesome-electron
I hope that helps!

JSDoc setting up?

I am not that good at computers but am trying to use JSDoc for one of my projects,
The tutorial to get it up and running is here
http://usejsdoc.org/about-jsdoc3.html
I have downloaded the program from github, but now do not understand what I have to do. I have a bunch of files in a folder and dont know how to get it actually running for my project.
Could someone please give me a step by step instruction on how to actually get JSDoc working, how do I set it up, how do I use it etc.
I know this may be mundane to some of you, but hey we all gotta start somewhere right?
Well, are you using windows or GNU/Linux?
First, you have to follow the default tags to markup your source code, identifying your classes, methods, parameters, etc...
After that, you download the file here: https://github.com/jsdoc3/jsdoc
Extract it and then go to folder jsdoc-master.
Inside it, you have a script called jsdoc (with no extension). Only you have to do is execute it pointing the whole path to your .js file you want to create a documentation like this: ./jsdoc your_class.js
Then, in a couple minutes you'll have the output inside the 'out' folder. Open the .html file and bang! You have your documentation working pretty good.
Right here you can find some common tags to use in your code (as comments): http://usejsdoc.org/
This solution is for Unix based system. But, there is another one using nodejs (that you can run with windows, Linux, mac, etc...). First, download the nodejs here: http://nodejs.org/
Then go to this website to take a look at the package jsdoc: https://npmjs.org/
Then, go back to your terminal (in any operating system after installed node) and type: npm install -g jsdoc
The option -g means globally, so you have inside the main folder of your node packages and they are available for whatever project you have and you don't need to install it again and again...
Finally, you can just use this command: jsdoc path/to/your/file.js
And that's it! I hope it helps you.
Once you've extracted the file you downloaded off of github, navigate within the folder and run in a terminal:
./jsdoc
with the options you want.
If you want to display the help menu
./jsdoc --help
If you want to install the program on your system, assuming a mac or linux machine, use root user or sudo:
npm install --save -g [~/Downloads/jsdoc-3.2.2 or your path to the downloaded extracted files]

Categories

Resources