SVG Images Made Easy

Well, at least made easier. IMHO, svgs are not easy to understand. svg is a type of image for websites. svg stands for scalable vector graphics, whatever that means.

The important part is that you can manipulate these images in real time. This can also be difficult – it was for me for a long time. It’s possible to alter other types of images in real time. However, svg is what most people use. Canvas is an alternative to svg. But in my opinion, it’s not any easier to understand.

The simplest way to put an svg image on your website is to reference it with the img html tag. But that doesn’t allow you to manipulate it. If instead, you copy the svg image into your html page and make it inline svg, you can manipulate it. Keep reading and I’ll explain how that can be done fairly easily.

An svg image is a text file of commands to draw the image. You can open it with a text editor like Notepad++. This file looks similar to html. It starts with <svg> and ends with </svg>. Actually there may be some code before <svg>. To place your svg image inline, decide where you want it in your html and pasted everything from <svg> to </svg>. Do not include anything before <svg> (or after </svg>). It is not needed or even wanted in some cases in the inline version.

Now that you’ve pasted in those several lines of svg code, save your html file and open it in a browser. Voila, there’s your svg image on the screen. Hint: I find that it helps me immensely if I put comments around the svg. I put  before the svg and  after it.

Now, to the fun part – manipulating the image.

I wanted to take a map of the USA and color each state based on certain criteria. OK, so I wanted to color each state depending on who won during a presidential election. I did this a couple of election cycles ago. It was hard work. Each time, I changed the svg file manually, then I opened it in my picture editor. I made a screen copy and saved that as a png image. Then I referenced that on an img tag in my html page.

Recently, I thought that perhaps I might want to be able to do the same sort of thing at some point in the future. So, I wrote some javascript to simplify that process. I’ve placed that javascript in xg_graph.js and uploaded it to the internet. I tried to make it as simple as possible, so that you don’t need to know much about coding.

You can read about the details of how to use that code at Really Useful Javascript Graphs. I’ll discuss the basics here.

I used the USA svg map from Wikimedia. The particular svg map I used is free to use, no attribution needed. Some svgs are free to use, but require three attributions, plus a brand logo. I think three attributions is asking a little much. But then again, I don’t need that particular svg image yet. Others svg are not free.

You can create your own svg, maybe, using Inkscape or Adobe Illustrator or maybe something else. I can’t draw, so that’s out. And probably the svg will be easier to manipulate if you use one that somebody else has created and gone to the trouble of identifying separate parts of the image.

An svg file consists of the svg or multiple nested svg. Within an svg, you can have a group (g) tag. This groups elements together. If you don’t have <g>…</g> tags, you will probably want to add them, at least one set. Just place <g> at the top at the end of <svg…> and </g> at the bottom before </svg> if you don’t know where to put them. Some of my javascript routines rely on the group tag. There are also shape tags – path, circle, eclipse, line, polyline, polygon, and rect (for rectangle). And that’s pretty much all you need to worry about: svg tag, group tag, and shape tags.

<path class="co" …><title>Colorado</title></path> is the shape for Colorado (CO). It’s identified by both the title and the class. Luckily, the shapes were identified, so that I didn’t have to figure that out.

However, my routines rely on tags being identified by ids. The Wikimedia file doesn’t have ids. But that’s easily resolved. I just add ids to the svg, group, and paths. In this case, I modified the Colorado path to be <path id="svg_co" class="co" …><title>Colorado</title></path>.

Now that my tags have id’s, I can call my xg_svg_modify routine to modify any attribute – class, bgcolor (background color), transparency, title, or text. Text can get complicated, so I manipulate title instead.

You can also modify the size of the svg. And that’s mainly what I use this routine for. It’s more complicated to change the size of an svg than just altering the width and height attributes. It took me a day or two to understand what people on the web were trying to tell me. And even then, I didn’t want to do it manually. So, a routine.

Back to politics. When I find out who won, I can call my x_who_won routine to assign the correct background color to a state shape. Yes, that’s easy enough to do manually when only two people are in the race. But what about a presidential primary when there are 16? And what about election night at 2am, when you’re waiting for the results to come in and you’re way too tired to think straight. When you find out the correct color, you can call xg_svg_modify to update it.

