teleren/devto huggingface dataset:
How to fix "Received invalid response from npm" when using other registry in .npmrc and .yarnrc
Tags: yarn, npm
Published: 2019-11-26 21:40:43

Working on long term projects and keeping up with the technologies can be hard. It may happen that some of the technologies you're using change their configuration setting and you don't see their docs on time or you simply - forget. This happened to me while using the pro version of FontAwesome. Their license "authentication" has changed over time and that's fine if your project is young, but it's less obvious when working on long term project.

If you're reading this article, then you might be taken here by search engine that crawled this error:

```
error Received invalid response from npm.
```

In my case, I got this error while trying to execute `yarn info prop-types`, but it can be any package from your packages.json file.

During the problem, `yarn install` doesn't work so you may end up with the similar looking error:

```
yarn install v1.19.2
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
error An unexpected error occurred: "https://npm.example.com/prop-types/-/prop-types-15.7.2.tgz: Request failed \"404 Not Found\"".
info If you think this is a bug, please open a bug report with the information provided in "/Users/vkoudela/path-to/your-project/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
```

When you encounter this or similar problem, many developers would say:
1. Delete `node_modules` folder and then try `yarn install`
2. Delete `node_modules`, `yarn.lock` and then try again
3. Run `yarn cache clean` and then try again

But, what if you already tried that and it didn't help?

We, developers, when trying to fix something, we tend to run something and then we see what happens. We fix one problem, then another, until we fix all of them.

So, to be able to solve your problem, you have to know in which order `yarn` is using *rc files.

1. In your project root (folder where you have your packages.json), it looks for `.yarnrc` file
2. Then it looks for `.npmrc`
3. Then it tries to find those files globally, which is usually your user folder: `~/.yarnrc`
4. Then it tries the same thing with `~/.npmrc`

While troubleshooting and "fixing" the problem, you have to be aware of the fact that even if `yarn install` fails to execute properly, it would still create `yarn.lock` file taking all the settings from all `.npmrc` and `.yarnrc` on all four locations on your file system. So, even if you change any of the *rc files on any location after first failed attempt, it's not enough because settings are written in `yarn.lock` and yarn will reuse them on next execution.

__Therefore, don't forget to delete `yarn.lock` before every other attempt of `yarn install`.__
What's the WORST thing about serverless?
Tags: discuss, serverless
Published: 2019-11-26 21:17:31

Every time I read about serverless it looks too good to be true. And we all know how much hype every "new thing" gets in our community 😏
So I'd like to ask you all what is the WORST thing that you experienced in using serverless?

The worst, and only the worst. No buts, no excepts, no goods allowed!
Bootstrap 4.4.0 est maintenant disponible
Tags: bootstrap, javascript, webdev, css
Published: 2019-11-26 21:12:01

Mardi 26 novembre 2019une nouvelle version de Bootstrap est sortie .
Bootstrap 4.4.0, une vingtaine de minutes, après un tweet du compte officiel de l'équipe concernant la sortie de la nouvelle version . je me suis rendu sur leur blog pour en savoir plus et me rassurer de la nouvelle.pas de doute la version 4.4.0 de Bootstrap est désormais disponible, je confirme.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/4y75jlgc99x6gkl44r2u.png)

Presque toutes les fonctionnalités seront intégrées au bootstrap 5, on peut commencer à utiliser avec la version présente (4.4.0)

- **Nouveaux 'container' réactifs!** Plus d’un an dans la fabrication, fluide jusqu’à un point de rupture particulier, disponible pour tous les niveaux réactifs.
voici les mises  jours de la derniere versions

- **Nouvelles '.row-cols' classes réactives**pour spécifier rapidement le nombre de colonnes entre les points d'arrêt. Celui-ci est énorme pour ceux d'entre vous qui ont demandé des jeux de cartes réactifs.

- **Nouvelle 'escape-svg()' fonction** pour simplifier nos background-imageSVG intégrés pour les formulaires et plus.


- **Nouveau 'add()et subtract()' fonctions** pour éviter les erreurs et les valeurs zéro de la fonctionnalité intégrée de CSS calc.

- **Nouveau 'make-col-auto()' mixin** pour rendre notre .col-autoclasse disponible avec HTML personnalisé.

- Correction d'un problème empêchant Microsoft Edge de sélectionner les :disabledstyles en déplaçant les sélecteurs vers [disabled].

