> The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.
>
> \- [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)

The DOM is the interface between our CSS/HTML and javascript. It allows us to change things with the use of javascript. Everything lives inside of one object, the "document".

Selecting an element is easily accomplished using `document.querySelector()`, which will select the given input, say a `<p>` tag. From there, we have the ability to manipulate it by first saving the selection to a variable and then using dot notation to call on styles like so: `p.style.color = "red";` which takes a variable `p` that we assigned with `document.querySelector("p")` and changes the CSS style "color" to red.

### First Five Methods

`document.getElementById()`
: returns an element by its ID.

`document.getElementsByClassName()`
: returns all elements matching a given class name

`document.getElementsByTagName()`
: returns all elements of the matching tag name.

`document.querySelector()`
: returns the first matching occurrence of the given CSS selector

`document.querySelectorAll()`
: returns all matching occurrences of the given CSS selector

### Manipulating Styles, Text/Content, Attributes

#### Styles

We have access to the style property through the DOM, which allows us to add, change or remove the style properties of a given element. A few easy examples of changing styles:

```javascript
var name = document.getElementById("name");

name.style.color = "red";
name.style.border = "1px solid black";
name.style.fontSize = "16px";
name.style.background = "black";
```

classList gives us the ability to add, delete or toggle a new class onto an element. We could create a new class in our CSS that sets the text size to 50 with a black background and white text, and through javascript, add that unassigned CSS class to any element we would like.

```css
/* CSS FILE */

.standOut {
  font-size: 50px;
  color: white;
  background: black;
}
```

```javascript
// JAVASCRIPT FILE

var so = docutment.getElementById("name");

// add the class .standOut to the item with ID of "name"
so.classList.add("standOut");
// removes class standOut to the item with the ID of "name"
so.classList.remove("standOut");
// add a class if it does not exist or remove if the class exists
so.classList.toggle("standOut");
```

#### Text and Content

The `.textContent` method allows us to change the text inside an element. We, for example, can select a `<p>` with `querySelector("p")` and store it in a var that gives us access to the text contained inside from which we can read the existing text or replace it with new text. Caution needs to be used as setting new text with `.textContent` will not preserve any HTML or content within the selected element. Adding content through this method will also not allow the input of HTML elements, they will be escaped.

`.innerHTML` is like `.textContent` except it will return a string with all the HTML contained in the provided element. Setting content this way provides the same problem we have with `.textContent`, no inner HTML content will be preserved when we add new content. When adding new content through this method, we have the ability to use HTML in the new content, unlike `.textContent`.

#### Attributes

`.getAttribute()` and `.setAttribute()` allow us to read and write attributes like `href` or `src` .

```html
<a href="www.google.com">I'm a link</a> <img src="logo.png" />
```

```javascript
var link = document.querySelector("a");
link.getAttribute("href"); // www.google.com

// change href
link.setAttribute("href", "http://yahoo.com");
```

### Events

