CSS For Speed

include those to override some of the browser’s default definitions,
it should be placed in the few first CSS file to load, but after the “reset CSS” (if you use any),
and before any of the websites’ main style.

Continue reading

HTML Snippet – 100% Fill Textarea-Page

The base of numerous of custom HTML-components
and functional pages is a “textarea page” which consist of
a (surprise surprise..) <textarea> element
and some sort of functionality integrated by a form-submit, JavaScript,
or a mix of both.

Continue reading

Schema.org For Your WebSite

This will provide built-in search integration within Chrome and other modern browsers,
and help your website to be crawled by Google’s crazy-inconsistent web-crawler(s).

By Example:

JavaScript – Dynamic Resources Loading-Error Handling

Some time ago I’ve wrote the article HTML5 Image Loading Error Handling, although quite simple solution, foucsing on self-contained, more simple solution using an inline event-handling to hide images with specific width/height set, to avoid dirtying up the UI with “empty squares”.

I’ve recently embedded a YouTube video (which uses an iframe), I’ve noticed that for some reason it wasn’t shown on mobile devices, although it should show the “poster”-of the video the very least, nothing was shown but an empty frame,

So I’ve thought I could reuse the previous solution for iframe-elements too,
and to make it easier to use I’ll make it dynamic,
– but will KEEP using an inline-event-handlers instead of settings various handlers to the DOM/node representative of the element.

Continue reading

HTML5 Ninja – CSS3 To Make Your Website Behave and Render Faster, Including A More Responsive Scrolling

html,body{
  /* makes some presentations attribute to properly be inherited by page's elements */
  width:                    100%;
  height:                   100%;
  text-size-adjust:         100%;
  box-sizing:               border-box;

  /* set rendering-engine to avoid picture-perfect in favor of speedy/very responsive page */
  text-rendering:           optimizeSpeed;
  -webkit-font-smoothing:   none;

  /* ditch some special-rules in font-faces, allowing the rendering-engine simpler processing of text for view. */
  font-kerning:             none;
  font-feature-settings:    "kern" 0;
}

HTML5 Ninja Techniques – Minimal HTML Markup Needed For Text

icompile.eladkarako.com_use_minimal_textSo we want to add some text, and style it,
but wrapping with span requires too much text adding: opening and closing tags + class="..." or HTML5’s data-*, this all so we can later “find” the node using CSS-Rules or JavaScript and style the hell-out of it :)


The idea is later to find the item, using CSS or JavaScript, in a very efficient way,
as fast as I know, I’m the first one ever implemented using this technique.. and in production (isn’t it the idea of every product eventually..?).

.. you have to think out of the box for this crazy trick to be seen reasonable to you.. (and there goes the 4’th wall..).

  1. you want a self-closing tag but one that will show you some text..
    # first attempt: <img alt=hello/>
    skipping the \" is permitted !!

    this works since the src is not specified, so the ALT kicks-in..
    but you’ll get the native border around which you should disable using border=0 attribute..
    but its MORE TEXT, so no-go

  2. that pesky border (CSS border is a different one) is there because we use W3C’s official ALT attribute, but we can do better,
    joining some CSS’s content and attr() and putting the text in one of the attributes.

    the HTML is:

    <img x=hello>

    and the CSS is:

    img{
      content:attr(x);
      font-size:30pt;
      color:darkblue;
      border:none;
    }

    but it won’t work, since the img tag’s text-content does not mean anything (unlike other tags, the img tag is actually just like rendering stuff with JavaScript new Image())

    lets change to something quite different either the :before or :after “area”, which technically uses same, still minimal self-closing tag of img, but just as a placeholder.

    ooopss… apparently you can only see the img :before if you’ll still place an ALT=".." non-empty attribute,

    hmmm.. so its not optimal since we’ve already adding quite a lot of text, and it is becoming a bit more complex than necessary.

  3. we can do better, using CSS we can cheat and use content="..." and attr()

    which is technically not in the HTML markup, and CSS are far more optimized than HTML, also, loaded parallel and optionally CPU-accelerated. so we’re good here..

    icompile.eladkarako.com_i_lv_minimal
    this was the result (works really well..)
    first is the html markup: <t x=hello> now the CSS markup which you can include in a separate CSS file

    /* minimal */
    t[x]:before{
        content:attr(x);
    }
    
    /* optional styling - very specific and easy to use */
    t[x=hello]:before{
      font-size:30pt;
    }
    
    /* optional styling - for all "minimal text tags" */
    t[x]:before{
        margin:4px 4px 4px 4px;
        padding:4px 4px 4px 4px;
        color:darkblue;
        background-color:lightgray;
        border:1px solid purple;
    }
    

    here is a little fun with http://jsfiddle.net/nra1jwjo/

  4. Fun!

New Dynamic HTML5 IFrame-Attributes With Backward Compatibility

http://www.w3.org/TR/html-markup/iframe.html

Old + HTML5 attributes.


Setting <IFRAME> attributes programmatically.






demo:






2014-09-26_012046