Some digging into embedding comparable images

I recently had an idea to compare two images side by side and ideally having a slider present to be able to see one more than the other. I wanted to get to a MVP of this but after spending a couple of hours, I decided to just jot down my notes about it so far and move on. Another reason is that I’m trying to make this blog into a thought stream instead of just polished posts of some kind.

Examples of embedded objects

This Spotify embedded object is a great example of both functionality and style, it looks and feels like using the Spotify app and it’s easily embeddable.

Some places like WordPress only allow embedding from certain URLs and others like Notion allow embedding anything that doesn’t block embedding, see a screenshot below:

↑ Embeds in notion ↑

I tried a couple of different techniques to try to get two images to be comparable, you can see them in this codepen: https://codepen.io/usmanity/pen/dyYaVpY

Unfortunately, I couldn’t get a working version of it because my approach has been mostly CSS-first and I didn’t want to spend too much time writing JS to handle different parts of the dragging. One attempt I had was to watch drag and other events related to it, more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable
This approach didn’t work because draggable is great for moving around elements but there was still no good way to get the difference in dragging unless I spent a fair amount of time calculating differences between the starting point and where the dragged slider was.

I also tried a border size and range input approach, basically use the value from the range slider and set that as the border size, but this didn’t work because the border would increase while decreasing the size of the image itself.

My next attempt will be to use a background size approach but right now I feel pretty burnt out by the past few approaches so I’ll wait on trying that.

Dull lull in July

I’ve been going through a slow time in July and I haven’t been very active on my computer besides using it for work at work. At home, I’ve just been keeping away from the computer almost full-time. There is some good news because of this, I’ve started to spend more time reading, doodling, eating, and doing anything else away from a computer.

After getting away from my computer in June and ending my work on Bookends, I felt a weird sort of burn out, not exhausted by more like a relief and now I’m looking for a new project and trying small things here and there but nothing sticky yet.

Learning Ruby has been slower and less fun than I thought it would be. When I was messing around with Python on my own time, it was fun to create small projects and build things on top of them but…that’s not the case with Ruby. Javascript was always easier to learn and play around with since it’s one language to write for server side and client side code.

I’m writing this post after attempting to write a couple of other drafts which I just couldn’t get myself to finish and it has become a common case for me that I’ll start something and won’t want to finish it. I believe I’m either attempting harder than achievable projects or not being consistent enough to continue working on them. I learned something from Eric Barker’s Barking up the Wrong Tree recently, if you want to achieve something above your current skill level, make it slightly harder not impossible to achieve which will give your brain enough reassurance that it will continue as small, consistent wins are better than large one-off lottery-like wins.

I recently created the following graphic using CSS:

You can see it here: Stop War @ usmanity.com

Goodbye Bookends, for now

Today, I’m stopping work on Bookends. In this post, I’d like to reflect on why I’m stopping work on it, what I’ve learned, and what’s next.

Bookend’s purpose is to help track and discover books. So far, I don’t think I’ve solved this.

What I’ve learned

When I started the project, I had a simple understanding of how to build a web application using Node.js, working on Bookends has helped me learn or solidify my understanding about routing, authentication, hashing, async calls, promises, and building an API. These are just Node related things, there are other things like how to deploy a staging and production server and how to keep a simple deployment flow have been one of the most delightful thing about Bookends.

Developing a project on your own is boring, hard, and slow. That’s one of the biggest lessons I’ve learned. It’s hard to keep going when there’s no users who want to use your product. It’s boring because every time you work on something, there’s no user feedback. And it’s slow because you have nobody to think with.

The tech stack I chose was familiar to me but it’s not very productive to build an application for the first time with a bunch of tools glued together. I chose node.js with express, vue.js, and sequelize as my main stack. Each of these tools, I’ve learned to use and build with better throughout my year with Bookends but it was still slower because there is no convention guiding best practices with any of them apart from the documentation.

Building an app that relies on third party data is tough, all the book info on Bookends was sourced from public APIs like OpenLibrary and that resulted in lower quality results in the end.

Bookends is currently not solving a problem for anyone and I’ve seen myself become detached from it.

Why I’m moving on

The past few weeks have been pretty hard by myself, inside my mind there have been conflicting thoughts that if I stop this, I’m giving up and at the same time, if I stop this I’m buying myself time to do something else. Up until last night, I was working on small features but even after stopping for the night, I felt like I wasn’t happy with the progress for the day. Fighting against my tools every time I work on it has been draining me to the point where I’m unable to go on my personal computer and concentrate on anything else. As you can see with hardly any posts in the past month.

