- Refactor
- Feature
- Bug Fix
- Optimization
- Documentation
Sagar sagar-gavhane
🏠
sagar-gavhane
/ building-a-blog-with-next-js-pages-index.jsx
Last active
June 1, 2020 05:58
Building a blog with Next.js: Index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import Link from "next/link"; | |
| function IndexPage(props) { | |
| return ( | |
| <div> | |
| <h1>Blog list</h1> | |
| <ul> | |
| {props.blogs.map((blog, idx) => { | |
| return ( |
sagar-gavhane
/ animate.css
Created
May 4, 2020 10:58
A cross-browser library of CSS animations. As easy to use as an easy thing.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "UTF-8"; | |
| /*! | |
| * animate.css -https://daneden.github.io/animate.css/ | |
| * Version - 3.7.2 | |
| * Licensed under the MIT license - http://opensource.org/licenses/MIT | |
| * | |
| * Copyright (c) 2019 Daniel Eden | |
| */ |
sagar-gavhane
/ react-memo-with-react-fast-compare.js
Created
May 2, 2020 06:31
#3 React.memo with react-fast-compare
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react' | |
| import { render } from 'react-dom' | |
| import isEqual from 'react-fast-compare' | |
| function Input(props) { | |
| return <input value={props.value} onChange={props.handleOnChange} /> | |
| } | |
| const MemoizedInput = React.memo(Input, isEqual) |
sagar-gavhane
/ common-fixing-scenarios-2.js
Created
May 2, 2020 06:30
#2 Common fixing scenarios for object & function props 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react' | |
| import { render } from 'react-dom' | |
| function Alert(props) { | |
| return ( | |
| <div | |
| className="alert-wrapper" | |
| style={{ display: props.showAlert ? 'block' : 'none' }} | |
| > | |
| <div className="alert-close" onClick={props.handleCloseAlert}> |
sagar-gavhane
/ avoid-passing-unnecessary-props.js
Last active
May 2, 2020 06:27
#1 Avoid passing unnecessary props to children components: https://medium.com/@sgavhane70/react-performance-optimization-7535564c7bec
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react' | |
| import { render } from 'react-dom' | |
| function Avatar(props) { | |
| return ( | |
| <div className="avatar-wrapper"> | |
| <img className="avatar-img" alt="avatar" src={props.user.image} /> | |
| <div className="avatar-name">{props.user.name}</div> | |
| </div> | |
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| FROM node:latest | |
| WORKDIR /app | |
| COPY . . | |
| RUN npm install | |
| EXPOSE 3000 |
sagar-gavhane
/ picture-in-picture.js
Created
April 9, 2020 16:51
Picture in picture API in all browsers that support it
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const getPictureInPicture = () => { | |
| if (typeof document === "undefined") return { supported: false }; | |
| const video = document.createElement("video"); | |
| // if browser is chrome: https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture | |
| if (document.pictureInPictureEnabled && !video.disablePictureInPicture) { | |
| return { | |
| supported: true, | |
| request: (video) => video.requestPictureInPicture(), |
sagar-gavhane
/ material-design-shadows.css
Created
April 9, 2020 16:33
— forked from serg0x/material-design-shadows.css
Google material design elevation system shadows as css. Based on https://material.io/design/environment/elevation.html#default-elevations Exported with Sketchapp from the Google material design theme editor plugin "Baseline" theme.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Shadow 0dp */ | |
| box-shadow: none; | |
| /* Shadow 1dp */ | |
| box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20); | |
| /* Shadow 2dp */ | |
| box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20); | |
| /* Shadow 3dp */ |