development

X-Parallax: New HTML5 Web Component

A couple of days ago I blogged about an experiment in the creation of a purely CSS3-driven parallax effect, and ever since I started thinking of wrapping it as a custom HTML5 Web Component to avoid the hassle of class names and rules in setting the slide images or background color.

As a whole, I am very happy with the result, called X-Parallax. It is easy to configure, fully responsive and very fast. Below are a few screenshots, but if you want you may want to jump straight to the demo (acting also as a tutorial of how to use it) and download the code.

Usage

<acidjs-xparallax nav="top" animationspeed="2000" defaultslide="0">
    <acidjs-xparallax-slide label="X-Parallax" background="images/roots.jpg">
            <!-- slide content -->
    </acidjs-xparallax-slide>
    <acidjs-xparallax-slide label="Download" background="images/sea.jpg">
            <!-- slide content -->
    </acidjs-xparallax-slide>
    <acidjs-xparallax-slide label="Installation" valign="middle" background="images/flowers.jpg">
            <!-- slide content -->
    </acidjs-xparallax-slide>
    <acidjs-xparallax-slide align="left" valign="top" label="Customization" background="images/glass.jpg">
            <!-- slide content -->
    </acidjs-xparallax-slide>
    <acidjs-xparallax-slide label="HTML5 Web Components" align="left" background="images/broken.jpg">
            <!-- slide content -->
    </acidjs-xparallax-slide>
</acidjs-xparallax>

Screenshots

Top Navigation Bar

x-parallax-top

Right Navigation Bar

x-parallax-right

Bottom Navigation Bar

x-parallax-bottom

Left Navigation Bar

x-parallax-left

Navigation Off

x-parallax-none

HTML Attributes of the <acidjs-xparallax /> Tag:

  • nav: Position of the navigation bar. Default: "top". Other values are "right", "bottom", "left" or "none". Setting nav="none" will not render the navigation bar.
  • animationspeed: Slide speed in milliseconds. The default value is "2000", i.e. 2 seconds.
  • defaultslide: Zero-index visible slide on page load. The default value is "0", i.e. the first slide.

HTML Attributes of the <acidjs-xparallax-slide /> Tag:

  • label: Navigation item label.
  • background: Valid color value or image. Default value: "#639" (my thoughts are with you and your family, Eric).
  • align: Horizontal alignment. Default: "center". Other values: "left", "center" or "justify".
  • valign: Vertical alignment. Default: "middle". Other values: "top" or "bottom".

Supported Browsers:

Evergreen browsers plus Internet Explorer 10 and above.

Check it on this page and have fun!

thumb

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Advertisements

Syntax Highlighter HTML5 Web Component Based on Lea Verou’s Prism.JS

AcidJs.XHilite is a syntax highlighter HTML5 Web Component, based on Lea Verou‘s Prism.JS and wrapped as a custom tag with support for multiple languages and both declarative and async loading of the code to be highlighted.

Usage:

<acidjs-xhilite language="javascript" height="200" width="400">
function sayHi() {
    return "Hello, World"!;
}

sayHi.call(this);
</acidjs-xhilite>

Recently I my HTML5, CSS3 and JavaScript Experiments website received a major facelift and as a next step and I am planning to replace the syntax highlighter I am currently using with AcidJs.XHilite.

HTML Attributes of the Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

  • language – The language to highlight, for example language="javascript". Default: "markup" (usable with HTML, SVG, XML, etc.). Check prismjs.com for a complete list of supported languages.
  • width – Optional width in pixels of the code block, for example: width="600".
  • height – Optional height in pixels of the code block, for example: height="200".
  • src – Instead of adding the code to highlight in the tag, you can specify path to the file which content needs to be highlighted, for example: src="example.js"

JavaScript Methods of the Tag

Native JavaScript methods (document.getElementById, document.querySelector, etc. as well as their jQuery or other libraries aliases).

Check the screenshots below or go straight to the demo and download:

x-hilite-markup

x-hilite-javascript

x-hilite-svg

x-hilite-css

x-hilite-php

x-hilite-svg

x-hilite-java

x-hilite-csharp

Check the demo on this page. You will also find a download link there. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

X-NotificationsBar: HTML5 Web Component

Just finished my new endeavour in the amazing world of HTML5 Web Components, called X-NotificationsBar and based on an earlier CSS3-only driven solution. Here’s how to use it, after you check the demo and eventually download it:

