Author: Martin Ivanov

I create modern web components, JavaScript widgets, development tools and web sites. I love experimenting with CSS3 and HTML5. If you like my work, you'd probably want to follow @wemakesitesnet or subscribe to my blog for cool dev stuff. Finally, if you are looking for a rock star developer, get in touch.

X-Reflection: HTML5 Web Component for Adding CSS3 Reflections to any Element

For better or worse WebKit’s -webkit-box-reflect and Mozilla’s -moz-element never made it to the official specification of CSS3, although the latter may come pretty useful and has a lot of potential applications. Personally I am not a fan of reflections and they remind me of the mid 90’s water reflection Java applets but I guess that’s because I am not a designer. Nevertheless, I thought that a custom tag (along with the lazy image loader and x-meme) doing this automatically to all of the HTML elements added into it may come useful, so I implemented AcidJs-X-Reflect, which works like that:

<acidjs-xreflect>
    <img src="path/to/image-01.jpg" height="233" width="310" />
</acidjs-xreflect>
<acidjs-xreflect scale=".5" opacity=".75" endcolor="#b00">
    <img src="path/to/image-02.jpg" height="233" width="310" />
</acidjs-xreflect>
<acidjs-xreflect scale="2" opacity=".75" endcolor="#00f">
    <img src="path/to/image-03.jpg" height="233" width="310" />
    <p>Lorem ipsum dolor sit amet...</p>
</acidjs-xreflect>

Once the component kicks in, any element inside of it is supplied with a configurable (scale, end color, opacity) reflection:

x-refelct-image-01 x-refelct-image-02

The reflection is achieved by duplicating the original content in a separate flipped (scaleY(-1)) tag overlayed by a semi-transparent element with gradient. Initially utilized CSS generated content (::after) for the gradient overlay however I noticed that since the effect is applied with JavaScript (all of the properties of the reflection are configurable) the gradient randomly disappeared in Firefox, so eventually I went for a nested <div />. I also gave up the idea of using scoped styles, since they are not widely supported yet.

HTML Attributes of the Tag

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

  • endcolor – Reflection end (bottom) color. The value should be a valid color string – named, hex, RGB, etc. The default color is white ("#fff").
  • opacity – Reflection translucence. The default value is ".5". ".5" is more transparent "1" is opaque. Values should vary from "0" to "1".
  • scale – Vertical scaling of the reflection, relative to the original source. The default value is "1". "2" is twice the original source.

Methods, Getters and Setters

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc. No component-specific methods, getters or setters.

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.

Guitar Chord Diagrams as… HTML5 Web Components. This Rocks!

Being kind of a pest about HTML5 Web Components these days here, and I’m sorry about that. But this new one rocks, and I am really happy with the result of the fun I had the other day, trying to build a guitar chord diagram with pure CSS

Here it is – AcidJs.XChord – a HTML5 Web Component for plotting purely CSS3-driven, image-less, scalable and printer-friendly guitar chord diagrams, supporting any number of strings, wrapped as a fun and easy to use custom tag:

<acidjs-xchord label="A" startat="1" label="E" description="The A-major chord">
    <acidjs-xchord-string key="e" state="muted" fret="0"></acidjs-xchord-string>
    <acidjs-xchord-string key="a" state="empty" fret="0"></acidjs-xchord-string>
    <acidjs-xchord-string key="d" state="pressed" fret="2"></acidjs-xchord-string>
    <acidjs-xchord-string key="g" state="pressed" fret="2"></acidjs-xchord-string>
    <acidjs-xchord-string key="b" state="pressed" fret="2"></acidjs-xchord-string>
    <acidjs-xchord-string key="e" state="empty" fret="0"></acidjs-xchord-string>
</acidjs-xchord>

Using the tag above you get:

6-String Guitar Diagrams:

acidjs-xchord-01

7-, 8-, 9- (yes, I love Djent) Axe Diagrams:

acidjs-xchord-02

Bass Diagrams:

acidjs-xchord-03

… Virtually any-string-number guitar chord diagram.

HTML Attributes of the <acidjs-xchord></acidjs-xchord> Tag

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

  • frets – Optional number of the frets that should render. Default: "4".
  • size – Optional size (number) of the diagram. Default: 1. "1.5" or "2" will render a bigger diagram.
  • startat – From which fret should the diagram start from. Default: "1".
  • description – Optional decription of the chord, for example "This is A-minor".
  • label – Optional label of the chord, for example "Am".

