DEV Community: F53

My Style Strategy

F53 — Thu, 28 Sep 2023 19:18:52 +0000

The conventional way people write CSS is hard to read, maintain, and keep consistent.

What's wrong with conventional selectors?

Conventional selectors bake in their entire component scope along-side what the element actually is.
This leads to very long, repetitive ids and classes in the DOM:

<div id="componentName">
  <p>...</p>
  <div id="componentName_thingContainer">
    <span class="componentName_thingContainer_thing"></span>
    <span class="componentName_thingContainer_thing"></span>
  </div>
</div>

Along with repetitive selectors in the css:

#componentName { /* top-level component styles */ }
#componentName_thingContainer { /* container styles */ }
.componentName_thingContainer_thing { /* entry styles */ }

If you ever see the same repetitive text while programming, you are probably doing something wrong.
So what can we do different?

A DRYer method to selectors

Make your class/id just describe what the element is on its own:

<div id="componentName">
  <p>...</p>
  <div id="thingContainer">
    <span class="thing"></span>
    <span class="thing"></span>
  </div>
</div>

Then, in css scope your styles from the top down, with descendant or child selectors:

#componentName { /* top-level component styles */ }
#componentName > #thingContainer { /* container styles */ }
#componentName > #thingContainer > .thing { /* entry styles */ }

This still isn't very dry, so we can use CSS nesting with a preprocessor like Scss:

#componentName {
  // top-level component styles
  > #thingContainer {
    // container styles

    > .thing { /* entry styles */ }
  }
}

Using nesting for css selectors like this also means there is a set location for selectors, leading to a better experience while writing and maintaining:

no more indecision, "Where do I put the styles for search results?", the answer is always the descendent/child of whatever above it has an id/class
no more searching, "Where on earth are the styles for this input?", just follow the same path found inside the component html/jsx

How to implement utility classes

Very often you will find yourself writing the same set of rules all over your codebase, for example:

#searchResults { display: flex; flex-direction: column; }
#navContainer { display: flex; flex-direction: column; }
#options { display: flex; flex-direction: column; }

So just break out common styles that you use into classes in global scope:

.row { display: flex; flex-direction: row; }
.col { display: flex; flex-direction: column; }
.spaceBetween { justify-content: space-between; }
.spaceAround { justify-content: space-around; }
.spaceEvenly { justify-content: space-evenly; }

Super classes

If you see yourself using the same set of utility classes over and over together like this:

<div id="confirmationModal" class="col gap1 centerChildren elv0 pad1 rad1"></div>
<section class="searchResult col gap1 centerChildren elv0 pad1 rad1"></section>
<div id="filterSelector" class="col gap1 centerChildren elv0 pad1 rad1"></div>
<div id="userSettings" class="col gap1 centerChildren elv0 pad1 rad1"></div>

Make a superclass that combines them:

.panel {
  /* all of the rules contained within col, gap1, centerChildren, elv0, pad1, and rad1 */
  /* for extra points use something like scss's @mixin and @include */
}

Utility classes > raw rules

When utility classes are available, use them to write the least code required to accomplish what you want.
This means favoring them over writing the rules within the component.

Instead of:

<div id="componentName">
  <p>...</p>
  <div id="thingContainer">
    <span class="thing"></span>
    <span class="thing"></span>
  </div>
</div>

#componentName {
  // all of the rules contained within panel
  // a couple of rules that aren't in any utility class

  > #thingContainer {
    // all of the rules contained within col centerChildren gap1

    > .thing { /* entry styles */ }
  }
}

Do:

<div id="componentName" class="panel">
  <p>...</p>
  <div class="col centerChildren gap1">
    <span class="thing"></span>
    <span class="thing"></span>
  </div>
</div>

#componentName {
  // a couple of rules that aren't in any utility class

  .thing { /* entry styles */ }
}

Keep it organized

If you want other people to work on your project, you should make sure people can find what they are looking for.

Here is an example:

misc.scss
- stuff that doesn't fit elsewhere, like font declarations
components.scss
- default HTML components, like input/textarea/
- large utility super classes, like .panel from an earlier example
layout.scss
- utility classes that control positioning
- super classes for common layouts like pages with a sidebar
variables.scss
- standardized colors/sizes/shadows
util.scss
- utility classes that don't fit anywhere else
- classes to apply variable values:
- .bg0 for the lowest background color
- .shadow for applying a standard box-shadow

System Wide Dark Mode For Windows

F53 — Thu, 27 Apr 2023 23:02:04 +0000

System Wide Dark Mode

Windows has a lot of residual menus that are light regardless of what you set your Windows theme to.

Some portions of certain windows have been themed, but large amounts of archaic light mode are still present:

Many applications also inherit this inconsistency:

This blog will cover how to fix this issue. The results will look like this:

Custom Theme

Installing SecureUxTheme

Normally, Windows verifies the signatures of its internal theme files. We need to disable this behavior because we will be using a third party theme.

Start by installing SecureUxTheme, a piece of software that removes signature verification of styles in Windows.

I recommend downloading the the latest release from their GitHub.

Run it as an Administrator, and agree to the license.

Make sure "Rename DefaultColors" is checked, then click install on the right hand side:

Then restart your computer:

Rectify11 Dark Theme

Now that we have a way of installing custom Windows themes, let's get one.

Rectify11 is a project that seeks to improve Windows in loads of ways, including custom themes.

Start by downloading and extracting all their custom themes into a folder:

Navigate into the extracted folder, then into the themes subfolder, and copy all of its contents to C:\Windows\Resources\Themes:

Open the ThemeTool.exe again. This time it doesn't have to be as Admin.

Select "Rectify11 dark theme" from the list on the left, check "Ignore cursor", and click apply:

Mica For Everyone

You will pretty quickly notice that everything except Windows title bars are now dark:

To fix this, we will use Mica For Everyone.

Download their latest release and run through the setup process.

Once that's done, close the actively running instance from the tray:

Then relaunch it as an administrator:

Go back to the tray and open up its settings:

Enable "Run as Administrator on Startup". This is necessary to allow it to style apps that have admin privileges:

Then click on Global Rule, and change Titlebar Color to Dark:

Now you're done!

Other Recommendations

Improved Cursors (Page says Windows 10, can confirm does work on Windows 11.)

Laptop randomly dead? Try this.

F53 — Sun, 04 Dec 2022 16:12:09 +0000

Intro

Ever take your laptop out of your backpack and find it's warm, and the battery is drained? Me too.

LTT did a great video covering why this happens. Go and watch that.

If you don't care and just want a solution, continue reading

Check to see if your laptop supports S3 standby

Start by opening command prompt and running powercfg /a

If the output of this command doesn't say The system firmware does not support this standby state underneath Standby (S3), you are good to continue to the next step.

Fixing the problem

Start by opening command prompt as an administrator:

Run reg add HKLM\System\CurrentControlSet\Control\Power /v PlatformAoAcOverride /t REG_DWORD /d 0

- DO NOT DO THIS IF powercfg /a SAYS YOUR LAPTOP DOESN'T SUPPORT S3 STANDBY

Bypassing SignUp Blurred Content

F53 — Thu, 01 Dec 2022 18:57:49 +0000

Intro

Often sites will blur content that they want you to pay or sign up to access.

If they do it wrong, its super easy to bypass.

Example

https://www.jobscan.co/ is a site that helps optimize your resume to be read by a bot. It requires you to sign up to view the advice it gives:

By opening devtools, and pasting the following javascript, you can just unblur everything:

[...document.querySelectorAll(".obfuscationWrapper")].forEach(node => node.className="")

It now shows the sign up for free box all the time too, but that is ok

How to see if a site is susceptible to this:

Open your dev tools, go to Inspector, and use the element picker to find the blurred content:

If the blurred content is just wrapped by a div with a class implying blur/obfuscation/censorship, its susceptible.

If it's an image, its not.

How does the code to reveal the content work?

We start by searching the document for all the nodes that have the class that blurs their content:

document.querySelectorAll(".obfuscationWrapper")

querySelectorAll outputs a weird thing you cant iterate through, so we have to spread it out into an array:

[...document.querySelectorAll(".obfuscationWrapper")]

then, we use forEach to run code to remove the classes from each node

[...document.querySelectorAll(".obfuscationWrapper")].forEach(node => node.className="")

All in all, this code finds nodes with the obfuscationWrapper, and removes their classes.

Turning:

<div class="obfuscationWrapper">

Into:

<div>

This makes css that blurs these nodes not work anymore, because they cant target a class that doesn't exist:

.obfuscationWrapper::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  backdrop-filter: blur(8px);
  content: "";
}

SlackMod Release!

F53 — Thu, 24 Nov 2022 07:00:00 +0000

MetaIntro:

Early this year I made a mod that adds a Custom CSS to Slack inspired by Discord mods that do the same.

I was happy enough with how the mod worked to release it proper, but never got the blog for installing it done. Because of MacOS being stupid.

I am abandoning SlackMod, but it will keep working for a LONG time because of the way I made it.

The following is the blog I was never proud of enough to publish, going over how to install the mod.

Intro:

If you are interested in the development process I have went through, take a look at my other blogs on the mod.

After a whole lot of work, I am finally happy enough to do an official release for the mod!

Slack Mod Prerequisites:

Slack Mod needs Python 3 and Git to work, if you already have those installed, click here to jump ahead

Installing Python 3:

Download the Python installer relevant to your OS and go through its setup process.

If you did that right, running python3 --version in your console should output something like Python 3.XX.X

Installing Git (if you dont already have it)

Download the git installer relevant to your OS and go through its setup process.

Windows, MacOS, Linux

If you did that right, running git --version in your console should output something like git version X.XX.X

Installing Slack Mod

Downloading the mod

First, open a terminal and cd to a directory you dont often delete everything and are ok with having ~14kb inside of.

Then, clone SlackMod into that directory:

git clone https://github.com/CodeF53/SlackMod

Installing needed Python libraries:

cd into the directory you cloned SlackMod into

cd SlackMod

Then, install the needed python libraries:

python3 -m pip install -r requirements.txt

Running Slack Mod

Manually

To start the mod, run the Python launch script in your SlackMod directory:

python3 slack_launch.py

Doing this every time you want to launch Slack can be cumbersome, to make it easier you can make some launch scripts:

Windows Launch Scripts
MacOS Launch Scripts
Linux Launch Scripts

Making Launch Scripts:

Windows Launch Scripts:

Right click slackmod.bat and click Create shortcut:

Press the windows key, type slack, then right click Slack and click Open file location:

Click and drag slackmod.bat - Shortcut to the folder you just opened.

Now, when you search "slack" in the windows search thing slackmod.bat shows up.

Optional - Making it look a tad nicer:

If you dont want it to be called slackmod.bat or want it to have a nice icon, follow this:

Right click slackmod.bat - Shortcut, click Rename, then type in whatever you want it to show up as:

Right click whatever you just renamed the shortcut to, click Properties, then click Change Icon...

Then, paste the following into the bar below Look for icons in this file:, making sure to replace it's old contents.

%USERPROFILE%\AppData\Local\slack\slack.exe

Then, click OK > Apply > OK

Putting it on the desktop:

Click your SlackMod shortcut, ctrl+c, click on your desktop, ctrl+v

MacOS Launch Scripts:

I am currently working on finding a neat way to make launch scripts on macos.

Currently, if you are on mac, you just have to live with closing slack manually and running the command.

Linux Launch Scripts:

Start by starting a superuser shell because we will be creating files where we need it:

sudo -i

Then, cd to wherever your distro stores .desktop files for it's start menu, for manjaro this is /usr/share/applications

cd /usr/share/applications

Then, make SlackMod.desktop with this command:

echo "[Desktop Entry]
Type=Application
Icon=slack
Name=SlackMod
Terminal=false
Hidden=false
Keywords=slack;slackmod
Exec=python3 slack_launch.py
Path=[path to your slackmod directory]" > SlackMod.desktop

Make sure to fill Path=[path to your slackmod directory] with a valid path, for example:

Path=/home/f53/Projects/SlackMod

Double check your work by trying to get the contents of the new desktop file

cat SlackMod.desktop

Your output should look like this:

Updating Slack Mod:

If you see that there have been new updates to the mod you want to try out, updating is pretty easy! Simply open a terminal in your SlackMod directory and run the following command:

git pull

Inhumane Cards Release!

F53 — Thu, 24 Nov 2022 02:07:55 +0000

Intro

I am making an online implementation of Cards Against Humanity.

Its at the point where I feel pretty confident in it being stable now. So check it out with a couple friends at inhumanecards.com

I wont be posting blogs specifically about the site here though, I will be doing all change logs inside my ko-fi for the server costs, and keep posting tutorials/walk throughs from stuff I learn here.

That's just because I want to keep my blog here more focused on tutorials rather than showcasing what I am doing.

Hosting a Rails Server on google cloud

F53 — Tue, 22 Nov 2022 08:08:18 +0000

Intro

When I wanted to deploy my server, I was recommended Heroku and Render.

Using those was a pain in the ass because their interfaces are painfully slow and I didn't want to figure out their stupid alternative to DockerFiles.

I knew I could just get a server I can SSH into, but I couldn't find any tutorials online for doing that with Rails.

I find the following process much easier than anything else on the market.

Assumptions

This tutorial assumes you already have a project that:

Is using React on Rails
You can run and access through localhost:3000
Has site files at (or compiled to) /public
Your database is based on PostgreSQL
- I wrote about migrating to it in a prior blog.
- Migrating to Postgres isn't exactly required, but using SQLite in production isn't recommended.

If you don't already have a project that meets these criteria, but you do still want something to test with, I recommend my React + Rails Template.\
This template is based on SQLite, not Postgres. Sorry.

Google Cloud Setup

Getting into Google Cloud

Creating a new SSH Instance

Navigate to Compute inside your project
Click Create Instance:\
Select a region for your server to run on
- You can find which one will have the best ping for your area using this site
Select the machine you will be running your server on
- I recommend starting with E2-micro and moving up if you need more power.
Enable both HTTP and HTTPS traffic

SSHing into your new Machine

Navigate to Compute inside your project.

Click the dropdown to the right of ssh, and select "View gcloud command."\

Click "Copy to clipboard" and paste that into your terminal.

Setting Up Your Machine

Google machines run stock Debian 11, without anything pre-installed.

Because of this, once you are SSHed in, first thing you want to do is install the essentials: git, ruby, and node. I have a blog with all the commands to do this on Ubuntu.

The method I shared there for installing RVM won't work on Debian, so here is a guide for that.

Also install Postgres by following everything except step 3 of this guide.

Setting up your Rails Server

Start by cloning down your project and cd into it.

git clone https://github.com/YOU/project
cd project

Install your project dependencies:

bundle install

cd client
npm i
cd ..

Compile your frontend to /public:

bin/build.sh

Nginx

Nginx does some magic bullsh█t that makes the server easily accessible, and makes setting up HTTPS much easier later on.

Setting up Nginx

Inside your Rails project, run pwd to get [PATH TO YOUR RAILS PROJECT]/, which you will use later.

Install Nginx:

sudo apt install nginx

Navigate to the Nginx's site config:

cd /etc/nginx/sites-enabled

Open a text editor with super user permissions on the file default. Nano is the most user friendly for this.

sudo nano default

Delete everything that already exists in the file.

Paste the following in to replace what you just deleted, filling in [PATH TO YOUR RAILS PROJECT]/ with the thing you got from pwd earlier.

upstream rails_server {
  server 0.0.0.0:3000;
}

server {
  listen 80;

  location / {
    root [PATH TO YOUR RAILS PROJECT]/public;
    try_files $uri @missing;
  }

  location @missing {
    proxy_pass http://rails_server;
    proxy_set_header Host $http_host;
    proxy_redirect off;
  }
}

ctrlx to exit, y to save, and enter to confirm file name.

Testing your Nginx Install

First, you need to restart your server to finish setting up Nginx.

Navigate back to Compute inside your project, and click the link to go into controls for your instance:\

Click STOP on the top bar, wait about a minute for START/RESUME to become clickable, and click it.\

Then, SSH back into your server.

Run this to make sure your server is running:

sudo systemctl status nginx

You should see something like this:\

To get the IP your server is on, run this command:

wget http://ipinfo.io/ip -qO -

You may have to sudo apt install wget.

Then, go to that ip in your browser. You should see something like this:\

Testing your Rails Setup

Now that we can access our server, we can run Rails and use our website:

rails s -e production

If you refresh the page you were at earlier, you should now be able to see your app!

If you are having issues, click here for a guide covering some common issues.

Finishing Touches

Static IP

Having to get the ip every time it changes is a pain. Lets make it static!

Start by navigating to Compute inside your project, and click the link to go into controls for your instance:\

Shut down the VM:\

Click edit:\

Scroll down to Network interfaces, and click the dropdown next to default:\

Scroll down to External IPv4 Address, and select static:\

