teleren/devto huggingface dataset:
Connect Coolify (heroku alternative) with Gitlab (self-hosted) & Deploy Laravel using Dockerfile
Tags: dockerfile, coolify, heru, docker
Published: 2022-05-16 13:04:44

Updated: 2024-04-16
Read more at: https://coolify.io/docs/knowledge-base/git/gitlab/integration#private-repositories 

----
**Following Steps are outdated**

### Step 1: Connect Coolify with GitLab:

- Login `coolify` dashboard
- Click on Git Sources
- Click on Add > GitLab.com
- First enter the `HTML URL`, it the `url` where `gitlab` is hosted
- Then enter `API` which is `<gitlab-url>/api`
- Then Choose `GitLab Application Type`, it should be `Instance-wide application (self-hosted)`
- Now, visit your `<gitlab-url>/admin/applications` and click on `New Application`. Enter the application name eg: `coolify`, in `Redirect URI` enter the `Webhook URL` from your `coolify` page:
[Screenshot](https://drive.google.com/file/d/1UmL9A_7hdSIgJrqXCeyHjRelcV4EvB99/view)

And choose `api`, `read_respository`, `email` then Click `Save application`.

On next page, you'll the the `OAuth ID`, `Application ID` & `Secret`:
[Screenshot - OAuth ID](https://drive.google.com/file/d/1Qj0lc3t9BTLYPjnAGPHvlCrf7LrKYjkt/view)

Once, this is done, we're ready to deploy the apps.

### Step 2: Create a repository and clone

### Step 3: Setup laravel

### Step 4: Create a `Dockerfile` at the root of the project:

```
FROM docker.io/bitnami/laravel:9
COPY . .
RUN composer install
CMD php artisan serve --host=0.0.0.0
EXPOSE 443
```

Commit all the files.

### Step 5: Point your domain to `coolify` ip.
To do this you need to add 2 A record from your domain control panel:

```shell
A     <project>.domain-name.com       xxx.xxx.xxx.xxx
A     *.<project>.domain-name.com     xxx.xxx.xxx.xxx
```

`xxx.xxx.xxx.xxx` is your `coolify` server ip.



### Step 6: Deploy Laravel

- From `coolify` dashboard, click on `Applications`
- Click on "+" icon and select source
- Select your repository
- Select the Destination
- Select `Docker` at "Configure Build Pack" screen
- Now, on `General` page, choose following options:

```shell
URL (FQDN): <project>.domain-name.com
Port: 8000
Dockerfile Location: /Dockerfile
Base Directory: (keep the default value)
Enable Automatic Deployment: Enabled
Enable MR/PR Previews: Enableed
Debug Logs: Enabled
```

- Click `Save` and Click on `Build Logs`, after success build visit the url, you will be able to see the Laravel.
Animated Colorful 3D List using Pure CSS
Tags: webdev, tutorial, html, css
Published: 2022-05-16 12:59:26

In this tutorial you will learn how to create a colorful and interactive 3D list using HTML and pure CSS. No additional plugin added for this interaction

{% youtube lSMTpVmuxAw %}

[HTML Tamizhan](https://www.youtube.com/HTMLTamizhan) - YouTube channel about web-development and high technologies. Learn the fundamentals of HTML and CSS while watching the videos of our channel.
1 month into the Coding Lifestyle
Tags: javascript, beginners
Published: 2022-05-16 12:54:21

I began my journey in the SWE about 1 month ago.  The first few weeks were a bit difficult because i never had exposure to programming prior to joining the bootcamp. Moreover,
I'm normally an outdoors' person so it took me some time to adjust to the work-from-home lifestyle.  By the end of the first week, I was drowning in code, had barely gone out or gotten any exercise.  My anxiety increased as I realized that i was falling behind. By the end of the second week,  i was almost ready to give up.

So i decided to reach out to my fellow classmates and instructors for some advice, only to realize I was not the only one that felt that way. What i was feeling was completely normal.  

So I changed my approach to learning and can gladly say that I just finished my first project(a single page app) a few days ago.  After the project and code challenge, I was impressed with how much progress i made in only just a month.  During this process, I've had as many moments of self-doubt as self-realization. I am now excited to immerse myself deeper into the DEV world and begin my second Phase!

Here are some tips that have worked for me:

- Get at least one hour of exercise
- Eat healthy, helps you think better
- Be social
- Go over the material before lecture
- stay in touch with fellow classmates
- Do not be afraid to ask for help
- When writing code, try to explain to yourself what your objectives are, piece by piece
It’s THE event to explore and grasp the fundamentals of creating dApps/Web 3.0 apps using Back4app!
Tags: lowcode, nocode, dapps
Published: 2022-05-16 12:48:44

Join us on Thursday, May 26th, 11 am (pacific time) as we witness the first of its kind event about the launch of  our latest Web 3.0 project- The Evolve, with Back4app. EVOLVE is a cryptocurrency offering a Video Game Competition Platform where gamers can use EVOLVE tokens to enter Compete-To-Earn competitions.


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

Here from Team Evolve- Casey and Suat will join us to speak how they created this amazing Blockchain app with Back4app and aspire to grow big in this exciting world of web 3.0. We will also be exploring Evolve Coin's outlook for the future and their thoughts on our platform!
Register Here: https://us02web.zoom.us/webinar/register/WN_K3nunL32QO6dQkXOUlO9yw
It’s going to be Big, Fascinating and Futuristic!
Rewriting a template to a react app
Published: 2022-05-15 17:26:35

It's a nice challenge. You take a template you like, for example this one ([live demo](https://templatemo.com/templates/templatemo_575_leadership_event/)) and you create a react app with this template. 

![template screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6khp7a59ii5mq4l06cub.png)

PS: If you want to see the result in react, scroll down for the github repository!

PS2: This tutorial assumes you have followed the Getting started tutorials on the react site and know a little bit of typescript. I'm not very precise here and you have to interpret some steps with experience in react. 

To permit browsing (the url changes when clicking the menu) you can use react-router-dom. The easiest step here is to start with this template that includes the router (I found it [here](https://www.npmjs.com/package/cra-template-react-router-dom)). I choose to have it in typescript.  
```
npx create-react-app react-template --template react-router-dom-typescript
cd react-template
npm install
code . // this launches visual code studio
```

Now you'll have to:
- clean up, make the pages/files empty
- This template uses bootstrap. So copy all style and javascript links to the index.html file in the dist folder (this is the production final page where react is applying the code on). So in `<head>` you add links to css, and in this template the js is loaded at the bottom of the body tag, so just copy it there as well. 
- copy all assets (like css, js, media) to the dist folder
- First you just copy all template html to the HomePage.js return function
- replace all occurences of class to className  (this is because React cannot deal with class, because that's a reserved word in javascript, and react uses JSX so it could confuse things)
- check all errors that typescript returns. Tags should have an enclosing tag. So `<br>` becomes `<br />` and `<img ...>` becomes `<img .../>`
- replace `<a href="blabla">` tags by `<Link to="">` and
- add: `import {Link} from "react-router-dom"` on top
- The Link tag refers to a new route, for example `<Link to="/contact">` will bring the url to `localhost:3000/contact`. This page does not yet exists, but you can add this later. 
- extract some sections and make new react components for them, for example VideoHeader
- In the VideoHeader i've added the possibility to show a youtube video fullscreen as the background
- Make new pages and adjust the menu
... well you can see my example below, have fun!

Check the github here: 
https://github.com/wimdenherder/react-bootstrap-template
PartialFunction implemented in Kotlin, inspired by scala
Tags: kotlin, programming, java
Published: 2022-05-16 12:45:18



```kotlin

import java.util.function.Function
import java.util.function.Predicate

/**
 * 参考scala的偏函数
 *
 * @see scala.PartialFunction
 */
abstract class PartialFunction<X, Y> : Predicate<X>, Function<X, Y> {

    fun isDefinedAt(x: X): Boolean {
        return test(x)
    }

    override fun apply(x: X): Y {
        return if (isDefinedAt(x)) {
            applyIfDefined(x)
        } else {
            throw IllegalArgumentException("Value: ($x) isn't supported by this function")
        }
    }

    abstract fun applyIfDefined(x: X): Y

    infix fun orElse(fallback: PartialFunction<X, Y>): PartialFunction<X, Y> {
        val outer: PartialFunction<X, Y> = this
        return object : PartialFunction<X, Y>() {
            override fun test(x: X): Boolean {
                return outer.test(x) || fallback.test(x)
            }

            override fun applyIfDefined(x: X): Y {
                return if (outer.isDefinedAt(x)) {
                    outer.applyIfDefined(x)
                } else {
                    fallback.apply(x)
                }
            }

            override fun apply(x: X): Y {
                return applyIfDefined(x)
            }
        }
    }
}
```
ESLint, qué es y cómo instalarlo en nuestro proyecto
Tags: beginners, tutorial, eslint, react
Published: 2022-05-16 12:32:46

**ESLint** es una herramienta que nos ayudará a mejorar nuestro código. Por un lado detectando problemas en nuestro código y por otro lado sugiriendo una manera más correcta o universal de cómo escribir nuestro código.

Instalar **ESLint** en nuestro proyecto es simple, en la terminal posicionados en nuestra carpeta del proyecto ejecutamos el siguiente comando:

```
$ npm install eslint --save-dev
```
Una vez ejecutado el comando, debemos crear un archivo de configuración. La manera más fácil según la documentación oficial es ejecutando el siguiente comando:

```
$ npm init @eslint/config
```
Al ejecutarlo nos preguntará lo siguiente:

```
? How would you like to use ESLint?
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style
```
Elegimos “To check syntax, find problems, and enforce code style”. Luego nos preguntará:
```
? What type of module does your project use?
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
```
Elegimos “JavaScript modules (import/export)” ya que nuestro proyecto será en React.
```
? Which framework does your project use?
> React
  Vue.js
  None of these
```
Luego nos pregunta si usaremos TypeScript. En mi caso, no. Pero si tu utilizas TS podrás Yes. :D
```
? Does your porject use TypeScript? No / Yes
```
Luego nos pregunta:
```
? Where does your code run?
  Browser
  Node
```
En nuestro caso seleccionamos “Browser”. Luego nos preguntará acerca de el estilo:

```
? How would you like to define a styler for your project?
> Use a popular style guide
  Answer questions about your style
```
Utilizaremos una guía popular. En nuestro caso “Standard” será.

```
? Which style guide do you want to follow?
  Airbnb
> Standard
  Google
  XO
```
Ahora nos pregunta en que formato vamos a querer nuestro archivo de configuración de ESLint. Aquí seleccionaremos la opción de “JavaScript”.

```
? What format do you want to your config file to be in?
> JavaScript
  YAML
  JSON
```
Luego nos va a preguntar para instalar las dependencias, a la cual confirmamos con Yes.

```
The config that you've selected requires the following dependencies:
eslint-plugin-react@latest
? Would you like to install them now? No / Yes
```
Una vez que aceptamos, nos pregunta:

```
? Which package manager do you want to use?
> npm
  yarn
  pnpm
```
En mi caso seleccionar “npm” y luego enter. Allí se terminarán de instalar las dependencias.

Ya tenemos creado nuestro archivo de configuración de ESLint en nuestro proyecto, ahora nos queda instalar la extensión de ESLint y **¡Listo!** Tenemos ESLint en nuestro proyecto.

_Realizaré futuros tutoriales con la instalación de la extensión de vscode y también con la instalación de Prettier y cómo puede trabajar junto a ESLint para mejorarnos como desarrolladores._

Tip: siempre lee la documentación oficial. En este caso podrás encontrar la documentación oficial de [ESLint aquí](https://eslint.org/docs/user-guide/getting-started).

_¡Gracias por leer!_ Ahora a disfrutar del código y de un café.
how to stay focused in learning Programming/software development
Published: 2022-05-16 12:09:43

1: My little trick, "Set up a workstation."
Though expensive, setting up work station would see you learn & work more efficiently. Even when you're watching a movie, you'd sometimes wanna get up and do some coding.

2:Listen Music When You Work
Music can help to keep the brain alert and prevent it from switching off.
Music can also be a motivator. If someone listens to epic soundtracks while working, they might be inspired to complete a big project.

3:Turn Off Social Media Notification
If your work does not require you to be online on social media platforms because while working social media notification distract you.

4:Don’t expect more than is possible.
 Keep in mind that you are a human being, not a robot who can work day and night. Make sure you take breaks at least for a couple of hours per day. Make sure you get enough sleep and food. This affects how you think and how you focus.

5:self-discipline
But mostly, focus comes from you. When you are working on a difficult problem, and you suddenly feel the desire to read your email, you must stop yourself, saying, “I can’t let email distract me.” When your phone alerts because some friend posted on facebook, and you want to look to see who it was, you have to stop yourself, saying, “It’s just facebook. It’ll still be here at 5 PM.”



If you Found This Thread Helpful Please Follow Me on twitter [westEfizzy](https://twitter.com/WestEfizzy)
Postman File Upload (Image & Video)
Tags: api, testing, beginners, tutorial
Published: 2022-05-16 12:08:51

In this post, I will cover how to do file upload using Postman for both image and video. Postman makes it really easy to do file uploads with the help of form-data. Let’s take a look at that –

For this post, I will be using [Imgur API](https://apidocs.imgur.com/) (you are free to use any API that supports file upload). So here are the following things we need to successfully upload the file using Postman –

- **API**: https://api.imgur.com/3/upload
- **HTTP Method**: POST
- **Authentication**: depending on the API
- **Body**: form-data

Check out the video below to learn how to upload file using Postman:

{% youtube aZLeWskC0Dw %}

---

- As part of form-data, you will need to provide the necessary key-value
- For key, change it from text to file and you will see ‘Select Files’ as a value

![Postman Select File](https://i0.wp.com/automationbro.com/wp-content/uploads/2022/05/Screen-Shot-2022-05-14-at-7.22.05-PM.png?resize=708%2C278&ssl=1)

- Upload the file by clicking on ‘Select Files’

![Imgur API File Upload](https://i0.wp.com/automationbro.com/wp-content/uploads/2022/05/Screen-Shot-2022-05-14-at-7.20.41-PM.png?resize=707%2C269&ssl=1)

- Once the file is upload, simply hit ‘Send’ and you should see a successful response (2xx).

![File Upload Response](https://i0.wp.com/automationbro.com/wp-content/uploads/2022/05/Screen-Shot-2022-05-14-at-7.24.27-PM.png?resize=702%2C383&ssl=1)

---

### Video Upload
Similarly, you can upload a video or any other file type as well, if the API supports it.

![Video Upload using Postman](https://i0.wp.com/automationbro.com/wp-content/uploads/2022/05/Screen-Shot-2022-05-14-at-7.25.15-PM.png?w=841&ssl=1)


That’s all there is in terms of file upload using Postman. As I said, Postman makes it really easy and straightforward to upload file.

---

**If you are interested in learning more about Postman, check out this Postman playlist –**
https://www.youtube.com/watch?v=XzoIYpQ_k5E&list=PL6AdzyjjD5HCiZyLYZqjRrB15gHLs8uyV
What does being a senior mean to you?
Tags: discuss, watercooler, career
Published: 2022-05-16 11:55:26

What does being a senior mean to you? What aspects would you say are essential to become or be qualified as one? If you're in charged of recruiting, what do you look for?

You don't have to be one to answer. I'd like to hear from both sides, from people who have a senior role and new developers who are not.
Justin Sun Scoops In A Whooping 1 Million In UST.
Tags: tron, justinsun, blockchain, opensource
Published: 2022-05-16 11:53:22

Justin Sun, founder of the Tron blockchain, confirmed his 1 million USD purchase on Curve, according to Etherscan. 

"I may have some secret plans." Sun responds to CEO Do Kwon's tweet via Twitter.

[https://twitter.com/WuBlockchain/status/1523216440538525697?t=MWEKfQco4YW_8BBQMvN5Ow&s=19](https://twitter.com/WuBlockchain/status/1523216440538525697?t=MWEKfQco4YW_8BBQMvN5Ow&s=19)

Sun announced his intention to purchase the Terra UST via Twitter on the 8th of May. This action elicited a wide range of reactions from the Twitter community, including one from Terraform's CEO Do Kwon. His plans for the newly purchased UST, on the other hand, remain unknown.

Although the crypto Twitter community assumed he would use it as a reserve for UST's USDD stablecoin or that the funds from the purchase would be thrown into a UST's pool, this was not the case.

Sun, according to reports, reveals his UST plans. Declaring that, like Bitcoin, the new stable coin will gain acceptance. Sun appears upbeat, as his current priority is to keep the UST stable.

The UST will make its official debut in the world of decentralized stablecoins.

Tron founder H.E Justin Sun also announced the launch of UST on May 6,  on the TRON blockchain, which will also be available on Ethereum and BNBChain. UST was created in collaboration with TRON DAO and other industry leaders.

TRON DAO enables users to participate in governance, and decision making in a freer, fairer, and more flexible fashion- users will enjoy the full range of rights to engage in and decide the future of the TRON Protocol. It will also act as a transparent mechanism to manage the reserves backing UST.

In contrast, the USDD appears to be identical to UST coins in every way. Tether USDT is a crypto currency that, like UST coins, is hosted on Ethereum and the Bitcoin Blockchain and is pegged to the value of a US dollar. Finally, Tron has set aside $10 billion in Bitcoin and other cryptocurrencies to support the USD.

According to Justin's tweet, "since its launch three days ago, USDD has traded more volume than LUSD and PAX and ranks 14th on Uniswap!"

The recent purchase by Sun has an effect on TerraLuna's price.

The recent acquisition of Sun is said to have had an impact on TerraLuna. Within the previous 24 hours. The value of Luna has decreased by 1.2 percent, according to available data. Following a low of $59.40 earlier today and news of TerraUSD (UST) depegging from the one-dollar mark, it has traded below the crucial 200-day moving average.


Furthermore, Bitcoin has lost its $34k support and looks set to breach $32k by tonight's weekly. It appears that Luna's problems will continue to have a negative impact.
Microsoft Edge Add-ons | NEW Feature to manage user reviews on your extension
Tags: browserextension, webdev, microsoft, edgeextension
Published: 2022-05-16 11:41:54

Microsoft Partner Center now includes a Reviews feature. This update brings a crucial change to help manage your Microsoft Edge extension product page.

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

This feature enables you to view and engage with the user reviews. You can thank your extension’s users for positive feedback or respond appropriately to any comments.

Your response to a review appears under the respective review on the product detail page of your Microsoft Edge add-on.

Go to [Partner Center](https://aka.ms/MicrosoftPartnerCenter) to try the Reviews feature!

Share your feedback and questions about this new feature with the Microsoft Edge Add-ons Team in the comments below or on the [_GitHub community's Discussion topic_](https://aka.ms/GitHub-Respond-to-user-reviews-on-your-MSFTEdgeAddon).
Software robots in finance industry
Published: 2022-05-16 11:39:13

Software robots working alongside humans is not an SF scenario. We have seen the many benefits of automation in numerous industries, especially those highly regulated, like finance and accounting. [Robotic Processing Automation](https://fastpathautomation.com/) has become a requirement for all businesses, especially during the pandemic.

[RPA](https://fastpathautomation.com/) can perform repetitive tasks of high volume. It allows employees to concentrate on more strategic tasks while also providing added value for their company. Software robots can work 24/7 and make no mistakes.

Cases of robotic process automation in finance and accounting
This list contains the most fundamental RPA cases in finance and accounting. It will help you gather empirical data to start (or improve) your RPA journey.

•	**Data management**
Financial institutions and business finance departments must keep track of all personal information about their customers. It includes names and addresses. These can change over time.
Software robots can extract and process all data instead of manually processing it. It is a cost-effective option that also reduces the risk of making mistakes.

•	**Opening an account and activating a card**
Account opening and card activation can be time-consuming in banking and finance. Customers may become impatient. Robotic process automation makes these tasks easier and faster. Automation benefits not only operational processes but also customer service. Also, it lowers stress levels for front-office workers.

•	**Invoice processing and accounts receivable**
When creating or processing invoices, many details need to be considered. It is one of the most common tasks in accounting. Large companies have to deal with many invoices received from various suppliers or contractors. These invoices must be recorded in the financial records. Robotic process automation can automatically process invoices and fix any mismatches.

•	**Reconciliations of accounts**
Software robots can download bank statements, link them with specific accounts and provide financial reports. Accounting professionals can find these tasks time-consuming as they have to extract and integrate the data manually or through legacy systems. RPA can collect data and determine if there are unusual operations.

•	**Complex reports and financial predictions**
The creation of detailed forecasts in terms of investments, budgets and cost targets is a critical aspect of a company’s wellbeing. It will help to make strategic decisions. RPA is a useful tool in this regard.

Moreover, it is vital to monitor the company's revenue and profit performance. RPA is a tool for accounting to create these reports with zero errors.

#### Conclusion
Financial operations can be tedious and require attention to detail. Software robots may change this mode of operation. RPA may also enable employees to shift their focus to providing more value to customers. It will be a benefit to the entire company.