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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                
<!-- 

Technical Documentation Page Project - 20190813

-->

<main id="main-doc">

  <nav id="navbar">

    <ul id="nav-link-list">
      <li>
        <header>
          <h1>RUST<br></h1>
        </header>
      </li>
      <li><a class="nav-link" href="#design">Design</a></li>
      <li><a class="nav-link" href="#history">History</a></li>
      <li><a class="nav-link" href="#examples">Examples</a></li>
      <li><a class="nav-link" href="#projects">Projects</a></li>
      <li><a class="nav-link" href="#conferences">Conferences</a></li>
      <li><a class="nav-link" href="#external_links">External Links</a></li>
    </ul>
  </nav>

  <div class="content">
    <h2 class="top-intro">Rust (programming language)</h2>
    <p>Rust is a multi-paradigm system programming language[14] focused on safety, especially safe concurrency.[15][16] Rust is syntactically similar to C++,[17] but is designed to provide better memory safety while maintaining high performance.</p>

    <p>Rust was originally designed by Graydon Hoare at Mozilla Research, with contributions from Dave Herman, Brendan Eich, and others.[18][19] The designers refined the language while writing the Servo layout or browser engine[20] and the Rust compiler.
      The compiler is free and open-source software dual-licensed under the MIT License and Apache License 2.0.</p>

    <p>Rust was the "most loved programming language" in the Stack Overflow Developer Survey for 2016, 2017, 2018, and 2019.[21][22][23][24]</p>

    <section class="main-section" id="design">
      <header>
        <h2>Design</h2>
      </header>
      <p>Rust is intended to be a language for highly concurrent and highly safe systems,[25] and programming in the large, that is, creating and maintaining boundaries that preserve large-system integrity.[26] This has led to a feature set with an emphasis
        on safety, control of memory layout, and concurrency.</p>

      <h3>Performance of idiomatic Rust</h3>
      <p>Performance of idiomatic Rust is comparable to the performance of idiomatic C++.[27][28]</p>

      <h3>Syntax</h3>
      <p>The concrete syntax of Rust is similar to C and C++, with blocks of code delimited by curly brackets, and control flow keywords such as if, else, while, and for. Not all C or C++ keywords are implemented, however, and some Rust functions (such as
        the use of the keyword match for pattern matching) will be less familiar to those versed in these languages. Despite the superficial resemblance to C and C++, the syntax of Rust in a deeper sense is closer to that of the ML family of languages
        and the Haskell language. Nearly every part of a function body is an expression,[29] even control flow operators. For example, the ordinary if expression also takes the place of C's ternary conditional. A function need not end with a return expression:
        in this case the last expression in the function creates the return value.</p>

      <h3>Memory safety</h3>
      <p>The system is designed to be memory safe, and it does not permit null pointers, dangling pointers, or data races in safe code.[30][31][32][33] Data values can only be initialized through a fixed set of forms, all of which require their inputs to
        be already initialized.[34] To replicate the function in other languages of pointers being either valid or NULL, such as in linked list or binary tree data structures, the Rust core library provides an option type, which can be used to test if
        a pointer has Some value or None.[31] Rust also introduces added syntax to manage lifetimes, and the compiler reasons about these through its borrow checker.</p>

      <h3>Memory management</h3>
      <p>Rust does not use an automated garbage collection system like those used by Go, Java, or the .NET Framework. Instead, memory and other resources are managed through the resource acquisition is initialization (RAII) convention, with optional reference
        counting. Rust provides deterministic management of resources, with very low overhead.[citation needed] Rust also favors stack allocation of values and does not perform implicit boxing.</p>

      <p>There is also a concept of references (using the & symbol), which do not involve run-time reference counting. The safety of using such pointers is verified at compile time by the borrow checker, preventing dangling pointers and other forms of undefined
        behavior.
      </p>

      <h3>Ownership</h3>
      <p>Rust has an ownership system where all values have a unique owner, where the scope of the value is the same as the scope of the owner.[35][36] Values can be passed by immutable reference using &T, by mutable reference using &mut T or by value using
        T. At all times, there can either be multiple immutable references or one mutable reference. The Rust compiler enforces these rules at compile time and also checks that all references are valid.</p>

      <h3>Types and polymorphism</h3>
      <p>The type system supports a mechanism similar to type classes, called "traits", inspired directly by the Haskell language. This is a facility for ad hoc polymorphism, achieved by adding constraints to type variable declarations. Other features from
        Haskell, such as higher-kinded polymorphism, are not yet supported.</p>

      <p>Rust features type inference, for variables declared with the keyword let. Such variables do not require a value to be initially assigned to determine their type. A compile-time error results if any branch of code fails to assign a value to the
        variable.[37] Variables assigned multiple times must be marked with the keyword mut.</p>

      <p>Functions can be given generic parameters, which usually require the generic type to implement a certain trait or traits. Within such a function, the generic value can only be used through those traits. This means that a generic function can be
        type-checked as soon as it is defined. This is in contrast to C++ templates, which are fundamentally duck typed and cannot be checked until instantiated with concrete types. C++ concepts address the same issue and are expected to be part of C++20
        (2020).
      </p>

      <p>However, the implementation of Rust generics is similar to the typical implementation of C++ templates: a separate copy of the code is generated for each instantiation. This is called monomorphization and contrasts with the type erasure scheme typically
        used in Java and Haskell. The benefit of monomorphization is optimized code for each specific use case; the drawback is increased compile time and size of the resulting binaries.</p>

      <p>The object system within Rust is based around implementations, traits and structured types. Implementations fulfill a role similar to that of classes within other languages, and are defined with the keyword impl. Inheritance and polymorphism are
        provided by traits; they allow methods to be defined and mixed in to implementations. Structured types are used to define fields. Implementations and traits cannot define fields themselves, and only traits can provide inheritance. Among other
        benefits, this prevents the diamond problem of multiple inheritance, as in C++. In other words, Rust supports interface inheritance, but replaces implementation inheritance with composition; see composition over inheritance.</p>
    </section>

    <section class="main-section" id="history">
      <header>
        <h2>History</h2>
      </header>
      <p>The language grew out of a personal project begun in 2006 by Mozilla employee Graydon Hoare,[16] who stated that the project was possibly named after the rust family of fungi.[38] Mozilla began sponsoring the project in 2009[16] and announced it
        in 2010.[39][40] The same year, work shifted from the initial compiler (written in OCaml) to the self-hosting compiler written in Rust.[41] Named rustc, it successfully compiled itself in 2011.[42] rustc uses LLVM as its back end.</p>

      <p>The first numbered pre-alpha release of the Rust compiler occurred in January 2012.[43] Rust 1.0, the first stable release, was released on May 15, 2015.[44][45] Following 1.0, stable point releases are delivered every six weeks, while features
        are developed in nightly Rust and then tested with alpha and beta releases that last six weeks.[46]</p>

      <p>Along with conventional static typing, before version 0.4, Rust also supported typestates. The typestate system modeled assertions before and after program statements, through use of a special check statement. Discrepancies could be discovered at
        compile time, rather than when a program was running, as might be the case with assertions in C or C++ code. The typestate concept was not unique to Rust, as it was first introduced in the language NIL.[47] Typestates were removed because in practice
        they were little used, though the same function can still be achieved with a branding pattern.[48]</p>

      <p>The style of the object system changed considerably within versions 0.2, 0.3 and 0.4 of Rust. Version 0.2 introduced classes for the first time, with version 0.3 adding several features including destructors and polymorphism through the use of interfaces.
        In Rust 0.4, traits were added as a means to provide inheritance; interfaces were unified with traits and removed as a separate feature. Classes were also removed, replaced by a combination of implementations and structured types.[citation needed]</p>

      <p>Starting in Rust 0.9 and ending in Rust 0.11, Rust had two built-in pointer types, ~ and @, simplifying the core memory model. It reimplemented those pointer types in the standard library as Box and (the now removed) Gc.</p>

      <p>In January 2014, the editor-in-chief of Dr Dobb's, Andrew Binstock, commented on Rust's chances to become a competitor to C++, and to the other upcoming languages D, Go and Nim (then Nimrod). According to Binstock, while Rust was "widely viewed
        as a remarkably elegant language", adoption slowed because it changed repeatedly between versions.[49]</p>

      <p>Rust was the third-most-loved programming language in the 2015 Stack Overflow annual survey,[50] and took first place in 2016, 2017, 2018, and 2019.[51][52][53][54]</p>

      <p>The language is referenced in The Book of Mozilla as "oxidised metal".[55]</p>
    </section>

    <section class="main-section" id="examples">
      <header>
        <h2>Examples</h2>
      </header>
      <h3>Hello World</h3>
      <p>Here is a simple "Hello, World!" program written in Rust. The <code>println!</code> macro prints the message to standard output.</p>

      <div class="code"><code>fn main() { println!("Hello World"); }</code></div>

      <h3>Factorial function</h3>
      <h4>Recursive</h4>

      <div class="code"><code>fn factorial(i: u64) -> u64 { match i { 0 => 1, n
        => n * factorial(n-1) } }</code></div>

      <h4>Iterative</h4>

      <div class="code"><code>fn factorial(i: u64) -> u64 { let mut acc = 1; for num in 2..=i { acc *= num; } acc }</code></div>

      <h4>Using iterators</h4>

      <div class="code"><code>fn factorial(i: u64) -> u64 { (1..=i).product() }</code></div>

    </section>

    <section class="main-section" id="projects">
      <header>
        <h2>Projects</h2>
      </header>

      <h3>Web browser</h3>
      <p>A Web browser and several related components are being written in Rust, including:</p>
      <ul>
        <li>Firefox[56]</li>
        <ul>
          <li>Servo – Mozilla's parallel web-browser engine[57] developed in collaboration with Samsung[58]</li>
          <li>Quantum – a project, composed of several sub-projects, to improve the Gecko web-browser engine of Firefox, developed by Mozilla[59]</li>
        </ul>
      </ul>

      <h3>Operating systems</h3>
      <p>Many operating systems (OS) and related components are being written in Rust. As of January 2019, the OSes included: BlogOS, intermezzOS, QuiltOS, Redox, RustOS, Rux, Tefflin, and Tock.[60] Wikipedia articles exist on:</p>
      <ul>
        <li>Magic Pocket – Dropbox's file system that powers their Diskotech petabyte storage machines[61]</li>
        <li>Redox – a microkernel[62]</li>
        <li>Stratis – a file system for Fedora[63] and RHEL 8[64]</li>
        <li>Railcar – a container runtime by Oracle[65]</li>
        <li>Firecracker – secure and fast microVMs for serverless computing[66]</li>
      </ul>

      <h3>Other</h3>
      <ul>
        <li>exa – a "modern replacement for ls"</li>
        <li>Microsoft Azure IoT Edge – a platform used to run Azure services and artificial intelligence on IoT devices has components implemented in Rust[67]</li>
        <li>OpenDNS – used in two of its components[68][69][70]</li>
        <li>Tor – an anonymity network, written in C originally, is experimenting with porting to Rust for its security features.[71][72]</li>
        <li>Wargroove – a video game developed by Chucklefish that uses Rust for its server software[73]</li>
        <li>Xi – a text editor from Raph Levien,[74] used within the Fuchsia operating system.[75]</li>
        <li>Deno – A secure runtime for JavaScript and TypeScript built with V8, Rust, and Tokio</li>
        <li>Libra – A cryptocurrency under development by Facebook</li>
      </ul>
    </section>

    <section class="main-section" id="conferences">
      <header>
        <h2>Conferences</h2>
      </header>
      <ul class="conf-list">
        <li class="conf">Rust Belt Rust – A #rustlang conference in the Rust Belt[76]</li>
        <ul class="conf-list">
          <li class="conf-sub">2018: Ann Arbor, Michigan</li>
          <li class="conf-sub">2017: Columbus, Ohio</li>
          <li class="conf-sub">2016: Pittsburgh, Pennsylvania</li>
        </ul>
        <li class="conf">RustFest – Europe's @rustlang conference[77]</li>
        <ul class="conf-list">
          <li class="conf-sub">2018: Rome, Italy</li>
          <li class="conf-sub">2018: Paris, France</li>
          <li class="conf-sub">2017: Zürich, Switzerland</li>
          <li class="conf-sub">2017: Kiev (Київ), Ukraine</li>
          <li class="conf-sub">2016: Berlin, Germany</li>
        </ul>
        <li class="conf">Rust LATAM</li>
        <ul class="conf-list">
          <li class="conf-sub">2019: Montevideo, Uruguay</li>
        </ul>
      </ul>
    </section>

    <section class="main-section" id="external_links">
      <header>
        <h2>External Links</h2>
      </header>
      <ul class="ext-links">
        <li><a class="ext-link" href="https://www.rust-lang.org/">Official website</a></li>
        <li><a class="ext-link" href="https://github.com/rust-lang">Rust-lang on GitHub</a></li>
      </ul>

    </section>

  </div>
