teleren/devto huggingface dataset:
First Look At Gridsome? Vue.JS On Steroids!
Tags: javascript, vue, webdev, beginners
Published: 2021-11-13 16:05:26

### What is Gridsome?
Gridsome is a Static-Site-Generator for Vue.JS, which is heavily inspired by Gatsby and Nuxt.JS. Websites made with Gridsome are fast by default as they are Vue powered SPA's, and data layer is handled by GraphQL, which is a great and very easy tool to collect data almost from anywhere like WordPress, Any API's, .md files, or even Google Spreadsheet and turn them into static sites.

> Gridsome is a Vue.js powered Jamstack framework for building static generated websites & apps that are fast by default 🚀.

 - Gridsome Developers

#### Why Gridsome?
Vue.js for frontend- The simplest & most approachable frontend framework.
Data sourcing- Use any Headless CMSs, APIs or Markdown-files for data.
Local development with hot-reloading- See code changes in real-time.
File-based page routing- AnyName.vuefile insrc/pagesis a static route.
Dynamic routing- Any[param].vuefile insrc/pagesis a dynamic route.
Static file generation- Deploy securely to any CDN or static web host.
GraphQL data layer- Simpler data management with a centralized data layer.
Automatic Code Splitting- Builds ultra performance into every page.
Plugin ecosystem- Find a plugin for any job.

#### How to install
1. Install Gridsome CLI tool
Using YARN: yarn global add @gridsome/cli
Using NPM: npm install --global @gridsome/cli
2. Create a Gridsome project
gridsome create my-gridsome-site to create a new project
cd my-gridsome-site to move into project directory
gridsome develop to start local dev server at http://localhost:8080
Happy coding 🎉🙌
3. Next steps
Create .vue components in the src/pages directory to create page routes.
Use gridsome build to generate static files in a /dist folder
Read more at Gridsome Official Document

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

Gridsome builds ultra performance into every page automatically. You get code splitting, asset optimization, progressive images, and link prefetching out of the box. With Gridsome you get almost perfect page speed scores by default.

### Conclusion
Gridsome is built for the Jamstack workflow - a new way to build websites that gives you better performance, higher security, cheaper hosting, and a better developer experience. Generate prerendered (static) pages at build time for SEO-purpose and add powerful dynamic functionality with APIs and Vue.js.
How to add an existing project to GitHub
Tags: tutorial, beginners, github, git
Published: 2021-11-13 15:58:17

*So this is for the beginners as I've already added the tag,so I'll tell you in a simple way*
So first of all why we use GitHub because it has lots of advantages like 'It makes easy to contribute to your open source projects,it has Documentation where we can explain our project or tell about our project and also showcase our project also the biggest advantage is that if you add lots of project then you may get a job by github(or whoever the boss is😅).
**So now we do our job the topic which is yet there to discuss**
![Github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5p3doh7ula3uu6bx5zok.png )
1.Login your **GitHub** a/c and create a new repository
**Do not initialize your new repository with README or other files. You can add those files later.**
![New Repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0q3big1oyrvq6y0qs3m.jpg)
2.Go to Terminal and switch to your local project that you want to push by typing the following command:
`cd PATH_TO_YOUR_PROJECT_FOLDER`

3.And after that when the folder of your project is shown then type the command below to initialize your folder as a git repository.
`git init`

4.Then add all the files to the staging area known as **index**, to prepare them for the next **git** *commit*.
`git add .`

5.Next step is that you need to *commit* the files that you previously staged by running:
`git commit -m "First commit"`

(This will only *commit* to your local branch)

6.Go to the **GitHub** repository that you’ve just created and copy the remote repository URL.

Eg:
https://github.com/madihaeram/My-first-App.git
![Repository Link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5umd44nz560pkmv5t7y.jpg)

7.In Terminal, type the command below followed by your remote repository’s URL where your local repository will be pushed.
`git remote add origin YOUR_REMOTE_REPOSITORY_LINK`

8.Verify the new Remote URL by typing:
 `git remote -v`

9.Atlast, Push your local project up to the remote repository you specified in the step 7 by typing:

`git push -u origin main`

Thank you for reading this tutorial,Hope you find this helpful.
This Year's Hacktoberfest!
Tags: hacktoberfest, webdev, opensource, devops
Published: 2021-11-13 15:36:42

