Miscelaneous

Moved to a New Domain

On October 10, 2014 I’ve moved my blog to a new domain – http://martinivanov.net, so make sure you update your favorites. The RSS feed, however, stays the same: http://feeds.feedburner.com/acidmartin.

Advertisements

Syntax Highlighter HTML5 Web Component Based on Lea Verou’s Prism.JS

AcidJs.XHilite is a syntax highlighter HTML5 Web Component, based on Lea Verou‘s Prism.JS and wrapped as a custom tag with support for multiple languages and both declarative and async loading of the code to be highlighted.

Usage:

<acidjs-xhilite language="javascript" height="200" width="400">
function sayHi() {
    return "Hello, World"!;
}

sayHi.call(this);
</acidjs-xhilite>

Recently I my HTML5, CSS3 and JavaScript Experiments website received a major facelift and as a next step and I am planning to replace the syntax highlighter I am currently using with AcidJs.XHilite.

HTML Attributes of the Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

  • language – The language to highlight, for example language="javascript". Default: "markup" (usable with HTML, SVG, XML, etc.). Check prismjs.com for a complete list of supported languages.
  • width – Optional width in pixels of the code block, for example: width="600".
  • height – Optional height in pixels of the code block, for example: height="200".
  • src – Instead of adding the code to highlight in the tag, you can specify path to the file which content needs to be highlighted, for example: src="example.js"

JavaScript Methods of the Tag

Native JavaScript methods (document.getElementById, document.querySelector, etc. as well as their jQuery or other libraries aliases).

Check the screenshots below or go straight to the demo and download:

x-hilite-markup

x-hilite-javascript

x-hilite-svg

x-hilite-css

x-hilite-php

x-hilite-svg

x-hilite-java

x-hilite-csharp

Check the demo on this page. You will also find a download link there. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

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.

Hiding Emails from Spam Bots: The CSS3 Way

Hiding emails from spam bots can be really painful, but fortunately there are a lot of cool solutions out there. Here’s how you can do this with the CSS3 generated content and reversed text direction.

Let’s say that email you want to obfuscate is info@company.com. The first thing you need to do it to reverse it, so it looks like this: moc.ynapmoc@ofni. For instance, you can do this online here. The rest is CSS:

  • In your style sheets, create a new .contact rule.
  • Add the reversed string as value of the content property of your .contact rule.
  • Set the direction of the text as right to left via direction and unicode-bidi.
  • Use the .contact element in your markup.

The CSS

.contact::before
{
    content: "moc.ynapmoc@ofni";
    direction: rtl;
    unicode-bidi: bidi-override;
    text-decoration: underline;
    color: #00f;
}

The Markup

<p>To contact us, send an email
to <span class="contact"></span>.</p>

… And everything will look just right when you view it in the browser:

email

The drawback of this approach is that CSS3 generated content cannot be selected and copied, which is a usability issue, but this is just an idea and there are many other solutions worth trying.

One small consideration, regarding the syntax of generated content. Older browsers do not recognize the ::before or ::after double column syntax, so you may want to consider using :before / :after. Since this is just syntactical enhancement to distinguish pseudo elements (hover, active, etc) from generated content (before, after), introduced in CSS3, newer browsers understand both syntaxes, so  you can use the “old” syntax without concern.

Related Posts and Links

Checking if String is a Palindrome with JavaScript

A palindrome is a word, phrase, number, or other sequence of symbols or elements, whose meaning may be interpreted the same way in either forward or reverse direction. It is not uncommon to be asked to write a JavaScript function that checks if a string is a palindrome on front-end developer position interview.

Here’s one possible solution, utilizing a few JavaScript array methods (split(), reverse() and join()). Of course, if you don’t want to get that sophisticated, a simple one-line solution can be easily extracted from the class.

Merry Christmas! Find more front-end experiments and insight here.

Related Posts and Links

Donation Request

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

I started my blog back in 2006 and later, in 2012 the experiments website as places where I could share my experience and insight in front-end development in my spare time, and ever since I’ve been getting thousands of visitors each month. Recently, however, my work load increased, and respectively, I am getting less and less time to maintain them. In order to continue, I’d like to ask for your donations. I’ve never done this before, neither I am sure it would work, and although I hate asking for that, this is the only way to keep them up and running.

Please, participate if you are happy with what you found here to make a donation.

paypal-donate-button

How to Create an Inline Masked File Upload Form with CSS3 and HTML5

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

The post for today is not something really special or super amazing. It’s just a quick and dirty trick that I use when I have to create inline forms for selecting files in which the actual input is hidden, and users click some text node (link, button, etc) that opens the browse for file dialog, which I wanted to share with you.

The Markup:

<div class="css3-inline-file-input">
    <form action="./" enctype="multipart/form-data" method="post" name="form-01">
        <input type="file" accept="image/jpg, image/jpeg, image/gif, image/png, image/bmp" name="form-01-file" /><span>Choose File</span>
    </form>
</div>

The CSS:

.css3-inline-file-input,
.css3-inline-file-input *
{
    display: inline-block;
}

.css3-inline-file-input *
{
    margin: 0;
    padding: 0;
    border: 0;
}

.css3-inline-file-input form
{
    position: relative;
}

.css3-inline-file-input input
{
    position: absolute;
    right: 0;
    cursor: pointer;

    filter: alpha(opacity=0); /* opacity fix IE6/7/8 */
    -moz-opacity: 0; /* opacity fix for older Firefox */
    -webkit-opacity: 0 /* opacity fix for older Chrome */;
    opacity: 0;
}

.css3-inline-file-input
{
    width: auto;
    vertical-align: top;
    overflow: hidden;
}

.css3-inline-file-input span
{
    display: block;
    text-align: center;
    text-decoration: underline;
}

.css3-inline-file-input input:hover + span
{
    text-decoration: none;
}

/* fixes for IE6/7 */
* html .css3-inline-file-input,
* html .css3-inline-file-input *,
* + html .css3-inline-file-input,
* + html .css3-inline-file-input *
{
    display: inline;
}

Older versions of Internet Explorer do not fire the onchange event on elements, hidden with CSS display: none or visibility: hidden, but instead an exception is thrown. This is why I used opacity: 0 and position: absolute to hide he original input.

You can check and download the demo on this page.

Enjoy the rest of the day!

Related Posts