DEV Community: Joe Masilotti

An open-source reverse job board for Rails developers

Joe Masilotti — Tue, 08 Feb 2022 17:34:57 +0000

Hi, 👋 I'm Joe Masilotti. I'm building railsdevs to make it easier for Ruby on Rails developers to find their next gig.

The idea is simple: you post your developer profile and companies reach out to you.

railsdevs is being built around three core values:

Empowering the independent developer
Doing everything in public
Creating a safe, inclusive environment

Empowering the developer

I've been an independent developer for the past two years. And leads are rarely consistent. Sometimes I can't keep up with the work and other times I struggle to find my next gig.

And job boards are rarely helpful for freelance and contract work. They're focused on full-time roles.

railsdevs strives to give power back to the independent developer. Instead of companies posting their jobs, developers post their profiles. That way, the power dynamic is reversed as companies have to reach out to developers first.

Doing everything in public

railsdevs is an Open Startup and open source. It operates fully transparent and shares its metrics, like revenue and traffic.

On top of that, I'm making all my decisions in public. I'm posting questions and ideas when I'm looking for feedback on GitHub Discussions. And I'm tweeting about work in progress (and sneak previews) on Twitter.

If you're a freelance Rails developer looking for your next gig then add your profile! The site is 100% free for developers and is connecting devs like you to paid contracts.

Hotwire dev content?

Joe Masilotti — Mon, 21 Jun 2021 16:08:24 +0000

Anyone have any Hotwire dev content they’ve recently published? I’d love to promote it in my new newsletter! Stimulus, Turbo (Native), code, courses, thoughts, anything works. Reply below with your links.

Turbolinks is dead, long live Turbo ⚡

Joe Masilotti — Sat, 16 Jan 2021 16:32:03 +0000

Turbolinks, my favorite way to build hybrid apps, recently received a huge update.

What’s Turbo(links)?

Turbolinks is a tiny JavaScript library bundled into Rails apps that makes pages load way faster. When a link is clicked, the library takes over and performs the request via AJAX then replaces the <body> element with the response.

Developers can leverage these “hooks” to build hybrid applications based on the mobile web site they already have. There are native iOS and Android components that work with the JavaScript to create native-feeling interactions.

The native app renders the mobile web view and the frameworks handle the “glue” in between. Think: clicking a link pushes a new controller on the navigation stack. These tools enable small teams of developers to build high-fidelity cross-platform apps. Basecamp, Hey, Zaarly, BeerMenus, and more are all Turbolinks-powered hybrid apps.

Turbo and Hotwire

Cosmetically, the framework is now called Turbo and lives under the Hotwire “namespace” both on GitHub and online.

The web side of Turbo saw a slew of new features and existing things to play with. To show how powerful Turbo is, watch DHH create a live-updating chat application in just 15 minutes. 🤯

The iOS component, called an adapter, received a much smaller update. The upgrade path from Turbolinks is small and relatively painless; I was able to migrate two existing apps in a few hours each.

The most exciting new feature for the native frameworks is Path Configuration. This moves the URL routing logic to a JSON file. The best part is that this file can live on your server, enabling remote configuration of different URLs. 💪

I’m compiling 5 years of Turbo(links) experience 📓

Since I started working with Turbo(links) in 2015, I’ve been noting all the gotchas and rough patches. I’m slowly compiling these into something more formal to share with the public.

That said, I’m not sure if a book, video course, or blog post series will be the best fit. If you’re interested in learning more about Turbolinks, how would you prefer to learn?

P.S. If you need help on your Turbo(links) project ASAP don’t hesitate to send me an email!

How do you feel about hybrid? 🤔

Personally, I find them an amazing middle ground for small teams to manage the three big platforms at the same time.

How do you feel about hybrid? I’d love to hear what you think in the comments!

More about me

I'm Joe and I write every week on Masilotti.com. I also tweet about this kind of stuff on Twitter. This snippet was part of my newsletter, The Masilotti Monthly.

Tips for a better a Product Hunt launch

Joe Masilotti — Tue, 01 Dec 2020 21:23:15 +0000

Product Hunt is still a great source of traffic for new (or reworked!) products. While it won't make or break your idea, it does help generate momentum and awareness. Here are some tips I've picked up from my recent launch.

What worked