- **Obsolète: 'bg-variant() , nav-divider()' et form-control-focus()mixins** sont maintenant déconseillés car ils vont loin dans v5.

- Mise à jour de l'espacement et de l'alignement pour les éléments de pied de page modaux, tels que les boutons, afin qu'ils soient automatiquement renvoyés à la ligne lorsque l'espace est restreint.

- Styles de validation de contrôle de formulaire plus flexibles grâce à moins de sélecteurs chaînés. Également mis à jour l’ :invalidicône de validation afin qu’elle soit une alerte plutôt que &times;pour éviter toute confusion avec les fonctionnalités du navigateur permettant d’effacer la valeur du champ de formulaire.

- Correction d'une vingtaine de bogues CSS et JS.


- Documentation mise à jour pour corriger les liens et les fautes de frappe, points de repère améliorés pour la navigation secondaire et nouveau document de sécurité contenant des instructions sur la signalisation des vulnérabilités potentielles.

c'etait super de partager ca avec vous pour plus visiter [le blog de l'equipe Bootstrap](https://blog.getbootstrap.com/2019/11/26/bootstrap-4-4-0/)

A bientot :)
Give Moment.js a moment of attention
Tags: codepen, momentjs, javascript
Published: 2019-11-26 21:09:08

---
title: Give Moment.js a moment of attention
published: true
tags: codepen, moment.js, javascript
---

<p>Working with date and time the (NPM) package Moment is essential, I think.</p>

<p>Here you can see a bit of what you can do with Moment - and try out the constructor.</p>

{% codepen https://codepen.io/netsi1964/pen/xxxNxqv %}
Building A Real Time Event Data Warehouse For Sentry - Episode 108
Published: 2019-11-26 20:25:55

<p>The team at Sentry has built a platform for anyone in the world to send software errors and events. As they scaled the volume of customers and data they began running into the limitations of their initial architecture. To address the needs of their business and continue to improve their capabilities they settled on Clickhouse as the new storage and query layer to power their business. In this episode James Cunningham and Ted Kaemming describe the process of rearchitecting a production system, what they learned in the process, and some useful tips for anyone else evaluating Clickhouse.</p><p><a href='https://www.dataengineeringpodcast.com/snuba-event-data-warehouse-episode-108/'>Listen Now!</a></p>
Faster And Safer Software Development With Feature Flags
Published: 2019-11-26 20:25:19

<p>Any software project that is worked on or used by multiple people will inevitably reach a point where certain capabilities need to be turned on or off. In this episode Pete Hodgson shares his experience and insight into when, how, and why to use feature flags in your projects as a way to enable that practice. In addition to the simple on and off controls for certain logic paths, feature toggles also allow for more advanced patterns such as canary releases and A/B testing. This episode has something useful for anyone who works on software in any language.</p><p><a href='https://www.pythonpodcast.com/feature-flags-episode-239/'>Listen Now!</a></p>
🧭 Programmatically taking Screenshots while navigating &  searching on webpages using JavaScript (puppeteer)
Tags: javascript, webdev, puppeteer
Published: 2019-11-26 20:25:08

So far in this series, we only visited one page and took a screenshot or extracted its data. But you can actually navigate a page by clicking on elements, typing in fields and hitting keys.

So let's make the following plan: 
We want to
* visit the dev.to homepage
* search for "puppeteer navigating" to find some articles about our current topic
* and click on that very article

On our way, we'll take a screenshot of every step.


* `home.png` for the homepage
* `search-results.png` for the search results page
* and `article.png` for this article

This is the homepage
![Home](https://thepracticaldev.s3.amazonaws.com/i/bobz9on50dd1d10jmrz5.png)


These are the search results
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hqvs655ojoasjidx0dil.png)

And this is our article
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1cwnxppptdynnl79w4n8.png)



And this is how it's done:

```js
// npm i puppeteer
const puppeteer = require('puppeteer');

// we're using async/await - so we need an async function, that we can run
const run = async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // let's navigate to the dev.to homepage
  await page.goto('https://dev.to');

  // and let's take a screenshot
  await page.screenshot({
    path: 'home.png',
  });

  // and enter "Puppeteer navigating" in the search input field
  await page.type('#nav-search', 'Puppeteer navigating');

  // there's no search button, so we have to trigger the search by hitting the "Enter" key
  await page.type('#nav-search', String.fromCharCode(13));

  // let's wait until the search results are loaded
  await page.waitForSelector(
    '.stories-search .single-article .index-article-link'
  );

  // and take a screenshot of the search results
  await page.screenshot({
    path: 'search_results.png',
  });

  // select an article and click on the headline
  // if there are multiple elements satisfying the selector, the first one will be clicked
  await page.click('.index-article-link h3');

  // this time let's wait 2 seconds, which we assume is enough time for the page to load
  await page.waitFor(2000);

  // and take another screenshot
  await page.screenshot({
    path: 'article.png',
  });

  // we're done; close the browser
  await browser.close();
};

// run the async function
run();
```
Keeping A Constructor Private
Tags: java, constructor, inheritance, singleton
Published: 2019-11-26 20:23:59

---
title: Keeping A Constructor Private
published: true
description: Private constructor
tags: java,constructor,inheritance,singleton 
series: daily dosage
---

**In terms of inheritance,**

When Class A has a private constructor, this private constructor is accessible only to those who have access to A’s private methods.
A’s inner classes and if A is an inner class of some class S, other inner classes of S have access to the private constructor.

So, A can be inherited by its own inner classes or S’s other inner classes.


**To Achieve Singleton Pattern,**

Singleton Pattern means that a single class is responsible for creating an object while making sure that only a single object gets created.

So to achieve this, the constructor must be *private*. 

