teleren/devto huggingface dataset:
Making Api Calls through a Rails backend to React frontend
Published: 2021-03-12 02:00:11

#Why Use Rails? 
If you've unsuccessfully tried to make api calls from a React/Js frontend, you may have gotten a CORS error. Well what's happening is that many Apis actually block calls that are made directly from the browser. Well here is where Rails comes in in all of its glory. Using a Rails api backend allows you to make calls to the Api from Rails without running into CORS errors. 
#Setting up Rails-Api
Rails is amazing, in that it can be built as an API only by using the following command. 
![Screen Shot 2021-03-11 at 2.15.11 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r0uav7qa42e8we1g24r4.png)
 This command limits what Rails generates in in terms of views and helpers and so on essentially giving you only the things that you need to be able to make your api calls.
#Hiding the Api-Key
I found that the easiest way to hide your API key is by using the Figaro gem because it basically does all the work for you. All you have to do is add the Figaro gem with the command "$ bundle exec figaro install". The gem will automatically create a file called Application.yml and add it to your gitignore file for you.Next declare your api key within that file like this. 
![Screen Shot 2021-03-11 at 5.57.26 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22hamqhnfkighjb00wsx.png)
 
 Now all you have to do is add Application.yml to your gitignore file and your api key is hidden!
 ![Screen Shot 2021-03-11 at 5.37.53 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w52z641z8ks2wdmmu7ny.png)
#Retrieving the API Key
In order to retrive your api key it's quite simple. You simply have to declare a variable in whatever function you're trying to make the api call. 
![Screen Shot 2021-03-11 at 5.55.49 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vn3i6uja02xztzdsx4dp.png)
Now you can interpolate that variable in your api call in whatever way you need! Here is an example!
![Screen Shot 2021-03-11 at 5.57.52 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx04wzw6l8ccy3tlyvat.png) 
#Setting up Your Route
The last thing you want to do is set up a route for you api call. On the last project I worked on, I was making api calls to a weather app to get forecasts for ski resorts that I could send up to my front end. Here is what my custom route looked like to get information to a single. Now because the api needed a specific apiId for each ski resort, I designed my front end in a way that would allow me to get the apiId for each resort through my route. 
![Screen Shot 2021-03-11 at 2.21.22 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65pst4cf5o2zn00p137c.png)
#Conclusion
And thats all there is to it! Although your api calls may be different, you always want to make sure that you're hiding your api key because if you make a commit and you haven't hidden it, you'll run into issues.
Paymaya SDK for Laravel and Lumen
Published: 2021-03-12 03:18:48

This is uses `guzzlehttp/guzzle` so able to handle and focus on working generate request payload for sending in Paymaya API, it also include mocking in-case you want to create test for your checkout or any endpoint provided by the SDK.

try this out https://github.com/lloricode/laravel-paymaya-sdk, and im open for all the opportunities.
Hello World!
Published: 2021-03-12 03:11:32

Hi fellow techies and programmers! 

I'm Beki, a programmer that started her journey back in April of 2020, near the beginning of the pandemic. I was sitting at the reception desk when the company told me I became laid off in March. I was deemed to be nonessential.  I cried hard that day and the next. 

