teleren/devto huggingface dataset:
My First PR
Tags: opensource, beginners, github
Published: 2021-09-30 18:41:14

Making your first pull request is definitely daunting. Whether you are taking part in some open source program or not, there are multiple things that go through your mind while making it. This blog is my experience and everything I learnt.

I made my first PR through an open source program, so I was given a basic format in which we had to document everything. Now, I was familiar with putting my personal projects on GitHub, but I had never tried to make a contribution. Making the appropriate documentation/files wasn’t too hard for me, sure I had my doubts on whether it was good enough and I was ‘qualified’ enough to contribute, but with lots of research and my basic knowledge of the topic got me through it somehow.

The part which I procrastinated the most was making the PR. I had this mental block of creating a PR and had somewhere decided that it would be very complicated. As someone who’s still new to open-source, let me tell you, it is not! It is actually one of the easiest parts of contributing (if not the easiest!).

Another huge learning for me was patience. Having worked only on personal projects, I never had to think about others’ views too much. I would ask a few people to review my project once but that was it. When making contributions, we need to consider that it is not our project, we are only fixing a bug or adding something to an entire project of theirs. They may have different expectations from as simple files as README files or the documentation or whatever it is you are contributing to. Something that looks okay to you, may not look so to your mentor/supervisor/maintainer. Instead of taking it negatively, try to understand what they expect and tweak your files accordingly.

Taking part in an open source program has helped me grow a lot, and I would definitely recommend you to try it out! The best part about it is, there is always something you can contribute to. Giving back to a community that has given us so much is such an amazing feeling, made me feel so grateful to everyone who has directly/indirectly helped me. Yes, it is a little scary, but once you make your first PR, there is no going back!
 
Here are a few articles that helped me to understand the process better:

