Skip to content

Instantly share code, notes, and snippets.

@blift
blift / useMinWidth.ts
Last active April 4, 2024 07:00
use min-width hook alternative for resize calculation
/**
* Use:
* const isMobile = useMinWidth('700px');
*
*/
import { useState, useEffect } from 'react';
export function useMinWidth(_width: string): boolean {
@blift
blift / Scene.tsx
Created February 9, 2024 08:20
React Three Fiber with bufferGeometry, example how to generate random colors and animate custom points on Z axis only
"use client"
import React, {useRef, useMemo} from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { Mesh, BufferAttribute, Points } from "three";
import { OrbitControls } from '@react-three/drei';
const Scene: React.FC = () => {
const meshRef = useRef<Mesh>(null!);
@blift
blift / OffCanvas.js
Last active February 9, 2024 08:23
Drilldown menu for Wordpress sub pages. For Sage by Roots + TailwindCSS
function OffCanvas() {
const offOPen = document.getElementById('offcanvas__open');
const offMenu = document.getElementById('offcanvas__menu');
const body = document.body;
const offNav = document.querySelectorAll('.nav-secondary ul .menu-item');
// Aria expanded
const ariaMenu = () => {
if( offMenu.classList.contains('is-active') ) {
@blift
blift / gist:026495a8685225016376a4d0ade2d2e0
Created March 10, 2022 17:39
Function for bud (sage 10) replacing proxy urls in theme in dev mode to localhost urls
async function UrlChanger() {
const { headers } = await fetch(window.location.origin, {
method: 'GET',
})
const origin = {
proxy: headers.get('x-bud-proxy-origin'),
dev: headers.get('x-bud-dev-origin'),
@blift
blift / gist:0607090190ba65c5c9bc6e79f99a4dda
Created January 15, 2021 12:27
Digital Ocean public key denied
In DO problem with paste new key via web console, below description how to do it via terminal on mac
1. Recovery password in DO to root
2. After login to root via console, check the list of users
(for ubuntu)
# cut -d: -f1 /etc/passwd
3. Switch to another user if is created if not create new user or proceed with root
https://askubuntu.com/questions/410244/is-there-a-command-to-list-all-users-also-to-add-delete-modify-users-in-the
@blift
blift / gist:867f794c03a1e0d8a34d659050105d2c
Last active March 4, 2021 22:49
React for sage theme
## 1. Install babel-eslint and update .eslintrc.js
yarn add babel-eslint
## 2. install react-router-dom
yarn add react-router-dom
## 3. Update eslintrc.js 'parser': 'babel-eslint' before 'parserOptions'
@blift
blift / gist:eeb03b5e4ed03be1b237e62a755f56f1
Created October 13, 2020 11:19
Node gyp error sass - fix
## In project folder where node is installed
npm uninstall node-sass && npm install node-sass
or with -g flag if globally rebuild is needed
@blift
blift / gist:396206ea916f8b6c7815ca61a313b871
Last active October 14, 2020 10:08
Ruby on Rails cloned project from github with RVM on Mac Os
## 1. Clone repo from github
## 2. Install RVM without disable IPv6
gpg --keyserver hkp://ipv4.pool.sks-keyservers.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB
## 3. Install stable version ruby via RVM
\curl -sSL https://get.rvm.io | bash -s stable --ruby
## 3.1 run command - CHANGE ***USERNAME*** to your username
@blift
blift / custom-script.js
Created May 26, 2020 13:44
Dropdown select2 in FacetWP
// select2 with search option
$(document).on('facetwp-loaded', function() {
$('.facetwp-dropdown').select2();
});
// select2 without search option
$(document).on('facetwp-loaded', function() {
$('.facetwp-sort-select').select2({
minimumResultsForSearch: -1,
});
@blift
blift / global.scss
Created January 16, 2020 15:19
ACF Pro Block, Sage 9, Gutenberg - Complete slider with image field, text field, color picker for change text bg.
// Home page slider
.slick-homepage {
margin: 0 auto;
}
.slick-homepage>.slick-prev {
left: 40px !important;
z-index: 1;
}