teleren/devto huggingface dataset:
How to create a reusable HTML table in React
Published: 2022-05-16 18:26:34

Here is code to display an HTML table in React. I assumed the first row to be a table header. This may not  work for some cases where there may more than one table header. I kept the .css file simple.

```javascript
import React from "react";
import "./DisplayTable.css";

const Table = (props) => {
  let body = props.body;
  let heading = props.heading;

  return (
    <table>
      <TableHeader heading={heading} />
      <tbody>
        {body.map((row, index) => (
          <TableRow key={index} row={row} />
        ))}
      </tbody>
    </table>
  );
};

const TableRow = (props) => {
  let row = props.row;
  return (
    <tr key={row}>
      {row.map((val, index) => (
        <td key={index}>{val}</td>
      ))}
    </tr>
  );
};

const TableHeader = (props) => {
  let heading = props.heading;
  if (heading) {
    return (
      <thead>
        <tr>
          {heading.map((head, index) => (
            <th key={index}>{head}</th>
          ))}
        </tr>
      </thead>
    );
  }
};

const DisplayTable = (props) => {
  // convert each row of data to an array of rows
  const body = Object.entries(props.value).map(([key, value]) => {
    return value.split(" ");
  });

  // take first row off to get table data
  body.shift();

  // get first row off to make table headings
  const firstRow = props.value[0];
  let heading;
  if (firstRow) {
    heading = firstRow.split(" ");
  }

  // make an array of strings
  return <Table body={body} heading={heading}></Table>;
};

export default DisplayTable;

```
DisplayTable.css

```
td {
  text-align: right;
}

```
Complete game development blog #1: Movement
Tags: csharp, unity3d, gamedev, beginners
Published: 2022-05-16 17:48:25

Some outlines that I already know about the game include the gameplay loop, which will include the strategic overview where you manage resources and soldiers, and the tactical on-the-ground gameplay. I also knew I wanted to start with making the tactical side first. And with that I started developing the character movement. This is what I initially threw together.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7sl5plclaqgfyv9ce9d.png)

Which immediately imposed a design question that I was not ready to answer. Diagonal movement. Let me explain.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xw0mfqzmhrhlmia0pv16.png)

This is currently how the movement looks from a top down view, if a character can move 3 squares. The problem here is that diagonal movement is extremely slow. It takes twice as long to move diagonally. Let's look at a potential solution.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blol60pkx0keaonqjnre.png)

This is the system that for example Dungeons & Dragons uses. Have diagonal movement cost the same as horizontal and vertical. This of course makes it simpler to count movement in a tabletop setting, but flips the problem on it's head. Now diagonal movement is twice as fast as horizontal and vertical. Better in my opinion, but still rubs me the wrong way. There was one last solution I had played around with in my mind, something like a circle within which a character could move. And sure enough, I wasn't the first one to have this idea.

https://www.redblobgames.com/grids/circle-drawing/

After stumbling on this blog post by Red Blob Games, I knew this is the solution I want to go with. It too like everything, is not perfect, and leaves some design questions to be answered. Is a tile able to be walked on when the circle hits its edge, or when it's center is inside the circle? Should the radius of the circle be X amount of squares, X amount of squares + ½ square, or can it be something in between.

Regardless, I feel this is the best solution for balancing movement in all directions, and won't feel frustrating suddenly when you need to move diagonally and your legs feel like they're halved. Next, of course, comes implementation.

Git: https://github.com/PuustelliJoona/ufo-defence
LinkedIn: https://www.linkedin.com/in/joona-puustelli-aa031b23a
Dev.to: https://dev.to/puustellijoona
Learn data structures and algorithms by writing code.
Published: 2022-05-16 17:34:32

The title may seem obvious but when learning data structures and algorithms, I find it hard to understand most of them just by reading about the characteristics and what they do. 

I am currently taking the CS course on Codecademy and when they teach data structures they teach you the Conceptual of it and then how it is implemented in a programming language (in this case python). E.g:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lc9plgvh2emw2a3yxhme.png)

