Forem: Bob Walsh

When starting 2 apps at the same time makes sense.

Bob Walsh — Mon, 26 Apr 2021 23:11:04 +0000

Am I crazy? I hope not. Time will tell.

So I thought it was time to come clean and admit it: I'm building 2 different SaaS apps at the same time. As a Solopreneur/Developer, workforce of 1 person and 2 cats, it sounds crazy to try and build 2 different apps and get them both to market, but the right toolchain and the right approach can I hope make this work.

So far, working on two apps at the same time has resulted in less stress, more ideas, and better code.

The problem with building one app is it both takes over you life and can become incredibly stressful. Developers tend to hyper-focus on the problem at hand, yet taking a break and working on something else can unlock your creative powers when you most need them.

So by working on two apps at the same time I hope to avoid burnout and fatigue and launch 2 solid apps.

Neither app would be possible without the headstart provided by Jumpstart Pro. This awesome paid environment makes building a production-ready Rails app a snap.

The first app is FreelancerCashFlow . Having been a freelancer for most of my life, I've experienced the financial pain, limitations and headaches of Freelancer Feast or Famine. There has to be a better way: managing by cashflow is that way. But first you have to see your cashflow before you can start experimenting by shifting payment dates, savings toward specific purposes and seeing your financial future alternatives.

The second app is FreelancerContacts, a referral marketing system for all kinds of freelancers. Certain industries, like real estate agents, have had this down to a science for years: how to ask past and current clients for referrals. Done right, and you go from chasing every posted contract to actually having a waiting list of people who want your services. Since developers hate marketing, building a solid referral system makes sense.

While development of both apps is moving along, I've bought into the Validate Your Idea concept and only have a simple landing page up to gauge interest. I figure if you're willing to provide your email, you're a potential customer.

Anyway, I think the 2 App approach has merit - what do you think?

Remote or Else

Bob Walsh — Mon, 06 Apr 2020 19:29:59 +0000

I've been working remotely for about a decade and decided that I could do my part best by curating/writing about the best practices for working remotely at Remote or Else.

If you're interested in doing a guest post or just think that there's a post on some aspect of living socially apart worth sharing, please drop me a line at bob@remoteorelse.com.

What I built

A Gridsome blog site with 3 dedicated channels for posts, news and templates.

Demo Link

https://remoteorelse.com

Link to Code

Started with this Gridsome Starter: https://gridsome.org/starters/gridsome-casper-v3-starter/

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Gridsome deserves more developer attention!
Graphql is not easy to grasp: I would love to see someone build a site of example queries.

Gather, study & learn digitally with Readwise

Bob Walsh — Tue, 11 Feb 2020 23:42:53 +0000

Back when books were [exclusively] made of paper, I would consume technical and business books by the backpack load, marking them up with yellow, green and other color highlights. If I really wanted to learn the book, I'd do a second pass, only reading the highlights and highlighting over the first color with another color.

For years I've searched for a simple way to gather my Kindle bookmarks and actually get some value out of them. I missed being able to do something with my highlights. Today, thanks to a chance online encounter with Ian Jones over on Dev.to, I learned about an awesome SaaS tool: Readwise.

Readwise makes it easy to gather your Kindle bookmarks. And your bookmarks from Instapaper, iBooks, Pocket and the web. And through a simple hack, you can start actually getting the use out of all those expensive technical PDFs you've bought from developers and designers, like the excellent Refactoring UI.

So Readwise gathers all your highlights. Then what?

browse the highlights by book or article,
see a selection of highlights in a daily email,
tag highlights so you can pull together material across source,
share with friends/coworkers,
browse, review and learn highlights with spaced repetition built-in.

