UMOJI – Unicode Emoji

UMOJI (= Unicode Emoji) is a nice little website at 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

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’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 and as usual at

Another Take On Label-Design Pure CSS3 and HTML5 Markers

  position: relative;
  font-style: italic;
  margin-left: 2em;
  padding-left: 50px;
[data-role="note"]::before {
  content: attr(data-label)" "attr(data-icon);
  text-transform: capitalize;

  position: absolute;
  top: -0.2em;
  left: -1.5em;
  padding: 1px 5px;

  letter-spacing: 1px;
  transform: rotate(-8deg);

  border: 1px solid rgba(0,128,0,.8);
  border-radius: 4px;
  box-shadow: 1px  1px 3px rgba(0,0,0,.8)  ,
             -1px -1px 1px rgba(0,0,0,.4)  ;

[data-role="note"][data-color="green"]        { color: rgba(0,128,0,.9);      background: rgba(221,255,221,.8);   }
[data-role="note"][data-color="green"]::before{ color: rgba(255,255,255,.9);  background: rgba(0,128,0,.8);       }


<p data-role="note" data-color="green" data-icon="?" data-label="FIY">
 The <a href="#mime-type-portion">MIME type portion</a> of a <a href="#parsable-mime-type">parsable MIME type</a>
 excludes any and all <a href="#parameters">parameters</a>.

taking “icons” (Unicode supported characters) from :)

All MTK Modems + PDAnet, Samsung’s, Google’s Official – ADB USB Drivers


v3 (newer devices): —

v1 (older devices):


A collection of MTK-devices (mostly Chinese) and older compatible w/ Samsung, HTC, HTM vendors (x86 and x64).



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:


    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..

    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 */
    /* optional styling - very specific and easy to use */
    /* optional styling - for all "minimal text tags" */
        margin:4px 4px 4px 4px;
        padding:4px 4px 4px 4px;
        border:1px solid purple;

    here is a little fun with

  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.


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

    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%”).

    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:

      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..