DEV Community: addupe

Search with Fuse.js

addupe — Mon, 10 Feb 2020 01:20:10 +0000

Fuse.js is a lightweight JavaScript search library that supports fuzzy search. The docs are great and you can play around with searching a sample of your data in the live demo. And it's open-source.

docs: https://fusejs.io/
github: https://github.com/krisk/fuse

A few weeks ago, I built an application that found a single random poem from a single word input by the user. I used an external API that already had some search functionality built in. One of the endpoints allowed me to search by line and I then worked out the randomization and format of the response data.

This week, for the purposes of learning how Fuse.js works, I made a simple React web app using an array of objects to store all of the Sonnets of William Shakespeare and installed Fuse.js to search my array of objects for a Sonnet including a given query.

here's the npm install: npm install fuse.js

We've got a simple App component that renders our Search component:

import React from 'react';
import Search from './Search';
import './App.css';

function App() {
  return (
    <Search />
  );
}

export default App;

Our Search component:

import React, { useState } from 'react';
import Highlight from 'react-highlighter';
import { fuse } from './fuse/fuse-helper';

function Search() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);

  const handleChange = event => {
    setSearchTerm(event.target.value);
  };

  const handleEnter = async (event) => {
    if (event.keyCode === 13) {
      const foundSonnets = await fuse.search(searchTerm);
      setResults(foundSonnets);
    }
  };

  return (
    <div style={{ margin: 20 }}>
      <h2>fuse.js</h2>
      <input
        type="text"
        placeholder="search"
        value={searchTerm}
        onChange={handleChange}
        onKeyDown={handleEnter}
      />
      {results.map((result, i) => {
        console.log('fuse matches:', result.matches);
        return (
          <div style={{ margin: 20 }} key={i}>
            <Highlight search={searchTerm} style={{ fontWeight: "bold" }}>{result.item.title}</Highlight>
            {result.item.lines.map((line, i) => {
              return (
                <div key={i}>
                  <Highlight search={searchTerm}>{line}</Highlight>
                </div>
              )
            })}
          </div>
        )
      })}
    </div>
  );
}

export default Search;

The result looks like this:

I set up a fuse folder in my src directory to hold my temporary Sonnet data and my fuse helpers. (Given a larger app made for actual production, I'd probably want this data in some kind of database, but the array storage works for our purposes). My file structure looks something like this:

src/
  fuse/
    fuse-helper.js
    sonnets.js

The structure of our sonnet storage looks like this. This is the first sonnet, stored in an array of sonnets as an object with keys title, author, lines, linecount. Every object follows this pattern.

const sonnets = [
  {
    "title": "Sonnet 1: From fairest creatures we desire increase",
    "author": "William Shakespeare",
    "lines": [
      "From fairest creatures we desire increase,",
      "That thereby beauty's rose might never die,",
      "But as the riper should by time decease,",
      "His tender heir might bear his memory:",
      "But thou contracted to thine own bright eyes,",
      "Feed'st thy light's flame with self-substantial fuel,",
      "Making a famine where abundance lies,",
      "Thy self thy foe, to thy sweet self too cruel:",
      "Thou that art now the world's fresh ornament,",
      "And only herald to the gaudy spring,",
      "Within thine own bud buriest thy content,",
      "And tender churl mak'st waste in niggarding:",
      "  Pity the world, or else this glutton be,",
      "  To eat the world's due, by the grave and thee."
    ],
    "linecount": "14"
  },
  {...},
  {...},
  {...},
];

const _sonnets = sonnets;
export { _sonnets as sonnets };

In our fuse helper file, I imported Fuse from fuse.js and the sonnet data variable. When using fuse, you have access to these 'options' which determine the parameters of the search, the sort style, the information you receive about the matches in the generated search results, and the threshold of the search. I recommend looking into these options in fuse's docs and playing around with them in the live demo. The key ones for us to pay attention to here are the keys and the threshold. shouldSort is also important, because typically, you want to sort by the closest matches. Set this to true. Keys is what lets fuse know what keys to access. Here we have title and lines, meaning that the sonnet fuse will look through our array of sonnet objects and find any sonnet that has the target word in the title key values or in the line key values. Threshold is what allows for the fuzzy search. 0.0 would mean you need an exact match and 0.6 would be the setting for fuzzy as it gets.

import Fuse  from 'fuse.js';
import { sonnets } from './sonnets';

const options = {
  shouldSort: true,
  includeMatches: true,
  threshold: 0.1,
  location: 0,
  distance: 100,
  maxPatternLength: 32,
  minMatchCharLength: 1,
  keys: [
    "title",
    "lines"
  ]
};

const fuse = new Fuse(sonnets, options);

const _fuse = fuse;
export { _fuse as fuse };

Searching for the word star yields this response:

*The highlighting effect is from react-highlighter, a pretty cool little tool.

You'll notice if you look again at the search component, that I console logged the fuse matches for each result. Let's take a look at the logs:

console.log('fuse matches:', result.matches);

If we want to see the whole fuse results array:

We see that we get back an array with the matching item and the matches (if we set the includeMatches prop to true). And we render accordingly, knowing that each found object will be listed as an item in our results array.

fin

'Hello World' in C++ for the JavaScripter

addupe — Mon, 03 Feb 2020 01:18:27 +0000

JavaScript Recap

Declaring a namespace / variable

Function body

Printing command

Execution

C++ Intro

Compiling script
In JavaScript, our code is read by interpreters in the browser at run time. C++ is read by a compiler which converts the language into machine code before program run. But for the compiler to have everything it needs to interpret the given code. This first line #include <iostream is read by the preprocessor as a preprocessor directive which runs before actual compilation of the code and allows the preprocessor to paste in any needed files.

Namespace declaration (sort of)
Okay, here our namespace declaration contains a two parter. There's the namespace for the function itself, which is actually main() in this example and then there's the namespace declaration for any methods/other functions that will be utilized in our file. The using namespace std; as I understand it, is another kind of file that contains methods defined as prefixes, like a library in JavaScript, and we declare that we will be using that 'library' of functions. cout here exists within the std set of functions. If we needed a function that existed within a different 'file', we would include that corresponding namespace.
*There are two ways of doing this and this one is actually not best practice (more on that below)

Function body
The meat of our function. The code that will be executed inside of our function. Still uses { and }.

Execution done by compiler
We get our first glimpse at main(), which is a special function in all C++ programs. This is our actual function declaration. It is also our execution, because in C++ the main function, no matter where it is located in our file, will always be called first by the compiler. The int here is what defines the type of function. In JavaScript, we would have our variable declaration keyword either: 'let' or 'const'. Int in C++ is a 'fundamental variable type' It is short for integer and describes what the function will return. It's a little confusing when just printing something, but there's a 0 return that is usually included that gives a signal that no errors are included. I've left it out of these first examples, but you'll see it in the revised 'Hello World' solution further down.

Printing command
This is the equivalent to our console log. cout tells our program to print and the << gives direction to what will be printed. In our case, our dearly beloved: 'Hello World'.

Input Output Visualization
Back to iostream briefly, this is a visualization I found useful in considering what standard input and output operations are and how they're run in C++. I've heard the analogy of water and oil flowing through a pipe. I'll link the Quora response that explained this more in depth.^1

Abstraction Scale
In my research, I've read C++ classified as both a high level language and a mid level language. What I understand is it's still high level, meaning that it uses a great deal of abstraction from machine code to let us use language syntax and variable names as words, etc. But it's a little lower level than JavaScript.

What is C++ used for?
like everything

video games
MySQL built with C++
operating systems
compilers
3d modeling
adobe systems
Curiosity rover's autonomy system

Another solution
You'll notice the namespace std is included directly alongside the method that is pulled from that library. This is considered better practice, because you avoid ambiguity when including multiple libraries in a single file of code. This example also includes a return 0 which I still have a lot of questions about myself, but I understand is kind of like an error check and ends the code block, similarly to the way returning in JavaScript defines a function and acts as a break point.

Side by side
double double toil and trouble

Thanks for reading!
If anyone finds any errors I've made here or has suggestions, please let me know in the comments below. I'm trying to get a better grasp on C++ coming from a JavaScript world.

^[1] quora streams
***and a great C++ resource

Differences between PostgreSQL and MySQL

addupe — Mon, 27 Jan 2020 07:25:13 +0000

Technical Similarities

use SQL (Structured Query Language)
are relational databases
with schemas
tables (similar format)
familiar MySQL data-types
queries
CLI (Command Line Interface)

Technical Differences

Data type variations: BYTEA instead of BLOB, TEXT instead of LONGTEXT and MEDIUMTEXT, INTEGER sizing, UUID in postgres not in mysql
CLI syntax

Postgres object-relational features (ORDBMS):
*act as a middle man between object oriented databases (info represented by objects) and relational databases / couples well with an object oriented programming language like Java, C++, Ruby, Python

table inheritance[1]
function creation / overloading[2]
foreign data wrappers
others*: more than one schema per database, ACID compliance[3], materialized views,constraint checking, lateral joins, variadic arguments, etc.

I recommend checking out Dian Fay's Ultimate Blog Post here for more detail:(https://dev.to/dmfay/the-ultimate-postgres-vs-mysql-blog-post-1l5f)

Installing

(linux commands)

PostgreSQL: sudo apt install postgresql-10
MySQL: sudo apt install mysql-server

Starting

PostgreSQL: sudo -u postgres psql
MySQL: sudo mysql -u root

User Roles

PostgreSQL: default user = ‘postgres’, password needs to be set
MySQL: default user = ‘root’, password ''

Altering Roles

PostgreSQL:
ALTER USER postgres with encrypted password 'postgres';
MySQL:
ALTER USER ‘root’@’localhost’ IDENTIFIED BY ‘newpassword’;

Running a schema file

PostgreSQL: sudo -u postgres psql -f [file.sql]
MySQL: sudo mysql -u root < [file.sql]

Common CLI commands

PostgreSQL:

list databases: \l
connect: \c [database_name]
list tables: \dt or \dt+
describe table: \d [tablename];

MySQL:

list databases: show databases;
connect: use [database_name];
list tables: show tables;
describe table: describe [tablename];

Tables structure is the same!

*data-type usage may be different, tab formatting may vary

PostgreSQL:

CREATE TABLE users (
 id INT GENERATED ALWAYS AS IDENTITY,
 username VARCHAR(50) NOT NULL,
 email VARCHAR(50) NOT NULL,
 PRIMARY KEY (id)
);

MySQL:

CREATE TABLE users (
 id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
 username VARCHAR(255) NOT NULL,
 email VARCHAR(255) NOT NULL
 PRIMARY KEY (id)
);

Raw queries are basically the same

Still SQL!

PostgreSQL: SELECT * FROM tablename
MySQL: SELECT * FROM tablename

Quitting

PostgreSQL: \q
MySQL: quit; OR exit;

PostgreSQL or MySQL?

Consider if you'll need access to PostgreSQL's added Object Oriented features. Think about how much you value open source. PostgreSQL is truly open source, whereas MySQL is only 'partially' open source. Figure out how you'll install, open your CLI, run schema file and then you'll use PostgreSQL almost the same way you'd use MySQL with some altered command lines, added functionality, and modified data-types. You can ignore any PostgreSQL features you don't need and use them if and when you need them.

[1]TABLE INHERITANCE: Let’s say you are storing major cities in the US. You have a table cities and a table capitals. Naturally, capitals are also cities, so you want some way to show the capitals implicitly when you list all cities. a row of capitals inherits all columns (name, population, and altitude) from its parent, cities
[2]FUNCTION OVERLOADING: Postgres can store functions in its database and more than one function may be defined with the same name, so long as the arguments they take are different. This renaming is called overloading. The one matching the argument datatype will be the stored function called and evaluated.
[3]ACID: (Atomicity, Consistency, Isolation, Durability) refers to a standard set of properties that guarantee database transactions are processed reliably. ... An ACID-compliant DBMS ensures that the data in the database remains accurate and consistent despite any such failures

Google 'Speech' APIs

addupe — Mon, 20 Jan 2020 05:40:35 +0000

Google Cloud offers two APIs as AI & Machine Learning Products.

Cloud Text-To-Speech
Cloud Speech-To-Text

From the API docs:

'Google Cloud Text-to-Speech converts text into human-like speech in more than 180 voices across 30+ languages and variants. It applies groundbreaking research in speech synthesis (WaveNet) and Google's powerful neural networks to deliver high-fidelity audio.'

'Google Cloud Speech-to-Text enables developers to convert audio to text by applying powerful neural network models in an easy-to-use API.'

Who remembers this?

We've obviously progressed.
There's Siri and Alexa and APIs like these available for use right in our applications.

Google's API docs are also very user friendly compared to other API docs I've used. (Let me know your opinions on this below)

In the docs*, you can test the API directly with an example JSON body to send to the provided endpoint.

{
  "audioConfig": {
    "audioEncoding": "LINEAR16",
    "pitch": 0,
    "speakingRate": 1
  },
  "input": {
    "text": "Nay, answer me: stand, and unfold yourself."
  },
  "voice": {
    "languageCode": "en-GB",
    "name": "en-GB-Wavenet-A"
  }
}

{
  "audio": {
    "content": "/* Your audio */"
  },
  "config": {
    "enableAutomaticPunctuation": true,
    "encoding": "LINEAR16",
    "languageCode": "en-US",
    "model": "default"
  }
}

Google refers to the transformation process in both tools as Speech Synthesis: 'The process of translating text input into audio data is called synthesis and the output of synthesis is called synthetic speech'.

These are the three methods Google writes of implementing in their synthesis processes:

Synchronous Recognition (REST and gRPC) sends audio data to the Speech-to-Text API, performs recognition on that data, and returns results after all audio has been processed. Synchronous recognition requests are limited to audio data of 1 minute or less in duration.

Asynchronous Recognition (REST and gRPC) sends audio data to the Speech-to-Text API and initiates a Long Running Operation. Using this operation, you can periodically poll for recognition results. Use asynchronous requests for audio data of any duration up to 480 minutes.

Streaming Recognition (gRPC only) performs recognition on audio data provided within a gRPC bi-directional stream. Streaming requests are designed for real-time recognition purposes, such as capturing live audio from a microphone. Streaming recognition provides interim results while audio is being captured, allowing result to appear, for example, while a user is still speaking.

(some notes on encoding)

The text-to-speech API generates a raw audio file as a base64 encoded string. This encoded string must be decoded into a playable audio file. Something like an MP3.

When using the speech-to-text API example upload, the audio conversion is handled for you in a gooey made by google, but when sending an API request in code, you'll have to consider the encoding of your audio received from the user. See this note and link on encoding: 'Audio data is binary data, so you will need to convert such binary data into text using Base64 encoding.'

Tbh, I have a surface level knowledge of encoding formats, so I'll link the wikipedia article as a jumping off point for everyone so I don't stick my foot in my ear here.

Watch out for your encoding types. (And leave technical insight in the comments pls.)

What's interesting to me is that

this is an awesome pair of tools that look! we have access to
the use cases are great. we already see them with google translate and the like, but also could be used to make our apps more accessible and make OS we can fall in love with

What are your ideas? What have you used this for? Where else have you seen it? What are your experiences?

*text to speech docs
*speech to text docs
wikipedia audio coding types

Vim.

addupe — Mon, 13 Jan 2020 14:29:20 +0000

Vim is a highly configurable, free and open-source, text editor and the fifth most popular developing environment in 2019.

It's completely keyboard driven — which means once you get comfortable with the commands, you can edit at an incredibly efficient speed. There are vim plugins and extensions for the browser and for other popular editors like VsCode that allow you to use these same commands in other environments.

Vim seems to have something like a cult-classic kind of following. I remember when I began my coding journey, it was one of the first things I learned about and it felt like magic to me —

and was just as hard to figure out how to get out of...

This is a common memeable issue with beginner Vim users. You get into vim and you can't get out.

Computer exit holodeck
Computer exit holodeck
Computer exit
Computer ?

So first things first:

The command is :q
If you're in insert mode first esc
If you press ctrl + s and haven't disabled the sticky in your startup script, you'll have to press ctrl + q before you can then :q
: colons follow most commands
and ! at the end of a command forces it
:q! is the equivalent of force quit

Vim is really useful and worth learning the basics of in case you need to use it. A lot of programs will have it as a default editing tool. The other day I was working on an AWS deployment and the shell used vim by default. Luckily, I already knew how to make the necessary exits, write and exit the program.

I will be reviewing some of the basic commands found in vimtutor, but I recommend starting there if you're new to vim and maybe repeating it a couple of times in the beginning.^1

Other than exiting,

entering
movement
insertion
deletion
writing (saving)
replacement
undo/redo

are pretty important text editing needs you'll come across as a beginner vim user.

Entering vim is done through the terminal, as a command vim [filename]
So vim with a new file name like vim program-dixon-hill would open a new, empty file and a vim command with an existing file name would open that vim file vim holodeck

To move around in vim you want to make sure you're in normal mode, not in insertion mode, meaning you can't type anything and use j to move down, k to move up, h to move left, and l to move right.

When I say insertion mode vs. normal mode, Vim as 12 different editing modes, 6 basic modes w/ variations:

(This is from Vim's wikipedia page)^2

Normal mode - used for editor commands. This is also the default mode, unless the insertmode option is specified.
Visual mode - similar to normal mode, but used to highlight areas of text. Normal commands are run on the highlighted area, which for an instance can be used to move or edit a selection.
Select mode - works similarly to visual mode. However, if a printable character, carriage return, or newline (or line feed) is entered, Vim inserts the character, and starts insert mode.[32]
Insert mode - similar to editing in most modern editors. In insert mode, buffers can be modified with the text inserted.
Command-line or Cmdline mode - supports a single line input at the bottom of the Vim window. Normal commands (beginning with :), and some other specific letters corresponding to different actions (including pattern search and the filter command) activate this mode.
Ex mode - similarly to Cmdline mode, it takes a single line input at the bottom of the window. However, in Cmdline mode, entering a command exits the mode when the command is executed. Entering a command in Ex mode doesn't cause the mode to change.

Insert mode is entered by using i and allows you to type in the file.
You can use the arrow keys to navigate when insertion mode, but it's good to get used to toggling back and forth. HJKL are the basic movement keys, but you'll learn other ways of moving around quickly and efficiently in normal mode. For example 10j would move your cursor 10 lines down in normal mode, 10k would move you ten lines up. To escape insertion mode you use esc used for returning to normal mode from any of these modes.

Returning to normal mode, you can delete a character by moving the cursor under that character and using x. To delete an entire word, move to the beginning of that word and use dw for delete word. To delete multiple words, but not an entire line, use d<number of words>w like d2w would delete two words, d3w would delete three words — and so on. Type d$ to delete to the end of the line and dd to delete the entire line.

To write or save what you're doing, :w. Using :w [filename] will write a new copy of that file under the given filename, but will not delete your old file. (There are many plugins to use with vim. Here's one I encountered researching this dilemma)[3]

To replace a character use r with the cursor placed under it just like you would delete. Capital 'R' will put you in replace mode, replacing each next character with the next one you type until you exit the mode.

To undo you would use u for a single change, U for the whole line. ctrl + r is your redo. Vim also keeps track of versions of a file, something like a Git history. I won't go into these details here, but look them up. Also, let me know in the comments below what your best practices are for this and general vim usage.

If you're like me and you like to use vim for other kinds of writing also, check out this vim for writers article. I usually use the WordProcessorMode plugin when I'm writing or editing something other than code and have found it super useful.[4]

[1] a program literally called vimtutor and opened with the command vimtutor — once installed and run will provide a walkthrough tutorial that you can practice keyboard shortcuts by following along with. It's usually installed with vim, but if not, can be easily installed.
*view on the web
[2] vim wiki
[3] saveas plugin
[4] vim 4 writers
more vim keyboard shortcuts

Debugging Node.js in VSCode

addupe — Sun, 15 Dec 2019 21:14:13 +0000

We use a debugging tool, a 'debugger', to track what’s happening in our code line by line, so we can find out where our errors, 'bugs', live and kindly release those cute little guys from our code.

Node.js is 'an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a browser.'^1 And VSCode has a built in debugging environment for debugging our Node code outside of the browser.^2

I know that when I started working in Node.js, I was already familiar with debugging in the browser with Google's DevTools when working with the front-end. Comparing the two helped me feel more comfortable with debugging in VSCode. It turns out the tools are very similar. Here's a side by side comparison (gif sources below):

^3
^4

in browser:

open devtools panel
set a breakpoint
run code
step through

with node in vscode:

open debugger's panel
add config / file path
set a breakpoint
start debugger
step through

Similarities:
Open some kind of panel, set your breakpoints, start your debugger, step through, rinse and repeat.

Differences:
Location of panel, location of variable tracking, need for a configuration, setting file path, server starting.

For both the browser DevTools and VSCode's debugging panel, we have to open some kind of tool. In VSCode, there's a little bug icon pointing the way or w/ CTRL + SHIFT + D

In VSCode, we have to set up our config and file path. This points our debugger to the file we need to be read. Usually some default will pop up when you click Add Config, but if not, there will be options for the kind of config needed.

Then you can add any breakpoints you might need just like you would in Google's DevTools.

Start your debugger for the first time with the play button next to where you added your configs. You can restart your debugger later from the debugger's tool bar that will appear. This is also where you'll do your stepping and stopping and playing. If you're unfamiliar with these commands, see the 3rd link below.

Any variables in the file will be listed in the side panel and you can open up different parts by clicking on the down arrow, as seen below. This is just like the Scope panel in your DevTools.

If you're using Node.js to build a server and have a config set up to the file that starts your server, the debugger will run this code and restart your server for you, which can become super useful when developing, so you aren't constantly running npm start. Once the server is started, you can go to your page and interact with the page as a user and access any console logs you might have set for GET and POST requests, etc. This will be output in the Debug Console pictured here:

open, config, break, start, step, rinse, repeat

[1]node.js docs
[2]node.js inspect
[3]DevTools gif
[4]VSCode gif

React JS: Stateful vs Stateless Components

addupe — Sun, 08 Dec 2019 21:00:04 +0000

Components are just the parts of our application in React JS. Each component needs to handle data, either to render it on the page or to pass it along to another component. The way that a component deals with data defines if that app is stateful or stateless.

Stateful components deal with data in 'state,' keeping a reference to a set of data that may change, while stateless components keep receive data in the form of props (short for properties) received from a parent component or a lineage of parent components, at least one of these parent components being stateful themselves.

Let's say we build a little web app to keep track of our personal reading list:

This small app would have a few small components. This one has three:

1) The main (stateful) app component which tracks all data and renders other child components:

class ReadingApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        //these might change
        //add books, finish reading books
      books: this.props.books,
    };

2) A stateless ReadingList component that contains a child component and passes the data received from the main ReadingApp along:

const ReadingList = (props) => {
  return (
    <table>
    <tbody>
      {books.map(book => {
        return <ReadingListEntry book={book} />
      })}   
    </tbody>
  </table>
  );

3) This ReadingListEntry component, of which a new instance of is created each time another book is added to the state and which itself includes a toggling state changing click event:

class ReadingListEntry extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showQuote: false,
    };
  }

render() {
    const { title, cover, quote } = this.props.book;
    return (
      <tr onClick={() => this.setState({ showQuote: !this.state.showQuote})}>
        <div className="book-title-container">
        <td className="book-title">{title}</td>
        </div>
        <td>
          <img src={cover}/>
        </td>
        {this.state.showQuote ? <td className="book-quote">{quote}</td> : null}
      </tr>
    );
  }
}

Notice that our two stateful components are written in the ES6 Class instantiation patterns. Stateful components are referred to as Class Components and are extended from React.Component, inheriting its stateful reactivity from the React library. Stateful components can also receive props though and in my examples, the state is defined with a value accessed from the passed down props.

Stateless components only receive props and are written as Function declarations. Stateless components are static and often act like containers in an application. They themselves do not need to have data re-rendered, but can pass along changing data.

