DEV Community: Craig Holliday

Adding a CSS playground to your Astro site with Svelte

Craig Holliday — Sun, 19 Nov 2023 01:50:06 +0000

I've recently updated my website using Astro. To continue experimenting with Astro, I added Svelte components to the site.

If you didn't know, Astro has integrations for React, Preact, Svelte, Vue, SolidJS, AlpineJS, and Lit (which is insane)

This means I can bring what I've been learning with Svelte straight into my new personal website without much hassle.

What I want to do

With this quick experiment, I want to:

Add the Svelte integration to my website
Use Monaco Editor to add code editors
Create two editors: one editor for CSS and one for HTML
Take the output from those editors and load them into an iFrame.

Let's do it

I'll go step by step and show the code I used because this was super easy to do.

Add the Svelte integration

If I put any info here, I would repeat the fantastic Astro documentation.

So, go to the fantastic documentation for this step

This was dead simple.

Add code editors with Monaco Editor

Monaco Editor was also relatively simple to add.

Add the NPM package:

npm install monaco-editor

Then, write a little wrapper around the package to create a Svelte component. This could be cleaner, but it gets the job done. I'm also using Tailwind CSS, by the way.

// Editor.svelte
<script lang="ts">
  import { onDestroy, onMount } from 'svelte';
  import * as monaco from 'monaco-editor';
  import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
  import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
  import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';

  import { code as html_code } from './html_code';
  import { code as css_code } from './css_code';

  export var type: 'html' | 'css' = 'html';
  export let content = '';

  let editorElement: HTMLDivElement;
  let editor: monaco.editor.IStandaloneCodeEditor;
  let model: monaco.editor.ITextModel;

  onMount(async () => {
    self.MonacoEnvironment = {
      getWorker: function (_: any, label: string) {
        if (label === 'css' || label === 'scss' || label === 'less') {
          return new cssWorker();
        }
        if (label === 'html' || label === 'handlebars' || label === 'razor') {
          return new htmlWorker();
        }
        return new editorWorker();
      },
    };

    editor = monaco.editor.create(editorElement, {
      automaticLayout: true,
      theme: 'vs-dark',
      minimap: { enabled: false },
    });

    editor.onDidChangeModelContent(() => {
      content = editor.getValue();
    });

    const default_code = type === 'html' ? html_code : css_code;
    model = monaco.editor.createModel(default_code, type);
    editor.setModel(model);
    content = editor.getValue();
  });

  onDestroy(() => {
    monaco?.editor.getModels().forEach((model) => model.dispose());
    editor?.dispose();
  });
</script>

<div class="h-full w-full" bind:this={editorElement} />

This class manages the lifecycle of the editor and provides a Svelte component that can be used elsewhere.

Create a CSS and HTML editor

We need to use the Editor component we just made in another component.

We make another component to wrap all of our logic rather than putting the logic in the page itself because we have to use a client directive, which we'll cover in a minute.

// CSSPlayground.svelte
<script lang="ts">
  import Editor from 'src/components/css_playground/Editor.svelte';

  // 1. Variables to bind the editors to
  let css_code = '';
  let html_code = '';
</script>

<div class="flex">
  <!-- 2. Setup and bind the Editor components -->
  <div class="h-64 w-full">
    <Editor type="html" bind:content={html_code} />
  </div>
  <div class="h-64 w-full">
    <Editor type="css" bind:content={css_code} />
  </div>
</div>

All this code has is a layout for the editors and the reference to the strings for the code.

Load the CSS and HTML into an iFrame

We have a small addition to the previous component and have the iFrame set up.

// CSSPlayground.svelte
<script lang="ts">
  import Editor from 'src/components/css_playground/Editor.svelte';

  let css_code = '';
  let html_code = '';

  // 1. Load the HTML and CSS code into the iFrame whenever it changes
  function load_code(html_code: string, css_code: string) {
    const iFrame = document.getElementById('iFrame') as HTMLIFrameElement;
    if (iFrame === undefined || iFrame === null) {
      return;
    }
    const iframe_document = iFrame.contentWindow!.document;
    iframe_document.open();
    iframe_document.writeln(html_code + '<style>' + css_code + '</style>');
    iframe_document.close();

    iFrame.width = `${iframe_document.body.scrollWidth}`;
    iFrame.height = `${iframe_document.body.scrollHeight}`;
  }

  // 2. React whenever html_code or css_code changes
  $: {
    load_code(html_code, css_code);
  }
</script>

<div class="flex">
  <div class="h-64 w-full">
    <Editor type="html" bind:content={html_code} />
  </div>
  <div class="h-64 w-full">
    <Editor type="css" bind:content={css_code} />
  </div>
</div>
// 3. Add the iFrame
<iframe title="renderer" id="iFrame" />

This is the most basic way I saw to load the HTML and CSS code into an iFrame. This could be improved.

One problem is that the iFrame needs to be more responsive.

Let me know if you know how to make the iFrame responsive to the browser and the inside elements at all times.

Add the Svelte component to the Astro page

Finally, as shown below, we add our CSSPlayground component to any Astro pages with the client directive.

// css_playground.astro
---
import PageLayout from '@/layouts/Base';
import CSSPlayground from '../components/css_playground/CSSPlayground.svelte';

const meta = {
  title: 'CSS Playground',
  description: 'A cool css experiment',
};
---

<PageLayout meta={meta} body_class='w-full m-0 px-4 pt-2 max-w-none'>
  <div class='space-y-6 flex flex-col'>
    <h1 class='title mb-4'>Cool CSS</h1>
    <!--  1. This client directive tells Astro to load this on the client, not the server. -->
    <CSSPlayground client:only='svelte' />
  </div>
