teleren/devto huggingface dataset:
How To Deploy A python-flask app to Heroku. Avoid the [H10-Error] !
Tags: heroku, herokuh10, flask, atienoobwanda
Published: 2022-05-03 03:51:23

Deploying a flask app to Heroku can somehow become a hustle! Even when you have done everything the right way,the famous H10 Heroku error can just pop up out of nowhere!

Here is a way that makes deployment less of a hustle and more of a win!

1. - Navigate to your config file,config.py, ensure that the DEBUG = True is in the same line as class DevConfig(Config):
 
 ```
 class DevConfig(Config):
    
 DEBUG = True
 ```
2. Create a Procfile, then add: < **web: gunicorn manage:app**> In this case, app is your application name and manage is the file you're using to run the code

3. Login to your Heroku account or create a new one:< **heroku login** >

4. Next create the app: heroku create <**name-of-app**>
5. If you have API or secret key>> **heroku config:set API_KEY=** <**your-api-key**>

6. Install the following(in virtual) if you haven’t: (remember to use pip install):

- **Flask 1.1.4** <pip install "Flask==1.1.4">
- **Gunicorn** <python3.9 -m  pip install gunicorn>
- **Argcomplete 2.0.0** <pip install "argcomplete==2.0.0"> 
- **MarkUpsafe 2.0.1** <pip install "markupsafe==2.0.1">
- **Django-cors-header 3.11.0** <pip install django-cors-headers>


7. Generate a _requirements.txt_ using: **pip freeze > requirements.txt**

8. Create a _runtime.txt_ in the project root folder file and add then python version you’re using: For example: **python-3.9.12**

9. On terminal, run **heroku config:set DISABLE_COLLECTSTATIC=1**

--->Lastly, 1.**Git add .**  =>2.  **Git Commit -m ”deployment updates”** => 3.**Git push heroku main/master**_(depending on your branch name)_

> Remember: A new bug after fixing the previous one is progress… Happy Hacking!
Working with pretotypes to validate emotions on Twitter
Published: 2022-05-03 03:09:51

## Introduction

Twitter is a social media application where liberty expression exists, no one can control what other people think and many of us share ideas. In 2022 mental health disease has increase a lot, as I mentioned before twitter is the safest place to hide (specially when you a teenager) where people don’t feel judged and common ideas are shared. This could be a great indicator to analyze data and identify what are the factors that lead this generation to mental diseases. 

## Hypotesis

Analyzing twitter data as a tool to identify  mental disease and inform the specialists, to help people and prevent  conducts caused by mental disease.

## Experiment description

The experiment starts with  identifying a group of people based on specific age range 16-23 years  making survey including basic questions of twitter usage. This is going to help us understand how users interact on twitter and if they feel related to other people emotions and feelings.

Based on people answers we are going to start looking for specific keywords related to emotions and analyze the statics based on tweets per hour related to that topics. Based on results a personal chatbot can be build offering users a list of specialists that offer the first therapy session for free and the next ones with a low cost. The idea is to offer at first free help to the user but as a friendly way, not making it seem as an ad.

## Validation

We validate the hypotesis  based on the survey results because most of the people feel related to other user tweets, but most of the users just read the content and don’t write about the way they feel on twitter. If we use this data  to analyze user feelings based also on their interactions like retweets or likes we can have a better approach.

## Results

Mental diseases can be related  based on user interaction via Twitter but is important to know  this doesn’t  guarantee that a user can have a diseases based on his data, because sometimes it can just be a bad day and  in that case we shouldn’t worry.
My keyboard is TKL but my fingers heart is 75%
Tags: keyboards, typing, productivity, scripts
Published: 2022-05-03 02:11:36

So, here's the thing: I have a Redragon Kumara K552 mechanical keyboard. It's a TKL (tenkeyless) layout and it's my first modded mechanical keyboard. I really don't like full sized (100%) keyboards because I'm very lazy (I don't want to move my right hand to the arrow/navigation keys when I'm coding). It's annoying because I just started to type using the 10 fingers typing method. 

I was thinking on a temporal solution for this and I remembered my good ol' pal [AutoHotKey](https://www.autohotkey.com/)! It's an automation scripting language for Windows. Basically, you write a script specifing a keyboard shortcut as a trigger. Then, you code what the script will do after that trigger. 

In my case, I wanted to keep it simple: Move the navigation and arrow keys to the alphanumeric area.

## Shortcut Configuration
- R.Alt + u => Ins
- R.Alt + j => Del
- R.Alt + i => Home
- R.Alt + k => End
- R.Alt + o => PgUp
- R.Alt + l => PgDn
- R.Alt + w => ↑
- R.Alt + s => ↓
- R.Alt + a => ←
- R.Alt + d => →

That way I can use my right thumb to press the R.Alt key while using another finger to get the second key I want, keeping my hands on the alphanumeric area.

## AutoHotKeyScript

```
<^>!i::
Send {Home}
return

<^>!k::
Send {End}
return

<^>!o::
Send {PgUp}
return

<^>!l::
Send {PgDn}
return

<^>!u::
Send {Ins}
return

<^>!j::
Send {Del}
return

<^>!w::
Send {Up}
return

<^>!s::
Send {Down}
return

<^>!a::
Send {Left}
return

<^>!d::
Send {Right}
return
```

If you're like me and do not have a 75% (or less) keyboard layout, then you might find this useful! Give it a try and let me know what worked for you 😉
Utilizar Single File Components ou separar em pastas?
Tags: programming, frontend, javascript, webdev
Published: 2022-05-03 02:01:51

Single File Components é um modelo onde adicionamos a estrutura(html) a lógica(javascript) e o estilo(css) em uma única página.

Exemplo de um Single File Components.

```
<template>
  <p class="red-bold">{{ msg}}</p>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Single-File Components'
    }
  }
}
</script>
<style>
.red-bold {
  color: red;
  font-weight: bold;
}
</style>
```

**Utilizamos Single File Components ou separamos em pastas?**
Nós desenvolvedores devemos sempre prezar pela melhoria do nosso código e da forma como vamos dar a sua devida manutenção. Quando separamos nossa arquitetura front end em pastas ou seja separamos o HTML do CSS e JAVASCRIPT, conforme o tamanho e a complexidade da aplicação a manutenção destes códigos terão um impacto de tempo.

No desenvolvimento de UI moderno, foi afirmado que em vez de dividir a base de código em três camadas enormes que se entrelaçam, faz muito mais sentido dividi-las em componentes. Dentro de um componente, seu modelo, lógica e estilos são inerentemente acoplados, e colocá-los na verdade torna o componente mais coeso e sustentável.

Observe que, mesmo que você não goste da ideia de componentes de arquivo único, você ainda pode aproveitar seus recursos de pré-compilação separando seu JavaScript e CSS em arquivos separados usando [Src Imports](https://vuejs.org/api/sfc-spec.html#src-imports).


Benefícios em utilizar Single File Components SFC:

- Criação de componentes modulares usando a sintaxe familiar de HTML, CSS e JavaScript
- Modelos pré-compilados
- CSS com escopo de componente
- Sintaxe mais otimizada ao trabalhar com a [API de composição](https://vuejs.org/api/sfc-script-setup.html)
- Mais otimizações de tempo de compilação por meio de análise cruzada de modelo e script
- Suporte IDE com preenchimento automático e verificação de tipo para expressões de modelo
- Suporte de substituição de módulo a quente (HMR) pronto para uso
- O SFC é um recurso definidor do Vue como uma estrutura e é a abordagem recomendada para usar o Vue nos seguintes cenários:
- Aplicativos de página única (SPA)
- Geração de Site Estático (SSG)
- Experiência de desenvolvimento (DX).


RESUMÃO: 

O padrão de desenvolvimento Single File Components trás muitos benefícios para aplicações devido a agilidade na hora da manutenção de suas páginas. Quando separamos em pasta o tempo de manutenção aumenta e acaba não sendo sustentável.

Deixo aqui meu [linkedin](https://www.linkedin.com/in/stefany-repetcki/) e [github](https://github.com/StefanyRepetcki).
How to fix "fatal: .git/index: index file smaller than expected" git error
Tags: git, webdev
Published: 2022-05-03 01:52:57

I was recently working on a project and as I was trying to commit my changes, I saw this error message and I didn't understand why it happened, I decided to investigate why it happened and discovered it was because the index file was corrupt. 

The index file gets corrupted due to the following reasons:
- You terminal process was stopped midway
- Your system has run out of disk space
- You used a symlink to the git folder to create directories to use for building in place of svn externals
- Or for some other reason that might not be explained here

![.git/index: index file smaller than expected - git error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fitm2hmxnrt422kardz.png)

To fix it I simply removed the corrupted index file using this command

`rm .git/index`

Once this has been done, the files can then be re-staged and the error is fixed.
We don't have to use Enums on TypeScript? 【Discussion】
Tags: typescript, javascript, webdev, discuss
Published: 2022-05-03 01:18:16


Hi, Devs! I am [Taishi](https://twitter.com/taishik_), a software developer in Vancouver!

I have been thinking about using [Enums](https://www.typescriptlang.org/docs/handbook/enums.html) lately, and my conclusion is that we should **NOT** use Enums if possible.

But why?

# Enums has impact on compiled JavaScript files

Usually `tsc` command removes all the TypeScript unique stuff such as

* Type definition
* Interface definition
* Type annotation

This means TypeScript doesn't have any effect on the compiled JavaScript files.

On the other hand, TypeScript has some impact on JS files if you use Enums.

_Let's compare them!_

**Case 1: Union types**

TypeScript
```TypeScript
type BigTechz = "Google" | "Apple" | "Amazon";

const myFav: BigTechz = "Apple";
```

Javascript after `tsc`
```javascript
"use strict";
const myFav = "Apple";
```

**Case 2: Enums**

```typescript
enum BigTechz {
  Google = "Google",
  Apple = "Apple",
  Amazon = "Amazon",
}

const myFav: BigTechz = BigTechz.Apple;
```

Javascript after `tsc`

```javascript
"use strict";
var BigTechz;
(function (BigTechz) {
  BigTechz["Google"] = "Google";
  BigTechz["Apple"] = "Apple";
  BigTechz["Amazon"] = "Amazon";
})(BigTechz || (BigTechz = {}));
const myFav = BigTechz.Apple;
```

# My thought

As you can see above, Enums stays on a JavaScript file as an object...which causes a bigger bundle size.
And more importantly, I think TypeScript shouldn't have any impact on compiled JavaScript files.

TypeScript is basically a type checker when you write codes and when you compile TS files with `tsc` command.

Most of the times you can use other TS syntax instead of Enums, and I think we should do that if possible (Maybe I just prefer Union types🙄)!

I'd like to hear other devs' opinion about this topic, and I appreciated if you leave a comment!

Thanks!
Lti: Learning Tools Interoperability - Detalles de funcionamiento y posibilidades
Published: 2022-05-03 01:14:37

[Learning tools interoperability](https://es.wikipedia.org/wiki/IMS_Global) es un estándar propuesto y desarrollado por la [LMS Global](http://www.imsglobal.org/).
Hay que destacar que la LMS es la institución internacional que regula los estándares de las plataformas LMS.

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

## Porque nace el LTI?

Learning tools interoperability nace como una solución para adaptar la recolección de información de los sistemas de gestión del aprendizaje.

Los [LMS](https://bit4learn.com/es/lms/) fueron desarrollados en un pasado como herramientas para la gestión de los procesos educativos sin embargo y debido a las últimas tendencias de aprendizaje en las cuales el alumno investiga en diversos medios como google , Youtube o diferentes blogs, la trazabilidad de los recursos que consume el alumno se hace imposible.

Ante esta perspectiva es que se desarrolló el LTI un estándar para recolectar la información de diferentes fuentes y así poder tener una trazabilidad del proceso educativo que sigue el alumno, alineado a las tendencias de aprendizaje actual.

## Cómo funciona el LTI?

La integración de LTI permite un lanzamiento seguro desde el entorno de aprendizaje que maneja la integración de la interfaz de usuario.

Entre la información que se puede transmitir mediante este estándar tenemos:

- Información del nombre del usuario
- Rol del Usuario
- Puntaje de los exámenes del usuario
- Contenidos visualizados
- Metadata


## Versiones de LTI 

Entre las principales versiones de LTI tenemos:

Hay que destacar que debido a la reciente implementación de esta tecnología, no existe una larga trayectoria en la evolución de esta tecnología.

La última versión de esta tecnología es la versión 1.3.

Para conocer la documentación oficial de esta herramienta podemos entrar a la pagina oficial de Global LMS en la cual se detallan todos los atributos y metadata que puede extraerse utilizando este estándar [Documentacion Oficial](https://www.imsglobal.org/activity/lti-resource-search)
In Defence of the Single Page Application
Published: 2022-05-11 14:38:18

---
title: In Defence of the Single Page Application
published: true
date: 2022-05-03 00:00:00 UTC
tags: 
canonical_url: https://williamkennedy.ninja/javascript/2022/05/03/in-defence-of-the-single-page-application/
---


React, Angular and so on have gotten a bit of bashing recently. So I wrote an article defending these technologies

[Enjoy](https://williamkennedy.ninja/javascript/2022/05/03/in-defence-of-the-single-page-application/)
Coding Shorts: Speeding Up the Editor in Visual Studio 2022
Tags: visualstudio, csharp
Published: 2022-07-17 22:39:01

---
title: Coding Shorts: Speeding Up the Editor in Visual Studio 2022
published: true
date: 2022-05-03 00:00:00 UTC
tags: 
  - visualstudio
  - csharp
canonical_url: https://wildermuth.com/2022/05/03/speeding-up-the-editor-in-visual-studio-2022/
cover_image: https://wilderminds.blob.core.windows.net/img/2022/05/03/cover.jpg
---

Visual Studio 2022 is frustrating me. Not only does debugging sometimes take way too long, but, for me, the real problem is that the editor is trying to do too much to help me. I just want to be able to type code. Intellisense is awesome but Intellisense, Intellicode, and the new AI functionality is just noise in the editor. Let me show you how to turn the noise down a little to make Visual Studio more productive.

> [Watch](https://www.youtube.com/watch?JjGTSJ_P1uI)

> [View All Coding Shorts](https://shawnl.ink/codingshorts)
> [Subscribe to my YouTube Channel](https://shawnl.ink/yt)

[![Creative Commons License](http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/licenses/by-nc-nd/3.0/)

 This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
 Based on a work at [wildermuth.com](http://wildermuth.com).

* * *

If you liked this article, see Shawn's courses on [Pluralsight](http://shawnw.me/pscourses).
How to make a static method accessible only in its class in TypeScript?
Tags: typescript
Published: 2022-05-03 00:00:00

---
  title: How to make a static method accessible only in its class in TypeScript?
  published: true
  tags: TypeScript
  date: Tue May 03 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-static-methods-accessible-only-in-class-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-bd0a2ea501d0c1a07fa4f640f1be0e63.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-static-methods-accessible-only-in-class-typescript)
  
To make a static method accessible only in its class, you need to make the static method into a private static method using the `private` keyword before the static method in TypeScript.

### TL;DR

```ts
// a simple class
class Person {
  name: string;
  age: number;

  // a private static method
  private static sayHi() {
    console.log("Hi, Person!");
  }

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// the `sayHi` static method
// cannot be accessed from outside the class
Person.sayHi(); // This is not allowed now ❌
```

For example, let's say we have a class called `Person` with 2 fields, a constructor, and a static method like this,

```ts
// a simple class
class Person {
  name: string;
  age: number;

  // static method
  static sayHi() {
    console.log("Hi, Person!");
  }

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// the `sayHi` static method
// can be accessed from outside the class
Person.sayHi(); // This is allowed now
```

Currently, in the above class, the `sayHi` static method is public and can be accessed from outside the class.

To make it only accessible within the `Person` class, we need to add the `private` keyword before the static method like this,

```ts
// a simple class
class Person {
  name: string;
  age: number;

  // a private static method
  private static sayHi() {
    console.log("Hi, Person!");
  }

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// the `sayHi` static method
// cannot be accessed from outside the class
Person.sayHi(); // This is not allowed now ❌
```

As you can see from the above code that when we try to access the `private static method` called `sayHi` from outside the class, the TypeScript compiler is showing an error saying `Property 'sayHi' is private and only accessible within class 'Person'.`, which is what we want to happen.

We have successfully made the static method to be accessible within its class and subclasses only in TypeScript. Yay 🥳!

See the above code live in [codesandbox](https://codesandbox.io/s/make-static-methods-accessible-only-in-class-typescript-swt2ep?file=/src/index.ts).

That's all 😃!

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

---
Next.js - How to optimize fonts
Tags: nextjs, javascript, beginners, webdev
Published: 2022-05-02 23:53:17

# Next.js Font Optimized

When using 3rd party fonts we have to make sure they are optimized, in the times before Next.js 10.2 you had to manually optimize them for example:

```
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans&display=swap" rel="stylesheet" />
<link
   href="https://fonts.googleapis.com/css2?family=Squada+One:wght@400&display=swap"
   rel="stylesheet"
   />
```

After 10.2 Next.js can now optimize Google fonts and Typekit with a variety of font optimization, inside your `_document.js` you can now provide the font:

```
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument
```

You can even provide the preferred display options as a query parameter :

* **block :** The text blocks (is invisible) for a short period
* **swap:** There is no block period (so no invisible text), and the text is shown immediately in the fallback font until the custom font loads
* **fallback**: This is somewhere in between block and swap. The text is invisible for a short period of time (100ms). Then if the custom font hasn't been downloaded, the text is shown in a fallback font (for about 3s), then swapped after the custom font loads.
* **optional:** This behaves just like fallback, only the browser can decide to not use the custom font at all, based on the user's connection speed (if you're on a slow 3G or less, it will take forever to download the custom font and then swapping to it will be too late and extremely annoying)
* **auto:** This basically ends up being the same as fallback.
What is Serverless?
Tags: serverless
Published: 2022-05-02 23:25:18

Basically in this concept, developers don't need to manage servers. They just deploy codes, and functions.

Serverless does not mean that there is no server, rather it means that as a developer you can not manage/provision/see them. 

For example Amazon S3, DynamoDB, Fargate, Lambda, etc. are serverless services.
Elixir: The “New” and “Magical” Functional Language!
Tags: programming, opensource, news, elixir
Published: 2022-05-02 23:18:48

Elixir: The “New” and “Magical” Functional Language!
Hyper or Hope for Functional Languages?
Elixir is a functional programming language created in 2011 to be simple, scalable, and productive and provide solutions to the developer with the possibility of creating robust, fault-tolerant, and highly performant solutions.

Over the years, they have seen a growing community of highly engaged people, companies, and even banks that already have systems and solutions in production using this language.

Find out more about:

https://jlgjosue.medium.com/elixir-the-new-and-magical-functional-language-a04f2dc8e5d4

Thanks for reading, share this post!
Mantainig Session in Nuxt JS Laravel Authentication API
Tags: laravel, nuxt, vue
Published: 2022-05-02 23:02:45

l had an issue in my recent project. Well based on the title, you guessed right "Mantaining session". As much as NuxtJS provides a proper configuration of API integrations and ofcourse authentication with `**@nuxt/next-auth**` package, it's somehow challenging to keep session.

In my project l was using Laravel as the backend framework and created API's guarded with sactum. After configuring everything as per (https://auth.nuxtjs.org/schemes/local). It was really hard. **Session was being removed on reload page of the nuxtjs app. 
**
So here was a work around to it. I added vuex-persist package to the nuxt project using yarn and created a plugin. l added the plugin in the plugins sections in nuxt.config.js and automatically my data was saved in a cookie as much as session was active!

l hope you guys read more about vuex-persist or other related libraries. If any questions let me know.
👌👌