Lessons learned from joining coding competitions - 2012 vs 2022

In 2011, I took photos in front of Google's Mountain View, California office. Wouldn't it be great to also be able to take a look inside? I wasn't able to do it then. But this thought inspired me to join Google Code Jam a year later (2012). The finals were usually held at a Google office anywhere in the world. This was a great opportunity. Add to that the bonus of winning a big cash prize, getting some swag (Google T-shirt & stickers, etc), and getting recognition for my skills. During that time, I was also trying to learn Ruby, and I thought joining a coding competition would be a great way to practice.

Fast forward to 2022, finally there is a local coding competition that I could join, i.e. StackLeague. I saw the tournament as a means to stay sharp as a developer. With the fast pace of technology evolution these days, I needed to stay on top of the latest trends to remain competitive. 

StackLeague also offered more chances of winning prizes, as there are many events and categories to join. Winners of all levels can win cash prizes, cool swag, and also gain recognition and possibly tech job opportunities. As a bonus for me, I found their ambassador program incentives a good motivation for me to keep my blog alive and updated.

How I prepared for the coding competitions - then and now

Back in 2012, I prepared for Google Code Jam (GCJ) by practicing on past coding questions which they keep in their contest archive. I also took time to learn my preferred programming language back then (Ruby). 

Now with StackLeague, I needed to boost my strategy in order to be in the same league as the younger and more keen challengers. My schedule is packed these days, so I made the most of my time on StackLeague by:

1. Trying out the practice challenges, 
2. Taking on the training courses.
3. Setting up an efficient coding environment, including having the right tools and references (more on this later).
4. Trying out the main challenges multiple times. As of this writing, I've taken 14 bronze challenges (12 failed, 2 passed)
5. Focusing on small wins and alternative ways to win. I knew gaining ambassador status could also win me a cash prize, some swag, and recognition.

Lessons Learned

Here are some lessons I learned so far in joining StackLeague events.

#1 Age doesn't matter

