The modulo operator in programming

A little known and often ignored Arithmetic operator in JavaScript and other programming languages used in Web Design (and other applications) is the modulo operator represented by the percent sign (%).

In JavaScript (and most C based languages) the Arithmetic operators are the following:

• Addition: +
• Subtraction: -
• Multiplication: *
• Division: /
• Modulus: %
• Increment (x=x+1): ++
• Decrement (x=x-1): --

 Most people learn all the others but ignore the modulus operator because they don't understand what it does or how it can be useful. So let us start with the basics.

In mathematics the modulo operator basically finds the remainder, or modulus, of a number after it has been divided by a second number. So 10 % 3 = 1 reads 10 modulo 3 equals 1 and means that after 10 has been divided by 3 there is a remainder of 1 that cannot be divided by 3 without resulting in a floating point or decimal number. Here are a few examples:

• 57 % 2 = 1
• 75 % 10 = 5
• 33 % 3 = 0
• 4 % 4 = 0
• 0 % 2 = 0
• 2 % 0 = error: illegal division by zero
• 185 % 60 = 5

As can deduct the product of the modulo operator can never be more than the second parameter (the divider). This is especially useful when we must conform a number to a certain range but the input number can be anything e.g. an angle needs to be between 0 and 360, modulo can be used to determine the current angle if more than one revolutions has occurred; or if more than 60 seconds has passed on a counter and you must determine the number of seconds on a second hand of a clock.

So how can you use this operator practically? Well, the previous examples are good and there are many more. However, the most common use for modulo is to determine whether a number is even or odd using the simple formula:
if x % 2 = 0 then "number is even"
else if x % 2 = 1 then "number is odd".

Some other uses are:

• to determine perfect squares
• making a clock that counts hours, minutes, and seconds (x % 60 = sec; Math.floor(x/60) % 60 = min)
• angle calculations (x % 360)
• non-destructive function for cryptology
• getting the decimal part of a number (x % 1)
• getting the day of the week from the day of the year ((x+offset) % 7)

I hope this tutorial has shown you how useful modulo can be and that you can use this in your programming.

CSS3 rounded borders with border radius.

How many of you designers out haven't wished it was possible to create rounded borders on a webpage without  having to make 4 corner images and then using complicated CSS to make the images 'stick' to the corners of the box only to find that your trick didn't work the same in all the browsers? Well, now it is with the new CSS3 property called border-radius.

