Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Sergio A. SergioGeeK7

🏠
Working from home
View GitHub Profile
@SergioGeeK7
SergioGeeK7 / index.js
Created Feb 21, 2020
Using D3 react lazy load component
View index.js
// index.js
const D3Chart = dynamic(() => import("../components/d3chart"))
// further down in the render method
<D3Chart/>
@SergioGeeK7
SergioGeeK7 / chart.js
Last active Feb 21, 2020
Lazy load D3 library ReactJS
View chart.js
// chart.js
import React from "react";
import * as d3 from "d3"; // big dependency
const data = [30, 86, 168, 281, 303, 365];
export default class D3Chart extends React.PureComponent{
constructor(props) {
super(props);
@SergioGeeK7
SergioGeeK7 / package.json
Created Feb 21, 2020
package.json custom nextjs server file
View package.json
{
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
}
}
@SergioGeeK7
SergioGeeK7 / next.config.js
Last active Feb 27, 2020
Webpack gzip and brotli compression
View next.config.js
// next.config.js
const webpack = require('webpack');
const BrotliPlugin = require("brotli-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const isNodeDevelopment = process.env.NODE_ENV === "development"
module.exports = {
webpack: config => {
@SergioGeeK7
SergioGeeK7 / server.js
Created Feb 21, 2020
NextJS + Express
View server.js
// Server.js
const express = require('express');
const next = require('next');
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
@SergioGeeK7
SergioGeeK7 / image.js
Created Feb 21, 2020
react lazy load image component
View image.js
// Image.js
import React from "react";
import LazyLoad from "react-lazyload";
export default class Image extends React.PureComponent {
state = {
loaded: false
};
@SergioGeeK7
SergioGeeK7 / image.css
Last active Feb 21, 2020
Loading Indicator
View image.css
/* CSS */
.image{
width: 250px;
height: 250px;
display: block;
}
.image-loading {
position: static;
View hookExample.js
import React, { useState, useEffect } from "react";
const useFetch = url => {
const [state, setState] = useState({
loading: true,
error: false,
data: [],
});
useEffect(() => {
View macSpoofing.sh
# current
ifconfig en0 |grep ether
openssl rand -hex 6 | sed 's/\(..\)/\1:/g; s/.$//'
sudo ifconfig en0 ether [randomNumber]
View commands.sh
------------
stat file
ln -s
Control + A beginning of the line
Control + E end of the line
echo '{"a": {"b":123 } }' | jq '.a.b'
curl -s https://api.github.com/repos/facebook/react | jq '.stargazers_count'
curl -s https://api.github.com/search/repositories?q=service+worker | jq '.items[].name'
cat filename
grep pattern