armchair-traveller

<script>
  import { binX, lineY, rectY } from '@observablehq/plot'
  import CarbonThumbsDown from '~icons/carbon/thumbs-down'
  import CarbonThumbsDownFilled from '~icons/carbon/thumbs-down-filled'
  import CarbonThumbsUp from '~icons/carbon/thumbs-up'
  import CarbonThumbsUpFilled from '~icons/carbon/thumbs-up-filled'
  import CornerDownLeft from '~icons/lucide/corner-down-left'
  import Mic from '~icons/lucide/mic'
  import Paperclip from '~icons/lucide/paperclip'
  import { browser } from '$app/environment'

armchair-traveller

# Just run this straight in fish shell!
# Define the output file
set output_file "output.md"

# Empty the output file if it already exists
if test -f $output_file
    echo "" > $output_file
end

# Find all files in the src directory and its subdirectories

armchair-traveller

/** @type { import("eslint").Linter.Config } */
module.exports = {
  root: true,
  extends: [
    'eslint:recommended',
    'plugin:svelte/recommended',
    'prettier',
    'plugin:unicorn/recommended',
    'plugin:sonar/recommended',
  ],

armchair-traveller

GROKKING NOTES

I liked the way Grokking the coding interview organized problems into learnable patterns. However, the course is expensive and the majority of the time the problems are copy-pasted from leetcode. As the explanations on leetcode are usually just as good, the course really boils down to being a glorified curated list of leetcode problems.

So below I made a list of leetcode problems that are as close to grokking problems as possible.

Pattern: Sliding Window

• https://leetcode.com/problems/maximum-subarray/ # Close enough
• https://leetcode.com/problems/minimum-size-subarray-sum/

armchair-traveller

<!-- @component Provides a generic UI that indicates that page is loading -->
<script>
  import { onMount } from 'svelte';
  import { fade } from 'svelte/transition';
  let hidden = true;
  // Loading indicators can actually be a jarring distraction for the user when your app is loading fast (e.g. when cached or good connection), so we only show it to them when their connection is slow or services aren't responding as fast as they should be.
  onMount(() => setTimeout(() => (hidden = false), 2500));
</script>

<section class="grid h-full place-items-center">

armchair-traveller

// Courtesy of: https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/
// * A little weird when scrolling up on high height dimensions, but more performant. A complete solution would require significantly more logic see: https://benfrain.com/building-a-table-of-contents-with-active-indicator-using-javascript-intersection-observers/
let curContSect = '';
onMount(() => {
  const observer = new IntersectionObserver(([entry]) => 
    entry.isIntersecting && (curContSect = entry.target.querySelector('.section-heading').id), { threshold: 0 })
  for (let el of [...document.querySelectorAll('.section-heading')]) observer.observe(el.closest('section'))
  return () => observer.disconnect();
});

armchair-traveller

<!-- progress bar, accessible — see: https://courses.joshwcomeau.com/css-for-js/03-components/18-workshop-progress & https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role -->
<div
  class="h-2 rounded-full bg-teal-600"
  name="remote tactile funding progress indicator"
  role="progressbar"
  aria-valuenow={value}
  aria-valuemin={0}
  aria-valuemax={100}
  style="width: {value}%; transition: width 2s"
>

armchair-traveller

"use strict";
Object.defineProperty(exports, "__esModule", {
  value: true
});
const vscode = require("vscode");
class Parser {
  constructor() {
    this.tags = [];
    this.expression = "";
    this.delimiter = "";

armchair-traveller

<script>
	import mountIt from './mountIt';

  mountIt(); // logs when the component is mounted. Must be called in the component's script tag, during initialization.
  // if you want to get a value out of the onMount, you could use promises, reactive declarations, stores, etc.
</script>

armchair-traveller

<script>
	import Menu from "./Menu"
</script>

<Menu>
	<!-- the Items component on the Menu component's (class) Items property -->
	<Menu.Items />
</Menu>