This last feature is a gamechanger. Let's say you're trying to absorb how serverless functions work. You have bookmarks scattered all over the place: web pages and [highlights(https://help.getpocket.com/article/1144-highlighting-in-pocket)] in Pocket in Firefox or Chrome, Kindle books like this one, pdfs that came in epub format as well or that you converted over.

With Readwise, you can turn all those highlights into flashcards, and drill on them until you know the material. (short rant: if you're not spending 25% or more of your worktime learning new things, you'll find yourself out of work in a year or two - been there, done that, it sucked.)

There are other features in Readwise I'll let you discover/explore during your free 30-day trial, but really, Readwise had me sold the moment I saw my highlights from both Kindle and PDFs available together. A max of $8.99/month.

Creating a deployable Rails 6 app + TailwindCSS, Stimulus.js, and a custom font.

Bob Walsh — Fri, 07 Feb 2020 23:38:21 +0000

This post covers how to set up a new Rails 6 app to use Tailwind CSS, and then set up a custom body font, and get the whole thing actually working when deployed to Heroku.

If you haven't upgraded your Rails skills to 6, be prepared to be shocked: Rails 6 fully works with modern JS frameworks the way they expect to be worked with. While there's still the asset pipeline, it's deprecated for the javascript hotness.

The first and most important step is don't pick the wrong tutorials to follow, or your path will be one of frustration and pain. I initially wanted to run Vue.js from within Rails 6, and I figured that was going to be the most difficult integration. I started by Googling "Rails 6 Vue js" and found this How to Integrate Vue.js with Rails 6
and through trial and much error, integrated Tailwind with it.

So there I was with Rails6, Vue, and Tailwind sitting in a tree. Unfortunately, I kept getting a compile error on Heroku that was not happening on localhost. Damn!

So after several days for fruitlessly trying to debug this issue and rethinking things a bit, I realized I was better off sticking with what I know and coloring within the lines that the people who wrote Rails have laid down: Rails for the main thing, and Stimulus.js to handle the "jQuery-like" simple but essential stuff like triggering dropdowns.

Enough talk, show me the code!

Ok, here we go.

with the current rails/ruby in your present working directory, rails new <appname.
The install Stimulus with rails webpacker:install:stimulus (see this GoRails video: How to use Javascript via webpacker in Rails 6 (and Flatpickr) for an excellent tutorial.)
app/javascript/packs/application.js is very much like the old asset pipeline; add this code:
```
import "controllers"
import flatpickr from "flatpickr"

require("flatpickr/dist/flatpickr.css")
```
The first line sets up stimulus controllers, then the next lines set up flatpickr. then this code:
```
document.addEventListener("turbolinks:load", () => {
  flatpickr("[data-behavior='flatpickr']", {
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
  })
})
```
configures what HTML tags should be inited with flatpickr and what the input and display date formats in flatpickr should be.
And don't forget to add flatpickr to your rails project: yarn add flatpickr.

[A small digression: pick either yarn or npm and stick to that. Otherwise, you end up with a yarn.lock and a package-lock.json file in contention for control of your package.json. Bad idea. For this project I went with yarn, and recommend this cheatsheet for translating npm into yarn: NPM vs Yarn Cheat Sheet.]

Next, it's time to see flatpickr at work in a view. Scaffold a view and then replace a form.date_select with a form.text_field :publish)date, date, { behavior: "flatpickr"} you should now in have a much nicer view working:

By the way, it seems Rails 6 is using a whole new form syntax: cleaner than the old one, hopefully easier to deal with when it comes time to add Tailwind classes.

Now would be a good time to stick your project up on Heroku. Unless you know you are going to deploy via AWS, Heroku makes it easy to deploy and manage. Read this post, Getting Started on Heroku with Rails 6.x. if you need to brush up.

Implementing TailwindCSS

You'll do a yarn add tailwindcss@latest. Why latest? Because you want the latest stable build of TailwindCSS. Now you have TailwindCSS in your project, but not yet integrated. You should pull up the Tailwind Install instructions, keeping in mind you need to get Tailwind working in your Rails 6 project. Check out GoRails How to install TailwindCSS 1.0 with Rails 6 if you want the full context, but here are the steps:
After doing yarn add tailwindcss, you need to create a new stylesheets directory in your javascript folder, and in that directory create an application.scss file to hold Tailwind's configuration:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

In postcss.config.js, you need to require('tailwindcss') and on the next line, require('authoprefixer').
One more step: telling webpack about this new application.scss. Do that in application.js with a require("stylesheets/application.scss") declaration.
Now you need to employ some tailwindCSS. For an easy way to do this, copy a navbar here and add it to /layout/application.html.erb.
You should have everything working in your Rails Project: do a quick test by having webpack compile by running from your CLI bin/webpack, and then try running it in localhost.

Installing a custom font into a Rails 6 app

As the final step I want to capture in this tutorial, here are the steps needed to use a custom font. Gone is declaring a CDN in the <head> tag, or shoehorning a set of fonts into your asset pipeline. There's a much cleaner way, the Javascript way:

Find the font as an npm module at npmjs.com. most font npm modules are going to start with interface- so pick one you like Roboto, or Nunito, or the awesome Inter font. Then add it to your project. For example yarn add 'typeface-inter'.
Now you need to tell Tailwind about this font in three places. First, edit your application.js file to include the npm module:

require("channels")
require('typeface-inter')

require("stylesheets/application.scss")

Next, generate a tailwind.config.js file in the root of your project (npx unlike npm does not generate a package-lock.json file, so use that.)
Modify tailwind.config.js:

module.exports = {
  theme: {
    fontFamily: {
      body: ['inter']
    },
    extend: {},
  },
  variants: {},
  plugins: [],
}

Finally, go into your application.scss file and apply the font to the html tag, so fontFamily{body{['inter'}}} gets applied:

@import "tailwindcss/base";
html {
  @apply font-body;
}
@import "tailwindcss/components";
@import "tailwindcss/utilities";

(Thanks to Scott Watermasysk and "Using Google Fonts Tailwind CSS" who graciously clarified for me where some of these bits need to go. Thanks Scott! (BTW, check out his How I VSCode project.)

Takeaways

Once again Rails has reinvented itself, this time as an excellent server application and as a container for all the javascript npm modules and frameworks large and small you might want to use.

That means all you Rails developers who know jQuery but are flummoxed by npm modules and all that javascript running loose need to bite the bullet, learn Rails 6, and get on board with it.

Once you make the mental switch to how webpacker works to integrate js into your rails app, it all starts making sense, and you can pretty much forget all those painful little workarounds in the asset pipeline.

And as Lee Smith just pointed out, while TailwindCSS starts out being a large package, larger than Bootstrap, you can easily add purgeCSS to your project so that when you push to production all those unused TailwindCSS classes get axed. The result? An ultrasmall and ultrasleek css file.

A final takeaway: The shelf life of developer information is now even shorter. Any tutorial, video, or post older than 6 months is suspect; older than a year, not trustworthy. That's a huge unmet need looking for a cool SaaS to solve it, in case you want to build the next Big Thing.

WordPress to gridsome via markdown in 2019 explained.

Bob Walsh — Wed, 23 Oct 2019 21:27:15 +0000

Could I get all my content out of WordPress and free from the clutches of at least 3 "helpful" WP page editors, including WP's latest Gutenberg?
Once I got that content free, could I convert it to markdown, preserving links, links to images, tags, and the like?
Assuming I could do 1 and 2, should I then import these files into a headlessCMS to make it easier to edit and maintain them, or, stick with markdown?
Which Static Site Generator should I go with? I'd worked with Jekyll and added a blog to my Ruby on Rails project LearnShortcuts, had played around with Hugo, and was in the process of teaching myself Vue. I decided to stick with Vue because I hope to retool myself as a Vue developer. I considered Gatsby but did not want to mix learning Vue with (relearning) React.

So once I decided on Vue, which Vue framework should I use? There's at least 3 worth consideration:

VuePress - the "official" Vue documentation SSG was a strong contender. It offers out of the box: a number of markdown extensions, a framework ready for markdown files, and an extendable plugin system. But, in working through the demos I was stymied trying to go with anything but the default theme. If I knew more Vue, perhaps the documentation would have been adequate, but for me, this was a showstopper.
Nuxt.js - I like Nuxt, it reminds me of the good parts of Ruby on Rails. Convention over configuration and a complete framework plus its 1st-class support of static site generation. Nuxt comes with excellent docs (which I supplemented with an extremely excellent Udemy class by Maximilian Schwarzmüller).

But Nuxt is a comprehensive framework - lots to learn, lots to go wrong for a [vue] newbie. This was complicated when I went down another rabbit hole: Vuetify. After all, I want my site to look good, and Vuetify seemed to deliver. But attempting to bolt on Vuetify to either of this great Nuxt templates, awake-template or nuxt-markdown-blog-starter, did not work for me.

Again - my bad, or at least my lack of knowledge. Still, I'd committed to leaving WP and time was a-wasting! Was there a solution? Or would I have to settle for something less than I wanted or (gasp!) build this in gatsby or React proper?

Then I found gridsome. This was the first Vue framework that really paid attention to SEO in its design, not just as a npm package addon. "Gridsome sites loads as static HTML before it hydrates into a fully Vue.js-powered SPA. This makes it possible for search engines able to crawl content and give better SEO ranking, and still have all the power of Vue.js." It's documentation was excellent, there were starter kits using a variety of themes and GraphQL meant that to me that in the future I could add content sources, and place a bet on GraphQL to supplant RESTful routing.

Creating the gridsome site

Building a site in gridsome is almost absurdly easy. Start with a Starter Kit. Follow directions. Done!:

I picked the gridsome-starter-blog starter kit, because a) along the way, I had decided against a headless CMS, b) I wanted a good looking site from the get-go, and this starter kit offered one, c) I liked the dark mode widget, and dark mode in general, and while my assistant code-writing cat helper prefers white backgrounds, I'm finding a lot less eyestrain in a Dark Mode digital world.

