teleren/devto huggingface dataset:
If you could go back in time and restart your coding journey again, how would you do it?
Tags: webdev, programming, discuss, productivity
Published: 2022-05-26 02:08:11

Just imagine that you suddenly got access to a time machine and you can go back to the past now and change things as you like. There maybe a lot of things you want to change but let's only talk about <u>"Would you change your coding journey and start it differently this time? If so, how would you like to start it?"</u> 

Though it's not been that long since I started coding, but still I want to change some things. Here's how I would start it-

I would start with learning html/css and then move on to JavaScript. And I would also like to get adapted to TypeScript as soon as possible. Once I've completed these basic necessities needed for webdev, I will choose a framework to learn and it wouldn't be React this time! The frameworks I would start with would be vue and Nuxt. Gradually I would also like to explore Svelte and NextJS. Once I feel confident with my webdev skills I would like to start learning more languages starting with Rust and then learning some more like Go, Python, C#, Lua and Elixir. Once I feel confident about rust I would start exploring things like making GUIs, Desktop Apps, Web Apps and CLI Apps using Rust.
 
Comment below to share yours ♥
backup the .env files to git/gist/dropbox in old school way!
Tags: gpg, envfile, env, encrypt
Published: 2022-05-26 01:26:34

Hi guys... 

Here is a little tip that I like.

Sometimes we need to save the local.env, prod.env file or the stg.env file ... But you don't look where is the best place to backup it .. adding to git it's not a good idea because you are storing secrets is very dangerous...

exists projects like git-secrets[1], but in my opinion, it's another layer of knowledge you need to dominate.

let's keep it simple:

```
cp .env local.env
gpg --armor -c local.env # enter a password
ls local.env.asc # file encrypted created
```

with that you have a file encrypted symmetrical and it can be stored on your:


```
$ git add *.asc # your git
$ cp *.asc ~/Dropbox # your dropbox
$ gh gist create local.env.asc # to gist 
```


For decrypt:

```
gpg -d local.env.asc # entering the password

```

When your coworkers saw that they will say: 

>what are you doing?  soo old school!!

![oldschool](https://c.tenor.com/hZltpJEuN0QAAAAC/thats-old-school-cj-payne.gif)



[1]:https://git-secret.io/
Why is Social Rumbles (aka RumbleChat) down?
Published: 2022-05-26 01:15:21

**EDIT:** Social Rumbles is back online! Yay! Go to https://socialrumbles.com/home/ to check it out!

Let me preface this by saying that it WAS **NOT HACKED**.

I repeat, **NOT HACKED**.

Ahem. Lemme explain.

Today at 3:45, I was moderating on RumbleChat when I noticed spam messages, I deleted them and thought nothing of them. They kept coming, so I deleted the guy who was making them (there were only 2 people online and I knew one of them so I deleted the other guy).

But he kept coming back.

Then at about 4:05, I saw these message:

![4:05 Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v42zaj3xwjj16mgzi6h8.png)

Now was that me? No. So what did I do.... PANIC!

I immediately shut down the server, the websockets, everything. All shut down.

I had to this quick cuz I had swim at 4:20, so I did this quickly and went to swim.

Now, I don't know if I was high or something, when I shut down everything but uhh I was 100% NOT HACKED. Here's why.

While swimming I realized oh wait he didn't hack me. And here's why:

A) Nothing changed except new chat messages were made.
B) If he had hacked it, then wouldn't he make himself admin?

So whilst swimming I did some thinking and realized I was an idiot. He didn't hack it. He just created a web socket and then spoofed his username. This is all he did it:
`
chat = new WebSocket('wss://socialrumbles.com/dm/someroom');
chat.send({
   # Whatever message/username he wanted!
});
`
So yeah I am a complete idiot. I didn't get hacked. No one is in danger. I just wrote my chat wrong.

This made me rethink my chatting app. I decided that there was too high a risk with sockets, and I am shutting it down until further notice. (I also don't have enough experience with it so I'm stopping it). I know that this wasn't a "hack" but I'm worried that there may be an actual exploit which is why I am removing it for the time being.

We may fix the chat app and rerelease it, but only after more experience with web sockets.
 
**So what does this mean for you?**

Well since I overreacted and shut down EVERYTHING, it'll take at least two days to get it up and running again. So ummm y'all will just get this jazzy 503 error until it starts running again, so sorry for overreacting!

