DEV Community: Efren Marin

Workflows on how to be more efficient with your code

Efren Marin — Thu, 16 Jan 2025 04:09:02 +0000

Format Your Code Using Prettier Like a Pro

Efren Marin ・ Jan 8

#webdev #javascript #tutorial #tooling

Format Your Code Using Prettier Like a Pro

Efren Marin — Wed, 08 Jan 2025 06:17:01 +0000

Don't be like this guy—don’t be a schmuck.

Why Formatted Code Is Needed

Formatting helps structure the lines of code you write making it easier to read and understand. This is crucial when working on a codebase with multiple developers, all with their own style and preference on how their code is structured. Having a uniformed formatted codebase helps prevent headaches when merging and creates a standard that you and your team can build on.

There are several ways to set up a formatting template for yourself and your team. In this article, we’ll explore one of the more popular options: Prettier.

According to the State of JS 2021 survey, 83% of respondents regularly use Prettier as their formatter of choice, a 13% increase from the previous year's survey. Many prominent teams—such as those at Facebook, Webflow, Jest, Dropbox, Spotify, and PayPal—use Prettier to ensure consistent formatting in their codebases.

Prettier can be configured and run in multiple ways. In this example, I’ll demonstrate how to set up Prettier with a Git hook for automation in VS Code. For more examples and configurations, visit Prettier’s documentation.

Before You Start

While it’s not required, it’s helpful to understand the options you’ll be configuring and what they do. You’ll need to create two files and place them at the root level of your project. Keep in mind that these formatting options are project-specific, so you’ll need to repeat this process for each new project. These files will contain the options you can choose, and you can modify or remove options that don’t fit your project’s needs.

.prettierrc

This file, located at the root level of your project, defines the base formatting rules for Prettier. It uses a JSON structure and can be tailored to your team’s standards. Here’s an example:

.editorconfig

This file ensures consistency in your editor settings even before Prettier runs. It also covers options that .prettierrc does not. Here’s an example:

Setting Up the Workflow

For ease of use, both files can be copied at the end of the article. Once you’ve created and configured the .prettierrc and .editorconfig files, you can proceed. Install these three npm packages to streamline the formatting process:

npm install --save-dev prettier lint-staged husky

Then initialize Husky

npx husky init

These steps accomplish the following:

Install Prettier for formatting.
Install lint-staged to format only staged files before committing.
Install Husky to set up Git hooks for automation.
Initialize Husky, which creates the necessary dependencies and a pre-commit file.

Configuring New Files

Two additional files need configuration: pre-commit and .lintstagedrc

pre-commit

This file, automatically created by Husky, guides the automation process. It is located inside the Husky folder created during initialization. Configure it as shown below:

.lintstagedrc

Create this file (with no extension similar to .editorconfig and .prettierrc) in the root project folder. It narrows the scope of files Prettier formats through the Git hook. Below is an example, but you can adjust it based on your project’s file types:

Testing the Workflow

Once all four files are in place—.prettierrc, .editorconfig, .lintstagedrc, and pre-commit—you can test the workflow.

Make a simple formatting change to a .js file (add unnecessary spaces or indents, for example).
Stage your changes: git add -A
Commit with a test message git commit -m "Testing formatting workflow"

If everything was set up correctly, your terminal should display a success message, and the formatting changes will be automatically applied.

That's it!

You now have a simple yet effective way to harness Prettier and git hooks to automate the formatting of your code.

I’d love to hear your thoughts! Let me know in the comments if this was helpful or if you encounter any issues—I’m here to help!

Copy Paste File Examples

.prettierrc

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

.editorconfig

# Top-most EditorConfig file
root = true

# Global settings
[*]
indent_style = space
indent_size = 2
tab_width = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

# Overrides
[*.md]
trim_trailing_whitespace = false
max_line_length = off

[*.yml]
indent_style = space
indent_size = 2

[*.ts]
indent_style = space
indent_size = 4

[Makefile]
indent_style = tab

[*.html]
indent_size = 2

[*.json]
indent_size = 2

How to Take Your Git Commit Messages to The Next Level With a Commit Template

Efren Marin — Wed, 21 Dec 2022 05:32:31 +0000

Whether you're working on a solo project or part of a development team, you will have had multiple commit messages that don't always make sense. Whether it's the infamous "WIP" or a vague description that doesn't encapsulate the whole story, we're all guilty of this.

