Concise: Can Chart.JS be compiled locally to pure JS, and if yes, how? If it cannot, do you know of any other pure JS charting libraries available.
Hopefully someone can guide me in the right direction. I have been tasked with plotting some some time series data on a legacy system. This has to be done in JS and the libraries cannot exceed 1Mb. I don't need any functionality outside of line charts scrolling across the screen and the axes being displayed. I looked at Chart.JS but I am unsure how to compile it into JS files only. Ultimately I have to flatten the folder structure because the system doesn't support directory structures. Before we go down a rabbit hole, I have absolutely no way to alter the current configuration of the system. I got what I got. The system doesn't have access to the internet, so I can't utilize remotely hosted solutions :(
Appreciate any help someone can provide pointing me to libraries they might now of.
Used NPM and TSC to compile other solutions to JS only deployment, but unable to fully understand how to do so. Scoured the internet for pure JS libraries that are available.
Related
I'm fairly new on the React scene and just finished a few small react applications. I deployed two of these applications to Github Pages, and they both function perfectly.
However, I noticed that the files in my repository are minified. Not only that, but the language meter shows it as 100% html. It's nitpicky, but I'd like for it to display JavaScript/CSS too. I would greatly prefer my files be visible, just in case anyone wanted to look at how my application was built (mainly recruiters).
Is there some way to make these files visible/UNminified without sacrificing performance?
Is there any reason I wouldn't necessarily need to undertake this? --> (would employers care?)
You're committing your built project, but you should upload the source code!
To expose your github pages you have to build the project inside the docs folder, so you can have source code and build on the same branch!
really appreciate some help for this one.
I'm new to three.js, I think I read and watched all the videos to understand, but still can't acheive this effect on a coded website that I'm making:
Interactive Mouse Effects with Three.js
Just after the "var animate" part I receive an error of "cube not defined"
So I was wordering if there is a missing part for this tutorial??
Also, I downloaded his entire project to see where I messed up, but his code was quite different from the tutorial. I'm not Using parcel, I'm using cdnjs for three.js, so I was wondering if it can still work for the RendererPass EffectComposer and ShaderPass file. do I need those??
My last question for the most courageous ones is, when I finally acheive this (with your precious help) Is there important information due to this library use, that I need to know so I can upload it online?
Thank you thank you soooo very much!!
I'm afraid the "basic Three.js setup" code snippet from the article is incomplete since it does not contain how the cube is created. Hence, executing this code leads to a runtime errors in the animation loop. When you are new to three.js, use the code from the official guide Creating a scene.
I was wondering if it can still work for the RendererPass EffectComposer and ShaderPass file. do I need those??
Yes, you need these files if you are want to use post-processing. There is another guide called How to use post-processing that explains how a basic usage looks like.
Is there important information due to this library use, that I need to know so I can upload it online?
I would say no^^. You can include the library files as global scripts or as ES6 modules (recommended). For more complex applications, it's actually better to use of a build-tool like rollup (or Parcel). For the former tool, there is actually a starter project which demonstrates a simple three.js build.
Is there a way to not have to build my app every time I want to run it? It is impossible to debug once it is compiled. I have seen in videos the browser loads 100s of js files instead of one big build.js.
What do I need to change to make this happen?
This is a downfall in working with modern things like React, but the answer is to use something like webpack. Webpack is able to generate the single file, but generate source maps with it as well. Browser tools are then able to map the single build file to the original source code, making it much easier to debug. Browserify has this ability as well, which you can use along side gulp or grunt, along with babel to compile ES6.
I'd recommend checking out webpack though, as it's becoming more commonplace. Personally I find it a bit tricky to figure out, but once you have it running, it's great. I don't have a good example handy on using webpack with react, but there are a number of articles & tutorials out there on the subject: https://www.codementor.io/reactjs/tutorial/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack
I am not even sure if something like I want is possible, so I am asking you guys to just let me know if anyone did that before. So, my goal is to when I click on "Publish" website in VS2010, to have all javascript files compressed into one, same with css and then in my layout file change the references from all different js and css files to only those two merged ones. Is that doable? Or maybe it's doable but in more manual way?
Of course the goal here is to have only two calls to external files on the website, but when I develop I need to see all files so that I can actually work with it. I guess I could do it manually before each push, but I'd rather have it done automatically using some script or something. I didn't try anything yet, and I am not looking for ready solution, I am just looking to get to know the problem better and maybe some tips.
Thanks a lot!
This is built into ASP.net 4.5. But in the mean time, you should look at the following projects
YUI Compressor
The objective of this project is to compress any Javascript and Cascading Style Sheets to an efficient level that works exactly as the original source, before it was minified.
Cassette
Cassette automatically sorts, concatenates, minifies, caches and versions all your JavaScript, CoffeeScript, CSS, LESS and HTML templates.
RequestReduce
Super Simple Auto Spriting, Minification and Bundling solution
No need to tell RequestReduce where your resources are
Your CSS and Javascript can be anywhere - even on an external host
RequestReduce finds them at runtime automatically
SquishIt
SquishIt lets you squish some JavaScript and CSS. And also some LESS and CoffeeScript.
Combres
.NET library which enables minification, compression, combination, and caching of JavaScript and CSS resources for ASP.NET and ASP.NET MVC web applications. Simply put, it helps your applications rank better with YSlow and PageSpeed.
Chirpy
Mashes, minifies, and validates your javascript, stylesheet, and dotless files. Chirpy can also auto-update T4MVC and other T4 templates.
Scott Hanselman wrote a good overview blog post about this topic a while back.
I voted up the answer that mentioned Cassette but I'll detail that particular choice a little more. Cassette is pretty configurable, but under the most common option, it allows you to reference CSS and Javascript resources through syntax like this:
Bundles.Reference("Scripts/aFolderOfScriptsThatNeedsToLoadFirst", "first");
Bundles.Reference("Scripts/aFolderOfScripts");
Bundles.Reference("Styles/aFolderOfStyles");
You would then render these in your master or layout pages like this:
#Bundles.RenderStylesheets()
#Bundles.RenderScripts("first")
#Bundles.RenderScripts()
During development, your scripts and styles will be included as individual files, and Cassette will try to help you out by detecting changes and trying to make the browser reload those files. This approach is great for debugging into libraries like knockout when they're doing something you don't expect. And, the best part, when you launch the site, you just change the web.config and Cassette will minify and bundle all your files into as few bundles as possible.
You can find more detail in their documentation (which is pretty good though sometimes lags behind development): http://getcassette.net/documentation/getting-started
Have a look at YUI compressor # codeplex.com this could be really helpful.
What I have done before is setup a post-build event, have it run a simple batch file which minimizes your source files. Then if you're in release mode (not in debug mode), you would reference the minimized source files. http://www.west-wind.com/weblog/posts/2007/Jan/19/Detecting-ASPNET-Debug-mode
I haven't heard about publish minification. I think use should choose between dynamical minification like SquishIt or compile time like YuiCompressor or AjaxMinifier.
I prefer compile time. I don't think it's very critical to have to compile time changing files. If you have huge css/js code lines you can choose this action only for release compilation and if it helps publish this files only in needed build cinfigurations.
I don't know if there is any possible way to somehow hook into the functionality from that 'Publish' button/whatever it is, but it's surely possible to have that kind of 'static build process'.
Personally I'm using Apache ANT to script exactly what you've described there. So you're developing on your uncompressed js/html/css files and when you're done, you call like ant build which then minifies, compresses, stripes and publishes your whole web application.
Example script: https://github.com/jAndreas/typeof-NaN-2.0/blob/master/build/build.xml
Trying to get Easeljs js library in Aptana 3 (as web project). Dragged the files in the project (files are indexed). It doesn't recognize the library as code assist.
Is the only way for external js library to make a sdocml (if so is there a generator ?) or is there a other way to get code assist ?
Ugg I know it's off topic but i've found the code assist in Aptana3 and Eclipse to be poor in general, and a really memory hog, in many case I've turned it off, as the IDE has become unresponsive for the constant "rebuilding workspace"...
So with that out the way...
If you follow these instructions they should help you
https://wiki.appcelerator.org/display/guides2/Using+JavaScript+Libraries
Generally as long as the code is visible to the project (in say a gitignored lib folder), and it's documented using ScriptDoc (which isn't that much off jsdoc) standard, my understanding is it will do it's best to do code assist.
https://wiki.appcelerator.org/display/guides2/ScriptDoc+%28SDOC%29+2.0+Specification
You can apparently improve the code assist by using actual sdocml file for particular libraries, but I'm yet to see any improvement myself.
Just make sure there's a copy of easejs in your project, your editing js files in the javascript editor (right click open with javascript editor), and your project is a web/php project,
note it's pretty terrible at closures so i wouldn't expect everything to auto complete as you'd expect.
If your doing alot of commercial work, would recommend intellij as a good enterprise quality javascript IDE, or the web storm, html5/js cut of the code, they both support code completion in javascript alot better than Aptana3/Eclipse.
If not the community version is still better than Aptana3/Eclipse at javascript.