teleren/devto huggingface dataset:
Quick tip: Using Deno and npm to persist and query data in SingleStoreDB
Tags: singlestoredb, deno, npm, javascript
Published: 2022-11-16 16:08:44

## Abstract
This short article will show how to install and use [Deno](https://deno.land/), a modern runtime for JavaScript and TypeScript. We'll use Deno to run a small program to connect to SingleStoreDB and perform some simple database operations.

## Create a SingleStoreDB Cloud account
A [previous article](https://dev.to/veryfatboy/quick-tip-using-dbt-with-singlestoredb-161g) showed the steps required to create a free SingleStoreDB Cloud account. We'll use **Deno Demo Group** as our Workspace Group Name and **deno-demo** as our Workspace Name. We'll make a note of our **password** and **host** name.

## Install Deno
Installation of Deno is straightforward on a Linux platform:

```shell
curl -fsSL https://deno.land/install.sh | sh
```

Once installed, we also need the following:

```
export DENO_INSTALL="/path/to/.deno"
export PATH="$DENO_INSTALL/bin:$PATH"
```

We'll replace `/path/to/` with the actual path to the installation directory.

We can check if the installation was successful by running the following command:

```shell
deno --version
```

## Create and Read operations
We'll use an [example](https://github.com/denoland/manual/blob/main/node/how_to_with_npm/mysql2.md) from GitHub and create a small JavaScript file, `s2_test.js`, as follows:

```javascript
import mysql from "npm:mysql2@^2.3.3/promise";

const connection = await mysql.createConnection({
  host: "<host>",
  user: "admin",
  password: "<password>",
});

await connection.query("DROP DATABASE IF EXISTS denos");
await connection.query("CREATE DATABASE denos");
await connection.query("USE denos");

await connection.query(
  "CREATE TABLE dinosaurs (id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255) NOT NULL, description VARCHAR(255))",
);

await connection.query(
  "INSERT INTO dinosaurs (id, name, description) VALUES (1, 'Aardonyx', 'An early stage in the evolution of sauropods.'), (2, 'Abelisaurus', 'Abels lizard has been reconstructed from a single skull.'), (3, 'Deno', 'The fastest dinosaur that ever lived.')",
);

const [results, fields] = await connection.query("SELECT * FROM dinosaurs ORDER BY id");
console.log(results);

const [result, field] = await connection.query(
  "SELECT description FROM dinosaurs WHERE name = 'Deno'",
);
console.log(result);

await connection.end();
```

We'll replace the `<host>` and `<password>` with the values from our SingleStoreDB Cloud account.

After running our program:

```shell
deno run s2_test.js
```

the output should be as follows:

```json
[
  {
    id: 1,
    name: "Aardonyx",
    description: "An early stage in the evolution of sauropods."
  },
  {
    id: 2,
    name: "Abelisaurus",
    description: "Abels lizard has been reconstructed from a single skull."
  },
  { id: 3, name: "Deno", description: "The fastest dinosaur that ever lived." }
]
[ { description: "The fastest dinosaur that ever lived." } ]
```

## Summary
In this short article, we have quickly tested Deno with SingleStoreDB.
Laravel - Cashier - Stripe Subscriptions
Tags: laravel, stripe, cashier, subscription
Published: 2022-11-17 15:03:59

I created a Laravel app using Cashier and Stripe.  It uses "teams" as the subscription approach.  I have it working exactly as I want it for test.  However, once I use production and actual payments, I am not getting any response (a null response) when checking for subscription.  The subscribed call returns null.  I added additional logging and subscriptions return null as well.  I have updated keys to production keys.  Any ideas why production site is returning nulls where the same code returns subscribed in test mode for Stripe?
Auto-Run Tests: Test Via Continuous Integration
Tags: beginners, javascript, opensource
Published: 2022-11-17 23:16:38

## What is Continuous Integration(CI)?

It's a way to make sure new codes are continuously integrated via running automated tests to make sure new codes follow certain standards and don't break anything. 

## How to do it?

I used Github Action which made the process pretty easy.
1. In your GitHub repo, click the Action tab and choose a template designed for your language. This will add an YAML file for configuration of this.
2. Edit the YAML file to suit your needs:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kk4kdnj62b43djwt3w1.png)
   - `on` lets you set when to run tests, such as: on any push to main branch or any PR to main
   - `runs-on` sets the OS of virtual machine to run the tests, such as: windows-latest,macos-latest, or ubuntu-latest
   - `strategy`'s `matrix` sets versions of the language or tool, like node-version [16.x, 18.x] for Node.js versions of 16 or 18
   - Under `steps`:
      - `uses` checks out code to run
      - `name` sets up version of node to run
      - `run: npm cl` installs dependency
      - `run: npm build` runs `npm build` according to your `build` script in package.json (optional), like:`- run: npm run build --if-present`
      - `run: npm test` runs `npm test` command according to your `test` script in package.json

## Another CI
There was [another repo](https://github.com/alexsam29/ssg-cli-tool) I tried to add test for, and it uses the same setup as mine. It uses JavaScript and achieve CI via GitHub Action, except that it also run test for version 14.x and 16.x of Node.js. Given both repo use [Jest](https://jestjs.io/) for testing, It's pretty easy to write test for the repo. I needed to spend time to understand the code and then run test coverage and see the existing tests to see what's needed to be done.

## Final Thought
I think CI is pretty great, as it provides an easy way to run tests and make sure new codes conform to certain standards before being added. It also saves time for developers from running tests manually, and CI makes sure no test is forgotten.
Como mudar o fundo do terminal
Tags: frontend, develop, tutorial, programming
Published: 2022-11-17 20:42:06

1° Abra seu terminal:

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

2° Clique na seta indicativa para baixo:

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

3° Entre nas configurações do seu terminal:

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

4° Procure a opção do nome do seu terminal:

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

5° Nas configurações adicionais, procure por "Aparência":

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

6° Procure o item descrito na imagem abaixo: 

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

7° Adicione o caminho da imagem do background:

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

8° Após selecionar, clique em salvar. Seu terminal irá atualizar no mesmo instante:

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

Espero que tenha ajudado!:) Deixo aqui meu [linkedin](https://www.linkedin.com/in/stefany-repetcki/) e [github] ❤️****
The Best Ways to Exploit Rate Limit Vulnerabilities
Tags: cyber, cybersecurity, bughunting, bugbounty
Published: 2022-11-18 04:22:30

---
title: The Best Ways to Exploit Rate Limit Vulnerabilities
published: true
date: 2022-11-18 01:36:39 UTC
tags: cyber,cybersecurity,bughunting,bugbounty
canonical_url: https://medium.com/the-gray-area/the-best-ways-to-exploit-rate-limit-vulnerabilities-f73ac24a08f1
---

[![](https://cdn-images-1.medium.com/max/1475/1*OMhE9T_tuC0pUoZyWKWSnQ.jpeg)](https://medium.com/the-gray-area/the-best-ways-to-exploit-rate-limit-vulnerabilities-f73ac24a08f1?source=rss-79a7fbf51e21------2)

TL;DR- If you’re into bug bounties or just white-hat hacking in general, you’ve probably heard of no-rate-limit vulnerabilities

[Continue reading on The Gray Area »](https://medium.com/the-gray-area/the-best-ways-to-exploit-rate-limit-vulnerabilities-f73ac24a08f1?source=rss-79a7fbf51e21------2)
Get JSON Value with Dynamic Key in TypeScript
Tags: typescript, json, snippet, beginners
Published: 2022-11-18 05:31:36

Small and hopefully helpful snippet.

Scenario: You have an on going update of JSON of `Car` data which has `modelyear` being added regularly. You wanted to output model description base on year as an input.

```typescript
// Get JSON Value with dynamic key
const vehicle = {
    "category": "car",
    "brand": "SupaDupa",
    "modelYear": {
        "2000": "SD-S",
        "2020": "SD-M",
        "2030": "SD-A",
        "2040": "SD-R",
        "2050": "SD-T"
        }
}
type ObjectKey = keyof typeof vehicle.modelYear;
const year = '2020' as ObjectKey // set value of dynamic key
console.log(vehicle.modelYear[year])
```

I had Original Snippet [here](https://www.typescriptlang.org/play?#code/PTAEHEFMBdQKQMoHkByoBqBDANgV0qAO4CW0AFqACYCeAdpgLbEDGoA1pNQFDMD2tAZ1gA3SGRbYCAXlABvLqEWgARM0zRIAc14AnasoBcKtTuUAaBUuUAjHZlqVDKhLgAOmACJvM5y4uUMvJSQ2ACakJimRvJKsSoATAAMyU7KCB4AtAi+cVZJSanpGQCyObkJiQDMiYWZAIJlucpJACw1RmmZAEqNcc2JAKztzpkAKsp+cQC+XDPQ1K4ESNYAVpDM0ADSnKAyHNS8AGag84tHoKLizJIAdIHBYRE6ANw8-EKg1E+7oADk+YlfqBMAJQMs1htttRQCBQAIYBccPhQOcaPQmKx9m9BLxbtheJoABSXCSQO5BELhSIAbS+kQAugBKLhAA)
Creating a Simple Firefox Extension
Published: 2022-11-18 08:47:13

## About
This will be short overview what steps it takes and how code looks of very simple browser extension.

## Goal
Extension will have simple background script which creates loop and shows native notification with static content every 30 second.

## File Structure
For minimal extension setup only `manifest.json` file is required but without including some scripts it would not do much, thus `just-sample.js` is added with main extension code.

```
Extension Folder
  + icons
  - manifest.json
  - just-sample.js
```

## File Content
Here `manifest.json` content. Long lived scripts should be added to `background` section and since this extension would use notification feature it needs to be defined in `permissions` array.

```json
{
  "manifest_version": 2,
  "name": "Annoying-Notifications",
  "version": "1.0",

  "description": "Sample browser extension to annoy user with useless notifications :)",

  "icons": {
    "48": "icons/notification_black_48dp.png"
  },

  "background": {
    "scripts": ["just-sample.js"]
  },

  "permissions": ["notifications"]
}
```
Based on documentation only `manifest_version`, `name`, and `version`, are mandatory.

Main script is simple and can be split into following parts:

1. There is `createNotification` function which act as notifications factory.
2. Another function `mainLoop` calls to itself recursively to avoid blocking thread. Function goal is call `createNotification` and wait for 30 seconds and then repeat same thing.
3. Script body only calls `mainLoop` once (when extension is initialized). However, since `mainLoop` calls to itself endlessly notification shows up after 30 seconds repeatable.

## Demo
Short demo video to demonstrate extension in action. Please note that video is trimmed thus testing extension locally it will take more time for notification to show up.

{% embed https://www.youtube.com/watch?v=ieuXYFTUYDk %}

## Conclusion
While this sample does not do much it demonstrate how to get started and what to expect when developing Firefox extension.

## References
- Source code: https://github.com/struggzard/firefox-extension-sample
- Documentation: https://developer.mozilla.org
- Cover image: https://unsplash.com/photos/4xmVvHRioKg
Youtube Shorts Beta is now Available for india || 🔥The biggest Short video app of Youtube
Published: 2022-11-19 05:17:26

<div class="separator" style="clear: both; text-align: center;">  <a href="https://lh3.googleusercontent.com/-OtdQ5WkHKfM/X2MKWAk5imI/AAAAAAAAGT4/zh5qjGB_GrMTvxn-aAY9H1u9mYtURNTBgCLcBGAsYHQ/s1600/1600326208800097-0.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">    <img border="0"   src="https://lh3.googleusercontent.com/-OtdQ5WkHKfM/X2MKWAk5imI/AAAAAAAAGT4/zh5qjGB_GrMTvxn-aAY9H1u9mYtURNTBgCLcBGAsYHQ/s1600/1600326208800097-0.png" width="400">  </a></div><div><div><b>Youtube&nbsp; starting off by launching an early beta of YouTube Shorts in India,</b>&nbsp;<b>this includes a new camera and a handful of editing tools that will be rolling out over the course of the next few weeks</b>. 'Youtube Will continue to add more features over the coming months and we look forward to hearing your feedback about these features.&nbsp;</div><br><ul><li><b>If you have access to the Shorts camera</b>, you’ll be able to start creating short vertical videos right on the YouTube app! To check if you have access and start creating your first Short, hit the "+" icon (or the video camera icon on iOS) and select ‘Video’. If you see ‘Create a short video’ then you have access to the Shorts camera, which will allow you to use editing tools to do things like string&nbsp;<b>multiple video clips&nbsp;</b>together, use&nbsp;<b>speed controls</b>&nbsp;and&nbsp;<b>timers</b>, and&nbsp;<b>add music</b>&nbsp;to your video clips.&nbsp;</li><ul><li>Note: For users on Android and located in India, you’ll see the “Create” icon has moved to the middle of the bottom navigation bar to make it easier for you to create videos right from the YouTube app.</li></ul></ul></div><div><br></div></br><p style="color:#757CF9;">This Article is Scattred w/ <a target="_blank" href="https://scattr.io?ref=dev&source=+Youtube Shorts Beta is now Available for india || 🔥The biggest Short video app of Youtube+">Scattr</a></p>
How to convert HTML To React Component
Tags: webdev, javascript, react, html
Published: 2022-11-19 06:54:31

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

Just Simply Copy your HTML CODE into this website https://magic.reactjs.net/htmltojsx.htm This Site will Generate JSX Code Copy from website paste into your React project files.
Working with telescope
Published: 2022-11-19 11:01:11

I haven't worked with a large repository of any sort before, and I don't think my skills are great enough to actually add anything to it. What I learned from working with any repositories, is that contributors tend to overlook the most basic problems due to their focus much more bigger issues. Therefore, when I worked with [telescope](https://github.com/Seneca-CDOT/telescope) I decided to locate for any existing errors that might have been overlooked by everyone. I was a bit pressed for what I can do simply because the 'sign-up' doesn't seem to be working properly with my repository regardless of how much time I spent trying to fix it.

I found an error that was overlooked by everyone, due to its simplicity. When clicking on the 'About Us' it doesn't link to the code dependecies, but instead link to a publicized version of the doc, as seen on the image below


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

The issue was simple, thus I did not struggle in terms of what I am able to do. However, the problem starts to appear when I tried to send a pull request. The first issue derives from not following the linter convention that was established from the repository. This was a simple fixed, because it sends an error in the CI where the problem originated from, and the last problem occurs from sending a merge as to a rebase. This took me a bit to understand, and I finally realized that I was doing the rebase from my master instead of the intended issue branch that I have posted.

Overall, working with large repository is overwhelming, but there will always be an issue that any beginner developer such as myself are able to do due to the tendencies of our senior developers to only focus on the large scale problems.
CSS3 Code Generators
Published: 2022-11-20 17:36:47

**CSS3 Code Generators -** That can speed up your web design development workflow.

As a web developer or web designer, sometimes you may struggle to get the proper CSS codes for your design, for example, if you want to add a drop shadow to an HTML element, if you don't know the exact values for box-shadow CSS property, you may have to add these values and adjust it to so many times to get the correct shadow effect, this may cost lots of time and its very painful right, As a solution, check out some excellent CSS code generator tools that you can use right now to speed up your web design projects.


- Number 01 => [Box Shadow CSS Generator](https://cssgenerator.org/box-shadow-css-generator.htmlL)


- Number 02 => [glassmorphism-generator](https://hype4.academy/tools/glassmorphism-generator)


- Number 03 => [css-underline-generator](https://cssbud.com/css-generator/css-underline-generator/)


- Number 04 => [Neumorphism.io](https://neumorphism.io/#e0e0e0)


- Number 05 => [animated-css-background-generator](https://wweb.dev/resources/animated-css-background-generator/)


- Number 06 => [zcreativelabs](https://zcreativelabs.com/)


- Number 07 => [GRADIENT BUTTONS](https://gradientbuttons.colorion.co/)

- Number 08 => [ColorSpace](https://mycolor.space/)

- Number 09 => [By z creative labs](https://www.blobmaker.app/)


- Number 10 => [Animated CSS Background Generator](https://waitanimate.wstone.uk/)



- Number 11 => [CSS Grid Generator](https://cssgrid-generator.netlify.app/)



- Number 12 => [Flaxy Boxes](https://the-echoplex.net/flexyboxes/?fixed-height=on&display=flex&flex-direction=column&flex-wrap=nowrap&justify-content=center&align-items=flex-end&align-content=space-between&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto)



- Number 13 => [FANCY-BORDER-RADIUS](https://9elements.github.io/fancy-border-radius/)
Browser Storage Hook React
Tags: npm, react, hook, package
Published: 2022-11-21 10:22:04

> import this ->
import { useLocalStorage,useSessionStorage } from 'browser_storage_hook_react';

> uses ->
const [value, setValue] = useLocalStorage('key', 'defaultValue');
const [value, setValue] = useSessionStorage('key', 'defaultValue');

{% embed https://www.npmjs.com/package/browser_storage_hook_react?activeTab=readme %}
GTK calculator on Rust
Tags: rust, gtk, algorithms
Published: 2022-11-21 11:26:14

(Almost done)

Made my first [application with user interface](https://github.com/antonovmike/calculator_gtk) and built it on Linux. Have to improve few issues. Also need to know how to build it for Windows and Mac.

Some issues I have to solve to consider the project complete:
- Listen for keyboard events (the program have to accept keyboard input even if the cursor is not in the text entry field)
- Scrollable entry screen with saved data of previous operations
- Set rounding precision (what is the best way to round calculation results?)
- Negative numbers issue (now it only works if you remove space between negative sign ant number manually)

I rewrote the part of the code in which buttons are created. Now all the numeric buttons are created inside the for loop and placed in the correct places.

```Rust
// NUM BUTTONS
for iterator in 0..=9 {
    let button = gtk::Button::with_label(&iterator.to_string());
    let mut column = 0;
    let mut raw = 1;

    button.connect_clicked(clone!( @strong entry => move |_| {
        entry.insert_text(&iterator.to_string(), &mut -1);
    }));

    if iterator == 1 || iterator == 4 || iterator == 7 { column = 0 }
    if iterator == 2 || iterator == 5 || iterator == 8 { column = 1 }
    if iterator == 3 || iterator == 6 || iterator == 9 { column = 2 }
    if iterator == 0 { column = 1 }

    if (1..=3).contains(&iterator) { raw = 1 }
    else if (4..=6).contains(&iterator) { raw = 2 }
    else if (7..=9).contains(&iterator) { raw = 3 }
    else if iterator == 0 { raw = 4 }

    grid.attach(&button, column, raw, 1, 1);
}
```
Function
Tags: dart
Published: 2022-11-21 21:39:23

## - Na imagem abaixo:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o34xv8gc61wy0bwb81cb.png)
Algumas funções que podemos fazer com o dart. Criar funções de operadores lógicos para calcular números especificos, números aleatórios, juntar números ou nomes. No main colocamos o Controller para especificar, calcular etc...

Resultado: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qy5ajho7gouhswyzb9tq.png)
How To Poll an Airflow Job (i.e. DAG Run)
Tags: airflow, devops
Published: 2022-11-22 15:31:53

Ever wanted to actually know when an Airflow DAG Run has completed? Perhaps your use case involves this completed work being some sort of workflow dependency, or perhaps it is used in a CI/CD pipeline. I'm sure there are a myriad of possible scenarios here beyond ours at [Redactics](https://www.redactics.com), which is using Airflow to clone a database for a dry-run of a database migration, but you be the judge!

[Here is the repo](https://github.com/Redactics/airflow-dagrun-poller)

In this repo you can find a sample `Dockerfile`, a sample Kubernetes job that provides some context as to how this poller script can be used, as well as the script itself. There isn't much to it, but I hope it saves some developers a moment or three of their time should they need to recreate this functionality!
Typescript: The keyof operator
Tags: webdev, programming, typescript
Published: 2022-11-24 13:36:36


> Este artículo fue originalmente escrito en [https://matiashernandez.dev](https://matiashernandez.dev/blog/post/typescript-the-keyof-operator)



A few primary concepts around Typescript help you build complex data shapes. One of that building blocks is the keyof operator.

  
This operator or keyword is the Typescript's anwser to the javascript `Object.keys` operator.

  
`Object.keys` returns a list of the properties (the keys) of an object. `keyof` do something similar but in the typed world only. It will return a literal union type listing the "properties" of an object-like type.

  
This operator is the base building block for advanced typing like mapped and conditional types.



> The keyof operator takes an object type and produces a string or numeric literal union of its keys. - [Typescript Handbook](https://www.typescriptlang.org/docs/handbook/2/keyof-types.html)

```typescript
type Colors = {
    primary: '#eee',
    primaryBorder: '#444',
    secondary: '#007bff'
    black: '#000',
    white: '#fff',
    whiteBorder: '#f2f2f7',
    green: '#53C497',
    darkGreen: '#43A17C',
    infoGreen: '#23AEB7',
    pastelLightGreen: '#F3FEFF',
}

type ColorKeys = keyof Colors; // "primary" | "primaryBorder" | "secondary" ....

function SomeComponent({ color }: { color: ColorKeys }) {
  return "Something"
}

SomeComponent({ color: "WhateverColor"})

SomeComponent({ color: "primary"})
```

The previous code sample is an snippet from a real web app. The `Colors` type describes a set of colors that can be used across the application.

  
The `keyof` operator is applied to the `Colors` type to retrieve a literal union of all the possible colors.  


> Literal union means that is a Union type made up of literal values like "primary" | "primaryBorder"

  
The union is then used to type the props of `SomeComponent`, allowing the `color` argument to be one of the colors defined in the type.

  
You can also use the `keyof` operator to build up more complex types or constraints alongside Generics and template literals, but that will be for another post.

  
There you go; the `keyof` operator can be small but is an essential piece in the big scheme that unlocks powerful operations when used in the right place.



![Footer Social Card.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1615457338201/5yOtr5SdF.jpeg)
✉️ [Únete a Micro-bytes](https://microbytes.matiashernandez.dev)         🐦 Sígueme en [Twitter](https://twitter.com/matiasfha)           ❤️ [Apoya mi trabajo](https://buymeacoffee.com/matiasfha)