teleren/devto huggingface dataset:
HackerRank Series #1: Simple Array Sum
Tags: javascript, algorithms, beginners
Published: 2022-07-05 14:13:19

Problem Statement
Given an array of integers, find the sum of its elements.

For example, if the array $ar = [1,2,3], 1+2+3 =6, so return 6.

Function Description
Complete the simpleArraySum function in the editor below. It must return the sum of the array elements as an integer.

simpleArraySum has the following parameter(s):

ar: an array of integers
`Sample Input : 1 2 3 4 10 11
Sample Output : 31`

Explanation
In our text editor on HackerRank, we already have the simpleArraySum() function declared with the parameter $ar which can be any given array. All you need to do is write a set of instructions in the function that will calculate the sum of all array elements so whenever the function is called, it can calculate the sum of the array elements of any simple array.
For example in our Sample Input [1, 2, 3, 4, 10, 11], we expect an output of 31 seeing 1 +2+ 3+ 4 +10 +11 = 31.

**Solution**
A loop will work fine!

Psuedocodes
Let's try to solve this problem without using codes.

Initialize sum to 0.
Loop through the array and get the array elements and add the value to sum.
At each loop sum is updated with the latest sum value after the previous array element has been added.
After the loop, return sum.
Now, let's go coding!

I will be using the for method in Javascript  through the array and solve this problem. 
Now, we can write the Javascript code as follows:

```
function simpleArraySum(ar) {

   let sum=0;
   for( let i=0;  i<ar.length;  i++ ){
       sum+=ar[i];
   }
    return sum;
}
```
Conclusion
This would return an output of the sum of the array as a single integer. When using the for method, we are fetching the array elements based on their index so be careful not to do i<=ar.length; in your condition statement. Avoid this common error because an array starts at index [0].

Congratulations!🎉🎈 You completed your first warmup challenge on HackerRank.
Object.freeze( ) in JavaScript
Tags: javascript, beginners, learning
Published: 2022-07-05 14:54:36

In the JavaScript world we already know how the classes and objects are important. Among the Object constructor methods, the Object.freeze() method helps to freeze an object or arrays. Freezing an object does not allow to change any properties from the object. It returns the passed object and does not create a frozen copy. 

Frozen object can be prevents from:
- Adding new properties to the object.
- Removing or altering existing properties from the object.
- Preserves the enumerability, configurability, writability and the prototype of the object
- Changing values of the existing object properties and prototype.

The syntax is:

```
Object.freeze(obj)
```
where the obj is the object which has to be freezed.

Example:
```
Input : const obj = { name: 'initial_name'};
        const newObj = Object.freeze(obj);
        newObj.name = 'new_name';
        console.log(newObj.name);

Output : "initial_name"
```
picoCTF 2022 ~basic-mod1 writeup~
Tags: security, ctf, python
Published: 2022-07-05 14:51:20

# Description

>We found this weird message being passed around on the servers, we think we have a working decryption scheme. Download the message here. Take each number mod 37 and map it to the following character set: 0-25 is the alphabet (uppercase), 26-35 are the decimal digits, and 36 is an underscore. Wrap your decrypted message in the picoCTF flag format (i.e. picoCTF{decrypted_message})

# Solution
The description shows the encryption with the following rules.
<!---descriptionを読むと，下のようなルールで暗号化されていることがわかります．-->

```
A: 0
B: 1
C: 2
D: 3
E: 4
F: 5
G: 6
H: 7
I: 8
J: 9
K: 10
L: 11
M: 12
N: 13
O: 14
P: 15
Q: 16
R: 17
S: 18
T: 19
U: 20
V: 21
W: 22
X: 23
Y: 24
Z: 25
0: 26
1: 27
2: 28
3: 29
4: 30
5: 31
6: 32
7: 33
8: 34
9: 35
_: 36
```
Read `message.txt` and calculate mod 37.
<!---message.txtを読み込んでmod 37を計算しましょう．プログラムを書くほどのことでもないですが，一応書きました．-->

```python
def decode(number):
    r = number % 37
    return r

def main():
    f = open("message.txt", "r", encoding="UTF-8")
    lst = f.read().split()
    # print(lst[0])
    
    dec_lst = []

    for i in range(len(lst)):
        dec_lst.append(decode(int(lst[i])))
        
    print(dec_lst)
    
if __name__ == '__main__':
    main()
```

