DEV Community: Bryan N. Lomerio

Master Git Commit Messages with This Simple Conventional Commit Cheat Sheet

Bryan N. Lomerio — Sun, 16 Feb 2025 13:27:33 +0000

Want to be a good developer? Boost your workflow and communication by adopting Conventional Commits. This cheat sheet helps you write clear, concise, and consistent commit messages, making your versioning process more organized and collaborative!

👉 Go to my https://github.com/BryanLomerio/conventional-commit-cheatsheet to see the cheatsheet or guide.

[Boost]

Bryan N. Lomerio — Sat, 18 Jan 2025 08:21:00 +0000

Mastering JavaScript Arrays: Techniques, Best Practices, and Advanced Uses

Md Nazmus Sakib ・ Sep 3 '24

#javascript #programming #webdev #softwareengineering

Content Manipulation

Bryan N. Lomerio — Sun, 05 Jan 2025 06:12:48 +0000

textContent:

Retrieves or sets the text content of an element, excluding any HTML tags.

const element = document.getElementById('myElement');
element.textContent = 'New text content';

innerText:

Similar to textContent, but it takes into account the styling of the element.

const element = document.getElementById('myElement');
element.innerText = 'Updated text';

innerHTML:

Retrieves or sets the HTML content (including tags) of an element.

const element = document.getElementById('myElement');
element.innerHTML = '<p>New paragraph with <strong>HTML</strong> content</p>';

outerHTML:

Retrieves or sets the HTML content of an element, including the element itself.

const element = document.getElementById('myElement');
element.outerHTML = '<div id="newElement">Updated content</div>';

value:

Get or set the value of form elements like or .

const input = document.querySelector('input');
input.value = 'New input value';

setAttribute():

Sets a specific attribute's value on an element.

const element = document.getElementById('myElement');
element.setAttribute('title', 'New tooltip text');

getAttribute():

Retrieves the value of a specified attribute.

const element = document.getElementById('myElement');
const title = element.getAttribute('title');
console.log(title);

removeAttribute():

Removes an attribute from an element.

const element = document.getElementById('myElement');
element.removeAttribute('title');

appendChild():

Appends a new child element to a parent element.

const parent = document.getElementById('parent');
const newElement = document.createElement('div');
parent.appendChild(newElement);

insertBefore():

Inserts a new node before an existing child node.

const parent = document.getElementById('parent');
const newElement = document.createElement('div');
const referenceNode = document.getElementById('existingElement');
parent.insertBefore(newElement, referenceNode);

replaceChild():

Replaces an existing child element with a new one.

const parent = document.getElementById('parent');
const newElement = document.createElement('div');
const oldElement = document.getElementById('oldElement');
parent.replaceChild(newElement, oldElement);

cloneNode():

Creates a copy of an element (can be a deep copy including its child nodes or shallow copy).

const element = document.getElementById('myElement');
const clone = element.cloneNode(true); // true for deep clone

The Ultimate Git Cheatsheet: Must-Know Commands for Every Developer

Bryan N. Lomerio — Sun, 29 Dec 2024 22:22:20 +0000

Git Cheatsheet

Add GIT Credentials in VS Code

Install Git.
Open VS Code and check with git --version.

Set your email:

git config --global user.email "you@example.com"

Set your username:

git config --global user.name "Your Name"

Verify:
```
git config --global --list
```

Common Git Commands

