HTML

what-is-polymer

What is Polymer and should I be using it?

Before I get started telling you what polymer is and the cool things you can do with it; it might be best to give you an overview of Web Components, because after you understand Web Components you’ll pretty much understand Polymer.

Web components are a bundle of markup and styles that we can use to create custom HTML elements. For instance we could create a tag like:

<awesome></awesome>

And ‘awesome’ would be our custom HTML element. We can then define a template of HTML, CSS, and Javascript to render our custom element on our page. The great thing about web components is that all of the contents inside of our custom element (also referred to as the ShadowDom) will not be able to mess-up or bleed out to the parent page. This is great because you won’t have any CSS or Javascript conflicts. One custom HTML5 element that may be very familiar to you is the ‘video’ custom element. Shown below:

<video width="300" height="150"> 
  <source src="trailer.mp4" type="video/mp4”>
  <source src="trailer.webm" type="video/webm">
  <source src="trailer.ogv" type="video/ogg”>
</video>

The ‘video’ HTML element is a custom element that is recognized across most modern web browsers. And utilizing web components you are able to create your own custom HTML5 elements.

So, now onto Polymer. Polymer is a javascript library that makes creating these custom html elements easier than ever. With Traditional web components you would have to write a lot of javascript and implement the web component into your webpage. Then you would have to make sure that that custom element worked in most modern web browsers. Well, if you are using polymer you can rest assure that all your web elements will be pollyfilled so that way they are compatible with the latest web browsers.

Using Polymer we can quickly and easily create new web components that people can drop into their webpage and the web component will do it’s own work and display it self accordingly on your page.

Be sure to checkout Polymers website here: http://www.polymer-project.org/ You can checkout some of the cool custom elements that people are already building over at http://www.customelements.io/

Also, be sure to checkout the cool examples on Polymer’s demo pages: 

http://www.polymer-project.org/apps/topeka/

http://www.polymer-project.org/components/paper-elements/demo.html#core-toolbar

And checkout just how easy it can be to include google custom elements on your site here: http://googlewebcomponents.github.io/

There’s a lot of cool things that custom elements are solving. Be sure to read up and learn more about custom elements since this will soon be the future of where web development is heading.

ninja-media-script

Ninja Media Script

Well, it’s been awhile since I’ve written a post. I hope to get back into my daily post routine :) In the meantime I’ve been fairly busy creating some new scripts and learning some new technologies. One of the latest scripts that I’ve written was a Viral Media Script that’s available on CodeCanyon. Feel free to check it out here.

The response has been great so far, I am reaching nearly 250 sales within the first couple months. It’s great to be able to continue to work on something that people care about. Whenever I’m working on updates during the weekend it’s a great feeling to know that I have users who are looking forward to these updates.

The script was built using Laravel 4 framework, Bootstrap 3, FontAwesome4, and jQuery.

Here are some of the screenshots of the script below:

ninja-media-script-screenshot-1 ninja-media-script-screenshot-2 ninja-media-script-screenshot-3

Be sure to check it out on the Envato page here: http://codecanyon.net/item/ninja-media-script/6822888

And I look forward to hearing your feedback :)

How to detect radio box change with jQuery

I’m constantly finding myself searching Google when I need to find out how to detect when a radio box has been changed using jQuery, and sometimes I have to search down a couple results til I finally find one that works. So, since this may come up again in the future, I have just decided to write a quick post about this topic.

Finding out when the radio box has been changed with jQuery is very easy, say you have a form inside your html that looks like this:

<form id="my_radio_box">
    <input type="radio" name="my_options" value="option 1" /> Option 1
    <input type="radio" name="my_options" value="option 2" /> Option 2
    <input type="radio" name="my_options" value="option 3" /> Option 3
</form>

Now, to detect when that radio box is changed, you can easily call the jQuery ‘change’ event inside your jQuery document ready function:

    $(document).ready(function(){
        $('#my_radio_box').change(function(){
            alert('Radio Box has been changed!');
        });
    });

In the above example when the radio box has been changed an alert is displayed. Now, in order to get the value of the currently selected radio box we can simply save the value in a variable:

    selected_value = $("input[name='my_options']:checked").val();