Build in public - Weeks before the launch I documented everything I was doing on Twitter. This helped build up an audience that was "primed" to upvote when the launch went live.
Get early upvotes - Product Hunt starts its 24 hour clock at midnight PST. And your first hour is important in getting to the front page. Ask a friend to help promote when it goes live. Don't stay up late - you want to be active during the day!
Live tweet - Tweet in the morning that you launched and continue to update the thread throughout the day. Talk about big wins (visits, sign ups, sales, etc.) and interesting comments. The more you comment on the thread the more it will re-appear in folks' newsfeeds.
Be genuine - Don't ask for upvotes (or comments), ask for support. You're probably nervous, let folks know! I found this helps folks resonate with why I'm promoting the launch. They will want the same in return when they go live.

What didn't work

Day-of e-mail campaigns - Unless you have a huge number of subscribers this won't be worth it. Think of it this way: if you have 1000 subscribers, 10% click through, and 10% of those upvote you only looking at a single upvote.
Twitter ads - I spent $15 and received 2 clicks. Crazy! If I was linking directly to a paid service $7.50 CPA might be worth it, but not for fake internet points.
Obsessively refresh metrics - This doesn't help anyone. If the numbers change you get a small dopamine rush. But when they don't the "down" is worse than the "high" - stick to checking on regular intervals (e.g. every hour).

(BONUS) What could have worked

Post to Indie Hackers - A great community that offers a ton of support to public launched. Somehow this missed my radar and I totally forgot. Don't make the same mistake!
Get hunted - I couldn't find someone "important" to hunt my product in time. Maybe it would have made a difference in the beginning, but I can't say for sure. My advice is that if you can do it, well, it can't hurt.

P.S. I'm Joe Masilotti, I blog about this kind of stuff on Masilotti.com. The product I launched is Mugshot Bot. Cheers!

A free tool to generate Open Graph images for GitHub repos

Joe Masilotti — Fri, 20 Nov 2020 14:38:19 +0000

I made a free tool that generates Open Graph images for GitHub repos.

👉 mugshotbot.com/github

I work in open source and was tired of sharing ugly links on Twitter and Facebook. This is how they usually look.

One day I realized GitHub lets you upload a custom image, so I started making some templates. I figured I could work it into Mugshot Bot and use the GitHub API.

That eventually turned into a full product! It’s free to use. And it can create some nice Open Graph images for your open source projects.

Here's what that same repo looks like now. 😻

I use the GitHub API to pull in a few stats from the repo:

🌟 stars
🌍 language
🍴 forks
❗ open issues
👤 creator avatar

There's three different themes and you can customize the color and background pattern. Earlier this week a few folks helped me beta test - here's what they created!

If you give it a try, reply with your repo and I'll check it out. Happy hacking folks! 👋

Regexes with multiple slashes in Ruby

Joe Masilotti — Thu, 19 Nov 2020 15:08:41 +0000

I picked up a new tip yesterday while working with regexes in Ruby.

tl;dr - Use %r{} over /.../ when matching regexes with more than one /.

I was testing if a string begins with http:// or https:// and wrote a small regex.

/^https?:\/\//

Broken down, this ensures the string:

Starts with http
The next character is optionally s
The next characters are ://

Even for such a simple regex that feels a bit hard for me to read. There are too many escaped slashes for my taste.

To improve this a bit you can use r%{} over /.../. The syntax works the same but you don’t need to escape slashes.

The regex becomes something much more readable:

%r{^https?://}

GitHub's RuboCop styleguide has a recommendation on when to use this syntax.

Use %r only for regular expressions matching more than one ‘/‘ character. - RubuCop Ruby Style Guide

P.S. I could have probably just used two #starts_with? calls but where’s the fun in that?

I'll make a custom social image for your GitHub repo

Joe Masilotti — Mon, 16 Nov 2020 17:50:32 +0000

Hey folks! I'm building an image generation tool that automates link previews.

Later this week I'm launching a new feature. But I wanted to give the DEV community a sneak peek!

Send me a link to your best GitHub repo and I'll create a custom social image.

You can upload this on the settings page of the repo - it will be used when you share on Twitter, Facebook, LinkedIn, etc.
Feel free to ask for a specific color or hex code!

Here are some examples

How I built a URL to image generator over the weekend

Joe Masilotti — Mon, 31 Aug 2020 20:32:03 +0000

I've grown really tired of manually creating social images for every single blog post. They take way too long to create and online tools always end up looking too generic. How many stock photos can I scroll through before they all start to look the same?

So I built Mugshot Bot. An automated, zero effort social image generator. You pass it a URL and it generates a perfectly sized, unique, beautiful social image.

Here's what they look like! The color and background pattern are randomized from a hand-tuned selection. The title and subtitle come directly from the HTML.

Overall approach

My goal is to design in HTML and CSS and then convert it to a PNG. This worked pretty well with some wkhtmlto* magic but there were a few hoops I had to jump through. Here's what I did.

Fetch the content

All of the content comes directly from the URL's HTML. So the first step is to fetch the website and parse the DOM. I'm using HTTParty and Nokogiri and then looking for specific markup.

body = HTTParty.get(@url).body
html = Nokogiri.parse(body)
title = html.at_css("meta[property='og:title']")
  .attr("content")
description = html.at_css("meta[property='og:description']")
  .attr("content")

Render and style the HTML

Now that we have the copy we can drop it into some HTML. In Rails we can render an arbitrary view and pass in some variables via ApplicationController#render.

mugshot = Mugshot.new(title: title, description: description)
rendered_html = ApplicationController.render(
  "mugshots/show",
  assigns: { title: title, description: description },
  formats: [:html],
)

The rendered HTML uses the default layout so we have all of the CSS and fonts normally added in <head>.

Convert to an image

Where the magic happens: wkhtmlto*. Or, as it is usually known, wkhtmltopdf. This library is bundled with a lesser known tool wkhtmltoimage that does exactly what we need.

If you have the library installed you can call directly into it with Open3. This works a bit better than backticks because you can handle stderr.

result, error = Open3.capture3(
  "wkhtmltoimage jpeg - -",
  stdin_data: rendered_html
)

The two dashes (- -) at the end of the command tell the tool to render from stdin and render to stdout. Open3 will write stdout to result and stderr to error.

Render from the controller

result is the actual image, as data. We can render this directly from the controller. Ideally, this would be uploaded to S3 and/or put behind a CDN.

def show
  # ...
  send_data(result, type: "image/jpeg", disposition: "inline")
end

What a weekend!

Thanks for reading, I hope you enjoyed how I built a little side project over the weekend.

If you give Mugshot Bot a try please let me know what you think in the comments! I'm open to feature requests, too.

This past weekend, I built a landing page and redesigned my blog with Tailwind CSS. And I don't think I'll ever go back.

Joe Masilotti — Fri, 24 Jul 2020 21:21:30 +0000

This past weekend, I built a landing page and redesigned Masilotti.com with Tailwind CSS. Getting going was tough. But I don't think I'll ever go back.

Oh, and both the landing page and Masilotti.com are now open source!

joemasilotti / masilotti.com

Source for masilotti.com, built with Bridgetown and Tailwind CSS.

What the h*ck is Tailwind?

Tailwind is a CSS framework for people who hate CSS frameworks. - Joe Masilotti

Tailwind takes an unopinionated approach to design and leaves everything in your control. Instead of being tied to, say, Twitter Bootstrap’s card design, you build yours from scratch with Tailwind.

And from someone who usually hates working with CSS, it's actually quite enjoyable.

Another CSS framework?!

Yes. And no. But mostly yes.

Tailwind’s unique approach focuses on utility classes to build everything. Instead of given components like headers, heroes, or cards, you instead use tiny little classes that do a single thing.

mr-4 adds a bit of margin to the right. bg-gray-200 sets the background color to a very light gray. And flex sets the display property.

Combining these with size class modifiers enables very powerful styling with very little code. All classes apply to all size classes until you prefix them. md:max-w-xl sets the max width to extra large but only on medium and larger devices. lg:h-16 sets the height on large (and larger) devices. While a plain pl-16 will set a left padding on all sizes.

<div class="mx-4 md:mx-8 lg:mx-16 bg-teal-200"></div>

This snippet will have an increasingly bigger horizontal margin as the screen size is increased. And all will use this light teal background color.

Cascading stylesheets

Another goal of Tailwind is to make it easier to deal with large CSS codebases.

Changing a global style too often cascades across multiple widgets, components, pages, or templates. (Or you miss a part of the selector chain and nothing happens.) With Tailwind, those changes are scoped only to the HTML element to which they are applied.

In practice, this means you can tweak the layout of your blog without having it mess up your landing page. Enforcing changes that are more direct and easier to reason about.

Configuration over convention

A major goal of Tailwind is to write less CSS. Take a second and let that one sink in. A CSS framework that wants you to write less CSS. Crazy!

As shown above, you create custom styles by combining long chains of utility classes. You don't create global "hero" components that end up getting customized each time they are used anyway.

On Masilotti.com I have no custom CSS. Zero. Everything comes from Tailwind utility classes and some basic configuration.

This takes out the biggest gripe I have with CSS, maintaining it. You don't have to maintain something if it doesn't exist in the first place!

So, how does it all work?

Another differentiating factor of Tailwind is how it’s built. If you grab the latest from the CDN, you’ll notice the file is quite large. And there’s a ton of stuff you will never use. Tailwind has a surprisingly elegant solution for this.

First, all of the custom Tailwind is run through a preprocessor, usually PostCSS. This does all the fancy iterating and looping to create every single combination of screen size, property, attribute, modifier, etc. That’s why the CDN file is so large.

The second phase (hint: where the magic happens) is done with CSS purging. This step removes all of CSS classes that aren’t being used in your project. These reductions can be ginormous. A smaller bundle means a smaller payload and easier parsing for the web. Faster load times means happier customers!

With great power comes great responsibility

Tailwind gives you the flexibility to create anything you want. Like, literally anything. Take a peek at their CSS reset, Preflight. It even resets the font size of heading tags!

To compare, Twitter Bootstrap makes it really easy to create something that looks fine. Throw a grid up, slap some cards in place, maybe tweak the hero, and boom. You have something that functions and doesn’t look too terrible.

Tailwind, out of the box, looks like entirely unstyled HTML. And it takes a bit of work to get it looking decent. But the investment pays for itself very quickly.

To work around this I've adopted the official typography plugin. Install it and wrap blocks of prose in a prose class for very sensible defaults. This content of Masilotti.com is 99% styled with the typography plugin.

Building Tailwind

OK, great, you’re convinced. “Let’s do Tailwind!” I can hear you yelling at your monitor. But how? …great question.

For all my praise, Tailwind is still a pain in the butt to build. Because of its complex build process (relative to Bootstrap) it requires a bit of modern web packaging know-how.

There are more than a few ways to get Tailwind integrated into your build process. I’ll touch on the two that I dove into this weekend. There’s also plenty of official example setups on GitHub.

Static HTML site

My first goal with Tailwind was building a static HTML landing page. This let me dive into manually setting up the build process along with all of the CSS processing.

I ended up with a fairly standard configuration and two custom yarn scripts to help with watching during development and deploying for production.

// package.json
{
  // ...
  "scripts": {
    "build": "copyfiles --up 1 'src/**/*' dist && postcss css/base.css -o dist/css/styles.css --env production",
    "watch": "postcss css/base.css -o src/css/styles.css --watch"
  }
  // ...
}

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    process.env.NODE_ENV === 'production' && require('@fullhuman/postcss-purgecss')({
      content: [
        './dist/index.html',
      ],
      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
    }),
    process.env.NODE_ENV === 'production' && require('cssnano')({
      preset: 'default'
    })
  ]
}

