Merge pull request #222 from move4mobile/develop

Next release

.github/workflows/cicd.yml

@@ -38,6 +38,10 @@ jobs:
       - name: Build artifact
         run: npm run build
 
+      - name: Check for broken links
+        # -roe = Recursive, Ordered, Exclude-External-links
+        run: npx broken-link-checker-local ./dist -roe --filter-level 2 --exclude "*/__/firebase/*"
+
       - name: Archive artifact
         uses: actions/upload-artifact@v2
         with:

README.md

@@ -1,6 +1,6 @@
 # Geek Bites [![Build Status](https://travis-ci.org/move4mobile/geekbites.svg?branch=develop)](https://travis-ci.org/move4mobile/geekbites)
 
-Onze blog staat live: http://geekbites.move4mobile.io
+Onze blog staat live: https://geekbites.move4mobile.io
 
 #### How to install
 First install Node.js and check which verion of Node you have.

src/_data/people.json

@@ -86,5 +86,12 @@
       "email": "[email protected]",
       "github": "youridekker",
       "avatar": "https://avatars.githubusercontent.com/u/38322349?s=80"
+    },
+    "nick": {
+      "name": "Nick Ratering",
+      "email": "[email protected]",
+      "twitter": "nickratering",
+      "github": "nratering",
+      "avatar": "https://avatars.githubusercontent.com/u/89972776?v=4&s=80"
     }
 }

src/_includes/head.njk

@@ -11,7 +11,8 @@
   </title>
 
   <link rel="stylesheet" href="/styles.css">
-  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/apple-touch-icon-precomposed.png">
-  <link rel="shortcut icon" href="/assets/favicon.ico">
+  <link href="/assets/android-chrome-192x192.png" rel="shortcut icon" sizes="192x192">
+  <link href="/assets/apple-touch-icon-152x152.png" rel="apple-touch-icon-precomposed">
+  <link href="/assets/favicon.ico" rel="shortcut icon">
   <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="/atom.xml">
-</head>
+</head>

src/_sass/_author.scss

@@ -1,7 +1,6 @@
 //source: https://github.com/willianjusten/cards-jekyll-template/blob/master/src/styl/_author.styl
 
 .author {
-
   display: table;
   margin: auto;
   width: 100%;
@@ -21,7 +20,6 @@
   }
 
   .content {
-
     padding: 8px;
     vertical-align: middle;
     letter-spacing: 0.1em;
@@ -41,20 +39,4 @@
 
   }
 
-
-  //background: lightGray;
-  //display: table;
-  //width: 100%;
-
-  //.details {
-  //  margin: auto;
-  //  text-align: center;
-  //}
-  //img {
-  //    border-radius: 50%;
-  //    display: block;
-  //    margin: auto;
-  //    float:left;
-  //}
-
-}
+}

src/_sass/_base.scss

@@ -4,8 +4,8 @@
 
 * {
   -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 html,
@@ -28,7 +28,7 @@ body {
   color: $body-color;
   background-color: $body-bg;
   -webkit-text-size-adjust: 100%;
-      -ms-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
 }
 
 // No `:visited` state is required by default (browsers will use `a`)
@@ -50,29 +50,7 @@ a {
 img {
   display: block;
   max-width: 100%;
+  height: auto;
   margin: 0 0 1rem;
   border-radius: 5px;
 }
-
-table {
-  margin-bottom: 1rem;
-  width: 100%;
-  font-size: 85%;
-  border: 1px solid #e5e5e5;
-  border-collapse: collapse;
-}
-
-td,
-th {
-  padding: .25rem .5rem;
-  border: 1px solid #e5e5e5;
-}
-
-th {
-  text-align: left;
-}
-
-tbody tr:nth-child(odd) td,
-tbody tr:nth-child(odd) th {
-  background-color: #f9f9f9;
-}

src/_sass/_code.scss

@@ -12,7 +12,7 @@ code {
   padding: .25em .5em;
   font-size: 85%;
   color: $code-color;
-  background-color: #f9f9f9;
+  background-color: $gray-1;
   border-radius: 3px;
 }
 
@@ -34,7 +34,7 @@ pre code {
   margin-bottom: 1rem;
   font-size: .8rem;
   line-height: 1.4;
-  background-color: #f9f9f9;
+  background-color: $gray-1;
   border-radius: .25rem;
 
   pre {
@@ -49,8 +49,8 @@ pre code {
     color: #999;
     // Make sure numbers aren't selectable
     -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
+    -moz-user-select: none;
+    user-select: none;
   }
 }
 

src/_sass/_layout.scss

@@ -4,9 +4,9 @@
 
 .container {
   max-width: 38rem;
-  padding-left:  1.5rem;
+  padding-left: 1.5rem;
   padding-right: 1.5rem;
-  margin-left:  auto;
+  margin-left: auto;
   margin-right: auto;
 }
 

src/_sass/_masthead.scss

@@ -3,7 +3,7 @@
 // Super small header above the content for site name and short description.
 
 .masthead {
-  padding-top:    1rem;
+  padding-top: 1rem;
   padding-bottom: 1rem;
   margin-bottom: 3rem;
 }

src/_sass/_message.scss

@@ -7,5 +7,5 @@
   margin-bottom: 1rem;
   padding: 1rem;
   color: #717171;
-  background-color: #f9f9f9;
+  background-color: $gray-1;
 }

src/_sass/_pagination.scss

@@ -39,12 +39,13 @@ a.pagination-item:hover {
 
     &:first-child {
       margin-bottom: 0;
-      border-top-left-radius:    4px;
+      border-top-left-radius: 4px;
       border-bottom-left-radius: 4px;
     }
+
     &:last-child {
       margin-left: -1px;
-      border-top-right-radius:    4px;
+      border-top-right-radius: 4px;
       border-bottom-right-radius: 4px;
     }
   }

src/_sass/_posts.scss

@@ -16,8 +16,9 @@
 .page-title,
 .post-title,
 .post-title a {
-  color: #303030;
+  color: $gray-5;
 }
+
 .page-title,
 .post-title {
   margin-top: 0;
@@ -31,7 +32,6 @@
   color: #9a9a9a;
 }
 
-
 // Related posts
 .related {
   padding-top: 2rem;
@@ -65,3 +65,22 @@
     }
   }
 }
