teleren/devto huggingface dataset:
Day 262: Approach with Caution
Tags: hiphop, code, coding, lifelongdev
Published: 2020-11-23 23:17:30

_liner notes_:
- Saturday : Spent some time figuring out how to do push notifications with my new side project. There's quite a bit to it. Looks like Firebase has its own way to do it so that looks like how I'll be doing it. Time flew by and the next thing I knew it, it was time to do the show. As usual, had a great time. Got a little ranty with all the things happening now. haha The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of a graph showing the chart of new cases of Coronavirus in the United Sates with the words Novemeber 21st 2020, On Vacation](https://dev-to-uploads.s3.amazonaws.com/i/fq25k4udwog65n24skbf.jpg)

- Sunday : Did my post radio show promo work. Looked more into sending push notifications in my side project. Got to demo my last side project (https://otech.events) with a meetup organizer. It worked for the most part, but I'm still having issues with the scenes not really showing up. Really need to figure it out.

- Professional : Got to go on another live stream show for work. Learned some Ruby with Rails. Pretty cool language. Then right after that, I met with my manager. It was a good talk. Then after that, I had another meeting with the team working on the CLI tool. I demoed what I was working on and got some good feedback. I like to show everything that is possible and then scale back where needed. I rather people see what is possible and then decide on what they want to see in the final product. Then rest of the day, worked on the CLI.

- Personal : So, on my break, I bought a new camera, the Insta360 One R. It does both 360 degree and 5.3K high res videos. I've been looking into for a while, but they have recently added some new updates that fixed some of the issues I had and it can be used as a webcam! With stuff like this, I really approach with caution and have been watching reviews and footage taken with the camera on YouTube. What really made me pull the trigger this week was that they were having a Black Friday sale for a kit that included the camera and a lot of other accessories. I also purchased a case, mic adapter and a larger battery that were all also on sale. 

![The mountains of Ghandruk, Nepal](https://dev-to-uploads.s3.amazonaws.com/i/rm49kxw9943pbj9zv6w7.jpg)

Looking to spend the rest of the night working on fixing the scenes for my site and looking into push messages using Firebase. Going to go to bed early. It's still cold. haha.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 39p9xEGnIEE %}
How to detect inactive users with Idle Detection API
Tags: javascript, chrome, news
Published: 2020-11-23 22:56:14

This post is a summary of a [web.dev article](https://web.dev/idle-detection/).

## **What is the Idle Detection API?**
Idle Detection API is one of Chrome's origin trials, which means it is a feature in progress planned for a release.

Idle Detection API can be used to detect user inactivity based on a variety of measurements such as a mouse or keyboard inactivity, screensaver activation, or locking the screen. The threshold is defined by the developer, based on the desired result.

## **Usage of the Idle Detection API**
Check if **idleDetector** is available:

```javascript
const hasDetectorAPI = 'IdleDetector' in window;
```

Request permission for **idleDetector**:

```javascript
await IdleDetector.requestPermission();
```

Starting the **idleDetector**:

```javascript
const controller = new AbortController();
const signal = controller.signal;

const detector = new IdleDetector();

detector.addEventListener('change', () => {
  console.log(detector.userState); // idle | active
  console.log(detector.screenState); // locked | unlocked
});

await detector.start({
    threshold: 60000,
    signal,
});
```

## **Use cases of Idle Detection API**
Some examples where Idle Detection API can be utilized:

- Apps with **expensive computation** (to put halt to computation)
- Chatrooms (to handle **activity status**)
- Forms / Documents (to **autosave** on user inactivity)

... and many other use cases.

## **Support Idle Detection API release**

If you wish to see and use this API, check out this [link](https://web.dev/idle-detection/#show-support-for-the-api) on how to support its release.
How to test media queries with Chrome (or Edge)
Tags: webdev, beginners, productivity, css
Published: 2020-11-23 22:43:10

Languages: [🇪🇸] [Español](https://dev.to/equimancho/como-probar-media-queries-con-chrome-4kb5) - [🇺🇸] [English](https://dev.to/equiman/how-to-test-media-queries-with-chrome-5d8c)

---

Whether you want it to or not, modern web development is directly tied to responsive design. There are media queries everywhere, even [Bootstrap](https://getbootstrap.com/) and [Tailwind](http://tailwindcss.com/) use some sort of breakpoints related to that.

# Media Query Viewer

Sometimes we think it's hard to test it, but Chrome/Edge DevTools has a hidden gem to deal and handle easily with those breakpoints. I will show you how to activate this superpower.

1. Open Chrome/Edge DevTools
2. Enable Mobile view
3. Ensure select "Responsive" on the device list.
4. Select "show media queries"

![media-queries](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gj3fen7pj43z35xiop63.gif)

# Query Bars

Depending on media queries defined on the page you would see 4 bars in different colors.

Preset sizes (Gray):
![preset](https://dev-to-uploads.s3.amazonaws.com/i/fftkagwy6tbxb1n6ao0h.gif)

Max width (Blue):
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7ovbpktpxtxa39ygpgwu.gif)

Max and Min width (Green):
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sly1zfodefwo5h5auzft.png)

Min width (Orange)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yhk81mlqklzcvrrsajkd.gif)

# Example 

The Bootstrap page it's an excellent opportunity to see this feature in action because has multiple types of media queries.

![example](https://dev-to-uploads.s3.amazonaws.com/i/c2b2gqfc1xos5sn34tat.gif)

# Source Code

You can also right-click over a selected media query and see it directly on the source code.

![source](https://dev-to-uploads.s3.amazonaws.com/i/6u2ck7sbxv0b7kxh4xao.png)

# Bonus Track

If you want to see all media queries in action at the same time I'll recommend you take a look at [Responsively](https://responsively.app/).

![responsively](https://dev-to-uploads.s3.amazonaws.com/i/4nbmm85xniooghsv59bu.png)

It's an amazing and open source project that will make your job easier as a developer.

---

**That’s All Folks!**
**Happy Coding** 🖖

[![beer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkgsx4aw6qn9i9ax6as9.png)](https://github.com/sponsors/deinsoftware)
My HacktobereFest 2k20 experience 
Tags: microclubusthb, hacktoberfest, opensource, github
Published: 2020-11-23 21:58:38

Almost 30 days after my 4th PR I am now finally writing this Dev article to share my HacktoberFest experience. This year I contributed to the famous month long celebration of open source for the first time ever and I can already tell that it’ll become a tradition for me. 

My 4 PRs were submitted to the Micro Club’s HacktoberFest2k20 repo. The club’s repo was organized in a way that gathers projects, tutorials, and documentation. My contributions were added to the project directory and consisted in a number of jupyter notebooks that gave step by step [commenting your code is IMPORTANT] explanations of data visualization labs with matplotlib and machine learning lab with scickit-learn.
Data visualization was done on a recent dataset regrouping Covid 19 stats about cases (confirmed cases, deaths and recoveries) across different countries first as a table of data then as time-series which allowed the implementation of different plt representations (histograms, graphs, circles..).

For the Machine learning notebook, the goal was to predict flight delays using the RandomForestClassifier model available on sklearn.ensemble module. Once again each step was commented from loading the dataset and splitting it into the needed sets to the display of the test results. 

Finally after my 4PRs were merged, I OF COURSE made my personalized Octocat that I call “killer next door”  a female octocat that totally looks inoffensive …. But beware.
Can you use Python/Django, without being good at styling? (Material-ui, bootstrap, ect...)? 
Tags: react, python, javascript, django
Published: 2020-11-23 21:21:45

I’m running into, I really don’t like styling because of how vague it is. Then, hooks, I don’t like the react hooks, it’s also tough to get REAL EXAMPLE of hooks other than a button counter. Or even styling, it’s styling a todo app, instead of useful styling. 

Can you use Python-Django without being good at styling?
How to fix the 'Received "true" for a non-boolean attribute' error
Tags: styledcomponents, emotion, react
Published: 2020-11-23 21:09:16

---
title: How to fix the 'Received "true" for a non-boolean attribute' error
published: true
description: How to fix Received 'true' for a non-boolean attribute error when using styled-components or emotion.
tags: styledcomponents, emotion, react
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/xcxeceekrp70uzmtbjw5.png
canonical_url: https://maximeblanc.fr/blog/how-to-fix-the-received-true-for-a-non-boolean-attribute-error
---

If you use `styled-components`, you maybe encountered the following error.

```bash
Warning: Received "true" for a non-boolean attribute
```

There is an official solution that you can find [here](https://styled-components.com/docs/faqs#why-am-i-getting-html-attribute-warnings). I'll present an alternative to this solution.

The trick is to use the [unary plus operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus) to convert boolean to number.

```js
// Convert boolean to numbers
+true; // 1
+false; // 0

// Conditions are still valid using 0 and 1
0 ? "jean" : "smaug"; // smaug
1 ? "jean" : "smaug"; // jean
```

In order to make a real world example, we'll style the `Link` component from `react-router`.

```jsx
import styled from "styled-components";
import { Link } from "react-router";

const StyledLink = styled(Link)`
  color: ${({ inverted }) => (inverted ? "white" : "chartreuse")};
`;

function Navbar() {
  return (
    <nav>
      {# Bad #}
      <StyledLink inverted={true}>Home</StyledLink>

      {# Good #}
      <StyledLink inverted={+true}>About</StyledLink>
    </nav>
  );
}
```

Fixing this error is very simple. You just need to add `+` before your booleans values. According to [MDN](https://styled-components.com/docs/faqs#why-am-i-getting-html-attribute-warnings) unary operator is the preferred way for number conversion.

You can find the banner image [here](https://unsplash.com/photos/f7xoQpzl-Mo).

Thanks for reading.
Working with multiple terraform's versions like a charm
Tags: terraform, todayilearned
Published: 2020-11-23 21:08:11

If you are a node.js developer, you'd listen something about [**NVM**](https://github.com/nvm-sh/nvm) to manage many *node.js* versions.

Having seen this, with the help of my tech lead [@wayne] (linkedin.com/in/wayne-almeida-conceicao/), I found a way to move between terraform's versions, as a time traveler in the best style Netflix 's Dark series.

![](https://media0.giphy.com/media/l3mZdnvjDhaPI9N8Q/giphy.gif?cid=ecf05e47nzf7yf5af2n3pvk2ihdckfwftw70uozfgr0k9rpb&rid=giphy.gif)

## [tfswitch](https://tfswitch.warrensbox.com/) 👾
<TL;DR> The **tfswitch** command line tool lets you switch between different versions of terraform. If you do not have a particular version of terraform installed, tfswitch lets you download the version you desire. The installation is minimal and easy. Once installed, simply select the version you require from the dropdown and start using terraform.
```bash
curl -L https://raw.githubusercontent.com/warrensbox/terraform-switcher/release/install.sh | bash
sudo bash install.sh
```
After a few minutes just run the command below
```bash
tfswitch
```
And now you are able to navigate without a DeLorean through the terraform versions
![](https://media3.giphy.com/media/7TZvWKVkm0xXi/giphy.gif?cid=ecf05e47s63gbzsj62vw9hy7yalqc5l92xile0xkezq6gkq2&rid=giphy.gif)
S2E4 Learn JMeter Series - HTML Link Parser and HTTP URL Re-writing Modifier
Tags: performance, webperf, tutorial, testing
Published: 2020-11-23 20:59:18

Welcome to Learn JMeter Series!

In this season two, episode four, you will learn following:

🔹 HTML Link Parser 
🔹 HTTP URL Re-writing Modifier
🔹 How to spider the web?

{% youtube Q9bTKALheoY %}

☑ Buy me a tea 🍵 : https://www.buymeacoffee.com/qainsights
☑ [My Blog](https://qainsights.com)
☑ [My Udemy Course](https://www.udemy.com/course/performance-testing-using-truweb)
Released 1.4.4 - careers.sh
Tags: career, startup, update, motivation
Published: 2020-11-23 20:54:24

![careers.sh-placeholder](https://dev-to-uploads.s3.amazonaws.com/i/mqm6oyhxzpkfqcawrugd.png)

## [1.4.4] - 2020-11-23 [stable]
- Added pagination to company view limiting listings to 20 per page. 
- Added new list of exclusions in htaccess
- Added number of companies in title when browsing company directory
- Removed more unnecessary javascript
- Updated translation files
- Minor css change on job posting to make them more readable

[https://careers.sh](https://careers.sh)

## Why we post this?
Keeping track of what we work on, and communicating our updates keeps us accountable, and motivated.
How to install Tailwind CSS 2 with Laravel 8
Tags: tailwindcss, laravel, npm, tailwindcss2
Published: 2020-11-23 20:53:38

If you want to use the latest version of Tailwind CSS (version 2 released on November 18, 2020) with your Laravel 8 application, you need to:
- install the latest version of Tailwind CSS;
- install the latest version of PostCSS;
- install the latest version of Autoprefixer;


### PostCSS8 or POSTCSS7
If you try to install these _npm_ packages on your Laravel application, you could obtain an error about PostCSS compatibility: "PostCSS plugin tailwindcss requires PostCSS 8".
On the Tailwind CSS website you could find a suggestion about installing a "special version" of Tailwind CSS with some backward compatibility with PostCSS7. In some contexts this workaround could help you and it works. But on Laravel 8 application, it could not work and I could have a suggestion for you (I tried commands below, with my Laravel 8 projects).

### Install Laravel Mix 6 (BETA)
My suggestion is to use PostCSS8, the latest version of TailwindCSS and, because Laravel uses Laravel Mix, try to use the incoming release of Laravel Mix version 6 (in these days is still in Beta).
So the command is:

```bash
npm install tailwindcss@latest postcss@latest autoprefixer@latest laravel-mix@6.0.0-beta.14
```

### packages.json fine tuning
To complete the installation you need to make some fine tuning to your _packages.json_ file.
In _packages.json_ file in the "_script_" section you need to eliminate the _--no-progress_ option because it is no more available on LaravelMix 6.
So your "_production_" script could be:
```
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js  --config=node_modules/laravel-mix/setup/webpack.config.js"
```

### Feedback are welcome
After these commands, "you are living on the edge" because you are using the latest version of TailwindCSS and you are using a beta version of Laravel Mix.

Let me know your feedbacks in the comment below.


### Resources
- [Tailwind CSS version 2 released on November 18, 2020](https://blog.tailwindcss.com/tailwindcss-v2)
- [Official Documentation for install Tailwind CSS 2](https://tailwindcss.com/docs/installation#install-tailwind-via-npm)
- [Install Tailwind CSS with PostCSS 7 compatibility](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build)
- [Laravel Mix version 6.0.0 BETA](https://github.com/JeffreyWay/laravel-mix/tree/v6.0.0-beta.14)
Do skills will get you close to your dream job?

Published: 2020-11-23 20:51:24


<p><span style="font-weight: 400;">We are living in an era of advanced technology where the theory and praicital components both have a major scope in actual skill development of a student. For the college goers and graduate students in the sciences, it is quite difficult to get the sufficient training for thier careers because the trainers also do not have so mcuh expertise in the relevant arena. Most of the studnets who&rsquo;re interested in trending IT courses like <a href="https://rhsofttech.com/tableau-online-training/">Tableau</a>, <a href="https://rhsofttech.com/data-science-online-training/">data science</a> or hyperion try ot get jobs outside thier academic skills because they didn&rsquo;t get enough knowledge from the trainer unless they&rsquo;ve provided with the industry based training. Still some popular online IT training institutes like RH Soft Tech always focueses on providing the right guidance to the students who&rsquo;re seeking a bright career growth in the IT sector.</span></p>
<p><span style="font-weight: 400;">Modern companies are hiring working professionals who&rsquo;re expert in the in-demand skills like data sciences, rish and compliance, science, enterpreneurship and even Robotics. It is only your skills that can make you close to the high paying job as the IT market has shown a tremendous growhtin in hiring the skilled and talented employees to accomplish business operations.</span></p>
<p><span style="font-weight: 400;">Apart from the new opportunities, several graduate programs are still rooted by different organization with the objective to identify the talents who&rsquo;ve the ability to be successful in the modern fast-paced and high-tech workplace. SOmetimes students do not have an idea of implementing the skills they&rsquo;ve gained in the IT training session. For them, RH Soft Tech like institutes runs special classes so as to make students of the working envirionments and generating confidence among the students to apply the skills they&rsquo;ve achieved from the trainers on a respective course.&nbsp;</span></p>
<p><span style="font-weight: 400;">At <a href="https://rhsofttech.com/">RH Soft Tech</a>, we keep the vision of students at the topmost priority and offers job oriented training so they could be a productive employee after the completion of training from us. We are developing online modules to address the most sought after skills so that the studnet can purse the right career path after the training.</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
Unity 103: Input
Tags: csharp, gamedev, unity3d, dotnet
Published: 2020-11-23 20:51:07

Games are interactive, right? Players need to be able to interact with the game, and you need to provide feedback to them. In this post I will teach you how to add Unity’s Input system package to your project, and how to use it in your C# script.

#Installing the Unity Input system package

To install any Unity package you need to open the package manager. You do that by opening the window drop down menu, then choose package manager. Search for input manager and install it.  Follow the prompts on the screen to use the new system. The process will restart your Unity project.

![Unity's package manager with the input system highlighted](https://dev-to-uploads.s3.amazonaws.com/i/1lykw1fg4nl79zhtidyc.png)

After the project restarts, lets create settings for your input. To do that, open the edit drop down menu, then choose project settings. Select Input System tab on the left, then click on Create Settings Asset. This will create a file that will contain your input systems.

You can learn more about the input system and how to use those settings in [Unity’s Input System](https://docs.unity3d.com/Packages/com.unity.inputsystem@1.0/manual/index.html) documentation. The rest of the post will talk about using the default settings and get started as quick as possible.

#Using the input system:
In a MonoBehavior class, we should add the package we are using to the top of the class.
```csharp
Using UnityEngine.InputSystem;
```
Now we are ready to use classes included in the package, for example Keyboard and Gamepad.

##Keyboard input example
To get input from the keyboard, you can create a new Keyboard variable in your MonoBehavior. Then assign the current connected keyboard to it during initializing the MonoBehavior.

```csharp
public Keyboard _keyboard;

void Start()
{
     _keyboard = Keyboard.current;
}
```
Now, you are ready to detect key presses from the keyboard in the Update method.
```csharp
void Update()
{
     If(_keyboard.wKey.isPressed)
     {
          //do something
     }
}
```
This will run every frame, and check if the W key on the keyboard is pressed and return true if it was.

The input system is very flexible. I encourage you to read in [Unity’s Input System](https://docs.unity3d.com/Packages/com.unity.inputsystem@1.0/manual/index.html) documentation to learn more about how to customize it for your own needs.

Please check our full video covering this topic in our video beginner series for Unity.
{% youtube oae7aW7ayUs %}
Insert node at beginning of linked list in C++

Tags: cpp, oop
Published: 2020-11-23 20:50:37

Inserting a node in a linked list can be done in two ways. First we can insert at the beginning and second we can insert at the end. But this article focuses on inserting nodes at the beginning of the linked list.

**Approach**

Assume we have a linked list with two nodes with values 2 and 3 respectively. Head pointer points us to the first node and we want to add a new node with value 1 at the beginning of the list. So, we’ll create a new node using a new operator and return its address into the pointer ptr. Let's say the address is 200. We want to store 1 in the data part of the node. Now we have to point the newly created node to the node containing value 2. To do this we can make use of the head pointer as the head pointer contains the address of the node containing the value 2, which is the beginning of our linked list. So we can use the statement ptr->link = head here we are copying the value of the head and the link part of the newly created node.

for more check the link given below

https://www.kodlogs.com/blog/2239/insert-node-at-beginning-of-linked-list-in-c
operator overloading in c++ using friend function
Tags: cpp, oop
Published: 2020-11-23 20:45:56

Operator overloading provides an inherent interface to the users of our class, making it possible to work equally well with classes and built-in data types. Operator overloading in C++ allows operators to have user-defined meanings on user defined types.
This article will discuss overloading using friend functions.

**There are three methods to do operator overloading in C++, they are**

Overloading unary operators.
Overloading binary operator.
Overloading binary operator using a friend function.
And we are going to discuss only overloading binary operators using a friend function.

The function which has the right to access all private and protected members of the class but defined outside the scope of the class, is called friend function.

for more check the link given below

https://www.kodlogs.com/blog/2237/operator-overloading-in-c-using-friend-function
How to create a text file in C++ and write in it?
Published: 2020-11-23 20:43:59

n this article we will discuss and write a program to create a text file in the first place and then the program will write in the file by itself. To create a program like this we have to use fstream. 

The program will create a text file and if the file is created then it will show “file created successfully” otherwise it shows “Error in creating file!!!”.

**Approach**

Declare fstream file class and open the text file in writing mode. Program will look for the file in the current directory if the file is not present then it creates a new text file. Then it will add text or data into the file. After that we have to close the file.

for more you can check the link given below

https://www.kodlogs.com/blog/2238/how-to-create-a-text-file-in-c-and-write-in-it