• NaN years ago - link
    by @ghost

    Javascript Destructuring

    The quickest way to explain javascript destructuring is with an example.

    Consider this object deconstruction:

    This syntax translates to:

    Consider what it would take to construct the object in Mark A, rather than to deconstruct an existing object?

    You may construct an object like so:

    You'll notice the syntax for constructing this payload object is the exact same syntax for destructuring it, only we reversed which side of the assignment payload was on.

    Object deconstructors

    Next I'll provide a quick overview of different destructuring operations and then we will combine them to get the result above.

    Object destructuring

    Providing defaults

    Renaming destructured properties

    Destructuring arrays

    Destructuring with spread operators

    The spread operator is generally used to collect varargs, like function(...args) {} however, in the context of deconstruction, it collects any elements not explicitly deconstructed.

    For instance, spread deconstruction for an object:

    For instance, spread deconstruction for array:

    Note: You can see how this is some pretty handy syntactic sugar. You can save a lot of writing time and screen space by using these.

    Dynamic property name deconstruction

    That's the extent of my off-hand knowledge of very fun javascript deconstruction patterns.

    Putting it all together

    Initially we considered this example and set out to understand its meaning:

    We'll take this section by section

    Deconstruct collection property of payload and assign value to local const.

    Deconstruct result property.

    In each, the right hand side of a destructured property name is the value of that property itself which can then be further deconstructed.

    Since result is an array, we can use array deconstruction as we demonstrated before to simply get the first result of the result array.

    They all effectively do the same thing. / If object destructuring ever looks confusing to you, just remember its the reverse of constructing objects.

    Given this, what might code to construct the payload look like?

    Take a gander first.

    Here's a solution:

    Now if we run:

    What will the value of data be?

    If you've figured that out, you are well on your way to understanding destructuring.

    The answer is { rid: 'RID1'}.

    Continuing on:

    First consider the complimentary object construction:

    We see we are defining a payload object with a context property with a hooks property that is an array.

    However, perhaps context may be undefined? That's why we provide a default in the destructure.

    Consider the following code:

    Question: What are the values of hooks and hooks2?

    Take a moment if you want.

    Answer: The value of each is [].

    Now, we've examined each portion of the deconstruction separately, let's look at it one more time:

    Ahhh, there we go. Not so confusing now, is it?

    Stay tuned for my next destructuring article where we discuss advanced destructuring.


    Post script: as one final test:

    What is the value of soSad?


    tags: rixfeed dev log programming glossary cbs

  • Definition of Highly Granular

    Definition and explanation of the term highly granular. Read More

    Summary
    The term highly granular refers to a level of detail or specificity that is very fine and specific.

    granular

    detail

    specificity

  • Generate Next.js Page with getServerSideProps and Default Exported React Component in TypeScript

    Learn how to create a Next.js page using getServerSideProps and export a default React component in TypeScript. Read More

    Summary
    This tutorial explains how to generate a Next.js page in TypeScript, including the usage of getServerSideProps for server-side data fetching and exporting a default React component.

    TypeScript

    Next.js

    getServerSideProps

    React

    Component

  • NaN years ago - link
    by @ghost

    Ivy Collegiate Social Media Manager Responsibilities

    Every week we publish two or more headlines for the satire website https://www.theivycollegiate.com/

    I'll send you two articles each week that we want to post.

    Example Article: https://www.theivycollegiate.com/post/we-were-always-gay-confirm-frogs

    Posting Instructions

    Twitter/X:

    • Open twitter on your mobile phone
    • Login to your authorized account for https://twitter.com/ivycollegiate
    • Set app appearance to "Dark Mode"
    • Copy the headline from the article
    • Save the image from the article
    • Create a new tweet
    • Paste the headline for the article
    • Add the image from the article
    • Post the tweet
    • Screenshot the tweet
    • Crop the tweet

    Example Tweet: https://x.com/ivycollegiate/status/1696681431278530875?s=20

    Example Screenshot: tweet

    Instagram Account:

    • Open instagram on your mobile phone
    • Login to your authorized account for https://instagram/theivycollegiate
    • Create new post
    • Select your Twitter screenshot
    • Copy the headline from the article
    • Add the image from the article
    • Paste the headline from the article as the caption
    • Add tag #satire
    • Add 2 - 3 relevant tags of your choice
    • Post the instagram post
    • Share post to @theivycollegiate's public story

    Example Post: https://www.instagram.com/p/CwjHWFDpilv/

    Additional Guidelines:

    • Please try to post each article 3 - 4 days apart
  • Out Juked by a Chicken

    A humorous and dramatic account of the author's experience chasing a chicken and being outsmarted. Read More

    Summary
    The author recounts their harrowing experience of trying to catch a chicken, describing the agility and unpredictability of the bird, and the physical toll it took on them.

    chicken

    chasing

    agility

    humor

    outsmarted

  • NaN years ago - link
    by @ghost

    you know what would be wild?

    three gates in my garage.

    one gate right by the garage door

    another gate about 4 or 5 feet from there

    a final gate about 4 or 5 feet from the house entrance

    keep everything that needs to stay secure in in the central gated section.

    so, to get to the secure area through the garage, you must:

    • get through the garage door
    • get through the first gate
    • get through the second gate

    to get to the secure area through the front, you must:

    • get through the front door
    • get through the house gate
    • get through the third gate

    Reasonably secure.

    Then I should have a gun safe bolted to the ground.

    Inside will be two more safes.

    Sound secure?

  • NaN years ago - link
    by @ghost

    Certainly! Here's an example of a function that creates a 2D grid of null elements based on the specified number of rows and columns:

    In this example, the createGrid function accepts two parameters - rows and columns, representing the desired number of rows and columns in the grid.

    The function initializes an empty grid array and then uses nested loops to create the rows and fill them with null values. The outer loop iterates rows times, while the inner loop iterates columns times, pushing null elements into each row.

    Finally, the created grid is returned and printed to the console.

    You can adjust the rows and columns variables with the desired values to create a grid of the desired size.

    Let me know if you need any further assistance or have any other questions!

  • Function to create a 2D grid

    A function that generates a 2D grid filled with null elements. Read More

    Summary
    This document provides a function that creates a 2D grid filled with null elements based on the specified number of rows and columns.

    2D grid

    null elements

    function

    rows

    columns

  • NaN years ago - link
    by @ghost

    Rixfeed Dev Log

    I just finished writing my first VS Code extension!

    Below is the README.md.

    Line Note Plus

    Line Note Plus is a VSCode extension to add Markdown notes to your code that are visible when hovering over the noted line. Based on Line Note.

    basic-demo

    VSCode Marketplace

    Features

    Invoke Add note at current position from the command palette or context menu. You can see the note you wrote as hover text.

    Notes are saved by default in $PROJECT_ROOT/.vscode/.linenoteplus like .vscode/.linenoteplus/<short-uid>.md.

    Overview

    • Edit/open or remove note via Cmd + Click
    • Markdown note previews on hover
    • Right-click to add note to line
    • Right-click to reveal notated line
    • Delete a note marker by manually deleting in text editor
    • Add a note marker by manually typing in text editor
    • Custom note names
    • Command to add note
    • Command to edit/open note
    • Command to remove note
    • Command to reveal notated line
    • Notes move with code changes
    • Notes can be moved between files
    • Notes are not affected by refactors
    • Add notes within your notes
    • Customize notes directory, note marker background color, and annoted line ruler color
    • Configure to delete orphaned notes on-save, on-inteveral, on-save-and-on-interval, or never

    API

    Commands

    • linenouteplus.addNote: Add note at current position (Annotate Line)
    • linenouteplus.openNote: Edit note at current position (Open Note)
    • linenouteplus.revealLine: Reveal line in notated file (Show Note Marker)
    • linenouteplus.removeNote: Remove note at current position (Delete Note)

    Configuration

    • linenoteplus.cleanUpOrphanedNotesInterval: Interval at which to clean up unused notes in the background in ms. Only applies if cleanUpOrphanedNotes is set to on-interval or on-save-and-on-interval. Default: 60000 (60s). For performance, a larger value is recommended.
    • linenoteplus.cleanUpOrphanedNotes: Defines the cleanup behavior for orphaned notes. It can be set to on-save, on-interval, on-save-and-on-interval, or never. Default: on-save-and-on-internal. Note that when using on-save or on-save-and-on-interval, if you delete a note marker and save the file then your note file will also be deleted.
    • linenoteplus.includePaths: Specifies file pattern globs to scan for note markers. Directories that don't match these patterns will be ignored.
    • linenoteplus.gutterIconPath: File path of the icon to be displayed in gutter.
    • linenoteplus.lineColor: Sets the background color for inline note markers (Name, HEX, or RGB).
    • linenoteplus.rulerColor: Sets the ruler color for notated lines (Name, HEX, or RGB).
    • linenoteplus.showGutterIcon: Whether to display the gutter icon in the gutter for a noted line. Default: true.

    Demos

    Adding a note

    add-note

    Custom note title

    custom-name

    Notes move with code changes

    moves-with-code

    Notes can be moved across files

    move-notes-across-files

    Reveal notated line command

    reveal-notated-file

    Refactor does not affect notes

    refactor-does-not-affect-notes

    Acknowledgements

    Line Note Plus is a fork of Line Note by tkrkt. This library's design was also informed by Marginalia by indiejames.

    Known Bugs

    • Gutter icon does not display.
  • NaN years ago - link
    by @ghost

    Rixfeed Dev Log

    I've created a repositor of useful ts-node powered command line utilities.

    Link: https://github.com/prmichaelsen/devx

    Currently supports only:

    • ls-recursive

    But the commands can be run globally on unix-like shells (with autocompletion) like devx ls-recursive.

    From the README.md:

    What is this package?

    This is a repository of command line utilities written in typescript for use with ts-node.

    How do I run it?

    The preferred way to run scripts with the ts-node version specified in the package.json. To do so, use the provided devx bash script. devx bash script.

    For example: ./devx ls-scripts.ts src

    Use devx command globally

    Note: Only supports unix-like shells like MacOS and Linux distributions. Does not work on Windows.

    You only need to update your .bashrc, .bash_profile, or .zshrc.

    To do so, run ./init and follow the instructions provided.

    This will also add bash completion for your scripts.

  • Creating Ordered Lists with URL Query Params

    Learn how to create ordered lists using URL query parameters Read More

    Summary
    This document explains the process of creating ordered lists by manipulating URL query parameters in order to filter and sort search results.

    URL query parameters

    ordered lists

    search results

    filtering

    sorting

  • NaN years ago - link
    by @ghost

    Writing the helper functions

    I extracted my code from my naive function into helper functions and ran the tests.

    All tests failed! Immediately I knew there was work to be done. But because tests output the differences between your expected output and the actual output, resolving this is easy.

    After fixing the bugs, our functions are defined as follows:

    Now all test cases for the helper functions are passing. But the main replaceMultiValueFilters still fails its tests. What's happening? Fortunately we have eliminated potential problem areas with reasonably high confidence.

    Upon taking a closer look at the code, I noticed a very subtle problem:

    Can you spot it? The code is designed to take our input filters and replace each filter one at a time in a loop. However, I was using filters.replace instead of filter.replace. This means each time I called replace, I was calling it on the original filter instead of our "under construction" filter.

    This is why my tests of two field paths or more were failing.

    I didn't catch this myself! In fact, my tests did. When I refactored this logic into _replaceValues and wrote tests for it, I discovered it was working just fine. This left one remaining spot to check in my code, and potential hours worth of debugging over a small small typo were saved.

    After changing this line:

    The function worked perfectly and passed all our test cases.

  • NaN years ago - link
    by @ghost

    Writing the code

    We'll start with my naive implementation.

    This function finds each fieldPath:[value1,value2, ...] pattern in the filters query param string and replaces it with (fieldPath:value1 OR fieldPath:value2 OR ...).

    It achieves this using regex to find matches. We then iterate over our matches, extract the fieldPath and the values, format them as required, and then replace the old value.

    However, my code isn't passing our test cases. What's wrong?

    We have a couple of options for deducing the issue:

    • Read and reason about the code
    • Launch the tests in debug mode
    • Use console.log to output variables at different points of interest in the function.

    However, there is another option. This is where TDD shines.

    I am reasonably confident that most of the internal logic of this component is correct. There is some small bug somewhere that I need to catch and fix. Instead of spending hours trying to find it, we will break the function up into smaller chunks with their own set of tests. This allows us to narrow down our search by confirming which parts of the code are doing what we want.

    Here is our revised function:

    Note we are now using the additional functions _getFieldPath, _getValues, and _replaceValues but we haven't defined them yet. That's because we are going to use TDD for these functions, too.

    I know what I expect these functions to be called with and what I expect them to output. And so, I write tests to validate that behavior. Here are some sample tests:

    Our regex pattern is pretty complicated as well, so we will define a test for that, too:

    These are important ins & outs for the behavior of our function. By ensuring we pass these tests, our function should work exactly as designed.

  • NaN years ago - link
    by @ghost

    Defining the jest spec

    A "spec" is just a test file. We call it "spec", short for "specification", because well written tests clearly define the behavior of a function.

    There is no need for comments or guessing. The function does exactly what the spec says it will do. This also means we can change the inner implementation of the function at any time as long as it still meets the spec.

    The test cases in the spec run against your code to ensure this.

    To define a test case, we need to define the input value and the output value we are validating the function against.

    Here are some simple tests that confirm the filters parameter is converted to the type required by the search feature. I'm essentially taking the example I gave before but writing it in code.

    With our tests defined, we can now see clearly how this function is intended to work.

  • NaN years ago - link
    by @ghost

    Mapping the filters query param to the search feature

    We need to write code to turn filters=id:[id1,id2,id3,id4] into the format the search feature understands.

    The current format looks like this:

    And the end format will look like this:

    This text above is a search filter string. When executed as part of a search, it retrieves any page that matches any condition where id equals one of those ids.

    I'll start by defining a function in typescript to accomplish this behavior. We'll fill in the function body later.

    This function was developed using Test Driven Development, or TDD.

    We will follow the same process to explain the code.

    We'll start with some jest specs.

  • NaN years ago - link
    by @ghost

    Breaking filters down

    Let's take another look at our filters query param. We'll use an example that's easier to read and reason about:

    filters is a query parameter that is sent to the search feature whenever a page is loaded.

    The search feature is powered by a lightning-fast sophisticated search and discovery API. Currently, complex queries over large data sets of 10K documents or more take as little as 3ms to run. It leverages advanced search algorithms and indexing techniques to swiftly search through large volumes of data in real time. The true power of the search feature comes from filtering.

    Our filter above has the following meaning to the search feature:

    Before the search feature can understand the filters param, I have to convert it to a "language" it understands.

    From here on, this article will get a little more technical.