teleren/devto huggingface dataset:
Updating favicon in Fullstack(React + Django) Application
Tags: react, html, javascript, webdev
Published: 2021-12-14 09:15:21

**Hello everyone,**

This blog is about how to change your **_favicon in React_** while deploying your **full-stack application** on **cloud server.**

I actually struggled a bit on fixing this issue in my **_full-stack (React+Django) application_** while deploying on Azure and Heroku. The tab was not displaying any icon after the deployment but was showing using local server. Looked for answers on the internet, none was helpful.

Well I tried so many methods which didn't work, first one was copying the favicon into public folder of React app and changing the path simply. No luck.😥
Then moved the favicon in **_/assets_** folder under **_src_** and then took the reference path of that in **_index.html_** file under **_public_** folder. Still no luck.

Googled the issue, read blogs, nothing worked.

### Now what anyone can do in this situation?

Yeah, you're right, taking help from someone. So, I talked to a friend and he suggested something and I applied. Voila, worked now. Feeling awesome.😄

### So what was the thing I had to do to make this work?

It's no rocket science. All I had to do was to write a **_useEffect_** hook with empty array dependency and in that pick the id using **_document.getElementById('<<Id>>')_**, yeah you can use **_querySelector_** too and then pass the same **_id_** in **_index.html_** file in element related to **_favicon_**. So now you just need to import the favicon in App.js file and set the attribute and you're done.
See, how easy this was.✌️

#### Below are the steps mentioned with code.
**Step 1 - Import icon and write useEffect in App.js**
```javascript
// App.js
import icon from './images/favicon.ico';

useEffect(() => {
    const favicon = document.getElementById('favicon');
    favicon.setAttribute('href', icon);
}, []);
```

**Step 2 - Add an id to favicon element in index.html file under public folder.**
```javascript
<link rel="shortcut icon" id="favicon" href="%PUBLIC_URL%/favicon.ico" />
```
So this solution worked🎉but if you have any other tricks/solution, Let me know in the comment.
leading web & mobile app development company
Tags: welcome, javascript, programming, python
Published: 2021-12-14 09:08:57

 iGlobsyn Technologies is a [leading web & mobile app development company](https://www.iglobsyn.com/) in India. Best IT solutions company, delivering customized solutions and services for businesses to enhance productivity. Through a unique approach, global partnerships, and excellence in quality, we strive to create unmatched value for our clients.

**Key Services:
** 

- Mobile Application Development (Android, iOS, Windows Phone Applications)
-  Web Design & Development
-  Node Js & Angular JS development
-  AWS Architecture, Serverless Development, AWS Lambda, DynamoDB
-  PHP
-  WordPress Solutions
-  Enterprise Solutions

For more detail about us or our services, you can E-mail us.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/742nra0jcmjz3ohnqz48.png)
Cherry-Pick Your Teammate's Changes Without Push 'n Pull-ing To Your Repo In Android Studio
Tags: webdev, programming, productivity, git
Published: 2021-12-14 09:06:36

You asked your teammate for help with a piece of code and they showed you the solution in their editor. Now you need to fetch those changes. Usually, this would mean a series of tedious Git commands for both of you (not to mention that the changes will forever grace your git history), but no longer - GitLive allows you to cherry-pick your teammate's changes straight from their local files without having to push and pull to Git.

In Android Studio, open up the team window by clicking on the GitLive icon on the bottom tool window bar.

![img-1-red-box.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639399419640/xUcQducw0.png)

This will show a list of your teammates, if they are online (or away) and the issue they are currently working on. Click the arrow on the left-hand side of the teammate that helped you to see the repositories they have cloned, locate the one they made the changes to and click the arrow beside that too.



![IMG-2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639398608237/s6w-BmcCd.png)


Here, you can see the list of files changed by your teammate on their branch compared to the main branch. Files with asterisks next to the file icon contain changes made locally by your teammate that have not yet been pushed to the remote repository.

Since we are only interested in their local changes, click the filter icon at the bottom of the team window to filter to only the unpushed changes.


![IMG-3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639398600703/zGYH287l8.png)

Now we can see the single file that contains the solution we want to copy! Clicking on it will open a diff of the changes so we can make sure it contains only the changes we need. Now all we need to do is to right click on the file and select the cherry-pick option to pick the changes. And voilà - no need for any git push- or git pull -ing!


