designdebt.club
Space-between and flex-end together
Using flexbox to get space-between your elements when there’s many but aligning to one side when there’s few can be counter-intuitive.
Read ›Development
Debug your native iOS code with Mac Console
Javascript console logs are are something React Native developers are very familiar with, but sometimes you need to log from native code.
Read ›Failed to send a request (iOS Simulator Bug)
A head scratching bug with sending requests on the iOS 18.4 simulator
Read ›Unity XR Simulator Crashing
Common reasons why Meta’s XR Simulator in Unity might by crashing or freezing.
Read ›Show text selection across embeds in Obsidian (CodeMirror 6)
When building a code mirror 6 or Obsidian embed, it won’t get highlighted like other text selections by default. But it’s possible.
Read ›Computer doesn’t detect your Android device
Sometimes it’s hard to know why an Android mobile device isn’t being detected by your computer for development.
Read ›Getting an embed’s full file path in Obsidian
Embed’s in Obsidian often have shortened paths, so how do you get the full path when manipulating them with a plugin?
Read ›Bottom aligned chat interface with CSS
Building a bottom aligned chat interface with CSS when you don’t need more complex components.
Read ›Auto-resizing text areas
Why do so many forms on websites require the user to drag and expand large text areas if they need more space. Just auto-resize them!
Read ›Can’t see passthrough in WebXR
Non-transparent backgrounds and skyboxes and prevent an immersive-ar experience from showing the passthrough.
Read ›Can’t access my WebXR from Meta Quest
Learn how to access your webXR page over the network while developing, and ensure you can enter immersive mode.
Read ›Static assets in Expo for React Native
I was initially confused about paths, loading, and bundling when using exp-assets for static assets.
Read ›Refreshing your modal or settings tab in Obsidian
Here’s a quick hack you can use while initially developing and Obsidian plugin.
Read ›ReactJS: Refers to a value, but is being used as a type here
“Refers to a value, but is being used as a type here” Can sometimes be cryptic when related to mounting your initial React component.
Read ›View existing local storage
View existing local storage If you want to check all localStorage values for the current web page, there are a couple of ways. One way that I often find myself doing is running this little snippet of code. But it’s not the most accessible way. The reason I like the above bit of code is […]
Read ›Make SVG shapes transform like Dom elements
Make SVG shapes transform like Dom elements For a previous article on this blog I found myself rotating an SVG shape using CSS. At which point I immediately realised that the usual way of shifting the origin of rotation to the centre worked differently for SVG shapes than it did for standard dom elements. For […]
Read ›Styling SVGs with CSS
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 […]
Read ›Prevent Vite doing a full reload
Vite’s auto refreshing can sometimes get in the way. Here’s a way to stop it.
Read ›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.
Read ›Creating a new filetype in Obsidian
Obsidian plugin development allows you to add support for new filetypes.
Read ›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.
Read ›Register a new file type in Obsidian
A quick reference for creating a new file type in Obsidian plugin development.
Read ›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.
Read ›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.
Read ›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.
Read ›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.
Read ›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.
Read ›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.
Read ›Spaces in a PHP file
An ambiguous “characters of unexpected output” bug that had me chasing my tail for hours.
Read ›Set git to use Sublime Text for commit messages
Vim as terminal text editor is grossly unintuitive, anything is better. I use Sublime text.
Read ›Android Studio Environment Variables on Mac
A quick guide for setting up your Android Studio environment variables on a Mac.
Read ›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.
Read ›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.
Read ›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.
Read ›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.
Read ›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.
Read ›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.
Read ›Deep Cloning Efficiently
Including lodash just to use cloneDeep is like using a Bazooka to kill a rabbit.
Read ›Inner shadows on Image Elements
Images cover up inset box-shadows, but you can get around it with the after pseudo-element.
Read ›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.
Read ›A Basic Custom esbuild Copy Plugin
Writing a basic esbuild plugin to copy specific files during the build process.
Read ›A Basic Custom esbuild Rename Plugin
Writing a basic esbuild plugin to rename a file at the end of the build process.
Read ›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.
Read ›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.
Read ›Evolve Hack: Remove MCQ Feedback Buttons
Sometimes the feedback button in Evolve Authoring is best disappeared. This is a hack to do that.
Read ›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.
Read ›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.
Read ›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.
Read ›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.
Read ›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.
Read ›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?
Read ›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.
Read ›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.
Read ›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.
Read ›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.
Read ›Evolve Hack: Refining Button Icons
Buttons can feel unbalanced when you add icons into them. This hack will help fix that.
Read ›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.
Read ›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.
Read ›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…
Read ›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.
Read ›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.
Read ›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.
Read ›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.
Read ›Stock Lottie Animations: Finding & Using Them
If you’re not creating your own Lottie animations, where can you get them?
Read ›