<acidjs-x-notifications-bar bgcolor="#016fba" expanded="true" message="random" loop="5000">
    <acidjs-x-notifications-bar-message>
        HTML5 Web Components enable truly encapsulated and reusable components for the web. 
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        You can browse the other examples of HTML5 Web Components on <a href="http://experiments.wemakesites.net/html5-web-components.html" target="_blank">this page</a>.
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        More info regarding this exciting new technology: 
        <a href="http://webcomponents.org/" target="_blank">WebComponents.org</a>,
        <a href="http://polymer-project.org/" target="_blank">Google Polymer</a>,
        <a href="http://x-tags.org/" target="_blank">Mozilla X-Tag</a>.
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        <p>If you like this solution, you can also check my 
        <a href="http://wemakesites.net/" target="_blank">personal wesbite</a>, 
        <a href="http://semtex.wemakesites.net/" target="_blank">Semtex UI Framework</a>, 
        <a href="http://acidjs.wemakesites.net/" target="_blank">Acid.JS Web.UI</a>, 
        <a href="https://acidmartin.wordpress.com/" target="_blank">my blog</a>,
         follow me on <a href="https://twitter.com/wemakesitesnet" target="_blank">Twitter</a> 
         or consider a <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=QFUHPWJB2JDBS" target="_blank">donation</a>.</p>
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        If you prefer a pure CSS3 solution of this example, you will 
        <a href="http://experiments.wemakesites.net/css3-hello-bar.html" target="_blank">find it here</a>.
    </acidjs-x-notifications-bar-message>
</acidjs-x-notifications-bar>

x-notifications-bar-html5-web-component

The <acidjs-x-notifications-bar></acidjs-x-notifications-bar> Tag Attributes:

  • bgcolor – Optional background color. Default value: “#e34c26”.
  • expanded – Boolean, optional. Default: “true”.
  • message – Zero-based index or “random”. “0” means that the content of the first <acidjs-x-notifications-bar-message> will be set. If “random” is set, a random message will be displayed. Default: “0”
  • loop – Optional timeout in milliseconds for looping messages. Default null.

The <acidjs-x-notifications-bar-message></acidjs-x-notifications-bar-message> Tag:

It should be used to set messages to the notifications bar, one message at a time. The tag does not support any attributes and accepts any HTML.

Have fun and enjoy the weekend!

X-Checkbox – Custom HTML5 Web Component

People who follow this blog (cheers, mates!) and my fellow co-workers know that I am interested in the form control styling, and especially that of check boxes and radio buttons. Over the years I have come up with a number of different solutions, but finally I found the time to start experimenting with the new and exciting world of the HTML5 Web Components. This is my first attempt to create a custom web component – a custom check box, built on top of Mozilla’s X-Tag library. The reason I did not use Google Polymer is just because I started playing with X-Tags, but certainly in the near future I will utilize Polymer.

So here it is – as easy as <acidjs-xcheckbox></acidjs-xcheckbox>, supporting native getters, setters and native properties (checked, disabled, class, etc.) as well as any other custom attributes, form submission without additional check box manipulation, keyboard events plus a couple of additional methods for toggling the enabled and checked states.

Since Shadow DOM is not consistent across browsers yet, the gory guts of the component will reveal a simple check box, wrapped in a label. The look and feel has been achieved with CSS3. Tested on Firefox and Chrome, but supposedly should work on other modern browsers plus IE11.

x-checkbox-custom-web-component

Have nice weekend and greetings from sunny Malta!

My New Home Studio in Malta

I recently left Germany relocating to the island of Malta, and a couple of weeks later I was finally able to deploy my new home studio with a new addition – an amazing custom-made 2 x 12 guitar cabinet with Celestion V30 speakers, built for my by Paul Gough of Zilla Cabs (cheers, Paul – for all the hard work, patience and killer quality).

Here are a few photos of the studio. Hopefully I find more time for playing the guitar in the teeth of my main job as a front-end developer. In case you are interested, here’s a detailed rundown of my rig, and on this page you’ll find a lot more photos and specs of my guitars and gear.

IMG_0487 IMG_0488 IMG_0489 IMG_0491 IMG_0492 IMG_0495 IMG_0498 IMG_0500 IMG_0501 IMG_0507 IMG_0511 IMG_0513 IMG_0514 IMG_0516 IMG_0517

Finally – thanks for reading this and greetings from sunny Malta!

A Word About Freelance Websites

Freelance websites are cheap employers’ favorite places to hire cheap developers to build their big and shiny dreams at discount prices and low quality, and make these sites owners rich for making both sides happy and content.