4. June 2015

Get notified for CSS, Attribute or Property changes in an element

jQuery-Watch is a nice little plugin that monitors CSS, Attribute or Property changes in an element.

It uses the MutationObserver internally for modern browsers and uses setInterval() polling as a fallback for older browsers.

MutationObserver Syntax

Browser Support / Polyfill

var element = document.getElementById("Notebox");

var observer = new MutationObserver(observerChanges);
observer.observe(element, {
    attributes: true,
    subtree: opt.watchChildren,
    childList: opt.watchChildren,
    characterData: true
});

/// when you're done observing
observer.disconnect();

function observerChanges(mutationRecord, mutationObserver) {
    console.log(mutationRecord);
}

var element = document.getElementById("Notebox");

var observer = new MutationObserver(observerChanges);

observer.observe(element, {

attributes: true,

subtree: opt.watchChildren,

childList: opt.watchChildren,

characterData: true

});

/// when you're done observing

observer.disconnect();

function observerChanges(mutationRecord, mutationObserver) {

console.log(mutationRecord);

}

jQuery-Watch Syntax

$("#btnChangeContent").click(function () {
    // assign text programmatically
    $("#SomeContent").text("Hello - time is " + new Date());
});
// watch the content
$("#SomeContent").watch({
    properties: "prop_innerHTML",
    watchChildren: true,
    callback: function (data, i) {
        console.log("text changed");
        alert('text changed' + data.vals[i]);
    }
});

$("#btnChangeContent").click(function () {

// assign text programmatically

$("#SomeContent").text("Hello - time is " + new Date());

});

// watch the content

$("#SomeContent").watch({

properties: "prop_innerHTML",

watchChildren: true,

callback: function (data, i) {

console.log("text changed");

alert('text changed' + data.vals[i]);

}

});

jQuery-Watch on Github

3. June 2015

Fullpage.js Addon for Visual Composer – Video Preview (Update 07.03.2016)

This video should give you a good idea what the addon can actually do.

In my last article I gave you a rough overview of the features & requirements. Here some more details and additions:

Added the fixed header & footer container to the admin interface. You can add special padding, to the top and bottom, through the fullpage settings and make room for them. These are standard content containers, that can hold any Visual Composer content or row setup.
Added automatic menu, which adds links to each section as they are created. Link title matches the section title.
Define section and slide anchors, which are reflected in the browser history.
Sections and Slides can have different backgrounds, providing nice effect options. I added an image background to Section 1 and semi-transparent background colors to the Slides.
Fullpage.js configuration is fully integrated and working. The system sets defaults for a quick start.
Fullpage.js CSS override has been added, but is not complete yet. Added code editor.
Fullpage.js Events have been added and are fully functional. These events are triggered after load, after slide load, after leaving a slide and other events.
iScroll can be seen in Section 2. Added resize handling and configuration options. Still need to do some minor tweaks.
iScroll custom scrollbars are on my list, but not sure I will add these yet.
Prebuild Templates will be added, so that you can quickstart your design. Visual Composer 4.5+ provides some nice new options.
Visual Composer requirement will be 4.5+.
The admin provides a nice color separation for all components and count for slides & sections.

The addon is mostly done. I am finalizing the main admin area this week and will do a final cleanup next week, for the first beta release.

Many people have asked me for a release date. I currently plan to have a fully working Beta in the next 2-3 weeks. Will offer the Addon to a small closed group of customers first, before I think about other release options. I think I will offer between 20-30 slots for the beta run. If you are interested let me know.

Regards
Alexander

Updates

Quickly choose which section / slide to load, when the page is opened.
The addon is injecting its own page template, to make sure that the main container is clear of any theme related margins or padding. As soon as the Fullpage container is added to the layout, the template gets selected dynamically.
21.06.2015 – updating to latest fullPage.js version (2.6.6) and adding new options and changes
13.08.2015
– beta has been delayed due to my vacation & an accident I am recovering from. This is still just a side project ;)
– updating to latest fullPage.js version and adding new options to admin
– updating to latest Visual Composer version
03.09.2015
– moving to Visual Composer 4.7
– finalizing the admin area
14.01.2016
– moving to Visual Composer 4.9x
– fullpage.js version update
– iScroll update
– admin /front-end cleanup … getting close :)
17.02.2016
– works pretty flawless by now
– plugins are updated
– admin complete, working on some minor cosmetics
– not sure yet about distribution :) … my current projects come first!
07.03.2016
– adding version / requirement checks for all linked libs
– moved to VisualComposer 4.10
– fullPage.js version bumped to 2.7.8
– final cleanup of all areas on the way

19. May 2015

How to choose the right JavaScript framework for your next single-page application project ?

How do I choose the right JavaScript framework for my next single-page application project?

A question I have asked myself over and over again.

There are countless options these days, that claim to be the ultimate solution to all our developments needs.

USED BEFORE

I have build applications with

TRIED BEFORE

I have looked at

Polymer
React
and many other solutions out there.

And I seem to be evaluating new options every week :)

ANSWERS ?

The only answer I can give you is that :

None of them will fit any of your projects perfectly.
None of these will cover all project areas to your personal satisfaction.
None of these will prevent you from errors and the need for unconventional solutions.

In the end its a matter of personal taste and project requirements. We only have limited resources to finish a project and find solutions to unsolved problems in a timely fashion (yes this always happens). Go out and play :) Also take a look at TodoMVC, which might help you to decide. No guarantees !

Over the past few month I have evaluated all the things that I used in the past. I started stripping it all down to a bare set of essentials, that have been following me for a long time. There are solutions that just fit and require no replacement.

GOING SOLO

So my answer for the perfect framework, is a set of solid singular solutions that have proven themselves over the years. Working solo or together in harmony.

Like a painter I want to choose my own brushes and color mixture. Programming is an art that needs freedom. A freedom that can often be limited by a too strictly defined framework. Structure is important, but it should never dictate the options you have to fulfill your project goals and limit you.

I will be covering some of those tools here in coming articles.

I will talk about:

MVC
DOM manipulation
Templates
Data-Binding
Directives
Routing
Observables for Arrays and Objects
Modules
Dependency Loading
Utility solutions

…enjoy coding

17. May 2015

Transparency – minimal template engine that maps JSON objects to DOM elements

“Transparency is a minimal template engine for jQuery. It maps JSON objects to DOM elements with zero configuration.”

Semantic data binding – No need for <%=foo%> or {{foo}} assignments
Collection rendering – No need for hand-written loops
Valid HTML templates – Write templates as a part of the HTML, in plain HTML
View logic in JavaScript – No crippled micro-template language, just plain JavaScript functions

Another simple templating solution, that can speed up simple project tasks.

Transparency

17. May 2015

jQuery Template – Simple templating solution

“jQuery Template is a plugin that makes using templates easy and quick. The plugin supports loading HTML files as templates, or taking a jQuery object as the template (usually using script tags to hold the template).”

Features

Define templates inline
Load external templates
Cache templates
One-way content binding using simple data attributes
Data formatters

This is a nice and simple solution, with an easy learning curve ;) If you need more or would like to try other solutions, check the Template-Engine-Chooser :)

9. May 2015

ClockPicker – elegant way to choose time

This time picker provides a unique way to enhance your input fields. Use a clock interface to enter the time. The plugin works with Bootstrap or standalone.

Part of my essentials :)

ClockPicker

9. May 2015

Datedropper – elegant way to enter dates

Datedropper is a jQuery Plugin that provides a quick and appealing interface to enter dates. Nice little plugin to spice up your interface.

Definitely part of my list of essentials :)

datedropper