HTML Attributes of the <acidjs-xchord-string></acidjs-xchord-string> Tag

  • key – The key of the string, for example "E".
  • state – The state of the played note. Possible values: "empty", "pressed" or "muted".
  • fret – The fret which is the state applied to.

JavaScript Methods of the Tag

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc. No component-specific methods, getters or setters.

Fulfill my child dream of becoming a rock star – check the demo and get the component. 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.

Extended File Upload Input, Wrapped as a HTML5 Web Component

Yesterday I finished my latest endeavor of the explorations of the amazing world of HTML5 Web Components. I must say that the deeper I get into the topic, the more I understand their importance, and I am pretty sure that very soon (even much sooner that I dared to speculate a couple of months ago) they will become really popular.

acidjs-xupload

The new component is called AcidJs.XUpload, and is an extended input element for uploading files, similar to <input type=”file” />, but with a lot of additional out-of-the-box features such as multiple/directory upload, icon support, editing of the file list, custom events and last but not least – fully skinnable via CSS. Using it is charming, stylish and so HTML5:

<acidjs-xupload></acidjs-xupload>
<acidjs-xupload width="140" height="44" name="file-02" label="Select files"></acidjs-xupload>
<acidjs-xupload id="file-02" name="file-02" label="Browse for files" multiple></acidjs-xupload>
<acidjs-xupload width="150" height="54" icon="AcidJs.XUpload/icons/icon-01.svg"></acidjs-xupload>
<acidjs-xupload directory label="Select a Folder to Upload"></acidjs-xupload>
<acidjs-xupload multiple accept=".gif" label="Select GIFs"></acidjs-xupload>
<acidjs-xupload multiple accept="image/*" label="Select Images"></acidjs-xupload>
<acidjs-xupload multiple accept="video/*" label="Select Videos"></acidjs-xupload>

HTML Attributes

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

  • width – Optional width of the component. Default is auto.
  • height – Optional height of the component. Default is 2em.
  • name – Optional name of the component which will be used as query parameter. No default name.
  • label – Optional label of the component. Default is Browse....
  • icon – Optional icon of the component. By default no icon is set.
  • disabled – If set, the component will be rendered disabled.
  • multiple – If set, multiple selection will be enabled, so users will be able to select multiple files via Ctrl/Shift + Click or Ctrl + A.
  • accept – Allows the setting of file filters (Check the examples for browser support).
  • directory – If set, users will be able to upload a whole directory and sub-directories (Check the examples for browser support).
  • nofiles - If set, users will be able to remove items from the drop down, containing the currently selected files.

* Due to security reasons, setters and getters are disabled.

JavaScript Methods

