Fastest Dev in the Cloud: Using JHipster and AWS for rapid application development

 Summary: How to become the fastest dev in the cloud:

1. Use a rapid development platform. In this blog, we will use JHipster for Java.
2. Use a cloud-based IDE. We will use Cloud9 on AWS.
3. Use AWS cloud resources to deploy your application. For demo purposes, we will just use EC2

Background: Why I wish I had this technology 10 years ago

We were developing an analysis and visualization platform using Google Web Toolkit. After more than 2 years of development, most of the functionality was already implemented. Suddenly, there were internal changes in the client's organization -- management changed hands. The new management had a preferred off-the-shelf analysis software, with much better performance and visualizations.

As a result, we worked really hard to throw in additional fancier charts and other features. We worked triple and quadruple shifts to get something working that could compete with the off-the-shelf solution. We couldn't compete, because the technology to create a comparable web-based solution simply didn't exist back then.

We lost. Two years of work on an app that would never be used. If only we could've shortened the development time.

Other challenges of software development projects:

1. Obsolete even before going out to market
1.  Too much effort and time needed to implement even basic features
2. MVP is too raw 
1.  Security is not there
2.  Some basics are not there
3.  Either UI is beautiful but lacking many features, or features are complete but UI is ugly
3. Performance is poor
1.  quickly runs out of hardware resources

Fast forward to today. We now have JHipster and AWS.

This is the kind of development toolkit that we want:

1. Quick to develop with the best practices already baked in
2. Easy to customize
3. Cloud-ready
4. Allows the dev team to focus on the more complex functionality

JHipster as a rapid development platform has the following components that speed up development:

1. Code generator to auto-generate boilerplate code. It can also auto-generate code for entities, repositories and services, given a domain model.
2. Coding conventions. The project it generates follows a certain set of standards and common configurations, so that you don't have to spend time deciding on which libraries and tools to use, etc. 
3. It offers integrations with various cloud platforms for easy deployment

JHipster x AWS development process:

1. Setup cloud IDE
2. Generate boilerplate
3. Domain diagram
4. Generate domain code
5. Write custom code
6. Deploy to cloud

Setup cloud IDE (Cloud9)

1. Create IAM user. The procedures for doing this yourself are out of scope of this post for now. Below are the permissions you can ask your AWS administrator to add.
1. This IAM user should have permissions for the following AWS services:
1. EC2
2. S3
3. RDS
4. Cloud9
2. Depending on your desired deployment method, you should also add permissions for the following services:
1. Elastic BeanStalk
2. ECS 
3. ECR
4. Lightsail
3. Enable both AWS console login and AWS CLI
4. Create access key for use with AWS CLI 
2. Create Cloud9 environment. For this post, we'll create a Cloud9 environment in the us-west-1 region
1. Go to Cloud9 service in the AWS console
2. Click create environment
3. Set a name. Description is optional. 
4. You can leave other settings as is. Recommendation: choose t3a.medium instance type so that tests will run faster.
5. Click Create environment. Wait for the IDE to load.
3. Install additional tools. The IDE has Java, Node, npm, docker, and Git. If you plan to use Docker to deploy and run your application, there are additional steps to take.
1. The docker installed on the Cloud9 instance needs to be replaced with one that has the Cloud Integrations. To do this: (source)
   
   

   curl -L -O https://github.com/docker/compose-cli/releases/download/v1.0.17/docker-linux-amd64

   mv docker-linux-amd64 docker

   chmod +x docker

   sudo ln -s /usr/bin/docker /usr/local/bin/com.docker.cli

   ./docker --context default ps

   sudo mv docker /usr/local/bin/docker

   bash

   docker version

   
   
2. Docker compose also needs to be installed:

sudo curl -L "https://github.com/docker/compose/releases/download/v2.10.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

sudo chmod +x /usr/local/bin/docker-compose

docker-compose --version

1.  

JHipster Setup