That’s great! But, I want to work with the svg as a whole, rather than one shape at a time. First I need to know the attributes of each shape. So, I call xg_svg_group_init. This gathers the attributes of all shapes in a group. It gathers those attributes into arrays. Arrays can be difficult to work with in javascript. But they were necessary in this case. And, I tried to keep them simple.

You will need to know the index of the array for a certain shape in order to update its attributes: co_index=xg_svg_shape_id_array.indexOf('svg_co'). This returns the index for the Colorado shape in the array. co_bgcolor=xg_svg_shape_bgcolor_array[co_index] returns the background color for Colorado. To update the background color to blue, xg_svg_shape_bgcolor_array_update[co_index]='blue'. You may also want to update the titles by appending the scores. xg_svg_shape_title_array_update[co_index]='CO 55 45'. Then call xg_svg_shapes_update to update the svg.

Maybe you’re not interested in politics. Maybe you just want to randomly color each state. My routine x_color_random_array_init creates the array x_color_random_array. After calling x_color_random_array_init, call xg_svg_shapes_update_bgcolors(x_color_random_array). Then call xg_svg_shapes_update to update the svg.

November 24, 2021November 24, 2021

Microsoft Office Toolbars

Apparently, there was another upgrade to Microsoft Office 365. And the toolbars changed. Well, I call them toolbars. MS Office calls them menu ribbons, except for the shortcut toolbar which they call the Quick Access Toolbar. The menu ribbon has various tools on it and changes as you select different menus. The Quick Access toolbar lets you place tools/functions that you need to use a lot in one common place that’s always visible – unless you hide the quick access toolbar.

Changes: The Quick Access Toolbar is now below the ribbon, rather than above. Visually, I guess that makes more sense. However, it’s still a change. Also, Undo and Redo were added to the main (Home) menu ribbon. They used to be on the quick access toolbar. Those are the main changes.

Also, turning on and off the ribbon has become more complicated. I often turn the ribbon off (hide the ribbon) so that I can see more on the screen. And I want a quick way to turn it on and off. To turn the ribbon on, you can right-click on the Quick Access Toolbar and uncheck Collapse the Ribbon. To turn the ribbon off, click on click the down arrow to the right of the ribbon, then right-click in the list of choices, then check Collapse the Ribbon.

Luckily, Allen Wyatt reminded me that Ctrl+F1 toggles the ribbon on and off. Actually, I’m pretty certain that I never knew that. Ctrl+F1 is a lot easier to remember than the various steps that Office visually provides to turn it on and off. He also provides a macro, if you want to place a button on the quick access toolbar to do that.

Redo and Undo: I removed the Redo and Undo Commands from my Home menu. Redo is Ctrl+y, Undo is Ctrl+z. And I always use those keystrokes, rather than clicking the button.

Quick Access Toolbar: I decided to review what was on my quick access toolbars and see if I could use them to optimize the amount of the document or spreadsheet or other office app window. In other words, I wanted to keep the ribbon hidden as much of the time as possible, and just do functions that I do a lot, from the quick access toolbar, since that takes up less space.

If Outlook, I no longer use the ribbon. I’ve placed these commands on my quick access toolbar. To change, right-click and choose customize. Then change the first drop-down from Popular Commands to All Commands. Then Add the commands you want where you want. Use the up and down arrows on the right to order where these commands show up in the ribbon. The commands on my Outlook quick access bar are Reply, Reply All, Forward, Delete, Rules, Send Receive All Folders, Send All, and Print. If you have automatic send/receive set on, you won’t need to add those send commands. Print is Ctrl+p, so I wouldn’t need that one. But there’s plenty of room. I originally added New Email until I noticed that New Email/New Appointment is always present in the working window, depending on whether I’m on email or calendar.