</PageLayout>

All done!

That's all!

You can find the deployed playground here.

It's not a huge feature, but seeing how easy it is to add Svelte (or any other framework integration) to an Astro site is fascinating.

I'm already a fan of Astro, and these simple integrations only solidify that fandom.

Let me know your favorite thing about Astro!

Use Astro for your personal or portfolio website

Craig Holliday — Sun, 12 Nov 2023 04:02:50 +0000

TL:DR

Astro is a fantastic framework.
It is super easy to get up and running.
It has fantastic templates.
Vercel makes it simple to deploy.
You should use it for your next portfolio, blog, etc.
Look at my website here: https://www.craigaholliday.com/

What I needed

Long story short: I was laid off and needed a new personal website.

Most of my work is under NDA and also not publicly available.

For my website, I needed something more like a blog than a traditional portfolio website.

However, like other portfolio websites, the site still needed to look decent.

What I did

I picked Astro because I've heard great things about it, and it was something new to try.

I already built a blog website with Gatsby, and it worked great. However, it is always good to try new things.

So, I went to the Astro website to read through some of the docs and showcases.

Astro has a great set of starter themes you can pick from.

Among the themes was an excellent minimal theme, which you can copy as a template to a new GitHub repo. The readme for the repo covers how.

After copying the repo template, I:

Change a few variables in the site configurations.
Made some minor changes to the CSS and a few small design tweaks
Added the information for all the projects I have worked on for the last four years

Finally, the website was done, and I could deploy it.

The obvious choice to do this was with Vercel, which was as easy as signing up for an account and pointing Vercel to my repo.

That's it!

Honestly, what took me the longest was writing the details for all of my projects. The rest was quick and easy.

What is in my portfolio

Instead of traditional portfolios with links to apps, screenshots, etc, my portfolio has the ~14 projects I have worked on for the past four years.

My work is not publicly available, so this is my solution: a lot of text about the problems I solved and how.

It feels very different from what others show, which can be good or bad.

This is what I have because of my contracting work and working on a B2B product that was private.

Let me know how you like it!

Hire me

Finally, I did not make this post to only share an easy way to make a portfolio.

I also made this post to shill for myself.

I am actively looking for my next job and would love some help. The job search scene is brutal right now.

I am a senior-level generalist software engineer with management experience. All of my projects go into detail on what I've done previously.

I love working with great people on great products and am independent of specific platforms, frameworks, or technology.

I appreciate sharing this post, my portfolio, LinkedIn, and website with anyone who needs my skillset!

Website: https://www.craigaholliday.com/

LinkedIn: https://www.linkedin.com/in/craigaholliday/

Email: hello@craigaholliday.com

Using the useReducer Hook in React with TypeScript

Craig Holliday — Wed, 19 May 2021 00:03:24 +0000

The useReducer hook is an alternative to the useState hook and is preferable when you have complex state logic or when your next state depends on your previous state.

The useReducer hook accepts a reducer type (state, action) => newState and returns a state object paired with a dispatch method much like Redux.

Now the official useReducer documentation will show you how to define a reducer that accepts actions you will call with a dispatch method.

That is a good use case but I have another example of using useReducer to provide partial updates to state which I find covers the rest of my use cases.

useReducer with actions and a dispatch method

The default example for useReducer is set up for you to create a reducer function and provide it with an action. The action provided should have a type and some value to update the state.

To strongly type this feature with TypeScript we can create an enum with all of our possible action types as well as create an interface for the action.

Below is a fairly contrived example but shows the most basic example possible.

// An enum with all the types of actions to use in our reducer
enum CountActionKind {
  INCREASE = 'INCREASE',
  DECREASE = 'DECREASE',
}

// An interface for our actions
interface CountAction {
  type: CountActionKind;
  payload: number;
}

// An interface for our state
interface CountState {
  count: number;
}

// Our reducer function that uses a switch statement to handle our actions
function counterReducer(state: CountState, action: CountAction) {
  const { type, payload } = action;
  switch (type) {
    case CountActionKind.INCREASE:
      return {
        ...state,
        value: state.count + payload,
      };
    case CountActionKind.DECREASE:
      return {
        ...state,
        value: state.count - payload,
      };
    default:
      return state;
  }
}

// An example of using the `useReducer` hooks with our reducer function and an initial state
const Counter: FunctionComponent = () => {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });
  return (
    <div>
      Count: {state.count}
      {/* Calling our actions on button click */}
      <button
        onClick={() => dispatch({ type: CountActionKind.INCREASE, payload: 5 })}
      >
        -
      </button>
      <button onClick={() => dispatch({ type: CountActionKind.DECREASE, payload: 5 })}>+</button>
    </div>
  );
};

useReducer using the Partial type for state updates

The next way of using useReducer is best used when you have a state object where you need to change some values inside of it directly rather than dispatching an action to handle state changes.

This way also has fewer types but does expose the state to be changed directly so take that into account when using this method.

// Interface for our state
interface LoadingState {
  loaded: boolean;
  loading: boolean;
  error: Error | null;
}

// The example component that use the `useReducer` hook with our state
const LoadingComponent: FunctionComponent = () => {
  /** 
   See here that we are using `newState: Partial<LoadingState>` in our reducer
   so we can provide only the properties that are updated on our state
   */
  const [state, setState] = useReducer(
    (state: LoadingState, newState: Partial<LoadingState>) => ({
      ...state,
      ...newState,
    }),
    {
      loaded: false,
      loading: false,
      error: null,
    }
  );

  useEffect(() => {
    // And here we provide only properties that are updating on the state
    setState({ loading: true });
    setState({ loading: false, loaded: true });
    setState({ loading: false, loaded: true, error: new Error() });
  }, []);

  if (state.loading) {
    return <p>Loading</p>;
  }

  return <p>{state}</p>;
};

