ShlinkedIn: The Open Source S***Posting Adventure Continues
It’s Elixir/Phoenix, Tailwind, and Postgres…I am still trying to make a first pull request
ShlinkedIn is a satirical, open source social media site that is essentially LinkedIn for s***posting. You can write fake news headlines without writing actual stories, you can make up your own name, and as of this month you can pay SP (ShlinkedIn in-game currency) to hire interns and then murder other users’ interns.
I have been trying to submit a pull request, and I have not finished, but I reached a point in which I thought it best to just document what I have done before (hopefully) continuing.
This is a deviation from my usual blog format. Talking through a personal project is a little less click-baity than overview posts like Do We Need gRPC? and We Need HTML, but because I put Tailwind in the title this post is no less susceptible to getting roasted by Jason Knight.
The Feature: An Undo Button
When you comment on ShlinkedIn, you look at the interface above…you can write, you can add claps, you can change your font to be ironic. Are these features useful? No, they are pointless, but that is the joke.
This YouTube video is like the 15-minute foundation the website was based on…I bring it up here because I re-watched half of it tonight. Yes, I know what you’re thinking, it must have taken me quite a bit of effort to spend seven and a half minutes watching a YouTube video.
The question I was trying to answer for myself was whether you are supposed to edit .leex files. The answer is yes — it’s fine. I have wasted time in the past editing auto-generated files, which is embarrassing (it’s also something I did before contributing to another open source project called Gem5), but I like to think it is something most of us have done at one point or another.
I am not very familiar with Tailwind, but here:
I briefly looked at the Educative.io page on Tailwind; every style gets its own class. Looking at the HTML above, you can see that the styling for these buttons does not even fit on the page. I made a new one called “Undo,” copied the exact same styling, and the act of writing this made me realize that I neglected to include a value. This has prevented me from getting anything for “value” in the JavaScript portion, meaning I am unblocked and can continue this project. Nice.
But for the sake of the blog, I will move on.
This corresponding JavaScript code above is a lot more interesting. You can find the source and browse it here. This is described in the Phoenix documentation as a client hook, and though I do not know nearly enough about Phoenix to say this with authority, I definitely think this is similar to Vue Lifecycle Hooks.
Naturally, I defined a hook for Undo. I used an addEventListener call as well; e is a mouseevent, e.target is a buttonelement, and and e.target.id obtains the value from one of your buttons. Because I never bothered to define a value for the new Undo, I kept getting a bunch of undefined issues.
Among the stupid things I did tonight that I probably shouldn’t have, I found that console.logs were not appearing so I used alerts instead. I probably should stop doing that, but it works.
Here is where things get really interesting: An Undo button might be surprisingly complicated. Here they mention commonly using either the Memento or the Command design pattern…I was once asked how I would implement the undo function in an interview. I did not mention either design pattern, but it probably would have scored me way more points than what I actually said: To use a stack.
When I filed the issue, I expected to see some kind of web code the ShlinkedIn developer had added to deal with the ctl + z action. Now that I think about it, this was probably unnecessary: When you typed a comment and hit ctl + z, the feature already worked…ShlinkedIn did not have to re-invent it. But ctl + z does not know how to deal with these customized buttons.
So what to do? An undo button is probably the right idea. I could have a much easier time writing something to just remove the clap icon and reverse the bizarro one, a kind of “clear button,” and that would maybe be a step in the right direction. But that is not what I originally said I would do.
While I debate whether to pivot to a clear button or work on an undo button, the latter of which would make for a more interesting story, I wanted to say this:
The “excessive spacing” button does not seem to do anything.
Maybe I just bought myself a little more time.
Last Note: Messing With Postgres
If you follow ShlinkedIn development, it’s pretty obvious which person runs the show. Charlie has written some pretty good documentation, but I was stuck on something.
For your development environment you run this locally, on port 4000. Charlie included instructions for how to navigate to “admin,” which didn’t seem to work for me, so basically I was just stuck at the ShlinkedIn home screen for a while and could not test post anything because it would simply prompt me to sign in.
The workaround? Well what I think there really SHOULD be is some kind of out-of-the-box login you can use, as a developer simply testing with localhost, so that you can get in there right away. But in a pinch, I found out you can simply launch things and then quickly “join” under a fake username and fake password. I do not find it THAT annoying to have to do this whenever you start another development session, but I really doubt this is how ShlinkedIn intended for people to develop it. More Postgres knowledge will be neat, regardless.
Closing Thoughts
If I decide to just make a clear button instead, and it’s not too much effort, I might look more into the database functionality.
By the way, I do still have Educative.io until November. The Tailwind and Elixir classes are absolutely enormous. I don’t know how one finds the time to spend 130 hours learning Tailwind, and even after those 130 hours you would STILL get roasted by random people on Medium for using Tailwind.
