Pakt Book Sale $10


Until July 5th you can get any book at Pakt for $10. Don't forget to get a copy of my book while you're at it: HTML5 Web Application Development by Example.

author: PhubarBaz | Posted On Thursday, July 3, 2014 8:55 AM | Comments (0)

Review for Learning Three.js: The JavaScript 3D Library for WebGL


This book aims to teach you how to draw and animate 3D scenes in JavaScript using WebGL. It uses a library called Three.js which makes it easier to interact with WebGL. It starts off with the basics of explaining the basic Three.js concepts such as a scene, camera and renderer. Then it moves on slowly to introduce new concepts including how to draw different kinds of 3D shapes, using light sources and textures. The book does a good job of building up your skills step by step so you'll probably want to read it in order.

In later chapters it gets into some pretty advanced concepts such as lens flares, using different kinds of materials and textures, how to do 3D animations and using physics with another JS library called Physijs. By the end of this book you should be able to do some pretty cool stuff on your own.

Overall I think this book does a good job of explaining how to use WebGL through Three.js to get you started with creating 3D images and animations in the browser. The author really seems to be an expert in this field. There are also lots of pictures, which I appreciate because I can see exactly what the author is talking about. There are a lot of code samples which are clearly explained.

You can find more info about the book here:  http://www.packtpub.com/learning-three-js-javascript-3d-library-for-webgl/book

author: PhubarBaz | Posted On Thursday, April 10, 2014 12:27 PM | Comments (0)

Review: Mobile First Design with HTML5 and CSS3


I recently finished reading "Mobile First Design with HTML5 and CSS3" by Jason Gonzales. This book aims to teach you how to build web sites that can react to the device they are being used on. For example, if you're looking at a web site on a phone with a small screen you want the site to look different than if you're looking at it on a monitor with a huge screen. You just can't fit as much stuff on a small screen. The mobile first concept means that you first design your web site to look good on a small screen then work up to making it look good on the big screen. Most of the time as developers we do it the other way around doing mobile as an afterthought. As more and more people use mobile devices to access the internet this is becoming more of a necessity. You can't afford to alienate half of the visitors to your web site.

This book teaches you about responsive web design by building a personal portfolio site. The author uses a very specific tool for responsive web design called 320 and Up. 320 and Up is an open source project you can get from GitHub. It works with a CSS preprocessor called SCSS which makes it easier to manage your site's style.

Chapter 1 is an intro to reactive web design. Chapter 2 shows you how to setup 320 and Up then starts working on the homepage for the example website. He shows what it looks like on a large screen and mobile screen. This chapter is full of CSS and HTML showing how to build the home page header, hero image, gallery and footer. My only gripe here is that I wish there were more screen shots. It was hard for me to follow what his changes were actually doing without seeing it. Then he shows how to use @media queries to react to different device sizes.

Chapter 3 shows how to build a gallery page. Again it shows how the gallery panels would look on large and small screen and how to make it work responsively. Chapter 4 shows how to create a contact form. It uses some HTML5 attributes to make the form work better on mobile devices and some form validation. Chapter 5 shows how to build an "About Me" page. It shows how to use icon fonts that come with 320 and up to add some images.

The book has two appendixes. The first is on how to use the HTML5 boilerplate project, which contains everything you need to make it easier to create cross-browser HTML5 web pages. The second appendix talks about different CSS preprocessors and why you would want to use them.

If you're looking to learn how to build a reactive website and want to use a framework such as 320 and Up plus SCSS then this book will probably be helpful for you. If you want to learn more about how to use CSS media queries directly rather than through a framework then this book probably isn't going to get you there. I would have preferred a few more actual screenshots of what we were building to get a better idea of what how the code was changing the page. Other than that there are some good ideas on how to make your web pages look good on any device.

author: PhubarBaz | Posted On Tuesday, March 4, 2014 9:37 AM | Comments (0)

Getting Input from Touch Screens in JavaScript


JavaScript works just fine for getting user input from a mouse. You have all kinds of mouse related events: click, mousedown, mouseup, mousemove. But if your application only supports devices that use a mouse you're missing a lot of users. The great thing about JavaScript and HTML5 is that your app can work anywhere from desktop to tablet to phone. Only one out of three of those normally has a mouse.

So how do we remedy the situation? It's easier than you might think. JavaScript has the capability to capture touch events. Here are the touch events and their corresponding mouse events.

  • touchstart == mousedown
  • touchend == mouseup
  • touchmove == mousemove

Notice that there is no click event specific for touch. The click event still works for items like buttons and links. Not so much for capturing clicks of elements. You should use clickable items whenever possible, for example put a link around an element you want to get click events for.

If you must get touch events you'll have to do a little more processing. Touch events can have multiple touch points so you can't just use the same event handler as your mouse events. You're probably going to want to use either mouse or touch events but not both. I've found that mouse events do occasionally fire on touch devices so you don't want the same event twice.

