teleren/devto huggingface dataset:
Reduce, Reuse and Recycle Components with React
Tags: react, javascript, beginners
Published: 2020-02-29 15:00:06

Functions are a great way to reuse code when writing in vanilla Javascript. It can save you a lot of time and makes your code cleaner and easier to read. In React, however, you write your code as components which can also be reused by passing in props. I'll assume you've read the hundreds of blog posts on how to `create-react-app` so let's skip that part altogether and just get started!

We'll be creating two simple button components that will `console.log()` "Hello" and the other will log "Shia LaBeouf", naturally. In our `/src` folder let's create a subfolder called "components" and create our Button component. Your file structure should look like this: 

![react file structure](https://i.imgur.com/Xih7XMi.png)

Let's make that component a functional component. React Hooks have been the hot new rage past year so I suggest you Google it if you haven't heard of it. Here's what our Button component looks like now:

```js
import React from "react";

const Button = () => <button>something</button>;

export default Button;
```

Whoa.

Now, let's go into our App.js file and replace the starter template that comes with `create-react-app` with our two Button components. Don't forget to import it up at the top!

```js
import React from "react";
import "./App.css";
import Button from "./components/Button";

function App() {
  return (
    <>
      <Button />
      <Button />
    </>
  );
}

export default App;
```

Running `npm start` in your terminal will bring our lovely website to life. Just two buttons that say "something" in the upper left corner against a white background. Hey, I'm teaching you about reusable components, not how to style.

So, as it stands, we have two buttons that look the exact same and do the exact same thing (nothing). If you've been paying any sort of attention, to make the same button do different *things* you need to pass it props from its parent. In this case, it's App.js.

Let's differentiate between the two "something" buttons by passing it label props:

```js
// App.js

<Button label="Hello" />
<Button label="Shia LaBeouf" />
```

And by receiving the prop as an argument and then calling on those props:

```js
// Button.js

const Button = props => <button>{props.label}</button>;
```

Now take a look at your website. One button says "Hello" and the other says "Shia", naturally. I think you can see where I'm going with this "props" stuff.


Let's add our `onClick` handlers which will execute a function to log some text into our console: 

```js
// Button.js

const Button = props => 
  <button onClick={props.log}>
    {props.label}
  </button>;
```

```js
// App.js

const log = e => {
  console.log(e.target.textContent);
};

function App() {
  return (
    <>
      <Button label="Hello" log={log} />
      <Button label="Shia LaBeouf" log={log} />
    </>
  );
}
```

Now take a look at your console when you click on one of the buttons. Whoa. We just used the same Button component while naming it two different things and logging two different things. This is the power of React!
Takeaways from ReactFoo+VueDay Pune
Tags: react, vue, reactconf, javascript
Published: 2020-02-29 14:42:11

After a long time, I had attended a tech conference. So this time it was [ReactFoo+VueDay](https://hasgeek.com/reactfoo/2020-pune/), a tech conference on React and Vuejs. 

I would like to discuss my takeaways from today's conference:-

- Migration of codebase from one framework to another. Pros and cons which you have to deal with when you are migrating the codebase.

- [Redux store](https://redux.js.org/introduction/getting-started) - How to deal with data when using [Redux](https://redux.js.org/) as a state management tool

- [Declarative](https://en.wikipedia.org/wiki/Declarative_programming)  and [Imperative](https://en.wikipedia.org/wiki/Imperative_programming) style of programming in React

- A brief introduction to [Reactive programming](http://reactivex.io/) as a React/Vue developer

- How to use [React's context APIs](https://reactjs.org/docs/context.html#when-to-use-context) with the latest hooks APIs

- Using [TypeScript](https://www.typescriptlang.org/) and Hooks in a greenfield react projects plus a unit and integration testing mechanism in place.

- Persisting data across systems with the help of [react-persist](https://www.npmjs.com/package/redux-persist)


Special thanks to [Aziz Khambati](https://dev.to/azizhk110) for the talk on reactive programming and other speakers, and the [hasGeek](https://hasgeek.com/) for organizing the [ReactFoo+VueDay](https://hasgeek.com/reactfoo/2020-pune/).

*Thanks for reading, Happy learning* :)
2020🔥 New and Hand-Picked Free Web Resources, Every developer should bookmark it!
Tags: javascript, python, react, angular
Published: 2020-02-29 14:38:30

We want to share some of my new favorite resource which can help you to daily web design and development life.
  <h2>Free Stock Images</h2>
    
<a name="chapter-1" href="https://picspree.com/en"> Picspree</a>: Discover and download beautiful royalty free images, stock photos, illustrations, and vectors.

<a href="https://focastock.com/" target="_blank">Focastock</a>: Free photos, videos, and templates — Use them in your website, themes, templates, projects, print materials, social posts, and more. CC0 license.

<a href="https://duotone.shapefactory.co/" target="_blank">Duotone:</a> Duotone images to use in any project, or make custom duotone images by uploading your own image and applying a duotone effect in seconds.

<h2>Free Stock Videos</h2>
<a href="https://www.videvo.net/" target="_blank">Videvo:</a>  Download free stock video footage with over 28,000 video clips in 4k and HD. We also offer a wide selection of music and sound effect files with over 100,000 clips available. Click here to download royalty-free licensing videos, motion graphics, music and sound effects from Videvo today.

<a href="https://coverr.co/" target="_blank">Coverr:</a>  Download royalty free (for personal and commercial use), unique and beautiful video footage for your website or any project. No attribution required.

<h2>Free Icons</h2>
<a href="https://uxwing.com/" target="_blank">UXWing Icons:</a>  Royalty free SVG icons and PNG icons for commercial use no attribution. Well optimized vector free icon library.

<a href="https://cssicon.space/" target="_blank">CSSicon space:</a>  CSSicon space are pure HTML and CSS icons.

<h2>Free illustrations </h2>
<a href="https://www.opendoodles.com/" target="_blank">Opendoodles:</a>  A library of sketchy illustrations of people free for personal and commercial use.

<a href="https://www.humaaans.com/" target="_blank">Humaaans:</a>  Mix-match illustrations of people with a design library for InVIsion Studio and Sketch.

<h2>Free Mockup</h2>

<a href="https://frrames.com/" target="_blank"> Frrames:</a> Perfect mockup frame free responsive windows. Sketch, Figma, Chrome and much more.

<h2>Color Palettes & Gradient</h2>

<a href="https://coolors.co/" target="_blank">Coolors:</a>  The super fast color schemes generator + a collection of more than 1,5 M palettes!


<a href="https://www.grabient.com/" target="_blank">Grabient:</a>  Beautiful and simple UI for generating web gradients.

<a href="https://htmlcolorcodes.com/" target="_blank">HTMLcolorcodes:</a>  Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names.

<h2>Fonts</h2>
<a href="http://www.fontreach.com/" target="_blank">FontReach:</a> FontReach scans the top million sites to show font usage across the web.

<a href="https://fontpair.co/" target="_blank">Font Pair:</a> Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.

<h2> 👉 More are coming, 🔥follow me to get new design updates…</h2>
Pardus 19.x üzerinde Docker kurulumu ve kullanımı
Tags: pardus, docker, kurulum, kullanim
Published: 2020-02-29 14:18:48

Pardus 19.x sürümleri üzerinde Docker'ın varsayılan olarak kullanılan topluluk sürümünün kurulumunu yapacağız. Aşağıda anlatılan şekilde kurduğunuz durumda docker üzerindeki güncellemeleri sisteminiz üzerinden alabilir, kolaylıkla güncelleme yapabilirsiniz.

# Kurulum

Pardus 19 üzerinde paketlerin güncelliği kontrol edilip Docker paketi için gerekli bağımlılıklar indirilir. Güncelleme;

```bash
sudo apt-get update
```

Gerekli bağımlılıklar:

```bash
sudo apt-get install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg2 \
    software-properties-common
```

Docker'ın resmi GPG anahtarı indirilerek APT sistemine eklenir.

```bash
curl -fsSL https://download.docker.com/linux/debian/gpg | sudo apt-key add -
```

Ekrana komut ile çıkan anahtardaki son 8 karakter aşağıdaki gibi imza olarak onaylanır.

docker'ın anahtarını ve imzasını gör:

```bash
apt-key list | grep -B2 docker
```

anahtarı ve imza aşağıdaki şekilde görülecektir:

```
pub   rsa4096 2017-02-22 [SCEA]
      9DC8 5822 9FC7 DD38 854A  E2D8 8D81 803C 0EBF CD88
uid           [    bilinmeyen   ] Docker Release (CE deb) <docker@docker.com>
```

anahtar imzasını ekle:

```bash
sudo apt-key fingerprint 0EBFCD88
```

Şimdi Pardus 19.x için Debian tabanlı depo indirilebilir:

```bash
sudo add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/debian \
   buster \
   stable"
```

Depo adresi de eklendikten sonra yerel depo güncellenerek ilgili paket yüklenebilir:

```bash
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io
```

Depodda bulunan docker sürümlerini aşağıdaki gibi inceleyebilirsiniz:

```bash
sudo apt-cache madison docker-ce
```

Ve debian paket yönetim sistemi özelliğinden dolayı yukarıdaki komut yerine kendi istediğiniz sürümü yükleyebilirsiniz:

```bash
sudo apt-get install docker-ce=<VERSION_STRING> docker-ce-cli=<VERSION_STRING> containerd.io
```

# Yetkili kullanıcı ile kullanım örneği

Docker'ın kurulduğunu test etmek isterseniz aşağıdaki hello world uygulamasını çalıştırabiirsiniz.

```bash
sudo docker run hello-world
```

# Yetkisiz kullanıcı ile çalıştırma

Fakat bu halde iken sadece yetkili kullanıcılar docker'ı kullanabilir. Sizin istediğiniz bir **ali** kullanıcısının da docker'ı kullanabilmesini sağlamak için oluşturulmamış ise docker grubu oluşturup, ali kullanıcısını docker grubuna ekleyelim:

```bash
sudo groupadd docker
sudo usermod -aG docker ali
```

Test etmek için bu sefer komutunuzun başına "sudo" koymadan yetkisiz kullanıcı ile (yukarıda belirttiğiniz) hello-world konteynırını açabilirsiniz:

```bash
docker run hello-world
```

Ex nihilo nihil fit
GDC 2020 "Postponed"
Tags: gamedev, gdc, news, discuss
Published: 2020-02-29 13:44:00

The [Game Developers Conference (GDC)](https://en.wikipedia.org/wiki/Game_Developers_Conference) is one of the largest and longest-running events targeted at video game developers.

Owing to concerns regarding the coronavirus, the past few weeks has seen a number of high-profile cancellations from the likes of: [Sony, Facebook](https://www.gamesindustry.biz/articles/2020-02-20-playstation-and-facebook-cancel-gdc-appearances-citing-coronavirus-concerns), Microsoft, [Amazon](https://venturebeat.com/2020/02/28/amazon-pulls-out-of-gdc-show-not-canceled-yet/), [Epic Games, Unity](https://www.gematsu.com/2020/02/epic-games-and-unity-cancel-gdc-2020-presence-due-to-coronavirus-concerns), [Activision/Blizzard](https://www.playstationlifestyle.net/2020/02/28/activision-blizzard-gearbox-list-of-gdc-cancellations/), and more.  Yesterday, [GDC themselves opted to postpone it in favor of an event "later in the summer"](https://gdconf.com/news/important-gdc-2020-update).

The company I work for had planned to send a fairly large contingent including speakers, booth participation, and regular attendees.  Now flights, hotels, off-site meetings, and other preparations are being canceled.  Last night during dinner it came up and sparked a number of conversations:

- Necessity
    - The coronavirus threat is over-blown, perpetuated by the media, or [a hoax](https://www.politico.com/news/2020/02/28/trump-south-carolina-rally-coronavirus-118269) and it's fine to attend (around 1/3 of 20 people)
    - There is a real threat; either directly from the virus, or something indirect like the risk of quarantine, etc. (around 1/2 of 20)
    - Indifference, glad to not have to travel to U.S., or just waiting for dessert (the rest of people)
- Impact Conspiracies
    - The upcoming [PS5](https://www.playstation.com/en-us/explore/ps5/) and [Xbox Series X](https://www.xbox.com/en-US/consoles/xbox-series-x) consoles will be delayed
    - Companies will question the necessity/relevance of events like GDC and may not attend next year

How are other people's tech/dev/IT companies reacting, taking precautions, or simply doing nothing?
Daily Challenge #198 - 21 Blackjack
Tags: challenge
Published: 2020-02-29 13:30:18

---
title: Daily Challenge #198 - 21 Blackjack
published: true
series: Daily Challenge
description: Write a hand scorer for Blackjack.
tags: challenge
---
Implement a function that determines the score of a hand in the card game 21 Blackjack.

The function will receive an array filled with strings that represent each card in the hand. Your function should return the score of the hand as an integer.

Number cards count as their face value (2 through 10). Jack, Queen and King count as 10. An Ace can be counted as either 1 or 11.

Return the highest score of the cards that is less than or equal to 21. If there is no score less than or equal to 21 return the smallest score more than 21.

###Examples
["A"]                           ==>  11
["5", "4", "3", "2", "A", "K"]  ==>  25

###Tests
["A", "J"]                
["A", "10", "A"]       
["5", "3", "7"]       

***
_This [challenge](https://www.codewars.com/kata/534ffb35edb1241eda0015fe) comes from jodymgustafson on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Difference between Serializable and Externalizable in Java
Tags: java
Published: 2020-02-29 13:25:28

This is one of the frequently asked questions from Java Serialization. The interviewer has been asking this question since the day Serialization was introduced in Java, but yet only a few good candidates can answer this question with some confidence and practical knowledge.

Serializable interface is used to make Java classes serializable so that they can be transferred over the network or their state can be saved on disk, but it leverages default serialization built-in JVM, which is expensive, fragile and not secure.

Externalizable allows you to fully control the Serialization process, specify a custom binary format and add more security measures.
Daily Developer Jokes - Saturday, Feb 29, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-02-29 13:00:23

---
title: "Daily Developer Jokes - Saturday, Feb 29, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Feb%2029%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258d16351b.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What do you get when you cross a computer and a life guard?

___A:___ A screensaver!
 -->
React's weaknesses
Tags: discuss, react, redux, help
Published: 2020-02-29 12:35:45

In the last years, React has placed a lot of effort in improve many of it apis to be more easier and friendly to new comers. This happened with hooks, for example one of the motivations was because using classes components is so confused and complex for beginners, beyond the fact that until this point react had problems with reuse stateful logic. Although this exists, one really topic controversial and commented is about the state management in React, and the resistance generated in many developers to learn or use redux, because it is necessary to change a lot of files, and know many abstractions, yeah, we have the `<Context>` alternative, but do you think that this API is enough to complex things or global state management? or is it better to resort to redux?


My point is that I miss a more structured solution on this topic in React, Last days I was reading reddit and one of the maintaners of redux, it argued that with the library we would be able to have consistent architectural patterns, debugging capabilities and etc. And I agree with him, probably using the Context API and hooks, we'll suffering a lit bit to achieve these things.
The leap year
Tags: life
Published: 2020-05-10 09:54:34

---
title: The leap year
published: true
date: 2020-02-29 00:00:00 UTC
tags: life
canonical_url: http://jamessessford.com/blog/the-leap-year
---

February 29th 2020. A date that will never occur again, as time moves forward butnever back, and a day we won't see again for four more years.

I've been fairly quiet the last couple of months as I've struggled to find things to write about.

On my quests from [my end of year list](/blog/i-spent-this-year-as-a-ghost/)I think I'm making quite steady progress. I've just finished a course of CBT and am trying toput into practice the techniques in how I personally review & engage in the different aspects of my life.

Yesterday marked my last shift codng for [Atticus Consultancy](http://atticusconsultancy.co.uk). It's been a fantastic three years working there and I've got to workon some fantastic projects and make some friends for life along the way!

Monday will be my first shift coding for [Preferred Management Solutions](https://preferredmanagement.co.uk).

Today, I'm going to code for the joy of discovery.
Easy concurrent scraping with Scala with Akka streams
Tags: scala, tutorial
Published: 2020-02-29 11:15:26

**Step 1**: Download ammonite

```bash
# Download Ammonite
$ curl -L https://github.com/lihaoyi/ammonite/releases/download/2.0.4/2.12-2.0.4-boostrap > amm212 && chmod +x amm212
```
**Step 2**. Start ammonite

```
$ amm212 --class-based
```

**Step 3**. We need `akka-streams`

```scala
import $ivy.`com.typesafe.akka::akka-stream:2.6.3`
// standard imports
import akka.stream._
import akka.stream.scaladsl._
import akka.{ Done, NotUsed }
import akka.actor.ActorSystem
import akka.util.ByteString
import scala.concurrent._
import scala.concurrent.duration._

// Json parsing
import ujson._

// Handle files
import java.nio.file.Paths


implicit val system = ActorSystem("QuickStart")

val hotelids = scala.io.Source.fromFile("source.txt") // we need to scrape these urls or some ids for an endpoint

def parser(i: Int): (Int, String) = {
      val url = s"ENDPOINT/{i}"
      val urlResponse = Try(ujson.read(requests.get(url).data.toString))
      val result = urlResponse match {
        case Success(res) => "PARSED_RESULT"
        case Failure(e) => "null"
      }
      return (i, result)
    }

```

**Step 4**. We create file sink to store the data (you can print to console as well)

```scala
def lineSink(filename: String): Sink[(Int, String), Future[IOResult]] =
    Flow[(Int, String)].map(s => ByteString(s._1 + "," + s._2 + "\n")).toMat(FileIO.toPath(Paths.get(filename)))(Keep.right)
```

**Step 5**. Introduce throttling behavior because some websites disallow too many requests. Here, we make 25 requests in 10 seconds (5 requests in 2 seconds)

```scala
val resultFile = source.map(_.toInt).throttle(25, 10.second).map(parser).runWith(lineSink("output.txt"))
```

### All done from console with Ammonite shell!!
ปิด Python Threading เมื่อประมวลผลเสร็จ
Tags: python3, threads, programming
Published: 2020-02-29 14:38:12

---
title: ปิด Python Threading เมื่อประมวลผลเสร็จ
published: true
date: 2020-02-29 11:13:33 UTC
tags: python3,threads,programming
canonical_url: 
---

บันทึกความจำแบบลูกทุ่งๆ เรื่องการจบโปรแกรมที่ใช้ Threading ของ Python ที่เปิด worker แบบ Infinite loop เอาไว้ [[มี update ด้านล่าง]]

![](https://cdn-images-1.medium.com/max/1024/1*gMYore2q-sxEg_XkIxZ5XQ.jpeg)

ตัวอย่าง

{% gist https://gist.github.com/mrchoke/b1bdc322557ff3f216875d93b3d519e7 %}

จากตัวอย่างข้างบนเมื่อข้อมูลหยุดส่งให้ Queue แล้วโปรแกรมยังค้างอยู่ให้เพิ่มหนึ่งบรรทัดดังนี้ (line 36)

```
self.q.put('END')
```

{% gist https://gist.github.com/mrchoke/2290da5307940a7cc10197432ac763e4 %}

วิธีนี้น่าจะลูกทุ่งไปหน่อยใครมีวิธีที่เฉียบและง่ายๆ แนะนำมานะครับมึนหมดละ

##Update

หลังจากที่ Published บนความไปมีเพื่อนใน FaceBook แนะนำวิธีที่ง่ายกว่ามาให้ตามตัวอย่างด้านล่าง

{% gist https://gist.github.com/mrchoke/d94b247fd978696f17aa5f5b2d5c2331 %}
Programming first principles - 6. Premise - Minimize propagating changes throughout the system
Tags: programming, webdev, learning, development
Published: 2020-02-29 11:10:58

This post ([Programming first principles - 6. Premise - Minimize propagating changes throughout the system](https://www.sargalias.com/blog/programming-first-principles-premise-minimize-propagating-changes/)) was originally published on [Sargalias](https://www.sargalias.com).

Our next premise is that we must minimize propagating changes throughout the system.

This follows from our premise of minimal information:

1. Propagating changes throughout a system means we need to be aware of additional required changes.
2. This means we need to be aware of more things than if there were no additional required changes.
3. This conflicts with our premise of minimal information.

It is also a suggested requirement for making systems that are easy to change:

1. Less propagating changes means less changes are required overall.
2. Which means less work is required to change the system.
3. Which suggests that the system is easier to change.