Completely new to Stack Exchange. Trying to learn programming, so checking out various websites and their JavaScript files. When I look at them, the look like a complete mess. E.g. If I go to Airbnb.com and view source, then look at the JS file (toward the bottom), then open it, it's a real mess. Others I look at around the web are similar. Is there a way to format this code to make it neater? (hopefully automatically e.g. if I copy/paste it somewhere?)
Here's an example
easiest way, beautify it with: http://minifybeautify.com
Your Examplecode is minified. There are many tools (http://jsbeautifier.org/) and plugins for IDEs to beautify it.
Many site uses uglify/minify methods to load scripts faster.
You can use a js beautifier to generate more readable code, but you should know that after minify method many var names are shorter so the code will not return to his original form
The reason why it looks like this is because it has been minified and concatenated.
To get started with JS I would recommend to start from books or posts. Also the structure of the files will change depending on the the frameworks you are using. It will be hard for you if you start learning about programming just by looking at the code of some random website.
A book I would recommend you to start with is this one :
JavaScript: The Good Parts
There is a very interesting repo at github which contains a series of books that you can start reading to start understanding pure javascript which is:
https://github.com/getify/You-Dont-Know-JS
If you want to read about a js framework you could start with Angular or React among others.
And finally although it may sound obvious you could just type "JavaScript getting started" in Google and you'll see plenty of posts to start reading and having a better idea of what JS is about.
After you understand it I would say that you can go and see in other pages how they are solving certain problems but I would not recommend to start from there.
Hope it is useful for you
Best
Related
I realize this may not be the right place to ask this question so feel free to send me elsewhere. I am looking to internationalize a set of apps that have strings in a combination of java, tsp and javascript files. We have some use of resource bundles in a. few of the java apps but I am looking for a unified approach for all to both reduce the number of translation files and provide a single point of reference for them. I have yet to stumble upon a solution that is not specific to one or the other.
What I have thought of so far:
Database-driven - this would achieve the two stated objectives but, unless I am missing something, would result in a lot of db calls and likely performance degradation.
External files - this is the most feasible approach as I can read from a shared location. The only part I am struggling with is how to organize them so as to make it possible to load all the tags for, say, a single page together.
I would recommend the "External files" approach... decouple your translation files from your code... this would help your localization process a lot.
For i18n you might read this article (focus JavaScript but not only) ...
I would recommend looking into a i18n lib that is ready to be used in different frameworks, i.e. i18next
There is some java based lib too: i.e. i18next-android
As said in the beginning, you should not only consider that you have to instrument your code (i18n) to get your app/website translated. You should think about the process too - how will you solve continuous localization, how you keep track of progress, etc...
For a translation management+ system you might eg. have a look at locize it plays well with all json based i18n frameworks and in the core has a very simpe api... and provides a lot more than traditional systems...
In several of the standard/popular javascript libraries, like jQuery and d3, there are many very tiny files that are built up to make the final library file, in many cases the files are just a few lines long.
I am not sure I appreciate the reason for the degree to which this partitioning occurs. It would seem to make navigating/comprehending the code base much tougher. Note that I realize that jQuery breaks some things up to allow custom builds with just specified modules, but there are still many tiny files within those module directories.
I was thinking it might be for unit testing purposes, but it looks like a lot of the files don't have anything in them that could be tested in isolation.
This really just comes down to personal preference. With javascript, it all just gets concatenated and minified anyways, so it really doesn't matter what the file structure looks like. The file structures you see are what the owners/maintainers think makes the most sense for that particular project.
Splitting large libraries like these allow the developers to write decoupled, modular code split up into related functionalities. It also helps with merging in contributions from a large number of people (great for open source software)
here are some worthwile resources
Writing module of javascript code, use require (amd)
Wiki page on coupled code here
Wiki page on modular programming here
This may seem like an unusual request, but does anyone have T-SQL (MSSQL2008) code to "minify" javascript code?
I have a MVC site that uses a series of stored procs to generate the contents of a *.js file, and preferably after the SPs built the javascript, it could use a UDF/SP to 'minify' it.
I thought about creating a second SP set that would contain the minified version, but that would be a maintainance nightmare (doubling the current 10 SP's that build the javascript code).
I didn't know if the logic used to minify was simple enough that an SP/UDF could do it, and if lucky someone had already written it and was willing to share :)
Thanks in advance!
I don't think that minifying javascript using a SP is a good idea. You will end up with something really complex I guess. The simplest minifier that I know is jsmin and it still 300 lines of C.
Another approach could be to user a minifying proxy as a web server. I guess that it's quite fast (less than 20 lines of code) to come up with something using nodejs and uglifyjs.
I started out with Rails development, but soon I realized Rails without JS is pretty much useless. So, I am trying to play with JS in my free time.
So, what are the "tools of trade (IDEs if any)" for JS development?
My primary focus is usage of APIs, Ajax etc, so that I don't get lost when I get develop Rails apps which uses JS.
There are many tutorials for using JS for Open graph API or twitter API, but that is to get things done and abstract some feature sets which a beginner should know.
I generally start learning a language by making a calculator, end to end (always works for me). But I cannot make a calculator and use API/Ajax calls.
So, what are your suggestions?
PS: I am aware about Douglas Crockford's video lectures, they are awesome, but I need some thing more concrete.
UPDATE:
My 2 original questions:
1. What are the tools of trade for JS? Like Eclipse:Java::X:Javascript, What is X (multiple Xs are allowed)?
2. What sample app do you recommend for me to start with?
I think the most important thing is: Know your language!
JavaScript libraries are useful, but if your do not know the language, you have no chance of getting something done that cannot be achieved using your library of choice. For example: JavaScript's prototype-system is very valuable and important for building robust applications. I really recommend that you experiment with this before diving into something you barely know. Closures are also very important to understand.
One thing is important, though: Do not spend too much time on browser incompatibilities. This is what most libraries are for. What you need to know is how the language works. Implementation-specific things are not worth learning (in most cases), since somebody already fixed those for you.
#PS: Douglas Crockford indeed does a pretty awesome job on explaining how JavaScript really works. You should keep watching this.
#UPDATE:
I think the X has it's origin in JavaScript's MIME-type: application/x-javascript. My tool of choice for web-development (including JavaScript) is NetBeans IDE. I use it in my workplace and it is very reliable and comfortable to work with. This is subjective (of course). Most other IDE's will do, too.
This is difficult to answer. I will update my post if something comes to my mind.
(I realize my comments below typically refer to using javascript with regards to websites, so ymmv if you're using js for a different environment, like couchDB)
For an ide, any text editor will do, but I prefer convenient features like:
syntax coloring (because it's so pretty)
(s)ftp plugins - makes saving files convenient
I would probably go with something like notepad++, or aptana studio (although I find aptana to be a bit of overkill at times, but very powerful). Adobe Dreamweaver works nicely too, if you wanna pay. Otherwise, the bare minimum would be notepad and an ftp client (again, with regards to front-end web development work)
For debugging or trying out quick javascript, I find safari's and chrome's built-in development tools handy, but on firefox, it's firebug all the way. Firebug is awesome.
I notice that in my work environment that some people (particularly the business side) use the words javascript and the DOM interchangably, but I find that their attempts at explaining something simply leads to confusion. That being said, if you're writing web apps, I find the mozilla DOM reference to be pretty awesome and used to hit it up all the time before I got familiar: https://developer.mozilla.org/en/DOM
Actually developer.mozilla.org is overall pretty awesome.
Other than that, getting started is simply a matter of learning the syntax. I would probably get used to the syntax first (which should be pretty quick anyways) before I start thinking about other concepts like learning how to prototype and whatnot (which you can look up on this site).
A framework like jQuery is very convenient for various repetitive tasks, but I wouldn't necessarily jump straight into using jQuery without being familiar with the js syntax first.
The most important thing you should learn is jQuery. It is now the de facto standard javascript library.
jQuery is great regardless of what you are doing with it, but since you mentioned AJAX, I'll point out that jQuery makes AJAX stupid easy, because you can do things like this:
$.ajax({
url: 'some/ajax/endpoint',
success: function(data) {
// do something with data
}
});
Obviously there are a lot of other options you can pass along, but the basic structure is really simple and easy to use.
jQuery also has a really powerful syntax for selecting parts of the DOM and adding events. For example, if you wanted to catch anytime some clicked on an image and tell them the image src, you can do something like this:
$('img').click(function() {
alert($(this).attr('src'));
});
i'm looking for a tool drawing a kind of function usage map (maybe there's a better name for that).
I'm working on a project with many javascript files included in pages. This project has been developped for a while and we've reached a point where this is really messy. I'd like to have a clear view of what is included where, how functions are used, etc. .
Do you know if such a tool exist ?
thanks.
JSLint produces a Function Report which may sort of be what you need, but in general there aren't any good static analysis tools for JavaScript. (My current project contains a huge amount of duplicated JavaScript developed over 10+ years... we desperately need one too.)
Also see this question.