Skip to content

Instantly share code, notes, and snippets.

View abdo-host's full-sized avatar
🏠
Working from home

Abdo Hamoud abdo-host

🏠
Working from home
View GitHub Profile
@abdo-host
abdo-host / useBroadcastChannel.ts
Created February 19, 2024 11:16 — forked from KristofferEriksson/useBroadcastChannel.ts
A React hook that allows you to send and receive messages between browser tabs or windows
import { useCallback, useEffect, useRef, useState } from "react";
interface UseBroadcastChannelOptions {
name: string;
onMessage?: (event: MessageEvent) => void;
onMessageError?: (event: MessageEvent) => void;
}
interface UseBroadcastChannelReturn<D, P> {
isSupported: boolean;
@abdo-host
abdo-host / country-flag.json
Created January 16, 2024 23:24 — forked from pratikbutani/country-flag.json
A JSON for Country List with Flag Image
[
{
"flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1e8.svg",
"country": "Ascension Island",
"code": "ac"
},
{
"flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1e9.svg",
"country": "Andorra",
"code": "ad"
@abdo-host
abdo-host / gulpfile.js
Created December 23, 2023 21:54 — forked from nezamy/gulpfile.js
Post Css & Sass & RTL Gulp Config
const { src, dest, watch, series, task } = require('gulp');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnext = require('cssnext');
const precss = require('precss');
const cssnano = require('cssnano');
const sass = require('gulp-sass');
const fontMagician = require('postcss-font-magician');
const rtlcss = require('rtlcss');
const rename = require('gulp-rename');
@abdo-host
abdo-host / editable-syntax-highlighted-code-using-z-indexes.markdown
Created July 27, 2023 13:32
Editable, syntax-highlighted code using z-indexes

Editable, syntax-highlighted code using z-indexes

This is the demo for an article I wrote on CSS-Tricks on how to use a conventional syntax-highlighting library to create an editable input for code that supports syntax highlighting, and acts like a textarea.

The textarea, almost completely transparent except for the caret-color, is positioned on top of the syntax-highlighted block using z-indexes, and the result is synchronised whenever the user enters code.

Due to a suggestion in a comment to the article, I have created a custom element for this technique in this Pen.

A Pen by WebCoder49 on CodePen.

@abdo-host
abdo-host / angularjs-typeahead-example.markdown
Created March 19, 2022 12:38
AngularJS - Typeahead Example
@abdo-host
abdo-host / index.html
Created January 11, 2022 02:40
jquery-scanner-detection
<p id="pTest"></p>
<input id="iTest"></input>
<div id="some-test-element">Click me</div>
<div class="search">
<input id="foo" type="text" value="y u no work" autofocus/>
</div>