The Language of Communication

I was dreaming some story about a guy who wouldn’t say or acknowledge hearing words which ended in S, unless they were plurals. His first name ended in S, so he wouldn’t respond unless you called him by his middle or last name. Somehow he had a following.

That sounded strange until I remember that I wouldn’t say my Rs correctly when I was young. This got me into speech class which was way more interesting than my regular class. The reason I wouldn’t say them is that I learned how to speak near Boston, where they pronounce Rs as Ws and vice-versa. I just did the vice and not the versa.

In spite of strange self-imposed rules like that, language is important. I’m somewhat of a language expert. I pick up other languages quickly, and often use words or phrases from foreign languages (and sometimes made up languages) in my books. I created a meta-language for computers (and for programmers and non-programmers to communicate) called Hi5ive. A metalanguage is a language to describe other languages. Hi5ive does this by reducing computer languages to their common elements. It has very few commands or statements. I guess Hi5ive is really more of a universal computer language than a metalanguage. Esperanto is another universal language.

English is theoretically a Universal Language. I can go almost anywhere and somebody will speak English. I have been places where no one spoke English. And once in Mexico, somebody tried to speak English to me, very poorly. We could have understood each other much better speaking Spanish, even though I spoke Spanish from Spain, rather than Mexico at the time. Still, he was trying. And I appreciated that. A question on Twitter today was whether “you Americans would understand the term chav”. I know some British terms, but had to look that one up. In my opinion, if you’re writing a British book or are a Brit writing a book, use British terms. There are plenty of dictionaries on the web. If you know that a term might throw readers off or that they won’t get the story if they don’t look it up, put it in context. That’s my answer.

Speaking of terms one might not understand, consider trade languages. If you work in a certain trade – computers, for example, there are terms that you use which are only understood by those in the trade. And that’s ok, within the trade. It can form a camaraderie. It can let you know that this person understands the work – though they may only know the terms and not what they really mean.

Somebody once asked me what technology platforms I use. Even though I work with computers, I had no idea what she meant. I asked her to put it in other terms, no response. If she was trying to get new customers, it didn’t work. But it often happens that people speak to those outside their trade, using terms of their trade, expecting them to know what they’re talking about. I’m probably guilty of the same, but I try to explain things in terms that others will understand while not talking down to them. Sometimes the easiest way to do this is to put it in simple terms of a trade language. The other person may not understand those, but when they ask, it will be easier for me to think of other terms that they might understand. I try not to spout off acronyms that I forget (or never knew) the meaning of.

When I write, I often look up words, especially if they’re slang. I want to make sure they’re not racist or otherwise derogatory. If they are, I find another term which is not.

Expressive Forms – Part 4

Programmer

Previously, I talked through setting up a calculator form. This time, it’s a menu form. And, I’ll tell you where to get xf_form.js (free) for the helper routines.

A menu consists of several buttons. Each button links to a webpage, except those few buttons whose task it is to expand or collapse the menu. Since there is no submit button, this wouldn’t need to be a form. Yet, making it a form with readonly input fields, means that you have several less divs on your webpage. And I’m always grateful to have fewer divs to have to tell apart.

So, let’s make it a form. As with all the forms I’ve presented, there’s no action or method on the form. The form has an id, and it has an onsubmit attribute. For the menu, onsubmit is not really needed. Each button has the type of “button”. But, just in case the browser says to itself, there must be some onsubmit button, I added onsubmit=”event.preventDefault()”. This keeps the form from ending up with a blank menu.

You can go ahead and set up your menu buttons. If you want emoji on your buttons, my x_press.js library has several which are appropriate for menus. To use the home emoji, just enter &menu_home;. x_press() will interpret it for you. However, since your menu will be on every page, you’ll probably write it as a javascript function. If you do that, you’ll need to change &menu_home; to %menu_home; and call x_press a little differently. Or, you can just go to Emojipedia and copy-paste the emoji from there. xf_form.js relies on x_press.js, so you’ll be adding them both to your <head>. I’ll point the way at the end of this article.

xf_form.js helps with the expand / collapse menu buttons. These use the onclick event, rather than an <a href=…>. Each button has a data-menulevel attribute. I made the first level 0, then 1, then 2. But these routines allow you to assign whatever levels you want. You could start with 10, then 9. You don’t need to go in order, but why confuse yourself.

