teleren/devto huggingface dataset:
Strange lag in my React Component - state seems to accumulate old state -sandbox provided.
Tags: react, javascript, state
Published: 2019-02-20 09:59:22

---
title: Strange lag in my React Component - state seems to accumulate old state -sandbox provided.
published: true
description: about  a strange state lag in ReactJS where my componentState accumulate old state and renders it in a messed way.
tags: reactjs, javascript, js, state

---

*I have put a console.log in the render() function to help visualize the state.*

**Here my sandbox:** https://codesandbox.io/s/77ymmnpr1


**What I'm doing:**

In my code I'm creating three labels that are expandable, then I put some labelComponent to overlaying them. The overlay got a button to come back on the menu. The problem is that when I then expand an another labelComponent, there is a slight lag with the old state then the new state displayed. Hence the console.log I'm providing to you.


That put something like following in the console:


    PATHNAME: newState

    PATHNAME: oldState

    PATHNAME: newState

    PATHNAME: oldState


**edit:** other possible weird behavior is my component to display the old state on an incremental lagging. Seems then that the state accumulate old state then display it in a kind of messed order, or kind of thing like that.

In which case my console returns on second rendering:


    stateOne

    current state

then, on third rendering:

    stateOne

    stateTwo

    currentState

on fourth rendering:

    stateOne

    stateTwo

    stateThree

    currentState

etc. the firsts state are the olds state then come the currentState

What that mean? I call this.setState() only to put in it the new state, so why it come back to the old state?

Any hint would be great,

thanks
LambdaTest Chrome Extension For Automated Screenshots
Tags: testing, devtips, webdev, showdev
Published: 2019-02-20 09:07:55

---
title: LambdaTest Chrome Extension For Automated Screenshots
published: true
description: LambdaTest Chrome Extension for automated screenshots can be used to take full page screenshots of web pages and websites directly from your chrome browser.
tags: #testing #devtips #webdev #showdev
---

LambdaTest Chrome Extension for automated screenshots can be used to take full page screenshots of web pages and websites directly from your chrome browser. These screenshots will help in fast-tracking cross-browser compatibility testing of the web pages and websites.

Visit our official website: https://www.lambdatest.com/

Here is link for LambdaTest Chrome Extension:
https://chrome.google.com/webstore/detail/lambdatest-screenshots/fjcjehbiabkhkdbpkenkhaahhopildlh

Sign Up for free now and get
+ 100 Minutes of Free Automated Cross Browser Testing With Selenium Grid.
+ Access to 2000+ different cloud browsers
+ 60 Minutes of Free Live Interactive testing per month
+ 10 Responsive Testing (Test a page across 42 devices with a single click)
+ 10 Screenshot Testing (Take instant screenshots across 2000+ browsers)
+ Smart Testing
+ Auto Shot Testing
+ 3rd Party Integrations.

