teleren/devto huggingface dataset:
VuiUp
Tags: javascript
Published: 2021-11-02 08:35:52

Chào mừng đến với https://vuiup.com Cung cấp các thông tin mới nhất về ✅ Mã giảm giá ✅ Công nghệ ✅ Đời sống ✅ Du lịch ✅ Sức khỏe - Sắc đẹp ✅ Xe ✅ Học tập... VuiUp chia sẻ những kiến thức và kinh nghiệm trên internet, là nơi lưu trữ những bài viết/video miễn phí/có phí bổ ích của đội ngũ phát triển mang đến cho bạn đọc.
Thông tin liên hệ:
Địa chỉ: 3 Nguyễn Văn Đậu, Phường 5, Quận Phú Nhuận, Thành phố Hồ Chí Minh
Hotline: 0911 3456 19
Email: vuiup2021@gmail.com
Website: https://vuiup.com
Youtube: https://www.youtube.com/channel/UCoHmwHCdJ0iVruNOsW-Juxg/about 
Google Sites: https://sites.google.com/view/vuiup/
Tags: VuiUp, Mã giảm giá, Công nghệ, Đời sống, Du lịch, Sức khỏe Sắc đẹp, Xe, Học tập, Marketing Online, Thiết kế Website, Khóa học Online, Internet, Máy tính, Điện tử, Chăm sóc da
Hashtag: #vuiup #magiamgia #congnghe #doisong #dulich #suckhoesacdep #xe #hoctap #marketingonline #thietkewebsite #khoahoconline #internet #maytinh #dientu #chamsocda
Mã giảm giá: https://vuiup.com/ma-giam-gia/
Công nghệ: https://vuiup.com/cong-nghe/
Đời sống: https://vuiup.com/doi-song/
Du lịch: https://vuiup.com/du-lich/
Check if a Github ticket is closed with eslint
Tags: javascript, eslint, github
Published: 2021-11-02 08:35:50

I see often code like this: 

```javascript
// workaround for https://github.com/vuetifyjs/vuetify/issues/6633

/**
  workaround code for the issue.
**/
```
but even if the issue is fixed, the workaround remains. 

To improve the tracking of closed issues and workaround code in the code based I wrote a small eslint plugin.

https://www.npmjs.com/package/eslint-plugin-gh-issue

So when you a have workaround code like the example above, you rewrite it like this: 

```javascript
// workaround for gh-issue vuetifyjs/vuetify/issues/6633
/**
  workaround code for the issue.
**/
```

If the issue is closed, eslint will produce a warning and you know that maybe some action can be taken to remove the workaround code.

The plugin itself will not call github api itself. Instead it will call a cloudflare worker, which requests and caches the issues state.  
Otherwise I was running in some quota issues by github.

How do you deal with (outdated) workaround code?
How to start to learn code
Tags: beginners, tutorial, webdev, watercooler
Published: 2021-11-02 08:27:11

Welcome 👋,
Today I am going to talk about **How you can start to learn code** and this will be fun. So, make sure to read the whole article.

What is coding? - In simple words, it is about problem-solving

I have listed some important points, which may help you. So let's begin the journey 🔥


### I want to start
![Start](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygccp2hafscpfegg9qm4.png)
 
To start, the first thing that you have to think is you have to start, then and only you will be able to code easily without frustration.

Thinking positively helps you to love code which gets you new ideas for your news projects.

### You are the best teacher for yourself
![Self Teacher](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pw6ibg5295iqtd54b5ru.png)
 
Facing errors and issues and stuck. Don't worry you will teach yourself how to come out from the error. Search the internet, review your code multiple times and you will figure out where and why the error was coming.

This is how you will be able to handle errors and bugs and your brain will be easily able to solve problems that arise in future

### Where to learn
Internet is amazing. Anything you want can be found on the internet.
You can say the internet will be your best mentor. There are a bunch of stuff you can find on the internet to learn code.

