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

Segoe-UI For The Web From Skype

Install Skype,
once done look for Skype.msi around your PC. Either %TEMP% or %ProgramData%\Skype\{ ...a long string of characters... } would be most likely to have it, download 7-Zip and open Skype.msi,
look for Product.cab (open it) and login.cab (open it too),
select all of the content, drag&drop it to your desktop.

Sometimes you’ll find the login.cab‘s content has already extracted to %UserProfile%\AppData\Local\Skype\Apps\login\ or %LocalAppData%\Skype\Apps\login\, it is usually happens after you first login to your account, as a cache (but the MSI-extraction method above is better..)

The fonts and css folders is what your want, you can use it for testing and private stuff on your PC. For the web you should probably buy a server-licence from M$…

Here are some screenshots:


Edit:This trick will work for old installation of Skype,
version 74.85.102 from April 2015 will do just fine,
you’ll probably won’t be able to extract the login.cab,
or have a login folder in newer versions.
Try using FileHippo.

also available here: gist.github.com/eladkarako/93b8ca176eb150bd7408f107e9f2d59e.

cURL – Latest Chromium Downloader

echo off
::stuff you can modify.
::--------------------------------------------------------------------------------
::                          http|https
set PROTOCOL=http
::                          snapshots|continuous
set BRANCH=snapshots
::                          Android|Arm|Linux|LinuxGit|LinuxGit_x64|Linux_ARM_Cross-Compile|Linux_ChromiumOS|Linux_ChromiumOS_Full|Linux_x64|Mac|MacGit|Win|WinGit|Win_x64|chromium-full-linux-chromeos
set OS=Win_x64
::                          mini_installer.exe|REVISIONS|chrome-win32-syms.zip|chrome-win32.zip|pnacl.zip|content-shell.zip|gcapi.zip|metrics-metadata.zip|remoting-host.msi|remoting-me2me-host-win.zip|devtools_frontend.zip|chrome-linux.zip|changelog.xml|chrome-android.zip
set FILE=mini_installer.exe
::--------------------------------------------------------------------------------


::stuff you should keep as is.
::--------------------------------------------------------------------------------
set URL_LASTCHANGE=%PROTOCOL%://storage.googleapis.com/chromium-browser-%BRANCH%/%OS%/LAST_CHANGE

set COMMAND_CURL_FORVERSION=curl.exe --silent --http2 --ipv4 --anyauth --insecure --location-trusted --ssl-allow-beast --ssl-no-revoke --url "%URL_LASTCHANGE%"

set VERSION=
for /f "tokens=*" %%a in ('call %COMMAND_CURL_FORVERSION% 2^>^&1') do (set VERSION=%%a)
::error handling
if ["%VERSION%"] == [""] ( goto NOVERSION )
set URL_DOWNLOAD=%PROTOCOL%://storage.googleapis.com/chromium-browser-%BRANCH%/%OS%/%VERSION%/%FILE%

echo.
echo Got Latest-Version: ^>%VERSION%^< ^[Branch:%BRANCH%/OS:%OS%^]
::--------------------------------------------------------------------------------


::you should enable one-of-your-prefered downloaders.
::goto DOWNLOAD_CURL
::goto DOWNLOAD_WGET
::goto DOWNLOAD_ORBITDOWNLOADER
goto DOWNLOAD_ARIA2C



::you should not reach here, unless
::you've forgot to enable one of the "downloader lines" (above)...
goto NODOWNLOADER


::--------------------------------------------------------------------------------
:NOVERSION
  echo ERROR: could not get the latest version...
  goto EXIT

:NODOWNLOADER
  echo ERROR: please enable one of the downloader lines..
  goto EXIT


:DOWNLOAD_CURL
  echo Start Download using cURL...
  call curl.exe --verbose --http2 --ipv4 --ignore-content-length ^
                --anyauth --insecure --location-trusted          ^
                --ssl-allow-beast --ssl-no-revoke --tcp-fastopen ^
                --tcp-nodelay --use-ascii --url "%URL_DOWNLOAD%"
  goto EXIT