Use the Cloud9 terminal to setup a JHipster project:

1. Install jhipster-generator:
   
   npm install -g generator-jhipster
   
   
2. Run JHipster generator. This can be done either interactively or with parameters. First create a project folder, go into the folder, then run jhipster.
   
   mkdir jhipsterdemo
   cd jhipsterdemo
   jhipster
   
   
3. Build and test. The project comes with maven as well as npm with a package.json that contains the most common scripts. Build by either running ./mvnw or npm run app:start
   
4. View the running app in another tab.
   You can use the Cloud9 URL: https://{id of cloud9 instance}.vfs.cloud9.{region}.amazonaws.com
   Or you can use the public URL of the Cloud9 IDE's EC2 instance

Note: when testing the application, you may encounter issues in signing in or registering a new user. The cloud9 terminal may show this error message:

Unauthorized: Full authentication is required to access this resource 

This may be caused by the CORS config blocking access to the app. For testing purposes, you may add the test URLs to the allowed origins under the CORS config.

Config file: /src/main/resources/config/application-dev.yml

Config to update: jhipster -> cors -> allowed-origins

Domain code development:

1. Design the domain in JDL studio
2. Export JDL file from studio and import to Cloud9
1. In JDL Studio, you can find the download button at the upper right.
2. In Cloud9, go to File -> Upload Local Files. Then select your JDL file.
3. Generate code from the jdl file:
   
   jhipster jdl jhipster-jdl.jdl
   
   
4. Extend generated code with custom code. Create Java classes and methods as needed. 
5. Re-build and test. Same commands as above. Recommended: clean the project first with ./mvnw clean

Deploy to AWS:

There are many options to deploy your project. For this exercise, we will deploy to EC2.

1. Create a new EC2 instance through the AWS Console. 
1. Name your instance
2. AMI: choose Amazon Linux (under Quick Start)
3. Instance type: choose t3.small
4. Key pair name: jhipsterdemo. Make sure to save the pem file to be used to ssh into the EC2 instance.
5. Security group:
1. Allow SSH traffic
2. Allow HTTP and HTTPS traffic
6. Click Create instance
2. Update the security group to allow inbound traffic to port 8080. (For now, we will deploy the app with the dev profile. For production, use the prod profile.)
1. View the EC2 instances. Then select the instance you created.
2. Click the EC2 instance's Security group
3. Click edit inbound rules
4. Add a rue for:
1. Type: Custom TCP
2. Port range: 8080-8089
3. Source: 0.0.0.0/0
5. Click Save rules
3. Start the EC2 instance
1. Copy the EC2 instance's private IP address. You will use this for ssh
2. Copy the EC2 instance's public IP address. You will use this for viewing the deployed application.
4. Perform the rest of the steps in Cloud9 IDE
5. Upload the pem file to Cloud9. Note: make sure you save it outside the project folder, so as not to accidentally commit it to code repository. 
1. Set the right permissions on the pem file: chmod 400 jhipsterdemo.pem
6. Generate a jar file with (back inside the project folder): npm run java:war:dev
7. Copy the jar file into EC2:
   
   scp -i jhipsterdemo.pem ./target/{your_project_jar_filename}.jar ec2-user@{your_ec2_internal_ip_address}:~/
   
   
8. ssh into the EC2 instance, then install a JDK
   
   ssh -i jhipsterdemo.pem ec2-user@{your_ec2_internal_ip_address}
   sudo yum install java-17-amazon-corretto-jmods.x86_64
   
   
9. Run the application (still inside the EC2 ssh): java -jar {your_project_jar_filename}.jar

What we've accomplished:

1. Complete development environment setup in the cloud
2. Generated code for major functional & non-functional requirements
3. Rapid conversion from domain diagram to code
4. Deployment to cloud

What next?

1. Go to jhipster.tech to learn more about what you can do with JHipster
2. Let's connect for further mentoring: https://bit.ly/elielgoco

 

