Skip to content

Instantly share code, notes, and snippets.

View monecchi's full-sized avatar

Adriano Monecchi monecchi

View GitHub Profile
@TheThirdRace
TheThirdRace / Image.tsx
Last active February 6, 2024 15:20
Image component: merge Chakra-ui `2.8.0` with NextJs `13.4.13` and remove most pain points
/**
* # `<Image>`
*
* This component is a merge between `next/image` and `Chakra-ui`.
* - last updated on 2023-08-08 with `next/image` 13.4.13 and `chakra-ui/react` 2.8.0
* - https://github.com/vercel/next.js/blob/v13.4.13/packages/next/src/client/image-component.tsx
* - https://github.com/vercel/next.js/blob/canary/packages/next/src/client/image-component.tsx
* - https://github.com/vercel/next.js/commits/canary/packages/next/src/client/image-component.tsx
* - https://github.com/vercel/next.js/compare/v13.4.4...canary
*
@karpolan
karpolan / mobileOrDesktop.js
Created December 31, 2020 10:14
React with Next/SSR/SSG, useful .onMobile or .onDestop class selector to apply different CSS styles
// In main App or Layout component add following:
const isMobile = useMediaQuery({ maxWidth: 767 }); // From react-responsive, Material UI or other styling library
useEffect(() => {
// Due to SSR/SSG we can not set 'app-layout onMobile' or 'app-layout onDesktop' on the server
// If we modify className using JS, we will got Warning: Prop `className` did not match. Server: "app-layout" Client: "app-layout onDesktop"
// So we have to apply document.body.class using the hook :)
if (isMobile) {
document.body.classList.remove('onDesktop');
@SleepWalker
SleepWalker / .editorconfig
Last active December 4, 2023 12:02
tuya-localKey-demo
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
@theodorosploumis
theodorosploumis / Nework_throttling_profiles.md
Last active November 8, 2024 12:01
Web development - Custom network throttling profiles
Profile download (kb/s) upload (kb/s) latency (ms)
Native 0 0 0
GPRS 50 20 500
56K Dial-up 50 30 120
Mobile EDGE 240 200 840
2G Regular 250 50 300
2G Good 450 150 150
3G Slow 780 330 200
@helgatheviking
helgatheviking / wordpress-add-custom-menu-meta-fields.php
Created February 26, 2020 02:06
Add an example custom meta field to WordPress menu and display text on front-end (Requires WP5.4)
<?php
/**
* Add custom fields to menu item
*
* This will allow us to play nicely with any other plugin that is adding the same hook
*
* @param int $item_id
* @params obj $item - the menu item
* @params array $args
@emilpriver
emilpriver / sitemap.xml.js
Created February 3, 2020 19:26
NextJS Sitemap example using Nextjs SSR.
import React from "react";
import axios from "axios";
const sitemapXml = data => {
let latestPost = 0;
let projectsXML = "";
data.map(post => {
const postDate = Date.parse(post.modified);
if (!latestPost || postDate > latestPost) {
@import '~bootstrap/scss/bootstrap.scss';
@diego3g
diego3g / NODE.md
Last active November 17, 2024 02:12
VSCode Settings (Updated)

⚠️ Note!

With VSCode version 1.94, the APC extension broke and there is no fix yet.

So, for those having issues with APC after the VSCode update, I recommend downloading the previous version of VSCode for now (https://code.visualstudio.com/updates/v1_93) and setting updates to manual by adding this to the editor's configuration:

"update.mode": "manual",
@shifatul-i
shifatul-i / date-ago.pipe.ts
Last active December 8, 2022 12:31
Angular — date ago pipe (minutes / hours / days / months / years ago)
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'dateAgo',
pure: true
})
export class DateAgoPipe implements PipeTransform {
transform(value: any, args?: any): any {
if (value) {
@DrYurets
DrYurets / gallery.colorbox.init.js
Last active June 6, 2020 21:07
Advanced Gutenberg gallery with thumbnails & lightbox fix