teleren/devto huggingface dataset:
Web-based collaborative text editor with ProseMirror and a syncing database
Tags: showdev, react, typescript
Published: 2020-08-04 15:10:52

We have created an [interactive demo](https://emergence-engineering.com/blog/prosemirror-sync-1) for web based collaborative text editors. 

# TLDR
* We introduce a method to create a web based collaborative editor based on ProseMirror
* We use PouchDB (CouchDB) to abstract away all the hassle that comes with directly managing WebSockets
* Any database with real time syncing functionality can be used
* For the interactive demo we used React and TypeScript

# Details
With the collaborative editing functionality in ProseMirror it's possible to create documents that are editable by multiple users at the same time. Although the prosemirror-collab module is not very hard to use, a communication layer is necessary for the clients to receive new steps to update their local document, keeping them in sync. This is usually done with WebSockets, which adds another layer in the stack where bugs can hide. This article shows a path to get rid of that layer by using a well-tested layer in the form as a syncing database. In this article PouchDB/CouchDB is used, so the emulated "server" can also live in the browser, thus making the example simpler. This approach has also been tested with Firestore.

# Code
The code is available [here](https://gitlab.com/emergence-engineering/blog/-/tree/master/articles/prosemirror-sync-1)
How to set up a canonical URL in Eleventy
Tags: 11ty, eleventy, seo, jamstack
Published: 2020-08-04 15:29:48

---
canonical_url: https://ramigs.dev/blog/canonical-url-11ty/
---

Cross-posting can be a great way to expose your content to new, larger audiences.

Nonetheless, it's important to consider the implications it can have on page ranking and SEO.

When you syndicate an article for publication on different domains, setting up a canonical URL will let [search engines](https://support.google.com/webmasters/answer/139066?hl=en) know which page should be considered the original, and which ones duplication.

To do this, we need to include in all the duplicate versions a `<link>` tag pointing to the **[canonical URL](https://yoast.com/rel-canonical/)**.

Implementing this in [Eleventy](https://www.11ty.dev/) is pretty straight-forward.

Edit your default layout (probably `_includes/layouts/base.njk`), adding the following inside the `<head>` tag:

```html
{% if canonical %}
  <link rel="canonical" href="{{ canonical }}" />
{% endif %}
```

Basically, we're conditionally adding the `<link>` tag, depending on whether a key `canonical` exists in the [front matter](https://www.11ty.dev/docs/data-frontmatter/) of the content page.

> If you're not using Nunjucks, check out the documentation of your template language to find out how to conditionally render HTML.

Then, in the front matter's content file, simply add a `canonical` key pointing to the original URL, like so:

```yaml
canonical: "https://dev.to/you/your-awesome-article"
```

Build your static site again and confirm that the `<link>` tag is present.

Done!
WooCommerce Filters (Order By Custom Fields)
Tags: wordpress, php, plugin
Published: 2020-08-04 15:28:43

The Admin Custom Order Fields allows you to add fields to an order for details, notes, dates, and more. These fields can also be used to sort or filter orders in the order dashboard, and are geared towards streamlining and centralizing order information and notes.

{% gist https://gist.github.com/imuhammadshoaib/48fccfde3a11816f80151ec94bf2c08e %}

By default, these fields can only be viewed by the administrator in <code>WooCommerce->Orders</code> page.
🔥 How to Perform POST, DELETE, PUT, GET Method in Rest Assured? 
Tags: tutorial, beginners, webdev
Published: 2020-08-04 15:19:08

Hey BugHunters,  In this video we are going to discuss How to Perform POST, DELETE, PUT, GET Method. 

[![ Rest Assured Tutorial](https://i.imgur.com/xiprDxP.png
)](https://youtu.be/-5yT_AmFrMw "Rest Assured Tutorial")

This is part of the video serious REST Assured API testing Beginner Tutorial

P.S: 
This is Day 14 of the 30 days of API Testing challenge Series. Where will learn the Basics before jumping to API Automation.

🚀 Download code : https://scrolltest.com/ra/day14

🚀 All 30 Days Task - https://scrolltest.com/30days/restassured
📌 Join 30 Days Challenge Updates - https://scrolltest.com/tta
🎓 Free Automation Masterclass - https://thetestingacademy.com
📚 REST API testing with Python - https://masterapitesting.com


-- 

Be sure to subscribe for more videos like this!

[![TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
The Video: Using ReactFire with Ionic Framework & Capacitor
Tags: javascript, firebase, react, ionic
Published: 2020-08-04 15:17:32


{% youtube u0ZlaIN-zEk %}

>This is a continuation of the previous post I did on [ReactFire](https://github.com/FirebaseExtended/reactfire) and [Ionic Framework with ReactJS](https://ionicframework.com/docs/react) which is available here: https://dev.to/aaronksaunders/using-reactfire-with-ionic-framework-capacitor-35g6

In video we walk through
- Explaining the authentication routing for public and private routes.
- Use of the [ReactFire](https://github.com/FirebaseExtended/reactfire) Hooks and Components
- Creating an account using [ReactFire](https://github.com/FirebaseExtended/reactfire)
- Adding items to a collection with [ReactFire](https://github.com/FirebaseExtended/reactfire)

#### Ionic ReactJS
We also spend some time discussing the using of common [Ionic ReactJS Components](https://ionicframework.com/docs/react), Alerts, Modals.

#### Ionic Web Apps, Mobile Apps
The application source code has been tested to run not only as a website buta mobile application on IOS and Android using [Ionic Capacitor](https://capacitorjs.com/)

## Full Source Code Available
{% github aaronksaunders/ionic-react-hook-form-react-fire %}
What headphones/earphones do you wear when coding?
Tags: webdev, watercooler, discuss, productivity
Published: 2020-08-04 15:16:41

I have the Bose QuietComfort 35 (Series I) Wireless Headphones in Silver. They are about 5 years old but still work perfectly unlike  those pair of Beats Solo I had a few years back that seem to be built to last a year only before they fall apart 🤣
Journey of my first CSS art
Tags: css, webdev
Published: 2020-08-04 15:04:37

#Introduction

Today I made my first CSS artwork. It was a coffee mug. And thinking of sharing this with all, I am writing this post. I consider it a journey because it is very different from writing CSS for styling websites.

I styled a lot of websites using CSS but never made a CSS artwork. Whenever I saw any artwork on Twitter shared by the dev community I thought about the difficulty in making it. I thought that there might be a lot of work went into it and a lot of CSS knowledge that I still don't have. But today I found an [article](https://dev.to/laasrinadiaa/make-your-first-css-art-29jo) on dev.to that helped me in starting and making my first CSS artwork. It contains the link to some important websites that you will need.

I saw many artwork codepens and the second thing that my eyes saw was the length of code. This made me upset.

#Starting with the artwork

But today I just made a folder in my documents folder and opened VS Code and made two files: index.html and style.scss.
Yea, I use SCSS and not CSS as SCSS makes writing CSS a lot easier. But then when I was going to start typing HTML, I started wondering about the thing that I was going to create.

Then I opened FIGMA, design tool that I use. And made a new file. Then I started designing the coffee mug that I saw in the above mentioned article. I didn't copy the code or referred to the code, but instead used my prior CSS knowledge. I made a design with element hierarchy.

Then I made the div for the cup, that I took as the base for making the art. And began styling it. It took me some time to style the cup but subsequent elements took no time. The artwork was ready in an hour's time.

#Feelings After completing it
I was feeling great after completing it. I got my lost confidence, that was really needed. I posted it on [codepen](https://codepen.io/sahil2004/pen/GRZKaQg) and then shared it on Twitter as well with the community that appreciates it.

#Conculsion
If you have even a little knowledge about CSS, then just start making it. It will teach a lot of things during the journey. The best experience can be gained by doing it and not reading other's experience. Take this post as a motivation for you to start making your own CSS artwork.
#30DaysOfCJS: Programming the Cloud with JavaScript
Tags: community, cloud, javascript, conferences
Published: 2020-08-04 15:01:21

---
title: #30DaysOfCJS: Programming the Cloud with JavaScript
published: true
description: #30DaysOfCJS Day 3, Programming the Cloud with JavaScript
tags: community, cloud, javascript, conferences
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/muvg9k25ncjvhks9vd5i.png
series: 30DaysOfCJS
---

*This is a follow up post for Day 3 of* **#30DaysOfCJS**, *learn more about* **#30DaysOfCJS** *here* {% link jimcalliu/30daysofcjs-1jd3 %}

**Programming the Cloud with JavaScript | Christian Nunciato | CascadiaJS 2019**

If you'd like to watch the talk, here is the Youtube link, as well as [slides](http://slides-67a1781.s3-website-us-west-2.amazonaws.com) and [Github repo](https://github.com/cnunciato/cjs2019).

{% youtube nfridRBNfds%}

Further readings:
- [Pulumi](https://www.pulumi.com/docs/)
- [Amplify Framework](https://docs.amplify.aws/)
- [AWS CDK](https://docs.aws.amazon.com/cdk/latest/guide/home.html)
- [Begin](https://docs.begin.com/)
Best Visual Studio Code Extensions.
Tags: vscode, webdev, computerscience, codenewbie
Published: 2020-08-04 15:00:56

# This is how I use the best efficiency of Vs Code. If you are using Vs Code as your IDE then this full blog is for you. It will help you to boost your productivity. Many of you know these extensions already but if you found some new extension that is helpful for you then please give me your reaction. And also if you know any other best extensions of Vs Code then also please suggest their name in the comment.

---

## 1:- vscode-icons

![vscode-icons ss](https://dev-to-uploads.s3.amazonaws.com/i/f14itetydl8g6wsk86sv.png)

* It doesn't change anything in vs code setting. It just gives you a better visual experience. It shows file icons with bright and sharp colors.
* It makes very easy to find files and visualize the file and also the type of file.

## 2:- GitLens

![GitLens Ss](https://dev-to-uploads.s3.amazonaws.com/i/3oir1m8en8q6tmhkq3r8.png)

* This is the best Extension that I found helpful for working with Version Control(Git and Github). It will give a lot of feature form out of the box.
* The best feature of it's. It shows the recent commit message and associated author inside the code editor for the line which you are currently editing.

## 3:- Auto Rename Tag

![Auto Rename Tag ss](https://dev-to-uploads.s3.amazonaws.com/i/95km4tn4fraca5k3xqbm.png)

* It is a very small in size but a very useful extension for writing HTML documents.
* It will automatically change the end Tag If you change the starting tag.

## 4:- Live Server

![Live Server ss](https://dev-to-uploads.s3.amazonaws.com/i/bzgqsw8haiovjrp4o5sd.png)

* I use this extension a lot. If you woking on a web-project this will very helpful for you.
* It automatically updates the browser when you change something in your codeBase and saved.
* It also makes a server on the computer so, it will also use for server-side languages like Php and Node.

## 5:- Rainbow Brackets

![RainBow Brackets ss](https://dev-to-uploads.s3.amazonaws.com/i/gxaomkwj00k0l8fpgybh.png)

* It will provide you a beautiful colored code-base and also readable for the humans.
* It is an amazing time sever.
* It will simply give color coordination for matching brackets.

---

## This is not the end of Extension list.
Microjobs: complete tasks for other engineers
Tags: discuss
Published: 2020-08-04 14:49:26

I had a idea today about a micro jobs posting website.  A micro job is a feature that needs to be implemented for a product.  For example, someone needs to implement Stripe for credit card payments for their website.  They don't want to wast time learning about Stripe API and they don't care.  They just need it done. 

But finding someone to do it is so time consuming that people rather do it themselves.  Microjobs solves this by allowing people list micro jobs that needs to be completed.  Other engineers can apply for the job only if they can share a repo showing they have done the work before. 

Unlike other freelance websites like Upworks, all job postings are first reviewed by us to make sure its specific and objective. You won't see postings like 'make a social network like fb'.  All micro jobs must be doable within 1-3 weeks or we will reject them. 

Engineers earn $50-$1000 per micro job.  We take 10% for administrative task like connecting engineers with customers and handling disputes. 

This is just an idea for now.  Check out the full details on www.microjobs.dev. Let me know what you guys thinks.  I am looking for feedback. 

Website: microjobs.dev
Nodejs Express Project Structure For REST API
Tags: projectstucture, node, express, javascript
Published: 2020-08-04 14:46:10

Hello all,

Before I start about the NodeJs project structure let me introduce myself. I am Srujal Patel, the Full Stack Web Developer.

Do find for Nodejs project structure and you will find very few structures.
In fact, most of the Nodejs tutorials also won't be using any proper file structure.

Today I will explain to you my own Nodejs project structure created using express REST API.

Let's start it will take 5 to 10 min read the whole blog and implementation will give you a real idea about this project structure.

![File Structure Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/1jivvqwedxyj68c92fin.png)

The first config folder contains all the configuration variables JSON files.
![Config Folder Demo Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/8cmb7d7slkfnltzxa7x5.png)

Constant folder contains the const variable which can be used in the whole project. I have used two demo versions - one for sending the static message in response and the parent route name. 
![Constat Folder Sample](https://dev-to-uploads.s3.amazonaws.com/i/51b3bb5ud7r4ok62t9x6.png)

Cors folder work as middleware in the whole project. I have created some sample middleware in the project like sending emails, check token for each and every route, and send the response after REST API execution has been finished.
![Cors Folder Sample](https://dev-to-uploads.s3.amazonaws.com/i/mpoo17exgt414v73y6ur.png)

The routes folder is having 2 files one for creating the routes and another file is known as the controller.
The controller file uses for controlling the flow like calling the service, taking the request and sending the response as well.
![Routes Folder Sample](https://dev-to-uploads.s3.amazonaws.com/i/uk6t1s23m1qrchyrraqn.png)

The Service folder is having files for creating services.
This file can be divided into two parts one for database related query and second for after getting the data from the database do some coding for business logic. But here I have considered both tasks will be kept in one place. (it's up to you if you want to divide, go for it).
![Service Folder Sample](https://dev-to-uploads.s3.amazonaws.com/i/1aqufzip1kefnmqmt0mp.png)

The upload folder is having all the static file which can be used to retrieve without any API calling or basically without any authentication.

Then the validation folder is having all the routes validation.
![Validation File Sample](https://dev-to-uploads.s3.amazonaws.com/i/wtz1t8nov03vilgycc6r.png)

There is a server file which is I think the heart of the node-express application. Server file will have the DB connection, starting the node-express application and many more.

I Hope this file structure will help you to build projects.

If you like this structure please don't forget to give me a star on Github.
If you have any issue, suggestion, idea or modification please use GitHub to create an issue or pull request.

{% github https://github.com/iamsrujal/nodejs-file-stucture-express %}
CSS Music Player
Tags: codepen, css, flexbox, design
Published: 2020-08-04 14:45:36

When I've done a lot of hard work during my dev-job, I love to get back to my comfort zone.

I do this by building simple designs for relaxation. For some, this will be a challenge, but if you have built thousands of designs from Photoshop to HTML and CSS, this can be really relaxing.

{% codepen https://codepen.io/frontendmr/pen/WNQWopO default-tab=result %}

I got the design from [Rovane Durso](https://dribbble.com/shots/998479-Music) on Dribbble.

If you would like to see a tutorial where I build this step by step, please let me know in the comments 👍.

---

I'm currently working on a series about building a Serverless Webshop with Angular, Serverless functions, and [FaunaDB](https://dashboard.fauna.com/accounts/register?utm_source=DevTo&utm_medium=referral&utm_campaign=WritewithFauna_BuildServerlessWorkshop_Raymon_recommendation) which I highly recommend checking out.

{% link https://dev.to/devbyrayray/how-to-build-a-serverless-webshop-167a %}
What I did to go from 20 to 400 users in 3 days
Tags: webdev, career, showdev, productivity
Published: 2020-08-04 14:40:43

Picture by [Austin Distel](https://www.distel.com/)

[Worktunes](https://worktunes.co/) went from 20 users reached the first day to 400 in 3 days. Here's what I did:

### Dev.to article: 270+ Users reached

I published [this article](https://dev.to/jordienr/5-things-learned-from-launching-my-first-app-and-getting-my-first-20-users-4pan) and got really good feedback and some users contacted me to ask about how I made the app. I have an article on the list explaining that and also I'd like to open source a vuejs + firebase boilerplate that I use (made by me).

### Twitter: 80+ Users reached

After publishing the article on dev.to they shared it on twitter. I can't check how many impressions it had but I got around 80 users from twitter so it probably had more than 4000 impressions.

### Indiehackers: 40+ Users

I just shared a quick post on indiehackers, I'm pretty sure if I had written something better like I did for dev.to I could have gotten way more reach.

### Makerlog: 10+ Users

I really like makerlog, I just share what I do throughout the day there and talk with other indie makers. 

## Conclussion:

Since I have less than 100 followers on twitter I thought it'd take me way more time of promoting the app to reach 250 users, which was my goal for this month. Now my goal is 500 and improve the app.

Thank you for reading, have a good day ✌✌
Webinar - Data Validation Tool Great Expectations 101: Getting Started
Tags: datascience, python, database
Published: 2020-08-04 14:35:48

![get in data person!](https://i.imgflip.com/49xeap.jpg)

###<br><br><span>&#129504;</span> Great Expectations 101 Webinar: Getting Starting with Q&A
Happy to announce our new webinar series: Great Expectations 101!

_For those just learning about Great Expectations check out our GitHub: https://github.com/great-expectations/great_expectations_

We are going to kick off our new webinar series by hosting a “Getting Started” session, which will be focused on getting you up and running with Great Expectations. [Sam Bail](https://twitter.com/spbail) and the core Great Expectations engineering team will be guiding you through what it takes to deploy and run Great Expectations successfully.

By the end of the session you’ll be able to:

- Create and edit Expectation Suites
- Configure new Datasources
- Understand what Great Expectations does under the hood
- Validate your data with Great Expectations
- Navigate validation output in Data Docs

After the demo there will be plenty of time for a Q&A with Sam and the core Great Expectations engineering team.

The session is aimed at new users who would like some help getting started with Great Expectations, or existing users who would like a refresher of the base concepts - or just want to chat with the core Great Expectations engineering team!

We are going to schedule this event twice to try and cover as many time zones as possible! Here’s the schedule:

- Thursday July 30th @ 9am US Eastern (_event has passed video will be published_)
- **Thursday August 6th @ 4pm US Pacific [sign up here](https://www.surveymonkey.com/r/greatexpectationswebinaraug7)**

Alternatively, you can find the Zoom link for the July 30th @ 9am in our [Slack channel](https://greatexpectations.io/slack) in #announcements or sign up with the links above. The sessions will also be recorded, watch out for an update if you can't make any of the dates.

Looking forward to seeing you all there!
iOS 14 - Biggest announcements made by Apple 
Tags: ios
Published: 2020-08-04 14:29:57

Apple started its annual World Wide Developers Conference (WWDC) 2020 on 22nd June 2020. In general, this particular conference takes place in the month of March every year. It was hosted online this year since it was delayed due to the COVID 19 pandemic.

iOS 14 is the biggest announcement at WWDC 2020
iOS 14, the new edition of iOS, has been rolled out to iOS app development programmers in preview mode from 22 June along with a beta release that is planned sometime during July.

App Library – Users should be able to classify their applications with App Library which are spread on separate home screen pages. You can pick the number of pages you need to search in the home screen and then classify the remainder of the applications as Recently Added, Suggestions, as well as other folders. You also can check for such applications using the search tool provided, where you’ll see each alphabetically enlisted application.
Widgets – iOS 14 offers several widgets which you can also display on the main screen. Clicking the Widget Gallery feature will help you to customize them. To search for any related application, click the Smart Stack link, and this will depend on what time it is.
iMessage – Today users should pin their messages so as not to get lost while chatting. You may address a particular message when conversing in a community and list others as well. Features are now introduced in iOS 14 to choose various ages as well as new Memojis with specific hairstyles, facial filters, skin colors, and expressions such as fist bumps, kisses, and embraces.
Translate App – These will enable Siri to convert what you’re saying into 11 languages that include English, Italian, Japanese, Spanish, and much more. You can perform the translation offline, too. Siri is 20 times more conscious of reality than before, as per Apple. You can now also ask Siri to send out an audio clip too.

Apple CarPlay – Apple CarPlay is going to help you alter the wallpaper on your in-car device. You can unlock the vehicle by simply clicking on your iPhone. Simply place the gadget on the charging pad and turn the car’s start button on. Their key can be shared by the users via iMessage. The 2021 BMW 5 Series has been declared by Apple to be the best-known vehicle to support CarPlay.

Apple Maps – An innovative feature named Apple’s Guide will help users locate astounding places around them by showing other users’ latest suggestions. Cycling directions would be introduced to the Apple Maps so that users can view traffic on the roads, bike lanes, and paths, as well as advancement data.

App Store – Apple has announced App Clip to automatically download only one aspect of the program when you need it. Your original authentication and credit card information are filled in via Apple Login and Apple Pay. This package will be no more than 10 MB in size.
 
Let's know here more updates:https://www.rlogical.com/blog/ios-14-biggest-announcement-made-by-apple-at-wwdc-2020