Vuecidity – UI Component Library for Vue.js

Inspired by Material Design and Bootstrap and from a few other takes on modern UI, I just finished Vuecidity – a UI component library for Vue.js and a free, open source project.

Vuecidity provides developers with a huge set of 30+ UI components, 24-column responsive layout grid system, styles and colors, beautifully crafted form elements and a couple of useful Vue directives, which allows them to concentrate on the functionality of the web, iOS, Android and desktop apps they build. Powered by Vue, Vuecidity can be used to simultaneously develop amazing responsive websites, PWAs, desktop applications (through Electron) or mobile apps (through Cordova) using the same codebase written in ES6. SSR as well as many more components are on the roadmap and will be available in upcoming versions as Vuecidity is in constant development and improvement. The library is available for installation via npm and adding it to your project is quick and easy.

Icons.io Font Icon Search Service

Icons.io is a new font icon search service project I’ve just finished. It enables instant search in several icon font providers – Google Icons, Google Material Design and Font Awesome and the list will continue growing. Built with VueJs on top of Vuetify it is fast, reliable, mobile-friendly with nice Google Material Desgin inspired UI.

Ribbon Component for Vue

Almost 7 years after the release of RibbonJS, I am proud to announce my new endeavour in the ribbon UIs, called VueRibbon.

Built on top of Vue and Vuetify with ES6, it offers seamless integration in Vue apps and is easy to customize and extend. Created in compliance with Google Material Design, it also provides unmatched user experience, awesome design (256 color schemes and 2 themes – dark and light) and a huge set of 3000+ font icons from material.io and materialdesignicons.com.

To communicate with the rest of the page, VueRibbon dispatches custom events. API methods are provided to communicate with the ribbon from the outside.

VueRibbon is built with ES6 and the distributions come with WebPack module bundler, so you can start building with it immediately.

RESTful API for Encyclopaedia Metallum

This is an unofficial, third party RESTful API developed and maintained by me for retrieving metal bands data (band and artist bios, discographies, line-ups, etc) from Encyclopaedia Metallum.

Responses from the method calls are in JSONP format and the service is free, however providing an API key along with the requests is required. To use the API you should get a free API key from here first.

This service is not endorsed by or affiliated with Encyclopaedia Metallum.

You can check the documentation on this page and start using the API straight away.

Auto Resizing Textarea HTML5 WebComponent

Just finished my next experiment with HTML5 WebComponents. AcidJs.XTextarea is an advanced replacement of the classic <textarea /> HTML element, supporting custom events and auto resizing as-you-type. Check the extensive documentation in the distribution file (click the download button at the top of the demo page) or scroll this page to see the demos.

thumb

Usage

[sourcecode language=”xml”]<acdisj-xtextarea></acdisj-xtextarea>
<acdisj-xtextarea placeholder="Type your message…" id="textarea-1" name="textarea-1" rows="5" cols="40"></acdisj-xtextarea>
<acdisj-xtextarea name="textarea-2" rows="10" cols="30" disabled></acdisj-xtextarea>
<acdisj-xtextarea name="textarea-5" autoresize="off" rows="5" cols="30"></acdisj-xtextarea>
<acdisj-xtextarea autofocus name="textarea-8" cols="60" rows="5"></acdisj-xtextarea>
<acdisj-xtextarea name="textarea-4" hidden></acdisj-xtextarea>[/sourcecode]

HTML Attributes of the Component

Apart from the form attributes like name, rows, cols, placeholder, spellcheck, autofocus, disabled and readonly etc. and the HTML standard attributes such is id and style AcidJs.XTextarea supports one custom property, allowing to turn the autoresizing off:

  • [autoresize="off"]

JavaScript API – Methods, Accessors and Events

The component supports all standard JavaScript methods querySelector, querySelectorAll, getElementById, etc. plus the following custom methods, accessors and events:

Methods

  • enable() – the method enables back a previously disabled textbox by using the disable() method, the enabled accessor or the disabled and readonly properties.
  • disable() – the method disables the queried textbox, so no user input is possible.
  • getValue() – the method returns the current value of the queried textbox, similar to the enabled accessor.
  • setValue(String|null) – the method sets new value to the queried textbox.

Accessors

  • enabled – gets or sets the enabled state of the textbox. Use Boolean value for the setter.
  • value – gets or sets value of the textbox. The setter requires a string or empty value.

Events

  • type – the event is triggered upon user input and returns an object, containing the current value of the textbox to which the event handler is bound to:

    [sourcecode language=”javascript”]{
    data: "Lorem ipsum dolor sit amet…"
    }[/sourcecode]

    [sourcecode language=”javascript”]
    /*
    * Bind to the "type" event of the textbox
    **/
    $("#my-textarea").on("type", function(e, data) {
    window.console.log("textbox event:", e.type, data);
    });[/sourcecode]

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.

Corporate BS Generator HTML5 WebComponent

Nothing serious this time, just a small fun HTML5 WebComponent, inspired by BS Generator, stitching-up (bullshit) sentences out of random buzzwords:

thumb

Usage:

[sourcecode language=”html”]<acidjs-xbsgenerator></acidjs-xbsgenerator>[/sourcecode]

The component does not have it’s own methods, setters, getters or styles. Just use the tag wherever you want.

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.

Enabling Placeholders in ContentEditable Elements with CSS

Recently I worked on an HTML5 app, utilizing contenteditable elements. According to the specs of the app, the empty editable elements were supposed to have placeholder texts and since the placeholder attribute is only supported by standard input boxes and textareas I was planning to use JavaScript to enable this functionality in contenteditable elements, but then I decided to try this small CSS trick with generated content and the attr(attribute) function, which actually worked:

The CSS:

[sourcecode language=”css”][contenteditable]:empty::before
{
content: attr(data-placeholder);
font-style: italic;
opacity: .75;
}[/sourcecode]

… And the Markup:

[sourcecode language=”css”]<div contenteditable data-placeholder="Add some text…"></div>[/sourcecode]

If you are interested in more CSS3, HTML5 WebComponents and JavaScript stuff, make sure you check my experiments website.

Adding Icons to the Option Elements of the Select Tag in Firefox. Quick and Dirty

Below is a quick and dirty solution for adding icons to the <option /> elements of the <select /> tag utilizing CSS generated content.

Disclaimer: According to the CSS specs, the <option /> element should not support generated content, and this solution works only in Firefox. Anyways, it may come handy sometime.

The Result:

thumb

The CSS:

[sourcecode language=”css”]
.acidjs-cssw-select-icons option::before
{
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin: 2px 6px 2px 2px;
    width: 16px;
    height: 16px;
    background: url("path/to/the/icon.png") no-repeat center;
}
[/sourcecode]

The demo and the download link are on this page. If you are interested in more CSS3, HTML5 WebComponents and JavaScript stuff, make sure you check my experiments website.

Collaboration with Webucator

A couple of weeks ago I was contacted by Webucator asking me if I’d be interested in the creation of a video tutorial with my Parallax Page Scroll Effect with Pure CSS3. No JavaScript. No Hassle blog post and experiment. Of course, I was much excited by the idea, especially when I was told that it will be directed and narrated by Chris Minnick from WatzThis – a published author of several amazing books on web development.

The video is available on YouTube already. Enjoy, have a great weekend and make sure you pay a visit to my new friends at Webucator if you are looking for professional online and onsite instructor-led training classes in web- and software development.

5 Years of Ribbon JS!

Ribbon JS is turning 5 this month! If you are planning to purchase a license, now it’s the time. Join the celebration and get any commercial license for the most advanced and feature-complete JavaScript, HTML5 and CSS3 MSOffice-like ribbon control available on the Internet today at a half price only in August 2015!

ribbonjs.promo