Flashcards update

Gemfile

@@ -3,7 +3,6 @@ gem "jekyll", "~> 4.2.2"
 group :jekyll_plugins do
   gem "jekyll-feed"
   gem "jekyll-seo-tag"
-  # gem 'jekyll-analytics'
 end
 platforms :mingw, :x64_mingw, :mswin, :jruby do
   gem "tzinfo", "~> 1.2"

_config.yml

@@ -5,14 +5,15 @@ url: 'https://www.in28minutes.com/'
 plugins:
   - jekyll-feed
   - jekyll-seo-tag
-  # - jekyll-analytics
 
 # Products
 products:
   - name: Articles
     url: /blog
   - name: Roadmaps
     url: https://www.in28minutes.com/roadmaps
+  - name: Flashcards
+    url: /flashcards
 
 # Articles
 articles:
@@ -41,10 +42,6 @@ social:
 
 google_analytics: UA-32942307-5
 
-# jekyll_analytics:
-#   GoogleAnalytics:
-#     id: UA-32942307-5
-
 markdown: kramdown
 highlighter: rouge
 kramdown:

_includes/head.html

@@ -15,19 +15,4 @@
     gtag('js', new Date());
 
     gtag('config', '{{ site.google_analytics }}');
-</script>
-
-<!-- <script type="text/javascript">
-   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-   ga('create', '{{ UA-32942307-5 }}', 'auto');
-   ga('send', 'pageview');
-</script>
-
-
-{% if site.google_tag_manager %}
-    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ site.google_tag_manager }}"
-height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-{% endif %} -->
+</script>

_layouts/flashcard-topic.html

@@ -0,0 +1,52 @@
+---
+layout: page
+---
+<div class="container py-5 mb-5">
+    <div class="row no-gutters">
+        <div class="col-12 col-lg-6">
+            <div class="flipper flipper-xl">
+                <div class="flipper-front text-white" style="background-color: {{page.main_card_bg}};">
+                    <div class="d-flex flex-column p-5">
+                        <div class="fs-1 fw-bold">
+                            {{page.main_card_title}}</div>
+                        <div class="fs-6 mb-3">{{page.main_card_description}}</div>
+                        <small>Click to toggle all cards</small>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div class="col-12 col-lg-6">
+            <div class="row no-gutters">
+                {% for card in page.cards | limit: 4 %}
+                <div class="col-12 col-sm-6">
+                    <div class="flipper">
+                        <div class="flipper-card shadow shadow-sm">
+                            <div class="flipper-front p-5 fs-4 fw-bold text-center text-white"
+                                style="background-color: {{page.card_bg}};">
+                                {{card.title}}</div>
+                            <div class="flipper-back border p-5 fs-6 text-center">{{card.description}}</div>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+        {% for card in page.cards | offset: 4 %}
+        <div class="col-12 col-sm-6 col-lg-3">
+            <div class="flipper">
+                <div class="flipper-card shadow shadow-sm">
+                    <div class="flipper-front text-center fs-3 p-5 text-white fw-bold"
+                        style="background-color: {{page.card_bg}};">{{card.title}}</div>
+                    <div class="flipper-back border p-5 fs-6 text-center">{{card.description}}</div>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+<script src="{{ 'assets/js/flashcards.js' | relative_url }}"></script>
+
+{% include newsletter.html %}

_layouts/flashcards.html

@@ -0,0 +1,18 @@
+---
+layout: page
+---
+<div class="container py-5">
+    <div class="row row-cols-1 row-cols-md-4 row-cols-lg-3">
+        {% for topic in page.topics %}
+        <div class="col">
+            <div class="p-5 shadow shadow-sm rounded position-relative" style="background-color: {{topic.color}};">
+                <div class="fs-3 fw-bold text-white">{{topic.name}}</div>
+                <div class="fs-6 text-white">{{topic.description}}</div>
+                <a href="{{topic.url | relative_url}}" class="stretched-link"></a>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+
+{% include newsletter.html %}

