<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Jameel Ur Rahman</title>
    <description>The latest articles on DEV Community by Jameel Ur Rahman (@wanderingsoul).</description>
    <link>https://dev.to/wanderingsoul</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F661279%2F61a0cf7d-b1ea-4e01-8b7f-f951568d5ab6.jpeg</url>
      <title>DEV Community: Jameel Ur Rahman</title>
      <link>https://dev.to/wanderingsoul</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/wanderingsoul"/>
    <language>en</language>
    <item>
      <title>Fear of Mediocrity</title>
      <dc:creator>Jameel Ur Rahman</dc:creator>
      <pubDate>Mon, 31 Jul 2023 12:48:52 +0000</pubDate>
      <link>https://dev.to/wanderingsoul/fear-of-mediocrity-19l9</link>
      <guid>https://dev.to/wanderingsoul/fear-of-mediocrity-19l9</guid>
      <description>&lt;p&gt;Originally posted on my &lt;a href="https://jameelur.com/blog/fear-of-mediocrity"&gt;blog&lt;/a&gt;.&lt;/p&gt;




&lt;p&gt;For a long time now I've been a feeling a sense of mounting doom. A fear that I'm no longer keeping abreast of all the change that's occuring around me. That I'm no longer keeping pace with others who are learning faster than me, who are growing faster than me, or just plain doing more than me.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;"Do not go gentle into that good night" - Dylan Thomas&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Fear is a powerful emotion. A bit of fear can push your forward. A lot of it can overwhelm you. Now imagine feeling that fear mounting day by day, week by week, and no matter what you do, you still feel that mounting sense of doom. I can't imagine it being healthy. It definitely isn't for me.&lt;br&gt;
I'm a software engineer by trade and heart and in my industry you need to stay abreast of technology. I'm also fortunate to work with some brilliant minds in my workplace (ExpressVPN). You'll find a lot of software engineers fight against imposter syndrome, myself included, but being surrounded by brilliancy can mute your own brilliance. There's so much to learn and experience that it is overwhelming. Even more so when your attempts at self improvement aren't as consistent as others.&lt;/p&gt;

&lt;p&gt;A few days ago I became concious that my fear had become paralyzing and I was hitting a breaking point I didn't know existed. I realized that in those free moments my mind was not engaged, it became filled with thoughts of learning X or Y, doing side project A or B, or feelings of guilt because I was procrastinating or not doing enough. The enormity of all the things I had to do to "catch up" made it so that consistently doing a little every day never felt enough. In this way, what should have been a fulfilling journey of development and growth became an endless grind to be an ideal I had no hope of achieving.&lt;/p&gt;

&lt;p&gt;I write this advice for myself and others who may need to hear this.&lt;/p&gt;

&lt;h2&gt;
  
  
  When goals become a shackle
&lt;/h2&gt;

&lt;p&gt;I recently watched a video on &lt;a href="https://www.youtube.com/watch?v=S3CU2kOBt3s"&gt;coping with uncertainty&lt;/a&gt; and a statement made right at the end was extremely thought provoking.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;"Your goals are your aspirations, not expectations"&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;We all need goals. We all have dreams that we want to pursue and actualize. But it's important that your dream does not become the weight of expectation that holds you back or the shroud that hides the present from your sight.&lt;/p&gt;

&lt;p&gt;Life is not about the dream job you want to get. Or that dream car you want to buy. Or that dream of building a business that allows you to retire by the time you're 35. Life is so much more than that. Don't let your goals make you lose sight of the things that matter such as looking after your physical and mental health, spending quality time with loved ones and fostering positive relationships with friends and family.&lt;/p&gt;

&lt;h2&gt;
  
  
  Optimism and Gratefulness
&lt;/h2&gt;

&lt;p&gt;A friend of mine recently messaged me about how he's been deliberately cultivating himself to be more optmistic. It made me realize that I was spending more time being negative than positive. The weight of our own expectations can lead us down a negative spiral. Afterall, if you always compare yourself to others, nothing you do will ever satisfy you and thus all your work will always be futile and will only serve to feed into your negativity.&lt;/p&gt;