[How to make your first pull request on GitHub](https://www.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github-3/)
[Create Your First GitHub Pull Request](https://www.better.dev/create-your-first-github-pull-request)
[Make your first pull request to an open-source project
](https://dev.to/doctolib/make-your-first-pull-request-to-an-open-source-project-1m57)

I hope this gave you a brief idea on how it is to make your first PR. 

If there are any tips you would like to share, please leave a comment!

Until next time, Happy Coding! :))
Binary Search in other words
Tags: java, programming, coding, binarysearch
Published: 2021-09-30 18:28:22

Imagine yourself holding a flashlight against a list of sorted numbers searching for your lottery number.

Each time you turn on the flashlight it will automatically point to the **middle of the list** and you can't change it.
If at this point you see your lottery number then BOOM! you won the lottery.

Otherwise you need to compare your lottery number with that number in the middle of the list and you will face one of two situations:

Either your number is bigger, then you have to cut the lower part of the list and continue working with the upper part.

Or your number is smaller, then you have to cut the upper part of the list and continue working with the lower part.

Now let's try to translate this to a code (in Java):
```
public static int myLotteryNumber(int[] list, int lotteryNumber) {
        int left = 0;
        int right = list.length - 1;
        while(left <= right){
            int mid = (left + right) / 2;
            if(list[mid] == lotteryNumber)
                return list[mid];
            else if(lotteryNumber > list[mid])
                left = mid + 1; //cut the lower part of the list
            else if(lotteryNumber < list[mid])
                right = mid - 1; //cut the upper part of the list
        }
        return -1;
    }
```
The great thing about this algorithm is that at each iteration you **cut down half of the list** and at the worst case this will cost you ***O(Log n)*** of time complexity and ***O(1)*** of space complexity!
Rails Nested DELETE Button without UJS
Tags: rails, hotwire, ujs, mrujs
Published: 2021-09-30 18:09:47

---
title: Rails Nested DELETE Button without UJS 
published: true
description: 
tags: rails, hotwire, ujs, mrujs
//cover_image: https://direct_url_to_image.jpg
---
Sometimes, when designing a form for your application, you might need both a SAVE and DELETE button within the same form.

You might be tempted to use something like this for the DELETE button:

```erb
<%= button_to "Delete", post_path(@post), method: :delete %>
```

The problem with this approach is that the `button_to` Rails helper will generate this HTML in your form:

```html
<input name="_method" type="hidden" value="delete" />
```

Nested forms aren't supported in HTML, and as a result, even when you click the SAVE button in your form, the hidden input will be sent with the request and the DELETE will be executed. Not good.

If you're using the Rails Unobtrusive JavaScript adapter (UJS), included starting with Rails 5.1, it's common to implement your DELETE button like this:

```erb
<%= link_to "Delete", post, method: :delete, data: { confirm: "Are you sure?" } %>
```

This relies on some javascript provided by UJS which intercepts the request and handles it for you.

Rails 7 doesn't include UJS, and if you're using Hotwire, you might have removed it. So, what to do?

One option is to separate the DELETE button's `<label>` and `<button>` tags so that the label is inside the form as desired for your layout, but the button is outside of it so that the SAVE and DELETE actions are no longer in nested forms, like this:

```erb
<%= form_with(model: post) do |form| %>
  <!-- other form fields and stuff -->
  <%= form.submit "Save" %>
  <label for="delete">Delete</label>
<% end %>

<%= button_to "", post_path(post), :method => 'delete', id: 'delete' %>
```
Finally, I suggest checking out `mrujs`. It bills itself as "Modern Ruby UJS" and replaces the functionality of UJS while co-existing with newer Rails libraries like Turbo. Install it, and you're back to being able to use the `link_to` UJS example above, as well as the other goodies provided by UJS, like `data-disable-with`, etc.

Some of this functionality seems to be on the Turbo roadmap, so we'll see how things develop in future releases.

Good luck!
Hacktoberfest 2021
Tags: android, flutter, hacktoberfest, github
Published: 2021-09-30 18:04:01

Dear Developers and Open Source Enthusiasts

#Hacktoberfest 2021 has officially started and this time I'm participating as a #Maintainer. For this I'm open-sourcing two of my personal projects, one in #Flutter and other in #Android (Kotlin).

You can contribute by:
-> Providing fixes to the issues opened in the "Issues" tab of the repo.
-> Improving the code with best practices and design patterns.

Before starting, make sure you register for the #Hacktoberfest event so that you can win some really cool #swags by submitting your Pull Requests.

Register Here: https://lnkd.in/eGQqiEEW
Flutter Repository: https://lnkd.in/e_5pN5aK
Android Repository: https://lnkd.in/e-B7ijtF
I Design, You Build! - Frontend Challenge #2
Tags: idesignyoubuild, webdev, beginners, javascript
Published: 2021-09-30 18:01:40

## Appreciation
What an overwhelming response from the first challenge! I really enjoy seeing every submission, and appreciate every feedback given. If you haven't give the challenge a try, I **strongly encourage** you to join us in this fun challenge! 🤩✨

I know everyone is in different level of HTML/CSS/Javascript, but don't worry, I will try to mix in different difficulties in the coming challenge, so stay tuned! 🔔

***

## Challenge
I have a confession to make, I'm kinda obsessed with Gradient Blob recently. If you check out my [website](https://www.zernonia.com/), you will know what I meant.

So, in this challenge, we will be creating an awesome **Gradient Blob and Text** Website for a web application. Create a homepage following the design. Fulfill Target and/or Extra below:

Target:
- 🎯 Target : User can see the similar design
- 🎯 Target : Responsive design
- 🎯 Target : Gradient text
- 🎯 Target : Gradient background (gradient blob)
- 🎯 Target : On mobile, when I select the hamburger menu, I can see a navigation (use your own creativity)


Extra:
- 🌟 Extra : Add animation to the Gradient blob
- 🌟 Extra : Add animation to the image

Resources:
- 📃 Icon : https://icones.js.org/collection/all
- 📃 Hosting: https://vercel.com/ 

> ⚠ It will defeat the purpose of learning if you just copy and paste someone else's answer 😭!


***

## Start Coding! 

If you are ready to take on the challenge, then

0. Help 💖 this design on [Dribbble](https://dribbble.com/shots/16561170-UNX-Slick-Gradient-Landing-Page), and follow me! Please... 😳
1. Bookmark this post so that you can submit it easier.
2. **Right-click** [here](https://www.figma.com/file/nJMqfSZI2HZGjWHWV4jCnG/UNX-Slick-App?node-id=0%3A1) and open **Open link in a New Tab** to see the Figma Design.
3. Enjoy coding! 🤩
4. Come back to submit!

> All the **images** and **assets** are free to use, and can be exported from the Figma Design.

[![Zernonia Frontend Challenge #2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v42ksciemobwm90rp2xj.png)](https://www.figma.com/file/nJMqfSZI2HZGjWHWV4jCnG/UNX-Slick-App?node-id=0%3A1)



***

## Submission

Once you've completed, come back to this post, and submit your solution using the following `template` in the comment section. You are encouraged to **comment** and **upvotes** other's answer!

Thank you!💘

```
Feedback: This is awesome!

Demo: <url>
Github: <url>
Tech-Stack: Vue, TailwindCSS
Learning Outcome: 
  1. 
  2.

```

***

## Why?

I share these design freely so that anyone who wanted to practice or challenge Web design be able to do so without paying other platform (*ahem) to get their **Figma Design**🎨 file. 

You are free to use the Design you've created in your portfolio. No copyright claims or anything.

But if you are loving my work, you are most welcomed to follow me on `Dev.to` and [Twitter](https://twitter.com/zernonia) 😄

### Thank you for your time and attention! Hope you'll enjoy!
Diving Deeper into Technologies
Tags: javascript, html, css, webdev
Published: 2021-09-30 17:44:00

---
title: Diving Deeper into Technologies 
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---


I am going to get back into updating more regularly on here again. A lot of distractions have occurred that have taken time away from my focus. However it doesn't matter because now I will be getting back on track and excited to dive deeper in learning other technologies outside of web development HTML/CSS/JavaScript to keep things interesting. 

I will be finishing up my data structure and algorithms course from where I left off of singly linked list. 

Starting now from doubly linked list and moving forward. 

Also, I took some time away from my web development to earn my security+ certification.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm6mvgob3vhnoapbshty.png)

Here is to an active and fun rest of 2021 and busy 2022!
100 algos in 100 days (Day 17)
Published: 2021-09-30 17:12:57

Today I will look at more binary search questions updating this blog as I go! 

I got confused halfway through so watched this video:
[How to look for duplicates - space constraint](https://www.youtube.com/watch?v=aMsSF1Il3IY&t=489s)
It gave a great tip. To save on space you can make an element negative (or flip in another way) in an array to show that you have seen that index.

##Question:
###Find the duplicated Integers
###The integers are in the range 1...n
###The array has a length of n+1


- First spot is that n = length -1 and is the highest possible value
- When you optimise this one for space you need to look for which half of the possible range has more numbers in it.
- Always when ceiling and floor converge then it is probably time to do something

##Question 2 of the day:
###Sort scores
```
const unsortedScores = [37, 89, 41, 65, 91, 53];
const HIGHEST_POSSIBLE_SCORE = 100;

sortScores(unsortedScores, HIGHEST_POSSIBLE_SCORE);
// returns [91, 89, 65, 53, 41, 37]
```
### How can we do this quicker than O(n lg(n))


- First tip was to make an array with all of indexes 0...HighestPossible
- Then we add to a sorted array when there is a value in there

It seems to be all about building a toolkit of algos to solve any problem
100 algos in 100 days (Day 16)
Published: 2021-09-30 17:09:32

This was a tuesday dedicated to Binary search. 

I watched videos and (re)learnt the common iterative implementation of this.

```
export const iterativeFunction = function (arr, x) {

    let start = 0, end = arr.length - 1;

    // Iterate while start not meets end
    while (start <= end) {
        let mid = Math.floor((start + end) / 2);

        if (arr[mid] === x) return true;

        // Else look in left or right half accordingly
        if (arr[mid] < x)
            start = mid + 1;
        else
            end = mid - 1;
    }

    return false;
}
```
Then did the practice question on find the rotation point of a partially sorted dictionary.
Learning points being:
1. Data only needs to be partially sorted to use binary search
2. If it is not sorted numbers you might have to look for a pattern or compare other indexes that you know. For example, the first and last.
Parallel updates
Tags: opensource, cpp
Published: 2021-09-30 17:07:56

This week's lab we were given the task of using different branches to add separate features to our SSG. Once these features were implemented in their individual branch we were to merge them together and deal with any merge conflicts we had. Thankfully for me I had plenty of experience with dealing with merge conflicts due to the struggles I had with last week's task.

I decided the two features I wanted to add were things related to the markdown functionality of my SSG. I added [support for inline code using the \` syntax](https://github.com/joshuali7536/LennahSSG/issues/13) and I also added [support for the horizontal rule "---" syntax](https://github.com/joshuali7536/LennahSSG/issues/14). Thanks to my classmate Gus, it was really easy to augment the existing code to add new features to the markdown support. All I had to do was add some if statements in the markdown handler section of the file reader to check for \` and --- then I just needed to add a new function for inline code generation. You can find the changes for the inline code implementation [here](https://github.com/joshuali7536/LennahSSG/commit/ce8f1dbbe1a5ee9ff824447f252d2b05fcddbd76) and the horizontal rule implementation [here](https://github.com/joshuali7536/LennahSSG/commit/5d4b2a5d9d50fcd49e5d7800fcaa6f0b4f43ccb5).

When I started to merge the different branches together the first one was merged with the main branch no problem. However, when I tried to merge the second one I got into some merge conflict issues. This is where I learned that Visual Studio automatically sensed what I was trying to do and gave me a cool merge conflict solver. It allowed me to choose what conflicting code blocks I wanted to stay in the merged version; just by clicking a checkbox next to it, and also directly change code line by line if I wanted. That made fixing the conflicts incredibly easy to do. Then from there I [merged and pushed my changes](https://github.com/joshuali7536/LennahSSG/commit/ca45d34) from both branches onto my main branch with no issues. In that merge you can also see the two parent commits as well:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aanje3vnhtdhxurwzdds.png)
This lab went pretty smoothly thanks to Gus' initial implementation of the markdown support. The code was kept pretty simple and not many changes were needed to implement new features. There wasn't much I think I would have done differently to be honest, the merge conflict was something I think would always happen because they are separate branches working on the same file. Thus I think everything went perfectly.

This was a nice lab that helped me understand the process of making different features in parallel and then merging them at the same time. I also got to learn about the merge conflict feature in Visual Studio, which was really neat. I only ever worked with Git using Visual Studio Code for web development so I'm really happy I'm learning to use Git with C++. Anyways thanks for reading! Take care!
Working with Branch and Merge
Tags: beginners, opensource, devops, javascript
Published: 2021-09-30 16:47:11

This week I have to add another two features in [my program](https://github.com/tcvan0707/txt2html), which is [inline code block](https://github.com/tcvan0707/txt2html/issues/9) and [horizontal rule](https://github.com/tcvan0707/txt2html/issues/10). To be honest, I am able to know Git can do so many things out there, working with multiple branches in parallel is an example of this week.

Speaking of the **inline code block**, I simply added another regex inside my `splitInParagraphs` function, which finds the text enclosed with **backtick** and then converting it to `<code>..text..</code>`. Thanks to my previous lab, I already had the idea of adding new features inside my program later one. I also use another regex to support converting `---` to `<hr>` tag.

When I satisfy and try to test my program, everything works perfectly as I expect, then merging into my **main** branch. At first, the [inline code block](https://github.com/tcvan0707/txt2html/commit/38691bbb06b93234433cd587414245600c663f37) was merged smoothly with a `fast-forward`. However, when I merged the [horizontal rule](https://github.com/tcvan0707/txt2html/commit/5319fb423a31733039cdc7377a92ea912fd48f47), it caused conflict because I modified the file for the second time with different issue, the content of the file is newer so it did not allow me to merge at that time. ![Conflict](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34ylct4ppi8f5ds721fk.JPG)
Thankfully, *VSCode* is really amazing, it detects my problem, and it shows some options I could do, which is **Compare** or **Overwrite**. I try both option in order to know the reason why I could not merge my second branch. I fix it by overwriting on my current file, and the [branch](https://github.com/tcvan0707/txt2html/commit/5319fb423a31733039cdc7377a92ea912fd48f47) is merged successfully.

This lab gives me a chance to practice with **merge conflicts**, and I am able to know what to do when I face the same problem again.
API REST nodejs, express, mongo con 2 comandos.
Tags: mongodb, node, programming
Published: 2021-09-30 13:20:47

## Introducción 
[SuperApiBoost](https://www.npmjs.com/package/superapiboost) es un cliente con dos comandos para generar una API REST NodeJS con lenguaje TypeScript usando express para las peticiones y mongoose para base de datos.

## Instalación 
```bash
npm i -g superapiboost
```

## Nuevo proyecto
```bash
sabo new -n=[NOMBRE]
```
Este generará la siguiente estructura: 
```
📦API
 ┣ 📂node_modules
 ┣ 📂src
 ┃ ┣ 📂api
 ┃ ┃ ┣ 📂routes
 ┃ ┃ ┗ 📜index.ts
 ┃ ┣ 📂controllers
 ┃ ┃ ┗ 📜mongoBasic.ts #Basic CRUD Methods
 ┃ ┣ 📂interfaces
 ┃ ┣ 📂tools #transversal functions in the project
 ┃ ┃ ┗ 📜validateType.ts
 ┃ ┣ 📜app.ts
 ┃ ┣ 📜config.ts
 ┃ ┗ 📜mongo.ts
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┗ 📜tsconfig.json
```
Antes de arrancar el proyecto se debe agregar el uri de mongo en el archivo config.ts

y despues ejecutar 
```bash
npm start
```

## Crear las rutas y controladores:
Para crear las rutas y controladores se debe crear un archivo .json con la siguiente estructura: 

```json
{
  "name":{
    "type":"string",
    "required":true,
    "default":"'Andy'"
  },
  "cellphone":{
    "type":"number",
    "required":false
  },
  "isValid":{
    "type":"boolean",
    "required":true,
    "default":"true"
  }
}
```
Y se debe ejecutar el siguiente comando para generar la ruta y controladores:

```bash
sabo generate -n=User -p="C:\models\user.json"
```

Arrancamos el proyecto con 

```bash
npm start
```

Y ya se puede consumir el api rest desde cualquier cliente.

### Create
![Create](https://imgur.com/v6PeTDW.png)
### Update
![Update](https://imgur.com/UNwr1B2.png)
### Delete
![Delete](https://imgur.com/fLaQuIZ.png)
### GetAll
![GetAll](https://imgur.com/m4R3fGs.png)
### GetById
![GetById](https://imgur.com/tn3oDRx.png)
How to Disable Copy Paste in Blogger Website
Tags: website, javascript
Published: 2021-09-30 15:56:51

This tutorial explains the process to disable the Copy and Paste of Website, either of WordPress or Blogger. It is useful for those who log on their each each time they want to make a change to their website and they need to be able to make changes. A short tutorial of how you can <a href="https://www.blogtriggers.com/2021/04/how-to-protect-your-content-in-blogger.html">disable copy and paste in blogger website</a>

Step1) First of all Visit Blogger.com

Step2) Now In Blogger Dashboard go to the theme section 

Step3) Now Find `</body> tag` and paste this script code before the `</body> tag`.
```
<script>
        // Code Developed by BlogTriggers Team members
        window.onload = function() {
            document.addEventListener("contextmenu", function(e) {
                e.preventDefault();
            }, false);

            function disabledEvent(e) {
                if (e.stopPropagation) {
                    e.stopPropagation();
                } else if (window.event) {
                    window.event.cancelBubble = true;
                }
                e.preventDefault();
                return false;
            }
        };
        document.onkeydown = function(e) {
            return false;
        }
        navigator.keyboard.lock();
    </script>
```
Step4) Now Save the Template.

Congratulation you have successfully protect your content in blogger website
Tales From My Terminal: V0.1
Tags: 100daysofcode, writing, devjournal
Published: 2021-09-30 15:24:05

This is a collection of my thoughts and discoveries as I learn software development.

Welcome to my first post! This is only the beginning of what I know will be a very long journey as document learning software development. I began this journey but following Youtube tutorials centered (margin: 0 auto haha) around HTML, CSS, and JavaScript. I've learned that HTML gives you the structure, CSS make the structure more visually appealing and Javascript allows for user interactivity. After a few months of this approach I felt I was ready to learn and add something new to my toolkit. So I chose React!

I will let you know how that unfolds. If you have any advice on how to become a great software engineer I would love to hear from you. 

Respectfully,

Sean Hughes
The Hypebeast Developer

exit