Thoughts

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!

My New Home Studio in Malta

I recently left Germany relocating to the island of Malta, and a couple of weeks later I was finally able to deploy my new home studio with a new addition – an amazing custom-made 2 x 12 guitar cabinet with Celestion V30 speakers, built for my by Paul Gough of Zilla Cabs (cheers, Paul – for all the hard work, patience and killer quality).

Here are a few photos of the studio. Hopefully I find more time for playing the guitar in the teeth of my main job as a front-end developer. In case you are interested, here’s a detailed rundown of my rig, and on this page you’ll find a lot more photos and specs of my guitars and gear.

IMG_0487 IMG_0488 IMG_0489 IMG_0491 IMG_0492 IMG_0495 IMG_0498 IMG_0500 IMG_0501 IMG_0507 IMG_0511 IMG_0513 IMG_0514 IMG_0516 IMG_0517

Finally – thanks for reading this and greetings from sunny Malta!

A Word About Freelance Websites

Freelance websites are cheap employers’ favorite places to hire cheap developers to build their big and shiny dreams at discount prices and low quality, and make these sites owners rich for making both sides happy and content.

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

Imageless Custom Checkboxes and Radio Buttons with CSS3: Revisited

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

I’ve always been interested in techniques for adding custom look and feel to form elements, and through the years I’ve offered a number of such solutions. In today’s post I will share my latest insight in check box and radio button styling, which is an improved version of another technique I’ve offered sometime ago, but this time with a fallback for non-CSS3 browsers and more elegant looks and code.

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

The CSS

As you can see, I am using the CSS3 :root element, which is ignored by non-CSS3 browsers, so they will display the normal check boxes and radios. The code listing below contains only official CSS properties, so maybe it’s a good idea to download the cross-browser solution from this link.

:root .css3-radios label,
:root .css3-radios input[type="radio"] + span,
:root .css3-radios input[type="radio"] + span::before,
:root .css3-checkboxes label,
:root .css3-checkboxes input[type="checkbox"] + span,
:root .css3-checkboxes input[type="checkbox"] + span::before
{
    display: inline-block;
    vertical-align: middle;
}

:root .css3-radios,
:root .css3-checkboxes
{
    position: relative;
}

:root .css3-radios label *,
:root .css3-checkboxes label *
{
    cursor: pointer;
}

:root .css3-radios input[type="radio"],
:root .css3-checkboxes input[type="checkbox"]
{
    opacity: 0;
    position: absolute;
}

:root .css3-radios input[type="radio"] + span,
:root .css3-checkboxes input[type="checkbox"] + span
{
    font: normal 11px/14px Arial, Sans-serif;
    color: #333;
}

:root .css3-radios label:hover span::before,
:root .css3-checkboxes label:hover span::before
{
    box-shadow: 0 0 2px #ccc;
}

:root .css3-radios label:hover span,
:root .css3-checkboxes label:hover span
{
    color: #000;
}