Before CSS3 the only way to create round borders on web sites was with images and even that solution had a few inherit problems. One of which was scaling (images don't scale to well when you want to change the width of the box); another was CSS bugs in different browsers (because of buggy browser's (mostly IE) floated or positioned images didn't display the same way on all the browsers without a few CSS hacks). Thankfully those days are over. Using the new CSS3 property, border-radius, it is possible to make round or even elliptical borders across browsers using simple CSS syntax.

Here is a basic example:

This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9.

Here is the code for this div:

.example1{
  background-color:skyblue;
  margin:1em;
  padding:20px;

  border-radius:15px;
  -moz-border-radius:15px;

}

Syntax

border-radius: <border-radius>{1,4} [ / <border-radius>{1,4}]?


Rounded corners can be created independently using the four individual border-*-radius properties (border-bottom-left-radius, border-top-left-radius, etc.) or for all four corners simultaneously using the border-radius shorthand property.

The border-*-radius properties can each accept either one or two values, expressed as a length or a percentage (percentages refer to the corresponding dimensions of the border box).


Where two values are supplied these are used to define, in order, the horizontal and vertical radii of a quarter ellipse, which in turn determines the curvature of the corner of the outer border edge i.e. how large that corner is on that axis. Where only one value is supplied, this is used to define both the horizontal and vertical radii equally. If either value is zero, the corner will be square, not round.


The following diagram gives a few examples of how corners might appear given differing radii:

The border-radius shorthand property can be used to define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four lengths or percentages.


The first set of (1-4) values define the horizontal radii for all four corners. An optional second set of values, preceded by a ‘/’, define the vertical radii for all four corners. If only one set of values are supplied, these are used to determine both the vertical and horizontal equally.

For each set of values the following applies:

If all four values are supplied, these represent the top-left, top-right, bottom-right and bottom-left radii respectively. If bottom-left is omitted it is the same as top-right, if bottom-right is omitted it is the same as top-left, and if only one value is supplied it is used to set all four radii equally.

Browser Support

At the moment Firefox (version 4 onward), Internet Explorer (version 9 onward), Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 4 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification.


Firefox (version 1 onward) with the -moz- prefix, and Google Chrome (version 0.2 onward) and Safari (version 3 onward) with the -webkit- prefix already offered basic support for the shorthand syntax. However, IE 8 and previous offered no support.


It is recommended for backward compatibility to include the -moz- property as well. Here is a table of how the old Mozilla extensions corresponds with the W3C specification:

W3C Specification	Mozilla Implementation
border-radius	-moz-border-radius
border-top-left-radius	-moz-border-radius-topleft
border-top-right-radius	-moz-border-radius-topright
border-bottom-right-radius	-moz-border-radius-bottomright
border-bottom-left-radius	-moz-border-radius-bottomleft

More Examples:

border: solid 10px;
 
 /* the border will curve into a 'D' */
 border-radius: 0 50px 50px 0;

 border: groove 1em red;
 border-radius: 2em;

  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;

   background: gold;
   border-radius: 40px 10px; 

background: black;
color: gray;
border-radius: 50%;

Sources:

http://www.css3.info/preview/rounded-border/
https://developer.mozilla.org/en/CSS/border-radius
http://www.w3.org/TR/css3-background/

Javascriptkit.com review

For all you creative web designers and coders out there here is a great site that is really a must for anyone who is serious about programming in JavaScript for the web:

JavaScript Kit (http://www.javascriptkit.com/)

This site not only offers excellent tutorials, but also has a great JavaScript reference that includes tips for writing cross-browser compatible code, as well as ready to use examples and snippets so that you don't have to reinvent the wheel. It also includes a DOM Reference and DHTML tutorials which can be seen as extensions of JavaScript.

As stated before this site offers tips on how write cross-browser compatible code which is a very important issue for JavaScript developers. Something which most people are not aware of and is quite surprising to new coders is that JavaScript for IE, more accurately called JScript, is a completely separate language from JavaScript for Standards Compliant browsers (FireFox, Chrome, etc.), a.k.a. ECMAScript, regardless of the similarity in syntax and keywords. Internet Explorer's blatant disregard for standards (which is the bane of a web designer's existence) makes it necessary for developers to write code for both browsers in order to make web applications work.

Mozilla Developer CSS Reference

For all you Web Design boffins out there especially the CSS gurus and also to all you new Web Designers and Developers who want to know more about Cascading Style Sheets (CSS), here is a great site:
Mozilla Developer Network (MDN) CSS Reference (https://developer.mozilla.org/en/CSS_Reference)

This great site lists and gives detailed descriptions of all the CSS properties, selectors, concepts, values, types, rules, and other miscellaneous info for all the CSS that works in Mozilla Firefox. It includes the traditional CSS 2.1 specifications to which most Developers have become accustomed to as well as the new and exciting developments in CSS 3 which are already implemented in browsers. It also includes browser compatibility tables for all CSS properties and selectors. This is a good place to start whether you are a beginner or Advanced Designer.

For those of you who have no idea what Cascading Style Sheets (CSS) is, here is a short description: Cascading Style Sheets is a web technology which allows designers to creatively style and change the layout of Webpage using simple rules to define how different elements on the page should look and be positioned. For example, you could specify that all normal paragraphs in <p> tags should be colored red, font Arial, and bold (in this case the CSS would be p{color:red; font-family:Arial; font-weight:bold}). Other properties that may be changed include but is not limited to: margins, padding, borders, fonts, size, positioning, whether scrollbars appear when text overflows, how the page looks when printed or viewed on a mobile phone, background images and colors, the style of a link when the mouse hovers over it, opacity, page transitions, list styles, etc. . CSS also allows developers to separate content from design (or layout) and designers the ability to make global changes to an entire website by changing a single file i.e. to change all headings on the entire site to green instead of blue you would simply change one CSS file that is linked to all the pages in site, e.g. "mystylesheet.css", and that would update the entire site.

Welcome

Welcome to my newly created blog! I will be sharing Web Design & Development tips & tricks as well as some of my latest Designs here. Hope you enjoy it. Please Follow and Share if you like this blog.

Thank you!

Shalom,
Chris W. van der Merwe