Skip to content

Instantly share code, notes, and snippets.

View SergioGeeK7's full-sized avatar
🏠
Working from home

Sergio A. SergioGeeK7

🏠
Working from home
View GitHub Profile
@SergioGeeK7
SergioGeeK7 / index.js
Created February 21, 2020 15:02
Using D3 react lazy load component
// index.js
const D3Chart = dynamic(() => import("../components/d3chart"))
// further down in the render method
<D3Chart/>
@SergioGeeK7
SergioGeeK7 / chart.js
Last active February 21, 2020 15:00
Lazy load D3 library ReactJS
// 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 February 21, 2020 14:53
package.json custom nextjs server file
{
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
}
}
@SergioGeeK7
SergioGeeK7 / next.config.js
Last active February 27, 2020 16:36
Webpack gzip and brotli compression
// 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 February 21, 2020 13:02
NextJS + Express
// 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 February 21, 2020 12:45
react lazy load image component
// 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 February 21, 2020 12:36
Loading Indicator
/* CSS */
.image{
width: 250px;
height: 250px;
display: block;
}
.image-loading {
position: static;
import React, { useState, useEffect } from "react";
const useFetch = url => {
const [state, setState] = useState({
loading: true,
error: false,
data: [],
});
useEffect(() => {
# current
ifconfig en0 |grep ether
openssl rand -hex 6 | sed 's/\(..\)/\1:/g; s/.$//'
sudo ifconfig en0 ether [randomNumber]
------------
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