development
-
Prevent Vite doing a full reload
Vite’s auto refreshing can sometimes get in the way. Here’s a way to stop it.
-
Expo won’t connect to my physical device
React Native apps using Expo won’t connect to your physical device on locked down networks without tunnelling.
-
Creating a new filetype in Obsidian
Obsidian plugin development allows you to add support for new filetypes.
-
Extracting the extension from a filename string
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.
-
Register a new file type in Obsidian
A quick reference for creating a new file type in Obsidian plugin development.
-
Transparent React Native iFrames/WebViews
WebViews will become transparent iFrames when compiling for the Web, but won’t be transparent by default on iOS or Android.
-
Accessing the vault from An Obsidian CodeMirror plugin
Accessing the Obsidian plugin instance from a CodeMIrror view plugin extension isn’t immediately obvious from the Obsidian docs.
-
Modify the tlDraw store without firing listeners
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.
-
Programmatic changes in tlDraw without affecting undo/redo stack
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.
-
Sticky elements in Obsidian markdown views
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.
-
Reorder tabs in JSFiddle embeds
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.
-
Spaces in a PHP file
An ambiguous “characters of unexpected output” bug that had me chasing my tail for hours.
-
Set git to use Sublime Text for commit messages
Vim as terminal text editor is grossly unintuitive, anything is better. I use Sublime text.
-
Android Studio Environment Variables on Mac
A quick guide for setting up your Android Studio environment variables on a Mac.
-
Multiple RichText components cause issues in WordPress
Multiple RichText components in one Gutenberg block can create issues when reloading the page in the editor that are easily fixed.
-
Improve kanban reabability in Jira
JIra’s kanban boards can have a lot of visual noise, so here’s some CSS to help make it more focussed and readable.
-
Linking folders for synced testing and development
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.
-
Spread can be a timebomb
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.
-
Ignore files and folders from Dropbox sync
Dropbox sync and the node_modules folder in Git projects don’t play well together. Here are some solutions.
-
Clone the Object After Manipulation
Changing an immutable object in react can make your code a little more efficient, but this should be exercised with caution.
-
Deep Cloning Efficiently
Including lodash just to use cloneDeep is like using a Bazooka to kill a rabbit.
-
Inner shadows on Image Elements
Images cover up inset box-shadows, but you can get around it with the after pseudo-element.
-
React Error #130
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.
-
A Basic Custom esbuild Copy Plugin
Writing a basic esbuild plugin to copy specific files during the build process.
-
A Basic Custom esbuild Rename Plugin
Writing a basic esbuild plugin to rename a file at the end of the build process.
-
Evolve Hack: Prevent Article Animation Bleed
When adding appearance transitions to components in Evolve Authoring, they often sit on top of everything else and look messy.
-
Evolve Hack: Removing the iFrame Margin
iFrames placed on top of each other in Evolve Authoring will have a gap in between them that you may not want.
-
Evolve Hack: Remove MCQ Feedback Buttons
Sometimes the feedback button in Evolve Authoring is best disappeared. This is a hack to do that.
-
Lottie Player File: Download or Link to?
If you’re comfortable handling Lottie animation files, you might consider how to handle the javascript player that enables them.
-
Evolve Hack: Refine Media Grid Text
In the Media Grid Text component in Evolve Authoring, the heading and body hierarchy within each item could be better. This can help.
-
Evolve Hack: Hover States for Image Links
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.
-
Evolve Hack: Getting All Your Links in a Row
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.
-
Custom Highlighting in Visual Studio Code
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.
-
LottieFiles: Download or Link to?
If you’ve been considering using Lottie animations in your projects. Should you link to them or download and package them with your project?
-
Linking Lottie Animations from GitHub
Storing your files separately and linking them into your projects can give download, and maintenance benefits. One way to do that is using Github.
-
Evolve Hack: Restyle MCQ Ticks and Crosses
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.
-
Evolve Hack: Highlighting the Retry Button
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.
-
Evolve Hack: Style Accordion Links Like Buttons
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.
-
Evolve Hack: Hiding Locked Articles
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.
-
Evolve Hack: Refining Button Icons
Buttons can feel unbalanced when you add icons into them. This hack will help fix that.
-
Evolve Hacks: Applying Your Hacks
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.
-
Hacking Evolve Authoring
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…
-
Using Lottie Animations in Storyline 360
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.
-
Using Lottie Animations in Evolve Authoring
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.
-
What is a Lottie Animation?
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.
-
Using Lottie Animations through iFrames
Embedding Lottie in an html page is often the easiest way to use it in various authoring tools that don’t natively support it.
-
Stock Lottie Animations: Finding & Using Them
If you’re not creating your own Lottie animations, where can you get them?