teleren/devto huggingface dataset:
React Hooks and state
Published: 2020-08-10 14:56:17

With React Hooks, we can give our functional components some state to keep track of and render()  with said component or even children components. To do this we can use the useState() hook to set our initial state and the setState() method for updating. When we want to do something AFTER our component renders for the first time, (Mounts) we can use the useEffect() method. So, we set the initial state of our component with the useState() method and update the state with the setState() method.

Being able to manipulate and set the state of our functional components allows more freedom and flexibility while building or Apps with React. For example, when we want a small component to be able to keep track of, and update its own state without rendering it through a parent component, we could use a hook instead of the traditional Class component with a constructor, saving time, space and making our code easier to read for humans! Sweet!
USING NETLIFY FORMS
Published: 2020-08-10 14:48:40

While hosting your frontend applications on netlify, you can permit your forms to be submitted on Netlify without using any backend or api for submission and with just a little code, netlify takes care of it all.

Form submission on netlify can be achieved by setting the form action to “POST” and adding a Netlify attribute called “DATA-NETLIFY” and setting this attribute to “TRUE”. Give a name attribute to your form and input fields so that Netlify can identify the fields properly. Deploy your form to Netlify and all messages sent through the form is displayed in the “RECENT FORM SUBMISSIONS” section.

## Setting  Notifications
You can also be notified of a recent form submission on your email by going to the settings section on Netlify, then clicking on the forms section and then form notifications. Click on the “ADD NOTIFICATION” button and save Email notification to receive emails notifying you of recent form submissions.


## Code Sample
```html
<form action="POST" name="contact" data-netlify="true">
  <div>
    <div>
      <input type="text" name="name" placeholder="Your Name" />
    </div>
    <div>
      <input type="email" name="email" placeholder="Your Email" />
    </div>
  </div>
  <div>
    <input type="text" name="subject"  placeholder="Subject" />
  </div>
  <div>
    <textarea name="message" rows="5" placeholder="Message"></textarea>
  </div>
  <div>
    <button type="submit">Send Message</button></div>
</form>
```
Vue Simple Gallery Uploader
Tags: vue, javascript, uiweekly, design
Published: 2020-08-10 14:45:19

Hello everybody!

I was working on a simple task to make a simple upload UI for several pages in my project. So I decided to make a Vue Component and publish it on Github too - I called it as "Vue Simple Gallery Uploader". It has been published recently.

