aboutDavid's Blog

How to make a blog with 11ty and GhostCMS

David — Tue, 10 Nov 2020 18:40:00 GMT

This is a pretty easy task considering we are not using the file system, but using JSON from an external source.

Install the packages that we need

npm install @tryghost/content-api @11ty/eleventy --save

That's it.

Getting the data from Ghost

In _data/posts.js, we can make the following file:

Basically, it:

Require's the module
Setup the API to get data (setting the keys, etc)
Exports the posts using module.exports.

For this example, we will use the demo ghost instance located at demo.ghost.io.

Setting up the layout

In a file called _includes/base.html, insert the following:

html>
<html>
  <head>
    <title>My Awesome Blog!title>
  head>
  <body style="padding-left:32px;padding-right:32px;">
    {{ content | safe }}
    <footer>footer>
  body>
html>

Basically, this creates a basic HTML document, Changes the title to My Awesome Blog!, and inserts the content.

Setting up the list of posts

Make a new file called index.html.

---
layout: base.html
---
<h1>
  My Awesome Blog
h1>

<ul>
  {% for post in posts %}
  <li><a href="/posts/{{ post.slug }}">{{ post.title }}a>li>
  {% endfor %}
ul>

This basically says: "Use the layout base.html in the folder _includes, Then, for every post from GhostCMS, make a new unordered list item with the link /post/{{ post.slug }} and the Title {{ post.title }}." Run eleventy and visit your site. It should look something like this:

We have a blog! But, If you click a link, it shows a 404 error. Lets fix that. Make a new file called posts.html and add the following:

---
pagination:
  data: posts
  alias: post
  size: 1
permalink: posts/{{ post.slug }}/
layout: base.html
---

<h1>
  {{ post.title }}
h1>
<div class="content">
  {{ post.html | safe }}
div>

This basically uses 11ty's pagination feature and creates a new page for every post, then inserts the data into the page. Run eleventy again.

Great, we are finished, right? Nope. The webpage just looks, ugly. We can fix this with 1 line of CSS using water.css. Just insert the following line into _includes/base.html in the tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">

Run eleventy for the last. The webpage looks 100% better now! Now we have a blog. Thanks for reading!

Note: Every time you make a new post/update it, you will have to update it using the eleventy command.

I made my own blog using 11ty, 11ty base blog, and Bulma.

David — Fri, 06 Nov 2020 20:42:38 GMT

In one of my mirrored DEV posts, you may have seen that it was originally published on notebook.aboutdavid.me

That's my new blog that I have started. It's going to be more of a personal blog because my Hashnode blog is more developer focused.

Requirements

It is supposed to be simple, yet elegant
As less clicks as possible
No "sell your data" analytics.
Be able to easily setup (Like those easy "Deploy to Heroku" buttons)
Make it easy to write posts
Gzip and Brotli compression
Caching (ability to make website load faster/save bandwith)/Ability to work offline
Custom Emojis for cross-browser/device platform compatibility
Open Graph Images

Meeting those requirements

The simple, yet elegant part was easily solved by using the Bulma CSS framework with Webpack
The "less clicks" problem was just solved by putting all of the posts on one page. Just one click to see the content that you want!
The analytics problem was by using Simple Analytics. I've decided to make my analytics public so you can find them here!
The easy to set up problem was solved by having a _data/metadata.json where all of the config goes so I can easily modify it at any time
I made it easier to write posts by just using Markdown. That's seriously it.
Gzip and Brotli compression is actually very easy when you use http-server. It is also faster to start then using 11ty's built in --serve option.
Caching/Ability to work online was easily done by using a Service Worker.
Custom Emojis were solved by using Twemoji. You can easily set that up here
Open Graph Images can be made using vercel/og-image with a few changes. I made a fork of the repo and made those changes here.

Screenshots:

What I have learned:

For bigger projects that use webpack, you might want to use SASS as it is very easy to learn and include
Webpack can bundle so many different file types! Images, JavaScript CSS, SCSS, SASS, Handlebars, cjs, etc.
I learned more about Nunjucks because of 11ty.
I learned more about 11ty and how it works and how to use plugins.

You can see a demo of it here

Thanks for reading!

Cheat sheet for webpack's config rules

David — Thu, 05 Nov 2020 15:37:33 GMT

Webpack's config rules may seem complicated, but it really isn't! This is a simple "cheatsheet" that you can use for webpack's config.

Here is where you place the rules:

 module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/bundle.js",
  },
  mode: "development",
  module: {
+ rules: [],
  },
};