Check out some important sites to learn code:
- [FreeCodeCamp.org](https://www.freecodecamp.org/)
- [Scrimba.com](https://scrimba.com/)
- [Sololearn](https://www.sololearn.com/)

You will learn to code from these sites.

### Build simple projects
![Build simple projects](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27n0lkt22jb1pycjknjk.png)
 
Now you have learnt the basic things, **congrats 🎉**!
The best way to learn deep is to start building simple projects, this boosts up your confidence as well as experience.

This motivates you to learn new things. To build new simple projects after learning a new topic and your base will get stronger doing this repetitive.

### Join Communities
![Community](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hh6inwmyip0dbr69xr70.png)
 
Joining communities is the best way to discuss your code journey and helps you to get updated about the latest things running in the market.

There are a bunch of coding communities you can find on the internet.

### Keep revising
Keep revising the older topics that you had practised before. This helps you to keep memorizing older topics and you will never forget about them.


I have covered all major topics which might help you as a beginner. I hope you have learnt something new from this article.

Consider liking this post 💖 keeps me motivated to write new amazing posts.

Thank you! for reading this article 🙂 

Follow me on [Github](https://github.com/snowbit-coderboi)
Opensource Newbie
Tags: opensource, beginners
Published: 2021-11-02 08:23:21

I often ask myself when will I ever stop referring to myself as a code newbie when I have been in the world of coding for the past 4 years. There are so many aspects to explore in this coding universe of ours that I find myself constantly being a newbie at something. I have decided to embark on a personal journey with open source and it feels completely new - I know nothing - Even after watching 10 tutorials. 4 months into my job as a low-code front end developer and I still feel like a newbie. 

As I embark on this open source journey I hope you will enjoy the ride with me, and hopefully by the end of this year I will be blogging about how I successfully contributed to open source and put my name out there.
Join Olamilekan Arimoro and Aviyel in Getting Started with Typesense Dashboard
Published: 2021-11-02 08:22:40


If you have been an open source developer, chances are you would have heard about Typesense, an emerging open source search engine and a tough alternative to ElasticSearch.

With federated search features, Typesense has been successful in carving a niche for itself in the enterprise ecosystem. If you haven’t yet started using Typesense, then it’s your time!

To help you get started with Typesense, Olamilekan Arimoro and Aviyel bring to you a live event on Getting Started with Typesense Dashboard. An electronics engineer by degree and technical developer by profession, Arimoro has extensively worked with CSS, Javascript, and Typesense creator communities. You can read his work here.

Join us to get a hands-on experience with Typesense, open source, and conclude your evening with an exclusive QnA with the expert speaker.

Mark your Calendar: 📆 November 3rd, 2021

Time: 09:00 AM PST | 12:00 PM EST
Where: To join, tap here 👇🏻
https://bit.ly/2Y7RJCl



Impressed? Check out the rest of our events!

Let’s build open source together!

Team Aviyel
Serve a React App from the S3 Bucket
Tags: aws, beginners, serverless
Published: 2021-11-02 08:21:47

An S3 bucket is a great place to serve static content like a web app build with React. Here are a few tips and tricks that will help you to get started.

The S3 bucket has a feature that allows static website serving, but the downside is that it doesn't support HTTPS. Nowadays, plain HTTP is not an option. So for HTTPS support, a CloudFront distribution is needed. It also enables custom domain name, Web Application Firewall and a lot of other cool features. And if you have an API in your service, you can add that to CloudFront and serve everything from the same origin to mitigate the CORS pain.

The S3 bucket is not a web server, so routing causes some issues. When using React router, routing works fine when you enter the site, but a 403 error is returned when opening an URL with a route resource, like `mydomain.com/users`. This is because the browser tries to access the `/users` file from the bucket, and as it's a React router path, the file doesn't exist in the S3 bucket. If you are wondering why it's 403 instead of 404 is because the bucket is not public.  

How to prevent this is to modify the CloudFront error response in case of 403 error to be index.html, which routes all failed requests to the index.html and returns 200 status code.

```js
 errorResponses: [
  {
    httpStatus: 403,
    responseHttpStatus: 200,
    responsePagePath: "/index.html",
    ttl: Duration.seconds(0),
  },
]
```

This way, every time a file is not found from the path, it returns index.html and React router kicks in and handles the routing.

In the example repository https://github.com/laardee/deploy-react-app there is an infra stack build with AWS CDK and a simple React app that has router included.
[INFOGRAPHIC] TOP 3 BENEFITS OF TESTOPS REPORTING
Tags: testops, testreport, automatedtest, softwaretesting
Published: 2021-11-25 05:45:25

---
title: [INFOGRAPHIC] TOP 3 BENEFITS OF TESTOPS REPORTING
published: true
date: 2021-11-02 07:36:55 UTC
tags: testops, testreport, automatedtest,softwaretesting
canonical_url: https://www.katalon.com/resources-center/blog/infographic-testops-reporting/
---

Due to test automation and the proliferation of modern technologies (devices, browsers, and versions), testing teams today create mountains of data from various testing activities.

[Forrester reports](https://www.forbes.com/sites/forbestechcouncil/2021/03/26/bringing-data-into-decision-making-at-all-levels-of-the-organization/) that 41% of companies struggled to transform data into decisions in 2020. It is true that having access to and utilizing high-quality data will help you make better business decisions, but this does not ensure it.

## **Top 3 Benefits of TestOps Reporting**

Translate every line of code and log into actionable insights and data-informed decisions with these Top 3 Benefits of TestOps Reporting:

![Top 3 Benefits of TestOps Reporting](https://d1h3p5fzmizjvp.cloudfront.net/wp-content/uploads/2021/11/Frame-4-2-1-1.png)

## **Katalon TestOps | Turn Your Data Into Smart Decisions**

As more software engineers adopt cyclical test-driven development techniques, it is important to manage all of the iterations of testing in one tool. To ease your way through the test reporting process, Katalon TestOps is a great place to start. 

Integrating with mainstream testing frameworks, TestOps provides a comprehensive view of your testing activities and analyzes your test results into metrics that are tailored to your team. 

[![Explore TestOps](https://d1h3p5fzmizjvp.cloudfront.net/wp-content/uploads/2021/11/Button-_Download-Katalon-Studio.png)](http://https://www.katalon.com/testops/)

The [[INFOGRAPHIC] TOP 3 BENEFITS OF TESTOPS REPORTING](https://www.katalon.com/resources-center/blog/infographic-testops-reporting/) appeared first on [Katalon Solution](https://www.katalon.com).
Adding RVM in WSL2 to Rubymine
Tags: rubymine, wsl2, rvm
Published: 2021-11-02 07:18:12

I cannot find this info anywhere, so here it is. This how I add a gemset from RVM in WSL to Rubymine

Find RVM path by running
```
rvm info
```

In my case, it was `/usr/share/rvm`

![RVM path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rj99kdee2svc818f8rp1.png)
 
 

Then add new remote in Settings
![Add new remote](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjc2v7jn2974p7whdntw.png)
 
Select `WSL`, append `/bin/rvm` to your RVM path, mine looks like `/usr/share/rvm/bin/rvm`, then put it into path input

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

Now you can choose which gemset you want to use
![Choose gemset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywo1jksqbmtdjohtm31t.png)
 
Enjoy!
Cockpit 高大上的 Linux Web 管理介面
Tags: cockpit, linux
Published: 2021-11-02 07:12:03

## 簡介

[Cockpit](https://cockpit-project.org/) 是一個由 Red Hat 所資助的開源軟體，做為一個 Linux 的 web 管理介面，讓我們可以用瀏覽器就能管理系統事務而無須動用男子漢的文字指令。

## 功能

條列式 Cockpit 的功能與特色：

- 有美美的圖表即時顯示系統負載
- 顯示一些基本的軟硬體資訊
- 關機、重開機
- 顯示系統日誌
- 管理儲存空間
- 管理網路介面
- 管理帳戶
- 管理服務，不用碰 `systemctl`
- 內建終端機，Cockpit web 做不到的事可以在終端機做
- 模組化設計，可以安裝或自行開發擴充模組

## 安裝

以 Elementary OS / Ubuntu 來說，在出廠的 APT 庫已經內建了 Cockpit，所以只要一行即可裝起來：

```sh
sudo apt install cockpit
```

其它的 Linux 可以參閱 Cockpit 的安裝文件。

安裝之後 Cockpit 會以服務的形式在背景運作，服務的名稱就叫做 Cockpit Web Service。因為是服務，當然也會常態的佔據一部分的記憶體，有必要的話可以改成平時關閉，要用時再用 `systemctl` 把 Cockpit Web Service 叫起來。（不過我就是不想用 `systemctl` 來管服務才裝 Cockpit 的啊…）

另外在 Elementary OS / Ubuntu 的 APT 庫內還有一些模組可以安裝，包括 Docker 的管理等等的，可以自行選用。

## 使用

Cockpit 會在本機的 9090 埠提供服務，所以只要 Cockpit Web Service 有啟動的狀態下，用瀏覽器開 http://localhost:9090/ 就會進到 Cockpit 的登入頁。

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

登入之後的各模組使用應該是一望即知，就不多做介紹了。

## 安全管理

因為 Cockpit 是 web，所以就需要多考慮存取的控制，要禁止本機以外的機器存取到 Cockpit 的話，請在防火牆設定那邊確定沒有開放 9090 埠。

以 Elementary OS 為例，在 **系統設定值** **安全與隱私** **防火牆** 那邊可以做設定。

![elemantary OS 防火牆](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9iysm0g1c64o34m330m.png)

對 9090 埠做限制，禁止外部訪問，或只允許信任的 IP 訪問。
Thinking about switching from windows to Linux? Read This
Tags: linux
Published: 2021-11-02 06:43:13

# Why I switched?
So around 3 months ago I switched to Linux from Windows 10. I have a very low end PC so Windows 10 was lagging a lot so I thought to switch to Linux. 
I then installed ubuntu (because it very beginner friendly) on it in dualboot mode. 

# Time for a little change
I definitely ran a lot better than windows. But after some time, It's UI also seemed a bit boring to me. So the I installed the KDE PLasma desktop environment on top of it. And I just loved it.

# KDE 😍
KDE has a lot of features and is very customizable

* **Very user friendly**
If you are coming from windows then this would feel a little similar.

* **Customisation**
Literally everything in the UI is customizable. From the UI theme to the title bar for application windows. You can even change the splash screen, lock screen, font, emoji, icons , cursors etc with just few clicks. Its plasma store has a lot of these packs. 
I'm personally using [Noctis Round Theme](https://store.kde.org/p/1610056/)
![https://store.kde.org/p/1610056/](https://cdn.pling.com/img/a/c/8/1/c169b0d27fe37ac054c0ecc971307d4586b2d982589e95be8948d04a5b80d23d9ab5.png)
![beautiful](https://media.giphy.com/media/it6W8D4FfvaPC/giphy.gif)

* **Keyboard Shortcuts**
KDE has a lot of useful kde shortcuts. And if you want some other shorcuts, you can even add them manually. Like I assigned <kbd>Start</kbd> + <kbd>v</kbd> to open clipboard history just like windows. 
Adding keyboard shorcuts is very simple in KDE

* **Addons** 
Plasma store has a lot of addons that you can download and apply. 
You can even change your default application launcher (a.k.a. Start menu) to a completely different one. 
![Normal Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vomy389uzd3cui9qj6np.png)
![Full Screen Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8sngeowyi4jwxja1e74y.png)
And there many many other menu's in the plasma store. Some even resembling Windows 11. 
And there are many other addons for window effects, blur effects, closing animations etc. 
![addons preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vp20dlxa4875q40awt8s.gif)
There are so many addons in the plasma store, & many of them are incredible. 
I am using a lot of them & the best part, my PC still runs far better on KDE than on Windows 🤣.

![Impressive](https://media.giphy.com/media/eKNrUbDJuFuaQ1A37p/giphy.gif)

* **System Wide Search**

KDE has KRunner, which is a system wide search & its much faster than  Window's search. 
And guess what, you can download addons to extend it functionality. 
![fast](https://media.giphy.com/media/SW3PNayoSGXao/giphy.gif)

There are many other features in KDE that I like. 

## **Conclusion:**
I just love KDE Plasma & its a great alternative for Windows. 
I am not switching back to Windows anytime soon. 
So if you want to switch from Windows, try KDE plasma.
Customizing the Kanban Editing Dialog Using Templates
Tags: blazor, webdev, dotnet, csharp
Published: 2021-11-02 06:23:54

Learn how to customize the edit dialog in the [Syncfusion Blazor Kanban component](https://www.syncfusion.com/blazor-components/blazor-kanban-board) using templates. You can also learn how to perform CRUD operations in Kanban board. 

Product Overview: https://www.syncfusion.com/blazor-components/blazor-kanban-board

Download an example from GitHub: https://bit.ly/3nwzjnq 

Refer to the following documentation to learn about dialog editing in the Blazor Kanban component: https://bit.ly/3GsEFJ0 

Check out this online example of the Blazor Kanban dialog editing: https://bit.ly/2ZukHg7

Get a free license: https://bit.ly/3jOTvQt

{% youtube SgiECU-SZBk %}
What is your thought process to develop the extendable application?
Tags: help, javascript, architecture, discuss
Published: 2021-11-02 05:55:55

Hi devs!

I have a project that requires collaborative effort to build the application. The project codebase foundation should allow external developer to develop features without having to modify the foundation codebase.

A reference for similar application that provide such extension is like VSCode Editor, Canva, Figma, or even Browser Extension. Please kindly share other apps that you think is similar as well.

I appreciate any sharing or advice from your thought process to build this kind of application properly. Please leave me any feedback or questions if you need more detail. Thank you!
So much to learn, so little time. 
Tags: python, javascript, todayilearned, beginners
Published: 2021-11-02 05:55:21

I had my first take home assessment today. I was told I’d be using JavaScript which was fine with me.  They said they needed to know if I could use JavaScript so I could make apps with JourneyApps.

Well, JavaScript was the least of my problems.  I had to design an app using JourneyApps to manage a warehouse.  It needed to have a database with 60 products, UI and functionality for customers to query and create orders, and UI/ functionality for order pickers to receive the order. I had to implement inventory management (orders had to be at least 5 items and inventory had to be tracked) and create optimal paths for pickers based on what items were in their order. 

At first I was intimidated, and then I became determined. Then after getting frustrated and working with it for 8 hours I gave up. 

I’m really glad I attempted it though because I learned a lot. I learned more of what is expected of entry level developers. I was definitely not prepared to design and implement a functional app in an evening using an obscure platform as a budding coder. 

I’m going to take the concept and implement it in either Python/Django or break down and learn a JavaScript stack and add it to my portfolio. Gotta get my portfolio website fully functional first, though.
Glassmorphism Circle Loading Animation
Tags: css, webdev, beginners, tutorial
Published: 2021-11-02 05:29:03

In this article we are gonna build a loading spinner with the glassmorphism, stay tuned for that first let's look what are we building -

![preview](https://i.imgur.com/xPPG8l8.gif)

We just need simple `div` to create this animation. For this animation we have used pseudo classes and a normal keyframe in which we just `rotate` the `.loader`.

**HTML**

```html
<div class="loader"></div>
```

**CSS**

```css
/* Main Loader */
.loader {
  position: relative;
  width: 180px;
  height: 180px;
  overflow: hidden;
  border-radius: 50%;
  animation: circleAnimation 1s linear infinite;
}

.loader::before,
.loader::after {
  content: "";
  position: absolute;
}

/* Glassmorphism */
.loader::before {
  inset: 10px;
  background: rgba(233, 30, 99, 0.05);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1;
}

/* animated Circle */
.loader::after {
  top: -50%;
  left: -50%;
  width: 100%;
  height: 100%;
  background: #ff6198;
}

@keyframes circleAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
```

**Codepen is Here**

{% codepen https://codepen.io/j471n/pen/KKvmNbz %}

### Conclusion

So after that, you can use it anywhere in your project. And let me know what do you think about it. If you like it then consider a follow, because I am gonna build more things like this.

<blockquote>
<p>You can now extend your support by buying me a Coffee.😊👇</p>
</blockquote>
<a href="https://www.buymeacoffee.com/j471n"><img src="https://cdn.buymeacoffee.com/uploads/project_updates/2021/05/918bc0ffae9a1865553d54bc11e65c4b.gif" alt="Buy Me A Coffee" loading="lazy" width="400"></a>



### Also Read 

- [10 CSS Resources that you should bookmark](https://dev.to/j471n/10-css-resources-that-you-should-bookmark-46l6)
- [Some Strange Concept of JavaScript](https://dev.to/j471n/some-strange-concept-of-javascript-4icc)
- [Some Javascript Methods you should know](https://dev.to/j471n/some-javascript-methods-you-should-know-i15)
How to use webdriverIO with Javascript
Tags: softwaretestingcompany
Published: 2021-11-02 05:17:22

How to use webdriverIO with Javascript?

Before starting how to use webdriverIO, you should have knowledge of why we use webdriverIO and what exactly it is . so let’s understand it.

Why WebdriverIO?

There are so many tools and frameworks that are used in Automation But If you are working on a front end site in automation testing, I’ll highly recommend you go with WebdriverIO. Following are some reasons:

Known for Simple accessible :
It has simple and easy to write syntax. The command which is used in  WebdriverIO tests is very concise, easily understandable and to the point.

For Example, If I want to click on something(Web element) then, With A regular selenium webdriver you have to write “find element” by its name, id, CSS, partial text or XPath to locate that element and then you will be able to perform an action upon that element. That means Instead of writing this.

driver.find_element_by_id(“sbmtBtn”);

We can just write this:

client.click(‘sbmtBtn’)   

So if it’s a CSS, partial text, id or XPath It can unravel for itself. There are also other selenium based tools out there but You should have knowledge about Python, Ruby or Java. and These languages are very verbose in comparison to WebdriverIO script.

Front end Friendly :
It makes the QA process easier, and it’s not only because of automation testing but also because the test code is written in Javascript – just like the frontend code. It works great for web browser applications which are in this case “front-end friendly”. 

Another quality of webdriverIO is, we can use advanced and customized CSS selectors to locate elements. It is most liked not only because it looks nice but also about its readability and it is easy to start.   

It has the capability of selenium:
WebdriverIO is not just the binding for webdriver protocol (like selenium). Selenium is an uncommonly robust platform. Most industries use selenium for running browser automation and WebdriverIO stands on top of selenium. All the essential features of selenium with additional utilities are available in webdriverIO with an easy syntax. 

What is WebdriverIO?

WebdriverIO is a Javascript-based open-source project developed for the automation framework built over nodeJs. It is a good automation tool which can automate both web applications and native mobile apps. It is easy for testers to write selenium tests with Javascript in BDD(Behaviour driven development) or TDD(Test-driven development) test framework

https://www.fleekitsolutions.com/how-to-use-webdriverio-with-javascript/