In Word, you may want to hide your quick access toolbar and just toggle the ribbons on and off with Ctrl+F1. However, I need the commands Advanced Find and Find Next, so currently I’ve got them on the quick access toolbar. I think I’ll just modify the Home Ribbon and add them there. Advanced Find allows you to do nifty things like only find whole words. Ctrl+f used to get you there, but now it takes you to the simplified find (that change happened a long time ago). Advanced Find is already on the Home Menu ribbon. Click the down arrow on Find (all the way to the right). I’d like to click once, rather than twice to get there. Find Next is not on the Home Menu ribbon.

In addition to those commands, I currently have Format Painter, Replace, Show All, and Speak on my Quick Access Toolbar. I often need Format Painter, Show All, and Speak, no matter what menu ribbon is currently displayed. So, I may leave well enough alone.

In Excel, I didn’t have a need for the Quick Access Toolbar. If I did, I would add Sort and Filter. With the Formula Bar taking up extra room, I decided to not also have the Quick Access Toolbar taking room.

I don’t use PowerPoint enough to know if there’s a need for the Quick Access Toolbar. I did remove Redo and Undo from the Home Menu. I don’t use other Office Apps, other than Access (database) on rare occasions. Access is in the Professional version. I did use Teams for Work, but so far not on my Personal Computer. If you use OneDrive or OneNote, you may want to customize those apps.

Final Note: If you want the quick access bar back on the top, you can right-click on it and choose Show Quick Access Bar above the Ribbon. It will go back where it used to be and give you even more space in your app’s working window. When you do this, the command titles won’t be displayed, just the icons. But you can hover over them to see what they do, should you ever forget.

November 21, 2021November 21, 2021

Website Color – Contrast, Primary, Random

Contrast

If the background of an element is dark, you want a light (typically white) text. If it’s light, you want a dark (typically black) text. But what’s dark and what’s light? Technically speaking, light colors are those whose red, green, and blue components are greater then hex 7f (decimal 127). However, our eyes are tricky creatures, and that doesn’t always work. Instead, you need to know the lightness component. You can convert the color to hsl (hue, saturation, light), but that’s rather involved. There’s also a one line if statement I found somewhere on the web which will do the trick instead.

if(((red_component*299)+(green_component*587)+(blue_component*114))/1000>128){contrast=’black’}else{contrast=’white’}

Of course, first you have to get or know the background color of the element. Then you have to convert it from whatever color system it was specified in to rgb. The color system could have been hex, rgb, or an official color name. It could have been a few other color systems. If it is, you’ll need to deal with that. Otherwise, see my functions below to help with this.

Primary Colors

What are the primary colors? Google this and you’ll typically get primary, secondary, and tertiary color names. Some people think of primary colors as the colors of a rainbow. Others think of it as the colors in an 8-crayon box.

My list of primary colors start with those where the hex red, green, and blue values are 00 or FF. This gives us Black, Red, Yellow, Green, Aqua/Cyan, Blue, Magenta/Fuschia, and White. Then I add in those colors where one or more of the values are 7F, for a total of 15 colors.

Random Colors

A Random Color is easy enough to calculate. Some people take a random value for Red (between 0 and 255), one for green, and one for blue. I just take a random number somewhere between the 0 and the maximum number of possible colors.

In Javascript, this is ‘#’+Math.floor(Math.random()*16777215).toString(16).padStart(6,’0’); I may have missed one color at the top-most value, don’t know, don’t really care. toString converts to hex, padStart adds leading zeros, if any are missing.

The real trick, is how to you generate an array of random colors, without any duplicates? What does duplicate mean? I can’t tell the difference between my wife’s navy blue socks and her black ones. I mean they should be labeled. She can. So, duplicate is a matter of how close to another color is too close? I suppose hsl would work better for this. However, I just define it as the red, green, and blue each being within 16 of the red, green, blue of another color. If that doesn’t work for you, you can call my routine passing a different value for tooclose. You’ll probably want to pass a value > 16, like 32.

I also allow you to not accept grey, black, or white values in your array. The array can contain 1000 values. However, if you disallow grey, black, or white, it may contain slightly less than 1000 values. It may also contain slightly less than 1000 values due to dups. I figured 900+ values should be sufficient for most applications.

x_press javascript functions

If you need to add some basic javascript functions to your website to deal with colors, check out my free javascript library. It’s designed to make your website more expressive. And it’s easy to use, even if you don’t know much about javascript.