Your config does not have to look like the one above, I was just showing you where the rules go (in the module.rules array) and how it looks

JavaScript and JSON

Nothing is really needed for these two languages as webpack natively supports them

CSS/SCSS

You do need a few packages to import CSS and/or SCSS into webpack, but it works like a charm.

Install the packages needed with this command:

npm install postcss-loader style-loader sass-loader  css-loader --save

Then, insert the following rule in webpack.config.js under module -> rules:

{
    test: /\.(scss|css)$/,
    use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},

Images

Yes, you can use images in webpack. You will need to use the Assets modules rule functions.

Insert the following rule in webpack.config.js under module -> rules:

{
    test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
    type: 'asset/resource'
},

Fonts and SVG files

For this one, you need to use something inline assets

Insert the following rule in webpack.config.js under module -> rules:

{
    test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
    type: 'asset/inline',
},

Babel

Babel is a compiler for the next generation JavaScript, today. You can basically use newer JavaScript in older browsers like Internet Explorer.

Install the packages needed with this command:

npm i @babel/core @babel/preset-env babel-loader @babel/plugin-proposal-class-properties --save

Then, insert the following rule in webpack.config.js under module -> rules:

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: ['babel-loader'],
},

I actually made this cheat sheet for myself, but I decided to share it with everyone! Enjoy!

Using Glitch to develop apps with their real time IDE editor.

David — Tue, 27 Oct 2020 03:22:23 GMT

Now what is Glitch? Glitch is a Real-time IDE which saves as soon as you type. Now why Glitch over any other online IDE? Well, it's instant. Like really instant. As soon as you say, type the letter "h" it saves instantly.

Great, right? Another cool thing is you can make demos for you app and anyone can remix them and share them. For example, you can click here to get a express server running on your own custom domain. No account, no anything. Try it out!

Lets get into the developer stuff. We first need to know what we can use:

