teleren/devto huggingface dataset:
Next level repository management with Octoherd
Tags: github, node, javascript
Published: 2021-03-01 21:16:29

I recently sat down with Gregor, maintainer of the [JavaScript flavor of Octokit](https://github.com/octokit/core.js), to talk about managing multiple repositories as a maintainer. The management of multiple repositories in an organization can become time-consuming and Gregor shared project, Octoherd as a way to script updates across multiple repositories. 

{% github https://github.com/octoherd/cli %}

In our example, Gregor manages to updates the branch protection rules for multiple repositories using one script. 

```sh
git clone https://github.com/octoherd/scripts.git
npx @octoherd/cli \
  --octoherd-token 0123456789012345678901234567890123456789 \
  scripts/sync-branch-protections/script.js \
  "octoherd/*"\
  --template "octoherd/cli"
``` 
If you have ideas for scripts that would help you manage common tasks across GitHub repositories that you would like to automate, considering dropping them in the [octoherd/scripts](https://github.com/octoherd/scripts/issues) issues. 

{% youtube qXHiXSSD3Kc %}

Come along to our Open Source Friday live streams. We go live on the [GitHub Twitch Channel](https://twitch.tv/github) most Fridays. Join the [Meetup Group](https://www.meetup.com/GitHub-Virtual-Meetup/) to stay up to date and see the topics each week.
MMT Tech Meetup February 2021 - GatsbyJS
Tags: gatsby, mdx, meetup
Published: 2021-03-01 20:59:13

---
title: MMT Tech Meetup February 2021 - GatsbyJS
published: true
description: This meetup covers GatsbyJS
tags: gatsby, mdx, meetup
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6jj4mhtczf2qdfa87va.png
---

## MMT Tech Meetup - February 2021 featuring GatsbyJS

Meetup agenda:
- I Have a Hammer - Scott Spence - (Web Developer at Karmarama)
- Using the new GatsbyImage and StaticImage components - Ondrej Polesny (Developer Evangelist at Kentico)
- Presenting Without Sharing My Screen - Samuel Larsen-Disney (UX Engineer at American Express)
- A Gatsby Intro - Kyle Mathews (CEO and Co-founder of Gatsby)

This is the recording from the tech meetup https://www.youtube.com/watch?v=km2KsVnlM4I
[![MMT Tech Meetup - February 2021 - Featuring GatsbyJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6jj4mhtczf2qdfa87va.png)](https://www.youtube.com/watch?v=km2KsVnlM4I)

This is the recording from the MMT Tech Meet-up where we have the following content in this video:
00:00:00​ - Welcome to the MMT Tech Meetups by Ilesh Mistry
00:03:10​ - Introduction to GatsbyJS by Ilesh Mistry
00:09:13​ - I Have a Hammer by Scott Spence
00:33:34​ - Using the new GatsbyImage and StaticImage components by Ondrej Polesny
00:55:30​ - Presenting Without Sharing My Screen by Samuel Larsen-Disney
01:16:28​ - A Gatsby Intro and Q&A by Kyle Mathews
01:46:37​ - End

*** Bonus *** 
Kentico Kontent CMS - 90 days extended trial - http://bit.ly/KontentMVP
A quick note on performance:
Tags: performance, css, webdev, webapp
Published: 2021-03-01 20:54:03

We use `display: none` instead of `opacity: 0` to hide elements/ implementation details. 
But opacity is a **better** choice for performance because it is one of the things the browser can use the GPU to animate, a process known as hardware acceleration.
Using the GPU leads to smoother animation as the browser does not have to re-paint the areas of the screen that are animating. Instead, the browser paints the elements to be animated to "layers" that are uploaded to the GPU, which it can then animate.
Note that the browser doesn't always create new layers for the GPU when you want it to, so you can force it to do so by setting certain properties like `backface-visibility` (old) or `will-change`.

Examples where you might use will-change:
* Where you have an element whose transform property is used to animate or add some sort of effect adding `will-change: transform` tells the browser this property of the element will change in the near future then the browser can choose to apply any ahead-of-time optimizations required for the property change before the property change actually happens.
* `will-change: opacity`
* `will-change: scroll-position`
* `will-change: contents` (something about the element’s contents will change in the near future).

Having said these there are few caveats to using will-change:
1. The browser already tries as hard as it can to optimize everything so do not apply will-change to too many elements.
2. Will-change is intended to be used as something of a last resort, in order to try to deal with existing performance problems. Don't apply will-change to elements to perform premature optimization. :)

With this relatively short post I hope I've been able to add to your wealth of knowledge! :)

*To know more about the will-change property visit* [**MDN**](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change)
How to Use AvaloniaUI Developer Tools
Published: 2021-03-01 20:48:13

Hello, in this post I will briefly explain how to install and use developer tools in your AvaloniaUI project. As always, I will use my app [Camelot](https://github.com/IngvarX/Camelot) as working example.

# What is developer tools window?

Developer tools window is similar feature to Chrome developer console. It allows you to observe tree of elements, their styles and positions, including margins/paddings etc. Also it has ability to log UI events and even to show FPS!

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

# How to add it

Add following lines of code inside your main window code behind class inside constructor:

```csharp
#if DEBUG
    this.AttachDevTools();
#endif
```

[Example of code](https://github.com/IngvarX/Camelot/blob/master/src/Camelot/Views/MainWindow.xaml.cs#L14)

# Usage

Open developer tools window using `F12`.

Watch visual tree and edit controls parameters:

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

Watch events:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpjhz9gp1ah709ws72jk.png)
 
Check FPS:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17sa0ijxonc7gow9ubc8.png)
 
Highlight elements in tree:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83z5mitjnm1lh0r4jiln.png)
 
[Official documentation](https://avaloniaui.net/docs/quickstart/devtools)
The Set() Object in JavaScript - A Nimble Introduction
Tags: javascript, beginners, webdev, programming
Published: 2021-03-01 20:42:20

Hello, I am going to give you a quick introduction about JavaScript **Set()** object and its **must know** properties and methods.

# The Set() Object
The `Set` object is a collection of elements. It can store primitive values or object references.Set can only contains **distinctive** elements,so With `Set` object you can remove duplicate elements.

---

**Using the Set object**
- Setting up an empty `Set` object
![empty set](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2hh64zi5mah7y4dp3ls.png)
- `Set` object With array
![set with array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xefo3pwg7x49od8c20wl.png)

---

**Iterating Sets**
- You can iterate over items in `Set` object using `for...of` statement.
![Iterating Sets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0m3ddaufvbl3vsk8pui.png)

---

**Adding an element to a set**
- You can add an element to the end of a `Set` object via the `add()` method.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6fqit3aeqjwswf939g8.png)

---

**Number of elements in a Set**
- To see the number of (unique) elements in a `Set` object use the `size` property.
![size](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4r2nxamqgcmfbo68kyh3.png)

---

**Checking an element in the set**
- The `has` method will tell you whether a value exists in a `Set` object.
![has](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4iyqgkfdh8u5jf1ncz7j.png)

---

**Delete elements from set**
- Using `delete` method you can remove a value from the `Set` object.
![delete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xvaqelwtalhzsfgu9a1.png)

---

**Remove all elements from set**
- To remove all the elements from `Set` object simply use `clear` method.
![clear](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufpfrj8m6wzsd1gozbqy.png)

---

Hope you have learnt something from this article.Kindly forgive any mistake as it is my first article. **Happy Coding!**
Learning Python with an Audience
Tags: python, codenewbie, livecoding
Published: 2021-03-01 20:39:45


Hello and welcome :)

Most of us have New Year Resolutions and for 2021 I decided to learn a new programming language.
Python was the chosen one, and I will be sharing with you my learning journey.
![Code snipped in Python: print("Hello, World!")](https://www.therelicans.com/remoteimages/i/2s0b5lincq76aw37nq0i.png)
  

## Why Python?
Python is a language with a simplified syntax, has a great online community and we can do lots of cool things with it:  
> Python is a general-purpose coding language—which means that can be used for other types of programming and software development besides web development. 
> That includes back end development, software development, data science and writing system scripts among other things. 
> Source:  [SkillCrush blog](https://skillcrush.com/blog/what-is-python-used-for/)  


## How do you plan to study?
The CodeCademy Python 3 course will be my main source of learning.
I choose it because their text based platform, makes it easier to learn with I stream and take notes as I go.
Part of my studies will happen while I stream [Twitch Channel](https://twitch.tv/pachicodes), but I will be studying everyday.
I will join the #100DaysOfCode community on [Twitter](https://twitter.com/pachicodes) as a way to keep myself accountable and connect with other learners.

  

## Why are you learning it with an audience?
As a community oriented person, I want to make friends while I learn, and have other people learning with me.
This way I can get help when I am stuck and have motivation and support when I get tired or frustrated.
  

## What are your goals?
 - Document my process with a [Github Repository](https://github.com/pachicodes/pachi-learns-python) ,
 - Write blog posts with that I learned,
 - Share on my [Youtube channel](https://youtube.com/c/pachicodes) clips with my “aha” moments.  

By the end of this Project, I intent to have study material to share with the community.
I am also planning a final project where I can use my gained skills and apply [New Relic](http://bit.ly/sponsoredbynewrelic) to it.

  
## Final Considerations
I want to make learning fun and an interactive experience. 
**Let's do this together!**
Join me on [Twitch](https://twitch.tv/pachicodes) on Mondays and Tuesdays at 10am EST to learn with me (or help me learn).

Thanks for reading, and I hope to "see" you there,

XOXO

Pachi 

**This post was sponsored by [New Relic](http://www.trynewrelic.com/ )❤**
How to type and press ENTER with Cypress
Tags: cypress, testing, automtion, e2e
Published: 2021-03-01 20:38:00

## Today, in “Pinches of Cypress”, learn how to test a search functionality like a real user

When writing **end-to-end tests**, the tests must simulate using the application as closest to a real user.

Take the [**DuckDuckGo**](https://duckduckgo.com/) search site as an example.

When a user searches, they typically type what they are looking for and then press ENTER.

**Note:** Nothing prevents you from typing in the search field and pressing the magnifying glass button, but normally, users use the ENTER key.

However, both scenarios must be covered by tests.

Let's see how to test such scenarios with [**Cypress**](https://cypress.io).

```js
// search.cy.js

describe('DuckDuckGo', () => {
  beforeEach(() => {
    cy.visit('http://duckduckgo.com')
  })

  it('searches by typing and pressing ENTER', () => {
    cy.get('#search_form_input_homepage')
      .should('be.visible')
      .type('Cypress.io{enter}')

    cy.get('.results')
      .should('contain', 'cypress.io')
  })

  it('searches by typing and clicking the magnifying glass button', () => {
    cy.get('#search_form_input_homepage')
      .should('be.visible')
      .type('Cypress.io')
    cy.get('#search_button_homepage')
      .should('be.visible')
      .click()

    cy.get('.results')
      .should('contain', 'cypress.io')
  })
})
```

As you can see in the first test (`searches by typing and pressing ENTER`), when I call the `type()` method, in addition to passing the term I want to search for (`cypress.io`), I pass the text enter wrapped in curly braces (`{enter}`). This way, **Cypress** will type the text and simulate the ENTER key is pressed.

🎉🎉🎉

There is nothing new in the other test (`searches by typing and clicking the magnifying glass button`). First, I type in the field, and then I click the magnifying glass button.

Done!

The takeaway here's, **test the application as your real users use it and cover as many scenarios as possible**. That way, you will be safe to modify the application and know if everything continues to work as expected or if you have broken something and need to fix it before moving on.

_To learn more about the `cy.type()` functionality, I recommend reading the [**official Cypress.io documentation**](https://docs.cypress.io/api/commands/type.html)._

Finally, as an alternative for pressing enter (or other keyboard keys), have a look at the [`@walmyr-filho/cy-press`](https://github.com/wlsf82/cy-press) plugin and its `.press()` custom command.

___

Did you like it?

Leave a comment.
___

This post was originally published in Portuguese on the [**Talking About Testing**](https://talkingabouttesting.com/2021/03/01/como-digitar-e-pressionar-enter-com-cypress/) blog.
___


Would you like to learn about **test automation with Cypress**? Get to know my online courses on [**Udemy**](https://udemy.com/user/walmyr).

Happy testing! 🎉
Snippet Podcast: What if we need this?
Tags: programming, javascript, podcast
Published: 2021-03-01 20:30:59

Snippet is a weekly podcast where I share snippets of coding knowledge.

{% spotify spotify:episode:1zCXsuzsc4GZZjZKaTFh8C %}

Originally posted on https://tiagojdf.com/

Today I want to talk about a coding principle that I think really shapes the way I code. This principle is “Less is more”.

Last week I was working on improving web vitals, namely on loading images on scroll. Usually I would just add the loading=”lazy” attribute to the images and be done with it.

The thing is, on this particular page we used some legacy code to load the images that used divs and background images. This code used some complex logic, and it impacted our templates, the frontend and the backend.

As I was working on the frontend version of the code I noticed that a parameter was never used. My first reaction was to delete it, but before I could do that I had to check if the equivalent version of the backend code used it. Turns out it did. I proceeded to see if any of these functions was ever called with that parameter. Turns out they weren’t, so I could safely delete the parameter and simplify the whole code.

This means that whoever implemented this code, did so thinking “What if we need this in the future?”. As someone from their future who had to work on their code, I can safely say we don’t need this, and we never did.

Whoever wrote that code spent time working on a future case that never happened, making their code more complex to use, harder to maintain, harder to read and harder to change. This code was 7 years old. By removing it I made life easier for me and for whoever has to work on it next.

So, next time you think “What if we need this?”, remember that you don’t need it right now, and that you can always add it later. Remember that if you add it, you are making your code harder to use, maintain, read and change for yourself and for others. Remember that less is more.

If you can subscribe to the podcast [here](https://tiagojdf.com/#subscribe).
My first javascript experiment
Tags: javascript, learning
Published: 2021-03-01 20:10:00

---
title: My first javascript experiment
published: true
description: 
tags: javascript, learning
//cover_image: https://direct_url_to_image.jpg
---

Dear internet, I decided to learn javascript. ES6 has some pretty cool features, and the minimal syntax is freaking awesome. I am learning mainly from freecodecamp.org, youtube and a book I stumbled upon a while ago: eloquent javascript.

There is a long road ahead, however everything starts with a first step, so here I am taking the first step with this exercise.

So, I made a simple script that makes a non-uniform rectangles 
grid on the screen, the result can be considered more or less generative art.

First I start with an array of random numbers where each number is unique.

```JS
const myArr = [];

function randomize() {
	maxNo = 16; // range of the random generated nr
	rNo = Math.floor(Math.random() * Math.ceil(maxNo)) // generate random nr
	const summit = myArr.reduce((a, b) => (a + b), 0); // sum of array numbers
	
	// see if the total is 100
	if (summit < (100 - maxNo)) {
		if (myArr.includes(rNo)) {
			randomize();
		} else {
			myArr.push(rNo);
			randomize();
		}
	} else {
		return
	}
}
```
Next I am going to create the html elements

``` JS
function populate() {
	randomize();
	// Prepare your array
	const arrDiff = (100 - myArr.reduce((a, b) => (a + b), 0))
	myArr.push(arrDiff);
	myArr.sort((a, b) => a - b);

	// populate the html
	const myCompo = [];
	const freak = document.querySelector('#monsters');
	const roar = document.createElement('div');
	roar.classList.add('roaw');
	freak.appendChild(roar);

	myArr.forEach (function(el, item) {
		let node = document.createElement('div');
		node.style.width = el + 'vw';
		node.style.gradient
		myCompo.push(node);
	});

	// Insert them all inside the container
	myCompo.forEach(function(el) {
		roar.appendChild(el);
	});

	myArr.forEach(function(el) {
		clone = roar.cloneNode(true);
		clone.style.height = el + 'vh';
		freak.appendChild(clone)
	})
} populate();
```

You can see this experiment live on [codepen](https://codepen.io/nedzen/pen/gOLzaVe)

Feel free to let me know what you think.
A database of 21 million users has been published in darknet
Published: 2021-03-01 20:06:50



<div>A database of 21 million users of free VPN apps for Android has been published on shady forums. It includes email addresses, passwords and logins, as well as information about mobile devices and payments.</div>

<div>The leak was discovered by CyberNews experts. The database contains customer data for applications such as GeckoVPN, SuperVPN, and ChatVPN. The base is dated February 24. It contains user data from Russia and the Middle East.</div>

<div>SuperVPN is considered one of the most popular VPNs for Android with over 100 million downloads on Google Play. GeckoVPN has 10 million downloads and ChatVPN has 50,000.</div>

<div>Previously, the data of SuperVPN users has already been made public as part of a large-scale leak. Then 1.2 TB of data from several VPN providers appeared on the network, which included passwords, personal information and a list of websites visited by users. Security researchers found several copies of Internet activity logs on their shared server, although ISPs officially promised not to store the information.</div>

<div>The seller of the database claims that he was able to penetrate the storage due to the fact that the services did not change passwords on their servers for a long time.</div>

<div>Fraudsters can now use data from such a database for phishing and man-in-the-middle attacks.</div>

<div>Experts believe that the new leak occurred due to "obvious negligence in handling confidential information", since "the owners of the services simply did not change the default passwords on their database servers."</div>

<div>Some experts have suggested that free VPNs sell customer data to advertisers to make money. According to some of them, individual applications provide information about clients to intelligence agencies.</div><br><br><a href="https://exceed-team.com/tech/darknet-database-published">The darknet sells a database of 21 million users of popular VPN services | Exceed Team Blog</a>
Autocomplete like a boss!
Tags: webdev, javascript, html, beginners
Published: 2021-03-01 20:02:26

---
title: Autocomplete like a boss!
published: true
description: Never use a span again, autocomplete with datalist!
tags: webdev, javascript, html, beginners
series: Web Dev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8npjfym2ek9k4btlu5th.png
canonical_url: https://jordanfinners.dev/blogs/autocomplete-like-a-boss
---

# Contents 
1. [Intro](#intro)
2. [Datalist](#datalist)
4. [Example](#example)
5. [Summary](#summary)

# Intro <a name="intro"></a>

Often, we need to help a user search or look for something that is domain specific to your application.
Enter autocomplete!

I've seen this done many, many, many different ways. Please no more `<span>`s!

# Datalist <a name="datalist"></a>

Enter datalist, this provides a set of recommended options for the user to choose from.
This list can be hardcoded to a specific set, or you can load in your own dynamically!

Datalists are great because they handle matching the users input against the results and you can add options from API results too.

You link this to an input element via the `list` attribute.

One thing to note there is also the browsers autocomplete, e.g. where Chrome (or your browser of choice) remembers your text input, this can be controlled using the `autocomplete` attribute on the input. You can disable it, or use it to your advantage. Check it out [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).

This one is definitely easier to do by example, so let's jump in.

# Example <a name="example"></a>

Shut up and show me the code.
```html
<label>Choose a browser from this list:
<input list="browsers" name="choice" />
</label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>
```

You can see how easy it is to do! [Try it out here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist).

A common use case is for search which is also really easy to achieve. You can see an interactive example below.
We use a `search` type input, and when the user types we go off an do some work to return some results. In this case just search an array but this could be a request to an API or database etc.

{% jsfiddle https://jsfiddle.net/b2jrn57g/ result,html,css,js %} 

# Summary <a name="summary"></a>

In summary, you can use what browsers give you to create your own search and autocomplete!
As with all native HTML elements, it means less bytes shipped to the client.
It also means accessibility will be handled by the browsers which is normally best.

It works across all browsers, so give it go! Get searching! :D 

Happy building!