teleren/devto huggingface dataset:
How do I enhance my Maths skills as a high school student?
Tags: discuss, programming, computerscience, career
Published: 2021-03-01 13:14:19

Hey
I have a question. The way they teach Maths at school here is like we have a couple of problems on text book. Teacher first teaches the concept behind the problems and then teaches us how to solve every problem. He solves each and every problem on whiteboard and we note and of course then test.

I cannot solve most of the questions if they are out of my text book. I would not be able to think critically and solve a problem based on what I have learned so far in mathematics.

I wanna be a computer scientist and I realize how important Maths is in CS.
Is it normal for a high school student? Or do I need to enhance my Mathematics skills? 
Because I see it as cramming to just be able to solve questions that are on your notebook only.

I need your opinion.
(I am in final year of high school and hopefully will be joining University for my CS degree after 6 or 7 months)
API Key on AWS API Gateway
Tags: aws
Published: 2021-05-27 19:24:32

---
title: API Key on AWS API Gateway
published: true
date: 2021-03-01 13:14:00 UTC
tags: AWS
canonical_url: https://javascriptwebscrapingguy.com/api-key-on-aws-api-gateway/?utm_source=rss&utm_medium=rss&utm_campaign=api-key-on-aws-api-gateway
---

<iframe title="Implementing API key on AWS API Gateway" width="640" height="360" src="https://www.youtube.com/embed/HV_MiVo30Jg?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

This walks through how to set up an API key on AWS API Gateway. API keys on AWS API Gateway go in tandem with Usage plans. Because of that, I also walk through setting up a Usage plan.

This all combos with an AWS Lambda function that is called from the AWS API Gateway.

I am using this on AWS in order to create an API that allows you get business details from Secretary of States around the country.

## Looking for business leads?

