Development and Productivity Extensions for Google Chrome

If you are looking for cool development and productivity tools, here are a few, created by me, and available as handy Chrome Chrome extensions:

Builder.CSS

Builder.CSS is a free tool for merging and minifying style sheets into a single file, using some of the coolest HTML5 features like drag and drop of local files and processing them without uploading to the server. I am happy to announce that recently Builder.CSS has evolved to a free online service with tons of improvements, brand-new and amazing interface, drag and drop of local of styleshets from the desktop, predefined projects and much more. Get the Chrome extension or click here for more info and demo.

W3C Validation Bookmarklet

Acid.JS Validator is a free bookmarklet that uses the W3C SGML parser’s API to validate the markup of the page on which it is called. Get the Chrome extension or click here for more info and demo.

Stickeez

Stickeez is a sticky notes JavaScript application using the new HTML5 File API, localStorage and CSS3. The data is fully persisted on the client. Stickeez also has an option for importing/exporting data so users can save their notes before cleaning up cookies or import notes to another browser. And finally – users can choose between 4 types of board styles – cork, fridge, whiteboard and skulls. Get the Chrome extension or click here for more info and demo.

Image to Base-64 Data-URI Encoder

Image2Base64 is an online tool, provided by Acid.JS Web.UI for conversion of image files to base64 data URIs. It implements the new HTML5 file API, and the selected images are processed entirely on the client without uploading them onto the server. Get the Chrome extension or click here for more info and demo.

Hasher Message Digest Encoder

Hasher is an online service for creating message digests with a wide range of more than 40 encryption algorithms. Depending on the choice of the user, after the encryption hashes are stored in the browser’s local storage in convenient JSON format so they can be used or deleted later. Get the Chrome extension or click here for more info and demo.

HTML5 Charts

I’ve just finished another cool HTML5, CSS3 and JavaScript example – the Charts class. It’s not canvas, because I don’t care about canvas – just good old HTML5 and CSS3 and a bit of JavaScript for processing the charts data. Make sure you check it here and enjoy the day! In case you like it, you may want to download it or maybe check other cool dev experiments.

HTML5, CSS3 and JavaScript Experiments and Insight Website

I am pleased to announce that I’ve just finished my latest endeavour – HTML5, CSS3 and JavaScript Experiments and Insight, and most of the code samples and demos from my blog have been moved there in and new and convenient code-listing and demo form. From now on, each new blog post will be accompanied by a dedicated page on that website on which my readers will be able to have a look at the code, run the example and eventually download it.

Enjoy HTML5, CSS3 and JavaScript Experiments and Insight and have a great rest of the week!

CSS3 Driven Slides Viewer Without any JavaScript

This is an experiment, demonstrating that you can create cool slide viewer functionality without a single line of JavaScript, but only by the means of CSS3 and HTML5.

Watch this presentation to learn how it’s done and what makes it so cool. If you don’t feel like reading, just check the demo or download CSS3 Slides Viewer right away.

The HTML:

…Is a simple <form /> and a radio button list:

<div class="css3-slides-viewer">
    <form name="css3-slides-viewer" method="post" action="./">
        <fieldset>
            <legend>CSS3 Slides Viewer</legend>
            <ul>
                <li><input type="radio" name="css3-slides-viewer-slides" autofocus="autofocus" id="slides-00" checked="checked" />
                    <label for="slides-00"><!-- / --></label>
                    <section>
                        <!-- slide content should go here -->
                    </section>
                </li><li><input type="radio" name="css3-slides-viewer-slides" id="slides-01" />
                    <label for="slides-01"><!-- / --></label>
                    <section>
                        <!-- slide content should go here -->
                    </section>
                </li>
            </ul>
        </fieldset>
    </form>
</div>

The Slides Counter…

… Has been implemented via CSS counters:

.css3-slides-viewer > form > fieldset > ul > li section::before
{
    counter-increment: slide;
    content: "Slide " counter(slide);
}

The Fade-in/out Animation…

… Is using delayed CSS3 transitions and visibility: visible/hidden.

.css3-slides-viewer > form > fieldset > ul > li > section
{
    transition: all 500ms 10ms ease-in;
}

Hide/Show Slides