:root .css3-radios input[type="radio"] + span::before,
:root .css3-checkboxes input[type="checkbox"] + span::before
{
    content: "";
    width: 12px;
    height: 12px;
    margin: 0 4px 0 0;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
    border-radius: 100%;
    background: #f6f6f6;
    background: radial-gradient(#f6f6f6, #dfdfdf);
}

:root .css3-radios input[type="radio"]:checked + span::before,
:root .css3-checkboxes input[type="checkbox"]:checked + span::before
{
    color: #666;
}

:root .css3-radios input[type="radio"]:disabled + span,
:root .css3-checkboxes input[type="checkbox"]:disabled + span
{
    cursor: default;
    opacity: .4;
}

:root .css3-checkboxes input[type="checkbox"] + span::before
{
    border-radius: 2px;
}

:root .css3-radios input[type="radio"]:checked + span::before
{
    content: "\2022";
    font-size: 24px;
}

:root .css3-checkboxes input[type="checkbox"]:checked + span::before
{
    content: "\2714";
    font-size: 12px;
}

The Markup

Nothing fancy here, just a regular semantic form without any additional markup, supporting natively keyboard navigation and accessibility intact.

<!-- markup for custom radio buttons -->
<ul class="css3-radios">
    <li><label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label></li>
    <li><label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label></li>
    <li><label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label></li>
</ul>
<!-- / markup for custom radio buttons -->
<!-- markup for custom check boxes -->
<ul class="css3-checkboxes">
    <li><label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label></li>
    <li><label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label></li>
    <li><label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label></li>
</ul>
<!-- / markup for custom check boxes -->

What do you Think?

If you like the solution, you can try the demo or get it from this link. In case you are interested in other stuff I do, you can follow me on Twitter, visit my personal website or check my Web UI components.

Have a great weekend!

Related Posts

Funny, but True Facts About Novice Developers

The blog post for today is my ramblings about common mistakes that novice web-developers make during their first steps in programming.

Just for fun. They:

  • Use W3Schools as a primary source for programming knowledge and do not question a single line of code they find there. (“W3C is a mystery world which I should learn to comply to“).
  • Scorn unobtrusive JavaScript.
  • The first book on web-development they ever read is a mid-90’s apocryphal issue claiming that JavaScript is not a programming language. A claim they embrace and use as an excuse not to learn JavaScript.
  • Find it amazing to overuse animated gifs that poorly anti-alias with the background of the page.
  • Extensively use frames and iframes without any obvious reason or for positioning purposes.
  • Play with the DOCTYPE of the page (“What will happen if I use XHTML3.1 for my website?“) or simply dismiss it.
  • Add an XML prologue before the DOCTYPE just because they saw someone else doing it.
  • Rely heavily on the miracle of the absolute positioning, and in a month realize the gritty truth that their work looks different and in most cases unrecognizably broken on different screen resolutions.
  • Put a 25 megabytes of a lousy <bgsound />, that is blocking the entire website while being downloaded.
  • Don’t pay even the slightest attention to the word “cascading” in CSS.
  • Overload the website with tons of crappy ready-made JavaScript found over the Internet (title bar and status bar scrollers, marquees, etc).
  • Use JavaScript in order to achieve effects that are usually achievable with CSS.
  • Put a greeting message in a JavaScript alert(“”) on page load, which scares even them each time the page is loaded.
  • Wonder why their PHP code is not executed when the page is open from the local file system. Later they find that they can run their very own web-server.
  • Use 10+ different fonts (5 of which are totally exotic and only they and other 10 guys are the only persons in the world who have them installed) and a color-scheme that is causing nausea and nosebleed to visitors.
  • Don’t test with other browsers except their default one and are sincerely surprised that their new website looks crappy in Opera.
  • Use vendor proprietary JavaScript or CSS without providing solution for other browsers.
  • Use <br /> and &nbsp; for layout purposes.
  • Use inline styles.
  • Force certain style rules with !important instead of making use of the cascade in their styles.
  • Implement feedback forms without a server processing script and wonder why they don’t work. Do you remember action=”mailto:john@johndoe.com”?
  • Consider semantics, usability, accessibility and valid code useless stuff that they shouldn’t care of.
  • Use deprecated tags like <center />.
  • Start learning PHP or other server-side language before HTML.
  • Hard-code everything that should not be hard-coded.
  • Don’t care about encoding.

Do these facts sound familiar? Do you remember making at least 5 of these mistakes as a novice programmer?

New website for Acid.JS Web UI

I am happy to announce that the new website for the Acid.JS Web UI toolkit is already up and running with new design, improved accessibility, better user experience and loads of new and cool features.

Here are some of the highlights:

  • The Personal Bar at the top of each page allows you to:
    • Use Google to search Acid.JS.
    • Add pages to your very own bookmarks directly on the page that will be accessible when you return back to the site.
    • Add your very own notes in cool PostIt notes fashion which will be available after you return back to the site and will never expire unless you delete them.
  • New component purchase system for buying single components or component bundles via PayPal.
  • Improved user experience on component information pages with convenient tabs and direct access to the component demo, news, help page, purchase page, etc.
  • Tag cloud to see what is currently trending on Acid.JS.

The website is making heavy use of HTML5, CSS3, JavaScript, offline storage and client/server-side JSON and XML.

Below are a few screenshots from the new website, or you can just go and give it a try!