teleren/devto huggingface dataset:
Publish your GitHub Action to Marketplace
Tags: github, githubactions, devops
Published: 2021-02-17 16:25:24

GitHub Marketplace is a new way to discover and purchase tools that extend your workflow. Find apps to use across your development process, from continuous integration to project management and code review. 

There are a lot of projects and companies already building within the GitHub Ecosystem, including over 7000 GitHub Actions. 

You are now two steps away from getting your GitHub Action on Marketplace.

## Step 1:  Create an action.yml

The first step is adding an action.yml to the root of your project. The action.yml will be the way for GitHub to know that your repo is indeed a GitHub Action. It's also going to hold all the necessary information to display your action on your marketplace listing.

If you're interested in learning more about this file, you can check out [the GitHub documentation](https://docs.github.com/en/actions/creating-actions/metadata-syntax-for-github-actions). Keep in mind there are required fields, including the name, which will need to be unique in the YAML.

```
// real life action.yml

name: contributor-takes-action
description: This is an action to assign yourself to an issue for a repo you are not a contributor to.
author: B Dolla Mon$ign
branding:
  icon: 'thumbs-up'
  color: 'white'
```

Be sure to also update the README; that is what's displayed in the listing. Setup instructions and examples are helpful, so consider adding those too. 

## Step 2: Click the publish to GitHub Marketplace button. 

Once you have committed a valid (includes the names and description), you will see a box on your repo's dashboard asking if you would like to publish to Marketplace. Click that button and be sure the "publish to marketplace button" is pressed.

![Screen Shot 2021-02-17 at 11.21.56 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fi5yzv6j9vpcctm8mq1b.png) 

That's it!

Watch me explain this again in a longer video (*mistakes included for free)

{% youtube VjBMAzf4uNU %}

_This is part of my 28 days of Actions series. To get notified of more GitHub Action tips, follow the GitHub organization right here on Dev._

{% link https://dev.to/github/build-github-actions-with-a-docker-container-37e2 %}
How to Install Brotli from Github on AlmaLinux 8
Tags: brotli, github, almalinux, linux
Published: 2021-02-17 16:24:07

In this article, we'll show you how to install Brotli from Github on AlmaLinux 8.

Brotli is a generic-purpose lossless compression algorithm that compresses data using a combination of a modern variant of the LZ77 algorithm, Huffman coding and 2nd order context modeling. Brotli is a new compression method with a better compression ratio than Gzip.

Its source code is publicly hosted on Github. In this tutorial we shall install Brotli using source code from Github.

<a href="https://www.hostnextra.com/kb/install-brotli-from-github-on-almalinux-8/">Install Brotli from Github on AlmaLinux 8</a>

####1. Keep the server up to date.

 # dnf update -y

####2. Install build tools and required packages.

 # dnf install gcc make bc sed autoconf automake libtool git -y

####3. Clone the Brotli repository.

 # git clone https://github.com/google/brotli.git

Change current working directory.

 # cd brotli

####4. Create a manual page for Brotli commands.

 # cp ~/brotli/docs/brotli.1 /usr/share/man/man1 && sudo gzip /usr/share/man/man1/brotli.1

####5. Generate Autotools' configure file.

To generate Autotools' configure file, first run the ./bootstrap command.

 # ./bootstrap

After the command above, you will have access to the usual C program build steps: configure, make and make install.

For help, run the ./configure --help command.

####6. Install Brotli

Run following command to install Brotli.

 # ./configure --prefix=/usr --bindir=/usr/bin --sbindir=/usr/sbin --libexecdir=/usr/lib64/brotli --libdir=/usr/lib64/brotli --datarootdir=/usr/share --mandir=/usr/share/man/man1 --docdir=/usr/share/doc
 # make
 # make install

Verify the installation.

 # brotli --version
brotli 1.0.9

That's it. The installation has been successfully completed.

In this tutorial we have seen how to install Brotli from Github on AlmaLinux 8.

Looking for the dedicated servers? Visit our <a href="https://www.hostnextra.com/10gbps-dedicated-servers.html">10Gbps dedicated server</a> page.
Remote Containers - VS Code Extension Highlight
Tags: webdev, productivity, vscode
Published: 2021-02-17 16:16:03

---
title: Remote Containers - VS Code Extension Highlight
published: true
description: Developing inside Docker containers will be a game changer for your team. In this VS Code extension highlight we review what problems it solves, how to set it up, and how to customize it for your project.
tags: webdev, productivity, vscode
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8yzle1v4zke267iogbb.png
---

{% youtube Yo4wKXlnLMc %}

Write code inside Docker containers? With today's VS Code extension highlight you can!

Why would you want to?
- Faster onboarding
- Improved security vs developing on your machine
- Consistent environments for all developers
- Development environments that mimic production

Now when you say "it works on my machine," you can know it runs in production.
Ionic VueJS SQLite Course Preview
Tags: ionic, vue, sqlite, tutorial
Published: 2021-02-17 16:01:06

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rh17nq72zq8f3jhz6pq7.png)

