teleren/devto huggingface dataset:
Invest time into writing questions: Tips for writing better questions
Tags: beginners, writing
Published: 2021-07-19 12:11:58

The essence of writing code is problem solving. This problem solving will often be a solitary task, you, the keyboard and a code editor. Not all problems are easily solved in this vacuum. For many problems we will benefit from the help of others.

Every problem or task when writing code is a chance to learn from others. A complex task can usually benefit from the input of multiple developers. 

The more effort we put into asking a question, the more likely we will get an appropriate answer. When posing a question, whether this be over slack, email or in person, we should think of the time put into asking this question as an investment. A poorly framed question with little context will likely yield low quality answers, if any at all. **A well structured question that describes the problem in full is far more likely to be answered well.** With that, let's look at how we can ask better questions.

Asking good questions is all about context. We should frame the question with as much information as we can. When asking online you will likely need to give more context that when asking within a team. The same rules generally apply to either scenario though.

## 1. Include information on the environment
A key piece of information will always be where this software is running. Is this a performance issue in production? Is this on your local machine? Documentation should be provided with any steps required to set up the environment.

## 2. Your issue should be reproducible
If there are some UI steps required to reproduce a bug, be specific about these. Include the branch name if relevant. Always have your code pushed to a remote repo.

If you are asking online (stack overflow), create a reproducible code sample on Codepen, Code Sandbox or some other publicly available sandbox. 

## 3. Include errors
Don't stop at describing the issue. Include any stack traces from logs or console output. Check the network tab for any related network errors and include anything that is relevant

## 4. List the steps you have taken
Give information on what you have already tried. What commands did you run? What code did you change? What debugging did you do? This will help frame the question and narrow the focus by eliminating these steps.

## 5. Link to code
When the question is on a specific piece of code, link to this in github or give a file path and line number. Don't just give a function name. Help other developers find the code you are referring to.

## 6. Explain the problem in full
For more general questions on what technology or a library to use, explain what you are trying to achieve. List the things that matter as well as what matters less. Include any constraints you may have.

In summary:
- Ensure you give enough information so that the same state can be reached in the application
- Add as much context as you can
Cordova FCM Custom Notification Icon
Tags: javascript, cordova, newbie
Published: 2021-07-19 12:00:58

