✨ revamp

.gitignore

@@ -1,5 +0,0 @@
-*.gem
-.bundle
-.sass-cache
-_site
-Gemfile.lock

Gemfile

@@ -1,4 +1,34 @@
-# frozen_string_literal: true
-
 source "https://rubygems.org"
-gemspec
+
+# Hello! This is where you manage which Jekyll version is used to run.
+# When you want to use a different version, change it below, save the
+# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
+#
+#     bundle exec jekyll serve
+#
+# This will help ensure the proper Jekyll version is running.
+# Happy Jekylling!
+gem "jekyll", "~> 3.8.3"
+
+# This is the default theme for new Jekyll sites. You may change this to anything you like.
+# gem "minima", "~> 2.0"
+
+# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
+# uncomment the line below. To upgrade, run `bundle update github-pages`.
+# gem "github-pages", group: :jekyll_plugins
+
+# If you have any plugins, put them here!
+group :jekyll_plugins do
+  gem 'jekyll-feed', '~> 0.11.0'
+  gem 'jekyll-sitemap'
+  gem 'jekyll-sass-converter', '~> 1.5', '>= 1.5.2'
+  gem 'jekyll-compose'
+  gem 'jekyll-postfiles', '~> 3.0'
+  gem 'rouge', '3.3.0'
+end
+
+# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
+# gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+
+# Performance-booster for watching directories on Windows
+# gem "wdm", "~> 0.1.0" if Gem.win_platform?

Gemfile.lock

@@ -0,0 +1,75 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.7.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.5)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
+    ffi (1.12.1)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.8.6)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 1.14)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-compose (0.12.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-feed (0.11.0)
+      jekyll (~> 3.3)
+    jekyll-postfiles (3.1.0)
+      jekyll (>= 3.8.6, < 5)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-sitemap (1.4.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (1.17.0)
+    liquid (4.0.3)
+    listen (3.2.1)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.3.6)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (4.0.3)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rouge (3.3.0)
+    safe_yaml (1.0.5)
+    sass (3.7.4)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (~> 3.8.3)
+  jekyll-compose
+  jekyll-feed (~> 0.11.0)
+  jekyll-postfiles (~> 3.0)
+  jekyll-sass-converter (~> 1.5, >= 1.5.2)
+  jekyll-sitemap
+  rouge (= 3.3.0)
+
+BUNDLED WITH
+   2.0.2

LICENSE

@@ -1,6 +1,6 @@
-The MIT License (MIT)
+MIT License
 
-Copyright (c) 2019 piharpi
+Copyright (c) 2019 Mahendrata Harpi
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -9,13 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in
+The above copyright notice and this permission notice shall be included in all
-all copies or substantial portions of the Software.
+copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-THE SOFTWARE.
+SOFTWARE.

README.md

@@ -1,52 +1,24 @@
-# bangsring
+# Klisé
-
-Welcome to your new Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes`, your sass files in `_sass` and any other assets in `assets`.
-
-To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
-
-TODO: Delete this and the text above, and describe your gem
 
+Klisé is minimalist Jekyll theme for running a personal site and blog running on Jekyll, Ruby, Netlify, Now.sh.
 
 ## Installation
 
-Add this line to your Jekyll site's `Gemfile`:
+Run local server:
 
-```ruby
+```bash
-gem "bangsring"
+git clone https://github.com/piharpi/jekyll-klise.git
+cd jekyll-klise
+bundle install
+bundel exec jekyll serve
 ```
 
-And add this line to your Jekyll site's `_config.yml`:
+Navigate to `localhost:4000`.
-
-```yaml
-theme: bangsring
-```
-
-And then execute:
-
-    $ bundle
-
-Or install it yourself as:
-
-    $ gem install bangsring
-
-## Usage
-
-TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+If you see any typos or formatting errors in a post, or any other issue that needs to be addressed, please do not hesitate to open a pull request and fix it!
-
-## Development
-
-To set up your environment to develop this theme, run `bundle install`.
-
-Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
-
-When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
-To add a custom directory to your theme-gem, please edit the regexp in `bangsring.gemspec` accordingly.
 
 ## License
 
-The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+This project is open source and available under the [MIT License](LICENSE).
-

_config.yml

@@ -1,25 +1,30 @@
 # Site settings
-title: Mahendrata Harpi 🇮🇩
+title: Klise Theme
 description: >-
-  this blog is place where i'm writing about web technology 
+  He's writing in Bahasa about web technology and experience as a journal 
-  what i like and as journal for documentation things what i learned, meet me <a href="https://github.com/piharpi" target="_blank">@github</a>.
+  for documentation things that he learned, meet him <a href="https://github.com/piharpi" target="_blank" rel="noopener">@github</a>.
 lang: en-US
 timezone: Asia/Jakarta
-icon: "favicon.ico"
+image: assets/img/ogp.png # This image used for Open Graph more info https://ogp.me/
+repo: https://github.com/piharpi/mahendrata.now.sh
+mode: dark # default theme "dark" | "light"
 
-# User settings
+# Profile settings
 author:
-  name: Mahendrata Harpi
+  name: Klisé Theme
-  username: piharpi
+  bio: >-
-  email: justharpi@gmail.com
+    He's writing in Bahasa about web technology and experience as a journal 
-  avatar: "/assets/img/avatar.jpg"
+    for documentation things that he learned, meet him <a href="https://github.com/piharpi/jekyll-klise" target="_blank" rel="noopener">@github</a>.
+  username: username
+  email: your-email@email.com
+  avatar: /assets/img/avatar.jpg
 
 # Url settings
-url: https://piharpi.com
+url: "https://klise.now.sh"
-baseurl: ""
+baseurl:
-permalink: blog/:categories/:title/
+permalink: /:title/
-google_analytics: UA-105586262-1
+google_analytics:
-fb_appid: ""
+fb_appid:
 
 # Collection setting
 collections:
@@ -67,7 +72,6 @@ exclude:
   - CHANGELOG.md
   - README.md
   - node_modules
-  - bangsring.gemspec
   - CODE_OF_CONDUCT.md
 
 # Plugins
@@ -75,3 +79,4 @@ plugins:
   - jekyll-feed
   - jekyll-sass-converter
   - jekyll-sitemap
+  - jekyll-postfiles

_data/menus.yml

@@ -1,8 +1,16 @@
-- title: Home
+- title: home
   url: /
+  external: false
 
-- title: About
+- title: about
   url: /about/
+  external: false
 
-- title: RSS
+- title: notes
-  url: /feed.xml/
+  url: /notes/
+  external: false # set true if you using external link, see bellow
+
+# Example:
+# - title: github
+#   url: https://github.com/piharpi/jekyll-klise
+#   external: true

_includes/anchor_headings.html

@@ -0,0 +1,105 @@
+{% capture headingsWorkspace %}
+  {% comment %}
+    Version 1.0.4
+      https://github.com/allejo/jekyll-anchor-headings
+
+    "Be the pull request you wish to see in the world." ~Ben Balter
+
+    Usage:
+      {% include anchor_headings.html html=content %}
+
+    Parameters:
+      * html          (string) - the HTML of compiled markdown generated by kramdown in Jekyll
+
+    Optional Parameters:
+      * beforeHeading (bool)   : false  - Set to true if the anchor should be placed _before_ the heading's content
+      * anchorAttrs   (string) :  ''    - Any custom HTML attributes that will be added to the `<a>` tag; you may NOT use `href`, `class` or `title`
+      * anchorBody    (string) :  ''    - The content that will be placed inside the anchor; the `%heading%` placeholder is available
+      * anchorClass   (string) :  ''    - The class(es) that will be used for each anchor. Separate multiple classes with a space
+      * anchorTitle   (string) :  ''    - The `title` attribute that will be used for anchors
+      * h_min         (int)    :  1     - The minimum header level to build an anchor for; any header lower than this value will be ignored
+      * h_max         (int)    :  6     - The maximum header level to build an anchor for; any header greater than this value will be ignored
+      * bodyPrefix    (string) :  ''    - Anything that should be inserted inside of the heading tag _before_ its anchor and content
+      * bodySuffix    (string) :  ''    - Anything that should be inserted inside of the heading tag _after_ its anchor and content
+
+    Output:
+      The original HTML with the addition of anchors inside of all of the h1-h6 headings.
+  {% endcomment %}
+
+  {% assign minHeader = include.h_min | default: 1 %}
+  {% assign maxHeader = include.h_max | default: 6 %}
+  {% assign beforeHeading = include.beforeHeading %}
+  {% assign nodes = include.html | split: '<h' %}
+
+  {% capture edited_headings %}{% endcapture %}
+
+  {% for _node in nodes %}
+    {% capture node %}{{ _node | strip }}{% endcapture %}
+
+    {% if node == "" %}
+      {% continue %}
+    {% endif %}
+
+    {% assign nextChar = node | replace: '"', '' | strip | slice: 0, 1 %}
+    {% assign headerLevel = nextChar | times: 1 %}
+
+    <!-- If the level is cast to 0, it means it's not a h1-h6 tag, so let's try to fix it -->
+    {% if headerLevel == 0 %}
+      {% if nextChar != '<' and nextChar != '' %}
+        {% capture node %}<h{{ node }}{% endcapture %}
+      {% endif %}
+
+      {% capture edited_headings %}{{ edited_headings }}{{ node }}{% endcapture %}
+      {% continue %}
+    {% endif %}
+
+    {% assign _workspace = node | split: '</h' %}
+    {% assign _idWorkspace = _workspace[0] | split: 'id="' %}
+    {% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
+    {% assign html_id = _idWorkspace[0] %}
+
+    {% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}
+    {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}
+
+    <!-- Build the anchor to inject for our heading -->
+    {% capture anchor %}{% endcapture %}
+
+    {% if html_id and headerLevel >= minHeader and headerLevel <= maxHeader %}
+      {% capture anchor %}href="#{{ html_id }}"{% endcapture %}
+
+      {% if include.anchorClass %}
+        {% capture anchor %}{{ anchor }} class="{{ include.anchorClass }}"{% endcapture %}
+      {% endif %}
+
+      {% if include.anchorTitle %}
+        {% capture anchor %}{{ anchor }} title="{{ include.anchorTitle | replace: '%heading%', header }}"{% endcapture %}
+      {% endif %}
+
+      {% if include.anchorAttrs %}
+        {% capture anchor %}{{ anchor }} {{ include.anchorAttrs }}{% endcapture %}
+      {% endif %}
+
+      {% capture anchor %}<a {{ anchor }}>{{ include.anchorBody | replace: '%heading%', header | default: '' }}</a>{% endcapture %}
+
+      <!-- In order to prevent adding extra space after a heading, we'll let the 'anchor' value contain it -->
+      {% if beforeHeading %}
+        {% capture anchor %}{{ anchor }} {% endcapture %}
+      {% else %}
+        {% capture anchor %} {{ anchor }}{% endcapture %}
+      {% endif %}
+    {% endif %}
+
+    {% capture new_heading %}
+      <h{{ _hAttrToStrip }}
+        {{ include.bodyPrefix }}
+        {% if beforeHeading %}
+          {{ anchor }}{{ header }}
+        {% else %}
+          {{ header }}{{ anchor }}
+        {% endif %}
+        {{ include.bodySuffix }}
+      </h{{ _workspace | last }}
+    {% endcapture %}
+    {% capture edited_headings %}{{ edited_headings }}{{ new_heading }}{% endcapture %}
+  {% endfor %}
+{% endcapture %}{% assign headingsWorkspace = '' %}{{ edited_headings | strip }}

_includes/author.html

@@ -0,0 +1,9 @@
+<div class="author">
+  <img
+    class="author-avatar"
+    src="{{ site.author.avatar }}"
+    alt="{{ site.author.username }}"
+  />
+  <h2 class="author-name">{{ site.author.name }}</h2>
+  <p class="author-bio">{{ site.author.bio }}</p>
+</div>

_includes/comments.html

@@ -1 +1,10 @@
-<!-- paste here -->
+<!-- unnecessary file, but you can still use for comment section, e.g disqus -->
+<script
+  src="https://utteranc.es/client.js"
+  repo="username/reponame"
+  issue-term="pathname"
+  label="✨ comment ✨"
+  theme="github-light"
+  crossorigin="anonymous"
+  async
+></script>

_includes/footer.html

@@ -1,12 +1,16 @@
 <footer class="footer">
-  <div class="copyright">
+  <a class="footer_item" href="/thanks">ack.</a>
-    <a href="/thanks">ack.</a>
+  <a class="footer_item" href="/resume">resume</a>
-    <b>/</b>
+  <a class="footer_item" href="/feed.xml">rss</a>
-    <a href="/feed.xml">rss</a>
+  <span class="footer_item">&copy; {{ site.time | date: "%Y" }}</span>
-    <b>/</b>
+  <small class="footer_theme-copyright">
-    <b>&copy; {{ site.time | date: "%Y" }}</b>
+    <!-- Klisé Theme: https://github.com/piharpi/jekyll-klise -->
-  </div>
+    <a href="https://github.com/piharpi/jekyll-klise" target="_blank">klisé</a>
+    theme on
+    <a href="https://jekyllrb.com" target="_blank">jekyll</a>
+  </small>
 </footer>
+<script src="/assets/js/main.js" defer="defer"></script>
 <script src="/assets/js/galite.js"></script>
 <script>
   var galite = galite || {};

_includes/header.html

@@ -3,27 +3,26 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="mobile-web-app-capable" content="yes" />
-  <meta name="theme-color" content="#24292e" />
+  <meta name="p:domain_verify" content="74b28158c46b8035f8f4a5ba032e51b2" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="application-name" content="{{ site.title }}" />
   <meta name="apple-mobile-web-app-status-bar-style" content="#fff" />
   <meta name="apple-mobile-web-app-title" content="{{ site.title }}" />
   <title>
     {% if page.title %}{{ page.title | escape }} - {{ site.title }}{% else %}{{
-      site.title | escape
+    site.title | escape }}{% endif %}
-    }}{% endif %}
   </title>
   <link
     rel="alternate"
     href="{{
-      page.url | absolute_url | remove: 'index.html' | remove: '.html'
+      page.url | remove: 'index.html' | remove: '.html' | absolute_url
     }}"
     hreflang="{{ site.lang }}"
   />
   <link
     rel="canonical"
     href="{{
-      page.url | absolute_url | remove: 'index.html' | remove: '.html'
+      page.url  | remove: 'index.html' | remove: '.html' | absolute_url
     }}"
   />
   {% if paginator.previous_page %}
@@ -31,7 +30,6 @@
     rel="prev"
     href="{{
       paginator.previous_page_path
-        | absolute_url
         | remove: 'index.html'
         | remove: '.html'
     }}"
@@ -41,7 +39,6 @@
     rel="next"
     href="{{
       paginator.next_page_path
-        | absolute_url
         | remove: 'index.html'
         | remove: '.html'
     }}"
@@ -84,7 +81,7 @@
   <meta
     property="og:url"
     content="{{
-      page.url | absolute_url | remove: 'index.html' | remove: '.html'
+      page.url | remove: 'index.html' | remove: '.html' | absolute_url
     }}"
   />
   <meta
@@ -115,7 +112,7 @@
   <meta
     name="twitter:url"
     content="{{
-      page.url | absolute_url | remove: 'index.html' | remove: '.html'
+      page.url  | remove: 'index.html' | remove: '.html' | absolute_url
     }}"
   />
   <meta name="twitter:site" content="@{{ site.author.username }}" />
@@ -136,13 +133,39 @@
   {% else %}
   <meta name="twitter:image" content="{{ site.image | absolute_url }}" />
   {% endif %} {% feed_meta %}
-  <link rel="icon" href="{{ site.icon | absolute_url }}" type="image/x-icon" />
   <link
-    rel="shortcut icon"
+    rel="apple-touch-icon"
-    href="{{ site.icon | absolute_url }}"
+    sizes="180x180"
-    type="image/x-icon"
+    href="/assets/favicons/apple-touch-icon.png"
   />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="96x96"
+    href="/assets/favicons/android-chrome-96x96.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="32x32"
+    href="/assets/favicons/favicon-32x32.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="16x16"
+    href="/assets/favicons/favicon-16x16.png"
+  />
+  <link rel="manifest" href="/assets/favicons/site.webmanifest" />
+  <link
+    rel="mask-icon"
+    href="/assets/favicons/safari-pinned-tab.svg"
+    color="#5bbad5"
+  />
+  <meta name="apple-mobile-web-app-title" content="Mahendrata" />
+  <meta name="application-name" content="Mahendrata" />
+  <meta name="msapplication-TileColor" content="#da532c" />
+  <meta name="theme-color" content="#2c2c2c" />
 
-  <link rel="apple-touch-icon" href="{{ site.icon }}" />
+  <link rel="stylesheet" href="/assets/css/style.css" />
-  <link rel="stylesheet" href="{{ '/assets/css/style.css' | absolute_url }}" />
 </head>

_includes/jumbotron.html

@@ -1,9 +0,0 @@
-<div class="introduction">
-  <img
-    class="introduction-image"
-    src="{{ site.author.avatar | absolute_url }}"
-    alt="{{ site.author.username }}"
-  />
-  <div class="introduction-name">{{ site.title }}</div>
-  <p class="introduction-description">{{ site.description }}</p>
-</div>

_includes/navbar.html

@@ -3,26 +3,30 @@
     <input type="checkbox" id="menu-trigger" class="menu-trigger" />
     <label for="menu-trigger">
       <span class="menu-icon">
-        <svg viewBox="0 0 18 15" width="18px" height="15px" style="background: white;">
+        <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'><path d='M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z'/></svg>
-          <path fill="#fff"
-            d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z" />
-          <path fill="#fff"
-            d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z" />
-          <path fill="#fff"
-            d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z" />
-        </svg>
       </span>
     </label>
+    <a id="mood">
+      <svg class="mood-sunny" xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'><title>LIGHT</title><line x1='256' y1='48' x2='256' y2='96' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='256' y1='416' x2='256' y2='464' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='108.92' x2='369.14' y2='142.86' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='369.14' x2='108.92' y2='403.08' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='464' y1='256' x2='416' y2='256' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='96' y1='256' x2='48' y2='256' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='403.08' x2='369.14' y2='369.14' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='142.86' x2='108.92' y2='108.92' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><circle cx='256' cy='256' r='80' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/></svg>
+      <svg class="mood-moon" xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'><title>DARK</title><line x1='256' y1='48' x2='256' y2='96' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='256' y1='416' x2='256' y2='464' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='108.92' x2='369.14' y2='142.86' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='369.14' x2='108.92' y2='403.08' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='464' y1='256' x2='416' y2='256' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='96' y1='256' x2='48' y2='256' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='403.08' x2='369.14' y2='369.14' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='142.86' x2='108.92' y2='108.92' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><circle cx='256' cy='256' r='80' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/></svg>
+    </a>
     <div class="trigger">
       <div class="trigger-container">
         {% assign url = page.url %}
         {% for menu in site.data.menus %}
-        {% if url == menu.url %}
+          {% if url == menu.url %}
-        <a class="menu-link active" href="{{ menu.url }}">{{ menu.title }}</a>
+          <a class="menu-link active" href="{{ menu.url }}">{{ menu.title }}</a>
-        {% else %}
+          {% else %}
-        <a class="menu-link" href="{{ menu.url }}">{{ menu.title }}</a>
+            {% if menu.external %}
-        {% endif %}
+              <a class="menu-link" href="{{ menu.url }}" target="_blank" rel="noopener">{{ menu.title }}</a>
+            {% else %}
+              <a class="menu-link" href="{{ menu.url }}">{{ menu.title }}</a>
+            {% endif %}
+          {% endif %}
         {% endfor %}
+         <a class="menu-link rss" href="/feed.xml">
+          <svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 512 512' fill='#ED812E'><title>RSS</title><path d='M108.56,342.78a60.34,60.34,0,1,0,60.56,60.44A60.63,60.63,0,0,0,108.56,342.78Z'/><path d='M48,186.67v86.55c52,0,101.94,15.39,138.67,52.11s52,86.56,52,138.67h86.66C325.33,312.44,199.67,186.67,48,186.67Z'/><path d='M48,48v86.56c185.25,0,329.22,144.08,329.22,329.44H464C464,234.66,277.67,48,48,48Z'/></svg>
+         </a>
       </div>
   </nav>
 </header>

_includes/navigation.html

@@ -0,0 +1,16 @@
+<nav class="post-nav">
+  {% if page.previous %}
+  <a
+    class="post-nav-item post-nav-prev"
+    href="{{ page.previous | relative_url }}"
+  >
+    <div class="nav-arrow">Previous</div>
+    <span class="post-title">{{ page.previous.title }}</span>
+  </a>
+  {% endif %} {% if page.next %}
+  <a class="post-nav-item post-nav-next" href="{{ page.next | relative_url }}">
+    <div class="nav-arrow">Next</div>
+    <span class="post-title">{{ page.next.title }}</span>
+  </a>
+  {% endif %}
+</nav>

_includes/pagination.html

@@ -0,0 +1,21 @@
+<!-- NOTE: unused file, but u can use if necessary -->
+<!-- <div class="pagination">
+  {% if paginator.previous_page %}
+  <a
+    class="page-previous"
+    href="{{ paginator.previous_page_path }}"
+    class="previous"
+  >
+    <span aria-hidden="true">←</span> NEWER POSTS
+  </a>
+  {% endif %}
+  <span class="page_number"
+    >PAGE {{ paginator.page }} OF {{ paginator.total_pages }}</span
+  >
+  {% if paginator.next_page %}
+  <a class="page-next" href="{{ paginator.next_page_path }}" class="next"
+    >OLDER POSTS
+    <span aria-hidden="true">→</span>
+  </a>
+  {% endif %}
+</div> -->

_includes/post-nav.html

@@ -1,14 +0,0 @@
-<nav class="post-nav">
-  {% if page.previous %}
-  <a class="post-nav-item post-nav-prev" href="{{ page.previous | relative_url }}">
-    <h4>Previous</h4>
-    <span>{{ page.previous.title }}</span>
-  </a>
-  {% endif %}
-  {% if page.next %}
-  <a class="post-nav-item post-nav-next" href="{{ page.next | relative_url }}">
-    <h4>Next</h4>
-    <span>{{ page.next.title }}</span>
-  </a>
-  {% endif %}
-</nav>

_layouts/404.html

@@ -4,60 +4,19 @@ layout: compress
 
 <!DOCTYPE html>
 <html lang="{{ page.lang | default: site.lang | default: " en " }}">
-{% include head.html %}
-<style>
-body {
-  border: 0;
-}
   
-.wrapper {
+{% include header.html %}
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  height: 75vh;
-}
-
-.title {
-  font-size: 5em;
-  font-weight: bold;
-  font-family: 'Fira Code';
-  line-height: 1.1;
-  color: #ff5555;
-  text-shadow: 1px 0px 0px#b45151;
-}
-
-.phrase {
-  color: gray;
-}
-
-.solution {
-  border-radius: 4em 1em 2em 1em / 1em 5em 1em 3em;
-  color: #0036c7;
-  background: #ebebeb;
-  font-family: 'Roboto';
-  line-height: 1.188;
-  text-decoration: none;
-  padding: 5px 8px;
-  border: 0;
-  font-size: 15.625px;
-  letter-spacing: 0.5px;
-}
-
-.solution:hover {
-  border: 0;
-}
-</style>
 <body>
   <main aria-label="Content">
     {% include navbar.html %}
