Yesterday I wrote a tweet about how I usually create components. Great workflow for refactoring unwieldy components :-) https://t.co/each4c2cm9 — Kent C. Dodds (@kentcdodds) December 9, 2015 A tweet is quite short, so let’s take a closer look at such workflow in more detail. Also, note that I’m using Angular 2 components here, but this holds in many other contexts ...

The aim of this example is to show you how to use the jQuery .clone() method . Sometimes we need to copy the HTML element and work with the copied element. The jQuery .clone() method is used for this purpose. This method performs a deep copy of the set of matched elements, meaning that it copies the matched elements as ...

In this post we will explore how to design an Angular 2 application according to the Flux architecture, by using the Redux and Immutable.js libraries. Have a look at angular2-redux-store for a sample. We will go over the following topics: The challenges of building large scale single page apps Three types of state in an app The Flux architecture The ...

In his article on Unit Testing, Martin Fowler mentions that what a unit actually is can change depending on what school of thought you come from. Many from the object-oriented world consider the Class as the unit, whereas those in the functional programming world consider the Function the unit. Even though Ruby is an object-oriented language, I tend to see ...

The aim of this example is to explain and use Bootstrap Tabs. Tabs are used to separate content into different panes where each pane is viewable one at a time. They enable you to add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. Bootstrap uses CSS to style tabs and content inside them ...

If you have been previously coding in programming languages other than JavaScript, such as C# or even C++, then you might be already be familiar with the concept of namespaces and also it’s benefits in code modularity and functionality. Unfortunately, this concept does not straight out exist in Javascript, as in they don’t have a dedicated syntax built-in the language, ...

To run & manage the 9 PHP application templates (LAMP, LAPP, and LAOP Stacks) in this project on 13 different clouds and virtualization platforms (including vSphere, OpenStack, AWS, Rackspace, Microsoft Azure, Google Compute Engine, DigitalOcean, IBM SoftLayer, etc.), make sure that you either: Sign Up for FREE on DCHQ.io — http://dchq.io (no credit card required), or Download DCHQ On-Premise Standard ...

In this example, we’ll be creating and using Bootstrap popovers. The Popover plugin is similar to tooltips, it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content. Plugin dependency: Popovers require the tooltip plugin (tooltip.js) to be included in your version of Bootstrap. They enable ...

This neat and simple trick originally appeared about a year ago on this blog post, so it’s not something I came up with by myself. “Angular’s watcher functions for ng-bind and text nodes () put binding information inside the respective DOM elements using jQuery .data method. This is unfortunately a very expensive operation that impacts both load times and time ...