teleren/devto huggingface dataset:
Best practices for reusable components in React
Tags: react, reusable, component, optimisation
Published: 2020-03-30 13:00:13

These are some of the points related to best practices for reusable components in React-based projects.
 
- Components should be small and easy to read.
- Use prop-types package to structure and validate the props of your components.
- For styled-components, do not include any functional details, instead pass them as props.
- For container components, do not include UI details, instead, let the children styled-components take care of them
- Prefer functional components vs class-based components.
- Prefer CSS in JS strategy for styled-components for better maintainability.
- UI variations should be coming in as configurable props whereas data should be coming up as part of a global state like Redux or React Context.
- Don’t repeat sections wherever it can be avoided, instead use arrays to store those section details and loop over them.
- For components, add comments only wherever absolutely necessary (to indicate a hack or workaround for a bug).
- For library utilities (pure functions), write JS-Doc comments.
- Avoid using anonymous components wherever possible.
- All files for a component should be part of the same folder.
- Always use eslint and prettier for keeping your code clean and formatted.
- Use ES6 features.
ELI5 : Subshell in linux and its usage
Published: 2020-03-30 12:46:55

I've just started learning more about the linux environment in general and I came across this idea of subshells. I know it's a shell started by another shell; such by running commands inside () for example, but what I don't understand is what they really are and what's the point of it, in a grand scheme of things.
Customize the Semantic UI React theme in Next.js

Published: 2020-03-30 12:37:58

- https://annacoding.com/article/6FndBILqMD16Bp7w95WJrd/How-to-customize-the-Semantic-UI-React-theme-in-Next.js-Part-1
- https://annacoding.com/article/2Mdrahk2d6LZfGv1UL19Ml/How-to-customize-the-Semantic-UI-React-theme-in-Next.js-Part-2
Linux Test Session: Sorting with $sort
Published: 2020-03-30 12:34:35

#$sort

#$(du / | sort -nr | head -n 10)
- du shows disk usage at root directory ( a huge huge file)
- sort -nr sorts the file numerically in reverse order
- head -10 shows only the top 10 sorted lines
- () pushes it to the sub-shell in the background
Machine Learning -  Max Pooling With Color Images
Tags: machinelearning, beginners, computerscience
Published: 2020-03-30 12:24:20

---
title: Machine Learning -  Max Pooling With Color Images
published: true
description: Machine Learning studies
cover_image: https://i.ibb.co/gyDsXzP/0-hzqhs-KFIZNWJKhvq.jpg
tags: machinelearning, Beginners, Computer Science
series: Making Of Terminator
---
Hey there,
Quarantined? No worries. I got new a post to forgot everything and to have some fun during this pandemic.

Let's see how we can perform max-pooling in our 3D convoluted output. In essence, max-pooling works the same way as it did for gray-scale images. 
<code>The only difference is that now we have to perform max pooling
on each convoluted output.</code>

Let's see an example.
For simplicity, let's suppose that our 3D convoluted output looks like this.

