Skip to content

Instantly share code, notes, and snippets.

View BroFox86's full-sized avatar

Daur Gamisonia BroFox86

1 follower · 1 following
View GitHub Profile
@BroFox86
BroFox86 / snippet.js
Last active May 28, 2024 18:33
[Create <svg> with <use>] #jsTrick
const svgElem = document.createElementNS("http://www.w3.org/2000/svg", "svg");
const useElem = document.createElementNS("http://www.w3.org/2000/svg", "use");
useElem.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#down-arrow");
svgElem.appendChild(useElem);
@BroFox86
BroFox86 / snippet.js
Last active May 28, 2024 18:31
[Get a key in a JavaScript object by its value] #gettingValue
function getKeyByValue(object, value) {
return Object.keys(object).find(key => object[key] === value)
}
const map = {"first": "1", "second": "2"}
getKeyByValue(map, "2") // second
@BroFox86
BroFox86 / snippet.js
Last active May 28, 2024 18:28
[Split text into sentences] Javascript RegExp for splitting text into sentences and keeping the delimiter #jsTrick
var str = "I like turtles. Do you? Awesome! hahaha. lol!!! What's going on????";
var result = str.match( /[^\.!\?]+[\.!\?]+/g );
console.log(result[0])
console.log(result.join(" "))
@BroFox86
BroFox86 / camelize.ts
Created May 24, 2022 10:56
[Camelize string]
export function camelize(str: string) {
return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase())
}
@BroFox86
BroFox86 / input-and-button.jsx
Last active November 30, 2023 10:45
[Input with button] #html #accessibility
<div>
<input aria-describedby='subscribeButton'/>
<button id='subscribeButton' type='button'>
Subscribe
</button>
</div>
@BroFox86
BroFox86 / picture.html
Created April 6, 2022 11:36
[Picture] #media #html
<picture>
<source srcset="images/desktop.svg" media="(min-width: 1000px)"/>
<source srcset="images/mobile.svg"/>
<img class="" width="" height="" src="images/desktop.svg" alt=""/>
</picture>
@BroFox86
BroFox86 / script.js
Last active May 28, 2024 18:28
[Sticky navbar] #jsTrick
(() => {
"use strict";
function handleNavbarSticking() {
const topHeader = document.querySelector(".js-top-header");
const navbar = document.querySelector(".js-sticky-navbar");
const height = navbar.offsetHeight;
if ( isOutOfViewport( topHeader ) ) {
@BroFox86
BroFox86 / markup.html
Last active June 4, 2021 16:10
[Embedded YouTube video] #media
<!-- More info here: https://dev.to/aryaziai/improving-speed-with-lazy-loaded-youtube-videos-autoplay-3f1l -->
<iframe
class="video"
width="560"
height="315"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="allowfullscreen"
loading="lazy"
srcdoc="
@BroFox86
BroFox86 / countries.html
Created May 18, 2021 09:57 — forked from good-idea/countries.html
Country Select options (with Emoji flags)
<select name="country">
<option value="AF">Afghanistan 🇦🇫</option>
<option value="AO">Angola 🇦🇴</option>
<option value="AL">Albania 🇦🇱</option>
<option value="AD">Andorra 🇦🇩</option>
<option value="AE">United Arab Emirates 🇦🇪</option>
<option value="AR">Argentina 🇦🇷</option>
<option value="AM">Armenia 🇦🇲</option>
<option value="AG">Antigua and Barbuda 🇦🇬</option>
<option value="AU">Australia 🇦🇺</option>
@BroFox86
BroFox86 / gulpfile.js
Last active March 11, 2021 21:07
[Inserting styles into <head>] #gulp #performance
import loadPlugins from "gulp-load-plugins";
const plugins = loadPlugins();
const { src, dest } = require("gulp");
const BUILD_ASSETS = "assets/";
function buildHtml() {
return src("path-to-folder/*.html")
.pipe(useref({ noAssets: true }))
.pipe(
plugins.inject(