Category: dev

How to Get Visualforce usage stats from VisualforceAccessMetrics in Salesforce

February 14th, 2023
Reading Time: < 1 minutes
You can get the Visualforce usage statistics from the VisualforceAccessMetrics object in Salesforce by using SOQL (Salesforce Object Query Language) to query the object and retrieve the desired information. Here’s an example of how you can do this:
```
SELECT ApexPageId, MetricsDate, TotalTime, AverageTime, TotalRequests, UniqueUsers
FROM VisualforceAccessMetrics
WHERE MetricsDate = TODAY
```
This query retrieves the Visualforce page ID, date, total time, average time, total requests, and unique users for the current day. You can modify the query to retrieve data for a different time period by changing the value in the WHERE clause.

Once you have executed the query, you can use the results to get the desired statistics and usage information for your Visualforce pages.
Share this:
Twitter
LinkedIn
Reddit
Email
Telegram
WhatsApp
Like this:
Like Loading…
How to setup Github Actions workflow lint

January 29th, 2023
Reading Time: < 1 minutes
GitHub Actions provides a great way to automate workflow processes and make development and deployment more efficient. Linting is an important part of any software development project to ensure code consistency and maintain uniform standards. In this post, I will explain how to setup a Github Actions workflow lint to automate your linting process.

Setting up a GitHub Actions workflow lint is easy and can help keep your codebase consistent and maintainable.

First, you need to create a workflow file in your project’s root directory. This file should be named .github/workflows/lint.yml and should contain the configuration necessary to run your linting script.

Let’s say your package.json file looks like this:
```
"scripts": {
    (...)
    "lint": "eslint --ignore-path .gitignore . --ext .js"
  },
```
Create a file at ./github/workflows/lint.yml

Paste this content:
```
name: lint

on: push

jobs:
  lint:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Cache node modules
        uses: actions/cache@v2
        env:
          cache-name: cache-node-modules
        with:
          path: ~/.npm
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-
      - name: Install Dependencies
        run: npm install

      - name: Lint
        run: npm run lint
```
Share this:
Twitter
LinkedIn
Reddit
Email
Telegram
WhatsApp
Like this:
Like Loading…
Transform a JSON object keys and values to lower case

January 29th, 2023
Reading Time: < 1 minutes
We all know that JavaScript Object Notation (JSON) is a powerful and popular data markup language. It is widely used in web development and API design. But what if you wanted to transform a JSON object’s keys and values to lowercase?

Fortunately, there is a simple way to do this. All you need to do is to loop through the object, retrieving each key and value, and then convert it to lowercase using the JavaScript toLowerCase() method.

But what if you do it in a fancy way using reduce?
```
      
export const objToLowerCase = (obj) => {
  if (!obj) return obj;
  return Object.keys(obj).reduce((prev, current) => ({ ...prev, [current.toLowerCase()]: obj[current].toLowerCase() }), {});
};

      
    
```
```
      

  test("obj to lowercase", () => {
    const obj = {
      MyKey1: "MY Value 1",
      MyKey2: "MY Value 2",
    };
    const result = objToLowerCase(obj);
    expect(result["MyKey1"]).toBeDefined();
    expect(result["MyKey1"]).toBe("my value 1");
    expect(result["MyKey2"]).toBeDefined();
    expect(result["MyKey2"]).toBe("my value 2");
  });



      
    
```
Photo by Brett Jordan on Unsplash
Share this:
Twitter
LinkedIn
Reddit
Email
Telegram
WhatsApp
Like this:
Like Loading…
Lightning data table conditional cell color

January 29th, 2023
Reading Time: 2 minutes
Are you looking to add a bit of personality and flair to your lightning data table? Conditional cell color gives designers and developers the opportunity to transform their table into something unique and eye-catching.

With conditional cell color, you are able to control the color of a cell and its contents based on the value of a particular item in the table. This means that each cell in a row can have its own distinct color, letting you highlight important information, emphasize data, and make the table look more visually appealing.

Expected result

Salesforce Lightning is a component-based framework for building user interfaces on the Salesforce platform. It provides a modern and efficient way for developers to create and deploy custom user interfaces that can run on any device, including desktops, laptops, tablets, and smartphones.