And I know some people may not be able to afford courses which is okay, if you know how to find what you need to learn. So you can use YouTube (or some other free learning resources) to do so. 

So if you are learning data structures online I recommend when learning about Linked Lists (or any other structure or algorithm) that you actually implement one in the programming language you want. By doing so it will help you understand them much easier.
Google Tasks Chrome Extension
Tags: html, javascript, css, vscode
Published: 2022-05-16 17:25:26

Google Tasks ,  We can see this feature in gmail and mobile app . Now, came to you as google chrome desktop Extension.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtq984a8n6bqlbbue0bk.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hr0y1k6p2908qog0778y.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j40fee3i7d2cphx3e6t7.png)
---

A Demo ⬎

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/el1d1i1rfsp82zc1owi9.gif)

---
Github ⮕ [Google-Tasks-Chrome-Extension](https://github.com/junaidcodingmaster/Google-Tasks-Chrome-Extension)

Made By ⮕ **[Junaid](https://abujuni.dev)**
Back in Action!
Tags: writing, programming, news
Published: 2022-05-16 17:24:00

Hi everyone, thank you for your patience while I was busy with exam season and taking a break from that. 

---

I have mentioned it on my [twitter](https://twitter.com/EWNaidoo) (follow if you like my stuff) that I will be posting soon and unfortunately it was not as soon as I hoped, but I'm happy to say that I am back to researching and posting my findings online! I am still interested in Solidity and the inner-workings of Web3, but because it has been so long, I might have to revise and edit my articles. Maybe add more re-done versions that are up to date. 

--

Before I used to post almost every two days, but school is taking a lot of energy and some days I just don't do work, hope you understand. But now I'm planning on extending the times I am posting to like a couple per week so I can research even more within that time. 

That's about it from me, cya soon!
How To Color Switch An SVG in Flutter?
Tags: flutter, dev, programming, tutorial
Published: 2022-05-16 17:21:23

Have you ever thought of color painting an SVG file as a flutter developer? Whoa! Wait, what did I say? I think my tongue got slipped out, or maybe I put too much butter on the bread. Hey, don't overthink; you might get 🧊brain freeze!

✨Don't worry; we'll be covering a detailed solution in this in this [blog](https://zujaj.hashnode.dev/how-to-color-switch-an-svg-in-flutter) just for you.

Thanks, [Hashnode](http://hashnode.com/) for introducing such a promotive competition.

P.S: I just participated in the #TheHashnodeWriteathon & wrote this tutorial article. I hope you'll like it. Your feedback can help me win this contest.
What do you look for on a team page?
Tags: career, discuss, startup
Published: 2022-05-16 17:05:24

I am working on adding a team page to our company's website and I'm wondering:

- can you recall an example of a team page that'd just really lovely/informative/awesome?
- what information do you look for on such a page? is it helpful at all?
- when do you typically check team page?

Thank you!

From my side, I remember that [React team page](https://reactjs.org/community/team.html) helped me with my OSS contributions because I noticed they are just humans with hobbies 😂 

I also remember visiting [UPchieve's](https://upchieve.org/team) team page and "getting to know" the folks who make the team when I interviewed there. I looked at the skills distribution and roles, as well as the demographics. I wanted to imagine what working there could be like given the size of different working groups. 

(not relevant but while I decided to take another offer, I think about the UPchieve interviewing experience only fondly)
Devs earn 11.5% more at late-stage startups vs. public companies [survey]
Tags: salary, career, startup, survey
Published: 2022-05-16 17:04:57

If you're looking to take home a bigger paycheck, you might want to consider working for a late-start startup. According to our recent survey, remote developers working at late-stage startups earn the most. Examples of companies that have reached Series C to D funding include Notion, Loom, Deel, Algolia, and FireBlocks to name a few.

Remote developers in the US reported earning 11.5% higher salaries at Series C and D startups ($145,000) than public companies ($130,000). We also observed this trend in Spain and Mexico. 

Why is this the case? 

One reason could be that companies that actually make it to the Series C and D stages of funding are more financially secure and ready to expand to new markets and develop new products. They're eager to attract the best developers and pay top dollar, even poaching them away from larger more established companies.

[Check out the full report here,](https://arc.dev/developer-blog/startup-vs-public-companies-developer-salary-report/) data based on responses from 2800 developers worldwide, for an additional breakdown of global trends. 

![US-Based Remote Developer Salaries](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hl39kotdb4wa5a2d4i3.png)

_These insights were brought to you by the team at Arc.dev, radically different remote job search for developers._
The Use of .forEach()
Tags: javascript, webdev, beginners
Published: 2022-05-16 17:04:28

So JavaScript is full of methods that make coding faster, compact, and readable. forEach() is a method that will help a lot when you have to go through lots of data that has been organized into arrays and objects and processing that data into functions. This is action is a key component for websites as the have to pull data from an API. You don't need to use .forEach() for every piece of data, like if all you need is a name then you can just drill down the array to get the name, but if you want to display a list of friends or list of groceries then you could use it. If you need to make a new list with changes to the original information then its best to use .map(). 

So .forEach() is the same as building a for/of loop that will iterate through an array but easier as you just need to put the array in front of the dot and you pass a function through that will apply itself to every value. You can even use this if you need to go through a nested object by drilling down and then placing the .forEach() at the end.
Why being hands on Technical Helps?
Tags: career, philosophy
Published: 2022-05-16 17:03:11

In one of my interviews, I asked to the hiring manager about how much technical the role will be? Because I wanted to stay close to technology. I am not that smart and can't speak good English to sell myself with stories. I rely on my programming skill to bank on. It is like a rockstar when he or she is on the stage still holds a guitar to get a mental support. They have a band to support. They can simply survive by just singing. To me programming is like that. 

The answer I got is still fresh and will be fresh in my memory. The hiring manager said, "What do you mean by **being technical**? Is it **doing technical** or **talking technical**"

I always ask this to myself. Am I doing technical or talking technical?

Because till I can do technical (aka hands-on technical), I can use it as a guitar which is not producing anything in the final outcome of the orchestra but still I am confident and do not need good spoken language to sell myself. It is very personal choice to me.
Creating thumbnails with parallel and imagemagick
Tags: wallpapers, images, parallel, imagemagick
Published: 2022-05-16 17:02:02

## Intro:

There are some unique commands that leaves us speechless and the imagemagick and gnu parallel are two of them. The imagemagick has a bunch of sub-commands for image manipulation, for example to create a image thumbnail of each image of your wallpapers folder you can run:

```sh
mkdir thumbs
mogrify -format jpg -path thumbs -thumbnail 200x200 *
```

Some convertion operations, depending on the amout of files can consume a lot of processing and memory, so we can use gnu parallel to improve this task:

```sh
[ -d thumbs ] || mkdir thumbs
 fd -d1 -tf | parallel mogrify -format jpg -path thumbs -thumbnail 200x200 {}
```

If the thumbs foldes does not exist we create it `[ -d thumbs ] || mkdir thumbs`, then the `fd -d1 -tf` createds the list of files, the gnu parallel will get each one of the entries and will apply the `mogrify` command.

The option `-d1` ensures that `fd` will only search in the current folder.

## Creating a README.md with thumbnails:

To use image thumbnails in your repo README.md file you must use this notation:

```txt
 [![image alt text](image URL link)](anchor link)
```

```sh
fd -tf  . thumbs  | awk -F/ '{print "[!["$2"]("$1"/"$2")]("$2")"}' > README.md
```

The trick here is to put awk literal strings between double quotes, just for the sake of test run this:

```sh
fd -tf . thumbs | awk -F/ '{print "field one="$1", field two="$2}'
fd -tf . thumbs | awk -F/ '{print $1" test "$2}'
```

## My wallpapers:

Just to see how it will end up being visit my wallpapers:

https://bitbucket.org/sergio/wallpapers/src/main/README.md
The Complete Guide To Creating An Amazing Career For Yourself As An Engineer.
Tags: webdev, beginners, productivity, career
Published: 2022-05-16 17:00:22

Starting a career as an engineer can be an exciting time in your life. As a new engineer, there are plenty of different engineering positions you could pursue but it can also feel overwhelming — because if you make the wrong choice, you’ll be stuck doing something you don’t really want to do.

Engineering managers oversee teams throughout the product design and development process, ensuring that all deadlines are reached. As you may expect, this profession necessitates excellent organization and communication abilities.

Here are some tips for young engineers managers who want to make sure their careers are going in the right direction:

**1. Find a good mentor
**
Undoubtedly, It seems quite obvious — They may be able to offer you tips on how to boost your skills, or what you need to do to take the next step in your career. Have a closer look at an [Engineering community](https://community.lohika.com/home/learn) and seek their guidance to do better and keep your career on track.

**2. Practice project management & Learn a New skill.
**
7 out of 10 engineering managers devote their entire time and effort to enhancing their technical abilities. Technical skills are vital, but as you advance professionally in the long run, you’ll need to improve on soft skills like communication, teamwork, and presentation.

On a similar note, consider enrolling in some more training and webinars. You might wish to brush up on some technical abilities. Whatever it is, learning is always beneficial. Stay connected with key [events](https://community.lohika.com/home/events) happening across the world.

**3. Take risks by stepping out of your comfort zone.
**
Managerial positions require a diverse set of talents. You may be an outstanding engineer, but you must also be a capable leader. With this in mind, there is no substitute to developing your own personal expertise. Always demand and deliver greatness by raising the bar, and take calculated risks. What a better way than to connect with peers — senior in the industry and catch up on latest trends and topics in [web3 Digital Health, Hybrid work model](https://community.lohika.com/home/events)
Day-88 Training At Ryaz
Tags: javascript, webdev, beginners, programming
Published: 2022-05-16 16:49:43

- Date:16/05/2022
- Day:Monday

Today, I started at about 10:30 am as I was in progress to complete the javascript course and the bidding project so, today I started with the left over task so, firstly I started with the email confirmation part as when user enters or log in the system so, a confirmation email gets to user personal mail that he would redirect to bidding process after this I saw the integration of the strong password implementation as to integrate the email confirmation we need to install node mailer from npm and after this we have to declare the variables and assign the email from which we have to send the email so, today I learnt all these things and tomorrow I wold integrate with my project so, that the biding projects look some what more advanced so, this way my day ended up and I got to learn many new things.
File downloader in python and Google Colab
Tags: python
Published: 2022-05-16 16:47:41

This is the code for downloading files from internet.

## In python (Local computer)

First install requests
```
pip install requests
```

```
import requests

image_url = input("Paste your file url : ")
saveAs = input("Save As : ")
r = requests.get(image_url)

print("\nDownloading Files...\n")

with open(saveAs, "wb") as foo:
    foo.write(r.content)
    print("\nFile has been saved\n")


```
## In Google Colab

```
import requests

image_url = "https://example.com/file.png" # Paste file url here

r = requests.get(image_url)

print("\nDownloading Files...\n")

# Enter your file name ⬇⬇
with open("exampleFile.png", "wb") as foo:
    foo.write(r.content)
    print("\nFile has been saved\n")
```

---

## For reference

```
import requests

image_url = input("Paste your file url : ")
saveAs = input("Save As : ")
r = requests.get(image_url)

print("\nDownloading Files...\n")

with open(saveAs, "wb") as foo:
    foo.write(r.content)
    print("\nFile has been saved\n")

'''
# In google colab 
------------------------------------------
import requests

image_url = "https://example.com/file.png" # Paste file url here

r = requests.get(image_url)

print("\nDownloading Files...\n")

# Enter your file name ⬇⬇
with open("exampleFile.png", "wb") as foo:
    foo.write(r.content)
    print("\nFile has been saved\n")

'''

```

---

Writer ⮕ [Junaid](https://abujuni.dev)

Publisher ⮕ [Junaid](https://abujuni.dev)
Interview Experience Digital Specialist Engineer - Infosys
Tags: hackwithinfy, infosys, dse, interview
Published: 2022-05-16 16:39:34

## What is HackWithInfy?
HackWithInfy is a competitive coding competition for second-year to pre-final year students across India. In this competition, participants have to solve coding questions in a given time and top performers get a chance to interview Infosys.
The level of the competition was medium-hard. I solved 1 question and got AC and other 2 partially accepted. I did not remember the exact questions but they were mainly based on Arrays, Greedy and DP. 

> All questions can be solved partially with brute force, so will recommend you to solve every question.

If you solved 1 questions fully and some testcases for other 2, you will definitely going to get the interview for DSE role.
So there were two roles Infosys was offering:
- SE : 9 LPA
- DSE : 6.25 LPA

If you are able to solve all 3, you will get upgraded to advanced rounds and will surely get the interview for SE.

## Interview Experience

I got the mail on 3 May 2022 to schedule my interview and I scheduled nearest date possible 7th May. My interviewer forgot about the interview and hence he slept and get back to me after 2 hours. That was funny, XD. Never mind. 
The interviewer was really chilled and cool. 

- He asked me for the introduction.
- Then asked me about my current semester subjects.
- He then started with question to check weather a number is prime or not. I shared my screen and he asked me that, what if in place of `#include <bits/stdc++>` can we write `#include "bits/stdc++.h"`, I was not sure about it and said no it will not compiled but it compiled successfully and then I realised about importing modules in react with "". 
I got pretty nervous.
- He then asked me that main() function will return 0 to whom? In my mind I was right OS, but as my overconfident killed my before I not tell him the answer.
- Then I write the code, he gave me sample TC and it ran fine.
- He then asked me the topic which I can not expect, **What is DFA**, I asked him to repeat I heard DFS, but it was Deterministic Finite Automata. Luckily I learned the topic in my online classes(YES, I attended first class) and told him everything I knew.
- He then asked me about my projects.
- He then started with some sense of humour question
  - What is color of the wall behind you?
  - What is the color of your Shirt?
  - How many buttons in your T-Shirt?

- He then asked me 
  - What do you know about Infosys?
  - Where do you see yourself after 5 years?

We wrapped up and ask me for any doubts.
- I asked him about his experience.
- I asked him about my feedback. He told me that I have good communication skills and open source experience.

## Conclusion

It is going to be very chill and easy, just be confident(not over).
Learning a new language
Published: 2022-05-16 16:29:56

> In the words of Malcolm Gladwell, Some of The reasons Chinese students excel at mathematics include the discipline inherited from a culture of rice farming and the greater simplicity of the Chinese numeral system.

All programming languages are beautiful, a lot of them are fun to code with, others have a vital feature at their core, and some are more flexible than a gymnast, but there is one question that I ask myself over and over, should I learn more than just one?
Bjarne Stroustrup once said that learning multiple programming languages may eventually lead us to be better designers, just as studying foreign cultures may help us become better people. And I was obsessed with the idea, that I have got to learn more languages in order to design better and code cleaner. So I tried to learn at least one new language each year and after five years of exploration and coding in different languages, here is my view.
The whole point of learning different languages does not necessarily have anything to do with the syntax of the languages themselves because after learning and mastering one language, switching to a new one would be easy for you. 
I think the point is more about understanding the paradigms, knowing how not to misuse them in our projects, their advantages and also the downsides, and how we can get the most benefit out of them depending on the situation. So the best way to learn a paradigm is to code with the languages that implemented that specific paradigm purely. And that's where learning a different programming language comes in handy.
It's like learning OOP with either C#, Java, or C++, Or learning functional programming using Haskell, F#, etc. The one that you are most comfortable with would be the best choice.
Ask yourself why engineers don't use only one language to build different tools. Or why do some companies change their stack? Better scaling? Better Performance? Bigger community and better community support? There are tons of use cases around us.
Studying different paradigms might lead you to start the journey of learning different languages. And you will learn about many different use cases while having fun on the way. 

## Conclusion
I see each language as a unique set of potentials, new ways, and tools to observe and solve a problem; however This is not to argue against going deep down the rabbit hole in the process of learning one language, it's only about understanding different paradigms and utilization of each to develop a neater, much better code.