This year hacktoberfest was fun to do. In beginning i just started submitting my PRs and then after long 29 days, i reviewed my PRs and Damn Maximum of the Projects were not in Hacktoberfest Participation list and in panic I somehow manage to find five projects that were hacktoberfest-accepted. Thanks to God i reviewed my Submission, Otherwise this Year would be empty Without it. This was my story Guys! Share yours's in comment.😊😉
Cplayer and Its application
Tags: javascript, typescript, angular, github
Published: 2021-11-13 15:35:54

I have created a web based music player using javascript. I kept its name as CPlayer.

Github link
https://github.com/crajbanshi/cplayer

And also created one website using this. Application name is MSound. Now it is deployed in stage trying to move it to production. I hope th MSound app will be in fly very soon.

Visit the application stage url: http://tune.rf.gd
Hello community
Tags: programming, beginners, python, opensource
Published: 2021-11-13 13:37:32

![Pycraft Art Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7q5ri7n4ufjp93a2soiq.png)
##Hello everyone, 
This is PycraftDev here, I have just joined Dev.to, please bear with me as I learn and develop my knowledge!
I'll be sharing my experiences with programming and creating games in Python. This will include tips and tricks and things I've learned along the way.

Please feel free to check out the links below where I'll also be sharing my experiences.
I write a monthly Medium article that also goes into depth about what's going on in Pycraft, this article does also include some tips and tricks for game development in Pycraft at various skill levels.

My GitHub profile can be found here: https://github.com/PycraftDeveloper
My Twitter profile can be found here: https://twitter.com/PycraftDev
My Medium profile can be found here: https://medium.com/@PycraftDev
How to stop expanded React-Table row from collapsing on state change
Tags: react
Published: 2021-11-13 15:29:55


How to prevent expanded React-Table row from collapsing on state change in class component.

Please find the code link here https://codesandbox.io/s/agitated-dubinsky-t0hcn?file=/src/nestead-table/index.js

on selecting checkbox (state update) the expanded row is getting collapsed please help me in solving this.

Thanks in Advance.
Using Pythons Match Statement in older Versions
Published: 2021-11-13 15:28:08