_layouts/page.html

@@ -1,15 +1,20 @@
 ---
 layout: default
 ---
+{% if page.title %}
 <section class="ud-page-banner">
     <div class="container">
         <div class="row">
             <div class="col-lg-12">
                 <div class="ud-banner-content">
                     <h1>{{page.title}}</h1>
+                    <p class="text-white">{{page.subtitle}}</p>
                 </div>
             </div>
         </div>
     </div>
 </section>
+{% else %}
+<section class="ud-page-banner" style="padding-top: 0em;"></section>
+{% endif %}
 {{content}}

assets/css/custom.css

@@ -155,3 +155,63 @@
     }
   }
 }
+
+.row.no-gutters {
+  margin: -5px !important;
+}
+
+.row.no-gutters > * {
+  padding: 5px !important;
+}
+
+.flipper {
+  height: 0;
+  padding-bottom: 100%;
+  position: relative;
+  -webkit-perspective: 800px;
+  -ms-perspective: 800px;
+  perspective: 800px;
+}
+
+@media (min-width: 576px) {
+  .ratio-not-1-1 {
+    padding-bottom: calc(50% - 5px);
+  }
+}
+
+.flipper-card {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+    -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.flipper-front,
+.flipper-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  border-radius: 10px;
+  background: #c1c3c5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flipper-back {
+  background: #fff;
+  -webkit-transform: rotateY(180deg);
+  transform: rotateY(180deg);
+}
+
+.flipper-card.flipper-is-flipped {
+  -webkit-transform: rotateY(180deg);
+  transform: rotateY(180deg);
+}

assets/js/flashcards.js

@@ -0,0 +1,17 @@
+$(document).ready(function () {
+  let showingCards = false
+  let $cards = $('.flipper-card')
+  $cards.on('click', function () {
+    $(this).toggleClass('flipper-is-flipped')
+  })
+  $('.flipper-xl').on('click', function () {
+    $cards.removeClass('flipper-is-flipped')
+    if (!showingCards) {
+      $cards.addClass('flipper-is-flipped')
+      showingCards = true
+    } else {
+      $cards.removeClass('flipper-is-flipped')
+      showingCards = false
+    }
+  })
+})

ec2-flashcards-10.md

@@ -0,0 +1,31 @@
+---
+layout: flashcard-topic
+# Main card
+main_card_title: EC2 - Elastic Compute Cloud with 10 flashcards
+main_card_bg: '#6586c3'
+# Other cards
+card_bg: '#9aacd5'
+cards:
+  - title: AMI
+    description: What operating system and what software do you want on the instance?
+  - title: Instance Types
+    description: Optimized combination of compute(CPU, GPU), memory, disk (storage) and networking for specific workloads.
+  - title: Security Groups
+    description: Virtual firewall to control incoming and outgoing traffic to/from AWS resources (EC2 instances, databases etc)
+  - title: Key Pairs
+    description: Public key cryptography (Key Pairs) used to protect your EC2 instances
+  - title: Instance Metadata Service
+    description: Get details about EC2 instance from inside an EC2 instance.  http://169.254.169.254/latest/meta-data/
+  - title: Userdata
+    description: Used for bootstrapping. Install OS patches or software when an EC2 instance is launched.
+  - title: Elastic IP Addresses
+    description: Static public IP address for EC2 instance.
+  - title: Launch Templates
+    description: Pre-configured templates (AMI ID, instance type, and network settings) simplifying the creation of EC2 instances.
+  - title: Userdata
+    description: Used for bootstrapping. Install OS patches or software when an EC2 instance is launched.
+  - title: Elastic IP Addresses
+    description: Static public IP address for EC2 instance.
+  - title: Launch Templates
+    description: Pre-configured templates (AMI ID, instance type, and network settings) simplifying the creation of EC2 instances.
+---

ec2-flashcards-14.md

