teleren/devto huggingface dataset:
vscode Extensions For Web Developers 
Tags: javascript, webdev, beginners, tutorial
Published: 2022-03-07 20:18:07

**1- Live Server** : Live Server Is An Indispensable Extension For Front End Web Development it allows us to run a local server with live reload features to develop on our sites

Link :  [Live Server Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

![Image description](https://github.com/ritwickdey/vscode-live-server/raw/HEAD/images/Screenshot/vscode-live-server-explorer-menu-demo-1.gif)

**2- Prettier** : Prettier Is A Must Have Extension For Every Developer , It Formats Your Code For Ideal Readability And Save You Lot Of Tab Clicks Or (Space)

Link :  [Prettier Extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

![Image description](https://raw.githubusercontent.com/prettier/prettier-logo/master/images/prettier-banner-light.png)

**3- Bracket Pair Colorizer** : Braket Pair Colorizer Highlights Open And Closing Bracket With Same Color

Link :  [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)

![Image description](https://res.cloudinary.com/betterdev/image/upload/c_fit,w_1600,q_auto,f_auto/v1637347177/example_iefuoj.png)

**4- Color Highlight**  : Color Highlight As It's Name Says It highlights styles css colors found in your document.

Link :  [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

![Image description](https://ourcodeworld.com/public-media/articles/articleocw-5d1394f63c870.png)

**5- TODO Tree** : TODO Tree This Extension Make It Easy To Save Your Comments As To Do Tree . For More Check [Documentation](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

Link :  [Color Highlight](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

![Image description](https://raw.githubusercontent.com/Gruntfuggly/todo-tree/master/resources/screenshot.png)
Amazon Kinesis بالعربي احلا 
Tags: aws, kinesis, data, streaming
Published: 2022-03-07 20:01:53

 
# Amazon Kinesis 
هي عائلة من الخدمات التي تقدمها امازون والتي تسمح لنا بجمع وتحليل البيانات المتدفقة في ذات الوقت حيث يمكنك الحصول علي رؤية كامله عن البيانات في الوقت الفعلي و اتخاذ اجراء في الوقت المناسب 
يمكن ان تكون تلك البيانات هي عبارة عن ضغطات على الشاشة في موقع معين او حساسات مستخدمة في مشروع انترنت الاشياء او حتى اصوات وصور من كاميرات المراقبة 

تحتوي عائلة كينيسيس على أكثر من فرد سوف نتعرف عليهم لاحقا في هذه السلسلة من المقالات 

فوائد خدمات عائلة Amazon Kinesis:

1. 	يمكنها من استيعاب البيانات المتدفقة في نفس لحظة توليدها وتحليلها او تخزينها لمعالجتها في وقت لاحق او اتخاذ قرار في نفس الوقت
2.	هي خدمة مدارة بالكامل ولا تحتاج اي بنية تحتية ويمكن ربطها مباشرة بالتطبيق الخاص بها 
3. 	خدمة قابلة للتوسع حيث يمكنها التعامل مع اي كمية بيانات مهما كانت حجمها ويمكن ربطها بمئات الالاف من المصادر 

بعض تطبيقات عائلة كينيسيس :

1.	تحليل فيديوهات كاميرات المراقبة والتعرف على الوجوه:
يمكن استخدام كينيسيس لتحويل تدفق البيانات من كاميرات المراقبة مباشرة الي امازون بعد ذالك تتم معالجة الفيديوهات والتعرف على الوجوه والعلامات التجارية وغيرها في غضون ثوان 
مثال: نظام تنبيه Amber

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

2.	الانتقال من مرحلة تحليل البيانات المجمعة الي التحليل في نفس وقت جمع البيانات 
يمكنك تحليل البيانات في نفس وقت التقاطها عوضا عن استخدام الاساليب التقليدية من جمع البيانات اولا ومن ثم تحليلها وايضا يمكنك تخزين البيانات التي تم تحليلها لاستخدامها لأغراض اخري

مثال علي ذالك، شركة Zillow،
 تقوم الشركة بتحديث تقديرات اسعار المنازل بشكل سريع ليتسنى لمشترين المنازل والبائعين الاطلاع علي أحدث تقديرات اسعار المنازل 

3.	تطوير التطبيقات في الوقت الفعلي
يمكن استخدام كينيسيس  لمراقبة التطبيقات في الوقت اللحظي لاكتشاف الاحتيال او الاضرار وحلها سريعا كما تفعل شركة Netflix
 حيث تستخدم كينيسيس لمراقبة الاتصالات بين جميع تطبيقاتها بحيث يمكنها اكتشاف المشكلات وحلها بسرعة، مما يضمن ارتفاع وقت تشغيل الخدمة وتوفرها لعملائها

4.	تحليل بيانات أجهزة إنترنت الأشياء 
يمكن استخدام كينيسيس لمعالجة البيانات المتدفقة من الحساسات مثل اجهزة الاستشعار والاستقبال وغيرها، يمكن استخدام كينيسيس لإرسال تنبيه او اتخاذ اجراء ويمكن ايضا دمجها بنموذج تعلم الي مثل تطبيق استشعار الاجهزة الموجودة في الجرار الي إحدى قطع الغيار فتقوم بإرسال الطلب تلقائيًا
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmdhyb1b6mgo0ihkqcya.png)


كانت هذه مقدمة سريعة لخدمات عائلة كينيسيس  فيما يلي سنتعرف علي افراد العائلة كلا علي حدا لذالك تابع سلسلة المقالات هذه 
شكرا علي وقت القراءة ```اراك في المقال التالي ```
Stale Closures in React.useEffect() Hook "A Weird Bug for New React Learners"
Tags: react, beginners, webdev, javascript
Published: 2022-03-07 19:58:26

_It was a beautiful day, my day was going almost good but suddenly...
I encountered stale closures in React.useEffect()_

This was my code, ahh... a simple and small code but good enough to frustrate you. 

![Stale Closure Bug](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86b301jlbi0vtnd62ha2.PNG)

When you run this code, It will show 
> Hello Bucky

on screen.

**Haha, Nah It'll not**

The thing is it'll only show Hello + "", I mean only Hello.
Why?
because of closures. 
Hey, what is closures?
[Checkout this video](https://www.youtube.com/watch?v=qikxEIxsXco) 

Okay got it? That video on closure was amazing isn't it...
Now let's continue.

Here are two ways you can solve this problem

> The useEffect's dependency array
&
> Using a ref instead of a useState

**The useEffect's dependency array**

![Closure issue solve using useEffect's dependency array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ke95e9h8qny6fx5ou6xv.PNG)

On line 15 just put user in dependency array, so from now whenever user value will get updated the useEffect() will render again and new value of user will get set in line 14.

But, this approach will set greeting twice one with previous("") user value and one with updated("Bucky") user value as useEffect() will render twice.

Let's look into another better solution to tackle this stale closures issue.

**Using a ref instead of a useState**

![Closure issue solve using a ref instead of a useState](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/775btkljk2lqv54pa3f2.PNG)

What is useRef()?
- [Watch this video](https://www.youtube.com/watch?v=t2ypzz6gJm0)

As, in previous approach useEffect() was rendering twice, but in this useEffect() will only run once.

If you are thinking which is better, I believe it's depend more upon on your use case.

_Cool... Now It's end, if you're having any suggestion in this article please update me in comment, I'll love to update this article with more better information._ Thankyou Have a great day.


![Thankyou, bye](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xj8mz72kwtlctqb0nes2.gif)
Open Source Adventures: Episode 12: Crystal Shard for Z3
Tags: crystal, ruby, z3
Published: 2022-03-07 18:31:17

This was super easy, I did this:

```
$ crystal init lib crystal-z3
```

Then adjusted it a bit. The main issue was that repo name is `crystal-z3` but library name is `z3`, so `crystal init lib` was a bit confused, but I think I sorted it all out.

One small thing it did was creating `.editorconfig` and I really don't like projects overriding people's editor configs, so I deleted it. There was nothing specifically wrong with these settings.

If everything went well, then the code should be in [taw/crystal-z3 repo on github](https://github.com/taw/crystal-z3).

To use it, you can add this to your `shard.yml`:

```yaml
dependencies:
  z3:
    github: taw/crystal-z3
```

Please give it a try to see if it works correctly, and let me know.

### Current status

It's currently fairly MVP-level. Most important features covering about 10% of the Z3 API are all there, but there's a lot of features missing.

If you want something more complete, [my Ruby Z3 gem is far more complete](https://github.com/taw/z3). Or you can use one of the official ones like Python's.

I think the code is really clean, so if you need some additional functionality, you should have no trouble adding it. Or just request it.

### Coming next

That's it with Crystal Z3 for now. In the next post I'll move on to another project.
Find path to a particular value in an Object
Tags: javascript
Published: 2022-03-07 19:47:04

This is my first post, so I would expect you to consider naivety in my language.

**My Approach**
We need to think recursively to reach to the point in the object where the value exists.
For each key we encounter, there are two condition, 
1. Either its value is equal to out value
2. It's an object, and we need to dive into it.
You guys thinking, what if its value is not an object and not equal to our value, you can ignore that, at least that's what I did.
For each recursive call, pass the current object and the value as parameter. Alongside also pass the array containing current path, since we are interested in printing path.

That's it!

My Code
```javascript
var obj = {
    a: {
        b:1,
        c: {
            d: 10
        }
    }, e: {
        f: 5,
        g: {
            h: "hii"
        }, 
        i: {
            j: {
                k:3,
                l: {
                    m: 20,
                },
                n: {
                    o:10
                },
                p: "hello"
            }
        }
    }
}
var arr = []
function findPath (obj, val) {
    arr = [];
    for(let x in obj) {
        if(obj[x] === val) {
            arr.push(x);
        } else if(typeof obj[x] === 'object') {
            findUtil(obj[x], val, x)
        }
    }
    return arr;
}
function findUtil(obj1, val, ...y) {
    for(let x in obj1) {
        if(obj1[x] === val) {
            arr = [...y, x]
        } else if(typeof obj1[x] === 'object') {
            findUtil(obj1[x], val, ...[...y, x])
        }
    }
}
console.log(findPath(obj, "hello").length ? findPath(obj, "hello").join("") : "Not Present")
console.log(findPath(obj, "hii").length ? findPath(obj, "hii").join("") : "Not Present")
```
What's Dopamine?
Tags: 100wordsaday, inkedin, beginners
Published: 2022-03-07 19:45:31

Dopamine is described to be a type of neurotransmitter that our body make, and is used by the nervous system to send message to body cells. Sometimes it can be called "chemical messenger". 

- Have You ever felt pleasure or good about seeing or doing something, that's the role dopamine play in our body.
- It gives us the ability to find things interesting, and allow us to focus, strive, think and make a plan.

>These chemical spreads along the main four pathways of the brain. Just like any other system on the body you don't notice a problem until its already happened. 
> There are limit and lack of Dopamine can lead to many problems, sometimes a serious as the Parkinson's disease.

- After the Pandemic in 2020 our live change drastically some work from home and most of us are going to school or going through a career shift. This could lead us to overdose on dopamine, let it be watching TV or endlessly scrolling through social media.
- We might take for granted the action we do today but might regret them later, so develops good healthy habit and hope for the best

**Note: Please Do Some research about dopamine and see if you're having too much or too little in some areas of your life.**


> - **NOTE: This is one of 30 blogs that I would be attempting to write over the next 30 days to improve my writing skills.**
Auto-updating Twitter banner with ezz
Tags: showdev, twitter, python
Published: 2022-03-07 19:39:32

So I used to use a web service called BlackMagic to update my twitter banner. But that's boring, because it got quite common to see people with the same banners and with the `Real-time banner with blackmagic` watermark. 

Naturally, I decided to make my own!!
https://github.com/Dhravya/auto-twitter-banner

It's actually a really simple script that queries the twitter API for my last 5 followers, makes the image, and then updates the banner every 2 minutes. The main thing here is pasting the follower's images at the right location
Here's the final product: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djiei802v1te4tz3j59t.png)


Feel free to fork the repository for your own banner! Let's start a conversation, comment something!

Read about the implementation here : https://blog.dhravya.dev/twitter-banner/
todo app using mern stack
Tags: azuretrialhack
Published: 2022-03-07 19:13:00





### Overview of My Submission
i created todo app using mern stack


### Submission Category: 

App service


### Link to Code on GitHub

{% github code-fun-lab/todo-app-mern-stack %}`


### Additional Resources / Info

azure documentation

[Note:] # Screenshots/demo videos are encouraged!
![azure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5zegh10vp2sahy8p5t9.png)

[Reminder]: # (Submissions are due on March 8, 2022 @ 11:59 PM UTC)
PyRamen - Data Analysis With Python
Tags: azuretrialhack, datascience, python
Published: 2022-03-07 19:04:37

### Overview of My Submission

PyRamen is a data analysis project that solves a very real problem for an imaginary ramen shop.

#### Imaginary problem statement

Welcome to 2KRamen!

Opening a ramen shop has always been my dream, and now it's finally been realized – I'm closing out on my second year of sales!

I need to analyze my business's financial performance by cross-referencing my sales data with my internal menu data to figure out revenues and costs for the year.

I also want to analyze how well my business did on a per-product basis in order to better understand which products may need to be removed or changed.

### Submission Category: 

AI Aces, Wacky Wildcards


### Link to Code on GitHub

{% github 2kabhishek/pyramen %}

Hit the ⭐ button if you found this useful.
Nevertheless, Simone Coded 2022 (can't believe this is my part 4)
Tags: wecoded
Published: 2022-03-07 18:49:03

---
title: Nevertheless, Simone Coded 2022 (can't believe this is my part 4)
published: true
description: 
tags: shecoded 
//cover_image: https://direct_url_to_image.jpg
---

✨ Another year, another Nevertheless or #shecoded and another year older, wiser and happier. ✨

I had a bit of a rough year, coding wise. Can't say why it really happend, but learning a lot of new things at work gave me so much energy and joy the first few months in. But after a few more months it got exhausted. And the fun was gone for a bit. So much so that I was doubting for a split second to switch careers again. Back to something I could already do, because the learning all the time is, well, a lot.. 
But I geve myself some time and space to think. Paused my home projects, focussed on work and me-time away from screens. (witch sounds easier than it was/ is) And decided to keep at it. Gave myself some topics in the form of boundaries on what to learn. There is so much out there.. but I need to focus and get good at a few things, and fun things. 
Decided on React and next.js for now. Aside from my never-ending vanilla JS journey. And of course I still love CSS very much. 
To make my life easier, I decided to gift myself a 14inch macbook pro. Had it for a few weeks and never want to go without it. Im proud of myself for installing everything and doing all the setup to program on it myself. It will be my new best buddy through all the learning I have in my future. 
Again, I am very excited about what the future will hold. Bring it on!
Pesquisa sobre sistemas de informação para gerenciamento de empresas.
Tags: webdev, beginners, programming, security
Published: 2022-03-07 18:47:59


Nós podemos entender como sistema de informação todo sistema que obtém dados para controle e manejamento de empresas, possibilitando que o sistema gere dados de forma organizada, esquematizada e ordenada os quais fornece possibilidades variadas para tomadas de decisão.

Os sistemas podem ser classificados de acordo com sua forma de utilização pelas empresas e também levando em consideração os tipos de dados que esse sistema estará processando;

Os sistemas podem ser de apoio a operações e sistema de apoio gerencial.

Eles podem ser classificados por, Sistema de apoio as operações, sistema de processamento de transações (SPT), Sistema de trabalho do conhecimento e automação de escritório (STC e SAE), Sistema de apoio gerencial, etc.

Temos também os sistemas clássicos como o ERP que é utilizado para ajudar você a gerenciar e administrar toda a sua empresa, incluindo finanças, recursos humanos, cadeia de suprimentos, serviços e muito mais;

Temos também o CRM que significa "costumer relationship management" que nada mais é do que sistemas de administração de relacionamento com clientes;
E por fim o SCM que é a ferramenta tecnológica que que faz o gerenciamento da cadeia de suprimentos, fluxos de mercadorias, dados e finanças relacionados a um produto ou serviço

Vou deixar como exemplo de sistemas comerciais utilizados atualmente o Sistemas de suporte de decisão (SSD), eles são cheios de grandes quantidades de dados e ferramentas de moldagem permitindo uma maior flexibilidade e capacidade de resposta rápida ao nível gerencial da empresa.
Google Cloud Monitoring: Monitoring and Alerting on number of kubernetes pod replicas in GKE
Tags: googlecloudmonitoring, count, podreplicas, alerting
Published: 2022-03-07 18:36:04

Monitoring and Alerting is critical for operations and cost management of business applications.

As part of the Operations team, we were required to create a mechanism to get automated alerts when the pod replicas for a deployment goes down the expected number or a pod is not available for a business critical deployment, or when the count of pod replicas goes up beyond the expected number pointing towards unusual traffic.

There is no built-in metric available for getting the count of replicas for a Kubernetes Pod in Cloud Monitoring. In this blog, we will look at how we can enable alerting policy based on the pod replicas count.

## Using container/uptime metric

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

Containers are encapsulated in a Pod. We can leverage container Uptime metric for determining the count of pod replicas with below configurations

![Alert policy configuration for pod replicas count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dq8noax84m56qmqfha8x.png) 

We have used resource label container_name along with the cluster name in Filter, you may need additional filters such as namespace to identify a container. The Aggregate function 'count' reduces the multiple timeseries data to a single value giving us the count of containers that are up at the given time

Here, sum is used as Aligner, but any of the available aligner options can be used as we do not care about the intermediate value

![Alert policy configuration for pod replicas count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lsj9f6x41oscwmt6zww.png)
 

#### Policy Conditions
 
Condition for checking when number of containers is below 5
![Alert policy configuration for pod replicas count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtlqb4ihnctsqi4bytki.png)

There will be no record for a container when it is not up. So we need an additional condition that will trigger an alert if a container is missing in the metric output

![Alert policy configuration for pod replicas count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmevsoa0usz3z45bovt9.png)
 

![Alert policy configuration for pod replicas count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1wqrvuwuvf0qyoxls31.png)

An alert is triggered when any of the above conditions is met
How to Disable Drupal 9 Cache and Enable Twig Debug
Tags: drupal, theme, cache, twig
Published: 2022-03-07 18:29:15

If you have heard of Drupal cache system then it's okay, but you have not heard of. Cache is a part of Drupal core that means whenever you make many change you must clear the cache to see the changes on the site and that is time consuming. 

This post will help you quickly disable Drupal cache and also enable twig debug mode that will be helpful if you are going custome or build [Drupal theme](https://tubemint.com/drupal-9-themes/).

The only requirement is - you must have composer installed on your system. 

I am using Linuxmint for my development environment but you can follow these steps on any OS of your choice.

Let's do it...
1. Navigate to the Drupal root folder/directory
2. Add drupal/console to the drupal instance
3. Change the site mode to dev with drupal console

`cd /var/www/html/drupal`

`sudo composer require drupal/console`

`sudo vendor/bin/drupal site:mode dev`

You are done.

{% embed https://youtu.be/hEPEhyJYInQ %}
Announcement:Our First Live Q&A session
Tags: live, webinar, lowcode
Published: 2022-03-07 18:29:12

### We are excited to invite everyone to participate in our first live Q&A session on Zoom, hosted by our architect from Back4app- Alex Kusmenkovsky


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

Hello everyone!

There are a ton of innovations going on in Back4app and, of course, you may want to share your opinion. We believe it is an immense responsibility to be as open to our community as is possible and that is why we are hosting our very first live Q&A session on Zoom on Thursday, March 10, 11 am (Pacific time). Our architect- Alex Kusmenkovsky, will happily embrace all of your comments, queries and recommendations, so don‘t forget to tune in!

 link to register: https://us02web.zoom.us/webinar/register/WN_J_Eal9KKQ_2RKTuwyN5mvg
Web2 Vs Web3
Tags: blockchain, web3, zuri, blockgames
Published: 2022-03-07 18:24:33

>The only constant thing is change as the saying goes, and the web/internet is no exception.

The web has gone through grand breaking evolutions and phases starting from the initial stage which is generally referred to as web1- era of static web pages, web2- the current phase and web3- the new era we are entering.

While the web is a broad endless topic of discussion, this article will be focused on ***the differences*** between Web2(current phase of the web) and web3(the new phase).

##Some Key differences between Web2 and Web3.

#### Decentralization
Decentralization is a core tenet of Web3. First off, there is no central authority controlling content and imposing indiscriminate censorship. The more decentralized a platform is, the more censorship-resistant it becomes.

####Trustless and Permissionless
Web3 is trustless and permissionless, which means participants can interact without permission from a trusted intermediary or governing body. Applications in Web3 run on decentralized peer-to-peer networks. That’s why they’re called decentralized applications, or dApps, rather than “apps.”

This article was written for the [Blockgames](https://blockgames.gg) program, a partnership between The [Zuri](zui.team) team and [Nestcoin](nestcoin.com)
New Things Added - Laravel 9.3 Released
Tags: php, laravel, programming, webdev
Published: 2022-03-07 18:20:43

Let's get started quickly I found new things in Laravel 9.3 Released I wanted to share with you.

- whereNot() Query Builder 

https://github.com/laravel/framework/pull/41096
In the following example, we see the first image, we get a certain result from the database, but when we use whereNot() in the second image, we see a completely different result, despite the small change we made


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

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

- filter out routes defined in vendor packages

https://github.com/laravel/framework/pull/41254
Let's improve the route:list display further by
```php
php artisan route:list --except-vendor
```



I hope you enjoyed with me and to learn more about this release visit the sources and search more. I adore you who search for everything new.
Source :- https://www.youtube.com/watch?v=eYMdIlJO2Uw