DEV Community: Sarah Harrington

Operator Mono, Ligatures & Italics

Sarah Harrington — Wed, 27 Sep 2023 18:03:32 +0000

At the beginning of my coding journey, I was watching a video by Wes Boss and fell in love with the Operator Mono font. I loved it so much but couldn't justify $200 on it at the time.

This year, I finally splurged on it since I stare at my code editor every single day. I had done this set up once and got it working but recently forgot how I did it. So here's a recap now that I've got it working again.

You need to purchase the Operator Mono font.

I used this gist for getting italics to show as cursive. There are so many different customizations for what you want this to look like so if you're not digging this particular one, definitely do some research.

I really love ligatures, they make my brain happy. To get ligatures working with Operator Mono, I used operator-mono-lig. They have instructions for how to get this to work for Windows, Mac and Linux so hopefully your bases would be covered.

Both times I've done this I've gone and updated my VS Code settings before remember install the font, so don't be like me and remember to grab those from the build folder first.

One thing I found that differs from the operator-mono-lig documentation is that I needed to add my font as Operator Mono Lig.

My settings.json:

{
    "workbench.colorTheme": "In Bed by 7pm",
    "workbench.sideBar.location": "right",
    "security.workspace.trust.untrustedFiles": "open",
    "editor.fontFamily": "Operator Mono Lig, Menlo, Monaco, 'Courier New', monospace",
    "editor.tabSize": 2,
    "files.autoSave": "afterDelay",
    "editor.minimap.enabled": false,
    "editor.fontLigatures": true,
    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
            "scope": [
                //following will be in italic
                "comment",
                "entity.name.type.class", //class names
                "constant", //String, Number, Boolean…, this, super
                "storage.modifier", //static keyword
                "storage.type.class.js", //class keyword
                "keyword", //import, export, return…
            ],
            "settings": {
                "fontStyle": "italic"
            }
            },
            {
            "scope": [
                //following will be excluded from italics (VSCode has some defaults for italics)
                "invalid",
                "keyword.operator",
                "constant.numeric.css",
                "keyword.other.unit.px.css",
                "constant.numeric.decimal.js",
                "constant.numeric.json"
            ],
            "settings": {
                "fontStyle": ""
            }
            }
        ]
    },
    "editor.fontSize": 14
}

Which gives me this:

Canvas Playground, deployment woes

Sarah Harrington — Fri, 15 Sep 2023 14:47:47 +0000

When I was looking up info on how to deploy my socket.io server to AWS I ran across a post about using API Gateway sockets which was released back in 2018 after I initially created my project. About 30 tabs later and a mushy brain I got back to my original plan of using EC2, S3 and CloudFront (which also lead to a very mushy brain, more to come on that).

Setting up AWS CLI

I recently switched over to a new Macbook and decided to set up a fresh dev environment which meant I needed to set up the AWS CLI again. I installed the AWS CLI using Homebrew. After installing the AWS CLI you can configure your settings for your needs.

EC2

I started out with creating a Debian Linux server on EC2 that I logged in to using SSH. I am very fortunate that my partner is a Dev Ops Engineer and walked me through setting up a SSH Alias. Does it get any better than having a literal in house expert?

Once I was in, I was able to install Node and upload the server for my project. To get things up and running I'm using scp to upload my files with a goal to make a more automated process once I've got things working.

S3

I created a bucket for my project and synced the files using the AWS CLI S3 sync command.

CloudFront

I created a new CloudFront distribution for this project that has two origins, one pointed at the EC2 instance for my backend and one pointed at the S3 bucket for my project. I set up a behavior for the EC2 instance for the path pattern /socket.io/ since that is amended to all of the outgoing requests from the socket.io client side code.

Route53

I use Route53 for DNS on my portfolio site. I created an A record for canvasplayground.sarahdoes.tech so the site could have it's own unique URL.

I pulled up the site and was super excited until I noticed that it didn't show any connected users.

I looked in the console and see 400 errors

After consulting with the in-house expert and Google, I have not been able to find a solution for the 400 from the server. CloudFront is acting as a reverse proxy and there are some specific callouts for using Socket.io with reverse proxies in the Socket.io documentation but nothing specific to CloudFront. I ran across some other inquiries from others on how to make this work but no solutions.

I'm exploring what other options I have for getting this project up and running.

API Gateway sockets
Using standard websockets since they should be compatible with CloudFront
Sticking with socket.io and hosting the front end on my EC2 instance

I was looking forward to being able to using socket.io to implement some features I think could be fun so I'm debating the decision to keep going with that against switching to a different websocket strategy.

Canvas Playground: broadcasting & pens

Sarah Harrington — Tue, 05 Sep 2023 19:42:47 +0000

One thing I struggle with when learning something new is feeling like I don't have progress to show. Today I've spent time looking at DynamoDB and EC2 so I can start determining how I want to deploy the server and potentially store the drawing actions but that would leave me without a visible progression.

Pens

To do something on that front, I decided to tackle making it possible to change color schemes for the pens and fixed a bug where the pen color was getting stuck.

The first step was moving the pens in to their own component.

Pen.tsx

interface PenProps {
  color: {
    value: string;
    name: string;
  }
  changeColor: MouseEventHandler;
}

export default function Pen({ color }: PenProps) {
  return (
    <button 
      className='paint-button' 
      value={color.value} 
      onClick={changeColor}
    >
      <span 
        className='material-symbols-outlined' 
        style={{color: `${color.value}`}}
      >
        brush
      </span>
    </button>
  )
}

This component is receiving the pen color object and the changeColor function from the parent.

I wanted to make it so once the pen was selected it would maintain a class on :active. To do that, I passed in the currently selected color and updated the class on the pen to include the class selected if the pen color value and the activeColor matched.

interface PenProps {
  color: {
    value: string;
    name: string;
  },
  activeColor: string;
  changeColor: MouseEventHandler;
}

export default function Pen({ color, activeColor, changeColor }: PenProps) {
  return (
    <button 
      className={`paint-button ${activeColor === color.value ? 'selected' : ''}`} 
      value={color.value} 
      onClick={changeColor}
    >
      <span 
        className='material-symbols-outlined' 
        style={{color: `${color.value}`}}>
          brush
      </span>
    </button>
  )
}

Broadcasting

When I was setting up the server, I was sending back out the drawing events from the server, I just did a generic emit on the server so it would send the event back to all connected sockets. That worked, but I don't need the original socket sending info to get it back. To do this, I updated the server to use the broadcast flag after it receives the userIsDrawing event to broadcast that back out to the other attached sockets.

original:

  socket.on('userIsDrawing', (e) => {
    io.emit('userDrawing', e)
  })

broadcasting:

  socket.on('userIsDrawing', (e) => {
    socket.broadcast.emit('userDrawing', e)
  })

Tiny changes felt like some nice progress today:

Canvas Playground, Starting Again

Sarah Harrington — Mon, 04 Sep 2023 23:54:39 +0000

After completing my full stack software engineering bootcamp, JavaScript frameworks felt like ✨magic✨ and I wanted to understand how they worked. This began my journey with Vanilla JavaScript where I made a series of projects for my portfolio (including the site itself) using Vanilla JS. One of the things I love about the these projects is that they still work great today. I've been able to move them from different hosting providers and once they're loaded and I've got my DNS set up we're off and running.

With the potential to start job hunting looming, I thought it would be a good time to dig back in to React since it's been over a year since I used it last. It seemed like remaking some of these former projects in React with TypeScript would be a fun challenge where I didn't have to come up with an idea for a whole new project.

Canvas Playground

Canvas playground was a project I put together during the summer of 2018. It used:

Vanilla JS
Socket.io

I had this running on a server in Linode for quite a long time but have since decided to move away from Linode in favor of AWS. It's not currently working since I need to do some work to get the server running on an AWS EC2 instance.

Github Rep

New project goals

As I'm starting again, I'd like to:

use React with TypeScript
host everything on AWS
use socket.io
add some sort of permanent storage solution for drawings
ask users to enter their name & display who is drawing

Stretch goals:

incorporate canvas rooms
user tokens so users can come back and see their drawings
push my UI instincts out of my normal box

Getting started

Deciding to write as I work through this process was made after I started, so I've already made some progress on the project and we'll be playing some generalized catch up here. I'm planning for future posts to go in to more detail about what I'm doing.

I typically love to wireframe if I'm starting on something new, but since this is something I previously made, I'm starting with a general idea in mind with things I know I wanted to change/improve from last time.

Progress so far

Front End

The React app is up and running using TypeScript. I've started with creating the general layout and minimal styling so far.

To get Socket.io working with React, Socket.io docs have a really helpful guide. I leaned on this pretty heavily to get the sockets working.

On the UI side of things, I was struggling with getting the mouse events for mouseup, mousedown, mousemove working quite right with the canvas and React. I knew I needed to be using hooks, but wasn't sure what would be the best method for them. After some googling I ran across this tutorial which was exactly what I needed. I had not previously used useCallback or useRef and this was a great way to learn more about these two hooks.

Once I got the canvas events drawing the way I wanted, it was time to send the events to the server so they could be broadcast.

Back End

Getting the server going took me longer than I thought it would, I hadn't realized how long it had been since I've started a server from scratch!

As a user is drawing it's sending an event to the socket server which is then emitting that back out to all of the connected sockets. I'd like to update this so it's using the broadcast feature since it doesn't need to go back to the original connection.

Up Next

updating the server to use Node with TypeScript
user tokens and storage options (Maybe DynamoDB?)
hosting the socket server on AWS