From 9a064722255c5398a68501c71b8263f00e2c1637 Mon Sep 17 00:00:00 2001 From: Evoke Apps <74619040+evokeapps@users.noreply.github.com> Date: Sat, 12 Nov 2022 11:21:50 +0530 Subject: [PATCH 1/5] Added flashcards - preliminary version --- Gemfile | 1 - _config.yml | 7 +-- _includes/head.html | 17 +------- _layouts/flashcard-topic.html | 80 +++++++++++++++++++++++++++++++++++ _layouts/flashcards.html | 16 +++++++ _layouts/page.html | 4 ++ assets/css/custom.css | 60 ++++++++++++++++++++++++++ ec2-flashcards.md | 31 ++++++++++++++ flashcards.md | 9 ++++ 9 files changed, 203 insertions(+), 22 deletions(-) create mode 100644 _layouts/flashcard-topic.html create mode 100644 _layouts/flashcards.html create mode 100644 ec2-flashcards.md create mode 100644 flashcards.md diff --git a/Gemfile b/Gemfile index de89966..1d5042f 100755 --- a/Gemfile +++ b/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" diff --git a/_config.yml b/_config.yml index e5ea8fa..3fb92b8 100644 --- a/_config.yml +++ b/_config.yml @@ -5,7 +5,6 @@ url: 'https://www.in28minutes.com/' plugins: - jekyll-feed - jekyll-seo-tag - # - jekyll-analytics # Products products: @@ -13,6 +12,8 @@ products: 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: diff --git a/_includes/head.html b/_includes/head.html index e8e071a..d1ef56f 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -15,19 +15,4 @@ gtag('js', new Date()); gtag('config', '{{ site.google_analytics }}'); - - - \ No newline at end of file + \ No newline at end of file diff --git a/_layouts/flashcard-topic.html b/_layouts/flashcard-topic.html new file mode 100644 index 0000000..bca88b2 --- /dev/null +++ b/_layouts/flashcard-topic.html @@ -0,0 +1,80 @@ +--- +layout: page +--- +
+
+
+
+
+
+
+
+
{{page.title}}
+
{{page.subtitle}}
+ Click to toggle all cards +
+
+
+ +
+
+
+ {% for card in page.cards | limit: 4 %} +
+
+
+
{{card.title}}
+
{{card.description}}
+
+
+
+ {% endfor %} +
+
+ {% for card in page.cards | offset: 4 %} +
+
+
+
{{card.title}}
+
{{card.description}}
+
+
+
+ {% endfor %} +
+
+
+ +
+ + + + +{% include newsletter.html %} \ No newline at end of file diff --git a/_layouts/flashcards.html b/_layouts/flashcards.html new file mode 100644 index 0000000..2814b27 --- /dev/null +++ b/_layouts/flashcards.html @@ -0,0 +1,16 @@ +--- +layout: page +--- +
+
+ {% for topic in page.topics %} +
+
+
{{topic.name}}
+
{{topic.description}}
+ +
+
+ {% endfor %} +
+
\ No newline at end of file diff --git a/_layouts/page.html b/_layouts/page.html index ed6296e..d4c745e 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -1,15 +1,19 @@ --- layout: default --- +{% assign show_header = page.show_header | default: true %} +{% if show_header %}

{{page.title}}

+

{{page.subtitle}}

