background preloader

Bourbon Neat

Bourbon Neat

YUI from the outside Update, 2012-09-10: I’ve posted a followup to this post entitled Why I believe in YUI. Please read it. When I quit my job at Yahoo! a few months ago, it didn’t feel like I was really quitting. I was leaving the company, sure, but I still planned to continue working on YUI, even though Yahoo! I’m extra lucky that my new employer loves YUI, uses it extensively, and is more than happy to let me contribute the work I do back to YUI whenever it makes sense. This has been one of the most frustrating experiences I’ve ever had contributing to an open source project. Pull request graveyard Even though I’m still in touch with the core team and talk to many of them on a daily basis, several of my pull requests sat in limbo alongside over 40 other open pull requests on the YUI 3 project (some dating back nearly a year). Not all my pull requests were large. No external committers Why send pull requests? What many people don’t know about YUI is that the YUI GitHub repository is just a read-only mirror.

Checkbox List With Filtering jQuery Widget Download source - 140.8 KB Introduction We used checkbox-list controls back at the good old days for desktop applications. Background First of all, we need to populate the listbox with data. And selection data returned within the same data model. Using the Code checkList widget can be applied easily with a div element. We can set the listbox items on creation by passing the listItems parameter or after widget created set data model manually by calling setData method. We can simply get the selected elements by calling getSelection method. function selChange(){ var selection = $('#myCheckList').checkList('getSelection'); $('#selectedItems').text(JSON.stringify(selection)); } Filtering Filtering capability is implemented without any Ajax calls. Have fun.

Cursor motion & bi-directional text "Unicode is hard" is a commonplace among developers. And I guess it is hard. Witness the amount of systems that get things like string en- and decoding wrong. And that is the easy part—the real fun starts when you need to actually display those strings. Fortunately, toolkits and libraries are able to hide the horrors of combining characters, directionality, and word breaking most of the time. But there are situations where that doesn't suffice. In this article, I'll outline the solutions I came up with. The problem Originally, CodeMirror assumed that each character in a line represented a glyph, and that these glyphs were shown left-to-right. But some Semitic scripts, notably Arabic and Hebrew, do not start writing on the left of the medium, but rather write right-to-left. Unfortunately, things are not that easy. Let us look at an example. A B C a b c 1 2 3 d e D E (logical) It is rendered like this (visual order): A B C e d 1 2 3 c b a D E (visual) Bidi algorithm Quantum cursors Closing

mozilla/pdf.js Enhancing Angular.js with Forge As we’ve shown before with our Firebase integration, Forge makes it simple to use the latest and best web technologies to develop your native mobile app. In this blog post we are going to take a simple Angular.js demo app and enhance it with some of Forge’s modules: Add offline capability and persistence using forge.prefsAdd a native topbar and add action button using forge.topbarAdd a second view to show archived items and switch between the views using forge.tabbar The demo app we are going to use is the todo list from the Angular.js homepage, which you can see in action on JSFiddle. Creating our Forge app Our first step is to create a Forge app using this code. You can see the code for this step on GitHub. Persisting data Now we have the app running in Forge we can use Forge’s extra functionality to improve the app. forge.prefs.set("todos", $scope.todos); As well as restoring the saved todo list when the app launches, using the following: Adding a topbar Adding a tabbar That’s it

JavaScript Closures Closures are crucial for effectively leveraging the JavaScript language; however, too many programmers don't know about or understand this important concept. A common situation that utilizes closures is when you have a function definition that's nested within a parent function that returns the nested function object as the value of the parent function. In this situation, the nested function retains references to the local variables in the parent function, even after the parent function finishes executing. Another way to describe closures is that nested functions have access to the local variables of the functions they are defined within and retain references to those variables even when the inner function has a longer lifetime than the parent function. (I credit Douglas Crockford, Yahoo!’s chief JavaScript architect, for inspiring this description.) function functionalScoping() { var message = "JavaScript closures rock!" function displayMsg() { console.log(message); } displayMsg(); }

A Deeper Look at JavaScript Closures In my article "JavaScript Closures," I talked about the basic concept of closures in JavaScript code. Now I'd like to invoke Mozilla's description of a closure: A closure is a special kind of object that combines two things: a function, and the environment in which that function was created. The environment consists of any local variables that were in-scope at the time that the closure was created. So, in the following code, newFunc is a closure that includes the displayMsg function that's defined in the createFunction function as well as the message variable and its value: function createFunction() { var message = "JavaScript closures rock!" function displayMsg() { console.log(message); } return displayMsg; } var newFunc = createFunction(); newFunc(); You have to understand the concept of scope chains to understand closures. Every JavaScript function has a scope chain that's associated with the function. Here's a more complex example that uses closures:

Doppio: A Java Virtual Machine, Compiler and Disassembler in JavaScript There is no shortage of impressive things that have been done in JavaScript, and we’ve seen JVM implementations in JavaScript before as well. However, Doppio appears to be the most complete and actively worked on project of the bunch. Basically, Doppio is a project to get Java running in the browser without plugins. It includes an implementation of the Java Virtual Machine (VM), as well as an in browser compiler and bytecode disassembler. It is still a work in progress and performance obviously needs improvement before it is ready to be used in production, but so far it supports: All 200 opcodesExact emulation of Java’s primitive types, include the 64-bit longGenericsMost of the Reflection APIFile and Standard I/OMajor JDK libraries such as String, Pattern, and HashMap. In my experience, the demo works best in Chrome, but it should work in any browser supporting local storage and typed arrays. You might be thinking “why would I want to write Java in the browser?”

Sense and sensor-bility: access mobile device sensors with JavaScript Just as we humans call upon our senses to provide us with data about our environment, so smartphones and tablet devices use their own digital senses – touchscreen, geolocation, orientation, direction and motion – to provide interaction and to tailor applications and games to the user and their real-world surroundings. Adding external accessories will give a mobile device even more senses – these include: add-ons for health, such as measuring blood sugar levels or tracking blood pressure; add-ons for fitness, such as heart rate monitors and in-shoe sensors; and add-ons for small businesses, such as credit card readers, for accepting payments. There are three main ways that developers can access the data reported by these device sensors: Using native operating system application programming interfaces (APIs) for each platform (i.e. The geolocation sensor Further reading The touch sensor Touchscreens allow users control of the interface of their mobile devices in a simple and natural manner.

Getting Started With TypeScript ( Superset of JavaScript ) Have you heard about the TypeScript? If ‘No’ then, TypeScript is a superset of JavaScript that combines type checking and static analysis, explicit interfaces, and best practices into a single language and compiler. It is an open source programming language developed by Microsoft. Why TypeScript? JavaScript is just a scripting language and it was not really designed as a language for big Web apps, JavaScript doesn't provide classes, modules etc. for a real time application development. TypeScript is an Open Source language developed by Microsoft (under the Apache 2.0 license).TypeScript is a super-set of JavaScript. Language features ClassesInterfacesModules Type annotationsCompile time type checking Arrow functions (Similar to Lambda Expression in C#) Difference between JavaScript and TypeScript TypeScript is a superset of JavaScript. Editor Support In VS 2012 Editor If we open TypeScript file there we have options like Refactor, Go To Definition etc . How to get it How to compile TypeScript