teleren/devto huggingface dataset:
Announcing React Kanban
Tags: react, relay, productivity, agile
Published: 2019-09-09 13:03:16

Today, I'm excited to announce the first release of **[react-kanban-dnd](https://github.com/lucasbesen/react-kanban-dnd)**. React Kanban is a library that implements a kanban board (click [here](https://www.planview.com/resources/articles/what-is-kanban-board/) if you don't know what it is) and it helps you to organize any kind of things in your project.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9t1lvwiqq4emv28kw3dn.png)

React Kanban idea comes from a project inside of **[Entria](https://www.entria.com.br)**. We needed something like GitHub's Project and we didn't find any project customizable enough.

I created it over the **[react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd)**, huge thanks to you guys, for providing this awesome DnD lib.

One of the most things I've learned with this project is if you've done something cool on your company, talk with your teammates and make it open source. You will be helping the community, improving and polishing the code for your company.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6b0xqmcozaai1a8l0w3w.gif)

## Install and Usage

First, you need to install **react-kanban-dnd** on your project

```sh
yarn add react-kanban-dnd
```

Now, we're good to go:

```javascript
import ReactKanban from 'react-kanban-dnd';

export default class MyKanban extends React.Component {
  render() {
    return (
      <ReactKanban
        onDragEnd={this.onDragEnd}
        onDragStart={this.onDragStart}
        renderCard={this.renderCard}
        columns={columns}
        columnStyle={style.columnStyle}
        columnHeaderStyle={style.columnHeaderStyle}
        columnTitleStyle={style.columnTitleStyle}
        cardWrapperStyle={style.cardWrapperStyle}
      />
    );
  }
}

```

## Get started

You can find **react-kanban-dnd** and the docs [here](https://github.com/lucasbesen/react-kanban-dnd). Every kind of contribution is very welcome: issues, pull requests, feature requests. You can ping me at [Twitter](https://www.twitter.com/lucasbesen) as well.

## Future

Our roadmap is under development, but we have some items already:

- Move to Lerna

Beside that, **react-kanban-dnd** was developed to work with GraphQL. So, one of the next steps is the possibility of Relay Modern integration.

I hope you enjoy it. Any feedback comment here or open an issue.
Relay Modern — Optimistic Update
Tags: react, reactnative, relay, graphql
Published: 2019-09-09 12:49:53

Relay Modern provides an update way that solves the delay to update client data from server response.

It consists in update the client data with an anticipated value that reflects server response.

I'll describe in this post one way to update client data using **optimisticResponse**.

## What happens if something goes wrong?

In case server side returns an error, the client data will get a rollback.

## What happens if server response was different from updated data?

If the server response was different from updated data, Relay will apply server data ensuring consistency.

## Without Optimistic
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0jg23z41yp8t93tf7fdh.gif)

## With Optimistic
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0bpwbe3q2agcz4jn1qo0.gif)

**optimisticResponse** is an object that reflect your mutation output and needs to be passed to **commitMutation**.

```javascript
import { commitMutation } from 'react-relay';

// mutation
// variables

const optimisticResponse = {
  mutationName: {
    output: {
      data: value, 
    },
  },
};

commitMutation(
  env,
  {
    mutation,
    optimisticResponse,
    variables,
  },
);
```

Let's see a complete example:

```javascript
import { commitMutation, graphql } from 'react-relay';

const mutation = graphql`
  mutation ReadMessageMutation($input: ReadMessageMutationInput!) {
    ReadMessage(input: $input) {
      message {
	status
      }
    }
  }
`;

const optimisticResponse = {
  ReadMessage: {
    message: {
      status: 'READ',
    },
  },
};

commitMutation(
  env,
  {
    mutation,
    optimisticResponse,
    variables,
  },
);
```

In the code above, I'm updating the message status before it returns from server side.

I've made a repository to benchmark updating data with and without optimistic update.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/obwud4j6e9p2yh2dskzf.gif)