:DOWNLOAD_WGET
  echo Start Download using wGET...
  call wget.exe --directory-prefix="." --debug --user-agent="Mozilla/5.0 Chrome" --continue ^
                --server-response --no-check-certificate --secure-protocol=auto  "%URL_DOWNLOAD%"
  goto EXIT


:DOWNLOAD_ARIA2C
  echo Start Download using Aria2C...
  call aria2c.exe --allow-overwrite=true         --auto-file-renaming=false         --check-certificate=false        ^
                  --check-integrity=false        --connect-timeout=120              --console-log-level=notice       ^
                  --continue=true                --dir="."                          --disable-ipv6=true              ^
                  --enable-http-keep-alive=true  --enable-http-pipelining=true      --file-allocation=prealloc       ^
                  --http-auth-challenge=false    --human-readable=true              --max-concurrent-downloads=16    ^
                  --max-connection-per-server=16 --max-tries=3                      --min-split-size=1M              ^
                  --retry-wait=1                 --rpc-secure=false                 --split=8                        ^
                  --timeout=120                  --user-agent="Mozilla/5.0 Chrome"  "%URL_DOWNLOAD%"
  goto EXIT


:DOWNLOAD_ORBITDOWNLOADER
  echo Start Download using OrbitDownloader...
  call "C:\Program Files (x86)\Orbitdownloader\orbitdm.exe" "%URL_DOWNLOAD%"
  goto EXIT


:EXIT  
  echo.
  echo Done.
  pause


::--------------------------------------------------------------------------------------------
::--------------------------------------------------------------------------------------------
::
::   - "http"           - http protocol is faster to connect and download with OrbitDownloader and wGet, it also means your PC won't preform certificate exchange with the remote machine.
::   - "snapshots"      - snapshots is newer, "continuous" is more stable (but might be very old).
::   - "OS" and "FILE"  - are what you want to download
::
::
:: snapshots    - newest (unstable) newest code-changes - passed unit-tests + compilation.
:: continuous   - old    (stable)                       - passed unit-tests + compilation + test-suits.
:: ------------------------------------------------------------------------------------------------------
::   branch   |  branch description           |  version-based build
:: ___________|_______________________________|_____________________________________________________________________________________________
::   Win_x64  |  Chromium Installer (64-bit)  |  storage.googleapis.com/chromium-browser-continuous/Win_x64/{version}/mini_installer.exe  
::   Win_x64  |  Chromium Package (64-bit)    |  storage.googleapis.com/chromium-browser-continuous/Win_x64/{version}/chrome-win32.zip    
::   Win      |  Chromium Installer (32-bit)  |  storage.googleapis.com/chromium-browser-continuous/Win/{version}/mini_installer.exe
::   Win      |  Chromium Package (64-bit)    |  storage.googleapis.com/chromium-browser-continuous/Win/{version}/chrome-win32.zip    
::
::
::------------------------------------------------------
::- SCRIPT WAS WRITTEN AND MAINTAINED BY ELAD KARAKO.  -
::- LAST UPDATED: JULY, 2017. FREE TO USE UNDER GNU.   -
::------------------------------------------------------

Download tools..

HTML5 Canvas Clear

function canvas_clear(canvas){      //clear canvas' path and content, reset tranform. return reference to same object.
  var context = canvas.getContext("2d");
  context.beginPath();
  context.setTransform(1, 0, 0, 1, 0, 0);
  context.clearRect(0, 0, canvas.width, canvas.height);
//canvas.width = canvas.width; //don't use!
  return canvas;
};

function canvas_clear_deep(canvas){       //clear canvas' path and content, reset tranform (as before).
  var tmp = canvas.cloneNode(true);       //  + NEW: unhook event-handlers (optional: attribute-events too)
                                          //  + update DOM with fresh-canvas.
                                          //  + clear unused memory.
                                          //  + return reference to fresh-canvas.

  /* //optionally enable this part to also remove inline(attribute)-events.
  NamedNodeMap.prototype.forEach = Array.prototype.forEach;     //optionally unhook inline(""attribute"")-event
  tmp.attributes.forEach(function(attribute){
                           if(false === /^on/i.test(attribute.nodeName)) return;
                           tmp.removeAttribute(attribute.nodeName);
                         });
  */

  tmp = canvas_clear(tmp);
  if(null !== canvas.parentElement){  //replace with fresh-canvas
    canvas.parentElement.replaceChild(tmp, canvas);
  }

  //cleanup
  canvas = canvas_clear(canvas);
  canvas = undefined;

  return tmp;
};