yarn run watch processes my source CSS and spits it out to be linked in the HTML file. Appending --watch ensures that postcss continues to build while files are updated.

yarn run build copies everything from src/ and moves it to dist/ then processes, purges, and minifies the CSS. I can then deploy the contents of dist/ to production.

Was it worth doing manually? Yes. Would I do it again? No.

It was worth learning how the sausage was made but only once. In the future I would copy this over from an old project instead of creating it from scratch.

P.S. The site is open source.

Jekyll and Tailwind

This site is built with Jekyll, a static site generator written in Ruby. I based the project on jekyll-tailwind-starter and customized to my liking.

I don’t think I can recommend using this repo. There are better ones on the official site. Things were a little out of date but the scaffolding was there.

That said, the repo did get me where I needed to be. It has all of the standard CSS processing built in and integrated with Jekyll’s build scripts. All I have to do is run bin/start and it watches for changes. It even hooks up live-reload so I don’t have to refresh the page!

bundle exec jekyll serve --livereload --drafts --future --port 5000 --livereload_port 35729 "$@"

Masilotti.com is open source so feel free to poke around!

joemasilotti / masilotti.com

Source for masilotti.com, built with Bridgetown and Tailwind CSS.

I Just Deleted Thousands of Records from Production 😬

Joe Masilotti — Wed, 20 Mar 2019 14:03:41 +0000

This post originally appeared on Masilotti.com.

I woke up yesterday eager to add pretty social shares to my side project, weTabletop. As I plugged a few URLs into the Twitter Card Validator a few started to 404. Oddly, the records seemed to be fine in my development database running a production dump from late last week.

Time to Sanity Check

Something was going on. Did I somehow delete a bunch of records from production?

To verify I remoted in to the Heroku Rails console and started debugging. Comparing table counts with those in dev taught me that the events table was out of sync. By a lot.