&lt;p&gt;Be optimistic. I feel optimism comes hand in hand with gratefulness. There's a lot you've been blessed with. You can spend a few minutes a day writing it down and you'll never run out of things to be grateful for. Focus your mind on what you have, not what you don't, and with gratitude you'll find yourself feeling better.&lt;/p&gt;

&lt;p&gt;A pro tip to feel better. Smile even if you don't feel like it. The physical act of smiling actually makes you feel better even when you're not feeling too positive.&lt;/p&gt;

&lt;h2&gt;
  
  
  Who defines "mediocrity"
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;"Engineering is about making good tradeoffs. Life isn't so different."&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--dpY7BMve--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plbhgvhn15iedzpyzwjj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--dpY7BMve--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plbhgvhn15iedzpyzwjj.png" alt="" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We all have different priorities in life. Every decision we make comes with an opportunity cost associated with it. The decisions we make lead us down different paths. Our path is unique to us as we each have unique strengths, weaknesses and situations. There is no wrong path as long as we strive to be good, do good and better ourselves every step of the way. After all, all paths lead to a single destination. It's up to us to decide what we want to take with us, what we want to leave behind, and who we want to be when we get there.&lt;/p&gt;

&lt;h2&gt;
  
  
  Closing thoughts
&lt;/h2&gt;

&lt;p&gt;We all need goals and we all need to work towards it, whatever it may be. While doing so, it's important to accept our limitations, and not weigh ourselves down with expectations, our own or otherwise.&lt;/p&gt;

&lt;p&gt;Don't let life pass you by. Every moment is precious. So give it the treatment it deserves. Be mindful. Be deliberate.&lt;/p&gt;

</description>
      <category>mentalhealth</category>
      <category>productivity</category>
      <category>career</category>
      <category>learning</category>
    </item>
    <item>
      <title>Does anyone here use an "uptime tracker"? If so what do you mainly use it for?</title>
      <dc:creator>Jameel Ur Rahman</dc:creator>
      <pubDate>Mon, 12 Jul 2021 14:10:16 +0000</pubDate>
      <link>https://dev.to/wanderingsoul/does-anyone-here-use-an-uptime-tracker-if-so-what-do-you-mainly-use-it-for-2kil</link>
      <guid>https://dev.to/wanderingsoul/does-anyone-here-use-an-uptime-tracker-if-so-what-do-you-mainly-use-it-for-2kil</guid>
      <description>&lt;p&gt;Hi everyone,&lt;/p&gt;

&lt;p&gt;I've been working on a side project to build an uptime tracker and I realized I've been making a lot of assumptions on who my users are and what sort of problems I am solving for them.&lt;/p&gt;

&lt;p&gt;I wanted to reach out to the community here and get some of your thoughts.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Do you use an uptime tracker?&lt;/li&gt;
&lt;li&gt;What is it?&lt;/li&gt;
&lt;li&gt;What do you mainly use it for?&lt;/li&gt;
&lt;li&gt;What do you &lt;em&gt;like&lt;/em&gt; the best about it?&lt;/li&gt;
&lt;li&gt;What do you &lt;em&gt;hate&lt;/em&gt; the most about it?&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;You'd think that an uptime tracker would be a simple product, i.e. keep track of your website's uptime and alert you when it goes down. Instead what you find in the market is a host of services that do a lot more than simple uptime tracking. From page SEO, to page performance metrics, to on call services. &lt;/p&gt;

&lt;p&gt;So... what do you really use it for?&lt;/p&gt;

&lt;p&gt;😃 If anyone has any better ideas on how I can reach out to "possible users" and get their thoughts please let me know!&lt;/p&gt;