HTMLCanvasElement.prototype.clear      = function(){ return canvas_clear(this);      };
HTMLCanvasElement.prototype.clear_deep = function(){ return canvas_clear_deep(this); };

Also available on this gist: https://gist.github.com/eladkarako/a005225594ade65347e2f5ad4c55d131

And just use canvas.clear() or canvas.clear_deep() :]

Enjoy!

APKMirror.com Search

https://www.apkmirror.com/?post_type=app_release&searchtype=apk&s=YOUR_SEARCH_TERM

for example:
https://www.apkmirror.com/?post_type=app_release&searchtype=apk&s=whatsapp
or
https://www.apkmirror.com/?post_type=app_release&searchtype=apk&s=youtube
or
https://www.apkmirror.com/?post_type=app_release&searchtype=apk&s=swiftkey


naturally it would have been better if the website owners were embedding
the following script schema:

<script type="application/ld+json">
{
  "@context":           "http://schema.org"
, "@type":              "WebSite"
, "url":                "https://www.apkmirror.com/"
, "name":               "APKMirror - Free APK Downloads"
, "alternateName":      "Download Free Android APKs #APKPLZ"
, "logo":               "https://www.apkmirror.com/wp-content/themes/APKMirror/images/apple-touch-icon-180x180.png"
, "potentialAction": {  "@type": "SearchAction"
                     ,  "target": "https://www.apkmirror.com/?post_type=app_release&searchtype=apk&s={search_term_string}"
                     ,  "query-input": "required name=search_term_string"
                     }
}
</script>

why it is important to a website to have this “thing” in the main index-page?
1. Desktop browsers (Chrome) will add the website with embedded search into the address-bar,
for example, I have (similar) application/ld+json in icompile.eladkarako.com,
which means I could start typing the URL following by SPACE and get a built-in search from within the browser:

2. it will work pretty well with mobile-browsers as well, saving typing and browsing-time to the website-visitor (which is a good thing).

3. it works well with Google search and other spiders, which will build-up a more efficient index/map of the website.

4. it is pretty much “the standard” (or at least a “best practice”) when designing a friendly, browse’able website.


once you’ve visited a website that has the application/ld+json code inside,
it should add it automatically to your website,
but you may also access that section, quite easily for manual editing:


Here are few more links :)
https://developers.google.com/search/docs/data-types/sitelinks-searchbox
https://schema.org/SearchAction
https://github.com/archon810/apkmirror-public/issues/18#issue-231810436

Block Sockets? Ask Me How!

This Little Chrome Extension: https://github.com/eladkarako/Chrome-Extension-Socket-Killer
Acts As A Socket-Firewall, Blocking WebSocket Connections, Even Before Connecting!
As A Bonus, It Also Null’ifies The WebSocket Object-Constructor :]

Blocking websockets, prevents the next-gen. ads from infiltrating your- presumingly ads-protected, browser.

It will also improve your Ad-Blocking extensions, catching most ads, blocking more connections, etc..

Enjoy.

CSS Snippet – The Magical Rotated Logo

Wish to place a logo that will be rotated 360-degrees back-and-forth gently on mouse-hover?

Here is your example.
right click it and select view frame’s-source to see the code behind it.

Using transition to transform the logo to rotate 360 degrees, is lovely,
but it is a one way animation-
– If you wish to keep on the movement as long the mouse-is-hovered upon the logo,
using keyframe-animation is the way to go.

right click it and select view frame’s-source to see the code behind it.

This would probably render an even higher-quality result,
since keyframe-animation uses, unambiguously, the GPU to render frames smoothly,
You can prefer the use of keyframe-animation in-favor of transition, or at-least use it in the same way, by specifying that the animation should repeat only one time.

