teleren/devto huggingface dataset:
Creating a Chrome extension for Webflow
Tags: help
Published: 2022-01-13 12:03:51

I'm a bit lost, I know it can be done because there is another extension that does it, but I can't quite understand what I should be looking at in order to replicate the operation.

Basically I would like to create a Chrome extension for webflow that allows the user to do 2 things with one click:
1- Generate elements automatically (for example create a series of <div> with certain characteristics)
2- Paste items from the clipboard.

Webflow doesn't have a Designer API, so I understand that all of this has to be done by interacting directly with their .JS, right?

Can someone point me in the right direction about what I should do research in order to find a way to do it.

I already opened the other extension that does it in VS Code to try to understand, but the code is all minified and you can't really understand much.

Thanks for any help!
MQ Pro RISC-V Single-Board Computer — and Router — Inspired by the Raspberry Pi Zero
Tags: beginners, programming, tutorial, news
Published: 2022-01-13 12:02:28


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzmo62w9arnu61ebshq2.jpg)
https://shopmakergenix.blogspot.com/2022/01/mq-pro-risc-v-single-board-computer-and.html
Use Tin to quickly set up Redmine
Tags: beginners, programming, tutorial, opensource
Published: 2022-01-13 11:44:28

Redmine is a flexible project management web application. Written using the Ruby on Rails framework, it is cross-platform and cross-database.

Tin is a product of TeamCode that can generate executable applications instantly without manual environment configuration. Users can click to run project directly in the cloud. 

Login to Tin and clone the Redmine

1. Click the Tin URL of Redmine.
https://www.teamcode.com/tin/clone?applicationId=273491598257844224
Users who have not logged in should sign up first.

2. Log in to Tin with your email, Github account, or phone number.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mv6jsdbfr6d2d9x49e23.png)

3. (Optional) After logging in, you can change the “Application Name” or “Tag”。

4. Click "Clone" button to clone the Tin app to your workspace.
Note: Tin will give new users a free trial for a certain length of time, which is determined by the instance size. After the free trial time, the Tin app will automatically stop working. You will not be charged for the whole process. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26fec89bvb9tzgowbx66.png)

5. Click "RUN NOW" to initiate the application.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xgxr0r7pn2czhc9p6xab.png)

6. Click the "Primary Endpoint" button and you will visit Redmine immediately.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dywh7agmbf5fy8ed29z.png)

Now you can log in to Redmine to use it.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yaoayvkfci3a6jt6mxcw.png)

You can also use the Tin to quickly set up other open source projects, see the guide: https://www.teamcode.com/docs/en-US/tin/create-tin
Ubuntu 22.04 to Bring the Desktop to Raspberry Pi 4 2GB Users
Tags: programming, beginners, tutorial, discuss
Published: 2022-01-13 12:01:18

https://www.tecnohub.org/2022/01/ubuntu-2204-to-bring-desktop-to.html

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v9lr5k9eec1y8ktc0ox1.jpg)
What Can You Control?
Tags: discuss, growth, personal, improvement
Published: 2022-01-13 12:01:10

---
title: What Can You Control?
published: true
description: Only what you think and do, not what happens to you.
tags: discuss, growth, personal, improvement
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5asbeaoo32vw1ctbu4jw.jpg
---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/what-can-you-control/)._

> You control what you think and do, not what happens to you. Life will, hopefully, throw challenges your way. From them, you will either learn and grow or not, and degrade/plateau.

---

