Forem: Irshad Ali

Styling in React JS

Irshad Ali — Sat, 14 Dec 2019 14:08:50 +0000

Inline Styling

Inline styles are nothing new,they are a HTML feature that we've all most likely used at some point. However,implementing inline styles in React is
slightly different,we store the values as objects.

Inline object definition

<div style={{backgroundColor: "green" }}> IRSHAD ALI </div>

Object literal definition

const divStyle = {backgroundColor: "green" }
<div sstyle={divStyle}> IRSHAD ALI </div>

Whilst inline style are often used when applying conditional style, they are often not the best choice when more than one element requires the same
styling.

CSS & CSS Pre-processors

Whilst the process of using vanilla CSS or a CSS pre-processor is the same in React, there are a couple of notable differences. When applying
classes to elements, we use the 'className' syntax rather then 'class'. We also link our stylesheet using the @import syntax.

For CSS

import React from 'react'
import './App.css'

const App = () => {
  return <Dogs/>
  }
export default App;

CSS Modules

CSS Modules are simply .css file in which all CSS style and animation are defined. With an exception all of the style declared are locally
scoped to the Component they are imported into.

.dogSounds{
font-size: 1.5rem;
color: green;
text-decoration: underline;
}

All CSS style for one component are declared in one file.

import React from 'react'
import style form "./dog.css";

const Dog = () => {
  return <h1 style={style.dogSounds}> woof</h1>
}

export default Dog;

CSS-in-JS Libraries

CSS-in-JS and inline style are extremely similar. However with inline styles React attaches the style to the DOM nodes,where as CSS-IN-JS libraries
take your styles and inject them into a <style> tag in the DOM.

npm install --save styled-components

Can also b declared in another file and impored in

import styled from 'styled-components

const Title = styled,h1`
  font-size: 1.5em;
  color: green;
  text-align: center;
  `;

  **//IN COMPONENT**

  <Title>
    Heloo World!
  </Title>

Thank's To @TheTraveling.Dev

How To Redirecting All Traffic To Netlify

Irshad Ali — Wed, 04 Dec 2019 14:09:39 +0000

Redirecting In Netlify

When we deploy a site in Netlify everything works pretty fin but when it comes to routing there are some errors like when we navigate to Blog page in a site it takes us to yoursite.com/blog that's fin. But! When we refresh that same page then we see this screen.

To solve this problem

Thankfully,Netlify provides us a way to do this via a _redirects file. You need to make sure that this file sits at the root of your build directory.

So what to do?

Just create a new file with the name of _redirects and put this file in the root folder of your site. Then after add below code in that file. That's it

/* /index.html 200

Above line states that we want all paths redirected to /index.html with response of 200.

Even you can redirects and rewrites

Add one or more redirects tables to your Netlify configuration file. This method allows for more structured configuration and additional capabilities, as described in the Netlify configuration file syntax section below.

home                     /
/blog/my-post.php        /blog/my-post
/news                    /blog
/cuties                  https://www.yoursite.com

You can customize and alter the redirect behavior by adding options to the end of each line. Visit the redirect options and rewrites and proxies docs for more details.

Syntax

from: The path you want to redirect.
to: The URL or path you want to redirect to.
status: The HTTP status code you want to use in that redirect; 301 by default.

Convert React App into a Progressive Web App (PWA)

Irshad Ali — Mon, 02 Dec 2019 17:06:12 +0000

What is a PWA?

Progressive Web Apps are user experiences that have the reach of the web, and are:

Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
Engaging - Feel like a natural app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.

1. Register a Service Worker

What is a service worker?
Service workers (client-side proxies that pre-cache key resources) enable PWAs to load instantly and provide an instant,
reliable experience for users, regardless of the network state.

Create a new worker.js file in the public folder (public/worker.js) and add the following code:

Let CACHE_NAME = 'your-app-name';
Let urlsToCache = [
  '/',
  '/completed'
];

// Install a service worker
self.addEventListener('install', event => {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// Cache and return requests
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

// Update a service worker
self.addEventListener('activate', event => {
  Let cacheWhitelist = ['your-app-name'];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Note! from above code replace (your-app-name) with your app name

2. Now Update HTML

Update your index.html file in the public folder (public/index.html)
to check if the client’s browser supports service workers. Just Add below code inside the body tag of your app's (public/index.html)

<script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('worker.js').then(function(registration) {
            console.log('Worker registration successful', registration.scope);
          }, function(err) {
            console.log('Worker registration failed', err);
          }).catch(function(err) {
            console.log(err);
          });
        });
      } else {
        console.log('Service Worker is not supported by browser.');
      }
    </script>

3. Activating ServiceWorker

Now go to your app's index.js in the src folder (src/index.js)

Now Update serviceWorker.unregister() to serviceWorker.register() Like Below Code At Last Line

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.register();

Restart (npm start) and reload your React app — you should see the message “Worker registration successful” in the console.

4. Create a manifest.json file

Manifest is a simple JSON file that tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop. Having a manifest is required by Chrome to show the Add to Home Screen prompt.

A typical manifest file includes information about the app name, icons it should use, the start_url it should start at when launched, and more.

{
    "name": "your-app-name",
    "short_name": "your-app-name",
    "icons": [
        {
            "src": "img/logo.png",
            "sizes": "92x92",
            "type": "image/png"
        },
        {
            "src": "/img/logo.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "img/logo.png",
            "sizes": "152x152",
            "type": "image/png"
        }        
    ],
    "start_url": "/",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#f0f2f5",
    "theme_color": "#96f2d7"
}

That's it 🎉 Congratulations, you just created a working progressive web app!

Give A heart ❤️ To Appreciate My Work And Follow Me For More Awesome Content.

This Is "irshad ali"

Check Out React PWA Demo: https://www.irshadali.site

Make One Page Link To All Your Webpages

Irshad Ali — Sat, 30 Nov 2019 07:39:07 +0000

Make your own linktree

Remember when Linktr.ee took the Instagram world by storm back in December of 2016? Everyone was like, "YAS. Now I can link to more than just one thing in my Insta bio!"

All of that FOR FREE. Sounds great, right?

Well, believe it or not, there's a couple drawbacks from their free version.

WHAT YOU SHOULD DO INSTEAD...

Just use below code and make your own landing page for all your social media platforms. Use it everywhere, link to anywhere! Link to Multiple Webpages.

Replace You Details In Side The Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="https://res.cloudinary.com/phonerefer/image/upload/v1575096088/ve0o2n85nfvgdatgqer2.jpg" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#343a40" />
  <meta
          name="description"
          content="Links To My Accounts | Developed By - Your Name"
  />  
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <title>Links - Your Name</title>
     <style>
       body{
         background-color: #faf8ef;
       }
       h5{
             color: #343a40;
       }
       .name{
           color: #343a40;
       }
       .love{
           color: #343a40 !important;
       }
       /*----------------- Mail-------------------- */
       #email{
           text-decoration: none;
           float: right;
           color:#343a40;
       }
       .footer{
           margin-top: 5% !important;
           margin-bottom: 10px;
       }
       @media (max-width: 479px) {
            .footer{
            margin-top: 35% !important;
            }
       }
     </style>
</head>
<body>
<div class="container">
  <div class="media mt-5">
    <img src="https://res.cloudinary.com/phonerefer/image/upload/v1575096088/ve0o2n85nfvgdatgqer2.jpg" class="m-3" alt="image" width="75px" height="75px">
    <div class="media-body m-2">
      <h5 class="align-items-center mt-2">Your Name</h5>
      <p>Hello!
      I am (Your Name)
      Developer based in (Your City), (Your Country).</p>
    </div>
  </div>
<div class="mt-4">
  <a href="#" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fa fa-address-card">&nbsp;</i>Portfolio</a>
  <br>
  <a href="#" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fab fa-github">&nbsp;</i>Github</a>
  <br>
  <a href="#" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fab fa-codepen">&nbsp;</i>Codepen</a>
  <br>
  <a href="#" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fab fa-instagram">&nbsp;</i>Instagram</a>
  <br>
  <a href="#" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fab fa-twitter">&nbsp;</i>Twitter</a>
  <br>
  <a href="#" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fa fa-code">&nbsp;</i>Company Site</a>
</div>
        <!--------------------Footer---------------------------->
  <div class="footer mt-5">
    <hr/>
    <h6>Made With <span class="love">♥</span> in (Your City), (Your Country)</h6>
    <h6>
      Proudly Hosted By
      <a href="/" class="name" target="_blank"> (Your Name) </a>
      <a id="email" href="mailto:Your Mail"> <i class="fa fa-envelope"> </i> </a>
    </h6>
  </div>
</div>

</body>

</html>

Get Code through GitHub: https://github.com/phonerefer/LinkTree
Demo: https://mylinks.netlify.com

Change To Do!

Change Photos

Line No: 5 This is favicon
Line No: 48 This will be your photo

Social Links

Line No: 58 to 67 replace # with your desire link

Names

Replace (Your Name) with Your Name
Replace (Your City) with Your City
Replace (Your Country) with Your Country Name

Gmail

Line No: 74 replace (Your Mail) with your gmail without brackets

Thanks For Reading....

Convert Any Static Website To PWA

Irshad Ali — Fri, 29 Nov 2019 11:45:51 +0000

What is PWA?

Progressive Web Apps are user experiences that have the reach of the web, and are:

Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.

Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.

Engaging - Feel like a natural app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.

1. Create a manifest.json file

A typical manifest file includes information about the app name, icons it should use, the start_url it should start at when launched, and more.

{
    "name": "K IRSHAD ALI",
    "short_name": "ALI",
    "icons": [
        {
            "src": "img/logo.png",
            "sizes": "92x92",
            "type": "image/png"
        },
        {
            "src": "/img/logo.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "img/logo.png",
            "sizes": "152x152",
            "type": "image/png"
        }        
    ],
    "start_url": "/",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#f0f2f5",
    "theme_color": "#96f2d7"
}

And also connect it in your index.html in order to work.

<link rel="manifest" href="manifest.json">

2. Add a Service Worker

Service Worker is the background script which the browser can run while the user is not on the page. It is the element that gives the offline support and gets active when the notification is pushed.

Create a Service Worker (create a file with name SW.js),

Copy this code in SW.js.

/** An empty service worker! */ self.addEventListener('fetch', function(event) { });

And that’s it.

3. Register the Service Worker

You will have to register the code in your website’s code, for that, open up your App.js file and paste this Now,

navigator.serviceWorker && navigator.serviceWorker.register('SW.js').then(function (registration) { });

the code will get executed on every single page load. Check if its working properly by reloading the page and then checking – chrome://serviceworker-internals/

Now your website will be able to prompt users to install it on their home screens and secondly, you will be able to make your site able to support push notifications and even work offline.

4. Make the Site Work Offline

First step would be to open sw.js script and get hold of caches object. Once you have that, update the code and app the entire website to cache.

Try out how it’s working now. Uninstall the present app and load it on Chrome. Next, refresh the page and select ‘Add to Home Screen’ in the right corner menu.

For abiding by the rule that when Service Worker changes, the page should reload and reinstall it, all you will have to do is add a component which has the ‘version’ of the service worker. When that changes, the install movement happens again, caching the resources that would have changed.

Congratulations, you now know how to turn the website into Progressive Web App and if you followed the steps side-by-side, you have now even migrated your website into a Progressive Web App!

Disclaimer:

 While these steps will give you, the developer, an exact idea of how you will have to fill in the blanks and move from Point A in the process to Point C, if you are reading this as an enthusiastic entrepreneur who wishes to take charge of the migration, I would say, don’t do it without a person who excels in knowing how to turn website into progressive Web App.

While these steps are explanatory, there are a number of elements that come up as part of the process when you sit with the actual development process. So, instead of trying your hands with the steps and finding a different result because you weren’t sure of the between the line elements, give the job to the Progressive Web Apps experts who specialize in the domain.