Linux – Edit Software Package Source File

You use the following command on a Linux machine to install software packages:

sudo apt-get install <package-name>

Or you use some GUI-based tool for example the “Software Center” on Ubuntu if you have installed a desktop environment on your machine.

In any case, the machine needs to know where to look for packages to install them.

On Linux Debian Jessie or Ubuntu 16.04 Desktop, the path is,

/etc/apt/sources.list

The file sources.list stores all the sources that the machine is supposed to look in when you command the machine to install new software packages. The file on my Debian test machine looks like the following:

 #

# deb cdrom:[Debian GNU/Linux 8.7.1 _Jessie_ - Official amd64 DVD Binary-1 20170116-11:01]/ jessie contrib main

deb cdrom:[Debian GNU/Linux 8.7.1 _Jessie_ - Official amd64 DVD Binary-1 20170116-11:01]/ jessie contrib main

deb http://ftp.de.debian.org/debian/ jessie main
deb-src http://ftp.de.debian.org/debian/ jessie main

deb http://security.debian.org/ jessie/updates main contrib
deb-src http://security.debian.org/ jessie/updates main contrib

# jessie-updates, previously known as 'volatile'
deb http://ftp.de.debian.org/debian/ jessie-updates main contrib
deb-src http://ftp.de.debian.org/debian/ jessie-updates main contrib

You can open this file with any text editor installed on your machine. On Debian Jessie, you can find the text editor “leafpad” pre-installed on the machine.

The following shows the same file but this time from an Ubuntu 16.04 machine:

 #deb cdrom:[Ubuntu 16.04.2 LTS _Xenial Xerus_ - Release amd64 (20170215.2)]/ xenial main restricted

# See http://help.ubuntu.com/community/UpgradeNotes for how to upgrade to
# newer versions of the distribution.
deb http://de.archive.ubuntu.com/ubuntu/ xenial main restricted
# deb-src http://de.archive.ubuntu.com/ubuntu/ xenial main restricted

## Major bug fix updates produced after the final release of the
## distribution.
deb http://de.archive.ubuntu.com/ubuntu/ xenial-updates main restricted
# deb-src http://de.archive.ubuntu.com/ubuntu/ xenial-updates main restricted

## N.B. software from this repository is ENTIRELY UNSUPPORTED by the Ubuntu
## team. Also, please note that software in universe WILL NOT receive any
## review or updates from the Ubuntu security team.
deb http://de.archive.ubuntu.com/ubuntu/ xenial universe
# deb-src http://de.archive.ubuntu.com/ubuntu/ xenial universe
deb http://de.archive.ubuntu.com/ubuntu/ xenial-updates universe
# deb-src http://de.archive.ubuntu.com/ubuntu/ xenial-updates universe

## N.B. software from this repository is ENTIRELY UNSUPPORTED by the Ubuntu
## team, and may not be under a free licence. Please satisfy yourself as to
## your rights to use the software. Also, please note that software in
## multiverse WILL NOT receive any review or updates from the Ubuntu
## security team.
deb http://de.archive.ubuntu.com/ubuntu/ xenial multiverse
# deb-src http://de.archive.ubuntu.com/ubuntu/ xenial multiverse
deb http://de.archive.ubuntu.com/ubuntu/ xenial-updates multiverse
# deb-src http://de.archive.ubuntu.com/ubuntu/ xenial-updates multiverse

## N.B. software from this repository may not have been tested as
## extensively as that contained in the main release, although it includes
## newer versions of some applications which may provide useful features.
## Also, please note that software in backports WILL NOT receive any review
## or updates from the Ubuntu security team.
deb http://de.archive.ubuntu.com/ubuntu/ xenial-backports main restricted universe multiverse
# deb-src http://de.archive.ubuntu.com/ubuntu/ xenial-backports main restricted universe multiverse

## Uncomment the following two lines to add software from Canonical's
## 'partner' repository.
## This software is not part of Ubuntu, but is offered by Canonical and the
## respective vendors as a service to Ubuntu users.
# deb http://archive.canonical.com/ubuntu xenial partner
# deb-src http://archive.canonical.com/ubuntu xenial partner