Weirdly the ease-in-out effect, when a user no-longer hover the logo, and the animation is then rendered backward, back to the zero-position, seems to only work when using simple transition :/

Nevermind.. :]

Nice Scrollbars

Those bulky scrollbars with the useless ‘arrows’
are mostly the cause of large-font in compare to a low(er) screen-resolution.

The up/down arrows are mostly useless now-days anyway,
since it requires pin-point accuracy with the mouse,
which in most cases is not essential-
– and it is far more fun to just drag away the middle-thingy anyhow..

If you’re a page designer, HTML5 developer,
consider this minimal set of CSS3 rules to make your end result look far better:
The scrollbar will have constant dimensions, and will allow more efficient scrolling.

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

CSS3 Ninja – Pure CSS-KeyFrame Animation Example

An infinite, alternate animation converting a shape, with initial delay,
no javascript, pure css.

– centring the shape using the top0-left0-right0-bottom0-margin_auto trick.
– sizing the share using viewport

vw: 1/100th viewport width
vh: 1/100th viewport height
vmin: 1/100th of the smallest side
vmax: 1/100th of the largest side

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;
}

CSS3 – Let Your Users Know They Can Use [CTRL]+[A] To Select The Code In PRE and CODE elements

PRE, CODE and essentially every element having the contentEditable=”true” attribute is made 100% well.. editable,
which is very useful if you want to have “textarea like” qualities such as pressing [CTRL]+[A] to select all of the code in those elements (mostly for copy&paste).

But, since this is not the default behaviour, there is a need to inform your users of the UI quality, usually in this case you can use the title attribute (but it requires setting text for each element), in this case a CSS only solution, either TEXT or an IMAGE will work wonderfully with our requirements.

icompile-eladkarako-com_inform_your_users_of_ctrl_a_option_in_contenteditable_true_containers-png
Continue reading

HTML5 Ninja – Centring Container In The Middle Of ViewPort With CSS3 Only, No JavaScript

<!doctype html>
<html dir="ltr" lang="en-US">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta http-equiv="Content-Type"    content="text/html;charset=UTF-8"/>
  <meta name="viewport"              content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  <style type="text/css" media="all">
    html{ 
      background: none lightblue;
    }

    html,body,[container]{ padding:0; margin:0; }

    [container]{
      width:      calc(80vmax);
      height:     calc(50vmin);
      left:       calc(50% - (80vmax / 2));
      top:        calc(50% - (50vmin / 2));
      position:   absolute;
      background: none gray;
    }
  </style>
</head>
<body><div container></div>
</body>
</html>

demo (it is an IFRAME, you can click it to open in new tab, and inspect the code ;] )


this one is a bit of a hack, and relay on margin-CSS attribute as a self-calculating way,
simpler, and more compatible when vmin and vmax are not usable,
but it relays on implementation by the browser that might be changing some time from now..

<!doctype html>
<html dir="ltr" lang="en-US">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta http-equiv="Content-Type"    content="text/html;charset=UTF-8"/>
  <meta name="viewport"              content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  <style type="text/css" media="all">
    html{ 
      background: none lightblue;
    }
  </style>
</head>
<body>
<div style="
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: yellow;">hello :)
</div>
</body>
</html>

demo:


although the methods above works quite well,
you might want to use the following X/Y centering using transform,
combined with position absolute and left/top at 50%, this method is used by the Google-map team at our offices,
and although not required (in my opinion a bit ugly too) it is surly “worth knowing”..

