AJAX

New HTML5 Web Component – AcidJs-X-AJAX

Continuing my explorations in the amazing field of HTML5 Web Components, which I started last week, I am happy to present my new endeavor:

x-ajax-html5-web-component

AcidJs-X-AJAX is a lightweight custom tag, capable of making asynchronous server calls with (almost) no coding client-side. Again, it is built on top of Mozilla’s X-Tags library, and looks like that:

<acidjs-xajax
    url="data/person.php"
    action="get"
    params='{"firstName": "Martin", "lastName": "Ivanov", "id": 1234567890}'
    datatype="json"
    id="ajax-panel-01"
    auto="true">
</acidjs-xajax>

Unlike AcidJs.XCheckbox, AcidJsXAjax is not a visual component, but it’s applications are numerous for example – in MV* applications or just pure old AJAX rendering.

Apart from the standard HTML attributes like id, class, data-* etc, here are a few, which are specific to the tag itself:

  • url – the request URL (optional)
  • action – the HTTP method (optional, default is GET)
  • params – query parameters in the form of a JSON object
  • datatype – response type (default is text/plain)
  • id – the ID of the panel
  • auto – if set to “true”, the AJAX call will be executed right after the tag is added to the page.

These properties are also standard getters and setters, so you could do:

document.querySelector("#ajax-panel-01").url;
document.querySelector("#ajax-panel-01").url = "path/to/resource/";

AcidJsXAjax comes also with an easily extensible API and custom events:

  • load()
  • getResponseData()
  • success
  • error

The demo of the component and also it’s code and download link are available on this page.

Advertisements

My New Portfolio/Personal Website is Up and Running

During the Christmas holidays I finally found the time to spend a couple of days to tackle something I’ve been planning to do for quite some time – to fully redo (in terms of code and design) wemakesites.net, my portfolio/personal website. Honestly, I wasn’t sure if I should announce it here, but I am pretty happy with the result, so this is why I am doing it – version 7.0 is now up and running!

wemakesites

Here are a few facts:

  • Custom CMS. PHP backend with RESTFul services.
  • Semantic, elegant, valid and SEO-friendly HTML5 output.
  • Scores an average of 96-100 optimization points on Google PageSpeed (depending on visitors’ network connection speed and my hosting provider’s health).
  • Scores an average of 96-100 optimization points Y!Slow (depending on visitors’ network connection speed and my hosting provider’s health).
  • Optimized both for client- and server-side rendering.
  • Unified modular client- and server-side MVC/MVVM architecture.
  • Async history management.
  • The front-end, templating, session caching and URL routing are built on top of my Semtex UI HTML5, CSS3 and JavaScript framework.
  • Fully async with JavaScript turned on.
  • Asynchronously switchable themes (the icon to the left of the search box in the navigation bar).
  • Supported browsers: Firefox, Chrome, Chromium, Opera, Opera Webkit, Safari, Internet Explorer 9+.
  • Cool social sharing toolbar, achieved with AcidJs.Tiles.
  • Fully responsive CSS3.
  • Lazy loading of images, achieved with AcidJs.ImgLazyload.
  • Decent accessibility score on WAVE.
  • The average loading time of the home page is 1.70 seconds with cache turned off.
  • The average loading time of non-cached async pages is 0.253 seconds.
  • The average loading time of session-cached async pages is 0.019 seconds.
  • CSS and JavaScript build tools.
  • Fully g-zipped.
  • Google PageRank: 4.
  • Version 7.0 (Released January 2014).

Thanks for reading and enjoy the weekend! Please, do not hesitate to contact me if you are interested in more facts about the wemakesites.net!

Related Posts and Links

Web 2.0 Widgets for your Website

Here is a list of a couple of useful and extremely easy to integrate widgets that you may use to add cool Web 2.0 looks and functionality to your website.

Forms.JS – the successor of 6 separate controls for form styling, now consolidated in a single powerful component that will give you total control over the form elements on your page without any additional markup or sophisticated JavaScript.