So, on my menu, all permanent buttons have data-menulevel=”0″. One of those permanent buttons is the menu button. This used to be a triple bar, now it’s a triple dot, as that takes less room. The menu button, expands the menu by opening menu level 1. The menu button also closes menu level 1 when it’s open. So, the menu button toggles menu level 1.

My menu has 3 levels (0, 1, and 2), so the onclick for the menu button is onclick=”xf_menu_close(‘menuform’,[2]);xf_menu_toggle(‘menuform’,[1])”. Close menu level 2 for form with id=”menuform”, then toggle menu level 1. There’s also xf_menu_open. These change the style visibility between visible and hidden.

For instructions on how to use my x_press.js and xf_form.js libraries, go to my Really Useful Javascript webpage. These libraries are light-weight, so they won’t slow down your site. Just keep in mind, that I change these libraries at will. Mostly I add new functions. But sometimes I have to revamp an existing function. And if you’re using that function, it may no longer work. So, contact me from my website to be notified of any changes I make. And, if enough people sign up, I may create new functions, rather than revamping existing ones. That way, the existing ones will still work. Yet, there are times when Google forces me to rewrite functions and not leave the old ones. So, sign up to stay informed. I promise I won’t spam you.

Expressive Forms – Part 3

Programmer

Previously, I explained how to create a contact form. In this part, I’ll explain how to create a calculator form.

In order to evaluate a math equation, you first have to parse it. Then you have to evaluate portions of the equation in the correct order. There are javascript libraries which will evaluate equations for you. I looked at 5 or 6 of those. Not too hard to implement, however, you have to specify the equation the way they want you to, not in mathematical format. So, I wrote my own in xf_form.js.

To parse the equation (separate the values from the operators), you need some sort of parsing routine. Those are very complicated to write. So, instead, I make the website programmer place the separate values and operators into an array, in the order of the equation. I figure, they already know and have access to those various parts. So, parsing done! Oh, just make sure the values are numbers and not strings.

Then I wrote a simple routine to evaluate the equation from the array. You can use operators **, *, /, +, -. These are evaluated based on mathematical rules – ** first, then * and / left to right, Then + and – left to right. I was going to provide for % (remainder), but who knew what order you wanted that evaluated in.

I provide input fields for all the values and operators. The operator fields are readonly, though you could not make them readonly and let the user enter their own equation. Because the keyboard operators threw off my vertical alignment, I display other similar symbols, but the value is still the keyboard operator.

But, your equation still might have nested equations: 1+2*(3+4). 3+4 is nested. Innermost equations are evaluated first. I used data-calceq to specify the level. For 3, +, 4, data-calceq=”2″. For 1, +, 2, *, data-calceq=”1″. Now I need somewhere to store the result of 3+4. I call this hidden input field xf_calc_resultN where N is the level number – in this case 2. xf_calc_result2 has data-calceq=”1″.

Now I call my routine to evaluate the form, passing the form id. Form has data-calceqs=”2″ (the number of equations). My routine gets all the children (descendants) of the form. It evaluates the equation where data-calceq=”2″. Then it evaluates the equation where data-calceq=”1″. If you had 10 equations, it would evaluate them from 10 to 1.

The result of equation 1 needs to go somewhere. I place it in an output field with id=xf_calc_result1.

onsubmit=my form evaluation routine, evaulates the form when the user clicks the submit button, which I’ve titled Calculate. Everything’s fine, all javascript, all simple, all client-side. However, there’s one wee problem. As soon as the user clicks the submit button, the equation is evaluated and displayed, then the form is cleared. To keep the form from clearing, add another function to onsubmit. onsubmit=”xf_calc(form_id);event.preventDefault()”. The Default that is being prevented is clearing the form. That’s not technically correct, but that’s what appears to be happening. What is technically happening is not really important. What’s important is that your form isn’t being cleared and the user can see the results.

If your formula’s not too complicated, you can use xf_calc. Otherwise, you’ll need to call xf_math_eval(equation_array) multiple times and piece together the results. You can still use hidden input fields for intermediate results.

Stay tuned. Next time, I’ll finish up with a menu form. Then I’ll tell you where you can find out more about xf_form.js.

Expressive Forms – Part 2

Programmer

Part 1 was an introduction to Expressive Forms. In Part 2, I’ll cover a contact form because a) that’s probably the one you’re most interested in, and b) it covers the most ground.

With a contact form, you want to collect at least an email address and receive that email address in an email to yourself. You probably also want to collect the potential client’s name. Perhaps their phone number. And, some info about why they’re contacting you.