Using the techniques talked about here at [javascriptwebscrapingguy.com](https://javascriptwebscrapingguy.com), we’ve been able to launch a way to access awesome web data. Learn more at [Cobalt Intelligence](https://cobaltintelligence.com)!

The post [API Key on AWS API Gateway](https://javascriptwebscrapingguy.com/api-key-on-aws-api-gateway/) appeared first on [Javascript Web Scraping Guy](https://javascriptwebscrapingguy.com).
What does a developer look for in a new job (except for money)?
Published: 2021-03-01 13:13:58

I was wondering what are the things people look for in a new tech job. I know I want a good work-life balance, but what about you...? 

So I asked my lovely friends on Twitter😊

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">What other things (except money) are you looking for in a job?</p>&mdash; Eleftheria Batsou (@BatsouElef) <a href="https://twitter.com/BatsouElef/status/1364544352148742148?ref_src=twsrc%5Etfw">February 24, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## And here are the most common (or unique) answers:

- Flexible schedule
- Remote work
- Travelling opportunities
- Growth/learning opportunities
- Impact on users
- Worthy challenges
- Interesting projects
- Satisfaction
- Stability
- Recognition and encouragement!
- Contributing to a team that I enjoy being apart of
- Learning from others
- Code pairing
- Positive People who don't afraid to share knowledge
- Having a say in the decision making
- Unsolved problems --> More than just repeating familiar procedures
- Language + framework (only a few people gave me this answer!)

## About culture and the company
- People with diverse mind
- Diverse team
- Supportive colleagues
- Accepting/inclusive environment 
- Safe work environment
- Compatible team culture
- Fulfilling work/company
- Corporate ethics
- No micromanagement
- Behavior of the management / good manager / great leadership
- Managers that listen and act

## Extras
- Working coffee machine in the office
- Great food
- Afternoon nap (?!)
- Having fun

Do you recognize any of those things? What are your expectations?

----------------------------

👋Hello, I'm Eleftheria, an app developer, master student, freelancer, public speaker, and chocolate lover.

🥰If you liked this post please share

🍩Would you care about buying me a coffee? You can do it here: [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou) but If you can't that's ok too!


**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/elef_in_tech)
How to Create a Diverging Bar Chart with JavaScript — 20 Years of LA Lakers Win-Loss Record with Kobe
Tags: javascript, datascience, database, beginners
Published: 2021-03-01 13:09:16

If you want to learn how to easily build Diverging Bar Charts using JavaScript, there's a great step-by-step tutorial [published on freeCodeCamp](https://www.freecodecamp.org/news/diverging-bar-chart-javascript/) just last week.

Remembering Kobe Bryant one year after his death, Shachee Swadia, the author, used range bars to visualize the Los Angeles Lakers' wins and losses during all the 20 years with Kobe Bryant on the team, 1996-2016 🏀

The tutorial starts by demonstrating 4 fundamental steps to create a basic diverging bar chart using a JavaScript charting library; [AnyChart JS](https://www.anychart.com) is used for illustration; then the article walks you through several quick customizations of the visualization.

As a result, you've got both a compelling interactive diverging bar chart to explore the Lakers' win-loss record and a clear understanding of how to visualize data that way:

![A demonstration of a diverging bar chart in JavaScript](https://www.freecodecamp.org/news/content/images/2021/02/js-diverging-bar-chart.gif)

[Check it out on freeCodeCamp!](https://www.freecodecamp.org/news/diverging-bar-chart-javascript/) All chart examples built along the tutorial are available on CodePen with the full source code.
Daily Developer Jokes - Monday, Mar 1, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-03-01 13:00:14

---
title: "Daily Developer Jokes - Monday, Mar 1, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Monday%2C%20Mar%201%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258eb1a429.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why was the developer's family upset with them at dinner?

___A:___ They forgot to git squash before going home
 -->
Backup Users Home Directory In Linux Using Tar Command
Tags: linux, tooling, bash, backups
Published: 2021-03-01 12:33:59

## Introduction

We often need to do things that may put us at risk of losing data in Linux, nevertheless, it's always better to take systematic backups from time to time.

Today we will be learning about how to use the powerful tool called `tar` in Linux to help in the backup process.

## Tar Command

Let's take a quick look at the tar command and the flags that we will be using with it.

```bash
tar -zcvpf /[Backup_Location]/[Backup_Filename] /[User_Home_Directory_Location]
```

Now let's understand these flags.

* z : Compress the backup file with ‘gzip’ to make it a small size.
* c : Create a new backup archive.
* v : verbosely list files that are processed.
* p : Preserves the permissions of the files put in the archive for later restoration.
* f : use archive file or device ARCHIVE.

## Usage

Let us now backup the home directory, in my case, the user name is `akash`.

```bash
tar -zcvpf /backup/akash-backup-$(date +%d-%m-%Y).tar.gz /home/akash
```

This will produce the output (for the /backup directory) as

```bash
ls -lh /backup

total 15G
-rw-r--r--. 1 root root 15G Mar  1 12:09 akash-backup-01-03-2021.tar.gz
```

If you wish to exclude some directory to be archived, you can use `--exclude` flag, something like this

```bash
tar --exclude='/home/akash/Documents/test-folder' -zcvpf /backup/akash-backup-$(date +%d-%m-%Y).tar.gz /home/akash
```

This will archive everything excluding the `test-folder` inside Documents.

And that's it, this will help you create a backup and store it with the date inside `/backup` directory.

## Bonus

Doing this once is fine, but what if there was a way to regularly backup your content and automatically wipe out the old backups, wouldn't that be great. So let's just do that.

We will use a shell script and cron job to automate this task for us.

## Backup Script

First, let's move into a better directory where we will store our script.

```bash
nano /opt/scripts/home-dir-backup.sh
```

Now copy the mentioned script, it is pretty straightforward.

```bash
#!/bin/bash
DATE=$(date +%d-%m-%Y)
BACKUP_DIR="/backup"

# To backup akash's home directory
tar -zcvpf $BACKUP_DIR/akash-$DATE.tar.gz /home/akash

# To delete files older than 15 days
find $BACKUP_DIR/* -mtime +15 -exec rm {} \;
```

Set executable permissions for this file.

```bash
chmod +x home-dir-backup.sh
```

Now your script is ready to be used.

## Cron Job

The final step is to set up the cron job to run this script automatically. We will enter into crontab using

```bash
crontab -e
```

Inside it paste the following lines at the bottom.

```bash
0 12 * * 5 /opt/scripts/home-dir-backup.sh
```

This will run this script every Friday at 12:00. To learn more about how to configure these values, I would highly recommend using [crontab.guru](https://crontab.guru/).

Hope you found this helpful, see you in the next one.
Spring Boot + Vue.js example | Spring Data MongoDB + RestApi CRUD
Tags: springboot, vue, mongodb, restapi
Published: 2021-03-01 12:33:42

Tutorial: https://grokonez.com/frontend/spring-boot-vue-mongodb


Client & Spring Boot Server example that uses Spring Data to do CRUD with MongoDB and Vue.js as a front-end technology to make request and receive response.

Related Posts:
- <a href="https://grokonez.com/spring-framework/spring-boot/spring-data-mongooperations-accessing-mongo-database">Spring MongoOperations to access MongoDB</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/how-to-use-springdata-mongorepository-to-interact-with-mongdb-springboot-application">How to use SpringData MongoRepository to interact with MongoDB</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/build-springboot-mongodb-restfulapi">How to build SpringBoot MongoDb RestfulApi</a>

- <a href="https://grokonez.com/frontend/vue-js/vue-router-example-with-nav-bar-dynamic-route-nested-routes">Vue Router example – with Nav Bar, Dynamic Route & Nested Routes</a>

<!--more-->
<h2>Technologies</h2>
– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.4.RELEASE
– Spring Boot: 2.0.5.RELEASE

- Vue 2.5.17
- Vue Router 3
- Axios 0.18.0
<h2>Overview</h2>
This is full-stack Architecture:

![Full Architecture](https://grokonez.com/wp-content/uploads/2018/09/spring-boot-vue-example-spring-data-mongodb-rest-api-mongodb-architecture.png)
<h2>Demo</h2>
https://www.youtube.com/embed/gOrP0coCV10?rel=0
<h2>Spring Boot Server</h2>
![SpringBoot MongoDB RestAPI](https://grokonez.com/wp-content/uploads/2018/09/spring-boot-vue-example-spring-data-mongodb-rest-api-mongodb-architecture-server.png)
<h2>Vue.js Client</h2>
![SpringBoot Vuejs Client](https://grokonez.com/wp-content/uploads/2018/09/spring-boot-vue-example-spring-data-mongodb-rest-api-mongodb-client.png)
<h2>Spring Boot Server</h2>
![Project Structure](https://grokonez.com/wp-content/uploads/2018/09/spring-boot-vue-example-spring-data-mongodb-rest-api-mongodb-project-structure-server.png)
- <strong>Customer</strong> class corresponds to entity and table <strong>customer</strong>.
- <strong>CustomerRepository</strong> is an interface extends <strong>MongoRepository</strong>, will be autowired in <strong>CustomerController</strong> for implementing repository methods and custom finder methods.
- <strong>CustomerController</strong> is a REST Controller which has request mapping methods for RESTful requests such as: <code>getAllCustomers</code>, <code>postCustomer</code>, <code>deleteCustomer</code>, <code>findByAge</code>, <code>updateCustomer</code>.
- Configuration for Spring Datasource and Spring Data properties in <strong>application.properties</strong>
- <strong>Dependencies</strong> for <strong>Spring Boot</strong> and <strong>MongoDb</strong> in <strong>pom.xml</strong>
GitHub Advanced Search enhanced with NLP (WIP)
Tags: showdev, webdev
Published: 2021-03-01 12:29:52

For the past 3 years I have been exploring how NLP can help us interact with computers. This work has the end goal of creating an AI aided programming language. On the way there I am publishing tools and services that use the technology both as a reality check but also suggestive feedback on the technology (and as a proof that I have not gone insane). 

What has come to my interest lately is that vast amounts of sites enable advanced search functionality in a pseudo query language that is "almost" impossible to remember. This is a perfect playground for a programming language, so I have started creating some Chrome extensions that inject the language at various places.

Currently I am working on the GitHub search, which will be available on the Chrome store in a day or two. See a demo below (click for YouTube video):
[![DEMO](https://img.youtube.com/vi/v43515PR0D4/0.jpg)](https://www.youtube.com/watch?v=v43515PR0D4)

(I have also done other sites, see my other posts). 

What sites do you think could benefit from this technology? 

If you want to try implementing the query language for your own website I have released everything as an API which you can learn about at https://query.quantleaf.com.

Happy coding!
Marcus Pousette
Using a hook inside .map
Published: 2021-03-01 12:25:25

Hi

Firstly, apologies if my terms are not correct.

I am learning React and I have created a simple accordion component. This works as it should but I have found an issue trying to make it reusable with arrays that are structured differently.

I have managed to use a hook which allows me to either use my blogs.json file or my stories.json file like so:

```
<Accordion array={stories}/>
<Accordion array={blogs}/>
```

Now my issue is, my Accordion component uses .map to gather the information, I have asked it to look for i.e. item.content but the blogs array doesn't have content, the blogs array uses body.

I tried using the following:

```
<Accordion array={stories} content={stories.content}/>
<Accordion array={blogs} content={stories.body}/>
```

but that won't work. I was thinking I need to change the following line in the component

```
<p>{item.content}</p>
```
to something like:
```
<p>{content}</p>
```
Which I can pass some static text and it work fine but nothing from the array.

Here's my component, 
```
import { useState, useEffect, useRef } from "react";
import styled from "styled-components";
import stories from "../data/Stories.json";

const Accordion = ({ array }) => {
  const [activeIndex, setActiveIndex] = useState(null);
  const ref = useRef();

  useEffect(() => {
    const onBodyClick = (event) => {
      if (ref.current && ref.current.contains(event.target)) {
        return;
      }
    };
    document.body.addEventListener("click", onBodyClick);
    return () => {
      document.body.removeEventListener("click", onBodyClick);
    };
  }, []);

  const handleChange = (index) => {
    setActiveIndex(activeIndex === index ? null : index);
  };

  const renderedItems = array.map((item, index, key) => {
    return (
      <div key={item.title}>
        <div
          ref={ref}
          className={`${activeIndex === index ? "active" : ""} title`}
          onClick={() => handleChange(index)}
        >
          <i className="dropdown icon"></i>
          {item.title}
        </div>
        <div className={`${activeIndex === index ? "active" : ""} content`}>
          <p>{item.content}</p>
        </div>
      </div>
    );
  });
  return <div className="ui styled accordion">{renderedItems}</div>;
};

export default Accordion;

```

How do I overcome this?
[BLOG] O que é Emmet e como ele vai adiantar MUITO o seu dia a dia! – Dica rápida
Published: 2021-03-01 12:20:43

O Emmet (antigo Zen Coding) é um recurso disponível para MUITOS editores de texto e IDEs. O objetivo dele é escrever menos, simples assim.

Embora tenha suporte a XML e até CSS, o Emmet da um show de verdade no HTML, em vez de escrever tags completas usamos “atalhos” mais simples e que irão gerar tudo de forma controlada.

Um exemplo bem prático:

[Continuar...](https://blog.erikfigueiredo.com.br/o-que-e-emmet-e-como-ele-vai-adiantar-muito-o-seu-dia-a-dia-dica-rapida/)
Testing the new CDK Construct to deploy a Serverless NextJS application in CloudFront and Lambda@Edge
Tags: cdk, aws, nextjs, serverless
Published: 2021-03-01 12:15:19

In a [previous article](https://dev.to/aws-builders/aws-amplify-sam-cdk-what-to-choose-for-your-infrastructure-as-code-on-aws-lh2) I shared my pursuit of my Infrastructure as Code to be as "AWS native" as possible. So **Amplify**, **SAM** and **CDK** are my arms of choice.

One tremendous gap, specially for me, was a good way to deploy React apps on AWS in a serverless mode without a lot of overhead. The closest I got was running _Fargate_. But in [Serverless Framework](https://www.serverless.com/) community there was a zero-config constructor called [Serverless Next](https://serverless-nextjs.com/) which was great. AWS Amplify hinted we could do SSR soon this solution was the best in the community so far.

The overview of the architecture:

![Serverless Nextjs Architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yf8dn4olkvw1y313x2yl.png)
> _Source:_ [Serverless Next.js Component GitHub repository](https://github.com/serverless-nextjs/serverless-next.js#architecture)

So when I heard the community was developing a CDK Constructor which I was thinking in build with help of others...

![Excitement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtthgt0bqeou2228jkpg.gif)

... I was following closely and interested in the future developments of this release. So the release was published days ago, still labeled as _experimental_: [Serverless Nextjs CDK Construct](https://serverless-nextjs.com/docs/cdkconstruct/). Because of my... uh... interest as soon as possible I started testing, I got some problems here and there, asked for help and life found a way.

This [live demo, the PokéServerless](https://d2isii528175w2.cloudfront.net/), is a minimal proof of concept of a NextJS application running on AWS with [CloudFront](https://aws.amazon.com/cloudfront/) and [Lambda@Edge](https://aws.amazon.com/lambda/edge/). I just fetch all Pokémons through the [PokéAPI](https://pokeapi.co/) then I use a **Ditto** in `pages/[ditto].js` to Server Side Generate a page for each one of the Pokémons. Is simple as that.

![scizor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iy17ac9ow1cpvk7c9ybw.png)
> _Picture above: This badass Bug/Steel type, **[Scizor](https://d2isii528175w2.cloudfront.net/scizor)**, was rendered with `getServerSideProps`_

You can find [the code behind this example in this repo](https://github.com/ibrahimcesar/nextjs-ssr-cdk-aws).

**Gotta Fetch'Em All!**
Customize npm init default values
Tags: node, npm, programming
Published: 2021-03-01 12:14:36

`npm init ` is a first process of any new node project and we all have to setup author, version and license manually, This tutorial help you to config those things globally .


This is default `npm init -y` result value
![carbon-before.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614591292962/fEndnoMTu.png)


for chang default value of npm init command you need to follow this Synopsis
```
npm config set <key>=<value>
``` 

Change global author name by 
```
npm config set init-author-name "vimal kumar"
``` 
Change global author email by 
```
npm config set init-author-email "vimal@letskhabar.com"
``` 
Change global author web url by 
```
npm config set init-author-url "https://vimal.letskhabar.com/"
``` 
Change global default license
```
npm config set init-license "MIT"

``` 
Change global default version
```
npm config set init-version "0.0.1"
``` 

For more check this [npm documentation](https://docs.npmjs.com/cli/v6/commands/npm-config)


All the change has been saved in your `~/.npmrc` directory as shown in image below

![npmrc.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614591650785/QzIz2pf6E.png)


Now when you create new project with `npm init -y` you can see your default value has been changed according to your setup.

![carbon-after.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614591302798/aZaaAtSkK.png)

Enjoy, Thanks for reading.