So,

npm install --global @gridsome/cli

gridsome create my-gridsome-site https://github.com/gridsome/gridsome-starter-blog.git 
//(my-gridsome-site is your new site.)

cd my-gridsome-site

gridsome develop //(to start local dev server at http://localhost:8080)

Boom. that's it, and I had at least the bare-bones version of my 2019 47hats site running on localhost. it looked like this: https://gridsome-starter-blog.netlify.com/.

Hosting on Netlify

I've gotten somewhat proficient using Netlify to host SSGs, and found only 2 gotchas worth talking about when it came time to set up Netlify as my host for 47hats.com:

With this SSG, you want to let Netlify digest your entire repo, then rebuild the site. So that means the Build Command is gridsome build and the Publish directory: dist.
Connecting your domain with a Netlify domain. The key gotcha here is if you are using a URL that is not the Netlify-generated URL, Netlify is going to take over hosting your site's DNS. You're going to want to a) copy all of the DNS records, including MX records that govern email, before you make the switch, and then add those records back into Netlify's DNS. Otherwise, you will be shedding a lot more than just whatever service you were using for your WordPress site.

Converting to markdown, Part 1

Running my site on Netlify was the easy part: now to deal with those 700+ posts.

The first step is to export from WordPress your content. Sign into your WordPress instance, go to Tools, then Export. Chose "All Content", and watch a .zip file get downloaded. This will export in the quaint format XML all of your posts, pages, comments, categories, and tags.

