css3

The HTML5, CSS3 and JavaScript Experiments Website Has Just Received a Facelift

It’s been more than a year since launched HTML5, CSS3 and JavaScript Experiments to share my insight in front-end development and I never thought that it would become that popular in a relatively short period of time. As of September 2014 the website showcases than 60 demos also available for download and because of that constantly growing number and devout visitors (Thanks, fellows, you are the ones that keep this up and running!) I realized that the old layout became less usable and demands something new. The time for a facelift had come and this is what I did during the past few days.

Due to my recent excitement and digging into the amazing world of HTML5 Web Components, I decided to take the risk of losing page-views due to browser incompatibility and implemented the front-end using custom-built web components, some of which such as AcidJs.XImg (used for optimizing the loading of images) and AcidJs.XTabs (used for the code listing at the bottom of each page) are already featured on the website. Apart from these two, I developed AcidJs.XDrawer, which is used for the left hand navigation, and it will be soon available as a standalone demo and download.  The utilization of reusable HTML5 Web Components allowed me to remove a lot of custom JavaScript and CSS, which optimized the overall performance and loading time. The currently supported browsers are all evergreen browsers and IE10+.

As a bottom line – I am really happy with the result, and I hope that the website will continue being a useful and inspirational source for front-end developers, sharing the same passion towards HTML5, CSS3 and JavaScript.

Thanks and enjoy!

Native AJAX Loading Overlays as HTML5 Web Components

I’ve just deployed my latest experiment related to the exploration of HTML5 Web Components I started lately. X-Overlay is a custom tag, with a bunch of handy methods, attributes, getters and setters that can be used to display loading overlays on any element during AJAX calls. Using it is easy as:

<acidjs-xoverlay
    id="overlay-01"
    spinner="AcidJs.XOverlay/styles/images/loading-02.gif"
    parent=".ajax-updating-box-01"
    hidden>
</acidjs-xoverlay>

<acidjs-xoverlay
   id="overlay-02">
</acidjs-xoverlay>

<acidjs-xoverlay></acidjs-xoverlay>

x-overlay

The <acidjs-xoverlay> Tag Attributes:

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

  • parent: the element (CSS selector, for instance body, #my-div, .my-class-name, etc.), which will be blocked when X-Overlay’s show() method is used. If no parent attribute is set, body will be used by default.
  • spinner: Optional spinner image URL (default dimensions are 32 x 32 pixels and are set in the AcidJs.XOverlay/styles/XOverlay.css). The default URL is "AcidJs.XOverlay/styles/images/loading-02.gif"
  • hidden: if attribute is set, the component will not be visible on the page and could be set to visible either by removeAttribute("hidden") or by using component’s show().

The <acidjs-xoverlay> Tag Methods, Getters and Setters:

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:

  • show(): to show the overlay, for example:
    jQuery:
    $("#overlay-1").get(0).show();
    JavaScript:
    document.getElementById("overlay-1").show()
    document.querySelector("#overlay-02").show()
  • hide(): to hide the overlay, for example:
    jQuery:
    $("#overlay-1").get(0).hide();
    JavaScript:
    document.getElementById("overlay-1").hide()
    document.querySelector("#overlay-02").hide()
  • destroy(): to fully remove the overlay from the DOM, for example:
    jQuery:
    $("#overlay-1").get(0).destroy()
    JavaScript:
    document.getElementById("overlay-1").destroy()
    document.querySelector("#overlay-02").destroy()

Make sure you don’t miss the demo or some of my other HTML5 Web Components, CSS3 or JavaScript experiments!

X-Chessboard: HTML5 Web Component

A few months ago I blogged about a fun experiment, explaining the creation of animated 3D chessboard and pieces with CSS3 and UTF characters only. Following my recent excitement and play with HTML5 Web Components I reused the CSS from the example and extended it to a custom tag, which when used as a simple HTML and without any JavaScript:

<acidjs-xchessboard id="xchessboard-01" boxsize="64">
    <acidjs-xchessboard-piece data-bind='{"type":"rook", "color":"white", "position": "a1"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"knight", "color":"white", "position": "c3"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"bishop", "color":"white", "position": "c1"}'></acidjs-xchessboard-piece>
    [...]
    <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "f7"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "g7"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "h5"}'></acidjs-xchessboard-piece>