Journey from Developer to Manager (July 6, 2022 Webinar)

 Last July 6, 2022 I shared about my journey from developer to manager in the regular StackLeague webinar sessions.

The Webinar is now a Podcast

The webinar is available on YouTube. But I'm also editing the recording into a podcast series. You can listen to the podcast here (requires email login). Bonus: I have more free stuff coming to that app in the next few weeks.

By the way, when I say editing, I mean heavily editing, as I noticed in the YouTube video that I seem to be gasping for breath a lot (due to my asthma). So thanks to Audacity software for enabling me to clean up the audio. 😅

Listen to the Podcast Here

Talk Highlights

Anyway, In the webinar, I shared insights on some important topics:

1. The twists and turns of an IT career path, as seen from my own experience
2. A day in the life of a developer, compared to that of a manager's
3. Broad overview of the kinds of things that IT managers handle
4. The three dimensions of career fit, and why your passion might not be the same as your dream job
5. The phases of every software engineer's career, highlighting that it's never a straight up-trending line. There's a climax and more importantly, a decline.
6. How to extend your career growth, or at least delay your career decline.
7. How, in a way, you're already doing managerial tasks but in a smaller scale. Also how to scale that up to fully become a manager.
8. Three motivational tips on how to progress in an IT career.
9. Frequently asked questions about the software engineering and management careers.

You will be able to more clearly hear these sub-topics as individual episodes in the podcast. Plus I will add 1 or 2 more bonus episodes so that you can learn more on this topic.

Answering Audience Questions

In the webinar, I also answered a few questions from the audience. You'll hear my answers in the YouTube recording or in the podcast. But I thought I'd give a fresh take on the questions here. Plus answer other questions from the audience that I wasn't able to answer then.

Q: How was it being a manager during the pandemic?

A: 

This is from my perspective as one with a technical background. I found it both easier and harder to be a manager during the fully remote/ WFH phase of the pandemic. Back when we were all in the office, I found that I was getting pulled into ad hoc meetings more frequently. This is true especially in an open layout office. 

With the remote WFH setup, I found I could have more focus time as meetings ended more quickly. People couldn't see you throughout the day, so their only basis for your availability is your calendar (or instant messaging). So I could block off focus time on my calendar.

The other side of that coin is that I found it harder to collaborate and coordinate with my team. They could be offline on chat just when you need them most.

Q: In your perspective, what is the difference between being a manager and developer in terms of workload?

A:

Architects and managers deal more with broader, bird's eye view perspective of things. Developers deal more with the minute details, and low level analysis. 

Q: As a manager, do you still make time for coding or do you code in your spare time?

A:

Yes. This is one reason why I joined StackLeague. I also mentioned in the webinar that I code automation scripts behind the monitoring spreadsheets that I use for my teams.

Besides this, I'm also learning low-code/ no-code application development (as you might observe in my past blog posts). I'm developing a couple no-code apps for my church and for my part-time business (click the link to my podcast to see said app in action). I believe this helps me adapt with the changing industry and will help me stay relevant even if my Java skills become less in-demand.

Q: What was your favorite project, and how did you approach it?

A:

I have many favorites for different reasons. Centerpoint is a favorite project because it's the first SaaS product that I architected from the ground up.

Q: What excites you about the future of web development?

A:

This is one great thing about being a technical manager. You can experience different projects without having deep knowledge of specific technologies. Having deeper knowledge of technologies certainly helps you navigate the more difficult project issues. 

But not having the knowledge doesn't disqualify you from being part of the project. I've led projects with technologies ranging from Node.js, Angular, React Native, Microsoft Bot Framework, AWS, Java, and more.

Whatever the technology, you can still manage the project, since you will be relying on the team to the legwork. And they will be relying on you to keep the project parameters stable so they can work in peace.

So it's true that it's exciting to encounter new web development technologies in different projects. What's not exciting sometimes is the difficulty in hiring the right people for the job. 