A Lightning Component is a reusable unit of code that implements a specific feature or functionality. Components can be composed into larger applications and can be easily reused and customized to meet different business needs. They are written in Aura, a proprietary JavaScript-based language, and use the Lightning Data Service to communicate with the Salesforce server.

Lightning Components provide a number of benefits, including faster performance, improved user experience, and greater customization options compared to traditional Salesforce user interfaces. They are an essential part of the Salesforce Lightning platform and are widely used by organizations to build custom applications and extend the functionality of the Salesforce platform.

Lightning data tables allow users to customize the colors of cells in a table based on the values of the cell using conditional formatting. This is a powerful tool for quickly identifying trends and outliers in data sets. With Lightning data tables, Salesforce developers can set color thresholds to automatically color cells according to whether their value is above/below a certain value or between two values. This feature is especially useful for displaying numerical values such as sales data, which often need to be highlighted at a glance so that users can quickly identify areas for improvement.

Let say you want to highlight a cell in a Lightning data table (lightning:datatable) when a specific value is invalid. In our example, we want to display those invalid emails in red.

The UI component
```
<aura:attribute name="data" type="Object"/>
<aura:attribute name="columns" type="List"/>
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>

<lightning:datatable
                             columns="{! v.columns }"
                             data="{! v.data }"
                             keyField="id"/>
```
The Component’s JS controller
```
doInit : function(component, event, helper) {
        component.set('v.columns', [
            { label: 'First Name', fieldName: 'firstName', type: 'text' },
            { label: 'Last Name', fieldName: 'lastName', type: 'text' },
            { 
                label: 'Email', 
                fieldName: 'email', 
                type: 'text',
                cellAttributes: {
                    class: {
                        fieldName: 'emailCellClass'
                    }
                }
            }
        ]);
        
        component.set('v.data', [
            {
                firstName: "Emelie", 
                lastName:"Sloan", 
                email: "valid@email.com", 
                emailCellClass: 'slds-truncate'
            },
            {
                firstName: "John", 
                lastName: "Jackson", 
                email:"invalid@email.com", 
                emailCellClass : "slds-truncate slds-text-color_error"
            }
        ]);
    },
```
Share this:
Twitter
LinkedIn
Reddit
Email
Telegram
WhatsApp
Like this:
Like Loading…

How to build a sitemap xml in Node js using Express

January 28th, 2023

Reading Time: 3 minutes

Creating a sitemap.xml file in Node.js using Express is a fairly straightforward process. In this post, I will go over the necessary steps to generate and set up a sitemap.xml file for your Node.js web application.
To get started, you’ll need to install the necessary dependencies. This includes installing on of the most used frameworks in Node.js: Express.

A good sitemap.xml will help you a lot in terms of SEO. It’s a nice starting point if you want to index your site. It’s just a standard XML file that search engines understand.

Can be as simple as this one:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>https://javaniceday.com/</loc>
      <lastmod>2019-11-18</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.8</priority>
   </url>
</urlset>

You can see the complete list of tags definitions here: https://www.sitemaps.org/protocol.html

Let’s code a Node.js web app using Express.js framework to expose an endpoint that prints a well-formed sitemap XML

Install Express framework

Install Express js globally to take advantage of Express generator

sudo npm install express -g

Run this command to generate a default Express structure

express --no-view --git node-sitemap-xml

You should see something like this. It could be different depending on your Express version.

create : node-sitemap-xml/
create : node-sitemap-xml/public/
create : node-sitemap-xml/public/javascripts/
create : node-sitemap-xml/public/images/
create : node-sitemap-xml/public/stylesheets/
create : node-sitemap-xml/public/stylesheets/style.css
create : node-sitemap-xml/routes/
create : node-sitemap-xml/routes/index.js
create : node-sitemap-xml/routes/users.js
create : node-sitemap-xml/public/index.html
create : node-sitemap-xml/.gitignore
create : node-sitemap-xml/app.js
create : node-sitemap-xml/package.json
create : node-sitemap-xml/bin/
create : node-sitemap-xml/bin/www

change directory:

cd node-sitemap-xml

Install dependencies

npm install

Run the web app

DEBUG=node-sitemap-xml:* npm start

Enter to the created folder

cd node-sitemap-xml

Install dependencies

npm install

Let’s add a dependency to convert JavaScript objects to XML

npm install js2xmlparser --save

Add moment.js

