Lapwing diagram

[kasparless]

Hi everyone. Di has opened the Lapwing issue for Typey Type here:
didoesdigital/typey-type#211

I thought I'd try and do the Lapwing diagram. Please feel free to respond here if you're already working on it, or have any feedback about it. Thank you.

[kasparless]

Hi @didoesdigital,

Sorry for the slow progress on this issue. Life is juggling, right?

I've followed but the instructions, but run into some difficulties.
Please have a look at the options below and provide some feedback if you can.

Thank you.

---

Problem

I'm having difficulty running the Figma/Ruby/Node stack on my Windows computer. This is totally a self-inflicted problem.

Possible solutions

1. Simply copy and edit the React component in a text editor. We're not introducing any new geometry or letters, so this can be done manually. (not preferred, but quickest and easiest)
2. Do my homework, and sort out my Ruby problems, probably with a linux VM.
3. Re-write the SVG pipeline using an Inkscape/Python/Jinja stack (preferred).

I'm keen to have a crack at option 3, if only for my own learning. I'm a bit concerned that it may make the code less accessible to yourself or future maintainers. On the otherhand, Inkscape is local-first, and if I can easily containerise Python+Jinja, it may make it easier for future maintainers.

Please let me know your thoughts.

[didoesdigital]

I'm not excited about option 3. I'd like the process to be reproducible for when the target markup needs to change so option 1 isn't great either.

If you wanted to make the diagram SVG according to the instructions in the README (or whatever the equivalent steps in Inkscape are) and attach it here, I could try and do the pipeline script part for you, and then you could finish the part in the Typey Type repo? Otherwise, I think option 2 would be ideal. Maybe WSL could help there?

[kasparless]

No problem at all, I'll proceed with Option 2, thank you for the feedback. It's a good learning opportunity!

[kasparless]

Quick status update.

TL;DR

• Finally got ruby and node working on WSL.
• Seems to build ok.
• Next steps are look into Inkscape equivalents for Figma.

Ramble

Have finally made the time to tinker with WSL and get this working. At some point I'll write up destructions for the next person, but it seems that WSL is fairly cut-down, and you have to manually install many of the gcc / build dependencies, and try not to get caught in the apt vs snap divide. (or I could just be a noob).
Ruby script builds fine, for some reason git is showing the file as modified, but there's no obvious line-item differences. I suspect newline differences with WSL, but will investigate another day. This is enough win for the moment.

Screenshots

[didoesdigital]

Great work! Well done on getting ruby and node working on WSL. I imagine figuring that all out will be useful knowledge for you for other projects too.

If git is showing the file as modified but VSCode's diff view doesn't show you changed text in the .js file, then it could be something like newlines or file permissions. I suggest you open VSCode's terminal and run git diff optimized-svgs/brazilian-portuguese.svg. If file permissions have changed, you might see something like this:

old mode 100644
new mode 100755

If it's line endings, you might see something like this where the line endings are shown (in this example, ^M):

[kasparless]

Thanks for the tips! It was indeed newlines, and it just needed careful management of working in WSL.
All sorted now, test build passes.

TL;DR
Unfortunately, the methods above didn't actually give me any diagnosis on the problem, which they should have. Maybe their feedback is reduced on windows.
Notepad++ to the rescue!

Even more detail
Seems that git stores newline as LF internally, and tries to be clever about transparently replacing CRLF with LF internally on checkout and commit. Win git and WSL git have separate environments with different settings for this. Solution is that your branch checkouts have to be done in the WSL shell, not the windows shell, if you're going to create content under WSL.

[kasparless]

Screenshot below, to compare of Inkscape's 'Object to Path' tool (black) vs reference tool (Figma's text to outline) (white).
I think Inkscape is an acceptable substitute, please provide feedback if otherwise.

Advantages of Inkscape:
The 'native' files current live in the contributor's Figma account, I assume there's no way to export or keep these natives.
If I set up a bunch of Inkscape equivalents of the current 'source-svgs', then new contributors will have mix-n-match stock to start with.

Disadvantages of Inkscape:
Personally, I always feel a bit lost in Inkscape, it feels like it has a steep learning curve that I have to re-learn each time as a casual user. I'm only suggesting it here because it's open-source, and local-first, so you can keep your natives in the repo. I suspect Figma will be the preferred tool for most contributors.

Folders
For folder organisation, we could have a 'native-svg' folder for the un-exploded (text) svgs, or we could keep them next to the 'exploded' svgs.

[didoesdigital]