- CSS (Cascading Style Sheets)
- HTML(Hyper Text Markup Language)
- Ember.JS
- Ruby
- Ruby on Rails
- Python
- pip
- Java
- Rust
- C
- C++
- .NET
- Swift
- ClojureScript
- PHP
- Perl
- Haskell
- Elixir
- CPAN
- Racket
- JavaScript
- BuckleScript
- Lua
- Xen Text
- CoffeeScript
- EJS
- PUG
- Jade
- Deno
- Lisp
- Node.JS
- Bash
- Discord.PY
- Discord.JS
- Node Package Manager (NPM) (Inaccessible in the app terminal)
- Shell
- React.JS
- Draft.JS
- C# (C Sharp)
- TypeScript
- Vue.JS
- Gem
- Yarn
- Poetry
- Pipenv
- Nuxt.JS
- Svelte.JS
- Next.JS
- SQL
- Django (needs to be installed with pip3 install Django
- Flask
- Bottle
- Pysimplegui
- Web2py
- TurboGears
- uWSGI
- Twisted
- Tornado
- 11ty
- Binary

You can find that same list (and even more) here!. Now we can start developing. Write some basic code or make a major project.

What to do when you are done:

Share your work in the gallery. The forum members like to see awesome projects
Export to GitHub. This is actually pretty easy. There is a button called "Export to GitHub" under Tools->Import and Export. All you have to do is sign in with GitHub. You can also use the console (Tools->Console) and use git push https://github.com/user/repo main which might work better.
Share on twitter: Share your work on Twitter! You can also mention @glitch on twitter and they might see it too!

Fun Facts:

Did you know that every Glitch project is it's own Git repo? Yep, all you have to do to get the Git url is under Tools -> Import and Export -> Your project's Git URL. There you can click "copy" and get your Git repo URL!

Customizing my hashnode blog using the custom CSS feature

David — Sun, 25 Oct 2020 21:04:27 GMT

Today I decided to customize my hashnode blog using hashnode's custom CSS setting. Now if you know the basics of CSS, you can easily customize your own blog. In this article, I will show you how I customized my blog.

Note: Currently, you have to be an ambassador to use the custom CSS feature.

You can access the custom CSS feature in Dashboard -> Appearance -> Add Custom CSS

Custom header colors (All sections)

I chose a light and a dark theme color so they match the light and dark themes of hashnode.

In this case, I chose a light green for light mode and a darker green for dark mode.

This was done by using the "background-color" property.

.blog-header {
/* Light mode */
    background-color:#00FA9A;
}
.mode-dark .blog-header {
/* Dark mode */
    background-color:#66CDAA;
}

Before: Dark mode: Before: Light mode:

After: Dark mode

After: Light mode

Custom headers/underlines (Article section)

h2,h3,h4,h5,h6,b,u {
       background: linear-gradient(rgba(255,0,0,0) 60%,#66cdaa 40%);
}

Yay! But something isn't right:

The line is too wide, so lets fix by using display: inline-block;

h2,h3,h4,h5,h6,b,u {
    background: linear-gradient(rgba(255,0,0,0) 60%,#66cdaa 40%);
+  display: inline-block;
}

Sticky headers (Article section)

Not really that hard as position: sticky; property. I mainly added this feature because if you are reading a long article, you have to scroll all the way back up to toggle the theme/search for other articles.

.blog-header {
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 0;
}
.mode-dark .blog-header {
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 0;
}

There is no example of this because you are seeing the sticky header right now!

I've put all of the code on GitHub Gists.

Edit: I've decided not to do the custom headers until I fix a few things.

Making a portfolio using Webpack, 11ty, and Halfmoon

David — Thu, 22 Oct 2020 23:10:10 GMT

🛍 Resource Shopping/Setting up
📦 Webpack config
⚙ Setting up 11ty
👨‍💻 Coding our base templates
📄 Making the portfolio
🏭 Making it "production" ready
📔 Notes & Credits

🛍 Resource Shopping/Setting up

Ok, what do I mean by resource shopping? We go around the internet looking ("shopping") for resources (e.g. Bootstrap, jQuery plugins, etc) that we will use in our project. For this mini-project, I've chosen:

Halfmoon for our design
11ty to compile our base templates
Webpack to compile our assets (Halfmoon, Sticky Sidebar, etc)
style-loader & css-loader for Webpack so we can compile CSS

Lets install their NPM packages for Webpack so we can bundle them up:

npm i @11ty/eleventy -g -s
npm i webpack webpack-cli -s -d
npm i halfmoon style-loader css-loader

Note: Webpack 5.0.0-beta.1 and higher must use a node version higher than 10.13.0 (LTS). So, since I'm using Glitch to create this, I'm going to change in the package.json:

"engines": { "node": "10.x" }

"engines": { "node": "12.x" }

and add a .nvmrc (for netlify) with just 12.9.0. If you are not using Netlify or Glitch, then just make sure you have a higher version installed.

Ok, we have our node versions setup and packages installed, lets start with webpack.

📦 Webpack config

Projects that use a bunch of files probably should use something called Webpack. Webpack basically allows you to bundle your assets into 1 (or more) files for your browser. Pretty cool right?

Let's make a file called webpack.config.js with the following:

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  mode: 'development',
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};

This basically says "Bundle the file src/index.js into .dist/bundle.js" (oh and by the way, make the file src/index.js and the folder dist because we will need it in a moment)

In our src/index.js file, let's require our files/packages that we went over in Resource Shopping/Setting up with this code:

require("halfmoon/css/halfmoon.min.css"); // require halfmoon.css
window.halfmoon = require("halfmoon"); // require halfmoon.js
console.log("Webpack loaded!"); // Show in the console that the webpack bundle is loaded.

Now we can bundle them together! Just run webpack and it should bundle your stuff together! Your bundle should be in dist/bundle.js if you made it right.

That's all you need to do to bundle your modules together.

⚙ Setting up 11ty

This will be a shorter section because 11ty does not need any config to run.

Make a folder called _includes. Then in that folder, make a file called base.njk with the following:

html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
head>

<body>
{{ content | safe }}
<footer>

footer>
body>

That's right. .njk files (nunjuck files) use HTML! But, whats this {{ content | safe }} thing? Well, since _includes/base.njk is a layout, we can tell our pages (like index.njk) to use _includes/base.njk as a layout.

Now, we can make our index.njk file (which will be located at / when we compile it.) Lets just insert:

---
layout: base.njk
---
<h1>Hello!h1>

in that file. Before we run it, let's do some automation to make it easier for us to code our portfolio. In our package.json file add:

"scripts": {"start": "eleventy --serve --port=3000"}

to your file. Now you can visit your demo site at locathost:3000 (or just your regular domain if you are using Glitch). It should look something like this:

Yay! We have used successfully used 11ty layouts! One last thing: We need to make sure 11ty adds our bundle. So make a new file called .eleventy.js and add the following:

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("img");
  eleventyConfig.addPassthroughCopy("dist");
};

This tells 11ty to allow the img folder and the dist folder.

👨‍💻 Coding our base templates

Ok, lets get into the design part! Go back to our base layout and include our bundle:

<script src="/dist/bundle.js">script>

HalfmoonCSS, HalfmoonJS, and Sticky Sidebar should now be included in your webpage!

Now, why don't we add a navbar? Like many sites, this allows your users to easily navigate your site.

Add the following code to your _includes/base.njk file inside the "body" tag:

html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
head>
<body data-set-preferred-mode-onload="true">

<header>
<nav class="navbar" style="background-image:url('https://cdn.glitch.com/d4417ab9-7b55-405a-bfbf-6194880aa9f7%2Fmarek-piwnicki-bNnYAs5pXbw-unsplash.jpg?v=1603332064144');">
  
  <a href="/" class="navbar-brand">
    <img src="https://cdn.glitch.com/d4417ab9-7b55-405a-bfbf-6194880aa9f7%2Fninja-cat_1f431-200d-1f464.png?v=1603305812684" alt="...">
  a>
  
  <ul class="navbar-nav ml-auto"> 
    <li class="nav-item active">
      <a href="/" class="nav-link">Homea>
    li>
    <button class="btn btn-primary" type="button" onclick="halfmoon.toggleDarkMode();">🌙button>
  ul>
nav>
header>
{{ content | safe }}
<footer>
<script src="/dist/bundle.js">script>
footer>
body>

Hey! Did you see that 🌙 button? That's the darkmode toggle, which allows you to toggle on and off dark mode! It looks something like this:

Pretty cool right? You can trigger it yourself using:

halfmoon.toggleDarkMode();

📄Making the "portfolio" part

Let's get rid of the "Hello" header:

---
layout: base.njk
---
- Hello!

We can now make "about me" cards and show off our knowledge of certain skills.

For this part, we will be using:

Make a new file called "about.njk":

---
eleventyExcludeFromCollections: true
---
<div class="container-fluid" style="padding-left: 5px;">
    
        Who am I?
        
        My name is John Doe. I am a freelance web devoloper with many years of expierence. I also play the violin the my spare time.
        Skills
        HTML
        
            
        
        CSS
        
            
        
        Javascript
        
            
        
        Ruby

And add this to your main index.njk file:

{% include "about.njk" %}

this should include the about.njk file into the index.njk file.

You should see something like this:

You can add new skill bars by adding this:

<p>Skill Namep> 
<div class="progress"> 
<div class="progress-bar" style="width: value%" role="progressbar" aria-valuenow="value" aria-valuemin="0" aria-valuemax="100">div> 
div>

Alright looking good. We also want to show off our projects as any good web developer would do.

Make a new file called "projects.njk" and add the following:

---
eleventyExcludeFromCollections: true
---
<div class="container-fluid" style="padding-left: 5px;">
    
        Projects:
        
            Project one: Project description
            Project two: Project description
            Project three: Project description

Now we can modify our index.njk file to look like this:

{% include "about.njk" %}
+
+ {% include "projects.njk" %}

Great! Now we the about section and our project showcase. We now have a semi-portfolio using Webpack.

🏭 Making it "production" ready

Ok, let's make it production ready. Bascially, Polishing every thing up, doing some SEO, etc.

Changing webpack settings

The webpack bundle we made is huge! So let's tell webpack to remove extra stuff and compress the file. Go into the webpack.config.js file and modify it slightly:

const path = require("path");
+ const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
  entry: "./src/index.js",
-  mode: "development",
+  mode: "production",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
+  plugins: [new CleanWebpackPlugin()]
};

