teleren/devto huggingface dataset:
Understanding Sorting Algorithms -  Javascript
Tags: javascript, selectionsort
Published: 2021-11-02 22:34:27

QUICKSORT
The first step is to find a pivot, and once this is picked, the array is divided in 2 sub arrays, one of them with the values less than the pivot value and the other other with values more than the pivot value, and this would be sorted by using the quicksort algorithm recursively
It has a complexity of O(n log(n)) so it's more efficient than the others

function quickSort(arr){
//its important to have a base case when it's a recursion
if(arr<=1){
  return arr
}
  let pivot = arr[arr.length-1]
  left=[]
  right=[]
  for(let i=0;i<arr.length-1;i++){
    if(arr[i]<pivot){
      left.push(arr[i])
    }else{
      right.push(arr[i])
    }
  }
  
  return [...quickSort(left),pivot,...quickSort(right)]
}


SELECTION SORT
Selects the minimum value in the list and swaps it with the first element of the list, it continues to do this until the list is sorted.
The idea to implement this algorithm is to sort through the whole list, and in an inner loop sort to find the index of the min number, so once we have this we can swap this number with the first one of that inner loop.

It's important to mention that this is not the most efficient algorithm, since it has an O complexity of O(n^2)
 
function sortSel(arr){
 for(let i=0;i<arr.length-1;i++){
   let minIndex=i
   for(let j=i+1;j<arr.length;j++){
      //if the min num changes then the index updates
     if(arr[j]<arr[minIndex]){
         minIndex=j
     }
   }

   temp=arr[i]
   arr[i]=arr[minIndex]
   arr[minIndex]=arr[i]
 }

return arr

}
Slimbook pro x AMD vs. MacBook Air M1, which to choose and why?
Tags: watercooler, webdev, hardware, productivity
Published: 2021-11-02 22:30:32

I am comparing two laptops for web developer. I don't need much storage as it'll be used mainly as working computer. So the focus is other performance. 

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

## [Slimbook pro x AMD (Linux)] (https://slimbook.es/en/pro-x-en)
- AMD Ryzen 7 4800 H with 8 cores and 16 threads 8M cache 2.9 GHz Turbo 4.2 GHz
- AMD Radeon ™ Graphics Vega 7 1600 MHz Compatible with 5.5 kernels
- Display: 14 inches FullHD IPS LED high definition and high color range True Color cover 100% sRGB - 300 nits
- Keyboard: backlight
- Material: Aluminium
- USB 3.0 Ports: 2
- USB-C Ports: 1
- USB 2.0 Ports: 1
- HDMI Ports: 1
- RJ45 Ports: 1
- RAM: 32GB 2 non-soldered DDR4 slots 3200 Mhz
- SSD: 250GB SSD NVMe
- price: 1,169.00 EUR | 1,353.88 USD

## [Tuxedo Pulse 14](https://www.tuxedocomputers.com/en/Linux-Hardware/Linux-Notebooks/10-14-inch/TUXEDO-Pulse-14-Gen1.tuxedo#!#configurator)
Have almost exact the same with Slimbook pro above, just color is dark gray and is a bit ugly....
- price: 1,090.00 EUR | 1,261.87 USD

## [Apple M1 Chip with 8-Core CPU and 8-Core GPU 512GB Storage](https://www.apple.com/shop/buy-mac/macbook-air)
- Apple M1 chip with 8‑core CPU, 8‑core GPU, and 16‑core Neural Engine
- 8GB unified memory
- 512GB SSD storage¹
- Retina display with True Tone
- Magic Keyboard
- Touch ID
- Force Touch trackpad
- Two Thunderbolt / USB 4 ports
- price: 1 078,50 EUR | 1,249.00 USD

Which one would you choose and why?
Earn a free Microsoft Certification exam
Tags: cloudskillschallenge, proudtobecertified, msignite
Published: 2021-11-02 22:29:57

Microsoft's Cloud Skills Challenge 2021 is back! Take advantage of the opportunity to get a FREE Certification