/* by default slides are hidden */
.css3-slides-viewer > form > fieldset > ul > li > section
{
    visibility: hidden;
}

/* the slide is visible only if it's radio button is selected */
.css3-slides-viewer > form > fieldset > ul > li > input:checked ~ section
{
    visibility: visible;
}

Supported Browsers

Mozilla Firefox, Google Chrome, Apple Safari, Opera, nternet Explorer 9+

Due to the lack of support for CSS transitions, Internet Explorer 9 does not play the fade-in/out animation, and enabling the keyboard navigation should be done by clicking the buttons on top, because that browser does not support the autofocus=”autofocus” property of HTML5.

Check the demo or download CSS3 Slides Viewer.

If you like this solution, you can also check my personal wesbite, Acid.JS Web.UI, my blog or follow me on Twitter.

Make sure you try my online CSS minifier and merger and image to base-64 encoder.

Related Posts

• CSS3 Treeview. No JavaScript.
• HTML5 Resume Generator and Onepager Website
• Selecting only the first element occurence out of siblings with the same class name with CSS3
• How to Style Select Boxes with CSS3
• CSS3 Element Reflections
• CSS3 iPhone Toggle Buttons
• CSS3 Gaussian Blur Effect
• Fancy CSS3 Tooltips Without JavaScript
• Imageless Custom Checkboxes and Radio Buttons with CSS3
• CSS3 Background Image Cropping

Builder.CSS – Online CSS Optimizer, Merger and Minifier

I am happy to announce that one of Acid.JS‘s most successful widgets, Builder.CSS has evolved to a free online service with tons of improvements, brand-new and amazing interface, drag and drop of local of styleshets from the desktop, predefined projects and much more. Builder.CSS is a free tool for merging and minifying style sheets into a single file. You can use it along with our Image2Base64 Encoder, Builder.JS and RESTBuilder tools.

Just give it a try on it’s new home page. Optionally, it is available for hosting on your own domain – if you are interested, please, check the Help & About tab of Builder.CSS.

Features and Improvements

• New and cool looks with easy and intuitive UI.
• Brand-new optimization routine, crunching your CSS even more at the speed of light.
• Support for predefined projects, which can contain the styles of all your websites (self-hosted version only).
• Add files from desktop via drag and drop.
• View, exclude and remove files from compilation.
• Processing is done entirely in the browser.
• Option to save the ouput to a file on the server (self-hosted version only).
• … And much more, just try it here.

Screenshots

Related

• HTML5 Shopping Cart
• W3C validation bookmarklet
• Online image to base-64 data-uri converter
• Hasher – online message digest encoder
• Builder.JS – JavaScript merger, minifier and obfuscator
• Stickeez – an amazing HTML5-driven sticky notes application
• Acid.JS web components and controls

България – чудната страна на свободните медии

За 99% от практикуващите, да си журналист в България не е призвание, а професия, диктувана от конюнктурата.

Българският журналист е създание от пластелин – проект на работодателя си (който от своя страна е опекунстван от еди-кой-си политик, бизнесмен или просто мутра), който оформя мисленето на подопечния си, възпитан в културата на покорството и безгръбначието още в университета. Такива бяха журналистите преди 1989, такива са и сега, 23 години по-късно. Не се е променило и високомерното мълчание, неизбежно давано като отговор на директни въпроси, засягащи самото битие на пластелиненото човече с голямо внушено самочувствие.

Loving my CSS3 Babies

I am not a huge fan of roundups, but this morning, I found that I have a few pretty popular CSS3 posts and decided to put them in a single post which will be updated whenever a new one appears and is worth seeing.

How to Create a Fully Functional CSS3-only Treeview

How to Create a Fully Functional CSS3-only Tabstrip without a Single Line of JavaScript

How to Create Semantically Correct Imageless Custom Checkboxes and Radiobuttons with CSS3

How to Style HTML Dropdowns with CSS3

Creating Crossbrowser CSS3 and SVG Reflections

How to Create iPhone Toggle Buttons with CSS3

How to Achieve Gaussian Blur Effect with CSS3

CSS3 Driven Slides Viewer Without any JavaScript

Just check this amazing presentation here.

How to Create Fancy Animated Tooltips without any JavaScript

How to Crop Background Sprite with CSS3