Content Component
+{profile.name}
+If you have an custom hotkeys for daily notes, make sure to update + them to use the new "Periodic Notes" commands.`; + + attr(p, "class", "setting-item-description"); + }, + m(target, anchor) { + insert(target, p, anchor); + }, + d(detaching) { + if (detaching) detach(p); + } + }; +} + +// (42:8) {:else} +function create_else_block_1(ctx) { + let button; + let mounted; + let dispose; + + return { + c() { + button = element("button"); + button.textContent = "Migrate"; + attr(button, "class", "mod-cta svelte-1alo0m9"); + }, + m(target, anchor) { + insert(target, button, anchor); + + if (!mounted) { + dispose = listen(button, "click", function () { + if (is_function(/*migrateDailyNoteSettings*/ ctx[2])) /*migrateDailyNoteSettings*/ ctx[2].apply(this, arguments); + }); + + mounted = true; + } + }, + p(new_ctx, dirty) { + ctx = new_ctx; + }, + i: noop, + o: noop, + d(detaching) { + if (detaching) detach(button); + mounted = false; + dispose(); + } + }; +} + +// (40:8) {#if $settings.hasMigratedDailyNoteSettings} +function create_if_block_4(ctx) { + let button; + let t; + let checkmark; + let current; + checkmark = new Checkmark({}); + + return { + c() { + button = element("button"); + t = text("Migrated "); + create_component(checkmark.$$.fragment); + button.disabled = true; + attr(button, "class", "svelte-1alo0m9"); + }, + m(target, anchor) { + insert(target, button, anchor); + append(button, t); + mount_component(checkmark, button, null); + current = true; + }, + p: noop, + i(local) { + if (current) return; + transition_in(checkmark.$$.fragment, local); + current = true; + }, + o(local) { + transition_out(checkmark.$$.fragment, local); + current = false; + }, + d(detaching) { + if (detaching) detach(button); + destroy_component(checkmark); + } + }; +} + +// (51:2) {#if hasWeeklyNoteSettings} +function create_if_block_1$2(ctx) { + let div2; + let div0; + let t3; + let div1; + let current_block_type_index; + let if_block; + let current; + const if_block_creators = [create_if_block_2, create_else_block]; + const if_blocks = []; + + function select_block_type_2(ctx, dirty) { + if (/*$settings*/ ctx[5].hasMigratedWeeklyNoteSettings) return 0; + return 1; + } + + current_block_type_index = select_block_type_2(ctx); + if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); + + return { + c() { + div2 = element("div"); + div0 = element("div"); + + div0.innerHTML = `
Weekly Note settings migrated
+Your existing weekly-note settings from the Calendar plugin have been + migrated over automatically. The functionality will be removed from + the Calendar plugin in the future.
`; + + t3 = space(); + div1 = element("div"); + if_block.c(); + attr(div0, "class", "setting-item-info"); + attr(div1, "class", "setting-item-control"); + attr(div2, "class", "setting-item"); + }, + m(target, anchor) { + insert(target, div2, anchor); + append(div2, div0); + append(div2, t3); + append(div2, div1); + if_blocks[current_block_type_index].m(div1, null); + current = true; + }, + p(ctx, dirty) { + let previous_block_index = current_block_type_index; + current_block_type_index = select_block_type_2(ctx); + + if (current_block_type_index !== previous_block_index) { + group_outros(); + + transition_out(if_blocks[previous_block_index], 1, 1, () => { + if_blocks[previous_block_index] = null; + }); + + check_outros(); + if_block = if_blocks[current_block_type_index]; + + if (!if_block) { + if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); + if_block.c(); + } + + transition_in(if_block, 1); + if_block.m(div1, null); + } + }, + i(local) { + if (current) return; + transition_in(if_block); + current = true; + }, + o(local) { + transition_out(if_block); + current = false; + }, + d(detaching) { + if (detaching) detach(div2); + if_blocks[current_block_type_index].d(); + } + }; +} + +// (67:8) {:else} +function create_else_block(ctx) { + let button; + + return { + c() { + button = element("button"); + button.textContent = "Migrate"; + attr(button, "class", "mod-cta svelte-1alo0m9"); + }, + m(target, anchor) { + insert(target, button, anchor); + }, + i: noop, + o: noop, + d(detaching) { + if (detaching) detach(button); + } + }; +} + +// (62:8) {#if $settings.hasMigratedWeeklyNoteSettings} +function create_if_block_2(ctx) { + let button; + let t; + let checkmark; + let current; + checkmark = new Checkmark({}); + + return { + c() { + button = element("button"); + t = text("Migrated\n "); + create_component(checkmark.$$.fragment); + button.disabled = true; + attr(button, "class", "svelte-1alo0m9"); + }, + m(target, anchor) { + insert(target, button, anchor); + append(button, t); + mount_component(checkmark, button, null); + current = true; + }, + i(local) { + if (current) return; + transition_in(checkmark.$$.fragment, local); + current = true; + }, + o(local) { + transition_out(checkmark.$$.fragment, local); + current = false; + }, + d(detaching) { + if (detaching) detach(button); + destroy_component(checkmark); + } + }; +} + +// (74:2) {#if !hasDailyNoteSettings && !hasWeeklyNoteSettings} +function create_if_block$4(ctx) { + let p; + + return { + c() { + p = element("p"); + p.textContent = "With this plugin, you can quickly create and navigate to daily, weekly,\n and monthly notes. Enable them below to get started."; + }, + m(target, anchor) { + insert(target, p, anchor); + }, + d(detaching) { + if (detaching) detach(p); + } + }; +} + +function create_fragment$4(ctx) { + let div; + let h3; + let t1; + let t2; + let t3; + let t4; + let button; + let div_outro; + let current; + let mounted; + let dispose; + let if_block0 = /*hasDailyNoteSettings*/ ctx[3] && create_if_block_3(ctx); + let if_block1 = /*hasWeeklyNoteSettings*/ ctx[4] && create_if_block_1$2(ctx); + let if_block2 = !/*hasDailyNoteSettings*/ ctx[3] && !/*hasWeeklyNoteSettings*/ ctx[4] && create_if_block$4(); + + return { + c() { + div = element("div"); + h3 = element("h3"); + h3.textContent = "Getting Started"; + t1 = space(); + if (if_block0) if_block0.c(); + t2 = space(); + if (if_block1) if_block1.c(); + t3 = space(); + if (if_block2) if_block2.c(); + t4 = space(); + button = element("button"); + button.textContent = "Dismiss"; + attr(button, "class", "svelte-1alo0m9"); + attr(div, "class", "settings-banner"); + }, + m(target, anchor) { + insert(target, div, anchor); + append(div, h3); + append(div, t1); + if (if_block0) if_block0.m(div, null); + append(div, t2); + if (if_block1) if_block1.m(div, null); + append(div, t3); + if (if_block2) if_block2.m(div, null); + append(div, t4); + append(div, button); + current = true; + + if (!mounted) { + dispose = listen(button, "click", function () { + if (is_function(/*handleTeardown*/ ctx[1])) /*handleTeardown*/ ctx[1].apply(this, arguments); + }); + + mounted = true; + } + }, + p(new_ctx, [dirty]) { + ctx = new_ctx; + + if (/*hasDailyNoteSettings*/ ctx[3]) { + if (if_block0) { + if_block0.p(ctx, dirty); + + if (dirty & /*hasDailyNoteSettings*/ 8) { + transition_in(if_block0, 1); + } + } else { + if_block0 = create_if_block_3(ctx); + if_block0.c(); + transition_in(if_block0, 1); + if_block0.m(div, t2); + } + } else if (if_block0) { + group_outros(); + + transition_out(if_block0, 1, 1, () => { + if_block0 = null; + }); + + check_outros(); + } + + if (/*hasWeeklyNoteSettings*/ ctx[4]) { + if (if_block1) { + if_block1.p(ctx, dirty); + + if (dirty & /*hasWeeklyNoteSettings*/ 16) { + transition_in(if_block1, 1); + } + } else { + if_block1 = create_if_block_1$2(ctx); + if_block1.c(); + transition_in(if_block1, 1); + if_block1.m(div, t3); + } + } else if (if_block1) { + group_outros(); + + transition_out(if_block1, 1, 1, () => { + if_block1 = null; + }); + + check_outros(); + } + + if (!/*hasDailyNoteSettings*/ ctx[3] && !/*hasWeeklyNoteSettings*/ ctx[4]) { + if (if_block2) ; else { + if_block2 = create_if_block$4(); + if_block2.c(); + if_block2.m(div, t4); + } + } else if (if_block2) { + if_block2.d(1); + if_block2 = null; + } + }, + i(local) { + if (current) return; + transition_in(if_block0); + transition_in(if_block1); + if (div_outro) div_outro.end(1); + current = true; + }, + o(local) { + transition_out(if_block0); + transition_out(if_block1); + div_outro = create_out_transition(div, slide, {}); + current = false; + }, + d(detaching) { + if (detaching) detach(div); + if (if_block0) if_block0.d(); + if (if_block1) if_block1.d(); + if (if_block2) if_block2.d(); + if (detaching && div_outro) div_outro.end(); + mounted = false; + dispose(); + } + }; +} + +function instance$4($$self, $$props, $$invalidate) { + let $settings, + $$unsubscribe_settings = noop, + $$subscribe_settings = () => ($$unsubscribe_settings(), $$unsubscribe_settings = subscribe(settings, $$value => $$invalidate(5, $settings = $$value)), settings); + + $$self.$$.on_destroy.push(() => $$unsubscribe_settings()); + + + let { settings } = $$props; + $$subscribe_settings(); + let { handleTeardown } = $$props; + let { migrateDailyNoteSettings } = $$props; + let hasDailyNoteSettings; + let hasWeeklyNoteSettings; + + $$self.$$set = $$props => { + if ("settings" in $$props) $$subscribe_settings($$invalidate(0, settings = $$props.settings)); + if ("handleTeardown" in $$props) $$invalidate(1, handleTeardown = $$props.handleTeardown); + if ("migrateDailyNoteSettings" in $$props) $$invalidate(2, migrateDailyNoteSettings = $$props.migrateDailyNoteSettings); + }; + + { + $$invalidate(3, hasDailyNoteSettings = hasLegacyDailyNoteSettings()); + $$invalidate(4, hasWeeklyNoteSettings = hasLegacyWeeklyNoteSettings()); + } + + return [ + settings, + handleTeardown, + migrateDailyNoteSettings, + hasDailyNoteSettings, + hasWeeklyNoteSettings, + $settings + ]; +} + +class GettingStartedBanner extends SvelteComponent { + constructor(options) { + super(); + if (!document.getElementById("svelte-1alo0m9-style")) add_css(); + + init(this, options, instance$4, create_fragment$4, safe_not_equal, { + settings: 0, + handleTeardown: 1, + migrateDailyNoteSettings: 2 + }); + } +} + +function getBasename(format) { + const isTemplateNested = format.indexOf("/") !== -1; + return isTemplateNested ? format.split("/").pop() : format; +} +function isValidFilename(filename) { + const illegalRe = /[?<>\\:*|"]/g; + const controlRe = /[\x00-\x1f\x80-\x9f]/g; + const reservedRe = /^\.+$/; + const windowsReservedRe = /^(con|prn|aux|nul|com[0-9]|lpt[0-9])(\..*)?$/i; + return (!illegalRe.test(filename) && + !controlRe.test(filename) && + !reservedRe.test(filename) && + !windowsReservedRe.test(filename)); +} +function validateFormat(format, periodicity) { + if (!format) { + return ""; + } + if (!isValidFilename(format)) { + return "Format contains illegal characters"; + } + if (periodicity === "daily" && + !["m", "d", "y"].every((requiredChar) => getBasename(format) + .replace(/\[[^\]]*\]/g, "") // remove everything within brackets + .toLowerCase() + .indexOf(requiredChar) !== -1)) { + return "Filename must be unique"; + } +} +function validateTemplate(template) { + if (!template) { + return ""; + } + const { metadataCache } = window.app; + const file = metadataCache.getFirstLinkpathDest(template, ""); + if (!file) { + return "Template file not found"; + } + return ""; +} +function validateFolder(folder) { + if (!folder || folder === "/") { + return ""; + } + const { vault } = window.app; + if (!vault.getAbstractFileByPath(obsidian.normalizePath(folder))) { + return "Folder not found in vault"; + } + return ""; +} + +/* src/settings/NoteFormatSetting.svelte generated by Svelte v3.35.0 */ + +function create_if_block_1$1(ctx) { + let div; + let t0; + let strong0; + let t1; + let br; + let t2; + let strong1; + let t3; + + return { + c() { + div = element("div"); + t0 = text("New files will be created at "); + strong0 = element("strong"); + t1 = text(/*value*/ ctx[2]); + br = element("br"); + t2 = text("\n Format: "); + strong1 = element("strong"); + t3 = text(/*basename*/ ctx[7]); + }, + m(target, anchor) { + insert(target, div, anchor); + append(div, t0); + append(div, strong0); + append(strong0, t1); + append(div, br); + append(div, t2); + append(div, strong1); + append(strong1, t3); + }, + p(ctx, dirty) { + if (dirty & /*value*/ 4) set_data(t1, /*value*/ ctx[2]); + if (dirty & /*basename*/ 128) set_data(t3, /*basename*/ ctx[7]); + }, + d(detaching) { + if (detaching) detach(div); + } + }; +} + +// (56:4) {#if error} +function create_if_block$3(ctx) { + let div; + let t; + + return { + c() { + div = element("div"); + t = text(/*error*/ ctx[5]); + attr(div, "class", "has-error"); + }, + m(target, anchor) { + insert(target, div, anchor); + append(div, t); + }, + p(ctx, dirty) { + if (dirty & /*error*/ 32) set_data(t, /*error*/ ctx[5]); + }, + d(detaching) { + if (detaching) detach(div); + } + }; +} + +function create_fragment$3(ctx) { + let div5; + let div3; + let div0; + let t1; + let div2; + let a; + let t3; + let div1; + let t4; + let b; + let t5_value = window.moment().format(/*value*/ ctx[2] || /*defaultFormat*/ ctx[8]) + ""; + let t5; + let t6; + let t7; + let t8; + let div4; + let input; + let mounted; + let dispose; + let if_block0 = /*isTemplateNested*/ ctx[6] && create_if_block_1$1(ctx); + let if_block1 = /*error*/ ctx[5] && create_if_block$3(ctx); + + return { + c() { + div5 = element("div"); + div3 = element("div"); + div0 = element("div"); + div0.textContent = "Format"; + t1 = space(); + div2 = element("div"); + a = element("a"); + a.textContent = "Syntax Reference"; + t3 = space(); + div1 = element("div"); + t4 = text("Your current syntax looks like this: "); + b = element("b"); + t5 = text(t5_value); + t6 = space(); + if (if_block0) if_block0.c(); + t7 = space(); + if (if_block1) if_block1.c(); + t8 = space(); + div4 = element("div"); + input = element("input"); + attr(div0, "class", "setting-item-name"); + attr(a, "href", "https://momentjs.com/docs/#/displaying/format/"); + attr(b, "class", "u-pop"); + attr(div2, "class", "setting-item-description"); + attr(div3, "class", "setting-item-info"); + attr(input, "type", "text"); + attr(input, "spellcheck", false); + attr(input, "placeholder", /*defaultFormat*/ ctx[8]); + toggle_class(input, "has-error", !!/*error*/ ctx[5]); + attr(div4, "class", "setting-item-control"); + attr(div5, "class", "setting-item"); + }, + m(target, anchor) { + insert(target, div5, anchor); + append(div5, div3); + append(div3, div0); + append(div3, t1); + append(div3, div2); + append(div2, a); + append(div2, t3); + append(div2, div1); + append(div1, t4); + append(div1, b); + append(b, t5); + append(div2, t6); + if (if_block0) if_block0.m(div2, null); + append(div3, t7); + if (if_block1) if_block1.m(div3, null); + append(div5, t8); + append(div5, div4); + append(div4, input); + set_input_value(input, /*$settings*/ ctx[3][/*periodicity*/ ctx[1]].format); + /*input_binding*/ ctx[12](input); + + if (!mounted) { + dispose = [ + listen(input, "input", /*input_input_handler*/ ctx[11]), + listen(input, "change", /*onChange*/ ctx[10]), + listen(input, "input", /*clearError*/ ctx[9]) + ]; + + mounted = true; + } + }, + p(ctx, [dirty]) { + if (dirty & /*value*/ 4 && t5_value !== (t5_value = window.moment().format(/*value*/ ctx[2] || /*defaultFormat*/ ctx[8]) + "")) set_data(t5, t5_value); + + if (/*isTemplateNested*/ ctx[6]) { + if (if_block0) { + if_block0.p(ctx, dirty); + } else { + if_block0 = create_if_block_1$1(ctx); + if_block0.c(); + if_block0.m(div2, null); + } + } else if (if_block0) { + if_block0.d(1); + if_block0 = null; + } + + if (/*error*/ ctx[5]) { + if (if_block1) { + if_block1.p(ctx, dirty); + } else { + if_block1 = create_if_block$3(ctx); + if_block1.c(); + if_block1.m(div3, null); + } + } else if (if_block1) { + if_block1.d(1); + if_block1 = null; + } + + if (dirty & /*$settings, periodicity*/ 10 && input.value !== /*$settings*/ ctx[3][/*periodicity*/ ctx[1]].format) { + set_input_value(input, /*$settings*/ ctx[3][/*periodicity*/ ctx[1]].format); + } + + if (dirty & /*error*/ 32) { + toggle_class(input, "has-error", !!/*error*/ ctx[5]); + } + }, + i: noop, + o: noop, + d(detaching) { + if (detaching) detach(div5); + if (if_block0) if_block0.d(); + if (if_block1) if_block1.d(); + /*input_binding*/ ctx[12](null); + mounted = false; + run_all(dispose); + } + }; +} + +function instance$3($$self, $$props, $$invalidate) { + let $settings, + $$unsubscribe_settings = noop, + $$subscribe_settings = () => ($$unsubscribe_settings(), $$unsubscribe_settings = subscribe(settings, $$value => $$invalidate(3, $settings = $$value)), settings); + + $$self.$$.on_destroy.push(() => $$unsubscribe_settings()); + + + let { settings } = $$props; + $$subscribe_settings(); + let { periodicity } = $$props; + + const DEFAULT_FORMATS = { + daily: DEFAULT_DAILY_NOTE_FORMAT_1, + weekly: DEFAULT_WEEKLY_NOTE_FORMAT_1, + monthly: DEFAULT_MONTHLY_NOTE_FORMAT_1, + quarterly: DEFAULT_QUARTERLY_NOTE_FORMAT_1, + yearly: DEFAULT_YEARLY_NOTE_FORMAT_1 + }; + + const defaultFormat = DEFAULT_FORMATS[periodicity]; + let inputEl; + let value; + let error; + let isTemplateNested; + let basename; + + onMount(() => { + $$invalidate(5, error = validateFormat(inputEl.value, periodicity)); + }); + + function clearError() { + $$invalidate(5, error = ""); + } + + function onChange() { + $$invalidate(5, error = validateFormat(inputEl.value, periodicity)); + } + + function input_input_handler() { + $settings[periodicity].format = this.value; + settings.set($settings); + $$invalidate(1, periodicity); + } + + function input_binding($$value) { + binding_callbacks[$$value ? "unshift" : "push"](() => { + inputEl = $$value; + $$invalidate(4, inputEl); + }); + } + + $$self.$$set = $$props => { + if ("settings" in $$props) $$subscribe_settings($$invalidate(0, settings = $$props.settings)); + if ("periodicity" in $$props) $$invalidate(1, periodicity = $$props.periodicity); + }; + + $$self.$$.update = () => { + if ($$self.$$.dirty & /*$settings, periodicity, value*/ 14) { + { + $$invalidate(2, value = $settings[periodicity].format || ""); + $$invalidate(6, isTemplateNested = value.indexOf("/") !== -1); + $$invalidate(7, basename = getBasename(value)); + } + } + }; + + return [ + settings, + periodicity, + value, + $settings, + inputEl, + error, + isTemplateNested, + basename, + defaultFormat, + clearError, + onChange, + input_input_handler, + input_binding + ]; +} + +class NoteFormatSetting extends SvelteComponent { + constructor(options) { + super(); + init(this, options, instance$3, create_fragment$3, safe_not_equal, { settings: 0, periodicity: 1 }); + } +} + +var top = 'top'; +var bottom = 'bottom'; +var right = 'right'; +var left = 'left'; +var auto = 'auto'; +var basePlacements = [top, bottom, right, left]; +var start = 'start'; +var end = 'end'; +var clippingParents = 'clippingParents'; +var viewport = 'viewport'; +var popper = 'popper'; +var reference = 'reference'; +var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) { + return acc.concat([placement + "-" + start, placement + "-" + end]); +}, []); +var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) { + return acc.concat([placement, placement + "-" + start, placement + "-" + end]); +}, []); // modifiers that need to read the DOM + +var beforeRead = 'beforeRead'; +var read = 'read'; +var afterRead = 'afterRead'; // pure-logic modifiers + +var beforeMain = 'beforeMain'; +var main = 'main'; +var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state) + +var beforeWrite = 'beforeWrite'; +var write = 'write'; +var afterWrite = 'afterWrite'; +var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite]; + +function getNodeName(element) { + return element ? (element.nodeName || '').toLowerCase() : null; +} + +function getWindow(node) { + if (node == null) { + return window; + } + + if (node.toString() !== '[object Window]') { + var ownerDocument = node.ownerDocument; + return ownerDocument ? ownerDocument.defaultView || window : window; + } + + return node; +} + +function isElement(node) { + var OwnElement = getWindow(node).Element; + return node instanceof OwnElement || node instanceof Element; +} + +function isHTMLElement(node) { + var OwnElement = getWindow(node).HTMLElement; + return node instanceof OwnElement || node instanceof HTMLElement; +} + +function isShadowRoot(node) { + // IE 11 has no ShadowRoot + if (typeof ShadowRoot === 'undefined') { + return false; + } + + var OwnElement = getWindow(node).ShadowRoot; + return node instanceof OwnElement || node instanceof ShadowRoot; +} + +// and applies them to the HTMLElements such as popper and arrow + +function applyStyles(_ref) { + var state = _ref.state; + Object.keys(state.elements).forEach(function (name) { + var style = state.styles[name] || {}; + var attributes = state.attributes[name] || {}; + var element = state.elements[name]; // arrow is optional + virtual elements + + if (!isHTMLElement(element) || !getNodeName(element)) { + return; + } // Flow doesn't support to extend this property, but it's the most + // effective way to apply styles to an HTMLElement + // $FlowFixMe[cannot-write] + + + Object.assign(element.style, style); + Object.keys(attributes).forEach(function (name) { + var value = attributes[name]; + + if (value === false) { + element.removeAttribute(name); + } else { + element.setAttribute(name, value === true ? '' : value); + } + }); + }); +} + +function effect$2(_ref2) { + var state = _ref2.state; + var initialStyles = { + popper: { + position: state.options.strategy, + left: '0', + top: '0', + margin: '0' + }, + arrow: { + position: 'absolute' + }, + reference: {} + }; + Object.assign(state.elements.popper.style, initialStyles.popper); + state.styles = initialStyles; + + if (state.elements.arrow) { + Object.assign(state.elements.arrow.style, initialStyles.arrow); + } + + return function () { + Object.keys(state.elements).forEach(function (name) { + var element = state.elements[name]; + var attributes = state.attributes[name] || {}; + var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them + + var style = styleProperties.reduce(function (style, property) { + style[property] = ''; + return style; + }, {}); // arrow is optional + virtual elements + + if (!isHTMLElement(element) || !getNodeName(element)) { + return; + } + + Object.assign(element.style, style); + Object.keys(attributes).forEach(function (attribute) { + element.removeAttribute(attribute); + }); + }); + }; +} // eslint-disable-next-line import/no-unused-modules + + +var applyStyles$1 = { + name: 'applyStyles', + enabled: true, + phase: 'write', + fn: applyStyles, + effect: effect$2, + requires: ['computeStyles'] +}; + +function getBasePlacement(placement) { + return placement.split('-')[0]; +} + +function getBoundingClientRect(element) { + var rect = element.getBoundingClientRect(); + return { + width: rect.width, + height: rect.height, + top: rect.top, + right: rect.right, + bottom: rect.bottom, + left: rect.left, + x: rect.left, + y: rect.top + }; +} + +// means it doesn't take into account transforms. + +function getLayoutRect(element) { + var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed. + // Fixes https://github.com/popperjs/popper-core/issues/1223 + + var width = element.offsetWidth; + var height = element.offsetHeight; + + if (Math.abs(clientRect.width - width) <= 1) { + width = clientRect.width; + } + + if (Math.abs(clientRect.height - height) <= 1) { + height = clientRect.height; + } + + return { + x: element.offsetLeft, + y: element.offsetTop, + width: width, + height: height + }; +} + +function contains(parent, child) { + var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method + + if (parent.contains(child)) { + return true; + } // then fallback to custom implementation with Shadow DOM support + else if (rootNode && isShadowRoot(rootNode)) { + var next = child; + + do { + if (next && parent.isSameNode(next)) { + return true; + } // $FlowFixMe[prop-missing]: need a better way to handle this... + + + next = next.parentNode || next.host; + } while (next); + } // Give up, the result is false + + + return false; +} + +function getComputedStyle$1(element) { + return getWindow(element).getComputedStyle(element); +} + +function isTableElement(element) { + return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0; +} + +function getDocumentElement(element) { + // $FlowFixMe[incompatible-return]: assume body is always available + return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing] + element.document) || window.document).documentElement; +} + +function getParentNode(element) { + if (getNodeName(element) === 'html') { + return element; + } + + return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle + // $FlowFixMe[incompatible-return] + // $FlowFixMe[prop-missing] + element.assignedSlot || // step into the shadow DOM of the parent of a slotted node + element.parentNode || ( // DOM Element detected + isShadowRoot(element) ? element.host : null) || // ShadowRoot detected + // $FlowFixMe[incompatible-call]: HTMLElement is a Node + getDocumentElement(element) // fallback + + ); +} + +function getTrueOffsetParent(element) { + if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837 + getComputedStyle$1(element).position === 'fixed') { + return null; + } + + return element.offsetParent; +} // `.offsetParent` reports `null` for fixed elements, while absolute elements +// return the containing block + + +function getContainingBlock(element) { + var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1; + var currentNode = getParentNode(element); + + while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) { + var css = getComputedStyle$1(currentNode); // This is non-exhaustive but covers the most common CSS properties that + // create a containing block. + // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block + + if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') { + return currentNode; + } else { + currentNode = currentNode.parentNode; + } + } + + return null; +} // Gets the closest ancestor positioned element. Handles some edge cases, +// such as table ancestors and cross browser bugs. + + +function getOffsetParent(element) { + var window = getWindow(element); + var offsetParent = getTrueOffsetParent(element); + + while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') { + offsetParent = getTrueOffsetParent(offsetParent); + } + + if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static')) { + return window; + } + + return offsetParent || getContainingBlock(element) || window; +} + +function getMainAxisFromPlacement(placement) { + return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y'; +} + +var max = Math.max; +var min = Math.min; +var round = Math.round; + +function within(min$1, value, max$1) { + return max(min$1, min(value, max$1)); +} + +function getFreshSideObject() { + return { + top: 0, + right: 0, + bottom: 0, + left: 0 + }; +} + +function mergePaddingObject(paddingObject) { + return Object.assign({}, getFreshSideObject(), paddingObject); +} + +function expandToHashMap(value, keys) { + return keys.reduce(function (hashMap, key) { + hashMap[key] = value; + return hashMap; + }, {}); +} + +var toPaddingObject = function toPaddingObject(padding, state) { + padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, { + placement: state.placement + })) : padding; + return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); +}; + +function arrow(_ref) { + var _state$modifiersData$; + + var state = _ref.state, + name = _ref.name, + options = _ref.options; + var arrowElement = state.elements.arrow; + var popperOffsets = state.modifiersData.popperOffsets; + var basePlacement = getBasePlacement(state.placement); + var axis = getMainAxisFromPlacement(basePlacement); + var isVertical = [left, right].indexOf(basePlacement) >= 0; + var len = isVertical ? 'height' : 'width'; + + if (!arrowElement || !popperOffsets) { + return; + } + + var paddingObject = toPaddingObject(options.padding, state); + var arrowRect = getLayoutRect(arrowElement); + var minProp = axis === 'y' ? top : left; + var maxProp = axis === 'y' ? bottom : right; + var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len]; + var startDiff = popperOffsets[axis] - state.rects.reference[axis]; + var arrowOffsetParent = getOffsetParent(arrowElement); + var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0; + var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is + // outside of the popper bounds + + var min = paddingObject[minProp]; + var max = clientSize - arrowRect[len] - paddingObject[maxProp]; + var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference; + var offset = within(min, center, max); // Prevents breaking syntax highlighting... + + var axisProp = axis; + state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$); +} + +function effect$1(_ref2) { + var state = _ref2.state, + options = _ref2.options; + var _options$element = options.element, + arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element; + + if (arrowElement == null) { + return; + } // CSS selector + + + if (typeof arrowElement === 'string') { + arrowElement = state.elements.popper.querySelector(arrowElement); + + if (!arrowElement) { + return; + } + } + + if (process.env.NODE_ENV !== "production") { + if (!isHTMLElement(arrowElement)) { + console.error(['Popper: "arrow" element must be an HTMLElement (not an SVGElement).', 'To use an SVG arrow, wrap it in an HTMLElement that will be used as', 'the arrow.'].join(' ')); + } + } + + if (!contains(state.elements.popper, arrowElement)) { + if (process.env.NODE_ENV !== "production") { + console.error(['Popper: "arrow" modifier\'s `element` must be a child of the popper', 'element.'].join(' ')); + } + + return; + } + + state.elements.arrow = arrowElement; +} // eslint-disable-next-line import/no-unused-modules + + +var arrow$1 = { + name: 'arrow', + enabled: true, + phase: 'main', + fn: arrow, + effect: effect$1, + requires: ['popperOffsets'], + requiresIfExists: ['preventOverflow'] +}; + +var unsetSides = { + top: 'auto', + right: 'auto', + bottom: 'auto', + left: 'auto' +}; // Round the offsets to the nearest suitable subpixel based on the DPR. +// Zooming can change the DPR, but it seems to report a value that will +// cleanly divide the values into the appropriate subpixels. + +function roundOffsetsByDPR(_ref) { + var x = _ref.x, + y = _ref.y; + var win = window; + var dpr = win.devicePixelRatio || 1; + return { + x: round(round(x * dpr) / dpr) || 0, + y: round(round(y * dpr) / dpr) || 0 + }; +} + +function mapToStyles(_ref2) { + var _Object$assign2; + + var popper = _ref2.popper, + popperRect = _ref2.popperRect, + placement = _ref2.placement, + offsets = _ref2.offsets, + position = _ref2.position, + gpuAcceleration = _ref2.gpuAcceleration, + adaptive = _ref2.adaptive, + roundOffsets = _ref2.roundOffsets; + + var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets, + _ref3$x = _ref3.x, + x = _ref3$x === void 0 ? 0 : _ref3$x, + _ref3$y = _ref3.y, + y = _ref3$y === void 0 ? 0 : _ref3$y; + + var hasX = offsets.hasOwnProperty('x'); + var hasY = offsets.hasOwnProperty('y'); + var sideX = left; + var sideY = top; + var win = window; + + if (adaptive) { + var offsetParent = getOffsetParent(popper); + var heightProp = 'clientHeight'; + var widthProp = 'clientWidth'; + + if (offsetParent === getWindow(popper)) { + offsetParent = getDocumentElement(popper); + + if (getComputedStyle$1(offsetParent).position !== 'static') { + heightProp = 'scrollHeight'; + widthProp = 'scrollWidth'; + } + } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it + + + offsetParent = offsetParent; + + if (placement === top) { + sideY = bottom; // $FlowFixMe[prop-missing] + + y -= offsetParent[heightProp] - popperRect.height; + y *= gpuAcceleration ? 1 : -1; + } + + if (placement === left) { + sideX = right; // $FlowFixMe[prop-missing] + + x -= offsetParent[widthProp] - popperRect.width; + x *= gpuAcceleration ? 1 : -1; + } + } + + var commonStyles = Object.assign({ + position: position + }, adaptive && unsetSides); + + if (gpuAcceleration) { + var _Object$assign; + + return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) < 2 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign)); + } + + return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2)); +} + +function computeStyles(_ref4) { + var state = _ref4.state, + options = _ref4.options; + var _options$gpuAccelerat = options.gpuAcceleration, + gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat, + _options$adaptive = options.adaptive, + adaptive = _options$adaptive === void 0 ? true : _options$adaptive, + _options$roundOffsets = options.roundOffsets, + roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets; + + if (process.env.NODE_ENV !== "production") { + var transitionProperty = getComputedStyle$1(state.elements.popper).transitionProperty || ''; + + if (adaptive && ['transform', 'top', 'right', 'bottom', 'left'].some(function (property) { + return transitionProperty.indexOf(property) >= 0; + })) { + console.warn(['Popper: Detected CSS transitions on at least one of the following', 'CSS properties: "transform", "top", "right", "bottom", "left".', '\n\n', 'Disable the "computeStyles" modifier\'s `adaptive` option to allow', 'for smooth transitions, or remove these properties from the CSS', 'transition declaration on the popper element if only transitioning', 'opacity or background-color for example.', '\n\n', 'We recommend using the popper element as a wrapper around an inner', 'element that can have any CSS property transitioned for animations.'].join(' ')); + } + } + + var commonStyles = { + placement: getBasePlacement(state.placement), + popper: state.elements.popper, + popperRect: state.rects.popper, + gpuAcceleration: gpuAcceleration + }; + + if (state.modifiersData.popperOffsets != null) { + state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, { + offsets: state.modifiersData.popperOffsets, + position: state.options.strategy, + adaptive: adaptive, + roundOffsets: roundOffsets + }))); + } + + if (state.modifiersData.arrow != null) { + state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, { + offsets: state.modifiersData.arrow, + position: 'absolute', + adaptive: false, + roundOffsets: roundOffsets + }))); + } + + state.attributes.popper = Object.assign({}, state.attributes.popper, { + 'data-popper-placement': state.placement + }); +} // eslint-disable-next-line import/no-unused-modules + + +var computeStyles$1 = { + name: 'computeStyles', + enabled: true, + phase: 'beforeWrite', + fn: computeStyles, + data: {} +}; + +var passive = { + passive: true +}; + +function effect(_ref) { + var state = _ref.state, + instance = _ref.instance, + options = _ref.options; + var _options$scroll = options.scroll, + scroll = _options$scroll === void 0 ? true : _options$scroll, + _options$resize = options.resize, + resize = _options$resize === void 0 ? true : _options$resize; + var window = getWindow(state.elements.popper); + var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper); + + if (scroll) { + scrollParents.forEach(function (scrollParent) { + scrollParent.addEventListener('scroll', instance.update, passive); + }); + } + + if (resize) { + window.addEventListener('resize', instance.update, passive); + } + + return function () { + if (scroll) { + scrollParents.forEach(function (scrollParent) { + scrollParent.removeEventListener('scroll', instance.update, passive); + }); + } + + if (resize) { + window.removeEventListener('resize', instance.update, passive); + } + }; +} // eslint-disable-next-line import/no-unused-modules + + +var eventListeners = { + name: 'eventListeners', + enabled: true, + phase: 'write', + fn: function fn() {}, + effect: effect, + data: {} +}; + +var hash$1 = { + left: 'right', + right: 'left', + bottom: 'top', + top: 'bottom' +}; +function getOppositePlacement(placement) { + return placement.replace(/left|right|bottom|top/g, function (matched) { + return hash$1[matched]; + }); +} + +var hash = { + start: 'end', + end: 'start' +}; +function getOppositeVariationPlacement(placement) { + return placement.replace(/start|end/g, function (matched) { + return hash[matched]; + }); +} + +function getWindowScroll(node) { + var win = getWindow(node); + var scrollLeft = win.pageXOffset; + var scrollTop = win.pageYOffset; + return { + scrollLeft: scrollLeft, + scrollTop: scrollTop + }; +} + +function getWindowScrollBarX(element) { + // If has a CSS width greater than the viewport, then this will be + // incorrect for RTL. + // Popper 1 is broken in this case and never had a bug report so let's assume + // it's not an issue. I don't think anyone ever specifies width on + // anyway. + // Browsers where the left scrollbar doesn't cause an issue report `0` for + // this (e.g. Edge 2019, IE11, Safari) + return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft; +} + +function getViewportRect(element) { + var win = getWindow(element); + var html = getDocumentElement(element); + var visualViewport = win.visualViewport; + var width = html.clientWidth; + var height = html.clientHeight; + var x = 0; + var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper + // can be obscured underneath it. + // Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even + // if it isn't open, so if this isn't available, the popper will be detected + // to overflow the bottom of the screen too early. + + if (visualViewport) { + width = visualViewport.width; + height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently) + // In Chrome, it returns a value very close to 0 (+/-) but contains rounding + // errors due to floating point numbers, so we need to check precision. + // Safari returns a number <= 0, usually < -1 when pinch-zoomed + // Feature detection fails in mobile emulation mode in Chrome. + // Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) < + // 0.001 + // Fallback here: "Not Safari" userAgent + + if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) { + x = visualViewport.offsetLeft; + y = visualViewport.offsetTop; + } + } + + return { + width: width, + height: height, + x: x + getWindowScrollBarX(element), + y: y + }; +} + +// of the `` and `` rect bounds if horizontally scrollable + +function getDocumentRect(element) { + var _element$ownerDocumen; + + var html = getDocumentElement(element); + var winScroll = getWindowScroll(element); + var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body; + var width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0); + var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0); + var x = -winScroll.scrollLeft + getWindowScrollBarX(element); + var y = -winScroll.scrollTop; + + if (getComputedStyle$1(body || html).direction === 'rtl') { + x += max(html.clientWidth, body ? body.clientWidth : 0) - width; + } + + return { + width: width, + height: height, + x: x, + y: y + }; +} + +function isScrollParent(element) { + // Firefox wants us to check `-x` and `-y` variations as well + var _getComputedStyle = getComputedStyle$1(element), + overflow = _getComputedStyle.overflow, + overflowX = _getComputedStyle.overflowX, + overflowY = _getComputedStyle.overflowY; + + return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX); +} + +function getScrollParent(node) { + if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) { + // $FlowFixMe[incompatible-return]: assume body is always available + return node.ownerDocument.body; + } + + if (isHTMLElement(node) && isScrollParent(node)) { + return node; + } + + return getScrollParent(getParentNode(node)); +} + +/* +given a DOM element, return the list of all scroll parents, up the list of ancesors +until we get to the top window object. This list is what we attach scroll listeners +to, because if any of these parent elements scroll, we'll need to re-calculate the +reference element's position. +*/ + +function listScrollParents(element, list) { + var _element$ownerDocumen; + + if (list === void 0) { + list = []; + } + + var scrollParent = getScrollParent(element); + var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body); + var win = getWindow(scrollParent); + var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent; + var updatedList = list.concat(target); + return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here + updatedList.concat(listScrollParents(getParentNode(target))); +} + +function rectToClientRect(rect) { + return Object.assign({}, rect, { + left: rect.x, + top: rect.y, + right: rect.x + rect.width, + bottom: rect.y + rect.height + }); +} + +function getInnerBoundingClientRect(element) { + var rect = getBoundingClientRect(element); + rect.top = rect.top + element.clientTop; + rect.left = rect.left + element.clientLeft; + rect.bottom = rect.top + element.clientHeight; + rect.right = rect.left + element.clientWidth; + rect.width = element.clientWidth; + rect.height = element.clientHeight; + rect.x = rect.left; + rect.y = rect.top; + return rect; +} + +function getClientRectFromMixedType(element, clippingParent) { + return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element))); +} // A "clipping parent" is an overflowable container with the characteristic of +// clipping (or hiding) overflowing elements with a position different from +// `initial` + + +function getClippingParents(element) { + var clippingParents = listScrollParents(getParentNode(element)); + var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle$1(element).position) >= 0; + var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element; + + if (!isElement(clipperElement)) { + return []; + } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414 + + + return clippingParents.filter(function (clippingParent) { + return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body'; + }); +} // Gets the maximum area that the element is visible in due to any number of +// clipping parents + + +function getClippingRect(element, boundary, rootBoundary) { + var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary); + var clippingParents = [].concat(mainClippingParents, [rootBoundary]); + var firstClippingParent = clippingParents[0]; + var clippingRect = clippingParents.reduce(function (accRect, clippingParent) { + var rect = getClientRectFromMixedType(element, clippingParent); + accRect.top = max(rect.top, accRect.top); + accRect.right = min(rect.right, accRect.right); + accRect.bottom = min(rect.bottom, accRect.bottom); + accRect.left = max(rect.left, accRect.left); + return accRect; + }, getClientRectFromMixedType(element, firstClippingParent)); + clippingRect.width = clippingRect.right - clippingRect.left; + clippingRect.height = clippingRect.bottom - clippingRect.top; + clippingRect.x = clippingRect.left; + clippingRect.y = clippingRect.top; + return clippingRect; +} + +function getVariation(placement) { + return placement.split('-')[1]; +} + +function computeOffsets(_ref) { + var reference = _ref.reference, + element = _ref.element, + placement = _ref.placement; + var basePlacement = placement ? getBasePlacement(placement) : null; + var variation = placement ? getVariation(placement) : null; + var commonX = reference.x + reference.width / 2 - element.width / 2; + var commonY = reference.y + reference.height / 2 - element.height / 2; + var offsets; + + switch (basePlacement) { + case top: + offsets = { + x: commonX, + y: reference.y - element.height + }; + break; + + case bottom: + offsets = { + x: commonX, + y: reference.y + reference.height + }; + break; + + case right: + offsets = { + x: reference.x + reference.width, + y: commonY + }; + break; + + case left: + offsets = { + x: reference.x - element.width, + y: commonY + }; + break; + + default: + offsets = { + x: reference.x, + y: reference.y + }; + } + + var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null; + + if (mainAxis != null) { + var len = mainAxis === 'y' ? 'height' : 'width'; + + switch (variation) { + case start: + offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2); + break; + + case end: + offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2); + break; + } + } + + return offsets; +} + +function detectOverflow(state, options) { + if (options === void 0) { + options = {}; + } + + var _options = options, + _options$placement = _options.placement, + placement = _options$placement === void 0 ? state.placement : _options$placement, + _options$boundary = _options.boundary, + boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, + _options$rootBoundary = _options.rootBoundary, + rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary, + _options$elementConte = _options.elementContext, + elementContext = _options$elementConte === void 0 ? popper : _options$elementConte, + _options$altBoundary = _options.altBoundary, + altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary, + _options$padding = _options.padding, + padding = _options$padding === void 0 ? 0 : _options$padding; + var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); + var altContext = elementContext === popper ? reference : popper; + var referenceElement = state.elements.reference; + var popperRect = state.rects.popper; + var element = state.elements[altBoundary ? altContext : elementContext]; + var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary); + var referenceClientRect = getBoundingClientRect(referenceElement); + var popperOffsets = computeOffsets({ + reference: referenceClientRect, + element: popperRect, + strategy: 'absolute', + placement: placement + }); + var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets)); + var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect + // 0 or negative = within the clipping rect + + var overflowOffsets = { + top: clippingClientRect.top - elementClientRect.top + paddingObject.top, + bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom, + left: clippingClientRect.left - elementClientRect.left + paddingObject.left, + right: elementClientRect.right - clippingClientRect.right + paddingObject.right + }; + var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element + + if (elementContext === popper && offsetData) { + var offset = offsetData[placement]; + Object.keys(overflowOffsets).forEach(function (key) { + var multiply = [right, bottom].indexOf(key) >= 0 ? 1 : -1; + var axis = [top, bottom].indexOf(key) >= 0 ? 'y' : 'x'; + overflowOffsets[key] += offset[axis] * multiply; + }); + } + + return overflowOffsets; +} + +function computeAutoPlacement(state, options) { + if (options === void 0) { + options = {}; + } + + var _options = options, + placement = _options.placement, + boundary = _options.boundary, + rootBoundary = _options.rootBoundary, + padding = _options.padding, + flipVariations = _options.flipVariations, + _options$allowedAutoP = _options.allowedAutoPlacements, + allowedAutoPlacements = _options$allowedAutoP === void 0 ? placements : _options$allowedAutoP; + var variation = getVariation(placement); + var placements$1 = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) { + return getVariation(placement) === variation; + }) : basePlacements; + var allowedPlacements = placements$1.filter(function (placement) { + return allowedAutoPlacements.indexOf(placement) >= 0; + }); + + if (allowedPlacements.length === 0) { + allowedPlacements = placements$1; + + if (process.env.NODE_ENV !== "production") { + console.error(['Popper: The `allowedAutoPlacements` option did not allow any', 'placements. Ensure the `placement` option matches the variation', 'of the allowed placements.', 'For example, "auto" cannot be used to allow "bottom-start".', 'Use "auto-start" instead.'].join(' ')); + } + } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions... + + + var overflows = allowedPlacements.reduce(function (acc, placement) { + acc[placement] = detectOverflow(state, { + placement: placement, + boundary: boundary, + rootBoundary: rootBoundary, + padding: padding + })[getBasePlacement(placement)]; + return acc; + }, {}); + return Object.keys(overflows).sort(function (a, b) { + return overflows[a] - overflows[b]; + }); +} + +function getExpandedFallbackPlacements(placement) { + if (getBasePlacement(placement) === auto) { + return []; + } + + var oppositePlacement = getOppositePlacement(placement); + return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)]; +} + +function flip(_ref) { + var state = _ref.state, + options = _ref.options, + name = _ref.name; + + if (state.modifiersData[name]._skip) { + return; + } + + var _options$mainAxis = options.mainAxis, + checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, + _options$altAxis = options.altAxis, + checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis, + specifiedFallbackPlacements = options.fallbackPlacements, + padding = options.padding, + boundary = options.boundary, + rootBoundary = options.rootBoundary, + altBoundary = options.altBoundary, + _options$flipVariatio = options.flipVariations, + flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio, + allowedAutoPlacements = options.allowedAutoPlacements; + var preferredPlacement = state.options.placement; + var basePlacement = getBasePlacement(preferredPlacement); + var isBasePlacement = basePlacement === preferredPlacement; + var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement)); + var placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) { + return acc.concat(getBasePlacement(placement) === auto ? computeAutoPlacement(state, { + placement: placement, + boundary: boundary, + rootBoundary: rootBoundary, + padding: padding, + flipVariations: flipVariations, + allowedAutoPlacements: allowedAutoPlacements + }) : placement); + }, []); + var referenceRect = state.rects.reference; + var popperRect = state.rects.popper; + var checksMap = new Map(); + var makeFallbackChecks = true; + var firstFittingPlacement = placements[0]; + + for (var i = 0; i < placements.length; i++) { + var placement = placements[i]; + + var _basePlacement = getBasePlacement(placement); + + var isStartVariation = getVariation(placement) === start; + var isVertical = [top, bottom].indexOf(_basePlacement) >= 0; + var len = isVertical ? 'width' : 'height'; + var overflow = detectOverflow(state, { + placement: placement, + boundary: boundary, + rootBoundary: rootBoundary, + altBoundary: altBoundary, + padding: padding + }); + var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : top; + + if (referenceRect[len] > popperRect[len]) { + mainVariationSide = getOppositePlacement(mainVariationSide); + } + + var altVariationSide = getOppositePlacement(mainVariationSide); + var checks = []; + + if (checkMainAxis) { + checks.push(overflow[_basePlacement] <= 0); + } + + if (checkAltAxis) { + checks.push(overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0); + } + + if (checks.every(function (check) { + return check; + })) { + firstFittingPlacement = placement; + makeFallbackChecks = false; + break; + } + + checksMap.set(placement, checks); + } + + if (makeFallbackChecks) { + // `2` may be desired in some cases – research later + var numberOfChecks = flipVariations ? 3 : 1; + + var _loop = function _loop(_i) { + var fittingPlacement = placements.find(function (placement) { + var checks = checksMap.get(placement); + + if (checks) { + return checks.slice(0, _i).every(function (check) { + return check; + }); + } + }); + + if (fittingPlacement) { + firstFittingPlacement = fittingPlacement; + return "break"; + } + }; + + for (var _i = numberOfChecks; _i > 0; _i--) { + var _ret = _loop(_i); + + if (_ret === "break") break; + } + } + + if (state.placement !== firstFittingPlacement) { + state.modifiersData[name]._skip = true; + state.placement = firstFittingPlacement; + state.reset = true; + } +} // eslint-disable-next-line import/no-unused-modules + + +var flip$1 = { + name: 'flip', + enabled: true, + phase: 'main', + fn: flip, + requiresIfExists: ['offset'], + data: { + _skip: false + } +}; + +function getSideOffsets(overflow, rect, preventedOffsets) { + if (preventedOffsets === void 0) { + preventedOffsets = { + x: 0, + y: 0 + }; + } + + return { + top: overflow.top - rect.height - preventedOffsets.y, + right: overflow.right - rect.width + preventedOffsets.x, + bottom: overflow.bottom - rect.height + preventedOffsets.y, + left: overflow.left - rect.width - preventedOffsets.x + }; +} + +function isAnySideFullyClipped(overflow) { + return [top, right, bottom, left].some(function (side) { + return overflow[side] >= 0; + }); +} + +function hide(_ref) { + var state = _ref.state, + name = _ref.name; + var referenceRect = state.rects.reference; + var popperRect = state.rects.popper; + var preventedOffsets = state.modifiersData.preventOverflow; + var referenceOverflow = detectOverflow(state, { + elementContext: 'reference' + }); + var popperAltOverflow = detectOverflow(state, { + altBoundary: true + }); + var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect); + var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets); + var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets); + var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); + state.modifiersData[name] = { + referenceClippingOffsets: referenceClippingOffsets, + popperEscapeOffsets: popperEscapeOffsets, + isReferenceHidden: isReferenceHidden, + hasPopperEscaped: hasPopperEscaped + }; + state.attributes.popper = Object.assign({}, state.attributes.popper, { + 'data-popper-reference-hidden': isReferenceHidden, + 'data-popper-escaped': hasPopperEscaped + }); +} // eslint-disable-next-line import/no-unused-modules + + +var hide$1 = { + name: 'hide', + enabled: true, + phase: 'main', + requiresIfExists: ['preventOverflow'], + fn: hide +}; + +function distanceAndSkiddingToXY(placement, rects, offset) { + var basePlacement = getBasePlacement(placement); + var invertDistance = [left, top].indexOf(basePlacement) >= 0 ? -1 : 1; + + var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, { + placement: placement + })) : offset, + skidding = _ref[0], + distance = _ref[1]; + + skidding = skidding || 0; + distance = (distance || 0) * invertDistance; + return [left, right].indexOf(basePlacement) >= 0 ? { + x: distance, + y: skidding + } : { + x: skidding, + y: distance + }; +} + +function offset(_ref2) { + var state = _ref2.state, + options = _ref2.options, + name = _ref2.name; + var _options$offset = options.offset, + offset = _options$offset === void 0 ? [0, 0] : _options$offset; + var data = placements.reduce(function (acc, placement) { + acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset); + return acc; + }, {}); + var _data$state$placement = data[state.placement], + x = _data$state$placement.x, + y = _data$state$placement.y; + + if (state.modifiersData.popperOffsets != null) { + state.modifiersData.popperOffsets.x += x; + state.modifiersData.popperOffsets.y += y; + } + + state.modifiersData[name] = data; +} // eslint-disable-next-line import/no-unused-modules + + +var offset$1 = { + name: 'offset', + enabled: true, + phase: 'main', + requires: ['popperOffsets'], + fn: offset +}; + +function popperOffsets(_ref) { + var state = _ref.state, + name = _ref.name; + // Offsets are the actual position the popper needs to have to be + // properly positioned near its reference element + // This is the most basic placement, and will be adjusted by + // the modifiers in the next step + state.modifiersData[name] = computeOffsets({ + reference: state.rects.reference, + element: state.rects.popper, + strategy: 'absolute', + placement: state.placement + }); +} // eslint-disable-next-line import/no-unused-modules + + +var popperOffsets$1 = { + name: 'popperOffsets', + enabled: true, + phase: 'read', + fn: popperOffsets, + data: {} +}; + +function getAltAxis(axis) { + return axis === 'x' ? 'y' : 'x'; +} + +function preventOverflow(_ref) { + var state = _ref.state, + options = _ref.options, + name = _ref.name; + var _options$mainAxis = options.mainAxis, + checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, + _options$altAxis = options.altAxis, + checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis, + boundary = options.boundary, + rootBoundary = options.rootBoundary, + altBoundary = options.altBoundary, + padding = options.padding, + _options$tether = options.tether, + tether = _options$tether === void 0 ? true : _options$tether, + _options$tetherOffset = options.tetherOffset, + tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset; + var overflow = detectOverflow(state, { + boundary: boundary, + rootBoundary: rootBoundary, + padding: padding, + altBoundary: altBoundary + }); + var basePlacement = getBasePlacement(state.placement); + var variation = getVariation(state.placement); + var isBasePlacement = !variation; + var mainAxis = getMainAxisFromPlacement(basePlacement); + var altAxis = getAltAxis(mainAxis); + var popperOffsets = state.modifiersData.popperOffsets; + var referenceRect = state.rects.reference; + var popperRect = state.rects.popper; + var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, { + placement: state.placement + })) : tetherOffset; + var data = { + x: 0, + y: 0 + }; + + if (!popperOffsets) { + return; + } + + if (checkMainAxis || checkAltAxis) { + var mainSide = mainAxis === 'y' ? top : left; + var altSide = mainAxis === 'y' ? bottom : right; + var len = mainAxis === 'y' ? 'height' : 'width'; + var offset = popperOffsets[mainAxis]; + var min$1 = popperOffsets[mainAxis] + overflow[mainSide]; + var max$1 = popperOffsets[mainAxis] - overflow[altSide]; + var additive = tether ? -popperRect[len] / 2 : 0; + var minLen = variation === start ? referenceRect[len] : popperRect[len]; + var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go + // outside the reference bounds + + var arrowElement = state.elements.arrow; + var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : { + width: 0, + height: 0 + }; + var arrowPaddingObject = state.modifiersData['arrow#persistent'] ? state.modifiersData['arrow#persistent'].padding : getFreshSideObject(); + var arrowPaddingMin = arrowPaddingObject[mainSide]; + var arrowPaddingMax = arrowPaddingObject[altSide]; // If the reference length is smaller than the arrow length, we don't want + // to include its full size in the calculation. If the reference is small + // and near the edge of a boundary, the popper can overflow even if the + // reference is not overflowing as well (e.g. virtual elements with no + // width or height) + + var arrowLen = within(0, referenceRect[len], arrowRect[len]); + var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - tetherOffsetValue : minLen - arrowLen - arrowPaddingMin - tetherOffsetValue; + var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue; + var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow); + var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0; + var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0; + var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset; + var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue; + + if (checkMainAxis) { + var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1); + popperOffsets[mainAxis] = preventedOffset; + data[mainAxis] = preventedOffset - offset; + } + + if (checkAltAxis) { + var _mainSide = mainAxis === 'x' ? top : left; + + var _altSide = mainAxis === 'x' ? bottom : right; + + var _offset = popperOffsets[altAxis]; + + var _min = _offset + overflow[_mainSide]; + + var _max = _offset - overflow[_altSide]; + + var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max); + + popperOffsets[altAxis] = _preventedOffset; + data[altAxis] = _preventedOffset - _offset; + } + } + + state.modifiersData[name] = data; +} // eslint-disable-next-line import/no-unused-modules + + +var preventOverflow$1 = { + name: 'preventOverflow', + enabled: true, + phase: 'main', + fn: preventOverflow, + requiresIfExists: ['offset'] +}; + +function getHTMLElementScroll(element) { + return { + scrollLeft: element.scrollLeft, + scrollTop: element.scrollTop + }; +} + +function getNodeScroll(node) { + if (node === getWindow(node) || !isHTMLElement(node)) { + return getWindowScroll(node); + } else { + return getHTMLElementScroll(node); + } +} + +// Composite means it takes into account transforms as well as layout. + +function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) { + if (isFixed === void 0) { + isFixed = false; + } + + var documentElement = getDocumentElement(offsetParent); + var rect = getBoundingClientRect(elementOrVirtualElement); + var isOffsetParentAnElement = isHTMLElement(offsetParent); + var scroll = { + scrollLeft: 0, + scrollTop: 0 + }; + var offsets = { + x: 0, + y: 0 + }; + + if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) { + if (getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078 + isScrollParent(documentElement)) { + scroll = getNodeScroll(offsetParent); + } + + if (isHTMLElement(offsetParent)) { + offsets = getBoundingClientRect(offsetParent); + offsets.x += offsetParent.clientLeft; + offsets.y += offsetParent.clientTop; + } else if (documentElement) { + offsets.x = getWindowScrollBarX(documentElement); + } + } + + return { + x: rect.left + scroll.scrollLeft - offsets.x, + y: rect.top + scroll.scrollTop - offsets.y, + width: rect.width, + height: rect.height + }; +} + +function order(modifiers) { + var map = new Map(); + var visited = new Set(); + var result = []; + modifiers.forEach(function (modifier) { + map.set(modifier.name, modifier); + }); // On visiting object, check for its dependencies and visit them recursively + + function sort(modifier) { + visited.add(modifier.name); + var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []); + requires.forEach(function (dep) { + if (!visited.has(dep)) { + var depModifier = map.get(dep); + + if (depModifier) { + sort(depModifier); + } + } + }); + result.push(modifier); + } + + modifiers.forEach(function (modifier) { + if (!visited.has(modifier.name)) { + // check for visited object + sort(modifier); + } + }); + return result; +} + +function orderModifiers(modifiers) { + // order based on dependencies + var orderedModifiers = order(modifiers); // order based on phase + + return modifierPhases.reduce(function (acc, phase) { + return acc.concat(orderedModifiers.filter(function (modifier) { + return modifier.phase === phase; + })); + }, []); +} + +function debounce(fn) { + var pending; + return function () { + if (!pending) { + pending = new Promise(function (resolve) { + Promise.resolve().then(function () { + pending = undefined; + resolve(fn()); + }); + }); + } + + return pending; + }; +} + +function format(str) { + for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + + return [].concat(args).reduce(function (p, c) { + return p.replace(/%s/, c); + }, str); +} + +var INVALID_MODIFIER_ERROR = 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s'; +var MISSING_DEPENDENCY_ERROR = 'Popper: modifier "%s" requires "%s", but "%s" modifier is not available'; +var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options']; +function validateModifiers(modifiers) { + modifiers.forEach(function (modifier) { + Object.keys(modifier).forEach(function (key) { + switch (key) { + case 'name': + if (typeof modifier.name !== 'string') { + console.error(format(INVALID_MODIFIER_ERROR, String(modifier.name), '"name"', '"string"', "\"" + String(modifier.name) + "\"")); + } + + break; + + case 'enabled': + if (typeof modifier.enabled !== 'boolean') { + console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', "\"" + String(modifier.enabled) + "\"")); + } + + case 'phase': + if (modifierPhases.indexOf(modifier.phase) < 0) { + console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + modifierPhases.join(', '), "\"" + String(modifier.phase) + "\"")); + } + + break; + + case 'fn': + if (typeof modifier.fn !== 'function') { + console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"fn"', '"function"', "\"" + String(modifier.fn) + "\"")); + } + + break; + + case 'effect': + if (typeof modifier.effect !== 'function') { + console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', "\"" + String(modifier.fn) + "\"")); + } + + break; + + case 'requires': + if (!Array.isArray(modifier.requires)) { + console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\"")); + } + + break; + + case 'requiresIfExists': + if (!Array.isArray(modifier.requiresIfExists)) { + console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requiresIfExists"', '"array"', "\"" + String(modifier.requiresIfExists) + "\"")); + } + + break; + + case 'options': + case 'data': + break; + + default: + console.error("PopperJS: an invalid property has been provided to the \"" + modifier.name + "\" modifier, valid properties are " + VALID_PROPERTIES.map(function (s) { + return "\"" + s + "\""; + }).join(', ') + "; but \"" + key + "\" was provided."); + } + + modifier.requires && modifier.requires.forEach(function (requirement) { + if (modifiers.find(function (mod) { + return mod.name === requirement; + }) == null) { + console.error(format(MISSING_DEPENDENCY_ERROR, String(modifier.name), requirement, requirement)); + } + }); + }); + }); +} + +function uniqueBy(arr, fn) { + var identifiers = new Set(); + return arr.filter(function (item) { + var identifier = fn(item); + + if (!identifiers.has(identifier)) { + identifiers.add(identifier); + return true; + } + }); +} + +function mergeByName(modifiers) { + var merged = modifiers.reduce(function (merged, current) { + var existing = merged[current.name]; + merged[current.name] = existing ? Object.assign({}, existing, current, { + options: Object.assign({}, existing.options, current.options), + data: Object.assign({}, existing.data, current.data) + }) : current; + return merged; + }, {}); // IE11 does not support Object.values + + return Object.keys(merged).map(function (key) { + return merged[key]; + }); +} + +var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.'; +var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.'; +var DEFAULT_OPTIONS = { + placement: 'bottom', + modifiers: [], + strategy: 'absolute' +}; + +function areValidElements() { + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return !args.some(function (element) { + return !(element && typeof element.getBoundingClientRect === 'function'); + }); +} + +function popperGenerator(generatorOptions) { + if (generatorOptions === void 0) { + generatorOptions = {}; + } + + var _generatorOptions = generatorOptions, + _generatorOptions$def = _generatorOptions.defaultModifiers, + defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def, + _generatorOptions$def2 = _generatorOptions.defaultOptions, + defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2; + return function createPopper(reference, popper, options) { + if (options === void 0) { + options = defaultOptions; + } + + var state = { + placement: 'bottom', + orderedModifiers: [], + options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions), + modifiersData: {}, + elements: { + reference: reference, + popper: popper + }, + attributes: {}, + styles: {} + }; + var effectCleanupFns = []; + var isDestroyed = false; + var instance = { + state: state, + setOptions: function setOptions(options) { + cleanupModifierEffects(); + state.options = Object.assign({}, defaultOptions, state.options, options); + state.scrollParents = { + reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [], + popper: listScrollParents(popper) + }; // Orders the modifiers based on their dependencies and `phase` + // properties + + var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers + + state.orderedModifiers = orderedModifiers.filter(function (m) { + return m.enabled; + }); // Validate the provided modifiers so that the consumer will get warned + // if one of the modifiers is invalid for any reason + + if (process.env.NODE_ENV !== "production") { + var modifiers = uniqueBy([].concat(orderedModifiers, state.options.modifiers), function (_ref) { + var name = _ref.name; + return name; + }); + validateModifiers(modifiers); + + if (getBasePlacement(state.options.placement) === auto) { + var flipModifier = state.orderedModifiers.find(function (_ref2) { + var name = _ref2.name; + return name === 'flip'; + }); + + if (!flipModifier) { + console.error(['Popper: "auto" placements require the "flip" modifier be', 'present and enabled to work.'].join(' ')); + } + } + + var _getComputedStyle = getComputedStyle$1(popper), + marginTop = _getComputedStyle.marginTop, + marginRight = _getComputedStyle.marginRight, + marginBottom = _getComputedStyle.marginBottom, + marginLeft = _getComputedStyle.marginLeft; // We no longer take into account `margins` on the popper, and it can + // cause bugs with positioning, so we'll warn the consumer + + + if ([marginTop, marginRight, marginBottom, marginLeft].some(function (margin) { + return parseFloat(margin); + })) { + console.warn(['Popper: CSS "margin" styles cannot be used to apply padding', 'between the popper and its reference element or boundary.', 'To replicate margin, use the `offset` modifier, as well as', 'the `padding` option in the `preventOverflow` and `flip`', 'modifiers.'].join(' ')); + } + } + + runModifierEffects(); + return instance.update(); + }, + // Sync update – it will always be executed, even if not necessary. This + // is useful for low frequency updates where sync behavior simplifies the + // logic. + // For high frequency updates (e.g. `resize` and `scroll` events), always + // prefer the async Popper#update method + forceUpdate: function forceUpdate() { + if (isDestroyed) { + return; + } + + var _state$elements = state.elements, + reference = _state$elements.reference, + popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements + // anymore + + if (!areValidElements(reference, popper)) { + if (process.env.NODE_ENV !== "production") { + console.error(INVALID_ELEMENT_ERROR); + } + + return; + } // Store the reference and popper rects to be read by modifiers + + + state.rects = { + reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'), + popper: getLayoutRect(popper) + }; // Modifiers have the ability to reset the current update cycle. The + // most common use case for this is the `flip` modifier changing the + // placement, which then needs to re-run all the modifiers, because the + // logic was previously ran for the previous placement and is therefore + // stale/incorrect + + state.reset = false; + state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier + // is filled with the initial data specified by the modifier. This means + // it doesn't persist and is fresh on each update. + // To ensure persistent data, use `${name}#persistent` + + state.orderedModifiers.forEach(function (modifier) { + return state.modifiersData[modifier.name] = Object.assign({}, modifier.data); + }); + var __debug_loops__ = 0; + + for (var index = 0; index < state.orderedModifiers.length; index++) { + if (process.env.NODE_ENV !== "production") { + __debug_loops__ += 1; + + if (__debug_loops__ > 100) { + console.error(INFINITE_LOOP_ERROR); + break; + } + } + + if (state.reset === true) { + state.reset = false; + index = -1; + continue; + } + + var _state$orderedModifie = state.orderedModifiers[index], + fn = _state$orderedModifie.fn, + _state$orderedModifie2 = _state$orderedModifie.options, + _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2, + name = _state$orderedModifie.name; + + if (typeof fn === 'function') { + state = fn({ + state: state, + options: _options, + name: name, + instance: instance + }) || state; + } + } + }, + // Async and optimistically optimized update – it will not be executed if + // not necessary (debounced to run at most once-per-tick) + update: debounce(function () { + return new Promise(function (resolve) { + instance.forceUpdate(); + resolve(state); + }); + }), + destroy: function destroy() { + cleanupModifierEffects(); + isDestroyed = true; + } + }; + + if (!areValidElements(reference, popper)) { + if (process.env.NODE_ENV !== "production") { + console.error(INVALID_ELEMENT_ERROR); + } + + return instance; + } + + instance.setOptions(options).then(function (state) { + if (!isDestroyed && options.onFirstUpdate) { + options.onFirstUpdate(state); + } + }); // Modifiers have the ability to execute arbitrary code before the first + // update cycle runs. They will be executed in the same order as the update + // cycle. This is useful when a modifier adds some persistent data that + // other modifiers need to use, but the modifier is run after the dependent + // one. + + function runModifierEffects() { + state.orderedModifiers.forEach(function (_ref3) { + var name = _ref3.name, + _ref3$options = _ref3.options, + options = _ref3$options === void 0 ? {} : _ref3$options, + effect = _ref3.effect; + + if (typeof effect === 'function') { + var cleanupFn = effect({ + state: state, + name: name, + instance: instance, + options: options + }); + + var noopFn = function noopFn() {}; + + effectCleanupFns.push(cleanupFn || noopFn); + } + }); + } + + function cleanupModifierEffects() { + effectCleanupFns.forEach(function (fn) { + return fn(); + }); + effectCleanupFns = []; + } + + return instance; + }; +} + +var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1]; +var createPopper = /*#__PURE__*/popperGenerator({ + defaultModifiers: defaultModifiers +}); // eslint-disable-next-line import/no-unused-modules + +class Suggest { + constructor(owner, containerEl, scope) { + this.owner = owner; + this.containerEl = containerEl; + containerEl.on("click", ".suggestion-item", this.onSuggestionClick.bind(this)); + containerEl.on("mousemove", ".suggestion-item", this.onSuggestionMouseover.bind(this)); + scope.register([], "ArrowUp", (event) => { + if (!event.isComposing) { + this.setSelectedItem(this.selectedItem - 1, true); + return false; + } + }); + scope.register([], "ArrowDown", (event) => { + if (!event.isComposing) { + this.setSelectedItem(this.selectedItem + 1, true); + return false; + } + }); + scope.register([], "Enter", (event) => { + if (!event.isComposing) { + this.useSelectedItem(event); + return false; + } + }); + } + onSuggestionClick(event, el) { + event.preventDefault(); + const item = this.suggestions.indexOf(el); + this.setSelectedItem(item, false); + this.useSelectedItem(event); + } + onSuggestionMouseover(_event, el) { + const item = this.suggestions.indexOf(el); + this.setSelectedItem(item, false); + } + setSuggestions(values) { + this.containerEl.empty(); + const suggestionEls = []; + values.forEach((value) => { + const suggestionEl = this.containerEl.createDiv("suggestion-item"); + this.owner.renderSuggestion(value, suggestionEl); + suggestionEls.push(suggestionEl); + }); + this.values = values; + this.suggestions = suggestionEls; + this.setSelectedItem(0, false); + } + useSelectedItem(event) { + const currentValue = this.values[this.selectedItem]; + if (currentValue) { + this.owner.selectSuggestion(currentValue, event); + } + } + setSelectedItem(selectedIndex, scrollIntoView) { + const normalizedIndex = wrapAround(selectedIndex, this.suggestions.length); + const prevSelectedSuggestion = this.suggestions[this.selectedItem]; + const selectedSuggestion = this.suggestions[normalizedIndex]; + prevSelectedSuggestion === null || prevSelectedSuggestion === void 0 ? void 0 : prevSelectedSuggestion.removeClass("is-selected"); + selectedSuggestion === null || selectedSuggestion === void 0 ? void 0 : selectedSuggestion.addClass("is-selected"); + this.selectedItem = normalizedIndex; + if (scrollIntoView) { + selectedSuggestion.scrollIntoView(false); + } + } +} +class TextInputSuggest { + constructor(app, inputEl) { + this.app = app; + this.inputEl = inputEl; + this.scope = new obsidian.Scope(); + this.suggestEl = createDiv("suggestion-container"); + const suggestion = this.suggestEl.createDiv("suggestion"); + this.suggest = new Suggest(this, suggestion, this.scope); + this.scope.register([], "Escape", this.close.bind(this)); + this.inputEl.addEventListener("input", this.onInputChanged.bind(this)); + this.inputEl.addEventListener("focus", this.onInputChanged.bind(this)); + this.inputEl.addEventListener("blur", this.close.bind(this)); + this.suggestEl.on("mousedown", ".suggestion-container", (event) => { + event.preventDefault(); + }); + } + onInputChanged() { + const inputStr = this.inputEl.value; + const suggestions = this.getSuggestions(inputStr); + if (suggestions.length > 0) { + this.suggest.setSuggestions(suggestions); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + this.open(this.app.dom.appContainerEl, this.inputEl); + } + } + open(container, inputEl) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + this.app.keymap.pushScope(this.scope); + container.appendChild(this.suggestEl); + this.popper = createPopper(inputEl, this.suggestEl, { + placement: "bottom-start", + modifiers: [ + { + name: "sameWidth", + enabled: true, + fn: ({ state, instance }) => { + // Note: positioning needs to be calculated twice - + // first pass - positioning it according to the width of the popper + // second pass - position it with the width bound to the reference element + // we need to early exit to avoid an infinite loop + const targetWidth = `${state.rects.reference.width}px`; + if (state.styles.popper.width === targetWidth) { + return; + } + state.styles.popper.width = targetWidth; + instance.update(); + }, + phase: "beforeWrite", + requires: ["computeStyles"], + }, + ], + }); + } + close() { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + this.app.keymap.popScope(this.scope); + this.suggest.setSuggestions([]); + this.popper.destroy(); + this.suggestEl.detach(); + } +} + +class FileSuggest extends TextInputSuggest { + getSuggestions(inputStr) { + const abstractFiles = this.app.vault.getAllLoadedFiles(); + const files = []; + const lowerCaseInputStr = inputStr.toLowerCase(); + abstractFiles.forEach((file) => { + if (file instanceof obsidian.TFile && + file.extension === "md" && + file.path.toLowerCase().contains(lowerCaseInputStr)) { + files.push(file); + } + }); + return files; + } + renderSuggestion(file, el) { + el.setText(file.path); + } + selectSuggestion(file) { + this.inputEl.value = file.path; + this.inputEl.trigger("input"); + this.close(); + } +} +class FolderSuggest extends TextInputSuggest { + getSuggestions(inputStr) { + const abstractFiles = this.app.vault.getAllLoadedFiles(); + const folders = []; + const lowerCaseInputStr = inputStr.toLowerCase(); + abstractFiles.forEach((folder) => { + if (folder instanceof obsidian.TFolder && + folder.path.toLowerCase().contains(lowerCaseInputStr)) { + folders.push(folder); + } + }); + return folders; + } + renderSuggestion(file, el) { + el.setText(file.path); + } + selectSuggestion(file) { + this.inputEl.value = file.path; + this.inputEl.trigger("input"); + this.close(); + } +} + +/* src/settings/NoteTemplateSetting.svelte generated by Svelte v3.35.0 */ + +function create_if_block$2(ctx) { + let div; + let t; + + return { + c() { + div = element("div"); + t = text(/*error*/ ctx[3]); + attr(div, "class", "has-error"); + }, + m(target, anchor) { + insert(target, div, anchor); + append(div, t); + }, + p(ctx, dirty) { + if (dirty & /*error*/ 8) set_data(t, /*error*/ ctx[3]); + }, + d(detaching) { + if (detaching) detach(div); + } + }; +} + +function create_fragment$2(ctx) { + let div4; + let div2; + let div0; + let t0_value = capitalize(/*periodicity*/ ctx[1]) + ""; + let t0; + let t1; + let t2; + let div1; + let t4; + let t5; + let div3; + let input; + let mounted; + let dispose; + let if_block = /*error*/ ctx[3] && create_if_block$2(ctx); + + return { + c() { + div4 = element("div"); + div2 = element("div"); + div0 = element("div"); + t0 = text(t0_value); + t1 = text(" Note Template"); + t2 = space(); + div1 = element("div"); + div1.textContent = "Choose the file to use as a template"; + t4 = space(); + if (if_block) if_block.c(); + t5 = space(); + div3 = element("div"); + input = element("input"); + attr(div0, "class", "setting-item-name"); + attr(div1, "class", "setting-item-description"); + attr(div2, "class", "setting-item-info"); + attr(input, "type", "text"); + attr(input, "spellcheck", false); + attr(input, "placeholder", "Example: folder/note"); + toggle_class(input, "has-error", !!/*error*/ ctx[3]); + attr(div3, "class", "setting-item-control"); + attr(div4, "class", "setting-item"); + }, + m(target, anchor) { + insert(target, div4, anchor); + append(div4, div2); + append(div2, div0); + append(div0, t0); + append(div0, t1); + append(div2, t2); + append(div2, div1); + append(div2, t4); + if (if_block) if_block.m(div2, null); + append(div4, t5); + append(div4, div3); + append(div3, input); + /*input_binding*/ ctx[7](input); + set_input_value(input, /*$settings*/ ctx[2][/*periodicity*/ ctx[1]].template); + + if (!mounted) { + dispose = [ + listen(input, "input", /*input_input_handler*/ ctx[8]), + listen(input, "change", /*validateOnBlur*/ ctx[5]), + listen(input, "input", /*clearError*/ ctx[6]) + ]; + + mounted = true; + } + }, + p(ctx, [dirty]) { + if (dirty & /*periodicity*/ 2 && t0_value !== (t0_value = capitalize(/*periodicity*/ ctx[1]) + "")) set_data(t0, t0_value); + + if (/*error*/ ctx[3]) { + if (if_block) { + if_block.p(ctx, dirty); + } else { + if_block = create_if_block$2(ctx); + if_block.c(); + if_block.m(div2, null); + } + } else if (if_block) { + if_block.d(1); + if_block = null; + } + + if (dirty & /*$settings, periodicity*/ 6 && input.value !== /*$settings*/ ctx[2][/*periodicity*/ ctx[1]].template) { + set_input_value(input, /*$settings*/ ctx[2][/*periodicity*/ ctx[1]].template); + } + + if (dirty & /*error*/ 8) { + toggle_class(input, "has-error", !!/*error*/ ctx[3]); + } + }, + i: noop, + o: noop, + d(detaching) { + if (detaching) detach(div4); + if (if_block) if_block.d(); + /*input_binding*/ ctx[7](null); + mounted = false; + run_all(dispose); + } + }; +} + +function instance$2($$self, $$props, $$invalidate) { + let $settings, + $$unsubscribe_settings = noop, + $$subscribe_settings = () => ($$unsubscribe_settings(), $$unsubscribe_settings = subscribe(settings, $$value => $$invalidate(2, $settings = $$value)), settings); + + $$self.$$.on_destroy.push(() => $$unsubscribe_settings()); + + + let { settings } = $$props; + $$subscribe_settings(); + let { periodicity } = $$props; + let error; + let inputEl; + + function validateOnBlur() { + $$invalidate(3, error = validateTemplate(inputEl.value)); + } + + function clearError() { + $$invalidate(3, error = ""); + } + + onMount(() => { + $$invalidate(3, error = validateTemplate(inputEl.value)); + new FileSuggest(window.app, inputEl); + }); + + function input_binding($$value) { + binding_callbacks[$$value ? "unshift" : "push"](() => { + inputEl = $$value; + $$invalidate(4, inputEl); + }); + } + + function input_input_handler() { + $settings[periodicity].template = this.value; + settings.set($settings); + $$invalidate(1, periodicity); + } + + $$self.$$set = $$props => { + if ("settings" in $$props) $$subscribe_settings($$invalidate(0, settings = $$props.settings)); + if ("periodicity" in $$props) $$invalidate(1, periodicity = $$props.periodicity); + }; + + $$self.$$.update = () => { + if ($$self.$$.dirty & /*$settings, periodicity*/ 6) { + $settings[periodicity].template || ""; + } + }; + + return [ + settings, + periodicity, + $settings, + error, + inputEl, + validateOnBlur, + clearError, + input_binding, + input_input_handler + ]; +} + +class NoteTemplateSetting extends SvelteComponent { + constructor(options) { + super(); + init(this, options, instance$2, create_fragment$2, safe_not_equal, { settings: 0, periodicity: 1 }); + } +} + +/* src/settings/NoteFolderSetting.svelte generated by Svelte v3.35.0 */ + +function create_if_block$1(ctx) { + let div; + let t; + + return { + c() { + div = element("div"); + t = text(/*error*/ ctx[4]); + attr(div, "class", "has-error"); + }, + m(target, anchor) { + insert(target, div, anchor); + append(div, t); + }, + p(ctx, dirty) { + if (dirty & /*error*/ 16) set_data(t, /*error*/ ctx[4]); + }, + d(detaching) { + if (detaching) detach(div); + } + }; +} + +function create_fragment$1(ctx) { + let div4; + let div2; + let div0; + let t1; + let div1; + let t2; + let t3; + let t4; + let t5; + let t6; + let div3; + let input; + let mounted; + let dispose; + let if_block = /*error*/ ctx[4] && create_if_block$1(ctx); + + return { + c() { + div4 = element("div"); + div2 = element("div"); + div0 = element("div"); + div0.textContent = "Note Folder"; + t1 = space(); + div1 = element("div"); + t2 = text("New "); + t3 = text(/*periodicity*/ ctx[1]); + t4 = text(" notes will be placed here"); + t5 = space(); + if (if_block) if_block.c(); + t6 = space(); + div3 = element("div"); + input = element("input"); + attr(div0, "class", "setting-item-name"); + attr(div1, "class", "setting-item-description"); + attr(div2, "class", "setting-item-info"); + attr(input, "type", "text"); + attr(input, "spellcheck", false); + attr(input, "placeholder", "Example: folder 1/folder 2"); + toggle_class(input, "has-error", !!/*error*/ ctx[4]); + attr(div3, "class", "setting-item-control"); + attr(div4, "class", "setting-item"); + }, + m(target, anchor) { + insert(target, div4, anchor); + append(div4, div2); + append(div2, div0); + append(div2, t1); + append(div2, div1); + append(div1, t2); + append(div1, t3); + append(div1, t4); + append(div2, t5); + if (if_block) if_block.m(div2, null); + append(div4, t6); + append(div4, div3); + append(div3, input); + set_input_value(input, /*$settings*/ ctx[2][/*periodicity*/ ctx[1]].folder); + /*input_binding*/ ctx[8](input); + + if (!mounted) { + dispose = [ + listen(input, "input", /*input_input_handler*/ ctx[7]), + listen(input, "change", /*onChange*/ ctx[5]), + listen(input, "input", /*clearError*/ ctx[6]) + ]; + + mounted = true; + } + }, + p(ctx, [dirty]) { + if (dirty & /*periodicity*/ 2) set_data(t3, /*periodicity*/ ctx[1]); + + if (/*error*/ ctx[4]) { + if (if_block) { + if_block.p(ctx, dirty); + } else { + if_block = create_if_block$1(ctx); + if_block.c(); + if_block.m(div2, null); + } + } else if (if_block) { + if_block.d(1); + if_block = null; + } + + if (dirty & /*$settings, periodicity*/ 6 && input.value !== /*$settings*/ ctx[2][/*periodicity*/ ctx[1]].folder) { + set_input_value(input, /*$settings*/ ctx[2][/*periodicity*/ ctx[1]].folder); + } + + if (dirty & /*error*/ 16) { + toggle_class(input, "has-error", !!/*error*/ ctx[4]); + } + }, + i: noop, + o: noop, + d(detaching) { + if (detaching) detach(div4); + if (if_block) if_block.d(); + /*input_binding*/ ctx[8](null); + mounted = false; + run_all(dispose); + } + }; +} + +function instance$1($$self, $$props, $$invalidate) { + let $settings, + $$unsubscribe_settings = noop, + $$subscribe_settings = () => ($$unsubscribe_settings(), $$unsubscribe_settings = subscribe(settings, $$value => $$invalidate(2, $settings = $$value)), settings); + + $$self.$$.on_destroy.push(() => $$unsubscribe_settings()); + + + let { settings } = $$props; + $$subscribe_settings(); + let { periodicity } = $$props; + let inputEl; + let error; + + function onChange() { + $$invalidate(4, error = validateFolder(inputEl.value)); + } + + function clearError() { + $$invalidate(4, error = ""); + } + + onMount(() => { + $$invalidate(4, error = validateFolder(inputEl.value)); + new FolderSuggest(window.app, inputEl); + }); + + function input_input_handler() { + $settings[periodicity].folder = this.value; + settings.set($settings); + $$invalidate(1, periodicity); + } + + function input_binding($$value) { + binding_callbacks[$$value ? "unshift" : "push"](() => { + inputEl = $$value; + $$invalidate(3, inputEl); + }); + } + + $$self.$$set = $$props => { + if ("settings" in $$props) $$subscribe_settings($$invalidate(0, settings = $$props.settings)); + if ("periodicity" in $$props) $$invalidate(1, periodicity = $$props.periodicity); + }; + + $$self.$$.update = () => { + if ($$self.$$.dirty & /*$settings, periodicity*/ 6) { + $settings[periodicity].folder || ""; + } + }; + + return [ + settings, + periodicity, + $settings, + inputEl, + error, + onChange, + clearError, + input_input_handler, + input_binding + ]; +} + +class NoteFolderSetting extends SvelteComponent { + constructor(options) { + super(); + init(this, options, instance$1, create_fragment$1, safe_not_equal, { settings: 0, periodicity: 1 }); + } +} + +/* src/settings/SettingsTab.svelte generated by Svelte v3.35.0 */ + +function get_each_context(ctx, list, i) { + const child_ctx = ctx.slice(); + child_ctx[9] = list[i]; + return child_ctx; +} + +// (33:0) {#if $settingsStore.showGettingStartedBanner} +function create_if_block_1(ctx) { + let gettingstartedbanner; + let current; + + gettingstartedbanner = new GettingStartedBanner({ + props: { + migrateDailyNoteSettings: /*migrateDailyNoteSettings*/ ctx[2], + settings: /*settingsStore*/ ctx[1], + handleTeardown: /*func*/ ctx[6] + } + }); + + return { + c() { + create_component(gettingstartedbanner.$$.fragment); + }, + m(target, anchor) { + mount_component(gettingstartedbanner, target, anchor); + current = true; + }, + p(ctx, dirty) { + const gettingstartedbanner_changes = {}; + if (dirty & /*$settingsStore*/ 1) gettingstartedbanner_changes.handleTeardown = /*func*/ ctx[6]; + gettingstartedbanner.$set(gettingstartedbanner_changes); + }, + i(local) { + if (current) return; + transition_in(gettingstartedbanner.$$.fragment, local); + current = true; + }, + o(local) { + transition_out(gettingstartedbanner.$$.fragment, local); + current = false; + }, + d(detaching) { + destroy_component(gettingstartedbanner, detaching); + } + }; +} + +// (62:2) {#if $settingsStore[periodicity].enabled} +function create_if_block(ctx) { + let div; + let noteformatsetting; + let t0; + let notetemplatesetting; + let t1; + let notefoldersetting; + let t2; + let div_intro; + let div_outro; + let current; + + noteformatsetting = new NoteFormatSetting({ + props: { + periodicity: /*periodicity*/ ctx[9], + settings: /*settingsStore*/ ctx[1] + } + }); + + notetemplatesetting = new NoteTemplateSetting({ + props: { + periodicity: /*periodicity*/ ctx[9], + settings: /*settingsStore*/ ctx[1] + } + }); + + notefoldersetting = new NoteFolderSetting({ + props: { + periodicity: /*periodicity*/ ctx[9], + settings: /*settingsStore*/ ctx[1] + } + }); + + return { + c() { + div = element("div"); + create_component(noteformatsetting.$$.fragment); + t0 = space(); + create_component(notetemplatesetting.$$.fragment); + t1 = space(); + create_component(notefoldersetting.$$.fragment); + t2 = space(); + }, + m(target, anchor) { + insert(target, div, anchor); + mount_component(noteformatsetting, div, null); + append(div, t0); + mount_component(notetemplatesetting, div, null); + append(div, t1); + mount_component(notefoldersetting, div, null); + append(div, t2); + current = true; + }, + p: noop, + i(local) { + if (current) return; + transition_in(noteformatsetting.$$.fragment, local); + transition_in(notetemplatesetting.$$.fragment, local); + transition_in(notefoldersetting.$$.fragment, local); + + add_render_callback(() => { + if (div_outro) div_outro.end(1); + if (!div_intro) div_intro = create_in_transition(div, slide, {}); + div_intro.start(); + }); + + current = true; + }, + o(local) { + transition_out(noteformatsetting.$$.fragment, local); + transition_out(notetemplatesetting.$$.fragment, local); + transition_out(notefoldersetting.$$.fragment, local); + if (div_intro) div_intro.invalidate(); + div_outro = create_out_transition(div, slide, {}); + current = false; + }, + d(detaching) { + if (detaching) detach(div); + destroy_component(noteformatsetting); + destroy_component(notetemplatesetting); + destroy_component(notefoldersetting); + if (detaching && div_outro) div_outro.end(); + } + }; +} + +// (42:0) {#each periodicities as periodicity} +function create_each_block(ctx) { + let div4; + let div1; + let div0; + let h3; + let t0_value = capitalize(/*periodicity*/ ctx[9]) + ""; + let t0; + let t1; + let t2; + let div3; + let div2; + let t3; + let if_block_anchor; + let current; + let mounted; + let dispose; + + function click_handler() { + return /*click_handler*/ ctx[7](/*periodicity*/ ctx[9]); + } + + let if_block = /*$settingsStore*/ ctx[0][/*periodicity*/ ctx[9]].enabled && create_if_block(ctx); + + return { + c() { + div4 = element("div"); + div1 = element("div"); + div0 = element("div"); + h3 = element("h3"); + t0 = text(t0_value); + t1 = text(" Notes"); + t2 = space(); + div3 = element("div"); + div2 = element("div"); + t3 = space(); + if (if_block) if_block.c(); + if_block_anchor = empty(); + attr(div0, "class", "setting-item-name"); + attr(div1, "class", "setting-item-info"); + attr(div2, "class", "checkbox-container"); + toggle_class(div2, "is-enabled", /*$settingsStore*/ ctx[0][/*periodicity*/ ctx[9]].enabled); + attr(div3, "class", "setting-item-control"); + attr(div4, "class", "setting-item setting-item-heading"); + }, + m(target, anchor) { + insert(target, div4, anchor); + append(div4, div1); + append(div1, div0); + append(div0, h3); + append(h3, t0); + append(h3, t1); + append(div4, t2); + append(div4, div3); + append(div3, div2); + insert(target, t3, anchor); + if (if_block) if_block.m(target, anchor); + insert(target, if_block_anchor, anchor); + current = true; + + if (!mounted) { + dispose = listen(div2, "click", click_handler); + mounted = true; + } + }, + p(new_ctx, dirty) { + ctx = new_ctx; + + if (dirty & /*$settingsStore, periodicities*/ 9) { + toggle_class(div2, "is-enabled", /*$settingsStore*/ ctx[0][/*periodicity*/ ctx[9]].enabled); + } + + if (/*$settingsStore*/ ctx[0][/*periodicity*/ ctx[9]].enabled) { + if (if_block) { + if_block.p(ctx, dirty); + + if (dirty & /*$settingsStore*/ 1) { + transition_in(if_block, 1); + } + } else { + if_block = create_if_block(ctx); + if_block.c(); + transition_in(if_block, 1); + if_block.m(if_block_anchor.parentNode, if_block_anchor); + } + } else if (if_block) { + group_outros(); + + transition_out(if_block, 1, 1, () => { + if_block = null; + }); + + check_outros(); + } + }, + i(local) { + if (current) return; + transition_in(if_block); + current = true; + }, + o(local) { + transition_out(if_block); + current = false; + }, + d(detaching) { + if (detaching) detach(div4); + if (detaching) detach(t3); + if (if_block) if_block.d(detaching); + if (detaching) detach(if_block_anchor); + mounted = false; + dispose(); + } + }; +} + +function create_fragment(ctx) { + let t; + let each_1_anchor; + let current; + let if_block = /*$settingsStore*/ ctx[0].showGettingStartedBanner && create_if_block_1(ctx); + let each_value = /*periodicities*/ ctx[3]; + let each_blocks = []; + + for (let i = 0; i < each_value.length; i += 1) { + each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); + } + + const out = i => transition_out(each_blocks[i], 1, 1, () => { + each_blocks[i] = null; + }); + + return { + c() { + if (if_block) if_block.c(); + t = space(); + + for (let i = 0; i < each_blocks.length; i += 1) { + each_blocks[i].c(); + } + + each_1_anchor = empty(); + }, + m(target, anchor) { + if (if_block) if_block.m(target, anchor); + insert(target, t, anchor); + + for (let i = 0; i < each_blocks.length; i += 1) { + each_blocks[i].m(target, anchor); + } + + insert(target, each_1_anchor, anchor); + current = true; + }, + p(ctx, [dirty]) { + if (/*$settingsStore*/ ctx[0].showGettingStartedBanner) { + if (if_block) { + if_block.p(ctx, dirty); + + if (dirty & /*$settingsStore*/ 1) { + transition_in(if_block, 1); + } + } else { + if_block = create_if_block_1(ctx); + if_block.c(); + transition_in(if_block, 1); + if_block.m(t.parentNode, t); + } + } else if (if_block) { + group_outros(); + + transition_out(if_block, 1, 1, () => { + if_block = null; + }); + + check_outros(); + } + + if (dirty & /*periodicities, settingsStore, $settingsStore, capitalize*/ 11) { + each_value = /*periodicities*/ ctx[3]; + let i; + + for (i = 0; i < each_value.length; i += 1) { + const child_ctx = get_each_context(ctx, each_value, i); + + if (each_blocks[i]) { + each_blocks[i].p(child_ctx, dirty); + transition_in(each_blocks[i], 1); + } else { + each_blocks[i] = create_each_block(child_ctx); + each_blocks[i].c(); + transition_in(each_blocks[i], 1); + each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor); + } + } + + group_outros(); + + for (i = each_value.length; i < each_blocks.length; i += 1) { + out(i); + } + + check_outros(); + } + }, + i(local) { + if (current) return; + transition_in(if_block); + + for (let i = 0; i < each_value.length; i += 1) { + transition_in(each_blocks[i]); + } + + current = true; + }, + o(local) { + transition_out(if_block); + each_blocks = each_blocks.filter(Boolean); + + for (let i = 0; i < each_blocks.length; i += 1) { + transition_out(each_blocks[i]); + } + + current = false; + }, + d(detaching) { + if (if_block) if_block.d(detaching); + if (detaching) detach(t); + destroy_each(each_blocks, detaching); + if (detaching) detach(each_1_anchor); + } + }; +} + +function instance($$self, $$props, $$invalidate) { + let $settingsStore; + + let { settings } = $$props; + let { onUpdateSettings } = $$props; + let settingsStore = writable(settings); + component_subscribe($$self, settingsStore, value => $$invalidate(0, $settingsStore = value)); + const unsubscribeFromSettings = settingsStore.subscribe(onUpdateSettings); + + function migrateDailyNoteSettings() { + const dailyNoteSettings = getLegacyDailyNoteSettings(); + + settingsStore.update(old => Object.assign(Object.assign({}, old), { + daily: Object.assign(Object.assign({}, dailyNoteSettings), { enabled: true }), + hasMigratedDailyNoteSettings: true + })); + } + + const periodicities = ["daily", "weekly", "monthly", "quarterly", "yearly"]; + + onDestroy(() => { + unsubscribeFromSettings(); + }); + + const func = () => { + set_store_value(settingsStore, $settingsStore.showGettingStartedBanner = false, $settingsStore); + }; + + const click_handler = periodicity => { + set_store_value(settingsStore, $settingsStore[periodicity].enabled = !$settingsStore[periodicity].enabled, $settingsStore); + }; + + $$self.$$set = $$props => { + if ("settings" in $$props) $$invalidate(4, settings = $$props.settings); + if ("onUpdateSettings" in $$props) $$invalidate(5, onUpdateSettings = $$props.onUpdateSettings); + }; + + return [ + $settingsStore, + settingsStore, + migrateDailyNoteSettings, + periodicities, + settings, + onUpdateSettings, + func, + click_handler + ]; +} + +class SettingsTab extends SvelteComponent { + constructor(options) { + super(); + init(this, options, instance, create_fragment, safe_not_equal, { settings: 4, onUpdateSettings: 5 }); + } +} + +const DEFAULT_SETTINGS = Object.freeze({ + format: "", + template: "", + folder: "", +}); +class PeriodicNotesSettingsTab extends obsidian.PluginSettingTab { + constructor(app, plugin) { + super(app, plugin); + this.plugin = plugin; + } + display() { + this.containerEl.empty(); + this.view = new SettingsTab({ + target: this.containerEl, + props: { + settings: this.plugin.settings, + onUpdateSettings: this.plugin.updateSettings, + }, + }); + } +} + +class PeriodicNotesPlugin extends obsidian.Plugin { + async onload() { + this.ribbonEl = null; + this.updateSettings = this.updateSettings.bind(this); + await this.loadSettings(); + this.addSettingTab(new PeriodicNotesSettingsTab(this.app, this)); + this.app.workspace.onLayoutReady(this.onLayoutReady.bind(this)); + obsidian.addIcon("calendar-day", calendarDayIcon); + obsidian.addIcon("calendar-week", calendarWeekIcon); + obsidian.addIcon("calendar-month", calendarMonthIcon); + obsidian.addIcon("calendar-quarter", calendarQuarterIcon); + obsidian.addIcon("calendar-year", calendarYearIcon); + } + onLayoutReady() { + // If the user has Calendar Weekly Notes settings, migrate them automatically, + // since the functionality will be deprecated. + if (this.isInitialLoad && hasLegacyWeeklyNoteSettings()) { + this.migrateWeeklySettings(); + this.settings.weekly.enabled = true; + } + this.configureRibbonIcons(); + this.configureCommands(); + } + migrateWeeklySettings() { + const calendarSettings = getLegacyWeeklyNoteSettings(); + this.updateSettings(Object.assign(Object.assign({}, this.settings), { + weekly: Object.assign(Object.assign({}, calendarSettings), { enabled: true }), + hasMigratedWeeklyNoteSettings: true, + })); + } + configureRibbonIcons() { + var _a; + (_a = this.ribbonEl) === null || _a === void 0 ? void 0 : _a.detach(); + const configuredPeriodicities = [ + "daily", + "weekly", + "monthly", + "quarterly", + "yearly", + ].filter((periodicity) => this.settings[periodicity].enabled); + if (configuredPeriodicities.length) { + const periodicity = configuredPeriodicities[0]; + const config = periodConfigs[periodicity]; + this.ribbonEl = this.addRibbonIcon(`calendar-${config.unitOfTime}`, `Open ${config.relativeUnit}`, (event) => openPeriodicNote(periodicity, window.moment(), isMetaPressed(event))); + this.ribbonEl.addEventListener("contextmenu", (ev) => { + showFileMenu(this.app, this.settings, { + x: ev.pageX, + y: ev.pageY, + }); + }); + } + } + configureCommands() { + // Remove disabled commands + ["daily", "weekly", "monthly", "quarterly", "yearly"] + .filter((periodicity) => !this.settings[periodicity].enabled) + .forEach((periodicity) => { + getCommands(periodicity).forEach((command) => + // eslint-disable-next-line @typescript-eslint/no-explicit-any + this.app.commands.removeCommand(`periodic-notes:${command.id}`)); + }); + // register enabled commands + ["daily", "weekly", "monthly", "quarterly", "yearly"] + .filter((periodicity) => this.settings[periodicity].enabled) + .forEach((periodicity) => { + getCommands(periodicity).forEach(this.addCommand.bind(this)); + }); + } + async loadSettings() { + const settings = await this.loadData(); + if (!settings) { + this.isInitialLoad = true; + } + this.settings = Object.assign({}, { + showGettingStartedBanner: true, + hasMigratedDailyNoteSettings: false, + hasMigratedWeeklyNoteSettings: false, + daily: Object.assign({}, DEFAULT_SETTINGS), + weekly: Object.assign({}, DEFAULT_SETTINGS), + monthly: Object.assign({}, DEFAULT_SETTINGS), + quarterly: Object.assign({}, DEFAULT_SETTINGS), + yearly: Object.assign({}, DEFAULT_SETTINGS), + }, settings || {}); + } + onSettingsUpdate() { + this.configureCommands(); + this.configureRibbonIcons(); + // Integrations (i.e. Calendar Plugin) can listen for changes to settings + this.app.workspace.trigger(SETTINGS_UPDATED); + } + async updateSettings(val) { + this.settings = val; + await this.saveData(this.settings); + this.onSettingsUpdate(); + } +} + +module.exports = PeriodicNotesPlugin; diff --git a/.obsidian/plugins/periodic-notes/manifest.json b/.obsidian/plugins/periodic-notes/manifest.json new file mode 100644 index 0000000..f34394e --- /dev/null +++ b/.obsidian/plugins/periodic-notes/manifest.json @@ -0,0 +1,10 @@ +{ + "id": "periodic-notes", + "name": "Periodic Notes", + "description": "Create/manage your daily, weekly, and monthly notes", + "version": "0.0.17", + "author": "Liam Cain", + "authorUrl": "https://github.com/liamcain/", + "isDesktopOnly": false, + "minAppVersion": "0.10.11" +} diff --git a/.obsidian/plugins/periodic-notes/styles.css b/.obsidian/plugins/periodic-notes/styles.css new file mode 100644 index 0000000..d388888 --- /dev/null +++ b/.obsidian/plugins/periodic-notes/styles.css @@ -0,0 +1,30 @@ +.periodic-modal { + min-width: 40vw; +} + +.settings-banner { + background-color: var(--background-primary-alt); + border-radius: 8px; + border: 1px solid var(--background-modifier-border); + margin-bottom: 1em; + margin-top: 1em; + padding: 1.5em; + text-align: left; +} + +.settings-banner h3 { + margin-top: 0; +} + +.settings-banner h4 { + margin-bottom: 0.25em; +} + +.has-error { + color: var(--text-error); +} + +input.has-error { + color: var(--text-error); + border-color: var(--text-error); +} diff --git a/Read Later/2023-10-14 - Using CSS custom properties like this is a waste - YouTube.md b/Read Later/2023-10-14 - Using CSS custom properties like this is a waste - YouTube.md new file mode 100644 index 0000000..a4b7739 --- /dev/null +++ b/Read Later/2023-10-14 - Using CSS custom properties like this is a waste - YouTube.md @@ -0,0 +1,46 @@ +--- +id: 23360258-5e55-4f51-ae84-83f073539aef +title: | + Using CSS custom properties like this is a waste - YouTube +status: ARCHIVED +tags: + - read-later + - Youtube +date_added: 2023-10-14 20:11:15 +url_omnivore: | + https://omnivore.app/me/using-css-custom-properties-like-this-is-a-waste-you-tube-18b30754bdc +url_original: | + https://m.youtube.com/watch?index=12&list=WL&pp=gAQBiAQB&v=_2LwjfYc1x8 +--- + +# Using CSS custom properties like this is a waste - YouTube + +## Notes + +Definir _"variables locales"_ en la clase más alta de un _componente_ (Ej: ˋ.cardˋ), esta variable se puede utilizar para hacer variantes del componente de manera más rápida y limpia y se puede utilizar en los decendientes de la clase. + +Esto tiene la ventaja de: +1. Para crear una variante de nuestro componente solo debemos crear una nueva clase y añadirla junto a la clase más alta (ˋ.card-successˋ), y ya solo debemos sobre escribir las variables en vez de tener que actualizar cada parte del componente (ˋ.card.card-success .buttonˋ & ˋ.card.card-success .card-header h3ˋ). +2. Si tenemos propiedades complejas o animaciones donde solo varia una parte de ellas (Ej: ˋdrop-shadowˋ) no tenemos que re-escribir en cada variante la propiedad completa. + +## Original + + + +0:02 / 16:11•Watch full video + +[](https://m.youtube.com/@KevinPowell) + +45K views 2 days ago [#css](https://m.youtube.com/hashtag/css) + +If you're interested in checking out ICodeThis, you can find it here: [https://icodethis.com/?ref=kevin](https://www.youtube.com/redirect?event=video%5Fdescription&redir%5Ftoken=QUFFLUhqbVZsbWpVZ3M1NUdacFdJSVZha3BFQ0ZIaTNoZ3xBQ3Jtc0ttWG5nU0ltOTdzSE9YSDQ3aWlsUVFGcEVoMlRFaVhLb0hrczRKRVgta3N0bXBIeC1Sc1ZtTWJHY2MycUpfdVN6OE5pWDlfTG9WQlhTMlRzcW1YX2p1MTY4bjVybTd1ZG02RV9zM1l0QkFWeTNybjBtcw&q=https%3A%2F%2Ficodethis.com%2F%3Fref%3Dkevin&v=%5F2LwjfYc1x8) and if you want to sign up for one of their premium plans, use KEVIN at checkout for an extra 10% off. Custom properties are amazing, but a lot of people don’t take advantage of how awesome they are. They set them up in the :root and that’s it, but they can be so much more useful than that! So, in this … + +...more + +...more + + 45,645 views • Oct 12, 2023 • #css + +#### License + +Shop the Kevin Powell store \ No newline at end of file diff --git a/Read Later/2023-10-14 - You Don’t Actually Want Open World Games - YouTube.md b/Read Later/2023-10-14 - You Don’t Actually Want Open World Games - YouTube.md new file mode 100644 index 0000000..fbd9607 --- /dev/null +++ b/Read Later/2023-10-14 - You Don’t Actually Want Open World Games - YouTube.md @@ -0,0 +1,72 @@ +--- +id: d7652dec-ed7a-4473-8d58-5ef8bf4eeefd +title: | + You Don’t Actually Want Open World Games - YouTube +status: ARCHIVED +tags: + - read-later + - Youtube +date_added: 2023-10-14 20:08:13 +url_omnivore: | + https://omnivore.app/me/you-don-t-actually-want-open-world-games-you-tube-18b307286a6 +url_original: | + https://m.youtube.com/watch?index=2&list=WL&pp=gAQBiAQB&v=-O3oe8sSRhQ +--- + +# You Don’t Actually Want Open World Games - YouTube + +## Notes + +> Realmente no queremos juegos _"open world"_, queremos la libertad que creemos que nos dará + +Los juegos open world no están excentos de necesitar un buen diseño para proveer una experiencia divertida de jugar. En este caso particular se debe principalmente a 2 fenomenos: + +### No nos gusta que nos digan que hacer + +Por lo que si encontramos una forma de impedimento para poder avanzar en cierta dirección podemos tener 2 posibles reacciones: + +1. Rebeldía al querer desafiar este impedimento solo porque se nos dijo que **NO**. +2. Apatía y/o frustración ya que se nos quitó la _"libertad"_ de elección. + +### Demaciadas elecciones son abrumantes + +Según estudios, las personas son más seguras y quedan más contentas con sus elecciones si es que las opciones son más limitadas (Ej: 5 vs 30). Esto se debe principalmente a que al realizar una elección de algo, también elegimos no tener acceso al resto de opciones. + +Si bien esta en la mayoría de los casos esta inaccesibilidad es temporal , aún existe, probocando una sensación de de angustia cuando se van multiplicando y multiplicando sin control. + +### Conclusión + +Al igual que en otros casos, una buena idea mal implementada puede llevar al fracaso, es por eso que se necesita un buen diseño para mantener el balance entre _"guiar sutilmente_" al jugador sin imponer una tajante limitación que le quite totalmente la libertad. + +Juegos que han implementan esta idea son: +- [TLOZ - Breath of the wild](games/the-legend-of-zelda-breath-of-the-wild) +- [Metroid Dread](games/metroid-dread) +## Original + +## Chapters + +## Description + +You Don’t Actually Want Open World Games + +Daryl Talks Games + + Daryl Talks Games + +23K Likes + +343,299 Views + +2022 Jul 9 + +Get 20% OFF + Free Shipping with code “DARYL” at [https://mnscpd.com/daryl](https://www.youtube.com/redirect?event=video%5Fdescription&redir%5Ftoken=QUFFLUhqa1AxdEdWTE4xQ1ljVllOczNhaEtQR0JXbkk1d3xBQ3Jtc0ttOE9WYWZHVkZWV1VUMHhOZnFtZUZYT0dmRlFMTjZXaGNmQlBodHdEaDZQTDNRSkw5NkhoVmIwVW9TQlIyb2xkQmQ4d0ozS1RlNnJuYTlyclFYUlJaODlRRVRDNUFsMVBScEN0dkkwZW1GdGZ1eU16QQ&q=https%3A%2F%2Fmnscpd.com%2Fdaryl&v=-O3oe8sSRhQ) [#ad](https://m.youtube.com/hashtag/ad)Are you a fan of being told “No”? Do you like it when a person keeps you from doing what you want to do, do you enjoy when a game limits your options? Probably not. In fact if anything, being told no likely makes you want that thing even more. Today on Psych of Play, were going to take a look at Psychological Reactance and how it affects our time with a game. And more specifically, we’ll take a look at how it influences your time with open world games. Buckle up, this is gonna be a good one. Amazing thumbnail art by Kloir! - [https://twitter.com/kloirr/status/139...](https://www.youtube.com/redirect?event=video%5Fdescription&redir%5Ftoken=QUFFLUhqbmRPeTdhUGdMT1dkNHl3RU9VWU92N1BPQTlXQXxBQ3Jtc0tsSkpTc1RuZ0NzMFM0Q1NBQVpya1JGSHNZbGVBR051Nzd6enI1ck1YU3lKQm5ETHJjUFJlZzRRQ0xicHhhcXpwUm1HZlFuMzl4T3lycmx1M0paeUtUaktTc0NkNGtDQ3ptbTF5M21jbkVLMmt1MWlIaw&q=https%3A%2F%2Ftwitter.com%2Fkloirr%2Fstatus%2F1394322065528745984%3Fs%3D20%26t%3DbIFXtmU3NBNY8MRrDynG5w&v=-O3oe8sSRhQ)Support Daryl Talks Games on Patreon! ▶▶ [https://www.patreon.com/daryltalksgames](https://www.youtube.com/redirect?event=video%5Fdescription&redir%5Ftoken=QUFFLUhqbFlTM1JTTHlXcEN6VzFZLUJwVHVxR3VlMGlMZ3xBQ3Jtc0trOG5EZEQ2eWg5bzJveUZ0Z3VYdlk3SUlISWJvWlhWN2t1aUxjclhYdjZ1SGR0bFhQeDZFay10akFqb3czbmxwelg2VnNPc1UzX1ltYU02TEZSU1dsT3hFUF9KZ3hBMGJlMWhMTXVpVTZwYTNTY0cxVQ&q=https%3A%2F%2Fwww.patreon.com%2Fdaryltalksgames&v=-O3oe8sSRhQ)Bonus content, early access, YOUR name at the end of videos, and more all for $1/month! Twitter ▶[https://twitter.com/DarylTalksGames](https://www.youtube.com/redirect?event=video%5Fdescription&redir%5Ftoken=QUFFLUhqbW9pZ0lCN2FzLWVNY0FjMGZfVGNhalNuX0RWZ3xBQ3Jtc0trRUFSam4xY21sUWFidmlYS3VhOE9kN3AySktZQ1htb0JOODlycWZ3M2ZyS1YtYXBNV2NUd1VmRUxMUGNyOEhsc1JWZm5VXzJxN29FVnhaSEttZmRIaE9KYkVZaE1tWE5VSlpJUllHU1cwTmVqVER5dw&q=https%3A%2F%2Ftwitter.com%2FDarylTalksGames&v=-O3oe8sSRhQ)Twitch ▶[https://www.twitch.tv/daryltalksgames](https://www.youtube.com/redirect?event=video%5Fdescription&redir%5Ftoken=QUFFLUhqbE5WYTVGQ1U5SGc3R1BiSGJZZ1FteGRpVGp1Z3xBQ3Jtc0ttQmtzRUloblVKeC1TQ2lfVDRrcjhXM09xc1VadEdyeVZsdnVNVmxGQ3NUbzdHakFDemRfSEV0VlE5YVVMeUh2cFRRUVNNY3dtU1dVMzhhOVFOOW93N0VELWJNdGk0VE94TTk5bnNKYkJrSUlyWGlKOA&q=https%3A%2F%2Fwww.twitch.tv%2Fdaryltalksgames&v=-O3oe8sSRhQ)Manscaped: Do it for the boys ([0:00](https://m.youtube.com/watch?v=-O3oe8sSRhQ&t=0s)) A Trip Down Memory Lane ([1:21](https://m.youtube.com/watch?v=-O3oe8sSRhQ&t=81s)) What is Reactance? ([3:25](https://m.youtube.com/watch?v=-O3oe8sSRhQ&t=205s)) The Mistaken Allure of Open Worlds ([7:15](https://m.youtube.com/watch?v=-O3oe8sSRhQ&t=435s)) Internal vs External Reactance ([9:38](https://m.youtube.com/watch?v=-O3oe8sSRhQ&t=578s)) How Games Can Avoid Both ([12:15](https://m.youtube.com/watch?v=-O3oe8sSRhQ&t=735s)) When Reactance is Good! ([15:16](https://m.youtube.com/watch?v=-O3oe8sSRhQ&t=916s)) Whale ([17:21](https://m.youtube.com/watch?v=-O3oe8sSRhQ&t=1041s)) Credits and Next Time ;) ([18:25](https://m.youtube.com/watch?v=-O3oe8sSRhQ&t=1105s)) ▶Games Shown Elden Ring (2022) -FromSoftware The Legend of Zelda: Breath of the Wild (2017) - Nintendo Ghost of Tsushima (2020) - Sucker Punch Productions Metroid Dread (2021) - Mercury Steam Persona 5: Royal (2019) - Atlus, P Studio The Legend of Zelda: Wind Waker (2002) - Nintendo The Legend of Zelda: Twilight Princess (2006) - Nintendo Hades (2020) - Supergiant Games No Man’s Sky (2016) - Hello Games Pokemon Legends: Arceus (2022) - Game Freak Red Dead Redemption 2 (2018) - Rockstar Games Horizon Zero Dawn (2017) - Guerilla Games Horizon Forbidden West (2021) - Guerrilla Games Far Cry 5 (2018) - Ubisoft Fallout 4 (2015) - Bethesda Skyrim (2011) - Bethesda BioShock (2007) - 2K Games Genshin Impact (2020) - miHoYo Pokemon Crystal (2000) - Game Freak Pokémon X and Y (2013) - Game Freak OMORI (2020) - OMOCAT, LLC Zelda: Wind Waker (2002) - Nintendo Super Mario Sunshine (2002) - Nintendo Neon White (2022) - Ben Esposito Final Fantasy VII Remake (2020) - Square Enix Ghostwire: Tokyo (2022) - Tango Gameworks Metro Exodus (2019) - 4A Games Phantasy Star Online 2 (2012) - Sega Sunset Overdrive (2014) - Insomniac Games Batman: Arkham Knight (2015) - Rocksteady Studios Sonic Frontiers (2022) - Sonic Team Forspoken (2023) - Luminous Productions Far Cry 6 (2021) - Ubisoft Pokemon Sword & Shield (2019) - Game Freak Danganronpa: Trigger Happy Havoc (2010) - Spike Chunsoft Cyberpunk 2077 (2020) - CD Projekt RED The Witcher 3: Wild Hunt (2015) - CD Projekt RED Grand Theft Auto V (2013) - Rockstar Games The Walking Dead (2012) - Telltale Games 10 Minutes Till Dawn (2022) - Flanne The Quarry (2022) - Supermassive Games Sable (2021) - Shedworks Starfield (2023) - Bethesda Fallout: New Vegas (2010) - Obsidian Entertainment Unpacking (2021) - Witch Beam ▶Media/Clips/Considerations:[ • Reactance PoP ](https://m.youtube.com/playlist?list=PLwABHajSLTc%5FbPASy3YrBC7uYYzYKLEv7) [ • Playlist ](https://m.youtube.com/playlist?list=PLwABHajSLTc9XTktQrlXVia0kRqOpH8wD)Icons from flaticon:[https://www.flaticon.com/free-icons/p...](https://www.youtube.com/redirect?event=video%5Fdescription&redir%5Ftoken=QUFFLUhqbTktcFJ4ZWxPVTl4bW9neXplVVpVSTZPU2Zhd3xBQ3Jtc0trUG5HclhQMFRPLVlPcjZ5S3lIRnFQc01YTFdITVpSdmZsY1kyZXJrRXBxczU2MnlmeExnb3NZem42NHRhbzlBMVlsSE5sR1NfOXlnNVByNnowN1FUSk5iSGJhMnV3cG54LXcxYndRNEtvOFJISU5Eaw&q=https%3A%2F%2Fwww.flaticon.com%2Ffree-icons%2Fperfume-bottle&v=-O3oe8sSRhQ) [https://www.flaticon.com/free-icons/c...](https://www.youtube.com/redirect?event=video%5Fdescription&redir%5Ftoken=QUFFLUhqbGV1azYzM2JWaE9vYmFKLU5IM0xHRU1reG8wZ3xBQ3Jtc0ttTHJSU2xpODdTV19vaTd1OGN1WWViR3VuWHhkMnNxMjFtVG1IZHEteTVxNW8xWGlSOWw4Nng3aUZHeW9KbUFJTWNUV3lTLVo1RHhGLXc2eDlFZFRSX21qd2VyU3ZXdXRaNTlfNmVkRmxXSktYSVRCVQ&q=https%3A%2F%2Fwww.flaticon.com%2Ffree-icons%2Fclock&v=-O3oe8sSRhQ) [https://www.flaticon.com/free-icons/m...](https://www.youtube.com/redirect?event=video%5Fdescription&redir%5Ftoken=QUFFLUhqbDZjOHZqaWd4SUdrY2RxUnl2TWJaWmw3c2lYUXxBQ3Jtc0tseUFrNnNKb005dl9xR2ppWklCZV8zX3otZi1BaWsyY1ZqTGsyb3FzeHBScFRYXzZydUh0X19nS2p6TjlwUWRHNmgwWUh4UUZIckF1bGpiWHBuS0FzOW9PVElrUnpyRk5KeDVJVGUzcUdHeHhLSHl5Zw&q=https%3A%2F%2Fwww.flaticon.com%2Ffree-icons%2Fmoney&v=-O3oe8sSRhQ)▶Music Sources (in Order): Saints Row IV OST - Hail to the Chief Remix de Blob OST - Blissful Skyrim OST - Far Horizons Pokemon Colosseum OST - Semi Final Battle Gran Turismo 5 OST - feels so good (KEMMEI ADACHI) Breath of the Wild OST - Riding at night Breath of the Wild OST - Field Battle Breath of the Wild OST - Guardian Metroid Prime OST - Phendrana Drifts (Depths) stiig - Gently Pass ([https://stiig.bandcamp.com/track/gent...](https://www.youtube.com/redirect?event=video%5Fdescription&redir%5Ftoken=QUFFLUhqbVZZOU8wUEk3NWtvT0JUdmpOZDJLbFZ0UXc5QXxBQ3Jtc0trSkVKSDA5Nzg4d0JFeG9EVWZsMHE4ODEtSi1iY1NoUWFGRXFLOVJ0WW94a2FyVnRIdTJYLVctbzdldWhwS2NDajYyV0RxX21CMjFnN3lkWWJESS1OOTJOMDdaM1NhenBvWVdpOXZCUlBWdnBMVHhSWQ&q=https%3A%2F%2Fstiig.bandcamp.com%2Ftrack%2Fgently-pass&v=-O3oe8sSRhQ)) Machinarium OST - The Bottom - DLJ - Flowers - Provided by Lofi Records - Watch: [ • DLJ - Flowers ](https://m.youtube.com/watch?v=M03fDyewvJc&t=0s)\- Download/Stream: [https://fanlink.to/AfterLifeAlbum](https://www.youtube.com/redirect?event=video%5Fdescription&redir%5Ftoken=QUFFLUhqbnV6S3gzb2hpSERjaXRzU2tSc215UlF3ZnFKd3xBQ3Jtc0tsTWVyaHA5NTR6TGlRd0g5dE9yTkxrT2dCLUxmbXpuZmN3QkpzejJSZU1wUU5yUXVUX1dfemMzMjVmYW1GVlhjQk84UURFU2JsbnRORWxCUVlKdi1HLXd3d2xHWV94cjlkX1dDSFJrNFM0ZmpHS2g0dw&q=https%3A%2F%2Ffanlink.to%2FAfterLifeAlbum&v=-O3oe8sSRhQ)▶Research Articles Cited [https://docs.google.com/document/d/1C...](https://www.youtube.com/redirect?event=video%5Fdescription&redir%5Ftoken=QUFFLUhqbWg4TGtnS1lHSC1vYWRveVFkUGxaZ3ptbmhKd3xBQ3Jtc0tsUHVFMFZUWmlMRWlZS0xMVG1JVFlyRUtfRmJncW8zdjBTbnZYclQ1Z0FKd0lMMFdxb2RGV3dpR1hrWlhIZEVlQXNWQXhEMWVMM29MN3B6ZWZqVFkxUUt0WE54TDN6ZlcwRTFMeHpWeDdnSmxEZnV4aw&q=https%3A%2F%2Fdocs.google.com%2Fdocument%2Fd%2F1Cdv5oLFP0iq7OOf7vSyU%5FsNWt9W2z5LYlJ1-zYjPxG4%2Fedit%3Fusp%3Dsharing&v=-O3oe8sSRhQ) [#PsychofPlay](https://m.youtube.com/hashtag/psychofplay) + +### Transcript + +Follow along using the transcript. + +[ Daryl Talks Games 487K subscribers ](https://m.youtube.com/@DarylTalksGames) + +## Comments 1.7K + +## Transcript \ No newline at end of file diff --git a/Read Later/2023-10-15 - Highlighting fold text, community fork of null-ls, leetcode integration, reduce ram ....md b/Read Later/2023-10-15 - Highlighting fold text, community fork of null-ls, leetcode integration, reduce ram ....md new file mode 100644 index 0000000..8b93329 --- /dev/null +++ b/Read Later/2023-10-15 - Highlighting fold text, community fork of null-ls, leetcode integration, reduce ram ....md @@ -0,0 +1,349 @@ +--- +id: 512f7bbc-6ba0-11ee-be2a-83432433f852 +title: | + Highlighting fold text, community fork of null-ls, leetcode integration, reduce ram usage of LSP servers, svelte inspector integration +status: ARCHIVED +tags: + - read-later + - RSS +date_added: 2023-10-15 16:10:23 +url_omnivore: | + https://omnivore.app/me/highlighting-fold-text-community-fork-of-null-ls-leetcode-integr-18b3533f57b +url_original: | + https://dotfyle.com/this-week-in-neovim/55 +--- + +# Highlighting fold text, community fork of null-ls, leetcode integration, reduce ram usage of LSP servers, svelte inspector integration + +## Highlights + +hinell/duplicate.nvim + +> [!note] +> Add to nvim config + +[source](https://omnivore.app/me/highlighting-fold-text-community-fork-of-null-ls-leetcode-integr-18b3533f57b#5de369b4-f406-446f-b59a-358d59dd9eb1) #Todo + +--- + +## Original + +## Introduction + +This week we have new features in Neovim Core, new plugins and new releases. Some new Neovim features include `:fclose` to close floating windows, support spaces in in directory names, treesitter highlighting in folds and NVIM\_APPNAME supports relative paths. + +We have several new plugins, e.g. you can now grind LeetCode inside Neovim, mini.pick a new fuzzy finder + selector added to the mini.nvim library, and a plugin to start/stop LSP servers upon demand to keep RAM usage low etc.. + +Hope you enjoy! + +## Neovim core + +> Updates of Neovim itself, which are available on Neovim nightly. + +> * [@neovim](https://twitter.com/neovim) on Twitter +> * [Neovim news](https://neovim.io/doc/user/news.html) +> * `:h news.txt` updates in Neovim directly +> * [PR's on GitHub](https://github.com/neovim/neovim/pulls) + +* [:fclose to close floating window](https://github.com/neovim/neovim/commit/fd39f5ce8c9bbda1b77ff6c03553148fadac5d57) +* [Spaces can be used to separate directory names. To have a space in a directory name, precede it with an extra backslash, and escape the space](https://github.com/neovim/neovim/commit/f5eabaa9407ae3d1ccf6592337453c423eff3d9a) +* [Ignore swapfile for running Nvim processes](https://github.com/neovim/neovim/commit/29fe883aa9166bdbcae3f935523c75a8aa56fe45) +* [vim.lsp.util.parse\_snippet() will now strictly follow the snippet grammar defined by LSP, and hence previously parsed snippets might now be considered invalid input.](https://github.com/neovim/neovim/commit/eb1f0e8fcca756a00d287e23bf87554e0e7f6dfd) +* [vim.treesitter.foldtext() applies treesitter highlighting to foldtext.](https://github.com/neovim/neovim/commit/9ce1623837a817c3f4f5deff9c8ba862578b6009) +* [Better cmdline completion for string option value](https://github.com/neovim/neovim/commit/01c51a491330bd10202c73aff92c0978984c0692) +* [Support toggling showing of float window](https://github.com/neovim/neovim/commit/4200a0f1678c06c6da4e4cfb0184c29c1174ed21) +* [NVIM\_APPNAME now supports relative paths](https://github.com/neovim/neovim/commit/a66b0fdfaa35715c832b98b8941cc5673505e0c2) + +### Highlighted folds on Neovim Nightly + + + +* [PR](https://github.com/neovim/neovim/pull/25209) +* [Reddit](https://www.reddit.com/r/neovim/comments/16sqyjz/finally%5Fwe%5Fcan%5Fhave%5Fhighlighted%5Ffolds/) + +## Neovim Plugin Community + +> Neovim is full of active plugins. This section is about the community and what is going on. + +--- + +### Resources & articles + +#### Open Neovim From Your Browser - Integrating nvim with Svelte’s Inspector + +* [Blog](https://theosteiner.de/open-neovim-from-your-browser-integrating-nvim-with-sveltes-inspector) +* [Reddit](https://www.reddit.com/r/neovim/comments/177p9fj/open%5Fneovim%5Ffrom%5Fyour%5Fbrowser%5Fintegrating%5Fnvim/) + +--- + +### New plugins + +#### none-ls.nvim is a community fork of null-ls.nvim + +> null-ls.nvim reloaded / Use Neovim as a language server to inject LSP diagnostics, code actions, and more via Lua. + +null-ls.nvim fork, maintained by the community. Only the repository name has changed for compatibility reasons. All the API's will stay as is. + +Migrate by replacing `jose-elias-alvarez/null-ls.nvim` with `nvimtools/none-ls.nvim` in your package manager. + +* [GitHub](https://github.com/nvimtools/none-ls.nvim) +* [Dotfyle](https://dotfyle.com/plugins/nvimtools/none-ls.nvim) +* [Reddit](https://www.reddit.com/r/neovim/comments/16wystn/nonelsnvim%5Fis%5Fa%5Fcommunity%5Ffork%5Fof%5Fnulllsnvim/) + +#### kawre/leetcode.nvim + + + +> A Neovim plugin enabling you to solve LeetCode problems within Neovim. + +* [GitHub](https://github.com/kawre/leetcode.nvim) +* [Dotfyle](https://dotfyle.com/plugins/kawre/leetcode.nvim) +* [Reddit](https://www.reddit.com/r/neovim/comments/173ctlz/leetcodenvim%5Fsolve%5Fleetcode%5Fproblems%5Fwithin%5Fneovim/) + +#### echasnovski/mini.pick + + + +> pick anything. Interactive non-blocking picker with one window design, toggleable preview, fast default matching, built-in pickers, and more + +* [GitHub](https://github.com/echasnovski/mini.pick) +* [Dotfyle](https://dotfyle.com/plugins/echasnovski/mini.pick) +* [Reddit](https://www.reddit.com/r/neovim/comments/176yv8g/minipick%5Fpick%5Fanything%5Finteractive%5Fnonblocking/) + +#### hinell/lsp-timeout.nvim + + + +> Start/stop LSP servers upon demand; keeps RAM usage low + +Some LSP servers are terribly inefficient at memory management and can easily take up gigabytes of RAM MBs if left unattended (just like VS Code huh?!). This plugin prevents excessive memory usage by stopping and restarting LSP servers automatically upon gaining or loosing window focus, keeping neovim fast. + +* [GitHub](https://github.com/hinell/lsp-timeout.nvim) +* [Dotfyle](https://dotfyle.com/plugins/hinell/lsp-timeout.nvim) +* [Reddit](https://www.reddit.com/r/neovim/comments/16vkkj8/lsptimeoutnvim/) + +--- + +#### luckasRanarison/clear-action.nvim + + + +> Predictable LSP code actions + +A simple Neovim plugin that enhances LSP code actions with fully customizable signs, personalized actions, and server-specific mappings, making code actions more predictable. + +* [GitHub](https://github.com/luckasRanarison/clear-action.nvim) +* [Dotfyle](https://dotfyle.com/plugins/luckasRanarison/clear-action.nvim) +* [Reddit](https://www.reddit.com/r/neovim/comments/16v32p5/clearactionnvim%5Fmakes%5Flsp%5Fcode%5Factions/) + +--- + +#### JMarkin/gentags.lua + +> autogenerate tags for neovim + +* [GitHub](https://github.com/JMarkin/gentags.lua) +* [Dotfyle](https://dotfyle.com/plugins/JMarkin/gentags.lua) + +--- + +#### roobert/palette.nvim + + + +> 🎨 Palette - A beautiful, versatile, systematic, Neovim theme system + +Palette is a Neovim theme system to make creating and customizing themes easy. + +Highlight groups are logically arranged to strike a harmonious balance between clarity and aesthetic appeal. + +Caching ensures themes are performant. + +Build easily distributable themes using the provided build script. + +Generate application color schemes, such as for LS\_COLORS and iterm2 for matching terminal feel. + +* [GitHub](https://github.com/roobert/palette.nvim) +* [Dotfyle](https://dotfyle.com/plugins/roobert/palette.nvim) +* [Reddit](https://www.reddit.com/r/neovim/comments/16smdr6/introducing%5Froobertpalettenvim%5Fa%5Fbeautiful/) + +--- + +#### MunifTanjim/nougat.nvim + +   + +> 🍫 Hyperextensible Statusline / Tabline / Winbar for Neovim 🚀 + +* [GitHub](https://github.com/MunifTanjim/nougat.nvim) +* [Dotfyle](https://dotfyle.com/plugins/MunifTanjim/nougat.nvim) + +--- + +#### trimclain/builder.nvim + + + +> Simple building plugin for neovim + +* [GitHub](https://github.com/trimclain/builder.nvim) +* [Dotfyle](https://dotfyle.com/plugins/trimclain/builder.nvim) +* [Reddit](https://www.reddit.com/r/neovim/comments/16qwcl7/buildernvim%5Fsimple%5Fbuild%5Fplugin%5Ffor%5Fneovim/) + +--- + +#### niuiic/git-log.nvim + + + +> Check git log of the selected code. + +* [GitHub](https://github.com/niuiic/git-log.nvim) +* [Dotfyle](https://dotfyle.com/plugins/niuiic/git-log.nvim) + +--- + +#### 2KAbhishek/nerdy.nvim + + + +> Find Nerd Glyphs Easily 🤓🔭 + +Do you like Nerd fonts, but don't like going over to the site just to find a glyph? nerdy.nvim, is a super handy plugin that lets you easily search, preview and insert any nerd font glyph from Neovim! + +* [GitHub](https://github.com/2KAbhishek/nerdy.nvim) +* [Dotfyle](https://dotfyle.com/plugins/2KAbhishek/nerdy.nvim) +* [Reddit](https://www.reddit.com/r/neovim/comments/16qr135/nerdynvim%5Feasily%5Ffind%5Fand%5Finsert%5Fnerd%5Ffont%5Fglyphs/) + +--- + +#### David-Kunz/gen.nvim + + + +> Neovim plugin to generate text using LLMs with customizable prompts + +* [GitHub](https://github.com/David-Kunz/gen.nvim) +* [Dotfyle](https://dotfyle.com/plugins/David-Kunz/gen.nvim) +* [Reddit](https://www.reddit.com/r/neovim/comments/16x1zf7/local%5Fllms%5Fin%5Fneovim%5Fgennvim/) +* [Youtube](https://www.youtube.com/watch?v=FIZt7MinpMY) + +--- + +#### VidocqH/data-viewer.nvim + + + +> Table view for data files, csv, tsv + +Lightweight neovim plugin provides a table view for inspect data files such as csv, tsv + +* [GitHub](https://github.com/VidocqH/data-viewer.nvim) +* [Dotfyle](https://dotfyle.com/plugins/VidocqH/data-viewer.nvim) + +--- + +#### ==hinell/duplicate.nvim== + + + +> Duplicate visual selection, lines, and textobjects + +Duplicate lines in different directions (up/down) by specified offset Duplicate visual selection & line-wise blocks + +* [GitHub](https://github.com/hinell/duplicate.nvim) +* [Dotfyle](https://dotfyle.com/plugins/hinell/duplicate.nvim) +* [Reddit](https://www.reddit.com/r/neovim/comments/16vkd4x/duplicatenvim/) + +--- + +#### niuiic/remote.nvim + + + +> Edit remote files locally. + +Edit remote files with local neovim configuration. + +Edit them as local directories. + +No other dependencies required for remote machine except ssh. + +* [GitHub](https://github.com/niuiic/remote.nvim) +* [Dotfyle](https://dotfyle.com/plugins/niuiic/remote.nvim) + +--- + +#### niuiic/typst-preview.nvim + + + +> Neovim plugin to preview typst document. + +Generate pdf files by typst compile. Respond to subsequent file changes with typst-lsp. Redirect these pdf files to a fixed path when you switch buffer. Preview this pdf by a pdf viewer with the ability to respond to the file changes. + +* [GitHub](https://github.com/niuiic/typst-preview.nvim) +* [Dotfyle](https://dotfyle.com/plugins/niuiic/typst-preview.nvim) + +--- + +#### SalOrak/whaler.nvim + + + +> Telescope extension to change between directories blazingly fast + +Whaler is a Telescope extension to move between directories. It is based on the concept of [tmux-windowizer](https://github.com/ThePrimeagen/.dotfiles/blob/master/bin/.local/scripts/tmux-windowizer) which uses a set of directories and fzf to move to another directory whilst creating a new tmux session. + +* [GitHub](https://github.com/SalOrak/whaler.nvim) +* [Dotfyle](https://dotfyle.com/plugins/SalOrak/whaler.nvim) +* [Reddit](https://www.reddit.com/r/neovim/comments/16wgw0b/whalernvim/) + +--- + +#### gsuuon/note.nvim + + + +> Notes in neovim + +A simple Neovim note taking plugin with daily notes, task tracking and syntax highlighting. + +note.nvim makes it easy to take working notes and track tasks. It adds commands to help manipulate task items, create daily notes, and navigate within (and between) notes. + +* [GitHub](https://github.com/gsuuon/note.nvim) +* [Dotfyle](https://dotfyle.com/plugins/gsuuon/note.nvim) + +--- + +#### A retrospective on why Nyoom is archived + +* [Reddit](https://www.reddit.com/r/neovim/comments/16sk266/nyoom%5Fwhy%5Fim%5Fultimately%5Farchiving%5Fit%5Fa%5Fshort/) + +#### indent-blankline.nvim v3 is released + +* [GitHub](https://github.com/lukas-reineke/indent-blankline.nvim) +* [Dotfyle](https://dotfyle.com/plugins/lukas-reineke/indent-blankline.nvim) +* [Migration guide](https://github.com/lukas-reineke/indent-blankline.nvim/wiki/Migrate-to-version-3) +* [Reddit](https://www.reddit.com/r/neovim/comments/16u5abl/indent%5Fblankline%5Fv3%5Fis%5Freleased/) + +#### LazyVim 10.0.0 has been released! + +* [GitHub](https://github.com/LazyVim/LazyVim) +* [Dotfyle](https://dotfyle.com/plugins/LazyVim/LazyVim) +* [Changelog](https://github.com/LazyVim/LazyVim/blob/main/CHANGELOG.md) +* [Reddit](https://www.reddit.com/r/neovim/comments/1766fl1/lazyvim%5F1000%5Fhas%5Fbeen%5Freleased/) + +--- + +## Contributing + +Add your the plugin in either of the following to be featured in This Week in Neovim and Dotfyle: + +* [rockerBOO/awesome-neovim](https://github.com/rockerBOO/awesome-neovim) +* [SUBMITTED\_PLUGINS.md](https://github.com/codicocodes/dotfyle/blob/main/SUBMITTED-PLUGINS.md) + +Contribute to the development of Dotfyle: + +* File issues and submit pull requests on [GitHub](https://github.com/codicocodes/dotfyle) +* Discuss ideas on [Discord](https://discord.gg/AMbnnN5eep) \ No newline at end of file diff --git a/Read Later/2023-10-18 - The Unreasonable Effectiveness Of Plain Text.md b/Read Later/2023-10-18 - The Unreasonable Effectiveness Of Plain Text.md new file mode 100644 index 0000000..641fc81 --- /dev/null +++ b/Read Later/2023-10-18 - The Unreasonable Effectiveness Of Plain Text.md @@ -0,0 +1,592 @@ +--- +id: 07f91eda-1940-4aaa-8e27-78b0bf176193 +title: | + The Unreasonable Effectiveness Of Plain Text +status: ARCHIVED +tags: + - read-later +date_added: 2023-10-18 10:01:51 +url_omnivore: | + https://omnivore.app/me/noboilerplate-scripts-34-plain-text-team-md-at-main-0-atman-nobo-18b42e0d185 +url_original: | + https://github.com/0atman/noboilerplate/blob/main/scripts/34-Plain-Text-Team.md +--- + +# The Unreasonable Effectiveness Of Plain Text + +## Highlights + +## [Tie Yourself to the Mast](#tie-yourself-to-the-mast) + +%%pron. oh diss e us%% In the Odyssey, Odysseus (confusingly called Ulysses in English literature) had to travel through siren-infested waters. + +This was a well-understood problem in his world. Sailors would simply solve this by putting wax in their ears, so the sirens' tempting song wouldn't lure them to their deaths. + +But Odysseus had a challenge: He WANTED to hear the Sirens' beautiful song. He certainly didn't want to drown, so he ordered his crew to tie him to the mast of the ship, and to ignore any of his pleas to let him go, until safety. + +This way, he was able to guard against future bad decisions he knew he would make by setting up a framework to control his future self. + +This is the Ulysses pact, and it's a very common trick: + +* Leaving your credit card or car keys at home when going out drinking is a Ulysses pact. +* Publishing a warrant canary on your company's website is a Ulysses pact, +* and standardising all your tools on plain text is a Ulysses pact. + +> [!note] +> El pacto de Ulysses es una estrategia (o framework) en donde tomamos medidas tempranamente para prevenir malas desiciones en un futuro. + +[source](https://omnivore.app/me/noboilerplate-scripts-34-plain-text-team-md-at-main-0-atman-nobo-18b42e0d185#7466a699-a115-4b9f-99fc-416852b5aef2) #frameworks + +--- + +"The difference between science and screwing around is _writing it down_." + +## [— Adam Savage](#-adam-savage) + +> [!note] +> This was just a cool quote... + +[source](https://omnivore.app/me/noboilerplate-scripts-34-plain-text-team-md-at-main-0-atman-nobo-18b42e0d185#9a030eb7-6269-4863-8e5e-61b59a1704b6) #quotes + +--- + +## Original + + + +!\[\[git-logo.png|500\]\] + +## [Plain-Text Team](#plain-text-team) + +notes: %% + +* Tell them what you're going to tell them +* Tell them +* Tell them what you told them %% Hi friends my name is Tris and this is No Boilerplate, focusing on fast, technical videos. + +All good teams are alike; each bad team is bad in its own way. %% to paraphrase Tolstoy %% + +Software is an incredible thing, isn't it? Combined with the internet, a small team of friends can change the world overnight. + +Every company, no matter what their industry, must now run a tech team, even if only to maintain their website. + +So why are they all so bad at it? + +--- + +!\[\[cc-logo.png\]\] + +## [Public Domain Videos](#public-domain-videos) + +
+
+```
+
+Here is an example that shows an image of two (2) dogs:
+
+
+
+Image of two dogs
+
+And here's an example of an image that illustrates the use of alt text:
+
+
+
+Image of dog with alt text displayed
+
+==You should also describe your icon buttons.==
+
+Icons can be easily understood most of the time. It's widely recognized that an x symbol, like this ❌, typically closes a window, a check mark ✅ signifies completion, a forward arrow ▶ signifies send (or play), and a plus sign ➕ represents addition.
+
+But this is clear only for individuals with visual capabilities. For people who aren't able to see the buttons, you'll need to provide a description so they know what that button does.
+
+Let's take a look at this HTML and CSS code that shows how to make buttons access:
+
+Document
+
+Here's the result of the code implemented above:
+
+
+
+### Is it Operable?
+
+Users should be able to navigate and interact with the interface quickly. Consider the following factors:
+
+==First, make sure you use clear and consistent headings.==
+
+This is what clear and consistent headings look like:
+
+## I am a Title
+
+## I am a Subtitle
+
+### This is heading 3
+
+#### This is Heading 4
+
+##### This is Heading 5
+
+###### This is heading 6
+
+As you can see, these headings go from largest to smallest in order. We have an H1 heading first, followed by H2, H3, and so on.
+
+Here are some headings that don't follow the proper hierarchy:
+
+###### This is heading 6
+
+##### This is Heading 5
+
+#### This is Heading 4
+
+### This is heading 3
+
+## I am a Subtitle
+
+## I am a Title
+
+In this example, the headings go in reverse order, starting from H6 and moving up through H5, H4, and so on.
+
+Just remember to use proper heading hierarchy – don't use an H2 and then jump straight to H4 for a subheading, for example, as this is visually jarring and doesn't convey the proper importance or hierarchy of the text.
+
+Here's why heading hierarchy is important:
+
+* A clear heading hierarchy helps readers easily navigate and understand the content of a document.
+* Heading hierarchy is crucial for accessibility, as it helps screen readers and assistive technologies interpret the structure of the content. This is important for individuals with visual impairments who rely on such tools to access information.
+* A well-organized heading hierarchy implement a logical flow of information, ensuring that topics are presented in a coherent order.
+
+Also, refrain from using elements that might trigger physical discomfort, like bright flashing lights.
+
+==And make sure you think about== ==[keyboard accessibility](https://www.freecodecamp.org/news/designing-keyboard-accessibility-for-complex-react-experiences/)== ==so users can navigate and communicate using the keyboard, and not exclusively using a mouse.==
+
+### Is it Understandable?
+
+Content and functionality should be presented clearly and understandably. Consider the following factors:
+
+* ==Organize content using headings, subheadings, and bullet points to enhance readability.==
+* Provide instructions and error messages that are easy to understand.
+* Use simple and concise language, avoid complex terms.
+
+### Is it Robust?
+
+Websites should be built using robust and widely supported technologies to enable compatibility across devices and assistive technologies.
+
+You'll want to maximize compatibility with current and future user agents, including assistive technologies.
+
+Here are some of the ways you can maximize compatibility with current and future agents, including assistive tools:
+
+* ==Use== ==[HTML5 semantic elements](https://www.freecodecamp.org/news/semantic-html-alternatives-to-using-divs/)== ==like== `==<====header====>==`==,== `==<====nav====>==`==,== `==<====main====>==`==, and== `==<====footer====>==` ==to enhance the document's structure.==
+* ==Ensure that your== ==[JavaScript code is efficient](https://www.freecodecamp.org/news/javascript-performance-async-defer/)== ==and doesn't block the rendering process.==
+* ==Utilize== ==[browser developer tools](https://www.freecodecamp.org/news/learn-how-to-use-the-chrome-devtools-to-troubleshoot-websites/)== ==and online testing services to identify and fix compatibility issues.==
+* ==Conduct== ==[usability testing](https://www.freecodecamp.org/news/10-best-ux-testing-software-tools/)== ==with a diverse group of users, including those who rely on assistive technologies, to gather feedback and make improvements.==
+* ==Optimize your website for fast loading times and low data usage using techniques like== ==[caching](https://www.freecodecamp.org/news/a-detailed-guide-to-pre-caching/)== ==and== ==[tools like CDNs](https://www.freecodecamp.org/news/cdns-speed-up-performance-by-reducing-latency/)== ==to reduce latency. This benefits both accessibility and user experience.==
+* ==Document your code and accessibility features for future maintainers.==
+* ==Test== ==[website compatibility across various browsers](https://www.freecodecamp.org/news/cross-browser-compatibility-testing-best-practices-for-web-developers/)====. Testing website compatibility involves ensuring that your website functions correctly and looks good on a variety of devices, browsers, and assistive technologies.==
+
+Here are the steps you can follow to test website compatibility effectively:
+
+1. **Device Testing**: Test your website on various devices, such as desktop computers, laptops, tablets, and smartphones. This includes both iOS and Android devices.
+2. **Browser Testing**: Check your website's performance and appearance on multiple browsers, including but not limited to Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Edge.
+3. **User Testing**: Conduct usability testing with real users. Ask them to use your website on different devices and browsers and collect feedback on compatibility issues.
+4. **Performance Testing**: Assess website loading times, and optimize for speed using tools like Google PageSpeed Insights, GTmetrix, or Lighthouse. Check for compatibility with slow internet connections.
+
+## Conclusion
+
+Understanding web accessibility can enhance the user experience by creating a smooth and seamless interaction with websites and web applications.
+
+Implementing these tips can improve the overall user-friendliness and navigability of your app. It'll help create a more enjoyable experience for all users, and will also allow people with disabilities to perceive, understand, navigate, and interact with your sites effectively.
+
+---
+
+---
+
+ Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. [Get started](https://www.freecodecamp.org/learn/)
\ No newline at end of file
diff --git a/Read Later/2023-11-04 - Git Merge vs Rebase vs Squash ¿Qué estrategia debemos elegir-.md b/Read Later/2023-11-04 - Git Merge vs Rebase vs Squash ¿Qué estrategia debemos elegir-.md
new file mode 100644
index 0000000..d8de707
--- /dev/null
+++ b/Read Later/2023-11-04 - Git Merge vs Rebase vs Squash ¿Qué estrategia debemos elegir-.md
@@ -0,0 +1,27 @@
+---
+id: fc51bf82-66d3-451f-8f64-17d6add50f92
+title: |
+ Git Merge vs Rebase vs Squash ¿Qué estrategia debemos elegir?
+status: ARCHIVED
+tags:
+ - read-later
+ - Youtube
+date_added: 2023-11-04 14:14:49
+url_omnivore: |
+ https://omnivore.app/me/https-www-youtube-com-watch-pp-yg-ukz-2-l-0-ih-nxd-w-fza-a-253-d-18b9b548407
+url_original: |
+ https://www.youtube.com/watch?pp=ygUKZ2l0IHNxdWFzaA%253D%253D&v=HlmZLXMOpEM
+---
+
+# Git Merge vs Rebase vs Squash ¿Qué estrategia debemos elegir?
+
+## Notes
+
+- Merge commit: Se crea un commit que tiene 2 padres, el último commit de main y la feature branch, se mantiene la trazabilidad hacia la feature branch pero el historial queda visualmente más complejo
+- Rebase: Se copian los commits de la feature branch a main como nuevos commits, se pierde la trazabilidad hacia la feature branch pero queda un historial lineal en main
+- Squash commit: Se juntan todos los commits en uno solo con un squash que queda en main, se pierde la trazabilidad hacia la feature branch pero queda un historial lineal en main
+## Original
+
+[Git Merge vs Rebase vs Squash ¿Qué estrategia debemos elegir?](https://www.youtube.com/watch?pp=ygUKZ2l0IHNxdWFzaA%253D%253D&v=HlmZLXMOpEM)
+
+By [CodelyTV - Redescubre la programación](https://www.youtube.com/@CodelyTV)
\ No newline at end of file
diff --git a/Read Later/2023-11-06 - How to Write Components that Work in Any Framework.md b/Read Later/2023-11-06 - How to Write Components that Work in Any Framework.md
new file mode 100644
index 0000000..628e953
--- /dev/null
+++ b/Read Later/2023-11-06 - How to Write Components that Work in Any Framework.md
@@ -0,0 +1,402 @@
+---
+id: 616d5d08-7d04-11ee-8eaa-9f56108b78ec
+title: |
+ How to Write Components that Work in Any Framework
+status: ARCHIVED
+tags:
+ - read-later
+ - RSS
+date_added: 2023-11-06 17:25:12
+url_omnivore: |
+ https://omnivore.app/me/how-to-write-components-that-work-in-any-framework-18ba72d0079
+url_original: |
+ https://www.freecodecamp.org/news/write-components-that-work-in-any-framework/
+---
+
+# How to Write Components that Work in Any Framework
+
+## Highlights
+
+With Custom Elements you can author your own custom HTML elements that you can reuse across your site. They can be as simple as text, images, or visual decorations. You can push them further and build interactive components, complex widgets, or entire web applications.
+
+[source](https://omnivore.app/me/how-to-write-components-that-work-in-any-framework-18ba72d0079#bceef8c0-728e-422a-aed6-b047736cb395)
+
+---
+
+### Writing a web component requires understanding all of its underlying technologies
+
+As we saw above, web components are made up of three technologies. You can also see in the hello world code snippet, that we explicitly need to know and understand these three technologies.
+
+1. We’re creating a **template element** and setting its inner HTML
+2. We’re creating a **shadow root**, and explicitly setting its mode to ‘open’.
+3. We’re cloning our **template** and appending it to our **shadow root**
+4. We’re registering a new **custom element** to the document
+
+[source](https://omnivore.app/me/how-to-write-components-that-work-in-any-framework-18ba72d0079#46fc130a-1549-40c8-b950-42035c227bc4)
+
+---
+
+As web component authors, we need to consider a lot of things:
+
+* Setting up the shadow DOM
+* Setting up the HTML templates
+* Cleaning up event listeners
+* Defining properties that we want to observe
+* Reacting to properties when they change
+* Handling type conversions for attributes
+
+[source](https://omnivore.app/me/how-to-write-components-that-work-in-any-framework-18ba72d0079#855f444c-49f1-4176-9537-aaeeb6a01355)
+
+---
+
+One such tool is called Lit, which is developed by a team at Google. [Lit](https://lit.dev/) is a lightweight library designed to make writing web components simple, by removing the need for the boilerplate we’ve already seen above.
+
+[source](https://omnivore.app/me/how-to-write-components-that-work-in-any-framework-18ba72d0079#385d9ef8-13fb-4799-bff5-ef767b3df67f)
+
+---
+
+## Original
+
+
+
+The browser has a built-in way of writing reusable components in the form of **web components**. They’re an excellent choice for building interactive and reusable components that work in any frontend framework.
+
+With that said, writing highly interactive and robust web components isn’t simple. They require a lot of boilerplate and feel much less intuitive than the components you may have written in frameworks like React, Svelte, or Vue.
+
+In this tutorial, I’ll give you an example of an interactive component written as a web component, and then refactor it using a library that softens the edges and removes heaps of boilerplate.
+
+Don’t sweat it if you’re not familiar with web components. In the next section, I’ll do a (brief) overview of what web components are, and what they’re made out of. If you have some basic experience with them, you can skip the next section.
+
+## What are Web Components?
+
+Before web components, the browser didn’t have a standard way of writing reusable components. Many libraries solve this problem, but they often run into limitations like performance, interoperability, and issues with web standards.
+
+Web components are a technology made up of 3 different browser features:
+
+* Custom elements
+* Shadow DOM
+* HTML Templates
+
+We’ll do a quick crash course covering these technologies, but it’s by no means a comprehensive breakdown.
+
+### What are Custom Elements?
+
+==With Custom Elements you can author your own custom HTML elements that you can reuse across your site. They can be as simple as text, images, or visual decorations. You can push them further and build interactive components, complex widgets, or entire web applications.==
+
+You’re not just limited to using them in your projects, but you can publish them and allow other developers to use them on their sites.
+
+Here are some of the reusable components from my library [A2K](https://a2000-docs.netlify.app/). You can see that they come in all shapes and sizes, and have a range of different functionalities. Using them in your projects is similar to using any old HTML element.
+
+
+
+A small collection of web components from the A2K library
+
+Here’s how you’d use the progress element in your project:
+
+```xml
+
+
+
+ I'm a header
+ + + +``` + +Instead of being used to render the content directly, the content of the template is designed to be copied. The copied template can then be used to render content to the page. + +You can think of the template element much like the template for a 3D print. The template isn’t a physical entity, but it’s used to create real-life clones. + +You would then reference the template element in your web component, clone it, and render the clone as the markup for your component. + +I won’t spend any more time on these web component features, but you’ve probably already noticed that to write vanilla web components, there are a lot of new browser features that you need to know and understand. + +You’ll see in the next section that the mental model for building web components doesn’t feel as streamlined as it does for other component frameworks. + +## How to Build a Basic Web Component + +Now that we’ve briefly covered the fundamental technologies powering a web component, here’s how to build a _hello world_ component: + +```scala +const template = document.createElement('template'); +template.innerHTML = `Hello World
`; + +class HelloWorld extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + this.shadowRoot.append(template.content.cloneNode(true)); + } +} + +customElements.define('hello-world', HelloWorld); + +``` + +This is the most simple component you can write, but there’s already so much going on. For someone completely new to web components, and without the background knowledge I provided above, they’re going to be left with a lot of questions, and a lot of confusion. + +For me, there are at least two key reasons why web components can be challenging to write, at least within the context of the hello world examples. + +### The markup is decoupled from the component logic + +In many frameworks, the markup of the component is often treated as a first-class citizen. It’s often the content that gets returned from the component function, or has direct access to the component’s state, or has built-in utilities to help manipulate markup (like loops, conditionals, and so on). + +This isn’t the case for web components. In fact, the markup is often defined outside of the component’s class. There’s also no built-in way for the template to reference the current state of the component. This becomes a cumbersome limitation as the complexity of a component grows. + +In the world of frontend, components are designed to help developers reuse markup in several pages. As a result, the markup and the component logic are inextricably linked, and so they should be colocated with one another. + +### ==Writing a web component requires understanding all of its underlying technologies== + +==As we saw above, web components are made up of three technologies. You can also see in the hello world code snippet, that we explicitly need to know and understand these three technologies.== + +1. ==We’re creating a== **==template element==** ==and setting its inner HTML== +2. ==We’re creating a== **==shadow root==**==, and explicitly setting its mode to ‘open’.== +3. ==We’re cloning our== **==template==** ==and appending it to our== **==shadow root==** +4. ==We’re registering a new== **==custom element==** ==to the document== + +There’s nothing inherently wrong with this, since web components are supposed to be a “lower-level” browser API, making them prime for building abstractions on top of. But for a developer coming from a React or a Svelte background, having to understand these new browser features, and then having to write components with them can feel like too much friction. + +## More Advanced Web Components + +Let’s take a look at a more advanced web component, a counter button. + + + +You click the button, and the counter increments. + +The following example contains a few extra web component concepts, like lifecycle functions and observable attributes. You don’t need to understand everything going on in the code snippet. This example is really only used to illustrate how much boilerplate is required for the most basic of interactive interfaces, a counter button: + +```kotlin +const templateEl = document.createElement("template"); + +templateEl.innerHTML = ` + +You pressed me 0 times.
+`; + +export class OdysseyButton extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: "open" }); + this.shadowRoot.appendChild(templateEl.content.cloneNode(true)); + this.button = this.shadowRoot.querySelector("button"); + this.p = this.shadowRoot.querySelector("p"); + this.setAttribute("count", "0"); + } + + // Note: Web components have lifecycle methods, + // If we're setting event listeners when the component is added to the DOM, it's our job to clean + // them up when it gets removed from the DOM + connectedCallback() { + this.button.addEventListener("click", this.handleClick); + } + + disconnectedCallback() { + this.button.removeEventListener("click", this.handleClick); + } + + // Unlike frameworks like React, Web Components don't automatically rerender when a prop (or attribute) + // changes. Instead, we need to explicitly define which attributes we want to observe. + static get observedAttributes() { + return ["disabled", "count"]; + } + + // When one of the above attributes changes, this lifecycle method runs, and we can + // react to the new attribute's value accordingly. + attributeChangedCallback(name, _, newVal) { + if (name === "count") { + this.p.innerHTML = `You pressed me ${newVal} times.`; + } + if (name === "disabled") { + this.button.disabled = true; + } + } + + // In HTML, attribute values are always strings. This means that it's our job to + // convert types. You can see below that we're converting a string -> number, and then back to a string + handleClick = () => { + const counter = Number(this.getAttribute("count")); + this.setAttribute("count", `${counter + 1}`); + }; + +``` + +==As web component authors, we need to consider a lot of things:== + +* ==Setting up the shadow DOM== +* ==Setting up the HTML templates== +* ==Cleaning up event listeners== +* ==Defining properties that we want to observe== +* ==Reacting to properties when they change== +* ==Handling type conversions for attributes== + +And there are still so many other things to consider that I haven’t touched on in this article. + +That isn’t to say that web components are bad and that you shouldn’t write them. In fact, I’d argue that you learn so much about the browser platform by building with them. + +But I feel that there are better ways to write components if your priority is to write interoperable components in a much more streamlined and ergonomic way. + +## How to Write Web Components with Less Boilerplate + +As I mentioned earlier, there are a lot of tools out there to help make writing web components much easier. + +==One such tool is called Lit, which is developed by a team at Google.== ==[Lit](https://lit.dev/)== ==is a lightweight library designed to make writing web components simple, by removing the need for the boilerplate we’ve already seen above.== + +As we’ll see, Lit does a lot of heavy lifting under-the-hood to help cut down the total lines of code by nearly half! And because Lit is a wrapper around web components and other native browser features, all your existing knowledge about web components is transferable. + +To start seeing how Lit simplifies your web components. Here’s the **hello world** example from earlier, but refactored to use Lit instead of a vanilla web component: + +```scala +import { LitElement, html } from "lit"; + +export class HelloWorld extends LitElement { + render() { + return html`Hello World!
`; + } +}` + +customElements.define('hello-world', HelloWorld); + +``` + +There’s a lot less boilerplate with the Lit component, and Lit handles the two problems I mentioned earlier, a little bit differently. Let’s see how: + +1. The markup is directly defined from within the component class. While you can define your templates outside of the class, it’s common practice to return the template from the `render` function. This is more in line with the mental model presented in other UI frameworks, where the UI is a function of the state. +2. Lit also doesn’t require developers to attach the shadow DOM, or create templates and clone template elements. While having an understanding of the underlying web component features will help when developing Lit components, they’re not required for getting started, so the barrier for entry is much lower. + +So now for the big finale, what does the counter component look like once we’ve migrated it over to Lit? + +```typescript +import { LitElement, html } from "lit"; + +export class OdysseyCounter extends LitElement { + static properties = { + // We define the component's properties as well as their type. + // These properties will trigger the component to re-render when their values change. + // While they're not the same, you can think of these "properties" as being + // Lit's alternatives to "observed attributes" + // If the value is passed down as an attribute, Lit converts the value + // to the correct type + count: { type: Number }, + disabled: { type: Boolean }, + }; + + constructor() { + super(); + // There's no need to create a shadow DOM, clone the template, + // or store references to our DOM nodes. + this.count = 0; + } + + onCount() { + this.count = this.count + 1; + } + + render() { + // Instead of using the attributeChangedCallback lifecycle, the + // render function has access to all of the component's properties, + // which simplifies the process of manipulating our templates. + return html` + +You pressed me ${this.count} times.
+ `; + } +}` + +``` + +The amount of code we’re writing is cut down by almost half! And this difference becomes more noticeable when creating more complex user interfaces. + +## Why am I going on about Lit? + +I’m a big believer in web components, but I recognise that the barrier to entry is high for many developers. Writing complex web components requires understanding heaps of browser features and the education around web components isn’t as comprehensive as other technologies, like React or Vue. + +This is why I think it’s important to use tools like Lit can make writing performant and interoperable web components much easier. This is great if you want your components to work within any frontend framework. + +If you’d like to learn even more, this is the approach I teach in my upcoming course [Component Odyssey](https://component-odyssey.com/). This course is excellent for anyone who wants to understand how to write components that work in any framework. + +I do this by covering the absolute basics of web components, before moving on to tools like Lit that simplify the process of writing web components without complicating your development environment. By the end, you’ll learn how to build and publish a component library that works across any frontend framework. + +If you want early-bird discount codes for Component Odyssey, then head on [over to the site to get notified](https://component-odyssey.com/subscribe). + +--- + +--- + + Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. [Get started](https://www.freecodecamp.org/learn/) \ No newline at end of file diff --git a/Read Later/2023-11-07 - How to Avoid Prop Drilling in React.md b/Read Later/2023-11-07 - How to Avoid Prop Drilling in React.md new file mode 100644 index 0000000..52236fb --- /dev/null +++ b/Read Later/2023-11-07 - How to Avoid Prop Drilling in React.md @@ -0,0 +1,479 @@ +--- +id: aceac380-7e10-11ee-992a-432064e77190 +title: | + How to Avoid Prop Drilling in React +status: ARCHIVED +tags: + - read-later + - RSS + - react +date_added: 2023-11-07 19:58:39 +url_omnivore: | + https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2 +url_original: | + https://www.freecodecamp.org/news/avoid-prop-drilling-in-react/ +--- + +# How to Avoid Prop Drilling in React + +## Highlights + +Prop drilling occurs when a parent component generates its state and passes it down as `props` to its children components that do not consume the props – instead, they only pass it down to another component that finally consumes it. + +[source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#05db3def-4e59-4cfe-b8dd-1044ce91a9d5) + +--- + +First of all, **grouping static elements and dependent components** together to achieve an appealing UI design is the major cause of prop drilling. You can't avoid prop drilling when your UI groups static elements and dependent components together in a parent. The parent component clearly won't use the `prop`, as everything within it is a static element – except the component that needs a prop. + +[source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#fa2c28c0-1b7e-4416-8553-c1b5c7a59637) + +--- + +Second of all, when a **component accepts `props` that it doesn't use but merely passes it down to its children**, this is a sign that you have prop drilling in your component: + +[source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#6749a89e-a38c-4f4f-aa3f-c6455e6daf85) + +--- + +Third, when a component that represents an independent section of a page is **forced to take props from its parent**, prop drilling is inevitable. It should ideally be self-contained with its state and operations. + +[source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#751d81de-62b7-444b-a2f0-a0b374f6ce45) + +--- + +And finally, **the presence of elongated `props`** is a sure sign of prop drilling. Since an elongated prop is a fundamental element that's consistently present in every case of prop drilling, grasping this concept allows you to instinctively avoid prop drilling. + +[source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#90f807ca-03a3-4804-bcf1-c5df4e53a997) + +--- + +Component composition is a good approach to fix prop drilling. If you ever find yourself in a situation where a component passes down a prop it neither creates nor consumes, you can use component composition to fix it. + +[source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#0112181f-34b7-4ca3-b941-f1c16303c6c0) + +--- + +To avoid prop drilling in this case, any grandchildren components that require access to the same `props`, especially when their parent don't consume the data, should be passed as children ensuring that the data remains within the `App` context. + +[source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#c17f1d4e-8f5c-45d1-9078-fe8ab740e11e) + +--- + +Prop drilling can also be fixed by moving state to where it is consumed. The example of prop drilling in this article has a component named `Content`. But the component is forced to receive a `prop` from its parent instead of having a state and be an independent component – and so we have prop drilling. + +[source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#9f94fd13-9558-4bd3-a60c-60074b3495d2) + +--- + +It's essential to highlight what to avoid when dealing with prop drilling to prevent unnecessary challenges. + +* **Avoid React Context, if possible, to fix prop drilling.** This approach ties your component to a specific context, restricting its usability outside of that context and hindering composition and reusability. +* **Steer clear of redundant components by employing a children-parent replacement approach.** This approach naturally incorporates [component composition](https://www.codementor.io/@dinerismail/the-power-of-component-composition-in-react-21goassg4m) without introducing redundant components or states when resolving prop drilling. + +[source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#8ff7b79b-5503-4e1a-b7fe-1a07a46c578c) + +--- + +## Original + + + +In order to write scalable, reusable, and maintainable applications with React, you'll need to go beyond the surface of using React components, useEffect, useContext, useState, and the like. It involves learning in detail how React works in more depth. + +And if you don't properly understand these key React concepts, you can run into various issues, like [prop drilling](https://www.quora.com/What-is-prop-drilling-in-ReactJS). + +In this tutorial, you'll learn what prop drilling is. I'll also teach you how to intuitively avoid it without relying on React context. In the end, you'll understand how to identify prop drilling without thinking and fix it with precision. + +If you prefer a visual guide, here's a video version of this tutorial on my [YouTube channel](https://youtu.be/KZnQ5R8Kd4I) (approximately 15 minutes). + +[](https://www.youtube.com/embed/ELZZnqHJhlw) + +## What is Prop Drilling? + +==Prop drilling occurs when a parent component generates its state and passes it down as== `==props==` ==to its children components that do not consume the props – instead, they only pass it down to another component that finally consumes it.== + +Below is an example of prop drilling in React: + +```xquery +function App() { + const [profile, setProfile] = useState({ame: 'John'}); + return ( +This is the header
+This is the header
+
+
+ );
+}
+
+function Header({ profile }) {
+ return (
+ This is the header
+Content Component
+{profile.name}
+This is the header
+` are grouped with a dependent component `Content` – and that's why we have prop drilling therein.
+
+Provided that the `Content` component is independent or takes no `props`, it won't need `profile` and there won't be prop drilling in the first place. This is why forcing a component that should be independent to take `props` from its parent is a recipe for prop drilling in React.
+
+==Second of all, when a== **==component accepts== `==props==` ==that it doesn't use but merely passes it down to its children==**==, this is a sign that you have prop drilling in your component:==
+
+```php
+function App () {
+ const [profile, setProfile] = useState({name: "Ayobami"})
+ return (
+ <>
+
+
+
+ );
+}
+```
+
+**`Or`**
+
+```javascript
+export function App() {
+ const [profile, setProfile] = useState({name: 'Ayobami'});
+ return (
+
+ `, right? We've successfully addressed prop drilling through component composition.
+
+This process is quite straightforward because we concentrate on recognizing elongated props and repositioning them within appropriate contexts.
+
+The concept of prop drilling is problem-focused, but prop elongation is solution-driven. When dealing with elongated props, our primary goal is to identify props that are not consumed but only passed down to another components.
+
+## How to Fix Prop Drilling by Moving State to the Consumer
+
+==Prop drilling can also be fixed by moving state to where it is consumed. The example of prop drilling in this article has a component named== `==Content==`==. But the component is forced to receive a== `==prop==` ==from its parent instead of having a state and be an independent component – and so we have prop drilling.==
+
+We can fix the prop drilling in this case by moving the profile state to where it is consumed.
+
+Let's revisit the example:
+
+```xquery
+function App() {
+ const [profile, setProfile] = useState({ame: 'John'});
+ return (
+
+
+ This is the header
+
+ );
+}
+
+function Content({ profile }) {
+ return (
+
+ Content Component
+ {profile.name}
+
+ );
+}
+
+export default App;
+```
+
+We can fix prop drilling in this case by moving `profile` to where it is consumed:
+
+```javascript
+function App() {
+ return (
+
+
+ This is the header
+
+ );
+}
+
+function Content({ profile }) {
+ const [profile, setProfile] = useState({ame: 'John'});
+ return (
+
+ Content Component
+ {profile.name}
+
+ );
+}
+```
+
+Now that we have lifted the profile to the `Content` component where it is consumed, the `App` component doesn't have a state, while the `Header` component doesn't receive a prop again as the `Content` component has its state.
+
+But wait! There is a problem. The `Footer` component needs the state we moved away from `App`. There you are! That is the problem with lifting or moving state to where we think it is needed. In this case, if the `Footer` component doesn't need it, we won't have any issue – but `Footer` also needs the prop.
+
+Now that `Footer` needs `profile` as a prop, we need to solve prop drilling with another method.
+
+## How to Fix Prop Drilling with a Children-Replacing-Parent Strategy
+
+Earlier in this article, we talked about how to use component composition and moving state to its consumer to solve prop drilling. But as you saw, they have some issues – duplicated components or states.
+
+But using this children-replacing-parent approach fixes the problem effectively:
+
+****Working but could be better:**
+
+```xquery
+export function App() {
+ const [profile, setProfile] = useState({name: 'Ayobami'});
+ return (
+
+
+
+
+ );
+}
+
+function Header({ profile }) {
+ return (
+
+ This is the header
+
+ );
+}
+```
+
+The example above shows a solution to the prop drilling example in this article. But as you can see, it has a redundant component, as `Header` does nothing.
+
+**Here's a better version:**
+
+```javascript
+export function App() {
+ const [profile, setProfile] = useState({name: 'Ayobami'});
+ return (
+
+ This is the header
+
+ );
+}
+```
+
+In the above code, we enhance the component composition solution we previously implemented for the prop drilling example by replacing the redundant `Header` component with its content in its parent (`App`).
+
+## What to Avoid
+
+
+
+Photo by [Edwin Hooper](https://unsplash.com/@edwinhooper?utm%5Fsource=ghost&utm%5Fmedium=referral&utm%5Fcampaign=api-credit) / [Unsplash](https://unsplash.com/?utm%5Fsource=ghost&utm%5Fmedium=referral&utm%5Fcampaign=api-credit)
+
+==It's essential to highlight what to avoid when dealing with prop drilling to prevent unnecessary challenges.==
+
+* **==Avoid React Context, if possible, to fix prop drilling.==** ==This approach ties your component to a specific context, restricting its usability outside of that context and hindering composition and reusability.==
+* **==Steer clear of redundant components by employing a children-parent replacement approach.==** ==This approach naturally incorporates== ==[component composition](https://www.codementor.io/@dinerismail/the-power-of-component-composition-in-react-21goassg4m)== ==without introducing redundant components or states when resolving prop drilling.==
+
+By avoiding elongated props, you pave the way for crafting maintainable, high-performing, reusable, and scalable React components. It simplifies the process of lifting states and components by removing the struggle of deciding where to place them.
+
+With your understanding of elongated props, you can confidently position props and components within the right context without undue stress.
+
+In short, you can now discover prop drilling intuitively by paying attention to any component that takes `props` it doesn't consume and only passes it down to another component.
+
+Thanks for reading – cheers!
+
+Hey wait! I am [Ayobami Ogundiran](https://twitter.com/codingnninja) and I am about to start showing how to build your own React, Redux, TypeScript, Zod or Ecommerce websites on my YouTube channel. [Click to subscribe](https://youtube.com/youtoocancode) to stay connected.
+
+---
+
+---
+
+ Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. [Get started](https://www.freecodecamp.org/learn/)
\ No newline at end of file
diff --git a/Read Later/2023-11-10 - The Complete Guide to Time Blocking.md b/Read Later/2023-11-10 - The Complete Guide to Time Blocking.md
new file mode 100644
index 0000000..5d23890
--- /dev/null
+++ b/Read Later/2023-11-10 - The Complete Guide to Time Blocking.md
@@ -0,0 +1,293 @@
+---
+id: 04745848-2b0d-482d-802c-8872ac9043dd
+title: |
+ The Complete Guide to Time Blocking
+status: ARCHIVED
+tags:
+ - read-later
+date_added: 2023-11-10 23:43:20
+url_omnivore: |
+ https://omnivore.app/me/https-todoist-com-productivity-methods-time-blocking-18bbc432143
+url_original: |
+ https://todoist.com/productivity-methods/time-blocking
+---
+
+# The Complete Guide to Time Blocking
+
+## Highlights
+
+Time blocking is a time management method that asks you to divide your day into blocks of time. Each block is dedicated to accomplishing a specific task or group of tasks, and only those specific tasks. Instead of keeping an open-ended to-do list of things you’ll get to as you can, you’ll start each day with a concrete schedule outlining what you’ll work on and when.
+
+[source](https://omnivore.app/me/https-todoist-com-productivity-methods-time-blocking-18bbc432143#6ca022ff-400a-4f70-8031-1a3caa0e7246)
+
+---
+
+With days that are time blocked in advance, you won’t have to constantly make choices about what to focus on.
+
+[source](https://omnivore.app/me/https-todoist-com-productivity-methods-time-blocking-18bbc432143#21fb5ecc-b00e-4f14-8d60-84eec666e8a9)
+
+---
+
+Task batching is when you group similar (usually smaller) tasks together and schedule specific time blocks to complete all at once. By tackling similar tasks in a group, you’ll limit the amount of context switching you have to do throughout your day, saving precious time and mental energy.
+
+[source](https://omnivore.app/me/https-todoist-com-productivity-methods-time-blocking-18bbc432143#ce3acd05-a296-4204-acfe-e0822f8a83d2)
+
+---
+
+Instead of setting aside time blocks for each area of responsibility each day, day theming dedicates a full day each week to each responsibility.
+
+[source](https://omnivore.app/me/https-todoist-com-productivity-methods-time-blocking-18bbc432143#5d5543a9-0d8d-42ed-aa24-4ecfeb07d6ac)
+
+---
+
+time boxing asks you to limit how much time you'll dedicate to a specific task.
+
+> [!note]
+> Is _"I'm gonna finish this in X time"_, instead of _"I'm gonna work on this for X time"_
+
+[source](https://omnivore.app/me/https-todoist-com-productivity-methods-time-blocking-18bbc432143#e342c6ce-607b-4482-af54-4ffbf81ab7ab)
+
+---
+
+## Original
+
+...and its cousins task batching and day theming. Control your schedule so it doesn't control you
+
+
+
+1. [What is time blocking?](#what-is-time-blocking)
+2. [Time blocking variations](#time-blocking-variations)
+3. [Why is time blocking so effective?](#why-is-time-blocking-so-effective)
+4. [But will time blocking work with my job?](#but-will-time-blocking-work-with-my-job)
+5. [Some common time blocking missteps and how to avoid them](#some-common-time-blocking-missteps-and-how-to-avoid-them)
+6. [Time blocking with Todoist](#time-blocking-with-todoist)
+
+---
+
+> "A 40 hour time-blocked work week, I estimate, produces the same amount of output as a 60+ hour work week pursued without structure."
+>
+> — Cal Newport, Author of _Deep Work_
+
+If there's one thing that can be said about the modern workplace, it's this: If you don't control your schedule, it will control you.
+
+How do you balance the necessary evils of meetings, email, team chat, and "busy work" with focused time for the things you truly care about? Since becoming a digital hermit isn’t an option for most of us, we need concrete strategies to help us focus in a world designed to distract us.
+
+That’s where time blocking comes in.
+
+Time blocking (and its close cousins, time boxing, task batching, and day theming) is a simple yet effective way to take back control of your time.
+
+Try time blocking if you...
+
+* Juggle many different projects/responsibilities (Jack Dorsey used day theming to run two major companies at the same time)
+* Spend too much time in “reactive mode,” responding to emails and messages
+* Find their day chopped up by meetings
+* Battle constant interruptions throughout the day
+* Struggle to find the time and mental space for big-picture thinking
+
+This guide will give you an overview of what time blocking, task batching, and day theming are; how a combination of these strategies can help you reclaim your schedule, and the best way to use your calendar and task manager to start time blocking yourself.
+
+==Time blocking is a time management method that asks you to divide your day into blocks of time. Each block is dedicated to accomplishing a specific task or group of tasks, and only those specific tasks. Instead of keeping an open-ended to-do list of things you’ll get to as you can, you’ll start each day with a concrete schedule outlining what you’ll work on and when.==
+
+The key to this method is prioritizing your task list in advance — a dedicated weekly review is a must. Take stock of what’s coming up for the week ahead, and make a rough sketch of your time blocks for each day. At the [end of every workday](https://doist.com/blog/end-work-day/?itm%5Fcampaign=time%5Fblocking&itm%5Fmedium=referral&itm%5Fsource=productivity%5Fmethods%5Fguides), review any tasks you didn’t finish — as well as any new tasks that have come in — and adjust your time blocks for the rest of the week accordingly.
+
+==With days that are time blocked in advance, you won’t have to constantly make choices about what to focus on.== All you need to do is follow your time blocked schedule. If you get off-task or distracted, simply look at your schedule and get back to whichever task you blocked off time for.
+
+### Dig deeper
+
+We've written a separate, comprehensive [guide to weekly reviews](https://todoist.com/productivity-methods/weekly-review) that will walk you through how to create a routine that works for you.
+
+## Time blocking variations
+
+Time blocking has a few close but distinct cousins that are worth considering: task batching, day theming, and time boxing.
+
+| **Method** | **What is it?** | **Example** |
+| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
+| Time Blocking | Dividing the day into blocks of time with each block dedicated to accomplishing a specific task or activity and only that specific task or activity. | "I will write every day from 9am to 11am." |
+| Task Batching | "I will answer all of my emails at 3pm." | |
+| Day Theming | "Every Monday, I will focus on content creation. Every Tuesday, I will focus on content promotion. Every Wednesday, I will focus on research and ideation. Etc." | |
+| Time Boxing | "I will write 1,000 words between 9am and 11am tomorrow." | |
+
+### Task batching
+
+==Task batching is when you group similar (usually smaller) tasks together and schedule specific time blocks to complete all at once. By tackling similar tasks in a group, you’ll limit the amount of context switching you have to do throughout your day, saving precious time and mental energy.== For example, scheduling two 20-minute blocks to process email during the day is more efficient than checking your inbox every 15 minutes.
+
+Time blocking pairs well with task batching because it saves you from scheduling every individual task on your calendar. Just block off chunks of time each day or week for when you want to complete a certain batch of activities, e.g., email, invoicing, workouts, meetings, writing, coding, deep work, errands, meal prep.
+
+### Day theming
+
+Day theming is a more extreme version of task batching for people who have a lot of areas of responsibility competing for their attention. For example, an entrepreneur often has to pay attention to marketing, sales, product development, customer support, and HR all at the same time. ==Instead of setting aside time blocks for each area of responsibility each day, day theming dedicates a full day each week to each responsibility.==
+
+Mike Vardy, founder of [Productivityist](https://productivityist.com/theming-days-made-better-dad/), uses day theming to set his overarching focus for each day. Here's how he themes his week:
+
+Dedicating each day to a single theme creates a reliable work pattern and further limits the cognitive load of context switching. Vardy explains that theming offers mental clarity that allows him to focus on his family:
+
+> “Knowing what the day ‘means’ to me allows me to get the things I need and want to accomplish without seeing undetermined ‘ought to do’ items on a to do list. As a result, I have less decision fatigue and even have more energy when I spend time with my kids.”
+
+### Time boxing
+
+Time blocking and time boxing are often confused as being synonymous, but there's an important difference. Time blocking asks you to set aside certain chunks of time to focus on a given task or activity. For example, "I will work on a first draft of my blog post from 9am to 11 am tomorrow."
+
+In contrast, ==time boxing asks you to limit how much time you'll dedicate to a specific task.== Here's a time boxed version of the time blocking example above: "I will finish a first draft of my blog post tomorrow between 9am and 11am."
+
+This self-imposed "time box" forces you to work efficiently because you have a limited amount of time in which to complete the task. It can be a fun way to challenge yourself and gamify your productivity.
+
+## Why is time blocking so effective?
+
+This technique seems simple on the surface, but has profound impacts on your capacity to get things done:
+
+### It promotes focused “deep work”
+
+Cal Newport, author of [Deep Work: Rules for Focused Success in a Distracted World](https://www.amazon.com/Deep-Work-Focused-Success-Distracted/dp/1455586692/ref=asc%5Fdf%5F1455586692/?tag=hyprod-20&linkCode=df0&hvadid=312741934517&hvpos=1o1&hvnetw=g&hvrand=7753978193869239626&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=9019660&hvtargid=pla-421604508630&psc=1&tag=&ref=&adgrpid=64940825031&hvpone=&hvptwo=&hvadid=312741934517&hvpos=1o1&hvnetw=g&hvrand=7753978193869239626&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=9019660&hvtargid=pla-421604508630), is a [big proponent of time blocking](http://www.calnewport.com/blog/2013/12/21/deep-habits-the-importance-of-planning-every-minute-of-your-work-day/). He dedicates 20 minutes every evening to scheduling out the next work day:
+
+> “Sometimes people ask why I bother with such a detailed level of planning. My answer is simple: it generates a massive amount of productivity. A 40 hour time-blocked work week, I estimate, produces the same amount of output as a 60+ hour work week pursued without structure.”
+
+When you schedule a chunk of time to work on a single project, problem, or task, you bring all of your mental resources to bear on one thing rather than spreading your attention thin across several tasks. The more you “single task”, the more you build the mental muscles required for deep work, and the easier it becomes to stay focused.
+
+### Dig deeper
+
+Learn more about Newport’s approach to meaningful productivity and how to incorporate more focus into your life with [The Complete Guide to Deep Work](https://doist.com/blog/deep-work/?itm%5Fcampaign=time%5Fblocking&itm%5Fmedium=referral&itm%5Fsource=productivity%5Fmethods%5Fguides).
+
+### It helps you knock out “shallow work” more efficiently
+
+Shallow work is the busy work that’s [urgent but not important](https://todoist.com/productivity-methods/eisenhower-matrix) to achieving your long-term goals — think paperwork or responding to (most) emails. When you time box shallow work, you’re setting clear limits on how much time you’ll dedicate to it. Plus, grouping similar tasks together reduces the cost of context switching. By batching all of your shallow tasks together in a dedicated time block or two, you’ll be able to power through them more efficiently and protect the rest of your workday for higher-impact work.
+
+### It makes you aware of how you spend your time
+
+Most people are bad at time management. We are [terrible at estimating](https://en.wikipedia.org/wiki/Planning%5Ffallacy) how much time tasks will take, and we have a tendency to [overcommit our future selves](https://doist.com/blog/neuroscience-achieving-long-term-goals/?itm%5Fcampaign=time%5Fblocking&itm%5Fmedium=referral&itm%5Fsource=productivity%5Fmethods%5Fguides). Time blocking forces you to confront your current priorities and commitments and get intentional about how you spend your finite time. For each new commitment you let into your life, you’re forced to find physical space on your calendar. As a result, the opportunity cost of saying “yes” becomes more concrete, and it becomes much easier to [say “no](https://doist.com/blog/how-to-say-no/?itm%5Fcampaign=time%5Fblocking&itm%5Fmedium=referral&itm%5Fsource=productivity%5Fmethods%5Fguides).”
+
+### It counteracts perfectionism
+
+Fuzzy timelines are a perfectionist’s worst enemy. There’s always something to be tweaked and improved. It can be difficult to know when an open-ended project is finished, especially if you are aiming for perfection. At some point, you need to be able to say “good enough” and move on. Time boxing can help by imposing time limits on your projects. If you often prolong tasks by trying to get everything just right, set a strict time box for finishing the task and stick to it.
+
+### It helps you follow through on your goals
+
+In the article “[Beyond good intentions: Prompting people to make plans improves follow-through on important tasks](https://scholar.harvard.edu/files/todd%5Frogers/files/beyond%5Fgood%5Fintentions%5F-%5Fprompting%5Fpeople.pdf)” researchers Dr. Todd Rogers and Dr. Katherine L. Milkman review several studies supporting the idea that “concrete plans help people follow through on their intentions.”
+
+From following an exercise regimen to scheduling a flu shot, people were more likely to act on their intentions when they wrote down a specific place, date, and time for the activity. Yet most people rely on vague intentions rather than concrete plans:
+
+> “Paradoxically, people frequently underplan when they begin with strong intentions. They mistakenly believe that their strong intentions are enough to propel them to perform desired behaviors, and that belief keeps them from using strategies that could help translate intentions into actions.”
+
+The takeaway: When you schedule your tasks and goals, you’re more likely to follow through. Time blocking forces you to make concrete plans that ensure you’re working toward your goals every day. As William Faulkner famously quipped:
+
+> “I only write when inspiration strikes. Fortunately, it strikes at nine every morning.”
+
+## But will time blocking work with my job?
+
+One of the biggest criticisms of time blocking is that it doesn’t account for reactive jobs where it’s impossible to anticipate what will come in at any given moment. Is time blocking really a realistic strategy for a customer support specialist whose job is to respond to tickets? Or an account manager who needs to be available to respond to client requests?
+
+We’d argue yes — asserting even a small amount of control over your schedule can be helpful no matter your job. Cal Newport put it this way:
+
+> “Periods of open-ended reactivity can be blocked off like any other type of obligation. Even if you’re blocking most of your day for reactive work, for example, the fact that you’re controlling your schedule will allow you to dedicate some small blocks (perhaps at the schedule periphery) to deeper pursuits.”
+
+When your workday is run by external forces, it’s easy to lose sight of your own goals. Time blocking can help you gain a greater sense of control over even the most unpredictable of schedules.
+
+## Some common time blocking missteps and how to avoid them
+
+While time blocking is pretty straightforward in theory, it can be hard to stick to in practice. Here are some tips to help you apply the method successfully (and not become a slave to your calendar in the process):
+
+### Underestimating your time
+
+You’ll get better at estimating how long tasks take over time, but until you’ve honed your instincts, err on the side of blocking off too much time for tasks rather than too little. Pad your schedule with extra time to complete and transition between tasks. You can even create “conditional blocks” of time you can tap into if you fall behind.
+
+### Try these tools
+
+Improve your sense of how long you actually spend on tasks with time trackers like [RescueTime](https://www.rescuetime.com/ref/1403570) or [Toggl](https://toggl.com/).
+
+### Being too rigid
+
+Things will come up and ruin your plans. But remember that your plan is a guide to help focus your attention on what’s important, not a binding contract.
+
+Even productivity expert Cal Newport edits his plans throughout the day by crossing out original time blocks and filling them with updated plans as circumstances demand:
+
+Newport deals with changes in his schedule by seeing it as a game:
+
+> “This type of planning, to me, is like a chess game, with blocks of work getting spread and sorted in such a way that projects big and small all seem to click into completion with (just enough) time to spare.”
+
+See your time blocks as a flexible way to challenge yourself, not strict tools to punish yourself when you fall short.
+
+### Overscheduling your leisure time
+
+Though [Elon Musk and Bill Gates](https://www.businessinsider.com/bill-gates-elon-musk-scheduling-habit-2017-8) have been said to schedule their days down to 5-minute increments, overscheduling your leisure time can be a self-defeating exercise. [Studies](https://www.washingtonpost.com/news/inspired-life/wp/2018/07/31/want-to-be-happier-stop-scheduling-your-free-time/?noredirect=on&utm%5Fterm=.c7b6c4e1f8d1) have shown that scheduling leisure activities has a “unique dampening effect” on the overall enjoyment of the activity.
+
+Instead, you can block out time to disconnect and relax without a set plan for how you’ll spend that time. It will give you the flexibility to decide more spontaneously what you want to do-- call friends to grab a drink? Check out that new Xbox game? Read? Whatever you decide, just remember to keep at least some of your free time free.
+
+## Time blocking with Todoist
+
+You can implement time blocking with any tool, but in this section, we'll focus on how to use Todoist alongside your favorite calendar app — or even good, old-fashioned pen and paper. We'll cover how to implement three different time blocking variations: task batching, day theming, and scheduling individual tasks.
+
+### Task batching variation
+
+Strict time blocking — dedicating a time block to each individual task — can be tedious and hard to maintain over time. We recommend combining time blocking and task batching for a more streamlined system. Instead of one time block per individual task, you’ll assign a time block for each category of task you batch together. Here’s how that looks in practice:
+
+First, decide on which broad categories of work need to be reflected in your daily or weekly schedule. For example, a freelance writer might have the following category list:
+
+* Email
+* Work admin
+* Sales
+* Meetings
+* Research
+* Writing
+* Professional Development
+* Yoga
+* Meal prep
+* Personal admin
+* Reading
+* Free time
+
+Now, sit down with your favorite calendar app or paper planner and create time blocks for the coming week that reflect the times you’ll work on each category. Make sure all of your priorities and commitments are given enough space on your calendar. If you struggle to find room, you may need to start cutting down on your commitments. The end result will look something like this:
+
+If you find it difficult to stick to your digital schedule, we recommend planning your day out on paper. A paper schedule forces you to start fresh each day and makes it easy to scribble things out and adapt as the day goes on. Plus, it's also easier to keep your paper schedule open on your desk as a visible reminder of what you had planned to focus on.
+
+If you work at a company with shared calendars, you may find it helpful to publicly block off time for “Deep Work” to keep a sufficient chunk of the day meeting free. Khoi Vinh, a [Principal Designer at Adobe](https://doist.com/blog/how-khoi-vinh-gets-things-done/?itm%5Fcampaign=time%5Fblocking&itm%5Fmedium=referral&itm%5Fsource=productivity%5Fmethods%5Fguides), uses this strategy at his office:
+
+> “I look for blocks of time on my calendar that I can cordon off for “deep work”. Sometimes I’ll move around meetings to create longer contiguous blocks, and then I’ll create a meeting called “Do Not Book” or, if I suspect someone will ignore that, I’ll name it something like “Collaboration Session” or “Research Review.” You have to get crafty.”
+
+You now have time blocks for each category, but you still need to know which specific task — or group of tasks — to work on when the time comes. That’s where a task manager like Todoist comes in.
+
+[Create a Todoist label](https://get.todoist.help/hc/en-us/articles/360000029000-How-to-best-use-labels?utm%5Fsource=dots%5Fblog&utm%5Fmedium=referral&utm%5Fcampaign=time%5Fblocking) for each batched category you came up with in step one, then review all of your current tasks and assign the appropriate label to each one.
+
+Now, when you come to a time block, all you have to do is pull up the corresponding label list and choose from the relevant tasks. Tasks with dates will automatically be sorted at the top so you’ll know when something is due soon and needs your attention first.
+
+### Todoist Tip
+
+You can also [create a new filter](https://get.todoist.help/hc/en-us/articles/205248842-Filters?itm%5Fcampaign=time%5Fblocking&itm%5Fmedium=referral&itm%5Fsource=productivity%5Fmethods%5Fguides) with a query like “@personal\_admin & next 7 days” to see just the tasks due in the upcoming week with that specific label.
+
+To make sure nothing slips through the cracks, every task should have a label. However, you’ll likely find that not every category needs to be tracked in Todoist. For example, you may want to keep track of your meetings or exercise classes in your calendar rather than in your task manager. And as we said before, you don’t want to overprogram your free time. Experiment with your setup to figure out what makes sense for your specific circumstances.
+
+### Day theming variation
+
+If you try time blocking and still feel too scattered and unfocused, you may want to try out day theming. We recommend this [free Skillshare course](https://www.skillshare.com/classes/Productivity-Habits-That-Stick-Using-Time-Theming/1216959000) by Mike Vardy. He walks you through setting up a day theming system, including detailed examples using both paper and Todoist.
+
+### Scheduling time blocks for individual tasks
+
+Of course, if you want to keep a more granular schedule, you can always create separate time blocks for each task. The easiest way to do that with Todoist is via the [2-way integration with Google Calendar](https://get.todoist.help/hc/en-us/articles/115003128085-How-can-I-use-Todoist-with-Google-Calendar?itm%5Fcampaign=time%5Fblocking&itm%5Fmedium=referral&itm%5Fsource=productivity%5Fmethods%5Fguides).
+
+When setting up the integration:
+
+* Create a new calendar for just your Todoist tasks so you can toggle them on and off inside your calendar as you need.
+* Choose to sync your entire Todoist account or create separate calendars for each of your Todoist projects.
+* Choose to sync tasks with just a due date in addition to tasks with a due date and time.
+
+Any Todoist task with a date and time will automatically appear as an event in your new Todoist calendar. Any task with a date but no time will appear as a day-long event.
+
+During your [weekly review](https://todoist.com/productivity-methods/weekly-review), give each task you want to accomplish a date and/or start time by typing something like “Monday at noon” or “Every Friday at 9am” into the task field. Todoist will automatically recognize and highlight the date and set it when you save the task.
+
+Now, when you open your daily or weekly view in your calendar, you’ll see each of your tasks scheduled as separate events (aka your time blocks). You can extend, shorten, edit, and move your time blocks inside your calendar. Any changes you make in Google Calendar will automatically sync back to your Todoist (and vice versa).
+
+---
+
+Scheduling your days and weeks in advance can seem like a waste of precious time you could be using to actually get things done. But when you aren’t controlling your calendar, it’s easy to let distractions take over. By front-loading your decision-making on what to work on for the day or week, you’ll be saving time and mental energy when it comes to actually getting to work.
+
+Give time blocking and task batching a try for a week and see how it feels to take back control over your time and attention.
+
+### Todoist Tip
+
+If you have a Pro or Business plan, you can supercharge your time blocking with [task durations](https://todoist.com/help/articles/whats-new#reclaim-your-schedule-with-task-durations-aug-30). Simply:
+
+* Select your Due Date, then Time, to set the start time and duration of your task. This forms your time block.
+* You can also add a task’s duration via Todoist’s natural language recognition by typing “for” followed by the length of time you think the task will take. (e.g., “Team meeting today 4pm for 45min” or “Write first draft 9am for 2 hours 30 minutes”.)
+* If you’ve connected your Todoist to a calendar app, the task duration will sync to your calendar automatically (and, on Google Calendar, vice versa with 2-way sync so you can update your tasks from your calendar).
+
+#### Laura Scroggs
+
+[Laura](https://laurascroggs.wordpress.com/) is a freelance writer, PhD candidate, and pug mom living in Minneapolis, MN.
\ No newline at end of file
diff --git a/Read Later/2023-11-14 - The one thing you need to finish your game.md b/Read Later/2023-11-14 - The one thing you need to finish your game.md
new file mode 100644
index 0000000..064de0b
--- /dev/null
+++ b/Read Later/2023-11-14 - The one thing you need to finish your game.md
@@ -0,0 +1,31 @@
+---
+id: b453f3fe-d74e-4a3a-b778-8e4f6450da30
+title: |
+ The one thing you need to finish your game
+status: ARCHIVED
+tags:
+ - read-later
+date_added: 2023-11-14 22:58:47
+url_omnivore: |
+ https://omnivore.app/me/https-youtu-be-b-6-au-n-gi-ue-m-si-ixu-ds-nh-t-2-k-5-b-3-jf-s-18bd0b3d045
+url_original: |
+ https://youtu.be/B6auN-GIUeM?si=ixuDsNhT2k5b3JfS
+---
+
+# The one thing you need to finish your game
+
+## Notes
+
+What you need... is a **plan**...
+
+Because it makes the game feasible, realizable and gives it a scope, to see how "big" it's going to be. Also prevents burn out by all the stuff you _"need to do"_.
+
+A plan is not a immovable wall, you can tweak it if you need to adjust to new discoveries or new inputs, this is better than wandering without a goal. But try to not increment the scope so you don't end up with an interminable project.
+
+> The code is more of a guide than law...
+> Jack Sparrow
+## Original
+
+[The one thing you need to finish your game](https://youtu.be/B6auN-GIUeM?si=ixuDsNhT2k5b3JfS)
+
+By [Game Maker's Toolkit](https://www.youtube.com/@GMTK)
\ No newline at end of file
diff --git a/Read Later/2023-11-21 - Career Mistakes to Avoid as a Developer.md b/Read Later/2023-11-21 - Career Mistakes to Avoid as a Developer.md
new file mode 100644
index 0000000..ad8104b
--- /dev/null
+++ b/Read Later/2023-11-21 - Career Mistakes to Avoid as a Developer.md
@@ -0,0 +1,313 @@
+---
+id: 49d7bfb2-8911-11ee-9b49-a315c7dbc2d7
+title: |
+ Career Mistakes to Avoid as a Developer
+status: ARCHIVED
+tags:
+ - read-later
+ - RSS
+date_added: 2023-11-21 21:04:22
+url_omnivore: |
+ https://omnivore.app/me/career-mistakes-to-avoid-as-a-developer-18bf626412f
+url_original: |
+ https://www.freecodecamp.org/news/career-mistakes-to-avoid-as-a-dev/
+---
+
+# Career Mistakes to Avoid as a Developer
+
+## Highlights
+
+Build authentic connections to get the best out of it. Then once you're connected, here are a few things you can do:
+
+* Show interest in their posts.
+* Engage with discussions by commenting or sharing posts.
+* Repost with your thoughts
+* Exchange ideas, or even build things together!
+
+A strong social connection may help you in getting information faster. You may learn about a new release of a library/framework/product, how an industry is moving, how certain technologies might impact your work, and so on.
+
+[source](https://omnivore.app/me/career-mistakes-to-avoid-as-a-developer-18bf626412f#3d561a03-61e0-4ca6-8e70-81651abe90c1)
+
+---
+
+## Original
+
+
+
+What does the word `career` mean to you? To me, it is a roller coaster journey during which we find opportunities, progress, and growth in life. The journey involves learning objectives, work, and other personal and professional aspects.
+
+A promising career is one where you enjoy most (if not all) of your daily work. You see your personal, professional, and financial growth and gradually define what success means to you.
+
+A lousy career is just the opposite. It may pay your bills, but you need more work satisfaction, and measuring your progress and growth becomes hard.
+
+Several factors define a career: promising versus lousy, good versus bad, and successful versus failed. A few of them we can not control – but, we can avoid some career mistakes to build a better career path.
+
+I have spent more than 18 years in Software Engineering and have seen a lot of ups and downs, including in my own career and those of my colleagues. In this article, I will discuss ten career mistakes you should avoid.
+
+Usually, I [share knowledge](https://www.freecodecamp.org/news/author/tapas/) on technical topics like JavaScript, web development, React, Node, Next.js, and so on. But this time, let's connect on essential tips for our Career Development.
+
+If you like to learn from video content as well, this article is also available as a video tutorial here: 🙂
+
+## A Few Things Before We Start
+
+You may or may not agree with all the points. That's fine with me, because what I'm planning to share here is based on my own experiences.
+
+You may strongly agree or disagree with my conclusions, but if there are any additional points that you think I still need to include, please let me know. You can contact me on the social handles I mention at the end of this article.
+
+Also, this article is not only meant for working professionals. All these mistakes we will discuss are relevant for everyone, including students, people seeking jobs, or anyone getting ready for tomorrow in the software industry or any industry.
+
+All set? Let's get started.
+
+## 1\. You Don't Set Realistic Goals
+
+
+
+One of the biggest mistakes most of us make in our careers is not having a goal. What exactly is a goal? It is something like a target.
+
+Let's take an example. Let's say you're going shopping to buy something. You usually have a list of items that you want to get. You don't randomly pick things and come home and feel like, "Oh, it was a complete waste of time and money". So, if that list is your shopping goal, why not have something like this for your career?
+
+Usually, we have a lot of short-term goals, for example,
+
+* I have to fix this bug today.
+* I have to build this project this week.
+* I have to get a promotion this year.
+
+These are great goals to have. But we need to have long-term goals as well. Like, what do you want to be in the long-term in your career. How do you plan every steps to achieve that goal?
+
+Say you are in mechanical engineering, but your heart is in software engineering (mechanical engineering is excellent – I'm just taking this as an example). In that case, you should have a goal for the next few years to translate yourself into a software developer and try to seek more roles more opportunities in the software industry.
+
+I can tell you my story, as I think it'll help give you some perspective. I set myself a long term career goal to transition from my regular multi-national corporation job and start my career full time as an independent teacher and content creator. It took me four years to realize it, but without that goal it would have been impossible for me to chase my passion.
+
+You may ask, will I be able to fulfill all the goals in my life? Well, maybe not. Still, it's important to have some and prioritize the most important ones. That way, even if you can't achieve some, you may identify a few more new goals along the way.
+
+You may have a different way of going about it. But, if you don't have a starting point, you do not have anything to work toward and chase. Your career may become stagnant.
+
+If you don't have any career goals for yourself right now, take some time to come up with a couple realistic goals. Here's some advice on [how to set SMART goals you can actually achieve](https://www.freecodecamp.org/news/how-to-set-smart-goals-you-can-achieve/).
+
+## 2\. You Fail to Recognize Your Potential
+
+
+
+> **Human potential** is the capacity for humans to **improve** themselves through **studying**, **training**, and **practice**, to reach the limit of their ability to develop **aptitudes** and **skills**. – Definition of Human Potential from Wikipedia.
+
+For us, the software developers, is about improving ourselves through practice, training, and study to reach the heights of our ability. But many of us do not know our potential at the start our careers. We figure it out gradually, and when we become aware of it, this helps us improve our careers.
+
+When you know your potential, someone else will not dictate how to shape your career. Instead, you will be able to identify what would be good for you based on your strengths and where you need to bridge the gaps.
+
+But you may ask, "How do I know my potential?". That's where having a goal and working towards it helps. Say you have a goal of mastering machine learning and data science to have a career as a data scientist. As you work towards this goal, you will find the areas where you excel, and other areas where you need to work especially hard. You figure out your potential as you work towards this goal.
+
+Also, try not to settle for unimportant things. Constantly challenge yourself to produce better and more significant outcomes. When you do so, you discover your true potential in a much better way.
+
+## 3\. You Don't Take the Time to Network
+
+
+
+Hey, we're gonna talk about something other than computer networking here. We will focus on human-to-human networking. We are going to talk about socializing. But why?
+
+Networking or socializing with like-minded people, talking to them, and getting inspired by their work are as important as learning to code in programming. You might be a great programmer and fantastic coder. But suppose you do it in a silo. In that case, no one knows you or what you're capable of, so you will most likely lose out on more significant opportunities in your career.
+
+When you socialize and network with others in the tech space, you may find a meaningful community to join. You'll be able to discuss important topics with like-minded people who have interests similar to yours – and this can help you multiply your growth by many times.
+
+This is one mistake I made in my career for several years, as I was unaware of its vast potential. Be active on platforms like LinkedIn, follow people you'd like to connect with on tech Twitter (now X), and make authentic connections with them. Spending mindful time on these platforms, and at in-person events as you're able, can really help boost your career.
+
+Check out the `You Miss Out on Learning Opportunities` section below for some real-life tips on how to reach out and connect with people.
+
+## 4\. You Waste Your Precious Time
+
+
+
+"Wasting time" means not effectively utilizing your time. Would you agree that time is precious? Using and managing your time properly will help your career and life in general.
+
+To clarify, watching a movie, going out with your friends and family, participating in festive activities, and so are not wasting time. You need these to balance out the time you spend working.
+
+Rather, I'm more concerned about the tasks you may have to perform that take away from your "focus time" at work.
+
+Let me walk you through a few situations:
+
+You are working on a task, and here comes some notifications on your phone. You pause whatever you are doing and jump on your phone to see what's happening on that side of the world. The notification may take you 10-15 seconds to read, but you then spend 10 minutes browsing the phone.
+
+This is a habit many of us have built in recent times. And then when you get back to your work, your brain has to recalculate and bring you back to the topic at hand – where you were, and what you were doing – and get you started with the task gain. This context switching is costly, and the same amount of focus may not be possible.
+
+The best way of tackle a situation like this is,
+
+* Switch off the phone's internet while you're working if you do not need it. You can switch it on when you take breaks, maybe at lunch time.
+* You can also set your phone in "Do Not Disturb" mode while your work needs your utmost attention. Just make sure you add some of your family and friend's contacts as emergency contacts so that only a limited set of people can reach out to you during those times in case of any emergencies.
+
+Let's talk about another situation. Suppose you need to prepare and send a design doc to a senior dev for review. But instead, you spend time on something low priority or some little luxury that delayed preparing the doc. You keep postponing until it's become an urgent thing that you'll have to do within a limited time.
+
+This act of delaying something knowingly is called `procrastination`, an ultimate way to kill time. There are some well-known and proven methods to tackle procrastination.
+
+* The first step is to realize and admit to yourself that you procrastinate.
+* Then list out your distractors. This list may vary from person to person. Remove these distractors. It could be your phone, TV, novels, anything.
+* Break down your deliverables into smaller tasks. Achieve them one by one and give yourself a pat on your back once you've finished each small task.
+* Take small breaks and come back to the point where you left off on your task to continue with a fresh brain.
+
+Instead of finding yourself in these types of situations, use your time wisely. If you have to get something done, get it done. When you're procrastinating, something that depends on one task may also get delayed, creating a cycle of time waste, frustrations, and complicated situations.
+
+## 5\. You Neglect Upskilling
+
+
+
+`Upskilling` means getting better at your current skill or acquiring relevant new skills. It is essential to upskill at any and all stages of your career.
+
+One of the common mistakes we make is that we stop upskilling after a few years in our professional life. We get used to the projects, domains, technologies, and environments that create a comfort zone around us. Upskilling is always about coming out of that comfort zone.
+
+Here are a few common excuses we give to ourselves when it comes to upskilling:
+
+* I already have a lot of work at the office or assignments in university.
+* I need to have a personal life.
+* I am happy with whatever I know now, and my work only demands so much.
+* There is so much to learn and it is never ending (sigh!).
+
+But you really don't need that much time in a week to up-skill. You just need to have a plan and to stay consistent in executing it. Set just 1 hour aside in your day. Fork it out from any non-urgent activities and plan your learning schedule in that one hour.
+
+In this one hour, here are some things you can do:
+
+* Assess the gaps, weaknesses, and strengths in your technical and non technical abilities.
+* List them out in a place where you can easily get back to them and make modifications.
+* Prioritize them based on your current needs and near future goals.
+* Time-box each of the items so that you can get something tangible within a specified duration. For example, you want to do a certification on cloud computing within a month, or the Responsive Web Design course from freeCodeCamp over the next few weeks, and so on.
+* Start working on these defined tasks. You may find many resources on internet. Glance over them to create an index of resources that you can understand easily and relate to well.
+* Read and watch tutorials, but also practice hard.
+* Finally, recognize your progress.
+
+You may ask, is that one hour really enough? And I will tell you – it works like magic if you keep it up. Upskilling is not a race or sprint. It needs time, consistency, and perseverance to get from the one end to other.
+
+Have you heard about the power of tiny gains?
+
+
+
+Credit: James Clear
+
+It is a strategy of being just 1% better every day. If you continue to do that for a year, you get almost 38% better at the end of the year. Being 1% worse does the opposite. The strategy was represented in mathematical graphs by James Clear in explanation of [Continuous improvements and how it works](https://jamesclear.com/continuous-improvement).
+
+Upskilling can also help you out a lot if you're preparing for the job search. The way the tech industry is moving, we may not be able to avoid layoffs – but we can be better prepared to get our next job faster. And that becomes much more attainable when you stay relevant and continue learning new things.
+
+## 6\. You Don't Ask for What You Want
+
+
+
+Let me start by sharing an experience of mine. Back in the early 2000s when I was a fresher, I had to attend a meeting with some of the project leads and the manager. We were discussing how to modernize our product with HTML5 features.
+
+I was aware of HTML5, and every time a discussion point was raised, I thought of adding to it, but I didn't. I thought of asking some valuable questions, but I didn't. I felt that in order to ask something in a meeting, I needed a lot of guts! I was wrong.
+
+Oftentimes in your career journey, if you do not ask, you simply won't get what you want or deserve. If someone has some knowledge and you lack it, ask about it. If you have a questiona bout something, ask before you commit to the work. Ask about your promotion, a salary hike, career growth, and anything that is related to your career. There is no such thing as a silly question when it comes to your career growth.
+
+## 7\. You Only Focus on the Money
+
+
+
+Come on, money is important. But is it the only important thing, especially in the context of switching jobs or working towards your career goals? No, certainly not.
+
+When you plan to switch jobs, you also need to look into other factors like work culture, the amount of time you need to spend at the office working, whether it's going to be more stressful compared to the compensation you'll be getting, and so on.
+
+I would certainly look into the following factors along with the compensation (the money part) to make an informed decision about my job switching:
+
+* What will be my technical growth and learning opportunities?
+* What will the work environment be like? Remote/Work From Office/Hybrid? How will that impact me?
+* What skills (both tech and soft) will I be able to learn in the new position?
+* What kind of employee benefits will I get compared to my current organization?
+* Will my work-life balance be impacted positively?
+* What are the company's vision, culture, and values?
+
+Then when you're considering the salary, be careful and make sure you understand the breakdown. What percentage of the CTC comes from any bonus? Is it inclusive or exclusive of CTC? How does the bonus payout happen? If the company doesn't do well in a fiscal year, will you get paid less? Are there stock options or other benefits they pay out instead of cash? All this matters.
+
+The mistake people often make is that they see only the `money` figure as the most important part of a job offer. Make sure you talk to someone from the company, do your research, and learn about what else they're offering as we mentioned above.
+
+## 8\. You Neglect Work-Life Balance
+
+
+
+Another mistake you might make is not balancing your work and life. The last thing you want is to `burn out` at the cost of things you love the most, like your friends, family, and long-term career.
+
+We must learn to prioritize things, and this includes both work and personal life. Your priority list for the day should not have only work related items. While it's important to ship a bug fix, it is also essential to accompany your kids to their soccer games or school plays, or make time to go on a date with your partner, or do something nice for yourself.
+
+Do not be afraid to say "No". At the same time, don't be arrogant when you accept or decline tasks. This is important to keep a healthy work-life balance. When you already have plenty on your plate, trying to accommodate more or do more will only spill over and negatively affect your work-life balance.
+
+So say no when you need to, communicate your intentions ahead of time when possible, and proactively ask for what tasks you'd like to work on when your plate has room for more.
+
+For a long time in my career, I attended meetings late at night to match the timezones of my customers and other colleagues. Then, slowly, it started affecting my health and productivity.
+
+When I thought about it more carefully, I discovered a couple of things. First, I realized that I didn't have to attend all the meetings, and that I could request that they take place in my clients' evenings sometimes. That way we'd both be taking turns compromising. And it worked.
+
+At times, our habits drive us towards the work-life imbalance. For example, staying late at office while the same work can wait till the next morning is a classic example of a habit that may lead to health issues and frustrations in a long run.
+
+We all need to find a way to sustain both work and life. So plan ahead, and stick to your schedule as much as possible. There might be exceptions where you have to give one thing priority above another – but do not allow the exception to become the norm.
+
+## 9\. You Miss Out on Learning Opportunities
+
+
+
+If you have the opportunity to learn from a person who specializes in a particular field, grab it. If you use social media platforms like LinkedIn and X/Twitter wisely, it can lead you to the people who share great insights about subjects you're interested in.
+
+A quick tip for you:
+
+When you send someone a connection request on LinkedIn/X, take some time to introduce yourself. Things that you can mention briefly:
+
+* What did you find unique about the person you want to connect to?
+* A bit about yourself, introducing some of your uniqueness, too.
+* Why do you want to connect?
+
+==Build authentic connections to get the best out of it. Then once you're connected, here are a few things you can do:==
+
+* ==Show interest in their posts.==
+* ==Engage with discussions by commenting or sharing posts.==
+* ==Repost with your thoughts==
+* ==Exchange ideas, or even build things together!==
+
+==A strong social connection may help you in getting information faster. You may learn about a new release of a library/framework/product, how an industry is moving, how certain technologies might impact your work, and so on.==
+
+Apart from learning a lot, you may also get to know about job openings, hirings, and references. After all, companies have also started recruiting talent from social media pages.
+
+Also, being part of a forum like the [freeCodeCamp forum](https://forum.freecodecamp.org/) can be helpful for networking and learning as well. It is also a place for you to share solutions to a problem, talk about what you've learned, and make yourself visible gradually.
+
+When we learn from someone, we not only come to understand what they've achieved or how they did it, but we also learn about the struggles, failures, and how they made the turnaround. Learning from someone else's experience can help accelerate your career journey. Don't make the mistake of living in a silo and missing out on these opportunities.
+
+## 10\. You Can't See the Bigger Picture
+
+
+
+By `Big Picture`(or Bigger Picture), I mean understanding and developing a wider perspective on your career as a whole. It is about your ability to consider and assess many different aspects of a situation, rather than focusing on just the minute details.
+
+As developers, we're supposed to implement features, do bug fixes, maintain code, and deliver quality software to our end-users. That's great!
+
+But, we need to think beyond the individual tasks assigned to us. Our understanding of the overall project goals, the user acceptance criteria, delivery mechanisms, and perspectives of other engineers is key. And so is judging the impact of our work, as it will help us get the big picture of a project.
+
+Suppose your product manager wants your team to build user interfaces that also cater to the needs of specially-abled and visually challenged users. In this case, you and your team members must see the bigger picture around `Accessibility`.
+
+If your designer doesn't define the site's colors accordingly, or the developers do not implement keyboard accessibility along with ARIA roles and attributes, then they're missing the bigger picture.
+
+Another example could be over-optimizing performance while your users do not care about it. Your users may be waiting to get a feature ASAP so it can help them achieve their business goals. But by addressing unnecessary optimizations, you may be delaying that release and missing crucial deadlines.
+
+Missing the bigger picture may lead to a lack of synergy in your organization. It can also result in software products that need multiple iterations to meet customer needs because those needs weren't understood at the beginning. This can cause you to miss deadlines and do more work, and can greatly increase the cost to your client.
+
+Along with understanding "what" tasks you need to perform, also ask "why" your tasks are important and how they will impact the rest of the project or other people's work.
+
+Irrespective of what you build, how big or small it is, how glorified or dull is the outcome, you need to know the impact of it on end users and your internal customers (like product/project managers, quality assurance team, documentation team, whoever).
+
+Once you look at the bigger picture and act accordingly, your margin of error reduces automatically.
+
+## Some More Advice and Wrapping Up
+
+I wanted to share all this career advice with you because I have been on the other side and learned the hard way. Before I move on to write my next article or record my next video, one more quick tip for you: make sure you work to build up your finances.
+
+Financial independence brings peace and the mental stability to think wildly about things you want to pursue in your career. But getting to the point of financial stability is not an overnight thing. You need to plan, save, and invest wisely such that your money grows faster than your age.
+
+I am not a finance expert, but I relied on some good ones and took their suggestions early on. If you have the opportunity and mindset to build your finances for the future, the time is now.
+
+That's all for now. I hope you found this article informative and insightful. I regularly publish meaningful posts on my [GreenRoots Blog](https://blog.greenroots.info/), you may find them helpful, too.
+
+Let's connect.
+
+* I am an educator on my YouTube channel, `tapaScript`. Please [SUBSCRIBE](https://www.youtube.com/tapasadhikary?sub%5Fconfirmation=1) to the channel if you want to learn JavaScript, ReactJS, Next.js, Node.js, Git, and all about Web Development in the fundamental way.
+* [Follow me on X (Twitter](https://twitter.com/tapasadhikary)) or [LinkedIn](https://www.linkedin.com/in/tapasadhikary/) if you don't want to miss the daily dose of Web Development and Programming Tips.
+* Find all my public speaking talks [here](https://www.tapasadhikary.com/talks).
+* Check out and follow my Open Source work on [GitHub](https://github.com/atapas).
+
+See you soon with my next article. Until then, please take care of yourself, and stay happy.
+
+---
+
+---
+
+ Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. [Get started](https://www.freecodecamp.org/learn/)
\ No newline at end of file
diff --git a/Read Later/2023-11-21 - Conventional Commits.md b/Read Later/2023-11-21 - Conventional Commits.md
new file mode 100644
index 0000000..049e2db
--- /dev/null
+++ b/Read Later/2023-11-21 - Conventional Commits.md
@@ -0,0 +1,265 @@
+---
+id: 2a685647-d920-4ba6-b837-3ee29a2f7f10
+title: |
+ Conventional Commits
+status: ARCHIVED
+tags:
+ - read-later
+date_added: 2023-11-21 16:36:37
+url_omnivore: |
+ https://omnivore.app/me/https-www-conventionalcommits-org-en-v-1-0-0-18bf36268eb
+url_original: |
+ https://www.conventionalcommits.org/en/v1.0.0/
+---
+
+# Conventional Commits
+
+## Highlights
+
+The commit message should be structured as follows:
+
+---
+
+```fortran
+[optional scope]:
+
+[optional body]
+
+[optional footer(s)]
+```
+
+[source](https://omnivore.app/me/https-www-conventionalcommits-org-en-v-1-0-0-18bf36268eb#0a71a3f4-0b81-4ccf-849b-f45c65951d5b)
+
+---
+
+## Specification
+
+The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in this document are to be interpreted as described in [RFC 2119](https://www.ietf.org/rfc/rfc2119.txt).
+
+1. Commits MUST be prefixed with a type, which consists of a noun, `feat`, `fix`, etc., followed by the OPTIONAL scope, OPTIONAL `!`, and REQUIRED terminal colon and space.
+2. The type `feat` MUST be used when a commit adds a new feature to your application or library.
+3. The type `fix` MUST be used when a commit represents a bug fix for your application.
+4. A scope MAY be provided after a type. A scope MUST consist of a noun describing a section of the codebase surrounded by parenthesis, e.g., `fix(parser):`
+5. A description MUST immediately follow the colon and space after the type/scope prefix. The description is a short summary of the code changes, e.g., _fix: array parsing issue when multiple spaces were contained in string_.
+6. A longer commit body MAY be provided after the short description, providing additional contextual information about the code changes. The body MUST begin one blank line after the description.
+7. A commit body is free-form and MAY consist of any number of newline separated paragraphs.
+8. One or more footers MAY be provided one blank line after the body. Each footer MUST consist of a word token, followed by either a `:` or `#` separator, followed by a string value (this is inspired by the[git trailer convention](https://git-scm.com/docs/git-interpret-trailers)).
+9. A footer’s token MUST use `-` in place of whitespace characters, e.g., `Acked-by` (this helps differentiate the footer section from a multi-paragraph body). An exception is made for `BREAKING CHANGE`, which MAY also be used as a token.
+10. A footer’s value MAY contain spaces and newlines, and parsing MUST terminate when the next valid footer token/separator pair is observed.
+11. Breaking changes MUST be indicated in the type/scope prefix of a commit, or as an entry in the footer.
+12. If included as a footer, a breaking change MUST consist of the uppercase text BREAKING CHANGE, followed by a colon, space, and description, e.g.,_BREAKING CHANGE: environment variables now take precedence over config files_.
+13. If included in the type/scope prefix, breaking changes MUST be indicated by a`!` immediately before the `:`. If `!` is used, `BREAKING CHANGE:` MAY be omitted from the footer section, and the commit description SHALL be used to describe the breaking change.
+14. Types other than `feat` and `fix` MAY be used in your commit messages, e.g., _docs: update ref docs._
+15. The units of information that make up Conventional Commits MUST NOT be treated as case sensitive by implementors, with the exception of BREAKING CHANGE which MUST be uppercase.
+16. BREAKING-CHANGE MUST be synonymous with BREAKING CHANGE, when used as a token in a footer.
+
+[source](https://omnivore.app/me/https-www-conventionalcommits-org-en-v-1-0-0-18bf36268eb#5670099d-60fe-4b9c-82b9-814e423c0e61)
+
+---
+
+### What do I do if the commit conforms to more than one of the commit types?
+
+Go back and make multiple commits whenever possible. Part of the benefit of Conventional Commits is its ability to drive us to make more organized commits and PRs.
+
+[source](https://omnivore.app/me/https-www-conventionalcommits-org-en-v-1-0-0-18bf36268eb#6ae81ced-efe6-464a-8026-c2f286faf4b7)
+
+---
+
+### How does this relate to SemVer?
+
+`fix` type commits should be translated to `PATCH` releases. `feat` type commits should be translated to `MINOR` releases. Commits with `BREAKING CHANGE` in the commits, regardless of type, should be translated to `MAJOR` releases.
+
+[source](https://omnivore.app/me/https-www-conventionalcommits-org-en-v-1-0-0-18bf36268eb#6876934a-5761-49f8-8905-3153e5d667b7)
+
+---
+
+## Original
+
+## [](#summary)Summary
+
+The Conventional Commits specification is a lightweight convention on top of commit messages. It provides an easy set of rules for creating an explicit commit history; which makes it easier to write automated tools on top of. This convention dovetails with [SemVer](http://semver.org/), by describing the features, fixes, and breaking changes made in commit messages.
+
+==The commit message should be structured as follows:==
+
+---
+
+```fortran
+[optional scope]:
+
+[optional body]
+
+[optional footer(s)]
+
+```
+
+---
+
+The commit contains the following structural elements, to communicate intent to the consumers of your library:
+
+1. **fix:** a commit of the _type_ `fix` patches a bug in your codebase (this correlates with [PATCH](http://semver.org/#summary) in Semantic Versioning).
+2. **feat:** a commit of the _type_ `feat` introduces a new feature to the codebase (this correlates with [MINOR](http://semver.org/#summary) in Semantic Versioning).
+3. **BREAKING CHANGE:** a commit that has a footer `BREAKING CHANGE:`, or appends a `!` after the type/scope, introduces a breaking API change (correlating with [MAJOR](http://semver.org/#summary) in Semantic Versioning). A BREAKING CHANGE can be part of commits of any _type_.
+4. _types_ other than `fix:` and `feat:` are allowed, for example [@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional) (based on the [Angular convention](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines)) recommends `build:`, `chore:`,`ci:`, `docs:`, `style:`, `refactor:`, `perf:`, `test:`, and others.
+5. _footers_ other than `BREAKING CHANGE: ` may be provided and follow a convention similar to[git trailer format](https://git-scm.com/docs/git-interpret-trailers).
+
+Additional types are not mandated by the Conventional Commits specification, and have no implicit effect in Semantic Versioning (unless they include a BREAKING CHANGE).A scope may be provided to a commit’s type, to provide additional contextual information and is contained within parenthesis, e.g., `feat(parser): add ability to parse arrays`.
+
+## [](#examples)Examples
+
+### [](#commit-message-with-description-and-breaking-change-footer)Commit message with description and breaking change footer
+
+```routeros
+feat: allow provided config object to extend other configs
+
+BREAKING CHANGE: `extends` key in config file is now used for extending other config files
+
+```
+
+### [](#commit-message-with--to-draw-attention-to-breaking-change)Commit message with `!` to draw attention to breaking change
+
+```routeros
+feat!: send an email to the customer when a product is shipped
+
+```
+
+### [](#commit-message-with-scope-and--to-draw-attention-to-breaking-change)Commit message with scope and `!` to draw attention to breaking change
+
+```routeros
+feat(api)!: send an email to the customer when a product is shipped
+
+```
+
+### [](#commit-message-with-both--and-breaking-change-footer)Commit message with both `!` and BREAKING CHANGE footer
+
+```crmsh
+chore!: drop support for Node 6
+
+BREAKING CHANGE: use JavaScript features not available in Node 6.
+
+```
+
+### [](#commit-message-with-no-body)Commit message with no body
+
+```avrasm
+docs: correct spelling of CHANGELOG
+
+```
+
+### [](#commit-message-with-scope)Commit message with scope
+
+```stylus
+feat(lang): add Polish language
+
+```
+
+### [](#commit-message-with-multi-paragraph-body-and-multiple-footers)Commit message with multi-paragraph body and multiple footers
+
+```http
+fix: prevent racing of requests
+
+Introduce a request id and a reference to latest request. Dismiss
+incoming responses other than from latest request.
+
+Remove timeouts which were used to mitigate the racing issue but are
+obsolete now.
+
+Reviewed-by: Z
+Refs: #123
+
+```
+
+## [](#specification)==Specification==
+
+==The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in this document are to be interpreted as described in== ==[RFC 2119](https://www.ietf.org/rfc/rfc2119.txt)====.==
+
+1. ==Commits MUST be prefixed with a type, which consists of a noun,== `==feat==`==,== `==fix==`==, etc., followed
+by the OPTIONAL scope, OPTIONAL== `==!==`==, and REQUIRED terminal colon and space.==
+2. ==The type== `==feat==` ==MUST be used when a commit adds a new feature to your application or library.==
+3. ==The type== `==fix==` ==MUST be used when a commit represents a bug fix for your application.==
+4. ==A scope MAY be provided after a type. A scope MUST consist of a noun describing a
+section of the codebase surrounded by parenthesis, e.g.,== `==fix====(parser)====:==`
+5. ==A description MUST immediately follow the colon and space after the type/scope prefix.
+The description is a short summary of the code changes, e.g.,== _==fix: array parsing issue when multiple spaces were contained in string==_==.==
+6. ==A longer commit body MAY be provided after the short description, providing additional contextual information about the code changes. The body MUST begin one blank line after the description.==
+7. ==A commit body is free-form and MAY consist of any number of newline separated paragraphs.==
+8. ==One or more footers MAY be provided one blank line after the body. Each footer MUST consist of
+a word token, followed by either a== `==:====<====space====>==` ==or== `==<====space====>====#==` ==separator, followed by a string value (this is inspired by the====[git trailer convention](https://git-scm.com/docs/git-interpret-trailers)====).==
+9. ==A footer’s token MUST use== `==-==` ==in place of whitespace characters, e.g.,== `==Acked-====by==` ==(this helps differentiate
+the footer section from a multi-paragraph body). An exception is made for== `==BREAKING== ==CHANGE==`==, which MAY also be used as a token.==
+10. ==A footer’s value MAY contain spaces and newlines, and parsing MUST terminate when the next valid footer
+token/separator pair is observed.==
+11. ==Breaking changes MUST be indicated in the type/scope prefix of a commit, or as an entry in the
+footer.==
+12. ==If included as a footer, a breaking change MUST consist of the uppercase text BREAKING CHANGE, followed by a colon, space, and description, e.g.,==_==BREAKING CHANGE: environment variables now take precedence over config files==_==.==
+13. ==If included in the type/scope prefix, breaking changes MUST be indicated by a==`==!==` ==immediately before the== `==:==`==. If== `==!==` ==is used,== `==BREAKING== ==CHANGE:==` ==MAY be omitted from the footer section,
+and the commit description SHALL be used to describe the breaking change.==
+14. ==Types other than== `==feat==` ==and== `==fix==` ==MAY be used in your commit messages, e.g.,== _==docs: update ref docs.==_
+15. ==The units of information that make up Conventional Commits MUST NOT be treated as case sensitive by implementors, with the exception of BREAKING CHANGE which MUST be uppercase.==
+16. ==BREAKING-CHANGE MUST be synonymous with BREAKING CHANGE, when used as a token in a footer.==
+
+## [](#why-use-conventional-commits)Why Use Conventional Commits
+
+* Automatically generating CHANGELOGs.
+* Automatically determining a semantic version bump (based on the types of commits landed).
+* Communicating the nature of changes to teammates, the public, and other stakeholders.
+* Triggering build and publish processes.
+* Making it easier for people to contribute to your projects, by allowing them to explore a more structured commit history.
+
+## [](#faq)FAQ
+
+### [](#how-should-i-deal-with-commit-messages-in-the-initial-development-phase)How should I deal with commit messages in the initial development phase?
+
+We recommend that you proceed as if you’ve already released the product. Typically _somebody_, even if it’s your fellow software developers, is using your software. They’ll want to know what’s fixed, what breaks etc.
+
+### [](#are-the-types-in-the-commit-title-uppercase-or-lowercase)Are the types in the commit title uppercase or lowercase?
+
+Any casing may be used, but it’s best to be consistent.
+
+### [](#what-do-i-do-if-the-commit-conforms-to-more-than-one-of-the-commit-types)==What do I do if the commit conforms to more than one of the commit types?==
+
+==Go back and make multiple commits whenever possible. Part of the benefit of Conventional Commits is its ability to drive us to make more organized commits and PRs.==
+
+### [](#doesnt-this-discourage-rapid-development-and-fast-iteration)Doesn’t this discourage rapid development and fast iteration?
+
+It discourages moving fast in a disorganized way. It helps you be able to move fast long term across multiple projects with varied contributors.
+
+### [](#might-conventional-commits-lead-developers-to-limit-the-type-of-commits-they-make-because-theyll-be-thinking-in-the-types-provided)Might Conventional Commits lead developers to limit the type of commits they make because they’ll be thinking in the types provided?
+
+Conventional Commits encourages us to make more of certain types of commits such as fixes. Other than that, the flexibility of Conventional Commits allows your team to come up with their own types and change those types over time.
+
+### [](#how-does-this-relate-to-semver)==How does this relate to SemVer?==
+
+`==fix==` ==type commits should be translated to== `==PATCH==` ==releases.== `==feat==` ==type commits should be translated to== `==MINOR==` ==releases. Commits with== `==BREAKING== ==CHANGE==` ==in the commits, regardless of type, should be translated to== `==MAJOR==` ==releases.==
+
+### [](#how-should-i-version-my-extensions-to-the-conventional-commits-specification-eg-jameswomackconventional-commit-spec)How should I version my extensions to the Conventional Commits Specification, e.g. `@jameswomack/conventional-commit-spec`?
+
+We recommend using SemVer to release your own extensions to this specification (and encourage you to make these extensions!)
+
+### [](#what-do-i-do-if-i-accidentally-use-the-wrong-commit-type)What do I do if I accidentally use the wrong commit type?
+
+#### [](#when-you-used-a-type-thats-of-the-spec-but-not-the-correct-type-eg-fix-instead-of-feat)When you used a type that’s of the spec but not the correct type, e.g. `fix` instead of `feat`
+
+Prior to merging or releasing the mistake, we recommend using `git rebase -i` to edit the commit history. After release, the cleanup will be different according to what tools and processes you use.
+
+#### [](#when-you-used-a-type-not-of-the-spec-eg-feet-instead-of-feat)When you used a type _not_ of the spec, e.g. `feet` instead of `feat`
+
+In a worst case scenario, it’s not the end of the world if a commit lands that does not meet the Conventional Commits specification. It simply means that commit will be missed by tools that are based on the spec.
+
+### [](#do-all-my-contributors-need-to-use-the-conventional-commits-specification)Do all my contributors need to use the Conventional Commits specification?
+
+No! If you use a squash based workflow on Git lead maintainers can clean up the commit messages as they’re merged—adding no workload to casual committers. A common workflow for this is to have your git system automatically squash commits from a pull request and present a form for the lead maintainer to enter the proper git commit message for the merge.
+
+### [](#how-does-conventional-commits-handle-revert-commits)How does Conventional Commits handle revert commits?
+
+Reverting code can be complicated: are you reverting multiple commits? if you revert a feature, should the next release instead be a patch?
+
+Conventional Commits does not make an explicit effort to define revert behavior. Instead we leave it to tooling authors to use the flexibility of _types_ and _footers_ to develop their logic for handling reverts.
+
+One recommendation is to use the `revert` type, and a footer that references the commit SHAs that are being reverted:
+
+```http
+revert: let us never again speak of the noodle incident
+
+Refs: 676104e, a215868
+
+```
\ No newline at end of file
diff --git a/Read Later/2023-11-21 - How to Write Better Git Commit Messages – A Step-By-Step Guide.md b/Read Later/2023-11-21 - How to Write Better Git Commit Messages – A Step-By-Step Guide.md
new file mode 100644
index 0000000..21b2a18
--- /dev/null
+++ b/Read Later/2023-11-21 - How to Write Better Git Commit Messages – A Step-By-Step Guide.md
@@ -0,0 +1,253 @@
+---
+id: 1996b6ce-9449-415d-8c18-609ddb9cd580
+title: |
+ How to Write Better Git Commit Messages – A Step-By-Step Guide
+status: ARCHIVED
+tags:
+ - read-later
+date_added: 2023-11-21 12:10:32
+url_omnivore: |
+ https://omnivore.app/me/https-www-freecodecamp-org-news-how-to-write-better-git-commit-m-18bf26ec55f
+url_original: |
+ https://www.freecodecamp.org/news/how-to-write-better-git-commit-messages/
+---
+
+# How to Write Better Git Commit Messages – A Step-By-Step Guide
+
+## Highlights
+
+To come up with thoughtful commits, consider the following:
+
+* Why have I made these changes?
+* What effect have my changes made?
+* Why was the change needed?
+* What are the changes in reference to?
+
+[source](https://omnivore.app/me/https-www-freecodecamp-org-news-how-to-write-better-git-commit-m-18bf26ec55f#b1693951-0a92-44f4-804d-7c5008bf3113)
+
+---
+
+See the differences below:
+
+1. `git commit -m 'Add margin'`
+2. `git commit -m 'Add margin to nav items to prevent them from overlapping the logo'`
+
+[source](https://omnivore.app/me/https-www-freecodecamp-org-news-how-to-write-better-git-commit-m-18bf26ec55f#a3c842a2-18b0-46b9-8131-c37ecd867c19)
+
+---
+
+Conventional Commit is a formatting convention that provides a set of rules to formulate a consistent commit message structure like so:
+
+```fortran
+[optional scope]:
+
+[optional body]
+
+[optional footer(s)]
+```
+
+The commit type can include the following:
+
+* `feat` – a new feature is introduced with the changes
+* `fix` – a bug fix has occurred
+* `chore` – changes that do not relate to a fix or feature and don't modify src or test files (for example updating dependencies)
+* `refactor` – refactored code that neither fixes a bug nor adds a feature
+* `docs` – updates to documentation such as a the README or other markdown files
+* `style` – changes that do not affect the meaning of the code, likely related to code formatting such as white-space, missing semi-colons, and so on.
+* `test` – including new or correcting previous tests
+* `perf` – performance improvements
+* `ci` – continuous integration related
+* `build` – changes that affect the build system or external dependencies
+* `revert` – reverts a previous commit
+
+[source](https://omnivore.app/me/https-www-freecodecamp-org-news-how-to-write-better-git-commit-m-18bf26ec55f#f3ea8f19-6480-43ac-a72f-2856ee003fb6)
+
+---
+
+## Original
+
+
+
+When first introduced to Git, it's typical for developers to feel uncomfortable with the process.
+
+You might feel uncertainty when encountering the Git commit message, unsure how to properly summarize the changes you've made and why you've made them. But the earlier in your career you can develop good committing habits, the better.
+
+Have you ever wondered how you can improve your Git commit messages? This guide outlines steps to elevate your commit messages that you can start implementing today.
+
+This article assumes you already understand basic Git workflow. If not, I suggest reading through the [Git Handbook](https://guides.github.com/introduction/git-handbook/).
+
+It is also important to note that you should follow your team's conventions first and foremost. These tips are based on suggestions based upon research and general consensus from the community. But by the end of this article you may have some implementations to suggest that may help your team's workflow.
+
+> I think git enters a whole other realm the moment you start working in teams -- there are so many cool different flows and ways that people can commit code, share code, and add code to your repo open-source or closed-source-wise. — [Scott Tolinski, Syntax.fm](https://syntax.fm/).
+
+## Why should you write better commit messages?
+
+I challenge you to open up a personal project or any repository for that matter and run `git log` to view a list of old commit messages. The vast majority of us who have run through tutorials or made quick fixes will say "Yep... I have absolutely no idea what I meant by 'Fix style' 6 months ago."
+
+Perhaps you have encountered code in a professional environment where you had no idea what it was doing or meant for. You've been left in the dark without code comments or a traceable history, and even wondering "what are the odds this will break everything if I remove this line?"
+
+### Back to the Future
+
+By writing good commits, you are simply future-proofing yourself. You could save yourself and/or coworkers hours of digging around while troubleshooting by providing that helpful description.
+
+The extra time it takes to write a thoughtful commit message as a letter to your potential future self is extremely worthwhile. On large scale projects, documentation is imperative for maintenance.
+
+Collaboration and communication are of utmost importance within engineering teams. The Git commit message is a prime example of this. I highly suggest setting up a convention for commit messages on your team if you do not already have one in place.
+
+## The Anatomy of a Commit Message
+
+#### Basic:
+
+`git commit -m `
+
+#### Detailed:
+
+`git commit -m -m <description>`
+
+
+
+## 5 Steps to Write Better Commit Messages
+
+ Let's summarize the suggested guidelines:
+
+1. Capitalization and Punctuation: Capitalize the first word and do not end in punctuation. If using Conventional Commits, remember to use all lowercase.
+2. Mood: Use imperative mood in the subject line. Example – `Add fix for dark mode toggle state`. Imperative mood gives the tone you are giving an order or request.
+3. Type of Commit: Specify the type of commit. It is recommended and can be even more beneficial to have a consistent set of words to describe your changes. Example: Bugfix, Update, Refactor, Bump, and so on. See the section on Conventional Commits below for additional information.
+4. Length: The first line should ideally be no longer than 50 characters, and the body should be restricted to 72 characters.
+5. Content: Be direct, try to eliminate filler words and phrases in these sentences (examples: though, maybe, I think, kind of). Think like a journalist.
+
+### How to Find Your Inner Journalist
+
+I never quite thought my Journalism minor would benefit my future career as a Software Engineer, but here we are!
+
+Journalists and writers ask themselves questions to ensure their article is detailed, straightforward, and answers all of the reader's questions.
+
+When writing an article they look to answer _who_, _what_, _where_, _when_, _why_ and _how._ For committing purposes, it is most important to answer the what and why for our commit messages.
+
+==To come up with thoughtful commits, consider the following:==
+
+* ==Why have I made these changes?==
+* ==What effect have my changes made?==
+* ==Why was the change needed?==
+* ==What are the changes in reference to?==
+
+Assume the reader does not understand what the commit is addressing. They may not have access to the story addressing the detailed background of the change.
+
+Don't expect the code to be self-explanatory. This is similar to the point above.
+
+It might seem obvious to you, the programmer, if you're updating something like CSS styles since it is visual. You may have intimate knowledge on why these changes were needed at the time, but it's unlikely you will recall why you did that hundreds of pull requests later.
+
+Make it clear _why_ that change was made, and note if it may be crucial for the functionality or not.
+
+==See the differences below:==
+
+1. `==git== ==commit -m== =='Add margin'==`
+2. `==git commit -m 'Add margin== ==to== ==nav items== ==to== ==prevent them== ==from== ==overlapping== ==the== ==logo'==`
+
+It is clear which of these would be more useful to future readers.
+
+Pretend you're writing an important newsworthy article. Give the headline that will sum up what happened and what is important. Then, provide further details in the body in an organized fashion.
+
+In filmmaking, it is often quoted "show, don't tell" using visuals as the communication medium compared to a verbal explanation of what is happening.
+
+In our case, "**tell**, don't \[just\] show" – though we have some visuals at our disposal such as the browser, most of the specifics come from reading the physical code.
+
+If you're a VSCode user, download the [Git Blame](https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame) extension. This is a prime example of when useful commit messages are helpful to future developers.
+
+This plugin will list the person who made the change, the date of the changes, as well as the commit message commented inline.
+
+Imagine how useful this could be in troubleshooting a bug or back-tracing changes made. Other honorable mentions to see Git historical information are [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory) and [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens).
+
+
+
+## Conventional Commits
+
+Now that we've covered basic commit structure of a good commit message, I'd like to introduce Conventional Commits to help provide some detail on creating solid commit messages.
+
+At D2iQ, we use Conventional Commit which is a great practice among engineering teams. ==Conventional Commit is a formatting convention that provides a set of rules to formulate a consistent commit message structure like so:==
+
+```fortran
+<type>[optional scope]: <description>
+
+[optional body]
+
+[optional footer(s)]
+```
+
+==The commit type can include the following:==
+
+* `==feat==` ==– a new feature is introduced with the changes==
+* `==fix==` ==– a bug fix has occurred==
+* `==chore==` ==– changes that do not relate to a fix or feature and don't modify src or test files (for example updating dependencies)==
+* `==ref====actor==` ==– refactored code that neither fixes a bug nor adds a feature==
+* `==docs==` ==– updates to documentation such as a the README or other markdown files==
+* `==style==` ==– changes that do not affect the meaning of the code, likely related to code formatting such as white-space, missing semi-colons, and so on.==
+* `==test==` ==– including new or correcting previous tests==
+* `==perf==` ==– performance improvements==
+* `==ci==` ==– continuous integration related==
+* `==build==` ==– changes that affect the build system or external dependencies==
+* `==revert==` ==– reverts a previous commit==
+
+The commit type subject line should be all lowercase with a character limit to encourage succinct descriptions.
+
+The optional commit body should be used to provide further detail that cannot fit within the character limitations of the subject line description.
+
+It is also a good location to utilize `BREAKING CHANGE: <description>` to note the reason for a breaking change within the commit.
+
+The footer is also optional. We use the footer to link the JIRA story that would be closed with these changes for example: `Closes D2IQ-<JIRA #>` .
+
+#### Full Conventional Commit Example
+
+```http
+fix: fix foo to enable bar
+
+This fixes the broken behavior of the component by doing xyz.
+
+BREAKING CHANGE
+Before this fix foo wasn't enabled at all, behavior changes from <old> to <new>
+
+Closes D2IQ-12345
+```
+
+To ensure that these committing conventions remain consistent across developers, commit message linting can be configured before changes are able to be pushed up. [Commitizen](https://commitizen-tools.github.io/commitizen/) is a great tool to enforce standards, sync up semantic versioning, along with other helpful features.
+
+To aid in adoption of these conventions, it's helpful to include guidelines for commits in a contributing or README markdown file within your projects.
+
+Conventional Commit works particularly well with semantic versioning (learn more at [SemVer.org](https://semver.org/)) where commit types can update the appropriate version to release. You can also [read more about Conventional Commits here](https://www.conventionalcommits.org/en/v1.0.0/).
+
+## Commit Message Comparisons
+
+Review the following messages and see how many of the suggested guidelines they check off in each category.
+
+#### Good
+
+* `feat: improve performance with lazy load implementation for images`
+* `chore: update npm dependency to latest version`
+* `Fix bug preventing users from submitting the subscribe form`
+* `Update incorrect client phone number within footer body per client request`
+
+#### Bad
+
+* `fixed bug on landing page`
+* `Changed style`
+* `oops`
+* `I think I fixed it this time?`
+* empty commit messages
+
+## Conclusion
+
+Writing good commit messages is an extremely beneficial skill to develop, and it helps you communicate and collaborate with your team. Commits serve as an archive of changes. They can become an ancient manuscript to help us decipher the past, and make reasoned decisions in the future.
+
+There is an existing set of agreed-upon standards we can follow, but as long as your team agrees upon a convention that is descriptive with future readers in mind, there will undoubtedly be long-term benefits.
+
+In this article, we've learned some tactics to level up our commit messages. How do you think these techniques can improve your commits?
+
+I hope you've learned something new, thanks for reading!
+
+Connect with me on Twitter [@ui\_natalie](https://twitter.com/ui%5Fnatalie).
+
+---
+
+---
+
+ Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. [Get started](https://www.freecodecamp.org/learn/)
\ No newline at end of file
diff --git a/Read Later/2023-11-21 - The Life-Changing Magic of Tidying Up Your To-Do List.md b/Read Later/2023-11-21 - The Life-Changing Magic of Tidying Up Your To-Do List.md
new file mode 100644
index 0000000..cd1d95f
--- /dev/null
+++ b/Read Later/2023-11-21 - The Life-Changing Magic of Tidying Up Your To-Do List.md
@@ -0,0 +1,55 @@
+---
+id: f5956559-3eb2-4717-93bd-3f3a2f0c5549
+title: |
+ The Life-Changing Magic of Tidying Up Your To-Do List
+status: ARCHIVED
+tags:
+ - read-later
+date_added: 2023-11-21 08:05:01
+url_omnivore: |
+ https://omnivore.app/me/https-todoist-com-inspiration-life-changing-magic-tidying-todois-18bf18e00a2
+url_original: |
+ https://todoist.com/inspiration/life-changing-magic-tidying-todoist
+---
+
+# The Life-Changing Magic of Tidying Up Your To-Do List
+
+## Notes
+
+Before you even start looking at your tasks, write down what having a neatly organized and prioritized to-do list would mean for your life. Maybe you want to run a successful business, get in shape, be more present with your family, have closer relationships with friends, or lead a more adventurous life.
+
+Find a medium that lets you truly envision the details. You can describe it in words, mind map it, draw it out, create a Pinterest board, collect YouTube videos, or brainstorm in whatever form suits you.
+
+Why do you want to get in shape? The answer might be "to have more energy and feel more confident." Why do you want to have more energy and feel more confident? Maybe the answer is "to be more fully yourself and stop worrying about what other people think of you." Ask yourself "why" 3-5 times for every item in your vision.
+## Original
+
+---
+
+## Other readers also enjoyed...
+
+
+
+## How to Vanquish Busywork and Spend More Time on What Matters
+
+These tips for improving your focus and productivity will help you avoid getting sucked into busywork.
+
+[Read more](https://todoist.com/inspiration/busywork-productivity-focus)
+* [Productivity](https://todoist.com/inspiration/category/productivity)
+
+
+
+## How to Ask to Work From Home (With Exact Scripts & Email Templates to Aid Your Negotiation)
+
+Follow these 9 steps to secure a remote work arrangement even in the most skeptical of organizations
+
+[Read more](https://todoist.com/inspiration/how-to-ask-to-work-from-home)
+* [Remote Work](https://todoist.com/inspiration/category/remote-work)
+
+
+
+## How to Complete Your Own Annual Review
+
+Reflect on work, health, finances, and more with a personal year in review
+
+[Read more](https://todoist.com/inspiration/annual-review)
+* [Goals](https://todoist.com/inspiration/category/goals)
\ No newline at end of file
diff --git a/Read Later/2023-11-21 - tbaggery - A Note About Git Commit Messages.md b/Read Later/2023-11-21 - tbaggery - A Note About Git Commit Messages.md
new file mode 100644
index 0000000..60aeae3
--- /dev/null
+++ b/Read Later/2023-11-21 - tbaggery - A Note About Git Commit Messages.md
@@ -0,0 +1,79 @@
+---
+id: 01b3b6c1-27ae-40a4-99fa-d297febc1e7c
+title: |
+ tbaggery - A Note About Git Commit Messages
+status: ARCHIVED
+tags:
+ - read-later
+date_added: 2023-11-21 11:59:10
+url_omnivore: |
+ https://omnivore.app/me/https-tbaggery-com-2008-04-19-a-note-about-git-commit-messages-h-18bf2646727
+url_original: |
+ https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html
+---
+
+# tbaggery - A Note About Git Commit Messages
+
+## Notes
+
+- Tratar de mantener el limite que muestra Treesitter
+- Utilizar la primera linea como "el asunto de un correo"
+- Escribir el cuerpo con una separación de una linea en blanco
+- Usar lenguaje imperativo, _"Fix bug"_ en vez de _"Fixes bug."_.
+## Original
+
+I want to take a moment to elaborate on what makes a well formed commit message. I think the best practices for commit message formatting is one of the little details that makes Git great. Understandably, some of the first commits to rails.git have messages of the really-long-line variety, and I want to expand on why this is a poor practice.
+
+Here’s a model Git commit message:
+
+```livecodeserver
+Capitalized, short (50 chars or less) summary
+
+More detailed explanatory text, if necessary. Wrap it to about 72
+characters or so. In some contexts, the first line is treated as the
+subject of an email and the rest of the text as the body. The blank
+line separating the summary from the body is critical (unless you omit
+the body entirely); tools like rebase can get confused if you run the
+two together.
+
+Write your commit message in the imperative: "Fix bug" and not "Fixed bug"
+or "Fixes bug." This convention matches up with commit messages generated
+by commands like git merge and git revert.
+
+Further paragraphs come after blank lines.
+
+- Bullet points are okay, too
+
+- Typically a hyphen or asterisk is used for the bullet, followed by a
+ single space, with blank lines in between, but conventions vary here
+
+- Use a hanging indent
+
+```
+
+Let’s start with a few of the reasons why wrapping your commit messages to 72 columns is a good thing.
+
+* `git log` doesn’t do any special special wrapping of the commit messages. With the default pager of `less -S`, this means your paragraphs flow far off the edge of the screen, making them difficult to read. On an 80 column terminal, if we subtract 4 columns for the indent on the left and 4 more for symmetry on the right, we’re left with 72 columns.
+* `git format-patch --stdout` converts a series of commits to a series of emails, using the messages for the message body. Good email netiquette dictates we wrap our plain text emails such that there’s room for a few levels of nested reply indicators without overflow in an 80 column terminal. (The current rails.git workflow doesn’t include email, but who knows what the future will bring.)
+
+Vim users can meet this requirement by installing my [vim-git runtime files](http://github.com/tpope/vim-git), or by simply setting the following option in your git commit message file:
+
+For Textmate, you can adjust the “Wrap Column” option under the view menu, then use `^Q` to rewrap paragraphs (be sure there’s a blank line afterwards to avoid mixing in the comments). Here’s a shell command to add 72 to the menu so you don’t have to drag to select each time:
+
+```lsl
+$ defaults write com.macromates.textmate OakWrapColumns '( 40, 72, 78 )'
+
+```
+
+More important than the mechanics of formatting the body is the practice of having a subject line. As the example indicates, you should shoot for about 50 characters (though this isn’t a hard maximum) and always, always follow it with a blank line. This first line should be a concise summary of the changes introduced by the commit; if there are any technical details that cannot be expressed in these strict size constraints, put them in the body instead. The subject line is used all over Git, oftentimes in truncated form if too long of a message was used. The following are just a handful of examples of where it ends up:
+
+* `git log --pretty=oneline` shows a terse history mapping containing the commit id and the summary
+* `git rebase --interactive` provides the summary for each commit in the editor it invokes
+* if the config option `merge.summary` is set, the summaries from all merged commits will make their way into the merge commit message
+* `git shortlog` uses summary lines in the changelog-like output it produces
+* `git format-patch`, `git send-email`, and related tools use it as the subject for emails
+* reflogs, a local history accessible with `git reflog` intended to help you recover from stupid mistakes, get a copy of the summary
+* `gitk` has a column for the summary
+* GitHub uses the summary in various places in their user interface
+
+The subject/body distinction may seem unimportant but it’s one of many subtle factors that makes Git history so much more pleasant to work with than Subversion.
\ No newline at end of file
diff --git a/Read Later/2023-12-24 - Historias de usuario - Ejemplos y plantilla - Atlassian.md b/Read Later/2023-12-24 - Historias de usuario - Ejemplos y plantilla - Atlassian.md
new file mode 100644
index 0000000..828f3af
--- /dev/null
+++ b/Read Later/2023-12-24 - Historias de usuario - Ejemplos y plantilla - Atlassian.md
@@ -0,0 +1,182 @@
+---
+id: a82f2e4b-829e-48a5-9e5c-c152860743a7
+title: |
+ Historias de usuario | Ejemplos y plantilla | Atlassian
+status: ARCHIVED
+tags:
+ - read-later
+date_added: 2023-12-24 18:35:22
+url_omnivore: |
+ https://omnivore.app/me/https-www-atlassian-com-es-agile-project-management-user-stories-18c9dc0ecd1
+url_original: |
+ https://www.atlassian.com/es/agile/project-management/user-stories
+---
+
+# Historias de usuario | Ejemplos y plantilla | Atlassian
+
+## Highlights
+
+una historia de usuario es una explicación general e informal de una función de software escrita desde la perspectiva del usuario final. Su propósito es articular cómo proporcionará una función de software valor al cliente.
+
+[source](https://omnivore.app/me/https-www-atlassian-com-es-agile-project-management-user-stories-18c9dc0ecd1#d1988eb3-4939-4bf3-b932-44aad141c065)
+
+---
+
+Las historias encajan perfectamente en marcos ágiles como [scrum](https://www.atlassian.com/es/agile/scrum) y [kanban](https://www.atlassian.com/es/agile/kanban). En el scrum, las historias de los usuarios se añaden a los sprints y se van realizando a lo largo del sprint. Los equipos de kanban incorporan las historias de usuario en su backlog y las ejecutan siguiendo su flujo de trabajo.
+
+[source](https://omnivore.app/me/https-www-atlassian-com-es-agile-project-management-user-stories-18c9dc0ecd1#3e9e29ab-43db-4c8f-b517-c2f3b8892432)
+
+---
+
+Las historias de usuario son también los componentes básicos de los marcos ágiles más grandes, como los epics y las iniciativas. Los epics son grandes elementos de trabajo divididos en un conjunto de historias, y varios epics constituyen una iniciativa.
+
+[source](https://omnivore.app/me/https-www-atlassian-com-es-agile-project-management-user-stories-18c9dc0ecd1#8f41f654-4b72-4789-b848-b46c2d185291)
+
+---
+
+## Cómo escribir historias de usuario
+
+Piensa en lo siguiente cuando escribas historias de usuario:
+
+* **Definición de “Listo”**: la historia suele estar “lista” cuando el usuario puede completar la tarea descrita, pero debes asegurarte de definir lo que representa completarla.
+* **Describe tareas o subtareas**: decide qué pasos específicos deben completarse y quién es responsable de cada uno de ellos.
+* **Perfiles de usuario**: ¿para quién? Si hay varios usuarios finales, considera crear varias historias.
+* **Pasos ordenados**: escribe una historia para cada paso en un proceso más grande.
+* **Escucha el feedback**: habla con los usuarios y capta sus problemas o necesidades en lo que dicen. No es necesario tener que estar adivinando las historias cuando puedes obtenerlas de tus clientes.
+* **Tiempo**: el tiempo es un tema delicado. Muchos equipos de desarrollo evitan hablar sobre el tiempo, y en su lugar confían en sus marcos de trabajo de estimación. Dado que las historias deberían completarse en un sprint, aquellas que puedan necesitar semanas o meses deberían dividirse en historias más pequeñas o considerarse un epic independiente.
+
+[source](https://omnivore.app/me/https-www-atlassian-com-es-agile-project-management-user-stories-18c9dc0ecd1#536ca974-d30c-4d48-a02f-a9c16c469e01)
+
+---
+
+Las historias de usuario suelen expresarse con una frase simple con la siguiente estructura:
+
+**“Como \[perfil\], \[quiero\] \[para\].”**
+
+Desglosemos esta estructura:
+
+* “Como \[perfil\]”: ¿para quién desarrollamos esto? No solo buscamos un puesto, buscamos el perfil de la persona. Max. Nuestro equipo debería comprender quién es Max. Con suerte hemos entrevistado a muchos Max. Comprendemos cómo trabaja esa persona, cómo piensa y cómo se siente. Sentimos empatía por Max.
+* “Quiere”: aquí describimos su intención, no las funciones que usan. ¿Qué es lo que están intentando lograr realmente? Esta descripción debería realizarse con independencia de las implementaciones; si describes algún elemento de la IU y no el objetivo del usuario, estás cometiendo un error.
+* “Para”: ¿cómo encaja su deseo inmediato de hacer algo en la perspectiva general? ¿Cuál es el beneficio general que intentan lograr? ¿Cuál es el gran problema que debe resolverse?
+
+[source](https://omnivore.app/me/https-www-atlassian-com-es-agile-project-management-user-stories-18c9dc0ecd1#74f6051c-6394-4c99-94c9-176857d9caf2)
+
+---
+
+## Original
+
+* [DevOps](#)
+ * [Entrega continua](https://www.atlassian.com/es/continuous-delivery)
+ * [Git](https://www.atlassian.com/es/git)
+* [Agile](https://www.atlassian.com/es/agile)
+* [Microservicios](https://www.atlassian.com/es/microservices)
+
+Las historias de usuario son tareas de desarrollo que se suelen expresar como "persona + necesidad + propósito".
+
+Resumen: _==una historia de usuario es una explicación general e informal de una función de software escrita desde la perspectiva del usuario final. Su propósito es articular cómo proporcionará una función de software valor al cliente.==_
+
+Es tentador pensar que las historias de usuario son, en pocas palabras, requisitos del sistema de software. Pero no lo son.
+
+Un componente clave del desarrollo de software ágil es poner a las personas en primer lugar, y las historias de usuarios ponen a los usuarios finales reales en el centro de la conversación. Las historias utilizan un lenguaje no técnico para ofrecer contexto al equipo de desarrollo y sus esfuerzos. Después de leer una historia de usuario, el equipo sabe por qué está compilando lo que está compilando y qué valor crea.
+
+Las historias de usuario son uno de los componentes centrales de un programa ágil. Ayudan a proporcionar un marco centrado en el usuario para el trabajo diario, lo que impulsa la colaboración y la creatividad y mejora el producto en general.
+
+## ¿Qué son las historias de usuario ágiles?
+
+Una historia de usuario es la unidad de trabajo más pequeña en un marco ágil. Es un objetivo final, no una función, expresado desde la perspectiva del usuario del software.
+
+Una historia de usuario es una explicación general e informal de una función de software escrita desde la perspectiva del usuario final o cliente.
+
+El propósito de una historia de usuario es articular cómo un elemento de trabajo entregará un valor particular al cliente. Ten en cuenta que los "clientes" no tienen por qué ser usuarios finales externos en el sentido tradicional, también pueden ser clientes internos o colegas dentro de tu organización que dependen de tu equipo.
+
+Las historias de usuario son unas pocas frases en lenguaje sencillo que describen el resultado deseado. No entran en detalles, ya que los requisitos se añaden más tarde, una vez acordados por el equipo.
+
+==Las historias encajan perfectamente en marcos ágiles como== ==[scrum](https://www.atlassian.com/es/agile/scrum)== ==y== ==[kanban](https://www.atlassian.com/es/agile/kanban)====. En el scrum, las historias de los usuarios se añaden a los sprints y se van realizando a lo largo del sprint. Los equipos de kanban incorporan las historias de usuario en su backlog y las ejecutan siguiendo su flujo de trabajo.== Es este trabajo sobre las historias de usuario lo que ayuda a los equipos de scrum a mejorar en la [estimación](https://www.atlassian.com/es/agile/project-management/estimation) y planificación de sprints, lo que conduce a un pronóstico más preciso y a una mayor agilidad. Gracias a las historias, los equipos de kanban aprenden a gestionar el trabajo en curso (WIP) y pueden perfeccionar aún más sus flujos de trabajo.
+
+==Las historias de usuario son también los componentes básicos de los marcos ágiles más grandes, como los epics y las iniciativas. Los epics son grandes elementos de trabajo divididos en un conjunto de historias, y varios epics constituyen una iniciativa.== Estas estructuras más grandes garantizan que el trabajo diario del equipo de desarrollo contribuya a los objetivos de la organización incorporados en los epics y las iniciativas.
+
+[Más información sobre epics e iniciativas](https://www.atlassian.com/es/agile/project-management/epics-stories-themes)
+
+
+
+## ¿Por qué crear historias de usuario?
+
+Para los equipos de desarrollo nuevos en la metodología ágil, las historias de usuario a veces parecen un paso más. ¿Por qué no dividir el gran proyecto ([el epic](https://www.atlassian.com/es/agile/project-management/epics)) en una serie de pasos y seguir adelante? Pero las historias dan al equipo un contexto importante y asocian las tareas con el valor que estas aportan.
+
+Las historias de usuario tienen varios beneficios clave:
+
+* **Las historias centran la atención en el usuario.** Una lista de tareas pendientes mantiene al equipo centrado en tareas que deben completarse, pero un conjunto de historias lo mantiene centrado en solucionar problemas para usuarios reales.
+* **Las historias permiten la colaboración.** Con el objetivo definido, el equipo puede colaborar para decidir cómo ofrecer un mejor servicio al usuario y cumplir con dicho objetivo.
+* **Las historias impulsan soluciones creativas.** Las historias fomentan que el equipo piense de forma crítica y creativa sobre cómo lograr mejor un objetivo.
+* **Las historias motivan.** Con cada historia el equipo de desarrollo disfruta de un pequeño reto y una pequeña victoria, lo que aumenta la motivación.
+
+## Trabajar con historias de usuario
+
+Una vez que se ha escrito una historia, es hora de integrarla en tu flujo de trabajo. Por lo general, una historia la escribe el propietario del producto, el gestor del producto o el gestor del programa, y la envía para su revisión.
+
+Durante una reunión de planificación de sprint o iteración, el equipo decide qué historias afrontará en ese sprint. Los equipos discuten los requisitos y la funcionalidad que requiere cada historia de usuario. Esta es una oportunidad para ponerse técnico y creativo en la implementación de la historia por parte del equipo. Una vez acordados, estos requisitos se añaden a la historia.
+
+Otro paso común en esta reunión es calificar las historias en función de su complejidad o tiempo hasta su finalización. Los equipos usan las tallas de las camisetas, la secuencia de Fibonacci o el Planning Poker para hacer las estimaciones adecuadas. Una historia debe ser de un tamaño que pueda completarse en un sprint; por lo tanto, cuando el equipo establezca las especificaciones de cada historia, se deben asegurar de dividir las historias que superen ese horizonte de finalización.
+
+## ==Cómo escribir historias de usuario==
+
+==Piensa en lo siguiente cuando escribas historias de usuario:==
+
+* **==Definición de “Listo”==**==: la historia suele estar “lista” cuando el usuario puede completar la tarea descrita, pero debes asegurarte de definir lo que representa completarla.==
+* **==Describe tareas o subtareas==**==: decide qué pasos específicos deben completarse y quién es responsable de cada uno de ellos.==
+* **==Perfiles de usuario==**==: ¿para quién? Si hay varios usuarios finales, considera crear varias historias.==
+* **==Pasos ordenados==**==: escribe una historia para cada paso en un proceso más grande.==
+* **==Escucha el feedback==**==: habla con los usuarios y capta sus problemas o necesidades en lo que dicen. No es necesario tener que estar adivinando las historias cuando puedes obtenerlas de tus clientes.==
+* **==Tiempo==**==: el tiempo es un tema delicado. Muchos equipos de desarrollo evitan hablar sobre el tiempo, y en su lugar confían en sus marcos de trabajo de estimación. Dado que las historias deberían completarse en un sprint, aquellas que puedan necesitar semanas o meses deberían dividirse en historias más pequeñas o considerarse un epic independiente.==
+
+Una vez que las historias de usuario estén definidas de forma clara, debes asegurarte de que todo el equipo pueda verlas.
+
+==Las historias de usuario suelen expresarse con una frase simple con la siguiente estructura:==
+
+**==“Como [perfil], [quiero] [para].”==**
+
+==Desglosemos esta estructura:==
+
+* ==“Como [perfil]”: ¿para quién desarrollamos esto? No solo buscamos un puesto, buscamos el perfil de la persona. Max. Nuestro equipo debería comprender quién es Max. Con suerte hemos entrevistado a muchos Max. Comprendemos cómo trabaja esa persona, cómo piensa y cómo se siente. Sentimos empatía por Max.==
+* ==“Quiere”: aquí describimos su intención, no las funciones que usan. ¿Qué es lo que están intentando lograr realmente? Esta descripción debería realizarse con independencia de las implementaciones; si describes algún elemento de la IU y no el objetivo del usuario, estás cometiendo un error.==
+* ==“Para”: ¿cómo encaja su deseo inmediato de hacer algo en la perspectiva general? ¿Cuál es el beneficio general que intentan lograr? ¿Cuál es el gran problema que debe resolverse?==
+
+Por ejemplo, las historias de usuario pueden tener este aspecto:
+
+* Como Max, quiero invitar a mis amigos, para que podamos disfrutar de este servicio juntos.
+* Como Sascha, quiero organizar mi trabajo, para poder sentir que tengo un mayor control.
+* Como gestor, quiero poder comprender el progreso de mis compañeros, para poder informar sobre nuestros éxitos y fallos.
+
+Esta estructura no es obligatoria, pero resulta de ayuda para establecer una definición de "hecho". Cuando ese perfil puede alcanzar su valor deseado, la historia está completa. Recomendamos a nuestros equipos definir su propia estructura, y que no se desvíen de ella.
+
+## Introducción a las historias de usuario ágiles
+
+Las historias de los usuarios describen el por qué y el qué que hay detrás del trabajo diario de los miembros del equipo de desarrollo; a menudo las historias de usuario se expresan de la siguiente manera: _perfil + necesidad + propósito_. Entender su papel como fuente de verdad para lo que el equipo está entregando, pero también el por qué, es clave para un proceso sin problemas.
+
+Empieza por evaluar el siguiente gran proyecto o el más apremiante (por ejemplo, un epic). Divídelo en historias de usuario más pequeñas y trabaja con el equipo de desarrollo para mejorarlo. Una vez que tus historias están fuera, donde todo el equipo puede verlas, ya tienes todo listo para empezar a trabajar.
+
+.jpg?cdnVersion=1373)
+
+ Max Rehkopf
+
+Como persona caótica que soy, confío en las prácticas de la metodología ágil y en los principios optimizados para poner orden en mi día a día. Me alegra compartir estas lecciones con otras personas a través de los muchos artículos, ponencias y vídeos que hago para Atlassian.
+
+
+
+tutorial
+
+#### Cómo crear historias de usuario en Jira Software
+
+Descubre cómo los equipos pueden utilizar los tiques para realizar un seguimiento del trabajo que debe completarse.
+
+[Probar el tutorial ](https://www.atlassian.com/es/agile/tutorials/issues)
+
+
+
+artículo
+
+#### ¿Qué son los puntos de historia y cómo se estiman?
+
+Conoce por dentro los secretos de la estimación ágil y los puntos de historia. Una buena estimación ágil permite a los propietarios del producto optimizar sus procesos en términos de eficiencia e impacto.
+
+[Leer el artículo ](https://www.atlassian.com/es/agile/project-management/estimation)
\ No newline at end of file
diff --git a/Read Later/2023-12-24 - ¿Qué son los puntos de historia en la metodología ágil y cómo se estiman-.md b/Read Later/2023-12-24 - ¿Qué son los puntos de historia en la metodología ágil y cómo se estiman-.md
new file mode 100644
index 0000000..d60cdec
--- /dev/null
+++ b/Read Later/2023-12-24 - ¿Qué son los puntos de historia en la metodología ágil y cómo se estiman-.md
@@ -0,0 +1,114 @@
+---
+id: 22bb5f59-fddb-4ab4-89dd-bb28fe723f4f
+title: |
+ ¿Qué son los puntos de historia en la metodología ágil y cómo se estiman?
+status: ARCHIVED
+tags:
+ - read-later
+date_added: 2023-12-24 18:36:25
+url_omnivore: |
+ https://omnivore.app/me/https-www-atlassian-com-es-agile-project-management-estimation-18c9dc1e48a
+url_original: |
+ https://www.atlassian.com/es/agile/project-management/estimation
+---
+
+# ¿Qué son los puntos de historia en la metodología ágil y cómo se estiman?
+
+## Highlights
+
+Se trata de unidades de medida que permiten expresar una estimación del esfuerzo total que deberá hacer el equipo para implementar íntegramente un elemento del backlog del producto o cualquier otro trabajo. Los equipos asignan puntos de historia en función de la complejidad y del volumen del trabajo, así como del riesgo o de la incertidumbre.
+
+[source](https://omnivore.app/me/https-www-atlassian-com-es-agile-project-management-estimation-18c9dc1e48a#4ddb962e-4ff6-44fa-8e72-b74db4a9b7a2)
+
+---
+
+## Original
+
+* [DevOps](#)
+ * [Entrega continua](https://www.atlassian.com/es/continuous-delivery)
+ * [Git](https://www.atlassian.com/es/git)
+* [Agile](https://www.atlassian.com/es/agile)
+* [Microservicios](https://www.atlassian.com/es/microservices)
+
+## Puntos de historia y estimación
+
+Una buena estimación ayuda a los propietarios de los productos a optimizar sus procesos en términos de eficiencia e impacto. Por eso es tan importante.
+
+Hacer estimaciones es complicado. Para los desarrolladores de software, es uno de los aspectos más difíciles de su trabajo, por no decir el más difícil. Conlleva tener en cuenta un montón de factores que ayudan a los propietarios de los productos a tomar decisiones que afectan a todo el equipo, así como a la empresa. Con todo eso en juego, no es de extrañar que todos, desde los desarrolladores hasta la alta dirección, tiendan a perder los estribos sobre este tema. Craso error. La estimación ágil de los puntos de historia no es más que eso, un cálculo: no es un pacto de sangre.
+
+No es obligatorio trabajar los fines de semana para compensar el tiempo de más que nos lleva un trabajo que habíamos subestimado. Dicho eso, veamos algunas maneras de realizar estimaciones con la mayor precisión posible.
+
+## Colaboración con el propietario del producto
+
+En un desarrollo ágil, el [propietario del producto](https://www.atlassian.com/es/agile/product-management) se encarga de priorizar el [backlog](https://www.atlassian.com/es/agile/scrum/backlogs), es decir, la lista ordenada de trabajo que contiene descripciones breves de todas las funciones y correcciones de un producto. Los propietarios del producto capturan los [requisitos](https://www.atlassian.com/es/agile/product-management/requirements) empresariales, pero no siempre entienden los detalles de la implementación. Por ello, una buena estimación puede informar al propietario del producto sobre el nivel de esfuerzo de cada elemento de trabajo, que a su vez sirve para evaluar la prioridad relativa de cada elemento.
+
+Cuando el equipo de ingeniería empieza su proceso de estimación, normalmente surgen preguntas sobre los requisitos y las historias de usuario. Esto es algo positivo: las preguntas ayudan a todo el equipo a entender el trabajo mejor. Específicamente en el caso de los propietarios de los productos, la división granular de los elementos de trabajo y las estimaciones les ayudan a priorizar todas las áreas del trabajo, incluidas las que pueden estar ocultas. Con las estimaciones del equipo de desarrollo en la mano, no es extraño que un propietario del producto reordene los elementos del backlog.
+
+## La estimación ágil de los puntos de historia es un trabajo en equipo
+
+Involucrar a todo el mundo (desarrolladores, diseñadores, testers, deployers... todos) en el equipo es clave. Cada miembro del equipo aporta una perspectiva diferente sobre el producto y el trabajo necesario para entregar una historia de usuario. Por ejemplo, si la gestión de productos quiere hacer algo que parece sencillo, como admitir un nuevo navegador web, el desarrollo y el control de calidad deben dar su opinión también, ya que su experiencia les ha enseñado qué dragones pueden estar al acecho bajo la superficie.
+
+Asimismo, los cambios de diseño requieren no sólo la aportación del equipo de diseño, sino también la del de desarrollo y la del de QA. Dejar a parte del equipo de producto más amplio fuera del proceso de estimación crea estimaciones de menor calidad, baja la moral porque los contribuyentes clave no se sienten incluidos y compromete la calidad del software.
+
+No dejes que tu equipo sea víctima de las estimaciones poco precisas. Es un camino seguro al fracaso.
+
+## Puntos de historia frente a horas
+
+Los equipos de software tradicionales proporcionan estimaciones en un formato de tiempo concreto: pueden ser días, semanas o meses. Sin embargo, muchos equipos ágiles han decidido pasarse a los puntos de historia. ==Se trata de unidades de medida que permiten expresar una estimación del esfuerzo total que deberá hacer el equipo para implementar íntegramente un elemento del backlog del producto o cualquier otro trabajo. Los equipos asignan puntos de historia en función de la complejidad y del volumen del trabajo, así como del riesgo o de la incertidumbre.== Los valores se asignan para desglosar el trabajo de forma más eficaz en partes más pequeñas. De esta manera, se puede gestionar la incertidumbre. Con el tiempo, esto ayuda a los equipos a ser conscientes de lo que pueden llegar a conseguir en un período de tiempo concreto y genera un sentimiento de consenso y compromiso con la solución. Aunque pueda parecer contradictorio, esta abstracción es realmente útil, ya que obliga al equipo a tomar decisiones más complejas sobre la dificultad del trabajo. A continuación, se indican algunos motivos por los cuales es recomendable utilizar puntos de historia:
+
+* Las fechas no tienen en cuenta el trabajo no relacionado con el proyecto que inevitablemente surge en nuestro día a día, como correos electrónicos, reuniones y entrevistas en las que un miembro del equipo puede participar.
+* Las fechas tienen una connotación emocional. La estimación relativa elimina este componente.
+* Cada equipo estima el trabajo en una escala ligeramente diferente, lo cual significa que su velocidad (medida en puntos) será diferente, como es natural. Asimismo, esto imposibilita que se politiquee usando la velocidad como arma.
+* Una vez que se llegue a un acuerdo sobre el esfuerzo relativo del valor de cada punto de historia, podrás asignar puntos rápidamente sin que haya lugar a demasiado debate.
+* Los puntos de historia recompensan a los miembros del equipo por resolver incidencias basándose en la dificultad, y no en el tiempo empleado. De esta forma, los miembros del equipo se mantienen centrados en entregar valor, no en el tiempo dedicado.
+
+Lamentablemente, los puntos de historia se suelen utilizar de forma incorrecta; por ejemplo, cuando se emplean para juzgar a las personas o para asignar cronogramas y recursos detallados, o bien cuando se confunden con una medida de productividad. La auténtica función de los puntos de historia es que los equipos puedan hacerse una idea del volumen de trabajo y saber qué partes tienen prioridad. Para ver un debate en profundidad sobre los puntos de historia y las prácticas relacionadas con las estimaciones, échale un vistazo a esta [mesa redonda con expertos del sector](https://community.atlassian.com/t5/Agile-articles/Six-experts-sound-off-on-story-points-the-evolution-of-agile/ba-p/1553590). Si quieres más consejos sobre la estimación ágil, sigue leyendo.
+
+[ ](https://www.youtube.com/watch?v=%5FN5gj9gzOjg)
+
+## Puntos de historia y póker de planificación
+
+Los equipos que se están iniciando en los puntos de historia usan un ejercicio llamado [Planning Poker](https://www.atlassian.com/blog/platform/a-brief-overview-of-planning-poker). En Atlassian, el Planning Poker es una práctica habitual en toda la empresa. Los miembros del equipo toman un elemento del backlog, hablan sobre él brevemente y cada uno fórmula mentalmente una estimación. A continuación, todos levantan una tarjeta con el número que refleje su estimación. Si todo el mundo está de acuerdo, ¡estupendo! De lo contrario, dedica algo de tiempo (no mucho, tan solo un par de minutos) para entender el motivo de las distintas estimaciones. Recuerda, sin embargo, que la estimación debe ser una actividad bastante general. Si el equipo se va por las ramas, respira hondo y deriva el debate a un superior.
+
+**¿Listo para intentarlo?**
+
+* Instala esta [Aplicación de póker de planificación](https://marketplace.atlassian.com/apps/1212495/planning-poker?hosting=cloud&tab=overview)
+* Obtén más información sobre el [póker de planificación](https://www.atlassian.com/blog/agile/planning-poker-sane-healthy)
+
+## Estima con mayor inteligencia, no con mayor esfuerzo
+
+Ninguna tarea individual debe superar las 16 horas de trabajo. (Si usas puntos de historia, puedes decidir que 20 puntos es el límite superior, por ejemplo). Sencillamente, es demasiado complicado estimar elementos de trabajo individuales de mayor duración con confianza. Esa confianza es especialmente importante para los elementos en la parte superior del backlog. Cuando algo se estima por encima del límite de 16 horas (o 20 puntos) del equipo, será una señal para dividirlo granularmente y volver a estimarlo.
+
+Para los elementos que se encuentren más abajo en el backlog, basta con una estimación aproximada. Cuando el equipo empiece a trabajar en esos elementos, los requisitos podrían haber cambiado y la aplicación seguramente habrá cambiado también, de modo que las estimaciones no serán tan precisas. No pierdas tiempo estimando trabajo que posiblemente cambiará. Da al propietario del producto una cifra aproximada que pueda utilizar para priorizar la hoja de ruta del producto adecuadamente.
+
+## Aprende de las estimaciones anteriores
+
+Las retrospectivas constituyen un momento para que el equipo incorpore ideas de iteraciones anteriores, incluida la precisión de sus estimaciones. Hay muchas herramientas ágiles (como [Jira Software](https://www.atlassian.com/es/software/jira)) que realizan el seguimiento de los puntos de historia, cosa que facilita en gran medida el análisis y el recalibrado de las estimaciones. Prueba, por ejemplo, a comparar las cinco últimas historias de usuario que haya entregado el equipo con un valor de 8 puntos de historia. Estudia si cada uno de estos elementos de trabajo tuvo un nivel de esfuerzo similar. Si no, analizad por qué. Utilizad esta información en los siguientes debates de estimaciones.
+
+Al igual que [el resto de los aspectos de un proceso ágil](https://www.atlassian.com/es/agile/project-management), la estimación es una cuestión de práctica. Irás mejorando con el tiempo.
+
+
+
+ Dan Radigan
+
+La metodología ágil ha influido mucho en mí, tanto en el aspecto profesional como en el personal: he aprendido que las mejores experiencias se basan en el modelo ágil, tanto al programar como en la vida real. Mis intereses suelen moverse entre la tecnología, la fotografía y el motociclismo.
+
+
+
+tutorial
+
+#### Aprender a usar diagramas de trabajo pendiente con Jira Software
+
+La guía completa sobre diagramas de evolución en Jira Software. Aprende a supervisar epics y sprints con diagramas de evolución.
+
+[Probar el tutorial ](https://www.atlassian.com/es/agile/tutorials/burndown-charts)
+
+
+
+artículo
+
+#### Cinco métricas ágiles que no odiarás
+
+¿Cómo usar métricas ágiles? Descubre las gráficas de trabajo pendiente de sprints, epics y publicaciones, los gráficos de control y velocidad, y el diagrama de flujo acumulado.
+
+[Leer el artículo ](https://www.atlassian.com/es/agile/project-management/metrics)
\ No newline at end of file
diff --git a/Read Later/2024-02-15 - React Optimization Techniques to Help You Write More Performant Code.md b/Read Later/2024-02-15 - React Optimization Techniques to Help You Write More Performant Code.md
new file mode 100644
index 0000000..c837547
--- /dev/null
+++ b/Read Later/2024-02-15 - React Optimization Techniques to Help You Write More Performant Code.md
@@ -0,0 +1,764 @@
+---
+id: c4ab379e-cc84-11ee-b3d0-afc69cc1061d
+title: |
+ React Optimization Techniques to Help You Write More Performant Code
+status: ARCHIVED
+tags:
+ - read-later
+ - RSS
+date_added: 2024-02-15 21:57:28
+url_omnivore: |
+ https://omnivore.app/me/react-optimization-techniques-to-help-you-write-more-performant--18db03268c2
+url_original: |
+ https://www.freecodecamp.org/news/react-performance-optimization-techniques/
+---
+
+# React Optimization Techniques to Help You Write More Performant Code
+
+## Highlights
+
+List visualization, or windowing, involves rendering only the items currently visible on the screen.
+
+[source](https://omnivore.app/me/react-optimization-techniques-to-help-you-write-more-performant--18db03268c2#9fb355ed-811d-44e7-aa61-12c0b18db7e2)
+
+---
+
+Lazy loading allows you to defer or delay the loading of images until they are needed or visible to the user instead of loading all the images on page load.
+
+[source](https://omnivore.app/me/react-optimization-techniques-to-help-you-write-more-performant--18db03268c2#f9c0a23a-9d66-4a80-bb4c-a4f2806ed1aa)
+
+---
+
+Another approach is to use the [intersection observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection%5FObserver%5FAPI), which is a web API that allows you to detect when an element enters or exists the viewport efficiently.
+
+[source](https://omnivore.app/me/react-optimization-techniques-to-help-you-write-more-performant--18db03268c2#a44706c9-5cce-4765-ac78-77efdca40a30)
+
+---
+
+Memoization in React is a technique used to optimize the performance of functional components by caching the results of expensive computations or function calls. It's particularly useful when dealing with computationally intensive or frequently called functions with the same input values, as it helps avoid redundant calculations and improves the overall efficiency of the application.
+
+[source](https://omnivore.app/me/react-optimization-techniques-to-help-you-write-more-performant--18db03268c2#051f1544-65d2-4eae-87c6-bb7f226c4fa7)
+
+---
+
+Below is an example on how to use the `React.memo` with a functional component:
+
+```javascript
+import React from 'react';
+
+const Post = ({ signedIn, post }) => {
+ console.log('Rendering Post');
+ return (
+
+ {post.title}
+ {post.content}
+ {signedIn && Edit Post}
+
+ );
+};
+
+export default React.memo(Post);
+
+```
+
+In the code above, `Post` (functional component) depends on the `signedIn` and `post` props. By wrapping it with `React.memo()`, React will only re-render the `Post` component if either `signedIn` or `post` changes.
+
+> [!note]
+> You can memoize complete components to prevent re-renders if the props doesn't change, this use `React.memo()`, not the `useMemo()` hook
+
+[source](https://omnivore.app/me/react-optimization-techniques-to-help-you-write-more-performant--18db03268c2#f0735f25-7bdf-4562-84cb-6f93f3a0b5a6)
+
+---
+
+The `useMemo()` hook optimizes performance by memoizing the result of a function call or an expensive computation. It caches the result and recalculates it only when the input values change.
+
+[source](https://omnivore.app/me/react-optimization-techniques-to-help-you-write-more-performant--18db03268c2#360c5717-251f-40d7-9dd8-24bccb26a59b)
+
+---
+
+The `useCallback()` hook in React is used to memoize a function instead of memoizing the function result. It is particularly useful when passing events as props to child components to prevent unnecessary re-renders.
+
+`useCallback()` memoizes the function, ensuring it remains the same across re-renders as long as the dependencies haven't changed.
+
+This is especially beneficial when passing functions as props to child components, preventing unnecessary re-renders.
+
+[source](https://omnivore.app/me/react-optimization-techniques-to-help-you-write-more-performant--18db03268c2#c01f0766-7401-44ae-9888-ee1da6d10ca7)
+
+---
+
+It's important to note that `useCallback` should be used sparingly and only for performance-critical parts of your application. Overusing `useCallback` can actually lead to worse performance due to the overhead of memoization itself. Always measure the performance impact before and after using `useCallback` to ensure it's having the desired effect.
+
+[source](https://omnivore.app/me/react-optimization-techniques-to-help-you-write-more-performant--18db03268c2#4292a582-b6cb-44e9-baff-3be6a127ed14)
+
+---
+
+Throttling in React is a technique used to limit the number of times a function or an event handler is invoked. It ensures that the function is called at a specified interval, preventing it from being executed too frequently.
+
+[source](https://omnivore.app/me/react-optimization-techniques-to-help-you-write-more-performant--18db03268c2#5e73fc50-7717-449d-a27f-f3bb87fd100f)
+
+---
+
+Debouncing, on the other hand, is also used to limit the number of times a function or an event handler is invoked. It ensures that the function is called only after a certain period of inactivity. Debouncing allows you to postpone the function call until the user has finished typing or a specific time has elapsed since the last event.
+
+[source](https://omnivore.app/me/react-optimization-techniques-to-help-you-write-more-performant--18db03268c2#2926578f-0a36-4acc-8c03-5d740981bb04)
+
+---
+
+// Debounce function to delay the searchAPI call const debounce = (func, delay) => {let timeoutId;return function (...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() \=> { func(...args); }, delay); }; };
+
+[source](https://omnivore.app/me/react-optimization-techniques-to-help-you-write-more-performant--18db03268c2#131255d3-029e-43c9-8c5e-0489e786e425)
+
+---
+
+Code splitting in React is a technique used to split a large JavaScript bundle into smaller, manageable chunks. It helps improve performance by loading only the necessary code for a specific part of an application rather than loading the entire bundle upfront.
+
+[source](https://omnivore.app/me/react-optimization-techniques-to-help-you-write-more-performant--18db03268c2#9f66f0bf-2185-499a-a4f1-591e5af60182)
+
+---
+
+In this example, `AsyncComponent` is a component that uses `lazy` and `Suspense` to perform code splitting. The `DynamicComponent` is dynamically imported using the import() syntax.
+
+[source](https://omnivore.app/me/react-optimization-techniques-to-help-you-write-more-performant--18db03268c2#aff44dd9-50f2-4ad2-8f93-d52e6ab0988d)
+
+---
+
+Web Workers serve as a solution to alleviate the burden on the main thread. They allow the execution of scripts in the background on a separate thread, distinct from the main JavaScript thread.
+
+[source](https://omnivore.app/me/react-optimization-techniques-to-help-you-write-more-performant--18db03268c2#16416227-0870-4503-a67d-76418223953a)
+
+---
+
+The `useTransition` hook in React plays a pivotal role in improving the performance of applications by allowing the marking of state updates as non-blocking transitions. This capability enables React to defer rendering for these updates, preventing UI blocking and enhancing overall responsiveness.
+
+[source](https://omnivore.app/me/react-optimization-techniques-to-help-you-write-more-performant--18db03268c2#0622edf4-fa98-4848-aeee-174fa1cbde22)
+
+---
+
+## Original
+
+
+
+Performance optimization is a critical aspect of developing web applications. Users expect applications to load quickly and respond to their interactions smoothly.
+
+In the React ecosystem, performance optimization techniques can significantly enhance the user experience by reducing load times and improving responsiveness.
+
+In this article, we will discuss eight effective techniques for optimizing the performance of your React application.
+
+## Table of Contents
+
+1. [Why Performance Optimization is Important](#why-performance-optimization-is-important)
+2. [List visualization](#list-visualization)
+3. [Lazy Loading Images](#lazy-loading-images)
+4. [Memoization](#memoization)
+5. [Throttling and Debouncing Events](#throttling-and-debouncing-events)
+6. [Code Splitting](#code-splitting)
+7. [React Fragments](#react-fragments)
+8. [Web Workers](#web-workers)
+9. [UseTransition Hook](#usetransition-hook)
+10. [Conclusion](#conclusion)
+
+## Why Performance Optimization is Important
+
+Optimizing the performance of your React application is crucial for several reasons:
+
+* **Better User Experience:** A slow-loading or laggy application can lead to a poor user experience, negatively impacting your business. Users expect fast and responsive interactions, and performance optimization helps deliver that.
+* **Improved SEO:** Search engines like Google consider page load times and overall performance when ranking websites. A well-optimized application will rank higher in search results, making it more visible to potential users.
+* **Reduced Bounce Rates:** If your application takes too long to load or respond, users will likely leave and never return. By optimizing performance, you can reduce bounce rates and increase engagement.
+* **Cost Savings** A performant application requires fewer resources (like servers and memory) to handle the same workload. This means lower hosting costs and reduced infrastructure needs.
+* **Competitive Advantage:** A fast and efficient application sets you apart from competitors whose applications may be slower or less optimized. According to research by [Portent](https://www.portent.com/blog/analytics/research-site-speed-hurting-everyones-revenue.htm), a website that loads within one second has a conversion rate five times higher than a site that takes ten seconds to load. Therefore, ensuring your React applications perform well is crucial for retaining users and maintaining a competitive edge.
+
+## 8 React Performance Optimization Techniques
+
+Below are eight React performance optimization techniques you can use to speed up your applications.
+
+### List visualization
+
+==List visualization, or windowing, involves rendering only the items currently visible on the screen.==
+
+When dealing with a large number of items in a list, rendering all the items at once can lead to slow performance and consume a significant amount of memory. List virtualization tackles this issue by rendering only a subset of the list items currently visible within the view, which conserves resources as the users scroll through the list.
+
+The virtualization technique dynamically replaces rendered items with new ones, keeping the visible portion of the list updated and responsive. It efficiently allows you to render large lists or tabular data by only rendering the visible portion, recycling components as needed, and optimizing scroll performance.
+
+There are different approaches to implementing list visualization in React, and one is using a popular library called [React Virtualized](https://www.npmjs.com/package/react-virtualized).
+
+To install `react-virtualized`, you can use the following command:
+
+```sql
+npm install react-virtualized --save
+```
+
+After installing `react-virtualized`, you can import the required components and styles. Below is an example of how to use the `List` component to create a virtualized list:
+
+```javascript
+import React from 'react';
+import { List } from 'react-virtualized';
+import 'react-virtualized/styles.css'; // Import styles
+
+// Your list data
+const list = Array(5000).fill().map((_, index) => ({
+ id: index,
+ name: `Item ${index}`
+}));
+
+// Function to render each row
+function rowRenderer({ index, key, style }) {
+ return (
+ <div key={key} style={style}>
+ {list[index].name}
+ </div>
+ );
+}
+
+// Main component
+function MyVirtualizedList() {
+ return (
+ <List
+ width={300}
+ height={300}
+ rowCount={list.length}
+ rowHeight={20}
+ rowRenderer={rowRenderer}
+ />
+ );
+}
+
+export default MyVirtualizedList;
+
+```
+
+In this example, `List` is the main component provided by `react-virtualized`. The `rowRenderer` function defines how each row should be rendered. The `width`, `height`, `rowCount`, `rowHeight`, and `rowRenderer` props are essential for configuring the list's behavior and appearance.
+
+React applications can handle massive amounts of data by leveraging list virtualization without sacrificing performance or user experience.
+
+### Lazy Loading Images
+
+Similar to the list virtualization technique, lazy loading images prevents the creation of unnecessary DOM nodes, thereby boosting performance. Lazy loading allows you to defer or delay the loading of images until they are needed or visible to the user instead of loading all the images on page load.
+
+The concept behind lazy loading is to initiate the load of a placeholder or a small low-resolution version of the image, typically a small-sized thumbnail or a blurred placeholder. As the user scrolls or interacts with the page, the actual image is loaded dynamically, replacing the placeholder when the user enters the viewport or when it becomes visible.
+
+Lazy loading in React can be achieved using various libraries and techniques. One of the popular libraries is the [react-lazyload](https://www.npmjs.com/package/react-lazyload).
+
+To install `react-lazyload`, you can use the following command:
+
+```sql
+npm install --save react-lazyload
+```
+
+Below is an example of a simple React component that uses `react-lazyload` to implement lazy loading for images:
+
+```javascript
+import React from 'react';
+import LazyLoad from 'react-lazyload';
+
+const MyLazyLoadedImage = ({ src, alt }) => {
+ return (
+ <LazyLoad height={200} offset={100}>
+ {/* The height and offset props control when the image should start loading */}
+ <img src={src} alt={alt} />
+ </LazyLoad>
+ );
+};
+
+export default MyLazyLoadedImage;
+
+```
+
+In this example, `MyLazyLoadedImage` uses the `LazyLoad` component from `react-lazyload`. The `height` prop specifies the height of the placeholder, and the `offset` prop determines how far below the viewport the placeholder should start loading.
+
+==Another approach is to use the== ==[intersection observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection%5FObserver%5FAPI)====, which is a web API that allows you to detect when an element enters or exists the viewport efficiently.== Here's how we can use the Intersection Observer API along with the `useEffect` hook in React:
+
+```javascript
+import React, { useEffect, useRef } from 'react';
+
+const IntersectionLazyLoad = ({ src, alt }) => {
+ const imageRef = useRef();
+
+ useEffect(() => {
+ const options = {
+ root: null, // Use the viewport as the root
+ rootMargin: '0px', // No margin around the root
+ threshold: 0.5, // 50% of the image should be visible
+ };
+
+ const observer = new IntersectionObserver(handleIntersection, options);
+
+ if (imageRef.current) {
+ observer.observe(imageRef.current);
+ }
+
+ return () => {
+ // Cleanup the observer when the component is unmounted
+ observer.disconnect();
+ };
+ }, []);
+
+ const handleIntersection = (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ // Load the image when it becomes visible
+ imageRef.current.src = src;
+ imageRef.current.alt = alt;
+ }
+ });
+ };
+
+ return <img ref={imageRef} style={{ height: '200px' }} alt="Placeholder" />;
+};
+
+export default IntersectionLazyLoad;
+
+```
+
+In this example, `IntersectionLazyLoad` uses the Intersection Observer API to determine when the image becomes visible in the viewport.
+
+By utilizing this API along with React `useEffect` hook, you can implement your custom lazy loading solution for images in React.
+
+### Memoization
+
+Memoization in React is a technique used to optimize the performance of functional components by caching the results of expensive computations or function calls. It's particularly useful when dealing with computationally intensive or frequently called functions with the same input values, as it helps avoid redundant calculations and improves the overall efficiency of the application.
+
+In React, there are three techniques for memoization: `React.memo()`, `useMemo(),` and `useCallback().` Let's delve into the details for each:
+
+#### How to use `React.memo()`
+
+This higher-order component wraps purely functional components to prevent re-rendering if the received props remain unchanged.
+
+By using `React.memo()`, the rendering result is cached based on props. If the props haven't changed since the last render, React reuses the previously rendered result instead of redoing the rendering process. This saves time and resources.
+
+==Below is an example on how to use the== `==React====.====memo==` ==with a functional component:==
+
+```javascript
+import React from 'react';
+
+const Post = ({ signedIn, post }) => {
+ console.log('Rendering Post');
+ return (
+ <div>
+ <h2>{post.title}</h2>
+ <p>{post.content}</p>
+ {signedIn && <button>Edit Post</button>}
+ </div>
+ );
+};
+
+export default React.memo(Post);
+
+```
+
+==In the code above,== `==Post==` ==(functional component) depends on the== `==signedIn==` ==and== `==post==` ==props. By wrapping it with== `==React====.====memo====()==`==, React will only re-render the== `==Post==` ==component if either== `==signedIn==` ==or== `==post==` ==changes.==
+
+You can now use the memoized component like any other component in your application:
+
+```javascript
+import React, { useState } from 'react';
+import Post from './Post';
+
+const App = () => {
+ const [signedIn, setSignedIn] = useState(false);
+ const post = { title: 'Hello World', content: 'Welcome to my blog!' };
+
+ return (
+ <div>
+ <Post signedIn={signedIn} post={post} />
+ <button onClick={() => setSignedIn(!signedIn)}>
+ Toggle Signed In
+ </button>
+ </div>
+ );
+};
+
+export default App;
+
+```
+
+When you click the `Toggle Signed In` button, it will toggle the `signedIn` state. Since `Post` is wrapped with `React.memo()`, it will only re-render when the `signedIn` prop changes, thus saving rendering time and resources
+
+#### How to use `useMemo()`
+
+The `useMemo()` hook optimizes performance by memoizing the result of a function call or an expensive computation. It caches the result and recalculates it only when the input values change. Below is an example on how to use the `useMemo` hook in functional component:
+
+```javascript
+import React, { useMemo } from 'react';
+
+function App() {
+ const [count, setCount] = React.useState(0);
+ const [otherState, setOtherState] = React.useState('');
+
+ const expensiveComputation = (num) => {
+ let i = 0;
+ while (i < 1000000000) i++;
+ return num * num;
+ };
+
+ const memoizedValue = useMemo(() => expensiveComputation(count), [count]);
+
+ return (
+ <div>
+ <p>Count: {count}</p>
+ <p>Square: {memoizedValue}</p>
+ <button onClick={() => setCount(count + 1)}>Increase Count</button>
+ <input type="text" onChange={(e) => setOtherState(e.target.value)} />
+ </div>
+ );
+}
+
+export default App;
+
+```
+
+In the code above, the `expensiveComputation` function simulates a resource-intensive operation, like squaring a number.
+
+The `useMemo` hook is utilized to cache the result of this computation. The memoized value, stored in `memoizedValue`, is only recalculated when the `count` state changes, as `count` is specified as a dependency in the `useMemo` dependency array. Consequently, clicking the `Increase Count` button increments the `count` state, triggering a recalculation of the memoized value.
+
+Conversely, changing the `otherState` via the input field does not prompt a recalculation, as `otherState` is not included in the `useMemo` dependency array.
+
+#### How to use `useCallback()`
+
+The `useCallback()` hook in React is used to memoize a function instead of memoizing the function result. It is particularly useful when passing events as props to child components to prevent unnecessary re-renders.
+
+`useCallback()` memoizes the function, ensuring it remains the same across re-renders as long as the dependencies haven't changed.
+
+This is especially beneficial when passing functions as props to child components, preventing unnecessary re-renders. It is often used with `React.memo()` to ensure child components do not re-render when unnecessary. Below is an exmple of how to use the `useCallback()` hook:
+
+```javascript
+import React, { useState, useCallback } from 'react';
+
+const ParentComponent = () => {
+ const [count, setCount] = useState(0);
+
+ // Define a function that increments the count state
+ const incrementCount = () => {
+ setCount(count + 1);
+ };
+
+ // Memoize the incrementCount function using useCallback
+ const memoizedIncrement = useCallback(incrementCount, [count]);
+
+ return (
+ <div>
+ <p>Count: {count}</p>
+ <ChildComponent onIncrement={memoizedIncrement} />
+ </div>
+ );
+};
+
+const ChildComponent = React.memo(({ onIncrement }) => {
+ console.log('Child component rendered');
+ return (
+ <div>
+ <button onClick={onIncrement}>Increment Count</button>
+ </div>
+ );
+});
+
+export default ParentComponent;
+
+```
+
+In the code above, the `ParentComponent` is responsible for managing a state variable named `count` and introduces a function called `incrementCount`, which handles the incrementation of the count. Utilizing the `useCallback` hook, the `incrementCount` function is memoized, guaranteeing its stability across renders unless any of its dependencies, in this case, `count`, undergo changes.
+
+On the other hand, the `ChildComponent` is a component nested within the parent. It receives the memoized `onIncrement` function from the parent as a prop.
+
+To optimize performance and prevent unnecessary re-renders when the props remain constant, the `ChildComponent` is wrapped with `React.memo()`. This ensures that the child component will only re-render when its props, specifically the memoized function, experience changes, contributing to a more efficient rendering process.
+
+==It's important to note that== `==useCallback==` ==should be used sparingly and only for performance-critical parts of your application. Overusing== `==useCallback==` ==can actually lead to worse performance due to the overhead of memoization itself. Always measure the performance impact before and after using== `==useCallback==` ==to ensure it's having the desired effect.==
+
+### Throttling and Debouncing Events
+
+Throttling in React is a technique used to limit the number of times a function or an event handler is invoked. It ensures that the function is called at a specified interval, preventing it from being executed too frequently.
+
+Throttling allows you to control the rate at which the function is called by setting up a minimum time interval between each function invocation. If the function is called multiple times within that interval, only the first invocation is executed, and subsequent invocations are ignored until the interval elapses
+
+Now, let's illustrate throttling with a code example. First, without t==hrottling:==
+
+```javascript
+// Without throttling, this function will be called every time the event is triggered
+function handleResize() {
+ console.log('Window resized');
+}
+
+window.addEventListener('resize', handleResize);
+
+```
+
+==With throttling, we can limit how often the== `==handleResize==` ==function is called:==
+
+```actionscript
+// Throttling function
+function throttle(func, delay) {
+ let lastCall = 0;
+ return function(...args) {
+ const now = new Date().getTime();
+ if (now - lastCall < delay) {
+ return;
+ }
+ lastCall = now;
+ func(...args);
+ };
+}
+
+// Throttled event handler
+const throttledHandleResize = throttle(handleResize, 200);
+
+window.addEventListener('resize', throttledHandleResize)
+
+```
+
+In this example, the `throttle` function wraps `handleResize` and ensures it's not called more often than every 200 milliseconds. If the `resize` event fires more frequently than that, the `handleResize` function will only be executed once every 200 milliseconds, reducing the potential for performance issues caused by rapid, repeated function calls
+
+==Debouncing, on the other hand, is also used to limit the number of times a function or an event handler is invoked. It ensures that the function is called only after a certain period of inactivity. Debouncing allows you to postpone the function call until the user has finished typing or a specific time has elapsed since the last event.==
+
+For example, imagine you have a search input field and want to trigger a search API request only when the user has finished typing for a certain duration, like `300ms`.
+
+With debouncing, the search function will only be invoked after the user stops typing for` 300ms`. If the user continues typing within that interval, the function call will be delayed until the pause occurs. Without debouncing, the function will be called for every keystroke, potentially leading to excessive function calls and unnecessary computation. let's demonstrate with a code example:
+
+```javascript
+import React, { useState, useEffect } from 'react';
+
+const SearchComponent = () => {
+ const [searchTerm, setSearchTerm] = useState('');
+
+ // Function to simulate a search API request
+ const searchAPI = (query) => {
+ console.log(`Searching for: ${query}`);
+ // In a real application, you would make an API request here
+ };
+
+ // Debounce function to delay the searchAPI call
+ const debounce = (func, delay) => {
+ let timeoutId;
+ return function (...args) {
+ clearTimeout(timeoutId);
+ timeoutId = setTimeout(() => {
+ func(...args);
+ }, delay);
+ };
+ };
+
+ // Debounced search function
+ const debouncedSearch = debounce(searchAPI, 300);
+
+ // useEffect to watch for changes in searchTerm and trigger debouncedSearch
+ useEffect(() => {
+ debouncedSearch(searchTerm);
+ }, [searchTerm, debouncedSearch]);
+
+ // Event handler for the search input
+ const handleSearchChange = (event) => {
+ setSearchTerm(event.target.value);
+ };
+
+ return (
+ <div>
+ <label htmlFor="search">Search:</label>
+ <input
+ type="text"
+ id="search"
+ value={searchTerm}
+ onChange={handleSearchChange}
+ placeholder="Type to search..."
+ />
+ </div>
+ );
+};
+
+export default SearchComponent;
+
+```
+
+With this setup, the `searchAPI` function will only be invoked after the user stops typing for 300ms, preventing excessive API requests and improving the overall performance of the search functionality.
+
+### Code Splitting
+
+Code splitting in React is a technique used to split a large JavaScript bundle into smaller, manageable chunks. It helps improve performance by loading only the necessary code for a specific part of an application rather than loading the entire bundle upfront.
+
+When you develop a new React application, all your JavaScript code is typically bundled together into a single file. This file contains all the components, libraries, and other code required for your application to function. But as your application grows, the bundle size can become quite large, resulting in slow initial load times for your users.
+
+Code splitting ==allows you to divide a single bundle into multiple chunks, which can be loaded selectively based on the current needs of your application. Instead of downloading the entire bundle upfront,== only the necessary code is fetched and executed when a user visits a particular page or triggers a specific action.
+
+Below is a basic example of code splitting:
+
+```javascript
+// AsyncComponent.js
+import React, { lazy, Suspense } from 'react';
+
+const DynamicComponent = lazy(() => import('./DynamicComponent'));
+
+const AsyncComponent = () => (
+ <Suspense fallback={<div>Loading...</div>}>
+ <DynamicComponent />
+ </Suspense>
+);
+
+export default AsyncComponent;
+
+
+// DynamicComponent.js
+import React from 'react';
+
+const DynamicComponent = () => (
+ <div>
+ <p>This is a dynamically loaded component!</p>
+ </div>
+);
+
+export default DynamicComponent;
+
+```
+
+==In this example,== `==AsyncComponent==` ==is a component that uses== `==lazy==` ==and== `==Suspense==` ==to perform code splitting. The== `==DynamicComponent==` ==is dynamically imported using the import() syntax.==
+
+When `AsyncComponent` is rendered, React will load `DynamicComponent` only when it is needed, reducing the initial bundle size and improving the application's performance. The fallback prop in Suspense specifies what to render while waiting for the dynamic import to resolve, providing a better user experience during the loading process.
+
+### React Fragments
+
+React Fragments are a feature introduced in [React 16.2](https://legacy.reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html) that allows you to group multiple elements together without adding an additional DOM node. This is particularly useful when you need to return multiple elements from a component's render method, but you don't want to introduce unnecessary DOM elements that could affect the layout or styles of your application.
+
+Imagine you are arranging books on a bookshelf. Each book represents a React component, and the bookshelf represents the DOM.
+
+Normally, if you have multiple books, you might want to group them together under a category label (analogous to a DOM element like a `<div>`). But sometimes you just want to place the books side by side without a label because the label itself doesn't hold any value and only takes up physical space.
+
+React Fragments are like the option to arrange the books without a label, saving space and making the arrangement cleaner.
+
+Here's an example of how to utilize React fragments:
+
+```actionscript
+import React from 'react';
+
+function BookShelf() {
+ return (
+ <>
+ <Book title="React for Beginners" />
+ <Book title="Mastering Redux" />
+ <Book title="JavaScript Essentials" />
+ </>
+ );
+}
+
+function Book({ title }) {
+ return <li>{title}</li>;
+}
+
+export default BookShelf;
+
+```
+
+In this example, the `BookShelf` component returns a list of `Book` components without wrapping them in a `<div>` or other unnecessary DOM element. Instead, it uses the `<>` shorthand syntax for React Fragments.
+
+This results in a cleaner DOM structure, which can improve the performance of your React application by reducing the number of elements that the browser has to process and render. Using fragments can also reduce unnecessary markup and contribute to a cleaner and more efficient render tree.
+
+### Web Workers
+
+JavaScript operates as a single-threaded application designed to handle synchronous tasks.
+
+When a web page is being rendered, JavaScript executes multiple tasks, including manipulating DOM elements, managing UI interactions, handling API response data, and enabling CSS animations, all within a single thread. Despite its efficiency in managing these tasks, executing them in a single thread can sometimes lead to performance bottlenecks.
+
+==Web Workers serve as a solution to alleviate the burden on the main thread. They allow the execution of scripts in the background on a separate thread, distinct from the main JavaScript thread.==
+
+This separation enables the handling of computationally intensive tasks, execution of long-running operations, or management of tasks that might otherwise block the main thread. By doing so, Web Workers contribute to maintaining user interface responsiveness and overall application performance.
+
+To use web worker in React, create a new JavaScript file that will contain the code for the worker thread:
+
+```php
+// worker.js
+self.onmessage = function(event) {
+ var input = event.data;
+ var result = performHeavyComputation(input);
+ postMessage(result);
+};
+
+function performHeavyComputation(input) {
+ // Insert your heavy computation logic here
+ return input * 2; // Just a placeholder operation
+}
+
+```
+
+In your React component, instantiate the Web Worker and establish a communication channel with it:
+
+```javascript
+import React, { useEffect, useRef } from 'react';
+
+function MyComponent() {
+ const workerRef = useRef();
+
+ useEffect(() => {
+ // Initialize the worker
+ workerRef.current = new Worker('path-to-your-worker-file.js');
+
+ // Handle incoming messages from the worker
+ workerRef.current.onmessage = (event) => {
+ console.log('Message received from worker:', event.data);
+ };
+
+ // Cleanup the worker when the component unmounts
+ return () => {
+ workerRef.current.terminate();
+ };
+ }, []);
+
+ // Function to send a message to the worker
+ const sendMessageToWorker = (message) => {
+ workerRef.current.postMessage(message);
+ };
+
+ // Rest of your component
+ return (
+ // ...
+ );
+}
+
+
+```
+
+In this example, a Web Worker is initialized in the `useEffect` hook and stored in a ref for future use. Messages from the worker are handled with an `onmessage` event listener, and the worker is terminated when the component is unmounted to clean up resources. The `sendMessageToWorker` function demonstrates how to communicate with the worker using `postMessage`
+
+### UseTransition Hook
+
+==The== `==useTransition==` ==hook in React plays a pivotal role in improving the performance of applications by allowing the marking of state updates as non-blocking transitions. This capability enables React to defer rendering for these updates, preventing UI blocking and enhancing overall responsiveness.==
+
+When utilizing `useTransition,` state updates within the `startTransition` function are treated as low-priority transitions, susceptible to interruption by higher-priority state updates. So if a high-priority update occurs during a transition, React may prioritize finishing the high-priority update, interrupting the ongoing transition.
+
+This non-blocking transition mechanism is valuable in preventing UI blocking during intensive operations such as data fetching or large-scale updates. By deferring the rendering of components associated with transition updates, React ensures that the user interface remains responsive even in scenarios where the UI might otherwise become unresponsive.
+
+This example demonstrates the use of `useTransition` in a React component:
+
+```javascript
+import React, { useState, useTransition } from 'react';
+
+function MyComponent() {
+ const [state, setState] = useState(initialState);
+ const [isPending, startTransition] = useTransition();
+
+ function handleClick() {
+ startTransition(() => {
+ setState(newState); // This state update is marked as a transition
+ });
+ }
+
+ return (
+ <>
+ {/* Your component JSX */}
+ <button onClick={handleClick}>Update State</button>
+ {isPending && <div>Loading...</div>}
+ </>
+ );
+}
+
+```
+
+This example showcases how React avoids blocking the UI during transitions triggered by user actions, allowing for interruption if higher-priority state updates are detected.
+
+Note that `useTransition` is part of the Concurrent Mode API, introduced in React 18 and later versions. As a powerful tool for altering the default behavior of state updates, make sure you use it with care, considering the specific implications of deferring rendering within the context of your application.
+
+## Conclusion
+
+Optimizing the performance of a React application involves a combination of strategies, from the fundamental understanding of React's diffing algorithm to leveraging built-in features and third-party tools.
+
+By applying these techniques judiciously, you can create applications that are not only visually appealing but also performant, leading to a better overall user experience.
+
+---
+
+---
+
+ Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. [Get started](https://www.freecodecamp.org/learn/)
\ No newline at end of file
diff --git a/notes/Devlog.md b/notes/Devlog.md
new file mode 100644
index 0000000..e076776
--- /dev/null
+++ b/notes/Devlog.md
@@ -0,0 +1,13 @@
+---
+id: 1ba323c1-27df-476a-b9d3-0ae7d9aaf785
+created: 2024-02-05 22:06
+updated: 2024-02-18 15:29
+---
+# Devlog
+
+## ¿Cómo hacer un devlog?
+
+- En la intro, copiar y pegar la parte relevante de un changelog de un proyecto.
+- Comentar sobre los items del changelog.
+- Hablar sobre dificultades y como se solucionaron.
+-
\ No newline at end of file
diff --git a/notes/North Start.md b/notes/North Start.md
new file mode 100644
index 0000000..bea7fe3
--- /dev/null
+++ b/notes/North Start.md
@@ -0,0 +1,5 @@
+---
+id: f53141c4-41ee-4c32-af29-f5a50a8b1d8a
+created: 2024-02-02 19:51
+updated: 2024-02-02 19:51
+---
diff --git a/notes/asd.md b/notes/asd.md
new file mode 100644
index 0000000..2c3682e
--- /dev/null
+++ b/notes/asd.md
@@ -0,0 +1,5 @@
+---
+id: 2c121cd7-baa1-438d-ae34-fb9c65a40313
+created: 2024-02-09 21:04
+updated: 2024-02-18 15:29
+---
diff --git a/templates/Next Steps.md b/templates/Next Steps.md
new file mode 100644
index 0000000..819cacb
--- /dev/null
+++ b/templates/Next Steps.md
@@ -0,0 +1,7 @@
+
+---
+
+## Next Steps
+
+- [ ] task 1
+- [ ] task 2
\ No newline at end of file
diff --git a/templates/monthly.md b/templates/monthly.md
new file mode 100644
index 0000000..e69de29
diff --git a/templates/quaterly.md b/templates/quaterly.md
new file mode 100644
index 0000000..e69de29
diff --git a/templates/weekly.md b/templates/weekly.md
new file mode 100644
index 0000000..e69de29
diff --git a/templates/yearly.md b/templates/yearly.md
new file mode 100644
index 0000000..e69de29
diff --git a/01. Projects/.gitkeep b/01. Projects/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/01. Projects/Electronic Mantainance/.gitignore b/01. Projects/Electronic Mantainance/.gitignore
new file mode 100644
index 0000000..e69de29
diff --git a/01. Projects/Electronic Mantainance/List of electronics.md b/01. Projects/Electronic Mantainance/List of electronics.md
new file mode 100644
index 0000000..cc3ef18
--- /dev/null
+++ b/01. Projects/Electronic Mantainance/List of electronics.md
@@ -0,0 +1,16 @@
+---
+created: 2024-02-10T17:55:28-03:00
+modified: 2024-02-10T17:56:55-03:00
+type: Checklist
+updated: 2024-02-18 15:29
+---
+
+# List of electronics
+
+- [ ] Sofle Keyboard
+- [x] Keychrone Keyboard
+- [x] Switch
+- [ ] PlayStation 4
+- [x] Notebook
+- [ ] 8Bitdo
+- [x] Tarro
diff --git a/01. Projects/Escape Latam/Canada.md b/01. Projects/Escape Latam/Canada.md
new file mode 100644
index 0000000..ddad917
--- /dev/null
+++ b/01. Projects/Escape Latam/Canada.md
@@ -0,0 +1,5 @@
+---
+id: 479b9e29-c514-42b2-a086-f1290936cb57
+created: 2024-02-06 14:20
+updated: 2024-02-18 15:29
+---
diff --git a/01. Projects/Escape Latam/Comparación de Paises.md b/01. Projects/Escape Latam/Comparación de Paises.md
new file mode 100644
index 0000000..5376431
--- /dev/null
+++ b/01. Projects/Escape Latam/Comparación de Paises.md
@@ -0,0 +1,23 @@
+---
+created: 2024-02-04 22:10
+updated: 2024-02-18 15:29
+---
+
+
+| | [New Zeldand](New%20Zeldand.md) | [[Canada]] |
+| ---- | ---- | ---- |
+| Leyes Laborales | | |
+| Salud | | |
+| Salario Mínimo | | |
+| Promedio de arriendo | | |
+| Promedio de groceries | | |
+
+---
+
+## Next Steps
+
+Current status:
+- no tengo idea de a donde quiero it
+
+Next steps:
+- [ ] Investigar los puntos de arriba por cada país en distintas notas
\ No newline at end of file
diff --git a/01. Projects/Escape Latam/Escapar de Latam.md b/01. Projects/Escape Latam/Escapar de Latam.md
new file mode 100644
index 0000000..3924eba
--- /dev/null
+++ b/01. Projects/Escape Latam/Escapar de Latam.md
@@ -0,0 +1,12 @@
+---
+created: 2024-02-04 22:23
+updated: 2024-02-18 15:29
+---
+- [ ] [Obtener pasaporte](Obtener%20pasaporte.md)
+- [ ] Postar a [Work & Holiday](Work%20&%20Holiday) visa
+- [ ] Tarjeta de crédito internacional
+- [ ] Al menos 3 mudas de ropa nueva
+- [ ] Chequeo médico general
+- [ ] Lentes nuevos
+- [ ] Celular nuevo
+- [ ] Decolorado y tintura nuevos
\ No newline at end of file
diff --git a/01. Projects/Escape Latam/New Zeldand.md b/01. Projects/Escape Latam/New Zeldand.md
new file mode 100644
index 0000000..5dab303
--- /dev/null
+++ b/01. Projects/Escape Latam/New Zeldand.md
@@ -0,0 +1,7 @@
+---
+created: 2024-02-06 14:17
+updated: 2024-02-18 15:29
+---
+## Work & Holiday
+
+Último ciclo de postulación fue en Octubre 2023, avisan con al menos 1 mes de anticipación
\ No newline at end of file
diff --git a/01. Projects/Fuuka/Outline.md b/01. Projects/Fuuka/Outline.md
new file mode 100644
index 0000000..d3c53c8
--- /dev/null
+++ b/01. Projects/Fuuka/Outline.md
@@ -0,0 +1,9 @@
+---
+created: 2024-02-10 09:43
+updated: 2024-02-18 15:29
+---
+## Maybe
+
+- Sería interesante tener un chat en el landing junto al "song request"
+- En el setup entre juno y fuuka en un docker-compose.yml, tendrá menos latencia montar un socket que por TCP?
+- Implementar un "path mapping" similar a "arr's suit"
\ No newline at end of file
diff --git a/01. Projects/Juuno/Outline.md b/01. Projects/Juuno/Outline.md
new file mode 100644
index 0000000..972a188
--- /dev/null
+++ b/01. Projects/Juuno/Outline.md
@@ -0,0 +1,8 @@
+---
+created: 2024-02-10 09:45
+updated: 2024-02-18 15:29
+---
+- Juno sólo necesita que los archivos de música existan cuándo se le solicite ejecutarlo.
+- Randomize queue, diferente de shuffle mode
+ - randomize, re-order the current queue in a random way
+ - shuffle, pick the next song at random from the current queue
\ No newline at end of file
diff --git a/01. Projects/Obtener pasaporte/Obtener pasaporte.md b/01. Projects/Obtener pasaporte/Obtener pasaporte.md
new file mode 100644
index 0000000..bd8bcdc
--- /dev/null
+++ b/01. Projects/Obtener pasaporte/Obtener pasaporte.md
@@ -0,0 +1,8 @@
+---
+created: 2024-02-05 22:46
+updated: 2024-02-18 15:29
+---
+Todo:
+
+- [ ] Revisar horarios para obtener pasaporte
+- [ ] Buscar precio del pasaporte
\ No newline at end of file
diff --git a/01. Projects/Playa/Comprar.md b/01. Projects/Playa/Comprar.md
new file mode 100644
index 0000000..a706c2c
--- /dev/null
+++ b/01. Projects/Playa/Comprar.md
@@ -0,0 +1,26 @@
+---
+created: 2024-02-18 20:48
+updated: 2024-02-18 21:14
+---
+Hay que revisar que wea hay para ir a comprar
+
+## Super
+
+- 3 paquetes tallarines
+- 1kg Arroz
+- Sal
+- Azucar o endulzante
+- Toalla nova
+- Confort
+- Pasta de dientes
+- Jabón
+- Salsa de tomate
+- Salsa blanca o crema
+- Harina
+- 1 paquete de legumbres
+
+## Carnicería
+- Medio kilo de posta (carnicería)
+- Pollo (bistec o pechuga)
+- Prietas
+- Pulpa de cerdo
\ No newline at end of file
diff --git a/01. Projects/Playa/Games.md b/01. Projects/Playa/Games.md
new file mode 100644
index 0000000..add9a70
--- /dev/null
+++ b/01. Projects/Playa/Games.md
@@ -0,0 +1,17 @@
+---
+created: 2024-02-16 11:36
+updated: 2024-02-18 15:29
+---
+## Togethers
+
+- Monster Hunter Generations Ultimate
+- Monster Hunter Rise/Sunbreak
+- 999
+- Steain Gate
+- Return of the Obra Dinn
+- Sayonara Wild Hearts
+
+
+## Alone
+- Danganrompa 3
+- Chrono Trigger
\ No newline at end of file
diff --git a/01. Projects/Playa/Movies-Series.md b/01. Projects/Playa/Movies-Series.md
new file mode 100644
index 0000000..78ff050
--- /dev/null
+++ b/01. Projects/Playa/Movies-Series.md
@@ -0,0 +1,17 @@
+---
+created: 2024-02-16 11:38
+updated: 2024-02-18 15:29
+---
+## Movies
+
+- Perfect Blue
+- Godzilla -1
+- The thing
+
+## Anime
+
+- Kyokai no Kanata
+- Kill la Kill
+- BNA
+- Licoris Recoil
+- Serial Experiments Lain
\ No newline at end of file
diff --git a/01. Projects/Playa/comida.md b/01. Projects/Playa/comida.md
new file mode 100644
index 0000000..9acdb22
--- /dev/null
+++ b/01. Projects/Playa/comida.md
@@ -0,0 +1,29 @@
+---
+created: 2024-02-18 15:29
+updated: 2024-02-18 21:14
+---
+## Main
+
+- Tallarines
+- Pollo al jugo
+- Pollo Asado
+- Pulpa de cerdo
+- Tortilla de verduras
+- Fritos de jurel
+- Ensalada de fideos
+- Filetes de salmón
+- Escalopa kayser
+## acompañamiento
+
+- Arroz
+- Papas cocidas
+- Papas mayo
+- Papas doradas
+- Papas fritas
+- Cuscus
+- Choclo cocido
+
+## Others
+
+- Huevos
+- Leche
\ No newline at end of file
diff --git a/01. Projects/Página Personal/board.md b/01. Projects/Página Personal/board.md
new file mode 100644
index 0000000..3943b2e
--- /dev/null
+++ b/01. Projects/Página Personal/board.md
@@ -0,0 +1,6 @@
+---
+created: 2024-02-06 22:52
+updated: 2024-02-18 15:29
+---
+- [ ] Arreglar problema de compilación debido a lightgallery
+- [ ] Evaluar Git Based CMS alternative (posibilidad de construir uno propio)
\ No newline at end of file
diff --git a/01. Projects/Renuncia/Renuncia.md b/01. Projects/Renuncia/Renuncia.md
new file mode 100644
index 0000000..19b8370
--- /dev/null
+++ b/01. Projects/Renuncia/Renuncia.md
@@ -0,0 +1,5 @@
+---
+created: 2024-02-06 14:27
+updated: 2024-02-18 15:29
+---
+- Con el finiquito puedo puedo ir a la AFC y obtener el seguro de cesantía en cuotas, que da más lucas.
\ No newline at end of file
diff --git a/02. Areas/.gitkeep b/02. Areas/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/02. Areas/Dotfiles/dotfiles tasks.md b/02. Areas/Dotfiles/dotfiles tasks.md
new file mode 100644
index 0000000..4e88f12
--- /dev/null
+++ b/02. Areas/Dotfiles/dotfiles tasks.md
@@ -0,0 +1,12 @@
+---
+created: 2024-02-06T14:24:00-03:00
+updated: 2024-02-18 15:29
+type: Checklist
+---
+
+# Tasks
+
+- [ ] Re-escribir Zsh, más minimalista, menos copy-paste, más consistente
+- [ ] Añadir undo-tree to nvim
+- [ ] Terminar de configurar LF
+- [ ] Add mpv compact osd
diff --git a/02. Areas/Exersice/Descansos Activos.md b/02. Areas/Exersice/Descansos Activos.md
new file mode 100644
index 0000000..505e9c2
--- /dev/null
+++ b/02. Areas/Exersice/Descansos Activos.md
@@ -0,0 +1,7 @@
+---
+created: 2024-02-17 15:26
+updated: 2024-02-18 15:29
+---
+# Lista de descansos activos
+
+- [Malabares](Malabares)
\ No newline at end of file
diff --git a/02. Areas/Food/recipes.md b/02. Areas/Food/recipes.md
new file mode 100644
index 0000000..9eca1ae
--- /dev/null
+++ b/02. Areas/Food/recipes.md
@@ -0,0 +1,9 @@
+---
+created: 2024-02-09 20:58
+updated: 2024-02-18 15:29
+---
+# Receipts index
+
+```dataview
+TABLE FROM "02. Areas/Food/recipes"
+```
diff --git a/02. Areas/Food/recipes/Fideos con Huevo.md b/02. Areas/Food/recipes/Fideos con Huevo.md
new file mode 100644
index 0000000..e69de29
diff --git a/03. Resources/.gitkeeep b/03. Resources/.gitkeeep
new file mode 100644
index 0000000..e69de29
diff --git a/03. Resources/Notetaking/.gitignore b/03. Resources/Notetaking/.gitignore
new file mode 100644
index 0000000..e69de29
diff --git a/03. Resources/Notetaking/12. Questions.md b/03. Resources/Notetaking/12. Questions.md
new file mode 100644
index 0000000..c2fd74d
--- /dev/null
+++ b/03. Resources/Notetaking/12. Questions.md
@@ -0,0 +1,10 @@
+---
+created: 2024-02-10T18:24:25-03:00
+modified: 2024-02-10T18:33:38-03:00
+updated: 2024-02-18 15:29
+---
+
+# 12. Questions
+
+1. ¿Cómo puedo automatizar una tarea tediosa y/o que consume mucho tiempo?
+2. ¿Cómo me puedo hacer la vida más sencilla?
diff --git a/03. Resources/Notetaking/CODE Method.md b/03. Resources/Notetaking/CODE Method.md
new file mode 100644
index 0000000..f4742c8
--- /dev/null
+++ b/03. Resources/Notetaking/CODE Method.md
@@ -0,0 +1,36 @@
+---
+created: 2024-02-11T18:26:57-03:00
+modified: 2024-02-11T19:24:22-03:00
+updated: 2024-02-18 15:29
+---
+
+# CODE Method
+
+## Capture
+
+- Capturar más pero no todo, _"seguir mi instinto"_.
+- Cuestionarme en base a [mis preguntas]()
+
+## Organize
+
+- Separate notes in the [PARA method]()
+
+## Destile
+
+- Aplicar [Progresive Summarization](Progresive%20Summarization.md)
+- Destilar hasta poder tener una idea general de la nota a primera vista
+- **No destilar de golpe, ni destilar todas las notas**. Destilar consume limitado tiempo, y tampoco hay que hacer que la actividad sea tediosa.
+
+## Express
+
+- Create intermediate packages (modules),
+ - Lego like building blocks to complete something (like a project)
+ - Finish faster with less effort
+ - construidos desde/con:
+ - Destiled notes
+ - Outtakes (cut out content)
+ - WIP
+ - Final Products
+ - Docs created by others
+- Get feedback quickly
+- Rely on other's work (don't re-invent the wheel)
\ No newline at end of file
diff --git a/03. Resources/Notetaking/North Start.md b/03. Resources/Notetaking/North Start.md
new file mode 100644
index 0000000..8790cde
--- /dev/null
+++ b/03. Resources/Notetaking/North Start.md
@@ -0,0 +1,13 @@
+---
+created: 2024-02-10T18:26:45-03:00
+modified: 2024-02-10T18:32:53-03:00
+updated: 2024-02-18 15:29
+---
+
+# North Start
+
+TODO
+
+## 12. Questions
+
+## Objectives
diff --git a/03. Resources/Notetaking/PARA method.md b/03. Resources/Notetaking/PARA method.md
new file mode 100644
index 0000000..9868462
--- /dev/null
+++ b/03. Resources/Notetaking/PARA method.md
@@ -0,0 +1,18 @@
+---
+id: 9b7a4283-0523-4536-b562-4df99cd32037
+created: 2024-02-02T19:52:00-03:00
+updated: 2024-02-18 15:29
+---
+
+El método PARA es para un sistema de organización transversal a cualquier herramienta, ya sea física o digital.
+
+1. Projects: Short-term efforts in your work or life that your're working on right now.
+2. Areas: Long-term responsibilities you want to manage over time.
+3. Resources: Topics or interest that may be useful in the future.
+4. Archive: Inactive items from the other three categories.
+
+The stuff inside each element can and should move between each category, and always should be put in the higher element because it's ordered by actionability.
+
+## Techniques
+
+
\ No newline at end of file
diff --git a/03. Resources/Notetaking/Progresive Summarization.md b/03. Resources/Notetaking/Progresive Summarization.md
new file mode 100644
index 0000000..e03d386
--- /dev/null
+++ b/03. Resources/Notetaking/Progresive Summarization.md
@@ -0,0 +1,18 @@
+---
+created: 2024-02-18 11:16
+updated: 2024-02-18 15:29
+---
+# Progresive Summarization
+
+técnica para destilar notas y obtener la escencia sin perder el contenido original, permitiendo poder obtener tanto contexto como necesitemos en el momento de leerla.
+
+Para aplicar esta técnica, debemos "destacar" multiples veces, y cada vez de manera más concisza el contenido de la nota, por ejemplo:
+
+1. Conseguir las partes importantes de un articulo (usar read-later app)
+2. Marcar en negrita
+3. Destacar o poner en cursiva
+4. hacer un 2º resumen de un par de frases, con mis propias palabras
+
+Es importante destacar que no es necesario aplicar todos estos pasos, ni aplicarlos de una sola vez. Esta es una tarea que requiere tiempo y esfuerzo que no siempre vale la pena invertir.
+
+Cómo regla general se puede aplicar la norma de _"dejar las notas mejor que como las encontramos"_, _sumarizando_ las notas solo cuando nos las volvamos a encontrar.
diff --git a/03. Resources/Notetaking/Reuse previous work.md b/03. Resources/Notetaking/Reuse previous work.md
new file mode 100644
index 0000000..32734a3
--- /dev/null
+++ b/03. Resources/Notetaking/Reuse previous work.md
@@ -0,0 +1,10 @@
+---
+created: 2024-02-17 13:45
+updated: 2024-02-18 15:29
+---
+Para reutilizar trabajo previo desde el _second brain_ podemos utilizar las siguientes estrategias:
+
+- Search notes by title or content
+- Manually browse the vault
+- Search through tags
+- [Serendipity](serendipity) (connection between ideas & notes)
\ No newline at end of file
diff --git a/03. Resources/tatoos/ying-yang zinogre.jpg b/03. Resources/tatoos/ying-yang zinogre.jpg
new file mode 100644
index 0000000..eb7368f
Binary files /dev/null and b/03. Resources/tatoos/ying-yang zinogre.jpg differ
diff --git a/04. Periodic/01. Daily/2024-02-17.md b/04. Periodic/01. Daily/2024-02-17.md
new file mode 100644
index 0000000..e69de29
diff --git a/04. Periodic/03. Monthly/2024-02.md b/04. Periodic/03. Monthly/2024-02.md
new file mode 100644
index 0000000..e69de29
diff --git a/04. Periodic/05. Yearly/2024.md b/04. Periodic/05. Yearly/2024.md
new file mode 100644
index 0000000..76e6ed7
--- /dev/null
+++ b/04. Periodic/05. Yearly/2024.md
@@ -0,0 +1,8 @@
+---
+created: 2024-02-06 22:35
+updated: 2024-02-18 15:29
+---
+## Archivments
+
+- Renunciar
+- Completar Mario & Luigi: Partners in Time
\ No newline at end of file
diff --git a/99. Archives/.gitkeep b/99. Archives/.gitkeep
new file mode 100644
index 0000000..e69de29
+
+ );
+}
+
+function Header({ profile }) {
+ return (
+ This is the header
+Content Component
+{profile.name}
+
+
+ );
+}
+
+function Header() {
+ return (
+ This is the header
+Content Component
+{profile.name}
+
+
+
+
+ );
+}
+
+function Header({ profile }) {
+ return (
+