deb http://security.ubuntu.com/ubuntu xenial-security main restricted
# deb-src http://security.ubuntu.com/ubuntu xenial-security main restricted
deb http://security.ubuntu.com/ubuntu xenial-security universe
# deb-src http://security.ubuntu.com/ubuntu xenial-security universe
deb http://security.ubuntu.com/ubuntu xenial-security multiverse
# deb-src http://security.ubuntu.com/ubuntu xenial-security multiverse

Let’s take a look at a sample line from the code above:

 deb cdrom:[Debian GNU/Linux 8.7.1 _Jessie_ - Official amd64 DVD Binary-1 20170116-11:01]/ jessie contrib main
  • This line starts with “deb”. It corresponds to binary packages that you can install with “apt”.
  • If you take a look at any of the files above, you’ll find lines starting with “deb-src”. Those lines correspond to source packages that you need to download first, compile yourself and then install.

The next part in the line above is the source:

cdrom:[Debian GNU/Linux 8.7.1 _Jessie_ - Official amd64 DVD Binary-1 20170116-11:01]/
  • Here you could find “cdrom”, “http”, “ftp” or “file” if you have a local repository.
  • In this case, the system has listed the install cd-rom with which the operating was first installed.

The next part in the main line above is the distribution name:

jessie

The next part in the main line above identifies what sort of packages you’re interested in:

contrib main

You could have the keywords “main”, “contrib”, “non-free”, “stable”, “unstable”, etc. Which one of these you should use depends on what you want to do. You usually find such information from the source whenever you need them. It’s not required to know them all by heart but just to understand their meaning or concept.

Linux: Upgrading Installed Software Packages

In order to update the software packages installed on your Linux machine, there are mainly the following two options:

sudo apt-get upgrade
sudo apt-get dist-upgrade

Here’s an excerpt from “man apt-get”:

upgrade is used to install the newest versions of all packages
    currently installed on the system from the sources enumerated in
    /etc/apt/sources.list. Packages currently installed with new
    versions available are retrieved and upgraded; under no
    circumstances are currently installed packages removed, or packages
    not already installed retrieved and installed. New versions of
    currently installed packages that cannot be upgraded without
    changing the install status of another package will be left at
    their current version. An update must be performed first so that
    apt-get knows that new versions of packages are available.
dist-upgrade in addition to performing the function of upgrade,
    also intelligently handles changing dependencies with new versions
    of packages; apt-get has a "smart" conflict resolution system, and
    it will attempt to upgrade the most important packages at the
    expense of less important ones if necessary. So, dist-upgrade
    command may remove some packages. The /etc/apt/sources.list file
    contains a list of locations from which to retrieve desired package
    files. See also apt_preferences(5) for a mechanism for overriding
    the general settings for individual packages.

As you can see, “upgrade” is safe as it will abort if there are dependency issues while upgrading packages.

“dist-upgrade” takes care of dependency issues as well and upgrades them as well if it’s required.

Normally you should use “upgrade”. If “upgrade” doesn’t work, you can go through the list of dependency issues and decide whether you can upgrade them as well or not. There might be instances where you simply cannot upgrade a package. For example, you want to upgrade all packages on your machine. You use the first command. Some of the packages go through but a few remain untouched since there are dependency issues. You go through the dependencies of one of them and find out that if you upgrade one of those dependencies, then another program on your machine won’t work. In such circumstances, it’s basically not possible to upgrade and you need to find another solution.

It’s always advisable to have a test machine and run your updates on the test machine first before running them on your production machine. Virtual machines help you do this easily by enabling you to create an exact image of your main machine on which you can test your updates.

Linux – Updating the Software Packages Index

You Linux box installs software from certain repositories. Those repositories are linked to from the operating system and so the system knows where to look for for packages to install.

If you try to install the Apache web server, for example, on your machine, chances are that the machine knows that it has the package on the install DVDs that came with the operating system. If that’s the case, the system asks you to insert that specific DVD to get the package and install it.

But basically, whatever you install on the system comes from an online repository most of the time. The system could have links to, say, 5 online repositories by default. You could add your own repositories as well.

The system makes a list of all the software packages that are available at all those repositories and keeps that list locally on the machine. The next time you want to install something, the system knows from where to download the package.