Add Moment js as a dependency to deal with dates. Moment js it’s an awesome module to parse, format and manipulate dates. Strongly recommended

npm install moment --save

Create a new file called sitemap.js at the routes folder and paste this content.

sitemap.xml generation route

      
const express = require("express");
const router = express.Router();
 
const js2xmlparser = require("js2xmlparser");
const moment = require("moment");
 
/**
 * It generates a standard sitemal.xml for SEO purposes
 */
router.get("/", function(req, res, next) {
    try {
        //our records to index
        const records = getRecordsFromDataSource();
        const collection = [];
        let today = moment();
        today = today.format("YYYY-MM-DD");
        //add site root url
        const rootUrl = {};
        rootUrl.loc = "https://javaniceday.com/";
        rootUrl.lastmod = today;
        rootUrl.changefreq = "daily";
        rootUrl.priority = "1.0";
        rootUrl["image:image"] = {
            "image:loc": "s://javaniceday.com/default-image.jpg",
            "image:caption":
                "javaniceday.com. Software development blog. Java, Node JS, Salesforce among other technologies",
        };
        collection.push(rootUrl);
 
        //add recipes urls
        for (let i = 0; i < records.length; i++) {
            const url = {};
            url.loc = records[i].url;
            url.lastmod = records[i].updated_at;
            url["image:image"] = {
                "image:loc": records[i].featured_image_url,
                "image:caption": records[i].description,
            };
 
            collection.push(url);
        }
        const col = {
            "@": {
                xmlns: "http://www.sitemaps.org/schemas/sitemap/0.9",
                "xmlns:image": "http://www.google.com/schemas/sitemap-image/1.1",
            },
            url: collection,
        };
        const xml = js2xmlparser.parse("urlset", col);
        res.set("Content-Type", "text/xml");
        res.status(200);
        res.send(xml);
    } catch (e) {
        next(e);
    }
});
 
/**
 * @return a collection to index (typically we'll get these records from our database)
 */
function getRecordsFromDataSource() {
    //these records will have our own structure, we return as they are and later we convert them to the xml standard format
    //so let's just define two records hard-coded
 
    const record1 = {
        url: "https://www.javaniceday.com/2019/07/11/better-queue-in-node-js/",
        description:
            "Introduction A good practice in software development is to delegate as much heavy work as possible to background jobs",
        featured_image_url: "https://javaniceday.com/example1.jpg",
        updated_at: "2019-07-11",
    };
    const record2 = {
        url: "https://www.javaniceday.com/2019/08/11/http-auth-basic-in-node-js-and-express/",
        description: "A small site in Node.js using Express that will have one protected page Http auth basic prompt",
        featured_image_url: "https://javaniceday.com/example1.jpg",
        updated_at: "2019-07-11",
    };
    return [record1, record2];
}
 
module.exports = router;

Basically, that code builds dynamically our sitemap XML.

First, it creates a block for the home page and then iterates on our records that can be a mix of different types of records such as recipes, news, cars, etc.
You will have to modify it as necessary.
Have in mind pagination if you have a big collection of records.

As a last step modify the file app.js to add our route:<br>const sitemapRouter = require("./routes/sitemap");<br>// (...)<br>app.use("/sitemap.xml", sitemapRouter);

Run locally

npm start

Open your browser at http://localhost:3000/sitemap.xml and you will see this output:

      
<?xml version='1.0'?>
<urlset xmlns='http://www.sitemaps.org/schemas/sitemap/0.9' xmlns:image='http://www.google.com/schemas/sitemap-image/1.1'>
    <url>
        <loc>https://www.javaniceday.com/</loc>
        <lastmod>2019-11-18</lastmod>
        <changefreq>daily</changefreq>
        <priority>1.0</priority>
        <image:image>
            <image:loc>s://www.javaniceday.com/default-image.jpg</image:loc>
            <image:caption>javaniceday.com. Software development blog. Java, Node JS, Salesforce among other technologies</image:caption>
        </image:image>
    </url>
    <url>
        <loc>https://www.javaniceday.com/2019/07/11/better-queue-in-node-js/</loc>
        <lastmod>2019-07-11</lastmod>
        <image:image>
            <image:loc>https://www.javaniceday.com/example1.jpg</image:loc>
            <image:caption>Introduction A good practice in software development is to delegate as much heavy work as possible to background jobs</image:caption>
        </image:image>
    </url>
    <url>
        <loc>https://www.javaniceday.com/2019/08/11/http-auth-basic-in-node-js-and-express/</loc>
        <lastmod>2019-07-11</lastmod>
        <image:image>
            <image:loc>https://javaniceday.com/example1.jpg</image:loc>
            <image:caption>A small site in Node.js using Express that will have one protected page Http auth basic prompt</image:caption>
        </image:image>
    </url>
