InfyOm Blog

latest-post

Last week, we run into a problem for one of the large Gatsby + ReactJS + Laravel projects in hosting which is hosted with Apache Webserver on Amazon AWS EC2. The problem we were facing was, for some reason, when we reload the Gatsby website, it was giving a 404 error page.

If you open a home page and then a normal visit then the website will fully function, but if you reload the page then it gives an error. And we found it happens when we are using Dynamic routing of React Route in Gatsby as per show in Gatsby documentation here.

Also, what we found, if we test the website build with gatsby serve then it works fine. But while using Apache, it behaves differently and we found that this problem has been faced by lots of people over the internet.

So what we came up with is, we used gatsby serve with an apache proxy. Here is how we did it,

Step 1 - Setup Project

As a first step, clone the project on the server and run a command, gatsby build to create a gatsby build.

Step 2 - Setup PM2 for Gatsby Serve

The next step that we need to do is run gatsby serve. But as you know, we can not run this command directly via console, because as you exit from the console, the command will be terminated.

So we will be using pm2 package, a NodeJS utility that is used to run nodejs apps.

For that, we will need to install pm2 globally. Run the following command to install it,

npm install pm2 -g

You can find other installation ways here if you need.

Once the installation has been done, let's run the gatsby serve command via pm2. For that run the following command from the gatsby project folder,

pm2 start gatsby --name my-web-app -- serve

where my-web-app you can replace with the name of your app.

Once, it's running, try to test it, if it's working correctly by opening the URL http://your-ip-address:9000/. Make sure, port 9000 is opened on your server for traffic.

Step 3 - Configure Apache

Once, gatsby serve is working and tested. The next step is to configure apache to proxy all port 80 traffic to port 9000.

For that, edit your apache conf file (or virtual host conf file), and add the following lines (or configure it to something like the following),

<VirtualHost *:80>
        ServerName my-web-app.infyom.com

        ServerAdmin webmaster@infyom.com

        ProxyRequests On
        ProxyPass / http://localhost:9000/
        ProxyPassReverse / http://localhost:9000/

        ErrorLog ${APACHE_LOG_DIR}/my-web-app.infyom.com.error.log
        CustomLog ${APACHE_LOG_DIR}/my-web-app.log combined

        ......
        # any other options below as per your need
        ......
</VirtualHost>

The next step you need to do is restart your apache server by,

sudo service apache2 restart

And then you can just open the URL https://my-web-app.infyom.com and it should work fine.

Bonus

New Deployment

Whenever you deploy a new code, you again need to run gatsby build and then pm2 restart my-web-app. Then only it will take new changes.

Troubleshooting

Sometimes, we found that we need to restart apache as well after the new deployment. so if you run into any trouble, then make sure to restart apache as well and it should solve the problem.

I hope it may help you to resolve your 404 problem.

July 16, 20213 minutesuserMitul Golakiya

Posts

post

Multiple logo file formats

Digital logo applications such as websites and anything seen on the screen use the RGB color spectrum. This color spectrum is more varied than standard printed material so digitally used logo files are designed a little differently. They usually do not require high-resolution art and are not limited to one color.

The printed logo application like printed brochures, business cards, T-shirts, decals, folders, and ink on paper is 99% of the time prepared with CMYK and Pantone color spectrum. This spectrum is handled differently than a digital application and requires high resolution so that it looks crisp when printed on paper.

Logo File Formats

Logo file formats can come in many shapes and sizes. The format is driven by how it will be used, now and in the future, as well as what the logo looks like. When your logo designer provides the digital file formats to you, place them somewhere secure so you do not misplace them and can consistently reference the files. Below are common logo file formats that cover 99% of all logo marketing applications.

  • JPG
  • PNG
  • GIF
  • EPS
  • AI
  • PDF
  • SVG


Which logo file formats are most common?

It is very common to have JPG or PNG logo file formats. This is most common because of many programs such as Word and PowerPoint import/drop. When you use these file formats on the screen, it is mostly acceptable. But have you ever tried to enlarge one of these file formats and the logo starts to get blurred or pixelated? This is because these formats are pixel-based and limited in how much they can be expanded before image quality deteriorates.


Breakdown of logo file formats and their best uses

The use of JPG (or JPEG) does not require digital and print, as it is the RGB and CMYK color space. If you don't have software like Photoshop, it creates colorful spots. One way to determine which large size JPG logo file can be used is to drag and drop the logo into your web browser window; You can use a digital app and some small print apps when viewing four or five-inch spots or more logos. JPG files are pixel-based and can be quite large. They also do not support PNG (listed below) as a demonstration background.