Any native JavaScript method (getElementById, querySelector, etc. plus the component-specific:

  • getPostData() – returning the current FileList, which can be used to upload the data to the server (check the information on this page for more info regarding FileList).

* Due to security reasons, setAttribute and removeAttribute will not take effect.

JavaScript Events

  • "acidjs-xupload-change" – Similar to the normal change event, but returning the FileList, which can be used to upload the data to the server (check the information on this page for more info regarding FileList):
    $("#file-02").bind("acidjs-xupload-change", function(e, data) {
        window.console.log(e.type, data);
    });
    

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-IMG: HTML5 Web Component for Image Lazy Loading and More

thumb

AcidJs.XImg is a HTML5 Web Component, wrapped as a custom extended image tag supporting out-of-the-box lazy loading, native getters, setters and JavaScript methods. And what is is most important, using it is as simple as:

<acidjs-ximg
    width="310"
    height="233"
    src="images/image-01.jpg">
</acidjs-ximg>

<acidjs-ximg
    width="310"
    height="233"
    placeholder="path/to/custom/placeholder.png",
    src="images/image-01.jpg">
</acidjs-ximg>

 

HTML Attributes of the Tag

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

  • src – URI of the image that will be loaded when scrolled into view.
  • width – width of the image in pixels.
  • height – Height of the image in pixels.
  • title – Optional title of the image.
  • placeholder – Optional URI to the placeholder image. If not set, one of the system will be used (Check the PLACEHOLDERS object in the AcidJs.XImg/classes/XImg.file). You can create your own base-64-encode placeholder with this online tool and add them to the PLACEHOLDERS.

All attributes are also getters/setters.

JavaScript Events of the Tag

Any native JavaScript event (click, mouseover, etc.)

JavaScript Methods of the Tag

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc.

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. You may also want check this blog post to learn how to implement lazy loading with images with JavaScript only.

Flip Switcher HTML5 Web Component

X-Switch is a HTML5 Web Component for creating beautiful and skinnable multipurpose flip switches out of the box as simple HTML tags and small, but powerful native JavaScript API:

<acidjs-xswitch></acidjs-xswitch>
<acidjs-xswitch labeloff="aus" labelon="ein"></acidjs-xswitch>
<acidjs-xswitch mode="on" labeloff="aus" labelon="ein"></acidjs-xswitch>
<acidjs-xswitch mode="off" labeloff="изкл" labelon="вкл"></acidjs-xswitch>
<acidjs-xswitch enabled="false"></acidjs-xswitch>
<acidjs-xswitch mode="on" enabled="false"></acidjs-xswitch>
<acidjs-xswitch labeloff=" " labelon=" "></acidjs-xswitch>

thumb

HTML Attributes of the <acidjs-xswitch&gt</acidjs-xswitch&gt Tag

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

  • "acidjs-xswitch-mode-change" – Triggered when the switcher is clicked, and returning the new selected state of the components as an object:
    $("#switch-01").on("acidjs-xswitch-mode-change", function(e, data) {
    window.console.log(e.type, data); // {selected: true // false|true}
    });

JavaScript Methods of the <acidjs-xswitch></acidjs-xswitch> Tag

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc.

Check the demo on this page. On it you will also find a download link. 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. You may also want check this blog post to learn how to create this type of flip switches with pure CSS.

Have a great weekend!

HTML5 Web Component for Country Flags

Recently I discovered the huge free data sets on geonames.org, and I am actually planning a series of HTML5 Web Components which utilize this data. The first one is X-Flag – a custom HTML5 tag, able to display country flags out of a specified country code in three different sizes:

<acidjs-xflag code="bg"></acidjs-xflag>
<acidjs-xflag code="cz" size="small"></acidjs-xflag>
<acidjs-xflag code="de" size="medium"></acidjs-xflag>
<acidjs-xflag code="mt" size="large"></acidjs-xflag>

thumb

HTML Attributes of the <acidjs-xflag></acidjs-xflag> Tag

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

  • code – Required valid country code, for example "bg".
  • size – Optional size of the flag, a choice between "small", "medium" and "large". Default: "medium".

JavaScript Methods of the <acidjs-xflag></acidjs-xflag> Tag

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc.

Check the demo on this page. On it you will also find a download link. 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-Ellipsis – Native Multiline Ellipsis, Truncation and Text Capping as a HTML5 Web Component

X-Ellipsis is a custom HTML5 Web Component, enabling easy text truncation, capping and ellipsis, which can be used as a simple HTML tag, without any additional JavaScript:

<acidjs-xellipsis cap="256" labelexpand="read more" labelcollapse="collapse">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo?
</acidjs-xellipsis>

While playing with the demo and downloading the code, you may want to take a look at it’s simple, but powerful API.

HTML Attributes of the Tag:

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

  • cap – Optional number, specifying the length at which capping should occur. Default: "128".
  • labelexpand – Optional expand label. Default: "»".
  • labelcollapse – Optional collapse label. Default: "«".
  • expand – If set to "off", expanding will be disabled. Default: "on".

JavaScript Methods of the Tag:

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc. as well as their jQuery or other libraries aliases), plus the component-specific:

  • cap(string) – Manually set new capping value to the queried element.
    • JavaScript:
      document.querySelector("#text-01").cap(256);
    • jQuery:
      $("#text-01").get(0).cap(256);
  • content(string) – Set new capping value to the current content of the queried element.
    • JavaScript:
      document.querySelector("#text-01").content("Lorem ipsum dolor, blah, blah, blah.");
    • jQuery:
      $("#text-01").get(0).content("Lorem ipsum dolor, blah, blah, blah.");

     

Happy text capping and make sure you check my other HTML5 Web Components experiments and demos!

x-ellipsis