</urlset>

After deploying the code in production you’ll want to give visibility to your sitemap.xml. I recommend you submit your URL to the most used (nowadays) search engine: Google.

Go to https://search.google.com/search-console and submit your URL. Google will inspect it periodically

See the full source code here: https://github.com/andrescanavesi/node-js-sitemap

How to connect to a Redshift database from Node.js

January 28th, 2023

Reading Time: < 1 minutes

Connecting to a Redshift database from Node.js is possible, but it involves some steps. Redshift is a popular data warehousing product by Amazon and allows for easy storage and analysis of structured data. With Node.js and Redshift, you can store, manage and analyze your data quickly and easily.

In this post, I’ll show you how to connect to a Redshift database from Node.js.

Redshift it’s a Postgres-based database so we can take advantage of pg-promise module

Code snippet to connect to Redshift from Node.js

import pgp from "pg-promise";

const connections = [];

export default class Redshift {
  static async getConnection() {
    const dbName = "myDb";

    if (!connections[dbName]) {
      const dbUser = "dbUser";
      const dbPassword = "dbPassword";
      const dbHost = "myHost";
      const dbPort = "dbPort";

      const dbc = pgp({ capSQL: true });
      console.log(`Opening connection to: ${dbName}, host is: ${dbHost}`);

      const connectionString = `postgres://${dbUser}:${dbPassword}@${dbHost}:${dbPort}/${dbName}`;
      connections[dbName] = dbc(connectionString);
    }

    return connections[dbName];
  }

  static async executeQuery(query) {
    try {
      const date1 = new Date().getTime();
      const connection = await this.getConnection();
      const result = await connection.query(query);

      const date2 = new Date().getTime();
      const durationMs = date2 - date1;
      const durationSeconds = Math.round(durationMs / 1000);
      let dataLength = 0;

      if (result && result.length) dataLength = result.length;

      console.log(
        `[Redshift] [${durationMs}ms] [${durationSeconds}s] [${dataLength.toLocaleString()} records] ${query}`
      );

      return result;
    } catch (e) {
      console.error(`Error executing query: ${query} Error: ${e.message}`);
      throw e;
    }
  }
}

Resources

First-time shipped implementation is like going into technical debt

February 22nd, 2022
Reading Time: 6 minutes
As a starting point, we can say roughly that technical debt is all those decisions we make during software development that narrow down our capacity as a team to create new features that add value to the business.

In the same way we say every printed document is automatically obsolete we can say that first-time shipped implementation is like going into technical debt

Technical debt is often asymptomatic, making it difficult to prioritize, but once the symptoms appear, it may be too late and the associated costs may be much higher.

Table of contents
Sort of technical debt

I’m sure the following list is familiar for you. Don’t worry, you are not alone.
- Known tolerable bugs
- Bad user experience
- Tolerable security issues
- Obsolete release process
- Missing automated backups
- Missing or bad configured alerts
- Performance issues
- Legacy systems
- Unreadable code
- Missing or poor automated tests
- Outdated documentation (if any)
And likely there are much more, even different flavors of the same item

What about the good technical debt?

Not all is negative when we talk about technical debt, there is also good technical debt. Think for example when you borrow some money to achieve a goal such as buying a car.
In software development, we are all experts on “borrowing money”. Our problem comes when we accumulate technical debt in the same way we accumulate money debt in our life.

Let’s say then that we want to deliver something quick to close a deal or tolerate bad performance because the hardware is cheap. For a couple of months that can be good technical debt but if we scale and we do not start over again, that will be the bad one

What are the consequences of technical debt?

People don’t want to work with spaghetti code or in a project that is not well organized. So a big consequence is team rotation which comes with more frequent onboarding periods which generates low team productivity. Also, these kinds of projects make people think they are not adding value to their own careers and feel stuck all the time which makes them feel unmotivated.