All that remains is to decrypt the file according to the rules above.
<!---後は上のルールに従って復号するだけです．-->

```
[17, 26, 20, 13, 3, 36, 13, 36, 17, 26, 20, 13, 3, 36, 1, 32, 1, 28, 31, 31, 29, 27]
→ [R, 0, U, N, D, _, N, _, R, 0, U, N, D, _, B, 6, B, 2, 5, 5, 3, 1]
```


The flag is `R0UND_N_R0UND_B6B25531`. Enclose it in picoCTF{} and submit it.

<!---フラグはR0UND_N_R0UND_C0A86577ですね．これをpicoCTF{}で囲んであとはサブミットです．-->
Beginner's HTML
Tags: fliptotech, iveflippedtotech
Published: 2022-07-05 14:50:24

OlamideDZ
I’ve flipped to tech with fliptotech Team (fliptotech.ng)
HTML is Hypertext Markup Language, coded language for displaying materials gotten from the internet. Html  tags are fundamental of any website.

Basic html tags:
<html>
<doctype html>instructs the web browser of the exact version
<lang=”en”>
<head>
<body>
     <h1>This is the main heading tag in html. It is the boldest. It also indicate title on web</h1>
     <h2>Main heading</h2>
     <h3>Main heading</h3>
     <h4>Main heading</h4>
     <h5>Main heading</h5>
     <h6>Main heading</h6>
<p1>Paragraph, This might be an introduction to the rest of the page and can split up into several sub-heading in a long page</p1>
<h2>Another sub-heading</h2>
<p2>Another paragraph, some long articles have more sub-headings to help follow up on what is written</p2>
<h3>Another subheading</h3>
<p3>Another paragraph</p3>
<img”em.jpg”>

 

This training was conducted by the Flip to Tech Team (fliptotech.ng)
#fliptotech
#flippedtotech
Edited by Rasheedat Olabunmi (twitter.com/rasheedahoba)
To --api or not to --api?
Tags: rails, webdev, api
Published: 2022-07-05 14:44:53

Getting started on setting up a Rails project from scratch and stumble on *rails new my_api --api* and wonder what exactly the *--api* flag does? This post will investigate the differences and summarize the main uses for including or not including this tag when starting a Rails project.

## Including *--api* flag will:
* Configure your application to start with a more limited set of middleware than normal. It will not include any middleware primarily useful for browser applications (like cookies support) by default.
* Make __ApplicationController__ inherit from __ActionController::API__ instead of __ActionController::Base__. As with middleware, this will leave out any Action Controller modules that provide functionalities primarily used by browser applications.
* Configure the generators to skip generating views, helpers, and assets when you generate a new resource.

Including this tag is ideal for API only applications. by default it omits features that are usually required for browser access; layouts and templates rendering, flash, assets, and more. If any of that functionality ends up being needed later on in the project, it can be added back in. This is done by simply changing __ApplicationController__ to inherit from __ActionController::Base__ instead of __ActionController::API__ and then you can add in the desired middlewares. Vice versa can be done if you start without the -api tag and determine to only need API functions. For more options that can be useful with crating a new Rails API, run: __rails new --help__ 

