DEV Community: MJ Abadilla

Boilerplate for NestJS + Terraform + AWS Lambda with Lazy Module loading

MJ Abadilla — Tue, 15 Nov 2022 18:22:22 +0000

Efficient NestJS for small API. Terraform with remote state setup for deploying to AWS Lambda.

Here's the link. More about the project in the readme file.

https://github.com/mjmaix/nestjs-terraform-lambda

This is only intended as boilerplate for small projects.

Clean ESLint import management for ReactJS

MJ Abadilla — Sun, 24 May 2020 09:35:37 +0000

Often times for greenfield projects, we have Prettier and ESLint to do the heavy lifting to organize our codes. It is a common practice today to enforce formatters using Husky and Stage-lint as per this post - Using lint-staged, husky, and pre-commit hooks to fail fast and early.

In doing so, we are investing that our project would be maintainable for a longer time when we invest time to auto-format the code from the start. Keeping aside that we will less be stressed later on after months and we have to refactor parts of the code.

Imports are a mess in JavaScript projects

Working on solo on a ReactJS project doesn't require much attention on code styling and maintenance. You are the only code owner and maintainer.

For many though, we work professionally with ReactJS projects for 5-8 hours a day. When a newly onboarded programmer sees that the code is messy from the start then it puts him into believing that code quality standards are not important to the project, team, and company.

What your new programmer teammate see when first starting to work on a project is the block of imports at the start of every file. This first impressions is very important, it sets the impression that code quality is a first class citizen of the team and he/she will have to maintain the same care the the previous developers have given to the project.

ESLint Plugin Import to the rescue

eslint-plugin-import

ESLint configuration

On your .eslintrc.js add these plugins and rules.

The rules below enforces that:

import React from 'react' is always on top - this is just my personal preference. Remove the pattern: 'react', line to disable.
Imports are ordered by ['builtin', 'external', 'parent', 'sibling', 'index']
Each group will have new lines in-between.

module.exports = {
  plugins: ['import'],
  rules: {
    'import/order': [
      'error',
      {
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
        'newlines-between': 'always',
        groups: ['builtin', 'external', 'parent', 'sibling', 'index'],
        pathGroups: [
          {
            pattern: 'react',
            group: 'external',
            position: 'before',
          },
        ],
        pathGroupsExcludedImportTypes: ['builtin'],
      },
    ],
  },
};

TODO / Limitations:

The sorting is enforced manually, if you are using VS Code and have the ESlint Plugin then you're good to go. The editor will flag the unordered imports and you'll have the "Quick Fix..." options to sort (though you may have to repeat this multiple times).
Let me know if there is a way to automate this on-save.

Solve LeetCode problems using Visual Studio Code, TypeScript, and TDD

MJ Abadilla — Thu, 09 May 2019 08:56:10 +0000

LeetCode workspace written in TS / Mocha / TDD.

I encourage beginners and enthusiasts to use this project. Some of the things that made me set up this project are:

1. In line debugging. It's not every time that we can get the correct solution straight away and I'm not a fan of `console.log` debugging.
2. Ability to use my favorite text editor (Visual Studio Code) with dark mode
3. TDD style development. Solve fast but have the ability to re-factor my code with confidence in my (TDD).
4. Version control your project.

Bonus is that I translated 3 problem examples to Test Cases.

I also want to encourage everyone to share their Test Cases via Pull Request, especially the failed problem test cases from failed submissions.

Have a great time coding!

Visual Studio Code debugging for TypeScript files and Mocha

MJ Abadilla — Mon, 06 May 2019 11:06:29 +0000

I found this great article. A little outdated but still worked after some tinkering.

Debugging TypeScript in VS Code without compiling, using ts-node

If you run into issues check my configuration:

https://gist.github.com/mjmaix/749de8954c9c6777c08641151ae519b5

===
So this is why I need to debug.

I'm not really into algorithms and competitive programming but I feel like my brain needs some practice so I started LeetCode-ing. Not a fan of the interface so I made a VSCode project setup with TS/Mocha. (Is anyone interested with the template?)

Sometimes my brain can't handle the stress of console logging so I need to step by step understand the code/process I'm in.

Automate start of React Native Debugger when starting Android emulator or iOS simulator

MJ Abadilla — Fri, 26 Apr 2019 12:08:01 +0000

I always forget to run my React Native Debugger (great tool btw!) so "Debug JS Remotely" will open a new tab on my Chrome.

I've created this script to automate the process of starting the debugger whenever I will start development.

Worry not it will check if another instance is already running. It also detects if you have not yet installed the app on your macos.

Please check it out:

https://gist.github.com/mjmaix/78eff86bd891925fd00b4e4f10fb9a7b

React Native cleanup practices that will keep you sane.

MJ Abadilla — Sun, 21 Apr 2019 10:35:44 +0000

All of the commands here can be executed separately. Don't be afraid to clean up your React Native project every once in a while of or when something unexpected happens.

Doing a good cleanup first often saves the trouble of filing an issue ticket and waiting for someone else to suggest that you reinstall the app.. etc.

What the scripts will do?

Cleanup react dependencies and cache
Cleanup metro bundler cache and files
Cleanup react-native haste cache references
Cleanup ios and android files
Always reset cache when using npm start
Optionally run script file after every package installation
Run pod install after every package installation

How to use:

~~Don't forget to close all Metrobundler (or the like) instances first before running.~~ A killpackager script is added to start a close and new instance every npm start
Close all emulators or simulators
run cleanup:all and take a break

See the code here:

React Native cleanup scripts

What if the errors are not fixed?

Go and read the error logs and ask the community if you need to. Use the repository issue tracker or stackoverflow

Cloud save and review revisions of your Virtual Studio Code settings.

MJ Abadilla — Sun, 21 Apr 2019 07:11:21 +0000

Most of us like to try plugins and setup for our projects, no?

Sample (my settings):

https://gist.github.com/mjmaix/537827d2502a55087673c04115cdeaec/revisions

The plugin:

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Visual Studio Code - color coding workspaces

MJ Abadilla — Sat, 20 Apr 2019 12:44:03 +0000

We can differentiate different project at a glance even if the projects have the same structure.

https://marketplace.visualstudio.com/items?itemName=stuart.unique-window-colors