Q: Do you have any tips on how to build your development team?

A:

In building a team, I like to think of myself as Nick Fury choosing his Avengers. They should be highly skilled, have useful specializations, and blend well together. But they also need to have their own opinions, have the courage to disagree, and not just nod to everything their teammates or manager says. They need to be independent and innovative thinkers. Yet they are humble and always considerate to their teammates.

If you have any additional questions for me on this topic, feel free to email me. (Email address in about page).

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!

StackLeague Challengers Find May '22 Lightning Round Nerve-Wracking

 StackLeague Lightning Series - Bronze Category - May 24, 2022

I was able to join the Bronze Lightning Round for the month of May, together with seven other challengers. It was both exciting and nerve-wracking for everyone, as we all raced to finish two Bronze-level challenges within just one hour. 

What is the StackLeague Lightning Series?

Lightning Series are a by-invitation competition open only to challengers from the same Challenger Level. Gold-level challengers are disqualified. The Bronze Category is open only to Bronze-level challengers.

Why join the Lightning Series in addition to the other challenge categories?

The Lightning Series offers yet even more opportunities to win cash prizes and swag. The top 2 winners for Bronze Category will each receive ₱ 1,200 cash prize and a StackLeague T-shirt.

Results of the Lightning Series

The entire program was streamed live on YouTube. The official timer started at 6:30PM. Challengers had to solve two Bronze-level challenges within one hour. Below is a play-by-play coverage of the competition:

• 06:30PM - Only 6 players were on the leaderboard at first. Two other players seem to enter the challenge a little late.
  
                  - At first I was a little relieved that there were only 2 challenges to tackle. But upon reading both problems, my mind was panicking a little bit in trying to comprehend the problems and choose which one to solve first.
  
  
• 06:31PM - All 8 challengers were now on the board, all at 0 points.
  
                   - I've decided to work on the second challenge first, which I think was related to binary arithmetic.
  
  
• 06:34PM - Rankings still haven't moved with everyone still at zero.
  
                  - The clock is ticking, and I had to force myself out of my analysis paralysis. I started coding a naive solution, just to find momentum.
  
  
• 06:38PM - Still no change in rankings. So I thought I still have a chance to get ahead of everyone if I could just solve this one problem quickly. But then a challenger finally breaks through...
  
  
• 06:39PM - Finally Efren Mercado Jr secures the top spot with 50 points (1 out of 2 challenges solved).
  
  
• 06:44PM - Efren finishes both challenges and gets 100 points while others were still at zero points. It's now a battle for the second place.
  
  
• 06:48PM - My solution for problem number 2 worked with the small unit test but failed with the larger test data set. I couldn't figure out how to optimize my code. Maybe I should move on to the other problem, so that I can still beat the others for second place.
  
  
• 06:57PM - Aloever Dulay finishes his first problem (50 pts) and takes the second place.
  
  
  
• 06:58PM - Albert Francisco follows at 3rd place with 50 points as well.
  
                  - I tried to shift to problem #1 for a bit, but decided to go back to problem 2. At this point, I was just trying to at least not end with zero points.
  
  
• 07:05PM - I finally get a breakthrough with Problem #2. It turns out attempting to perform bitwise operations was naive, and had I known to do a simpler boolean operation, I would have finished earlier.
  
  
• 07:06PM - The leaderboard now has the first to fifth places filled: With Efren at 1st place (100pts); Aloever, Albert, and myself (Eliel) at 2nd, 3rd, and 4th places respectively (each with 50pts); Lorie Lie Cubid took 5th place with 13.64 points.
  
  
• 07:08PM - Albert Francisco finishes his 2nd challenge and snatches second place from Aloever. I started to work on the next challenge that apparently had to do with calculating pairwise distance.
  
  
• 07:14PM - Aloever increases his score to 54.55 and remains at 3rd place. No score movement for myself and the others.
  
  
• 07:15PM - Aloever finishes his second challenge and gains 100 points, securing 3rd place.
  
  
• 07:17PM - At this point the other challengers can actually give up, since only first and second place will get prizes. 
  
                  - But I pushed on, and I picked up my notebook and pen to draw and better visualize the challenge scenarios. I should've done this much earlier!
  
  
