teleren/devto huggingface dataset:
Code a social network with ReactJS
Tags: javascript, react, webdev, programming
Published: 2022-01-17 08:55:12

I have developed a small social network web app for educational purpose and want to share this with the community. This app is built with ReactJS for frontend, Java Spring Boot for backend and MongoDB as the database.


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

The app tries to mimic a few functions of Twitter, including:

- Create post with text and image
- The number of characters in each post is limited to 200 characters
- Like, comment and re-post a post
- View the number of likes, comments and shares of a post
- Comments are toggle
- The number of character in each comment is limited to 100 characters
- Follow, un-follow someone
- See who are following us and follow them back
- Check who we are following
- View all posts of an individual
- View our own posts
- List all user accounts in the entire social network (due to the number of users are still small, I did not develop search user function)

Other functions:

- Due to limited storage space, client app compresses the uploaded image to the maximum of 250px (width or height) User avatar is created by hashing user id and convert that hash code into a hexagonal image
- Authentication and authorization use JWT
- Responsive frontend for desktop and mobile devices

Technical stack:

- Frontend: ReactJS, Redux Toolkit, React Router, React Bootstrap
- Backend: Java Spring Boot
- Database: MongoDB

Hope you enjoy it and give me a ⭐ Github star ⭐ for my effort!

Live Demo:
https://psn-social-network.herokuapp.com/#/

Source Code:
https://github.com/linhtch90/psn-social-network-public-source
Data Structures and Algorithms in JavaScript
Tags: career, algorithms, computerscience, javascript
Published: 2022-01-17 08:55:00

## Welcome and Hello !

#### A little bit About Me 
My name is Pieter van Zyl 
I'm a South African, **Full-Stack Developer** working as a consultant. 
My team focuses on Full stack Machine Learning Solutions for clients. E.g. Forecasting Models, Integrated with a custom dashboard.

In this Series I'll refresh my Data Structures and Algorithms Fundamentals in Javascript.

##Data Structures
Arrays & Strings
Linked List
Stack & Queues
Heap and Priority Queue
Vectors/Array Lists
Hash Tables
Trees, Tries & Graphs

##Algorithms
Breadth-First Search
Depth-First Search
Binary Search
Merge Sort
Quick Sort

##Concepts
Bit Manipulation
Memory (Stack vs Heap)
Recursion
Dynamic Programming
Big 0 Time & Space


I'll edit this and add links as I create posts for each topic.
You can expect to see posts on each topic and after the initial recap, I will also be doing leetcode/hackerrank/geekforgeek practice problems, to test my knowledge.

I'll be live on Twitch and Youtube, throughout this period documenting my journey.
How to build web-app with minimal coding
Tags: webdev, startup, opensource, productivity
Published: 2022-01-17 08:44:43


[HackForChange](https://www.hackforchange.co.in/) is hosting a free workshop in this workshop, you will get a high-level overview of low-code Frappe Framework, with a focus on possible use-cases, quick run-through of building a simple web app, and also limitations and possibilities of using such a low-code framework.

## [How to build web-app with minimal coding](https://www.hackforchange.co.in/events/how-to-build-webapp-with-minimal-coding)

No-Code / Low-Code platforms are the easiest way for organisations to build fully functioning workflows, landing pages and other tools necessary for furthering their own mission, sustainability and outreach.

>[ Register Here -> ](https://www.hackforchange.co.in/events/how-to-build-webapp-with-minimal-coding/signup
)
Weather App developed with Xamarin
Tags: mobile, xamarin, xamarinforms, opensource
Published: 2022-01-17 08:43:20

**Weather App** is a simple weather app developed using **Xamarin Forms**. The app allows you to see the weather from your current location or another location around the globe using **OpenWeather Api**. Using **One Call API** the app displays the current weather, 24 hours and 6 days forecast. You can add new locations and switch between them from the Locations screen. From Settings screen you can change the unit system from metric to imperial. The app is available in **light** and **dark mode**.


![Light Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ld8l8wl5jcb4dwk1plbi.png)

![Dark Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvoozm4x09ydubb5a0x2.png)

You can find the full code [here](https://github.com/gheorghedarle/Xamarin-WeatherApp).

If you like this repository you can support me on [buymeacoffee](https://www.buymeacoffee.com/gheorghedarle).
Recommendations for Cutting Moving Costs
Tags: packersandmovers
Published: 2022-01-17 08:32:43


Moving is one of the most thrilling journeys you can embark on, whether it's across town or the nation. It's also one of the most difficult, not just in terms of logistics but also in budget.

**1. Before you pack, declutter.**
It may seem like an extra task on your to-do list, but getting rid of everything you don't want to move can save you time, space, and money in the long run.

Furthermore, you may make money on the items you're getting rid of and put that money toward your moving expenses. Take [furniture](https://www.amazon.in/Furniture/b?ie=UTF8&node=1380441031) or beautiful clothing to consignment stores, list items on websites like eBay and Postmark, and, if you're feeling adventurous, host a garage sale. You can schedule a donation pick up or drop off if you don't want to deal with selling your items. 

**2. Arrange for your movers to arrive at a convenient time.**
If you're hiring [movers](https://www.assureshift.in/local-packers-and-movers-hyderabad-0), booking them on a weekday rather than a weekend, off-season rather than on-season, and mid-month rather than end-of-month can save you a lot of money.
If you can relocate during the off-season, you'll be able to save even more money on moving charges.

**3. Contact your utility, internet, and cable companies.**
Paying your rent or mortgage, utilities, internet, and cable at two different places can cost you money, so avoid it if at all possible. Make every effort to synchronize account start and end dates, which usually entails phoning your provider and negotiating proration. 

 take advantage of new account deals given by local internet and cable companies, and inquire about utility companies eliminating installation/activation fees.
Moving goods, such as boxes, tape, bubble wrap, and cushioning, may rapidly mount up in price. Think outside the box instead of spending hundreds on those above (literally).


**4 Do It Yourself Packaging**
If you have the time and energy, packing everything (or at least the majority of your belongings) yourself can save you a lot of money on your move. This is the most time-consuming and, as a result, one of the most expensive relocating components. Hire movers to take up your packed boxes, or even simply your furniture, as a compromise.
#18 - Previous multiple of three CodeWars Kata (7 kyu)
Tags: javascript, webdev, tutorial, programming
Published: 2022-01-17 08:23:00

##Instructions

Given a positive integer n: 0 < n < 1e6, remove the last digit until you're left with a number that is a multiple of three.

Return n if the input is already a multiple of three, and return null if no such number exists.

**Examples**

> 1 => null
> 25 => null
> 36 => 36
> 1244 => 12
> 952406 => 9

---

##My solution:

```javascript
const prevMultOfThree = n => {
  let arr = n.toString().split('')
  
  for(let i = 0; i<arr.length; i++){
    for(let j = 0; j<arr.length; i++){
      let sum = +arr.join('')
      if( sum % 3 === 0) return sum 
      arr.pop()
    }
    
    return null
  }
  
}

```


##Explanation
First I splitted the number into an string array
> let arr = n.toString().split('')

---

Then after that I used a loop that iterated until i is equal to the array length.
Inside of this array I used anothe for loop that still iterated the same array, inside of this loop I made the variable "sum" that is equal to the array joined and converted it to a number with the + operator, after that I added a conditional that checked if it is divisible by 3, if it is divisible by 3 it will return 3, but if not it will continue the loop but with the array without the last element, using arr.pop()

> for(let j = 0; j<arr.length; i++){
>       let sum = +arr.join('')
>       if( sum % 3 === 0) return sum 
>       arr.pop()
> }

---

if the loop is over and the array is still empty, it means that any number was divisible by 3, so it returns null

> return null

---

**Comment how would you solve this kata and why? 👇🤔**

[My Github](https://github.com/Cesardlr)
[My twitter](https://twitter.com/cesar__dlr)
[Solve this Kata](https://www.codewars.com/kata/61123a6f2446320021db987d)
A Nice Developer Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2022-01-17 08:00:27

---
title: "A Nice Developer Joke For Today"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258bb6df5f.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

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

<!--
Joke text:
___Q:___ What did the spider do on the computer?

___A:___ Made a website!
 -->
Let's Slime the Web
Published: 2021-12-14 03:43:18

The capabilities of what a web component can do aesthetically and functionally can be boundless. As an expression of what one can do, a group project team of ours has decided to create a web component that involves a variety of user inputs and visual outputs.

# What It Does
The user is prompted a question to sort four statements in chronological order. The user will use up/down arrows to sort the statements in order, and then the question will tell the user what they got right and/or wrong. The user is provided a submit button and a reset button.

If they get at least one statement wrong, an error sound will play along with flaming visuals. If they get all statements correct, a cheer sound will play along with confetti visuals.

![Incorrect Response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uz72yb02sfs1ts077mif.png)
![Correct Response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4m4gmmh00wwxw03wxfig.png)

# How It's Done
The first thing that the group did was design the interface and card layout of the sorting question on a piece of scratch paper. This helps to guide the design process. Based on some questions we posed ourselves in terms of the component's features, we laid out the expected elements, their states, and the properties of the component.

One sticking point was how we should implement dragging the sorting element, as opposed to just using the arrows. We did end up consulting Stack Overflow, which told us that the "draggable" attribute can be used, but based on our current iteration, that has not been implemented.

You can find the sorting question component in its current iteration here: https://github.com/Viable-Slime/slime-the-web

<iframe scrolling="no" allowtransparency="true" allow="encrypted-media" src="https://open.spotify.com/embed/track/06rOypJlNqSmHXT3FymVp6" loading="lazy" width="100%" height="80px" frameborder="0">
</iframe>
CSS Speedrun
Tags: webdev, css, html
Published: 2022-01-17 07:56:26

I've had this app in my mind for quite some while but last week I've actually put in the work and created it.

A small fun app to test your CSS knowledge. Find the correct CSS selectors for the 10 puzzles as fast as possible.

You can try it out yourself here:
[https://css-speedrun.netlify.app](https://css-speedrun.netlify.app)

I'd love to have your feedback and how long it took you to solve the puzzles. Feel free to comment below or on [Twitter](https://twitter.com/wweb_dev).
Java 8 Collection Framework: Introduction
Tags: java, beginners, programming
Published: 2022-01-17 07:55:58

**Collection Framework** is used to handle the group of objects of a program. The Collection Framework provides different implementation of interfaces such as LinkedList, HashSet, TreeSet. Also standard Array is also a part of this framework. Collection Framework also has one interface called as Iterator. The iterator is used to enumerate the content of a collection. Following are the List of Collection interface provided by the framework:- 

1. Array
2. LinkedList
3. HashSet
4. TreeSet
5. Map
6. Deque
7. List
8. NavigableSet
9. Queue
10. Set
11. SortedSet

These collection uses Comparator, RandomAccess, Iterator, ListIterator and Spliterator.

Compartor is used to compare two objects

The Iterators are used to enumerate the object within the collection

In addition to this there are optional methods, Optional methods are used to modify the content of the collection.

Collection is a generic interface

**interface Collection<E>**

E is the type of object that particular collection can hold.

Methods in Collection interface:-


![Collection Methods](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awiuurujvz8diln8e33m.png)

In the next post we will see each of the Collection provided in the Framework with their examples.
React js CURD WebApp
Tags: webdev, javascript, react, programming
Published: 2022-01-17 07:48:41

# Getting Started with CURD application
 means create update read delete


This is a contacts sharing webapp you can perform the CURD oparetions with firebase database 
check this now 👉 [Contacts](https://contactsv1.netlify.app/).
## Available Live Now

### Click Here [Contacts](https://contactsv1.netlify.app/)

## Preview Photos
![alt text](https://firebasestorage.googleapis.com/v0/b/contacs-a7fe1.appspot.com/o/Screenshot%20(16).png?alt=media&token=0a6ac380-875d-4f58-b817-e6ad6b304401)

### adding contacts
![alt text](https://firebasestorage.googleapis.com/v0/b/contacs-a7fe1.appspot.com/o/Screenshot%20(17).png?alt=media&token=2d6b78ed-0773-4317-9173-50549a229f6c)
### update contacts 
![alt text](https://firebasestorage.googleapis.com/v0/b/contacs-a7fe1.appspot.com/o/Screenshot%20(20).png?alt=media&token=84c76445-e61b-47f9-aae8-37f850f2956a)
### Deleteing contacts
![alt text](https://firebasestorage.googleapis.com/v0/b/contacs-a7fe1.appspot.com/o/Screenshot%20(19).png?alt=media&token=97ed725d-d899-4a9d-908a-d814065ec776)



# `we can create, update, read, delete contacts`
Regression testing tools
Tags: regression, testing, tools, developer
Published: 2022-01-17 07:42:40

Software products once developed are often changed temporally to ensure proper functionality and incorporation of advanced and unique features. As the choices and wants of markets and customers are dynamic, so is expected from the software to evolve in parallel with the changing trends.

![Regression testing tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s13y5v6idt34l69kkutn.png)

In some cases, the modifications or even slight changes in the back-end can sometimes cause a diversion from intended functionality and usage. To avoid such anomalies in software, regression tests (with the help of regression test tools) are used.

Regression testing is the process for verifying and validating the recent code changes and for analyzing the possible wrong or altered effects on the functionality of the software. It is one of the many types of software testing that are essential for quality assurance.

It can be done both manually and automatically. Nonetheless, the automated method is generally preferred over the other due to the provided accuracy, speed, and ease.

List of [Software Regression Testing Tools](https://www.techgeekbuzz.com/best-regression-testing-tools/): 

1. Subject7
2. Cerberus Testing
3. Selenium
4. Digivante
5. Testsigma
6. Appsurify TestBrain
7. Testimony
8. Sahi Pro
9. Watir
10. Ranorex

## Conclusion

That wraps up our rundown of the best manual and mechanized relapse testing tools. Choosing an effective and solid relapse testing tool can be overwhelming. With wide choices accessible on the lookout, one can without much of a stretch get astounded and overpowered with the elements, contributions, and conveniences of the tools.
A11y tips: autocomplete your form fields
Tags: a11y, tips, html
Published: 2022-01-17 07:41:44

The `autocomplete` attribute allows the user agent to **automatically fill in certain form fields** by obtaining the value from previous past values ​​entered by the user, or from pre-configured values. It can be **very useful for users with a cognitive disability**, as well as for any user does not have to be repeating the same information over and over again in different forms.

```
<label for="first-name">First Name</label>
<input
  id="first-name"
  name=”first-name”
  type="text"
  autocomplete="given-name"
/>
<label for="last-name">Last Name</label>
<input
  id="last-name"
  name=”last-name”
  type="text"
  autocomplete="family-name"
/>
```

The [W3C](https://www.w3.org/TR/WCAG21/#input-purposes) and [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values) pages provide a complete list of the values ​​that the `autocomplete` attribute can take. The **more consistent** the use of these values ​​is throughout the entire site, the **easier** it will be for the user agent to use them correctly and usefully for the user.

In order to provide autocompletion, user-agents might require form fields (`<input>`, `<select>` and `<textarea>`) elements to:

- Have a name and/or `id` attribute
- Be descendants of a `<form>` element
- The form to have a submit button

There are form fields that you **should be careful** with when using `autocomplete` attribute, as they contain **sensitive information**, such as those related to credit cards.

Some of the values [​​are based on US formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#administrative_levels_in_addresses), so usage in other countries may be difficult to resolve for the user agent.
Smarter Test Execution with Dynamic Test Suites and Global Variables
Tags: testing, testdev, automationtesting
Published: 2022-01-17 07:37:39

"Delivering quality at speed has become part of the quality assurance lexicon over the past few years. However, as manual work remains “unskippable” in different steps of our test cycles, the goal of running more tests in a shorter time might seem to be out of reach.

Today’s article will walk you through the latest features of Katalon Recorder 5.6 and explain how they help reduce manual efforts and shorten your next test cycles."
[Continue reading](https://www.katalon.com/resources-center/blog/recorder-5-6-release/)
Urge to build CLIs : Beginners Eye🚀
Tags: productivity, opensource, beginners, go
Published: 2022-01-17 07:28:13

I will first take you to the reason and urge I have for building CLI tools and then make your hands dirty by building a CLI-based calculator with Cobra! In case you are well motivated to build CLIs, I would suggest you directly jump to the code valley. 

### The urge to build CLIs 👨‍💻 
I find it very difficult to install or run an application while switching between various GUI components in the OS, be it Windows/ Mac or Unix. The commands always follow a particular logic, be it any OS for example using `sudo` gives us admin privileges, using -v gives us the version of the application, and so on. Moreover, GUI does not have the same level of functionality and granular control as a command-line interface. So the CLI provides greater flexibility of use. A GUI needs to use additional system resources to load the graphical part thus it is going to be slower than using the command line. With a CLI, users have all the control over the file system and operating system, and the tasks become simple. You can create a script that contains a few lines of command and it will do the work for you. Although learning bash has a steep curve because of its ugly syntax, the only datatype is a string but the automation it provides is worth it. 

### Relating Web with CLI tools 🕸
Having experience in building backend applications for 2 years, I feel the way CLI works is very similar to that of building full-stack web applications. For instance, a simple CLI tool to generate Temperature at a location requires just passing the location as a prop and then doing API calls to fetch the data and display it on the CLI.

### Building Simple CLIs 🚀
Initially, I started creating simple CLI tools such as joke generator, fuzzy calculator, code compiler, reminder CLI tools, and some more. The one CLI tool which particularly made me learn a lot of tools was while developing a network CLI tool for Domain migrations within various hosting providers. In the particular CLI, I used Urfave CLI to get started with the CLI structure which made naming labels easier and generating new commands simpler. Urfave also has various classes within it which make overriding functions easier for example creating CLI flags or creating commands. The network CLI had basic functionalities such as when hostname is passed as a parameter it returns name servers, IP address, and CName for that particular host when passed with a particular hostname. A simple but according to me effective CLI tool. Comparing Urfave and Cobra, Cobra uses more template code which makes execution of the programs slower. Although a novice in building CLI applications, I am highly enthusiastic about learning and exploring more and more in this field.

While going through the web I created a repo to learn Go lang and build CLIs I suggest you look into the [Code Valley](https://github.com/Aniket762/namaste-go). If you want me to write a blog on how to build a CLI tool with proper explanation let me know in the comments 🐣
find youtube videos in just 2 lines of python.
Tags: python, programming, beginners, tutorial
Published: 2022-01-17 07:34:21

for this tutorial we will use pywhatkit library
you can install it by
```bash
pip install pywhatkit
```

```python
import pywhatkit
pywhakit.playonyt('godzilla eminem')
```
and done.
if you don't want to open it in browser so just set `open_video` to False, just like this:-
```python
import pywhatkit
print(pywhatkit.playonyt('godzilla eminem',open_video=False))
```
Top DevOps Tools
Tags: devops, tools
Published: 2022-01-17 07:33:55

"DevOps is a practice, not a tool, but tools are needed to implement it. Breaking down walls of communication and creating visibility and trust across all the teams involved in delivering software and technology is challenging. The right tools make the automation and integrations needed across functional teams seamless, open, and scalable."
[Continue reading](https://www.katalon.com/resources-center/blog/top-devops-tools/)
Moving At DevOps Speed With In Sprint Automation
Tags: devops, insprint, automation
Published: 2022-01-17 07:32:00

"From the traditional Waterfall model to more iterative approaches like Agile and DevOps, software testing is constantly evolving. And while teams have worked their way to deliver quality at speed, there seems to be something holding them back. Read on to learn about in-sprint automation and why it’s the key to moving at DevOps speed."
[Continue reading](https://www.katalon.com/resources-center/blog/in-sprint-automation/)