tag:blogger.com,1999:blog-231054772025-07-29T13:17:28.976-04:00News, Tips & Tricks for Web DevelopersUnknownnoreply@blogger.comBlogger153125tag:blogger.com,1999:blog-23105477.post-61076185587655297262013-10-08T20:00:00.000-04:002017-06-29T03:52:22.942-04:00

If you're looking to draw a rectangle on a canvas, you can use techniques we've looked at before to simply draw four lines at right angles. But you don't need to; there are build in methods to do this for you. You could easily draw a simple rectangle by using the lineTo() method: context = canvasTag.getContext('2d'); context.beginPath(); context.lineTo(200, 0); context.lineTo(200, 100);

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-32365093989938148282013-10-06T11:26:00.000-04:002017-06-29T03:52:51.926-04:00

The Blink tag died recently, when it's last supporting browser, Firefox, quietly dropped support with the release of Firefox 23. It was conceived by Lou Montulli in the summer of 1994 at St. James Infirmary, a local bar on Castro street in Mountain View. The Blink Tag came to the world when an engineer took Lou's conceived idea and brought it to life the next day. It was quietly released to the

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-64397109344028877892013-09-20T20:34:00.000-04:002017-06-29T03:53:06.194-04:00

Today, we take a look at the CSS property text-decoration. text-decoration property adds effects to text with several possible values. They are: none - No decoration on text. underline - The text is underlined. overline - The text has a line over it. line-through - The text has been run over by a line. blink - The text blinks on and off. This only works with some user agents and does

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-6995103039478744492013-09-18T07:53:00.001-04:002017-06-29T03:53:57.409-04:00

Today, we'll take a look at the figure and figcaption element in HTML5. The figure element is used to hold data that is a complete unit, and is related to and referenced by the surrounding content. This is different than the aside element where, although the data is slightly related, the data is not part of the document. The figcaption element is an optional element inside the figure

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-12903367186818563532013-09-16T18:00:00.000-04:002017-06-29T03:54:13.872-04:00

Over the weekend, we looked at drawing a curve. We could use this to draw an arc, but there are better ways to do that using the canvas API. There are two methods you can use to draw an arc, arc() and arcTo(). See below for the method definitions. context.arc(x, y, radius, startingAngle, endingAngle, counterClockwise); context.arcTo(x1, y1, x2, y2, radius); The arc() method takes the

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-30125926030630733662013-09-15T18:37:00.003-04:002017-06-29T03:54:29.128-04:00

Previously, we had looked at the basics of drawing on the canvas- setting line styles, gradients, and stroking lines. But drawing straight lines doesn't help us if we're looking to draw a curve. We'll look at the bezierCurveTo() and quadraticCurveTo() of the context object. Bezier curves are determined by specifying one or two control points and a destination point. The call to

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-13538723612203480852013-09-14T18:00:00.000-04:002017-06-29T23:35:54.908-04:00

Today, we are going to study the footer element in HTML5. The footer typically contains copyright notices, author, related links such as disclaimers or other similar data. A footer can also be used to place the content of appendices, indexes or similiar content, such as in a legal agreement. A simple example of the footer element is as follows: <footer>    

Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-23105477.post-87906842334259546652013-09-12T18:00:00.000-04:002017-06-29T23:36:11.496-04:00

Today, we are going to study the aside element in HTML5. The aside element is used to represent contents that are indirectly related to surrounding content. The content inside the aside element can be considered as independent content. A simple usage of the aside element is as follows: <body> Pets can be good for your mental health.    <aside>   &

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-26734726014303228862013-09-11T18:00:00.000-04:002017-06-29T23:37:16.693-04:00

The other day we looked at what was necessary to draw lines with canvas. First we covered setting the line style, then we looked at drawing the actual lines. What we were using in those examples were solid colors. What if we wanted to use a gradient instead? Here's how. Creating the Gradient Before we can draw with a gradient, we need to create it. We can do this by using the

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-80937849994130955912013-09-10T18:00:00.000-04:002017-06-29T23:37:07.022-04:00

Today, we're going to study the article element in HTML5. The article element represents an article or composition that can be used or distributed independently. A simple usage of the article element is as follows: <article>     <h1>Yankees beat the Brooklyn Dodgers</h1>     Yankees beat the Dodgers 10-2 today at Yankee Stadium. </article&

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-7462795088403470632013-09-09T18:14:00.001-04:002017-06-29T23:37:33.718-04:00

The simplest kind of drawing you can do with canvas is drawing lines. Last week we looked at context properties for setting the line style. Now that we've done that, let's go over how to actually draw. Like most 2d drawing systems, the origin of the coordinate system is 0,0 and located in the top left corner of the canvas. When drawing with canvas, we start our drawing operations by using

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-27503586485042937572013-09-07T18:00:00.000-04:002017-06-29T23:37:55.079-04:00

Today, we'll study the nav element in HTML5. The nav element is a grouping of links (external or internal to the page) that are used to help users navigate around the site. Not all links would qualify as ones you should use inside a nav element; if the links are a group of favorite game sites for example, then it would not be appropriate to use the nav element. The nav element can be placed

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-78690592561875018272013-09-06T18:15:00.002-04:002017-07-01T09:40:32.069-04:00