• 07:23PM - Jigger John Mendeja finally breaks through and scores 50 points (6th place)
  
                  - With only 7 minutes left, I hacked on, having gained clearer perspective of the problem.
  
  
• 07:24PM - I ran my code on both small and large data set, so that I could at least raise my score a bit more if it passed at least some of the tests if not all.
  
  
• 07:25PM - Only 5 minutes left, and I was still trying to figure out why the sum returned by my code was off by 4 compared to the expected answers.
  
  
• 07:26PM - I just subtracted 4 from my final answer - it worked! I finished both challenges and got 100 points at 4th place.
  
                  - There were no more score movements for the other challengers. Either they already gave up, or were still trying to solve the challenges.
  
  
• 07:30PM - The timer ends with Efren at 1st place and Albert at 2nd place. As for me, at least I wasn't last, and at least my score was 100.
  
  

Recognition of the Winners of the StackLeague Bronze Lightning Series

When interviewed, second place winner Albert Francisco laughed. "Nakakatawa lang... nanginginig kamay ko hanggang ngayon." He was still trembling due to the pressure and excitement of the Lightning Round. When asked what tips he would give to fellow challengers, he said, "Mag-isip muna talaga, wag muna agad code." Albert encourages challengers to think hard about the problem before diving into the solution. The first solution you come up with might be complicated, but when you try to first clarify the logic involved, a simpler solution will come to you. "Isipin muna ang algorithm tapos saka na i-code."

Efren Mercado Jr, a little bit more composed, said that he had fun with this round. He found the questions tricky but the solutions turned out to be simple. Efren suggests starting with the easier challenge first. The way the problem is stated is sometimes complicated to distract you from the real problem. In the end, the solution will be simple if you focus on the real meaning of the problem. Efren is already a professional and is already well-versed in coding.

What's next?

The May Playoffs happened on May 28, though I wasn't able to join this time. StackLeague offers many other ways to practice and improve coding skills. So just keep practicing, keep improving, and keep your eyes on the goal -- whether that goal be winning the cash prize, finding job opportunities, or improving your skills.

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!

CREATION, COLOR, AND CODE

 The tech industry has significantly changed the world-- from William Henry “Bill” Gates III coding tic-tac-toe games and creating the MS-DOS or more commonly known now as Microsoft Windows, to Margaret Hamilton developing the in-flight software controlling the Apollo command that created a new era for space exploration. However, multiple challenges are faced by the industry in encouraging the younger generation into coding as there are multiple misconceptions as to why coding and programming are difficult and expensive professions. The hurdles of accessibility and inclusivity are the most common problems that hinder more younger people from getting into coding. Low-code development is one of the foreseeable solutions to these hurdles.

LOW-CODING TO THE YOUTH

Lyndsey Scott mentioned how Low-code is a gateway into creation and accessibility as she talked into Creatio’s Low-Code Marathon, a series of talks guiding IT and digital leaders into kick-starting their digital-first organization with the use of low-code/no-code technology with the assurance with success and positive results. Anyway, to begin with, what really is low-code/no-code technology? Low-code is a new and modern visual approach to software development. Different platforms, including Creatio, provide various methods in aiding companies and even non-programmers in creating and building custom applications in the cloud. Its highlight is its Visual development environment and different methods offered by the platforms, such as drag-and-drop methods helping to build the apps smoothly. The lifecycle of the application can be abstracted and automated within its every step, which breaks traditional processes, systems, and programs of business and IT. Lyndsey Scott described that Low-code is a means to an end and something that everyone in the industry will be doing at one point.

