background preloader


Facebook Twitter

Edit fiddle. AngularJS and Express, rendering ejs-locals partials. How to load another HTML page and read the content with the responseHTML-like feature. There is no responseHTML attribute belong responseText and responseXML in XMLHttpRequest, but this is not a problem. If we want to get data from another HTML page and insert it into the displayed page, this can be achieved easily. The responseXML attribute holds an XML document DOM can access, and to provide the equivalent for HTML we need just for a <div> tag and a JavaScript function that extends Ajax or the framework we are using. The principle... A variable or a <div> tag to store the other web page. In the second case, the content is not be displayed, as we make use of the display attribute of CSS with the none value. Once the other page assigned to the variable or inserted into the tag , its content is accessible with DOM's methods. Creating the responseHTML element This may be a variable of type Element. var responseHTML = document.createElement("body"); This works with Internet Explorer and Firefox, not with Opera.

Creating a permanent <div> storage tag The content is empty. Forum. Express - Node.js web application framework. Hogan.js. Getting started Hogan.js is a 3.4k JS templating engine developed at Twitter. Use it as a part of your asset packager to compile templates ahead of time or include it in your browser to handle dynamic templates. If you're developing with Node.js, just use NPM to add the Hogan package. $ npm install hogan.js Alternatively, drop hogan.js in your browser by adding the following script.

Templates Hogan.js was developed against the mustache test suite, so everything that holds true for templates as specified here, is also the case for hogan.js. That means you get variables, sections, lambdas, partials, filters, and everything else you've come to expect from mustache templating - only much, much faster.

Compiling Use hogan.compile() to precompile your templates into vanilla JS. It's best to serve your templates precompiled whenever you can (rather than the raw templates), as parsing is the most time consuming operation. Rendering Hulk Hulk is Hogan's command line utility. Getters and Setters for CS. There's been plenty of discussion in the CoffeeScript community about the value and viability of adding getter and setter syntax for Object properties. For the Javascript background, see the MDN articles on the get and set operators and their guide to working with objects.

On the CoffeeScript side, see the discussion in issues #64, #451, and #1165. The gist of this discussion is that syntactic support is unlikely in CoffeeScript. However, there are ways to implement similar functionality using Object.defineProperty. What follows is a light edit of a stackoverflow answer I came across that demonstrates how you might do so. It's not that hard to implement a convenient wrapper function that calls Object.defineProperty for class declarations. Alternatively, create two different methods: For plain objects you can just use Object.defineProperty (or Object.defineProperties) on the object itself or wrap it in a utility function:

Correlating CoffeeScript Classes and JavaScript Prototypes. CoffeeScript has classes, but since CoffeeScript is just JavaScript, where do those classes come from? In this article we break down the JavaScript code which is output from a CoffeeScript class and its subclass to see exactly how the magic happens. Warning: JavaScript Ahead This article involves some pretty advanced JavaScript.

We won’t have time to explain every construct in detail. It also assumes that you’ve read my previous article on prototypes, and that you understand CoffeeScript classes. Of course, you could stop reading right now and continue to write code in ignorance, just like you can eat without knowing much about your stomach. Declassing Take the following CoffeeScript: The previous code, translates to this JavaScript: The outermost variable Bourgeoisie is assigned an IIFE, which is essentially a construct used for controlling scope.

Only the things that are returned ever make it to the outside world. This translates into the following JavaScript. Inheritance Holy cow. Whew!

Angular JS