The main ReadingApp component needs to be stateful to render books as they are added, deleted, or order swapped.

The ReadingList component can be stateless, because it's main responsiblity is acting as a container for the ReadingListEntry components it renders with its inherited data passed right along. ReadingListEntry again, is stateful, for the clicks. A showQuote property is set on the ReadingListEntry components' state object, which will be switched back and forth true/false on click and checked before displaying. Seen below:

In designing our components, it's important to only give state when necessary. If the component is passing data and not meant to be interactive, let it remain stateless. Give parents state over children, unless the child has its' own reason to have state (like in the case of our click function).

*In React 16.8, Hooks are introduced, which use a form of state without class instantiation. More on that in the docs: React Hooks

ursula k. le guin reading her translation of the tao te ching

Backbone Getters and Setters

addupe — Mon, 02 Dec 2019 07:07:57 +0000

Backbone.js is a JavaScript framework that gives our application development some structure, separating our concerns between data (Models) and display (Views). When dealing with our Models in Backbone, we get two handy methods that help us modify and access our data. These are referred to as getters and setters.

.set()
.get()

Before we dive in, let's briefly take a peek at the Backbone.js source code:*

 Model = Backbone.Model = function (attributes, options) {
  var attrs = attributes || {};
  options || (options = {});
  this.preinitialize.apply(this, arguments);
  this.cid = _.uniqueId(this.cidPrefix);
  this.attributes = {};
  if (options.collection) this.collection = options.collection;
  if (options.parse) attrs = this.parse(attrs, options) || {};
  var defaults = _.result(this, 'defaults');
  attrs = _.defaults(_.extend({}, defaults, attrs), defaults);
  this.set(attrs, options);
  this.changed = {};
  this.initialize.apply(this, arguments);
};