We recently started discussing how to access the canvas from JavaScript. Before you begin drawing however, you can set the line style by using properties of the context object. The line style properties available for the graphics context are: lineWidth The thickness (in pixels) of the line. The default value is 1. strokeStyle The style of stroke you would like to use. This can be a color,

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-27050190176878429852013-09-05T18:00:00.000-04:002017-07-01T09:40:58.874-04:00

Usually when we think of headers, we think of the single area of the webpage that contains the logo, the search form, menu or navigation. In HTML5, the header element allows all that and more. It can be used to introduce content to "sectioning content" and "sectioning roots" elements. Currently, "sectioning content" are the following elements: article, aside, nav and section. "sectioning roots

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-74543967180545372342013-09-04T16:00:00.000-04:002017-07-01T09:41:12.946-04:00

The other day we looked at setting up the canvas tag. But while the HTML element this set up a drawing surface, the actual drawing is handled from JavaScript. Here's how to get started. Grabbing the Element and Retrieving the Context Let's start with the code example we used last time: <canvas id="myCanvas" width="200" height="200">     Your browser does not

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-67127818822618082332013-09-03T16:00:00.000-04:002017-07-01T09:41:29.119-04:00

Recently we had talked about a new group of semantic HTML elements. We'll start looking at the first one: the section element. Section is a new element in HTML5 that splits up content to make the code more cohesive and readable. It is used to represent a grouping of similar content, usually with a heading. A product webpage can be broken down by different section on the page: Introduction,

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-16626620388098639382013-08-31T16:00:00.000-04:002017-07-01T09:41:51.355-04:00

We recently looked at detecting browser information, such as browser name, number, and operating system. You might be tempted to use this information to decide on whether to use features that not universal across browsers. But this might be the best thing to do-you're much better off doing feature detection. Feature detection is a method for testing the existence of a specific feature. If you

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-84325194404337743632013-08-30T20:15:00.003-04:002017-07-01T09:42:08.785-04:00

Different parts of HTML5 were contributed by different browser vendors. It seems only appropriate, that Apple, the company that was so insistent in replacing Flash, contributed the technology that replaced many of Flash's features: the canvas tag. The canvas tag in HTML5 represents a surface for bitmap drawing. Apple implemented it in Safari, and it was quickly adapted by Firefox and Opera.

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-63352651198395577532013-08-29T16:00:00.000-04:002017-07-01T09:44:14.765-04:00

Sometimes it's helpful to know what resolution your users are using when they access your site. You can get this information by utilizing the screen object. The screen object contains a number of helpful properties, but the first and foremost among them is width and height. With these two properties you can detect the user's screen resolution. The screen object also contains fields called

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-42480847923952862942013-08-28T16:00:00.000-04:002017-07-01T09:45:37.001-04:00

Although it may not be obvious at first, invisibility is used everywhere on the web. Every time you use flyout menus, popup windows, dropdown menus or similar types of navigation, the odds are that you've just seen alterations in visibilty at work. Knowing how to control the visibility of elements on your page is a critical skill to have. There are a few different ways to tackle this in CSS,

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-73319286905588388712013-08-27T16:00:00.000-04:002017-07-01T09:45:17.952-04:00

If you'd like to get information about the browser users are using on your website, here's how-by using the navigator object. The navigator object provides a good deal of information about the user's browser. Let's go over the individual fields. Browser Name You can retrieve the name of the browser by using navigator.appName Browser Version You can retrieve the version of the browser

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-14695496787214174082013-08-26T16:00:00.000-04:002017-07-01T09:45:52.335-04:00

When HTML5 was being created, the authors faced a tough decision-what tags should they create? There was an obvious desire to clean up HTML as it stood-finally abolishing those tags that had been replaced by equivalent CSS technology. There was also interest in creating tags that replicated some of what had made Flash so successful. Lastly, there was also a desire to create a new round of

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-51583792769668228912013-08-25T16:00:00.000-04:002017-07-01T09:46:05.444-04:00

If you ever needed to simulate the flipping of a coin, or some other event in which you expect to receive a boolean result, this is how to do it. When we last looked at generating random numbers, we looked at creating random numbers in a range. We'll use that code as a base. See below. function coinFlip() {     var max = 1;     var min = 0;  &nbsp

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-42685633593234370532013-08-24T16:00:00.000-04:002017-07-01T09:46:20.029-04:00

The font shorthand property is an easy way to specify a number of individual font properties at once. But you need to be careful how you use it or you may get unexpected behavior. Let's go over the basics. The font shorthand property allows you to specify the font style, the font weight, the font variant, the font size and the font family. Some of these attributes are required while some of

Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-23105477.post-15570739904857015502013-08-23T16:00:00.000-04:002017-07-01T09:46:38.110-04:00

JavaScript supports a ternary operator-an operator that exists as a shortcut for if/else. The ternary operator returns one of two possible expressions depending on a conditional check. condition ? expression1 : expression2 So let's look at a typical example done with an if/else block. if (totalPrice > 100) {     discount=.05; } else {     

Unknownnoreply@blogger.com0