Delayed delivery. Every new feature will be delayed because of technical debt due to our time will be consumed on troubleshooting existing issues or because of a poor release process. Instead of making analysis or coding, our team is dedicated to resolving that performance issue that is making our users stop using our product

User experience is everywhere. Technical debt related to the poor user experience could cause a gradual decline in the use of our product by users.

Are defects technical debt?

The short answer is: it depends. Let’s say users are unable to make payments or unable to add products to the shopping cart. That’s a huge bug and cannot be considered debt because your business depends on it.
On the other hand, if the shopping cart has a button whose style does not 100% respect the company’s branding, that is something that could be considered technical debt. Unless the button’s color represents the branding of our competitor 🙂

An example where seems to be a gray area and needs to be addressed

While most will agree that known, unaddressed vulnerabilities are a type of technical debt, it is questionable if a newly discovered vulnerability is also technical debt. The key here is whether the security risk needs to be addressed and, for that answer, we can look at an organization’s service level agreements (SLAs) for vulnerability management. If an organization sets an SLA that requires all high-level vulnerabilities to be addressed within one day, then we can say that high vulnerabilities older than that day are debt.
Measuring Technical Debt

Is the development environment configuration technical debt?

Yes it is!
It doesn’t affect directly business but it affects new team members’ ramp up or existing members’ reconfiguration for example when a computer has broken. We should have a clear guide about development environment configuration. It must describe all the steps necessary to start adding new code and test it locally. Also, the development environment shouldn’t so complex, It cannot take an entire day to get up and running

These kind of things should be described in your guide (ideally the default readme file in your repo)
- Necessary software pre-installed needed such as JRE, Node.js, etc
- Recommended IDE(s) the team uses. I know this should be agnostic but the team can collaborate better
- Environment variables o be set. There are some default and non sensitive variables that can be share in the repo. For the sensitive ones please provide direction (a contact, a team role) about how to get them
- Docker configuration if the useam uses it
Technical debt and product management

One of the most difficult things as software engineers is to argue about technical debt. Many times the arguments are made more difficult when there are conflicts between the development team and the product manager. Mistrust between work teams is always the enemy of any valid argument

The following exchange should be familiar. The product manager describes the next feature they want to be added to the product. Developers give a high estimate for the time it takes to implement, which is seen as too long. The developers talk about having to deal with the implications of making changes to lots of hard-to-understand code or working around bugs in old libraries or frameworks. Then the developers ask for time to address these problems, and the product manager declines, referring to the big backlog of desired features that need to be implemented first.
Managing Technical Debt in a Microservice Architecture

Provide context and be sincere about why we arrived at this point is the best bet to get that time you need to fix or improve that annoying piece of code.

Most persons involved with software development have faced difficulties trying to get product or project managers to agree to let them spend time fixing their project’s technical debt.
Managing Technical Debt in a Microservice Architecture

How much technical debt do I have?

Adding new functionality in a product with little technical debt as in a product with several development sprints and a lot of accumulated technical debt.

Here is where a good bunch of tests can save us from headaches. Unit tests with good code coverage and integration tests are the minimum to increase chances of success, otherwise adding new code will become harder and harder.

Knowing how much technical debt you have will allow you to think better about the impact of adding new features and new members in case of delivery delays. But remember that 9 Women Can’t Make a Baby in a Month. Sometimes adding new members is not the best decision.

How to estimate the impact of technical debt

If adding a new feature in a context of huge technical debt, imagine how hard can be to reproduce and fix a bug. That’s why is important to know how much time and money we spend on tasks related to a specific technical debt.

Estimation is not an easy tasks but at least we can narrow down our cost to have an idea. Here we have some clues:

(…) we can therefore calculate the cost for this type of debt relatively easily by looking at the cost of support activities related to the issue and adding that to the impact on productivity for the development of new code. The cost of the debt can also be easily calculated by looking at the time and resources required to fix the problem.
Measuring Technical Debt

As an estimate, let’s say this work would cost $10,000 to mitigate. Comparatively, due to the issue, the entire team, incident management and operations center took one to two hours per week remediating the impact. Let’s estimate this cost at $2,000/week. Based on this high-level analysis, it is clear that the ROI for fixing this defect would be realized five weeks after fixing the bug.
Measuring Technical Debt

