My JavaScriptmas experience

At the start of December I received an email from Scrimba inviting me to join their #JavaScriptmas advent calendar. It was a daily JavaScript coding challenge from Dec 1 to Dec 24 with the possibility of prizes. It seemed interesting enough, so I joined. I ended up finishing all 24 puzzles. The JavaScriptmas organisers encouraged us to write about our experiences, so this is what this post is about.

My background

I did a university degree majoring in "computing and software systems", and I've been working as a software developer for a little over a year since graduating. I write a lot of TypeScript as part of my job. This year I did LeetCode's daily coding challenge for eight months, and then I decided to take a break in December. But it wasn't really a break from coding puzzles because I quickly replaced it with JavaScriptmas. There also was another coding advent calendar that I looked at but didn't participate in. So I'll be making comparisons between JavaScriptmas and those other daily coding challenges.

The JavaScriptmas problems

This section contains my submissions and my comments about them.

1: Candies

scrimba.com/scrim/coaff461cbc8f3e5356a4ee31

2: Deposit profit

scrimba.com/scrim/cob954193ae7b53998c8d2be5

3: Chunky monkey

scrimba.com/scrim/coa2240549fe3becc84d42cc0

4: Century from year

scrimba.com/scrim/co619412d9be8d061163d77f3

5: Reverse a string

scrimba.com/scrim/coe874c78be919a07971be850

It reminded me of a gotcha where appending a character n times to an empty string could be O(n^2) time complexity due to the string being immutable (in Java). Maybe it's the same in JS?

6: Sort by length

scrimba.com/scrim/co8c2494d8b82be04c3b781d4

7: Count vowel consonant

scrimba.com/scrim/co1cf4384b347d0fbaf617787

The hint suggested using reduce, which is something I rarely use. I tried it as an alternative solution.

8: The rolling dice

scrimba.com/scrim/co67743bc89b0e96416d6c9cf

This one was notable because it was the first challenge to include html and css as well. I calculated left/top dot offsets required to produce each dice face and stored those in an array.

9: Sum odd fibonacci numbers

scrimba.com/scrim/co2b24c039e4192679bc1975a

10: Adjacent elements product

scrimba.com/scrim/co5b54632ae346dc2dd9ed6f9

11: Avoid obstacles

scrimba.com/scrim/co7224685b35ae7293c3dbaf7

This was where I noticed that I could add some type checking to the editor by adding a docstring like

/** @param nums {number[]} coordinates of the obstacles. */

This is nice because it changes the inferred type of the nums param from any to number[], which helps with autocomplete suggestions. The syntax felt like closure-compiler JS annotations.

12: Valid time

scrimba.com/scrim/coc5548a598da42d4227cca97

13: Extract each kth

scrimba.com/scrim/coa49455d8fa57cd064d5fdd4

14: Maximal adjacent difference

scrimba.com/scrim/co5204f65a4a6ff692e47b6b5

scrimba.com/scrim/co43f4da88280c9723d3a87fa

Another html/css/js challenge. I did the CSS transition bonus because it only needed one extra line.

16: Insert dashes

scrimba.com/scrim/co72f4846b1ee917796d6770b

17: Different symbols naive

scrimba.com/scrim/co96b4ef7ac2329e6c3e6f89d

I wrote three approaches to solve it.

18: Array previous less

scrimba.com/scrim/coc394dc98c6f0d6c570c5108

The suggested solution and my initial implementation had O(n^2) time complexity, but there's also a linear time solution explained here. It would have been nice if this approach had been included as an extension.

19: Alphabet subsequence

scrimba.com/scrim/co98d4be692ae12d833f34f4c

20: Domain type

scrimba.com/scrim/co8114d25bcaaa2326b398569

21: Sum of two

scrimba.com/scrim/co9c14185a2f699305a419d49

22: Extract matrix column

scrimba.com/scrim/co35c4fca843d594664200a36

23: Social media input

scrimba.com/scrim/co56f49adb57d0ebbf5ec312d

Another html/css/js problem. I found that the input event worked better than keydown because it matched the changes to the textarea more closely.

24: Test your agility

scrimba.com/scrim/co4bd443c93d3cea2d8727b9e

A gotcha (that also happened in the stream) was an off-by-one error in the displayed value vs the final user's value.

I set the win threshold to diff < 5 because getting diff = 0 is hard.

Other thoughts

The problems were mostly straightforward. I'd say they're all about LeetCode-easy difficulty (and definitely a lot easier than Advent of Code too). I would have liked a greater difficulty ramp-up, but they acknowledged the low ramp-up in their stream. I found the problems that included html and css more interesting because they were more challenging and open-ended.

I liked how most of the problems had unit tests. I always added more test cases to test other inputs.

I also liked how they walked through the solution to each problem the next day. It's educational. It would be even better if they did this for harder problems. Some harder problems require you to iterate on a solution to make it more efficient, so a screencast format explaining the problem solving process could work well. Plus there's Scrimba's special sauce of being able to pause the screencast at any point and edit/run the code. (But you can't just talk and write code though. Good diagrams help a lot too.)