Dialogs.JS – Say goodbye to the boring default browser dialog boxes you are using on your website or online applications, here is Dialogs.JS!

Web 2.0 AJAX Loading Panel – Enhance your site’s look and feel during AJAX requests with the fully customizable state-of-the art Web 2.0 AJAX Loading Panel without writing a single line of code!

AJAX Gallery.XML – a lightweight, crossbrowser, skinnable and extremely easy to use component for displaying images in cool Web 2.0 looking style and a lightbox.

AJAX Contact Form – It is skinnable, highly customizable, localizable, crossbrowser and ultra fast. The installation and the configuration of the script is easy, and your form can be up and running on your website within minutes.

AJAX Guestbook – an easy to use, AJAX driven, crossbrowser and skinnable guestbook that will give your visitors pleasant Web 2.0 experience on your website.

Rounded Corners Panel.JS – Create rounded corners with any dimensions without additional images or sophisticated CSS and JavaScript coding. Rounded Corners Panel.JS does all this for you. You may choose between three types of rounded corner radius, you are allowed to specify dither (i.e. antialias) color, so your rounded corners’ edges do not look frayed.

TabStrip.XML – a lightweight, yet powerful, skinnable and crossbrowser AJAX driven control for creating tabbed interfaces for websites.

AJAX Hotel Reservation Form 3.0 is Out With New Options and Seamless AJAX Admin

I am happy to announce the release of the new version of AJAX Hotel Reservation Form. Version 3.0 comes with new options both in the admin and in the public part. The administration panel is totally redesigned and reconsidered and offers easy and user-friendly administration of the current reservations in pleasant environment.

Here’s what’s new in version 3.0:

  • Totally reconsidered and redesigned admin with lots of options and cool looks
  • New options for the public part of the component – additional information and included meals
  • Improved and even faster rendering
  • Fully localizable public part and admin

Screenshots from the Admin and from the Public Part

What’s next?

RadioButton.XML – The AJAX Radiobutton Decorator

RadioButton.XML is ajax-driven almost codeless, reliable, accessible and semantic approach for skinning of radio buttons. The solution makes use of real radio buttons with labels and their toggle functionality and skinned list-items, allowing single-line and multi-line radiobutton list rendering, native client- or server-side validation and easy skinning using an image sprite and a few lines of CSS.

The script comes with 12 predefined skins in the full version, while the lite one is shipped with 3. However, creating a custom skin is a matter of minutes.

What’s new in version 6.0

1. Support for Apple Safari and Google Chrome. Now RadioButton.XML works with all major browsers with limited support for IE6.
2. Improved rendering and loading speed
3. Beautiful set of skins
4. A couple of useful client methods for disable, enable, toggle the enabled state and load on demand

RadioButton.XML information page.

RadioButton.XML demo page.

Acid.JS JavaScript Library 3.4 Released with 5 New Scripts

Get most of the website widgets and tools I’m developing in a single package that is regularly updated. Whenever a new script or script update is available, it will be included in the download file. To stay informed and up-to-date with Acid.JS, please, subscribe to my RSS feed.

TabStrip.XML 2.0 AJAX Tabstrip Control Released

TabStrip.XML is a lightweight, yet powerful, skinnable and crossbrowser AJAX driven control for creating tabbed interfaces for websites.

It is easy to configure by simply adding a few lines of code and defining tabstrip placeholder – <div>…</div> element with an ID on the place where the tabstrip should render.

Multiple instances with different skins are supported on a single page. The full version comes with a set of 12 cool skins to fit any website design.

What’s new in version 2.0:

1. Improved rendering and loading speed
2. Support for Safari and Google Chrome
3. Easy 2-step installation on a webpage. The script may be up and running in 5 minutes

Links:

Online demo of TabStrip.XML

Download TabStrip.XML

TabStrip.XML information page