I figured out which records were missing by comparing the IDs of all records in production to a normal database sequence (1, 2, 3, 4, etc.). I very rarely actually delete events, so any gaps in the pattern will show something wrong.

(irb)> ((1..Event.last.id).to_a - (Event.first.id..Event.last.id).to_a).count
=> 2526

I had somehow lost over 2500 records. 😭

Backups? What Backups?

Ideally, this would be fixed by merging a database backup into the current dataset in production. I could have downloaded a dump from a week ago, found all the records, and uploaded those back to prod.

However, to keep Heroku expenses as low as possible I don't pay for the $50 database add-on, the cheapest one that supports automatic backups. So no automated backups for me. 🤠

Luckily, my dataset is still very small (~30k records) so I can pull production into development every now and then. And my most recent dump was from before the random deletions started occurring! While not perfect, I figured I can write a script to manually export and import the records from development to production.

Export/Import Raw JSON

Get the IDs of missing records (from before)
Write each record to a file, as JSON
Upload the file and an import script to production
Parse each line and #create! a new record

Exporting the entire record to JSON (bypassing any custom serializers) ensures all the data is preserved. This includes the record's ID and timestamps, something you usually don't want to carry over when moving data.

This is one of the rare times you actually want that data. I needed the backups to look just like the records they were restoring. Event #412 should be marked as created on Feb 14, not Mar 18 (today).

The exporter, run in development

class EventJSONExporter
  def export
    ids = [1, 2, 3, ...].freeze # pasted in from before

    File.open("db/events.json", "wb") do |file|
      Event.where(id: ids).find_each do |event|
        file.write event.to_json
        file.write "\n"
      end
    end
  end
end

The importer task, run in production

namespace :events do
  desc "Import deleted events from JSON file."
  task import_json: :environment do
    saved_event_ids = Set.new
    filename = Rails.root.join "db", "events.json"

    File.open(filename).each_line do |line|
      begin
        event = Event.new(JSON.parse line)
        event.save!
        saved_event_ids << event.id
      rescue JSON::ParserError
        puts "Couldn't parse JSON: #{line}"
      rescue StandardError => e
        puts "Couldn't save event #{line["id"]}: #{e}"
      end
    end

    puts "Imported #{saved_event_ids.count} events:"
    puts saved_event_ids
  end
end

Root Cause Analysis

None of this matters if the records continue to magically delete themselves. A rigorous seach for destroy and delete through the entire codebase lead me to a single culprit: the Google Calendar event importer.

class GoogleCalendarEventImporter
  # ...

  def create_or_update_event(google_calendar_event)
    event = Event.find_or_initialize_by i_cal_uid: e.i_cal_uid
    if google_calendar_event.cancelled? && event.persisted?
      event.delete
    end
    # ...
  end
end

Looks fairly innocent, right? If the Google Calendar event was cancelled then delete it from the database.

Turns out i_cal_uid can be nil when the event is cancelled. Only ~10% of all events are from Google Calendar, the other 90% never get an i_cal_uid! This leads to #find_or_initialize_by finding any of the other 90% of the events and deleting that one. And this code is run every time a synced calendar is updated — a lot.

In their defense, Google does document that the iCalUID can be blank for cancelled events. However, it was noted under the status section, not where I expected it near the iCalUID reference.

status: Deleted events are only guaranteed to have the id field populated.

Fixes and Looking Forward

The quick fix is to not delete the record when the Google Calendar event is cancelled. I made this change and deployed to ensure I didn't lose any more data.

def create_or_update_event(google_calendar_event)
  if google_calendar_event.cancelled?
    return # TODO: Remove cancelled events by e.id, not iCalID
  end
  # ...
end

But this event is still, well, cancelled. It shouldn't be shown to anyone. The code will need to additionally track the Google event ID for each record and only delete if there is a match.

What's the difference between id and i_cal_uid? Every event has a unique id per calender and repeating events all share the same i_cal_uid.

How to Prevent This

Phew. In the end I restored all but 17 records; I'll have to manually re-create those myself. But still, I never want to have to do this again. Here are some ways this could have been avoided:

A better understanding of the API contract with Google
More aggressive alerting when destructive actions occur
Better unit tests that handle when i_cal_uid is nil

At best this post helps someone recover from a similiar data loss. At worst it shows how easily a full-time developer with almost a decade of experience can make such a huge mistake!

Enjoy my humility but please spend the $50 for a database with a backup strategy. 🙏