teleren/devto huggingface dataset:
Simplest Firebase Analytics Guide for your project
Tags: firebase, webdev, typescript, analytics
Published: 2021-04-12 15:53:19

Note: This post does not include how to create a web app on firebase console, since I am focusing only on how to show on the Firebase Analytics console the events that you want to create for your project.

The result of the process should lead you on a view like this
![analytics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gc19pilsgu7mm0memfr.png)
 
I spent quite a lot of time today trying to figure it out how this works and I thought to share my experience since there are many posts that you will loose your time.

- I am using Vite framework and TypeScript.
- I have add the app on the firebase console and also the firebase.ts configuration file.

On the picture above, on the right side you can see the login event.
Below this is an example on how I created and stored the ``signInWithEmailAndPassword()`` method from firebase library and how I am adding the analytics method after the signing in.

```js
const signIn = (
    email: string,
    password: string,
  ): Promise<firebase.auth.UserCredential> => {
    return auth.signInWithEmailAndPassword(email, password).then((user) => {
      analytics.logEvent('login')
      return user
    })
  }

```

On that part of code, the ``login`` event is being used by firebase analytics library and documentation:
[https://developers.google.com/gtagjs/reference/event#page_view]()


Then I realised that the events on the console will not show up till 24hrs have passed, so you will have to see it on debugging view.

- Firstly download on your Chrome the Google Analytics Debugger:
[https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=en]()
and activated it.
- Then on your firebase project go to Dashboard -> and click on the ``DebugView Report``
![viewpage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t51vuw8ok7c4vmujvi3b.png)

[https://firebase.google.com/docs/analytics/debugview#web]()
This will open to another page and the last thing you need to do is to copy-paste the localhost link and it will connect.

That's a simple and easy example so that you can create more and more events for your analytics.

Enjoy!
#1 of 100DaysOfCode
Tags: 100daysofcode, react
Published: 2021-04-12 17:01:00

Today I started my 100 days of code journey.
Right now I don't know much about the topic that I am learning so can't specify what should be my daily goal or at least how many topics I'm gonna cover each day.

My today's learnings:
What is react?
Why use it?
Possible use cases.
Shortcomings and strengths...
Just theory nothing too fancy.

Key takeaways:
1) React is a library
2) It makes js more powerful, unlike frameworks.
3) With the help of appropriate third-party libraries react can do anything that a framework can.
4) After zipping up its total size falls in the range of 30-35 kb, so super small.
5) To get better at react you need to get better at javascript.
6) React doesn't violate the separation of concerns, it just gives it a new definition.
7) Principle of React: "Do one thing, but do it right"
8) React gives an overwhelming number of options, so till you don't become experienced enough stick to the recommondations.

I know there is nothing to learn from this article but just trying to build a habit here. 😀

Hope I may find interested peers on my way.
Wish me luck. 🤞
Thanks for reading, Have a beautiful day.
Passing React.forwardRef to child's child
Tags: react, javascript, functional
Published: 2021-04-13 08:55:49

In short in this post, I want to show how to forward refs if its needs to be passed more than one level

