Is there a way to remove unused lines of a JS Library? - javascript

I currently coded something awesome based on a JS Library, and I want to remove every useless line that is doing nothing but take more time to download from the server.
What is the best way to keep track of what piece of code was used/unused when my code executed? (So I can remove the unused code)
My first thoughts are to put "var log += "<br />Function name was used." on every function and remove every function that wasn't called. But I am curious about if there is another way
I want to point out that modifying certain JS Libraries might violate their Licences and possibly cause strong legal issues. So if anyone is reading this and is planning to do the same thing as me, please read carefully the Licence(s) before you even attempt to do this!

In my estimation, the best way to keep track of which code has actually executed would be to use a code coverage measurement tool. There are several available for Javascript, many of which are outlined in a previous question: https://stackoverflow.com/questions/53249/are-there-any-good-javascript-code-coverage-tools .
Of course, this only tracks the code that has executed as a result of the test suite you are running it against, and would not be a foolproof way to find "completely dead" (i.e. unreachable) code. But it's a start...

Related

How to use TDD right

So I have a new assignment in university consisting of lots of people collaborating, and we want to use continuous integration, thinking of using CircleCI, and we want to use a TDD approach.
My biggest question is how do you correctly use TDD. I might have the wrong idea but from what I understand you write all your tests first and make them fail, because you don't have any code yet, but how can I write all my tests if I don't even know yet all the units I will have/need?
In this case since using CircleCI, assuming it won't let me merge code if it doesn't pass the tests, how can this work? Since there will be tests written but no code for that test specifically.
Am I wrong and you write the tests as you go along on the development of the features?
This is a subject that I am really having a hard time grasping but I would really love to understand it right as I believe it will really help on the future.
My biggest question is how do you correctly use TDD. I might have the wrong idea but from what I understand you write all your tests first and make them fail, because you don't have any code yet, but how can I write all my tests if I don't even know yet all the units I will have/need?
Not quite the right idea.
You might start by thinking about the problem, and creating a checklist of tests that you expect to implement before you are done.
But the actual implementation cycle is incremental. We work on one test at a time, starting from the first. We make that test pass, and clean up all of the code, before we introduce a second test.
The idea here being that we'll be learning as we go -- we may think of some more tests, which get added to the checklist, or we may decide the tests we thought would be important aren't after all, so they get crossed off the checklist.
At any given point in time, we expect that either (a) all of the implemented tests are passing, or (b) exactly one implemented test is failing, and it is the one we are currently working on. Any time we discover some other condition holds, then we back up, reverting to some previously well understood state, and then proceed forwards again.
We don't normally push/publish/share code when it has broken tests. Instead, the test and a working implementation are shared together. We don't share the broken intermediate stages, or known mistakes; instead, we share progress.
A review of the slides in the Bowling Game Kata may help to clarify what the rhythm of the work looks like.
It is completely normal to feel like the first test is hard -- you are writing a test implementation against code that doesn't exist yet. We tend to employ imagination here; suppose that the production code you need already exists, how would you invoke it? what data would you pass to it? What data would you get back? and you write the test as though the perfect interface for what you want to do already exists. Then you create production code that matches that interface; then you give that production code the correct behavior; then you give the production code a design that will make the code easy to change later.
And when you are happy with all of that, you introduce the second test, which usually looks like the first test with slightly different data, and a different expected result. So the second test fails, and then you go to the easy-to-change code you wrote before, and adapt it so that the second test also passes. And then you again clean up the design so that the code is easily changed.
And so it goes, until you reach the end of your checklist.

Identifying CSV length in D3.js before loading

So far every resource I have seen on loading CSV files into D3.js require that the only way to use the data is to define callback functions (due to Javascript's asynchronous execution).
I originally approached this problem the usual way of defining functions outside then calling them inside the callback function.
However this proved repetitive. The other alternative however, to define everything in the callback function, would lead to repeated executions of the same thing leading to redundancy.
I personally found that if I knew how many data items were going to be used, I could simply set an
if (read_data_length==total_data_length)
condition so that all my code is executed once every CSV row is read.
My question is whether there is a way to identify the length of a CSV file (in terms of number of Objects, or rows), BEFORE loading a CSV file in order to establish such a limit?
So far my own insight has proven this is difficult to impossible, but I am hoping somebody with more experience in Javascript might be able to clear this up.
Thanks in advance.

Count the javascript functions on a page (with javascript)

Good day all.
I would like to count the js functions present on a given page, and then send this number via ajax (the ajax part is the simple part) do you think is it possible to achieve that in javascript? what should be the best way to do it?
thanks in advance.
explanation:
I'm trying to figure out how to counter measure some fraud attempts on some subscription pages, I suspect that some javascript is injected on the page before the user click, so having the number of functions present at the load event, and then the number of those present on the submit event, should lead me in the right direction.
Well, if someone is injecting code to your site, they could just as easily use that code to turn off your code counting functions. You can never trust anything that happens on the client side and must validate everything on the server.
As for the technical side, you'd use a tool like acorn to traverse the syntax tree and find all FunctionDeclaration and FunctionExpressions (and arrows, concise method definitions and methods). That would not find all functions, but it would find all statically created ones.
Once the code started executing it's impossible since it's easily reducable to the halting problem. You don't know if a code will create a function at some point in the future.

Console.log(); How to & Debugging javascript

Ok so I hope this is a question that isn't to basic for you guys.
I know enough jQuery to get myself into trouble, meaning I can grab elements and do stuff with it, write my own little functions for interactivity and such. But then something doesn't go as expected, before I post questions to stackoverflow and get answers that make me slap myself in the forehead I would like to debug it myself and am sick of inserting alert(); into my code. In reading up on the subject there is mention of console.log();, console.info(); and the such but I can not find any resource that explains how to use these in real world scenarios for debugging.
Do any of you know of a good resource or tutorial (not afraid to read a book) that can explain how to use these functions for the layman. It seems that the tutorials and such I am finding are either way to advanced or just skim the surface and don't show you how to use them. I understand I can insert console.log(); and it will spit out information in the console for firebug or element inspector. But what if my hand baked function is doing something unexpected somewhere up the line, how do I find the problem as the browser parses the javascript.
Any help would be greatly appreciated as I feel learning this will help me understand what is going on in my code, so I can stop staring at the screen going “Why isn't this working, it worked in the jsfiddle!”
console.log() just takes whatever you pass to it and writes it to a console's log window. If you pass in an array, you'll be able to inspect the array's contents. Pass in an object, you can examine the object's attributes/methods. pass in a string, it'll log the string. Basically it's "document.write" but can intelligently take apart its arguments and write them out elsewhere.
It's useful to outputting occasional debugging information, but not particularly useful if you have a massive amount of debugging output.
To watch as a script's executing, you'd use a debugger instead, which allows you step through the code line-by-line. console.log's used when you need to display what some variable's contents were for later inspection, but do not want to interrupt execution.
Learn to use a javascript debugger. Venkman (for Firefox) or the Web Inspector (part of Chome & Safari) are excellent tools for debugging what's going on.
You can set breakpoints and interrogate the state of the machine as you're interacting with your script; step through parts of your code to make sure everything is working as planned, etc.
Here is an excellent write up from WebMonkey on JavaScript Debugging for Beginners. It's a great place to start.
I like to add these functions in the head.
window.log=function(){if(this.console){console.log(Array.prototype.slice.call(arguments));}};
jQuery.fn.log=function (msg){console.log("%s: %o", msg,this);return this;};
Now log won't break IE
I can enable it or disable it in one place
I can log inline
$(".classname").log(); //show an array of all elements with classname class
Essentially console.log() allows you to output variables in your javascript debugger of choice instead of flashing an alert() every time you want to inspect something... additionally, for more complex objects it will give you a tree view to inspect the object further instead of having to convert elements to strings like an alert().
Breakpoints and especially conditional breakpoints are your friends.
Also you can write small assert like function which will check values and throw exceptions if needed in debug version of site (some variable is set to true or url has some parameter)

remove redundant function in javascript

i have some little javascript library which can be loaded separately and work without any dependency.
now i want to merge some of them into a single js file. the problem is that every of them has some part in common( some helper function).
Is there some tools i can use to merge these file and remove the redundant code?
Assuming the redundancy is duplicated code (exact copies or copies with modifications), our JavaScript CloneDR can help find the duplicated code and suggest the essence of the subroutines you need to remove the duplication.
If you have redundant code I would never trust a program to compile them together, especially if I needed to edit it in the future (cause lets face it, even if we think we won't, you will)
Personally I would take a day to go over everything and rework it so that everything run smoothly and most importantly there are no redundancies. I will often rewrite things 2-3 times when it is a larger script and if I feel it can be better.

Categories