teleren/devto huggingface dataset:
Lessons Learned With Netlify Forms
Tags: webdev, api, netlify, javascript
Published: 2020-09-09 02:44:51

I decided to throw this together since I've been working on testing & debugging Netlify forms over the weekend. Some of the issues I ran into we're somewhat obvious in hindsight, but here is quick list of what I learned while building a reusable Vue component (to be open sourced in the near future). I'm not going to make this a long, drawn out article, just a few bullet points.

- If you have a `<label>` for your input, it will use that when displaying the fields in Netlify, like so; 

![https://cdn.brianmorrison.me/media/2020/27ecb42a-e22a-4ec4-8d11-608720a86401](https://cdn.brianmorrison.me/media/2020/27ecb42a-e22a-4ec4-8d11-608720a86401)

And here's the code.

```html
    <div class="form-group">
      <label for="name">Your Name<span class="required">*</span></label>
      <input type="text" class="form-control" name="name" id="name" v-model="formData.name" placeholder="Jane Smith" required>
    </div>
```

- It's important that the `name` in the input attribute matches the key of the actual data being submitted. 
- Fun fact, you can actually test form submissions to Netlify with Postman like so;

![https://cdn.brianmorrison.me/media/2020/4b858ad1-7620-4e88-98b9-9b15756e392b](https://cdn.brianmorrison.me/media/2020/4b858ad1-7620-4e88-98b9-9b15756e392b)

- When testing with Postman, the `form-name` form key must be present and match the name of the form. That seems to be what tells Netlify how to match up the incoming data. If its missing, you'll get a 404.
- Since you can simply POST the data to the URL, this means that you can actually test submissions locally with JavaScript by swapping out '/' with whatever the domain or subdomain of your Netlify app is like so;

![https://cdn.brianmorrison.me/media/2020/a0e20893-0f80-48bc-a66a-d139c0eb9f83](https://cdn.brianmorrison.me/media/2020/a0e20893-0f80-48bc-a66a-d139c0eb9f83)

Hope this helps someone. Happy coding!
Google Maps API Key - Does it need hidden?
Published: 2020-09-09 02:41:19

"Hide and protect your Maps API key!" so says [Google here](https://developers.google.com/maps/api-key-best-practices#api_key_table). 

Seems easy. But if you are reading this, you realized Google doesn't explain it well of what needs hidden and/or protected. 

Below is what you need to know:

### Assumption:
* You followed this [useful tutorial on GitHub](https://gist.github.com/derzorngottes/3b57edc1f996dddcab25) to hide your key with a .gitignore so git ignores it
* Realized step 6 doesn't work for Google Maps as the API key is visible upon Inspect Source.

### Do You Have a Client-Side Maps API Key?
If you have the option to connect to a Google Maps API with the following: 

```
<script defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
```

then you have a client-side API key which is meant to be visible!

So says a deep dive into StackOverflow threads and even Google (if you read between the lines, see below bullets) [says so here](https://developers.google.com/maps/api-key-best-practices#api_key_table).

#### Maps JavaScript API .....Best Practices
* Restrict your API keys                                              * Independent API key per app                  
* Delete API keys no longer needed         
* Exercise caution when regenerating keys      
* Monitor API key usage for anomalies          

#### Maps Static API   .....Best Practices
* Restrict your API keys                       
* Digital signatures                           
* Independent API key per app                  
* Delete API keys no longer needed             
* Exercise caution when regenerating keys      
* Monitor API key usage for anomalies          
* **Do not embed signing secret directly in code** 
* **Do not store signing secret in source tree**   
* **Review code before public release**            

Yup, that simple. You generally don't need to hide the API key unless you are working with the above bold items in the Best Practice List. 

But, you should protect and restrict it via [Google's suggested restrictions](https://developers.google.com/maps/api-key-best-practices#api_key_table_) to limit (but not stop) bad apples from hijacking your client-side/browser API key and running up the bills or usage requirement.
python crash course
Tags: python, amazon
Published: 2020-09-09 02:40:45

Hello friends, in this post we introduce my one of the new python ebook for students

so enjoy my new ebook
THIS E-BOOK IS VERY HELP FULL FOR BEGINNER
DIAMOND POINT OF THIS BOOK:

FULL PYTHON DATA SCIENCE TUTORIALS AVAILABLE
MACHINE LEARNING TUTORIALS ALSO AVAILABLE
THIS BOOK IS SIMPLE AND USER FRIENDLY IN NATURE
MOST OF THE PYTHON TRENDING EXTERNAL LINK IS AVAILABLE
TOTAL 12 SECTION IS AVAILABLE IN THIS BOOK
INDEX
SECTIONName of TopicPage No
1.Chapter 1Numpy in python08-
2.Chapter 2Pandas in python11-
3.Chapter 3Data Visualizationusing Matplotlib15-

4.Chapter 4Part 01) Seaborn Library in python for Data Visualization
Part 02) Seaborn Library in python 33-
5.Chapter 5Pandas Built in Data Visualization40-

6.Chapter 6Overview about Data Science43-

7.Chapter 7Machine Learning section 44-
8.Chapter 8Introduction about SVM46-

9.Chapter 9 Linear Regression part A)48-

10.Chapter 10 Linear Regression part B)49-

Chapter 11 Logistic Regression part A)
chapter 12 Logistic Regression part B)52-
Bonus Tips 66
so check this python ebook
https://www.amazon.com/PYTHON-BASICS-CRASH-COURSE-TUTORIALS-ebook/dp/B08FH4SS74
Vue training? learn Vue super well / super fast? Yes please...
Tags: javascript, vue, mentorship
Published: 2020-09-09 02:27:26

Ok. So - we are in no way officially affiliated with [vuetraining.net](https://www.vuetraining.net/) - but [@sheriffderek](https://sheriffderek.consulting) used to get private mentor sessions from [Jeffrey](http://www.jeffreybiles.com/) and is a big fan. He's a wonderful person and a wonderful teacher.

The thing is - that anyone can just say "I'm a teacher"... but Jeffrey has been teaching all sorts of stuff for a long time - and he's kinda like the most unsung celebrity and we don't get it.

How many teachers do you know that have this much info on Ember.js and now Vue.js ? Embercasts, Emberschool, Vuecasts... so many amazing videos!!!!!!!!!!!

It's _crazy_. He's touched so many people's lives - so, when something like [https://www.vuetraining.net/](https://www.vuetraining.net/) happens... you just know - it's going to be A+ and worth 10x the price.

So - we're just making _this post_ to say WHAT THE FUCK: IF YOU WANT TO LEARN _VUE_ - and you want to learn it _better_ and _faster_ than everyone else... (in 8 weeks) - for (way too low of a price, _Jeffrey_) - then just fucking **do it** already.

Vue is fun. This class is the best there is: and if you don't understand HOW INCREDIBLY _VALUABLE_ THAT IS... then you are doomed. Seriously?
React - Best Practices
Tags: react, javascript, bestpractices
Published: 2020-09-09 02:14:55

#Structure

**src/**
> **assets**
> > images
> > icons
> > fonts
> > **components/** 
> > > **buttons/**
> > > > **Button**
> > > > > **index.js** : Folder Export.
> > > > > **Button.js** : Rendering and Call Styled and Services.
> > > > > **Button.service.js** : Hooks and Local and State Management.
> > > > > **Button.styles.js** : Styled components CSS-JS + UI Toolkit.
> > > > > **Button.test.js** : Test Unit.
> > > > > **Buttom.story.js**: Component's Storybook).

> **config**: files with configuration.
> **containers:
> **data:
> **contexts
> **helpers
> **pages/
> > **home/**
> > > **index.js
> > > **styles.js (styled components + UI)
> **styles/
    themes
    globalStyles.js
    colors.js
    fonts.js
    icons.js
    metrics.js
.env
.eslintrc
.gitignore
.prettierrc


#CSS Images
Response Images Container or Styles.
```css
{
  background-image: url(.////);
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}
```

#ESLINT and Prettier
./node_modules/.bin/eslint --init



I'm not finished yet... I will continue updating this post.
Inventory Tracking App using Ruby and Active Record
Tags: ruby, codenewbie, rails
Published: 2020-09-09 02:09:39


For my second project for Flatiron school, I created a MVC app using Ruby and Sinatra. The app keeps track of the inventory for a shoe store. I have a friend who owns a sneaker store so I know how important it is to track the inventory.

##Architecture

I designed the database schema as follow: Sneakers belongs to brands, brands belongs to the user who created it, users have many brands, brands have many sneakers and users have many sneakers through brands.

##Features

* **Create and save to the database**

Users can create an account and login. Logged in users can create a brand of a sneaker for example Nike. They can also store additional details such as style, size, gender, price, quantity and barcode data.

* **Edit user info**

The users can edit their business name, username, email, and  change their password.

* **Edit brands**
 
Users can edit/rename brands.
 
* **Edit sneaker**

Users can edit their sneakers, can add to the quantity, and can subtract from sneaker quantity.

* **Delete Users and brands**

Users can delete their own account. Deleting an account also deletes all the brands and sneakers that are saved for the account. Users can delete individual and multiple brands, when a brand is deleted, the sneakers in the brand are deleted too, and users can delete individual and multiple sneakers.

* **Search** 

Users can search for a sneaker with the style name and the bar code number.

##What did I Learn?

Now I understand the saying "more code more bugs." The more I refactored, the more bugs I found. In the end I was able to fix all issues.  Also I learned more about SQl and about using Active Record to manipulate the database. I would like to learn more because I like it. I see what I can build with the little that I know and I can't imagine the things I will be able to build with more experience. After working on this app I think I will enjoy working as a backend developer. 
[You can check out the code on github.](https://github.com/yarvinh/Inventory-app)
Day 100 : #100DaysofCode - I DID IT!
Tags: 100daysofcode
Published: 2020-09-09 01:49:04

I did it, on June 1, 2020 I wrote this tweet:

{% twitter 1267467957845798913 %}

and today I completed the #100DaysofCode Challenge and I am proud of myself! I stuck to it and I can finally say I am a part of the #100DaysofCode community. I will create a post in the near future with my advice and experience with #100DaysofCode, but for now I am going to just enjoy feeling accomplished. 

Today, I focused on <a href="https://www.freecodecamp.org/news/javascript-array-of-objects-tutorial-how-to-create-update-and-loop-through-objects-using-js-array-methods/"> JavaScript Array of Objects Tutorial</a> and completed a few labs. One consisted of finding the first win in a game and then returning the year. I used google and freeCodeCamp to accomplish it. 

```
function nbaChampionshipWin(arr){
  // console.log(arr)
  let win = arr.find(year => year.result === "win");
  // console.log(win)
  if (win){
    console.log(win)
    return win.year
  }else{
    console.log(undefined)
    return undefined
  }
}


const record = [
  {year: "2019", result: "lose"},
  {year: "2018", result: "win"},
  {year: "2017", result: "N/A"}
]

nbaChampionshipWin(record);
```

The ``nbaChampionshipWin`` function in the code above takes in an array as an argument. The array is an array of objects. The challenge was to find and only return the first year that a team won. In order to do that I used the ``.find`` method to return the value of the first element in the provided in the ``arr`` that resulted in a "win". 

To make sure that the function does not return any errors, it is best to use the ``toLowerCase()`` method on the ``year.result`` so that it will always be lowercased and wont return false if the result is capitalized.

```
function nbaChampionshipWin(arr){
  let win = arr.find(year => 
    year.result.toLowerCase() === "win");
  if (win){
    return win.year
  }else{
    return undefined
  }
}


const record = [
  {year: "2018", result: "lose"},
  {year: "2017", result: "win"},
  {year: "2016", result: "N/A"}
]

nbaChampionshipWin(record);
```

Please remember that when using ``.find`` only the FIRST instance is returned. If you want to get multiple instances it is best to use the ``.filter`` method. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">More information on ``.filter`` here.</a>

As always, thanks for reading! I will continue blogging, just not for 100 days in a row. Look out for my blog on my #100DaysofCode experience.

Sincerely, 
Brittany

Song of the day:

{% youtube 8Jb7FJsJQsU %}
Library Testing Functionality
Tags: python, testing, tdd
Published: 2020-09-09 01:47:54

---
canonical_url: https://www.wilbertom.com/posts/library-testing-functionality/
---
We would save a lot of developer time if libraries included testing functionality. One example of this is the Python [requests](https://requests.readthedocs.io/en/master/) library. It's a beautiful piece of software that makes dealing with HTTP requests easy. Testing that you're making the correct HTTP requests is not straightforward, though.

* You can use the built-in python [mock](https://docs.python.org/3/library/unittest.mock.html) library. I won't reiterate points that have been made elsewhere but mocking usually leads to code smells.
* You can use the [responses](https://github.com/getsentry/responses) library. It helps, but it becomes unmanageable quickly. It's challenging to set up expected responses, especially since there could be multiple per test. Additionally, it seems that it is unmaintained. I have run into bugs around [passthrus and random test ordering](https://github.com/getsentry/responses/issues/322).
* You can use another third party testing library. I don't have experience with them and settled on building a personal one. 

At work([PrintWithMe](https://www.printwithme.com/)) we have multiple internal libraries. For any new one added, we make it a habit to provide testing functionality, including fakes/doubles, fixtures, setup/teardown, and other helper functions.
Youtube video iframe responsive
Published: 2020-09-09 00:58:48

```
.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
  max-width: 1920px;
  margin: 0 auto;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 1080px;
  }
}
```
Views from serverless
Tags: aws, beginners, architecture, serverless
Published: 2020-09-09 00:43:41

After passing the solutions architect exam I found myself thinking “ok, now what?”. I came across the #cloudresumechallenge on Reddit and got to work. Here are some thoughts on the criteria needed to complete the challenge.

**HTML/CSS** - I’ve always liked front-end since the myspace era. I chose a resume design template I saw on Pinterest a while back and wanted to copy it. It’s minimalist purposely since  this challenge is mostly about connecting things on the backend. I did however remember to take a mobile first design approach. Added in some flexbox for good measure.

**Static S3 Website/HTTPS/DNS** - While studying for the solutions architect exam, I got plenty of practice deploying a static website to S3 as well as setting up HTTPS and DNS pointing. I’m thankful I got this practice because it helped a lot. And we’re moving…

**Javascript**- It had been a while since I dipped my toe in the waters of javascript and all it’s quirks. But here we are. I used jQuery for an API call to my API Gateway to make it a little easier


**Python / Database**- I read through the docs a lot for this one. Python is new to me. It seems to be a lot cleaner than Javascript. I wasn’t too much of a database pro coming into this but the docs are pretty good at explaining. The atomic counter was an interesting solution to the problem so I went with that. I’m experimenting with some other personal projects using dynamodb to get more experience working with it.

**Infrastructure as code** - I have a love and hate with SAM. SAM made it really easy to setup all my resources. But indentation mistakes gave me errors galore, so it took me a while but I got it. Shoutout to SAM though. It was a pain in the beginning but I expect to use it extensively in the future.

**API** - API Gateway was an experience. CORS gave me the biggest issue. After going through what seemed like millions of stack-overflow answers, I came to the conclusion that everyone hates CORS. Okay maybe not everyone but I'm thankful for the experience with API Gateway issues. I gained a better understanding of CORS/Proxy troubleshooting.

**CI/CD(Front end)** - Setting up the CI/CD backend made things a lot simpler. I found a great blog post to guide me along the path to using Github actions for my front-end by Kyle Galbraith here .

**Tests and CI/CD(Back end)** - This one was a little hard to setup for me. The testing was a pain, especially dealing with Pytest. But once I figured that out I was home free.

**Final Thoughts** - I really appreciate the #cloudresumechallenge. Especially as a newbie to AWS. It made me work hard and read a lot but the end result is a better foundational knowledge of how some key AWS services work and integrate with each other. I plan to do more experimenting and mini projects as I go on this AWS journey.

Check out my final project [here](kevincolejr.com)
Art of GOOGLEing
Tags: webdev
Published: 2020-09-08 21:08:54

<b>GOOGLE</b> - Our day to day lifesaver. Whenever we stuck on a word, or we have a serious question in our mind, we GOOGLE it. But we face a similar problem every time as we search for <em>Python</em> the snake, and we end up with the programming language. There are many ways for an effective GOOGLE search. Today we will discuss it.

## Either Word

> OR

If you want to find pages with one of several words, use a capitalized <b>OR</b>, results will show pages that include all the terms.

![Google OR](https://ishanbagchi.github.io/Ishan-Tech-Blog/day1/images/google-OR.PNG)

## Blank

> \*

An asterisk works as a wildcard and helps you find your missing word in a phase.

![Google asterisk](https://ishanbagchi.github.io/Ishan-Tech-Blog/day1/images/google-A.PNG)

## Find news related to a particular location

> location:

Use this on Google News to find stories coming to form a particular location.

![Google location](https://ishanbagchi.github.io/Ishan-Tech-Blog/day1/images/google-LOCATION.PNG)

## Search for a particular filetype

> filetype:suffix

Google will restrict results to pages that end in suffix.

![Google filetype:suffix](https://ishanbagchi.github.io/Ishan-Tech-Blog/day1/images/google-FILETYPE.PNG)

## Search similar

> related:

Find sites with similar content to a URL you already know.

![Google related](https://ishanbagchi.github.io/Ishan-Tech-Blog/day1/images/google-RELATED.PNG)

## Search within a site

> site:

Get results from a certain domain.

![Google site](https://ishanbagchi.github.io/Ishan-Tech-Blog/day1/images/google-SITE.PNG)

## Search exact phases

> "Search"

If you want to search the exact phrase, write it in quotation marks.

![Google quotation](https://ishanbagchi.github.io/Ishan-Tech-Blog/day1/images/google-QUOTATION.PNG)

## Exclude a word

> -Search

Add a dash just before a word to exclude a search term. This is useful if you search for a word with several meanings.

![Google dash](https://ishanbagchi.github.io/Ishan-Tech-Blog/day1/images/google-DASH.PNG)

## Conclusion

I listed some of the ways to make an effective Google search to ease your day. Hope this helps you. Never stop learning and Happy Googleing!
Web Workers: Adding Multi-threading to JavaScript
Tags: javascript, web
Published: 2020-09-10 07:40:24

---
title: Web Workers: Adding Multi-threading to JavaScript
published: true
date: 2020-09-09 00:00:00 UTC
tags: JavaScript,Web
canonical_url: https://www.loginradius.com/engineering/blog/adding-multi-threading-to-javascript-using-web-workers/
---

Web workers have been around for a long time and add multi-threading capability to JavaScript. Let's dive in and see how they work.

   
[Read On](https://www.loginradius.com/engineering/blog/adding-multi-threading-to-javascript-using-web-workers/)
How to simulate a user clicking forward and back buttons in the browser using JavaScript?
Tags: javascript
Published: 2020-09-09 00:00:00

---
  title: How to simulate a user clicking forward and back buttons in the browser using JavaScript?
  published: true
  tags: JavaScript
  date: Wed Sep 09 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/move-back-forward-history-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-8a7f22c277b9cd51d184e1a8c7198fdb.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/move-back-forward-history-javascript)
  
To simulate a user clicking forward or back button in the navigation bar in the browser, We can use the
`forward()` or `back()` methods available in the `History` API.

## Simulating a forward click

To simulate a forward click we can use the `forward()` method like this,

```javascript
// Simulate forward click
window.history.forward();
```

## Simulating a back click

To simualte a back click we can use the `back()` method like this,

```javascript
// Simulate back click
window.history.back();
```

### Feel free to share if you found this useful 😃.

---
Full Stack as live style 
Tags: react, webdev, node
Published: 2020-09-08 23:17:07

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

Hello everyone, my name is Vlad Horbachenko, i live in Fremont Bay Area, and finished Lambda School Web Development course, and i have done a lot stuff using Front-end and Back end staff for my projects, using ReactJS, HTML5, CSS3, NodeJS for back and, ExpressJS, and MySQL, Firebase, i have done many projects using all this staff, and exiting to be here and tell what i have done. All this projects contain 

React, Redux, JavaScript, LESS/SASS, HTML, CSS, Apollo Client, Knex, Express, PostgreSQL, SQLite3, SQL, NodeJS

Looking for job: you can contact me 

https://github.com/VladyslavHorbachenko

## Amazon clone using Full Stack

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

https://clone-cfc93.web.app/

## MoverUp, working in StartUp Full Stack Web Developer 

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

https://moverupp.com/#/

## Google Clone

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

https://clone-2c88b.web.app/

## Tanrus Travelers 

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

http://trtravelers.world/

## Umove 

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

http://www.umove.us/

## Recipes Search API

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

https://vlad-recipies.netlify.app/

## Instagram Clone using Firebase Auth and DB

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

https://instargram-clone-react-d9a29.web.app/

## SEO "Movers Soyuz LLC" with great SEO score 

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

https://moversoyuz.com/index.html