DEV Community: rinas

Make Fathom Analytics work with Turbolinks / Turbo in your Rails project

rinas — Wed, 16 Jun 2021 19:45:38 +0000

If you have Turbolinks or Turbo in your Rails project, only the first page view would be counted and tracked by Fathom Analytics. Here is how you can make use of load event to track the page views.

For turbolinks:

document.addEventListener("turbolinks:load", function() {
  if (window.fathom) {
    window.fathom.trackPageview()
  }
})

For turbo:

document.addEventListener("turbo:load", function() {
  if (window.fathom) {
    window.fathom.trackPageview()
  }
})

I had recently confirmed the same with Fathom team:

// Detect dark theme var iframe = document.getElementById('tweet-1376209437094895620-102'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1376209437094895620&theme=dark" }
and looks like this is the way to go:
// Detect dark theme var iframe = document.getElementById('tweet-1376210757218562053-135'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1376210757218562053&theme=dark" }

2 tricks to stay motivated on your side project

rinas — Sun, 06 Jun 2021 08:17:29 +0000

1. Build for yourself

This trick helps a lot. If you are building a tool for yourself, there is no need for the "motivation" part at all. You just want to make your life easier with it.

I would say keep a single project/codebase for all the tools you are building. So that there is no yet another "setting up the project" involved. Straight to building stuff.

2. Charge your customers

In case you don't the tool you built anymore, there are other people still using it. If it's a free tool, having paid customers would give you a boost to work on it more.

Well, nothing is free. You still have to pay the server bills right? (also I'm hoping you are not selling your customer data and making some money secretly 🤷‍♀️). Let me know if you have any tips!

In case you haven't read, check out my Top 1 way to not mess up your project. TL;DR - Don't be a perfectionist 😬😆

Top 1 way to not mess up your project

rinas — Tue, 01 Jun 2021 05:41:07 +0000

If you are a web developer, maker or an entrepreneur who is trying to build a sustainable businesses,

Here is the Top 1 (yes, it's not a yet another Top 10 article) way to not mess up your project.

1. Don't be a perfectionist

If you really want to be a perfectionist, change the definition 😂

Perfectionist - someone who takes the perfect next logical step for the project.

And not someone who keeps tweaking that 1px off margin 🤣

Not convinced yet? Sorry I didn't try to perfect this post 🤷

Original Tweet - https://twitter.com/onerinas/status/1399596072318640128

Update: Wrote about 2 tricks to stay motivated on your side project

Toggle 🌒 dark and 🔆 sunny mode using AlpineJS, and TailwindCSS

rinas — Mon, 31 May 2021 03:46:11 +0000

Hey 👋

Rinas here.

This is done using some Alpine JS magic 🪄 and I enjoyed implementing it.

🏎 Let's start

Update your Tailwind config to let it know need dark mode toggle based on class.



// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}

This will let you write bg-gray-50 dark:bg-black and show background colours based on the current mode.



<html class="dark">
<body>
  <div class="bg-gray-100 dark:bg-gray-600">
    <!-- ... -->
  </div>
</body>
</html>

Now let's try to remove that hardcoded dark class in html tag and grab the value from localStorage using Alpine



<html
  x-data="{ darkMode: localStorage.getItem('dark') === 'true'} "
  x-init="$watch('darkMode', val => localStorage.setItem('dark', val))"
  x-bind:class="{ 'dark': darkMode }"
>

🤔 Wait, what's going on here?



x-data="{ darkMode: localStorage.getItem('dark') === 'true' "

x-data tells the framework to initialize a new component with the following data object. In our case, the object is:



{ darkMode: localStorage.getItem('dark') === 'true'}

I think of it as a simple variable and setting darkMode's value to either true or false based on the localStorage item dark's value.



x-init="$watch('darkMode', val => localStorage.setItem('dark', val))"

$watch is a magic property (yup, that's the official terminology 😁) in Alpine used to watch data we have and trigger a function.
x-init You might have already guessed it. It runs an expression when a component is initialized.

So good so far? If not, let me know. I'll try to clarify in comments and update this post accordingly

Let's add the button to toggle the theme now.



<button @click="darkMode = !darkMode">

  Toggle Theme

</button>

🏁 Yup, that's all you need 😎

Here is the polished version I used in HIGHSCORE.domains

This is my first time using AlpineJS and got featured in Alpine.js Weekly #61 by @hugo__df

highscore.domains got a darkmode toggled powered by Alpine and TailwindUI by @onerinas

Leaving few links here which might be useful if you want to try this out in your project:

TailwindCSS:

AlpineJS:

x-init
Runs an expression when a component is initialized.
https://github.com/alpinejs/alpine#x-init

x-data
Declares a new component scope.
https://github.com/alpinejs/alpine#x-data

x-bind
Sets the value of an attribute to the result of a JS expression.
https://github.com/alpinejs/alpine#x-bind

$watch
Will fire a provided callback when a component property you "watched" gets changed.
https://github.com/alpinejs/alpine#watch

Buying a new domain is not the way to start your side project

rinas — Sun, 30 May 2021 11:08:22 +0000

💡 When an idea strikes, the very next thing to do is buy a domain 😅

I do this a lot and started to slow down recently.

You take a shower and the idea generator puts an awesome idea in your head
It would be the most incredible idea you have ever come across.
Rush to laptop see if that perfect domain name is available and boom 💥
What did just happen? You got a dopamine effect of achieving something. Feels like the project is half done right? Nope. Wrong.
In reality, you did nothing. You just paid some few $$
Now you have 1 year to work on the project before it expires.

Guess what? You will probably let it expire or worse, renew it for one more year assuming some miracle is gonna happen this year. Nope, you are wrong again.

I started keeping aside at least an hour for side projects starting March and obviously, I ended up buying few domains - nonolist.me, shipit.club, myfailedstartups.com

Wanna know the current status of these projects? MVP is not ready yet.

Meanwhile, I started thinking about this domain hoarding problem and hit the aha shower moment again 💡

Let's build a website to find out how many domains people own 😂

For some miraculous reason, I didn't buy a domain for this 😹

📝 I created a form using typeform and tweeted the link asking how many domains people own.

😱 oh boy, many owned hundreds of domain names

👨‍💻 Ok, now I hit that rush to buy a domain to build a website for this.

🐣 HIGHSCORE.domains is born. A fun leaderboard to find out who owns more domains.

🤔 I know you are reading this and thinking "oh wait, how many domains do I own actually?" 🤣

😎 HIGHSCORE.domains is the project I bought the domain after seeing people are responding to it and might have some potential.
Guess what? this is the only project which is live and not yet another "Sign up for early access" page.

🙋 Do you face this problem as well - ie, ended up buying domains and not use them? Is there any tricks/realization you had recently which helped to overcome this?