In the [React forwardRef guide](https://reactjs.org/docs/forwarding-refs.html) the instructions tell us how to pass one level. How about if needs to be passed more than one level.

In my case it was a custom button

```
const LinkButton = (props) => {
  return <button {...props} />;
}
```

I had to use this button inside another component which was passing ref to this button. 

The usage was 
```
const ShowInfoBox = () => {
  const infoRef = React.useRef(null);
  const props = {};
  return (
    <InfoBox
      referenceElement={<LinkButton {...props} />}
      ref={infoRef}
    >
      {content}
    </InfoBox>
  );
}
```

When I used like above the React complained 
> Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

To solve this I had to create a wrapper component 
```
const LinkButtonWithRef = React.forwardRef((props, ref) => (
  <LinkButton {...props} ref={ref} />
));
```

Since I cannot use the prop with name "ref", I had to rename to "innerRef". The subsequent changes were

```
const LinkButton = ({innerRef, ...rest}) => {
  return <button ref={innerRef} {...rest} />;
}
```

```
const LinkButtonWithRef = React.forwardRef((props, ref) => (
  <LinkButton {...props} innerRef={ref} />
));
```

Hope it helps someone who is facing similar issue.
Kotlin – SpringBoot MongoDB – Model One-to-One, One-to-Many Relationships Embedded Documents
Tags: kotlin, springboot, mongodb
Published: 2021-04-14 16:30:37

Kotlin – SpringBoot MongoDB – Model One-to-One, One-to-Many Relationships Embedded Documents

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-springboot-mongodb-model-one-one-one-many-relationships-embedded-documents

With MongoDB, we can structure related data by embedded documents. In general, embedding gives a better performance for read operations. So in the tutorial, <a href="https://grokonez.com">JavaSampleApproach</a> will show you way to work with Embedded Documents using SpringBoot by Kotlin language.

<!--more-->
<h2>I. Technologies</h2>
– Kotlin 1.2.20
– Apache Maven 3.5.2
– Spring Tool Suite – Version 3.9.0.RELEASE
– Spring Boot – 1.5.10.RELEASE
– MongoDB: v3.4.1
<h2>II. MongoDB – Embedded Documents</h2>
Embedded Documents are generally known as denormalized models. It is a way to structure related data in a single document. See below diagram:

<img src="https://grokonez.com/wp-content/uploads/2018/02/kotlin-mongodb-embedded-document-structure.png" alt="kotlin mongodb-embedded-document-structure" width="690" height="388" class="alignnone size-full wp-image-10628" />

In general, we decide to design data as embedded models in case: data contains one-to-one or one-to-many relationships between entities.

With embedding data model, in general, it gives us a better performance for read operations. And we can use a single atomic read/write database operation to request and retrieve or update related data.

However, a weakness point is embedding related data in documents may lead to situations where documents grow after creation.

<h2>III. Practice</h2>
In the tutorial, we use SpringToolSuite to create a Kotlin SpringBoot project for MongoDB embedded documents:

<img src="https://grokonez.com/wp-content/uploads/2018/02/kotlin-mongodb-embedded-document-project-structure.png" alt="kotlin mongodb-embedded-document-project structure" width="411" height="217" class="alignnone size-full wp-image-10629" />

<strong>Step to do</strong>
– Create Kotlin SpringBoot project
– Create Document models
– Create MongoRepository
– Implement Client
– Run and check results
<h3>1. Create Kotlin SpringBoot project</h3>
Using Spring Tool Suite, create a Kotlin SpringBoot project. Then open pom.xml file, add dependencies:

<pre><code class="language-html">&lt;dependency&gt;
    &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
    &lt;artifactId&gt;spring-boot-starter-data-mongodb&lt;/artifactId&gt;
&lt;/dependency&gt;
 
&lt;dependency&gt;
    &lt;groupId&gt;com.fasterxml.jackson.core&lt;/groupId&gt;
    &lt;artifactId&gt;jackson-databind&lt;/artifactId&gt;
&lt;/dependency&gt;</code></pre>

More at:

Kotlin – SpringBoot MongoDB – Model One-to-One, One-to-Many Relationships Embedded Documents

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-springboot-mongodb-model-one-one-one-many-relationships-embedded-documents
I got a 50$ gift from dev.to, and here it is 😍
Tags: watercooler, discuss, news
Published: 2021-04-15 03:15:21

I did not imagine that a simple article like sending an email would perform so well. Similar tutorials are in n no. of places on the internet. But still, people loved my article.

{% link https://dev.to/aahnik/how-to-send-emails-with-python-simply-explained-for-beginners-hea %}

This article 👆 reached the [top seven](https://dev.to/devteam/the-7-most-popular-dev-posts-from-the-past-week-4njl) for the week, and dev.to sent me this email.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1m5hsezqsrazegr1ixw.png)
 
I am excited to have this badge,

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bumr3u2l56q9zwadsbfx.png)
 
I thought, let me give the code back to the community. So here it is 

`dev-top7-acmewh` , 

the first person to redeem it, gets 50$ worth of stuff from the [shop.dev.to](https://shop.dev.to)

If you have redeemed the code, please comment below, with what you bought. I would love to know. 

Thank you for the love.

I am [@aahnik](https://github.com/aahnik) on GitHub. If you are feeling bored, do check out my projects, and hit a few stars.

Thank you again.
Flutter: Build Circular Progress with CustomPaint and Animation
Tags: flutter, tutorial, dart
Published: 2021-04-15 11:41:31

Hey, you are on the right way if you come with a question about how to draw something in Flutter. For example when you need to draw something like a Progress indicator in a circle shape.

I’ll show you how to do that for the next platforms on the Flutter:

Android, iOS, Web, macOS
Did you mean:
Published: 2021-04-16 11:00:20

Ever seen a message like that on google? Works more or less ok when you have a search query misprint or smth, but really crushes the experience about brands content. Like "Did you mean:", actually No, I didn't!

Rather often when search for small companies, brands, products google adds its "Did you mean:" with several other options. That seems really annoying for webmasters who try to build beautiful UX and [SO](https://ieffe.art.blog/2021/09/19/so/) to have as much leads as possible. 

Ever wanted to remove such message? Me all the time. At least to update its primitive and catchy design. Seems the only way to do that is to convince google that users aren't mistaken and that's really what they search for and what they need. Well, a brand/query needs a bigger amount of search traffic then. Usually webmasters don't have a possibility for that, the amount of searches isn't enough anyhow. Nothing else to do then, no alternative with such an alternative. 

There's an idea like to try to optimize content for the keywords that "Did you mean:" offers. At least there will be a search list picture that has more logical structure view, that includes branded content, some titles, descriptions, etc. of the words google suggests. Probably and luckily this "Did you mean:" message will then soon won't be shown.
A simple terminal UI dashboard for code review
Tags: python, terminal, github, codereview
Published: 2021-04-16 16:19:04

Reviews is a simple code review manager that lists the status of open pull requests across multiple organizations & repositories as a terminal UI dashboard.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6w1ksg6aev8gca3ebfsg.png)

The project was created as a way to keep on top of multiple teams creating large amounts of pull requests across several repositories by having a single up-to-date view of the pull request's approval status and age.

The initial implementation can be found over on Github at https://github.com/apoclyps/code-review-manager and can be installed from PyPI: https://pypi.org/project/reviews/

Contributions and feedback are welcome. It's in the very early stages of development and it has a long way to go but hopefully, there is enough here for others to derive some value from it being released early.

### Getting started with reviews
You can immediately start using review by installing it from PyPI and using providing the following configuration before running it.

```bash
pip install reviews

export REPOSITORY_CONFIGURATION="apoclyps/code-review-manager,apoclyps/my-dev-space"
export GITHUB_TOKEN="your-token"

reviews dashboard
```
Day 347 : Times is Rough
Tags: hiphop, code, coding, lifelongdev
Published: 2021-04-16 21:19:45

_liner notes_:
- Professional : Had a really good day to head into the weekend. Had a team meeting to see what folks worked on during the week and if anyone needed anything. Then had a really good catch up meeting with some team members. Had a lot of laughs. Spent the rest of the day getting my new blog post submitted into the Content Management System. Got my stuff done and called it a day a couple of hours early.

- Personal : Last night, I went through a bunch of tracks for the radio show. After that, I watched an episode of "Dr. Stone". Did a little thinking about how the layout will be for my new side project. Want to keep it as simple as possible.

![View into a cove surrounded my mountains at sunset in Cox Bay, BC, Canada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awsogpcw75jgo708qmd9.jpg)

Started working on tomorrow's radio show right after work. Got a lot of it done. Just a few more things. When that's done, I'll probably watch "Falcon and Winter Soldier". Maybe do a rough sketch of the layout for the new project. Then maybe watch an episode of "Dr. Stone". If it's not too late, maybe I'll set up a starter project. Been watching the news, whew, times is rough and people are insane!

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 7KErLvd8QSc %}
New to web development/ working in the tech sector?                             
                                          

Tags: news, performance, achievements, success
Published: 2021-04-17 18:13:13

This blog post is the first one of a series of posts that are aimed at all the aspiring web developers out there and those who - like me - want to take a step back and provide some well-needed advice to their past selves. For this particular post, this advice takes the form of outlining something that I learned this week as part of an amazing course that I am completing with an equally amazing organisation - Code Your Future. 
Simply put, my first (of many) main pieces of advice to anyone starting or entering the world of tech and web development, use Social Media as a platform where you can reach out to the huge amounts of companies and recruiters looking for people like you. Examples of some social media channels and collaboration platforms that can be useful for this are:

-	Twitter 
-	Linked in    
-	Slack 
-	Instagram  
-	DEV.to 
-	GitHub 

The main way of utilising social media is by using it to build and develop your very own personal brand and profile or (with platforms such as GitHub) to demonstrate your capabilities. Whatever you do - make it something that reflects you and allows you to stand out. An example of some features that can be added to a LinkedIn account are:

- A detailed intro that outlines what you want an employer to know:
   ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4md2ss53xns98cn730lo.png)
- A detailed 'About' section that provides links to previous projects, outlines achievements and showcases YOU to the best of your ability:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gwoqhljj0gwhusos17b.png) 
 
Quick tip - contacting the right people is essential. Don’t be scared to jump out of your comfort zone and contact employees within a company that you want to join or just to connect and gain from their experiences.

Look out for my next post…..
How I can send emails with the formatting I've done in google sheet by using app script?
Published: 2021-05-06 05:23:50

Hi everyone. I'm trying to send emails with google app script by running following code in script editor

// This constant is written in column C for rows for which an email
// has been sent successfully.
var EMAIL_SENT = 'EMAIL_SENT';

/**
 * Sends non-duplicate emails with data from the current spreadsheet.
 */
function sendEmails2() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var startRow = 2; // First row of data to process
  var numRows = 2; // Number of rows to process
  // Fetch the range of cells A2:B3
  var dataRange = sheet.getRange(startRow, 1, numRows, 3);
  // Fetch values for each row in the Range.
  var data = dataRange.getValues();
  for (var i = 0; i < data.length; ++i) {
    var row = data[i];
    var emailAddress = row[0]; // First column
    var message = row[1]; // Second column
    var emailSent = row[2]; // Third column
    if (emailSent !== EMAIL_SENT) { // Prevents sending duplicates
      var subject = 'Sending emails from a Spreadsheet';
      MailApp.sendEmail(emailAddress, subject, message);
      sheet.getRange(startRow + i, 3).setValue(EMAIL_SENT);
      // Make sure the cell is updated right away in case the script is interrupted
      SpreadsheetApp.flush();
    }
  }
}

