teleren/devto huggingface dataset:
Is there any way to match the html one field data with the Google sheet column. 
Tags: googleappscript, webdev, javascript, programming
Published: 2022-02-21 19:32:01

I have a google sheet, and I want to get HTML form data in that google sheet. The google sheet has 4 columns.

Voucher Code
Name
Email
Phone number
Voucher code column is already filled with voucher codes.

And in the HTML form, person will fill the voucher code, name, email and Phone number. Voucher code will match the voucher code column and data of name, email and phone number will be filled in the same row. Now here I have to check the validation. If the voucher code, already has name, email and phone number. Then there should give a error message that already someone is there on that voucher code. And if the name, email and phone number column is empty for any voucher code. Then only the html form data should go.

Please help me regarding this.

Thank you
#OpenCV – How to add a Pencil Sketch effect to an image 🖼️ using Python 🐍
Tags: englishpost, codesample, effects
Published: 2022-02-22 16:23:56

---
title: #OpenCV – How to add a Pencil Sketch effect to an image 🖼️ using Python 🐍
published: true
date: 2022-02-21 19:29:58 UTC
tags: EnglishPost,CodeSample,Effects,EnglishPost
canonical_url: 
---

Hi !

Super quick post today with a cool scenario to support my [TikTok videos in Spanish](https://www.tiktok.com/@elbrunomsft) (I know 😀):

#### How to add a pencil sketch effect to an image using python and opencv

Here is the output with an original photo from my office and a new image with the pencil sketch effect:

![add pencil sketch effect to an image](https://brunocapuano.files.wordpress.com/2022/02/add-pencil-sketch-effect-to-an-image.jpg?w=757)

Sample code:

{% gist 
https://gist.github.com/elbruno/00062484a01258e6d61d58cf49a652a5 %}


Happy coding!

Greetings

El Bruno

* * *

#### OpenCV and Python

- [Easy way to install OpenCV and TensorFlow with Anaconda](https://elbruno.com/2020/05/12/python-easy-way-to-install-opencv-and-tensorflow-with-anaconda/)
- [Convert an OpenCV frame to PIL image and viceversa](https://elbruno.com/2020/05/12/python-easy-way-to-install-opencv-and-tensorflow-with-anaconda/)
- [Open a video file 🎥 and save each frame as a PNG 🖼 file to a folder 📂](https://elbruno.com/?p=32847)
- [How to add a watermark text to an image 🖼](https://dev.to/azure/opencv-how-to-add-a-watermark-to-an-image-using-python-1op5)
- [How to add a Pencil Sketch effect to an image 🖼 using Python](https://elbruno.com/2022/02/21/opencv-how-to-add-a-pencil-sketch-effect-to-an-image-%f0%9f%96%bc%ef%b8%8f-using-python-%f0%9f%90%8d/)
[Azure Trial Hackathon Submission Post Placeholder Title]
Tags: azuretrialhack
Published: 2022-02-21 19:19:52

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


### Overview of My Submission
[Note]: # (Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)


### Submission Category: 

[Note]: # (AI Aces, Computing Captains, Low-Code Legends, Java Jackpot, or Wacky Wildcards:)


### Link to Code on GitHub

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)
[Note]: # (Your repository must include a README)
[Note]: # (You must use and list a permissive license for your code: MIT, Apache-2)


### Additional Resources / Info

[Note:] # Screenshots/demo videos are encouraged!

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. Prizes for winning projects with multiple collaborators will be sent to the person who posts this submission and they will distribute the prize evenly. DEV will not split prizes as per our rules)

[Reminder]: # (Submissions are due on March 8, 2022 @ 11:59 PM UTC)
Convert tweets into images 🐦 ↪️ 🖼️
Tags: twitter, webdev, design, productivity
Published: 2022-02-21 19:10:24

Hi folks 👋

I've been working on a **[tweet to image converter](https://10015.io/tools/tweet-to-image-converter)** for some time and I've finally released it today. 

👉 [https://10015.io/tools/tweet-to-image-converter](https://10015.io/tools/tweet-to-image-converter
)

![Thinking man](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78if8wg6txmiledyqwmt.jpeg)

## What you can do with it?

- Convert tweets into images
- Add background images, gradients or solid colors as a frame
- Set language of the Twitter UI
- Set light or dark theme

Output image will be in **high quality**, so you can use it anywhere without hesitation.

I was a long process to develop it. It was hard to optimize images, set fonts for different languages and obtain the best result in web. So I'm wondering your thoughts about it, either positive or negative. Feel free to roast me. 🔥
What is NFT? (Basic concept)
Tags: nft, blockchain, digitalasset, cryptocurrency
Published: 2022-02-21 19:00:52

The way that our economy has always worked is we earn money and then we use that money to buy goods. But the more time we're spending on digital apps, digital games, the more our purchases are shifting away from physical goods and more towards digital goods. But that poses a problem. Digital goods are harder to monetize. _For example, a painter's painting can be copied but the copied version can be easily traced if compared to the real one. But if a digital art is copied, it's difficult to trace which one is real and this is where the value of the real one is downgraded._ This is what NFTs are trying to change.
**NFT** stands for _Non-fungible Tokens_. 
_Fungible_ means something that is able to exchange or substituted  with another thing that holds the same value i.e. interchangeable. _Like, we can exchange 100 dollars note for ten 10 dollars note, because they have the same value._
On the other hand _non-fungible_ means an asset  that can't be substituted. It has unique attributes that makes it different from assets of the same class. _Like, a painting is an asset which can't be traded for a toy which is also an asset. Because values of them are not same._ 
_Token_ refers to digital certificate stored on a secured distributed database called _Blockchain_.
So NFTs are digital assets that are publicly verifiable intellectual property authenticated on blockchain.
Day 28/100 Java
Tags: 100daysofcode
Published: 2022-02-21 19:10:06

Week 4 Done!!

Day 28/100

**Language:**
JAVA

**Time Period Spent:**
2 hrs

**Course Taken:**
Udemy: Java Programming Masterclass - Tim Buchalka

**Today's Learning:**
- Code Challenges:
	- Sorting Array List.
	- Banking Application
	- Linked List

**Additional Notes:**
Today hits the mark of one month completed. Feeling better than ever, I went back to recap on some code challenges that I skipped as I had previously not understood them. I can say that this went well and this allowed me to revise on the topic. I am able to now continue with ease. Some of the topics are getting harder but this is great, I can continue and then review what my strong suits are and then combat my weaknesses.
Responsive spacing with ChakraUI (React) 
Tags: react, chakraui, responsivespacing
Published: 2022-02-21 19:07:35

ChakraUI is a React based user interface library. Basically it helps you build more user friendly interfaces while still opting for optimal functionality. The creators of ChakraUI put in a lot of work to ensure that components built with ChakraUI can be made responsive as possible. 

In this article we will be exploring how to make responsive elements/components. We all agree that right spacing makes user interfaces more easy to navigate and also tender to the eyes.  


![Here we see the power of spacing and how ChakraUI Allows us to be flexible with it.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7g7p0a7x73rqwv5c73ts.jpg)

ChakraUI makes it easy to add spacing to our components. We will now look at some options: 

When creating components with `Flex` / `Grid` we are giving the option of adding a `gap` attribute. This attribute typically expects a `number`  value ie: `{4}` or a `string` ie: `4rem` and also an `object` which we will see in the code sample below.

 
![We can pass in a singular value for the gap attribute but whatever happened to responsive code?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cducnlkmr28y80qjpxk9.jpg)

Referencing image: We can pass in a singular value for the `gap` attribute but whatever happened to responsive code? 
 

On the left image we have passed in a value for the `gap` attribute. This works but it isn’t optimal and doesn’t gives us the opportunity to make our components as responsive as we want. 

On the right, we are not introduced to a more optimal way of adding spacing to our component. The `gap` attribute accepts an `object` that also accepts specific `attribute` which value will represent spacing values at each breakpoint. Let’s see this more extensively!: 

`lg`: Screens not larger than `60em` (Default: `992px`). `Macbook Pros` `Laptops`

`md`: Screens not larger than `48em` (Default: (`768px) ie: `Tablets`, `IPads` 

`base`: This is `default` for all screen if we do not specify others.  

[Please read the full documentation of how ChakraUI specifies their spacing here](https://chakra-ui.com/docs/theming/theme#spacing)

One more interesting thing is this principle can also be applied to `fontsizes`, `colors`, `display` toggle. 

I hope you found this article helpful in some way. 
Enjoy the rest of your day! 

Best regards.
How to setup VS Code for Laravel | Best VS Code Extensions for Laravel | Learn Laravel From Scratch
Tags: laravel, vscode, tutorial, beginners
Published: 2022-02-21 19:05:47

{% embed https://youtu.be/EliywWn4IK4 %}

This video will show you how to install the right extensions in Visual Studio Code to get the most out of your Laravel experience.

Follow me:
Twitter: https://twitter.com/Laravellercom
Facebook Page: https://www.facebook.com/1laravellercom
Instagram: https://www.instagram.com/laravellercom/
Github: https://github.com/laraveller
Website: https://laraveller.com/

Playlists:
Laravel Roles and Permissions: https://bit.ly/3gOhM7d
LARAVEL INERTIA MOVIE APP: https://bit.ly/3FVMp4Q
Laravel Livewire Movie App: https://bit.ly/3s8D6v1
Laravel Classified Website - https://bit.ly/3nsFRnb
Livewire Employees - https://bit.ly/2ZtIpZY
Laravel Employees Management - https://bit.ly/3Gglt14
Laravel admin panel - https://bit.ly/3CcX75M

Install following extensions:
1. Aura Theme
2. Laravel Blade Snippet 
3. Laravel Blade Spacer 
4. Laravel Goto View 
5. Laravel Snippets 
6. Laravel Extra Intellisense
7. PHP Intelephense
8. PHP Namespace Resolver
9. Better PHP Unit
10. Vetur
11. Tailwind CSS Intellisense
12. Bracket Pair Colorizer
13. Auto Close Tag
14. Auto Complete Tag 
15. Auto Rename Tag
Using JSDoc
Tags: javascript, documentati, beginners
Published: 2022-02-21 19:03:05

Very cool little system of documentation. Similar to how rust can generate docs from comments in the codebase, jsdoc basically does the same thing. By documenting my code in a standard way I can generate pretty good documentation easily.

Also trying out jsdoc themes is easy. All you have to do is install a jsdoc theme and then run jsdoc with the path of the theme. I tried a few themes out and each one has something I like and something I don't. The one that I ended up coming down to was minami or clean-js-doc. The reason for clean-js-doc was that it has a little search bar which seems pretty useful. I often use the search bar on rust's documentation site so I think it would be useful in my documentation as well. However minami looks the best to me and I ended up going with it.

I'll probably take a stab at trying to get it have a search bar as well as I think that could be fun to hack in.

I'm surprised at how easy and straightforward it was to write out the documentation for all the various functions and then generate a site for it.

Below is a snippet from my pick-universe addon. The key things are that you specify the parameters, their types and a short description. You do this for the returns as well and voila, you have documentation.

```
/** Class for all the universe functions */
class Universe {
    /**
     * Create a Universe object.
     *
     * @param {string} hostname - Hostname or ip address for the universe server.
     * @param {string} username - Username to use to log in.
     * @param {string} password - Password to use to log in.
     * @param {string} account - Account to log in to.
     */
    constructor(host, username, password, account) {
        this._uv = new _Universe.Universe(host, username, password, account);
    }

    /**
     * Call a cataloged subroutine.
     *
     * @param {string} subroutine - The name of the subroutine.
     * @param {...args} args - The arguments to be passed to the subroutine.
     * @return {array} The args are returned with their changes.
     *
     */
    CallSubroutine(subroutine, ...args) {
        args.unshift(subroutine);
        return this._uv.CallSubroutine.apply(this._uv, args);
    }
}
```

Then you can build documentation by using jsdoc.

```
> jsdoc index.js README.md
```

You can also install a theme and easily try it out.

```
> npm install --save-dev minami
> jsdoc index.js README.md -t node_modules/minami/
```

This will get you something like:

https://nivethan.dev/documentation/pick-universe/

Overall it's a pretty great piece of software and I would have never tried it out if i didn't take a stab at making my own library. Very cool!
Latex For Beginners Part 3
Tags: tex, mkprojects
Published: 2022-02-21 18:54:12

In this part we will be discussing about Equations & Listings, the ugly and the beauty in it. 

## Equations

If you have used Microsoft Word's equation, it's a pain to use, and will grow more grey hairs than needed. In terms of writing documents in the sciences, Latex is always the #1 choice, so how exactly do we do equations?

Well there's three or 2.5 ways of doing them...

### In-Text Equations 
In Text equations are done using `$...$`, these are used to add equations inside the texts hence the name, and are generally the most used. 

Let's look at a silly example: 
```latex 
\section{Some math}

\par To find the integral of $\sqrt{4+x^2}$ we must use trigonometric substitution where $x=2tan\theta$
```
> Try compiling this example and see what is produced

### Equations Environment & Split 
To do a single line equation use the equation environment, and put the equation inside, but if you need to do multi-line, then you need to also put in the split environment. 

```latex 
% single-line equation
\begin{equation}
% if you don't want the numbers 
% put equation* instead 
x^2 = 98
\end{equation}

% multi-line equation
\begin{equation}
   \begin{split}
       x^2 &= 98\\
       % & is used to align the equations 
       % \\ is used to put new lines 
       x &= \pm \sqrt{98}
   \end{split}
\end{equation}
```

It's hard to put a bunch of the symbols and such in a single post, so instead I'll refer you to the [Overleaf](https://www.overleaf.com/learn/latex/Mathematical_expressions) tutorial that shows all of the different math symbols. 

The next post will show how to nicely use projects like TexCreate to help you with your projects.
MySql
Tags: mysql
Published: 2022-02-21 18:43:12

MySQL
MySQL is the most widely used RDBMS (Relational Database Management System) for web application data storage. MySQL is a quick, easy-to-use relational database management system (RDBMS) that is utilised by many small and large organisations . MySQL AB, a Swedish corporation, is responsible for its development, marketing, and support of MySQL.
Advantages of MySQL
Data Security :  MySQL transactions operate as a single unit, which means the transaction will not be cleared until and until each individual operational stage is completely finished. MySQL maintains data integrity in financial transactions, allowing consumers to conduct business online without concern. Money is not deducted until the entire procedure is finished, and in the event of a failure, all processes are rolled back to the previous step.
On-Demand Scalability : MySQL has unrivaled versatility, allowing for the effective administration of deeply embedded applications even in massive data centers with massive volumes of mission-critical data to be stored. It allows for comprehensive flexibility to meet the specific needs of eCommerce companies with a smaller footprint. MySQL gives businesses the most platform flexibility when it comes to adding new features and functions to their database servers.
High Availability : MySQL is intended to perform millions of queries and thousands of transactions while maintaining unique memory caches, full-text indexes, and optimal speed, whether you're running an eCommerce website or a high-speed processing system.
Rock-Solid Reliability : MySQL provides outstanding data security with its data protection mechanisms. 
SSH and SSL support provide safer connections, while powerful data encryption prevents unwanted reading of data. It also has a strong system that limits server access to authorized users and allows users to be blocked at the man-machine level. Finally, the data backup function makes point-in-time recovery much easier.
 
Reduced Total Cost Of Ownership : Businesses may save a lot of money on new projects by moving their existing database software to MySQL. MySQL's reliability and simplicity of management save you time troubleshooting, which would otherwise be spent resolving downtime and performance concerns.
Minhas extensões para Firefox
Tags: firefox, extension, browse
Published: 2022-02-21 18:39:47

 
Volta e meia surge questionamentos sobre quais extensões utilizamos para Firefox. Então segue a lista das minhas:

[Dark Reader](https://darkreader.org/): Há quem se incomode bastante com páginas brancas. Se você está neste grupo de pessoas, seus problemas acabaram! OBS: Dependendo do site pode ser que gere um pouco de lentidão.

[AdBlock Plus](https://addons.mozilla.org/en-US/firefox/addon/adblock-plus/) e [uBlock Origin](https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/) para bloqueio de ads. O uBlock Origin sempre bloqueia os ads antes do AdBlock PLus.

[Auto Tab Discard](https://addons.mozilla.org/en-US/firefox/addon/auto-tab-discard/): Ele mata as abas depois de X tempos, evita de ficar com processamento de JS em abas que nem to olhando. Reduziu consideravelmente o processamento.

[Canvas Fingerprint Defender](https://addons.mozilla.org/en-US/firefox/addon/canvas-fingerprint-defender/): Gera identificador único para fingerprint cada vez que um site tenta pegar meu fingerprint.

[Disable JavaScript](https://addons.mozilla.org/en-US/firefox/addon/disable-javascript/): Fica um botãozinho para desligar JS em sites que ficam com palhaçadas de bloqueios de barra de rolagem ou botão direito.

[DotGit](https://addons.mozilla.org/en-US/firefox/addon/dotgit/): Sim, isto mesmo! Você receberá uma notificação em todo site que entrar e tiver com a pasta `.git` exposta

[Facebook Container](https://addons.mozilla.org/en-US/firefox/addon/facebook-container/): Tudo de Facebook é carregado em um container, isto evita tracking pelo Facebook

[Firefox Multi-Account Containers](https://addons.mozilla.org/en-US/firefox/addon/multi-account-containers/): Isola sites em containers, evita que a Google e outras empresas saibam quais sites acessam.

[Gerador CPF CNPJ IE](https://addons.mozilla.org/en-US/firefox/addon/gerador-cpf-cnpj-ie/): Uso para sites que pedem CNPJ ou CPF e não quero fornecer meus dados e para testar aplicações que desenvolvo que tem estes campos

[Greasemonkey](https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/): Executa JS em qualquer site possibilitando que sites sejam customizados de acordo com nossa necessidade.

[User-Agent Switcher](https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher-revived/): Troca o user agent. Bom para sites que só carregam em um browser específico por restrições feitas via JS.

[URL in title](https://addons.mozilla.org/en-US/firefox/addon/url-in-title-keepass/): Útil para o KeePassXC identificar qual é o site que estou e fazer o autotype de usuário e senha.

É só pessoal!

**Desafio**: Qual navegador utiliza e com quais extensões?
Crie um post com suas extensões e compartilhar com o mundo! Após criar teu post, se possível, manda aqui nos comentários 😃
Use tRPC in your SvelteKit applications
Tags: svelte, trpc, typescript, api
Published: 2022-02-21 18:34:06

---
title: Use tRPC in your SvelteKit applications
published: true
description: Typesafe APIs with tRPC are now possible in SvelteKit
tags: svelte, trpc, typescript, api
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmbo3ofk3n8ceue27xak.gif
---

Hi everyone! I'm mostly a React developer, but lately Svelte managed to really capture my attention. I've been playing around with it for a bit, and was simply astonished by how easy one can achieve things with far fewer lines of code than with React. On the other hand, I was a bit put-off by the (yet-) lack of tools in the ecosystem. One such tool was the ability to write & use typesafe APIs without the friction of REST or GraphQL... Such as we do in React-land with tRPC.

Hence [trpc-sveltekit](https://github.com/icflorescu/trpc-sveltekit), my humble contribution to the Svelte ecosystem.

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

Simply install the package in your SvelteKit application with:
```bash
npm i trpc-sveltekit
```
or
```bash
yarn add trpc-sveltekit
```
...then make sure to add this to `src/hooks.ts`:

```ts
// src/hooks.ts
import { createTRPCHandle } from 'trpc-sveltekit';
// create your tRPC router...

export const handle = createTRPCHandle({ url: '/trpc', router });
```

Head over to the GitHub repo to learn how to set it up with Prisma and superjson and see a full example on CodeSandbox.

Though basic functionality is stable and working, the package is still WIP, so PRs are more than welcome! And please, don't hesitate to star the repo; it helps a lot ;-)