Therefore we need a way to check if touch is available. You can do that by checking for one of the touch event handlers in the document element.

function isTouchDevice()
{
    return ("ontouchstart" in document.documentElement);
}

That was pretty easy. Now we need to add event handlers to some element.

if (isTouchDevice())
{
    canvas.addEventListener("touchstart", function(e) { onTouchstart(e); });
    canvas.addEventListener("touchmove", function(e) { onTouchmove(e); });
}
else // Use mouse events

Now let's write the touch event handlers. The touch event has a touches array containing a list of pageX and pageY coordinates, just like mouse events.

function onTouchmove(e)
{
    e.stopPropagation();
    e.preventDefault();
    doSomething(e.touches[0].pageX, e.touches[0].pageY);
}

Usually you only care about getting one set of coordinates so it's fine to use the first item in the touches array. Notice that we also call stopPropagation() and preventDefault() on the event object. This will stop the browser from doing its default behavior, which on a touch device either scrolls or resizes the page.

Your mouse event handler should look almost exactly the same so you have the same behavior no matter what input device.

function onMousemove(e)
{
    doSomething(e.pageX, e.pageY);
}

Now you have the same functionality on both mouse and touch devices. Take a look at this example app that I wrote called Fading Tails. It works on both touch and mouse devices. http://www.worldtreesoftware.com/lab/fadingTails/fadingTails.html

author: PhubarBaz | Posted On Monday, February 10, 2014 3:16 PM | Comments (0)

Packt’s $5 eBook Bonanza


Pakt, the publisher of my book, HTML5 Web Application Development by Example, is having a sweet holiday sale. You can get any eBook or Video from Packt for just $5. This sale covers every title in the 1700+ range you can grab as many as you want until January 3rd 2014. Don't forget to pick up a copy of my book while you're there.

More information is available at http://bit.ly/1jdCr2W

author: PhubarBaz | Posted On Saturday, December 21, 2013 9:17 PM | Comments (0)

Book Giveaway Winners Announced


The two lucky winners of free copies of my book, HTML5 Web Application Development by Example are: Jason M. and Jason N. You should be contacted by Pakt publishing. Congrats, I know the book will help you learn HTML5 in no time.

See the original post here. http://wblo.gs/eE5

author: PhubarBaz | Posted On Monday, December 9, 2013 9:14 AM | Comments (0)

TypeScript Enums to String


I just found an easy way to convert an enum value to its corresponding string value. Say you have the following enum.

enum Numbers { zero, one, two, three, four }

If you do Numbers.one you of course get the number 1. But let's say you have the enum value and you want to print it out. It's easy to get the string value by using an array indexer on the enum type.

var myNumber = Numbers.two;
var twoAsString = Numbers[myNumber]; // twoAsString == "two"

It seems a little strange but it works. If you look at the JavaScript you'll see how it's doing this. Click here to check it out on the TypeScript playground.

author: PhubarBaz | Posted On Monday, November 25, 2013 4:48 PM | Comments (0)

Win a copy of HTML5 Web Application Development by Example


This is your last week to sign up for my contest to win a copy of my book, HTML5 Web Application Development by Example. See my previous blog for instructions. http://wblo.gs/eE5

author: PhubarBaz | Posted On Monday, November 25, 2013 4:32 PM | Comments (0)

Win a Free Copy of Packt's HTML5 Web Application Development By Example written by J.M. Gustafson!!


We are pleased to announce that we are organizing a giveaway especially for you. All you need to do is just comment below the post and win a free copy of HTML5 Web Application Development By Example. Two lucky winners stand a chance to win a copy of the book. Keep reading to find out how you can be one of the Lucky Ones.

 

 

Overview of HTML5 Web Application Development By Example

  • Packed with example applications that show you how to create rich, interactive applications and games.
  • Shows you how to use the most popular and widely supported features of HTML5.
  • Full of tips and tricks for writing more efficient and robust code while avoiding some of the pitfalls inherent to JavaScript.


How to Enter?

Simply post your expectations from this book in the comments section below along with your email address (so I can contact you if you win). You could be one of the 2 lucky participants to win a copy.

DeadLine:

The contest will close on December 1, 2013. Winners will be contacted by email, so be sure to include your real email address when you comment! You may also click here to contact me if you  have trouble leaving your email in the comments.

Please note: Winners residing only in the USA and Europe would get a chance to win print copies. Others would be provided with eBook copies.

 

author: PhubarBaz | Posted On Saturday, November 16, 2013 11:28 AM | Comments (7)

Pakt eBook Sale


Pakt, the publisher of my book, is selling all of their eBooks and videos for 50% off at bit.ly/1bqvB29. You can't beat that. Just go there and enter the code COL50.

While you're there you can pick up a copy of my book, HTML5 Web Application Development by Example (bit.ly/18Smq8Q).

author: PhubarBaz | Posted On Monday, October 14, 2013 10:40 AM | Comments (0)