![Sad character sitting out in the rain](https://i.imgur.com/FOCNu73.gif)

I told myself I needed to get up and back at it. The thing is, I didn't want to go back to my previous career as an administrative assistant. I had dabbled HTML and CSS before and took a leap of faith when I joined a certificate program. After finishing the program in October,  I went from reception to be one of the cohort's top students. 

![Girl celebrating ](https://media.giphy.com/media/26ufl1ASleVkA7wIg/giphy.gif)

Now post-certificate and back in the job hunt as a new programmer. I want to share my findings and build knowledge with the community! (First-time blogger here so please be gentle XD)

See you around!
Choosing headless CMS... 
Tags: help
Published: 2021-03-12 02:42:33

Hello guys, I wanted to get some opinions about free headless CMS available and which one would you prefer. I need something to handle data and provide it through GraphQL or REST Api, something relatively easy to set up, something quick and not that bad for future use for content management. CMS should allow a regular user to add content (stuff like markdown pages on git are not welcome).
Also, take into account that I'm new at dev, so due to my extensive use of guides and docs I have a high expectations of its quality.

I used a couple of CMS so far:

Strapi - a pretty good one, for my purpose. Quick to set up, easy to learn from the start, do what it suppose to do. Docs are not that bad.

Sanity.io - looks nice for content management but incredibly hard to configure and set up your schema. I find it totally unfriendly to inexperienced developers. Docs are lacking.

Thinking about GraphQL, Agility, Ghost...

Would appreciate any feedback on those or any other.
Hi, I'm Tavette
Tags: introduction
Published: 2021-03-12 02:24:00

Thanks for stopping by! I am a Web Developer based in the Bahamas. I started learning to code for fun about a year ago and decided to take my learning journey more seriously, create structure and share what I learn as I go. 

With that said, the DEV community has been a large part of learning journey and I would like to take the leap to start creating content to help others who are also learning to code.

Welcome to my little space on the internet. I'm also on [GitHub] (https://github.com/TavetteHepburn) and [Twitter](https://twitter.com/TavetteHepburn). I'm open to virtual coffee chats and other opportunities to learn and grow in public.
Perl perlbrew and plenv is same as Python pyenv.
Tags: perl, python
Published: 2021-03-12 01:37:22

I write Perl topic. Dev community next read show me pyenv.

so I write this entry.

Perl <a href="https://perlbrew.pl/">perlbrew</a> and <a href="https://github.com/tokuhirom/plenv">plenv</a> is same as Python pyenv.

Both are tool that install specific version of perl into user directory and switch Perl version.

Both have command cpanm. cpanm is useful, small, fast Perl module install tool.

There is a lot of information about Python, oh the other hand, there is little information about Perl, so I will write it here.
JS and CSS Feontend for collaboration
Published: 2021-03-12 01:13:22

Hello,i am php (laravel) begginer.I need frontend developer for growing up together and collaborating on some cool projects.
I expect to know how to make website like this: https://cruip.com/demos/solid/

If you have skill for website like this,leave a comment,and we can make some cool stuffs.
Day 38: React Stopwatch
Tags: 100daysofcode, react, javascript
Published: 2021-03-12 01:06:39

```javascript
    var StopWatch = React.createClass({
      getInitialState: function() {
        return {
          isStart: false,
          elapsed: 0,
          diff: 0,
          laps: [],
        };
      },
      componentWillUnmount: function() { // clear timer
        clearInterval(this.state.timer);
        this.setState({timer: undefined});
      },
      tick: function() {
        var elapsed = Date.now() - this.state.start + this.state.diff;
        this.setState({elapsed: elapsed});
      },
      getTimeSpan: function(elapsed) { // 754567(ms) -> "12:34.567"
        var m = String(Math.floor(elapsed/1000/60)+100).substring(1);
        var s = String(Math.floor((elapsed%(1000*60))/1000)+100).substring(1);
        var ms = String(elapsed % 1000 + 1000).substring(1);
        return m+":"+s+"."+ms;
      },
      onClick: function() {
        if(!this.state.isStart) { // start
          var timer = setInterval(this.tick, 33);
          this.setState({
            isStart: true,
            timer: timer,
            start: new Date(),
          });
        } else { // pause
          clearInterval(this.state.timer);
          this.setState({
            timer: undefined,
            isStart: false,
            diff: this.state.elapsed,
          });
        }
      },
      setLap: function() {
        var lapElapsed = this.state.laps.length ? this.state.laps[0].elapsed : 0;
        var lapTitle = "Lap"+(this.state.laps.length+1);
        var lapTime = lapTitle+": "+this.getTimeSpan(this.state.elapsed - lapElapsed)
        var lapElem = { label: lapTime, elapsed: this.state.elapsed };
        this.setState({laps: [lapElem].concat(this.state.laps)});
      },
      reset: function() {
        clearInterval(this.state.timer);
        this.setState({
          timer: undefined,
          isStart: false,
          elapsed: 0,
          diff: 0,
          laps: [],
        });
      },
      render: function() {
        return (
          <div>
            <h1>{this.getTimeSpan(this.state.elapsed)}</h1>
            <button onClick={this.onClick} style={style.button}>
              {this.state.isStart ? "pause" : "start"}
            </button>
            <button onClick={this.setLap} style={style.button}>lap</button>
            <button onClick={this.reset} style={style.button}>reset</button>
            <ul style={style.lap}>
              {this.state.laps.map(function(lap) {
                return <li key={lap.id}>{lap.label}</li>;
              })}
            </ul>
          </div>
        );
      }
    });
```
How to wait for 2 actions to dispatch another? - Redux Saga
Tags: redux, sagas, react, javascript
Published: 2021-03-12 00:39:01

In some situations, you may want to dispatch an action only after 2 actions have been dispatched in [redux-saga](https://redux-saga.js.org/), next I will explain step by step how to get this.

First, I will explain the scenario:
1. Imagine that we have a component called **Counter**, and it has a button to multiply a value.
2. A value should be multiplied only when action **A** followed by **action B** has been dispatched in order.
3. If the aforementioned in the previous point is not fulfilled, the **action C** (multiply action) is not dispatched.

The **Counter** component has the next signature.
```react
//Counter.js
const Counter = ({ value, initialAction, multiply }) => (
  <div>
    Current Value: {value} times{" "}
    <button onClick={initialAction}>Action A</button>{" "}
    <button onClick={multiply}>Action B</button>
  </div>
);

```

**Counter**, has 2 buttons, the first one will be used to dispatch an initial action to process into a **saga**, then it will dispatch the **FIRST ACTION**, as shown in the following code.

```react
//sagas.js
import { put, takeLatest, take } from "redux-saga/effects";

export function* initialSaga() {
  // side-effects (http calls)...
  yield put({ type: "FIRST_ACTION" });
}

export function* multiply() {
  // do other things...
  yield take(["SECOND_ACTION"]);
  yield put({ type: "MULTIPLY" });
}

export default function* rootSaga() {
  yield takeLatest("INITIAL_ACTION", initialSaga);
  yield takeLatest("FIRST_ACTION", multiply);
}
```
The magic occurs in **multiply** [generator function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators), because it will wait until **SECOND_ACTION** is dispatched to continue and dispatch a **MULTIPLY** action.
```react
 yield take(["SECOND_ACTION"]);
 yield put({ type: "MULTIPLY" });
```

So, when second button (multiply) is clicked, **SECOND_ACTION** action will be dispatched and **multiply generator** will continue from the line where it ended previously.

Graphically follow the following order.

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

By the way, the multiplication is done inside a reducer.
```react
//reducer.js
export default function counter(state = 1, action) {
  switch (action.type) {
    case "MULTIPLY":
      return state * 2;
    default:
      return state;
  }
}
```
In summary, a value will be multiplied only when 2 actions have been previously executed.

Below you have a complete example.
{% codesandbox redux-saga-example-forked-extp9 %}

Redux-Saga is fun and very easy to use, and I love it for that.

Thank you for reading my blog post.
Fabian
Scripts comments 📜
Tags: programming, development, code, docker
Published: 2021-03-21 16:51:31

---
title: Scripts comments 📜
published: true
date: 2021-03-12 00:15:00 UTC
tags: programming, development, code, docker
cover_image: https://www.benjaminrancourt.ca/temp/scripts-comments.2274.jpg
canonical_url: https://www.benjaminrancourt.ca/scripts-comments
---
At work, I write a lot of scripts to **automate commands** , like _Dockerfile_, _GitLab CI_, or just a group of commands for a specific task. In my scripts, I like to add a lot of **comments** to indicate **what** the command does or **why**. Sometimes I even add comments between its **arguments** , as some of them may not be clear. 🥴

These comments may be obvious for _experienced developers_, but I think it can helps readers, as they might not have the same knowledge. It might even be myself in a few months or years, as I regularly switch from one language to another, depending on the project I am working on.

Unfortunately, the comments between the arguments of a multiline command **differ from a shell to shell**. So sometimes, I find myself looking for an example in a previous projet to comment the commands of the script I am writing. 🔎

To facilitate the development of my future scripts, I decided to write this little post as my **personal memo**. 📝

I hope this helps you write better scripts as well! Enjoy! 😊

## Bash

- Normal comments: `# Comment`
- Comments between arguments: ``# Comment``

```bash
# Downloads the package lists from the repositories and updates them
apt-get update \
# Install the following dependencies with the specified versions
# To check if the versions are up to date: https://packages.debian.org/search?suite=buster&keywords=wget
&& apt-get install --no-install-recommends --no-install-suggests -y \
  locales=2.28-10 `# To be able to change the language` \
  unzip=6.0-23+deb10u2 `# To be able to unzip the source files` \
  wget=1.20.1-1.1 `# To be able to obtain the source files`
```
<figcaption>Example of a multiline command in Bash with comments</figcaption>

## PowerShell

Excerpt taken from my [_Lint PowerShell scripts with PSScriptAnalyzer_](https://www.benjaminrancourt.ca/lint-powershell-scripts-with-psscriptanalyzer) post.

- Normal comments: `# Comment`
- Comments between arguments: `<# Comment #>`

```powershell
# Sets values for a registered module repository
Set-PSRepository \
  -ErrorAction Stop <# Action to take if a command fails #> \
  -InstallationPolicy Trusted <# Installation policy (Trusted, Untrusted) #> \
  -Name PSGallery <# Name of the repository #> \
  -Verbose; <# Write verbose output #>
```
<figcaption>Example of a multiline command in PowerShell with comments</figcaption>
The two big dangers of rolling back
Tags: cicd, devops, rollback, release
Published: 2021-03-12 08:50:27

---
title: The two big dangers of rolling back
published: true
date: 2021-03-12 00:00:00 UTC
tags: cicd, devops, rollback, release
canonical_url: https://jhall.io/archive/2021/03/12/the-two-big-dangers-of-rolling-back/
---

Broken code is inevitable. Despite our best planning, automated tests, code review, and everything else, sooner or later (probably sooner) you’ll find that you’ve deployed a broken feature into production, and users of the system are complaining.

Our natural instinct in such a case is to quickly jump back to the last working version—a process we colloquially call a “rollback”.

Today I offer two reasons not to do this. Tomorrow I’ll talk about an alternative.

**Diverging from the established software release cyle is risky.**

On a healthy team, releasing software changes into production should be second nature. It should be as natural, and automatic, as breathing, and it should require just as much thought on a daily basis. I’m describing (and assuming) that this team is using [continuous deployment](https://jhall.io/posts/benefits-of-cd/).

On such a team, a rollback to a previous version of software on production servers is a divergence from normal. This isn’t _always_ a problem in practice, of course, but it’s a _potential_ problem area. When you roll back a service version, do you need to roll back any other dependencies, too? Are there any steps that are normally automated, that now need to be performed manually? Do dependent services need to be restarted? Etc.

In theory, of course, a rollback process could be automated as completely as a normal release, to aleviate this concern. And if you find yourself depending on rollbacks, you definitely should do this!

**A rollback blocks other progress**

The other serious problem when doing a rollback is often overlooked: It blocks all other development work from progressing. Of course, here I’m assuing the use of [_real_ continuous integration](https://jhall.io/whatisci).

To illustrate, let’s imagine a rollback scenario:

1. Service version 1.2.4 is released to production. A seroius bug is discovered.
2. The service is rolled back to version 1.2.3 while the bug is investigated and fixed.
3. Meanwhile, all updates to the service are put on hold, lest version 1.2.5 be released before the bug is fixed.
4. Eventually the bug fix is applied, and 1.2.5 is released. Now any backlogged work can be committed, and 1.2.6, 1.2.7, etc, are likely to be following quickly.

Even on a small project owned by a single team, this can be a problem. On a large project, this can effectively put an entire department’s work on hold for the duration of the bug fix. And then once the bug is fixed, you get a slew of upgrades, effectively negating the [reduced risk](https://jhall.io/posts/benefits-of-cd/#3-reduced-risk) benefit that CD can offer.
Intégration continue avec GitHub
Tags: github, vue
Published: 2021-03-11 22:24:13

# Preuve de concept
Lien vers [GitHub](https://github.com/Massy-Haddad/mhaddad-integration-continue-vue)

Je suis sur que mon intégration continue est bien configurée car lorsque je vais dans l'onglet [Actions](https://github.com/Massy-Haddad/mhaddad-integration-continue-vue/actions) de mon projet,
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djfx15v5x6k2lhqe7oz5.PNG) je peux constater que `Merge pull request #1 from Massy-Haddad/Massy-Haddad-patch-1` a été un franc succès.

De plus, en cliquant sur l'opération [Lint code base](https://github.com/Massy-Haddad/mhaddad-integration-continue-vue/runs/2089890703?check_suite_focus=true), je peux aussi constater que les opération on fonctionnés, à savoir, l'installation des dépendances `npm install`, le build du projet Vue `npm run build`  ainsi que l'exécution des test `npm test`.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysl1n4fcj2in7fygb2y0.PNG)

---

# Documentation utilisée
Tout d'abord, j'ai écouté la [vidéo](https://youtu.be/cP0I9w2coGU) comme introduction dans les action de GitHub, elle m'a permis de comprendre la structure d'un `workflow` et comment tout cela fonctionnait.

Ensuite j'ai poursuivi la documentation avec le [Guide de démarrage](https://docs.github.com/en/actions/quickstart) avec lequel j'ai appris à créer mon premier `workflow`.

---

# Comparaison avec l'intégration continue sur GitLab
Tout d'abord, je pense les deux environnements, à savoir GitHub Actions et GitLab Pipelines, sont très similaire.

Quand à l'organisation, je crois que GitHub est légèrement plus clair et organisé, je m'explique :

Dans GitHub, les `workflows` permettent de ne pas se confondre entre toutes les tâches (jobs) et de séparé clairement celles-ci :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djfx15v5x6k2lhqe7oz5.PNG) Puis, en entrant dans un `workflow`, nous pouvons voir toutes les tâches exécutées.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysl1n4fcj2in7fygb2y0.PNG) La séparation des fichier `yaml` est donc possible grâce au concept de `workflow` ce qui permet aussi une meilleure organisation et une séparation des tâches.

Tandis que dans GitLab toutes les tâches (jobs) sont réunies dans la même page et ce, sans séparation.![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1sqzpg88la3exxwujtxo.PNG)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5euzz9pdnczt9paiw6r7.PNG) Il manquerait, selon moi, un `workflow` comme dans GitHub afin d'observer plus clairement les tâches. Il faut aussi noter que le fichier `.gitlab-ci.yml` grossira de plus en plus puisqu'il n'est justement pas possible de créer d'autres `workflow` si je puis dire.

Pour conclure, ces deux système fonctionnent aussi bien l'un que l'autre, sauf que GitHub est, pour ma part, une meilleure option et ce, grâce à sa simplicité et son organisation.

---
How to make an input tag read-only using HTML?
Tags: html
Published: 2021-03-12 00:00:00

---
  title: How to make an input tag read-only using HTML?
  published: true
  tags: HTML5
  date: Fri Mar 12 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-input-field-readonly-html
  cover_image: https://melvingeorge.me/_next/static/images/main-f52f5eb2bf22f2a741086c6b8d89a827.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-input-field-readonly-html)
  
To make an `input` tag field readonly, you can pass an attribute called `readonly` to the tag in HTML.

```html
<!-- Make `Input` Tag Readonly in HTML -->
<input type="text" readonly />
```

- Adding the `readonly` attribute to the `input` tag will restrict the user from entering text into the `input` but the value in the `input` tag will be visible to the user if there is any.

For example, let's set a value in the `input` tag using the `value` attribute and make it readonly.

```html
<input type="text" value="I'm a value which can only be copied" readonly />
```

That's all! 😃

See the above code live in [JSBin](https://jsbin.com/japireqejo/2/edit?html,output)

### Feel free to share if you found this useful 😃.

---
Upgrade a User to be a Super User
Tags: postgres
Published: 2021-03-11 23:58:46

In terminal run
```
sudo su postgres
```

After typing your password and getting in postgres type:
```
psql
```

Type your postgres password. Once you are in `psql` run 
```
\du
``` 

to see all your users. Notice the table that is displayed, and pay attention to the List of roles attributes column.

Once you know what user you are giving super user permissions, run:
```
ALTER USER <user> SUPERUSER;
```

To confirm the changes run again `\du`. You should see your user with the new role Superuser.

That's it, hope this help someone!

Photo by [Mehdi Babousan](https://unsplash.com/photos/-1v0JL_wINc?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink) on [Unsplash](/s/photos/superman?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)