teleren/devto huggingface dataset:
Handling suspense state in components, rather than cache
Tags: react, discuss
Published: 2020-03-22 19:44:59

In my previous post I posed a question about [how to model data fetching based on domain, rather than request](https://dev.to/lokeh/how-to-model-data-fetching-by-domain-with-react-and-suspense-1g9h). Now I'd like to pose a concrete technical question that I came out of that with:

Can we move suspending out of the cache, and into the component?

High level example:

```javascript
function PartsEditor({ part }) {
  let suspend = useSuspense();
  let [partName, updateName] = useState(part.name);

  let updatePart = () => {
    // triggers a re-render that suspends the component
    let resume = suspend();
    updatePartCache(part.id, { partName })
      // once we've settled updating the part cache
      // settle the suspender and continue rendering
      .then(() => resume());
  };

  return (
    <div>
      <div>
        Part name: <input value={partName} onChange={e => updateName(e.target.value)} />
      </div>
      <button onClick={updatePart}>Update</button>
    </div>
  );
}
```

This would allow components that consume caches to vary their suspension behavior based on the context. For instance, reading from the cache would involve subscribing to it and optionally handling specific events:

```javascript
function PartsList() {
  let suspend = useSuspense();
  let [parts] = useCache(
     partsCache,
     {
       readMany() {
         let resume = suspend();
         // called on cache settle
         return resume;
       }
     }
  );
}
```

What do you think? Would appreciate feedback!
React: useReducer
Tags: tutorial, beginners, react
Published: 2020-03-22 18:50:56

Previously we talked about `useState` but what if your state is more complicated. That's when `useReducer` comes into play. `useReducer` is usually written similar to the Flux Architecture where you deal with a store (the state), actions and dispatches.

`useReducer` takes in 3 arguments -- reducer, initial state, lazy state initialization. It the returns an array consisting of the state and a dispatch.

```react
const reducer = (state, action) => { ... }

const App = () => {
  const [state, dispatch] = useReducer(reducer, { counter: 0 })
  ...
}
```

Unlike `useState` we need to a little more for us to manipulate state. The way state is updated when using `useReducer` is for us to return the new state from the reducer.

```react
const reducer = (state, action) => {
  return state.counter + 1
}
```

So how do we call the reducer? This is where dispatch comes into play. Dispatch is a function that passes whatever you pass into the reducer's second parameter.

```react
const reducer = (state, action) => {
  console.log(action)
  return state
}

const App = () => {
  const [state, dispatch] = useReducer(reducer)

  dispatch('hello') // hello
  dispatch({ greeting: 'hello' }) // { greeting: 'hello' }
}
```

Knowing that we pass anything to the reducer, the true power of the reducer is for us do different types of actions (ie. add, minus, set, etc.).

```react
const reducer = (state, action) => {
  switch(action.type) {
    case "set":
      return action.payload.number
    case "add":
      return state.counter + action.payload.number
    case "minus":
      return state.counter - acount.payload.number
    default:
      throw new Error(`Unknown action: ${action.type}`)
  }
}

const App = () => {
  const [state, dispatch] = useReducer(reducer, { counter : 0 })
  ...
  dispatch({ type: "set", payload: { number: 1 })
  dispatch({ type: "add", payload: { number: 1 })
  dispatch({ type: "minus", payload: { number: 1 })
  ...
}
```

**_IMPORTANT_**: It's important to return the state even if you didn't manipulate it.

Looking at the example code above, you don't have to follow the same structure. Feel free to experiment what you think would for your use case.
Drawing with potentiometers
Tags: arduino, processing, python, creativecoding
Published: 2020-03-22 18:12:30

Tools for drawing with potentiometers (take a look at the GitHub repo!)

http://abav.lugaralgum.com/lousa-magica/README-EN

*Lousa mágica* is something like “magic blackboard”, it was one of the names in Portuguese for the Etch-A-Sketch drawing toy that inspired this project. Then *Lousa paramétrica* would mean something like “parametric drawing board”.
An idea for an ultra low-cost online learning computer
Published: 2020-03-22 17:47:23

Imagine a mini computer with a cardboard case running a very bare distribution of GNU/Linux stored in a 4GB micro SD card. It comes with a cable that has an HDMI connector on one end and on the other is an HDMI/RCA combo connector. The machine has two USB ports where you connect a keyboard and a mouse. It has a wifi chip and an ethernet port for internet connectivity. It comes with 512MB of RAM.

When you turn it on, it loads up a screen to connect to your network. When you're done configuring or if it has already been configured before, you then arrive to a TTY. You're auto logged in as a generic OS user, but you typed in `/join class0123 student9876` to attend your class. The computer will poll a server until a live video feed comes online. [You see your teacher on the screen](https://www.kernel.org/doc/Documentation/fb/framebuffer.txt) and there's still a TTY below the video. The teacher starts the class, and interaction from the students are done via the TTY while the teacher responds over live video.

The teacher enables "quiz mode" where teacher asks questions in real-time and all TTY interactions are considered quiz answers. Since exact answers are expected from the teacher's multiple choice questions, you get instant feedback per question if you're right or wrong.

The teacher discusses some final pointers, but you're almost late in your next class so you type `/leave`. You join the next class. And the next one, then the next one. Your done with your classes and you type `/shutdown` to call it a day.

Ideal cost of the total setup is $25.
How We Use Tailwind in Components
Tags: react, css, javascript
Published: 2020-03-22 17:43:51

I wrote about [Why We Use Tailwind at ConvertKit](https://dev.to/brendanrc2/why-we-use-tailwind-at-convertkit-1660). This is about how we use Tailwind in our components. 

The short version is that we use the tailwind classes directly in our components:

```jsx
const Button = (props) => 
  <button {...props} className="px-4 py-2 bg-gray-700 text-white" />
```

But, we also want our components to do a little more. We want to work with a fixed set of colors, sizes, etc. to make development easier and our UI more consistent. That way, our developers can write code like this:

```jsx
<Button color="red" size="lg">Save Form</Button>
```

instead of having to repeat classes all the time:

```jsx
<Button className="bg-red text-white px-4 py-2"/>
```

Here's how we do that:

```jsx
const DEFAULT = "border border-solid border-transparent";

const COLORS = {
  green: "text-white bg-green-400 hover:bg-green-500",
  red: "text-white bg-red-400 hover:bg-red-500"
};

const Button = ({ color, children, className, ...props }) => {
  className = [className, DEFAULT, COLORS[color]].join(" ");

  return (
    <button {...props} className={className}>
      {children}
    </button>
  );
};
```

This is a simplified example of our actual component that's only handling the different colors. We have a default set of classes that all buttons have (`DEFAULT`), then, we have an object representing the different colors (`COLORS`). When someone passes `red` as the `color` prop, we use the classes that match that key: `COLORS["red"]`. We merge all this together with the `className` prop that that you can also pass to our component to add additional classes if necessary. 

```jsx
// A red button with margin at the bottom
<Button color="red" className="mb-2"/>
```

We follow the same pattern for sizes, variants, and different states of our components. 


How are you using Tailwind in React components?

P.S. We're hiring a few full stack engineers at ConvertKit. Learn more here [convertk.it/engineer](convertk.it/engineer)
How Are You Doing in this Covid19 time?
Tags: discuss, covid19, mentalhealth, watercooler
Published: 2020-03-22 17:17:07

I had so many ideas for the next post, for the next YouTube video, for the making of my new website, for that side project that I loved so much...

The reality is that I have no mental energy for that.

I am here in the middle of Oslo (Norway) thinking about all the things that are happening in my beautiful country: Italy 🇮🇹.
![Image](https://images.unsplash.com/photo-1533676802871-eca1ae998cd5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2382&q=80)

So worried about my family and all the people in my country.

I cannot go there.
I cannot do anything from here if not video calls to cheer up my family.

I always advocate not focusing on what is not in your own control if you want to live a happy life.

For the first time in my life, I feel that this virus, which is outside my control, is making me feel powerless. I can't stop thinking about what is happening and when all of this will finish.
![Image](https://images.unsplash.com/photo-1584463699043-740c40f783d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80)

I just wish all of this to finish soon...

It is not the article I hoped for, sorry for my rant.
Wash your hands, stay safe and at home. Wherever you are in the world. 

_We are going to win this one!_

Tell me: **How are you coping with life at the moment?**

Leave a comment and let me know your thoughts about it 💓
React: useState
Tags: tutorial, beginners, react
Published: 2020-03-22 17:07:22

React has different ways we could manage our state. One of them is `useState`. `useState` is the simplest and easiest-to-understand way to manage state.

`useState` accepts an initial state which could be a string, number, object, array, etc. It then returns an array consisting of the state and a setter.

```react
const [counter, setCounter] = useState(0)
```

The setter returned is used to update the value of the state. The setter can accept the new value or a function. The function passed to the setter receives the previous state as its argument.

```react
setCounter(1)
setCounter(previousState => previousState + 1)
```

It's important to note that whatever the setter receives as a value or is returned by the function will full replace what's inside of the state.

```react
const [books, setBooks] = useState([])

setBooks({ title: New Book })
console.log(books) // { title: New Book }

setBooks(previousState => [
  ...previousState,
  { title: New Book }
])
console.log(books) // [{ title: New Book }]
```

Here's couple of solutions to common problems that seem to come up frequently with beginners.

**Add to Array**

```react
const [books, setBooks] = useState([])
  
const addBook = (newBook) => {
  setBooks(previousState => [
    ...previousState,
    newBook
  ])
}
```

**Remove from Array**

```react
const [books, setBooks] = useState([])

const removeBook = (index) => {
  setBooks((previousState) => {
    const booksCopy = [...previousState]
    return booksCopy.slice(index, index + 1)
  }
}
```

**Update item in Array**
```react
const [books, setBooks] = useState([])

const updateBook = (index, newBook) => {
  setBooks((previousState) => {
    const booksCopy = [...previousState]

    booksCopy[index] = {
       ...booksCopy[index],
       ...newBook
    }

    return booksCopy
  }
}
```
You should go Serverless even for your db
Tags: azure, serverless, sql
Published: 2020-03-22 17:00:32

# Why Serverless

In a Cloud Native era, an application shall be dynamic and respond closer to user demand in term of pricing, resources allocation, and responsiveness.

That's why i think Serverless is trending. It allows application to allocate the resources required while minimizing the price when there is no need to. It's pretty common for computation (Lambada, Azure Function, OpenFaaS), but it was uncommon (at least to me) for database.

I discovered that SQL Azure Database provides a Serverless compute model for their database with an interesting feature: auto pausing. [This features](https://docs.microsoft.com/fr-fr/azure/sql-database/sql-database-serverless#autopausing-and-autoresuming) promises to de-allocate resources if there is no request during an amount of minutes (at least 60). The database will be resumed when used. Based on our tests, we need at least 2 minutes to be resumed. It makes too long for our production usage sadly, but we can still leverage it for our tests servers.

# How to use it

Even if the autoresume is still too long to be used without care, we found a way to leverage Serverless compute model to reduce the price of our tests environment. The pricing involves the size of data used by the database more than the previous pricing model (where you can have between 1 Go and 250 Go of data without a noticeable cost per month difference). And your database is pretty small.

Generally a developer requires a full fresh environment to conduct his tests. Even if the auto pause feature annoy him, we can leverage it to switch it between working hours. Even if the developer uses it beyond the working hours, the database will remain available without delay at least for an hour, and available with the auto resume beyond.

All we need is to 2 scripts using Automation: 

Enable Autopause (at the end of working hours):

```bash
az sql db update -n [YOUR_DATABASE_NAME] -s [YOUR_SERVER_NAME] -g [YOUR_RESOURCE_GROUP_NAME] --auto-pause-delay 60 --compute-model Serverless --edition GeneralPurpose --capacity 2 --family Gen5 --max-size 10GB 
```
Disable Autopause (at the start of working hours):

```bash
az sql db update -n [YOUR_DATABASE_NAME] -s [YOUR_SERVER_NAME] -g [YOUR_RESOURCE_GROUP_NAME] --auto-pause-delay -1 --compute-model Serverless --edition GeneralPurpose --capacity 2 --family Gen5 --max-size 10GB 
```
Automatically have typescript compilation errors highlight across your entire VSCode project
Tags: typescript, vscode
Published: 2020-03-22 16:58:38

By default, you only have TS errors highlight in the file you have open.

Wouldn't it be cool to to have them highlight across the entire project directory tree when they occure during refactorings, or other processes that do sneaky things ?

In order to enable that you have to create a VSCode task and run it.

### Create a tasks.json file
If you don't already have a `.vscode/tasks.json` file in your project,
type `CMD+Shift+P`, and select `Tasks: Configure Task`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4edal1j1vrso83q0nvh0.png)
Select `Create tasks tasks.json file from template`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/whcz672qclug0nte5fev.png)
And finally `Others`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eleoklx8byjiw4korjie.png)
You now have `tasks.json` file in your project with a hello world task!

### Edits tasks.jon
Open `.vscode/tasks.json`, and add the following object in the tasks array:
```json
    {
      "label": "ts-scan", // Use the name you want
      "command": "tsc",
      "args": ["-w", "-p", ".", "--noEmit"],
      "isBackground": true,
      "problemMatcher": "$tsc-watch"
    }
```
Explanation: your task runs the compiler (`tsc`) in watch mode (`-w`), using `.tsconfig` file of your project's directory (`-p .`). All that is done in dry run mode (`--noEmit`).
Most importantly, forwarding the errors to `$tsc-watch` is what is going to allow detected errors to be highlighted in your project!

Note: you can kill two birds with one stone buy passing the actual transpilation command you use in your project like this:
```json
    {
      "label": "yarn build:watch",
      "command": "yarn",
      "args": ["build:watch"],
      "isBackground": true,
      "problemMatcher": "$tsc-watch"
    }
```


### Run the task you just created.
Do `CMD+Shift+P` and select `run task`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vsgekhwyulr4ht4tlxd3.png)
Select `ts-scan`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zexgvveebn8pdwqppi90.png)
And thats it ! Anything broken will highlight in red, whether the file with problems is open or not.

### Demo:
Via a terminal external to VSCode, I renamed file `transformations.ts` to `broken-transformations.ts` which will break all the imports of that file.
As expected, all the files that imported `transformations.ts` light up in red in the file explorer :rotating_light:.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rmgpq121vc2udajko6dp.png)

