teleren/devto huggingface dataset:
Improve your GitHub Actions Workflow execution time by 32% ⚡
Tags: actionshackathon2, github, performance, productivity
Published: 2021-12-08 07:25:27


### My Workflow
There is a process that gets repeated most of the time across your workflow, a process that is expensive in time speaking; it takes 25 seconds to complete. This process is essential, and without it, you can not do almost anything.

I'm talking about installing the dependencies for your project, `npm install` for node projects. Without it, you can not build, test, lint or do almost any other operation on your workflow.

We can do something straightforward to downgrade those 25 seconds to 14.3 (an improvement of almost 60%!😮). You only need to apply cache to the dependency installation (`npm install`). Those 10 seconds saved across all your jobs will add up to 32% improvement.

The secret of achieving an execution improvement of 32% is to **be consistent**, apply [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). Every time you need to perform the dependency installation, you need to be sure to use the same set of steps.

Github actions allow us to be consistent super-easy with [custom actions](https://docs.github.com/en/actions/creating-actions/about-custom-actions). We can define an activity with all the steps needed and then reuse it every time with just one line of code.


### Submission Category: 

Maintainer Must-Haves

### Yaml File or Link to Code

This is the actual action using `yarn` as the package manager.

```yml
# .github/actions/setup/action.yml
name: Setup
description: Setup Node.js, cache and install dependencies
inputs:
  node-version:
    description: Node.js version
    required: false
    default: '16'
runs:
  using: composite
  steps:
    - name: Install Dependencies
      uses: actions/setup-node@v2
      with:
        cache: yarn
        node-version: ${{ inputs.node-version }}
        registry-url: https://registry.npmjs.org
    - name: yarn install
      shell: bash
      run: yarn --frozen-lockfile --no-progress --non-interactive --prefer-offline
```

To use it on any job:
```yml
jobs:
  any-job:
    runs-on: ubuntu-latest
    steps:
      - name: Get code to get access to custom our actions
        uses: actions/checkout@v2
        with:
          fetch-depth: 0
      - name: Install Dependencies
        uses: ./.github/actions/setup

      - name: Doing any-job
        run: npm run any-job
```

Check out the workflow on an actual project.

{% github https://github.com/dianjuar/improve-workspace-execution-32 %}


### Additional Resources / Info

This discovery was formulated, tested, and explained with numbers statically correct on [ngx-deploy-npm](https://github.com/bikecoders/ngx-deploy-npm/pull/137) project.

`@jscutlery/semver` project [is implementing](https://github.com/jscutlery/semver/pull/381) this improvement
Impersonation in a .Net core application with Identity Server 4
Tags: impersonation, authentication, authorization, identity
Published: 2021-12-08 07:11:15

Identity Server 4 does not provide native impersonation support which I needed for one of my projects. I have implemented one on top of it.

Here is the sample project I did in GitHub.

https://github.com/venbacodes/ImpersonationSample-IdentityServer4

This is a sample application to show a way to implement impersonation when using Identity Server.

Key Points
1. Authorization policy has been setup to restrict impersonation to users with specific role.
2. Admin users' email is added as a claim while impersonating so that it can be used while ending the impersonation.
3. Logic is simple as authenticating with the victim users' email for impersonation with additional claims to track the impersonation and the impersonating user.
Weekly web development resources #99
Tags: weekly, webdev
Published: 2021-12-08 07:03:21



______

##[Lovely Little Websites](https://www.smashingmagazine.com/2021/11/showcase-lovely-little-websites/)
[![Lovely Little Websites](https://wweb.dev/weekly/content/99/showcase-small-websites.jpg)](https://www.smashingmagazine.com/2021/11/showcase-lovely-little-websites/)
A nice showcase of small websites by Cosima Mielke on Smashing Magazine.

______

##[Code Hike](https://codehike.org/)
[![Code Hike](https://wweb.dev/weekly/content/99/codehike.jpg)](https://codehike.org/)
A library to create code walkthroughs for the web by writing markdown.

______

##[Understanding re-rendering and memoization in React](https://medium.com/@kolbysisk/understanding-re-rendering-and-memoization-in-react-13e8c024c2b4)
[![Understanding re-rendering and memoization in React](https://wweb.dev/weekly/content/99/rerendering.jpg)](https://medium.com/@kolbysisk/understanding-re-rendering-and-memoization-in-react-13e8c024c2b4)
A nice article by Kolby Sisk to increase Reacts performance.

______

##[Modern for Wikipedia](https://www.modernwiki.app/)
[![Modern for Wikipedia](https://wweb.dev/weekly/content/99/wikipedia.jpg)](https://www.modernwiki.app/)
A cool browser plugin to enable a redesigned user interface for Wikipedia.

______

##[Nice Modal](https://github.com/eBay/nice-modal-react)
[![Nice Modal](https://wweb.dev/weekly/content/99/nice-modal.jpg)](https://github.com/eBay/nice-modal-react)
A zero dependency utility to manage modals in a natural way for React.

______

##[Sandpack](https://github.com/codesandbox/sandpack)
[![Sandpack](https://wweb.dev/weekly/content/99/sandpack.jpg)](https://github.com/codesandbox/sandpack)
A component toolkit for creating live running code editing experience.

______

##[PickBetterPack](https://pickbetterpack.com/)
[![PickBetterPack](https://wweb.dev/weekly/content/99/pickbetterpack.jpg)](https://pickbetterpack.com/)
Discover similar packages from your package.json dependencies.

______

##[Open Props](https://open-props.style/)
[![Open Props](https://wweb.dev/weekly/content/99/open-props.jpg)](https://open-props.style/)
CSS custom properties to help accelerate adaptive and consistent design. 

______

##[Free Userpics Pack](https://userpics.craftwork.design/)
[![Free Userpics Pack](https://wweb.dev/weekly/content/99/userpics.jpg)](https://userpics.craftwork.design/)
A collection of a hundred free userpics for your design projects.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Growth mindset
Published: 2021-12-08 06:57:02

## Importance of a Growth Mindset

Wanted to discuss something that has recently been on my mind. Specifically around the idea of growth mindset. Doing The Odin Project, being a space where there is professional programmers, asking questions. As I go deeper along the self-taught path one of the things that is becoming clear is that there is a chasm of soft skills, hard skills, and knowledge you need to pick up to become a GOOD programmer. 

While it can seem very overwhelming initially to try and absorb all of that information. It is important to remember that the small victories count. Even if you only learn something as small as learning what a String is or pseudocode a problem. That is still a step towards becoming a good programmer. Focus on learning the foundational knowledge and trust that once you do learn that foundational knowledge you can translate to much more complex problems. Felt extremely discouraged thinking about that chasm and realized ultimately if you have a growth mindset it does not matter how large it is. Eventually you will build a bridge across it.
How Clean Air in the Workplace Can Boost Productivity
Tags: webdev, ductgurus
Published: 2021-12-08 06:47:21

Did you know that as many as 90% of dust and mold particles found in the US, present a poisoning risk to humans? Dust and mold are more than just an unsightly and inconvenient problem in our homes and businesses, they’re a hazard that if left unchecked, can aggravate allergies, cause respiratory problems and myriad other health concerns for people.

Below are just some of the problems both you and your employees can expect to encounter, if the air ducts in your commercial premises aren’t being cleaned often enough, if at all:
Increase in allergens

Invisible to the naked eye, airborne allergens such as dust and pollen can wreak havoc on anyone being regularly exposed to significant numbers of them, and over time, this exposure can make individuals very sick. Healthy people may experience itchy eyes, a runny nose and a sore throat, while for anyone with a compromised immunity or existing allergies, airborne allergens can aggravate symptoms and even cause a number of respiratory illnesses. In the worst-case scenario, some individuals may even require hospitalization.
Risk of infection

Mold and mildew spores can be particularly dangerous when individuals are exposed to them over long periods of time. If your air ducts aren’t being cleaned often enough – if at all - then there could be a build-up of mold and mildew inside them, causing the very air your employees are breathing to become dangerous over time. Lung infections caused by frequent or prolonged exposure to mold and mildew spores can be potentially deadly, and no employer wants to expose their workers to this.

Mold infections can also cause a range of symptoms for those already suffering from allergies, such as headaches, sneezing and coughing. If your business is in a particularly humid region, or the nature of the products you manufacture lead to a warm, damp environment, there could very well be mold and mildew in the air ducts.

Simply put, you don’t want mold or mildew anywhere in your building, least of all in your air ducts.
Reduction in productivity

It goes without saying that if your employees are breathing in polluted air from the dirty air ducts in a building or room, they’re not going to be able to work to as high a standard. Their concentration will likely be impaired, they may suffer from frequent headaches, itchy eyes or a cough, all of which make it hard to work productively. In some cases, the air may be so unclean that employees are forced to take sick leave or are even hospitalized.

Are the air ducts in your workspace being cleaned frequently, or could you be exposing your employees to the dangers of excess dust and mold spores? Cleaning the ducts regularly can also help prevent fires and improve the overall quality of the air. Why is this so important? Because if your employees aren’t breathing clean air, there’s no way they’re going to be as productive, and that spells bad news not just for the employee, but for you and your business as a whole.

For more details on air duct cleaning service, visit [Ductgurus.com](https://www.ductgurus.com)
Delivery
Tags: html, css, python, github
Published: 2021-12-08 06:43:00


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwgp0ebk13ygnghos2b1.png)
This is my site about ordering food online that is being prepared:cowboy_hat_face:

my project link is https://github.com/Armanebtekari/delivery 😉👊🏼

My Github account👊🏼 https://github.com/Armanebtekari 👨‍💻😉
How To Minify HTML, CSS And JavaScript Files With "html-minifier"
Tags: html, css, javascript, minify
Published: 2021-12-08 06:30:48

In this question, we explain how to minify and clean HTML, CSS and JavaScript files. Before that, first, make sure that you have NodeJS installed in your system. If not, read the “NodeJS NPM package manager installation” section of the [How To Setup A Linux, Apache, MySQL, PHP Dev Environment On Ubuntu](https://devtonight.com/posts/how-to-setup-a-linux-apache-mysql-php-dev-environment-on-ubuntu?utm_source=dev&utm_medium=questions&utm_campaign=how-to-minify-html-css-and-javascript-files-with-html-minifier) guide. After that, install the `html-minifier` package by running the following command.

```
npm install html-minifier -g
```

Then, run the `html-minifier` command to minify and clean all the HTML, CSS and JS files in the current directory.

```
html-minifier --input-dir . --output-dir . --remove-comments --collapse-whitespace --minify-css --minify-js
```

But sometimes it can be failed to minify and clean all the files due to invalid codes and markup errors. For that kind of situation, try to fix the related file if possible or otherwise run the command targeting a specific file type.

For example, you can minify only the HTML files by running the above command with the `--file-ext` flag.

```
html-minifier --input-dir . --output-dir . --remove-comments --collapse-whitespace --minify-css --minify-js --file-ext html
```

Likewise, you can run the same command for other file types such as `css` and `js` by adding them one by one to the `--file-ext`.

Feel free to visit [devtonight.com](https://devtonight.com?utm_source=dev&utm_medium=questions&utm_campaign=how-to-minify-html-css-and-javascript-files-with-html-minifier) for more related content.
World most powerful math function!
Tags: javascript, webdev, math, programming
Published: 2021-12-08 06:24:41


![subtraction including larger digits](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8404952kdzkjqifvcd2h.gif)

Adding, subtraction, multiplication and division for long digit in JavaScript may not give correct answer.

So, I create math function solve those problem. 

Here you can try this codepen: https://codepen.io/gauravnumber/pen/RwLaePQ

Source code of repo here:
https://github.com/gauravnumber/math-code

Currently math-code support addition, subtraction, multiplication, divison, <, >, <=, >=, =, !=

Floating digit also.
You can multiply 30, 50 digit using decimal number with high accuracy.
Evitar bucles anidados en Javascript
Tags: javascript, spanish, español
Published: 2021-12-08 06:13:56

**Bucles innecesarios!**

En ocaciones tenemos dos arreglos que están relacionados de alguna forma, en este caso tenemos un arreglo de carros que tiene dos atributos, el modelo y la marca, en el segundo arreglo tenemos el precio de un carro de acuerdo a la marca.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gap8zr9wg0dg03inx0ci.png)
 

Si necesitamos saber los precios de los carros que tenemos en el primer arreglo debemos relacionar ambos arreglos, el camino clásico es hacer dos bucles anidados como los que vemos a continuación

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

Y esta bien, funciona, que en primera medida es lo importante, sí contamos las iteraciones que realiza en este caso son 36. En principio puede ser algo que no afecte pero sí los dos arreglos empiezan a incrementar su tamaño podemos retrasar algunos procesos.

Uno de los métodos para reducir iteraciones es realizar las búsquedas por referencia y no una búsqueda iterativa, para tal caso debemos transformar el arreglo **_prices_** a un objeto de la siguiente forma:

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

Con esta **_reduce_** generamos el siguiente objeto:

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

Y ahora hacemos un **_map_** sobre el arreglo de **_cars_** de la siguiente forma:

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

Como vemos en la imagen el truco esta en la forma en que relacionamos el objeto creado con cada uno de los carros al hacer una búsqueda en un objeto por **_referencia_** o por **_key_** ya que inmediatamente identificará el valor.

Si vemos el código en la segunda opción hacemos un **_map_** y un **_reduce_** ¿Esto optimiza nuestra funcionalidad? La respuesta es SI, al no tener bucles o loops anidados se tendrán menos iteraciones. En este caso de la primera forma tenemos un total de **_36 iteraciones_** y de la segunda forma solo **_16 iteraciones_**, puede que no afecte en este momento el resultado pero estas dos cifras se irán separando cada vez a medida que los arreglos aumentan su tamaño.

Por ultimo les dejo el github con el código de la prueba.
https://github.com/davidyero/javascript-tips/blob/master/js-loops.js
O Comment O Comment on an RFC
Tags: php, webdev
Published: 2021-12-08 06:09:33

>**Just the Gist** 
>RFC is Request For Comment. It is a way to suggest changes to the language. Adding features and deprecations to PHP goes through the RFC process, where community members can suggest, discuss and implement the changes.

## RFC is how we get along
The way PHP is evolving and how we work with it is a community effort. There isn't a single company, or a single person, that decides what features should be included in PHP and how they are implemented. There is a community of developers working on it. While there are Release Managers that oversee the release process, they do not decide the features or implementation. It all boils down to community raised suggestions in the form of RFCs - or Request For Comments.

An RFC is a proposal for a new feature or a change to an existing feature that is later on put to a vote. While most anyone can propose an RFC, it is highly likely to fail if the one suggesting it is not able to see themselves implementing it. When the RFC is first drafted, it is often called a "proposal". This proposal is then put up for public discussion.

A proposal currently under discussion is [*Readonly classes*](https://externals.io/message/116472). Such a discussion is good for ironing out any issues that may arise, and addressing the usability of the proposed feature. When discussion ends and all questions are addressed, the next step is to put the proposal to a vote. Proposals currently being voted on are listen on [the official page for the RFC](https://wiki.php.net/rfc#in_voting_phase). Recently a vote finished where the RFC proposed to move the current bug tracker to the GitHub issue tracker for the PHP repository ([Migrating to GitHub Issues](https://wiki.php.net/rfc/github_issues)). This proposal was accepted.

When a proposal is accepted, next is implementing it. The RFC will most often contain a targeted version in which it will be implemented, so everyone in the community knows what to expect and when.

## What about you?
Have you heard of this process before? Would you be willing to take part in it, or are you already a major player? Is there anything more you would like to see, or comment, about the RFC process? Comment below and let us know what you think ✍

## Further Reading
* Ramsey on being chosen as a release manager - https://dev.to/ramsey/i-m-a-release-manager-for-php-8-1-24i2
* Release process - https://wiki.php.net/rfc/releaseprocess
* The Mysterious PHP RFC Process - https://blogs.oracle.com/opal/post/the-mysterious-php-rfc-process-and-how-you-can-change-the-web
Create NPM Package - feat. last lab
Published: 2021-11-27 04:09:42

This is the last blog post for this static page generator program. For this lab, I need to release my program online. I used [NPM](https://www.npmjs.com/package/create-ssg) to publish my program as a package.  

These are the detailed steps:
1. Create an account in NPM(Verify email before publishing the package)
2. Remove "Private: true" in package.json.
3. Type the command "npm publish" and done!

Actually, I thought the process to create an npm package is more complicated and only allowed for some highly skilled developers. However, I was surprised with the npm package upload process cuz it's really simple which consists of a few steps.

After I published I need to update a few times to make it work.
v.1.0.0 - This was the first version that I published
v.1.0.1 - added testing scripts.
v.1.1.0 - I accidentally commented import statement. I uncommented the line.
```
// import arg from "arg";
```
v.1.1.1 - fix a bug in the program.
```
fs.unlink(`./dist/${filelist[num]}`,(err=> {
                     console.log(err);
                  }));
```
v.1.1.2 - Readme.md edited based on the partner's feedback and added a description of how to download the npm package.

I asked my friend to test the npm package. And download and running simple commands like version and help were going well. However, when she put the file in the main folder and tried to create the HTML file from the txt file. there was some problem that the program could not find the txt file. So, I tried to figure out what is the problem. 
And I got the reason why the program could not find the file. This is because I set a path for finding files in the folder called "docs" and she uploaded the file to the root folder. So, I added a step on the instruction of NPM on the README.md to create a folder named "docs" and upload files in it. I also think about removing the path and letting them upload on the root. But reason, why I created a separate folder to upload the files and folders, is to make it clean. So, instead of removing the path I just add one more simple step to set instructions.
This is the edited instruction on how to download and use the project.

## How to install
1. Download npm package -> npm i -g create-ssg
2. Create folder named "docs"
3. Put all the files and folders that you want to convert to HTML
4. Run the commands(Detailed instructions are in the [NPM package instruction](https://www.npmjs.com/package/create-ssg) or in [my GitHub Project page](https://github.com/suhhee1011/suhheeKim_OSD_release0.1_create_ssg))
PDA- Pushdown Automata
Tags: pushdownautomata
Published: 2021-12-08 05:56:47

Pushdown automata is a finite automata with extra memory called stack which helps pushdown automata to recognize Context Free Languages.

A pushdown autimaton is a way to implement a context-free grammar in a similar way we design DFA for a regular grammar. A DFA can remember a finite amount of information, but a PDA can remember an infinite amount of information.
Basically a pushdown autimaton is-
     "Finite state machine" + "a stack"
A pushdown autimaton has three components-

- an input tape,

- a control unit, and 

- a stack with infinite size.

A pushdown automata (PDA) can be defined as:

Q:is a set of states
q0:is the initial state
Z: is the initial pushdown symbol
F: is the set of final states etc.
Covid-19 live dashboard
Tags: actionhackathon21
Published: 2021-12-08 05:53:48

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)


### My Workflow
[Note]: # (Please make sure the project links to the appropriate GitHub Actions repository, and includes [an open source license](https://choosealicense.com/) and README.)


### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)


### Yaml File or Link to Code
https://github.com/faithchep/COVID-19_LIVE_DASHBOARD


### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. )

[Reminder]: # (Submissions are due on December 8th, 2021 (11:59 PM PT or 2 AM ET/6 AM UTC on December 9th).