Oh and don't forget to install clean-webpack-plugin, which deletes your old bundle so no old data is stored.

npm i clean-webpack-plugin

You may now run webpack and you should now have a production ready bundle!

Improving SEO: Sitemap

Lets make a sitemap. This should allow us to submit the portfolio to Google easier (source):

---
permalink: /sitemap.xml
eleventyExcludeFromCollections: true
---

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{%- for page in collections.all %}
  {% set absoluteUrl %}{{ page.url | url  }}{% endset %}
  <url>
    <loc>https://{{ metadata.domain }}{{ absoluteUrl }}loc>
  url>
{%- endfor %}
urlset>

Improving SEO: Metatags

Metatags allow for website previews. They give your users a preview of your website without having to see it. Sort of like a "try before you buy" thing. You can easily generate some easily with metatags.io. They look like this:


<title>Demo portfolio: The portfolio of John doetitle>
<meta name="title" content="Demo portfolio: The portfolio of John doe">
<meta name="description" content="My name is John Doe. I have a bunch of experience with HTML, CSS, JavaScript and Ruby.">


<meta property="og:type" content="website">
<meta property="og:url" content="https://demo-portfolio-11ty.glitch.me/">
<meta property="og:title" content="Demo portfolio: The portfolio of John doe">
<meta property="og:description" content="My name is John Doe. I have a bunch of experience with HTML, CSS, JavaScript and Ruby.">
<meta property="og:image" content="[IMAGE]">


