teleren/devto huggingface dataset:
Use 'npm ci' instead of 'npm install' when deploying
Published: 2022-01-08 18:24:21

I saw that `npm ci` for installing packages in a project that I got into recently.<br>
Up to now, I had used `npm install` for installing all dependencies of a project.<br>
But I got to know that `npm ci` is much faster than `npm install`. In some cases, it's even twice faster.

I'll explan

- Why **npm ci** is faster than **npm install**
- What **npm ci** can't do
- Why you should use **npm ci** instead of **npm install**

---

## Why `npm ci` is faster than `npm install`

`npm ci` installs all dependencies from _package-lock.json_ . If there is no _package-lock.json_ or there is a dependency problem, it throws an error.

`npm install` installs all dependencies from _package-lock.json_ and if dependencies need to be updated, it does and if there is no _package-lock.json_, it creates _package-lock.json_.


## What `npm ci` can't do

It installs dependencies from `package-lock.json`. That's it. You can't add or update packages using `npm ci`.


## Why you should use `npm ci` instead of `npm install`

If you're working on a project, you may don't need to install all of the dependencies every time. But if you deploy the project, you need to install all dependencies. For that, use `npm ci`. It'll be faster than `npm install`.

Before deploying, you have to make sure that all dependencies in _package-lock.json_ are updated. Otherwise, your project may not be working. And for saving time, make sure of one more thing: There is no *node_modules* because `npm ci` removes *node_modules* anyways before building. That would be a waste of time. 

---

### Install-Time Differences

#### `npm install`

*Time: 77.562s*

![npm install time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xlrgavhvoezs00advjn6.png)

#### `npm ci`

*Time: 46.599s*

![npm ci time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvlxdzhsxgu6q0hyvfe6.png)
👻The Nightmarishly Dangerous Default Behavior of setInterval()
Tags: javascript, node
Published: 2022-01-08 18:07:14

So you want to send an HTTP request every `delay` number of milliseconds. Easy:

```js
setInterval(
  () => {
    doRequest();
  },
  delay,
);
```

But what if `delay` is undefined?

Here's where it gets scary. It turns out that if `delay` is undefined (or null, NaN, etc), it will default to 1 millisecond! Enjoy your DoS attack!

I've seen this issue affect production systems on two occasions now, and both instances caused significant damage and required emergency maintenance.

## A Safer setInterval()

If you're concerned about this possibility, you can replace setInterval with safer code. Execute this code as early as possible during initialization:

```js
const oldSetInterval = setInterval;
globalThis.setInterval = (callback, delay, ...rest) => {
  if (typeof delay !== 'number' || delay < 1 || delay > 2147483647) {
    throw new Error(`Invalid interval delay: ${delay}`);
  }

  return oldSetInterval(callback, delay, ...rest);
};
```

This replaces the `setInterval` function globally with a wrapper that will throw an error if the `delay` argument is not a number or is outside of the valid range. No one likes errors, but it's usually better than accidentally making 1,000 requests per second!

## Other Implementations of setInterval()

I've been talking about Node.js so far, and this behavior is clearly documented in the [Node.js documentation](https://nodejs.org/api/timers.html#setintervalcallback-delay-args).

But `setInterval()` is actually not part of the ECMAScript standard, and some of its details may vary across different JavaScript environments.

Here's some code you can execute to see what the default delay is in your environment:

```js
let prev;
setInterval(() => {
  const cur = new Date().getTime();
  if (prev) {
    console.log(`MS elapsed: ${cur - prev}`);
  }

  prev = cur;
});
```

It looks like in Firefox, the default delay is 16 ms, while in Chrome it's 4. While the Node.js documentation states that it's 1 ms, my testing suggests that it's very inconsistent in Node.js, much more so than in browsers. I'm not sure why.

## setTimeout()

To be clear, yes, `setTimeout()` does have exactly the same issue.

## Conclusion

I don't know who thought it was a good idea to default the `delay` to a low number. Throwing an error when `delay` is invalid sounds like a much better idea to me. But whatever, it is what it is! We just have to understand it and be careful.
Better PrestaShop Profiler in version 1.7.8. How to use it in the older versions?
Tags: prestashop, php, ecommerce, tutorial
Published: 2022-01-08 18:06:03

In version 1.7.8 of the PrestaShop returns the ability to collect more precise information about the modules that are displayed on the front office of your store.