## Built with
- JavaScript
- Vue 2
- VueDraggable
- Bootstrap (Partially, and I don't import bootstrap into the project)

## Features
- Can upload:   
    - Images (have preview mode)
    - Files (only show up filename) 
- Validation
- Working with RestAPI
- Drag'n drop to re-position the files.

## Demo 

![Vue Simple Gallery Uploader Demo image](https://dev-to-uploads.s3.amazonaws.com/i/fzfsgk87un5umajwy5no.gif)

(online demo coming soon >O<)

## Repository / Installation / Implementation

Visit [GitHub - Vue Simple Gallery Uploader](https://github.com/sethsandaru/vue-simple-gallery-uploader).

Please give it a ⭐ if you liked it. It would cheer up my day <3.

## Things that need to improve
I noticed some, likes:   
- Fixed columns: yes, right now it's fixed 4 columns. It should be configurable.
- Ajax Header Configuration (For authorization, etc,...)
- Standalone styling (coming soon `0.2.0`)
- ... (more? please give me some reviews so I can make it better :D)

Thanks and have a nice day!
AzureFunBytes Short - @Azure Containers (Kubernetes, Container Instances, More)
Tags: containers, azure, beginners, tutorial
Published: 2020-08-10 14:43:16

AzureFunBytes - A Twitch show on how to use all the fundamentals that are Microsoft Azure.

This time we look at the options for containers on Azure.

{% youtube y89uKNkk1BA %}

AzureFunBytes! - Byte-sized content with a live Twitch show! 

Learn about Azure fundamentals with me!

Live stream is available on Twitch at 2 pm EDT Thursday. You can also find the recordings there as well.

https://twitch.tv/azurefunbytes
https://twitter.com/azurefunbytes

Join me, ask questions, and learn about Azure!

Useful Docs:
Azure Kubernetes Service (AKS) - https://cda.ms/1vq
App Service documentation - https://cda.ms/1vr
Azure Container Registry documentation - https://cda.ms/1vs
Microsoft Learn: Azure Fundamentals - https://cda.ms/1jV 
Microsoft Azure: $200 Free Credit https://cda.ms/1tj
UI Dev Newsletter #17
Tags: uiweekly, css, javascript, webdev
Published: 2020-08-10 14:30:53

Here's the content from the latest issue (No. 17) from the UI Dev Newsletter.


- [content-visibility: the new CSS property that boosts your rendering performance](https://web.dev/content-visibility/)
Una Kravets shows how to improve initial load time by skipping the rendering of offscreen content.

- [Infinite Scroll without Layout Shifts](https://addyosmani.com/blog/infinite-scroll-without-layout-shifts/)
Addy Osmani describes how to avoid layout shifts with infinite scroll.

- [A Lightweight Masonry Solution](https://css-tricks.com/a-lightweight-masonry-solution/)
Ana Tudor explains how to create masonry solution using only CSS and how to make a JS fallback.

- [Rehearsing the Future](https://design.google/library/rehearse-the-future/)
Members of Google’s speculative design teams discuss how they are rehearsing for what is next

- [The Making of: Netlify’s Million Devs SVG Animation Site](https://css-tricks.com/the-making-of-netlifys-million-devs-svg-animation-site/)
Sarah Drasner shows how latest Netlify SVG Animation is done with GSAP library.

- [State of Frontend 2020](https://tsh.io/state-of-frontend/)
The Software House team shows results from the survey for everyday frontend development according to 4,500 experts.

- [Spotting a Trend](https://css-tricks.com/spotting-a-trend/)
Geoff Graham shows the latest trend on web design—blobby shapes.

- [Layout Shift GIF Generator](https://defaced.dev/tools/layout-shift-gif-generator/)
Chris Johnson creates a tool for visualizing the Core Web Vitals metric Cumulative Layout Shift (CLS) with a simple GIF.

Happy coding!

[Subscribe to the newsletter here!](https://mentor.silvestar.codes/reads#newsletter)
How to build a blog with Gatsby and AWS - Part 1
Tags: gatsby, aws, webdev
Published: 2020-08-10 14:24:14

You always wanted to start blogging and now you are looking to have your own site, well this guide will set you up with a minimal looking blog.
It's a good project and learning experience to create your own.

## Goal ⚽
Have a responsive personal blog site, with markdown support.
We will be using [Gatsby JS](https://www.gatsbyjs.org/) and host it on AWS with [Amplify](https://aws.amazon.com/amplify/)

![01777a363ae3eb4618fe7009cf963537.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1597065259761/FRBd5Ep0F.png)

![2020-08-10 09_13_50-Window.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1597065264471/u4eKmdT74.png)

## Demo 📑
Here is the link to the project that we will end up with: https://gatsby-starter-julia.netlify.app/

## Dive in ⚙

I always wanted to create some YouTube tutorial, and after giving it a long thought, I am sharing this guide as a video tutorial

{% youtube 0pxRMlDh8Nw %}

Hope you guys like it and find it helpful.
The second part of the series will be out early next week.

Subscribe to my [YT channel](https://www.youtube.com/c/rishabkumar7) | Follow me on [Twitter](https://twitter.com/rishabk7)
Pros and Cons of Magento Ecommerce Platforms

Tags: magento, crm
Published: 2020-08-10 14:22:26

Ecommerce platforms have made it cost-efficient and easier than ever to set up your own online store. The Magento ecommerce platform has been the leading choice of retailers all over the world. 

In recent years, Magento went through a lot of changes to become one of the most commonly used platforms on the market. Other platforms that follow close behind are BigCommerce, Shopify, Salesforce, and Woocomerce. 

The Pros of a Magento ecommerce platform

Magento came out as one of the most robust, flexible, user-friendly, and scalable platforms in the ecommerce market. It offers an extensive range of powerful tools for developing and running your online store. Let’s talk about the advantages of Magento ecommerce platform in detail.

Feature-rich

Magento offers an abundance of out-of-the-box features to operate your business, such as multiple stores, numerous locations, different languages, product types (simple, configurable, virtual, grouped, bundle, downloadable), color swatches. Since Magento 2.3’s release, it also supports multiple warehouses, various price tags, and a wide range of currencies.

Compare Magento with Shopify, Woocommerce, or any other ecommerce platform. Magento stands out with its variety of features. Magento Commerce offers powerful options when it comes to marketing, user loyalty, user experience, and business efficiency. 

Optimal scalability 

Magento is fully scalable, so whether you’re selling 100 items or 1,000,000,  Magento can deal with it effortlessly. 

In fact, Magento can support up to approximately 500,000 products and thousands of transactions per hour. It’s a prominent benefit because you can scale smoothly in the background with no interference involved. 

The Cons of a Magento ecommerce platform

Among its many advantages, we need to consider some weaknesses before using Magento as an ecommerce platform.

High cost

Magento is a very expensive solution (compared to Shopify, for instance). Magento license costs are usually based on a store’s revenue through the platform. Magento Commerce Cloud licensing begins at $2,000 per month or on-premise begins at $22,000 per year. 

Even though Magento Open Source is free of charge, it requires support that includes updates, custom development, and integrations. You also need to pay for off-the-shelf extensions for developer’s work building those extensions. Magento developers usually charge more than regular PHP web developers.

Require excellent development skills

Magento is a complex platform, with over 20,000 files and 200 database tables that not all developers will know how to manage. It can be difficult for beginners with the lack of or no technical skills to build an ecommerce store on Magento. 

Even skillful and qualified Magento developers who have experience with the core software need time to learn how to set up and run Magento at its full potential.
Continue reading [here](https://elogic.co/blog/pros-and-cons-of-magento-ecommerce-platforms/)
Python networking 101
Tags: python, beginners, coding, tutorial
Published: 2020-08-10 14:06:06

This is how I survive in web development using mainly Python.

Getting a web page, posting data to an API or making connections to FTP servers to download files automatically are super common tasks when you're programming. And, as with most tasks, Python makes it super easy to do them.

## HTTP Requests
For the HTTP stuff, all you want is in [the `requests` library](https://requests.readthedocs.io/en/master/user/quickstart/). Wanna get the best website ever?

```python
import requests

response = requests.get('https://gmcruz.me')
response.content # gives the HTML for the page
response.status_code  # gives the HTTP status code (200, 404, etc.)
```
Boom


How about sending data in a POST request to an API?
```python
import requests

endpoint = 'https://httpbin.org/post'
body = {'user':'gabriel', 'password':'iloveyou'}

response = requests.post(endpoint, data = body)
response.json() # converts the response object to JSON
```
Done

## Sockets and connections
> **What are Sockets?**
> Sockets are pretty much like electricity sockets. There's one on the wall with holes in it (the server-site, or **listening** socket) that waits for other sockets to plug in it (the client-side socket). 
 
> **What are Ports?**
> TCP sockets are bind to TCP **ports**. A port is just an integer that addresses a program (or rather, a process). This allows a host to have multiple processes using TCP sockets to run at the same time. When a packet comes in, it reads the port and sends the incoming data to the appropriate program.

If you come from a C background, the Python functions for socket handling pretty much mimic the C ones, but with that extra sugar that we all love.

To create a listening TCP socket on `localhost` port `9849`
```python
import socket

host = 'localhost'   # or any other host
port = 9849          # or any other port

my_socket = socket.socket() # create a new socket object
my_socket.bind((host, port)) # bind the socket to host and port
my_socket.listen() # start listening

conn, addr = my_socket.accept() # accept an incoming connection
```

To connect to the listening TCP socket at `localhost` port `9849`

```python
import socket

host = 'localhost'   # or any other host
port = 9849          # or any other port

my_socket = socket.socket()
my_socket.connect((host, port))
```

To send data through the connected socket
```python
conn.send('hey there'.encode()) # on the server (listening) side
```
Or
```python
my_socket.send('hey there'.encode()) # on the client side
```
Sockets speak in a different [encoding](https://www.w3.org/International/questions/qa-what-is-encoding) than `utf-8` (which Python uses). Don't forget to always `.encode()` your data from `utf-8` to `bytes` before sending.

Finally, to receive data from a socket
```python
max_bytes_to_recv = 1024
data = my_socket.recv(max_bytes_to_recv)
print(data.decode())
```
Similarly to encoding, don't forget to `.decode()` your data from `bytes` to `utf-8` after receiving.
How To Grow An Industry- The Building an Indie Business Podcast
Tags: podcast
Published: 2020-08-10 13:54:22

[Listen Here](https://podcasts.google.com/feed/aHR0cHM6Ly9hbmNob3IuZm0vcy85YjAyYzM4L3BvZGNhc3QvcnNz/episode/MWMyMTUwMjYtZWMwMy00M2FiLTg5MGEtYjY2ZmY3NGFkMGUw?sa=X&ved=0CAgQkfYCahcKEwjAoYLQ45DrAhUAAAAAHQAAAAAQAQ)

In this episode, I discuss how to grow an industry

**Show Notes:**
[Revenue Research](https://revenueresearch.co/)
[Episode Page](https://baib-podcast.com)
[Buy the book I wrote](https://blog.openpodcast.xyz/podcast-book/)
Pretty Git Log built w/ React & Ink
Tags: showdev, git, react, javascript
Published: 2020-08-10 13:53:33

Hi! This is a short **#showdev** post to share what I've created yesterday using React, [Ink](https://github.com/vadimdemedes/ink) and [simple-git](https://github.com/steveukx/git-js#readme) 🙂

> A Pretty Git Log npm package with basic interactivity

See this video:

{% vimeo 446465340 %}

That's it for now 🤷‍♂️

Have ideas or comments — please, share! I'll be glad to discuss!

Want to participate / fork? Here's the repo [github.com/kosich/git](https://github.com/kosich/git)

Follow me here and on [**twitter/@kddsky**](https://twitter.com/kddsky) for more: I'll create and share a tutorial on this soon!

**Thanks for reading!** ❤️

THE END
We launched Frontendor UI Library on ProductHunt
Tags: showdev, webdev, news
Published: 2020-08-10 13:46:09

✅ Today is the day!
👉 We launched Frontendor.com UI Library on ProductHunt

👉 Show it some love folks by UPVOTING 😻
https://www.producthunt.com/posts/create-landing-pages-by-copy-paste


WHY FRONTENNDOR?

✅ Neat code, easy to customize
✅ Separate blocks, easy to integrate
✅ Get more clicks, sales, and conversions.
✅ Tested with many customers. We're rated 5/5 stars.
✅ 4 Beautiful Templates (6 coming in the way)
✅ 50+ UI Blocks/Sections
✅ Unlimited Published Sites
✅ Contact & Subscription Form
✅ Custom Code (HTML/CSS/JS)
JavaScript Immediately invoked Function Expression (II Don noFE)?
Tags: javascript, programming
Published: 2020-08-10 13:33:42

---
title:JavaScript Immediately invoked Function Expression (II Don noFE)?
published: true
description: In this article, you will learn about IIFE and how to write you own IIFE
tags: javascript,programming
---
![JS IIFE](https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQcsIlcIcy6QebPXp-S9NRH3C-_2mmILwfknw&usqp=CAU)
## What is IIFE?
 So you have been hearing **IIFE** and have been wondering, what is this **IIFE**?
Well, worry no more!

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.

## How does a normal functions looks like?
 ```
   function multiply() {
 var x = 20;
 var y = 20;
 var answer = x * y;
 console.log(answer);
 }
multiply(); 
 ```
This function simply multiplies together the values of x and y. We then call the functions shortly after.

## Why then do we need IIFE?
The most common use case for **IIFE** is to create a [closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) with some private variables inside it.

The above function can be be reused anytime we want to. We can just do that by calling the function `multiply()`.

What if that is not what we want? What if we simply want to call a function in order to get an output, not to reuse it?
We would not want our program to ever be able to accidentally access it. We would not want to pollute the global object.
That is when **IIFE** comes into play.

## How do we then write an IIFE?

It's simple!
Let's take it from the name:
### Function expression
To make a function to be a function expression, we declare it inside parentheses like this: 
```
(function () {
    statements
});
```
### Immediately Invoked
To make it immediately invoked, we append () to the function expression.
```
(function () {
    statements
})();
```

>We basically have a function defined inside parentheses, and then we append () to execute that function.

-The first is the anonymous function with lexical scope enclosed within the Grouping Operator (). This prevents accessing variables within the IIFE idiom as well as polluting the global scope.
-The second part creates the immediately invoked function expression () through which the JavaScript engine will directly interpret the function.

*We can rewrite our multiply function using IIFE*
```
  (function multiply() {
 var x = 20;
 var y = 20;
 var answer = x * y;
 console.log(answer);
 })();
```
This will immediately call the function

## Assigning IIFE to a variable
We can assign an **IIFE** to a variable.This will store the function's return value, not the function definition itself.

```
var result =  (function multiply() {
 var x = 20;
 var y = 20;
 var answer = x * y;
 console.log(answer);
 })();
 ```

 And then we can have the result like this:

 ```
 result;
 //400
 ```


 [^1]:This is my first post on dev.to 😁. Hope you like it.
REST API
Tags: webdev, api, react, node
Published: 2020-08-10 13:32:16

Recently, I have given 3,4 interviews for web-development domain. All the interviewers had different sets of questions. But there was question which was common among all of them. Do you what is that question ?

It's what is a REST API ? Do you know how to create one?

I think REST API is the most important part of web-development. 
Thoughts ?
callback hells
Tags: javascript
Published: 2020-08-10 13:31:08

I'm happy that I finally learned how promise, async, await, try and  catch work together! Now I can remove many callback hells that exist in my node.js project. I did not know that they were called "callback hells" when I created them. But I did find it frustrating to write deeply nested code. With the promise-async-await-try-catch sword, I feel that I can conquer the hells now.
Create your first REST API with ASP.NET Core And Visual Studio Part-1
Tags: aspnet, aspnetcore, efcore, sqlserver
Published: 2020-08-10 13:30:08

---
title: Create your first REST API with ASP.NET Core And Visual Studio Part-1
published: true
description: Create your first REST API with ASP.NET Core And Visual Studio Part-1
tags: aspnet, aspnetcore, efcore, sqlserver
---

A simple video about Creating ASP.NET Core  Web API(Rest API) with Entity framework core and SQLServer using Visual Studio 2019.

In this introductory video, We have created an ASP.NET Web API project with Visual Studio 2019 from the template we have already there by default. We have also learned how we can integrate the simple routing with ASP.NET Core controllers.

We also saw a startup file and a few other items in the ASP.NET Core Web API template.

The technology used in this video are:
ASP.NET Core 3.1
Entity framework core 3.1
Visual Studio 2019


Following is video for the same.

{% youtube g0dya5evC1Q%}

If you like this video and wanted to see a similar kind of video then, please subscribe to my youtube channel at - https://bit.ly/codewithjv.

Also, Do let me know what more content you wanted to see in for ASP.NET Core
JoeSchmoe API Demo
Tags: javascript, css, webdev, jquery
Published: 2020-08-10 13:28:37

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/66whtyo3c5rgsovkwbhk.jpg)

Joe Schmoes are colorful characters illustrated by Jon&Jess that can be used as profile picture placeholders for live websites or design mock ups. [official website](
https://joeschmoe.io)</br>
> Check out it's implementation in my pen on codepen [click](https://codepen.io/saxenaudit/pen/dyMoQqx)
Search GitHub instead of Stackoverflow when in trouble
Tags: mindset, productivity, github
Published: 2020-08-10 13:25:09

Usually when we wan’t to try new things (new libraries, new framework, new language), we’re not quite sure how the code would look like in the end, or what is necessary to configure it correctly.

We follow the documentation, but suddenly there’s one step missing and you’re stuck. Or the documentation authors assume you know enough, but you’re sitting there, feeling dumb and then it comes to you:

I SHOULD GOOGLE IT!

Hoping for that first result, including Stackoverflow question. But then comes describing your own problems. So you try one thing, and the results are promising but 0 value. You return and modify search query, but the same outcome. So you know the answer is so close, but you just can’t formulate your query to map it 1:1 to your problem. And you feel even more dumb, because you can’t solve a problem of unique username in a new framework, although YOU KNOW HOW TO GOOGLE IT, but it still don’t give you desired results.

So, instead of trying descriptive approach, where the result depends on how well can you describe your problem or express yourself, why not try direct approach. Copy one line of code that you think other should’ve written in their projects before and search for them in GitHub. Now the result depends more on what you’ve copied, not how did you express yourself. And it’s less likely to be “misunderstood”.

You’ll bee amazed about the results. You’re probably not the first person implementing something, and you’ll often find hundreds of thousands repos where others had implemented the same thing. And it’s probably working code, since people USUALLY keep their repos working.

Often, you’ll find another approaches. Some of them are not expected at all. Maybe you have one idea in mind, bot someone solved the same thing in totally different way. Maybe one line in some side configuration that you weren’t aware of at all.

So, be quick in finding your answers, be productive!
—
Follow me on [@brunoraljic](https://twitter.com/brunoraljic)