Phrappe

jQuery element’s tag name

John Tsevdos — Wed, 22 May 2013 07:17:10 +0000

Getting the selected element’s tag name is very easy in jQuery. Just use the below code.

Keep in mind that by default the returned tag’s name is capitalized so if you want it lowercase you’ll need this :

jPrefetch jQuery plugin

John Tsevdos — Tue, 14 May 2013 07:27:03 +0000

I just released jPrefetch a nice little jQuery plugin that makes HTML5 prefetching a bit easier. You can very easily use it at your current solution (static website or even CMS), just by including it and adding data-prefetch="true" to the link that you want to prefetch. You can also pass a url (string) in order to start prefetching the provided url, in case you are loading a page that doesn’t have any link with the data-prefetch attribute. jPrefetch will take care all the rest, and start adding the necessary markup (metatags) in order to allow prefetching in supported browsers (tested in Chrome and Firefox). As you can see, the use of it is very easy and elegant. The plugin was mainly inspired by these two excellent articles, Mastering HTML5 Prefetching and Prefetching with HTML 5 and jQuery.

Feel free to fork it, use it, whatever

Base tag : Learn how to use it

John Tsevdos — Wed, 08 May 2013 07:45:44 +0000

Every now and then a friend/colleague of mine asks me to have a look at his latest masterpiece (aka site). In many cases the second request is to have a look at why a specific client side feature is not working. Most of the time, I’m given a URL of the live version of the site that uses many internal and external resources (css files, javascript files etc). As you can imagine, it’s super time-consuming to recreate the online page locally to start working on it (downloading and linking all these files).

But don’t worry, the base tag can save us from this hard task, and help up recreate the online page locally within two simple steps.

Copy and paste the markup from the online page in a local file (.html)
Use the base tag to link all the dependencies/resources (you must place it into the head section of the page) to that html file

You’ll end up with a fully functional web-page that uses exactly all the online resources. Now you can either start adding your code to it, or simply download specific files that need re-factoring. Easy and clean, don’t you think?

Autocompletion with HTML5 datalists

John Tsevdos — Tue, 23 Apr 2013 07:25:50 +0000

We have all used (and most of us built) an autocomplete input element. There are thousands of plugins/widgets out there, although below I’m demonstrating the easiest, more semantic and HTML5 way to build it without using Javascript! Just put a normal input element and connect it with the new datalist element by using the list attribute. That’s it! You’re semantically correct, HTML5 autocomplete input is ready!

HTML5 Prefetching

John Tsevdos — Tue, 16 Apr 2013 07:21:53 +0000

One of the most interesting, but not widely known features of HTML5 is prefetching. By using it you can start loading pages (or even files) before the user requests them. This can increase your site’s speed and the user’s experience! Did I mention that it’s super easy to implement it? Just put the below code into the head section of your page:

For prefetching a specific file use the same code by pointing directly to the file.

The above feature works only on Firefox. If you want to use it in Chrome as well you have to use the “prerender” attribute as well:

Browsers that don’t support prefecthing will simply ignore it (Safari and IE) but sooner or later they will implement it, so you have no reason not to use it asap! Please try not to prefetch everything, it’s wrong! For more details regarding this neat HTML5 feature have a look at Mastering HTML5 Prefetching, an excellent resource on the topic.

Not so popular HTML5 attributes

John Tsevdos — Mon, 08 Apr 2013 08:05:53 +0000

HTML5 offers many new attributes that make our lives easier and our code more semantic. In many cases they even provide functionality that we use to implement with javascript, like the placeholder attribute. I’m pretty sure you all know the placeholder attribute, but what about the following ones?

hidden attribute

The hidden attribute, as you can easily guess, hides the element that is set on. It acts almost identical to style { display: none; }, but it’s simpler, cleaner and more semantic (since you are hiding the element directly on DOM rather than style). It is also ridiculously easy to make a fallback on browsers that do not support the specific attribute, just hide it in your styles ( { display: none; } ) or javascript…

