teleren/devto huggingface dataset:
The truth about Angular form
Tags: angular
Published: 2021-06-23 17:06:58

## introdution 

In this article i want to explain how to use angular forms directives in the right way, because i've observed that is not already clear how to use it correctly or what is the diferent about use template forms and built our owned form whith `FormBuilder` class. I am not going to enter in how to create a form in angular only i want to explain the interesting things.

## explanation

I'm going to start with something very simple but could be doubs about this. 

The question is:  **What happens when we use `<form #f="ngForm" ...` ?**

Someone could think that we're referencing our form, this could be true, but in reality more things are happening behind the scenes.

The truth about this is that when we import `FormsModule` automatically `NgForm` is avalilable in our view, this means that `NgForm` is automatically attached to any `<form>` in our view and is not necessary add explicitly `ngForm` as an attribute.



Answering the question posed, when we use `#f="ngForm"` in a  `form` tag in reality we're creating a `FormGroup` ! where `f` is the type `FormGroup`, this is so because this syntax says that we want to create a local variable for this view but, where did `ngForm` cames from ? it came from the `NgForm` directive.

At this moment you could think, ok `f` variable is a `FormGroup`, if you remenber a `FormGroup` is composed by `FormControls` and, where are they in our form ? Now comes into play `NgModel` directive.

When we use `ngModel` with no attribute vslue we are specifying that at first we want a one-way data binding, and this is important we want to create a `FormControl` on this form with the name same as name attribute. `NgModel` creates a new `FormControl` that is automatically added to the parent `FromGroup`. 

Now we can build our form like this:

```html
<!-- Creates a FormGroup-->
<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
  <!-- Creates a FormControl with name email -->
  <input name="email" type="email"  ngModel >
  <!-- Creates a FormControl with name password -->
  <input name="password" type="password" ngModel >
</form>
```



## Conclusion



In this simple way we can create a valid form in **Angular** using template forms, but create form with this way have some limitations, for example what happens if we want validate the password input, we cant specify validators for `FormControls` and neither we can't  listen the form events. If we aren't  want do special stuff template form could be a  great solution.
Ignite Your Learning Spirit 🔥
Published: 2021-06-23 16:55:55

Hello there! I am Novan and this is my first blog post. I hope it gives you new knowledge and insights to discover.

This is a summary of Ignite Webinar Series, a webinar series aims to develop learning spirit of GenerasiGIGIH participants organized by YABB X GOJEK.

***

## Ignite #1 - Getting Ahead By Learning to Unlearn and Relearn

*Saturday, June 5th, 2021*
*by Aleisha Fiona, Leadership Development at GoJek and Founder of Relearn Indonesia.*

>Relearn is a must!

As a software developer we have to learn and, more importantly, is to be able to unlearn and relearn as things grow rapidly within IT industries. Through the process of relearning we can get new insights as the result of connecting our new knowledge with our past knowledge.

Think the process of relearning as knowledge recycling. Learning is gaining new knowledge we may have not have before. And to gain new knowledge, we need to unlearn, get rid of knowledge we got before. Thus we will be able to absorb new knowledge because we have empty spaces to learn.
<br>

## Ignite #2 - Self Learning 101 for Tech Talent

*Saturday, June 19th, 2021*
*by Opan Mustopah, System Engineer at GoPay.*

>Googling is a skill

An effective engineer has a growth mindset. They tends to seek for conductive learning places. They read books, attend conferences, build and maintain strong relationships, has solid habits and always learn whatever it takes. Be one of them and you'll likely to survive the industry!
<br>

## Ignite #3 - What to Prepare to be a Change Maker

*Saturday, June 14th, 2021*
*by Kevin Aluwi, Co-Founder and CEO of GoJek.*

>Start Small, Grow Big

We don't have to start from big things or issue to be a change maker or problem solver. CEO like Kevin Aluwi and Nadiem Makarim wants to solve the issue of traffic jam in part of Jakarta region. As they start working on solving the issue, they grow big and big until GoJek become one of the largest startup in Indonesia.

