Forem: Lenmor Ld

React Workshop - free online workshop by SCS Concordia

Lenmor Ld — Tue, 27 Oct 2020 21:08:22 +0000

Join us next week for a React workshop by SCS Concordia (Montreal) in collaboration with Autodesk!

This workshop will cover concepts, examples, and exercises to help you build the UI for your next project. React is a frontend Javascript library that allows you to build interactive UIs.

Registration: Workshop happening at November 5 (Thursday) 17:30 EST

Sign up through Facebook events:
https://www.facebook.com/events/1818957074910385

or sign up directly through this Google Form:
https://forms.gle/pU4gcKTLugaXaTmb8

Topics

Talk topics include but are not limited to:

✅ What React is and what you can do with it
✅ Modern Javascript (ES6) syntax and tricks
✅ Writing JSX and rendering elements to HTML
✅ Building components, composition and splitting
✅ Displaying lists of item objects using components
✅ Understanding React data flow with props and state
✅ Using Hooks in function components
✅ Adding interactivity with HTML inputs, forms and event-handling
✅ Fetching data from public APIs
✅ Building a project while thinking in React

Preview

This is an online event that will be conducted live on YouTube. The link will be provided prior to the event, so make sure you subscribe!

https://www.youtube.com/channel/UCvLvkP20J4GGKLEG0nnzvzg

See you there! 🤓
👩‍💻 👨‍💻

Testing async stuff in React components with Jest and react-testing-library

Lenmor Ld — Sat, 17 Oct 2020 20:41:05 +0000

Initially posted in lennythedev.com

When testing React components with async state changes, like when data fetching with useEffect, you might get this error:

TL;DR

Issue



Warning: An update to <SomeComponent> inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...)

Solution

When using plain react-dom/test-utils or react-test-renderer, wrap each and every state change in your component with an act()
When using React Testing Library, use async utils like waitFor and findBy...

Async example - data fetching effect in `useEffect`

You have a React component that fetches data with useEffect.
Unless you're using the experimental Suspense, you have something like this:

Loading/placeholder view
- When data is not there yet, you may display a placeholder UI like a spinner, "Loading..." or some skeleton item.
Data view
- When data arrives, you set data to your state so it gets displayed in a Table, mapped into <li>s, or any data visualization have you.



import React, { useEffect, useState } from "react";

const Fetchy = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // simulate a fetch
    setTimeout(() => {
      setData([1, 2, 3]);
    }, 3000);
  }, []);

  return (
    <div>
      <h2>Fetchy</h2>
      <div>
        {data.length ? (
          <div>
            <h3>Data:</h3>
            {data.map((d) => (
              <div key={d}>{d}</div>
            ))}
          </div>
        ) : (
          <div>Loading</div>
        )}
      </div>
    </div>
  );
};

export default Fetchy;

Testing a data fetch

😎 Now, you want to test this.
Here, we're using React Testing Library, but the concepts apply to Enzyme as well.

Here's a good intro to React Testing Library



describe.only("Fetchy", () => {
    beforeAll(() => {
        jest.useFakeTimers();
    })

    afterAll(() => {
        jest.useRealTimers()
    })

    it("shows Loading", async () => {
        render(<Fetchy />);

        screen.debug();
        expect(screen.getByText("Loading")).toBeInTheDocument();

        jest.advanceTimersByTime(3000);

        screen.debug();
        expect(screen.getByText("Data:")).toBeInTheDocument();
    });
});

getByText() finds element on the page that contains the given text. For more info on queries: RTL queries

Render component
screen.debug() logs the current HTML of document.body
Assert Loading UI. It logs:
```
...
<div>Loading</div>
...
```

4. Simulate to the time data arrives, by fast-forwarding 3 seconds. `jest.advanceTimersByTime` lets us do this
5. `screen.debug()`
6. Assert Data UI. It logs:
    ```


    ...
    <h3>Data:</h3>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    ...

🕐 Note that we use jest.advanceTimersByTime to fake clock ticks. This is so test runner / CI don't have to actually waste time waiting.
To make it work, put jest.useFakeTimers on setup and jest.useRealTimers on teardown

🖥 You can also put a selector here like screen.debug(screen.getByText('test')). For more info: RTL screen.debug

✅ Tests pass...

😱 but we're getting some console warnings 🔴

Note that it's not the screen.debug since even after commenting it out, the same warning shows.

Wait, what is `act()`?

Part of React DOM test utils, act() is used to wrap renders and updates inside it, to prepare the component for assertions.

📚 Read more: act() in React docs

The error we got reminds us that all state updates must be accounted for, so that the test can "act" like it's running in the browser.

In our case, when the data arrives after 3 seconds, the data state is updated, causing a re-render. The test has to know about these state updates, to allow us to assert the UI changes before and after the change.



Warning: An update to Fetchy inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
  /* fire events that update state */
});
/* assert on the output */

Coming back to the error message, it seems that we just have to wrap the render in act().
The error message even gives us a nice snippet to follow.

Wrapping state updates in `act()`

Wrap render in `act()`



it("shows Loading", async () => {
    act(() => {
        render(<Fetchy />);
    });
    ...
});

😭 Oh no, we're still getting the same error...

Wrapping the render inside act allowed us to catch the state updates on the first render, but we never caught the next update which is when data arrives after 3 seconds.

Wrap in `act()` with mock timer



it("shows Loading and Data", async () => {
    act(() => {
        render(<Fetchy />);
    });
    ...
    act(() => {
        jest.advanceTimersByTime(3000);
    });
    ...
});

🎉 Awesome! It passes and no more errors!

Using async utils in React Testing Library

React Testing Library provides async utilities to for more declarative and idiomatic testing.



it("shows Loading and Data", async () => {
    render(<Fetchy />);

    expect(await screen.findByText("Loading")).toBeInTheDocument();
    screen.debug();

    expect(await screen.findByText("Data:")).toBeInTheDocument();
    screen.debug();
});

Instead of wrapping the render in act(), we just let it render normally. Then, we catch the async state updates by await-ing the assertion.
- findBy* queries are special, that they return a promise that resolves when the element is eventually found
We don't even need the advanceTimersByTime anymore, since we can also just await the data to be loaded.
screen.debug() only after the await, to get the updated UI

This way, we are testing the component closer to how the user uses and sees it in the browser in the real world. No fake timers nor catching updates manually.

📚 Read more: RTL async utilities

❌😭 Oh no! Tests are failing again!

Note that if you have the jest fake timers enabled for the test where you're using async utils like findBy*, it will take longer to timeout, since it's a fake timer after all 🙃

Timeouts

The default timeout of findBy* queries is 1000ms (1 sec), which means it will fail if it doesn't find the element after 1 second.

Sometimes you want it to wait longer before failing, like for our 3 second fetch.
We can add a timeout in the third parameter object waitForOptions.



it("shows Loading and Data", async () => {
    render(<Fetchy />);

    expect(await screen.findByText("Loading", {}, { timeout: 3000 })).toBeInTheDocument();
    screen.debug();

    expect(await screen.findByText("Data:", {}, {timeout: 3000})).toBeInTheDocument();
    screen.debug();
});

✅😄 All green finally!

Other async utils

findBy* is a combination of getBy* and waitFor. You can also do:



await waitFor(() => screen.getByText('Loading'), { timeout: 3000 })

📚 More details on findBy: RTL findBy

Async example 2 - an async state change

Say you have a simple checkbox that does some async calculations when clicked.
We'll simulate it here with a 2 second delay before the label is updated:



import React, { useState } from "react";

const Checky = () => {
    const [isChecked, setChecked] = useState(false);

    function handleCheck() {
        // simulate a delay in state change
        setTimeout(() => {
            setChecked((prevChecked) => !prevChecked);
        }, 2000);
    }

    return (
        <div>
            <h2>Checky</h2>
            <h4>async state change: 2 second delay</h4>
            <input type="checkbox" onChange={handleCheck} id="checky2" />
            <label htmlFor="checky2">{isChecked.toString()}</label>
        </div>
    );
};

export default Checky;

Wrap in `act()` with mock timer

Testing with act() can look like this:



it("updates state with delay - act() + mock timers", async () => {
    act(() => {
        render(<Checky />);
    })

    screen.debug();
    let label = screen.getByLabelText("false");
    expect(label).toBeInTheDocument();

    act(() => {
        fireEvent.click(label);
        jest.advanceTimersByTime(2000);
    })

    screen.debug()
    expect(screen.getByLabelText("true")).toBeInTheDocument();
});

Render component, wrap in act() to catch the initial state

screen.debug() to see HTML of initial UI



...
<input id="checky2" type="checkbox" />
<label for="checky2">false</label>
...

3. Assert initial UI: "false" label
4. Click the label using `fireEvent`
5. Simulate to the time state is updated arrives, by fast-forwarding 2 seconds. `jest.advanceTimersByTime`
5. `screen.debug()`
6. Assert updated UI with label "true"
    ```


    ...
    <input id="checky2" type="checkbox" />
    <label for="checky2">true</label>
    ...