And, of course this has to be called inside of the jQuery ‘change’ function. Quick note: you’ll need to make sure to include the jQuery library somewhere above this code. So far the whole javascript functionality should look as follows:

    $(document).ready(function(){
        $('#my_radio_box').change(function(){
            selected_value = $("input[name='my_options']:checked").val();
        });
    });

There you go the selected value is stored inside of the ‘selected_value’ variable, you can feel free to do whatever you’d like from here. As an example, I’m going to alert the value to the screen.

Checkout The Simple Demo Here

And the following is the code for the example above:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
 
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
			<script type="text/javascript">
 
				$(document).ready(function(){
 
					$('#my_radio_box').change(function(){
						selected_value = $("input[name='my_options']:checked").val();
			            alert(selected_value);
			        });
 
				});
 
			</script>
	</head>
	<body>
 
		<h2>Detecting a Radio Box Change and getting the Value in jQuery:</h2>	
		<form id="my_radio_box">
		    <input type="radio" name="my_options" value="option 1" checked="checked" /> Option 1
		    <input type="radio" name="my_options" value="option 2" /> Option 2
		    <input type="radio" name="my_options" value="option 3" /> Option 3
		</form>
 
	</body>
</html>

How to talk to the parent page from an iframe

Somtimes you need a way to communicate with an iframe. Talking directly to the iframe can be done by sending parameters via the src URL, but what if you need a simple way to pass something from an iframe to the parent page? Well, the simplest way to do this would be to call a javascript function that lives in the parent page. To access the parent page, you will use the ‘parent’ object inside javascript of your iframe.

As an example, here is what your parent page might look like

<html>
<head>
<script type="text/javascript">
    function alert_me(string)
    {
          alert(string);
    }
</script>
</head>
<body>
    <iframe src="my_iframe.html"></iframe>
</body>
</html>

Now, inside of your iframe html, you could simply do the following to call the parent function within your iframe (my_iframe.html):

    <script type="text/javascript">
        parent.alert_me('hello there!');
    </script>

Now, when the iframe is called it will call the parent function ‘alert_me’, additionally you can feel free to have the parent function called during an event, like a button click or even a key press. Anyway, it’s very simple, hope someone can find this useful ;)

Adobe Edge Animation with Video

So, it seems that Adobe has realized that HTML5 will rule and conquer a lot of aspects for the future of web. Adobe has released a new product called Adobe Edge which allows users to create animation in a nice WYSIWYG editor and then they save it as HTML, CSS, and Javascript. My first impression of the application was a good impression. I was a fan of Flash in the past; however, I was totally understanding of the reasons they were not widely accepted on Mobile Devices.

Here is a screenshot of the new Adobe Edge application:

You can get a free copy of Adobe Edge over at their website. http://labs.adobe.com/technologies/edge/ Go ahead and download it and give it a try.

After I downloaded it, I watched this simple getting started video: http://tv.adobe.com/watch/adc-presents/edge-getting-started and then after watching the video, I created my first animation of a video container sliding down and then a video being displayed after the animation has completed.

Check it out here:

Adobe Edge Animation with Video

or, you can

Download the files here

Enjoy ;)

fancy view source by CSS-TRICKS.com

Sometimes the default ‘view source’ way of viewing the code on a website is too complicated. Yeah, it’s only a few button clicks away, but when you view the code it opens up in another browser window and it is usually kind of difficult to navigate. Well, thanks to Chris Coyier from CSS-Tricks.com we have just been given an easier way for our users to be able to view the source code from our website. Check out the screenshot below:

Now, you can mix the sweetness of the ‘FancyBox plug-in‘ to the ‘View Source Functionality’ to create a delectable and easy to use view source button on your page. The resources are below.

Check out the original article at: http://css-tricks.com/make-a-view-source-button/

Or, you can view the demo here: http://css-tricks.com/examples/ViewSourceButton/

Point to Pixel Chart

There are two main measurements for web fonts. Points and Pixels (pt and px). The ratio between the two is 0.75:1. This means each pixel is equivalent to 0.75 pt. This means that a font of size 8px would be equal to a font of 6pt. I have created a simple chart or table below which represents most common pixel to point conversions:

