Skip to content

Instantly share code, notes, and snippets.

View james2doyle's full-sized avatar

James Doyle james2doyle

View GitHub Profile
@james2doyle
james2doyle / Default (OSX).sublime-keymap
Created April 12, 2024 17:38
The default Sublime Text keymap
/*
On OS X, basic text manipulations (left, right, command+left, etc) make use of the system key bindings,
and don't need to be repeated here. Anything listed here will take precedence, however.
*/
[
{ "keys": ["super+shift+n"], "command": "new_window" },
{ "keys": ["super+shift+w"], "command": "close_window" },
{ "keys": ["super+alt+shift+n"], "command": "new_os_tab" },
{ "keys": ["ctrl+alt+tab"], "command": "next_os_tab" },
{ "keys": ["ctrl+alt+shift+tab"], "command": "prev_os_tab" },
@james2doyle
james2doyle / parallel-runtime.php
Created April 1, 2024 16:25
An example of parallel which is a parallel concurrency extension for PHP
<?php
/** @see https://www.php.net/manual/en/intro.parallel.php */
$runtime = new \parallel\Runtime();
$channel = new \parallel\Channel();
// Run a task in parallel, passing a channel for communication
$future = $runtime->run(function () use ($channel) {
// Do some work here
$channel->send('Result');
@james2doyle
james2doyle / ClientGate.tsx
Last active March 25, 2024 22:42
React.useSyncExternalStore is exactly what we need to avoid hydration errors, and moreover, if we transition to a page with useSyncExternalStore on the client, the clientSnapshot will immediately be taken. Taken from: https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store
/**
* ClientGate - a component that will only render on the client, where you can safely access browser only APIs
*
* Usage: `<ClientGate>{() => `Hello Client ${window.title}`}</ClientGate>`
* @see https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store#usesyncexternalstore
*/
const emptySubscribe = () => () => {};
const ClientGate = ({ children }: React.PropsWithChildren) => {
@james2doyle
james2doyle / .phpactor.yml
Created March 22, 2024 22:25
A yaml config for phpactor that can be used in Laravel. Supports laravel-ide-helper files
indexer:
stub_paths:
- "%application_root%/_ide_helper.php"
- "%application_root%/_ide_helper_models.php"
- "%application_root%/vendor/laravel/framework/src/Illuminate/Support/Facades"
- "%application_root%/vendor/laravel/framework/src/Illuminate/Database/Eloquent"
- "%application_root%/vendor/laravel/framework/src/Illuminate/Http"
- "%application_root%/vendor/laravel/framework/src/Illuminate/Routing"
- "%application_root%/vendor/laravel/framework/src/Illuminate/View"
- "%application_root%/vendor/laravel/framework/src/Illuminate/Foundation"
@james2doyle
james2doyle / ffmpeg-convert.sh
Last active March 15, 2024 18:57
Downscale a folder of mp4 files using ffmpeg. This loop takes an input video file, scales it to a height of 720 pixels while maintaining the aspect ratio, encodes the video using H.264 and the audio using AAC, and saves the output as an MP4 file with the same base name as the input file, but with "0-" prepended to it.
#!/usr/bin/env bash
# The provided ffmpeg command performs several operations:
#`-vf "scale=-1:720,setsar=1"`: The `-vf` option stands for "video filter" and allows you to apply various video processing operations. In this case, two filters are applied:
# - `scale=-1:720`: This filter scales the video vertically to a height of 720 pixels, while maintaining the original aspect ratio. The `-1` value for the width means that the width will be calculated automatically based on the new height.
# - `setsar=1`: This filter sets the sample aspect ratio (SAR) to 1, which ensures that the video is displayed with square pixels.
#`-c:v libx264`: This option specifies the video codec to be used for the output file. In this case, it's the x264 codec, which is a popular and widely-used H.264 video codec.
#`-crf 20`: The Constant Rate Factor (CRF) is a quality setting for the x264 codec. A lower CRF value (e.g., 20) results in higher quality and larger file size, while a higher CRF value (e.g., 28) results in lower qual
@james2doyle
james2doyle / main.yml
Created January 21, 2024 20:09
A Github action that builds Dart/Flutter APKs for Android as artifacts that can be downloaded after the build completes
name: Build and Release APK
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
@james2doyle
james2doyle / fetch-graphql.js
Created January 19, 2024 23:17
An example of using fetch for graphql endpoints
fetch('/graphql', {
method: 'POST',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${storefrontToken}`
},
body: JSON.stringify({
query: gqlQueryString
})
@james2doyle
james2doyle / split-file-and-run-command.sh
Created January 19, 2024 17:37
Split a file into lines and run a command for each one. This example is run on cURL
awk '{printf("%s\0", $1)}' list.txt | xargs -0 -n 1 curl -I
@james2doyle
james2doyle / it-is-easier-to-make-things-great-in-vue.md
Last active January 16, 2024 19:11
A comparison between using Nuxt/Vue and Next/React

It is easier to make things great in Vue

TLDR: It is easier to make things great in Vue because it helps you and requires less magic and complexity.

I’ve been playing with the latest version of Nuxt over the last few weekends.

I’ve been using a recent Next (v13) site as the base for a project. I have the basic top level routes recreated now.

So I have touched all the major parts. These are my thoughts on the reasons I think Vue is better than React for content driven sites.

@james2doyle
james2doyle / simple-reactive-vue-state.js
Last active December 13, 2023 17:19
The simplest solution to lots of state management problems is to use a composable to create a shareable data store. This pattern has a few parts: 1. A global state singleton 2. Exporting some or all of this state 3. Methods to access and modify the state
/*
* The simplest solution to lots of state management problems is to use a composable to create a shareable data store.
*
* This pattern has a few parts:
*
* A global state singleton
* Exporting some or all of this state
* Methods to access and modify the state
*/
import { reactive, toRefs, readonly } from 'vue';