Now that chat is being removed what can you do? Well you can do it's main, safe feature: posting. You can still post videos, articles, images, etc, once it starts running. And soon, after we remake the chat site and have some help, we may re add it.

For now, the site is going to be off until at least Saturday, and you all are safe. I just overreacted, and now here we are.
Terraform Dynamic Block
Tags: terraform, devops, cloud, aws
Published: 2022-05-26 01:11:59

[Terraform Dynamic](https://www.bitslovers.com/terraform-dynamic/)


Let's learn how to use and build expressions using the Dynamic Block, also combining the **for_each** and **for**

```
dynamic "tag" {
    for_each = {
      for key, value in var.append_custom_tags:
      key => lower(value)
      if key != "Project"
    }

    content {
      key                 = tag.key
      value               = tag.value
    }
  }
```

Some topics on article:

- What is Terraform Dynamic?
- Where use Terraform Dynamic?
- Terraform Dynamic Syntax
- When not using Dynamic blocks

Enjoy learning! [Read here](https://www.bitslovers.com/terraform-dynamic/).
Roteando as api do NextJS usando verbos HTTP
Tags: nextjs, javascript, braziliandevs
Published: 2022-05-26 00:52:35

{% collapsible ATENÇÃO %}
**Esse post foi escrito em maio de 2022, nessa data o NextJS está na versão 12 e, até aqui, não existe um jeito nativo que resolva esse problema. Se estiver lendo isso em uma data futura, lembre-se se procurar no documentação oficial do framework e ver se não existem soluções mais modernas.**
{% endcollapsible %}

Criar um endpoint de API no NextJS é extremamente simples, mas se você já precisou lidar com mais de um verbo HTTP na mesma rota, percebeu que vai precisar se organizar para não deixar as coisa confusas.

O problema é que o NextJS não te fornece uma maneira nativa de rotear suas requisições pelo **verbo HTTP**, apenas pelo **PATH** da requisição.

Existem algumas bibliotecas prontas no mercado que adicionam alguns super poderes para essas apis, mas na maioria dos cenários você não precisa de tanto poder, só separar a função que trata o **GET** da que trata o **POST**, por exemplo.

Nesse contexto, eu tenho um helper que costumo usar e que resolve isso pra mim de um jeito bem elegante, na minha visão.

```js
//helper/verbs-route.js
export function verbsRouter(router) {
  const sanitizedVerbs = {};
  Object.keys(router).forEach((verb) => {
    sanitizedVerbs[verb.toLowerCase()] = router[verb];
  });

  return (req, res) => {
    const method = req.method.toLowerCase();
    const route = sanitizedVerbs[method];
    if (!route || typeof route !== 'function') {
      return res.status(405).end();
    }

    return route(req, res);
  };
}
```

E só! =)

O uso fica assim:

```js
//pages/api/my-api.js
import { verbsRouter } from '../../helper/verbs-route.js'

export default verbsRouter({

  async get (req, res) {
  },

  async post (req, res) {
  },

  async put (req, res) {
  },

  async delete (req, res) {
  },

})
```

É isso. Sem adicionar dependência, com poucas linhas de código, você tem um reteador de verbos HTTP para suas apis.
Starting a Vue 3 project
Tags: vue, vite
Published: 2022-05-26 00:50:48

## tl;dr

Use `npm init vue@latest`. This uses Vite as the build tool and provides options to enable state management, routing and testing tools.

## Starting a vue project

There are 3 official ways to start a Vue project. Vue CLI appears to be [obsolete](https://medium.com/js-dojo/has-vite-made-vue-cli-obsolete-17868d59bed8) with the arrival of Vue 3.

1. Vue create-vue: the official Vue project scaffolding tool

    `npm init vue@latest`

2. Vite preset: a build tool that aims to provide a faster and leaner development experience for modern web projects

    `npm create vite@latest`

3. Vue CLI: aims to be the standard tooling baseline for the Vue ecosystem. This appears to be for Vue 2.

    `vue create hello-world`

### Vue create-vue

The [official docs](https://vuejs.org/guide/quick-start.html#with-build-tools) recommend this command to start a build-tool-enabled project. The command provides several options that default to No. I recommend you enable Typescript, Vue Router and Pinia. The others can be added to your project when you are ready to use them.

`npm init vue@latest`

```
Vue.js - The Progressive JavaScript Framework

√ Project name: ... vuecreate
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add Cypress for both Unit and End-to-End testing? ... No / Yes
√ Add ESLint for code quality? ... No / Yes
```

### Vite vue preset

`npm create vite@latest`

```
√ Project name: ... vite-project
√ Select a framework: » vue
√ Select a variant: » vue

Scaffolding project in C:\Users\ngoja\sandbox\vite-project...
```

### Post project creation

#### Install Tailwind

After project creation, cd to your project folder and install Tailwind.

https://tailwindcss.com/docs/guides/vite

```
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

Then edit the following 3 files:

./tailwind.config.js - replace the `content` line with this
```
content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
```

./src/index.css - create this new file
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

./src/main.<js|ts> - insert after the last import statement
```
import './index.css'
```

You will then want to delete the `<style>` section in ./src/App.vue so it won't conflict with the Tailwind css.
An Old Noob #7 - Badges
Tags: beginners, webdev, security, challenge
Published: 2022-05-26 00:15:13

I tend to get pretty busy lately.  

Even after just writing that first sentence, that one right above this one, i was asked to move some drapes and hang a mirror.   

But that's not what i want to talk about.  During my recent diversions, i forgot to publish last week.  That means i missed out on the Dev.to 8 Week Streak badge.  Don't get me wrong, i wish i had published for more reasons than the streak badge.  But badges are fun.

Except when they're not. 


![How difficult can badges be?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtggswh2dhf0i9jnh9iy.jpg)

&nbsp;
For those of you unfamiliar, allow me to introduce you to [Immersive Labs](https://www.immersivelabs.com/), an IT Security training platform which fortunately is offered through my employer.  It's a great platform for exposure to all kinds of subjects within the cybersecurity realm, from Windows exploitation to NIST standards to malware reverse engineering.  The landing page doesn't do the amount of content justice.

Since i enjoy a challenge, one could accurately assume that when we were granted access to the over 1500 labs available i jumped in feet first.  Fast forward about 6 months and i've been able to complete a lot of labs.  Some of those labs offer badges of completion.  I've got to say, my IL dashboard looked pretty cool.  I thought it would be cool if i could share these achievements somehow.

Immersive Labs knows badges are fun too, and they recently announced the ability to now share badge completion on social media (can't find an announcement for it or i'd link it).  Now the last thing i want to do is go out and share each badge individually on social media, not to mention i doubt anyone wants their feed inundated with such noise.  That got me thinking back to my [cloud resume](https://zjgrey.net/resume.html): wouldn't it be a decent addition to add a page of all the Immersive Labs badges i've earned and link that from my resume? 

[And that's just what i did.](https://zjgrey.net/il-badges.html)


![A screenshot of Immersive Labs badges](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43qkaa5p0zsecho7lyg4.jpg)  

Rather than just a page full of images, each image is a link to the badge completion date and details about the lab collection.  I also included a full transcript of the individual labs i've completed in a link in the footer on the off-chance someone might want to see the 26-page pdf file (knowing full well that's _highly_ unlikely, but i'm up to 371 labs!).

Yeah, i know all this may be overkill.  But i've spent a lot of time working on these labs and don't think i'm asking too much to display my achievements in a relatively obscure yet easily accessible location.  

Now that i've gotten my moment of selfish pride out of the way, if you do get a chance to look at Immersive Labs, there are some really solid challenges there.  

And if you've got an achievement you want to share with the world, share it!  Then bask in the knowledge that your success is forever hosted on the internet, whether anyone sees it or not  =]
Configurando neovim
Tags: nvim, spanish, espanol
Published: 2022-05-26 00:13:17

## Instalacion de nvim

Para instalar neovim en windows, ejecutaremos en el Powershell el siguiente comando

`winget install Neovim.Neovim`

Para corroborar la instalacion, escribiremos `nvim`

- Para editar un archivo, presionamos la tecla `i` (insert mode).
- Para salir del modo edicion, presionamos la tecla `Esc`.
- Para salir de neovim, presionamos `Esc` y escribimos `:q`, luego Enter.

---

## Personalización

Para personalizar neovim podemos utilizar proyectos ya creados y configurados para trabajar con el, algunas opciones son las siguientes:

- [NvChad](https://nvchad.com/)
- [LunarVim](https://www.lunarvim.org/es/)
- [AstroNvim](https://astronvim.github.io/)

Estas personalizaciones se apoyan del lenguaje de programación [`lua`](https://www.lua.org/) el cual te permitira seguir personalizando y aprendiendo el funcionamiento de neovim.

Una alternativa para personalizar neovim, es realizarlo manualmente, el cual describo debajo.

---

## Instalacion de vim plug

El siguiente paso es instalar [vim plug](https://github.com/junegunn/vim-plug) este nos permitira instalar plugins para neovim
Ejecutamos el siguiente comando en nuestro Powershell

```
iwr -useb https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim |` ni "$(@($env:XDG_DATA_HOME, $env:LOCALAPPDATA)[$null -eq $env:XDG_DATA_HOME])/nvim-data/site/autoload/plug.vim" -Force
```

Para confirmar su instalacion, basta con ir a la ruta
`%USERPROFILE%\AppData\Local\nvim-data\site\autoload`
Y dentro encontraremos el archivo `plug.vim`

---

## Instalacion de Plugins

Primero vamos a dirigirnos a `%USERPROFILE%\AppData\Local` creamos una carpeta llamada `nvim` y dentro otra llamada `plugged`.

Dentro de `nvim` creamos un archivo llamado `init.vim` o descargamos el siguiente [archivo](https://raw.githubusercontent.com/OJoshuaCG/dotfiles/main/nvim/init.vim).

Este archivo contendra la configuracion personalizada de cada usuario. Ahora vamos a abrir el archivo en la terminal con el comando

`nvim init.vim`

Dentro ejecutaremos

`:PlugInstall`

Y empezara a instalarse todos los plugins, una vez finalizado, para salir presionamos `Esc` y escribimos `:q`.

Ahora, podemos ingresar de nuevo al archivo con `nvim init.vim` y visualizaremos nuestra configuracion establecida.


## Y ahora que?

Listo, ya tienes configurado neovim para tu uso personal, puedes checar la [documentacion](https://neovim.io/doc/user/) para familiazarte con el, o ver algunos tutoriales para saber como utilizarlo.

Si escogiste una personalizacion ya configurada, te recomiendo checar su documentacion, el cual contiene informacion importante para entender como funciona el sistema.
My Pomodoro Timer Web App
Tags: typescript, java, css, angular
Published: 2022-05-25 22:20:45

##Details
For the past two weeks I have been working on a pomodoro timer project. I thought it would be cool to build something that I use to track time spent when working on projects or other activities and add a detail that I would like to use in these apps. I think I have a lot to improve in the app design, but it works just fine.

##Features
It is possible to start the timer with the 3 default timings:
- 05:00
- 25:00
- 50:00

When times up, the alarm sounds and starts the countdown for the rest alarm. It is predefined to be 10% of the time you spent in the activity. All data are saved annonymously (in your browser, if changing to another browser, the data is lost) and it is saved if you leave the app **before** the alarm sounds.
You can see how many time was spent during the week/month/year when you click in the "data" path. Then, choose which timespan you would like to see.

##Future improvements

I want to add these features in the future:
□ User system
□ Social media login/signup
□ User defined timing/rest
□ Improve design
□ Make more efficient
□ New alarm sounds

##[App website](https://pomodoro-leodsc.netlify.app/) and [Github repo](https://github.com/leodsc/pomodoro-watch)
Problem Solving with less, in Assembky 🎱⏪
Tags: showdev, programming, computerscience, 100daysofcode
Published: 2022-05-25 21:47:18

<div align = "center">

<h1><a href="https://github.com/2kabhishek/8-bit-solutions">8-bit-solutions</a></h1>

<h3>Problem Solving with less bits 🎱⏪</h3>

</div>

## What is this

Contains problems solved using 8-bit Assembly.

You can run the code on the [Simulator](https://schweigi.github.io/assembler-simulator/index.html)

## Inspiration

Hadn't worked with assembly since college, seemed like a fun exercise.

## Prerequisites

Before you begin, ensure you have met the following requirements:

- Working internet and a web browser

## Getting 8-bit-solutions

To get 8-bit-solutions, follow these steps:

```bash
git clone https://github.com/2kabhishek/8-bit-solutions
cd 8-bit-solutions
```

## Using 8-bit-solutions

Use it as a reference for solving problems, or just to get a feel for the language.

You can run the code on the [Simulator](https://schweigi.github.io/assembler-simulator/index.html)

## Challenges faced

It was quite tricky to work within the constraints of the language, which in turn allowed me to learn a lot.

## What I learned

- Doing more with less
- Intelligent use of the stack and limited registers

## What's next

More solutions may be added in the future.

Hit the ⭐ button if you found this useful.

## More Info

<div align="center">

<a href="https://github.com/2KAbhishek/8-bit-solutions">Source</a> | <a href="https://2kabhishek.github.io/8-bit-solutions">Website</a>

</div>
The Most Fun We've Ever Had Coding! 🎙
Tags: watercooler, career, productivity, podcast
Published: 2022-05-25 21:12:00

This week's episode of DevDiscuss was inspired by a discussion thread earlier this year called [What's the most fun you've ever had coding?
](https://dev.to/ben/whats-the-most-fun-youve-ever-had-coding-2ie5)

We brought @quoll and @cerchie on with @jeremyf as cohost to chat through everyone's favorite coding memories. It was a lot of fun, as you can imagine. **Please give it a listen and subscribe!**


## Listen on Apple Podcasts

{% embed https://podcasts.apple.com/us/podcast/devdiscuss/id1513053883 %}

## Listen on Spotify

{% embed https://open.spotify.com/episode/7ceKwVCeOFftk8NQpNCKao?si=1W_-ICNlQgeUVQ4cPmvVGQ %}

***

**And again, if you like the episode, definitely subscribe to the show. It's a great season!**

Happy coding! (Have fun 😅)
A teleprompter script for video recordings
Tags: videos, teleprompter
Published: 2022-05-25 21:07:33

---
title: A teleprompter script for video recordings
published: true
description: I needed a way to display a video script paragraph by paragraph, so I wrote it.
tags: videos, teleprompter
canonical_url: https://christianheilmann.com/2022/05/25/a-teleprompter-script-for-video-recordings/
---

Currently I am recording a lot of videos and I found the fastest way to do them is to write the script and read it out to my camera and then record screencasts and edit them to fit the narration. In order to make sure I read from the top of the screen and reading into the camera I had to scroll my scripts a lot, which was annoying so I wrote a small teleprompter script to work around that problem.

You get a text box to write or paste your script and pressing the "show as prompt" button will display one paragraph at a time at the top of the screen in a large font. You can click the document or press the right arrow key to move forward and Escape to go back to editing. 

![The prompter script in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rdr9h42z9bbaqkn0anr.gif)
 
If you go to https://codepo8.github.io/prompter you can see it in action and the [source is also on GitHub](https://github.com/codepo8/prompter/). It is nothing fancy and a lot was written by GitHub CoPilot for me anyways.
[Solved] SyntaxError: Unexpected token '.' Jest Error for Next.js Apps
Published: 2022-05-25 20:45:42


### Problem:

Running into the following error when trying to run unit tests for a Next.js application using the `jest` command:

```
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){.container {
                                                                                      ^

    SyntaxError: Unexpected token '.'

      2 | import Image from 'next/image'
      3 |
    > 4 | import styles from '@/pages/index.module.css'
        |                                              ^
      5 |
      6 | export default function Home() {
      7 |   return (

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1773:14)
      at Object.<anonymous> (pages/index.tsx:4:46)
```

### Solution:

This error could be caused by a number of issues and is related to Jest wanting to process CommonJS code. But it is unable to process `.css` files for some reason and therefore throws this error.

Here is a potential solution that worked for me:

1. Include the following line: `'\\.css$': '<rootDir>/emptyModule.js',` in your `jest.config.js` file
2. Create a file named `emptyModule.js` in the root directory of your application

Here is my full `jest.config.js` file just for extra reference:

```
// Add any custom config to be passed to Jest
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    // Handle module aliases (this will be automatically configured for you soon)
    '^@/components/(.*)$': '<rootDir>/components/$1',
    '\\.css$': '<rootDir>/emptyModule.js',
    '^@/pages/(.*)$': '<rootDir>/pages/$1',
  },
  testEnvironment: 'jest-environment-jsdom',
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)

```

Hopefully, this solves your issue. If not, keep looking for solutions, you'll come across one that works!

### Conclusion:

Thanks for reading this blog post!

If you have any questions or concerns please feel free to post a comment in this post and I will get back to you when I find the time.

If you found this article helpful please share it and make sure to follow me on [Twitter ](https://twitter.com/Shehan_Atuk)and [GitHub](https://github.com/ShehanAT), connect with me on [LinkedIn](https://www.linkedin.com/in/shehan-atukorala-8631491a5/) and subscribe to my [YouTube channel](https://www.youtube.com/channel/UCtxed_NljgtAXrQMMdLvhrQ).