teleren/devto huggingface dataset:
My FIRST OPEN SOURCE Contribution!! My First Attempt at Open-Source and First Blog
Tags: opensource, firstpost
Published: 2022-02-03 02:51:15

Yesss!!!... 

Despite the Easy level of difficulty, I’m super proud to have finally contributed. I’ve been wanting to participate in open source for a long time, but I’ve found the process a bit confusing and scary. I didn’t really know where to start and Then After a lot of Research on Open Source for months, Watching videos, Reading Articles, I made my First Open Source Contribution!!

It wasn't Even that Big it was just a Minor Change in Code, i.e when we click any of the Social Media Icon on the Website it Opens in the Current tab, But the change I made was to Redirect it to a New Tab... it was a minor change But still, for me, it is very big, it Made me Very happy

So Recently I Came Across a Program named JWoC (JGEC Winter of Code) and immediately registered in it after registration, We can choose any Project or Contribute to any projects that are selected for the event, but you can take only 2 issues at a time, So I Selected HackClubRait project

Coding Phase Started on 1Feb
 
For this I First needed to Revise Git, Github I Learned how to use Git long ago, but never used it so eventually, I forgot the commands, After revising I went to take up an issue on Feb 1, but...All the Issues were already Taken 
then I visited HackClubRAIT website(https://hackclubrait.github.io/) and went through it and raised an issue, 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqdz7a5njxdd3uzp8v3k.PNG)
This was the issue I raised after some time this issue was assigned to me by the project mentor 
Then I forked it, Cloned it, and started going through the codebase, and in the contact us section in anchor tag(HTML Tag) I added `target="_blank"` beside the Social media Links that's it and It's Completed..!!!


After making changes to the code, I made sure that the solution and description were referenced by the project mentor, She Congratulated me and told me to Pull Request it, I was so happy

Then I faced Some Issues as I didn't go thoroughly through the`README.md` and i need to do the Steps again after referring it, Next, I went back to the main repo and started a pull request and provided a description of my contribution

That's it, My PR got Merged and Made My First Open Source Contribution 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oo9dia8uxvs2y2k75xzi.PNG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4470iwmzctl8x60xj06a.PNG)

uff....After a long struggle and Fear of How to contribute to open source, i got through the First Hurdle.....

In Future, Will Learn More Languages and Frameworks and Hope Take up a more Harder Issue in Future..!!

**LESSON LEARNT**
->Thoroughly go Through the Readme section
->Don't get scared of failing and doing Nothing, Try and Try until you succeed!!!!

Thank you for going through my first blog, Hope you have Liked it 

Have a Nice Day!!
Paracetamol.js💊| #41: Explica este código JavaScript
Tags: javascript, spanish, webdev, beginners
Published: 2022-02-03 02:05:14

## **Explica este código JavaScript**

```js
const myLifeSummedUp = ["☕", "💻", "🍷", "🍫"]

for (let item in myLifeSummedUp) {
  console.log(item)
}

for (let item of myLifeSummedUp) {
  console.log(item)
}
```


-     A: `0` `1` `2` `3` y `"☕"` `"💻"` `"🍷"` `"🍫"`
-     B: `"☕"` `"💻"` `"🍷"` `"🍫"` y `"☕"` `"💻"` `"🍷"` `"🍫"`
-     C: `"☕"` `"💻"` `"🍷"` `"🍫"` y `0` `1` `2` `3`
-     D: `0` `1` `2` `3` y `{0: "☕", 1: "💻", 2: "🍷", 3: "🍫"}`

Respuesta en el primer comentario.

---
Case: JS Intersection Observer usage within iFrame
Tags: javascript, intersectionobserver, case, performance
Published: 2022-02-03 02:04:32

Wanted to share our experience using Intersection Observer API.

In short, what is Intersection Observer API:

> ...provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. It fires a JavaScript event if the element on a page becomes visible/invisible in the user's viewport. It relies on the native browser's API.

In our project we allowed users to upload GIF images to showcase their works. At the time of launching the project, it suited great everyone - users (they knew how to deal with GIF images) and developers (no need to convert videos from various formats to H.265). One day we decided to add support of the video clips with the same functionality as GIF images: autoplay, looped, no audio. Users liked the new feature - no doubt, the video's 4K quality can't be compared with 256-color GIF. And it started a disaster on the client-side - users started uploading 10 videos per project and they all started running in the loop when the user was opening the project's page.


![Page view with all videos visible](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/traf91f6lo43i1z4oc9v.png)

We needed to take an action. We decided to add Intersection Observer in the game.

Each video that the user embeds is being inserted on the page via iframe. And each iframe can have its own intersection observer that will fire when the iframe becomes visible/invisible on the screen. So instead of initializing the intersection object on the parent page, we initialize it within the iframe.


![Page view within user's viewport visibility](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ga03t7b0tqtqvvgmzcch.png)

And it works great. Once the video is on the screen - the video automatically starts playing. Once the video becomes invisible on the page - we put it on pause.

Initializing intersection observer is easy:

```
const videoBlockEl = document.getElementById('video')
const videoPlayerEl = document.getElementById('video-player')
let isVideoVisible = false
const videoObserverOptions = { threshold: .05 }

const videoObserver = new IntersectionObserver(event => {
  isVideoVisible = event[0].isIntersecting

  if (!isVideoVisible) {
    videoPlayerEl.pause()
  }
  if (isVideoVisible) {
    videoPlayerEl.play()
  }

}, videoObserverOptions)
        
videoObserver.observe(videoBlockEl)
```

If you use observers in single-page applications, don't forget to disconnect from observer when you no longer need them:

`videoObserver.disconnect()`

Benefits of this approach:
- Ship the code easily - you don't have to support any of the code on the parent page
- Intersection Observer API is available and working even if the iframe is being embedded anywhere else
- Dependency free code with just a few lines of vanilla javascript
Simple examples of NodeJS servers: Express, Koa and Hapi | Discussion.
Tags: node, javascript, discuss, webdev
Published: 2022-02-03 01:56:39

## Hello, Devs!

Keep in your mind:

> “The Only Constant in Life Is Change.”- Heraclitus

Currently, we can use Express, tomorrow Koa and after Hapi, maybe not in this sequence, so you really know that is normal many frameworks in our context.

One thing to realize here is the easy way to migrate through theses frameworks, because they have a similar interface to handle routes, callbacks, request and response, start server, listen ports, http methods rest, error handling and others.


## **Express.js**
[Express.js’s GitHub](https://github.com/expressjs/express) repository has 55.8k stars, 205 contributors, 8.3k forks, and 280 releases.

## **Koa.js**
[Koa.js’s GitHub](https://github.com/koajs) repository has 32.2k stars, 276 contributors, and 3.1k forks.

## **Hapi.js**
[Hapi.js’s GitHub](https://github.com/hapijs/hapi) repository has 13.7k stars, 209 contributors, 9.4k forks.


---

## **Look at here each one simple example of Express, Koa and Hapi.**

Let's go!


Link: https://expressjs.com/

```
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})
```

Link: https://koajs.com/

```
$ npm i koa

const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
  ctx.body = 'Hello World';
});

app.listen(3000);
```

Link: https://hapi.dev/

```
'use strict';

const Hapi = require('@hapi/hapi');

const init = async () => {

    const server = Hapi.server({
        port: 3000,
        host: 'localhost'
    });

    server.route({
        method: 'GET',
        path: '/',
        handler: (request, h) => {

            return 'Hello World!';
        }
    });

    await server.start();
    console.log('Server running on %s', server.info.uri);
};

init();

```

## **But what would be a best option?**

1 - Your server production has a support for all them? So, it's necessary look at.
2 - The software is dependent of each one of them and has no time and team to migrate?
3 - We have a good community to ask any question if necessary? All of them has an awesome community.
4 - What are the advantages to migrate? We'd have a clean code with some one of them or a better performance?
5 - All are minimalistic, flexible and scalable.

What you think? How to use? You have a case? Share on comments!

**Contacts**
Email: luizcalaca@gmail.com
Instagram: https://www.instagram.com/luizcalaca
Linkedin: https://www.linkedin.com/in/luizcalaca/
Twitter: https://twitter.com/luizcalaca
Welcome Thread - v162
Tags: welcome
Published: 2022-02-03 01:54:15

---
title: Welcome Thread - v162
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Sloth saying hi](https://media.giphy.com/media/8dS4LemYbBZv2/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
AWS S3 with Python
Tags: aws, python, boto3, nelsoncode
Published: 2022-02-03 01:48:17

In this example we will see the basic operations that we can do with the cube and the files

### Installation

```bash
pip install boto3
```

### Connection

```python
from boto3 import client
from os import getenv

clientS3 = client("s3",
                  aws_access_key_id=getenv("AWS_ACCESS_KEY_ID"),
                  aws_secret_access_key=getenv("AWS_SECRET_ACCESS_KEY"),
                  region_name=getenv("REGION_NAME")
                  )
```

## Methods for buckets

### Create bucket

```python
from botocore.exceptions import ClientError

def create_bucket(bucket: str):
    try:
        response = clientS3.create_bucket(Bucket=bucket)
        return response
    except ClientError as e:
        return e.response["Error"]
```

### Delete bucket

```python
from botocore.exceptions import ClientError

def delete_bucket(bucket: str):
    try:
        response = clientS3.delete_bucket(Bucket=bucket)
        return response
    except ClientError as e:
        return e.response["Error"]
```

### List all buckets

```python
from botocore.exceptions import ClientError

def list_buckets():
    try:
        response = clientS3.list_buckets()
        return response
    except ClientError as e:
        return e.response["Error"]
```

## Methods for files

### Upload file

```python
from typing import BinaryIO
from botocore.exceptions import ClientError

def upload_file(data: BinaryIO, bucket: str, filename: str):
    try:
        clientS3.upload_fileobj(Fileobj=data, Bucket=bucket, Key=filename)
        return "success"
    except ClientError as e:
        return e.response["Error"]
```

### Get file

```python
from typing import BinaryIO
from botocore.exceptions import ClientError

def get_file(bucket: str, filename: str):
    try:
        response = clientS3.get_object(Bucket=bucket, Key=filename)
        return response
    except ClientError as e:
        return e.response["Error"]
```

### Delete file

```python
from typing import BinaryIO
from botocore.exceptions import ClientError

def delete_file(bucket: str, filename: str):
    try:
        response = clientS3.delete_object(Bucket=bucket, Key=filename)
        return response
    except ClientError as e:
        return e.response["Error"]
```
NixOS Installation WIP
Tags: nixos, installation
Published: 2022-02-03 01:17:03

---
title: NixOS Installation WIP
published: true
description: Installing NixOS...
tags: NixOS,installation
cover_image: https://symbols.getvecta.com/stencil_89/58_nixos-linux.af654284e2.jpg
---
https://nixos.org/download.html

ive gon thru da process n working to document it here! coming soon: complete step-by-step guide to set up a vps with nixOS
Generating Isolated Component Packages for Flutter
Tags: flutter, parabeac, design, news
Published: 2022-02-03 01:10:45

Our open-source Figma to Flutter converter has been used across various projects. While many developers will include UI directly in their Flutter project, we learned that for other companies and projects, the best use case of Parabeac was generating components, particularly for projects looking to scale. With the uptrend of tools like Storybook & Component Isolation that help test & scale UI, we decided to add changes to [parabeac_core](https://github.com/Parabeac/parabeac_core) that enables this development workflow.

So what does a component package look like?

![Component Package](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2v3lqh3dcuuo8eyvc0o.png)

It's relatively simple, but the main idea is to completely isolate your UI code from your application code. The code & assets generated from [parabeac_core](https://github.com/Parabeac/parabeac_core) are now prepared to be used as a package.

![Component Isolation with Parabeac](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znz2l8hkswn874rs6s37.png)

To use the component package in your Flutter app, you'll want to:
* Add Base BLoC to the component package
* Push to Github
* Import into Flutter Project
* Override BLoC with application logic in the Flutter Project

You can import the component package as easy as doing the following the pubspec.yaml:
```
example_project:
    git: git@github.com:<gh_username>/example_component_package.git
```

You can learn how to create your own component package by following the steps in our developer guide here: https://docs.parabeac.com/docs/how-to-create-a-component-package

Thanks for reading! We'd love to hear your feedback so that we can continue improving the project. Leave a comment or reach out to us on our [Discord server](https://discord.com/invite/qUrghes)!
Code reviews - Are you checking for this?
Tags: codereview, webdev, beginners, programming
Published: 2022-02-03 01:08:58

What do you look for when you review your peer's code? Is it that the new code is consistent with the existing codebase? Do you check for typos? Existence of tests? Correct formatting? Documentation? That the code logic is correct and easy to grasp?

While some of the above can be automated, these may all be important things to check in your daily code reviews.

And while developers love their code patterns and clean code, there is one aspect in code reviews that should be prioritized: The business requirements.

Take this piece of code for example:

```javascript
const title = article.title
return containsProhibitedWord(title)
```

Yes, suggesting that the variable "article.title" can be inlined is a good idea. But don’t let that distract you too much, as changing the syntax doesn’t fix the fact that the article body also needs to be checked.

That’s why it is important to not only review syntax and architecture, but also the actual implementation of the requirement.

Note that sometimes, it's after a refactor that you realize the inconsistency with the business requirements because the code is now easier to understand and follow.

---

This was an excerpt from my e-book **Intent-Driven Development** which will teach you how to simplify the day-to-day code you run into and the balance between over- and under-engineering. Get it over at https://michaelzanggl.com/intent.
New SaaS Startup - Vocal.to
Tags: beginners, bubble, testing, javascript
Published: 2022-02-03 00:31:35

We are building Vocal - an end-to-end solution for businesses to collect and publish awesome video content from their customers (user-generated content).

We're on a mission to democratize expensive video production - check us out!  

[Video Testimonial Software](https://www.vocal.to 
)
How to get better at story slicing
Tags: pullrequests, codereview, tdd, mikadomethod
Published: 2022-02-03 21:32:31

---
title: How to get better at story slicing
published: true
date: 2022-02-03 00:00:00 UTC
tags: pullrequests,codereview,tdd,mikadomethod
canonical_url: https://jhall.io/archive/2022/02/03/how-to-get-better-at-story-slicing/
---

I was recently discussing the question of flow and pull request review. I’ve talked before about [making PRs smaller](https://jhall.io/archive/2021/11/17/when-is-a-pull-request-too-big/) in an effort to make them [more reviewable](https://jhall.io/posts/in-depth-code-review/).

But a common concern is “Yeah, but how do I make my changes smaller?”

This is a natural question, because often it feels like a feature you’re working on simply _isn’t ready yet_. Maybe it doesn’t even work yet! Maybe you’ve even broken everything in the process of getting your new feature in place.

One approach is often “just do pair programming”. This isn’t bad advice, but I think it really misses the point. Slicing is still useful even if you’re pairing.

So how can you possibly commit something like that, let alone make it a pull request?

Well obviously, you can’t.

You need to learn to write _small_ and at the same time _functional_ steps toward your eventual feature.

How do you do that?

Here are three tools or techniques to help you learn the art of working in smaller, working iterations.

- [Test-Driven Development](https://jhall.io/archive/2021/03/02/how-i-learned-tdd-the-hard-way/). I know you’re tired of hearing about this one. But it’s definitely true that it helps with small iterations. When doing proper TDD, you write a small test, then the code to make the test pass, then you refactor. This entire cycle takes anywhere from 30 seconds to, at most, 5 minutes. And at the end of every cycle you have code that works, and can be committed, and even made into a pull request.
- [The Mikado Method](https://jhall.io/archive/2021/05/05/the-mikado-method/). If you don’t like TDD, try this one. It’s a simple visualization tool and technique to break down your work into individual, stand-alone parts. Not long ago I interviewed the author of the book on the topic on my podcast. [Have a listen]https://share.transistor.fm/s/06576a5f).
- [Test && commit || revert](https://medium.com/@kentbeck_7670/test-commit-revert-870bbd756864) TCR is kind of a trimmed-down version of part of the Mikado Method. It’s kind of like TDD in reverse. In a nutshell: Make a small change. Test it. If it works, commit, if it breaks, revert it and try again to make a smaller change that _does_ work.

What is _your_ preferred method to slice your work into smaller pieces?

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Day 522 : West Coast
Tags: hiphop, code, coding, lifelongdev
Published: 2022-02-02 23:29:27

_liner notes_:
- Professional : Had a very good but tiring day. Had a meeting in the morning with some of the top top people in the company to demo the application that I helped build for the past 2 weeks. My partner did all the demoing since it's more of their domain and I was just helping out. Good news is that everything worked and hand a bunch of questions and everyone seemed really interested in moving forward with the proof of concept we made. I also got some more support to work on another project I suggested late last year so that was cool. Had a couple of more meetings, did another demo of the application. I even got invited to do a Meet Up in California in the future. They were saying virtually, but I want to wait till I can visit the West Coast! haha. So with the demo application basically done, I returned to the other projects and tasks I'm working on, like creating some content for our documentation for some new features that were released.

- Personal : Last night, I went ahead and purchased the domain for the new project. Did some research to make sure what I wanted to do could be done. Also did a quick mock up of the different pages and listed the different capabilities of each. I set up a Firebase project and initialized the different products I would need like authentication, Firestore, hosting, etc Also figured out the technologies I wanted to use. I think I'm going to roll with what I've been using lately: Astro for the framework and Svelte for the components. I'm also going to make some Web Components so each part is responsible for its own functionality and I can just drop them into the application. Should allow me to put together the project quicker, we'll see. Ended the night watching a couple of "Demon Slayer" episodes.


![Photo of a sand dune in Canary Islands, Spain under an orange/purple/blue sunsetting sky](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iizzdy7443lhh2wuh4mh.jpg)

So I'm thinking I going to start building out the admin section of my new side project. Going to work on authentication and hooking it up to Firestore so I can start saving data. Good news is that it will be pretty identical to what I've done on other recent applications. Hoping to get that done tonight. Also, last Friday, the computer I use primarily for the radio show and the Sunday study group let me know that I can upgrade to Windows 11. There was no way I was going to do it before I had my events on the weekend. haha I'll probably do that while I'm getting ready for the night. I also want to try and get in a couple of "Demon Slayer" episodes. I ordered a longer USB-C cable so I can be more comfortable when hooking up my phone to the projector to be able to show the anime from the app. It's getting dark. Can't wait till the time changes again! 

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube W99dMDvJtuY %}
First week in Manhattan 
Tags: webdev, beginners, codenewbie
Published: 2022-02-02 23:22:18

I've just started at Flatiron school at the New York campus, after relocating from my hometown of Jackson, Mississippi. I'm loving the pace of the program and really enjoying meeting all my fellow classmates. The programming has been a challenge but I think I'm starting to get the hang of it. More to come as i continue to progress on my coding journey!