teleren/devto huggingface dataset:
My fourth Hacktoberfest PR
Published: 2022-10-29 23:54:41

Hi everyone,

This week I completed my final Hacktoberfest PR. For my final PR, I chose to contribute to [Astro reactive library](https://github.com/ayoayco/astro-reactive-library). Astro reactive library uses the Astro framework to let you build reactive user interfaces.

The [issue](https://github.com/ayoayco/astro-reactive-library/issues/162) was to create a demo page showcasing everything the library has to offer with form control. This issue was interesting and a bit challenging to work on because I had to learn the [Astro documentation](https://astro.build/) before I could start writing code. The syntax and coding style in Astro is different from other frameworks, but it was fun learning new things. The main benefit of Astro vs other frameworks is that websites are built faster. The cool thing about Astro is that Astro is built from components and it's syntax is a superset of HTML. An Astro component is denoted by its file extension `.astro`.

After familiarizing myself with Astro, I started to create my demo page. I decided to use the [tailwindcss framework](https://tailwindcss.com/) to help me style my page since Astro supported it. This meant I had to read the tailwind documentation to style my page. Finally, after familiarizing myself with tailwind, I created the html for my page. For the demo page, I designed and created a job application page. This page included many form control types like text, radio, dropdowns, checkboxes, file upload, and a submit button. To do this, I used the built-in FormGroup from the library. I had to read the other parts of the source code to make sure I was using it correctly. Finally, I finished the page and created a [pull request](https://github.com/ayoayco/astro-reactive-library/pull/164). The most difficult thing about this PR was reading the documentation and making sure I was using the frameworks correctly.
How to Create Prepared Statements with the Airflow PostgresOperator
Published: 2022-10-29 23:38:23

Airflow's [PostgresOperator](https://airflow.apache.org/docs/apache-airflow-providers-postgres/stable/_api/airflow/providers/postgres/operators/postgres/index.html) includes a field called `parameters` for providing SQL parameters for [prepared statements](https://en.wikipedia.org/wiki/Prepared_statement).

We wanted to use named parameters since our parameter order would vary, which meant [understanding the syntax](https://airflow.apache.org/docs/apache-airflow-providers-postgres/stable/operators/postgres_operator_howto_guide.html#passing-parameters-into-postgresoperator). In their provided example: `SELECT * FROM pet WHERE birth_date BETWEEN SYMMETRIC %(begin_date)s AND %(end_date)s`, the format here was unclear - for example the trailing `s` (we guessed this meant `string`, but queries with numerical inputs were failing without the s.

After some research we realized that the underlying dependency here was [Psycopg](https://www.psycopg.org/psycopg3/docs/basic/params.html). From this page:

```
Named arguments are supported too using %(name)s placeholders in the query and specifying the values into a mapping. Using named arguments allows to specify the values in any order and to repeat the same value in several places in the query:
```

and:

```
The variables placeholder must always be a %s, even if a different placeholder (such as a %d for integers or %f for floats) may look more appropriate for the type.
```

So, follow the above format for your variable placeholders, and ensure that the variable passed in is cast to the correct format (i.e. don't quote numbers).
Little About Node.js
Tags: javascript, beginners, node
Published: 2022-10-29 23:15:27

Node.js is a powerful JavaScript runtime built on Chrome's V8 engine. It is used for developing server-side applications and is one of the most popular JavaScript runtimes.

Node.js streams are a powerful way to work with data. They provide a way to read data from a source, process it, and write it to a destination. Streams can be used to read and write files, make HTTP requests, and more.

Readable streams provide a way to read data from a source. The data in a readable stream can come from many places, such as a file, an HTTP response, or STDOUT.

Writable streams provide a way to write data to a destination. The data in a writable stream can be written to many places, such as a file, an HTTP request, or STDOUT.

Node.js provides many built-in readable and writable stream classes. In addition, Node.js streams can be created with the Streams API.

The Streams API provides a way to create, operate, and consume streams. It is a low-level API that provides the foundation for all other streams.

The Streams API is not limited to Node.js streams
My third Hacktoberfest PR
Published: 2022-10-29 23:05:50

Hi everyone,

For my third Hacktoberfest PR, I worked on this [repo](https://github.com/AnkitaMalik22/devmate). Devmate is a project for developers to find other developers who share the same skills to become friends.

The [issue](https://github.com/AnkitaMalik22/devmate/issues/94) was to improve the UI of a box containing the number of developers found that share a skill. Design is not my strong suit, but I decided to try to improve the design anyway. To start, I took some inspiration online for some designs. I decided to use a gradient colour scheme to make the box pop out and found a nice text font and colour to contrast against the background. I made sure that the design looked good for both the light and dark mode since the website supported both. Here is my [pull request](https://github.com/AnkitaMalik22/devmate/pull/99).

Before:

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

After:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0wf0c7wsumefekoshny2.png)
Route domain traffic to AWS with Route 53
Tags: aws, dns, devops, tutorial
Published: 2022-10-29 22:32:25

On the AWS console, search for route 53 in the search bar.


![route 53](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16ev514ucuj9xoi6pwh6.png)

On the route 53 dashboard, click on "hosted zone".

![route 53 dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjdura88jaqli26eauei.png)

on the next screen here click on "created hosted zone"

![further description on route 53](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y270xyvat9qgosomdg0y.png)

If you haven't done any activities on the route 53 dashboard, it will look more like this

![route 53 dashboard without hosted zone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2sdtrgvmvc1xj7oeo10.png)

On the screen where we want to create hosted zone, fill in the domain name and click "create hosted zone".

![create-an-hosted-zone-route-53](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kigghd1va4daticegxff.png)

After the hosted zone has been created successfully, copy the nameserver one after the other and add them to your domain provider's DNS list.

![hosted-zone-nameserver-list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9z5x9x3uf01fajxv4qs3.png)

wait for a couple of minutes or even hours for propagation to be complete and now we are able to use the domain on AWS.

Onto the next one... 
Cheers!
Hacktoberfest PR#4: back to the roots
Tags: opensource, hacktoberfest, html, beginners
Published: 2022-10-29 21:35:56

Hey there! Thanks for coming by. This week, I worked on my last PR for this year Hacktoberfest, so let me tell you about how it went.

## The issue

This week, I decided to work on a beginner project called [Alice Game](https://github.com/GingerKiwi/alice-game). 

I wanted to rest from the constant activity on bigger projects and have some space for creativity, so I picked an [issue](https://github.com/GingerKiwi/alice-game/issues/5) that sounded fun to me. This also involved working on vanilla HTML/CSS, which helped me keep my front-end skills in shape.

## Working on the issue

Since this week's repo was in its beginning, thankfully there was no struggle with setting it up. I forked the repo and started working on it.

It is very refreshing working on plain HTML/CSS instead of those complex front-end frameworks that I usually deal with. Sometimes it is just fun trying to create things from scratch, and I enjoyed working on the issue very much!

After I was done, I submitted a quick [pull request](https://github.com/GingerKiwi/alice-game/pull/8) and waited for feedback on my work.

## Summary

Although this activity wasn't as impressive, I believe it is very important to help small projects grow, and take a break from big noisy projects. Plus, there is a certain charm to such repos which is very appealing.
VueJs Beginners part 2 - Methods
Tags: vue, javascript, webdev, beginners
Published: 2022-10-29 21:14:12

To add methods to a component instance we use the `methods` option.
we can define them the way we defined `data` and indeed `methods` is a object of functions. 

```js
const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
)}
```

Event and key Modifiers: 

It is a very common need to call something like event.preventDefault() inside event handlers. it can be done in method itself but there are some modifiers to apply them easier.

examples: 
```html
@click.right
@click.prevent.stop
@keyup.13

<!-- the submit event will no longer reload the page -->
<form @submit.prevent="onSubmit"></form>

<!-- only call `submit` when the `key` is `Enter` -->
<input @keyup.enter="submit" />
```

do you want more check [here](https://vuejs.org/guide/essentials/event-handling.html#event-modifiers)

Run and edit them yourself here 
{% embed https://codesandbox.io/embed/vuejs-beginners-part-2-pemkgy?fontsize=14&hidenavigation=1&theme=dark %}
Use NextJS Server Side Pre-Rendering like a boss !🔥
Published: 2022-10-29 20:48:21



So you want to get better at pre-rendering your components ? You've come in the right place!

The main power of NextJS regarding the SSG is pre-rendering, building fast and having a good dev experience.

## Why should I pre-render?

Pre-rendering comes with a better user experience, faster page loads and a better dev experience.

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

The purpose of pre-rendering is to paint the macro components of your page. We are interested in putting the buttons, menus and sections with or without content.

The second step is to obtain the data via getStaticProps from an API or CMS (you can use Strapi, Contentful, Sanity and so on). 

Keep in mind, at micro level, we want to nest our data inside the macro components without canceling the pre-rendering, if we compare using front-end react hooks that need a browser, we will cancel the pre-rendering feature and we'll build the component at runtime on the user browser.

## Lower the dependencies of browser only react hooks.

If you have components that require browser characteristics, you'll need to add complex logic, failing to pre-render the component. In some cases, this is a good thing in some cases analyse if you really need that hook. This applies to useEffect logic as well.

## What should I pre-render if the component is client only?

For a good user experience, you have two options : loading or skeleton component. The skeleton component have been researched as a better candidate because it tricks your mind that the component is rendering fast.

## What should we pre-render if we have complex desktop, tablet and mobile page components?

You can use nextJS middleware and check the user-agent :
- We'll filter by using the user-agent request and we'll match the screen layout with our page.

For example, you can have a mobile page, a desktop page and a tablet page (e.g. homepage-mobile.tsx, homepage-desktop.tsx). You'll select the page needed and change the response accordingly.

## How to test how your page is pre-rendered?

Build your project and disable the javascript on your page. You will see how the page first renders with the pre-rendering feature.
Top Recon Tools
Tags: security, cybersecurity
Published: 2022-10-29 20:39:39

top recon tools i use for information gathering for #bug_bounty:

## Amass

> The OWASP Amass Project performs network mapping of attack surfaces and external asset discovery using open source information gathering and active reconnaissance techniques.
[Github Link](https://github.com/OWASP/Amass)

## Subfinder

> subfinder is a subdomain discovery tool that returns valid subdomains for websites, using passive online sources. It has a simple, modular architecture and is optimized for speed. subfinder is built for doing one thing only - passive subdomain enumeration, and it does that very well.
[Github Link](https://github.com/projectdiscovery/subfinder)

## Nmap

> Nmap is released under a custom license, which is based on (but not compatible with) GPLv2. The Nmap license allows free usage by end users, and we also offer a commercial license for companies that wish to redistribute Nmap technology with their products. See Nmap Copyright and Licensing for full details.
[Github Link](https://github.com/nmap/nmap)

## Gospider

> GoSpider - Fast web spider written in Go
[Github Link](https://github.com/jaeles-project/gospider)

## Gotator

> this has massive features , Checks domain and TLD analyzing ccSLDs to avoid going out of scope (example.com, example.com.mx, etc.).
[Github Link](https://github.com/Josue87/gotator)

## Httpx

> httpx is a fast and multi-purpose HTTP toolkit that allows running multiple probes using the retryablehttp library. It is designed to maintain result reliability with an increased number of threads.
[Github Link](https://github.com/projectdiscovery/httpx)

## Wahtweb

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



> Next generation web scanner
[Github Link](https://github.com/urbanadventurer/WhatWeb)

_What tool do you use ? :)_
join my telegram channel for more -> `@spi_sec`
A-Z of Three.js (Understanding the concept of a movie scene )
Tags: programming, javascript, beginners, threejs
Published: 2022-10-29 20:27:58

In the making of a movie the following thing are require for this to happen.

1. A scene
2. A Camera 
3. The object or the characters
4. The film



I would try to use a movie to describe how best three.js works under the hood.

1.A scene: According  to google, scene is the place where an incident in real life or fiction occurs or occurred.
Multiple scene make up a movie. In three.js in other to render an object you need a scene.To define a scene use 
`const scene= new THREE.Scene();`

2.A Camera : Camera is necessary in the making of every movie scene .Without a camera in a scene it more or less like a stage play .

`const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );`

Every movie you must have watch have a height and width .Some are more rectangular  and other square shape.Some scene might be closer to you while others are far from you.
 In three.js you can specify x,y,z axises. X is from left to right or majorly the side of the scene ,Y is from top to bottom.While Z is for of zoom ie far or near to your view .

`camera.position.z=3;`
 
3.The object or the characters

In a movie you must have an object or a character acting the scene.This is what every watcher want to see.Take for instance you need a red box in your set .You need to first make a wooden box and wrap a red piece of cloth around it.The same works in three.js .

You have to create a wireframe or structure which is done with
`
const geometry = new THREE.BoxGeometry(1,1,1);
`
 
Then wrap with with a red material 

`const material = new THREE.MeshBasicMaterial({ color:'red'})`

The combination of the wooden box and red material is handled by the MESH in three.js

`
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
`

4.The film: Everything comes together to make up the movie.The camera, scene and object makes up a movie .

`const canvas = document.querySelector('.webgl');


const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(window.innerWidth,window.innerHeight)
renderer.render(scene,camera);`

Final result :-

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

Hoping to learn more about three.js checkout [three.js](https://threejs.org/) or [threejs journey](https://threejs-journey.com/#)
JSON VS CBOR (Javascript)
Tags: javascript, webdev, programming, opensource
Published: 2022-10-29 20:16:38

You may have had the need "serialize" some javascript object or had to use **JSON to perform a deep comparison between two version of the same object**, probably, yes, it was good.

But as always, good is the enemy of great, and when it comes to compare, deep clone, store, encrypt, or compress data, you need to use a **Buffer** (A chain of bytes if you want, mostly used as unsigned integer between 0-255) and it can be achieved in JSON after using it's stringify function by using a text encoder or a text decoder, depending on the direction of the results...

**JS strings are UTF-8** always but they can be encoded into bytes by kind of looking at a table and it write the index of char into the list of number that compose the string, then it can be used in binary or in radix 10 mathematics (Binary is radix/base 2) but it's kind of a slightly more complex than explained here, yet, I will let everyone dig for the true version of how UTF-8 String are encoded and decoded using "new TextEncoder().encoder" and "new TextDecoder().decoder" ... 

Ok let's resume, **we convert object into a fat text and then encode the fat text into a fat list of numeral values in base/radix 2, so in other words, a buffer with binary values???** YES! That's however such **a heavy process not much efficient**, we increase weight and do non-willful operation...


Concise Binary Object Representation (CBOR) is a binary data serialization format loosely based on JSON authored by C. Bormann. Like JSON it allows the transmission of data objects that contain name–value pairs, but in a **more concise manner. This increases processing and transfer speeds** at the cost of human readability. 

It is **particularly interesting when we convert base64** into an array of values from 0 - 255 which produce a buffer in certain ways and then **works with typed array** (fixed quite clamped array much fast very kool)

It is much faster to use [CBOR](https://www.npmjs.com/package/cbor) than JSON if you perform mostly TypedArray, Base64 (encode/decode it) serialization, and that's it!
DragonOS (lubuntu) on USB with persistent storage
Tags: dragonos, linux, usb
Published: 2022-10-29 19:49:45

[DragonOS](https://cemaxecuter.com/) is a [Lubuntu](https://lubuntu.net/)-based Linux distribution for software-defined radio. The x86-64 version runs well from a USB stick. However, I wanted persistent storage. That is, I wanted to be able to save files and change configuration settings and have these stick around when I next booted DragonOS.

I couldn't get this to happen with Rufus or Balena Etcher. I had a preexisting install of Linux and found mkusb worked perfectly. I tested these steps with both Ubuntu (22.04.1 LTS) and Mint (21, Cinnamon). The instructions for mkusb are [here](https://help.ubuntu.com/community/mkusb).

```
# Enable the universe repository
sudo add-apt-repository universe
# Add the mkusb PPA
sudo add-apt-repository ppa:mkusb/ppa
sudo apt update
# Install mkusb
sudo apt install mkusb
sudo apt install usb-pack-efi
```

Now that mkusb is installed, the process is fairly straight-forward. When you start it up, you have the choice of user interface. I picked `p, Plug` for the new UI. Now, `p, Persistent live drive` because that's the whole point. mkusb can't quite figure out that DragonOS is based on Lubuntu, so I tell it `u, Ubuntu`. The rest of the process takes a few minutes.

Reboot to test the results. The process should work the same as booting the non-persistent version. The first boot takes a little time to rearrange the file system. Once DragonOS is up, test the persistence by creating a small file in the home directory, then reboot and see if the file is still there.

That's it. Enjoy your persistent live USB install!
Great resources for learning React and Typescript
Tags: react, typescript
Published: 2022-10-29 19:43:20

We're about to start a major rewrite of an enterprise-scale web application and it didn't us long to decide on **React + Typescript**. We're replacing a decade-old AngularJS application so it's a no-brainer to move away from AngularJS. 

While my fellow senior developers and I have some decent experience with React and TS already, these will be relatively new to most of our team - not to mention a major paradigm shift in tooling, libraries, etc.

To help, I've been gathering a list of my favorite resources for learning React and Typescript - not just syntax and APIs but the approach.

Please reply with your favorite resources! I'd love to know what helped you or your teams!

**React**

- [Docs](https://reactjs.org/docs/getting-started.html)
- [Tutorial](https://reactjs.org/tutorial/tutorial.html)
- [Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/)
- [Component Composition](https://felixgerschau.com/react-component-composition/)
- [Paired Hook Pattern](https://lukeshiru.dev/articles/the-paired-hook-pattern)
- [Stateless Components](https://programmingwithmosh.com/javascript/stateful-stateless-components-react/)
- [Pure Components](https://medium.com/technofunnel/working-with-react-pure-components-166ded26ae48)


**Typescript**

- [Tutorials](https://www.typescripttutorial.net/)
- [Type Notation](https://2ality.com/2018/04/type-notation-typescript.html)
- [React TS Cheatsheet](https://react-typescript-cheatsheet.netlify.app/)

**Other**

- [Naming Convention Cheatsheet](https://github.com/kettanaito/naming-cheatsheet)
Days 17-24
Tags: nextjs, fullstack, blog, 100daysofcode
Published: 2022-10-29 19:08:11

## Projects 

I decided that I wanted to work on some smaller projects to make sure that I fully understand what I am doing. All of these projects were CRUD projects instead of API projects. One of the projects that I did that I decided to post was a basic todo list with user authentication. This website took me at most 1 hour only because I had trouble with front-end. This was a very simple project that I anyone could do. If you want to see a video of how I did it then please like this or comment this. If it gets more than 5 comments or likes then I will post a in depth video. Another coding project that I deployed today was a job saving app. This website only uses create, delete, and read. I plan to use this website to save jobs that I learn about so that I can compare that data to offers that I get in the future. I made this because I realized that I was tired of having bookmarks of jobs that would take up my entire bookmarks bar, so I made this website. 

[Todo-list link](https://fullstack-todolist.vercel.app)
[Job Saver link](https://job-saver-two.vercel.app)


## Hackathon

I wasn't able to work on the hackathon this week because I had a lot of school work, I had midterms for my college classes and some quizzes and tests for my high school classes. This weekend I will also be fully booked because I have to go to some events and finish my essay for English. But, I plan to dedicate at least 1 hour everyday next week working on the project.

## Conclusion

I have been very preoccupied because I have a lot of school work. At the same time, I have been thinking of ways that I could make some money off side hustles. I am looking for summer high school internships because I want to be able to get some working experience in engineering. I feel like I would be a great candidate for a summer internship because in class, every week we learn use fusion 360 and AutoCAD, we have to build robots and drones from scratch (without any instructions except for the prompt) and I really want to use these skills in a work place environment. 


Thank you for reading this blog!