git clone <repository-url> - Clone a repository.
git status - Check the status of files.
git add . - Add all files to staging.
git add <file> - Add a specific file to staging.
git commit -m "message" - Commit changes.
git commit --amend - Modify the last commit message or content.
git push origin <branch> - Push to a remote repository.
git pull - Fetch and merge changes from remote.
git fetch - Fetch changes from remote without merging.
git merge <branch> - Merge another branch into your current branch.
git log - View commit history.
git reset --hard <commit-id> - Reset to a specific commit and discard all changes.
git reset <file> - Unstage a file.
git stash - Temporarily save changes.
git stash pop - Apply stashed changes.
git diff - Show changes not staged for commit.
git diff --staged - Show changes that are staged for commit.
git reflog - Show the history of references (e.g., HEAD).
git show <commit-id> - Show changes from a specific commit.
git switch <branch-name> - Switch to another branch (replaces git checkout for easier branch switching).
git switch -c <new-branch-name> - Create and switch to a new branch (simplified alternative to git checkout -b).
git merge --no-ff <branch-name> - Perform a merge with a merge commit, even if the merge could be fast-forwarded.
git reset <commit-id> - Undo changes and move the HEAD to a specific commit.
git cherry-pick <commit-id> - Apply changes from a specific commit from another branch.
git tag - List tags.
git tag <tag-name> - Create a tag at the current commit.
git push --tags - Push tags to the remote repository.
git fetch -p - Prune remote-tracking branches that no longer exist.
git clean -fd - Remove untracked files and directories.
git remote -v - Show remote repositories.
git remote add <name> <url> - Add a remote repository.
git remote remove <name> - Remove a remote repository.
git remote set-url <name> <new-url> - Change the remote repository URL.
git push --force-with-lease - Force push with a safety check to avoid overwriting others' changes.
git pull --rebase - Fetch changes from remote and apply your commits on top of them.

Branch Management

git branch - List branches.
git branch <branch-name> - Create a new branch.
git branch -d <branch-name> - Delete a local branch.
git branch -D <branch-name> - Force delete a local branch.
git checkout -b <branch-name> - Create and switch to a new branch.
git switch -c <branch-name> - Create and switch to a new branch.
git checkout <branch-name> - Switch to an existing branch.
git push origin --delete <branch-name> - Delete a remote branch.
git fetch -p - Clean up remote tracking branches.
git branch -m <old-name> <new-name> - Rename a branch.
git branch -v - View the last commit on each branch.
git branch -r - List all remote branches.
git push -u origin <branch-name> - Push a new branch to remote.
git merge <branch-name> - Merge a branch into the current branch.
git cherry-pick <commit-id> - Apply a specific commit from another branch.

Tagging

git tag - List all tags.
git tag <tag-name> - Create a new tag.
git tag -a <tag-name> -m "message" - Create an annotated tag.
git push origin <tag-name> - Push a tag to the remote.
git push --tags - Push all tags to the remote.
git tag -d <tag-name> - Delete a local tag.
git push origin --delete <tag-name> - Delete a remote tag.

Collaboration

git remote -v - List remote repositories.
git remote add <name> <url> - Add a new remote repository.
git remote remove <name> - Remove a remote repository.
git remote set-url <name> <new-url> - Change the remote repository URL.
git pull --rebase - Fetch changes and reapply your commits on top.
git push --force - Force push changes to the remote branch.

Undoing Changes

git reset - Undo changes in the staging area.
git reset <file> - Unstage a file.
git revert <commit-id> - Revert changes introduced by a commit.
git clean -fd - Remove untracked files and directories.

For more cheatsheets and updates, follow my GitHub organization: https://github.com/CheatSheet-Codebase.

6 Essential Dev Tools to Boost Your Workflow

Bryan N. Lomerio — Wed, 25 Dec 2024 08:36:50 +0000

1. CodeSandbox: Start Coding in Seconds

CodeSandbox is an online code editor that helps you quickly build web apps without any setup. It’s perfect for rapid prototyping and experimenting with code.

Key Features:

Start coding instantly without any installation.
Real-time collaboration with others.
Supports React, Vue, Node.js, and more.
Why it’s great: Ideal for trying out ideas quickly or sharing a project with teammates without needing to set up a local environment.

2. Figma: Design and Develop Seamlessly

Figma is a popular design tool, but it’s also a great resource for developers. It lets you inspect designs, extract CSS, and create prototypes that help bridge the gap between design and code.

Key Features:

Work in real-time with designers and developers.
Get CSS code directly from design elements.
Create interactive prototypes to visualize user flows.
Why it’s great: Figma makes collaboration with design teams easy, and you can get the exact code you need straight from the designs.

3. Live Share: Collaborate in Real Time

