HTML5, CSS3 and JavaScript Windows 8 Metro Style Tiles

AcidJs.Tiles is a JavaScript, HTML5 and CSS3 layout widget, which resembles the Windows 8 Metro tiles in terms of look and feel, functionality and behaviors 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

Related Posts and Links

Checking if String is a Palindrome with JavaScript

A palindrome is a word, phrase, number, or other sequence of symbols or elements, whose meaning may be interpreted the same way in either forward or reverse direction. It is not uncommon to be asked to write a JavaScript function that checks if a string is a palindrome on front-end developer position interview.

Here’s one possible solution, utilizing a few JavaScript array methods (split(), reverse() and join()). Of course, if you don’t want to get that sophisticated, a simple one-line solution can be easily extracted from the class.

Merry Christmas! Find more front-end experiments and insight here.

Related Posts and Links

CSS3 and JavaScript Image Slideshow Viewer

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I promise, this is the last one for 2013.

What’s already available on my experiments website is this (almost fully) CSS3-driven image slideshow viewer, build with the help of a form, radio buttons, transitions and sibling selectors. It also a supports native keyboard arrow navigation.

JavaScript has been used only for the rendering part, and the class supports various configuration options like bounding box, height, width, additional CSS classes array and default selected slide. The slideshow viewer can be populated either from a local object or via external JSON DTO.

acidjs-css3-slider

Merry Christmas and a Happy New Year! See you in 2014!

Related Posts and Links

Batch Removal of Fake Twitter Followers from Your Browser’s Console

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

Ever had to deal with tons of fake followers? Here is a small script, using Twitter’s REST API that you can run right from your browser’s console to batch remove unwanted users from following you. Once users are blocked, they will be grayed out, so you will be able to decide whether to follow them. Do not worry – users, which you are following will not be blocked, because the script is taking care of that.

thumb

Merry Christmas and a Happy New Year! See you in 2014!

Related Posts and Links

Animated CSS3 Notifications Bar

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

The experiment for today is a lightweight and responsive JavaScript-less solution that can be used for displaying important information on the top of a website, purely CSS3-driven and fully customizable in terms of colors, fonts, sizes and default state (expanded or collapsed):

css3-notification-bar

The CSS3 Hello Bar works with all modern browsers plus IE9+ (excluding transitions). Older browsers that do not understand the :root element of CSS3 will not display the bar, which is a good trade-off considering their small market share.

Related Posts and Links

Donation Request

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I started my blog back in 2006 and later, in 2012 the experiments website as places where I could share my experience and insight in front-end development in my spare time, and ever since I’ve been getting thousands of visitors each month. Recently, however, my work load increased, and respectively, I am getting less and less time to maintain them. In order to continue, I’d like to ask for your donations. I’ve never done this before, neither I am sure it would work, and although I hate asking for that, this is the only way to keep them up and running.

Please, participate if you are happy with what you found here to make a donation.

paypal-donate-button

Hits, Clicks and Downloads Counter 4.0 is Out!

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I am happy to announce that the new version of AcidJs.ClicksCounter is out with cool new features and improved UI!

AcidJs.ClicksCounter is HTML5, JavaScript and PHP-driven hits, clicks and downloads counter, with amazing, fully ajax admin panel and tons of great features such as data comparison, data export in JSON and CSV format, instant backup in zip format, etc.

clicks-counter

AcidJs.ClicksCounter is fully localizable and utilizes some of the greatest features of HTML5 (Blob, FileReader, etc) and its most important functionality runs on the client. It is easy to deploy, does not use SQL, but flat JSON files for databases and it is a matter of simple couple-of-minutes configuration before having it up and running!

Key Features

  • HTML5-powered data comparison.
  • HTML5-powered JSON and CSV data export.
  • Get counts widget.
  • Instant backup download in zip format.
  • Display click counts for a record on the client area.
  • No SQL, just flat JSON database.
  • Data from the popular CCounter PHP script can be easily migrated to ClicksCounter.
  • Fully localizable.
  • Click statistics.
  • Fast and responsive.
  • Fully ajax-driven.
  • Optional automatic reload of the records list.
  • Built on top of Semtex HTML5, JavaScript and CSS3 UI Framework.

What’s New in Version 4.0

  • Sorting of the comparison table by different criteria.
  • Sorting of the records list by different criteria.
  • New metro-style icons for the small items toolbar.
  • Improved UI.

Screenshots:

Supported Browsers

  • Mozilla Firefox
  • Google Chrome
  • Apple Safari
  • Opera
  • Opera Webkit
  • Microsoft Internet Explorer 9+

Make sure you check it out and have fun!

Related Posts and Links