본문 바로가기

JavaScript47

How to detect text overflow ellipsis? Search:: how to check if html element is in ellipsis HTML text-overflow ellipsis detection Try this JS function, passing the span element as argument: function isEllipsisActive(e) { return (e.offsetWidth < e.scrollWidth); } @NicolasS.Xu I believe if the element is a span, you might get zeros in these properties. So one solution is to wrap the span in a div which has overflow: hidden and then che.. 2023. 1. 9.
Capitalize first letter ## Capitalize first letter **[How do I make the first letter of a string uppercase in JavaScript?](https://stackoverflow.com/questions/1026069/how-do-i-make-the-first-letter-of-a-string-uppercase-in-javascript)**[Ask Question](https://stackoverflow.com/questions/ask) - simple fastest ```jsx function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } consol.. 2023. 1. 9.
[Javascript] Promise.allSettled vs Promise.all, Promise states Pending Fulfilled Rejected Promise.all vs Promise.allSettled all // All values are non-promises, so the returned promise gets fulfilled const p = Promise.all([1, 2, 3]); // The only input promise is already fulfilled, // so the returned promise gets fulfilled const p2 = Promise.all([1, 2, 3, Promise.resolve(444)]); // One (and the only) input promise is rejected, // so the returned promis.. 2023. 1. 7.
[javascript] Promise vs setTimeout:: why Promise resolved first? Why Promise is resolved before setTimeout? - Event loop, task queue, micro task queue, stack Promise vs setTimeout Promise.resolve schedules a microtask and the setTimeout schedules a macrotask. And the microtasks are executed before running the next macrotask. console.log(1) setTimeout(() => { console.log(3) }); Promise.resolve().then(() => console.log(4)) console.log(7) Interesting question. I.. 2023. 1. 7.
[Quick Sort] Quick Select Quck sort, Quick Select Quick Sort function quickSortWidthEndPivot(arr, start, end) { if (start >= end) { return arr; } let left = start; let right = end - 1; let pivot = end; while (left arr[pivot] && high < arr[pivot]) { swap(arr, left, right); } if (low = arr[pivot]) right--; } swap(arr, left, pivot); pivot = left; // renew pivot position for next process quickSortWidthEndPivot(arr, start, pi.. 2023. 1. 7.
[Counting sort] 계수정렬 Counting sort const MAX_NUM = 10000; const MAX_SIZE = 10000; function countingSort(numbers) { let maxNum = -Infinity; for (const n of numbers) { if (n 2023. 1. 1.
[subset] find all subsets Number of Subsets of a given Set: If a set contains ‘n’ elements, then the number of subsets of the set is 2n. Number of Proper Subsets of the Set: If a set contains ‘n’ elements, then the number of proper subsets of the set is 2n - 1. | If A = {p, q} the proper subsets of A are [{ }, {p}, {q} with loop const nums = [1, 2, 3]; const subsets = [[]]; function findSubsets(subsets, nums, currentSet,.. 2022. 12. 25.
[Webpack] Webpack dev server config devServer webpack-dev-server 관련한 설정 error, warning overlay logging hot liveReload // stats: &#39;minimal&#39; | &#39;errors-only&#39; stats: { warnings: false, }, // disable console.log devServer: { client: { logging: &#39;info&#39;, overlay: { errors: false, warnings: false, }, }, open: false, historyApiFallback: true, static: &#39;./&#39;, hot: true, liveReload: true, }, stats: &#39;errors-onl.. 2022. 10. 10.
How to change themes between light and dark, @media /* TODO */ :root { --loading-height: 140px; --white: #ffffff; --black: #000000; } .light-theme { --background-color: var(--white); --color: var(--black); } .dark-theme { --background-color: var(--black); --color: var(--white); } * { transition: background-color 0.2s ease, color 0.1s ease; } /* TODO dark mode 처리 */ @media (prefers-color-scheme: dark) { body { background-color: var(--background-co.. 2022. 10. 10.
[메모] lazy loading with intersectionObserver, 로더, localstorage const loadLazyImages = (entries, observer) => { entries.forEach(function (entry) { if (entry.isIntersecting) { console.log(&#39;loadLazyImages&#39;, entry.target.dataset.src, &#39;fetch data&#39;); let lazyImage = entry.target; lazyImage.src = lazyImage.dataset.src; // lazyImage.srcset = lazyImage.dataset.srcset; lazyImage.classList.remove(&#39;lazy&#39;); observer.unobserve(lazyImage); } }); co.. 2022. 10. 10.

티스토리툴바