<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" dir="ltr" lang="en-US" language="English" charset="UTF-8" encoding="UTF-8">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta charset="UTF-8"/>
  <meta http-equiv="Content-Type"    content="text/html;charset=UTF-8"/>
  <meta name="fragment"              content="!"/>
  <meta name="viewport"              content="height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,minimal-ui"/>
  <style type="text/css" media="all">
    /*<![CDATA[*/
    @charset "UTF-8";
    @namespace "http://www.w3.org/1999/xhtml";
    html,body{
      height:                             100%;
      width:                              100%;
      padding:                               0;
      margin:                                0;
      box-sizing:                   border-box;
      text-size-adjust:                   100%;
      font: 60pt monospace;
    }
    body{
      white-space:                     initial;
      word-break:                    break-all;
    }
    body{
      background:               none lightblue; 
    }
    [center]{
      position:  absolute;
      left:      50%;
      top:       50%;
      transform: translateX(-50%) translateY(-50%);
    }
    /*]]>*/
  </style>
</head>
<body><div center>hi</div></body>
</html>

JavaScript Ninja – Passive-Event Detector

You’ve probably know this one,
a variation of it is at the Mozilla-docs for addEventListener and Modernizer too.

It uses Object.defineProperty and a accessor descriptor with a getter. Older browsers may give you an error for using Object.defineProperty.

In those examples I am an event-listener with an
explicit assignment to "touchend",
instead of “foo” or “test” which might also work fine.

Since passive-event was specifically designed for
pointer/touch events, it is in our best interest to
test any browser implementation, even ones that might
choose to provide passive-functionality to just the
pointer/touch events.

It is not too pricey to use “real event”, since it is released right-away,
assigned to a plain-event handler and "touchend" itself is
executed at the end of the touch events-queue.

//VARIATION #1 - will work fine for "newer browsers".
self.is_support_passive = (function(){ "use strict";
  var is_support_passive = false
     ,descriptor         = {}
     ,opts               = {}
     ;

  function getter(){
    is_support_passive = true;
    return true;
  }

  descriptor.enumerable   = true;
  descriptor.configurable = true;
  descriptor.get          = getter;
  descriptor.set          = undefined;

  Object.defineProperty(opts, "passive", descriptor);

  window.addEventListener("touchend", null, opts);

  return is_support_passive;
}());

console.log(
  self.is_support_passive
);

/*
Above code will fail on some old browsers with error/exception of
"Object.defineProperty is not a function"
using __defineGetter__ is an alternative (see support_passive_event_handler_options_old_browser_getter_support.js)
but since the lack of Object.defineProperty is a pointer to viewer using an old browser,
you can also 99%-safely say you don't have any passive-event support.

Also - some Firefox versions will fail-silently when using null as an event-handler,
so the next variation will use an actual (but simple) event-handler.
*/

A more compatible example,
it is not assigning null but an actual event-handler,
(which will make some versions of SpiderMonkey (Firefox) on OSX, report false “no support”),
also it avoids Object.defineProperty in favor of an older feature called __defineGetter__, it is pretty much just to avoid “testing” another feature.

//VARIATION #2 - will support "older/basic headless-browsers".
self.is_support_passive = (function(){ "use strict";
  var is_support_passive = false
     ,opts               = {}
     ;

  function getter(){
    is_support_passive = true;
    return true;
  }

  function event_handler(ev){
    return true;
  }

  Object.prototype.__defineGetter__.call(opts, "passive", getter);

  window.addEventListener("touchend",    event_handler, opts);
  window.removeEventListener("touchend", event_handler, opts);

  return is_support_passive;
}());

console.log(
  self.is_support_passive
);

Final example takes into account that you might want
to check for support on even older platforms,
so a try/catch block will preserve the existing (initial) value false,
silently gulp-up any error/exceptions.

//VARIATION #3 - will support all low-end browsers.
self.is_support_passive = (function(){ "use strict";
  var is_support_passive = false
     ,opts               = {}
     ;

  function getter(){
    is_support_passive = true;
    return true;
  }

  function event_handler(ev){
    return true;
  }

  try{
  Object.prototype.__defineGetter__.call(opts, "passive", getter);
  window.addEventListener("touchend",    event_handler, opts);
  window.removeEventListener("touchend", event_handler, opts);
  }catch(err){}

  return is_support_passive;
}());

console.log(
  self.is_support_passive
);

Third example is also available here:
https://github.com/Modernizr/Modernizr/issues/1894#issuecomment-331563798.

Efficient JSON-Table Data Representation