![IMG-4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639398593172/6-fjX8pz-.png)

You can also perform the cherry pick at the level above if you want to pick all changes from multiple files at once by right-clicking on the repository and selecting the cherry-pick option.


![IMG-5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639398583768/-XEEChZua.png)



Don't have the GitLive extension installed yet? You can [find GitLive here](https://plugins.jetbrains.com/plugin/11955-gitlive), and if you want to learn more, check out [this blog post](https://blog.git.live/gitlive-8-0-Cherry-picking-your-teammates-changes) or the [GitLive docs](https://docs.git.live/docs/cherrypicking/).
Setting up a Symfony application using Docker.
Tags: php, docker
Published: 2021-12-14 08:53:53

In this blog we are going to be setting up a Symfony application inside of a Docker container. If you have not previously worked with a plain Docker file, you can follow my last post [here.](https://www.therelicans.com/anthonygilbertt/setting-up-a-plain-docker-container-then-adding-libraries-part-1-2-54gf)

At this point we should have our container running, and inside of our container we can run the following [commands.]()


To create our own docker container we need to create two new files:
1. `docker-compose.yml`
2. `nginx.conf`

The `docker-compose.yml` should contain the following code 


```
version: '3'
services:
    web:
        image: nginx:latest
        ports:
            - "80:80"
        volumes:
            - ./nginx.conf:/etc/nginx/conf.d/nginx.conf
            - ./app:/app
    php:
        image: php:fpm
        volumes:
            - ./app:/app
```

In order for this to work, you need to create an 'app' folder and inside of that, you need to create a 'public' folder, inside of that you can create your `index.html` file.

As for the 2nd file mentioned, you need to add the following code:
```
server {
    listen 80 default_server;
    root /app/public;
} 
```

This will start the container server and tell the container which directory to point to. 
Once we have done this we need to create a `index.php` file inside of the `/app/public` directory.

Inside of our newly created `index.php` file, we need to copy/paste the following:
```
<?php
phpinfo();
```

Now we need to re-run the server using `docker-compose up`.

After restarting the docker container we should see PHP manual page.
If you see this, then congratulations, you have successfully created your PHP Docker container!! 🎊 🎊


Now that we have our basic PHP container, we can add Symfony to it.

To do this we need to stop the server by using the `control` + `c` command.

Afterwards we want to run the following command: `curl -LO https://raw.githubusercontent.com/bitnami/bitnami-docker-symfony/master/docker-compose.yml`

This will download Bitnami's official Symfony `docker-compose.yml` image. Once this command has finished, we can re-run `docker-compose up` to run the build process. This is going to take some time, so feel free to grab a beverage.

Once it has finished, you can visit `localhost:8000` to visit your newly generated Symfony app.  Which should look like this ![A picture of the complete product.](https://symfony.com/screenshots/preview-symfony-5-welcome.png)
And you're done!!  

-Anthony
Follow me on [twitter](https://twitter.com/anthony_codes)
A dependency conflict between CRA and Storybook
Tags: cra, storybook, webpack, babelloader
Published: 2021-12-14 08:50:49

## Intro
You may find this post helpful IF you,
1. initialized a project using CRA
 - in my case, I used `npx create-react-app myApp - template redux-typescript`
2. installed storybook using `npx sb init` on top of CRA settings
3. `npm start` or `yarn start` throws an error regarding webpack(4.44.2) and/or babel-loader(8.1.0) package

 I tried all possible methods listed on StackOverflow and other blogs. However, I just wanted to share the one that fixed my issue. 
 Some suggest using the `SKIP_PREFLIGHT_CHECK` flag; it won't resolve the issue but only covers the matter.

A part of the logged out instructions
```console
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.44.2"
```

## What worked in my case
In `package.json`, add the option below
```javascript
 "optionalDependencies": {
 "babel-loader": "8.1.0" // or webpack if it's the one causing the error.
 }
```

Here's [the link](https://stackoverflow.com/questions/60964631/create-react-app-requires-a-dependency-babel-loader-8-1-0) to the StackOverflow post.
How to set up Symfony & then Dockerize it.
Tags: docker, php, symfony
Published: 2021-12-14 08:48:01

In this post we are going to be setting up a Symfony Docker environment.  If you don't know what Symfony is, it's a PHP framework.

To get started we will install PHP, in this example we will be using PHP version 7.3.  To do this you can install by typing the following:
`brew install php`

After install PHP we need to install composer, which is the PHP package manager. To do this we can copy-paste the following into the terminal. [Code](https://getcomposer.org/download/)
![image](https://www.therelicans.com/remoteimages/uploads/articles/fz0iv0us9ea1lan8djs2.png)


You can run the following command to check if your system meets the Symfony requirements. `symfony check:requirements`

To create our Symfony project we will run the following command. `symfony new my_project_name --full`

Now to start our web server, we will run this command. `symfony server:start`, now your web server should be running on default port, 8000.


Now that we have our default application built, we need to install Docker. To do this you can run the following command in your terminal: `brew install docker` or visit the Docker website and download the executable.

Now we need to add a Dockerfile to the root of our project. You can do this by typing `touch Dockerfile`.

After creating your Dockerfile you will need to paste the following code into your Dockerfile. [Code](https://dockerize.io/guides/docker-symfony-guide#makethedockerappimage)

![image](https://www.therelicans.com/remoteimages/uploads/articles/dvovhdowaib8wxomnrxf.png)

To build our php Symfony docker container, we will use the `docker build` command and provide a tag or a name for the container, so we can reference it later when we want to run it. The final part of the command tells Docker which directory to build from.

`docker build -t symfony-tutorial .`

After running the build command, you need to create the image. To do this you need to type the following: `docker build -t symfony-tutorial .`  You can make sure that the image has been created by typing `docker images` into the terminal.

Now that the docker image has been created, you can run your docker image and upon doing so, it will start the web server.
Here is how you do it: `docker build -t symfony-tutorial .`

Now your docker environment is running on port `8000`!!

Happy coding!!

-Anthony
Should I learn React or angular js
Tags: react, angular, webdev, beginners
Published: 2021-12-14 08:44:19

#Hello Everyone..
##Introduction
In this Article we are seeing the best things I can't tell about what to learn, but there are advantages of both of them, and I hope my comparison will help you to choose or at least learn something new.

###ReactJS
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/po9oomcjq3sm8o1xd5pc.png)
ReactJS is a JavaScript library developed and powered by Facebook.It has easy learning API and interface and is great for debugging. The technology has a component-based architecture making a code highly reusable. It has proven to be efficient for large scale high traffic applications such as Facebook, Instagram, BBC, and Netflix.
Other benefits of ReactJS are React Native library and server-side rendering, which allows solving SEO and performance issues.ReactJS assures faster updates creating and synchronizing minimal lists of update portions.

these benefits, ReactJS is essentially a library, not a full framework.In addition, the absence of templates and the use of Components for the UI generation may be confusing for programmers who do not specialize in React.Model-View-Controller paradigm while routing, data fetching and state management need to be tackled with the help of third parties.

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

AngularJS is a Google product released in 2009, which makes it the oldest JavaScript framework.Directives of AngularJS allow adding special behavior to parts of the DOM, thus, facilitating the extension of HTML.It is a complete solution with a Model-View-Controller
architecture, declarative programming style and strong feature set. AngularJS provides simple routing, intuitive alteration, and straightforward UI design.

On the one hand, it significantly reduces the amount of code needed for the creation of dynamic views; on the other hand, it hurts performance and complicates debugging.A two-way data binding seems to be simultaneously the most appreciated and the most detested feature of AngularJS.
.
.
.
.
#####Conclusion
######I hope you found this article useful, if you need any help please let me know in the comment section.💯
Update your App when you release APK on GitHub (using Library)
Tags: android, github, kotlin, library
Published: 2021-12-14 08:40:29

{% github supersu-man/GitHubAPKUpdater-Library no-readme %}

If you also release APK file with every new release as an asset on GitHub just like me, this could be a very useful Library to you.

## Requirements
- Your App Version name in Gradle and your release Tag version on GitHub needs to be SAME (adding 'v' is optional in GitHub Tag version).

Gradle:
```
versionName "X.Y"
```
GitHub Tag version for release:
```
vX.Y or X.Y
```
- Add these lines in top level build.gradle
```
allprojects {
    repositories {
        /// ....
        maven { url "https://jitpack.io" }
    }
}
```
- Add this line in build.gradle
```
implementation 'com.github.supersu-man:GitHubAPKUpdater-Library:v1.6'
```

## Usage
### Usage in one of my Apps [here](https://github.com/supersu-man/WhySave/blob/main/app/src/main/java/com/supersuman/whysave/MainActivity.kt)
### Simple implementation [here](https://github.com/supersu-man/GitHubAPKUpdater-Library/blob/main/app/src/main/java/com/supersuman/githubapkupdaterexample/MainActivity.kt)
### Example
```
thread {
    val updater = Updater(this, "Link_to_your_repo")
    checkForUpdates(updater)
}
```
```
private fun checkForUpdates(updater: Updater) {
    if (updater.isInternetConnection()){
        updater.init()
        updater.isNewUpdateAvailable {
            if (updater.hasPermissionsGranted()){
                updater.requestDownload()
            } else{
                updater.requestMyPermissions {
                    updater.requestDownload()
                }
            }
        }
    }
}
```
### Explanation
- Initializing (use your repo link like this)
```
val updater = Updater(this,"https://github.com/supersu-man/Macronium/releases/latest")
```
- Checking for required Permissions
```
updater.hasPermissionsGranted()
```
- Requesting required permissions (it's WRITE_EXTERNAL_STORAGE here)
```
updater.requestMyPermissions {
    //Your code after user gives the permission 
}
```
- Checking for Internet Connection
```
updater.isInternetConnection()
```
- Checking for New Update (if the version name and latest tag version don't match it detects as new update)
```
updater.init()
updater.isNewUpdateAvailable {
    //Your code when new update is found in the repo
}
```
- Download latest APK
```
updater.requestDownload()
```
Log4J JNDI Remove Utility
Published: 2021-12-14 08:35:39

Some days ago, There was big shocking security issue disclosed about Log4J JNDI exploit vulnerability.

It was almost veiled over 8 years!

Some kind of worried thing blows in my head because it's very most used Logger API ever.

But we have to get a chance to recover it.

Not fully complete, but complementary thing is here. It's a way to remove JndiLookup.class in Log4J jar files.

So I introduce a utility for removing JNDI class in jars by batch processing from top level directory.

Download and execute jar like 'java -jar log4j-jndi-remover.jar', then you can fix your applications and services.

* For JDK 1.8
[https://github.com/9ins/console-input-manager/blob/5816b6b7b49013074e5be9705583560fa8ffd60f/log4j-jndi-remover-java8.jar](https://github.com/9ins/console-input-manager/blob/5816b6b7b49013074e5be9705583560fa8ffd60f/log4j-jndi-remover-java8.jar)

* For JDK 11
[https://github.com/9ins/console-input-manager/blob/5816b6b7b49013074e5be9705583560fa8ffd60f/log4j-jndi-remover-java11.jar](https://github.com/9ins/console-input-manager/blob/5816b6b7b49013074e5be9705583560fa8ffd60f/log4j-jndi-remover-java11.jar)
this in JavaScript | this value in Arrow Functions vs Regular Functions
Tags: javascript, webdev, beginners, programming
Published: 2021-12-14 08:21:49

In this video I have a explained about 
what is <b>this</b> keyword and how the value of this changes dynamically with practical examples.

How this works in Regular functions and <b> Arrow functions</b>.
Explained everything with detailed explanation.

{%youtube dWZIPIc3szg%}
Basic usage of PyInstaller and Pyarmor
Published: 2021-12-14 08:19:15

# Pyinstaller and Pyarmor

Pyinstaller and Pyarmor are two tools that can be used to create GUI tools using Python, or to convert your code into an exe file for distribution.

Pyinstaller turns your python code into an exe file on windows, or an app file on mac, and Pyarmor obfuscates the code before turning it into an exe if you don't want people to know what's in the code.

I had a chance to use it at work, so I'll share it with you along with my personal notes.

# Both are not Cross Platform.

Both Pyinstaller and Pyarmor are not cross platform. Therefore, you have to exe and app them on Windows, Mac and Linux respectively. 
It is also important to make sure that the **OS versions match** (I was unable to run the app on Catalina when I made it on Big Sur).

(If you are using the Fastapi framework, `pip install websocket==8.1` was required, due to the use of uvicorn?)


# Command differences by environment

```
flask
  ┝ __init__.py
  └ app.py
```

For simplicity, let's assume a Flask application like the one above.

- If you have installed python or pythol library in your local environment
      1. Pyinstaller 
         under /flask,  `pyinstaller app.py`
      2. Pyarmor
         under /flask,  `pyarmor pack -e " --onefile" app.py`

- If you are installing Python and python library under Poetry environment
       1. Pyinstaller 
          `pyinstaller app.py`
       2. Pyarmor
          `pyarmor pack -e " --onefile" -x " --exclude venv --no-cross-protection" app.py` (need to exclude .venv file)


# License of Pyarmor
You need to purchase a license for commercial use.
It is a one-time purchase and costs about $70 (us doller). If I buy one, can I use it for more than one?

[PyArmor License](https://pyarmor.readthedocs.io/en/latest/license.html#purchase)



There's not much information on Pyarmor, and I had a hard time figuring out how to Build it, especially in a poetry environment!
I hope this helps someone out there!
email validation
Published: 2021-12-14 07:55:47

it’s important to think about emails and how to validate the data. For example, if you need to be able to send an email that looks like it has a valid sender address, you should verify the sender address and make sure the sender is not sending you junk email.When you’re working with a brand, it’s important to be sure that you’re [email validation checker](https://www.antideo.com/)
be sure that you’re communicating with the right people.A lot of business owners think that they have to monitor their email to make sure it’s receiving valid messages, but that’s just not true. In fact, it’s impossible to be on top of your email every second of the day. The best thing you can do is to be sure that you’re receiving information and updates on your products or services. It’s up to you to do the hard work of ensuring that your emails are getting to the people who need to receive them.
Perl is enough easy to learn
Published: 2021-12-14 07:52:24

I saw often the misleading information "Perl is difficult to learn".

Personally I feel Perl is enough easy to learn.

I write a program.

<b>Input</b>

<pre>
kimoto,19,Japan
Ken,23,US
Pony,29,UK
</pre>

<b>Output</b>

<pre>
kimoto-19-Japan
Ken-23-US
Pony-29-UK
</pre>

<b>Program</b>

```
use strict;
use warnings;

while (my $line = <DATA>) {
  chomp $line;
  my @items = split(/,/, $line);
  print join('-', @items) . "\n";
}

__DATA__
kimoto,19,Japan
Ken,23,US
Pony,29,UK
```

Let's play this program on <a href="https://perlbanjo.com/">PerlBanjo.com</a>
How to Debug Python Scripts Like a Pro?
Tags: python, programming, beginners, webdev
Published: 2021-12-14 07:41:55

Printing logs won't help.

As a self-taught programmer, debugging was my biggest struggle, and often it's the bottleneck holding me back.

Over time, I've learned several techniques. Some aren't very good, but they work. Some are useful but not perfect. And some are pretty smart ways of doing it.

In this post, I've discussed several techniques I used for finding issues in a Python project. I believe it'd be helpful for beginners and intermediary level Python developers and data scientists.

[Debug Python Scripts Like a Pro](https://thuwarakesh.medium.com/78df2f3a9b05?sk=73e13ee9c1005b33c1f90aef8e7d2ae0)
A11y tips: the right element
Tags: a11y, tips, html
Published: 2021-12-14 07:41:51

The first step to achieve an accessible website is to **use the right HTML element** at all times. Try to write a code that reflects the structure of your information, do not stay in a simple set of `<div>` and `<span>` which you will later style with CSS.

For example, if you want to make a button, **don't simulate its behavior** with a `<div>` that you fill in with CSS and JS to achieve what the browser already gives you natively. The browser can already do a lot of your work if you use `<button>`.

To find out how accessible each element of HTML5 is, you can use [HTML5 Accessibility](https://www.html5accessibility.com/), which is up-to-date and offers very reliable information.

If the HTML that you deliver to the browser has a meaning, that will **help any type of device to understand it and offer the user the best experience**, and that includes a computer, a mobile phone, a tablet, a screen reader, a voice recognition software, a watch ...

Remember, **accessibility starts with semantics**.