Hapticdata/Socket-Sketch. Ninetwentyfour/Video-Canvas. Write Text Anywhere With HTML5 Canvas | Travis Berry. Body { background: #111; color:#eee; #c { width: 640px; height: 360px; border:1px solid #111; float:left; background:#eee; #main{ width:650px; margin:auto; $('#c').mousedown(function(e){ if ($('#textAreaPopUp').length == 0) { var mouseX = e.pageX - this.offsetLeft + $("#c").position().left; var mouseY = e.pageY - this.offsetTop; //append a text area box to the canvas where the user clicked to enter in a comment var textArea = "<div id='textAreaPopUp' style='position:absolute;top:"+mouseY+"px;left:"+mouseX+"px;z-index:30;'><textarea id='textareaTest' style='width:100px;height:50px;'></textarea>"; var saveButton = "<input type='button' value='save' id='saveText' onclick='saveTextFromArea("+mouseY+","+mouseX+");'></div>"; var appendString = textArea + saveButton; $("#main").append(appendString); } else { $('textarea#textareaTest').remove(); $('#saveText').remove(); $('#textAreaPopUp').remove(); function saveTextFromArea(y,x){ //get the value of the textarea then destroy it and the save button canvas.width = cw;

Danielearwicker/carota. Gulp.js plugin registry. Soulwire » Experiments in Code. 12 Incredible CodePen.IO Demos. Whenever I need to put my ego in check, I go to Chris Coyier's new CodePen.IO site. CodePen.IO is an incredible showcase of HTML, CSS, and JavaScript, displaying the talents of developers creating effects that 99% of the world's front-end developers couldn't create. I spent a few hours while on CodePen, and after I picked my jaw up from the floor, I put together a collection of my favorite CodePen.IO demos. Enjoy! Draw Worm Draw Worm is an eye-catching, canvas-based animation that creates branches; better yet, the animation follows the mouse, creating more branches. Navigation Knob Navigation Knob, created with only HTML and CSS, is a circlear knob which illuminates the selected value when clicked.

Trail Trail is another cavas-based masterpiece which creates different color rays that follow the user's mouse at an accelerated rate. Nothing is Beyond You Nothing is Beyond You is another no-JavaScript demo, abusing CSS animations and shapes to create an underwater bubbling effect. Twisty Linjer. Soulwire/sketch.js. Sketch.js. Sketch.js - Simple Canvas-based Drawing for jQuery. Sketch.js has been tested on Chrome (OS X), Firefox (OS X), Safari (OS X), Android Browser (Honeycomb 3.1). It suffers significant performance degradation on mobile browsers due to general HTML5 Canvas performance issues. Copyright (C) 2011 by Michael Bleigh and Intridea, Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

.live() Description: Attach an event handler for all elements which match the current selector, now and in the future. As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). This method provides a means to attach delegated event handlers to the document element of a page, which simplifies the use of event handlers when content is dynamically added to a page.

See the discussion of direct versus delegated events in the .on() method for more information. Rewriting the .live() method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods: The events argument can either be a space-separated list of event type names and optional namespaces, or an object of event name strings and handlers. For pages still using .live(), this list of version-specific differences may be helpful: $( document ).ready() By John Kossa Wednesday, December 4th, 2013 Yep, it’s time for another module pattern blog. If you didn’t get a chance to read my previous installment, you can find it here. This post really won’t make a lot of sense if you don’t. The module pattern has been steadily increasing in popularity from its inception in 2006. Along with its expanded use, a few different forms of the pattern have arisen. Naturally, this can lead to a good amount of confusion, and mixing one form with another doesn’t exactly yield working code.

Singleton (Self-Initializing) If you read my last blog, you might have noticed this is the pattern I was extolling. Var moduleName = (function(){ //module stuff here })(); Plural Plural patterns are useful when you find yourself needing the same complex functionality on multiple places in your page. Var moduleName = function(initializationStuff){ //module stuff here } Now for the bad news. This Using this is the classic way of doing the module pattern. Self revealing. Understand JavaScript Callback Functions and Use Them. (Learn JavaScript Higher-order Functions, aka Callback Functions) In JavaScript, functions are first-class objects; that is, functions are of the type Object and they can be used in a first-class manner like any other object (String, Array, Number, etc.) since they are in fact objects themselves. They can be “stored in variables, passed as arguments to functions, created within functions, and returned from functions”1.

Become an Elite/Highly Paid Specialized Software Engineer (Frontend, Fullstack, etc.) Within 8–10 Months, Earn MORE than the Avg. 45%-Off Tuition for the December Session By the founder of JavaScriptIsSexy Because functions are first-class objects, we can pass a function as an argument in another function and later execute that passed-in function or even return it to be executed later. Callback functions are derived from a programming paradigm known as functional programming. What is a Callback or Higher-order Function? How Callback Functions Work? Final Words.