Now, how do low-code platforms help the people out of the tech industry and the younger generation who may be interested in coding get into tech? Low-code is so accessible and is uber easy to use that multiple YouTubers have created trends in creating 30 apps in 30 days with the use of these methods. Low-code makes working and developing agile since it is faster to build apps with low-code and the pre-built modules in its visual environment. This also gives the advantage of making low-code a method that is easy to learn and get used to. Low-code platforms make their methods easy to use and develop any idea anyone has. The younger generation is composed of children who were exposed to technology as soon as they were born. The age of social media platforms such as Facebook, Twitter, and Instagram, and the age of accessible computer gaming from games such as Minecraft and Roblox is enabling this younger generation’s immersion towards technology and modernity, which then leads to IT and development. Their creativity and innate nature towards technology, being digital natives, makes them ahead of their time or the time of the older generation. Low-code can be the gateway of the youth to get into IT development.

LOW-CODING AND THE TECH INDUSTRY

Lyndsey Scott said something about Low-code and its effects on the industry. She narrated that Low-code is easy and quick, even saying that “the code of today was the low-code of yesterday and the low-code of today is the code of tomorrow. What does she imply with this, and how is this even possible? Low-code development enables the creation of apps in less time compared to traditional code development. Time becomes a friend with low-code since development only takes days and even minutes to innovate. It also creates the opportunity of the arising of citizen developers. Changing app characteristics and functions are also quick in Low-code development as it does not require complex coding. If something needs changing, Low-code easily delivers. The rise of low-code platforms can mean faster transformation for the IT and development industry. Limiting the complexity in building and innovating means transformation, creativity, and doing the impossible is ever yet the most possible thing through low-code.

Not only does low-code have a significant effect that brings an advantage to the IT and development industry, but it also changes everything for the business sectors. Low-code can be made quickly, applied, and implemented efficiently, and typically costs much less than creating a development operations team in a company. Companies that developed apps such as Snapchat and Pokemon Go rely on the technology and methods of Low-code development. This is also one factor wherein it has greatly affected the apps’ virality, or basically, its fame. Snapchat and Pokemon Go make use of Google Cloud, one of the many low-code platforms, which enable the apps to connect to other Google apps. This creates a certain functionality of multiple-use and smooth-sailing experience for the regular user. This is one of the many benefits that low-code development provides, a great customer experience. App Developers easily adapt and change to the customer’s wants and demands because of the uncomplicated and smooth methods that low-code provides. This method of development is revolutionizing the software industry by making the process of learning to innovate and develop much easier and much speedy. This implies that software development will become simple, quicker, and effortless, which makes the IT and development industry accessible as it should be.

LOW-CODE AMIDST THE PANDEMIC

Low-code can develop various applications, from portals and web applications, Back Office applications, and Mobile Applications. What does this mean to the various sectors and businesses? Low-code can be a solution, or to Lyndsey’s words, “a means to an end.” It can be instrumental in terms of functionality towards management, information processing, and even internal and external affairs in a company. Not only is Low-code used in these situations, but it can also be used towards decision-making which allows users to design and create automated workflows which can reach multiple information systems.

Low-code development, being agile and easy to use, can serve as tools and a piece of machinery in solving the world’s modern-day problems. Lyndsey Scott mentioned that her love for programming, IT, and development not only translates to her work but also in the types of projects that she takes on. She mentioned that she is currently working on a project that is dealing with the creating of COVID-19 vaccines, which is highly relevant and significant to the current situation the world is in today. For more than a year now, when the vaccines are being rolled out over the world, Low-code development can provide the speedy and quality assistance that it offers. Moreover, because Low-code development enables quick and easy creation and innovation, this can be used in producing contact-tracing applications, which can highly increase the health sector’s efficiency in tracing COVID-19 cases in a country and even in the world. The world is currently plagued by this pandemic. However, IT innovation and development never stops and still aims to assist and forward modernity. Low-code also solves the problem of accessibility that is the common hurdle in the industry. Because of how easy it is to learn and apply Low-code development, anyone can learn to create and innovate all of their ideas.

