teleren/devto huggingface dataset:
React Router v4 – How to get Params from Url example
Tags: react, router, url
Published: 2021-05-03 12:47:49

https://grokonez.com/frontend/react/react-router-v4-how-to-get-params-from-url-react-router-example

React Router v4 – How to get Params from Url example

In this tutorial, we're gonna look at React example that uses Router v4 for getting Params from Url.

<!--more-->
<h2>Goal</h2>
We will use React Router v4 to show a list of Book, each Book has its own link. Clicking on any Book item will show corresponding Component depending on the <code>id</code> in the Url:

<img src="https://grokonez.com/wp-content/uploads/2018/04/react-router-get-params-example-goal.png" alt="react-router-get-params-example-goal" width="442" height="592" class="alignnone size-full wp-image-11662" />

<h2>How to</h2>
<h3>Project Structure</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/04/react-router-example-structure.png" alt="react-router-example-structure" width="179" height="471" class="alignnone size-full wp-image-11648" />
<h3>Install Packages</h3>
We need <strong>react-router-dom</strong> to apply <code>Router</code>. Add it to <code>dependencies</code> in <strong>package.json</strong>:
<pre><code class="language-javascript">
{
  ...
  "dependencies": {
    ...
    "react-router-dom":"4.2.2",
  }
}</code></pre>
Then run cmd <code>yarn install</code>.
<h3>Configure Webpack</h3>
Open <strong>webpack.config.js</strong>:
<pre><code class="language-javascript">
const path = require('path');

module.exports = {
    ...
    module: {
        rules: [...]
    },
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        historyApiFallback: true
    }
};
</code></pre>
<code>historyApiFallback</code> option is specifically for <strong>webpack-dev-server</strong>. Setting it <code>true</code> will effectively ask the server to fallback to <strong>index.html</strong> when a requested resource cannot be found (404 occurs).
<h3>Create Components</h3>
- For each Page that displays when clicking on Navigation item, we add one Component. So we have 3 Components: <code>Dashboard</code>, <code>AddBook</code>, <code>Help</code>.
- We need a Component for 404 status, it's called <code>NotFound</code>.
- Now, we put a group of <code>NavLink</code> in header of <code>Header</code> Component:

More at:

https://grokonez.com/frontend/react/react-router-v4-how-to-get-params-from-url-react-router-example

React Router v4 – How to get Params from Url example
How to count objects on an image with Python
Tags: python, tutorial, computervision, showdev
Published: 2021-05-03 12:31:17

In this tutorial, you will learn how you can count the number of objects on an image with Python using CV2.


This is our test image: 

