DEV Community: Koa

Creating a basic blog with Eleventy and Netlify CMS completely from scratch

Koa — Fri, 24 Apr 2020 23:46:18 +0000

Eleventy is a powerful and wonderfully simple static site generator. Netlify CMS is a simple, open-source content management system that makes adding, editing and deleting posts and other content a breeze. Today I'm going to show you how to create a basic blog using eleventy and Netlify CMS, entirely from scratch- no boilerplates, no templates, no nothing. Be aware that this tutorial will create an absolute bare-bones text blog for you to build upon- I'm not even adding CSS! Let's get to it.

Part 1: Setting up

Requirements:

Node.js and NPM installed
Git installed
A Git provider such as GitLab or GitHub
A free Netlify account

First, there're some things we need to get set up before we begin coding. First, create a git repository on your preferred service (I use and recommend GitLab) and clone the empty repo to your computer.

Enter the project root with your terminal and install eleventy by typing npm install @11ty/eleventy --save-dev. Once that is done, install luxon by typing npm install luxon. Luxon is the only special addition here and will allow us to format readable dates in our posts.

Create a new folder in the project's root and name it _includes. This folder will contain templates that our blog will use to render pages. Create another new folder in the root directory called images and another inside of that called uploads. Netlify CMS will use this folder to store images uploaded to your site. Create yet another folder in the root of your project called admin and finally, a folder in the root named posts. Once that's done, we're ready to start coding!

Create a file in the root of the project named .eleventy.js and write this in:

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy('images')
  eleventyConfig.addPassthroughCopy('admin')

  const {
    DateTime
  } = require("luxon");

  // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
    eleventyConfig.addFilter('htmlDateString', (dateObj) => {
      return DateTime.fromJSDate(dateObj, {
        zone: 'utc'
      }).toFormat('yy-MM-dd');
    });

    eleventyConfig.addFilter("readableDate", dateObj => {
    return DateTime.fromJSDate(dateObj, {
      zone: 'utc'
    }).toFormat("dd-MM-yy");
  });

};

The eleventy.js file is a configuration file. The addPassthroughCopy lines tell Eleventy to include those folders and their contents in the generated site. The rest is just some JavaScript to make the dates in the postslist more readable.

Now create another folder within _includes named layouts. Within that folder we can create a new file called base.njk. The base file forms the basis of every page on our website. We'll add add <head> elements and a site header here. Any element that should appear on every single page should reside in base.njk. Let's add the following to the file:

<html>
  <head>
    <title>Eleventy + Netlify CMS from scratch</title>
  </head>

  <body>
    <h1>
      Eleventy + Netlify CMS from scratch
    </h1>
    {{ content | safe }}
  </body>

</html>

Like I said: Bare bones. Note the line that says {{ content | safe }}: this is where page content for other pages will be rendered.

Now, create a file named index.njk at the root of your project. This will be your homepage. Add the following to index.njk:

---
layout: layouts/base.njk
permalink: /
---
Hello! Welcome to the Eleventy + Netlify from scratch homepage.

Our Nunjucks (.njk) files will accept html, markdown and more. Between the sets of hyphens lies our page's frontmatter. This data tells Eleventy how to handle our page and provides other information as we need it to. layout tells it which template to use, in this case base.njk whilst permalink tells it what the URL for this page will be (in this case, /, or the homepage). Anything under the hyphens will be used as the main content on the page. You can use text, markdown or html to create the body. In this case I simply use a line of text.

Now open your terminal back up and run this command:

npx eleventy --serve

If your website doesn't open automatically, browse to localhost:8080 and you should see our homepage!

Part 2: Blog posts

Let's add a page that will be used for blog posts next. In the _includes/layouts folder, add a new file called post.njk. We'll come back to this in a minute, but first let's create a basic blog post. In the posts folder, create a file called posts.json and add the following:

{
    "tags": "posts"
}

This will ensure that every post in this folder has the correct tag attached. Now add a file in the posts folder named my-first-post.md. Even though this is a markdown file, we will still add some frontmatter here. Add the following code to my-first-post.md:

---
layout: layouts/post.njk
title: My first post
description: The first post on the Eleventy + Netlify CMS from scratch blog
date: 2020-04-18
featuredImage: /images/uploads/image1.jpeg
---
Hello, here is the body of the post.

Let's take a look at our frontmatter:

layout tells this post which template to use, in this case layouts/post.njk
title is the title of the post
description is a short description of the post
date is the date the post was written
featuredImage is an image for the post. Drop any image you want into images/uploads and use its path- mine is image1.jpeg

Again, anything underneath the frontmatter will be the blog post content. Note that we won't be creating posts like this in future since the Netlify CMS will take care of it for us!

Now that our post is ready, lets render it. Add the following to _includes/layouts/post.njk:

---
layout: layouts/base.njk
---
<h2>{{ title }}</h2>
<h3>{{ date | readableDate }}</h3>
<img src="{{ featuredImage | url }}" alt="{{ featuredImage }}"></img>
<p>{{ content | safe }}</p>

Our post page uses the layouts/base.njk template and renders blog post data in its body. We use double brackets {{ }} to refer to data in the post's frontmatter. In the case of my-first-post.md, the {{ title }} will end up being My first post, which we provided in the markdown file. Eleventy will create a blog post page for every markdown file in the posts folder. Neat!

We now have a working blog, but no way to see the posts. Let's fix that by adding a new file in the _includes folder called postslist.njk. This file will use a For Loop to create a list of all of our posts. Add this to the file:

<ul>
  {% for post in postslist %}
    <li>
      <strong>
        <a href="{{ post.url | url }}">{{ post.data.title }}</a>
      </strong>
      -
      <time datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
      -
      <span>{{ post.data.description }}</span>
    </li>
  {% endfor %}
</ul>

With the above code, Eleventy searches for every post in a variable called postslist and renders the title, date and description of each. To create the postslist variable, create a new file in the root of the project called posts.njk:

---
layout: layouts/base.njk
permalink: /posts/
---
{% set postslist = collections.posts %}
{% include "postslist.njk" %}

This file populates the postslist variable with every post that has the tag posts. Earlier we created posts.json to take care of the tagging for us! If all is well, you can now browse to localhost:8080/posts/ to see your list of posts! Feel free to add a couple more posts as .md files in the posts folder to see how they show up.

The very last thing to do with the blog portion of our website is to go back to index.njk at the project root and add this line at the bottom:

{% set postslist = collections.posts %}
{% include "postslist.njk" %}

The includes keyword basically embeds the file into the current page- we're rendering postslist.njk inside the homepage, which now shows your post list as well!

Whew! We're done with this part. Go over to your terminal and push the changes to your Git repository.

Part 3: Netlify CMS

Now it's time to set up the Netlify CMS. First we'll have to get our website hosted with Netlify. Login to Netlify and click New site from Git. Login with your Git provider (I use GitLab) and authorize Netlify to access your repositories. Select your repo from the list. Under Basic build settings, set the Build command to npx eleventy and the Publish directory to _site. Click Deploy site.

After your deploy completes, you will see a link (ending with .app) that will take you to your live blog.

In the menu above your site URL, click Identity.

On the Identity screen, click Enable Identity. After it's enabled, click Settings and usage and find Services. Click Enable Git Gateway. Sign in again if prompted.

In the above steps we have successfully created a live website with Netlify. We also enabled Netlify's Identity feature which will take care of authentication and accounts for us. Finally, we enabled Git Gateway, which is an API that will let the Netlify CMS commit changes to the git repository without needing to re-authenticate or give anybody access to it directly.

Back in your project, create index.html inside the admin folder. In this file we will add some basic HTML provided by Netlify which loads the CMS UI and authorization widget:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>

Create another file in the admin folder named config.yml. .YML files rely on accurate indentation. Be sure to use spaces to indent, not tabs! First, we will enable the Git Gateway API by adding the following:

backend:
  name: git-gateway
  branch: master # Branch to update

Now we'll point to our images/uploads folder, which is where pictures uploaded from the CMS will be stored, however since Eleventy stores our static site in the _site folder, we also need to add a public folder too. Add these lines underneath branch: master, making sure the lines are not indented:

media_folder: "_site/images/uploads"
public_folder: "/images/uploads"

The last thing to do is to create a collection for our posts. We'll use the config.yml file to create this collection, and it will match the frontmatter we set in our post markdown files earlier. Add this under the media_folder: line we just created:

collections:
 - name: "posts"        #The name of the collection and should match our posts.json file's tag
   label: "Posts"       #The name of the collection on the CMS itself
   folder: "posts"      #The folder that our blog posts will be loaded from and saved to
   create: true             #Tells the CMS that new posts can be created
   slug: "{{year}}-{{month}}-{{day}}-{{slug}}"  #this sets the URL for the post
   fields:
      - {label: "Layout", name: "layout", widget: "hidden", default: "layouts/post.njk"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Description", name: "description", widget: "string"}
      - {label: "Date", name: "date", widget: "date", default: ""}
      - {label: "Post Body", name: "body", widget: "markdown"}
      - {label: "Featured Image", name: "featuredImage", widget: "image"}

Let's explore the fields section. Notice that each field matches the frontmatter of our my-first-post.md file. Let's also explore each part of each line:

label is the name of the field that will appear in the CMS
name is the name of the field, it must match the frontmatter exactly
widget tells the CMS which widget to display from a selection. string is a single line of text and others are available, listed here. markdown is generally used for the post content.
default sets a default value for the field

A full explanation of the collections section can be found here. A collection doesn't have to be for posts only- you can add one for individual pages or even individual datasets. That is beyond the scope of this article, however.

The last thing to do is to return to layouts/base.njk and add this line and add it before the closing </head> tag:

<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

In the same file, add this before your closing </body> tag:

<script>
    if (window.netlifyIdentity) {
      window.netlifyIdentity.on("init", user => {
        if (!user) {
          window.netlifyIdentity.on("login", () => {
            document.location.href = "/admin/";
          });
        }
      });
    }
  </script>

Great news: You're pretty much done! Save, commit your changes and push your project. Wait for the deploy to complete (make sure your commit says Published in Netlify under Production deploys) then go to your website's url. Add /admin to the url and you'll be transported to the login screen! Log in and you'll be taken to the Netlify CMS backend where you can create and edit posts and upload media! Please be aware that posts added via the CMS can take a few minutes to appear after you submit them. Netlify will re-deploy your site when a new post is added!

This tutorial was a very quick and crude integration of Eleventy and Netlify CMS, however it should help you to understand how the two connect, rather than using a boilerplate or template blog, which can easily be too cluttered from the get-go. I hope that this tutorial was helpful in showing you how you can build a simple blog with a back-end editor with very little time and effort. I encourage you to play around with frontmatter, different collections and pages. Please reach out to me on Twitter @koabrook with any questions or feedback, as well as to show you your attempts!

Resources

11ty.dev
Netlify CMS
Eleventy Base Blog: Provided the starting steps for my journey with Eleventy!

Moving web development from Windows to Linux: Key tips?

Koa — Wed, 15 Jan 2020 00:46:52 +0000

I've been a Windows user for as long as I've used computers. I've also been a Windows hater for that amount of time. I'm no stranger to Linux and always have a linux machine to hand for various tasks and tinkering but I've never actually moved my workload over to it.

Well, I've decided it's time to give the big W a big fat L and go full-time with Linux. I'm using a soft distro called Elementary OS which is based on Ubuntu 18.04. I've been tinkering away all day and I'm very happy so far. Now it's time to dive into my web development setup. I've install my usual suspects like node, Atom, a Markdown editor and such, but I'm wondering: How do I take my Linux webdev station to the next level?

What are some of the key packages, software and tweaks that will send my web development into orbit?

Quick-fire tips for making a better web experience for Featurephone users

Koa — Tue, 31 Dec 2019 18:13:15 +0000

I've recently been exploring the emerging web experience thanks to Kai OS, a new breed of internet-connected feature phone. In emerging markets, hundreds of millions of users are now getting connected to the internet for the first time. Unfortunately the internet is quite a chore to browse on micro-browsers and tiny non-touch screens.

Right off the bat, I've come up with a few tips to make browsing on a tiny Kai OS device more bearable. These aren't your typical mobile standards!

Lose the header and title your page

That's right, my first unusual tip is to totally lose your site's header in favour of the site's title which is shown permanently on the address bar. Perhaps a little extreme, but your logo alone might take up over half the screen in some cases! If you really want to keep a header, try to make it as small as possible, preferable no larger in height than one line of test. Also lose the image and make it text if possible.

Turn your hamburger menu back into text-links

The less clicks needed to navigate your site on Kai OS, the better. I propose ditching the hamburger menu on micro-sizes and opting for plaintext links instead. Keep the text small and allow only up to three links per row.

More scrolling is better than more clicks

Hide images behind links

You want your page to consume as little data as possible to be considerate of data rates in developing countries. Hide your images behind plaintext links and don't load them until they're requested. This also makes your page more scrollable and easier to navigate.

No fixed content, ever.

Ditch your fixed header and footer- these will make your site completely, utterly unusable on tiny screens. Your viewport is already miniscule so every pixel counts!

Avoid pop-ups entirely

Pop-ups are the bane of micro-web-browsing. Some websites, even W3Schools, are impossible to navigate because there is a pop-up that obscures the screen. Hopefully, as the OS matures its browser will allow a better mouse-like cursor so we can close pop-ups.

Give pop-ups big close buttons

If you can't avoid a pop-up or modal, at least give it a big close button, preferably at the top where it's easy to reach.

Those are my first quick-fire tips for creating bearable web experiences on Kai OS and other internet-connected feature-phones. Developing websites that offer a decent experience on these devices is a challenge, but we shouldn't disregard this massive group of new users who are diving into an internet that is quite inaccessibile already.

Three inspirational developer websites at 240 x 320 px

Koa — Fri, 27 Dec 2019 19:20:34 +0000

A hundred million new internet users are coming online in the developing world thanks to the advent of low-cost, internet-connected featurephones such as those running on KaiOS. For the first time ever, users are taking their first steps into the internet on screens as limited as 240 x 320 resolution. Unfortunately their browsing experience will be marred by biased standards of the modern web. As a kind of tribute, I want to highlight five excellent examples of developer websites whose designs scale perfectly down to minimal screen sizes.

Zoe Chew: whizzoe.com

Zoe's website is the pinnacle of a modern developer website. Taking a single-column approach, her website scales flawlessly down to our minimum resolution without a single thing out of alignment and not a pixel of horizontal scroll is needed. A text-first, image-lite experience means that loading is lightning fast and there is plenty of content to consume on the homepage alone.

Franco Scarpa: francoscarpa.com

Franco's site is as minimal and text-centric as it gets with a uniquely vibrant colour scheme, darkmode toggle and fully responsive design. Franco's website loads lightning fast and is user experience first with no tracking cookies, analytics or third-party integrations.

Lyndsey Scott

Lyndsey is rightfully a legend around these parts and her website is nothing short of cosmic. It's a much more maximalist style with plenty of media content and fancy animations that somehow renders absolutely perfectly down to our minimal screen resolution. Not a pixel is out of place on any page even at a tiny screen size!

Do you know any developer websites which adapt perfectly to minimal screen sizes? Let me know down below!

Is the future of the web text-centric?

Koa — Fri, 27 Dec 2019 18:34:51 +0000

I've been thinking a lot recently about how... well... I just don't really like the Internet right now. The constant bombardments of ads, rich media content like auto-playing videos and constant social media pressure causes the Internet to be an honest chore to navigate. We can all agree that especially the mobile web experience is severely obtuse right now. There's such an importance placed on responsive design and yet our modern web design philosophies seem to work directly to the contrary.

Additionally, the overly data-heavy modern web is completely biased toward developed countries and high-powered devices. In countries where expensive devices and data plans are impossible to afford, Internet-enabled feature phones are barely able to keep up. Some hundred million new Internet users are making their first steps online into a connected world that is already 20 years ahead.

Finally, the P2P distributed web keeps growing in both conceptual importance and usability despite bandwidth bottlenecks and other technical limitations.

A few questions

Here are some theoretical questions borne from the cluttered nature of modern websites:

Is it viable to continue to adapt modern web philosophies from 240PX-width feature phones to 1080p monitors to 4K TVs?
Is it viable to create UX that adapts from mouse and keyboard to T9 to screen-readers and more?
Should websites look completely different between mobile and desktop layouts?
How much "in the way" is really acceptable (in-line images, PIP videos, pop-up ads)?

A path forward inspired by the past

In my opinion the solution to many of these problems is a shift away from a media-first Internet to small, low-bandwidth, lightning fast text-first websites. In fact, the trend among many developers and websites these days is largely text-content first. Text-based websites are fast, automatically flexible, easy to develop and maintain and force you to be creative.

Modern styling options mean that text can be beautiful and unique
Text is infinitely scalable with no loss of quality
Adapting text content to various screen sizes takes almost no work at all
Text content loads quickly

This is my take on the future of the web. I believe we'll see more websites, especially personal sites, moving away from huge frameworks with bright colours and flashing images and more toward simple layouts and text-centric content approaches. This will definitely change the way I develop sites, but how about you? What's your vision for the modern web going forward?

I'm a Doer. How do I become a Knower?

Koa — Mon, 23 Dec 2019 13:28:49 +0000

Recently I've been lucky enough to score some interviews for coding jobs (specifically front-end web development) but I've hit the same roadblock every time.
I'm a Doer. This means that I can have an idea for a website, app, etc. and just do it- I can work out how to build a blog with Netlify CMS or make a WordPress Plugin or a fancy CSS animation. Typically this involves google and a lot of trial and error.
The problem is that I'm not a Knower. I don't typically know how things work. I know how to make them work, or at least I can tinker until they do, but ask me or god forbid, whiteboard me and my knowledge always comes up short. Way short. My first technical coding interview was a disaster where the solution ended up being a single line of code and a basic math problem. I've been asked "explain what a [struct/interface/doohicky] is and I don't know the answer.
How does one bridge the gap between "I can do this" to "I know how to do this"? What's the best path forward for the Doers among us who need to build our Knower knowledge?

Is a design overhaul a failure if you need to offer a toggle?

Koa — Mon, 09 Dec 2019 18:45:50 +0000

Iterative UX design is a staple of the modern web and every few years it seems like our favourite services get a substantial UI update. I've noticed that nearly every time a big UX update comes out, a toggle to switch between the old design and new is included or even demanded for by users. So, do you think a UX redesign that needs a toggle is a failure, or are users always going to want the old version back for a while after launch? Is a staged rollout or beta access the best way to slowly introduce such an update?

So you're considering taking a salary in bitcoin

Koa — Wed, 04 Dec 2019 02:01:40 +0000

Many startups, especially those in the Crypto space, are offering salaries paid in bitcoin. You might be wondering what it's like to get paid in bitcoin, how to handle cashing out into "real" money (or Fiat) and anything else you should expect. I'm here to answer some of your questions!

Why would an employer pay me in bitcoin?

This is an incredibly important question and it's worth looking into why the potential employer wants to pay in bitcoin. Most of the time there are logical reasons, for example if the company is ICO-funded (as in, its entire holdings or a large part of them is crypto) or they are making payments to international staff cheaper. Both of these are logical and aren't anything to worry about. There might also less legitimate reasons including tax avoidance. That said, it's highly doubtful a licensed company hiring staff would be doing anything under the table... I hope. Make sure you understand the reason why the company wishes to pay in bitcoin, just to be sure.

Why would I accept a salary in bitcoin?

You reasons may vary. Perhaps you're travelling and want to pay out to domestic banks all over the world. Perhaps there's not a reliable banking infrastructure available to you so P2P bitcoin-to-fiat trading is an advantage. Perhaps you have a nest-egg to live on and just want to lock your bitcoin away and await the prophesied "moon" (skyrocketing price). Maybe you just hate banks and want complete sovereignty over your money? These are all valid reasons to accept bitcoin.

What are the disadvantages of getting paid in bitcoin?

Security
- When you receive bitcoin into a wallet you own, it's absolutely, positively your responsibility to keep it safe and secure. You must use a hardware wallet and privacy software like a good firewall. In fact, I would recommend using a hardware wallet and a bootable installation of Tails OS for all your bitcoin handling.
- To receive bitcoin, you provide your employer a public wallet address. This is kind of like an open deposit box for receiving bitcoin. If your employer deposits your bitcoin and for some reason you lose access to the wallet, your paycheck is as good as gone. Similarly, if you provide the wrong deposit address, say goodbye to your money.
Price volatility
- Bitcoin's price fluctuates an incredible amount in any given day. I'm "lucky" enough to only have lost around $150 in a single paycheck simply because of the time it took between receiving my bitcoin and selling it which was around two hours. On the other hand, sometimes I gained a little extra.
Risk, reward and temptation
- It is far too easy to fall into a trap of holding onto your bitcoin paycheck in hopes of an advantageous market instead of just paying out to fiat right away. This is how you lose money.
Scammers
- Here's a cold, hard truth from my heart. In the last year I was scammed out of two pay checks equalling around $4000 on LocalBitcoins. One used a Paypal scam, the other a reversed bank deposit. I may never get this money back- bitcoin is too infant for most lawyers to care and too taboo for banks to go near. Without the proper education from your employer and preferably a payroll service, you might find yourself in similar situations. To say that my life and financial situation has changed drastically because of this would be a massive understatement.
- There's another side to this as well- even reputably exchange platforms (such as the infamous Cryptopia) are getting hacked and shutting down left and right. The realistic likelihood of getting any of your money back after a hack or scam is absolutely, positively 0 and if you do, well, you might want to start believing in miracles because you just experienced one!
Banks and financial insitutions will hate you
- Never in my life have I had my bank account frozen, or been banned from a payment platform until I started using bitcoin. I've had two bank accounts frozen, my Paypal completely banned forever and Transferwise issued me a stern warning (immediate, permanent ban) when I simply asked if I could receive a deposit from a licensed bitcoin exchange. Now they freeze my account and investigate every single transaction I make on my account, even a $20 tip I sent to a friend using my TW account. Trust me- banks hate bitcoin. Be absolutely sure your services are okay with bitcoin. I recommend calling anonymously and asking about it. I've been okay with HSBC and Monzo after numerious KYC sessions and phone calls.
Taxes
- Be prepared to file the most annoying tax assessments in the universe. You'll definitely need a tax accountant to help you with them.
Community
- In my experience (and I apologise in advance for any offense caused) the crypto community is absolutely abysmal. There are a few good eggs and little corners online but overall the space is extraordinarily toxic.

How to handle getting paid in bitcoin

Ask your employer for educational resources- a course or guide on how bitcoin works and how to receive and pay out your salary. Read various blogs about safely holding and trading bitcoin and make sure you know exactly what you're doing before you start. Encourage your employer to use a bitcoin payroll system such as Bitwage and to provide you with a hardware wallet such as a Trezor.
Pick a licensed, trustworthy exchange that pays out in Fiat if possible- Coinbase Pro and Binance are two such platforms. Wherever possible, avoid P2P trading because they are rife with scammers, from Paypal reversals to literally getting beat up on the street during face-to-face trades. Ideally you want to stick with the same platform (or if you have to use P2P, a credible, consistent partner for all your trades). Do a few small test withdrawals to make sure you understand the receive > convert > payout flow of your new paycheck.
Ensure you have records of your paychecks, like invoices, so that you know what you're getting from your employer and can track your income. Remember- there're no banks or paystubs here to help you so you need to keep track of everything yourself!
Before you provide a wallet address be sure to double, triple and quadruple check that you have access to the wallet in question, the wallet is secure and the deposit address is completely correct, digit-for-digit. Always copy-paste the public wallet address and still read it over several times to ensure it's correct.
Check bitcoin's going rate at the time your paycheck was sent against your expected amount. As an example, let's say your salary is $3000 a month and you get paid 2.7 bitcoin for your November paycheck. For simplicity's sake let's say one bitcoin was worth $1000 the moment you got paid. Your salary is $3000 a month so you would expect to get exactly 3 bitcoin, so why did you get paid 2.7? It's very important to keep an eye on this and point out any discrepencies to your employer, just like you would with a normal paycheck. The amounts can be trickier to work out and issues like this might fly under the radar.
Keep your own records of every single transaction ID that flow through your wallets for accounting purposes
Have a tax accountant who knows bitcoin
Have a fair amount of savings for a disaster scenario. I'd say three or four paychecks worth in cash and a few different banks just in case one gets frozen.

Should I take a job that pays in bitcoin?

If you think the offer you've received is worth the trouble and you want to work in the futuristic crypto space with cutting-edge fintech platforms, then give it a try! If you know how to handle bitcoin with confidence, you shouldn't have any issues.
Now for my personal opinion: I will never, ever take a job that pays crypto again. Regardless of the scams that very nearly cost me my life, getting paid in bitcoin simply amounted to colossal pain in the butt. Price fluctuations, long transfer times, bank freezes and endless ID verification turned my paydays into a time of anxiety, worry and stress instead of a joyful occassion to order many pizzas. Whereas I find bitcoin to be very interesting technology in concept, the availability of support and services just isn't mature enough and employers don't seem to be doing enough to facilitate end-to-end crypto payroll. My job itself was great and I enjoyed it very much, but I would not take it again. Perhaps if the pay was absurd, like six figures, I might consider it but for now it's good ol' "trustworthy" numbers-representing-unbacked-currency for me.

Elevasion: Minimising scope and literally changing the game

Koa — Wed, 27 Nov 2019 23:48:50 +0000

A while ago I released a game named Elevasion. It was created in Yoyo Games' Game Maker Studio (exclusively GML) over a week or so. The game has a ZX Spectrum-esque visual style and twitchy, rapid gameplay.

Platformer engine

Elevasion started life as a platformer. I had been playing the wonderful Ristar for SEGA Mega Drive at the time and was inspired by the fourth level, Planet Sonata. As you progress through the level, the denizens of the world join in with the music, forming a fantastically compressed choir. A similar mechanic with additive singing can be found in the equally amazing LocoRoco for PSP.

Anyway, my idea was to follow Ristar's lead and make a slower platformer in which defeating enemies would add voices to a digital choir in the game's background music. I built a simple pixel-platforming engine in GML with the basics- running, jumping, wall-jumps and platforms and felt good about my progress. I encountered my first problem early on though...

I don't do music

No really, I tried it before. Once again, I cracked out the trusty Bosca Soleil and tried to put together some basic melodies but unfortunately my tone-deaf ears only created what my partner and I call "Shem Music". Obviously with my lack of musical prowess and no budget for a musician, I couldn't achieve my game's basic concept. I had to readjust my idea into just a simple Mega Drive-style platformer instead.

Level design

My second challenge was before me- I had a platforming engine, but now I had to come up with appealing level designs to match it. At this point my game still had what we in the industry call "Shem Art" which made the slower platforming I had implemented rather boring and dull compared to a bright, frenetic game like Ristar. It was difficult to gauge how the game would feel without any basic graphics to work with. As I tried to work on some levels, I increased the speed of everything to make up for the lack of visual excitement. This changed the overall feel of the game once again. By this point, just a few days of deleted content later, I was already feeling overwhelmed by the incredible scope of having to create so many levels, mechanics and gimmicks, let alone graphics and music. I had never intended for it to be a long project and I knew I had to either change the scope or kill the project.

Minimising

I really liked the engine I had built. It was simple but effective and increasing the speed made it feel quite chirpy. The jumping especially had a heavy feeling that I really liked. I decided I would minimise the project as much as possible and the cuts began:

The graphics were reduced to tiny sizes and a very limited colour pallette (inspired by the amazing Rock Boshers)
The mechanics were reduced to simple running, jumping and wall sliding
To facilitate the wall-sliding mechanic, I set the game within a very narrow playing field. A fast-moving elevator set the speed for the fast-paced gameplay perfectly
In place of enemies (and potentially AI) I added falling debris for the player to avoid

Adding depth

Now that I had a basic game involving avoiding falling debris, I wanted to add some kind of mechanic to add some depth. Since there was almost no need for the wall-sliding and jumping in the gameplay yet, I built a simple multiplier which was earned by jumping over debris. More points were gained for jumping over several objects at once. Suddenly the player was encouraged to move up the wall and jump over falling obstacles. A perfect and simple risk vs. reward gimmick! In addition, I had the player colour change randomly every time a new game was started. Just a small detail to make every playthrough a little different. The pink robot is definitely the canonical colour though.

Final thoughts

Elevasion turned out to be a completely different and much smaller game than it was at its inception, which is often the case, especially for starting-out game devs. It's very important to understand realistic scopes from your projects. A gutted, smaller release is always much better than an unfinished one. Don't be afraid to go "too small" and build up from there and definitely don't get discouraged if you find even something "simple" to be out of scope. Once you feel a pang that there may be too much, it might be good to step back and look at the bigger picture. Just level design alone could take months.

In the end, I actually love how Elevasion turned out. It has plenty of character and is the definition of a complete package with no loose ends, game-breaking bugs (that's a challenge) or any sense of missing content. Except a mobile version. Why on didn't I port this to mobile? The world will never know and neither will I.

JustBreathe.xyz - Taking the anxiety out of guided deep-breathing

Koa — Mon, 25 Nov 2019 14:06:00 +0000

There are a myriad of deep-breathing applications and websites out there that aim to alleviate stress, anxiety and improve overall well-being. Deep breathing can be a complex topic and most solutions out there provide a large number of options, settings and instructions depending on what the users want to achieve (for example calming anger, qualming an addictive urge, getting to sleep). Even worse, some apps have ads, videos and pop-ups.
As someone who has witnessed panic attacks, I wanted to create a deep-breathing app that removed the jargon and complication and would help a user in the midst of a panic attack to breathe calmy, slowly and deeply. Hence, JustBreathe.xyz was born.

JustBreathe is an ultra-minimalist web-app that works on desktop and mobile browsers. On the technical side it's made in basic HTML, CSS (including transitions) and a little JS. The code is as simple as the app itself. I chose a gentle, neutral colour-scheme and an expanding-circle visual cue. The app has three settings- shallow, medium and deep (all of which follow researched deep-breathing timing) which are activated with a simple button press. Outside of this, there are no sounds, no complicated settings and nothing to distract the user from just breathing.

By saving the JustBreathe web-app to their homescreen, a panicking user can simply hit the icon and start controlling their breath immediately. No noise, no jargon, no guided tour, just simple deep breathing. The absence of clutter is incredibly important and I hope that JustBreathe.xyz solves the problem of complicated apps being too much for a panicking individual in the midst of an attack.

MVP to V1: Creating my portfolio website with React and the Airtable API

Koa — Sun, 24 Nov 2019 18:06:04 +0000

I created a personal website while on a business trip back in July 2019. It was thrown together in a couple of days using plain HTML and CSS and a pretty okay visual design. Now that I'm in the job market again and finally looking to jump into development professionally, I wanted to remake my portfolio website with a little more pizazz.

I had a few requirements for this:

I would start with an MVP and build upon it
It had to be made in code, not with a website or blog builder
It must be modular with the ability to add new projects with as little code as possible
The website itself should contain a simple list of my projects

MVP

With my requirements set, I took to creating an MVP product. Since the website would be a list of my projects, the MVP was also a simple list of my projects publicly available online. I used Airtable for this. Check out the MVP here.

One of the great things about Airtable is how it automatically generates unique API documentation for every sheet and view in the base. This was the perfect springboard into the modular concept for the site, in which I wouldn't need any code to add new portfolio entries.

React web app

I enjoy coding in React. I find the modular nature of components to be intuitive. I used React previously for Smashesque.com and had a good time, so I went with it again. Bootstrap is my framework of choice for throwing together pretty sites so I chose to use it too.

Modular lists using Airtable

With the help of Tania Rascia's article on Using Context API in React (Hooks and Classes), I used Axios and the Airtable API to grab my view of choice and all the rows, fields and content therein from my MVP Airtable. My implementation is a little messy, but it worked, so no problem!
I started with EntryContexts.js which performs the API call and creates a context state containing the spreadsheet object.

    import React, { Component } from 'react'
    import axios from 'axios'
    export const EntryContext = React.createContext()
    class EntryContextProvider extends Component {
        state = {
            entries: []
        }
        componentDidMount() {
            const fetchData = () => {
                axios
                    .get('https://api.airtable.com/v0/appeDXIgWSt9xRB6n/
                    Portfolio%20Entries?api_key=[MY_API_KEY]')
                    .then(({ data }) => {
                        this.setState({
                            entries: data.records
                        })
                    })
                    .catch(console.log)
            }
            fetchData();
        }
        render() {
            return (
                <EntryContext.Provider value={{ ...this.state }}>
                    {this.props.children}
                </EntryContext.Provider>
            )
        }
    }
    export default EntryContextProvider

Next I created a component called EntryList.js maps the EntryContextProvider component's state data into some simple HTML elements:

import React from 'react'

const ListEntry = props => {
    const EnEntry = props.entryData.map((entry, key) => {


        return (
            <div>
                <h3>{entry.fields.title}</h3>
                <p>{entry.fields.notes}</p>
                <p><a href={entry.fields.link}>Link</a></p>
            </div>
        )

    })
    return <div>{EnEntry}</div>
}

export default ListEntry

Finally, I created a page called Entries.js which ties the EntryContextProvider and ListEntry components together and displays them on the page in simple React fashion. In this case, it is displayed as a list of portfolio entries on the home page of the website.

import React, { Component } from 'react'
import { EntryContext } from '../contexts/EntryContext'
import ListEntry from '../components/EntryList'

class Entries extends Component {

    render() {
        return (
            <EntryContext.Consumer>{(context) => {
                const { entries } = context
                return (
                            <ListEntry entryData={entries} />
                )

            }}
            </EntryContext.Consumer>
        )
    }
}

export default Entries

In App.js, I wrapped my site in the EntryContextProvider component, which ensures that every page has access to the Airtable context.

          <EntryContextProvider>
            <Switch>
              <Route exact path="/" component={Entries} />
            </Switch>
          </EntryContextProvider>

Finally, I had the results I wanted! A simple list of all portfolio entries that were in my Airtable spreadsheet:

Aesthetic challenges

Many developers revel with minimal websites with lists of achievements and projects. A white colour scheme and emoji are both very popular. I enjoy being a bit contrarian and a total 90s kid, so I took inspiration from the new SEGA MegaDrive Mini website and tried to match its look. Unfortunately, there's a lot of history, imagery and the theme of a retro console that helps bring the 90s Spaceship look together. Without these things (and a lack of artistic talent at my disposal) the results were less than inspiring. I realised that a dark theme for my portfolio was somewhat uninviting and less friendly than I wanted it to be, so I ended up going with a light theme. I wanted to keep some semblence of character, so I kept a scrolling background grid and gave the primary container a "sheet of paper" look. At this point I decided to add images for each project and an emoji to identify what kind of project each is, again all contained in the spreadsheet and called with the Airtable API. I hope the emoji are intuitive to anyone viewing the portfolio but the verdict is still out on that. Once everything was styled, I was extremely happy with the outcome:

Final Touches

Since my website was made from scratch, I considered it an addition to my portfolio. However, I didn't want it to be added to the list with a link to itself. Therefore I added a ❔ icon in the upper-left which triggered a popover that gives more information on the site. This article will be added onto it, too:

Finally, there was a site-breaking bug to be squashed. An empty field in the spreadsheet caused the entire Airtable context to fail, causing a blank web-page. I added some very rudimentary validation to resolve this but I didn't over-think it too much since the airtable should never have empty fields if I'm managing it. At the very least, correct entries load as they should with a simple inline error if there are any problems with a field:

And that's about it for my V1 portfolio website! To add new projects I just add a row to the sheet, avoiding any code at all. Let's look at my requirements from the beginning of the project:

I would start with an MVP and build upon it ✔
It had to be made in code, not with a website or blog builder ✔
It must be modular with the ability to add new projects with as little code as possible ✔
The website itself should contain a simple list of my projects ✔

As you can see, I hit all four of my requirements! It was a great journey and an interesting project. I learned the Airtable API, the importance of validation and plenty of design quirks. I'm very happy with the end result!

What's next?

I enjoy the site as it is and will most likely keep it simple for now. I may use more spreadsheets to add additional list-based sections to the site- articles, testimonials, cat photos... whatever I want to add, I can do so with very little code- Clone the Entries, EntryContextProvider and ListEntry components, replacing the Airtable API link and making any styling changes I want to.
Airtable is not ideal for, say, entire blog posts but I'm actually curious about whether it could be done. Imagine an entire site with an Airtable backend? It's possible and perhaps I'll dabble in that idea in the future. For now, I'm happy to mark this V1 project complete!

BONUS

I just added a new field to the Airtable named "order" and a new code block. With this new snippet, I can adjust the order in which the list entries appear by adding an order value in Airtable!

const { entries } = context
                let sortedEntries = entries.sort(
                    function(a,b){return a.fields.order - b.fields.order})

Check out the live site here
Check out the Airtable backend (MVP) here
Check out my Github here

I'm currently looking for work! Drop me an email at sgyll@protonmail.com if you'd like to chat