x=x_color(elementID,foreback) will return the foreground or background color of the element. Foreback can be ‘text’,’foreground’, ‘fore’, ‘fg’ for foreground. Foreback can be ‘background’,’back’, ‘bg’ for background. Any other value will return the background color.
x=x_color_shift(rgb,redshift,greenshift,blueshift) will shift the color. Use positive value for shift for lighter, negative for darker. Specifying 16 or -16 will go slightly lighter or darker.
x_color_primary_array contains primary, secondary, and tertiary colors.x_color_primary_names_array contains the names. x_color_primary_n_array and … names array contain primary colors in sorted order where number of colors is n and n=5,8,15. Brown is actually a red-violet shade, so not included.
x_color_black, x_color_white – black and white, but you can change them to whatever you use for black and white. I was going to set x_color_text and x_color_background to document.body.style.text and document.body.style.backgroundColor, but these would be set in x_press_init. And x_press_init is usually called in <head>. And document.body.style…. is in head. You would need to set your own variables for these in a script after <body>. You might also want to set a variable for document.body.style.borderColor. You can of course you document.body.style…. The only reason for corresponding variables, would be if you can’t recall document.body.style….
x=x_color_convert(fromcolor,tocolor_type) will convert color from one type to another. From type is name, hex, or rgb and is derived from fromcolor. tocolor_type needs to be specified if rgb, otherwise it defaults to hex. tocolor is the returned value.
x=x_color_random_array_init(allowgray,allowblack,allowwhite,tooclose) loads an array of up to 1000 random colors. By default, gray, black, and white are not allowed. The array may contain slightly less than 1000 colors, especially if you disallow gray, black, and white. Also, duplicate colors are not included in the array. Duplicate in this case means that the color is too close to another color in the array. tooclose defaults to 16, meaning the red, green, and blue values are within 16 of each other. You can change tooclose. I suggest increasing it, like to 32. Increasing tooclose raises the chance that the array will contain less than 1000 elements, but you’ll probably still have plenty.
x=x_color_contrast(color) returns a contrasting color. Typically, you have a background color and you want to contrast the (foreground / text) color.
x=x_color_contrast_per_background(x_el,settextcolor=false,setbordercolor=false) returns a contrasting color based on an element’s background. Optionally sets text and/or border colors. This works for elements. It does not work for document.body. To set, document.body.style.color=x_color_contrast(document.body.style.backgroundColor)

July 24, 2020July 29, 2020

Add Animated Cards to your Website

I should have added the word Easily to the title of those post. Alas, I didn’t.

When writing my fantasy series, The Wizard without a Wand, I had trouble keeping track of all the characters. First, there’s the tensome – ten Wizard School students who hang out together. They even share the same dorm room – the school calls their dorms hotels. Even so, we all know they’re just dorms, not hotels. Then there are parents, teachers, the Principal, etc.

I figured, if I had trouble keeping them straight, my readers might also. So I added a cast of characters at the end of each of the ten books in that series. I didn’t intend for there to be 10 books. I didn’t even intend for it to be a series. That just happened.

Anyway, when I added that series to my website, I decided to add the cast of characters to the website also. Then I decided to get fancy, and put each of the Tensome on a card on the website. I wanted the card to be animated, so that when a user clicked it, it would turn over and show the user more information.

In order to have the card turn over, I animated it. I created my own animation routines in javascript. These are free and easy to use, provided you can understand javascript just a little bit. And provided you can add javascript to your website. I call this library of routines xa_animate. It goes along with my x_press javascript library which helps make your website more expressive. These libraries are accessible at https://stubbart.com/computer_consulting/code/index.html

You can use these animated cards for playing cards, greeting cards, or business cards. You might want to use a card for each of the top people in your company on your company’s website.

Turning over the card, means rotating it. For my children’s superhero series Zuper Zero (Only three books this time, so far. Again, series was unintended.), I wanted the front of the card to slide into the sky. So, I added the Scroll method to the Rotate Method.

Then I added the Slide method (a variant of the scroll method with more options), the Fade method, and the Open Method.