The list we were talking about gets updated by repository maintainers. Whoever is in charge of those repositories is supposed to make sure that the software is safe, clean and up-to-date. So they have to change their index from time to time. When the repository changes their index, your machine doesn’t get notified automatically. So you need to update you own local index manually from time to time, basically, almost whenever you want to install new software packages. The following command will get exactly that done for you.

sudo apt-get update

Linux – Installing and Uninstalling Packages

In Linux, you install software packages in a few different ways. First off, let me tell you what I mean by “software packages”. A software package in Linux is simply a program that you install on you Linux box to do something specific for you.

For example, you want to install an HTTP server on your machine so that clients can get HTML documents in the form of websites from your machine. One way to do that is to install the Apache HTTP server and that would be a software package or simply a “package” that you install on your Linux box.

Installing Software Packages

You can use any of the following ways to install software packages on a Linux machine.

Compile from the Source Code Yourself

On a Linux machine, one way to install a web server is to get the source package distributed by The Apache Software Foundation, compile it yourself and install it. You usually do this if the other option described here is not good enough for you. We’ll cover this option later.

In this guide, we’re not going to talk about compiling software. We’re going to talk about how you could get software from your own repository.

Download and Install from Your Repository (Command Line)

Every Linux distribution, for example Ubuntu, has its own software repository. There, you can find the compiled version of most software packages that have been compiled specifically for that specific distribution. To do this, you usually use the command

sudo apt-get install <package-name>

in a command interface on the machine and the package will automatically be downloaded and installed on your machine. If you don’t understand the command used here, it’ll be explained later in this guide. The problem with this option could be that you would not have any control over the software version since you usually don’t maintain the software repository. When you run this command, chances are, you’ll automatically get the latest version of the software available in the repository, not the latest version of that software available at any given time.

Use the Graphical User Interface (GUI)

Every Linux distribution has a desktop environment that gets installed along with the operating system (if you wish to). For example, if you install Ubuntu with the desktop environment and GUI by default, you’ll have access to “Software Center”. Using the Software Center, you can use a GUI to search for the packages you need and install them rather than using a command line interface. Please note that in this case, the packages are downloaded from the software repositories maintained for Ubuntu.

Installing Software Packages from the Command Line

For the sake of this guide, let’s say you’re installing the Apache web server. You’d simply enter the following command in a command line interface on you machine:

sudo apt-get install apache2

“sudo” here refers to “Super User”. You use that whenever you want to exercise you administrative rights on the system. For example in this case, since you’re installing software on the system, you do need that. You need to be a super user on the machine, otherwise you’re not allowed to install software on the machine.

The part that says “apt-get install” is used whenever you’re installing software.

“apache2” is the name of the web server software package.

Once you enter this command, you might be asked to enter your password and the package will be installed.

Un-installing Software Packages

In order to un-install software packages, you either use the command line interface or the GUI that comes with your Linux distribution.

Using the GUI is simple. You just find the software package installed and then you’ll have some button that lets you un-install the package.

Using the command line interface, you’ll have more control over what happens behind the scenes since you can define the following:

Un-install But Keep the Configuration

the package is un-installed but the settings related to the application remain on the machine. If you decide to install the package at a later time, you won’t have to reconfigure it anymore. You could use your old settings. In this case use the following command:

sudo apt-get remove <package-name>

Un-install and Purge the Configuration

If you decide not to keep the configuration files and data, use the following command:

sudo apt-get purge <package-name>

Un-install and Delete the Packages from the Archive

When you install a package, the package is first downloaded and saved to some folder on your machine. For example, if you use Debian Jessie, it could be the path /var/cache/apt/archives.

When you un-install the package, no matter which one of the above methods you decide to use, the package itself remains on you machine in the path above for example. If you want to delete the package from this path as well, for example to save some disk space, you need to use the following command:

sudo apt-get clean <package-name>

Un-install Dependencies as Well

When you install a package, there are probably many more packages that are called the “dependencies” of the package that you want to install. Those dependencies are also installed along with the main package. If you’re installing the package on a command line interface, the system reports all the dependency packages as well.

Now, when you un-install the main package later (from a command line interface), the system reports all the packages that are no longer needed to be installed on the system since they were the dependencies of the package you’re trying to un-install. If you decide to un-install those dependency packages as well, you can use the following command:

sudo apt-get autoremove

Checking the List of Installed Software Packages

Use the following command to see a list of all installed software packages on the machine.

dpkg --list

CSS Box Model Properties – Inline Elements

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don’t take the course but that’s primarily not the goal of this post.

This post talks about semantic inline elements.

Semantic inline elements are the kind of elements that describe the meaning of the text or content inside them. For example when you use the “strong” tag for a word inside a text, the purpose of the “strong” tag is to tell the reader that the word contained in the tag (the way the word is shown or represented in bold in the viewport) is a keyword or in some way important in the whole text. Some of the important inline elements in this category are,

  • span
  • em
  • i
  • strong
  • b
  • a
  • cite
  • code
  • q
  • sub
  • sup

 

  • Inline boxes are always as wide or high as the content inside them. You cannot use “width” or “height” on them. In other words, “width” or “height” cannot control their width or height. The height of an inline box can be controlled with “font-size”.
  • Again, “margin-top” or “margin-bottom” cannot control their margin-top or margin-bottom the way you might think about the classical box model.
  • If you use padding-top, padding-bottom, border-top or border-bottom on inline boxes, you need to be careful because the line height is not going to be influenced as a result of any of them. So you might end up with illegible text (lines, words or letter on top of others).

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the “float” CSS property. You can take this course with us at the following address:

CSS Box Model Properties – Block-level Elements

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don’t take the course but that’s primarily not the goal of this post.

If you want to control any aspect of the box model, you need to use the relevant CSS properties. For example, you want to add some border around the content of the box. You write the following line of code in your CSS:

p {
border: 1px solid black;
}

Or you want to add some padding to the top of the box, you write this line of code in your CSS:

p {
padding-top: 10px;
}

You basically have the following keywords in order to control the different aspects of the box model of any box in CSS:

  • width
  • height
  • padding
  • border
  • margin

“width” specifies the width of the content area in case of box-sizing: content-box. In the case of box-sizing: border-box; it controls the width of content area + padding-right + padding-left + border-right + border-left.

“height” specifies the height of the content area in case of box-sizing: content-box. In the case of box-sizing: border-box; it controls the height of content area + padding-top + padding-bottom + border-top + border-bottom.

“padding” specifies the width of the padding around the content area. You can have padding-top, padding-right, padding-bottom and padding-left.

In the case of “border” things get a little complicated since you can have,

  • padding-width
  • padding-style
  • padding-color

Each of these can, in turn, be defined for each of the sides. So you can, for instance, have

  • padding-right-width
  • padding-left-style
  • padding-bottom-color
  • etc.

“margin” defines the width of the margin for the four sides of the box. So you can have

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Please note that if you simply write “margin” it’s going to set the margin for the four sides of the box simultaneously. This applies to “padding” and “border” as well. For example, if you write,

p { margin: 10px; }

it would have the same meaning and effect as,

p {
margin-top: 10px;
margin-right; 10px;
margin-bottom: 10px;
margin-left: 10px;
}

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the “float” CSS property. You can take this course with us at the following address:

CSS Box Model – Introduction

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don’t take the course but that’s primarily not the goal of this post.

In order to understand the CSS box model, you need to understand what a box is.

If you write the following line of code in your text editor, save it as for example example.html and then open the document in a web browser,

<p>This is a paragraph.</p>

In the browser view port, what you’ll see is actually the same sentence without the “p” tags. If you inspect the website with some tool, for example Firebug, you’ll see a whole box around the sentence in the view port. The box will have the following parts:

  • content – where the sentence comes
  • padding – some padding around the content
  • border – a border line around the padding (by default the border is not there if you don’t specify one.)
  • margin – some margin around the border and outside the box

This is a simple box that you can put anything inside it. It kind of resembles actual boxes that we have in the world. Of course not exactly, you have some space in the box which is the content area. around the content area you can have some padding. We usually don’t do this in the real world in case of real boxes though. Then comes the walls of the box which you could think of as the “border”. The “margin” is actually outside the box. It could be thought of as the horizontal space between two boxes on the floor.

