how to Archives - Complete, Concrete, Concise https://complete-concrete-concise.com/tag/how-to/ Practical Information Without The Bloat Sat, 18 Mar 2023 19:55:18 +0000 en-US hourly 1 https://wordpress.org/?v=6.9 CSS – Understanding Inheritance and Default Values https://complete-concrete-concise.com/tutorials/webdev/front-end-basics/css-understanding-inheritance-and-default-values/ Fri, 22 Mar 2019 19:59:11 +0000 https://complete-concrete-concise.com/?p=3801 Learn which CSS properties child elements inherit from their parents and what their default values are.

The post CSS – Understanding Inheritance and Default Values appeared first on Complete, Concrete, Concise.

]]>

You’ve implicitly encountered inheritance and default values while working with CSS.

Contents

  1. Inheritance
  2. Default Values
  3. Table of Inheritance and Default Values
  4. The ‘inherit’ Value
  5. The ‘default’ Value
  6. Final Words
  7. References

Inheritance

When working with CSS, you probably noticed that styling like this:

.important {
  font-size: 32px;
}

When applied to HTML like this:

<div class="important">
  <p>This is important!</p>
</div>

Results in output that looks like this:

This is important!

This is because the p element inherits the font-size property applied to its parent div.

Not all properties are inherited by child elements.

Consider the following CSS:

.important {
  border: 1px red solid;
}

When applied to the following HTML:

<div class="important">
  <p>This is important!</p>
</div>

Results in the border only applied to the div element and not the p element:

This is important!

If the p tag inherited the border property from the parent div tag, it would have looked like this:

This is important!

Which is, probably, not what you want.

Default Values

When you write some HTML like:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Hello World</title>
    <meta charset="utf-8"  />
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

You see Hello World! displayed in the browser.

It is very likely that the font will be serif or sans serif, it will be 16px in size, the text will be black on a white background, and there is no border – and you didn’t have to style anything.

This is because every CSS property has a default value. The default value may be changed through inheritance or when you explicitly set the value.

Table of Inheritance and Default Values

The following table shows which CSS properties (that we’ve seen) are inherited by child elements from their parents.

It also shows the default values for those CSS properties.

Browser implementations sometimes set values other than what is defined in the CSS specification. Footnotes are given for many of the values and any alternate values given should be regarded as informative rather than absolute.

CSS Property Inherited Default Value
color Yes Depends on the browser (usually black)1
background-color No transparent2
padding No See the individual properties
padding-left No 03
padding-right No 04
padding-top No 05
padding-bottom No 06
margin No See the individual properties
margin-left No 07
margin-right No 08
margin-top No 09
margin-bottom No 010
border No The border is transparent and has a style of none
display No Depends on the HTML element, but the most common are inline and block11.
width No auto
height No auto
box-sizing No content-box
font-size Yes medium (usually 16px)12
font-family Yes Depends on the browser
font-weight Yes normal13
font-style Yes normal14
line-height No normal
text-align No A nameless value that acts as ‘left’ if the text direction is left-to-right and ‘right’ if ‘direction’ is right-to-left.
float No none
clear No none
content No normal

The ‘inherit’ Value

You can force a child element to inherit its parent’s property by using the CSS value inherit:

.important {
  border: 1px red solid;
}

.what-will-this-do {
  border: inherit;
}

When applied to the following HTML:

<div class="important">
  <p class="what-will-this-do">This is important!</p>
</div>

Will cause the child element to inherit the parent’s border property:

This is important!

The ‘default’ Value

If you want to reset an element’s property to its default value, you can use the CSS value initial15.

Consider the following styling:

p {
  color: red;  
}
.default {
  color: initial;
}

When applied to the following code:

<p >This is some styled text!</p>
<p class="default">This is some default styled text</p>

Results in the following:16

This is some styled text!

This is some default styled text

Final Words

Child elements may inherit CSS values from their parents – it depends on the specific CSS property.

All HTML elements have default styles applied to them. Some of these styles are determined by browser settings, others from the CSS specification.

References

  1. CSS Default Properties
  2. CSS Inheritance
  3. Firefox’s Default Style Settings
  4. Chrome’s Default Style Settings
  1. The <mark> tag has a default color of black. The <a> tag default color is defined by the browser – it is usually #0000EE for an unvisited link, #551A8B for a visited link, and #EE0000 for a link you are hovering over.↩
  2. The <mark> tag has a default background-color of yellow.↩
  3. This is true for all the HTML elements we have seen so far. Some HTML elements we haven’t seen may have a non-zero default value.↩
  4. This is true for all the HTML elements we have seen so far. Some HTML elements we haven’t seen may have a non-zero default value.↩
  5. This is true for all the HTML elements we have seen so far. Some HTML elements we haven’t seen may have a non-zero default value.↩
  6. This is true for all the HTML elements we have seen so far. Some HTML elements we haven’t seen may have a non-zero default value.↩
  7. This is true for all the HTML elements we have seen so far. Some HTML elements we haven’t seen may have a non-zero default value.↩
  8. This is true for all the HTML elements we have seen so far. Some HTML elements we haven’t seen may have a non-zero default value.↩
  9. This is true for most HTML elements we have seen so far. For <p> tags it is equal to the font-size. The <h1> <through <h6> also have default values for top and bottom margin that are non-zero – the specific value depends on the tag.↩
  10. This is true for most HTML elements we have seen so far. For <p> tags it is equal to the font-size. The <h1> <through <h6> also have default values for top and bottom margin that are non-zero – the specific value depends on the tag.↩
  11. The following tags have a default display of none: <head>, <title>, and <meta>. The following tags have a a default display of block: <html>, <body>, <h1> through <h6>, <img>, <ol>, <ul>, <li>, and <p>. The following tags have a a default display of inline: <strong>, <em>, <i>, <mark>, and <a>.↩
  12. The <h1> through <h6> tags have varying default font sizes. Assuming 16px as the default font size: H1 = 32px, H2 = 24px, H3 = 19px, H4 = 16px, H5 = 13px, and H6 = 11px.↩
  13. The <h1> through <h6> and the <b> and <strong> tags have a default font-weight of bold.↩
  14. The <i> and <em> tags have a default font-style of italic.↩
  15. Yes, it would make more sense if it was called default, but the CSS specification calls it initial.↩
  16. If your default color (set in the browser) is red, then both outputs will be red.↩

The post CSS – Understanding Inheritance and Default Values appeared first on Complete, Concrete, Concise.

]]> Comments in HTML and CSS https://complete-concrete-concise.com/tutorials/webdev/front-end-basics/comments-in-html-and-css/ Mon, 11 Feb 2019 15:36:32 +0000 https://complete-concrete-concise.com/?p=3789 Comments help to document and explain your code to others and your future self.

The post Comments in HTML and CSS appeared first on Complete, Concrete, Concise.

]]>

An important part of coding is documenting your code with comments

Contents

  1. Introduction to Comments
  2. HTML Comments
  3. CSS Comments
  4. Guidelines for Writing Good Comments
  5. Final Words
  6. References

Introduction to Comments

In a perfect world, code would be self documenting and as you read it from top to bottom you would perfectly understand its structure and behaviour.

In the real world – except for trivial code examples (the kind you fit in a dozen lines or less and can keep in your head) – understanding any significant piece of code takes considerable effort.

Comments are textual information that are added to the code to help document the code. Comments do not affect the behaviour of the code in any way and are ignored when the code is processed. Comments are there to help humans understand the code easier – but only if they are useful and accurate.

HTML Comments

HTML comments begin with <!-- and end with -->. In between those characters, you can have almost any type of text string you like and it can span multiple lines.

The specification has a few rules regarding HTML comments:

  1. the text must not start with the string >,
  2. nor start with the string ->,
  3. nor contain the strings <!--, -->, or --!>, +
  4. nor end with the string <!-

Basically, as long as you don’t try to nest HTML comments inside HTML comments, you will be fine.

CSS Comments

CSS comments begin with /* and end with */. In between those characters you can have almost any types of text string you like and it can span multiple lines.

As with HTML comments, you cannot nest CSS comments, so the first */ will always end the comment:

Guidelines for Writing Good Comments

Comments are written for two types of audience:

  1. Your future self
  2. Others

Your future self (technically speaking) is somebody else because, 6 months or a year or 10 years in the future, you are unlikely to still be in the same frame of mind as when you wrote the code. So everything that was “obvious” when you were writing your code is no longer obvious.

Comments are written for two different purposes:

  1. Documenting (what you are doing)
  2. Clarifying (why you are doing it)

Comments should answer the questions: what and why. The how is answered by the code itself because that is the implementation.

Let’s comment the first HTML program we encountered in this tutorial series:

In general, you shouldn’t comment as extensively as I did in the example above – but for a tutorial it is fine.

When you are learning, it is a good idea to comment freely – explain what you are doing and why you are doing it. As your knowledge develops, you will find yourself documenting less and less.

Your comments should document why you are doing something. For example, you might have a requirement for a particular type of webpage, you could embed the webpage description as a comment:

Of course, this information could be in an external design document instead of the webpage.

The big problem is maintaining the code comments up to date. You have to be diligent to ensure that you update the comments when making changes to the code that don’t do what the comments say.

I recommend you comment freely as you learn to develop. Comment what you have learned:

Eventually, you will stop writing mundane comments.

You should avoid commenting what is obvious from reading the code because it adds nothing to the information:

But you can document specific requirements:1

One use of comments is to structure your code:

Unfortunately, your code won’t always cooperate to break down into such nice clear categories.

Final Words

  1. Comment your code freely.
  2. Don’t comment anything that is obvious.
  3. You can explain what you are doing.
  4. You can explain why you are doing something.
  5. Don’t explain how how you are doing something because that is the code itself.
  6. Keep your comments up to date (in general, you should avoid comments that could be rendered obsolete)

References

  1. HTML comments
  2. CSS comments

  1. Read more about Twitter’s brand requirements. Many organizations and companies have very specific rules regarding the use of colours or fonts or any other aspects that are associated with their brand.↩

The post Comments in HTML and CSS appeared first on Complete, Concrete, Concise.

]]> CSS – How and When to Use Float https://complete-concrete-concise.com/tutorials/webdev/front-end-basics/css-how-and-when-to-use-float/ Mon, 25 Jun 2018 12:54:41 +0000 https://complete-concrete-concise.com/?p=3743 Floats are easier to use when you know when and how you should be using them.

The post CSS – How and When to Use Float appeared first on Complete, Concrete, Concise.

]]> While float is not ideal for every column organizing idea, it is a tried and true method and works well with older web browsers.
In this tutorial we are going to look at some best practices for the use of floating HTML elements.

Contents

  1. Divide the Page so Floats are in their own Block
  2. Float Everything in the Same Direction
    1. Everything Floating Left
    2. Everything Floating Right
    3. Mixed Left and Right Floats
  3. When You Want Floats to Overlap other Blocks
  4. float and box-sizing
  5. calc()
  6. Summary
  7. Playing Around
  8. References

Divide the Page so Floats are in their own Block

When you divide up a page, you want to ensure that floating elements are contained inside their own stacking block and .clearfix is applied to that block.
Notice how the 3 small floating images are in their own block, with other elements stacking above and below:

Header section
Large image goes here.
Smaller image
Smaller image
Smaller image
Footer section

In general, you want to use floats to make elements flow horizontally inside a vertically stacking block.
As much as possible, avoid having floating elements actually floating on top of other elements – but there are exceptions.

Float Everything in the Same Direction

As a general rule, you should float all your elements in the same direction. For English language websites (or any other language that is written from left-to-right), you want to use float: left.

Everything Floating Left

Consider the following left floating elements which overflow and wrap:

float:left
float:left
float:left

While there is too much white space on the right side, the overall flow and alignment look fine.

Everything Floating Right

Consider the following right floating elements which overflow and wrap:

float:right
float:right
float:right

There is too much white space on the left side and the right alignment looks somewhat “unnatural” or out of place.
Floating to the right is a good choice for webpages written in languages written from right to left.1

Mixed Left and Right Floats

Consider the following floating elements which overflow and wrap. The left-most elements are floated left and the right-most element is floated to the right:

float:left
float:left
float:right

The way the content overflows doesn’t look quite right.

When You Want Floats to Overlap other Blocks

There are times when you want a floating element to overlap other blocks. The most common is getting text to flow around an image:

Having text flow around an embedded image looks natural and is what most people would expect because this is a common layout style we find in books and magazines.
So this is one case where it makes sense to allow a floating image block to overlap with paragraph blocks.

Another common case is when you want to insert a side note or comment as a visible part of your content.
Consider the following (although you might want to justify the text to make it less ragged):

Another common use for a float that overlaps HTML blocks in your content is when you want to insert some sort of side note for the reader.

According to legend, Galileo Galilei dropped two canon balls of different mass from the top of the tower to show they fell at the same speed.

For example, you might be writing a document on the Tower of Pisa – which is more commonly known as the “Leaning Tower of Pisa”.
In the course of the article you will likely mention a number of facts about the tower. You might also want to mention something that doesn’t really belong in the main text, but is still a fun fact.
One way to do this would be to use a footnote or endnote. Another way, would be to insert it into the main text, but set it apart.

When you choose to deliberately overlap HTML blocks, you need to be careful about ensuring the floating element does not overlap blocks it shouldn’t.

float and box-sizing

Earlier, we saw the box-sizing property which instructs the User Agent (browser) to size HTML elements by either content area (default) or border. Recall the CSS box model:

Sizing using the content-box does not include the padding, border, or margin when setting the size of the HTML element.
Sizing using the border-box includes the padding and border when setting the size of an HTML element. It does not include the margin in the size of the element.
For normal flow objects, this doesn’t make much difference to the layout since objects just flow downwards.
When we apply float to objects, they flow horizontally and will overflow and wrap around when they reach the edge of the browser – so we have to be more careful when specifying dimensions for floating objects. It is usually best to use box-sizing: border-box for floating HTML elements. Consider the following styling and code:

.parent {
  margin: auto;
  width: 300px;
  background-color: yellow;
}

.clearfix::after {
  clear: both;
  display: block;
  content: "";
}

.block {
  width: 100px;
  height: 50px;
  background-color: red;
  float:left;
}
<div class="parent clearfix">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Which results in:

There is no obvious separation between one child block and another, since they all run together. The obvious solution is to insert a bit of space between them. We can do this by giving each child block a small margin (let’s say 10px all around):

Unfortunately, this causes the child blocks to overflow and wrap around. Remember:

  1. the parent container is 300px wide,
  2. each child is 100px wide,
  3. each child has a 10px margin,
  4. this makes each child block 100px + 10px + 10 px = 120px wide (there are 10px for the left margin and 10px for the right margin) and
  5. 50px + 10px + 10px = 70px high (there are 10px for the top margin and 10px for the bottom margin)

The height of the child blocks is not the problem for us, it is the width, so we can adjust our CSS to account for the 10px margin on the left and right of the child block:

.block {
  margin: 10px;
  width: 80px;
  height: 50px;
  background-color: red;
  float:left;
}

Which gives us the result we would expect:

If we decide to add a border (even just a 1px border) or padding (even just 1px of padding), it will cause the elements to wrap (again).
We can compensate by subtracting the added widths of our border and padding, or we can set the box-sizing property to border-box:

* {
  box-sizing: border-box;
}

Using the universal selector will cause all HTML elements to be sized according to their borders and not their content area. Personally, I think it is easier and more intuitive to work this way. When you layout the content on a page you imagine each block of content as being completely self contained – i.e., it includes the content, the padding around the content, and the border around the content. However, you do have to compensate for any margins you might use.

calc()

We’ve seen that % is a more convenient way of dimensioning floating elements than using pixels. If you want 3 equally sized columns you can make them each 33.33% of the width of the parent container. You could also make 2 of them 25% and one 50%. Unfortunately, this makes compensating for margins a bit trickier.
CSS has a function called calc() that makes this a lot easier. You simply enter the dimensions – even if they are different units – and calc() will perform the necessary calculation for you.
Taking the example above, we can write the CSS code for the blocks as follows:

.block {
  margin: 10px;
  width: calc(33.33% - 10px - 10px);
  height: 50px;
  background-color: red;
  float:left;
}

The width is set to 33.33% less 10px for the left margin and 10px for the right margin. It could have also been written as calc(33.33% – 20px), but I chose to explicitly subtract each margin independently for clarity.

Summary

  1. Divide the vertically stacking blocks
  2. Try to contain horizontally stacking blocks (floating elements) in their own vertically stacking block.
  3. As a general rules, you want all your floats to go in the same direction. In most cases this will be float: left. If you are developing webpages for a language that is written right-to-left, you will prefer [float: right]{css-property}
  4. Mixing float: left and float: right in the same containing block is, usually, a bad idea.
  5. Sometimes, you do want floating elements to overlap other blocks (like images, or side notes). In this case, you need to ensure appropriate overlapping.
  6. Setting your HTML elements to have box-sizing: border-box makes it easier to layout horizontally flowing elements, since it takes into account any border and padding values you set.
  7. Regardless of which box-sizing model you choose, you must always compensate for any margin values you apply.
  8. The CSS function calc() makes it easier to compute box sizes. It even allows mixing units (like pixels and % together).

Playing Around

Dividing Up a Page

Learning how to divide up a page layout into HTML block elements is crucial to being able to code that page.

  1. Explore a number of websites (news websites tend to be very good for this2) and pay attention to how the pages are laid out.
  2. How would you arrange the various HTML elements to create a similar layout?
    1. Which are the vertically flowing blocks?
    2. How are vertical elements nested inside of blocks?
  3. Can you code a page with a similar layout?

Many of these sites have very long pages. It is not necessary to replicate the entire page from top to bottom – just focus on the portion of the page you see in your browser window.
Don’t try to mimic all the functionality or behaviour. You haven’t learned to embed videos yet (just substitute a picture). There are effects (like shadows, animations, or dropdowns) that you haven’t learned either. Just focus on getting the general layout and look, more or less, right.

