teleren/devto huggingface dataset:
UI Dev Newsletter #63
Tags: html, css, javascript, a11y
Published: 2021-07-02 05:55:49

- [content-visibility](https://bit.ly/3dkHgrr)
Idorenyin Udoh explains all about the content-visibility property in CSS.


- [Organize your CSS declarations alphabetically](https://bit.ly/2TarvN0)
Eric Bailey explains why organizing CSS declarations are essential and why using alphabetical order might be the best solution.


- [Using CSS to Enforce Accessibility](https://bit.ly/3jkBc6a)
Adrian Roselli lists some examples of how the CSS selector is keying off the HTML, what WCAG Success Criteria they help support, and if there are any gotchas.


- [Inherit, initial, unset, revert](https://bit.ly/3x5g9sk)
Peter-Paul Koch explains special CSS keywords you can use on any CSS property, where and when to use them to the greatest effect, and which ones should exist, but not.


- [GIFs on the web: A new way to bloat](https://bit.ly/3A6rk5R)
Doug Sillars shows how the Giphy platform loads an additional 300+ KB of code to your site when embedding GIFs.


- [Updating A 25-Year-Old Website](https://bit.ly/2U3Q8Ll)
Mads Stoumann shows how old code is sometimes unavoidable, either because of scope or costs, but it can teach you a thing or two.


- [DevToolsSnippets](https://bit.ly/2T3FoN6)
Manuel Matuzović shares a collection of front-end debugging script snippets to be used in the Sources panel in Chrome DevTools.


- [Can We](https://bit.ly/3A4QjGD)
Mehdi Merah shares a collection of websites focused on browser usage and features.



Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
AWS CodeCommit LifeCycle Hooks run order, summarized in one table for EC2, ECS, Lambda
Tags: aws, linux, serverless, devop
Published: 2021-06-28 08:33:35

While preparing for my AWS DevOps Engineer Professional exam I had to understand and memorize the CodeDeploy LifeCycle hooks. As usual, AWS provides decent documentation. Here is an example about how the [Run order of hooks](https://docs.aws.amazon.com/codedeploy/latest/userguide/reference-appspec-file-structure-hooks.html) is documented. However, I could not find a table with all three cased combined. So I created one and it did help me a lot during the study. And also, I had a question in the exam about the "AfterAllowTestTraffic" hook.

### Table 1: Run order of hooks for Lambda, ECS and EC2 Blue-Green deployments
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ta4li9cxffov9kjw4orc.png)

*Note 1: The greyed out hooks in the table are reserved for CodeDeploy operations. They cannot be used to run scripts.*
*Note 2: Hooks on EC2 can be used to run scripts on instances, while hooks for Lambda and ECS can be used only to run Lambda functions.*

### Table 2: Run order of hooks for EC2 In-Place deployments without ELB and with ELB and EC2 Blue-Green deployments
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rakwxo7ahol1iaqswwys.png)


Happy coding CodeDeploy lifecycle hooks!
Machine Learning Applications: Stroke Prediction
Tags: article
Published: 2021-06-25 18:51:15

---
title: Machine Learning Applications: Stroke Prediction
published: true
date: 2021-06-25 14:35:53 UTC
tags: Article
canonical_url: https://reinforcement-learning4.fun/2021/06/25/machine-learning-applications-stroke-prediction/
---

The Stroke Prediction Dataset at Kaggle is an example of how to use Machine Learning for disease prediction.

The dataset comprises more than 5,000 observations of 12 attributes representing patients’ clinical conditions like heart disease, hypertension, glucose, smoking, etc.

For each instance, there’s also a binary target variable indicating if a patient had a stroke.

We can build a … [Continue reading Machine Learning Applications: Stroke Prediction →](https://reinforcement-learning4.fun/2021/06/25/machine-learning-applications-stroke-prediction/)
Technician Pabx Jakarta
Published: 2021-06-26 04:44:07



Service Pabx – Teknisi Service Pabx menyediakan Jasa Layanan Pemeliharaan dan perbaikan Pabx, untuk memantau kesehatan Pabx dan untuk mencegah kemungkinan mati total. Pemeliharaan diperlukan memberikan kenyamanan kepada pelanggan karena PABX atau sistem telepon berfungsi dengan maksimal. Ini sangat membantu dalam berkomunikasi dengan klien.

Teknisi Service Pabx
Teknisi Sevice Pabx bertugas memperbaiki system telekomunikasi menjadi lebih mudah digunakan untuk menghubungi klien bisnis diperusahaan anda selain serta memantau status sistem, mencatat semua peristiwa penting, dan segera berkunjung ketempat usaha atau rumah anda. Teknisi Service Pabx siap dipanggil kami siap 24 jam sehari, 7 hari seminggu untuk memastikan permasalahan ini diselesaikan dan siap untuk memastikan sistem telepon bisnis Anda siap untuk bisnis anda.

Wilayah Layanan Service Pabx
Wilayah Layanan Service Pabx adalah sekaran Jabotabek seperti jakarta selatan, jakarta pusat, Jakarta Timur, Jakarta Barat, Jakarta Utara, Bekasi, Bogor, Kerawang, Tangerang dan wilayah Indonesia lainnya

Jasa Pelayanan Teknisi Pabx kami adalah :
Jasa-jasa PABX lainya adalah Jual PABX, Jual Beli PABX,  Service PABX, Jasa Service PABX, Setting PABX, Jasa Setting PABX, Program PABX, Jasa Program PABX, Pindah PABX, Jasa Pindah PABX, Tukar Tambah PABX, Pasang PABX, Jasa Pasang PABX, Instalasi PABX, Jasa Instalasi PABX, Bongkar Pasang PABX, Jasa Bongkar Pasang PABX, Jasa Tarik Kabel Telepon, Tarik Kabel Telepon.

Source : https://www.teknisiservicepabx.com/service-pabx/
Building WSL2 Environment for Web Development
Published: 2021-06-27 04:07:28

This article will not cover all details about every bit. I just want to give what steps needs to be done for building a wsl2 environment. Therefore I can also come back to this article and do things again.
1)Install WSL2(windows subsystem linux) on your windows.
google>> install wsl2

2)Install Ubuntu on top of WSL2 environment.
google>> install ubuntu wsl

3)Install node for ubuntu.
google>> install nodejs linux

4)Install git for ubuntu
google>>install git wsl
source: [https://docs.microsoft.com/en-us/windows/wsl/tutorials/wsl-git](https://docs.microsoft.com/en-us/windows/wsl/tutorials/wsl-git)
bash>>
```bash
git config --global user.name "Your Name"
git config --global user.email "youremail@email.com"
```

5)Install vscode wsl extensions pack. We will use wsl: remote out of that bunch of extensions..
At this point, when you want to open a folder in WSL you can type `Remote-WSL: Open Folder in WSL` from vscode-command-line-palette(crtrl+shift+P or settings>commandline palette)


6)How to see folders and files inside wsl without using command line. This will be usefull to reach out your project files easily and it will also allow us open our projects on **github destkop.**

try to go following path in normal windows folder `\\wsl$` > You will see Ubuntu Folder >Right click on Ubuntu folder icon > Select Map network drive (Z:) > Now Z: can be used as other partition/drive

Now Ubuntu is visible on drive. So you can easily look up for your files and also open folders in github destkop. 


7)Now you can serve your website as you used to. If for example you served your files with `npm start` successfully but there is no signs of life at localhost. Try this. Create .wslconfig file in C:/Users/\<username>/.wslconfig

Inside .wslconfig, write following lines and save it:

[wsl2]

localhostForwarding=true

Then open command line windows: >>>`wsl --shutdown`

Reload vscode window.


8)Since you can reach both wsl and windows folders it is possible to run project in windows file system from wsl. But performance is so poor. You probably want to move your project folder to the wsl. So in linux use following path to store your projects. `home/<username>/`. You can also create `home/<username>/webprojects/` folder.

source: [https://github.com/microsoft/WSL/issues/5298](https://github.com/microsoft/WSL/issues/5298)
DZone Contributor of the Month award
Tags: award, dzone, perl
Published: 2021-07-06 21:09:44

---
title: DZone Contributor of the Month award
published: true
date: 2021-07-06 18:00:43 UTC
tags: award,DZone,Perl
canonical_url: https://phoenixtrap.com/2021/07/06/dzone-contributor-of-the-month-award/
---

The [DZone](https://dzone.com/) tech publishing site selected me as their Editors’ Pick Contributor of the Month for June 2021! Here’s my (blessedly brief) acceptance speech during their monthly awards ceremony. (Fast-forward to [54:88](https://youtu.be/wt-unjqS1oA?t=3288).)

{% youtube wt-unjqS1oA %}

Unfortunately, they’ve just started to de-prioritize content syndicated from elsewhere due to Google not indexing it. Since every article has to go through a moderation and editing process, this means that I may not be able to fulfill my promise to post new Perl content there every week. You can still find it [here on phoenixtrap.com](https://phoenixtrap.com/tag/perl/), of course. ☺
Creating Favicons for Light and Dark Mode UIs
Tags: webdev, css
Published: 2021-07-07 06:29:24

Dark mode UIs are becoming increasingly popular. Often the legibility of a favicon is not great in light or dark mode, so a dynamic solution is needed to display correctly in both modes. 

Luckily, SVG favicons provide the functionality we need. If you are not using SVG favicons on your site yet, then go and change them now. You can drop those 20+ PNG icons in favour of a single SVG. 

So here's the thing, we can use CSS in SVGs, meaning you can also use the [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query to adjust the SVG. 

Here's an example icon with some CSS to set the default path fill colour to black. The media query then changes the fill colour to white if the user has dark mode enabled. 

```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 429.056 429.056">
  <style>
    path { fill: #000; }
    
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M413.696 182.272h-21.504v-68.096c-.512-8.192-7.168-14.848-15.36-15.36H229.888V4.608h-30.72v94.208H52.224c-8.192.512-14.848 7.168-15.36 15.36v68.096H15.36c-8.704 0-15.36 6.656-15.36 15.36v101.376c0 8.704 6.656 15.36 15.36 15.36h21.504v94.72c.512 8.192 7.168 14.848 15.36 15.36h324.608c8.192-.512 14.848-7.168 15.36-15.36v-94.72h21.504c8.704 0 15.36-6.656 15.36-15.36V197.632c0-8.704-6.656-15.36-15.36-15.36zm-313.344 36.352c0-24.576 19.968-44.544 44.544-44.544s44.544 19.968 44.544 44.544-19.968 44.544-44.544 44.544-44.544-19.968-44.544-44.544zm181.76 133.632H146.944v-30.72h135.168v30.72zm46.592-133.632c0 24.576-19.968 44.544-44.544 44.544-25.088 0-45.056-19.968-45.568-44.544 0-25.088 19.968-45.056 44.544-45.568 24.576-.512 45.056 19.968 45.568 44.544v1.024z" />
</svg>
```

You just need to link your new `icon.svg` file in the document head:

```html
<link rel="icon" href="/assets/icon.svg" />
```

Here's the outcome. You might need to reload the page when switching between light/dark mode UI. 

![Dark mode favicon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eykqkp9g7t011je89wu4.png)

![Light mode favicon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7gu7fo5bbiyd3ielmjbs.png)
QA and testing of e-commerce
Tags: testing, ecommerce
Published: 2021-07-07 14:54:55

Is it necessary to run detailed testing of e-commerce products? Let's just imagine how many issues can happen, for example, in a payment system, orders arrangement and management, delivery monitoring and so on.   

To prevent possible bottlenecks, the following types of testing can be run:

- Functional testing
- UI/UX testing
- Usability testing
- Integration testing
- User acceptance testing.

After the detailed analysis, a QA team can provide recommendations and set up the testing process so that no important details will be left behind.

Considering the necessity of testing your e-commerce solution? Get a reliable partner for QA tasks with the HireTester team: info@hire-tester.com 

https://hire-tester.com/
Rendering HTML code in Vue
Tags: vue, html, javascript, webdev
Published: 2021-07-07 20:08:30

Let us suppose that we want to pass to the page as an attribute, a variable containing html code. 
Like a clickable link. Following the previous tutorials one could think this is the right way.

```HTML
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!-- importing vue js dev library -->
	<!-- development version, includes helpful console warnings -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<title>My vue Test</title>
</head>
<body>
	<div id="app">
		<a href="{{ link }}">This is the link</a>
	</div>
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app', 
		  data: {
		    link: 'https://www.google.com' //this is the link
		  }
		})
	</script>
</body>
</html>
```

Actually this will lead to an error. Vue is unable to link the value of the attribute. In order to accomplish the task, we have to use the bind directive.

```HTML
<a v-bind:href="link">This is the link</a>
```

For some reason, we may want to render html code instead of just saving the link in the data key of the vue instance and injecting it in the anchor tag, Vue provides the "v-html" directive.

```HTML
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!-- importing vue js dev library -->
	<!-- development version, includes helpful console warnings -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<title>My vue Test</title>
</head>
<body>
	<div id="app">
		<p v-html="link"></p>
	</div>
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app', 
		  data: {
		    link: '<a href="https://www.google.com">This is the link</a>' //this is the link
		  }
		})
	</script>
</body>
</html>
```
Knowledge curation and sharing made easy through Weavr Boards and RSS Feeds
Tags: rssfeed, contentcuration, weavr, newsaggregator
Published: 2021-07-12 06:19:45

---
title: Knowledge curation and sharing made easy through Weavr Boards and RSS Feeds
published: true
description: Don't want to sign up for a million email newsletters? Here's an easy way to stay up to date on content from all your favorite blogs.
tags: rssfeed, contentcuration, weavr, newsaggregator
//cover_image: https://direct_url_to_image.jpg
---

Don't want to sign up for a million email newsletters? Here's an easy way to stay up to date on content from all your favorite blogs.

Weavr Boards lets you curate and organize content from various external sources into one place. 

Now you can also attach an RSS Feed to a board, that will pin any new content from that feed to your board. 

You can choose to make your board Private or Public so others can also follow it.

![Create a Weavr Board](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykcbh5yzviseo47t70v6.png)

Once your board is created, you can edit the Board settings to include one or more RSS feeds for it to track.

![Edit your board settings to add one or more RSS Feeds](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8acp1etgxfa5iv4d3ydl.png)

Things you can do with the content in your board.

1. Share selected posts in your Slack channel
2. Create an email newsletter
3. Get the markdown content for the board that you can add to Github Repository
4. You can also add one or more Call to Actions on your board

![Share your Weavr Boards content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnyqzwvmqep74dtghtd2.png)

Check out and follow [Ringcentral's developer content](https://weavr.cafe/ringcentraldevs/board/ringcentral-developer-blogs) created using the above RSS feeds feature.

![RingCentral Developer Blogs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0srz88cd148y0w6c6881.png)

Sign up on [Weavr.cafe](http://weavr.cafe) today to create your own Weavr Board.
Game Development Course Announcement - Become a Game Developer Without a Degree | Farhan Aqeel

Tags: gamedev, unity3d, csharp
Published: 2021-07-08 10:18:37

https://www.youtube.com/watch?v=4_92hSf0dJY&list=PLBh8phtAyHPUY9fqgs1w6aHJALJ3_fMSc

How to Become a Game Developer Without a degree? in this video, I have some things to say about my upcoming series that will help you to become a game developer without a degree. In this game development course, I will start from the very basic and will move to intermediate topics that will help you to become a game developer that can earn money through freelancing websites such as Upwork, Fiverr, freelancer, and other freelancing platforms. Freelancer game development has a wide scope on freelancing markets. you will be able to get game development projects on freelancing websites such as Fiverr, Upwork, and Freelancer. in this game development course, we will look at C# (the programming language that is being used in unity3d game development. this will be the first game development course in Pakistan that will be free and has a level of any top-class game development course offered online. 
My plans?

After getting many queries about freelancing, I have started a web series in which I'll teach what and how to work online. if you think that this series may provide benefit then don't forget to share it in your circle.

Youtube: https://www.youtube.com/farhanaqeel
Facebook group: https://www.facebook.com/groups/Freel...
Facebook:https://www.facebook.com/FreelanceTea...
Instagram: https://www.instagram.com/farhan.aqeel
Website: https://www.geeksread.com/
Self hosting Forem(Dev) on your VPS; using t2d!
Tags: selfhosting, t2d, webdev, tutorial
Published: 2021-07-08 12:23:16

Now you can have your own [dev.to like] community. In this installation process, I use t2d(Talk to Dokku) a bash script which is powered by whiptail and dokku.

### Forem
Forem is open source software for building communities. It is the open source software that powers DEV and other inclusive communities; including [my own community](https://app.leewardslope.com)

Other Communities which are using Forem: https://www.forem.com/discover/

### t2d
t2d aka Talk to Dokku; is a Terminal User Interface(TUI) powered by dokku and whiptail. With t2d you will be able to deploy apps in most popular programming languages, link them to most popular databases and all that with almost zero configuration from your side. Apart from all these amazing features it will also save you money along the way.

For more info [Click Here](https://github.com/akhil-naidu/t2d)
## Demonstrating Forem Installation using t2d
{% youtube m4jm2ZOA9bg %}

## Screen Shots of t2d v2.1
![1](https://forem.dev/remoteimages/uploads/articles/6td3fmyv6llo5tqgfyeh.png)
![2](https://forem.dev/remoteimages/uploads/articles/3dexlvayxp2dj568ryko.png)
![3](https://forem.dev/remoteimages/uploads/articles/jvsfknp0ty9hfn1zdcin.png)
![4](https://forem.dev/remoteimages/uploads/articles/36vt6jbponyimqb28s87.png)
![5](https://forem.dev/remoteimages/uploads/articles/7ot4a3dp0nnjzebk68zu.png)
![6](https://forem.dev/remoteimages/uploads/articles/ksly2rczosbknojulze1.png)
Press "Enter", to automate the Dokku installation. More information can be seen in the video above.

---

Once the installation was done, sometimes you need to update your ENV variables or Update your entire Forem instance with the latest changes.

You can also use t2d for post deploy configuration. Right now, I added only few very necessary options. This section of the t2d will update daily.

![7](https://forem.dev/remoteimages/uploads/articles/d47rx00gxuzkbgav2u7x.png)
![8](https://forem.dev/remoteimages/uploads/articles/lo6kj8ttxkxvm2j220wt.png)
![9](https://forem.dev/remoteimages/uploads/articles/m8h1n9f0y2vsccq2ggje.png)
## Repository
{% github akhil-naidu/t2d %}
Introducing Milkdown: A plugin driven WYSIWYG markdown editor
Tags: showdev, javascript, typescript, markdown
Published: 2021-07-08 18:46:29

## Overview

Milkdown is a lightweight but powerful WYSIWYG markdown editor. It's made up by two parts:

-   A tiny core which provide markdown parser, serializer and kinds of plugin loader.
-   Lots of plugins provide syntax, commands and components.

With this pattern you can enable or disable any custom syntax you like, such as table, latex and slash commands.
You can even create your own plugin to support your awesome idea.

---

## Links

- [online editor](https://saul-mirone.github.io/milkdown/#/online-demo)
- [documentation](https://saul-mirone.github.io/milkdown/)
- [github](https://github.com/Saul-Mirone/milkdown)

## Features

-   📝 **WYSIWYG Markdown** - Write markdown in an elegant way
-   🎨 **Themable** - Theme can be shared and used with npm packages
-   🎮 **Hackable** - Support your awesome idea by plugin
-   🦾 **Reliable** - Built on top of [prosemirror](https://prosemirror.net/) and [remark](https://github.com/remarkjs/remark)
-   ⚡️ **Slash & Tooltip** - Write fast for everyone, driven by plugin
-   🧮 **Math** - LaTeX math equations support, driven by plugin
-   📊 **Table** - Table support with fluent ui, driven by plugin

## Tech Stack

Milkdown is built on top of these tools:

-   [Prosemirror](https://prosemirror.net/) and it's community - A toolkit for building rich-text editors on the web
-   [Remark](https://github.com/remarkjs/remark) and it's community - Markdown parser done right
-   [Postcss](https://postcss.org/) - Powerful css tool to build theme
-   [TypeScript](https://www.typescriptlang.org/) - Developed by typescript
-   [Prism](https://prismjs.com/) - Code snippets support
-   [Katex](https://katex.org/) - LaTex math rendering

---

## First editor

We have some pieces for you to create a very minimal editor:

> **We use [material icon](https://fonts.google.com/icons) and [Roboto Font](https://fonts.google.com/specimen/Roboto) in our theme**.
> Make sure to include them for having the best experience.

```typescript
import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';

// import theme
import '@milkdown/theme-nord/lib/theme.css';

const root = document.body;
new Editor({ root }).use(commonmark).create();
```

---

For further information, please visit our [website](https://saul-mirone.github.io/milkdown/).
Starting a YouTube Channel for Programming Tutorials!
Tags: webdev, productivity, html, showdev
Published: 2021-07-09 10:16:31

I have created a YouTube Channel in Which I will be Uploading Tutorials Related to the Programming and Web Development.
YouTube Channel Link:
[Learn To Code](https://www.youtube.com/channel/UChtr70R5H_ziehe_YjtOJtw 'Learn To Code')

If You Use Facebook then it will be a good option to like the Page so that you can get Notification Regarding Next Tutorial Updates.
[Learn To Code on Facebook](https://www.facebook.com/LearnToBeProgrammer/ 'Learn to Code Facebook Page')

Any Kind of Suggestions are Welcome.

Have a Happy Week-End Ahead.