teleren/devto huggingface dataset:
Daily Dose of JavaScript: way to download files/blob objects, a bit dirty
Tags: javascript, node, filedownload
Published: 2021-04-27 01:46:05

```js
createBlob = async function Blob(link){
        const file = await fetch(link)
        return file.blob()
  }  

downloadBlob =  async function download(link){
      const result = await this.createBlob(link);
     
      if(result){
         let atag = document.createElement("a");
            atag.download = 'myVid';
            atag.href = window.URL.createObjectURL(result);
            document.body.appendChild(atag);
            atag.click();
            document.body.removeChild(atag)
      }
  }



```

if twitter is your thing come say hi <a href="https://twitter.com/intent/tweet?screen_name=MhlunguSfundo&ref_src=twsrc%5Etfw" class="twitter-mention-button" data-show-count="false">Tweet to @MhlunguSfundo</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> or drop a question i am happy to answer.
Magento 2: SQLSTATE[HY000]: General error: 1449 The user specified as a definer ('user'@'localhost') does not exist, query was
Published: 2021-04-27 01:21:41

```
grant all on *.* to 'theuser123'@'%' identified by 'Magento@1234567' with grant option;

```

SQLSTATE[HY000] Fixed ...

This happens after moving the DB from one server to another server. Initially, the definer was using localhost and the theuser123. On the new server, we don't have that user(theuser123), and the host had also can be changed.

Magento 2 (Zend_Db_Statement_Exception): SQLSTATE[HY000]: General error: 1449 The user specified as a definer ('theuser123'@'localhost') does not exist, query was: SELECT
Simplest color scheme generator in Vuejs
Tags: design, javascript, css, color
Published: 2021-04-27 01:15:11

I try to make the simplest color generator with JavaScript.
My understanding of the generator is that it works most of the time with HSL color representation. It is mostly for me to practice conversions between colors. 

I first convert hex color to RGB color by taking input and take first 2 characters to represent Red value than next 2 characters represent Green value and last 2 character is Blue value. After that, I take RGB color and convert it to HSL I found [Here](https://css-tricks.com/converting-color-spaces-in-javascript/). In the end, I just take the HSL value and change the L(lightness) value if I want darker color I subtract some value and if I want lighter color I add some value. 
You can check how it looks like and plays a little with it on my codepen. 
In the next few days, I will try to recreate [Adobe color](https://color.adobe.com/).
{% codepen https://codepen.io/bajro91/pen/eYgXjNZ %}
Backend development & Nodejs 
Tags: node, javascript
Published: 2021-04-27 01:11:14

I start the back-end development understanding that a back-end web developer is responsible for server-side web application logic and integration of the work front-end developers do. Back-end developers are usually writing the web services and APIs used by front-end developers and mobile application developers. I was introduced to Node js as 

🔹️ Node.js is an open-source server environment
🔹️ Node.js is free
🔹️ Node.js runs on various platforms (Windows, Linux, Unix, Mac OS, etc.)
🔹️ Node.js uses JavaScript on the server

What Node.js Do?

🔹️ Node.js can generate the dynamic page content
🔹️ Node.js can create, open, read, write, delete, and close files on the server
🔹️ Node.js can collect form data
🔹️ Node.js can add, delete, modify data in your database

What a Node.js File is?

🔹️ Node.js files contain tasks that will be executed on certain events
🔹️ A typical event is someone trying to access a port on the server
🔹️ Node.js files must be initiated on the server before having any effect
🔹️ Node.js files have extension ".js"

What is a Module in Node.js?

🔹️ Modules are considered to be the same as JavaScript libraries. A set of functions you want to include in your application.

Node.js as a File Server

🔹️ The Node.js file system module allows you to work with the file system on your computer.

To include the File System module, use the require() method:
       
        var fs = require('fs');

A common use for the File System module:

🔹️ Read files
🔹️ Create files
🔹️ Update files
🔹️ Delete files
🔹️ Rename files

The Built-in URL Module

The URL module splits up a web address into...
readable parts. To include the URL module, use the require() method:

         var url = require('url');

What is NPM?

🔸 NPM is a package manager for Node.js packages, or modules if you like. I proceed By installing an NPM library and running it in my hyper terminal which I console log a random superheroes name and supervillain name.
React Conditional Rendering
Tags: react
Published: 2021-04-27 01:00:25

[My React Breakdown 2021 Github Gist](https://gist.github.com/AlexMercedCoder/b4d86790176f2f5c7b374235cf3dc23c)

## What is conditional rendering

There are times when something should render in some situations and not in others. In frameworks like Vue, Angular and Svelte you have things like directives that directly add semantic ways to express this, React leans hard on using pure javascript to control the flow of a component (so strong Javascript skills really pay off in React).

In this article, we will look at an IsEven component that renders one thing if a prop is even and another it isn't. We'll show you different ways of express it.

## Return statement within an if block

```jsx
const IsEven = props => {
  if (props.number % 2 === 0) {
    return <h1> It is even </h1>
  } else {
    return <h1>It is odd</h1>
  }
}
```

## Single Return Statement, If assigns value to a variable

```jsx
const IsEven = props => {
  let result

  if (props.number % 2 === 0) {
    result = <h1> It is even </h1>
  } else {
    result = <h1>It is odd</h1>
  }

  return result
}
```

## Returning a Ternary Operator

```jsx
const IsEven = props => {
  return props.number % 2 === 0 ? <h1> it is even </h1> : <h1> it is odd </h1>
}
```

## Returning a Ternary Operator but parts stored in variables

```jsx
const IsEven = props => {
  const condition = props.number % 2 === 0

  const ifTrue = () => <h1> it is even </h1>

  const ifFalse = () => <h1> it is odd </h1>

  return condition ? ifTrue() : ifFalse()
}
```

## Conditional Classes

```jsx
const Modal = props => (
  <div className={props.visible ? "active" : ""}>{props.children}</div>
)
```

```jsx
const Modal = props => {
  const divClass = props.visible ? "active" : ""

  return <div className={divClass}>{props.children}</div>
}
```

## Conditional Styles

```jsx
const Modal = props => (
  <div style={{ display: props.visible ? "block" : "none" }}>
    {props.children}
  </div>
)
```

```jsx
const Modal = props => {
  const divDisplay = props.visible ? "block" : "none"

  return <div style={{ display: divDisplay }}>{props.children}</div>
}
```

```jsx
const Modal = props => {
  const divStyle = {
    display: props.visible ? "block" : "none",
  }

  return <div style={divStyle}>{props.children}</div>
}
```

## Using Object Keys to Determine JSX

```jsx
const Component = props => {
  const result = {
    good: <h1>Good</h1>,
    bad: <h1>Bad</h1>,
    ugly: <h1>Ugly</h1>,
  }

  return result[props.key]
}
```

## Using a Switch Statement

```jsx
const Hello = (props) => {
  switch(props.language){
    case "eng":
      return <h1>Hello</h1>
    case "esp":
      return <h1>Hola</h1>
    default:
      return: <h1> No Language Detected </h1>
  }
}
```
Your Commits Can Be Faster
Tags: github, beginners
Published: 2021-04-27 00:53:32

Take two for the price of one!  😎👌

You know that famous sequence to commit your work "git add + git commit"?

```
> git commit -am "message so relevant I'm proud to read"
```

You can switch to this command, so you add all the files to your local repository, stage and commit them in sequence.

Oh, and don't forget to always write a relevant message in your commits, stop the '.' or 'asdasdadsda', ok? 😓🤝
Seu Commit + Rápido
Tags: github, portuguese, braziliandevs, beginners
Published: 2021-04-27 00:41:22

##Leve 2, pague 1! Ou melhor, digite um! 😎👌


Sabe aquela famosa sequência para commitar o seu trabalho "git add + git commit"?

```
> git commit -am "mensagem tão relevante que dá orgulho de ler"
```

Você pode trocar por este comando, assim você adiciona todos os arquivos ao seu repositório local, faz o stage e o commit na sequência.

Ah, não esqueça de escrever sempre aquela mensagem relevante no seu commit, nada de '.' ou 'hsashhahsah', ok? 😓🤝
How we use Apollo Client to manage GraphQL data in our Next.js Typescript application
Tags: graphql, typescript, react, tutorial
Published: 2021-04-27 00:17:11

Hi there!

I wrote [an article](https://www.dolthub.com/blog/2021-04-26-apollo-client-with-graphql-and-typescript/) about how we use [Apollo Client](https://www.apollographql.com/docs/react) to interface with GraphQL within our [Next.js](https://nextjs.org/) application, [DoltHub](https://www.dolthub.com/). 

It covers:
- Why we chose Apollo as our front-end state management solution
- How we set up our Apollo client to work with Next.js and multiple GraphQL endpoints
- Setting up and using [GraphQL Code Generator](https://www.graphql-code-generator.com/) to generate Typescript code based on our GraphQL schema
- And more!

Check it out here: https://www.dolthub.com/blog/2021-04-26-apollo-client-with-graphql-and-typescript/
Infinite Scroll with React Hook & Intersection Observer
Tags: react, javascript, webdev, hook
Published: 2021-04-27 00:06:20

In this post, we going to use the `useIntersectionObserver` hook that I create in {% post https://dev.to/anxinyang/easy-lazy-loading-with-react-intersection-observer-api-1dll %}

In short, this hook will check if the target element is in the viewport of a document or window.

Ok, let's start with a component that will load a picture:

```typescript
function Component({ id }: { id: number }) {
  const [data, setData] = useState<any>({});
  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/photos/${id}`)
      .then((res) => res.json())
      .then((data) => {
        setData(data);
      });
  }, []);
  return (
    <div style={{ height: "600px" }}>
      <img src={data.url} alt="pic" />
    </div>
  );
}
```


then, we can use it inside the App.js:

```typescript
const pageSize=5;
export default function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      {(() => {
        const children = [];
        for (let i = 1; i <= count * pageSize; i++) {
          children.push(<Component key={i} id={i} />);
        }
        return children;
      })()}
    </div>
  );
}
```

Now, we add the hook, a component that can be used as trigger, and an useEffect that can increase the counter:

```typescript
const pageSize = 5;
export default function App() {
  const [count, setCount] = useState(0);
  const ref = useRef(null);

  const isBottomVisible = useIntersectionObserver(
    ref,
    {
      threshold: 0 //trigger event as soon as the element is in the viewport.
    },
    false // don't remove the observer after intersected.
  );

  useEffect(() => {
    //load next page when bottom is visible
    isBottomVisible && setCount(count + 1);
  }, [isBottomVisible]);

  return (
    <div className="App">
      {(() => {
        const children = [];
        for (let i = 1; i <= count * pageSize; i++) {
          children.push(<Component key={i} id={i} />);
        }
        return children;
      })()}
      <div ref={ref} style={{ width: "100%", height: "20px" }}>
        Bottom
      </div>
    </div>
  );
}
```

Now we can test the code, here is a demo:
{% codesandbox gsinr %}


Thank you all!
Laravel Assert Inertia Values
Tags: laravel, inertia
Published: 2021-04-27 00:04:18

After hunting around Google and Github without finding a clear way to assert the values returned from `Inertia::render` the same way you can with a blade view, `assertViewHas`, I realized Inertia is returning a `$page` variable with the props. Because of this, we can drill down to the value we want to assert since `assertViewHas` accepts dot notation.

```php
Post::factory(10)->create();

$this->get('/posts')
    ->assertViewHas('page.props.posts.data', function($posts) {
        return count($posts) == 10;
    });
```
Note: Im paginating $posts, otherwise `.data` is not needed
The Cold Interview
Tags: career, interview
Published: 2021-04-30 21:34:50

---
title: The Cold Interview
published: true
cover_image: https://source.unsplash.com/dkv2CXSoVfs/900x500
date: 2021-04-27 00:00:00 UTC
tags: career,interview
canonical_url: https://ryanlatta.com/2021/04/the-cold-interview.html
---

At some point, you’ll be interviewing at a company, and you can immediately tell that the interviewer doesn’t want to be there. They might be frustrated or cold, or annoyed. One way or another, your interviewer is unhappy about interviewing you. What can you do when this happens?

# Prepare for the Worst

Sadly, I have to start this article by saying that this interviewer is probably not going to give you high marks.

The upshot here is that most interviews these days aren’t decided by a single person. They often involve groups sharing their input before making a decision. That means one person’s bad day doesn’t always mean losing an opportunity, but it might mean they vote against you.

# How Do You Know?

Most people I have seen and coached can tell immediately when something about their interviewer is off. As humans, we’re pretty good at getting a feel for the temperament of those around us and pretty poor at hiding it.

That means that if you suspect they are in a bad mood, they probably are.

Ironically, more than a few of them will pretty much tell you something at the beginning that will clue you in like:

- I really don’t have time for this today
- I might have to cut this interview short
- There was a scheduling thing, and I didn’t even know I was doing this
- It’s one of those days

You can also tell from their tone of voice and facial expressions that they aren’t in a good mood.

# What Can You Do

Alright, I’m about to give some advice that I have not personally used yet. So if you try it and it works, let me know!

If you have a cold interviewer, your job is to use your time to warm them up.

I want them to tell me what’s bothering them and what is eating them up. I want them to tell me all the things that are overwhelming them. I want them to vent, rant, and get it all out.

For most folks, if you get them talking, they will talk until they are out of time.

Now, let’s imagine you do this, and the person opens their flood gates about what is going on for them. When they debrief about the interview, they will likely say that they didn’t get to ask many questions but that you were a good listener and that they would gladly have you on their team.

The reason is that you made their day better.

That is a far more favorable position to begin than them remembering that day when they were in a bad mood and filtering every interaction with you through that same bad-mood filter.

---

If you liked this article, I write a lot about careers, software, and consulting. I'd for you to join my weekly [newsletter](https://sendfox.com/ryanlatta).

*Image courtesy of [Unsplash](https://unsplash.com)*
The U-Shaped Cell
Tags: processes, productivity, devops
Published: 2021-05-03 07:48:02

---
title: The U-Shaped Cell
published: true
date: 2021-04-27 00:00:00 UTC
tags: processes,productivity,devops
canonical_url: https://jhall.io/archive/2021/04/27/the-u-shaped-cell/
---

The U-Shaped Cell is a concept from the Toyota Production System and Lean Manufacturing. Think of it like an assembly line bent in the middle, so that the input and output are next to each other.

Also, unlike a traditional assembly line, a single person works in a U-shaped cell. They do all the work from start to finish, that is needed in that cell. Organized around the U are the various parts and tools needed to conduct their job. For a manufacturing plant, that may be a bucket of screws, a drill, a lathe, and some paint.

![The U-Shaped Cell, as illustrated in “The Toyota Way”](https://jhall.io/posts/images/u-shaped-cell-horiz.png)

This is one of my favorite analogies and approaches for DevOps: Put all the tools necessary for success, from QA, to deployment, within reach of a single developer.

* * *

If the concept of the U-Shaped Cell intrigues you, I’ve written about applying this concept to Continuous Delivery over at [LeanCD.com](https://jhall.io/lean-cd/).

* * *
If you enjoyed this message, [subscribe](https://jhall.io/daily) to _The Daily Commit_ to get future messages to your inbox.
How to remove all HTML tags from a string using JavaScript?
Tags: javascript
Published: 2021-04-27 00:00:00

---
  title: How to remove all HTML tags from a string using JavaScript?
  published: true
  tags: JavaScript
  date: Tue Apr 27 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/remove-all-html-tags-from-string-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-b045d5f108cf6aba87092cb3c19a00b8.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/remove-all-html-tags-from-string-javascript)
  
To remove all HTML tags from a string, we can use the `replace()` string method in JavaScript.

### TL;DR

```js
// string with html tags
const str = "<div><h1>Hello World!</h1></div>";

// remove all html tags from string
str.replace(/(<([^>]+)>)/gi, ""); // Hello World
```

For example, let' say we have a string with some HTML tags in them like this,

```js
// string with html tags
const str = "<div><h1>Hello World!</h1></div>";
```

Our goal is to remove the `div`, `h1`, etc tags present in the string. So let's use the `replace()` string method and pass:

- a regex expression of `/(<([^>]+)>)/ig` as the first argument which will remove all the tags such as `<>` and `</>` and text inside it.
- and an empty string as the second argument to say that we just want to replace the matched characters with an empty string.

It can be done like this,

```js
// string with html tags
const str = "<div><h1>Hello World!</h1></div>";

// remove all html tags from string
const strWithoutHTmlTags = str.replace(/(<([^>]+)>)/gi, "");

console.log(strWithoutHTmlTags); // Hello World!
```

And we have successfully removed all HTML tags from the string. 😃

See the above code live in [JSBin](https://jsbin.com/didugaxate/2/edit?js,console)

### Feel free to share if you found this useful 😃.

---
When starting 2 apps at the same time makes sense.
Tags: freelancer
Published: 2021-04-26 23:11:04

### Am I crazy? I hope not. Time will tell.

So I thought it was time to come clean and admit it: I'm building 2 different SaaS apps at the same time. As a Solopreneur/Developer, workforce of 1 person and 2 cats, it sounds crazy to try and build 2 different apps and get them both to market, but the right toolchain and the right approach can I hope make this work.

So far, working on two apps at the same time has resulted in **less stress**, **more ideas**, and **better code**.

The problem with building one app is it both takes over you life and can become incredibly stressful. Developers tend to hyper-focus on the problem at hand, yet taking a break and working on something else can unlock your creative powers when you most need them.

So by working on two apps at the same time I hope to avoid burnout and fatigue and launch 2 solid apps.

Neither app would be possible without the headstart provided by [Jumpstart Pro](https://jumpstartrails.com/). This awesome paid environment makes building a production-ready Rails app a snap.

The first app is [FreelancerCashFlow](https://freelancercashflow.com) . Having been a freelancer for most of my life, I've experienced the financial pain, limitations and headaches of Freelancer Feast or Famine. There has to be a better way: managing by cashflow is that way. But first you have to see your cashflow before you can start experimenting by shifting payment dates, savings toward specific purposes and seeing your financial future alternatives.

![FreelancerCashFlow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyawzi0e5j3glz9ecjxk.png)

The second app is [FreelancerContacts](https://freelancercontacts.com/), a referral marketing system for all kinds of freelancers. Certain industries, like real estate agents, have had this down to a science for years: how to ask past and current clients for referrals. Done right, and you go from chasing every posted contract to actually having a waiting list of people who want your services. Since developers hate marketing, building a solid referral system makes sense.

While development of both apps is moving along, I've bought into the Validate Your Idea concept and only have a simple landing page up to gauge interest. I figure if you're willing to provide your email, you're a potential customer.

Anyway, I think the 2 App approach has merit - what do you think?
Let's Git it!
Tags: github, git, beginners
Published: 2021-04-26 23:45:38

#What is Git?
Git is a command-line version control system that enables users to manage and keep track of source code history. This allows users to fork and play around with open-source code without messing with the original code. 

#What is GitHub?
A web-based Git repository hosting service that enables users to manage projects. It has three main features:
*Share your repositories with others
*Access other user's repositories
*Store remote copies of your repositories (GitHub servers) as a backup of your local copies

#So what?
Git and GitHub are commonly used in open-source and commercial development projects. The two enable teams to effectively collaborate on and manage projects regardless of size and complexity. Multiple developers are able to work separately and together without worrying about overwriting others' work or making irrecoverable changes. 

#How does this work?
Check out [this video](https://youtu.be/P2R9aHzlYWQ) which shows an example of how effective collaboration is possible on Git & Github.
A warm welcome for a candidate can make for a smooth interview (100 Bytes Of Wisdom: Day 46)
Tags: career, journey, advice
Published: 2021-04-26 23:30:09

---
title: A warm welcome for a candidate can make for a smooth interview (100 Bytes Of Wisdom: Day 46)
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
//cover_image: https://direct_url_to_image.jpg
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkskdso4gmre5xpj97tp.png)

Arriving for an interview can be stressful, as I’m sure you remember. Tell your team someone is coming in for an interview today, so they’re not greeted with “uh, who are you?” stares. Greet them, make them feel comfortable by asking how their day was so far and offering them some refreshments. If you know the person they’re interviewing with to isn’t ready yet, just have a conversation with them until they are, try not to leave them in a waiting area because that sends an odd message, especially at small companies. If you have an HR person or team, they might offer to do this for you. Work with them for this, they’re awesome for that. They’ll explain to the candidate what the process for the interview(s)/day looks like and put people at ease.

Remember, unless it’s a technical test interview, it’s just a conversation about who the person is, what they know and what they’ve done, and there isn’t any reason for it to be stressful. Keep it casual, keep it friendly.

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/