We don't need to go deeply into what is happening here, but let's take some notes:

attributes are taken in and set
we have a set of defaults given to the object that we might use
set is used here
there’s an object for storing things changed
dealing with events
we also do some intializing probably dealing with view

We might guess that .set() is pretty important to the Model object if it is used in the construction of our big daddy parent object.

And if we look at the annotations made by Backbone developers on set...

This is the core primitive operation of a model, updating the data and notifying anyone who needs to know about the change in state. The heart of the beast.

.set()

is ~60 lines of code
takes in attributes
the new value
modifies the model objects' matching key/value pair
notifies any event listeners to trigger their operations

.get()

is only 2 lines of code
is essentially the equivalent of this[key]
retrieves values from the model attributes

Cool.

Here's a simplified example of how these functions might be used.

Let's say we have a modeling agency called 'Rlly Legit Models' and our agency website uses backbone. We've just signed a new model and are displaying some information to our page visitors, but were missing some information when we created this 'instance' of model.

Here's our model:

Here's his information:

const zoolander = new Model({
  name: 'derek',
  headshot: /default.jpg,
  looks: 'really, really, really ridiculously good-looking',
  canTurnLeft: false, 
  walkOffsLost: 1,
  mermaid: 'MERMAN', 
  biggestCompetition: 'Hansel',
  howOld: 'dinosaur',

});