There are three types of boxes that you’re going to be dealing with the most,

  • Block-level boxes
  • Inline boxes
  • Inline-block boxes

We’ll familiarize ourselves with each type in the upcoming lessons.

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the “float” CSS property. You can take this course with us at the following address:

CSS “display” Property

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don’t take the course but that’s primarily not the goal of this post.

The CSS display property is most often used for building CSS layouts or in cases where you are trying to position HTML elements. It’s so because it changes the way an element is represented on the view port, whether it’s going to be rendered as a block-level box, inline box, inline-block box, etc.

For example the HTML “li” tag creates a block-level box in the view port. So when you have a “ul” and some li’s inside it, you’ll have some li’s on top of one another in the view port, each taking up the whole view port width, the next one starting from the next line. That’s basically how block-level boxes behave. This is not helpful if you’re building a horizontal navigation menu with a “ul”. You’d want the li’s to be placed beside each other. You know that inline boxes do exactly the same thing. In the viewport, they take up exactly as much space as their content needs. And that is exactly what you’d need in this situation. So you simply write in your CSS,

ul li { display: inline; }

And the problem is taken care of.

The “display” CSS property takes the following values. Please note that I have omitted the values that are not so often used or not relevant to our discussion here:

  • inline
  • block
  • inline-block

There’s one more interesting value for the “display” property which is “none”. You use this value mostly when you want to get the browser not show the element. In some cases and techniques it’s very useful.

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the “float” CSS property. You can take this course with us at the following address:

Replaced Elements and Boxes

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don’t take the course but that’s primarily not the goal of this post.

To know the difference between “elements” and “boxes”, please go to “Block-level Elements and Boxes“. If you have landed on this page from within the course page, then you must already have read that part.

Replaced elements are the kind of elements whose shape, dimensions and appearance are controlled by external factors and resources. This is probably not the best definition for replaced elements but once you read the example, it’ll make sense to you. For example, <img> is a replaced element. When you write an img element in an HTML document, you either

  • write the images width and height or
  • you write neither of them or
  • you write one of them

In the first case, the width and height with which the element is going to be rendered in, in the view port is going to be dictated by the values specified for the width and height properties of the img tag. If the values don’t match those of the external image’s, then the rendered image is going to be proportionally distorted. If the entered value match exactly those of the external images’, the image is going to rendered proportionally correct.

In the second case, the height and width with which the image is going to be rendered is going to be the exact height and width of the image itself.

In the third case, the browser is going to take care of the proportions. For example if the height of the original external image is 100px and you write 50px as the height attribute, that’s 50% of the height of the original image. As a result of that, the width of the rendered image is going to be 50% of the actual width of the external image.

So as you can see, in these cases, the dimensions of the rendered box is going to be influenced by the dimensions of the source external image (to some extent). That is one good example of a replaced element.

A good way to remember replaced elements is that replaced elements are the kind of elements like <img> that will be replaced by an external content source like an image.

With replaced elements, there are two points that you should remember:

  • You cannot use generated content with them. (More about generated content later – not very important at this point)
  • Replaced elements usually have some sort of default dimension in every browser under each operating system and of course depending on the device as well. So if you had a “textarea” and applied some CSS rules to it to give it a fixed width, the width of the “textarea” would default to the default width for that browser if the CSS didn’t load for any technical reason.

Examples of replaced elements are,

  • img
  • object
  • video
  • textarea
  • input
  • audio (in some cases)
  • canvas (in some cases)

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the “float” CSS property. You can take this course with us at the following address:

Inline-block Elements and Boxes

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don’t take the course but that’s primarily not the goal of this post.

To know the difference between “elements” and “boxes”, please go to “Block-level Elements and Boxes“. If you have landed on this page from within the course page, then you must already have read that part.

Inline-block boxes can be generated with the following CSS property:

display: inline-block;

Here’s are some important characteristics of inline-block boxes:

Inline-block boxes are just like inline boxes, in that they don’t take up the whole view port width. They take up only as much width as there’s content inside them.

In order to control the different box model properties of inline-block elements and boxes, you basically use the classical box model (the usual width, height, margin, border and padding) that you normally would use in case of normal block-level boxes.

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the “float” CSS property. You can take this course with us at the following address: