Using Fields in Text Objects in Crystal Reports

Feb 12, 2019Dec 14, 2018 Seth Bonder Leave a comment

Fields, in Crystal Reports, are the way we bring data from a source into a report. Sometimes, we need to combine the data with text even more directly than placing them side by side.

The technique we can use is similar to creating a mail merge with fields in a couple of other programs. First, we pull up the basic data of a report. Choose the data source and table(s), deal with links between them if necessary, and OK out of the Database Expert.

Next, create the text object. One thing to be careful of is making the text object large enough to accommodate the “sizes” of the data in the fields. For addresses, it’s usually not a problem, but because descriptions and bios can be lengthy, previewing the data can help. (Right-click the fields in Design view and selecting Browse Field Data.)

When we create the text within the object, another thing to be careful about is proper punctuation and spacing. Just as in word processing, lack of attention to this can make the report look shabby and unprofessional.

Dragging the fields into the text object is not hard at all; it simply requires a little practice to make sure we let go the mouse button at just the right spot. Make sure of where your pointer is. If you miss, just undo or delete the field and try again.

Don’t be surprised if you need to go back and forth between Design and Preview a few times to do some fine-tuning of the fields/text object situation. This is quite normal. In addition, remember that the fields within the text object(s) can and should be formatted to match the text around them. (Selecting by dragging across them, or double-clicking them, will do it.) Otherwise, again, the final result won’t be professional-looking. Mismatches are visually inconsistent, and can actually make the document harder to read.

How to Loop Through an Array in JavaScript

Feb 11, 2019Jan 29, 2019 Dave Kidd Leave a comment

In JavaScript, there’s a helpful way to access every item that’s in an Array and it’s called a for in loop. It has the functionality, by default to go through and only run however many times there are items in the array. To take a look at this we can set up an array like so:

var ninjaTurtles = [“Leo”, “Ralph”, “Don”, “Mikey”];

Now we could use a for loop and go through it like so:

for(i=0;i<ninjaTurtles.length;i++){
document.write(ninjaTurtles[i]+”<br>”);
}

This works and it would print out all their names to the page, but this way requires that we use the length property, that we set up a beginning and end value and then have to use i++ to make sure it counts correctly. There’s just a lot to it. Well, there’s a simpler, more concise way of doing it and that is using the for in loop. Here is what it would look like:

for(i in ninjaTurtles){
document.write(ninjaTurtles[i]+”<br>”);
}

As you can see, the loop is a lot simpler and easier to read. Instead of having three parts you only have one simple statement. This loop inherently knows how many times to run. It will run one time for each item that is contained in the array. You don’t have to specifically tell it a number of times to loop. Because of that, there is also no need to tell it when to end, where to start, or what to do each time the loop completes. It’s just easier to read and write.

The variable i works the same way as it did in the previous example, it will contain the index value or position of each item in the array. The first time it runs, i will be equal to 0. The next time i will be 1 and so on. For in loops are great and it makes coding loops a little more simple which I’m sure we all appreciate. If you want to learn more be sure to check out our web design/development courses. Have an amazing day!

How to Create an Action in Adobe Photoshop

Feb 5, 2019Dec 7, 2018 Seth Bonder Leave a comment

An Action is the Photoshop equivalent of a macro in programs like Word and Access. It allows consistent repetition of a sequence of steps. So it’s easier to do the same thing in different files, if one wants. As usual, the thing which helps most is rehearsal—practice a little to avoid frustration when you record the real thing.

(I’ll apply a layer effect here, the Drop Shadow, for demonstration.)

After opening your file and setting up whatever elements we want to affect, we bring up the Actions panel and click the New Action button.

We enter a name, a keyboard shortcut if desired, and a color (optional but sometimes helpful). When we OK out of that box, we record any mouse clicks or keystrokes from there on.

So my double-click of the text layer, making various adjustments to the Drop Shadow after activating, and subsequent OK are all written down as performed. The recorder waits till I OK out to jot down the final numbers. When finished, I click the Stop Recording button (left of Record), and the action is ready.

To apply the same attributes to another item (not necessarily text), I select the layer in question, click the action, and hit the Play button at the bottom of the Actions panel. About the only hard rule on using layer-based actions like this is, they can’t be applied to a Background layer. But that’s a particular of the action I’m recording. A non-layer-specific action can work pretty much anywhere in a file.

One also wants to remember to select or otherwise tell the action what it’s going to work on.

The not-immediately-obvious advantages are:

First, in the Actions panel, any step which involves a dialog box has a clickable icon to make the action bring the box(es) up during the run, to allow user changes. Which means they can be flexible.

Second, actions can go in folders, and we can save them as separate documents. They can then be opened in other files, or sent to other PShop users, or kept as backups. Portability!

And third, though it’s not a common use for actions, they can apply company colors or fonts to a document. Which means actions can be helpful in maintaining product branding standards, if needed.

JQuery Toggle Drop Down Effect

Feb 4, 2019Jan 28, 2019 Dave Kidd Leave a comment

jQuery is a pretty amazing JavaScript library. It allows you to do things with JavaScript that were, back in the day, pretty tough to pull off. Today I want to show you how to do a simple toggle drop down effect using jQuery. The first thing you’ll want to do is create a basic HTML page like so:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Toggle Drop Down</title>
<meta charset=”utf-8″>
</head>
<body>
<p>
<span id=”s1″>
Click to slide panel up and down
</span>
</p>
<div id=”d1″>
This part slides up and down
</div>
</body>
</html>

This sets up a span and div tag that will use their ids to receive the user’s click and then respond to it. Next thing we want to do is add the styling that will allow us to see this in action. So add a style tag and that style block inside the head tag:

<style>
#d1, #s1 {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#d1 {
margin: 10px;
padding: 25px;
width: 150px;
height: 150px;
box-shadow:5px 5px 10px #ccc;
}
</style>

Most of this is aesthetic stuff. It just gives the span and div tags dimensions, background colors, aligns the text to the center, gives a border, and things of that nature. Then to the main part of this tutorial. Add this jQuery right under the closing style tag:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“#s1”).click(function(){
$(“#d1”).slideToggle(“slow”);
});
});
</script>

The first line imports the jQuery library so you can use it.

The document ready statement tells the code contained in the following function to run after the whole page has loaded

The next line says when the tag with the id of s1 is clicked it will run the following function

The function tells the tag with the id of d1 to do a slideToggle() method. This method is a built-in jQuery command that makes the div slide up and down revealing and hiding its contents. All of that is just built into the jQuery language, you don’t have to manually code the animation. When all is said and done, the whole project should look like this:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Toggle Drop Down</title>
<meta charset=”utf-8″>
<style>
#d1, #s1 {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#d1 {
margin: 10px;
padding: 25px;
width: 150px;
height: 150px;
box-shadow:5px 5px 10px #ccc;
}
</style>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“#s1”).click(function(){
$(“#d1”).slideToggle(“slow”);
});
});
</script>
</head>
<body>
<p>
<span id=”s1″>
Click to slide panel up and down
</span>
</p>
<div id=”d1″>
This part slides up and down
</div>
</body>
</html>

And there you have it, a cool way to show and hide content on a webpage. If you’d like to learn more be sure to check out all of our web design/development training courses. Have an amazing day!

How to Use Quick Mask Mode in Photoshop

Jan 29, 2019Dec 6, 2018 Seth Bonder Leave a comment

Of all the “beyond-the-basics” tools in Photoshop, the Quick Mask feature is probably one of the most nitpicky to understand. But it can provide the user with a fairly easy method of doing something complex, namely, making selections. So it’s worth the time.

It’s normally easiest to start by making a partial selection of the area. Using a conventional method such as clicking with the Magic Wand will work fine. Then, going over to the Tools panel/Toolbox, we simply click the button near the bottom for Quick Mask mode.

