teleren/devto huggingface dataset:
Sentiment Analysis on Long Sequences
Tags: python, machinelearning, deeplearning, datascience
Published: 2021-03-27 11:04:19

{% medium https://towardsdatascience.com/how-to-apply-transformers-to-any-length-of-text-a5601410af7f %}

The de-facto standard in many natural language processing (NLP) tasks nowadays is to use a transformer. Text generation? Transformer. Question-and-answering? Transformer. Language classification? Transformer!

However, one of the problems with many of these models (a problem that is not just restricted to transformer models) is that we cannot process long pieces of text.

Almost every article I write on Medium contains 1000+ words, which, when tokenized for a transformer model like BERT, will produce 1000+ tokens. BERT (and many other transformer models) will consume 512 tokens max — truncating anything beyond this length.

Although I think you may struggle to find value in processing my Medium articles, the same applies to many useful data sources — like news articles or Reddit posts.

We will take a look at how we can work around this limitation. In this article, we will find the sentiment for long posts from the /r/investing subreddit. This article will cover:

* High-Level Approach
* Getting Started
  * Data
  * Initialization
* Tokenization
* Preparing The Chunks
  * Split
  * CLS and SEP
  * Padding
  * Reshaping For BERT
* Making Predictions
How to detect Caps lock in JavaScript
Published: 2021-03-27 10:57:30

To check the caps lock status, you use the `getModifierState()` method of the `KeyboardEvent` object:

The `getModifierState()` method returns boolean. If modifier is active it returns `true` otherwise `false`

Here is a sample example of `getModifierState()` for password inputs where you can check the status of caps lock and return appropriate alert.

```
const password = document.querySelector("input[name=password]")

password.addEventListener('keyup', (event) => {
    if (event.getModifierState('CapsLock')) {
        alert('CapsLock is on')
    }
})
```
How to add blogs to react website?
Tags: webdev, help, discuss, react
Published: 2021-03-27 09:57:41

Hello everyone. My friend recently asked me if I can develop a website for her. She is a doctor. So she wanted a website with her details, qualification, contact info, etc. I have built this website using react and hosted it on netlify.

She has requested me to add blogging functionality to this site. I don't know much about adding blogs to react.

Do you guys know how can I add blogging to her website? Is there any external API or npm package I can use to add blogging support. My goal here is to add blogging with minimal effort and not build a blogging platform from scratch. Any help would be appreciated.
2021-03-25 | Being in public like a pro
Tags: learninpublic, beginners, webdev, career
Published: 2021-03-27 09:22:24

---
title: "2021-03-25 | Being in public like a pro"
description: "Summary of my day"
published: true
tags: ["LearnInPublic", "Beginners", "Webdev", "Career"]
series: "miku86 Diary"
canonical_url: "https://miku86.com/blog/2021-03-25"
---

[Yesterday](https://miku86.com/blog/2021-03-24/) I published my first daily post again.

This feels like a commitment to do this in public.
I've always kept up the habit of writing, but I didn't publish it.

Maybe some fear of being not interesting enough while people on Instagram or TikTok do all this fancy stuff. But this is probably not reality and I very rarely check these platforms.

To get news, I use [Friendica](https://en.wikipedia.org/wiki/Friendica), where I subscribe to accounts on YouTube, Twitter, RSS Feeds, Mastodon etc.

If I want to write on Twitter, I use [Tweetdeck](https://tweetdeck.twitter.com/), so I never see trends or other outraging stuff. I try to use it like a professional.

How do you handle social media?
Mock and Stub
Tags: mock, stub, testing, testdouble
Published: 2021-03-27 08:54:25

####Intro

최근에 현재 일하는 회사의 admin 프로젝트에 testing library를 통해 테스트 환경을 구현하기 위해서 노력 중이다.

컴포넌트 테스트 코드를 작성할 때, api의 호출에 대한 의존성이 걸린 부분이 많았다. 따라서 테스트 코드를 원활하게 작성하기 위해서 이런 부분을 해결하기 위해서 Test Double이란 방법을 사용해야 했다. 

따라서 이에 대해 한번 정리를 해봐야 할 필요성이 느껴져서 블로그 글을 작성하게 됐다.

테스트의 방법론에 대해서 공부를 해 본 사람이라면 Test Double이라는 용어에 대해서 분명 들어봤을 것이다. 

나 같은 경우는 한 회사에서 면접을 봤을 때, 면접관이 Test Double의 Mock과 Stub에 대해서 질문을 했기 때문에 그때 이 용어를 처음 들어봤었다. 물론 그때 당시에는 대답하지 못했었다.

####Test Double이란

Test Double이란 용어는 할리우드의 `Stunt Double` 에서 유래가 생겼다. 할리우드에서 액션 영화를 찍을 때 영화배우들은 위험한 장면들을 촬영해야 하는 경우가 많다. 만약 실제 배우들이 다치게 되면 영화를 찍을 수가 없기 때문에, 다른 사람들이 이런 위험한 상황을 대신 찍어야 했는데 이를 대신해서 촬영하는 스턴트 배우들을 'double'이라고 한다.

Test Double의 역할도 Stunt Double과 별반 다르지 않다. 먼저 `xUnit Test Patterns`의 저자인 Gerard Meszaros가 정의한 테스트 더블을 살펴보자.

>When we are writing a test in which we cannot (or chose not to) use a real depended-on component (DOC), we can replace it with a Test Double.

쉽게 풀이를 해보자면, 우리가 테스트 코드를 작성할 때 해당 테스트 코드에서 의존성 문제를 해결할 수 없거나, 해결할 수 있지만 사용하길 원하지 않는 경우, 우리는 이런 의존성을 테스트 더블을 통해서 대체할 수가 있다. 테스트 더블은 테스팅용 목적으로 실제 의존성을 대체하는 것을 말한다.

물론 이런 의존성이 항상 문제가 되는 것은 아니다. 하지만 이런 의존성 들이 side effect(ex: API 요청, 데이터베이스 접근, 상태 값 변경등)를 가지고 있다면  테스트를 어렵게 만드는 요소가 된다.

테스트 더블은 이런 의존성 때문에 테스트를 진행하기 어렵거나, 테스트를 진행했을 때의 기회비용이 큰 경우(테스트 안에서 특정 라이브러리를 실제로 실행을 하는 경우 작업이 너무 무거워서 시간이 오 래걸리는 경우), 이를 대신해서 테스트를 쉽게 할 수 있도록 사용할 수 있는 객체를 말한다.

테스트 더블에서 가장 많이 언급되는`Stub`과 `Mock`에 대해서 최대한 쉽게 설명을 해보겠다.
 
####Stub

`stub`이란 미리 정해진 상세한 데이터값을 가진 있는 객체이고 테스트를 수행할 때 의존성 대체를 해서 나올 결과값을 대체할 때 사용한다. 

결과값을 살펴보면서 해당 테스트가 올바르게 작동됐는지 안됐는지 살펴보기 때문에 상태 검증이다. 

예를 들면, 특정 api 호출이 제대로 작동됐는지에 대해서 살펴볼 때, 해당 함수가 몇 번이나 실행되는지 또는 어떤 인자와 함께 실행됐는지에 대해서 보단, 반환하는 결과값에 대한 검증만 한다.  

####Mcok
  
`mock`은 상호작용에 관한 것이다. mock을 사용할 때는 상태검증에 대해선 전혀 걱정하지 않는다. 대신 mock 객체가 얼마나 테스트 코드와 상호작용했는가에 집중한다. 

예를 들면 특정 함수가 몇 번이나 실행됐는가, 또는 여러 개의 함수들이 일정한 순서대로 동작이 됐는가, 어떤 인자와 함께 실행됐는가를 살펴보는 데 집중한다.
Optimize performance React app with Brunch
Published: 2021-03-27 08:45:09

I work on a react app that has a page with complex and heavy Dom.
When the application rendere this page it's very slow.
Is it possibile to build a react app written in 16.11 with terser-brunch ? or is it necessary to upgrade react app to versione 17.02 ?
I've installed terser-brunch but I don't know how to build react release with brunch. brunch command is not recognized.
Can someone suggest me how to build with brunch ?

Is brunch available with react version 16.11 ?
is there someone that know brunch and know if this tools optimizes react performance for a complex dom ?
Database for open source?
Tags: javascript, typescript, database, opensource
Published: 2021-03-27 08:29:17

Hey I’m starting to work on a private project right now and since I don’t know a lot about databases I wanted to ask for some help/ideas/suggestions.

Here are my requirements:
- not self-hosted
- preferably free for open source (if non existent then free to a certain amount of data)
- scaleable as the data will probably grow quickly.
- searchable (I know all are but some are faster at it I heared)
- support for sequelize (or if anyone has better alternatives for that feel free to share them 👍)

Thanks in advance
Custom Properties, never again without you
Tags: webdev, css, tutorial, codequality
Published: 2021-03-27 08:24:14

---
title: Custom Properties, never again without you
published: true
tags: webdev, css, tutorial, codequality
cover_image: https://images.unsplash.com/photo-1546443046-ed1ce6ffd1ab?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80
---

{% codepen https://codepen.io/tamer_aka_remat/pen/vYyjLov %}

> Custom properties are one of the most important frontend development innovations in last years, definitely.

**Custom properties** are **CSS Variables** that are assigned to the `properties` and that can dynamically change the value!
The benefits are tangible during development, let's analyze simple examples to highlight the benefits.

## CSS, Traditional way
In this portion of the code, with the traditional CSS we must explicitly declare the initial value of the `property` and that of the status changes.

```
.block {
  background-color: red;
}

.block:hover {
  background-color: blue;
}
```
## SCSS Variables

With the pre-processors, in the example that follows SCSS, it is possible to be more ordered: by storing the value of a `property` in a variable this can be recalled from multiple blocks, however the value of the variable cannot be changed.

```
$background: red;
$background-modifier: yellow;
$background-hover: blue;

.block {
  background-color: $background;

  &:hover {
    background-color: $background-hover;
  }

  &--modifier {
    background-color: $background-modifier;
  }
}

```
## SCSS, CSS Var 

Everything changes with CSS variables, as w3c explains:

> CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries.

```
:root {
  --background: red;
}

.block {
  background-color: var(--background);
  
  &:hover {
    --background: blue;
  }

  &--modifier {
    --background: yellow;
    
    &:hover {
      --background: purple;
    } 
  }
}
```

The previous example highlights all the potential and order that the CSS vars guarantee.
Let's assume we have to adapt the whole website for dark mode too ... nothing simpler:

```
:root {
  --background: red;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: grey;
  }
}

.block {
  background-color: var(--background);

  &:hover {
    --background: blue;
  }

  &--modifier {
    --background: yellow;

    &:hover {
      --background: purple;
    } 
  }
}
```
###Tips:
Consider _local_ or _global_ vars scope, think about what it is better to declare _global_ and therefore have it available throughout the project and what to declare within a block as _local_, making "economy".
Simpler goimports
Tags: go
Published: 2021-03-27 08:22:27

# goimports grouping/ordering problem

As you can see on this issue [golang/go#20818](https://github.com/golang/go/issues/20818), goimports has a problem about grouping/ordering import lines.
But we have to determine several specifications to resolve this problem, and a lot of people have been discussing for about 4 years on the issue.

# An example solution

https://github.com/rinchsan/gosimports

A tool named `gosimports` provides one example solution for the issue.
`gosimports` stands for "simpler goimports", putting "s" between "go" and "imports" of "goimports".

# What `gosimports` does

When you have a file like this:

```go
package main

import (
	"fmt"

	"golang.org/x/sync/errgroup"
	"context"
)

func main() {
	fmt.Println(errgroup.WithContext(context.Background()))
}
```

`gosimports` will re-group and re-order import lines like below:

```go
package main

import (
	"context"
	"fmt"

	"golang.org/x/sync/errgroup"
)

func main() {
	fmt.Println(errgroup.WithContext(context.Background()))
}
```

while original `goimports` does not.
AWS Workbench
Tags: aws, devops
Published: 2021-03-27 08:18:39

Happy to introduce AWS Workbench which I have been building for past couple of months.

AWS Workbench,based on AWS CDK and Eclipse Sirius, is intended to be an IDE to enable the entire Design -> Develop -> Deploy cycle for Cloud Infrastructure.

Here is a small video ( https://www.youtube.com/watch?v=1pnMsWiM3P8 ) introducing the rationale for building this tool.

Please feel free to try it out. The tool and associated documentation is available at https://aws-workbench.github.io
Manage your learning process with Toby
Tags: life
Published: 2021-04-30 13:45:43

---
title: Manage your learning process with Toby
published: true
date: 2021-03-27 08:00:00 UTC
tags: Life
canonical_url: https://domenicoluciani.com/2021/03/27/manage-your-learning-process-with-toby.html
---

As a greedy learner, I used to find myself full of bookmarks of stuff I want to read or watch. I’ve never had a good place to keep all the things I read/watched until I found Toby.

Read the [article](https://domenicoluciani.com/2021/03/27/manage-your-learning-process-with-toby.html)!
Basic Introduction to DART Programming Language
Published: 2021-03-27 07:55:17

In this tutorial we will discuss about Dart programming language and We will learn their applications and features with example.

{% youtube Ak9dqpRA2A4 %}
*Please Like the video and subscribe the channel👍*

###My Youtube Channel Please support me:###
[Top 10 Technologies to Learn in 2021](https://youtu.be/4pdBhJns2nM)
[Top 10 Programming Languages to Learn in 2021](https://youtu.be/IZHQypmB0iY)

### My Blogs###
[please check it](http://expoashish.blogspot.com/)

####🎥💡🔥AND Subscribe to Our YouTube Channel [bestcodecreator] (https://www.youtube.com/bestcodecreator) 

Thankyou
Why Python Language is the Best Choice for Data Scientists?
Tags: datascience, python
Published: 2021-03-27 07:13:24

Python is a high-level programming language. Python has the following powerful features - built-in data structures, dynamic typing, dynamic binding, and functions. One big reason why Python is so attractive to data scientists is that it has built-in data structures. In this article, we will discuss why the Python language is the best choice for data scientists.

https://www.careerera.com/blog/why-python-language-is-the-best-choice-for-data-scientists
Sorting Visualizer
Tags: ibelieveindoing, javascript, html, css
Published: 2021-03-27 07:10:02

Hello DEV people!
Today, I'm going to write my first dev blog explaining my project working experience of creating a sorting visualizer of different sort algorithms. 

As part of the **Crio IBelieveinDoing** program, I selected and built a **Sorting visualizer** to visualize and understand the sorting algorithms. As of now, I built only 5 sorting algorithms as - 
```
Bubble sort
Selection sort
Insertion sort
Merge sort
Quicksort
```
The main reason I choose this project to become more familiar with the javascript concepts, and CSS styling. So, I didn't use any frameworks other than **HTML, CSS, and JS.**

On successful completion with this project, 
Now I'm familiar with the JS concepts, can confidently solve coding problems, write stylings in CSS.

## About this Project

This project is built using HTML, CSS, and JS. This project sorting visualizer is a very simple UI and it allows the users to select the sort algorithm, select the array size, and speed of the visualization.

## Pre-requisites
```
1. Code editor (which you prefer) I prefer VSCode
2. HTML
3. CSS
4. JS
```

# Challenges I faced

1. Site responsiveness
   To bring responsiveness to the site, I have gone back to learn CSS styling. It is like going back to the time when I was learning the CS fundamentals and web technologies as a beginner.
See the below image on how it looks like-
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7bvtz7cxn3o7xwabfzm.jpg)

2. Writing sort algorithms in JS
   And coming to the second challenge I faced writing sort algorithms in JS. When I want to write some code or learn algorithms for solving coding problems, I usually prefer Python/Java. Initially, I took more time to implement the first sort algorithm i.e., Bubble sort to perfectly work. After that, for the remaining algorithms, I took no time and implemented them so quickly one after the other.

## What's inside the website

1. Currently available sorting algorithms- Bubble sort, Selection sort, Insertion sort, Merge sort, Quicksort
(I will plan to bring more algorithms in action to visualize & more changes).
2. You can change the size of the array
3. You can change the speed of the visualization

## Conclusion

This was my first project which I was deploying the website live. This was a great learning experience for me creating a full application from scratch. 
Also, through this project, I was writing my first dev blog.

Thanks to the Crio community for providing the amazing learning experience with #learnbydoing projects and a big dev community.

## Code and deployment

**Here's the link to my sorting visualizer website-**
[sorting visualizer](https://dharshakch97.github.io/sort-visualizer/)
**Here's the link for the code-**
[sort visualizer code](https://github.com/dharshakch97/sort-visualizer)

Thanks for reading. I feel happy to connect & reach out to me for any discussions. Have a great day!! 

[LinkedIn](https://www.linkedin.com/in/dharshakch97/) [Twitter](https://twitter.com/ur__harsha)
SDC Day 11
Published: 2021-03-27 06:41:07

I realized that my EC2 instances were hosted in Ohio, so I started my day off creating an image of my PostgreSQL database that I can then copy into the California region. Once I had an image in California, I launched an instance of it which became a copy of my other database. Images are really cool because they can serve as a backup and also makes copying really easy. I then created an EC2 instance for my express server and hooked it up to my EC2 database. A tricky part of that process was editing the security inbound connections so that the connections were to the correct IP Address and secured from strangers. After finally finishing the deployment of my server and database, I began stress testing using Loader.io, which is a cloud-based load testing service that allows me to stress test using thousands of requests per second. My endpoints did fairly well being able to handle 1500 requests per second without much falloff to response time or error rate. However, at 2000 requests per second I started to see sharp decreases in performance. My next goal is to start horizontally scaling by adding more EC2 instances of servers.
How to use useSearchParams With React Router v6 ?
Tags: react, javascript
Published: 2021-03-27 05:51:31

First Lets define Routes that will allow us to use useSearchParams in react-router v6.  

```react
<Routes>
  <Route element={<SomeComponent />} path="some-route/*" />
</Routes>
```


Now inside the `SomeComponent`  


```javascript
  const [searchParams, setSearchParams] = useSearchParams({});
  setSearchParams({ hello: "world"  });
  console.log(searchParams);
```

This will set `https://somevalidurl.com?hello=world` in the URL.
JavaScript Objects Part:1
Tags: javascript, webdev, beginners, codenewbie
Published: 2021-03-27 05:25:13

Objects are general building blocks of JavaScript. They can be `string, number, Boolean, null, undefined or object`. JavaScript objects are collection of properties, each property is a key value pair i.e. each property will contain a key and a value associated to the key. The key can be string(anything that can be converted into string) or a symbol, value can be anything that is permitted in JavaScript. An empty string can also be a key.  If the value of a property is a function then the property is called a method. Object names and property names are case sensitive **admin** is not equal to **Admin**.

Creating an empty object

Method 1: `let Admin = {}`
Method 2: `let Admin = new Object() `

We can add properties after creating a object, an example is shown below.
```javascript
let obj = {};       // creating an empty object
obj.name = "kiran"; // adding properties to object
obj.title = "Mr."

// output of console.log(obj) is given below
{
    "name": "kiran",
    "title": "Mr."
} 
```

We can declare an object with properties in one step using object literal notation.
```javascript
let admin = {
    name: "kiran raj",
    admin: true,
    greet: function(){
        console.log(`Hello ${this. name}`);
    }
}
```

The object properties can be accessed using dot notation or using the bracket notation. Dot notation is most widely used one, as it is easy to use. If the key is a string with multiple words or starts with a number or have a hyphen, the property can only be accessed using the bracket notation. In bracket notation the key should be in quotes. A code snippet related to the property accessing is given below.
```javascript
let admin = {
    "full name": "kiran raj",
     name:"kiran raj",
     admin: true,
     greet: function(){
       console.log(`Hello ${this. name}`);
     }
}

// Dot notation
console.log(admin.'full name'); //this will create error
console.log(admin.name);        //kirn raj
console.log(admin.admin);       //true

// Bracket notation
console.log(admin['full name']); //kiran raj
console.log(admin['name']);      //kiran raj
console.log(admin['admin']);     //true
```

Add a property: `objectName.newPropertyKey = value`.
Delete a property: `delete objectname.propertyKey`

```javascript
let obj = {};
obj.name = "kiran";
obj.title = "Mr.";
obj.newKey = "test";
console.log(obj.newKey);    //test       

delete obj.newKey;
console.log(obj.newKey);    //undefined 
```
`Undefined` is assigned to unassigned object properties.


[Part 2: Dot vs Bracket](https://dev.to/kiranrajvjd/javascript-objects-part-2-dot-vs-bracket-3b3h)
[Part 3: In operator and for in statement](https://dev.to/kiranrajvjd/javascript-objects-part-3-in-operator-and-for-in-statement-e8d)
[Part 4: Constructors and this](https://dev.to/kiranrajvjd/javascript-objects-part-4-constructors-and-this-4am7)
[Part 5: Object duplication ](https://dev.to/kiranrajvjd/javascript-objects-part-5-object-duplication-3dlg)
You Love These 12 Design Resources
Tags: resources, design, webdev
Published: 2021-03-27 05:23:00

## Content

1. Colors
2. Fonts
3. Icons
4. Illustrations/Images

## Colors

1.[Duo](https://duo.alexpate.uk/)
 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616820780288/PGYVC150t.png)

2.[Color Hunt](https://colorhunt.co/)


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616820852652/oxBWOPHqj.png)

3.[Coolors](https://coolors.co/)


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616820946379/jg5uPIutN.png)

4.[BrandColors](https://brandcolors.net/)


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616821019695/1VUl9inVs.png)

## Fonts

1.[Font-Generator](https://brandmark.io/font-generator/)

Quickly find what fonts are used by big brands.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616821236219/rzXIfpkAO.png)

2.[Font In Logo](https://www.fontinlogo.com/)

Quickly find what fonts are used by big brands and companies.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616821353328/aZoATkTLP.png)


## Icons

1.[HeroIcons](https://heroicons.com/)


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616821450172/l4zzvI5o7.png)

2.[iconmonstr](https://iconmonstr.com/)


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616821517158/iTt1nEx3Hv.png)

3.[TheNounProject](https://thenounproject.com/)


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616821624818/SK7EJHD3m.png)

## Illustrations/Images

1.[avataars](https://avataaars.com/)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616821726633/E8_INWC6t.png)

2.[dash illustrations](https://www.karthiksrinivas.in/)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616821800993/EdrlREMvn.png)

3.[Humaaans](https://www.humaaans.com/)


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616821872846/n1iTGUe0Y.png)


**Feel free to add more**