teleren/devto huggingface dataset:
Follow your repository from Discord
Tags: actionshackathon, github, discord
Published: 2020-08-16 15:05:00

### My Workflow

This Action is used for write at every push the progress to a project and/or updates. It's **only for Discord users** and work with Webhooks and secrets tokens on GitHub.

I modified this script for showing to users who follow my project to stay updated for the new version. 😁


![This is a preview.](https://dev-to-uploads.s3.amazonaws.com/i/9kpo6lq9atkg65rhyuj9.PNG)

### Submission Category: Maintainer Must-Haves

### Setup

Really simple, you must have : 
- Discord Webhook URL 
- A active repository on GitHub
- Integrate this script to your GitHub repository 
```yml
name: Discord Webhook
on: [push]
jobs:
  report:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout repository
      uses: actions/checkout@v1
    - name: Run Discord Webhook
      uses: mrrobotdotapp/discord-webhook@main
      with:
        id: ${{ secrets.DISCORD_WEBHOOK_ID }}
        token: ${{ secrets.DISCORD_WEBHOOK_TOKEN }}
```

How to get a Wehbook link on Discord ? 

{% youtube K8vgRWZnSZw %}

*In this video, I selected two IDs. The first is `DISCORD_WEBHOOK_ID` and the second is `DISCORD_WEBHOOK_TOKEN`*

And how to put my ID and secret token in my GitHub repository ?

{% youtube xrUPoertezE %}

### Additional Resources / Info

Check out now the repository. 

{% github https://github.com/mrrobotdotapp/classic-discord-webhook no-readme %}


If you have questions, don't hesitate !

[Reminder]: # (Submissions are due on September 12th (11:59 PM PDT) and winners will be announced on September 23!)

|☕|Check my [Twitter account](https://twitter.com/thomasbnt_). You can see many projects and updates. You can also [support me on Buy Me a Coffee, Stripe or GitHub Sponsors](https://thomasbnt.dev/donate). Thanks for read my post ! 🤩|
|---|---|
Heroku is still the best way to start a hobby project
Tags: webdev
Published: 2020-08-16 15:02:04

The most important step when you start a project is to get it deployed somewhere, anywhere. Running your code in your local development environment is great, but getting your deployment workflow setup is the holy grail.

When I started a hobby project about a month ago, I searched and searched for Heroku alternatives. In the past, I knew Heroku had a tendency to be costly. Heroku can also lack flexibility in certain situations.

After what seemed like an exhaustive search, I gave up. There are alternatives to Heroku, but nothing caught my eye. I had used AWS Elastic Beanstalk for a product in the past, but the initial setup took hours I didn't want to spend.

## Ultimately, here's what I wanted in a service
1. Automated deployment when merging to master
2. Automated deployment when the tests pass
3. One click setup of the database, Redis
4. Process monitoring for Sidekiq
5. Easy, simple cron
6. Easy, simple scaling

To this day, Heroku still checks all those boxes. Even more so, everything has improved since I last used Heroku.

I booted up my Heroku account and started looking around. To my surprise, there was a lot I could scale up for free.

## What I got out of Heroku
1. A small PostgreSQL database
2. A small Redis instance
3. Cron
4. A single web dyno
5. A single Sidekiq dyno
6. Automated deployments integrated with CircleCI
7. Bonus: Free Mailgun
8. Bonus: Free Sentry

![Heroku Dynos & Add-ons](https://dev-to-uploads.s3.amazonaws.com/i/6914m8c9j2jyorw703v4.png)

I did all of this with minimal configuration. I didn't write any YAML. I don't deploy via the terminal. I don't worry about processes being killed.

**The only annoyance is dynos going to sleep.** Since the product I'm building isn't in production yet, that's not a big deal.

However, what I do have is a complete deployment workflow and somewhere to ship my code automatically. Instead of worrying about DevOps, I can focus on building. That's worth a lot to me.
Handling Events on Stateless React Components
Tags: react, javascript
Published: 2020-08-16 14:50:00

---
title: Handling Events on Stateless React Components
published: true
description: How to handle events on stateless react components
tags: react, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ohr8lv3k3t4j7r5gjxy2.JPG
---


I decided to write up this post because whenever I start a new React project, I find myself googling the same question. So, how to handle events on a stateless (or dumb) React component?

Let's say we want to build a Markdown previewer in React. The components we'll need are:

1. `<EditingBox />`, to write our Markdown in
2. `<PreviewBox />`, to see the Markdown we typed rendered

Logically, these are the only two components we need. But where will we put the state? Both `<EditingBox />` and `<PreviewBox />` are hierarchically on the same level, so we can create a parent component to render them and contain the state. This is called **lifting the state up**. Let's call that component `<App />`.

*Note: the below code uses the Marked.js library.*

```jsx
const EditingBox = (props) => {
    return <textarea>{props.input}</textarea>;
}

const PreviewBox = (props) => {
    return <div dangerouslySetInnerHTML={{__html: marked(props.input)}}></div>;
}

class App extends React.Component {
    state = {
      input: `# Welcome to my React Markdown Previewer!`
    };
  
  render() {
    return (
      <div class="container">
        <EditingBox {...this.state} />
        <PreviewBox {...this.state} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

```

As we said, the `<App />` component houses the state and renders the other two components. Now, we need a function that listens for change in the `<EditingBox />` component and updates the state so that `<PreviewBox />` can then get the updated state and display it.

This function will live in the `<App />` component, because the state and all the functions that update it must live in the same component. It can be declared as follows:

```jsx
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
```

Now, we can pass down this method to `<EditingBox />`

```jsx
  render() {
    return (
      <div class="container">
        <EditingBox {...this.state} onChange={() => this.handleChange(event)} />
        <PreviewBox {...this.state} />
      </div>
    );
  }
}
```

so that it can be used inside `<EditingBox />` as a regular prop

```jsx
const EditingBox = (props) => {
    return <textarea onChange={() => props.onChange()}>{props.input}</textarea>;
}

```

Here is the full application

{% codepen https://codepen.io/dmahely/pen/zYqGNee %}

Thank you for reading. Until next time 👋
*Cover photo by me.*
Book: Large Scale Apps with Vue 3 and TypeScript
Published: 2020-08-16 14:44:09

Announcing new ebook:

Large Scale Apps with Vue 3 and TypeScript

Build Large and Scalable front-ends that leverage internationalization, localization, a modular Vuex store, API-client code that easily can switch between mocked data and live data and more.

https://leanpub.com/vue-typescript
MTJ #6
Published: 2020-08-16 14:41:17

16-Aug-2020
It's been 2 weeks since my exams have finished and since then, here's the progress I've made:

- started learning C# with a friend
- navigating through VSCode for a beginner is a pain
- learnt about enumerations and structs for the first time
- doing fun coding challenges with other beginners
- joined a Caribbean coding Discord server


Advice:
Everyone starts out somewhere. Don't be discouraged because someone else has been coding for longer than you. Everyone is a beginner at something.
It takes strength to push through when you get frustrated over code or when a problem seems too hard.
Don't be afraid to make mistakes.
[Tutorial Linux] Terminal: Verificar uso de espaço em disco
Tags: linux, terminal, df, inodes
Published: 2020-08-16 14:34:50

Para sabermos quanto do nosso disco (HD) está ocupado e quanto temos de espaço ainda disponível, entre outras informações como os diretórios montados, usamos o comando

```
$ df -h
```

- **$** indica que você deve usar o **usuário comum** para fazer essa operação.

- **df** do inglês, *disk free*, nos mostra a quantidade de espaço em uso e de espaço livre.

- **-h** do inglês, *human readable*, nos mostra os tamanhos em um formato mais legível para humanos, em vez de blocos, como KB, MB ou GB.

Um outro modo de ver o espaço em disco é através dos Inodes. Assim:

```
$ df -i
```

- **-i** para ver os Inodes.

Inode é um ponteiro usado pelo sistema operacional para armazenar diversas propriedades de um arquivo. Cada arquivo contém um número único de um Inode. Os discos possuem um número finito de Inodes e eles podem ser esgotados, impedindo a gravação de novos arquivos, caso todos os Inodes estejam ocupados.
#30DaysOfReactLearning
Published: 2020-08-16 14:21:00

I have started the #30DaysOfReactLearning challenge where I am learning React for 30 days, Why React? it is Fast, React uses Virtual DOM that only updates the changes which have been made on the website. It is simple, React uses JSX which makes the application simple to code and understand. React has one of the biggest communities out there to help you and the good thing about it is that you can contribute to the community.
React is in demand it is used by big tech giants such as Facebook, Google, Tesla, etc. one of the really cool things about React which I really like is that you can use CSS, HTML, and JavaScript together.
Components in React are used to help developers to reuse the code, there are two different types of Components in React, Functional and Class. A Functional component is a simple JS function:
function Age(){ return <h1>My age is 22</h1>;}. To render a component we create JSX elements which then display the functional component. Remember! Every component name should start with a capital letter.
Class Components are used to create advanced UI like forms and animations. In order to make it work Class Components needs to extend the React.Component class.

This is just the beginning as I learn more and more I will be sharing my knowledge.
Language Check
Tags: actionshackathon, showdev, github, opensource
Published: 2020-08-16 14:02:40

### My Workflow
Language Check action automatically filters issues and pull requests that contains objectionable language (profane words) and instantly reports the action URL on your chosen Slack channel. 

**This workflow is a must-have for all the developers out there who contribute to open source projects and *may* get trashed for their hard work 🤦🏻‍♀️**

![Alt Text](https://tenor.com/view/paul-rudd-sigh-gif-5394064.gif)

**Maintaining sanity in the open source community is essential AF. 😉**

This workflow is triggered each time there is an issue is opened, or there is a new comment on an existing issue, or there is a pull request.

⚠️ To test this flow by yourself, you need to have a #blockchain channel in your workspace. Or, you can edit the `yml` file and change `SLACK_CHANNEL` there.

⚠️ You also need to generate `SLACK_WEBHOOK` token for your own Slack workspace and save it in GitHub secrets. To set it up, see [this](https://github.com/marketplace/actions/slack-notify). The slack channel I am using: degen-gh-actions.slack.com. So, the token for this workspace would be different than yours.


### Submission Category: 

Maintainer Must-Haves


### Yaml File

```yaml
name: Language Check
on:
  issues:
    types:
      - opened
      - edited
  issue_comment:
    types:
      - created
      - edited
  pull_request_review_comment:
    types:
      - created
      - edited
jobs:
  echo_issue_comment:
    runs-on: ubuntu-latest
    name: profanity check
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Profanity check step
        id: set_output
        uses: niharrs/mind-your-language-action@master
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      - name: Slack Notification
        if: steps.set_output.outputs.result == 'bad'
        uses: rtCamp/action-slack-notify@master
        env:
          SLACK_CHANNEL: blockchain
          SLACK_USERNAME: moralPolice
          SLACK_COLOR: red
          SLACK_MESSAGE: ':warning: Profanity found on repository'
          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
```

### Link to Code

{% github https://github.com/niharrs/language-check %}


### Additional Resources / Info

This workflow makes use of two already existing GitHub actions:
1. [Mind your language action](https://github.com/tailaiw/mind-your-language-action): I forked it and tweaked the `entrypoint.sh` to use conditional jobs and workflows offered by GitHub Actions API. 
2. [Slack Notify - GitHub Action](https://github.com/marketplace/actions/slack-notify): This action is highly customizable, you can send in parameters in the form of environment variables.

***

**Feel free to reach out in case of any issue.**

Cheers.✌️
Setup a Basic development environment for mac
Published: 2020-08-16 14:01:46

This is going to be a basic bare bones development environment you will need to add other software according to what your needs are and what you are going to develop. I will be writing other articles for specific types of development like android. This is in no particular order I just wrote it as it came to my mind.

#Xcode
If you develop for apple or not having Xcode will install other software like git. Now you can install the software as you go for some software mac os will give you a promote to install it for example if you don’t have git and you type git in the terminal mac os will give you a promote to install it. If you don’t wan’t to install Xcode as it can be a very big you can just use the command xcode-select — version

#HomeBrew
Having Homebrew is an essential part of and development environment as it allows you to install software easily. Not just software but also frameworks.

#Python
Having python is very important as many scripts that you will use will be written in python. Mac os does come with python but it uses python2 and not the latest version of python.

#Javascirpt and node js
Just like python you need to have javascript and node js as javascript is a very popular programming language and many scripts will be written in javascript as well.
Sublime text or/and Visual studio code
I use both sublime text and visual studio code for my coding you can try out what you like and use it I usually use VSCode for for web development and sublime text for other types of programming.

#Iterm or other types of terminal
Using other types of terminals can be very use as you can customise and as it’s open source you can add to it, I use iterm but you can use the default terminal another terminal that you might like is hyper.

#Another web browser
I would say dedicate one whole browser to development I use Firefox developer edition.
I will be writing a part two to this article and I will also be writing articles for specific types of development like android development.
How to improve your coding skills and ability.
Published: 2020-08-16 14:00:21

#How many monitors:

When you are coding it is very helpful to have multiple monitors so that you can organize your work. If you are a coder like me you might want to have a monitor vertical because coders need more vertical space and not horizontal space. You don’t need multiple monitors but it is very important if you want to improve.

#Keep Practicing:

Practicing your skills is very important, when you start practicing it will help you improve your coding skill, make things that will help you and also try doing coding katas.

#Coding Editors

Try using different editors and stick to one editor. Learn all the keyboard shortcuts and use plugins to make the editor even better, if you like using vim then add a plugin to your editor to make like vim.

#Learn your coding language
Learn everything about the coding language which will help you make your code shorter and better. And try learning different libraries for the coding language.

#Read resource code

By reading source code you learn how other people think and what is the most common and best way to do something. You also learn you programming language and understand new functions and features especially when the programming language is C or Java or Kotlin which have a lot of functions.
Why you need to know C for hacking
Published: 2020-08-16 13:59:11

Everything and I mean everything that you use uses c in one way or another. Even if you think that it dose not include C it does python, javascript, java, windows, linux, mac os are all built on top of C. C is a low level programming language which means that it a language that communicates with the hardware. although assembly is below C but assembly is extremely hard to learn and there are many variants of assembly, so C is the best option. Learning C helps to attack and machine on the low level and as most software is built on top C it’s practically impossible to not be able to hack a software.
How programming became harder yet easier!!!
Published: 2020-08-16 13:58:41

Programming languages have involved over hundreds of years. First few programming languages to come were C, Bash, FORTAN, Assembly, etc. Those languages were very hard to master and were very hard to read but with few languages out there it was easy to pick what to use in which scenario and which is best for what. In modern days most languages are easy to learn and not that hard to master or at least get intermediate, but some many languages out there, there are just way to many options. For example for web development Python, JavaScript, PHP, etc.
Display LaTeX Math in GitHub Markdown Previews
Tags: showdev, webdev, github
Published: 2020-08-16 13:43:28

**TLDR**: install the [Chrome extension](https://chrome.google.com/webstore/detail/github-math-display/cgolaobglebjonjiblcjagnpmdmlgmda), or check out the MIT licensed repo: {% github AaronCQL/katex-github-chrome-extension no-readme %}

## Motivation

As a computer science student, I primarily take my course notes in Markdown, which would eventually be pushed to GitHub. However, it's 2020 and GitHub still [does not support {% katex inline %}\LaTeX{% endkatex %} flavoured math](https://github.community/t/feature-request-latex-math-in-markdown/14214) when previewing Markdown content (GitHub please...).

There is already an [existing Chrome extension](https://chrome.google.com/webstore/detail/mathjax-plugin-for-github/ioemnmodlmafdkllaclgeombjnmnbima?hl=en) for this exact use case. However, I was unable to load the package via the Chrome store for some reason, and had to load the raw package from the GitHub source.

Initially, I was happy with it, but I soon felt that the rendering becomes really sluggish when the Markdown file grows sufficiently large (probably because it uses MathJax internally). Moreover, GitHub recently revamped their website, and it now behaves more like a SPA. This means that some internal navigation in the loaded web page does not refresh the whole page, resulting in the extension failing to render the math.

## Features

This new extension serves to solve the above problems. It uses {% katex inline %}\KaTeX{% endkatex %} internally for fast and efficient rendering. It is also able to detect and work with the SPA-like internal navigation, and will even render the math when editing Markdown content (when clicking `Preview changes`). For now, it only targets Markdown previews, leaving code blocks and code previews untouched (since this is my exact use case).

## Conclusion

This project is relatively new - if you happen to find any bugs, feel free to open an issue. I have already documented some [known issues](https://github.com/AaronCQL/katex-github-chrome-extension#known-issues) which I do not yet have answers for (if you happen to have a solution, **please open a PR** 😁).
OR query with multiple conditions on same column using Sequel
Tags: rails, sequel, postgres
Published: 2020-08-18 05:54:43

---
title: OR query with multiple conditions on same column using Sequel
published: true
date: 2020-08-16 13:40:50 UTC
tags: rails,sequel,postgresql
canonical_url: https://prathamesh.tech/2020/08/16/sequel-or-with-multiple-conditions-on-same-column/
---

I recently started using [Sequel](http://sequel.jeremyevans.net/) to manipulate the PostgreSQL database in our Rails application at [Last9](https://last9.io).

I had to write an SQL query as follows.

<!--kg-card-begin: code-->
```sql
SELECT * FROM users where status = 'inactive' OR status = 'deleted'
```
<!--kg-card-end: code-->

Sequel provides `or` function that can be used to construct `OR` expressions.

<!--kg-card-begin: code-->
```ruby
exp = Sequel.or(x: 1, y: 2)
DB[:users].where(exp)

```
<!--kg-card-end: code-->

This results into following SQL.

<!--kg-card-begin: code-->
```sql
"SELECT * FROM \"users\" WHERE ((\"x\" = 1) OR (\"y\" = 2))"
```
<!--kg-card-end: code-->

Now let's try this same technique to write SQL for our use case. We want to select all users whose status is either

`inactive` or `deleted`.

<!--kg-card-begin: code-->
```ruby
> DB[:users].where(Sequel.or(status: 'deleted', status: 'inactive')).sql
(pry):8: warning: key :status is duplicated and overwritten on line 8
=> "SELECT * FROM \"users\" WHERE (\"status\" = 'inactive')"
```
<!--kg-card-end: code-->

But as you can see if we use same key which is `status` in this case, Ruby ignores it and the query that gets generated only has last value which is `inactive` in our case.

> Ruby ignores multiple keys with same name in a hash so beware if you are using multiple values with same keys in a hash.

So how do we generate the `OR` query on same column using Sequel?

We can pass the arguments to `Sequel.or` as Array instead of Hash.

<!--kg-card-begin: code-->
```ruby
> DB[:users].where(Sequel.or([
                              ["status", "inactive"], 
                              ["status", "deleted"]
                             ])
                   )
=> "SELECT * FROM \"users\" WHERE (('status' = 'inactive') 
    OR ('status' = 'deleted'))">
```
<!--kg-card-end: code-->

This change makes sure that the `OR` query on same `status` column gets generated correctly.

<!--kg-card-begin: hr-->
* * *
<!--kg-card-end: hr-->

Subscribe to my [newsletter](https://prathamesh.tech/mailing-list)or follow me on [Twitter](https://twitter.com/_cha1tanya)to know more about how to use Sequel with Rails apps.