DEV Community: C M Pandey

My Hacktoberfest 2020 experience 😄🎉

C M Pandey — Tue, 03 Nov 2020 13:28:53 +0000

What I contributed to Hacktoberfest 2020?

I created a basic repo for newbies to get started with open-source.

css-puns

Do you know a CSS pun? 😄 Put it over here and make others laugh! 😉

.luck {
  display:none
}

.middle-finger {
  display:flex;
  justify-content:center;
}

.wealthy {
  top: 1%;
}

#me .lookingGood{
  backface-visibility: hidden;
}

.teeth {
  gap: 10px;
}

.addams {
  font-family: "do do do do clap clap";
}

.bond {
    color: #007;
}

.books.last-opened{
  display: none;
}

.jamba-juice {
  mix-blend-mode: normal;
  color: green;
}

.oliver-queen {
  cursor: arrow;
}

.up {
  animation-direction: reverse;
  float: unset;
}

.mosquito-net {
  display: grid;
}

.your-fat-darling:hover {
  transform: scaleX(100);
}

.belly {
  overflow: visible;
}

.stammer {
  animation-delay:

…

View on GitHub

Repo stats

It received 9 stars, 33 forks, and 49 PRs.

Thank You! DEV & Digital Ocean for this initiative! ❤

I automated my weather bot with GitHub Action. 😎

C M Pandey — Tue, 15 Sep 2020 06:04:15 +0000

My Workflow: Weather Bot

Submission Category: Wacky Wildcards

Yaml File: action.yml

Link to Code:

Weather Bot

An automated bot that notifies you every morning about the weather in your city on your telegram app.

View on GitHub

How to add Splash Screen in a React Native Android App? 🌟

C M Pandey — Wed, 26 Aug 2020 13:12:50 +0000

Hi there!

The reason why you're here for this is probably that you couldn't find the correct, updated, and easiest solution to this till now!

But now, worry no more! You've arrived at the right place. I will layout all the steps over here, which I did to implement it within minutes! Let's get this thing started! 🤘

Step #1

Go to app/src/main/java/[packageName] and create a new file SplashActivity.java and copy-paste the following code inside it.

package com.packagename; // Replace this with your package name

import android.content.Intent;
import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

Step #2

Go to app/src/main/AndroidManifest.xml and modify it as follows to use SplashActivity:

Add the following activity inside the <application> tag.

<activity
    android:name=".SplashActivity"
    android:theme="@style/SplashTheme"
    android:label="@string/app_name"
    >
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

Remove the following intent from the MainActivity tag.

<intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
</intent-filter>

And add android:exported="true" inside that activity.

Now, your AndroidManifest.xml should be looking like this:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.packagename">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme">

      <activity
        android:name=".SplashActivity"
        android:theme="@style/SplashTheme"
        android:label="@string/app_name"
        >
        <intent-filter>
          <action android:name="android.intent.action.MAIN" />
          <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>

      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true"
        >
      </activity>

      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

Step #3

Now, we will declare a SplashTheme for SplashActivity. Go to app/src/main/res/values/styles.xml and add the following style inside <resources>.

<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:background">@drawable/background_splash</item>
        <item name="android:statusBarColor">@color/background</item>
</style>

Step #4

Go to android\app\src\main\res\values and create a file colors.xml if not present already.
We used a background color constant above, so we must add it to our colors.xml file.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Insert your background color for the splash screen -->
    <color name="background">#fff</color>
</resources>

Step #5

Go to android/app/src/main/res/drawable (create drawable folder if it doesn't exist already) and place your splash screen image (its's name should be splash_screen.png) here and also create a file background_splash.xml with the following code:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/background" />
    <item
        android:drawable="@drawable/splash_screen"
        android:height="300dp"
        android:width="300dp"
        android:gravity="center"
    />
</layer-list>

If the size of your splash screen is equal to the size of the device screen, then remove android:height and android:width from the above-mentioned <item> tag.

Step #6

Install react-native-splash-screen module in your project and then import SplashScreen from it in your App.js file.

import SplashScreen from 'react-native-splash-screen';

We need to display the splash screen only till the first component is mounted, and to do that make a useEffect hook inside your App component body (before return) as follows:

Don't forget to import useEffect from 'react'.

useEffect(() => {
    SplashScreen.hide();
}, []);

Step #7

Go to app/src/main/java/[packageName]/MainActivity.java and import the following modules above other imports.

import org.devio.rn.splashscreen.SplashScreen;
import android.os.Bundle;

Add this method to the top of MainActivity class.

@Override
protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this, R.style.SplashStatusBarTheme);
    super.onCreate(savedInstanceState);
}

Step #8

Go to android/app/src/main/res/values/styles.xml to add SplashStatusBarTheme just like we did in Step #3.

<style name="SplashStatusBarTheme" parent="SplashScreen_SplashTheme">
        <item name="android:statusBarColor">@color/background</item>
</style>

If you don't do this, then StatusBar will change color to black when the JS code of the app will load.

Step #9

Go to android/app/src/main/res/ and create a new folder layout (if it doesn't already exist). Inside that folder, create a file launch_screen.xml (this file is needed by react-native-splash-screen library). Inside that file, create a layout using the previously created background as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background_splash" 
/>

Step #10

Go to android/app/src/main/res/values/colors.xml and add the following tag just like we did in step #4, otherwise, the app will crash. Don't change the color value.

<color name="primary_dark">#000</color>

And that's it! We did it! Your splash screen has been added to your app! Go and check it now! Thank me later! 😉

Hope you learned something new from this! 😃

PS: If you have any confusion or encounter any error while following the above-mentioned steps, then feel free to comment below, I will be happy to help you resolve it. 😊

Have a nice day! 🤗

How my portfolio got a SEO score of 100 ? 😲

C M Pandey — Sat, 04 Jul 2020 20:26:48 +0000

Hi there!

The reason why you're here is probably because you wanna know what I did to achieve a SEO score of 100 on lighthouse.

Link to my portfolio website is at the bottom.

I will lay out all my tips and tricks over here, which I implemented to achieve this! Let's get this thing started! 🤘

Tip #1

Don't use plugins

Most of the search engines don't index browser plugins relying content (Java/ Flash). Plugin-based content doesn't show up in search results, so it's better to avoid it!

Plus, plugins aren't supported by most of the mobile devices, which creates a not-so-good experience for a mobile user.

Here's an article which will help you to convert a Flash video to HTML5 video

Tip #2

Use `lang` attribute

Using lang attribute tells the search engine what version of a page they should list in search results for a given language or region. You should always include the lang attribute inside the tag, to declare the language of the webpage.

<html lang="en">

Tip #3

Use `alt` attribute for images

While having an alt attribute for every image might not seem to be an important thing to do, but let me tell you, IT IS.

If due to some reason, an image doesn't loads, the alt text will tell the user what the image was about.

Make sure that it is short and descriptive.

<img src="image.png" alt="logo">

If the image is used just for decoration and does not provide any useful content, then give it an empty alt="" attribute and it will be removed from the accessibility tree.

<img src="image.png" alt="">

Tip #4

Don't block it from indexing

Search engines can only show those pages in their search results which haven't been explicitly blocked for indexing. Some HTTP headers and meta tags can be used to tell the crawlers that this page shouldn't be indexed.

Make sure that your code doesn't contain any of the following code lines:

<meta name="robots" content="noindex"/>
X-Robots-Tag: noindex
<meta name="AdsBot-Google" content="noindex"/>

Tip #5

Write descriptive text for your links

Link text is a word or phrase in a hyperlink which can be clicked. When link text clearly conveys a hyperlink's target, both users and search engines can understand the content and its realtion to the linked page.

Don't

<p> To view my projects <a href="projects.html"> click here! </a> </p>

<p> View <a href="projects.html"> my projects </a> </p>

Tip #6

Include description in your `<meta>` tag

this is the most important thing to do for SEO. The name and content attribute tells the summary of the content of a page that is included in the search results. A well-written, unique meta description makes your page appear more relevant and can increase your search traffic.

<meta name="keyword" content="cmcodes, portfolio, react, react native, javascript, developer">
<meta name="description" content="Here's the portfolio of cmcodes (react & react-native javascript developer).">
<meta name="author" content="cmcodes">

Tip #7

Include the `<title>` tag

This is the first thing which a user reads when he searches for a specific term. Make sure that it is relevant and eye-catchy!

<title>cmcodes - React Developer</title>

Tip #8

Include `viewport` in `<meta>` tag

Many search engines rank pages on the basis of mobile-responsiveness. Without a viewport meta tag, mobile devices render the webpage with the width of a desktop and then scale the pages down, which makes them difficult to read.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">

Thank you for reading so far! 😄

Hope you learned something new from this! 😃

Here's the link to my portfolio website 👉 cmcodes

Here's the link to my portfolio source code 👇

cmcodes1 / cmcodes1.github.io

😊 Here's my portfolio where you can see all my projects, blogs, and achievements.

Check it out and do let me know your views! Eager to hear your opinion. 😁

Feel free to share your portfolio link in the comments below. I would be very happy to have a look at them. 😊

Happy Coding! 👨‍💻

My website now loads in less than 1 sec! Here's how I did it! ⚡

C M Pandey — Sat, 04 Jul 2020 18:43:30 +0000

Hi there!

The reason why you're here is probably because you wanna know what I did to load my portfolio website in just 0.8 seconds and achieved a performance score of 97 on lighthouse.

Link to my portfolio and its source code is at the bottom.

I will lay out all my tips and tricks over here, which I implemented to achieve this! Let's get this thing started! 🤘

NOTE: According to Lighthouse, "Values are estimated and may vary. The performance score is based only on these metrics." This report was generated on 2nd of August, 06:29:22 PM IST. These scores might reflect a bit different on your machine due to internet connection speed or multiple extensions running in the background or I might add some features later. Also, I have "clearly" mentioned above that these scores were generated by Google Lighthouse. Don't expect the same score on any other tool. So, please don't try to troll on this basis and save your energy. Peace! ✌

Tip #1

Don't use a large DOM tree.

My portfolio contains 487 DOM elements with a maximum DOM depth of 13 and a maximum of 20 child elements only!

If your DOM tree is very large, then it will slow down the performance of your webpage:

Memory performance

Using general query selectors such as document.querySelectorAll('li'), stores references to a multiple nodes which can consume the memory capabilities of the device.

Network efficiency and load performance

A big DOM tree has many nodes (not visible in first load), which slows down load time and increases data costs for your users.

Runtime performance

Whenever a user/ script interacts with your webpage, the browser needs to recompute the position and styling of nodes. having complicated style rules can slow down the rendering.

Tip #2

Don't use enormous network payloads.

My portfolio has a total network payloads size of just 764 KB.

The total payload size of your website should be below 1600 KB.
To keep it low, you can do the following:

Defer requests until they're needed.
Minify and compress network payloads.
Set the compression level of JPEG images to 85.

Always remember, large network payloads cost large amounts of money.

Tip #3

Don't use GIFs.

Rather use PNG/ WebP format for dispalying static images. But if you want to display animated content then instead of using large GIFs (inefficient & pixelated) consider using MPEG4/ WebM video format.

Now, you will say what if I want their features like:

Automatic play.
Continuous loop.
No audio.

Well let me rescue you from this, the HTML5 <video> element allows recreating these behaviors.

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm">
  <source src="my-animation.mp4" type="video/mp4">
</video>

Tip #4

Preload key requests

Suppose your page is loading a JS file which fetched another JS and a CSS file, the page won't appear completely until both of those resources are downloaded, parsed, and executed.

If the browser would be able to start the requests earlier, then there would be much time saving. Luckily, you can do so by declaring preload links.

<link rel="preload" href="style.css" as="style">

Tip #5

Don't try multiple page redirects.

Redirecting slows down the load speed of your webpage. When a browser requests a resource that has been redirected, the server returns an HTTP response. The browser must then make another HTTP request at the new location to retrieve that resource. This additional trip across the network can delay the loading of the resource by hundreds of milliseconds.

If you want to divert your mobile users to the mobile version of your webpage, consider redesigning your website to make it responsive.

Tip #6

Preconnect to required origins.

Using the keyword preconnect gives a signal to the bowser to establish early connections to important third-party origins.

<link rel="preconnect" href="https://www.google.com">

Doing so establishes a connection to the origin, and that informs the bowser that you want the process to start ASAP.

Tip #7

Encode your images efficiently.

A compression level of 85 is considered good enough for JPEG images. You can optimize your images in many ways:

Avoiding GIFs.
Using image CDNs.
Compressing images.
Lazy loading images.
Using WebP image format.
Serving responsive images.

Tip #8

Minify your JavaScript files.

Minification is the process of removing whitespace and any code that is not necessary to create a smaller but perfectly valid code file.

By minifying your JavaScript files, you can reduce the payload size and parsing time for the script.

I use JavaScript Minifier for the same.

Tip #9

Minify your CSS files.

CSS files occupy more whitespace than any other file. By minifying them, we can save some bytes for sure!
Do you know that you can even change a color value to its shorthand equivalent, like #000000 can be reduced to #000, and will work just fine!

I use CSS Minifier for the same.

Tip #10

Resize your images.

I can bet this is the most given advice when it comes to webperf because the size of images is far far far greater than any text script file, so an over-sized image might be an overkill.

You should never upload images that are larger than what's rendered on the screen, that will do no good.

You can either just simply resize your image dimensions or use:

Responsive images.
Image CDNs.
SVG instead of icons.

Thank you for reading so far! 😄
Hope you learned something new from this! 😃

Here's the link to my portfolio website 👉 cmcodes

Here's the link to my portfolio source code 👇

cmcodes1 / cmcodes1.github.io

😊 Here's my portfolio where you can see all my projects, blogs, and achievements.

Check it out and do let me know your views! Eager to hear your opinion. 😁

Feel free to share your portfolio link in the comments below. I would be very happy to have a look at them. 😊

Happy Coding! 👨‍💻

DEV Community: C M Pandey

My Hacktoberfest 2020 experience 😄🎉

What I contributed to Hacktoberfest 2020?

cmcodes1 / css-puns

Do you know a CSS pun? 😄 Put it over here and make others laugh! 😉

css-puns

Repo stats

Thank You! DEV & Digital Ocean for this initiative! ❤

I automated my weather bot with GitHub Action. 😎

My Workflow: Weather Bot

Submission Category: Wacky Wildcards

Yaml File: action.yml

Link to Code:

cmcodes1 / weather-bot

🌞 Sends a message daily about the weather in your city.

Weather Bot

How to add Splash Screen in a React Native Android App? 🌟

Step #1

Step #2

Step #3

Step #4

Step #5

Step #6

Step #7

Step #8

Step #9

Step #10

How my portfolio got a SEO score of 100 ? 😲

Tip #1

Don't use plugins

Tip #2

Use lang attribute

Tip #3

Use alt attribute for images

Tip #4

Don't block it from indexing

Tip #5

Write descriptive text for your links

Tip #6

Include description in your <meta> tag

Tip #7

Include the <title> tag

Tip #8

Include viewport in <meta> tag

cmcodes1 / cmcodes1.github.io

😊 Here's my portfolio where you can see all my projects, blogs, and achievements.

My website now loads in less than 1 sec! Here's how I did it! ⚡

Tip #1

Don't use a large DOM tree.

Tip #2

Don't use enormous network payloads.

Tip #3

Don't use GIFs.

Tip #4

Preload key requests

Tip #5

Don't try multiple page redirects.

Tip #6

Preconnect to required origins.

Tip #7

Encode your images efficiently.

Tip #8

Minify your JavaScript files.

Tip #9

Minify your CSS files.

Tip #10

Resize your images.

cmcodes1 / cmcodes1.github.io

😊 Here's my portfolio where you can see all my projects, blogs, and achievements.

Use `lang` attribute

Use `alt` attribute for images

Include description in your `<meta>` tag

Include the `<title>` tag

Include `viewport` in `<meta>` tag