>PS: He also mention that he don't suddenly thinks about his country after he wake up in the morning
11. Container With Most Water [Leetcode ] 
Published: 2021-06-23 16:39:47

Optimized Python 3 Solution for Container with most water problem.
I am using two pointer shifting technique to solve it so that we can reduce time complexity of the solution.

CODE:-

class Solution:
    def maxArea(self, height: List[int]) -> int:
        maxArea = 0
        p1 = 0
        p2 = len(height)-1
        while(p1<=p2):
            maxArea = max(maxArea,min(height[p1],height[p2])*(p2-p1))
            if(height[p1]<height[p2]):
                p1=p1+1
            else:
                p2=p2-1
        return maxArea
Micro content on programming languages and concepts
Tags: programming, beginners, javascript, react
Published: 2021-06-23 16:09:18

I used to follow different blogs, sites, and other resources for keeping up with the technology and always ended up spending more time reading the whole background instead of getting info on the crux of the matter. 

This gave me the idea to create a community where the core concept / topic is presented as a short 30-second read called "ideation". Ideation is represented using images and rich text with emphasis and highlights on the relevant parts and may contain links to related content.

## Kotlin
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bl8fomao31v44wrqh4ib.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3p7wt89qoslxcl1c6a22.jpg)

## Data structures
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7od6fpml23c9mvw2iw6p.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9h607y3n9qltld9sxw6q.jpg)

## React
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7a2nlviro4o45hc3705t.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hi29q7yyzqmvpzhv87w3.jpg)

The microideation app has got more than 300+ ideations on 
* Kotlin
* Java
* ReactJS
* Spring framework, 
* Data structures
* Algorigtms and more and 

It's free and growing 

More info : 
https://www.microideation.com/programming.html

Download 
https://play.google.com/store/apps/details?id=com.microideation.app
1. Two Sum
[From Leet code]
Published: 2021-06-23 16:37:11

Brute force:

for i in range(len(nums)):
    for j in range(i + 1, len(nums)):
        if nums[i] + nums[j] == target:
            return [i, j]
Runtime: 3584 ms, faster than 14.38% of Python online submissions for Two Sum.
Memory Usage: 14.5 MB, less than 14.64% of Python online submissions for Two Sum.

Two-pass Hash Table:

nums_hash = {}
for index, num in enumerate(nums):
	nums_hash[num] = index

for index, num in enumerate(nums):
	comp = target - num
	if comp in nums_hash.keys() and index != nums_hash[comp]:
		return [index, nums_hash[comp]]
Runtime: 1348 ms, faster than 24.52% of Python online submissions for Two Sum.
Memory Usage: 14.2 MB, less than 46.97% of Python online submissions for Two Sum.

One-pass Hash Table:

nums_hash = {}
for index, num in enumerate(nums):
	comp = target - num
	if comp in nums_hash.keys() and index != nums_hash[comp]:
		return [index, nums_hash[comp]]
	else:
		nums_hash[num] = index
Runtime: 680 ms, faster than 27.87% of Python online submissions for Two Sum.
Memory Usage: 14.3 MB, less than 46.97% of Python online submissions for Two Sum.
Welcome Thread - v130
Tags: welcome
Published: 2021-06-23 16:27:59