box-sizing and calc()

  1. Experiment with using box-sizing: border-box. You can do this by setting all HTML elements to have this property.
  2. Experiment using the calc() function.

You can use these with the page layouts you try out above.

References

  1. float property
  2. clear property
  3. box-sizing property
  4. calc() function
  1. The most commonly used RTL languages are Arabic, Hebrew, Persian, and Urdu.↩
  2. Some sites that I find interesting for their layout include: CBC, BBC, Engadget. Of course, you are free to try and copy the look and layout of other sites as well.↩

The post CSS – How and When to Use Float appeared first on Complete, Concrete, Concise.

]]> How to Exit Vim https://complete-concrete-concise.com/vim/how-to-exit-vim/ Mon, 22 Jan 2018 11:59:27 +0000 http://www.complete-concrete-concise.com/?p=3362 Simple help on exiting Vim.

The post How to Exit Vim appeared first on Complete, Concrete, Concise.

]]>

While Vim has a steep learning curve, you can learn enough Vim in 5 minutes to not be completely lost when you use it.

To exit Vim you need to be in Normal Mode.

To get to Normal Mode press the Escape key twice. Your computer may beep at you, but that is OK.

Type :q! followed by the Enter key to quit without saving.

Type :x! followed by the Enter key to save changes and exit.

If you see recording in the lower left corner of the screen, press q to exit recording mode, then proceed as described above.


  <body>
    <!-- page content goes here -->
    <p>This is some dummy content.</p>
  </body>
</html>
~
~
~
recording @q                            1,1           All

 

The post How to Exit Vim appeared first on Complete, Concrete, Concise.

]]> 5 Minute Vim Tutorial https://complete-concrete-concise.com/blog/5-minute-vim-tutorial/ Wed, 26 Oct 2016 18:11:54 +0000 http://www.complete-concrete-concise.com/?p=3186 This tutorial won't turn you into a Vim wizard, but at least you will be able to open, navigate, edit, and save files using Vim.

The post 5 Minute Vim Tutorial appeared first on Complete, Concrete, Concise.

]]> Vim works differently from other editors you are used to, but it only takes about 5 minutes to learn the basics you need to edit with Vim. You won’t be a Vim wizard, but you will be able to:

  • Open a file
  • Move around in a file
  • Edit text in a file
  • Save a File

The slightly longer Extended 5 Minute Tutorial you will show you how to search in a file, get help, and access Vim’s own built-in tutorial.

Contents

  1. Vim in 5 Minutes (or less)
  2. The Extended 5+ Minute Tutorial
    1. Normal Mode
    2. Opening a File
    3. Saving a File
    4. Exiting Vim
    5. Navigating a File
    6. Inserting and Deleting Text
    7. Searching
    8. Getting Help
  3. Final Words

Vim in 5 Minutes (or less)

  • Vim operates in Modes. Vim always starts in Normal Mode.
  • Normal Mode is your base mode and you should always return to it.
  • All command / control keys are case sensitive.
  • If you are not in Normal Mode, you (usually) get back to Normal Mode by pressing the Escape key twice.
  • If you see recording in the lower left corner of the screen, press the q key to return to Normal Mode.
  • If you’ve messed stuff up, return to Normal Mode and type :q! followed by the Enter key to exit Vim without saving the file.
  • In Normal Mode you can navigate the file using the h, j, k, l keys (left, down, up, right). You might also be able to use the arrow keys on the keyboard1.
  • When you have navigated to where you want to edit the file (inserting or deleting text), press the i key to enter Insert Mode.
  • In Insert Mode you can only enter or delete text from the current cursor position – you cannot navigate. To navigate, press the Escape key to return to Normal Mode.
  • To save (write) the file, return to Normal Mode and type :w followed by the Enter key.
  • To exit (quit) Vim, return to Normal Mode and type :q followed by the Enter key.

The Extended 5 Minute Tutorial

This adds searching and help to the 5 Minute Tutorial, but, otherwise, keeps the information to the bare minimum so you can quickly be functional in Vim instead of frustrated.
All command / control keys are case sensitive: h is not the same as H!

Normal Mode

Normal Mode is the default mode and it should be the mode you always go back to.
Most times, you press the Escape key once or twice2 to return to Normal Mode.
If you see recording in the lower left corner of the screen, press the lowercase q key to return to Normal Mode.

Opening a File

The simplest way to open a file is to type vim at the command line followed by the name of the file:

user@COMPUTER:~$ vim file.txt

If it is a new file you should see something like this:


~
~
~
~
~
"file.txt" [New File]                       0,0-1          All

If it is an existing file, you should see something like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Basic HTML5 Template</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- page content goes here -->
    <p>This is some dummy content that is not lorem ipsum.</p>
  </body>
</html>
~
~
~
"basic.html" 12L, 290C                      1,1           All

The status line3 (at the bottom of the screen) displays the following information:

  • file name
  • total number of lines in the file
  • total number of characters in the file
  • current line the cursor is on
  • current column the cursor is in
  • percentage showing the position in the file (if All : the entire file is visible, Bot : at the bottom (end) of the file, Top : at the top of the file)

In Normal Mode load a file by typing :edit followed by the filename and then pressing the Enter key.:

:edit basic.html

This discards the current file (if any) and loads the specified file.
If the file to be discarded has been modified, but not saved, you will see the following warning in the status line:

E37: No write since last change (add ! to override)

If you don’t care about saving the file, simply append ! to the :edit command:

:edit! basic.html

The ! tells Vim to “just do it!” and ignore any warnings.

Saving a File

You need to be in Normal Mode to save a file.
Save a file by typing :w followed by the Enter key.
If you want to save the file with a different name, type :w followed by the new file name and then press the Enter key:

:w new-filename.txt

Exiting Vim

You need to be in Normal Mode to exit Vim.
Type :q followed by the Enter key to exit Vim.
If Vim warns you that the file has been modified, you can choose to save it or you can force Vim to exit without saving the file by typing :q! followed by the Enter key. The ! tells Vim to “just do it” and exit without saving the file.

You need to be in Normal Mode to navigate a file.
The letters h, j, k, l navigate the cursor through the file. (You may also be able to use the arrow keys present on most keyboards.)
They act like arrow keys and are conceptually laid out like this:

h
←		 j
↓		 k
↑		 l
→

When you navigate left (h) to the beginning of a line, the cursor will stop. It will not wrap around and up to the previous line.
When you navigate right (l) to the end of a line, the cursor will stop. It will not wrap around and down to the next line.
If you type a positive integer (which will not be displayed), followed by one of the navigation keys, the cursor will move that many characters / lines.
For example, in Normal Mode, if you type 10j, the cursor will move down 10 lines.

Inserting and Deleting Text

In Insert Mode the only thing you can do is insert or delete text. (You may be able to use the arrow keys on your keyboard to navigate the text while in this mode, but there is no guarantee, navigating is supposed to be done in Normal Mode)
Enter Insert Mode by pressing the i, a, I, or A key.

  • i insert / delete before the cursor (what you would intuitively expect when entering or deleting text).
  • a append / delete after the current cursor position.
  • I insert / delete at the beginning of the line.
  • A append / delete at the end of the line.

You will (probably) be using i most frequently.
When you enter Insert Mode you will see – INSERT – displayed in the lower left corner:

The navigation keys are h, j, k, l.
h moves the̲ cursor one character left
l moves the cursor one character right
j moves the cursor one line down
k moves the cursor one line up
~
~
~
~
-- INSERT --                       3,11      All

Press the Escape key to return to Normal Mode.

Searching

You must be in Normal Mode to search.
In a large file, it is useful to locate items of interest by searching for them.
To search, type / followed by the text you want to find, followed by the Enter key.
Vim treats the search string as a regular expression – which means some characters have a special meaning. If you need to search for the following characters, you will need to type them as follows:

Name Character Need to Type
Period . .
Asterisk * \*
Backslash </td> \
Dollar Sign $ $
Forward Slash / /

Searches are case sensitive.
You can navigate between search results by pressing n (next) or N (previous).

Getting Help

You need to be in Normal Mode to use help.
To get help on something in Vim, simply type :help followed by the thing you want help on.
For example, to get help on the navigation key h, type :help h followed by the Enter key.
You should see something similar to the following:

h         or          *h*
<Left>    or          *<Left>*
CTRL-H    or          *CTRL-H* *<BS>*
<BS>      [count] characters to the left.  |exclusive| motion.
          Note: If you prefer <BS> to delete a character, use
          the mapping:
             :map CTRL-V<BS>    X
          (to enter "CTRL-V<BS>" type the CTRL-V key, followed
          by the <BS> key)
          See |:fixdel| if the <BS> key does not do what you
          want.
m̲o̲t̲i̲o̲n̲.̲t̲x̲t̲ ̲[̲H̲e̲l̲p̲]̲[̲R̲O̲]̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲1̲7̲2̲,̲1̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲1̲2̲%̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲
Vim will split the display into two panes. In the upper pane
you will see the help text. In the lower pane you will see your
current editing buffer.
Now you know that Vim supports multiple editing buffers - but
that is not the point of this tutorial.
~
~
~
~
a-file.txt                     4,5              All