![singleton pattern example](https://thepracticaldev.s3.amazonaws.com/i/eh4o6i5exxv69ksu8juz.png)


Singleton class creation

```java
public class SingletonObject {

	private static SingletonObject singletonObject = new SingletonObject();

	// make the constructor private so that this class cannot be
	// instantiated
	private SingletonObject() {
	}

	// Get the only object available
	public static SingletonObject getInstance() {
		return singletonObject;
	}

	public void showMessage() {
		System.out.println("Singleton Pattern");
	}
}
```

Get object from singleton class

```java
public class SingletonPatternEx {

	public static void main(String[] args) {
		//Get the only object available
	      SingletonObject object = SingletonObject.getInstance();

	      //show the message
	      object.showMessage();

	}

}
```

Output

```java
Singleton Pattern
```
Welcome to CloudGurus.direct
Published: 2019-11-26 19:54:34

We are a new marketplace that allows companies to solve their skills shortage gap by inviting certified cloud professionals *directly* to their opportunities (contracts, projects, jobs etc). 

We are all about promoting #diversity #inclusion and #WomeninTech 

We would love to explore a strategic alliance with other clouds companies.

Kindest regards,

Rob Chambers
https://cloudgurus.direct
Netflix Mobile Navigation Animation
Tags: css, animation, javascript
Published: 2019-11-26 19:20:44

---
title: Netflix Mobile Navigation Animation
published: true
description: Learn how to create Netflix Mobile Navigation Animation
tags: css, animation, javascript
---

In this tutorial I'm going to show you how to recreate the Netflix's Mobile Navigation with smooth CSS animation / transition and a little bit of JavaScript.

I hope you enjoy it! :smiley:

{% youtube rNOscFG0PYo %}
JAMstack Roundup for November 26th 2019
Tags: react, webdev, graphql, jamstack
Published: 2019-11-26 19:05:43

###Here are some great resources and articles we've found to prepare us for a great Thanksgiving!

1. [Writing end-to-end tests for GraphQL servers using Jest](https://blog.logrocket.com/writing-end-to-end-tests-for-graphql-servers-using-jest/)

    Writing end-to-end tests for applications helps to ensure applications behave as expected. 👌

2. [JavaScript Visualized: Event Loop ✨♻️](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif)

    Oh boi the event loop. It’s one of those things that every JavaScript developer has to deal with in one way or another, but it can be a bit confusing to understand at first. 🤷‍♀️

3. [Apps prototyped in JAMstack pattern](https://appseed.us/apps/jamstack)

    Code your next web application on top of boilerplate apps built in JAMstack pattern. All apps (open-source or paid) includes tools, documentation and free Email support. 🤩

4. [Angular: Allow Users Retry Failed Requests With A Twitter-Like Try Again Button](https://www.leonelngande.com/angular-allow-users-retry-failed-requests-with-a-twitter-like-try-again-button/)

    While using the Twitter web app, I noticed it displays a Try Again button for failed requests in different sections of the user interface. This allows the user to retry each failed request without affecting the rest of the application, quite neat. 🔁

5. [Checking a Web Page for Dead Links](https://nikoheikkila.fi/blog/checking-a-web-page-for-dead-links/)

    There is no content on the web that is immune to rotting and growing moss. Blog posts start festering with old dead links pointing to nowhere, and images blank out when a server hosting them goes away. The cure is to periodically check for any dead content. 🔗
Using localStorage API - Good idea? Bad idea? Thoughts?
Tags: javascript, localstorage, goodorbadidea
Published: 2019-11-26 19:05:02

---
title: Using localStorage API - Good idea? Bad idea? Thoughts?
published: true
description: 
tags: javascript, localStorage, good or bad idea,
cover_image: https://thepracticaldev.s3.amazonaws.com/i/wmgeldt60ksad4xi5718.png
---

I've been playing around w/ the idea of using the browser localStorage API instead of a backend/database (for lightweight apps ). Here's a basic todo app made with Vuejs and the localStorage API.

[Todo with localStorage](https://github.com/DewofyourYouth/vue-localStorage-todo)

Has anyone done this? Good idea? Bad idea? Thoughts?

[demo page](https://dewofyouryouth.github.io/vue-localStorage-todo/)
I made an Emoji Maker using React (DOM) and SVG 🤓
Tags: react, showdev, javascript, webdev
Published: 2019-11-26 19:00:00

This weekend, I wanted to make something creative so I made an Emoji Maker using React, ReactDOM, and SVG. I built it with Gatsby too, which allowed me to make a Progressive Web App in no time 😁.

![Emoji Maker demo by Jamstack Studio](https://thepracticaldev.s3.amazonaws.com/i/aipvjnubdb0dc9jj3169.png)

Contrary to other bots or (deprecated) emoji generators, this one can generate an SVG version, which is really helpful in case you want to include it in another design or you want to customize it even further.

![Download emoji demo](https://thepracticaldev.s3.amazonaws.com/i/cin6z8229jxc7ejdbqf4.png)

Some features, such as changing the position of elements and changing their colors, are still missing. However, they are mostly complete and I just need to add a UI component 😊.

Check out the app at https://jamstack.studio/emoji
Skeuomorphic Buttons (Realistic 3D effect)
Tags: ux, codepen, css, design
Published: 2019-11-26 18:38:44

<p>Skeuomorphism was used on the earlier iPhones and was made popular by it as well for UI design. It got mostly deprecated by flat design, as skeuomorphic elements are harder to create, maintain and scale across different platforms. You will notice, that the style doesn't work out nicely when you change a single color like the background. Play with it, learn what happens and how it is done, but I would not recommend to use it on your website / app. It's 2020 anyway and skeuomorphism is still out, otherwise you should at least wait a couple of years til it's considered vintage, retro and trendy again 💁</p>

<p>Designed for: <a href="https://rgb.wiki/button" target="_blank">https://rgb.wiki/button</a></p>

{% codepen https://codepen.io/jouanmarcel/pen/RwweKqb %}
Arithmetic Operators
Tags: javascript, webdev, tutorial, beginners
Published: 2019-11-26 18:29:47

Arithmetic operators are the easiest for new developers to understand, they relate to basic mathematics operations. There are five main arithmetic operators; addition, subtraction, multiplication, division, and modulus. These operations are used to manipulate the value of number variables, both integer and float data types. You can use these operators with variables or with plain numbers that are not stored within a variable.

## Addition and Subtraction

In addition, using the plus symbol '+' adds two numbers together. subtraction, using the hyphen symbol '-' subtracts one number from another. 
The below code examples show how these two operations work. 

In regards to the below code, variable 'c' evaluates to the value 9 and variable 'd' evaluates to the number 3.

```javascript
var a = 3;
var b = 6;
var c = a + b;
var d = b - a;
```

## Multiplication and Division

Multiplication and division do the exact same thing as they do in normal mathematics, multiply and divide two numbers or more numbers. To multiply numbers together the asterisk '*' symbol is used, to divide numbers the forward-slash '/' symbol is used. The below code snippets show how these two operators are used.

In regards to the below code, variable 'c' evaluates to the value 12 and the variable 'd' evaluates to the number 3.

```javascript
var a = 2;
var b = 6;
var c = a * b;
var d = b / a;
```

## Modulus

The modulus operator returns the remainder after a division operation. 13 modulus 3 will return 1, this is because 13 divides by three is 3 is 4 remainder 1. The percentage symbol '%' is used to run a modulus operation on two numbers.

In regards to the below code, variable 'a' evaluates to the number 1.

```javascript
var a = 13 % 1;
```

## Multiple Operations

Just like in normal mathematics, we can use multiple operations in one equation and brackets to separate parts of the equation, as shown in the code snippet below. The variable 'a' in the below code snippet evaluates to the value 14.

```javascript
var a = (3 * 4) + (12 / 6);
```

## Addition Concatenation

Some programming languages allow us to use the addition operator to combine, or concatenate, string variables together. Concatenation is when one or more string variables are put onto the end of another string variable.

Within the below code snippet the variable 'c' evaluates the string value "Hello world". Note the use of a space in variable 'a', string concatenation does not add a space between strings for you.

```javascript
var a = "hello ";
var b = "world";
var c = a + b;
```

This article was originally posted on my website: https://acroynon.com/
React Awesome Reveal
Tags: react, webdev, css, javascript
Published: 2019-11-26 18:26:32

Hi all, I am writing [react-awesome-reveal](https://github.com/dennismorello/react-awesome-reveal), a React library to animate elements when they appear in the browser viewport. It uses the Intersection Observer API and CSS Animations to be buttery smooth 🚀

Let me know what you think!
Feature Flags in Action - Building SaaS #16
Tags: python, django, saas
Published: 2019-11-26 18:04:51

{% youtube llfekDn53H0 %}

In this episode, we used the feature flag system covered last time to add a new feature!  We saw how feature flags make sure that your users don't see your feature until you're ready.

Show notes for this stream are at [Episode 16 Show Notes](https://www.mattlayman.com/building-saas/feature-flags-in-action/).

To learn more about the stream, please check out [Building SaaS with Python and Django](https://www.mattlayman.com/building-saas/).
Answer:
Published: 2019-11-26 17:58:09

---
title: Answer: 
published: true
---

{% stackoverflow 44661513 %}
This is precisely what I hate about python.
They reduce 2 loc with a nk loc lib that you have to import , which does the same thing " under the hood" as those 2 loc , you don't have to write now. Bulk doesn't lead to elegance of logic. Yes it lets you prototype without seeing how and it may be a commercial strength, but is that always a good thing?
LoadingController example showing “Loading…” message
Tags: ionic
Published: 2021-06-25 14:25:49

---
title: LoadingController example showing “Loading…” message
published: true
date: 2019-11-26 15:16:40 UTC
tags: Ionic
canonical_url: 
---

For longer running operations (e.g., data requests) it might be nice to show the user that you are loading their data or performing a long running action. For this we will use the LoadingController to show a simple message while we are retrieving a list of nearby shows from our service.

```
import { LoadingController } from '@ionic/angular';

constructor(private loadingCtrl: LoadingController, 
            private showsService: ShowsService) { }

updateShows() {
    this.loadingCtrl.create({ message: 'Loading shows...' }).
      then((res) => {
        res.present();
        this.showsService.getShows()
          .subscribe((data: any) => {
            this.shows = data;
            res.dismiss();
        });
      });
  }

```

In your constructor, be sure to inject the LoadingController.

_Note: The method **updateShows()** is actually called during a different point in my code, but where/when is not important to this example._

If the service call is really fast then the “Loading” message may not appear at all. When it does show up, here is what it looks like.

<video id="video-153-1" width="416" height="734" loop="1" autoplay="1" preload="auto" controls="controls"><source type="video/mp4" src="http://www.jarodms.com/wp-content/uploads/2019/11/Loading-Shows.mp4?_=1"></source><a href="http://www.jarodms.com/wp-content/uploads/2019/11/Loading-Shows.mp4">http://www.jarodms.com/wp-content/uploads/2019/11/Loading-Shows.mp4</a></video>

This is a really basic example. There are a few options for setting the loading indicator and more information for that can be found in the Ionic documentation: [https://ionicframework.com/docs/api/loading](https://ionicframework.com/docs/api/loading)

 

The post [LoadingController example showing “Loading…” message](http://www.jarodms.com/2019/11/26/loadingcontroller-example-showing-loading-message/) appeared first on [JarodMS](http://www.jarodms.com).