teleren/devto huggingface dataset:
Weekly web development resources #110
Tags: weekly, webdev
Published: 2022-02-23 12:32:40



______

##[Fonts](https://fonts.coollabs.io/)
[![Fonts](https://wweb.dev/weekly/content/110/fonts.jpg)](https://fonts.coollabs.io/)
A privacy-focused Google Fonts alternative.

______

##[RegEx Library](https://uibakery.io/regex-library)
[![RegEx Library](https://wweb.dev/weekly/content/110/regex.jpg)](https://uibakery.io/regex-library)
A curated list of useful regular expressions for different programming languages.

______

##[privacy-redirect](https://github.com/SimonBrazell/privacy-redirect)
[![privacy-redirect](https://wweb.dev/weekly/content/110/privacy.jpg)](https://github.com/SimonBrazell/privacy-redirect)
A web extension that redirects requests to Twitter, YouTube, and more to privacy friendly alternatives. 

______

##[tinydomain](https://tinydomain.net/)
[![tinydomain](https://wweb.dev/weekly/content/110/tinydomain.jpg)](https://tinydomain.net/)
A tool to find easy to remember domains with 8 characters or less.

______

##[Penpot](https://penpot.app/)
[![Penpot](https://wweb.dev/weekly/content/110/penpot.jpg)](https://penpot.app/)
An open-source design and prototyping platform meant for cross-domain teams.

______

##[Streamline Icons](https://app.streamlinehq.com/icons)
[![Streamline Icons](https://wweb.dev/weekly/content/110/streamline.jpg)](https://app.streamlinehq.com/icons)
A big collection of icons with different styles and themes.

______

##[Buster](https://github.com/dessant/buster)
[![Buster](https://wweb.dev/weekly/content/110/buster.jpg)](https://github.com/dessant/buster)
A browser extension which helps you to solve difficult captchas.

______

##[Monorepo Explained](https://monorepo.tools/)
[![Monorepo Explained](https://wweb.dev/weekly/content/110/monorepotools.jpg)](https://monorepo.tools/)
Everything you need to know about monorepos, and the tools to build them.

______

##[Minze](https://minze.dev/)
[![Minze](https://wweb.dev/weekly/content/110/minze.jpg)](https://minze.dev/)
A simple JS framework for native web components.

______

##[Cowsay](https://cowsay-svelte.vercel.app/)
[![Cowsay](https://wweb.dev/weekly/content/110/cowsayshello.jpg)](https://cowsay-svelte.vercel.app/)
A cowsay GUI built with Svelte, TailwindCSS and HTML Canvas .

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Web3 education project LEARND(on Dfinity's IC)is looking for devs help
Published: 2022-02-23 12:31:43

LEARND, a Web3 education project on Dfinity's IC, is looking for devs help.

About LEARND:
**LEARND Alpha:
**https://2w4di-tqaaa-aaaaj-qam3a-cai.raw.ic0.app/sign-in
(It's just a show demo(*features aren't complete), but we are keeping work on it. It's not easy for a small team to dev a complex Dapp with multiple user roles.)
**If you wanna help us, or give suggestions, please come to talk with us:
Discord: https://discord.gg/8JJNTEFaZ9**

Article (from website):
https://swamp-isthmus-f3f.notion.site/About-LEARND-94db95855ef946a8ae802caeb8cdd28d

The original idea of the founder:
https://waffcharlie.medium.com/leardn-platform-on-internet-computer-55c658316dbd

links:
website
https://learnd.dedn.eu/

Twitter
https://twitter.com/LEARNDTEAM

Discord
https://discord.gg/q3bqxZ5gcR 


"LEARND is a community driven educationnal platform running on Internet Computer.

We want to provide a new kind of learning and incentives using crypto assets, community vote using SNS, reward learners AND teachers.

Being paid for learning is the main point of the concept. But you can see what LEARND can do for Education and reinvented our visions of it.

LEARND is a long term project. We believe that time, work, patience and community are the main forces to complete our journey to change Education forever using blockchain technology and environment."
How to iterate through objects in javascript?
Tags: javascript, webdev
Published: 2022-02-23 12:31:18

**Iterables**
It's a kind of new mechanism to iterate or traverse through data structures.
As you know Arrays, String, Maps and Sets or other similar collections are already iterable (it means we can use for of loop to iterate them) but objects are not.

when running the below code we had an error that 
`TypeError: obj is not iterable`

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

**How to create an iterator?**
The "[Symbol.iterator]" method must be implemented which should return an iterator object that should have a next() method that returns the object.

**How to create an iterator with generator function?**
In this example, we implement "[Symbol.iterator]" with generator function!

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

**Conclusion**
Although you can iterate through an object with "for in" or "Object.entries", "Object.keys" and "Object.values" (convert to array and iterate on them) but in this article, we introduce a new way to iterate objects with "[Symbol.iterate]" and function generator.
Steps to hire JavaScript Developer
Published: 2022-02-23 12:30:26

Hiring a new developer can be a complicated process. You want to make sure you find the right person for the job, but you also want to make sure you don’t spend too much time and money finding that person. It’s a delicate balance, but it’s one that can be achieved by following the below-mentioned steps.

Hiring the right JavaScript developer can be a challenge. This is a skill set that is in high demand, and the market is flooded with talent. You may be tempted to settle for a candidate who doesn’t meet all of your requirements. However, the right JavaScript developer can have a significant impact on the performance of your products. **So follow the below steps to choose the right candidate:**

1. Determine your requirements and Expectations 
2. Share it with an agency to hire a dedicated JavaScript Developer 
3. Get a list of suitable candidate resumes based on the project/developer requirements shared by the client 
4. Interview candidates whose resume stands apart and experience suitable to your requirements 
5. Select the required number of developers and sign the agreement with the required terms and conditions. 
6. Get started with the JavaScript App Development

I hope the 6 steps help you achieve what you desired with JavaScript.
Rovnostní typy a negace typů
Tags: agda, coq, idris
Published: 2022-02-23 11:15:59


[Předchozí článek](https://dev.to/betelgeuse/prolegomena-k-uvodu-do-zakladu-zavislostnich-typu-4380) byl úvodem do závislostních typů a jejich použití v bezpečnostně kritických aplikacích. V tomto zavedeme rovnostní typy a vylepšíme původní kód.

Nejprve definice typu pro ilustrační příklad:
```
data DayOfWeek = Mon | Tue | Wed | Thu | Fri | Sat | Sun
```
Jednoduchá funkce ověří, že zadaný den je pondělí:
```
isMonday : DayOfWeek -> Bool
isMonday Mon = True
isMonday _ = False
```
V kontraktech se často používají porovnání hodnot. Každé porovnání `a = b` hodnot stejného typu je možné považovat za typ. Pokud rovnost platí, tento typ má hodnotu `Refl`, kterou je možné použít ve funkcích. Následující funkce je v podstatě náhradou příslušného jednotkového testu, korektnost se ale ověřuje již v době překladu v rámci typové kontroly, ne až za běhu.
```
aProof : (d : DayOfWeek) -> d = Mon -> isMonday d = True
```
Tato funkce dostane dva argumenty a ověří, že funkce `isMonday` vrátí správnou hodnotu. Její definice je
```
aProof _ prf = rewrite prf in Refl
```
Typ návratové hodnoty je rovnostní, proto se musí jednat o nějaké `Refl`. Tuto hodnotu získáme tak, že pomocí `rewrite` přepíšeme `d` na `Mon` v typu `isMonday d`, což se vyhodnotí jako `True`.

Podobně bychom mohli mít analogický test, ale nyní chceme dokázat, že něco neplatí. Zavedeme proto negaci typů, `Not T`, což je v zásadě funkce typu `T -> Void`, kde `Void` je typ bez hodnot. Tuto funkci proto není možné zavolat, neboť není možné vrátit žádnou hodnotu. Příkladem budiž následující analogie jednotkového testu:
```
anotherProof : (d : DayOfWeek) -> d = Tue -> Not (isMonday d = True)
```
Definice této funkce je
```
anotherProof _ prf = rewrite prf in falseNotTrue
```
Zbývá definovat funkci `falseNotTrue` typu `Not (False = True)`:
```
falseNotTrue : Not (False = True)
falseNotTrue _ impossible
```
Obecně platí, že dvě hodnoty stejného typu můžou být shodné ve smyslu výrokové rovnosti, pokud výslovně neřekneme, že se rovnat nemůžou.

Vraťme se nyní ke staré známé funkci `safeDiv`. Změníme typ kontraktu, že nelze dělit nulou:
```
safeDiv : Nat -> (n : Nat) -> {auto prf : Not (n = 0)} -> Nat
```
Budeme potřebovat pomocnou funkci říkající, že nula není následníkem žádného přirozeného čísla:
```
sucNonZero : (n : Nat) -> Not ((S n) = 0)
sucNonZero _ _ impossible
```
Původní funkce `isNonZero` nyní vypadá takto:
```
isNonZero : (n : Nat) -> Maybe (Not (n = 0))
isNonZero 0 = Nothing
isNonZero (S n) = Just (sucNonZero n)
```
Je potěšitelné, že na samotné funkci `safeDiv` se nic nemění.

Funkce `isNonZero` je ale stále poněkud problematická, protože sice někdy vrací důkaz nenulovosti, ale pokud je výsledkem `Nothing`, nevíme, jestli je argument funkce nulový nebo ne. Místo `Nothing` bychom chtěli důkaz `n = 0`. K tomu slouží typový operátor `Dec`, kterému se budeme věnovat příště.
Some queries on Devops.. Kindly help if anyone has answers.
Tags: kubernetes, devops, ansible, git
Published: 2022-02-23 11:52:55

1. Difference between gitops and devops

2. what is immutable architecture , how we can relate that to VM and container

3. Difference between docker and container

4. Difference between Kubernetes and container

5. Structure of groovy to build pipelines in Jenkins

6. About ansible project with example

7. About Kubernetes project end to end
Ampere Vehicles EV By Greaves - Electric Scooters
Tags: amperevehicles, electricscooters
Published: 2022-02-23 11:52:12

Our thoughts have always been electric.
Going electric isn’t new for us. We switched to this line of thought way back in 2008. We are the early believers, the committed, the passionate those who saw answers beyond the obvious. This belief is reflected in design, development and manufacturing of battery operated [electric vehicles](https://ampere.greaveselectricmobility.com/), two wheelers, three wheelers and custom built vehicles. Come share our journey. The road built on perseverance is best traveled with those who are fully charged.
How to Fix Canon Printer Error 5200
Tags: discuss, news, security, github
Published: 2022-02-23 11:32:30

The error code 5200 in the Canon printer occurs mostly due to problems in the cartridge. If the printing results are coming only in black, even if it’s a colored document, the ink cartridge is about to empty. the low ink levels, faulty cartridge, empty cartridge and logic board issues show 5200 errors. the troubleshooting guide will show you fixing the code. until you fix this issue, the printer will show issues while printing.you may also get blank pages with this error.
Cause:-
The main cause of the error code 5200 in canon printer is the empty cartridge. It means when the ink cartridges get empty or about to end the ink, you’ll see the error as a notification.  
How to Fix Canon Printer Error 5200?

Visit for more information:
The setup process for every Canon model is almost similar, however the download through [https //ij.start.cannon](https://istartsetup.com/https-ij-start-cannon/) or [http //ij.start.cannon](https://istartsetup.com/https-ij-start-cannon/) and installation process may differ..
Wednesday Links - Edition 2022-02-23
Tags: java, jvm, groovy, testing
Published: 2022-02-23 11:31:05

Make your tests readable by example (13 min)🌟
https://blog.allegro.tech/2022/02/readable-tests-by-example.html

Hidden gems in Java 16 and Java 17, from Stream.mapMulti to HexFormat (5 min)💎
https://blogs.oracle.com/javamagazine/post/the-hidden-gems-in-java-16-and-java-17-from-streammapmulti-to-hexformat

Card Table Card Size Shenanigans (5 min)🃏
https://tschatzl.github.io/2022/02/15/card-table-card-size.html

The JDK Flight Recorder File Format (3 min)✈️
https://www.morling.dev/blog/jdk-flight-recorder-file-format/

Groovy 4 emulated records (30 sec)🗄️
https://twitter.com/wololock/status/1496384140438032384

JUnitPioneer 1.6.0 Released (30 sec)🏔️
https://twitter.com/nipafx/status/1495018952103186434

Spring Security without the WebSecurityConfigurerAdapter (4 min)🛡️
https://spring.io/blog/2022/02/21/spring-security-without-the-websecurityconfigureradapter

Troubleshooting Java Applications with Eclipse Jifa (3 min)🔎
https://www.infoq.com/news/2022/02/eclipse-jifa

Fallacies of AI Driven Coding (4 min)🤖
https://www.yegor256.com/2022/02/16/ai-coding.html
Google Chrome Developer Tools – Part 1
Tags: technology, tools
Published: 2022-02-25 10:01:21

---
title: Google Chrome Developer Tools – Part 1
published: true
date: 2022-02-23 11:21:45 UTC
tags: Technology,Tools
canonical_url: https://bugfender.com/blog/google-chrome-developer-tools-part-1/
---

In this post we will share show you how you can use some of the new Developers Tools that have been added recently to Google Chrome. Google Chrome Dev Tools is a set of powerful tools that help developers to build better webs.

## CSS Overview

If you want to improve your CSS, you can use the CSS Overview panel to better understand your page’s CSS and identify potential improvements.
{% embed https://www.youtube.com/watch?v=ZCIHF90aQuk %}

## Font Editor

Using the Font Editor tool in Google Chrome, you can easily edit your website fonts in a very easy and visual way, instead of writing CSS rules manually.

{% embed https://www.youtube.com/watch?v=HLR8wEyh85g %}

## Dark Mode

If you want tot test your website in Light or Dark mode, you can easily do it using the Dark Mode emulation available on Google Chrome, so you don’t need to change your computer theme.

{% embed https://www.youtube.com/watch?v=Yj33inkSPCA %}

## Recorder Panel

In the Recorder Panel you can record, replay and measure user flows; so you can use it again and again to test your site whenever you do a change and see if everything works as it should and performance is not affected.

{% embed https://www.youtube.com/watch?v=hWyCBssA1O0 %}

## Where To Go From Here…

I hope you found the article insightful! In this first article, we have covered 4 of the new Dev Tools, if you want to learn more about all the tools offered by Google Chrome, you can check the following link:

[https://developer.chrome.com/docs/devtools/](https://developer.chrome.com/docs/devtools/)

Or you can wait for our new article to learn about another set of tools. Stay tuned!
Sales by Match (HackerRank Javascript Solution)
Tags: programming, algorithms, javascript, tutorial
Published: 2022-02-23 10:59:22

There is a large pile of socks that must be paired by color. Given an array of integers representing the color of each sock, determine how many pairs of socks with matching colors there are.

### Example
_n = 7_
_ar = [1, 2, 1, 2, 1, 3, 2]_
There is one pair of color  and one of color . There are three odd socks left, one of each color. The number of pairs is.

### Function Description
Complete the sockMerchant function in the editor below.

sockMerchant has the following parameter(s):
- int n: the number of socks in the pile
- int ar[n]: the colors of each sock

### Returns
- int: the number of pairs

### Input Format
The first line contains an integer _n_, the number of socks represented in _ar_.
The second line contains _n_ space-separated integers, _ar[i]_, the colors of the socks in the pile.

```js
function sockMerchant(n, ar) {
    // Write your code here
    const uniqueValues = [... new Set(ar)]
    let count = 0
    uniqueValues.forEach(value => {
        const filterValues = ar.filter(element => element == value)
        const pairsNumber = Math.floor(filterValues.length/2)
        count += pairsNumber
    })
    return count
}
```
add drop shadow to image photosho
Tags: photoshop, clippingpath
Published: 2022-02-23 10:58:21

An image is definitely needed to bring a flexible beauty to an image, but to solve it you must focus on the image. There are many problems with image photography. To solve that, you must know the work of Photoshop. I know not everyone chooses to do that. That's why I do it for you at a much lower cost. I have started the work. You can contact me to understand your work needs. What I do [Add drop Shadow to image](https://toucheditingfast.com/how-to-add-drop-shadow-to-image-the-best-tutorial-in-2022/), clipping path service, masking service. retouching service.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jw300i7fh5kij7xjpore.jpg)
Upload files with React Hook Form
Tags: react, javascript, webdev, tutorial
Published: 2022-02-23 10:47:37

See how we can use React Hook Form to handle file upload and file validation (with yup). The file input field will be registered with React Hook Form, yup validation is integrated into React Hook Form, and then the uploaded image will be converted to a Base64 string and shown on form submit.

{% youtube o3B9KTlod4w %}
Big O analysis is awesome except when it's not
Tags: javascript, beginners, programming, tutorial
Published: 2022-02-23 10:44:35

**Asymptotic analysis is a powerful tool, but wield it wisely.**

**Big O ignores constants,** but sometimes the constants matter. If we have a script that takes 5 hours to run, an optimization that divides the runtime by 5 might not affect big O, but it still saves you 4 hours of waiting.

**Beware of premature optimization.** Sometimes optimizing time or space negatively impacts readability or coding time. For a young startup it might be more important to write code that's easy to ship quickly or easy to understand later, even if this means it's less time and space efficient than it could be.
Worst Case and Space complexity
Tags: javascript, programming, beginners, tutorial
Published: 2022-02-23 10:36:02

## Worse Case  

`function contains(haystack, needle) {
  // Does the haystack contain the needle?
  for (let i = 0; i < haystack.length; i++) {
    if (haystack[i] === needle) {
      return true;
    }
  }
  return false;
}`



Here we might have 100 items in our haystack, but the first item might be the needle, in which case we would return in just 1 iteration of our loop.

## Space complexity: the final frontier

Sometimes we want to optimize for using less memory instead of (or in addition to) using less time. Talking about memory cost (or "space complexity") is very similar to talking about time cost. We simply look at the total size (relative to the size of the input) of any new variables we're allocating.

This function takes O(1)O(1) space (we use a fixed number of variables):

  `function sayHiNTimes(n) {
  for (let i = 0; i < n; i++) {
    console.log('hi');
  }
}`


Usually when we talk about space complexity, we're talking about additional space, so we don't include space taken up by the inputs. For example, this function takes constant space even though the input has nn items:

  `function getLargestItem(items) {
  let largest = -Number.MAX_VALUE;
  items.forEach(item => {
    if (item > largest) {
      largest = item;
    }
  });
  return largest;
}`

Sometimes there's a tradeoff between saving time and saving space, so you have to decide which one you're optimizing for.
Integrate the Razorpay payment gateway in laravel
Tags: laravel, razorpay, payment, integration
Published: 2022-02-23 10:34:24

![Integrate the Razorpay payment gateway in laravel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vm9v4lgz7ndli95680w7.png)

If you want to get paid online from your application. You need to integrate a payment gateway into your application. In this article, we integrate the Razorpay payment gateway in laravel. So you will get passive income on your packet. 

[Read More ](https://www.devrohit.com/razorpay-payment-gateway-in-laravel/)
Big O Notation Cool Examples
Tags: javascript, beginners, codenewbie, programming
Published: 2022-02-23 10:26:18

### Example 1

`
  function printFirstItem(items) {
  console.log(items[0]);
}
`

This function runs in O(1)O(1) time (or "constant time") relative to its input. The input array could be 1 item or 1,000 items, but this function would still just require one "step."

### Example 2

` function printAllItems(items) {
  items.forEach(item => {
    console.log(item);
  });
}`

This function runs in O(n)O(n) time (or "linear time"), where nn is the number of items in the array. If the array has 10 items, we have to print 10 times. If it has 1,000 items, we have to print 1,000 times.

### Example 3

` function printAllPossibleOrderedPairs(items) {
  items.forEach(firstItem => {
    items.forEach(secondItem => {
      console.log(firstItem, secondItem);
    });
  });
}`

Here we're nesting two loops. If our array has nn items, our outer loop runs nn times and our inner loop runs nn times for each iteration of the outer loop, giving us n^2
total prints.

## Some rules

### N could be the actual input, or the size of the input

`function sayHiNTimes(n) {
  for (let i = 0; i < n; i++) {
    console.log('hi');
  }
}
function printAllItems(items) {
  items.forEach(item => {
    console.log(item);
  });
}`

### Drop the constants

When you're calculating the big O complexity of something, you just throw out the constants.

`function printAllItemsTwice(items) {
  items.forEach(item => {
    console.log(item);
  });

  // Once more, with feeling
  items.forEach(item => {
    console.log(item);
  });
}
This is O(2n)O(2n), which we just call O(n)O(n).`

### Drop the less significant terms

`function printAllNumbersThenAllPairSums(numbers) {

  console.log('these are the numbers:');
  numbers.forEach(number => {
    console.log(number);
  });

  console.log('and these are their sums:');
  numbers.forEach(firstNumber => {
    numbers.forEach(secondNumber => {
      console.log(firstNumber + secondNumber);
    });
  });
}`

Here our runtime is O(n + n^2)O(n+n2), which we just call O(n^2)O(n2). Even if it was O(n^2/2 + 100n)O(n2/2+100n), it would still be O(n^2)O(n2).


Thanks for reading <3
Bill Division (HackerRank Javascript Solution)
Tags: javascript, algorithms, tutorial, programming
Published: 2022-02-23 10:25:23

Two friends Anna and Brian, are deciding how to split the bill at a dinner. Each will only pay for the items they consume. Brian gets the check and calculates Anna's portion. You must determine if his calculation is correct.

For example, assume the bill has the following prices: bill=[2,4,6]. Anna declines to eat item k=bill[2] which costs 6. If Brian calculates the bill correctly, Anna will pay (2 + 4)/2 = 3. If he includes the cost of bill[2], he will calculate (2 + 4 + 6)/2 = 6. In the second case, he should refund 3 to Anna.

### Function Description

Complete the bonAppetit function in the editor below. It should print Bon Appetit if the bill is fairly split. Otherwise, it should print the integer amount of money that Brian owes Anna.

bonAppetit has the following parameter(s):

- bill: an array of integers representing the cost of each item ordered
- k: an integer representing the zero-based index of the item Anna doesn't eat
- b: the amount of money that Anna contributed to the bill

### Solution
```js
function bonAppetit(bill, k, b) {
    // Write your code here
    let result = ''
    bill.splice(k,1)
    const billCost = bill.reduce((previous, next) => previous+next, 0) / 2
    if (billCost == b){
        result = 'Bon Appetit'
    } else {
        result = b - billCost
    }
    console.log(result)
    
} 
```
Best tool to remove the  background of an image.
Published: 2022-02-23 10:23:18

This is the tool we have developed in the past year and now we have 100 millions users.


We created a service to remove the background of images automatically using machine learning. we have other tools such as video background remover, photo retouch, photo enhancer, photo colorizer, etc.
 

https://www.cutout.pro/


![Remove image background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z54x24i0t5v6lo044mq2.png)