The code and instructions can be found [here](https://github.com/lucasbesen/relay-modern-optimistic-update).

I hope you enjoy it, thanks for your time.

Any troubles or doubts, send me a message. You can find me at [Github](https://github.com/lucasbesen) and [Twitter](https://www.twitter.com/lucasbesen).
Moving to CI/CD
Tags: help
Published: 2019-09-09 12:49:15

Last week I authored a quick post about moving my team towards CI/CD. I was looking for some feedback from folks, but I think as a neophyte to this community, I should have posted it with a "#help" tag to indicate more clearly that I was soliciting feedback.

To sum up, I'm getting some resistance in moving to CI/CD, and I was looking for feedback any of you who have made the transition. If you've faced resistance from your teammates, how did you help them get to a place where they felt more comfortable? For some more context, here's the original post: https://dev.to/rbseaver/continuous-integration-and-code-reviews-13bc

Thanks in advance for any advice!
[Passo-a-Passo] Criando uma aplicação com NodeJS, usando Express, Mongo, Docker e Babel
Tags: javascript, node, express, mongodb
Published: 2019-09-09 12:41:16

 Olá, pessoal!

Hoje eu quero mostrar o passo-a-passo pra você entender e aprender como configurar um projeto usando diversas coisas ao mesmo tempo, como Docker, Node, Express, Mongo e Babel.

[Veja post completo no blog](https://emersonbroga.com/passo-a-passo-criando-uma-aplicacao-com-nodejs-usando-express-mongo-docker-e-babel/)

[![Criando uma aplicação com NodeJS, usando Express, Mongo, Docker e Babel](https://thepracticaldev.s3.amazonaws.com/i/tazig750nv5078toyrxt.jpg)](https://emersonbroga.com/passo-a-passo-criando-uma-aplicacao-com-nodejs-usando-express-mongo-docker-e-babel/)


[➜ Participe da nossa lista de desenvolvedores](https://emersonbroga.com/e/participe/)
[➜ Aprenda ES6](https://amzn.to/2J4XnLg)
[➜ Veja as dicas no Instagram](https://www.instagram.com/emersonbrogadev/)
[➜ Assista nosso canal no YouTube](https://www.youtube.com/c/emersonbroga/)
[➜ Curta nossa página no Facebook](https://www.facebook.com/emersonbrogadev/)
[➜ Não perca as atualizações no Twitter](https://www.twitter.com/emersonbrogadev/)
[➜ Veja os repositórios no Github](https://www.github.com/emersonbrogadev/)
Your Textbooks Might Be Outdated
Tags: education, career, beginners, computerscience
Published: 2019-09-09 11:52:07

---
title: Your Textbooks Might Be Outdated
published: true
description: Actively seek the best material to get the max out of your studies. 
tags: #education #career #beginners #computerscience
series: Getting The Max From Education
canonical_url: https://treetide.com/posts/getting-max-from-education
cover_image: https://upload.wikimedia.org/wikipedia/commons/8/87/Old_book_bindings.jpg
---

*Originally appeared as part of [Getting the Max out from Education](https://treetide.com/posts/getting-max-from-education) on treetide.com.*

As Paul Graham puts it in his excellent [high-school graduation speech](http://www.paulgraham.com/hs.html), even college textbooks are bad.

> When you get to college, you'll find that (with a few stellar exceptions) the textbooks are not written by the leading scholars in the field they describe. Writing college textbooks is unpleasant work, done mostly by people who need the money.

Here's my take on how to get the most out of your education by finding the best material. We'll take the *Operating Systems* class as our scapegoat:

#### Don't assume your textbooks or curriculum is of the best quality.

What textbooks do people advise on forums? A [search on reddit](https://www.reddit.com/r/books/comments/d2jlf/best_introductory_textbooks_to_your_field_ill/) can be insightful. Ask around in your private student group as well!

What do other institutions teach? Google [*"operating systems cs inurl:edu$"*](https://www.google.com/search?q=operating+systems+cs+inurl%3Aedu$).

#### Try to get hold of a heavy book.

Books take effort to write, and are hard to update. These makes it likely that the content went through proper editing and lays out time-tested foundations. Amazon seems to have a nice selection here.

Once you have the book, don't hold back. Pop it open at interesting chapters, use the highlighter, scribble your questions and ideas all over the margins!

*(If you like these tips, [subscribe to TreeTide articles](https://treetide.com/subscribe))*

#### Complement solid material with a peek into research.

Your class materials are likely behind state of the art. Look around for survey papers on [Google Scholar](https://scholar.google.com) or [Arxiv.org](https://arxiv.org/).

For the Operating Systems class I would search for "[Operating Systems Survey](https://scholar.google.com/scholar?q=operating+systems+survey)". Even a peek at the results indicates an emerging trend of embedded/IoT OS research, which might be useful insight. It's ok if you don't understand most of a paper, but you will draw inspiration and see contemporary problems.


*(Image credits: Tom Murphy VII / Wikimedia Commons [CC BY-SA 3.0](http://creativecommons.org/licenses/by-sa/3.0/))*
[types and tricks] Customizando um input label required do formik
Tags: react, javascript, formik
Published: 2019-09-09 11:44:10

## Como inserir um asterisco no label de um custom input do formik

Opa, beleza? Bora ver como fazer um custom input massa com direito a um asterisco de required.
![](https://www.rafaelbastiani.com/static/required-label.png)
[InputFormik](https://github.com/Bastiani/churras-trinca-front/blob/master/src/components/Input/InputFormik.tsx)
[Label](https://github.com/Bastiani/churras-trinca-front/blob/master/src/components/Label/Label.tsx)

Vamos ver alguns códigos:

```javascript
const Label = ({ children, labelMsg, labelTop = true, name, formik }: IProps) =>
  labelTop ? (
    <ContentStyled isRequired={formik && isRequiredField(formik, name)}>
      <label htmlFor={name}>
        {labelMsg}
        {children}
      </label>
    </ContentStyled>
  ) : (
    <ContentStyled isRequired={formik && isRequiredField(formik, name)}>
      <LabelStyled label={labelMsg}>{children}</LabelStyled>
    </ContentStyled>
  );
```

`labelTop` define se o `label` vai ficar no topo ou do lado do `input`.
Agora vamos para a mágica, o `isRequired` e o `isRequiredField`:

```javascript
export const ContentStyled = styled.div`${(props: IProps) => props.isRequired &&`label::before {
display: inline-block;
margin-right: 4px;
color: #f5222d;
font-size: 14px;
font-family: SimSun, sans-serif;
line-height: 1;
content: '\*';
}`}`;
```

Como visto no código a cima, temos um styled-component com a props `isRequired` e ali temos então o css que insere
o asterisco do lado do `label`.

```javascript
const isRequiredField = ({ validationSchema }: any, name: string) => {
  try {
    const isRequired = validationSchema.fields[name]
      ? !!validationSchema.fields[name].tests.find(
          (test: any) => test.OPTIONS.name === 'required'
        ).OPTIONS.name
      : false;
    return isRequired;
  } catch (event) {
    return false;
  }
};
```

Então temos a função que identifica se o `field` é required ou não por meio do `validationSchema` do formik.

Nesse `InputFormik` ainda temos uma validação de senha conforme a imagem:
![](https://www.rafaelbastiani.com/static/password-stronge.png)
[strongerlevel](https://github.com/Bastiani/churras-trinca-front/blob/master/src/pages/Signup.tsx#L107)
Building Blocks of Creation
Tags: typescript, gamedev, tutorial, dapps
Published: 2019-09-09 11:27:22

This is the first instalment of a series of video tutorials that will teach you the basics of using the Decentraland SDK.

We're fast approaching September 16th and the kick off of our [Game Jam](https://gamejam.decentraland.org/) – a two-week event where artists and developers will create interactive 3D scenes using the Decentraland SDK and compete for over $250,000 USD of MANA and LAND prizes.


In the lead up to launch, we’re unveiling two key initiatives: 

The first, which we’ll cover in an upcoming post, is a series of offline talks and bootcamps in multiple cities around the world. The second is the SDK Tutorial Series...

### The building blocks of creation

The tutorials in this series cover the basic mechanics of the Decentraland SDK. This includes: 

* How to install the SDK
* How to place and animate objects
* How to manage click events
* How to implement UI
* How to use the new ‘utils’ library, which greatly enhances the development experience

By the end of the series you’ll have the knowledge to complete your very own Escape Room game comprising nine different rooms (which can be found in [this GitHub repo](https://github.com/decentraland-scenes/Escape-Room)), so get ready for a lot of fun!

Even if you’ve never done any game development, you’ll find these videos informative and easy to follow. They can be digested as a series or as independent modules:

### What you’ll be learning

1. [Intro to the Escape Room game and the goals for the tutorial series.](https://www.youtube.com/watch?v=j7XbiTZ9GN0&feature=youtu.be)

2. [Set up your development environment, create a Decentraland scene, and place a 3D model.](https://www.youtube.com/watch?v=_9-74i-1c2k)

3. [Add a 3D model to your scene and set its coordinates.](https://www.youtube.com/watch?v=aonEnpfKIX80)

4. [Play an animation to open the door.](https://www.youtube.com/watch?v=QHgOIh04ukY)

5. [Add a sound effect which plays when the door opens.](https://www.youtube.com/watch?v=l7NdwToC5tg)

6. [Move code for each room into its own file.](https://www.youtube.com/watch?v=ihvRnrNusas)

### Come out like a builder. Make out like a bandit

At the conclusion of our Decentraland SDK Tutorial Series, you’ll also have everything you need to come out of the Game Jam with a qualified 3D scene which, should you submit it, could make you the recipient of 1,000 MANA, as well as LAND and prizes ranging from 25,000 to 350,000 MANA for the top 20 winners.

But you gotta be in it to win it, so [sign up](https://gamejam.decentraland.org/), scroll up and start watching. Plus make sure you stay tuned to our Decentraland SDK Tutorial Series.

See you in the Metaverse!
Node JS Help
Tags: help, node, api
Published: 2019-09-09 11:23:09

---
title: Node JS Help
published: true
tags: help, nodejs, api
---

I'm working on a portfolio template that uses a local JSON file that has an object with the name, links and email address, to load data and manipulate the DOM accordingly.

The issue I have is that, it only runs on the server and not on the client side. I'm using the Fetch API and I discovered that it does not allow loading of JSON locally without a server for security reasons. I know I can use Node to run a server, pass the data to client side JS and manipulate the DOM. But the problem is that I want the eventual site to be static and the changes to be persistent, which they are not.

Is there a way to run the server script to simply pass the JSON to client side and then shut it down and have the changes stay permanent? Or am I using the wrong tool to do this?
Preparation For The HR Round Interview.
Tags: interview
Published: 2019-09-09 11:07:00

First impressions really do count and they are remembered for a long time. Arrive late and you’ve made one of the worst impressions possible! Indeed, regardless of what you say or do during the interview, you may never recover from this initial mistake. Employers wonder, “Will you also come to work late?”

You can visit [GoApti](https://goapti.in) For the very clear and definitive guide for the interview preparations.
How do you recruit for user tests?
Tags: discuss, testing, usertest, startup
Published: 2019-09-09 10:22:50

I feel I got lost in the maze of Google searches filled with advertisers and self marketing articles. Seems quite hard to find authentic information about user testing.

Where do you guys usually recruit subjects for user tests?

I'd like to test my service on 3-5 software developers with a few years of experience. I believe my needs aren't that extraordinary.

Do you guys offer money or a subscription to your service in return?

Thanks for the help. I'm a little clueless here.
Dev Pill - a new drug for news addicts
Tags: javascript, webdev, design
Published: 2019-09-09 09:42:03

Dev Pill 

Active Ingredients: 
Technology/Web Development/Coding/jQuery/Angular/React/Vue

For Informational use only. 

This newsletter relieves symptoms like information hunger and lack of knowledge on the latest trends. 

Take once a week.

Long Term usage may cause web dev news addiction ;)
https://mdbootstrap.com/dev-pill/
How to use LinkedIn for Recruitment Effectively | iSmartRecruit
Tags: recruitment, recruitmentsoftware, ats, applicanttrackingsoftware
Published: 2019-09-09 09:41:23

LinkedIn is nowadays considered as a professional social media. The professional word differs from LinkedIn from other social media platforms. As the Human Resource Industry is booming with new technology, recruiters find it far better to choose the best candidate from social media. LinkedIn is on the top because it is a hub for recruiters finding new candidates and a great market for the candidates also to put their skills in front of the world and get the best job.

Let’s see how LinkedIn can help you in making your recruitment effective.

<b>Brand</b>

By using LinkedIn as a recruitment platform, you can create your company brand. Usually, job seekers used to check the recruiters’ profiles if they have any roles right fit for them. And Visa Versa, recruiters used to check candidates’ profiles if they can utilize any candidate from their connections.

<b>Job Posting</b>

Earlier, Job postings referred to as a job ad on the job boards. But this is 2k19 and people turned to use the social media platforms as mini job portals. LinkedIn is the best place to post your job ads on. So you can get more relevant - more professional candidates.


<b>Easy Apply</b>

The best feature of LinkedIn is Easy Apply. This easy apply helps recruiters to save their cost of hiring and the overall time to hire. This also reduces the iteration rates and email trails. So your candidates can quickly apply with their own LinkedIn profile and that’s it!

<b>Open Jar for Recruiters</b>

As LinkedIn is a social media, it can work as a mirror of a candidate’s mind. You can check the candidates' activities, their educational background, and their experience. You can also have a brief about the candidate’s mentality from the content he is putting on the wall. And It also saves the cost of background check services

So these were some of the best ways to make recruitment done by using LinkedIn. You can even use <a href="http://www.ismartrecruit.com/?utm_source=dev&utm_medium=article-sub">recruitment software</a> that offers the chrome extensions that can fetch the profiles from LinkedIn directly.

<b>About iSmartRecruit</b>
We provide a recruitment tool that helps recruiters and corporate HRs to easily manage and transform their way of recruitment. We are the global players serving in 25+ countries, we frequently upgrade our tool as per the market needs and always appreciate our clients, prospects suggestions and we try our best to implement it. For more information visit: www.ismartrecruit.com or mail us at sales@ismartrecruit.com we are here to help you.
Exploring Machine Learning possibilities in WASM
Tags: rust, webassembly, machinelearning
Published: 2019-09-09 09:25:33

#### This post is a short summary of our recent experiment with WASM & ML.

The goal was to run a simple ML model in WASM and then maybe benchmark it against existing JavaScript ML libraries. Our Machine Learning team provided a basic grayscale filter model in three formats: CoreML, Tensorflow and PyTorch. 

We tried PyTorch first as it looked very promising. We found good bindings for Rust - https://github.com/LaurentMazare/tch-rs - that seemed to be very easy to use. But after some tinkering it turned out that it’s not possible to export the whole model from PyTorch in a form that can be easily imported in Rust. We’d basically have to implement the model from scratch before loading the data the ML team provided. That was a bit too much for our experiment so we moved on.

Next we looked at CoreML, but quickly found that there were virtually no libraries for Rust or anything else that we could compile to WASM. I'm not sure if that’s due to CoreML being made by Apple (and thus being proprietary) or the community isn’t as big and there is no interest in libraries for other languages. If it's the second case than maybe it’s worth taking a look at it in the future.

Our last chance was Tensorflow and it started out great. Even though it doesn’t have first-class support for WebAssembly (it's a work in progress: https://github.com/tensorflow/tfjs/issues/1497), it **does** have official support for Rust - https://github.com/tensorflow/rust. 
We were able to quickly prototype a simple app that loaded the Tensorflow model in a *.pb format, pass it an image as a tensor and finally save the output from the neural network to the file system. It worked really well, so we tried to port it to WebAssembly. For Rust it’s really easy thanks to `wasm-pack` (https://github.com/rustwasm/wasm-pack).
Unfortunatelly that’s when we hit a major blocker. Turns out that Tensorflow depends on a library called “aligned_alloc” which wouldn’t compile to WebAssembly, most likely due to some system-dependent functionality that could not be ported to the browser.

My conclusion for now is that porting big libraries to WASM can be, more often than not, tricky. The differences in memory allocation create conflicts in low-level code and some libraries simply won’t compile. Another solution would be to write a neural network from scratch, using only basic libraries and language-level constructs. This approach was explored e.g. in https://ngoldbaum.github.io/posts/python-vs-rust-nn. It would most likely compile without issues, but require more time to develop.
How do i use js file function in componentDidMount????
Tags: react
Published: 2019-09-09 09:21:38

Hello there.
I have a problem. I have some functions in a js file and i wanna use it in my react js project. I referenced it in the head but when i call a of the function in the js file in componentDidMount it shows "'InitInput' is not defined no-undef"
Does anyone has a solution for my problem???
Thx


Input.jsx

```
class Input extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();

  }
  componentDidMount() {($(this.myRef ))
  }
}
```

initInput.js

```
function InitInput(form){

alert()

}
```

Index.html

```
<html lang="en">
  <head>
 <script src="/jQuery/jquery-3.4.1.min.js" ></script>
    <script  src="/jQuery/initInput.js" ></script>
</head>
...
</html>
```
Question: How to effectively outsource dev
Tags: php, contracting, outsourcing
Published: 2019-09-09 08:28:21

Hi All,

We have a 19-year-old software company we have grown organically. Our biggest challenge to additional growth has been sourcing local dev resources.

We tried outsourcing to India a few years ago and it didn't work very well for three main reasons: there was a communication gap, and because our legacy/non-standard/non-framework code is difficult to inderstand and code, and passing along an understanding of our target market needs is difficult.

I read a lot about distributed teams and am considering trying remote resources again. We do have a remote contractor now who is very good and effective but he was the lead programmer (in-house) for many years and the architect of much of the system so that is a huge advantage.

Any thoughts on how to go about this?
Success and failure stories and learnings?
Advice and recommendations?

Thanks.
Cheers,

Richard