Now, the trick here is knowing what Quick Mask mode does, and how. It turns the selection into a mask—that is, a colored area which tells us what parts we’ve selected and which we haven’t. The colored part, which is red by default, is NOT selected. Anything not covered by the red overlay IS selected. And the mask (for non-selected) is partly transparent so we can edit the selection and see what we’re doing.

The next point is how to edit the mask. Once we’re in QM mode, we switch to the Brush tool. The brush should have a 100% hardness, and be about half the size of the areas we’re selecting (give or take).

The critical thing now is which paint color we use. We should set the colors to default (black/white), and remember that the FOREGROUND color is the one the tool is looking at. If we paint with black, we MASK (or DE-select). If we paint with white (we can use the Switch Foreground/Background button), we UNMASK (or SELECT). A quick way to remember which is which would be “Black Blocks” (i.e. masks or de-selects).

When we’ve made the edits we want, we go back to the Tools panel, click the Quick Mask mode button again, and return to Standard mode. We again see the selection marquee, and can proceed from there.

The main question most people ask, if they know the regular selection tools, is Why mess with QM mode? The main answer is that selection tools can be a little fickle. When we click with the Magic Wand, especially, the Tolerance can affect what we select. Quick Mask mode and the painting tools are a little slower, but more precise. Especially if we zoom in to work.

How to use JavaScript Regular Expressions

Jan 28, 2019Feb 9, 2019 Dave Kidd Leave a comment

Video of regular expressions with phone numbers:

This tutorial is going to look at a JavaScript regular expression example using zip codes and break down all the pieces. The problem I’ve found with regular expressions is they aren’t something you can just look at and understand right away. They use their own syntax that isn’t easy to decipher so that is what makes them hard to understand.

Let’s take a look at an example of one so they won’t be as intimidating. Let’s say we want to use a regular expression to make sure that a zip code is typed correctly. We will check for the regular zip code of 5 digits and also the format where it could be 5 digits followed by a dash or space and then followed by 4 more numbers. The first thing we need to do is set up a variable that holds the string we are evaluating:

var zip = “78998”;

Next, we will set up the pattern that it compare against and save that into a variable as well:

var pattern = /^\d{5}(-?\s?\d{4})?$/;

This looks crazy right? Well, if we break it down piece by piece, it’s really not too bad. So let’s do just that:

The first part of the patter is a / and that means the pattern is beginning. You need to define where the pattern starts and ends. You do that with slashes like so: / pattern /
The ^ means it has to start with whatever follows in the pattern. When combined with a $, which you see at the end of the pattern, that sets up the number of items that can be in the pattern. For example, if I had the pattern of /^the$/ that would only match the word “the” and nothing else. It has to be three letters and those three letters have to be t, h, e spelling out “the”.
The next part \d{5} means 5 digits. The \d means a number and the {5} means five of them in a row. So ^\d{5} means the zip code must start with five numbers.
The next part (-?\s?\d{4})? is the most complex of the group. The parenthesis at the beginning and end groups all of these together and the ? mark at the end means the whole group is optional, they don’t have to appear in the zip code for a match. Inside the parenthesis, we have a -? which means the dash individually is optional, \s? means the space is optional as well, and \d{4} means the space or dash would be followed by four more digits. And the ? at the end means the whole group as whole isn’t required either.
The last part is the $ sign which works with the ^ to say this zip code has to be 5 digits total or 9 digits total with an optional dash and/or space. No more, no less.

Once the pattern is set up, all we need to do is apply that pattern to the zip code variable and see if it passes the test or not. We can use the “test” method to do that like so:

alert(pattern.test(zip));

If it passes the comparison, then this would alert “true” and if it doesn’t pass the test it would alert “false”. The final code would look something like this:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Zip Code Regular Expression</title>
</head>
<body>
<script>
var zip = “78998”;
var pattern = /^\d{5}(-?\s?\d{4})?$/;
alert(pattern.test(zip));
</script>
</body>
</html>

Try changing the value of zip to valid and invalid zip codes and see if it works. Hopefully, this helps demystify regular expressions a little bit. There is a lot more to them which we go over in our web development courses. Feel free to check them out if you want to learn more. Have an amazing day!

Using the Gradients in Photoshop—Additional Info

Jan 22, 2019Dec 6, 2018 Seth Bonder Leave a comment

In an earlier post, I went through the basics of creating gradients in Photoshop. In this one, I want to mention a couple more details which might be helpful in their use.

There are five patterns, or appearances, which gradients can follow, shown to the right of the Gradient Editor in the Options panel. The one we use most, Linear, makes the color pattern appear as bars, or bands, in the selected area. But the others are potentially quite useful, and not just for decor. One selects the gradient and pattern, and drags from point A to point B, just as with Linear.

The Radial gradient is a “sunburst”, the leftmost color in the center and moving outward in rings. This has been used with several real-life concepts, e.g. distances from the center of a city for travel purposes.

The Angle gradient uses the direction of the drag to create a “wheel” effect. The starting color is on one side of the drag line, shading around in a circle to the ending color on the other side of the same line. This can create an object-lit-on-one-side effect by having black and white as the starting and ending colors. It’s often employed as sheer decoration. Of all the gradients, some people consider it the prettiest.

The Reflected gradient can do something interesting: Using metallic colors with it creates the illusion of specular, or pinpoint, highlights on metal. The “reflected” part indicates that the drag start point becomes a “mirror”. It becomes two “reversed” gradients, in bands centering on the start of the drag, a kind of “double linear” gradient. (One must therefore allow about twice the width of the drag for full visibility.)

The Diamond gradient makes the direction of the drag become one of the four points of a diamond version of the Radial gradient. Distance of drag works similarly as Linear. The start and end of the drag mark the extent of the color, and continue the last color out as far as possible.

One other element which occasionally comes into play is the Reverse checkbox in the Options. It reverses the direction of the gradients—start color and end color will flip around.

And don’t forget there’s an Opacity control in the Options, too.

How to autoplay a video using HTML 5 in Chrome

Jan 21, 2019Jan 17, 2019 Dave Kidd Leave a comment

Chrome is a great browser but sometimes it has a lot of security features that end up conflicting with your code and what you’re trying to do. For example, they added a feature that won’t play a video on a website if the sound is enabled. It will block it because it doesn’t want the user hearing an unwanted video. Using the HTML5 video tag, if I were to add a video to a page that has the controls visible, autoplays, and loops the code would look like this:

<video controls autoplay loop>
<source src=”movie.mp4″ type=”video/mp4″>
</video>

The issue with this is Chrome would not play the video because it hasn’t been muted. The sound would start to play and Chrome doesn’t want that. So the solution is pretty simple, you have to mute the video and then, only then, will Chrome play it normally when the page loads. To mute the video add a “muted” attribute like so:

<video controls autoplay loop muted>
<source src=”movie.mp4″ type=”video/mp4″>
</video>

Now Chrome’s security feature will be fulfilled and the video should play as normal and if the user wants to hear the video, they’ll have to unmute it. If you’d like to learn more, be sure to check out our web design/development courses. Have a great day!

How to apply CSS to XML

Jan 17, 2019 Dave Kidd Leave a comment

Sometimes there will be times when you’ll need to take a body of XML information and apply CSS styles to it. Luckily, it’s not too hard to do. Let’s say you have an XML document that looks like this (the content about the movie is not accurate):

<?xml version=”1.0″ encoding=”utf-8″ standalone=”yes”?>
<movie>
<title>Monty Python and the Holy Grail</title>
<rating>PG-13</rating>
<reviews>
<rotten>100%</rotten>
<metacritic>100%</metacritic>
</reviews>
<director compensation=”$100,000,000″>Some really funny guy</director>
<boxoffice>$1,000,000,000,000</boxoffice>
</movie>

If I wanted to style the title, rating, director, and the other tags I would need to apply CSS to this file. To do that you would need this line of code:

<?xml-stylesheet type=”text/css” href=”somecss.css”?>

You would put this under the first line of the XML making it look like this:

<?xml version=”1.0″ encoding=”utf-8″ standalone=”yes”?>
<?xml-stylesheet type=”text/css” href=”somecss.css”?>
<movie>
<title>Monty Python and the Holy Grail</title>
<rating>PG-13</rating>
<reviews>
<rotten>100%</rotten>
<metacritic>100%</metacritic>
</reviews>
<director compensation=”$100,000,000″>Some really funny guy</director>
<boxoffice>$1,000,000,000,000</boxoffice>
</movie>

This is saying, use and apply the CSS file called somecss.css to the XML page. With the way this code is written, you’ll need to make sure that the CSS file is in the exact same spot as your XML file. Once you’ve done this, the two files are connected and you can test to make sure it works by putting some styles in the somecss.css file like this:

title{
color:red;
font-size:22px;
text-decoration:underline;
}

If you see the content in the title tags change, you did it right. If you’d like to learn more be sure to check out our web design/development courses. Have an amazing day!

How to Create an Adobe Photoshop Gradient

Jan 15, 2019Nov 26, 2018 Seth Bonder Leave a comment

Setting up a Photoshop gradient works a little differently from its cousin, Illustrator. The concept is the same, but the tool involved, and how we create and fine-tune a gradient, changes.

The first thing to do is select the Gradient tool in the Tools panel/Toolbox. Looking up at the Options panel, we find the dropdown with the choice of gradients on the left. Usually there are a dozen to sixteen presets; clicking one will select it. But if we want to create one, we can click the gradient already visible to bring up the Gradient Editor.

The next thing we frequently do is make changes to whichever gradient we see. The house shapes under the horizontal strip (the gradient ramp) show what colors are in the gradient, and we can add more by clicking where we want them. We can also move them left and right as needed. A couple of dozen seems to be the practical limit. Double-clicking any of these (color stops) brings up the color picker, which lets us change the color as we like. The diamond shapes between the color stops tell us where the halfway point is for any two colors, and can be moved as well.

The upside-down house shapes above the Photoshop gradient ramp (no, they’re not from Australia!) are transparency stops. One can therefore make parts of the gradient fade out as much as one likes. Clicking once on either a color stop or a transparency stop makes its “roof” black. Then it’s selected and allows the controls at the bottom of the box to modify it. Even clicking the diamond shapes allows us to use the percentage controls at bottom to position them.

Finally, when we’ve got the arrangement we like, we can type a name in the space at center, click New, and go ahead and use it. From here, it’s straightforward—select the area we want to fill with the gradient, click the Photoshop Gradient tool, and drag in the space. Length of drag tells the program how short or long the color transition should be. Direction of the drag gives the angle. And voilà. 😊

How to fade in content using HTML, CSS, and JavaScript

Jan 13, 2019Jan 17, 2019 Dave Kidd Leave a comment

Sometimes we want our content to make a cool entrance on a webpage. Luckily, using CSS and HTML, we can do just that by easily fading something onto the page. First thing we’ll need to do is create a HTML page like so:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Select Tag</title
</head>
<body>
<div id=”fademe”>Fade me in!</div>
</body>
</html>

This is your typical HTML page that has a div with an id of fademe. We will be fading the div in later with the text “Fade me in!”. The first thing we’ll need to do is create the CSS inside the head tag that will make the text invisible so we can start from not seeing it to seeing it. Add the following inside the head tag:

<style>
#fademe{
opacity:0;
transition:2s;
}
</style>

This selects the div using the #fademe selector and makes it invisible with the opacity set to 0. The transition property says if any of the properties that have already been set are changed, it will animate that change for 2 seconds if it can. Well, we need to change the opacity from 0 to 1 and we’ll need to use JavaScript to do that. We will use window.load to run the code after the page has loaded. Right before the closing body tag in the HTML, we will put this:

<script>
window.onload = function(){
document.getElementById(“fademe”).style.opacity = 1;
}
</script>

This says when the window loads it will run a function. A function is a group of code that runs when we tell it to. When the function runs it will select the element (or tag) with the ID of fademe (the div) and then change the opacity style to 1. When all is said and done the completed project will look like this:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Select Tag</title>
<style>
#fademe{
opacity:0;
transition:2s;
}
</style>
</head>
<body>
<div id=”fademe”>Fade me in!</div>
<script>
window.onload = function(){
document.getElementById(“fademe”).style.opacity = 1;
}
</script>
</body>
</html>

When this is run, you will see the div, with the text in it, fade onto the page in 2 seconds. If you want to learn more be sure to check out our web design/development courses. Have an amazing day!

Create unselectable instructions in a HTML select drop down menu

Jan 13, 2019Jan 17, 2019 Dave Kidd Leave a comment

Today we are talking about how to create unselectable instructions in a HTML select drop down menu. In HTML, when you create a drop down menu using the <select> tag, there will be times when you’ll want to give the user instructions inside the menu itself but not allow them to select the instruction option. For example let’s say we want to give the user the ability to select what shipping they want for an item they are ordering. Our select tag would look something like this:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Select Tag</title>
</head>
<body>
<select>
<option>USPS</option>
<option>UPS</option>
<option>FedEx</option>
</select>
</body>
</html>

This works fine but when the dropdown menu shows up in the browser it looks like this:

There are no instructions so the user may not know what the purpose of these options is. I don’t want to put the instructions as text on the page since I don’t like how that looks, so I will add an option tag that will have the instructions in it with a couple of attributes that will accomplish what I want. The select tag options would end up looking like this:

<select>
<option disabled selected hidden>Choose Shipping</option>
<option>USPS</option>
<option>UPS</option>
<option>FedEx</option>
</select>

You can see that I added another option tag with the disabled, selected, and hidden attributes which transform the dropdown to look like this:

The instructions “Choose Shipping” is there but the attributes change how it functions. The disabled attribute makes it so the user can’t select it, selected makes the browser select it by default when the page loads, and hidden makes it so it doesn’t show up with the other options in the drop-down menu. This helps for a cleaner design in the HTML forms and allows everything that is related to the drop down select menu to be bundled together. If you want to learn more, check out our web design/development courses. Have an amazing day!

Using the Section Break in Microsoft Word

Jan 8, 2019Nov 26, 2018 Seth Bonder Leave a comment

When putting together a complex document in Word, a section break can help us put together documents such as a book or manual, where one sometimes has to create multiple headers and footers, or allow for single columns, then multiple, then single again. A section break is like a fence between two farms—it tells the user “there’s a border and a change here”.

Inserting a section break is very easy. Click at the end of whichever piece of text is the “previous” layout, arrangement, or whatever, then go to the Page Layout tab, Page Setup group, and click Breaks. There, we have a choice of four types of section break. The most commonly used one is Continuous, meaning there’ll be no visible break except what we decide on—the new section will start on the same page.

Once we insert the break, we can do several things after it. A frequent use is to change the number of columns in the new section. We click anywhere after the section break, go again to the Page Layout tab, Page Setup group, and click Columns. If we want a default number, say two, we just click on it. If we want something a little more customized, we click More Columns at the bottom of the menu, and decide on width, spacing, line between, and so on. Then click OK to get out, and there we are.

(The next bit here will refer to continuous section breaks, the touchiest kind, first.)

When it comes to headers and footers, we have to be a little more careful where we click once the section breaks are in place, but we can turn on the Show/Hide feature in the Home tab, Paragraph group to help. (I always do—makes life easy. Already did here, so you folks can see what I’m doing.)

We then simply insert section breaks where needed. If we don’t do this, the program can’t do the rest. Once the breaks are in place, whichever page FOLLOWS the break(s) will show the next section number. So if one inserts a continuous section break on page 2, the next section header/footer will start on page 3. Then, to write a book with chapters whose starting places were based on continuous breaks, we’d be set. The other kinds of break are a little more predictable, as their names tell us what they’ll do. A next-page section break would, in fact, be better for chapter break-points. We could insert one of these at the end of a chapter and immediately start the next.