The zip file contains two objects: the XML file containing all of the text of your posts and metadata about those posts and a folder of all graphic files referenced by your posts: cover art and featured art.

After much googling and a fair amount of trial and error, I found this repo that got most of the hard work done: wordpress-export-to-markdown. I'd recommend forking it right now, then clone your repo. This is a keeper - it works.

But wait, it doesn't say a word about Vue! markdown is markdown whether it's created for Jekyll, Huge or gridsome. They all share the convention of a frontmatter block at the top of the file, then the contents itself.

I found (through some more trial and error) that the best processing of my XML file came from using these three flags:

--postfolders=false This will save and reference all the images to a single folder, /images. This matches what gridsome expects. This means all those URLs pointing to an image on your old service get magically changed to a relative URL and you won't go blind doing manual edits for the next year.
--addcontentimages=true Super useful! This will scrape your posts for external images and attempt to download and reference as many of them as it can. That content may no longer be on the web, but if it is, this script will get it.
--prefixdate=true This will prefix each post's filename with the date it was posted. Extremely handy for the next step.

One last thing about this great repo by LoneKorean, AKA Will Boyd. You either need to change line 27 of index.js to the name of your XML file or change the filename to the default, export.xml.

(Update Tuesday; January 21, 2020: LoneKorean has a V2 version of his script. You can just start the script with no command line arguments and it'll show you a wizard to guide you through the options. Nice!)

Converting to markdown, Part 2

After the conversion had run its course, there were still 3 inconsistencies between the format of my markdown files and what gridsome expected. I imagine that at some point in my Vue learning journey, I could hack away these inconsistences, but I found it easier to just power edit all files back to 2017 to start.

"true" vs true. gridsome expects in the frontmatter date: datevalue, notdate: "datevalue". Posts with date in quotes will silently fail to render and disappear from your blog. So using BBEdit, I stripped the double quotes from the frontmatter entirely.
Where's my cover-image? wordpress-export-to-markdown exports coverImage: "tab-groups-4.gif", but gridsome expects cover-image: ./images/tab-groups-4.gif. Again, BBEdit to the rescue, replacing "coverImage" with "cover_image", adding ".images/" to each filepath and then getting rid of double quotes entirely.
For whatever reason, several posts got "null" for dates. These were easy enough to manually fix, or just outright delete.

The Result: my blog in gridsome

I converted the last 15 posts, just to make sure my BBEdit process worked. It did! I plan to do the rest this weekend, and add some features like search, visible tags to pick, and building out my Hire Me and Books page. (I've already enabled pagination). Converting a site is never done, but I'm fully confident that this is easy to do.

I've shared this before, but it still blows my mind:

Now I have:

A highly performant blog where once I had a bloated monster,
My content in a format that is device, framework, and app independent: for example, I'm writing this post in Typora, my current preferred markdown editor. If I decide to go back to MacDown, or onto some other markdown editor (Maybe Bear), I can do that without changing anything.

Thanks for reading this rather long post: please tell me how it goes for you in comments here at dev.to, or reach out to me developer-to-developer at bob.walsh@47hats.com.

Push goals are bad for you

Bob Walsh — Fri, 18 Oct 2019 18:56:20 +0000

Ever wonder why it's easy, and fun, to contribute to Open Source, but most times hard and painful to meet deadlines your manager sets? It's because of how your brain is wired (assuming you are a human).

Just going through the backlog of Anne-Laure Le Cunff excellent posts at her brand, Ness Labs. You really ought to consider following her: she's smart, got science and writes well!

In this post, Push vs pull goals, Anne-Laure explains the difference between external push goals and internal pull goals. They may get you to the same place, but the experience is wildly different, whatever you are trying to create: code, words, art.

Understanding what kind of goal you are trying to achieve and how to convert from a professional life of push goals to a satisfying life of pull goals is an awesome mental tool for becoming more productive. Highly recommended reading.

Goodbye WordPress, Hello JAMstack!

Bob Walsh — Thu, 17 Oct 2019 18:19:32 +0000

I've been running my "personal brand" blog at 47hats since 2005 on one platform or another; for the past decade in WordPress.

I hate WordPress.

I'm convinced that all that never-ending messing with plugins, theme configurations, broken wp installs and the like took all the joy out of blogging for the first generation of bloggers.

And performance sucked:

But the imperatives for blogging haven't gone away: we still need a public way to connect to people, to show what we are (mostly) good at, to register as a "thought leader" in whatever we are passionate about.

Getting on the JAMstack movement

I've seen a lot of various movements come and mostly go in the tech industry: Windows OS (don't judge) at one time was revolutionary. Then, for me, there was Ruby on Rails. Then .js everything, React, Vue, and on and on. The difference between a tool (like webpack, gulp, etc.) and a movement is two things: people and affordances.

About a year ago after listening to Wes Bos and Scott Tolinski raving about netlify, I decided to give it a try with a demo Jekyll example blog. I sat there gobsmacked for 10 minutes because I had never, ever, seen such an easy deploy resulting in such a performant site.

I started noticing how many interesting people were moving over to the JAMstack and how many startups were springing up in the space: this is a movement, not a shiny new object.

Making the switch, get to the punchline

So last month I decided instead of hosting my WP site in WordPress on Siteground (the best of the WP hosts, IMO) for another year, I'd see if I could stand up my blog in Vue on Netlify.

I rapidly descended down several rabbit holes: first Nuxt, then VuePress, then Vuetify, then gridsome. Gridsome is an awesome framework for someone who needs a home for their blog, with a few pages and wants to get it done now.

Last night I threw the [dns] switch, and today my site looks like this:

My JAMstack journey is in its early days; HubSpot and Rails still pay the bills. But there are some amazing opportunities to create value that's performant, fun to build and looks good everywhere: I hope to find my place in the JAMstack Revolution.

I need a better code journaling app than Evernote.

Bob Walsh — Fri, 27 Sep 2019 18:00:45 +0000

Thanks to a series here Why you should keep a Code Journal | Code Journaling pt 1 of 4 - DEV Community 👩‍💻👨‍💻 I've been seriously reconsidering how I work.

I start the day with a new note in Evernote. As the day progresses, I enter little tidbits of knowledge I took me way to long to google (ex. Netlify, the build command for a nuxt project has to be nuxt generate).

But Evernote is a horrible notetaking/journaling environment for a developer.

So, any recommendations for a good digital notetaking Saas?