GENDER, RACE, AND STEREOTYPES IN I.T.

Whether we like it or not, the IT and development industry, just like any industry and sector, has its own set of stereotypes, especially when it comes to the developers. Men dominate the industry of IT, and it becomes a challenge when people of other genders would like to enter the industry. Lyndsey Scott is an African-American model, actress, and, most importantly, a software developer. She narrated her journey into becoming what she is now, and it involved a lot of breaking the norms and stereotypes. She said that people in the IT industry were always surprised as to what she can do because she is a woman and also a person of color. Lyndsey narrated that she was not shocked at the common reaction at all, but she was challenged and even more empowered to empower others, especially the youth and women. 

According to Gartner Research, that in 2020 only 28% to 42% made up the GAFAM (Google, Apple, Facebook, Amazon, and Microsoft) workforce, and that only 31% of the population of IT employees are women. Lyndsey added that the number is even smaller when it comes to software developers, considering that the statistics may have included women in administrative work in IT companies. The problem of inclusivity and the lack of diversity has always been present in the industry. Not only was she one of the few women, but she was also one of the few software developers who are people of color. She iterated that what is needed is to inspire and encourage more women and members of the younger generation. However, the problem of accessibility always arises, not only in society but also in school. Lyndsey recalled that she was not taught in school what developing and coding was and that she discovered it herself. She hopes that children, through low-code, would be reached by various ways into experimenting easily with technology and software development. She hopes for more women and the youth to create something useful out of what they have experimented on. Accessibility must be given in all industries of IT, coding, and business. According to the Women In Tech Network, women in STEM (Science, Technology, Engineering, and Mathematics) tend to leave the first year of their service due to the lack of role models and having numerous significant personal sacrifices to prove themselves worthy in the workforce or field. Lyndsey said that she was grateful that she is already established in her field and that she has nothing to prove already because she knows what she is capable of. Her concern leads towards the younger generation and other people of color who face the daily challenge of needing to prove themselves more because they are not the stereotype. She also narrates that this should not be the case in any workplace because IT and development must be accessible to everyone.

This becomes an eye-opener arising with the question of when and how? It is already 2021, yet, discrimination and prejudice are still present in the workforce. It is a miss for the IT industry since this affects the more chances of increasing the number of software developers, which also helps in the opening of jobs. Underpaid workers are also one of the challenges seen in the IT industry. The pay gap between men and women software developers is still alarmingly high, which results in women resigning to seek better opportunities in other fields and companies. Lyndsey highlighted that software development has nothing to do with how one looks, what they wear, how they dress, and what their gender is. Workplace culture enables this discrimination, especially in countries that are highly patriarchal and where racism strives on. The struggle of women and people of color in the industry still continues. Lyndsey Scott is one of the inspirations for the IT industry in hopes to devoid the field of discrimination towards gender and race in software development.

Low-code development fosters Creativity, Innovation, and Accessibility in the IT industry as it provides easy access for all who may or may not be in the field or even “techy.” The easy and fast creation of applications can help enable the impossible ideas into the possible. Not only does this help the IT industry, but it also helps the world in finding solutions with the use of software development through low-code development. Amidst the COVID-19 pandemic, software development never stops. Instead, it still fosters and even becomes a tool in helping to solve the pandemic. Despite the success and rise of the IT industry, discrimination of gender and race is still prevalent as what Lyndsey Scott has experienced in her journey in becoming the successful software developer she is today.

REFERENCES:

• https://www.forbes.com/sites/ilkerkoksal/2020/04/29/the-rise-of-low-code-app-development/?sh=34638e4c6807 
• https://appian.com/low-code-basics/introduction.html
• https://www.mendix.com/low-code-guide/
• https://whatis.techtarget.com/feature/Women-in-tech-statistics-The-latest-research-and-trends#:~:text=In%202020%2C%20women%20made%20up,women%2C%20according%20to%20Gartner%20research.