What’s next

I’ve been using ruby and rails at work. I’m in a reverse tech cycle here, most people are moving to node.js and a modern front-end framework like vue.js or react while I’m moving to a more conventional web app framework like ruby on rails. I want to spend more time learning ruby, building things with ruby, and learning better habits for myself as a web developer. There are so many things I still would like to become proficient at like testing, iterating on product ideas, solving real world problems, learning deployment best practices, moving away from weekend projects for a change.

I might come back to working on Bookends when I have more experience building web apps.


Below are some screenshots of the most recent deploy on https://bookends.app. Depending on when you’re reading this, the site might still be up or not.

Serving Vue.js apps on Github Pages

I wanted to share a pretty simple setup on how to serve a Vue.js app using Github Pages. I’m writing this because I had to search around online for awhile before I stumbled upon the Vue.js docs and then had to play with some settings in Github.

For this exercise, I’ll use a sample project you can find here: https://github.com/usmanity/serve-vue-app

So let’s start from the beginning. Let’s use Vue CLI to create an app.

  • Install Vue CLI: https://cli.vuejs.org/
  • Create an app using the above (instructions on the above page): vue create sample-vue-app
  • When you’re prompted with the options for the app, you can choose whatever you want, I went with the default (eslint, babel) setup.
  • After the app is created, cd into the directory and then run npm run serve. If you see the following page, you’re good to go:
  • At this point, let’s configure the vue.config.js file. For reference, I’m using this documentation to set this up: https://cli.vuejs.org/config
  • Your config should look like the following
module.exports = {
  publicPath: "/serve-vue-app",
  outputDir: "docs"
};
  • Save the file and run npm run serve. You should see the localhost URL change to include the publicPath as part of it. This is one way to confirm it’s working.
  • Next, we’ll set up github to serve this. Commit the files and push up to github.
  • After you’ve pushed up the files, go to the repo’s settings
  • Look for the “Github Pages” section and you’ll see something like the following
  • You’ll see the option to serve from the master branch but not from the “master branch /docs folder”. This is because we haven’t built anything for the app.
  • To fix this, just run npm run build in the app folder on your computer.
  • After the build runs, you’ll see a new folder created (it should be called docs).
  • Add this to git, commit and push up. Then you’ll see the docs option available:

After you select this, give github 2-3 minutes to finish building the page and then it will have the URL in the header or just go to whatever URL you configured and keep refreshing 😛.

That’s it, you’re done! Please leave comments if you run into any issues or caught an error with my steps. Thanks!

Setting up Fathom for all my sites

So yesterday, I was learning about how nginx works and how to serve multiple sites (web apps even) from the same machine at different URLs. I wanted to do this because I don’t know much about nginx so I thought of it as an experiment to try.

So after I got it working, I remembered that back in February, I had tried using Fathom for basic analytics as it’s not as deeply detailed as Google Analytics. So I went ahead and did the 1-click install then I realized that the install won’t work as it’s not available for multiple sites. How did I come to this conclusion? I had missed a step during the initial setup that asks you if you’d like your analytics to be public or password protected, and because I didn’t care about the analytics being public, I selected that. This shortcut me to the end of the setup and I was able to check out the analytics. Then I realized, I could only have one site, and that wasn’t what I wanted.

Well later, 2-3 hours of messing around, learning a bit about nginx and other things, I come to a point where I had multiple instances of Fathom running on a single DigitalOcean box and I came across some issue which I thought was worth googling, this then led me to a Github issue which revealed to me that I was logged out the whole time on my original 1-click install.

So, I turned around and did the 1-click install again. And this all to say that I’m moving away from Google Analytics and trying to use Fathom analytics now. 😊

Trying out a new workflow for personal projects

I don’t have any serious personal projects right now because I usually start something small like the following few:

And after starting them, I realize that I got them done in a short spurt of energy but they are not projects I have much consistency with that I will actually keep up with them in the long run. The URL shortener was also a hack that I wanted to try to build in a short amount of time.

But the point of this post is to say that I haven’t really had a space to work on personal projects as I’ve had only a work laptop for the last 3+ years now. Since I left Outbound, I’ve had only a work laptop and it’s fine for small projects but once the project starts to have a database, a lot of assets hanging out in my recent files, and those sort of things, I don’t want it to be on my work computer.