The new [Ionic Framework VueJS](https://ionicframework.com/vue) Web Components are a great way to leverage your javascript skills with VueJS to build professional looking Mobile Applications and PWAs efficiently.

This course, including the final source code, is to get you prepped for the more advanced course that I have provided on [Udemy](https://www.udemy.com/user/aaronsaunders/) and [Gumroad](https://www.gumroad.com/fiwic) platform. We are not expecting you to have a deep knowledge of Vue3 and Ionic Framework, but if you get stuck, don't worry, there is great documentation provided on the Ionic Framework Website

{% youtube iGmPVSClA_8 %}


### Create a CRUD Application with Ionic VueJS and Capacitor SQLite Plugin

- Create the project and get the basic structure created
- Install and set up [Capacitor SQLite Plugin](https://github.com/capacitor-community/sqlite)
- Capture data using ionic input elements
- Learn CRUD actions ( Create, Delete ) for the data
- Create an IonList to view the content
- Use IonItem, IonLabel, and IonInput to manage forms
- Use Ionic Lifecycle Methods
- Use Vue Provide Inject to access the database
- Learn to use Capacitor SQLite Plugin to query and update the database
- Test and run application on native devices using Ionic Framework Capacitor  live reload
- And Much More...

#### Preview Course
 📹 https://www.youtube.com/playlist?list=PL2PY2-9rsgl1diq5FhOpBCie5h7Xd79BL

#### See All Courses 
🎓 Udemy Courses - https://www.udemy.com/user/aaronsaunders/
🎓 Gumroad Courses/Content - https://www.gumroad.com/fiwic


#### Social Media 
Twitter - https://twitter.com/aaronksaunders
Facebook - https://www.facebook.com/ClearlyInnovativeInc
Instagram - https://www.instagram.com/aaronksaunders/
Dev.to - https://dev.to/aaronksaunders
🌐 www.fiwic.com
What is a blockchain metaverse?
Tags: blockchain
Published: 2021-02-17 15:59:54

Something that I'm particularly excited about that is making its way into the conversations of the general population. These are blockchain metaverses. 

Blockchain metaverses are Universes of world's that are all interconnected. If you're a book and movie lover, this resembles Ready Player One or Snowcrash. By enabling users to buy and transfer assets between the digital world's, in addition to selling digital assets and cashing out. A blockchain metaverse enables a marketplace where one company doesn't have dominance.

By using blockchain and platform-specific cryptocurrency tokens, a transparent as secure ledger allows objects to be uniquely identified to users. Currently for users to get paid for digital assets, they would have to use PayPal or Venmo which is difficult for international communities of users.
How to set element center with transform property in CSS
Tags: css, codenewbie, tutorial, todayilearned
Published: 2021-02-17 15:44:09

Hey, whassup coding people

hope you all doing little or progress in your professional journey.

Actually, this post is a part of our 20 day CSS animation post.

{% link https://dev.to/atulcodex/20-days-of-css-animation-post-3g8d %}

And in this post, we will learn about "How to set element centre with transform property".

there are just 4 lines of code which is this

* top: 50%;
* left: 50%;
* transform: translate(-50%, -50%);
* position: fixed;

Not clear, see the whole picture

{% codepen https://codepen.io/atulcodex/pen/dyOWqJW %}


And if you guys interested in my free website templates please download them here 👉 [AtulCodex Marketplace 🏪](https://www.instamojo.com/atulcodex/).
Hello world !
Published: 2021-02-17 15:23:46

Hello Dev Community ! I , Sagnik Roy come from a small city in INDIA. I have basic knowledge of ML,DL and Data Analysis. How can I utilize the DEV community to gain more knowledge ??
Please Help ! I'm new here !!!!!

Also I want to make some connections .
Here's my 
kaggle id : https://www.kaggle.com/sagnik1511
github id : https://github.com/sagnik1511
Show off your VSCode Setup 👩🏻‍💻💯
Tags: watercooler, discuss, productivity
Published: 2021-02-17 15:20:36

---
title: Show off your VSCode Setup 👩🏻‍💻💯
published: true
description: Weekly VSCode Setup Show off and Few others Resources 
tags: watercooler, discuss, productivity 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f660ncesrh7iqeebqcrx.jpg
---

If you are like me you also like changing your theme and font of VSCode frequently. I also love to find new themes and fonts. Here is mine.

{% twitter 1362054221336485888 %}

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

𝗧𝗵𝗲𝗺𝗲: Cobalt2 Rocket 
𝗙𝗼𝗻𝘁: Cascadia Code PL
𝗣𝗲𝗮𝗸𝗰𝗼𝗮𝗸 𝘁𝗵𝗲𝗺𝗲: Svelte Orange 

***Top 3 Plugins I ❤️***
- [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode) : Carbon like Polaroid for your code 
- [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
- [Todo+](https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-todo-plus): Manage todo lists with ease. Powerful, easy to use and customizable.

 
 So tell me what's your current VSCode theme and font look like? I'm Curious.

![](https://media.giphy.com/media/TDMbOHni02MZM8fTgS/giphy.gif)
Pagination and Missing Results !
Tags: cloud, javascript, webdev, programming
Published: 2021-02-17 15:16:44


pagination is common design pattern that is used everywhere across the web. It is the last thing you see on search results page.

Lets say If we want to get the list of tweets from  twitter, there could be thousands of them. So the logical way is to limit the results to 50 and provide a way to fetch others(discussed later).

But there is a small catch, it is not guaranteed that you'll see all the results(with very few exceptions).

 1. Let's take an example, you've searched for something on google and on bad day you don't see any relevant results on the first 10 links shown. 
 2. While you are on the first page google has decided that 11'th result (first one in the second page) is getting more hits and decided to exchange places with the last one in page 1
 3. And now once we click on the page 2 we see a result that we've have already seen on page 1, to make things worse we might never see the 11th result ever. 

This is fair trade-off when Users are consuming the data visually given how rarely the results get updated.

Most of the public API's follow similar pattern of limiting the results and providing a mechanism to fetch more. 

One common pattern used is Continuation tokens, In this pattern a token is added to the response of the request ,that has reference to next page(n+1). Next set of results can be fetched using the token from that is received as response from the previous page. Here is the sample API response 
```{
results:[1-50],
continuationToken: "3593-some-random-number" // (use this to get results from 51-100)
}```

All is fine until we try to do some sort of aggregation on the results from paginated API's. Imagine trying to find out the mean of the scores from a University API and all the inconsistencies we end up with. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pn74n626g5yrawzet0y3.png)*if iterated sequentially orange is read twice and banana is never read*
       

It might look like ordering of results by timestamp(if the API supports) might solve the problem, but this fails when the records can be removed and the results might move up in the order.

Conclusion:
No way of getting paginated data is perfect. Making sure of this limitation while in designing is the only way. Thanks for reading :)
How to check the contents of a file with Cypress
Tags: cypress, testing, automtion, e2e
Published: 2021-02-17 14:52:55

## Did you know that with Cypress, it is possible to read the contents of a file?

Today in "**Pinches of Cypress**", learn how it works.

To facilitate the explanation, I will use an example of the [**course of the automated tests with Cypress intermediate**](https://www.udemy.com/course/testes-automatizados-com-cypress-intermediario/?referralCode=F14505FB0076672E51A2), from the [**TAT School**](https://www.udemy.com/user/walmyr/).

In the course, the application under test is the open-source version of GitLab.

Among the questions related to the optimization of graphical user interface tests, during the course, I also teach **how to use Cypress to interact with the application at the operating system level**, such as the execution of an instruction via the command line to clone a project.

Let's look at an example.

```js
const faker = require('faker')

describe('git clone', () => {
  const project = {
    name: `project-${faker.random.uuid}`,
    description: `faker.random.words(5)`
  }

  beforeEach(() => cy.api_createProject(project))

  it('successfully', () => {
    cy.cloneViaSSH(project)

    cy.readFile(`temp/${project.name}/README.md`)
      .should('contain', `# ${project.name}`)
      .and('contain', project.description)
  })
})
```

In the `it` block, I invoke the custom command `cloneViaSSH` passing the `project` object as an argument, and then I use the `readFile` command passing the `README.md` file of the newly cloned project as an argument. Finally, I verify that the project's name is contained as the title of the file and that its description is also contained in it.

Let me show you the custom command that clones the project.

```js
Cypress.Commands.add('cloneViaSSH', project => {
  const domain = Cypress.config('baseUrl').replace('http://', '').replace('/', '')

  cy.exec(`cd temp/ && git clone git@${domain}:${cypress.env.user_name}/${project.name}.git`)
})
```

That's it!
___

Did you like it?

Leave a comment with what I should write in an upcoming "**Pinch of Cypress**".

___

This post was originally published in Portuguese on the [**Talking About Testing**](https://talkingabouttesting.com/2021/02/17/como-verificar-o-conteudo-de-um-arquivo-com-cypress/) blog.
___

Would you like to learn about **test automation with Cypress**? Get to know my online courses on [**Udemy**](https://udemy.com/user/walmyr).
"Oh I Can Do That!" - How Everyone Is An "Expert"
Tags: discuss
Published: 2021-02-17 14:51:50

One of the upper level executives at my company (Terminus Software, and shameless plug: [we're hiring software engineers!](https://terminus.com/about-us/#careers)) recently posted this on Twitter:

{% twitter 1361866448562438144 %}

And I mean, he's not wrong in that everyone seems to think they could be an "actual marketer". However, I've had many people tell me that they can do something better than I've done things all throughout my career. Sometimes they had good advice and prefaced it this way ("have you considered `x`?" when I actually hadn't), but most akin to "I saw this Python tutorial on how to do a weather service and you need to do that... but for *your* project" 😒.

And I get it why Sangram has his viewpoint - he's been in marketing for nearly 2 decades, and he's probably heard "marketing is easy"  constantly. And people seem to think marketing is magic, because marketers' worth is hard to quantify without solid data. When I ran a local escape room with my wife, I tried my hand at marketing. It turns out... I had no idea what I was doing. WTH are impressions? I ran TV and radio spots. How effective were they? I have no idea because I didn't know how to get data to see which marketing channels were working for me. And as you can undoubtedly tell, I decided to continue a software career.

Hell, I've even done it too. While I was running that escape room, I was also writing the software to interface with the electronically-controlled puzzles in our room, as well as the monitors in the rooms, and the game masters' consoles. I definitely thought, "I've written software; I can make good UIs!" As it turns out, I had to learn a lot before I could "make good UIs". I'm still not great at it, but I'm passable!

When I dabbled in standup comedy, I took classes on how to craft jokes, and then expand those into bigger bits, and then into solid timed sets. That never stopped people from saying "Hey, I've got a joke idea for you!" 🧐 Someone outside of your field will inevitably tell you they can do your job.

So... what stories have you got? I want to hear them below!
How to run an HTML/PHP website on Localhost
Tags: tutorial, webdev, php, beginners
Published: 2021-02-17 14:46:26

In this tutorial, I'm going to show you how to run your website locally with XAMPP. This is especially useful when writing PHP since you will be able to test your site without putting it on a web server!

{% youtube K-qXW9ymeYQ %}

## Installation

The first thing you'll need to do is install PHP. My preferred way of doing that is by installing XAMPP from [https://www.apachefriends.org](https://www.apachefriends.org).

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

Click the download button for your operating system to get the latest version.

Once it's finished installing, you should be able to access all of the PHP features from your command line.

## Open a command prompt in your working directory

You'll need to open a command prompt in the directory containing your root directory or index file.

There are a few ways to do that on Windows:

### Method 1

Open a File Explorer to the directory and click on the bar containing the path

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/745mz9yutx27a0oydbms.png)
 
Enter "cmd" in the bar and press enter.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l71kw8xbkiv9a538f5y.png)

### Method 2

Open a command prompt by searching for the application "Command Prompt" or "Terminal".

Run the "change directory" command by typing `cd` followed by the path of your project.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ik1rksf7eo1m0svduip.png) 
 
### Method 3

If you have Visual Studio Code installed, you can press **Ctrl + \`** to open a terminal within the editor.
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4vi1zs9nz4k0te49wxr.png)
 
## Running your code on localhost

Type the command `php -S localhost:8000` to run your site on port 8000.

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

> *Note: If you get an error that 'php' is not recognized, you likely will need to add it to your path manually. To do that, locate `php.exe` (for me it is in the directory `C:\xampp\php\`). Search for "Edit system environment variables", at the bottom of the window that comes up, click "Environment variables", then click the row for "Path" and click the "Edit..." button. Add a row containing the directory you found earlier (ex. `C:\xampp\php\`).*

## See your site live!

Go to http://localhost:8000/ in your browser to see your site live!

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3eirokwt2vrn0gghf4ny.png)
 
Make sure to keep the command prompt open while you want your site to stay live!

## Conclusion

If you found this useful, consider leaving a like and subscribing to [my YouTube channel](https://www.youtube.com/channel/UCipSxT7a3rn81vGLw9lqRkg)! 😎

\- Jonah Lawrence

🐦 [@DenverCoder1](https://twitter.com/DenverCoder1)

📺 [Jonah Lawrence • Dev Pro Tips](https://www.youtube.com/channel/UCipSxT7a3rn81vGLw9lqRkg)
How to Generate a Secure Random Number in Node.js
Tags: javascript, node, tutorial, security
Published: 2021-02-17 14:31:45

*This post was originally published at [kais.blog](https://kais.blog/p/how-to-generate-a-secure-random-number-in-nodejs).*

**Let's move your learning forward together!** [Follow me on Twitter](https://twitter.com/intent/follow?screen_name=kais_blog) for your daily dose of developer tips. Thanks for reading my content!

---


While you are working on your JavaScript apps, the moment will come when you need a secure random number. Generating it has been quite tricky in the past. Some people use `Math.random` whenever the need for a random number arises. Please don't do this if there is any chance for an attacker.

If you are generating random numbers for security reasons (e.g. verification codes), you should use a cryptographically secure random number. Fortunately, the `crypto` module has been extended in recent Node.js versions. So, now there's an easy way to do it in JavaScript.

## Prerequisites

- Node.js (v14.10.0+ / v12.19.0+)

## Generate a Secure Random Number Between `min` and `max` in JavaScript

Without further ado, let's generate our secure random number. First, import the `crypto` module:

```js
const crypto = require("crypto");
```

Now, you have access to the `randomInt` function. `randomInt` takes up to three arguments.

Probably, you want to generate a random number in a given range. Therefore, you can specify the minimum (`min`) and maximum (`max`). Note that the minimum is *inclusive* and the maximum is *exclusive*. So, if you want to generate a number between 0 and 999,999 you'll have to pass `0` and `1000000`.

```js
// Synchronous
const n = crypto.randomInt(0, 1000000);
console.log(n);
```

The third argument is optional. You can provide a `callback` function. Then, the random integer is generated asynchronously:

```js
// Asynchronous
crypto.randomInt(0, 1000000, (err, n) => {
  if (err) throw err;
  console.log(n);
});
```

Good! Now, `n` is a secure random integer between `0` and `999999`. For example, this could be used as a 6-digit verification code:

```js
const verificationCode = n.toString().padStart(6, "0");
```

## Conclusion

The changes in recent Node.js versions made generating secure random numbers easy. So, if you are generating random numbers to use as verification codes or for a secure random shuffle, you now know how to do it.

---

**Let's move your learning forward together!** [Follow me on Twitter](https://twitter.com/intent/follow?screen_name=kais_blog) for your daily dose of developer tips. Thanks for reading my content!

*This post was originally published at [kais.blog](https://kais.blog/p/how-to-generate-a-secure-random-number-in-nodejs).*