STARIKOVS

Before all of the things you need Linux and something like Postfix installed. I test these examples on Ubuntu.

In the first example, we will create a file with the message and then we’ll send it to the recipient with help of sendmail command.

Create the file /tmp/mail.txt that contains the text and a new line at the end:

  sudo nano /tmp/mail.txt

Subject: the subject
This is the text of the message.
[new line]

Then type this:

  sendmail recipient@gmail.com < /tmp/mail.txt

Today I’ve got my Dell Inspiron 3520 laptop with pre-installed Ubuntu Linux. This article contains the log, notes and tips about Ubuntu and this laptop.

Shortly about the hardware configuration:

15.6″ (1366×768) LED / Intel Pentium B960 (2.2 ???) / RAM 4 ?? / HDD 500 ?? / Intel HD Graphics / DVD+/-RW / LAN / Wi-Fi / Bluetooth / Camera / Ubuntu Linux 11.10 (Oneiric Ocelot)

Dell says that for this laptop.

Also, before I bought it the list of Ubuntu’s certified hardware had been checked against this notebook. I found out that this laptop is a certified hardware of Ubuntu but it should have pre-installed Ubuntu only.

After starting the laptop, Ubuntu asked some data about me, what city I am, default login/password, etc. Then I have a working operating system out of the box. I like it!

Then I decided to install some updates. To my surprise, there were lots of updates! 20 minutes of updating the system.

1
2

  sudo apt-get update
  sudo apt-get upgrade

It’s very interesting for me is it possible to upgrade from 11.10 to Ubuntu 12.04 keeping all the drivers for the laptop. Think, I’ll test this later

The next step, is installing the Chromium form the Ubuntu Software Center. Everything is OK.

Then I needed something like Google Talk on Windows but for Linux. Unfortunately, there isn’t an analog of Google Talk for Linux But there’re some chat clients that can work almost like Google Talk. I use Empathy Internet Messaging that comes with Ubuntu.

What about hardware, it works good except of fan. The fan is too loud. I’m going to investigate this problem. I have some links where the similar fan problem mentioned:

Ubuntu heating my laptop
Ubuntu noisier than Windows 7
Fan keeps running indefinitely on Ubuntu after system was temporarily hot

February 23

Today I installed Skype form the Ubuntu Software Center. I logged in without any problems. The look of Skype differs from Windows Skype but it works and there isn’t any ads!

Yesterday, I installed Chromium web browser and logged in with my Google account. Today, when I worked with Chromium surprisingly it installed all the browser extensions I have on Windows. All this happened without restarting a browser.

February 28

I’ve just installed DropBox and there’re some my video files in 3gp format. Ubuntu has just downloaded and installed corresponding codecs for watching the video of this format when I clicked to open the video file!

It isn’t the end! I’m going to continue this log.

It’s possible to center some text in the paragraph by using text-align CSS property. Also, you aren’t limited only by the paragraph, it’s possible to center the text inside any other container, for example, inside div, h1, blockquote etc. Just set text-align property to center and you’ll get the text centered.

Fortunately, you can use such approach for images to align them by center, also! Just set text-align with a center value for the image’s parent element and you’ll get it centered horizontally.

1
2
3

  <div class="image-container">
    <img src="image.png">
  </div>

1
2
3
4
5
6
7

  .image-container {
    text-align: center;
  }
 
  .image-container img {
    display: inline-block;
  }

Notice that you cannot align an image by center if you’re using float property with left or right values for the image. Also, text-align property doesn’t take an affect if the image has display other then inline or inline-block which is a default display for images in the most of browsers.

Check out this Pen!

Try it here http://codepen.io/starikovs/pen/iqxms.

By the way, to center an image vertically you can use the described in the article vertical align block element inside block element.

This note is about applying a transparency or opacity for background in CSS. Notice, that it isn’t possible to set the transparency for background property specifying it in the property definition. So, you need to use some CSS trick to achieve you want.

My way to apply opacity for background:

1. Create new z-index context for the element with the background. This is a container element.

2. Add :before pseudo element for that container element. It will have a background layer with opacity property.

3. :before element should be pozitioned under any other elements in the container element. So, set z-index “-1″ for it.

4. Set a background for the :before element and stretch it to the container element.

I think that’s all. Here’s the code snippets:

1
2
3

  <div class="container">
    <p>Lorem ipsum dolor sit amet..</p>
  </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  .container {
    position: relative;
    z-index: 0;
  }
 
  .container:before {
    background: url(bg.png);
    position: absolute;
    bottom: 0;
    content: ' ';
    left: 0;
    opacity: .5;
    right: 0;
    top: 0;
    z-index: -1;
  }

Check out this Pen!

Try it here http://codepen.io/starikovs/pen/zGugk.

Unfortunately, I haven’t been used the fallbacks yet. I’ve just found out that some of rgba colors in IE8 are just transparent. This note is about the fallbacks for old browsers. When you’re using such features like rgba colors don’t forget about the fallbacks. In CSS, first you should write the fallback color for old browsers and then your rgba color. Here’s an example:

1
2
3
4

  .test {
    background: #000; /* fallback */
    background: rgba(0, 0, 0, .8);
  }

So, if the browser doesn’t understand rgba color it won’t apply it but apply the background-color above that it understands. The fallback should have rgb or hex values because old browsers understand them.

I test it on IE8.

Check out this Pen!

Try it here http://codepen.io/starikovs/pen/omiCk.

This note is about how to create a backup of MySQL database with help of command line tools and then how to restore it on the server.

So, the first step is making a dump of the DB. For that task we use mysqldump command. Here’s the code:

    mysqldump -h localhost -u root mydatabase > mydatabasebackup.sql

After dumping we will have SQL file that contains SQL command to recreate a database structure and SQL commands to restore all the data.

To restore a database out of backup we should use mysql command. It should be like in the following example:

    mysql -h localhost -u root -p -D mydatabase < mydatabasebackup.sql

It will ask you for the password.

By the way, before restoring your database you should create it in case that the database doesn’t exist.

1
2

    mysql -h localhost -u root -p
    > create database mydatabase;

This note is about empty and non empty attribute CSS selectors.

To select some elements in CSS by attribute value we should use attribute selectors. There’s an attribute selector that matches elements when their attribute exactly equals to a specified value in the selector.

1
2
3

  [attribute='value'] {
 
  }

So, to select elements with an empty attribute we should use the following CSS:

1
2
3

  div[data-attr=''] {
 
  }

Unfortunately, there isn’t “not empty” attribute selector but we can get the same effect using :not() selector: Here’s an example:

1
2
3

  :not([data-attr='']) {
 
  }

You can try it here http://codepen.io/starikovs/pen/tngqH.

There’s a feature of browsers that allows to drag and drop elements such as links, images, etc. Sometimes this behaviour may be undesirable, for example, when you’re implementing your own special drag and drop. In this short note I’ll provide a small JavaScript code snippets that prevent a default drag and drop behaviour.

The following code snippet will disable a default drag and drop behaviour for all the elements:

  $(document).bind("dragstart", function(event) {
    event.preventDefault();
  });

This code snippet prevents default drag and drop behaviour only for hyperlinks:

  $(document).bind("dragstart", function(event) {
    if (event.target.tagName.toLowerCase() === "a") {
      event.preventDefault();
    }
  });

You can try it here http://jsfiddle.net/v5E6n/1/.

There’re some jQuery plugins that help to stretch background image on the body or other HTML elements. It’s not a hard task to make background image covering HTML element with help of JavaScript by adding a resizable img tag. But what about CSS? Is it possible to make that stretching using just CSS? Fortunately, it’s possible!

To stretch background image on the HTML element you should use background-size CSS property with cover value.

1
2
3
4
5
6
7

  body {
    background: url(image.jpg) fixed no-repeat;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
  }

Here’s the example:

Check out this Pen!

Try it here http://codepen.io/starikovs/pen/aDyGI.

It’s a very frequent task to remove all the children from HTML node. I’ve been confused recently and the reason is a jQuery function empty(). I haven’t used it before! And it’s because I haven’t known about it yet) All I do to remove all the children from the element is callinga method .html("") passing an empty string as an argument. But there’s a more elegant way! Yes, it’s by using .empty() method!

1
2
3
4
5
6
7

  <div id="test">
    <h1>Header</h1>
    <div class="content">
      <p>Lorem ipsum dolor sit amet.</p>
      <div class="meta">21.01.2013 12:17</div>
    </div>
  </div>

1
2

  // remove all the contents of the #test div
  $("#test").empty();