[UI design tips] (https://twitter.com/i/moments/994601867987619840)
Sandeep Kumar Vemula bittu
🎯
bittu
/ aspectratio.js
Created
February 21, 2023 16:35
Find aspect ratio of any resolution (width x height)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function gcd(a, b) { | |
| return (b === 0) ? a : gcd(b, a % b); | |
| } | |
| function getAspectRatio(width, height) { | |
| const r = gcd(width, height); | |
| return `${width / r} : ${height / r}` | |
| /* | |
| return { | |
| x: width / r, |
bittu
/ detect-chromecast.js
Last active
August 24, 2022 12:04
— forked from lfalke/detect-chromecast.js
Detect Chromecast Model / Generation in Javascript - Updated for Google TV with Chromecast
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * We use this workaround to detect the Chromecast device generation. | |
| * Unfortunately the Cast Application Framework (CAF) does not have an API for that. | |
| * | |
| * cc-1: Chromecast 1st Gen. | |
| * cc-2: Chromecast 2nd Gen. | |
| * cc-3: Chromecast 3rd Gen. | |
| * cc-ultra: Chromecast Ultra | |
| * cc-builtin: Android TV with Chromecast built-in | |
| * cc-googletv: Google TV with Chromecast |
bittu
/ intercept.js
Created
August 17, 2022 14:57
— forked from suprememoocow/intercept.js
AJAX timing interceptor: this class intercepts all AJAX calls and records the time taken for the HTTP request to complete. These timings are posted back to the server in batches, if there are any to send, about every two seconds. Tested in Firefox, Chrome
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(XHR) { | |
| "use strict"; | |
| var stats = []; | |
| var timeoutId = null; | |
| var open = XHR.prototype.open; | |
| var send = XHR.prototype.send; | |
bittu
/ numberOfLines.js
Created
December 17, 2019 13:59
Count number of lines displayed in an element
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export const countNumOfLines = (el) => (el ? Math.ceil(el.clientHeight / parseInt(getComputedStyle(el, null).getPropertyValue('line-height'))) : 0) |
bittu
/ flexbox.scss
Created
November 21, 2019 17:31
flexbox center if only one child item else space between child items
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .flexbox { | |
| display: flex; | |
| justify-content: space-between; | |
| & > :only-child { | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const uniqId = () => (Date.now() * Math.random()).toString(36) | |
| // Generates uniqId as | |
| // coyppu5a.lan | |
| // b3v7gp76.lif | |
| // If '.' wants to be removed remove then use replace or Math.ceil |
bittu
/ cursor.html
Created
October 25, 2019 16:54
Custom mouse move cursor (test link: https://output.jsbin.com/folosavuqa)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Custom mouse move cursor"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Custom mouse move cursor</title> | |
| <style> | |
| .cursor { | |
| position: absolute; |
bittu
/ useForceUpdateHook.js
Created
October 22, 2019 09:46
`forceUpdate` hook for React functional components
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useState, useCallback } from 'react' | |
| export default function useForceUpdate() { | |
| const [, dispatch] = useState({}) | |
| return useCallback(() => dispatch({}), []) | |
| } | |
| /** | |
| * Usage: | |
| * |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var equalityCheck = function(a, b) { | |
| if (typeof a === 'object' && typeof b === 'object') { | |
| if (!compareObjects(a, b)) { | |
| return false; | |
| } | |
| } else if (a !== b) { | |
| return false; | |
| } | |
| return true; | |
| }; |
NewerOlder