In my scifi book Shalomar (no series this time), one of the main characters is named Glo-Reta. One of my favorite lines from that books is, Life wasn’t bad, living with Glo-Reta in Gariza. Anyway, I wanted the front of the card to glow as it disappeared and showed the back. So, I added the Filter method.

The Filter method is a repeat of the Fade method, however, in addition to opacity (opposite of transparency), you can apply blur, brightness, contrast, grayscale, hue-rotate, saturation, and sepia. My test picture glowed the best with brightness and contrast. Glo-Reta’s glowed the best with brightness, grayscale, and hue-rotate. I have no idea why grayscale helped. hue-rotate alters the color, so yellows become purples, or some such.

https://stubbart.com/computer_consulting/code/xa_animate.html – xa_animation documentation and examples.

https://stubbart.com/publishing_consulting/cast/wizardwithoutawand.html – Wizard without a Wand – Cast of Characters

https://stubbart.com/publishing_consulting/cast/zuperzero.html – Zuper Zero – Cast of Characters

https://stubbart.com/publishing_consulting/cast/shalomar.html – Shalomar Cast of Characters

June 5, 2020June 5, 2020

Solutions Galore

I’ve been solving problems for 60 years. I use various techniques to solve problems quickly. Businesses pay me lots of money to solve problems, and most of them think I’m very good at it.

I have included many of the techniques I and others use in my 100th book – Solutions Galore. Solutions may or may not require a project. But it can help if you treat solving a problem like a project. I take you from the beginning to the end of the project. I explain things like brainstorming, my 12 simultaneous approaches, the KISS principle, testing, teams, etc.

March 28, 2020March 28, 2020

Fixing/Modifying Table of Contents

I write my books using Microsoft Word. I publish them by uploading them to Amazon (through kdp.com). But sometimes the Table of Contents isn’t quite what I want. So, i have to modify it. Sometimes it looks fine in Word, but Amazon changes it when I upload it. Or they complain that it’s not right. So I fix it.

The easiest way to fix that latter problem is to save my word document as a pdf. Then I upload the pdf to Amazon. The typical complaint from Amazon is that the page numbers are past the margin. They look fine in word, but not in Amazon.

The most common thing that I want to change in my table of contents is the heading. I want it to say something other than Table of Contents or Contents. That’s ok, let word generate the Table of Contents (under the References menu). Then just change the heading. Reformat the heading if it’s not to your liking.

Some people don’t like to have the Table of Contents heading show up in the Table of Contents. I don’t mind. If you want things that way, you’ll have to create a separate section for your Table of Contents (and anything else you don’t want included). There’s also squabbling over whether to start number your book pages after the Table of Contents or not. Those are topics I’m not going to cover in this blog post.

I sometimes want my chapter titles styled differently in my Table of Contents (TOC) than the default styles. To modify those, I go to the Reference menu, choose the Table of Contents drop down, then Custom Table of Contents. Then I click Modify. I select the TOC 1 entry and click Modify again. Then I increase the font size if this is a large print book. If I just want a different font, like perhaps my heading font, I change the font. Click OK. When I’m asked if I want to replace the current Table of Contents, I say yes. Actually, I say, Why do you think I went to all this work? But that’s the equivalent of yes.

One recent book, I had originally written as 8.5 x 11. Amazon books are typically 6 x 9. The table of contents didn’t resize correctly. It looked fine in word, but Amazon complained. So I saved it as a pdf and everything was hunkydorey.

I added an About the Author chapter, which I wanted to show up in the table of contents. I uploaded the new word document and Amazon complained. I thought, this time I’m going to figure out how to fix it in word! And I did.

Two things were off. #1 the … weren’t showing up. #2 the page numbers were too far to the right in Amazon or were dropped completely.

#1. I don’t know about you, but with my astigmatism, it’s hard to tell which page numbers go with which heading without those …. In a word TOC, those … are called tab leaders. To fix those, do a custom TOC. Modify TOC 1. Click Format, choose Tabs. Change the Tab Leader to …..