This is [why I write](https://www.nikola-breznjak.com/blog/daily-thoughts/why-do-i-write-these-daily-thoughts-posts/) these 'daily thoughts' posts.
how to remove the parent input field value on click of child component clear button?
Tags: typescript, angular
Published: 2022-01-13 11:58:39


I have 2 issues facing with angular form.

```
<form autocomplete="off" ngNativeValidate class="row g-3 mb-3">
       
        <div class="col-md-12">
            <i class="bi bi-asterisk star"></i>
            <input type="text" placeholder="Description" id="txtBuildDescription" #BuildDescription name="Description" [(ngModel)]="build.BuildDescription" class="form-control form-control-sm" required>
        </div>

<app-info [build_row]="build_row" (parentSettings)="changSettings($event)" [build]="build"></app-info>
       
</form>
```

```
<form #infoBuild="ngForm" ngNativeValidate name="infoBuild" (keydown.enter)="$event.preventDefault()"
        (ngSubmit)="initiateNewBuildRequest()" autocomplete="off" class="row g-3">

<div class="col-md-4">
            <input type="text" placeholder="Build Request No" name="BuildRequestNo" required [(ngModel)]="model.BuildRequestNo"
                class="form-control form-control-sm">
        </div>
        <div class="col-md-2">
            <input type="text" placeholder="Rev" name="BuildRequestNoRev" required [(ngModel)]="model.BuildRequestNoRev"
                class="form-control form-control-sm">
        </div>
        <div class="col-md-6">
            <input type="text" placeholder="Description" name="BuildRequestNoDescription" required
                [(ngModel)]="model.BuildRequestNoDescription" class="form-control form-control-sm">
        </div>

<div style="margin-top: 20px !important;" class="text-center">
           <button type="button" style="zoom: 75%;" (click)="clearBuilds()" class="btn btn-warning btn-sm"><i
                    class="bi bi-patch-minus"></i>&nbsp;Clear</button>           
        </div>
</form>
```

1. on click of child "clear" button I want to remove the value from the parent fields, how to remove the parent input fields.

2. in the page I have 2 components, and the clear button is exist in child component, I am using required tag to validate the mandatory fields.

I am using ngNativeValidate to validate the form, it won' submit the form until user fill the required tag input fields.

in my case clear button is there in child component, and the form validation is working fine for child component fields, how do I make sure child button also should validate parent required input fields.
Fixing Firefox connection problems after enabling DoH
Tags: help, productivity, news, bug
Published: 2022-01-13 11:58:07



The latest version of Firefox (96.0 and 95.02) has a [bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1749908) when you enable DoH (DNS over HTTPS). It seems that it gets stuck at in the 'SocketThread'. In this post, i will show you how to fix your Firefox connection problems after enabling DoH.

To resolve this issues you can simply type **'about:config'** in your Firefox url bar and disable the HTTP3 support by using the **'network.http.http3.enabled'** keyword. Here you should change the value to **false**.

I hope this helps fixing your issue.

🔷 I published this post on my [blog](https://www.harun-sevinc.com) 🏠
🔷 If you liked it you may follow me on [twitter](https://twitter.com/harsvnc) 📣
Running the command Heroku local with PHP 8, nginx and php-fpm on macOS
Tags: heroku, php, 8, macos
Published: 2022-01-13 11:52:36

Hi there!

I was trying to get the heroku local command running in my macOS Monterey but I stumbled in some issues. Then I'd like to share with you my process to get that working.

First things first, check if you have your require-dev section into your composer with that library:

```json
    "require-dev": {
        "heroku/heroku-buildpack-php" : "*",
```

After that, add this tap to homebrew:

`brew tap shivammathur/php`

Right after, run these commands:

`brew install shivammathur/php/php@8.0`

`brew link --overwrite --force shivammathur/php/php@8.0`

Sometimes you need to restart your terminal to see php running and available to use. So if you run: `php -v` you're going to see current php version installed on macOS.

Now try to run `heroku local` and whether it works we don't need to change anything but if doesn't and you're seeing messages telling you something like these:

- php command not found
- php-fpm command not found

So I can help you, it happens because you need to add right folder with binaries from php8, what I did was:

```
echo 'export PATH="/usr/local/Cellar/php@8.0/8.0.14/sbin:$PATH"' >> ~/.zshrc
```
Restart you terminal after that command and now you can type for instance: `php-fpm` and it's there!

Now `heroku local` should work!
DEV_Lintree - LinkTree for DEVELOPERS
Tags: atlashackathon, mongodb, react, javascript
Published: 2022-01-13 11:47:09


[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission

My project Dev_LinkTree allows its user to share all their links in 1 single page to anyone all around the globe. 
Along with this, 

* If user uses DEV.to, all the person's blogs are automatically 
 shown as one of the links. 

* If user uses Github, all the person's hosted projects(link made available in website option) is shown via single link.

The user can add/delete the links they created with secure logins.

The main aim of my project is to help the user organize their portfolio with their blogs/projects all in one place.


### Submission Category: Choose Your Own Adventure


### Link to Code
{% github FidalMathew/Dev_Linktree %}


### Additional Resources / Info
 
Create your DEV_LinkTree here - https://dev-linktree.herokuapp.com/

My DEV_LinkTree - https://dev-linktree.herokuapp.com/user/fidalmathew
![Linktree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gpkt8pez7foac2ia9ul.gif)
<br>
Edit DEV_LinkTree Page 
![Edit LinkTree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmrjemdgv36mb0hhfdvc.gif)
Login Page

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

Signup Page
![Signup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hlblc8a5m4qjtrcz2ds7.png)

### Conclusion
This project is my first ever MERN project I have deployed. I learnt a lot while building this project and hope to build more in future.
Thank you DEV Community and MongoDB for organizing this hackathon.
Finder
Tags: atlashackathon
Published: 2022-01-13 11:35:37

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
I have built this simple console python tool called finder,
Using the powerful search functionality of [Atlas Search](https://www.mongodb.com/atlas/search)


### Submission Category: 
E-Commerce Creation

### Link to Code 
{% github LEO1612D/finder %}
Use Tin to quickly set up phpBB
Tags: programming, tutorial, productivity, opensource
Published: 2022-01-13 11:35:37

PhpBB is a popular open-source bulletin board written in PHP. 

Tin is a product of TeamCode that can generate executable applications instantly without manual environment configuration. Users can click to run project directly in the cloud. 

The guide below shows how to quickly install phpBB2.0 through Tin.
Login to Tin and clone phpBB2.0
1. Click the Tin URL of phpBB2.0.
https://www.teamcode.com/tin/clone?applicationId=273460556549484544
Users who have not logged in should sign up first.

2. Log in to Tin with your email, Github account, or phone number.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obzt70slrqjwuoi73ij1.png)

3. (Optional) After logging in, you can change the “Application Name” or “Tag”.

4. Click "Clone" button to clone the Tin app to your workspace.
Note: Tin will give new users a free trial for a certain length of time, which is determined by the instance size. After the free trial time, the Tin app will automatically stop working. You will not be charged for the whole process. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qco4fqn3p0ua3kuc9p3r.png)

5. Click "RUN NOW" to initiate the application.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h38sq47nrsqeaj780b7w.png)

6. Click the "Primary Endpoint" button and you will visit phpBB immediately.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9kjmee5rj8ebbmsm79c.png)

Now you can log in to phpBB2.0 to use it.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upwjenl2ciu609woymz2.png)

