DEV Community: David

A devlog about making a devlog, how fun :)

David — Sat, 04 Sep 2021 23:05:11 +0000

This is a post in a series called "David's Devlog" where I complain about developing stuff. Powered by Glitch and Node.js.

So, I wanted to make a devlog. Great for my portfolio about writting and web design. I chose dev.to as a place to publish and Glitch as a great place to write/host it. So I went to get started. I went to forem's article#createArticle API. I built something to fetch the API and got a 200, no JSON response. Weird.

I try running the script, changing API keys and everything. Still no luck. I tried appending /api/ to the URL. It worked.

I spend an hour trying to fix something that wasn't even broken. Typical me 🤦‍♂️.

Anyways, you can view the source on Glitch here. All you have to do is run "node publish POST_FILE". All posts are located in logs and use markdown-it to render it. It's licensed under the APGL 3.0 and if you use it, I'd appricate it if you credited me. Thanks.

What do you use as a journal/notebook?

David — Sun, 14 Feb 2021 22:13:42 +0000

I think everyone has somewhere to keep their journal. Maybe you write their thoughts, things you find, or keep something like a to-do list.

Normally I like to use Notion or Tiddlywiki. Sometimes octo.app due to it being a PWA and the ability to work anywhere/offline.

But, I'd like to know what you use.

JSONsite: Create a SPA with a JSON file.

David — Thu, 26 Nov 2020 02:55:11 +0000

I made something which allows you to create a website with one JSON file. Make a fork, add your URL and bam, A good looking site made with a JSON file. And all of it is hosted on Vercel with their amazing Uptime and CDN.

Sounds good and all, but how does it work?

JSONsite will get the JSON file from the URL provided
Then, JSONsite will start to parse that data, and passes it along to nunjucks
The outputted HTML from nunjucks will be minified
Your site will be ready at the slug you chose!

So basically this:

{
  "title": "John's Website",
  "description": "The amazing website of John Doe",
  "image": "https://cdn.glitch.com/1788ed8a-5cc6-45e9-a3b6-18d6457af699%2Fundraw_profile_pic_ic5t.png?v=1606325421049",
  "author": "John Doe",
  "theme": {
    "navbar_color": "dark",
    "jumbotron_color": "light",
    "footer_color": "light"
  },
  "pages": [
    {
      "title": "Main",
      "id": "main",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor urna nunc id cursus. Maecenas ultricies mi eget mauris pharetra et ultrices. Nunc consequat interdum varius sit. Suspendisse sed nisi lacus sed. Tempor id eu nisl nunc mi ipsum faucibus vitae. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Platea dictumst quisque sagittis purus sit amet volutpat consequat. Interdum velit laoreet id donec ultrices tincidunt arcu non. Et netus et malesuada fames. Ipsum faucibus vitae aliquet nec ullamcorper sit. Ultricies mi eget mauris pharetra et. Etiam tempor orci eu lobortis elementum nibh tellus molestie. Dolor sit amet consectetur adipiscing. Sed tempus urna et pharetra pharetra massa massa ultricies mi. Ac tincidunt vitae semper quis lectus nulla at. Odio ut sem nulla pharetra diam sit amet. Viverra adipiscing at in tellus."
    },
    {
      "title": "About",
      "id": "about",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Luctus accumsan tortor posuere ac ut consequat semper viverra. Pharetra magna ac placerat vestibulum lectus mauris. Scelerisque in dictum non consectetur a erat nam at lectus. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Gravida in fermentum et sollicitudin. Quam vulputate dignissim suspendisse in est ante in nibh mauris. Sit amet mauris commodo quis. Bibendum enim facilisis gravida neque convallis a. Quis imperdiet massa tincidunt nunc pulvinar. Leo a diam sollicitudin tempor id. Sit amet facilisis magna etiam. Pharetra sit amet aliquam id diam maecenas ultricies. Nulla at volutpat diam ut venenatis tellus. Eget lorem dolor sed viverra ipsum nunc. Lobortis scelerisque fermentum dui faucibus in. Amet cursus sit amet dictum sit amet justo donec enim. Posuere urna nec tincidunt praesent semper feugiat."
    },
    {
      "title": "Contact",
      "id": "contact",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue ut lectus arcu bibendum at varius. Hac habitasse platea dictumst vestibulum rhoncus est. Tincidunt vitae semper quis lectus nulla at volutpat diam. Eu non diam phasellus vestibulum lorem sed risus ultricies. Posuere lorem ipsum dolor sit amet consectetur. Mauris sit amet massa vitae tortor. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere. Diam volutpat commodo sed egestas egestas. Orci sagittis eu volutpat odio facilisis. Dui ut ornare lectus sit amet. Nisl vel pretium lectus quam id leo in vitae turpis. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. Arcu non sodales neque sodales ut etiam sit amet. Scelerisque purus semper eget duis at. Ac turpis egestas sed tempus urna et pharetra. Platea dictumst quisque sagittis purus."
    }
  ],
  "footer": "&copy; 2020 John Doe. All Rights Reserved.",
  "javascript": "console.log('Oooh look, custom JavaScript!')",
  "css": "/* You can put custom CSS here! */"
}

Will turn into this:

And, guess what, it's all on one page! And there are service workers for each page!

jsonsite / jsonsite

Create a simple website with a JSON file and have it hosted for free! Sites update every hour (at :00)

JSONsite

JSONsite allows you to take a JSON file and turn it into a SPA with mini pages Basically, you add your JSON file (you can put it on something like GitHub Gists or Pastebin) and JSONsite will fetch it an convert it into a full Website. Your JSON file could look like this:

{
  "title": "John's Website"
  "description": "The amazing website of John Doe",
  "image": "https://cdn.glitch.com/1788ed8a-5cc6-45e9-a3b6-18d6457af699%2Fundraw_profile_pic_ic5t.png?v=1606325421049",
  "author": "John Doe",
  "template": "default.njk",
  "theme": {
    "navbar-color": "dark",
    "jumbotron-color": "light",
    "footer-color": "light"
  },
  "pages": [
    {
      "title": "Main",
      "id": "main",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor

…

View on GitHub

GitME: A simple README generator for your profile or repo

David — Fri, 20 Nov 2020 18:13:43 +0000

So, I wanted to redo my GitHub README, because my old one didn't look so good, and I wanted my new README to be fancier, like displaying my blog posts, Get my latest commit, etc.

So, I made GitME. A very simple README.md generator. You can use EJS or Nunjucks (hoping to add more soon). You can take data (from like a API) and use it in your templates. You can find more about this here. I tried to make it something like 11ty's data files (in the _data folder) so people that used 11ty could easily use GitME and people who don't use 11ty can easily learn.

How does it work?

GitME will first compile all of the data into one object. Basically scanning the data directory and just merging the exported data into one object so you can use that data in your template file
GitME will read the file and give the data/file to the template engine
GitME will render the Markdown into HTML
GitME will push the rendered README to your repo.

It's just that simple.
Example: https://github.com/aboutdavid
GitHub repo (and more directions):

aboutdavid / gitme

GitME, the GitHub README generator.

What is GitME?

GitME is a README.md generator built with Node.js and Markdown, and you can render files using EJS, or Nunjucks You can get data from the data folder, such as making requests to an extenal API, generating random numbers, etc.

There are currently two files which the demo uses to set metadata and make sample icons that you can use in your README file, like the Node.js icon or the golang icon. You can fnd the full list of icons in data/icons.js.

How does it work?

GitME will render the README.md file, then, GitME will push the rendered README file to your repo using Node.js and GitHub actions.

How do you get started?

Click the “Use this template” on this repo.
Make the repo name Username/Username. For example, if your username is johndoe, then your repo would be called johndoe Note: If…

View on GitHub

Cheat sheet for webpack's config rules

David — Thu, 05 Nov 2020 00:00:00 +0000

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!

Making a portfolio using Webpack, 11ty, and Halfmoon

David — Thu, 22 Oct 2020 22:58:26 +0000

🛍 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:

<!DOCTYPE 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:

<!DOCTYPE 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">
<!-- Navbar: https://www.gethalfmoon.com/docs/navbar/ -->
<header>
<nav class="navbar" style="background-image:url('https://cdn.glitch.com/d4417ab9-7b55-405a-bfbf-6194880aa9f7%2Fmarek-piwnicki-bNnYAs5pXbw-unsplash.jpg?v=1603332064144');">
  <!-- Navbar brand -->
  <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>
  <!-- Navbar nav -->
  <ul class="navbar-nav ml-auto"> 
    <li class="nav-item active">
      <a href="/" class="nav-link">Home</a>
    </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
---
- <h1>Hello!</h1>

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;">
    <div class="card">
        <h4>Who am I?</h4>
        <img src="https://cdn.glitch.com/d4417ab9-7b55-405a-bfbf-6194880aa9f7%2Fwilliam-recinos-qtYhAQnIwSE-unsplash.jpg" width="225" height="150" />
        <p>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.</p>
        <h2 class="card-title">Skills</h2>
        <p>HTML</p>
        <div class="progress">
            <div class="progress-bar" style="width: 78%;" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <p>CSS</p>
        <div class="progress">
            <div class="progress-bar" style="width: 64%;" role="progressbar" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <p>Javascript</p>
        <div class="progress">
            <div class="progress-bar" style="width: 54%;" role="progressbar" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <p>Ruby</p>
        <div class="progress">
            <div class="progress-bar" style="width: 32%;" role="progressbar" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
</div>

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 Name</p> 
<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;">
    <div class="card">
        <h4>Projects:</h4>
        <ul>
            <li><a href="#"><b>Project one:</b></a> Project description</li>
            <li><a href="#"><b>Project two:</b></a> Project description</li>
            <li><a href="#"><b>Project three:</b></a> Project description</li>
        </ul>
    </div>
</div>

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
---
<?xml version="1.0" encoding="utf-8"?>
<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:

<!-- Primary Meta Tags -->
<title>Demo portfolio: The portfolio of John doe</title>
<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.">

<!-- Open Graph / Facebook -->
<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]">

<!-- Twitter -->
<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

🚀 Rocket11ty: A simple 11ty template with Halfmoon CSS

David — Mon, 19 Oct 2020 00:04:04 +0000

I used the blog system from 11ty/eleventy-base-blog because I'm really not that good with working with 11ty collections.

Features:

🦐 Automatic HTML Compression (can save more than 20% bandwidth)
📕 NetlifyCMS for writing blog Posts
🌙 Dark/Light mode and theme provided by Halfmoon
📊 Google & Facebook Analytics (only added if you add a tracking ID because, privacy matters)
⚡ Built-in caching so your users don't have to load pages over and over again.
📱 Mobile Friendly design
💻 Built-in PWA, all you have to do is change a few values and it's up and working!

Why?
I've seen many Blogs/websites that are:

Too overpriced
Websites that over-bloated with widgets, tracking, ads, etc.

So, I made Rocket11ty. A combination of Halfmoon CSS and 11ty/eleventy-base-blog.

URLs:
Netlify Demo
GitHub Repo

Calculating Read time in JavaScript

David — Thu, 08 Oct 2020 01:51:48 +0000

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 +0000

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 s 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:

P2Pbin: A peer to peer paste sharing site with no servers.

David — Wed, 30 Sep 2020 03:50:32 +0000

P2Pbin

You heard that right, no servers.

How does it work? ❓

A user will type (or paste) some text or code into an input box. It will be cached, but not saved. Then, when the user clicks "Copy", the text is "pinned" (basically saving their paste).

It is currently deployed to Vercel and Glitch.

Features 🌟

Simple: Only 3 buttons: Copy, Load, and Reset.
Intergity: IPFS uses hashes, so one letter change will change the hash entirely.
Mobile Ready: Design for mobile, and is also a PWA, so it can be install/act like an app on many devices.
Serverless: It was built with JAMstack in mind, so it can easily be deployed to sites like Vercel (a.k.a Zeit) and Netlify.
Free & Open Source: It is licensed under the CC BY-SA 4.0. Also, the full source code can be retrieved from https://github.com/aboutDavid/p2pbin or https://glitch.com/edit/#!/p2pbin.