teleren/devto huggingface dataset:
First (Tiny) Step to Open Source Development
Tags: opensource
Published: 2022-09-08 23:29:43

**About me**
Hello, I’m Chen-Yuan Chu. Today, this will be my first blog post for my journey in open source development. My main interests are in database management and web development. As far as official experiences go, I was a junior web developer with OPS, focusing on SharePoint site migration and troubleshooting.

Oh, did I mention I love D&D as one of my hobbies? I just learned a dice bot called Avrae (which I have used in the past) is an open source project!

**Why open source?**
As a Seneca student in an open source course, it’s my hope that I can learn some valuable experience with real world projects in the course and build connection to my fellow classmates and other developers I meet along this path, so I look forward to working with you all!

The field of open source contains many projects that are accessible to someone like me, and the openness of those projects makes them impact and useful to many users, so I get to see and work on projects that are used by many people and even myself.

**Project**
Hopefully, I can tackle some projects that match my interests, such as getting to know JavaScript better in complex real world projects, since I'm into web development.

After browsing on GitHub, I found the repository of [Bootstrap](https://github.com/twbs/bootstrap). It's a very popular framework for CSS, JavaScript, and HTML. You can add it to your code, and it will enable you to do many things, like using their unique CSS style. I have used it a few times to create neat-looking appearance for my websites and apps.
It's rather beginner friendly. For instance, their [website](https://getbootstrap.com/) has HTML code templates one can copy and modify to suit one’s need, like [cards](https://getbootstrap.com/docs/5.2/components/card/#about). The website is organized into different topics, so it's easy to navigate to find what you need.

I took an interest in this one because it's a very well-made tool that I and many others use quite a bit for web development, and it might be the type of the project I'm looking for.
It's never too late, but it's now or never.
Tags: opensource, github, git, beginners
Published: 2022-09-08 23:25:45

> _If people don't start something now, there is a slim chance they will ever do._

# Well, hello!

I'm Artem, a Software Engineer that is only beginning his path.

I mostly deal with Full-Stack projects, having more interest in Back-end technologies; however I often like to try out many other different things, like Game-dev, Machine Learning & Neural Networks, Mobile & Cross-platform development, and Blockchain & Web3 technologies.

However, before this, I always used to work either by myself or in a small team of up to 5 people, and never got to contribute to a community project.

This blog marks the start of my Open Source journey.  

### OSD

Currently I am in my final semester of Computer Programming and Analysis (CPA) program at Seneca College, where I am taking Open Source Development course.  
It was this course that sparked interest for Open Source in me, and this course will guide me through my first Open Source projects encounters.

Throughout this term, I'd like to try out and work on some revolutionizing projects, if I get a chance, of course. I feel like working on Open Source projects could really give me a chance of learning something I'm not particularly great at like Machine Learning or Web3 on practice.

### Forked projects

I have to start with some forks before I can really work on something, so below are some projects that I found interesting.

- [Novu](https://github.com/devils2ndself/novu) - Multi-platform notifications manager for sending and managing SMS, emails, Slack, etc.

As a person who has had to build notification services for back-end servers, I understand how hard it might be to send notifications and emails, and track communication with the user. 

I chose this project because, firstly it makes every back-end developer's life easier, and secondly, by examining the project, I can finally understand how to properly do notifications from scratch in case I ever need it.

- [JSON Crack](https://github.com/devils2ndself/jsoncrack.com) - JSON visualizer tool.

It might seem like this project is more of a trivial one, but I feel like this can ease lives of many developers and testers who work with APIs, JSON databases or complex JavaScript solutions.

When I used to work with a big third-party API, sometimes I had some problems in my code, and I had to look through 10,000 line JSON response to understand why my script was breaking... If I only had found this project, I think I might have not suffered as much!

### Thanks for reading!

More blogs to come!
5 Must Use VSCode Extensions
Tags: webdev, programming, codenewbie, beginners
Published: 2022-09-08 22:23:37

Here are the 5 most useful Visual Studio Code extensions to improve your workflow!

### 1. [Gitlens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#:~:text=GitLens%20is%20an%20open%2Dsource,and%20why%20the%20code%20evolved.)

Gitlens is a powerful extension that can display when a particular line was committed, by whom it was committed, and in which pull request it was included along with the commit message! All of this information is inline with the line upon which your cursor is currently located.

You can also hover over the message to get more information about a particular line of code!

### 2. [LiveServer](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

Live server is used Launch a local development server with a live reload feature for static & dynamic pages.

### 3. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with rules that take the maximum line length into account, wrapping code when necessary.


### 4. [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) 

 It is an extension created for HTML elements that change the ending of a tag automatically. Start changing an opening tag and its closing tag will change automatically. This is very useful, especially when you have a lot of nested code.



### 5. [ES7 React/Redux/GraphQl/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=rodrigovallades.es7-react-js-snippets)

This extension provides you with JavaScript and React/Redux snippets in ES7,  If you are not a great fan of writing boilerplate code or you’d just want to become more efficient – this is definitely for you.
African software engineers are the future
Tags: webdev, programming, beginners, startup
Published: 2022-09-08 21:41:34

The tech revolution may have started at Bell Labs, but its future shall be written in Lagos, Johannesburg, Nairobi, and the capitals of Africa.

In this article (the link below), I write of the youngest and fastest-growing developer population in the world, and why it can become a source for top tech talents.

I hope you find it interesting! ⬇️

https://bit.ly/3D6EqEh
License plate cover on car images
Tags: python, deeplearning, keras, serverless
Published: 2022-09-08 20:11:00

### Introduction
Goal of this project was to develop and train a Deep learning model capable of detecting and covering license plates of vehicles.

### Technical
This project was implemented with Python using the Keras framework on top of Tensorflow.
A number of python libraries like OpenCV, Numpy, Pandas, etc… were used.

### Examples

![License plate covering examples](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sc7ab845zlznw8rgsuen.png)

### Deployment
A lot of work done in order the reduce the overall size of the code and model weights to allow a deployment in Serverless environments like AWS Lambda and Google Cloud Functions.

Finally i was able to deploy on Google Cloud Function with an API in front.

The serverless approach is very optimal as the scalability is handled for you and serverless is almost always cheap.
In my case, i had a deep learning model that was almost totally free (1 million operations per month for free).

**Source:**
https://www.ibragim.fr/portfolio/cache-plaque-deep-learning/
NYC Meetup: Creating a single source of truth 🧘‍♀️
Tags: eventsinyourcity, nyc, startup, meetup
Published: 2022-09-08 19:46:40

## We're hosting a meetup for the dev community in NYC
Join us on Tuesday, September 13 at 6pm for a panel discussion followed by a night of networking, pizza + drinks.

Panel includes Ashley, VP Engineering at Datadog and Etan, Software Engineer at Stripe. 

Free event at the NoMo Soho. [Grab your ticket here.](https://swimmnyc.eventbrite.co.uk/)
Open Source Contribution
Tags: opensource, react, javascript, design
Published: 2022-09-08 19:42:06

I have been into open source for quit a long time but I did not actively take any part in any open source project. Because for me finding a project to contribute was a hectic job . But for past couple of days I am trying to change that mentality of mine and in doing so I found a project that I was excited to contribute to. 

Check out the [project](https://reactplay.io/).

When I found the project on github I went straight to the issue tab and found a issue that I felt I could contribute to. So I commented on it saying that assign this issue to me and lucky It got assigned to me .
#### A Little Twist in the tail
At first I thought it was a development issue but then after asking some question I found out that it was a designing job and the fun part is I don’t even know the A of web designing. I just know that we have a software called figma for creating the designs for web.

I have been using figma to convert the design to html/CSS  but never did I design any thing on figma. Luckily the job was not that tricky. So I watched some tutorial related to my use case and tried building a figma design. And after some work loaded hours I finally got the design ready to share for the issue. The design still have some improvements to do but I am really excited for the task. 

I will update you folks once I complete the design but if you want to take a look at the design right now you can go to this [link](https://www.figma.com/file/LSSxDQEyFKIGczEiwe5pcS/Figma-design-for-hackathon-card?node-id=0%3A1).

This is what I love about open source. Before this issue I thought that I was incapable to design anything but now I am starting to feel like I can take up this job as well. When doing open source you are not bound to share the skill that you have already mastered but you can also learn new skills. 

I know building a single page design doesn’t make me a designer but its a start and you never know where you might end up once you take the first step.

#### Conclusion
I hope this article inspires you to get into the vast world of open source and contribute the evolution of the IT industry and in doing so enhance your skills as well.
Different Perspective
Tags: devjournal, programming, beginners, webdev
Published: 2022-09-08 19:38:25

Whenever something common happens, such as national holidays, recess, weekends and such, the most common thing (and right thing) to do is rest. Take advantage of that time to "refuel" our mind and body. - But sometimes that's not possible. other things come up and we all know that it's not as simple as rest and recover. So I just do the opposite. - I Work.

It's not easy to "give up" some free time, but I'd rather keep my routine going because my mind and body is accustomed to it.
Stuck in SQL query
Tags: challenge, sql, todayilearned, mysql
Published: 2022-09-08 19:29:07

Hello Everyone, Let's start this series with a SQL Makeshifter (Jugaad). So, today I got stuck in a SQL query. Let's understand the problem statement and solution I did.

## Problem Statement
> I have a table where I have `id (Primary Key), Date Entered, Name of person, Person Id, Score, Score Type`

> There can be multiple entries of same Person having same Score Type. We need single details of each person with each score type having maximum Date Entered.

Let's have a sample table

```
Table Name: Student
| id | Date Entered | Name of Person | Person Id | Score | Score Type |
-----------------------------------------------------------------------
| 1 | 2022-08-27 | Mark | 101 | 6 | AA |
| 2 | 2022-07-08 | Alex | 102 | 3 | AA |
| 3 | 2022-08-29 | Mark | 101 | 9 | AB |
| 4 | 2022-09-01 | Mark | 101 | 2 | AA |
| 5 | 2022-02-12 | Alex | 102 | 5 | AB |
| 6 | 2022-09-09 | Alex | 102 | 9 | AB |
----------------------------------------
```

> Expected Output

```
| id | Date Entered | Name of Person | Person Id | Score | Score Type |
-----------------------------------------------------------------------
| 4 | 2022-09-01 | Mark | 101 | 2 | AA |
| 3 | 2022-08-29 | Mark | 101 | 9 | AB |
| 2 | 2022-07-08 | Alex | 102 | 3 | AA |
| 6 | 2022-09-09 | Alex | 102 | 9 | AB |
----------------------------------------
```

## 1st attempt to get this output
We have thought to use `group by` using `having` clause and we made this query.
```sql
SELECT * FROM student s GROUP BY Person Id, Score Type HAVING MAX(Date Entered);
```
> We got wrong output using this query. We are not getting result having latest `Date Entered`.

## 2nd attempt to get this output
After spending time on google I have seen that everyone is using condition in `HAVING` clause, so I have tried this now
```sql
SELECT * FROM student s GROUP BY Person Id, Score Type HAVING Date Entered = MAX(Date Entered);
```
> Again this didn't work

## 3rd attempt with successful result
After getting failed in 2nd attempt I tried it myself and tried to make a mapping in my mind and I have tried a sub query concept this time.
```sql
SELECT * FROM (SELECT * FROM student s GROUP BY Person Id, Score Type, Date Entered ORDER BY Date Entered desc) latest_student GROUP BY Person Id, Score Type;
```
> Here I got my expected output

**So this is what I have tried today with SQL. Now it's your turn to tell any other possible way to write a query having same expected result.**

**_Do let me know your views on it in comment._**
Stream in Java
Tags: java, stream
Published: 2022-09-08 19:21:55

Stream provides following features:

Stream does not store elements. It simply conveys elements from a source such as a data structure, an array, or an I/O channel, through a pipeline of computational operations.
Stream is functional in nature. Operations performed on a stream does not modify it's source. For example, filtering a Stream obtained from a collection produces a new Stream without the filtered elements, rather than removing elements from the source collection.
Stream is lazy and evaluates code only when required.
The elements of a stream are only visited once during the life of a stream. Like an Iterator, a new stream must be generated to revisit the same elements of the source.
You can use stream to filter, collect, print, and convert from one data structure to other etc. In the following examples, we have apply various operations with the help of stream.



import java.util.*;  
import java.util.stream.Collectors;  
class Product{  
    int id;  
    String name;  
    float price;  
    public Product(int id, String name, float price) {  
        this.id = id;  
        this.name = name;  
        this.price = price;  
    }  
}  
public class JavaStreamExample {  
    public static void main(String[] args) {  
        List<Product> productsList = new ArrayList<Product>();  
        //Adding Products  
        productsList.add(new Product(1,"HP Laptop",25000f));  
        productsList.add(new Product(2,"Dell Laptop",30000f));  
        productsList.add(new Product(3,"Lenevo Laptop",28000f));  
        productsList.add(new Product(4,"Sony Laptop",28000f));  
        productsList.add(new Product(5,"Apple Laptop",90000f));  
        List<Float> productPriceList2 =productsList.stream()  
                                     .filter(p -> p.price > 30000)// filtering data  
                                     .map(p->p.price)        // fetching price  
                                     .collect(Collectors.toList()); // collecting as list  
        System.out.println(productPriceList2);  
    }  
}  

Read full article : https://www.javatpoint.com/java-8-stream
For those who goes to a post-secondary school, what are the things they lack to teach you?
Tags: discuss, beginners
Published: 2022-09-08 19:11:43

Hi folks, 

I am Gabby, and currently I am enrolled in a post-secondary school. I was wondering, while reading some material about solving problems, how my school, at least, lack at teaching this basic thing. I have never ever relied only on their classes, sources and materials, I do also other studies and  online courses, but it makes me wonder about how they could skip this very important step.
Any go and python number experts here?
Tags: go, python
Published: 2022-09-08 19:07:59

Hello
i have a problem with a python class i try to convert to go.
I'm using library that generates python or go code from a "PAP", that is something like a execution plan, provided by the goverment.
The python implemention uses a BigDecimal class, that does some special rounding.
I tried to implement the functionlity in go, but for some values, the go code returns values 1 cent higher or lover. I'm pretty sure, i have some bug in there, because this works for most values.

Here are the implementations. The python one works, the go one sometimes :)

Python: https://pastecode.io/s/qtf0rcb0

Go: https://pastecode.io/s/zzdr4tz5

Is there any python and expert here, who could give me a hint, where rounding problems could come from?

Many thanks in advance.
My Little Adventure: A web app in aws
Published: 2022-09-08 18:48:05

**Introduction**
Try to learn some concepts of aws amplify and some concepts involved.
**What is AWS Amplify**
AWS Amplify is a purpose-built set of tools and features that enable frontend web and mobile developers to quickly and easily build full-stack applications on AWS.
"by AWS"

**Why Amplify and Dynamodb**
AWS Amplify Storage Module. 
The default implementation of the storage module uses _Amazon S3_.
But we must create tables,we could use _dynamodb_.
_For RDS_
You can then open the AppSync console with the API Amplification Console to attempt to interact with your RDS database through its GraphQL API.

**GraphQL in the backend**
Back-end developers want to create APIs that are intuitive and easy to explore and navigate.
"by Graphql"
It was easier with a few statements to create an api than to create a web server and then give it the functionality of an api.

**Result**
I built a replica of the project [🚀 Dogecoin Price Predictor](https://www.youtube.com/watch?v=Xdx3t1HkJLY) .

You could also visit my repo , i made some changes [libialany](https://github.com/libialany/amplify-demo)  ヽ(•‿•)ノ.


**Not mentioned:**
NodeJs scares me with some incompatible modules.

**Conclusion**
It was a project that helped me understand how amplify worked.
36 Useful Terminal Commands
Tags: webdev, beginners, programming
Published: 2022-09-08 18:46:57

Here is a little list of terminal commands that you can find useful, I use some of them a lot and others from time to time.

1. Print Current Working Directory. It will print the full path.

```
pwd
```
2. List of current directory contents
```
ls 
```
3. Change the directory
```
cd DirectoryName
```

4. To change to zsh shell.
```
chsh -s /bin/zsh
```

5. Clear the terminal logs
```
clear or cls
```

6. Copy files from the current directory to a different directory
```
cp source_file target_directory
```

7. Move files from the current directory to a different directory
```
mv 
```

8. Make a new directory
```
mkdir NameNewDirectory
```

9. Delete empty directories
```
rmdir 
```

10. Delete directories and contents within them (*be careful when using it)
```
rm DirectoryName
```

11. Create a new blank file
```
touch 
```

12. Find a file
```
locate
```

13. Search for files and directories within a given directory
```
find
```

14. Search through all the text in a file
```
grep FileName
```

15. Perform tasks that need admin or root permissions
```
sudo
```

16. Get a report on the systems disk space usage (% and KBs)
```
df 
```

17. Check how much space a file or a directory take
```
du 
```

18. View the first few lines of a text file
```
head
```

19. Display the last ten lines of a text file
```
tail
```

20. Compare the contents of two different files, line by line
```
diff 
```

21. Archive multiple files into a group of files collected together as one
```
tar
```

22. Change the read, write and execute permissions of files and directories
```
chmod
```

23. Transfer the ownership of a file to the specified username
```
chown
```

24. Display all current jobs along with their status
```
jobs
```

25. Terminate a program manually
```
kill
```

26. Check the connectivity status to a server
```
ping
```

27. Download files from the internet
```
wget 
```

28. Display a list of running processes and how much CPU each process uses
```
top
```

29. Get information about a Linux command
```
man
```

30. Move data into a file
```
echo
```

31. Compress files into a zip file
```
zip
```

32. Extract a zip file
```
unzip
```

33. Display the name of the host or network
```
hostname
```

34. Create a new user
```
useradd
```

35. Delete a user
```
userdel
```

36. After creating a user, it can be used to set a password for that user
```
passed
```
 

---

Thanks for reading, I appreciate your time! 🎉 If you need any help please reach out!

If you have any questions feel free to drop me a message on [LinkedIn](https://www.linkedin.com/in/carolina-cobo/) or send me an [email](ccobo.dev@gmail.com). 😊

Have a nice day!
How to Convert a React Component to an Image
Tags: react, javascript, beginners, tutorial
Published: 2022-09-08 18:44:33


Sometimes you want to give the users the ability to download a part of the web application as an image. In that case, you want a way to convert a React component to an image. And it can be straightforward by using a third-party NPM package called html2canvas. Let us look at how to do it.

## Setup

We want to first mark the div in HTML markup that we want to be downloaded when the user hits the download button. This could be a chart, user data, a table, or anything we want. We will allocate an id to that element.

    <div id="print">This will be downloaded as an image</div>

We can wrap this as a React component with an event handler attached to a download button:

    const App = () => {
      const handleImageDownload = () => {
        // TODO: add logic here
      };
      return (
        <>
          <button type="button" onClick={handleImageDownload}>Download</button>
          <div id="print">This will be downloaded as an image</div>
        </>
      );
    }

## Programming logic

As we discussed earlier, we will install thehtml2canvas NPM package.

    npm install html2canvas

Then, all we need to do is use the package to fetch the corresponding div that we want to convert to an image. We then create a link in memory to download the image, click it programmatically and then remove the link from the DOM.

    const handleDownloadImage = () => {
        const element = document.getElementById('print'),
        canvas = await html2canvas(element),
        data = canvas.toDataURL('image/jpg'),
        link = document.createElement('a');
     
        link.href = data;
        link.download = 'downloaded-image.jpg';
     
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      };

And that is all we need to do to convert a React component to an image! Hope you found this post useful.

*Originally published at [https://www.wisdomgeek.com](https://www.wisdomgeek.com/development/web-development/react/how-to-convert-a-react-component-to-an-image/) on September 28, 2021.*