teleren/devto huggingface dataset:
#100DaysofProjects
Tags: javascript, webdev, beginners, programming
Published: 2022-02-10 16:49:07

##Introduction to #100DaysofProjects
I recently visited a community(platform) codedamn which helps developers to level up and learn today's job skills in technology. I started exploring this platform and registered an account on codedamn and a lot of things are there for me. The free, as well as paid courses with excellent explanation and conceptual guidance, and I, enrolled myself in web dev course HTML5, and it is free. Then again the different tech roadmaps and building project guidance which help me to understand the basic fundamentals of web development. 
#join #100DaysofProjects
Then I joined The new challenging adventure introduced by codedamn is 100 days of projects from to zero to hero with basic to advance project building ideas. I shortly introduce some projects like 
1. Quiz App
2. Discord UI clone
3. JSON Proxy Server
4. LinkedIn Clone
5. Student Time table Planner

basically, this idea leads you to become a full-stack developer with development, you can start your journey to become a developer with #100daysofcode on codedamn. 

## How to join
You can join with the link [ #100DaysofProjects](https://codedamn.com/referred-by/ganeshpatil1010?page=100-days-of-projects)  
visit the link and the interface looks like 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvdvctlv6ux50i012n56.PNG)
next, go and create an account with basic details and complete your registration and profile.
Start your journey with the first project Quiz app which helps you to understand the basics of HTML, CSS, and JavaScript fundamentals don't stop here build 100projects and also explore the complete platform which helps you in various domains.

## What you get
Currently, the projects are available in between 36-40 days but all projects are coming soon and after completing the #100Daysofprojects challenge you will get prizes. you can check the complete information by visiting  [codedamn #100Daysofprojects] (https://codedamn.com/referred-by/ganeshpatil1010?page=100-days-of-projects)
visit this link and start building projects.

Happy Hacking...!!