The problem which I'm facing with this code is its not show the bullet points and anchor text I've formatted in my google sheet. I'll appreciate any help regarding to solve this problem. 
Have a good day!
How to gets uploaded image Metadata on the front-end
Tags: react, metadata, filereader, javascript
Published: 2021-06-04 15:05:21

Quite often when we implement uploading images, will be great to have the opportunity somehow to get image metadata (with, height, fileSize, name ..) in the front-end directly  

Example of the input, with uploading the image file:
```javascript
<input type="file" name="myImage" accept="image/png, image/gif, image/jpeg"  onChange={ (e) => handleChange(e.target.files) } />
```

to get the name, file size and extension of the uploaded file: 
```javascript
const file = e.target.files[0]
const { name } = file
const fileExtension = name.split('.').pop()
const fileSize = file.size
```
in the case, if needs to get local URL thats used to show render uploaded image:
```javascript
const localUrl = URL.createObjectURL(file)
```

To get width, height, of the uploaded image use new FileReader() with image.decode() method:
```javascript
var reader = new FileReader()
reader.onload = async (e: any) => {
				let image = new Image()
				image.src = e.target.result
				await image.decode()
                                // now we can:
                                const width = image.width
                                const height = image.height
			    }
reader.readAsDataURL(file)
		 
```