Cover image from [pexels](https://www.pexels.com/) by [Pixabay](https://www.pexels.com/photo/close-up-of-human-hand-256514/)

From my other blog post, about [Cordova FCM-Push Notification](https://dev.to/mrbrowny/cordova-fcm-push-notification-3198), I want to write on how to add your user custom notification Icon in your App.

#
    PS: This icon will only be of 1 color, black and white 😥

## Table of Content
  * [Modifying the Icon](#icon)
  * [Moving Downloaded Files to res Folder](#res)
  * [Editing Config.xml](#config)
  * [Updating the FCM JSON Data](#json)

### Modifying the Icon ✨ <a name="icon"></a>

One thing you need to have in mind is that the icon will be of one color (white & black), and must be in the correct dimension and package name. To be on a safe side, you will need to upload your icon to [Android Asset Studio](http://romannurik.github.io/AndroidAssetStudio/icons-notification.html#source.type=image&source.space.trim=1&source.space.pad=0&name=notification_icon), which would help you format the icon, when you're done, click on the download icon, to download the zipped file.

### Moving Downloaded Files to res Folder 💌 <a name="res"></a>

In your cordova root folder: 
##
    1. Open the 'res' folder found within your 'cordova' root folder.
    2. Select (for the course of this blog) android folder.
    3. Create a new Folder called 'notification_icon'.
    4. Copy and paste the files from the zip file you downloaded earlier.

### Editing Config.xml 🎮 <a name="config"></a>

Open your config.xml file, copy the below lines of code into the file:

```js
  <platform name="android">
        <resource-file src="res/android/notification_icon/drawable-mdpi/notification_icon.png" target="app/src/main/res/drawable-mdpi/notification_icon.png" />
        <resource-file src="res/android/notification_icon/drawable-hdpi/notification_icon.png" target="app/src/main/res/drawable-hdpi/notification_icon.png" />
        <resource-file src="res/android/notification_icon/drawable-xhdpi/notification_icon.png" target="app/src/main/res/drawable-xhdpi/notification_icon.png" />
        <resource-file src="res/android/notification_icon/drawable-xxhdpi/notification_icon.png" target="app/src/main/res/drawable-xxhdpi/notification_icon.png" />
        <resource-file src="res/android/notification_icon/drawable-xxxhdpi/notification_icon.png" target="app/src/main/res/drawable-xxxhdpi/notification_icon.png" />
  </platform>
```

### Updating the FCM JSON Data 📀 <a name="json"></a>

On your FCM payload, either from Postman, or the Backend (server side), change the 'Icon' key's value to 'notification_icon'. e.g

```json
{
  "notification":{
    "title":"Selyct",
    "body":"Otuonye Kossy accepted your ride",
    "sound":"default",
    "click_action":"FCM_PLUGIN_ACTIVITY",
    "icon":"notification_icon"
  },
  "data":{ Data you want to send to the device... },
  "to":"device_token",
  "priority":"high"
}
```

### You should be able to see the icon on the notification Status, when you send a push notification to the device. 🎇🎆🎇✨🎉🎊
Daily Developer Jokes - Monday, Jul 19, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-07-19 12:00:23

---
title: "Daily Developer Jokes - Monday, Jul 19, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Monday%2C%20Jul%2019%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258be05ecc.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What did the computer do at lunchtime?

___A:___ Had a byte!
 -->
Dependabot: what is your favorite configuration (approach)?
Tags: discuss, github, cloud, devops
Published: 2021-07-19 11:42:10

Hello everyone! You probably well know and often use [Dependabot](https://dependabot.com/) in your projects. It's quite nice tool for automating the management of a project dependencies. I also use it on many Github repositories I manage. And recently I started noticing that I spend quite some time to manage the PRs. Dependabot can easily overwhelm you with the auto-generated PRs. Especially if you manage many repositories.

My typical config is quite simple right now:

```yaml
# .github/dependabot.yml

version: 2
updates:
  - package-ecosystem: npm
    directory: "/"
    schedule:
      interval: daily
    commit-message:
      prefix: "[skip ci]: "
```

I was wondering what hacks do you guys use in your routine? Maybe you have found a nice approach here? Please share it if so! Thank you all in advance!
Looking for a Full Stack job
Published: 2021-07-19 11:36:28

Hello everyone.
My name is Macro Jin Chinese freelancer. 
As a senior full stack engineer, I've 6 years of experience in javascript technology such as react.js, vue.js, mongodb, express.js and node.js.
In several companies, I've built the many website like shopify, job board etc.
I can work 40+ hours a week and provide a real-time communication from a remote location.

I'm always happy to share idea and work for clients to bring their ideas into reality.

Waiting your invitation.:)

My Skype Name: Star_Mercury 
         ID: live:.cid.a93df03a7c4e08a1

Thank you.
Best regards.
Macro.
Source Notify - Pull Requests management made easy.
Tags: swift, ios, software, sideprojects
Published: 2021-07-19 11:18:54

#Fu*****, Sh***** - This Pull Request notifications are annoying!

####Is there a better way to manage Pull Requests without hundreds of email/slack notifications?

This was the big question I wanted to answer with Source Notify, The developer tool you need to manage all your pull Requests easily on your menu bar for macOS.

Source Notify was developed for those who use Github, GitLab, Bitbucket or Bitbucket Servers to manage their Pull Requests. The app allows the user to manage their Pull Requests from all the git clients in one place and in the macOS menu bar showing all the necessary data the developer needs to check before going to the website.

Pull Requests management was always a bit annoying to do, because after a couple of hours receiving that someone of your team commented, pushed, merged something on a Git would make you turn off the notifications or just ignore them because they are just to much. 
From now on, this is not a problem anymore, Source Notify let’s you see if you have any comments or if you need to approve a Pull Request by simply showing you icons and the most amazing thing is that it doesn’t do any sounds to let you know you have new notifications, it simply shows a different icon on the menu bar if that is the case, and like that you check them when you have the time on your timeline.

Let’s imagine you are subscribed to some Repository but you don’t want to receive any notification on the Pull Requests, Source Notify lets you filter whatever Repositories are important for you to follow! No more spam for you!

**** On the next version:

Source Notify will allow you to see the build status of your last commit! YES, you read it well, no more going to your git client website or waiting for that notification on slack saying the build passed, that is over! Source Notify shows you easily the build status on your Pull Request!

Source Notify comes with a free plan, where you can connect a Github account and have one filtered repository.

Premium plan allows you to connect all the other clients and have some great awesome features like choosing the time between syncs, filtering unlimited repositories and much more will come in the future.

You can try Premium for one week for free!

<a href="https://apps.apple.com/us/app/source-notify/id1570433591"><img alt="" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wj74q4rfi8xd2nm0e7po.png"></a><a href="https://github.com/SourceNotify/macOS-App/blob/main/README.md"><img alt="" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s700jlbx7q4y6fgzi611.png"></a>
Run Docker commands inside Jenkins Docker container
Tags: docker, jenkins, devops
Published: 2021-07-19 11:14:10

#Introduction
If you want to initiate docker containers from within your jenkin containers,this is what you have to do:
* In the Jenkins Dockerfile, add commands to get docker, docker-compose installed. 
* bind mount the docker socket.

And thats it! This is how the Dockerfile looks like:

##Jenkins Dockerfile
```
FROM jenkins/jenkins

# Docker install
USER root
RUN apt-get update && apt-get install -y \
       apt-transport-https \
       ca-certificates \
       curl \
       gnupg2 \
       software-properties-common \
       

RUN curl -fsSL https://download.docker.com/linux/debian/gpg | apt-key add -
RUN apt-key fingerprint 0EBFCD88
RUN add-apt-repository \
       "deb [arch=amd64] https://download.docker.com/linux/debian \
       $(lsb_release -cs) \
       stable"

RUN curl -L https://github.com/docker/compose/releases/download/1.27.4/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose \
&& chmod +x /usr/local/bin/docker-compose

RUN apt-get update && apt-get install -y docker-ce-cli

USER jenkins

```
Now to build the image:
```
docker build -t jenkins-docker .
```

To run the docker-image, including the volume mounts:
```
 docker run -d --group-add $(stat -c '%g' /var/run/docker.sock) \
-v /var/run/docker.sock:/var/run/docker.sock -p 8080:8080 -p 50000:50000 \
-v `pwd`/jenkins:/var/jenkins_home --log-opt max-size=50k   --log-opt max-file=5   --name jenkins -P jenkins-docker
```
Here you can see docker.sock file has been mounted.Also, jenkins_home folder has been mounted so that you can persist the information regarding your pipeline/configuration/users etc.
Dont forget to take backup of jenkins_home directory!


I have uploaded a [makefile](https://github.com/kdsama/Jenkins-Docker/blob/main/makefile) and a similar [Dockerfile](https://github.com/kdsama/Jenkins-Docker/blob/main/Dockerfile) on github.

And thats it!
Hi there, I am a full stack dot net web developer 
Published: 2021-07-19 11:09:42

Hi there, I am a full stack dot net web developer and my experience is year and half. I begun to learn 2 years ago and learnt (HTML, CSS, JS, GOlang, Python, Ruby) and then settled on DotNetCore 5.0. I welcome any help and any experience you may offer with gratitude. Thanks.
DesimeJS - Node Package
Tags: contributorswanted, help, npm, package
Published: 2021-07-19 10:56:36

I would like to make a node package called "desime"... If anyone is interested, please contact me at yeetedwin@protonmail.com. I don't know much of node.js, but I really would like to learn and if someone could help me making this I would really appreciate it! ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5m5q2t2n3vegahpimz0u.png)
Best 20 Website to Get Client for your Web developement Projects
Tags: webdev, android
Published: 2021-07-19 10:50:01

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3la7vtwfrg6wplmt03i.png)
**- How can I become a freelance worker with no experience?**
If you’re ready to get momentous about freelancing and accumulate your self-employed income, here we are providing some great steps that you should follow.

**1. Choose a specific Niche**
**2. Get Clear on Your Service Offerings**
**3. Define What Your Ideal Client Looks Like**
**4. Create a Great Portfolio Site**
**5. Level Up Your Skills**
**7. Build Your Credibility**
**8. Determine Your Pricing**
**9. Perfect Your Pitching**
**10. Blog Frequently**

## What are Best Websites For Freelance Work
#### 1-  **[LinkedIn and LinkedIn ProFinder](https://blog.codewithgauri.tech/blog/what-is-freelance-worker-30-sites/)**
#### 2-  [Upwork](https://blog.codewithgauri.tech/blog/what-is-freelance-worker-30-sites/)
#### 3-  **[Fiverr](https://blog.codewithgauri.tech/blog/what-is-freelance-worker-30-sites/)**
#### 4-  [Designhill](https://blog.codewithgauri.tech/blog/what-is-freelance-worker-30-sites/)
#### 5-[Toptal](https://blog.codewithgauri.tech/blog/what-is-freelance-worker-30-sites/)
#### 6-[We Work Remotely](https://blog.codewithgauri.tech/blog/what-is-freelance-worker-30-sites/)
#### 7-[Behance](https://blog.codewithgauri.tech/blog/what-is-freelance-worker-30-sites/)
#### 8-  [PeoplePerHour](https://blog.codewithgauri.tech/blog/what-is-freelance-worker-30-sites/)



[Read MORE HERE ](https://blog.codewithgauri.tech/blog/what-is-freelance-worker-30-sites/)
CSS before and After element : Everything you need to know about css pseudo element
Tags: css, html, beginners, webdev
Published: 2021-07-19 10:31:51

Hello, welcome. In this article we'll learn about CSS pseudo-elements.

#What is pseudo-elements ?

Pseudo-elements allow you to insert content on the page without writing HTML for it. You can make whole content with CSS. But that content is not actually a DOM element.

#`:before` and `:after`

###Syntax

```CSS
div:before{
   content: 'this is before element';
}

div:after{
   content: 'this is after element';
}
```
This is how we make `before` and `after` element in CSS. But, How does this will look like in HTML at the end.

```HTML
<div>
  ::before element

  <element/>

  ::after element
<div>
```

#Let's take a example.
Without before element.

{% codepen https://codepen.io/kunaal_kumar/pen/KKmqQxN %}

with before and after element.

{% codepen https://codepen.io/kunaal_kumar/pen/ZEKyrqJ %}

#Content property

Now, for `before` and `after` elements `content` property is very very important. Because, in order to make any pseudo element, you have to give some content. You cannot create element without content. And yes, I am saying this again and again because I forget this thing very often.

Values for `content` property :

i) `a text` :  `content: "this is a text";` you can give text as a content.

ii) `image` : `content: url(image-path);` You can also give image to the content. But, you cannot change the image size.

iii) `Empty` : `content: '';` when you don't won't any text or image to show up. You can make it empty. It use a lot to create designs.

#`:` or `::` ?

Now, we can make an element with single colon `:before` or we can use double colon `::before`. The only thing, you have to keep in mind is `::` double colon is supported by all browsers except Internet explorer 8. So, if you want, internet explorer 8 support. You have to use `:` colon.

So, that's it about pseudo elements. I hope you understood each and everything. If you have doubt or I missed some point let me know in the comments.

#Articles you may found Useful
1. [CSS Positions](https://dev.to/kunaal438/css-position-everything-you-need-for-good-developer-pfh)
2. [CSS Media Query](https://dev.to/kunaal438/media-query-everything-you-need-for-responsive-design-b8g)
3. [CSS flex box](https://dev.to/kunaal438/display-flex-complete-guide-on-css-flex-box-2021-5bi2)

And if you want to improve your webdev skills. You can watch tutorial on [Disney+ clone](https://youtu.be/ZeY9RicS2js) clone by me. If you like, you can subscribe my youtube channel, and follow me on instagram. I create awesome web contents. [<a href="https://www.youtube.com/c/modern_web?sub_confirmation=1">Subscribe</a>], [<a href="https://www.instagram.com/modern_web_channel/">Instagram</a>]

Thanks For reading.
Manifesto for Agile Software Development
Tags: agile, webdev
Published: 2021-07-19 09:45:38

[Manifesto for Agile Software Development](https://agilemanifesto.org/iso/en/manifesto.html)

**Individuals and interactions** over processes and tools
**Working software** over comprehensive documentation
**Customer collaboration** over contract negotiation
**Responding to change** over following a plan

プロセスやツールよりも**個人と対話**を、
包括的なドキュメントよりも**動くソフトウェア**を、
契約交渉よりも**顧客との協調**を、
計画に従うことよりも**変化への対応**を、
Onstro-DB a fast DB
Tags: python, pandas, database
Published: 2021-07-19 09:37:11

## Installation

```commandline
pip install onstro-db
```

### Let's see how fast it is.

In this example, we can make a DB with 4 columns and in which 2 columns have a default value. Which are added during **Runtime**.
We will be adding 10,000 values to the DB and check how fast it is.

The test code

```python
from onstrodb import OnstroDb
import time

test_schema = {
    "name": {"type": "str", "required": True},
    "age": {"type": "int", "required": True},
    "place": {"type": "str", "default": "canada"},
    "alive": {"type": "bool", "default": True}
}

db = OnstroDb(db_name="test", in_memory=True, schema=test_schema)


# generate the data to insert
data = []
for i in range(10_000):
    print(i, end="\r", flush=True)
    d = {"name": f"ad{i}", "age": i}
    data.append(d)


# insert the data into the DB
start = time.time()
db.add(data)
stop = time.time()

print("Elapsed Time: ", stop - start)

```

Here we first create all the data we want to insert and we time the insertion process.

Here are the results.

```commandline
Elapsed Time:  1.077016830444336
```

Onstro-Db supports full CRUD operation, comes with a simple CLI, has a strict schema, and also prevents data duplication by default.

### As you can see this thing is fast. To know more visit the Github repo [here](https://github.com/Adwaith-Rajesh/onstro-db).

Star and follow the repo for future updates.
Where to find a good data set for your projects
Tags: webdev
Published: 2021-07-19 09:35:00

- [Find Open Datasets and Machine Learning Projects | Kaggle](https://www.kaggle.com/datasets)
- [Dataset Search](https://datasetsearch.research.google.com/)

Reference
[Why You Need to Stop Taking Courses (From an Ex-Course Addict) - YouTube](https://www.youtube.com/watch?v=aLp-6C-p-T0&list=WL&index=14)
Learn how to integrate Flutterwave in Laravel 8 in 5min
Tags: laravel, php, flutterwave
Published: 2021-07-19 09:32:28

Learn how to integrate Flutterwave in Laravel 8 in 5min

[https://www.youtube.com/watch?v=eOyg6vCxE3g](https://www.youtube.com/watch?v=eOyg6vCxE3g)

Have you been thinking about how to integrate Flutterwave Payment Gateway in Laravel 8, you are at the right place.

Flutterwave is an African based fintech company that provides a payment infrastructure for global merchants and payment service providers across the continent.

Watch till the end for a full understanding

Like the video and comment your thought or any video request?
Using React within Your Svelte Applications
Published: 2021-07-19 09:22:48

## What is this post about?

This blog post is about, how can you inject your React components within your Svelte Application. A couple of reasons for this, but not limited to, are:
- You have a big codebase in React and you want to try a new piece of your Architecture in Svelte without jeopardizing all that you have built over the years
- You want to support a hybrid model so that your ReactJS Developers have time to keep up with Svelte until they finally move over
- You really need to integrate with this amazing ReactJS library and they do not have a Svelte version of it

And as a final note, let me just answer the question that is on the back of your head:

**You can do everything that you do in React in Svelte and more!**

## How can you build Svelte and React Side-by-side?

You will need at least 2 things:
- You need to install react and react-dom
React lives on the browser and Svelte compiles on the server, therefore you will need to render your React within Svelte onMount handlers
- To help you with this, I’ve built a nice abstraction and this is how it looks:

```js
<script>
  import Button from "@material-ui/core/Button";
  import ReactAdapter from "./utils/ReactAdapter.svelte";
</script>

<ReactAdapter
  el={Button}
  class="mui-btn"
  children="Hello"
  variant="contained"
  color="primary"
  onClick={() => alert("hello world!")}
/>

<style>
  /**
   * Styling a React Component from within a Svelte Component.
   */
  :global(.mui-btn) {
    margin: 20px;
  }
</style>
```

As you can see above I’m using the ReactAdapter. That adapter is an abstraction that basically, given a React component, expands all its props into the final rendered React component without you having to care how to inject the React component itself in Svelte.

For the full article, including a deep dive into the implementation of ReactAdapter [check this Medium article](https://jpepinho.medium.com/using-react-within-your-svelte-applications-3b1f2a75aefc).

The repo with docs and the code is here at [jpinho/svelte-react](https://github.com/jpinho/svelte-react)