Skip to content

Instantly share code, notes, and snippets.

View awran5's full-sized avatar
🎯
Focusing

Ahmed Khalil awran5

🎯
Focusing
View GitHub Profile
@awran5
awran5 / CMB2 switch field.md
Last active March 2, 2022 16:59
Convert CMB2 radio-inline Field to Switch Field with pure CSS
  1. Copy this code to your project CSS file
/* Start Switch field */
.switch-field .cmb2-radio-list li {
	padding-right: 0 !important;
	margin: 0;
}

.switch-field .cmb2-radio-list input {
@awran5
awran5 / CMB2 range input.md
Last active October 23, 2018 22:27
Basic CMB2 slider field based on HTML5 range input

This originally was based on slider field

I've changed its structure to avoid loading of heavy jquery UI so its only used the basic HTML5 type range input

1. php Filter

function cmb2_render_range( $field, $field_escaped_value, $field_object_id, $field_object_type, $field_type_object ){

  $slider = $field_type_object->input( array(
    'type'  => 'range',
@awran5
awran5 / quotes-api.js
Created December 29, 2019 08:44
categorized famous quotes array
[
{
"quote": "Be yourself; everyone else is already taken.",
"author": "Oscar Wilde",
"profession": "Irish poet",
"topics": [
"Inspirational",
"Advice",
"Humor"
]
@awran5
awran5 / shorthand-JavaScript-Functions.js
Last active February 22, 2020 21:08
Shorthand JavaScript Functions
// Some useful shorthanded JavaScript functions
// select an element
const select = e => document.querySelector(e)
// Select multiple elements
const selectAll = e => document.querySelectorAll(e)
// Show DOM element
const show = e => (e.style.display = '')
// Hide DOM element
{
"encryptedData": "your-key"
}
@awran5
awran5 / react-typescript-prismjs.md
Created October 26, 2020 14:43
Prismjs syntax highlighting with React TypeScript example

1. Install

npm i prismjs
npm i -D @types/prismjs

2. Import

import React, { useEffect } from 'react'
import Prism from 'prismjs'
@awran5
awran5 / interval.hook.ts
Created October 31, 2020 21:28 — forked from Danziger/interval.hook.ts
✨ Declarative useTimeout (setTimeout), useInterval (setInterval) and useThrottledCallback (useCallback combined with setTimeout) hooks for React (in Typescript)
import React, { useEffect, useRef } from 'react';
/**
* Use setInterval with Hooks in a declarative way.
*
* @see https://stackoverflow.com/a/59274004/3723993
* @see https://overreacted.io/making-setinterval-declarative-with-react-hooks/
*/
export function useInterval(
callback: React.EffectCallback,
@awran5
awran5 / getRandomId.ts
Last active September 11, 2021 20:42
Get random string uuid like
function getRandomId() {
return Array.from(window.crypto.getRandomValues(new Uint32Array(4)))
.map((number) => number.toString(16))
.join('-')
}