And here's our website currently.
We're also in the process of rebranding from a produce mascot costume distributer service to a rlly legit agency. We've kept some of our previous staff on board.

Oh! We get a notification that Derek has uploaded a new image.
We need to build out some operation that can store that image onto our zoolander object.

This operation would include .set().
We would call set with two arguments: the attribute to be modified, and the value to assign to that attribute. Something like:

zoolander.set('headshot', '/images/ridiculouslyGoodLooking.jpg')

Our zoolander instance would now look like this:

const zoolander = new Model({
  name: 'derek',
  headshot: ‘/images/default.jpg’,
  looks: 'really, really, really ridiculously good-looking',
  canTurnLeft: false, 
  walkOffsLost: 1,
  mermaid: 'MERMAN', 
  biggestCompetition: 'Hansel',
  howOld: 'dinosaur',

});

To avoid complexity, let's assume we have a functioning event listener somewhere in our application that will render new information on the page as it changes. Our changed attribute is somewhere in the computer! How will we get it out and onto the page??!?

Our event listener would be using .get(). The information would be retrieved from the model instance and appended to the DOM. Inside the event listener callback we would have some version of this getter:

this.model.get('headshot'));

Wow, really, really, really ridiculously good looking.

*backbone.js annotated source code

Stacks and Queues Almighty