Points Pixels Ems Percent
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%

Hope this reference helps and saves you from having to do a manual conversion ;)

HTML5 video 101

HTML 5 is the new HTML standard for constructing and building pages to be viewable in web browsers. HTML5 adds a lot of new features that HTML 4 never had a few of these features include local web-app storage, canvas drawing, and the video element. The feature that we are going to briefly discuss in the post is the video element. Users can now embed videos into their webpages by using the <video> tag. a simple representation of using this tag is shown below:

 
<video src="movie.ogg" controls="controls">
your browser does not support the video tag
</video>

If a user is viewing the page through a browser that is not HTML5 compatible the message ‘your browser does not support the video tag’ will be displayed. The chart of current browsers that are HTML5 compatible is shown below:

Now, if you wanted to embed a video file into your page, you may want to have a couple different types of video files. Unfortunately, no one knows how to play nice and keep only one standard. The most common types of video files you will want to use are the .Ogg file and .Mp4 containers. And, you may event want to revert back to a .flv for older versions of IE. Here is a chart of compatible video codecs and browsers below:

Alright, now in order to display a video in the browser using HTML5 video and supporting flash fall back if the browser is not HTML5 compatible, you will want to do something similar to the following code:

 
<video width="480" height="267" controls="controls" preload="true">
    <source src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v">
        <source src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_400p.ogg" />
      <!-- Flash Fallback. Use any flash video player here. -->
      <object class="vjs-flash-fallback" width="480" height="267" type="application/x-shockwave-flash"
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"clip":{"url":"http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v","autoPlay":false,"autoBuffering":true}}' />
      </object>
    </video>

create a web crawler 101

If you would like to learn how to create a web crawler, spider, or sometimes referred to as a bot… It is actually a lot simpler then you may think. In this short post I will display just how easy it is to obtain a mark-up from another website and then you will easily be able to see how you can parse the data to use for your own evil pleasure. The PHP code to get the markup of another site can be done with one function call ‘file_get_contents’ as shown below:

<?php
$webpage = file_get_contents('http://www.tonylea.com');
?>

Now, the variable ‘$webpage’ contains all the mark-up (source) for http://www.tonylea.com.

Okay, so basically if we want to parse the data we could do something like the following:

<?php
$url = 'http://www.tonylea.com';
$webpage = file_get_contents($url);
function get_images($page)
{
     if (!empty($page)){
          preg_match_all('/<img([^>]+)\/>/i', $page, $images);
          return !empty($images[1]) ? $images[1] : FALSE;
     }
}
function get_links($page)
{
     if (!empty($this->markup)){
          preg_match_all('/<a([^>]+)\>(.*?)\<\/a\>/i', $this->markup, $links);
          return !empty($links[1]) ? $links[1] : FALSE;
     }
}
 
$images = get_images($webpage);
foreach($images as $image)
{
     echo $image.'<br />';
}
?>

In the above example we have gotten the mark-up from the specified URL and gotten the values contained in the ‘a’ tags and the ‘img’ tags. The code then prints out the data that is in the ‘img’ tags. With a bit more parsing you can display images and links from the page you have scraped or crawled.

Very cool stuff, that you can collaborate upon to do some awesome web crawling :)

HTML Clear Default Text in input text box

After several times of searching for a solution for clearing the default text from an HTML input text box several times and coming up with good results; however, some incompatible with some browsers. I had found some that worked well with all browsers; however, they had some cumbersome javascript files that I had to include.

Instead I decided to compile the best solution and the great thing about it is that you can put all the functionality within the single input tag. Here is the solution:

 
<input type="text" value="search..." size="26" onclick="this.value='';" onfocus="javascript: if (formfield.defaultValue==formfield.value)formfield.value = ''" onblur="this.value=!this.value?'search...':this.value;" />

This is a simple search textbox which will clear the default text when it has focus and when focus has been lost the default text will be returned. In this example the default text is “search…”.

if (formfield.defaultValue==formfield.value)
formfield.value = “”
}