teleren/devto huggingface dataset:
Uclusion React code now public
Tags: react, webdev, javascript, news
Published: 2020-09-12 16:21:51

In order to help with the learning curve in React, Uclusion [uclusion_web_ui](https://github.com/Uclusion/uclusion_web_ui) is now public with a Readme to many articles on Dev.To explaining its code.

I've been searching for a while now and am unable to find anything like this:

1. Public UI for a large recently launched React application that you can log in for free and use
2. Explained point by point with blogs and we are happy to add more if you request

[Mattermost](https://github.com/mattermost/mattermost-webapp) was the closest I was able to find and until their cloud beta finishes you have to setup a server to run them. With a Github or Google identity you are one click away from running Uclusion (and with any email several clicks) - no credit card required.

If you are new to React or even front end development in general then this repo and accompanying blogs are the resource I wish I had a couple of years ago. At the time we used Tarik Huber's excellent [React Most Wanted](https://github.com/TarikHuber/react-most-wanted) which I also recommend but its no substitute for access to documented, easy to run, production level code.
.NET 5.0 Blazor bites - CSS isolation for Blazor components
Published: 2020-09-12 16:15:12

### In this blog, we are going to walk through on how the CSS isolation for Blazor components can be done .NET 5.0 preview 8. Please join to check out the easy step by step process

* Create a Blazor Webassembly application by enabling the ASP.NET core hosted option.

![Create Blazor webassembly appl](https://dev-to-uploads.s3.amazonaws.com/i/uit8e4mp8lt0h2jxr6ky.png)

* Add a new project (Razor class library) MyComponent to the solution.

![Create Razor class library](https://dev-to-uploads.s3.amazonaws.com/i/tnp4ytsf1m0qfpk979e4.png)

* In the created razor class library you will have styles.css in the wwwroot folder. You can delete it and create your component scoped CSS files by creating a new file next to your component with .css extension.
**Scoped styles are available under \_framework/scoped.styles.css**

![Create scoped CSS for Blazor components](https://dev-to-uploads.s3.amazonaws.com/i/tnp4ytsf1m0qfpk979e4.png)

* Add MyComponent project reference to Blazor client application.
* Create a razor component in Blazor client application Cssisolation.razor

```
@page "/cssisolation"
<h3>Cssisolation</h3>
<Component1>
</Component1>
```

* Build your application and you can check in your browser dev tools to view your newly scoped CSS classes applied to your components. Your HTML elements will have strange identifiers.

![Browser dev tool to check strange identifiers](https://dev-to-uploads.s3.amazonaws.com/i/3m1f2jqxvhaksbch500b.png)

I hope you understood how Scoped CSS for Blazor components can be achieved. I have attached the sample link [https://github.com/Sridhar-Narasimhan/Blazor-css-isolation](https://github.com/Sridhar-Narasimhan/Blazor-css-isolation) for your reference
Does anyone homeschool here? 
Tags: offtopic, watercooler, rant
Published: 2020-09-12 16:07:54

---
title: Does anyone homeschool here? 
published: true
description: 
tags: offtopic, watercooler, rant
//cover_image: https://direct_url_to_image.jpg
---

I am curious how many people here on Dev.to homeschool their children (all around the world, not just US), since I'm not part of many communities I figured to ask here. With Covid19 upon us (and not going anywhere anytime soon), virtual school has been a complete disaster in my experience both for my children and for me. I have a 9 and 10 years old in the same school. One kid is under worked, the other over worked like the number of assignments is insane. Teachers barely know how to use the site, they put some assignments on the calendar others are for you to find within the deeply nested links. Then they have this virtual attendance system which I don't understand at all, kids need to check in at 9 and then 2:30 even if they are done with the day's school work. I'm so done with public schools to be honest. Yesterday I learned that the districts need this virtual attendance for funding, that's why teachers been texting and calling like crazy even after my children are done with their assignments. 

I am looking mainly for secular (non religious) curriculums I'm kind of liking book shark as a whole kit, but definitely not discarding online curriculums. Besides the core requirements in Texas, I want to add Electronics and Programming to the curriculum since I can teach those two. 

If anyone is in the same boat or has been doing it for a while I'd like to hear your experience.
Twilio-Powered Air Quality Texting Service
Tags: twilio, airquality, programming, wildfires
Published: 2020-09-12 16:07:26

![Alt Text](https://raw.githubusercontent.com/alexdlaird/air-quality-bot/main/logo.png)

With wildfire season upon us, use this handy texting tool to find out what the air quality is in your area. Simply text your zip code to (415) 212–4229 for air quality updates. You can also add “map” to the text to be sent an image of your region.

This service isn’t just useful for individuals with limited access to smartphones or the Internet. It also alleviates the load put on air quality sites like AirNow, which are often overloaded and unavailable during wildfire season due to the spike in traffic. Texting this number instead is a great way to get the same information without bogging down those sites, helping them to stay up for others who need to access them.

Spread the word and stay safe! If you’re interested in nerding out over the code, feel free to check it out on GitHub, and if you have questions or comments, tweet [@alexdlaird](https://twitter.com/alexdlaird) to let me know.
Root Cause: Troubleshoot Puppeteer & Playwright Tests with ease
Tags: opensource, testing, puppeteer, playwright
Published: 2020-09-12 16:04:53

**tl;dr**
Root Cause is a new open-source Node.js library, to help you visualize and troubleshoot your E2E Puppeteer & Playwright tests.
[checkout our demo and integration example on GitHub](https://github.com/testimio/root-cause-interactive-demo/)

## The Challenge   
End-to-end tests are important, so you want a lot of them. They are also difficult and time-consuming to debug.
For example, if a test failed in headless mode, you will need to re-run it, manually save screenshots, debug step-by-step and go through console logs and network requests to understand what went wrong.
Often tests are successful on one run and fail on the next. Like that noise in your car’s engine when you take it to the mechanic—it doesn’t always reproduce. It makes it very hard to debug these tests, or for the mechanic to figure out if your car has a problem.🕵🏽‍♂️ 

## The missing piece
While Puppeteer and Playwright are excellent browser automation libraries, we still need to do a lot by ourselves to understand what’s happening when tests don’t perform as expected.

## The solution: Root Cause Open-Source 🔎
Just a simple integration and without any code change,
Root Cause will automatically detect distinct steps in your tests, capture screenshots, highlight interacted elements, collect console logs, network activity, and stack traces of errors and steps.
All of that is viewable in an intuitive and modern web-based viewer:
     
<sub>Root Cause Viewer</sub>
![Root Cause viewer screenshot](https://dev-to-uploads.s3.amazonaws.com/i/lx52z814s3omv0krsezu.png)

<sub>From Jest test run to Root Cause</sub>
![Root Cause test run and viewer](https://dev-to-uploads.s3.amazonaws.com/i/uz16dj4msw8dmdvt4zum.gif)

## How to get started
Go over to our [documentation site](https://help.testim.io/docs/getting-started-with-root-cause) and checkout our [integration examples](https://github.com/testimio/root-cause/tree/main/integration-examples)
Visit (and ⭐️) our GitHub repository  https://github.com/testimio/root-cause,
or run the demo
https://github.com/testimio/root-cause-interactive-demo/

## Testim 💙 Open Source

Root Cause is an open-source project hosted on GitHub and maintained by Testim. Download, modify, and use in your environment for free.

## Root Cause is evolving, your feedback and involvement are highly valuable

We have a lot of experience with end-to-end tests, but we know that to give the best user experience, you need to hear the user's voice.
And since it's open-source, you can help us make it better!

So please try it, and write to us via [GitHub issue](https://github.com/testimio/root-cause/issues), [GitHub discussion](https://github.com/testimio/root-cause/discussions) or by email: benji@testim.io, bnaya@testim.io
My first GitHub sponsor!
Tags: github, opensource, graphql, wordpress
Published: 2020-09-12 15:58:55

This post was originally [published on my blog](https://leoloso.com/posts/milestone-first-github-sponsor/)

---

2 days ago I subscribed to GitHub sponsors to fund my work on the [GraphQL API for WordPress](https://github.com/GraphQLAPI/graphql-api-for-wp), and I already got [my first sponsor](https://github.com/sponsors/leoloso/)!

![GitHub sponsors](https://leoloso.com/images/leoloso-github-sponsors.png)

Following the example set by Caleb Porzio (who's making [more than u$d 100k/y doing open source](https://calebporzio.com/i-just-hit-dollar-100000yr-on-github-sponsors-heres-how-i-did-it)), I have decided to use the [sponsorware model](https://calebporzio.com/sponsorware) to fund my project. It works like this:

- Whenever I get 10 new sponsors (at u$d 14/m), I start developing the most up-voted feature from a special ["Sponsorware" list](https://github.com/GraphQLAPI/graphql-api-for-wp/projects/2) (which I'm completing as I'm writing this milestone)
- Once implemented, the new feature becomes available to all the sponsors, via a private GitHub repo
- As soon as I get 50 new sponsors, the new feature becomes open source, accessible to everyone via the public GitHub repo, and is integrated into the plugin

![Sponsorware features](https://leoloso.com/images/sponsorware-features.png)

In a few months, I will also start creating instructional videos, explaining how to make the most out of the plugin. According to Caleb, this is the biggest money-making strategy.

I have also decided to add a middle tier (at u$d 70/m), where I provide Slack-based personal support, to help users of my plugin set-up GraphQL with WordPress, troubleshooting, and answering their questions. A user needed help to develop a functionality, so he decided to sponsor me <= my first sponsor ❤️

Finally, I added a higher tier (at u$d 700) for corporate sponsors. I plan to ask around in the WordPress community if their companies may be interested in participating. That would be a win-win: They get face from contributing to open source, and I get the certainty that I can make a living wage from my work and can focus on the development of the plugin (and not on marketing, which is not my forte).

![My sponsors and sponsored projects](https://leoloso.com/images/leoloso-github-sponsor-projects.png)

I hope the sponsorware model works, and I can make a living while working on open source. I'll keep writing updates on how it goes, here on dev.to, on [my blog](https://leoloso.com), and [on IndieHackers](https://www.indiehackers.com/leoloso).
MongoDB Tool Kit 🛠️
Tags: beginners, productivity, mongodb, career
Published: 2020-09-12 15:48:51

First of all, we need mongoDB client. For this i would recommend mongoDB official website where OS specific step wise instructions are provided. 

![Install MongoDB](https://dev-to-uploads.s3.amazonaws.com/i/tsjd2jd4m7t0vqwnwps2.JPG)
Following [MongoDB Installation] (https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/) documentation one can easily install the client. But I would recommend to use [MongoDB Atlas](https://www.mongodb.com/cloud/atlas?tck=docs_server) is a hosted MongoDB service option in the cloud which requires no installation overhead and offers a free tier to get started.   

![run-rs](https://dev-to-uploads.s3.amazonaws.com/i/nk8op8urwwzc26at45mi.png)
[Run-rs](https://www.npmjs.com/package/run-rs) is the easiest way to get a MongoDB replica set running for local development and testing. Sessions and transactions don't currently work on standalone servers, so homebrew and the official Docker image are not viable for local development if your app uses transactions. Run-rs lets you go from not having MongoDB installed to running a replica set in a single command, so download it and get started using MongoDB transactions! Only dependency for Run-rs is NodeJS.

![MongoDB for VS Code](https://dev-to-uploads.s3.amazonaws.com/i/a7a4dwkhzhlm1t2cojws.png)
Last thing we need is an extention for VS code and very aptly called [MongoDB for VS Code](https://marketplace.visualstudio.com/items?itemName=mongodb.mongodb-vscode). It is very easy to use and makes easy to work with MongoDB. Just give it a try, [here](https://code.visualstudio.com/docs/azure/mongodb) is a blog post explaining its different practical use cases.
MacOS Convert Video to GIF
Tags: tutorial
Published: 2020-09-12 15:33:56

Yesterday I needed to convert a video screen recording I made to a GIF in order to upload to Github. I discovered that this can be done quickly and easily with a terminal tool called ffmpeg. Here's how you do it:

### Install ffmpeg and gifsicle (if not installed)
`brew install ffmpeg`
`brew install gifsicle`

### Convert the video to GIF
`ffmpeg -i Screen\ Recording\ 2020-09-11\ at\ 19.36.10.mov -s 1440x900 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > screen-recording.gif`

Replace `Screen\ Recording\ 2020-09-11\ at\ 19.36.10.mov` with the path to the video file and `screen-recording.gif` with the path to the GIF you want to create.

Hope this helps someone :)
Missing 'window' variable in AppDelegate - CoreData
Tags: coredata, swift, iosdevelopment
Published: 2020-09-12 15:32:14

---
layout: post
title: Missing 'window' variable in AppDelegate - CoreData
devto: https://dev.to/narongdejsrn/missing-window-variable-in-appdelegate-coredata-4e5c
devtoid: 454295
canonical_url: https://narongdej.dev/blog/en/2020/09/11/missing-window-variable-in-appdelegate-coredata
comments: false
tags:
- coredata
- swift
- iosdevelopment

---


If you're following along the **"[Setting Up a Core Data Stack](https://developer.apple.com/documentation/coredata/setting_up_a_core_data_stack)"** tutorial for Swift in apple website, and you got stuck on the `rootVC = window?.rootViewController` part, then you're not alone.

Since iOS 13 (Xcode 11) the life cycle of UIKit introduce UISceneDelegate, [read more here](https://developer.apple.com/documentation/uikit/app_and_environment/managing_your_app_s_life_cycle).

Thus, you have to change use the following code instead of in the tutorial

**AppDelegate.swift**

```swift
class AppDelegate: UIResponder, UIApplicationDelegate {

    ...

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {        
        // Just leave it as it, don't change anything
    }

    ...
}
```

**SceneDelegate.swift**

```swift
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {

		...

    rootVC.container = (UIApplication.shared.delegate as? AppDelegate)?.persistentContainer
    
		...

}
```

It sure confuse the hell out of me, when I just getting start developing iOS app and following the tutorial.
meta-fetcher: URL meta-data fetcher for Node.js
Tags: showdev, javascript, webdev
Published: 2020-09-12 15:27:03

Hi, Myself Rocktim Saikia. And today I want to showcase a simple project that I have been working on for couple of days now.

## meta-fetcher 🔎
**meta-fecther** is simple and tiny url meta-data fetcher for Nodejs. Under the hood this module uses [node-fetch](https://github.com/node-fetch/node-fetch) to fetch the meta tags of given website url and returns the parsed meta-data as a `JSON` object.

{% github https://github.com/RocktimSaikia/meta-fetcher/ %}

## Install

```sh
npm install meta-fetcher
```
## Basic Usage
```js
const {fetchMetaData} = require('meta-fetcher');

(async () => {
	const result = await fetchMetaData('https://hoppscotch.io/');
    	console.log(result);
    
    /*
        {
        basic_metadata: {
            website: 'https://hoppscotch.io/',
            title: 'Hoppscotch • A free, fast and beautiful API request builder',
            description: 'A free, fast and beautiful API request builder'
        },
        opengraph: {
            'og:image': 'https://hoppscotch.io/banner.jpg',
            'og:type': 'website',
            'og:title': 'Hoppscotch',
            'og:site_name': 'Hoppscotch',
            'og:description': 'A free, fast and beautiful API request builder',
            'og:url': 'https://hoppscotch.io/'
        },
        opengraph_social: {
            'twitter:card': 'summary_large_image',
            'twitter:site': '@liyasthomas',
            'twitter:creator': '@liyasthomas'
        },
        favicons: [
            'https://hoppscotch.io/icon.png',
            'https://hoppscotch.io/icon.png',
            'https://hoppscotch.io/_nuxt/icons/icon_64x64.9834b3.png'
        ]
        }
    */ 
})();

```
<br>

It can also fetch meta-data from `shortened-url`.
For example:
```js
const {fetchMetaData} = require('meta-fetcher');

(async () => {
	const result = await fetchMetaData('https://bit.ly/2Fj9sNF');
	console.log(result);
})();
```
There a few advanced options that you can use before fetching. You can check them in the `readme.md` section.

<br><br>

***If you like the project. Do leave a [star at repo](https://github.com/RocktimSaikia/meta-fetcher/) 🌟***
What is Node.js
Published: 2020-09-12 15:20:30

Typically Javascript has been used to write front end, but thanks to Node.js. It has unique APIs that support HTTP requests, file systems and other server-side features for which frontend APIs provide limited support. 
Here are some advantages of Node.js: A easy going model allows serving multiple simultaneous requests, making high requests from large platforms execute fast.;
For modern web apps, Node.js has the one of the fastest responses and flexibilities.;
Since It is used in javascript already, it cancels out the need to use other technologies.;
Since it is done on one language you don't need to know more additional code, knowing javascript is enough syntax.;
Its a lot less complex than other languages, and easier to read.;
Node.js is an open-source technology that does not require costly licensing.;
You can find a lot of help for node js online.
... after a while, VS Code is damn sluggish and unresponsive on my notebook.
Tags: discuss, vscode
Published: 2020-09-12 15:13:46

I keep coming back to sublime text because of this issue after a while of coding and browsing in the internet to do search for some methods that i can use on my side project VS CODE become slow, i can't click on anything and after 30 sec to one minute, so it become responsive again. I run Linux Mint BTW. I don't know if it's just my laptop or it's the software.
 
SPEC OF MY LAPTOP:
  i3 6000U,
  4gb RAM,
  radeon m430 (dedicated gpu).
One liner to fetch the value from hash in Ruby.
Tags: ruby, rails
Published: 2020-09-12 15:13:38

Struggling with fetching values from nested hash and looking for one liner, to get the work done. 
Here, is something really fun I have found. Have a look at it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vcteumbldueit848e9b8.png)

Have fun using it. And don't forget to drop some love and comment.
SQL Dump in Docker
Tags: sql, docker
Published: 2020-09-12 14:48:26

First, enter your mysql docker container.

```
// in your local machine
$  docker exec -it up_mysql_1 /bin/bash
```

Dump your file.

```
# mysqldump -u root -p DB_NAME > outputfile.sql
```

The file will be dumped in your docker container.
Transport the file to your local machine using the following command.

```
// in your local machine
$ docker cp CONTAINER_ID:/outputfile.sql ~/Documents/outputfile.sql
```
Mid Meet Py - Ep.22 - Ask us anything
Tags: python, chat, talkshow, devrel
Published: 2020-09-12 14:16:22

---
title: Mid Meet Py - Ep.22 - Ask us anything
published: true
description: We meet in the middle of the week to chat about Python!
tags: python, chat, talkshow, devrel
---
PyChat
  Very important - [Pyjamas CfP extended to 19th Sept!!!!](https://twitter.com/PyjamasConf/status/1301994754343927811)
  [Humble Data](https://twitter.com/HumbleData) workshop with PyData Global @ 7th November
  [PyCon AU recording is out](https://www.youtube.com/user/PyConAU)
  [Some recent stats on Woman in Eng (EWB South Africa)](https://twitter.com/EWBSA/status/1298605057068486657)

[Listen to MidMeetPy podcast](https://anchor.fm/midmeetpy)
Regex: Convert markdown links to HTML anchors
Tags: beginners, javascript, php, markdown
Published: 2020-09-12 13:51:47

Your typical Markdown link is in a bracket/parenthesis format:
```
[I'm an inline-style link](https://www.google.com)
```
…but you may want to convert it to an HTML format:
```
<a href="https://www.google.com">I'm an inline-style link</a>
```
To convert that using Regular Expressions, you can use an expression:
```
/\[([^\]]+)\]\(([^\)]+)\)/
```

#### For Javascript ([try it](https://jsfiddle.net/3zhgLnev/)):

```
var markdown = "[I'm an inline-style link](https://www.google.com)";
var html = markdown.replace(/\[([^\]]+)\]\(([^\)]+)\)/, '<a href="$2">$1</a>');
alert(html);
```

#### For PHP ([try it](http://codepad.org/3I1xVo46)):

```
<?php
$markdown = "[I'm an inline-style link](https://www.google.com)";
$html = preg_replace('/\[([^\]]+)\]\(([^\)]+)\)/', '<a href="\2">\1</a>', $markdown);
echo $html;
```

### Breakdown
```
/  \[([^\]]+)\]\(([^\)]+)\)  /

\[([^\]]+)\]
   \[    Look for a literal left bracket, by escaping it
   (     Start a capture group to retrieve the contents
  [^\]]+ Repeatedly find a character that isn't a closing bracket
   )     Close the capture group
   \]    Look for a literal right bracket, by escaping it

\(([^\)]+)\)
   \(    Look for a literal left parenthesis, by escaping it
   (     Start a capture group to retrieve the contents
  [^\)]+ Repeatedly find something that isn't a right parenthesis
   )     Close the capture group
   \)    Look for a literal right parenthesis, by escaping it
```