You can also use the Tin to quickly set up other open source projects, see the guide: https://www.teamcode.com/docs/en-US/tin/create-tin
[MongoDB Submission Post Placeholder Title]
Tags: atlashackathon
Published: 2022-01-13 11:08:07

# Mongodb atlas hackathon


### Overview of My Submission
[Source code](https://github.com/NjiruClinton/MongoDB-Atlas-hackathon)
A small storage site that creates, deletes and edits information in the database



### Submission Category: 
Edit Quotes and save them in the mongodb database.

### Link to Code

https://github.com/NjiruClinton/MongoDB-Atlas-hackathon

### Additional Information
Utilizes the ***CRUD*** functions
Introducing Obsei
Tags: python, ai, opensource, showdev
Published: 2022-01-13 11:03:03

Dear Dev Community!

Allow me to introduce [Obsei](http://obsei.com/) (pronounced "Ob see" | /əb-'sē/). It is a low-code AI powered automation tool. Name was derived from three words OBServe, AnalyzE, Inform. 

You can think of it as [Zapier ](https://zapier.com/) for [cognitive-automation](https://searchcio.techtarget.com/definition/cognitive-automation) tasks. More specifically we closely resemble [Levity,](http://levity.ai/) which are doing great work toward no-code ML automation.

Following GIF can give you an overview of Obsei's -

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikpsp4im99fswsmfwi5k.gif)

## Features
- _Apache 2.0 License_: Permissible FOSS license
- _Low-Code_: YAML is all you need
- _Stateless_: Privacy and serverless friendly
- _GitHub Action_: Schedule workflow via GitHub Actions (This might save you [Zaps](https://zapier.com/pricing) for few tasks)
- _BYOM_: Bring your own model (via HuggingFace Hub)
- _Multi-Mode_: Currently support text based workflow but future plan to support Image, Audio, OCR and Video as well

Our main idea is to provide less complex Lego pieces, which can help less tech savvy people to build complex workflows with ease.

Currently **4** companies are using Obsei for their use cases. [Superblog ](https://superblog.ai/) shared how Obsei help them to find more qualified sales leads on Twitter (filtering relevant information via AI). [Tweet link](https://twitter.com/_skris/status/1466337155232387078)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptmpo1lhrh0xn9yfud57.PNG)

We are bootstrapped small startup, looking forward for community support and feedback to improve and making Obsei more useful. Code is still in early stage and next 2 months we will release more stable Beta version along with properly taking care of backward compatibility and breaking changes.

Refer important links:
Repo: [https://github.com/obsei/obsei](https://github.com/obsei/obsei)
Walkthrough Video: [Youtube link](https://www.youtube.com/watch?v=bhAYLI9P9W0)
Demo UI: [https://huggingface.co/spaces/obsei/obsei-demo](https://huggingface.co/spaces/obsei/obsei-demo)
Demo UI video: [Youtube link](https://www.youtube.com/watch?v=GTF-Hy96gvY)
Docket - A simplified and minimalist ToDo App 
Tags: atlashackathon, react, mongodb, webdev
Published: 2022-01-13 11:00:10


### Overview of My Submission

&nbsp;&nbsp;&nbsp;&nbsp;Hello There! I am Tharun and I am really happy to present to you the **Docket.** (You guessed it, a ToDo App). It is powered by the beloved [react](https://reactjs.org/) with [node](https://nodejs.org/) as the backend doing all the heavy lifting and ofcourse, one of the well thought out and most awesome nosql database out there our very favorite [MongoDB](https://mongodb.com) storing all the app's data. 

&nbsp;&nbsp;&nbsp;&nbsp;Some of the highlights of Docket. are,

 ⚡ Persistent user authentication using the powerful yet simple redux ([redux-toolkit](https://redux-toolkit.js.org/) to be precise) with the help of our beloved broweser api local storage

 🔥 Streak based appreciation system for that juicy adrenaline and that sense of satisfaction

 🔎 Search function with autocomplete to search for all those backlogged or forgotten tasks or any task (or should I say dockets 😉) powered by mongodb atlas search with the help of indexes

 🌐 Live version deployed on heroku for that sweet full stack deployment in minimal to no time

---

### Submission Category

&nbsp;&nbsp;&nbsp;&nbsp;Choose Your Own Adventure 🌏🗺️

---

### Link to Code

- {% github tharun0120/docket %}

- &nbsp; 🌐[Docket.](https://docket-todo-app.herokuapp.com/) 

---

### Additional Resources / Info

Be Motivated with Streaks 🔥

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

Search with AutoComplete 🔎

![autocomplete](https://s10.gifyu.com/images/autocomplete6a3765c41aa6bd99.gif)

&nbsp;&nbsp;&nbsp;&nbsp;It uses the mongodb atlas search with the help of search index (see below) to recommend docket titles

```
{
  "mappings": {
    "dynamic": false,
    "fields": {
      "title": [
        {
          "foldDiacritics": false,
          "maxGrams": 7,
          "minGrams": 3,
          "tokenization": "edgeGram",
          "type": "autocomplete"
        }
      ]
    }
  }
}

```

Stay Signed In ⚡

![stay signed in](https://s10.gifyu.com/images/stay-signed-in.gif)

Folder Structure 📁

- Client

![client side folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/affhd3c8nnny9i64vkz6.png)

- Server
![server side folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrtygt7mdq1xka7db172.png)

---

### Why MERN?

&nbsp;&nbsp;&nbsp;&nbsp;Why not? I really love creating stuffs with react and mern stack is just soooo good. Its really pragmatic and that makes it more fun to code and create awesome projects with ease. The way components, hooks and states exists in conjunction and bind the data and do DOM changes is just so exhilarating! If you havent already be sure to check out the mern stack its just so easy to catch up and work with 🤩.

---

<center>Thank You for Reading! 🧡</center>
React : Class vs Function Components
Tags: react, webdev, javascript, beginners
Published: 2022-01-13 10:44:12

In the last post, we learned about **components**. Here, We will learn about types of components.

So, there are 2 types of components as you would have guessed by now.
- **Class**
- **Functional**

> _You can do everything in using either of them. But, **functional components** are preferred, for obvious reasons._

A simple comparision, why functional component ?

We will write a simple counter, which increments the count value when clicked.

using **Function Component**, the code as follows -
```
const FunctionalComponent=()=>{
    const[count , setCount]=useState(0);
    return
        <div style={{margin:'10px'}}>
          <h2>{count}</h2>
          <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    )
} 
```

While using **Class Component**, ... i will leave it upto you to judge.

```
class ClassComponent extends React.Component{
   constructor(){
        super();
        this.state={
            count :0
        };
        this.increment=this.increment.bind(this);
   } 
   increment(){
       this.setState({count : this.state.count +1});
   }
   render(){
        return (
            <div style={{margin:'10px'}}>
               <h2> {this.state.count}</h2> 
               <button onClick={this.increase}>+</button>
            </div>
        )
    }
}
```

and **React.Component** class comes with a lot of predefined baggage, which are not necessary all the time. 

Whereas, by using **Functional Components** you can customise stuffs as per your need with the help of `React Hooks`. 

Hooks are my favourites in the whole React library. And one of my fav. hooks in `useMemo`. 

The hooks come in handy when you are dealing with frequent changes in the data stream. 

I found a great use of `useMemo` during pagination. It can memoize the component based on the page based on it's parameters. A network call might happen in the background, but it sure hell doesn't concern the user. Hence, improving the UX.

`useEffect` hook is used instead of `componentDidMount` in a class component.

> _**NOTE** : You cannot use hooks inside class components. Hooks are exclusive to function components only._
> _**TIP** : Learn to harness the power of custom hooks. They are on a whole different level._


### Resources : 
Read more about their differences at [gfg](https://www.geeksforgeeks.org/differences-between-functional-components-and-class-components-in-react/).

Read more about hooks at [@this is my blog](https://ahtrahdis7.hashnode.dev/magic-using-react-hooks-yes-you-read-it-right)
DEV Nursery
Tags: atlashackathon, node, mongodb
Published: 2022-01-13 10:34:06

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
E-Commerce plants nursery  api project using Nodejs, Mongodb, expressjs server and mongoose ODM. 

### Submission Category: 

E-Commerce


### Link to Code

{% github harshmangalam/dev-nursery-server %}


### Additional Resources / Info

## Features

### Authentication

- Login using email and password.
- JWT and cookies based authentication.
- Roles based authentication for customer and admin.
- Signup
- Login

### Users

- Fetch user lists
- Fetch user details
- Fetch current user detail
- Change password
- Update profile
- Change user role
- Fetch user order lists

### Collection

- Fetch collection lists
- Fetch collection details
- Create new collection
- Update collection
- Delete Collection

### Plant

- Fetch plant lists
- Fetch plant details
- Create new plant
- Update plant
- Delete plant
- Add Review and Rating on plant
- Remove Review and Rating from plant
- Fetch plant review lists

### Order

- Fetch order lists
- Fetch order details
- Place new order
- Update order

### Cart

- Create new cart
- Fetch cart details
- Update cart
- Remove cart

---

## API

| Server        | URL                           | Description              |
| :------------ | :---------------------------- | :----------------------- |
| `DEV Server`  | http://localhost:4000         | Development srver        |
| `PROD Server` | https://dev-nursery.herokuapp.com/ | Heroku production server |