</description>
      <category>discuss</category>
    </item>
    <item>
      <title>Week 3/4 of building an Uptime Tracker - Thoughts?</title>
      <dc:creator>Jameel Ur Rahman</dc:creator>
      <pubDate>Mon, 12 Jul 2021 14:00:27 +0000</pubDate>
      <link>https://dev.to/wanderingsoul/week-3-4-of-building-an-uptime-tracker-thoughts-5f7b</link>
      <guid>https://dev.to/wanderingsoul/week-3-4-of-building-an-uptime-tracker-thoughts-5f7b</guid>
      <description>&lt;h2&gt;
  
  
  The story so far
&lt;/h2&gt;

&lt;p&gt;I've always wanted to build a SaaS product and I had the great idea of building an Uptime Tracker and doing it in a less expensive and more user friendly way than Pingdom.&lt;/p&gt;

&lt;p&gt;I'm 4 weeks into my journey.&lt;/p&gt;

&lt;h2&gt;
  
  
  The story continues
&lt;/h2&gt;

&lt;p&gt;Week 3 and 4 have been the slowest weeks yet.&lt;/p&gt;

&lt;p&gt;I'm completely off track of my original dev plan.&lt;/p&gt;

&lt;p&gt;✅ Simple visualizations of check results&lt;br&gt;
❌ Triggering Alerts.&lt;/p&gt;

&lt;p&gt;What I did instead, yes I didn't procrastinate &lt;em&gt;completely&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Wrote up my first blog post on dev.to covering how I setup &lt;a href="https://dev.to/jameel263/rails-6-webpacker-and-chartjs-2kek"&gt;ChartJS with Rails6 and Webpacker&lt;/a&gt;. &lt;/li&gt;
&lt;li&gt;Listened to &lt;a href="https://www.indiehackers.com/podcast/212-arvid-kahl"&gt;Courtland's interview of Arvid Kahl&lt;/a&gt; gave me a lot of food for thought.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I've been ignoring the elephant in the room, i.e. what's my USP of my uptime tracker and who would be my target audience. Initially I thought it would be devs since I really wanted to make something dev friendly with better API integrations. But thinking on this further, I had the realization that devs likely don't have a need for an uptime tracker. Instead it's business owners of websites (who could also be devs) that would be my main customer instead. &lt;/p&gt;

&lt;p&gt;I'm a bit unsure where such people would congregate though. Indiehackers who start a website business would definitely be a user. I'm unsure how to validate this.&lt;/p&gt;

&lt;p&gt;So for Week 5 my plans are&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Narrow down who my users are and find a way to validate this.&lt;/li&gt;
&lt;li&gt;I'm not sure I'm ready to pivot on my ideas yet. We'll see though.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Some super useful links I've found so far. Highly recommended for those starting out in the indie hacker career.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Arvid Kahl's interview which I already &lt;a href="https://www.indiehackers.com/podcast/212-arvid-kahl"&gt;shared&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Michell Hanson's series on &lt;a href="https://www.getrevue.co/profile/mjwhansen/issues/finding-people-to-talk-to-you-when-you-don-t-have-any-users-409685"&gt;finding your customers&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Tyler Tringa's series on &lt;a href="https://tylertringas.com/micro-saas-ebook/"&gt;bootstrapping your business&lt;/a&gt;. Specifically his &lt;a href="https://tylertringas.com/good-micro-saas-ideas/"&gt;Meat Grinder approach&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If anyone has any feedback please do send them my way 😃 &lt;br&gt;
I certainly need it 😂&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>showdev</category>
    </item>
    <item>
      <title>ChartJS with Rails 6 and Webpacker</title>
      <dc:creator>Jameel Ur Rahman</dc:creator>
      <pubDate>Sun, 04 Jul 2021 13:54:40 +0000</pubDate>
      <link>https://dev.to/wanderingsoul/rails-6-webpacker-and-chartjs-2kek</link>
      <guid>https://dev.to/wanderingsoul/rails-6-webpacker-and-chartjs-2kek</guid>
      <description>&lt;h2&gt;
  
  
  TOC
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;What this covers&lt;/li&gt;
&lt;li&gt;What prompted me to write this&lt;/li&gt;
&lt;li&gt;Webpacker and Sprockets&lt;/li&gt;
&lt;li&gt;Setting up ChartJS on a vanilla Rails 6 app&lt;/li&gt;
&lt;li&gt;Key Takeaways&lt;/li&gt;
&lt;li&gt;Appendix&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What this covers &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Setting up ChartJS on a vanilla Rails 6 application&lt;/p&gt;

