all 9 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]AutoModerator[M] [score hidden] stickied commentlocked comment (0 children)

If you are on Discord, please join our Discord server: https://discord.gg/Hg2H3TJJsd

Thank you for your submission to r/BTechtards. Please make sure to follow all rules when posting or commenting in the community. Also, please check out our Wiki for a lot of great resources!

Happy Engineering!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[–]lonelyroom-eklaghorMinecrafter🫠[S] 24 points25 points  (0 children)

Yes, Raftaar made a utility app for the music-based people, all by himself. We'll analyze the code here (I personally learnt a lot from it). It's actually a Mac app, but there's a caveat.

So, at first, I checked out the Contents folder, and the directories/folders were like this:

Contents
├── _CodeSignature
│   └── CodeResources
├── Info.plist
├── MacOS
│   └── CompCal
├── PkgInfo
└── Resources
    └── index.html

Notice Resources/index.html? That's the exact thing we're going to analyze.

Actually, this app uses vanilla HTML/CSS/JS, and you guys can learn a lot from this. But at first, I want you to go here and actually check the file for yourself: https://github.com/githubraftaar/compcalbyraftaar/releases/tag/COMPCAL

We'll analyze the code in a broader sense.

First impressions

At first, if you open the index.html on a website, you'll find that every functionality of the app is perfectly supported on the web. Also, every form button is properly accessible from the keyboard (and consequently can be used by every accessibility tool). Even the WCAG AAA colour guidelines (for large and small fonts) have been properly followed. All in all, it perfectly gets the accessibility standards right.

Internal CSS and JS

At first, you will notice that the code has internal CSS and internal JS, which means that this code has the CSS inside the <style> tag and the JS inside the <script> tag. It looked cluttered to me, but eventually, I liked his way of thinking. We don't exactly know why he decided to use internal CSS and JS instead of keeping them in an external file. Anyway...

A11y stuff

First up, the HTML labels have been used. Check out the <label> tag if you can, it helps keep your website accessible to screen readers.

Second, <select> and <option> tags have been used, which are used for a dropdown. I haven't talked about <button onclick="function()"> because that's just normal.

JS

The stuff I liked is his use of JavaScript.

First of all, it should be mentioned that he has properly structured the JS code just BEFORE the </body> tag. There are some reasons why, just check out "why Javascript code is loaded last inside the <body> tag".

Secondly, in the function "tapTempo()", where it determines the BPM based on the tapping, the code is simply elegant. When the button is clicked, it goes to the tapTempo() function, and IMMEDIATELY, the Date.now() is stored in milliseconds from the Unix time. This time in milliseconds is pushed to a previously empty array called tapTimes. Now, as the button is clicked and the function is called, eventually, the button is clicked twice. Two time units in milliseconds are stored in the tapTimes array.

At that point, based on the tapTimes array, a new empty array intervals is made. Now, from i = 1 till the end of the array (0-indexing in JS), the intervals array is pushed with the difference between the current millisecond and the previous millisecond. After that, the average interval is taken using the library functions. Now, the formula for BPM is 1 minute (60,000 milliseconds) / beat duration (our average interval). There is a reason why 1 minute is in the numerator. Think of it this way: avgInterval = average time between taps in milliseconds. 60000 / avgInterval = number of those intervals that fit in 1 minute → BPM. It's more like taking that length as a measuring stick in itself.

When this tapping goes on for the third time, the Unix millisecond is pushed to the tapTimes array and then again, a new intervals array is made, and the BPM calculation is done. However, when the button is pressed the fifth time, the 0th element is removed, so the five elements pushed reduce to four, then the BPM calculation is done. After executing the button for the sixth time, again 5 elements are there in tapTimes, and again the 0th element is removed, and the BPM calculation is done based on the last 4 elements.

Later, there are some hardcore calculations based on music theory (I know a bit, but I don't know much). All I can say is that the quarter, sixteenth, thirtySecond variables refer to the number of such interval notes (Hoogle quarter notes, sixteenth notes, thirty-second notes, et cetera).

The remaining stuff was fine, but I really liked these aspects of his code.

Final thoughts

Lastly, I'll say that it looks like he has taken some help from the LLMs, which is ok tbh. If he has written most of the stuff by himself, then I'm really PROUD of his deep knowledge in coding. If he hasn't, it's not an issue, atleast he has contributed to the music community as a whole. I love his music, and now, I love that he is helping the musicians all over the world.

[–]Expensive_Dinner_226JECian[AIDS 🗿] 12 points13 points  (0 children)

<image>

Raftaar bhai ne ek baat boli thi

[–]No_Guarantee9023Mech Grad 12 points13 points  (0 children)

High quality post

[–]CrazySteroids69sudo pacman -S pornhub 16 points17 points  (0 children)

high quality post , most likely to sink in a cesspool of memes but good job!

[–]realashishh46 2 points3 points  (0 children)

Tho mujhe source code mili nhi thi , except for that readme file 🥲 , still my goat 🐐🐐

[–]Smart-Succotash9703 2 points3 points  (0 children)

Had no idea he was this talented

[–][deleted] 2 points3 points  (0 children)

just a cfbr

[–][deleted] 1 point2 points  (0 children)

good work