First NameLast NamePoints
JillSmith50
EveJackson94
JohnDoe80
AdamJohnson67
JackLeay

<table id="example_table_for_efficient_json_table_representation">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
    </tr>
    <tr>
      <td>Jack</td>
      <td>Leay</td>
      <td></td>
    </tr>
  </tbody>
</table>

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
John	Doe	80
Adam	Johnson	67
Jack	Leay	[missing?]

{
    headers: [   "First Name",  "Last Name", "Points"]
  , table:   [   "Jill",        "Smith",           50
               , "Eve",         "Jackson,          94
               , "John",        "Doe",             80
               , "Adam",        "Johnson",         67
               , "Jack",        "Leay",            null  ]
}

access the “row/col” by modulo the length of headers (requires post processing)

instead of classic wasteful JSON representation (no post processing required) of

[
  { "First Name":....
   ,"Last Name":...
   ,"Points":...
  }
 ,{ "First Name":....
  .....
  }
 ,...
]

considering the fact there is little to do with JSON without.. doing something with the data, if you’re going to process the data anyway, you might add a little/minimal o(n/k) operation to “expand the data”…

extracting the data from a table is quite easy (assuming specific classic XHTML format for code clarity, naturally infinite complexity can be introduced to support formats variations…)


(function(table){
  "use strict";

  var
      headers = Array.prototype.map.call(table.querySelector('thead').querySelectorAll('th'), function(item){
                  return item.innerText
                });

  console.log(
    headers
  );

}(
  document.querySelector('#example_table_for_efficient_json_table_representation')
));

(will render ["First Name", "Last Name", "Points"])


extracting the table’s body is quite similar:


(function(table){
  "use strict";

  NodeList.prototype.map = Array.prototype.map;

  var
      headers = table.querySelector('thead').querySelectorAll('th').map(function(item){
                  return item.innerText
                })

    , body    = table.querySelector('tbody').querySelectorAll('tr').map(function(item){
                  /*just a row as string: "Jill	Smith	50" */
                  //return item.innerText;  

                  /*row CORRECT representation (but a bit overly complex) as array of arrays: [ ["Jill","Smith","50"],["Eve","Ja...],...] */
                  return item.querySelectorAll('td').map(function(item){
                           return item.innerText
                         });
                })
    ;

  console.log(
    headers
  , body
  );

}(
  document.querySelector('#example_table_for_efficient_json_table_representation')
));

this will render the following result:
icompile.eladkarako.com__efficient-json-table-data-representation__table_extract_2


in-order to flatten the array-of-array structure *efficiently*, will use a bit of JavaScript “join magic” and some Discrete mathematics (formal language theory) trick – by using a phrase that is not in our “ABC” language we can join – and later split without any data-compromise!

(function(table){
  "use strict";

  NodeList.prototype.map = Array.prototype.map;

  var
      SAP = "||I_WILL_NEVER_BE_AN_ACTUAL_VALUE_IN_TABLE||"

    , headers = table.querySelector('thead').querySelectorAll('th').map(function(item){
                  return item.innerText
                })

    , body    = table.querySelector('tbody').querySelectorAll('tr').map(function(item){
                  /*just a row as string: "Jill	Smith	50" */
                  //return item.innerText;  

                  /*row CORRECT representation (but a bit overly complex) as array of arrays: [ ["Jill","Smith","50"],["Eve","Ja...],...] */
                  return item.querySelectorAll('td').map(function(item){
                           return item.innerText
                         }).join(SAP)
                })
    ;

  console.log(
    headers
  , body
  );

}(
  document.querySelector('#example_table_for_efficient_json_table_representation')
));

icompile.eladkarako.com__efficient-json-table-data-representation__table_extract_3


easy enough, using join with the same phrase on last array structure, following by split will result a one-level array, in which the values can be accessed by index % headers.length