![details](https://i.ibb.co/s9rdY0V/maxpooling-start.png)

As before, we will use a window size of two-by-two, and a stride of two to perform max pooling. We start by placing our window on the top left-hand corner on each convoluted output.

![details](https://i.ibb.co/xFfRZRt/maxpool2.png)

We now perform max-pooling on each convoluted output. For example, the values in our two-by-two window in the top
convoluted output are 1, 9, 5, and 4. Since 9 is the maximum value, which is 9 and put it in our output array.

![details](https://i.ibb.co/1bCr0bt/9maxvalue.png)

Similarly, the values in our two-by-two window in the middle convoluted output are 9, 1,5, and 6. Since 9 is the maximum value, we will choose 9 and put it in our output array.

![details](https://i.ibb.co/s5xkVnm/completed.png)

Similarly, the values in our two-by-two window, in the bottom convoluted output are 7, 6, 5, and 2. Since 7 is the maximum value, we choose 7 and put it in our output array.

![details](https://i.ibb.co/s5xkVnm/completed.png)

Continuing in this fashion, we get the following result.

![details](https://i.ibb.co/s5xkVnm/completed.png)

As we can see, after performing max-pooling we end up with three, two-dimensional arrays where each two-dimensional array is half the size of its corresponding convoluted output.
Therefore, in this particular case, when we perform max-pooling on the 3D convoluted output, we get a 3D array that is half the width and height of the convoluted output, but has the same depth.

![details](https://i.ibb.co/jgPYtPc/last.png)

That's all the theory we need for now. I will add the code shortly.
Lets talk about validation my next post.
Angular JS Getters and Setters
Published: 2020-03-30 12:10:13

Angular JS is a front end framework that supports the MVC architecture design pattern. Within this framework, the model is changed by a controller who in turn tells the view what has changed in order to render an updated DOM, which in turn takes in data to be read again by the controller. Today I'll talk a little about Angular JS's getter and setter methods, how they are useful, and some warnings to heed.

Angular JS gives us a few ways to bind data being passed down through the modules of our program. Getters and setters are methods in Angular JS for taking some user input in the DOM and within our controller, retrieve and/or update the model with a passed in argument. 
A getter method is just a function that returns a property on an object. The getter and setter is bound directly to the ng-model rather than a directive or using the bindings object. This is a great way to make various changes to requests within the controller that will be passed to the model with specific intentions.

Consider a user model. The form below takes in a username, that user name is passed to the model using a getter and setter, which uses its value as an argument to the options directive. 

```
<div ng-controller="example-form-view">
 <form name="new-user">
   <label>Choose Name:
     <input type="text" name="userName"
          ng-model="user.name"
          ng-model-options="{ getterSetter: 'hartsean' }" />
   </label>
 </form>
 <pre>user.name = <span ng-bind="user.name()"></span></pre>
</div>
```

This is a way to access variables not in scope, and to manipulate the data being passed in to the view with arguments at call time. Although the above code seems fine and normal, as the getter and setter is performing a specific and necessary task for this context, it can become unwieldy in different forms. 

The reason we use modular code and keep our code DRY as well as the point of having scope, is to keep our code private and functional. If there is more structure and intention built in to your app, you will probably rely less on getters and setters, as they can become cumbersome, and hard to trackdown and add complexity to the flow of logic on your app. Hiding a way an object gets manipulated is a principle that gets broken with this approach to handling the incoming data, but it's great to have the ability to get and set values on a model when needed.
You Must Continue To...
Tags: codenewbie, womenintech
Published: 2020-03-30 09:02:58

Last weekend, I was set on attending a conference detailing the life of iconic artist, Frida Kahlo. I'd seen the announcement online and swiftly cancelled my normal Saturday morning Body Pump class at my gym in favor of a more cultural pursuit.

Lo and behold, after around an hour in line (it was suggested to arrive early due to limited seating), and just as I'd gained entrance into the building, we were told that capacity had been reached. Grrr!

Instead of regarding the morning as a failure, I had a backup plan, which included grabbing a latte from one of my favorite cafes, taking a seat on a sun-drenched bench on the bank of the river, and leafing through the copy of Crime and Punishment I'd brought with me (just in case, you know, there was a need for another plan).

When I got back home, I decided to watch a couple of short features about Kahlo's life anyway, and this quote from husband Diego Rivera to Kahlo after first viewing some of her early work struck a deep chord of inspiration:


_In my opinion, no matter how difficult it may be for you,
you must continue to paint._


I took this as a nudge for me to continue to code each and every day. Even (and especially) when it's difficult to feel the progress or when it seems like a certain concept has the least likely chance of clicking.

Whatever it is you're trying to learn or build, stay the course. You must continue to do it - every single day. You'll be glad you did when you look back in the future and thank your past self for your tenacious consistency.

_This post was originally published on February 26, 2020 on [my blog](https://alexlsalt.github.io/blog)._
BERTによる日本語テキスト分類 (Azure)
Tags: azure, bert, machinelearning, pytorch
Published: 2020-03-30 11:45:22

_This is Japanese article._

{% github konabuta/AzureML-NLP %}

Microosft が公開している自然言語処理のベストプラクティス集 "NLP Best Practices" をベースにした日本語テキスト分類のサンプルコードを作成しました。

本家と大きく違う点は下記です。

- 日本語の BERT Tokenizer を利用する
  - Mecab (+辞書) のダウンロードとインストールの手順を追加
- 日本語 PreTrained モデル を利用する
  - [Hugging Face のモデル](https://github.com/cl-tohoku/bert-japanese)を利用
- サンプルデータとして Livedoor ニュースを利用



Mecabの辞書の導入が複雑なので本家とマージするかはまだ未定です。

コード(※抜粋)はこちらです。

#### 1. Livedoor コーパスのデータ加工

```python
# Livedoor ニュースコーパスをダウンロードして利用します。
from urllib.request import urlretrieve
import tarfile

text_url = "https://www.rondhuit.com/download/ldcc-20140209.tar.gz"
file_path = "./ldcc-20140209.tar.gz"
urlretrieve(text_url, file_path)

# gz ファイルを解凍します。
with tarfile.open('./ldcc-20140209.tar.gz', 'r:gz') as tar:
    tar.extractall(path='livedoor')
    tar.close()
```
 
```python
# Pandas Dataframe を作成します。
for folder_name in os.listdir(path):
    print(folder_name)
    if folder_name.endswith(".txt") :
        continue
    for file in os.listdir(os.path.join(path, folder_name)):
        if folder_name == "LICENSE.txt" :
            continue
        with open(os.path.join(path, folder_name, file), 'r') as f:
            lines = f.read().split('\n')
            if len(lines) == 1:
                continue
            url = lines[0]
            date = lines[1]
            label = folder_name
            title = lines[3]
            text = "".join(lines[4:])
            data = {'url': url, 'date':date, 'label': label, 'title':title, 'text':text}
        s = pd.Series(data)        
        df = df.append(s, ignore_index=True)
```

#### 2. ファインチューニング

準備されている関数  `util_nlp` を利用します。

```python
classifier = SequenceClassifier(
    model_name=model_name, num_labels=num_labels, cache_dir=CACHE_DIR
)

with Timer() as t:
    classifier.fit(
        train_dataloader, num_epochs=NUM_EPOCHS, num_gpus=NUM_GPUS, verbose=False,
    )
train_time = t.interval / 3600
```

精度確認を確認します。

```python
# テストデータの予測
preds = classifier.predict(test_dataloader, num_gpus=NUM_GPUS, verbose=False)

# 評価
accuracy = accuracy_score(df_test[LABEL_COL], preds)
class_report = classification_report(
    df_test[LABEL_COL], preds, target_names=label_encoder.classes_, output_dict=True
)
```
最終的な精度は 85% ぐらいでした。
- accuracy : 0.866052
- f1-score : 0.858849
Why do webpages take so long to load even though I have fast internet?
Tags: webdev, webperf, images, imagecdn
Published: 2020-03-30 11:40:23

Probably your problems are associated with the website’s content. Especially website images are really big problems. They cause the website to have low performance. You can use analytics tools. For example, Google Page Insights. It is a perfect analyze tool for websites. You should check the report that Google present to you. You see your website problem like this:

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

You should examine opportunities. Generally, essential problems are related to images like be in there. You should solve these problems. For this, there are several tools. For example: Cloudinary, image4io. [Image4io](https://image4.io/en/utm_source=Devto&utm_medium=post&utm_campaign=growth&utm_term=m5&utm_content=w14_2020) is cheaper than Cloudinary. At the same time, its performance is similar to Cloudinary. image4io optimize your images, deliver with CDN, manager your storage. Your website speeds up maybe 4–5 seconds. It is a perfect saving.
Mouse Pointer  Location Detector with vanilla Javascript
Tags: codepen, javascript, html
Published: 2020-03-30 11:39:58

Mouse Pointer  Location Detector with vanilla Javascript



{% codepen https://codepen.io/nikhilroy2/pen/bGdzgGR %} 

This is mouse pointer detector where it will detect the actual mouse pointer height and width between the window, I have make this with pure vanilla js. Thanks.
Algorithm 101: 2 Ways to Find the Largest Product Yielded by 3 Integers
Tags: algorithms, javascript, product, beginners
Published: 2020-03-30 11:35:41

This article will be showing us 2 Ways to Find the Largest Product of a given array of numbers. It is a new week over here and I want to begin this article by asking you: 

<pre>
How are you dealing with COVID-19 in you area?

I hope you are staying safe and taking preventive measures?
</pre>

**I want you to keep this in mind:**

<pre>
"This too shall pass and I want you to be here when it has passed"
</pre>

### How can we find Largest Product? 

```javascript

largestProduct([5, 3, 4, 1, 2]); // 60

largestProduct([-10, 7, 29, 30, 5, -10, -70]); // 21000

```

The trick is simple. It is either of the following:

<pre>
max1 * max2 * max3 

OR

min1 * min2 * max1
</pre>

### Prerequisite
To flow with this article, it is expected that you have basic understanding of javascript's Math methods and array methods.

### Let's find the largest product using:

* ternary operator, .sort()

```javascript
      function largestProduct(array) {
        let desSort = array.sort((a, b) => b - a);

        // min1 * min2 * max1
        let productA =
          desSort[desSort.length - 1] *
          desSort[desSort.length - 2] *
          desSort[0];

        // max1 * max2 * max3
        let productB = desSort[0] * desSort[1] * desSort[2];

        return productA > productB ? productA : productB;
      }
```

* for...loop, ternary operator, if... statement, .sort()

```javascript
      function largestProduct(array) {
        let desSort = array.sort((a, b) => b - a);
        let productA = 1;
        let productB = 1;

        // min1 * min2 * max1
        for (let i = desSort.length - 2; i < desSort.length; i++) {
          productA = productA * desSort[i];
        }
        productA = productA * desSort[0];

        // max1 * max2 * max3
        for (let i = 0; i <= desSort.length; i++) {
          productB = productB * desSort[i];
          if (i === 2) break;
        }

        return productA > productB ? productA : productB;
      }
```

### Conclusion
There are many ways to solve problems programmatically. You are only limited by your imagination. Feel free to let me know other ways you solved yours in the comment section.

> Up Next: [Algorithm 101 (Interview Question): 2 Ways to Determine if 2 Words are Isomorphic ](https://dev.to/ebereplenty/algorithm-101-interview-question-2-ways-to-determine-if-2-words-are-isomorphic-11ap)

If you have questions, comments or suggestions, please drop them in the comment section.

You can also follow and message me on social media platforms. 

**[Twitter](https://twitter.com/eberetwit) | [LinkedIn](https://www.linkedin.com/in/samson-ebere-njoku-profile/) | [Github](https://github.com/EBEREGIT)**

Thank You For Your Time.
Would You Decline A Project Due To Ethics?
Tags: freelance, discuss, watercooler
Published: 2020-03-30 11:22:25

I used to work in a company that believed in intensive tracking. Our computers had productivity trackers which used to log our every activity and of the 8 hours(out of 9) that we were billed, we had to show 8 hours of productivity.
Life was hell. We ended up sitting, moving mouses and pushing keys. We used to stay in office for 10-11 hours so that we could complete our fill of productivity, even when there wasn't any work to do. I used to curse the companies who made these kind of tracking software.

My question to you is, would you build such kind of software for money if you knew how is it going to be used? What're your thoughts about it.
Comprehensive Guide to Remote Working During Covid-19 Outbreak
Tags: coronavirusoutbreak, covid19, coronavirus, remotework
Published: 2020-03-30 10:40:15

The Covid-19 pandemic is disrupting the way businesses work. Leaders around the world are faced with a number of hard decisions that have to be made quickly to ensure the safety of their employees as well as continuity of business.

However, for organizations previously unaccustomed to this model, the prospects could be daunting. Across multiple departments, the ways of working, modes of communication, channels of reporting, etc. are different, and many leads and managers are worried whether a remote working model would be as effective as working from the office.

With the ongoing Covid-19 pandemic, enterprises worldwide are faced with a number of decisions that need to be taken quickly and carried out effectively to ensure the continuity of their businesses. An immediate step is the transition to remote working that is already being implemented by companies.

With large work forces suddenly finding themselves coordinating on work from home, business leaders must figure out the best practices to ensure employee morale and productivity stays high. Check out the infographic below on Comprehensive Guide to [**Remote Working during covid-19 outbreak**](https://www.xcubelabs.com/a-comprehensive-guide-to-remote-working/) for everything you need to know about the problems employees are likely to face and the steps you can take to keep teams engaged, motivated and focused in these trying times created by [**[x]cube LABS**](https://www.xcubelabs.com/)

With our vast experience of working with several remote teams over a decade and ensuring productivity and employee morale stays high, we have compiled this infographic, which would be extremely helpful for companies in these circumstances.

Managers can plan on leveraging strategies from it to keep their teams motivated and productive, while employees can come up with newer ways of increasing social interactions and getting to know colleagues better.
Command CompileSwift failed with a nonzero exit code
Tags: xcode, ios
Published: 2020-03-30 10:34:08

---
title: Command CompileSwift failed with a nonzero exit code
published: true
description: 
tags: xcode, ios
---
`Shift` + `Command` + `K`
&
`Option` + `Shift` + `Command` + `K`
Embedding Youtube Videos in a Performant Way
Tags: beginners, webperf, javascript
Published: 2020-03-30 09:52:41


Sometimes you want to share a Youtube video on your website, instead of just pasting a link. The problem with this is that Youtube will load over 1.5 MB of scripts (including tracking code), styles, and HTML even if the user is not interested in the video at all.

### Default

This is the default embed code that is proposed by Youtube:

```html
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/evezbNPC0Mo"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>
```

### Low-tech solution

There is a pretty nice workaround to provide a visually pleasing video for your user without making the site slow and heavy. You can use the thumbnail from Youtube and link it to the video, so the user would click an image and go to Youtube to watch the video.

```html
<a href="https://www.youtube.com/watch?v=evezbNPC0Mo" target="_blank">
  <img src="images/thumbnail.jpg" alt="Town Hall #77 - How platformOS cloning revolutionized web development">
</a>
```

Example:

<a href="https://www.youtube.com/watch?v=evezbNPC0Mo" target="_blank">
  <img src="https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/performance/embedding-youtube/thumbnail.jpg?updated=1585547115" alt="Town Hall #77 - How platformOS cloning revolutionized web development">
</a>

### High-tech solution

Now there is a better way: **[Lite YouTube Embed](https://github.com/paulirish/lite-youtube-embed)**

Lite YouTube Embed is a script that registers a custom element in the browser. This element shows a Youtube player that's very similar to original, but:

1. It is not downloading anything but the thumbnail until the user clicks play
2. It uses the `youtube-nocookie.com` domain instead of `youtube.com`, which strips out tracking cookies, preserving your users' privacy
3. According to the readme, because of deferred loading of resources, it renders 224x faster than the original player
4. It replaces static thumbnail with original Youtube player after user decided he is interested in watching the video

To be able to use this custom element in its full potential, you need its [CSS](https://raw.githubusercontent.com/paulirish/lite-youtube-embed/master/src/lite-yt-embed.css) and [javascript](https://github.com/paulirish/lite-youtube-embed/blob/master/src/lite-yt-embed.js) loaded on your website.

The custom element is straightforward to use:

```html
<lite-youtube videoid="evezbNPC0Mo">
</lite-youtube>
```

See [live demos](https://paulirish.github.io/lite-youtube-embed/).
Convert Int to Chars in Ruby
Tags: ruby
Published: 2020-03-30 09:52:39

---
title: Convert Int to Chars in Ruby
published: true
description: 
tags: ruby
---
####Code
```ruby
[76,  111, 111, 107, 105, 
 110, 103, 32,  102, 111, 
 114, 32,  97,  32,  106, 
 111, 98].map { |c| c.chr }
```
####Output
```
=> Looking for a job
```

### Im really looking for a job :D hire me.
Unable to Access Dictionary content in Templates
Tags: django, python
Published: 2020-03-30 09:51:06

This is my view.py:
from django.shortcuts import render
from django.http import HttpResponse,HttpResponseRedirect

# Create your views here.
{%
def home_view(request):
	my_dist={"hello moto":"Motorols","text":123}
	return render(request,"home.html",my_dist)


def facebook(request):

	
	return render(request,"base.html")




This is my home.html:
<h2>
{{ home_view.my_dist }}

</h2>
%}

When I save this and refresh the server no dictionary element is shown.