Sources:
[Rails API Docs](https://api.rubyonrails.org/classes/ActionController/API.html)
[Rails Guides](https://guides.rubyonrails.org/api_app.html)
[Rails::API Github](https://github.com/rails-api/rails-api)
TIL: Visual Studio Code does markdown autocompletion for in-page links
Tags: visualstudiocode, markdown, tip
Published: 2022-07-05 14:38:10

---
title: TIL: Visual Studio Code does markdown autocompletion for in-page links
published: true
description: Visual Studio Code makes it easy to link to targets in the document by offering autocompletion.
tags: visualstudiocode,markdown,tip
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4gc17ik4ehrs1jyz1g5.png
# Use a ratio of 100:42 for best results.
canonical_url: https://christianheilmann.com/2022/07/05/til-visual-studio-code-does-autocompletion-in-markdown-for-auto-generated-targets-of-headlines/
---

When you write markdown files, headings automatically also get an ID generated so they become in-page targets to link to. This is also used to create a  table of contents in various publishing systems. 

This means

```
## Side effects of 24 hour compound V
```

becomes

```
<h2 id="side-effects-of-24-hour-compound-V">
  Side effects of 24 hour compound V
</h2>
```

Today I learned that VS Code also offers these generated IDs as an autocomplete when you type links. If you wrap the word you want to link in square brackets and you add the parenthesis to type the target the link should point to starting this one with a # will offer all the possible target IDs in the current document.

![Visual Studio Code offering a list of all the generated IDs of headings for in-page links](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sv1v93yly9itxxg4rytn.gif)

Neat!
Why Data Science?
Published: 2022-07-05 14:33:51

For as long as I can remember I've been baffled by some of the things people do and why they do them. 

Whether we're talking about the latest adventures of the fabled "Florida Man" covered by the local news or the latest trend of consumer spending on luxury goods in a report published by the Fed, I have always loved taking a second to try and put myself in the shoes of others and figure out what motivates them or in some cases, why they seemingly have no logical explanation for their actions.

To me, data science represents the ability to explain actions with something more concrete than highly theoretical  behavior psychological explanations that I've read about in books or my own (often) woefully inadequate attempts to intuit some explanation for the behavior of the masses as well as a way to apply statistics to solve problems I never imagined was possible.

Data science as the intersection of the theoretical and the practical represents endless possibilities to me, and in studying it I have discovered a hunger within myself to learn and grow that I have not felt for years.
React: Introduction to useEffect hook
Tags: webdev, javascript, react, reactnative
Published: 2022-07-05 14:33:21

In this article, I'm assuming that you have at least some knowledge of using React and want to explore React Hooks.

## Introduction
**useEffect** is one of the known hooks in React application.  Some call it the **“Effect Hook”**. This hook allows you to perform side effects in functional components. It handles **componentDidMount**, **componentDidUpdate** and **componentWillUnmount** all in one call.

In case you are not familiar with Side Effect. It is any execution that is outside the scope of the function being executed. We will not cover much about side effect in this article.

Examples of side effects are:
- Fetching data
- Manual DOM Manipulation
- Setting up a subscription
- Updating global variables



## Question: When useEffect runs?
By default it usually run after very render. But there are ways to control it. Let's look at how to run code after the component mounts (**componentDidMount**), after it re-renders (**componentDidUpdate**) , and before it unmount (**componentWillUnmount**)


To run it only once after the component has been mounted, you can do it like this.
```
// Make sure to pass an empty array on the second argument
useEffect(() => {
  console.log(‘Component Mounted!’); // This will trigger only once.
}, []);
```


To run it every time a props/state variable changes, you can add an array of variables to the second argument:
```
// Pass a variable to the second argument, and every time that variable changes this useEffect will run.
useEffect(() => {
  console.log(‘Counter’, counter); // This will trigger every time counter state changes.
}, [counter]);
```


If you want to do some cleanup when the component unmount, you can do it like this.
```
useEffect(() => {
    // Run on Component Mount
    const handleAuthorSubscription = author => {
      setAuthor(author);
    }
    API.subscribeToAuthor(userId, handleAuthorSubscriptionChange);

    // Run on Component Unmount
    return () => {
      API.unSubscribeToAuthor(userId, handleAuthorSubscriptionChange);
    };
  }, []);
```
You just need to add a return function to a useEffect callback function, code inside that returned function will get triggered when a component unmount from a DOM. We use this function to do a cleanup just like removing eventListeners, clearInterval, clearTimeout, etc. 

## Things to remember in useEffect
- First argument is a callback function. Inside of it, we can perform any side effect there and set some data in state variables.
- Second Argument: Array contains data, useEffect will get triggered every time any data of that array changes. Passing an empty array will trigger the useEffect after the component has been mounted.

And that is all I wanted to share with you. This is my very first article. Hopefully you find this article helpful in learning some basics of React Hooks. If you have any question or feedback for improvement, feel free to comment you're all welcome.


Thanks for Reading! :)
Data Structure 102: Types of Data Structure
Tags: algorithms, javascript, beginners, tutorial
Published: 2022-07-05 14:31:45

## Introduction
In my previous post [Data Structure 101](https://dev.to/mremeka/data-structures-101-introduction-to-data-structures-and-algorithms-4k5e) we were able to understand what data-structure is and algorithm

On that note, we would be looking at the types of data-structure.
There are two main types of data structures, These includes;

**Primitive Data Structure** - They store the data of only one type. 
Examples of primitive data structure are integer, character, float.

**Non-Primitive Data Structure** - is a type of data structure that can store the data of more than one type. Non primitive data structure are classified into two i.e., linear and non-linear data structure

**LINEAR DATA STRUCTURE**
Elements are stored in a sequential order. Examples; Arrays, Queues, Stacks and Linked Lists.

**NON-LINEAR DATA STRUCTURE**
Elements are not stored in sequential order. Examples; trees and graphs are non-linear data structures.
React project runs fine on macOS, but doesn't on linux.
Tags: react
Published: 2022-07-05 14:25:36

I am working on a react portfolio for a course, and I put my code onto a flash drive and tried to run it on my linux computer. I kept getting errors like 
`> react-redux-router@1.0.0 start`
`> webpack-dev-server --config webpack/dev.config.js --watch`

`sh: webpack-dev-server: permission denied`

I installed the same version of node, and followed every installation process I did on mac. To get it to work I had to create a new project and just import my src files and index file. But when i take that new file and try it on mac, A `sh: webpack-dev-server: command not found` error comes up. Not sure why the same file doesn't work on mac and linux but I would like to fix it.
Free open source Tech Stack 3D Icon Set
Tags: free, figma, icons, webdev
Published: 2022-07-05 13:38:18

Hi everyone,

With the [Dotmind](https://dotmind.io/) team we crafted a free open-source tech stack 3D icon set ! 50+ icons on figma. 🤘 Hope it helps, you can get it here 👇 

[https://www.figma.com/community/file/1126064638619878601](https://www.figma.com/community/file/1126064638619878601
)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5dk9x55j9squ7q1f8q1l.jpg)
A guided tour through Magic and Hyperlambda
Tags: hyperlambda, tutorial, beginners
Published: 2022-07-05 13:37:09

I sat down with Mohsen to teach him some Hyperlambda, such that I hopefully one day soon won't be [the smartest guy in the room](https://dev.to/polterguy/you-should-probably-fire-your-best-software-developer-1ano) anymore ... ;)

(I'm joking, Mohsen is amazing, and he is always looking for ways to simplify things, and he is pulling way beyond what anybody could expect of a software developer)

In case you're wondering about my joke. For me _"being the smartest guy in the room"_ is a curse word, simply because it implies you're in the wrong room ;)

Anyways, so me and Mohsen sat down, [created a cloudlet](https://aista.com?secret=devto), and started pounding at it with some Hyperlambda. Watch the video if you're curious about how we did and what we talked about.

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

Some of the things we talked about was the relationship between C# and Hyperlambda, and we create a C# Hyperlambda slot. Then we went through the basics of how we're persisting files in our Kubernetes cluster, for then to illustrate how literally everything is a function object in Hyperlambda, including files, and how even files can accept arguments as you _"invoke"_ them, and how files can return values to the caller, just as if they were normal function objects.

This way of courageously choosing your axiom, for then to let _everything_ evolve around your axiom of choice, is the primary reasons why all other programming languages are basically garbage as far as I am concerned. If you want to learn C++ for instance, you've got a list of a bajillion things you'll need to learn before you're even capable of understanding its most basic hello world syntax - While in Hyperlambda, I literally teach the entire syntax of the language in the first 2 minutes of the above video.

From my point of view, C++ is like a teapot with airbags, wings, a combustion engine, 15 different security measures to avoid having toxic liquid pour unto your rug, while all you wanted was some freakin' tea ... :/

No wonder software developers are amongst the most depressed professions in the world, besides from (maybe) undertakers ...

Anyways, if you're curious about Hyperlambda, feel free to watch the above video and [follow hands on](https://aista.com?secret=devto) if you wish ...

As to C++ and OOP, [just say no my friend](https://dev.to/polterguy/oop-a-software-development-mass-psychosis-9n4) ... ;)
Make Keyboard ShortCut in Javascript
Tags: javascript, html, webdev
Published: 2022-07-05 13:35:05

Creating a shortcut in javascript with 5 lines of code!
To create a shortcut, we must first listen to the pressing of the keyboard keys on the document
Then specify the keys we want to simplify with an if
Finally, we have to eliminate the normal behavior of that shirt with preventDefault

```
// Listen to keydown event on the document
document.addEventListener("keydown", (e) => {
  if (e.key.toLowerCase() === "s" && e.ctrlKey) {
    // disable the default behavior of the ctrl + s
    e.preventDefault();
    // your code here
    alert("S key pressed with ctrl");
  }
});
```
How to change user password to the weak forcedly on OpenBSD 7.1 (not recommended)
Tags: openbsd, password, passwd, encryption
Published: 2022-07-05 13:29:04

When you try to change user password on [OpenBSD](https://www.openbsd.org/) and it is not strong enough, you will see the error:

```console
$ passwd
Changing password for <youruser>.
Old password:
New password:
Please use a more complicated password.
Please use a different password. Unusual capitalization,
control characters, or digits are suggested.
New password:
```

You had better follow the messages.

> Please use a more complicated password.
> Please use a different password. Unusual capitalization, control characters, or digits are suggested.

However, some might be sometimes unable to do it.

In such a case, what to do is to encrypt new password manually and then apply it as admin also manually.
Here is the way.

First, [`encrypt`](https://man.openbsd.org/encrypt) enables you to get new encrypted password:

```console
$ encrypt
# enter your password
# and encrypted chars will be printed
```

Then, [`vipw`](https://man.openbsd.org/vipw) follows to update the password file. Be very careful to edit it:

```
$ doas vipw
```

Here, search the line on \<youruser\> and rewrite it:

```diff
  (...)
- <youruser>:currentencryptedpassword:(...)
+ <youruser>:newencryptedpassword:(...)
  (...)
```

That's it. Check if you can log in with new password:

```console
$ su <youruser>
Password:
```
Git merge vs Git rebase
Tags: git, devrel
Published: 2022-07-05 13:26:54

Se você procurar sobre qual o melhor a se fazer para manter seus trabalhos atualizados diariamente com o Git, você vai se deparar com git merge versus git rebase.

O que eu pude perceber é que boa parte dos posts falando sobre o assunto seguiam o seguinte workflow:

a) Pegar as novidades da master remota (origin/master)
$ git checkout master
$ git pull --rebase origin master

Obs.: os novos commits locais da master ficariam linearizados

b) Pegar as novidades remotas da sua branch
$ git checkout sua-branch
$ git pull --rebase origin sua-branch

c) Mesclar com rebase a master na sua branch
$ git rebase master

d) Ir comitando e repetindo os passos acima diariamente.
Assim, você vai pegar novidades da master e da sua branch remota.

e) Quando você terminar a funcionalidade/correção, fazer merge da sua branch na master com no-ff pra evitar o fast-forward.
$ git checkout master
$ git merge sua-branch --no-ff

Uma das empresas que propagava esse workflow em seus projetos comerciais era a brasileira Plataformatec comprada pelo Nubank.
Would you call out a developer who is copying your ideas AND design?
Tags: anonymous, discuss, help
Published: 2022-07-05 13:04:26

_This is an anonymous post sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email sloan@dev.to if you'd like to leave an anonymous comment or if you want to ask your own anonymous question._ 

***

I was working on a small project, and it started getting some traction. Another developer DMed me, asking me about how I made the project. I didn’t disclose the information, but they told me that they were “inspired” by my thing, and would update their own product now.

A couple days later, they announced a “Big new” feature on their product. It was a TOTAL ripoff of my thing. Even the design is exactly the same (but worse)! So the person literally copied my entire idea... like literally even the design, when I confronted him in Dms, he was like, it's not that similar like wtf? it's the same... he tried to rip off the same thing and made it worse

In fact, he even copied my twitter bio 💀

And copied the same logic I used for one more feature of my product.
 
That’s ridiculous. You know what’s even more ridiculous? His product now has 5 times as many users as mine. He used my idea, my design.

This is so unfair. But I have no idea what to do about it.

Is it right to call out someone who copied your idea? Because technically anyone can come up with it? I have the complete proof with the messages and everything. Is there something I can do, or should do in this situation? Or just sit around and keep developing my own product in hopes of it also getting popular one day? 

All this happened a month ago. At this point, I honestly don’t care as much because I love my product and I also have a lot of users. But I also know that mine is obviously better (cause he ripped it off) and I’m the one who came up with the original idea.

I’d love some help.