Some days, I just don’t want to go to the gym. I don’t have to lift weights or use a treadmill to get my heart rate up, and these exercises were a challenge!
Why do I find React.js progress bar examples that never involve the HTML progress element? It’s always nested <div>s. Progress elements have broad support for almost five years now.
As I transition back onto my personal website, I want to find a way to have a personal friends list to connect with here: a list of trusted connections that will receive exclusive blog posts. It’s a challenge I haven’t yet solved but I have some ideas. But let’s step back for a moment so I can explain better.
Many years ago, in the age of Friendster becoming a social network, I installed a web forum called phpBB here for a couple of reasons:
- Give people a central place to socialize
- Keep track of birthdays
I thought it would be neat to give people I know a central place to have conversations and talk about things. I can’t find the number now but I believe I had close to 50 people sign up and that was helpful for me. It was effectively a contact list. Some people left their birth dates, others left more information. I could use this to keep track and personalize my greetings to people, mainly for #2 above.
I actually like the idea of a friends list and I think we see various forms of them online. Most apps or sites describe this as your social media connections, using terms like Followers, Following, or Friends. But why am I highlighting this?
When I know my writing goes into a tunnel, such as private messaging, direct messaging or custom publishing to the various friends lists or followers, I can let my guard down a little and be more personal.
See this image above? Look at the bottom right side where it says “Friends”.
Facebook profiles can be closed from the broader ecosystem as well as the internet. The form above provides some form of nuanced privacy control when broadcasting your writings. Outside of Facebook collecting and selling everyone’s data, this is a form of encapsulation that allowed me to be more vulnerable than I am on the broader internet. It’s a convenient but effective mirage.
If we’re connected online, it’s possible you’ve noticed my participation in social media dwindled starting in 2017. I’ve had a complicated relationship with these various sites since the late 2000s and had my ups and downs. I grew envious when I saw more people I know sign up and almost exclusively use these services.
I blogged a lot in early to mid-2000s with all kinds of random posts. My writings began at the end of college and this was the outlet to all those who weren’t in the same place as I was. I moved from Colorado to Texas to California and traveled at least a couple times a year, or more, in most of that decade. So keeping up with people was not easy and this was a place I could send people.
But that envy of MySpace and later Facebook took its toll. It effectively silenced me in the early 2010s. I lost the motivation to write here into the void. But I’m now apart of what’s being labeled as the old guard of the web, looking back at a time in the first millennial decade where the web was a playground for anyone who cared. And I believe more than ever that this type of connection should not be solely enclosed by walled gardens of social media sites who prey on me.
So what’s this leading to? More blog posts here. Right now they’ll be public, open to the whole world, syndicated to social sites at times, and available for you to leave comments and participate if you want. Maybe you’ll just read or skim, that’s fine too.
Ultimately, I would like to recreate a friends list here. I want to create a tunnel for people who care and want more than sometimes-bland, often-technical public blog posts. When you “add” me, when you “follow” me, when we make a trusted connection that shares a common secret between each other, I can make more personal statements and know these words are going to people who I want them to see.
But I haven’t figured this part out yet. Maybe it’s making encrypted posts that my trusted connections can view. Maybe it’s something else that I haven’t thought of. I want it to be something you can sign up for, you can click, you can follow, and I can approve, similar to what we’re already used to.
Privacy might be increasingly difficult, maybe it’s mostly dead online, but that doesn’t mean I can’t try to take it back in small ways. Ways that’ll benefit both of us.
Let’s see how long it takes for me to come up with a way to have a personal friends list for asuh.com. Once this happens, you can have your own site/profile/blog and do the same.
Trying to be more creative and updated my blockquotes to heavily stand out. It’s my freakin’ blog, I might as well try new crazy styles!
The modern web developer is more a software engineer than what I would call a web developer. The app-ification of the web isn't a case of writing some HTML, authoring a CSS file, and using a new jQuery-like library to get that sweet interaction. You are going to need to know how to program; like a real programmer. You are going to need to know some very different approaches to how you build, deploy, and maintain things. You're going to need to question the value of some of your strongest held best practices. And you're going to need to get to grips with tooling. So much tooling. Because the new web development has matured enough to be dangerous to ignore, but not enough to be simple and entirely stable.
It’s clear now that a programmer path for the web requires skills that I don’t have and must continue to learn. I have to cross the line to the left brain from the safety of the right brain.
I think I’ll write a post about my journey and struggles.
An open-source screen recorder built with web technology
While looking for an open source alternative to the useful tool called Gifox, for creating screen recording animations on macOS, this Stackexchange comment led me to Kap. While it doesn’t display the last recorded gifs, I was sold on the fact that it go beyond just animated GIFs because it offers WebM, MP4, and APNG. What a great tool and highly recommended.
If I hadn’t found Kap, I probably would have hooked up this solution using Quicktime, various apps, and Automator for a dirty but effective free alternative.
It’s fun to think I’m back here writing occasionally, but my personal interests to come back here are more broad. Getting back to a website where I control everything is empowering and the ultimate satisfaction. The kickstart to get this point was seeing the potential through a movement called Indieweb. Indieweb principles align with my personal interests as well as the reason I started writing online so many years ago. I’m also burnt out from the effect that social media has on privacy.
Here’s what I’ve already done to asuh.com.
- A new look, simplified but intricate
- New blog post formats called Kinds. They mimic what we know from other social media, such as Notes which are similar to Tweets, Articles which are standard blog posts, Reply posts which are the same as Replies anywhere, Photo posts which can be like Insta photos, Bookmarks, Quotes and more! You’ve probably seen multiple posts where I’m trying out the various kinds I’ve mentioned
- When I make a new blog post here, I can check a box and it’ll create a new Tweet on Twitter. Not only that, but with various other methods, I can now see all the Twitter activity right here on each post. I could theoretically stop going to Twitter.com or Tweetdeck and use this website to participate in Twitter
- What’s just as important is I have the ability to show other sites that use the same content I’ve posted here. I don’t want to write into the void of another app when I can write what I want here first and syndicate it where I want. Or I can go to Instagram, post a new photo and I can connect my site to grab everything I just posted on Instagram. In other words, I don’t need to just lose the things I’m posting into these other silos of social media
- You know how you can check in to your location? You post on Facebook or Yelp or Foursquare and share where you are? I was never that interested in this feature but I have the same ability to inform of my location at time of post
- For sites and apps that allow it, I can now use this site to log into those other sites or apps. The support for this feature is small at the time of writing but the potential is great
- Performance optimization is an ongoing task, as I introduce more ways to load this site as quickly as possible. I have more work to do but my goal is for site loading to be better than the rest. In fact, I’ve got some pieces put together to make this site perform as good as apps on phones
- If you look for a post that I’m talking about code, you’ll see that code is now highlighted with a specific color scheme so that it stands out. This will help me to write more technical posts and contribute back to the web community as I discover, learn and grow as a developer
There’s more to add above but I think that’s a good highlight. Now let’s see where I hope to be in the next year.
- Add a little more color. This is as plain as it gets but I needed a baseline to build upon. This might be slower than I want but I hope to find ways to make the reading and interactive experience more visual
- Turn asuh.com into what’s called a Progressive Web App. You know how you can download apps in a store? I’m positive you’ve downloaded more than one app, possibly lots of apps, that are sitting on your phone being unused since you downloaded it. Appstore apps are usually pointless now when you can get the same thing using the web, inside a browser. It’s an exciting area to go into
- Ever since I started posting, I’ve had to come to terms with what I share online being public forever. However, I’m also not willing to share everything for everyone. I’m going to explore ways to share things here that will not be publicly accessible, meaning they’ll probably be encrypted and require some kind of key to access. I think this topic deserves its own post sometime because privacy has become as precious as fine metals like gold; it’s harder to keep things to myself if I decide to share them online
- I might get my hands dirty enhancing other themes to help other WordPress users connect with a lot of the above features. Maybe I’ll branch out to one of the frameworks/libraries du jour like React.js/Gatsby and get something up there too
- I’ll continue contributing back to the Indieweb community in whatever ways and time I can make. I think the community still lacks enough turnkey systems to quickly get people up and running in ways that you feel connected on social media and I can increasingly see a path for this in WordPress and other ecosystems. It’s a long journey but one that’s worthwhile
- More writing! I’m going to find a balance between some technical writing and personal writing here. Maybe I’ll divide the site up more so that the sections are more distinguished from each other. There’s a lot going on for me, less personally but definitely professionally, and I can’t wait to share more
I hope I look back at this and see that I’ve done even more than I wrote above. However, I’ll still be content if I get to even half of this. There’s so much in store for the year and the potential is endless so I hope I can make 2019 an productive year for my personal growth and continue Indiewebifying as much as I can.
Let’s say there is a divide happening in front-end development. I feel it, but it's not just in my bones. Based on an awful lot of written developer sentiment, interviews Dave Rupert and I have done on ShopTalk, and in-person discussion, it’s, as they say... a thing. The divide is between people who self-identify as a (or have the job title of) front-end developer, yet have divergent skill sets.
The article shows two comparison lists, and in both lists I’m more on the right side than the left. In order to make advancements in my career as well as continue increasing my salary, I’m forcing myself into the left side little by little. But it’s been a huge struggle because both of those left sides were for the back-end developers and I was always more interested the technical aspects of the design more than the data flow and interactions.
The Twitter comments are a good reflection of this divide:
With my recent motivation to renew this site, I’ve built the visuals on the site from scratch, using what’s called a starter theme, with Sage. In order to build upon this theme, and for increasing interactivity to the greater internet, I’m applying principles and ideas I’ve learned from the Indieweb community.
As I’ve been integrating new features into Sage, I’m essentially logging the base changes I’m making to Sage and have forked the Sage repository into an Indieweb version that I’ve named Sage Indieweb.
I had a few goals in creating this new repository (repo):
- Update Sage to include updated Microformats (Indieweb requirement)
- Make minimal updates to the original code
- Non-destructively add other code changes using WordPress specific functions and hooks
- Provide a central repository to keep track of theme updates that might help other WordPress theme developers to update their own themes
- Keep Sage Indieweb in sync with the Sage 9 point releases
The last bullet point took me months to figure out how to accomplish without spending hours making manual copy and paste of the various updates. This fork started with Sage version 9.0.5 and I’ve recently updated it to 9.0.7 (latest in the master branch to be correct) using a series of commands using
git that took a lots of trial and error. I had to piece together a bunch of Stack Overflow answers and Git tutorials to make this work and even what I’m documenting might not be as efficient as it could be.
After forking Sage 9.0.5 and converting it into a new repo, I made several changes that I added to the repo over the course of a few months. But my speed was not just from lack of coding time, it was also anxiety from watching the original Sage repository make progress but not knowing how to get to these new changes without manual work.
A couple of weeks ago, I had the itch to finally update Sage Indieweb to match Sage 9.0.7, two more point releases than the fork. I dove in further to learn more about a few
git fetch, and
git cherry-pick. Finally, I pushed through a lot of research and came up with what I hope will be a good workflow to update other repositories in this situation.
The new Sage Indieweb repo I created had all the same history up to the 9.0.5 release, which makes sense for me to be able to just merge the newer updates to Sage directly into Sage Indieweb. However, with more reading, I realized this wasn’t a good option because I want to keep the git history clean.
Here was my rough mental model:
- Add a remote repository for Sage to associate to my repository, maybe using git subdirectory or subtree, maybe just remote branch
- Fetch the updated changes to Sage
- Squash the newer commits into one combined commit
- Merge squashed commit bundle into my repository
Unfortunately, I was a little off and the above was tweaked:
- Add a remote repository for Sage
- Fetch the updated changes to Sage
- Cherry pick a range of commits into Sage Indieweb
- Squash the cherry picked commits into one combined commit
- Update Github repository
Let’s go through every step.
Add a remote repository for Sage
I was certain there had to be a way for me to associate the new repo with the original but nothing described what I wanted. Both repos are, effectively, unrelated since I took the forked repo, removed all the history, and made it into a new standalone repository on Github with a clean git history.
$ git remote -v origin https://github.com/asuh/sage-indieweb.git (fetch) origin https://github.com/asuh/sage-indieweb.git (push)
After trial and error, I realized it was possible to just ad a new remote repository with a new name. This is how I associated it with the new repo.
$ git remote add sage https://github.com/roots/sage.git $ git remote -v origin https://github.com/asuh/sage-indieweb.git (fetch) origin https://github.com/asuh/sage-indieweb.git (push) sage https://github.com/roots/sage.git (fetch) sage https://github.com/roots/sage.git (push)
Okay, so let’s get everything from the repo.
Fetch the updated changes to Sage
There might be a more efficient way for me to do this but I just fetched all of Sage including its various branches and tags.
git fetch sage
This made me nervous, maybe there was now some changes but the coast was clear.
$ git status On branch master Your branch is up to date with 'origin/master'.
Now comes the trickiest part.
Cherry pick a range of commits into Sage Indieweb
Originally, I was hoping I could just squash all the newest commits down into one commit and just merge that new commit. Maybe this is possible but I didn’t see a straightforward way to do this without a using a merge command, but even that didn’t appear good.
I found out that it’s possible to cherry pick a range of commits. Lots of trial and errors in practice since I wasn’t sure if I needed additional flags. In fact, I was hoping I could just flag something like
--squash into the cherry pick command to squash everything together as I’m cherry picking that range, but that was not possible.
$ git cherry-pick 37c7e0d..19057f6 error: could not apply 9040a3d... Normalize and enforce single quotes in scripts hint: after resolving the conflicts, mark the corrected paths hint: with 'git add
' or 'git rm ' hint: and commit the result with 'git commit'
Darn, it’s a merge conflict.
So what I’m telling
git to do is grab all the commits from just after 9.0.5, which is a SHA-1 of
37c7e0d all the way to the latest commit, separated by the two dots which signifies everything in between these two commits.
You can see the first of many merge conflicts or issues that stopped the process along the way. The errors were either because of my Indieweb updates to Sage or because of remote merges that occurred on the Sage repo.
Wait, what? Cherry picking doesn’t apply merges based from the remote repo because they are commits with more than one parent. I had to actually choose how to merge in the remote merges. So confusing.
So, when I got a regular merge conflict like the one above, I went to my editor, made the updates and necessary changes, then continued the cherry picking process.
$ git cherry-pick --continue
When I came across a merge conflict based on a remote merge, it was more complicated. Lots of wrong commands helped me learn I had add a flag to choose what’s called the mainline, which lets git know which of the parents to add. It’s still confusing to me but you can read more about it.
$ git cherry-pick -m 1 93ee95d On branch master Your branch is ahead of 'origin/master' by 9 commits. (use "git push" to publish your local commits) You are currently cherry-picking commit 93ee95d. nothing to commit, working tree clean The previous cherry-pick is now empty, possibly due to conflict resolution. If you wish to commit it anyway, use: git commit --allow-empty If you wish to skip this commit, use: git reset Then "git cherry-pick --continue" will resume cherry-picking the remaining commits.
Oh man, now I’m confused again. But after more referencing the logs, researching what’s going on and getting more errors, I decided to just
$ git commit --allow-empty to get past this since I likely had the commit in there.
All in all, I had a lot of
$ git log and
$ git cherry-pick --continue to get through this. In the end, I verified that everything was brought over.
Squash the cherry picked commits into one combined commit
While the command
$ git merge --squash is what I wanted to use, I ended up having to use
$ git rebase -i 32bb46d,
32bb46d being the latest commit made, to date, to the Sage master branch in order to squash everything down to one combined commit. I need to read more to see if the commit is required because it would have been nice to just
$ git rebase -i.
I looked through the log of what I committed and the log needed to be cleaned up as well. So I edited it with
$ git commit --amend since I hadn’t pushed it to the repo to give it an appropriate title.
Update Github repository
Once all of this was cleaned up and the history looks good, off to the repository it goes.
$ git push and off it goes!
Thoughts about this process
This was an exercise in frustration as I was trying to figure out how to do all of this. Git is a fascinating tool to accomplish a lot especially when working on teams and using feature branches.
$ git logis an ok default but there’s so much more I could use it for visually
- I wish upstream merges weren’t so tough to merge into local repositories. This use of mainline is not obvious and I feel like there’s UX improvement that could be shown here, similar to an interactive rebase view
The learning process isn’t always pretty but I have a better grasp at other concepts that’ll spin off from merging and fetching.
As long as I live in earthquake zones, I can’t get enough reminders to prepare and how to prepare.