teleren/devto huggingface dataset:
Calling Alpine.js methods from third-party scripts
Tags: alpinejs, javascript, googlemaps
Published: 2022-03-08 04:57:03

_How we made Alpine-powered page understand Google Map events_

Recently, we faced a small challenge when implementing Google Map on an Alpine.js powered page. Key points:

- Map markers data is loaded in the Alpine.js store
- The Google Map is outside the Alpine.js scope so **cannot call Alpine method directly** after its loaded

There was no way we could show those map markers on the Google Map.

After some surfing, [this thread](https://github.com/alpinejs/alpine/discussions/517) gave a hint. Let us go through the actual code to set up the base.

*Google Maps related code*

```html
<div class="container">
	<div id="google-map" style="height: 600px;"></div>
</div>

...

<script async src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=renderMap"></script>

<script>
	var googleMapObject;

	function renderMap() {
		googleMapObject = new google.maps.Map(document.getElementById("google-map"), {
			// Map config
		});
	}
</script>
```

*And here's the Alpine.js setup code*

```javascript
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<script>
	document.addEventListener('alpine:init', () => {
		Alpine.store('app', {
			mapMarkers: [
				// Pre-loaded markers data
			]
		});
	});
</script>
```

### Solution

*Events* to the rescue. You can just fire a custom Javascript window event from the Google Maps object and make Alpine listen to it. Let's see the code:

```javascript
<script>
	function renderMap() {
		// initialize map code

		var mapLoadedEvent = new Event('map-loaded');
		window.dispatchEvent(mapLoadedEvent);
	}
</script>
```

First, we are firing the custom JS event called `map-loaded` once the Google Map is loaded. 

```html
<div class="container" x-data @map-loaded.window="$store.app.addAllMarkers()">
	<div id="google-map" style="height: 600px;"></div>
</div>
```

This HTML code listens to that event and calls the *addAllMarkers* Alpine method. With that, our Google Map can call the Alpine.js method to show the map markers.

Lastly, our Alpine method can do the rest.

```javascript
<script>
	var googleMapObject;

	document.addEventListener('alpine:init', () => {
		Alpine.store('app', {
			mapMarkers: [
				// Pre-loaded markers data
			],

			addAllMarkers() {
				this.mapMarkers.forEach(function (mapMarker) {
					new google.maps.Marker({
						// Map marker config
					});
				});
			},
		});
	});
</script>
```

We did this for Google Maps but you can do the same with any other third-party JS library using the custom Javascript window event.

> Important to Note that a `CustomEvent` is different from a regular JS `Event`. Check [this](https://stackoverflow.com/a/40795249/3113599) Stackoverflow answer for details.

Cheers!
Material Ui in React Js
Tags: javascript, react
Published: 2022-03-08 04:54:49



## `1. What is Material UI?`

Ans: Material UI is UI library for React JS.
---
---
## `2. Why and when should you use Material UI?`
### Ans: Material UI has almost everything you need in a web site UI such as NavBar,Cards etc. Also you can customize the UI components easily. Now Let's see when should we use Material UI. Material Ui can be used in React JS. And Material UI not only has UI Components but also Material UI has a Icons library. 
---
## `Now let's understand how to use material Ui Components`

### Typography ###
`Typography` is a Material UI Component for text. You can add varient prop in Typography and specify it to a heading or paragraph tag.

```jsx
<Typography variant="h1"> Hello World </Typography>
```
---
### Appbar ###

Appbar is a Material UI custom Component for creating nice mui Navbar 
```jsx
<Appbar> <Typography>MyAppbar</Typography> </Appbar>
```
Getting Started with the Blazor Bullet Chart
Tags: blazor, webdev, dotnet, csharp
Published: 2022-03-08 04:53:22

This video will get you started with the Syncfusion [Bullet Chart component](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) in a Blazor WebAssembly application. You will also learn how to bind data to it and add a title, subtitle, value bar, target bar, dimensions, and a tooltip. 

**Blazor Bullet Charts & Graphs - Beautiful & Interactive Charts**

- Flexible and completely customizable.
- Replacement for meters and gauges.
- Supports features such as multiple measures, ranges, labels, title, subtitles, etc.

Product Overview: https://www.syncfusion.com/blazor-components/blazor-bullet-chart

Download an example from GitHub: https://github.com/SyncfusionExamples... 


{% youtube rWXSysqy5YE %}
Space Talks - ReactJs
Tags: css, react, mern, support
Published: 2022-03-08 04:18:59

[Space Talks ✨](https://space-talks.netlify.app/)

My #MERN Project 😄

This Beautiful web App **Space Talks**  I created with React js. 
I want you all to share Your knowledge and the facts you know about space. 
![Space Talks Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhnhacjtdzwee8dr0rg4.png)
 
Steps To follow:
1. Let The page loading complete
2. Check What other peoples have posted 
3. If found interesting click on sign-in button and sign-in with google account. 
4. Post something that people don't know  regarding space, galaxies, universe, stars, etc.
5. You can Add Image as well as small gifs 
![Here is the place where you have to add the topic name and add image or gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfj5mko22oq02qhukn7w.png)



Thank You ❤♾
[Azure Trial Hackathon Submission Post Placeholder Title]
Tags: azuretrialhack
Published: 2022-03-08 04:05:48

[Instructions]: # (To submit to the Microsoft Azure Trial Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
[Note]: # (Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)


### Submission Category: 

[Note]: # (AI Aces, Computing Captains, Low-Code Legends, Java Jackpot, or Wacky Wildcards:)


### Link to Code on GitHub

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)
[Note]: # (Your repository must include a README)
[Note]: # (You must use and list a permissive license for your code: MIT, Apache-2)


### Additional Resources / Info

[Note:] # Screenshots/demo videos are encouraged!

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. Prizes for winning projects with multiple collaborators will be sent to the person who posts this submission and they will distribute the prize evenly. DEV will not split prizes as per our rules)

[Reminder]: # (Submissions are due on March 8, 2022 @ 11:59 PM UTC)
Build a Messenger Clone with MERN Stack (MongoDB, Express, React, Node JS) + Socket.io (Day 7)
Tags: javascript, react, webdev, tutorial
Published: 2022-03-08 04:01:54

In this Facebook Messenger   Clone  Tutorial series, we will learn to build an Awesome Full Stack  Facebook Messenger Project with realtime messaging functionality with socket.io . We have one on one chat as well as group chatting functionality in this app.

In this video, we will be Creating JWT Token


{% youtube NHs3myQOEMk %}
SQL-Quick tip #3 - Prepending zeroes
Tags: tsq, sqlserver, sql, mssql
Published: 2022-03-08 03:59:43

## Sql Server tips and tricks

This is part of a series of quick tips and tricks I have accumulated over the year, that I think can be useful for others.
If you have similar short tips and tricks please leave a comment.

### Prepending zeroes

Some data formats require that your numbers have prepended zeros so you can get the SQL Server to format the number. The trick is to prepend the number of zeroes to the your int and then chop the resulting string by the number of wanted digits from the right.

But be aware that in optimized production code this might not be the way to go because the server has to do a lot of string manipulating the do this trick. But for testing or one-time queries this trick can be useful.

```sql
DECLARE @names TABLE ([Name] VARCHAR(50), [ImportantNumber] INT)

INSERT INTO @names ([Name], [ImportantNumber]) 
VALUES ('Joe', 2), ('Bob', 4), ('Anne', 42), ('Jane', 134)

SELECT [Name], RIGHT('0000' + CAST(ImportantNumber AS VARCHAR(4)),4) AS [ImportantNumber]
  FROM @names
```

![Sql Server Management Studio screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qo4ccudfmpgk8dcmc37.png)
Code Smell 119 - Stairs Code
Published: 2022-03-08 03:33:19

*Nested boolean conditions express a business rule. Not an IF*

> TL;DR: Avoid checking for boolean expressions and returning an explicit boolean.

# Problems

- Declarativeness

- Ninja Code

- Readability

- [Arrow Code](https://dev.to/mcsee/code-smell-102-arrow-code-4kfk)

# Solutions

1. Return a boolean business formula value.

# Context

When dealing with boolean formulas, it is more readable to show a business boolean formula than a stair of boolean checks followed by returning an explicit true/false;

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/b7125d33f30a8a37a40bc994fe7fcba6)
```python
def is_platypus(self):
    if self.is_mammal():
        if self.has_fur():
            if self.has_beak():
                if self.has_tail():
                    if self.can_swim():
                        return True
    return False

# This is also wrong since it is polluted with IFs and not readable by a biologist
def is_platypus(self):
    if not self.is_mammal():
        return False
    if not self.has_fur():
        return False
    if not self.has_beak():
        return False
    if not self.has_tail():
        return False
    if not self.can_swim():
        return False 
    return True
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/b0afdb15577225b97f66381872f373f1)
```python
def is_platypus(self):
    return self.is_mammal() &&  self.has_fur() && self.has_beak() && self.has_tail() && self.can_swim()
  
#We can even group conditions according to animal taxonomies
```

# Detection

[X] Automatic 

Based on syntax trees, we can safely refactor the code removing the explicit boolean value.

# Tags

- Boolean

# Conclusion

Beware of returning booleans. 

After the return, you will need an [If statement](https://dev.to/mcsee/how-to-get-rid-of-annoying-ifs-forever-1jfg) which is also a [code smell](https://dev.to/mcsee/code-smell-36-switch-case-elseif-else-if-statements-h6c).

# Relations

{% post https://dev.to/mcsee/code-smell-115-return-true-3gn4 %}

{% post https://dev.to/mcsee/code-smell-101-comparison-against-booleans-3aic %}

{% post https://dev.to/mcsee/code-smell-24-boolean-coercions-25l4 %}

{% post https://dev.to/mcsee/code-smell-62-flag-variables-1a9p %}

{% post https://dev.to/mcsee/code-smell-102-arrow-code-4kfk %}

{% post https://dev.to/mcsee/code-smell-80-nested-try-catch-3o5c %}

# More Info

- [How to Get Rid of Annoying Ifs Forever](https://dev.to/mcsee/how-to-get-rid-of-annoying-ifs-forever-1jfg)

# Credits

Photo by [Jukan Tateisi](https://unsplash.com/@tateisimikito) on [Unsplash](https://unsplash.com/s/photos/stairs)
    
Thanks again to Nico K. for this suggestion.

* * *

> The real hero of programming is the one who writes negative code.

_Douglas McIlroy_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
How to fix Warning: 10 Prisma Clients are already running
Tags: javascript, prisma, tutorial, typescript
Published: 2022-03-08 03:17:03

The first time I ran into this error, I thought I was doing something wrong. But as I dug into it a bit more, I realized this is a side-effect of javascript frameworks that rebuild the project anytime code changes. 

```
warn(prisma-client) There are already 10 instances of Prisma Client actively running.
```

The problem is that every time the code changes, a new connection is made to the database because `new PrismaClient()` is called. 

To avoid a new connection being created during development every time a change is made, you can do a quick check to see if there is already a connection made, and if so, use that. If not, then call new PrismaClient().

##Here is what that would look like:

File: ./util/db.server.js
```
import { PrismaClient } from '@prisma/client'

let db;

//check if we are running in production mode
if (process.env.NODE_ENV === 'production') {
  db = new PrismaClient()
} else {
//check if there is already a connection to the database
  if (!global.db) {
    global.db = new PrismaClient()
  }
  db = global.db
}

export { db };
```

Now we are able to use the exported prisma object in our other components with:

```
import { db } from './util/db.server.js'

const data = db.user.findMany();
```


###And there you have it! Now your app will check if a connection to the database exists before creating a new one and you won't get that error message. 

One last thing I should mention is that technically creating a new PrismaClient() isn't the issue, but the fact that Prisma objects call their own connect() method when they are first used (under the hood). This is called lazy connect. You can learn more about that [here](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/connection-management)
Dart - Mixin Vs Class
Tags: flutter, beginners, dart
Published: 2022-03-08 03:15:39

---
title: Dart - Mixin Vs Class
tags: flutter, beginner, dart
author: Corey Lai
---

在 Dart 中有一較為特殊的關鍵字， <mark> Mixin </mark> 透過這個關鍵字可以讓我們實現多重繼承的關係，透過將關鍵字分離，可以更清楚在宣告時我們應該如何對此類別進行設計。

### 1.標準繼承

Class Child 繼承來至 Class A 在呼叫建構子的時候，進行呼叫 getMessage() ，沒意外的得到 A Construct -->A.getMessage() 的訊息。

```dart
abstract class A {
  A() {
    print('A Construct');
    getMessage();
  }

  getMessage() {
    print('-->A.getMessage()');
  }
}

class Child extends A {}

void main() {
    Child child = Child();
}
```

**Output**

> A Construct
-->A.getMessage()



### 2.加入Mixin使用

增加 mixin MB 並於 混合於 Child 當中，MB Mixin 也是基於 A Class 所建構的，並透過 super 呼叫父類別的 getMessage 方法，也就是 <mark> -->A.getMessage() </mark> 。

```dart
mixin MB on A {
  @override
  getMessage() {
    print('-->MixMB.getMessage()');
    super.getMessage();
    print('-->MixMB');
  }
}

class Child extends A with MB {}
```

**Output**

> A Construct
-->MixMB.getMessage()
-->A.getMessage()
-->MixMB

### 製造錯誤 :beetle:
我們嘗試把 class Child ~~extends A~~ with MB {} 。

> Error: 'Object' doesn't implement 'A' so it can't be used with 'MB'.

此時編譯器提示錯誤，物件尚未實現 A 所以不可以混合 MB Mixin ， 因為 MB 依賴著 Class A 所以如果混合 MB 時，類別未繼承制 A Class 就會得到提示，在使用上不可不留意！

### 3.再來一個Mix!

我們在替 Child Class 混合多一個類別， MC Mixin 程式與 MB Mixin 相同只是訊息部份從 MixMB 換成 MixMC 方便我們了解流程。

在MixMC中呼叫super.getMessage() 會先執行 MixMB 這邊Dart 使用堆疊的先進後出的方式，根據 with 後面的順序依序進行 pop 處理，就會看到我們的顯示結果！


```dart
mixin MC on A {
  @override
  getMessage() {
    print('-->MixMC.getMessage()');
    super.getMessage();
    print('-->MixMC');
  }
}

class Child extends A with MB, MC {}
```

**Output**

> A Construct
-->MixMC.getMessage()
-->MixMB.getMessage()
-->A.getMessage()
-->MixMB
-->MixMC



### 4.再來一個Class!?

接著我們在替程式加上一個 Class B 並讓 MB 基於 A,B ，此時我們的Child 需要把B也跟著繼承，但是 extends 只能繼承一個Class 所以我們就把 B Class 用在 with 一起混入，執行後發現我們的 A Class 的getMessage 就被 B Class override 了，消失在我們的結果當中！

```dart
abstract class B {
  getMessage() {
    print('-->B.getMessage()');
  }
}

mixin MB on A,B {
  @override
  getMessage() {
    print('-->MixMB.getMessage()');
    super.getMessage();
    print('-->MixMB');
  }
}

class Child extends A with B, MB, MC {}
```
**Output**
>A Construct
-->MixMC.getMessage()
-->MixMB.getMessage()
-->B.getMessage()
-->MixMB
-->MixMC


## Conclusion
Dart 中使用 Mixin 可以讓我們的物件重用性更高，更能減少我們程式碼重複部份，但邏輯上可能就會便得更加的複雜，使用上不可不謹慎！

後續會增加更多 Dart/Flutter 的開發介紹，歡迎大家持續關注！
Ruby Digest for the week (Mar 1 - Mar 7)
Tags: ruby, rails
Published: 2022-03-08 02:59:19

- For developers
- For trainees and beginners
- Our Telegram Chat
- Where to look for a job?

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

**For trainees and beginners**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edeprp4sdk4y7lmmglyg.png) This section of the digest is intended for novice rubists. Here you can find various manuals / guides, literature.
If you want to feel and roll into Ruby development, then this will be a great starting point in such an interesting way.

**Manuals/Guides**

_Creating a chat on Rails and WebSockets._
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p85r1jcst66u07get3cu.png)

Language: English.

Stack: Ruby on Rails, HTML/CSS, JavaScript.

Link: [iridakos](https://iridakos.com/programming/2019/04/04/creating-chat-application-rails-websockets).

GitHub: [open](https://github.com/iridakos/rails-chat-tutorial).

_Creating a telegram bot in Ruby_
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tem9pjaytdk1u5ze3bvq.png)

Language: Russian.

Stack: Ruby, TelegramAPI.

Link: [weril](https://weril.me/telegram-bot-na-ruby-c-gem-telegram-bot-ruby/).

GitHub: [open](https://github.com/atipugin/telegram-bot-ruby).

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

- Open warehouse with educational material

- Chat gaining momentum

[Open a chat in telegram.](https://t.me/it_talks)

******
 
** For developers**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wa0pps0tp22o4ed9kcy.png)
 
This section of the digest is intended for already established rubists.
Here you can find various manuals /guides, updates / appearance of gems, conferences and vacancies of the labor market.

_Brief news_
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7v33a4qahcbw4dullea.png)
 
_Ссылки из новостей._
0. https://dev.to/arohi/why-your-startup-needs-ruby-on-rails-web-app-in-2022-4obe
1.  http://www.digitalfukuoka.jp/topics/187?locale=ja 
2.  https://github.com/picoruby/picoruby
3.  https://it-events.com/events/22649

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

_What to read?_

Creating seamless loading in Ruby on Rails.
Author: John Kevin Baluyot
Link: [dev.to](https://dev.to/jkevinbaluyot/create-seamless-loading-in-ruby-on-rails-43cj) 

******
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vh6yc7cd6rdmmo40b4e4.png)
[Open Jooby.Dev.](https://jooby.dev/)
[Open a channel in telegram.](https://t.me/rubyjob)

******
**Digest Friends:**
[@tin_vsl](https://habr.com/users/tin_vsl)
[RubyRush](https://t.me/rubyrush)
[Jooby.dev](https://jooby.dev/)
[IT talks](https://t.me/it_talks) (we chat).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hgve8jvgy0w4ljbhvykd.png)
Why I signed up for a software engineering bootcamp
Published: 2022-03-08 02:42:07

I think this pandemic has done a really good job at revealing what actually matters to me. It's introduced a level of unpredictability that I hadn't imagined prior, and ultimately I'm tired tired and have been craving stability. I want to be free to travel and work from anywhere in the world without feeling tied to one place. I also want to push and challenge my brain to work in ways it hasn't necessarily worked in before. 

For the last few years I've been working freelance as an Audio Engineer. This has included working at various recording studios, assisting for engineers, mastering, and mixing. I also produce my own music as well as DJ. This is my passion, it's what I love, but the money isn't great and I've found that turning music into work has taken away from the love and energy that I feel able to direct towards it. I want music to always feel like a choice and not an obligation. 

Last October, I was talking about how tired I am of being broke while on a trip to Mexico City with some friends, and jokingly brought up that I should just learn how to code. But just like most things in my life, the second I have a small idea about something, I cant help but really dig into it. Right upon getting back to New York, I immediately decided to do a Codecademy course to see if I this was something I could get into and within 2 weeks of the course I started apply to bootcamps. I honestly just trusted my gut. I was having fun on Codecademy and just wanted to keep digging deeper into what I was learning and ultimately knew that I would need the pressure and structure of a bootcamp to truly succeed. 

So far it has been going really well. I'm having a lot of fun. It's been hard but I'm enjoying the challenge and really looking forward to the future and what life could be once I start my new career.
Web3 by Example
Tags: web3, ethereum, blockchain
Published: 2022-03-08 02:17:50

---
title: Web3 by Example
published: true
description: Web3 by Example is a hands-on introduction to web3 development using annotated example programs. 
tags: web3,ethereum,blockchain
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/239b8pwenx0inwgli5yw.png
---

I built a sample program site using interactive annotations to introduce web3 development.

It includes examples of accounts, transactions, smart contracts, and there will be more.

https://web3byexample.com/
@WEVER - the modern technology to built incredible User Interfaces 
Published: 2022-03-08 01:52:03

**@WEVER JS** is a node js framework and at the same time a beautiful technology to built **incredible user interface** in the web. It is **fully customizable, flexible, declarative, component-based JavaScript framework & library to build complex and incredible UI (User Interface)**. This technology is an advance technology and at the same time a **beginner friendly technology**. This framework works on virtual dom, like react and others. Here we also use JSX (Javascript XML) toale the development declarative.

## XEON JS
The main library of **@WEVER is XEON JS**. It's nothing but a lightweight javascript library. Here we have multiple functions to help developers to create their dream projects. The most useful function is `xeon.XSET();`.
> #### 1. createElement()
>> `xeon.createElement();` function is used to create document node. This is functionally simple but working complex. This can create **5 types of namespace** element including **HTML and SVG**.
>> ```ts
/*
 * @param {String|Function} tag - tha name of the element or a function if component.
 * @param {Objects} attributes - Key value pairs of attributes
 * @param {Array} children - list of children.
 * @param {HTMLElement} parent - the parent element of the element, if exist.
 */
createElement(tag: String|Function, attributes: Object, children: Array, parent: HTMLElement);
```

## To be continued...