Allow me to share what has worked for me and what I've introduced to my development team for our daily git commits. With some planning beforehand, this will show you how to set up a git commit template for cleaner and concise messages.

Overview

Having a commit template embedded into your workflow not only allows for more detailed and precise commit messages but it also sets a standard for teams to follow.

I'll break down the steps needed into segments.

How to create a template file that git can use.
How to set up a custom template on your machine.
How to actually use it.

Creating a Template

// Detect dark theme var iframe = document.getElementById('tweet-1024172483501539333-663'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1024172483501539333&theme=dark" }

Is your pet peeve receiving a pull request with an enormous amount of files changed and non-descriptive commit messages? Yeah, mine too. I know I'm not alone on this one so let's begin by creating our template to help prevent this.

We will be loosely following Conventional Commits so if you are unfamiliar with this, I strongly suggest you give them a click.

First start off by creating a .txt file and naming it something precise like commitTemplate.txt for example. Place this file somewhere within your folder structure where you can easily access it. I placed mine in my development folder where my repo's are cloned.

Now populate your commit template file. You can use my example, or modify it to what you and your team need. It's important to know a couple caveats to this template.

One, any line that starts with # will not appear in your final commit message but will show up as commented out in the template. If it does not include a # then you'll be able to type in that line.
Two, for the sake of git log --oneline keep your title under 50 characters.
Three, the body and footer can be up to 72 characters per line.

The template I'm sharing includes a section for the developer to type in their commit message as well as the team standard below for reference. Okay, now with that understood, here is the template we'll be using:

# 
#########################
# Start of Commit Message
#########################
#
#
# Title

# Body



# Footer

#
#
#######################
# End of Commit Message
#######################
#
#
# Keep each commit line under 50 characters
# Following conventional commits 1.0.0 
#
# Use the prefix naming convention:
# fix: patches a bug in the codebase
# feat: introduces a new feature to the codebase
# refactor: only used when refactoring code
# docs: used when modifying/creating docs
# build: when preparing for a build
#
# Commits should follow the format below:
#
# [Title]
# <type>: In under 50 characters, description of the commit
#
# [Body]
# Explain in detail what was done in this commit and 
# what this is supposed to achieve. Keep this section
# under 72 characters per line. 
# 
# [Footer]
# Use this section to add any PR/Ticket numbers that this
# commit is solving or any co-authors. If none of these apply, # leave it empty.
# 
#
#
#
#

Setting Up Our Template

With the template file created and populated, we now need to point Git to it whenever we want to commit a message.

From your terminal, in this case I'll be using VSCode's terminal, type in the following command and press enter.
git config --global commit.template ~/commitTemplate.txt
The only portion of this snippet that might be different is commitTemplate.txt assuming you named your file differently. Running this command points Git to your template file and will work globally for any project you work on using your machine.

Now let's check to make sure this was processed by typing in git config --global --list. This will now show you that commit.template is assigned to the file path where your template is.

Finally, to configure this to work with VSCode we will pass another command to the terminal. This time we will use git config --global core.editor "code --wait". This handy line will make it so when we are ready to commit, it will open a new tab within VSCode so we can type in our message. Again, check for completion by running git config --global --list again.

How To Use Our Template

So you've created a commit template, set it up on your machine, and now it's time to use it!

Simply go to one of your projects and get ready to make a commit. In order for this template to populate, your commit command needs to be git commit only. Once you type this in and press enter, a new tab will populate with your template. If you decide you are not ready for a commit, simply leave it empty and close the tab. Your terminal will let you know Aborting commit due to empty commit message.

Here we have populated the template with a title, body, and footer. As you can see the lines that began with # are commented out and we type in the empty lines we designated before. So your commits will really look like this:

feat: Included user feedback modal

Created a fully functional modal with a 
form for users to fill out if they have 
feedback. This feature can be accessed 
from the home page menu bar on the top
right with a click. 

PR#: 454

When you're happy with your notes, simply save and close the tab and it will push your commit message. Simple as that!

Conclusion

There are no right or wrong items to include in your commit template. Every development team works off of different ideologies, but every development team can gain an advantage by having a commit template. Not only does it create a commit message standard format, but it also helps produce more detailed and succinct messages.

Takes about 5 minutes to implement this in your local environment so what do you have to lose? If you gained some value from this, I'd be happy to hear how it goes and your experience using it.

Great Coding Websites and Games for Kids of All Ages

Efren Marin — Thu, 17 Nov 2022 17:00:00 +0000

How It Started

As my work often spills over into time at home, my young son has started showing a lot of curiosity about programming. This sparked a quest to introduce him to coding in a fun, engaging way. We’ve explored a variety of resources—books, apps, YouTube channels, and subscription kits. Each has its perks, but we’ve found that interactive learning really stands out for retention. Getting hands-on experience seems to make all the difference! The more we explored, the more I ended up using these resources for fun and to sharpen my skills in a different way.

I’ve compiled a list of websites and games that offer a simple, engaging introduction to coding and development. The best part? They’re super easy to use and are great for building skills at any age, whether you’re just starting or looking to sharpen your expertise as a Software Developer.

CSS Focused

CSS Diner | Link

Cost: Free
A great introduction to CSS selectors using an interactive diner-style game. This free site is open source and offers 32 challenge levels all in the browser. If you're stuck on any level, there's even a useful 'Help' button that explains the problem and provides insight into the solution.

Flexbox Froggy & Grid Garden | Flex Link | Grid Link

Cost: Free
These are the best visual representations of how both CSS Flexbox and CSS Grid work. They both offer a fun and easy-to-understand way to learn these CSS methods. Flexbox has you helping a frog hop along a pond. Grid Garden has you helping a garden flourish on a grid. Flexbox Froggy has 24 challenge levels and Grid Garden has 28 challenge levels, both are free sites.

CSS Battle | Link

Cost: Free, Pro Upgrade option with monthly subscription
There are so many amazing things that can be done with CSS on its own. This site puts your CSS knowledge to the test with a visual prompt and a side-by-side comparison as you work on your solution. There over 100 challenge levels to work through, all for free. There is a Pro version that gives you some quality-of-life additions if you want to expand on the free version.

Programming Fundamentals

CodinGame | Link

Cost: Free
If you're looking for an old school flash game approach then this is it. CodinGame gives you challenges based on game scenarios like traversing mountain tops, space shooters, zombies, and so many more options. You can pick a game scenario that tests a certain topic like loops or conditions and work through that game scenario. If you're up for it, there is also an element of competition for those who want to try their hand at it. Frequently hosts competitions with prizes and signing up is free!

Code Monkey | Link

Cost: Free Trial, offers monthly subscription
This site is really aimed at feedback-based learning. Has a dashboard for either parents or teachers to see their kids or student's progress. When we tried this one, I did enjoy the reports generated based on my son's progress through the lesson plans. This allowed me to provide feedback on areas where he struggled. This site does have a monthly subscription but they do offer a generous trial period to see if it's for you.

WarriorJS | Link

Cost: Free
Looking for a text-based adventure to learn and improve your JavaScript skills? WarriorJS fits that bill to a T. Reminiscent of old-school text adventures, this free open-source site has you controlling a hero through multiple levels using JavaScript to interact.

Lightbot | Link

Cost: Free version, offers a full paid version as well
Okay, kind of cheating here because this is an app and not a website but this fun simple app explains fundamental topics in an easy-to-understand way. Aimed at newbies, Lightbot offers a perfect way to learn code on the go. According to their site, "LightBot was designed with first-time coders. It's been played by over 20 million kids and has been used by tens of thousands of teachers worldwide.". They offer a free version and a paid full version so something for everyone.

Brilliant | Link

Cost: Free trial, offers monthly and annual plans
A different approach to learning with Brilliant's platform of bite-sized lessons. They offer simple reward-based lessons that revolve around fundamentals at its core. Whether it's algorithms, math, or computer science basics, Brilliant has managed a way to make breaking into these topics a lot more approachable. It's offered online and via an app.

Games

Human Resource Machine | Link

Cost: $14.99 not accounting for sales
Program little office workers to solve puzzles. From the creators of World of Goo and Little Inferno. Easy way to pass hours working your way through employees while also sharpening your logic skills. Can be found on Steam and GOG.

Code Romantic | Link

Cost: $9.99 not accounting for sales
If you want a story to go alongside your programming learning journey, then this game might just be the one.
This game is a computer science puzzle visual novel wrapped in a science fiction love story. Definitely worth a try if you like visual novels. Can be found on Steam and GOG.

7 Billion Humans | Link

Cost: $14.99 not accounting for sales
The follow-up to the award-winning Human Resource Machine, automate swarms of office workers to solve puzzles inside your very own parallel computer made of people. If you liked their previous game, this is more of it but with many more challenges. Can be found on Steam, GOG, Humble Store, Nintendo Switch, and iOS/Android.

While True: learn() | Link

Cost: $12.99 not accounting for sales
Including this title as an honorable mention as it does not directly deal with programming but does touch on basic machine learning concepts. You solve puzzles to build a cat-to-human translator in this quirky game. Can be found on all PC game marketplaces and consoles.

Whatever method you decide to use as a medium to learn, it's important to have it be engaging, fun, and informative.

Happy Coding!

Deploy a Create-React-App to Github

Efren Marin — Sun, 22 Nov 2020 05:06:14 +0000

Overview

I find that being able to document and share my experiences helps to reinforce them. So as I dive deeper and deeper down the React Rabbit Hole, I want to help those who come across the question, "How do I deploy my Create-React-App onto my Github Repo and/or Github Pages?".

As a preamble, I assume that you are already familiar with using the command line interface, using packages, and using Github.

At the end of this, you will know how to have your CRA(Create-React-App) on your Github repository and also hosted on Github Pages.

Create-React-App

First, start off by making sure you are in the folder where you want to install your application. In this example, I am going to be installing my CRA in my CRA-GH folder. You can learn more about initializing CRA from their documentation here. Using your Command Line Interface(CLI), initialize your application.

Efren_Marin CRA-GH % npx create-react-app cra-gh-example

Once your CRA is installed, go into the application file. In my example, the folder was called CRA-GH and my application was named cra-gh-example.

Efren_Marin cra-gh-example %

Test out your application by running the npm start command.

GH-Pages Package

First, make sure to close down your server instance using CTRL + C.

Next, to incorporate Github you need to include the package with the command yarn add gh-pages

Efren_Marin cra-gh-example % yarn add gh-pages

Git Initial Commit

Once the gh-pages package is installed you need to add the changes and commit them.

Efren_Marin cra-gh-example % git add -A
Efren_Marin cra-gh-example % git commit -m "First Commit"

Awesome! Now let's work on your repository.

Github Repository

Create the repository that you want your CRA to be pushed to.

Once you create your repository, you'll be faced with many options on how to proceed. We will be choosing to push an existing repository from the command line.

You can enter these commands one at a time in order or copy and paste.

Efren_Marin cra-gh-example % git remote add origin https://github.com/efrenmarin45/cra-gh-example.git
Efren_Marin cra-gh-example % git branch -M main
Efren_Marin cra-gh-example % git push -u origin main

That's it!

Well done! Your CRA is now live on your Github!

Deploying to Github Pages

You can also set up your CRA to deploy to Github Pages with a few simple steps. In this example I will be using VS Code.

Github Pages Source

In order to direct your application to deploy directly to Github Pages, you need an address. On your settings tab in Github, scroll down until you come Github Pages.

Select the dropdown and set it to Main then select Save. Once this is done your address will be displayed for you to copy.

Code Editor

Go into your project files using your code editor of choice and find your package.json file.

Add a key of homepage and a value of the link to your Github Page. See line 5 for an example. This directs your application to deploy to that address once you run it.

Disregard the versions of the dependencies as they may have changed from the time of this screenshot

Under the scripts section, you will add these two lines:

"predeploy": "yarn build",
"deploy": "gh-pages -d build"

It should look like this:

Finally commit your changes using these git commands.

Efren_Marin cra-gh-example % git add -A
Efren_Marin cra-gh-example % git commit -m "Added Github configuration"
Efren_Marin cra-gh-example % git push origin main

Build App

Once the changes have been made and pushed to your repo, you need to build it using the command yarn run deploy

Final Step

Almost there! Go onto your Github and go to the settings tab. Scroll down to Github Pages and change the source from Main to gh-pages.

Use the new link on Github Pages and you should see your CRA now hosted on Github Pages!

In Conclusion

There are multiple ways to set up your development environment and there are a vast amount of ways to go about it. This way has helped me streamline my process and I hope it helped you learn something new.