One last thing: Leave the Show/Hide feature on to remove breaks. Click at the beginning of the break, hit the Delete key (not Backspace—here you want to remove something after the insertion point), and it’s gone. No trouble.

Camtasia SmartFocus Editing Dimensions Error Fix

Jan 1, 2019Jan 17, 2019 Dave Kidd Leave a comment

In Camtasia 9, there is a feature that has been around for a while called “Smart Focus.” What it tries to do is read the video and zoom in and out when Camtasia feels it’s necessary. For example, let’s say you were making a screen recording about creating a new folder on your desktop. When you right click on the screen and the menu pops up, Camtasia’s SmartFocus would hopefully recognize that as a time where it needs to zoom in on the video so the user could more easily see what’s on the screen.

It’s not perfect but if you don’t want to put in all the zooms yourself, it’s a great way to save time. To find it, open up Camtasia 9, go to Animations, and then the Animations tab, and you’ll see it in the lower right-hand corner:

Once you’ve found it and you try and apply it to a clip, you will see this error:

It says, “To apply SmartFocus animations, the editing dimensions need to be smaller than the dimensions of the following media: insertMediaHere Would you like to change your Editing Dimensions?”

The way SmartFocus works is you have to record in a higher resolution, and then scale down to be able to use the feature. For example, you would need to record in 1080p and then change the Camtasia file to a 720p project then you’d be able to add the SmartFocus effect. So in this example, you’d click yes on the error window and then change your project to 720p and hit apply like this:

Now, if you recorded in 720p and needed to make it smaller than that, well, I wouldn’t recommend doing that. Your video’s quality would take quite the hit and the video would look pretty bad. Now before you even go using this feature I would suggest reading this blog post by TechSmith where they basically admit that SmartFocus is broken and that they are trying to figure out what to do with it. All I’m saying here is proceed with caution and good luck!

If you want to learn more check our Camtasia training and sign up! Have an amazing day!

How to Create a Gradient in Adobe Illustrator

Jan 1, 2019Nov 21, 2018 Seth Bonder Leave a comment

The recent post on meshes in Illustrator kind of leads into a related subject, namely the gradient. Sometimes meshes aren’t necessary, or a little too complicated to set up, but there’s still a need for (at least simulated) shading, and gradients can provide some of this. They take a few steps, but they’re worth it.

(I will mention before I start that the process is a little different than in Photoshop; the nature of the use of gradients is different in each program.)

Once the file is open, we select the shape we want to put the gradient in, bring up the panel (Window menu–>Gradient), and click the basic gradient to apply it. We can select either Linear (basically bands of color) or Radial (sunburst/circles of color) at the top right of the panel, but the main part of the process is the same from there.

Editing the gradient involves the horizontal strip near the bottom of the panel, called the gradient ramp. The house-like shapes below it are color stops; they tell us what colors are in it. The diamonds above are color midpoints, which show where the halfway mark is between two colors. Both of these can be moved, though the midpoints can’t be removed as they automatically show between any pair of colors on the ramp.

To add colors, we click anywhere immediately below the gradient ramp to add another stop. Double-clicking on the new stop brings up the color controls, where we can use an existing swatch, or create a new color from the sliders. We can even choose other color systems from the dropdown menu at the top right of the controls. Editing existing colors works exactly the same way. (Tried finding out how many colors I could put in. It got boring around fifty….) Then, if necessary, drag the midpoints to adjust where colors shade from one to another.

Removing colors is easy—just drag the color stop straight down about a half inch, and let go.

Usually, once we set up the gradient colors, we change the angle if we want. The control is almost dead center, and allows use of the dropdown or typing the angle we want. It’s even possible to adjust the opacity of a color stop, using the control at bottom. According to my students, this is somewhat less common, but certainly invites experiment. Finally, the Location control positions the color stop precisely, if needed.

How to Create a Theme in Microsoft PowerPoint

Dec 25, 2018Nov 21, 2018 Seth Bonder Leave a comment

In PowerPoint, themes are an important part of the presentation. Even if nobody directly notices them, they are as necessary to the slide deck as the foundation for a house. Consistent appearance throughout the show improves understandability, and its professional look. Creating a theme is fairly easy; simply build the pieces and put them together.

The first part is to set up the fonts and colors needed. On the Design tab, looking to the right side of the Themes group, are dropdowns for Colors, Fonts, and Effects. We can’t edit the Effects, but the first two relate to many distinct business themes, so we’ll do those here.

Selecting the fonts is pretty simple. Click the Fonts dropdown, select Create New Theme Fonts at bottom, and make the choices. One rule of thumb, barring anything else, is to use a sans-serif font for titles and a serif font for body text. In PowerPoint, one often uses sans-serif for both since the letter shapes are easier to read in slides. But it’s okay to experiment. Once the fonts are set, give the new combination a name, and click Save.

Setting up the colors for themes takes a little more work, since there are a dozen overall. Start by clicking the Colors dropdown and, at the bottom, select Create New Theme Colors. Unless your company has official colors, you might have to experiment a little. The colors for the Text/Background choices, should be related—shades of the same color for each pair, or black and white. For the others, there are many books and articles about color theory, but a general rule that seems to work is to keep to shades of the same two or three colors at most, if possible. (The show shouldn’t look like a circus.) One exception—if you’re creating a lengthy show involving several sections (or departments at work), changing the colors for each section can give a little variety.

If you company does have official colors (“product branding” is the term for this), you can go to the appropriate color dropdown, click More Colors, then Custom, and enter the RGB or HSL numbers for the color in question. Again, using variations of these is advisable for the accent colors. Think of how some uniforms or dressy outfits have one or two main colors, and you’ve got the idea.

After saving under a suitable name, the creation of the theme itself is no harder. One has to apply the colors and fonts just created. Then, just left of the Colors, Fonts, and Effects dropdowns, click the “More” button, slide to the bottom of the list of themes, and select Save Current Theme.

We then find out something pretty cool—themes can be saved as documents, which can be emailed or otherwise sent to other people! So someone can develop a theme, send it to the IT department, and have them “push” it onto everyone’s computer who needs it. And this means themes can be consistent throughout a company, which is always good in business.

Microsoft Access Keyboard Shortcuts

Dec 24, 2018Dec 24, 2018 admin Leave a comment

SkillForge SkillSheet

Microsoft Access 2010/13/16 Keyboard Shortcuts

Click here to download the PDF version.

Frequently Used Shortcuts

In order to…	Press
Select the active tab of the ribbon and activate KeyTips	Alt or F10 (to move to a different tab, use KeyTips or the arrow keys)
Open the Home tab	Alt+H
Open the Tell me box on the ribbon	Alt+Q, then enter the search term
Display the shortcut menu for the selected item	Shift+F10
Move the focus to a different pane of the window	F6
Open an existing database	Ctrl+O or Ctrl+F12
Show or hide the Navigation Pane	F11
Show or hide a property sheet	F4
Switch between Edit mode (with insertion point displayed) and Navigation mode in a datasheet or design view	F2
Switch to Form view from form Design view	F5
Move to the next or previous field in a Datasheet view	The Tab key or Shift+Tab
Go to a specific record in a Datasheet view	F5 (then, in the record number box, type the record number and press Enter)
Open the Print dialog box from Print (for datasheets, forms, and reports)	Ctrl+P
Open the Page Setup dialog box (for forms and reports)	S
Zoom in or out on a part of the page	Z
Open the Find tab in the Find and Replace dialog box in the Datasheet view or Form view	Ctrl+F
Open the Replace tab in the Find and Replace dialog box in the Datasheet view or Form view	Ctrl+H
Add a new record in Datasheet view or Form view	Ctrl+Plus Sign (+)
Open the Help window	F1
Exit Access	Alt+F4

Open and Save Databases

