teleren/devto huggingface dataset:
vue-box-shadows
Tags: vue, css, programming, github
Published: 2022-07-22 05:16:54

Vue.js wrapper for [Box-shadow.css](https://madeas.github.io/box-shadows/) to build simple and awesome shadows with use vue.

This is a small package that adds interesting shadows to Vue.js projects. With it, you can create interesting and airy components without having to spend time learning how the CSS property you are using works. You just need to connect the package and choose the shadow number you like from the collection.

Package tested with Vue CLI and Nuxt.js. You can see examples in the [repository](https://github.com/andrejsharapov/vue-box-shadows). I will also welcome your wishes, which you can share in the repository [discussions](https://github.com/andrejsharapov/vue-box-shadows/discussions).

I'm a bit nervous and I hope you rate the repository and find it useful to you.
NextJs on vercel - missing files after build when interpolating file names
Published: 2022-07-22 05:15:27

While working on my free comparator for [staking crypto](https://stakingcrypto.io) - the perfect tool to find the best exchange to stake or lend your cryptos and earn the best rewards - I came across a difficult problem to understand.

## Setup

Site is in Next / typescript
It is deployed on Vercel
It loads mdx through next-mdx-remote in getStaticProps

## Build

Build works fine and resulting static files contains the content of an mdx file I'm loading in the page.

But after revalidation, content is not there anymore.

## ERROR: Could not find /var/task/content/static/en/home.mdx

Weirdly enough, the `content` folder exists during the build, thus creating correctly the static files

But after deploy, this `content` folder was not here anymore, thus revalidating page with empty content

## Reason

This is because nextjs uses [@vercel/nft](https://github.com/vercel/nft) to determine exactly which files (including node_modules) are necessary for the application runtime.

So when you're using

```
const folder = "toto"
fs.readFileSync(path.join(process.cwd(), folder))
```

this library can not guess what it should include in the build and thus do not include the files

## Solution

You need to specify exactly the path of the file to be included, and not a variable containing that path.

```
fs.readFileSync(path.join(process.cwd(),'toto'))
```

Thanks!
PostgreSQL Common Commands
Tags: postgres, programming
Published: 2022-07-22 05:00:00

## **PostgreSQL Common Command You Need to know**



**Creating user,Creating Database,Giving the user a password & Granting privileges on database**

> ```
> sudo -u postgres psql
> postgres=# create database mydb;
> postgres=# create user myuser with encrypted password 'mypass';
> postgres=# grant all privileges on database mydb to myuser;
> ```



## Creating user

> ```
> $ sudo -u postgres createuser <username>
> ```



## Creating Database

> ```
> $ sudo -u postgres createdb <dbname>
> ```

## Giving the user a password

> ```
> $ sudo -u postgres psql
> psql=# alter user <username> with encrypted password '<password>';
> ```

## Granting privileges on database

> ```
> psql=# grant all privileges on database <dbname> to <username> ;
> ```



## **Psql commands**

> `psql=# \l     `                       *List available databases* 
>
>  `psql=# \c dbname  `                   *Switch connection to a new database* 
>
> `psql=#\dt  `                                    *List available tables* 
>
> `psql=#\d table_name `                         *Describe a table such as a column, type, modifiers of columns, etc.* 
>
> `psql=#\dn `                                  *List all schemes of the currently connected database* 
>
> `psql=#\df   `                                    *List available functions in the current database* 
>
> `psql=#\dv   `                                  *List available views in the current database* 
>
> `psql=#\du   `                                *List all users and their assign roles* 
>
> `psql=#\h   `                                   *Get help* 
>
> `psql=#\?   `                                  *Know all available psql commands*  
>
> `psql=#\q   `                                     *Exit psql shell* 
>
> `psql=#SELECT version();	`                     *Retrieve the current version of PostgreSQL server`



Thank you {% embed https://github.com/kidubo %}
Classifieds Site Design?
Published: 2022-07-22 04:57:21

I'm not a dev, don't hate me. I'm a designer - I just want to know how difficult or easy it would be to setup a website that is essentially a simple "jobs board" & "talent available" site. Essentially a classifieds that users can submit a form [that gets screened by a human] which, once approved is automatically formatted and uploaded as a simple card on the page. Additionally with filters that can sort / search function according to tags & location. In some ways, it's probably similar to this site, but doesn't need as much functionality. 

Why? I'm ideating on a site that connect volunteer talent to organisations making moves on climate change. A dead simple one, but one that is well made - I find a lot of the current sites very DIY-looking and often confusing.

What kind of language would you use if you were looking to find a developer for that kind of build? Or silver bullet solutions that already exist? My research is only just beginning! 

Thanks in advance :)
Const Object In Javascript
Tags: javascript, programming, webdev, beginners
Published: 2022-07-22 04:42:00

Understanding the Constant

```javascript
Test 
    const USER = {
         'Name':'SIMC',
         'Age': 25
    }

    USER.Age = 27
    console.log(Age)

    What will be the output here ?

    Answer is 27
```

Now you guys will think can we change the value of const ? 

we have const as Object.....So as per rules we can change the properties of an object. 

We can't change the object, we can only add or Edit

See Below Example 

```javascript
    const USER = {}
    USER = {'Age':'2'} 
```

Will get error in above code...Why ? Because we are trying to reassign the const variable....

###Conclusion 
We can change the properties of an object which defined as a const. We cant reassign the object.

Found it useful ?
Clash of Test Titans - A Test Automation Hackathon
Tags: testing, testdev, automationtesting
Published: 2022-07-22 04:32:06

Are you ready for the most exciting and challenging #Hackathon of the year 2022? 🥳

The Clash of Test Titans - powered by Test Titans Community and #pCloudy is a Test Automation Hackathon for #Testers, #Developers, #SDET's and everyone in between. It's a chance for you team up with your buddy or participate alone mightily, look at challenges dead in the eye, give it a wink and test your way towards victory! ✌️

And do you know what's the best part? 2 Lakhs worth #prizes for grabs! 💰🤑

Reserve your spot now [here](https://www.pcloudy.com/test-automation-hackathon/?345).: https://lnkd.in/gy5B82j7
Creating Service In Angular Using CLI/Manually
Tags: angular, service
Published: 2022-07-22 04:11:00

## **Create the Service using CLI**

```jsx
ng generate service <service-name>
```

### Structure :

```jsx
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class <service-name> {

  constructor() { }

}
```

## Create the Service Manually

To create a new service manually:

1. Navigate to your Angular project directory.
2. Create a new file, `<service-name>.service.ts`
3. At the top of the file, add the following import statement.

```jsx
import { Injectable } from '@angular/core';
```

1. Add @Injectable() service

```jsx
@Injectable({
  providedIn: 'root',
})
```

1. Add a `class` statement that includes the code for the component with constructor.

```jsx
export class <service-name> {

  constructor() { }

}
```

1. Using service in component, first need to Inject in constructor like this :
    
    Add a private  ex : `heroService` parameter of type `HeroService`to the constructor.
    

```jsx
// example
constructor(private heroService: HeroService) {}
```

      Next Import :

```jsx
// example
import { HeroService } from '../hero.service';
```

1. Need to add in `<app.module.ts>` like this :

```jsx
// example
@Component({
  /* . . . */
  providers: [HeroService]
})
```

and import in it.

```jsx
// example
import { HeroService } from '../hero.service';
```

Reference :  

[ Angular Service ](https://angular.io/tutorial/toh-pt4)

Live Example : 

[ Stack Blitz ](https://angular.io/generated/live-examples/toh-pt4/stackblitz.html)
VyLogin - Find Correct Login Pages
Tags: vylogincom, vylogin, login
Published: 2022-07-22 03:31:25

Users can quickly locate login gateways and login pages using [Vylogin.com](https://vylogin.com/). All users have total freedom to search and utilize the information on the website.

**VyLogin's Goal**
After seeing how difficult it is for individuals to locate login pages from official sources, we created VyLogin.com with the objective of assisting seekers by hand by consolidating, screening data, and displaying all of the login pages you wish to visit. For example, this page collects precise login pages for geforce now login according to our system and editors.

**Our features**
_Login with confidence_
VyLogin makes it a point to link to the login page from the most trusted websites, assuring the security of the user's account.

_Completely free_
Users may rapidly access login portals and login pages for geforce now login, as well as use the website's information for free.

_Detailed Directions_
All of the most extensive login guidelines are available right away, allowing users to complete the login procedure quickly. Follow the steps carefully, and if you have any issues, we can assist you in completing your geforce now login login quickly.

_Support 24/7_
If customers encounter any difficulties during the login process or require further assistance on our site, our support team will be available 24 hours a day, 7 days a week to assist you in resolving issues as quickly as possible

_Frequently updated_
Thousands of new websites are created every day, resulting in a large number of new login pages. This is why we update our site on a daily basis to guarantee we don't miss any login pages or websites where users need to log in.


For more information, please feel free to contact us here: 
Website: [https://vylogin.com/](https://vylogin.com/) 
Address: 3134 Lelia Place, Marina, California, 93933, USA
Phone: (530) 555-4534
Social medial: 
Twitter: [https://twitter.com/vylogin](https://twitter.com/vylogin)
Pinterest: [https://twitter.com/vylogin](https://www.pinterest.com/vylogin/)
Quickly set up a SharePoint Framework(SPFx) development environment
Tags: spfx
Published: 2022-07-22 03:17:00

開始建立 SPFx 專案之前，必須先設置開發環境，Let'e go！

**Step 1** 安裝最新版的 [Node.js](https://nodejs.org/en/) v16，完成後在 `console` 使用以下指令檢查當前版本
```powershell
node --version
```
**Step 2** 安裝編輯器，我選擇 [VS Code](https://code.visualstudio.com)

**Step 3** 在全域範圍安裝必要的工具
```powershell
npm install gulp-cli yo @microsoft/generator-sharepoint --global
```

**Step 4** 安裝 Gulp
```powershell
npm install gulp-cli --global
```

**Step 5** 安裝 Yeoman
```powershell
npm install yo --global
```

**Step 6** 安裝 Yeoman SharePoint 生成器
```powershell
npm install @microsoft/generator-sharepoint --global
```

**Step 7** 最後，必須信任自簽證書
```powershell
gulp trust-dev-cert
```

基本的環境設置到這裡算是完成了，下一篇文章會介紹如何建立專案，下次見！

---

### Reference
[Set up your SharePoint Framework development environment](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment)

---

Thanks for reading the article :tulip: :sunflower: :blossom:

If you like it, please don't hesitate to click heart button :heart:
or follow my [GitHub](https://github.com/FakeStandard) :star:
or buy me a coffee :arrow_down: I'd appreciate it.

[![Buy-me-a-coffee][1]][2]

[1]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h077sxd0vx1hix4t7lw8.png
[2]: https://www.buymeacoffee.com/FakeStandard

---
How To Disable Right Click Using jQuery
Tags: jquery, javascript, 100daysofcode, webdev
Published: 2022-07-22 03:16:42

In this article, we will see how to disable right click using jquery. Here, we will disable right click on the page using jquery. we will use the jQuery bind() method for jquery disable right click. when you don't want your users to download your images at that time you can disable your right click function using jquery. The context menu event occurs when the user right-clicks on an element to open the context menu.

So, let's see jquery disable right click, disable right click on the page using jquery, how to prevent right click option using jquery, contextmenu event javascript,  how to disable right click, how to disable right click on the website using javascript.
Example: How To Disable Right Click Using jQuery

In this example, we will use the ready() function and perform the bind method of jquery and check the right click event.

```
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<h3>How to Disable Right Click using jQuery</h3>

<script>
$(document).ready(function(){
     $(document).bind("contextmenu",function(e){
     	 alert('right click disabled');
        return false;
    });
});
</script>
</body>
</html>
```
 
---

You might also like:

- **_[Read Also: How To Generate QR Code Using Javascript](https://techsolutionstuff.com/post/how-to-generate-qr-code-using-javascript)_**

- **_[Read Also: Google Autocomplete Address In Laravel 8](https://techsolutionstuff.com/post/google-autocomplete-address-in-laravel-8)_**

- **_[Read Also: How To Create Image Slider Using jQuery](https://techsolutionstuff.com/post/how-to-create-image-slider-using-jquery)_**
Setup VPS - Debian, Nginx, with subdomains
Published: 2022-11-21 10:51:34

---
title: Setup VPS - Debian, Nginx, with subdomains
published: true
date: 2022-07-22 03:06:01 UTC
tags: 
canonical_url: https://cherylm.hashnode.dev/setup-vps-debian-nginx-with-subdomains
---

# Initial Server Setup

1. (if it's a reinstall) remove server from known\_hosts in .ssh folder
2. Create a new user and Grant access

3. Update package repositories

4. (if sudo is not installed) Install sudo, and add the new user to the sudo group. newUser is then put into the sudo group which members are allowed to use the sudo command in Debian
```
apt install sudo -y
usermod -aG sudo newUser

```
5. Setup firewall (ufw)

6. (Optional) [Top 8 Things to do after Installing Debian 10 (Buster)](https://www.linuxtechi.com/things-to-do-after-installing-debian-10/)

# (Optional) Setup SSH

1. Generate the key pair on the client (your computer) In windows powershell

2. Copy the public key (the generated file with .pub extension) to the server 

3. If everything is setup correctly, we should be able to SSH into the server using the follow command. Enter the pass phrase set up earlier

4. (optional) To connect to the server without having to specify the identity file every time, edit **/.ssh/config** , add the following entry for the VPS. Using the same username, VPS IP and filename used above. "Host" can be anything descriptive
```
Host 123.45.6.7 (newUser)
  HostName 123.45.6.7
  User newUser
  IdentityFile ~/.ssh/<filename>

```
Now we can simply use the following command to connect to the server
```
ssh newUser@123.45.6.7

```

# Setup the Web Server (Nginx)

1. [Installation](https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-debian-10)
2. [Setup multiple domains](https://linuxhint.com/install-multiple-domains-nginx-server/)

> Remember to Reload Nginx

```
sudo systemctl reload nginx

```

# (Optional) Setup SSL

This is optional unless your TLD requires it, such as .dev

Let's Encrypt provides SSL certificate which lasts 3 months and can be set to automatically renewed using the certbot package.

1. [How to Set Up SSH Keys on Debian 10](https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-debian-10)

# Add Subdomains

1. Create a new directory like /var/www/subdomain.mydomain.dev/html
2. Make a new file, subdomain.mydomain.dev in /etc/nginx/sites-available, with the following content

3. Create symbolic link in sites-enabled

4. Add SSL Certificates with certbot We have to redo all the old and new domains and subdomains. 

5. Restart nginx
I redesigned the McDonald's Website, Its a beauty!
Tags: 100daysofcode, css, programming, webdev
Published: 2022-07-22 03:04:00

```
console.log("Watch how I redesigned 
the McDonalds Website under an hour.") 
```
**CSS CRASH COURSE `🎬`:** https://youtu.be/ZOs9IJ8TdnE
Your feedback is greatly appreciated!

**Background**
The Flexbox Layout (Flexible Box) module attempts to provide a more effective approach to lay out, align, and allocate space among elements in a container, even when their size is uncertain and/or dynamic (thus the word "flex").
The fundamental goal of the flexible arrangement is to enable the container to change the width, height, and order of its components to best fit the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container can expand contents to fill empty space or contract contents to stop overflow.

While the Grid pattern is meant for bigger scale layouts, Flexbox layout is best suited for application components and smaller layouts.

**Read more:** https://css-tricks.com/snippets/css/a-guide-to-flexbox/
PHP Fundamentals || Setup PHP/Basic Syntax || Part 1
Published: 2022-07-22 02:56:49

[![IMAGE_ALT](https://img.youtube.com/vi/OGiFCwQogIc/0.jpg)](https://www.youtube.com/watch?v=OGiFCwQogIc)
**Learn about the fundamentals of php in this short course of mine.**
**_Have fun coding._**
Node Version Management Poll
Tags: javascript, node, deno, webdev
Published: 2022-07-22 02:56:44

If you use JavaScript and any type of version manager, I want your feedback! I'm building a cross-platform JS runtime management system called Runtime (aka. rt - the successor to my [NVM for Windows project](https://github.com/coreybutler/nvm-windows). 

Now is your chance to contribute to the direction of this project by completing the [short survey](https://t.co/oGqQCM9FPx).

Thanks in advance, and please reshare with your local JS community!
How to Write a Back End Developer Job Description
Tags: tutorial, programming, java, python
Published: 2022-07-22 01:19:55

Writing a job description for a back end developer can be daunting, but it doesn't have to be. With the right approach, you can create an effective and concise document that will help match candidates with the right position. In this article, we'll provide tips on how to write a Back End Developer Job Descriptionthat will appeal to both your employer and potential employees.

## Read more : **[5 professional tips to develop yourself in the field of Backend Developer](https://professional-writer0.blogspot.com/2022/07/build-your-developer-roadmap-5-steps-to.html)**

A successful career in back end development requires the possession of a number of skills and attributes. First and foremost, a back end developer must be technologically adept. They must have a strong understanding of both the web and the application layers, and be able to write code that solves Havocous problems. They must also be proficient in database management and be able to design, build, and maintain scalable architectures.

Successful back end developers also need to be resourceful and tenacious. They must be able to take on multiple tasks and complete them satisfactorily. They must also be comfortable working in a collaborative environment and be able to be tolerant of ambiguity and uncertainty.

In order to write a good job description, back end developers need to be able to distill their skills and abilities into concise, easy to understand language. They should also be able to highlight the areas in which they are particularly proficient, and the skills that they believe strengthen their candidacy for a particular position.

To write a successful job description for a position in back end development, back end developers need to be able to list their technological skills, their problem-solving abilities, their ability to work in a collaborative environment, and their experience working with databases.
Neovim "Last Change" function
Tags: neovim, lua
Published: 2022-07-22 01:16:00

## Currently I am using a git hook to update file headings:
https://dev.to/voyeg3r/update-your-files-header-using-git-hooks-460c

## Update the line "Last Change" each time your file is saved

I love the level of automation that vim/neovim allows us to achieve, just for give you an example, I have the following function in my ~/.config/nvim/lua/core/utils.lua

```lua
-- ~/.config/nvim/lua/core/utils.lua

local M = {}

M.changeheader = function()
    -- We only can run this function if the file is modifiable
    local bufnr = vim.api.nvim_get_current_buf()
    if not vim.api.nvim_buf_get_option(bufnr, "modifiable") then
        require("notify")("Current file not modifiable!")
        return
    end
    -- if not vim.api.nvim_buf_get_option(bufnr, "modified") then
    --     require("notify")("Current file has not changed!")
    --     return
    -- end
    if vim.fn.line("$") >= 7 then
    os.setlocale("en_US.UTF-8") -- show Sun instead of dom (portuguese)
    local time = os.date("%a, %d %b %Y %H:%M:%S")
    local l = 1
    while l <= 7 do
        vim.fn.setline(l, vim.fn.substitute(vim.fn.getline(l), 'last change: \\zs.*', time , 'gc'))
        l = l + 1
    end
       if vim.fn.search('\\vlast (change|update):?', 'wncp') > 0 then
            require("notify")("Changed file header!")
       end
    end
end

return M
```

The function is triggered in the autocommands file:

```lua
local augroups = {}

augroups.misc = {
    change_header = {
        event = "BufWritePre",
        pattern = "*",
        callback = function()
            require('core.utils').changeheader()
        end,
    },
}

for group, commands in pairs(augroups) do
	local augroup = vim.api.nvim_create_augroup("AU_"..group, {clear = true})

	for _, opts in pairs(commands) do
		local event = opts.event
		opts.event = nil
		opts.group = augroup
		vim.api.nvim_create_autocmd(event, opts)
	end
end
```

The great advantage of using the function `substitute()` along with `setline()` is that your changelist and your jumplist will not be changed. 


## Tips about keeping your files timestamp
When copying files on Linux use the option `-p`, "preserve" to keep the timestamp. 



I have a bunch of files in my personal wiki where I wanted to fix the "Last Change:" line, about 600 files. I used this script to fix the issue:

```bash
(
cd ~/.dotfiles/wiki || exit
for file in *.md; do
    echo "Modificando o arquivo $file .."
    t=$(stat -c "%y" "$file") # original timestamp
    new_date=$(date -r "$file" +'%a, %d %b %Y - %H:%M:%S')
    sed -i "1,7s/\(Last Change: \).*/\1 $new_date/g" "$file"
    # sed -i '1,7{/^[Cc]reated:/d}' "$file" # in this case delete lines with pattern
    touch -d "$t" "$file"
done
)
```

Basically:

1 - Store the timestamp in a variable
2 - Use `date -r` to get a string to use in sed
3 - Use **sed** to change the line "Last Change:" 
4 - Restore the timestamp using the variable from the step 1
Rest API with TypeScript, Express and Prisma
Tags: typescript, beginners, api, programming
Published: 2022-07-22 01:07:02

Hi Devs, continuing with the small code examples to learn, I’ve developed a Rest API written in TypeScript using Express and Prisma to work with the [Simple Kanban](https://github.com/ionmx/simple-kanban-react) React Front-End.

Repo: https://github.com/ionmx/simple-kanban-express-prisma