Technical Articles
Styling SVGs with CSS When utilising SVGs in your HTML, you may find yourself inserting them using the img tag. This is nice and clean and keeps them formatted and styled in the same way as your other images However, this adds a limitation to your ability to dynamically style them. Html: If you’re working…
Vite’s auto refreshing can sometimes get in the way. Here’s a way to stop it…
React Native apps using Expo won’t connect to your physical device on locked down networks without tunnelling…
Most examples online define defaultProps after the class or function. Here’s why I define it before…
Obsidian plugin development allows you to add support for new filetypes…
Pulling the extension from a filename in javascript can be done in many ways. And it’s easy to do in a way that will create errors…
A quick reference for creating a new file type in Obsidian plugin development…
WebViews will become transparent iFrames when compiling for the Web, but won’t be transparent by default on iOS or Android…
Accessing the Obsidian plugin instance from a CodeMIrror view plugin extension isn’t immediately obvious from the Obsidian docs…
tlDraw let’s you tie into listeners that fire whenever the user edits, moves, or selects something on the canvas, but they also fire when making changes programmatically…
While working with the tlDraw framework for infinite canvases, you may want to make programmatic changes to the content in the editor without the user being aware of them. That means that some of your modifications shouldn’t appear in the undo stack…
Allow an element to scroll normally but stick the edge of the window instead of ever scrolling off the page is a little trickier than just stick CSS in some cases…
Jsfiddle is a great for embedding web snippets into blog posts, however, the ability to reorder the tabs and define what’s shown first is hidden…
An ambiguous “characters of unexpected output” bug that had me chasing my tail for hours…
Vim as terminal text editor is grossly unintuitive, anything is better. I use Sublime text…
A quick guide for setting up your Android Studio environment variables on a Mac…
Multiple RichText components in one Gutenberg block can create issues when reloading the page in the editor that are easily fixed…
JIra’s kanban boards can have a lot of visual noise, so here’s some CSS to help make it more focussed and readable…
While developing plugins, you’ll often need to copy your compiled code into the applications plugin folder with each save. This simplifies that by linking the two…
If you spread a single level array or object only to later increase it’s depth, you might find yourself chasing your tail later if it gets more complex…
Dropbox sync and the node_modules folder in Git projects don’t play well together. Here are some solutions…
Changing an immutable object in react can make your code a little more efficient, but this should be exercised with caution…
Including lodash just to use cloneDeep is like using a Bazooka to kill a rabbit…
Images cover up inset box-shadows, but you can get around it with the after pseudo-element…
This error can be elusive and give you little indication of what’s wrong, however, there are a few easy things you can try to start…
Writing a basic esbuild plugin to copy specific files during the build process…
Writing a basic esbuild plugin to rename a file at the end of the build process…
When adding appearance transitions to components in Evolve Authoring, they often sit on top of everything else and look messy…
iFrames placed on top of each other in Evolve Authoring will have a gap in between them that you may not want…
Sometimes the feedback button in Evolve Authoring is best disappeared. This is a hack to do that…
If you’re comfortable handling Lottie animation files, you might consider how to handle the javascript player that enables them…
In the Media Grid Text component in Evolve Authoring, the heading and body hierarchy within each item could be better. This can help…
One annoyance with image links in Evolve Authoring is that the links don’t have useful hover states. Which meant feedback for the user is limited…
The link component in Evolve Authoring lays links out rigidly. But you can hack it to align horizontally and simply wrap onto new lines as needed…
Code editors often have plugins that let you add custom highlights to your code. These can help you highlight aspects of your code that are important to your workflow…
If you’ve been considering using Lottie animations in your projects. Should you link to them or download and package them with your project?…
Storing your files separately and linking them into your projects can give download, and maintenance benefits. One way to do that is using Github…
MCQ feedback icons in Evolve appear within the page and inside popups, but they tend not to match each other. This hack allows you to tweak that…
When you add an MCQ or GMCQ block in Evolve, a button can be can shown that allows users to reset the question and try again. This hack helps that button stand out…
Accordion components in Evolve only allow text links, not buttons. So I created this hack to style the links like more polished and consistent buttons…
Sometimes you want an article to be hidden completely until a certain interaction occurs. This hack allows you to use locked articles for this purpose…
Buttons can feel unbalanced when you add icons into them. This hack will help fix that…
Learn how to apply the default customisation template with it’s default customisations. As well as how to use that template to copy in other styling changes…
I used to hack Evolve Authoring’s project exports to handle the most common issues I need to solve. I’d add custom CSS and JS files to make adjustments. So I thought I should share these techniques…
While Articulate Storyline provides basic animation tools, there is often a lot to be desired. With various brute-force methods, complex animation can be created, but often certain techniques are only realistic in other software. Lottie animations can sometimes bridge that gap…
While working in Evolve Authoring, one technique I applied quite regularly was to replace static graphics with animated ones—Not animated GIFs or videos, however, but Lottie animations—that are often much smaller in file size and much higher quality. This article looks at that process…
Lottie is a tool that helps enable more fluid animation across websites and apps. It’s a great way to get clean, crisp, vector animation into your products…
Embedding Lottie in an html page is often the easiest way to use it in various authoring tools that don’t natively support it…
If you’re not creating your own Lottie animations, where can you get them?…