Base tag : Learn how to use it

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.

  1. Copy and paste the markup from the online page in a local file (.html)
  2. 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

See the Pen Base tag : Learn how to use it by John Tsevdos (@tsevdos) on CodePen

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?

Call or text from a mobile device using very simple markup

At my latest presentation (at upNorth web conferce in Greece), people were 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)!

See the Pen Call or text from a mobile device using very simple markup by John Tsevdos (@tsevdos) on CodePen

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)…

Safari’s HTML5 search input

The safest and easiest way to upgrade your markup to HTML5 is to use the new form input types. They will appear as ordinary text inputs on older browsers, and at the same time they’ll save you tons of work on form validation, and as a bonus they’ll assist your users in filling them (by providing more in-browser features, alternate keyboard layouts and more). This blog theme uses a search input to search the site.

<input id="s" name="s" type="search" />Check out this Pen!

It works great, but unfortunately, Safari’s default search input generates a close button (x) into the input field (while you type). Supposedly this will help the users to view recent search keywords, but if they they decide that they don’t need help, they can just click it and remove everything from list and the input field. I didn’t need this in-browser style for my search input, so after an investigation, I discovered the below solution.

input[type="search"] {
  -webkit-appearance: textfield;
}Check out this Pen!

This rule will transform your search input (with the strange close button) into a typical text field input that you can style properly.