+{% endif %} {{content}} \ No newline at end of file diff --git a/assets/css/custom.css b/assets/css/custom.css index 9686a44..9c1101d 100644 --- a/assets/css/custom.css +++ b/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); +} diff --git a/ec2-flashcards.md b/ec2-flashcards.md new file mode 100644 index 0000000..ca50a42 --- /dev/null +++ b/ec2-flashcards.md @@ -0,0 +1,31 @@ +--- +layout: flashcard-topic +show_header: false +title: EC2 - VMs in AWS +subtitle: Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. +cards: + - title: AMI + description: Random description goes here + - title: Instance type + description: Random description goes here + - title: AMI + description: Random description goes here + - title: Instance type + description: Random description goes here + - title: AMI + description: Random description goes here + - title: Instance type + description: Random description goes here + - title: AMI + description: Random description goes here + - title: Instance type + description: Random description goes here + - title: AMI + description: Random description goes here + - title: Instance type + description: Random description goes here + - title: AMI + description: Random description goes here + - title: Instance type + description: Random description goes here +--- diff --git a/flashcards.md b/flashcards.md new file mode 100644 index 0000000..9e39ed8 --- /dev/null +++ b/flashcards.md @@ -0,0 +1,9 @@ +--- +layout: flashcards +title: Flashcards +subtitle: Master the cloud! +topics: + - name: EC2 - VMs + url: /ec2-flashcards + description: Master the EC2 - VMs with this set of flashcards +--- From 9ca3789b44b3cd618cf61619e2d74f5afd0f631a Mon Sep 17 00:00:00 2001 From: Evoke Apps <74619040+evokeapps@users.noreply.github.com> Date: Mon, 14 Nov 2022 08:29:28 +0530 Subject: [PATCH 2/5] Updated code --- _layouts/flashcard-topic.html | 94 ++++++++++++----------------------- _layouts/page.html | 3 -- assets/js/flashcards.js | 17 +++++++ ec2-flashcards.md | 47 ++++++++---------- flashcards.md | 4 +- 5 files changed, 73 insertions(+), 92 deletions(-) create mode 100644 assets/js/flashcards.js diff --git a/_layouts/flashcard-topic.html b/_layouts/flashcard-topic.html index bca88b2..1c32c75 100644 --- a/_layouts/flashcard-topic.html +++ b/_layouts/flashcard-topic.html @@ -2,79 +2,51 @@ layout: page ---
-
-
-
-
-
-
-
-
{{page.title}}
-
{{page.subtitle}}
- Click to toggle all cards -
-
-
- -
-
-
- {% for card in page.cards | limit: 4 %} -
-
-
-
{{card.title}}
-
{{card.description}}
-
-
-
- {% endfor %} +
+
+
+
+
+
+ {{page.main_card_title}}
+
{{page.main_card_description}}
+ Click to toggle all cards
- {% for card in page.cards | offset: 4 %} -
+
+ +
+
+
+ {% for card in page.cards | limit: 4 %} +
-
{{card.title}}
-
{{card.description}}
+
+ {{card.title}}
+
{{card.description}}
{% endfor %}
-
- + {% for card in page.cards | offset: 4 %} +
+
+
+
{{card.title}}
+
{{card.description}}
+
+
+
+ {% endfor %} +
- + {% include newsletter.html %} \ No newline at end of file diff --git a/_layouts/page.html b/_layouts/page.html index d4c745e..f73ed5b 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -1,8 +1,6 @@ --- layout: default --- -{% assign show_header = page.show_header | default: true %} -{% if show_header %}
@@ -15,5 +13,4 @@

{{page.title}}

-{% endif %} {{content}} \ No newline at end of file diff --git a/assets/js/flashcards.js b/assets/js/flashcards.js new file mode 100644 index 0000000..e1aead6 --- /dev/null +++ b/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 + } + }) +}) diff --git a/ec2-flashcards.md b/ec2-flashcards.md index ca50a42..c45e1f7 100644 --- a/ec2-flashcards.md +++ b/ec2-flashcards.md @@ -1,31 +1,26 @@ --- layout: flashcard-topic -show_header: false -title: EC2 - VMs in AWS -subtitle: Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. +title: EC2 - Elastic Compute Cloud with 8 flashcards +# 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: Random description goes here - - title: Instance type - description: Random description goes here - - title: AMI - description: Random description goes here - - title: Instance type - description: Random description goes here - - title: AMI - description: Random description goes here - - title: Instance type - description: Random description goes here - - title: AMI - description: Random description goes here - - title: Instance type - description: Random description goes here - - title: AMI - description: Random description goes here - - title: Instance type - description: Random description goes here - - title: AMI - description: Random description goes here - - title: Instance type - description: Random description goes here + 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. --- diff --git a/flashcards.md b/flashcards.md index 9e39ed8..88cc843 100644 --- a/flashcards.md +++ b/flashcards.md @@ -3,7 +3,7 @@ layout: flashcards title: Flashcards subtitle: Master the cloud! topics: - - name: EC2 - VMs + - name: EC2 - Elastic Compute Cloud with 8 flashcards url: /ec2-flashcards - description: Master the EC2 - VMs with this set of flashcards + description: Master the EC2 with these 8 flashcards --- From 5193d0ba938aca42a145c96baaa9110e89185def Mon Sep 17 00:00:00 2001 From: Evoke Apps <74619040+evokeapps@users.noreply.github.com> Date: Mon, 14 Nov 2022 21:04:12 +0530 Subject: [PATCH 3/5] Updated with requested changes and bug fixes --- _layouts/flashcards.html | 4 +-- _layouts/page.html | 4 +++ ec2-flashcards-10.md | 32 ++++++++++++++++++++++++ ec2-flashcards-14.md | 32 ++++++++++++++++++++++++ ec2-flashcards.md => ec2-flashcards-8.md | 2 +- flashcards.md | 13 ++++++++-- 6 files changed, 82 insertions(+), 5 deletions(-) create mode 100644 ec2-flashcards-10.md create mode 100644 ec2-flashcards-14.md rename ec2-flashcards.md => ec2-flashcards-8.md (95%) diff --git a/_layouts/flashcards.html b/_layouts/flashcards.html index 2814b27..d733673 100644 --- a/_layouts/flashcards.html +++ b/_layouts/flashcards.html @@ -5,9 +5,9 @@
{% for topic in page.topics %}
-
+
{{topic.name}}
-
{{topic.description}}
+
{{topic.description}}
diff --git a/_layouts/page.html b/_layouts/page.html index f73ed5b..c9722d3 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -1,6 +1,7 @@ --- layout: default --- +{% if page.title %}
@@ -13,4 +14,7 @@

