Skip to content

Instantly share code, notes, and snippets.

View elshanx's full-sized avatar
🚀
always learning

Elshan Alkhabaz elshanx

🚀
always learning
View GitHub Profile
@elshanx
elshanx / settings.json
Last active April 22, 2021 12:31
Visual Studio Code settings (JSON)
{
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
},
"workbench.iconTheme": "material-icon-theme",
"editor.fontSize": 17,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
*Set up a pretty git log*
**run:**
`git config --global alias.lg "log --graph --pretty=format:'%C(auto)%h -%d %s %Cgreen(%cr) %C(bold blue)<%an>%Creset'"`
**to use:**
`git lg`
@elshanx
elshanx / gist:b616d985e37861fb50949ef43ebc238f
Created March 8, 2021 16:12
add console log to vscode key bindings
File > Preferences > Keyboard Shortcuts
Above the search bar on the right you'll see a icon that when you hover over says "Open Keyboard Shortcuts (JSON)", click on it
Add this to the JSON settings:
{
"key": "alt+a",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "console.log('${TM_SELECTED_TEXT}$1')$2"
@elshanx
elshanx / line-clamp.css
Created April 22, 2021 12:29
line clamp css
display: -webkit-box;
-webkit-line-clamp: 2; // amount of lines u want
-webkit-box-orient: vertical;
overflow: hidden;
/* without clamp, good to know asked in interviews */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@elshanx
elshanx / .ts
Created October 13, 2021 18:00
ts utils
type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never }
export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U
@elshanx
elshanx / Select.tsx
Last active November 18, 2021 19:29
a custom accessible typed select in react with react-hook-form and refs
import type { KeyboardEvent } from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import type { FieldError, Path, UseFormClearErrors, UseFormSetValue } from 'react-hook-form'
import OutsideClickHandler from 'react-outside-click-handler'
import styled from 'styled-components'
import InputError from '@/components/shared/InputError'
type SelectOption = {
value: string
@elshanx
elshanx / .js
Created November 14, 2021 00:50
syntax highlighting for json objects in DOM
function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
let cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
@elshanx
elshanx / integrate.yml
Created November 21, 2021 14:57
Github action for PRs to check if it builds without errors before merging to main
name: Node Continuous Integration
on:
pull_request:
branches: [ main ]
jobs:
test_pull_request:
runs-on: ubuntu-latest
@elshanx
elshanx / custom-logger.ts
Last active November 24, 2021 15:01
custom redux logger middleware with toggle functionality
import type { Middleware } from 'redux'
import { logger } from 'redux-logger'
const customLogger: Middleware = (api) => (next) => (action) => {
if (window.__REDUX_LOGGER__) return logger(api)(next)(action)
return next(action)
}
export default customLogger
@elshanx
elshanx / tests.yml
Created November 29, 2021 14:09
github workflow for running tests on push and PRs
name: Node.js CI
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [10.x, 12.x, 14.x, 15.x]