September 6, 2022
Category: blog
Dear Tailwind CSS Users and AI Prompters,
Please remember to use the following when creating clickable buttons:
<button class="cursor-pointer ...">This ensures proper user interaction and better usability.
Thank you for your attention.
Regards,
Rawi Rai
Categories
Toy Box
13 feb update
- Block size: 1x – 8x. The new tool allows to add tiny blocks for precise design.
- Delete: ‘Build’ button now acts like the ‘Delete’ block when you ‘right-click + space bar’ the mouse.
- Undo: new button with keyboard support using ‘esc’ button.
What the hell is this toy box?
Just adding new logic. I don’t know what I’m doing 😄
https://fun.dharan.city/toy-box/ (simple JS/HTML/CSS)
#three.js
base on: https://aistudio.google.com/apps/bundled/voxel_toy_box?showPreview=true&showAssistant=true
demo – https://www.youtube.com/watch?v=AiYuEIIn2ao
more toward mobile and her iPad base build tool. so no plan for PC drag, rotate for canvas.
8 feb 2026
- fixing UI for more mobile friendly
- better UX for color pallets
- 20 presets
- move
- block = preset
9 feb 2026
- more fine tunes color — new color shades
- ‘BRUSH TOOL’ – color change of pre made blocks
Round 2
- Web Audio
- Auto-Save (local storage / Cookies / Cache)
Draft plan
- ‘move preset’ button
- block size 1x 2x
- screenshot
- recorded screen
Categories
Web Speech for Dummies — Me and AI
Current:
const utterance = new SpeechSynthesisUtterance(name);Change to:
const utterance = new SpeechSynthesisUtterance(name.toLowerCase());This will make it say “m e r c u r y” instead of “CAPITAL M CAPITAL E CAPITAL R…”
let me share MY – laptop buying tips!! (I’m not forcing anyone to follow, so don’t start arguments)
my pain—can’t play games on Windows. Windows getting worse by the day; even my desktop i5 13th / 580x looks shit these days. It’s been a year since I last played a game. Even if I clean format or use few SSDs or NVMe, it’s always the same, so I stopped bothering myself
so if you want an all-in-one laptop that can run Windows, Linux(problems free), and macOS, then just ask chatGPT to find the best Intel processor which supports all without pain.
like, if you make a wrong choice of processor, then after breaking up with Windows you will be nowhere, with a worse relationship with Linux. and most of the time, no way to use macOS.
so use chatGPT and research more… and more….
macOS – Hackintosh if you looking easy build try EFI from olarila
Linux – Why is Linux painful?
Even a potato laptop can run Linux, but some GPUs or processors don’t work well with it. So just try using ChatGPT to find out why Linux has problems with certain processors or GPUs.
regarding driver and hardware problem check most of all linux distort community.
#reddit post replay.
OK! But I’m still unhappy deep down in my mind. #UX
/*
Plugin Name: Post/Page Specific JS & CSS
Description: Add JavaScript and CSS to individual posts/pages
Version: 2.0
*/
<?php
/*
Plugin Name: Post/Page Specific JS & CSS
Description: Add JavaScript and CSS to individual posts/pages
Version: 2.0
License: No License
*/
// Add custom field to post editor
add_action('add_meta_boxes', function() {
// JavaScript box
add_meta_box('post_js_box', 'Post JavaScript', 'post_js_meta_box', 'post', 'normal', 'high');
add_meta_box('post_js_box', 'Page JavaScript', 'post_js_meta_box', 'page', 'normal', 'high');
// CSS box
add_meta_box('post_css_box', 'Post CSS', 'post_css_meta_box', 'post', 'normal', 'high');
add_meta_box('post_css_box', 'Page CSS', 'post_css_meta_box', 'page', 'normal', 'high');
});
// JavaScript meta box
function post_js_meta_box($post) {
wp_nonce_field('post_js_nonce', 'post_js_nonce_field');
$value = get_post_meta($post->ID, '_post_javascript', true);
echo '<textarea name="post_javascript" style="width:100%;height:150px;font-family:monospace;" placeholder="// Enter JavaScript code here (without <script> tags)">' . esc_textarea($value) . '</textarea>';
echo '<p><small>Enter JavaScript without <script> tags. jQuery is available if your theme loads it.</small></p>';
// Show jQuery example
echo '<details style="margin-top:10px;background:#f5f5f5;padding:10px;">';
echo '<summary style="cursor:pointer;font-weight:bold;">jQuery Example</summary>';
echo '<pre style="background:#fff;padding:10px;margin-top:5px;">';
echo "jQuery(document).ready(function($) {\n";
echo " // Your jQuery code here\n";
echo " $('.post-title').css('color', 'red');\n";
echo "});";
echo '</pre>';
echo '</details>';
}
// CSS meta box
function post_css_meta_box($post) {
wp_nonce_field('post_css_nonce', 'post_css_nonce_field');
$value = get_post_meta($post->ID, '_post_css', true);
echo '<textarea name="post_css" style="width:100%;height:150px;font-family:monospace;" placeholder="/* Enter CSS code here (without <style> tags) */">' . esc_textarea($value) . '</textarea>';
echo '<p><small>Enter CSS without <style> tags. Use !important if needed to override theme styles.</small></p>';
// Show CSS examples
echo '<details style="margin-top:10px;background:#f5f5f5;padding:10px;">';
echo '<summary style="cursor:pointer;font-weight:bold;">CSS Examples</summary>';
echo '<pre style="background:#fff;padding:10px;margin-top:5px;">';
echo "/* Change post title color */\n";
echo ".entry-title {\n";
echo " color: #ff0000 !important;\n";
echo "}\n\n";
echo "/* Add border to images in this post */\n";
echo ".post-" . $post->ID . " img {\n";
echo " border: 2px solid #ccc;\n";
echo " padding: 5px;\n";
echo "}\n\n";
echo "/* Make paragraphs larger */\n";
echo ".post-" . $post->ID . " p {\n";
echo " font-size: 18px;\n";
echo " line-height: 1.6;\n";
echo "}";
echo '</pre>';
echo '</details>';
}
// Save custom fields
add_action('save_post', function($post_id) {
// Save JavaScript
if (isset($_POST['post_js_nonce_field']) && wp_verify_nonce($_POST['post_js_nonce_field'], 'post_js_nonce')) {
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
if (!current_user_can('edit_post', $post_id)) return;
if (isset($_POST['post_javascript'])) {
update_post_meta($post_id, '_post_javascript', $_POST['post_javascript']);
} else {
delete_post_meta($post_id, '_post_javascript');
}
}
// Save CSS
if (isset($_POST['post_css_nonce_field']) && wp_verify_nonce($_POST['post_css_nonce_field'], 'post_css_nonce')) {
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
if (!current_user_can('edit_post', $post_id)) return;
if (isset($_POST['post_css'])) {
update_post_meta($post_id, '_post_css', $_POST['post_css']);
} else {
delete_post_meta($post_id, '_post_css');
}
}
});
// Output JavaScript in footer
add_action('wp_footer', function() {
if (is_singular()) {
global $post;
// Output JavaScript
$js = get_post_meta($post->ID, '_post_javascript', true);
if (!empty($js)) {
echo "\n<!-- Post-Specific JavaScript -->\n";
echo "<script>\n";
echo "(function() {\n";
echo "try {\n";
echo stripslashes(trim($js)) . "\n";
echo "} catch(e) {\n";
echo "console.error('Post JS Error on post #" . $post->ID . ":', e);\n";
echo "}\n";
echo "})();\n";
echo "</script>\n";
}
// Output CSS in footer (as fallback)
$css = get_post_meta($post->ID, '_post_css', true);
if (!empty($css)) {
echo "\n<!-- Post-Specific CSS (in footer) -->\n";
echo "<style>\n";
echo stripslashes(trim($css)) . "\n";
echo "</style>\n";
}
}
});
// Output CSS in header (primary location)
add_action('wp_head', function() {
if (is_singular()) {
global $post;
$css = get_post_meta($post->ID, '_post_css', true);
if (!empty($css)) {
echo "\n<!-- Post-Specific CSS -->\n";
echo "<style>\n";
echo stripslashes(trim($css)) . "\n";
echo "</style>\n";
}
}
});
// Add admin styles for better appearance
add_action('admin_head', function() {
echo '<style>
.post-js-box textarea,
.post-css-box textarea {
background: #f8f8f8;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
}
.post-js-box textarea:focus,
.post-css-box textarea:focus {
background: #fff;
border-color: #007cba;
box-shadow: 0 0 0 1px #007cba;
}
.post-js-box details,
.post-css-box details {
border: 1px solid #ddd;
border-radius: 4px;
}
</style>';
});Tiny dancing feet
Crush and crack dry winter leaves—
Giggles warm the air 🍂