DEV Community: Tom Anderson

Why Excalidraw is mightier than the pen (and the sword)

Tom Anderson — Sat, 08 Aug 2020 19:05:15 +0000

(Cover photo by KOBU Agency on Unsplash. Originally posted on Medium.)

TLDR: Excalidraw is a web-based diagramming tool that I believe may seriously replace the need for pen and paper for quick sketches and diagrams.

“A picture speaks a thousand words”

For me, it’s a quote that couldn’t be more true. I often find myself searching for a pen and paper to try and draw out whatever it is I’m trying to explain or understand. How very analogue.

It’s 2020, and there should be a web app for everything I need!

While it’s true that there are several online apps that can be used for diagramming (many of which I’ve tried), none have managed to prove themselves better than just keeping a pen and paper handy.

But why is that? Let’s look at what makes the pen and paper so good:

⏱️ Pick up and go. (There’s no loading screen for a piece of paper.)
✏️ Complete freedom in what you draw. (Text, Images, Arrows, whatever!)
📘 Permanent from the start. (As soon as you’ve drawn on it, it’s there forever.)
📑 Annotate after the fact. (Add extra bits of information as you go.)
💷 Free! (Minus the cost of the paper, I guess.)

But there are definitely some things that we can improve on:

👫 Collaboration. (It’s kind of hard to share a paper, especially over a video call.)
💽 Digital Storage. (I don’t want paper cluttering up my desk!)
🔐 Security. (I often draw out things for clients at work, I don’t want to have to shred every scrap of paper.)
🌍 The Planet. (Paper isn’t very sustainable, we can do better.)

For a long time, pen and paper went unbeaten. Then I discovered Excalidraw.

Entirely web-based, end-to-end encrypted and completely open-source (with nearly 10k stars on GitHub!), it was a tool that I instantly got along with and is now my go-to tool whenever I need to sketch out my thoughts or help explain something visually.

So what makes it different?

Well, for one it follows the KISS Principle perfectly. To get going with it you just visit the URL and start drawing. No loading, no sign-up, just draw.

Shapes are kept simple so that the application is quick to use. Text can be added by double-clicking the place you want it. It uses an infinite canvas. Text and background colours can either be selected from a palette or via standard HTML Hex Colour codes. The list goes on!

The second thing that makes it different in my opinion is the security and sharing capability of the drawings themselves. Excalidraw stores all drawings on the server as blobs that are end-to-end encrypted meaning that even though the data is held remotely, no one on the server can see the content. Drawings persist across visits and can be exported as PNG, SVG or even just as a link that includes the blob reference and decryption key.

But above all, it was the live collaboration that convinced me that Excalidraw could be a replacement for the pen and paper. While there are other platforms that implement collaboration (Lucidchart and Creately spring to mind as good examples of this), none are as useable as Excalidraw’s Socket.io-based implementation. From starting a diagram, I can (with two clicks) generate a URL to give to others to let them see and contribute to my drawing.

They can then jump in my drawing and in real-time I can see their cursor, see anything they (or I) add to the document and we can start to transform my basic diagram into whatever it needs to be: a process diagram, block diagram, architecture diagrams (to an extent) or just a generic whiteboard to capture notes.

I use the live collaboration features of Google Docs every day both at work and at home, and yet the ability to have 5 or 6 people add to and annotate my diagram in real-time still blew my mind the first time I shared a diagram on a video call with a client.

So let’s see how Excalidraw stacks up against the benefits of pen and paper we saw earlier:

⏱️ Pick up and go. ✅ Excalidraw loads super fast, and by adding it to my bookmarks bar I can load it up in a comparable time to grabbing a pen and paper.
✏️ Complete freedom in what you draw. ✅ While the shape variety is basic, it covers 90% of my use cases when combined with arrows and text!
📘 Permanent from the start. ✅ Drawings persist across sessions, and I can save them both locally (as BLOBs) and share them online (as URLs).
📑 Annotate after the fact. ✅ The infinite canvas lets me expand into whatever space I need and I can place text arbitrarily on the canvas.
💷 Free! ✅ Not only is it free, but it’s completely open-source. There’s even a Docker image that I could self-host (Cloud Run anyone?) and use.
👫 Collaboration. ✅ See above, it’s absolutely epic.
💽 Digital Storage. ✅ Digital from the get-go. I can store drawings either locally or online and sharing is a breeze.
🔐 Security. ✅ End-to-end encryption + P2P-based collaboration = Secure enough for me!
🌍 The Planet. ✅ While it does run on a server that takes up power, the more popular it becomes the more efficient it is per-person!

