teleren/devto huggingface dataset:
Semantic UI on React
Tags: sematicui, react, codenewbie
Published: 2021-06-06 07:02:24

As we go towards the goal of coding daily, I have tried to learn applying Semantic UI on a React App!

There are so many things to learn to reach my goal of being a pro in frontend development, and I learn best on application!

###Installation###

```
npm install semantic-ui-react semantic-ui-css
```
OR <br/>
Add this script inside the `<head>` tag of your index.html.
 ```html
<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
```

I wanted some mock user data but since this is just a frontend development exercise, I just went with a faker gem!

Instructions and specifications are here on it's repo - [Faker Github repo](https://github.com/marak/Faker.js/).

Let's install it!
```
npm install --save faker
```
Then let's import it to one of our components.
```javascript
import faker from 'faker';
```
In your component you can call the faker gem like so;
```
<img src={faker.image.imageUrl()} alt="avatar"/>
```
You can utilize the faker gem in so many ways! For mock email address, photos, names, words etc. Example:
```
let randomName = faker.name.findName(); // Rowan Nikolaus
let randomEmail = faker.internet.email() //Kassandra.Haley@erich.biz
```
I wanted to add a big avatar photo like a profile page, so I looked up and found this repo for image variations for the Image component from Semantic UI.
[Avatar variations](https://gist.github.com/tuur29/2daf51872917b6143f439c01f922364b)
Once you choose one, I applied it to my code like so;
```html
<img src="https://semantic-ui.com/images/avatar2/large/elyse.png" className="ui medium circular image" alt="avatar"/>
```
Don't forget to specify the size on the url. In my case, I chose large. I also used the className, ui medium circular image, for is to be cropped circularly without the need for border-radius.

![screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7mj31cgc9pqq9o3mpne.png)
The container at the bottom I used is one of Semantic UI's component called [Card](https://react.semantic-ui.com/views/card/).

At the very bottom of the page you'll see a list of people who have interacted with our mock user. 
![mock user feed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxfpos9rcbtd0sqriimh.png)
It is amazingly just a component by Semantic UI which is called [Feed](https://react.semantic-ui.com/views/feed/). In combination of the faker gem we installed, I also utilized it on the "photos" 'Justin Kitsune' added.

In code, here's how I utilized the faker gem.
```html
<img src={faker.image.image()} alt="avatar" /> //generates any random image they have on the database.
```

And that is it! There are so much things to apply and definitely this can be improved. This blog is in purpose of just showing what I learned in applying a frontend library I've never get a chance to use before. 

Here's the deployed version of my app if you want to see it live! [Semantic UI App](https://will-it-deploy.netlify.app/)

####What's your favorite Semantic UI component and have you made an app with it? Let me know in the comments below!####
Algorithms: Recursion
Tags: computerscience, algorithms, beginners, progr
Published: 2021-06-06 06:51:09

There are just way to many algorithms in the world. 

Fortunately, you don't have to learn them all. 

They all mostly come in certain types.

One of these types is recursion. 

That's what we will be discussing today.

What you will learn today:

- What is recursion?
- Recursive algorithms

## Recursion

Recursion put simply is when a function calls itself. 

But why would it do that?

Because it breaks down the problems into subproblems.

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

This is the main premise of recursion, breaking down big problems into subproblems.

Here's a simple example:

```jsx
function countDown(num){
  if(num == 0){
    return console.log(0)
  }

  console.log(num)
  countDown(num - 1)
}
```

## Recursive Algorithms

There are many algorithms that use recursion but the most notable ones are:

- Merge Sort
- Quick Sort
- Binary Search
- Greatest Common Divisor (GCD)

## Conclusion

Today was a pretty simple post, we learned what recursion is, and what algorithms use it. I hope you learned something today, and stay tuned for next week.
Is Game Devlopment a good career in 2021
Tags: gamedev, programming, devmeme, python
Published: 2021-06-06 06:37:58

#Hey There,
Tired and exhausted Dev's. I am Tirth here your one and only game blogger here.So, today we are taking about something serious its about my or your career, that is game dev a good and demanding career in 2021. Share your answer in the comments down below.

**So, first let's talk about our main interest, that is salary:**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4d53strkogi2ii79c8gn.png)

Video game designers earn an average of $40.13 per hour, monthly salary start from $3,559 and go up to $11,227. A average game developer makes $78,499 per year? That's valued at $37.74 per hour! The range surrounding that average can vary between $59,000 and $103,000, meaning game developers have the opportunity to earn more once they move past entry-level roles.
Though being a Gamedevloper is as hard as anyother field in coding or programming.You have bear the stress and invest your time learning it, and after all of that you will get your results.

**Now comes the demand for game dev:**
Demand for Video Game Designers is expected to go up, with an expected 7,940 new jobs filled by 2018. This represents an annual increase of 11.59 percent over the next few years.
Personal requirements for a Games Developer
Aptitude for computing.
Creative and artistic flair.
Commitment to understanding and using new technology.
Good communication skills.
Aptitude for drawing.
Understanding of colour and form.
Able to work as part of a team.

Thats all for today guys and is you are intrested in this type type of blogs and content then do make sure to follow me here on dev. And if you like gaming then pls subscribe to my youtube channel [here](https://www.youtube.com/channel/UC1sE6NRQT5zbgzq9tRhQRlQ)

##Thnks(in slang opps)
Adding a link to your console.log in Javascript
Tags: javascript, hyperlinks, console, log
Published: 2021-06-06 06:36:59

Many of us as JS devs have come across hyperlinks in the output of console.log which when clicked navigates to a page or url (usually in your terminal when running `npm run start` or in your browser console when debugging your app written in [React](https://reactjs.org/) or [Vue](https://vuejs.org/)).

![Sample console log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kl945fy4s47659zt7uk5.png)

Well creating this is rather simple:
```javascript
console.log('http://mysite.com');
console.log('www.mysite.com');
```
all you need to do is to have a valid link in the url and thats it. It works.

Below are some options that will not work:
```javascript
console.log('example.com');
console.log('<a href="http://www.example.com">Link</a>');
```

Thanks for reading.
Overriding Armbian's "it is based on a dictionary word" during setup
Tags: linux, armbian, pi
Published: 2021-06-06 05:31:11

This is a simple instruction to help you override the Armbian's setup utilities that require your password to be long and not a dictionary word.
![2021-06-06_13-18-28](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qppy750irwavbfh3asep.png)
 
## Instructions
1. Think of a disposable, long password and write it down in Notepad or other text editor
2. Use it as your new root password
3. Create a primary user account and use the same password for the account password.
4. Finish and exit the the setup utilities
5. Now, you should be able to enter commands using the user "root". Use the following commands to change the password for "root" and your newly created user
```
passwd root
(Follow on screen instruction to type in your less secure password)

passwd your_newly_created_user
(Follow on screen instruction to type in your less secure password again)
```
![2021-06-06_13-29-29](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1bx62krzl2kw5xy4k4e.png)
 

## Why would you want to do this instead of using a secure password?
There might be some debate on why you would want your password simple instead of using a complex one to improve security. 
In my case, I am setting up an environment on ZeroPi that try to match the Raspberry Pi OS in which it is easier for students to get started with Raspberry Pi's teaching materials (And one of them is the default user "pi" with password "raspberry"). But in general if you are using this system yourself, I would recommend a more complex and secure password for root instead.
Web based terminal - Project Demo
Tags: react, socketio, webbasedterminal
Published: 2021-06-06 05:11:22

Hey folks,

I am trying to make a web based terminal. In which you can run a command and that command execute on your server.

### Idea behind project
We know that server run on different operating systems and each operating system has their own basic utility to get useful information and also has some useful tools to monitor CPU and RAM usage, etc. These tools and utilities run through a terminal/CLI. You can use that terminal through my web app to get information about your server system. Mobile client can support also, so no need to open computer, just open the app and type command whatever you want :smile:.

### Technical details
Techs are React for frontend and NodeJS, socket.io and child_process modules for backend. There is on any emulator concept. Terminal commands are depends on server's operating system (I make it for my local server, so it supports windows commands),

### How project works?
There is a simple concept of **child process**. For each socket, I create a new child process using the spawn function, which is running terminal executable file("cmd.exe" for windows). Now through socket event, I send input command to standard input of child process and get back standard output/error and send it to client.

YouTube Demo: https://youtu.be/JrIg-IOaw1U

{% youtube JrIg-IOaw1U %}

GitHub Link: [Html and Terminal](https://github.com/Utsav-Ladani/Html-and-Terminal)

{% github Utsav-Ladani/Html-and-Terminal %}
BladeTail-UI - The Blade UI components with Tailwind CSS and Alpine JS
Tags: laravel, blade, tailwindcss, alpinejs
Published: 2021-06-06 05:10:34

In this article, we will know about the new package for laravel called BladeTailUI. the BladeTailUI package is the blade UI components with the Tailwind CSS and the alpine js.

Nowadays, Laravel and its package jetstream with livewire stack mainly use TailwindCss for styling. So, this package more helpful to create a UI.

This package has basic elements like buttons, inputs, select, dropdown, tabs, as blade components with the style based on TailwindCSS. So, you can easy to use it.

[Read full documentation here...](https://bladetailui.com)
Data HK - Keluaran HK - Pengeluaran Hongkong - Hasil HK
Published: 2021-06-06 05:09:47

http://165.232.175.43/data-hk-tercepat/ >> Data HK merupakan rangkuman salah satu data pengeluaran togel hongkong yang di sajikan atau kami tampilkan dalam bentuk tabel, Keluaran Hongkong / HK yang kami tampilkan di situs ini merupakan hasil keluaran hk yang kami berikan diambil langsung dari Hongkongpools.com sebagai situs resmi dari Togel Hongkong.

Dengan berbagai aspek yang sudah kami pertimbangkan, kami membuat situs atau link ini guna membantu para pemain Togel Hongkong dalam mengetahui Data Pengeluaran HK hari ini secara tepat dan cepat, disini kami akan memberikan Keluaran HK Terbaru untuk sobat pecinta Togel Hongkong setiap harinya.

Pengeluaran HK yang kami berikan merupakan salah satu rangkuman data hongkong dari Tahun 2019 sampai Tahun 2020, Disini kami memberikan data tahun 2019 dan 2020 berharap dengan data tersebut para pemain Togel Hongkongpools sekalian bisa meracik angka togel hongkong untuk putaran berikutnya.
LIVE DRAW HK TERCEPAT
Tags: datahk, resulthk
Published: 2021-06-06 05:08:22

Data Hongkong Terbaru – atau Data hk adalah situs keluaran data hongkong yang paling banyak dicari oleh para pecinta judi togel Hk. Tanpa bantuan dari situs keluaran data hongkong para pecinta togel online akan kesulitan untuk mengetahui angka resmi yang keluar dari situs hongkongpools. Klik Link >> https://bit.ly/3x0ZIgq
 

Hongkong Pools akan mulai melakukan pemutaran bola biasanya pada pukul 22.35 WIB dan akan berakhir pada pukul 23.00 WIB. dan Secara resmi situs kami juga akan langsung melakukan update Data Hongkong Terbaru dengan otomatis dan cepat 

Dengan beberapa aspek dan sudah kami pertimbangkan, maka kami membuat Situs atau website ini untuk membantu para pemain Togel Hongkong dalam mencari Data Pengeluaran Hongkong hari ini secara cepat dan akurat, di sini kami akan memberikan data Keluaran HK Terbaru untuk para pecinta Togel Online setiap hari.
Why all developers should learn how to perform basic network troubleshooting
Tags: career, devops, programming, beginners
Published: 2021-06-06 04:51:03

---
canonical_url: https://blog.mattchung.me/2021/06/06/why-all-developers-should-learn-how-to-perform-basic-network-troubleshooting/
---
Regardless of whether you work on the front-end or back-end, I think all developers should gain some proficiency in network troubleshooting. This is especially true if you find yourself gravitating towards lower level systems programming. 

The ability to troubleshoot the network and systems separates good developers from great developers. Great developers understand not just code abstraction, but understand the TCP/IP model:

![OSI and TCP/IP model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjopozu278ydhdb5yhxp.png)

Source: https://www.guru99.com/tcp-ip-model.html

## Some basic network troubleshooting skills

If you are just getting into networking, here are some basic tools you should add to your toolbelt:

* Perform a DNS query (e.g. `dig` or `nslookup` command)
* Send an ICMP echo request to test end to end IP connectivity (i.e. `ping` command)
* Analyze the various network hops (i.e. `traceroute X.X.X.X`)
* Check whether you can establish a TCP socket connection (e.g. `telnet X.X.X.X [port]`)
* Test application layer (i.e. `curl https://somedomain`)
* Perform a packet capture (e.g. `tcpdump -i any`) and what bits are sent on the wire

## What IP address is my browser connecting to?

```
% dig dev.to

; <<>> DiG 9.10.6 <<>> dev.to
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 39029
;; flags: qr rd ra; QUERY: 1, ANSWER: 4, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 512
;; QUESTION SECTION:
;dev.to.				IN	A

;; ANSWER SECTION:
dev.to.			268	IN	A	151.101.2.217
dev.to.			268	IN	A	151.101.66.217
dev.to.			268	IN	A	151.101.130.217
dev.to.			268	IN	A	151.101.194.217
```
## Is the web server listening on the HTTP port?

```
% telnet 151.101.2.217 443
Trying 151.101.2.217...
Connected to 151.101.2.217.
Escape character is '^]'.
```

Each of the above tools helps you isolate connectivity issues. For example, if your client receives an HTTP 5XX error, you can immediately rule out any TCP level issue. That is, you don't need to use `telnet` to check whether there's a firewall issue or whether the server is listening in on the right socket: the server already sent an application level response.

## Summary

Learning more about the network stack helps you quickly pinpoint and isolate problems:

* Is it my client-side application?
* Is it a firewall blocking certain ports?
* Is there a transient issue on the network?
* Is the server up and running?

### Let's chat more about network engineering and software development

If you are curious about learning how to move from front-end to back-end development, or from back-end development to low level systems programming, hit me up on Twitter: [@memattchung](https://twitter.com/memattchung)
LeetCode 424. Longest Repeating Character Replacement
(javascript solution)
Tags: algorithms, javascript
Published: 2021-06-06 04:38:07

###Description:
You are given a string s and an integer k. You can choose any character of the string and change it to any other uppercase English character. You can perform this operation at most k times.

Return the length of the longest substring containing the same letter you can get after performing the above operations.

###Solution:
Time Complexity : O(n)
Space Complexity: O(n)

```javascript
var characterReplacement = function(s, k) {
    // Keep count of all the characters in the string
    const chars = {}
    // left pointer, character with the current max frequency, return value
    let left = 0, maxf = 0, output = 0
    for(let right = 0; right < s.length; right++) {
        const char = s[right]
        // Increment count of the current character
        chars[char] = 1 + (chars[char] || 0)
        // Update the character frequency
        maxf = Math.max(maxf, chars[char])
        // Shrink the window of characters we are looking at until we can have a window of all the same characters + k charcters to change
        while((right-left+1) - maxf > k) {
                chars[s[left]] -= 1
                left++
          }
        // Update the output if the current window is greater than our previous max window
        output = Math.max(output, right - left +1)
    }
    return output
};
```
The WebDev Technology Stack
Tags: node, laravel, adonis, nest
Published: 2021-06-06 04:23:44

Hello how are you?

Before we start, sorry if you don't understand English much, I'm from Argentina and I did this article with google translate.

##Introduction:

I am one month away from starting a project in my company and it is a fairly large project that would receive hundreds of thousands of requests per minute.

We are deciding technologies, previously projects had been developed in Lumen and Java, this is not possible to migrate because it was not developed correctly and now the company wants to establish a stack of technologies in which all projects will be developed from here on.

##My reserched options:

In the last 2 weeks I have been researching and saw the following:

- **Laravel**: Today it is not very common for PHP to be taught in schools and on the other hand it is a bit slow technology. Of course, the Octane package just came out and paints to exceed or at least reach the speed of the same web developed in Node. Meanwhile php is being less supported every day and despite the push it has been having with Laravel I think it will be left behind with the release of new Node frameworks.

- **AdonisJS**: It is a Laravel in Node, but today it has almost no community, even though I read that its discord is very active.
And it's still very young.

- **NestJs**: It is the most popular Node framework, I understand with which all kinds of rest apis can be developed. It also offers Fastify which is very convenient over Express due to support for asynchronous calls. I want to clarify that it is the one that investigates the least.

##The other part of the stack:

The idea would be to use ReactJS for Front and React Native for Mobile development.

I am also thinking of using InertiaJS or NextJS.

We are implementing Docker and Kubernetes.

##The question:

My question is directed for you to comment without choosing sides, trying to be as impartial as possible.

**What Technology Stack would you use?**

**Greetings and thank you very much for reading.**
How to host a data driven blog from Jupyter notebook to here
Tags: jupyter, blogging
Published: 2021-06-06 03:38:27

## Pushing from Google colab

If you work with Google Colab notebooks,  you can either copy and paste the link to the notebook as in here:

[Colab notebook link](https://colab.research.google.com/drive/11b3fV6Z2cOqoEQrITrSTuoyEcgk-Ux7f?usp=sharing)

This is workable, but not quite the thing I was looking for. Then I tried with Deepnote. 
It was the same thing. I could copy paste from each cell and paste here. They gave me a couple of ways to share the notebook, both of them roughly equivalent and not too much different from what Google Colab allowed me.

[Deepnote notebook link](https://deepnote.com/project/Blogging-from-Deepnote-lr07jfiRR-Ke0t2dOxfWuw/%2Fnotebook.ipynb)

Or one can paste a viewable link, as in here:

[Deepnote view/edit link](https://deepnote.com/@arindam-basu/Blogging-from-Deepnote-lr07jfiRR-Ke0t2dOxfWuw)

The other alternative would be to copy paste from each cell here. A better way might be to work on a hosted jupyter notebook and paste from there to here. 

It is possible that for both Google Colab and Deepnote, I could export the documents as `ipynb` files and then do something like `pandoc -f ipynb -t markdown filename.ipynb` and work with it. 

## Exporting a notebook from hosted Jupyter notebook

Working with a self-hosted jupyterlab/jupyter notebook is more straightforward. I could run the analyses, and then I was able to directly export the notebook as markdown file and copy paste from the file. All images can be directly pushed into this editor. 

```python
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import seaborn as sns
```
```python
x = [1,2,3,4,5]
y = [3,4,5,6,7]
xydata = pd.DataFrame({"x":x, "y":y})
xydata.head()
```
<div>
<style scoped>
    .dataframe tbody tr th:only-of-type {
        vertical-align: middle;
    }

    .dataframe tbody tr th {
        vertical-align: top;
    }

    .dataframe thead th {
        text-align: right;
    }
</style>
<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>x</th>
      <th>y</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>1</td>
      <td>3</td>
    </tr>
    <tr>
      <th>1</th>
      <td>2</td>
      <td>4</td>
    </tr>
    <tr>
      <th>2</th>
      <td>3</td>
      <td>5</td>
    </tr>
    <tr>
      <th>3</th>
      <td>4</td>
      <td>6</td>
    </tr>
    <tr>
      <th>4</th>
      <td>5</td>
      <td>7</td>
    </tr>
  </tbody>
</table>
</div>

```python
%matplotlib inline
plt.scatter(x,y)
plt.plot(x,y)
```
![output_2_1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hahhg440ugvh4ixgs2cg.png)