Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
  <nav id="navbar">
    <header>Ruby</header>
     <ul>
        <li><a class="nav-link" href="#Introduction">Introduction</a></li>
        <li><a class="nav-link" href="#The_History_of_Ruby">The History of Ruby</a></li>
        <li><a class="nav-link" href="#What_is_Ruby?">What is Ruby?</a></li>
        <li><a class="nav-link" href="#Why_is_Ruby_so_Popular?">Why is Ruby so Popular?</a></li>
        <li><a class="nav-link" href="#The_Most_Basic_Ruby_Example">The Most Basic Ruby Example</a></li>
        <li><a class="nav-link" href="#Executing_Ruby_from_the_Command_Line">Executing Ruby from the Command Line</a></li>
        <li><a class="nav-link" href="#Interactive_Ruby_Execution">Interactive Ruby Execution</a></li>
        <li><a class="nav-link" href="#Executing_Ruby_from_a_File">Executing Ruby from a File</a></li>
        <li><a class="nav-link" href="#Creating_a_Self_Contained_Ruby_Executable_on_Linux_or_UNIX">Creating a Self Contained Ruby Executable on Linux or UNIX</a></li>
        <li><a class="nav-link" href="#Associating_Ruby_Files_on_Windows">Associating Ruby Files on Windows</a></li>
        <li><a class="nav-link" href="#Reference">Reference</a></li>
</ul> 
  </nav>
  <main id="main-doc">
    <!-- SECTION ONE -->
    <section id="Introduction" class="main-section">
      <header>Introduction</header>
      <p>Ruby is a flexible and intuitive object-oriented programming language. From modest beginnings in Japan where it rapidly gained a loyal following, the popularity of Ruby has now spread throughout the programming world.</p>

<p>This surge in popularity can, in no small part, be attributed to the introduction and wide adoption of the Ruby on Rails framework. It is difficult, however, to get the most out of Ruby on Rails without first learning something about programming in Ruby, and this is where Ruby Essentials comes in.</p>

<p>Ruby Essentials is a free on-line book designed to provide a concise and easy to follow guide to learning Ruby. Everything from installing Ruby and the basics of the language through to topics such as arrays, file handling and object-oriented programming are covered, all combined with easy to understand code examples which serve to bridge the gap between theory and practice.</p>

<p>Ruby Essentials is intended to be of equal use both to those experienced in other programming languages and to novices who have chosen Ruby as their "first programming language".</p>
    </section>
    <!-- SECTION TWO -->
    <section id="The_History_of_Ruby" class="main-section">
      <header>The History of Ruby</header>
      <p>Ruby was created by Yukihiro Matsumoto (more affectionately known as Matz) in Japan starting in 1993. Matz essentially kept Ruby to himself until 1995 when he released it to the public. Ruby quickly gained a following in Matz's home country of Japan in the following years, and finally gained recognition in the rest of the programming world beginning in the year 2000. From that point on Ruby has grown in popularity, particularly because of the popularity of the Ruby on Rails web application development framework. </p>
      <p></p>
    </section>
    <!-- SECTION THREE -->
    <section id="What_is_Ruby?" class="main-section">
      <header>What is Ruby?</header>
      <p><google>ADSDAQBOX_FLOW</google> Ruby is an object-oriented interpreted scripting language. When we say it is interpreted we mean to say that the Ruby source code is compiled by an interpreter at the point of execution (similar in this regard to JavaScript and PHP). This contrasts with compiled languages such as C or C++ where the code is pre-compiled into a binary format targeted to run on a specific brand of microprocessor.</p>

<p>There are advantages and disadvantages to being an interpreted language. A disadvantage is speed. Because the source code has to be interpreted at runtime this means that it runs slower than an equivalent compiled application. A secondary concern for some is the fact that anyone who uses your application will also be able to see the source code. In the world of open source this is less of a problem than it used to be, but for some proprietary applications this might prove to be unacceptable.</p>

<p>The primary advantage of interpreted languages is that they are portable across multiple operating system platforms and hardware architectures. A compiled application, on the other hand, will only run on the operating system and hardware for which it was compiled. For example, you can take a Ruby application and run it without modification on an Intel system running Linux, an Intel system running Windows, an Intel system running Mac OS X or even a PowerPC system running Mac OS or Linux. To do this with a C or C++ application you would need to compile the code on each of the 5 different systems and make each binary image available. With Ruby you just supply the source code.</p>