The help can be pretty dense and not user friendly, but it may be helpful.
To close the help window, type :q followed by the Enter key.
If you type :help, it will bring up the general help file. You can navigate through it for topics of interest.
You might also try :help tutor for instructions on accessing the Vim tutor which is included with every Vim installation.

Final Words

Vim may not be the easiest or most intuitive editor you will come across. However, it (or its ancestor Vi) is quite ubiquitous and this tutorial gives you the basics you need so you are minimally functional with it.
The basics are simple:

  1. Vim operates in Modes.
  2. All command / control keys are case sensitive : k is not the same as K.
  3. The base mode is Normal Mode. You (usually) get back to it by pressing the Escape key once or twice.
  4. Navigating a file is done in Normal Mode using the h, j, k, l keys.
  5. When the cursor is where you want to insert or delete text, you press the i key to enter Insert Mode.
  6. Search in Normal Mode by typing / followed by the string you want to find and then the Enter key. Navigate the search results using the n and N keys.
  7. Save a file by typing :w in Normal Mode.
  8. Exit Vim by typing :q in Normal Mode.
  9. In Normal Mode you can get help by typing :help
  1. Vi (the precursor to Vim) was developed in 1976. Arrow keys were not commonly found on keyboards, so h, j, k, l were used.↩
  2. Some modes require one key press, others require two. If you press it too many times, the computer will just beep at you. Vim newbies often repeatedly press the Escape key in the hopes of returning to Normal Mode↩
  3. This is true for the default Status Line. It is always possible that someone has modified the Status Line to display different information, or in a different arrangement.↩

The post 5 Minute Vim Tutorial appeared first on Complete, Concrete, Concise.

]]> Replacing the Toner Cartridge in a Brother HL-3140CW Printer https://complete-concrete-concise.com/blog/replacing-the-toner-cartridge-in-a-brother-hl-3140cw-printer/ Tue, 03 Dec 2013 15:14:42 +0000 http://complete-concrete-concise.com/?p=3050 It's not difficult, but not entirely obvious either.

The post Replacing the Toner Cartridge in a Brother HL-3140CW Printer appeared first on Complete, Concrete, Concise.

]]>

Replacing the toner cartridge in the Brother HL-3140CW laser printer is not difficult, but it is not immediately obvious because the toner and drum assembly are joined together.

1) Open the laser printer by lifting the the top part. There are no catches to unlock, so it is easy enough to open:

2) Remove the toner cartridge to replace. It will be one of the four cartridges shaded in green. The entire cartridge assembly lifts right out, there are no latches to unlock:

What you have in your hands is two pieces – the toner and the drum – even if it looks like just one part:

Disassembled, the two parts look like this:

The part in blue is the drum. Be careful not to get fingerprints on the drum itself (the round cylinder at the end).

The part in green is the toner.

3) Lay the toner and drum assembly on a clean, flat surface (preferably with a sheet of paper underneath in case some toner spills out) with the green tabs facing up:

4) Press down on the green latch (bottom left, if you have oriented your assembly like the image above) to unlatch the toner from the drum and remove the toner:

5) Insert the new toner into the drum assembly. It should fit and latch easily.

Before inserting the new toner, remember to gently tilt it from side to side to evenly distribute the toner inside.

6) Slide the green slider on the drum assembly back and forth a few times. Remember to return it to its latched position.

7) Reinsert the toner and drum assembly back into the printer. It should drop in easily.

8) Close the printer an wait for it to go through its cycle.

The post Replacing the Toner Cartridge in a Brother HL-3140CW Printer appeared first on Complete, Concrete, Concise.

]]> Ubuntu 13.04 – Basic Unity Interface / Desktop Tutorial https://complete-concrete-concise.com/ubuntu-2/ubuntu-13-04/ubuntu-13-04-basic-unity-interface-desktop-tutorial/ Tue, 30 Apr 2013 07:26:35 +0000 http://complete-concrete-concise.com/?p=2917 The basics of Unity are easy to pick up.

The post Ubuntu 13.04 – Basic Unity Interface / Desktop Tutorial appeared first on Complete, Concrete, Concise.

]]>

This is a basic tutorial for the Unity Interface / Desktop which comes with Ubuntu 13.04 – it should help get you up and running.

Each new version of Unity (introduced in 11.04) improves on the functionality of the desktop.

This tutorial reflects the way I understand and use the Unity interface.

The Unity interface consists of four main parts:

  1. Panel
  2. Launcher
  3. Dash
  4. HUD

The Panel

The Panel is the strip at the top of the interface:

The menu bar that you are used to seeing near the top of an application’s window is now displayed in the panel:

There is a catch:

  1. The menus displayed in the Panel are only for the active (topmost) application window.
  2. The menus are only displayed when you hover your mouse over the Panel, otherwise, the Panel is empty.
  3. If a window is maximized (full screen), the buttons (icons) for minimize, maximize, and close are hidden unless you hover your mouse over the panel.

This might seem like a step backward. Why hide the menu bar? Why make the user have to move the mouse all the way to the panel to access it? While it gives a little extra window space to the application, it is also inefficient – and this was the problem with Unity in Ubuntu 11.04 and 11.10.

Since Ubuntu 12.04, Unity has the HUD. The HUD makes mousing / navigating through menus obsolete (mostly).

Additional things displayed in the Panel include:

  • the name of the active (topmost) application (green)
  • various indicators (blue)
  • the time (yellow)
  • the system menu (red)

The Launcher

Despite being the most prominent feature of the Unity interface, it is the one I use the least.

This is the panel of buttons on the left hand side of the screen:

It serves 3 functions:

  1. Application Launcher: clicking on an icon will launch the application associated with that icon. e.g. Clicking on the FireFox icon launches the FireFox browser.

  2. Visual indicator of running applications: any running application has its icon placed in the Launcher and an indicator showing its status.
    1. Two solid triangles: this is the active application (the one on top).
    2. Single solid triangle: the application is running, but does not have focus (is not on top).
    3. Single open triangle: the application is running in a different workspace (by default, Ubuntu 13.04 sets up only a single workspace. You can read how to enable workspaces here.).

  3. Application Switcher: you can switch to an application (bring it to the front) by clicking on its icon in the Launcher.

Removing an Application from the Launcher

Note: removing an application from the Launcher does not uninstall the application.

The Launcher can become cluttered with applications (when you install an application using the Ubuntu Software Center, it is usually automatically placed in the Launcher).

1) Right-click on the application you want to remove from the launcher. This will display a popup menu.

2) Click on Unlock from Launcher in the popup menu:

Adding an Application to the Launcher

Sometimes, an application is not added to the Launcher, or you had previously removed it.

1) Start the application / program you want to add to the Launcher.

2) Find the application’s icon in the Launcher.

3) Right-click on the icon. This will display a popup menu.

4) Click on Lock to Launcher to add the program to the Launcher:

In general, only the most commonly used applications should be in the launcher.

Dash

The Dash replaces searching through menu hierarchies for applications.

Like anything new, it feels all wrong, but, I found it very easy to pick up and now prefer it over the traditional menu navigating paradigm.

Instead or navigating a hierarchy of menus, Dash provides a query field in which you type the name of the application or document you want to open.

Using the Dash interface is very much like searching with Google – as you type in what you are looking for, Dash displays possible results.

I think the greatest strength of Dash is that you can navigate it completely via the keyboard, so you never alternate between typing and reaching for the mouse.

Dash is activated by either:

1) Clicking on the Dash icon in the Launcher:

2) Tapping the Windows key on your keyboard

Note: tapping the Windows keys means pressing it as though you intend to type it. It does not mean holding down the key (holding down the key does something else).

Ubuntu calls this the Super key

The Dash panel looks something like this (click for a larger image):