Conclusion

These are my two methods so check out the other posts below for other methods. It's beneficial to read the wide range of ways to accomplish the same thing.

https://www.newline.co/@bespoyasov/how-to-use-usereducer-with-typescript--3918a332

https://www.sumologic.com/blog/react-hook-typescript/

https://www.benmvp.com/blog/type-checking-react-usereducer-typescript/

🌟🌟🌟

My brother and I write all the time about React, TypeScript, R, Data Science, you name it on our blog so check it out:

KoalaTea.io

🌟🌟🌟

Getting started with the Notion API JavaScript SDK

Craig Holliday — Tue, 18 May 2021 17:30:57 +0000

The public beta for the Notion API went live recently and it is going to make Notion 10x more powerful.

That means it is the perfect time to jump on the bandwagon and start building integrations of your own.

In this post let's go over how to get started with the Notion API by using the Notion JavaScript SDK.

Account setup

This is covered better with gifs in the official getting started page so read through that for more detailed instructions.

Here is a short outline of setting up your account and first integration:

Create a Notion account (If you don't already have one)
Create a workspace or log into one as an Admin
Create a new integration. Save the Internal Integration Token because we will be using that later.
Share a database with your integration. You have to share databases with the integration for security purposes. You can have tons of databases on a single Notion account so it wouldn't be the best if an integration received access to everything connected to one account.
Copy the Database ID. When I set this up I had Notion up in my browser so the URL with the Database ID looked like this https://www.notion.so/${DATABASE_ID}
You are ready to go!

Ways to explore the Notion API

Before going into our example I want to say there are so many cool ways to explore the Notion API.

We will be using the Notion JavaScript SDK but there is also a Postman Workspace which I highly recommend taking a look at.

There are also a couple of integration examples you can check out.

Example Project

Let's hop into some code.

Project Setup

Navigate to where you want to create your project.

Create your example folder

mkdir notion-api-example && cd notion-api-example

Initialize your project with NPM. (Using -y to say yes to all default configuration options)

npm init -y

Install the Notion JavaScript SDK

npm install @notionhq/client

Create an index file for our code.

touch index.js

And we will add a script to our package.json to run our code.

Add "start": "node index.js" and your package.json should look like this:

{
  "name": "notion-api-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@notionhq/client": "^0.1.3"
  }
}

Actual code

Now open up index.js and paste the code below. Then replace INTERNAL_INTEGRATION_TOKEN with the token we saved in the setup and DATABASE_ID with the Database ID we saved in the setup.

// Require the Client object from the Notion JS SDK
const { Client } = require('@notionhq/client');

// Create a notion client
const notion = new Client({ auth: 'INTERNAL_INTEGRATION_TOKEN' });

(async () => {
  const databaseId = 'DATABASE_ID';
  // Call `retrieve` on `databases` to retrieve a database object.
  const response = await notion.databases.retrieve({ database_id: databaseId });
  console.log(response);
})();

With this code in place, we can now execute it by running the start script npm run start. If the database id and your integration token are entered correctly you should see a log of the JSON representing the retrieved database.

Refactor and creating a page

Before we wrap up, let's refactor what we currently have and add a function to create a new page in our database.

Change all the code in index.js to the code below.

This is a lot of code so check the added comments for what each piece of the code is doing.

const { Client } = require('@notionhq/client');

const notion = new Client({ auth: 'INTERNAL_INTEGRATION_TOKEN' });

// 1. Refactor `retrieveDatabase` to a function
async function retrieveDatabase(databaseId) {
  const response = await notion.databases.retrieve({ database_id: databaseId });
  console.log(response);
}

// 2. Build a `createPageInDatabase` function
async function createPageInDatabase(databaseId) {
  // The parent object to add to. Here just the ID of the database but this can also be the id of a page.
  const parent = {
    database_id: databaseId,
  };

  // Properties object. This has to match properties in the database.
  const properties = {
    Name: {
      title: [
        {
          text: {
            content: 'My Awesome New Page',
          },
        },
      ],
    },
  };

  // Children object that contains all the awesome Notion block objects.
  const children = [
    {
      object: 'block',
      type: 'heading_2',
      heading_2: {
        text: [
          {
            type: 'text',
            text: {
              content: 'My awesome cool page',
            },
          },
        ],
      },
    },
    {
      object: 'block',
      type: 'paragraph',
      paragraph: {
        text: [
          {
            type: 'text',
            text: {
              content:
                'I created my awesome new page while following along with the KoalaTea Getting started with the Notion API JavaScript SDK blog post. Now I should go read more KoalaTea blog posts. 😄',
              link: {
                url: 'https://koalatea.io/',
              },
            },
          },
        ],
      },
    },
  ];

  // The page object where we put all our other objects together to create a new page.
  const page = {
    parent: parent,
    properties: properties,
    children: children,
  };

  // Finally the request to create a page.
  const response = await notion.pages.create(page);
  console.log(response);
}

(async () => {})(createPageInDatabase('DATABASE_ID'));

Now executing this code (npm run start) we should get a response telling us that a new page was created in our database.

What to do now?

Now that you have gotten started with the Notion API you should look at the API documentation and code samples to see more fleshed-out details of what you can do with the API.