-    <div class="wrapper">
+    <div class="wrapper not-found">
       <div class="container">
         <div class="title">404</div>
-        <p class="phrase">Hmm... Seems you lost from my 🎒 journey.</p>
+        <p class="phrase">😕 Hmm... Seems you lost from my journey.</p>
-        <a class="solution" href="{{ site.url }}">home</a>
+        <a class="solution" href="{{ site.url }}">back home</a>
       </div>
     </div>
+    {% include footer.html %}
   </main>
 </body>
 

_layouts/default.html

@@ -1,21 +1,18 @@
 ---
 layout: compress
 ---
-
 <!DOCTYPE html>
 <html lang="{{ page.lang | default: site.lang | default: " en " }}">
+{% include header.html %}
 
-{% include head.html %}
+<body data-theme="{{ site.mode }}">
-
-<body>
   {% include navbar.html %}
   <div class="wrapper">
-    {% include jumbotron.html %}
+    {% include author.html %}
     <main aria-label="Content">
       {{ content }}
     </main>
     {% include footer.html %}
   </div>
 </body>
-
 </html>

_layouts/home.html

@@ -3,23 +3,12 @@ layout: default
 home: true
 ---
 
+<h4 class="posts-item-note">Recent Posts</h4>
 {% for post in site.posts %}
-  {% capture current_year %}
+<article class="post-item">
-    {{post.date | date: "%Y"}}
+  <span class="post-item-date">{{ post.date | date: "%b %d, %Y" }}</span>
-  {% endcapture %} 
+  <h4 class="post-item-title">
-  {% if current_year != previous_year %} 
+    <a href="{{ post.url }}">{{ post.title | escape }}</a>
-    {% assign previous_year = current_year %}
+  </h4>
-    <h4 class="post-header">
+</article>
-      <span role="img" aria-label="icon-book" aria-hidden="true">🎉</span>
-      {{ current_year }}
-    </h4>
-  {% endif %}
-  <article class="posts">
-    <span class="posts-date">{{ post.date | date: "%b %d" }}</span>
-    <header class="posts-header">
-      <h4 class="posts-title">
-        <a href="{{ post.url }}">{{ post.title | escape }}</a>
-      </h4>
-    </header>
-  </article>
 {% endfor %}

_layouts/page.html

@@ -5,16 +5,16 @@ layout: compress
 <!DOCTYPE html>
 <html lang="{{ page.lang | default: site.lang | default: " en " }}">
 
-{% include head.html %}
+{% include header.html %}
 
 <body>
   {% include navbar.html %}
   <div class="wrapper">
     <header class="header">
-      <h1 class="header-title" itemprop="headline">{{ page.title | escape }}.</h1>
+      <h1 class="header-title center" itemprop="headline">{{ page.title | escape }}.</h1>
     </header>
     <main class="page-content" aria-label="Content">
-      {{ content }}
+      {% include anchor_headings.html html=content anchorClass="anchor-head" beforeHeading=true h_min=4 h_max=4 %}
     </main>
     {% include footer.html %}
   </div>

_layouts/post.html

@@ -5,7 +5,7 @@ layout: compress
 <!DOCTYPE html>
 <html lang="{{ page.lang | default: site.lang | default: "en" }}">
 
-{% include head.html %}
+{% include header.html %}
 
 <body>
   {% include navbar.html %}
@@ -14,8 +14,18 @@ layout: compress
       <article itemscope itemtype="https://schema.org/BlogPosting">
 
         <header class="header">
+          {% if page.tags and page.tags != empty %}
+          <div class="tags">
+            {% assign tags = page.tags %}
+            <span itemprop="keywords">
+              {% for tag in tags %}
+              <a class="tag"
+                href="/tags/#{{tag | downcase | slugify}}">{{tag | upcase }}</a>{% unless forloop.last %},{% endunless %}
+              {% endfor %}
+            </span>
+          </div>
+          {% endif %}
           <h1 class="header-title" itemprop="headline">{{ page.title | escape }}</h1>
-          
           {% if page.date %}
           <div class="post-meta">
             <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
@@ -30,42 +40,29 @@ layout: compress
             <span hidden itemprop="publisher" itemtype="Person">{{ site.author.name }}</span>
             <span hidden itemprop="image">{{ page.image }}</span>
             <span hidden itemprop="mainEntityOfPage">{{ page.excerpt }}</span>
-  
-            {% if page.tags and page.tags != empty %}
-            <div class="tags">
-              {% assign tags = page.tags %}
-              <span itemprop="keywords">
-                {% for tag in tags %}
-                <a class="tag"
-                  href="/tags/#{{tag | downcase | slugify}}">{{tag | downcase }}</a>{% unless forloop.last %},{% endunless %}
-                {% endfor %}
-              </span>
-            </div>
-            {% endif %}
           </div>
           {% endif %}
         </header>
 
         <div class="page-content" itemprop="articleBody">
-          {{ content }}
+          {% include anchor_headings.html html=content anchorClass="anchor-head" beforeHeading=true h_min=1 h_max=4 %}
-          {% if page.modified %}
-            <small>Updated at <b>{{page.modified | date: "%d %B %Y"}}</b></small>
-          {% endif %}
           {% if page.tweet %}
           <p>Comments this article on 
             <a href="https://twitter.com/{{site.username}}/status/{{page.tweet}}">Twitter</a>.
           </p>
           {% endif %}
         </div>
-
       </article>
       {% if page.comments %}
         {% include comments.html%}
       {% endif %}
 
     </main>
+    {% if page.modified %}
+      <small class="post-updated-at">updated_at {{page.modified | date: "%d-%m-%Y"}}</small>
+    {% endif %}
     {% if page.next or page.previous %}
-      {% include post-nav.html %}
+      {% include navigation.html %}
     {% endif %}
   </div>
 

_posts/apa-itu-shell/2020-01-25-apa-itu-shell.md

