teleren/devto huggingface dataset:
Create an app with react(context api) and ruby on rails by using chakraUI and Formik
Tags: react, rails, chakraui, webdev
Published: 2020-08-16 19:30:50

## Goal
The main goal of this app to understand how to create a react app on the basis of rails back-end api with the mixture of context-api(react) and chakraUI.

## App Overview
It is a CRUD app. Front-end is totally generic. You can use this react front-end app with any back-end api e.g django or node. 
In the previous React+Rails(RR) app, I used different structure and I mentioned that difference in the end. 

**Live Demo:** [blogApp](https://blog-frontend-react.herokuapp.com/)
**GitHub Repos:**
[reactFrontend](https://github.com/MA-Ahmad/blog-app-react-frontend) 
[backendApi](https://github.com/MA-Ahmad/blog-app-rails-backend)

# This App will help you:
* To configure and create a react app with rails back-end api.
* To use context api.
* To make async requests inside context api.

# Built with
* Ruby on Rails
* Reactjs (context api, react hooks, react-router)
* React-icons
* ChakraUI
* Formik
 

### **Previous apps** 
## React
> CRUD app in react without any back-end using chakraUI and context-api.
![homePage](https://dev-to-uploads.s3.amazonaws.com/i/vucn9x2zsh4wa4dku2wy.png)
**Live Demo:** [reactBlog](https://react-simple-blogg.herokuapp.com/blogs)
**GitHub repo:** [Github](https://github.com/MA-Ahmad/reactBlog)
**Post:** [Dev](https://dev.to/m_ahmad/create-react-app-with-chakraui-and-formik-libraries-6fi)
 
## React+Rails
> CRUD app in react+rails with tailwindcss. In this app, front-end and back-end are handled inside a single project while in new one front-end and back-end are separate and in this way more easy to manage.
![homePage](https://dev-to-uploads.s3.amazonaws.com/i/4qp4awivlz82s3n67tuf.png)
**Live Demo:** [reactOnrails](https://react-on-rails-blog.herokuapp.com/)
**GitHub Repo:** [RailsReact Blog](https://github.com/MA-Ahmad/react_rails_blog)
**Post:** [Dev](https://dev.to/m_ahmad/create-react-app-with-chakraui-and-formik-libraries-6fi)
Access commit info for your release and deployment workflows
Tags: actionshackathon, github, opensource, git
Published: 2020-08-16 19:26:23

---
title: Access commit info for your release and deployment workflows
published: true
description: My 'git-commit-data-action' submission to the GitHub Actions x DEV Hackathon!
tags: actionshackathon, github, opensource, git
series: Actions Hackathon
---

### My Workflow

Need to access git commit information in your workflow like this

```yaml
- name: Get author and committer info from HEAD commit
  uses: rlespinasse/git-commit-data-action@v1.x

- name: Commit changed files
  uses: stefanzweifel/git-auto-commit-action@v4.1.6
  with:
    commit_message: "Automated commit message"
    commit_user_name: "${{ env.GIT_COMMIT_COMMITTER_NAME }}"
    commit_user_email: "${{ env.GIT_COMMIT_COMMITTER_EMAIL }}"
    commit_author: "${{ env.GIT_COMMIT_AUTHOR }}"
```

### Submission Category: 

* DIY Deployments

### Yaml File or Link to Code

This action source code is available on https://github.com/rlespinasse/git-commit-data-action

```yaml
- name: Expose git commit data
  uses: rlespinasse/git-commit-data-action@v1.x

- name: Print git commit data
  run: |
    echo "Get author info"
    echo " - ${{ env.GIT_COMMIT_AUTHOR }}"
    echo " - ${{ env.GIT_COMMIT_AUTHOR_NAME }}"
    echo " - ${{ env.GIT_COMMIT_AUTHOR_EMAIL }}"
    echo "Get committer info"
    echo " - ${{ env.GIT_COMMIT_COMMITTER }}"
    echo " - ${{ env.GIT_COMMIT_COMMITTER_NAME }}"
    echo " - ${{ env.GIT_COMMIT_COMMITTER_EMAIL }}"
```

### Additional Resources / Info

Currently, use on my client project. If you use it, tell me.

{% github rlespinasse/git-commit-data-action no-readme %}

Contributions welcome
My last post is rocking...!!!(clone of dev.to)
Tags: react, mern, node, ruby
Published: 2020-08-16 19:13:59

Well my last post [this](https://dev.to/meenachinmay/i-made-clone-of-dev-to-clo)
is rocking. so now i decided to make clone of dev.to in near future using MERN stack. there is a possibility that i might use graphql and apollo server too and firebase for authentication. lets see...

if i will start this series then i am thinking to put video on youtube channel so everyone can see it can follow along. later then we will manage this a open source project. 

## i do not have any team so it will take alot of time of me. 
# if anyone want to do it (making clone of dev.to)with me or wanna help me or get into my team please let me know.

Technologies we will use:
 1. Reactjs for client side (with various suiteable dependencies)
 2. nodejs and mongodb db for backend
 3. we might use graphql too
 4. we will try to manage some microservices
 5. we will use firebase for photouploads
 6. there is a possibility that we will not handle authentication 
    by ourself we will hand over this to firebase.
 7. and last but not the least we will not give up NEVER EVER.
Working on GitHub action
Tags: actionshackathon, github, opensource
Published: 2020-08-16 19:05:14

*Intro Post is available [here](https://dev.to/sheikh_ishaan/add-a-post-on-dev-after-new-release-on-github-1m0)*

Today I started working on the GitHub action for the [GitHub action Hackathon](https://dev.to/devteam/announcing-the-github-actions-hackathon-on-dev-3ljn).

## Things I have worked on 

- Created an action that runs on the release event.
- Adding an article on DEV with the release information provided on GitHub(title, body, tags).

### TODOs
- Add `organization_id` attribute in action.yml
- Add `published` to config variables in the workflow file for DEV post.
- Add `main_image` optional attribute for DEV post.

### GitHub Repo

{% github sheikh005/dev-action no-readme %}

### References
- [Actions ToolKit](https://github.com/actions/toolkit/tree/master/packages/core)
- [GitHub action docs](https://docs.github.com/en/actions/creating-actions/creating-a-javascript-action)
Use Slug variables for your release and deployment workflows
Tags: actionshackathon, github, opensource, slug
Published: 2020-08-16 18:55:44

---
title: Use Slug variables for your release and deployment workflows
published: true
description: My 'github-slug-action' submission to the GitHub Actions x DEV Hackathon!
tags: actionshackathon, github, opensource, slug
series: Actions Hackathon
---

### My Workflow

Want to use the branch name in an url during a deployment? Want to use a commit hash in a release process?

[Slug it](https://github.com/rlespinasse/github-slug-action#github-slug-action).

This action give you access to multiple slug version of some GitHub variables to be use on your release or deployment workflows.

### Submission Category: 

* Maintainer Must-Haves
* DIY Deployments

### Yaml File or Link to Code

This action source code is available on https://github.com/rlespinasse/github-slug-action

```yaml
- name: Inject slug/short variables
  uses: rlespinasse/github-slug-action@v2.x

- name: Print slug/short variables
  run: |
    echo "Slug variables"
    echo "   ref        : ${{ env.GITHUB_REF_SLUG }}"
    echo "   head ref   : ${{ env.GITHUB_HEAD_REF_SLUG }}"
    echo "   base ref   : ${{ env.GITHUB_BASE_REF_SLUG }}"
    echo "   event ref  : ${{ env.GITHUB_EVENT_REF_SLUG }}"
    echo "   repository : ${{ env.GITHUB_REPOSITORY_SLUG }}"
    echo "Slug URL variables"
    echo "   ref        : ${{ env.GITHUB_REF_SLUG_URL }}"
    echo "   head ref   : ${{ env.GITHUB_HEAD_REF_SLUG_URL }}"
    echo "   base ref   : ${{ env.GITHUB_BASE_REF_SLUG_URL }}"
    echo "   event ref  : ${{ env.GITHUB_EVENT_REF_SLUG_URL }}"
    echo "   repository : ${{ env.GITHUB_REPOSITORY_SLUG_URL }}"
    echo "Short SHA variables"
    echo "   sha        : ${{ env.GITHUB_SHA_SHORT }}"
```

### Additional Resources / Info

Some repositories already using it like

- [Delegation-numerique-en-sante/mesconseilscovid](https://github.com/Delegation-numerique-en-sante/mesconseilscovid/blob/master/.github/workflows/build.yml)
- [ibm-garage-cloud/ibm-garage-cli-tools](https://github.com/ibm-garage-cloud/ibm-garage-cli-tools/blob/master/.github/workflows/release.yaml)

And more on [GitHub search page](https://github.com/search?q=%22rlespinasse%2Fgithub-slug-action%22&type=Code)

{% github rlespinasse/github-slug-action no-readme %}

Contributions welcome
PyPI release using GitHub Actions
Tags: actionshackathon
Published: 2020-08-16 18:53:18

### My Workflow

I'm making use of the `release` event in a GitHub action to release my open source `stackmanager` project to PyPI. This allows me to use the GitHub tag name for the PyPI release and just have one place to manage versions.

I don't always want to release a new version after a PR is merged to master, so this gives me manual control over releases.

This has been my first time using GitHub Actions and I've been generally pleased with how it worked but found some of the documentation to be a bit cryptic.

### Submission Category: 

Maintainer Must-Haves

### Yaml File or Link to Code

{% github https://github.com/LeadingEDJE/stackmanager %}

Specifically, the [release.yml](https://github.com/LeadingEDJE/stackmanager/blob/master/.github/workflows/release.yml) workflow is triggered on release.

### Additional Info

The version of the release is taken from the `github.event.release.tag_name` property of the [release event](https://docs.github.com/en/developers/webhooks-and-events/webhook-events-and-payloads#release) and passed to `setup.py` as the `STACKMANAGER_VERSION` environment variable.

I'm using a PyPI [API token](https://pypi.org/help/#apitoken) restricted to this project so that I don't have to store a username and password in GitHub secrets (this also allows me to turn on 2FA for my PyPI account).

```yaml
    - name: Package and Upload
      env:
        STACKMANAGER_VERSION: ${{ github.event.release.tag_name }}
        TWINE_USERNAME: __token__
        TWINE_PASSWORD: ${{ secrets.PYPI_APIKEY }}
      run: |
        python setup.py sdist bdist_wheel
        twine upload dist/*
```
Using GitHub Actions to Keep Another GitHub Action's Image Up-to-Date
Tags: actionshackathon
Published: 2020-08-16 18:51:10

### My Workflow

[gh-action-node-update-deps](https://github.com/neverendingqs/gh-action-node-update-deps) is a GitHub action for keeping dependencies up-to-date. Each time it runs, it installs the latest version of a few dependencies (Git, curl, [hub](https://github.com/github/hub)). To improve performance, I created a custom Docker image with these dependencies already installed.

To keep this Docker image and all the installed dependencies up-to-date, I created a GitHub Actions workflow to schedule a recurring build of this image, which use a cron trigger and:

* [actions/checkout](https://github.com/actions/checkout)
* [docker/build-push-action](https://github.com/docker/build-push-action)

### Submission Category: 

DIY Deployments

### Yaml File or Link to Code

```yaml
name: Publish to Docker

on:
  schedule:
    - cron:  '0 * * * *'
  workflow_dispatch:

jobs:
  publish-to-docker:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - run: |
        git config user.name github-actions[bot]
        git config user.email 41898282+github-actions[bot]@users.noreply.github.com
        git commit --allow-empty -m "chore: update image (automated)."
        git push
    - uses: docker/build-push-action@v1
      with:
        username: neverendingqs
        password: ${{ secrets.DOCKER_ACCESS_TOKEN }}
        repository: ${{ env.GITHUB_REPOSITORY }}
        add_git_labels: true
        tag_with_ref: true
        tag_with_sha: true
```

### Additional Resources / Info

* The repository that hosts the Dockerfile and GitHub Actions workflow: [node-lts-git-hub-image](https://github.com/neverendingqs/node-lts-git-hub-image)
* The GitHub Action using this Docker image: [gh-action-node-update-deps](https://github.com/neverendingqs/gh-action-node-update-deps)
[Tips] 中銀カプセルタワービル=Docker説
Tags: docker
Published: 2020-08-16 18:22:44

今回初めてのTips投稿ですが、何かの理解の一助になればなと思ったものについて、備忘も込めて投稿していきます。今回はDockerの概念を簡単に説明するには、、、と考えた時にこんなやり方もあるのではと模索した結果です。名付けて、

*「中銀カプセルタワービル=Docker説」*

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

https://speakerdeck.com/mizuki0414/zhong-yin-kahuserutawa-equals-dockershuo
Tell me your Instagram handle
Tags: discuss, watercooler, community
Published: 2020-08-16 18:17:58

Tell us your Instagram handle and let the community follow you there!

I will start with mine: [@domenicosolazzo](https://www.instagram.com/domenicosolazzo/)

![](https://media.giphy.com/media/dJto95ggzHSt6csdnB/giphy.gif)

What is yours? Leave a comment with your IG handle in the comment below!
Whatsapp Notifications for Github 
Tags: actionshackathon, opensource, github, git
Published: 2020-08-16 18:15:30

![sample](https://dev-to-uploads.s3.amazonaws.com/i/shku0hy9l2jbhr65s8vy.jpeg)

### My Workflow

I am new to open source I always feel that extra happiness when somebody stars/forks one of my projects.It means a few lines of what i have written was useful to somebody somewhere in the world.What more could I be proud of.
So I created an action helps you track your personal repo changes and also notifies you whenever somebody stars or forks your repositories on whatsapp.I have found many telegram and slack notification actions so decided to create one for whatsapp
Here's my workflow
```yaml
name:  Whatsapp Notify
on:
  issue_comment:
    types: created
  pull_request:
    types: [opened, closed, edited, ready_for_review, review_requested, reopened]
  issues:
    types: [opened, edited, pinned, closed, reopened, assigned, labeled]
  page_build:
  watch:
    types: [started]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: wa-notify
        uses: mdb571/wa-action@master
        with:
          from: ${{ secrets.FROM }}
          to: ${{secrets.TO }}
        env:
          TWILIO_ACCOUNT_SID: ${{ secrets.TWILIO_ACCOUNT_SID }}
          TWILIO_AUTH_TOKEN: ${{ secrets.TWILIO_AUTH }}
```

### Submission Category: 
 Maintainer Must-Haves

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)


### Yaml File or Link to Code
{%github https://github.com/mdb571/wa-action %}

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)


### Additional Resources / Info
Currently I am using this action to track one of my recent project on github
{% github https://github.com/mdb571/n00b-api %}

### Note

Anyone who finds this action useful please spare a sec to :star: this project on github

[Note]: # (Be sure to link to any open source projects that are using your workflow!)

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. )

[Reminder]: # (Submissions are due on September 12th (11:59 PM PDT) and winners will be announced on September 23!)
Coding Daily to learn Problem-Solving rather than Coding
Tags: codenewbie, beginners, javascript
Published: 2020-08-16 18:00:07

Coding for me is a commitment that I want to do every day. Doing something every day comes with an attitude that I want to grow as an individual, I want to increase my knowledge.

As I am working in a job, working in an agile framework I have observed in almost 3 months my project is getting changed. This means the company is not looking for an employee who knows a particular technology but someone who can solve their problems. Technology is just a medium to solve the potential problem. Like we have tools like saw that is used to cut through the materials. Technology like ReactJS, Angular, NodeJS, etc are tools to solve various needs technically on a scalable model.

The reason why IT companies make billions with the same amount of work that is put by other professions is that in the IT the solution to a model that is built is reusable, meaning the same product can be used to cater various user needs, and it is scalable meaning the solution can solve problems for large masses of people in millions and billions.

When such a huge amount of people gets fulfilled with little inputs in the form of capital, project teams this results in huge cash flow, and with huge profits, the chances are the price of subscription or product decreases many folds compared to a solution provided by non-IT fields.

Now the question is, is this field easy? To know if something is easy or hard is an individual choice. If someone works regularly on something, do regular practice then things will eventually become easy, else it will be hard.

I have seen people with non-IT, non-technical, non-CS degree background switched to developer jobs by consistent perseverance. If you are someone who wants to walk a similar path, I recommend you to make a proper plan, you can follow the [dev.to](https://dev.to/), [YouTube](https://www.youtube.com/), [Twitter](https://twitter.com/). There is a lot of content, learn from the people who are already doing it. Start practicing on it daily, you will eventually land up to your dream job.

I hope you liked the article. Give a 💖 and 🦄. Also, let me know your plans or any feedback in the comment box.
[DevSecOPS] #6 見える化を行ったら(DBサーバ編)
Tags: devops, security
Published: 2020-08-16 17:55:50

## 1.はじめに

運用を行う上でDBの状態の把握は一般的なサーバの監視項目に加えて、優先度の高い物であると認識しています。DB自体について知りたいことはAPの特性によって変わるかと思われますが、今回も一般的な項目について整理していきたいと思います。また今回はNoSQLベースのDBであるMongoを想定して記載致します。

## 2.DBサーバへの監視項目

基本的な監視項目についてはダッシュボードを参考に以下を整理しました。
・DBコネクション数
・オペレーション数（CRUD）の増減率
・DBのメモリアロケーションの増減率
・(In-Out)Byte数の増減率
・Lockの実行数
・Pagefaultの合計数


## 3.Metrics
では実際のクエリを記載していきます。演算子に関しては一旦無視していただき、Mongoから取得したMongoDBexporterのメトリクスについてをメインで考えています。

- DBコネクション数

```
irate(mongodb_connections[1m])
```

- オペレーション数（CRUD）の増減率

```
irate(mongodb_mongod_op_counters_total[1m])
```

- DBのメモリアロケーション

```
irate(mongodb_memory[1m])
```

- (In-Out)Byte数の増減率

```
irate(mongodb_network_bytes_total[1m])
```

- Lockの実行数

```
mongodb_mongod_global_lock_current_queue
```

- Pagefaultの合計数

```
mongodb_extra_info_page_faults_total[1m]
```

## 4.結び
ダッシュボードをインポートして使用するのでも十分ですが、本質的にはクエリの詳細についての理解を怠ると何を表しているのか正確に把握できない為自戒を込めて記載致しました。アラート発火の閾値に関しては、運用を行いつつチューニングすることが望ましい為今回はメトリクスの紹介となりました。
Project task asigment
Tags: actionshackathon
Published: 2020-08-16 17:54:08

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)


### My Workflow
[Note]: # (Make sure to include the name of your GitHub Action and share where it's being used!)
*Name: Project PR and Issue assignment.
* The Action has being used in my personal projects in automation of issues and Pull request assignment to projects.
* The Open source project issues and pull requests can be assigned to its appropriate global project or repository based project by just specifying the project link to the reposiroty 


### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)

Maintainer Must-Haves

### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

{% github https://github.com/elirehema/arcolis %}


### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)
{% github https://github.com/elirehema/arcolis %}

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. )
* Colaborators - NONE
* Dev username - elirehema

[Reminder]: # (Submissions are due on September 12th (11:59 PM PDT) and winners will be announced on September 23!)
Foundation of Back-end Development
Tags: node, deno, javascript, beginners
Published: 2020-08-16 17:50:12

I am starting a series of Articles related to fundamentals of Web Development, introduction to WWW.

- Series would be starting with basic fundamentals and terminologies of Web Development
- Introducing you to How the Web Works
- Web Server and Application Server
- Glimpse on Front end and Back end 
- Introduction to URL, Query Parameters, HTTP methods and HTTP Request-Response Packets
- What happens when you click/type a link on the browser?
- Working of the DNS with respect to the browser
- Database
- RESTful API
- Protocols & the HTTP


Stay tuned for the articles :)
Summon The JSON Gameplay
Tags: javascript, css, html, webdev
Published: 2020-08-16 17:47:58

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

[OFFICIAL] ‼ Gameplay of Summon The JSON 🚀

Learn how to play Summon The JSON: JavaScript
An awesome printed card game deck 🔥

{% youtube gEdXWi0aX_o %}

‼‼ -10% UNTIL SUNDAY! ORDER NOW: https://bit.ly/shopify-stj

Music by bensound.com
NumLock de notebook com problema no Linux
Tags: ubuntu, linux
Published: 2020-08-16 17:23:46

As teclas 1 e End do teclado numérico é a mesma tecla, para um funcionar o outro precisava estar desativado porque quando estamos programando o Shift+End || Shift-Home é utilizado constantemente, fora o PageUp e PageDown que ajuda a alternar entre os arquivos ou abas dos browsers. Sendo assim, quando o NumLock estava desativado e ao apertar o Shift para ir ao End, ele acionava o 1. Afinal, o Shift serve para acionar a opção secundária da tecla. Esse deve ser o X da questão, ele acionava o 1 e automaticamente ativava o NumLock no meu laptop.

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

Para solucionar esse problema, é necessário instalar o **dconf**, programa que edita configurações internas do Linux. Dito isso, tenha muito cuidado ao utilizá-lo.

`sudo apt-get update`
`sudo apt-get install dconf-editor -y`

Após instalação abra o dconf. Encontre o caminho: */org/gnome/desktop/input-sources/xkb-options*. E adicione a opção, **['numpad:microsoft']**. E clique em **Aplicar**.

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

Pronto, agora o teclado estará funcionando corretamente. 
 
Fiz isso no Ubuntu 20.04. Se funcionou na sua distro, deixe nos comentários please ;).

Live long and prosper!