MUI React Progress Bar

When building a page with a Linear Progress bar, I thought it should have been partially filled and it wasn’t filled at all. Turns out it expected value to be between 0-100 and I was assuming it would have been 0-1. Best to check the documentation over just guessing, but we all know developers hate reading the documentation. So best do some tests to see which range it expects.

Debugging in PHP

When you want to debug certain sections of code with in an environment without restarting Apache or NGINX, there’s a template I use for displaying print messages.

ini_set('display_errors', 1);

echo "<pre>".json_encode($VALUE, JSON_PRETTY_PRINT)."</pre>";

ini_set('display_errors', 0);

Swift Temperature Format Customization

When you use Measurement format function in Swift it will always format the temperature to the format of the locale of the device. This is not the experience I wanted in my application. I wanted to provide the user an option to chose which scale they wanted to use, so I had to override the format operation. I used the following function to make this happen.

func formatTemperature(_ temperature: Double, _ scale: UnitTemperature) -> String {
	let source = Measurement(value:temperature, unit: UnitTemperature.celsius)
	let converted = source.converted(to: scale)
	return "\(String(format: "%.1f", converted.value))\(converted.unit.symbol)"
}

Error Handling

Some of the biggest things that bug me as a user of software is how they handle errors. Apple has been known for silently handling errors and not telling users that something went wrong, this is bad. Another example of bad user handling is how Git Kraken handles theirs, they have a toast in the lower left that disappears after a duration of time. Both of these are really frustrating to the user of the software.

The best way to handle errors is to provide clear and copy-able error messages for your user. You could provide this using an alert, clearly visible logs, or a (persistent until dismissed) toast message in the corner. How ever you do this, provide a way that the user can take the error to Google afterwards. I prefer the alert method so that I am forced to acknowledge that an error has occurred.

Code Style Tips

When you write if/else statements please put your else block on a new line not on the same line. The following doesn’t work with certain editor for code block collapsing.

if(x==1){ 
    console.log("Blah");
} else {
    console.log("bah");
}

Do the following instead.

if (x == 1) 
{
    console.log("Blah");
} 
else 
{
    console.log("bah");
}

OR

if (x == 1) {
    console.log("Blah");
} 
else {
    console.log("bah");
}

The second way allows those of us who use code collapse features inside of editors to collapse each part of the if/else. Thanks.

Sharpening My Tools Part 2

Developing an iOS application is full of small bits of repetitive tasks. When you develop User Interface in code, you must create and handle constraints in code. Depending on what you have to do this could become extremely repetitive and complicated. You can write each constraint yourself, but this gets time consuming and could become messy and confusing.

I decided to create a function that accepts the child view and the parent LayoutGuide, this solved the issue for if you want the child to fill the parent. It however doesn’t solve all issues, example when you don’t want the bottom side to match the parent. Initially I decided to allow booleans to be passed in for each constraint to disable them and still allow them to be manual.

However this still left my code messy and complicated. So I decided to make it more inclusive of the other needs. In the next version I decided to allow up to 3 parameters for each of the side constraints, one named for the side to enable and disable it, a constant to allow a distance from the anchor, and a target for those times when it shouldn’t be pinned to the parent element.

However this wasn’t quite enough I needed two other capabilities. The first, one I needed the ability to enable and disable constraints inside of other classes. I return a class with they NSLayoutConstraint for each constraint allowing other classes to access these. The other major capability is the ability to have width and height anchor constraint, therefore I allow these constants to be passed in as parameters.

This utility class has cleaned up my code quite a bit, I hope others will find it useful. It is available on Github at https://github.com/all12jus/ConstraintUtils.swift.

Sharpening My Tool Part 1

I’ve been working on a full fledged pdf reader application for iOS. During the process of developing for this I have wanted to use Icons from Font Awesome; as buttons in the app.

Apple’s iOS doesn’t like SVG files or the font awesome font files, to work around this I’ve decided to make a tool that will convert Font Awesome SVG files into image files that can then be used directly in the application.

The tool that I wrote is a command line tool that generates three image files that corresponds to the 1x, 2x, and 3x that apps require. However this isn’t quite enough to finish the process, in the normal process you must then create an imageset in xCode then drag in the images. We can automate this process by creating a specific directory structure and json files to tell xCode where the files are.

The source code of this script is available on GitHub. It can be modified for use with any SVG image set, I use it with both Font Awesome Free Version and Font Awesome Pro. The source can be downloaded from https://github.com/all12jus/SVGToXcassets.