Here's a breakdown:
1. [Click here]
(https://csc.docs.microsoft.com/ignite/registration/fall2021?wt.mc_id=cloudskillschallenge_ignite21falleml2_email_cnl)
2. Microsoft Learn gives you challenges to study via prescribed modules.
3. Complete one #challenge and earn a free Microsoft Certification exam

#CloudSkillsChallenge #ProudToBeCertified #MSIgnite
How to Enable and Disable Debug Mode in Laravel
Tags: laravel, beginners, tutorial, webdev
Published: 2021-11-02 22:12:36

Debugging is a helpful feature for developers to identify the causes of issues. Most of the modern application frameworks provide you the option to enable debug mode including Laravel. It is a good idea to keep enabling debug mode in your development environment. In your production environment, this value should always be false.

##What is debug mode in Laravel?
When your application is in debug mode, detailed error messages with stack traces will be shown on every error that occurs within your application. If disabled, a simple generic error page is shown.

In this blog, you will learn how to enable and disable debug mode in Laravel. Having a debug mode is very important in order to show errors during local development.

###Enable Debug
Laravel provides APP_DEBUG flag in .env file to handle application debug mode, default it true and when you change to false it means you are disabling debug mode.

Search APP_DEBUG key in .env file and change true to enable debug mode and false for disable debug mode.
```
APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=single
```
###Disable Debug
Set the APP_DEBUG environment variable value to false in the .env environment configuration file.
```
APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=false
APP_URL=http://localhost

LOG_CHANNEL=single
```
###Enable or disable debug mode using app.php
Open the app.php file located in your config/app.php laravel project. Search for debug key and change true to enable debug mode and false for disabling debug mode default it will show false.
```
'debug' => env('APP_DEBUG', false),
```
###Enable Debug
```
'debug' => env('APP_DEBUG', true),
```
###Disable Debug
```
'debug' => env('APP_DEBUG', false),
```
Thank you for reading this blog.
Um post para todos.
Tags: beginners, tip, braziliandevs, webdev
Published: 2021-11-02 22:08:46

Olá pessoal, tudo bem com vcs ?!

Este meu primeiro post que estou escrevendo para compartilhar um pouco de conhecimento e que de alguma maneira possa ajudar também com que irei compartilhar que são conteúdos que realmente me ajudou na minha caminhada para a aprender programação web ou seja HTML, CSS e JavaScript e que no momento está me ajudando nos meus estudos em relação ao Desenvolvimento web. 

Então vamos para os conteúdos que separei que possam contribuir para ajudá-lo nos estudos de Programação Web.

Não é fácil se organizar e ter uma estrutura já pronta é difícil e o direcionamento ainda mais devido ao excesso de informação. Mas importante é seguir um passo para ter uma boa base sólida.

Então vamos lá aos conteúdos que separei para tentar ajudar um pouco:

Primeiro: O FreeCodeCamp - Uma plataforma muito legal que tem uma infraestrutura para codificar. Muito bom para aprender HTML e CSS, entrando no site inicie o Módulo Responsive Web Design para ajudar você entender os conceitos base do HTML e CSS não precisa fazer até o Responsive Web Design Projects. 
Link: https://www.freecodecamp.org/learn/responsive-web-design/

Segundo: Tente fazer Sololearn de HTML e CSS são disponibilizados via o aplicativo do Sololearn e o próprio site web também, ajuda em muito novamente no entender do HTML e CSS.
Link: https://www.sololearn.com/home

Terceiro: Tente esta que vai ajudar muito mesmo e que eu recomendo que é o  Discover da Rocketseat - A Rocketseat que é uma plataforma de educação em tecnologia, somos uma comunidade incrível de programadores em busca do próximo nível. Eles ajudam a ter uma base bem sólida que vai te ajudar. Aprenda muito lá a base vale a pena. 
Link: https://www.rocketseat.com.br/

Quarto: Como a última para poder te ajudar a ter uma ideia de como continuar sua caminhada e conseguir ter planejamento de estudo diário em relação à prática do desenvolvimento web. Recomendo vocês assistirem estes três vídeos nestes links: 

https://www.youtube.com/watch?v=Ia473nPz1L4&list=PLeLKux5eT3kY2mvZUi7IM5T548vfKxGq5&index=4 

 https://www.youtube.com/watch?v=V-6ff7Mzg98&list=WL&index=1 

https://www.youtube.com/watch?v=ARTspRf2gxY&list=WL&index=3 

Para finalizar mesmo vai uma mensagem para todos que estão na batalha de aprender tecnologia, a tecnologia  sim para todos e que cada um tem seus momentos e que vai conseguir chegar lá de alguma maneira. 

Assistam este vídeo aqui que acho a mensagem desta moça muito importante quando vamos aprender tecnologia. 

Link: https://www.youtube.com/watch?v=1W9iAM6h0EA&list=LL&index=28

Siga em frente !!!
Why write documentation for your projects
Tags: python, programming, beginners, documentation
Published: 2021-11-02 22:06:55

## :moneybag: Reduce future development effort
Lack of proper documentation is one of the main reasons why developers rewrite a project/tool. Instead of putting in the effort to understand the code is old now, they just prefer to write new code from scratch. 

Documentation helps future you and other developers contributing/building upon your project. 

## :loudspeaker: Marketing your project
You want people to use your project. For that to happen, people need to first understand: 
- Why your project is useful 
- What problems does it solve

Documentation for your project helps you address these questions. 

## :star: Building your personal brand
Within an organization or in the open source community, good documentation can make your work look very professional and outstanding. Users start to associate your name with good documentation if you keep up the practice. 

## :busts_in_silhouette: Collaboration 
One of the cornerstones of improving code base in open source community or even "inner source" (for proprietary software) is collaboration. Easiest way to invite others to collaborate is by allowing them to make "less intimidating" doc changes. 

Contributions from community are aligned with original intentions of the author if the code is well documented. 
  
## :arrow_up: Improve Code quality  
Thinking about documentation along with writing code enables you to make good design decisions. If you are unable to define what a module or function does in simple language, you probably need to rethink about the logic.
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2021-11-02 22:01:20

---
title: Top 7 Featured DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 

## It's all in the documentation

@sgoulas built an e-commerce site and kept a detailed development diary over the span of 5 months. Super fascinating and helpful!

{% link https://dev.to/sgoulas/i-created-an-e-commerce-site-from-scratch-and-kept-a-development-diary-over-the-cource-of-5-months-12mm %}

## Class is in session

@mustapha covers the tools we can use to create classes, how to create objects using classes, and lots more! A solid guide to ES6 classes ⭐️ 

{% link https://dev.to/mustapha/a-deep-dive-into-es6-classes-2h52 %}

## Take care of your own system

@abdullah_alhariri has some sound advice if you're working on leading a more balanced and impactful developer. 

{% link https://dev.to/abdullah_alhariri/secrets-about-highly-effective-programmers-46ld %}

## Optimizing Your Linkedin presence

Like it or not, Linkedin remains an incredibly helpful tool for landing jobs in nearly every field — including software development! If you need to improve the quality of your profile, @techieeliot has some pointers.

{% link https://dev.to/techieeliot/want-to-have-tech-recruiters-find-you-sixteen-important-things-to-remember-4jjd %}

## "It's not just about writing code"

... and other enlightening lessons about your first software development gig, via @sanspanic 

{% link https://dev.to/sanspanic/5-things-that-might-surprise-you-about-your-first-software-engineering-job-28mj %}


## Blockchain: Learning by doing

The community loved this article about creating blockchain in 60 lines of code by @freakcdev297. Great job!

{% link https://dev.to/freakcdev297/creating-a-blockchain-in-60-lines-of-javascript-5fka %}

## Hacktoberfest lives on

Hacktoberfest might have ended, but the beauty of contributing to open source is that it's _always_ the right time to start. @adiatiayu has some great tips to get you up to speed. 

{% link https://dev.to/adiatiayu/contributing-to-open-source-101-2dnm %}



_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
KootmansClass
Published: 2021-11-02 21:37:37

Being a student nowadays, trying to cope with numerous responsibilities, participating in college activities, and submitting an enormous amount of homework on time. Any person will agree that such a pace of life is too fast. No wonder that all learners are looking for various hacks and ways to do something faster. KootmansClass is the best place to find an answer to an important question: how to write an essay fast? Those who wrote essays before know that thorough preparation is a key to a well-structured and top-notch paper. Asking an essay expert, “Please write an essay for me,” seems to be the only way to craft this paper fast; however, <a href="https://www.kootmansclass.com/how-to-write-an-essay-fast">Kootmansclass.com</a> proves the opposite. 
A piece of advice from a professional tutor is worth a lot, and here everyone may get it for free. Isn’t it amazing? When you decide to find a person and text them, “Write an essay for me online,” you have no way to save money because even the cheapest academic writing service asks you to pay money. This guide is completely free — there’s a difference.
It's all Gravy
Tags: ember, opensource
Published: 2021-11-02 21:28:42

---
title: It's all Gravy
published: true
description: 
tags: emberjs, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9k4ehf07f2lxfg95t2v.jpg
canonical_url: https://chris.manson.ie/it's-all-gravy/
---



Anyone that knows me will already know that I do a lot of Open Source development. I’ve been positively Open Source obsessed for over 15 years now and enjoy working on Open Source so much that I often describe it as a hobby and regularly work on it in my evenings and weekends.

One of the things that I like to do is to encourage people to contribute to Open Source, leading projects within the Ember community as part of my role on the Ember Core Learning Team and regularly end up "assigning" people work as part of those projects. Sometimes I have a mentoring-style relationship with people where we would meet every week to discuss the work that they have been doing and see if there is anything I can do to unblock them. Invariably I will always have someone say in one of these calls that they are “really sorry but I haven’t been able to do any work on the task this week”. I have always told them the same thing, and for the longest time, I have also told them that I really need to write down my thoughts in a blog post so that I can just send people the link when it comes up. This is that blog post!

## You have already gone above and beyond

The conversation that I have with people when they haven't been able to get their "assigned task" done in the context of Open Source usually goes a little something like this:

> You are doing this work as part of your free time. You have already done something for this project which is already going above and beyond, anything you do past this point is all gravy.

Even if the person had never written a line of code/documentation/configuration etc. and have just had a conversation about an issue, they have already done more than expected because they were never **expected** to do anything. We always need to keep in mind that most open source contributions are given from people that are opting to give up their spare time (usually for free) and the level of expectation can never come anywhere close to the sort of relationship that an employer might have with an employee or contractor.

When planning in an Open Source context I never have any expectation that anyone will complete any task they say that they do, even if they say they are working on it right now and **guarantee** that it will be done by 5pm tonight. Even when I’m talking to colleges of mine who also happen to work in a company that provides 20% time to work on open source, I never feel bad if they don’t do something they said they would. Open source is an amorphous anarchy of projects that are usually driven by people’s interests and passions so any of the regular project management expectations don’t apply here.

If you say you are going to do something don’t feel bad if you don’t get it done, it is never a problem.

--- 

This post was originally posted on my personal blog https://chris.manson.ie/it's-all-gravy/
Intersection Observer API: you need it!
Tags: javascript, css, html
Published: 2021-11-02 21:25:50

Hi Dev!🙋‍♂️

Today i want to talk you about the Intersection Observer API!
I'm in love whit this API, because it is simple to use and it is very usefully for your projects. 

This is what you need:

###Select you element: ☝️

const elements = document.querySelectorAll('.elements');

###Create a function and add/remove class when the element is visible or not inside the window: 📪📫

```
function handleIntersection(entries) {
  entries.forEach((entry) => {
     if (entry.isIntersecting) {
       entry.target.classList.add('visible')
     } else {
       entry.target.classList.remove('visible')
     }
  });
}
```

###Create you variabile with the API and the function: 🐝

```
var observer = new IntersectionObserver(handleIntersection);
```

###Add the config: ✍️

```
var config = {
  root:null,
  rootMargin: '0px',
  threshold: 0 
}

var observer = new IntersectionObserver(handleIntersection, config);
```

###Observe all the elements: 🧐

```
elements.forEach(element => observer.observe(element));
```

Every time the target is near the window, the observe api look for the elements and add/remove the class (in this case .visibile).

Thank you for read!🧑‍💻
How to avoid notches with Safe Area Context in React Native apps
Tags: reactnative, javascript, programming, beginners
Published: 2021-11-02 20:38:37

Most devices nowadays come with a notch or some kind of status bar. Therefore, when building a mobile application using React Native, it is vital to ensure that the content of an app screen is rendered correctly across different types of devices.

In this article, let's take a look two different approaches to make app screens in React Native to avoid the content being positioned behind a notch or status bar.

The first approach will discuss SafeAreaView component from React Native components API. The second approach will discuss the advantage of using [react-native-safe-area-context ](https://github.com/th3rdwave/react-native-safe-area-context#readme) open source library and how it provides a cross-platform solution.

### The Notch Problem
When you are starting to build a screen in React Native app, you might add use the following code snippet to display text:
```
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export const HomeScreen = () => {
  return (
    <View style={[styles.container]}>
      <View style={{ backgroundColor: 'blue' }}>
        <Text style={{ fontSize: 28, color: 'white' }}>Hello World</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red'
  }
});
```
The above code snippet has a parent View component with a background color of red. It wraps another View component with a background color of blue that contains a Text component to display some text on the screen.

This will display the content of the app screen on an iOS device as shown below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4sq1wa9pbk69addmy7k3.png)
Frontend environment variables with Astro.js
Tags: javascript, staticsites
Published: 2021-11-08 15:06:01

---
title: Frontend environment variables with Astro.js
published: true
date: 2021-11-02 20:38:00 UTC
tags: ['javascript', 'staticsites']
canonical_url: https://bryanlrobinson.com/blog/frontend-environment-variables-with-astro-js/
---

Recently, I've been really digging the idea of transitional apps and "islands" architecture for multipage apps. To that point, I've been playing with [Slinkity for 11ty](https://bryanlrobinson.com/blog/quick-experiment-with-the-slinkity-11ty-plugin/) and its contemporary AstroJS.

Astro is a great framework that lets you create pages and components in your favorite framework. I've really enjoyed playing with it so far.

## The problem: no `process.env` and no secure leakage

One under-documented issue that I just ran into was using environment variables in my client-side "islands." If you're using environment variables for convenience (not security), you may want them in your frontend components. It's not obvious how to accomplish this. When you use `process.env.<ENV_VAR>` you'll get a browser console error that `process` doesn't exist... too right, I guess!

The team helped me out via [their Discord community](https://discord.com/invite/grF4GTXXYm) and are going to be documenting this going forward.

## The solution: `import.meta.env` and `VITE_`

The solution has two parts. First, we need something in the place of `process.env`, then we need to prefix our environment variables, so Vite can protect us from ourselves to avoid security leaks.

For any environment variable (in the environment, in a `.env` or `.env.local`, etc.), you can access them via `import.meta.env.VITE_<ENV_KEY>`. Note the prefix. All client-side variables need to be prefixed with `VITE_`.

So in setting up [Algolia InstantSearch](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/) for my most recent streaming adventures, I needed the following code instead:

```
VITE_ALGOLIA_APP_ID = "myidhere"
VITE_ALGOLIA_SEARCH_KEY = "asearchonlykeyhere"
```
```javascript
import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch(import.meta.env.VITE_ALGOLIA_APP_ID, import.meta.env.VITE_ALGOLIA_SEARCH_KEY);
```

This solution is straight from the Discord and is pulled from the way [Vite handles env variables](https://vitejs.dev/guide/env-and-mode.html#env-variables).

Learning new technology like this is a lot of fun, but when it's super early in development, finding answers for problems like this can get hairy fast. Shoutout to the Astro team for being quick to help!
PowerShell PSCustomObject - Custom Object, the way it was meant to be
Tags: powershell, object, hash, custom
Published: 2021-11-02 20:05:20

{% youtube DAVGyCytsqM%}

Everything is an object in PowerShell, and ability to create own object allows for one more way of controlling and handling data.

In this video I'll take you through the steps of creating PSCustomObject, working with its properties to doing more advanced topics - like adding methods and types to the object.

{% github kprocyszyn/about-powershell no-readme %}