</main>
              
            
!

CSS

              
                /*
font-family: 'Raleway', sans-serif;
font-family: 'Josefin Sans', sans-serif;
*/

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Raleway", sans-serif;
  line-height: 1.5;
  margin: 0;
}

code {
  font-size: 1.2rem;
  background-color: #eee;
}

h1 {
  color: white;
  font-family: "Josefin Sans", sans-serif;
  margin: 40px 4px 30px;
  text-align: center;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 3px;
}

h2 {
  margin: 50px 0 0;
  padding: 0;
}

h3 {
  margin: 15px 0 0;
  padding: 0;
}

h4 {
  margin-top: 10px;
  margin-bottom: 0;
}

p {
  padding: 0;
  margin-top: 10px;
}

a {
  color: #4c501b;
}

a:hover {
  color: #bd5f01;
}

ul#nav-link-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  height: 100%;
  position: fixed;
  overflow: auto;
  background-color: #bd5f01;
}

li a.nav-link {
  display: block;
  color: white;
  padding: 10px 10px;
  text-decoration: none;
  text-align: center;
}

li a.nav-link:hover {
  color: #333;
  background-color: #eadcc7;
  border-bottom: solid 7px yellowgreen;
}

#navbar {
  margin: 0;
  padding: 0;
  position: fixed;
}

.code {
  background-color: #eee;
  padding: 20px;
  margin: 5px 0;
}

.top-intro {
  margin: 0;
  padding-top: 10px;
}

.content {
  margin-left: 27%;
}

.ext-links {
  list-style-type: none;
  margin-left: 0;
  padding: 0;
}

.conf-list {
  padding: 0;
}

.conf-sub {
  list-style-type: none;
  padding-left: 20px;
}

.conf {
  font-weight: bold;
  list-style-type: none;
  margin-top: 10px;
}

@media (max-width: 800px) {
  ul#nav-link-list {
    width: 100%;
    height: 380px;
    position: fixed;
  }
  .content {
    margin-left: 1rem;
  }
  .top-intro {
    margin: 0;
    padding-top: 400px;
  }
}

@media (min-width: 800px) {
  .nav-link {
    color: #9c9945;
    font-size: 1.2rem;
  }
}

              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

              
            
!
999px

Console