In order to…	Press
Open a new database	Ctrl+N
Open an existing database	Ctrl+O or Ctrl+F12
Open the selected folder or file	Enter
Open the folder one level above the selected folder	Backspace
Delete the selected folder or file	Delete
Display a shortcut menu for a selected item such as a folder or file	Shift+F10
Move forward through options	Tab
Move backward through options	Shift+Tab
Open the Look in list	F4 or Alt+I
Save a database object	Ctrl+S or Shift+F12
Open the Save As dialog box	F12 or Alt+F+S

Navigate in the Access Workspace

In order to…	Press
Show or hide the Navigation Pane	F11
Go to the Navigation PaneSearch box (if the focus is already on the Navigation Pane)	Ctrl+F
Switch to the next or previous pane in the workspace (You might need to press F6 more than once; if pressing F6 doesn’t display the task pane you want, press Alt to move the focus on the ribbon and then press Ctrl+Tab to move to the task pane)	F6 or Shift+F6
Switch to the next or previous database window	Ctrl+F6 or Ctrl+Shift+F6
Restore the selected minimized window when all windows are minimized	Enter
Turn on Resize mode for the active window when it is not maximized	Ctrl+F8 (press arrow keys to resize window, and then, to apply new size, press Enter)
Close the active database window	Ctrl+W or Ctrl+F4
Switch between the Visual Basic Editor and the previous active window	Alt+F11
Maximize or restore a selected window	Ctrl+F10

Function Keys for Fields/Grids/Text Boxes

Key	Function
F2	Toggles between displaying the caret for editing and selecting the entire field.
Shift+F2	Opens the Zoom box to make typing expressions and other text easier.
F4	Opens a drop-down combo list or list box.
Shift+F4	Finds the next occurrence of a match of the text typed in the Find or Replace dialog, if the dialog is closed.
F5	Moves the caret to the record-number box. Type the number of the record that you want to display.
F6	In Table Design view, cycles between upper and lower parts of the window. In Form Design view, cycles through the header, body (detail section), and footer.
F7	Starts the spelling checker.
F8	Turns on extend mode. Press F8 again to extend the selection to a word, the entire field, the whole record, and then all records.
Shift+F8	Reverses the F8 selection process.
Ctrl+F	Opens the Find and Replace dialog with the Find page active.
Ctrl+H	Opens the Find and Replace dialog with the Replace page active.
Ctrl++ (plus sign)	Adds a new record to the current table or query, if the table or query is updatable.
Shift+Enter	Saves changes to the active record in the table.
Esc	Undoes changes in the current record or field. By pressing Esc twice, you can undo changes in the current field and record. Also cancels extend mode.

Microsoft Excel Keyboard Shortcuts

Dec 24, 2018 Seth Bonder Leave a comment

SkillForge SkillSheet

Microsoft Excel 2010/13/16 Keyboard Shortcuts

Click here to download the PDF version.

Frequently Used Shortcuts

In order to…	Press
Close a spreadsheet	Ctrl+W
Open a spreadsheet	Ctrl+O
Save a spreadsheet	Ctrl+S
Copy	Ctrl+C
Paste	Ctrl+V
Undo	Ctrl+Z
Remove cell contents	Delete key
Choose a fill color	Alt+H, H
Cut	Ctrl+X
Bold	Ctrl+B
Center align cell contents	Alt+H, A, then C
Format a cell from context menu	Shift+F10 or Context key
Add borders	Alt+H, B
Delete column	Alt+H, D, then C

The Function Keys—What They Do

Key	Description
F1	Displays the Excel Help task pane. Ctrl+F1 displays or hides the ribbon. Alt+F1 creates an embedded chart of the data in the current range. Alt+Shift+F1 inserts a new worksheet.
F2	Edit the active cell and put the insertion point at the end of its contents. Or, if editing is turned off for the cell, move the insertion point into the formula bar. If editing a formula, toggle Point mode off or on so you can use arrow keys to create a reference. Shift+F2 adds or edits a cell comment. Ctrl+F2 displays the print preview area on the Print tab in the Backstage view.
F3	Displays the Paste Name dialog box. Available only if names have been defined in the workbook (Formulas tab, Defined Names group, Define Name). Shift+F3 displays the Insert Function dialog box.
F4	Repeats the last command or action, if possible. When a cell reference or range is selected in a formula, F4 cycles through all the various combinations of absolute and relative references. Ctrl+F4 closes the selected workbook window. Alt+F4 closes Excel.
F5	Displays the Go To dialog box. Ctrl+F5 restores the window size of the selected workbook window.
F6	Switches between the worksheet, ribbon, task pane, and Zoom controls. In a worksheet that has been split (View menu, Manage This Window, Freeze Panes, Split Window command), F6 includes the split panes when switching between panes and the ribbon area. Shift+F6 switches between the worksheet, Zoom controls, task pane, and ribbon. Ctrl+F6 switches to the next workbook window when more than one workbook window is open.
F7	Displays the Spelling dialog box to check spelling in the active worksheet or selected range. Ctrl+F7 performs the Move command on the workbook window when it is not maximized. Use the arrow keys to move the window, and when finished press Enter, or Esc to cancel.
F8	Turns extend mode on or off. In extend mode, Extended Selection appears in the status line, and the arrow keys extend the selection. Shift+F8 enables you to add a nonadjacent cell or range to a selection of cells by using the arrow keys. Ctrl+F8 performs the Size command (on the Control menu for the workbook window) when a workbook is not maximized. Alt+F8 displays the Macro dialog box to create, run, edit, or delete a macro.
F9	Calculates all worksheets in all open workbooks. Shift+F9 calculates the active worksheet. Ctrl+Alt+F9 calculates all worksheets in all open workbooks, regardless of whether they have changed since the last calculation. Ctrl+Alt+Shift+F9 rechecks dependent formulas, and then calculates all cells in all open workbooks, including cells not marked as needing to be calculated. Ctrl+F9 minimizes a workbook window to an icon.
F10	Turns key tips on or off. (Pressing Alt does the same thing.) Shift+F10 displays the shortcut menu for a selected item. Alt+Shift+F10 displays the menu or message for an Error Checking button. Ctrl+F10 maximizes or restores the selected workbook window.
F11	Creates a chart of the data in the current range in a separate Chart sheet. Shift+F11 inserts a new worksheet. Alt+F11 opens the Microsoft Visual Basic For Applications Editor, in which you can create a macro by using Visual Basic for Applications (VBA).
F12	Displays the Save As dialog box.

Navigating in the Workbook

In order to…	Press
Move to the previous cell in a worksheet	Shift+Tab
Move one cell up in a worksheet	Up Arrow key
Move one cell down in a worksheet	Down Arrow key
Move one cell left in a worksheet	Left Arrow key
Move one cell right in a worksheet	Right Arrow key
Move to the edge of the current data region in a worksheet	Ctrl+Arrow key
Enter End mode, move to the next nonblank cell in the same column or row as the active cell, and turn off End mode. If the cells are blank, move to the last cell in the row or column	End, Arrow key
Move to the last cell on a worksheet, to the lowest used row of the rightmost used column	Ctrl+End
Extend the selection of cells to the last used cell on the worksheet (lower-right corner)	Ctrl+Shift+End
Move to the cell in the upper-left corner of the window when Scroll Lock is turned on	Home+Scroll Lock
Move to the beginning of a worksheet	Ctrl+Home
Move one screen down in a worksheet	PgDn
Move to the next sheet in a workbook	Ctrl+PgDn
Move one screen to the right in a worksheet	Alt+PgDn
Move one screen up in a worksheet	PgUp
Move one screen to the left in a worksheet	Alt+PgUp
Move to the previous sheet in a workbook	Ctrl+PgUp
Move one cell to the right in a worksheet	Tab

Selecting Items, Performing Actions