Final thoughts

A project can fail for many reasons: miscommunication, lack of expertise, bad business decisions, poor management, unclear scope, etc. Technical debt is an ingredient that, combined with others, can help things go wrong in the long run. It is like the excess of sugar or salt for our body, we can live with them for a while but if we do not control them in time, the consequences could be terrible.

If you are from the dev team, try to always have the technical debt under your radar and under control. Try to avoid vague implementations that can become quickly in technical debt. Communication is the best tool to tackle it on time.

If you are someone from product, you should know that technical debt is something impossible to avoid because that’s the nature of software development, mixed with business decisions and sometimes with something crueler: time to market.

Resources
- Measuring Technical Debt
- Managing Technical Debt in a Microservice Architecture
Feature photo by Alice Pasqual on Unsplash
Share this:
Twitter
LinkedIn
Reddit
Email
Telegram
WhatsApp
Like this:
Like Loading…
flexsearch tutorial

November 9th, 2021
Reading Time: 2 minutes
What is flexsearch?

FlexSearch is a full-text search library for JavaScript, which can be used in both Node.js and the browser. It is designed to be fast, efficient, and customizable.

In Node.js, FlexSearch can be used to index and search through large amounts of text data. It uses a combination of in-memory data structures and on-disk persistence to allow for efficient indexing and searching of large datasets.

FlexSearch supports a variety of search features, including full-text search, fuzzy search, and exact match search. It also supports boolean queries, phrase search, and proximity search, which allows for more precise and advanced searching.

FlexSearch is easy to use and integrates well with Node.js applications. It is also highly customizable, allowing you to tweak and configure the search algorithms to suit your specific needs.

Overall, FlexSearch is a powerful tool for anyone who needs to perform fast and efficient full-text searches in Node.js applications.

flexsearch It’s a module available through npm or yarn to index in-memory data. With this module, you will be able to search or display related data on your site.

We are going to build a small example to see how it works.

How to install flexsearch

Like any other Node.js module, install it like this:
```
      
yarn add flexsearch
      
    
```
Or
```
      
npm install flexsearch
      
    
```
How to use flexsearch

Just create an index.js file to see how it works.
```
      
const { Index } = require("flexsearch");

const options = {
    charset: "latin:extra",
    preset: 'match',
    tokenize: 'strict',
    cache: false
}
const index = new Index(options);

// my collection
const recipes = [
    {id:1, title: 'Orange cake'},
    {id:2, title: 'New York-Style Bacon Egg and Cheese Sandwich'},
    {id:3, title: 'Bacon Wrapped Cheese Stuffed Meatloaf'},
    {id:4, title: 'French Yogurt Cake'},
    {id:5, title: 'Gougeres (French Cheese Puffs)'},
    {id:6, title: 'Authentic Brazilian Cheese Bread (Pão de Queijo)'},
    {id:7, title: 'Camarão na Moranga (Brazilian Shrimp Stuffed Pumpkin)'},
    {id:8, title: 'Parmesan Cheese Muffins'},
    {id:9, title: 'Cookie Dough Stuffed Oreos'},
]

// index my collection
recipes.forEach((recipe) =>{
    index.add(recipe.id, recipe.title)
})


// search (it will return an array of ids)
const ids = index.search('Cookie', 5);
console.debug(ids);
// based on the ids returned by the index, look for the recipes for those ids
const result = recipes.filter((recipe) => ids.includes(recipe.id));
console.debug(result);
```
Execution output
```
      
[ 9, 1, 4, 6 ]
[
  { id: 1, title: 'Orange cake' },
  { id: 4, title: 'French Yogurt Cake' },
  { id: 6, title: 'Authentic Brazilian Cheese Bread (Pão de Queijo)' },
  { id: 9, title: 'Cookie Dough Stuffed Oreos' }
]

      
   
```
Share this:
Twitter
LinkedIn
Reddit
Email
Telegram
WhatsApp
Like this:
Like Loading…

jsxBracketSameLine – Prettier how to configure

October 28th, 2021

Reading Time: < 1 minutes

How to install Prettier

      
npm install prettier --save-dev

How to configure Prettier

      
touch .prettierrc.json