Live Share is an extension for Visual Studio Code that allows you to share your coding session with others. It’s perfect for pair programming or team collaboration, even if you're working remotely.

Key Features:

Share your code and terminal with others.
Collaborate on debugging in real time.
Integrated chat for communication inside the editor.
Why it’s great: It’s like being in the same room, allowing you to collaborate seamlessly on the same codebase, no matter where you are.

4. OctoLinker: Simplify GitHub Navigation

When working with large codebases on GitHub, OctoLinker makes navigation easier by turning file paths and references into clickable links. No more endless scrolling to find related files.

Key Features:

Clickable links to navigate between files and functions.
Works with many languages like JavaScript, Go, Python, and more.
Why it’s great: It saves time by letting you quickly jump to related files and functions on GitHub with just one click.

5. SourceLevel: Track Your Team’s Progress

SourceLevel gives you a visual dashboard of your team's performance. It tracks pull requests, merges, and code activity, helping you stay on top of the project’s progress.

Key Features:

Real-time tracking of pull requests and merges.
See how active each team member is.
Visual overview of the health of your codebase.
Why it’s great: It’s perfect for managing team performance and spotting potential roadblocks early on.

6. Code Climate: Improve Your Code Quality

Code Climate automatically reviews your code for quality, maintainability, and potential issues. It integrates with GitHub and provides feedback after each commit, helping you keep your code clean and bug-free.

Key Features:

Automatically checks for code quality issues.
Provides insights on code duplication, complexity, and test coverage.
Integrates with GitHub for continuous feedback.
Why it’s great: Code Climate helps you maintain high-quality code by identifying issues early, making it easier to maintain your codebase in the long run.

Wrapping Up
These tools can significantly improve your development workflow, whether you're coding solo or collaborating with a team. From easy prototyping and design collaboration to real-time code sharing and code quality management, they’re all designed to make your coding process more efficient.

What tools do you use to make your development process smoother? Share your favorites in the comments!

TypeScript Cheat Sheet: Essential Tips for JavaScript Developers

Bryan N. Lomerio — Wed, 25 Dec 2024 08:04:36 +0000

Basic Types

let isDone: boolean = false;
let count: number = 42;
let name: string = 'Bryan Lomerio';

Arrays

let numbers: number[] = [1, 2, 3];
let names: Array<string> = ['Alice', 'Bob', 'Charlie'];

Tuples

let user: [string, number] = ['Bryan', 25];

*Enums *

enum Role {
  Admin = 'admin',
  User = 'user',
  Guest = 'guest',
}

let currentRole: Role = Role.Admin;

Any Type

let uncertain: any = 42;
uncertain = 'Now a string';
uncertain = true;

Void (Function with No Return)

function logMessage(message: string): void {
  console.log(message);
}

Null and Undefined

let n: null = null;
let u: undefined = undefined;

Type Aliases

type ID = string | number;
let userId: ID = 'abc123';
userId = 42;

Interfaces

interface Person {
  name: string;
  age: number;
}

let user: Person = { name: 'Alice', age: 30 };

10. **Functions**

function add(x: number, y: number): number {
  return x + y;
}

const subtract = (x: number, y: number): number => x - y;

