teleren/devto huggingface dataset:
My javascript / tech / web development newsletter for 2021-07-24 is out!
Tags: javascript, tech, webdev, discuss
Published: 2021-07-24 07:33:51

---
title: My javascript / tech / web development newsletter for 2021-07-24 is out!
published: true
description: A roundup of all the best javascript, tech and web development links posted to my linkblog in the past week
tags: javascript, tech, webdev, discuss
---
In this week’s edition:

Wordpress buys Pocket Casts, Clubhouse, Google Maps, Node-Red Dev Tools, Compiled Nodejs Apps, Virgin Galactic, Netflix, Privacy, Tiger Global, Outer Space, Tech in the EU

https://markjgsmith.substack.com/p/mark-smiths-newsletter-24-07-2021

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
React. Let's talk Forms.
Tags: react, codenewbie, beginners
Published: 2021-07-24 07:17:46

So, I've been learning React recently and it is interesting. It is built off of JavaScript and most of it behaves like JS, with some extra bells and whistles. In this post though, we'll be talking about something that is pretty different between the two. Forms.

##### JavaScript Forms (well, HTML I guess)
Forms are an HTML thing that allows for users to input information. Have you ever logged into a website? That was probably using a form. JavaScript is able to interact with Forms, which shouldn't be surprising given it's HTML, but because the information that forms gives changes based on user input, you can do a bit more with it. You can use JS with Forms to, for example, make sure a password has 8 or more characters, a number, and a special character. Overall, though, Forms is still a pretty simple tool that works, more or less, like any other use of HTML in JS.

##### React Forms
React forms work a bit differently. They're still technically HTML elements, but they are a bit special. Before we get into that though, some context. Classes, which most files in React are, have a thing called state. State is an object that allows you to store information that can be accessed from anywhere inside the class. Now that we have some context, how does this connect to forms? Forms in React basically have their own state. This state can be accessed when you call upon the form, but there's something else special you can do with it. You can link the forms state to the state that the class has. This makes what is called a Controlled Component and it looks like this:
```
state = {
    value: ""
}

<input value={this.state.value} onChange={() => (this.setState({value: event.target.value}))} />
```
(This is an example that leaves out some important things but gets across this broad strokes)

Controlled Components don't erase the class' state, but instead intermingle the two so the class state is the one true state. It's a simple thing, but something very useful and good to know.

While a lot of this post was working more in theory than practice, I hope that this gave you some practical knowledge that you can use down the line.
Regular Expression to find hastag-cloud at the end of an message
Tags: hashtag, regularexpression, facebook
Published: 2021-07-24 06:45:20

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6jwxozm6z3q969al4vr.jpg)

I do support a Project named `Facebook Newsbeamer`, which do fetch your messages from your Facebook-Thread (via FB-API) and show in your News-Section at your Homepage. 