addupe — Mon, 25 Nov 2019 04:36:49 +0000

Let's talk Stacks and Queues.

But first, because Stacks and Queues are kinds of data structures:
What is a data structure?
Are they language specific?

Data Structures are just the containers our computers store data in.

When implemented we're talking languages, but when we're talking about the logical concept and behavior of these structures we're talking Computer Science.*

Here's the definition from Wikipedia's Data Structure page, which is worth a look:

In computer science, a data structure is a data organization, management, and storage format that enables efficient access and modification. More precisely, a data structure is a collection of data values, the relationships among them, and the functions or operations that can be applied to the data.[^1]

It's just a collection.
Usually characterized by the ways you:

add to
remove from
and access the data within

And why do we care how our data is stored?

You might not be God, like Bruce here. Or Google.
But even if you don't have 7.7 billion people's information to manage,
it's best to optimize your storage to suit your needs.

Computers are our friends.
Friends who we can ask to keep track of information for us and do things with that information upon request. And we love computers for it. They can make our lives easier. Thank you, Computer.

But they can only ~~love~~ help us, if we give them structures they can manage efficiently.

There are many data structures: Arrays, Linked Lists, Doubly Linked Lists, Records, Trees, Graphs, Trees, Binary Trees, B-Trees, Stacks, Queues, and so on.[^2]

