Uly.me

cloud engineer

Archives for December 2014

Continuous Order List

Take a look at this piece of code from Codepen. It’s just a simple ordering list, but the list is broken up into several sections. The numerical order continuous as it spills over to other sections. It even changes to Roman numbering in the last section. How is this possible?

Just HTML and CSS. No Javascript. The key is adding the appropriate CSS to the ol markup.

Just look at the examples below.

// Start the list at number 6
<ol start="6">
// Start the list at number 11. Assign "roman" class to it.
<ol class="roman" start="11">

The CSS for “roman” is:

.roman { list-style-type:upper-roman; }

Pretty neat.

Responsive Page Width

You can do a lot with having a responsive design. If you’re using page widths on your designs, you can tailor your page layout based on the viewer’s screen size. The following CSS code will make your web page responsive by offering different page widths to your layout.

@media screen and (min-width:480px) {
#page {width:90%;}
}
@media screen and (min-width:720px) {
#page {width:75%;}
}
@media screen and (min-width:1440px) {
#page {width:60%;}
}

In the example above, any screen size that’s bigger than 1440px will have page width of 60%. A screen size of between 720px and 1440px will display a page width of 75%. Any screen size smaller than 480px will display a page width of 90%.

Install S3cmd on Ubuntu

If you want to backup your Linux server to Amazon S3 (Simple Storage Service), you need to install a utility called S3cmd which allows you to interact with Amazon’s cloud storage service. You’ll be able to create s3 buckets, upload and retrieve files from your Linux server to the S3.

You can install S3cmd from Ubuntu.

sudo apt-get install s3cmd

Next, you need to configure S3cmd using your S3 credentials. You’ll need an Access key and a Secret key from Amazon’s Security Credentials page which you can access from Amazon’s IAM Management Console.

sudo s3cmd --configure

For details on how to fully implement S3cmd, please take a look at this article.

Background Cover

Adding background images to your designs is quite simple. All you need to do is assign CSS background-image to the body of your design. In addition, you can also assign a background color, just in case the background image is not rendered.

body {
    background-image: url("path/to/the/background/image.gif");
    background-color: #cccccc;
}

The code above may have worked in the past, but with 4k and 5k monitors becoming popular nowadays, you need to make sure your background images are big enough to cover the large monitors as well.

To make your background image cover all monitor sizes, you need to use “background-cover.”

body { 
    background-size: cover;
}

Here’s the entire code.

body {
    background-image: url("path/to/the/background/image.gif");
    background-color: #cccccc;
    background-size: cover;
}

Netbeans IDE

I’m currently testing NetBeans IDE for PHP development. You can download Netbeans IDE directly from NetBean’s website. Netbeans IDE is a free and open source IDE or integrated development environment. IDE’s are essentially glorified editors with a bunch tools to make development easier. Tools can vary from built-in functions, code completion, debugger, version control to FTP access. Netbeans has plugins for multiple programming languages such Java, Javascript, PHP, HTML, Ruby in Rails, etc. Java 7 or newer is a prerequisite to make NetBeans work on your computer. You can download Java from here.