#2. Fixing where the page numbers appear is a similar fix. Again, format the tabs. This time, clear all tabs. Then enter a new position for your new tab. For 6 inch wide books with a one inch margin on both sides, that would be a 4 inches. If your page numbering goes past 99, use 3.75 inches instead. You should be able to use 4, but 3.75 often works better with Amazon. Choose Right. This is a right tab because the page numbers are aligned to the right. Chose … for the tab leader. Click Set (not necessary, but feels like word might actually do what I want if I click Set). Click OK.

That’s it, problem fixed. Amazon’s happy. I’m happy. Hope you’re happy. And if you want to buy one of my books, they’re at Stubbart.com

March 7, 2020March 7, 2020

Two-Factor Authentication – The Good, The Bad, and The Questionable

Two-Factor Authentication simply means verification by two methods. One-Factor Authentication simply means you enter your user-id and password to log in. Two-Factor usually means that once you enter your user-id and password, a one-time (one-usage) code or pin is sent to you either by email or by phone. Then you have to enter that code as part of your log in procedure.

Enhanced One-Factor Authentication

The problem with One-Factor is that people tend to use the same user-id and password everywhere they log in. They also tend to use something easy to remember for their user-id and password. Thus, if somebody gets your user-id and password for one website, they have it for all websites. You can limit that by using separate passwords for each site, but that gets tedious.

Now, most log ins require you to use a combination of uppercase and/or lowercase letters, numbers, and special characters like @ or # in your password. These are harder to guess. Even harder to guess are password phrases like My cat has green eyes with black pupils. Those are even harder to remember.
Some sites do not allow you to use your email address as your user-id. Some sites do not allow you to use any part of your name as your user-id. Others make you include numbers in your user-id.

Enhanced One-Factor Authentication may make you input three things log-in. It may make you answer security questions (unless you check that the device you’re using to log-in is your own private device). Inputting three things to log in is good.
Another form of Enhanced One-Factor Authentication tries to prevent your device from becoming infected with a virus, especially one which would compromise your log ins. This may be in the form of you choosing a picture from a list. This picture is displayed when you log in. This assures you that you’re on the correct website. Some bank websites ask you to download and install IBM Security Trusteer Rapport. This is an added layer of security for your computer. I did that at one point, but it slowed my computer way down. I have plenty of security on my computer without it. Many clients that I work for insist that the computer I use to work for them has a virus protection program of their choosing.
Also, you may need to verify that you’re human and not a robot. You do this by entering some barely legible letters and numbers which are shown on the screen. Alternatively, you check certain types of pictures like those which contain a street sign.

Two-Factor Authentication

Two-Factor Authentication sends you a one-time code or pin to enter as part of you log in. This code is sent to your phone as a message, or the sending computer can call your phone with that number, or you’ll receive that code in an email. Two-factor works well even though it is one more step for you. You also have your choice of how you want to receive that code.
Two-Factor may also come in the form of your device staying in sync with the website’s computer. In this case, you install a tokenizing app on your device. The website’s computer generates a random number. If your device’s tokenizing app is in sync, it has the same random number at the same time. Don’t ask me how this works. This form of Two-Factor is enhanced Two-Factor because your device also has to know a pre-agreed upon pin.
The problem with Two-Factor is that hackers may be able to steal your phone number or email address. Then they can intercept that code and log in as you. So, don’t plaster your phone number and email address all over the place, at least not the one you’re using for verification.

Three-Factor Authentication

And here’s where it gets questionable. I recently logged in to my Trusted Traveler Program (TSA). But now, your log-in information is verified by a different website where you have to have a log-in.
This is ridiculous because just one year ago, the log-in website changed and I had to set up my log in info again.
This new website required Three-Factor Authentication. In addition to my log in info and my Two-Factor Authentication, I had to choose a third way to verify that I was who I said I was. The first choice made the most sense to me. That meant installing an app which would receive the code. I reasoned that if somebody stole my phone, they would have that app. So I installed it on my laptop instead. There were two choices for that app. The first cost 6$/month. The other was free. Now I just have to remember what that app was and make sure it’s running the next time I need to log in to that site. Also that app was not easy to use. The help information was different from the actual screen.