---
title: Welcome Thread - v130
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![jello saying hello](https://media.giphy.com/media/Jsy4fltgRzBunW9Nk9/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
My list of resources for web dev and tech enthusiasts.
Tags: webdev, git, bash, shell
Published: 2021-06-23 16:23:46

At [https://github.com/andou/tech-resources](https://github.com/andou/tech-resources) you can find my curated list of useful tech resources for web developers and tech enthusiasts.

Enjoy it :smile: and give it a :star:!
Microsoft Learn Student Ambassador Journey January 2020 to June 2021
Tags: microsoft, ambassador, journey, community
Published: 2021-06-23 16:23:45

I joined Microsoft learn student ambassador program back in January 2020. The very first event we conducted in February 2020 in UET Lahore where I talked about the Microsoft student ambassador program upto 50+ students to leading a community of 3000+ including tech students, professionals and freelancers.

Microsoft Learn — Lahore community is going to expand it’s circle to teach the latest technology trends of Microsoft Technologies. The Microsoft Learn Student Ambassador Program is a worldwide educational program to sponsor students majoring in disciplines related to technology. The Microsoft Learn student program attempts to enhance students’ employability by offering training in skills not usually taught in academia, including knowledge of Microsoft technologies. I am co-leading this community with my University, Batch fellow and not the least good friend also Lead of MLSA Lahore section we are trying our best to build this community to promote the latest Microsoft technologies in local community for specially students, professionals and mentors. We do have active accounts on social handles you can check out our work we are doing by visiting the link below:

Website:https://mlsalahore.com/
Facebook:https://www.facebook.com/MLSA.Lahore
Twitter:https://twitter.com/MLSALahore
LinkedIn Profile:https://www.linkedin.com/in/fahad-ashiq-303/
Vantagens do Pinterest
Published: 2021-06-23 16:20:10

O Pinterest é uma rede mundial de compartilhamento de imagens, sendo uma rede de pesquisa que é fonte de inspiração para criadores de conteúdos. 

Nele você encontra os mais diversos nichos - moda, beleza, saúde, marketing digital, decoração...

Usar o Pinterest para Negócios tem o grande potencial de alavancar suas vendas, pois ele pode ser utilizado nas estratégias de Inbound Marketing e mesmo de vendas diretas.

São milhões de usuários em todo o mundo e, como vantagens, há as seguintes:

-Aumentar o tráfego do site
-Pinterest Analytics
-Alto engajamento
-Atrair clientes e leads
-Aumentar as vendas

Fonte:
https://adeusponto.com/vantagens-do-pinterest-para-o-marketing-digital/
LaTeX & Maths: amsmath and amssymb packages
Tags: codenewbie, latex
Published: 2021-06-23 16:07:43

Hello :) 

In [this](https://dev.to/latexteada/latex-maths-inline-and-displayed-formulas-90m) post I tell you how to insert formulas. 

Today I want to talk about two important packages in the LaTeX Math's world, `amsmath` and `amssymb`, these packages are very important if you want to create *more advanced maths* these provide you more *math symbols* which you can use, let me give you a brief introduction 

## `amsmath` Package

This package allows us to improve the structure and information in our document with displayed equations and mathematical stuff like: 

- Operators name and symbols for *advanced* math, like operators
- Equations numbering

You can check more of this package [here](https://mirror.las.iastate.edu/tex-archive/macros/latex/required/amsmath/amsldoc.pdf)


## `amssymb` Package

This package provides tons of math symbols, like arrows, operators, special characters, geometric figures etc. 

You can check more of this package [here](https://mirror.las.iastate.edu/tex-archive/fonts/amsfonts/doc/amssymb.pdf)

### Advertisement

The last packages are huge, enormous in the features that provide to the user, **we are not going to use each single thing here** why? because we can not do it, these are lots of commands, instructions, symbols, etc. 

As I told you, I am going to provide you different resources to learn multiple commands and you can explore by your own these resources and select the most suitable for your document.

Greetings, do not forget to follow me on Twitter `@latexteada`
Binary search tree in ruby
Tags: ruby, ds, tree, bst
Published: 2021-06-23 15:32:57

BST is data-structure that is used to store data in a tree or hierarchical format.
In bst we make a root node and store the data which is lower than the value of root node to left part of the root node and the data which is greater than the root node store it on right side of the root node

`Code`
```ruby
# creating a node
class Node
	attr_accessor :data,:left,:right
	def initialize data
		@data=data
		@left=@right=nil
	end
end
# inserting values in tree 

def insert root,data 
	if root==nil 
		return Node.new(data)
	elsif root.data<data
		root.right=insert root.right,data 
	else
		root.left=insert root.left,data
	end
	return root
end

# printing the values in preorder fashion
def preorder root
	if root==nil 
		return
	end
	print "#{root.data} "
	preorder root.left
	preorder root.right
end

root=nil
root=insert(root,10)
insert(root,9)
insert(root,12)
preorder root
puts
```
`output:- 10 9 12`
here is a bst and we are printing the tree in preorder manner.
Whiteboarding and Visualization tools
Published: 2021-06-23 15:30:35

I am B-E-A-T after this long day.

Last night ended late after struggling and fighting through a tough sprint. This morning picked up a couple hours early from where the previous night ended. And I'm paying the price now.

C'est la vie. We got the work done. Today was tough. But it was a good day.

---

I thought I'd share some tools that I've found - one that I've used and one that I plan to.

###Excalidraw.com

A site that allows you to draw simple shapes, lines, numbers, and freehand, to create diagrams and illustrations.

I first saw the site in a help-desk ticket for a pair programming assignment. So much of coding is visualization, and with a few simple strokes, our help desk ..uh helper(?) created a diagram that we used to break down the tree data structure and step-through the problem-solving process.

I've used it since, and it's great. Simple tools can be the most powerful, and this fits that axiom. There might be more functionality deeper than I've explored, but being able to create attractive shapes and manipulate them in basic ways, was something that I had been wanting and this app delivers.

###Draw.io
A diagraming and workflow tool. I'm less familiar with this one as I haven't used it yet, but it looks like it makes charts of all types and workflow diagrams simple to create.

You can see it in action here, in my classmates blog, [Darion Builds](https://darionbuilds.medium.com/recounting-my-struggle-with-git-in-pair-programming-fc6663254691). 

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

I read his post and had to know what tool he used to create his diagrams. That's how I found draw.io.

In the last week before the bootcamp began, I thought that I'd use a tool like that here, in this blog, to illustrate and record my daily or weekly workflows and learning process. But the schedule is so fast and so congested, there hasn't been time to do that. I still think it'd be a cool element to add to this project, but it's on the back-burner until (and if) time frees up.
Anyone offering Internship in Cloud Computing?
Tags: cloud, career, aws, googlecloud
Published: 2021-06-23 15:30:05

Hey guys!
Hope you all are fine and safe.

My name is <b>Kashir Hasnain</b> and I'm mostly a <b>Associate Cloud Engineer</b> having experience in private cloud. Currently, I'm looking for opportunities/roles/projects in Cloud Computing  Technology and I thought of reaching out to the dev community as it's one of my favorite place on the internet.

Do you know anyone who's <b>offering internship</b>  for skills related to Google Cloud/AWS/Private Cloud If yes then I will appreciate it if you can share my reference or let me know about it. Here's my <a href="https://kashir-hasnain.github.io/">portfolio website</a> for your reference where you can find some of my projects and details related to me and my skills.
I have 150 hours+ experience in Qwicklabs. You can visit my profile at <a href="https://www.qwiklabs.com/public_profiles/ea84a7e2-e8fc-4604-b261-8de4bc3a2fa8"> link</a>.

If you have any questions/suggestions then do let me know.
Thank you so much for reading this and I hope to hear from you soon.
Recursion explained 🎉
Tags: javascript, algorithms, react, reactnative
Published: 2021-06-23 15:12:35

In this article we will break down all the concept you need to know before saying that you fully understand recursion. The goal is to talk about those concepts so that you can come up with your own definition of what recursion is 😋.


Definition : Recursion is mostly described as a process that calls it self.
It can also be described by a function that calls it self.

Call Stack : In case we're calling a function or more multiple times in a program, 
their is a thing called "Call Stack" that is an actual stack in witch functions are placed 
on top of each other in terms of execution,
so the call stack can hold informations about all the functions that are placed on it.

So when using a recursive function what happen is we keep pushing the same function onto the "Call Stack".

What's the main structure of a recursive function ? :

A recursive function has two essential parts wich are the base case and a different input (or function argument). 

1) The base case :
For the base case you can, think of it as a condition that causes the function to stop calling it self, in other words it stops the recursion.

2) Different input : Everytime a recursive function is being called, we need to make sure that the input aren't the same.

If one of the two or both are missing the process can resolve in what called a
"Stack overflow" forcing you to spend hours looking for answers on stackoverflow.com 😉.

Now let play a game!

The followings are two examples of recursive functions and your goal is to.
1) Find the "base case".
2) Find the the difference input.
3) Leave your answers in the comment section 😋.

