teleren/devto huggingface dataset:
Pickaboo #0
Tags: react, todayilearned, codenewbie, beginners
Published: 2021-07-31 12:34:48

### hello internet.

so after a long time since i stopped, i came back to learning; but as it turned out i was kinda all over the place, so i wanted to started from scratch (well not really!)

what i will be doing is trying to make production ready web-apps as fast as possible, the point of these apps is to learn one tech really well so i can increment my learnings  (tech by tech)

i saw that it will be good to start with react, but (because i am bad at UI design) i will be using MaterialUI to make it easy for me to get the project up and running, maybe after getting comfortable i will make an app with vanilla react.

## what is Pickaboo

Pickaboo is the most clever name that i could come up with for a web-app that makes it easier to post, find and collect your favorite pickup lines

i can't discuss all the features am thinking of now, because i want this to be just an introduction to what i am doing

## what i am using to build Pickaboo?

because i want to mainly focus on learning React; i am using:

- React with MaterialUI
- Strapi for the backend
- MongoDB as a database 

## what I'm planing to learn from building Pickaboo?

first and foremost, i want to be able to build a responsive and accessible UI using React (MaterialUI), along side that i want to learn
- state management using React alone
- authentication
- folders structuring and refactoring following best practices
- VIM (yeah i want to do all the cool stuff with only my keyboard)

i know that i will not be able to learn all of that from Pickaboo alone (because this will be my first "real project"), but i think that i will learn a lot.

### what i have done so far

i was able to setup the strapi API, and consume it with React. all i have managed to do was having cards that display the pick-up-lines, but i didn't get much into styling for now.

this is the repo of the project
https://github.com/oussamaghrib/pickaboo

well that's it!, good luck to me... i guess!
A Quick 10-Second Programming Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2021-07-31 12:00:23

---
title: "A Quick 10-Second Programming 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/5e1258c20b362.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:___ Why did the computer keep sneezing?

___A:___ It had a virus!
 -->
Online/physical Carding Explained (Online Fraud Part 1)
Published: 2021-07-31 11:42:45

---
title: Online/physical Carding Explained (Online Fraud Part 1)
published: true
description: Fraud is something I have been doing for many years, even before internet fraud was a thing..
tags: 
//cover_image: https://blog.akalanka.uk/wp-content/uploads/2021/07/carding-akalanka.jpg
---
Read: https://blog.akalanka.uk/2021/07/24/online-physical-carding-explained-online-fraud-part-1/
JavaScript Named Exports
Tags: javascript, codenewbie, beginners, webdev
Published: 2021-07-31 11:31:59

A very basic concept in JavaScript ES6 is `Named Exports`. This is a post with *examples* of two very simple approaches to *export* several values from a *single module*. It can be used *zero* or *multiple* times per module.

###Named Exports

When we name export a variable or function, we can import it in *another file* and use it without having to rewrite the code.
We can export multiple things, for each thing we want to export.
The first *example* is given below:

```js
export const addition = (a,b) => {
  return a+b;
}

export const multiplication = (a,b) => {
  return a*b;
}
```

Another approach for *named export* is by creating *multiple functions* in one *single module* and placing them all in the export statement. The following is an example of that:

```js
const addition = (a,b) => {
  return a+b;
}

const multiplication = (a,b) => {
  return a*b;
}

export {addition,multiplication} ;
```

######Two different methods, working the same way! Choose which one is best for you!
How to create a popup menu in React that closes on clicking outside (module)
Tags: nextjs, react, cra, webdev
Published: 2021-07-31 11:17:06

So here you are, you want to make your popup in your website but you can't find a good tutorial on how to do that. Fear not, your friendly neighborhood react developer is here to save the day.

First things first, we are gonna use an external npm module to make things easier.

```yarn add react-click-away-listener```
or
```npm i react-click-away-listener```

Now, on to the syntax:

You can find additional docs here: [Link](https://www.npmjs.com/package/react-click-away-listener/v/0.4.2)

```jsx
import { useState ) from 'react';
import ClickAwayListener from 'react-click-away-listener';
 
const App = () => {
    const [popup, setPopup] = useState(false)
    return (
        {/* The option to open the popup */}
        <button onClick={() => setPopup(true)}>Click Me</button>
        {/* The popup itself */}
        {popup && (
            <ClickAwayListener onClickAway={() => setPopup(false)}>
                    <div className={'popup'}>
                        <li>Items of the Popup</li>
                        <li>Items of the Popup</li>
                        <li>Items of the Popup</li>
                    </div>
            </ClickAwayListener>
        )}
    )
};
```

There you have it, that's basically how you can make a click away listening popup in react. I have excluded the styling portion for this article, but I'll be sure to write up on it soon.
2021 CS50x - WEEK 8
Tags: webdev, html, css, javascript
Published: 2021-07-31 11:03:49

I've advanced to week 8 in Harvard's CS50x course which focuses on Web Development basically with HTML, CSS and JavaScript being the focus. The problem set for this week is to create a page using HTML,CSS,JavaScript and Bootstrap.

So far in the lecture I learned a fair bit about Web Dev (I'm into Software Dev) but the problem is a bit challenging for me because I have no experience in HTML, CSS/Bootstrap and Js so I've got to start learning them, at least the basics which is what I'm doing using freeCodeCamp.
But at the same time I'm also trying to see what I can do with my current little knowledge on HTML/CSS, the specifications for the problem set is a bit steep for me but I will definitely pull through(hopefully).
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfyuz2svn4usx82x264w.png)

So far what I've been able to create with my skillset is:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4m9a3c6rixpc4lavx2d.png)

I'm thinking of doing Khan Academy's HTML, CSS, Js lectures because I prefer video lectures to just texts on screen but so far I've been using freeCodeCamp and that's what I've been able to come up with, I still have a LOT to do and 3 more pages to create, not even done with the first, and I haven't used JavaScript or Bootstrap at all.

I will drop an update in a few days when I improve my skills and do something better.

Also please if you have any tips that can help, tell me in the comments.
Ｉｍｐｏｒｔａｎｔ  ｄａｔａ
Tags: html, programming, cybersecurity, css
Published: 2021-07-31 10:50:27

Ｉｍｐｏｒｔａｎｔ  ｄａｔａ

WIGLE.net is a website for collecting information about the different wireless hotspots around the world.

Users can register on the website and upload hotspot data like GPS coordinates, SSID, MAC address

FOLLOW FOR HACKING PAST
Updating a state hook object
Tags: react
Published: 2021-07-31 10:47:06

You might want your state hook to be an object. Which is fine, it can absolutely be one.
```
  const [state, setState = useState({
    language: 'React',
    proficiency: 'confused'
  });
``` 

The trouble comes when you try to update it. You might think you can do this:
```
setState(state.proficiency: 'lost');
```
Seems logical, right? Except that as well as updating that one object, it's also wiped the other one. Thanks React.

The solution is to set it to itself when you update:
```
setState({ ...state proficiency: 'beginner'});
```

Here you're setting an object. The ...state bit destructures it. In other words, tells React 'here it all is'. And then after that, you can update the element you want to update. You don't need to put 'state' before it, because it already knows that from the destructuring.
Influence: The Psychology of Persuasion
Tags: book, influence
Published: 2021-07-31 10:33:09

---
title:Influence: The Psychology of Persuasion
published: true
description: 
tags: book, influence
cover_image: https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1391026083l/28815.jpg
---
I came to know about this book while surfing twitter and reading an article about Shopify CEO Tobias [two books that made me billionaire](https://www.inc.com/jessica-stillman/shopify-tobias-lutke-andrew-grove.html). The first book [Influence: The Psychology of Persuasion by Robert B. Cialdini](https://www.goodreads.com/book/show/28815.Influence) deals with science of persuasion. At first I thought of it as another self help book but it turned out be more of a science book describing various persuasion elements by providing references to various research studies that have been conducted around the world.

Highly recommend reading this book. In case time is an issue this [article by Alan Trapulionis](https://entrepreneurshandbook.co/two-books-that-turned-a-26-year-old-programmer-into-a-billionaire-8990e52065b1) does a good job of summarizing the core learnings of the book.

There is an [updated May 2021 version](https://www.amazon.ca/Influence-New-Expanded-Psychology-Persuasion-ebook/dp/B08HZ57WYN/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=) with a new principle Unity. I read the older version, can't wait to get my hands on the new one.
How does it long to Learn Python 	
Published: 2021-07-31 10:09:34

Overall, it can take somewhere in the range of five to 10 weeks to learn the essentials of Python programming, including object-situated programming, fundamental Python sentence structure, information types, circles, factors, and capacities. Eventually, however, how long it requires to learn Python relies upon how much experience you have with programming dialects, web improvement, information science, and other related fields. 
In a Python course like Brain stations, you'll learn center ideas like libraries, word references, and records, which are required information for an information centered job. The right preparing will give you a key comprehension of Python, which thus empowers you to learn more mind boggling AI and information science ideas pushing ahead. Learning Python, however, is generally simple. 
However it's thick, with a multitude of libraries to learn and encode through, Python's linguistic structure is significantly basic, and its ideas are moderately direct. The simple punctuation makes for fast learning and adds to a by and large intuitive and smoothed out coding experience. That truly facilitates the responsibility on your mind as you dive into greater and more intricate activities. 
Python is additionally an exceptionally adaptable language. It is utilized in a wide range of sorts of tasks and by numerous huge associations, including Facebook, NASA, Reddit, and Amazon. Enormous organizations love its force and versatility, so the language can be required to keep on ascending in popularity all throughout the planet. There's not really a tech work that you can't make a difference Python to, which will make you more important to any business or customer. 
Python's hearty cluster of libraries smoothest out the coding cycle monstrously since you can just info activity from the library into your code. Shockingly better, since Python is open source, the rundown of libraries and assets is continually developing. As Python gains much greater popularity, clients will discover more adaptable libraries that will assist them with writing code in less time and smooth out existing substance.
Changing vs code repository from master branch to main branch.
Tags: vscode, github, webdev, programming
Published: 2021-07-31 09:52:14

I spent the last 6 hours trying to initialise my repository on vs code and changing the master branch to main, here is how I finally did it. 
I created an empty file and opened it on vs code, like I should. Then I went to github and created a repository after which I copied the url.

By default if you initialise a repository on vs code it is set to the master branch which I didn’t want. So I clicked on View (at the nav bar) and clicked on command template, it brought out a search bar where I wrote "Git: Add remote" (it auto fills) and clicked on it.

It asked for the url of my repository which I provided and also asked for a name which I gave it (anything goes) after wards i clicked enter and in command template I typed "Git: Checkout to" which brought out the master branch and the url I provided below, I clicked on the Url and master branched icon at the right bottom of vs code changed to main. I then proceed to commit and push to git hub which updated my main branch without creating a master branch or promoting any errors.

I hope this helps whoever needs it, and I’ll advise you add your Repository url and changing the master to main before commiting, other wise it updates in master and I don't know how to change it afterwards.
I hope this helps someone and I still don’t know why it’s not set to main by default.
Help 🙏
Tags: beginners, help, guide, discuss
Published: 2021-07-31 09:51:06

 Hey, I'm a final year student studying computer applications from india, can anyone please share some tips or guide me for product based companies preparation.

I know basic DSA ,intermediate python language, much familiar with other computer science subjects such as os, networking, DBMS, digital logic.

Hoping for help from the community 🙏.
Version 0.8 of the GraphQL API for WordPress is now available 🚀
Tags: graphql, wordpress, webdev, news
Published: 2021-07-31 09:46:03

Version `0.8` of the GraphQL API for WordPress is now [available for download](https://graphql-api.com/download) 🎉

This release focuses on three areas:

1. Refactoring the codebase to enable extensions
2. Further satisfying the GraphQL specification
3. Completing the GraphQL schema

Release notes: https://graphql-api.com/blog/released-graphql-api-v08/
How to Add Visual Studio Code Browser Preview Extension
Tags: vscode, browserpreviewextension
Published: 2021-07-31 09:45:36

Sometimes, it is hard to switch between your browser and your editor this is a huge problem for people who like to share screens or do record screens for videos not only them but even us who don't do it. It is not easy since it involves switching between browser and editor, so today it will all be history starting from now no more pain let's get started.

**Open Vscode**

and go to extension or just click **ctrl + shift + x**


Search for Browser Preview it should look like this and then install.


![Desktop screensh (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627723921734/xX9kXRujr.png)

now click ctrl + shift + p to open command palette 

search for Browser Preview and then click enter it should look like this.


![Desktop screensh.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627724144365/DSvODAp3n.png)

**As a conclusion**, I am happy to see this extension because it is going to make life much easier, and I am super happy to see what you can do with it, and I am posting every day about pern stack and some other technologies. Thank you and have a nice day.
Multiple buttons only one active on click
Tags: javascript, html, css
Published: 2021-07-31 09:22:23

Today I want to share with you how to do an effect, that if you have multiple buttons and you want to add active styling class on click but when you click on other button remove active class from last button and add it to the latest clicked. Interested so let's get into it. Here's how to accomplish it.

1 Select all buttons. I named my variable btnsTip and selected them through data attribute, but it's up to you.
`const btnsTip = document.querySelectorAll("[data-btn-tip]");`

2 Add variable where we'll be storing last clicked button and set its value to null.
`let activeBtn = null;`

3 Loop through them and for each, create event listener on click and put event (e) in the parentheses to access it later.
```
btnsTip.forEach((btnTip) => {
  btnTip.addEventListener("click", (e) => {
  });
});
```

4 Do check if active button isn't equal to null because if it was, that will mean that there's no element stored because it's default variable value, and isn't equal to current target because we don't want to remove class on double click on current element. And we remove active class from our variable that mean that we remove active class from our last element.
```
btnsTip.forEach((btnTip) => {
  btnTip.addEventListener("click", (e) => {

    //New code here
    if ((activeBtn === null && activeBtn !== e.currentTarget)) {
      activeBtn.classList.remove("active");
    }
    //

  });
});
```

5 And last step we add active class to current element and set our activeBtn variable to current element that we have clicked.
```
btnsTip.forEach((btnTip) => {
  btnTip.addEventListener("click", (e) => {

    //New code here
    e.currentTarget.classList.add("active");
    //

    if ((activeBtn === null && activeBtn !== e.currentTarget)) {
      activeBtn.classList.remove("active");
    }

    //New code here
    activeBtn = e.currentTarget;
    //

  });
});
```

Full Code Down Bellow

```
const btnsTip = document.querySelectorAll("[data-btn-tip]");
let activeBtn = null;

btnsTip.forEach((btnTip) => {
  btnTip.addEventListener("click", (e) => {
    e.currentTarget.classList.add("active");

    if ((activeBtn === null && activeBtn !== e.currentTarget)) {
      activeBtn.classList.remove("active");
    }

    activeBtn = e.currentTarget;
  });
});
```

If you liked my post or was it useful to you, Like, Share, and Comment :)
Fun Q&A bot for Microsoft Teams Node.js
Tags: msteams, node, vscode, bot
Published: 2021-07-31 08:53:57

Are you looking for a fun project for your next assignment 🗒?
Did you want to develop a chat bot 💻?

Then you'll like this little project I am sharing here with you, whether you want to deep dive into the details or not 😉. 

**Use case**
- I can use a BOT to put a question or a thought in the Microsoft Teams channel/group chat conversation.
- My team mates can respond to the question with a form to put free text in.
- I can check how many team mates responded in the same card with their responses, real time. 

**🚀🚀🚀 End result?**

![uam](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqtzxdcc0rwxqk9p2eyo.gif)

**💻💻💻 Source**
Check out the full source code here [https://github.com/rabwill/cardBot-TS](https://github.com/rabwill/cardBot-TS)

**📙📙📙 Read the article**
If you wanna deep dive into how it is developed checkout my original blog post here 👉🏽[https://rabiawilliams.com/teams/uam-bot/](https://rabiawilliams.com/teams/uam-bot/)
Learnings from "One simple trick to optimize React re-renders"
Tags: react, performance, codesandbox
Published: 2021-07-31 08:00:59

I read a great blog by Kent about avoiding unwanted re-rendering. [One simple trick to optimize React re-renders](https://kentcdodds.com/blog/optimize-react-re-renders?ck_subscriber_id=1240852553&utm_source=pocket_mylist)

Here is what I learned,
(Please read the original blog also 👍)

### The example(cited from the blog)

Although, the Logger component doesn't change, it is rendered when `count` is changed.

![Screen Recording 2021-07-31 at 04.55.35 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfv2mojusx72ig1nlnqv.gif) 

### What will stop re-rendering

> In summary, if you're experiencing performance issues, try this:
1. "Lift" the expensive component to a parent where it will be rendered less often.
2. Then pass the expensive component down as a prop.

You can check the code and play with it in this codeSandbox.
Please comment-out/uncomment before and after code, and see the difference 👀

{% codesandbox 1qs32 %}

### Details in behind

The highlighted parts are the ones that are the same between renders by clicking the increment button

![Image 2021-07-31 at 4.38.41 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pm84tu0xczh2223egkyr.jpg)
 
The case on the left creates a new object for Logger component every time, whereas the case on the right does not!

## Reference
[One simple trick to optimize React re-renders](https://kentcdodds.com/blog/optimize-react-re-renders?ck_subscriber_id=1240852553&utm_source=pocket_mylist)
Python Editor
Tags: python
Published: 2021-07-31 07:43:08

## pyrun editor

![Python Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oieh9q2yz0p4qz5jlk8x.png)

This is a Python code editor to execute .py files. Facilities like saving, opening and compilation of files are provided. The Gui has been designed using Tkinter and factory functions implemented by tkinter.filedialog and subprocess module .


This project has been build by following Programming Hero's [Create your Own IDE](https://www.youtube.com/watch?v=f1u3me4GYmw) video from YouTube.







## 📑️ Further Documentation
The following docs have a great explaination on the tools and modules used in this project:- <br>
(1) [tkinter.filedialog](https://docs.python.org/3/library/dialog.html) <br>
(2) [tkinter](https://docs.python.org/3/library/tkinter.html) <br>
(3) [subprocess](https://docs.python.org/3/library/subprocess.html) <br>
(4) [pipes](https://docs.python.org/3/library/pipes.html)

You can find the project here: [REEKRAJROY/pyrun-editor](https://github.com/REEKRAJROY/pyrun-editor)

Any suggestions for improvement are more than welcome.
HOVER.CSS
Tags: react, css, less, scss
Published: 2021-07-31 07:39:15

This is one of the most impressive and helpful websites out there!
this has effects of buttons and effects that is pretty mind blowing.Its written in LESS,SCSS and ofcourse CSS3.
All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours.

Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place.