It is divided into upto 5 sections:

  1. The query field (outlined in green) is where the keyboard focus goes when you activate the Dash.

    Type the name of the application you want to run, or document you want to open. As you type, Dash will update the list of applications and documents.

    It has improved greatly since 11.04, if you type in game you will get Mahjong, AisleRiot Solitaire and Freecell Solitaire, and Sudoku.

    I suspect it may still miss certain applications because they are not listed in the “obvious” way. For example, previous versions of Unity would not display Sudoku if you typed in game – you needed to type in puzzle.

    If you type in games it will only display AisleRiot Solitaire, but none of the other games.

  2. A list of the most recently used applications (outlined in red) is displayed. If you type in the query field, the list of applications is modified to match your search.

    You can use your mouse to select an application, or you can use the arrow keys to navigate to the desired application (and then press Enter. I like using the arrow keys because my hands don’t have to leave the keyboard.

  3. A list of the most recent viewed documents (outlined in blue) is displayed. If you type in the query field, the list of documents is modified to match your search.

    You can use your mouse or the arrow keys to navigate and select the desired document. I like using the arrow keys because my hands don’t have to leave the keyboard.

  4. Relevant search results from Amazon (outlined in yellow) . As you type your query, it is sent to Amazon (anonymously via Ubuntu) and relevant results are displayed.

    Many people find this intrusive and disable this feature. Instructions to disable Amazon search results are here.

    I don’t have a problem with it, but wish it was more customizable. For instance, I don’t want Amazon search results in my main Dash panel. I don’t mind them if I am using the music lens or movie lens (explained in more detail below). Unfortunately, there is no way to selectively enable Amazon search results.

  5. At the very bottom of the Dash (shaded in green) are a number of icons. These are “lenses”. A lens is a specifically focussed (or themed) query. The five lenses at the bottom are:

    1. Dash lens: this is the default lens – it searches everything you are possibly connected to which includes your computer as well as any cloud services you use.
    2. Applications lens: this focuses searches only within applications.
    3. Folders and Documents lens: this focuses searches only on folders and documents.
    4. Music lens: focuses search on music.
    5. Photos Lens: focuses search on photos.
    6. Video lens: focuses search on videos.

    You can navigate to the lenses using either the mouse or keyboard.

    Typing Ctrl + Tab will navigate through the lenses.

    Note: typing Ctrl + Tab means, “While holding down the Ctrl key, press the Tab key as though you intend to type it.”

    If you hold the Windows (Super) key down for a few seconds, a cheat sheet of commands will be displayed (click for larger image):

    Note: the cheat sheet only appears if your screen resolution is 1024×768 or greater.

    HUD

    The HUD was introduced in Ubuntu 12.04 and combined with Dash it provides a powerful way of interacting with your applications.

    Just as Dash replaces navigating a hierarchy of menus to find applications and documents, HUD replaces navigating a hierarchy of menus in an application.

    Like anything new, it feels all wrong, but, I found it very easy to pick up and now prefer it over the traditional menu navigating paradigm.

    Instead or navigating a hierarchy of menus, HUD provides a query field in which you type the name of the action you want to perform with your applications.

    Normally, to do something in a program you either use a keyboard shortcut (like Ctrl+B to bold text in a word processor), or you use the mouse to select an option from a menu or toolbar.

    With HUD, you type in what you want to do. The HUD interface will then locate appropriate / matching menu entries and display them to you to select. Again, you can use the mouse to perform the selection or the arrow keys and the Enter key.

    I think the greatest strength of HUD is that you can navigate it completely via the keyboard, so you never alternate between typing and reaching for the mouse.

    The HUD is activated when you tap on the Alt key:

    Note: tapping the Alt keys means pressing it as though you intend to type it. It does not mean holding down the key.

    If you hold the Alt key down for about 2 seconds, the application menu bar will display in the Panel. As soon as yo let go of the Alt key, it will disappear – thus encouraging use of the keyboard to select a menu option (e.g. Alt + F to open the File menu).

    The HUD panel looks something like this:

    1. The query field (outlined in red) is where you type the operation you want to perform in the application, e.g. open, new, auto white balance, etc.

      This is where the focus goes when you activate the HUD.

      As you type, a list of possible commands will be displayed below it. You can navigate those commands using the mouse and clicking to select or the keyboard (arrow keys) and pressing Enter to select. By default, the top command is always selected and will be executed if you press Enter. A nice thing is that you do not have to type the whole command.

      Note: if a command is not available (for example, it is greyed out), then it will not appear in the list of commands.

      For example, if you have just opened GIMP without any image, it is not possible to perform image operations on it (like unsharp mask, or auto color enhance, etc). So if you type unsharp into the query field, you will not receive any options.

      I think it would be better if the HUD somehow indicated that the operation is unavailable rather than just not showing it at all.

    2. On the left, the icon (outlined in green) shows which application the command is for.

      The HUD may display commands for other programs (not just the active one). This can be confusing if you are not paying attention.

    3. Below the query field is a list of matching commands (outlined in blue.

    Note: HUD may not work with all applications – it depends on how the menus in an application were coded. Prior to Ubuntu 13.04, LibreOffice was an application that did not work with the HUD (there was a patch available to make it work, though).

    Final Words

    Unity is a new way of interacting with the computer: instead of navigating a hierarchy of menus, you type what you want to do.

    As an old timer (my first interactions with a computer were via a teletype), I never really liked the mouse / GUI way of doing things because it required me to take one hand off the keyboard. As a consequence, I have always configured shortcut keys to perform common tasks.

    With Unity, I am able to keep my hands on the keyboard and easily perform the tasks I need. I still program my shortcut keys, but I know longer have to navigate through menus to find some lesser used operation.

    Play with it. I think you will find it easy to learn. I have found it easier to adapt to than the Ribbon interface Microsoft introduced a few years ago.

    I find the Dash and HUD work well when I am very familiar with the programs / applications I am working with and I know the command set.

    I find the HUD awkward to work with when I am not familiar with an application. For example, perhaps I install Blender to try out some 3D graphics development. Not being familiar with Blender, it is very awkward to try typing commands into the HUD in the hope of finding the right one. This is definitely a case where being able to browse through a bunch of menus can be helpful.

    Of course, I can always type help and hope a help file comes up.

    It is with new or unfamiliar applications that I miss the menu bar at the top, but even if a menu bar was visible, there have been times when I could not find what I wanted and had to google to discover how it was named or where it was located.

    Additional Resources

    While these aren’t tutorials, they offer some insight into Canonical’s focus and direction (they are written by Mark Shuttleworth – Canonical’s CEO):

    Introducing the HUD. Say hello to the future of the menu.

    Dash takes shape for 11.10 Unity (note: the Dash panel has changed somewhat from the screen capture he presents)

    This shows a side by side comparison between using the tradition menu driven way to perform a task and using HUD. While a number of commenters have complained that it isn’t an objective comparison, I think it shows very nicely the difference in working in both environments:

    This is another video showing the HUD In action:

    The post Ubuntu 13.04 – Basic Unity Interface / Desktop Tutorial appeared first on Complete, Concrete, Concise.

    ]]> How to Edit .htaccess in cPanel https://complete-concrete-concise.com/web-tools/how-to-edit-htaccess-in-cpanel/ Tue, 26 Mar 2013 11:31:29 +0000 http://complete-concrete-concise.com/?p=2719 This tutorial is for users whose web hosting administration front end is cPanel version 11.34.1 (build 12). It may be the same or similar for other versions of cPanel or other web hosting administration front ends, but no guarantee is made. Sometimes it is necessary to edit the .htaccess file. By default, cPanel hides this […]

    The post How to Edit .htaccess in cPanel appeared first on Complete, Concrete, Concise.

    ]]>

    This tutorial is for users whose web hosting administration front end is cPanel version 11.34.1 (build 12).

    It may be the same or similar for other versions of cPanel or other web hosting administration front ends, but no guarantee is made.

    Sometimes it is necessary to edit the .htaccess file. By default, cPanel hides this file from the user.

    1) Find the section titled Files and click on File Manager:

    2) Select your website from the dropdown box (only necessary if you have more than one site). Check the Show Hidden Files (dotfiles). checkbox. Press Go:

    3) Select the .htaccess file by clicking on it (just a single click – double-clicking will attempt to download it), then click on Edit icon to edit the file:

    Warning: incorrectly editing .htaccess can render your website unusable.

    Ensure you make a backup of it before proceeding.

    The post How to Edit .htaccess in cPanel appeared first on Complete, Concrete, Concise.

    ]]>         How to Solve Trigonometric Problems https://complete-concrete-concise.com/mathematics/how-to-solve-trigonometric-problems/ Thu, 15 Nov 2012 13:45:51 +0000 http://complete-concrete-concise.com/?p=2555 This tutorial offers advice on how to solve trigonometric problems and provides several problems worked through in detail. It assumes you are familiar with the trigonometric functions sine, cosine, tangent, secant, cosecant, and cotangent. A basic tutorial can be found here. A more advanced tutorial can be found here. If an explanation / walkthrough is […]

    The post How to Solve Trigonometric Problems appeared first on Complete, Concrete, Concise.

    ]]>     This tutorial offers advice on how to solve trigonometric problems and provides several problems worked through in detail.
    It assumes you are familiar with the trigonometric functions sine, cosine, tangent, secant, cosecant, and cotangent. A basic tutorial can be found here. A more advanced tutorial can be found here.
    If an explanation / walkthrough is not clear, please let me know in a comment and I will try to improve the answer.
    Identify what it is that is not clear – just saying “I didn’t understand it” isn’t very helpful.
    If you have a problem you would like to see solved, leave a comment. Note: (1) I don’t do homework, (2) I don’t promise I will solve it, (3) I don’t promise to solve it quickly.

    Don’t Panic

    1. Don’t panic or freak out. No one is trying to trick you or trip you up (although, often times, word problems are poorly worded)
    2. Read and understand the problem.
    3. Trigonometric problems are always about right angle triangles. So the trick is to try and break the problem down into right angle triangles.
    4. Trigonometry is about the ratios of the lengths of two sides. If we know the length of two sides of a right angle triangle we can calculate the ratio between those two sides. Those ratios are given special names: sine, cosine, tangent, cosecant, secant, cotangent. Because of the properties of right angle triangles, if we know one of the angles then we also know the ratios of all the sides.
    5. Look for what ratios or partial ratios you can find. Then work from there.
    6. Similar triangles are triangles that have the same shape that have the same angles inside. Often times, we don’t solve the problem directly but look for a similar triangle. The triangle may be bigger or smaller, but it has the same shape as the triangle we are studying.

    Basic Use of Trigonometric Definitions

    Consider the following right angle triangle having sides of length 3, 4, and 5 units and two angles called alpha and beta. What is sinα, cosα, tanα, sinβ, cosβ, tanβ and the angles α and β?


    This problem is about understanding the definition of the trigonometric functions sine, cosine, and tangent.
    The triangle is displayed in a familiar way and we can easily calculate the trigonometric relations for α (remember sinα is shorthand for “given a right angle triangle containing an angle α, what is the ratio of the side opposite the angle to the hypotenuse“):
    We know that sinα = opposite ÷ hypotenuse, which is 3 / 5 which is 0.6.
    We know that cosβ = adjacent ÷ hypotenuse, which is 4 / 5 which is 0.8.
    We know that tanα = opposite ÷ adjacent, which is 3 / 4 which is 0.75.
    Calculating the trigonometric relations for β is no different, although, we need to correctly identify the opposite and adjacent sides:
    We know that sinβ = opposite ÷ hypotenuse, which is 4 / 5 which is 0.8.
    We know that cosβ = adjacent ÷ hypotenuse, which is 3 / 5 which is 0.6.
    We know that tanβ = opposite ÷ adjacent, which is 4 / 3 which is 1.333...
    We don’t know what the angles α and β are, but we can find out. We know that sinα = 0.6 and sinβ = 0.8. All we need to do is find out what angles α and β have a sine corresponding to 0.6 and 0.8, respectively.
    Using the inverse sin function (sin-1) on a calculator, we see that α must be 36.87° for sinα to be 0.6 and β must be 53.13° for sinβ to be 0.8.

    Before calculator use was wide spread, you would look up the value in a sine table. You can see a sine table with a resolution of 1 degree over here.

    Basic Use and Application of Trigonometric Definitions and Properties of a Right Angle Triangle

    Given a triangle having sides of length 1, 2, and 3 units, is this a right angle triangle?


    The simplest way is to see if the Pythagorean Theorem true – if this is a right angle triangle, we know that: A2 + B2 = C2
    12 + 22 = 32
    1 + 4 = 9 – the left hand side and right hand side are not the same, so the triangle is not a right angle triangle
    Using trigonometric functions, we can determine the angles α and β and then check that all the angles sum up to 180°: α + β + 90° = 180°
    sinα = opposite ÷ hypotenuse = 1 / 3 = 0.333…
    sinβ = opposite ÷ hypotenuse = 2 / 3 = 0.666…
    Using the inverse sin function (sin-1) on a calculator, we determine that α is 19.47° and β is 41.81°.
    Consequently, the sum of the angles is:
    19.47° + 41.81° + 90° = 180°
    151.28° = 180° – the left hand side and right hand side are not the same, so the triangle is not a right angle triangle

    The only thing that might seem strange in this example are expressions of the form:
    4 = 9
    These types of expressions are perfectly normal and valid in mathematics. This is because the symbol = does not have the same meaning we are usually used to: in mathematics, = means is the same as.
    Written in English, the expression 4 = 9 would be “The value of 4 is the same as the value of 9“. This statement is false. Don’t get confused and think you have just proven that 4 is the same as 9 because it isn’t.
    In this example, we are saying:

    1. The angles in a triangle sum up to 180°
    2. Since this is supposed to be a right angle triangle, we know one of the angles is 90°
    3. Since this is supposed to be a right angle triangle, we can look up the angles α and β once we know the ratios of the sides
    4. If the sum of all the angles is 180° then we know this is a right angle triangle
    5. If the sum of all the angles is not 180° then we know this is not a right angle triangle.

    Calculating the Height of a Tree

    Potiphar’s out walking his cat. He notices that he casts a shadow 2 m long. He also notices that a tree in the garden casts a shadow 7 m long. If Potiphar is 1.5 m tall how tall is the tree? What is the angle of elevation of the sun?

    This is a basic trigonometric problem involving similar triangles. Potiphar and his shadow form a right angle triangle. The tree and its shadow form another right angle triangle. The rays of the sun (which are invisible) form the hypotenuse of these right angle triangles.

    We know that similar triangles have the same shape and the same angles. We know that the angle or slope of the hypotenuse is the same for both the tree-triangle and the Potiphar-triangle (because rays of sunlight are parallel to each other). Since both triangles are similar, we also know that the ratios of their sides must be the same.
    We know the lengths of the sides of the Potiphar-triangle and can use them to calculate a ratio:
    A / B = 1.5 / 2 = 0.75
    Of the tree-triangle, we know the length of one of the sides but not of the other. However, we know that the ratio of the unknown length to the known length (i.e. shadow) must be the same as for the Potiphar-triangle:
    a / b = A / B = 0.75
    Plugging in the values we know (and removing the A / B for clarity):
    a / 7 = 0.75
    Rearranging we get:
    a = 0.75 × 7 = 5.25
    The tree is 5.25 m tall.
    To calculate the elevation of the sun, we know the ratio of height to length. In trigonometric terms, this is the definition of tangent.
    tanα = opposite ÷ adjacent = A / B = a / b = 0.75
    Looking up (or using the inverse key on the calculator) we see that for tanα to equal 0.75, α must be 36.87°.

    Before calculator use was wide spread, you would look up the value in a tangent table. You can see a tangent table with a resolution of 1 degree over here.

    Calculating the Height of a Pyramid and Elevation of the Sun

    Thales of Miletus measures the length of the shadow cast by the great pyramid and discovers that it is 17 m to the base of the pyramid. Using his 2 m measuring stick he notices that it casts a shadow of 1.8 m. If the great pyramid measures 230 m on a side, how high is the great pyramid? What is the angle of elevation of the sun?


    This is another basic trigonometric problem involving similar triangles, but this time a little trickier to solve. We know the dimensions of the height and length of the measuring-stick-triangle, but we don’t know the height or length of the pyramid-triangle. We know the length of the shadow to the base of the pyramid, but we need to know the length of the shadow to the center of the pyramid (from which the height is measured).

    We know the length of a side of the pyramid (this 230 m), we can use this to determine what the length of the shadow to the center of the pyramid should be. The peak of the pyramid is in the center, so it is 115 m from the base of the pyramid. This gives us a corrected shadow length of 17 m to the base + 115 m from the base to the center which is 132 m.
    We now know the length of one of the sides of the pyramid-triangle. Since the pyramid-triangle is similar to the measuring-stick-triangle, and we know that similar triangles have the same ratios for their sides, we can calculate the height of the pyramid in the same way as the previous example:

    In the previous example (Calculating the HEight of a Tree), I wrote the equation as:
    a / b = A / B = ratio
    Equations in mathematics can be written in many different ways. In this example, I don’t bother to write the ratio and instead write it as:
    a / b = A / B

    Substituting the known values we get:
    2 / 1.8 = height / 132
    Rearranging we get:
    (2 × 132) / 1.8 = height
    Simplifying everything we get:
    height = 146.7 m
    To calculate the elevation of the sun, we know the ratio of height to length. In trigonometric terms, this is the definition of tangent.
    tanα = opposite ÷ adjacent = 2 / 1.8 = 1.111…
    Looking up (or using the inverse key on the calculator) we see that for tanα to equal 1.111…, α must be 48°.

    Calculating the Length of a Shadow

    The Peace Tower in Ottawa, Canada is 92.2 m tall. On July 1st, 2012, at noon, the sun’s angle of elevation was 67.6°. How long was the shadow cast by the Peace Tower?

    We know the height of the tower and we know the angle of the sun (relative to the ground).
    Unlike the previous two problems, we only have one right angle triangle – the tower-shadow-triangle. We know if we have two similar triangles, the ratios of their sides must be the same.
    We know the angle the sun makes with the ground, so we know one of the angles of the triangle (actually, we know two of them – the other is 90° – so, if we need to, we can find the third angle because all angles in a triangle must sum up to 180°).
    All right angle triangles with the same angles are similar triangles – it doesn’t matter if we don’t know the lengths of the sides because we know the ratios those sides will have.
    We know that the following must be true:
    length of the opposite side ÷ length of the adjacent side = tan(α)
    Plugging in the values we know, we get:
    92.2 / x = tan(67.6°)
    Evaluating (looking up) tan(67.6°) we get:
    9.2. / x = 2.43
    Rearranging we get
    x = 92.2 / 2.43
    Simplifying we get:
    x = 37.94
    The length of the shadow is 37.94 m (and it is probably safe to round it up to 38 m).

    Calculating the Height of a Cliff

    A surveyor measuring the height of the cliff, determines that the angle to the top of the cliff is 60° and the distance to the base of the cliff is 120 m how high is the cliff?


    This is similar to calculating the length of the shadow from two examples earlier.
    The distance from the cliff, with the height of the cliff and the straight line to the top of the cliff form a right angle triangle.
    We know one of the angles. We also know that all right angle triangles with the same angle are similar triangles – this means we also know the ratios the various sides of the triangles have.
    As before, we know that:
    opposite ÷ adjacent = tan(α)
    Plugging in the values we know, we get:
    x / 120 = tan(60°)
    Evaluating tan(60°) we get:
    x / 120 = 1.732
    Rearranging we get:
    x = 1.732 × 120
    Simplifying we get:
    x = 207.84
    The cliff is 207.84 m high (it is probably ok to round it to 208 m).

    How would the problem and solution change if we were given the other angle instead?
    In this case, we would have:
    120 / x = tan(30°)
    When solved it would give us the same answer.
    The relationship remains the same, the only things that change are which side we call opposite and adjacent.

    Calculating the Height of a Lighthouse

    A surveyor measuring the height of the cliff, determines that the angle to the top of the cliff is 60° – this angle was measured at a height of 1.7 m (i.e. the surveying equipment is on a tripod and stands 1.7 m above the ground). The angle measured to the top of the lighthouse is 65°. The distance to the cliff is 120 m. How tall is the lighthouse? How high is the cliff?


    In this case, we are given two triangles, but they are not similar. One triangle is the cliff-triangle, the other is the cliff-lighthouse-triangle.
    If we find the height of both triangles, we can subtract the height of the cliff from the height of the cliff + lighthouse and get the height of the lighthouse.

    Cliff Height

    This is basic trigonometric ratios:
    cliff height ÷ distance to cliff = tan(60°)
    Plugging in the known values:
    x / 120 = tan(60°)
    Solving:
    x = 207.84
    We’re not finished with the height of the cliff, the angle to the top of the cliff was measured from a height of 1.7 m, this means we need to add 1.7 m to the height of the cliff:
    height = 207.84 + 1.7 = 209.54 m

    If we measured from the base of the tripod, what would the angle be to the top of the cliff?

    In this case, we know the length of two sides of the triangle: 120 m and 209.54 m.
    We can calculate the ratio of these two sides:
    ratio = 209.54 / 120 = 1.74616...
    We know from trigonometric definitions that tan(α) = opposite ÷ adjacent, so all we need to find is what α gives us the necessary ratio. Using tan-1 on the calculator we see that:
    tan-1(1.74616...) = 60.2°

    Height of the Cliff + Lighthouse

    This is basic trigonometric ratios:
    (cliff height + lighthouse height) ÷ distance to cliff = tan(α)
    Plugging in the known values we get:
    x / 120 = tan(65°)
    Solving:
    x = 257.34
    We’re not finished with the height of the cliff + lighthouse, the angle to the top of the cliff + lighthouse was measured from a height of 1.7 m, this means we need to add 1.7 m to the height of the cliff + lighthouse:
    x = 257.34 + 1.7 = 259.04 m

    Height of the Lighthouse

    It is a simple matter of subtracting the height of the cliff from the height of the cliff + lighthouse:
    lighthouse height = (lighthouse height + cliff height) - cliff height
    Plugging in the known values we get:
    x = 259.04 - 209.54
    Solving we get:
    x = 49.5 m

    In this example, it was not necessary to correct the height of the cliff and cliff + lighthouse by adding 1.7 m to each because each was offset (measured) from the same point – but it is still good practice to find the true heights (dimensions) even if only the relative ones are good enough.

    Calculating the Length of a Field #1

    Two surveyors measure the length of the field. One surveyor stands at one end of the field with the measuring equipment, the other surveyor stands at the other end of the field with a measuring stick 2 m high. The surveyor measures an angle of 2° to the base of the measuring stick. The surveying equipment is at a height of 1.7 m. How long is the field?


    This is basic trigonometric ratios. The straight line (of sight) to the measuring stick is perpendicular to the measuring stick, therefore, it forms one side of a right angle triangle. The measuring stick (or part of it) forms another side. Finally, the line of sight to the base of the measuring stick forms the remaining side (which is also the hypotenuse):

    We know the height where the straight line of sight intersects the measuring stick must be 1.7 m. We also know the angle to the base of the measuring stick is 2°.
    We don’t know the length of the side adjacent to the measured angle, we do know the length of the side opposite the measured angle, and we know the angle. Two trigonometric ratios use the opposite and adjacent sides: tangent and cotangent. Since tangent is the more commonly used ratio (and appears on many calculators) we will use the definition of tangent:
    tan(α) = opposite ÷ adjacent
    Plugging in the known values, we get:
    tan(2°) = 1.7 / x
    Solving, we get:
    x = 48.68
    The length of the field is 48.68 m (it is probably safe to round up to 48.7 m)

    Calculating the Length of a Field #2

    Two surveyors measure the length of the field. One surveyor stands at one end of the field with the measuring equipment, the other surveyor stands at the other end of the field with a measuring stick 2 m high. The surveyor forgot to measure the height of the equipment, but, fortunately, took two readings. The surveyor measures an angle of 2° to the base of the measuring stick and 1° to the top of the measuring stick.. How long is the field?


    We know the straight line of sight to the measuring stick must be perpendicular to the measuring stick – this forms one side of a right angle triangle (as in the previous example). In fact, it forms the side of two right angle triangles – since two different angles were measured. Unlike the previous example, we don’t know the length of the other side, but we do know the length of the measuring stick – it is 2 m. We know that the sum of the two opposite sides must be 2 m. We also know the angles for both right angle triangles, so we know the ratios the sides have:

    From trigonometric definitions we know that tan(α) = opposite / adjacent
    We also know the adjacent side is the same length for both triangles.
    Finally, we know that oppositetop + oppositebottom = 2 m.

    Top Triangle

    Solving for the top triangle we get:
    tan(1°) = oppositetop / adjacent
    Calculating what we can, we get:
    0.017455 = oppositetop / adjacent

    Bottom Triangle

    Solving for the bottom triangle we get:
    tan(2°) = oppositebottom / adjacent
    Calculating what we can, we get:
    0.034921 = oppositetop / adjacent

    Combining the Equations

    Fundamental to basic algebra is the ability to manipulate an equation any way we like – as long as we do the same thing on both sides.
    For example, consider 4 = 4:
    We can add 8 to both sides and the relationship remains the same: 4 + 8 = 4 + 8.
    However, it is also perfectly valid to do: 4 + 8 = 4 + 1 + 2 + 5 (this is one of those non-intuitive mathematical tricks – but it is very useful).
    We need to employ this algebraic trick of substituting equivalent things into our equations.

    Since we know that the adjacent sides of both right angle triangles are identical, we can use this to merge the two equations together.
    Rearranging the bottom triangle equation so the adjacent is alone, we get:
    adjacent = oppositebottom / 0.034921
    We now replace the adjacent side in the top triangle with its equivalent which is oppositebottom / 0.034921:
    0.017455 = oppositetop / (oppositebottom / 0.034921)
    Rearranging we get:
    0.017455 × oppositebottom = 0.034921 × oppositetop

    Solving for the oppositebottom side

    Dividing both sides by by 0.017455, we get:
    oppositebottom = 2 × oppositetop

    Remembering the 2 m Measuring Stick

    At this point, we need to remember that oppositebottom + oppositetop = 2

    It is common in mathematics that you have to remember several things at the same time as you proceed through the steps of solving a problem.

    Algebraic Substitution Trick on the Measuring Stick

    We can do a similar equivalent substitution in this equation (in this case, we will substitute 2 × oppositetop for oppositebottom:
    2 × oppositetop + oppositetop = 2
    Solving we get:
    oppositetop = 0.666...

    If the top portion of the stick us 0.666… m, then the bottom portion must be 1.333… m

    Returning to the original equation:

    It does not matter which of the lengths we use (as long as we use them in the right place), the answer will still be the same (any small differences in the answers are due to rounding errors – you can avoid / minimize these by using the full precision provided by your calculator.

    Now we can take this value for oppositetop and substitute it our original equation for the top right angle triangle:
    tan (1°) = 0.666... / adjacent
    Solving we get:
    adjacent = 38.19
    The distance of the field is 38.19 m (which you can, probably, safely round up to 38.2 m)

    The post How to Solve Trigonometric Problems appeared first on Complete, Concrete, Concise.

    ]]>         Ubuntu 12.10 – Installing GNOME Session Fallback https://complete-concrete-concise.com/ubuntu-2/ubuntu-12-10/ubuntu-12-10-installing-gnome-session-fallback/ Tue, 23 Oct 2012 12:39:02 +0000 http://complete-concrete-concise.com/?p=2420 These instructions are for installing the GNOME Session Fallback in Ubuntu 12.10 running the Unity Desktop. Installation instructions may be the same or similar for other versions of Ubuntu or for other Linux distros, but no guarantee is made. If you are changing desktops because you are totally lost / confused by Unity, I suggest […]

    The post Ubuntu 12.10 – Installing GNOME Session Fallback appeared first on Complete, Concrete, Concise.

    ]]>

    These instructions are for installing the GNOME Session Fallback in Ubuntu 12.10 running the Unity Desktop.

    Installation instructions may be the same or similar for other versions of Ubuntu or for other Linux distros, but no guarantee is made.

    If you are changing desktops because you are totally lost / confused by Unity, I suggest reading this tutorial and giving Unity a chance. The mentioned tutorial is for Ubuntu 12.04, but should be the same or very similar for 12.10. Eventually, I will have an updated tutorial for 12.10.

    Of course, if you really hate Unity, then GNOME Session Fallback is an alternative desktop.

    Some images may be clicked for full sized versions.

    What is it?

    GNOME Session Fallback is the most basic version of GNOME you can install. The 3D features and requirements of the standard GNOME Shell are not present.

    It is the closest you can get to the original GNOME 2 desktop. The GNOME 2 desktop is the one most users would recognize as the familiar or traditional desktop.

    If you want a true GNOME 2 desktop experience, then you need to install MATE.

    MATE is a fork (a development branch that has split from the main branch) of the original GNOME 2 project to preserve it.

    GNOME 2 is no longer supported or developed – it has been superseded by GNOME 3.

    MATE is the new GNOME 2.

    GNOME 3 (aside from the Session Fallback) requires 3D hardware capability (according to GNOME, most 3D graphics cards manufactured after 2007 (or so) meet these requirements). However, the GNOME 3 desktop is different from the original or classic desktop most users are familiar with.

    GNOME Session Fallback is automatically installed when you install GNOME Shell or GNOME. It is provided in the case that your graphics card does not meet the minimum 3D hardware requirements or drivers for your graphics cards do not support 3D hardware acceleration.

    Who is it for?

    GNOME Session Fallback is for those users that want a more or less traditional style desktop and don’t want to minimize the amount of extra files they install on their system.

    While you can install GNOME Shell and GNOME, these will occupy more space on your hard drive. Installing them will not affect your systems performance except to where it comes down to free disk space.

    In general, I think it is good practice to minimize the number of unneeded files on your system

    What it looks like

    There are two versions: GNOME Classic and GNOME Classic (No effects) – the difference between them is quite subtle.

    The straight-out-of-the-box look of the desktop is:

    Gnome Classic displays the four desktops in the lower right corner as a small grid.

    GNOME Classic (No effects) displays the four desktops in the lower right bar as individual panes.

    Otherwise, I don’t see any other differences between them.

    GNOME Session Fallback will install 35.5MB of files and data to your hard disk.

    From the Command Line

    If you are comfortable with Linux and know how to use the command line and apt-get then the command is:

    sudo apt-get install gnome-session-fallback

    Detailed instructions for accessing a command line can be found here.

    Note: during installation, you are likely to get a message box asking which display amanger you use. It is safe to use either one.

    gdm is installed with gnome-fallback-session.

    lightdm is the display manager shipped with Ubuntu.

    Basically, the difference between the two is that your login screen will look different.

    Afterward, you need to restart your system.

    From the Ubuntu Software Center

    Launching the Ubuntu Software Center

    1) Tap the Windows (Super) key to bring up the Dash panel:

    Note: tapping the Windows keys means pressing it as though you intend to type it. It does not mean holding down the key (holding down the key does something else).

    Ubuntu calls this the Super key

    2) Type Ubuntu Software Center into the search field:

    Note: as you type, search results will be displayed in the Dash Panel below.

    You can stop typing when Ubuntu Software Center is the leftmost item in the panel.

    3) Press the Enter key. This will select and launch the Ubuntu Software Center

    Note: pressing the Enter key automatically selects the top, leftmost item in the Dash Panel. This is why it is not necessary to type everything.

    Note: if, for some reason, you switch focus or change focus from the search field, then pressing Enter will not work and you will need to select the icon using your mouse (or navigate using your keyboard). This is definitely an issue Ubuntu needs to address with the Dash.

    4) Type gnome-session-fallback into the Ubuntu Software Center search field. This will bring up related entries.

    5) Click on the entry GNOME Session Manager – GNOME fallback session – this will highlight it in orange:

    6) Click on Install:

    If you receive the following error message:

    See this article for a possible solution.

    Note: I haven’t encountered this error with Ubuntu 12.10, but I believe it is still possible.

    7) Enter your password and click Authenticate:

    8) After installation is finished, click on the System icon in the upper right corner of the desktop and select Shut Down… from the drop down menu:

    Note: it may be enough to just log out and log back in using the new desktop, but it doesn’t hurt to restart either.

    9) Click on Restart:

    Selecting the Desktop

    After the system has restarted, it is necessary to select the new desktop from the login screen.

    It is only necessary to select the desktop the first time after installation. Ubuntu will remember your your selection for future logins.

    You can even install multiple desktops and switch between them.

    10) Click the icon in the top right of the Login box:

    11) Select either GNOME Classic or GNOME Classic (No effects):

    12) Click on OK:

    13) Login as normal:

    Notice the icon in the upper right hand corner has changed to a different icon. Some, not all, desktop environments will display an icon there.

    This provides a quick way to know which desktop environment you are logging into.

    The post Ubuntu 12.10 – Installing GNOME Session Fallback appeared first on Complete, Concrete, Concise.

    ]]>         Ubuntu 12.10 – How to Lock Your Screen / Computer https://complete-concrete-concise.com/ubuntu-2/ubuntu-12-10/ubuntu-12-10-how-to-lock-your-screen-computer/ Thu, 18 Oct 2012 11:10:24 +0000 http://complete-concrete-concise.com/?p=2376 These instructions are for Ubuntu 12.10 running the Unity interface. They may be the same for other version combinations, but no guarantee is made. Sometimes you have to leave your computer but don’t want to leave your session open for someone else to start using. One option is to log out, the other is to […]

    The post Ubuntu 12.10 – How to Lock Your Screen / Computer appeared first on Complete, Concrete, Concise.

    ]]>

    These instructions are for Ubuntu 12.10 running the Unity interface. They may be the same for other version combinations, but no guarantee is made.

    Sometimes you have to leave your computer but don’t want to leave your session open for someone else to start using.

    One option is to log out, the other is to lock your session. Logging out is rather drastic and requires you to save all your work. Locking the screen allows all your work to remain as is until you unlock the screen.

    Keyboard Shortcut

    1) Press Ctrl + Alt + L to lock your screen.

    NOTE: pressing Ctrl + Alt + L means: simultaneously hold down the Ctrl key and Alt key, then press the L key as though you intend to type it.

    DO NOT press the Shift key because Ctrl + Alt + Shift + L is different from Ctrl + Alt + L.

    It does NOT matter if your Caps Lock key is on or off.

    Your screen should change to something like the following (your choice of desktop background, username, etc, will affect the specific appearance):

    Using the Mouse

    1) Click on the System icon in the top right corner of the screen:

    2) Select Lock Screen from the drop down menu.

    The post Ubuntu 12.10 – How to Lock Your Screen / Computer appeared first on Complete, Concrete, Concise.

    ]]>         Ubuntu 12.10 – How to Display / Show Hidden Files or Folders https://complete-concrete-concise.com/ubuntu-2/ubuntu-12-10/ubuntu-12-10-how-to-display-show-hidden-files-or-folders/ Thu, 18 Oct 2012 10:56:30 +0000 http://complete-concrete-concise.com/?p=2372 These instructions are for Ubuntu 12.10 running the Unity interface and using Nautilus as the default file browser – this is the default Ubuntu 12.10 configuration. It may work for other version combinations, but no guarantee is made. The default settings in the Nautilus file browser prevent you from seeing certain files and folders. These […]

    The post Ubuntu 12.10 – How to Display / Show Hidden Files or Folders appeared first on Complete, Concrete, Concise.

    ]]>

    These instructions are for Ubuntu 12.10 running the Unity interface and using Nautilus as the default file browser – this is the default Ubuntu 12.10 configuration.

    It may work for other version combinations, but no guarantee is made.

    The default settings in the Nautilus file browser prevent you from seeing certain files and folders. These files begin with a period (.) and tend to be configuration files and folders (directories).

    The Unix / Linux convention for hiding a file or folder is to prefix the name with a period (.).

    Sometimes it is necessary to be able to see them in order to be able to edit them or delete them.

    1) Open the Nautilus file browser. The default icon on the Unity Launcher opens your Home folder:

    By default, configuration files and folders are not shown:

    2) Type Ctrl + H to display hidden files and folders.

    NOTE: typing Ctrl + H means: while holding down the Ctrl key, press the H key as though you intend to type it.

    DO NOT press the Shift key because Ctrl + Shift + H is different from Ctrl + H.

    It does NOT matter if your Caps Lock key is on or off.

    Any hidden files or folders will be displayed along with the other files and folders.

    NOTE: there may not be any hidden files or folders to display.

    The post Ubuntu 12.10 – How to Display / Show Hidden Files or Folders appeared first on Complete, Concrete, Concise.

    ]]>