by: @gofemm3

Create a Mobile Web App from your Google Sheet with AppSheet

 At the office, you may have a colleague who sells packed lunches. He lists the menu in a Google Sheet, and uses the same spreadsheet for collecting/tracking orders from co-workers. He could improve on this by creating a food order form via Google Forms and directing form submissions to the spreadsheet. 

Nowadays he has an additional option to improve on this by way of AppSheet. He could quickly and effortlessly create a mobile web app based on his spreadsheet. Order submissions are done in the app, and the orders are immediately added into the spreadsheet. 

Previously, I showed you how to create a mobile web app using Glide. Today, let's look at a pure Google solution to low-code/no-code, spreadsheet-backed, mobile web app creation. In this example, we will create a sort of DIY "link tree" via AppSheet.

Step 1: Create a spreadsheet

Create a spreadsheet with 3 columns: Title, Link, Icon. Give the sheet an appropriate name -- replace the default "Sheet1" with "Links". Put any title under Title (e.g. GitHub, LinkedIn, website, etc), put the corresponding profile link under Link, and put an image URL under the Icon column.

Step 2: Import into AppSheet

A shortcut to AppSheet can be found in the Tools menu. Select Tools -> AppSheet -> Create an app.

Step 3: Customize the UI

On the left panel, select UX. Then in the middle area, under Primary Views, open "Links". Scroll down to the Layout section, where you will see the different parts of an item widget. When you click on an element inside the component, you will be able to map that element to a specific column in the spreadsheet. Let's map the title element to Title, and the subtitle element to Link.

You will immediately see the result in the preview panel on the right. From there, it should be apparent that there's a problem with the icons -- our app isn't recognizing the image URLs in the Icon column. We'll fix this next.

Step 4: Customize the data

Data customization in AppSheet is more complicated than in Glide, but it is also more powerful and flexible.

To fix our icon display, go to the Data view (from the left panel). Under Tables tab, open Links, then open "View Columns". The columns should be listed here. 

First make sure that Title is selected as the KEY. Then for the Icon column, change the Type to Image. 

Go back to the UX section, then go back to the card Layout section, select the image element, and map it to the Icon column. Save the changes by clicking the Save button at the upper right, and the changes should reflect right away. From here you can make further customizations to the icon, like changing the shape to circular.

Further overall theme customizations can be done by going to the Brand tab and making changes to theme, colors, logo, etc.

Step 5: Some customizations for public, read-only "link tree"

Typical applications can make use of built-in functionality that allow creating, updating & deleting data. Since we're creating a link tree type of application, we want our users to only view the data and not be able to make modifications. Here are a few things we need to do:

First, disable Add/Update/Delete. On the left panel, go to Data again. Under Tables tab, select Links, then under "Are updates allowed?", select Read-Only.

Second, you need to disable user access control, since our app should be viewable by the public. On the left panel, go to Security.

Under Require Sign-In tab, turn off "Require user signin?". Then you will also need to turn on the next two options, namely:

- "Yes, the data in this app is public"

- "Yes, I am authorized to set up an insecure app"

Just a reminder that we're only doing this because our app is read-only, and is intended for public viewing. For other use cases, it's a good idea to limit access to a set of users.

Finally, we need to disable the app usage consent confirmation dialog. Still under Security view, go to the Options tab. Scroll down until you find "Require user consent", then turn it off.

Step 6: Publish and share

Save all changes. Then open the app in a new tab. You can copy the URL in the address bar, and share it with your colleagues.

Other things you can do: You can use a URL shortener to make the app URL more user-friendly when you share it. You can also embed your app to your website via an iframe. My Interact page is actually an AppSheet app that is embedded in an iframe. This iframe embedding is unique to AppSheet -- this won't work with Glide apps.

Next steps

Be creative. What kind of app will you create with this tool?