Add some default configuration:

      
{
	"trailingComma": "es5",
	"tabWidth": 4,
	"printWidth": 120,
	"semi": true,
	"singleQuote": false,
	"useTabs": false,
	"quoteProps": "as-needed",
	"jsxSingleQuote": false,
	"bracketSpacing": false,
	"bracketSameLine": true,
	"arrowParens": "avoid",
	"requirePragma": false,
	"insertPragma": false,
	"proseWrap": "preserve",
	"endOfLine": "lf"
}

Note: jsxBracketSameLine is deprectaed since version 2.4.1. You must use bracketSameLine instead

How to ignore folders in Prettier

      
touch .prettierignore

Add some folders to be ignored. Tipically it will be pretty similar to your .gitignore file

      
# Ignore artifacts:
node_modules
dist
build
coverage
.nyc_output

How to start detecting issues with Prettier

      
 prettier . -c

Pro tip: instead of running by hand, you can integrate it with you favorite IDE

Photo by Greg Rosenke on Unsplash

Prettier config

September 8th, 2021
Reading Time: < 1 minutes
Overview

Prettier is a code formatter that supports many languages and can be integrated with most of the editors.

Also, you can integrate it with your CI/CD.

That why nobody will be able to merge to the master branch if the code is not well-formatted.

With Prettier you will be able to define your own rules, however default rules are enough at the beginning.

Your rules will be defined in a file called .prettierrc placed in your project’s root.

Let’s see how to install Prettier and then make some configurations.
```
      
npm install prettier --save-dev
  
    
```
Example of Prettier config file
```
      
{
  "trailingComma": "es5",
  "tabWidth": 4,
  "printWidth": 120,
  "semi": true,
  "singleQuote": false,
  "useTabs": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "bracketSpacing": false,
  "jsxBracketSameLine": true,
  "arrowParens": "avoid",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "endOfLine": "lf"
  }
  
    
```
See more options for the .prettierrc file

Gulp integration
```
      
npm install gulp-prettier -save-dev
  
    
```
```
      
gulp.task("prettier", () => {
  return gulp
  .src("./**/*.js")
  .pipe(prettier(".prettierrc"))
  .pipe(gulp.dest("./"));
});
  
    
```
PhpStorm IDE integration

If you are using PHP Storm, it’s highly recommended that you configure your IDE to auto-format your code every time you save a .js file

https://prettier.io/docs/en/webstorm.html
The plugin will take the rules from you .prettierrc file

Configure a File Watcher in PhpStorm to auto-format the code on save.

Visual Studio Code

You can install the extension as any other and then you can use these configurations in you settings.js with the prefix “prettier”
```
      
{
  "prettier.useTabs": false,
  "prettier.trailingComma": "es5",
  "prettier.tabWidth": 4,
  "prettier.printWidth": 120,
  "prettier.semi": true,
  "prettier.singleQuote": false,
  "prettier.quoteProps": "as-needed",
  "prettier.jsxSingleQuote": false,
  "prettier.bracketSpacing": false,
  "prettier.jsxBracketSameLine": true,
  "prettier.arrowParens": "avoid",
  "prettier.proseWrap": "preserve",
  "prettier.endOfLine": "lf"
}
  
    
```
Share this:
Twitter
LinkedIn
Reddit
Email
Telegram
WhatsApp
Like this:
Like Loading…

Category: dev

Share this:

Like this:

Share this:

Like this:

Share this:

Like this:

Expected result

The UI component

The Component’s JS controller

Share this:

Like this:

Install Express framework

Install dependencies

Run the web app

Add moment.js

sitemap.xml generation route

Run locally

Share this:

Like this:

Code snippet to connect to Redshift from Node.js

Resources

Share this:

Like this:

Table of contents

Sort of technical debt

What about the good technical debt?

What are the consequences of technical debt?

Are defects technical debt?

Is the development environment configuration technical debt?

Technical debt and product management

How much technical debt do I have?

How to estimate the impact of technical debt

Final thoughts

Resources

Share this:

Like this:

What is flexsearch?

How to install flexsearch

How to use flexsearch

Execution output

Share this:

Like this:

How to install Prettier

How to configure Prettier

How to ignore folders in Prettier

How to start detecting issues with Prettier

Share this:

Like this:

Overview

Let’s see how to install Prettier and then make some configurations.

Example of Prettier config file

Gulp integration

PhpStorm IDE integration

Visual Studio Code

Share this:

Like this: