teleren/devto huggingface dataset:
Why Shopify UX Analytics

Published: 2021-07-22 11:02:34

Surveys, questionnaires, interviews, observation of focus groups, contextual research - all this is done to improve the quality of user experience with the product.

Shopify's UX analytics goal is to create an intuitive target audience and an easy-to-use product.

UX analytics can show:

• how many visitors do not become registered users, how many customers fly out of the cart, and how many leave the product pages;

• how users actually behave with the product and what real problems they have;

• how to reduce the amount of work done by designers, save time and money.

You might think that with the connection of analytics, your project runs the risk of losing face and becoming typical: the "basket" will always be in the upper right corner, and the main menu is always higher than the footer. With the right use of tools, analytics for each product helps to find its own unique ways of development and implementation.

Even if the product is already communicating with real users, you should not consider it as the "final version". Connecting analytics is useful at any stage of development. With its help, you can create an amazing product with optimal cost of resources.

A / B testing

After the first prototypes to analyze the solutions of competitors, A / B testing is carried out. Before starting testing, they define a specific goal, take several design options with minimal differences and offer them to potential users.

During testing https://www.makebecool.com/services/shopify-optimization  user behavior is recorded in detail. After a certain amount of time or when a statistically significant number of impressions are reached, the goal scores are compared and the appropriate page variation is determined. The advantage of the method is the use of objective data.
Debugging JavaScript, DOM, CSS and accessing the browser console without leaving Visual Studio Code
Tags: visualstudiocode, debugging, browsers
Published: 2021-07-22 10:58:27

---
title: Debugging JavaScript, DOM, CSS and accessing the browser console without leaving Visual Studio Code
published: true
description: With the new in-built JavaScript debugger, you can easily do all the tasks needed to debug in the browser without leaving VS Code.
tags: VisualStudioCode, debugging, browsers
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1zvelrdci8thywvfr4l.png
---
Now that [Visual Studio Code](https://code.visualstudio.com) has an in-built JavaScript debugger, it has become incredibly convenient to debug your project without leaving the editor. You can debug JavaScript, tweak CSS and the DOM and interact with the browser Console right inside VS Code. And you don't need to know which extensions to install as the editor guides you along the way. 

Under the hood, this uses the [JS Debugger](https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug) and the [Edge Tools for VS Code](https://aka.ms/devtools-for-code extensions). Here's what the flow looks like:

{% youtube UqFOICZRPAo %}

If you haven't got the Edge Tools extension installed, VS Code will prompt you to do so the first time, as shown in this screencast:

{% youtube 1-6fRdqyoA0 %}

In addition to breakpoint, DOM and CSS debugging, Visual Studio Code's Debug Console now also is the same [Console](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/console/) you normally get in the browser. You can access the window object of the browser instance and use all the [Console Utilty Methods](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/console/utilities) like `$` and `$$`. 

{% youtube IF69nJ7El2Y %}

To run the debugger automatically on your project, you need to create a `launch.json` file and define the debugger as the launch type. The Edge Tools extension can also do that automatically for you. If your application is not on `localhost:8080` you need to tweak the `url` parameter.

```javascript
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-msedge",
            "request": "launch",
            "name": "Launch Edge against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}
```
If you want to see this in action, you can [download/fork the demo to-do app](https://github.com/codepo8/simple-to-do) I used in the screencasts. 

What do you think? Anything you're still missing in that workflow? [File an issue on GitHub](https://github.com/microsoft/vscode-edge-devtools/issues) and tell us about it!
Road To An Internship - Moving On [1/3]
Tags: javascript, reactnative, github, adventofcode
Published: 2021-07-22 10:52:47

Hey! 

This is the second part of my Road To An Internship series, last time we left off right as I was finishing my pet project [Omnifoods](https://aacevski.github.io/Omnifoods/). It was a simple website with some jQuery mixed with it, however a very important lesson for me to learn! I've had more concrete knowledge on responsiveness. 

### Moving On 👉

The last project was quite crucial and as a developer, I suggest everyone starting from the very basics. This way you can learn a lot more, even if you feel confident - you can always learn more! However I was far from my final goal. I started reading up on API's and started watching YouTube videos to better improve my knowledge. Some videos that helped me a lot are the following: 
-  [Build A Weather App With JavaScript ](https://www.youtube.com/watch?v=f__x1VofV2Q)
-  [APIs for Beginners - How to use an API ](https://www.youtube.com/watch?v=GZvSYJDk-us)
- [Intro to APIs ](https://www.youtube.com/watch?v=iFMLyMgCUTs)

Like before, I wanted to start another project, that's the best way for me to learn. I've always wanted to make a Disord bot but not just any Discord bot - I've had in mind to use an API provided by Riot Games for one of their games called Teamfight Tactics. The main goal for this project was to make it display statistics about the username entered, this way I could learn more about HTTP requests and on top of that, I would improve my knowledge with Node.js and Javascript! Here's the API I've  [used](https://developer.riotgames.com/).

After countless of hours, days and a lot of coffees, I finished  [River Sprite](https://github.com/aacevski/River-Sprite) , that was the name I went for when naming the Discord bot. I must admit - it's quite a messy code, I know it's good practice to always have clean code but the knowledge I acquired was priceless. I've decided to use the original code I had, for everyone that is starting and is interested - I hope it motivates you to start off project

### In the next chapter... 👾
Next time I'll be talking more about my "Silent Period" - where I focused mostly on React and I'll have a segment on how to avoid burnouts.
Why I don't use PyCharm as my python editor.
Tags: python
Published: 2021-07-22 10:38:36

I use python as my main language, and PyCharm is a very popular python editor. But I don't use PyCharm, as my python editor. I use VsCode for my main editor. I have tired PyCharm time and time again. But always found myself going back to VsCode.

# Why use PyCharm 
- PyCharm was built for python developers in mind.
- Better debugging tools for python. 
- It has many in-built features for python.
- Has in-built autocomplete.

# Why I don't use PyCharm

- I use multiple languages such as JavaSciprt or Golang or Rust and many more with Python. PyCharm does not fully support other programming languages. 

- VsCode has a larger community as all developers can use VsCode be it Full Stack, Application Developers, ML/AI Developers, Front End developers, etc. Can all use VsCode. Which is why you can search up any query and you are most likely to get an answer for you question.

- In VsCode you get features such as an in-built Jupyter notebook which you can't get in PyCharm without a paid licences.

- VSCode has a bigger library of plugins. I have used many different plugins which have really helped me write code faster. PyCharm does not have a huge library of plugins like VsCode. There might be some alternatives to the ones that I use on VsCode.
Windows 11, but for Web
Tags: react, css, showdev, javascript
Published: 2021-07-22 09:47:24

Hello! 

Recently I started creating a clone of Windows 11 for web in Preact. My main focus while creating this clone was performance. It must work smoothly even on a low end device (like mine).

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

The UI isn't complete yet. I'll be working on it in my free time. My focus while creating this is maintainability and Performance. Anyone with a basic level react knowledge should easily understand the code.

Here's the stack I used:-
- Preact (For smooth runtime performance)
- ViteJS (For smooth development performance)
- CSS modules (I know frameworks would have been better. But I wanted some control and Performance Babe!)
 - TypeScript (Obviously :)

Try it out here -> [Windows 11 Web](https://win11.vercel.app)

I'll recommend you to contribute or atleast check the code. You'll learn something :)
{% github PiyushSuthar/Windows-11-Web %}

### Demo
![Light Mode Start Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9f8wowzy388tsvjss1p.png)
Start Menu (Light Mode)
![Dark Mode Start Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yzniqgprl9gl95luick.png)
Start menu (Dark Mode)

![Widget Light Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgwmu0cc8v9ogde6ml2k.png)
Widget (Light Mode)
![Widget Dark Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ot1g5tf27ocl4a0yi0x6.png)
Widget (Dark mode)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rn2bqanqchk9w204oywo.png)
 Windows (Light Mode)

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

### End
You can follow me on twitter to follow the progress [@piyushsthr](https://twitter.com/piyushsthr).
Quick Message Application Using Flask
Tags: whatsapp, telegram, flask, python
Published: 2021-07-22 09:25:55

As Whats App released What's App Payment in its new Update, people often have to save the number to their contact list. Even if people want to send a single message or want privacy, they have to save the number.
To overcome all this problem, here is an application that can be used directly to send what's app message without saving the number in your contact list.


### New Update 💯(5th August 2021):
1. Added Quick Viber and Line message service. Just give the profile name of the user and it takes you directly to Line. And for Viber, give the users phone number with country code `(without +)`


### Last Update 12th December 2020):
1. Added Quick Telegram message service. Just give the profile name of the user and it takes you directly to telegram.

### Upcoming update
1. Signal Quick messaging
2. WeChat Quick messaging


Access the Application 👇👇
[Quick Chat](https://quick-message.herokuapp.com/)
___


**Please do use it on your mobile devices. And also add the page to your home screen for easy access
Updates coming soon!!!**
Heatwave & Brexit - WEEK 10
Tags: javascript, codenewbie, beginners, react
Published: 2021-07-22 09:25:42

The second week in Frontend exposed the concepts of Data-fetching, styling, routers, react context API and optimistic rendering. All concepts that are completely new to me and will take a little time to understand and implement. 

It was the usual drill this week, pair programming to prep ourselves with the solo front end project, next week. The fear of that was looming over me all week, not to mention the project phase was something everyone was anxious about. I had to keep reminding myself to take one step at a time.

This week flew by without me even realising. House renovations were at a stand still. Thank you Brexit ! No windows, no frames, no builders, no work. 

Also the uninvited heatwave hit and studying in 30 degrees heat is no fun.
git rebase remaining
Tags: git
Published: 2021-07-22 09:13:39

During rebase we sometimes face conflict files that need to resolve and continue one by one.

but how do we know where we are and how many steps need to resolve?

```console
cat .git/rebase-apply/next
cat .git/rebase-apply/last
cat .git/rebase-apply/original-commit
```

original answer from awesome people in [stackoverflow](https://stackoverflow.com/questions/33024085/how-can-i-see-how-much-i-have-remaining-of-a-rebase)
How to: Troubleshoot Minion Connectivity and Functions
Tags: blog, howto, minion, troubleshooting
Published: 2021-08-02 16:58:55

---
title: How to: Troubleshoot Minion Connectivity and Functions
published: true
cover_image: https://pbs.twimg.com/media/E66NGeTXIAAIuLc?format=jpg&name=medium
date: 2021-07-22 09:00:30 UTC
tags: Blog,HowTo,minion,troubleshooting
canonical_url: https://www.opennms.com/en/blog/2021-07-22-how-to-troubleshoot-minion-connectivity-and-functions/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-troubleshoot-minion-connectivity-and-functions
---

The OpenNMS Minion includes useful, built-in commands to verify configuration and debug access to management agents.

In this [Discourse article](https://opennms.discourse.group/t/troubleshooting-minion-connectivity-and-functions/1578 "Discourse article"), Ronny Trommer, Community/Product Manager at The OpenNMS Group, shows how to test connectivity with the Minion, perform a health check, execute a remote ping to arbitrary FQDNs or IP addresses, execute remote DNS lookups, run SNMP commands from the core OpenNMS instance to a device behind a Minion in a remote network, and run a monitor through a Minion.

![](https://www.opennms.com/wp-content/uploads/2021/06/RPC-test-ping-1024x223.png)

More information:

_A Minion is a lightweight stateless service that lets OpenNMS communicate with devices and services in hard-to-reach locations. Minions are best suited for deployment at remote locations that the core OpenNMS server may not have direct access to. For more information on Minion, see the whitepaper and data sheet on the [OpenNMS Resources](https://www.opennms.com/resources/ "OpenNMS Resources") web page._
Eclipse Shortcuts
Tags: eclipse
Published: 2021-07-22 08:44:00

There are many ways to work on a system. But, it is good practice if we know about the shortcuts or I would say keyboard shortcuts to operate on a system.
As being a corporate trainer, I am working on different assignments, work with different sets of people. I came to know that, shortcuts are very valuable and everyone wants to learn about them.
In my current training assignment, working on eclipse. Most of the students are asking about eclipse shortcuts.
Here, I am listing down the shortcuts of eclipse that I am using currently.

Below is the list :

**ctrl+D** — to remove a line.
**ctrl+shift+t** — to open an already existing resource or API or utility class. e.g. String class, Comparator, Comparable
**ctrl+shift+r** — to open any resource file that you have created, or that is there in your workspace
**ctrl+shift+o** — to organize your imports in the existing current file.
**ctrl+o** — to see the existing list of variables, constants, and methods in the current file.
**ctrl+alt+up arrow, ctrl+alt+down arrow** — to make a copy of the existing line on which cursor exists currently.
**ctrl+f **— to find/replace in current file
**ctrl+h** — to search in the workspace or a specific project depend on configuration.
**alt+up arrow, alt+down arrow** — to move the current selection up and down.
**alt+shift+r** — to refactor rename. This means the name will be renamed in every reference.
**ctrl+1** — a quick fix. will give you suggestions if there is an error in your file.
There are other shortcuts as well, I will update this list accordingly.
There is a path is to see all the keyboard shortcuts, eclipse has provided. 

Go to eclipse and follow the below path to know :
See **Help > Help Contents > Java Development User Guide > Reference >List of JDT Key Bindings**.

Please add more shortcuts in comment section. I will be happy to know more.
Hope you find this article useful. Stay tuned for more articles.

Kavita Gupta
Full Stack Developer
How to do Web Scraping from Yahoo Finance | World Indices Data
Published: 2021-07-22 08:37:32

Today we are going to see how we can scrape World Indices data using Python and BeautifulSoup in a simple and elegant manner.

The aim of this article is to get you started on real-world problem solving while keeping it super simple so you get familiar and get practical results as fast as possible.

https://youtu.be/SYNlLrEHBw8
Parsing cookie strings in Java with HttpCookie
Tags: java
Published: 2021-07-22 08:24:45

The other day I was solving a very complex bug involving some sticky session cookies and multiple reverse proxies. During the bug solving process I discovered that I need to parse set-cookie header strings and do some value filtering in one of our reverse proxies. 

My first idea was to write some kind of regex that would parse the string and get me my desired values. I went with something like this:

```
(.*?)=(.*?)($|;|,(?! ))
```

Here is a [regexer link](https://regexr.com/62bdp).

Turns out this is more complex than simple regex. One string can contain multiple cookies, optional parameters, etc... Then there is an issue with multiple formats of how the cookie string can look like. I would need to write a lot of logic around my regex.

Naturally, I am a bit lazy so I started looking into what Java can offer. There must be an existing solution for this. I found a class named `HttpCookie`. 

Usage is very simple:

```java
List<HttpCookie> cookies = HttpCookie.parse(cookie);
```

It will parse all the cookies in the string into a collection of objects that have all the needed info.

```java
 private final String name; // NAME= ... "$Name" style is reserved
 private String value; // value of NAME

 // Attributes encoded in the header's cookie fields.
 private String comment; // Comment=VALUE ... describes cookie's use
 private String commentURL; // CommentURL="http URL" ... describes cookie's use
 private boolean toDiscard; // Discard ... discard cookie unconditionally
 private String domain; // Domain=VALUE ... domain that sees cookie
 private long maxAge = MAX_AGE_UNSPECIFIED; // Max-Age=VALUE ... cookies auto-expire
 private String path; // Path=VALUE ... URLs that see the cookie
 private String portlist; // Port[="portlist"] ... the port cookie may be returned to
 private boolean secure; // Secure ... e.g. use SSL
 private boolean httpOnly; // HttpOnly ... i.e. not accessible to scripts
 private int version = 1; // Version=1 ... RFC 2965 style
```

This saved me a lot of time.
useTimeout - React Hook
Tags: react, webdev, frontend, codesandbox
Published: 2021-07-22 08:17:39

This is a series of tying out the custom hooks introduced in the really good article by [team] (https://thesmartcoder.dev/author/team/) about useful React custom hooks.

[8 Awesome React Hooks](https://thesmartcoder.dev/awesome-react-hooks/)

### useTimeout

Counting starts on page load, and after 5 seconds it gets timeout
{% codesandbox n2e4b %}
Angular CLI + Meteor — No more ejecting Webpack Configuration
Tags: angularmeteor
Published: 2021-07-22 08:17:07

> This article was published on Friday, July 13, 2018 by [Arda Tanrikulu](https://twitter.com/ardatanrikulu) @ [The Guild Blog](https://the-guild.dev/)

Previously, we have to eject Webpack configuration generated by Angular CLI to modify module aliases
for Meteor's special import syntax such as `meteor/meteor` and `meteor/mongo` etc. However, this is
not required after the latest release of Meteor Client Bundler. Now, MCB can create stub modules for
these imports.

## Quick Start

Check out the example in
[`angular-meteor`](https://github.com/Urigo/angular-meteor/tree/master/examples/AngularCLI).

## How to Add Meteor Client to Your Existing Project

*   After installation of `meteor-client-bundler`:

```sh
yarn add meteor-client-bundler --dev
// or
npm install meteor-client-bundler --save-dev
```

*   Add `meteor-client.config.json` with the necessary options:

```jsonc filename="meteor-client.config.json"
{
  "runtime": {
    "DDP_DEFAULT_CONNECTION_URL": "http://localhost:3000",
    "ROOT_URL": "http://localhost:3000"
  },
  // This option enables the generation of stub modules
  "generateNodeModules": true
}
```

*   After that, don't forget to add generated `meteor-client.js` to `angular.json`:

```json
{
  "scripts": ["node_modules/meteor-client.js"]
}
```

*   Optionally, you can add `postinstall` script to generate all modules in every `node_modules`
    generation; because `yarn` or `npm` may remove your generated modules from this directory.

```json filename="package.json"
{
  "scripts": {
    "postinstall": "meteor-client bundle -s <PATH-TO-METEOR-PROJECT>"
  }
}
```

*   Ready to use!

Thank you for reading my blog post about using Angular CLI with new MCB. I'd appreciate your claps
to this post if you like it.
ssh login to the wrong machine
Tags: ssh, troubleshooting
Published: 2021-07-22 08:16:40

今天试图ssh登陆一台腾讯云服务器，发现登陆到一台阿里云的服务器上去了，甚至指定ip连都能登陆进错误的机器，这对我来说跟见鬼差不多，若是别人跟我说有这种现象，我是肯定认为他自己搞错了。从别的地方连，就不会有这种问题，从windows或者 wsl 连都出现这种奇怪的现象，猜测哪里出现bug了，重启windows后就恢复正常了。

我应该测试下只有目标机器而错误登陆的机器上没有开放的端口，判断是否是网络层面的问题。

我使用windows 的openssh 客户端和 wsl中的openssh客户端连，都有问题，应该尝试使用 xshell 去连
How to Create a Dashboard for Free with Google Sheets and C3.js
Tags: javascript, googlecloud
Published: 2021-07-22 08:03:24

We often have some business data that we need to track. We collect, process and store it in spreadsheets to then create charts and diagrams. However, sometimes there is a need to go out to a non-technical audience. There are many services for building decent-looking charts and dashboards, such as Tableau, Qlikview, or Google Data Studio.

However, they are often too expensive or too limited to be useful for any case. Fortunately, it is possible to serve static HTML and JavaScript files directly from Google Apps Script.

In this article, I show you how to create a simple dashboard using data from Google Sheet and C3.js. First, we will set up a web application template in Google Apps Script. Next, we will integrate it with C3.js. Then, we will fetch data from Google Sheets (e.g. to update information in the dashboard) and insert it into the template. This project may become a scaffold for creating many different dashboards and visualizations.

Read More:
https://javascript.plainenglish.io/how-to-create-a-dashboard-for-free-with-google-sheets-and-c3-js-ef8477cae3a7