Patterns, Biometrics, etc.

Some devices allow you to log in using a pattern or biometrics – fingerprint or iris print. I recently set up a new laptop for somebody else. Windows preferred that a pin be entered, rather than a password. This other person preferred using a password. So I figured out how to change their set up, so that they could do so.

Cellphones usually allow you to enter a pattern to log in. You can make it harder to log in to your phone by adding a second lock (log in) screen. If you want to do this, I suggest using Microsoft’s Next Lock Screen as your first log in screen and your phone’s as your second.

Some devices and kiosks allow you to use Biometrics to log in. This may be in addition to your log in information, though usually it isn’t. Some require both fingerprints and iris scans, but most only require one or the other.
There are problems with this. You may not have fingerprints. We’ve all seen spy films where fingerprints were lifted with scotch tape. And most of us have seen the movie where they stole the President’s eyeball.
Other types of Biometrics include voice recognition and face recognition. In the future you may encounter vein recognition, hand geometry authentication, and DNA recognition. Those are currently being used in limited situations.

January 17, 2020January 17, 2020

Excel Weekly ToDo Calendar

I’ve got the Calendar in Outlook. I’ve got a Calendar for my travel in Excel – one row for each week. But I needed a weekly or rather 7 day todo Calendar. Yes, I could put my Tasks in Outlook. However, I think Excel is easier to modify. And since I’m a procrastinator, I tend to keep moving tasks later and later.

Here’s what I did. First open a new Excel Spreadsheet. Select columns A-H. Since I’m working on a laptop, I was able to set the Column Width for these columns to 20. Your column width may be different. Right-Click, Column Width, 20. Also change these columns to Wrap Text while you’re at it.

Select column I – set column width to 1. This way, if I tab out of H into I, it doesn’t cause Excel to shift to the next set of columns to the right. Column I is still on the main screen as A-H.

Label row 2 (I’ll get to row 1 in a second) Sunday, Monday, Tuesday, thru Saturday. Label H2 Other. That’s because I have items in the future or items without dates – ones I just get to as have time.

Label A1 with the date for the Sunday of the current week. I prefer the Short Date format dd/mm/yy in the US. That is not the default, so I have to change the format. Grab the lower right corner of A1 and drag to the right thru G1. Now all your columns have dates.

Bold the top two rows. Select the third row – View Menu, Freeze Panes, Freeze Panes. This will keep your first two rows frozen on the screen as you scroll down.

Now, here’s the tricky bit. Select A1 thru G1. Home Menu, Conditional Formatting, Color Scales, Other Rules. Change the minimum color to yellow and the maximum color to orange. This way the minimum date is highlighted in yellow. The other dates will get slightly more orange.

OK, but I’m in the middle of the week. That’s OK. Change the date for Sunday to whatever that will be. Then grab that lower right corner of A1 and drag to the right until you get to yesterday. This is called filling or drag filling. Every time a week changes you’ll need to replace the Sunday date. Every time the day changes, you’ll need to drag fill the previous date to today – or type in today’s date.

Now you’re set. Just fill in the tasks for the appropriate day. Have a task which doesn’t fit in the current 7 days, place it in the Other column. Have a lot of Other stuff, add another worksheet (tab) to this spreadsheet. That way you’ll be able to store that stuff until it’s time to place it on your main worksheet. The highlighting will focus you in on today. It will also allow you to easily see that the Wednesday stuff is next week rather than this week.

This ToDo Calendar really helps because, Just because I procrastinate, doesn’t mean I’ll never get around to it.

October 5, 2019October 5, 2019

Expressive Websites 4.0

I have updated my expressive websites library – this time to handle Chrome’s deprecation of document.write. If you’re using document.write on your websites, please refer to my previous post. If you’re using my expressive websites library, please refer to the changes there, where everything is well documented.

x_d_w(string) was changed to x_ih(string,element). This places a string in the element you specify, overwriting any text which was previously there.

x_script_ih replaces x_script. Again, add an element as the last parameter. Similarly x_contact_ih replaces x_contact.

ih stands for innerHTML which is what the function is doing rather than document.write.