Ex 1:

![Alt Code example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1ppug6yr9jhbq4c6t1t.png)


Ex 2:

![Alt Code example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jk9x2lm9v356ilg615g6.png)
CodePenChallenge Magazine Layout
Tags: design, uiweekly, webdev
Published: 2021-06-23 15:11:09

<h1>CodePenChallenge Magazine Layout</h1>

<h2>Description</h2>

<p>This is my sample layout for a design of a magazine.</p>

<p>Dominantly, I used purple colour, just because when I'm browsing a magazine for a reference, the first colour I have seen is purple. Although, I really love this colour.</p>

<p>For header, I used yellow. This is not the direct complementary colour of purple, but supplementary colour of green (which is the complementary colour of purple).</p>

<p>I used green colours for some "highlight" part of the article, to make it "pop-up", and easily readable by the readers.</p>

<p>The font colour is white, because the background colour is a dark color. Also, again the first reference that I saw goes like this.</p>

<p>I don't own too many magazines at home, but I used these magazines to reference my work.</p>

<p>I didn't want to touch the HTML code, so using of images is very limited.</p>

<h2>Resources</h2>

<p>There are the magazines I used to get reference:</p>

<p><a href="https://animageplus.jp">Animage</a></p>

<p><a href="https://www.ndw.jp">Nintendo Dream Web</a></p>

