teleren/devto huggingface dataset:
GitLab DevOps: GitLab Runner
Tags: gitlab, devops
Published: 2022-09-18 18:22:29

This relates to [the GitLab DevOps process](https://ryanrobinson.technology//tags/gitlab-devops/). GitLab can automate deployment to a server, meaning that you do not have to log in to that server separately to pull the changes and carry out any other needed steps for the installation.

But there’s a catch: if your server is not publicly-accessible, such as behind a VPN, which is pretty common for development and staging servers, you’ll need to install a runner. This is because GitLab cannot initialize a connection to a hidden server, so the server will have to start the connection instead.

Here’s how I installed a GitLab runner on a server. This was specifically for Oracle Linux 8, but it will be pretty close for other distributions.

## Install GitLab Runner package

First you need to install the GitLab Runner package on your server. GitLab will give you the instructions to do this, but here’s the general idea.

First, copy the package to your server, in the /usr/local/bin folder:

```bash
sudo curl -L --output /usr/local/bin/gitlab-runner "https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64"
```

Add permissions to execute that file. You’ll need to be able to run it.

```bash
sudo chmod +x /usr/local/bin/gitlab-runner
```

Navigate to that folder and install:

```bash
cd /usr/local/bin
sudo ./gitlab-runner install --user=libgit --working-directory=/home/libgit
```

## [](#register-a-runner)Register a runner

Once the runner is installed, you’ll need to register at least one runner on the server.

```bash
sudo ./gitlab-runner register --url https://gitlab.com/ --registration-token [token]
```

The script will prompt you with a few configuration options. Some are fairly obvious, but I’ll note a couple others.

The token can be found in the GitLab Project -&gt; Settings -&gt; CI/CD -&gt; Runners.

For the tag, I recommend having a standard convention across all your servers, like \[site shortcode\]-\[dev stage\]. For example, site1 will have:

- site1-dev
- site1-staging
- site1-prod1
- site1-prod2

And site2 will have:

- site2-dev
- site2-staging
- site2-prod

For what executor to use. Shell is the simplest, at least in a scenario like this of running it on a Linux server.

That’s it. It may take a bit to appear, but the runner will now be associated with the GitLab project.
ReactJS - audio waveforms (visualizer)
Tags: react, waveform, javascript
Published: 2022-09-18 18:21:14

Yes hello there! 

Please be nice, this is my first post here, and i am currently learning React from scratch. 

Im coming from HTML, CSS and basic javascript, trying to push myself to learn React. Ive started this little side project after school and im halfway there. 

Im trying to create this audio-player, where the user can upload a song, and there will be created a waveform to that track. 

I have successfully created the upload page, created a database as such. 

My problem is to create the waveform from the audio file.  Ive searched all around google, and the only real example i get thrown back is to use wavesurfer.js library. 

As im pretty new to react, this rabbit hole is something special. When using it, i get a blank white page thrown in return when i try using this as a component. As i understand its not made for react, only javascript. And i can get it to work fine in easy HTML, css and javascript. But when i try to use it in a react application nothing works. 

I will be happy to provide code as an example if asked, but there is nothing special im doing besides using the wavesurfer.js DOCS examples.. 

so does anyone have an alternative to how i can create this, or have used wavesurfer with react before??

Dont think im in the right place to start creating this thing by my self yet, so i kind of dont have any options available, unless some of you have done this before in react. 

Peace! and thank you. 

Have also posted on SO, but with no luck of getting answers. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rhusis6d735ixi9lqe9.png)
new extension that bring icon right near you
Tags: icons, vscode, extension, javascript
Published: 2022-09-18 18:18:12

The VS extension makes working with icons a breeze. It works like magic and you'll wonder how you ever lived without it.

## introduction
When you need to add a batch of icons and you have to look for them on the internet or create them yourself, it can be a real pain. That's why we've created the icons VS extension. That brings icons inside your workspace and lets you search for them, preview them and add them to your project with a single click.
## how it works
 if you want to use the library and use `<i />` tag you can reference how to install it on this link [stunicons](https://www.npmjs.com/package/stunicons)

## _installation_

1. go now to extension tab and search with vsicons or stunicons 
   click on install
2. follow this link to install [stunicons extension](https://marketplace.visualstudio.com/items?itemName=logicdiscovered.vsicons)

1. using icons


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tlsc1itfkfnh63aruka.png)

2.  from side bar


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdhgo4phtmuku8winv0v.gif)