<p>Another advantage of being interpreted is that we can write and execute Ruby code in real-time directly in the Ruby interpreter. For those who like to try things out in real time (and not everyone does), this is an invaluable feature.</p>
    </section>
    <!-- SECTION FOUR -->
    <section id="Why_is_Ruby_so_Popular?" class="main-section">
      <header>Why is Ruby so Popular?</header>
      <p>Firstly, Ruby is a very intuitive and clean programming language. This makes learning Ruby a less challenging task than learning some other languages. Ruby is also a great general purpose language. It can be used to write scripts in the same way you might use Perl and it can be used to create full scale, standalone GUI based applications. Ruby's usefulness doesn't end there however. Ruby is also great for serving web pages, generating dynamic web page content and excels at database access tasks.</p>

<p>Not only is Ruby intuitive and flexible it is also extensible, enabling new functionality to be added through the integration third-party, or even home grown libraries.</p>

<p>And, of course, being an interpreted language means that Ruby is portable. Once an application has been developed in Ruby it will run equally well on Ruby supported platforms such as Linux, UNIX, Windows and Mac OS X.</p>
    </section>
    <!-- SECTION FIVE -->
    <section id="The_Most_Basic_Ruby_Example" class="main-section">
      <header>The Most Basic Ruby Example</header>
      <p>Programming guides tend to follow the tradition of using "Hello World" as the first example of using a programming language. Typically such a program does nothing but output the string "Hello World" to the console window. Ruby Essentials is no exception to this rule, though we will modify it slightly to display "Hello Ruby!". Without further delay, let's get started:</p>
      <ul><li>On Linux or UNIX derived operating systems:</li></ul>
      <pre><code>print "Hello Ruby!\n"</code></pre>
      <ul><li>On Windows:</li></ul>
      <pre><code>print "Hello Ruby!"</code></pre>
      <p>As you can see, all we need to do to output some text is enter a single line of Ruby code. You may recall if you have read the previous chapters that one of the strengths of Ruby is that it is fast and intuitive to learn. Clearly it would be hard to make printing a line of text any easier than a print statement followed by the text to be displayed (together with a newline character '\n' on Linux and UNIX).</p>
      <ul><li>As an example, let's compare this to the equivalent code in Java:</li></ul>
      <pre><code>import java.io.*;

public class Hello {

        public static void main ( String[] args)
        {
                System.out.println ("Hello Ruby!\n");
        }
}</code></pre>
      <p>Hopefully, you are now beginning to see why Ruby is so popular. Programming languages such as Java require a significant amount of structure before even the simplest of tasks can be performed. Before we go any further we need to learn how to execute our first Ruby example. This can be done in a number of ways, each of which will be covered in the following sections of this chapter.</p>
    </section>
    <!-- SECTION SIX -->
    <section id="Executing_Ruby_from_the_Command_Line" class="main-section">
    <header>Executing Ruby from the Command Line</header>
      <p>Ruby allows lines of code to be executed as command line options to the ruby tool. This is achieved by using the '-e' command line flag. To execute our example 'Hello Ruby!' code, therefore, we could enter the following command:</p>
      <pre><code>ruby -e 'print "Hello Ruby!\n"'
Hello Ruby!</code></pre>
      <p>The '-e' flag only allows a single line of code to be executed, but that does not mean that multiple '-e' flags cannot be placed on a single command line to execute multiple lines:</p>
      <pre><code>ruby -e 'print "Hello Ruby!\n"' -e 'print "Goodbye Ruby!\n"'
Hello Ruby!
Goodbye Ruby!</code></pre>
      <!-- SECTION SEVEN -->
      <section id="Interactive_Ruby_Execution" class="main-section">
      <header>Interactive Ruby Execution</header>
        <p>In the <a href="#What_is_Ruby?">What is Ruby?</a> we discussed the fact that Ruby is an interpreted language. This essentially means that Ruby source code is compiled and executed at run time, rather than pre-compiled as is the case with languages such as C or C++. One of the advantages of being an interpreted language is that we can write Ruby code directly into the interpreter and have it executed interactively and in real-time. This is a great way to learn Ruby and to try out different code structures.</p>