![enter image description here](https://i.ibb.co/4d0h64v/test1.jpg)

Let's jump to the code:

First we need to import our dependencies:
```python
import cv2
import numpy as np
```
First we need to read our image:

```python
img = cv2.imread('test.jpg')
```
then we will be converting it into grayscale

```python
img = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
```
after that, we doing thresholding on image

```python
_, thresh = cv2.threshold(img, 225, 255, cv2.THRESH_BINARY_INV)
kernal = np.ones((2, 2), np.uint8)
```
then we are doing dilation process, removing black distortion:
```python
dilation = cv2.dilate(thresh, kernal, iterations=2)
```
next step is finding contour shapes:
```python
contours, hierarchy = cv2.findContours(
    dilation, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
```

Then we are getting number of contours (objects found):

```python
objects = str(len(contours))
```
We can now print number of objects on an image
```python
text = "Obj:"+str(objects)
cv2.putText(dilation, text, (10, 25),  cv2.FONT_HERSHEY_SIMPLEX,
            0.4, (240, 0, 159), 1)
```

For the lasr step we can show, original, threshold and dilation image: 
```python
cv2.imshow('Original', img)
cv2.imshow('Thresh', thresh)
cv2.imshow('Dilation', dilation)

cv2.waitKey(0)
cv2.destroyAllWindows()
```
This is our final result: 

![enter image description here](https://i.ibb.co/Bgq0mCf/final1.png)

Thank you all.
Animated Glass Morphism Product Card HTML CSS | Glassmorphism HTML CSS
Tags: html, css, javascript, codenewbie
Published: 2021-05-03 12:19:29

Animated Glass Morphism Product Card HTML CSS | Glassmorphism HTML CSS

Demo == > https://codepen.io/Bilal1909/pen/wvgLOXx

 <img src ="https://i.postimg.cc/W4Hs5xSF/screenshot-codepen-io-2021-05-03-17-16-12-685.png">

 <img src ="https://i.postimg.cc/YShHLbkp/screenshot-codepen-io-2021-05-03-17-17-01-768.png">
Telegram bot (my_bot messages not visible to others)
Published: 2021-05-03 12:11:20

Sir, I have created Telegram bot(my_bot). I am getting project notifications in my mobile. When i asked other employee to install Telegram and add my_bot. He didn't get any notifications similar as mine. Its blank whereas I get project notifications.
Even I added the bot in new group and also added employee. 
Still the same problem. Can you please find out where I have done mistake.
Daily Developer Jokes - Monday, May 3, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-05-03 12:00:20

---
title: "Daily Developer Jokes - Monday, May 3, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Monday%2C%20May%203%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125999cc4b1.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q___: What are clouds made of?

___A___: Mostly linux servers.
 -->
Free Email Marketing Tool for new users
Tags: offers, beginners, productivity
Published: 2021-05-03 11:48:05

Hi,

If you have fewer email subscribers / no subscribers or planning to start email marketing then this post is especially for you because in this post I will show you the fully free email marketing tool.

**What is email marketing?**

Email marketing is the act of sending a commercial message, typically to a group of people, using email. In its broadest sense, every email sent to a potential or current customer could be considered email marketing.

Pro tip - You can use fancy text ([cuping font](http://cupingfont.com/)) in email to attract 

## 1. [Sendinblue](https://bit.ly/3uf1BoC)

![Sendinblue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2std59mu23ipxnh3diaq.jpg)

Sendinblue is the best tool for new users because Sendinblue offers unlimited contacts and many more features in a free plan. 

Features available in the free plan:

* Unlimited Contact
* Up to 300 emails per day
* Access all basic features (some premium also)
* Free plan valid for the lifetime

**[Sign up](https://bit.ly/3uf1BoC) now for free to get started with Sendinblue.**

## 2. [Moosend](https://bit.ly/3eSAnxN)

![Moosend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxkg1a0s3saux8usktgg.jpg)

Moosend is also a good tool for email marketing because moosend offers unlimited emails and many good features in the free plan. 

* Unlimited Emails
* Sign-up & Subscription Forms
* Reporting & Analytics
* 1000 contacts

**[Sign up](https://bit.ly/3eSAnxN) now for free to get started with Moosend.**

Few more completely free tools available but these two tools are decent because these two tools offer premium features in the free plan. 

So I recommend you to signup and start your email marketing journey today.

Want to grow your website traffic? If yes then check [this article.
](https://hubsadda.com/blog-commenting-sites/)
Drupal 8/9: Adding CSS body classes based on the current user's roles
Tags: drupal, php, theming, snippet
Published: 2021-05-03 11:44:37

Sometimes it's useful to add body classes based on the current Drupal user's roles.

This article shows how to do this by adding or modifying a `theme_preprocess_html()` implementation in your `.theme` file. 

No twig modifications required.


## Step 1: implement `theme_preprocess_html()`

In your theme's `MYTHEME.theme` file, add the following preprocess function:

```php
/**
 * Implements hook_preprocess_html().
 */
function MYTHEME_preprocess_html(&$variables) {
  $roles = \Drupal::currentUser()->getRoles();
  foreach ($roles as $role) {
    $variables['attributes']['class'][] = "role-{$role}";
  }
}
```

&rarr; Be sure to replace _MYTHEME_ with the name of your own theme.
&rarr; Be sure to clear your caches.

Assuming the current user has the _administrator_ role, the body classes for each of the pages this user loads will now also contain:
* role-authenticated
* role-administrator

## Step 2: add styles

You can now add styles targeted at specific user roles.

We use this technique to render certain administrative / debugging styles for admin users.

Here's an example: highlighting images without _alt_ descriptions.

```css
.role-administrator img:not[alt],
.role-administrator img[alt=""] {
  border: solid red 2px;
}
```

---

If you liked this article, you'll love [our courses](https://trainingcloud.io/courses) on Drupal 8/9 Site Building, Module Development, and Theme Development. 

![TrainingCloud: Drupal and PHP training for (aspiring) developers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wav7v6hn30d0q9vfy3c.png)
ServerPilot and RunCloud Alternative 2021 - CloudStick
Tags: nginx, wordpress, aws, security
Published: 2021-05-03 11:38:53

CloudStick is a simple ServerPilot and RunCloud Alternative. We offer unbeatable features and performance to your sites along with top-notch security. 

https://cloudstick.io/


CloudStick is a SaaS application designed to manage your Digital Ocean, Linode, AWS, Vultr, GCP, Any KVM servers or Dedicated servers for PHP, and Node-based Web Applications. CloudStick is fully packed with Nginx, Apache, PHP, MariaDB, FTP, Cron, Supervisord, Redis, Memcached, Node, Composer, etc. CloudStick’s one Click installer is capable of deploying WordPress, Joomla, NextCloud and PHPMyAdmin.

We would like to give a coupon code for the Dev.to community for a month as an introductory offer on annual plans and it is applicable for Basic and Pro packages (Not trial). You can avail 50% off on the annual package by paying just $90 for the first year with the Promo code.

We are providing 10 days Free Trial - No Credit Card or Paypal information required to Sign Up.

Coupon Code: DevTo
(This Coupon is Valid till May 31’st 2021)

How to install CloudStick?

You need an account with CloudStick: https://cloudstick.io to get started.
You should have a server with the operating system of Ubuntu 16.04 LTS, 18.04 LTS, or 20.04 LTS .

Once the account is created, you need to click on Connect server then >> Enter your server name and select the provider, and server IP address  >> enter the root password to install CloudStick on your server. The installation will take 5 - 8 minutes and your server will be ready to host websites and applications.

What are the features available in CloudStick?

Quota for accounts/ Web applications/ System Users.
Centralized management and the global search for databases, web application, and servers.
The one-click web application installer.
Manual SSL
Free SSL
Additional FTP accounts for web applications and subdirectories.
SFTP for web applications.
Service management.
Server Time zone management.
Hostname setup
Database management with advanced options, such as assigning custom privileges for the user, easy remote access, and many more.
Git Deployment and WebHooks.
Multiple PHP versions - 5.5, 5.6, 7.0, 7.1, 7.2, 7.3, 7.4, 8.0
EasyPHP - which allows customers to install the required PHP module without a command-line interface, such as pgsql, mcrypt, redis, geoip, imagick, ioncubeloader and igbinary, ZMQ, etc.
Easy SSH access management.
Advanced server firewall with automated triggering.
Server Health Statistics.
Advanced web application file manager.
Isolated cache management system.
Advanced Web application management utilities, such as manage redirection, cores management, etc.

What are the Upcoming Modules?

Team management - which is free for Basic and Pro package owners. Will be released in 15 - 20 days.
DNS - Which is also a free module for all customers even for free too.
Backup - Incremental backup with addon pricing.

What are the benefits of using CloudStick?

24/7 Free ticket support with 20 minutes response time.
Free migration.
No additional cost for support
API availability
Kant C 💩. A Javascript snippet to change YouTube video brightness
Tags: javascript, sideprojects, showdev
Published: 2021-05-03 10:35:27

> TL;DR [https://gdi3d.github.io/change-youtube-videos-brightness/](https://gdi3d.github.io/change-youtube-videos-brightness/)

![Kant C shit Sample](https://gdi3d.github.io/img/kantcshit-sample.gif)

I usually watch movies or YouTube videos with my external monitor. But sometimes the video is too dark and turning up the monitor's brightness it's not enough.

So I decided to create a small javascript snippet to fix this issue in any web that has a video on it.

It's call **Kant C 💩** (can't see shit) and you can use it by pasting the snippet in the javascript console of your browser.

[https://gdi3d.github.io/change-youtube-videos-brightness/](https://gdi3d.github.io/change-youtube-videos-brightness/)

# Demo

You can test it out on [https://gdi3d.github.io/change-youtube-videos-brightness/demo.html](https://gdi3d.github.io/change-youtube-videos-brightness/demo.html)

# How does it work?

It uses the [*filter*](https://gdi3d.github.io/change-youtube-videos-brightness/) properties of CSS and it's applied to the *video* tag element present on the site.

# It's safe?

Yes, but feel free to inspect the code at [https://github.com/gdi3d/change-youtube-videos-brightness](https://github.com/gdi3d/change-youtube-videos-brightness)
85: Generative Art coding
Published: 2021-05-03 10:32:57

##What I want to make is...


The thing I mind about in this process is to separate their original opinions, in order to minimalize my idea and make it connect if there is something similar. And, develop the imagination. here is what I am impressed with today…


Explore, don’t be scared of trying (different) things, trust yourself, never be complacent, keep on learning. I started my career in a tiny print studio where I would spend most of my time designing (boring) print jobs. 


One day, the studio (somehow) got its first web mandate. This forced me to (self) teach myself web design, Flash, After Effects… and led me to where I am today! I also believe that the more well-rounded you are, the better a designer you’ll be — learn UX, learn to code, learn motion design. The more you understand, the better you’ll design.

Via this article : https://www.loversmagazine.com/interviews/louis-paquet#product-2.png


--------------------

I could say I am more likely to code based on the designer’s brain. And, I was looking for the examples, and people who create the artwork with code 🌉



My initial reason was simply creating the motion design (In my word, Digital Painting by writing), I found out it enough and chose to focus on this cool


Creativeness is the most essential when it comes to artwork, that is my disposition is. It makes me push the new self-challenge and out of the comfort zone! Enjoying the process each step is pretty realistic and non-stressful… 🏕


My main goal: https://mattdesl.svbtle.com/generative-art-with-nodejs-and-canvas
Muti step bootstrap form
Published: 2021-05-03 10:20:41

I had received a tutorial request from my blog follower to send him step by step tutorial for creating <a href="https://bbbootstrap.com/snippets/multi-step-form-wizard-30467045">responsive multi step form</a> with bootstrap and Jquery. It’s an excellent technique where you want to break the form fields into multiple categories. Also since the design is also responsive it looks great for mobile devices like tablets and smart phones.
Mailman: How to add members to a mailing list
Tags: mailman, email, server, mailinglist
Published: 2021-05-03 10:04:54

Here is how to add members to GNU [Mailman](https://www.gnu.org/software/mailman)'s lists with a plain text file.

<small>\* "Mailman" in this post means __not__ Mailman __3__ __but__ Mailman __2__, because I use [OpenBSD](https://www.openbsd.org).</small>

The [`add_members`](https://www.gnu.org/software/mailman/site.html) command is the way.

Create a file to write members of a list in it. Its name is, for example, `mailman-xxx.list`:

```
user1@some.fqdn
user2@some.fqdn
user3@another.fqdn
...
```

Run `add_members` for `$LIST_NAME` (replace this with your list's name):

```console
# /usr/local/lib/mailman/bin/add_members \
    -r mailman-xxx.list $LIST_NAME \
    # disable to send welcome messages to new members \
    -w n
```

Then, your members are printed as registration success:

```console
Subscribed: user1@some.fqdn
Subscribed: user2@some.fqdn
Subscribed: user3@another.fqdn
...
```
Better CSS box shadows
Published: 2021-05-03 10:01:35

Using shadows is a great way to avoid clunky borders in otherwise light layouts and they've long surpassed being "just for decoration" elements in websites and apps alike. Especially when creating different levels of elevation that make some elements appear closer to the user than others – like a stack of elements – the use of shadows can make a big difference.

- In general the closer something is to the user, the more attention it will get, just like the closest car in traffic (like buttons)
- Smaller shadows that are closer to the elemet are great for capturing attention, while more diffuse and wide shadows are better suited to separate an element form its surrounding (like overlays)
- Inset shadows can help create a feeling of plasticity or let elements appear bend inwards

To make a layout with shadows as consistent as possible, we should make sure to pick an imaginary lighting position and stick to it whenever using shadows. Otherwise we risk inconsistencies that look weird to users. Elements casting shadows in different directions also make it harder for the eye to quickly see a hierarchy when it comes to eleviation (z-index).

While those general guidelines are a solid start, the real magic of box shadows reveals itself when we use multiple shadows on the same element. In CSS a regular box shadow has the following properties:

```css
box-shadow: x-offset y-offset blur-radius spread-radius color;
```

We can however add more shadows on the same element by comma-separating them:

```css
div {
	box-shadow: 0 4px 6px rgba(0,0,0,0.7),
	0 5px 15px rgba(0,0,0,0.2);
}
```

The first shadow in this example is a box-shadow how it is often used, generally darker, close to the element and rather sharp with only a bit of blur – the classic way of using box-shadows.
The second shadow however has a bigger blur, a higher vertical offset and is rather subtle, giving the element a lot more depth, making it look closer to how we see shadows on objects in real life. If we wanted to achieve a perceived higher elevation that shadow would have to be more subtle the closer it gets and more intense the further "down" it is supposed to be.

While that's already a great improvement over simple box-shadows, we can go even further and create a fake plasticity by adding another shadow to the element. One brand that has incorporated this kind of plasticity into their overall appearance is Algolia. Here's a typical button, which adds a third (inset) shadow to the element, giving it a little edge on the bottom.

![https://allround.io/storage/algolia-button.jpg](https://allround.io/storage/algolia-button.jpg)

```css
.btn {
	box-shadow: 0px 2px 4px rgb(45 35 66 / 40%), /* diffuse shadow behind the button */
	0px 7px 13px -3px rgb(45 35 66 / 30%), /* shadow offset to the bottom for depth */
	inset 0px -3px 0px #d6d6e7; /* boottom "edge" of the button */
}
```

Of course we don't always want to make use of every technique just because we can. When shadows are part of the layout however, it is definitely worth spending a bit of time on nailing those basics to get a clean and consistent look.
Simple & Fast Emoji Favicons
Tags: html, tutorial, favicons, webdev
Published: 2021-05-03 08:52:22

Ok, this is a short one:

Ever heard of `https://fav.farm/`?

Me neither, until [recently](https://twitter.com/wesbos/status/1385249987928346631?s=20). So, if you just quickly want to set an emoji as a favicon it's as simple as adding this short line of HTML into the `<head>` of your page:

```html
<link rel="icon" href="https://fav.farm/🤓" />
```
Sweet, isn't it?

It's 2021 folks! No nasty favicon-generators anymore!🥳
At least if you want to get started quickly and don't need your fancy logo to be faviconized.
Project Management Software – Ten Reasons Why You Need It In Today’s Workplace
Published: 2021-05-03 08:40:32

Project Management Software
Effective project management is a prerequisite for successful project completion. Modern enterprises, irrespective of size and scale, want to manage projects on hand efficiently to meet all the deadlines. There, project management software remains handy. If, as an entrepreneur or a project manager, you are still wondering why project management software is necessary for your company, then this blog is for you!

Let’s start with an interesting fact. A recent study has found that project management software is the most popular software in nearly half of the US. 

We can put it in this way- even a simple project like organizing a birthday or anniversary party involves a lot of different tasks to be accomplished, and that too, on time! In today’s dynamic and fast-paced corporate world, it is necessary to find out who is doing what in the workplace. A team task management tool or software can do this for you. 

Thanks to advancing technology, today, all the tactics and ideas for managing projects efficiently have transformed into advanced project management solutions. The journey started back in 1896 with the advent of Harmon gram and has reached a project management app today. As per the official survey, more people tend to use their smartphones for accessing the Internet.

These days, several companies have come up with dedicated project management apps for assisting enterprise clients in remote working and improving collaboration. 

The project management system can take care of all five phases related to projects effectively. These phases are- project initiation, planning, execution, monitoring, and closure. Still, if you have a dilemma about whether you should integrate a team task management tool, here are the top ten reasons for it. 

Original Source: https://www.taskopad.com/blog/project-management-software-why-you-need/