When I develop in the web, there are plenty of times that I want to see information about where I am in the program or what is going on in the Javascript when I load the page. I use the Console to watch updates but it can be difficult to read when you have possibly hundreds of log statements.
Usually you can just use the standard console.log function:

> console.log("Some information");
Some information
or 

> console.debug("Some information");
Some information

or 

> console.info("Some information");
Some information

You also get the line number and file that the output comes from in the console.

But did you know that you can use the following:

console.clear()
console.error(object)
console.table(array)
console.warn()

Let’s say you want to clear the current console. You can place in your code, or use it within the console itself.

console.clear();

Or you can get color coded lines with the warn or error functions:

> console.warn("This is a warning");

> console.error("Error: Danger");

And if you need to display an array that and want a better layout use console.table():
> console.table(['a','b','c']);

I was talking to a friend of mine on the phone the other day and we were talking about how debugging in Chrome was sometimes frustrating. We both had some ideas on how that could have been made better for each of us.

While you can load your page, find the line of code, and add a set of breakpoints. He let me know kicking off the debugger in a certain part of your code just by adding the following line of code where you want the code to stop:

debugger;

Once this brings up the debugging window, this behaves like a breakpoint and stops execution. Now you can see the value of your variables, or you can step through the rest of your code line by line.

My next post will talk about the different kind of console logging functions that are availabole.

There are times that you are going to want to add some imagery to your site. This would normally mean using many different image files which will increase the load time for your site. What if you could use a single image and display portions of that image throughout your site.

You could use use a single image called a sprite sheet. This single image file can hold many different images in different tiles for use through out your website. This allows you to load a single file to your page and adjust the viewport in different locations throughtout your site to display the images or icons you are using. Many major websites use this technique.

Let’s use an image like the following:

The size of this image is 220px x 110px. Each tile of the grid is then a 110px x 110px image. So we need to allow for a viewport to this image that is the size of the tile.

The method we are going to use is a simple div element with the class of “sprite”.

<div class="sprite >
</div>

The CSS for this element will use height and width to define the size of the div. You could also create a placeholder image of the size you want your image to be that is a transparent png and place that inside the div, but that is not necessary.

This snippet is the CSS that we require to show the first image with the smiley face in the div. We specify a height and width for the div to create a viewport into a segment of the image. Next set the background of the div to the image url. The last step is to make sure that the image does not repeat.

.sprite {
width: 110px;
height: 110px;
background: url("http://etechtips.com/wp-content/uploads/2017/04/smiley_sad.png");
background-repeat: no-repeat;
}

In order to display the next image in the sequence you need to use the position properties of the background property. Using the hover pseudo class will allow us to demonstrate the change image update. In the hover property we only need to override the background property with a position offset of -110px in the x direction. Notice that we have used a negative to move the image to the left. The origin of this image is considered 0,0.

.sprite:hover {
  background: url("http://etechtips.com/wp-content/uploads/2017/04/smiley_sad.png") -110px 0;
}

If you used a larger image with more tiles you could scale in both horizontal and vertical directions to show more images.

Example:

If the example doesn’t show in the article, either visit the single page post or checkout this codepen: Smiley Sample

Due to a minor adjustment, I used an offset of -109px for this image or I got a slight shift of the image when I hovered. You should only see the shift of smile to frown when you mouse over the image.

The tiles can be uniformly the same size or you could try packing in many images of different sizes and shapes. Just make sure that you allow for the viewport to not display overlapping images.

Tags: CSS, Web Design

I have been working to up my skills in the web development arena and have to say that The Odin Project is a great place to get started. The lesson plan directs you to not just learn the different languages required to create for the web, but also what is going on in the computer when you do things. It also gives you information about how to connect with other developers and how to progress your skills.

Some of the projects teach you to create images with a group of divs and pure CSS like this example of the Dancing Android character.

Also learning to re-create the basic display of the Google Home Page helps to learn styling techniques, using sprites and how to position objects.

Some of the best ways to learn HTML design are to take a web page that you like and try to re-create it without looking at the styling. Once you have a good approximation, see where you differed from the original.

There are three ways to include Javascript files on a website. You can use scripts placed in the head element, scripts placed within the body element or you can include an external file.

The <script> tag is used to contain the Javascript code when you are placing it within the web page.

Example of code within the <head> tag:

 <!DOCTYPE html>
<html>
<head>
<title>Javascript in Head tag</script>
<script language="javascript" type="text/javascript" >
     document.write("Hello, World!");
</script>
</head>
<body>
</body>
</html>

When you are expecting to output directly into the page it is helpful to place the script in the
<body> tag.

<!DOCTYPE html>
<html>
<head>
<title>Javascript in Body tag</script>
<script>

</script>
</head>
<body>
<script language="javascript" type="text/javascript" >
  document.write("Hello, World!");
</script>
</body>
</html>

And when you are including an external script like jQuery or a custom script, you will use an
tag in the head with a src identifier to specify the file. Where you might reference the file in an onload or some other scripting within the page.

<!DOCTYPE html>
<html>
<head>
<title>Javascript in External file</script>
<script language="javascript" type="text/javascript" src="somefile.js" > </script>
</head>
<body onload="callsomefile();" >
</body>
</html>

There is also the possibility that someone will have turned off Javascript and this is where the <noscript> tag can be used to either display the site designed with no scripting involved or inform the user that they cannot use the site unless Javascript is enabled.

Tags: html, Javascript, Web

I was generating some html based e-mails and due to some changes I made in the text, my mail stopped being sent. I found that it was not liking some of the characters that were being placed in my generated emails. I tried some of the standard replacemnt methods, but found that the XML file was the issue. The Greater than(>) and less than (<) and the Amersand(&) and the apostrophe(') and the quote(") all have special meaning to XML and can cause these issues. Once I replaced the following characters in my email variable, my e-mails began to flow again. Here is a table of the characters and their XML representations that can be used for replacement:

This is by no means the complete list of replacements. This is only that characters that were needed by the calls to Java Mail that my program was using.

Tags: html, Web Design, XML

There are two ways to include an external stylesheet.  Using a <link> tag in the <head> section of your web page or using the @import tag in a <style> section.  The @import tag can also be placed inside a CSS file to include other CSS files.

Example of an externally linked stylesheet named anyname.css

<head>

<link rel="stylesheet" type="text/css" name="anyname.css" href="url" media="all">

</head>

The name field is the filename and can be set to any path that is available to your Web Server. The media type can be specified in the link tag.

An example of a @import statement to include a CSS file:

<style>

@import('anyfile.css');

</style>

You can also specify the type of stylesheet with the @import statement:

@import('anyfile') screen;

@import('anyfile') print;

The @import statement is not understood by many older browsers, Netscape 4 ignores them completely and Internet Explorer 4 requires you to use parenthesis, even though they are optional.  Luckily, there should be very few people still using these browsers and this is a useful technique to not include features that would not work in those browsers.

The @import directives must be the first items in your CSS. Even comments should not appear before these statements.

Internet Explorer versions 4-7 have the limitation that they do not like specifying the type on the @import line.  I have not researched if this is the case with versions 8 and above.

Tags: CSS, html