> DOM Events are sent to notify the code of interesting things that have taken place. Each event is represented by an object based on the Event interface and may have additional custom fields and/or functions used to get additional information about what happened. Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.
>
> \- [MDN](https://developer.mozilla.org/en-US/docs/Web/Events)

Events are notifications sent with key clicks, mouse clicks, button clicks, etc. We use them by attaching an event listener to a set element, and from there, we can launch other processes through javascript once the event notification has been triggered. A common listener is `element.addEventListener(type, functionToCall);` .

```javascript
var button = document.querySelector("button");
button.addEventListener("click", function () {
  console.log("THE BUTTON HAS BEEN CLICKED!");
});
```

The above code sends a console message once the selected button has been clicked. Named functions can also be used in place of an anonymous function, most of the time, an anonymous function will be preferred, but some situations may arise where there is a function used in multiple places where a named function would be preferred over an anonymous one.

Some common addEventListener types:

- click
- mouseover
- mouseout
- keydown
- keypress
- keyup
- focus
- blur
- change
- submit
- scroll
- resize
- load

The DOM is the interface between our CSS/HTML and javascript. It allows us to change things with the use of javascript. Everything lives inside of one object, the "document".

An Introduction to the Almighty DOM

Testing a react application using Chakra-UI is reasonably straightforward once you adjust the `render` function of [react-testing-library](https://testing-library.com/). So we'll start by testing a basic card example grabbed from the Chakra [docs](https://chakra-ui.com/box).

```javascript
import { Box, Image, Badge, Icon } from '@chakra-ui/core';
import PropTypes from 'prop-types';

const RecipeCard = (props) => {
  const { description, title, rating } = props;
  return (
    <Box
      maxW="sm"
      borderWidth="1px"
      rounded="lg"
      background="white"
      overflow="hidden"
    >
      <Image src="ourImage.png" alt={title} />
      <Box p="6">
        <Box d="flex" alignItems="baseline">
          <Badge rounded="full" px="2" mr="1" variantColor="purple">
            type
          </Badge>
          <Badge rounded="full" px="2" mr="1" variantColor="green">
            tags
          </Badge>
        </Box>
        <Box
          mt="1"
          fontWeight="semibold"
          as="h4"
          lineHeight="tight"
          isTruncated
        >
          {title}
        </Box>
        <Box> {description} </Box>
        <Box d="flex" mt="2" alignItems="center">
          {Array(5)
            .fill('')
            .map((_, i) => (
              <Icon
                name="star"
                key={i}
                color={i < rating ? 'teal.500' : 'gray.300'}
              />
            ))}
          <Box as="span" ml="2" color="gray.600" fontSize="sm">
            {title} reviews
          </Box>
        </Box>
      </Box>
    </Box>
  );
};

RecipeCard.defaultProps = {
  rating: 0,
};

RecipeCard.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  rating: PropTypes.number,
};

export default RecipeCard;
```

We're also passing along a `ThemeProvider` in our `app.jsx` that has the following theme:

```javascript
// theme.js
import { theme as chakraTheme } from '@chakra-ui/core';

const fonts = {
  ...chakraTheme.fonts,
  mono: `'Menlo', monospace`,
};

const breakpoints = ['360px', '768px', '1024px', '1440px'];
breakpoints.sm = breakpoints[0];
breakpoints.md = breakpoints[1];
breakpoints.lg = breakpoints[2];
breakpoints.xl = breakpoints[3];

const theme = {
  ...chakraTheme,
  colors: { ...chakraTheme.colors, black: '#16161D' },
  fonts,
  breakpoints,
  icons: { ...chakraTheme.icons },
};

export default theme;
```

As far as I've been able to work out, the problem getting the `render` function to work comes from the passing of theme down from parent components, causing siblings not to render correctly or at all. The solution to this was found in the [testing-library](https://testing-library.com/docs/react-testing-library/setup#custom-render) docs under setting up a custom `render` . The only changes I needed to implement were passing down my theme file and the `CSSReset` just for consistency.

```javascript
// /tests/test-utils.js
/* eslint-disable react/jsx-filename-extension */
import React from 'react';
import { render } from '@testing-library/react';
import { ThemeProvider, CSSReset } from '@chakra-ui/core';
import theme from '../src/theme';

const AllTheProviders = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <CSSReset /> {children}
    </ThemeProvider>
  );
};

const customRender = (ui, options) =>
  render(ui, {
    wrapper: AllTheProviders,
    ...options,
  });

// re-export everything
export * from '@testing-library/react';

// override render method
export { customRender as render };
```

Now that we have extended the `render` component, we can import it directly from our `test-utils.js` file and proceed to test as usual. Everything should be rendering now, and we should be able to test our components to our hearts' desire.

```javascript
import React from 'react';
import { screen } from '@testing-library/react';
import { render } from './test-utils';
import RecipeCard from '../src/components/card';

it('renders a card', () => {
  const title = 'heyoooo';
  const desc = 'basic card example';
  const rating = 4;
  render(<RecipeCard title={title} description={desc} rating={rating} />);

  expect(screen.getByText(title)).toBeInTheDocument();
  expect(screen.getByText(desc)).toBeInTheDocument();
});
```

Testing in applications that use Chakra-UI and react testing library

Testing Chakra-UI by way of React Testing Library

While using `ObjectInputStream` and `ObjectOutputStream` together for a class project I continually ran into `java objectinputstream invalid type code: ac` which was becoming endlessly annoying. Initially, I was attempting to use try-with-resources blocks to limit my need for finally catches, but this proved to be the main culprit in my issue.

```java
public static void main(String[] args) {
  try (FileOutputStream fo = new FileOutputStream(db)) {
    try (ObjectOutputStream oo = new ObjectOutputStream(fo)) {
      // do stuff
    }
  }
}

public static void StuffDoer() {
  try (FileInputStream fi = new FileInputStream(db)) {
    try (ObjectInputStream oi = new ObjectInputStream(fi)) {
      // read stuff
    }
  }
}
```

From what I've been able to gather this has to with `ObjectOutputStream` writing the headers and sharing between the two, but only while it has not been closed, once closed and we attempt to open a second/new stream it's no longer able to handle the binary data that has been written.

Since I'm still a 🐶 in this Java stuff, research was needed and StackOverflow seems to have provided it. [this](https://stackoverflow.com/a/57397429) answer was what I found to work best for my use cases. It creates a class extending `ObjectOutputStream` that basically avoids writing the headers each time as far as I can tell, it's still kind of magic to me.

```java
import java.io.DataOutputStream;
import java.io.IOException;
import java.io.ObjectOutputStream;
import java.io.OutputStream;

public class AppendableObjectOutputStream extends ObjectOutputStream {

    private boolean append;
    private boolean initialized;
    private DataOutputStream stdout;

    protected AppendableObjectOutputStream(boolean append) throws IOException, SecurityException {
        super();
        this.append = append;
        this.initialized = true;
    }

    public AppendableObjectOutputStream(OutputStream out, boolean append) throws IOException {
        super(out);
        this.append = append;
        this.initialized = true;
        this.dout = new DataOutputStream(out);
        this.writeStreamHeader();
    }

    @Override
    protected void writeStreamHeader() throws IOException {
        if (!this.initialized || this.append) return;
        if (stdout != null) {
            stdout.writeShort(STREAM_MAGIC);
            stdout.writeShort(STREAM_VERSION);
        }
    }

}
```

Usage of the class will be nearly same as just outright using `ObjectOutputStream`

```java
File file = new File('some.dat');
boolean append = file.exists();
try ( FileOutputStream fo = new FileOutputStream(file, append);
  AppendableObjectOutputStream ao = new AppendableObjectOutputStream(fo, append);) {
    oo.writeObject(...);
  } catch(...) {
    // catch some stuff
  }
```

Work around for corrupted data from object input streams

java objectinputstream invalid type code: ac, why...

> Fast, unopinionated, minimalist web framework for Node.js
>
> - [expressjs](https://expressjs.com/)

Express is a web application framework built on node.js. In this post, I'll explain the basics of setting it up and creating a simple web application.

## Setup

Let's get this series of posts started by creating a basic app that will send back a predetermined string to the web browser. First, create a new directory and cd into it.

`mkdir hello-world && cd hello-world`
Once we're in there, we need to create our package.json to store modules needed for our application and store basic information about the project. We'll run the following `npm init -y`, which will run through the process without asking any extra questions of us, if you'd like the more verbose method, remove `-y` from the command. We now have a package.json that looks like this:

```javascript
/* ./package.json */
{
    "name": "hello-world",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}
```

Let's run through this line by line really quickly.

- "name" is the project's name, which is just grabbed directly from the folder name.
- "version" is what version of application this is currently.
- "description" is where we put a small application description.
- "main" is the filename of the main application file. By default, this is set to index.js.
- "scripts" are where we can add things to run by typing "npm \*".
- "keywords" takes an array of strings and is used to help people find your package when uploaded to npm.
- "author" is the name of the person creating the project.
- "license" whatever license you're releasing under. defaults to [ISC](https://opensource.org/licenses/ISC)

Next up, let us install express with npm so we can access it in our application. In the `hello-world` directory, type the following in terminal `npm i express`. This will add express to our package.json under a new section called "dependencies". And we now have access to express and can use it in our application. We'll continue by creating our `index.js` and filling it with a basic application to send a message to the browser when hitting the root path.

```javascript
// index.js
const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('root path');
});

app.listen(3000, () => {
  console.log('listening on port 3000');
});
```

The rundown:

- First, we import the express module and assign it to a `const` since this won't change.
- We then create a `const app` that calls express and gives us access to all the modules we need.
- `app.get(...` tells express to watch for a GET request on the given path, which is the first argument it takes `'/'` in our case. The second argument is the callback function that then tells the server to send the message 'root path' back to user once the path has been hit.
- We then start up the server on port 3000 and return a console message, so we know it's running.

That's it for this portion of my express series. We've created a basic server that sends a message back when we hit the `'/'` path on our localhost. Easy Peasy. Next, we'll get into view rendering and some different types of engines we can use.

Fundamentals to using express.js for creating node.js backend APIs

Basics of Creating Web APIs with Node.JS and Express

> jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
>
> --[jQuery](http://jquery.com/)

jQuery is a powerful and robust JavaScript library for the web. It can greatly simplify the amount of code we need to write and in turn make our lives much easier. It's not always needed as some of its capabilities are not much quicker than just writing the JavaScript ourselves. You can take a look at [You Might Not Need jQuery](http://youmightnotneedjquery.com/) to get an idea if it's right for you.

### Reasons to use jQuery

It fixes/fixed the broken DOM API when originally released. It's shorter, clearer and easier to use, automatically handles cross browser support for you, which when doing on your own can be messy and tedious, and AJAX support. It's a popular framework that many people use; meaning there is a huge network on the web of resources to go through for help.

### Why not use jQuery

The DOM API is no longer broken, things like `.querySelector` and `.querySelectorAll` now exist in the DOM API so jQuerys use case here is voided. It doesn't do anything you can't do on your own; it's heavy for small use cases like animation when you can find lighter libraries to handle these for you.

Either way, it's worth knowing. Having the knowledge is useful because many places still use it and having that (or any additional) skill in your quiver will always be helpful.

## Basics

Including jQuery in your project is as simple as linking any JavaScript file:

```html
/* locally */
<script type="text/javascript" src="jquery.js"></script>

/* CDN */
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32oNMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"
></script>
```

### selecting and css with jQuery

`$("selectorGoesHere")` much like `.querySelectorAll` is used as our method for selecting all types of an element. Once selected we have the option of using `.css(property, value)` for changing the style on the selected elements.

### methods

`.text()` return same content as `.textContent()` would in vanilla JavaScript, all of the text (including html tags) inside of a selected element. It also allows you to write new content into the element, but cannot input html code.

`.html()` same as `.text()` except you can now include html code into the new content add through the `.html()` method.

`.attr()` allows us to retrieve an attribute and/or set it. and example would be changing the `src` attribute of an `img` tag like so `$("img").attr("src", "http://fake.img/new.png");`
`.val()` returns value of a selected element. Can also be used to set value of an element.

`.addClass()` `.removeClass()` `.toggleClass()` self explanatory here; add, remove or toggle a class on a selected element or group of elements.

## Events

`.click(function())` how too quickly and easily add click listener to an element or group of elements.

NOTE: when using on group of objects when referring to clicked item in the function you will need to use the jQuery version of `this` which is just `$(this)` . This goes for any instance of when you'll want to use a jQuery method on `this` .

`.keypress()` is a way to add a keypress event listener to an element, `.keydown()` and `.keyup()` also exist. Down fires when you press a button, up fires when released, and press fires in-between key down and key up usually.

`.on()` works similarly to `.addEvenListener` by allowing you specify a type of event to listen for. `.on("click"` will also be more useful than `.click()` most of the time due to it also working for elements that also ready exist, plus those that do not at time of page loading...

## Effects

`.fadeOut() .fadeIn() .fadeToggle()` fade out/in/toggle an element, and gives the option to add a speed, and callback.

A brief look at jQuery a powerful javascript library for working in the browser

chris bailey

writings

An Introduction to the Almighty DOM

Testing Chakra-UI by way of React Testing Library

java objectinputstream invalid type code: ac, why...

Basics of Creating Web APIs with Node.JS and Express

Lets Party With JQuery Like It Is 2006