You may think that seasoned developers have an unfair advantage over students, new developers, or career shifters. This is not necessarily the case. If the more mature (a.k.a. "older") developers are not up-to-date with the latest technologies, the newbies can take on them easily. Even as simple as not knowing about the latest features of their preferred programming language could cost them inefficiency. (For example, knowing just the JavaScript of the early 2010's, versus the new features of ES7). 

In the same way, newer developers don't have the upper hand either. Tenured professionals have encountered many algorithmic problems of various kinds, that they have the insight to identify the problem and the solution quickly.

My keyboard has a shortcut key for the calculator. 

#2 Use the right tools

The in-browser code editor has the bare essentials. But having a full-featured IDE provides flexibility in attacking the challenges. 

• IDEs have features that help you focus on the core problem by automating repetitive tasks. Examples: Code completion, API documentation, code highlighting, shortcuts to find variable references, quick text replace, etc.
• IDEs have more detailed logging. This is especially useful in figuring out why some unit tests failed.
• IDEs have a debug mode to step through code and inspect how variable values change. This is very useful for challenges that involve iterations.

Google Code Jam allowed participants to use their own tools. I believe StackLeague allows it as well.

Aside from software tools, specialized hardware may also help. I do not yet have a mouse with extra buttons (though I might buy one in the future). But my keyboard does have extra shortcut keys -- e.g. to quickly bring up the calculator. I found this very handy.

#3 Learn to focus

I have three monitors for my work from home setup. People say this increases productivity. But there is also a negative effect to productivity in that you might be looking at 3 different things, thus distracting you from the main task on hand.

To counter this, while competing in an event, I have only 3 windows open -- one on each screen, and each window is maximized to full screen. 

• Main screen: Code editor in full screen
• Second screen: StackLeague challenge site, also in full screen.
• Third screen: empty browser window for Googling and checking references. 
• Notifications and instant messaging apps are turned off.
• Having background music might help. I find it easier to concentrate when I have Lo-Fi Chill instrumental music playing in the background.

#4 Sharpen the ability to identify problems

The challenges I've encountered so far have been related to combinatorics, Number Theory, arithmetic operations, binary operations, strings, arrays, recursion, etc. Being able to identify the type of problem already wins half the battle. 

#5 Solve it with pen and paper first

I find it easier to understand a challenge by first simulating it with pen and paper. First solving the problem by hand allows me to find a pattern quickly.

In it to win it

When I joined Google Code Jam in 2012, I didn't pass the qualifying round that year. I either I ran out of time, or couldn't get the code to work for the larger data set. But I just kept practicing and I just kept joining in succeeding years (until 2014). This year as I compete in StackLeague, I will approach it with the same persistence and consistency, but with additional strategies. Join me!

Top StackLeague Challengers for April Competed in Playoffs

StackLeague Monthly Playoff - April 30, 2022

Seventeen (17) challengers competed in this month's (April) qualifier round. The top qualifier for March took the top spot again in this month's StackLeague Playoff. Meanwhile, two new challengers won a spot in the April qualifier pool.

What is StackLeague Playoffs?

StackLeague is the first year-round programming tournament in the Philippines. Joining the tournament is free and open to all programming students, enthusiasts, and professionals. Participants solve various coding challenges to gain ranking and earn prizes. Every month there is a qualifier round open only to the weekly top 10 challengers for the month.  

Why join the StackLeague tournament?

There are many prizes and opportunities to network and find career opportunities. For starters, there are three (3) challenge levels -- Bronze, Silver, and Gold. Completing a level for the first time will earn you a corresponding prize:

• Completing Bronze level will earn you ₱ 100 prize.
• Completing Silver level will earn you another ₱ 100 prize.
• Completing Gold level will earn you ₱ 300 prize.

Additionally, being in the weekly top 10 on the leaderboard earns you an exclusive invitation to the monthly playoffs. There you can compete for a spot in the qualifying pool, and earn prizes:

• Top 1 winner: ₱ 5,000 prize.
• Top 2 winner: ₱ 3,000 prize.

Results of the April Playoffs

The StackLeague playoffs Zoom meeting was by-invitation only. But portions of the program were streamed live on YouTube:

• 10am - 11am: opening program
• 3pm - 4pm: closing program & recognition of winners

The official competition timer started at 10:30am. Challengers had to solve four (4) challenges of varying difficulties in the alloted 5-hour period. But it seems the high-performing players didn't need that much time, as many of them quickly climbed the leaderboard within minutes. Here is a rough timeline of how the leaderboard changed during the competition:

• 10:30am - everybody starts with 0 score
• 10:34am - 4 minutes into the game, Clyde and Lance grab the top 2 spots, with 10pts each.
• 10:39am - after 5 more minutes, John Eric Estrada already overtook Clyde at top place, while  John, Arvin, and Deniece snatch the 3rd, 4th, and 5th spots respectively, leaving Lance at 6th place.
• 10:42am - 11 of the 17 participants have already submitted at least one challenge solution. Lance grabs the 3rd place from John. Meanwhile, I just finished my first challenge, securing myself at 12th place.
• 10:44am - Eric Ramirez and Cyril Paolo Quitevis suddenly grab 4th and 5th place respectively.
• 10:52am - it's a tight race among the top 10 players, as these are the same top performers in the weekly leaderboards. Cyril rises to 2nd place, with only 4 points separating him and John Eric.
• 11:04am - while John Eric Estrada is still in 1st place, he's taking a bit longer to submit his next challenge. Meanwhile, Eric Ramirez climbs back to 3rd place, having previously dropped to 7th place.
• 11:11am - Eric Ramirez steals the top spot from John Eric Estrada. By this time I decided to focus on my next submission, so I wasn't able to watch the leaderboard for a few minutes.
• 11:38am - John Eric Estrada locks in his win for the day by achieving 100 points. 
• 12:06pm - the people at 5th place and below are slowly and quietly trying to regain their ranks, as by this time everyone is working on the more difficult challenges.
• 12:12pm - Eric Ramirez surprisingly rises back to 2nd place from 5th, and locks in his win with 100 points. Cyril Paolo Quitevis gets a breakthrough as he rises from 7th to 3rd place. 
• 12:46pm - by this time, the 1st to 4th places were pretty much locked in, each of them having gained 100 points already. The 5th place was also very close at 92.5. (Wow, do these beasts even eat lunch? 😅 )
• 12:53pm - while others were presumably taking a break (as there were no changes in their score), Arvin Tan sneaks in and secures 5th place with 100 points.

By around 1pm, I have also submitted 4 solutions, but I only perfected 2 of them. Nevertheless, resubmitting a challenge is allowed, for as long as you have not yet opted to "Finish" the playoff itself. So I tried to increase my score by improving my solution and resubmitting. By 2:44pm, I decided I've reached my limit for now. I guess my consolation is that in this playoff, I was 1 place higher than Danielle Meer, who is a consistent first-placer in the overall StackLeague leaderboard.

Recognition of the Winners of the StackLeague April Playoffs

John Eric Estrada won last month's playoffs, and he won again this April. Since he is already in the qualifier pool, the person next in line will get the spot. Eric Ramirez is automatically qualified, having finished at 2nd place. The qualifying spot was given to 3rd placer, Cyril Paolo Quitevis. When interviewed, Cyril shared that he found the final challenge very tricky. He had difficulty in solving it until he had a light bulb moment and finally understood the context of the problem. Looking back at the timeline, it seems that this Eureka moment occurred at around the 12:12pm mark.

Cyril also shared that the playoffs were a lot of fun, and adviced his fellow challengers: "tiwala lang" (have faith that you can do it). This was Cyril's first time to earn a spot in the qualifier pool, yet he already scored 100 points.

Better Luck / Practice Next Time

While some luck may be involved, for example in terms of the time factor (fastest to submit wins), winning StackLeague challenges depends more heavily on preparation and practice. 

StackLeague itself provides helpful resources so that challengers can improve their skills.

• The website has training courses to help prepare contestants to earn the most prizes.
• Just this April, mentorship sessions were also conducted, where Gold-level challengers helped beginners on how to level up.
• StackLeague also offers practice tests to help prepare for the actual challenges.
• Once you have unlocked at least Bronze level, you can take and retake challenges as many times as you want. Don't worry about not appearing on the leaderboard for now. Just be consistent in practicing, failing, and learning, and you will be in the top ranks soon.

Join StackLeague now!

15-minute PWA with Glide (Method 1)

What is Glide?

Glide is a freemium online tool for creating a progressive web app whose data is backed by a Google Sheet. The tool has an easy to use visual interface for designing your app. Screen elements are highly customizable and has beautiful styles. I'd rather show you than just tell you, so let's dive in.

Making a Glide App 

The fastest way to create a Glide app is to use pre-made templates. I shall call this "Method 1". In another post, I will share the 2nd method, which is to start with a Google Sheet.

Step 1: Register for free

Sign-up for free to get basic features and limits.

Step 2: Select a Template

Browse for free templates. For this example, let's use a simple budget tracker. Click on the template, then on the next screen, click "Copy app for free".

Step 3: Customize the UI

Upon copying the app, you will be directed to the layout editing screen. The left panel allows you to navigate between the tabs in your app. The middle panel shows a preview of your app, and also allows selection of specific UI elements on the app. There are icons at the bottom to switch from play (preview) mode or select mode. Finally, the right panel provides various customization options for the selected component.

There's not much to customize anymore with a pre-made template. But here are a few minor tweaks you can try:

1. Try changing the color theme. Go to Settings by clicking the hexagonal nut icon at the top. Select Appearance. Then customize the theme, accent color, typography, and others.
2. Show, hide or add a tab. Go back to app preview by clicking the mobile phone icon. On the left panel, hover over a tab and click the eye icon to show or hide that tab. Or click the plus icon to add a new tab.
3. Change the layout of a tab. This could potentially be a drastic change, so try it out on a new tab, rather than the pre-existing Home, Expenses, and Categories tabs. On the left panel, select one of the layout styles: List, Tiles, Calendar, Map, Checklist, Cards, Swipe, and Details.

Step 4: Customize data  

Again, with a pre-made template, there's not much to customize anymore with the data. You can use the sheet as is, and it would work just great. But if you're interested, you can click on the spreadsheet icon at the top to view the data table behind your app. You can even find a link to the actual Google Sheet at the bottom left.

Step 5: Publish

Once you're satisfied with the customizations, it's time to see the app in action. Click the Publish button at the top right. You will then get a link and QR code for your app. You can customize the link to make it more memorable, if you want. The app is best viewed on a mobile device, so try scanning the QR code with your phone to open the app in your mobile browser. (If you open this link on a desktop browser, the app will take up only about 1/3 of the page. The rest is a link and QR code for sharing the app, and also a link to copy the app.)

Real-life applications

Personally, I've used Glide to boost my productivity. Specifically, I've created:

1. An app launcher specifically made to fit in Vivaldi's side panels for quick access.
2. An online event management app to manage attendees and the event program.
3. A team task tracker.
4. A mobile notifications center -- with some integrations with MacroDroid and Google Apps Script.
5. And many more possibilities

What would you create with a powerful tool like this? 

*All user interface content shown in screenshots are fully owned by Glide.