How to identify the javascript canvas library used by a certain website? (e.g. processingjs or ...)
Well, install firebug. On the net tab, and js subtab, you will find all the library loaded. And also install library-detector add-on to determine which library is used.
And make sure, net is enabled.
View source or use firebug to view the included scripts. If you see 'processing.js', for example, it may be used. If you don't see it, well, it still may be used.
You have to dig into the included scripts to be sure.
EDIT:
Loos like IXL uses YUI to for general javascript utilities/DOM help/namespacing. As far as I can tell, no canvas library was used -- basic shapes aren't that hard to draw with canvas.
Related
I have been using tools like OptiPng for a long time and am wondering if there is any equivalent, that runs in JavaScript only inside the browser.
Just curious if a framework/plugin exists to optimize images in JavaScript?
I found pixtastic project. Not sure about performance but this sounds possible. http://www.pixastic.com/
Some thorough search later:
This SO question has all the necessary links. There is an imageMagick version in Javascript (found here).
Also, in theory it's possible to port to Javascript using emscriptem (see here)
ProcessingJS also provides a resize method.
Enough to get started.
What javascript editor I can use for EaselJS code complete?
I tried Aptana plugin for eclipse but it did not work out, I also tried making an uncompressed file using below command and import the uncompress file
node ./build.js --format=PRETTY_PRINT
I also tried to look for sdocml for EaselJS but I could not find any.
Does any one know how we can get EaselJS code complete?
Thanks
-Maaz
though this is nothing official and unfortunately I haven't had the time to adjust this to EaselJS 0.6.0 here is a code-completion for SublimeText: http://indiegamr.com/easeljs-codecompletion-for-sublimetext2/ - but be aware, this is no 'intelligent' completion as you might be used to from Java or AS3, but it includes the methods and attributes ect. from 0.5.0
There is also a TypeScript-definition for CreateJS: https://bitbucket.org/drk4/createjs_ts_definitions (unfortunately also only EaselJS 0.5.0) - but TypeScript is a way better choice than pure JS if you want a good/intelligent code-completion. - But maybe you can find something for 0.6.0 for this on the web.
*Edit: This looks like an updated version for TypeScript: https://nuget.org/packages/easeljs.TypeScript.DefinitelyTyped/
I would like to be able to add custom snippets of javascript to any site that matches a regex. This is mostly because of sites that I use daily because of specialized content, but which have a poor design. I want to be able to do something like:
Visit site See that sidebar overwrites content
Whip out developer tools, find div id for sidebar
Edit a snippet of javascript which is executed on document.ready for this domain:
$('#sidebar-right').remove();
A bit of searching for user scripts tells me that I need to be writing a Chrome extension, which seems unfortunate and overkill. Is there not an easier way, or an extension which is nothing but a javascript editor that assigns snippets to domains? I'd really like to be able to edit in Chrome itself, or at least have a file that I can just leave open in MacVim all the time. An extension requires unloading/installing to update as far as I can tell.
If I just had one big javascript file, that would be fine. I'd just wrap my customizations in domain checks.
Bonus love if I can write in CoffeeScript.
The answer is to use the Tampermonkey chrome extension.
https://chrome.google.com/webstore/detail/dhdgffkkebhmkfjojejmpbldmpobfkfo
Why not dotjs http://defunkt.io/dotjs/ ? It's local, you can version it with git, you can easily take it to another computer...
Another alternative that neatly solves the problem is Custom JavaScript for websites. You just need to install the extension, which takes around 2 seconds, and then you can immediately start typing your custom JavaScript for the specified website.
The extension automatically recognizes the current website, so all you need to do is write your code and click on Save. You can also easily import jQuery or your external scripts for convenience.
Custom JavaScript for Websites 2 is an alternative to Custom JavaScript for Websites, with some bug fixes and sync scripts across devices feature.
Snippets are available directly in Chrome Devtools
https://developers.google.com/web/tools/chrome-devtools/javascript/snippets
Witchcraft is another Google Chrome extension for loading custom Javascript and CSS, and it is supposedly for more avanced users. The older dotjs project repository lists Witchcraft as its successor.
What you're looking for is Greasemonkey. But wait, Greasemonkey is for Firefox only, right? Turns out, you can install Greasemonkey user-scripts as native Chrome add-ons. Just go to userscripts.org and hit the Install button on one of them, and Chrome will automatically convert it into a native add-on. Then, write your own and install it using Chrome.
Note: This only works in Chrome 4.0.
I am looking out for a software that identifies duplicate/redundant Javascript code. I found one such tool named CloneDR, but don't know how good it is .
I was looking out for similar open source tools . Please guide .
I used PMD's Copy/Paste Detector (CPD) last year on a project. There was some code for EcmascriptLanguage support but I recall having to update GUI.java and recompile the project to get it to work.
If you use ruby (or even have it on your system) you may want to try flay-js (flay plugin)
It may be worth checking out the coverage section in Google Chrome, relatively new feature:
https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
Find unused CSS and JS code with the new Coverage tab. When you load or run a page, the tab tells you how much code was used, versus how much was loaded. You can reduce the size of your pages by only shipping the code that you need.
Most of my javascript work is done with Firebug and I feel annoying most of the times having to switch between the HTML mode and console mode (which again I split into output mode and input mode). When I switch to a different page to see the HTML and come back, I lose the code that I write. What is the best way to go about developing javascript applications using firebug?
Something like a mini IDE would be awesome: It just has to let me insert some code, examine the current page and then let me execute it. Any suggestions?
I use a simple text editor (vim) to write Javascript and HTML, and I check the result every now and then in Firefox. I have always two windows open: one for my text editor, and one with the current page open in Firefox. After saving a change in the Javascript, I switch to the browser and refresh the page to observe results. That was my workflow until recently.
A couple of weeks ago, I discovered the Combiner tool by Nicholas C. Zakas. To release my Javascript code, I am now using a complete build process based on Apache Ant, similar to what I was using while doing Java development previously.
The first step is to check the Javascript code with the JSLint tool by Douglas Crockford. I used to painfully copy and paste my Javascript code in the online version of the tool, once in a while; being able to run it on all my Javascript files at once with this Ant script is a huge convenience.
The second step is to combine all my Javascript files into a single file using the Combiner tool. The third step is to minify the Javascript code using YUI Compressor by Yahoo!. These last two steps allow to optimize the delivery of Javascript code to reduce page loading.
You can find an example Ant build file that you may adapt to your own needs. I am currently using this file to build my own Javascript library, bezen.org.
The other answers so far have been correct: I've never heard of anyone actually developing inside Firefox/Firebug, because it's a tool designed for debugging, not coding. To do your coding, you should use a tool designed for it (either a text editor or a full-fledged IDE).
But that being said, you might want to check out FireEclipse (Link). It will allow you to integrate Firebug with the Eclipse IDE (which itself has at least three different JS plug-ins to choose from). Alternatively I think the main (aka Web Standard Toolkit, aka WST) JS editor for Eclipse has some functionality which is similar to Firebug, but I've never used it so I don't know the details.
Hope that helps.
Write your HTML in an editor/IDE
Save your changes
Preview it in your browser
Debug using Firebug
Make your code edits in your SOURCE CODE
Repeat
Firebug is for debugging and allows you to do some "what if" fiddling while the page is live. This is not a replacement for an IDE.