DEV Community: Edwin Nuñez

How to Add Google Analytics to a React-Next.js Application 📈⚛️

Edwin Nuñez — Fri, 02 Sep 2022 17:35:34 +0000

Data is today the world’s most valuable commodity. So understanding how your users are using your platform is crucial for taking your business to the next level.

And in the world of analytics, Google is the leader. And the great news is it’s completely free to use! 👌

Today we will see how to integrate Google analytics into a Next.js application. If you are interested in pure React, another article is for you.

Step-1️⃣ Get the key

Create a new account on https://analytics.google.com/ . When you register for the first time, you will be asked to add a new property.

The admin portion of your account allows you to add a new property if you already have a Google Analytics account. The next step is to construct a data stream. We will choose web as we are implementing this on the web.

You will then need to give some information about your website. For now, enter some fictitious data and start the broadcast.

Now you will have to grab the Measurement ID which is the most important thing in the whole process.

The pattern will resemble the following G-XXXXXXXXXX. Adapt that.

We may now incorporate this into the project itself. Do that, then!

Step-2️⃣ Initialize the project

npx create-next-app nextjs-google-analytics-demo

Step-3️⃣ Add to Environment

Make a file called .env.local in the project root. Then insert the subsequent code there. Although you could do this directly in the code, environment variables are preferable.

NEXT_PUBLIC_GOOGLE_ANALYTICS= 'G-LXXGTJJDFX'

Step-4️⃣ Load Analytics

Open the __app.tsx file and add the 2 script tags there.

import { AppProps } from 'next/app';
import Head from 'next/head';
import React, { useEffect } from 'react';
import './styles.css';
import Script from 'next/script';
import Router from 'next/router';


function CustomApp({ Component, pageProps, router }: AppProps) {

    return (
        <>
            <Script strategy="lazyOnload" src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`} />

            <Script strategy="lazyOnload">
                {`
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){dataLayer.push(arguments);}
                    gtag('js', new Date());
                    gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
                    page_path: window.location.pathname,
                    });
                `}
            </Script>


            <Head>
                <title>Welcome!</title>
                <meta name="viewport" content="initial-scale=1, width=device-width" />
            </Head>

            <Component {...pageProps} />
        </>
    );
}


export default CustomApp;

Step-5️⃣ Check the browser

Run the app using the following command

npm run dev or yarn run

And go to the URL http://localhost:3000 and open the console.

Step-6️⃣ Check if Analytics is Enabled

Open the console on your browser and type dataLayer there.

Undefined indicates that there was a problem. Congratulations if you see something similar to the image above! Your analytics have been enabled.

**Guarapo Labs **creates digital products that assist people in developing their ideas. Our staff has all of the necessary skills to work on your web and virtual reality game projects. Our commitment to educating our clients on how to provide the finest customer experience with their solutions is reflected in the high quality of our software.

Ruby Style Guide 💻💎

Edwin Nuñez — Fri, 29 Apr 2022 20:15:53 +0000

What is Ruby Style Guide?

Ruby is the main language at Shopify. We are primarily a Ruby shop and we are probably one of the largest out there. Ruby is the go-to language for new web projects and scripting.

This Style Guide is the result of over a decade of Ruby development at Shopify. Much of its content is based on Bozhidar Batsov's Ruby Style Guide, adapted to Shopify by many contributors.

— Installing Rubocop to Your Project

$ gem install rubocop

Now let’s create a program that can be linted better

name = "Karthik"
puts "Hello #{name}"

Now we save it and run Rubocop on it as shown:

$ rubocop rubocop_example.rb

rubocop spits out some errors as shown

Inspecting 1 file
C

Offenses:

rubocop_example.rb:1:1: C: [Correctable] Style/FrozenStringLiteralComment: Missing frozen string literal comment.
name = "Karthik"
^
rubocop_example.rb:1:8: C: [Correctable] Style/StringLiterals: Prefer single-quoted strings when you don't need string interpolation or special symbols.
name = "Karthik"
       ^^^^^^^^^

1 file inspected, 2 offenses detected, 2 offenses auto-correctable

- Create a .yml file in the root and paste this:

AllCops:
  NewCops: enable
  Exclude:
    - 'db/migrate/*.rb'
    - 'config/**/*.rb'
    - 'bin/*'
    - 'spec/rails_helper.rb'
    - 'lib/**/*.rb' #it should be fixed later
    - 'spec/lib/**/*.rb' #it should be fixed later
    - 'spec/requests/**/*.rb' #it should be fixed later
Metrics/BlockLength:
  Exclude:
    - 'Rakefile'
    - '**/*.rake'
    - 'spec/**/*.rb'
    - 'app/admin/**/*.rb'
    - 'db/**/*.rb'
    - 'db/migrate/*.rb'
    - 'config/*.rb'
Documentation:
  Include:
    - 'app/models/**/*.rb'
  Exclude:
    - 'app/models/ability.rb'
    - 'app/models/application_record.rb'
    - 'app/models/concerns/**'
    - 'app/models/filter_client.rb'
    - 'app/models/filter_warehouse.rb'
Metrics/MethodLength:
  Max: 12
Metrics/ClassLength:
  Max: 1000

That's all; Rubocop is now ready to work on your project! 🥳 🎉

Thank you for reading!📒

Guarapo Labs creates digital products that assist people in developing their ideas. Our staff has all of the necessary skills to work on your web and virtual reality game projects. Our commitment to educating our clients on how to provide the finest customer experience with their solutions is reflected in the high quality of our software.

JavaScript Style Guide💻📔

Edwin Nuñez — Tue, 19 Apr 2022 15:43:08 +0000

What is the Airbnb Style Guide?

The Airbnb style guide is a set of best practices and guidelines for generating quality code. It is one of the most popular style guides available on Github.

- Step 1 — Installing ESLint to Your Project

ESLint is the most popular and very flexible JavaScript linting tool. It is a static code analyzer to identify problematic patterns in your JavaScript code.

To install ESLint, we need first to install npm, the package manager for JavaScript.

Now we’re ready! Create a package.json file with default configuration using the following command.

npm init -y

To set up ESLint, the next thing we need to do is, install the ESLint npm package. Finally, install ESLint with the following command.

npm install eslint --save-dev

Cool, we’re done with the ESLint installation. The next thing we have to do is install the style guide we want to use, Airbnb. Luckily, Airbnb provides an ESLint configuration that anyone can use.

- Step 2 — Installing Airbnb Style Guide to Your Project

ESLint needs a configuration file to implement rules. We can create the configuration file to enforce the rules type the following command

npx eslint --init

This command will give us several options to choose from.

Let’s go with the third option. After choosing the third option and pressing enter, you’ll get another set of options to choose from. Select the most suitable option as per your need until you come across the following option.

Choose the first option from here and Airbnb’s style guide from the next set of options.

If you want to set up a AirBnb style guide for JavaScript instead of Airbnb’s style guide, you can follow the same set of instructions and choose the respective style guide from the above step.

To complete the style guide installation, press enter and choose other options as per your requirement. This will create a .eslintrc.json file on your working directory, and it will look like the below.

Also, based on the options you chose, your package.json file will look like the following

For ESLint to find and fix the bugs right on our text editor, we need to install the VS Code ESLint extension. So, fantastic, we’re are done with the style guide implementation. Now it’s time to move on to the Prettier installation.

- Step 3 — Installing Prettier to Your Projec

Prettier is one of the most popular code formatters. We can install Prettier locally using the following command.

npm install --save-dev --save-exact prettier

Then, we need to create a configuration file for Prettier in our root directory.

echo {}> .prettierrc.json

This JSON file holds the rules that Prettier use to format our code. In addition, I have added a few of my preferences below.

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": true,
  "bracketSpacing": true,
  "singleQuote": true
}

Now let’s install the VS Code Prettier extension. Then we need to ensure that all our JavaScript files get formatted by Prettier. Go to the settings.json file in VS Code and change the relevant existing line as below.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

We are almost done! To make sure Prettier formats on save, insert the following line on the same file mentioned above.

"editor.formatOnSave": true,

It turns out ESLint rules might conflict with Prettier. To avoid that, we need to disable the formatting for ESLint. For that, we need to install one extra npm package

npm i eslint-config-prettier

Then add prettierto the extends array in your .eslintrc.json file as below. Make sure to add it at the end of the array so that it will override other configs.

That’s it! Now it’s time for some fun 😋

Testing Airbnb Style Guide

To test if it is working, create a index.js file and add the following code line set.

Pretty cool, right? 😍 As you can see, ESLint finds and fix issues in our code and Prettier formats on save.

Final Thoughts

Combining Airbnb style, ESLint, and Prettier into our workflow helps us enhance the code quality and maintain a consistent style guide. However, I suggest going ahead and look over the documentation of each of these tools.

Thank you for reading!📒

Github Profile Readme Custom 🎨📌

Edwin Nuñez — Wed, 09 Mar 2022 17:44:43 +0000

Want to add a Profile README to your GitHub account but don't know how? GitHub introduced a new Profile README feature that allows users to showcase their achievements on their profile.

In this post, we will learn what is a Profile level README on Github, and how you can easily create one for your account.

What Is a Profile README?

If you are an experienced GitHub user, you would already know the role of a README file in a project. For those who don't, README plays an essential part on GitHub as it clearly communicates the idea of a project to its contributors and other users on the platform.

Similarly, Profile README acts like a document that informs other users on GitHub about your profile. README files support Markdown, which allows you to customize the content of the file in a much better way. Also, you can add as much content as you want on your Profile README.

How to Create a GitHub Profile README

✨
Anyone with a GitHub account can create a README for their profile. All you have to do is create a new GitHub repository that has the same name as your username. Then, add a README file and customize it accordingly.

To add a GitHub Profile README to your account:

Head over to the official GitHub website.
Sign in to your account by entering the credentials.
Click on your Profile Picture located at the top-right corner of the screen.
From the drop-down menu, select the option that says Your Repositories.
Click on the New button to create a new repository.
Under the** Owner label*, you will find your username. You need to enter the same name in the **Repository Name* field.
Scroll down and check the Add a README File option. Then, click on the Create Repository button.
Now head back to the Repositories tab and click on the newly created repository.
You will find a preview of the README.md file. Click on the small Edit button located in the top-right corner of the README preview.
Type in the content you want to add to your Profile README.
Scroll down to the bottom and click on Commit Changes.You can also add a commit message to increase your GitHub reputation.
The README will now appear on your GitHub profile page.

GitHub Profile README Generator🔨

Here you can easily generate your github profile with a template.