Most email forms reach out and grab you. I hate when that happens, so I don’t advise doing that. Rather, make the form obvious (or the click of “Contact Me”). Let the user reach out. After all, I want clients who want to engage with me, rather than those who happen to be swept to my shore and almost drowned in the process.

So, go ahead and design your form. On my test contact form, I had Reason for Contacting Me. This is typically a list of choices including “Other”. If you want a list, use a <select> element, otherwise, use an <input type=”text”> element. With <select>, you place each option in <option> tags. And you can group <option>s in <optgroup>.

Next, I want their name – <input type=”text”>. For each field where the user will enter something (or select something), I use a <label>. <label> is related to <input>. <label for=”name”>Enter a Name</label><input id=”name”>. Note that the for of label is the same as the id of input. Also note that there is no </input>.

Next, for their email address. <input type=”email”>. When the user clicks the submit button, this field will be validated as an email address. The validation isn’t very robust. a@b is considered valid. You can greatly improve this validation by adding a pattern. Patterns can get long and complicated, so I won’t go into that here. The great thing is that you only have to supply the pattern. You don’t have to supply any real code to see if the email address matches the pattern.

For my test contact form, I grouped the client’s email address field and a check-box, using fieldset. The checkbox is for whether the client wants to be cc’d on the email. If they are cc’d, they will end up getting your email address. And, at this point, I think that’s a good thing. That way, they can contact me and I don’t have to bug them about it. Still, until that email goes out, my email address can remain hidden. With fieldset, I can include a legend (title for the group/set). No need in this case. Fieldset defaults to have padding which through off the alignment of my fields. I provide a class for that in xf_form.css.

A telephone number, if you wish. <input type=”tel”>. You can just as well say <input type=”text”>, since tel provides no validation. Again, you can use pattern to add validation. However, consider the reason that there is no validation. That’s because international telephone numbers can have a very wide variety of formats. If you want to limit to northern-hemisphere numbers, you can use a pattern for that. But, even UK numbers have a variety of valid formats. If you really want to make sure, the user enters a valid phone number you can use Twilio. However, if it’s me, I’m not going to give you my phone number until we’ve had some initial email conversation. So, why make me mad? You can somewhat validate the phone number with minlength=”6″. You can add a pattern to limit non-numeric input to #,(,), -, and space.

And, what is the real reason they want to contact me. For this, I used <textbox> and allowed them to enter some more text. You might want to add maxlength=”1000″ or possibly less.

Now, there’s one last field that needs to be on your form, and that’s your email address. However, if you wanted the user to be able to see your email address, you would have just supplied them with an email link. Well, it’s not so much the user, whom you don’t want to see your email address, but all those bots lurking about. The best thing you can do for that is to use an excellent webhost for your website. I’ve used Dreamhost for years – so far, so good.

Let’s continue to hide your email address – <input type=”hidden”>. Hidden fields can’t have labels. I tried checking for one and my javascript code just quit. Turns out I first needed to check and see whether my field could have a label before I checked to see if it did. So, I hid the email address. A bot can still easily see it. So, I encrypted it. I used a replacement technique to obfuscate it. I could have really encrypted it but, it’s not a password. It’s only an email address. I made the encryption easy to apply, but hard for a bot to notice and harder for it to reverse. I added that routine to xf_form.js. The routine encrypts and decrypts and allows you some control over the encryption.

I used the data-process attribute to tell this field what routine to call to decrypt the email address. data-… is an attribute that you can specify. The attribute starts with data-, and the rest is whatever you want. So data-process. You can easily retrieve whatever’s in data-… with element.dataset…. Typically, you might have data-email-part=”to” to tell you that this field goes into the to of the email. However, javascript sees that as dataset.emailPart. Since I think that emailPart is confusing – which letter should I make uppercase? – I used data-emailpart. Then I know that javascript uses dataset.emailpart.

Every field on my contact form gets a data-emailpart to tell it if this information goes into the To, CC, Subject, or Body of the email. You have to encode the spaces, and I use decodeURIContent for that.

xf_form.js provides xf_send_email(form_element) to send the email when I click the submit button. The flow of what happens is: The user enters the information into the form. They click Send Email which is a submit button. The form has no action or method. It does have onsubmit=”xf_send_email(form_element)”. First, the onsubmit action validates the form according to minlength, required, pattern, type, etc. attributes. Then it executes xf_send_email. xf_send_email goes through each element and places the information in the appropriate part of an email, encoding as needed. Then it mimics the user clicking on an email link. The user is presented with an email to send.

The drawback to this method is that the user has to click send email twice. That’s ok, you can label the first one create email. They’ll have a chance to grab my email address (though no need as they could have checked to cc them the email. And they can clean up the email, if needed. This also means they can remove information that you wanted to be required.

The good part is, no coding and their information isn’t sent over the web. Well, it isn’t sent over the web outside of the email. If you need something more, use smtp.js to keep your email address secure. In my opinion, what I’ve done is sufficient. And I didn’t have to resort to php and/or server-side code. You don’t even need to write any javascript, other than a little test script to call my routine to encode your email address in the first place.

Just create your form. Add some data- attributes. Add onsubmit=…. And, you’re done.

Stay tuned. In the next part, I’ll explain how to use xf_form.js to add a calculator form to your website. You can combine it with the contact form if you like. And, before I finish this series, I’ll tell you where you can get xf_form.js. It’s free. You don’t even have to fill out a contact form. I’m just waiting until I have the appropriate place to put that information.

Expressive Forms – Part 1

I recently created xf_form.js – a javascript library to help website programmers and designers use simple forms to make their website more expressive. Website programmers have a love/hate relationship with forms. They hate entering information into them, but they love collecting information with them. At least the website owners love the information that is collected with them. But forms can be oh, so much more than an information gathering mechanism. Mechanism, that sounds so dull, doesn’t it.

The first thing you want to do with a form is design it. Most forms have dull and boring designs. Give it some color. Place a background in the form. Make the fields transparent and show your logo through them. Just a little css for styling, and you’ve made it more expressive.

So, why xf_form.js? Well, you need a script/scripts to process the information. In the old days, you’d design a form using HTML and CSS,. The form would send the information to the back end (server-side) where it would be processed and sent to you. That’s still the way many forms are processed. The back-end code is tedious, not pretty, and specific to the form (or form type). It’s back-end so that it’s harder to hack. But why not make it simpler. In fact, why not bring it to the front end (client-side). Unless we’re talking passwords, we can still make it hard to hack. I can show you how to keep the client’s information safe. And besides, we can do more than just collect information with a form. We can use a form to process information.

I created three sample forms using xf_form.js. Well, I created them with HTML and CSS. But their data is processed with xf_form.js. The first form is a contact form. Don’t worry, I’ll explain how to have the client send you an email using a form without exposing their information to the internet. It’s simpler than you think. The second form is a calculator. Perhaps I’ll replace my form calculator which shows you how much money you can save with an Electric Car, with xf_form.js. The third is a menu. The menu could be a div, rather than a form and still use xf_form.js. I’ll be featuring this type of menu in my upcoming bookstore website. My javascript routines expand and collapse the menu.

To be continued … Check back for How to Process a Contact Form.

Coloring Google Charts

Programmer

I recently updated my xg_graph.js javascript library to allow coloring of Google graphs. (Google calls them charts). xg_graph.js makes drawing bar, column, line, pie, table, and geo charts easier. Line charts can contain lines or points or both. Pie charts can have a hole in the middle, in which case they’re a donut chart.

So, what can you add color to on a Google graph? Google graphs have colors by default, so you’re not adding colors, you’re overriding colors. This is even true, when you’re giving the text a color other than black.

For a bar chart, you can override the colors of annotations, the background, the background of the chart area, the colors of the bars, items along each axis, items in the legend, the title text, the tooltip or hint (the text that appears when you hover over something), and trendlines. You can maybe override background color, text color, border color, and/or transparency, depending on what you’re overriding the color of. Note: To override transparency, you override opacity which is the opposite of transparency. When will css add transparency to styling? That’s what I’d like to know.

While you can override colors for all those various things on a bar chart, xg_graph.js only allows you to override the primary coloring, which is for the bars. Bar, Column, and Line charts come in two basic fashions. In the first one, there are single bars/lines. In the second, there are multiple. When there are multiple, these are called series. The first of the series is called the primary. In the case of bar and column charts the series can be stacked on top of the primary.

So, the question comes, if you’re coloring the bars are you just coloring the primary bars, are you coloring the series, or both? Let’s talk about the series first, because that’s easier to color. You can color the series with the colors option. Just provide an array of colors. There is also a series option which accomplishes the same thing. However, you have to provide an array of objects, whatever those are. I use the colors options.

Google graphs use 31 default colors for the series. If you have more than 31 series (and why would you), the colors start repeating. In 2014, Google start providing Material charts. Material charts use Google’s Material Design Colors. When coloring series for Material charts, the first three series are different shades of blue, then next three are different shades of red, then orange, then green, purple, aqua, peach, gold, blue violet, pink, and now we’re up to 30. Even though it’s been 8 years, Material charts are in beta.

To color each primary bar differently, you have to add a style column to the data array. In your data array for Google graphs, the first row is headings. The heading for the style row is {role:’style’}. The brackets indicate that this is an object. This column for the other rows can contain the color ‘red’, or an object which is the style {color:’red’,opacity:50%}.

If you’re confused at this point, don’t worry, I’ve made it easy. To draw a graph with xg_graph, you place some code in the <head> of your webpage. Then you call xg_graph_google_init(‘bar’) or whatever graph type you’re drawing. This sets xg_graph_color_scheme to ‘default’, which will make it use the default colors. Then you set up your data array. To change the primary bar colors, change xg_graph_color_scheme to ‘primary’. Define a color array, and call data_array = xg_graph_google_apply_color(data_array, color_array). If you don’t specify enough colors, the colors you specify will be repeated. This adds that style column to your data array for you. To change the series, set xg_graph_color_scheme to ‘series’ or to ‘primary+series’. Then call xg_graph_google_apply_color(data_array, color_array). The data array doesn’t need to be updated, so don’t say data_array = …. Series colors are kept in a global array behind the scenes.

Let’s talk about pie, pie graphs to be specific. Donut graphs aren’t separate from Pie graphs for Google. You just specify the size of the pie hole. If there’s a hole, it’s a donut graph. It’s too bad that you can’t make the hole transparent and place an image of ice cream below the pie graph. Then you’d have a pie a la mode graph. Well, maybe you can, try setting background color to ‘transparent’. If you get this to work, let me know.

Another thing to note: Pie graphs can be 3D. Donut Graphs cannot be 3D. Pie graphs are the only type of Google graphs which can be 3D. You can somewhat fake 3D for Bar and Column graphs, by specifying border colors in the style column. I provided for 3D Pie graphs. I didn’t provide for fake 3D Bar graphs.

For pie graphs, xg_graph_google_apply_color colors the slices. This could have been done with either the colors or slices option. I used colors, because slices is an object, so more difficult. These colors work the same way as series. But, since there is only one option, you don’t have to change xg_graph_color_scheme. It is changed for you.

Geo graphs are maps made of line drawings. Google also has map graphs which use google maps and markers. Markers and colored text on geo/map drawings require you to obtain a maps API key and let Google Graphs know what that is. I didn’t provide for that.

By default, Geo graphs color the regions/locales in your data_array with a white-green gradient. A gradient varies the color based on the gradient colors. So the countries with lower values will be more white. Those which higher values will be more green. Geo graphs are always going to color locations based on a gradient.

For Geo graphs, it looks like you’re stuck with a gradient. However, you can give that gradient whatever colors you want, and as many colors as you want. Call xg_graph_google_apply_color(data_array,color_array). For the previous graph types, colors in color_array are repeated until there are enough colors. For Geo graphs, they’re not. If your color_array contains red, orange, yellow, green, blue, and violet, the countries will be colored using a gradient made of all those colors.

But wait, what’s this? If your data_array contains n locations and your color array contains n colors, each location is colored differently. If you want to color each location with a separate color, xg_graph.js also allows you to do that with an svg (a specific image type) map. You have to provide the svg.

And last, but not least, table graphs. A table graphs displays data in a table. The user can sort the data. You’ve probably seen these somewhere on the internet. Perhaps in Wikipedia. In a table graph, you may want to sort the various rows. By default, Google uses a white lavender gradient for the header row. Then, every other data row has a background of snow. With xg_graph.js you can apply background coloring to the header row. You can also apply coloring to either all data rows or to every other data rows. Table rows are styled using the cssColorNames options. This is an object containing the class names to be used in styling the rows.

In xg_graph.js, you need to provide the following classes, if you want to color the rows: xg_table_header_color, xg_table_row_color, and xg_table_alternating_row_color. Each class should contain background-color. The header row background color will be a gradient of white and whatever color you specify. If xg_graph_table_alternating_row_style=true, every other row background is colored. Since these classes are styles, and since you’re providing the classes, you can specify more than just background-color. Since coloring a table graph is based on classes, rather than the data array and color array, call xg_graph_google_apply_color(”,”) to apply coloring.

That’s it. If you want to provide other coloring or if you want to color other types of google graphs, you’ll need to code that yourself, unless you talk me into providing that capability in xg_graph.js. I provide the simpler coloring. The rest looks like it gets more complex.

Helper Routines for Google Graphs

Programmer

Google calls them charts, rather than graphs.

I updated my xg_graphs.js javascript graphing library. Before, I had provided for easy svg manipulation. This time, I wanted to add simple bar (horizontal) and column (vertical) graphs. I realized that the graphs wouldn’t look that good. And I won’t mention that it was getting way too complicated. So, I started looking for alternatives. I ended up writing helper routines to make using Google Graphs more simple.

I hesitated to use Google Graphs, because I like to keep my footprint small – makes for faster loading and uses less energy. Yet, I knew that Google would keep things as light as they could. So, I went down that route and I like the results.

Using Google Graphs, you can create all sorts of graphs: annotation, area, bar, bubble, calendar, candlestick, column, combo, diff, donut, gantt, geo, gauge, histograms, interval, line, map (uses satellite images rather than line drawings as geo does), org, pie, sankey diagram, scatter, stepped area, table, timelines, tree map, trendlines, waterfall, and word trees. I only coded for the most popular types of graphs. I’ve never heard of some of these graph types.

Donut charts are Pie charts with a pie hole in the middle. Bar and Column charts are similar, the bars just go different ways – horizontal vs vertical. A Table is a sortable table as you may have seen somewhere on the web. Geo charts use maps to graph things – slightly similar to my svg graph routines.

You can read the documentation here. I kept it simple and generic, which meant there are limitations. Still, my routines will help you draw a nice looking graph, simply. I’ll be adding more functionality. And I’ll be posting about those improvements.

A Generic Substring Function

Programmer

You may not remember the PL/I programming language (that’s a roman numeral 1, not an uppercase i), but I do. Well, not a lot. What I do remember is that the code looked like the programmer. That is, it looked like the programming language that the programmer knew. While, this is true of all programming languages, PL/I was designed with this in mind.

But, back to substrings. One substring of abcde is bcd. Depending on the language you’re programming in, the substring function or method is written differently. Function is typically, substr(string,start,end). Method is typically string.substr(start,end). The differences are in the name of the function / method and in the start and end.

Let’s take excel for instance. If you’re writing a formula, the substring function is mid (for middle). mid(string,start,length). In this case, start is the starting position. And length is the number of characters to return. mid(“abcde”,2,3) returns “bcd”. If you’re in excel writing macros (vba), it’s the same function, which is nice.

COBOL is similar. SUBSTR(STRING,START,LENGTH). The only difference is the name of the function.

Javascript uses the method substr(string,start,length). The difference here is that start is an index, rather than a position. Javascript is zero-based. VBA, etc. are 1-based. Therefore index is one less than position.

According to Mozilla, substr is deprecated in favor of substring and slice. W3Schools just says, substr is part of Javascript and is supported by all major browsers. ICanUse agrees with W3Schools. And, I’m not finding anything in the javascript (ecmascript) documentation that says it’s deprecated. Perhaps Mozilla is planning to not support this in their Firefox browser. I figure as long as there’s plenty of substr functions out there, they and all the other browsers will support it. So, I continue to use it.

But what about that substring and slice function? Python doesn’t even provide substring, only slice. How are they different?

substring and slice methods use the same format, other than the name. string.slice(start,end). You can get fancy and use negative values for start and end. If you do, substring and slice work differently. I suggest that you not do that, because whoever has to maintain your code, may get confused. In my case, that would be me.

So, instead of specifying the length or number of characters to return, substring and slice specify the end index. However, they make it (IMHO) complicated. Start and end both refer to indexes. However, start is inclusive and end is exclusive, according to Python documentation. What that means is the start index is where the substring starts. The end index is one character after where the substring ends. If you weren’t confused before, you probably are now :(.

All programming languages that I researched (and I researched about 15), use one of those syntaxes to return a substring, though they might call the function / method something different. Lisp calls it subseq and uses the slice syntax.

So, how to make one substring function which allows programmers to use the syntax they’re used to? I think that’s important, because getting the parameters wrong can cause havoc. Trust me on that one.

I added x_substr function to my x_press.js library as an example generic substring function in javascript. First, you have to work in the language that you’re programming in. For javascript, that means start and end have to be converted to indexes, if they’re not passed that way.

You also have to know whether the programmer is passing positions or indexes (or lengths). I determine this with parms. x_substr(string,start,end,start_type,end_type). start_type and end_type are arrays. The first element of the array is pos, ind/idx, or str => Position, Index, or String. Notice that I introduced a new way of returning a substring – identify it with strings. For end_type, the first element can also be len for length. The second element is bef, at/on, aft – for before, at/on, or after. VBA syntax is at or on for start. Slice syntax is at/on for start and aft for end. Perhaps I should add sli for slice. For len, the second element should be ”. In addition to adding str for either start or end, I also added bef. I figure to be fully generic, if there’s an aft, there must be a bef.

substr(string,start,end,[‘pos’,’at’],[‘len’,”])

substr(string,start,end,[‘ind’,’at’],[‘ind’,’aft’])

After I determine what the start and end indices actually are, I have to extract the substring and return it. I used a simple for loop to accomplish this. Using slice may have been slightly faster, but not enough to matter. And besides I understand the for loop, sort of.

Hardwired: Staying Wired in a Wireless Age

I just published my 108th book. I like to work hardwired. It’s faster, more secure, and there’s fewer EMFs. Plus I just love seeing all those cords dangling all over the place. OK, call me “Stuck in a rut”. Call me “Resistant to change”. You might even call me “Weird”.

The reason I wrote this book, is perhaps a selfish one. If I tell the world how to stay hardwired, some of you will. And if enough of us are hardwired, that technology will never go away. And that will ensure that I can stay hardwired.

Who would want to have their computer hardwired? Gamer’s, for one.

You can even hardwire your cellphone, should you wish to do so.

Is it worth the hassle? What hassle? All depends on your frame of mind.

Word and Excel – Get More Workspace

Programmer

This article is an extension of a previous post: https://www.yellowbearjourneys.com/beachreport/microsoft-office-toolbars/

System Level Settings

You need to be able to see more in your viewscreen. My current laptop screen size is about 8 inches high by 14 inches wide. That’s my total maximum workspace, if I could use all of it. That size is not really relevant. What is more relevant is the screen resolution. Mine is set to 1920×1080 pixels, which is the highest mine will go. The higher the resolution, the more I can view in my workspace. To change this in Windows, press Start, then Settings, then search for Display. And go to System settings.

Also, in my display settings, the size of text, apps, etc. is set to 150%. I can set it higher or lower. If I set it lower, I could see more on the screen. However, I won’t be able to make out what I’m seeing without much stronger glasses. And that’s not likely to happen, so 150% it is.

There’s another display setting which you can find by searching for Vision and choosing Ease of Vision settings. Here I could make my text bigger and reduce the amount of text that I see on a screen. I think 100% works well here.

On my screen, there’s a taskbar at the bottom. I keep mine limited to one line. I have a lot of apps that I want on my taskbar. To keep the taskbar to one line, I create folders in My Documents folder and place shortcuts to those apps in those folders. Then I right-click on the taskbar and add each folder. If I want to rearrange the apps in each folder on the taskbar, I open it from the taskbar and drag the apps to rearrange them.

But, how do you create shortcuts of your apps. The easiest way I’ve found to do that, is to start the app. Once it’s running, press Ctrl+Alt+Del. From that screen, click on Task Manager. On the Processes Tab, at the top, there will be a list of active Apps. Click the right-arrow to see more details about the app that you want to create a shortcut for. Right-click on the app and click Go to File Location. Once you’re at that file location, right-click on the app and copy it. (Or select it and Ctrl+c). Now, go to My Documents. Open the folder that you’ve put on your taskbar. Right-Click in that folder and Paste Shortcut. Now, right-click on the Shortcut to rename it. You don’t need Shortcut. You don’t need .exe (it’s just a shortcut name). I know that was several steps, but it seems to always work.

There may be a Scrollbar on the right-hand side that takes up a little bit of workspace when it’s visible. Microsoft decided to hide it. That’s great when you need it out of your way. But how can you tell that there’s a scrollbar to make visible without hovering over every inch of your screen to see if there’s a scrollbar there or not?

To make the scrollbars always visible in Windows, go to the Vision Display settings, and change the setting to Automatically Hide Scrollbars in Windows. Apps may override this setting. And you might have to hover over a Scrollbar to get it to display in the first place.

There are programmatic ways to make the Scrollbar skinnier. I don’t find those helpful. It’s hard enough for me to place the cursor on the Scrollbar as it is.

Word

At this point, you’ve gotten as much screen space as you can at the system level. Now, let’s talk about Word.

Word has a toolbar or banner at the top, right under the menu. To toggle this toolbar on and off, Ctrl+F1. If you need some of those tools handy even with the toolbar off, right-clock on the Customize Quick Access Toolbar. Then choose the tools that you want to always have available. This can be a little confusing the first time. The more you work with this, the easier it becomes. If your Quick Access Toolbar is below the menu (and banner), right-click on it to Show Above Ribbon. This will move the Quick Access Toolbar to the top of the screen, above the Menu. This space was already there, pretty much unused. So, moving your Quick Access Toolbar there will give you more workspace.

I like to see the Navigation Pane – this is a checkbox on the View Menu. I also like to see the Rulers (View Menu again). These take up space, but there helpful enough that I’ll keep them there. You can also view Gridlines, but I find that very unhelpful in Word. I you don’t use them, uncheck them. The Navigation Pane will show up if you Ctrl+F to Find something of if you click Find on the Home Menu.

There’s a down arrow at the top of the Navigation pane which will let you resize it. Or you can hover over the right-edge until you see a double-arrow for your cursor. And that will let you resize it. I like the default size.

I write books. For those documents, I set my page size to 6×9 and all margins to .5 inches. If it’s not a book, I set my margins to .25 all around. This gives me more workspace. This is on the Layout Menu.

Back to the View Menu. Word tries to default to Read Mode. This shows two pages per page. However, it closes the Navigation Pane. So, I normally use Print Layout.

There is Draft Layout which will hide heading and footing. It will also reduce the page break to a thin line. That would give me more workspace. However, especially when I’m writing books, I need to see what it’s looks like on the page.

On the Home Menu, there’s the font and font size. Word’s Default font is Calibri at 11 point. To me, Calibri is blurry. I much prefer Times New Roman, even though it’s a little bigger. I also can’t read 11 point easily, so I use 12 point. Calibri doesn’t have the little extra tics or serifs. Times New Roman does. I like heading fonts without serifs and text with.

To change the default, either click on the right-pointing down arrow on the Home Menu in the Font section, or Ctrl+D. Change the font, then click on Set as Default.

Word also defaults to leaving extra space between lines and paragraphs. I remove that. Click on the right-pointing down arrow on the Home Menu in the Paragraph section. You can also change the paragraph indentation here. Word defaults to no indentation. I set special to first line and .19 inches to indent the first line. I set this as a default. I then select a paragraph with this indentation and right-click on Normal and choose Modify, to change that style. Normal and No Spacing are similar styles. Normal has extra line spacing. No Spacing does not. I set them the same way.

Excel

Excel workspace can be increased in many of the same ways as Word. Toolbars work the same way.

On the View Menu, you can show / hide the Formula Bar, Headings, and Gridlines. The Formula Bar is handy for typing long text and formulas (long or short). There’s a down arrow on the Formula Bar which will expand it to the maximum size that you have set. When it’s expanded, that down arrow becomes an up arrow. Click on it, and the Formula Bar is reduced to one visible line. I have my Formula Bar expanded to six lines. You may not need that many. To expand the size of the formula bar, hover over the bottom until your cursor changes to a double-arrow. Then drag the bottom of the Formula Bar down or up.

Headings displays column labels (A, B, …) and row numbers. I have this checked as it comes in very handy for formulas.

Gridlines, help me see individual cells. I find this to be very useful in Excel and detrimental in Word.

There is a Ruler check box. That’s greyed out unless you’re in Page Layout View (from the View Menu).

There is no Navigation Pane in Excel.

You can set your font and font-size. However, this is in a different place. On the File Menu, click Options (or More… then Options). In General, change the Default Font and size under When Creating New Workbooks.

Sometimes in Excel, you’ll want to use a monospaced font, such as Courier New. However, for readability, you may not want to make that your default font. This will make text line up. I prefer Arial for the default font for Excel most of the time, even though it’s bigger than Calibri.

Excel does not have Paragraph settings.

General Guidelines

Before changing something to increase your workspace, ask yourself these questions:

  • How much space are you saving? Is it worth it.
  • Is the text still readable?
  • Is it too much trouble or too confusing?
  • Does it make me more productive? Or more importantly, can you get your work done faster so that you have more time to play. If you’re working faster and still don’t have time to play, something needs to change.