teleren/devto huggingface dataset:
How to Retrieve a Google Sheet in JSON Format Using the Google Sheets ID
Tags: javascript, google, tutorial, beginners
Published: 2023-04-22 13:34:28

To get the entire Google Sheet in JSON format using the Google Sheets ID, you can use the Google Sheets API. Here are the steps:

1. Enable the Google Sheets API: First, you need to enable the Google Sheets API for your project. To do this, go to the Google Developers Console and create a new project. Then, enable the Google Sheets API for that project.

2. Get the Google Sheets ID: The Google Sheets ID is a unique identifier for your sheet. You can find it in the URL of your sheet. It is the long string of letters and numbers between the "/d/" and the "/edit" in the URL.

3. Authenticate your request: To access your Google Sheets data, you need to authenticate your request with an API key or OAuth 2.0 credentials. You can create an API key from the Google Developers Console or set up OAuth 2.0 credentials to access private user data.

4. Send the API request: Finally, you can use the following API endpoint to retrieve the entire Google Sheet in JSON format:

```
https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}?includeGridData=true&key={apiKey}
```

Replace `{spreadsheetId}` with your Google Sheets ID, and `{apiKey}` with your API key or OAuth 2.0 credentials. The `includeGridData` parameter is set to `true` to retrieve the data in a structured format.

5. Parse the JSON response: Once you send the API request, you will receive a JSON response containing the data from your Google Sheet. You can parse this JSON response using a programming language like JavaScript, Python, or PHP.

Here is an example of how to retrieve the entire Google Sheet in JSON format using JavaScript:

```javascript
// Replace the spreadsheetId and apiKey with your own values
const spreadsheetId = 'your-spreadsheet-id';
const apiKey = 'your-api-key';

// Send the API request
fetch(`https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}?includeGridData=true&key=${apiKey}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
```

This example uses the `fetch` function to send the API request and retrieve the JSON response. Once the response is received, it is parsed into a JavaScript object using the `json` method. Finally, the data is logged to the console.

Note that the Google Sheets API has rate limits and usage quotas, so you should be careful not to exceed these limits when retrieving large amounts of data.
The Danger of Overfitting: How to Recognize and Address Overfitting in Data Analysis
Tags: datascience, dataanalysis
Published: 2023-04-22 13:29:52

Overfitting is a common problem in data analysis that occurs when a model or algorithm is overly complex and fits the data too closely. This can result in inaccurate predictions and unreliable insights.

To avoid overfitting, data analysts need to recognize the signs of overfitting and implement strategies to address it.
Here are some steps data analysts can take to address overfitting.

1. The first step to recognizing overfitting is to understand the bias-variance tradeoff. 

2. Another way to address overfitting is to use regularization techniques such as Lasso or Ridge regression. 

3. Another is to address overfitting is to use cross-validation techniques such as k-fold cross-validation.

4. It's also essential to use appropriate evaluation metrics to assess the model's performance.

I wrote more about these steps and strategies on my blog [here](https://www.thedejijoseph.com/blog/post/dangers-of-overfitting-in-data-analysis).
My form is not showing in the emulator.
Tags: reactnative
Published: 2023-04-22 12:53:24

Good morning
I don't understand why my form is not showing in the emulator. Thank you to help me.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbtset4071e7iiblbgv9.png)

`import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet, DatePickerAndroid } from 'react-native';

const AccountingForm = () => {
  const [entryDate, setEntryDate] = useState(new Date());
  const [entryAmount, setEntryAmount] = useState('');
  const [entryComment, setEntryComment] = useState('');
  const [exitAmount, setExitAmount] = useState('');
  const [exitComment, setExitComment] = useState('');

  const showDatePicker = async () => {
    try {
      const { action, year, month, day } = await DatePickerAndroid.open({
        date: entryDate,
      });
      if (action !== DatePickerAndroid.dismissedAction) {
        const newDate = new Date(year, month, day);
        setEntryDate(newDate);
      }
    } catch ({ code, message }) {
      console.warn('Cannot open date picker', message);
    }
  };

  const onSubmit = () => {
    console.log({
      entryDate,
      entryAmount,
      entryComment,
      exitAmount,
      exitComment,
    });
  };

  return (
    <View style={styles.container}>
      <View style={styles.field}>
        <Text style={styles.label}>Date:</Text>
        <Button title={entryDate.toLocaleDateString()} onPress={showDatePicker} />
      </View>
      <View style={styles.field}>
        <Text style={styles.label}>Entre:</Text>
        <TextInput
          style={styles.input}
          keyboardType="numeric"
          value={entryAmount}
          onChangeText={setEntryAmount}
        />
      </View>
      <View style={styles.field}>
        <Text style={styles.label}>Commentaire de lentrée:</Text>
        <TextInput style={styles.input} value={entryComment} onChangeText={setEntryComment} />
      </View>
      <View style={styles.field}>
        <Text style={styles.label}>Sortie:</Text>
        <TextInput
          style={styles.input}
          keyboardType="numeric"
          value={exitAmount}
          onChangeText={setExitAmount}
        />
      </View>
      <View style={styles.field}>
        <Text style={styles.label}>Commentaire de la sortie:</Text>
        <TextInput style={styles.input} value={exitComment} onChangeText={setExitComment} />
      </View>
      <Button title="Enregistrer" onPress={onSubmit} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  field: {
    marginBottom: 16,
  },
  label: {
    fontWeight: 'bold',
    marginBottom: 8,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    paddingHorizontal: 8,
    paddingVertical: 4,
  },
});

export default AccountingForm;
`

`import React from 'react';
import { AppRegistry } from 'react-native';
import AccountingForm from './AccountingForm';

const App = () => (
  <AccountingForm />
);

AppRegistry.registerComponent('MyApp', () => App);
`
seek help!
Tags: help
Published: 2023-04-22 12:15:39


Why does Vue report an error when downloading axios: export "default" cannot be found in "Vue" (imported as "Vue") and export "default" cannot be found in "Vue router" (imported as "VueRouter")，After downloading using npm install axios, running the npm run serve terminal will result in an error, with the error code as follows:
warning  in ./src/main.js

export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, Transition, TransitionGroup, VueElement, assertNumber, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineProps, defineSSRCustomElement, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hydrate, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId)

 

warning  in ./src/router/index.js

export 'default' (imported as 'VueRouter') was not found in 'vue-router' (possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, loadRouteLocation, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fpa25v1v0jmt0nuyvjl.png)
5 Weather APIs for a Rainy Day Project ☔️
Tags: api, webdev, projectideas
Published: 2023-04-22 11:18:35

Weather API's are one of the most common APIs used by developers to get to grips with making calls to an API and working with the data returned. I've rounded up 5 weather related API's below for you to give a try on your next project.

### [Weatherstack](https://weatherstack.com/?utm_source=google&utm_medium=cpc&utm_campaign=weatherstack_search_eu&gclid=CjwKCAjw__ihBhADEiwAXEazJkptsGMxoJjoxFfg0Dusf2z75XLJyN-cBoZ7zvTaCIvAqgd4PuCxcxoCaRkQAvD_BwE)

🔐 API Key Required? - Yes

💰 Cost - Free

The Weatherstack API provides weather data for any location in the world. With real-time updates, accurate forecasts, and historical weather information. It also supports a number of languages - including Python, JavaScript, Ruby, and PHP. Display current weather conditions, historical data, or future forecasts with this API. Data is returned in a lightweight JSON format.


---

### [Open-Meteo](https://open-meteo.com/) 

🔐 API Key Required? - No

💰 Cost - Free

An open-source weather API with free access for non-commercial use. It provides real-time, up-to-date data such as temperature, wind speed, precipitation, humidity, atmospheric pressure, and much more. It also supports a number of languages - including Python, Ruby, and JavaScript.


---

### [Weather API](https://www.weatherapi.com/) 

🔐 API Key Required? - Yes

💰 Cost - Free

Provides real-time and historical weather data for thousands of locations worldwide and several weather parameters:  temperature, precipitation, wind speed, pressure to name a few. Data can be returned for different time intervals: hourly, daily and weekly. It also supports a number of languages - including Python, PHP and JavaScript. The free plan allows up to 1 million calls per month.


---

### [OpenUV](https://www.openuv.io/) 

🔐 API Key Required? - Yes

💰 Cost - Free

Provides real-time UV Index, ozone level, and maximum UV exposure time based on location input. You can also access historical data on UV levels. It supports several popular languages - including Python, Java, and Ruby.


---

### [Weatherbit](https://www.weatherbit.io/api)

🔐 API Key Required? - Yes

💰 Cost - Free


Provides data for several weather parameters including temperature, precipitation, wind speed, humidity and more based on location input. It supports several popular languages - including Python and Java. The free tier provides 7 Day/Daily forecasts and current weather observations for any location from over 50,000 stations worldwide.


---

Have you ever used a weather API? If so I'd love to see your project - feel free to share in the comments below 😊
Free Resume Building Website
Tags: resume, cv, job
Published: 2023-04-22 11:11:52

Are you tired of using the same old boring templates for your resume? Look no further than Reactive Resume! [Reactive Resume](url) is a website that offers a slick and modern approach to resume creation. You can use Reactive Resume to develop a unique and personalised resume that will set you apart from the other job seekers.

The user-friendly interface of [Reactive Resume](https://rxresu.me/) is one of its primary advantages. The website is user-friendly, making the process of building a resume quick and simple. The website’s drag-and-drop tool allows you to easily add and change sections to your resume. Furthermore, Reactive Resume provides a variety of templates from which to choose, ensuring that your resume looks professional and polished.

Another outstanding aspect of [Reactive Resume](https://rxresu.me/) is its emphasis on customisation. Users can personalise their resume by selecting from a variety of fonts, colours, and layouts. Furthermore, the website allows you to add social media connections and personal websites to your CV, allowing potential employers to learn more about you and your interests. You can import data from LinkedIn and export your file in any format, including JSON.

The emphasis on accessibility is maybe Reactive Resume’s most outstanding feature. The website is meant to be user-friendly for people of all abilities, with a variety of features that make it simple for people with disabilities to construct a résumé. Reactive Resume includes keyboard shortcuts, a high contrast option, and screen reader support, guaranteeing that everyone can take full advantage of the website.

[Reactive Resume](https://rxresu.me/) is a website that provides users with a new and modern way to resume creation. Its easy-to-use layout, customization possibilities, and accessibility features make it an excellent alternative for anyone trying to produce a memorable CV. So, why settle for a dull, cookie-cutter resume when Reactive Resume can help you design something truly unique? Try it out for yourself today and see for yourself!
Why do you use Typescript with automated tests?
Tags: typescript, javascript, webdev, programming
Published: 2023-04-22 11:03:35

---
title: Why do you use Typescript with automated tests? 
published: true
description: Why and when to use Typescript with automated tests.
tags: Typescript, JavaScript, webdev, programming
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-04-22 11:01 +0000
---

Whenever I use Typescript, I don't think I need to test types of data but output value.

When I use only JavaScript, I do think, I need to test data types and output value.

If I have to still test for data types, why then do I use Typescript?

By tests, I mean automated tests?

What do you think?
Nested Array Generator
Tags: leetcode, javascript
Published: 2023-04-22 11:00:54


Given a multi-dimensional array of integers, return a generator object which yields integers in the same order as inorder traversal.

A multi-dimensional array is a recursive data structure that contains both integers and other multi-dimensional arrays.

inorder traversal iterates over each array from left to right, yielding any integers it encounters or applying inorder traversal to any arrays it encounters.



```js 
var inorderTraversal = function*(arr) {
    arr = arr.flat(Infinity) 
    let i = 0, n = arr.length; 
    while(i < n){
        yield arr[i++]
    }
};


```
Devs/Programmers: Are you enjoying your Marriage?
Tags: discuss, watercooler
Published: 2023-04-22 10:38:50

Good day everyone. I’d like to throw an open discussion.

Given our profession could be quite engaging, our brains are always actively working even outside work, thinking about a bug, or an algorithm, and spending most of the time on the computers. 

How has this affected your marriage?

Have you gotten more overweight because of always sitting and working and not exercising? Are you always too logical to feel love and other beautiful emotions?

Do you think devs should get married? 

Talk to me…


Photo by <a href="https://unsplash.com/fr/@herlifeinpixels?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Hannah Wei</a> on <a href="https://unsplash.com/photos/aso6SYJZGps?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
RxJs In Practice
Tags: angular, rxjs, webdev, frontend
Published: 2023-04-19 14:37:25

RxJs is a library for reactive programming using Observables, which allows you to work with asynchronous data streams. Observables are sequences of values that can be emitted over time, and you can apply a variety of operators to these sequences to transform or manipulate the data.

Here are a few examples of how you can use RxJs in practice:

 **Filtering data**: You can use RxJs to filter data based on certain criteria. For example, you could use the filter operator to only emit values from an Observable that meet a certain condition. Let's say you have an Observable of numbers, and you only want to emit values that are even:

```
import { from } from 'rxjs';
import { filter } from 'rxjs/operators';

const numbers$ = from([1, 2, 3, 4, 5, 6]);
const evenNumbers$ = numbers$.pipe(filter(n => n % 2 === 0));

evenNumbers$.subscribe(console.log); // Output: 2, 4, 6

```

**Transforming data:** You can also use RxJs to transform data from one format to another. For example, you could use the map operator to convert a stream of numbers into a stream of strings. Let's say you have an Observable of numbers, and you want to emit a string that says whether each number is even or odd:

```
import { from } from 'rxjs';
import { map } from 'rxjs/operators';

const numbers$ = from([1, 2, 3, 4, 5, 6]);
const evenOrOdd$ = numbers$.pipe(map(n => n % 2 === 0 ? `${n} is even` : `${n} is odd`));

evenOrOdd$.subscribe(console.log); // Output: "1 is odd", "2 is even", "3 is odd", "4 is even", "5 is odd", "6 is even"

```


 **Combining data:** You can also use RxJs to combine data from multiple sources into a single stream. For example, you could use the combineLatest operator to combine two Observables of numbers into a single Observable that emits the sum of the two numbers whenever either of them changes. Let's say you have two Observables of numbers, a$ and b$:

```
import { fromEvent, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

const a$ = fromEvent(document.getElementById('input-a'), 'input').pipe(
  map(e => Number(e.target.value))
);
const b$ = fromEvent(document.getElementById('input-b'), 'input').pipe(
  map(e => Number(e.target.value))
);

const sum$ = combineLatest([a$, b$]).pipe(
  map(([a, b]) => a + b)
);

sum$.subscribe(console.log); // Output: the sum of input-a and input-b

```
In this example, we're using the combineLatest operator to combine the latest values from both a$ and b$ into an array, and then using the map operator to add those values together and emit the result. Whenever either a$ or b$ emits a new value, the sum$ Observable will emit the new sum.


Thank You for reading 😊
Creating template literals from strings
Tags: html, javascript, programming, tutorial
Published: 2023-04-22 10:24:17

Template literals are an awsome feature of javascript. In many aspects they behave like to strings, but with some extras. You will find lot´s of [sources](https://blog.dmcindoe.dev/posts/2020-11-30-javascript-template-literals/) to get all the details.

Working with template literals is fun in javascript, but you will find that converting strings to Template literals and vice versa ist not supported. It took me hours to find a solution, which i finally found [here](https://stackoverflow.com/questions/30003353/can-es6-template-literals-be-substituted-at-runtime-or-reused/70173870#70173870) (thanks a lot for sharing). This is so simple that it´s worth to share here:

```Javascript
const dynamicTemplate = (source) =>  (new Function(`return \`${source}\``))() 

```
What is it good for? As an example, Template literals are useful to include Javascript variables into strings. Here ist an example:
```Javascript
    let a = "Hello"
    let b = "${a} World"

    console.log(dynamicTemplate(b))
```
Here is a [working example](https://flems.io/#0=N4IgtglgJlA2CmIBcA2ALAOgKwBoQDMIEBnZAbVADsBDMRJEDACwBcxYQ8BjAe0pfj9kIADxN41KAD4AOpQAE8kXRbV5XJtQBOxeCwC8MkAFcW+ALQAOI7IVKWEFgikDiLEQHoHT+LcXK9NRo6QxAANwh4AHcABx4tFiN1PgF+UKjoFiZ9KHgIrnhzDKgsnHkISkcIalhzYi4a+H0ARgwABhs5T3FJW04QXQQuBz5SBjQkNpAAXxwqWnpGACtSbhTBFmFeSjd5KABPYIguABV4MBjYagF5fXkACmIeYy0CgEpbqUV7ymj5ADFjJRhhA+PcAAZaPQvBQyGTggAkwCeLwK0zh4PBbze9w+ckUcgQLHkajuRgAEvBYLAeEZCXp5AAjW7yIxI6jTeQAdXisCgdMocm2TwQGBpAHN7gcjqdzpdrvB7ozsf1BvAQaNhFhJjM5iBgosMFxiKsQNtUpsGIpFKqqeqRjthG0kGgZgBdaZAA)
How change angular material MatSnackBar color
Tags: angular, programming, beginners, scss
Published: 2023-04-22 10:24:16

Angular Material Snackbar is helpful for displaying information to users about API success or failure, among other things.

The general syntax for using the Snackbar is:

`import { MatSnackBar } from '@angular/material/snack-bar';`

`constructor(private _snackBar: MatSnackBar) {}`

`this._snackBar.open(message, action, configuration)`

If we want to change the color of the text, for example, to display an API failure message in red, we can pass a custom class through the configuration object using the **panelClass** property:

`this._snackBar.open('Something went wrong!!!', '', { panelClass: "error-api", duration: 5000 })`

An important point to note is that the panel class should be defined in the global stylesheet, such as Style.css, Style.scss or Style.sass.

Here's an example of defining the .error-api class in **Style.css**:

`.error-api {
  --mdc-snackbar-supporting-text-color: #f44336;
}`
Maximizing Productivity as a Developer: Choosing the Right Path
Tags: developer, path, career, webdev
Published: 2023-04-22 10:22:01


Tech Learning for Developers

Billions .A. Joel
It's hard to wrap your head around what to learn for your optimal productivity and gain as a developer.

But you should understand that it's the job description that gives you what to learn. Many devs tend to fail to choose the right path because they are following someone else's path but it doesn't work like that.


Find someone that works for you, a language or framwework that gives you comfort to work with, then learn all other technologies around the same as the **job demands.**

This way it is easier for you to pick up one framework at a time and once you have a good grasp and understanding of the underlying concepts its easy to pick up another one.

For example, if you love PHP, find jobs around Laravel, such jobs have a detailed job description that can help you know what you'll need in future.

Basing on that build sample projects with those technologies, you'll never realized how you grew into a senior dev in just a little time.
I can tell you **within 6 months you will know livewire, alpine, Vue/React, AWS/Digital ocean/Azure or even nuxt .**

> While doing all this, be careful not to be swayed away by hype in other tech stacks or frameworks.

With consistency your skills should be needed globally and you'll never have to worry about finding a job.

Good luck 😊
Follow me on Twitter @billionsjoel. 
Let's connect.