## What’s next?
The Extension is still under development. If you don’t mind trying it out then please feel free to download the extension and let me know what you think, I am open to all feature requests and bug reports in order to make this extension better.
Pin Save - decentralized Pinterest
Tags: javascript, react, github, web3
Published: 2022-09-18 18:17:18

Pin Save is a decentralized image sharing and content aggregation platform where users can not only control the content, but also the platform itself.

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

## Problem

Currently monolithic web applications retain ownership of user content and stifle the adoption of decentralized technology.

A user could use OpenSea to publish the content, however the obstacles are significant:

- Only a very small fraction of collections get to the homepage.

- The content publishing process requires confidence and experience in web3.

- Feedback and engagement metrics related to content are reflected mostly in price movement.

- In addition, there is a lack of an alternative platform in Filecoin ecosystem to provide users with an ability to create, share, moderate and discuss decentralized posts.

## Solution

Our team advocates implementation of decentralized image sharing and content aggregation platform where users can not only control the content, but also the platform itself.

## Team
Pavel Fedotov

[LinkedIn](https://www.linkedin.com/in/pavel-fedotov-pinsave/)

[Twitter](https://twitter.com/pfedprog)

[GitHub](https://github.com/Pfed-prog/)

Grigore Gabriel Trifan

[LinkedIn](https://www.linkedin.com/in/grigore-trifan-666biyz/)

[Twitter](https://twitter.com/grigore_trifan)

[GitHub](https://github.com/GregTrifan)

## Resources

[Pin Save Demo](https://evm.pinsave.app/)
[Pin Save GitHub](https://github.com/dspytdao/PinSave-EVM)
[Dspyt DAO Website](https://dspyt.com/)
[Dspyt DAO GitHub](https://github.com/dspytdao)
Drupal 7: Assign Permissions Based on Username File
Tags: drupal, php
Published: 2022-09-18 18:13:56

Here’s a recent scenario I encountered: a Drupal role needs to be assigned to certain users. The site is using a single sign on (SSO) system with a lot of users who could log in. But only some of those should be granted a certain permission. The list of those who can access the special permission role is automatically generated and put in place on the server on a daily basis, in a simple format with one line for each account name.

I have pulled out a generic version of this code and [made it available on my GitHub](https://github.com/ryan-l-robinson/drupal-permissions-from-file).

## Hook on login

First, we need to hook on login. When a user signs on, we want to find out if they should have the extra permission. This can be done with [the hook\_user\_login hook](https://api.drupal.org/api/drupal/modules%21user%21user.api.php/function/hook_user_login/7.x).

```php
/**
 * Implements hook_user_login
 */
function permissions_from_file_user_login(&$edit, $account) {

  // assign the "test role" role, if necessary.
  _permissions_from_file_update_permissions($account);

  // do not redirect password reset requests.
  if (!isset($_POST['form_id']) || $_POST['form_id'] != 'user_pass_reset') {
    if (isset($_GET['target'])) {
      drupal_goto($_GET['target']);
    }
  }
}
```

## Read file

Next we have another function that checks to see if the username is in the file or not:

```php
/**
* Reads from file and determine whether the specified user is in the list
**/
function _permissions_from_file_is_role($account) {
  $contents = file_get_contents('/var/usernames/roleusernames.csv');
  return preg_match("/$account->name/",$contents); 
  // returns if name is in the file.
}
```

## Assign or Remove Role

Finally, we can assign permissions based on whether or not their username is in the file.

```php
/**
* Calls function that checks if permissions should be found
**/
function _permissions_from_file_update_permissions($account) {
  $is_role = _permissions_from_file_is_role($account);
  $role = user_role_load_by_name('test role');
  if ($is_role) {
    // add permissions to that user
    user_multiple_role_edit(array($account->uid), 'add_role', $role->rid);
  }
  else {
    // delete the role assignment, if it exists
    user_multiple_role_edit(array($account->uid), 'remove_role', $role->rid);
  }
}
```
Just a css grid that slides in
Tags: javascript, react, nextjs
Published: 2022-09-18 18:13:35

```
import * as React from 'react';
import Box from '@mui/material/Box';
import Switch from '@mui/material/Switch';
import Paper from '@mui/material/Paper';
import Slide from '@mui/material/Slide';
import Button from '@mui/material/Button';
import { Card, Grid, Typography } from '@mui/material';
import { red } from '@mui/material/colors';

const icon = (
  <Box
  sx={{
    display: 'grid',
    gridAutoFlow: 'row',
    gridTemplateColumns: 'repeat(4, 1fr)',
  //  gridTemplateRows: 'repeat(2, 50px)',
    gap: 0.02,
  }}
>
  <item>  <Card sx={{ m: 1 }}>
    <Box component="container" sx={{ width: '100%', height: '100%' }}>
 <Typography sx={{color: 'ButtonShadow' ,width: '100%' }}>    sliding menu </Typography>
    </Box>
  </Card> </item>
  <item>  <Card sx={{ m: 1 }}>
    <Box component="container" sx={{ width: '100%', height: '100%' }}>
 <Typography sx={{color: 'ButtonShadow' ,width: '100%' }}>    sliding menu </Typography>
    </Box>
  </Card> </item>
  <item>  <Card sx={{ m: 1 }}>
    <Box component="container" sx={{ width: '100%', height: '100%' }}>
 <Typography sx={{color: 'ButtonShadow' ,width: '100%' }}>    sliding menu </Typography>
    </Box>
  </Card> </item>
  <item>  <Card sx={{ m: 1 }}>
    <Box component="container" sx={{ width: '100%', height: '100%' }}>
 <Typography sx={{color: 'ButtonShadow' ,width: '100%' }}>    sliding menu </Typography>
    </Box>
  </Card> </item>
  </Box>
);

export default function SimpleSlide() {
  const [checked, setChecked] = React.useState(false);

  const handleChange = () => {
    setChecked((prev) => !prev);
  };

  return (
    <Box sx={{ height: 180 }}>
      <Box sx={{ width: `calc(100px + 16px)` }}>
        <Button
        onClick={handleChange}
          label="Show"
        > click me </Button>
        <Slide direction="right" in={checked} mountOnEnter unmountOnExit>
          {icon}
        </Slide>
      </Box>
    </Box>
  );
}

```

awesome meterial based gid :P
Build services in Django without coding (free product)
Tags: django, nocode, opensource, webdev
Published: 2022-09-18 18:00:25

---
title: Build services in Django without coding (free product)
published: true
description: This material explains how to build services in Django without coding using Soft UI Dashboard, a popular open-source starter
tags: django, nocode, opensource, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lx4yfuo7u1m8tre977jj.jpg
---
Hello coders! 

This article explains how to use [Soft UI Dashboard](https://appseed.us/product/soft-ui-dashboard/django/), an open-source starter, to build services in [Django](https://appseed.us/admin-dashboards/django/) without coding. The source code used in this video material is published on GitHub and based on the permissive (MIT) license, the project can be used in hobby, commercial, or eLearning projects. Thanks for reading!

- 👉 [Soft UI Dashboard Django](https://appseed.us/product/soft-ui-dashboard/django/) - `product page`
- 👉 [Soft UI Dashboard Django](https://github.com/app-generator/django-soft-ui-dashboard) - `source code`

{% embed https://www.youtube.com/watch?v=JYgibCxW6Mg %}

--- 

# Video transcript

- ✅ `Download` the project
- ✅ `Start the app` using Docker
- ✅ Access the **generated services**: `API` & `DataTables`
- ✅ Shut down the `docker` instance
- ✅ `Update the model definition` used to generate the services
- ✅ `Re-start the app`
- ✅ Access the **updated services**: `API` & `DataTables`

**The project is open source** and is constantly updated with new features.

---

> `Thanks for reading!` For more resources and support, please access:

- 👉 [Soft UI Dashboard Django](https://appseed.us/product/soft-ui-dashboard/django/) - product page
- ✨ Ask for [support](https://appseed.us/support/) or download [free starters](https://appseed.us/apps/open-source/)
How to log your heavy database queries in your Laravel project?
Tags: laravel, database, opensource, productivity
Published: 2022-09-18 17:23:50

I work in data intensive Laravel based applications. So, the biggest problem occurs as your application grows is that your application getting slowed down. Or, sometimes, the client keeps on saying that application is running slow, but it is just one query that only client is running (and God knows why and from where!).

This is a common scenario when your application starts to age, the database keeps getting heavy, and somewhere, that new guy added a database query which was not optimized at all!

Then we need to start the debugging process and check what went wrong! Just to overcome such a problem, (and taking this as an excuse to start my open source contribution journey), I built a Laravel package to help me track down such heavy queries. I named it as **[DBLog](https://github.com/akshit-arora/dblog)**

## Just another Database Logger?

Well... Not actually. I found some great logging tools already available for Laravel. One of my favorite was [Laravel Query Logger](https://github.com/overtrue/laravel-query-logger). But, I needed some more feature from that.

## Why DBLog?

* **Track the slow queries.**: Track slow queries in the log files. (Common feature, I know)
* **Track queries on triggers**: _Inspired from Laravel Query Logger_. Only log the queries based on the triggers.
* **Get the page from which the query ran!**: Again, inspired from Laravel Query Logger, I must know the page which is running slow, not just the slow query.
* **Duration Bifurcated Logs**: _That's a unique feature I wanted_. Just logging the slow queries was not enough, sometimes, we need to know the queries which were really slooooow. So, just set up the time brackets and it will log the query based on the time taken. Now, I have the logs of the queries which needs immediate attention and then going down the duration list.
* **Datewise Logs**: 

> **Client**: Hey! I ran this page last week, can you please check that page why was it slow? It's running good today though!

A very common dialog we hear! That feature, just because of that. I don't have to search a single 10 MB log file which contains queries from the past 6 months. I just need to find that date logs and check out the issues. :)

So, I just started my journey to the open source contribution, (finally!!) I really hope that I can be at the service for the community. Please check the package on this [Github Link](https://github.com/akshit-arora/dblog) and try it once. I appreciate your reviews, feedback and criticism on it. :)
PHP Let Static Binding Example
Tags: php
Published: 2022-09-18 17:18:34


```
<?php
	class Course{
		protected static $coursName = "python advance course";

		public static function getCourseName(){
			return static::$coursName;
		}

	}
	class Student extends Course{
		protected static $coursName="zend php";
	}
	echo Student::getCourseName();

	// $obj = new Student;
	// echo $obj->getCourseName();

on getCourseName(){
			return static::$coursName;
		}

	}
	class Student extends Course{
		protected static $coursName="zend php";
	}
	echo Student::getCourseName();

	// $obj = new Student;
	// echo $obj->getCourseName();
```
Starter tool for Ubunt
Tags: bash, ubuntu, linux, beginners
Published: 2022-09-18 17:14:55

It was a pain for me to create new starters for every script or program and I wonder why it is so complicated to create a starter in Ubuntu ?
However, as a bash newbie I created a little tool today, which manages the starters in Ubuntu.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzbudys3na1nfc46l1wu.png)


All you have to do is paste the .sh file path and a logo.
Now the script creates a starter for you.
Of course there is also an install file :D

Maybe there are a lot of similar tools, but building this tool had a big learning affect :)

You can visit the code at: https://github.com/Elias970/StarterManager
Instance Types (EC2)
Tags: aws, ec2, ec2instance, cloudcomputing
Published: 2022-09-18 17:13:09

We are going to explore the EC2 Instance types as long as we can.

AWS Provides wide range of selection of instance to fit different requirements and use cases. Instance types are combination of compute, memory and networking capacity and provides flexibility to choose appropriate mix of resources based on our requirement.

Instance Types of categorized among five types,

- **General Purpose**
- **Compute Optimized**
- **Memory Optimized**
- **Accelerated Computing**
- **Storage Optimized**

Let’s see all the family types,

**General Purpose**
General purpose instances provide a balanced with all aspects of CPU, Memory and networking resources. So we can use for variety of workloads.

**Compute Optimized**
Compute Optimized instances are core of compute based application that benefits from high performance processors. Instances belonging to this family are suited for high compute performance for batch processing, machine learning and other compute intensive applications.

**Memory Optimized**
Memory Optimized instances are designed to provide fast performance for large set of memory.

**Accelerated Computing**
Accelerated computing instances that are use hardware accelerators to perform Graphics Processing, Data pattern matching, etc. Also it‘s well suitable for GPU based application.

**Storage Optimized**
Storage optimized instances are used for storage intensive workloads in Amazon EC2. This type of instance are comes with instance storage by default. Storage attached with instances physically and it’s called instance storage.


![EC2 Instances Types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4ws3naf5o6za4gebqp8.png)

> You can find more about instance details _[here]
(https://aws.amazon.com/ec2/instance-types/)_
Protect Directories Using APACHE
Tags: apache2, docker, security, devops
Published: 2022-09-18 17:08:10

Apache has a setting that causes anyone accessing the site to be prompted for a password.

While not the best way to keep your files safe, in a very quick and simple way to do

so let's go

## Htaccess

To request a password on your **apache** server, you must tell to **apache** that it needs to request a password, as one of the ways is `basic authentication`.

```shell
touch .htaccess
```

After creating the file edit it with the following settings:

```.htaccess
.htaccess
AuthType Basic
AuthName "Restricted Files"
AuthUserFile "/usr/local/security/.htpasswd"
Require valid-user
```

Where it says "Restricted Files", you can substitute whatever you want to appear to the user.

and where is the location of the .htpasswd file, you must first create the file, being possible to use the htpasswd file that comes in the linux environment

```shell
htpasswd -b -c .htpasswd <user> <password>
```

_💡 NOTE: Replace `<user>` with the desired username and `<password>` with the desired password_

if you don't want to use the command above you can also create a file manually and access any generator on the internet, for example:

https://hostingcanada.org/htpasswd-generator/

## Conf

If you are creating the server for the first time and want to make less edits, you can leave the settings inside the `conf` file:
```properties
 <Directory /var/www/html>
   AuthType Basic
   AuthName "Authentication Required"
   AuthUserFile "/etc/htpasswd/.htpasswd"
   Require valid-user
 </Directory>
```

## Code and Example

If you prefer, I have a ready-to-use repository:
https://github.com/walternascimentobarroso/PHP-Apache


## Extras

If you want to delve deeper into `apache`, visit [this link](https://github.com/phanan/htaccess) and the [documentation](https://httpd.apache.org) itself ;)

## References

https://httpd.apache.org/docs/2.4/howto/auth.html
https://httpd.apache.org/docs/2.4/programs/htpasswd.html
https://hostingcanada.org/htpasswd/

***

## Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!
😊😊 See you! 😊😊

***

## Support Me

[Youtube - WalterNascimentoBarroso](https://www.youtube.com/channel/UCXm0xRtDRrdnvkW24WmkBqA)
[Github - WalterNascimentoBarroso](https://github.com/walternascimentobarroso)
[Codepen - WalterNascimentoBarroso](https://codepen.io)
User Meta Pro Add-ons Overview
Tags: wordpress, plugin, addons, programming
Published: 2022-09-18 16:41:14

There are free tools included in [User Meta Pro](https://user-meta.com/) version to meet specific needs. Some integrate with popular platforms and others offer more control over your data. These Add-ons will help you to improve the functionality of your website. There are 8+ [Add-ons](https://user-meta.com/add-ons/).

**User Listing :** Hide/Display contents based on user status (restriction rules in page/post editor)

**Woo Commerce Integration :** Integrate UMP’s shared fields with Woo Commerce and export data.

**BuddyPress xProfile Export :** Export BuddyPress xProfile data with User Meta Pro’s users export tool.

**WPML Integration :** Integrate WPML to translate plugin’s text.

**Switch filter or action hooks :** Allows integration or avoid plugin conflict by toggling filter or action hooks.

**Override default WP emails :** Override default WordPress emails with User Meta Pro generated emails.

**Personalize default User Meta forms :** Personalize default User Meta login, lost password and reset password forms.

**Restrict Content :** Tailor all the users’ permission to see your contents. You can moderate and censor your posts for different roles.

**Author Box :** Display author box with author data custom fields in posts/pages with complete control.

https://youtu.be/HriHFPrIANI