PNG Logo files are good for placing your logo on a photo above a photo or on a colored background in a digital app as it supports transparency. PNG logo file formats are widely supported on websites. PNG for any printed projects. Do not use files. PNG files are pixel-based and do not expand well.

November 24, 20202 minutesauthorKishan Savaliya
post

We have recently developed a site into the gatsby. We want to add Google Analytics to the website.

So, this is the way we implemented Google Analytics in the Gatsby site.

Use Gatsby Google GTag Plugin

Gatsby has a plugin gatsby-plugin-google-gtag that be used to easily add Google Global Site Tag to your Gatsby site.

Install the package by running the following command:

npm i gatsby-plugin-google-gtag --save

Configuration

Once the installation is complete, you can now add this plugin to your gatsby-config.js:

Configure trackingIds and other options. Add this into the plugins array. Like,

module.exports = {
  // ...
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
              // You can add multiple tracking ids and a pageview event will be fired for all of them.
              trackingIds: [
                "GA-TRACKING_ID", // Google Analytics / GA
                "AW-CONVERSION_ID", // Google Ads / Adwords / AW
                "DC-FLOODIGHT_ID", // Marketing Platform advertising products (Display & Video 360, Search Ads 360, and Campaign Manager)
              ],
              // This object gets passed directly to the gtag config command
              // This config will be shared across all trackingIds
              gtagConfig: {
                optimize_id: "OPT_CONTAINER_ID",
                anonymize_ip: true,
                cookie_expires: 0,
              },
              // This object is used for configuration specific to this plugin
              pluginConfig: {
                // Puts tracking script in the head instead of the body
                head: false,
                // Setting this parameter is also optional
                respectDNT: true,
                // Avoids sending pageview hits from custom paths
                exclude: ["/preview/**", "/do-not-track/me/too/"],
              },
      },
    },
  ],
}

This plugin automatically sends a “pageview” event to all products given as “trackingIds” on every Gatsby's route change.

If you want to call a custom event you have access to window.gtag where you can call an event for all products.

Check out this code.

typeof window !== "undefined" && window.gtag("event", "click", { ...data })

NOTE: This plugin only works in production mode! To test your Global Site Tag is installed and 

You need to run the following command for firing events correctly.

gatsby build && gatsby serve

If you need to exclude any path from the tracking system, you can add one or more to this optional array.

November 22, 20202 minutesauthorShailesh Ladumor
post

We will learn to run the app without connecting a USB cable in this blog. The main purpose of this blog is to let users run apps without any restriction. Sometimes if the cable is connected with the device and if the device cable gets disturbed then the app not run properly.

Let's see how we can run the app without cable.

Step 1: Click File Menu => Settings

Step 2: Click Plugins



Step 3: Install ADB Wi-Fi Plugin


Notes:

  • In the third image, I already installed the plugin in my android studio. But in your case, you may need to install it.
  • Then your android studio restart.

After the restart, your android studio will show the "ADB Wifi" option showing as per the following image

Click ADB Wifi and the below screen will be displayed.

  • Click to connect 
  • Make sure your device and pc are connected to the same wifi. Otherwise, it will not get connected.
  • You will need to connect one time when the android studio is opened the first time.
November 21, 20201 minuteauthorPankaj Valani
post
One of our clients once asked me to explain what CMYK means and what is the difference between it and RGB. Here's why it's important.






We discussed the need for one of their vendors to provide or convert a digital image file as CMYK. If this conversion is not done properly, the resulting image may have muddy colors and lack vibrancy that may reflect badly on your brand.


CMYK is an acronym for Cyan, Magenta, Yellow, and Key (Black) - the ink colors used in the typical four-color printing process. RGB is an acronym for red, green, and blue light colors used in digital display screens.


CMYK is a term widely used in the graphic design business and is also known as "full-color". This printing method uses a process where each ink color is printed with a specific pattern, each subtractive color overlapping to create a spectrum. In the subtractive color spectrum, the more color you overlap, the darker the color becomes. Our eyes interpret this printed color spectrum as images and words on paper or printed surfaces

Printing a four-color process is not possible with what you see on your computer monitor.

RGB is an additive color spectrum. By default, any image displayed on a monitor or digital display screen will be created in RGB. In this color space, the more overlapping color you add, the lighter the resulting image. For this reason, almost every digital camera saves its images in the RGB color spectrum.

2.png 80.5 KB

RGB color spectrum is higher than CMYK.


CMYK is for printing. RGB is for digital screens. But the thing to remember is that the RGB color spectrum is larger than CMYK, so what you see on your computer monitor is not possible by printing a four-color process. When we are designing artwork for our clients, careful attention is paid when converting artwork from RGB to CMYK. In the example above, you can see how RGB images with very bright colors can see unnecessary color shifts when converting to CMYK.



At Trillion, a combination of quality devices and expert eyes results in colors that look great in whatever environment they appear in, so your brand will always look its best. Don't let RGB fool you. If your brand has experienced a mismatch between your print and digital marketing efforts and you want to improve things.
November 20, 20202 minutesauthorKishan Savaliya
post

In the last Blog we have discussed the basics of BSC, let's start a discussion about four perspectives of BSC.

A Balance Scorecard looks at an organization from four different perspectives to measure its health, each of these perspectives focuses on various sides of the company and creating a balanced view of the organization.

And yes all four areas of BSC are interrelated we cannot ignore any out of four to the success of the organization.



 

Financial Perspective:

This perspective views organizational financial performance and the uses of financial resources.


We need to focus on two points:

  • Is the company achieving its financial goals?
  • How well the strategies and operations contribute to improving financial health?


Well, now the question is how we can measure the output of the financial perspective?

these data always past focused, we need to gather two types of data. 

  1. Historical Data: How did we do last month, last week, last year, and so on.
  2. Current Data: How we are doing right now, Today?

For instance, 

  1. our net profit for the year versus last year
  2. Our sales revenue this year versus last year

These measures of corporate performance are based on history and also vary from organization to organization. 


As the BSC is holistic approach, any key objectives that is related to company's financial health and the performance may include in this perspective as given below:

  • Cost Saving and Efficiencies [Specified Goals: Reduced production cost 10% by 2021]
  • Profit Margins [increase operational profit Margins]
  • Revenue Sources [adding new revenue channels/department/products]

In the end, 

  • Are you making money?
  • Are your investors happy?   
    If yes then be happy...

The financial health of your organisation may be the indicators of your past decisions but still incredibly important.

' Money keeps the company alive ' and the financial perspective focus solely on this. 


Internal Process Perspective:

This perspective views various organizational processes and the efficiency of the particular process. 


  1. from this view, the question should be asked what internal processes have added values within the organization and what activities need to carry in the organization (In all three perspectives).
  2.  The internal Process perspective looks at how smoothly your business is running (Here, Efficiency is important )
  3. It's all about,
  • Reducing waste, 
  • Speeding process/ production
  • Doing more with less


We need to focus on three points:

  • Is the company improving the critical process?
  • Are there any obstacles standing between ideas and execution?
  • How quickly you can adapt to changing business conditions?


This perspective answer the question :

"what process we must excel at to satisfy our shareholders/financial Backers and customers?"


To know more about BSC please read my weekly Blog.



November 18, 20202 minutesauthorMariyam Bemat
post
In the last Blog we have discussed a few tips on recruitment, let's glance at the more tips.....
  1. Remember only you are not interviewing
  2. Look back years of candidate's career
  3. Trust your Gut
  4. Don't be boring Interviewer 
  5. Represent Job Description
  6. Think like Marketer 
1.Remember only you are not interviewing:
Always keep in mind that only you are not hiring for a particular role, we have a competitive job market, most candidates we interviewed will also be interviewing elsewhere and that's why we need to be active, present a positive company image towards the employee.

2.Look back years of candidate's career:
If we are hiring for an experienced person we need to ask questions related to his job experience, how he/she was handling difficult situations, and listen closely to the answer. you may learn a lot or what you need. Remember, don't forget to examine body language from it would come to know about his/her attitude towards the role.

3.Trust your Gut:
don't ignore your gut. If the candidate found good on paper but still after interviewing something from the inner side tells you it's just not right then don't proceed without more investigation. 

4.Don't be boring Interviewer :
Boring questions will bring boring answers. Don't ask such questions. Ask relevant questions about the job. Don't waste your time and candidate time by asking questions which answer don't matter to you.

5.Represent Job Description:
 While interviewing candidates you need to represent the role and responsibilities for the profile is candidate become more aware of the Job and able to clear doubts. 

6.Think like Marketer :
Due to thought competition in the market, Human Resource Recruiters need to be marketer, we have to present our company in a unique way to attract talent from the market.

The process of recruitment is more difficult as all business owners want to hire more talent in the organization. Hence, we need to make proper strategies for hiring as better Recruitment & selection strategies result in the improvement of organizational outcome. We can say investment in 'Recruitment and Selection  process' is money well spent. 

November 17, 20202 minutesauthorMariyam Bemat
post

In the previous article, we learned 4 cases for how to  test  Android Applications.

In this article, we will learn more cases for how to  test  Android Applications.

5. Compatibility testing test cases

Compatibility testing is performed to protect against mobile application failures as devices have different operating systems, sizes, resolutions, and so on.  Determines that an app works consistently across various platforms and environments. 

Six compatibility test case scenarios questions:

  1. Have you tested on the best test devices and operating systems for mobile apps?
  2. How does the app work with different parameters such as bandwidth, operating speed, capacity, etc.?
  3. Will the app work properly with different mobile browsers such as Chrome, Safari, Firefox, Microsoft Edge, etc.
  4. Does the app's user interface remain consistent, visible and accessible across different screen sizes?
  5. Is the text readable for all users?
  6. Does the app work seamlessly in different configurations? 

6. Security testing test cases

Security testing ensures that the application data and network security requirements are met per the guidelines.  It focuses on identifying possible risks and security vulnerabilities so that the application is not exploited and the data is protected. 

Twenty-four security testing scenarios for mobile applications:

  1. Can the mobile app resist any brute force attack to guess a person's username, password, or credit card number?
  2. Does the app allow an attacker to access sensitive content or functionality without proper authentication?
  3. This includes making sure communications with the backend are properly secured.  Is there an effective password protection system within the mobile app?
  4. Verify dynamic dependencies.
  5. Measures taken to prevent attackers from accessing these vulnerabilities.
  6. What steps have been taken to prevent SQL injection-related attacks?
  7. Identify and repair any unmanaged code scenarios
  8. Make sure certificates are validated and whether the app implements certificate pinning
  9. Protect your application and network from denial of service attacks
  10. Analyze data storage and validation requirements
  11. Create  session management to prevent unauthorized users from accessing unsolicited information
  12. Check if the encryption code is damaged and repair what was found.
  13. Are the business logic implementations secure and not vulnerable to any external attack?
  14. Analyze file system interactions, determine any vulnerabilities and correct these problems.
  15. What protocols are in place should hackers attempt to reconfigure the default landing page?
  16. Protect from client-side harmful injections.
  17. Protect yourself from but vicious runtime injections.
  18. Investigate and prevent any malicious possibilities from file caching.
  19. Protect from insecure data storage in app keyboard cache.
  20. Investigate and prevent malicious actions by cookies.
  21. To provide regular checks for the  data protection analysis
  22. Investigate and prevent malicious actions from custom-made files
  23. Preventing memory corruption cases
  24. Analyze and prevent vulnerabilities from different data streams 

7. Localization testing test cases

Localization testing ensures that the mobile app provides a flawless user experience in a specific locale based on the target language and country.  It aims to ensure that the functionality and content of the application is fully tailored to meet the needs of users in a particular location.  Since fully localized apps and websites outperform their competition, this is a test case that shouldn't be overlooked.  Partnering with a respected third party with global reach alleviates some stresses and unknown variables when using localization.  For example, Testis covers over 100 countries and over 140 languages. 

Eleven localization testing scenarios for mobile applications:

  1. The translated content must be checked for accuracy.  This should also include all verification or error messages that may appear. 
  2. The language should be formatted correctly.(e.g. Arabic format from right to left, Japanese writing style of Last Name, First Name, etc.) 
  3. The terminology is consistent across the user interface. 
  4. The time and date are correctly formatted. 
  5. The currency is the local equivalent. 
  6. The colors are appropriate and convey the right message. 
  7. Ensure the license and rules that comply with the laws and regulations of the destination region.
  8. The layout of the text content is error free. 
  9. Hyperlinks and hotkey functions work as expected. 
  10. Entry fields support special characters and are validated as necessary (ie. postal codes)
  11. Ensure that the localized UI has the same type of elements and numbers as the source product. 

8. Recoverability testing test cases

The recovery test is a non-functional testing technique that determines how quickly a mobile application can recover after a system crash or hardware failure. 

Five recoverability testing scenarios questions:

  1. Will the app continue on the last operation in the event of a hard restart or system crash?
  2. What, if any, causes crash recovery and transaction interruptions?
  3. How effective is it at restoring the application after an unexpected interruption or crash?
  4. How does the application handle a transaction during a power outage?
  5. What is the expected process when the app needs to recover data directly affected by a failed connection? 

9. Regression testing test cases

QA and mobile app testing doesn't end once an app is launched.  When an application is updated, even small changes can create unexpected problems.  This is why regression testing is key.  The purpose of regression testing is to ensure that new code changes in the software do not cause errors or interruptions. 

Four regression testing scenarios for mobile applications:

  1. Check the changes to existing features
  2. Check the new changes implemented
  3. Check the new features added 
  4. Check for potential side effects after changes start 

That's it. If you want a good application, take these tips and follow cases for Android Application test. It will help to make quality & standardize your Applications.

November 15, 20204 minutesauthorBhumi Khimani
post
Maintaining the integrity of your brand is essential for long-term success. However, Trillion often encounters third-party logo design files that do not appear to have the highest care when created. The logos in question come to us in the form of a sponsor logo, an affiliate logo, and a certificate or award logo.

The following points are often enough that we think it is important to provide guidance so that you can avoid these pitfalls. With the help of a graphic designer, the issues of this logo below can be solved and fixed if you ever consider it in your own logo.

1. Bad lines in the logo

When the characters and design elements in the logo are drawn or modified, great care should be taken by the graphic designer. The lines and dots inside the logo should be smooth and clean. In the logo design example below, you will see how the inside line of the letter does not have a curve towards it. This is one of the most common problems we see in poorly made logos.

image-1.png 24.05 KB
Logo files are made up of many dots and lines. When the logo is small, these imperfections may not be significant, but as the logo gets bigger the issue becomes more obvious and problematic. You should have a graphic designer who will fix the curves and lines of the logo. Then use the new files to replace the problem logo.


2. Improper Alignment of Logo Elements

Since graphic designers create logos, they are composing letters and design elements. They have complete control over the sizing and alignment of objects. With all this control, and especially the number of elements or characters is likely to increase that something does not adjust as it should.

image-2.png 21.79 KB

As with the "bad lines" example above, a small logo size can hide problems when compared to an extended version. But on the screen or in digital access, cutting your logo the wrong way causes it to look blurry (due to pixel interpolation, solid dark pixels are divided into multiple lighter pixels). Graphic designers can adjust the arrangement of elements using the Snap-to-Grid or Snap-to-Guide feature, functions available in Adobe Creative Cloud software. This process will ensure that items are arranged just like your logo.

3. Missing Font in Logo


A logo design should always be presented as a piece of artwork composed of lines and points or pixels. Unfortunately, this is not always the case. If a graphic designer used a particular font in your logo, you may not have that font on your, or your vendor’s, computer. A missing font often leads to it being substituted by another font available on the computer. It’s a major problem that prevents anyone who doesn’t have the font to see the logo properly. This even holds true for a graphic designer trying to fix the problem.

image-3.png 112.53 KB

As a logo is designed, fonts are commonly used either as they are, or as a starting point to be modified for the design. The important step in the logo design process is to “outline” the letters being used in the logo so they become a piece of artwork rather than letters you can edit by typing. Once this process has been done, it is not reversible and the font will no longer be required to view and reproduce the logo. Be aware that fonts can cost between $20 and $150 or more just for one weight, such as Helvetica Neue Bold.


4. The Incorrect Logo File Format


Another one of the most common issues we see with logos that are supplied to us is that they are not in the correct file format. If your graphic designer comes to you and says “it’s not the right format” it can mean a few things. However, if your designer intends on using the logo, it is not going to work.

image-4.png 138.65 KB
The most common incorrect file format we receive is a raster logo such as a .jpg rather than a vector logo, such as a .eps. A .jpg logo might be fine if the resolution is high enough and it does not require being produced on a color or transparent background. Vector logos will offer a graphic designer the most options, including saving the artwork to other file formats. A vector logo can be enlarged or reduced infinitely without losing quality.

5. The Incorrect Logo Color Format


A less common but potentially more challenging logo file format issue is the color mode. A logo that is being printed on paper, on a t-shirt, or being included on a website will have different color spectrum requirements. Some can be easily converted from one to another but others cannot. Again, a vector logo will offer a graphic designer the best chance to fix the issue.

image-5.png 169.69 KB


Logo Design Done Right

Providing our clients with logo designs and all of the necessary file formats they might need is an important part of our creative process. Once our design has been approved, we create full-color, 1-color, 2-color, black, and white (knockout) versions of the logo for both print and digital usage. We clearly label the files and place them into properly named folders, making it easy to find the right logo.
November 14, 20204 minutesauthorKishan Savaliya