&lt;h2&gt;
  
  
  What prompted me to write this &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;For a long time now I wanted to build an uptime tracker with a  clean developer friendly UX. Having used Pingdom in my workplace I found it quite inflexible and I "think" I can do better. 🤞&lt;/p&gt;

&lt;p&gt;My professional experience was in RoR although pre Rails 6 and still using Sprockets. When building my uptime tracker I wanted to use ChartJS for visualizations and it took me a surprisingly long time to figure out how to do so. So I thought I'd share my findings.&lt;/p&gt;

&lt;h2&gt;
  
  
  Webpacker and Sprockets &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Sprockets is a ruby library for compiling and serving web assets. &lt;/p&gt;

&lt;p&gt;The latest version of Rails (I'm not sure at what point they made this switch) uses Webpacker. &lt;/p&gt;

&lt;p&gt;Think of webpacker as an alternative to sprockets. It makes use of WebPack under the hood to help manage JS in Rails.&lt;/p&gt;

&lt;p&gt;When using JS with Webpacker it's important to understand scope. I still haven't wrapped my head around using webpacker properly yet, but know this, &lt;strong&gt;Webpack does not make modules available to the global scope by default&lt;/strong&gt;. This is part 1 of what tripped me up.&lt;/p&gt;

&lt;h2&gt;
  
  
  Setting up ChartJS on a vanilla Rails 6 app &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Step 1: Vanilla Rails App
&lt;/h3&gt;

&lt;p&gt;Make sure you have rails installed. I generally prefer to use &lt;code&gt;rbenv&lt;/code&gt;. It makes it easier to manage different ruby versions.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Create the app using &lt;code&gt;rails new chartjs-example&lt;/code&gt; &lt;/li&gt;
&lt;li&gt;Let's also setup a simple home page 

&lt;ul&gt;
&lt;li&gt;In your shell run &lt;code&gt;rails generate controller Home index&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Then edit &lt;code&gt;routes.rb&lt;/code&gt;.
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Rails.application.routes.draw do
  root to: 'home#index'
end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;In your shell run &lt;code&gt;rails s&lt;/code&gt; then on your web browser go to &lt;code&gt;localhost:3000&lt;/code&gt;. It should show you an empty page.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe5c2mgnspbou2pd1hgl4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe5c2mgnspbou2pd1hgl4.png" alt="alt text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You now have a Vanilla Rails 6 application with a default home page.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 2: Install ChartJS
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Use yarn (current default with Rails 6) to install chartjs. On your shell run &lt;code&gt;yarn add chart.js&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;You now need to import and register all the ChartJS modules you need to use. Let's assume you need everything. You can go to the file &lt;code&gt;/app/javascript/packs/application.js&lt;/code&gt; add then following &lt;code&gt;import Chart from 'chart.js/auto';&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You need to include &lt;code&gt;import Chart from 'chart.js/auto';&lt;/code&gt; as simply including &lt;code&gt;require 'chart.js'&lt;/code&gt; will not work. You can choose to import specific modules by following the instructions &lt;a href="https://www.chartjs.org/docs/latest/getting-started/integration.html#bundlers-webpack-rollup-etc" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;This is part 2 of what tripped me up for a long time.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 3: Create the chart
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Go to &lt;code&gt;app/views/home/index.html.erb&lt;/code&gt; and add the following
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;canvas id="myChart" width="400px" height="400px"&amp;gt;&amp;lt;/canvas&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;del&gt;We can then create a script tag and instantiate a new chart object to update the canvas&lt;br&gt;
&lt;code&gt;&amp;lt;script&amp;gt; &lt;br&gt;
  var myChart = new Chart(ctx, {...}); &lt;br&gt;
&amp;lt;/script&amp;gt;&lt;/code&gt;&lt;/del&gt;&lt;/p&gt;

&lt;p&gt;No you can't. Like I mentioned before, webpacker doesn't include things in the global scope by default. If you did the above and visited the page, you'd find your console throwing the error message&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Uncaught ReferenceError: Chart is not defined&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Instead you need to do the following&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Add the following lines to your &lt;code&gt;application.js&lt;/code&gt;. As you've imported your ChartJS modules there, &lt;code&gt;Chart&lt;/code&gt; can be accessed within that scope.
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;document.addEventListener('turbolinks:load', () =&amp;gt; {
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: JSON.parse(ctx.canvas.dataset.labels),
    datasets: [{
      data: JSON.parse(ctx.canvas.dataset.data),
    }]
  },
  });
})
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Notice that you've not defined your datasets yet. i.e. &lt;code&gt;labels&lt;/code&gt; (x axis) and &lt;code&gt;data&lt;/code&gt; (y axis). You need to do that using the &lt;code&gt;data-&lt;/code&gt; attributes in html.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Update &lt;code&gt;index.html.erb&lt;/code&gt; and replace the previous canvas line with
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;canvas id="myChart" width="200px" height="100px" data-labels="&amp;lt;%= @data_keys %&amp;gt;" data-data="&amp;lt;%= @data_values %&amp;gt;" &amp;gt;&amp;lt;/canvas&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;Then you can pass your data to your view through your controller leaving the heavy data preparation logic outside your view. In &lt;code&gt;app/controllers/home_controller.rb&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class HomeController &amp;lt; ApplicationController
  def index
    @data_keys = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
    ]
    @data_values = [0, 10, 5, 2, 20, 30, 45]
  end
