teleren/devto huggingface dataset:
Behind Open Source projects there are people
Tags: opensource, career
Published: 2020-07-09 21:15:27

Many **engineers** forget when contributing to _Open Source projects_ that behind all _projects_ we have **people**.

We don't know the people on the other side (project maintainers) and how they will receive our contribution, this generates the need for communication to be clear and we don't assume that the maintainers (contributors) have the same knowledge as us (we have no way to know what other people have knowledge), even concepts that we find obvious is important to make clear in communication (issue, pull request and so on).

Don't be attached to code - code is a way to get to the solution of a problem. It may be that your implementation of code or communication is not clear, do not take negative feedback to the personal side, in general contributors look at the implementation that is coming - but remember that this is not a rule, I cannot speak for all projects and/or people.



When you're on the project maintainer side: look at each contribution as the best possible contribution from the person, they (the person who built it) have left their tasks to contribute to a project that isn't theirs, try to understand why they had an affinity to the project - this will help you create a community (you'll have help to maintain the project). One of the things that I think is "successful" is when you have a community involved with people with diverse realities and needs, it helps the project grow. Especially when we can give attention to new contributors, training leaders is essential to any project.

> Good contribution my friends, I hope I have encouraged you to contribute with some Open Source project.

[See the projects that I maintain and already contribute](https://github.com/avelino), you need help to contribute and/or maintain Open Source project contact me [t AT avelino DOT xxx](mailto:t+opensource@avelino.xxx). Stay informed about what's new in the Open Source world by subscribing this [newsletter](https://mailchi.mp/fd3190254650/open-source).
A Quick Tip for Aspiring Web Developers!
Tags: webdev, quicktip, tips, tricks
Published: 2020-07-09 21:01:12

Okay, quick article for newbie web developers out there. When designing a website, I have discovered (not too long ago) that drawing your ideas will make life so much easier. I did it when I designed the Fivnex website, and my latest WIP venture had to go through it twice (but making a better product). Don't just design the desktop website either on paper/graphics design, draw the mobile and tablet views in both vertical and horizontal views. It will save a TON of time and energy. This actually is what brought me from zero to hero in web dev, that and flexboxes.
How to Disable Notification Sound in Messenger for Android?
Tags: facebook, android, messenger
Published: 2020-07-23 21:11:09

---
title: How to Disable Notification Sound in Messenger for Android?
published: true
date: 2020-07-09 20:39:55 UTC
tags: facebook,android,messenger
canonical_url: https://asawicki.info/news_1730_how_to_disable_notification_sound_in_messenger_for_android
---

Applications and websites fight for our attention. We want to stay connected and informed, but too many interruptions are not good for our productivity or mental health. Different applications have different settings dedicated to silencing notifications. I recently bought a new smartphone and so I needed to install and configure all the apps (which is a big task these days, same way as it always used to be with Windows PC after "format C:" and system reinstall).

Facebook Messenger for Android offers an on/off setting for all the notifications, and a choice of the sound of a notification and an incoming call. Unfortunately, it doesn't offer an option to silence the sound. You can only either choose among several different sound effects or disable all notifications of the app entirely. What if you want to keep notifications active so they appear in the Android drawer, use vibration, get sent to a [smart band](https://asawicki.info/news_1718_xiaomi_smart_band_-_a_very_good_purcharse), and you can hear incoming calls ringing, you just want to mute the sound of incoming messages?

Here is the solution I found. It turns out you can upload a custom sound file to your smartphone and use it. For that I generated a small WAV file - 0.1 seconds of total silence. 1) You can download it from here:

[**Silence\_100ms.wav**](https://asawicki.info/Download/Misc/Silence_100ms.wav) (8.65 KB)

2) Now you need to put it into a specific directory in the memory of your smartphone, called "Notifications". To do this, you need to use an app that allows to freely manipulate files and directories, as opposed to just looking for specific content as image or music players do. If you downloaded the file directly to your smartphone, use free [Total Commander](https://play.google.com/store/apps/details?id=com.ghisler.android.TotalCommander) to move this file to the "Notifications" directory. If you have it on your PC, [MyPhoneExplorer](https://play.google.com/store/apps/details?id=com.fjsoft.myphoneexplorer.client) will be a good app to connect to your phone using a USB cable or WiFi network and transfer the file.

3) Finally, you need to select the file in Messenger. To do this, go to its settings > Notifications & Sounds > Notification Sound. The new file "Silence\_100ms" should appear mixed with the list of default sound effects. After choosing it, your message notifications in Messenger will be silent.

![Facebook Messenger Android Notification Sound Silence](https://asawicki.info/files/Facebook_Messenger_Android_Notification_Sound_Silence.png)

There is one downside of this method. While not audible, the sound is still playing on every incoming message, so if you listen to music e.g. using Spotify, the music will fade out for a second every time the sound is played.
ScaleChamp
Tags: dbaas, mysql, redis, postgres
Published: 2020-07-09 20:38:38

Just want you to know that there is a [ScaleChamp](https://www.scalechamp.com) Managed Databases available.

ScaleChamp is a multi-cloud victorious managed databases provided with support of PostgreSQL, MySQL, KeyDB, KeyDB PRO and many more choices.

Just select a service, cloud (from 11 available), region/AZ and choose preferred configuration and you are ready to go!

{% youtube eN8nYMaunsU %}

{% twitter 1282663571571314688 %}
Customize Your Ubuntu a bit !
Tags: ubuntu, linux, tweaks, customize
Published: 2020-07-09 20:34:14


I have installed Ubuntu and I had been trying a lot and testing everything to make my system as beautiful as possible.
so let's Customize (▀̿Ĺ̯▀̿ ̿)
          
___


>Tweaks :
===
The first step is to make sure that we have the universe repository enabled on our Ubuntu system:
```
sudo add-apt-repository universe
```
Now install Tweak Tool on your Ubuntu system:
```
sudo apt install gnome-tweak-tool
```
 
##SHELL   Config##
shell is locked by default in Ubuntu, Here is how to unlock it.
```
sudo apt install gnome-shell-extensions
```
Restart your system
then,
 
![](https://149366088.v2.pressablecdn.com/wp-content/uploads/2020/04/open-extensions.jpg)
Open GNOME Extensions app
      
  
    
![](https://149366088.v2.pressablecdn.com/wp-content/uploads/2020/04/enable-user-themes-extension-750x419.jpeg)
Turn On 'User Themes'

After These :
>Then you need to log out and back into your session OR manually restart GNOME Shell (Alt + F2, type r, hit enter)


![](
https://149366088.v2.pressablecdn.com/wp-content/uploads/2020/04/select-yaru-dark-theme-750x419.jpeg)
Turn On 'User Themes'
>Select ‘Appearance’ in the sidebar
>Locate the Shell section
>Select THE SHELL THEME that you want from the menu

___
My Recommendation can make your system, A __GodDamn__ Awesome Ubuntu:
  
▷	   Applications: Orchis
▷	   Cursor: Yaru
▷	   Icons: Numix-Circle
▷	   Shell: Orchis-Dark




![](https://cdn1.bbcode0.com/uploads/2020/7/9/3c76a303e032140edfce343db6c8786b-full.png)

##How To Install Them?##
Orchis and Orchis-Dark:
```
git clone https://github.com/vinceliuice/Orchis-theme
cd Orchis-theme
./install.sh
```

Numix-Circle :
```
sudo add-apt-repository ppa:numix/ppa
sudo apt update
sudo apt install numix-icon-theme-circle
```
___


>WallPaper (^̮^):
===

I highly recommend you to find your __Wallpaper__ from [Unsplash](https://unsplash.com/)
Why:
>Perfect Pictures
> High-Quality Pictures
>Over 1.5 million photos

___
___
___

Thanks for your attention, hope you make the most beautiful Ubuntu and _eNJOY!_

Revisto
React - how to render adjacent JSX elements
Tags: react, javascript, tutorial, webdev
Published: 2020-07-09 19:40:23

If you've been using `React` you must know already that we are only allowed to render one `JSX` (that code you find in the `return` statement and looks like `HTML` but it's not) element at a time. Trying to break this rule will result into an error like the one we can see bellow:

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

**SyntaxError:** `Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?`

This can be easily fixed by wrapping our two elements into a `div`, which would be treated by `React` as the single element it needs to behave correctly..

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

Another way to avoid this problem is by transforming the code in the return block into an array of elements. It looks weird and I never use this approach but it's good to know it's out there (note that you still need to provide a unique key for each element so you don't get an error):

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

We could also wrap all our elements into a `React.Fragment`. It lets us group as many components as we want, without adding an extra node to the DOM. It behaves similar to a `div` and I don't think it has any real advantages over `divs`, unless we use it in really large applications where not creating extra nodes would help performance. You can write a `React.Fragment` in two ways: `<React.Fragment></React.Fragment>` or `<></>`.

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


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

Another solution to our problem would be a `HOC` (higher order component). We can create one with the single purpose of wrapping our `JSX` elements every time we need to (since it's a component as any other, it's reusable and we can include it in our code as many times as we want).

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

We create a `HOC` which does nothing than rendering its children (which in our case are all the `JSX` elements we need to display).

*__Every React component has a special (default) prop called `children` and the `children` represent everything we want to put in between the opening and the closing tags of a component.__*

*Image source: Goran Ivos/ @goran_ivos on Unsplash*
GitHub Secret: Add a README to your Profile
Tags: github, secret, readme, tutorial
Published: 2020-07-09 19:33:14

So I just played around with the 'repository creation' page on GitHub and found a secret which I wasn't aware they added, so I thought I'd share it with you guys!

If you try creating a repository named exactly after your GitHub username, a little message pops up telling you that you've found a secret. Let me show you!

![GIF](https://dev-to-uploads.s3.amazonaws.com/i/k2jhmyujwown2nv94has.gif)


> You found a secret! puf17640/puf17640 is a ✨special ✨ repository that you can use to add a README.md to your GitHub profile. Make sure it’s public and initialize it with a README to get started.


It's as easy as that, create a public repository with your username and add a README.md file to it. The README will then be automatically added to your profile. 
You can see [my GitHub profile](https://github.com/puf17640) below.

[![puf17640 GitHub](https://dev-to-uploads.s3.amazonaws.com/i/z6ynes24nivzb3iuia5s.png)](https://github.com/puf17640)

Since it's markdown, you can add links and pictures and everything else you can add to a normal README file. 
Awesome, isn't it?

Have fun adding a detailed and cool description to your GitHub profile! I will update mine soon since what you see above is just what I played around with, I went straight to writing the article you just read! 🤪
Using Apollo with multiple Graphql endpoints 
Tags: apollo, graphql, shopify, react
Published: 2020-07-09 19:26:42

---
canonical_url: https://www.jamalx31.com/tech-posts/using-apollo-with-multiple-graphql-endpoints
---

If you are using Graphql you may already faced this issue where you have your own Graphql server and also needs to query data from a 3rd party API. 

If this API is REST then no problem, you can just use fetch, Axios, etc. But what if this API is using Graphql? How can you tell your Apollo client if a query/mutation belongs to your backend or the other API?

I ran into this issue while developing my first Shopify App. I have Graphql on my backend and Shopify recently migrated to Graphql.

In this post, I will share how I managed to use the same Apollo client to communicate with both.

We can make this happen in 3 simple steps:
1- Create HttpLink to each endpoint

```javascript
import { ApolloLink } from "apollo-link";

const myLink = new HttpLink({
  uri: '/graphql',
  // other link options...
});

const thirdPartyLink = new HttpLink({
  uri: 'website/graphql',
  // other link options...
});
```

2- Configure Apollo client 
```javascript
import { ApolloClient } from 'apollo-client';

const client = new ApolloClient({
  link: ApolloLink.split(
    operation => operation.getContext().clientName === "third-party",
    // the string "third-party" can be anything you want,
    // we will use it in a bit
    thirdPartyLink, // <= apollo will send to this if clientName is "third-party"
    myLink // <= otherwise will send to this
  )
  // other options
});
```

3- finally, when you want to call a query or mutation you just need to pass the clientName to Apollo like this: 
```javascript
useQuery(QUERY, { variables, context: { clientName: 'third-party' } })

// useQuery is a React hook, it may look different for you if you are using something else 
```

That's all! the magic happens inside `ApolloLink.split`. You give each query/mutation a "context" and apollo figures out where to send it!

Happy coding ✌️
Sync your icons with Figma API
Tags: react, javascript, design, node
Published: 2020-07-09 19:20:57

## Problem

Adding or editing assets often requires two people to make the change: designer and developer. They have to sync after every update, which is often quick but interrupts other work.

## Solution

Figma API makes it possible to extract almost any data from design files into your project. 

One obvious integration many projects can benefit from is syncing your svg files with Figma. I will use figma-api-exporter, it is still an early version, but it was already tested in production. Feel free to contribute.

###Requirements

- Figma Access Token - follow the [instruction](https://www.figma.com/developers/api#access-tokens)
- Figma File with icons changed to components
- `figma-api-exporter` installed in your project

### Downloading icons as svgs

```javascript
const figmaApiExporter = require('figma-api-exporter').default;

const exporter = figmaApiExporter(YOUR_ACCESS_TOKEN);

exporter
  .getSvgs({
    fileId: FIGMA_FILE_ID,
    canvas: 'Icons',
  })
  .then(async svgsData => {
    await exporter.downloadSvgs({
      saveDirectory: './figmaIcons',
      svgsData: svgsData.svgs,
      lastModified: svgsData.lastModified,
      clearDirectory: true,
    });
  });
```

Save it as `YOUR_NAME.js` file and run with node `YOUR_NAME.js`. You should see files appearing in figmaIcons directory.

### Displaying all available icons (ex. in Storybook)

By default there is no easy way to import all files from directory. However, you can use [create-index](https://github.com/gajus/create-index) to generate `index.js` file with files exported as modules after every sync.
```javascript
const { writeIndex } = require('create-index');
const path = require('path');

...

  await exporter.downloadSvgs(...)
  writeIndex([path.join(__dirname, './figmaIcons')], {
    update: true,
    extensions: ['svg'],
  });	
```
`index.js` will look like this:
```javascript
export { default as Icon1 } from './Icon1.svg';
export { default as Icon2 } from './Icon2.svg';
export { default as Icon3 } from './Icon3.svg';
```
Then in Storybook you can import all svg files and iterate over them:
```javascript
import * as allSvgIcons from './figmaIcons';
```
### Making it work in production
#### Option 1: Plug it into CI
Make your script run on every deployment. Every deployment will update the icons to the latest version. The downside is an increased build time.
#### Option 2: Sync and push
If you are concerned about your deployment time you can run script locally and push new/updated files to repository. It is a less preferred option, as its removes most of the automation. You have to still perform some action after designer updated the icons.

---

I'm regularly publishing my insights on web development. 
Consider [subscribing to my newsletter](https://slawkolodziej.com/newsletter).
Visit my blog at [slawkolodziej.com](https://slawkolodziej.com) to find out more interesting content.
Follow me on [Twitter](https://twitter.com/slawkolodziej).
AzureFunBytes Episode 5 - Windows Virtual Machines on @Azure with @TechieLass

Published: 2020-07-09 19:02:55

Welcome back to another episode of AzureFunBytes.  Every week we dive into different Azure Fundamentals in an easy to understand Twitch show.

This week, all the way from Scotland, @TechieLass will help me solve three problems on twitch!

{% youtube 6LaaqHIHY2Y %}
 
How do we start a new Win VM?
How do we prep this VM for prod?
How do we handle cost management?

Sarah and I will discuss her tenure in technology with me and even answer some questions.

Techie Lass Blog: https://techielass.com/

AzureFunBytes! - Byte-sized content with a live Twitch show!

Learn about
Azure fundamentals with me!

Live stream is available on Twitch at 2 pm EDT Thursday. You can also find the recordings there as well.

https://twitch.tv/azurefunbytes
https://twitter.com/azurefunbytes

Join me, ask questions and learn about Azure!

What is IaaS? https://cda.ms/1pG
Microsoft Learn: Azure Fundamentals https://cda.ms/1jV
Microsoft Learn: Deploy a website with Azure virtual machines https://cda.ms/1pF
Microsoft Azure: $200 Free Credit https://cda.ms/1pD
Road to Genius: advanced #44
Tags: javascript, beginners, codenewbie, computerscience
Published: 2020-07-09 18:50:28

Each day I solve several coding challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, and you will learn a ton of new and interesting things as you go.

```JS
function maxa(arr) {
  let 💰 = 0;
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.🚀; j++) {
      let cA = Math.abs(i - j);
      cA *= Math.min(☃️[i], arr[j]);
      if (cA > max)
        max = cA;
    }
  }
  return max;
}
let A = maxa([5, 💧, 3, 7, 1, 4]);

// ☃️ = ? (identifier)
// 🚀 = ? (identifier)
// 💧 = ? (number)
// 💰 = ? (identifier)
// such that A = 20 (number)
```

Today's challenge is relatively simple but does require some brain power.

The first bug 💰 is a variable declaration, after quickly skimming all lines the only variable that's used but hasn't been declared yet is `max`.

The second bug 🚀 is very likely to be the propery `length` of an array.

The third bug ☃️ is a variable which is being used in an array like fashion, just like its neighbor, so my best bet is that it should be `arr`.

The final bug 💧 should be a number, and it's part of the input for the function `maxa`; we must ensure that `A = 20` to complete the challenge. To determine this number we have to analyze what the function does.

The funcion `maxa` begins with a for-loop starting at `i = 0` over all numbers, then a second for-loop that starts at `j = i+1`. The variable `cA` determines the distance between `i` and `j`, it's then multiplied by the minimum of the values at `i` and `j`; finally the largest recorded value for `cA` is stored in (and returns) `max`.

The goal is to find `i` and `j` such that `max = 20`. Let's write in pseudo-code to help us out:
```JS
max = cA * min(arr_i, arr_j)

factors of 20 are:
1 * 20
2 * 10
4 * 5

-----

let Y = abs(i - j),        Y must be either 4 or 5
let Z = min(arr_i, arr_j), Z must be either 5 or 4
then cA = Y * Z = 20

-----

the largest value for Y is abs(0 - 5) = 5
then Z = min(5, 4) = 4
then cA = 5 * 4 = 20  --> requirement met
```
Since the position of 💧 in the array is neither 0 or 5, its value doesn't matter as long as it won't result in a `cA` value larger than 20. So we can pick the smallest value such as 1:

![coding challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/wd8k3q7rpnaor9ovmf3s.png)

By solving these challenges you train yourself to be a better programmer. You'll learn newer and better ways of analyzing, debugging and improving code. As a result you'll be more productive and valuable in business. Get started and become a certified Codr today at https://nevolin.be/codr/
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2020-07-09 18:23:23

---
title: Top 5 DEV Comments from the Past Week
published: true
description: The comments from this past week that you don't want to miss!
tags: bestofdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/2pos0q5qmozo1g8a3qhb.png
---

This is a weekly roundup of awesome DEV comments that you may have missed. You are welcome and encouraged to boost posts and comments yourself using the [#bestofdev](https://dev.to/t/bestofdev) tag.


@kailyons shared some reassuring advice for anyone getting started with programming who has language-paralysis in the [What's the worst advice you ever received](https://dev.to/ben/what-s-the-worst-advice-you-ve-ever-received-2mlc) thread.
{% devcomment 11hil %}


@j4ng5y summed up the ultimate satisfaction of being a developer.
{% devcomment 11ejd %}

@timothyokooboh shared a warm welcome for those new to Vue — and four steps to getting started.
{% devcomment 11g8c %}

@fratcliffe might be up for a promotion in the near future 🎉 

{% devcomment 11c5h %}


@samuelfaure has a balanced perspective on Linux configuration 
{% devcomment 11dp4 %}

See you next week for more great comments ✌
How to Add a README to Your GitHub Profile
Tags: github, tutorial, git
Published: 2020-07-09 18:23:21

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jt11mxbobdv7gxf50odi.png)
**GitHub just dropped a new feature today.**

You can now add a README to your GitHub profile! Think of it like an *About Me* section for your GitHub.

Here's how it works:
1. Create a repo with your GitHub username (i.e. https://github.com/jeannienguyen/jeannienguyen)
2. Create a `README.md` file inside the repo (you can initialize your repo with a README)
3. Add content to your README (i.e. intro text, contact links, etc)
4. Commit and `git push` your changes

That's it! I've included my profile and would love to see what your GitHub profile looks like--feel free to share the link to your profile below.

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