Skip to content

Instantly share code, notes, and snippets.

@ranbena
ranbena / form.tsx
Last active September 27, 2026 19:40
useOnBeforeUnload
const MyForm: React.FC = () => {
const [name, setName] = useState('');
const [isDirty, setIsDirty] = useState(false);
useOnBeforeUnload(
isDirty,
'You have unsaved changes. Are you sure you want to leave?',
);
const handleSubmit = async (event: React.FormEvent) => {
@ranbena
ranbena / hover.scss
Created September 21, 2026 11:00
Fix for mobile browser "tap on hover"
@mixin hover-no-touch {
@media (hover: hover) and (pointer: fine) and not (any-pointer: coarse) {
@content;
}
}
// (hover: hover) → main pointer can hover
// and (pointer: fine) → that pointer is a cursor, not a finger
// and not (any-pointer: coarse) → nothing coarse is plugged in / built in
@ranbena
ranbena / check-debugger.js
Created September 9, 2026 11:45
Precommit checks
const { execSync } = require('child_process');
const DEBUGGER_REGEX = /(^|\s)debugger;($|\s)/;
const FILE_EXTENSIONS = /\.(js|jsx|ts|tsx)$/;
try {
// get a list of staged files
const stagedFiles = execSync('git diff --cached --name-only --diff-filter=ACM', {
encoding: 'utf-8',
}).split('\n');
@ranbena
ranbena / form.html
Created March 12, 2024 13:33
Google Forms custom UI
<form action="https://docs.google.com/forms/u/0/d/e/FORM_ID/formResponse" method="POST" target="hidden_iframe">
<input type="text" name="entry.123" placeholder="Your Name" required style="width: 100%; padding: 10px; margin-top: 8px; margin-bottom: 16px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 16px;"><br>
<input type="email" name="entry.234" placeholder="Your Email" required style="width: 100%; padding: 10px; margin-top: 8px; margin-bottom: 16px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 16px;"><br>
<input type="checkbox" name="entry.345" value="I consent" id="entry.345" required style="margin-right: 5px;">
<label for="entry.1283556572">I consent</label><br>
<br>
<button type="submit" style="background-color: #c4793d;
; color: white; padding: 14px 20px; border: none; border-radius: 4px; cursor: pointer; width: 100%; font-size: 16px;">REGISTER TO JOIN YOUR FREE BREATHWORK SESSION</button>
</form>
@ranbena
ranbena / dummy_data.sql
Created August 30, 2019 15:33
3 column 2 row sql
SELECT 27182.8182846 AS a, 20000 AS b, 'lorem' AS c UNION ALL
SELECT 31415.9265359 AS a, 40000 AS b, 'ipsum' AS c
select s.a FROM generate_series(1,5) AS s(a)
@ranbena
ranbena / CoZ_Contributions_Week_78.md
Created January 3, 2019 05:12
CoZ contributions week #78

Neon Wallet

Reviews

  1. Feature: send UX enhancements #1766

Features

  1. Working on Multisig feature #1695. Will send preliminary PRs next week.
@ranbena
ranbena / component.js
Created December 27, 2018 18:26
React inheritance
class Label extends React.Component{
constructor(props){
super(props);
this.className='plain-label';
}
render(){
return <span className={this.className}>
{this.props.children}
</span>
}
@ranbena
ranbena / CoZ_Contributions_Week_77.md
Last active December 23, 2018 06:22
CoZ contributions week #77

Neon Wallet

Features

  1. QR Scan visual effects #1762

Bug fixes

  1. Missing frame lines in Send modal #1759

Code Optimizations

@ranbena
ranbena / error.sh
Last active December 21, 2018 10:31
Flow animationend error
Cannot call video.addEventListener because:
• Either string [1] is incompatible with enum [2].
• Or string [1] is incompatible with enum [3].
• Or string [1] is incompatible with enum [4].
• Or string [1] is incompatible with enum [5].
• Or string [1] is incompatible with string literal wheel [6].
• Or string [1] is incompatible with enum [7].
• Or string [1] is incompatible with enum [8].
• Or string [1] is incompatible with enum [9].