teleren/devto huggingface dataset:
Railway. A Free Alternative To Heroku!!!
Tags: heroku, webdev, beginners, news
Published: 2022-09-03 10:54:56

Recently, due to the news with Heroku for shutting down their Free Plan, we have all been extensively looking for alternatives. [Railway](https://railway.app?referralCode=tXRquz) is such one of them I would recommend.

## What is Railway???

**[Railway](https://railway.app?referralCode=tXRquz)** is a deployment platform where you can provision infrastructure, develop with that infrastructure locally, and then deploy to the cloud.

![railwayimage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/reue9jxn376aztkovvci.png)

_Source : Railway_

## Developing Locally

So far [Railway](https://railway.app?referralCode=tXRquz) spun up a Postgres instance and a web server providing all the needed variables on deploy. We will connect to that very same Postgres instance locally to help us develop our app.

![railwaygif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzm4au2wps5jl193bs1j.gif)

Lets begin by cloning the repo you created on your machine.

### Install and Link the CLI

The Railway CLI to connects your code to your infrastructure.

Install with Brew, NPM, or Scoop:

```
brew install railwayapp/railway/railway
```
or

```
npm i -g @railway/cli
```

Log in to your account by running the login command.

```
railway login
```
Then, when you are in your project's directory, link your repo to the template project with the following command.

```
railway link
```

## Features

![sourceimages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mn9vjr7557ebv4qvauhe.png)

_Source : TechCrunch_

1. **Autoscaling:** Based on the load, Railway will automatically scale the application to meet the user demands. Railway bills only for computes on the platform. 

2. **Metrics:** Railways offers a wide range of real-time metrics to debug issues instantaneously. The platform sends queries for negative trends and shows developers exactly what is wrong so that they can troubleshoot the issues when required.

3. **Apps run indefinitely:** Compared to Heroku, where your app shuts down when it does not receive any input for over 30 mins, deployments on Railway run indefinitely. You can either run your app using Procfile or deploy a Docker file.

## Happy Coding!!!

Being PaaS implementations, Heroku and Railway both bring similar features and offer a suite of benefits like cost efficiency, improved speed to market, etc.

Heroku was one of the first to bring container-based cloud computing to the mainstream market and is widely popular.

So, What are you waiting for? **[Sign Up Today](https://railway.app?referralCode=tXRquz)**

**Thank You for reading till here. Meanwhile you can check out my other blog posts and visit my** [Github](https://github.com/devarshishimpi).
How I was able to install php-cs-fixer. Vscode + Linux machine
Tags: php, vscode, cakephp, laravel
Published: 2022-09-03 10:48:30

What caused me to write this article was after a frequent failed lint test for an [open source organisation](https://cdli.mpiwg-berlin.mpg.de/) that I'm currently contributing to via [google summer of code](https://summerofcode.withgoogle.com/programs/2022/projects/pBbCdRWu).

The [resource](https://cloudkul.com/knowledgebase/installaton-php-cs-fixer/) I used for installation but wait..

To be bit a elaborate and for a proper updated installation process, here is what I did:  I used the [latest version](https://github.com/FriendsOfPHP/PHP-CS-Fixer/releases/tag/v3.10.0) of php-cs-fixer then entered the command that followed to install php-cs-fixer. 

```cmd
wget https://github.com/FriendsOfPHP/PHP-CS-Fixer/releases/download/v3.10.0/php-cs-fixer.phar -O php-cs-fixer

chmod +x php-cs-fixer

sudo mv php-cs-fixer /usr/local/bin/php-cs-fixer

sudo chown -R user name: /usr/local/bin/php-cs-fixer
```
_Note: Adding `sudo` often require that you put password- please put your password. The part that says `username` should be replaced with your linux machine's username_
After that run the following command:
```php
php-cs-fixer
```
You should see something like the screenshot below: 

![php cs fixer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr1wypd27kj884yx6gor.png)

Then to lint a php file, open that file with a text editor and in the terminal you can run

```php
php-cs-fixer fix
```
That will do!

#### Lets make php cs fixer work naturally on vscode. 
By doing this, we don't always have to type the command, php-cs-fixer, in vscode terminal. 

Then install php-cs-fixer vscode extension by [junstyle](https://marketplace.visualstudio.com/items?itemName=junstyle.php-cs-fixer). 

Next, Open a php file that you will like to lint using  vscode text editor.
On vscode, Click on settings (Linux: `ctrl + ,`). 
In the settings search bar, search for `php-cs-fixer executable path`, you should see something like this below:

![php-cs-fixer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijxeu1fwum8fye3ju97j.png)
In the executable path field, enter the following:
`/usr/local/bin/php-cs-fixer`.

That should be it! You can lint your code now: press `F1` or `ctrl + Shift + I`. 

That should be all.
[Linkedin](https://www.linkedin.com/in/chidiebere-chukwudi-49a982182/).

Cover image credits
[pixabay](Photo by Pixabay: https://www.pexels.com/photo/abstract-business-code-coder-270348/). [ Annushka  Ahuja:](https://www.pexels.com/photo/a-person-pouring-liquid-inside-the-measuring-cup-8113553/)
Graphql mutations with github gql api : follow and unfollow a user
Tags: reactquery, graphql, github, api
Published: 2022-09-03 10:44:50

# Graphql mutations 
## using the github graphql api with react-query

we'll use follow and unfollow user mutations
it takes in parmeter 
```ts
input:FollowUserInput|UnfollowUserInput
```
which has the fields 

```ts
{userId:String! ,clientMutationId:String}
```
so we'll be passing in the userId which we'll get from the user as id , we can ignore clientMutationId since it's not required

## the mutations

```ts
import gql from "graphql-tag";

export const FOLLOWUSER = gql`
  mutation followUser($input: FollowUserInput!) {
    followUser(input: $input) {
      clientMutationId
    }
  }
`;

export const UNFOLLOWUSER = gql`
mutation unfollowUser($input:UnfollowUserInput!){
  unfollowUser(input:$input){
    clientMutationId
  }
}
`;
```

## custom usegQLmutatin

```ts
import { useMutation } from "react-query";
import { GraphQLClient } from "graphql-request";
import { DocumentNode } from "graphql";

export const useGQLmutation = (
  token: string,
  mutation: DocumentNode,
  config = {}
) => {
  const endpoint = "https://api.github.com/graphql";
  const headers = {
    headers: {
      Authorization: `Bearer ${token}`,
      "Content-Type": "application/json",
    },
  };
  const graphQLClient = new GraphQLClient(endpoint, headers);
  const fetchData = async (vars: any) => {
     return await graphQLClient.request(mutation,vars);
   };
  
   return useMutation((vars:any) => {return fetchData(vars)},config);

};

```

## usage in the project

```ts
const followMutation = useGQLmutation(token,FOLLOWUSER)
const unfollowMutation = useGQLmutation(token,UNFOLLOWUSER)
const [yes, setYes] = useState<any>(dev?.viewerIsFollowing);

const followThem = (their_id: string) => {
    setYes(true);
    // followUser(their_name, token);
    followMutation.mutate({input:{userId:their_id}})
  };
  const unfollowThem = (their_id: string) => {
    setYes(false);
    // unfollowUser(their_name, token);
    unfollowMutation.mutate({input:{userId:their_id}})
  };

```
[full project](https://github.com/tigawanna/gitdeck)
[live preview](https://gitdeck-two.vercel.app/)
ES5 Array.map() function for #React Quick Notes.
Published: 2022-09-03 10:29:39

1. Array.map() function iterate through every element in array only once.
2. It do not alter original array but return new array when called.

For example.

```javascript
let myArray = [1,2,3];

var newArrayMultipleOfOldArray = myArray.map(x=>x*2);
console.log(newArrayMultipleOfOldArray );

//Below reference is from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

// Arrow function
map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })

// Callback function
map(callbackFn)
map(callbackFn, thisArg)

// Inline callback function
map(function(element) { /* … */ })
map(function(element, index) { /* … */ })
map(function(element, index, array){ /* … */ })
map(function(element, index, array) { /* … */ }, thisArg)
```
Advantages of using Bootstrap over designing websites from scratch using HTML/CSS/JS?
Tags: html, javascript, webdev, beginners
Published: 2022-09-03 10:04:03

The Benefits of Using Bootstrap Framework.
Using the Bootstrap framework saves time in many ways by taking advantage of reusable code for Navbars, Dropdowns, Labels, Alerts, List groups and JavaScript plugins. Using the framework offers these design benefits:

- Easy to prevent repetitions among multiple projects.
- Responsive design that can be used to adapt screen sizes and choose what shows and what doesn’t on any given device.
- Maintaining consistency among projects when using multiple developer teams.
- Quick design of prototypes.
- Cross-browser compatibility.
- Ample documentation.

I have some bootstrap video [tutorials](https://www.youtube.com/playlist?list=PL9bD98LkBR7MQDG8yyLk3M95HJit70Pcu) for beginners. Anyone can start watching this tutorials.
Containers in the Cloud
Tags: aws, containerapps, eks, fargate
Published: 2022-09-03 09:49:31

#### ECS - Elastic Container service

- ECS is container orchestration service
- ECS helps to run Docker containers and EC2 machines
- ECS is made of:
    - ECS EC2: running ECS tasks an user-provisioned EC2 instances
    - Fargate: running ECS tasks on AWS provisioned compute instances (serverless)
    - EKS: running ECS on AWS powered Kubernetes
    - ECR: Docker Container Registry hosted on AWS
- ECS and Docker are very popular for micro-services
- IAM security and roles are at the task level

#### Concepts

- ECS cluster: set of EC2 instances
- ECS service: application definitions running on ECS cluster
- ECS tasks + definition: containers running to create the application
- ECS IAM roles: roles assigned to ECS tasks

#### ECS - ALB integration

- Application Load Balancer has a direct integration feature with ECS called port mapping
- This allows us to run multiple instances of the same application on the same EC2 machine
- Use cases:
    - Increase resiliency even if the application is running on one EC2
    - Maximize utilization of CPU cores
    - Ability to perform rolling updates without impacting application uptime

#### ECS Setup and Config file

- Run an EC2 instance, install the ECS agent with ECS config file or use ECS-ready Linux AMI (still need to modify the config file)
- ECS Config file is at `/etc/ecs/ecs.config`
- Config settings:
    - `ECS_CLUSTER`: to which cluster belongs the EC2 instance
    - `ECS_ENGINE_AUTH_DATA`: authenticate to private registries
    - `ECS_AVAILABLE_LOGGING_DRIVERS`: used for enabling CloudWatch logging
    - `ECS_ENABLE_TASK_IAM_ROLE`: enable IAM roles for an ECS tasks


#### ECS - IAM Task Roles

- The EC2 instance running the containers should have an IAM role allowing it to access the ECS service for the ECS agent
- Each task inherits EC2 permissions
- ECS IAM task role: role dedicated to each task separately
- Define a tas role: we can use the `taskRoleArn` parameter in the task definition

#### Fargate

- When launching an ECS cluster, we have to create our EC2 instances, which means basically we are managing the underlying infrastructure
- With Fargate, this is eliminated since this AWS service is serverless
- We have to provide task definitions and AWS will run the container for us
- To scale we just have to increase the task number


#### ECR - Elastic Container Registry

- Store, manage and deploy container in AWS
- Fully integrated with IAM and ECS
- Data is sent over HTTPS and encrypted at rest

#### Amazon EKS

- EKS = Elastic Kubernetes Service
- It is a way to launch managed Kubernetes clusters on AWS
- Kubernetes is an open-source system for automatic deployment, scaling and management of containerized applications
- It is an alternative to ECS having a different API
- EKS supports EC2 if we want to deploy worker nodes or Fargate to deploy serverless containers
New matrimonial Script on Node JS rolling soon..
Tags: matrimonial, matrimonialscript, phpmatrimonialscript
Published: 2022-09-03 09:47:55

We have been there in Matrimonial script market since last 10 years , The technology has changed on a fast pace in these years and so we have updated our Matrimonial script software

Now we are working on anew version of Matrimonial which will be more fast , more secure and more reliable as compared to current matrimonial websites

We are now working on advance languages like Node JS and Angular JS to develop a Matrimonial script that is more reliable , More secure and will be **[BEST MATRIMONIAL SCRIPT](https://www.readymatrimony.com)** available across the internet

Stay Tuned we will have some good news soon..
[Discussion] Do software companies care about the users anymore?
Tags: motivation, healthydebate
Published: 2022-09-03 09:42:07

I have been working in Software Industry for 5 years. Slowly, I am coming to the realization that Softwares are not meant for making user's life easy anymore, but, make a lot of money to the company.

I don't know what to feel anymore. All my seniors have become managers, and reporting how many "new users" than "user success stories".
I made an outdoor adventure game to motivate me to go outside more
Tags: showdev, javascript, webdev, gamedev
Published: 2022-09-03 09:25:05

I was bored with the usual routes for my daily walk, so I made a "Random Adventure Generator" that creates a bunch of random coordinates to reach. When you reach one of the coordinates you level up and then a new set of coordinates is generated. For the first level there are a bunch of coordinates nearby, but for later levels you need to travel farther and since it's all random, you will explore places you probably have never been to.

Here is the link to the game: [https://earthquest.net](https://earthquest.net)

The locations of the randomly generated coordinates change every day so that you can go outside every day and have a new experience and discover new places. Also, all players have the same coordinates, so when playing with your friends, you all can go to the same places!

I made a small trailer video (Animations and all are also pure Javascript):

{% embed https://youtu.be/OpxVnSCkEqI %}

Before building EarthQuest, I played some other geolocation games, but was always annoyed that they require a lot of interaction. Maybe it's just me, but I find it awkward to stand around outside and having to interact with my phone for several minutes before moving on to the next goal. So for EarthQuest it's just: "Go to this coordinate; touch the Level Up button; Go to the coordinate for the next level". This let's you focus on your surroundings and get moving.

The game runs completely in the web browser. At first I was considering building a native app, but with the [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) I can just use plain old Javascript. And as an additional bonus I don't have to deal with the walled gardens that are the app stores. Plus, it's a PWA (Progressive Web App), so you can still install it on the Homescreen.

This is one of my most ambitious projects so far, so please try it out and let me know what you think!
Laravel: Generate phpDoc properties for your Eloquent models
Tags: laravel, php, webdev, productivity
Published: 2022-09-03 09:24:52

Hi guys,

We all know that Laravel's Eloquent is using PHP's magic methods (`__get` & `__set`) for the columns, accessors, relationships,... and much more.

When the development happens, it hards for us to know which "properties" that we can use for a particular Eloquent models. We have to remember the columns' names, the relationship names,... It is a big pain, IKR?

An alternative that we got - is using the phpDoc block and add the properties, eg:

```php
/**
* @property-read int $id // column
* @property string $name // column
* @property-read Country|null $country // relationship
* ...
*/
class User extends Model
{
```

With this way, it is super **IDE-friendly** (eg PHPStorm) and increase your productivity a lot.

Butttt, doing the manually work is not so fun, is it? So here am I with the EloquentDocs generator.

Repo: https://github.com/sethsandaru/eloquent-docs

## Installation

Simply hit this to install, dev only:


```bash
composer require sethphat/eloquent-docs --dev
```

Laravel auto-discovery will automatically do the magic 😉

## Usage

### View properties of your model

```bash
php artisan eloquent:phpdoc App\Models\User
```

It will show up all the properties (columns, relationships,...) for you to preview, before performing the write

### Write properties to your model

```bash
php artisan eloquent:phpdoc App\Models\User --write
```

It will write the phpDoc block to your model (overwrite if your model already has a phpDoc block)

### Optionally, use short class names

```bash
php artisan eloquent:phpdoc App\Models\User --short-class
```

From `* @property-read App\Models\Country|null $country` to `* @property-read Country|null $country`

## Next Goals

- Ability to scan a whole folders and replace the phpDoc blocks automatically.
- Add more helper/suggestion methods for Eloquent models

Thanks guys, have a great productive works with Laravel!
Running multiple frameworks in Astro
Tags: astro, webdev, beginners
Published: 2022-09-03 09:22:04

In the previous article, we looked at [adding React to an Astro 1.0 project](https://daily-dev-tips.com/posts/astro-1-0-adding-react-components/).
Today we'll look at how we can run multiple frameworks simultaneously in Astro.

This is a real superpower as we are free to mix and match frameworks.

Let's take the previous article as our starting point.
[Get the branch from GitHub](https://github.com/rebelchris/astro-react/tree/part-1)

You can technically choose any framework. I'll be using Vue for this case.

## Adding a second framework to Astro

The first thing we'll have to do is install the new framework.
For Vue, we can run the following command.

```bash
npm run astro add vue
```

Once done, you should see React and Vue setup in your `astro.config.mjs` file.

```js
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import vue from '@astrojs/vue';

export default defineConfig({
  integrations: [react(), vue()],
});
```

Now we can add a new Vue component to our `src/components` directory.
I'll call this file `Vue.vue` (super original).

```vue
<script>
export default {
  data() {
    return {
      count: 0,
      name: 'Vue',
    };
  },
};
</script>

<template>
  <button @click="count--">-</button>
  <pre>{{ count }}</pre>
  <button @click="count++">+</button>
  <p>I'm a {{ name }} component</p>
</template>
```

This is a basic counter we made for the React component. And then, we response with what language this specific component is in.

Now we can try and add this component to our `index.astro` page.

```js
---
import React from '../components/React.jsx';
import Vue from '../components/Vue.vue';
---
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>Astro</title>
	</head>
	<body>
		<React client:load />
		<hr />
		<Vue client:load />
	</body>
</html>
```

As you can see, we decided to hydrate this on `client:load` so the counter will work.
[Read more about hydration](https://daily-dev-tips.com/posts/astro-1-0-adding-react-components/#adding-react-to-astro) (Scroll down a little bit).

If we now run our application, we should see both components active and working.

![React and Vue component inside Astro](https://cdn.hashnode.com/res/hashnode/image/upload/v1661319692649/RQO1PnqHD.png)

You can also find today's code in this [GitHub repo](https://github.com/rebelchris/astro-react/tree/part-2).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Creating a new website? I have Nuttertools for you.
Published: 2022-09-03 09:15:57

Ever played Grand Theft Auto? If you have, then you might be familiar with "Nuttertools". Nuttertools is one of the many cheat codes in the video game which gives your character a set of weapons. In this article, I'll share some cheat codes of my own with you. A special group of websites that will make you stand apart from any ordinary web developer. I call these my Nuttertools.

## 1. [webpagetest.org](https://www.webpagetest.org)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvth4xha0jmby1bl41pg.png)
With this website, you get to run performance, lighthouse, core web vitals, visual comparison, and trace route tests on your website. It can simulate a wide range of internet connections right from 2G to cable in various locations around the world. The tests are recorded and so can can playback to see how your website gets displayed on the browser and also share the recorded results if you wish to.

## 2. [validator.w3.org](https://validator.w3.org)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pjgbe40myfhdxew3gl0.png)
This W3C markup validator checks for areas of improvement and errors in your website HTML syntax and suggests how these can be addressed. As you can see in the image above, I have some of my own I can fix.

## 3. [wave.webaim.org](https://wave.webaim.org)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6tjr7jtn2fy4pmebq08.png)
The internet has a very large number of users who are diverse in many of ways. This tool comes in handy if you wish to create a website that is accessible to a wide audience, including those with visual, audial, physical, and cognitive impairments. It helps you identify implementations that may not be favourable for impaired individuals and how these can be can corrected. An example is colour contrasts that may not be distinguishable by people with colour blindness as well as they would be for normal users. This way you can promote inclusivity even in your web solutions.

## 4. [whatsmydns.net](https://www.whatsmydns.net)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kytqhtdnn1m2cxw7vv8o.png)
Let's say you've gotten a new domain and/or made a couple of changes. These changes can take a some good time, up to 72hours  to reflect worldwide on the all the Domain Name Servers. This website helps you check the DNS propagation.

## 5. [websitecarbon.com](https://www.websitecarbon.com)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4m99jz53dpi3yctitxfh.png)
Last but most definitely not the least, is a tool that calculates how much carbon is released into the atmosphere whenever a user visits your website. You can then see how much your website contributes to global warming and also suggests how you can reduce the carbon footprint. If there's at least one take away from this article, I hope this be it.

Do you know of any other "Nuttertools" that aren't on this list, do share in the comments section. I'd love to learn from you too.

*Cheers!*