Using async utils in React Testing Library

Like in the first example, we can also use async utils to simplify the test.



it("updates state with delay - RTL async utils", async () => {
    render(<Checky />);

    let label = await screen.findByLabelText("false")
    expect(label).toBeInTheDocument();
    screen.debug();

    fireEvent.click(label);

    expect(await screen.findByLabelText("true", {}, { timeout: 2000 })).toBeInTheDocument();
    // await waitFor(() => screen.getByLabelText("true"), { timeout: 2000 });
    screen.debug()
});

As before, await when the label we expect is found. Remember that we have to use findBy* which returns a promise that we can await.

Timeout is needed here since we are not under jest's fake timers, and state change only happens after 2 seconds.

An alternative to expect(await screen.findBy...) is await waitFor(() => screen.getBy...);.
getBy* commands fail if not found, so waitFor waits until getBy* succeeds.

✅ All good! Tests passes and no warnings! 😄💯

Code

https://github.com/lenmorld/react-test-library-boilerplate

Conclusion

🙌 That's all for now! Hope this helps when you encounter that dreaded not wrapped in act(...) error and gives you more confidence when testing async behavior in your React components with React Testing Library. 👍

Node Workshop part 2 - free online workshop by SCS Concordia

Lenmor Ld — Sat, 22 Aug 2020 13:12:57 +0000

Come learn about web technologies at second installment of the Node.js workshop!

This workshop will cover code and concepts to help you build a solid foundation for your next web project!

Registration: Workshop happening at August 27 (Thursday) 17:30 EST

Sign up through Facebook events:
https://www.facebook.com/events/751112552346326

or sign up directly through this Google Form:
https://forms.gle/oa8TLc3J5Yh1F11E9

Topics

This is part 2 of the previous Node Workshop, the content will continue where we left off on part 1:

Discussed in Part 1
✅ use Node and Express to build a web server and REST API
✅ understand routing, request and response
✅ implement CRUD with HTTP methods

Recording of Part 1: https://www.youtube.com/watch?v=F7adheneS-8

Will be discussed in Part 2
🔲 build a server-rendered website using templates
🔲 connect to a Cloud NoSQL database: MongoDB Atlas DB
🔲 user authentication with sessions, cookies and tokens
🔲 using external APIs, such as Github Jobs, Giphy, Spotify and more!

Preview

Here's a quick preview of the content, including a review of part 1 if you missed it:

Workshop preview in Google slides

Screenshots

*Note: This is an online event that will be conducted live on YouTube. The link will be provided prior to the event, so make sure you sign up!

See you there! 🤓
👩‍💻 👨‍💻

Show off Github repos in your Gatsby site using Github GraphQL API

Lenmor Ld — Thu, 23 Jul 2020 00:32:21 +0000

Want to show off your Github repositories in your Gatsby site? 👨‍💼👩‍💼

Preview:

Even if you don't know GraphQL, this guide shows you just enough GraphQL to get you started learning it and using it. 🤓

We'll use Github GraphQL API v4 to get all the repositories from your Github account and display it in your Gatsby site! 📊

Let's get into it! 🏃‍♀️🏃‍♂️

GraphQL

Intro to GraphQL

A GraphQL API allows us to more efficiently create and consume APIs.

For example, we might fetch something like this using REST:

GET /api/:name/projects
GET /api/:name/projects/:project_id
GET /api/:name/projects/:project_id/description
GET /api/:name/projects/:project_id/name
GET /api/:name/projects/:project_id/watchers
GET /api/:name/projects/:project_id/watchers/:watcher_id
GET /api/:name/projects/:project_id/watchers/:watcher_id/name

In GraphQL, we don't have to "overfetch" and just get all data we need all at once from one endpoint:

query { 
  user(name: "myname") { 
    projects {
      name
      description
      watchers {
        name
      }
    }
  }
}

That's just the tip of the iceberg for GraphQL. 🏔 ❄
For a more detailed guide to GraphQL:

GraphQL for beginners

Danijel Vincijanović ・ Feb 14 '20

#graphql #tutorial #javascript #beginners

Github GraphQL API

Github provides a GraphQL API in their v4 update.

They even provided a GraphiQL instance named "Gituhb GraphQL API explorer", which is basically an interactive "sandbox" for testing out queries on live Github data. 🧪

This is similar to the GraphiQL you can access locally on your Gatsby site, normally on http://localhost:8000/___graphql, but with the context of your Github account

Github GraphQL API explorer

Go to Github GraphQL API explorer

After you sign-in to github, you can now make queries!
Try this one...

query { 
  viewer { 
    login
    name
    repositories(first: 10) {
      nodes {
        name
        description
      }
    }
  }
}

...which gets your Github login, name, and names of your first 10 repositories.
The node here represent each of the repositories found, which we can get the fields name and description from.

The nice thing with GraphiQL is that it gives you auto-complete. The docs on the upper-right corner are also super useful.

Query to get all the repo details we need

{
  viewer {
    login
    name
    repositories(first: 10) {
      nodes {
        id
        name
        description
        url
        updatedAt
        forkCount
        openGraphImageUrl
        stargazers {
          totalCount
        }
        readme: object(expression: "master:README.md") {
          ... on Blob {
            text
          }
        }
        licenseInfo {
          id
        }
        primaryLanguage {
          name
        }
        languages(first: 10) {
          nodes {
            name
          }
        }
      }
    }
  }
}

Which gives something like this:

I'll let you explore the Repository object to see details on the repo fields, but here are some notes:

We got the README contents by using an expression and getting the text from the Blob returned. Details here Github Community: GraphQL getting filename file content and commit date
The openGraphImageUrl contains your repo's Social Media Preview, which shows when you post your Github repo on Facebook, Twitter, blog, etc. This defaults to your Github profile photo, but it can be customized on the repo settings. Max 1MB for the photo. Photo by Christian Wiediger on Unsplash

Cool! 😎

For details on using the explorer:
Docs on Using Github GraphQL API explorer

