DEV Community: Marcos RJJunior

Create API and database connection using Nodejs and Prisma | Video

Marcos RJJunior — Tue, 15 Feb 2022 07:35:07 +0000

This is the first tutorial of the serie starting with node.

In today’s video, we implement a Nodejs environment using typescript. A basic structure that you can also use for any other project.

To manage SQL queries we are using Prisma ORM. The library also generates migration and schema types for the codebase.

The same structure will be used in the next video, where we are going to implement the user authentication and protect the routes.

In this demo application, you will create a simple Note model, we also create API routes to list all the items and create a new record.

Challenge for you to build the delete and update functions, let me know how it goes.

2 simple ways to call an action on state change

Marcos RJJunior — Mon, 10 Jan 2022 03:29:50 +0000

Scenario

I would like to refresh the list of available states based on the selected country.

1. useEffect

One of the parameters of this function is the array of values that works as a listener.

useEffect(() => {
  // if there is no country selected
  if (!selectedCountry) {
    // just reset the state options
    return setStates([])
  }

  // fetch available states
  fetchStatesByCountry(selectedCountry)
}, [selectedCountry])

The useEffect will be performed only on the first render and when the value of selectedCountry changes.

It is a great place for this scenario, you have just to be careful to not using it much and lost control of the requests. Checking the network tab is a great place to see if you are not calling a request multiple times.

2. Simply calling a function

I feel comfortable using this simple approach because I know exactly who is triggering the action

const onCountryChange = e => {
  const selectedCountry = event.target.value

  // if there is no country selected
  if (!selectedCountry) {
    // just reset the state options
    return setStates([])
  }

  // fetch available states
  fetchStatesByCountry(selectedCountry)
}

return (
  <select onChange={onCountryChange}>
    <option value="AU">Australia</option>
    <option value="...">...</option>
  </select>
)

Which one do you prefer?

3 Tricks on VS Code

Marcos RJJunior — Sun, 02 Jan 2022 04:21:48 +0000

I've been using the first one since the last update.

The options are very minimal, but really helpful !! let me know how do you feel using them.

Enabling bracket pair colorization

"editor.bracketPairColorization.enabled": true,

Enabling Auto complete your sentence

"editor.suggest.preview": true,

Sorting code

{
    "key": "shift+alt+s",
    "command": "editor.action.sortLinesAscending"
}

Running multiple actions using macros

Because this is still not native feature, I'm using the macros extension.

{
    "key": "shift+alt+f",
    "command": "macros.fixDocumentAndSort",
    "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly && !inCompositeEditor"
}

"macros": {
    "eslintFixAndFormatDocument": [
        "eslint.executeAutofix",
        "editor.action.formatDocument"
    ],
},

In this binding, vscode is performing two actions

formatting the document
fixing eslint issues.

Implementing tables using reactjs

Marcos RJJunior — Sun, 02 Jan 2022 04:15:00 +0000

I basically came up with this post to show you that maybe you don't need to install any library when implementing a "simple" table.

The goal is to consume data from an API and display the information to the user as fast as you can.

You might consider using a library because of the features it might offer, but in 95% of the cases you are going to be using only the sort function. Some of my pros and cons.

Cons

Performance issues.
- Some lib's perform unnecessary array maps in order to make easier to use and works in a dynamic way
- Some of them don't even use tables, they calculate columns and rows and convert to "div's".
- Wasting time to read the library documents, most of the times looking for flags to disable some unexpected behaviours or learning how to use a "table".
- Complexity to customise layout and bad UI experience.

Pros

Maybe you might want to test a different feature.
Really I don't see much here, even for a MVP purpose, I would go without any library.

Here are some examples that I've implemented, hope one of them fit your needs or at least help at the beginning.

Tables

Feel free to use any of the examples and build your own component with the needs of your project.

Implementing a theme switcher using javascript

Marcos RJJunior — Sun, 02 Jan 2022 04:06:47 +0000

In this simple tutorial you are going to learn how to implement a theme switcher for your website using CSS and Javascript.

Let's start by creating a simple HTML structure.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple theme switcher</title>
    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <div>
      <h1>Simple theme switcher</h1>

      <p>This is your first paragraph</p>
    </div>
  </body>
</html>

And a simple CSS to start, just to prepare the page.

body {
  display: flex;
  justify-content: center;
}

div {
  max-width: 600px;
  width: 100%;
}

button {
  cursor: pointer;
}

Now we are going to create a button that will trigger the theme.

We can start with a dark-theme button and a script that will include a data-theme attribute to the body element.

<div>
  <h5>Theme:</h5>
  <button onClick="switchTheme('dark')">Dark</button>
</div>

<script>
  function switchTheme(theme) {
    document.querySelector('body').setAttribute('data-theme', theme);
  }
</script>

Now we have to implement the themes.

we start by creating the :root variables.

:root {
  --white: #FFFFFF;
  --black: #000000;

  --gray-100: #EEEEEE;
  --gray-800: #1c1c1c;
  --blue: #0000b8;
}

body {
  /* ... */
  background-color: var(--white);
  color: var(--black);
}

Let's also include other themes

<button onClick="switchTheme('light')">Light</button>
<button onClick="switchTheme('dark')">Dark</button>
<button onClick="switchTheme('blue')">Blue</button>

[data-theme='light'] {
  background-color: var(--white);
  color: var(--black);
}

[data-theme='dark'] {
  background-color: var(--gray-800);
  color: var(--gray-100);
}

[data-theme='blue'] {
  background-color: var(--blue);
  color: var(--white);
}

You should now be able to see the buttons and switch to the selected theme, but the theme is reset to the default theme when reloading the page. In the next section we will store that selected theme on localStorage.

Storing theme on localStorage

Now let's store the selected theme, so we can keep the style even if the user reload the page.

function saveTheme(theme) {
  localStorage.setItem('theme', theme)
}

function loadTheme(theme) {
  return localStorage.getItem('theme')
}

function setTheme(theme) {
  document
    .querySelector('body')
    .setAttribute('data-theme', theme)
}

function switchTheme(theme) {
  setTheme(theme)
  saveTheme(theme)
}

const theme = loadTheme()
setTheme(theme)

That's it.

Now challenge for you 🤔.

Implement a toggle switcher from light to dark theme using only one button. You can use emoji to identify the states ☀️ and 🌙.