download attribute

Do you have downloadable content in your website (like PDF files etc)? If yes then with a little HTML5 attribute you can provide better semantics to the link element, give a better description/title to your file and enforce the browser to download it! Just use the download attribute followed by a string that represents the description/title of your download. Even if your filename is a timestamp or a temp name, the user will download the file, having as its name the title you used.

autofocus attribute

Finally with the autofocus attribute you can autofocus any input, textarea or button you want. Simple as that.

To conclude, whenever possible, try to use the new HTML5 attributes. They will always be more semantically correct and it’s super easy to implement them. Also, most of them have very simple fallbacks but even if you don’t provide any, most of the time you won’t break something, so you don’t have any excuse.

How to style a file input element in Firefox

John Tsevdos — Tue, 05 Feb 2013 08:27:58 +0000

Working on a recent project I found out the hard way that Firefox doesn’t allow you to style a file input element the way you want. I’m using Chrome for surfing and development, which let’s you style a file input field without any constraints so I was a bit frustrated when I checked my form in Firefox! With a quick search I discovered that Firefox doesn’t let you do too much with the file input element. I also discovered some workarounds, but most of them were too complicated for the simple effect I wanted to achieve (to place a background image in the file input field). With a little help from stackoverflow and no javascript at all, I managed to make it work in Firefox as well as other browsers (see code below).

Mobile media capture straight to your web form

John Tsevdos — Wed, 23 Jan 2013 08:18:14 +0000

So, you’ve just build your latest responsive web design masterpiece and you’re adding the final touches for the mobile viewport. Suddenly you discover a form where the user must submit a profile image (or video or even audio) in order to continue. Wouldn’t it be nice to let the user use their phone in order to take a picture (or video or even audio) with it, and at the same time keep the normal fallback of the input file element for desktop browsers? Well you can, just use the below attributes on your input fields. Desktop browsers will use them as normal file inputs, while mobile devices will add this extra native flavor.

I tested them and they work on iPhone (both on mobile Safari and mobile Chrome), but they will (probably?) work on any mobile device/browser (android/windows etc.)… Let us know in the comments or via twitter if they work for you.

Responsive web design and how to be nice to IE

John Tsevdos — Tue, 15 Jan 2013 07:53:31 +0000

Many people believe that Internet Explorer (especially 7 and 8) cannot render correctly responsive web sites. Well the truth is that IE sucks big time (specially versions previous to 9), although the above statement is partially true. With a tiny bit of effort you can make your responsive web site play nicely with IE as well. Let me tell you how.

The first thing you must do in any case (this tip is not only for responsive web design), is to make sure that IE is using the latest rendering engine it supports. We can do this very simply by including the below metatag. Finally, if the user has Google Frame (does anyone have it?) we tell IE to use that rendering engine.

Easy so far, the next major problem is that IE8 and below doesn’t recognise HTML5 elements. Again you can include either html5shiv or modernizr to fix this. Html5shiv is smaller in filesize and does the job but Modernizr can help you detect browser features (and not only that), the choice is yours.

Finally you can make IE understand media queries (a very important part of responsive web design) with the excellent Javascript polyfill Respond.js. That’s it, you’ve made it! With these very simple steps we can be nice to IE and make it treat right our responsive web sites.

Call or text from a mobile device using very simple markup

John Tsevdos — Mon, 07 Jan 2013 09:05:31 +0000

At my latest presentation (at upNorth web conferce in Greece), people impressed with some very trivial markup that can add many points to your mobile site (and not only) with minimum effort. With the below very easy to implement markup you can make your site interact with the device in order to make phone calls and/or send sms (I only tested it with iPhone but I believe its working on other devices as well)!

The above enhancements, together with a custom iOS home screen icon/image, are probably the easiest markup implementations that give to your mobile site/app many more extra points! If you’ve tested the above example with other devices (android, windows, blackberry, etc.) please confirm that it’s working (just leave a comment)…