<p>I am not affiliated with those references.</p>

<h2>Fonts</h2>

<p><a href="https://fonts.google.com/specimen/Press+Start+2P?category=Display">Press Start 2P</a></p>

<p><a href="https://fonts.google.com/specimen/Fredoka+One?category=Display">Fredoka One</a></p>

<p><a href="https://fonts.google.com/specimen/Comfortaa?category=Display">Comfortaa</a></p>

{% codepen https://codepen.io/takaneichinose/pen/MWpMvdZ %}
Understanding Open Telemetry and Observability w/ Splunk's Spiros Xanthos
Tags: opentelemetry, observability, bigdata, datascience
Published: 2021-06-23 14:44:44

Observability is crucial to understanding and adapting your product and your data - and open source telemetry is increasingly important.  To go behind the data and understand where telemetry is going,  [Spiros Xanthos joined us on the Dev Interrupted podcast](https://devinterrupted.com/podcast/understanding-opentelemetry-and-observability/) to talk about how data analysis and tracking are changing, and what is next for Splunk. Spiros is the Founder of Omnition and the current VP of Product Management, Observability, and IT at Splunk.

#**Listen to the full episode**
{% spotify spotify:episode:3YS7Lew7gP3amj1Q5EMNej %}

#**Episode Highlights include:**
* [The use of microservices](https://linearb.io/blog/the-software-times-they-are-a-changin/)
* Splunk's Omnition Acquisition
* OpenTelemetry - what's behind it, how to participate, what's next
* Splunk's problem solving, strategy, and future
* [Running a data-driven team](https://linearb.io/blog/data-driven-dev-team/)

{% youtube d7hu_svZQFk %}

#**Join the Dev Interrupted Discord Server**
With over 1200 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.gg/tpkmwM6c3g)
![Join the Dev Interrupted Discord Community!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19j3dzgz4r4kzav3w6z8.png)