CSS For Fast Scroll – No Lags!

Pure CSS (no JavaScript!) tricks to allow you a faster, more reactive page.

Lags while scrolling native pages
are caused by an overly complex styles (usually “zero css” or “normalize css”)
overriding the proper definitions.

Continue reading

KBD (Keyboard Key) Style

Nothing fancy, background image that is stretched with some padding.
some CSS to avoid selecting/marking/drag&drop.

Continue reading

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

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

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>

Unix Snippet – Get File’s “Touch Date-Format” One-Liner

Pipelining the modification date from stat into an inline-date-phrase using the date --date="@... directive (using read to locate the pipeline’s output in the middle of the date-phrase),
And you’ve got yourself a nice little converter, which you can customise, to use *any* date-format,
I’ve using the Universal Time Coordinated standard.

file name:          my_file.txt
unix time-format:   1458036575     (Asia/Jerusalem)
touch time-format:  201603151009   (UTC)
stat --format=%Y "my_file.txt" | { read -r tmp_date; date --utc --date="@$tmp_date" "+%C%y%m%d%H%M"; }

*Ps.
You can easily use the touch-date-format with touch command using the following directive:
touch -t 201603151009 --time=mtime my_file.txt;
but make sure first you set the local-timezone to same timezone it was generated on.
TZ=UTC will help you do that,
TZ=UTC; touch -t 201603151009 --time=mtime my_file.txt; will apply it to the current line.
and you can also make sure of it is done right by using:
export TZ=UTC at the start of the script, and at the end of it just re-run
export TZ=Asia/Jerusalem (or whatever your TimeZone is) to come-back to your TimeZone,

Nice!

UMOJI – Unicode Emoji

UMOJI (= Unicode Emoji) is a nice little website at umoji.eladkarako.com gathering only the fun Unicode characters

Looking for all the fun Unicode characters is a waste of time,
being creative with text is a gr8 way to push some humor into your work and life (and code..)

started as a post named icompile.eladkarako.com/useful-char-map/

I’ve made a plain but useful website the allow quick COPY&&PASTE of most useful Unicode-Emojis (either low or high range) including some letters and math symbols too, because you never know when those stuff will be useful,
excluding most of the “letters based characters” (–that quote is not very reasonable..)

and also bidi control chars, and stuff that renders as empty square on fonts that are not “Courier New”

the entire page is “content-editable”, so you can use it as a makeshift Unicode-supported text-editor.
[You could easily add some text around and copy it (it’s just in your pc, it won’t effect the server version) this way you won’t need to look for an editor (if you’re on mac or linux..it’s kind’a helpful) that is Unicode-supported, set it and {copy char, switch window}:repeat X times.
just edit your stuff directly in the page]

mess/miss/mash? just reload the page.


December 2016 update:
New version available at https://eladkarako.github.io/umoji/ and as usual at http://umoji.eladkarako.com.

CSS3 Ninja – pointer-events attribute

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of thevisiblePainted value apply to SVG content.

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go “through” the element and target whatever is “underneath” that element instead.

Continue reading

Disabling Google-Translate Icon On Selected Text

Officially all you have to do is include HTML5 annotation on the containers that should not support the Google-Translate action: translate="no", but apparently if the user has installed the official extension (Firefox or Chrome), there will still be a floating button shown above the selected text,
icompile.eladkarako.com_google_translate_icon
the old-school class="notranslate" alternative won’t do much either.
icompile.eladkarako.com_google_translate_icon_dom_code

if you are a web-developer, you may try to catch the objects created, but a simpler solution will be just to hide the button (which includes two elements) that might break the page’s structure (especially if you’ve done some protection against text-copying or selecting the content).

just include the following style tag just before the </body>:

<style>*[id^="gtx-trans"],*[class^="gtx-trans"]{height:1px; width:1px !important; visibility:hidden !important; display:none !important; content:'' !important}</style>

if you think its too excessive, feel free to thin-it-down by keeping the display:none for both of the # and . rules. Leave the !important in, since the injected JavaScript is overriding adding a stylesheet that will override the rules, unless the !important annotation will be supplied..