Introducing Springboard › Minimal JavaScript / CSS / HTML Project Template Update: Springboard has recently undergone a complete rewrite. It’s now now much more powerful, flexible and Python (therefore cool). Checkout the Springboard GitHub page for more info.It also means that this post is now largely irrelevant, so don’t trust it – trust the README. I love HTML5 Boilerplate and use it a lot as a basis for web projects. Sometimes however, I find it still does a little bit too much for my needs and I end up removing a lot before I can get started. Most importantly for me though, it still currently doesn’t support building with Google Closure Compiler which I tend to use both for it’s advanced code optimisations and for coding better Object-Oriented JavaScript (not to mention generating JavaScript documentation from the very same comments I write for the compiler). So What’s Springboard Then? Springboard is an ultra minimal JavaScript / CSS and HTML project template (or springboard). It features a very useful ANT build file which, among other things, can: ant build
JavaScript Garden Although JavaScript deals fine with the syntax of two matching curly braces for blocks, it does not support block scope; hence, all that is left in the language is function scope. function test() { // a scope for(var i = 0; i < 10; i++) { // not a scope // count } console.log(i); // 10} There are also no distinct namespaces in JavaScript, which means that everything gets defined in one globally shared namespace. Each time a variable is referenced, JavaScript will traverse upwards through all the scopes until it finds it. In the case that it reaches the global scope and still has not found the requested name, it will raise a ReferenceError. The Bane of Global Variables // script Afoo = '42'; // script Bvar foo = '42' The above two scripts do not have the same effect. Again, that is not at all the same effect: not using var can have major implications. // global scopevar foo = 42;function test() { // local scope foo = 21;}test();foo; // 21 Local Variables var foo = 3; bar = 4;}test(10); Hoisting
10 Tips for Writing JavaScript without jQuery Danny Markov jQuery is a great library. It came to be around the time when IE6 was the number one browser. Back then, there were quirks and differences that were tedious to work around and jQuery was the perfect tool for writing cross browser code. Today, however, web browsers have advanced a great deal from those days. Don’t get me wrong – jQuery is still a wonderful library and most often than not you will be better off using it. 1. The first thing you do when writing jQuery, is wrapping your code in a $(document).ready() call, so that you know when the DOM is ready for manipulation. // Add an event listener of DOMContentLoaded to the whole document and call an anonymous function. // You can then wrap your code in that function's brackets // and it will execute once loading is complete. document.addEventListener('DOMContentLoaded', function () { // Our hawaiian greeting is displayed as soon as the page loads, console.log('Aloha'); }); Run 2. 3. 4. 5. 6. 7. 8. 9. Conclusion Learn more
Succinct Data Structures: Cramming 80,000 words into a Javascript file. Let's continue our short tour of data structures for storing words. Today, we will over-optimize John Resig's Word Game. Along the way, we shall learn about a little-known branch of computer science, called succinct data structures. John wants to load a large dictionary of words into a web application, so his Javascript program can quickly check if a word is in the dictionary. One of the best data structures for searching a dictionary is a trie. We need to solve two problems. This leads us to the the second major problem. Fortunately, there is a way to store these links in a tiny amount of space. Succinct Data Structures Succinct data structures were introduced in Guy Jacobson's 1989 thesis, which you cannot read because it is not available anywhere. A succinct data structure encodes data very efficiently, so that it does not need to be decoded to be used. Two important functions for succinct structures are: Corresponding functions exist to find the rank/select of 0's instead of 1's. Demo
PEP 8 -- Style Guide for Python Code Code should be written in a way that does not disadvantage other implementations of Python (PyPy, Jython, IronPython, Cython, Psyco, and such).For example, do not rely on CPython's efficient implementation of in-place string concatenation for statements in the form a += b or a = a + b. This optimization is fragile even in CPython (it only works for some types) and isn't present at all in implementations that don't use refcounting. In performance sensitive parts of the library, the ''.join() form should be used instead. This will ensure that concatenation occurs in linear time across various implementations.Comparisons to singletons like None should always be done with is or is not, never the equality operators.Also, beware of writing if x when you really mean if x is not None -- e.g. when testing whether a variable or argument that defaults to None was set to some other value. The other value might have a type (such as a container) that could be false in a boolean context!
AngularJS Form Validation Introduction Today we’ll be looking at the ways that Angular helps us do form validations. Note: We have updated this article for Angular 1.3 and the new ng-touched feature. We’ll focus on client-side validation and using the built-in Angular form properties. Demo See the Pen AngularJS Form Validation by Chris Sevilleja (@sevilayha) on CodePen Requirements Name is requiredUsername is not required, minimum length 3, maximum length 8Email is not required but has to be a valid emailForm submit is disabled if the form isn’t validShow a required or invalid email errorAlert awesome if submitted correctly Now that we know what we want, let’s get to building. Angular Form Properties $valid, $invalid, $pristine, $dirty Angular provides properties on forms that help us validate them. Angular also provides classes on the form and its inputs so that you can style each state accordingly. Accessing Angular Form Properties To access the form: <form name>. Setting Up Our Form We will need 2 files: index.html app.js
20 Fresh JavaScript Data Visualization Libraries There are plenty of JavaScript libraries out there for rendering your otherwise plain and boring numerical data into beautiful, interactive, and informative visualizations. The beauty of using JavaScript for data visualization is that, if created correctly, your data will be highly accessible (usually via HTML tables). A long time ago (2008), I wrote about JavaScript solutions for graphing and charting data and this article revisits the topic with twenty more JavaScript libraries that you can use to bring your data to life. 1. Highcharts is one of the most promising JavaScript charting libraries to hit the scene recently, with its large array of features including seven charting types (line, pie, and bar among them), the ability to zoom in and out of charts, and tooltips for offering more information about data points. 2. gRaphaël gRaphaël is a charting library based on Raphaël, a vector graphics drawing JavaScript library. 3. 4. jQuery Visualize Plugin 5. moochart 6. 7. dygraphs 8. 9. 10.
Duck typing When I see a bird that walks like a duck and swims like a duck and quacks like a duck, I call that bird a duck.[1] In duck typing, a programmer is only concerned with ensuring that objects behave as demanded of them in a given context, rather than ensuring that they are of a specific type. For example, in a non-duck-typed language, one would create a function that requires that the object passed into it be of type Duck, in order to ensure that that function can then use the object's walk and quack methods. In a duck-typed language, the function would take an object of any type and simply call its walk and quack methods, producing a run-time error if they are not defined. Instead of specifying types formally, duck typing practices rely on documentation, clear code, and testing to ensure correct use. Concept examples[edit] Consider the following pseudo-code for a duck-typed language: 9 [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6] apples and oranges, apples and oranges, apples and oranges, In C#[edit]
AngularUI for AngularJS Awesome vim support for javascript with jsctags and taglist-plus | discontinuously.com Exuberant-Ctags is a great way to navigate through code, but it doesn’t work so well for Javascript due to the complexity of parsing the language. Fortunately, the fine folks at Mozilla have made jsctags, which handles the job pretty darn well by using an inbuilt Javascript parser. Given the following code, var objectNamespace = {}; objectNamespace.num = 1; objectNamespace.func = function() {}; Jsctags produces: As you can see, jsctags is able to identify all the variables and methods, the namespaces they belong to, and even their types! Here are a couple more examples, using a variety of techniques from Angus Croll’s post on Namespacing in Javascript: In every case, jsctags successfully infers the ‘namespace’ of the function, despite the fact that this namespace was declared in a different manner each time! Module Pattern 3 is a particularly impressive display of jsctag’s capabilities: The binding of this, set via the .apply() method, is resolved correctly. Installation Usage Related Posts
Essential JavaScript Design Patterns For Beginners I would like to thank Rebecca Murphey for inspiring me to open-source this mini-book and release it for free download and distribution - making knowledge both open and easily available is something we should all strive for where possible. I would also like to extend my thanks to the very talented Alex Sexton who was kind enough to be the technical reviewer for this publication. I hope that it helps you learn more about design patterns and the usefulness of their application to JavaScript. Volume 2 of Essential JavaScript Design Patterns is currently being written and will be more detailed than this first edition. The ETA for it's online release is late Q4, 2011. For more detailed coverage of specific patterns, you may be interested in my posts on the Pub/Sub (Observer) or Decorator patterns. At the beginning of this book I will be focusing on a discussion about the importance and history of design patterns in any programming language. Patterns are not an exact solution.
Free Computer, Programming, Mathematics, Technical Books, Lecture Notes and Tutorials