Hey Everyone I am Ganesh from India connect with me on  [Twitter](https://twitter.com/PatilGanesh1010) share your views in the comment section. I shared content and helpful resources on Twitter and write blogs about technology and programming stuff. if you have anything to ask my inbox is waiting for you.
#OpenCV – Detect and blur faces 😁 using haar cascades in Python 🐍
Tags: englishpost, facedetection, opencv
Published: 2022-02-10 18:26:24

---
title: #OpenCV – Detect and blur faces 😁 using haar cascades in Python 🐍
published: true
date: 2022-02-10 16:48:52 UTC
tags: EnglishPost,EnglishPost,FaceDetection,OpenCV
canonical_url: 
---

Hi !

Quick post today: detect a face using haar cascades and blur the face area. Easy to implement, and also easy to read:

![face blur on a camera view](https://brunocapuano.files.wordpress.com/2022/02/face-blur-on-a-camera-view.jpg?w=655)

Code below

{% gist https://gist.github.com/elbruno/e9ce11a4eb49a6ae94efac74b2dae36e %}

_**Important:** Haar cascades are easy to implement and learn, however, not recommented as a good solution to detect faces._

#### Face Recognition and Face Detection series in Python

1. [Detecting Faces with 20 lines in Python](https://elbruno.com/2019/05/22/vscode-lets-do-some-facerecognition-with-20-lines-in-python/)
2. [Face Recognition with 20 lines in Python](https://elbruno.com/2019/05/23/vscode-lets-do-some-facerecognition-with-20-lines-in-python-2-n/)
3. [Detecting Facial Features with 20 lines in Python](https://elbruno.com/2019/05/29/vscode-lets-do-some-facerecognition-with-20-lines-in-python-3-n/)
4. [Facial Features and Face Recognition with 20 lines in Python](https://elbruno.com/2019/05/30/vscode-lets-do-some-facerecognition-with-20-lines-in-python-4-n/)
5. [Performance improvements with code](https://elbruno.com/2019/05/31/vscode-lets-do-some-facerecognition-with-20-lines-in-python-5-n/)
6. [Resize the camera input with OpenCV](https://elbruno.com/2019/06/28/vscode-lets-do-some-facerecognition-with-20-lines-in-python-6-n/)
7. [Working with Haar Cascades and OpenCV](https://elbruno.com/?p=31124)
8. [Detect and blur faces using haar cascades](https://elbruno.com/2022/02/10/opencv-detect-and-blur-faces-%f0%9f%98%81-using-haar-cascades/)

[Original Post](https://elbruno.com/2022/02/10/opencv-detect-and-blur-faces-%f0%9f%98%81-using-haar-cascades/)

Happy coding!

Greetings

El Bruno

* * *
Back End Developer – flexible location (fully remote or London / Bristol / Leeds)
Tags: hiring, career, node, programming
Published: 2022-02-10 16:45:45

_Full-time, Permanent | Flexible location (Remote / London / Bristol / Leeds) | 55-60k_

An exciting opportunity has arisen for a talented Back End Developer to join a global media and technology company who provide b2b content to a number of major brands.

The team use NodeJS and PHP Laravel on the Back End at the moment but you don’t need to have experience in those 
already – just good knowledge of back end APIs and a willingness to work on NodeJS.

This role comes with complete flexibility in location – you can be fully remote from anywhere in the UK, or hybrid / fully on-site out of London, Bristol or Leeds; whatever works best for you.

The Back End Developer will also have the opportunity to shape the technology used going forward with our move to a microservice infrastructure platform just starting out.

**Role & Responsibilities:**

- Greenfield development, testing and deployment of the microservices platform, taking into consideration the importance of security, performance, scalability and observability
- Support the build of our backend websites using Node / Docker / AWS / React (admin areas)
- Responsibility for the development of new services and be accountable for the overall success of deliveries including analysis and design,
- Responsibility for the interaction of backend services with both each other and dependant frontends that will allow the business to maintain a platform of capability for websites
- Gain an understanding of the infrastructure set-up, and use AWS to host and maintain sites

**Skills & Experience:**

- Considerable hands-on experience developing services for backend APIs (e.g. REST, RPC, GraphQL)
- Strong understanding of modern containerisation strategies (ideally Docker)
- Experience with git source control
- Experience with PHP Laravel or other back-end technology stacks and frameworks (Desirable)
- Demonstrable understanding and experience of NodeJS and TypeScript (Desirable)
- Knowledge of best practice in database implementation, SQL & No-SQL
- Understanding of efficient caching strategies
- React or similar frontend framework knowledge would be a bonus
- This is an urgent requirement and my client are looking to move quickly for the right Back End Developer.

Please direct any questions to Ashleigh Roberts at Berkeley Square IT (ashleigh@bsqit.com / 0117 927 0195) or apply now for immediate consideration
So erstellst du eine Timeline mit dem List Block
Tags: wordpress, css, pagebuilder
Published: 2022-02-13 16:53:15

---
title: So erstellst du eine Timeline mit dem List Block
published: true
date: 2022-02-10 16:36:38 UTC
tags: WordPress,css,pagebuilder
canonical_url: https://bloggerpilot.com/timeline-css/
---

![So erstellst du eine Timeline mit dem List Block](https://bloggerpilot.com/wp-content/uploads/2022/02/timeline-css.png)

WordPress ist ein leistungsstarkes Werkzeug für die Erstellung einer Website oder eines Blogs. Neben dem Standard-WordPress-Theme kannst du auch fast jeden Aspekt anpassen, indem du das Farbschema des Themas änderst, Widgets und Widgets für die Seitenleiste hinzufügst und sogar eine neue WordPress-Vorlage findest.

Der Original-Artikel erschien auf [So erstellst du eine Timeline mit dem List Block](https://bloggerpilot.com/timeline-css/).

CSS ist die Sprache des Internets. Sie ermöglicht es Webdesignern, ihre Seiten so zu gestalten, dass sie für verschiedene Menschen unterschiedlich aussehen und dem gewünschten Design entsprechen. CSS ist ein riesiges Thema, und obwohl es viele Bücher darüber gibt, ist eine der besten Möglichkeiten, es zu lernen, es durch den Blog zu lernen.
Day 6: How Undo a Git Add All
Tags: beginners, newbie, git
Published: 2022-02-10 16:30:25

---
title: Day 6: How Undo a Git Add All
published: true 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbz6sjcuoxu29ih98sbt.jpg
tags: beginner, newbie, git
---

**...BEFORE committing**

I use `git add *` a lot. 
Actually, I use `gita`, `gits`, `gitcm`, `gitp`, as they are my Bash Aliases.

*Next time*, when you `git add all` and 2 dozen files are inadvertently added. Try these: 

`git reset` - **Deducts ALL** the files you just staged

While

`git reset file_name.ext` **Deducts ONE** from the last staging.

*Jus' Remember* : The problem with using aliases is that they can become habitual. Not a bad thing, just something to watch for next time.
Passing data from React Router's Link to another component.
Tags: react, javascript, webdev, tutorial
Published: 2022-02-10 16:28:58

**Hey everyone,**
_In this article, let us understand how to pass data from one route to another route._

Suppose we have a user list on the home page, all users are listed as User components.We need to go to the ViewUser component to see the detail of the user on which we clicked. 

How we will implement this ?

There may be different approaches, but I will focus on approach in which data will be passed from one route to another route.
To do this with React Router, we can pass data from one `Link` to new `Route` that is being rendered.

Let's take an example to understand this approach more clearly.

```
const Home = () => {
  const userList = [
    {
      id: 1,
      name: 'ajay',
      age: 25,
      country: 'India',
    },
    {
      id: 2,
      name: 'john',
      age: 35,
      country: 'US',
    },
    {
      id: 3,
      name: 'kamal',
      age: 25,
      country: 'UK',
    },
  ];
  return (
    <div>
      {userList.map((user) => {
        return <User user={user}></User>;
      })}
    </div>
  );
};

```

```
const User = (props) => {
  const { name, id } = props.user;
  return (
    <Link to={`/user/${id}`} state={props.user}>
      <div>
        <p>Name: {name}</p>
        <p>User id: {id}</p>
      </div>
    </Link>
  );
};
```

In the above example, there are two components, in Home components all users are listed and another is the User component which is using `Link` to go to another route.

When the user clicks on the user component it will navigate to the ViewUser component.

```
const ViewUser = () => {
  const location = useLocation();
  const user = location.state;
  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <p>Country: {user.country}</p>
    </div>
  );
};
```
As mentioned in the above ViewUser component we need user's other details name, age, country.

So how we will pass this information to ViewUser Component from User Component.

To do this, we have to include a `state` prop with the data we want to pass along - in our case, it is user data.

```
<Link to={`/user/${id}`} state={props.user}>
      <div>
        <p>Name: {name}</p>
        <p>User id: {id}</p>
      </div>
    </Link>
```
So how do we get access to the data on `state` in ViewUser? When we pass data along via the `state` property that will be available on the location's state property, which we can get using React Router's custom hook.

```
const location = useLocation();
const user = location.state;
```
Refactoring 004 - Remove Unhandled Exceptions
Tags: programming, exceptions, oop, cleancod
Published: 2022-02-10 16:06:03

*Creating YAGNI exception classes pollutes our environment. Let's remove them.*

> TL;DR: Remove unnecessary and not references empty exception classes.

# Problems Addressed

- Empty Classes

- Namespace Polluted

# Related Code Smells

{% post https://dev.to/mcsee/code-smell-26-exceptions-polluting-pbn %}

# Steps

1. Check there are no references to the empty exception class.

2. Replace the throw sentence with a generic one.

# Sample Code

## Before

[Gist Url]: # (https://gist.github.com/mcsee/c95a843d906b0e339ec617779f79f538)
```ruby
class RangeNotSatisfiedException < StandardError
end

begin
    raise RangeNotSatisfiedException.new "Range must be betweet 0 and 10"
rescue RangeNotSatisfiedException => e
    puts e.message 
    puts e.exception_type 
end


```

## After

[Gist Url]: # (https://gist.github.com/mcsee/63915cf29a543ce091267619bb21917b)
```ruby
# 1. Check there are no references to the empty exception class.

# 2. Replace the throw sentence with a generic one.

begin
    raise StandardError.new "Range must be betweet 0 and 10"
rescue StandardError => exception
    puts exception.message 
    puts exception.exception_type 
end
```

# Type

[X] Automatic

If the Exception class has no references we can perform a Safe Remove and replace it with *Exception* class.

# Why the code is better?

- We remove an empty class nobody uses. 

- We shrink the code

# Limitations

If we need to declare an empty exception class as documentation for an API module, our clients might need to catch it.

This is a [gold plating](https://en.wikipedia.org/wiki/Gold_plating_(project_management)) and [YAGNI](https://en.wikipedia.org/wiki/You_aren%27t_gonna_need_it) example.

# Tags

- Clean up

# Related Refactorings

- Safe Remove

# Credits

Image by <a href="https://pixabay.com/es/users/danielkirsch-4218687/">danielkirsch</a> from <a href="https://pixabay.com/">Pixabay</a>

* * * 

This article is part of the Refactoring Series.
Umbraco Setup/teardown PowerShell scripts.
Tags: umbraco
Published: 2022-02-10 16:05:58

Umbraco 9 embraces dotnet core and all the goodness that brings; This includes creating your umbraco site from the command line: 

```
dotnet new umbraco -n myUmbracoSite
```

which is super cool, and after some intial setup screens you will have your new Umbraco site up and running locally.

# How fast can you go?

So a while back this meant I ~~got into~~ invented a whole Umbraco speed run challenge. 

{% twitter 1449359093957894144 %}

And it resulted in me writing some PowerShell scripts that allow me to setup and tear down Umbraco sites really quickly (around 30-40 seconds). 

Now I have shared these scripts before, but I've updated them a bit since then and I need to update what they do. 

[gist script is here](https://gist.github.com/KevinJump/173af5500103db85fffa712479066606) 

---

# The Setup

If you save that file somewhere on your computer. You can then import this module into your powershell command line. 

```cli
Import-Module -Name C:\Source\Tools\umbraco-tools.psm1
```

_If you place that line in your profile.ps1 file (usually documents\powershell\profile.ps1) it will be avalible everytime you start up a terminal._

> For unattended install to work, you need to create three environmental variables on your PC 
>
> UMB_USER
> UMB_EMAIL
> UMB_PASSWORD

---

# The commands 
With the script installed you get three new commands. 

```cli
new-umbraco  // create an new umbraco site
remove-umbraco // remove an umbraco site (and the db)
clear-umbracodbs // remove all dbs 
```

## > New-Umbraco 
Creates a new umbraco site installs packages, and sets up unattended installtion (so you don't have to do the setup afterwards)

```cli
New-Umbraco <SITE_NAME> [options]

-n name        name of the project
-p package     list of packages to install
-f framework   framework to use (default .net5)
-nostarter     don't install the starter kit package 
-donotrun      don't immediately run the site when complete
-prerelease    fetch pre-release versions of any packages we ask for
```

For Example:
I do this quite often when testing: Create a new site, don't install the starter kit, install uSync package and open the site in VsCode when you have finished. 

```cli
New-Umbraco MyNewSite -noStarter -packages uSync -code
```

Usually this is super fast and I can start work right away. 

## > Remove-Umbraco
Remove an Umbraco installation from disk and remove the db. 

```
Remove-Umbraco <SITE-NAME> -RemoveFolder

-n name          name of site
-RemoveFolder    also delete the folder for the umbraco site
```

## > Clear-UmbracoDbs

through the scripts all umbraco databaswes are created with an umb- prefix, so the `Clear-UmbracoDbs` command simply removes all these dbs from your local instance, good if you know you've just created a load of trash dbs you need to get rid off.
A printable, PDF - Docker cheatsheet
Tags: docker, devops, dockercompose, cheatsheet
Published: 2022-02-10 16:05:38

---
title: A printable, PDF - Docker cheatsheet
published: true
tags: docker, devops, dockercompose, cheatsheet
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbn1noc2fb8rxvx7gcnr.png
---

Hello guys, 

since my previous [printable Git cheatsheet](https://dev.to/tqbit/a-printable-pdf-git-cheatsheet-33bd) received a lot of attention, I've added two more pages for the famous containerization tool Docker. I hope you'll enjoy them just as much.

> You might find the one command that removes the `sudo` constraint from docker commands especially useful, so I'll mention it here again. Use with caution!

```bash
$ sudo groupadd docker
$ sudo gpasswd -a $USER docker
```

## Cheatsheet 1: Managing images and containers

Most of these commands are commonly used. They include: 

- How to build an image, start a container and tear it down
- How to use utility containers (e.g. to manage a Vue application during development)
- How to get rid of old images and containers

![docker-cheatsheet-one](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbn1noc2fb8rxvx7gcnr.png)

Get the PDF from my Github repos: 

https://github.com/tq-bit/dev-cheatsheets/blob/main/q-bit_cheatsheets_docker_I.pdf

## Cheatsheet 2: Deal with several containers at once

The second cheatsheet include a few utility commands, as well as a blueprint for a docker-compose file. To be exact: 

- How to tear down several containers at once
- How to execute bash commands & scripts inside a container
- An overview of the most commonly used docker.compose commands

![docker-cheatsheet-two](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ujw1y7vsgf3i0h65ow7.png)

Get the PDF from my github Repos:
 
https://github.com/tq-bit/dev-cheatsheets/blob/main/q-bit_cheatsheets_docker_II.pdf

---

If you find these files useful, I'd be happy if you left a star on the cheatsheet repos :-)

Happy coding!
Image to ASCII Characters in Java
Tags: java, programming, imageprocessing
Published: 2022-02-10 16:00:36

For the past couple of days I've been working on this mini project called Ascii Art which is inspired by Robert Heaton.

Robert is a great mentor and he explains each step very well and lets you do it by yourself in whichever programming language you choose.

The project is all about printing out an input image as ASCII characters depending on the brightness of each pixel.
It was my first time working with image processing in Java, reading documentations here and there, connecting all the dots and coding this.

Soruce code:
https://lnkd.in/dpH_wkrw


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

and if we zoom in we can see the ASCII characters:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rka5rh00wy7sl9ll5pv.png)
import SVGs in React or Vue
Published: 2022-02-10 15:59:37

Do not ever import SVGs in React or Vue in this way, why?Down pointing backhand index

1. You will include the SVGs into the bundle which will make the app slow to load
2. Each SVG has hundreds of elements so when React or Vue generates the VDOM, you will end up with a giant object with thousands of unnecessary data which will increase the memory consumption
3. The Renderer (ReactDOM or Vue.createApp) will keep track of all these unnecessary nodes in the VDOM and it will decrease the performance especially on the low-end devices

Preventing this issue early will save you from a huge cost of change in the future

Use this insteadDown pointing backhand index


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

Finally, I wanna add this screenshot of Lighthouse test on a page that uses only 16 SVGs in this way! Only 16 SVGs added 2069 elements to the dom


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

[source](https://twitter.com/MarkSShenouda/status/1491510779685789697?s=20&t=5WqkxupXBlYq3Ykt5l0Oyg)
Why is JavaScript a Multi-Paradigm Language?
Tags: javascript, programming, paradigms, programmingparadigms
Published: 2022-02-10 15:43:36

A paradigm can be defined as an approach to solving a problem. A programming paradigm is a way to solve problems by using a programming language.

As you know, each problem needs a specific approach to its solution. So, we would have a set of paradigms for different sets of problems. As programming languages are a way to solve the problems using the code, they will offer support to these paradigms.

So, any programming language which offers multiple programming paradigms is referred to as a multi-paradigm programming language.Some of the well-known paradigms are mentioned below.

Imperative Programming Paradigm
This is an approach where solutions are designed as sets of a clearly defined sequence of instructions or procedures.
A programming language with this approach will have code with a series of commands specifying what the computer has to do, how it has to do it, when it has to do to it to arrive at the solution. Some of the languages that embrace this are C, C++, C#, Java, Fortran, etc.

Declarative Programming Paradigm
This is an approach where the solution is designed as a set of expectations (what needs to be accomplished) without specifying how it needs to be done.
A programming language with this approach will have code with a series of commands stating desired results without specifying how it needs to be achieved. A good example for this would an SQL query, where the developer states that he needs rows from a specific table, without mentioning how to fetch them.

Object-Oriented Programming Paradigm
This is an approach where the solution is designed around communication between the Objects or Classes, which hold the data and the methods to act upon that data.
A programming language with this approach will have code with a series of operations involving defining classes and interaction among these classes with the help of associated methods. Some of the languages supporting this paradigm are C++, Java, C#, JavaScript, etc.

Functional Programming Paradigm
This is a declarative approach where the solution is designed around applying and composing functions.
A programming language with this approach will have a series of function calls and function compositions, where each function takes an input state and returns consistent output value independent of the program state. Some of the languages supporting this paradigm are Haskell, JavaScript, etc.


source: https://javascript.plainenglish.io/why-is-javascript-a-multi-paradigm-language-3b6cc22fee94