2023 D3 Reactive Responsive skeleton

A better Trader d3 node-js Open Source Websites

A better Trader has been a work-in-progress project of mine for a very long time. The web UI was done in vanilla javascript, with old school imports, and PHP-style server-generated html, then added jQuery, then bootstrap, then started removing jQuery, then moved towards more-static html with JSON payloads for the data, then pined for better node imports, then then then. You get the point.

I went too long without a rewrite, so I recently became a weekend warrior skeletoning up the next gen web ui. Parts include:

  • Vite due to its blazing hot-loading, tree-shaking, polyfilling goodness
  • React because it’s good enough and gets the job done
  • Bootstrap because I won’t have time to finish the mobile apps for a while

For my UIs, D3 is the most important library there is. So the skeleton is based on responsively displaying a handful of some of Mike Bostock’s greatest hits (imho). This was quite important to me because D3 examples have been somewhat obfuscated when they were migrated to Observables notebooks. The skeleton makes it much easier for me to quickly get working D3 examples by copying Mike’s Observables code into a cozy little container with all the bells and whistles in place.

Let me know what you think of it.

Live Demo | GitLab | GitHub | Wiki

Comments | Saturday, March 4, 2023

Make linux yours with kill [-STOP|-CONT]

Firefox Media Center Open Source Tricks Tips Tools

Browsers are here to own our desktops. But they will never deliver the absolute horsepower of a natively-coded world-class desktop app or game.

These days, when you try to run one, you will find it is crippled by the browser’s 100 open tabs (admit it, you have that many open…). And lord knows you don’t want to close them all.

I am the user. I am the king. Not the last 20 sites I happened to browse, each of which is allowed to take a huge chunk of our system resources for whatever task they deem important. Once you’ve rabbit-holed down a few holes, you have given your entire system resources to them.

Don’t put up with this. OWN YOUR OWN SYSTEM.

To really take it back when you need to play a game, work in your DAW, or play a 4k video at high frame rate, you need that browser to give up ALL its resources. And in linux, that is super easy.

  • Find the parent browser process pid:
ps ax --forest| grep "[0-9][\_ ]*/usr/lib/firefox/firefox$"
  • “STOP” it. This is the magic that tells linux to just stop serving the parent process and all its children, stripping all CPU allocation from the tasks, without actually closing anything (especially your precious tabs scattered across all your virtual desktops). It’s amazing, it will freeze your browser in its tracks in an instant:
kill -STOP #pid-from-previous-step#
  • Start your powerhouse desktop app and do your thing.
  • When you’re done, you can “CONTINUE” the stopped process, kicking off the CPU to immediately start servicing all that javascript again:
kill -CONT #pid-from-previous-step#

I’ve scripted this up so I can press a media key to “stop” firefox and start up Kodi with beautiful performance. Here’s my javascript “continue” script, which uses my rad-scripts tooling:

#!/usr/bin/env node
import * as rs from 'rad-scripts';
const ffPs = rs.run_command_sync('ps ax --forest| grep "[0-9][\_ ]*/usr/lib/firefox/firefox$"');
const ffProcId = +( ffPs.trim().split(' ')[ 0 ] );
console.log( `Parent firefox pid = ${ffProcId}` );
rs.run_command_sync_to_console(`kill -CONT ${ffProcId}`);

Comments | Saturday, November 26, 2022

Wayback SO

C++ Websites

Comments | Monday, December 16, 2019

Getting pretty Google fonts into WordPress

Tricks Tips Tools Wordpress

This article is a great explanation of the details. To explain.. no, too much. To sum up:

  • Go to Google Fonts and browse around and select ones you like, then click the bar in the footer to get an installation guide. This generated link is the important part:
    • https://fonts.googleapis.com/css?family=Lato|Montserrat|Oswald|Quicksand|Roboto
    • Because it is a “heavy thing”, I pared that list down to Montserrat for paragraph text and Quicksand for headings.
  • Put one-shot loading of the link into functions.php (details on wiki); example: 
function custom_add_google_fonts() {  
    wp_enqueue_style( 
        'custom-google-fonts', 
        'https://fonts.googleapis.com/css?family=Montserrat|Quicksand',
        false 
    );  
}  
add_action( 'wp_enqueue_scripts', 'custom_add_google_fonts' );
  • Specify the style in CSS (details on wiki):
body {  font-family: Montserrat, sans-serif;  font-weight: normal;  }
#content h2 {  font-family: Quicksand, sans-serif;  font-weight: bold;  }

Comments (1) | Saturday, January 26, 2019

Shiny shiny updates

Gentoo Server git Mediawiki Open Source Phabricator PHP Wordpress

Today I updated my gentoo server’s eselected PHP from 5.6 to 7.2 and wordpress phabricator and mediawiki didn’t even hiccup. WordPress went from a steaming pile of stubborn version upgrade refusal right back into line. I used mysqldump to back up all my databases, less than a GB. I git pulled phabricator’s stable branch (updated weekly from master) and ran a boatload of database patches that went smooth as coconut milkfat. I git-skipped the .arcconfig files so i could just update them in place. OK… why did that all just work?

Update: I went ahead and made the phabricator-recommended changes to mysql and PHP, including installing a PHP memory-based cache:

emerge -DavuN dev-php/pecl-apcu

And that, of course, cascaded me into a gentoo server update.

  • first I had to [emerge -av glibc] as it was ancient
  • do not put comments in [/etc/portage/package.use/zzz_autounmask]
  • used advice from gentoo perl docs:
emerge -uDNav --with-bdeps=y --backtrack=100 --autounmask-keep-masks=y @world

And away we go…

UPDATE: ok these are a few more of my “favorite” things…

  • mediawiki required an update, I had to manually tweak my multi-site LocalSettings overrides since some themes were removed, and some were added.
  • I decided to go through all the phabricator tweaks that it complains about.
  • I fell into an update of my fork of Simple Web Server, not really related except that it was YA deep rabbit hole.
  • Files served up were made real pretty with this; I had to tweak the .htaccess to make it correctly mo safe.
  • Moving to boost 1_69_0 was actually a lot of (CPU) work.
  • While I was moving things around, I set up a nice git flow for my stock app, with branches:
    • develop
      • feature/postgress-archive
      • refactor/use-archive-db
    • master
      • release/1.55.41-pre-archive-database

Comments | Tuesday, January 15, 2019

« Older entries