In order to…	Press
Select the entire worksheet	Ctrl+A or Ctrl+Shift+Spacebar
Select the current and next sheet in a workbook	Ctrl+Shift+Page Down
Select the current and previous sheet in a workbook	Ctrl+Shift+Page Up
Extend the selection of cells by one cell	Shift+arrow key
Extend the selection of cells to the last nonblank cell in the same column or row as the active cell, or if the next cell is blank, to the next nonblank cell	Ctrl+Shift+arrow key
Turn extend mode on and use the arrow keys to extend a selection. Press again to turn off	Turn extend mode on and use the arrow keys to extend a selection. Press again to turn off. F8
Add a non-adjacent cell or range to a selection of cells by using the arrow keys	Shift+F8
Start a new line in the same cell	Alt+Enter
Fill the selected cell range with the current entry	Ctrl+Enter
Complete a cell entry and select the cell above	Shift+Enter
Select an entire column in a worksheet	Ctrl+Spacebar
Select an entire row in a worksheet	Shift+Spacebar
Select all objects on a worksheet when an object is selected	Ctrl+Shift+Spacebar
Extend the selection of cells to the beginning of the worksheet	Ctrl+Shift+Home
Select the current region if the worksheet contains data. Press a second time to select the current region and its summary rows. Press a third time to select the entire worksheet	Ctrl+A or Ctrl+Shift+Spacebar
Select the current region around the active cell or select an entire PivotTable report	Ctrl+Shift+asterisk (*)
Select the first command on the menu when a menu or submenu is visible	Home
Repeat the last command or action, if possible	Ctrl+Y
Undo the last action	Ctrl+Z

Crystal Reports Keyboard Shortcuts

Dec 24, 2018 Seth Bonder Leave a comment

SkillForge SkillSheet

Crystal Reports Keyboard Shortcuts

Click here to download the PDF version.

Menu Bar Shortcut Keys

In order to…	Press
Create New Report	Ctrl + N
Open Report	Ctrl + O
Save Report	Ctrl + S
Print Report	Ctrl + P
Cut	Ctrl + X
Copy	Ctrl + C
Paste	Ctrl + V
Delete	Del
Select All	Ctrl + A
Find	Ctrl + F
Go To Page	Ctrl + G
Design View	Ctrl + D
Refresh Report Data	F5

Formula Editor Shortcut Keys

In order to…	Press
Browse selected field	Alt + B
Check for Errors	Alt + C
Toggle the “Shows Field” tree	Alt + F
Comment the current line	Alt + M
Sort tree content	Alt + O
Toggle the “Shows Operator” tree	Alt + P
Save formula	Alt + S
Toggle the “Shows Function” tree	Alt + U

Formula Editor Shortcut Keys, cont’d.

In order to…	Press
Select all	Ctrl + A
Copy	Ctrl + C
Move to end of last formula line	Ctrl + End
Find	Ctrl + F
Set a bookmark	Ctrl + F2
Clear all bookmarks	Ctrl + Shift + F2
Move to beginning of file	Ctrl + Home
Move to start of word at left	Ctrl + <-
Select through start of word at left	Ctrl + Shift + <-
Open a dialog to create a new formula	Ctrl + N
Save and close Formula Editor	Ctrl + S
Focus to the syntax name list box	Ctrl + T
Switch to previous control box	Ctrl + Shift + Tab
Switch to next control box	Ctrl + Tab
Paste	Ctrl + V
Cut	Ctrl + X
Undo	Ctrl + Z
Repeat	Ctrl + Shift + Z
Keyword Auto Complete	Ctrl + Space
Move to end of line	End
Copy object from list to formula box	Enter
Go to next bookmark	F2
Find next item	F3
Go to previous bookmark	Shift + F2

How to create a database using phpMyAdmin and XAMPP

Dec 22, 2018Dec 22, 2018 Dave Kidd Leave a comment

Video version of this blogpost:

When working on a website that is either hosted or local on your computer, sometimes you’ll need a database for it. Back in the day, you would need to know SQL and how to run those commands in some sort of prompt. Nowadays, we have phpMyAdmin which is a graphical user interface for SQL. You can click, type in text boxes, and after a while, you’ll have a database created along with tables, columns, user permissions, etc.

To use phpMyAdmin, you’ll need to either install hosting software on your computer such as XAMPP, MAMP, LAMP, or WAMP. Or, you can get a web host that has it installed on it already. The “AMP” in those software packages stands for Apache (the web server), MySQL (the databases), and PHP. The M is for Macs, the L is for Linux, and the W is for Windows. XAMPP does them all so that’s the one I’d recommend starting out with.

As for web hosts, the one I use and HIGHLY recommend is interserver.net They are cheap, reliable, charge you monthly, and don’t hike up their prices like most of the other web hosts do.

In this blog post, I will only show how to create a Database with a table and some columns. However, at the top of this post, I inserted a video that shows a lot more than that. It goes into downloading/installing XAMPP, accessing phpMyAdmin, creating a database, and using PDO (PHP Data Objects) to connect to it. Now, onto showing how to use phpMyAdmin!

To access phpMyAdmin from XAMPP you will need to make sure you have Apache and MySQL running in the XAMPP control panel by clicking the start buttons under the Actions column:

If Apache and MySQL are green then all is well. Then you can click the “Admin” button in the MySQL row and that will launch phpMyAdmin:

You can also access phpMyAdmin by typing in http://localhost/phpmyadmin/ into your browser. The first time you access it, you will need to login using “root” as the username and there will be no password. Once you’ve typed that in, click on “Go”:

Once you are logged in I would recommend changing your password to secure your databases and their settings:

After you’ve done that. You will want to create a new database by clicking here:

You will then be prompted to name the database, do so, and then click on “Create”:

Then you will be asked to create a table with however many columns you want. Once you’ve decided that, click “Go” again:

This will require that you preplan your database a bit. You’ll need to know exactly what you will be storing in it. For this example, we will be storing the user’s name and age. So on the next screen we will put in a names and ages column. We will also need to give them a type, age will be INT (integer/numbers) and names will be VARCHAR (characters/letters). Finally we will need to say how many characters can be in each column. Age will be 3 since I don’t think anyone would live to be older than 999 (: and we will give 100 characters for their name which should be enough. Once we filled in those fields, we would click “Save”:

And there you have it! A new database with a table with two columns in it ready to be filled. Be sure to watch the video at the top of this post if you want to see how to connect to the database using PHP Data Objects (PDO). Also, be sure to check out our web design/development trainings if you want to learn more about PHP, databases, and how to use them together. Have an amazing day!

How to Edit Contacts and the Business Card in Outlook

Dec 18, 2018Nov 14, 2018 Seth Bonder Leave a comment

Outlook 2016 has implemented a slightly different scheme for contacts and the business card in them, but the differences are mainly cosmetic. The basics are similar enough that users of the earlier versions won’t be at a loss.

Once the program is open, the first thing is to switch to the Contact List (now also known as the People list). One can double-click where indicated to create a contact, and fill in the blanks, or edit an existing one.

The thing some people have a little bit of a time getting just right is the business card part. Right-clicking and selecting Edit Business Card gets one in the proper box. Most of the work is then done in the Fields area at bottom left. It’s rather like playing with Lego blocks—one can add or remove various places for information with the buttons at bottom, move items up or down with the arrow buttons just to the right. Then re-position the blank lines as spacers to get the card to look good.

One of the tricks is not to overdo the amount of content in the card. They’re supposed to carry just the essentials, as a real business card would. So basic contact info should be the majority of what’s on there. And making the text on the card a little bigger—which can be done with the controls in the Edit area at right—won’t hurt, provided the amount of content isn’t too much.

Another thing which helps is to be careful with the graphics. Having a company logo on the business card is about as far as one need go; much more would be a distraction. And getting a graphics person to set up a “watermark” style logo (high-brightness, low-contrast, rather like a watercolor) is fairly easy. In fact, many companies will have such a thing to hand in the PR office.

Positioning the graphic can be done with the Card Design controls at top right. Experimenting a little is a good idea, but if your company already has a layout for your own card, use it by all means. Layout for others is fine too. Just bear in mind that you might need do nothing more than scan in someone’s card and import or paste it in.

What does the DOCTYPE do in HTML?

Dec 16, 2018 Dave Kidd Leave a comment

What is the DOCTYPE? When coding in HTML you will see this really weird looking line up there at the top. It usually looks like this:

<!DOCTYPE html>

Simply enough, this line tells the browser what version of HTML is being used to create the website. Back in the day, with HTML4, DOCTYPES were really long lines of text that were almost impossible to remember because they looked like this:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

and

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

and

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

Depending on if you wanted the language to be handled in a more strict (not allowing mistakes in the code) way or more lenient, you would use either the first or second DOCTYPE. If you used frames (that’s going WAY back), you would use the frameset DOCTYPE. Either way, I think the whole web is very happy that in HTML5 they decided to make it a lot smaller and easier to remember. If you want to learn more about web design/development be sure to check out our trainings. Have an amazing day!

How to Format the Gantt Chart in Project

Dec 11, 2018Nov 10, 2018 Seth Bonder Leave a comment

Recently, I had a question about formatting the Gantt chart from a student who mentioned the issue of color-blindness. Since various kinds of this problem exist, knowing how to get around it can be helpful, just in case. As critical tasks are highlighted in red, it could be an issue. The Gantt chart, after all, depends at least in part on color, or so we normally think. But there are ways around it.

To start the process, we go to the Gantt Chart Tools Format tab, and click the Format button in the Bar Styles group. We then have to go to the drop-down, and click Bar Styles there.

Then comes the big box. The key is understanding how this box is laid out. In the upper half, the names of the chart elements are listed on the left, and the appearance and other attributes go in each row.

What one has to do is select an element name on the left, then look down at the lower half of the box, usually to the Bars tab (we’ll deal with Text in a sec). For the regular Gantt bars, the kind we usually concern ourselves with, the Middle section is the one we need to tweak. Shape and Pattern are important, but Color is the main thing. If we’re dealing with someone who has red-green color blindness, the ability to change color for critical tasks is certainly going to be a help. Better still, we can change the pattern—which lets us put color aside when we need to.

Once we make the changes, we’re set.

The only downside I’ve run into is, once the Critical Tasks checkmark is turned on, it needs to stay on when one formats the critical task bar appearance. Turn it off, even for a second, and it loses the formatting we apply to critical task bars. (If anyone finds or has a solution to this problem, I’d be glad to hear it. 🙂 )

Adding text to the bars is done in the Text tab downleft. This can be a help too, but one doesn’t want to overdo it, since the left side of the Gantt chart has text aplenty.

Why using document.write is a bad idea in JavaScript

Dec 10, 2018Dec 10, 2018 Dave Kidd Leave a comment

Why is using document.write a bad idea in JavaScript? Well, document.write is great for debugging or helping you know what a variable is equal to at a certain part in your code. It’s not a good idea to use on an actual web page especially if you’re not careful. The reason is it can erase your whole web page. Here’s an example when document.write can be destructive:

<!DOCTYPE html>
<html lang=””>
<head>
<meta charset=”utf-8″>
<title>Destroyed by document.write</title>
</head>
<body>
Hello<br>
<button id=”click”>Erase the Doc!</button>
</body>
<script>
var btn = document.getElementById(“click”);
btn.addEventListener(“click”,function(){
document.write(“Be gone!”);
})
</script>
</html>

We have a button with the id of “click” that we’ve stored inside a variable called “btn”. Then we attached an event listener to the button so when you click on it, it will run the anonymous function that uses document.write to put “Be gone!” on the page. If you load this code up and run it when you click the button, document.write gets rid of everything on the page to write it’s content. It does this because the content on the page has already been created and when document.write does it’s thing, it overwrites the whole page when inserting the content. That is one of the main reasons it’s not a good idea to use document.write.

A better alternative is selecting a div on the page and use it’s innerHTML property to put the text. Here’s an example of that:

<!DOCTYPE html>
<html lang=””>
<head>
<meta charset=”utf-8″>
<title>Saved by innerHTML</title>
</head>
<body>
Hello<br>
<button id=”click”>Print the Text!</button>
<div id=”iamhere”></div>
</body>
<script>
var btn = document.getElementById(“click”);
var d = document.getElementById(“iamhere”);
btn.addEventListener(“click”,function(){
d.innerHTML = “innerHTML saves the page!”;
})
</script>
</html>

In this code we have a div with the id of “iamhere” and we stored that div in a variable called “d”. When we click the button it goes out to the div and changes it’s innerHTML property to “innerHTML saves the page!” and after it runs, the button and all the content on the page is preserved. Happy day. If you want to learn more be sure to check out our Web Design/Development Trainings. Thanks and have an amazing day!

How to Set Up Custom Signatures in Microsoft Outlook

Dec 4, 2018Oct 30, 2018 Seth Bonder Leave a comment

There are several features in Outlook that I can only describe as “cool”, among which is the ability to create custom signatures for email. It’s a feature most people would think should be in a program like this, but that doesn’t make it any less cool in my eyes. And not only is it not hard to set up, but more than one signature can easily be made available. This is a very important business feature, if you think about it. Having business contact data in an email is, if nothing else, polite.

First thing is to get to the dialog box. It’s easy: File tab to Options command, then click the Mail category on the left side of the dialog box; third item on the right under Compose Messages is the one we want, and the Signatures button is plain as day.

Once into the actual Signatures dialog box, we usually click New on the left side to start setting one up. Give it a name—sticking to something suitable for business is a good idea—and start editing, in the main space downleft.

Any text you like can go in there, formatted as you wish. And any pictures, too. There’s even a button for inserting pictures, if you don’t feel like copying and pasting. You may have to play around with the layout a bit, to arrange things as you want them. If you have a program like Photoshop or Illustrator, you could simply set up entire signatures as pictures, import them, and do the whole operation in one easy step. Either way works. The key things are just the usual—highly recommended to use company font and color choices, company logo if available, etc. Otherwise, keep it simple and informative. Just the essentials. Before OK-ing out, make sure you go to the top right of the box and choose which signature(s) you want for your defaults.

From then on, whenever you start a new email, your default signature will show up every time at bottom. But the dropdown at the top of the email window lets you change on the fly. And you can edit any of them anytime.

How To Run External JavaScript After the HTML Has Loaded

Dec 3, 2018Dec 3, 2018 Dave Kidd Leave a comment

When using JavaScript, sometimes you will run into errors because the external code being used is placed above the HTML it is calling/manipulating. For this example, we have a HTML file that looks like this:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Run JavaScript After HTML Loads</title>
<script src=”external.js”></script>
</head>
<body>
<div id=”changeMe”></div>
</body>
</html>

In that code we can see that it’s calling an external JavaScript file called external.js that has this code in it:

document.getElementById(“changeMe”).innerHTML = “I’ve been changed!”;

This is going out to the div with the id of changeMe and is going to switch out the text to say “I’ve been changed!” after the script runs. The HTML runs line by line so be it goes out to the JavaScript file and tries to run it BEFORE it has loaded any of the HTML in the body tag. Because of that, if we were to run this in Chrome we would get this error:

This is telling us there’s an issue on the only line in the external.js file:

document.getElementById(“changeMe”).innerHTML = “I’ve been changed!”;

The external script is trying to select the div with the id of “changeMe” and change it’s innerHTML before it has been loaded in the browser so it errors out. To fix that we use a magical attribute called “async” and we place it into our script tag like so:

<script src=”external.js” async></script>

The async attribute makes it so the script can be run separate (asynchronously) to the page loading and will wait for the HTML to load before it tries to run any of the scripts. Before, it ran the external JavaScript first, then continued loading the page creating the error. Now it makes it so the JavaScript can be run separate from the HTML and doesn’t have to load first. This will eliminate the error we are getting. After adding the async attribute we will get what we were expecting in the browser:

If you want to learn more, check out our Web Development courses. Have an amazing day!

How to Use Dodge and Burn in Photoshop

Nov 27, 2018Oct 26, 2018 Seth Bonder Leave a comment

Of all the tools in the last few versions of Photoshop, the Dodge and Burn tools seem to be among the least used, possibly since digital photography has reduced the need for them. But once in a while, especially in restoring scanned-in prints, one might still try them out.

Dodging and burning, in photography, are lightening and darkening parts of an image that show some detail but not quite enough; if dark parts can be lightened a little, or vice versa, visible detail might be improved.

Once we have a decent scan, we can decide which parts are a little too dark or light. We can then select an area to work on—the key is to feather the selection by a fairly high number of pixels, how many depending on the image. That is, to make the selection fuzzy-edged, so the dodge and burn we do won’t stop too sharply at the edge and give itself away.

We then select the tool—they work pretty much the same other than which thing they do—and adjust the options. For dodging, select Shadows; for burning, select Highlights. With dodge and burn work, one can use Midtones for both, but the thinking is to affect the more “extreme” areas of the image, so experiment if needed. The Exposure control is for how much “oomph” the tool will have, or how much it will affect the area quickly. We want this fairly low, usually no more than 20-25% or so, since we want to work slowly up to the degree of effect we want. Using the Airbrush option to build up is okay to try; I find I don’t use it much, but some people have told me it’s good when you get used to it.

The real trick, at least from my experience, is that “tapping” the mouse button to apply short bursts of effect seems to be one good approach in both dodge and burn. Though we can use Undo or the History panel to go back if we overdo it, one doesn’t want to have to do it too often.

And if the effect is not very obvious, that’s because it’s not supposed to be. Remember, the goal in many cases is to have the image look as if nothing was done to it at all—as someone once wrote, “the art of concealing art.”

JavaScript console.log vs console.dir

Nov 24, 2018 Dave Kidd Leave a comment

So what is the difference between console.log and console.dir in JavaScript? Well, let’s take a look! If we were to take this code:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>console.log vs console.dir</title>
</head>
<body>
<script>
console.log(“Why, hello!”);
console.dir(“Why, hello!”);
</script>
</body>
</html>

then put it in a text editor, then run it in a browser we would get a blank page. That is because when we use these commands, they are only viewable in the console itself. So to see what these commands actually do we need to right-click the page in Chrome or Firefox and choose the inspect option then the developer tools come up. On a PC you can press F-12 and that will bring it up as well. From there you can click on the console tab if it isn’t already selected:

Once you select the console tab you’ll see that console.log and console.dir write whatever it is that you defined to the console window:

When you are printing text to the console, they do exactly the same thing. They take the string (text) you’ve given the code and display it out on the console. The difference comes in when you write out more complicated JavaScript items to the console like objects or arrays. Take this code for example:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>console.log vs console.dir</title>
</head>
<body>
<script>
console.log({name:”Dave”, job:”Trainer”, patronus:”sloth”});
console.dir({name:”Dave”, job:”Trainer”, patronus:”sloth”});
</script>
</body>
</html>

Now that I’m using an object, console.log and console.dir’s differences start to stand out. Here is what we get in the console:

We can see that console.log still just prints out the object as a string, but console.log recognizes it as an object. They both allow you to drop down and navigate the object’s key-value pairs so yeah, to be honest, not a lot of difference here. If you want to learn more check out our different offerings we have for Web Design/Development Training

Using the Mesh Tool in Illustrator-Basics

Nov 20, 2018Oct 26, 2018 Seth Bonder Leave a comment

The Mesh tool gives the Illustrator artist a capability that some people think doesn’t exist in this program—the ability to shade an object, for example if one wants to make something look three-dimensional, solid, curved, etc. This is fairly easy in Photoshop; what a lot of people don’t know is it’s only a little more work in Illustrator, and has easier adjustability to boot. 😊

The first thing is to create the outline of the object. I’ve laid out a simple vase-ish kind of shape for demonstration. It’s supposed to narrow down at the neck and bulge out a bit near the base. Now, art theory says that if part of an object “protrudes” toward the viewer, we paint it a little lighter as more light would strike it (the end of the nose, for example). And a part that “recedes” (say, the space under the chin) would be shadowed, and therefore a little darker.

So we select the object, select the Mesh tool, and click inside it, usually near the center. This puts one horizontal and one vertical mesh line on it. We can then add more by clicking on either of those, as many as we want. The real-life example might be looking at a globe of the Earth, seeing the latitude and longitude lines that make it “look” round even aside from seeing the highlights and shadows on it—the lines help us perceive its shape.

But that isn’t the real power here. We can now use the Direct Selection tool and click on an anchor point where mesh lines meet, and add another fill color that leaks or diffuses out from the selected anchor point(s). If you imagine a white towel absorbing fruit punch, or grape juice, a little here or there, you have the idea. And the control handles emerging from the anchor points not only control the shape of the lines, but how far the color spreads from the anchor. And the best part is, you can always go back and adjust some more. Add mesh lines, add colors, remove them, adjust the shapes, all as you like.

Some time back, the cover of the box for Adobe Illustrator showed a reproduction of Botticelli’s Birth of Venus (the “Venus on the Half-Shell”), done in the program. What I did here, with some refinement, is how all the delicate flesh tones and shadings were done to almost exactly duplicate Botticelli’s work. Can we do “real” art in Illustrator? With meshes, I think we can.

How To Center Content in a Div Horizontally and Vertically

Nov 20, 2018 Dave Kidd Leave a comment

This little snippet of code will show you how to center content in a div horizontally and vertically using HTML and CSS. This, in the past, used to be semi-difficult. Now, using CSS flexbox display property, it’s actually quite easy. First, we’ll create a simple HTML skeleton with a div that has a class called “centerMe” inside the body tag:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Center Content Horizontally and Vertically</title>
</head>

<body>
<div class=”centerMe”>
I will be centered in the div horizontally and vertically
</div>
</body>
</html>

Now that we have the starting HTML, we can add the CSS inside a style tag in the head tag. The CSS will target the div on the page with the “centerMe” class. Here it is:

<style>
.centerMe{
height:300px; /*this makes the div 300px tall*/
width:500px; /*this makes the div 500px wide*/
border:solid 1px black; /*this makes the div visible by giving it a solid border that is 1px thick and black*/
display:flex; /*this applies the flexbox display property to the div so we can use the properties below*/
align-items: center; /*this vertically aligns everything to the center*/
justify-content: center; /*this horizontally aligns everything to the center*/
}
</style>

The CSS is using the display property called flexbox which allows you to easily accomplish our task. Once we add the CSS, the content should look like this inside the div:

Here is the code in its entirety:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Center Content Horizontally and Vertically</title>
<style>
.centerMe{
height:300px; /*this makes the div 300px tall*/
width:500px; /*this makes the div 500px wide*/
border:solid 1px black; /*this makes the div visible by giving it a solid border that is 1px thick and black*/
display:flex; /*this applies the flexbox display property to the div so we can use the properties below*/
align-items: center; /*this vertically aligns everything to the center*/
justify-content: center; /*this horizontally aligns everything to the center*/
}
</style>
</head>
<body>
<div class=”centerMe”>
I am centered on the page horizontally and vertically
</div>
</body>
</html>

If you’d like to learn more check and sign up for one of our web design courses. Have a great one!

SkillForge SkillSheet

Microsoft Excel 2010/13/16 Keyboard Shortcuts

Frequently Used Shortcuts

In order to…

Press

The Function Keys—What They Do

Key

Description

Navigating in the Workbook

In order to…

Press

Selecting Items, Performing Actions

In order to…

Press

SkillForge SkillSheet

Crystal Reports Keyboard Shortcuts

Menu Bar Shortcut Keys

In order to…

Press

Formula Editor Shortcut Keys

In order to…

Press

Formula Editor Shortcut Keys, cont’d.

In order to…

Press

Training Options

Courses

Our Blog