After you have read through the rest of the documentation you should build a project. I suggest you try to build a CMS which is a fantastic project to explore the Notion API.

CMS with the Notion API

Here are some steps to build a Notion CMS.

Build a simple Fastify server
Start with your database but take a look at user authentication so others could use the CMS.
Build simple routes to retrieve data from a database based on certain property filters.
Create routes to add pages to the database with just the title and description. (Adding blocks seems more complicated for the first project)
Deploy to Heroku or Digital Ocean
If you have trouble, 🌟 ping me on Twitter 🌟

Resources

Public beta for the Notion API

Official getting started page

Notion JavaScript SDK

Postman Workspace

API documentation

Build a simple Fastify server

Heroku

Digital Ocean

🌟 ping me on Twitter 🌟

🌟🌟🌟

My brother and I write all the time about React, TypeScript, R, Data Science, you name it on our blog so check it out:

KoalaTea.io

🌟🌟🌟

How to update all your NPM packages at once

Craig Holliday — Tue, 04 May 2021 20:42:31 +0000

You come back to a 6-month-old project that you haven't touched in a while and now all of your NPM packages are vastly out of date. That's just the speed at which web development moves.

So you need to update all your packages, how can we do that?

The safe method

NPM does provide a command to update packages. This is the command:

npm update --save/--save-dev

Though this only updates to the latest minor version. For example, 1.0.5 to 1.1.0.

So if we have a major version change like 1.0.5 to 3.1.3, this command will only update to the highest version before 2.0.0.

A major version can introduce breaking changes to packages that can break your project. Because of this, the above command promotes manually updating packages.

Manually updating your packages can be great to reduce the chance of a package breaking your application without you noticing.

But we haven't touched this project in months and we want to get everything up to date that we know won't break our application (and if it does we will suffer the consequences).

The less-safe method

To update our NPM packages we will reach for another NPM package.

This package is called npm-check.

https://www.npmjs.com/package/npm-check

Now, npm-check will not just update your packages with no regard to the consequences. Instead, npm-check will allow you to interactively check and choose what packages to update.

To use npm-check we will install it globally and then we can use the command to interactively update our packages.

Use npm install -g npm-check to install the package globally.

Use the npm-check command to interactively update packages

When using the npm-check command we will see the below in our command line allowing us to see what packages we can update.

That's it!

There are more ways to update your packages either automatically or with other packages, but this is a super simple one that you can start using today.

Try this out the next time you have a project that needs to be updated!

Shameless Plug

If you like what you read also check out my brother and my blog where we post this and tons of other content!
👉 https://koalatea.io/ 👈

And here is this post on our blog!

How to start a TypeScript project [2021]

Craig Holliday — Tue, 27 Apr 2021 23:39:44 +0000

If you are learning TypeScript you can have a hard time finding out a simple way to start TypeScript projects from scratch. Depending on if you are coming from JavaScript or a statically typed language like Go, Swift, or Kotlin you may have an expectation for how your project should work.

For my JavaScript friends, you may just want something to start working right now.

For the statically typed crowd, you may want auto-completion, compiler errors in your IDE, and a simple zero-config compilation. For anything related to the IDE use VSCode and you will be golden.

To satisfy everyone, let's go over simple ways to set up a TypeScript project.

Keep in mind

TypeScript is a statically typed language that is a superset of JavaScript. Because of this TypeScript transcompiles to JavaScript.

How? Well with a compiler of course. TypeScript compiler (TSC) or Babel to be exact.

No matter what platform or tool you are using, at some point, they will use a TypeScript compiler because at the end of the day we still have to execute JavaScript.

If you want to learn the fundamentals of TypeScript go ahead and check out the official handbook.

Setting up a TypeScript Project (The absolute simplest way)

In my opinion, the simplest way to execute JavaScript is by installing Node and running node coolfile.js.

So in my opinion, the easiest way to compile and execute TypeScript is by installed Node and a package called ts-node and using ts-node to execute your TypeScript the same way you would with node.

The short of what ts-node does is run node and tsc together to compile then run the compiled JavaScript in a single command.

# Locally in your project.
npm install -D typescript
npm install -D ts-node

# Or globally with TypeScript.
npm install -g typescript
npm install -g ts-node

# Execute a script as `node` + `tsc`.
ts-node script.ts

Setting up a TypeScript Project (Libraries)

There is another simple way to start a project for experimenting or for platform-agnostic libraries.

The simple way is by using a zero-config CLI called TSDX.

With this, you'll create a library with TSDX which will set up everything you need to run, build, lint, and test your project or library.

npx tsdx create mylib
cd mylib
yarn start
yarn build
yarn lint
yarn test

I found out about TSDX via TailwindCSS's TailwindLabs GitHub where they have a tailwindcss-intellisense project (a VSCode extension for Tailwind autocomplete, syntax highlighting, and linting). This project contains a "language service" package that is agnostic to the platform it is being used in hence TSDX being a good use case for the library.

TSDX also works with React but I have not tried using it for that yet. I would usually rely on the CLI that comes with whatever framework I am using.

Setting up a TypeScript Project (Frameworks)

If you are starting a TypeScript project with a framework you are in luck, most if not all of the frameworks support TypeScript now.

Let's go over a few frameworks to show the support and provide some useful links.

Angular

Angular uses TypeScript as the primary language for development. So for Angular, all you have to do is continue to use the Angular CLI as usual.

If you've been using Angular you are probably way ahead of the game on using TypeScript.

https://angular.io/guide/typescript-configuration

React

For React we have some frameworks in our frameworks.

Here are the most popular React frameworks and links about adding or their support for TypeScript.

Create React App

Gatsby

Next.js

Vue

Vue 3 is written in TypeScript so there is no additional tooling needed to use TypeScript with Vue 3.

https://v3.vuejs.org/guide/typescript-support.html#official-declaration-in-npm-packages

If you are still using Vue 2 for some reason, the Vue CLI still had support for TypeScript so you are all good.

https://vuejs.org/v2/guide/typescript.html

Node

Getting TypeScript set up with some Node.js frameworks has been a bit of a pain here and there but that is a larger discussion.

The issue is really with getting these frameworks to be very strict with TypeScript.

Either way, you should be able to set up TypeScript for Express or Fastify fine.

Here's a quick Typescript with Express tutorial from LogRocket.

Fastify has Typescript support and I've recently used this generator package to get a project started quickly. There were some small changes I made to the generated project to fit my TypeScript style.

Lastly, take a look at NestJS because this framework is doing a lot of cool stuff. It has full TypeScript support, is built like Angular, and unfortunately has a learning curve.

I'm interested to hear about your experience with Node frameworks and TypeScript so let me know!

Wrapping Up

Those are some of the simple ways to start a project in TypeScript. TypeScript and web tooling can be scary and cumbersome as you are starting out. Especially if you are used to all-in-one platforms.

TypeScript enables a great new way to develop web applications and can help a lot with some of the confusion for new developers jumping into web development. (Of course, that always comes with tradeoffs 😅)

Remember to not get bogged down about a tool or tools to work correctly at first and don't try to do everything at once for your first TypeScript project.

Most importantly, have fun!

If you like what you read also check out my brother and my blog where we post this and tons of other content!
👉 https://koalatea.io/ 👈

And here is this post on our blog!

Resources

TypeScript Handbook

TypeScript Bootstrap (Lots of links to different tools and platforms)

You are at the end of the post so legally you have to:
🌟 Follow me on Twitter 🌟

Ring Upp - DO Hackathon - Part 4/4 - Submission

Craig Holliday — Wed, 06 Jan 2021 19:23:31 +0000

What I built

I built a video chat app using WebRTC where you can chat with up to 3 people. This application works on mobile and desktop, allows you to screen-share, has other functionality you'd expect from a video app, and is the start of a bigger video chat application.

Right now this application is minimal but has the beginnings of a commercial video app or more likely a module you can implement in other applications to provide video chat functionality. Other products like this would be Whereby and Daily.co.

Category Submission:

Built for Business

App Link

https://ringupp.com/

Screenshots

Description

Ring Upp is a video chat app where you can chat with up to 2 other people on mobile and desktop with no signup.

The flow is simple:

Pick a name for your chat
Share the URL
Start chatting

The video chats are free, real-time, and HD quality utilizing WebRTC to connect clients directly.

Link to Source Code

https://github.com/KoalaTeaCode/ringupp

Permissive License

MIT

Background

I explained this a bit more in my series of posts but basically, this application has been on my to-do list for a long time. This hackathon was a great excuse to work on this side project. I have also been working on an app called Cafecito, an app where you can meet new people remotely over video, with a fantastic team that I hope some of the takeaways from this project can help with.

This is my first hackathon but since I've been in the Dev.to community lately, I was inspired to give this one a try. I was not disappointed.

How I built it

More of this in my series of posts.

That being said, I used App Platform to host my Node.js app which was simple and quick to set up. In this project, I also learned a lot about connecting peers using WebRTC which is a great bit of knowledge to have since WebRTC is continuing to gain traction.

Additional Resources/Info

Express JS

Twilio STUN/TURN (A huge part of connecting with WebRTC)

WebRTC Samples

How WebRTC works

Ring Upp - DO Hackathon - Part 3/4 - Final Touches

Craig Holliday — Wed, 06 Jan 2021 19:23:17 +0000

Last post we talked about how Ring Upp was built. Now let's talk about final touch-ups and deploying.

Final Touch-Ups

Only a few things still need to be done:

Code cleanup
- Just a little sweeping and polishing. Gotta keep that code clean. I only used Prettier for this project but ESLint and Prettier are usually the go-to.
README, LICENSE, writing these posts
- A short README to get anyone started developing with the project. A LICENSE file to say the project is under an MIT license. Then I have to write these posts so I can submit my application to DO Hackathon and everyone can use this app!
Using the app every day
- To make sure everything works and to find bugs, my brother and I have been using the app for our daily calls. This has been extremely valuable because we tested on Windows, Mac, iOS, Firefox, Chrome, and Safari which exposed several bugs. I can't stress enough how valuable it is to use your software every day and to have something that solves a problem you have.
Deploying (Below)

Deploying

Alright now here's what the DO Hackathon is all about: Deploying my awesome app to a platform that will allow me to focus exclusively on my app.

And how did DigitalOcean App Platform work? Very well and on-par with my experience on other platforms.

For this project, I am mainly comparing my experience with App Platform to Heroku. While developing and testing Ring Upp I deployed the application with Heroku since I already had an account setup and I was waiting for the complimentary $50 credits from the hackathon.

This was fine until I was into the final stages of development and I was ready to take on the challenge of moving my project over to App Platform. Except it wasn't a challenge. My account was set up and ready with Digital Ocean, I navigated to App Platform, followed the instructions to point App Platform to my GitHub repository, and my application was deployed to Digital Ocean App Platform.

I had no issues settings up my application and App Platform does a great job onboarding your project onto their platform. Going forward I will be looking at how App Platform handles an application at load and my options for scaling.

So far I am very happy with App Platform and am excited to start deploying my side projects to it.

Final thoughts

This project has been on my to-do list for a while and would still be on my to-do list if not for this hackathon. I appreciate Dev.to and Digital Ocean for putting this hackathon on and the community for all of the fantastic engagement that I've seen so far.

If you have questions about the project feel free to message me or comment and I'll get back to you.

If you are thinking about joining the next hackathon, do it! It's a ton of fun and a fantastic way to have a deadline for a small project you've had on your to-do list.

Ring Upp - DO Hackathon - Part 2/4 - Building

Craig Holliday — Wed, 06 Jan 2021 19:23:04 +0000

Last post we decided what to build. Now let's talk about how to build.

We built a video chat app that we can separate out into 3 different parts: Backend, User Interface, WebRTC video chat business logic.

Backend

We'll start with the backend because it will be the backbone of our application. Since this is a small app instead of creating a backend and a React frontend (which is my go-to), the project only needs to be a simple Node.js Express app.

I'm comfortable and familiar with Node.js so this was my first choice but any framework will work for such a simple application.

The backend should only do two things. Serve our app and use web sockets to start connections in our chat rooms. More on this below.

One thing to note here, don't start with a blank slate. Pull from a template or walk through a getting started with Express tutorial. There's no reason not to copy someone's starting point and it makes things a lot less scary. A big part of starting side projects is reducing the barrier to entry.

User Interface

The user interface is simple except for the actual chat page. What makes the chat page less than simple is that there are multiple features like screen sharing, multiple users, enabling and disabling video and audio, and input selection. All the features and more that are planned complicate the UX so while developing we have to balance usability and features.

While the UI/UX can get complicated the way we build them was not. Since this is an Express app we will return the HTML, CSS, and JS when the clients make requests to different endpoints. To simplify the CSS we used Tailwind CSS (my new favorite CSS framework).

Take a look at the source code for a look at how the pages are handled. They can’t get much simpler.

WebRTC video chat business logic

This is the real meat of the application.

From an extremely high level this is what the chat logic is:

Client joins a "Room" and opens a web socket to the server
Another client joins a "Room" and notifies the server of the join
The server then tells both clients to start a connection with each other
Clients connect using Twilio's STUN capabilities for WebRTC. (I'll put some good articles about WebRTC and how/why this connection happens)
Clients are now connected and a room can accept one more connection. The server will then say the room is "full"

To implement this there was a lot of looking through other implementations. WebRTC has a "samples" repo on GitHub that I highly recommend you take a look at.

This also took a lot of trial and error, testing with multiple users, multiple browsers, and remote connections. The application is still not perfect. The main problem I am still having is reconnecting after connection issues but this is a great MVP.

For more information on how this works please look at the source code and check out these links:

Twilio STUN/TURN (A huge part of connecting with WebRTC)

WebRTC Samples

How WebRTC works

I would love to go into more detail about WebRTC but that will have to be another series.

Next post let's talk about finishing touches and deploying.

Ring Upp - DO Hackathon - Part 1/4 - First Steps

Craig Holliday — Wed, 06 Jan 2021 19:22:52 +0000

First off, I was super excited to have an excuse to work on a side project with a deadline and an end goal. As well as have a chance to try hosting my project on DigitalOcean App Platform.

Usually taking time to work on a side project is difficult because the project may be fun but not have a clear way to make money or a project may have a way to make money/be successful but then can feel like regular work.

This is a great balance between working on something I enjoy and being able to share with the community and also win a contest.

Now to the first steps.

First steps

What to work on? So many projects so little time.

Three projects came to mind for this contest.

Covid related dashboard or something related to tracking helpful covid data.
A QA app to track test cases in test suites to be run by QA engineers.
A video chat app.

The covid dashboard would be an interesting project to work on, but with a short timeline, it's not something I would want to start. It would take more time to research and more effort than I could give right now.

The QA application is something that has been on my list for a while. I had previously built an MVP that works well enough to build user stories and run through tests. Unfortunately, I built it 2 years ago and know so much more about development and what I would want out of the QA project that I may as well rewrite the entire application. This is a useful application that is on my list but once again would take too much time.

So that leaves the video chat app.

The video chat app

I am a Development Manager and Video Engineer as my full-time job and love working on video applications. On my list for a long time is a video application using WebRTC.

A few months ago I listened to an episode of Syntax.fm that interviewed a developer talking about a simple video chat application they built. It is a great episode about learning new technology and building a simple app while learning. That along with the changing landscape of video moving towards WebRTC made this a great application to build right now.

So that's what I set out to build! Oh also the app won't just be between peers it will be between a max of three. So added a bit more of a challenge there.

Let's lay out what we need for the project:

Landing page
A page to create a new call
A page for the video chat to take place
Pages to direct unsupported browsers to
All of the business logic of connecting users with WebRTC and keeping them connected

I won't go too deep into every part of every feature. But in my next post, I'll give some high-level overviews of everything listed above.

How to achieve Zen in VS Code

Craig Holliday — Wed, 25 Nov 2020 18:24:02 +0000

You're staring at VS Code, and in front of you is this cluttered mess with random things everywhere that no-one could ever make sense of. But enough about your code, let's talk about how we can make VS Code look so clean to help us achieve true Zen.

To start, let's go through the VS Code user interface and see how we will leverage VS Code's built-in features to hide any part of the interface that will interfere with our Zen.

Here is a video version of this post if that is more your speed:

VS Code User Interface

The user interface is broken up into 5 parts:

Editor - The main area to edit your files. You can open as many editors as you like side by side vertically and horizontally.
Side Bar - Contains different views like the Explorer to assist you while working on your project.
Status Bar - Information about the opened project and the files you edit.
Activity Bar - Located on the far left-hand side, this lets you switch between views and gives you additional context-specific indicators, like the number of outgoing changes when Git is enabled.
Panels - You can display different panels below the editor region for output or debug information, errors and warnings, or an integrated terminal. Panel can also be moved to the right for more vertical space.

VS Code has a ton of different panels, bars, and groups because VS Code can do so many things!

We will take a look at hiding these parts one by one but first let's look at a feature of VS Code that will hide everything except the editor, called Zen Mode.

Zen Mode

From the VS Code docs, "Zen Mode lets you focus on your code by hiding all UI except the editor (no Activity Bar, Status Bar, Side Bar and Panel), going to full screen and centering the editor layout."

Zen Mode in VS Code looks like this:

This is a great built-in feature that also allows us to customize this mode to our liking.

Some recommended tweaks would be to disable making VS Code fullscreen and disable centering the layout. This way you can be in Zen Mode and still control the size and position of your VS Code window.

You can disable fullscreen and center layout by adding the following to your settings.json by running the command (cmd + shift + p) Preferences: Open Settings (JSON):

"zenMode.fullScreen": false,
"zenMode.centerLayout": false,

Or you can open the UI for settings by running the command (cmd + shift + p) Preferences: Open Settings (UI) and searching for "Zen Mode" to uncheck those two options.

With Zen Mode and a couple of custom configurations, we are 90% of the way to our ultimate goal of a completely zen VS Code experience.

Before we make the last 10% let's go over what is hidden when we toggle Zen Mode.

What does Zen Mode hide?

By default, Zen Mode hides every part of the user interface except the Editor. Let go through each part and how you can hide them yourself without toggling Zen Mode. This can be helpful if you just need one or two parts of the user interface out of your way instead of everything but the editor.

Activity Bar and Side Bar

These are the two parts on the left of the user interface.

The Activity Bar can be hidden by running the command (cmd + shift + p) View: Toggle Activity Bar Visibility.

There is not a default keyboard shortcut set but you can always set one that works for you.

The Side Bar can be hidden by running the command (cmd + shift + p) View: Toggle Side Bar Visibility.

The default keyboard shortcut for this is cmd + b

Panel and Status Bar

These are the two parts at the bottom of the user interface.

The Panel can be hidden by running the command (cmd + shift + p) View: Toggle Panel.

The default keyboard shortcut for this is cmd + j

The Status Bar can be hidden by running the command (cmd + shift + p) View: Toggle Status Bar Visibility.

There is not a default keyboard shortcut.

The last 10% to zen

The default Zen Mode has us 90% of the way to complete Zen but there are a few user interface elements that are still in our way.

Those elements are the Minimap and Indent Guides. So let's look at how to hide them.

Minimap

The Minimap is inside the editor part on the right-hand side and gives a zoomed-out look of the file you have open.

The Minimap can be hidden by running the command (cmd + shift + p) View: Toggle Minimap.

There is not a default keyboard shortcut.

Indent Guides

Indent Guides are thin vertical lines that show an indent in your file.

Unfortunately, these still show up in the default Zen Mode because they have to be disabled in settings like this "editor.renderIndentGuides": false,.

We don't want them off all the time so we will need a way to toggle the Minimap and Indent Guides when going into Zen Mode.

Toggle Minimap and Indent Guides

To be able to toggle the Minimap and Indent Guides when we toggle Zen Mode we will have to install two extensions.

Settings Cycler and multi-command.

These allow us to set up settings to toggle and give us the ability to run multiple commands with one keybinding.

To oversimplify these steps, after you install these two extensions you can add this snippet to your settings.json

// multiCommand
"multiCommand.commands": [
    {
        "command": "multiCommand.betterZenMode",
        "sequence": [
         "workbench.action.toggleZenMode",
         "settings.cycle.zenModeExtras",
        ]
    },
],
// Settings cycle
"settings.cycle": [
{
    "id": "zenModeExtras",
    "values": [
            {
                "editor.lineNumbers": "off",
                "editor.folding": false,
                "editor.renderIndentGuides": false,
                "editor.minimap.enabled": false,
            },
            {
                "editor.lineNumbers": "on",
                "editor.folding": true,
                "editor.renderIndentGuides": true,
                "editor.minimap.enabled": true,
            }
        ]
    }
],

And this snippet to your keybindings.json

{
 "key": "cmd+k z",
 "command": "extension.multiCommand.execute" ,
 "args": { "command": "multiCommand.betterZenMode" },
},

Conclusion: A Better Zen Mode

With everything set up, when we use the keybinding cmd + k z our VS Code editor will go into our new Better Zen Mode that looks like this.

Combining the current Zen Mode and our custom configurations we can achieve complete zen when viewing our code. Making the code look good, we will leave to you.

And here is a comparison of the normal editor, Zen Mode editor, and our Better Zen Mode editor.

🌟 Thanks! 🌟

Thank you for reading! Let me know what you think of this Better Zen Mode and any tips you have around making VS Code look great.

You can follow me on Twitter if you're looking for some more content:

https://twitter.com/TheMrHolliday

If a blog is more your thing here is that as well:

https://koalatea.io/

A TON of VS Code tips for productivity

Craig Holliday — Tue, 10 Nov 2020 17:03:30 +0000

Being productive in VS Code can help you focus on just your code or can speed up some repetitive tasks you are doing. To start being productive all you need is to learn a few keyboard shortcuts and install a few extensions.

So here are some VS Code tips that help me every day.

Note: This was written for Macs and I would love some help translating this post to work with Windows

Here is a video version if that's more your speed:

This was also posted on our blog

VS Code CLI and the integrated terminal

VS Code CLI

VSCode has a CLI to open VS Code directly from your terminal.

Install it with these simple steps:

Launch VS Code
Open the Command Palette (shift+cmd+p) and type 'shell command' to find the Shell Command: Install 'code' command in PATH command.

Restart the terminal for the new \$PATH value to take effect. You'll be able to type 'code .' in any folder to start editing files in that folder.

If you're having issues go here to the documentation

Integrated Terminal

VS Code has an integrated terminal you can open and start using directly in VS Code. If you didn't know, now you know 💁‍♀️. And you have to start using it.

It works exactly like your current terminal and you can open it like this:

Use the ⌃` keyboard shortcut with the backtick character.
Use the View > Terminal menu command.
From the Command Palette (shift+cmd+p), use the View: Toggle Integrated Terminal command.

Refactoring with Rename Symbol

Naming is the hardest and most important part of programming. That's just how it is, I don't make the rules.

You are going to be renaming a lot while building your Twitter competitor. So let's make that much easier.

To rename a symbol (in some languages even across multiple files) press F2 after selecting the symbol you would like to rename. Then type away and you just saved yourself 100s of hours (over the course of many many years, of course).

Multiple selections (multi-cursor)

Now here is the tip that will change your life. Write this down, bookmark it, remember this, or whatever. This is just the best tip and you'll use it all the time.

Multiple-cursors can be added and operate independently based on the context it sits in.

So there are a few ways you can add multiple-cursors.

alt+click which will add a new cursor on every click.

alt+cmd+down or alt+cmd+up that will insert cursors below or above respectively.

cmd+d selects the word at the cursor or the next occurrence of the current selection adding a cursor at each word.

shift+cmd+l will select each occurrence of the currently selected text adding a cursor to each selection.

You can also check out the Multi Line tricks extension which will allow you to add a cursor at the end of each selected line with alt+shift+l

Command Palette

VS Code's command palette makes VS Code completely accessible using only the keyboard. Typing shift+cmd+P will bring up the Command Palette allowing you to access all of the functionality of VS Code.

Here are a few shortcuts for the most useful commands:

cmd+P will let you navigate to any file or symbol by typing its name
ctrl+tab will cycle you through the last set of files opened
shift+cmd+P will bring you directly to the editor commands
shift+cmd+O will let you navigate to a specific symbol in a file
alt+G will let you navigate to a specific line in a file

User Interface Navigation

The user interface is broken up into 5 parts:

Editor - The main area to edit your files. You can open as many editors as you like side by side vertically and horizontally.
Side Bar - Contains different views like the Explorer to assist you while working on your project.
Status Bar - Information about the opened project and the files you edit.
Activity Bar - Located on the far left-hand side, this lets you switch between views and gives you additional context-specific indicators, like the number of outgoing changes when Git is enabled.
Panels - You can display different panels below the editor region for output or debug information, errors and warnings, or an integrated terminal. Panel can also be moved to the right for more vertical space.

Here are some shortcuts to help you navigate the UI:

shift+cmd+E Explorer (A)
shift+cmd+F Search (A)
shift+ctrl+G Source Control (A)
cmd+shift+D Run Panel (A)
cmd+shift+X Extension Panel (A)
cmd+b Toggle Side Bar visibility (B)
ctrl+cmd+w Toggle Tab visibility (C)
cmd+j Toggle open bottom panel (D) with Terminal, Problems, Output, Debug Console

More Keyboard Shortcuts

There are a ton of keyboard shortcuts available in VS Code. We'll go over some general shortcuts now and more detailed tips for each feature.

General

alt+Z Toggle word wrap. If you have long lines in your file and need to see everything without formatting each line.
cmd+F Search in the current file
alt+shift+left / alt+shift+right Make selection by word
cmd+D Finds and selects the next match for the currently selected word.
cmd+down / cmd+up Move cursor to end/beginning of the current file
cmd+left / cmd+right Move cursor to end/beginning of current line
alt+left / alt+right Move cursor by word
ctrl+- / ctrl+shift+- Go back and Go forward. This is across files and selections. So if you move files you can go back forward. If you go to the bottom of a file and make a selection you can Go back to your previous selection.
shift+ctrl+cmd+left / shift+ctrl+cmd+right Expand or shrink block selection. This is useful for selecting a component, function, HTML element, etc.
F12 / cmd+click Jump to definition

Editing

cmd+X When not selecting text will cut the current line
cmd+shift+K Delete current line
shift+down / shift+up Move a selection up or down.
alt+down / alt+up Move a line up or down.
shift+alt+down / shift+alt+up Copy line or selection and paste below or above line or selection.

Resources

https://marketplace.visualstudio.com/items?itemName=bigous.vscode-multi-line-tricks

https://www.vscodecandothat.com/

https://www.xiaoru.li/post/vscode-tricks/

https://www.telerik.com/blogs/7-vs-code-productivity-hacks-17-extensions-that-will-change-your-life

https://code.visualstudio.com/docs/getstarted/tips-and-tricks

https://dev.to/mokkapps/how-i-increased-my-productivity-with-visual-studio-code-gfo

https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette

https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor

https://code.visualstudio.com/docs/editor/editingevolved#_rename-symbol

https://code.visualstudio.com/docs/editor/integrated-terminal

https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line

https://code.visualstudio.com/docs/getstarted/userinterface