@@ -0,0 +1,37 @@
+---
+layout: flashcard-topic
+# Main card
+main_card_title: EC2 - Elastic Compute Cloud with 14 flashcards
+main_card_bg: '#6586c3'
+# Other cards
+card_bg: '#9aacd5'
+cards:
+  - title: AMI
+    description: What operating system and what software do you want on the instance?
+  - title: Instance Types
+    description: Optimized combination of compute(CPU, GPU), memory, disk (storage) and networking for specific workloads.
+  - title: Security Groups
+    description: Virtual firewall to control incoming and outgoing traffic to/from AWS resources (EC2 instances, databases etc)
+  - title: Key Pairs
+    description: Public key cryptography (Key Pairs) used to protect your EC2 instances
+  - title: Instance Metadata Service
+    description: Get details about EC2 instance from inside an EC2 instance.  http://169.254.169.254/latest/meta-data/
+  - title: Userdata
+    description: Used for bootstrapping. Install OS patches or software when an EC2 instance is launched.
+  - title: Elastic IP Addresses
+    description: Static public IP address for EC2 instance.
+  - title: Launch Templates
+    description: Pre-configured templates (AMI ID, instance type, and network settings) simplifying the creation of EC2 instances.
+  - title: Userdata
+    description: Used for bootstrapping. Install OS patches or software when an EC2 instance is launched.
+  - title: Elastic IP Addresses
+    description: Static public IP address for EC2 instance.
+  - title: Launch Templates
+    description: Pre-configured templates (AMI ID, instance type, and network settings) simplifying the creation of EC2 instances.
+  - title: Launch Templates
+    description: Pre-configured templates (AMI ID, instance type, and network settings) simplifying the creation of EC2 instances.
+  - title: Userdata
+    description: Used for bootstrapping. Install OS patches or software when an EC2 instance is launched.
+  - title: Elastic IP Addresses
+    description: Static public IP address for EC2 instance.
+---

ec2-flashcards-8.md

@@ -0,0 +1,25 @@
+---
+layout: flashcard-topic
+# Main card
+main_card_title: EC2 - Elastic Compute Cloud with 8 flashcards
+main_card_bg: '#6586c3'
+# Other cards
+card_bg: '#9aacd5'
+cards:
+  - title: AMI
+    description: What operating system and what software do you want on the instance?
+  - title: Instance Types
+    description: Optimized combination of compute(CPU, GPU), memory, disk (storage) and networking for specific workloads.
+  - title: Security Groups
+    description: Virtual firewall to control incoming and outgoing traffic to/from AWS resources (EC2 instances, databases etc)
+  - title: Key Pairs
+    description: Public key cryptography (Key Pairs) used to protect your EC2 instances
+  - title: Instance Metadata Service
+    description: Get details about EC2 instance from inside an EC2 instance.  http://169.254.169.254/latest/meta-data/
+  - title: Userdata
+    description: Used for bootstrapping. Install OS patches or software when an EC2 instance is launched.
+  - title: Elastic IP Addresses
+    description: Static public IP address for EC2 instance.
+  - title: Launch Templates
+    description: Pre-configured templates (AMI ID, instance type, and network settings) simplifying the creation of EC2 instances.
+---

flashcards.md

@@ -0,0 +1,18 @@
+---
+layout: flashcards
+title: Flashcards
+subtitle: Master the cloud with these flashcards!
+topics:
+  - name: EC2 - Elastic Compute Cloud with 8 flashcards
+    url: /ec2-flashcards-8
+    description: Master the EC2 with these 8 flashcards
+    color: '#6586c3'
+  - name: EC2 - Elastic Compute Cloud with 10 flashcards
+    url: /ec2-flashcards-10
+    description: Master the EC2 with these 10 flashcards
+    color: '#00C5D8'
+  - name: EC2 - Elastic Compute Cloud with 14 flashcards
+    url: /ec2-flashcards-14
+    description: Master the EC2 with these 14 flashcards
+    color: '#00A7DC'
+---