Enabling the PrestaShop front office profiler is a great place to start if you need to know more about the performance of your PrestaShop.

The data is collected both for hooks and modules attached to them, but also for widgets. If you don't have PrestaShop 1.7.8, don't worry. The profiler in the new version is very easy to use also with older versions of PrestaShop. In this post I will show you how to use it in the older versions.

I've tested it in PrestaShop 1.7.7, and 1.7.6.

## Using the profiler from 1.7.8 in lower versions of PrestaShop

To use profiler in lower versions of PrestaShop, only 4 steps are needed.

1. First download the PrestaShop 1.7.8 package, you can do it from [here](https://github.com/PrestaShop/PrestaShop/tree/1.7.8.x).
2. After unpacking it, copy the `tools/profiling` folder and move it to the same path in the older PrestaShop version.
3. Next step is to edit the `config/config.inc.php` file, just in the place where you currently have this code:

```php
if (_PS_DEBUG_PROFILING_) {
    include_once _PS_TOOL_DIR_ . 'profiling/Controller.php';
    include_once _PS_TOOL_DIR_ . 'profiling/ObjectModel.php';
    include_once _PS_TOOL_DIR_ . 'profiling/Db.php';
    include_once _PS_TOOL_DIR_ . 'profiling/Tools.php';
}
```

replace it with:

```php
if (_PS_DEBUG_PROFILING_) {
    include_once _PS_TOOL_DIR_ . 'profiling/Profiler.php';
    include_once _PS_TOOL_DIR_ . 'profiling/Controller.php';
    include_once _PS_TOOL_DIR_ . 'profiling/ObjectModel.php';
    include_once _PS_TOOL_DIR_ . 'profiling/Db.php';
    include_once _PS_TOOL_DIR_ . 'profiling/Hook.php';
    include_once _PS_TOOL_DIR_ . 'profiling/Module.php';
    include_once _PS_TOOL_DIR_ . 'profiling/Tools.php';
}
```

The last step you need to do, is to edit the `controllers/admin/AdminLegacyLayoutController.php` file and delete:

`$this->outPutHtml;`

from the end of the `display` method.

Now if you set `_PS_DEBUG_PROFILING_` to `true` in the `config/defines.inc.php`, you can use a better version of the profiler in your PrestaShop store.

## Summary

All this should give you more information about the health of your front office. You can expect more features available in the front office profiler in the next major version of PrestaShop.

Do you want to know more about the PrestaShop 8, and future of the PrestaShop? Read an article: [PrestaShop Beyond 1.7](https://build.prestashop.com/news/prestashop-beyond-1-7/).


![PrestaShop front office profiler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjg8spmla02mkccbf50t.jpeg)
How I can create user activation token or url slugs?
Tags: programming, tutorial, php
Published: 2022-01-08 17:54:56

Usually for user activation tokens I need good entropy in my randomness. Solutions based upon:

* str_shuffle
* shuffle
* rand

Use time-based randomness therefore, any random slug for user activation can be predictable. On the other hand solutions based upon `openssl_random_pseudo_bytes` offer better randomness.

So, using the following pieces of code can be useful:

## Example 1:

Just a random string:

```

// Set appropriate length

$length = 10;

$token = substr(base64_encode(openssl_random_pseudo_bytes(100)),0,$length);

```

## Example 2

Random alphanumeric string:

```
// Set appropriate length
$length = 10;

$pool = base64_encode(openssl_random_pseudo_bytes(100));

// If no need for numbers use '/[^a-zA-Z]/' instead
$pool = preg_replace('/[^a-zA-Z0-9]/',"",$pool);

$token = substr($pool,0,$length);
```
Complete Missions and Get Certificate from Netlify *free
Tags: tutorial, beginners, nextjs, webdev
Published: 2022-01-08 17:31:30

I just got certificate from Jamstack Explorers from Netlify which consists of various tracks called missions which then consists of various crash courses on different topics like NuxtJS, NextJS, Strapi+Nuxt and many more. These all tutorials have code along exercises which is best and you will brush up your skills.
Best for beginners with knowledge of Vue/React and web fundamentals.

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

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

Check this out here --> https://explorers.netlify.com/missions
#Python 🐍 – Export Video Frames as Images from a video file 🎥
Tags: englishpost, opencv, python
Published: 2022-01-26 14:58:42

---
title: #Python 🐍 – Export Video Frames as Images from a video file 🎥
published: true
date: 2022-01-08 17:30:44 UTC
tags: EnglishPost,EnglishPost,OpenCV,Python
canonical_url: 
---

Hi ! I can’t believe I didn’t write about this before. I usually do this, at least 2 times per month, and hey, now it’s on the blog for my future reference. Simple Scenario: Open a video file and export each frame as an image. Some notes: The sample uses OpenCV. I wrote a lot… [Continue reading #Python 🐍 – Export Video Frames as Images from a video file 🎥](https://elbruno.com/2022/01/08/python-%f0%9f%90%8d-export-video-frames-as-images-from-a-video-file-%f0%9f%8e%a5/)
Digital Clock using Vue 3 Composition API
Tags: javascript, beginners, vue, codenewbie
Published: 2022-01-08 17:20:52

Hello Readers,

In this blog post we will see how can we create a digital clock using Vue 3 composition API. Composition API is a new feature added in Vue through which we can reuse the code in multiple vue component.


For more details about how to use composition API you can refer my previous blog. I providing a link - go through it for basic information about it.

{% embed https://dev.to/snehalkadwe/what-is-composition-api-in-vue-3-157k %}

So let's start with main topic.

First we need to create a component named as `DigitalClock.vue`

```js
<template>
  <div class="flex h-screen">
    <div class="w-full lg:w-1/4 m-auto p-7 shadow-lg shadow-pink-400 border-4 border-t-purple-600 border-r-pink-600 border-b-pink-600 border-l-indigo-600  bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
      <!-- <p class="font-bold text-white text-lg">{{ currentTime.toLocaleString() }}</p> -->
      <p class="font-bold text-white pt-3 text-6xl">{{ currentTime.toLocaleTimeString() }}</p>
      <p class="font-bold text-white text-sm mb-1 flex justify-end mr-3">{{ currentTime.toLocaleDateString() }}</p>
    </div>
  </div>
</template>
<script>
import { useCurrentTime } from "../composables/useCurrentTime";
export default {
  name: "CurrentTimeExample",
  setup() {
    const { currentTime } = useCurrentTime();
    console.log(currentTime.value);
    return { currentTime };
  },
};
</script>

```
In the above code we are calling `useCurrentTime` method from the `useCurrentTime.js` file where we are going to write our main logic using composition api and from that we will call a currentTime and return its value to the component. 

To create a composition api's we will create a folder named as `composables` where we keep/create all composition api's. 

As stated above create a folder named as `composables` in `src` folder and create js file as `useCurrentTime.js`. (`src/composables/useCurrentTime.js`)


```js
import { ref, onBeforeUnmount } from "vue";

export const useCurrentTime = () => {
  const currentTime = ref(new Date());
  const updateCurrentTime = () => {
    currentTime.value = new Date();
  };
  const updateTimeInterval = setInterval(updateCurrentTime, 1000);
  onBeforeUnmount(() => {
    clearInterval(updateTimeInterval);
  });
  return {
    currentTime,
  };
};

```
In above code we have created a const variable as currentTime which holds current Date and Time, and a method `updateCurrentTime` to update the current time. There is an another method called as `updateTimeInterval` which will update the time after given set of interval. 
You can see a hook called as `onBeforeUnmount()` which will clear the currentTime when component is unmounted.
And the last thing is we are returning the current time, so wherever we have used/called this useCurrenttTime.js we will have the value. 

In this way wherever we require the date n time we can reuse this code by simply importing it to the component.

You can also refer live demo in sandbox.

{% codesandbox digital-clock-forked-m3mgm %}


Happy Reading.. :unicorn: :lion:
[week1] Days 6 - Learn You Node
Published: 2022-01-08 17:02:40

Hello , back for another day of dev. 
On day 5 i was working for a school project on node JS, and i was interested to go deeper on my understanding of node JS so i install [Learn you Node ](https://github.com/workshopper/learnyounode) a fantastique tool for understanding how work node.js and how to use it's potential 

## My Learning Goals for today: 
- Finish some learn you node challenge 

## What I Learned:

By finishing the challenge  7 of the 13 challenge, I understood that there are a lot of useful tools in node JS, like we can manipulate file by using the module 'fs' and I learned how to make a simple server with node.js. I really recommend you to try 'learn you node' and maybe you will discover some new feature ! 

## My Goals for Day 7:

For day 7, i will continue the freecodecamp course on javascript , and try to do at least 2 section
How I created my Github Readme file
Tags: github, beginners, showdev
Published: 2022-01-08 16:50:34

Github is an important tool for code management and is used by almost all developers around the world.
And I wanted an impressive GitHub profile for quite some time now and I ran across an awesome GitHub profile generator tool by `@Rahul Jain` {% github rahuldkjain/github-profile-readme-generator %} 
You can find the link to the tool [here](https://rahuldkjain.github.io/gh-profile-readme-generator/).
I created my GitHub profile using this generator tool and it turned out so good. {% github AneeqaKhan/AneeqaKhan %} I have changed a few things alignments according to me and changed the source of social icons. If you like what I did you can copy from my readme file.
I hope it'll help you creating an awesome Github profile. :sparkles:
7 Things You Should Know Before You Start the programming
Published: 2022-01-08 16:27:23

If you're considering learning to code, you might want a little guidance in order to eradicate any self-doubt you may have. In addition, you might simply want a few pointers to get you even more excited about coding

This is a list of 7 things you should know before starting to program. The points listed here will give you an idea of what to expect and how to approach **programming**.

## Understand the basics
Learning something new requires you to be familiar with the **basics**. This is the first step to becoming a coding ninja.

In order to master computer science, you must learn the basics, just like any other trade. Hundreds of courses are available online for beginners. The Internet provides tons of information for beginners, making it a beginner's paradise!. All you have to do is look through each one, and choose the one that best fits your needs. Having an understanding of the basics early on can give you an advantage.

## Practice Patience
All experts agree: programming requires patience. Coding can be difficult at times, and a lack of patience can impair motivation, cause frustration, and possibly lead to giving up on the program. It's important to practice patience to truly absorb each lesson. When you try to lose your patience try deep breathing or take a break.

## Set a goal & move towards it
Having goals to work towards is a powerful motivator as you learn to code. As an example, if you plan to learn Javascript, make a goal to complete a simple project by the end of the week. Once this goal is achieved, set another, and so on. It's that easy.

In programming, there is always more to learn, and that is why you should keep setting goals and not lose sight of your primary goal.

## Learn from Mistakes
In coding, we learn that it is inevitable that there will be imperfections. Not every line of code you write will be flawless. It's a good thing too, because every imperfection offers a learning opportunity. Making mistakes at the beginning allows you to learn more and, eventually, make fewer mistakes.

## Become Your Own Problem-Solver
Problem-solving is the most important skill you'll learn from coding. If you're having trouble solving a problem, resist the urge to ask for help. Once that's done, explain your code - either to yourself or in writing.

## Practice Coding By Hand
Experienced coders recommend this method. Coding by hand will help you become a better coder. There is evidence that your brain retains information better when it is written down. Additionally, if you're considering a career in coding, potential employers will require you to write a test code to ensure you know your stuff.

## Don’t Give Up
While learning how to code, your biggest obstacle won't be a virus or an insurmountable puzzle.

It will be the desire to give up.

The majority of people who start online coding courses never finish them. In the end, a bit of extra push may be all you need to overcome those moments of near-defeat.

I hope these 7 points will help you provide a headstart in your programming career.
The Difference Between NPM and Yarn
Tags: npm, yarn, javascript, webdev
Published: 2022-01-08 16:18:55

## What is Package Manager?
A package manager is a tool to create project environments and easily import external dependencies. By using a package manager we could able to automates the process of installing, upgrading, configuring, and removing the dependencies from the project environment.<br>

## What is NPM?
NPM is commonly known as node package manager, maintained by NPM, Inc. NPM is the popular package manager among JavaScript developers. It is the default package that is automatically installed whenever we install Node.js on our system. ([https://www.npmjs.com/](https://www.npmjs.com/))<br>

## What is Yarn?
Yarn package manager developed in 2016 by Facebook. It is a another package manager for the JavaScript programing language. Yarn provides speed, consistency, stability, and security as an alternative to NPM.([https://yarnpkg.com/](https://yarnpkg.com/))
<br><br>

## Speed
The main difference between NPM and Yarn is the package installation process. Yarn installs packages in <u>parallel</u>. Yarn is optimized to fetch and <u>install multiple packages at once</u>.

NPM will perform a <u>serial</u> installation process. It <u>install every package independently</u>.

So in this case  **Yarn has a speed installation process than NPM**.

## Security
NPM package manager has perform a security check on each install. Yarn checks behind the scenes to ensure you're not downloading any rogue scripts and other files that can conflict with your project's dependencies. **Security is one of Yarn’s core features.**

## Ease of use
NPM and Yarn both package managers are user-friendly and have a good user experience.
<br><br>

## Basic Commands

**To see list of commands:**
NPM - `npm`
Yarn - `yarn`

**Install dependencies from package.json:**
NPM - `npm install`
Yarn - `yarn`

**Install a package and add to package.json:**
NPM - `npm install package --save`
Yarn - `yarn add package`

**Install a devDependency:**
NPM - `npm install package --save-dev`
Yarn - `yarn add package --dev`

**Remove a dependency:**
NPM - `npm uninstall package --save`
Yarn - `yarn remove package`

**Upgrade a package to its latest version:**
NPM - `npm update --save`
Yarn - `yarn upgrade`

**Install a package globally:**
NPM - `npm install package -g`
Yarn - `yarn global add package`
How the internet works ?
Tags: webdev, beginners, devops
Published: 2022-01-08 16:10:28

##How the internet works ?
**before starting the development part we should know the whole concept of how the internet works. there are many questions you might have so let's understand it**.

                                                         
 Internet is nothing but a long wire that connects the whole world 
to collaborate with each other through computers but some of them plays an important role to provide information's, media files to the clients and named as servers. server is like a library contains everything you need but it is not easy to find a particular file or data among millions of files, so every server has it's own IP address  which helps us to receive desired file.
Now the point is how the whole process works:-

- Firstly you search file through your browser, browser informs the (ISP) _internet service provider_ for the same, then (ISP) send this info to (DNS) _domain names system_ which finds the IP address of that particular server contains your desired file, them DNS send IP address to (ISP) which then same to your computer then again your computer send this IP address to (ISP) from where it travel through internet backbone (wires) directly this info received by the server containing desired file locating in the given IP address then all files transferred to you. 

**I hope this will give you a brief knowledge of internet stuff**

Connect with me :-
on twitter @Gauravstwt [](https://twitter.com/Gauravstwt)
on LinkedIn Gaurav Pawar [](https://in.linkedin.com/in/gaurav-pawar-56047b213)
My first SDE internship interview experience
Tags: dsa, cpp, programming, problemsolving
Published: 2022-01-08 16:00:57

> Company: Lido Learning

I applied at Lido Learning via linkedin. I don't remember the exact date when I applied. But my overall experience was awesome though got rejected due to rolling criteria.

The process contain 3 round:

### First Round (Telephonic Round)

HR called me and told me that my resume is shortlisted for this role and they want to interview me. I was glad as this was my first time I am going to give interview for SDE role with good stipend and they were also providing me PPO (Pre Placement Offer) if satisfied with my work.
HR told me that my first technical interview will be after 5 days and I can expect easy-medium DSA questions and some questions related to Javascript, OOPS.

I revise my concept, I do leetcode.

### Second Round (Technical Round)

Interviewer was SDE-2 at Lido. He first asked me to introduce myself. Then he ask me question related to javascript. I was able to give answer but I was not confident about it. He asked me the difference between '==' and '==='. I told him that both are conditional operator and '===' is advancement of '==', it was not fully correct. Then he asked me what is reduce function, I told him it is used in array scope. He was satisfied but not fully. He started asking me about OOPS, he asked me difference between private, protected, public. 
Then he request me to share the screen and ask me 2 DSA question.

1. Next Greater Element
I started with brute force and show it to him. He asked me to optimize it, I did it using stack data structure.

2. Based on hash map.
I started with brute force and he asked me to optimize it, I did it and he was satisfied.

>  After 2 days I got call that I am selected for next round.

### Third Interview(Technical Round)

Interviewer was VPE at Lido. He started with my introduction, I prepared for DP, graphs and other higher concepts but he deep dive into hashmap, he not ask my to code, he just give me different conditions for mapping. It was pretty tough.

As it was my first experience, I learned so many things and gain knowledge. Unfortunately, I was not selected as per rolling basis. But it was nice experience and I hope it helps you as well.

All the Best!!!