Stacks

Remember a data structure is just a way of storing data. Stacks are linear structures (meaning it's elements are sequential/the ordering matters). With stacks, it's useful to think of a stack of books or a stack of pancakes. You always care about the top of the stack (the end of the collection).

When using a stack, or choosing to use a stack, you're primarily concerned with being able to push and pop from the stack.

We can also keep track of the size of our stack if we want. And we can peek at our stack, which just takes a look at the top element in our structure.

Push = add.
Pop = remove.
Peek = access.

And we're always adding or removing from the top (which means the end 🙄) of the stack. The common abbreviation of this rule is: FILO First In Last Out, or LIFO Last In First Out. They mean the same thing.

Here's a push, pop, and size implementation (in pseudoclassical JS).
^{(no peek here, but you'd just want to grab the last element)}

First, setting up the stack:

const Stack = function() {
  this.storage = {};
  this.size = 0;
};

Push:

Stack.prototype.push = function(value) {
  this.storage[this.size] = value;
  this.size++;
};

Pop:

Stack.prototype.pop = function() {
  const keys = Object.keys(this.storage);
  const popped = this.storage[keys.length - 1];
  delete this.storage[keys.length - 1];
  this.size--;
  return popped;
};

What's my ~~age~~ size again?


Stack.prototype.size = function() {
  return this.size < 0 ? 0 : this.size;
};

Basic applications for the stack structure:

undo/redo commands
word processing
the call stack (it's own kind of stack structure)
pancakes
poltergeisting

Implementation is usually done with an Array or Linked List.

What identifies the data structure as a stack in either case is not the implementation but the interface: the user is only allowed to pop or push items onto the array or linked list, with few other helper operations.[^3]

If implementation is done with an Array,
General C.S.* Array structures (not the ones you might see in JavaScript for example) have a set, pre-determined size. This can result in stack overflow!

^Oh ^no, ^oh ^~~god~~ ^bruce

Stack overflow is what happens when a program tries to use more memory than is available in the call stack.^[4]

Time complexity wise^[5] — stack insertion, removal, access, and size return are constant, because we're only ever concerned with the top of the stack.

Queues

Queues are very similar to stacks.
[x] Data Structures
[x] Linear
[x] Implemented with your choice of underlying structure
[ ] Only concerned with the end of the collection
[ ] FILO/LIFO
[ ] Like pancakes
[ ] Applications
[x] O(1) time complexity

Ok, we've got some differences here.

Queues work by a FIFO First In First Out, or LILO Last In Last Out system. Queues IRL are at the movie theater ticket line, in the grocery store checkout, at the DMV, in the waiting room to the underworld.

When you remove from the queue, you remove from the beginning of the collection, just like you would from a line of people. When you add, you add to the end of the collection, like you would to the back of a line.

The names for adding and removing change up on us a bit.

Enqueue = add.
Dequeue = remove.

Here's another basic, beginner implementation (also pseudoclassical)^[6]
This time with queues.

Set up:

const Queue = function() {
  this.storage = {};
  this.size = 0;
};

Enqueue:

Queue.prototype.enqueue = function(value) {
  this.size++;
  this.storage[this.size] = value;
};

Dequeue:
^{it's midnight on July 21, 2007 and you're first up to buy the Deathly Hallows.}

Queue.prototype.dequeue = function() {
  this.size--;
  const keys = Object.keys(this.storage);
  const dequeued = this.storage[keys[0]];
  delete this.storage[keys[0]];
  return dequeued;
};

Size:


Queue.prototype.size = function() {
  return this.count < 0 ? 0 : this.count;
};

Basic applications:

print queues
cpu memory
online shopping
booking angel olsen tickets online
searching graphs
call centers
rollercoaster tycoon

👏In Conclusion👏

Same:
[x] Data Structures
[x] Linear
[x] Implemented with your choice of underlying structure
[x] O(1) time complexity

Not the same:
[ ] Only concerned with the end of the collection
[ ] First/Last rules
[ ] Like pancakes
[ ] Applications

[1]Wikipedia's Data Structure Page
[2]Big List of Data Structures
[3]Wiki-Stack
[4]Meta Overflow
[5]Big O
[6]Pseudo-what?
*Computer Science, my dude.