Well, I had mentioned this a couple of times to people and one of those people is my wife. She surprised me with a Mac Mini for Christmas and I just got the computer in the mail today.

It’s the 3.2 Ghz hexa-core version which so far has been blazing fast! I’m excited to get it set up for some larger projects.

Especially Bookends which has been neglected due to the amount of work it takes me to get started with it. So in the coming weeks, I’ll aim to get a beta page up for Bookends and I’ll document the issues I’ve been running into as I’ve worked on it.

Bookends, for fun and for learning

During the months of May and June, I worked on a hobby project with a friend of mine called “Decide”. You can go check it out here. During development, I learned a couple of new things, technical and personal things about myself. Technically, I learned some React based on Next.js. If you’re about to start learning React, don’t pile on another piece of tech on top of it, it’ll just make things more complicated and development even slower. My friend took care of most of the deployment work and the heavy lifting related to getting the app working, he even did a lot of the styling so I was left with figuring out some minor bugs, adding some features, and eventually doing some product development. This felt odd to me, I wanted to learn more and do more during this process. Well, we figured that the project was going to be “done” soon so we should just launch it and let it simmer on the web. After about a month of being live, we have some users on it but we’re not actively working on it. I wanted to start working on something new.

This post is about that new project. I am starting working on another hobby project now and I’m hoping as time goes on, it can be more than a hobby project especially depending on how much traction it will get over time. I don’t want this to be a rushed project, I don’t want it to be a dance of git between two people, and I really don’t want it to be vaporware. So how do I prevent this from happening? Well, I’m hoping this won’t be a short-lived idea since it’s not something I want to just throw on the web and walk away. I have decided to take the development slowly. A couple of days after work during the week, maybe a few focused hours on the weekend. It won’t be a dance of git since I’m going to be the only developer on it for as long as possible. And it not being vaporware? Well…that’s going to depend a lot on how much effort I put into the project and actually make it useful for the community. 

So what is this project? Bookends is an a place to track your books and discover new ones. You might be thinking, “Goodreads already exists, why another one like it?” I love Goodreads, I use it often but it’s not what I want a book tracking, readers’ social network to be, I think it can be more than what it is right now. There are so many people out there who love books and I believe Bookends can be a place for them to belong and be part of a community. 

Anti-social network ideas & privacy

Most social networks thrive on the network effect and then turn around and use the same mechanism to betray or at least kindly coerce their users into paying them somehow, whether it’s clicking on ads or providing valuable gross data profiles that can be then sold to corporations, governmental agencies, and even potential employers read more about this. Sure, this might be a necessity for companies that are pushed by their investors and stakeholders to churn out huge profits but I believe people’s emotions and wellbeing should not be taken advantage of for the sake of making money. I don’t want to build a social network that takes user’s activity and turns it into revenue. I also don’t want to build a social network that acts like a layer of information for corporations to make more money. 

My goal with Bookends is to provide a safe and friendly community for book lovers to connect and share ideas. It’s not to collect every action you perform on the website and then turn it into a unit of revenue. 

For the privacy portion, it’s amazing what contemporary tech companies can collect about their users but they don’t always have to do that. I don’t want or need to collect user information that’s only used to build generic profiles to be sold to ad buyers. A user’s privacy means they will only share things with their circle of friends. 

People should connect over books and genres they love and that’s my hope with Bookends. 

What is a user?

User on Dictionary.com
A user is an odd term, in my opinion, it’s technically fine to call anyone using something a user but I believe it’s a bit too abstract or if you’d like to ignore the first definition and go with the second one, it becomes a bit more weird. But I think a user on Bookends is really a “reader”. You read books, you’re a reader. So you’ll see me refer to users on Bookends as readers.

Development status and what’s in it for me

The past few weeks, I’ve spent after-work hours working on the backend setup for Bookends. I’m grateful to have a team at work as each person is great at their own role making development easy but since I don’t have a team working on this with me, it’s a bunch of googling, reading, experimenting, and spinning in circles. I do feel like I’m learning more and more about each part of the product. From putting together the landing page and pointing it to the Bookends domain (www.bookends.app) which needed to be https to getting the vue.js app working properly, I’ve been making slow progress but I’m feeling like things are speeding up.

Why would I want to build a social network for book lovers? I love books, that is a big reason. Building a place for communities to thrive is important and meaningful to me. I want to grow as a developer and having something meaningful to work on will help me do that.

Currently, Bookends is live as a landing page but the past few evenings, I’ve spent putting together the initial user interface that will feature a search for looking up books. The alpha will launch as just a search for books. The beta will feature reader profiles and the ability to track books. As things move forward, I’ll look for a way to allow making upcoming features a publicly visible thing but for now, I don’t have a good way of doing that.

Who’s paying for it?

Most startups don’t worry about making money because they’re in a hurry to collect the most users possible and then somehow figure out how to make money, that has worked out for most of them, but some just can’t figure it out (see Tumblr, Luxe, Rdio, etc.). Accumulating the most active users in a month or being the largest network of any kind is useless if the users on the network are either addicted or not adding value. That’s not my aim with Bookends, if each reader using Bookends can comfortably use the product and get something out of it, that’s worth it to me. At this point you might be thinking: “but who’s paying for it!?” Initially, the first few months, I have no plans of growing exponentially as it’s a hobby project so I won’t worry about making money in any way. This is not to say I’m going out to raise money or do anything like that. I’m still working my day job so I can pay for rent and food 😂. What I am thinking is that in the long run, it would ideally be a community funded project, something that the community can help fund and grow but I’m not concerned about that right now, first let me find that community! 

Please follow along this journey and I would love feedback anything I’ve said in here and on the project itself. You can go checkout the project here:
https://bookends.app.

Mid-May update

In the past 2-3 months, I’ve been writing way more code and relatively more blog posts than I had before starting this blog. This has been mainly due to my goal of being consistent about things that interest me.

I’m writing this post because I haven’t posted in about 10 days and I was getting anxious to write something. This post is kind of like an intermittent update because I have been busy lately but I think most of those things are not very interesting to post about.

Cycling: I’ve started riding my bike again, after about 11 months of inactivity! My bike was hanging on its hook for so long that it had collected dust on all the components! I had forgotten where my pump was and took me awhile to find it. Below are my stats from Strava for cycling:

Strava stats as of May 16th, 2018

I don’t want to be unrealistic but I do want to ride a couple of hundred miles if I stay consistent.

Books: after finishing The Three-Body Problem, I wanted to read/listen to something non-fiction and I started listening to A Fine Mess by T.R. Reid. It’s a book on taxes and I did enjoy it. I have a draft post about it but I’ll talk more about it in that. I’m also reading a fiction book called Mattimeo by Brian Jacques, it’s a children’s fantasy novel about anthropomorphic mice, second in the Redwall series. After my experience with Watership Down by Richard Adams, I’ve been feeling many different things, like the whole story is so magical and profound yet so dark and simple that it kind of hurts to think about how real it made me feel. 

Code: I’ve been trying to stay consistent about learning Node.js and using it to build something. Also, I’m practicing things like python and javascript when I have some down time, this has been mostly for fun. I’m itching to build something big but I don’t want to misperceive my little bits of new information as newfound confidence.

The Joy of Tidying (and finances): I didn’t really know what to call this part but one thing that’s been part of my everyday thinking has been the notion of “less is more” and also using a recently learned problem solving principle called Occam’s razor to clearly focus on things. I remember when I read The Life-Changing Magic of Tidying Up by Marie Kondo last year, it really opened up a new way of looking at my possessions. It started with just the things I had and how many of them I wasn’t using or wanting yet they all were in my house, taking my room and requiring my time. 
Once I simplified my clothing, books, and other possessions, I started to think of abstract noises and complexities like finances, digital presences, online shopping, and even apps on my phone. This has been a topic of research for me as most people in my generation are dealing with this in various ways, I want to find an approach that’s not Draconian and still lets me enjoy my time with these things and without them. More on this later! 

Starting work on a custom theme

I really like the way Medium posts look. I think the Medium team has done a great job spending time on making sure a post looks its best no matter what the content it contains.

When I was setting up this blog, I looked around for any theme that was just barebones, the current theme I'm using is called Integer by ThemePatio. It was one of the few that I found that doesn't only look Perfect™ when looking at the preview. Most themes will look very good when you're looking at a preview of them and they're not designed for regular blogging, they're designed for cookie-cutter blog posts. I think this is unfair to the people looking at the themes since it means people will be oversold on a theme and when they install it, it'll look like it's missing something.

I am starting to work on a custom theme that I'm going to be making available. It's called Free Press, you can see it on github here: usmanity/free-press. 🗞

The goal is to keep the theme very minimal, maybe take a few design hints from Medium but overall stay the course of simplicity.