"We can get the data, but how can we get this into our web app?" 🤷‍♀️

Github

Generate a personal access token

A personal access token gives access to our app so it can make requests to our Github account:

read repository details
read user profile data
create gists
create and delete repositories
read and write security keys
etc

To get a personal access token, you'll have to go to Developer Settings and generate one with the access scopes your app needs.

You'll only need repo and user access for this exercise.

⚠ Copy-paste the personal access token somewhere since it will disappear next time you go to this page! 😱

Gatsby - Node part

You'll need a Gatsby site 😅

If you don't have one, you can use this default starter

$ gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default
...
$ cd my-default-starter/
$ gatsby develop

There's a lot more starters here to choose from. Take your pick at Gatsby starters

Put the query somewhere in the "Node" part of Gatsby

To keep organized, let's create a file github-api.js where we can put our GraphQL query from before.

// github-api.js

exports.githubApiQuery = `
query($github_login: String!) {
    user(login: $github_login) {
      name
      repositories(first: 10) {
        nodes {
          ...
        }
      }
    }
  }
`

This is the query we used before to get repo details, but since we're not on our Github account's context anymore:

viewer is not available
Github login of account to be queried must be specified

GraphQL variables

A GraphQL variable $github_login of type String:

passed from the plugin config, and received by the query
used to identify which Github user to get info from, by login name

We're using Node syntax since this will be required later in gatsby-config.js

Put personal Access Token in an .env 🔐

Putting plaintext API keys in our config code is not secure! 🕵️‍♂️

It's such a bad idea that Github revoked my Personal Access Token as soon as I tried pushing it to a public repo! I had to get a new one 😏

Thanks for forcing me to follow secure practices, Github! 🙏

Let's use dotenv library and put sensitive keys like this in a .env file

$ yarn add dotenv

.env file

GITHUB_LOGIN=your_github_login
GITHUB_PERSONAL_ACCESS_TOKEN=your_github_personal_access_token

Install and configure Gatsby Plugin for pulling data from Github GraphQL API

$ yarn add gatsby-source-github-api

Configure plugin in `gatsby-config.js` with the query

// gatsby-config.js

// init. environment variables
const dotenv = require('dotenv');
dotenv.config();

const { githubApiQuery } = require('./github-api')

