Skip to content

Instantly share code, notes, and snippets.

View heytulsiprasad's full-sized avatar
⚛️
Overreacting

Tulsi Prasad heytulsiprasad

⚛️
Overreacting
View GitHub Profile
@heytulsiprasad
heytulsiprasad / _base.scss
Created March 12, 2020 03:17
while starting a project from scratch this is how to begin with sass
:root {
--color-red: red;
}
* {
margin: 0;
padding: 0;
}
*,
@heytulsiprasad
heytulsiprasad / package.json
Created April 1, 2020 09:59
contains important scripts that are definitely used in almost every project
"scripts": {
"server": "live-server",
"watch:sass": "node-sass sass/main.scss css/style.css -w",
"dev": "npm-run-all --parallel server watch:sass",
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",
"prefix:css": "postcss --use autoprefixer -b \"last 10 versions\" css/style.concat.css -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
"build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
}
@heytulsiprasad
heytulsiprasad / _mixins.scss
Last active April 5, 2020 12:25
easy way to write media queries using sass
@mixin respond ($breakpoint) {
@if $breakpoint==laptop {
@media only screen and (max-width: 1000px) {
@content;
}
}
@if $breakpoint==tablet {
@media only screen and (max-width: 600px) {
@content;
@heytulsiprasad
heytulsiprasad / .hyper.js
Last active June 22, 2020 06:11
Custom setup for Git Bash and Hyper Term
module.exports = {
config: {
// default font size in pixels for all tabs
fontSize: 13,
// font family with optional fallbacks
fontFamily: 'Roboto Mono, Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
// terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
cursorColor: 'rgba(248,28,229,0.8)',
@heytulsiprasad
heytulsiprasad / settings.json
Created June 22, 2020 13:53
Add custom title bar color to vscode
{
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#FF2C70",
"titleBar.inactiveBackground": "#FF2C70CC"
}
}
@heytulsiprasad
heytulsiprasad / handleChange.js
Created June 24, 2020 16:08
One single handleChange function to get all inputs render in react
// instance properties (set it to arrow fn)
handleChange = (e) => {
const { name, type, value } = e.target;
const val = type === "number" ? parseFloat(value) : value;
this.setState({ [name]: e.target.value });
};
@heytulsiprasad
heytulsiprasad / _app.js
Created June 26, 2020 00:44
How to expose queries from URL to every component in Next.js?
import App from "next/app";
import HomePage from "../components/HomePage";
import "../styles/global.css";
export default class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {]
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
@heytulsiprasad
heytulsiprasad / api.js
Created July 4, 2020 11:50
A demo express backend made for CRUD centric applications
const express = require("express")
const router = express.Router();
const Todo = require("../models/todo")
router.get("/todos", (req, res, next) => {
Todo.find({}, "action")
.then(data => res.json(data))
.catch(next);
})
@heytulsiprasad
heytulsiprasad / authApi.js
Created July 11, 2020 18:56
Register (or signup) user using JWT and bcrypt for hashing
const bcrypt = require("bcryptjs")
const jwt = require("jsonwebtoken")
// The client sends post request here with `name, email and password` as its body
// which are processed and stored in our database
router.post("/", async (req, res) => {
const { name, email, password } = req.body;
// Simple validation

MongoDB Cheat Sheet

Show All Databases

show dbs

Show Current Database