teleren/devto huggingface dataset:
Functional Component in react⚛️ 
Tags: react, webdev, tutorial
Published: 2021-04-27 20:52:24

#####Hello guys,😀
#####Hope you are doing good!

In this tutorial 👩🏻‍💻 🔥 , we are going to learn about functional components in react.
>Prerequisite: Javascript,JSX,ES6.

First, let us know about components.


**❓. What is a component?** 
Ans:
A component is a core building block of react.

There are two types of components:
1)Functional component
2)class component

let us take an example for each.
 **Class component**
{% gist https://gist.github.com/Anasooya2601/a6a327f7455bd4e9452e393b42afeac6 %}

**Functional component**
{% gist https://gist.github.com/Anasooya2601/bc51ee08a49f1f32fa39580565524b5c %}

Now we will dive into Functional components👩🏻‍💻.

```JAVASCRIPT
> const n=<Component name="Ana" />;
```
>Inside a functional component, we are passing props as an argument of the function.

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


>A functional component is an ES6 function.

**❓ When do we use functional components?**
Ans:
1)when it receives prop and renders something.
2)when it doesn't have any state.

**❓ Why functional components?**
Ans: A functional component is written shorter and simpler. It doesn't use THIS unlike in class component.

>####Always prefer functional components over class components.😀

Functional component holds state using hooks. (react 16.8)

Let's us code now,
>try these examples on a code editor.

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

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

####I hope you liked this tutorial. If you have any doubts you can (google 😜) comment down below. I Will revert asap 👍.

*Sources I referred to:*
[reactjs.org/docs/components-and-props](https://reactjs.org/docs/components-and-props.html)
[ react-components-jsx-props-for-beginners](https://www.freecodecamp.org/news/react-components-jsx-props-for-beginners/)
Memorize Keyboard shortcuts for every editor you use
Tags: productivity, vscode
Published: 2021-04-27 20:45:23

As coders we use our editors a lot. If we want to type faster wouldn’t learning the editors keyboard shortcuts help? Let’s see. We change our coding tools a lot if you’ve been programming for a few years I bet you don’t use the editor you learned coding in.

Learning your current editors shortcuts just sets you up for learning it all over again once a better editor comes around or your preferred editor doesn’t support a platform you are programming for. Sure sometimes you can import your old editors shortcuts and change the key mappings.
Wouldn’t it be great though if there were shortcuts that worked almost out of the box for all your editors — current and future?

There is, meet vim. Not vim itself. After all we want to get work done and not show off how nerdy we are.
There is a vim extension for most editors and the best news is the shortcuts you learned once work everywhere.

Granted vim looks pretty intimidating and like a tool only the uber nerd would use. At least that’s what I thought until I dug deeper into it and found it pretty helpful. You don’t have to master it for it to be useful. 15 or 20 out of hundreds of possible shortcuts will give you a boost you wouldn’t want to miss ever again.

It took me about two weeks to getting used to it and now I don’t want to miss it.

I learned it on https://vim-adventures.com sure there are books I even bought some but I would recommend against using books to learn vim. Once you know your way around vim https://vimtricks.com has nice tips for every experience level to get your game to the next level.

Links
- [Vim for VSCode](https://marketplace.visualstudio.com/items?itemName=vscodevim.vim)
- [Xcode vim](https://github.com/XVimProject/XVim2)
We Created An Open-source Emoji Library (Without Going to the Emoji Authorities)
Tags: opensource, emoji, webdev, programming
Published: 2021-04-27 20:33:57

Did you know that you're supposed to get approval from the emoji authorities if you want to create an emoji? 

Yes, that's right. 

There's an official organization, called Unicode that holds the golden keys to emoji offerings. You have to submit an emoji proposal to a private consortium and wait for approval. Well, we didn't do that. Here's what we made...

A capsule collection of 22 handcrafted emojis, inspired by open-source developers and NFT art colorways & aesthetics. They're our small way of saying “thank you!” & recognizing the tireless work of open-source contributors, builders & makers.

The emojis are designed to fill gaps in a typical developer’s day including “busy coders” in 6 different skin tones and colorways, “bugs” for all your bug hunting & vulnerability needs, "binary code 101010", online/offline and “databases on fire”!

These emojis are 100% free & open-source. Find them here: https://emoji.openess.dev

We hope you enjoy them! xo lotusleaf
New career path - in a pandemic - am I mad?
Tags: newbie
Published: 2021-04-27 20:31:49

Early last year I found myself a new passion in my life, I started looking into coding- skip forward a year during a pandemic and I am now half way through my Full-stack web development course!

I feel like I am now finally living and doing something that is exciting and different each day!
I don’t have any coding background at all. When I first started looking into coding I found some evening classes at my local college and went after work to learn HTML and CSS. I absolutely loved it and knew I wanted to take this further.

I’ve been on my course for 8 weeks now, I work in a class of 8 along with our trainer. Everyone is really lovely and I feel like we have really good team spirit and enthusiasm.
I was anxious about learning online but it’s actually worked out really well! 
So far we’ve learnt HTML, CSS, PHP, MySQL, JavaScript, Typescript, Advanced CSS, git and GitHub, and various software tools. There is probably so much more I am forgetting right now! 
We’ve made our own projects, worked on some collaboratively and currently working on some legacy code! (Which has given me a headache the majority of the day haha). 
I’ve definitely found some things tricker to understand and it will take me a while to get my head around them - I feel like I grasp things a while after other people, but I am far better these days at reminding myself, “everyone learns at a different pace”. 
I know there is more to come and I cannot wait to learn and progress more.

If there’s one important thing I could take away from this so far, it’s to ask questions. This is the time for asking and learning. Slow down, read it, understand it.

I’m hoping by documenting my journey it will inspire others and also help me to continue my learning and appreciate how far I have come. 

Thanks if you read this far!
IPS Monitors: Everything You Need to Know!
Tags: productivity
Published: 2021-04-27 20:19:24

Here we will know about the main characteristics of the IPS Monitor. 

So, we can easily find the best things about this monitor and make the quick decision purchasing of a monitor.

##Color accuracy and consistency:

IPS Monitor provides an amazing color for the users with great accuracy and consistency. 

The IPS Monitor also consists of professional color space technology that is [Adobe RGB](https://en.wikipedia.org/wiki/Adobe_RGB_color_space). So, it will provide you a better experience compared to the VA and TN panels and you will never face the blur picture quality in this monitor screen.

##Response Time:

It provides a sufficient response time than VA and TN panel monitor. Due to this feature gamers can also use this monitor for a better gaming experience without any lag. Generally, fast response rate monitors and [144hz refreshes rate monitors](https://thebestmonitors.com/cheap-144hz-monitors/) are made up of IPS technology.

##Viewing angle:

The IPS monitor facilitates the users a wide viewing with different angles, so you can always get better pictures from the different angles without making any interruption in the picture quality.

##Disadvantages of IPS Monitor
1. It provides an extra white glow while viewing off-angle dark content.
2.Low static contrasts ratio
3. Making more blur while playing fast motion games
4. Required 15% more power than TN panel monitor

##Best uses of IPS (in-plane switching) monitor

1.It can easily use at high-level business or home purpose
2.Gamers can also use it who gave the priority of images quality instead of response time
3.Photographers, graphic designers, and video editors also can use it because it provides excellent color accuracy and constancy
4.Even technical person like [AutoCAD engineers](https://work.chron.com/importance-autocad-mechanical-engineer-26569.html) also can purchase this monitor for their projects
echoAR, a cloud platform for 3D apps, becomes a Unity Verified Solutions Partner
Tags: unity3d, augmentedreality, startup, news
Published: 2021-04-27 20:03:33

[echoAR](http://www.echoar.xyz/), a cloud platform for augmented and virtual reality (AR/VR) that provides tools and network infrastructure to help developers & companies quickly build and deploy 3D apps and content, announced today that it is now a [Unity Verified Solutions Partner](https://unity.com/partners/verified-solutions).

Being a Verified Solutions Partner means echoAR has been verified by Unity to ensure its SDK is optimized for the latest version of the Unity editor, providing a seamless experience for Unity developers.

echoAR will help Unity developers create real-time 3D experiences for gaming, eCommerce, advertising, entertainment, retail, training, and more.

With echoAR’s Unity SDK, developers can move 3D assets to the cloud to reduce overall Unity app size. Team members can then manage and deliver 3D content to Unity, publish real-time updates, and administer the entire platform easily with the following features:

* Automatically obtains app analytics
* Reduce app size by moving 3D assets to the cloud
* Compress & convert 3D models to and from multiple formats
* Auto-generate webAR links
* And more!

Read how Unity developers can reduce their build size with echoAR [here](https://medium.com/echoar/how-unity-developers-can-reduce-their-build-size-with-one-simple-step-bce832462da8) and review our full echoAR+Unity [documentation](https://docs.echoar.xyz/unity/).

Explore the Unity Verified Solutions Partners [here](https://unity.com/partners/verified-solutions) and checkout echoAR’s Unity SDK on the [Unity Asset Store](https://assetstore.unity.com/packages/tools/utilities/echoar-sdk-189301).

Learn more about echoAR [here](http://www.echoar.xyz/).

****

> echoAR is backed by Remagine Ventures and Techstars, and received grants from Y Combinator, Verizon, and NYC Media Lab. We were [named](https://www.sxsw.com/interactive/2020/sxsw-pitch-2020-finalists-announcement/) AR/VR finalists for SXSW 2020, won the DevProject Award 2019, [named](https://businesswire.com/news/home/20191018005090/en/Pepperdine-Graziadio-Business-School-Reveals-2nd-Annual) among the 2019 Most Fundable Companies, [named](https://www.technology.org/2018/10/25/extreme-tech-challenge-xtc-announces-top-25-for-fifth-annual-competition/) one of the Top 25 finalists in Sir Richard Branson’s Extreme Tech Challenge (XTC) 2019, and featured on [The Hill](https://thehill.com/hilltv/boundless/424340-tech-ceo-says-5g-will-drastically-improve-augmented-reality).

![2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619553587908/jmmMMdFjy.png)
Creating a Raspberry Pi Smart Mirror
Tags: raspberrypi, devrel, programming
Published: 2021-04-27 19:55:32

How many of us have a Raspberry Pi collecting dust somewhere around the house? I bought one in 2017 to build something amazing but ended up not doing anything with it for years.

After seeing some Reddit posts about a "smart mirror" device over the years, I decided it was finally time to try my hand at IoT (Internet of Things) and create a mirror that would display a custom message for me.

However, I also wanted to be the only person capable of changing the text that my smart mirror displays. Because of this, I decided to protect the update functionality of my message API using Auth0.

[Read more...]()
Learn more about your candidates with video take-home challenges
Tags: hiring, programming
Published: 2021-04-27 19:43:01

After years of [testing developer experience](http://haxor.sh), today I'm turning the tables and letting you [test your developer candidates](http://paircast.io)!

![Paircast dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exnjvkw0rqtqvh4zqsre.gif)

[Paircast.io](http://paircast.io) is the platform we built for testing DX and it turns out it's mighty good at assessing developers' skills.

You can see how developers solve problems and where they get stuck as they complete coding challenges on their own machine. You get all the quality of a technical interview with the convenience of a take-home assignment. No engineers needed to conduct technical interviews.

👉 Learn more by watching how developers solve problems, not just end results.
👉 Real-world work, not brain teasers
👉 No more cheating on take-homes, you can see developers write every line
👉 Get a higher signal with less time invested by your candidates

Personally, I'm super excited to launch Paircast into the world as I'd never pass an online coding challenge myself. After hearing a bunch of MLH Fellowship students complain about these coding tests, I knew there had to be a better way. Let's burn "crack the coding interview" and focus on real-world skills!
Mongoid query nested embed document through belongs to and embeds many
Published: 2021-04-27 19:30:25

Given the following documents, I'm trying to find a log document given a token ID.

```ruby
class Log
  include Mongoid::Document

  belongs_to :user
end

class User
  include Mongoid::Document

  embeds_many :tokens
end

class Token
  include Mongoid::Document
end
```

I tried `Log.where('user.tokens._id': BSON::ObjectId('123ABC')` with no luck. Any ideas?
Rails Project - Pollen
Published: 2021-04-27 19:25:24

# [Pollen](https://github.com/aj-rom/pollen-site)
For my rails portfolio project I decided to build out an application base that will later be built on to be used for a product matching API.

## Why
I have heavy feelings towards sustainability and setting up a website that will promote this was of great interest to me.

## The Challenges
I wanted to keep this a barebones as possible, no generators, and no gem madness. Which lead to me learning **a lot** more about the Rails framework and SCSS.

### User Authentication
At first I wanted to rely only on omni-auth and build out my own custom RESTful routes for logging users in, although decided to go with devise.

#### Reducing Devise
Devise adds *a ton* of useless stuff that I did not need for my application. I went through most of the code and views that devise included and customized and built my own methods based on the sections that I needed.

This helped me keep my application smaller as well as having a deeper understanding to how tools such as devise work from the inside.

#### Default Users
Since I originally was planning on not storing user passwords or letting them 'create an account' via my web application (only log in via third party). I needed to change a couple of things.

* Add Bcrypt
* Create a Sign Up form
* Allow users to sign in via email/password
* Generate a fake password for third-party login ins

All in all this seemed like a large task to take on and the devise wiki made it seem even worse. Although if you have a decent understanding of html forms and rails form helpers creating dynamic links and login/signup pages actually isn't too difficult.

## Useful Things I Learned

### Layouts
Layouts are extremely important for keeping your views clean and lets easily style your application dynamically.

### Helpers
Helpers are well.... helpers. Use them! No need for a user to see any malformed data or spend a ton of time nesting objects within links. 

My favorite use case was creating a helper to wrap an entire div element to its associated path. Usually you would have to do: 
```HTML
<%= link_to '/login' do %>
   <div>
     <h1><%= @resource.name %></h1>
     <p><%= @resource.description %></p>
   </div>
<% end %>
```

Which would be much better if you could call something like:
```Ruby
link_card_to('/login', @resource)
```

## Conclusion
I learned a ton over this project from rails routing, too layouts, to helpers, too SCSS. This was an awesome journey and I am excited to get into the Front-End frameworks such as Vue.js and React.
AI &amp; JavaScript with TensorFlow.js
Tags: tensorflow, ai, javascript
Published: 2021-04-27 19:20:54

---
title: AI &amp; JavaScript with TensorFlow.js
published: true
description: It's the best time ever to jump into AI and ML in JavaScript and check out TensorFlow.js
tags: TensorFlow, TensorFlowJS, AI, JavaScript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7uikd3ent88pjft27sm4.jpg
---
I've been having a blast with AI for years, and the pace keeps accelerating.  

I can't wait for every code newbie to be able to build the future with AI and JS.  Here's a lil blog post on my current vibe with ML in JavaScript.

![Rock Paper Scissors TensorFlow.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abaccujjvdclhh8mm9mc.gif)

I keep getting invited to conferences and meeting new people who are surprised that this tech is real.  After one talk, they see how to apply TensorFlow.js in new ways and products.

The web applications are numerous!

![Enjoying The Show Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4vbq6kfz5gvcumldbct.gif)

ALSO: I'm proud to mention I'll be featured on a @ReactNativeRdio episode where I'll talk about the cool stuff in JS mobile dev.  Episode dropping soon!
https://reactnativeradio.com/

It reminds me of that time on stage when I did AI in React Native live!  I still smile every time I watch this video.

[NicOrNot Stage Demo](https://twitter.com/GantLaborde/status/1037684497834287108)

![Nic or Not website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9p1zksl2hlk6t4cuy4z0.JPG)

The truth is people who code are unleashed when they learn what they can do.  That's why we've lead Open Source in TensorFlow JS.  

We've created libraries that improve quality of life for everyone, and made it free.  NSFWJS is used around the world and has 4.5k stars.

https://nsfwjs.com/

![NSFWJS Site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xakj9y4kkl5bppf2rkws.jpg)

But computer vision can be complex to a new Front-End dev, so it's also important to know when to be fun, too.  Hopefully, there's enough Trekkie & Harry Potter Nerds to make my poorly drawn examples make sense
http://aisortinghat.com/

![Harry Potter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h17zsw3yajcyajsw6mhc.png)

If you're into Web Development then I highly recommend you watch 
@jason_mayes on twitter.
He runs the TensorFlow.js show and tell videos on YouTube.

Or at the very least subscribe to his #MadeWithTFJS hashtag and see your fellow devs create

![Jason Mayes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55np0kt18koa8o8eyg8c.jpg)

Lastly, my book by O'Reilly Media is in Quality Check 2, which means you can pre-order it on Amazon, so you can invest in you and your team's education.  

It won't be long before every JavaScript Developer is wielding Deep Learning.

Get the Book: https://amzn.to/3dR3vpY

[![learning TensorFlow.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4tcz9rm4pgdezbau4is.jpg)](https://amzn.to/3dR3vpY)
Webinar: Building a Large Scale Enterprise IaaS with OpenStack and Software-Defined Storage
Tags: storage, kubernetes, opensource, openstack
Published: 2021-04-27 18:52:41

Sardina Systems and Ambedded Technology are showcasing how to deploy together with the benefits of building a large-scale IaaS with OpenStack and Software-Defined Storage. Register today https://bit.ly/3vmAmbN
Kotlin – Convert Map to/from Properties
Tags: kotlin, map, properties
Published: 2021-04-27 18:37:42

https://grokonez.com/kotlin/kotlin-convert-map-tofrom-properties

Kotlin – Convert Map to/from Properties

In the post, we show how to convert 'Kotlin Map to Properties' and versus case 'Properties to Kotlin Map'.

<!--more-->
<h2>I. Kotlin - Convert Map to Properties</h2>
Use <code>toProperties()</code> method of Map class,
-> Method signature:

<pre><code class="language-java">
fun Map<String, String>.toProperties(): Properties
</code></pre>

Practice:

<pre><code class="language-java">
package com.javasampleapproach.kotlin.map2properties

fun main(args: Array<String>) {
	val map = mutableMapOf<String, String>()
	map.put("db.username", "username")
	map.put("db.password", "password")
	map.put("db.driver", "org.postgresql.Driver")
	map.put("db.url", "jdbc:postgresql://localhost/testdb")
	
	// Converts this [Map] to a [Properties] object.
	// use -> fun Map<String, String>.toProperties(): Properties
	val propertiesOfMap = map.toProperties()
	
	// Traverse through propertiesOfMap
	propertiesOfMap.forEach{(k, v) -> println("key=$k, value=$v")}
	/*
		key=db.password, value=password
		key=db.url, value=jdbc:postgresql://localhost/testdb
		key=db.username, value=username
		key=db.driver, value=org.postgresql.Driver
	 */
}
</code></pre>
<h2>II. Kotlin - Convert Properties to Map</h2>
Iterate through <code>Properties</code> object by <code>forEach</code> or <code>for-loop</code> statement then manually use <code>put(key: K, value: V)</code> method of Map interface.

Practice:

More at:

https://grokonez.com/kotlin/kotlin-convert-map-tofrom-properties

Kotlin – Convert Map to/from Properties
A question for Android Developers
Tags: kotlin, android, codenewbie, development
Published: 2021-04-27 18:35:49

Can anyone please help me put and tell me why are we assigning the highlighted values twice ?
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20njfizw4jsrod3mvs6v.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upd2wgkmww84a6pyk7xu.png)
A new documentation website for Bricks
Tags: news, wordpress, vue, netlify
Published: 2021-04-27 18:30:15

Bricks, my open-source WordPress starter theme featuring Bootstrap and Gulp, has a new documentation website:

https://bricks.stefanobartoletti.it/

Built with Vuepress and hosted on Netlify, this site was an interesting project on its own, giving me the opportunity to use new technologies.

Just like the theme itself, even the documentation is open-source and its source code hosted on GitHub.

Contributions are warmly welcome on both projects!

{% github stefanobartoletti/bricks no-readme %}

{% github stefanobartoletti/bricks-docs no-readme %}