teleren/devto huggingface dataset:
Recursion Basics in JavaScript
Tags: javascript
Published: 2020-10-03 23:13:40

# What is Recursion?

> The act of a function calling itself, recursion is used to solve problems that contain smaller sub-problems. A recursive function can receive two inputs: a base case (ends recursion) or a recursive case (resumes recursion). https://developer.mozilla.org/en-US/docs/Glossary/Recursion

* A function that calls itself and has a **base** & **recursive** case. The function will essentially reinvoke itself until it arrives at a result.

## Two Cases Explained
* **Base Case** - At one point do we need to return our answer? When do we need to stop?
* **Recursive Case** - How do we manipulate our argument or how can we adjust the argument for another reinvocation?

## Example - countSheep()

Create a function countSheep() that outputs "1 sheep..." all the way up to the input number "x sheep..."

Let's solve by using the [PREP](https://dev.to/phariale/prep-technique-for-algorithms-in-js-5b0g) technique
* **P** - integer (x) for number of sheep, default argument of count = 0 to keep track of current sheep number
* **R** - log out sheep from 1 to x
* **E** - see below

```
// countSheep(3)
// 1 sheep...
// 2 sheep...
// 3 sheep...

```
* **P** - see below

**_Base Case_** - return when all the sheep are counted (count === x)
**_Recursive Case_** - modify count by adding 1, return a console of the current count + a reinvocation w/ x and modified count
```javascript
function countSheep(x, count=0) {
  // BASE CASE
  // return if count equals x, which means every sheep is counted
  
  // RECURSIVE CASE
  // modify argument by adding 1 to count
  // log current count & reinvoke w/ modification
}

``` 
Now, implement code logic.

```javascript
function countSheep(x, count=0) {
  // BASE CASE
  // return if count equals x, which means every sheep is counted
  if (count === x ) return;
  
  // RECURSIVE CASE
  // modify argument by adding 1 to count
  count++
  // log current count & reinvoke w/ modification
  return console.log(x + ' sheep...') + countSheep(x, count)
}
```
## Conclusion
When finding a recursive solution, always keep in mind what the **base case** and **recursive case** may be. It's a good way to start!

& Remember... Happy coding, friends! =)
Using React.memo() to skip unnecessary rendering.
Tags: react, reactnative, hooks, javascript
Published: 2020-10-03 23:00:29

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k4ysr968wj6153ou9kcg.jpg)

“the one who does not have a memory, creates one of paper” Gabriel García Marquez.

#Why do we need to use memo on React.js components? 

First of all, let´s recap how React works. Every time that our state changes the component will be rerendered, so each child component will be re-render throwing functions on the creation component.
Then if for example, we have a component father called Customers and a child component called ListCostumers that shows a list of Customers with every row has a lot of information of that component that was obtained by the way of fetch on use effect method or just using a get function like Axios or something like that. Every time that the father component (Customers) will be re-rendered her son ListCostumers will be rerendered and the fetch function will be called, paying for that a lot of time on computer time and money if we pay for cloud database use or something like that.
To avoid this, we can say that the child component (List Customers) may be memorized (React.memo) to avoid re-renders.

#How can I use that and what does it mean?

*Let me write just a line of code…*

```javascript
const ListCustomers = React.memo(({customers}) => (a fantastic code...));
```

React started to observe this received props called customers and memorized them and after the first render of this component every time that we re-render this child component customers will be compared with the last customer's props and if we don't have any changes this child component will not be rerendered avoiding a fetch or render functions that consume a lot of computational power.

- So, ok great from now, I am going to always use memo components. Is it great?
- Just no, boy...

#Why can't we always use a memo?

Memo consumes a lot of computational power too, you need to consider that a list comparative for example cost in terms of computational times.

- So, Every line of fantastic code will consume computer time.
- Yes, but it's not easy we need to consider a lot of things.

We need to considerate that the power consumption of memo comparatives is lower than executing a fetch or another function that we need to use to render our child components and how we know each child component too ( cascade render ) and for example if we need to fetch from AWS or Cloud Database we need to pay this computational power if we have this situation come on, use memo!.

#Conclusion 

Great power comes with great responsibility, use it with care, you need to ensure where you want to use your computational power.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m42v4cdb64enq35i6y8a.jpg)




* https://en.wikipedia.org/wiki/Gabriel_Garc%C3%ADa_M%C3%A1rquez
* React 16.6: React.memo() https://reactjs.org/blog/2018/10/23/react-v-16-6.html