+
+.post {
+  figure {
+    display: flex;
+    flex-flow: column;
+    margin: 0 0 1rem;
+
+    img {
+      margin: 0;
+      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+    }
+
+    figcaption {
+      font-style: italic;
+      font-size: .75rem;
+      padding: 8px 0;
+    }
+  }
+}

src/_sass/_tables.scss

@@ -0,0 +1,28 @@
+
+table {
+  margin-bottom: 1rem;
+  width: 100%;
+  font-size: 85%;
+  border: 1px solid #e5e5e5;
+  border-collapse: collapse;
+}
+
+td,
+th {
+  padding: .25rem .5rem;
+  border: 1px solid #e5e5e5;
+}
+
+th {
+  text-align: left;
+}
+
+tbody tr:nth-child(odd) td,
+tbody tr:nth-child(odd) th {
+  background-color: $gray-1;
+}
+
+// parent div on table with class
+.table-responsive {
+  overflow: auto;
+}

src/_sass/_type.scss

@@ -35,7 +35,7 @@ p {
 }
 
 strong {
-  color: #303030;
+  color: $gray-5;
 }
 
 ul, ol, dl {
@@ -67,7 +67,7 @@ abbr {
 
   &[title] {
     cursor: help;
-    border-bottom: 1px dotted #e5e5e5;
+    border-bottom: 1px dotted $border-color;
   }
 }
 
@@ -94,7 +94,7 @@ blockquote {
 
 // Footnote number within body text
 a[href^="#fn:"],
-// Back to footnote link
+  // Back to footnote link
 a[href^="#fnref:"] {
   display: inline-block;
   margin-left: .1rem;
@@ -115,3 +115,7 @@ a[href^="#fnref:"] {
   font-size: 1.25rem;
   font-weight: 300;
 }
+
+.small {
+  font-size: .75rem;
+}

src/posts/2021-05-21-google-io-learn-something-new.md

@@ -47,6 +47,8 @@ De beste manier om technische skills te ontwikkelen, is door gewoon te doen. En
 
 Hier zijn enkele suggesties op een rij:
 
+<div class="table-responsive">
+
 <!-- prettier-ignore-start -->
 | Workshop | Onderwerp | &nbsp; |
 | - | - | - | - |
@@ -58,6 +60,8 @@ Hier zijn enkele suggesties op een rij:
 %}
 <!-- prettier-ignore-end -->
 
+</div>
+
 **Bonus**: maak eerst even een [Google Developer Profile](https://developers.google.com/profile) aan en ontvang na het afronden van je eerste codelab, een badge.
 
 Dit zijn een aantal interessante ontwikkelingen die je in een workshop voorbij kan zien komen:

src/posts/2021-09-06-using-css-frameworks.md

@@ -0,0 +1,65 @@
+---
+title: "CSS Frameworks: Tailwind en Windi"
+category: inspiration
+tags: framework, css, sass, frontend
+comments: true
+author: nick
+min_read: 5
+date: 2021-09-06
+permalink: /2021/09/06/using-css-frameworks/
+---
+
+<!-- Section: Intro -->
+
+Veel websites, webwinkels en blogs maken gebruik van een CSS framework. Erg populair is nog altijd Twitter Bootstrap. Een ervaren webdesigner / frontender herkent het direct zonder in de code te hoeven kijken. Grafisch gezien lijken ze namelijk vaak sterk op elkaar. Bootstrap is snel inzetbaar en je hebt in no-time een responsive website staan. Zelf de source downloaden en Bootstrap builden wordt helaas nog vaak overgeslagen. Men plakt de productie CDN link in de head en de overrides worden er aan toegevoegd. Er kleven hier echter een aantal nadelen aan. Vaak wordt er maar een klein deel van de hele library gebruikt, terwijl de browser de volledige stylesheet in moet laden. Dit gaat ten koste van de performance en de UX; verspringende fontsizes en kleuren zie ik helaas nog te vaak.
+
+<figure>
+    <img src="/assets/css-frameworks/bootstrap.png" alt="Bootstrap">
+    <figcaption>Bootstrap website. 2021-09-06</figcaption>
+</figure>
+
+Ik ben zelf lang weggebleven bij Bootstrap, met de overtuiging alleen te schrijven wat de browser nodig heeft. Niets meer en niets minder. 
+
+Tegenwoordig zijn er slimme oplossingen bedacht om toch gebruik te maken van een CSS framework, met alleen de styling die daadwerkelijk nodig is. Een tweetal die ik hier uit wil lichten is **Tailwind CSS** en **Windi CSS**.
+
+&nbsp;
+
+## Het concept van beide frameworks
+
+Het idee is dat je je html schrijft met de classes die je nodig hebt voor je designs en componenten. Tijdens development heb je alle classes tot je beschikking. Een responsive grid, tools, spacing, backgrounds, kleuren, vormen, animaties, noem het maar op. Op het moment dat je gaat builden voor productie, worden de aangegeven templates gescand en wordt er een CSS bestand gegenereerd met alleen de classes die je gebruikt hebt. Resultaat: een optimale stylesheet van slechts enkele kilobytes!
+
+&nbsp;
+
+### Tailwind
+
+ De Tailwind CSS library kan wel oplopen tot 12Mb (unminified), dus je zult begrijpen dat er echt heel veel beschikbaar is. Een groot nadeel van Tailwind was dat tijdens development de gehele stylesheet in de browser geladen werd. Er zat zoveel in dat sommige browsers 'laggy' werden en soms zelfs vastliepen! Vanaf versie 2.1 is dit opgelost door een JIT-compiler. [Bekijk het filmpje op deze pagina](https://tailwindcss.com/docs/just-in-time-mode) voor een goede uitleg. 
+
+Nu kan je alleen nog geen classes toevoegen in de inspector, als ze niet aanwezig zijn. Een ander nadeel is dat je soms erg lange class names krijgt in je html. Qua leesbaarheid wordt het daar niet beter van. Hier heeft **Windi CSS** de oplossingen voor.
+
+<figure>
+    <img src="/assets/css-frameworks/tailwindcss.png" alt="Tailwind CSS">
+    <figcaption>Tailwind website. 2021-09-06</figcaption>
+</figure>
+
+&nbsp;
+
+### Windi
+
+Net als Tailwind, worden tijdens development alleen de classes gegeneerd die je gebruikt, in plaats van de hele bibliotheek. Maar dan vraag je je af: hoe pas ik dan in de inspector mijn classes aan, zodat ik kan zien wat ik verander? Hier heeft Windi gelukkig aan gedacht. Voeg 'virtual:windi-devtools' aan je main entry. Pas je nu de HTML aan in de inspector, zal Windi on-the-fly de classes toevoegen aan de head van je pagina, een onmisbare feature.
+
+Om classes leesbaarder te houden, kan er gebruik gemaakt worden van handige [shortcuts](https://windicss.org/features/shortcuts.html). Je voegt eenmalig een custom classname toe aan de config met hierin de verzameling van de benodigde classes. Ook is het erg eenvoudig om [varianten](https://windicss.org/features/variant-groups.html) te gebruiken.
+
+<figure>
+    <img src="/assets/css-frameworks/windi-css.png" alt="Windi CSS">
+    <figcaption>Windi homepage. 2021-09-06</figcaption>
+</figure>
+
+&nbsp;
+
+## Aan de slag!
+
+Beide frameworks zijn geschikt voor meerdere build tools, andere frameworks en IDE ondersteuning.
+
+ - [Tailwind CSS install](https://tailwindcss.com/docs/installation)
+ - [Windi CSS install](https://windicss.org/guide/installation.html)
+