this is async logic so a better way to use it in a project is to wrap it up with a new Promise, I use the async function wrapper to get all needed metadata:	
	

```javascript
// Function takes single uploaded img file, and returns width, height, fileSize and fileExtension
export const getImageMeta = async (
	file: File
): Promise<{
	width: number,
	height: number,
	fileSize: number,
	fileExtension: string,
	localUrl: string,
}> => {
	const { name } = file
	const fileExtension = name.split('.').pop()
	const localUrl = URL.createObjectURL(file)
	// reading a file to get height and width
	async function getImageParams(file: File) {
		return new Promise((resolve, reject) => {
			var reader = new FileReader()

			reader.onload = async (e: any) => {
				var image = new Image()
				image.src = e.target.result
				await image.decode()

				resolve({ width: image.width, height: image.height })
			}
			reader.readAsDataURL(file)
		})
	}
	const { width, height } = await getImageParams(file)

	return { width, height, fileSize: file.size, fileExtension, localUrl }
}
```
MovingPoint-Lightweight-Java-2D-Game-Engine
Published: 2021-05-11 14:02:39

Find repo here: https://github.com/MarcoSteinke/MovingPoint-Lightweight-Java-2D-Game-Engine

1 Beginner Friendly / Educational
+ I love programming and I also love teaching it to other persons, so the main goal of MovingPoint is to bring new motivated talents into programming. + A lot of people dream of creating their own games, MovingPoint gives them a first impression of Game Design + Even childs with basic Java skills could use this to create simple games like TicTacToe or Snake!

2 Operating System Independence
+ since MovingPoint is written in pure Java, you can run it on any Operating System

3 Hardware Independence
+ MovingPoint is lightweight, you do not need the latest hardware to build your games. + You also do not need to import all modules, only use the code which you need to build your project.

4 Use all Java libraries!
+ Yes it is true. You can run any libraries and connect them to MovingPoint + You are able to create Browsergames by running a Java Webapplication and importing MovingPoint. + Also usable to create Android Apps by using Android Studio!

5 Open source
+ Since I am coding for around 5 years and I tried out many different things, this is my first try on writing a Game Engine, so I want everybody to help me with the development. + You are able to use the Engine as you want to. Modify it, give me tips and together we can create a new experience of Game Design.
PHP 8 Multiple Files/Images Upload in MySQL Database Example Tutorial

Tags: php, laravel, mysql, programming
Published: 2021-05-11 14:52:44

<p>Hi Guys,</p>

<p>In this tutorial,I will learn you how to multiple image and file upload in mysql database using php 8.you can easy and simply multiple image and file upload in mysql database using php 8.</p>

<p>File upload in PHP is the most common feature that almost every PHP developer has to build. As we can know, file uploading functionality is required in nearly every web application.In this tutorial, we will learn how to upload single or multiple files or images in PHP 8 and how to save the images in MySQL database.</p>

<p>Because of when it comes to uploading multiple images or files we require to cerebrate some logic and process how to do that. But sometimes you have a requisite to upload multiple images at once.</p>

<p>In this tutorial, we will implement all these processes, step by step.</p>
<ul>
    <li>Create a database table.</li>
    <li>Create an image/file uploading form.</li>
    <li>The database connection file.</li>
    <li>The image uploads the logic script file.</li>
    <li>Complete Code</li>
</ul>

if you want to see full example follow bellow link..

https://codingtracker.blogspot.com/2021/05/php-8-multiple-filesimages-upload-in.html