• Skip to main content

Uly.me

cloud engineer

  • Home
  • About
  • Archives

Archives for December 2014

Continuous Order List

December 26, 2014

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 6 <ol start="6">

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

// 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; }

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

Pretty neat.

Filed Under: CSS, HTML Tagged With: order list

Responsive Page Width

December 25, 2014

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%;}
}

@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%.

Filed Under: CSS Tagged With: page width, responsive

Install S3cmd on Ubuntu

December 22, 2014

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

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

sudo s3cmd --configure

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

Filed Under: Cloud, Linux Tagged With: amazon, cloud, s3, storage

Background Cover

December 22, 2014

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;
}

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;
}

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;
}

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

Filed Under: CSS, HTML Tagged With: background, images

Netbeans IDE

December 11, 2014

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.

Filed Under: PHP Tagged With: ide, netbeans

Get Apache Version

December 3, 2014

To find out what version of Apache running on your server, type the following.

Ubuntu-based distros

apache2 -V

apache2 -V

Debian-based distros

apachectl -V

apachectl -V

Redhat-based distros

httpd -V

httpd -V

Filed Under: Linux Tagged With: apache, version

  • Home
  • About
  • Archives

Copyright © 2023