Vampire, "I drink mostly water."
Human, "But you're a vampire!"
Vampire, "And you are mostly water."
"Did you hear?"
"Hear what?"
"Our sister Candy Haus. She's dead. Burnt to a cinder."
"What! How?"
"Well, you know, she always was a careless one. Picked up two plump brats. Fattening up the one, and making the other do chores. Never occurred to her that maaaaaybe it might have been better to leave Hans-El and Gret-El alone."
"Ugh. Cherubs?"
"Yep."
"Oh well, ashes to ashes and all that."
<.< An original retelling by Nugget.
(I don't know why, but I've never seen anyone else riff on this before...)
I currently lead an enterprise digital Product Design team, and I'm also design co-lead (together with my dev co-lead) for our Design System. We already have multiple UI (code) components that use container queries. This is gonna be soooooooooo helpful on the design model side, because with this plugin, our designers don't have to remember when to manually swap layouts on our models.
First iteration took about 10-12 hours total, and about 100~ credits on my personal Pro account. Fixing the bugs took another 200 or so credits. Learned quite a bit of stuff along the way though. Adding support for components imported into libraries (without which the plugin is basically pointless) took another 300~ credits.
Still need to get it cleaned up, it's a mess, but at least the core bugs are fixed.
This is a working copy, and here's how to use it, if you're curious. :)
Load & use FrameQuery Figma Plugin
- In Figma desktop app ONLY, open a Figma file with components that you want frame queries on.
- Right-click on empty space in Figma canvas: Plugins > Development > Import Plugin from Manifest.
- In FrameQuery 1.0.30 > new-plugin > select manifest.json.
- Click on "Nugget's Frame Queries" and the plugin should load.
- In the component that you want to have frame queries on, add a new Property FQ-size. Needs to be exactly this string incl. capitalisation. You can name the variants anything you like, for a given value of "anything". Spaces are supported, but there are some other characters that might not be.
- FrameQuery should dynamically pull your variants from anything you set in FQ-size.
- With the component selected, turn FrameQuery on.
- Set your breakpoints. A max is needed for your biggest breakpoint, just make it something silly like 9999px.
- Pop a component instance onto the canvas, stick it in a frame, and resize the frame. The current version only cares about width, but I might enhance with height later.
FrameQuery appends 🤖 to component names that have FQ enabled, and prepends 🤖 to frames that contain component instances with FQ enabled, so we can keep track of 'em without messing up how our prototypes look in demos.
FrameQuery also works with components imported from libraries (1.0.30)
- Follow steps 1-8 from above in your library file, and publish the library.
- Close the library file (you don't need to have it open).
- In your target file, load FQ.
- Pop in the component instance from your library file, just like you normally would. This is the component with 🤖 appended to its name.
- Pop the component instance in a frame.
- 🤖 is prepended to the frame name, and the frame is now responsive.
Proliferate little web apps, proliferate! Doesn't make up for the crap that's polluting the interwebs in terms of content, but I guess at least I can have my own little web apps now.
Behold, the Black Desert Online (BDO) Barter Planner!
Bartering is basically a trading (mini) game. You sail around trading stuff (...bartering it). BDO has a really really big map, and it's almost all non-instanced, so you can (literally) sail around for hours if (a) you want to for some reason; (b) you are bartering or hunting sea monsters.
In the "Item" column, I have the Item (survival kit) that I need to bring to a particular Location (Arakil island) to barter. It's grade "g" for green, and what I'll get in return for the barter is "box". The number of the item I need to bring is in the Quantity column.
This is a far from optimised setup. I don't even try to optimise distance and time, except to my own lackadaisical playstyle of "are those things in the same general vicinity". It doesn't have Margoria nor Valencia nodes because I've <.<; memorised all of those. Plus the "Crow Coin" option in the Barter UI in-game renders it unnecessary to track those nodes for trading. At least for me.
Features
- Easily track the trade goods you need for your non-Margoria barters, grouped by proximity.
- Search and filter by location names and codes.
- View location codes (arbitrarily assigned by me) by clicking on "Location code" column header.
- Clear rows when you've completed the barter.
- Sort rows to the top as you fill them in, so your to-do barters are always visible.
- Data is saved in LocalStorage, so you can open/close the file without worrying. Data is removed when you clear it.
- Runs purely local on your machine.
- No installation needed. Just unzip the file and open it in a web browser.
Download
First iteration / MVP
Windsurf told me how to install Python, and wrote the base HTML and JS, plus the PY file needed to run the Droplet server locally. My original idea was to use the web browser's localstorage, but that didn't work out, not least because the amount of data I could store that way is puny. The first iteration was very ugly and unfriendly, as the text/instructions were written in a way that made sense only to me.
After testing with my partner helping with uploading files (it worked, yay MVP), then it was refinement time.
Later iterations
- Add determinate loading bar during upload.
-
Make it prettier.
Hm! I've heard about classless styling/boilerplate HTML frameworks, maybe I can use one of those!
I ended up using the very lovely Water.css - Add understandable-to-humans instructions.
- Support folder uploads.
-
Delete uploaded files.
From the web app, instead of me deleting directly from Droplet's "upload" folder. - Display human-readable network device name of server.
- Improved instructions (round 2).
- Add QR code for easier mobile device access.
This was great fun, and I did manage to pick up a little bit about server side code, and improve my (very poor) JS knowledge a little to boot. And of course, now I have a Snapdrop replacement. ;)
Get a Droplet of your very own. :D
Today, I learned that Google Docs doesn't save accessible PDFs, even if you conscientiously wrote the doc accessibly. I.e. With the correct heading structure, lists that are actual lists, tables that are tables, figures, captions, alt text, oh my!
Instead, when exporting to PDF, Google Docs strips all accessibility-related information, resulting in an untagged PDF.
This was rather annoying to me, since I absolutely needed this particular document (a VPAT) to be accessible while in PDF form.
Poking around the interwebs, I came to the conclusion that most PDF accessibility remediation tools are one of the following:
-
Paid and expensive
Adobe Acrobat Pro, I'm looking at you. To be fair, it isn't just Adobe that charges rather a lot. -
Free, but don't work at all, or don't work very well
Pave-PDF was an example that didn't work for me at all... even when it finally loaded my document. -
Free, but insert watermarks, and possibly don't work
PDFix allowed me to tag my PDF, but I couldn't quite trust that it was working. Especially since PDFix finds "no bugs" with a PDF that... has no tagged content. To be clear, a PDF with no tagged content is not accessible. Plus, it inserts watermarks.
We'll get back to PDFix in a moment though - it does come in handy. -
Free, very possibly good, but Windows only
My work machine is a Mac.
Enough with the complaining - tell me how to get that accessible PDF!
It's really simple, but I didn't find anyone else laying out the exact steps, so here they are. Every article or answer I found assumed access to specific paid tools, which I don't have (MS Word, Acrobat Pro).
-
Ensure your base Google Doc has been authored accessibly.
If it isn't, make it so. I.e. use the correct heading structure, add captions to your images, etc. This is 95% of the work, "pre-done", almost. And if you need to fix stuff, it's easiest to fix it in your base Google Doc, rather than attempt it with any free tools. -
Export your base Google Doc as a MS Word .doc. Yup.
Because interestingly enough, when you export a Google Doc as an MS Word file, it preserves all of that tasty tasty accessibility information that you've included. -
If you have access to MS Word, open the file, and THEN export it as a PDF.
According to the interwebs, this should give you a nice, clean, accessible PDF. - If you're like me, and don't have access to MS Word...
Go to ilovepdf.com - it's free. - On the ilovepdf.com site, choose the "Word to PDF" option, and select your exported MS Word file.
-
Wait for your file to convert, then download it.
-
Congratulations! You now have a nice, accessible PDF!
BUT WAIT... How can you be sure it worked?
- On a Mac, right-click your nice (and hopefully) accessible PDF, and "Get info".
-
Look for "Tagged PDF" - if it says "Yes", it worked!
(Note that depending on your Mac OS version, "Get info" may no longer return this data.)
That's okay, you can check another way, that also lets you look at the tags, to make sure they're all legit, which is...
-
Download and install PDFix.
You're not going to use this to fix your PDF (because that'll make watermarks, among other issues), you're going to use it to check your PDF. -
Open your file in PDFix, and click on the "Tag" icon.
This pretty much works exactly the same way as Adobe Acrobat Pro, except that it's free. ;) -
Check out the tags in your (hopefully) lovely, accessible PDF. :D
Woohoo!
I've recently started learning Python for fun, and I've manually copy-typed my way to my very first Streamlit app - CatGPT Nekomancer!
In the process, I've discovered some fascinating things about Large Language Models (LLMs) like ChatGPT, and how they fit into learning a new programming language.
I'm particularly tickled by how I (mostly) implemented CatGPT Nekomancer by blindly following instructions, and then used it to understand what I'd done. There's just something magical about making something, and then having it teach you how you made it.
LLMs are great at explaining what a piece of code does
This is because they're functioning purely as "translators". The translation task plays to the strengths of LLMs - statistical pattern matching. Good judgement is not needed, because we're not concerned with "how" or "should".
Here's an example of CatGPT explaining its source code, in response to the prompt "explain what this code does", followed by the code.
This explanation was a little too high-level for me. I wanted to really understand what each line of code was doing. This was easily fixed with a different prompt: "explain this code line by line to a novice programmer". This gave me exactly the level of detail I needed.
I've worked with some pretty great software developers from all over the world who aren't native English speakers. My partner and I are both bilingual, and we'd previously experimented a little with using LLMs as translators for recipes, where we found that if we were able to avoid the LLM's tendency to interpolate (aka "hallucinate" aka "lie"), they do much better at translating than Google Translate.
So when my partner asked, "What if we get it to explain in Croatian? This would have been HUGE for me when I was learning," it was a no-brainer to give it a try with this prompt: "explain this code line by line to a novice programmer, in Croatian." For Croatian, at least, my partner verified that CatGPT's translation and explanation was "brilliant".
I can also ask the LLM to explain specific parts of the code that I don't understand, and learn new concepts that way. For example, I wasn't familiar with the concept of f-strings in Python, which I encountered when working on a different Python experiment. Thanks to CatGPT, I was very quickly able to understand that f-strings are strings that can hold expressions - nifty! I particularly love how the LLM fits so seamlessly into my personal learning "flow". Instead of having to go off to the greater interwebs to trawl through answers about f-strings in Python to figure it out from there, I have my own personal tutor.
LLMs increase the value that good software developers bring to the table
It's generally agreed - at least among software development managers and similar roles - that a good developer can pick up a new language pretty quickly and competently. That's because the core of what makes a good developer isn't the knowledge of a particular language. Rather, it's their grasp of transferrable concepts, frameworks, and understanding of best practices as principles. It's not about rote memorisation - it's about good judgement powered by understanding and experience.
Before LLMs exploded on the scene, a good developer could have everything I listed above, but when picking up a new language, or working with one they're rusty at, there'd still be a lag due to needing to learn the basics of the language (syntax, etc). With LLMs that lag is much smaller, allowing the developer to bring their strengths to bear much faster.
Caveat 1: LLMs are bad at advising on how a feature or function should be implemented
LLMs are based on statistical pattern matching, which makes them great at translation. It's also what makes them bad at anything that requires judgement calls based on a larger and often ambiguous context. They're not always wrong about "shoulds", they're just right far less often than the average human developer.
I believe that this is also what makes LLMs very weak at software development stuff that's presentational, or isn't primarily about logic. HTML, CSS, and web accessibility all fall into the bucket of not being about logic, as well as operating in a large and ambiguous context. It also probably doesn't help that LLMs have ingested the interwebs, and even today, there's probably loads more sites styling button text with <span> tags than sites using the correct approach. It's not like the LLM can tell which approach is better. After all, it's not thinking - it's pattern matching based on statistics.
Caveat 2: LLMs can't coach or mentor
Real "personalisation" is needed for coaching and mentoring. Both of these require human judgement and experience about the subject matter, as well as the individual receiving the coaching or mentoring. They also require (arguably to a lesser extent) a wish on the part of the coach or mentor for the person they're working with to learn and succeed. The simulated thing that we've come to call "personalisation" (e.g. a script grabbing your name from a database) does not and cannot work in this context.
The key to using LLMs effectively when learning software development: Know what you need
If you need explanations on what a piece of code does, LLMs are a great and reliable help. Even more so if you're not a native English speaker - LLMs can function as your own personal translator for both language and code.
If you need good advice on what you should implement, then LLMs aren't going to help much. Quite the opposite. Since they lack judgement (indeed, they do NOT judge), what they come up with is likely to be misguided at best.
It all comes down to the age-old "common sense" wisdom of using the right tools for the job. :)
I'm proud to say that today, I came up with a new term for what I usually call "pplshit"! :D
Now, I call it "pplshit" because it doesn't come naturally to me, and it's not something I love doing. I've gotten decent at it over the years, within certain boundaries - enough so that I can provide some degree of training/coaching in that area.
Which has lead me to the realisation that when I talk to someone who likes doing that stuff, or I'm trying to train or coach someone to be better at it, then the name "pplshit" is probably not the most inspiring one.
And so I I will now henceforth call "pplshit"... "peoplecraft"!
Peoplecraft
The art of working within organisational and personal environments and dynamics to nudge and bind disparate teams and stakeholders into effectively collaborating on shared goals.
"Ma'am, I think we have a problem. This is a still from some footage captured by Midge Ourney. You know that Nat Geo photographer who's on shooting on location in Jebil park for the next three weeks."
"Is this some kind of joke?"
"No Ma'am. We've got multiple reliable corroborating witnesses. Quite a few of them are park rangers."
"But that's impossible! Even with climate change. It's got to be a hoax."
"Yes, that's what I thought too. But last night, one of our best people sent me this. They spotted this woman in Toual el-Hadhali and managed to snap a photo. Don't worry, they weren't spotted
"And you're sure this isn't a coincidence? Maybe some kids were having one of those dress-up party things, what do they call it, co-playing?"
"Afraid not."
"All right, thank you. Looks like we have a situation here. Just when things were finally starting to calm down too."
But Nugget, aren't you a carnivore who loves cream?
Yes, I is! The nugget wasn't setting out to create a vegan cheese foam, it just sort of happened based on other requirements.
The foam is really stable, pretty fuss-free to put together, AND it tastes like cheese foam! All the cheese foam recipes I found either required planning ahead (softened cream cheese), or wouldn't taste like cheese at all. I like coconut milk, and I like maple syrup. I am completely unconvinced that the combination of the two tastes like any sort of cheese. :P
Requirements
- Must not require planning (pft, wait for cream cheese to soften, pft).
- Should ideally use ingredients with a long shelf life.
- Must be brainlessly easy to assemble. Also fast.
Ingredients
- 50 ml soy milk (I recommend Bonsoy, or Vitasoy manufactured in Taiwan)
- 2 tsp white sugar (don't use a syrup, white sugar gives this its structure)
- 1/4 tsp salt (or to taste)
- 1/2 tsp nutritional yeast <-- this is what makes it taste like cheese
Make it!
- Put all ingredients in a microwave safe container, tall enough to whip the stuff in (you want a cheese foam after all).
- Stir until combined.
- Warm in microwave in 15s intervals (you want it warm, or hot, not boiling).
- Whip / froth with milk frother (I recommend Aerolatte) about 20-30s, you should have a stable foam.
- Pour on top of drink!
Notes on ingredients
- Bonsoy, and the Vitasoy made in Taiwan do not contain oil. Soy milk w/o oil is what I grew up with, and I intensely dislike the mouthfeel of plant "milks" that have added oil.
- You can probably substitute another plant milk for soy milk, but ideally choose one w/o a strong flavour.
- If possible, choose a plant milk w/o the added oil (this could just be my prejudiced young age imprinting speaking haha).
- Nutritional yeast can be found a most health food stores. It makes
things taste like cheese w/o cheese being added. It's shelf stable, and
doesn't need to be refrigerated.
- Don't combine cow milk AND soy milk foam. The cow milk in the drink
will kill the foam structure of the soy milk foam really fast.
- You can substitute plant milk for cold heavy cream, whipped to soft
peaks.
When using heavy cream, don't heat it in the microwave, or it won't whip happily. Just stir the ingredients in, then whip. You will need to carefully spoon and ladle the foam onto your drink, and it may not stay stable for long if your drink is hot. Use dairy in your drink too (see previous point about cow milk killing soy milk foam).
- Aerolatte milk frothers are awesome. I've had mine for almost 10 years now. I bought another one from a diff brand to use in the office a few years ago, and it's terrible. It doesn't make nice froths!