Based on your suggestion of mix-n-match stock, I've added a design-files/stenoboards-with-text-not-path-outlines folder with 3 examples of previous stenoboards in "off" and "on" states. I've updated the README to include this. Please let me know if the updates make sense and if the files are helpful.

Inkscape is probably fine. Once we're happy with the output for the Lapwing diagram, you can add instructions for Inkscape below the instructions for Figma in the README so that contributors can use either.

Coincidentally, I updated the version of nokogiri to address #18 so you'll need to pull the latest version of the master branch, merge or rebase your branch, and re-run bundle install.

[kasparless]

Thanks for the feedback, Di, I really appreciate it.
I'll continue to work through and address your comments.

[kasparless]

Fork, branch and PR protocol

@didoesdigital, how do you want to handle PRs? I've forked the repo, and plan to push to a feature branch on the fork.

Here are the options that spring to mind:

1. I raise a direct PR from fork//feature to origin//master
2. You create an origin//foo branch, and I raise a PR from fork//feature to origin//foo
3. I continue to push to fork//feature, and you can review from fork

Sorry, I'm quite new to open-source contributions, and not sure of the etiquette here.

Thank you.

[didoesdigital]

Welcome to open-source contributions! Feel free to ask me lots of questions here.

Raising a PR from your fork to the base repo is usually a good way to go. Often when you push a feature branch to your own fork of someone else's repo on GitHub, you'll see a prompt like this on your fork with a button to "Compare & pull request":

Clicking on that button's usually the easiest way to open a PR on the base repo and get your contributions reviewed and then merged. It'll usually set up the PR just as it's needed. Another way to reach that same result is to select your branch on your fork…:

… and click "Contribute" and "Open pull request":

[kasparless]

Thanks Di, that's great!

[kasparless]

Starting on Lapwing diagram

(Finally started ...Yak shaving is the 80%, right?)

Here's a quick overlay of the reference diagram from the Lapwing instructions. It's tempting to simply recreate reference diagram, but I think I'll adopt the whitespace and proportioning of the other Typey Type diagrams: the use case is different. The Lapwing diagram is from a reference text that someone will be reading intentionally, the Typey diagrams are for practical exercises, and at a different scale in the screen.

Draft diagram

[kasparless]

Inkscape vector design file seems to import back into Figma with layers and naming ok, but there's a wierd offset on the text in the design file and an additional grouping, for some reason.
The offset disappears after converting to path (source-svg).

Design file

source-svg

[kasparless]

@didoesdigital, is there any chance you could review the 2 sample React components in this link and provide some feedback?

https://github.com/kasparless/typey-type-stenoboard-diagram-svg-to-react/tree/feature/add-lapwing-diagram/target-js

• LapwingDiagram-test1-withstyles.js
• LapwingDiagram-test2-stylesremoved.js

I have raised PR 19 with these files, if that helps:

#19

Background

Inkscape vector design through to React.js component build has run successfully. There is, inevitably, an issue though.

The base workflow runs great:

1. Edit native design diagram in Inkscape
2. Create duplicate file and do 'object to path' to explode the text.
3. Export to standard svg (probably unnecessary given the svg-optimizer post-processing from ruby/node).

Here's the snag: Inkscape seems to like applying colour as a 'style' over-riding the outline and fill attributes. Annoying.
This style attribute carries all the way through into the React component.

Here are the solutions that I can see:

1. Ignore it, the styles work ok anyway (test1)
2. Remove the style tags manually in the Inkscape XML editor (test2)
3. Round-trip the file through Figma (in that case, might as well...)
4. Give up and just use Figma
5. Try and fix this in the code (not preferred, should be able to just provide a working SVG out of the design package)

Inkscape XML

Final React

Reference React

[didoesdigital]

Great work on this @kasparless !

Nothing springs to mind for what might cause the offset of letters in Inkspace but if the SVG output is ok then it's all good. It might take me a bit to get back to you on review but I'm happy to look at what you've shared when I get a chance.

[kasparless]

Thanks Di! No rush, I'm totally doing this to avoid the Steno practise I should be doing.....

[kasparless]

This is item is no longer an issue, thanks to Di for the style removal line for the ruby script. This should 'just work' now. Refer #19 (comment) for more info.

[kasparless]

Added a post to the Plover discord / Lapwing theory channel by way of community consultation. Let's see if there's any feedback.

https://discord.com/channels/136953735426473984/1034561356361367683/1342729309269397534

[kasparless]

No feedback requiring change to diagram. The only comment was "lgtm, ship it" :)

[kasparless]

@didoesdigital please review #20 at your convenience. If it works, and you are happy with it, I will update the documentation to include the Inkscape option.