<p>Interactive Ruby code is entered using the irb tool. If you are running Windows and installed Ruby using the one click installer, you already have irb installed. If you are running on Linux, there is a good chance irb is not yet installed. Verify the installation as follows:</p>
        <pre><code>irb -v
irb 0.9(02/07/03)</pre></code>
        <p>If you do not get the appropriate version information displayed, you will need to install irb.</p> 
        <ul><li>On Red Hat or Fedora Linux this can be achieved as follows:</li></ul>
        <pre><code>su
yum install irb</pre></code>
        <ul><li>On Debian, Ubuntu or other Debian derived Linux distributions use the apt-get tool:</li></ul>
        <pre><code>sudo apt-get install irb</pre></code>
        <p>Once irb is installed, launch it as follows:</p>
        <pre><code>$ irb
irb(main):001:0></pre></code>
        <p>Now, we can begin to execute Ruby code:</p>
        <pre><code>irb(main):001:0> puts 'Hello Ruby'
Hello Ruby
=> nil
irb(main):002:0></pre></code>
        <p>We could also perform a calculation or two:</p>
        <pre><code>irb(main):002:0> 3 + 4
=> 7
irb(main):003:0> 8 * 7
=> 56
irb(main):004:0> 10 % 2
=> 0</pre></code>
        <p>As you can see, anything we type at the irb prompt gets executed as soon as we press the Enter key. Ruby truly is an interactive, interpreted language.</p>
        </section>
        <!-- SECTION EIGHT -->
        <section id="Executing_Ruby_from_a_File" class="main-section">
        <header>Executing Ruby from a File</header>
          <p>Clearly the command line approach to execution is of limited use once you get beyond a few lines of Ruby script. A much more common approach is to place the Ruby script in a file, and then pass that file to the Ruby interpreter to run. To try this, create a file called hello.rb using your favorite editor and enter the following lines into it:</p>
          <pre><code>print "Hello Ruby!\n"
print "Goodbye Ruby!\n"</pre></code>
          <p>To execute this script, simply refer to it on the command line when launching ruby:</p>
          <pre><code>ruby hello.rb
Hello Ruby!
Goodbye Ruby!</pre></code>
          </section>
          <!-- SECTION NINE -->
          <section id="Creating_a_Self_Contained_Ruby_Executable_on_Linux_or_UNIX" class="main-section">
          <header>Creating a Self Contained Ruby Executable on Linux or UNIX</header>
            <p>Placing Ruby code into a file is obviously much easier and practical than using multiple -e command line options. Suppose, however, that we want to go one step further and be able to execute a Ruby based program simply by typing the name of the file containing the code, rather than prefixing it with the ruby command.</p>
<p>This can be achieved on Linux or UNIX by placing a special line at the top of the script file informing the environment responsible for executing the program (such as a Linux command shell) where to look for the Ruby interpreter. This special line consists of a '#', a '!' and the path to the ruby executable and is known affectionately as the shebang.</p>
<p>Firstly, you need to know where ruby is located on your system. Assuming it is already in your PATH environment variable you can use the which command to find it:</p>
            <pre><code>which ruby
/usr/bin/ruby</pre></code>
            <p>Given that ruby is in /usr/bin on the above system we can modify our sample application accordingly:</p>
            <pre><code>#!/usr/bin/ruby
print "Hello Ruby!\n"
print "Goodbye Ruby!\n"</pre></code>
            <p>We can now try running our hello.rb script:</p>
            <pre><code>./hello.rb
-bash: ./hello.rb: Permission denied</pre></code>
            <p>Clearly if you got the above output, there is a problem. This is simply a matter of the script not having execute permission. This can easily be rectified by using the chmod command to add execute permission to our script:</p>
            <pre><code>chmod 755 hello.rb</pre></code>
            <p>If we now try again we should get better results:</p>
            <pre><code>./hello.rb
