teleren/devto huggingface dataset:
Kill Your Darlings...
Tags: javascript
Published: 2021-05-17 15:51:59

I finished my last post on this blog and something began nagging at me. I wrote all about extending a JavaScript class and listed some extended methods I built. All of a sudden I realized I didn't need one of them. (go back and [read the original post here.](https://dev.to/kevhines/that-javascript-has-extended-class-1aab))

## Let's look back

Here is the extended class I wrote about:

```
class AllCards extends Deck {

    constructor() {
        super()
        this.namedCards = []
    }

    addCardtoDeck(card) {
        super.addCardtoDeck(card)
        if (card.name) {
            this.namedCards.push(card)
        }
    }

    resetNamed() {
        this.namedCards = this.unplayedCards.filter(card => card.name)
    }

}
```

If you didn't go back and read my previous post (rude) here is what's going on. I wrote a very simple card game that used a very unique deck of cards (you can't buy these cards in stores). I had built a class to keep track of different decks of cards involved. I extended playable decks (the computer's and players cards) and I also extended an **AllCards** deck that kept track of every card in the game (even the ones that were not being played with) and also kept track of each card's names and rules.

I needed to keep track of which cards had names and which ones didn't so I  "cleverly" extended my **addCardtoDeck** class to keep track of named cards.

So far so good.

Then I mentioned I created a method called **resetNamed** that rebuilt my named deck when a new game is started. (Many cards may have gained names while you played).

I posted my blog entry and went to work on something else.

*rebuilt my named deck.
extended class to keep track of named cards.
rebuilt my named deck.
extended class to keep track of named cards.
rebuilt my named deck.
extended class to build named deck.
named deck.
named deck.*

Wait a second!!!

## Not so Clever

I wrote a nice little extended method, but then later wrote a simple method that had the same result. That's repeated work and repeated work is inefficient coding. 

So I got rid of the extended class (keeping the original class that builds the deck of all cards). I found the method that called on my Deck class to rebuild all the decks before a new game and leveraged that method before the original game.

The only thing an original game does that repeat games does not do is fetch card data from my database. So truly that rebuilding section of code was just building decks (it didn't matter if they existed before or not)

First games and new games both run a **prepForGame** method (clear some bits of the DOM, make an addition to the Game Log, clear any old decks), then a first game Fetches Data and sorts that data. After that both first and new games run **resetNamed** and deal cards to the User and the Computer. 

The end result looks so much cleaner. Instead of building my array of Named Cards in two different ways I now did it one place, in one way. Much simpler if I ever need to make future changes.

So my clever extended method wasn't as clever as just not using that method at all.
Creating Snackitos w/ Joy Valerie Carrera
Tags: podcast, design
Published: 2021-05-17 15:44:07

[Listen Here](https://open.spotify.com/episode/5750ROHPGVg8iuEFSXXHzF?si=7k24bAWWTXO5hwrCols8EQ)

In this episode, I interview Joy Valerie Carrera. We discuss all her work. She has a digital agency, Carrera Digital, where she helps businesses improve their operations. She runs bootcamps for small businesses and has 2 podcasts, Build with Joy and Basic Brown Nerds. She discusses pricing and finance too. It's a fantastic episode!!

Where to Find Joy:
[Joy's Products](https://learn.buildwithjoy.co/)
[Joy's Blog](https://buildwithjoy.co/)
[Joy's Twitter](https://twitter.com/buildwithjoy)

**Show Notes:**
[Episode Page](https://baib-podcast.com/build-with-joy.html)
[Revenue Research](https://revenueresearch.co/)
Colorize your routes in Angular with a simple interceptor.
Tags: angular, typescript, interceptor, inmemorywebapi
Published: 2021-05-17 15:43:14

[live example](https://stackblitz.com/edit/colorize-routes-to-console-interceptor?devtoolsheight=33)

We know the simplest way to view traffic is using the network tab in DevTools, but sometimes you need to add another tool to your debugging arsenal. Using an [interceptor](https://angular.io/guide/http#intercepting-requests-and-responses) will help you tap into the http request pipeline so you can work your magic and log all of your routes in a nice color-coded format so they stand out. 

If you are using the [In-Memory Web API](https://www.npmjs.com/package/angular-in-memory-web-api/v/0.1.8), (which is the best thing since sliced bread), all of your calls are technically *not* going over the wire, so nothing is written to the network tab. Adding this interceptor also will help replace it until you are ready to move over to live data.

Here it is! A tiny bit of code to help you out. Be sure to try it out on [StackBlitz](https://stackblitz.com/edit/colorize-routes-to-console-interceptor?devtoolsheight=33), and remember to remove it before you go live 😀.

```typescript
@Injectable()
export class LogAndColorizeRoutesInterceptor implements HttpInterceptor {
  constructor(private jsonPipe: JsonPipe) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    if (req.url.startsWith('api')) {
      const body = req.body ? ': ' + this.jsonPipe.transform(req.body) : '';
      console.log(
        `%c${req.method} ${req.url}${body}`,
        this.getColor(req.method)
      );
    }
    return next.handle(req);
  }

  getColor(method: string): string {
    switch (method) {
      case 'PUT':
        return 'color: #fca130';
      case 'GET':
        return 'color: #61affe';
      case 'POST':
        return 'color: #49cc90';
      case 'DELETE':
        return 'color: #f93e3e';
      case 'PATCH':
        return 'color: #b7410e';
      default:
        return 'color: #000000';
    }
  }
}
```
Result:
![Chrome Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ay6c9wk9fihpxn6njhv4.png)
Benefits of modern application development
Tags: aws, serverless, agile
Published: 2021-05-17 15:41:13

Modern applications are built with a combination of modular architecture patterns, serverless operational models and agile developer processes, and they allow organizations to innovate faster while reducing risk, time to market, and total cost of ownership.

**Faster to market**

By speeding up the build and release cycle and offloading operational overhead, developers can quickly build new features. Automated test and release processes reduce error rates, so products are market-ready faster.

**Increased innovation**

With a modular architecture, changes to any individual application component can be made quickly, and with a lower risk to the whole application, so teams can experiment with new ideas more often.

**Improved reliability**

By automating test procedures, and monitoring at every stage of the development lifecycle, modern applications are reliable at deployment. Any issues can be evaluated and addressed in real time.

**Reduced costs**

With a pay-for-value pricing model, modern applications reduce the cost of over-provisioning or paying for idle resources. By offloading infrastructure management, maintenance costs are also lower.
How to Install React in Laravel 8
Tags: laravel, react
Published: 2021-05-17 15:34:23

This tutorial will provide example of laravel 8 install react. you'll learn laravel 8 react auth. This article goes in detailed on laravel 8 react npm install. I’m going to show you about how to install react js in laravel 8.

If you are beginner with laravel 8 then i am sure i can help you to install react in laravel 8. it's very simple way to install using laravel ui composer package.

Laravel ui provide way to install bootstrap, react and react setup. they also provide auth scaffold for login and register. laravel 8 provide easy way to work with bootstrap, react and react.
[How to Install React in Laravel 8](https://www.codecheef.org/article/how-to-install-react-in-laravel-8)
JavaScript HTML DOM
Published: 2021-05-17 15:29:04

![HTML DOM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmjj8fn6bhl2b3wlvcvb.gif)
### DOM Intro
Browser creates a Document Object Model when a web page be loaded. Using HTML DOM Javascript can access HTML elements.
HTML DOM Property is value of a HTML element & HTML DOM Method is addition or deletion of a HTML element.

### Find HTML element using DOM
There are several ways to find a HTML element.
Find an element by element id - `document.getElementById(id)`
Find elements by tag name - `document.getElementsByTagName(name)`
Find elements by class name - `document.getElementsByClassName(name)`

### HTML DOM Property
HTML DOM Property can be accessed like this.
Change the inner HTML of an element - `element.innerHTML =  'new html content'`
Change the attribute value of an HTML element - `element.attribute = 'new value'`
Change the style of an HTML element - `element.style.property = 'new style'`
Change the attribute value of an HTML element - `element.setAttribute(attribute, value)`

### HTML DOM Method
There are several DOM Method, like-
Create an HTML element - `document.createElement(element)`
Remove an HTML element - `document.removeChild(element)`
Add an HTML element -  `document.appendChild(element)`
Replace an HTML element - `document.replaceChild(new, old)`

###HTML DOM Event
Event can be accessed both using & without using event listener.
Without using event listener - `document.getElementById("myBtn").onclick = javascript;`
Using event listener - `document.getElementById("myBtn").addEventListener("click", javascript);`
React: state para dummies con una analogía simple
Tags: react, javascript, webdev, spanish
Published: 2021-05-17 15:13:26

Lastimosamente cuando estaba en la universidad estudiando la carrera no me enseñaron ningún framework frondend, los conocimientos que tengo React los fui adquiriendo de manera autodidacta (irónicamente la pandemia ayudó este aprendizaje por el tiempo libre excedente.)

Uno de los conceptos fundamentales para entender React es el **estado**. Personalmente me costó mucho entenderlo bien pese a que lei varias definiciones y vi varios tutoriales sentia que no entendía los conceptos del todo, lo que es muy normal al principio cuando nos enfrentamos a aprender algo desde cero y mas aun por cuenta propia.

En la página [thinkster](https://thinkster.io/tutorials/understanding-react-state) tienen un artículo pequeño donde realizan una analogía para recordar y entender el estado de un componente, en parafrasis, mas o menos dice lo siguiente:

**LOS ESTADOS DE LA MATERIA**
El agua, desde la primaria nos enseñan que este elemento tiene 3 estados básicos: líquido, sólido y gaseoso. ¿Qué factor es el que hace que el agua esté en un estado o en otro? La respuesta es sencilla: la temperatura; si elevamos la temperatura el agua empieza a evaporarse y si por el contrario la reducimos el agua se solidifica convirtiéndose en hielo.

De igual manera podemos ir alterando el estado de nuestros componentes en React, para que en un momento dado actúen y hagan ciertas acciones que deseamos pero en otro momento se desempeñen de una manera distinta.

Recuerda que los estados y su manipulación constituyen el corazón de todo componente React, un componente sin estado no hace la gran cosa, son muy estáticos y poco prácticos.

## **Referencias**
Si deseas leer el artículo original te el link directo
https://thinkster.io/tutorials/understanding-react-state

Este post lo encontre en el **Curso Profesional de React** de Código Facilito, los respectivos creditos a ellos.

{% instagram CO4ZZDsIvR6 %}

---

Si gustas, puedes leer otras entradas mías que podrían ser de tu interés:

{% link https://dev.to/duxtech/desplegar-app-de-react-js-en-netlify-en-menos-de-5-min-3li9 %}

{% link https://dev.to/duxtech/app-de-clima-con-react-16-api-openweathermap-4gg0 %}

{% link https://dev.to/duxtech/como-crear-un-proyecto-de-react-js-desde-0-create-react-app-49f6 %}

---  

![img](https://media.giphy.com/media/3orif8SZCC9OCqaHnO/giphy.gif)
Add a unique id and use it as a key
Tags: javascript, vue, react
Published: 2021-05-17 14:23:08

## Introduction

If you use Vue or React, you must know about keys. They are mostly used with lists such as

```js
const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);
```
and in Vue:

```js
<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>
```

## Avoid using index as key

Both React and Vue advice against using the index as a key especially if the order of items may change. As if you want to allow users to reorder items.

```js
// not recommended to use index as key
<ul>
  <li v-for="(todo, index) in todos" :key="index">
    {{ todo.text }}
  </li>
</ul>
```
Sometimes we are lucky enough that our data comes with a unique id that identifies each of the items.

Other times, we are not so lucky. The `items` don't have unique ids. Or they do, but we want to render the item more than once. In that case, if we use the id as a key, we will run into duplicate keys issue.

We will have to create unique ids for the `items` and use them as keys.


## Generate keys

There are many ways to do that. I will choose Lodash's uniqueId method since Lodash is used in the project I am working on and there is no need to load another library

```js
import uniqueId from 'lodash/uniqueId';
```
Before rendering `todos`, loop through it and add a `uniquekey`

```js
todos.forEach((todo) => {
  todo.uniqueKey = uniqueId();
});
```

Then, you can use `todo.uniqueKey` as a key. `uniqueId()` will generate a unique id for each todo. However, sometimes those ids might clash with other ids for a different list in the page. We can take it further and add an argument to `uniqueId('todo_')` to avoid duplicate keys.


## Final thoughts
This `uniqueKey` was only added to do a particular job in the frontend. We probably wouldn't need to send it to the backend. So, before sending `todos` to the backend, make sure to delete the `uniqueKey`

```js
todos.forEach((todo) => {
  todo.uniqueKey && delete todo.uniqueKey;
});
```


*Thanks for reading*
Enterprise Employee Portal Setup: 12 Must-Keep Features to Make the Difference in Your Niche
Tags: intranet, employeeportal, softwaredevelopment, digitaltransformation
Published: 2021-05-17 14:38:23

A digital employee portal can reinforce your company culture, ensuring your biggest assets – your talents – remain. How to build an intranet that facilitates efficient enterprise collaboration? Read more in the guide 👇 

[https://apiko.com/blog/enterprise-employee-portal-setup/](https://apiko.com/blog/enterprise-employee-portal-setup/)

1. The Case for Terms: Employee Portal Software, Intranet 2.0, Social Intranet, Digital Workspace
2. Custom Employee Portal Software vs Third-party Solutions
3. Top 6 Recent Trends for Social Intranet Workspace
4. 12 Must-keep Features that Add Value to Your Employee Portal Software
5. What Integrations Will Help Your Employee Portal to Outstand?
6. Custom Employee Portal Software Development: How Does It Work at Apiko?
Deploying Web-Based Data Visualizations with Bokeh in Python
Tags: tutorial, python, webdev, bokeh
Published: 2021-05-17 14:32:00

>The ability to manipulate data in an easy and readable way has made Python a staple of the data science community. Nevertheless, Python has become an increasingly popular language among web developers who want to build data-centered applications on the web.
	
One popular Python tool for this purpose is **Bokeh**, a Python library for building interactive data visualizations for the web. 

In this tutorial, we’re going to show you how to create a Bokeh server with various charts. While we’ll be doing this in Codesphere, a browser-based IDE with easy deployment features, this tutorial is applicable to any IDE. 

You can learn more about Codesphere here:
[https://codesphere.com/](https://codesphere.com/?utm_source=dev.to&utm_medium=link-website&utm_campaign=blog-bokeh)

###Getting Started

To start off, in an empty directory create a virtual environment with:

`pipenv shell`

Once that process is complete, in your virtual environment install Bokeh with:

`pipenv install bokeh`

Finally, we’re going to create a `main.py` file to house the following Bokeh code, which creates a simple line graph:

{% gist https://gist.github.com/LiorB-D/ac00d7749553a0bac2d1c6fc02acfda4.js %}

Alternatively, here is the starter project above ready to deploy from Codesphere (Don’t forget to enter your virtual environment and install Bokeh!):

https://codesphere.com/#https://github.com/LiorB-D/BokehServer


Now if you are using a local ide, you can serve this Bokeh application with:

`bokeh serve main.py`


If you are running your app in Codesphere, you need to adjust that deploy command so that it runs on port 3000 and allows the server to run from Codesphere's domain.

`bokeh serve main.py - port 3000 - allow-websocket-origin=*`

And you then should see your app deployed!

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


###How to Make Different Charts in Bokeh

Even though Bokeh is an incredibly extensive library, it is still very easy to create different types of Charts. Here are the functions to generate different types of basic chart:

####Line Chart: 
p.line(x,y, line_width=2)

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

####Bar Chart:
p.vbar(x=x, top=y, width=0.5)

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

####Scatterplot:
p.scatter(x, y, size = 20)

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

Thanks for reading! For more information and updates on how Codesphere is revolutionizing the software industry, follow us on our socials.

Stay tuned and Happy Coding!
Subscribe to Newsletter Using HTML & CSS
Tags: html, css, webdev, beginners
Published: 2021-05-17 14:30:14

Hello, today I created a Subscribe to the newsletter using CSS. Not great work but I hope you like this also comments about your thoughts. For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/)

{% codepen https://codepen.io/NikhilBobade/pen/RwpGrQe %}
What's new in Hasura Cloud: May 2021
Tags: releases, hasuracloud, graphqlmonitoring, monitoring
Published: 2021-05-18 08:44:27

---
title: What's new in Hasura Cloud: May 2021
published: true
date: 2021-05-17 14:22:26 UTC
tags: Releases,HasuraCloud,GraphQLMonitoring,Monitoring
canonical_url: https://hasura.io/blog/whats-new-in-hasura-cloud-may-2021/
---

![What's new in Hasura Cloud: May 2021](https://hasura.io/blog/content/images/2021/05/has_cloud_new_may-1.png)

Hasura Cloud gives you a fully managed, production ready GraphQL API as a service to help you build modern apps faster. You can [get started in 30 seconds](https://cloud.hasura.io/).

Of course, we aren't staying still but frequently releasing new versions. Recently, along with the usual stability improvements, we introduced new regions, and tooling for better observability. Namely, these features are:

1. Regions in the US west, east, and Asia Pacific
2. An updated monitoring dashboard

Let’s have a look at each of these in more detail.

## Hasura Cloud now in Oregon, Virginia, and Tokyo

This release brings three new regions for Hasura:

- US West - Oregon (us-west-2)
- US East - N. Virginia (us-east-1)
- Asia Pacific - Tokyo (ap-northeast-1)

In our continued commitment to serving more customers in more places, we are happy to offer these three new regions to bring a faster Hasura Cloud experience, wherever you are.

![What's new in Hasura Cloud: May 2021](https://hasura.io/blog/content/images/2021/05/cloud_regions.png)

## All the important metrics in a single view

We’ve refreshed the monitoring tab’s general appearance as well as introduced a much more informative landing screen. View all the most vital statistics in a glance, with quick access to multi-db performance measurements.

![What's new in Hasura Cloud: May 2021](https://hasura.io/blog/content/images/2021/05/cloud_monitoring.png)<figcaption>Monitoring in Hasura Cloud</figcaption>

## Conclusion

Of course, as you experience the simplicity of Hasura Cloud you can find us on Twitter ([@HasuraHQ](https://twitter.com/hasurahq)) and, for ad-hoc conversation, feel free to join us on the [Hasura Community Discord](https://discord.com/invite/hasura).

If you want an overview of the process of using Hasura Cloud, our [Getting Started with Hasura Cloud](Getting%20Started%20with%20Hasura%20Cloud) docs are the place to start.
Six figures software developer salary after three years
Tags: beginners, webdev, career
Published: 2021-07-21 08:01:00

---
title: Six figures software developer salary after three years
published: true
date: 2021-05-17 14:16:09 UTC
tags: Beginner, webdev, career
canonical_url: https://www.nocsdegree.com/six-figures-software-developer-salary-three-years/
---

 ![Six figures software developer salary after three years](https://www.nocsdegree.com/content/images/2021/05/kenneth-2.jpg)

The No CS Degree podcast is out now! You can listen to an interview with Kenneth Cassel about how he switched working in the trades and toiling away in the Texas heat on the roof of a gas station to being a work at home software developer making six figures.  

Kenneth was able to achieve a six figure salary after just three years of becoming a developer and he didn't need a CS degree to do it either! Kenneth has very recently quit his job to go full-time on his own project [Slip](https://slip.so), which allows developers to sell their own interactive programming courses. It was a real pleasure chatting with Kenneth and I hope you enjoy the podcast!

<!--kg-card-begin: html--><iframe width="100%" height="180" frameborder="no" scrolling="no" seamless src="https://share.transistor.fm/e/fe1dae17/dark"></iframe><!--kg-card-end: html-->
Casbin-Ruby: an authorization library supporting distributed role-based access control (RBAC)
Tags: opensource, ruby, showdev, webdev
Published: 2021-05-17 14:11:52

Our KFC project employs a microservice architecture, with components written in various languages and runtime environments, ​​such as .NET, Ruby, and Go. Many of these components need to be able to make decisions based upon the authorization status of a user: who are they, what roles do they belong to, what actions are they able to perform, and to what?

We needed a consistent way to use role-based access control between multiple independent languages, and we also needed a way to manage the permissions and access control lists (ACLs). We discovered Casbin, an authorization library that was implemented in a variety of different languages. But there was one snag: we needed a Ruby implementation, and Casbin had not yet been ported to Ruby. So, we decided to do it ourselves, and the result is Casbin-Ruby. Read more about the Casbin-Ruby open-source project.