teleren/devto huggingface dataset:
What projects are you working on this weekend?
Tags: webdev, beginners, productivity
Published: 2022-09-17 19:11:00

Hey guys,

It is the weekend! What projects are you working on?


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

Feel free to share your SFW work projects below in the comments.

If you need any help feel free to ask and maybe I or someone else can give you some advice.

This weekend I will be working on my site [Todmorden Digital](https://todmordendigital.co.uk/) to add new pages.

Up until now I have mostly been working on the site speed and have got it to 100% scores in Lighthouse/PageSpeed Insights.

If you have any web performance questions feel free to ask.
Yesterday I had a hell error
Tags: javascript, webdev, beginners, programming
Published: 2022-09-17 17:43:20

Yesterday I was doing a code to validate forms and I came across an error that made me six hours to resolve and even now, I have no idea how started and how ended (the error was not appearing in the console, was simply not working). I was running the code seeing if was normal and if was everything fine but suddenly stopped and I didn't know why. 

For a long time I searched and solved other erros in my PC just to see if was something there and I even came to delete some files and reinstalling VSCode but nothing worked at all. About six hours later I stopped for a break and when I came back, the code was running normally. I was super relieved but frustated at the same time, but now I see like a experience to work on, I know that not everything will be working and that's why I chose beeing a dev, I like to solve problems and I think that this is what we are made for. 

I recommend to all you guys there are in the first or second year like me, to have pacience, I am not a coach or something like that but, this situation it's really common and usually we tend to get frustated so, if you are in this for a long time, take a break, eat something, go for a walk, or even try a game match if you're needing this, maybe the answer for solving the problem won't be ready in your head at the same time you came across the problem. 

I hope this experience I had can help someone.
Share highlight in Chrome/ Chromium
Tags: chrome, chromium, tips
Published: 2022-09-17 17:40:20

There is a hidden little feature that you might not already know in Chrome or Chromium.
You can highlight text in any webpage and show others that exact highlighted part by giving a customized URL of the web page.

Getting from official document of Google Chrome https://support.google.com/chrome/answer/10256233, you can simply
1. Highlight the text you want to share
2. Right click and select *Copy link to highlight*
3. The generated link is now in your clipboard, paste it to any medium you would want to share to.

Once the person you shared to open the link given from you in their Chrome or Chromium browser, their browser will scroll to and make that highlighted part center of the screen.
Example generated link would look like this https://support.google.com/chrome/answer/10256233#:~:text=about%20this%20article-,Was%20this%20helpful%3F,-Yes

Do note that this only works in Chrome or Chromium browsers like Edge, Vivaldi...
Asking About Career Boosting Companies
Tags: webdev, career, productivity, python
Published: 2022-09-17 17:27:58

A friend of mine just landed a job on Amazon because of a company called Manara which give you training to make you ready to land a job in FAANG.Also they provide refereeing to that companies, but all this comes with a price they take 10% for your salary for 2 years.
So I am asking if their is any alternatives for that company?!
theme.js while using MUI in nextjs project
Tags: help, nextjs, react, javascript
Published: 2022-09-17 17:18:42

[Theming Mui ](https://mui.com/material-ui/customization/theming/)

this offer a theming methods but from react 18 and next i never able to use theme.js in my system. this below button's styling works for me but i need re-usability of such css.

```
 <Button css={css` 
  display: flex;
  align-items: center;
  justify-content: center;                          
  background-color: black;
  color: white;
  font-size: 10px;
  padding: 10px 60px;
  border-radius: 5px;
  margin: 10px 0px;
  cursor: pointer;
  margin-left: 10px;
  :hover {
            color: #3e2723;
            border:2px solid #3e2723;
            border-color: #3e2723;
            transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out .7s;
          }
`}>  Click for More </Button>

```
React Props and React State
Tags: react, javascript, beginners, tutorial
Published: 2022-09-17 17:00:37

## What’s inside React components?

At the heart of React are key elements called “components”. These components represent a DOM node and each component has its own state and properties (props). Understanding these concepts will help you better understand how to use React effectively. 

---


## How would you define the React state?

This is a way for React to remember values from inside a component. For example,  the variables that are initialized at the root of a function. 

---


## When you use props over state?

Props are a way to pass data or functions to a React component. They can be used when the data is immutable (Not to change). Only The component will tell how the passed props (data) will be displayed.

---



## When you use state over props?

You use state when you need to change the passed data and make some operations before you output it for a display. You also use state when you want to keep the values from your components within that component.
 

---



## Does props and state “Immutable“?

The props are immutable, meaning they shouldn’t be changed once passed from the component. The state isn't, because they're like the variables you declared inside a function. You need to process it with more operations before the function returns its value.
Obtain Your Public IP Address In Console using cURL.
Tags: webdev, tutorial, networking
Published: 2022-09-17 16:50:44

## I. Introduction.

 In this article, I will share with you a trick, which you could use to obtain your public IP address instead of going to site like whatismyip.com or similar.

## II. cURL.
cURL is free tool, which according to its original website is for transferring data with URLs. You can download it from [here](https://curl.se/). It is **free** and **open source**.

## III. Obtain your public IP address.

Open **Command Prompt** or **Terminal** and type:
```
curl https://ipinfo.io/ip
```
After executing this, it will return your public IPv4 address.

## IV. Conclusion.
In this article, you were shown little trick, which you can use, when you have cURL installed. You can check your public IP in your favourite terminal or command prompt. cURL is useful tool, which is not big (a few MBs).

**
This article was originally posted in my [blog](https://sn0k3.wordpress.com/2022/09/17/check-your-public-ip-addres-using-curl/). You can check it [here](http://sn0k3.wordpress.com/) and you can follow me on Twitter. Thank you!
**
Elegant way to Calculate Mean and/or Mode
Tags: javascript, tutorial, beginners, codecademy
Published: 2022-09-17 16:48:05

## Introduction
As part of the [codecademy.com](https://codecademy.com) challenges, I came across this code challenge to 'Calculate Mean and Mode.' It appeared quite simple while reading the problem statement, but getting started raised a number of questions. As a result, I created this blog to share my experiences as I worked through the challenge.

## Challenge
Create a `statsFinder()` function that takes in a list of numbers and returns a list containing the mean and mode, in that order. As a reminder, the mean is the average of the values and the mode is the most occurring value. If there are multiple modes, return the mode that occurs first. Make sure that you write your functions and find these answers from scratch – don’t use imported tools!
For example, `statsFinder([500, 400, 400, 375, 300, 350, 325, 300]) should return [368.75, 400] `

## Solution

![Image representing the entire code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ht41d6r3wick2pltmzzs.png)
You can approach this challenge in a variety of ways, whether you're a beginner, intermediate, or pro; what matters is that you approach it by adhering to these fundamental principles (feel free to add more): 

1. Produce less code
2. It should be simple to understand.
3. Insert 'Single' or 'Multi-line' comments as needed.

### My Approach
When attempting to solve problems, I have 99.99% faith in my gut. When I looked at the challenge, I actually realized two things: 

1. Sum of array
2. Find duplicates and print the first occurrence (regardless of the length)

### Ways to solve
My initial thoughts were to use `for ... loop` however then realized this could be solved in short time using Array methods, thus use of `.filter()` and `.reduce()`

### Solution
Below is the solution I recommended:

```
function statsFinder(array) {
  // Check array length return error statement
  if (array.length === 0) return `Input error: argument is empty`
  // Arrow function to derive the sum of all values in the array
  const avgArray = (total, val) => total + val
  
  /*
    Below lines of code calculates mean 
    by dividing the result of .reduce() method 
    while mode arrow function to find duplicates
    using .filter() method
  */
  const mean = array.reduce(avgArray) / array.length 
  const mode = array.filter((val, index) => array.indexOf(val) !== index)
  return [mean, mode[0]]
}
```
Give it a try:

```
console.log(statsFinder([500, 400, 400, 375, 300, 350, 325, 300])) // [378.5, 400]
console.log(statsFinder([]))
```
**Useful links**
* .filter() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
* .reduce()  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

**Challenge**
https://www.codecademy.com/code-challenges/code-challenge-calculate-the-mean-and-mode-javascript 

**Try the code:** https://codepen.io/istealersn-dev/pen/wvjJxRX
Linux Shell Script set fixed IP
Tags: linux, shellscript, network
Published: 2022-09-17 16:47:38

Simple shell script to up the ethernet card on specific IP.

```
ifconfig eth0 down;				
ifconfig eth0 141.1.89.151  netmask  255.255.128.0 up;
route add default gw 141.1.47.142  eth0;
				
```
eth0: the interface of ethernetcard
Distributed Computing, the funky way
Published: 2022-09-17 16:31:31

---
title: Distributed Computing, the funky way
published: true
description: 
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ffxmjiflb2t5zl7r7kv.png
canonical_url: 'https://kevwe.com/weekly/202238'
# Use a ratio of 100:42 for best results.
---
The raise of Sea Monsters carrying giant parallelepiped loads on the back of a whale has taken away from us the creativity to invent new things.

"Cattle, not pets" it's the mantra, but still I see way too many animals camping around... all I want is just a damn good application that appeals, at any scale.

If I need to package an application so that it can be easily deployed, so be it! It should not be too strange a requirement, whether it needs to be deployed in my basement or in a Cloudy Way (TM).

You want easy life, then go on and buy the Kool Aid, if I want to be able to balance the load... I learn a load balancer.

You want to invoke zip-file packaged methods compiled in classes targeted by infinitely scalable API gateway: I'm ok to just have Rest webservices laying around.

You want to infinitely elastically expensively receive an asynchronous message: maybe I am ok to just learn and use ActiveMQ.

Maybe the age starts to play a role, but I start to be concerned when it becomes impossible to name things instead of brands, a bit like it is for soaps and beauty products.

There are wonderful services and products around these days, it's just that all products will come to pass, but what is behind them should remain.

I don't want pink elastic automagically fancy services: I want to know what happens with my data, and if possible, I don't want to give it to third parties:

https://kevwe.com/weekly/202238
New to react
Published: 2022-09-17 16:13:35

Hi new to this and currently learning react and need a bit of help every time I put npm install this pops up 
(⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠙ idealTree:TempTemplate: sill idealTree buildDeps 

I have changed node versions but it stills does the same thing any help would be appreciated (:
React with firebase 9 - Blog app
Tags: react, javascript, firebase, beginners
Published: 2022-09-17 16:13:23

In this tutorial, I developed a blog application with ReactJs and firebase 9.
deployed app here (Play around) - https://fir-app-68eac.web.app/

[](https://www.youtube.com/watch?v=_7gdsAfFV9o&list=PLNOLT1mOxGfpVTko9GqsjYduhd9cCJ6zT)
Does the perfect stack exist? (hint: nope)
Tags: webdev, stack, prototype
Published: 2022-09-17 16:09:46

[Photo by <a href="https://unsplash.com/@sauravs09?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Saurav S</a> on <a href="https://unsplash.com/s/photos/jenga?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>]

### Just a quick observation...

I'm expanding on a tweet:

{% embed https://twitter.com/javajoint/status/1571142013927706628?s=20&t=PLFftLSNUEJoDExNWh8QBQ %}

I'm working on a prototype that leans on Mapping, and being able to search by location.

My thought was to learn some new tech while I was at it, so my fantasy stack was:

* Remix
* Prisma, calling MongoDB
* Tailwind CSS, with Components, such as Adobe react-aria

_[and, a day later... a little update... I decided to focus on Next.js instead of Remix.  Two reasons: bigger community, and more potential job opportunities]_

As it turns out, I had to swap out two different tools:

* I swapped Prisma for Mongoose.  I need to be able to do Geo searching by Points (latitude and longitude).  Mongoose (an Open Source project) supported this way back in 2017, when I did an earlier iteration of my prototype.  For whatever reason, Prisma does not support this.  It has been an issue for over two years: [Geolocation/Spatial types support #1798 ](https://github.com/prisma/prisma/issues/1798).  I find it remarkable that a company with > $40M financing ([Source: TechCrunch](https://techcrunch.com/2022/05/03/prisma-raises-40m-for-its/)) has not yet implemented this.

* I swapped react-aria for [Material Tailwind](https://www.material-tailwind.com/).  I really liked that Adobe react-aria seemed to work with Tailwind.  I was hoping the dialog component would 'just work' in Remix (the date, time, calendar, and tabs components were fine).  No such luck (trying the example from codesandbox in straight up React did not work either). I reached out to the author of the dialog example (this is an official Adobe offering - we're not talking about some hobby project): no response.  Material Tailwind doesn't give me a nice calendar component, but I can live with that.  The things that I tried Just Work in Remix.

And that is the important part: pick tools where straightforward use cases Just Work.

Web Development often involves gluing together many moving parts, and it is all too easy to get distracted when things dont work (especially when there is no support).  Reduce the number of obstacles!

Focus on your prototype.  When some things dont work, swap for the things that do.  If it is a prototype, you want to focus on showing your idea, end to end.  Put yourself in the frame of mind of a potential user that is going to check things out for 5 minutes (they dont care which ORM you are using!).

This is as much of a reminder to myself, as anything else.
Whatsapp Portfolio Website
Tags: webdev, showdev, javascript, programming
Published: 2022-09-17 15:25:53

## **Introduction**

A portfolio website provides your information to consumers, potential clients, and job hires. It is the place to showcase your work and let the world know who you are and what you are up to.

When a potential client, HR, or anyone visits your portfolio site, they should get a feel of your strengths and what you are capable of. A good portfolio website will surely replace the old-fashioned resumes of job seekers. Building a portfolio and keeping it updated helps in this case. It also helps us to reconnect with what we have done in the past from a single place.

We all have a variety of portfolio sites to showcase what we do. My love for tech has made me think outside the box to build something unique, so I built this whatsapp portfolio site.

So without much explanation, let me showcase my Whatsapp portfolio site.

{% embed https://chat-portfolio-dhanushnehru.netlify.app/ %}

## **Idea**

![Whatsapp Portfolio UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ksmltzczs3u3daouwxh.png)

I just started this with the idea of replicating the WhatsApp UI, where portfolio details of a person can be gotten by chat. It is more of how you chat in WhatsApp.

## **About the site**

My objective in creating this site is to differ from the normal portfolio sites created and also to showcase something as a unique one. Being a full-stack developer who has worked mostly on the backend, I want to create a portfolio site by myself without any external tutorials. By building this whatsapp portfolio site, I want to learn something and use it as well.

The portfolio I built uses the following technologies:

- HTML

- CSS

- Javascript

### **Features**

- About

- Skills

- Resume

- Education

- Address

- Contact

- Projects

## **Further Improvements**

Still, some things to improve, like testing browser compatibility, updating project links, customisation, etc.

I'm even thinking about having people fill out a form and converting it into a Whatsapp portfolio for them.

I would definitely build another static portfolio site to showcase my works directly. Do drop your portfolio site below for more inspiration.


Thanks a lot for reading ❤️

Feel free to [subscribe to my newsletter](https://www.getrevue.co/profile/dhanushnehru) for more updates on this.
Follow me via [Twitter](https://twitter.com/Dhanush_Nehru), [Instagram](https://instagram.com/Dhanush_Nehru), or [Github](https://github.com/dhanushnehru).
Animating React App in Less than a Minute
Tags: javascript, react, webdev, angular
Published: 2022-09-17 15:21:00

## Motivation:
Building any kind of Web app requires Animations to look good we can add Animation by either third-party Libs like Framer motion or plain old CSS but problem is all of these options needs us to write a ton of code and define all animation timing and stuff we are going to skip all of those today and use [Autoanimate](https://auto-animate.formkit.com/) to do the animation for us.

## Introduction :
**Autoanimate**  is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, Svelte, or any other JavaScript application.

## Installation :
`yarn add @formkit/auto-animate`
that's all to install and config.

## Usase :
Just import `autoanimate `form @formkit/auto-animate and pass refrence of the parent element using `useRef`.
Now all children element will be animated whenever the are added, removed, or moved. 

```jsx
import { useState, useRef, useEffect } from 'react'
import autoAnimate from '@formkit/auto-animate'

const Dropdown = () => {
  const [show, setShow] = useState(false)
  const parent = useRef(null)

  useEffect(() => {
    parent.current && autoAnimate(parent.current)
  }, [parent])

  const reveal = () => setShow(!show)

  return <div ref={parent}>
    <strong className="dropdown-label" onClick={reveal}>Click me to open!</strong>
    { show && <p className="dropdown-content" >Lorum ipsum...</p> }
  </div>
}

export default Dropdown
```
that's it your Dropdown is animated. 
you can pass any element's ref and all child Elements will be animated like List as well.

## Customization :
Autoanimate also provides `useAutoAnimate` hook to customise animation if we need it.

```jsx

App.jsx
import { useState } from 'react'
import { useAutoAnimate } from '@formkit/auto-animate/react'

const App = function () {
  const [items, setItems] = useState([0, 1, 2])
  const [parent] = useAutoAnimate({ duration: 500 })
  const add = () => setItems([...items, items.length])
  return <>
  <ul ref={parent}>
    {items.map(
      item => <li key={item}>{ item }</li>
    )}
  </ul>
  <button onClick={add}>Add number</button>
  <button onClick="{() => enableAnimations(false)}">Disable</button>
</>
}

export default App

```

this is post is focussed on React it's even easier on Vanilla JS basically you can use this on Virtually any JS project. 

Here is the [Link for official Website](https://auto-animate.formkit.com/) Cheers.
Reduzindo acoplamento no desenvolvimento de software
Tags: java, architecture, braziliandevs
Published: 2022-09-17 15:14:11

Existem vários princípios que ajudam na implementação de códigos mais desacoplados e tudo mais, aqui a ideia e exemplificar como podemos fazer isso.

### Exemplo

Imagine que estamos implementando um código que vende jornal, teremos uma entidade que representa a Banca e outra que representa a Carteira de um cliente.

**Implementação acoplada**

```java
public void pagaJornal(BigDecimal valorJornal, Carteira carteira){

  if(carteira.getSaldo().compareTo(valorJornal) > 0){
    cateira.debitaSaldo(valorJornal);
  }else{
    // exception SaldoInsuficiente
  }

}
```
Nessa primeira abordagem a Banca pega a carteira do cliente verifica se tem o valor necessário e caso sim tira o valor do jornal de dentro da certeira do cliente, talvez isso não seja tão legal pois a Banca sabe muito sobre a carteira do cliente. 

**Implementação desacoplada**

Agora vamos implementar uma solução de uma forma mais desacoplada.

```java
class Carteira{

  private BigDecimal saldo;

  public void paga(BigDecimal valorADebitar) throws SemSaldoException  {
    if(this.saldo.compareTo(valorADebitar) > 0){
      this.saldo = this.saldo.substract(valorADebitar);
    }else{
      throw new SemSaldoException();
    }
  }
}

class Banca{
  public void pagaJornal(BigDecimal valorJornal, Carteira   carteira){
    try{
      carteira.paga(valorJornal);
    }catch(Exception e){
      // exception SaldoInsuficiente
    }
  }
}
```

Nessa segunda abordagem a regra de saldo fica dentro da própria carteira, dessa forma a entidade Carteira está mais livre para cuidar da sua responsabilidade, caso seja necessário incluir essa mesma funcionalidade em outra parte do projeto agora será mais simples. 

### Referência 
**Principio de Demeter**
https://pt.wikipedia.org/wiki/Lei_de_Demeter

**Engenharia Moderna**
https://www.amazon.com.br/Engenharia-Software-Moderna-Marco-Valente/dp/6500019504

### Conheça outros papos

{% embed https://dev.to/cassunde/observer-com-propertychangelistener-dhf %}
JWT(JSON web token)
Published: 2022-09-17 14:36:37

Been awhile. 

currently trying to learn how to implement login function to my python project. the project itself doesnt really require user authentication/authorization but I thought it would be a good place to learn how to do so.

My first approach was to look in to `JWT`.
JWT is consisted of three parts, header, payload and signature.

I liked how they made this to secure the user information, by not storing the user info into the db.
I learned how to generate the token but utilizing this token to access designated user info is going to be a different challenge to me. 

Hopefully soon, I'll learn how to actually "authorize/authenticate" so that i can make my projects more realistic. 

TL;DR : learning how to play with JWT.