Click save:\

Start the VM back up:\

SSH back in and get the IP one last time:

wget http://ipinfo.io/ip -qO -

Automatic Starting

Currently, you have to be SSHed into the server and have Rails running to be able to connect. It would be nice if we could just turn it on and let it go.

To do this we need to add a couple things. You can do this on your own machine, push the changes to git, then pull back down on the Google Machine.

Start off by adding the whenever gem to your gemfile:

gem 'whenever', require: false

Create a new file at /config/schedule.rb:

every '@reboot' do
  command 'sleep 30 && source /home/f53/.rvm/scripts/rvm && cd /home/f53/inhumane-cards && bundle exec rails s -e production'
end

Replace f53 with the output of whoami when run in your command line.

Replace inhumane-cards with whatever the name of your project is when its pulled down from git.

After that, SSH back in.

cd project
git pull
bundle install
whenever -w

This makes it so Rails runs on every restart!

Domain Name

Having a domain name is nice.

I am assuming you are using Google Domains for this, but the steps should be similar for other platforms.\
(I am not doing this right, but every time I try to do it the right way it breaks EVERYTHING)

Go to the DNS tab of Google Cloud, click show advanced settings, scroll down to Dynamic DNS, create one, click view credentials.

Fill in this url with those credentials, your domain, and your ip:\
https://username:password@domains.google.com/nic/update?hostname=subdomain.yourdomain.com&myip=1.2.3.4

For example:

https://XXXXXXXXXXXX:XXXXXXXXXXX@domains.google.com/nic/update?hostname=inhumanecards.com&myip=35.212.182.122

Then just paste that into your browser.

HTTPS

Without HTTPS, most browsers will yell at you about insecurity.

First, go back to your nginx config file and edit it with nano:

cd /etc/nginx/sites-enabled
sudo nano default

Add server_name example.com; to the server config:

server {
+ server_name example.com;

  location / {

Replace example.com with your actual domain name.

Use certbot to finish off your HTTPS setup.

Conclusion

Words.

Feel free to ask questions in the comments.

Environment setup stuff

F53 — Fri, 18 Nov 2022 18:37:52 +0000

Intro

A whole bunch of commands for setting up an environment to use Ruby, Node.js, and git on WSL.

node

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash

restart

nvm install --lts

ruby/rvm

sudo apt-get install software-properties-common
sudo apt-add-repository -y ppa:rael-gc/rvm
sudo apt-get update
sudo apt-get install rvm
sudo usermod -a -G rvm $USER

restart

rvm install 3.2.2 --default
gem update --system

git

sudo add-apt-repository ppa:git-core/ppa
sudo apt update
sudo apt install git

Good config defaults

git config --global color.ui true
git config --global init.defaultBranch main
git config --global core. editor "code"

Create an ssh key for github. Don't enter passwords, otherwise you will have to type them every time you try to push code.

ssh-keygen

Copy your SSH key to the clipboard

cat ~/.ssh/id_rsa.pub | clip.exe

Paste into https://github.com/settings/ssh/new

Using Action Cable with React and Rails.

F53 — Mon, 14 Nov 2022 04:13:37 +0000

Intro

Earlier this week I wanted to use Action Cable for its nice two way connections. I ended up crying trying to understand the documentation as there is no good examples for implementing it anywhere.

Even worse, there are absolutely no tutorials for using it with React.

I wrote this guide to try and fill that void.

Prerequisites/Recommendations

This Guide assumes you:

already have a functioning app with React on top of Rails.
have a User table that:
- stores logged in user_id inside session[:user_id]

If you dont have any of that, consider starting with my react rails template

For a finished project that implements this tutorial, look at my react rails chat app, which is built off of that template.

Postgresql

Action Cable requires you to use postgresql.

Making a new app with postgresql

If you dont have an rails app yet, follow this guide fully

Switching an existing rails app to postgresql

If you already have an app, but it isn't based on postgres, follow these steps to switch to it

in your /Gemfile switch out sqlite3 for postgres:

- # sqlite3 as database for Active Record
- gem 'sqlite3', '~> 1.4'
+ # Use postgresql as the database for Active Record
+ gem 'pg', '~> 1.1'

replace your /config/database.yml with a postgres one, replacing APPNAME with whatever you are calling your app

default: &default
  adapter: postgresql
  encoding: unicode
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  timeout: 5000

development:
  <<: *default
  database: APPNAME_development

test:
  <<: *default
  database: APPNAME_test

production:
  <<: *default
  database: APPNAME_production
  username: APPNAME
  password: <% ENV["APPNAME_DATABASE_PASSWORD"] %>

Then, follow this guide excluding step 3 to finish.

Adding action cable

Using action cable directly on top of postgresql is not recommended for performance reasons.

Instead, its advised to use a separate server that runs between postgres and action cable, caching stuff to help improve performance.

It seems like everyone uses redis for this purpose:

Redis

Install redis-server:

sudo apt install redis-server

Add redis to your /Gemfile

# Use Redis adapter to run Action Cable in production
gem 'redis', '~> 4.0'

From now on when starting your server you have to start the redis server along with rails and npm

redis-server
rails s
npm start

Setting Up Action cable

First enable it by uncommenting the require for action cable Inside /config/application.rb . (this is typically on line 14)

require "action_cable/engine"

Add an action cable route to your /config/routes.rb

Rails.application.routes.draw do
  # ActionCable Magic
  mount ActionCable.server => '/cable'
  ...
  # The rest of your routes
end

Create /config/cable.yml, this is what puts redis between your actioncable and postgres

development:
  adapter: redis

test:
  adapter: test

production:
  adapter: redis
  url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
  channel_prefix: phase_4_project_guidelines_production

Create /app/channels/application_cable/channel.rb

module ApplicationCable
  class Channel < ActionCable::Channel::Base
  end
end

Create /app/channels/application_cable/connection.rb

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user
    end

    private

    def find_verified_user
      # ['_session_id'] is optional, only use it if you are using has_secure_password in your user model
      user = User.find(cookies.encrypted['_session_id']['user_id'])

      return user unless user.nil?

      reject_unauthorized_connection
    end
  end
end

Adding a channel and some broadcasts

Channel

This is channel that your frontend will end up connecting to. They handle subscribing to and unsubscribing from the handshake data stream thingy.

Create /app/channels/things_channel.rb where thing is one of your models.

You will later use the thing model in a broadcast function, so make sure you have access to it.

things_channel.rb

class ThingsChannel < ApplicationCable::Channel
  def subscribed
    stop_all_streams
    thing = Thing.find(params[:thing_id])
    stream_for thing
  end

  # You can add a received function here,
  # but I dont know what it does

  def unsubscribed
    stop_all_streams
  end
end

In my case, I am going to make a channel for updating data related to a room.

rooms_channel.rb

class RoomsChannel < ApplicationCable::Channel
  def subscribed
    stop_all_streams
    room = Room.find(params[:room_id])
    stream_for room
  end

  # You can add a received function here,
  # but I dont know what it does, I didn't need it.

  def unsubscribed
    stop_all_streams
  end
end

Broadcasting data to the channel

Broadcasts take a Model and a hash, then send it to all users subscribed to that Model's channel. You can put broadcasts basically anywhere in your code.

ThingsChannel.broadcast_to(
  thing, # an instance of your model, ex Thing.find(id)
  hash # any data
)

In my case, I want to broadcast data to the relevant Room's channel when a new message created or deleted in it.

/app/controllers/messages_controller.rb:

# POST /messages
def create
  room = Room.find(params[:room_id])

  message = Message.new(text_content: params[:text_content])
  message.user = @current_user
  message.room = room
  message.save!

  # after successfully creating the message, update the room that it was in
  broadcast room

  render json: message, status: :created
end

# DELETE /messages/1
def destroy
  message = Message.find(params[:id])
  room = message.room
  message.destroy

  # after successfully yeeting the message, update the room that it was in
  broadcast room
end

private

def broadcast(room)
  # ActiveModelSerializers::SerializableResource.new(object).as_json
  # returns the same thing sent by render json: object
  RoomsChannel.broadcast_to(room, ActiveModelSerializers::SerializableResource.new(room).as_json)
end

This is a pretty lazy implementation, as I just always re-serialize the entire room object and send just that.

This has the benefit of needing less thought on how you broadcast data in the backend and on how you process the data you get on the frontend.

A more smart implementation would be something like this

# POST /messages
def create
  ...
  # after successfully creating the message, tell the room to add it
  RoomsChannel.broadcast_to(room, { new_message: message })
  ...
end

# DELETE /messages/1
def destroy
  ...
  # after successfully yeeting the message, tell the room to remove it
  RoomsChannel.broadcast_to(room, { remove_message: params[:id] })
  ...
end

This would have the benefit of being more resource friendly on both the frontend and backend. Its just a bit more work to implement.

I am going to be giving examples for the lazy broadcast method from now on.

React side:

Installing Action Cable Provider

Install JackHowa's fork of react-actioncable-provider, unless you are reading this sometime in the future like 2024, in that case take a look at the network graph to make sure you are using the most well maintained branch:

cd client
npm install --save @thrash-industries/react-actioncable-provider

Getting the Cable:

Inside your /client/src/index.js add some stuff to initialize a cableApp and pass cable down into your App.

import React from 'react';
...
import ActionCable from "actioncable";

const cableApp={}
cableApp.cable=ActionCable.createConsumer("/cable")

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App cable={cableApp.cable} />
  </React.StrictMode>
);

Passing the cable down

Pass the Cable down through your app similar to how you would do with state, repeating down to the component you need the stuff in:

...
import Room from "./pages/Room";

export default function App({ cable }) {
  ...
  return <div id="app" className="col centered">
    ...
    <Route path="/room/:room_id" element={<Room cable={cable}/>}/>
    ...
  </div>
}

Using the cable

Using the cable you passed down, you create a new connection like this, passing in callback functions for when you successfully connect, disconnect, and receive data

cable.subscriptions.create({ channel: "ThingsChannel", thing_id: thing_id },
{
  connected: () => console.log("thing connected!"),
  disconnected: () => console.log("thing disconnected!"),
  received: (updatedRoom) => setRoomObj(updatedRoom)
})

Here is an example for a lazy implementation of that:

...
export default function Room({ cable }) {
  const { room_id } = useParams()

  // Add some state for your the latest data from the Channel
  // optionally with defaults so your program doesn't die before its gotten data
  const [roomObj, setRoomObj] = useState({messages:[]})

  useEffect(() => {
    // manually fetch to get the initial state
    fetch(`/rooms/${room_id}`).then(r=>r.json().then(d=>setRoomObj(d)))

    // subscribe to updates for room
    cable.subscriptions.create({ channel: "RoomsChannel", room_id: room_id },
    {
      // optionally do some stuff with connects and disconnects
      connected: () => console.log("room connected!"),
      disconnected: () => console.log("room disconnected!"),
      // update your state whenever new data is received
      received: (updatedRoom) => setRoomObj(updatedRoom)
    }
  )}, [cable, room_id])

  return <div id="room" className="col">
    {/* Use your live data somehow */}
  </div>
}

Conclusion

While this certainly isn't exhaustive, I hope its enough to get you started.

Feel free to ask questions in the comments.

Helpful links:

If you are deployed through nginx, this answer is helpful for allowing actioncable through

If you are deployed to a url, add this to your /config/environments/ development.rb or production.rb

config.action_cable.allowed_request_origins = ['https://inhumanecards.com']

Automating User Input

F53 — Fri, 30 Sep 2022 21:05:53 +0000

Intro

I recently attended a lesson on networking and improving your online presence on LinkedIn.

Very early on in this lesson, I learned that some people look at your number of connections as some form of a measure of quality; if you don't have enough connections, you aren't worth their time.

6 degrees of separation

After introducing that concept, they showed off this neat page that lets you see the connections of your connections, and those connection's connections. Up to 3 layers deep.

Upon seeing this, I instantly was reminded of the idea of six degrees of separation. The concept that 6 chained "___ of a ___" statements can be used to connect any two people.

From this, I knew that this page must give you a HUGE pool of people to connect with, and sure enough, despite me having less than 50 connections at the time, this page had over 8.5 million results.

Adding it up

Given the idea that more connections is better, and this pool of 8.5 million people I could connect with, my brain got turning and I did a bit of math.

I instantly acknowledged that most of these people wouldn't accept if I sent them a request. I made a very conservative estimate that only 0.1% of people would accept given a request.

Putting the math for that in my browser, I determined I could potentially make at least 850k new connections if I sent a request to everyone.

Now, being realistic, there is no way in hell I could ever send 850 million requests in any reasonable amount of time.

... a human

Automating User Input

Once my brain made that connection, I completely tuned out of the lesson and got to work on automating the process of sending connection requests.

There are 3 key parts of my method of automating user input.

Querying for page elements (buttons, text boxes, sliders) needed to do the desired action
Simulation of input on queried elements
A small bit of logic to put it all together

⚠️ Strong Warning ⚠️

While what I am about to teach you how to do is super easy and useful, you should keep one thing in mind:

Always read the rules of the site you are automating user input on because there is a good chance you can get banned from a site by doing this.

I completely missed this step. Only after triggering LinkedIn's anti-automation measures did I take a look at the site rules.

Sure enough, what I did was specifically listed in the Dont's section.

8.2 Dont's

You agree that you will *not*:

Use bots or other automated methods to access the Services, add or download contacts, send or redirect messages;

Querying page elements

To send a connection there are three things we need to be able to find on the page:

The actual connect buttons:

The button to confirm your connection request:

And, after sending connections to everyone on a page, we need to be able to find the next page button:

There are 2 very common javascript methods for finding elements:

// returns the first element that matches the selector
document.querySelector(selector)

// returns an array of elements that match the selector
document.querySelectorAll(selector)

For the sake of being compact, I am going to make 2 functions that are basically just aliases for these with significantly shorter names:

const qs = (selector) => { document.querySelector(selector) }
const qsa = (selector) => { document.querySelectorAll(selector) }

Doing this makes it easier to read the what really matters here: the selector itself.

What is a selector?

querySelector and querySelectorAll take in a single string, a CSS selector, and use it to find matching elements(s).

CSS selectors were designed to make changing how certain elements look easier. While there are a LOT of different types of CSS selectors, we really only are going to be using one type of selector: the attribute selector.

To see why, lets examine this html from google maps:

<span jsnamespace="pane.directions-options" class="UsLaWc">
  <input aria-live="polite" name="transit-time" size="8" class="LgGJQc">
  <span class="RWVw5">
    <button aria-label="Earlier trips" class="n9A92c Ab1Xue">
    </button>
    <button aria-label="Later trips" class="oafJhe Ab1Xue">
    </button>
  </span>
</span>

This HTML makes the following:

If we were to select the right arrow, or "later trips" button, using class names, we would get something totally indecipherable

.RWVw5 > .n9A92c

This is because big companies have decided to start obfuscating class names into random sets of alphanumeric characters.

This is why attribute selectors are our best friend in this use case. By using them, we get significantly more human readable syntax:

[jsnamespace="pane.directions-options"] > span > [aria-label="Earlier trips"]

What if we wanted to select both the earlier and later trips button? Thankfully, attribute selectors have a tool for selecting only part of a string:

[aria-label$="trips"]

This will get element with labels ending in "trips".

There are 3 of these fancy selectors:

/* attribute starts with */
[attr-name^=""]

/* attribute contains */
[attr-name*=""]

/* attribute ends with */
[attr-name$=""]

Selecting the elements we need

Now that we know the types of selectors we need, let's write selectors for the elements we need to interact with.

First, the connect buttons:

<button aria-label="Invite REDACTED NAME to connect" id="ember2543" class="artdeco-button artdeco-button--2 artdeco-button--secondary ember-view">...</button>

/* We could select this with just a starting with "Invite" */
[aria-label^="Invite"]
/* or an ending with "to connect" */
[aria-label$="to connect"]
/* but to make what we are selecting 100% clear, we use both */
[aria-label^="Invite"][aria-label$="to connect"]

Next, the send button:

<button aria-label="Send now" id="ember2561" class="artdeco-button artdeco-button--2 artdeco-button--primary ember-view ml1">...</button>

Selecting just a button that says "Send now" seems pretty dangerous, so lets look for something to select that makes sure we only ever select a button that sends a connection request.

<div data-test-modal="" role="dialog" tabindex="-1" class="artdeco-modal artdeco-modal--layer-default send-invite" size="medium" aria-labelledby="send-invite-modal">
  ...
  <div id="ember2559" class="artdeco-modal__actionbar ember-view text-align-right">
    ...
    <button aria-label="Send now" id="ember2561" class="artdeco-button artdeco-button--2 artdeco-button--primary ember-view ml1">
      ...
    </button>
  </div>
  ...
</div>

Looks like they were nice enough to actually have a send-invite class!

.send-invite > div > [aria-label="Send now"]

Finally, lets get our next page button:

<button aria-label="Next" id="ember2605" class="artdeco-pagination__button artdeco-pagination__button--next artdeco-button artdeco-button--muted artdeco-button--icon-right artdeco-button--1 artdeco-button--tertiary ember-view" type="button">
  ...
</button>

Again, just selecting for [aria-label="Next"] doesn't fill me with a lot of confidence that we will be getting the right element.

Inside the classes we have artdeco-pagination__button. We can use this to be sure we are selecting something for pagination:

[class*="pagination"][aria-label="Next"]

With all of our selectors, we can now get our elements in javascript!

qsa(`[aria-label^="Invite"][aria-label$="to connect"]`)
qs(`.send-invite > div > [aria-label="Send now"]`)
qs(`[class*="pagination"][aria-label="Next"]`)

Simulation of input on queried elements

Now that we have our selectors for all of the things we need to interact with, we need a way to interact with them.

Buttons:

In terms of pure javascript, buttons are generally implemented like this:

button.addEventListener("click", (event) => {
  // do stuff
})

Luckily, we can fake events like this using dispatchEvent:

button.dispatchEvent(new Event("click", {event options}))

Generally for this to work for clicks, we need to pass in the option bubbles:true.

Given this, here is a general method for clicking a node:

const click = (node) => { if (node!==null) {
  node.dispatchEvent (new Event("click", {bubbles:true}))
}}

Waiting

After we click a node, we have to wait a short bit for the page to update. For this, we have a general sleep method, that takes how long we should wait in milliseconds:

const sleep = (ms) => new Promise(r => setTimeout(r, ms));

Inorder to use this, we need to be able to use await, which is exclusive to asynchronous functions. All that really means is we need to make an async function that contains our code, then run it.

While that sounds complicated, in practice, it's as simple as wrapping your code with this:

(async ()=>{
  // put code here
})()

Other types of input

While there are many types of input, such as button, checkbox, color, date, datetime-local, text, radio, and range, there are actually only 2 types of HTML input: <button> and <input>

No matter what type of input it is, all you really have to do is change one thing:

qs("inputselector").value = newValue;

Yep. thats it.

Putting it together

In order to put together your automation logic, all you have to do is think through what actions you would make as a user, and then write them out as code.

Click a connect button, then click the confirm send button:

(async ()=>{
  click(qs(`[aria-label^="Invite"][aria-label$="to connect"]`))
  await sleep(5)
  click(qs(`.send-invite > div > [aria-label="Send now"]`))
})()

Alright, so then we just want to repeat that for every connect button:

(async ()=>{
  qsa(`[aria-label^="Invite"][aria-label$="to connect"]`).forEach((inviteButton)=>{
    click(inviteButton)
    await sleep(5)
    click(qs(`.send-invite > div > [aria-label="Send now"]`))
    await sleep(5)
  })
})()

Then once we have invited everyone on the current page, we move on to the next page and do it again:

(async ()=>{
  while(true) {
    qsa(`[aria-label^="Invite"][aria-label$="to connect"]`).forEach((inviteButton)=>{
      click(inviteButton)
      await sleep(5)
      click(qs(`.send-invite > div > [aria-label="Send now"]`))
      await sleep(5)
    })

    // page takes a bit to realize what just happened because we just did it so fast
    await sleep(100)
    click(qOne(`[class*="pagination"][aria-label="Next"]`))

    // loading the next page takes at most 2 seconds for me
    await sleep(2000)
  }
})()

With this done, I very quickly found a limit:

Turns out there is a 100 connection request per week limit.

This didnt tell me to stop what I was doing though, so I sent the script over to the person sitting next to me, Austin.

Why he got this when I didnt seemed puzzling at first, but then I realized exactly why. I spent a fair bit of time calibrating the delays. Throughout that time I got a lot of invites sent out, so when it was done it only sent out like 30 invites at once, not triggering the detection.

Not triggering anti-bot algorithms

Prelude

So, if you are at the point of triggering a anti-bot algorithm, the correct response is to stop.

Given that, this next section is completely for educational purposes. Don't do this.

Its super easy.

The finalized script had inhuman speed, sending one invite every 10 milliseconds. The duration of a human blink is on average 100–150 milliseconds.

We only ran into the anti-bot algorithm when we got the script to run at full speed. So... just slow it down to realistic human speeds.

(async ()=>{
  const qOne = (selector) => document.querySelector(selector);
  const qAll = (selector) => document.querySelectorAll(selector);
  const click = (node) => { if (node!==null) 
    { node.dispatchEvent (new Event("click", {bubbles:true})) }}
  const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
  while (true) {
    // click connect and then confirm connection on every person
    for (const connectButton of qAll(`[aria-label^="Invite"][aria-label$="to connect"]`)) {
      click(connectButton)
      await sleep(500);
      click(qOne(`[aria-labelledby="send-invite-modal"] [aria-label="Send now"]`))
      await sleep(500);
    }
    await sleep(2000);
    // click the next page button
    click(qOne(`div[class*="pagination"] button[aria-label="Next"]`))
    await sleep(7000);
  }
})()

With this, you just have to start the script, then go about your day. Sure, its not fast, but it doesn't require any attention on your part.

How developers can stop this type of script

Anti-bot detection based on speed is stupid.

Despite this, it seems like this is the only type of bot detection actually used on websites, which is super shocking to me.

Let's look back at the basic javascript example for how buttons are linked up. More specifically, the data it gets:

button.addEventListener("click", (event) => {
  console.log(event)
})

I clicked once with a real mouse, and once using our click method.

These are the only attributes of that object that were different. First, the real click:

click {
  isTrusted: true
}

And second, the click method:

click {
  isTrusted: false
}

Hmmmmmmmmmmmmmmmmmm...

I wonder what this could possibly mean? Lets look at the docs!

The isTrusted read-only property of the Event interface is a boolean value that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via EventTarget.dispatchEvent().

WOW, shocking, its almost as if we have an Event attribute specifically made for telling the difference between real and fake interactions!

Using this would be SUPER simple. If you don't want bots on your website, just add a check to your event listeners.

button.addEventListener("click", (event) => {
  if (event.isTrusted) {
    // do stuff
  }
})

If you want, you can even INSTANTLY warn users that make untrusted events to not do it!

button.addEventListener("click", (event) => {
  if (event.isTrusted) {
    // do stuff
  } else {
    // warn user
  }
})

WOW, that was super hard to fix. No wonder websites haven't done that yet. It would take an absolute g*ENiU*s to figure out how to add that singular if statement.

Conclusion

Making this type of automation is super easy.

No matter what the rules of your site are, many people (me included) will just find the limitations of your system of enforcement, and work around it.

The thing that utterly shocks me is how no website I have ever used uses isTrusted to differentiate real and fake clicks.

Slack Mod: Cleanup

F53 — Mon, 26 Sep 2022 16:30:24 +0000

Intro

After improving the launcher for my Slack Mod, it's almost ready for release! Before that, I would like to add a couple of tweaks and adjustments to make the whole mod feel a bit more polished.

Editor Animation:

Slack's preferences window is pretty small, which works perfectly for the menus it has by default. Problem is this can feel a little cramped when writing code:

At the end of my first SlackMod blog, I wrote a little bit of CSS into the editor to both demonstrate its use and solve this problem:

/* Increase width and height of Preferences to allow more room for code */
body > div.c-sk-modal_portal > div > div {
    max-width: 100%!important;
    max-height: 100%!important;
    height:100%;
    width:100%;
}

Problem is, the other preferences tabs weren't designed to use this space, so it feels very odd.

I solved this by hardcoding it so when you click on the Custom CSS tab, the editor expands:

customTab.addEventListener("click", ()=>{
    ...
    // hardcoded styling for CSS Tab:
    // increase width and height of preferences modal for more code room
    ["max-width","width","max-height","height"].forEach(
        style => document.querySelector(`div[aria-label="Preferences"]`).style[style] = "100%")
}

This can feel a bit jarring because the Preferences screen instantly "snaps" to taking up the whole screen.

Given that, I added a bit of easing to the hardcoded styling:

// hardcoded styling for CSS Tab:
...
// smoothly expand preferences modal
    document.querySelector(`div[aria-label="Preferences"]`).style["transition"] = "500ms ease all"

That feels really nice, but then our Ace editor doesn't use all the space we are giving it!

I thought this would be a pretty simple fix, so I went for the same idea as the other hardcoded stuff:

customTab.addEventListener("click", ()=>{
    ...
    const editor = ace.edit('slackMod-editor');
    ...
    // hardcoded styling for CSS Tab:
    ...
    editor.style["height"] = "100%";
}

But that doesn't work, as Ace has some internal CSS determining its size that takes a very high priority. This is set once when the editor is initialized to fit the div it's put in.

According to Ace's docs we can call editor.resize() to make the editor expand to fit its parent div.

In theory, since we're currently expanding the div containing the editor for 500 milliseconds, we could just wait 500 ms, then call editor.resize():

setTimeout(()=>{editor.resize()}, 500);

But in practice that looks a bit odd as the editor "snaps" to fit the space after the animation is done:

I am not too proud of my solution for this, but hey, it works.

// make editor resize editor every 5ms for 500ms
// smoothly expanding it with the preferences modal
for (let i = 5; i<=500; i+=5) {
    setTimeout(()=>{editor.resize()}, i);
}

Why 5 milliseconds? It is fast enough to look smooth at even 144fps, while also being evenly divisible into 500.

Hey, thats pretty good!

Error on switching to other tabs:

I mentioned this briefly in my first blog on SlackMod: when you click the Custom CSS tab, then select a different category, the Preferences modal crashes.

I spent ages trying to fix this before and eventually gave up.

Giving the problem some more thought, I decided to start by preventing the error that happens when you click a tab.

I figured I could just do something like this

customTab.addEventListener("click", ()=>{
    ...
    // make it so when you click a different tab, it doesn't crash you
    ([...settingsTabList.children]).slice(0,-1).map((tab)=>{
        tab.addEventListener("click", (event)=>{
            // prevent the crash that normally happens
            event.stopPropagation()
        })
    })
}

But, no, for some reason event.stopPropagation() doesn't do what its supposed to. After a lot of thought of other ways to solve the issue, I remembered how I removed event listeners in a lab before to solve this exact problem!

By replacing an element with a clone of itself, you effectively remove all of that element's event listeners:

element.parentElement.replaceChild(element.cloneNode(true), element)

Given this, removing all of the click event listeners from the tabs is easy!

First, to iterate through all our tabs, we have to make an iterable array of them. Spreading our tabList's children, then re-wrapping it as an array works for this:

([...settingsTabList.children])

Then, we can do our "remove event listener" trick on each of these tabs:

customTab.addEventListener("click", ()=>{
    ...
    ([...settingsTabList.children]).map((tab)=>{
        // remove old click event listeners
        tab.parentElement.replaceChild(tab.cloneNode(true), tab)
    })
})

Now that clicking the settings tabs doesn't immediately crash the Preferences screen, we can use our own method to select the tab.

The only way I thought of to "switch" tabs was pretty brute force:

Why don't we just close the Preferences, reopen it, then open the tab the user clicked?

Looking into how to simulate the clicks I needed for this, I came across the docs for EventTarget.dispatchEvent()

As a quick test, I tried to close the preferences modal using this command in Slack's dev tools.

Given that success, I made a helper function for clicking elements and tried using it to pull up the correct screen.

const clickNodeBySelector = (selector) =>
    document.querySelector(selector).dispatchEvent(new Event("click", {bubbles:true}))
...
// replace tab click events with our own click event for switching tabs
([...settingsTabList.children]).map((tab)=>{
    // remove old click event listeners
    tab.parentElement.replaceChild(tab.cloneNode(true), tab)
    // add our own click event
    const tabID = tab.id
    document.getElementById(tabID).addEventListener("click", (event)=>{
        if (event.isTrusted) {
            // close the preferences screen
            clickNodeBySelector(`[aria-label="Close"]`)
            // re-open the preferences window
            clickNodeBySelector(".p-ia__nav__user__button")
            clickNodeBySelector("div.ReactModalPortal div:nth-child(7) div")
            // go to the tab that was clicked
            clickNodeBySelector("#"+tabID)
            // add back the custom css tab
            addSettingsTab()
        }
    })
})

This almost worked, but it wasn't switching to a tab after entering the preferences menu.

This is because it's clicking the tab on the Preferences screen that we are closing.

I fixed this by adding a slight delay to it:

setTimeout(()=>{clickNodeBySelector("#"+tabID)},delay)

What I found annoying is that sometimes this would work with a delay of just 5, and other times I need a delay of atleast 50, which starts to get noticeable.

I actually already fixed a similar problem to this with the addSettingsTab() function. I check if the elements I need exist, and if they dont, I try again in a bit.

function addSettingsTab() {
    if (document.querySelector(".p-prefs_dialog__menu") !== null) {
        ...
    } else {
        setTimeout(()=>{addSettingsTab()}, 1)
    }
}

This effectively makes it run once every millisecond until the element it hooks into exists.

Given that we need this exact same solution again, I broke it out into an abstract function:

function tryTillTrue(expression, callback) {
    setTimeout(()=>{
        if (expression()) { callback() }
        else { tryTillTrue(expression,callback)}
    }, 1)
}

Heres how it's implemented in addSettingsTab():

function addSettingsTab() {
    tryTillTrue(()=>document.querySelector(".p-prefs_dialog__menu") !== null, ()=>{
        ...
    })
}

We still need a little wait before trying to click into the tab because we still have the problem of clicking the one on the window we are closing:

// go to the tab that was clicked
tryTillTrue(()=>document.querySelector("#"+tabID) !== null,
    ()=>clickNodeBySelector("#"+tabID))

With that, it works!

But, it does look pretty jarring as the background flashes and the window instantly shrinks. To fix this, I added a bit of styling to make the window ease in:

// go to the tab that was clicked
tryTillTrue(()=>document.querySelector("#"+tabID) !== null,
    ()=>clickNodeBySelector("#"+tabID), 0.025)
// add back the custom css tab
addSettingsTab()

// make it smoothly shrink back to normal window size
setTimeout(()=>{
    ["max-width","width","max-height","height"].forEach(
        style => document.querySelector(`div[aria-label="Preferences"]`).style[style] = "100%")

    setTimeout(()=>{
        document.querySelector(`div[aria-label="Preferences"]`).style["transition"] = "500ms ease all"
        document.querySelector(`div[aria-label="Preferences"]`).style["height"]="700px"
        document.querySelector(`div[aria-label="Preferences"]`).style["width"]="800px"
    },0.025)
},0.025)

Yeah... that code looks absolutely disgusting, but it works:

Ok yea it renders 2 wrong frames, sue me.

Devtools Shortcuts

If you are writing Custom CSS, the devtools are kinda required.

By default Slack allows you to use the command /slackdevtools to open them, but that is really slow in comparison to using a keyboard shortcut like f12 or ctrl+shift+i.

I am going to skip past my research for how to open devtools, because it came up fruitless and eventually I decided to brute force it with fake user input.

To begin, I tried selecting the chat window and adding some text to it:

document.querySelector(".ql-editor").innerText = "/slackdevtools"

That worked, so then I simulated a click on the send button:

clickNodeBySelector(`[aria-label="Send now"]`)

That also worked!

Once I put them together, they didnt work, so I added a bit of delay to clicking the button:

document.querySelector(".ql-editor").innerText = "/slackdevtools"
setTimeout(()=>{clickNodeBySelector(`[aria-label="Send now"]`)}, 1)

And that worked perfectly!

This does end up clearing the chatbox if you already have something in it, so I added 2 extra lines to save and restore the contents of it:

// save contents of chat editor
let oldText = document.querySelector(".ql-editor").innerText
// type and send slackdevtools command
document.querySelector(".ql-editor").innerText = "/slackdevtools"
setTimeout(()=>{clickNodeBySelector(`[aria-label="Send now"]`)}, 1)
// restore old contents of chat editor
setTimeout(()=>{document.querySelector(".ql-editor").innerText = oldText}, 100)

This didnt end up consistent until I had the delay set to 100ms on the timeout for putting text back into the box.

To hook this up to key combos, I added an event listener, initially using "keypress":

document.addEventListener("keypress", (event) => {
    console.log(event)

In testing, I found that for some reason this didnt log presses of the function keys, which we need for triggering on f12.

Given that, I switched to "keyup":

document.addEventListener("keyup", (event) => {
    console.log(event)

Here are the highlights of the events this logs when we press the keycombos we want to use.

f12:

KeyboardEvent {
    code: "F12"
}

ctrl+shift+i:

KeyboardEvent {
    code: "KeyI",
    ctrlKey: true,
    shiftKey: true
}

Given this, I wrote out the code for binding the devtools hotkeys.

I started by destructuring the event out into the variables we care about:

document.addEventListener("keyup", ({ code, ctrlKey, shiftKey }) => {

Then a simple check if the key combo is one we care about:

if (code === "F12" || (ctrlKey && shiftKey && code === "KeyI")) {

Inside I put the code we ended up with for sending the command and restoring chat contents, leading to a final result that looks like this:

document.addEventListener("keyup", ({ code, ctrlKey, shiftKey }) => {
    if (code === "F12" || (ctrlKey && shiftKey && code === "KeyI")) {
        // save contents of chat editor
        let oldText = document.querySelector(".ql-editor").innerText
        // type and send slackdevtools command
        document.querySelector(".ql-editor").innerText = "/slackdevtools"
        setTimeout(()=>{clickNodeBySelector(`[aria-label="Send now"]`)}, 1)
        // restore old contents of chat editor
        setTimeout(()=>{document.querySelector(".ql-editor").innerText = oldText}, 100)
    }
});

Slack Mod: Improving the Launcher

F53 — Thu, 15 Sep 2022 01:25:08 +0000

Intro

This is a continuation of my series of blogs documenting my process of making a custom mod for Slack:

Initial Creation of the Project discusses:
- Why I am making it
- How I inject into Slack
- Problem solving the unique challenges that come with client modding
- Very basic text editor that is linked to CSS
Improving the Editor discusses:
- Learning from other open source works
- Adding an editor with Ace
- localStorage, a simple way to make saves persist.

Last blog left off with a finalized custom CSS editor the following note:

Given my list of issues from last blog, here is what I have left to do:

Injecting is manual and hardcoded to the user's system

I think I will make my next blog on this, followed by a tutorial on how to install it on your own slack!

Automatically finding Slack's install location

Because location varies wildly between OS, I started by looking into how to differentiate between user systems, and found platform.system() which looks pretty nice.

Looking at the docs, for Windows it returns "Windows", for Linux it returns "Linux", but the docs do not mention what it returns when a user is on a Mac!

Given this, I asked the only Mac user I currently know:

I got this response:

I never would've guessed that, glad I asked.

Given this info, I started off with a simple switch for what OS a user has installed.

# initialize slack location var
slack_location = ""
# find slack location based on system user is running
match system():
    case "Linux":
        # code that gets location for linux
    case "Windows":
        # code that gets location for windows
    case "Darwin": # Mac
        # code that gets location for mac
    case _:
        # happens when user doesn't have windows, mac, or linux
        # tell user their system isn't supported.

Linux

For the Linux case, as much as I would like to write something general, I don't know anyone else that uses Linux that would have Slack installed.

Given this, I just used what worked for my system, along with a little test using os.path.exists().

If it the check fails, I used input() to make sure the user sees the error, followed by an exit command.

case "Linux":
    # check if slack is in the location
    slack_location = "/usr/lib/slack/slack"
    if (not exists(slack_location)):
        input("Error Message")
        exit()

After a bit of thought, this is the error message I came up with:

Could not find Slack install! Please:
    - install Slack
    - open a Github issue so I can support your install location
Press Enter to exit.

I wrote this so it could be used as a catchall for whenever any Slack install wasn't found. This was so I could save it to a variable and use it for all not cases of Slack not being found:

# general error to print when slack cant be found
ERR_SLACK_NOT_FOUND =  "Could not find Slack install! Please:\n\t- install Slack\n\t- open a Github issue so I can support your install location\nPress Enter to exit."
# initialize slack location var
slack_location = ""
# find slack location based on system user is running
match system():
    case "Linux":
        # check if slack is in the location
        slack_location = "/usr/lib/slack/slack"
        if (not exists(slack_location)):
            input(ERR_SLACK_NOT_FOUND)
            exit()
...

Windows

Every Slack installation on Windows I have found has been at a directory following this format:

C:\Users\[USER_NAME]\AppData\Local\slack\app-[SLACK_VERSION]\slack.exe

After some research, I found os.getenv('LOCALAPPDATA') which returns:

C:\Users\[USER_NAME]\AppData\Local

(with [USER_NAME] filled in of course)

Given this, I first made a check for if the user has Slack installed at that location, using the ERR_SLACK_NOT_FOUND message we made earlier:

case "Windows":
    # Check if the %localappdata% location of slack exists
    slack_location = os.getenv('LOCALAPPDATA') + "\\slack"
    if (exists(slack_location)):
        # Code for getting the rest of it
    else:
        input(ERR_SLACK_NOT_FOUND)
        exit()

The contents of the Slack directory we are at now look like this:

For some awful reason, Slack keeps older installations of itself, meaning now we have to do a lot of work to figure out which one of these is the directory we want.

Here's what we have to do in general:

Get a list of all of the subdirectories in %localappdata%/slack
Filter for only the ones that will have slack.exe inside
- As simple as checking if it contains "app-"
Get the latest version
- Surprisingly complex problem because version numbers don't work like number numbers
  - 4.26.13 > 4.26.3 > 4.9.0
- Luckily, we are making this in Python, so someone will have already written a library for this.

First things first, getting a list of the subdirectories. First google result gives us a highly voted stackoverflow answer:

However, you could use it just to give you the immediate child directories:
next(os.walk('.'))[1]

How this code works is pretty complicated to break down.

I'm going to just treat it like a black box, understanding its inputs and outputs.

If this project was one where people really needed to understand every line of the code, I would put it into a well commented function:

# Given a valid directory, outputs an array of sub directory names:
# given an ExampleDirectory with the given structure:
# ExampleDirectory:
# ⎿ subDirectoryA
#   ⎿ subSubDirectory
# ⎿ subDirectoryB
# ⎿file.txt
# Will Return:
# ["subDirectoryA", "subDirectoryB"]
def getSubDirectories(directory):
    return next(walk(directory))[1]

But this isn't too big of a project, so I am just going to use it like this:

...
if (exists(slack_location)):
    # Slack keeps old versions for some reason, inject into the latest one.
    # get an array of all the subdirectories
    #   ['app-4.9.0', 'app-4.26.13', 'app-4.26.3', 'app-4.28.171', 'packages']
    subDirs = next(walk(slack_location))[1]

To filter these directories, we can use Python's filter method, which removes elements from an array based on what a function returns when given the input.

filter(function, array)

Using a lambda for our function looks like this:

filter(lambda dir: "app" in dir, subDirs)

"app-" in "app-4.23.0" => True
- Keeps in array
"app-" in "packages" => False
- Removes from array

Technically, filter() returns a "filter object" so we have to wrap it in list() to cast it back to something useful.

Implementing this gives us the following function:

list(filter(lambda dir: "app" in dir, subDirs))

# Slack keeps old versions for some reason, inject into the latest one.
# get an array of all the subdirectories that have app-
#   ['app-4.9.0', 'app-4.26.13', 'app-4.26.3', 'app-4.28.171']
subDirs = list(filter(lambda dir: "app-" in dir, next(walk(slack_location))[1]))

With this new array, all we need to do is get the latest version. Which should be pretty easy because Python has libraries for everything.

First Google results said packaging.version.Version().

In order to test if this works, I imported the library and initialized a test array inside the Python console:

>>> from packaging.version import Version
>>> subDirs = ['app-4.9.0', 'app-4.26.13', 'app-4.26.3', 'app-4.28.171']

To run it on every element on the array, we can use map(function, array):

>>> map(Version, subDirs)
<map object at 0x7f0d44e7f2b0>

Looks like similarly to filter(), we need to cast map()'s output to a list so its useful:

>>> list(map(Version, subDirs))
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/usr/lib/python3.10/site-packages/packaging/version.py", line 266, in __init__
    raise InvalidVersion(f"Invalid version: '{version}'")
packaging.version.InvalidVersion: Invalid version: 'app-4.9.0'

Looks like we need to do a bit of pre-processing, as this library cant handle strings that aren't just version numbers.

To clean up our strings we can do string.replace("app-",""):

>>> "app-4.9.0".replace("app-","")
'4.9.0'

To do that over our whole array, we can use map:

>>> list(map(lambda dir: dir.replace("app-","") ,subDirs))
['4.9.0', '4.26.13', '4.26.3', '4.28.171']

Trying Version again with our cleaned strings:

>>> list(map(lambda dir: Version(dir.replace("app-","")),subDirs))
[<Version('4.9.0')>, <Version('4.26.13')>, <Version('4.26.3')>, <Version('4.28.171')>]

Now we finally have an array of this library's version object.

Lets call max() on it to get the latest version:

>>> max(list(map(lambda dir: Version(dir.replace("app-","")),subDirs)))
<Version('4.28.171')>

Looks promising, lets change our input data and see if it still works:

>>> subDirs = ['app-4.28.171', 'app-4.26.3', 'app-4.26.13', 'app-4.9.0']
>>> max(list(map(lambda dir: Version(dir.replace("app-","")),subDirs)))
<Version('4.9.0')>

Looks like this library cant even do what it promised.

That may have felt like a massive waste of time, but it would've been a nightmare to debug that problem when it happened in the actual code.

After Googling again, I found a different library: pkg_resources.parse_version(). Lets test it! Luckily, we can reuse a lot of the code we just used to test the previous library.

The first disappointing part of the previous library was it not being able to parse our strings while they still had app- in them. So I decided to first test if our new library needs the same cleanup:

>>> from pkg_resources import parse_version
>>> list(map(parse_version, subDirs))
[<LegacyVersion('app-4.28.171')>, <LegacyVersion('app-4.26.3')>, <LegacyVersion('app-4.26.13')>, <LegacyVersion('app-4.9.0')>]

Great, less parsing overall needed for us!

But does it actually compare these correctly? Lets test:

>>> max(list(map(parse_version, subDirs)))
<LegacyVersion('app-4.28.171')>

YES!

Alright, let's implement this into our code!

Putting in what we have looks like this:

...
# ['app-4.9.0', 'app-4.26.13', 'app-4.26.3', 'app-4.28.171']
subDirs = list(filter(lambda dir: "app-" in dir, next(walk(slack_location))[1]))
# a "LegacyVersion" object of the newest version in subDirs
# <LegacyVersion('app-4.28.171')>
latest_version = max(list(map(parse_version, subDirs)))

Now what? For me, finding how to get the latest version took so long that I forgot what we even needed it for.

The whole point of this was to get which Slack subdirectory to use, after remembering this, I realized a LegacyVersion object isn't very useful as there is no easy way to turn it back into the correct subdirectory.

Given this, I put our array of LegacyVersion objects into a variable instead:

# array of comparable "LegacyVersion" objects in the same order as subDirs
versions = list(map(parse_version, subDirs))

Then, I got the index of the latest version in that array:

versions.index(max(versions))

Because versions has the same order as subDirs, we can use that index in our subDirs array to get the directory containing the newest version of Slack:

# the directory containing the newest version of slack:
subDirs[versions.index(max(versions))]

With that, we can finally get the full directory to the latest Windows version of Slack.

# Check if the %appdata% location of slack exists
slack_location = os.getenv('LOCALAPPDATA') + "\\slack"
if (exists(slack_location)):
    # Slack keeps old versions for some reason, we want to inject into the latest one
    # get an array of all the subdirectories that have app-
    # ['app-4.9.0', 'app-4.26.13', 'app-4.26.3', 'app-4.28.171']
    subDirs = list(filter(lambda dir: "app-" in dir, next(walk(slack_location))[1]))
    # array of comparable "LegacyVersion" objects in the same order as subDirs
    versions = list(map(parse_version, subDirs))
    # The full path to the latest version of Slack's slack.exe
    slack_location = '"' + slack_location + "\\" + subDirs[versions.index(max(versions))] + "\\slack.exe" + '"'
else:
    # If Slack is not found in windows appdata
    print(ERR_SLACK_NOT_FOUND)
    exit()

MacOS

I don't have a Mac, so this is going to be a pain.

I started by asking the one person that uses a Mac and Slack if he knew where Slack is installed:

Given this, I asked him to try running a few commands in his Python terminal as a test to see if what I was about to do would work.

After that, I was tempted to just give up on MacOS and use the following code:

case "Darwin": # Mac
    input("MacOS is not supported yet\n\tpress any key to exit")
    exit()

But I wasn't satisfied with that.

I thought about it some more, realized MacOS may just not display the full path to the user, and asked my friend to cd to /Computer/Applications/ and run pwd (print working directory).

His response took a bit, but it was worth it:

With that, I knew at least this bit of code would work:

case "Darwin": # Mac
    # check if slack is in the location
    slack_location = "/Applications/Slack.app"
    if (not exists(slack_location)):
        input(ERR_SLACK_NOT_FOUND)
        exit()

I pushed my changes and asked my friend to try using my mod.

He sent back a stacktrace, notably containing this:

Traceback (most recent call last):
  File "/Users/thelightdisk/Development/SlackMod/slack_launch.py", line 72, in <module>
    download(libURL)

...meaning there was some error with my download code.

To narrow down the issue, I asked him to try and run some more stuff in the Python terminal as a test:

~ python3
> from wget import download
> wget("https://ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js")

In response, he sent back an error containing the exact same issue:

Given this, I knew there was some issue with wget.download() on MacOS.

I am going to skip over around 2 hours of me having him try different download libraries in an attempt to find one that worked on mac.

Eventually I came to the conclusion that I should just do this:

# macOS is stupid and doesn't like wget's download
def download(url):
    if (system()=="Darwin"):
        fileName = url.split("/")[-1]
        sysrun(f"curl -o { fileName } \"{url}\"")
        sleep(0.1)
    else:
        wgetDownload(url)

After that, all of the downloading part of the script worked, but then it spat out an error that Slack.app is a directory.

I asked my friend to get the folder structure with ls and he did one better:

Given this, I updated the Mac slack_location one last time:

case "Darwin": # Mac
    # check if slack is in the location
    slack_location = "/Applications/Slack.app/Contents/MacOS/Slack"
    if (not exists(slack_location)):
        input(ERR_SLACK_NOT_FOUND)
        exit()

With that change, it finally worked:

Automatically Killing Slack

Throughout having friends test the mod in the prior step, them forgetting close Slack when running the script was a pretty common issue.

Given that, I figured it would be a good idea to have the script do it automatically.

I found some solid looking code for killing a process with Python on StackOverflow, so I modified it a slight bit and gave credit in a comment:

# Kill Slack
# Mac and Linux have no extension on executables
process_name = "slack"
if (system()=="Windows"):
    process_name = "slack.exe"
# https://stackoverflow.com/a/67509457/8133370 under (CC BY-SA 4.0)
try:
    print(f'Killing Slack Processes')
    for process in process_iter():
        try:
            if process_name == process.name() or process_name in process.cmdline():
                args = process.cmdline()
                if (len(args) > 4):
                    args = args[0:3]
                print(f'\tkilling instance - {args}')
                process.terminate()
        except Exception:
            print(f"\t\tPermission Denied, Moving on.")
except Exception:
    print(f"Failed to get processes to kill, assuming Slack isn't open")

Note that instead of printing an exception stacktrace I went for 2 generic errors. This is because the following errors occur on Windows when there are no real problems:

On occasion, when running the launch script on Windows without Slack open, it triggered the outer try statement. Given this, I replaced the error with this:

Failed to get processes to kill, assuming Slack isn't open

On Windows, there are some Slack processes that have elevated privileges and can't be killed by our script. When we try to kill them, it triggers the inner try statement. Thing is, these processes are automatically closed when we kill the non-elevated processes.

Given that it really doesn't matter we can't kill them, I replaced the error with this:

Permission Denied, Moving on.

Other than those small tweaks, the script from StackOverflow worked perfectly on all systems I tested.

Conclusion

Remaining issues

After all of that, using SlackMod is still a bit of a pain.

To install it, you have to:

Download Python 3
Download the mod from GitHub
Install the needed Python libraries

After you do that, every time you want to open it, you have to do the following:

Open a terminal
Navigate to wherever you installed the mod
Run python3 slack_launch.py

Eventually, I will attempt to address this, but solving this problem has proved VERY difficult.

Meta and Plan for next Blogs

I originally wanted this to be a short blog covering the process of making installing and using the mod easier. It turned out that just fixing the launch script was a royal pain, but that has been complete for nearly a week.

I have spent the last week trying to find a neat way to make the mod easier to launch, while also making it easier to install. I have completely failed at that.

If you care, here is a quick summary of all the ideas I have gone through:

Make adding an OS-specific script to OS's app launch directory part of the "install process".
- Adds a lot of effort to setup process
- Hard to explain
- Varies wildly by OS
  - Hundreds of ways to do this on Windows, all of which feel wrong.
Making a separate OS-specific script that automatically does the above.
- Turns out to be so complex I don't know how to get into it.
Compiling python script into 3 OS-specific executable files
- Still painful to add to OS app launch directory
- Compiling Python is PAIN
- How the hell will electron-inject see the JS?

Next blog will likely be some final cleanup to our injected JavaScript, which should be quickly followed by an "official" v1 release blog with a detailed install tutorial.