end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Where &lt;code&gt;data_keys&lt;/code&gt; and &lt;code&gt;data_values&lt;/code&gt; are populated with sample data.&lt;/p&gt;

&lt;p&gt;If you now go to &lt;code&gt;http://localhost:3000/&lt;/code&gt; you'll see your newly created chart.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foks6yix1fo8r2yv722tc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foks6yix1fo8r2yv722tc.png" alt="alt text"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Key Takeaways &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Rails 6 uses Webpacker and Yarn by default&lt;/li&gt;
&lt;li&gt;Webpack does not make modules available to the global scope by default&lt;/li&gt;
&lt;li&gt;Define your Chart inside application.js's scope and pass your data to the js snippet using the &lt;code&gt;data-&lt;/code&gt; attributes&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Appendix &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Since I sometimes really want to see the whole file in a tutorial instead of just the change you need to make.&lt;/p&gt;

&lt;p&gt;config/routes.rb&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Rails.application.routes.draw do
  root to: 'home#index'
end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;app/views/home/index.html.erb&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;h1&amp;gt;Home#index&amp;lt;/h1&amp;gt;
&amp;lt;p&amp;gt;Find me in app/views/home/index.html.erb&amp;lt;/p&amp;gt;

&amp;lt;canvas id="myChart" width="200px" height="100px" data-labels="&amp;lt;%= @data_keys %&amp;gt;" data-data="&amp;lt;%= @data_values %&amp;gt;" &amp;gt;&amp;lt;/canvas&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;app/controllers/home_controller.rb&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class HomeController &amp;lt; ApplicationController
  def index
    @data_keys = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
    ]
    @data_values = [0, 10, 5, 2, 20, 30, 45]
  end
end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;app/javascript/packs/application.js&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import Chart from 'chart.js/auto';

Rails.start()
Turbolinks.start()
ActiveStorage.start()

document.addEventListener('turbolinks:load', () =&amp;gt; {
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: JSON.parse(ctx.canvas.dataset.labels),
        datasets: [{
            data: JSON.parse(ctx.canvas.dataset.data),
        }]
    },
    });
})
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you found this useful please let me know! :D&lt;/p&gt;

</description>
      <category>rails</category>
      <category>webpack</category>
      <category>chartjs</category>
    </item>
  </channel>
</rss>
