Make a consistency in file naming, moving some of the assets to a better place

content/blog/hard-grids-and-baselines-android-design-fidelity/index.md

@@ -52,27 +52,27 @@ However, if you seek fidelity, you’ll find that `lineHeight` on Android differ
 
 Let us take a look at some examples; one with a single line, then two lines, then three lines with line height set to `24pt/sp`.
 
-![A side-by-side comparison of the differences in line-height between the Figma design tool (which reflect the web and Sketch as well) and Android. Shows how a single line string is "24pt" on the web while it's rounded to "19sp" on Android, it shows how a string that splits two lines is "48pt" on Figma while "43sp" on Android and finally how a three-line string is "72pt" on Figma while "67sp" on Android](./images/Line_Height_Difference.png "A comparison between Figma and Android line-heights")
+![A side-by-side comparison of the differences in line-height between the Figma design tool (which reflect the web and Sketch as well) and Android. Shows how a single line string is "24pt" on the web while it's rounded to "19sp" on Android, it shows how a string that splits two lines is "48pt" on Figma while "43sp" on Android and finally how a three-line string is "72pt" on Figma while "67sp" on Android](line_height_difference.png "A comparison between Figma and Android line-heights")
 
 As you can probably tell, Android `TextViews` are always smaller than the ones given to a developer from a design tool and those implemented on the web. In reality, Android’s `lineHeight` is not line-height at all! **It’s just a smart version of line-spacing.**
 
-![A side-by-side comparison of line-spacing on Figma and Android. Figma provides equal spacing above and belong to text string to align them with space around while Android is a space between with no spacing on the top for the first item or spacing on the bottom for the last](./images/Under_The_Hood_01.png "A comparison between Figma and Android line-spacing")
+![A side-by-side comparison of line-spacing on Figma and Android. Figma provides equal spacing above and belong to text string to align them with space around while Android is a space between with no spacing on the top for the first item or spacing on the bottom for the last](under_the_hood_01.png "A comparison between Figma and Android line-spacing")
 
-![A further comparison of the above image's demo of spacing around on Figma and spacing between on Android](./images/Under_The_Hood_02.png "Another comparison between Figma and Android line-spacing")
+![A further comparison of the above image's demo of spacing around on Figma and spacing between on Android](./under_the_hood_02.png "Another comparison between Figma and Android line-spacing")
 
 Now you might ask yourself, “*How can I calculate the height of each `TextView`, then?*”
 
 When you use a `TextView`, it has one parameter turned on by default: **`includeFontPadding`**. `includeFontPadding` increases the height of a `TextView` to give room to ascenders and descenders that might not fit within the regular bounds.
 
-![A comparison between having "includeFontPadding" on and off. When it's off the height is "19sp" and when it's on it is "21.33sp". It shows the formula "includeFontPadding = TextSize * 1.33"](./images/includeFontPadding.png "A comparison of having the 'includeFontPadding' property enabled")
+![A comparison between having "includeFontPadding" on and off. When it's off the height is "19sp" and when it's on it is "21.33sp". It shows the formula "includeFontPadding = TextSize * 1.33"](includefontpadding.png "A comparison of having the 'includeFontPadding' property enabled")
 
 Now that we know how Android’s typography works, let’s look at an example.
 
 Here’s a simple mockup, detailing the spacing between a title and a subtitle. It is built at `1x`, with Figma, meaning line height defines the final height of a text box — not the text size. (This is how most design tools work)
 
-![A spec file of a phone dailing application](./images/Specs.png)
+![A spec file of a phone dailing application](./specs.png)
 
-![A mockup with spec lines enabled of a call log app](./images/Implementation.png )
+![A mockup with spec lines enabled of a call log app](./implementation.png )
 
 *Of course, because it’s Android, the line height has no effect on the height of the `TextView`, and the layout is therefore `8dp` too short of the mockups.*
 
@@ -82,7 +82,7 @@ But even if it did have an effect, the problems wouldn’t stop there; the issue
 
 Designers, like myself, like to see perfect alignment. We like consistent values and visual rhythm.
 
-![A showcase of the differences in line spacing between a mockup and an implementation in Android](./images/Designers_Want_Designers_Get.png)
+![A showcase of the differences in line spacing between a mockup and an implementation in Android](./designers_want_designers_get.png)
 
 Unfortunately, translating values from a design tool wasn’t possible. You had the option to either pixel nudge (pictured above, right), or forget about alignment altogether, thus leading to an incorrect implementation that would, yet again, be shorter than the mockups.
 
@@ -90,13 +90,13 @@ Unfortunately, translating values from a design tool wasn’t possible. You had
 
 _`firstBaselineToTopHeight`_ and _`lastBaselineToBottomHeight`_ are powerful tools for Android design. They do as the name suggests: If _`firstBaselineToTopHeight`_ is set to `56sp`, then that’ll become the distance between the first baseline and the top of a `TextView`.
 
-![A subtitle block showing "56sp" height despite the text visually being much shorter](./images/56sp.png)
+![A subtitle block showing "56sp" height despite the text visually being much shorter](56sp.png)
 
 This means that designers, alongside developers, can force the bounds of a `TextView` to match the design specs and open the door to perfect implementations of their mockups.
 
 This is something I’ve personally tested in an app I designed. [**Memoire**, a note-taking app](http://tiny.cc/getmemoire) for Android, is a 1:1 recreation of its mockups — for every single screen. This was made possible due to these APIs — *and because [**@sasikanth**](https://twitter.com/its\_sasikanth) is not confrontational* — since text is what almost always makes baseline alignment and hard grids impossible to implement in production.
 
-`video: title: "Near-perfect duplication of guidelines against Memoire's mockups and actual app": ./images/Memoire_Bounds_and_Baselines.mp4`
+`video: title: "Near-perfect duplication of guidelines against Memoire's mockups and actual app": ./memoire_bounds_and_baselines.mp4`
 
 *Memoire’s TextViews are all customized using these APIs.*
 
@@ -104,7 +104,7 @@ This is something I’ve personally tested in an app I designed. [**Memoire**, a
 
 In reality, the new attributes were actually made to be used when creating layouts: you want to make sure the baseline is a certain distance from another element, and it also helps to align the first and lastBaseline to a `4dp` grid. This mirrors the way iOS layouts are built.
 
-![A showcase of "firstBaselineToTopHeight" being used to create top-padding from an image and lower text on a card, "lastBaselineToBottomHeight" to create bottom padding against the card edge, and "lineHeight" to set the text spacing](./images/Intended_Use.png "A showcase of the various props to size this card")
+![A showcase of "firstBaselineToTopHeight" being used to create top-padding from an image and lower text on a card, "lastBaselineToBottomHeight" to create bottom padding against the card edge, and "lineHeight" to set the text spacing](intended_use.png "A showcase of the various props to size this card")
 
 **However, there’s one giant flaw: You can’t align a `TextView`’s `firstBaseline` to another `TextView`’s `lastBaseline`.** So a problem immediately arises due to this limitation:
 
@@ -112,13 +112,13 @@ In reality, the new attributes were actually made to be used when creating layou
 
 As you might imagine, **if we want to keep our text aligned to a baseline grid, we need to ensure that the height of each `TextView` is a multiple of 4 while doing so.** This means we must apply first and lastBaseline attributes to both / all of the stacked TextViews — and that becomes hard to maintain.
 
-![A comparison table of Dos and Donts that matches the below table](./images/Dos_Donts.png)
+![A comparison table of Dos and Donts that matches the below table](./dos_donts.png)
 
 |✅ Good|🛑 Bad|
 |--|--|
 |Applying `firstBaseline` and `lastBaseline` in styles allows you to know exactly what the distance between baselines is, without having to set them one by one to ensure they properly align to a `4dp` grid. | Without applying `firstBaseline` and `lastBaseline` in styles, you can’t detect what the default values are, so you are forced to apply these one by one to every `TextView` to ensure they align to a `4dp` grid. |
 
-`video: title: "A comparison of how text spacing is applied on iOS and Android": ./images/iOS_vs_Android.mp4`
+`video: title: "A comparison of how text spacing is applied on iOS and Android": ./ios_vs_android.mp4`
 
 The solution is to apply them in your `styles.xml` so that, when themed, the `TextView` is given the right text size, height, font, and baseline properties.
 
@@ -128,7 +128,7 @@ The solution is to apply them in your `styles.xml` so that, when themed, the `Te
 
 The overrides will take precedence to whatever value you set in your **`styles.xml`**, requiring you to hunt down occurrences until you can find a layout that was broken due to the change. Let’s look at an example:
 
-`video: title: "Allowing margin changes instead will let the text grow to it's expected sie without having issues with the baseline not being centered": ./images/Dont_Override.mp4`
+`video: title: "Allowing margin changes instead will let the text grow to it's expected sie without having issues with the baseline not being centered": ./dont_override.mp4`
 
 Implementing margins instead of overriding values also matches the way layouts work within Android Studio and design tools like Sketch and Figma. It also ensures that your layouts can scale well to different font sizes.
 
@@ -138,7 +138,7 @@ It’s actually pretty simple. Let’s walk through how to adapt one of Material
 
 **Step 1: Place a text box of the text style you’d like to adapt — in this case, Headline 6.**
 
-![A headline 6 within Figma showing "32pt" height](./images/Figma_TextBox_Size.png "Text box within Figma")
+![A headline 6 within Figma showing "32pt" height](./figma_textbox_size.png "Text box within Figma")
 
 *Text box within Figma.*
 
@@ -146,7 +146,7 @@ Here we can see that the text box has a height of `32`. This is inherited from t
 
 > Headline 6 = `20` (text size) `* 1.33` (`includeFontPadding`) = `26.667sp`
 
-![An image showcasing the headline height mentioned above](./images/Android_TextView_Size.png "TextView on Android")
+![An image showcasing the headline height mentioned above](./android_textview_size.png "TextView on Android")
 
 *`TextView` on Android.*
 
@@ -154,27 +154,27 @@ Now resize your Figma text box to `26.6` — *it will round it to `27`, but that
 
 **Step 2: With the resized text box, align its baseline with the nearest `4dp` breakpoint in your grid.**
 
-![Baseline now sits on the "4dp" grid.](./images/Step_01.png)
+![Baseline now sits on the "4dp" grid.](./step_01.png)
 
 *Baseline now sits on the `4dp` grid.*
 
 **Step 3: Measure the distance between the baseline and the top and bottom of the text box.**
 
-![Showcasing the above effect by having 'firstBaselineToTopHeight' set to 20.66 and 'lastBaselineToBottomHeight' to 6.0](./images/Step_02.png)
+![Showcasing the above effect by having 'firstBaselineToTopHeight' set to 20.66 and 'lastBaselineToBottomHeight' to 6.0](step_02.png)
 
 *`firstBaselineToTopHeight`: `20.66` | `lastBaselineToBottomHeight`: `6.0`*
 
 **Step 4: Now right click the text box and select Frame Selection.**
 
-![The right-click dialog hovering over Frame Selection, key binding Ctrl+Alt+G ](./images/Step_03.png "The right-click dialog hovering over Frame Selection")
+![The right-click dialog hovering over Frame Selection, key binding Ctrl+Alt+G](./step_03.png "The right-click dialog hovering over Frame Selection")
 
 *When created from an object, a frame’s dimensions are dependent on the content inside it.*
 
 **Step 5: While holding Ctrl / Command, drag the frame handles and resize it so that the top and bottom align with the nearest baselines beyond the minimum values.**
 
-![The moving of the baseline by holding the key commands](./images/Step_04.png)
+![The moving of the baseline by holding the key commands](./step_04.png)
 
-![Another view of the same adjustment](./images/Step_05.png)
+![Another view of the same adjustment](./step_05.png)
 
 **NOTE: Keep in mind we must not resize the text box with it. Holding Ctrl / Command is very, very important.**
 
@@ -184,23 +184,23 @@ The same thing was done to the last baseline and the bottom; we changed it from
 
 **Step 6: Select the text box inside the frame, and set the text to Grow Vertically.**
 
-![A view of the image aligning tool with the tooltip enabled for "Grow Vertically"](./images/Step_06.png "You can recreate the margin vertical grow functionality by selecting this")
+![A view of the image aligning tool with the tooltip enabled for "Grow Vertically"](./step_06.png "You can recreate the margin vertical grow functionality by selecting this")
 
 This will cause the text box to return to its original height of `32sp` — inherited from the line height.
 
-![A showcase of the text box being "1sp" down from the frame](./images/Step_07.png)
+![A showcase of the text box being "1sp" down from the frame](./step_07.png)
 
 *The text box is 1sp down from the frame, but that’s normal. We no longer care about the text box height.*
 
 **Step 7: With the text box selected, set its constraints to *Left & Right* and *Top & Bottom*.**
 
-![A view of the constraints dialog in Figma on the headline](./images/Step_08.png)
+![A view of the constraints dialog in Figma on the headline](./step_08.png)
 
 *Now your text box will resize with your frame. This is essential when using the text components.*
 
 You would need to find these values for every text style in your app, but if you’re taking the Material Design Type Spec as a base for your own, I have already measured and picked the right values for each! _**Resources at the end.**_
 
-![A showcase of what the headings and text should look like at the end](./images/headline-text-size-showcase.png)
+![A showcase of what the headings and text should look like at the end](./headline_text_size_showcase.png)
 
 ## How to implement these values (as a developer)
 
@@ -227,7 +227,7 @@ We first set up a `TextAppearance` — which your app probably already has —
 
 Let’s use Memoire once again as an example.
 
-![An example of the Memoire codebase showing the headline of 4](./images/memoire-headline-4-code.png)
+![An example of the Memoire codebase showing the headline of 4](./memoire_headline_4_code.png)
 
 ### Each has a different function:
 
@@ -238,7 +238,7 @@ For example, _**`textAppearanceCaption`**_, _**`textAppearanceBody1`**_, etc.
 
 **`TextStyle`:** Applied to `TextView`s in layouts, to ensure `4dp` alignment.
 
-![A display of code styling when "TextStyle" is properly applied. See 'styles.xml' at the bottom of the post for an example](./images/text-style-applied-properly.png "A display of code styling when TextStyle is properly applied")
+![A display of code styling when "TextStyle" is properly applied. See 'styles.xml' at the bottom of the post for an example](text_style_applied_properly.png "A display of code styling when TextStyle is properly applied")
 
 *What happens to a `TextView` when a `TextStyle` is properly applied.*
 
@@ -252,7 +252,7 @@ When setting a style to a `TextView`, keep in mind that `firstBaseline` and `las
 
 Applying a `TextStyle` to a component — instead of a `TextAppearance` — causes serious issues.
 
-![A showcase of a "button" component not having the text align to the height of the component](./images/TextStyle_Buttons.png)
+![A showcase of a "button" component not having the text align to the height of the component](./textstyle_buttons.png)
 
 *Uh-oh…*
 
@@ -264,7 +264,7 @@ As far as other issues, I haven’t been able to find any.
 
 Now that you’ve scrolled all the way down without reading a single word, here’s all the stuff you’ll need:
 
-![A preview of the Figma document with code and layout samples](./images/Preview.png)
+![A preview of the Figma document with code and layout samples](./preview.png)
 
 *Figma document with code and layout samples.*
 

content/blog/integrating-android-code-in-unity/index.md

@@ -30,11 +30,11 @@ Unfortunately, I've had difficulties getting the same Android Studio development
 
 - The other folder is one that lives under `Assets` called `AndroidCode`, which contains copied-and-pasted files from `AndroidStudioDev` that are only the related source files I need to call.
 
-![Showcase of the filesystem as described by the previous paragraph](./android-code-fs-layout.png)
+![Showcase of the filesystem as described by the previous paragraph](./android_code_fs_layout.png)
 
 Once the copying of the files from the Android Studio environment to `Assets` has finished, you'll need to mark it as being included in the Android build within Unity's inspector window that comes up when you highlight the source file.
 
-![The inspector window showing "Android" selected](unity-inspector.png)
+![The inspector window showing "Android" selected](./unity_inspector.png)
 
 > If you forget to do this, your class or file may not be found. This is an important step to keep in mind during debugging.
 
@@ -56,11 +56,11 @@ Luckily for us, managing Android code dependencies in Unity has a thought-out so
 
 In your project, you'll then want to select `Assets > Import Package > Custom Package` in order to import the downloaded plugin.
 
-![A visual of where to find that menu in the MacOS menubar](./import-custom-package.png)
+![A visual of where to find that menu in the MacOS menubar](./import_custom_package.png)
 
 Then, you'll see a dialog screen that'll ask what files you want to import with your Unity Package. Ensure that all of the files are selected, then press "Import".
 
-![A screenshot of the dialog mentioned](./importing-the-plugin.png)
+![A screenshot of the dialog mentioned](./importing_the_plugin.png)
 
 > Your screen may look slightly different from the one above. That's okay — so long as all of the files are selected, pressing "Import" is perfectly fine.
 
@@ -93,7 +93,7 @@ The only rule with this file structure is that your file must end with `Dependen
 
 After creating the files, in the menubar, go to `Assets > Play Services Resolver > Android Resolver > Resolve`, and it should go fetch the AAR files related to those specific libraries and download them.
 
-![The MacOS menubar showing the above path to resolve libraries](./resolve-dependencies.png)
+![The MacOS menubar showing the above path to resolve libraries](./resolve_dependencies.png)
 
 So long as your file ends with `Dependencies.xml`, it should be picked up by the plugin to resolve the AAR files.