</acidjs-xchessboard>

Produces this beautiful chessboard:

x-chessboard

Using it, you may define as many pieces as you need, and you can also specify their type, color and position on the board, using the data-bind attribute of the <acidjs-xchessboard-piece></acidjs-xchessboard-piece> tag:

{
    "type":"pawn",
    "color":"black",
    "position": "h5"
}

As usual – here’s the link to the demo, the code and the download, and on my HTML5, CSS3 and JavaScript Experiments and Insight website there’s a lot of other stuff that you may find useful.

Cheers and until later! See you on Twitter!

Atypical Uses of Radio Buttons and Checkboxes for Building Interactive UI Widgets

Radio buttons and checkboxes are traditionally associated with forms and data, however if you spend some time playing with these elements and CSS you will certainly find a lot more possible and not so boring uses. Here are a few, which will maybe give you ideas and will inspire you.

Star Rating Widget

Fully functional star rating widget, utilizing simple HTML form, hidden radio buttons, adjacent sibling selectors and right-to-left, with hover, selection, persisted state and disabling (a.k.a. already voted).

thumb

Animated CSS3 Vertical Accordion

The widget utilizes a simple form with radio buttons, CSS3 animations and adjacent sibling selectors.

animated-css3-only-horizontal-accordion

CSS3 Treeview

Fully functional, multi-level CSS3-only treeview with persisted state, utilizing hidden checkboxes and list elements.

css-3-treeview

CSS3 Treeview with Nested Nodes Selection. Almost JavaScript-less.

Similar to the treeview from the previous example, but with updated look and feel and added support for nested nodes selection via an additional checkbox.

css3-treeview-with-multiple-node-selection

CSS3 Tabstrip

Feature-complete CSS3-only tabstrip widget, utilizing hidden radio buttons.

css3-tabstrip

Notifications Bar

JavaScript-less animated notifications bar, utilizing a couple of div elements and a single hidden checkbox.

css3-notification-bar

iPhone Toggle Buttons

Fully functional iPhone-like toggle buttons, made up of labels, radio buttons or checkboxes.

javascript-iphone-toggle-buttons

Animated CSS3-only Slides Viewer

Fully functional presentation slides viewer, utilizing radio buttons, CSS counters and animations with native keyboard arrow support.

slides-viewer

Custom Skinnable Radio Buttons and Checkboxes

My favorite approach for styling radio buttons and checkboxes with semantic and minimalistic markup.

css-pages-imageless-css3-custom-checkboxes-and-radio-buttons

Enjoy the weekend!

Related Posts and Links

HTML5, CSS3 and JavaScript Windows 8 Metro Tiles 2.0 is Out!

I am happy to announce that the new version of AcidJs.Tiles is out with improved and even more realistic looks and animations. It also includes a minor bug fix, related to the setting of the “title” property of the control.

AcidJs.Tiles is a JavaScript, HTML5 and CSS3 layout widget, which resembles the look and feel, functionality and behaviors of Windows 8 Metro tiles, and can be used on web sites or web apps. It is easy to configure via a small, but powerful API and events, and comes with stunning and realistic desktop-like 3D CSS3 animations.

acidjs-tiles-promo-01

The tiles can be used as placeholder of virtually anything – from simple text, to sophisticated markup and forms.

acidjs-tiles-promo-02

tiles

The new version is backwards compatible, so upgrading from version 1.0 is easy and out of the box and would not cause any trouble.

And last, but not least, click the image below to check a cool real-life demo of AcidJs.Tiles:

acidjs.tiles.blog.demo

Related Posts and Links

CSS3 Rating Stars with Hover and Selection

Just before the weekend, here’s a pure CSS3 implementation of a rating star system with support for selection and hover, made-up by radio buttons, rtl, generated content, minimal markup and sibling selectors.

thumb

Enjoy the weekend!

Related Posts and Links

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