(function(table){
  "use strict";

  NodeList.prototype.map = Array.prototype.map;

  var
      SAP = "||I_WILL_NEVER_BE_AN_ACTUAL_VALUE_IN_TABLE||"

    , headers = table.querySelector('thead').querySelectorAll('th').map(function(item){
                  return item.innerText
                })

    , body    = table.querySelector('tbody').querySelectorAll('tr').map(function(item){
                  /*just a row as string: "Jill	Smith	50" */
                  //return item.innerText;  

                  /*row CORRECT representation (but a bit overly complex) as array of arrays: [ ["Jill","Smith","50"],["Eve","Ja...],...] */
                  return item.querySelectorAll('td').map(function(item){
                           return item.innerText
                         }).join(SAP)
                }).join(SAP).split(SAP)
    ;

  console.log(
    headers
  , body
  );

}(
  document.querySelector('#example_table_for_efficient_json_table_representation')
));

result…

["Jill", "Smith", "50", "Eve", "Jackson", "94", "John", "Doe", "80", "Adam", "Johnson", "67", "Jack", "Leay", ""]

cleaning up the code, trimming and using a *less ridiculous* SAP:

(function(table){
  "use strict";

  NodeList.prototype.map = Array.prototype.map;

  var  SAP = "||||"
     , headers = table.querySelector('thead').querySelectorAll('th').map(function(item){ return item.innerText })
     , body    = table.querySelector('tbody').querySelectorAll('tr').map(function(item){ return item.querySelectorAll('td').map(function(item){ return item.innerText }).join(SAP) }).join(SAP).split(SAP)
    ;

  return {  "headers": headers
          , "table": body        }
}(
  document.querySelector('#example_table_for_efficient_json_table_representation')
));

will render a nice little result JSON,
just remember how to read it (yes! modulus! BECAUSE MATH IS FUN!! *sign* geeks-of-the-world–unite!)

icompile.eladkarako.com__efficient-json-table-data-representation__table_extract_4


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!

CSS Ninja Techniques – Download Links Icon In Pure CSS

    Use advance CSS rules to give your users a little more information about links, that has the download attribute, this is similar to a previous article I’ve wrote, on how mark page’s external-links, similar to how its done in Wikipedia’s pages, using CSS3’s ::after pseudo-element.

    icompile.eladkarako.com__css_ninja_techniques___download_links_icon_in_pure_css

    first thing is downloading nice “download icon”,
    I’ve used the second download icon from the Font-Awesome package,

    icompile.eladkarako.com__css_ninja_techniques___download_links_icon_in_pure_css__original_icon_aka_download63
    here is just the png from the package above

    edit it (I’ve used Paint.Net), remove the white background, resize it to about 12px/12px, make it transparent so the background-colors of the page will blend with the image, making it less sharp and more “theme suitable”.. I’ve tuned it down to about 180 of 255 transparency (255 is the “100%”).

    icompile.eladkarako.com__css_ninja_techniques___download_links_icon_in_pure_css__modified_icon
    and here is the just the modified image

    convert it to base64 and add the mime-type prefix,
    following with inserting it to your main style css file, using the following rule:

    a[download]:before{
      content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAMCAYAAAC5tzfZAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAA6ElEQVQoU7VSwQqCQBBVcNVNXRVJQUEPCvoLRR/SB0T9QNfIEDp1da4e/NHeWsRS1q0Hj5mdN4/ZcdXeURTFQgjRuq5Lvu93VVU5T+k76roWnPMbUrIs65bnuXgoP/B/UxzHazT1pmmSruuE0hTlWdajKNo8OhWkacohHpBOBpWMsUMYhhz5J5qmYbZt75D2oDT0MOyyLGNS/4rnxD1SadjPTsDSHcLrKjifyrJM8UYrcIm9jqruOM5Vk4uqRUnUWjzw1jCM04xGsyaVmEzDMBC+Ho3jOEXN87yz/GV+MUkSQt8UgyC43AH4oj71EqujyQAAAABJRU5ErkJggg==") center right no-repeat;
      margin: 0 6px 0 0;
    }
    

    a good practice will be to limit the effect of the CSS-rule to a specific part of the page,
    for example, for my WordPress, I’ve set the selector to:

    .content .posts a[download]:before{
    

    so only the to the content at the main container will be effected..

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