@@ -0,0 +1,121 @@
+---
+title: What is a shell? 🐚 adalah kerang ajaib?
+date: 2020-01-25 11:58:47 +07:00
+modified: 2020-02-02 16:49:47 +07:00
+tags: [unix/linux, cli]
+description: Shell adalah sebuah command-line interpreter; program yang berperan sebagai penerjemah perintah yang diinputkan oleh User yang melalui terminal, sehingga perintah tersebut bisa dimengerti oleh si Kernel.
+image: "/apa-itu-shell/shell_evolution.png"
+---
+
+<a href="http://www.youtube.com/watch?v=tc4ROCJYbm0&t=70" target="_blank" rel="noopener">Dulu</a> Sebelum adanya <abbr title="Graphical User Interface">GUI</abbr> cara user berinteraksi dengan komputer menggunakan <abbr title="Command Line Interface">CLI</abbr> yaitu mengetik baris perintah pada sebuah antarmuka dalam bentuk baris teks seperti 👇.
+
+<figure>
+<img src="/apa-itu-shell/terminal_nginx.gif" alt="installing nginx in ubuntu">
+<figcaption>Fig 1. Terminal emulator, instalasi package dan check service.</figcaption>
+</figure>
+
+Jika kamu pernah menggunakan unix/linux mungkin pernah menggunakan program diatas, bahkan mungkin setiap hari menggunakannya untuk mengeksekusi suatu perintah melalui <a href="http://en.wikipedia.org/wiki/List_of_terminal_emulators" target="_blank" rel="noopener">terminal emulator</a>.
+
+User<sup id="user">[[1]](#user-ref)</sup> tidak bisa secara langsung berkomunikasi dengan sebuah hardware komputer, maka dari itu kita membutuhkan sebuah sistem operasi; **Kernel** adalah program yang merupakan inti utama dari sistem operasi komputer.
+
+<figure>
+<img src="/apa-itu-shell/kernel.png" alt="kernel central of operating system">
+<figcaption>Fig 2. bagan kernel.</figcaption>
+</figure>
+
+Kernel memfasilitasi interaksi antara komponen perangkat keras dan perangkat lunak, berperan untuk menangani permintaan input/ouput dari perangkat lunak, selanjutnya menerjemahkannya ke dalam pemrosesan data untuk diintruksikan ke CPU, sehingga Hardware(cpu, memory, devices) mengerti perintah yang dimaksud dari pengguna.
+
+Ketika kita menginputkan suatu perintah pada terminal emulator, kernel tidak langsung mengerti perintah yang kita ketik, kita membutuhkan suatu interface sebagai perantara menuju kernel yaitu **Shell**.
+
+<figure>
+<img src="/apa-itu-shell/shell.png" alt="shell">
+<figcaption>Fig 3. bagan komunikasi shell.</figcaption>
+</figure>
+
+<mark>Shell adalah sebuah command-line interpreter; program yang berperan sebagai penerjemah perintah yang diinputkan oleh User yang melalui terminal</mark>, sehingga perintah tersebut bisa dimengerti oleh si Kernel.
+
+Login shell biasanya ditetapkan oleh local System Administrator ketika pada saat pertama user kamu dibuat, kamu bisa lihat login shell yang sedang kamu gunakan dengan perintah dibawah ini.
+
+```bash
+$ echo $SHELL
+# atau
+$ echo $0
+```
+
+Setiap shell mempunyai default prompt. beberapa shell yang paling umum:
+
+```bash
+$ (dollar sign)   # sh, ksh, bash
+% (percent sign)  # csh, tcsh
+```
+
+##### Terminologi pada shell prompt
+
+Shell prompt adalah tempat dimana kita menuliskan suatu perintah, berikut adalah terminologinya ini membantu, jika kamu ingin mengetahui bagian-bagianya.
+
+<figure>
+<img src="/apa-itu-shell/term_shell_prompt.png" alt="shell">
+<figcaption>Fig 4. bagian-bagin dari shell prompt.</figcaption>
+</figure>
+
+Dibawah ini salah satu contoh perintah sederhana untuk menampilkan sebuah arsitektur CPU komputer yang sedang saya gunakan.
+
+<figure>
+<img src="/apa-itu-shell/terminal_lscpu.gif" alt="installing nginx in ubuntu">
+<figcaption>Fig 5. menampilkan informasi tentang arsitektur CPU.</figcaption>
+</figure>
+
+Dari perintah yang contohkan, ketika user mengetikan suatu inputan perintah di terminal dan menekan <kbd>ENTER</kbd>, maka shell akan mengubah perintah user menjadi bahasa yang bisa dipahami oleh kernel, dan Kernel menerjemahkannya ke dalam pemrosesan data untuk diintruksikan ke Hardware sehingga menghasilkan output yg sesuai dengan perintah user.
+
+Shell mempunyai beberapa macam dan turunan, berikut yang paling umum.
+
+<figure>
+<img src="/apa-itu-shell/shell_evolution.png" alt="shell evolution">
+<figcaption>Fig 6. evaluasi shell dari tahun ke tahun.</figcaption>
+</figure>
+
+Sedikit penjelasan dari gambar diatas.
+
+- Bourne shell `sh`
+  Dikembangkan oleh Stephen Bourne di Bell Labs, yang kala itu sebagai pengganti Thompson shell(diciptakan Ken Thompson), banyak sistem unix-like tetap memiliki `/bin/sh`—yang mana menjadi symbolic link atau hard link, bahkan ketika shell lain yang digunakan tetap `sh` adalah sebagai dasarnya, sebagai kompatibilitas perintah.
+- Korn shell `ksh` Unix shell yang dikembangkan oleh David Korn di Bell Labs,
+  inisialiasi pengembangan ini berdasar pada source code Bourne shell, namun juga memiliki fitur `csh` dan `sh`, pengembanganya pun pada saat saya menulis ini pun terus <a href="http://github.com/att/ast" target="_blank" rel="noopener">terawat</a>.
+- Bourne again shell `bash`
+  adalah proyek ini open source <a href="http://gnu.org/software/bash/" target="_blank" rel="noopener">GNU project</a> memilki kompatibel dengan `sh` yang menggabungkan fitur penting dari `ksh` dan `csh`, dan menjadi salah satu shell yang paling umum digunakan (umumnya menjadi default shell login Linux dan Apple's macOS Mojave).
+- Z shell `zsh` ini mempunyai wadah komunitasnya disebutnya <a href="http://ohmyz.sh/"  target="_blank" rel="noopener">"Oh My Zsh"</a>, plug-in dan theme `zsh` bisa kita temukan di komunitas ini, saya saat ini menggunakan `zsh`, shell ini juga menjadi default dari sistem operasi macOS Catalina, yang menggantikan bash.
+- friendly interactive shell `fish`
+  yah sesuai dengan <a href="http://fishshell.com/" target="_blank" rel="noopener">deskripsi</a> di web nya, menurut saya shell ini fun banget, fitur yang saya sukai dari shell ini autosuggestions, dan konfigurasi yang mudah melalui web based.
+
+Masih banyak yang belum dijelaskan pada tulisan ini jika masih tertarik, baca lebih <a href="http://en.wikipedia.org/wiki/List_of_command-line_interpreters#Operating_system_shells" target="_blank" rel="noopener">banyak</a> dan juga <a href="http://en.wikipedia.org/wiki/Comparison_of_command_shells" target="_blank" rel="noopener">komparasinya</a> masing-masing shell.
+
+Jika kamu tertarik untuk mengubah default shell login pada sistem operasi, kamu bisa menginstall dengan cara mengikuti didokumentasi/cara penginstallan dimasing-masing shell disini saya tidak membahas karena distro yang kita pakai mungkin berbeda-beda.
+
+Untuk menjadikan default shell login pada OS bisa menggunakan perintah ini.
+
+```bash
+# command
+$ sudo chsh [options] [LOGIN]
+
+# contoh penggunaan
+$ sudo chsh -s /user/bin/zsh harpi
+# mengubah default shell user harpi menjadi zsh shell.
+$ reboot
+
+# atau kamu juga bisa mengubah file /etc/passwd dan edit secara manual user shellnya.
+# jika masih bingung manfaatkan perintah man untuk melihat manual page.
+$ man chsh
+```
+
+Terakhir untuk tulisan ini, shell memilki berbagai macam, pilihlah shell yang sesuai dengan keinginanmu untuk menunjang produktivitas dan sesuaikan dengan kebutuhan, terlalu banyak plugin dan kebingungan memilih tema itu buruk 😁.
+
+Terimakasih sudah baca, _penulis menerima kritik dan saran._
+
+##### Notes
+
+<small id="user-ref"><sup>[[1]](#user)</sup> Manusia yang mengoperasikan dan mengendalikan sistem komputer.</small>
+
+##### Resources
+
+- [Evolution shells in Linux](http://developer.ibm.com/tutorials/l-linux-shells/)
+- [Kernel Defintion](http://www.linfo.org/kernel.html)
+- [The Shell](http://www.cis.rit.edu/class/simg211/unixintro/Shell.html)

_posts/cara-memperbarui-fork-repository/2020-01-29-cara-memperbarui-fork-repository.md

@@ -0,0 +1,71 @@
+---
+layout: post
+title: Cara ribet memperbarui forked repo
+date: 2020-01-29 01:00 +0700
+modified: 2020-03-07 16:49:47 +07:00
+description: Ada dua cara untuk memperbarui forked repository menggunakan web interface yang disediakan oleh github tapi ribet, atau melalui terminal yang lebih ribet lagi.
+tag:
+  - tips
+  - git
+  - software
+image: /cara-memperbarui-fork-repository/repo.png
+---
+
+Berawal dari saya pengen memperbarui repo yang tua dari suatu organisasi, niatnya pengen rumat ulang nih, ternyata dari orginal reponya ada update, sekalian buat artikel deh, lebih kurang gambaranya seperti ini.
+
+<figure>
+<img src="{{ page.image }}" alt="ilustrasi repo yang mau diupdate">
+<figcaption>Fig 1. Gambaran ribetnya.</figcaption>
+</figure>
+
+Ada dua cara untuk memperbarui forked repository menggunakan web interface yang disediakan oleh github tapi ribet, atau melalui terminal yang lebih ribet lagi.
+
+### Melalui Github (boring way) 💻
+
+1. Buka repo yang hasil fork di Github.
+1. Klik **Pull Requests** di sebelah kanan, lalu **New Pull Request**.
+1. Akan memunculkan hasil compare antara repo upstream dengan repo kamu(forked repo), dan jika menyatakan "There isn’t anything to compare.", tekan link **switching the base**, yang mana sekarang repo kamu(forked repo) akan dibalik menjadi base repo dan repo upstream menjadi head repo.
+1. Tekan **Create Pull Request**, beri judul pull request, Tekan **Send Pull Request**.
+1. Tekan **Merge Pull Request** dan **Confirm Merge**.
+
+\* _pastikan kamu tidak merubah apapun pada forked repo, supaya melakukan merge secara otomatis, kalo tidak ya paling2 konflik._
+
+### Melalui terminal ⌨️
+
+Tambahkan remote alamat repository yang aslinya disini tak beri nama `upstream`., ganti `ORIGINAL_OWNER` dan `ORIGINAL_REPO` dengan alamat repo aslimu.
+
+```bash
+$ git add remote upstream git@github.com:ORIGINAL_OWNER/ORIGINAL_REPO.git
+$ git remote -v
+> origin    git@github.com:piharpi/www.git (fetch) # forked repo
+> origin    git@github.com:piharpi/www.git (push) # forked repo
+> upstream    git@github.com:ORIGINAL_OWNER/ORIGINAL_REPO.git (fetch) # upstream repo / original repo
+> upstream    git@github.com:ORIGINAL_OWNER/ORIGINAL_REPO.git (push) # upstream repo / original repo
+```
+
+Checkout ke local branch `master`.
+
+```bash
+$ git checkout master
+> Switched to branch 'master'
+```
+
+Jika sudah, Merge local repo dengan remote `upstream/master`.
+
+```bash
+$ git merge upstream/master
+```
+
+Terakhir push local repo ke remote `origin`.
+
+```bash
+$ git add -A
+$ git commit -m "updating origin repo" && git push -u origin master
+```
+
+Selamat mencoba cara ribet ini, semoga bisa dipahami, saya sendiri lebih senang melalui terminal, klo ada yang ribet kenapa cari yang mudah.
+
+##### Resources
+
+- [Syncing a fork](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/syncing-a-fork)
+- [Update your fork directly on Github](https://rick.cogley.info/post/update-your-forked-repository-directly-on-github/#top)

_posts/how-this-site-was-made/2018-09-28-how-this-site-was-made.md

@@ -1,26 +1,27 @@
 ---
-title: Hello World, how this site was made.
+title: How this site was born 👶
 date: 2018-09-28 09:45:47 +07:00
 modified: 2019-08-29 09:24:47 +07:00
 tags: [blog, netlify, jekyll, github]
 description: All the services are free, a source code this site placed on github repository and intergration with netlify service, another service that you can use is github page for hosting your own static site.
-# image: "/assets/img/posts/blog/frontslash.png"
 ---
 
-The website was made using Jekyll the one of open source static sites generator, and using my own simple theme, I called [bangsring](https://github.com/piharpi/bangsring).
+The website was made using Jekyll the one of open source static sites generator, and using my own simple theme, I called [klisé](https://github.com/piharpi/klise).
 
 <hr>
 
-All the services are free, source code the site was placed on my [github](https://github.com/piharpi/piharpi.com) repository and intergration with [netlify](https://netlify.com) service, another service that you can use is [github page](https://pages.github.com/) for hosting your own static site.
+All the services are free, source code the site was placed on my [github](https://github.com/piharpi/mahendrata.now.sh) repository and intergration with ~~[netlify](https://netlify.com)~~ service, another service that you can use is [github page](https://pages.github.com/) for hosting your own static site.
 
 <hr>
 
-##### I'm not just tell my story, <br> but i will show you how to create your own site.
+#### Let's do this
 
 So, before we start create a site, you need some tools, you can self paced for how to installing each tools, on this guide i'm just want to show you how to install jekyll and deploying in netlify, but make sure you have each tools below.
 
 #### Prerequisites
 
+Requirements before we doing magic show.
+
 - [Ruby](https://www.ruby-lang.org/en/downloads/) programming language
 - [Git](https://git-scm.com) (version control)
 - [Netlify](https://netlify.com) and [Github](https://github.com) account
@@ -54,9 +55,9 @@ Now check your github repository, make sure the files is uploaded correctly.
 
 Go [netlify](https://netlify.com) dashboard, and following this step.
 
-1. click **new site from git**, then choose **Github**.
+1. click `new site from git`, then choose `Github`.
 2. then choose your repository where is the jekyll sources uploaded.
-3. netlify smart enough to configuring, we just need to click **Deploy site** button.
+3. netlify smart enough to configuring, we just need's are hosting's are hosting's are hosting's are hosting to click `Deploy site button`.
 
 Wait for moment, and voila..! your site's are hosting and using `.netlify.com` tld, if your website wants to look professional, just buy a domain from your favorite domain store. or if you the first time, I advice using namecheap.com*(isn't sponsor)* \*based on my experienced it provides good service and have various TLDs.
 

_posts/python-notes-from-Intro-to-machine-learning/2018-04-14-python-notes-from-Intro-to-machine-learning.md

@@ -0,0 +1,539 @@
+---
+title: Python Notes from Intro to Machine Learning
+date: 2018-04-14 10:00:00 +07:00
+tags: [python, machine-learning]
+description: Notes and code snippets of Python that I've been collecting so far throughout the "Intro to Machine Learning" course.
+---
+
+##### This article is for Demo purpose
+
+The article was originally on [this repo](https://github.com/risan/risanb.com/blob/master/content/posts/python-notes-from-intro-to-machine-learning/index.md)
+
+I rarely use Python. I only have one repository at Github that is written in Python: [iris-flower-classifier](https://github.com/risan/iris-flower-classifier). And it was written two years ago!
+
+A few days ago I took this free course from Udacity: [Intro to Machine Learning](https://eu.udacity.com/course/intro-to-machine-learning--ud120). The machine learning related codes are quite easy to grasp since it simply uses the [scikit-learn](http://scikit-learn.org/) modules. But most of the supporting Python modules that are provided by this course were like a black-box to me. I had no idea how to download a file in Python or what's the difference between a list, a tuple and a dictionary.
+
+That's why I decided to read all of the provided Python modules and implement it myself. I ended up refactor most of the code so it's easier to understand: [github.com/risan/intro-to-machine-learning](https://github.com/risan/intro-to-machine-learning).
+
+So here are some notes and snippets of Python that I've been collecting so far (I'm not even halfway through the course 😝). Also, note that the codes here are still using Python version 2.7.
+
+## Table of Contents
+
+## Modules Classes and Functions
+
+### Main Entry File
+
+Suppose our Python project is stored in `/foo/bar` directory. And this application has one file that serves as the single entry point. We can name this file `__main__.py` so we can run this project simply be referencing its directory path:
+
+```bash
+# Referencing its directory.
+$ python /foo/bar
+
+# It's equivalent to this.
+$ python /foo/bar/__main__.py
+```
+
+### Import Python Module Dynamically
+
+Suppose we would like to import a Python module dynamically based on a variable value. We can achieve this through the [`__import__`](https://docs.python.org/2/library/functions.html#__import__) function:
+
+```py
+module_name = "numpy"
+
+__import__(module_name)
+```
+
+### Multiple Returns in Python
+
+In Python, it's possible for a function or a method to return multiple values. We can do this simply by separating each return value by a comma:
+
+```py
+def test():
+    return 100, "foo"
+
+someNumber, someString = test()
+```
+
+### Importing Modules Outside of the Directory
+
+In order to import a module from outside of the directory, we need to add that module's directory path into the current file with `sys.path.append`. Suppose we have the following directory structure:
+
+```
+|--foo
+| |-- bar.py
+|
+|-- tools
+| |-- speak_yoda.py
+```
+
+If we want to use the `speak_yoda.py` module within the `bar.py`, we can do the following:
+
+```py
+# /foo/bar.py
+import os
+
+# Use relative path to tools directory.
+sys.path.append("../tools")
+
+import speak_yoda
+```
+
+However, this won't work if we run the `baz.py` file from outside of its `foo` directory:
+
+```bash
+# It works inside of the /foo directory.
+$ cd /foo
+$ python bar.py
+
+# But it won't work if the code runs from outside of /foo directory.
+$ python foo/bar.py
+```
+
+To solve this problem we can refer to the `tools` directory using its absolute path.
+
+```py
+# /foo/bar.py
+import os
+import sys
+
+# Get the directory name for this file.
+current_dirname = os.path.dirname(os.path.realpath(__file__))
+
+# Use the absolute path to the tools directory
+tools_path = os.path.abspath(os.path.join(dirname, "../tools"))
+sys.path.append(tools_path)
+
+import speak_yoda
+```
+
+## Output
+
+### Print The Emojis
+
+It turns out you can't just print an emoji or any other Unicode characters to the console. You need to specify the encoding type beforehand:
+
+```py
+# coding: utf8
+
+print("😅")
+```
+
+### Pretty Print
+
+We can use the `pprint` module to pretty-print Python data structure with a configurable indentation:
+
+```py
+import pprint
+pp = pprint.PrettyPrinter(indent=2)
+
+pp.pprint(people)
+```
+
+## Working with Pathname
+
+Read more about pathname manipulations in the [`os.path` documentation](https://docs.python.org/2/library/os.path.html).
+
+### Get Filename From URL
+
+Suppose the last segment of the URL contains a filename that we would like to download. We can extract this filename with the following code:
+
+```py
+import os
+from urlparse import urlparse
+
+url = "https://example.com/foo.txt"
+
+url_components = urlparse(url)
+
+filename = os.path.basename(url_components.path) # foo.txt
+```
+
+### Check if File Exists
+
+To check whether the given file path exists or not:
+
+```py
+import os
+
+is_exists = os.path.isfile("foo.txt")
+```
+
+### Create a Directory if It Does Not Exists
+
+To create a directory only if it does not exist:
+
+```py
+import os
+import errno
+
+try:
+    os.makedirs(directory_path)
+except OSError, e:
+    if e.errno != errno.EEXIST:
+        raise
+```
+
+## Working with Files
+
+### Downloading a File
+
+We can use the `urllib` module to download a file in Python. The first argument is the file URL that we would like to download. The second argument is the optional filename that will be used to store the file.
+
+```py
+import urllib
+
+urllib.urlretrieve("https://example.com/foo.txt", "foo.txt")
+```
+
+### Extracting Tar File
+
+There's a built-in `tarfile` module that we can use to work with Tar file in Python. To extract the `tar.gz` file we can use the following code:
+
+```py
+import tarfile
+
+# Open the file.
+tfile = tarfile.open("foo.tar.gz")
+
+# Extract the file to the given path.
+tfile.extractall(path)
+```
+
+We can pass the `mode` argument to the `open` method. By default, the `mode` would be `r`—reading mode with transparent compression. There are also other mode options that we can use:
+
+- `r:gz`: Reading mode with gzip compression.
+- `r:`: Reading mode without compression.
+- `a`: Appending mode without compression.
+- `w`: Writting mode without compression.
+- Checkout other available options in [tarfile documentation](https://docs.python.org/2/library/tarfile.html).
+
+## Working with List
+
+### Generate a List of Random Numbers
+
+Use the `for..in` syntax to generate a list of random numbers in a one-liner style.
+
+```py
+import random
+
+# Initialize internal state of random generator.
+random.seed(42)
+
+# Generate random points.
+randomNumbers = [random.random() for i in range(0, 10)]
+# [0.6394267984578837, 0.025010755222666936, 0.27502931836911926, ...]
+```
+
+### Pair Values from Two Lists
+
+The built-in `zip` function can pair values from two lists. However, this `zip` function will return a list of tuples instead. To get a list of value pairs, we can combine it with `for..in` syntax:
+
+```py
+coordinates = [[x, y] for x,y in zip([5,10,15], [0,1,0])]
+# [[5, 0], [10, 1], [15, 0]]
+```
+
+### Splitting a List
+
+We can easily split a list in Python by specifying the starting index and it's ending index. Note that the ending index is excluded from the result.
+
+We can also specify a negative index. And also note that both of these indices are optional!
+
+```py
+a = [0,1,2,3,4,5]
+
+a[0:3]  # 0,1,2
+a[1:3]  # 1,2
+a[2:]   # 2,3,4,5
+a[:3]   # 0,1,2
+a[0:-2] # 0,1,2,3
+a[-2:]  # 4,5
+a[:]    # 0,1,2,3,4,5
+```
+
+### Filtering a List In One Line
+
+We can easily filter a list in Python by combining the `for..in` and the `if` syntax together:
+
+```py
+numbers = range(1,11)
+
+# Filter even numbers only.
+[numbers[i] for i in range(0, len(numbers)) if numbers[i] % 2 == 0]
+# [2, 4, 6, 8, 10]
+```
+
+### Sorting a List in Ascending Order
+
+In Python, we can sort a list in ascending order simply by calling the `sort` method like so:
+
+```py
+people = ["John", "Alice", "Poe"]
+people.sort()
+print(people) # ["Alice", "John", "Poe"]
+```
+
+### Using Filter Function with a List
+
+Just like its name, we can use the `filter` function to filter out our list:
+
+```py
+numbers = range(1, 11)
+
+even_numbers = filter(lambda number: number % 2 == 0, numbers)
+# [2, 4, 6, 8, 10]
+```
+
+We can break the above statement into two parts:
+
+- `lambda number: statement`: The first part is the function that we would like to run to every item on the list. `number` is the variable name we'd like to use in this function to refer to a single item from the `numbers` list. The following function body must evaluate to truthy/falsy value—falsy means the current item will be removed from the final result.
+- `numbers`: The second parameter is the list that we'd like to filter.
+
+### Using Reduce with a List of Dictionary
+
+We can use the `reduce` function to calculate the total of a particular key in a list of a dictionary:
+
+```py
+items = [{value:10}, {value:20}, {value:50}]
+
+# Calculate the total of value key.
+totalValues = reduce(lambda total, item: total + item["value"], items, 0) # 80
+```
+
+It can be broken down into 4 parts:
+
+- `lambda total`: It's the variable name that we'd like to use in the function body to refer to the carried or the accumulative value that will finally be returned.
+- `item: statement`: `item` is the name of the variable we'd like to use within the function body to refer to the single item in the `items` list. The following function body will be executed in order to define the accumulative value of `total` for the next iteration.
+- `items`: It's the list of item that we would like to "reduce".
+- `0`: The last parameter is optional and it's the initial accumulative value for the first iteration.
+
+We can also use this `reduce` function to find a single item from the list. Here's an example of code to find the person with the biggest `total_payments` within the given list of `people` dictionary.
+
+```py
+people = [
+    {"name": "John", "total_payments": 100},
+    {"name": "Alice", "total_payments": 1000},
+    {"name": "Poe", "total_payments": 800}
+]
+
+person_biggest_total_payments = reduce(lambda paid_most, person: person if person["total_payments"] > paid_most["total_payments"] else paid_most, people, { "total_payments": 0 })
+# {'name': 'Alice', 'total_payments': 1000}
+```
+
+## Working with Dictionary
+
+### Loop Through Dictionary
+
+We can use the `itervalues` method to loop through a dictionary:
+
+```py
+for person in people.itervalues():
+    print(person["email_address"])
+```
+
+We can also use the `iteritems` method if we want to access the key too:
+
+```py
+for person in people.iteritems():
+    print(person[0] + ": " + person[1]["email_address"])
+```
+
+### Calculate Total of Particular Dictionary Key
+
+Suppose we would like to calculate the total amount of `salary` key on a `people` dictionary. We can extract the `salary` key and use the `sum` function to get the total:
+
+```py
+total_salary = sum([person["salary"] for person in people.itervalues()])
+```
+
+## Working with Numpy
+
+### Numpy Create Range of Values with The Given Interval
+
+Use the [`arange`](https://docs.scipy.org/doc/numpy/reference/generated/numpy.arange.html) method to create an array with an evenly spaced interval.
+
+```py
+import numpy as np
+
+np.arange(0, 5, 1)
+# array([0,1,2,3,4])
+
+np.arange(1, 4, 0.5)
+# array([1. , 1.5, 2. , 2.5, 3. , 3.5])
+```
+
+### Numpy Create Coordinate Matrices from Coordinate Vectors
+
+We can use the Numpy [`meshgrid`](https://docs.scipy.org/doc/numpy/reference/generated/numpy.meshgrid.html) method to make coordinate matrices from one-dimentional coordinate arrays.
+
+```py
+import numpy as np
+
+np.meshgrid([1, 2, 3], [0, 7])
+# [
+#   array([[1,2,3], [1,2,3]]),
+#   array([[0,0,0], [7,7,7]])
+# ]
+```
+
+### Flatten Numpy Array
+
+When we have a multi-dimensional Numpy array, we can easily flatten it with the [`ravel`](https://docs.scipy.org/doc/numpy/reference/generated/numpy.ravel.html) method:
+
+```py
+import numpy as np
+
+arr = np.array([[1,2], [3,4]])
+arr.ravel()
+# array([1, 2, 3, 4])
+```
+
+### Pairing Array Values with Second Axis
+
+We can use Numpy `c_` function to pair array values with another array that will be it's second axis. Read the [`numpy.c_` documentation](https://docs.scipy.org/doc/numpy/reference/generated/numpy.c_.html).
+
+```py
+import numpy as np
+
+x = [1,2]
+y = [10,20]
+
+np.c_[x, y]
+# array([1,10], [2,20])
+```
+
+### Generate Coordinates Across The Grid
+
+With the knowledge of Numpy [`arange`](https://docs.scipy.org/doc/numpy/reference/generated/numpy.arange.html), [`meshgrid`](https://docs.scipy.org/doc/numpy/reference/generated/numpy.meshgrid.html), [`ravel`](https://docs.scipy.org/doc/numpy/reference/generated/numpy.ravel.html) and [`c_`](https://docs.scipy.org/doc/numpy/reference/generated/numpy.c_.html) methods, we can easily generate an evenly spaced coordinates across the grid so we can pass it to the classifier and plot the decision surface.
+
+```py
+import numpy as np
+
+# Generate an evenly spaced coordinates.
+x_points, y_points = np.meshgrid(np.arange(x_min, x_max, step), np.arange(y_min, y_max, step))
+
+# Pair the x and y points.
+test_coordinates = np.c_[x_points.ravel(), y_points.ravel()]
+```
+
+## Plotting the Data
+
+### Plot The Surface Decision
+
+We can pass an evenly spaced coordinates across the grid to the classifier to predict the output on each of that coordinate. We can then use [`matplotlib.pyplot`](https://matplotlib.org/api/pyplot_api.html) to plot the surface decision.
+
+```py
+import matplotlib.pyplot as plt
+import pylab as pl
+
+# Pass coordinates across the grid.
+predicted_labels = classifier.predict(test_coordinates)
+
+# Don't forget to reshape the output array dimension.
+predicted_labels = predicted_labels.reshape(x_points.shape)
+
+# Set the axes limit.
+plt.xlim(x_points.min(), x_points.max())
+plt.ylim(y_points.min(), y_points.max())
+
+# Plot the decision boundary with seismic color map.
+plt.pcolormesh(x_points, y_points, predicted_labels, cmap = pl.cm.seismic)
+```
+
+The classifier output would be a one-dimensional array, so don't forget to [`reshape`](https://docs.scipy.org/doc/numpy/reference/generated/numpy.reshape.html) it back into a two-dimensional array before plotting. The `cmap` is an optional parameter for the color map. Here we use the `seismic` color map from `pylab` module. It has the red-blue colors.
+
+### Scatter Plot
+
+We need to separate the test points based on its predicted label (the speed). So we can plot the test points with two different colors.
+
+```py
+# Separate fast (label = 0) & slow (label = 1) test points.
+grade_fast = [features_test[i][0] for i in range(0, len(features_test)) if labels_test[i] == 0]
+bumpy_fast = [features_test[i][1] for i in range(0, len(features_test)) if labels_test[i] == 0]
+grade_slow = [features_test[i][0] for i in range(0, len(features_test)) if labels_test[i] == 1]
+bumpy_slow = [features_test[i][1] for i in range(0, len(features_test)) if labels_test[i] == 1]
+
+# Plot the test points based on its speed.
+plt.scatter(grade_fast, bumpy_fast, color = "b", label = "fast")
+plt.scatter(grade_slow, bumpy_slow, color = "r", label = "slow")
+
+# Show the plot legend.
+plt.legend()
+
+# Add the axis labels.
+plt.xlabel("grade")
+plt.ylabel("bumpiness")
+
+# Show the plot.
+plt.show()
+```
+
+If we want to save the plot into an image, we can use the `savefig` method instead:
+
+```py
+plt.savefig('scatter_plot.png')
+```
+
+## Dealing with Data
+
+### Deserializing Python Object
+
+We can use [`pickle`](https://docs.python.org/2/library/pickle.html) module for serializing and deserializing Python object. There's also the `cPickle`—the faster C implementation. We use both of these modules to deserialize the email text and author list.
+
+```py
+import pickle
+import cPickle
+
+# Unpickling or deserializing the texts.
+texts_file_handler = open(texts_file, "r")
+texts = cPickle.load(texts_file_handler)
+texts_file_handler.close()
+
+# Unpickling or deserializing the authors.
+authors_file_handler = open(authors_file, "r")
+authors = pickle.load(authors_file_handler)
+authors_file_handler.close()
+```
+
+### Split Data for Training and Testing
+
+We can use the built-in [`train_test_split`](http://scikit-learn.org/stable/modules/generated/sklearn.model_selection.train_test_split.html) function from scikit-learn to split the data both for training and testing.
+
+```py
+from sklearn.model_selection import train_test_split
+
+features_train, features_test, labels_train, labels_test = train_test_split(texts, authors, test_size = 0.1, random_state = 42)
+```
+
+The `test_size` argument is the proportion of data to split into the test, in our case we split 10% for testing.
+
+### Vectorized the Strings
+
+When working with a text document, we need to vectorize the strings into a list of numbers so it's easier and more efficient to process. We can use the [`TfidfVectorizer`](http://scikit-learn.org/stable/modules/generated/sklearn.feature_extraction.text.TfidfVectorizer.html) class to vectorize the strings into a matrix of TF-IDF features.
+
+```py
+from sklearn.feature_extraction.text import TfidfVectorizer
+
+vectorizer = TfidfVectorizer(sublinear_tf = True, max_df = 0.5, stop_words = "english")
+features_train_transformed = vectorizer.fit_transform(features_train)
+features_test_transformed = vectorizer.transform(features_test)
+```
+
+Word with a frequency higher than the `max_df` will be ignored. Stop words are also ignored—stop words are the most common words in a language (e.g. a, the, has).
+
+### Feature Selection
+
+Text can have a lot of features thus it may slow to compute. We can use scikit [`SelectPercentile`](http://scikit-learn.org/stable/modules/generated/sklearn.feature_selection.SelectPercentile.html) class to select only the important features.
+
+```py
+selector = SelectPercentile(f_classif, percentile = 10)
+selector.fit(features_train_transformed, labels_train)
+selected_features_train_transformed = selector.transform(features_train_transformed).toarray()
+selected_features_test_transformed = selector.transform(features_test_transformed).toarray()
+```
+
+The `percentile` is the percentage of features that we'd like to select based on its highest score.
+
+##### This article is for Demo purpose
+
+The article was originally on [this repo](https://github.com/risan/risanb.com/blob/master/content/posts/python-notes-from-intro-to-machine-learning/index.md)

_posts/react-component-with-dot-notation/2018-04-07-react-component-with-dot-notation.md

@@ -0,0 +1,112 @@
+---
+title: React Component with Dot Notation
+date: 2018-04-07 23:04:00 +07:00
+tags: [javascript, react]
+description: Learn how to define a React component that is accessible through the dot notation. A common component pattern to show a parent-child relation.
+---
+
+##### This article is for Demo purpose
+
+The article was originally on [this repo](https://github.com/risan/risanb.com/blob/master/content/posts/react-component-with-dot-notation/index.md)
+
+This is my answer to someone's question on [StackOverflow](https://stackoverflow.com/questions/49256472/react-how-to-extend-a-component-that-has-child-components-and-keep-them/49258038#answer-49258038). How can we define a React component that is accessible through the dot notation?
+
+Take a look at the following code. We have the `Menu` component and its three children `Menu.Item`:
+
+```jsx
+const App = () => (
+  <Menu>
+    <Menu.Item>Home</Menu.Item>
+    <Menu.Item>Blog</Menu.Item>
+    <Menu.Item>About</Menu.Item>
+  </Menu>
+);
+```
+
+How can we define a component like `Menu`? Where it has some kind of "sub-component" that is accessible through a dot notation.
+
+Well, it's actually a pretty common pattern. And it's not really a sub-component, it's just another component being attached to another one.
+
+Let's use the above `Menu` component for example. We'll put this component to its own dedicated file: `menu.js`. First, let's define these two components separately on this module file:
+
+```jsx
+// menu.js
+import React from 'react';
+
+export const MenuItem = ({ children }) => <li>{children}</li>;
+
+export default const Menu = ({ children }) => <ul>{children}</ul>;
+```
+
+It's just a simple functional component. The `Menu` is the parent with `ul` tag. And the `MenuItem` will act as its children. Now we can use these two components like so:
+
+```jsx
+import React from "react";
+import { render } from "react-dom";
+import Menu, { MenuItem } from "./menu";
+
+const App = () => (
+  <Menu>
+    <MenuItem>Home</MenuItem>
+    <MenuItem>Blog</MenuItem>
+    <MenuItem>About</MenuItem>
+  </Menu>
+);
+
+render(<App />, document.getElementById("root"));
+```
+
+Where's the dot notation? To make our `MenuItem` component accessible through the dot nation, we can simply attach it to the `Menu` component as a static property. To do so, we can no longer use the functional component for `Menu` and switch to the class component instead:
+
+```jsx
+// menu.js
+import React, { Component } from 'react';
+
+export default const MenuItem = ({ children }) => <li>{children}</li>;
+
+export default class Menu extends Component {
+  static Item = MenuItem;
+
+  render() {
+    return (
+      <ul>{this.props.children}</ul>
+    );
+  }
+}
+```
+
+Now we can use the dot notation to declare the `MenuItem` component:
+
+```jsx
+import React from "react";
+import { render } from "react-dom";
+import Menu from "./menu";
+
+const App = () => (
+  <Menu>
+    <Menu.Item>Home</Menu.Item>
+    <Menu.Item>Blog</Menu.Item>
+    <Menu.Item>About</Menu.Item>
+  </Menu>
+);
+
+render(<App />, document.getElementById("root"));
+```
+
+You can also put the `MenuItem` component definition directly within the `Menu` class. But this way you can no longer import `MenuItem` individually.
+
+```jsx
+import React, { Component } from "react";
+
+export default class Menu extends Component {
+  static Item = ({ children }) => <li>{children}</li>;
+
+  render() {
+    return <ul>{this.props.children}</ul>;
+  }
+}
+```
+
+##### This article is for Demo purpose
+
+The article was originally on [this repo](https://github.com/risan/risanb.com/blob/master/content/posts/react-component-with-dot-notation/index.md)

_sass/bangsring/_base.scss

@@ -1,318 +0,0 @@
-/**
- * Reset some basic elements
- */
-html {
-  overflow-x: hidden;
-  width: 100%;
-}
-
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-hr,
-dl,
-dd,
-ol,
-ul,
-figure {
-  margin: 0;
-  padding: 0;
-  -webkit-font-smoothing: antialiased;
-}
-
-/**
- * Basic styling
- */
-body {
-  min-height: 100vh;
-  overflow-x: hidden;
-  position: relative;
-  background: $base;
-  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $second-font-family;
-  -webkit-text-size-adjust: 100%;
-  -webkit-font-feature-settings: "kern"1;
-  -moz-font-feature-settings: "kern"1;
-  -o-font-feature-settings: "kern"1;
-  font-feature-settings: "kern"1;
-  font-kerning: normal;
-  border-top: 5px solid $black;
-  box-sizing: border-box;
-
-  @include media-query($on-mobile) {
-    $base-font-size: 18px;
-    font: $base-font-weight #{$base-font-size}/#{$base-line-height} $second-font-family;
-  }
-}
-
-/**
- * Set `margin-bottom` to maintain vertical rhythm
- */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-ul,
-ol,
-dl,
-figure,
-%vertical-rhythm {
-  margin-top: $spacing-unit - 20;
-  margin-bottom: $spacing-unit - 20;
-}
-
-kbd {
-  -moz-border-radius: 3px;
-  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px $white inset;
-  -webkit-border-radius: 3px;
-  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px $white inset;
-  background-color: #f7f7f7;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px $white inset;
-  color: #333;
-  display: inline-block;
-  font-size: 14px;
-  line-height: 1.4;
-  font-family: $syntax-font-family;
-  margin: 0 .1em;
-  padding: .1em .6em;
-  text-shadow: 0 1px 0 $white;
-}
-
-/**
- * Images
- */
-img {
-  max-width: 100%;
-  vertical-align: middle;
-  -webkit-user-drag: none;
-  margin: 0 auto;
-  text-align: center;
-}
-
-/**
- * Figures
- */
-figure {
-  position: relative;
-}
-
-
-/**
- * Images
- */
-figure>img {
-  display: block;
-  position: relative;
-}
-
-/**
- * Caption Image
- */
-figcaption {
-  font-size: 13px;
-  text-align: center;
-}
-
-/**
- * Lists
- */
-ul,
-ol {
-  margin-left: $spacing-unit - 10;
-}
-
-li {
-  padding-bottom: 1px;
-  padding-top: 1px;
-
-  >ul,
-  >ol {
-    margin-bottom: 2px;
-    margin-top: 0;
-  }
-}
-
-/**
- * Headings
- */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: $base-font-weight;
-}
-
-h1>a,
-h2>a,
-h3>a,
-h4>a,
-h5>a,
-h6>a {
-  text-decoration: none;
-  border: none;
-
-  &:hover {
-    text-decoration: none;
-    border: none;
-  }
-}
-
-
-/**
- * Links
- */
-a {
-  color: $black;
-  border-bottom: 1px solid $smoke;
-  text-decoration: none;
-
-  &:hover {
-    color: $black;
-    border-bottom: 2px solid $blue;
-  }
-}
-
-/**
- * Del
- */
-del {
-  color: inherit;
-}
-
-/**
- * Em
- */
-em {
-  color: inherit;
-}
-
-/**
- * Blockquotes
- */
-blockquote {
-  color: $gray;
-  font-style: italic;
-  text-align: center;
-  opacity: .9;
-  border-top: 1px solid $light;
-  border-bottom: 1px solid $light;
-  padding: 10px;
-  margin-left: 10px;
-  margin-right: 10px;
-  font-size: 1em;
-
-  > :last-child {
-    margin-bottom: 0;
-    margin-top: 0;
-  }
-}
-
-/**
- * Wrapper
- */
-.wrapper {
-  max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
-  max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
-  position: relative;
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: $spacing-unit;
-  padding-left: $spacing-unit;
-  @extend %clearfix;
-
-  @include media-query($on-mobile) {
-    max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
-    max-width: calc(#{$content-width} - (#{$spacing-unit}));
-    padding-right: $spacing-unit - 10;
-    padding-left: $spacing-unit - 10;
-  }
-}
-
-/**
- * Small
- */
-small {
-  font-size: 16px;
-}
-
-/**
- * Superscript
- */
-sup {
-  padding: 0px 4px;
-  border-radius: 10%;
-  top: -3px;
-  left: 2px;
-  font-size: small;
-  position: relative;
-}
-
-/**
- * Table
- */
-table {
-  margin: 0 auto;
-  border-collapse: collapse;
-  background: $white;
-  font-family: $first-font-family;
-  font-size: $small-font-size;
-
-  th {
-    font-weight: 700;
-    background: #f5f5f5;
-    text-align: left;
-    border-bottom: 2px solid #f5f5f5;
-  }
-
-  th,
-  td,
-  tr {
-    border: 1px solid $light;
-    padding: 4px 8px;
-  }
-}
-
-/**
- * Clearfix
- */
-%clearfix:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-/**
- * When mouse block a text set this color
- */
-::selection {
-  // background: transparent;
-}
-
-/**
- * Github Gist clear border 
- */
-.gist {
-  table {
-    border: 0;
-
-    tr,
-    td {
-      border: 0;
-    }
-  }
-}

_sass/bangsring/_fonts.scss

@@ -1,458 +0,0 @@
-@charset "utf-8";
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7qsDJT9g.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-
-/* cyrillic */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7jsDJT9g.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* greek-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7rsDJT9g.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-
-/* greek */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7ksDJT9g.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-
-/* vietnamese */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7osDJT9g.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7psDJT9g.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7nsDI.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdh18Smxg.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-
-/* cyrillic */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdo18Smxg.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* greek-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdg18Smxg.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-
-/* greek */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdv18Smxg.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-
-/* vietnamese */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdj18Smxg.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdi18Smxg.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSds18Q.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-
-/* cyrillic */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* greek-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-
-/* greek */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-
-/* vietnamese */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmhduz8A.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-
-/* cyrillic */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwkxduz8A.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* greek-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmxduz8A.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-
-/* greek */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBduz8A.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-
-/* vietnamese */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBduz8A.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRduz8A.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.207/distr/fira_code.css);

_sass/bangsring/_layout.scss

@@ -1,307 +0,0 @@
-/**
- * Site intro
- */
-
-.introduction {
-  margin-top: 5em;
-  margin-bottom: 4em;
-  text-align: center;
-
-  @include media-query($on-mobile) {
-    margin-bottom: 3em;
-  }
-
-  .introduction-image {
-    width: 103px;
-    height: 103px;
-    user-select: none;
-    border-radius: 100%;
-    -ms-user-select: none;
-    background: #d8deff;
-    -webkit-user-select: none;
-    border: 6px solid #eef1ff;
-    animation: 0.5s ease-in forwards weeng;
-    box-shadow: 0px 0px 2px 9px #f6f6fa;
-
-    &::after {
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      content: "";
-      position: absolute;
-      background: transparent;
-    }
-  }
-
-  .introduction-name {
-    margin-top: 8px;
-    font-size: 1.5em;
-    font-weight: 600;
-    font-family: $first-font-family;
-  }
-
-  .introduction-description {
-    padding: 10px;
-    margin: 0 auto;
-    font-size: 16px;
-    color: $gray;
-    opacity: 0.9;
-    max-width: 393px;
-    font-family: $first-font-family;
-  }
-}
-
-/**
- * Site navbar
- */
-
-.navbar {
-  height: auto;
-  max-width: -webkit-calc(890px - (#{$spacing-unit} * 2));
-  max-width: calc(890px - (#{$spacing-unit} * 2));
-  position: relative;
-  margin-right: auto;
-  margin-left: auto;
-  border-bottom: 1px solid $light;
-  padding: $spacing-unit - 15px $spacing-unit;
-  @extend %clearfix;
-}
-
-/**
- * Site nav
- */
-
-.menu {
-  .trigger {
-    float: right;
-  }
-
-  .menu-trigger {
-    display: none;
-  }
-
-  .menu-icon {
-    display: none;
-  }
-
-  .menu-link {
-    color: $black;
-    font-family: $first-font-family;
-    line-height: $base-line-height - 0.5;
-    text-decoration: none;
-    border-radius: 2px;
-    padding: 5px 8px;
-    border: 0;
-    font-size: $small-font-size - 1;
-    opacity: 0.7;
-    letter-spacing: 0.5px;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    &:not(:last-child) {
-      margin-right: 5px;
-    }
-
-    @include media-query($on-mobile) {
-      opacity: .8;
-    }
-  }
-
-  .menu-link.active {
-    opacity: 1;
-    border-radius: 4em 1em 2em 1em / 1em 5em 1em 3em;
-    color: $blue;
-    background-color: $light;
-  }
-
-  @include media-query($on-mobile) {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-    text-align: center;
-    height: 50px;
-    background: $white;
-    border-bottom: 1px solid $light;
-
-    label[for="nav-trigger"] {
-      display: block;
-      float: right;
-      width: 36px;
-      height: 36px;
-      z-index: 2;
-      cursor: pointer;
-    }
-
-    .menu-icon {
-      display: block;
-      position: absolute;
-      right: 0;
-      width: 50px;
-      height: 20px;
-      line-height: 0;
-      padding-top: 15px;
-      text-align: center;
-      z-index: 10;
-
-      >svg path {
-        fill: $black;
-      }
-    }
-
-    input[type="checkbox"]:not(:checked)~.trigger {
-      clear: both;
-      visibility: hidden;
-    }
-
-    input[type="checkbox"]:checked~.trigger {
-      position: fixed;
-      animation: 0.2s ease-in forwards weeng;
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      background: rgba(255, 255, 255, 0.97);
-      height: 100vh;
-      width: 100%;
-      top: 0;
-    }
-
-    .menu-link {
-      display: block;
-      box-sizing: border-box;
-      font-size: 1em;
-
-      &:not(:last-child) {
-        margin-right: 0;
-        margin-bottom: 5px;
-      }
-    }
-  }
-}
-
-.post-header {
-  font-size: 1.2em;
-  font-family: $first-font-family;
-  text-transform: capitalize;
-  font-weight: 700;
-}
-
-.posts {
-  padding-top: 5px;
-  padding-bottom: 6px;
-  display: flex;
-  @extend %clearfix;
-
-  &:not(:first-child) {
-    border-top: 1px solid $light;
-  }
-
-  .posts-header {
-    display: inline;
-    line-height: 15px;
-  }
-
-  .posts-date {
-    font-family: $first-font-family;
-    font-size: 17px;
-    min-width: 55px;
-    color: $gray;
-    padding-right: 10px;
-
-    @include media-query($on-mobile) {
-      font-size: 16px;
-    }
-  }
-
-  .posts-title {
-    margin-top: 2px;
-    margin-bottom: 0;
-    font-family: $second-font-family;
-    font-weight: normal;
-    font-size: 1em;
-    display: inherit;
-
-    a {
-      color: $blue;
-      text-decoration: none;
-      line-height: 22px;
-
-      &:hover,
-      &focus {
-        color: $black;
-      }
-    }
-  }
-}
-
-/**
- * Animation 
- */
-
-@keyframes weeng {
-  0% {
-    opacity: 0.2;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-/**
- * Responsive Embed : vidio
- */
-
-.embed-responsive {
-  height: 0;
-  max-width: 100%;
-  overflow: hidden;
-  position: relative;
-  padding-bottom: 56.25%;
-  margin-top: 20px;
-
-  iframe,
-  object,
-  embed {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-  }
-}
-
-/**
- * Site footer
- */
-.footer {
-  color: $gray;
-  margin-top: 8em;
-  margin-bottom: 2em;
-  text-align: center;
-  font-size: $small-font-size;
-  font-family: $first-font-family;
-
-  @include media-query($on-mobile) {
-    margin-top: 3em;
-  }
-
-  b:not(:last-child) {
-    color: $black;
-  }
-
-  a {
-    border: 0;
-    color: $gray;
-
-    &:hover,
-    &:focus {
-      border-bottom: 2px solid $blue;
-    }
-  }
-}

_sass/klise/_base.scss

@@ -0,0 +1,339 @@
+// Reset some basic elements
+html {
+  overflow-x: hidden;
+  width: 100%;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+hr,
+dl,
+dd,
+ol,
+ul,
+figure {
+  margin: 0;
+  padding: 0;
+}
+
+// Basic styling
+body {
+  min-height: 100vh;
+  overflow-x: hidden;
+  position: relative;
+  color: $text-base-color;
+  background-color: $white;
+  font: $normal-weight #{$base-font-size}/#{$base-line-height} $sans-family;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -webkit-font-feature-settings: "kern" 1;
+  -moz-font-feature-settings: "kern" 1;
+  -o-font-feature-settings: "kern" 1;
+  font-feature-settings: "kern" 1;
+  font-kerning: normal;
+  box-sizing: border-box;
+}
+
+// Set `margin-bottom` to maintain vertical rhythm
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+ul,
+ol,
+dl,
+figure,
+%vertical-rhythm {
+  margin-top: $spacing-full - 20;
+  margin-bottom: $spacing-full - 20;
+}
+
+// strong | bold
+strong,
+b {
+  font-weight: $bold-weight;
+  color: $black;
+}
+
+// horizontal rule
+hr {
+  border-bottom: 0;
+  border-style: solid;
+  border-color: $light;
+}
+
+// kbd tag
+kbd {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border: 1px solid $light;
+  border-radius: 2px;
+  color: $black;
+  display: inline-block;
+  font-size: $small-font-size;
+  line-height: 1.4;
+  font-family: $mono-family;
+  margin: 0 0.1em;
+  font-weight: $bold-weight;
+  padding: 0.01em 0.4em;
+  text-shadow: 0 1px 0 $white;
+}
+
+// Image
+img {
+  max-width: 100%;
+  vertical-align: middle;
+  -webkit-user-drag: none;
+  margin: 0 auto;
+  text-align: center;
+}
+
+// Figure
+figure {
+  position: relative;
+}
+
+// Image inside Figure tag
+figure > img {
+  display: block;
+  position: relative;
+}
+
+// Image caption
+figcaption {
+  font-size: 13px;
+  text-align: center;
+}
+
+// List
+ul {
+  list-style: none;
+  li {
+    display: list-item;
+    text-align: -webkit-match-parent;
+  }
+  li::before {
+    content: "\03BB";
+    display: inline-block;
+    width: 1em;
+    position: relative;
+    margin-left: -1em;
+    font-weight: $bold-weight;
+  }
+}
+
+ol {
+  list-style: none;
+  counter-reset: li;
+  li {
+    position: relative;
+    counter-increment: li;
+    &::before {
+      content: counter(li);
+      display: inline-block;
+      width: 1em;
+      margin-right: 0.5em;
+      margin-left: -1.6em;
+      text-align: right;
+      direction: rtl;
+      font-weight: $bold-weight;
+      font-size: $small-font-size;
+    }
+  }
+}
+
+ul,
+ol {
+  margin-top: 0;
+  margin-left: $spacing-full;
+}
+
+li {
+  padding-bottom: 1px;
+  padding-top: 1px;
+
+  &:before {
+    color: $black;
+  }
+
+  > ul,
+  > ol {
+    margin-bottom: 2px;
+    margin-top: 0;
+  }
+}
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $black;
+  font-weight: $bold-weight;
+  & + ul,
+  & + ol {
+    margin-top: 10px;
+  }
+}
+
+// Headings with link
+h1 > a,
+h2 > a,
+h3 > a,
+h4 > a,
+h5 > a,
+h6 > a {
+  text-decoration: none;
+  border: none;
+
+  &:hover {
+    text-decoration: none;
+    border: none;
+  }
+}
+
+// Link
+a {
+  color: inherit;
+  text-decoration-color: $smoke;
+
+  &:hover {
+    color: $text-link-blue;
+  }
+
+  &:focus {
+    outline: 3px solid rgba(0, 54, 199, 0.6);
+    outline-offset: 2px;
+  }
+}
+
+// Del
+del {
+  color: inherit;
+}
+
+// Em
+em {
+  color: inherit;
+}
+
+// Blockquotes
+blockquote {
+  color: $gray;
+  font-style: italic;
+  text-align: center;
+  opacity: 0.9;
+  border-top: 1px solid $light;
+  border-bottom: 1px solid $light;
+  padding: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
+  font-size: 1em;
+
+  > :last-child {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+}
+
+// Wrapper
+.wrapper {
+  max-width: -webkit-calc(#{$narrow-size} - (#{$spacing-full} * 2));
+  max-width: calc(#{$narrow-size} - (#{$spacing-full} * 2));
+  position: relative;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: $spacing-full;
+  padding-left: $spacing-full;
+  @extend %clearfix;
+
+  @include media-query($on-mobile) {
+    max-width: -webkit-calc(#{$narrow-size} - (#{$spacing-full}));
+    max-width: calc(#{$narrow-size} - (#{$spacing-full}));
+    padding-right: $spacing-full - 10;
+    padding-left: $spacing-full - 10;
+  }
+}
+
+// Underline
+u {
+  text-decoration-color: #d2c7c7;
+}
+
+// Small
+small {
+  font-size: $small-font-size;
+}
+
+// Superscript
+sup {
+  border-radius: 10%;
+  top: -3px;
+  left: 2px;
+  font-size: small;
+  position: relative;
+  margin-right: 2px;
+}
+
+// Table
+table {
+  margin: 0 auto;
+  border-collapse: collapse;
+  background: $white;
+  font-size: $small-font-size;
+
+  th {
+    font-weight: $bold-weight;
+    background: #f5f5f5;
+    text-align: left;
+    border-bottom: 2px solid #f5f5f5;
+  }
+
+  th,
+  td,
+  tr {
+    border: 1px solid $light;
+    padding: 4px 8px;
+  }
+}
+
+// Clearfix
+%clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+// When mouse block a text set this color
+mark,
+::selection {
+  background: #fffba0;
+  color: $black;
+}
+
+// Github Gist clear border
+.gist {
+  table {
+    border: 0;
+
+    tr,
+    td {
+      border: 0;
+    }
+  }
+}

_sass/klise/_dark.scss

@@ -0,0 +1,218 @@
+body[data-theme="dark"] {
+  color: $dark-text-base-color;
+  background-color: $dark-black;
+
+  // Heading
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $dark-white;
+  }
+
+  // Post
+  .page-content {
+    a {
+      color: $dark-text-link-blue;
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: $dark-text-link-blue-active;
+      }
+    }
+
+    h3 {
+      border-color: $dark-light;
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      .anchor-head {
+        color: $dark-text-link-blue;
+      }
+    }
+  }
+
+  // Syntax
+  code {
+    &.highlighter-rouge {
+      background-color: $dark-light;
+    }
+  }
+
+  // kbd tag
+  kbd {
+    border-color: $dark-light;
+    color: $dark-white;
+    text-shadow: 0 1px 0 $dark-black;
+  }
+
+  // horizontal rule
+  hr {
+    border-color: $dark-light;
+  }
+
+  // Post Meta
+  .post-meta {
+    color: $dark-gray;
+
+    time {
+      &::after {
+        background-color: $dark-light;
+      }
+    }
+
+    span[itemprop="author"] {
+      border-color: $dark-light;
+    }
+  }
+
+  // Link
+  a {
+    color: inherit;
+    text-decoration-color: $dark-smoke;
+
+    &:hover {
+      color: $dark-text-link-blue;
+    }
+
+    &:focus {
+      outline-color: rgba(255, 82, 119, 0.6);
+    }
+  }
+
+  // List
+  li {
+    &:before {
+      color: $dark-white;
+    }
+  }
+
+  // Strong, Bold
+  strong,
+  b {
+    color: $dark-white;
+  }
+
+  // Navbar
+  .navbar {
+    border-color: $dark-light;
+    .menu {
+      a#mood {
+        .mood-sunny {
+          display: block;
+        }
+        .mood-moon {
+          display: none;
+        }
+      }
+
+      .menu-link {
+        color: $dark-white;
+      }
+      @include media-query($on-mobile) {
+        background-color: $dark-black;
+        border-color: $dark-light;
+
+        .menu-icon {
+          > svg {
+            fill: $dark-white;
+          }
+        }
+
+        input[type="checkbox"]:checked ~ .trigger {
+          background: $dark-black;
+        }
+      }
+    }
+  }
+
+  // Post Item
+  .post-item {
+    &:not(:first-child) {
+      border-color: $dark-light;
+    }
+
+    .post-item-date {
+      color: $dark-white;
+    }
+    .post-item-title {
+      a {
+        color: $dark-text-base-color;
+
+        &:hover,
+        &focus {
+          color: $dark-white;
+        }
+      }
+    }
+  }
+
+  // Post Navigation
+  .post-nav {
+    border-color: $dark-light;
+
+    .post-nav-item {
+      font-weight: $bold-weight;
+
+      .post-title {
+        color: $dark-white;
+        opacity: 0.9;
+      }
+
+      &:hover,
+      &:focus {
+        .post-title {
+          color: $dark-text-link-blue-active;
+        }
+      }
+
+      .nav-arrow {
+        color: $dark-gray;
+      }
+    }
+
+    @include media-query($on-mobile) {
+      .post-nav-item:nth-child(even) {
+        border-color: $dark-light;
+      }
+    }
+  }
+
+  // Footer
+  .footer {
+    span.footer_item {
+      color: $dark-white;
+    }
+    a.footer_item:not(:last-child) {
+      color: $dark-white;
+    }
+    .footer_theme-copyright {
+      color: $dark-gray;
+      opacity: 0.4;
+    }
+  }
+
+  // 404 Page
+  .wrapper.not-found {
+    .title {
+      color: $dark-white;
+      text-shadow: 1px 0px 0px $dark-text-link-blue;
+    }
+    .phrase {
+      color: $dark-text-base-color;
+    }
+    .solution {
+      color: $dark-text-link-blue;
+    }
+    .solution:hover {
+      color: $dark-text-link-blue-active;
+    }
+  }
+}

_sass/klise/_fonts.scss

@@ -0,0 +1,712 @@
+@charset "utf-8";
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2)
+      format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2)
+      format("woff2");
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2)
+      format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2)
+      format("woff2");
+  unicode-range: U+0370-03FF;
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2)
+      format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2)
+      format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2)
+      format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Roboto Bold"), local("Roboto-Bold"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2)
+      format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Roboto Bold"), local("Roboto-Bold"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2)
+      format("woff2");
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Roboto Bold"), local("Roboto-Bold"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2)
+      format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Roboto Bold"), local("Roboto-Bold"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2)
+      format("woff2");
+  unicode-range: U+0370-03FF;
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Roboto Bold"), local("Roboto-Bold"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2)
+      format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Roboto Bold"), local("Roboto-Bold"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2)
+      format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Roboto Bold"), local("Roboto-Bold"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc4.woff2)
+      format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Roboto Light"), local("Roboto-Light"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2)
+      format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Roboto Light"), local("Roboto-Light"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2)
+      format("woff2");
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Roboto Light"), local("Roboto-Light"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2)
+      format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Roboto Light"), local("Roboto-Light"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2)
+      format("woff2");
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Roboto Light"), local("Roboto-Light"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2)
+      format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Roboto Light"), local("Roboto-Light"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2)
+      format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Roboto Light"), local("Roboto-Light"),
+    url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2)
+      format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"),
+    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7qsDJT9g.woff2)
+      format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"),
+    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7jsDJT9g.woff2)
+      format("woff2");
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"),
+    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7rsDJT9g.woff2)
+      format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"),
+    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7ksDJT9g.woff2)
+      format("woff2");
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"),
+    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7osDJT9g.woff2)
+      format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"),
+    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7psDJT9g.woff2)
+      format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"),
+    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7nsDI.woff2)
+      format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
+    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2)
+      format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
+    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2)
+      format("woff2");
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
+    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2)
+      format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
+    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2)
+      format("woff2");
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
+    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2)
+      format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
+    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2)
+      format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
+    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2)
+      format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+// UBUNTU MONO
+
+/* cyrillic-ext */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Ubuntu Mono Italic"), local("UbuntuMono-Italic"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOhCneDtsqEr0keqCMhbCc_OsvSkLBP.woff2)
+      format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Ubuntu Mono Italic"), local("UbuntuMono-Italic"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOhCneDtsqEr0keqCMhbCc_OsLSkLBP.woff2)
+      format("woff2");
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Ubuntu Mono Italic"), local("UbuntuMono-Italic"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOhCneDtsqEr0keqCMhbCc_OsrSkLBP.woff2)
+      format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Ubuntu Mono Italic"), local("UbuntuMono-Italic"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOhCneDtsqEr0keqCMhbCc_OsXSkLBP.woff2)
+      format("woff2");
+  unicode-range: U+0370-03FF;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Ubuntu Mono Italic"), local("UbuntuMono-Italic"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOhCneDtsqEr0keqCMhbCc_OsjSkLBP.woff2)
+      format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Ubuntu Mono Italic"), local("UbuntuMono-Italic"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOhCneDtsqEr0keqCMhbCc_OsbSkA.woff2)
+      format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local("Ubuntu Mono Bold Italic"), local("UbuntuMono-BoldItalic"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO8CneDtsqEr0keqCMhbCc_Mn33hYJufkO1.woff2)
+      format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local("Ubuntu Mono Bold Italic"), local("UbuntuMono-BoldItalic"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO8CneDtsqEr0keqCMhbCc_Mn33hYtufkO1.woff2)
+      format("woff2");
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local("Ubuntu Mono Bold Italic"), local("UbuntuMono-BoldItalic"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO8CneDtsqEr0keqCMhbCc_Mn33hYNufkO1.woff2)
+      format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local("Ubuntu Mono Bold Italic"), local("UbuntuMono-BoldItalic"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO8CneDtsqEr0keqCMhbCc_Mn33hYxufkO1.woff2)
+      format("woff2");
+  unicode-range: U+0370-03FF;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local("Ubuntu Mono Bold Italic"), local("UbuntuMono-BoldItalic"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO8CneDtsqEr0keqCMhbCc_Mn33hYFufkO1.woff2)
+      format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local("Ubuntu Mono Bold Italic"), local("UbuntuMono-BoldItalic"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO8CneDtsqEr0keqCMhbCc_Mn33hY9ufg.woff2)
+      format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Ubuntu Mono"), local("UbuntuMono-Regular"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOjCneDtsqEr0keqCMhbCc3CsTKlA.woff2)
+      format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Ubuntu Mono"), local("UbuntuMono-Regular"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOjCneDtsqEr0keqCMhbCc-CsTKlA.woff2)
+      format("woff2");
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Ubuntu Mono"), local("UbuntuMono-Regular"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOjCneDtsqEr0keqCMhbCc2CsTKlA.woff2)
+      format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Ubuntu Mono"), local("UbuntuMono-Regular"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOjCneDtsqEr0keqCMhbCc5CsTKlA.woff2)
+      format("woff2");
+  unicode-range: U+0370-03FF;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Ubuntu Mono"), local("UbuntuMono-Regular"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOjCneDtsqEr0keqCMhbCc0CsTKlA.woff2)
+      format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Ubuntu Mono"), local("UbuntuMono-Regular"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOjCneDtsqEr0keqCMhbCc6CsQ.woff2)
+      format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local("Ubuntu Mono Bold"), local("UbuntuMono-Bold"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO-CneDtsqEr0keqCMhbC-BL9H4tY12eg.woff2)
+      format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local("Ubuntu Mono Bold"), local("UbuntuMono-Bold"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO-CneDtsqEr0keqCMhbC-BL9HxtY12eg.woff2)
+      format("woff2");
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local("Ubuntu Mono Bold"), local("UbuntuMono-Bold"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO-CneDtsqEr0keqCMhbC-BL9H5tY12eg.woff2)
+      format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local("Ubuntu Mono Bold"), local("UbuntuMono-Bold"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO-CneDtsqEr0keqCMhbC-BL9H2tY12eg.woff2)
+      format("woff2");
+  unicode-range: U+0370-03FF;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local("Ubuntu Mono Bold"), local("UbuntuMono-Bold"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO-CneDtsqEr0keqCMhbC-BL9H7tY12eg.woff2)
+      format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Ubuntu Mono";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local("Ubuntu Mono Bold"), local("UbuntuMono-Bold"),
+    url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO-CneDtsqEr0keqCMhbC-BL9H1tY0.woff2)
+      format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}

_sass/klise/_layout.scss

@@ -0,0 +1,321 @@
+// Navbar
+.navbar {
+  height: auto;
+  max-width: calc(#{$wide-size} - (#{$spacing-full} * 2));
+  max-width: -webkit-calc(#{$wide-size} - (#{$spacing-full} * 2));
+  position: relative;
+  margin-right: auto;
+  margin-left: auto;
+  border-bottom: 1px solid $light;
+  padding: $spacing-full - 15px $spacing-full;
+  @extend %clearfix;
+}
+
+// Navigation
+.menu {
+  user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+
+  a#mood {
+    float: left;
+    left: 8px;
+    top: 6px;
+    position: relative;
+    clear: both;
+    -webkit-transform: scale(1, 1);
+    transform: scale(1, 1);
+    opacity: 0.7;
+    &:hover {
+      cursor: pointer;
+      opacity: 1;
+    }
+    &:active {
+      -webkit-transform: scale(0.9, 0.9);
+      transform: scale(0.9, 0.9);
+    }
+    .mood-moon {
+      display: block;
+      line {
+        stroke: $black;
+        fill: none;
+      }
+
+      circle {
+        fill: $black;
+        stroke: $black;
+      }
+    }
+    .mood-sunny {
+      display: none;
+      line {
+        stroke: $dark-white;
+        fill: none;
+      }
+      circle {
+        fill: none;
+        stroke: $dark-white;
+      }
+    }
+  }
+
+  .trigger {
+    float: right;
+  }
+
+  .menu-trigger {
+    display: none;
+  }
+
+  .menu-icon {
+    display: none;
+  }
+
+  .menu-link {
+    color: $black;
+    line-height: $base-line-height + 0.4;
+    text-decoration: none;
+    padding: 5px 8px;
+    opacity: 0.7;
+    letter-spacing: 0.3px;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:not(:last-child) {
+      margin-right: 5px;
+    }
+
+    &.rss {
+      position: relative;
+      bottom: -3px;
+      outline: none;
+    }
+
+    @include media-query($on-mobile) {
+      opacity: 0.8;
+    }
+  }
+
+  .menu-link.active {
+    opacity: 1;
+    font-weight: 600;
+  }
+
+  @include media-query($on-mobile) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    text-align: center;
+    height: 50px;
+    background-color: $white;
+    border-bottom: 1px solid $light;
+
+    a#mood {
+      left: 10px;
+      top: 12px;
+    }
+
+    .menu-icon {
+      display: block;
+      position: absolute;
+      right: 0;
+      width: 50px;
+      height: 23px;
+      line-height: 0;
+      padding-top: 13px;
+      padding-bottom: 15px;
+      cursor: pointer;
+      text-align: center;
+      z-index: 10;
+      > svg {
+        fill: $black;
+        opacity: 0.7;
+      }
+      &:hover {
+        > svg {
+          opacity: 1;
+        }
+      }
+      &:active {
+        -webkit-transform: scale(0.9, 0.9);
+        transform: scale(0.9, 0.9);
+      }
+    }
+
+    input[type="checkbox"]:not(:checked) ~ .trigger {
+      clear: both;
+      visibility: hidden;
+    }
+
+    input[type="checkbox"]:checked ~ .trigger {
+      position: fixed;
+      animation: 0.2s ease-in forwards fadein;
+      -webkit-animation: 0.2s ease-in forwards fadein;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      background-color: $white;
+      height: 100vh;
+      width: 100%;
+      top: 0;
+    }
+
+    .menu-link {
+      display: block;
+      box-sizing: border-box;
+      font-size: 1.1em;
+
+      &:not(:last-child) {
+        margin: 0;
+        padding: 2px 0;
+      }
+    }
+  }
+}
+
+// Author
+.author {
+  margin-top: 6.3rem;
+  margin-bottom: 7.2rem;
+  text-align: center;
+
+  @include media-query($on-mobile) {
+    margin-bottom: 3em;
+  }
+
+  .author-avatar {
+    width: 70px;
+    height: 70px;
+    border-radius: 100%;
+    user-select: none;
+    background-color: $black;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    -webkit-animation: 0.5s ease-in forwards fadein;
+    animation: 0.5s ease-in forwards fadein;
+    opacity: 1;
+  }
+
+  .author-name {
+    font-size: 1.7em;
+    margin-bottom: 2px;
+  }
+
+  .author-bio {
+    margin: 0 auto;
+    opacity: 0.9;
+    max-width: 393px;
+    line-height: 1.688;
+  }
+}
+
+// Content
+.posts-item-note {
+  font-weight: 700;
+  margin-bottom: 5px;
+  color: $black;
+}
+
+// List of posts
+.post-item {
+  display: flex;
+  padding-top: 5px;
+  padding-bottom: 6px;
+  @extend %clearfix;
+
+  &:not(:first-child) {
+    border-top: 1px solid $light;
+  }
+
+  .post-item-date {
+    min-width: 96px;
+    color: $black;
+    font-weight: 700;
+    padding-right: 10px;
+
+    @include media-query($on-mobile) {
+      font-size: 16px;
+    }
+  }
+
+  .post-item-title {
+    margin: 0;
+    color: $text-base-color;
+    font-weight: normal;
+    letter-spacing: 0.1px;
+
+    a {
+      &:hover,
+      &focus {
+        color: $black;
+      }
+    }
+  }
+}
+
+// Footer
+.footer {
+  margin-top: 8em;
+  margin-bottom: 2em;
+  text-align: center;
+
+  @include media-query($on-mobile) {
+    margin-top: 3em;
+  }
+  span.footer_item {
+    color: $black;
+    opacity: 0.8;
+    font-weight: $bold-weight;
+    font-size: $small-font-size;
+  }
+  a.footer_item {
+    color: $black;
+    opacity: 0.8;
+    text-decoration: none;
+
+    &:not(:last-child) {
+      margin-right: 10px;
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .footer_theme-copyright {
+    font-size: $small-font-size - 1;
+    margin-top: 3px;
+    display: block;
+    color: $gray;
+    opacity: 0.8;
+  }
+}
+
+.wrapper.not-found {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  height: 75vh;
+  .title {
+    font-size: 5em;
+    font-weight: $bold-weight;
+    line-height: 1.1;
+    color: $black;
+    text-shadow: 1px 0px 0px $text-link-blue;
+  }
+  .phrase {
+    color: $text-base-color;
+  }
+  .solution {
+    color: $text-link-blue;
+    letter-spacing: 0.5px;
+  }
+  .solution:hover {
+    color: $text-link-blue-active;
+  }
+}

_sass/klise/_miscellaneous.scss

@@ -0,0 +1,30 @@
+// Animation fade-in
+@keyframes fadein {
+  0% {
+    opacity: 0.2;
+  }
+
+  100% {
+    opacity: 0.99;
+  }
+}
+
+// Responsive embed video
+.embed-responsive {
+  height: 0;
+  max-width: 100%;
+  overflow: hidden;
+  position: relative;
+  padding-bottom: 56.25%;
+  margin-top: 20px;
+
+  iframe,
+  object,
+  embed {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+}

_sass/klise/_post.scss

@@ -1,55 +1,60 @@
+// Post wrapper
 .wrapper.post {
-  max-width: -webkit-calc(#{660px} - (#{$spacing-unit} * 2));
-  max-width: calc(#{660px} - (#{$spacing-unit} * 2));
-
   @include media-query($on-mobile) {
-    padding-left: $spacing-unit - 10;
+    padding-left: $spacing-half;
-    padding-right: $spacing-unit - 10;
+    padding-right: $spacing-half;
   }
 }
 
-/**
+// Post title
- * Post title
- */
 .header {
-  margin-top: 125px;
+  margin-top: 7.8em;
+  margin-bottom: 3em;
+
+  .tags {
+    margin-left: 3px;
+    letter-spacing: 0.5px;
+
+    .tag {
+      font-weight: $bold-weight;
+      font-size: $small-font-size - 2;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
 
   .header-title {
-    text-align: center;
     font-size: 2em;
-    font-family: $first-font-family;
     line-height: 1.2;
-    font-weight: 700;
+    margin-top: 10px;
-    color: $black;
     margin-bottom: 20px;
 
+    &.center {
+      text-align: center;
+    }
+
     @include media-query($on-mobile) {
       font-size: 1.9em;
     }
   }
 }
 
-/**
+// Post meta
- * Post meta 
- */
 .post-meta {
-  font-family: $first-font-family;
-  text-align: center;
-  font-size: $small-font-size;
-  margin-bottom: 5em;
   padding-top: 3px;
   line-height: 1.3;
+  color: $gray;
 
   time {
-    color: $gray;
     position: relative;
-    margin-right: 24px;
+    margin-right: 1.5em;
 
     &::after {
       background: $light;
       bottom: 1px;
       content: " ";
-      display: block;
       height: 2px;
       position: absolute;
       right: -20px;
@@ -58,35 +63,12 @@
   }
 
   span[itemprop="author"] {
-    color: $gray;
     border-bottom: 1px dotted $light;
   }
-
-  .tags {
-    max-width: 200px;
-    margin: 27px auto 0 auto;
-
-    .tag {
-      color: $gray;
-      line-height: 1;
-      font-weight: 800;
-      display: inline-block;
-      font-size: $small-font-size - 2;
-      border-bottom: 2px solid $light;
-
-      &:hover {
-        color: $black;
-      }
-    }
-  }
 }
 
-/**
+// Post content
- * Post content
- */
 .page-content {
-  font-size: 1em;
-  color: $gray;
   padding-top: 8px;
 
   iframe {
@@ -94,8 +76,6 @@
   }
 
   figure {
-    margin: auto -2em;
-
     img {
       border-radius: 2px;
     }
@@ -103,14 +83,35 @@
     figcaption {
       margin-top: 5px;
       font-style: italic;
-      font-size: 15px;
+      font-size: $small-font-size;
     }
   }
 
-  >p {
+  a {
+    color: $text-link-blue;
+    text-decoration: none;
+    &[target="_blank"]::after {
+      content: " \2197";
+      font-size: $small-font-size;
+      line-height: 0;
+      position: relative;
+      bottom: 5px;
+      vertical-align: baseline;
+    }
+
+    &:hover {
+      color: $text-link-blue-active;
+    }
+
+    &:focus {
+      color: $text-link-blue;
+    }
+  }
+
+  > p {
     margin: 0;
-    padding-top: $spacing-unit - 15;
+    padding-top: $spacing-full - 15;
-    padding-bottom: $spacing-unit - 15;
+    padding-bottom: $spacing-full - 15;
   }
 
   ul.task-list {
@@ -123,7 +124,7 @@
   }
 
   dl dt {
-    font-weight: 700;
+    font-weight: $bold-weight;
   }
 
   h1,
@@ -132,29 +133,49 @@
   h4,
   h5,
   h6 {
-    font-family: $first-font-family;
     color: $black;
-    font-weight: 700;
+    font-weight: $bold-weight;
-    margin-top: $spacing-unit;
+    margin-top: $spacing-full;
     margin-bottom: 0;
+
+    &:hover {
+      .anchor-head {
+        color: $text-link-blue;
+        opacity: 1;
+      }
+    }
+
+    .anchor-head {
+      position: relative;
+      opacity: 0;
+      outline: none;
+
+      &::before {
+        content: "#";
+        position: absolute;
+        right: -3px;
+        width: 1em;
+        font-weight: $bold-weight;
+      }
+    }
   }
 
   h1 {
-    @include relative-font-size(1.75);
+    @include relative-font-size(1.5);
   }
 
   h2 {
-    @include relative-font-size(1.563);
+    @include relative-font-size(1.375);
   }
 
   h3 {
-    @include relative-font-size(1.438);
+    @include relative-font-size(1.25);
     border-bottom: 1px solid $light;
     padding-bottom: 4px;
   }
 
   h4 {
-    @include relative-font-size(1.188);
+    @include relative-font-size(1.25);
   }
 
   h5 {
@@ -166,15 +187,7 @@
   }
 }
 
-hr {
-  border-bottom: 0;
-  border-style: solid;
-  border-color: $light;
-}
-
 .post-nav {
-  font-family: $first-font-family;
-  font-size: $small-font-size;
   display: flex;
   position: relative;
   margin-top: 5em;
@@ -183,20 +196,26 @@ hr {
 
   .post-nav-item {
     border-bottom: 0;
-    font-weight: 800;
+    font-weight: $bold-weight;
     padding-bottom: 10px;
 
+    .post-title {
+      color: $black;
+    }
+
     &:hover,
     &:focus {
-      h4 {
+      .post-title {
-        color: $blue;
+        color: $text-link-blue-active;
+        opacity: 0.9;
       }
     }
 
-    h4 {
+    .nav-arrow {
-      color: $gray;
+      font-weight: $normal-weight;
       font-size: $small-font-size;
-      margin: 0;
+      color: $gray;
+      margin-bottom: 3px;
     }
 
     width: 50%;
@@ -232,3 +251,7 @@ hr {
     }
   }
 }
+
+.post-updated-at {
+  font-family: "Ubuntu mono", "monospace";
+}

_sass/klise/_syntax.scss

@@ -1,44 +1,43 @@
-/**
+// Code
- * Code formatting
- */
-
 code {
+  font-family: $mono-family;
   text-rendering: optimizeLegibility;
-  font-feature-settings: "calt"1;
+  font-feature-settings: "calt" 1;
   font-variant-ligatures: normal;
   white-space: pre;
   word-spacing: normal;
   word-break: normal;
   word-wrap: normal;
-  font-size: 15px;
+  font-size: 16px;
-  padding: 1px 4px;
+  &.highlighter-rouge {
-  position: relative;
+    padding: 1px 4px;
-  top: -1px;
+    position: relative;
-  border: 1px solid #d8d8d8;
+    top: -1px;
-  background-color: #f6f6f6;
+    background-color: #f6f6f6;
-  border-radius: 2px;
+    border-radius: 2px;
-  font-family: $syntax-font-family;
+  }
 }
 
+// Codeblock Theme
 pre.highlight {
-  margin: 0 calc(51% - 50vw);
+  margin: 0 -27px;
-  padding: 25px;
+  @include media-query($on-mobile) {
-  line-height: 1;
+    margin: 0 calc(51% - 51vw);
-  font-family: $syntax-font-family;
+    padding-left: 20px;
+  }
+  border-radius: 2px;
+  padding: 10px;
   display: block;
   overflow-x: auto;
 
-  >code {
+  > code {
     width: 100%;
-    max-width: 37rem;
+    max-width: 50rem;
     margin-left: auto;
     margin-right: auto;
     line-height: 1.5;
     display: block;
     border: 0;
-    font-variant-ligatures: normal;
-    background-color: transparent;
-    font-feature-settings: "calt"1;
   }
 }
 
@@ -53,12 +52,12 @@ pre.highlight {
 .highlight,
 .highlight .w {
   color: #fbf1c7;
-  background-color: #282828;
+  background-color: #1a1b21;
 }
 
 .highlight .err {
   color: #fb4934;
-  background-color: #282828;
+  background-color: #1a1b21;
   font-weight: bold;
 }
 

_sass/main.scss

@@ -1,30 +1,48 @@
-// Define defaults for each variable.
+// Fonts preferences
-$first-font-family: "Roboto",
+$sans-family: Roboto, sans-serif;
-sans-serif !default;
+$mono-family: Consolas, monospace;
-$second-font-family: "Source Sans Pro",
+$base-font-size: 16px;
-sans-serif !default;
+$medium-font-size: $base-font-size * 0.938;
-$syntax-font-family: "Fira Code",
+$small-font-size: $base-font-size * 0.875;
-monospace !default;
+$base-line-height: 1.85;
-$base-font-size: 19px !default;
-$medium-font-size: $base-font-size * 0.938 !default;
-$small-font-size: $base-font-size * 0.875 !default;
-$base-font-weight: 400 !default;
-$base-line-height: 1.688 !default;
-$spacing-unit: 30px !default;
 
-// Light Element Color
+// Font weight
-$black: #141414 !default;
+// $light-weight: 300; // uncomment if necessary
-$white: #fff !default;
+$normal-weight: 400;
-$base: #f9f9f9 !default;
+$bold-weight: 700;
-$gray: #283c46 !default;
+// $black-weight: 900; // uncomment if necessary
-$blue: #0036c7 !default;
+
-$light: #ececec !default;
+//Light Colors
-$smoke: #d2c7c7 !default;
+$text-base-color: #434648;
+$text-link-blue: #003fff;
+$text-link-blue-active: #0036c7;
+
+$black: #0d122b;
+$light: #ececec;
+$smoke: #d2c7c7;
+$gray: #6b7886;
+$white: #fff;
+
+// Dark Colors
+$dark-text-base-color: #d9d7e0;
+$dark-text-link-blue: #ff5277;
+$dark-text-link-blue-active: #ff2957;
+
+$dark-black: #131418;
+$dark-white: #f0f8ff;
+$dark-light: #1b1d25;
+$dark-smoke: #4a4d56;
+$dark-gray: #767f87;
 
 // Width of the content area
-$content-width: 750px !default;
+$wide-size: 890px;
+$narrow-size: 720px;
 
-// State of device
+// Padding unit
+$spacing-full: 30px;
+$spacing-half: $spacing-full / 2;
+
+// State of devices
 $on-mobile: 768px;
 $on-tablet: 769px;
 $on-desktop: 1024px;
@@ -40,9 +58,6 @@ $on-widescreen: 1152px;
   font-size: $base-font-size * $ratio;
 }
 
-// Import Sass partials
+// Import sass files
-@import "bangsring/fonts",
+@import "klise/fonts", "klise/base", "klise/layout", "klise/post",
-"bangsring/base",
+  "klise/miscellaneous", "klise/syntax", "klise/dark";
-"bangsring/layout",
-"bangsring/page",
-"bangsring/syntax";

_site/assets/favicons/safari-pinned-tab.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="640.000000pt" height="640.000000pt" viewBox="0 0 640.000000 640.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,640.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2914 6389 c-433 -38 -901 -183 -1286 -399 -85 -48 -308 -191 -334
+-215 -7 -5 -26 -21 -44 -35 -245 -190 -456 -407 -634 -650 -31 -41 -59 -79
+-64 -85 -25 -30 -172 -285 -217 -376 -175 -355 -289 -759 -324 -1144 -14 -152
+-6 -560 14 -695 39 -271 108 -542 195 -762 49 -122 165 -366 188 -390 8 -10
+12 -18 9 -18 -7 0 97 -167 162 -260 137 -196 330 -411 485 -543 27 -23 56 -49
+65 -58 130 -127 455 -337 698 -450 60 -28 122 -56 138 -64 33 -16 72 -30 220
+-80 173 -58 280 -85 450 -115 33 -5 69 -12 80 -14 186 -36 671 -43 885 -12
+475 68 870 203 1245 429 98 59 271 175 297 199 7 7 31 26 53 42 22 17 42 33
+45 36 3 4 43 40 90 81 47 41 100 90 119 109 166 173 260 281 331 382 71 100
+130 187 130 192 0 3 12 24 28 48 43 68 48 77 106 188 106 206 205 467 261 688
+31 123 73 373 84 500 9 101 6 534 -4 612 -54 425 -143 732 -312 1080 -36 74
+-72 143 -81 153 -8 9 -12 17 -9 17 7 0 -96 167 -162 260 -167 238 -419 506
+-636 673 -5 4 -21 17 -35 28 -93 77 -340 233 -489 308 -223 113 -519 222 -724
+267 -74 16 -281 53 -332 59 -33 4 -73 9 -90 12 -56 8 -510 10 -601 2z"/>
+</g>
+</svg>

_site/assets/favicons/site.webmanifest

@@ -0,0 +1,14 @@
+{
+  "name": "Mahendrata",
+  "short_name": "Mahendrata",
+  "icons": [
+    {
+      "src": "/assets/favicons/android-chrome-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

_site/assets/js/disqus.js

@@ -0,0 +1 @@
+!function(t,e,n){"use strict";var o=function(t,e){var n,o;return function(){var i=this,r=arguments,d=+new Date;n&&d<n+t?(clearTimeout(o),o=setTimeout(function(){n=d,e.apply(i,r)},t)):(n=d,e.apply(i,r))}},i=!1,r=!1,d=!1,s=!1,a="unloaded",u=!1,l=function(){if(!u||!e.body.contains(u)||"loaded"==u.disqusLoaderStatus)return!0;var n,o,i=t.pageYOffset,l=(n=u,o=n.getBoundingClientRect(),{top:o.top+e.body.scrollTop,left:o.left+e.body.scrollLeft}).top;if(l-i>t.innerHeight*r||i-l-u.offsetHeight-t.innerHeight*r>0)return!0;var c,f,p,y=e.getElementById("disqus_thread");y&&y.removeAttribute("id"),u.setAttribute("id","disqus_thread"),u.disqusLoaderStatus="loaded","loaded"==a?DISQUS.reset({reload:!0,config:d}):(t.disqus_config=d,"unloaded"==a&&(a="loading",c=s,f=function(){a="loaded"},(p=e.createElement("script")).src=c,p.async=!0,p.setAttribute("data-timestamp",+new Date),p.addEventListener("load",function(){"function"==typeof f&&f()}),(e.head||e.body).appendChild(p)))};t.addEventListener("scroll",o(i,l)),t.addEventListener("resize",o(i,l)),t.disqusLoader=function(t,n){n=function(t,e){var n,o={};for(n in t)Object.prototype.hasOwnProperty.call(t,n)&&(o[n]=t[n]);for(n in e)Object.prototype.hasOwnProperty.call(e,n)&&(o[n]=e[n]);return o}({laziness:1,throttle:250,scriptUrl:!1,disqusConfig:!1},n),r=n.laziness+1,i=n.throttle,d=n.disqusConfig,s=!1===s?n.scriptUrl:s,(u="string"==typeof t?e.querySelector(t):"number"==typeof t.length?t[0]:t)&&(u.disqusLoaderStatus="unloaded"),l()}}(window,document);

_site/assets/js/galite.js

@@ -0,0 +1 @@
+(function(b,l,e,g,h,f){1!==parseInt(e.msDoNotTrack||b.doNotTrack||e.doNotTrack,10)&&b.addEventListener("load",function(){var r=(new Date).getTime();b.galite=b.galite||{};var m=new XMLHttpRequest,n="https://www.google-analytics.com/collect?cid="+(l.uid=l.uid||Math.random()+"."+Math.random())+"&v=1&tid="+galite.UA+"&dl="+f(h.location.href)+"&ul=en-us&de=UTF-8",a=function(b){var d="",c;for(c in b){if(void 0===b[c])return!1;d+=f(b[c])}return d},p={dt:[h.title],sd:[g.colorDepth,"-bit"],sr:[g.availHeight,"x",g.availWidth],vp:[innerWidth,"x",innerHeight],dr:[h.referrer]},k;for(k in p){var q=k+"="+a(p[k]);q&&(n+="&"+q)}a=function(b,d){var c="",a;for(a in d)c+="&"+a+"="+f(d[a]);return function(){var a=n+c+(galite.anonymizeIp?"&aip=1":"")+"&t="+f(b)+"&z="+(new Date).getTime();if(e.sendBeacon)e.sendBeacon(a);else try{m.open("GET",a,!1),m.send()}catch(t){(new Image).src=a}}};setTimeout(a("pageview",null),100);b.addEventListener("unload",a("timing",{utc:"JS Dependencies",utv:"unload",utt:(new Date).getTime()-r}))})})(window,localStorage,navigator,screen,document,encodeURIComponent)

_site/assets/js/main.js

@@ -0,0 +1,35 @@
+(() => {
+  // Theme switch
+  const root = document.body;
+  const themeSwitch = document.getElementById("mood");
+  const themeData = root.getAttribute("data-theme");
+
+  if (themeSwitch) {
+    initTheme(localStorage.getItem("theme"));
+    themeSwitch.addEventListener("click", () =>
+      toggleTheme(localStorage.getItem("theme"))
+    );
+
+    function toggleTheme(state) {
+      if (state === "dark") {
+        localStorage.setItem("theme", "light");
+        root.removeAttribute("data-theme");
+      } else if (state === "light") {
+        localStorage.setItem("theme", "dark");
+        document.body.setAttribute("data-theme", "dark");
+      } else {
+        initTheme(state);
+      }
+    }
+
+    function initTheme(state) {
+      if (state === "dark") {
+        document.body.setAttribute("data-theme", "dark");
+      } else if (state === "light") {
+        root.removeAttribute("data-theme");
+      } else {
+        localStorage.setItem("theme", themeData);
+      }
+    }
+  }
+})();

_site/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/assets/favicons/mstile-150x150.png"/>
+            <TileColor>#2c2c2c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

_site/feed.xml

@@ -0,0 +1,825 @@
+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en-US"><generator uri="https://jekyllrb.com/" version="3.8.6">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" hreflang="en-US" /><updated>2020-03-09T22:32:09+07:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Klise Theme</title><subtitle>He's writing in Bahasa about web technology and experience as a journal  for documentation things that he learned, meet him &lt;a href=&quot;https://github.com/piharpi&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;@github&lt;/a&gt;.</subtitle><author><name>Klisé Theme</name><email>your-email@email.com</email></author><entry><title type="html">Cara ribet memperbarui forked repo</title><link href="http://localhost:4000/cara-memperbarui-fork-repository/" rel="alternate" type="text/html" title="Cara ribet memperbarui forked repo" /><published>2020-01-29T01:00:00+07:00</published><updated>2020-01-29T01:00:00+07:00</updated><id>http://localhost:4000/cara-memperbarui-fork-repository</id><content type="html" xml:base="http://localhost:4000/cara-memperbarui-fork-repository/">&lt;p&gt;Berawal dari saya pengen memperbarui repo yang tua dari suatu organisasi, niatnya pengen rumat ulang nih, ternyata dari orginal reponya ada update, sekalian buat artikel deh, lebih kurang gambaranya seperti ini.&lt;/p&gt;
+
+&lt;figure&gt;
+&lt;img src=&quot;/cara-memperbarui-fork-repository/repo.png&quot; alt=&quot;ilustrasi repo yang mau diupdate&quot; /&gt;
+&lt;figcaption&gt;Fig 1. Gambaran ribetnya.&lt;/figcaption&gt;
+&lt;/figure&gt;
+
+&lt;p&gt;Ada dua cara untuk memperbarui forked repository menggunakan web interface yang disediakan oleh github tapi ribet, atau melalui terminal yang lebih ribet lagi.&lt;/p&gt;
+
+&lt;h3 id=&quot;melalui-github-boring-way-&quot;&gt;Melalui Github (boring way) 💻&lt;/h3&gt;
+
+&lt;ol&gt;
+  &lt;li&gt;Buka repo yang hasil fork di Github.&lt;/li&gt;
+  &lt;li&gt;Klik &lt;strong&gt;Pull Requests&lt;/strong&gt; di sebelah kanan, lalu &lt;strong&gt;New Pull Request&lt;/strong&gt;.&lt;/li&gt;
+  &lt;li&gt;Akan memunculkan hasil compare antara repo upstream dengan repo kamu(forked repo), dan jika menyatakan “There isn’t anything to compare.”, tekan link &lt;strong&gt;switching the base&lt;/strong&gt;, yang mana sekarang repo kamu(forked repo) akan dibalik menjadi base repo dan repo upstream menjadi head repo.&lt;/li&gt;
+  &lt;li&gt;Tekan &lt;strong&gt;Create Pull Request&lt;/strong&gt;, beri judul pull request, Tekan &lt;strong&gt;Send Pull Request&lt;/strong&gt;.&lt;/li&gt;
+  &lt;li&gt;Tekan &lt;strong&gt;Merge Pull Request&lt;/strong&gt; dan &lt;strong&gt;Confirm Merge&lt;/strong&gt;.&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;p&gt;* &lt;em&gt;pastikan kamu tidak merubah apapun pada forked repo, supaya melakukan merge secara otomatis, kalo tidak ya paling2 konflik.&lt;/em&gt;&lt;/p&gt;
+
+&lt;h3 id=&quot;melalui-terminal-️&quot;&gt;Melalui terminal ⌨️&lt;/h3&gt;
+
+&lt;p&gt;Tambahkan remote alamat repository yang aslinya disini tak beri nama &lt;code class=&quot;highlighter-rouge&quot;&gt;upstream&lt;/code&gt;., ganti &lt;code class=&quot;highlighter-rouge&quot;&gt;ORIGINAL_OWNER&lt;/code&gt; dan &lt;code class=&quot;highlighter-rouge&quot;&gt;ORIGINAL_REPO&lt;/code&gt; dengan alamat repo aslimu.&lt;/p&gt;
+
+&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git add remote upstream git@github.com:ORIGINAL_OWNER/ORIGINAL_REPO.git
+&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git remote &lt;span class=&quot;nt&quot;&gt;-v&lt;/span&gt;
+&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt; origin    git@github.com:piharpi/www.git &lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;fetch&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;c&quot;&gt;# forked repo&lt;/span&gt;
+&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt; origin    git@github.com:piharpi/www.git &lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;push&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;c&quot;&gt;# forked repo&lt;/span&gt;
+&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt; upstream    git@github.com:ORIGINAL_OWNER/ORIGINAL_REPO.git &lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;fetch&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;c&quot;&gt;# upstream repo / original repo&lt;/span&gt;
+&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt; upstream    git@github.com:ORIGINAL_OWNER/ORIGINAL_REPO.git &lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;push&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;c&quot;&gt;# upstream repo / original repo&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;Checkout ke local branch &lt;code class=&quot;highlighter-rouge&quot;&gt;master&lt;/code&gt;.&lt;/p&gt;
+
+&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git checkout master
+&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt; Switched to branch &lt;span class=&quot;s1&quot;&gt;'master'&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;Jika sudah, Merge local repo dengan remote &lt;code class=&quot;highlighter-rouge&quot;&gt;upstream/master&lt;/code&gt;.&lt;/p&gt;
+
+&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git merge upstream/master
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;Terakhir push local repo ke remote &lt;code class=&quot;highlighter-rouge&quot;&gt;origin&lt;/code&gt;.&lt;/p&gt;
+
+&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git add &lt;span class=&quot;nt&quot;&gt;-A&lt;/span&gt;
+&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git commit &lt;span class=&quot;nt&quot;&gt;-m&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;updating origin repo&quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; git push &lt;span class=&quot;nt&quot;&gt;-u&lt;/span&gt; origin master
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;Selamat mencoba cara ribet ini, semoga bisa dipahami, saya sendiri lebih senang melalui terminal, klo ada yang ribet kenapa cari yang mudah.&lt;/p&gt;
+
+&lt;h5 id=&quot;resources&quot;&gt;Resources&lt;/h5&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;&lt;a href=&quot;https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/syncing-a-fork&quot;&gt;Syncing a fork&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href=&quot;https://rick.cogley.info/post/update-your-forked-repository-directly-on-github/#top&quot;&gt;Update your fork directly on Github&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</content><author><name>Klisé Theme</name><email>your-email@email.com</email></author><category term="tips" /><category term="git" /><category term="software" /><summary type="html">Berawal dari saya pengen memperbarui repo yang tua dari suatu organisasi, niatnya pengen rumat ulang nih, ternyata dari orginal reponya ada update, sekalian buat artikel deh, lebih kurang gambaranya seperti ini.</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://localhost:4000/cara-memperbarui-fork-repository/repo.png" /></entry><entry><title type="html">What is a shell? 🐚 adalah kerang ajaib?</title><link href="http://localhost:4000/apa-itu-shell/" rel="alternate" type="text/html" title="What is a shell? 🐚 adalah kerang ajaib?" /><published>2020-01-25T11:58:47+07:00</published><updated>2020-01-25T11:58:47+07:00</updated><id>http://localhost:4000/apa-itu-shell</id><content type="html" xml:base="http://localhost:4000/apa-itu-shell/">&lt;p&gt;&lt;a href=&quot;http://www.youtube.com/watch?v=tc4ROCJYbm0&amp;amp;t=70&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;Dulu&lt;/a&gt; Sebelum adanya &lt;abbr title=&quot;Graphical User Interface&quot;&gt;GUI&lt;/abbr&gt; cara user berinteraksi dengan komputer menggunakan &lt;abbr title=&quot;Command Line Interface&quot;&gt;CLI&lt;/abbr&gt; yaitu mengetik baris perintah pada sebuah antarmuka dalam bentuk baris teks seperti 👇.&lt;/p&gt;
+
+&lt;figure&gt;
+&lt;img src=&quot;/apa-itu-shell/terminal_nginx.gif&quot; alt=&quot;installing nginx in ubuntu&quot; /&gt;
+&lt;figcaption&gt;Fig 1. Terminal emulator, instalasi package dan check service.&lt;/figcaption&gt;
+&lt;/figure&gt;
+
+&lt;p&gt;Jika kamu pernah menggunakan unix/linux mungkin pernah menggunakan program diatas, bahkan mungkin setiap hari menggunakannya untuk mengeksekusi suatu perintah melalui &lt;a href=&quot;http://en.wikipedia.org/wiki/List_of_terminal_emulators&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;terminal emulator&lt;/a&gt;.&lt;/p&gt;
+
+&lt;p&gt;User&lt;sup id=&quot;user&quot;&gt;&lt;a href=&quot;#user-ref&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt; tidak bisa secara langsung berkomunikasi dengan sebuah hardware komputer, maka dari itu kita membutuhkan sebuah sistem operasi; &lt;strong&gt;Kernel&lt;/strong&gt; adalah program yang merupakan inti utama dari sistem operasi komputer.&lt;/p&gt;
+
+&lt;figure&gt;
+&lt;img src=&quot;/apa-itu-shell/kernel.png&quot; alt=&quot;kernel central of operating system&quot; /&gt;
+&lt;figcaption&gt;Fig 2. bagan kernel.&lt;/figcaption&gt;
+&lt;/figure&gt;
+
+&lt;p&gt;Kernel memfasilitasi interaksi antara komponen perangkat keras dan perangkat lunak, berperan untuk menangani permintaan input/ouput dari perangkat lunak, selanjutnya menerjemahkannya ke dalam pemrosesan data untuk diintruksikan ke CPU, sehingga Hardware(cpu, memory, devices) mengerti perintah yang dimaksud dari pengguna.&lt;/p&gt;
+
+&lt;p&gt;Ketika kita menginputkan suatu perintah pada terminal emulator, kernel tidak langsung mengerti perintah yang kita ketik, kita membutuhkan suatu interface sebagai perantara menuju kernel yaitu &lt;strong&gt;Shell&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;figure&gt;
+&lt;img src=&quot;/apa-itu-shell/shell.png&quot; alt=&quot;shell&quot; /&gt;
+&lt;figcaption&gt;Fig 3. bagan komunikasi shell.&lt;/figcaption&gt;
+&lt;/figure&gt;
+
+&lt;p&gt;&lt;mark&gt;Shell adalah sebuah command-line interpreter; program yang berperan sebagai penerjemah perintah yang diinputkan oleh User yang melalui terminal&lt;/mark&gt;, sehingga perintah tersebut bisa dimengerti oleh si Kernel.&lt;/p&gt;
+
+&lt;p&gt;Login shell biasanya ditetapkan oleh local System Administrator ketika pada saat pertama user kamu dibuat, kamu bisa lihat login shell yang sedang kamu gunakan dengan perintah dibawah ini.&lt;/p&gt;
+
+&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;echo&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;$SHELL&lt;/span&gt;
+&lt;span class=&quot;c&quot;&gt;# atau&lt;/span&gt;
+&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;echo&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;$0&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;Setiap shell mempunyai default prompt. beberapa shell yang paling umum:&lt;/p&gt;
+
+&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;dollar sign&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;   &lt;span class=&quot;c&quot;&gt;# sh, ksh, bash&lt;/span&gt;
+% &lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;percent sign&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;  &lt;span class=&quot;c&quot;&gt;# csh, tcsh&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h5 id=&quot;terminologi-pada-shell-prompt&quot;&gt;Terminologi pada shell prompt&lt;/h5&gt;
+
+&lt;p&gt;Shell prompt adalah tempat dimana kita menuliskan suatu perintah, berikut adalah terminologinya ini membantu, jika kamu ingin mengetahui bagian-bagianya.&lt;/p&gt;
+
+&lt;figure&gt;
+&lt;img src=&quot;/apa-itu-shell/term_shell_prompt.png&quot; alt=&quot;shell&quot; /&gt;
+&lt;figcaption&gt;Fig 4. bagian-bagin dari shell prompt.&lt;/figcaption&gt;
+&lt;/figure&gt;
+
+&lt;p&gt;Dibawah ini salah satu contoh perintah sederhana untuk menampilkan sebuah arsitektur CPU komputer yang sedang saya gunakan.&lt;/p&gt;
+
+&lt;figure&gt;
+&lt;img src=&quot;/apa-itu-shell/terminal_lscpu.gif&quot; alt=&quot;installing nginx in ubuntu&quot; /&gt;
+&lt;figcaption&gt;Fig 5. menampilkan informasi tentang arsitektur CPU.&lt;/figcaption&gt;
+&lt;/figure&gt;
+
+&lt;p&gt;Dari perintah yang contohkan, ketika user mengetikan suatu inputan perintah di terminal dan menekan &lt;kbd&gt;ENTER&lt;/kbd&gt;, maka shell akan mengubah perintah user menjadi bahasa yang bisa dipahami oleh kernel, dan Kernel menerjemahkannya ke dalam pemrosesan data untuk diintruksikan ke Hardware sehingga menghasilkan output yg sesuai dengan perintah user.&lt;/p&gt;
+
+&lt;p&gt;Shell mempunyai beberapa macam dan turunan, berikut yang paling umum.&lt;/p&gt;
+
+&lt;figure&gt;
+&lt;img src=&quot;/apa-itu-shell/shell_evolution.png&quot; alt=&quot;shell evolution&quot; /&gt;
+&lt;figcaption&gt;Fig 6. evaluasi shell dari tahun ke tahun.&lt;/figcaption&gt;
+&lt;/figure&gt;
+
+&lt;p&gt;Sedikit penjelasan dari gambar diatas.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Bourne shell &lt;code class=&quot;highlighter-rouge&quot;&gt;sh&lt;/code&gt;
+Dikembangkan oleh Stephen Bourne di Bell Labs, yang kala itu sebagai pengganti Thompson shell(diciptakan Ken Thompson), banyak sistem unix-like tetap memiliki &lt;code class=&quot;highlighter-rouge&quot;&gt;/bin/sh&lt;/code&gt;—yang mana menjadi symbolic link atau hard link, bahkan ketika shell lain yang digunakan tetap &lt;code class=&quot;highlighter-rouge&quot;&gt;sh&lt;/code&gt; adalah sebagai dasarnya, sebagai kompatibilitas perintah.&lt;/li&gt;
+  &lt;li&gt;Korn shell &lt;code class=&quot;highlighter-rouge&quot;&gt;ksh&lt;/code&gt; Unix shell yang dikembangkan oleh David Korn di Bell Labs,
+inisialiasi pengembangan ini berdasar pada source code Bourne shell, namun juga memiliki fitur &lt;code class=&quot;highlighter-rouge&quot;&gt;csh&lt;/code&gt; dan &lt;code class=&quot;highlighter-rouge&quot;&gt;sh&lt;/code&gt;, pengembanganya pun pada saat saya menulis ini pun terus &lt;a href=&quot;http://github.com/att/ast&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;terawat&lt;/a&gt;.&lt;/li&gt;
+  &lt;li&gt;Bourne again shell &lt;code class=&quot;highlighter-rouge&quot;&gt;bash&lt;/code&gt;
+adalah proyek ini open source &lt;a href=&quot;http://gnu.org/software/bash/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;GNU project&lt;/a&gt; memilki kompatibel dengan &lt;code class=&quot;highlighter-rouge&quot;&gt;sh&lt;/code&gt; yang menggabungkan fitur penting dari &lt;code class=&quot;highlighter-rouge&quot;&gt;ksh&lt;/code&gt; dan &lt;code class=&quot;highlighter-rouge&quot;&gt;csh&lt;/code&gt;, dan menjadi salah satu shell yang paling umum digunakan (umumnya menjadi default shell login Linux dan Apple’s macOS Mojave).&lt;/li&gt;
+  &lt;li&gt;Z shell &lt;code class=&quot;highlighter-rouge&quot;&gt;zsh&lt;/code&gt; ini mempunyai wadah komunitasnya disebutnya &lt;a href=&quot;http://ohmyz.sh/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;“Oh My Zsh”&lt;/a&gt;, plug-in dan theme &lt;code class=&quot;highlighter-rouge&quot;&gt;zsh&lt;/code&gt; bisa kita temukan di komunitas ini, saya saat ini menggunakan &lt;code class=&quot;highlighter-rouge&quot;&gt;zsh&lt;/code&gt;, shell ini juga menjadi default dari sistem operasi macOS Catalina, yang menggantikan bash.&lt;/li&gt;
+  &lt;li&gt;friendly interactive shell &lt;code class=&quot;highlighter-rouge&quot;&gt;fish&lt;/code&gt;
+yah sesuai dengan &lt;a href=&quot;http://fishshell.com/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;deskripsi&lt;/a&gt; di web nya, menurut saya shell ini fun banget, fitur yang saya sukai dari shell ini autosuggestions, dan konfigurasi yang mudah melalui web based.&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;Masih banyak yang belum dijelaskan pada tulisan ini jika masih tertarik, baca lebih &lt;a href=&quot;http://en.wikipedia.org/wiki/List_of_command-line_interpreters#Operating_system_shells&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;banyak&lt;/a&gt; dan juga &lt;a href=&quot;http://en.wikipedia.org/wiki/Comparison_of_command_shells&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;komparasinya&lt;/a&gt; masing-masing shell.&lt;/p&gt;
+
+&lt;p&gt;Jika kamu tertarik untuk mengubah default shell login pada sistem operasi, kamu bisa menginstall dengan cara mengikuti didokumentasi/cara penginstallan dimasing-masing shell disini saya tidak membahas karena distro yang kita pakai mungkin berbeda-beda.&lt;/p&gt;
+
+&lt;p&gt;Untuk menjadikan default shell login pada OS bisa menggunakan perintah ini.&lt;/p&gt;
+
+&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# command&lt;/span&gt;
+&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;chsh &lt;span class=&quot;o&quot;&gt;[&lt;/span&gt;options] &lt;span class=&quot;o&quot;&gt;[&lt;/span&gt;LOGIN]
+
+&lt;span class=&quot;c&quot;&gt;# contoh penggunaan&lt;/span&gt;
+&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;chsh &lt;span class=&quot;nt&quot;&gt;-s&lt;/span&gt; /user/bin/zsh harpi
+&lt;span class=&quot;c&quot;&gt;# mengubah default shell user harpi menjadi zsh shell.&lt;/span&gt;
+&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;reboot
+
+&lt;span class=&quot;c&quot;&gt;# atau kamu juga bisa mengubah file /etc/passwd dan edit secara manual user shellnya.&lt;/span&gt;
+&lt;span class=&quot;c&quot;&gt;# jika masih bingung manfaatkan perintah man untuk melihat manual page.&lt;/span&gt;
+&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;man chsh
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;Terakhir untuk tulisan ini, shell memilki berbagai macam, pilihlah shell yang sesuai dengan keinginanmu untuk menunjang produktivitas dan sesuaikan dengan kebutuhan, terlalu banyak plugin dan kebingungan memilih tema itu buruk 😁.&lt;/p&gt;
+
+&lt;p&gt;Terimakasih sudah baca, &lt;em&gt;penulis menerima kritik dan saran.&lt;/em&gt;&lt;/p&gt;
+
+&lt;h5 id=&quot;notes&quot;&gt;Notes&lt;/h5&gt;
+
+&lt;p&gt;&lt;small id=&quot;user-ref&quot;&gt;&lt;sup&gt;&lt;a href=&quot;#user&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt; Manusia yang mengoperasikan dan mengendalikan sistem komputer.&lt;/small&gt;&lt;/p&gt;
+
+&lt;h5 id=&quot;resources&quot;&gt;Resources&lt;/h5&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;&lt;a href=&quot;http://developer.ibm.com/tutorials/l-linux-shells/&quot;&gt;Evolution shells in Linux&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href=&quot;http://www.linfo.org/kernel.html&quot;&gt;Kernel Defintion&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href=&quot;http://www.cis.rit.edu/class/simg211/unixintro/Shell.html&quot;&gt;The Shell&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</content><author><name>Klisé Theme</name><email>your-email@email.com</email></author><category term="unix/linux" /><category term="cli" /><summary type="html">Dulu Sebelum adanya GUI cara user berinteraksi dengan komputer menggunakan CLI yaitu mengetik baris perintah pada sebuah antarmuka dalam bentuk baris teks seperti 👇.</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://localhost:4000/apa-itu-shell/shell_evolution.png" /></entry><entry><title type="html">How this site was born 👶</title><link href="http://localhost:4000/how-this-site-was-made/" rel="alternate" type="text/html" title="How this site was born 👶" /><published>2018-09-28T09:45:47+07:00</published><updated>2018-09-28T09:45:47+07:00</updated><id>http://localhost:4000/how-this-site-was-made</id><content type="html" xml:base="http://localhost:4000/how-this-site-was-made/">&lt;p&gt;The website was made using Jekyll the one of open source static sites generator, and using my own simple theme, I called &lt;a href=&quot;https://github.com/piharpi/klise&quot;&gt;klisé&lt;/a&gt;.&lt;/p&gt;
+
+&lt;hr /&gt;
+
+&lt;p&gt;All the services are free, source code the site was placed on my &lt;a href=&quot;https://github.com/piharpi/mahendrata.now.sh&quot;&gt;github&lt;/a&gt; repository and intergration with &lt;del&gt;&lt;a href=&quot;https://netlify.com&quot;&gt;netlify&lt;/a&gt;&lt;/del&gt; service, another service that you can use is &lt;a href=&quot;https://pages.github.com/&quot;&gt;github page&lt;/a&gt; for hosting your own static site.&lt;/p&gt;
+
+&lt;hr /&gt;
+
+&lt;h4 id=&quot;lets-do-this&quot;&gt;Let’s do this&lt;/h4&gt;
+
+&lt;p&gt;So, before we start create a site, you need some tools, you can self paced for how to installing each tools, on this guide i’m just want to show you how to install jekyll and deploying in netlify, but make sure you have each tools below.&lt;/p&gt;
+
+&lt;h4 id=&quot;prerequisites&quot;&gt;Prerequisites&lt;/h4&gt;
+
+&lt;p&gt;Requirements before we doing magic show.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;&lt;a href=&quot;https://www.ruby-lang.org/en/downloads/&quot;&gt;Ruby&lt;/a&gt; programming language&lt;/li&gt;
+  &lt;li&gt;&lt;a href=&quot;https://git-scm.com&quot;&gt;Git&lt;/a&gt; (version control)&lt;/li&gt;
+  &lt;li&gt;&lt;a href=&quot;https://netlify.com&quot;&gt;Netlify&lt;/a&gt; and &lt;a href=&quot;https://github.com&quot;&gt;Github&lt;/a&gt; account&lt;/li&gt;
+  &lt;li&gt;&lt;a href=&quot;https://bundler.io&quot;&gt;Bundler&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;h4 id=&quot;installation&quot;&gt;Installation&lt;/h4&gt;
+
+&lt;p&gt;First, you need some &lt;a href=&quot;https://www.staticgen.com/&quot;&gt;SSG&lt;/a&gt;, there are many kind ssg, but in case i’m using Jekyll cause i’m already familiar with it, open your terminal and type command on below&lt;/p&gt;
+
+&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;bundle &lt;span class=&quot;nb&quot;&gt;install &lt;/span&gt;jekyll &lt;span class=&quot;c&quot;&gt;# installing jekyll in your machine&lt;/span&gt;
+&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;jekyll new my-site &lt;span class=&quot;o&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;cd &lt;/span&gt;my-site &lt;span class=&quot;c&quot;&gt;# create new jekyll project&lt;/span&gt;
+&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;jekyll s &lt;span class=&quot;c&quot;&gt;# run jekyll server&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;Now, jekyll is running on your local machine, open your browser and go to &lt;code class=&quot;highlighter-rouge&quot;&gt;localhost:4000&lt;/code&gt; is default address from jekyll, press &lt;kbd&gt;CTRL&lt;/kbd&gt; + &lt;kbd&gt;C&lt;/kbd&gt; to stop the jekyll server.&lt;/p&gt;
+
+&lt;h4 id=&quot;adding-remote-repository&quot;&gt;Adding remote repository&lt;/h4&gt;
+
+&lt;p&gt;Before we adding remote repository, you must have &lt;a href=&quot;https://github.com/new&quot;&gt;github&lt;/a&gt; repository, if already have repository, just add github remote address to your local folder, with the following commands&lt;/p&gt;
+
+&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git init &lt;span class=&quot;c&quot;&gt;# initializing project folder&lt;/span&gt;
+&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO.git &lt;span class=&quot;c&quot;&gt;# change UPPERCASE with your own!&lt;/span&gt;
+&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git add &lt;span class=&quot;nt&quot;&gt;-A&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; git commit &lt;span class=&quot;nt&quot;&gt;-m&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;Initialize&quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; git push &lt;span class=&quot;nt&quot;&gt;-u&lt;/span&gt; origin master &lt;span class=&quot;c&quot;&gt;# push code to github&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;Now check your github repository, make sure the files is uploaded correctly.&lt;/p&gt;
+
+&lt;h4 id=&quot;deploying-to-netlify&quot;&gt;Deploying to netlify&lt;/h4&gt;
+
+&lt;p&gt;Go &lt;a href=&quot;https://netlify.com&quot;&gt;netlify&lt;/a&gt; dashboard, and following this step.&lt;/p&gt;
+
+&lt;ol&gt;
+  &lt;li&gt;click &lt;code class=&quot;highlighter-rouge&quot;&gt;new site from git&lt;/code&gt;, then choose &lt;code class=&quot;highlighter-rouge&quot;&gt;Github&lt;/code&gt;.&lt;/li&gt;
+  &lt;li&gt;then choose your repository where is the jekyll sources uploaded.&lt;/li&gt;
+  &lt;li&gt;netlify smart enough to configuring, we just need’s are hosting’s are hosting’s are hosting’s are hosting to click &lt;code class=&quot;highlighter-rouge&quot;&gt;Deploy site button&lt;/code&gt;.&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;p&gt;Wait for moment, and voila..! your site’s are hosting and using &lt;code class=&quot;highlighter-rouge&quot;&gt;.netlify.com&lt;/code&gt; tld, if your website wants to look professional, just buy a domain from your favorite domain store. or if you the first time, I advice using namecheap.com&lt;em&gt;(isn’t sponsor)&lt;/em&gt; *based on my experienced it provides good service and have various TLDs.&lt;/p&gt;
+
+&lt;p&gt;So, what you waiting for, just create your own website for free.&lt;/p&gt;</content><author><name>Klisé Theme</name><email>your-email@email.com</email></author><category term="blog" /><category term="netlify" /><category term="jekyll" /><category term="github" /><summary type="html">The website was made using Jekyll the one of open source static sites generator, and using my own simple theme, I called klisé.</summary></entry><entry><title type="html">Python Notes from Intro to Machine Learning</title><link href="http://localhost:4000/python-notes-from-Intro-to-machine-learning/" rel="alternate" type="text/html" title="Python Notes from Intro to Machine Learning" /><published>2018-04-14T10:00:00+07:00</published><updated>2018-04-14T10:00:00+07:00</updated><id>http://localhost:4000/python-notes-from-Intro-to-machine-learning</id><content type="html" xml:base="http://localhost:4000/python-notes-from-Intro-to-machine-learning/">&lt;h5 id=&quot;this-article-is-for-demo-purpose&quot;&gt;This article is for Demo purpose&lt;/h5&gt;
+
+&lt;p&gt;The article was originally on &lt;a href=&quot;https://github.com/risan/risanb.com/blob/master/content/posts/python-notes-from-intro-to-machine-learning/index.md&quot;&gt;this repo&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;I rarely use Python. I only have one repository at Github that is written in Python: &lt;a href=&quot;https://github.com/risan/iris-flower-classifier&quot;&gt;iris-flower-classifier&lt;/a&gt;. And it was written two years ago!&lt;/p&gt;
+
+&lt;p&gt;A few days ago I took this free course from Udacity: &lt;a href=&quot;https://eu.udacity.com/course/intro-to-machine-learning--ud120&quot;&gt;Intro to Machine Learning&lt;/a&gt;. The machine learning related codes are quite easy to grasp since it simply uses the &lt;a href=&quot;http://scikit-learn.org/&quot;&gt;scikit-learn&lt;/a&gt; modules. But most of the supporting Python modules that are provided by this course were like a black-box to me. I had no idea how to download a file in Python or what’s the difference between a list, a tuple and a dictionary.&lt;/p&gt;
+
+&lt;p&gt;That’s why I decided to read all of the provided Python modules and implement it myself. I ended up refactor most of the code so it’s easier to understand: &lt;a href=&quot;https://github.com/risan/intro-to-machine-learning&quot;&gt;github.com/risan/intro-to-machine-learning&lt;/a&gt;.&lt;/p&gt;
+
+&lt;p&gt;So here are some notes and snippets of Python that I’ve been collecting so far (I’m not even halfway through the course 😝). Also, note that the codes here are still using Python version 2.7.&lt;/p&gt;
+
+&lt;h2 id=&quot;table-of-contents&quot;&gt;Table of Contents&lt;/h2&gt;
+
+&lt;h2 id=&quot;modules-classes-and-functions&quot;&gt;Modules Classes and Functions&lt;/h2&gt;
+
+&lt;h3 id=&quot;main-entry-file&quot;&gt;Main Entry File&lt;/h3&gt;
+
+&lt;p&gt;Suppose our Python project is stored in &lt;code class=&quot;highlighter-rouge&quot;&gt;/foo/bar&lt;/code&gt; directory. And this application has one file that serves as the single entry point. We can name this file &lt;code class=&quot;highlighter-rouge&quot;&gt;__main__.py&lt;/code&gt; so we can run this project simply be referencing its directory path:&lt;/p&gt;
+
+&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# Referencing its directory.&lt;/span&gt;
+&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;python /foo/bar
+
+&lt;span class=&quot;c&quot;&gt;# It's equivalent to this.&lt;/span&gt;
+&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;python /foo/bar/__main__.py
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;import-python-module-dynamically&quot;&gt;Import Python Module Dynamically&lt;/h3&gt;
+
+&lt;p&gt;Suppose we would like to import a Python module dynamically based on a variable value. We can achieve this through the &lt;a href=&quot;https://docs.python.org/2/library/functions.html#__import__&quot;&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;__import__&lt;/code&gt;&lt;/a&gt; function:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;module_name&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;numpy&quot;&lt;/span&gt;
+
+&lt;span class=&quot;nb&quot;&gt;__import__&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;module_name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;multiple-returns-in-python&quot;&gt;Multiple Returns in Python&lt;/h3&gt;
+
+&lt;p&gt;In Python, it’s possible for a function or a method to return multiple values. We can do this simply by separating each return value by a comma:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;test&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;():&lt;/span&gt;
+    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;100&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;foo&quot;&lt;/span&gt;
+
+&lt;span class=&quot;n&quot;&gt;someNumber&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;someString&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;test&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;importing-modules-outside-of-the-directory&quot;&gt;Importing Modules Outside of the Directory&lt;/h3&gt;
+
+&lt;p&gt;In order to import a module from outside of the directory, we need to add that module’s directory path into the current file with &lt;code class=&quot;highlighter-rouge&quot;&gt;sys.path.append&lt;/code&gt;. Suppose we have the following directory structure:&lt;/p&gt;
+
+&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;|--foo
+| |-- bar.py
+|
+|-- tools
+| |-- speak_yoda.py
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;If we want to use the &lt;code class=&quot;highlighter-rouge&quot;&gt;speak_yoda.py&lt;/code&gt; module within the &lt;code class=&quot;highlighter-rouge&quot;&gt;bar.py&lt;/code&gt;, we can do the following:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c1&quot;&gt;# /foo/bar.py
+&lt;/span&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;os&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Use relative path to tools directory.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;sys&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;append&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;../tools&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+
+&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;speak_yoda&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;However, this won’t work if we run the &lt;code class=&quot;highlighter-rouge&quot;&gt;baz.py&lt;/code&gt; file from outside of its &lt;code class=&quot;highlighter-rouge&quot;&gt;foo&lt;/code&gt; directory:&lt;/p&gt;
+
+&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# It works inside of the /foo directory.&lt;/span&gt;
+&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;cd&lt;/span&gt; /foo
+&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;python bar.py
+
+&lt;span class=&quot;c&quot;&gt;# But it won't work if the code runs from outside of /foo directory.&lt;/span&gt;
+&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;python foo/bar.py
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;To solve this problem we can refer to the &lt;code class=&quot;highlighter-rouge&quot;&gt;tools&lt;/code&gt; directory using its absolute path.&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c1&quot;&gt;# /foo/bar.py
+&lt;/span&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;os&lt;/span&gt;
+&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;sys&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Get the directory name for this file.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;current_dirname&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;os&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;dirname&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;os&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;realpath&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;__file__&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;))&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Use the absolute path to the tools directory
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;tools_path&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;os&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;abspath&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;os&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;join&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;dirname&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;../tools&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;))&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;sys&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;append&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;tools_path&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+
+&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;speak_yoda&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h2 id=&quot;output&quot;&gt;Output&lt;/h2&gt;
+
+&lt;h3 id=&quot;print-the-emojis&quot;&gt;Print The Emojis&lt;/h3&gt;
+
+&lt;p&gt;It turns out you can’t just print an emoji or any other Unicode characters to the console. You need to specify the encoding type beforehand:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c1&quot;&gt;# coding: utf8
+&lt;/span&gt;
+&lt;span class=&quot;k&quot;&gt;print&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;😅&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;pretty-print&quot;&gt;Pretty Print&lt;/h3&gt;
+
+&lt;p&gt;We can use the &lt;code class=&quot;highlighter-rouge&quot;&gt;pprint&lt;/code&gt; module to pretty-print Python data structure with a configurable indentation:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;pprint&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;pp&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;pprint&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;PrettyPrinter&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;indent&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+
+&lt;span class=&quot;n&quot;&gt;pp&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;pprint&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;people&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h2 id=&quot;working-with-pathname&quot;&gt;Working with Pathname&lt;/h2&gt;
+
+&lt;p&gt;Read more about pathname manipulations in the &lt;a href=&quot;https://docs.python.org/2/library/os.path.html&quot;&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;os.path&lt;/code&gt; documentation&lt;/a&gt;.&lt;/p&gt;
+
+&lt;h3 id=&quot;get-filename-from-url&quot;&gt;Get Filename From URL&lt;/h3&gt;
+
+&lt;p&gt;Suppose the last segment of the URL contains a filename that we would like to download. We can extract this filename with the following code:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;os&lt;/span&gt;
+&lt;span class=&quot;kn&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;urlparse&lt;/span&gt; &lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;urlparse&lt;/span&gt;
+
+&lt;span class=&quot;n&quot;&gt;url&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;https://example.com/foo.txt&quot;&lt;/span&gt;
+
+&lt;span class=&quot;n&quot;&gt;url_components&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;urlparse&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;url&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+
+&lt;span class=&quot;n&quot;&gt;filename&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;os&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;basename&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;url_components&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;# foo.txt
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;check-if-file-exists&quot;&gt;Check if File Exists&lt;/h3&gt;
+
+&lt;p&gt;To check whether the given file path exists or not:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;os&lt;/span&gt;
+
+&lt;span class=&quot;n&quot;&gt;is_exists&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;os&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;isfile&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;foo.txt&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;create-a-directory-if-it-does-not-exists&quot;&gt;Create a Directory if It Does Not Exists&lt;/h3&gt;
+
+&lt;p&gt;To create a directory only if it does not exist:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;os&lt;/span&gt;
+&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;errno&lt;/span&gt;
+
+&lt;span class=&quot;k&quot;&gt;try&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
+    &lt;span class=&quot;n&quot;&gt;os&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;makedirs&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;directory_path&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;span class=&quot;k&quot;&gt;except&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;OSError&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
+    &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;errno&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;!=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;errno&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;EEXIST&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
+        &lt;span class=&quot;k&quot;&gt;raise&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h2 id=&quot;working-with-files&quot;&gt;Working with Files&lt;/h2&gt;
+
+&lt;h3 id=&quot;downloading-a-file&quot;&gt;Downloading a File&lt;/h3&gt;
+
+&lt;p&gt;We can use the &lt;code class=&quot;highlighter-rouge&quot;&gt;urllib&lt;/code&gt; module to download a file in Python. The first argument is the file URL that we would like to download. The second argument is the optional filename that will be used to store the file.&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;urllib&lt;/span&gt;
+
+&lt;span class=&quot;n&quot;&gt;urllib&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;urlretrieve&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;https://example.com/foo.txt&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;foo.txt&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;extracting-tar-file&quot;&gt;Extracting Tar File&lt;/h3&gt;
+
+&lt;p&gt;There’s a built-in &lt;code class=&quot;highlighter-rouge&quot;&gt;tarfile&lt;/code&gt; module that we can use to work with Tar file in Python. To extract the &lt;code class=&quot;highlighter-rouge&quot;&gt;tar.gz&lt;/code&gt; file we can use the following code:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;tarfile&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Open the file.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;tfile&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;tarfile&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;open&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;foo.tar.gz&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Extract the file to the given path.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;tfile&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;extractall&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;We can pass the &lt;code class=&quot;highlighter-rouge&quot;&gt;mode&lt;/code&gt; argument to the &lt;code class=&quot;highlighter-rouge&quot;&gt;open&lt;/code&gt; method. By default, the &lt;code class=&quot;highlighter-rouge&quot;&gt;mode&lt;/code&gt; would be &lt;code class=&quot;highlighter-rouge&quot;&gt;r&lt;/code&gt;—reading mode with transparent compression. There are also other mode options that we can use:&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;r:gz&lt;/code&gt;: Reading mode with gzip compression.&lt;/li&gt;
+  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;r:&lt;/code&gt;: Reading mode without compression.&lt;/li&gt;
+  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;a&lt;/code&gt;: Appending mode without compression.&lt;/li&gt;
+  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;w&lt;/code&gt;: Writting mode without compression.&lt;/li&gt;
+  &lt;li&gt;Checkout other available options in &lt;a href=&quot;https://docs.python.org/2/library/tarfile.html&quot;&gt;tarfile documentation&lt;/a&gt;.&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;h2 id=&quot;working-with-list&quot;&gt;Working with List&lt;/h2&gt;
+
+&lt;h3 id=&quot;generate-a-list-of-random-numbers&quot;&gt;Generate a List of Random Numbers&lt;/h3&gt;
+
+&lt;p&gt;Use the &lt;code class=&quot;highlighter-rouge&quot;&gt;for..in&lt;/code&gt; syntax to generate a list of random numbers in a one-liner style.&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;random&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Initialize internal state of random generator.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;random&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;seed&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;42&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Generate random points.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;randomNumbers&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;random&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;random&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;range&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;10&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)]&lt;/span&gt;
+&lt;span class=&quot;c1&quot;&gt;# [0.6394267984578837, 0.025010755222666936, 0.27502931836911926, ...]
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;pair-values-from-two-lists&quot;&gt;Pair Values from Two Lists&lt;/h3&gt;
+
+&lt;p&gt;The built-in &lt;code class=&quot;highlighter-rouge&quot;&gt;zip&lt;/code&gt; function can pair values from two lists. However, this &lt;code class=&quot;highlighter-rouge&quot;&gt;zip&lt;/code&gt; function will return a list of tuples instead. To get a list of value pairs, we can combine it with &lt;code class=&quot;highlighter-rouge&quot;&gt;for..in&lt;/code&gt; syntax:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;coordinates&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;y&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;zip&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;([&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;10&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;15&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;])]&lt;/span&gt;
+&lt;span class=&quot;c1&quot;&gt;# [[5, 0], [10, 1], [15, 0]]
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;splitting-a-list&quot;&gt;Splitting a List&lt;/h3&gt;
+
+&lt;p&gt;We can easily split a list in Python by specifying the starting index and it’s ending index. Note that the ending index is excluded from the result.&lt;/p&gt;
+
+&lt;p&gt;We can also specify a negative index. And also note that both of these indices are optional!&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
+
+&lt;span class=&quot;n&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;  &lt;span class=&quot;c1&quot;&gt;# 0,1,2
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;  &lt;span class=&quot;c1&quot;&gt;# 1,2
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:]&lt;/span&gt;   &lt;span class=&quot;c1&quot;&gt;# 2,3,4,5
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[:&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;   &lt;span class=&quot;c1&quot;&gt;# 0,1,2
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;# 0,1,2,3
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:]&lt;/span&gt;  &lt;span class=&quot;c1&quot;&gt;# 4,5
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[:]&lt;/span&gt;    &lt;span class=&quot;c1&quot;&gt;# 0,1,2,3,4,5
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;filtering-a-list-in-one-line&quot;&gt;Filtering a List In One Line&lt;/h3&gt;
+
+&lt;p&gt;We can easily filter a list in Python by combining the &lt;code class=&quot;highlighter-rouge&quot;&gt;for..in&lt;/code&gt; and the &lt;code class=&quot;highlighter-rouge&quot;&gt;if&lt;/code&gt; syntax together:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;numbers&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;range&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;11&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Filter even numbers only.
+&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;numbers&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;range&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;len&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;numbers&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;))&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;numbers&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;%&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;==&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
+&lt;span class=&quot;c1&quot;&gt;# [2, 4, 6, 8, 10]
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;sorting-a-list-in-ascending-order&quot;&gt;Sorting a List in Ascending Order&lt;/h3&gt;
+
+&lt;p&gt;In Python, we can sort a list in ascending order simply by calling the &lt;code class=&quot;highlighter-rouge&quot;&gt;sort&lt;/code&gt; method like so:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;people&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;John&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;Alice&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;Poe&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;people&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;sort&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
+&lt;span class=&quot;k&quot;&gt;print&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;people&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;# [&quot;Alice&quot;, &quot;John&quot;, &quot;Poe&quot;]
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;using-filter-function-with-a-list&quot;&gt;Using Filter Function with a List&lt;/h3&gt;
+
+&lt;p&gt;Just like its name, we can use the &lt;code class=&quot;highlighter-rouge&quot;&gt;filter&lt;/code&gt; function to filter out our list:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;numbers&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;range&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;11&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+
+&lt;span class=&quot;n&quot;&gt;even_numbers&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;filter&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;lambda&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;number&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;number&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;%&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;==&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;numbers&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;span class=&quot;c1&quot;&gt;# [2, 4, 6, 8, 10]
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;We can break the above statement into two parts:&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;lambda number: statement&lt;/code&gt;: The first part is the function that we would like to run to every item on the list. &lt;code class=&quot;highlighter-rouge&quot;&gt;number&lt;/code&gt; is the variable name we’d like to use in this function to refer to a single item from the &lt;code class=&quot;highlighter-rouge&quot;&gt;numbers&lt;/code&gt; list. The following function body must evaluate to truthy/falsy value—falsy means the current item will be removed from the final result.&lt;/li&gt;
+  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;numbers&lt;/code&gt;: The second parameter is the list that we’d like to filter.&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;h3 id=&quot;using-reduce-with-a-list-of-dictionary&quot;&gt;Using Reduce with a List of Dictionary&lt;/h3&gt;
+
+&lt;p&gt;We can use the &lt;code class=&quot;highlighter-rouge&quot;&gt;reduce&lt;/code&gt; function to calculate the total of a particular key in a list of a dictionary:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;items&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;10&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;20&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;50&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}]&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Calculate the total of value key.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;totalValues&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;reduce&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;lambda&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;total&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;total&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;value&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;items&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;# 80
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;It can be broken down into 4 parts:&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;lambda total&lt;/code&gt;: It’s the variable name that we’d like to use in the function body to refer to the carried or the accumulative value that will finally be returned.&lt;/li&gt;
+  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;item: statement&lt;/code&gt;: &lt;code class=&quot;highlighter-rouge&quot;&gt;item&lt;/code&gt; is the name of the variable we’d like to use within the function body to refer to the single item in the &lt;code class=&quot;highlighter-rouge&quot;&gt;items&lt;/code&gt; list. The following function body will be executed in order to define the accumulative value of &lt;code class=&quot;highlighter-rouge&quot;&gt;total&lt;/code&gt; for the next iteration.&lt;/li&gt;
+  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;items&lt;/code&gt;: It’s the list of item that we would like to “reduce”.&lt;/li&gt;
+  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;0&lt;/code&gt;: The last parameter is optional and it’s the initial accumulative value for the first iteration.&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;We can also use this &lt;code class=&quot;highlighter-rouge&quot;&gt;reduce&lt;/code&gt; function to find a single item from the list. Here’s an example of code to find the person with the biggest &lt;code class=&quot;highlighter-rouge&quot;&gt;total_payments&lt;/code&gt; within the given list of &lt;code class=&quot;highlighter-rouge&quot;&gt;people&lt;/code&gt; dictionary.&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;people&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;
+    &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;John&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;total_payments&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;100&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
+    &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;Alice&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;total_payments&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1000&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
+    &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;Poe&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;total_payments&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;800&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
+&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
+
+&lt;span class=&quot;n&quot;&gt;person_biggest_total_payments&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;reduce&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;lambda&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;paid_most&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;person&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;person&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;person&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;total_payments&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;paid_most&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;total_payments&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;paid_most&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;people&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;total_payments&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;})&lt;/span&gt;
+&lt;span class=&quot;c1&quot;&gt;# {'name': 'Alice', 'total_payments': 1000}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h2 id=&quot;working-with-dictionary&quot;&gt;Working with Dictionary&lt;/h2&gt;
+
+&lt;h3 id=&quot;loop-through-dictionary&quot;&gt;Loop Through Dictionary&lt;/h3&gt;
+
+&lt;p&gt;We can use the &lt;code class=&quot;highlighter-rouge&quot;&gt;itervalues&lt;/code&gt; method to loop through a dictionary:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;person&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;people&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;itervalues&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;():&lt;/span&gt;
+    &lt;span class=&quot;k&quot;&gt;print&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;person&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;email_address&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;])&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;We can also use the &lt;code class=&quot;highlighter-rouge&quot;&gt;iteritems&lt;/code&gt; method if we want to access the key too:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;person&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;people&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;iteritems&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;():&lt;/span&gt;
+    &lt;span class=&quot;k&quot;&gt;print&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;person&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;: &quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;person&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;][&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;email_address&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;])&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;calculate-total-of-particular-dictionary-key&quot;&gt;Calculate Total of Particular Dictionary Key&lt;/h3&gt;
+
+&lt;p&gt;Suppose we would like to calculate the total amount of &lt;code class=&quot;highlighter-rouge&quot;&gt;salary&lt;/code&gt; key on a &lt;code class=&quot;highlighter-rouge&quot;&gt;people&lt;/code&gt; dictionary. We can extract the &lt;code class=&quot;highlighter-rouge&quot;&gt;salary&lt;/code&gt; key and use the &lt;code class=&quot;highlighter-rouge&quot;&gt;sum&lt;/code&gt; function to get the total:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;total_salary&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;([&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;person&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;salary&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;person&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;people&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;itervalues&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()])&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h2 id=&quot;working-with-numpy&quot;&gt;Working with Numpy&lt;/h2&gt;
+
+&lt;h3 id=&quot;numpy-create-range-of-values-with-the-given-interval&quot;&gt;Numpy Create Range of Values with The Given Interval&lt;/h3&gt;
+
+&lt;p&gt;Use the &lt;a href=&quot;https://docs.scipy.org/doc/numpy/reference/generated/numpy.arange.html&quot;&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;arange&lt;/code&gt;&lt;/a&gt; method to create an array with an evenly spaced interval.&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;numpy&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;np&lt;/span&gt;
+
+&lt;span class=&quot;n&quot;&gt;np&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;arange&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;span class=&quot;c1&quot;&gt;# array([0,1,2,3,4])
+&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;np&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;arange&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;span class=&quot;c1&quot;&gt;# array([1. , 1.5, 2. , 2.5, 3. , 3.5])
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;numpy-create-coordinate-matrices-from-coordinate-vectors&quot;&gt;Numpy Create Coordinate Matrices from Coordinate Vectors&lt;/h3&gt;
+
+&lt;p&gt;We can use the Numpy &lt;a href=&quot;https://docs.scipy.org/doc/numpy/reference/generated/numpy.meshgrid.html&quot;&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;meshgrid&lt;/code&gt;&lt;/a&gt; method to make coordinate matrices from one-dimentional coordinate arrays.&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;numpy&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;np&lt;/span&gt;
+
+&lt;span class=&quot;n&quot;&gt;np&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;meshgrid&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;([&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;7&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;])&lt;/span&gt;
+&lt;span class=&quot;c1&quot;&gt;# [
+#   array([[1,2,3], [1,2,3]]),
+#   array([[0,0,0], [7,7,7]])
+# ]
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;flatten-numpy-array&quot;&gt;Flatten Numpy Array&lt;/h3&gt;
+
+&lt;p&gt;When we have a multi-dimensional Numpy array, we can easily flatten it with the &lt;a href=&quot;https://docs.scipy.org/doc/numpy/reference/generated/numpy.ravel.html&quot;&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;ravel&lt;/code&gt;&lt;/a&gt; method:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;numpy&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;np&lt;/span&gt;
+
+&lt;span class=&quot;n&quot;&gt;arr&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;np&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;array&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;([[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]])&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;arr&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;ravel&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
+&lt;span class=&quot;c1&quot;&gt;# array([1, 2, 3, 4])
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;pairing-array-values-with-second-axis&quot;&gt;Pairing Array Values with Second Axis&lt;/h3&gt;
+
+&lt;p&gt;We can use Numpy &lt;code class=&quot;highlighter-rouge&quot;&gt;c_&lt;/code&gt; function to pair array values with another array that will be it’s second axis. Read the &lt;a href=&quot;https://docs.scipy.org/doc/numpy/reference/generated/numpy.c_.html&quot;&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;numpy.c_&lt;/code&gt; documentation&lt;/a&gt;.&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;numpy&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;np&lt;/span&gt;
+
+&lt;span class=&quot;n&quot;&gt;x&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;y&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;10&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;20&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
+
+&lt;span class=&quot;n&quot;&gt;np&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;c_&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
+&lt;span class=&quot;c1&quot;&gt;# array([1,10], [2,20])
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;generate-coordinates-across-the-grid&quot;&gt;Generate Coordinates Across The Grid&lt;/h3&gt;
+
+&lt;p&gt;With the knowledge of Numpy &lt;a href=&quot;https://docs.scipy.org/doc/numpy/reference/generated/numpy.arange.html&quot;&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;arange&lt;/code&gt;&lt;/a&gt;, &lt;a href=&quot;https://docs.scipy.org/doc/numpy/reference/generated/numpy.meshgrid.html&quot;&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;meshgrid&lt;/code&gt;&lt;/a&gt;, &lt;a href=&quot;https://docs.scipy.org/doc/numpy/reference/generated/numpy.ravel.html&quot;&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;ravel&lt;/code&gt;&lt;/a&gt; and &lt;a href=&quot;https://docs.scipy.org/doc/numpy/reference/generated/numpy.c_.html&quot;&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;c_&lt;/code&gt;&lt;/a&gt; methods, we can easily generate an evenly spaced coordinates across the grid so we can pass it to the classifier and plot the decision surface.&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;numpy&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;np&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Generate an evenly spaced coordinates.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;x_points&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;y_points&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;np&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;meshgrid&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;np&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;arange&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;x_min&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;x_max&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;step&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;),&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;np&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;arange&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;y_min&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;y_max&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;step&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;))&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Pair the x and y points.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;test_coordinates&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;np&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;c_&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;x_points&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;ravel&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(),&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;y_points&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;ravel&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()]&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h2 id=&quot;plotting-the-data&quot;&gt;Plotting the Data&lt;/h2&gt;
+
+&lt;h3 id=&quot;plot-the-surface-decision&quot;&gt;Plot The Surface Decision&lt;/h3&gt;
+
+&lt;p&gt;We can pass an evenly spaced coordinates across the grid to the classifier to predict the output on each of that coordinate. We can then use &lt;a href=&quot;https://matplotlib.org/api/pyplot_api.html&quot;&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;matplotlib.pyplot&lt;/code&gt;&lt;/a&gt; to plot the surface decision.&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;matplotlib.pyplot&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;plt&lt;/span&gt;
+&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;pylab&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;pl&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Pass coordinates across the grid.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;predicted_labels&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;classifier&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;predict&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;test_coordinates&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Don't forget to reshape the output array dimension.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;predicted_labels&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;predicted_labels&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;reshape&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;x_points&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;shape&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Set the axes limit.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;plt&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;xlim&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;x_points&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;min&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(),&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;x_points&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;max&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;())&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;plt&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;ylim&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;y_points&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;min&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(),&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;y_points&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;max&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;())&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Plot the decision boundary with seismic color map.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;plt&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;pcolormesh&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;x_points&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;y_points&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;predicted_labels&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;cmap&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;pl&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;cm&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;seismic&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;The classifier output would be a one-dimensional array, so don’t forget to &lt;a href=&quot;https://docs.scipy.org/doc/numpy/reference/generated/numpy.reshape.html&quot;&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;reshape&lt;/code&gt;&lt;/a&gt; it back into a two-dimensional array before plotting. The &lt;code class=&quot;highlighter-rouge&quot;&gt;cmap&lt;/code&gt; is an optional parameter for the color map. Here we use the &lt;code class=&quot;highlighter-rouge&quot;&gt;seismic&lt;/code&gt; color map from &lt;code class=&quot;highlighter-rouge&quot;&gt;pylab&lt;/code&gt; module. It has the red-blue colors.&lt;/p&gt;
+
+&lt;h3 id=&quot;scatter-plot&quot;&gt;Scatter Plot&lt;/h3&gt;
+
+&lt;p&gt;We need to separate the test points based on its predicted label (the speed). So we can plot the test points with two different colors.&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c1&quot;&gt;# Separate fast (label = 0) &amp;amp; slow (label = 1) test points.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;grade_fast&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;features_test&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;][&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;range&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;len&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;features_test&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;))&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;labels_test&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;==&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;bumpy_fast&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;features_test&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;][&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;range&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;len&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;features_test&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;))&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;labels_test&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;==&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;grade_slow&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;features_test&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;][&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;range&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;len&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;features_test&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;))&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;labels_test&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;==&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;bumpy_slow&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;features_test&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;][&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;range&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;len&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;features_test&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;))&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;labels_test&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;==&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Plot the test points based on its speed.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;plt&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;scatter&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;grade_fast&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;bumpy_fast&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;color&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;b&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;label&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;fast&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;plt&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;scatter&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;grade_slow&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;bumpy_slow&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;color&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;r&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;label&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;slow&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Show the plot legend.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;plt&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;legend&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Add the axis labels.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;plt&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;xlabel&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;grade&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;plt&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;ylabel&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;bumpiness&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Show the plot.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;plt&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;show&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;If we want to save the plot into an image, we can use the &lt;code class=&quot;highlighter-rouge&quot;&gt;savefig&lt;/code&gt; method instead:&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;plt&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;savefig&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'scatter_plot.png'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h2 id=&quot;dealing-with-data&quot;&gt;Dealing with Data&lt;/h2&gt;
+
+&lt;h3 id=&quot;deserializing-python-object&quot;&gt;Deserializing Python Object&lt;/h3&gt;
+
+&lt;p&gt;We can use &lt;a href=&quot;https://docs.python.org/2/library/pickle.html&quot;&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;pickle&lt;/code&gt;&lt;/a&gt; module for serializing and deserializing Python object. There’s also the &lt;code class=&quot;highlighter-rouge&quot;&gt;cPickle&lt;/code&gt;—the faster C implementation. We use both of these modules to deserialize the email text and author list.&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;pickle&lt;/span&gt;
+&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;cPickle&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Unpickling or deserializing the texts.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;texts_file_handler&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;open&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;texts_file&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;r&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;texts&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;cPickle&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;load&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;texts_file_handler&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;texts_file_handler&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;close&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
+
+&lt;span class=&quot;c1&quot;&gt;# Unpickling or deserializing the authors.
+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;authors_file_handler&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;open&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;authors_file&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;r&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;authors&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;pickle&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;load&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;authors_file_handler&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;authors_file_handler&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;close&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h3 id=&quot;split-data-for-training-and-testing&quot;&gt;Split Data for Training and Testing&lt;/h3&gt;
+
+&lt;p&gt;We can use the built-in &lt;a href=&quot;http://scikit-learn.org/stable/modules/generated/sklearn.model_selection.train_test_split.html&quot;&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;train_test_split&lt;/code&gt;&lt;/a&gt; function from scikit-learn to split the data both for training and testing.&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;sklearn.model_selection&lt;/span&gt; &lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;train_test_split&lt;/span&gt;
+
+&lt;span class=&quot;n&quot;&gt;features_train&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;features_test&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;labels_train&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;labels_test&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;train_test_split&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;texts&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;authors&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;test_size&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;random_state&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;42&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;The &lt;code class=&quot;highlighter-rouge&quot;&gt;test_size&lt;/code&gt; argument is the proportion of data to split into the test, in our case we split 10% for testing.&lt;/p&gt;
+
+&lt;h3 id=&quot;vectorized-the-strings&quot;&gt;Vectorized the Strings&lt;/h3&gt;
+
+&lt;p&gt;When working with a text document, we need to vectorize the strings into a list of numbers so it’s easier and more efficient to process. We can use the &lt;a href=&quot;http://scikit-learn.org/stable/modules/generated/sklearn.feature_extraction.text.TfidfVectorizer.html&quot;&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;TfidfVectorizer&lt;/code&gt;&lt;/a&gt; class to vectorize the strings into a matrix of TF-IDF features.&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;sklearn.feature_extraction.text&lt;/span&gt; &lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;TfidfVectorizer&lt;/span&gt;
+
+&lt;span class=&quot;n&quot;&gt;vectorizer&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;TfidfVectorizer&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;sublinear_tf&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;bp&quot;&gt;True&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;max_df&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;stop_words&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;english&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;features_train_transformed&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;vectorizer&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;fit_transform&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;features_train&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;features_test_transformed&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;vectorizer&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;transform&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;features_test&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;Word with a frequency higher than the &lt;code class=&quot;highlighter-rouge&quot;&gt;max_df&lt;/code&gt; will be ignored. Stop words are also ignored—stop words are the most common words in a language (e.g. a, the, has).&lt;/p&gt;
+
+&lt;h3 id=&quot;feature-selection&quot;&gt;Feature Selection&lt;/h3&gt;
+
+&lt;p&gt;Text can have a lot of features thus it may slow to compute. We can use scikit &lt;a href=&quot;http://scikit-learn.org/stable/modules/generated/sklearn.feature_selection.SelectPercentile.html&quot;&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;SelectPercentile&lt;/code&gt;&lt;/a&gt; class to select only the important features.&lt;/p&gt;
+
+&lt;div class=&quot;language-py highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;selector&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;SelectPercentile&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;f_classif&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;percentile&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;10&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;selector&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;fit&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;features_train_transformed&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;labels_train&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;selected_features_train_transformed&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;selector&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;transform&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;features_train_transformed&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;toarray&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;selected_features_test_transformed&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;selector&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;transform&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;features_test_transformed&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;toarray&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;The &lt;code class=&quot;highlighter-rouge&quot;&gt;percentile&lt;/code&gt; is the percentage of features that we’d like to select based on its highest score.&lt;/p&gt;
+
+&lt;h5 id=&quot;this-article-is-for-demo-purpose-1&quot;&gt;This article is for Demo purpose&lt;/h5&gt;
+
+&lt;p&gt;The article was originally on &lt;a href=&quot;https://github.com/risan/risanb.com/blob/master/content/posts/python-notes-from-intro-to-machine-learning/index.md&quot;&gt;this repo&lt;/a&gt;&lt;/p&gt;</content><author><name>Klisé Theme</name><email>your-email@email.com</email></author><category term="python" /><category term="machine-learning" /><summary type="html">This article is for Demo purpose</summary></entry><entry><title type="html">React Component with Dot Notation</title><link href="http://localhost:4000/react-component-with-dot-notation/" rel="alternate" type="text/html" title="React Component with Dot Notation" /><published>2018-04-07T23:04:00+07:00</published><updated>2018-04-07T23:04:00+07:00</updated><id>http://localhost:4000/react-component-with-dot-notation</id><content type="html" xml:base="http://localhost:4000/react-component-with-dot-notation/">&lt;h5 id=&quot;this-article-is-for-demo-purpose&quot;&gt;This article is for Demo purpose&lt;/h5&gt;
+
+&lt;p&gt;The article was originally on &lt;a href=&quot;https://github.com/risan/risanb.com/blob/master/content/posts/react-component-with-dot-notation/index.md&quot;&gt;this repo&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;This is my answer to someone’s question on &lt;a href=&quot;https://stackoverflow.com/questions/49256472/react-how-to-extend-a-component-that-has-child-components-and-keep-them/49258038#answer-49258038&quot;&gt;StackOverflow&lt;/a&gt;. How can we define a React component that is accessible through the dot notation?&lt;/p&gt;
+
+&lt;p&gt;Take a look at the following code. We have the &lt;code class=&quot;highlighter-rouge&quot;&gt;Menu&lt;/code&gt; component and its three children &lt;code class=&quot;highlighter-rouge&quot;&gt;Menu.Item&lt;/code&gt;:&lt;/p&gt;
+
+&lt;div class=&quot;language-jsx highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
+  &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
+    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;Home&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
+    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;Blog&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
+    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;About&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
+  &lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
+&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;How can we define a component like &lt;code class=&quot;highlighter-rouge&quot;&gt;Menu&lt;/code&gt;? Where it has some kind of “sub-component” that is accessible through a dot notation.&lt;/p&gt;
+
+&lt;p&gt;Well, it’s actually a pretty common pattern. And it’s not really a sub-component, it’s just another component being attached to another one.&lt;/p&gt;
+
+&lt;p&gt;Let’s use the above &lt;code class=&quot;highlighter-rouge&quot;&gt;Menu&lt;/code&gt; component for example. We’ll put this component to its own dedicated file: &lt;code class=&quot;highlighter-rouge&quot;&gt;menu.js&lt;/code&gt;. First, let’s define these two components separately on this module file:&lt;/p&gt;
+
+&lt;div class=&quot;language-jsx highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c1&quot;&gt;// menu.js&lt;/span&gt;
+&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'react'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
+
+&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MenuItem&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;({&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;})&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;;&lt;/span&gt;
+
+&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Menu&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;({&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;})&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;;&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;It’s just a simple functional component. The &lt;code class=&quot;highlighter-rouge&quot;&gt;Menu&lt;/code&gt; is the parent with &lt;code class=&quot;highlighter-rouge&quot;&gt;ul&lt;/code&gt; tag. And the &lt;code class=&quot;highlighter-rouge&quot;&gt;MenuItem&lt;/code&gt; will act as its children. Now we can use these two components like so:&lt;/p&gt;
+
+&lt;div class=&quot;language-jsx highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;react&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
+&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;react-dom&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
+&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MenuItem&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;./menu&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
+
+&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
+  &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
+    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;MenuItem&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;Home&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;MenuItem&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
+    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;MenuItem&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;Blog&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;MenuItem&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
+    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;MenuItem&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;About&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;MenuItem&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
+  &lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
+&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
+
+&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;/&amp;gt;,&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getElementById&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;root&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;));&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;Where’s the dot notation? To make our &lt;code class=&quot;highlighter-rouge&quot;&gt;MenuItem&lt;/code&gt; component accessible through the dot nation, we can simply attach it to the &lt;code class=&quot;highlighter-rouge&quot;&gt;Menu&lt;/code&gt; component as a static property. To do so, we can no longer use the functional component for &lt;code class=&quot;highlighter-rouge&quot;&gt;Menu&lt;/code&gt; and switch to the class component instead:&lt;/p&gt;
+
+&lt;div class=&quot;language-jsx highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c1&quot;&gt;// menu.js&lt;/span&gt;
+&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'react'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
+
+&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MenuItem&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;({&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;})&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;;&lt;/span&gt;
+
+&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Menu&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
+  &lt;span class=&quot;kr&quot;&gt;static&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Item&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MenuItem&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
+
+  &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
+    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
+      &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
+    &lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
+  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
+&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;Now we can use the dot notation to declare the &lt;code class=&quot;highlighter-rouge&quot;&gt;MenuItem&lt;/code&gt; component:&lt;/p&gt;
+
+&lt;div class=&quot;language-jsx highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;react&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
+&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;react-dom&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
+&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Menu&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;./menu&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
+
+&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
+  &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
+    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;Home&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
+    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;Blog&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
+    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;About&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
+  &lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Menu&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
+&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
+
+&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;/&amp;gt;,&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getElementById&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;root&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;));&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;You can also put the &lt;code class=&quot;highlighter-rouge&quot;&gt;MenuItem&lt;/code&gt; component definition directly within the &lt;code class=&quot;highlighter-rouge&quot;&gt;Menu&lt;/code&gt; class. But this way you can no longer import &lt;code class=&quot;highlighter-rouge&quot;&gt;MenuItem&lt;/code&gt; individually.&lt;/p&gt;
+
+&lt;div class=&quot;language-jsx highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;react&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
+
+&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Menu&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
+  &lt;span class=&quot;kr&quot;&gt;static&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Item&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;({&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;})&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;;&lt;/span&gt;
+
+  &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
+    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;;&lt;/span&gt;
+  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
+&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;h5 id=&quot;this-article-is-for-demo-purpose-1&quot;&gt;This article is for Demo purpose&lt;/h5&gt;
+
+&lt;p&gt;The article was originally on &lt;a href=&quot;https://github.com/risan/risanb.com/blob/master/content/posts/react-component-with-dot-notation/index.md&quot;&gt;this repo&lt;/a&gt;&lt;/p&gt;</content><author><name>Klisé Theme</name><email>your-email@email.com</email></author><category term="javascript" /><category term="react" /><summary type="html">This article is for Demo purpose</summary></entry></feed>

_site/now.json

@@ -0,0 +1,7 @@
+{
+  "version": 2,
+  "routes": [
+    { "handle": "filesystem" },
+    { "src": "/.*", "status": 404, "dest": "404.html" }
+  ]
+}

_site/robots.txt

@@ -0,0 +1 @@
+Sitemap: http://localhost:4000/sitemap.xml

_site/sitemap.xml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+<url>
+<loc>http://localhost:4000/react-component-with-dot-notation/</loc>
+<lastmod>2018-04-07T23:04:00+07:00</lastmod>
+</url>
+<url>
+<loc>http://localhost:4000/python-notes-from-Intro-to-machine-learning/</loc>
+<lastmod>2018-04-14T10:00:00+07:00</lastmod>
+</url>
+<url>
+<loc>http://localhost:4000/how-this-site-was-made/</loc>
+<lastmod>2018-09-28T09:45:47+07:00</lastmod>
+</url>
+<url>
+<loc>http://localhost:4000/apa-itu-shell/</loc>
+<lastmod>2020-01-25T11:58:47+07:00</lastmod>
+</url>
+<url>
+<loc>http://localhost:4000/cara-memperbarui-fork-repository/</loc>
+<lastmod>2020-01-29T01:00:00+07:00</lastmod>
+</url>
+<url>
+<loc>http://localhost:4000/about/</loc>
+</url>
+<url>
+<loc>http://localhost:4000/</loc>
+</url>
+<url>
+<loc>http://localhost:4000/notes/</loc>
+</url>
+<url>
+<loc>http://localhost:4000/resume/</loc>
+</url>
+<url>
+<loc>http://localhost:4000/tags/</loc>
+</url>
+<url>
+<loc>http://localhost:4000/thanks/</loc>
+</url>
+</urlset>