Hello Ruby!
Goodbye Ruby!</pre></code>
            </section>
            <!-- SECTION TEN -->
            <section id="Associating_Ruby_Files_on_Windows" class="main-section">
          <header>Associating Ruby Files on Windows</header>
            <p>The Shebang approach outlined in the preceding chapter does not work on Windows. The #! line will just be UNIX gibberish to a Windows system. The best way to configure a Windows system to detect that a file with a .rb file extension is to be launched with Ruby is to use Windows file type associations.</p>
<p>If you have used Windows extensively you will be familiar with the concept that it is possible to double click, for example, on a .doc file and have that file automatically loaded into Microsoft Word. This works because the system has been configured to associate .doc files with Word. Associating .rb files with Ruby is essentially the same thing.</p>
<p>First, it is important to note that if you installed Ruby on Windows using the One-Click Installer then .rb files will already have been associated with Ruby, so there is no need to perform the steps in this section. Simply type hello.rb at the command prompt and our example will run.</p>
<p>If you built Ruby yourself from the source code, or installed using a mechanism other than the One-Click Installer, you will need to associate .rb files with Ruby. The steps to achieve this are as follows:</p>
<p>Begin by checking whether the association is already configured:</p>
            <pre><code>C:\MyRuby>assoc .rb
File association not found for extension .rb</pre></code>
            <p>Assuming that the association is not already configured, take the following steps to complete the configuration:</p>
            <pre><code>C:\MyRuby>assoc .rb=rbFile</pre></code>
            <p>Check to see if the file type rbfile already exists:</p>
            <pre><code>C:\MyRuby>ftype rbfile
File type 'rbfile' not found or no open command associated with it.</pre></code>
            <p>Assuming it does not already exist (be sure to substitute the path to your Ruby installation in the following command):</p>
            <pre><code>C:\MyRuby>ftype rbfile="D:\Ruby\bin\ruby.exe" "%1" %*</pre></code>
            <p>Verify the setting:</p>
            <pre><code>C:\MyRuby>ftype rbfile
rbfile="D:\ruby\bin\ruby.exe" "%1" %*</pre></code>
            <p>Add .rb to the PATHEXT environment variable as follows:</p>
            <pre><code>C:\MyRuby>set PATHEXT=.rb;%PATHEXT%</pre></code>
            <p>Once the above settings are configured simply run the program by typing the filename at the command prompt (the .rb filename extension is not required):</p>
            <pre><code>C:\MyRuby> hello
Hello Ruby</pre></code>
            <p>The above steps can be placed in your Autoexec.bat file if you would like this association made every time you reboot your system.</p>
            </section>
            <!-- SECTION ELEVEN -->
            <section id="Reference" class="main-section">
              <header>Reference</header>
              <ul>
                <li>All the documentation in this page is taken from <a href="https://www.techotopia.com/index.php/Ruby_Essentials">Techotopia</a>        
              </ul>
  </main>
      </div>
</body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
              
            
!

CSS

              
                * {
  box-sizing: border-box;
}

/* ADD STYLE TO NAVBAR */
nav {
    height: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden;
    background-color: #f1f1f1;
}

/* ADD STYLE TO NAVBAR HEADER */
nav header {
  display: block;
  color: #000;
  padding: 8px 16px;
  width: 270px;
  font-size: 1.5em;
  font-weight: bold;
  border-bottom: 1px solid darkgray
}

/* ADD STYLE TO NAVBAR UL ELEMENT */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 270px;
}

/* ADD STYLE TO NAVBAR LI ELEMENTS */
.nav-link  {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
nav li a:hover {
  background-color: #555;
  color: white;
}

/* ADD STYLE TO BODY */
body {
  font-size: 115%;
  background-color: white;
}

/* ADD STYLE TO MAIN ELEMENT */
main {
  margin-left: 200px;
  padding: 15px 100px;
}

/* ADD STYLE TO SECTION TITLES */
.main-section header {
  font-size: 1.25em;
  font-weight: bold;
  border-bottom: 1px solid darkgray
}

/* ADD STYLE TO SECTIONS */
.main-section {
   padding-bottom: 25px;
}

/* ADD STYLE TO PRE ELEMENTS */
pre {
  background-color: #F9F9F9;
  border: solid 1px grey;
  padding: 10px;  
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  nav, main {
    height: auto;
    width: 100%;
  }
  nav {
    display: flex;
  }
  main {
    margin-left: 0px;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console