As you might know, you can use hashtags (like #myHastag) in Facebook to make people easily find your post. 
Some people do insert their hashtags right in the content, other ones put them all at the bottom of the message to provide a better readability of the message.

I do call those "all hastags at the bottom of the message" - hastag-cloud.

As we don't need the hashtag-cloud in our Newsboard at our Website, we decide to locate them, and cut them of.

# How I did it
And here is how I did it.
We do fetch the messages via PHP ⇒ FB-API. So I've created a `Regular-Expression` which does the job!

https://regexr.com/62fbp

So as this might also be usefull for other ones, I do share it here.
Feel free to use and share it for free.
Viber API
Tags: api, viber, curl, messaging
Published: 2021-07-24 06:36:51

## Steps
1. Login to your account using your mobile number [Link](https://partners.viber.com/login)
2. Create a bot account
3. After which, you will get a `Private Token`
4. Go to your Viber on your mobile (the account where you created the bot)
5. Verify your mail ID and have a profile picture in your account.
6. More -> Settings -> My Bots -> Select your bot which you created -> Click publish.
7. More -> Settings -> My Bots -> Select your bot which you created  -> Message -> Select Viber Chat API.
8. Set Webhook Link
```
curl --location --request POST 'https://chatapi.viber.com/pa/set_webhook' \
--header 'X-Viber-Auth-Token: VIBER_ACCESS_TOKEN' \
--header 'Content-Type: application/json' \
--data-raw '{
   "url":"WEBHOOK_URL"
}'
```
**Only when you set a webhook link, your bot will get activated.**

## Points to Note:
1. Only when a user sends message to a bot, you will be able to reply.
2. You can send message to a user only using user's id (not using user's mobile number)

## Changes you should make
1. `VIBER_ACCESS_TOKEN` - From Viber Admin Panel
2. `USER'S ID` - Received From Webhook


### Send Text Message
```
curl --location --request POST 'https://chatapi.viber.com/pa/send_message' \
--header 'X-Viber-Auth-Token: VIBER_ACCESS_TOKEN' \
--header 'Content-Type: application/json' \
--data-raw '{
   "receiver":"USERS_ID",
   "type":"text",
   "text":"Hello"
}'
```

### Send Picture
```
curl --location --request POST 'https://chatapi.viber.com/pa/send_message' \
--header 'X-Viber-Auth-Token: VIBER_ACCESS_TOKEN' \
--header 'Content-Type: application/json' \
--data-raw '{
   "receiver":"USERS_ID",
   "type":"picture",
   "text":"Photo description",
   "media":"http://www.images.com/img.jpg",
   "thumbnail":"http://www.images.com/thumb.jpg"
}'
```

### Send Video
```
curl --location --request POST 'https://chatapi.viber.com/pa/send_message' \
--header 'X-Viber-Auth-Token: VIBER_ACCESS_TOKEN' \
--header 'Content-Type: application/json' \
--data-raw '{
   "receiver":"USERS_ID",
   "type":"video",
   "media":"http://www.images.com/video.mp4",
   "thumbnail":"http://www.images.com/thumb.jpg",
   "size":10000
}'
```

### Send File
```
curl --location --request POST 'https://chatapi.viber.com/pa/send_message' \
--header 'X-Viber-Auth-Token: VIBER_ACCESS_TOKEN' \
--header 'Content-Type: application/json' \
--data-raw '{
   "receiver":"USERS_ID",
   "type":"file",
   "media":"http://www.images.com/file.doc",
   "size":10000,
   "file_name":"name_of_file.doc"
}'
```

### Send Contact
```
curl --location --request POST 'https://chatapi.viber.com/pa/send_message' \
--header 'X-Viber-Auth-Token: VIBER_ACCESS_TOKEN' \
--header 'Content-Type: application/json' \
--data-raw '{
   "receiver":"USERS_ID",
   "type":"contact",
   "contact":{
      "name":"Itamar",
      "phone_number":"+91965XXXXXX"
   }
}'
```
Htaccess tutorial for beginners 
Published: 2021-07-24 06:33:47

A few days ago I wrote an htaccess tutorial for beginners . If you want to learn how to create an htaccess file and rewrite URLs , the tutorial might be helpful to you. You will learn all the basics of htaccess plus mod_rewrite. 
https://helponnet.com/2021/04/15/htaccess-tutorial-for-beginers/ .
Weekly Challenge 122
Tags: perl, theweeklychallenge
Published: 2021-07-24 06:16:21

[Challenge](https://theweeklychallenge.org/blog/perl-weekly-challenge-122/), [My solutions](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-122/sgreen)

## TASK #1 › Average of Stream

### Task

You are given a stream of numbers `@N`.

Write a script to print the average of the stream at every point.

### My solution

This is relatively straight forward, and the work is done with this bit of code `map { ++$cnt; $sum += $_; $sum / $cnt } @N`. Basically, I add 1 to the counter and the value to the sum, and calculate the average (sum ÷ counter) at the point.

One thing that isn't explained is what happens when the average is not a whole number. Since there is no guidance on what to do, I will print out what Perl does. So one third shows as `0.333333333333333`

### Example

```
$ ./ch-1.pl 10 20 30 40 50 60 70 80 90
10 15 20 25 30 35 40 45 50
```

## TASK #2 › Basketball Points

### Task

You are given a score `$S`.

You can win basketball points e.g. 1 point, 2 points and 3 points.

Write a script to find out the different ways you can score `$S`.

### My solution

When I saw this task, I immediately thought of the Climb Stairs task from [Challenge 112](https://theweeklychallenge.org/blog/perl-weekly-challenge-112/). I used a similar methodology to solve this one.

The main work is done in the recursive function `_score` (was called `_climb` in the previous challenge). If there are three or fewer points remaining, I show the scoring shots to make the required points. If there is more than 1 point remaining, I call the `_score` subroutine again for 1, 2 and 3 points if at least 1 more than that shot's point remain.

### Examples

```
$ ./ch-2.pl 4
1 3
1 1 2
1 1 1 1
1 2 1
2 2
2 1 1
3 1

$ ./ch-2.pl 5
1 1 3
1 1 1 2
1 1 1 1 1
1 1 2 1
1 2 2
1 2 1 1
1 3 1
2 3
2 1 2
2 1 1 1
2 2 1
3 2
3 1 1
```
I developed accounting application as a personal project
Tags: laravel, react, typescript
Published: 2021-07-24 06:12:44

## Application links
front-end
https://github.com/nobu0605/accounting-application
back-end
https://github.com/nobu0605/accounting-application-api

application
https://accounting-application-front.herokuapp.com

## Why I developed
I had worked as a back office staff for 3 years half before I became a software engineer.
I'm still interested in accounting, so I developed it this time.

## Features
・Localization
You can choose English and Japanese.

Japanese
![スクリーンショット 2021-07-24 14.50.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243749/ae061459-5869-ecab-61c5-a1cce78fe13d.png)

English
![スクリーンショット 2021-07-24 11.52.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243749/11e1c6b4-132f-40f8-be3f-2711ba93c1e8.png)

・Transfer slip
You can input a journal.
![スクリーンショット 2021-07-24 11.56.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243749/31bee98a-ec21-242e-844f-b65b42669053.png)

・Financial report
![スクリーンショット 2021-07-24 11.57.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243749/71d1b70c-3a36-c6ef-8f65-e9780ce8f2df.png)

・Journals
![スクリーンショット 2021-07-24 11.57.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243749/4ddc8a49-5c71-d8c3-e208-0c92c0d49bd1.png)

## What technology I used
・Front-end
React version 17.0.1
Typescript version 4.0.5

・Back-end
Laravel Framework 6.20.4
PHP 7.3.24
MySQL 5.7

・CI/CD 
GitHub Actions

・Server
Heroku

・ER diagram　
https://drive.google.com/file/d/14r1bxllKWg7Ih6xf9yeYxHyRrDL5FkrU/view?usp=sharing
We got a tailwind CSS template
Tags: rails, tailwindcss, opensource
Published: 2021-07-24 05:53:45


I'm used to use Bootstrap CSS framework, I have been wanted to work with tailwind and today I did it, it was shocking to get it working and I'm not sure if it was my computer or me but I felt it slow. I need to do more research about it.

Well, we finally have the Tailwind Layout. 


![Tailwind Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dypfc36blhgkn2qygqs.png)


[Better Dev](https://www.youtube.com/channel/UCmXVXfidLZQkppLPaATcHag) Thank you for this useful [tailwind tutorial.](https://www.youtube.com/watch?v=DOOoS6GHDw8)
:party:
Which of these class is superclass of every class in java
Tags: javascript, java, programming
Published: 2021-07-24 05:52:28

#Overview classes in java:#

**Today** we know about classes and superclass in Java. You may have heard about classes and objects while learning programming language.  Many students know a lot about this. And some students are still some students who understand Java as a very difficult programming language and they do not understand the objects and classes at all. Today I will explain to you in very simple words.To create an object, it is necessary to first create its general form with the help of class keywords. Once you have created the structure of the class, then you can create an object of its class type.  It's just like you create a structure type structure variable. If you want to call a class member function from within the program that is not part of the class, you first need to name the object and dot operator.  Object Oriented Programming Methods Before you start your program, you should have a thorough knowledge of the object used in it and the factors above it. Let's practice and try to understand more.  


**1.Superclass of every class in Java?**
a) String class
b) Object class
c) Abstract class
d) ArrayList class

**Example:**
```
public class Test {
   public static void main(String args[]){
      Test obj = new Test();
      Class cls = obj.getClass().getSuperclass();
      System.out.println(cls.getName());
   }
}     
      
          Output will be:
           Java.lang.object
```
Minimal Notepad using Python (Tkinter)
Tags: python, tkinter, gui, notepad
Published: 2021-07-24 05:05:00

![D-Pad](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3b4bax0f7l4mz6lnp6n.png)

{% github iDCoded/D-Pad %}

## Lightweight Notepad made with **Python**

This is a personal project of mine made for a Hackathon, 
It is a lightweight Text Editor made using Python & Tkinter. 

It would mean a lot to me if you would have a look at my project and give it a **Star**.
Also, feel free to Contribute to the project and add new features.
Python Tkinter Standalone Application
Tags: python, tkinter, application, gui
Published: 2021-07-24 04:35:31

If any one has made a TKinter application and wants to convert it to an executable, here's how you can do it.

For this, we will be using `Pyinstaller`
### Installing `Pyinstaller`
`pip install pyinstaller`

### Converting to Executable
Once you have installed `Pyinstaller`, there is just one more step remaining.

- Locate to the directory where your `.py` file is located. (The Python program you want to convert to application)
- Open the `Command Prompt` in that directory. 
    - Quick Tip: in the **File Explorer**, click on the Address Bar and type `cmd` to open the **Command Prompt** in that directory.
- After that, type this command in the **Command Prompt**
`pyinstaller --onefile --windowed --icon=<your-icon.ico> <file.py>`

#### Explaining the command:

- `pyinstaller` : To bundle the Python application and all its dependencies into a single package.
- `--onefile` : To have just one Executable file.
- `--windowed` : This will not open the Terminal every time you run the app.
- `icon` : Set the icon of the app.
- Write the name of your file to be converted to an Executable.


If this helped you, you can follow me on [GitHub](https://github.com/iDCoded) and have a look at my projects and star them.
How do I find my work flow ?
Tags: beginners
Published: 2021-07-24 02:27:15

I find myself currently at a stand still with learning. My biggest problem I have is trouble figuring out a work flow for the day. Should I go threw a few sections on Udemy , should I just start coding , should I go threw my trouble areas and practice that , should I do some challenges and reading on freecodecamp or code academy. I just feel like I'm all over the place. How did you find a work flow that works?
How to use kebab case for class name of css in Next.js
Tags: nextjs, css
Published: 2021-07-24 02:19:47

## Precondition
If I write kebab case like below, it will be error.
```
className={styles.company-logo}
```
## Solution
This will work.
```
className={styles['company-logo']}
```

Reference
https://stackoverflow.com/questions/61794899/using-kebab-case-css-classnames-in-css-sass-modules-when-using-next-js
useClickOutside - React Hook
Tags: codesandbox, react, webdev, frontend
Published: 2021-07-24 01:59:16

This is a series of tying out the custom hooks introduced in the really good article by [team] (https://thesmartcoder.dev/author/team/) about useful React custom hooks.

[8 Awesome React Hooks](https://thesmartcoder.dev/awesome-react-hooks/)

### useClickOutside

The text inside the box changes only when you click outside of the box

{% codesandbox 0vtrv %}
Is my career my life?
Tags: career, motivation, beginners, webdev
Published: 2021-07-24 01:58:09

---
title: Is my career my life?
published: true
description: I was wondering about that. Is it true? Does it happen to you too?
tags: career, motivation, beginners, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eicczwf7kmwf7zga3bi4.png
---

When someone asks you "who are you?", the first thing that you might think to say is your title, like "I'm a doctor" or "I'm an engineer." But, is that really you? Are you your title and is your career your life?

I mean, I'm not judging. I just want to put the cards on the table. Try to think about that.

In my case, probably the answer would be **YES**.

I built my life around my career. I'm not sure if it's bad or not. But I did.

I made a lot of sacrifices to be where I am now. I changed everything and almost everyone around me in favor of my career. Most of these changes I did and not realized them.

> My life dream was to get a degree. So when I was at university I put this goal in front of any other. No matter how hard I needed to study. I did not relax til I realized this goal. At that time, my degree was my life. 

I was really focused on finishing my studies. So I stopped to going out at night, stopped seeing some friends, stopped talking with loved ones and I did not realize that. 

*I changed myself and my lifestyle in favor of this goal.*

I really don't miss most of those things. Go to parties at night and expend my sleeping hours on that? Thanks, but not anymore.

My degree was just one step toward the **main goal**: my dev career. 

After I got that, I had **another goal**: work with a hot tech and be better paid. So I started to focus on this goal, staying at home most of time and not caring about anything else.

I spent a lot of weekends building projects just to practice and getting better at that. Hang with friends? Not really. Nothing was more important than showing Captain Marvel comics using React. (I loved that project)

*So I changed my weekends to achieve this, and I did.*

**Next goal**: talk in english with confidence. 

So, I changed everything around me to English: smartphone, MacBook, TV shows. If something could be in English, it is now. 

I never liked to watch TV series, I always saw that as a waste of time. But I changed my mind just to study English and practice my listening skills. So again, I changed myself in favor of a goal.

It is clear for me that my career is my life, because I built and shaped it around me. Of course I had a lot of losses on that. But most were wins.

Is it dangerous to think this way? Maybe. **I'm not a workaholic and no one should be.** But of course to achieve some goals in life, I think you have to change yourself. In my case it has been worth it.

Now I just can't see myself only as Jeniffer. 

*I'm a happy and proud software engineer, and by the way my name is Jeniffer.*
useClickInside - React Hook
Tags: codesandbox, react, webdev, frontend
Published: 2021-07-24 01:44:29

This is a series of tying out the custom hooks introduced in the really good article by [team] (https://thesmartcoder.dev/author/team/) about useful React custom hooks.

[8 Awesome React Hooks](https://thesmartcoder.dev/awesome-react-hooks/)

### useClickInside

The text inside the box changes only when you click inside the box

{% codesandbox du1p5 %}
Separation of concerns: Templates, Component
Tags: programming, frontend, webdev
Published: 2021-07-24 01:09:14


[Pete Hunt: React: Rethinking best practices -- JSConf EU - YouTube](https://www.youtube.com/watch?v=x7cQ3mrcKaY&list=WL&index=1&t=6s)

## What is "Separation of concerns"
- the idea that each module or layer in an application should only be responsible for one thing
- Reduce coupling, Increase cohesion
  - coupling: each modules relies on each of the other modules, cascading changes
  - cohesion: elements of a module belong together

## Templates
- Templates encourage a poor separation of concerns
- "View model" tightly couples templates to display logic
- display logic and markup are inevitably tightly coupled
- display logic and markup are highly cohesive
- Templates separate technologies, not concerns

## React Component
- A highly cohesive building block for UIs loosely coupled with other components
- composable

## Take aways

Separation of concerns !== Separate technologies
Merge Sort
Tags: algorithms, javascript, tutorial
Published: 2021-07-24 00:43:09

Currently going over some algorithms and wanted to create a short walkthrough video. 

Here is the code used in this video.

```javascript
function merge(arr1, arr2) {
  let results = [];
  let idx1 = 0;
  let idx2 = 0;
  while (idx1 < arr1.length && idx2 < arr2.length) {
    if (arr1[idx1] < arr2[idx2]) {
      results.push(arr1[idx1]);
      idx1++;
    } else {
      results.push(arr2[idx2]);
      idx2++;
    }
  }
  while (idx1 < arr1.length) {
    results.push(arr1[idx1]);
    idx1++;
  }
  while (idx2 < arr2.length) {
    results.push(arr2[idx2]);
    idx2++;
  }
  return results;
}

function mergeSort(arr) {
  if (arr.length <= 1) return arr;
  let mid = Math.floor(arr.length / 2);
  let left = mergeSort(arr.slice(0, mid));
  let right = mergeSort(arr.slice(mid));
  return merge(left, right);
}
```
5 Helpful Python Math Module Methods
Tags: python, beginners, codenewbie, programming
Published: 2021-07-24 00:38:10

Hi, my name is [Aya Bouchiha](https://t.me/AyaBouchiha), today, we are going to discuss 5 methods from the math module that you will probably use in your next project!

If you are a *javascript developer*, I recommend to you this article:

+ [Your Complete Guide To Math Object in Javascript](https://dev.to/ayabouchiha/your-complete-guide-to-math-object-in-javascript)


## math.floor()

**math.floor()**: rounds a number down to the nearest integer.

```python
import math

print(math.floor(2.3)) # 2
print(math.floor(1.89)) # 1
print(math.floor(7.5)) # 7
print(math.floor(-10.14)) # -11
```

## math.ceil()

**math.ceil()** rounds a number up to the next largest integer.

```python
import math

print(math.ceil(2.3)) # 3
print(math.ceil(1.89)) # 2
print(math.ceil(7.5)) # 8
print(math.ceil(-10.14)) # -10

```

## math.trunc()

**math.trunc()**: returns the integer part of a number by deleting any fractional digits. 

If you're confiused with *math.trunc()*, *math.floor()* and *math.ceil()*, you need to know that *math.trunc()* plays exactly the role of **math.floor()** when the giving number is **positive**, and It play the role of **math.ceil()** if the giving number is **negative**.

```python
import math

print(math.trunc(0.000000000000000001)) # 0
print(math.trunc(2.5)) # 2
print(math.trunc(8.999999999999999999)) # 9
print(math.trunc(-7.8)) # -7
```

## math.sqrt()

**math.sqrt()**: returns the square root of the giving **positive** number.

```python
import math

print(math.sqrt(4)) # 2.0
print(math.sqrt(25)) # 5.0
print(math.sqrt(100)) # 10.0
print(math.sqrt(16)) # 4.0
```

## math.degrees()

**math.degrees()**: this method returns the degrees of a given angle in radians.

```python
import math

pi = math.pi 

print(math.degrees(1)) # 57.29577951308232
print(math.degrees(pi)) # 180.0
print(math.degrees(pi / 2)) # 90.0
print(math.degrees(pi / 4)) # 45.0

```

## Reference

+ [www.w3schools.com](https://www.w3schools.com/)

Hope you enjoyed reading this post, Have a nice day!


+ email: developer.aya.b@gmail.com
+ telegram: [Aya Bouchiha](https://t.me/AyaBouchiha)