Classes

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): void {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

let person = new Person('Bryan', 25);
person.greet();

Generics

function identity<T>(value: T): T {
  return value;
}

let stringIdentity = identity<string>('Hello');
let numberIdentity = identity<number>(42);

13. **Type Assertions**

let someValue: any = 'Hello, TypeScript!';
let strLength: number = (someValue as string).length;

Union Types

function printId(id: string | number): void {
  console.log(id);
}

printId('abc123');
printId(100);

Type Narrowing

function printInfo(value: string | number) {
  if (typeof value === 'string') {
    console.log(`String: ${value}`);
  } else {
    console.log(`Number: ${value}`);
  }
}

Tailwind CSS Cheatsheet

Bryan N. Lomerio — Tue, 24 Dec 2024 05:08:26 +0000

Layout

Utility Class	Description
`container`	Centers the content.
`block` / `inline-block`	Block-level or inline-block.
`flex` / `grid`	Flexbox or Grid layout.
`flex-col` / `flex-row`	Flex direction column/row.
`items-center`	Align items vertically.
`justify-center`	Align items horizontally.
`gap-1` - `gap-12`	Spacing between items.

Spacing

Utility Class	Description
`m-{size}`	Margin: `mt`, `mb`, `ml`, `mr`.
`p-{size}`	Padding: `pt`, `pb`, `pl`, `pr`.
`{size}` options	`0`, `px`, `1` - `96`, etc.

Typography

Utility Class	Description
`text-{size}`	Font size (e.g., `text-sm`).
`font-bold`	Bold text.
`font-medium`	Medium text.
`font-light`	Light text.
`text-left` / `text-center` / `text-right`	Text alignment.
`text-gray-500`	Text color.

Background

Utility Class	Description
`bg-{color}`	Background color.
`bg-gradient-to-r`	Gradient from left to right.
`bg-opacity-{value}`	Background transparency.

Borders

Utility Class	Description
`border`	Default border width.
`border-{color}`	Border color.
`rounded` / `rounded-{size}`	Rounded corners.

Shadows

Utility Class	Description
`shadow-sm`	Small shadow.
`shadow-md`	Medium shadow.
`shadow-lg`	Large shadow.
`shadow-none`	No shadow.

Sizing

Utility Class	Description
`w-{size}` / `h-{size}`	Width/Height (`full`, `auto`, percentages).
`max-w-{size}`	Maximum width.
`min-h-{size}`	Minimum height.

Flexbox Alignment

Utility Class	Description
`justify-start`	Align items at the start.
`justify-between`	Space between items.
`items-start`	Align items top.

Positioning

Utility Class	Description
`absolute` / `relative`	Positioning modes.
`top-{value}` / `left-{value}`	Offset values.
`z-{value}`	Z-index (stacking).

Colors

Class Examples	Description
`text-blue-500`	Blue text color.
`bg-green-300`	Green background color.
`border-red-400`	Red border color.

Transitions & Animation

Utility Class	Description
`transition`	Enables transitions.
`duration-{ms}`	Duration of transitions.
`ease-in` / `ease-out`	Timing functions.
`animate-bounce`	Bounce animation.

5 Hidden Chrome DevTools Features Every Developer Should Know

Bryan N. Lomerio — Tue, 24 Dec 2024 04:16:10 +0000

Do you want to enhance your developer workflow and optimize your debugging process?
Discover five underrated Chrome DevTools features that can make your life as a developer so much easier!

Feature 1: Design Mode

Skip the hassle of diving into messy HTML structures for quick edits! Design Mode allows you to edit a webpage visually—directly in your browser. Activate it by running:

document.designMode = 'on';

in the Console tab. This feature is perfect for making live changes without dealing with deeply nested HTML.

Feature 2: Logpoints

Replace excessive console.log() clutter with Logpoints. This feature logs expressions directly in the console without modifying your codebase. Right-click on a line in the Sources panel, choose "Add Logpoint," type your message, and let Chrome handle the rest. Debugging has never been cleaner!

Feature 3: Interactive Color Picker

Experiment with colors like a pro! In the Styles tab, click on a color property to open the color picker tool. Adjust transparency, switch between color formats, or even pick colors directly from the page. Designing in the browser just got way more intuitive.

Feature 4: Snippets

Save time by creating reusable scripts directly in Chrome DevTools. Head to the Sources panel, open the Snippets tab, and create a new snippet. From logging all page colors to debugging images with incorrect attributes, snippets make repetitive tasks a breeze. Try this example to log all CSS colors on a page:
All Colors Snippet on GitHub

Feature 5: Lighthouse Performance Reports

Want to boost your website's performance? Use the Lighthouse tab to generate a detailed performance report. Customize the audit settings, hit "Generate Report," and get actionable insights for improving your site's SEO, speed, and user experience.

Wrapping Up

Chrome DevTools is packed with features that can significantly improve your workflow, whether you're debugging, testing, or optimizing your projects. Explore these hidden gems and take your web development game to the next level!

What’s your favorite Chrome DevTools trick? Let’s discuss in the comments!