Tag Archives: DOM

Video: Updating the DOM at 60FPS


We present a functional take on front-end data-binding. MVC, MVP, MVVM, just the V – there are many useful architectures for data binding when data changes in discrete chunks. For data that changes continuously in time (animations, gesture controlled UI, responsive layout, etc), these are not the best tools. By treating continuously changing layout data in a functional way, and updating discrete changes to a model’s data in an MV* way, we can split the data-binding problem into two cleanly separated problems. In so doing we make all our tools better at what they do best.

AngularJS – The Next Big Thing


via AngularJS – The Next Big Thing – CodeProject.

AngularJS is the next big thing for web applications.

AngularJS is a framework for client side web application development that brings with it the virtues of organization, structuring and the architectural pattern that helps make enterprise and data centric business web application development a breeze.

AngularJS is open source web application framework wrapped around native HTML/JS/CSS technologies. It augments the web development techniques with patters and practices that helps web application development become more mature and be able to handle more and more responsiblity that can (and should be) be shifted from the backend to the frontend.

AngularJS is “Super-powered by Google” and has a active community around it so anyone starting out with Angular can except to have a super charged ecosystem already present and one can quickly get started to building cool things and have their own “WOW” moments while using Angular.

Angular comes as a natural extension to the thinking and mindset of the modern web application developer. Angular brings the power where it belongs. Angularjs is built around design principles that supports scalability, maintainability, modularization at it core. It is best suited for thick client business web applications. It encourages the usage of best practices and patterns of development and thus drives the development of a high quality decoupled modular maintainable application. It serves as a solid base for large business web applications.

What Angular provides:

  • Architecture/organization patterns out of the box (MVC/SPA/DI)
  • View templating using plain-old HTML (no new templating language to learn) for creating dynamic views
  • Allows to extend HTML vocabulary to create new UI widgets/components
  • Avoids scattered DOM manipulation spagetti code
  • Inherent support for testing of the application
  • Provides modularity, loose coupling and reusability
  • Parallel development and comprehensible code due to virtue of MVC

Design goals (as on AngularJS guide):

  • Decouple DOM manipulation from application logic. This improves the testability of the code.
  • Regard application testing as equal in importance to application writing. Testing difficulty is dramatically affected by the way the code is structured.
  • Decouple the client side of an application from the server side. This allows development work to progress in parallel, and allows for reuse of both sides.
  • Guide developers through the entire journey of building an application: from designing the UI, through writing the business logic, to testing.

Hardware-to-Hardware Communication with Johnny-Five and PubNub


via Hardware-to-hardware Communication with Johnny-Five – PubNub.

JavaScript has taken the programming languages by storm and in recent years, it has become the most popular language of the web. JavaScript was originally used only on front end side for DOM manipulation and making interactions possible using animations and jQuery. Then the introduction of NodeJS was a game changer as it enabled JavaScript to run on server side too.

One language to rule the client and server!

When it comes to make microprocessors or microcontrollers to work with JavaScript, two libraries stand out, CylonJS and Johnny-five, for a couple of reasons:

  • Support a large number of technologies like Arduino, Raspberry Pi, drones, etc
  • Well-maintained and regularly updated
  • Many stars and forks on GitHub
  • Easy to get started with and a lot of similarity in their syntax

JQuery Add/Remove Class Example


via jQuery Add/Remove Class Example | Web Code Geeks.

In this example, we’ll go through jQuery .addClass() and .removeClass()methods. jQuery provides a seamless, easy and efficent way to add or remove classes to specific DOM elements and trigger these events on the various listening events it provides like click, mouseover, mouseleave ect.

These methods are very useful to dynamically change content based on your cases, and gives your website a rather interactive and engaging user experience. From changing styles and colors to animations, it provides powerful ways to get you going.

You’ll be able to access these methods just by including the jQuery library in your HTML document.

How to Create Cross-Platform Desktop Apps with NW.js


via How to Create Cross-Platform Desktop Apps with NW.js | Codementor.

NW.js is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.

Introduction to StageJS


via Introduction to Stage.js.

Stage.js is a lightweight and open-source JavaScript library that you can use for cross-platform 2D HTML5 game development. This library uses a DOM-like model to manipulate the canvas and manages the rendering cycles of your application all by itself.
In this tutorial, I’ll introduce you to this library, trying to cover everything you may need to know how to start using it with ease.
Let’s start!

Using requestIdleCallback


via Using requestIdleCallback — Google Web Updates.

Many sites and apps have a lot of scripts to execute. Your JavaScript often needs to be run as soon as possible, but at the same time you don’t want it to get in the user’s way. If you send analytics data when the user is scrolling the page, or you append elements to the DOM while they happen to be tapping on the button, your web app can become unresponsive, resulting in a poor user experience.