teleren/devto huggingface dataset:
Web.dev
Tags: testing, beginners, seo
Published: 2019-04-16 12:57:23

Original article in French on [my blog](https://lucasalt.fr/blog/webdev/), translated with [Deepl](https://www.deepl.com/translator)

Developed by Google and fully open-source, [web.dev](https://web.dev) allows you to discover how to optimize your sites to make them faster and more user-friendly. You are also allowed to audit your sites to know where they are not performing.

To improve your sites, [web.dev](https://web.dev) includes tutorials and tips in six different categories:

- **Fast load times:** A series of tutorials explaining how to improve the loading speed of your site,
- **Network resilience:** A series of tutorials explaining how to provide the same speed of service around the world,
- **Safe and secure:** Explains how to simply secure your site to prevent data theft,
- **Easily discoverable:** Small tutorials explaining how to improve your site's SEO,
- **Installable:** A short tutorial explaining how to create a PWA (Progressive Web App)
- **Accessible to all:** A series of tutorials explaining how to make your site accessible to everyone (colour contrast, text size, etc.).

The results of the audits are presented in four main categories:

- **Performance:** Allows you to know what needs to be modified to speed up the loading of your site such as calling more CSS than necessary.
- **Accessibility:** gives you advice on how to optimize your page. For example, the lack of alt attributes on your images or colors that do not have a very high contrast.
- **Good practice:** allows you to know whether or not you comply with certain basic rules such as the correct dimensioning of images (no stretched images).
- **SEO:** gives you advice to make your site better referenced on search engines.

For the moment, my site is not doing too badly. All that remains is to improve accessibility and optimize a few files and everything will be fine 😉.

![](https://thepracticaldev.s3.amazonaws.com/i/awmxtn159om6ic6htx8q.png)
Feedback Requested
Published: 2019-04-16 10:26:31

---
title: Feedback Requested
published: true
description: Possible next uses for this demo site
tags: 
---
Hi!
Although i joined dev.to almost a year ago this is my first post.
I also have never published any of my own work on the web, nor have i solicited feedback from a forum for a project.

A lot of firsts for me today. 

Last fall near where i live there was a call for Artists proposals for a local festival called Blink. It's an inter-active light festival that runs for three nights in a city near where i live. I attended the last festival (2017) and was very impressed, the life sized lite-bright installation was super cool. [Here's a link to the festival](https://www.blinkcincinnati.com/welcome)

Being interested in participating, i put together a proposal to use AI based text interpretation to provide the participants of the festival a way to project an image of their own. 

The concept seems pretty straight forward: use a webservice to interact with festival attendees to capture their experience and translate that experience into an image using AI based text analysis tools. The user would then have several images to choose from, pick one and it would be projected onto the side of building for a period of time. I chose to use unsplash api for the image service.

Alas, the proposal was not accepted and now i have a demo site running that i'm not sure what to do with. I did not get to fully develop the AI features on the site. i had a lot of work to do there, mostly centered around developing the functions to deal with selecting the relevancy score of an image.

The site was developed using node, express for the backend and Vue & Quasar for the front end. This may become the subject of another post(i'm not sure if i can be that brave). I have a leftover domain from another abandoned project that i recycled for the purposes of the application, you view the site here: [https://mshrwb.com](https://mshrwb.com). 

This is such a bare bones start to a project, that had a really unique purpose that i cant consider it from a different view point anymore. Any feedback would be considered helpful.

Respectfully,
jbeetz
Implementing Backward and Forward buttons of Browser in JavaScript
Tags: stack, datastructure, generalprogramming
Published: 2019-04-16 10:39:38

---
title: Implementing Backward and Forward buttons of Browser in JavaScript
published: true
description: Backward and Forward buttons of Browser in JavaScript with two stacks
tags: stack, data-structure, general-programming
---


I have been thinking about the real-time example of **stack data structure** and found [this question](https://stackoverflow.com/questions/1313788/how-does-the-back-button-in-a-web-browser-work) on StackOverflow.

> A history of pages viewed is kept in a stack-like form

And I implemented the same on JavaScript. It took me like 30 minutes to do it

I have two stacks **Forward Stack, Backward Stack** and one variable to hold current state.

```
this.forwardStack = [];
this.backwardStack = [];
this.currentURL = '';
``` 

#### Problem solution

- When user visit URL Second time pushes the current URL into Backward State.
- If Backward button clicked push Current URL into Forward Stack and pop the last URL from backward Stack and set as Current State
- If Forward button clicked push Current URL into Backward Stack and pop the last URL from Forward Stack and set as Current State


I chunked the problem into 3 tasks such as,

- Add New URL
- Go Backward
- Go Forward

##### Add New URL

```
addNewURL(url) {
    if (this.currentURL) {
        this.backwardStack.push(this.currentURL);
    }
    this.currentURL = url;
}
```

If User visits URL for the First time then Add it to **CurrentURL**, If second URL comes in then push the current URL into Backward Stack and replace the Current URL.


##### Go Backward


```
goBackward() {
    if (!this.backwardStack.length) {
        return;
    }

    this.forwardStack.push(this.currentURL);
    this.currentURL = this.backwardStack.pop();
}
``` 

On clicking Backward button push current URL into Forward Stack and pop the last URL From Backward Stack and make it as currentURL and If the stack is empty then just return.

##### Go Forward


```
goForward() {
    if (!this.forwardStack.length) {
        return;
    }

    this.backwardStack.push(this.currentURL);
    this.currentURL = this.forwardStack.pop();
}
``` 

On clicking Forward button push current URL into Backward Stack and pop the last URL From Forward Stack and make it as currentURL and If the stack is empty then just return.

Hurray!

That's it we have implemented Browser's Backward and Forward buttons in JavaScript.

I wrote a test case also for this.


![Navigation Stack.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1555409385757/CWv73o8JP.png)


Here is  [Github Repo ](https://github.com/thamaraiselvam/NavigationStack) for full source code.


This post published on [Hashnode Story](https://hashnode.com/post/implementing-backward-and-forward-buttons-of-browser-in-javascript-cjujn789z001cnrs1yyc2q06w), I love to hear your feedback and do not forget to correct me if I am wrong anywhere.
How to Revamp Website successfully?
Published: 2019-04-16 07:36:49

---
title: How to Revamp Website successfully?
published: true
description: Your website is the most important element of your digital and overall presence. Make sure you use it to communicate your key elements to your audience effectively.
tags: 
---

They are not wrong when they say “First Impression is the Last Impression”. An average user decides in the first 8 seconds if they want to explore the website further. 

Follow these steps to Revamp Website successfully 2019:
1. Always begin with the “Why”
2. Content will always be the King, but the presentation is the Queen
3. Have wire frames in Place.
4. Get every thing right before going Live?
5. Always Keeping improving UI!

[Read more](https://www.innoraft.com/blogs/5-step-guide-successfully-launch-website-revamp-2019)
AKS and Application Gateway: Expose more than one service in an ingress resource
Tags: aks, applicationgateway, waf, ingress
Published: 2019-06-04 19:51:57

---
title: AKS and Application Gateway: Expose more than one service in an ingress resource
published: true
tags: aks,applicationgateway,waf,ingress
canonical_url: https://carlos.mendible.com/2019/04/16/aks-application-gateway-expose-more-than-one-service-in-a-ingress-resource/
---

If you install the Azure Aplication Gateway Ingress Controller for your AKS clusters you may want to expose more than one service through the same Public IP just changing the url path. In order to make this work you must use the [backend-path-prefix](https://github.com/Azure/application-gateway-kubernetes-ingress/blob/master/docs/annotations.md#backend-path-prefix) annotation.

In the following sample I create an ingress with the following behavior:

1. Calls to **http://[Waf Pulic IP or DNS]/inventory** are sent to the **inventory** service
2. Calls to **http://[Waf Pulic IP or DNS]/orders** are sent to the **orders** service

```
---
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: backend-ingress
  annotations:
    # Service are serving content in this path.
    appgw.ingress.kubernetes.io/backend-path-prefix: "/"
    kubernetes.io/ingress.class: azure/application-gateway
spec:
  rules:
  - http:
      paths:
      - path: /inventory/*
        backend:
          serviceName: inventory
          servicePort: 80
      - path: /orders/*
        backend:
          serviceName: orders
          servicePort: 80
```

Note that the **appgw.ingress.kubernetes.io/backend-path-prefix** value is set to: **/** which means that the paths specified in the rules are rewritten to this value qhen sent to your services.

Hope it helps.
npx, at you command
Tags: node, npx, javascript
Published: 2019-04-16 05:42:15

---
title: npx, at you command
published: true
description: Some things you can do with just NPX - and a command
tags: node, npx, javascript
---

Since version 5.2 of npm (released almost 2 years ago) you also received the command `npx`.

With `npx` you can run the binaries for your project dependencies (like `npx webpack` or `npx jest`).

But you can also run any command from any package available on npm!
Here are some of my favorites!

```bash
npx http-server
```
Starts a webserver in the current folder. Great if you want to test something really quick.

```
npx create-react-app my-app
```
Use create-react-app without the need to first install it globally. Just run `npx`.

```bash
npx shx touch file # Create a file
npx shx mkdir folder # Create a folder
```
The `shx` command lets you run shell commands, cross-platform! Great if you want to share command snippets that both Mac and Windows users might use.

```bash
npx sort-package-json
```
Sorts the keys in your package.json (if there is a package.json in the current directory).

```bash
npx speed-test
```
Test your internet connection
```bash
npx typescript index.ts --out index.js
```
If you want to check the result when TypeScript transforms a .ts file to a .js.
Notice, this is probably for more simple files and mostly if you want to investigate how it works, since you don't use an config file.

```bash
npx terser index.js > index.min.js
```
Minify a Javascript file.

```bash
npx ntl
```
Gives you an interactive list of available NPM scripts (if you are in a folder with an package.json).

```bash
npx puppeteer-cli print https://itiden.se page.pdf
npx puppeteer-cli screenshot https://itiden.se page.png
```
Create an PDF or screenshot from an URL. Notice that Chromium is downloaded when this command i run which makes it quite slow. But might come in handy if you quickly want an PDF or screenshot of an webpage!


And, if you'd like, you can set up your own "card" to display in the terminal. See:
https://dev.to/wuz/setting-up-a-npx-username-card-1pip

So...
```bash
npx andreasbergqvist
```


Feel free to comment on more commands that might come in handy!
Build 360-view images with a JS plugin
Tags: javascript, imagecdn, digitalasset, imageoptimization
Published: 2019-04-16 05:09:59

---
title: Build 360-view images with a JS plugin
published: true
description: We just released an open source project which allows to build 360 spinning images and do a high-quality product demo: https://github.com/scaleflex/js-cloudimage-360-view
tags: javascript, imagecdn, digital asset, imageoptimization
---
We just released an open source project which allows to build 360 spinning images and do a high-quality product demo: https://github.com/scaleflex/js-cloudimage-360-view
React Native PDF Reader or Viewer Example
Tags: reactnative, android, ios, webdev
Published: 2019-04-16 04:39:46

---
title: React Native PDF Reader or Viewer Example
published: true
description: React Native PDF Reader or Viewer Example
tags: #reactnative #android #ios #webdev
---

Source  : <a href="https://www.skptricks.com/2019/04/react-native-pdf-reader-or-viewer-example.html" >React Native PDF Reader or Viewer Example </a>

This tutorial explains how to build PDF viewer in react native application. Sometime developers needs to display PDF files in their mobile application, in that case they can follow this article to create simple PDF viewer and they can customize it as well. For creating PDF reader we are going to use rn-pdf-reader-js library in this react native project.

<img src="https://2.bp.blogspot.com/-pDZUne2pZD0/XLVWwYWDwBI/AAAAAAAACrk/3jj_vEgvnRowhXxDciZJnNRqPJr3Ie6OgCLcBGAs/s640/pdf.jpg" />

<a href="https://www.skptricks.com/2019/04/react-native-pdf-reader-or-viewer-example.html" >Continue Reading... </a>
React Native Swiper Slider Layout Example
Tags: reactnative, android, ios, webdev
Published: 2019-04-16 04:37:31

---
title: React Native Swiper Slider Layout Example
published: true
description: React Native Swiper Slider Layout Example
tags: #reactnative #android #ios #webdev
---

Source : <a href="https://www.skptricks.com/2019/04/react-native-swiper-slider-layout-example.html" >React Native Swiper Slider Layout Example </a>

This tutorial explains how to create simple swiper slider layout in react native application. Now a days this kind of swiper slider layout design used by most of the android or ios mobile application. If you own a smartphone, you already know what a gesture is. Gestures are those subtle motions to trigger interactions between the touch screen and the user. Generally, it lasts for the time between the first touch on the screen to the point when the finger leaves the surface. Using this Swiper layout design we can switch back and froth between previous and next page of your mobile application.

<a href="https://www.skptricks.com/2019/04/react-native-swiper-slider-layout-example.html" >React Native Swiper Slider Layout Example </a>

<img src="https://1.bp.blogspot.com/-Ao9wK_aBEoo/XLMzIEXLztI/AAAAAAAACrM/W6WzDfSt560lG24BtbCymDCjeWMS3BG6gCLcBGAs/s1600/slider.jpg" />

<a href="https://www.skptricks.com/2019/04/react-native-swiper-slider-layout-example.html" > Continue Reading... </a>
LWC  – Experimental Decorators Error
Tags: video, lwc, salesforce
Published: 2019-07-22 13:48:46

---
title: LWC  – Experimental Decorators Error
published: true
tags: video,LWC,Salesforce
canonical_url: https://wipdeveloper.com/lwc-experimental-decorators-error/
series: Lighting Web Components - First Look
---

{% youtube aDTibiYKKBo %}

Hello, I’m Brett with WIPDeveloper.com.

The other day while working on Lightning Web Component, I noticed that in Visual Studio Code, I was getting an error when I was using the wire decorator, and the error says “experimental support for decorators is a feature that is subject to change in future releases set experimental decorator options to remove this warning.”

Now, I hadn’t changed anything, looking at the sample apps and the Salesforce GitHub repo.

There’s no explanation for where this came from or what change occurred. I think it might be because I am using Visual Studio Code Insiders Edition. And one of the updates started using TypeScript because if you look at the end of the message, it says TS and then parentheses 1219. So I think it’s using a TypeScript check for whether or not the experimental decorators are used.

And so the work around, because I can, I can still deploy this. So I need to work around so that I can get rid of the red squiggly lines because I don’t like red squiggly lines.

So what I did was I created a Ts config file.

And in it it has compiler options and those options are experimental decorators is true and allow JS is true.

#### tsconfig.json

```
{
    "compilerOptions": {
        "experimentalDecorators": true,
        "allowJs": true
    }
}
```

Whether or not you need the allow JS, I don’t know. But that was the example I found on the internet and it is working for me and it gets rid of the red squiggly lines.

Now this is mostly a convenience thing since I was able to deploy but if you’d like to see whether or not you have any problems by just looking at the prop problems tab header, this will help clear that up as you see if we don’t have the TS config.

We are we are always going to see that we have one problem.

If you have multiple lining web components that have multiple decorators and use, you could easily lose track of whether or not it’s a problem or whether or not it’s the editor not recognizing the proper recognizing that it’s a proper use of a decorator.

## That’s it for now.

Remember to sign up for **[The Weekly Stand-Up!](https://wipdeveloper.com/newsletter/)**  and you can get updated with any new information we have on WIPDeveloper.com.

The post [LWC – Experimental Decorators Error](https://wipdeveloper.com/lwc-experimental-decorators-error/) appeared first on [WIPDeveloper.com](https://wipdeveloper.com).
I love i love.
Tags: venezuela, code, javascript
Published: 2019-04-16 02:39:18

---
title: I love i love.
published: true
description: tambien hablo español
tags: venezuela, code, javascript
---

helloooo, i am new user. follow me. talk to me. :)
espero encontrar compañeros para divertirme escribiendo codigo.

tengo ciertas dudas con respecto al modo de operar los trabajos en javascript, existe algo mas alla de funciones prototype para manejar herencia y llamadas de eventos en javascript. / I have some doubts about how to operate javascript jobs, there is something beyond prototype functions to handle inheritance and call events in javascript.

<3
Should you include in-progress bootcamps on your resume?
Tags: career, resume, advice
Published: 2019-04-16 02:33:12

---
title: Should you include in-progress bootcamps on your resume?
published: true
description: The dreaded education section. What _should_ be included?
tags: career, resume, advice
---

![Two people at a computer](https://thepracticaldev.s3.amazonaws.com/i/cyl984sbe03g9plsr12t.jpg)


Recently, I had gotten feedback that my resume and cover letter did not quite match up. Neither seemed to talk enough about the coding bootcamp that I had listed in my education section. 

In reviewing my resume again, I realize I boot the name of the bootcamp, the year, but I didn't specify that I was starting it in May 2019.

Which has me thinking. _Should_ you list in-progress—or in my case, soon to be started—bootcamps when applying for developer roles? Why or why not?

Thinking aloud, mentioning that you are enrolling in a bootcamp may set you apart from other candidates. At the same time, what if it detracts and makes the hiring manager think you might be too distracted to balance a full-time job in addition to a bootcamp.

What are your thoughts?

_Photo by [NESA by Makers](https://unsplash.com/photos/IgUR1iX0mqM) on Unsplash_
The Building an Indie Business Podcast- Quora as a marketing channel
Tags: podcast, startup
Published: 2019-04-16 02:08:46

---
title: The Building an Indie Business Podcast- Quora as a marketing channel
published: true
description: 
tags: podcast,startup 
---
https://overcast.fm/+RG5i1Pnjg

[Episode Page](https://baib-podcast.com)
[Revenue Research](https://revenueresearch.co/)
The Most Important Task For Every OSS Maintainer
Tags: opensource
Published: 2019-04-16 01:32:49

---
title: The Most Important Task For Every OSS Maintainer
published: true
description: 
tags: 
  - oss
---

Is to release the library whenever new feature or bugfix is merged into the master.

More descriptively, on modern development environment OSS is generally hosted on the Github.  If so, they are likely to be adopting (explicitly or implicitly) [the development flow of Github flow](https://guides.github.com/introduction/flow/).  In this style of development, every commit against master branch is a release candidate.  Since it is a release candidate, it can always be released as `pre-release` version, if the versioning system adopted by the language library ecosystem supports [Semantic Versioning](https://semver.org/#spec-item-10).

When the library maintainer keep publishing whatever is merged into `master`, what the library user need to do is to manage libraries systematically according to their needs.  Since Semantic Versioning defines linear ordering against every released version, one can expect the library managing tool (e.g. `npm`, `gem`) of each language to do those management well.  On the other hand, when some feature/bugfix is merged into develop but not yet released, the library user generally need to handle "the source location to fetch specific library" (e.g. git url along with branch/tag/ref).  Since all the other libraries specify their dependency by some constraints against the released version, that means the library user would have now manage `versioning` and `source location` for that library.  I believe it is something that no library user wants.

I know that to maintain OSS, there many other tasks too.  But releasing operation can be simply done if release policy is made.  For example, just release every new master commit as new major/minor/patch release depending on the content of the commit made; major release if breaking changes, minor release if new feature, patch release if bug fix, do them as pre-release if you are not certain the commit won't break anything.  If such policy is made, then what the maintainer needs to do can be made into just a single command, by automating the deploy procedure.  By doing this, it can bring benefit to all the users of that library, IMHO...   So, I sincerely hope every OSS maintainer kindly publishes their fabulous libraries regularly.
How to Convert Sketch design to UI with Angular/React framework
Tags: angular, adobexd, sketch
Published: 2019-04-16 02:03:10

---
title: How to Convert Sketch design to UI with Angular/React framework
published: true

description: How do I convert a design made out of Sketch/Adobe XD to a UI design with Angular/React framework? Is there any plugin/tool to convert them or by building it from scratch? Suggestions please.

tags: Angular, AdobeXD, Sketch
---
Getting Loopy with JavaScript
Tags: javascript, loops, exploration, beginners
Published: 2019-04-16 01:59:04

---
title: Getting Loopy with JavaScript
published: true
description: Five ways to loop 5 times in JavaScript
tags: JavaScript, Loops, Exploration, Beginners
canonical_url: https://blog.dallasreedy.com/getting-loopy-with-js/
cover_image: https://images.unsplash.com/photo-1496364978581-fdea9776f3be?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1000&h=420&fit=crop&ixid=eyJhcHBfaWQiOjExNzczfQ
---

Here are five ways you can loop 5 times in JavaScript and do something with a different value each time through the loop:

```javascript
/* totally manual with a while loop */
let i = 0;
while (i < 5) {
  console.log(`Hello, ${i}!`);
  i++;
};

/* classic for loop */
for (let j = 0; j < 5; j++) {
  console.log(`Hello there, ${j}!`);
}

/* new-age for...of loop */
for (let k of [0, 1, 2, 3, 4]) {
  console.log(`Hello once more, ${k}!`);
}

/* using forEach with manually filled array */
[0, 1, 2, 3, 4].forEach(
  l => console.log(`Hello again, ${l}!`)
);

/* auto-fill an array of length 5 and use indices */
Array(5).fill().forEach(
  (_,m) => console.log(`Hello one last time, ${m}!`)
);
```

What other ways can we loop a specific number of times in JavaScript?

Warm regards,
Dallas