*Guillermo A. Del Vecchio.*
Sr software engineer, Golden Boy React.js / React Native Developer.
From 0 to a working k8s cluster with Ansible
Tags: kubernetes, ansible, devops, linux
Published: 2020-10-03 22:56:52

Hi guys, hope you are good and safe!

I wanted to share a little tool that I created to provision a fully working k8s cluster in about 20 mins just using Ansible, terraform and libvirt.

It supports now k8s 1.19 and cri-o 1.19.

{% github kubealex/libvirt-k8s-provisioner %}

Click on the collapsible for a short description of the tool or just head to the github repo to try it out!

{% collapsible SPECS %} 

It will provision:

* Loadbalancer machine with haproxy installed and configured for HA clusters

* k8s Master(s) VM(s)

* k8s Worker(s) VM(s)

It also takes care of preparing the host machine with needed packages, configuring:

* dedicated libvirt dnsmasq configuration

* dedicated libvirt network (fully customizable)

* dedicated libvirt storage pool (fully customizable)

* terraform

* libvirt-terraform-provider ( compiled and initialized based on https://github.com/dmacvicar/terraform-provider-libvirt)

You can customize the setup choosing:

* container runtime that you want to use (docker, cri-o, containerd).

* schedulable master if you want to schedule on your master nodes or leave the taint.

* service CIDR to be used during installation.

* pod CIDR to be used during installation.

* network plugin to be used, based on the documentation. Project Calico Flannel

* nginx-ingress-controller or haproxy-ingress-controller if you want to enable ingress management.

* Rancher installation to manage your cluster.

* Rook-Ceph operator

{% endcollapsible %}

Feel free to enjoy it and contribute, if you want!
Discovering inspirational websites and web applications
Tags: design, discuss, websites, inspiration
Published: 2020-10-03 22:13:29

Need some inspiration for the next website or web app you’re building?

Here are some of my favourite resources: 

* [siteInspire](siteinspire.com)
* [Admire The Web](admiretheweb.com)
* [DesignMunk](designmunk.com)
* [httpster](httpster.net)
* [1stWebDesigner](1stwebdesigner.com)
* [Land-book](land-book.com)
* [Lapa Ninja](lapa.ninja)
* [Minimal Gallery](minimal.gallery)
* [Nicely done](nicelydone.club)
* [One Page Love](onepagelove.com)
* [SaaS Landing Page](saaslandingpage.com)
* [SiteSee](sitesee.co)
* [The Gallery](thegallery.io)
* [Typewolf](typewolf.com)
* [Unmatched Style](unmatchedstyle.com)
* [Web Design Inspiration](webdesign-inspiration.com)

I’ve been following some of these galleries for years and others for a few weeks but all them have great content that above all are great examples of work that is well thought out rather than highlighting portfolio pieces.

[SITEJOY](https://www.SITEJOY.dev) is my own site that in try to apply the same principles to.

Are there any other sites with  inspirational examples you’d like to share?
React/CRA: Invitation to Collaborate to SimplQ
Tags: hacktoberfest, react, webdev, javascript
Published: 2020-10-03 22:11:11

We maintain a web based queue management software called [SimplQ](https://simplq.me/), that anyone can use to create instant queues to manage crowd with a smartphone. 

We revamped our UI, and we have been getting a lot of collaborators thanks to #hacktoberfest

It's a straightforward React CRA app. We have a lot of easy to fix issues and have been merging lot of quality PRs:


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


Open Issues: https://github.com/SimplQ/simplQ-frontend/issues

You can see the site here: https://simplq.me/
Refactoring Verify-URL
Tags: opensource, python, watercooler
Published: 2020-10-03 22:10:39



{% github abhaseen/Verify-URL no-readme %} The first thing I noticed was the entire program was written inside the main() function. To help me understand how the program worked, I decided [I would refactor Verify-URL into smaller functions](https://github.com/abhaseen/Verify-URL/pull/9).
 
I reordered main() into the following:
* get_args()
* check_args()
* get_urls()
* verify_url()
* print_status()

Everything looked good and worked as expected... except when I supplied a filename.
```
>>> python verify_url.py src.html
Invalid URL '': No schema supplied. Perhaps you meant http://?
```
I traced the error to get_urls() as it looked as though a **NoneType** object was being appended into what was supposed to be a list of strings.
```python
for url in soup.find_all('a'):
  urls.append(url.get('href'))
```
To fix, I cast every item as a string and checked to see if it started with 'http'
```python
for url in soup.find_all("a"):
  href = str(url.get('href'))
  if href.startswith('http'):   
    urls.append(href)
```
I ran the tool again from the command line and supplied a file to check. This time it ran smoothly and printed a colourful list. 

[I submitted a Pull Request](https://github.com/abhaseen/Verify-URL/pull/9), so hopefully these changes pass the Author's test! That wasn't supposed to rhyme...
Spring Expression Language (SpEL)
Tags: spring, java, spel
Published: 2020-10-03 22:07:13

You can use it as implicit references defining an attribute or an argument in a method:

```java
@Value("#{ systemProperties['user.region'] }") String defaultLocale;
```

SpEL can access Spring beans:

```java
@Value("#{beanId.method}") BeanType param;
```

SpEL can access properties as Strings (casting may be needed):

```java
@Value("${property1}") int property1;
@Value("#{environment['property2']}") int property2;
@Value("#{new Integer(environment['property3'])*2}") int property3;
```

If undefined use : or ?: for SpEL to assign a default value:

```java
@Value("${property1 : 1}") int property1;
@Value("#{environment['property2'] ?: 1}") int property2;
```
Swap Variable Values ​​Without a Temporary Variable
Tags: computerscience, softwareengineering, c
Published: 2020-10-03 22:02:58

####The problem

One of the first problems that we learned in computer science is how to sort data. There are a lot of well known algorithms to achieve that.

To solve this problem, one of the things that we must do is swap values within a collection.

For the sake of simplicity, we will use the simplest sorting algorithm known as Bubble Sort.

```
#include <stdio.h>

void swap(int* a, int* b) {

  int temp = *a;
  *a = *b;
  *b = temp;

  return;

}

void bubbleSort(int* arr, int size) {

  for(int i = 0; i < size; ++i) {

    for(int j = 0; j < size-i-1; ++j) {

      if(arr[j] > arr[j+1]) {
        swap(&arr[j], &arr[j+1]);
      }

    }

  }

  return;

}

int main(void) {
  
  int size = 8;

  int arr[8] = { 5, 4, 8, 7, 1, 2, 6, 3 };

  bubbleSort(arr, size);

  for(int i = 0; i < size; ++i) {
    printf("%d\n", arr[i]);
  }

  return 0;
  
}
```

In this code, we wrote a swap method that uses a temporary variable to support the swap operation.


####Bitwise XOR

Bitwise XOR is an operation that returns true only when the operation is done with a true and false values, otherwise, the operation results into a false value.

Note that this operation is done to each bit in the variable.

Let's look at a XOR's table:

| Input | Input | Result |
|-|-|-|
|true|false|__true__
|false|true|__true__
|true|true|__false__
|false|false|__false__

With that in mind, let's look at an example:

|||
|-|-|
|Input|0 0 0 1 1 0 1 0|
|Input|0 1 0 1 1 1 0 1|
|Result|__0 1 0 0 0 1 1 1__|

Now, let's rewrite our swap function using XOR operations. In C, the XOR operator is the ^.

```
void swap(int* a, int* b) {

  *a = *a ^ *b;
  *b = *a ^ *b;
  *a = *a ^ *b;

  return;

}
```

Let's suppose that we are calling this method by passing the values 0001(1) and 0010(2).

The first operation that happens is a = a ^ b

||
|-|
|0 0 0 1|
|0 0 1 0|
|__0 0 1 1__|

The second operation that happens is b = a ^ b

||
|-|
|0 0 1 1|
|0 0 1 0|
|__0 0 0 1__|

The third operation that happens is a = a ^ b

||
|-|
|0 0 1 1|
|0 0 0 1|
|__0 0 1 0__|

This article showed that with bitwise XOR, we can swap the values ​​of the variables without using a third variable to support the operation.
Broccoli, bots, and brains! The 3 projects where I added the Hacktoberfest topic.
Tags: hacktoberfest, contributorswanted
Published: 2020-10-03 21:57:25

---
title: Broccoli, bots, and brains! The 3 projects where I added the Hacktoberfest topic.
published: true
description: Some easy-going (and hopefully fun) ways to get involved with Hacktoberfest.
tags: 
  - hacktoberfest
  - contributorswanted
canonical_url: https://workwithcarolyn.com/blog/hacktoberfest-projects
---

For 2020, I decided to opt-in and add the `Hacktoberfest` topic to three of my personal repositories 🎃 

The goal is to provide an easy-going (and hopefully sort of fun) experience for folks looking to get involved or make their first open-source contribution!

This post contains links to the projects and a short description of what they're all about.

## Hopeful COVID-19 Bot

{% github carolstran/hopeful-covid-bot no-readme %}

The code behind my little Twitter bot [@hopefulcovidbot](https://twitter.com/hopefulcovidbot) (I promise I will relaunch it this weekend). The best way to contribute is to add an uplifting news article for the bot to tweet out.

🤖 🖤 💉 🙌🏼 🧼

## Seeing Sprouts

{% github carolstran/seeing-sprouts no-readme %}

A browser extension that replaces all images on a web page with photos of various veggies. There are step-by-step instructions in the README describing how to add support for more vegetables, nutrient-dense fruits, and other veggie-like things people enjoy!

🥗 🥔 🥑 🍆 📷

## So you want to learn GraphQL?

{% github carolstran/so-you-want-to-learn-graphql no-readme %}

Imagine 'Choose your own adventure' but for learning GraphQL. It's super messy because I always say I'm going to work on it and never do - so any support adding or sorting resources is appreciated. The `frontend` section and anything marked `TODO` are especially lacking. Check out the [Contributors Guide](https://github.com/carolstran/so-you-want-to-learn-graphql/blob/main/CONTRIBUTING.md) for more details.

✏️ 🧠 💻 🗺 💫

Feel free to comment on this post or open an issue on the repositories if you have any questions!

_________________

_Do you enjoy any of these projects or find them useful? If yes, please consider [buying me a coffee](https://ko-fi.com/carolstran) so I can continue to make things like this_ ☕️
Binding Data to Variables
Tags: javascript, beginners, react
Published: 2020-10-03 21:47:37

## `var`, `let`, `const`

> (1) don't use `var` anymore, because `let` and `const` are more specific
(2) default to `const`, because it cannot be re-assigned or re-declared
(3) use `let` when re-assigning the *variable* (e.g. in `for` *loop*)

{% vimeo 464597011 %}

{% replit @CodeFinity/var-let-const %}

---

Sources:

1. [Robin Wieurch](https://www.robinwieruch.de/javascript-fundamentals-react-requirements/#var-let-and-const-in-react)
It's ok if you forget to use the sudo command
Tags: linux, codenewbie, productivity
Published: 2020-10-03 21:45:20

If you run Ubuntu or another Linux distro where you have to prepend a command with `sudo` and you're anything like me, you may from time to time forget to type `sudo`. Next time you forget, try typing in `sudo !!` and then press enter. This will prepend the previously ran command with `sudo` and run it.
Invitation to contribute to the DinaWall project, dynamic wallpapers for the community
Tags: java, hacktoberfest, linux
Published: 2020-10-03 21:39:45

Hello, it is a pleasure for me to start my contributions in this community, this is my first post I hope you like it, I take this post to invite you to participate in a project that started recently, when I was using GNU / Linux I wanted to develop an application with which I could implement the macOS Dynamic Wallpapers in distributions Linux, this became a challenge for me, I decided to create the application that I called **DinaWall**, almost 3 years that I did not write a line of code, since now I am dedicated to business intelligence, but this revived me again.

Let's start with the architecture, I thought to create the application in a totally decoupled way, so I must have 2 components that had to evolve independently, a core which is called **DinaWall_core** is in charge to manage all system operations, such as file management, wallpapers installation, manage the execution of dynamic wallpapers and take care of the administrative issues of the system, the other component is dinawall_app this is the user interface written in JavaFX, I wanted as a personal challenge to create an application visually attractive and easy to maintain. after two weeks of hard work I managed to meet the objectives raised.

So then we already have a fully functional system, with tests in which the system managed to make the dynamic change of wallpapers according to system time, at this moment, the application supports Linux systems with desktop environment Plasma KDE and I managed to do the implementation for its operation in macOS, there is a lot of work still to be done, implement more Linux desktop environments like gnome, cinnamon etc.

At this time, due to work issues, I have not been able to continue working on the project as I would like and that is why I extend the invitation for you, the community, to help me take this application to a functional level contribute your grain of sand to the open source community, I have many ideas yet to develop for DinaWall and I hope to tell With your support, thank you very much for your attention, it should be noted that documentation is also missing so if someone is interested in contributing to the project you can write to me at this email: fredefass01@gmail.com to coordinate and continue with the project, Thank you again and hugs from Colombia, happy hacking aaaa and excuse my english is very bad 

[DinaWall_App Github Repository] (https://github.com/fredericksalazar/dinawall_app)

[DinaWall_Core GitHub Repository] (https://github.com/fredericksalazar/dinawall_core)
LudumDare47 - Making a Game with Playcanvas Part 1 [Livestream]
Tags: playcanvas, gamedev, javascript, ludumdare
Published: 2020-10-03 21:28:41

{% youtube syTXXM-mcL0 %}
Day 1
So I managed to make some half decent progress - got a prototype level in, an enemy with some movement and some basic scripts - still running into lots of random collision issues which are causing headaches though and slowing me down a bit.

Modified the game mechanics a bit - I think now I will focus on the loop concept in two ways

1 the scene loops if the timer runs out (bit basic but I guess it counts)
2 the enemy default movement is moving around in a loop - be interesting to see what I can do and how I can tweak it once I get a few enemies in the game and with a fully working script and hopefully some basic follow player AI

I’m changing the title to escape the loops too - the enemies are the ‘loops’ in this case

I’m live streaming as I develop on Twitch btw if you want to watch it’s progress https://www.twitch.tv/noirvortex
Profiles in Spring
Tags: spring, java, profiles
Published: 2020-10-03 21:22:29

Using the Profile annotation in a Configuration class, all the beans in that Configuration class belong to that profile.

```java
@Configuration
@Profile("dev")
public class TestInfrastructureConfig {
}
```

Using the Profile annotation on a Bean method, that bean belongs to that profile.

```java
@Configuration
public class TestInfrastructureConfig {
  @Bean(name="dataSource")
  @Profile("dev")
  public DataSource dataSourceForDev(){
    ...
  }

  @Bean(name="dataSource")
  @Profile("prod") // or @Profile("!dev")
  public DataSource dataSourceForProd(){
    ...
  }

}
```
Both profiles have the same bean id but only one profile would be activated.

#Activating Profiles#

* Command line: When running the application (better approach)
```
java -Dspring.profiles.active=dev -jar yourApplication.jar 
```

* System property: By code (coupled approach)
```java
System.setProperty("spring.profiles.active", "dev");
```
Pre-React JS
Tags: javascript, beginners, react
Published: 2020-10-03 21:19:25

**Update: 🆗, I 'sold out' and restarted [YT channel](https://youtube.com/channel/UCwGoouzZ4fo9AZDcvfi8LWg) from scratch! 😳**

**Update #2: As a result of my 'silly' YT stuff...I got a new job - a really great one...possibly a 'dream' job!**


A while ago I had a YT channel. It was 🆗. Nothing special.

I just got sick of all of the YT bull💩 - the massive ads, the tons of idiotic distracting videos and click bait and, as an 'admin,' the UI for uploading and organizing was absolutely horrible 🤮.

It was a real waste of mental energy 😫!

So, I'm going to revamp my 'video career' (and I use the term 'loosely') here.

I've been teaching JS for a few years now - mostly in-person in college courses and at 👢 camps. Any, maybe, just maybe, a few of the ways that I present things might appeal to you.

One of the reasons I'm making videos for dev.to (and I wish that more of our dev friends would abandon YT in favor of this platform) is because it's lower pressure. 

I don't need to have a ton of 'fancy effects' in my videos or care too much about clickbait stuff, etc.

In fact, my videos will have a minimal amount of editing. 

If you do watch and enjoy it, let me and/or others know. I want to make this a 10-20 video series, but will be more likely to do so if I get a bit of positive feedback.

**The purpose will be to get JS beginners prepped to approach React with more confidence 🦸🏽‍♂️.**

Generally, I'll cater the delivery to those who have had _some_ experience with JS, but are still quite fuzzy on terminology, etc.

Ask ❓s, and I'll try to respond in the comments and/or make follow-ups.

Thanks for any feedback you have! 🤓
Theta Tools!
Tags: showdev, contributorswanted, news, hacktoberfest
Published: 2020-10-03 21:14:06

Hello folks,

We've just started a new open source project, [Theta Tools](https://theta-tools.github.io/), and are looking for contributions!

Theta Tools is a collection of ready-to-use HTML based components that you can use in your projects. The project opened a few days ago, so there aren't many components yet, but my aim is, that people will contribute their components to the project. Any and all contributions are welcome, and your contributions will count towards Hacktoberfest!

You can find everything you need to use our components, and contribute to the project [at our website](https://theta-tools.github.io/)