teleren/devto huggingface dataset:
Creating an application with NextJS and Styled Components from scratch (Part 3)
Tags: react, css, webdev, node
Published: 2020-08-08 21:52:10

![Image example of using props](https://dev-to-uploads.s3.amazonaws.com/i/izw0d0jkboc2b3mzn0ov.png)

(Image taken from Google)

 In today's post we will see about the use of props in our components, props will help us throughout the development of our application to customize the characteristics of our components without the need to repeat a lot of code in our Styled Components file. You must be thinking that working with props is complicated, but its use is not complicated as you might think. Let's see this in practice now.

 In the component folder create a folder called Header, after creating the directory, create two files within it, one named index.jsx and the other named style.js. Now we will create the code for our component, below the React and Styled Component code.

```HeaderComponentCode
import React from 'react';
import { Topo } from './style';
const Menu = () => {
  return (
    <>
     <Top></Top>
    </>
  );
}

export default Menu;
```
 Important note: To use Styled Component's features externally you should not forget to import it into style.js, below the right way you should follow.

```TopComponentStyle
import styled from 'styled-components';
```
 Now we can proceed with styling our component.

```TopComponentStyle
import styled from 'styled-components';

const Top = styled.header`
 background-color: #333;
 padding: 10px;
 width: 100%;
`;

```
 Wow! Wait, where's the use of props over there? Calm down, let's now add to our code.

```TopComponentUsingProps
import React from 'react';
import { Topo } from './style';
const Menu = () => {
  return (
    <>
     <Top Background={{ color: "#333" }}></Top>
    </>
  );
}

export default Menu;
```

```StyleOfOurComponentWithProps
import styled from 'styled-components';

const Top = styled.header`
 background-color: ${props => props.Background.color};
 padding: 10px;
 width: 100%;
`;

```
## Conclusion:
 We can conclude that when working with props, I have flexibility regarding the customization of our components, also avoiding some repetitions. Did you like it? in the next post we will see about some definitions of standards of our theme. A big hug, and until the next post.

<a href="https://dev.to/xorandre/creating-an-application-with-nextjs-and-styled-components-from-scratch-part-1-34am">Part1</a>
<a href="https://dev.to/xorandre/creating-an-application-with-nextjs-and-styled-components-from-scratch-part-2-jl4">Part2</a>
Apple Takes Legal Action Against This Small Company’s Pear Logo
Tags: news, apple, ios
Published: 2020-08-08 20:58:21

### [👉 Full Story 🍏🍐](https://www.iphoneincanada.ca/news/apple-legal-action-pear-logo/)

> Prepear is a meal planner and grocery list app that helps people discover recipes and more. It’s a spin off from the founders of Super Healthy Kids and right now they saying its logo is under legal attack from Apple.
#30DaysOfCJS: When Porgs Scream at Webpack
Tags: community, javascript, iot, hardware
Published: 2020-08-08 20:55:37

---
title: #30DaysOfCJS: When Porgs Scream at Webpack
published: true
description: #30DaysOfCJS Day 7, When Porgs Scream at Webpack
tags: community,javascript,iot,hardware
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/pyq103v6upc5e9prv7f4.png
series: 30DaysOfCJS
---

*This is a follow up post for Day 7 of* **#30DaysOfCJS**, *learn more about* **#30DaysOfCJS** *here* {% link jimcalliu/30daysofcjs-1jd3 %}

**When Porgs Scream at Webpack and Other Stories | Dominik Kundel | CascadiaJS 2019**

If you'd like to watch the talk, here is the Youtube link.
{% youtube 3wx806HOgnA %}

Further readings:
- [Talk Slides](https://speakerdeck.com/dkundel/cascadiajs-19-when-porgs-scream-at-webpack-and-other-stories)
JavaScript: How to use the .map() method
Tags: javascript, html, css, webdev
Published: 2020-08-08 20:52:16

The map() method is used to create a new array. 

In simple terms, a map is used to take an existing array and copy that array into a new one. In Web Development, it’s common you need to build out UI elements with JavaScript. The following demonstration will show you how to take some data from an array and create html markup and output the results. 

We are going to create a button and add an ‘onclick’ method. The next step we need to take is creating a function named ‘moreFeatures()’. Now we will set it up so that we can output features of a product with the click of a button to display all product features in an unordered list.

Let’s look at this example and show you how to output an unordered list using the map() method.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/19t51pt6fq9i5hllhnvg.png)
This is the button the user will click to display the new array of features:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y5jvd1gnfk4dup1gtzni.png)
This is the output displayed as an html unordered list:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5s47ldqpddj3iz0n6c1i.png)

There are other approaches to outputting an array. You can loop through each item and push it to a string. However, the map() function is easy to use and makes it easier to create your html markup.

The map() method will actually return values and a new Array of the same size.

I like using the map() method because it is short and concise.
project-templates.nvim
Tags: python, vim, showdev
Published: 2020-08-08 20:15:41

 A Neovim Project Management Plugin https://github.com/pianocomposer321/project-templates.nvim

# project-templates.nvim

I made this plugin mainly out of pure frustration. I had been using the extension [Project Templates](https://marketplace.visualstudio.com/items?itemName=cantonios.project-templates) back when I used VSCode as my IDE, and I had come to rely on it. When I migrated to Neovim, I thought "this extension was sooo helpfull! Clearly there _must_ be an equivialent for vim, right?" I went searching and searching, but I couldn't find _anything_. There were plugins that created templates for individual files, and even multiple related files, like [templator_vim](https://github.com/tomtom/templator_vim), but nothing that creates templates for an entire project, that defines the project structure and boilerplate code for each necessary file. In most IDEs, the IDE will take care of these things for you automatically when you start a new project. But with vim, you have to create each individual file and folder yourself. This plugin aims to fix that.

## Demo
![demo.gif](https://dev-to-uploads.s3.amazonaws.com/i/yk2kbknlhofrk5rslsyl.gif)

# Quick Start

## Requirements

You will need neovim compiled with python3 support. To determine whether or not your neovim has python support, type `:echo has('python3')` and press enter. If it outputs `1`, you have python3 support, otherwise you will need to run the command `pip install pynvim`.

You will also need to run the command `pip install binaryornot`.


## Installation

Add this to your init.vim:

- vim-plug:
  - `Plug 'pianocomposer321/project-templates.nvim', { 'do': ':UpdateRemotePlugins' }`
 
- Vundle:
  - `Plugin 'pianocomposer321/project-templates.nvim', { 'do':  ':UpdateRemotePlugins'}`

etc, etc.

Then run `:PlugInstall` (vim-plug) or `:PluginInstall` (Vundle).

Finally, restart Neovim.

# Usage

- `:LoadTemplate` - Load a template into a new project. The plugin will look for placeholders (e.g. `#{PLACEHOLDER}`), and ask for values to replace them in each non-binary file
- `:DeleteTemplate` - Delete a template
- `:SaveAsTemplate` - Save the current folder and all files and subfolders as a new template

The plugin will look for templates in ~/.templates. Sample templates can be found at https://github.com/pianocomposer321/project-template-samples. If you want to create your own templates, simply create a new project, add the placeholders you want, and save it in ~/.templates, or use the `:SaveAsTemplate` command.

# Credits

Finder.vim - https://vim.fandom.com/wiki/Implement_your_own_interactive_finder_without_plugins

Inspired by [This](https://github.com/bit101/ProjectMaker) Sublime text plugin and [this](https://github.com/cantonios/vscode-project-templates) VS Code Extension.
User signup & Password Hashing
Tags: 100daysofcode, javascript, mongodb
Published: 2020-08-08 20:09:28


The goal is to create a new user, hash the password and save it to the database.
####User Model
I added a user model file to the models folder and created a user model.
```javascript
const mongoose = require('mongoose');
const { Schema } = mongoose;

const userModel = new Schema(
  {
    email: {
      type: String,
      required: true
    },
    password: {
      type: String,
      required: true
    },
  }
);

module.exports = mongoose.model('User', userModel);
```

####User Route
I also created user routes. It's labelled /users but it should essentially work like as signup for the users. I'm making a post request to this route then hashing the password.

####Hashing:
Encryption is scrambling information to unreadable format to protect confidentiality. Hashing is like a one-way form of encryption which means we can use a string to generate a hash (random string generated by a hashing algorithm), but we can't decode the hash to a string.The same string will always generate the same hash to make the hash unique we add a salt. A salt is just random data added to an input. I'll be using bcrypt which is a hashing function. 
Fun fact about bcrypt: It is preferred because its slow. _Apparently this makes its harder for hackers to decode._ 

Ofcourse we'll need to `npm install bcrypt` and include it in the js file. Inside the post function i'll create a variable salt which stores a randomly generated salt. I'll hash the password and salt and save that to req.body.password. Finally i'll create a user, pass the data from request body and save.
```javascript
const bcrypt = require('bcrypt');

function userRoutes(User) {
  const router = express.Router();

  router.route('/users')
    .post(async (req, res) => {
      try {
        const salt = await bcrypt.genSalt();
        req.body.password = await bcrypt.hash(req.body.password, salt)
    
        const user = new User(req.body);

        user.save((err) => {
          if (err) {
            return res.send(err);
          }
          return res.json(user);
        })
      } catch {
        res.status(400).send()
      }
    });

  return router;
}

module.exports = userRoutes;

```
Next, I included both the model and the route in the app.js
```javascript
const User = require('./Models/userModel');
const userRouter = require('./routes/userRoutes')(User);

app.use(userRouter);
```
The output from postman

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/afx6uit8f8t8lujhhavy.png)


_Day 23_
Just JS (by Dan Abramov)
Tags: webdev, javascript, react, tutorial
Published: 2020-08-08 20:07:45

This is a recommendation of a JS tutorial for beginners by Dan Abramov. It's called **Just JS** and I liked it very much, especially for the visualisations by Maggie Appleton. The cover image of this article is one of hers.

Unfortunately the tutorial is only available by mail and it's very shot, 9 courses only. But I can assure you: it's worth it. The mental model for how the inners of JS work are pure gold. [You can subscribe here on Dan's website for Just JS.](https://justjavascript.com)

P.S.: Dan Abramov is working on React and the (co-) creator of Redux and create-react-app.
What I love about coding forums
Published: 2020-08-08 17:41:57

I was gonna start with my problems with them, but I do love and I don't want people to think I despise them!

I use the [Glitch Support Forum](https://support.glitch.com) the most, but I also use [Reddit](https://reddit.com) and occasionally, [StackOverflow](https://stackoverflow.com).

### 1. Asking Questions
No matter what question about coding you have, you'll most likely be able to find an answer on some sort of forum. Whether on one specifically for that language or type of coding, similar to Reddit's 'subreddits', or one for coding in general, like the Glitch Support Forum. People asking questions is great and asking questions yourself is great, since it can end with a simple resolution or solution, rather than hours of troubleshooting to find northing!

### 2. Answering Questions
I don't know why, but I get joy from spending my time answering people's coding questions, if I have the knowledge to do so. If people aren't asking correctly, just send them to StackOverflow's [How to Ask](https://stackoverflow.com/help/how-to-ask) or something similar, like your own version on the forum. Simple as that. Help people and get more abilities in the forum is how Discourse works and the Glitch Support Forum uses that, so you can become, for example, a 'Regular' member where you get special moderation perks like editing titles, recategorisation, adding tags, more powerful flags, etc. So now you have a motive for answering questions, if you need one.
### 3. Community
Most forums, especially the Glitch Support Forum, where [Glitch](https://glitch.com) built a forum for the vast community it has created, have a really happy, cool, close-knit and sometimes very large community. This means you can collaborate, contribute, chat, etc. and enjoy the forum as one happy coding family. Some people take advantage of this family, creating spam, etc. but don't worry about that, just be happy about the people you have touched when creating messages on the forum and answering their questions.

### What do *you* love about coding forums?
Join the discussion by commenting below 👇

### About Me
My name is [Eddie Coldrick or Eddie's Tech](https://www.eddiestech.co.uk) and I am a Regular on the [Glitch Support Forum](https://support.glitch.com). I code in Javascript, PHP, HTML, etc. and love webdev and [Glitch](https://glitch.com).
Practical Knowledge
Published: 2020-08-08 20:01:17

Hey everyone
In the past few weeks I attended several interviews for React js front end developer position in various companies I cleared their HR and technical rounds made my way to final round which was the machine test or you can say coding challenge. Even after completing those tasks I still got rejected and feedback was "You have good knowledge of React But you lack practical Knowledge.(it's matter of debate on what basis they analyse my test in one test they gave me 2 marks for to-do list)
This was same feedback that I received from almost all  companies that I applied.
My question is How to gain that "Practical Knowledge" 

Suggestions are highly appreciated
Finally got to see every symbol on Twitter with Arch!
Tags: linux, arch, fonts, emoji
Published: 2020-08-08 19:28:55

---
title: Finally got to see every symbol on Twitter with Arch!
published: true
description: 
tags: linux,arch,fonts,emoji
//cover_image: https://direct_url_to_image.jpg
---

Linux is great, Arch is even greater. But when it comes to fonts both are… highly improvable.

I’ve been struggling for hours to be able to see all the stupid symbols people use on Twitter these days. Not that I’m very interested on checking out how people are expressing their desperate need to feel special but I just can’t stand something not working.

So, for those of you archers who think that in 2020 we all should be able to see a webpage without ugly error squares, this is the recipe:

- Install an emoji font (noto-fonts-emoji, ttf-joypixels or any other)
- Install a japanese-chinese-and-the-like font (noto-fonts-cjk, for instance)
- Install the gnu-free-fonts packages for the rest of fancy letters and symbols all over the world
- Edit your `.config/fontconfig/fonts.conf` and insert something like this (change the first font for the one you use, the only relevant font for the purposes of this article is the second one):
```
<fontconfig>
  <alias>
    <family>serif</family>
    <prefer>
      <family>IBM Plex Serif</family>
      <family>Joy Pixels</family>
    </prefer>
  </alias>
  <alias>
    <family>sans-serif</family>
    <prefer>
      <family>IBM Plex Sans</family>
      <family>Joy Pixels</family>
    </prefer>
  </alias>
  <alias>
    <family>sans</family>
    <prefer>
      <family>IBM Plex Sans</family>
      <family>Joy Pixels</family>
    </prefer>
  </alias>
  <alias>
    <family>monospace</family>
    <prefer>
      <family>JetBrainsMono Nerd Font</family>
      <family>Joy Pixels</family>
    </prefer>
  </alias>
</fontconfig>
```

Sorry for the possible mistakes in my English, it isn’t my first language (nor my 2nd, for that matter). Enjoy.
TIL: HTML Comments are valid inside Javascript
Tags: javascript, html
Published: 2020-08-08 19:07:25

```
<script type="text/javascript">
// This is a valid comment
<!-- This is a valid comment too
<!--
function message() {
  alert("Hello World!")
}
//-->
</script>
```
> The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag. - [w3schools](https://www.w3schools.com/tags/tag_comment.asp)

REF: [https://github.com/denysdovhan/wtfjs#html-comments-are-valid-in-javascript](https://github.com/denysdovhan/wtfjs#html-comments-are-valid-in-javascript)
PHP Functions every beginner should know.
Tags: php, webdev
Published: 2020-08-08 19:02:16

PHP is one of the most popular languages for building websites. In fact, you probably used it today if you visited a Wordpress site or Facebook.

Here are a few useful built in PHP functions every developer should use more often.

# 1 - htmlspecialchars

The htmlspecialchars function is better than than using only using echo for one main reason: it prevents XSS. For example:
```php
<?php

echo htmlspecialchars("<script>console.log('XSS!');<script>");
```
Output:
```
&lt;script&gt;console.log('XSS!');&lt;script&gt;gt;
```

# 2 - exec

This function allows you to run code on the command prompt or terminal, depending what OS you use to host/test. While this function is a bit more advanced, it is very useful. Example:

```php
<?php

exec("mkdir files");
```

Upon running this code, a folder will be created called files. This is a very powerful command, and user input **NEVER** be allowed in this function.

# 3 - header

HTTP headers are very useful online, they tell your browser what to do when a website is loaded. You can use PHP to set headers in seconds. This code will set the 302 Found header, creating a redirect to riverside.rocks:

```
<?php
header("Location: https://riverside.rocks");
die();
```
Upon viewing this with cURL, we can see it worked.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2l91o9wv5i5ckcjpca2f.PNG)

*Note: The die() function is used to end the code, it is not necessary, but good to use to ensure no more code is executed after the redirect.*

This is an example of a 404:

```
<?php
header("HTTP/1.1 404 Not Found");
```

# 4 - file_get_contents

This function retrieves the HTML contents of a website. If you ever work with APIs in PHP, you will have to use this function quite a bit. This example gets and echos the HTML contents of riverside.rocks:

```php
<?php
echo file_get_contents("https://riverside.rocks");
```

I hope you enjoyed reading and keep coding!


~ Riverside Rocks
React Native installation with EXPO CLI
Tags: reactnative, react, javascript, expo
Published: 2020-08-08 18:49:53

If you are new to mobile development, the easiest way to get started is with **Expo CLI**.
It is a very easy process, just follow the steps below one by one.

![GIF](https://media.giphy.com/media/3ohhwhLRprHtEWzi1O/giphy.gif)

#### Software requirement:
>Node.js ([download](https://nodejs.org/en/))

#### NPM to install the Expo CLI:
Now we can use npm(comes default with Node.js) to install the Expo CLI

* Open your terminal(run as administrator) and type the following command

```
 npm install -g expo-cli
```

it will take a little bit of time to install EXPO CLI in your system globally.

* Then run the following commands one-by-one to create a new React Native project called "MyProject": 

```
 expo init MyProject

 cd MyProject

 npm start
```

This will start a development server for you

* Running your React Native application

Install the [Expo](https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en_IN) client app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo app to scan the QR code from your terminal to open your project. On iOS, use the built-in QR code scanner of the Camera app.

* Modifying your app

Now that you have successfully run the app, let's modify it. Open **App.js** in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.

* That's it!

**Congratulations!** You've successfully run and modified your first React Native app.

![GIF](https://media.giphy.com/media/xT0xezQGU5xCDJuCPe/giphy.gif)

#### References:
[React Native](https://reactnative.dev/)
[Expo](https://docs.expo.io/)
[Node JS](https://nodejs.org/)
[NPM](http://npmjs.com/)

**Hope you have enjoyed this and gain something from it. Waiting for your feedback. ✔**

Follow me on Twitter — [@javascript_bug](https://twitter.com/javascript_bug) to check out my other cool posts.

Happy Coding! 💻 😀
Mental health tech — any advice?
Tags: discuss, career, mentalhealth
Published: 2020-08-08 18:45:22

---
title: Mental health tech — any advice?
published: true
description: Any ideas?
tags: discuss, career, mentalhealth
---

Hi DEV!

One of my good childhood friends recently expressed via Linkedin status that they are interested in working for a mental health app/tech company. This person has spent their career as a peer advisor, mental health writer, field advocate, and board member for various mental health nonprofits and organizations. Her resume is nothing short of dazzling and humbling.  

I really want to help this person break into tech; they seem to have so much to give to the industry. I am also selfishly motivated because I have such a passion for the topic of mental health myself. I want to see others doing the actual work succeed and use their skills to help people AND have the comfortable life tech can provide in the process. 

With the advent of companies like BetterHelp and Headspace, I figure there are ample opportunities for professionals like her to find employment in tech as a writer, advisor, or consultant. 

On to my question for all of you...
> ### Has anyone here worked for a mental health tech company before and collaborated with an advocate/writer in the process? Any advice for this person? What do social workers, therapists, and health writers looking to apply their skills to a tech company need to know before breaking into this space? Any suggestions of companies for them to check out?

Thank you, friends!  

❤️
How to install VMware player?
Tags: vmware, techvatan, macos
Published: 2020-08-08 18:03:22

The installation of vmware player is not issue. However, if this is you first time it is recommended to install it after hacking some guide. 
In the below article we have created full guide on how to install  vmware player on windows PC.

<a href="https://techvatan.com/">install macOS Yosemite on virtualbox</a>