{{page.title}}

+{% else %} +
+{% endif %} {{content}} \ No newline at end of file diff --git a/ec2-flashcards-10.md b/ec2-flashcards-10.md new file mode 100644 index 0000000..c9b44f3 --- /dev/null +++ b/ec2-flashcards-10.md @@ -0,0 +1,32 @@ +--- +layout: flashcard-topic +title: EC2 - Elastic Compute Cloud with 10 flashcards +# 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. +--- diff --git a/ec2-flashcards-14.md b/ec2-flashcards-14.md new file mode 100644 index 0000000..ac8285c --- /dev/null +++ b/ec2-flashcards-14.md @@ -0,0 +1,32 @@ +--- +layout: flashcard-topic +title: EC2 - Elastic Compute Cloud with 14 flashcards +# 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. +--- diff --git a/ec2-flashcards.md b/ec2-flashcards-8.md similarity index 95% rename from ec2-flashcards.md rename to ec2-flashcards-8.md index c45e1f7..08d4e90 100644 --- a/ec2-flashcards.md +++ b/ec2-flashcards-8.md @@ -1,6 +1,6 @@ --- layout: flashcard-topic -title: EC2 - Elastic Compute Cloud with 8 flashcards +# title: EC2 - Elastic Compute Cloud with 8 flashcards # Main card main_card_title: EC2 - Elastic Compute Cloud with 8 flashcards main_card_bg: '#6586c3' diff --git a/flashcards.md b/flashcards.md index 88cc843..ad708a3 100644 --- a/flashcards.md +++ b/flashcards.md @@ -1,9 +1,18 @@ --- layout: flashcards title: Flashcards -subtitle: Master the cloud! +subtitle: Master the cloud with these flashcards! topics: - name: EC2 - Elastic Compute Cloud with 8 flashcards - url: /ec2-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' --- From b294b4ccd6c35cba0ec5bfd18a9f4d6599f3a9ad Mon Sep 17 00:00:00 2001 From: Evoke Apps <74619040+evokeapps@users.noreply.github.com> Date: Tue, 15 Nov 2022 07:40:58 +0530 Subject: [PATCH 4/5] Updated code and bug fixes --- ec2-flashcards-10.md | 1 - ec2-flashcards-14.md | 7 ++++++- ec2-flashcards-8.md | 1 - 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/ec2-flashcards-10.md b/ec2-flashcards-10.md index c9b44f3..717fcd7 100644 --- a/ec2-flashcards-10.md +++ b/ec2-flashcards-10.md @@ -1,6 +1,5 @@ --- layout: flashcard-topic -title: EC2 - Elastic Compute Cloud with 10 flashcards # Main card main_card_title: EC2 - Elastic Compute Cloud with 10 flashcards main_card_bg: '#6586c3' diff --git a/ec2-flashcards-14.md b/ec2-flashcards-14.md index ac8285c..f1b0346 100644 --- a/ec2-flashcards-14.md +++ b/ec2-flashcards-14.md @@ -1,6 +1,5 @@ --- layout: flashcard-topic -title: EC2 - Elastic Compute Cloud with 14 flashcards # Main card main_card_title: EC2 - Elastic Compute Cloud with 14 flashcards main_card_bg: '#6586c3' @@ -29,4 +28,10 @@ cards: 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. --- diff --git a/ec2-flashcards-8.md b/ec2-flashcards-8.md index 08d4e90..a504227 100644 --- a/ec2-flashcards-8.md +++ b/ec2-flashcards-8.md @@ -1,6 +1,5 @@ --- layout: flashcard-topic -# title: EC2 - Elastic Compute Cloud with 8 flashcards # Main card main_card_title: EC2 - Elastic Compute Cloud with 8 flashcards main_card_bg: '#6586c3' From a7c6f0a678bfab1d6fe5221bb43ea4d3f84dee1b Mon Sep 17 00:00:00 2001 From: Evoke Apps <74619040+evokeapps@users.noreply.github.com> Date: Tue, 15 Nov 2022 07:45:00 +0530 Subject: [PATCH 5/5] Added newsletter to the flashcards page --- _layouts/flashcards.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/_layouts/flashcards.html b/_layouts/flashcards.html index d733673..431c7b4 100644 --- a/_layouts/flashcards.html +++ b/_layouts/flashcards.html @@ -13,4 +13,6 @@
{% endfor %}
- \ No newline at end of file + + +{% include newsletter.html %} \ No newline at end of file