All in all, I’m quite impressed with it as a tool so far! But there may be some questions that have crossed your mind:

Is Excalidraw a replacement for {Lucidchart|Creately|Draw.io|Google Drawings|Visio|Insert Tool Here}?

No. Those tools are excellent for complex diagrams, precise architectural diagrams and those flowchart diagrams that get printed out on A3. Stick to those for those tasks. Use Excalidraw for the simple stuff.

Can Excalidraw be a replacement for everything I do on pen and paper?

No. I don’t believe any web application used with a mouse or trackpad will ever replicate the freedom of freehand drawing on paper. But most of the time I’m just wanting to put some text in a box and draw a line between them, and Excalidraw is perfect for that.

So while I don’t want to claim it’s the perfect solution for every drawing occasion, I do want you to give Excalidraw a try the next time you need a drawing to help illustrate your message.

🧡 Tom Anderson
www.thomas-anderson.net
Liked something I did and want to help me out?

Add Dev.to posts to your static site in 20 lines of code

Tom Anderson — Sun, 02 Aug 2020 18:14:57 +0000

Context

I'm relatively new to writing for Dev.to, and am continually impressed by both this community and the content available within the site. 👍 Recently, I found the API interface that's available, which lets me access the content I write programmatically - interesting!

I also have an open-sourced personal site 🧑‍💻, where I use 11ty and Tailwind to generate a completely static site that I deploy on 🔥 Firebase Hosting.

So I set out to try and link the two by pulling the last 5 posts from Dev.to and putting them on the homepage of my personal site, in the most straightforward way that I knew how. The process for doing this can be found below, or at the GitHub template repo.

🧰 The Architecture

Note: I use 11ty to generate my static sites, so that's what I have used in the below architecture, but you may replace 11ty with whatever Static Site generator you prefer, just ensure you can pull data with JavaScript into your templates.

📂 Folder Structure

─ _source/
  ├── _data/
  |   └── devtoapi.js
  └── index.liquid
─ package.json

There are only 2 input files for this demo:

_data/devtoapi.js - The JavaScript module that calls the Dev.to API using Axios. (10 lines of code to actually pull the data)
index.liquid - The liquid template that shows the Dev.to posts on the index page. (10 lines of code to show the posts)

Ensure you have an initialised package.json file (or existing project). We only have 2 npm dependencies: axios and @11ty/eleventy - add them to your package.json file.

🧑‍💻 The Code

I did promise 20 lines of code, so here goes:

↩️ The API calls (10 lines)

_data/devtoapi.js

var axios = require("axios");
var api_url = process.env.DEVTO_APIURL || "https://dev.to/api/articles?username=ndsn";

module.exports = async () => {
  try {
    let response = await axios.get(api_url);
    return { feed: api_url, posts: response.data };
  } catch (e) {
    console.error(e.message);
  }
};

(Yes, there's a new line on line 3 but I'm counting it as 10 total!)

To make the API calls to the Dev.to API we need two key things:

The JavaScript library Axios
The correct Dev.to API Endpoint for articles.

From there, we export an asynchronous function that returns the API response as per 11ty's JavaScript Data File docs. At build time, 11ty calls this script and creates a collection object with the returned value(s) with the same name as the JavaScript file name.

🧾 Showing the posts (10 lines)

index.liquid

<ul>
  {% for item in devtoapi.posts limit:5 %}
    <li>
      <h3><a href="{{ item.url }}">{{ item.title }}</a></h3>
      <p>{{ item.description }}</p>
      <p>Categories: {{ item.tag_list | join: ', ' }}</p>
      <p>Published on {{ item.published_timestamp | date: "%A %e %B %Y at %I:%M%P" }}</p>
    </li>
  {% endfor %}