...
plugins: [
  ...
  {
    resolve: `gatsby-source-github-api`,
    options: {
      url: "https://api.github.com/graphql", // default Github GraphQL v4 API endpoint

      // token: required by the GitHub API
      token: process.env.GITHUB_PERSONAL_ACCESS_TOKEN,

      // GraphQLquery: defaults to a search query
      graphQLQuery: githubApiQuery,

      // variables: defaults to variables needed for a search query
      variables: {
        github_login: process.env.GITHUB_LOGIN
      }
    }
  }
  ...

Import the query from the module we created before
Configure the plugin so it can connect to Github GraphQL API successfully
Import Github credentials from .env: GITHUB_PERSONAL_ACCESS_TOKEN and GITHUB_LOGIN
Supply github_login variable here, so the $github_login variable in the query will have the value

Start it up! 👩‍🚀👨‍🚀

$ gatsby develop

Now that our data is available from the backend, let's use this on the frontend/UI side!

Gatsby - React part

Formulate frontend query with local GraphiQL 🧪

Fire up local GraphiQL http://localhost:8000/___graphql to see our Github data

Soooo nice to use GraphiQL, isn't it? You can just click away to formulate your query.

Copy-paste the resulting query on the "Query window" so we can use in our React component.

Create a Page

Create a page where you want to showcase your repos, like a Projects page.

// pages/projects.js

import React from "react";

export default function Projects() {
  return (
    <div>
      Projects will go here
    </div>
  );
}

`useStaticQuery` hook for querying GraphQL data

Static Query queries GraphQL at build time.

The nice thing is that it can appear anywhere in the component tree (vs page query that has to be top-level page component)
The nicer thing with the hooks version useStaticQuery is that you don't need Render Props to use it. Just run it and use the data result!

🔖 Github data only gets pulled once during build, since it's a Static Query after all. Meaning, it won't get latest updates from your Github, until site is rebuilt.

// pages/projects.js
...
import { useStaticQuery } from "gatsby"
...
export default function Projects() {
  const data = useStaticQuery(
    graphql`
      query MyQuery {
        allGithubData {
          nodes {
            data {
              user {
                repositories {
                  nodes {
                    description
                    forkCount
                    id
                    name
                    openGraphImageUrl
                    updatedAt(fromNow: true)
                    url
                    primaryLanguage {
                      name
                    }
                    languages {
                      nodes {
                        name
                      }
                    }
                    readme {
                      text
                    }
                    stargazers {
                      totalCount
                    }
                  }
                }
              }
            }
          }
        }
      }
    `
  )

const repos = data.allGithubData.nodes[0].data.user.repositories.nodes

console.log(repos)

  return (
    <div>
      <h1>Projects</h1>
      <h2>Github Repos</h2>
      <ul>
        {
          repos.map(repo =>
            <li key={repo.id}>{repo.name}: {repo.description}</li>
          )
        }
      </ul>
    </div>
  );

Note that our query pretty much reflects the query we passed to the plugin. The difference is that Gatsby gives us a bit more customizations for our frontend code.

For example, for the updatedAt field, we can upgrade from a boring timestamp "2020-07-16T02:06:57Z" to something like "updated 1 hour ago" with the use of updatedAt(fromNow: true) 🙂

Play around with your local GraphiQL (http://localhost:8000/___graphql) to find out all these fanciness.✨

Awesome! 🎉

Our fictional github hero has forked a few popular repos for demo 🦸‍♀️🦸‍♂️

Now that we have all the data we need on the UI side, time to React! 🌀📏📐

React component

Some highlights:

parse README.md using react-markdown, make it scrollable so it doesn't fill the page with one repo's README
Social Media Preview image (openGraphImageUrl) on the right side
liberal use of flexbox 😁

You can view the Projects view implementation here:
Projects vies

Voila! 💥

BONUS: Deploy in Netlify

After you built this into your Gatsby site and pushed the code to a Github repo...

This is so meta! A Github repo about getting Github repos 🥴🤯.
Gif from Giphy - computer infinite endless

Create a new site from your Gatsby site repo

From your Netlify dashboard, create new site and follow steps to create one from a Github repo

The nice thing is that you can specify the environment variables before deploy. 🤩

Remember that we can't commit .env to remote since that would expose our secrets to the cloud. 🤔 So we have to configure the env. variable directly on our cloud provider, which is Netlify in this case

Deploy! 🚀

Live demo

Code

Full implementation here built on top of gatsby-default-starter:
Full Code

Catch you in the next one! Have fun GraphQL-ing! 🙋‍♀️🙋‍♂️

Node Workshop - free online workshop by SCS Concordia

Lenmor Ld — Fri, 10 Jul 2020 00:24:31 +0000

Come learn about web technologies at this Node.js workshop!

This workshop will cover code and concepts to help you build a solid foundation for your next web project! We'll ALSO be giving out FREE UBER EATS GIFT CARDS to attendees courtesy of our sponsor, Autodesk!

Workshop happening at July 16 (Thursday) 17:30 EST

Sign up through Facebook events: https://www.facebook.com/events/1125391177830448

or sign up directly through this Google Form:
https://forms.gle/wabMEtUXMW8f9Mj76

This workshop focuses on Web servers so come and learn how to:

use Node and Express to build a web server and REST API
understand routing, request and response
implement CRUD with HTTP methods
build a server-rendered website using templates
connect to a Cloud NoSQL database: MongoDB Atlas DB
user authentication with sessions, cookies and tokens
using external APIs, such as Github Jobs, Giphy, Spotify and more!

Here's a quick preview of what you'll be working on and some prior reading to cover:

Workshop preview in Google slides

*Note: This is an online event that will be conducted live on YouTube. The link will be provided prior to the event.

See you there! 🤓
👩‍💻 👨‍💻

CSS gotcha: How to fill page with a div?

Lenmor Ld — Sun, 12 Jan 2020 21:57:05 +0000

TL;DR

If you want to have a full-page container div, make sure you have these:



/* override browser default */
html,
body {
  margin: 0;
  padding: 0;
}

/* use viewport-relative units to cover page fully */
body {
  height: 100vh;
  width: 100vw;
}

/* include border and padding in element width and height */
* {
  box-sizing: border-box;
}

/* full-sized  container that fills up the page */
div {
  height: 100%;
  width: 100%;

  /* example padding, font-size, background, etc */
  padding: 10px;
  font-size: 20px;
  background-color: lightskyblue;
}

So let's say you want a div that fills up entire page...



div {
  height: 100%;
  width: 100%;

  font-size: 20px;
  background-color: lightskyblue;
}

What?! It doesn't work! The height still only takes up the content, but not the whole page.

The width is good since a div is by default a block element, which takes as much width as possible anyways.

Can we just use a more "absolute" value like `px` ?



div {
  /* height: 100% */
  height: 865px; /* current height of my browser */
  /* ... */
}

It works... until the browser is resized

It doesn't adapt when the browser is resized.

You can use JS for this, but that's way overkill for what we wanted.

I mentioned px is "absolute", but only in the sense that they are not relative to anything else (like rem and vh). But the actual size still depends on the device. Here's some details:

Stack Overflow: Is a CSS pixel really an absolute unit?

Relative units to the rescue!

Old school `height: 100%`



html,
body {
  height: 100%;
  width: 100%;
}

div {
  height: 100%;
  /* ... */
}

Works! (We'll fix the scrollbars later)

By setting both <html> and its child <body> to 100% height, we achieve the full size.

Note that only setting either of them won't work, since percentage is always relative to another value.

In this case:

div is 100% the height of the body
body is 100% the height of the html
html is 100% the height of the Viewport

Viewport is the visible area of the browser, which varies by device.

Viewport > html > body > div

For example, an iPhone 6/7/8 has a 375x667 viewport. You can verify this on your browser dev tools mobile options.

For now, you can think about viewport as the device pixel size or resolution. But if you want to go deep:

Media Genesis: Screen Size, Resolution, and Viewport: What does it all mean?

newer solution: viewport units `vh` and `vw`

Viewport-percentage lengths aka Viewport units have been around for a while now, and is perfect for responding to browser resizes.

1 viewport height (1vh) = 1% of viewport height
1 viewport width (1vw) = 1% of viewport width

In other words, 100vh = 100% of the viewport height

100vw = 100% of the viewport width

So these effectively fills up the device viewport.



html,
body {
  /* height: 100%; */
  /* width: 100% */
}

div {
  /* height: 100%; 
        width: 100%; */
  height: 100vh;
  width: 100vw;
  /* ... */
}

Looks good too! (We'll fix the scrollbars later)

As mentioned in the comments by @angelsixuk and @mpuckett, there is a known jumping behavior during scrolling when using 100vh on mobile browsers, which is an issue but considered intentional by webkit. See these links for details: Viewport height is taller than the visible part of the document in some mobile browsers and Stack Overflow: CSS3 100vh not constant in mobile browser

How about `min-height: 100vh` ?

While height fixes the length at 100vh, min-height starts at 100vh but allows content to extend the div beyond that length. If content is less than the length specified, min-height has no effect.

In other words, min-height makes sure the element is at least that length, and overrides height if height is defined and smaller than min-height.

For our goal of having a div child with full height and width, it doesn't make any difference since the content is also at full size.

A good use case of min-height is for having a sticky footer that gets pushed when there is more content on the page. Check this out here and other good uses of vh

Fun with Viewport Units | CSS-Tricks

A very common practice is to apply `height: 100vh` and `width: 100vw` to `<body>` directly...

In this case, we can even keep the container div relatively sized like in the beginning, in case we change our minds later.

And with this approach, we assure that our entire DOM body occupies full height and width regardless of our container div.



body {
  height: 100vh;
  width: 100vw;
}

div {
  height: 100%;
  width: 100%;
  /* height: 100vh;
  width: 100vw; */
  /* ... */
}

`vh/vw` versus `%`

A good way of thinking about vh, vw vs % is that they are analogous to em and rem

% and em are both relative to the parent size, while vw/vh and rem are both relative to "the highest reference", root font size for rem and device viewport for vh/vw.

But why the scrollbar?

`<html>` and `<body>` have default margins and paddings!

Browsers feature a default margin, padding and borders to HTML elements. And the worst part is it's different for each browser!

Chrome default for <body> has a margin: 8px

And 100vh + 8px causes an overflow, since it's more than the viewport

Luckily, it's fairly easy to fix that:



html,
body {
  margin: 0;
  padding: 0;
}

body {...

This is a "blanket" solution that would cover all margin and padding variations for any browser you might have.

Cool! Now we have our div filling up the page without scrollbars!

Finally, let's add a little padding, since it's awkward that the content is right on the edges.



div {
  padding: 10px;
  /* ... */
}

What?! The scrollbar is back! What happened?

`box-sizing` border-box

box-sizing allows you to define whether the padding and border is included in the div's height and width.

The default content-box of box-sizing doesn't include padding and border in the length, so div becomes

height = 100% + 10px * 2
width = 100% + 10px * 2

which overflows the page!

border-box includes padding and border, so div stays at our required sizes:

height = 100%
width = 100%

It's quite common to set all elements to border-box for a consistent layout and sizing throughout pages, using * selector:



* {

  box-sizing: border-box;

}

Perfect!

Catch you in the next one!

Why does the dignified primitive hate the day after Christmas?

Lenmor Ld — Thu, 26 Dec 2019 14:32:23 +0000

It's "Boxing" day, ...
It doesn't want to be Object-ified!
📦

🤭

Ruby gotchas Part 1

Lenmor Ld — Fri, 20 Dec 2019 14:29:41 +0000

Feel free to skip this if you eat gems 💎 for breakfast or you take rails 🛤️ everyday.

🥁🥁 (Ba dum tss)

Here's some tidbits of information and "gotchas" that I had learning Ruby, as someone coming from JS-land.

NOTE: I'm using irb with Ruby 2.6.5

1.✨ Ruby is dynamically-typed like JS

Dynamic means the type of the variable is resolved on-the-fly and can be changed at run time (hence, dynamic).

compared to static typed like Java or TypeScript

No need for types when declaring variable, and the value assigned to variable can be of any type.

me = 3  # int
me = "I'm dynamic"  # string
me = {:a=>"fancy", :b=>"object"}  # object

2.🔢 Integer() vs `to_i`

Integer() errors out with non-Integer strings

while to_i tries really hard, and spits out 0 if it can't

"a1".to_i
=> 0

Integer("a1")
=> ArgumentError (invalid value for Integer(): "a1")

Same with Float(str) and str.to_f as well

floaty = "3.14"
puts floaty.to_f + 0.01
=> 3.15

Converting from other bases

The nice thing with Integer(str, radix) is that you can also use it to convert other bases to integer, just like parseInt() in JS.

E.g. if you want to convert binary to integer

Integer("101", 2)
=> 5

3.📦 Everything is an object

Just like in Python, but not exactly like Javascript (un-boxed primitives like strings, numbers are not objects).

You can use "me".methods to see all supported methods of String "me" and Integer 123

"me".methods
=> ["upcase!", "empty?, "to_f", "to_i", "length",...]

123.methods
=> ["to_s", "odd?", ".even?", ...]

4.🦆 Duck-typing and `respond_to?`

Duck-typed means an object is considered a "Duck" if it has methods of a duck: it walks like a duck, it quacks like a duck.

For example, if 123 has odd? and even? methods, then it must be an Integer?! Use respond_to? to check whether an object is able to do / has something, instead of using .methods everytime

123.respond_to?("odd?")
=> true

5.🎚️ Ranges `(1..5)` and using them in loops

A Range is a sequence of values that can be used as a collection or converted easily to an array using to_a

Use .. for including high value and ... for excluding it

Use as a collection for iterating

1..2
=> #<Enumerator: 1..2:each>

(1..3).each {|n| puts n}

1
2
3
=> 1..3

(1...3).each {|n| print n}
12=> 1...3

🔖 print doesn't include a newline like puts does

⚠️ Don't use for loops!

You can also use ranges in loops, but note that it is not common and iterators should be used most of the time.

For loops are also considered bad in the Rubocop style guide, since the variables defined inside it leaks outside of the loop

❌
for i in (1..5)
    print i
end
=> 12345

puts i
=> 5 
😱

✔️
(1..5).each {|i| print i}
12345=> 1..5

puts i
=> NameError (undefined local variable or method `i')
😎

For more info: https://rubystyle.guide/#no-for-loops

Use as an array

(1..5).to_a
=> [1, 2, 3, 4, 5]

(1...5).to_a
=> [1, 2, 3, 4]

Works in characters too!

('1x'..'2b').to_a
=> ["1x", "1y", "1z", "2a", "2b"]

And you can check if an item is inside a range

('a'...'e').include? 'b'
=> true
('a'...'e').include? 'z'
=> false

That's all for now. 😄

I'm not a Ruby ninja 🤺 (yet),
and these are mostly observations for me.
So let me know of any corrections and improvements in the comments. 👇

Happy Ruby-ing! 💎

🗣 Web Reader using Web Speech API

Lenmor Ld — Sat, 14 Dec 2019 15:21:22 +0000

Demo here: https://stupefied-curran-2254b8.netlify.com/

Have you ever been TLDR (Too LAZY didn't read) to read an online article or any webpage of some sort...
and wished that your browser would read it for you?

Well, you're in luck! I built a Web Page Reader. 😆
Just copy-paste a URL or some text in the input and it would read it for you!
Well, the readable parts at least 😅

💬 Web Speech API

I used Speech Synthesis from native browser's Web Speech API.
It is an experimental tech, but good chance you have this in your browser now!

Actually, we all had this since Chrome 33, Firefox 49, Edge 14. But check here in case you are using a tamagochi 🐰: caniuse Web Speech API.

The speech inputs

User inputs are the following HTML elements:

textarea for the URL/text to read
select input for the voice
range inputs for pitch and rate

The textarea contents are checked if it's a plain text or a URL.

The rate (how fast the speaking goes) ranges from 0.5 to 2.
The pitch (highness or lowness of voice) ranges from 0 to 2.
The voice select provides the voices available from the system.

🎤 `SpeechSynthesisVoice`

The voices available differs for every device, and is obtained via
speechSynthesisInstance.getVoices().

This returns all the SpeechSynthesisVoice objects, which we stuff on the select options.

User selects one of this, or leave the default.

Now, what makes the browser actually talk is the SpeechSynthesisUtterance object.

🗣 `SpeechSynthesisUtterance`

A SpeechSynthesisUtterance object (utterance) is like an individual speech request, which we initialize with the string and attach all the speech elements like voice, rate and pitch.

Finally, trigger the utterance via speechSynthesis.speak().

A finishUtteranceCallback is also supplied to enable play button and other controls when the text is finished.

This logic is encapsulated in speak(string, voice, pitch, rate, finishUtteranceCallback)

  speak(string, voice, pitch, rate, finishUtteranceCallback) {
    if (this.synth.speaking) {
      console.error('🗣 already speaking');
      return;
    }

    if (string) {
      const utterance = new SpeechSynthesisUtterance(string);
      utterance.onend = () => {
        console.log('utterance end');

        finishUtteranceCallback();
      };
      utterance.voice = voice;
      utterance.pitch = pitch;
      utterance.rate = rate;

      this.synth.speak(utterance);
    }
  }

All of this functionality is wrapped in a WebSpeechApi to keep it modular. 📦

For a detailed look at Speech Utterance, check this out: MDN Speech Utterance.

This MDN page has an awesome rundown and example where I built my app off of. Please check it out too!

🌐 URL check

User can input URL or text on the textarea to read.
But how does this detect if it's a URL?
A simple try-catch does the trick.

// simple check if valid URL
try {
    new URL(urlOrText);
    isUrl = true;
} catch (error) {
    // not a URL, treat as string
    isUrl = false;
}

If it's a plain text, this is passed directly to the speak().
If it is indeed a URL, GET request to load the page and scrape the readable elements.

🕷️ Web page scraping using `cheerio` and `axios`

cheerio is a subset of jQuery that is super fast, easy and flexible for parsing HTML.
(Seriously it's as easy as cheerio.load(<p>some html</p>))

axios is a Promise-based client for fetching stuff from APIs, and in this case, getting the full HTTP get response from a webpage.

Combined, this is how I'm getting all the "readable" elements of a page.

const getWebsiteTexts = siteUrl => new Promise((resolve, reject) => {
  axios
    .get(siteUrl)
    .then((result) => {
      const $ = cheerio.load(result.data);
      const contents = $('p, h1, h2, h3').contents(); // get all "readable" element contents

      const texts = contents
        .toArray()
        .map(p => p.data && p.data.trim())
        .filter(p => p);

      resolve(texts);
    })
    .catch((err) => {
      // handle err
      const errorObj = err.toJSON();
      alert(`${errorObj.message} on ${errorObj.config.url}\nPlease try a different website`);
      urlOrTextInput.value = '';
      finishUtterance();
    });
});

Some URLs error out so we catch the error, alert() user, clear the textarea and reset the form inputs.

Why some URL doesn't work?

⛔ CORS policy

The scraper can't parse all websites out there.
In fact, a lot of websites (try Medium articles) has a CORS policy.
So you'll get an error like this in some websites.

CORS policy: No 'Access-Control-Allow-Origin' means only the Same Origin can do GET requests from a webapp script.

Note that cURL and Postman may still work on these sites, just not from Javascript like this.

This is enabled from the server of the site we're trying to read, so nothing much we can do but move on to a different page. 😢

Here's a good rundown of CORS:

Understanding CORS

Martin Splitt ・ Nov 12 '19

#cors #javascript #security #webdev

dev.to pages work though! Try it out 🎉.
Thank you dev.to for allowing us to scrape 🙏

▶️ play, pause, restart

Lastly, I added some basic playback control.

Here's the play function that starts or resume based on current paused status of the speechSyntesis. The other controls are just disabled except pause and stop.

playButton.addEventListener('click', () => {
  if (speechApi.synth.paused) {
    speechApi.synth.resume();
  } else {
    // start from beginning
    read();
  }

  playButton.disabled = true;
  pauseButton.disabled = false;
  stopButton.disabled = false;

  rateSlider.disabled = true;
  pitchSlider.disabled = true;
  voiceSelect.disabled = true;

  urlOrTextInput.disabled = true;
});

The pause and stop are more or less similar with different controls disabled.

📦 🚤 Build and Deployment

I used parcel for hassle-free no-config bundling, which is quite simple for vanilla JS projects like this.

Lastly, Netlify for easy static deploy. After setting up the Github repo in Netlify, it just picked up the dist/ folder built by Parcel.

Done!

📃 Improvements

This is a quick project, so it could definitely use some improvements (and corrections).

👨‍💻 Here's the code. Hope this spark some ideas and help yo get started with some awesome text-to-speech projects. 😁

lenmorld / web_reader

Web Reader using Web Speech API

Live demo at https://stupefied-curran-2254b8.netlify.com/

Article at dev.to

https://dev.to/lennythedev/web-reader-using-web-speech-api-bkn

dev

npm run dev

build

npm run build

View on GitHub

Any suggestions, comments, questions?
(like on a better way to check if string is a URL 😅 )
Please let me know in the comments!

Thanks and happy listen-reading! 👂📖

🌱 Complete REST API with MongoDB Atlas cloud, Node, and Express in 10 minutes

Lenmor Ld — Sat, 07 Dec 2019 19:00:41 +0000

Let's bring the data to the cloud this time! 💾 ☁.
And what better way to do that than a FREE cloud database!
We'll be using the free cluster of Mongo DB Atlas.

What is Mongo DB Atlas?

Mongo DB Atlas is a fully-managed database-as-a-service available on AWS, Azure, and GCP

Before Atlas, I used mLab. mLab was then acquired by MongoDB last year. Pretty much similar to mLab, MongoDB Atlas is the easiest way to have a cloud MongoDB instance.

Why?

💲 0 dollars: I am not an advertiser for MongoDB, but I love this service and this one won't break the bank ❌🔨🐖, since... well it's no-strings-attached FREE for up to 512MB. Perfect for small side-projects!
🏃‍♂️ Quick, simple, and fast: no installation and config files. After signing up and creating a cluster (takes 5 minutes), you're all set.
☁ It's in the cloud: Not running in your machine as a Mongo service. Not in a disk file like diskdb. You can manage it from anywhere through the Atlas web app. For your app, you only need a connection URL to access the db.
😎 Very cool UI: Atlas dashboard is very intuitive, and first-time users will find it easy to use with the visual cues and steps.

Cloud setup

There might be some slight screenshot differences to the actual Atlas UI by the time you do this, but the described steps should get you to the same results.

1. First sign up here:

https://www.mongodb.com/cloud/atlas/register

2. Create a free tier Starter Cluster

The free Starter Cluster M0 comes with 512 MB Storage, shared RAM and vCPU.

This should be more than enough for our starter Node project.

Cluster region: you can pick any provider (AWS, Google, Azure) and the region closest to you that has a Free Tier. For me, it was AWS us-east-1.

You can leave the rest at FREE defaults.
Create the cluster.

The creation and provisioning might take a few minutes

Afterwards, the dashboard appears, with the side panel that contains all the options needed to manage clusters.

3. Connect to the Cluster

Click [Connect] in the Cluster we have just created.

The dialog that appears gives options to:

Whitelist your IP address
Create a MongoDB user

3.1 Whitelist IP Address

Whitelisting means only allowing access to selected (thus trusted) entities

[Add Your Current IP address], which should automatically get your current public IP address. Optionally add a description such as "My Home IP address"
- ❗ Remember to do this step again when you switch WiFi, e.g. when moving from coffee shop to home WiFi.
- 💡 If you are in a public wi-fi, you can use a service like https://whatismyipaddress.com/ to get your IPv4 public address, since ipconfig or ifconfig might give you only the internal network address.
- 💣You can use 0.0.0.0/0 to enable all IP addresses anywhere, which simplifies this process, but makes it VERY INSECURE.

3.2 Create admin user.

Enter your preferred username and password. This will be the first admin ("root") user, then [Create MongoDB User].

Keep these credentials handy, since we'll use them later.
Close the window. We'll connect to the cluster later.

4. 📃 Add sample data

From the cluster view, click [Collections], then [Add my Own Data]

Same as the last lesson, we use:
- database name: data
- collection name: movies

🎥 The movies from this series is from IMDB. You could use the id from any movie page URL. E.g. In "The Lion King" page https://www.imdb.com/title/tt0110357; id is tt0110357.

Insert Document

Insert a movie entry, as before - Leave the given _id provided by Atlas since this is internal

Now we see the inserted data in the dashboard. Add more as you wish

Perfect. Now we got data. Time to connect to the cluster

5. 🔌 Connect to cluster

Go back to the Clusters view, then click Connect in our cluster.

Choose [Connect your Application]

Leave the default Node.js version 3+

Copy the Connection String. We'll use this in the next step.

Now we're ready to dive into code!

Connecting to the db

1. Grab the starter code from last lesson here:

https://github.com/lenmorld/devto_posts/tree/master/quick_node_express_diskdb

Install mongodb driver

$ npm install mongodb

2. Create a new file called `db.js` in the app root.

Use this snippet, and replace CONNECTION_STRING_FROM_ATLAS with your connection string.

It should look a bit like this
mongodb+srv://myusername:mypassword@cluster0-somelocation.mongodb.net/test?retryWrites=true&w=majority

// db.js

// mongodb driver
const MongoClient = require("mongodb").MongoClient;

const dbConnectionUrl = "CONNECTION_STRING_FROM_ATLAS";

function initialize(
    dbName,
    dbCollectionName,
    successCallback,
    failureCallback
) {
    MongoClient.connect(dbConnectionUrl, function(err, dbInstance) {
        if (err) {
            console.log(`[MongoDB connection] ERROR: ${err}`);
            failureCallback(err); // this should be "caught" by the calling function
        } else {
            const dbObject = dbInstance.db(dbName);
            const dbCollection = dbObject.collection(dbCollectionName);
            console.log("[MongoDB connection] SUCCESS");

            successCallback(dbCollection);
        }
    });
}

module.exports = {
    initialize
};

The function accepts our cloud db details (db name and collection name) and callbacks.
It then connects to our cloud db using the driver method MongoClient.
Upon success, it calls the successCallback passing the dbCollection object.
- Any failure will be thrown by failureCallback
We'll use dbCollection to execute mongodb commands.

Back to our server, we'll start `server.js` from scratch.

We will be using the cloud db connection instead of diskdb.

// server.js

const express = require("express");
const server = express();

const body_parser = require("body-parser");

// parse JSON (application/json content-type)
server.use(body_parser.json());

const port = 4000;

// << db setup >>
const db = require("./db");
const dbName = "data";
const collectionName = "movies";

// << db init >>

server.listen(port, () => {
    console.log(`Server listening at ${port}`);
});

In << db setup >>, we import db.js (to use our initialize method), and define variables for the db's info.

4. Initialize the database connection.

// db.js
...
// << db init >>
db.initialize(dbName, collectionName, function(dbCollection) { // successCallback
    // get all items
    dbCollection.find().toArray(function(err, result) {
        if (err) throw err;
          console.log(result);
    });

    // << db CRUD routes >>

}, function(err) { // failureCallback
    throw (err);
});
...

We initialize the db with the dbName, collectionName, and a successCallback.

Inside the successCallback:

GET all using collection.find(), which returns a cursor.
- A cursor is like an iterator, where you can do next, hasNext(), etc
Convert the cursor to an array using async method toArray(callback)
- It's simpler for our use case to return full array, than iterate the cursor.
callback runs after successfully converting the cursor to an array
- We log the result for now, but you can imagine the code for returning response to client goes here

Start server

$ npm install
$ npm start

...which should give:

Server listening at 4000
[MongoDB connection] SUCCESS
[ { _id: 5d7ed8f31c9d4400009c3775,
    id: 'tt0110357',
    name: 'The Lion King',
    genre: 'animation' } ]

Yay! It works!

Now let's complete all the CRUD routes!

CRUD routes

Here's a rundown of the CRUD-to-MongoDB operations for our route handlers.

Notice that there are quite some syntax differences between diskdb functions and the official MongoClient.

CRUD Operation	REST operation	MongoClient Operation
Create	POST `/items`	`dbCollection.insertOne(object, callback)`
Read One	GET `/items/:id`	`dbCollection.findOne(query callback)`
Read All	GET `/items`	`dbCollection.find(query).toArray(callback)`
Update	PUT `/items/:id`	`dbCollection.updateOne(query, { $set: obj }, callback)`
Delete	DELETE `/items/:id`	`dbCollection.deleteOne(query, callback)`

All of these routes go in the << db CRUD routes >> marker in our code.

i. Create ➕

// server.js
...
// << db CRUD routes >>
server.post("/items", (request, response) => {
    const item = request.body;
    dbCollection.insertOne(item, (error, result) => { // callback of insertOne
        if (error) throw error;
        // return updated list
        dbCollection.find().toArray((_error, _result) => { // callback of find
            if (_error) throw _error;
            response.json(_result);
        });
    });
});

For the POST /items handler, use insertOne(item, callback) to add the movie from request.body (parsed by body_parser middleware)
In the callback of insertOne, throw the error if any. The result is not used here (_which is just a boolean for success and _id of inserted document).
Get the updated list using find(), and return the _result as the response in its callback.

Note the two levels of similar callbacks here: outer callback of insertOne, and inner one of find. This is why I used (_error, _result) in the inner to avoid name collision. But feel free to rename them 😉

Test:

$ curl -X POST -H "Content-Type: application/json" --data '{"id": "tt0109830", "name": "Forrest
Gump", "genre": "drama"}' http://localhost:4000/items

[{"_id":"5de5c9d01c9d440000482ef0","id":"tt0110357","name":"The Lion King","genre":"animation"},{"_id":"5de7009967aec74a90f88d67","id":"tt0109830","name":"Forrest Gump","genre":"drama"}]

ii. Read one 🕵️

server.get("/items/:id", (request, response) => {
    const itemId = request.params.id;

    dbCollection.findOne({ id: itemId }, (error, result) => {
        if (error) throw error;
        // return item
        response.json(result);
    });
});

Get the id directly from the params (e.g. 1234 for http://localhost/items/1234).
Find the item with that id using findOne(query).

query is just an object so you can use key-value pairs for your queries. We use this query object for find, delete and other MongoDB commands.

// query can be:

{ id: 1 }; // find using id

{ name: "The Lion King" }; // find using name

{ id: 1, name: "The Lion King", genre: "action" }; // find using id, name and genre

Return the item in the response

Test:

$ curl http://localhost:4000/items/tt0109830

{"_id":"5de7009967aec74a90f88d67","id":"tt0109830","name":"Forrest Gump","genre":"drama"}

iii. Read all 🕵️

server.get("/items", (request, response) => {
    // return updated list
    dbCollection.find().toArray((error, result) => {
        if (error) throw error;
        response.json(result);
    });
});

Return all the items in the collection in the response, same in POST /items

Test:

$ curl http://localhost:4000/items

[{"_id":"5de5c9d01c9d440000482ef0","id":"tt0110357","name":"The Lion King","genre":"animation"},{"_id":"5de7009967aec74a90f88d67","id":"tt0109830","name":"Forrest Gump","genre":"drama"}]

iv. Update ✏️

server.put("/items/:id", (request, response) => {
    const itemId = request.params.id;
    const item = request.body;
    console.log("Editing item: ", itemId, " to be ", item);

    dbCollection.updateOne({ id: itemId }, { $set: item }, (error, result) => {
        if (error) throw error;
        // send back entire updated list, to make sure frontend data is up-to-date
        dbCollection.find().toArray(function(_error, _result) {
            if (_error) throw _error;
            response.json(_result);
        });
    });
});

Get the id from params and the item from body (through body-parser).
Update item with id and set it to item, using dbCollection.updateOne(query, { $set: item }, callback.

Note the use of MongoDB-specific { $set: item }

Return the updated list, as in POST /items and GET /items

Test:

Maybe you think "The Lion King" is a drama, since ...well, I won't spoil it. 🤫 🦁

curl -X PUT -H "Content-Type: application/json" --data '{"genre": "drama"}' http://localhost:4000/items/tt0110357

[{"_id":"5de5c9d01c9d440000482ef0","id":"tt0110357","name":"The Lion King","genre":"drama"},{"_id":"5de7009967aec74a90f88d67","id":"tt0109830","name":"Forrest Gump","genre":"drama"}]

v. Delete ❌

server.delete("/items/:id", (request, response) => {
    const itemId = request.params.id;
    console.log("Delete item with id: ", itemId);

    dbCollection.deleteOne({ id: itemId }, function(error, result) {
        if (error) throw error;
        // send back entire updated list after successful request
        dbCollection.find().toArray(function(_error, _result) {
            if (_error) throw _error;
            response.json(_result);
        });
    });
});

Here, only the id is needed from params, which we pass to dbCollection.deleteOne(query).

As before, you can formulate a query easily to your needs, since it's just an object.

🤸‍♀️ Challenge: modularize the dbCollection.find() since we're using it in 3 places.

Test:

$ curl -X DELETE http://localhost:4000/items/tt0109830

[{"_id":"5de5c9d01c9d440000482ef0","id":"tt0110357","name":"The Lion King","genre":"drama"}]

Notes

Callbacks ??!!, why this instead of ES6 Promises, or ES7 async/await...

MongoClient.connect only supports callbacks, but we'll promisify (and aysnc-await-ify) these callbacks on the next lesson, since honestly they are starting to look like callback hell. See this post for a fun rundown on callback hell.

How to Escape Callback Hell with JavaScipt Promises

AmberJ ・ Oct 21 '19 ・ 4 min read

#javascript #beginners

Why do We return all of the items in the response create, update, delete ?

There are a lot of options on what to do to synchronize UI and backend after a change, and it is quite a Software Architecture topic for itself.

Article No Longer Available

Here, we just return the updated items to UI after a create, update and delete. We let the frontend (e.g. React, Vue, Angular, Vanilla JS) update its state and views from that information.

Here's the complete Code

https://github.com/lenmorld/devto_posts/tree/master/quick_node_express_mongodb

"Okay, that was nice. But what can I do with this? "

✅ Serving HTML files
✅ REST API
✅ Cloud Database persistence

Now, this is an actual server for a small project. Add more routes, save some data in the db through API requests. Just add frontend!™

Next up:

(In progress)

MongoDB callbacks to Promises and Async/Await

This article is part of a Node+Express series I'm working on.

For the meantime, if you can't get enough of Node+Express 🤓,
checkout my Node workshop (Gihub repo and slides):

lenmorld / node_workshop

Build a server and API for your next web application, using Node, Express and MongoDB

Node workshop

to follow workshop:

$ git checkout dev
$ node server.js

to dev latest

$ git checkout master
$ npm start

Create a .env file on root

NODE_ENV=development
PORT=4000
MONGO_DB_CONNECTION_STRING=YOUR_CONNECTION_STRING_HERE
# API keys go here

View on GitHub

Here we discussed:

Using Node and Express
Routing, request and response
Building a REST API
Server-rendered templates
Connecting to a NoSQL (mongo) database
Using external APIs, such as Spotify
and much more!

Happy server-ing! 🤓

Now, all this Mongo talk made me hungry.
I'm gonna have some of my favorite "Hopia Mongo" (bean-filled Filipino pastry)🌱.

Photo from FoxyFolksy in article "Hopia Recipe- Munggo And Ube Filling" src: https://www.foxyfolksy.com/hopia-recipe-munggo-ube-filling/

How much time on average do you spent coding outside of full-time work?

Lenmor Ld — Thu, 16 May 2019 22:15:34 +0000

If you're like me, I have an imaginary backlog full of ideas I want to test out, tech I want to learn next, articles and tutorials I want to explore, and projects I want to work on.

But between 40 hours a week at work, going to gym and trying to have enough time to rest, I'm finding it a challenge to hit the right amount of hours in a day / week that's a good amount.

I want to get an idea on how many hours devs spent on average, and no better place to ask than Dev.to 👨‍💻👩‍💻

I'll start:

Me: 16 hours a week on average, with varying focus and regularity

weeknights: 3 hrs per day, except Friday (rest day)

less focus: most of energy consumed during the day
regular: it's easier to get it going 4 straight days in a row

weekends: 2 hours per day

better focus: full brain power, since no work
irregular: because of errands, cooking, going out, friends, family. It's the weekend after all 😄 🛍️ 🏞️ 🚴‍♂️ 🏀

What about you?

(Details optional, main thing is the hrs per day/week)

What is the standard way to keep UI state and backend state synced during updates? (React and Node)

Lenmor Ld — Thu, 09 May 2019 22:07:57 +0000

Let's say i have a Node-Express backend with a REST API and a React frontend that has some editable Card. On App load, I fetch an items array and do a setState

componentDidMount() {
    axios.get('/items').then(() => {
        this.setState({ items: res.data })  // res.data is array of items
    })
}

When user updates the card, I send a PUT or POST request to the backend,
which updates the card details (with or without DB doesnt matter, just assume backend state is updated). good.

My question is, what's the best way to update the UI ?
Is there a standard way when doing REST?

Here are the ideas I could come up with:

On my server PUT/POST route handler, i could return items array, including the one updated. On UI, I could then do a simple setState({ items: res.data }). Returning the entire items array seems expensive though, considering only one item is updated.
- At least backend is source of truth, if update fails, i could easily tell UI error happened.
On my server Put/POST route handler, i could return only updated item.
I would then have to find and replace the updated item in my state and do a setState({ items: res.data })
- Simple enough, but it feels like i'm doing extra work. But since my data structure is an array, I have to replace entire array in UI state.
- Or is there a better way to update only one item in an array in state, or maybe better to change my data structure to an object, so setState is optimal.
On my server Put/POST route handler, i could return a status code/message to signal UI that operation succeeded and now I can update UI state.
On UI side, I do the update first, then send the updates to backend.

For some reason if it fails in backend, then I rollback UI changes (might be tricky?)
Use localStorage in between?

any other ideas?

This is probably handled better in GraphQL and using state management like Flux,
but if i'm doing it really vanilla Node and React, what's the best way?

Let me know if my question isn't clear enough, i could elaborate

Thanks!

Forem: Lenmor Ld

React Workshop - free online workshop by SCS Concordia

Registration: Workshop happening at November 5 (Thursday) 17:30 EST

Topics

Preview

Testing async stuff in React components with Jest and react-testing-library

TL;DR

Async example - data fetching effect in useEffect

Testing a data fetch

Wait, what is act()?

Wrapping state updates in act()

Wrap render in act()

Wrap in act() with mock timer

Using async utils in React Testing Library

Timeouts

Other async utils

Async example 2 - an async state change

Wrap in act() with mock timer

Using async utils in React Testing Library

Code

Further reading

Conclusion

Node Workshop part 2 - free online workshop by SCS Concordia

Registration: Workshop happening at August 27 (Thursday) 17:30 EST

Topics

Preview

Screenshots

Show off Github repos in your Gatsby site using Github GraphQL API

GraphQL

Intro to GraphQL

GraphQL for beginners

Danijel Vincijanović ・ Feb 14 '20

Github GraphQL API

Github GraphQL API explorer

Query to get all the repo details we need

Github

Generate a personal access token

Gatsby - Node part

You'll need a Gatsby site 😅

Put the query somewhere in the "Node" part of Gatsby

GraphQL variables

Put personal Access Token in an .env 🔐

Install and configure Gatsby Plugin for pulling data from Github GraphQL API

Configure plugin in gatsby-config.js with the query

Start it up! 👩‍🚀👨‍🚀

Gatsby - React part

Formulate frontend query with local GraphiQL 🧪

Create a Page

useStaticQuery hook for querying GraphQL data

React component

BONUS: Deploy in Netlify

Create a new site from your Gatsby site repo

Code

Node Workshop - free online workshop by SCS Concordia

Workshop happening at July 16 (Thursday) 17:30 EST

CSS gotcha: How to fill page with a div?

TL;DR

So let's say you want a div that fills up entire page...

Can we just use a more "absolute" value like px ?

Relative units to the rescue!

Old school height: 100%

newer solution: viewport units vh and vw

How about min-height: 100vh ?

A very common practice is to apply height: 100vh and width: 100vw to <body> directly...

vh/vw versus %

But why the scrollbar?

<html> and <body> have default margins and paddings!

Cool! Now we have our div filling up the page without scrollbars!

box-sizing border-box

Perfect!

Catch you in the next one!

Why does the dignified primitive hate the day after Christmas?

Ruby gotchas Part 1

1.✨ Ruby is dynamically-typed like JS

2.🔢 Integer() vs to_i

3.📦 Everything is an object

4.🦆 Duck-typing and respond_to?

5.🎚️ Ranges (1..5) and using them in loops

⚠️ Don't use for loops!

🗣 Web Reader using Web Speech API

Async example - data fetching effect in `useEffect`

Wait, what is `act()`?

Wrapping state updates in `act()`

Wrap render in `act()`

Wrap in `act()` with mock timer

Wrap in `act()` with mock timer

Configure plugin in `gatsby-config.js` with the query

`useStaticQuery` hook for querying GraphQL data

Can we just use a more "absolute" value like `px` ?

Old school `height: 100%`

newer solution: viewport units `vh` and `vw`

How about `min-height: 100vh` ?

A very common practice is to apply `height: 100vh` and `width: 100vw` to `<body>` directly...

`vh/vw` versus `%`

`<html>` and `<body>` have default margins and paddings!

`box-sizing` border-box

2.🔢 Integer() vs `to_i`

4.🦆 Duck-typing and `respond_to?`

5.🎚️ Ranges `(1..5)` and using them in loops

🎤 `SpeechSynthesisVoice`

🗣 `SpeechSynthesisUtterance`

🕷️ Web page scraping using `cheerio` and `axios`

2. Create a new file called `db.js` in the app root.

Back to our server, we'll start `server.js` from scratch.