<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://demo-portfolio-11ty.glitch.me/">
<meta property="twitter:title" content="Demo portfolio: The portfolio of John doe">
<meta property="twitter:description" content="My name is John Doe. I have a bunch of experience with HTML, CSS, JavaScript and Ruby.">
<meta property="twitter:image" content="[IMAGE]">

Compressing your HTML

This is pretty easy to do. First install html-minifier with NPM:

npm i html-minifier

Add the following snippet to .eleventy.js:

const htmlmin = require("html-minifier");
eleventyConfig.addTransform("htmlmin", function (content, outputPath) {
    if (outputPath.endsWith(".html") || outputPath.endsWith(".css") || outputPath.endsWith(".js")) {
        let minified = htmlmin.minify(content, {
            useShortDoctype: true,
            removeComments: true,
            collapseWhitespace: true,
            minifyJS: true,
            minifyCSS: true,
        });
        return minified;
    }

    return content;
});

This tells 11ty to use html-minifier to compress HTML, JavaScript, and CSS files.

Looking good!

📔 Notes & Credits

In this tutorial, we used Webpack to bundle assets (a simple bundle at that), 11ty to make our portfolio, and Halfmoon for the main design.

Thanks to @khalby786 for making brockly, which made the browser-like previews.

Some snippets of code (such as the sitemap and html mimifier came from 11ty/eleventy-base-blog and the 11ty docs.

You can get a ready made version on Glitch by clicking here (make an account and edit the _data/metadata.json file)

You can see the demo here

Calculating Read time in JavaScript

David — Thu, 08 Oct 2020 20:03:33 GMT

Note: This blog was originally published on my website.

This is a very simple task. First, we need a sentence to try this out. Let's use "The quick brown fox jumps over the lazy dog". A few thing we need to know is:

The average word is 5 in the English dictionary.
The average Words Per Minute for reading (WPM) is 200-250, which averages to 225 WPM. (https://archive.is/FRfWJ).

So, we have to split the text every 5 letters and divide it by 225 WPM. This can easily be done with JavaScript:

"The quick brown fox jumps over the lazy dog.".match(/.{1,5}/g).length/225;

Which should return a value of 0.04. So are we done? No. We also need make it human readable. First we need to round to the nearest whole number by using Math.round() :

Math.round("The quick brown fox jumps over the lazy dog.".match(/.{1,5}/g).length/225);

Which should return 0. Now we are almost done. Let's make it human readable. We can give it summaries using if/else statements.

Lets use:

Less than a minute read - for read times under a minute.
n min read - for read times that are over a minute.

as statements.

var rt = Math.round("The quick brown fox jumps over the lazy dog.".match(/.{1,5}/g).length/225);
  if (rt <= 0) {
  rt = "Less than a minute read."
  } else if (rt === 1){
  rt = `${rt} min read.`
  } else if (isNaN(rt)){
  rt = "Failed to calculate readtime!"
  } else {
  rt = "Failed to calculate readtime!"
  }

which returns Less than a minute read.

Let's make it ready for "production" by wrapping it around a function and compressing it using JScompress. I put the source code on P2Pbin, which you can find here.

Why you should try IPFS

David — Sun, 04 Oct 2020 02:54:57 GMT

Today, I will try to convince you to at least try IPFS.

Integrity built in.

Let me explain the difference between content-based addressing and location-based addressing. This will help you understand how the integrity works:

Location-based addressing is where a client would know exactly where a file is.
Content-based addressing is where a client would ask what the contents of a file is, verifying the contents were not modified using a hash. So, unlike Location-based addressing (HTTP), it has more security.

Peer-to-Peer file storage

You can say goodbye to those servers hosting your data (such as AWS S3 and Google Drive) and say hello to Peers! What is a peer? Peers can be a client, and a server. They can replace servers if there are enough of them. Why peers instead of a server? If a peer goes down, other peers can give you the data you need. But if a server goes down, that data is gone until the server is back up.

A programmatic API.

Like many things, it has an API. From running a node (peer) on your web browser (js-ipfs) to interacting with nodes hosted on a user's computer (See their docs for their HTTP API).

Those were some things I wanted to talk about because not many people are willing to try IPFS. If you want to learn more about IPFS, you can check out the (many) links below: