Skip to content

Instantly share code, notes, and snippets.

View officialrajdeepsingh's full-sized avatar

Rajdeep Singh officialrajdeepsingh

46 followers · 13 following
View GitHub Profile
@officialrajdeepsingh
officialrajdeepsingh / app.js
Created March 1, 2020 14:14
How to access nested JSON object Inside Array in react js
import React, {Component} from "react";
//react bootstrap components
import CardDeck from "react-bootstrap/CardDeck";
import Card from "react-bootstrap/Card";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
//scss
import style from "./styles.module.scss";
@officialrajdeepsingh
officialrajdeepsingh / data.json
Created March 1, 2020 14:58
json data file
[
{
"userId": 1,
"id": 1,
"title": " How to Shape of Character Design",
"write": "Jun Bale",
"date": "20/12/20",
"time": "10:00AM",
"body": " Because he takes nsuscipit accepted result lightly with nreprehenderit discomfort may be the entire nnostrum of the things that happens is that they are extremely ",
"image": "https://source.unsplash.com/rDEOVtE7vOs/1600x900",
@officialrajdeepsingh
officialrajdeepsingh / index.html
Last active March 4, 2020 13:34
Why Bootstrap is bad?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- cpyright by w3schools.com -->
<title>Bootstrap Example By w3schools.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
@officialrajdeepsingh
officialrajdeepsingh / Javascript Console Web API Exmple Code
Last active May 3, 2020 11:08
Hey, My Name Rajdeep Singh. In This Article, We Learn Javascript Web Console API. I hope you enjoy that and give me feedback about that. Read On Medium
// =========================
// Console Web API lIST
// =========================
// assert ,clear,count,debug, dir, dirxml,error,group,groupCollapsed,
// groupEnd ,info,log,markTimeline, profile ,profileEnd ,table,time,
// timeEnd, timeStamp,timeline, timelineEnd,trace, warm, memory
//======
// Compatibility
@officialrajdeepsingh
officialrajdeepsingh / Bootstrap Root variables
Created July 9, 2020 13:53
:root {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #28a745;
--bs-teal: #20c997;
@officialrajdeepsingh
officialrajdeepsingh / index.html
Last active July 11, 2020 14:51
Bootstrap v5 Testing Blog Create By Bootstrap team
<!doctype html>
<html lang="en">
<!-- CoyRigth Template By Bootstrap Team -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=" Bootstrap v5 Testing Blog Create By Bootstrap team ">
<meta name="author" content="Rajdeep Singh">
<meta name="generator" content="Hugo 0.72.0">
@officialrajdeepsingh
officialrajdeepsingh / index.js
Created November 28, 2021 11:24
add front in nextjs
// import head component
import Head from 'next/head';
// import css
import styles from '../styles/Home.module.css';
// import custom component
import Layout from '../Components/Layout';
export default function Home() {
return (
<>
@officialrajdeepsingh
officialrajdeepsingh / index.js
Created December 5, 2021 11:22
This example of loader in next.js https://codesandbox.io/s/nextjs-example-of-image-loader-bkcfs?file=/pages/index.js:0-818
import Image from "next/image";
function GraphCMSImageLoader({ src, width }) {
const relativeSrc = (src) => src.split("/").pop();
return `https://media.graphcms.com/resize=width:${width}/${relativeSrc(src)}`;
}
function IndexPage({ products }) {
return (
@officialrajdeepsingh
officialrajdeepsingh / underConstraction.js
Created December 28, 2021 11:01
Your create underConstraction.js file in nextjs pages folder. copy my gist code and paste in your file.
export default function underConstraction() {
return (
<>
<div className="bg-indigo-600">
<div className="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
<div className="flex items-center justify-between flex-wrap">
<div className="w-0 flex-1 flex items-center">
<span className="flex p-2 rounded-lg bg-indigo-800">
<svg
className="h-6 w-6 text-white"
@officialrajdeepsingh
officialrajdeepsingh / packageList.txt
Created March 29, 2022 09:48
package require to run a simple reactjs hello world app
my-app@0.1.0 /home/radewala_2/my-app
├─┬ @testing-library/jest-dom@5.16.3
│ ├─┬ @babel/runtime@7.17.8
│ │ └── regenerator-runtime@0.13.9
│ ├─┬ @types/testing-library__jest-dom@5.14.3
│ │ └─┬ @types/jest@27.4.1
│ │ ├─┬ jest-matcher-utils@27.5.1
│ │ │ ├─┬ chalk@4.1.2
│ │ │ │ ├─┬ ansi-styles@4.3.0
│ │ │ │ │ └─┬ color-convert@2.0.1