</ul>

Showing the posts is the simple case of creating a wrapper HTML structure (in this case I chose an unordered list), then using Liquid tags to output the data from the devtoapi.posts collection.

This is the collection that is created automatically by 11ty when it runs the devtoapi.js data file.

🎉 That's it!

To build and run:

npm install
npx @11ty/eleventy --input=_source --serve

The built index.html will be saved to the _site directory, and the --serve parameter will start a BrowserSync server to serve that folder.

Note: This will only fetch the posts at build time, therefore if you make a new post, you'll need to re-run the build!

🚀 Next Steps

If you already use 11ty for your static site, just add the above code into any of your templates and you're good to go.

Explore the API response to see which fields you could include in your template.

If you use another Static Site generator, you should be able to create a fairly lightweight wrapper around the API that you can use in your templates.

For the more advanced, you could even use a Dev.to API Key to call the /articles/me endpoint to get additional stats about your posts as well as the raw markdown of the content.

As mentioned above, this will only fetch posts at build time, so if you want to include new posts, you'll need to rebuild and re-deploy your site after the API updates. For the more adventurous, you could explore automating this process using Dev.to webhooks!

👨‍🦰 Let me know what you think!

Have you used 11ty and JavaScript Data Files before?
Have you put your Dev.to posts on your own site?
Would you recommend a different way?

🧡 Tom Anderson
www.thomas-anderson.net
Liked something I did and want to help me out?

Google Search for Datasets

Tom Anderson — Wed, 29 Jul 2020 20:01:20 +0000

🔧 There's a tool for everything nowadays

A colleague of mine showed something to me today that I had never come across before and I was impressed 👍:

Google Dataset Search 🔍

A search engine (powered by Google, who aren't too bad at that search thing) that returns results back as a semi-curated list of datasets 📚 available on the web, regardless of where they are hosted!

(It's been around for quite a while now too!)

🤷‍♂️ So what?

One of the biggest problems with both learning and understanding topics like machine learning and big data analytics is getting access to large datasets.

Lots of sites (such as Kaggle) have made awesome inroads into making datasets more accessible but they can't possibly host everything.

And that's where properly indexing and search can help.

Google has a good history in making popular search engines. But it's the approach behind dataset search that I'm more interested in:

Standardisation 📋 - it's up to dataset owners to make their dataset indexable in a specific format, so it can be found more easily and more precisely.

Give me an example! 🧐

Okay, try searching for "programming":

https://datasetsearch.research.google.com/search?query=Programming

What do we see?

🗂️ Three different datasets.
💡 Three potential project ideas.
🌍 Three different data sources.

It's that last one that works for me - I don't need to go through curated lists of data set sources or validate the security of a dataset found in a Reddit post. I can just search.

Let me know what you think!

Have you used dataset search?
Where do you get your datasets?
What do you use public datasets for?

🧡 Tom Anderson
www.thomas-anderson.net
Liked something I did and want to help me out?

Tips and Tricks for using Google Cloud Shell as a Cloud IDE

Tom Anderson — Sun, 26 Jul 2020 17:16:58 +0000

Already a fan of Google Cloud Shell? For just tips and tricks, without the introduction, click here.

Introduction
Tips and Tricks
- Shortcuts
- Customisation
Wrapping Up

Introduction

Context

At the start of 2020, I made the decision to use a Chromebook as my primary device and move to SaaS/web-based tools permanently. If it's something you're considering - I'd highly recommend it and there are tons of articles on the web outlining why you should and how you can make the transition.

For me the reason was simple: The Browser > A Device.

But one thing that I really struggled with for a long-time was having a cloud-based replacement for my development environment. The problem can be addressed in a number of different ways though, and I would highly recommend reading the following for more in-depth views on the topics:

My Favorite Cloud IDEs. Eliminate the hassle of managing… | by David Kramer | Better Programming

David Kramer ・ Feb 19, 2021 ・
Medium

Why I use a cloud-based development environment and how you can too

Mike ・ Mar 31 '20

#productivity #ide #editor #vscode

Theia 1.0 - Finally a Good Browser IDE

Sven Efftinge ・ Mar 31 '20

#productivity #vscode #opensource #devops

So what did I land on? Google Cloud Shell

Why? It's basically a free Linux development machine accessed through the web browser or a mobile app.

Is it perfect? Will it work for every developer? No.

While alternatives exist, I find the flexibility and accessibility of Google Cloud Shell to be superior for my workflows than the likes of CodeSandbox or GitPod.

So let's move onto what Google Cloud Shell actually is, and what we get for our low, low price of £0 p/m.

What is Google Cloud Shell?

Google Cloud Shell is essentially a web-based interface to an ephemeral Linux virtual machine hosted in the Google Cloud Platform.

More specifically, Google provides you with an e2-small Linux virtual machine with 2 vCPU cores (limited to 25% CPU Time, but burstable) and 2GB RAM and a 1Gbps (125MB/s download/upload) network connection.

And if that's not enough for your workloads, you can "boost" your Cloud Shell machine which will re-provision all sessions for the following 24 hours on an e2-medium instance type instead. This boosts the 2 vCPU cores to 50% CPU Time and doubles both the RAM (to 4GB) and the network connection (to 2Gbps/250MB/s).

Note: Use boost only when you need! You are subject to certain "limits".

Not bad! The catch?

The VM only lasts for the life of the session and gets deleted an hour after you leave the session.

Okay fair enough, what about storage?

That's where things get interesting, from the docs:

Cloud Shell provisions 5 GB of free persistent disk storage mounted as your $HOME directory on the virtual machine instance. This storage is on a per-user basis and is available across projects. All files you store in your home directory, including installed software, scripts and user configuration files like .bashrc and .vimrc, persist between sessions.

So when the virtual machine gets terminated and discarded, your $HOME directory does not.

This means that anything you configure, install or store in your $HOME directory can be used every time you load up Cloud Shell, but anything outside of that directory is wiped away.

This is very powerful if used correctly.

For instance, imagine you want to clone and work on your favourite GitHub repo:

Clone that repo into /tmp/my-project and when the VM is discarded and deleted, those files will be gone.
Clone it into $HOME/my-project and you can access those files over and over again.

Flexibility is a powerful thing! (Within the limits of course!)

So how do you access it? Through the web browser.

But there are a few things you need to do beforehand:

Sign-up/Sign-in to a Google Account
Access the Google Cloud Platform Console
Click on the "Activate Cloud Shell" icon.

Once it loads up you'll be presented with the two parts of Google Cloud Shell:

The terminal.
The Theia-based Code Editor.

But that's not the only way to access it - there's also a mobile application for iOS and Android.

So you can access it from literally anywhere!

And it's that flexibility and accessibility that has driven me to write these tips and tricks. You can do a lot with Google Cloud Shell if you're willing to spend some time with it.

So, onto my tips and tricks!

Tips and Tricks

Shortcuts

Accessing Cloud Shell through the Cloud console is not the only way you can get to it!

Open Cloud Shell Directly

Here's a link to open Google Cloud Shell directly in its own tab:



https://console.cloud.google.com/cloudshell/editor?cloudshell=true&shellonly=true

Note: The '&shellonly=true' means 'Don't open the code editor'

Open Cloud Shell Code Editor Directly

If you want to open just the code editor without the terminal:



https://ssh.cloud.google.com/devshell/proxy?authuser=0&port=970&cloudshell_retry=true&devshellProxyPath=%2F&environment_name=default&environment_id=default

Note: If your Cloud Shell VM isn't active, this link won't work!
Tip: Append #/path/to/directory to the URL to open that directory in the editor!

Clone a GitHub Repo via its URL.

Much like the way GitPod behaves, you can clone any GitHub or BitBucket repository automatically through visiting a specific URL:



https://ssh.cloud.google.com/cloudshell/editor?shellonly=true&cloudshell_git_repo={URL LINK TO REPO}

Note: Cloud Shell will clone any repo into the $HOME/cloudshell_open directory.
Hint: Other parameters for this URL can be found on this page.

Clone the GitHub Repo from the repo itself

Or, if you add the following bookmark to your bookmarks bar, it will automatically take the URL of the page you are on and clone that.



javascript:{window.location='https://ssh.cloud.google.com/cloudshell/editor?shellonly=true&cloudshell_git_repo='+encodeURIComponent(window.location.href)}

Add a 'Clone this in Cloud Shell' badge to your repo

You can also embed a Shields.io badge to our repo's README to allow others to automatically clone the repo to their Cloud Shell.



[![Open in Cloud Shell](https://img.shields.io/badge/Google%20Cloud%20Shell-Clone-5391FE?style=for-the-badge&logo=gnu-bash&logoColor=white)](https://ssh.cloud.google.com/cloudshell/editor?cloudshell_git_repo=***{REPO URL HERE}***&shellonly=true)

Customisation

For those who want to change the look and feel of Cloud Shell or want to really stretch the boundaries of what it can do, there are a few things we can change:

Custom Startup Script (.customize_environment)

If you find yourself needing tools or packages that aren't included in the list of packages that Cloud Shell has pre-installed, create a file called .customize_environment in your $HOME directory.

As described in the docs, this script is run as root when the VM is created.

You could install packages, make configuration changes or just remove some of the things Google bakes into the image.

When the script completes, the file /google/devshell/customize_environment_done is created. Log output is available at /var/log/customize_environment.

Remove the Google sign-in message

On every login to Cloud Shell, you will see the following:

Welcome to Cloud Shell. Type "help" to get started.

This is part of the init_help.sh script located at /etc/profile.d/init_help.sh that runs on every login.

Unfortunately, to stop this message appearing on every login we need to delete this file as part of our .customize_environment script. (See below)

Stop README-cloudshell.txt being recreated

If you delete the README-cloudshell.txt file from your $HOME directory, you will notice that Google helpfully recreates it the next time we log in.

This is part of the init_help.sh script located at /etc/profile.d/init_help.sh that runs on every login.

Unfortunately, to stop this message appearing on every login we need to delete this file as part of our .customize_environment script. (See below)

Remove the init_help.sh script

To remove the /etc/profile.d/init_help.sh script and stop the above two behaviours, add the following to your .customize_environment file:



#!/bin/sh

# File to remove
file="/etc/profile.d/init_help.sh"

if [ -f $file ] ; then
    rm $file
fi

Note: Deleting this file will also delete the messages that tell you which GCP project you have selected. You can see how to add these back in with the "customise the login message" tip.
Note: This also removes the 'help' alias.

Customise the login message

To add a custom welcome message, you just need to copy in a bash script to /etc/profile.d/ that will get executed on login.

However, when the script runs it does not have access to the $HOME directory so any scripts will need to be hosted externally.

Add code similar to this to your .customize_environment file:



#!/bin/sh
echo 'Getting custom login message script...'
wget -P /etc/profile.d/ https://URL/path/to/your/init_welcome.sh
chmod +x /etc/profile.d/init_welcome.sh

Note: Replace URL/path/to/your/init_welcome.sh script with a publicly accessible bash script.

As an example, this is the bash script I use for my login:

Hint: Lines 8-13 will print out the current GCP project, exactly as in the original init_help.sh script.

This means my Cloud Shell login looks like this:

Customise bash prompt (and keep GCP project functionality)

As with any Linux environment, you can customise the Bash prompt to add any number of things by changing the PS1 variable. In Google Cloud Shell, the PS1 variable is set by the /google/devshell/bashrc.google file on login, which is referenced by your $HOME/.bashrc file.

Note: This file contains a number of Cloud Shell-specific settings so I wouldn't recommend removing this source from your .bashrc.

To replace the prompt format, set the PS1 variable after the source "/google/devshell/bashrc.google" block.

If like me, you want to augment or modify the existing prompt, add the following to the end of your .bashrc:



export PS1='🌀 \e[1m\033[38;5;202m\]\u@ndsn-shell \e[0m\[\033[00m\]in \e[1m\[\033[1;34m\]\w\e[0m$([[ -n $DEVSHELL_PROJECT_ID ]] && printf " \[\033[1;33m\](%s)" ${DEVSHELL_PROJECT_ID} )\[\033[00m\]'
if [[ -n $TMUX ]]; then
  export PS1+='\[\033k$([[ -n $DEVSHELL_PROJECT_ID ]] && printf "(%s)" ${DEVSHELL_PROJECT_ID} || printf "cloudshell")\033\\\]'
fi
export PS1+="\033[38;5;2m\]\$(__git_ps1 ' [⎇ %s]')\[\033[00m\] ↣ "

Which results in:



🌀 me@ndsn-shell in /my/path (gcp-project-name) [⎇ master] ↣

Screenshot:

Install Chromium dependencies (for headless browser testing)

I like to use puppeteer for headless browser testing, but when it tries to download and use Chromium there are a lot of dependencies that aren't installed by default. Install them with:



sudo apt-get install gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget

Note: Source: Puppeteer Troubleshooting

Install code-server (Web-based VSCode)

While the Theia-based code editor that comes with Cloud Shell is okay, it doesn't support much modification. You can't add plugins for other languages and you don't have any nice git integration.

A while ago, Christian Hees outlined in a Medium post how it was possible to install and run code-server (web-based VSCode) on Google Cloud Shell. This meant that we could extend our code editing capabilities within Cloud Shell and allowed us to extend the use-cases for which it was useful.

His steps were simple and still work, but there is now an even quicker way to install and run code-server from the official docs:



curl -fsSL https://code-server.dev/install.sh | sh -s -- --method=standalone
PATH="$HOME/.local/bin:$PATH"

Which installs to $HOME/.local. Then to start the application you can just run code-server --auth=none.

Note: Having code-server on your PATH may not persist across sessions, so you may need to periodically run PATH="$HOME/.local/bin:$PATH" to get the code-server command to work.

Hint: While perfectly usable in normal mode, use Boost Mode (above) to get a snappier experience.

I like to change the ~/.config/code-server/config.yml to the following:



bind-addr: 127.0.0.1:5000
auth: none
cert: false

Which changes the port to 5000 and disables the authentication (since Cloud Shell handles this).

Note: There is an open issue with code-server at the moment that prevents GitHub sign-in. See here for more details and a workaround.

Wrapping Up

I hope that some of these tips and tricks will enable you to make Google Cloud Shell work for your particular workflow.

While it may not be a suitable cloud development environment for all workloads, it is totally free and with a little customisation can be a powerful extension to your productivity toolset.

Let me know what you think!

Did any these tips or tricks help?
Any other tips or tricks that you have for Google Cloud Shell?
What do you use for your Cloud Development Environment?

🧡 Tom Anderson
www.thomas-anderson.net
Liked something I did and want to help me out?

Why I love 11ty (and JAMstack) for building static sites...

Tom Anderson — Thu, 23 Jul 2020 18:45:34 +0000

Web Development in 2020 is confusing...

I'll be honest, it's been really hard to keep up with web development technologies over the past 10 years.

For someone like me (someone who understands basic HTML, CSS and JavaScript) the myriad of frameworks can be extremely daunting. I feel like the barrier to entry for a lot of them is so high and they all seem to be overkill for what I need.

David Wickes seems to agree:

Why You Shouldn't Use A Web Framework

David Wickes ・ Jul 26 '18

#webdev #framework #beginners #react

But now it seems like there's a new trend emerging that seems oddly familiar - JAMstack. Rather than these highly reactive and fully-loaded websites, why don't we just generate static files and serve those! (How very 90's!)

Turn JAMstack up to 11ty

Upon first glance at some of the suggested tools to generate JAMstack sites, a lot of them still had way too much bloat. When I came across 11ty (pronounced 'eleventy) though, it immediately appealed and was super easy to get to grips with.

Rather than being a framework used at runtime or some server-side 'on-the-fly' site generator, 11ty runs as a compiler. It takes inputs, glues them together (really quickly!) and outputs a static site. Simple.

There are several great tutorials on the official 11ty site for beginners, but Omar Sinan does a great job here on Dev.to:

Create a Blog in Less Than 20 Lines of Code Using 11ty

Omar Sinan ・ Jan 10 '20

#beginners #tutorial #webdev #11ty

For me, I'm a very visual person so I've tried to illustrate how 11ty works for my development needs in this diagram:

(FYI, I do all my diagrams in Excalidraw - read about why here!)

Let's break it down

Input Files

One of the biggest selling points for 11ty for me. One of the biggest issues I had with trying to build sites in pure HTML was that if I wanted to re-use a nav-bar or footer I had to literally copy and paste the code.

11ty does away with this and lets us use a huge array of templating languages, most notably Liquid and Markdown - and even lets us mix and match. Perfect!

But we can also augment our input templates with data (either local or remote) and generate static files based on our layouts and data at compile time. This makes it super easy to create blog sites.

Resources

Have files that you don't want 11ty to modify, like CSS or images? Just pass them through in the config:

eleventyConfig.addPassthroughCopy("**/*.jpg")
eleventyConfig.addPassthroughCopy("path/to/css")

And they'll just appear in the finished build.

Static Site

The output of 11ty's magic - it's just pure HTML, CSS (and JavaScript/Images if you have them).

Which means that two things suddenly become a lot easier:

Deployment - Host your site literally anywhere that accepts static files. Or go for JAMstack-specific hosting providers like Netlify and Vercel.
Testing - Can be as simple as loading up the HTML file in your browser, or you can integrate automated testing with tools like Cypress or Jest/Puppeteer.

But I want more!

Sure - other static site generators might do more.

And a fully-fledged framework might work better for project X or 'my-react-app25'.

But for someone who just wants to re-use their Navbar and Footer across all pages of their personal website or create a blog that they can host anywhere, I couldn't recommend 11ty highly enough.

I even rebuilt my own website using 11ty*!

(*Yes, I used TailwindCSS to style it. CSS is hard. 😉)

Let me know what you think!

Have you used 11ty and/or do you prefer a different static site generator?
Why?

🧡 Tom Anderson
www.thomas-anderson.net
Liked something I did and want to help me out?

DEV Community: Tom Anderson

Why Excalidraw is mightier than the pen (and the sword)

“A picture speaks a thousand words”

It’s 2020, and there should be a web app for everything I need!

Add Dev.to posts to your static site in 20 lines of code

Context

🧰 The Architecture

📂 Folder Structure

🧑‍💻 The Code

↩️ The API calls (10 lines)

🧾 Showing the posts (10 lines)

🎉 That's it!

🚀 Next Steps

👨‍🦰 Let me know what you think!

Google Search for Datasets

🔧 There's a tool for everything nowadays

Google Dataset Search 🔍

🤷‍♂️ So what?

Give me an example! 🧐

Let me know what you think!

Tips and Tricks for using Google Cloud Shell as a Cloud IDE

Contents

Introduction

Context

My Favorite Cloud IDEs. Eliminate the hassle of managing… | by David Kramer | Better Programming

David Kramer ・ Feb 19, 2021 ・ Medium

Why I use a cloud-based development environment and how you can too

Mike ・ Mar 31 '20

Theia 1.0 - Finally a Good Browser IDE

Sven Efftinge ・ Mar 31 '20

What is Google Cloud Shell?

Tips and Tricks

Shortcuts

Open Cloud Shell Directly

Open Cloud Shell Code Editor Directly

Clone a GitHub Repo via its URL.

Clone the GitHub Repo from the repo itself

Add a 'Clone this in Cloud Shell' badge to your repo

Customisation

Custom Startup Script (.customize_environment)

Remove the Google sign-in message

Stop README-cloudshell.txt being recreated

Remove the init_help.sh script

Customise the login message

Customise bash prompt (and keep GCP project functionality)

Install Chromium dependencies (for headless browser testing)

Install code-server (Web-based VSCode)

Wrapping Up

Let me know what you think!

Why I love 11ty (and JAMstack) for building static sites...

Web Development in 2020 is confusing...

Why You Shouldn't Use A Web Framework

David Wickes ・ Jul 26 '18

Turn JAMstack up to 11ty

Create a Blog in Less Than 20 Lines of Code Using 11ty

Omar Sinan ・ Jan 10 '20

Let's break it down

But I want more!

Let me know what you think!

David Kramer ・ Feb 19, 2021 ・
Medium