Hope this tip helps! :star:
Happy coding. :computer:
🦜️Review 10: Tackling Swift page, Developer: Tom | #elefDoesCode
Tags: review, portfolio, code, developer
Published: 2020-03-22 16:58:12

⬇️I will review your... 

🤓The process:
1. Every week I will do a live stream on my youtube channel reviewing your site
2. I will give feedback and suggestions according to your needs. 
3. If I have a way to contact you, I'll gladly do so :)
4. If you have any question don't hesitate to contact me!

Take part [here](https://forms.gle/9AxiCUQ8YudTVYzs9) (I only need a URL and your name).

It doesn't matter if you are a beginner or more advanced. 
You can submit as many sites as you want.

🙏Thank you for taking part with your website into my live streams.
It takes courage to let someone you don't know to review your work...
But remember feedback is important and all of us need it...
 
🤗The review is FREE. You don't pay for anything. I won't be paid by anyone.

----------------------------

In particular, in this video you'll find 2 reviews:

🤓The developer: Tom
💪The project: https://tacklingswift.com/


⌨Previously 
- [review 1](https://dev.to/eleftheriabatsou/review-1-tribute-page-by-freecodecamp-developer-kyle-elefdoescode-4006)
- [review 2](https://dev.to/eleftheriabatsou/review-2-personal-portfolio-developer-diego-elefdoescode-4g36)
- [review 3](https://dev.to/eleftheriabatsou/review-3-portfolio-and-airshare-project-developer-rajitha-elefdoescode-3gop)
- [review 4](https://dev.to/eleftheriabatsou/review-4-personal-portfolio-developer-jatin-elefdoescode-4i52)
- [review 5](https://dev.to/eleftheriabatsou/review-5-github-cool-projects-with-react-developer-saad-elefdoescode-4091)
- [review 6](https://dev.to/eleftheriabatsou/review-6-personal-portfolio-developer-john-elefdoescode-2e20)
- [review 7](https://dev.to/eleftheriabatsou/review-7-coding-with-basir-developer-basir-elefdoescode-5hak)
- [review 8](https://dev.to/eleftheriabatsou/review-8-modern-portfolio-developer-max-elefdoescode-3c79)
- [review 9](https://dev.to/eleftheriabatsou/review-9-portfolio-and-product-page-developer-adil-and-kyle-elefdoescode-2mmb)

----------------------------

👋Hello, I' m Eleftheria, an app developer, master student, freelancer, public speaker, and chocolate lover.


😎Top 3 list:
- How to stay motivated | A developer's edition | @BatsouElef: https://youtu.be/qMvEtb5OxNo
- How to be a Better Problem Solver | Tips and solutions: https://youtu.be/dELt7yKIxIA
- Simple Tips to Build a Personal Brand as a Developer (+ personal examples): https://youtu.be/7s0o1gi0iP0

🥰If you liked this video please share

🍩Would you care about buying me a coffee? You can do it here: [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou) but If you can't that's ok too!


**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/eleftheriabatsou/)
Interesting links that I found - vol. 2
Tags: links, uxui, css
Published: 2020-03-22 16:55:07

---
title: Interesting links that I found - vol. 2
published: true
date: 2020-03-22 16:55:03 UTC
tags: links,uxui,css
canonical_url: https://krzysztofzuraw.com/blog/2020/links-2
---

This is the second post of my series about things that i found on the internet this week.

# Coding

- [Baymard Institute](https://baymard.com/) - a lot of great knowledge about UX/UI based on research. I just started reading and I’m finding more and more useful info there.
- [CSS Grid course](cssgrid.io/) by Wes Bos. Awesome content. I have a blog post about it coming but what I really like is how Wes is giving me incentive to do some more work with CSS grid.

# Other

- [Text file time blocking](https://www.calnewport.com/blog/2020/03/16/text-file-time-blocking/) - nice write up about time blocking in text file. After this post I decided to try it - so far (2 days) it is nice. Let’s see how it gonna fly.
- [Plain text project](https://plaintextproject.online/) - as we are on plain text field. Really nice blog about all things plain text.
TetraQuicky02: Default boot OS or kernel in GRUB2
Tags: grub, linux, dualboot
Published: 2020-03-22 15:52:53

If you are a Linux user, chances are that you are dual booting; and not because you need Office 365 or because Win 10, after all, is not so bad nowadays. No, the real reason is that more than half of your steam library still does not work in tour Ubuntu. And yes: Gimp is great (only after you spent 2 days looking for the Crop menu Item) and while [Darktable](https://www.darktable.org/) and [RawTherapee](https://rawtherapee.com/) are really respectable (especially the latter), you will need sooner to pay Adobe a with a not neglectable part of your soul to use Lightroom because it is the only one that integrates decently with Nik Collection and it does not fry your CPU to run decently... or simply you need ACDSee to organize properly you pictures.

Well in that case (phew thank god you don't need Visual Studio... or do you?) you are going to spend the rest of your life dual booting...

`Grub` was a mess; Grub2 they say is better; I don't know but if you, like me, end up with 30 different kernels with several patches for stuff you don't even remember or even worst you discover [ukuu](https://github.com/teejee2008/ukuu) (yeah thanks Tony... you made all the kernel super easily installable on ubuntu and now I have 200 different kernels in GRUB)...

Well, you are lost maybe you just need to set a default but then you need to change it again and then not and then again. Your life at that point is miserable. I understand you.

But thanks to GRUB2 and to its impossible-to-find documentation **you can now save your latest grub selection for the next boot** so _you can finally leave your PC booting un-attended_ (yes... in 2020 your dual boot computer can finally boot unattended!!)

You just have to edit 2 lines of `/etc/default/grub` with this 2 stupid variables:
```bash
GRUB_SAVEDEFAULT=true
GRUB_DEFAULT=saved
```
and then don't forget to run
```
sudo update-grub
```

And your life finally will change... for the better

---
*NOTE*
If you keep in booting in the wrong kernel, repeatedly, not even this will help you. It's too late by then.

---
Como desplegar una Blazor app en Azure Storage
Tags: azure, blazor, wecoded, womenintech
Published: 2020-03-22 16:54:59

Estaba experimentando con [Blazor web assembly](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor) y encontré que se puede [desplegar una aplicación](https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/blazor/?view=aspnetcore-3.1&tabs=netcore-cli) a una cuenta de Azure storage.

Aqui un video demostrando como hacerlo
{% youtube W5lz9dFa2yI %}

Estoy tratando de practicar mi español haciendo videos en este idioma. Si tienes alguna recomendación o realimentación me lo dejas en los comentarios, lo apreciaría.

Gracias.
We vs Virus Hackathon: Youtube Likes Plz!
Tags: hackathon, corona
Published: 2020-03-22 16:49:32

---
title: We vs Virus Hackathon: Youtube Likes Plz!
published: true
description: 
tags: hackathon, corona
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/eaxgpa1tk5nc3csilady.jpg
---

{% youtube qsU9OfxET70 %}

[We need your YouTube Likes! :D](https://www.youtube.com/watch?v=qsU9OfxET70)