## Whats a Match Statement in Python
Python offers a new statement called "match" as of version 3.10. This is known from other programming languages under the term switch-case. 
This is a selection control mechanism with which the value of a variable can be analyzed and the appropriate program can be played.
```python
user = "admin"
match user:
    case "admin":
        print("logged in as admin")
    case "default":
        print("logged in as default")
    case _:
        print("No valid user-type")

>>> logged in as admin
```
The match-case is a very lucid, short, and optimized notation to avoid if-elif-else statements. Read more about the 3.10+ version match statement [here](https://www.python.org/dev/peps/pep-0622/#the-match-statement)!

## Implementing Match Statements in older Python versions
In older Python versions, the Switch/Match statement can also be implemented. 
For this purpose, we use dictionaries for one-to-one key-value mappings.
```python
cases = {
    "admin": lambda: print("logged in as admin"),
    "default": lambda: print("logged in as default"),
}
```
Using this, we can use pythons build-in method `get(key[,default])` to returns the value for the specified key in the dict.
>`get(key: Any) -> Any | None`

This would return the value from our key, or None if the key is not inside the dict.
To set a default (`case _: ...`), we can give another param, which will be returned, when the key is not found.
>`get(key: Any, default: Any) -> Any`

In our example the final code therefor would look something like this:
```python
user = "admin"

cases = {
    "admin": lambda: print("logged in as admin"),
    "default": lambda: print("logged in as default"),
}
default = lambda: print("No valid user-type")

func = cases.get(user,default)
func()

>>> logged in as admin
```
If all statements should do the same, we of course can make this code simpler in just setting the values into the dict. 
```python
cases = {
    "admin": "logged in as admin",
    "default": "logged in as default",
}
default = "No valid user-type"

print(cases.get(user,default))

>>> logged in as admin
```
Blockchain Hackathon
Tags: blockchain, hackathon, solana, prize
Published: 2021-11-13 14:52:41

There is a hackathon from zebec below is the link for the hackathon and for more detail you can contact the organizer.
cash price worth 10,000 dollar.

Hackathon link:-
https://zebec.io/ship-2021

Contact
Sajjan Thapaliya
+977 985-5073721
contact@zebec.io

Hackathon Details
Pre Launch - Oct 31, 2021
Official Lunch - Nov 12, 2021
Hackathon Period - Nov 22 - Dec
22, 2021
Result Announcement - December
31, 2021
Prize Pool
DeFi - $2,000
NFT - $2,000
Dapps - $2,000
Gaming - $2,000
Community - $2,000
Project Ideas
● Content Sharing
● NFT Renting
● NFT Auction
● Subscription Based DApps
● Marketing Platforms
● Lending & Borrowing
● Liquidity Provider
● Social Sites
● Gambling
● Marketplaces
● Insurance
● Crowdfunding
● Freelancing
● Media
● Music
Are you struggling to get clients for your freelance business?
Published: 2021-11-13 14:48:25


Hey, are you struggling to get clients for your freelance business? I am not going to suggest websites like fiver or freelancer. Let’s look up some easy methods to get clients today.

**Targeting a community.**

You can target a particular community to get more client’s. for example, if you are a web developer, you can build a website for your church or an educational institute or your residential association, then you may get the community’s attention.

https://youtu.be/6GJPiFgl35k

people related to the community having any requirements based on your service there is a higher chance to call you. bcoz they personally know you and your capabilities.* i got some clients by doing this in the past. in my case, I made a website for a church and after a few days, I got a few enquiries and clients from it.*

**Reaching out to local businesses**

as a freelancer, your clients are mostly businesses. reaching out to businesses nearby your town will give you good opportunities. You can look for businesses in the google map that doesn’t have websites or digital presence you can go and meet them. also, you can show them how their competitors perform on the web and what should they improve, then offer your services.

*2 years ago I contacted a home nursing consultancy and offer them my digital bundle. I did google business optimization, website redesign and SEO for them. and now they are no1 in the city. afterwards, they called and asked me to do the same on their surgical equipment’s shops, and they are still my active client.*

**Mouth Publicity**

Mouth publicity is the main method of promotion which I got. my clients referred me to others. as we all doing business with other businesses the community is big. If you can keep your promise they will refer you to their friends. that’s how I got lots of projects. here our clients are our advertisers. After completing a project you can tell them to suggest me to others or ask them to introduce someone. Trust is the mainstay in this field, if someone trusts you, they will recommend you.

And it’s very easy to convert them into our clients. *One of my clients suggested me to a supermarket owner he just called me and I converted an ecom website deal in a single call.*

**Social Media**

read more (https://codeconia.com/2021/11/12/how-to-get-freelance-projects-and-clients/)

**Paid ads**

https://codeconia.com/2021/11/12/how-to-get-freelance-projects-and-clients/

**websites** 
https://codeconia.com/2021/11/12/how-to-get-freelance-projects-and-clients/
An online Book shop API Node js
Tags: javascript, node, express, jwt
Published: 2021-11-13 14:26:20

bookstore-api
An API for online store book

Features:
Authentication
Products listing
Categories listing
Order placements

Technology Stack:
Node js
Express Js
MongoDB
JWT

Github : https://github.com/saidMounaim/a-bookstore-api

Follow me on github : https://github.com/saidMounaim/
Create a Nexus Repository with Windows Containers
Tags: windows, containers, docker, nexus
Published: 2021-11-13 14:09:01

Docker is an extremely powerful tool. You often build your own image using X image or X Linux distros like Ubuntu or Debian and this is great. However, from time to time, you might need to use Windows.

In our case, we have a Nexus repository running in Windows Server, and some time ago, we started to move everything to AWS.

Our first thought was to use the Nexus Docker Image, but the greatest challenge happened when we were not able to import the DB. Regardless of the configuration we chose, the repo started to crash repeatedly without a clear reason. We followed the tutorials, and nothing worked.

Our only option was to move the old VM to a new EC2, which was a bad deal since this would be our only EC2 because the rest was running in containers in ECS.

After a while, we thought of a new solution, we had heard about Windows Containers, something that is not so well-known. And this is the solution that we produced.

***

### Step 1. Download your nexus copy.

https://www.sonatype.com/products/repository-oss-download

***

### Step 2. Create a `Dockerfile` with the following configuration:

```
FROM mcr.microsoft.com/windows/nanoserver:1809
RUN mkdir "c:\\nexus"
WORKDIR c:/nexus
RUN mkdir sonatype-work
RUN mkdir nexus-3.36.0-01
COPY nexus-3.36.0-01 .
COPY sonatype-work .
WORKDIR c:/nexus/nexus-3.36.0-01/bin
EXPOSE 8081
CMD ["nexus.exe", "/run"]
```

The first line downloads a copy of **Windows Nano Server**, which has the smallest footprint. And later, we configured the location that we wanted.

The number **3.36.0-01** represents our current version of the Nexus repo, it can change over the years.

And that's all that you need.

Now, something important to highlight, this solution doesn't show any logs for any reason and takes some time to run it the first time. So, if you start hitting: `http://localhost:8081` in minute one, it might not work, it takes a while maybe 3 to 5 minutes.

### Follow me on:

|  Personal  |  LinkedIn  |YouTube|Instagram|Cyber Prophets|Sharing Your Stories|
|:----------|:----------|:------------:|:------------:|:------------:|:------------:|
|[![Personal](https://raw.githubusercontent.com/FANMixco/federiconavarrete/master/img/favicons/favicon.png)](https://federiconavarrete.com)|[![LinkedIn](https://i.stack.imgur.com/idQWu.png)](https://www.linkedin.com/in/federiconavarrete)|[![YouTube](https://i.stack.imgur.com/CFPMR.png)](https://youtube.com/c/FedericoNavarrete)|[![Instagram](https://i.stack.imgur.com/PIfqY.png)](https://www.instagram.com/federico_the_consultant)|[![RedCircle Podcast](https://i.stack.imgur.com/4XICF.png)](https://redcircle.com/shows/cyber-prophets)|[![RedCircle Podcast](https://i.stack.imgur.com/4XICF.png)](https://redcircle.com/shows/sharing-your-stories)|

[![sponsor me](https://raw.githubusercontent.com/FANMixco/Xamarin-SearchBar/master/bmc-rezr5vpd.gif)](https://www.buymeacoffee.com/fanmixco)
Software Industry Salaries in Pakistan 2021
Tags: webdev, career, beginners, help
Published: 2021-11-13 13:46:24

How much you can expect to earn in Pakistan as software engineer?? This report will give you your answer.

Target of the report is: Salary growth in Pakistan of a software engineer based on the experience an employee have.

I have done analysis of months of data from LinkedIn, Glassdoor, Rozee.pk, indeed with 300+ Jobs 100+ companies.

Categories Focused:
• Web Developer
• .NET Developer
• Mobile Application Developer
• Backend Developer
• UI/UX Designer
• Software Quality Engineer
• Social Media Marketing
• Project Manager

Is there a problem with the report? let me know in my DM or email me at: ammarkhan9094@gmail.com

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttgayxaj0cigbs7qz1r6.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngx0dbto97mq3vpbpxhy.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slg9iosb8b495jy4q0yj.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gj9i3yzbtp7103s29bnx.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ioyfik8gxgsyhpn0lrns.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y32obejmgnhkqa3e72s9.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n80anim1rxms5vq1zkvv.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npwytsckxl18y59pw7ad.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80y3qoyf4v8nqs1xo42f.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1pifyny5jfc2c4utaxo9.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikj9yunen8j8l0oht53d.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfsef0e2fkqsplb644fi.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enckoew0kig555a8kd9a.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1919nktccojnd1rb62d5.png)
Merge PDF files with QPDF
Tags: files, pdf, writing, tooling
Published: 2021-11-13 13:31:15

## The Problem
You want to merge (_concatenate_) several PDF files.
It is not possible to just append one PDF after the other, let's say by command-line append operations.

Other simple PDF utilities fail in preserving internal hyperlinks (_cross references_).

I needed a programatic solution that works completely automated (controlled via `make`) within a Docker container.

## Nerdy Solution
[QPDF]() is an [extensively documented](https://qpdf.sourceforge.io/files/qpdf-manual.html) tool for:

>"structural, content-preserving transformations on PDF files."
> (from their [website](https://github.com/qpdf/qpdf))

One (very basic) use case is merging two or more PDF files into one single output file.
To be more specific: I want to add a cover page to the main part of a book, as illustrated below.

![merge cover with book](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9df94dmerrhgtuqucm3.png)

I write the book in Markdown and use a TeX-based toolchain to generate PDF output (that's another story).

The book itself contains numerous cross-references (internal links), pointing to other sections of the book or to specific pages. These links must be preserved during merge - and my initial approaches lost all those links.

QPDF to the rescue:

```
qpdf book.pdf --pages cover.pdf 1 book.pdf 1-z -- result.pdf  
```

It took me a while to figure out the exact syntax - and wrote this post so I (and other lost book-writing soules) can find it later.

### Beware, though...
I suggest to keep the dimensions of book- and cover page identical (obviously you will care for that anyway).


## Manual Solution, MacOS only
In case you are working on MacOS, you can simply use the preview tool to concatenate PDF files - in most cases hyperlinks and cross-references are preserved.
But: It is a manual solution.

## Thanx

Thanx to the awesome [Jay Berkenbilt](https://qpdf.sourceforge.io/files/qpdf-manual.html) for creating and maintaining QPDF since 2005 (!!).

Thanx to [Wesley Tingey](https://unsplash.com/photos/snNHKZ-mGfE) for the cover image, via Unsplash.
Hacktoberfest 2021
Published: 2021-11-13 13:20:56

This was a wonderful experience for me, this was my first time contributing to github projects, It taught me how to work on big projects. Learning to use Github and contributing to open source was always in my ToDoList but I kept on postponing it again and again, thanks to this competition I was able to learn Git and take my first step towards open source community.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbt9j128lcov2cidlco7.PNG)
TOP CHEAT SHEETS FOR WEB DEVELOPER
Tags: webdev, codenewbie, beginners
Published: 2021-11-13 12:52:17

## [HTML CHEAT SHEET](https://makeawebsitehub.com/the-html-5-mega-cheat-sheet/)
![HTML CHEAT SHEET](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33c06e0mu5516ei1wcz4.jpg)

## [CSS CHEAT SHEET](https://makeawebsitehub.com/css3-mega-cheat-sheet/)
![CSS CHEAT SHEET](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tqgdw8hbguowjonggk8.png)

## [JAVASCRIPT CHEAT SHEET](https://websitesetup.org/javascript-cheat-sheet/)
![JAVASCRIPT CHEAT SHEET](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h77yidvumiuqpp7bjg3x.jpg)

## [JQUERY CHEAT SHEET](https://makeawebsitehub.com/jquery-mega-cheat-sheet/)
![JQUERY CHEAT SHEET](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwdb3fk9rhk16u1hnfdh.png)

## [Bootstrap CHEAT SHEET](https://hackerthemes.com/bootstrap-cheatsheet/)
![Bootstrap CHEAT SHEET](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hg6wkjm18aucf6aezyg7.jpg)

---

## Let's connect!
You can follow me on [Twitter](https://twitter.com/MrDanishSaleem), [LinkedIn](https://www.linkedin.com/in/mrdanishsaleem/) & [GitHub](https://github.com/mrdanishsaleem/)

If you like this post. Kindly support me by [Buying Me a Coffee](https://www.buymeacoffee.com/mrdanishsaleem)

![Buy Me a Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0ikih5nlsqs0oops11e.png)
Android aapt error stopping me from building the project
Published: 2021-11-13 12:50:49

So im currently doing a few tutorials off udemy but I keep getting a build error, I believe IM not the only one getting this so hopefully this problem is solved.![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hw6rx2xfcb5avs30nsbp.png)
How to export multiple functions
Tags: javascript, webdev, beginners, tutorial
Published: 2021-11-13 12:29:34

We can easily import different functions to a specific file from other `.js` files easily, here's how you can do that easily

We'll go through it with a cute example,

- In `math.js`

```js
function circumference(radius) {
  return 2 * Math.PI * radius
}

function area(radius) {
  return Math.PI * radius^2
}

export {circumference, area}
```

- In `index.js`

```js
 import {circumference, area } from './math'
 
 // Further code......
```

Simple and easy! This is how you import and export multiple functions from different files

So, this was a short article that you may have found helpful, comment down more ideas for future articles 🙂