Boost your team's overall productivity with One Click Bug Logging facilitated by Integrations provided in our web-app supporting the below mentioned platforms for easy bug tracking:
1. [Asana](https://goo.gl/6MN2JH)
2. [Jira](https://goo.gl/PbmmFy)
3. [Bitbucket](https://goo.gl/CjndFf)
4. [Trello](https://goo.gl/y6S5Ly)
5. [Github](https://goo.gl/dtUYZH)
6. [Gitlab](https://goo.gl/VKubkB)
7. [Slack](https://goo.gl/AbWiDf)
8. [VSTS](https://goo.gl/aKcGa3)
9. [Hive](https://goo.gl/SqBjZD)
10. [Paymo](https://goo.gl/XrvhH2)
11. [TeamWork](https://goo.gl/TsABpA)
12. [Mantis](https://goo.gl/aw1Ls5)
13. [Bugherd](https://goo.gl/vWkHon)


Follow our video playlist to know how to perform Integrations With LambdaTest By One Click Bug Logging:
https://www.youtube.com/channel/UCCymWVaTozpEng_ep0mdUyw/playlists

You can simply take screenshots directly from the Chrome Extension, be it pages, posts, or while editing a post. You can take direct screenshots on up to 25 different browser and operating system configuration at a time by clicking on LambdaTest’s icon and selecting the configuration using LambdaTest.

Learn more about LambdaTest Chrome Extension here:
https://www.lambdatest.com/chrome-extension
Create a minimal React app in less than a minute with Parcel
Tags: react, parcel, webdev, typescript
Published: 2019-02-20 08:43:41

---
title: Create a minimal React app in less than a minute with Parcel
published: true
description: 
tags: react, parcel, webdev, typescript
---

The simplest way to get started with React is to use `create-react-app` (CRA), but that is often overkill. In this post I'll take you from zero to React app in less than a minute, without CRA and without loads of dependencies. I'll throw in TypeScript too for good measure.

The main benefit of CRA is that it saves you from having to set up the Webpack and Babel toolchain. [Parcel](https://parceljs.org/) is a great replacement for Webpack that really is zero-config, and can get you up and running in seconds.

First, create your directory and initialise Yarn. Could could also use NPM if you prefer.

```sh
➜ mkdir parceldemo
➜ cd parceldemo
➜ yarn init -y
```
Now install parcel:
```sh
➜ yarn add -D parcel-bundler
```

That's your toolchain installed! You could also install parcel globally, or use npx, but I prefer to install it as a devDependency.

Now create the React app:

```html
<html>
<title>Hello React</title>
<body>
<div id="root"></div>
<script src="index.tsx"></script>
</body>
</html>
```
You can of course use JavaScript instead if you prefer. Just call it index.js instead.
```typescript

import * as React from "react";
import { render } from "react-dom";

const App:React.SFC = () => <h1>Hello world</h1>;

render(<App />, document.getElementById("root"));

if (module.hot) {
  module.hot.accept();
}

```

Now run Parcel:

```sh
➜ yarn parcel index.html
```

That's it! Parcel will install React and ReactDOM as dependencies automatically, as well as TypeScript if you're using it. Hot module reloading will work too.
Developer Computer setup
Tags: setup, workstation, coder, codersetup
Published: 2019-02-20 07:55:46

---
title: Developer Computer setup
published: true
description: Setup from you developer workstation
tags: setup, workstation, coder, coder setup
---

Hey guys, 

I will choose my setup in the next time. Which setup did you use to write code? Which keyboard, mouse and monitors? 

This could be interested to something else. 

My Setup is: 

Acer 27" Monitor 
iMac Retina 4K 2017
Macbook Pro 13" 2017 
Keyboard: Apple with numblock
Mouse: Magic Mouse 2
Load Pages Instantly with instant.page
Tags: githunt, performance
Published: 2019-02-20 03:59:13

---
title: Load Pages Instantly with instant.page
published: true
description: Make your site’s pages instant in 1 minute and improve your conversion rate by 1%
cover_image: https://thepracticaldev.s3.amazonaws.com/i/krjdmt6lprsvgr6jj58c.png
tags: githunt, performance
---
I found a cool tool for improving the performance of your websites. [Instant.page](https://instant.page/) makes your site’s pages instant in 1 minute and improve your conversion rate by 1%.

All you need to do is add this script just before the `<body>` tag.

```js
<script src="//instant.page/1.1.0" type="module" integrity="sha384-EwBObn5QAxP8f09iemwAJljc+sU+eUXeL9vSBw1eNmVarwhKk2F9vBEpaN9rsrtp"></script>
```

Thanks to [Alexandre Dieulot](https://twitter.com/dieulot) for creating such a useful tool! You can find the GitHub Repo here:

{% github https://github.com/instantpage/instant.page %}
Ruby: Different types of iterators
Published: 2019-02-20 07:00:38

---
title: Ruby: Different types of iterators
published: true
description: Use examples to demonstrate the use of each iterators offered by Ruby 
tags: 
---
<img src="https://thepracticaldev.s3.amazonaws.com/i/72253wjkqfsk5nt2mkt0.png">
<h1><bold>Overview</h1>
<p>When we have a collection of data (an array for example), we can use iterators to operate each member of that collection and get the return value(s) we want. Let's take a look at some commonly used iterators in Ruby and their return values.</p>

<h3><bold>.each</h3>
<p>The .each iterator returns the original data structure that it operated on, despite the fact that we modified values in the block. However, we could have another variable to hold the changes inside the block.</p>
{% replit @YongLiang/EqualScornfulMicroinstruction %}

<h3><bold>.map or .collect </h3>
<p>The way .map or .collect iterates is similar to .each, but will return the new/modified data structure instead of the original one.</p>
{% replit @YongLiang/ExperiencedTruthfulDisassembly %}

<h3><bold>.select</h3>
<p>With the .select iterator, we set a condition inside the block and it returns a new data structure with values that are true to that condition. It filters out the one that are false.</p>
{% replit @YongLiang/CalculatingMurkyRuby %}

<h3><bold>.find</h3>
<p>The .find works similar to .select, however, it return the value as soon as the condition is met/true.</p>
{% replit @YongLiang/MistyDelightfulModule %}
Predicting Divorces Pronounced In Mauritius Using Linear Regression (ML)
Tags: machinelearning, python, mauritius
Published: 2019-02-20 05:43:27

---
title: Predicting Divorces Pronounced In Mauritius Using Linear Regression (ML)
published: true
description: where python helps
tags: machinelearning, python, mauritius
cover_image: https://images.unsplash.com/photo-1537640685236-a9df2496e232?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80
---

here is a post about linear regression, the first step of machine learning. we'll be using python to predict divorce cases for mauritius, my country

## What Is Linear Regression

regression just means prediction. 

read more on those two dev.to articles
- [part1 by Apoorva Dave](https://dev.to/apoorvadave/beginning-with-machine-learning---part-1-pbl)
- [part2 by Apoorva Dave](https://dev.to/apoorvadave/regression-in-machine-learning---part-2-30bb)

## Our Data

we'll be downloading our csv from [here](https://data.govmu.org/dkan/?q=dataset/divorce-cases-island-mauritius-republic-mauritius) . the first one. i renamed it divorce.csv

## Opening Up Jupyter

let us import our libs

```python
import pandas as pd
import matplotlib.pyplot as plt
from sklearn import linear_model
# psst inspect sklearn to see what other models there are
```
let's have a look at our data

```python
df = pd.read_csv('<path-to-file>/divorce.csv')
df
```
gives us

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/0mtuu3jmpx7nai4tveln.png)

we'll be predicting the column _Number of cases disposed of which Divorce pronounced_

but let us have a look at our data

```python
plt.scatter(df['Year'], df['Number of cases disposed of which Divorce pronounced'])
```
we get

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/wy82q175t9kz6amknkeg.png)

let us train our model
```python
reg = linear_model.LinearRegression()
reg.fit(df[['Year']], df['Number of cases disposed of which Divorce pronounced'])
```
and predict for the year 2017

```python
reg.predict([[2017]])# it was 1,921
```
we get
```
array([ 2140.22222222])
```
## Getting m And c

since linear regression is just a straight line (really that whole machine learning world is just some maths), we can get the coefficient (our m) and the intercept (our c)

coefficient is given by
```python
reg.coef_
```
outputs
```
array([ 57.79118774])
```
and intercept by
```python
reg.intercept_
```
outputs
```
-114424.60344827584
```

## Building Our Own Predictor Function

we can now build a simple function to predict without passing by ml

```python
def devdotto_predict(year_):
    # m * x + c
    return 57.79118774 * year_ + -114424.60344827584
```
and use it

```python
devdotto_predict(2017)
```
we get

```
2140.222223304154
```
compare above

## Conclusion

machine learning is super easy if you understand the concept!

cover img credit : Photo by Xavier Coiffic On Unsplash
real pic of mauritius
SSTNPL v0.3: Modules & command prompts.
Tags: sstnpl, showdev, sbtcvm
Published: 2019-02-20 05:35:23

---
title: SSTNPL v0.3: Modules & command prompts.
published: true
description: An overview on SSTNPL latest features, and how they help the development of SBTCVM, a balanced ternary virtual machine.
tags: sstnpl,showdev,sbtcvm
---

# Overview:
Some of you may have seen my tutorials on SSTNPL in the past, but considering how much has been added since then, i figure id post about some of its latest features.

[This post will refrence this SSTNPL source file](https://github.com/SBTCVM/SBTCVM-Gen2-9/blob/master/demos/shelldemo/auto_main.stnp)

### simple, yet endlessly helpful.

One of the first things you might notice if you scroll down past the comments, is the code indenting. similar to languages like C, it means nothing, but is there to help make code more readable.

### command prompts ahoy!

The linked SSTNPL soruce code actually creates basic Command line shell. now, part of this involves the new module system, and a module called comprompt. but all the latter does is take user input and pass it into an SSTNPL table (2D array, note that SSTNPL has no normal 1D arrays).

	gsub cp.getentry

The actual syntax checking is done via the tabstrc operations [that start at line 57](https://github.com/SBTCVM/SBTCVM-Gen2-9/blob/master/demos/shelldemo/auto_main.stnp#L57). all it does is checks if the given string is at the given location, in the given table. notice the table name starts with `cp.`.

	tabstrc cp.buffer,@0,@0,help
		set cmdflg
		if cmdflg,@1 =validcom @1
		if cmdflg,@1 gsub help

### module system.

if you scroll to the end of the file, you will see a command that looks like such:

```
include comprompt as cp

```
A Brave* adventure and a bird that sounds out of context.
Tags: twitter, brave
Published: 2019-02-20 05:15:45

---
title: A Brave* adventure and a bird that sounds out of context.
published: true
description: Why would a bank say they can't handle wads of cash, because they couldn't identify you? Confusing, right? Sort of what Twitter does.
tags: twitter, brave
---

Why would a bank say they can't handle wads of cash, because they couldn't identify you? Confusing, right? Hey! Twitter, do listen.

Earlier today, had an interesting situation while uploading a screenshot to Twitter mobile. A repetitive concern this, has opened up a channel to read up on fingerprinting and security. Read on, for what went wrong where is a funny lapse.

The last few times I had tried uploading on Twitter mobile, things failed with a large image size message. And, some actually were large indeed at 12MB odd a piece, for the profile images. For some context, each of them were using the Brave web browser which has become my default these days. Speaking of default, you should migrate too; impeccable choice.

Cutting to the chase, I didn't do what any researcher of situations would do; try another browser or image. Downloading a browser for this test and signing in were pains in increasing order, I'll be honest. So what should have ended up with clarity long back, took until a while back, when a 50kb odd screenshot would fail.

Now that raises a brow or two even for the lazy bone like me, does it not? How could an image of about 50kb be large for resizing? To quote Twitter, "One or more images exceed the size limit and cannot be resized". Rather odd a message for Twitter to respond with there.

This time around, tried something else without another browser to test things. Turned off all the safety toggles in Brave and voila! the upload went through fine. Next, turned on everything except the fingerprinting protection and things worked fine too. Once that gets turned on, things fail again.

It is beyond me why Twitter would say the image is the concern when the underlying issue is elsewhere. Possible that this is an extreme of extreme situations when it comes to handling errors on a service. But, that doesn't quite warrant showing an unrelated error message to confuse the user.

On that note, digging into Brave's source to see what exactly happens under the hood. And things are interesting to say the least. If you'd like to read up a bit more on what fingerprinting protection is, [this one](https://github.com/brave/browser-laptop/wiki/Fingerprinting-Protection-Mode) from Brave browser is a good place.
Shift Teams, Not Testers
Tags: testing
Published: 2019-02-25 19:18:27

---
title: Shift Teams, Not Testers
published: true
tags: testing
canonical_url: 
---

I’ve written about the [many hats](https://techbeacon.com/app-dev-testing/3-hats-qa-engineers-how-wear-them-well) that testers wear, and the importance of [collaboration](https://www.testcraft.io/building-relationship-developers-qa) between testers and engineers. My thinking in those articles focused mainly on the work that testers put into their teams, but lately I’ve been considering the other side - the effort that teams and companies put into their QA engineers and testers.

The “shift left” narrative is popular, and I think the underlying concept is important. But rather than focusing on testers shifting left, what happens if we refocus to teams and companies shifting their mindset and their process?

I’ve been on teams that understood and appreciated my involvement early on, and enthusiastically brought me into discoveries, architecture planning, client meetings and demos. I’ve been with companies who understood the benefit of the “extra” work I did beyond feature testing and release management, but didn’t appreciate it and didn’t offer the support I needed to work without burning out. I’ve been on teams who sequestered my role as “review and release”, and pushed back when I tried to do documentation, process improvements, or feature initiatives.

It’s not really about encouraging testers to get involved earlier in the SDLC. Most of the testers I know already want this, and understand the importance of it. We know that we bring skills and insights that will benefit the product and the team when we’re included from the beginning. Being involved earlier also benefits us as testers, because it gives us a better base of knowledge about the thing we’re testing, and we’re better equipped to understand and mitigate the risks.

When I’ve been part of a team or organization with a limited definition of the QA role, I’ve found that having a sponsor or advocate really makes a difference. When I’m trying to shift people’s mindset and expectations, it helps to have someone who supports the idea that testers on teams are _part of the team_, and need to be included as such. It helps if your advocate is a team lead or senior engineer, because their implicit leadership role gives credibility to their opinion. An advocate can call out the “glue work” and help make it visible to the rest of the team. They can explain from their engineering perspective why it’s useful to have someone with a testing mindset in planning meetings. They can support quality process suggestions, and give you feedback on how to roll it out.

I’m curious to hear how other testers have tackled this - how did you get buy-in from your team about shifting their expectations of your role? Did you tag someone to be an advocate, or did you find another way?
.Net to Go
Tags: dotnet, go, discuss
Published: 2019-02-20 05:11:30

---
title: .Net to Go
published: true
description: Learning Go is good for .Net developer  
tags: #dotNet #C# #Go #discuss
---
Willing to learn Go for a developer, who is working in .net technologies without knowledge of any scripting languages like Javascript,angular, type script.
Is that good idea?
R Language : Connect to SQLite database
Tags: rdatascience, datascience, rlanguage, tutorial
Published: 2019-02-14 04:03:35

---
title: R Language : Connect to SQLite database
published: true
description: R language Connect to SQLite database
tags: #rdatascience #datascience #rlanguage #tutorial
---

When you are developing scripts for R. You may get into scenarios where you have to access different type of databases. 

SQLite being file level database, not a lot of people use it for big data storage or analysis specific storage. Then again there are some scenarios where you may get to access this database. 

For example Android based apps and the services make use of the Sqlite more these days. And you may have to clean and read such data. 

So here I want to show you how to connect to SQLite database using R programming language. 

You can check out [R language Connect to SQLite database](https://www.youtube.com/watch?v=ILO1Y8CSie8) tutorial for video instructions. 

{% youtube ILO1Y8CSie8 %}

Here's the code example that you can check out. I am assuming that you are using RStudio for executing the code below. 

```
library(RSQLite)

setwd("/sqlitedatafolder")
sqlite <- dbDriver("SQLite")
conn <- dbConnect(sqlite,"rlang_db.sqlite3")
```
This example basically connects you with the database. From here onwards you can run further queries and process the data and visualize depending on your requirement.
returning to writing
Tags: discuss
Published: 2019-02-20 05:08:59

---
title: returning to writing
published: true
description: a quick update.
tags: discuss
---

I am using this post to make a few announcements. First I want to tell everyone I am going to return to writing on here on a regular basis. I will be doing one post a week minimum, and more if inspiration strikes. Every post will be on my own personal blog an entire week early, so if urgency is your thing head over to [lvrbrtsn](https://lvrbrtsn.com) and join my newsletter. That way you will be notified as soon as my next post “Betting my career on JAMstack” goes live. There will be lots in there about what I have been working on lately and my plans for the future. With that being said I would also like to mention two projects I am working on https://JAMstack.courses and https://JAMstack.consulting. You will hear more about those in the next post!