teleren/devto huggingface dataset:
Bank 🏦 UI in Flutter 👨🏻‍💻
Tags: showdev, flutter, uiweekly, todayilearned
Published: 2020-07-19 10:00:55

![Hello](https://media.giphy.com/media/Wj7lNjMNDxSmc/giphy.gif)

I wanted to improve my flutter frontend skills so I decided to look for inspiration in dribble and code those designs. For a starter, I coded this 🚀.

## App Development process GIF
![GIF](https://dev-to-uploads.s3.amazonaws.com/i/b7v22kyekrz3ljrv5a9y.gif)


## App Screenshots

### Screen 1
![Screen 1](https://dev-to-uploads.s3.amazonaws.com/i/9cv5wl08jxwlse1aiz2t.png)


### Screen 2
![Screen](https://dev-to-uploads.s3.amazonaws.com/i/w9qpqjf60n6gdklwp11p.png)

## Development time
![Waka](https://dev-to-uploads.s3.amazonaws.com/i/6yluxyeb2liy43ovgsl9.png)

{% github Rohithgilla12/BankUI %}
Please star ⭐️ the repo if you liked it.

Original Design Link : [Dribble](https://dribbble.com/shots/13547910-Mobile-bank-App-Design)
 

Peace ✌🏻
Rohith Gilla 👨🏻‍💻
TL;DR : RFC 6238, TOTP (Time based one time password)
Tags: tutorial, security
Published: 2020-07-19 09:53:35

Used in: 
1. Google Authenticator.
2. Twillio Authy e.t.c

```javascript

// n digits 
TOTP = TRUCATE(HMAC(secret_key, counter))%10^n

```

Where;
1. secret_key  = shared between client and server
2. counter = floor(unix-time/time step)

Hash will be truncated, converted to decimal divided by 10^n (where n is the number of otp digits), the result of the remainder will give you an n length integer, which is our OTP code
New way to Dockerize Spring Boot App
Tags: springboot, docke, dockerfile, techtter
Published: 2020-07-19 08:55:45

In this video I would like to explain how we can dockerize or containerize spring boot application without dockerfile. From Spring Boot 2.3 version, cloud-native build packs is added natively to the spring framework. So we no need to write dockerfile if we use Spring framework version 2.3 version.
Just check the video for complete hands-on demo:https://youtu.be/0NdxJCFHPHw

{% youtube 0NdxJCFHPHw %}

✅  Spring Boot & Docker related Videos ✅
► Spring Boot & Cassandra Integration with Docker Compose: https://youtu.be/uLmVfUXin8o
► Spring Boot & PostgreSQL Integration with Docker Compose: https://youtu.be/ZZ2Llh4NhaY
► Spring Boot & MySQL Integration & Deployment on K8s: https://youtu.be/ThAkKPAwdpQ
► Spring Boot with Protocol Buffers: https://youtu.be/OX9YDqu-lbo
► Spring Boot & Kafka Producer and Consumer Example: https://youtu.be/s7kVR6yK78M
Licenses for non-open source projects
Tags: discuss, help
Published: 2020-07-19 09:45:38

Hi coders!
The other day I was searching a license for a project that isn't open source (I always try to be open source) but I didn't found a good one. Wich one do you recommend? At least I pretend to deny the comercial use. 
I will read you down below :)
Thanks to all.
How do you maintain momentum?
Tags: productivity
Published: 2020-07-19 09:28:08

**If planning is a science, then timing is an art, and the more complex a plan is, the more critical time — and timing — becomes.**

So it's vital I maintain momentum, or risk the slump, the sag, or the flop! Low places that are difficult to climb out from, and are places I hate to be.

This is a Sunday morning here in the north of England, and I've been flat out, cramming as much work as is feasible before I go for a 9-10k walk at 11am.

I run multiple threads of things, where each delivers something on short times scales — like improving the UX of a feature, refactoring some code to test a new thing I've learned and so on — but contribute to that greater whole.

Where the slump, the sag, and the flop come into things is when I have to reach out, ask for help, need authorization, require some essential piece of data or information, and I wait — then wait, and do some more waiting.

I mitigate against this by switching to some other thread, to keep the momentum going.

I get it, no-one but me works on Smallman Standard Time!

So, how do you maintain momentum?
Road to Genius: superior #54
Tags: javascript, codenewbie, computerscience, beginners
Published: 2020-07-19 09:03:34

Each day I solve several coding challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, and you will learn a ton of new and interesting things as you go.

```JS
function intersected(a, b) {
  if (a[0] > b[1] || a[1] < b[0]) return false;
  return true;
}

function mergeTwo(a, b) {
  return [Math.min(a[0], b[0]), Math.max(a[1], b[1])];
}

function merge(VLS) {
  VLS.sort((a, b) => a[0] - b[0]);
  for (let i = 0; i < VLS.length - 1; i++) {
    const cur = VLS[i];
    const next = VLS[i + 1];
    if (intersected(cur, next)) {
      VLS[i] = undefined;
      VLS[i + 1] = mergeTwo(cur, next);
    }
  }
  return VLS.filter(q => q);
}

let arr = [
  [2,10],
  [10,11],
  [11,12]
]

let A = merge(arr);
A = A[0][1]

// A = ? (number)
```

We have encountered this challenge a couple of episodes ago (https://dev.to/codr/road-to-genius-superior-52-4b5m), this time we have to solve it and not just fix some bugs. 

What we've learned from the previous post is that this code is designed to merge several input arrays depending on whether they overlap/intersect. In pseudo-code it's explained as such:

```
x = [1, 5]
y = [5, 9]
--> [1, 9] //they overlap so we can merge

x = [1, 5]
y = [6, 9]
--> they do not overlap so cannot merge
```

In the code above we have the following:
```JS
let arr = [
  [2,10],
  [10,11],
  [11,12]
]

* the first two arrays overlap
* the last two arrays overlap
--> all 3 arrays can be merged into:
[2, 12]
```

The challenge asks us to solve `A[0][1]` which is 12.

![coding challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/3c1tvd7x8stad2d50nrd.png)

By solving these challenges you train yourself to be a better programmer. You'll learn newer and better ways of analyzing, debugging and improving code. As a result you'll be more productive and valuable in business. Get started and become a certified Codr today at https://nevolin.be/codr/
Sorting ISO 8601 timestamps
Tags: sorting, python
Published: 2020-07-16 14:26:34

Let's suppose I have a list of timestamps:

```python
timestamps = [
  '2020-06-02T16:47:50Z',
  '2020-05-08T01:25:10Z',
  '2020-05-08T19:51:29Z',
  '2020-06-04T20:23:02Z',
  '2020-05-27T02:23:14Z',
  '2020-05-12T16:32:08Z',
  '2020-05-06T01:58:21Z',
  '2020-05-14T16:11:31Z',
  '2020-05-08T14:25:36Z',
  '2020-05-22T20:48:13Z',
  '2020-05-10T02:43:44Z'
];
```
Maybe a more "real-world" example would be scenario where you have a list of dictionaries and you want to sort by their `created_date` attribute. How would you do it?

If we wanted to sort our `timestamps` we could parse the date string into a date object and then use some compare function to correctly sort the list.

Fortunately, there's a nicer solution! Some date formats, such as [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) can be sorted merely as strings.

### How can this be?

The ISO 8601 format is [lexicographically ordered.](https://en.wikipedia.org/wiki/Lexicographical_order) If you have an ordered set of names: "Carlton" and "Carlyle." When ordered, "Carlton" precedes "Carlyle" because the 5th letter "t" is less than "y".

If you have two timestamps: "2020-05-08T19:51:29Z" and "2020-05-08T01:25:10Z", they differ at the 12th character and, because of the leading 0, the first timestamp comes after the second timestamp.

This is all do say that you can sort your timestamps very easily:

```python
timestamps = [
  '2020-06-02T16:47:50Z',
  '2020-05-08T01:25:10Z',
  '2020-05-08T19:51:29Z',
  '2020-06-04T20:23:02Z',
  '2020-05-27T02:23:14Z',
  '2020-05-12T16:32:08Z',
  '2020-05-06T01:58:21Z',
  '2020-05-14T16:11:31Z',
  '2020-05-08T14:25:36Z',
  '2020-05-22T20:48:13Z',
  '2020-05-10T02:43:44Z'
];
timestamps.sort() # Yay!
```
Building a Code Editor for the Web - Configuring Ace Editor
Tags: webdev, html, css, javascript
Published: 2020-07-19 08:52:06

In this video, we'll work on configuring ace with some options and getting the user input from Ace to execute in the chrome dev tools

Find the code for each video here in its own branch: 
https://github.com/luvuong-le/code-editor-tutorial/tree/configuring-ace

View the Ace configuration options here: 
https://github.com/ajaxorg/ace/wiki/Configuring-Ace

Check out the previous part to this video [here!](https://dev.to/coderarchive/building-a-code-editor-for-the-web-html-css-structure-ilf)

Follow and connect with me on:
----------------------------------
📹 Youtube: https://www.youtube.com/channel/UCWaB4SBBUCvhYb91fz5Vidg
🐦 Twitter: https://twitter.com/coderarchive
📚 Github: https://github.com/luvuong-le
💼 LinkedIn: https://www.linkedin.com/in/lu-vuongle/
📷 Instagram: https://www.instagram.com/coderarchive/
📝 Dev.to: https://dev.to/coderarchive
Spring Boot Integration with Cassandra NoSQL Database
Published: 2020-07-19 08:39:25

Spring Boot application, Cassandra databases can be run as microservices using Docker Compose. I would like to demonstrate the integration of Spring Boot and Cassandra with a hands-on demo in the video link given below. 

Just checkout the video: https://youtu.be/uLmVfUXin8o

{% youtube uLmVfUXin8o %}

✅  Spring Boot & Docker related Videos ✅ 
--------------------------------------------
► Spring Boot & Cassandra Integration with Docker Compose: https://youtu.be/uLmVfUXin8o
► Spring Boot & PostgreSQL Integration with Docker Compose: https://youtu.be/ZZ2Llh4NhaY
► Spring Boot & MySQL Integration & Deployment on K8s: https://youtu.be/ThAkKPAwdpQ
► Spring Boot with Protocol Buffers: https://youtu.be/OX9YDqu-lbo
► Spring Boot & Kafka Producer and Consumer Example: https://youtu.be/s7kVR6yK78M
Custom iTerm2 layouts with itermocil
Tags: webdev, productivity
Published: 2020-07-19 08:30:09

---
title: Custom iTerm2 layouts with itermocil
published: true
description: 
tags: webdev, productivity
//cover_image: https://direct_url_to_image.jpg
---

If you frequently work with web development projects, you tend to run a lot of scripts during development. For example, if you are working on a fullstack node project you might run `npm start`, `npm run watch` and maybe `npm run server`. It is usually convenient to run them in different panes in a single tab in Iterm2, so that you can see everything in one place. It is a hassle to create and arrange these panes every time.

Iterm2 lets you save and restore layouts from Preferences but [itermocil](https://github.com/TomAnthony/itermocil) lets you write YAML files for custom arrangements and relaunch them quickly.

Here is a sample YAML for a simple 2-pane layout.

```yaml
windows:
  - name: website
    root: ~/Dev/website
    layout: even-horizontal
    panes:
      - npm run dev
      - npm run server
```

You need to save your custom layouts in `~/.itermocil`

You can launch this layout by running

```sh
    itermocil <layout-name>
    #<layout-name> is the filename of the layout file in ~/.itermocil
```

I aliased `itermocil` to `t` so that I can launch any of my custom layouts with `t <layout-name>`. This has made it easy to switch between various projects quickly. Now I can start working on my website by just using `t www`. A nice side effect is that I no longer have to remember what scripts have to be run to start working on any specific project, I can start hacking on any project with a single command.

Let me know your thoughts and tips to improve productivity.

> Originally posted on https://arjunsajeev.com/writing/custom-iterm2-layouts
GitHub profile readme generator
Tags: github, git, readme, profile
Published: 2020-07-19 08:27:20

I kinda love this github new feature about readme profile files.

So i decided to create profile views counter, but then it got me thinking why not to create [profile readme generator](https://arturssmirnovs.github.io/github-profile-readme-generator/)?

So in me weekends i spent about 4 hours creating this simple tool that allows you to create nice and beautiful github readme files.

**What's included?**
* Header generator with title, subtitle
* Header banner URL
* Header about me section and skills
* Additional section
* Social links + website
* Statistics badges

[Check tool here.](https://arturssmirnovs.github.io/github-profile-readme-generator/)	

[Check git repository here.](https://github.com/arturssmirnovs/github-profile-readme-generator)	

**Preview**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fqn4uoofdpvnj4a3c3w3.gif)

*It was nice weekend project made with vue js that i haven't touched for some time. If you like this please star my repository would appreciate that a lot. :)*
Spring Boot with Kafka Producer & Consumer Example
Tags: springboot, kafkaconsumer, kafkaproducer, techtter
Published: 2020-07-19 08:26:35

Spring Boot simplifies to create Kafka Producer and Kafka Consumer for any java application without much efforts. Spring provides ready made templates to connect kafka topics.So that it is easy to integrate Spring Boot and Kafka. In the following I am showing hands-on demo on how to connect spring boot app with kafka system that is running on Docker container.

Checkout the video:https://youtu.be/s7kVR6yK78M
{% youtube s7kVR6yK78M %}

Subscribe to Channel:https://www.youtube.com/Techtter?sub_confirmation=1 

✅  Spring Boot & Docker related Videos ✅
► Spring Boot & Cassandra Integration with Docker Compose: https://youtu.be/uLmVfUXin8o
► Spring Boot & PostgreSQL Integration with Docker Compose: https://youtu.be/ZZ2Llh4NhaY
► Spring Boot & MySQL Integration & Deployment on K8s: https://youtu.be/ThAkKPAwdpQ
► Spring Boot with Protocol Buffers: https://youtu.be/OX9YDqu-lbo
► Spring Boot & Kafka Producer and Consumer Example: https://youtu.be/s7kVR6yK78M
Inspired by my previous dev.to posts, I launched something.
Tags: webdev, javascript
Published: 2020-07-19 07:47:19

---
title: Inspired by my previous dev.to posts, I launched something.
published: true
description: 
tags: webdev, javascript, 
//cover_image: https://appydev.co/social/card.png
---

So, some of my previous posts I wrote Like were getting a lot of traction.

https://dev.to/fayazara/top-open-source-alternatives-to-popular-products-stop-paying-16jn

https://dev.to/fayazara/tools-i-am-surprised-more-people-aren-t-using-2bn2

I realised a lot of people needed these tools and communities & podcasts, especially beginners. 

So I decided to finally curate all of my bookmarks and eventually made a website out of it & launching it today.

Here it is https://www.producthunt.com/posts/appydev

Appydev is a collection of tools, podcasts & communities hand curated for people who live on the internet.

This site is made with 

Nuxt.js
Tailwind CSS
Nuxt Content module

The only place I have spent money is on the domain(sale on namecheap so it was just for $4), everything else was free. 

Let me know what you think.
An object from two arrays
Tags: javascript
Published: 2020-07-19 07:09:11

##Introduction
This post is about creating a JavaScript object using two arrays.

I had to create an array of keys with a format: */valueText* and values with a format *Value text*.
So, the resulting object would be:
```javascript
let result = {
 /valueText: 'Value text'
}
```

So, I wrote a function which would return a key in desired format.
```javascript
const formatKey= (s) => {
    if (typeof s !== 'string') return ''
    return "/" + s.split(" ").join("").charAt(0).toLowerCase() + s.split(" ").join("").slice(1);
  }
```

I stored these values in one array which I named *fieldKeys*.
Now to construct an object from these two arrays, I made use of one array for iteration and kept filling in the object.

There are various methods to do it.

```javascript
Method 1: **forEach**

fieldKeys.forEach((key, index) => result[key] = fieldValues[index])

Method 2: **reduce**

result = fieldKeys.reduce((acc, key, index) => ({...acc, [key]: fieldValues[index]}), {})

Method 3: **Object.assign**

result = Object.assign(...fieldKeys.map((key, index) => ({[key]: fieldValues[index]})))

```

Here is the complete snippet:
```javascript

  let fieldValues = ['First Value', 'Second Value', 'Third 
   Value'];
  let result = {};
  const formatKey= (s) => {
    if (typeof s !== 'string') return ''
    return "/" + s.split(" ").join("").charAt(0).toLowerCase() + s.split(" ").join("").slice(1);
  }

  let fieldKeys = fieldValues.map(item => formatKey(item));
  console.log(fieldKeys);
  fieldKeys.forEach((key, index) => result[key] = fieldValues[index]);
  console.log(result);
//output: {/firstValue: "First Value", /secondValue: "Second Value", /thirdValue: "Third Value"}


```
Hope this helps if you have this kind of usecase.

Cheers !!!
Scala+Stellar #6
Published: 2020-07-19 07:02:25

🔙 Last Week

_Current SDK_

Work is progressing well on SEP-010 for web authentication. `stellar.sdk.auth.AuthChallenger` can generate a valid `Challenge` for any  account id and convert it to/from JSON. 

```scala
val serverKey = KeyPair.random
val authChallenger = new AuthChallenger(serverKey, PublicNetwork)
val challenge = authChallenger.challenge(KeyPair.random.toAccountId)
println(challenge.toJson)

{
  "transaction":"AAAAAgAAAABKcLCRa6Jesv...0Aw==",
  "network_passphrase":"Public Global Stellar Network ; September 2015"
}
```
(Here's the [generated challenge transaction](https://laboratory.stellar.org/#xdr-viewer?input=AAAAAgAAAABKcLCRa6JesvuJeLH5%2BCPYzpgkL3xe8st874Hkm1Z%2FRAAAAGQAAAAAAAAAAAAAAAEAAAAAXxPuxQAAAABfE%2FJOAAAAAAAAAAEAAAABAAAAAEjhvjr8vO93FFe0KiqJ9Cggdd7qxwQ7diWACqsc6escAAAACgAAAARhdXRoAAAAAQAAADBc%2B%2Fbp6Weszv86uxslnNFKNFX3oPNq2SqUQVMBC7gSXeVO%2Fj5%2B6IaJd6q%2BP6mrt%2F0AAAAAAAAAAZtWf0QAAABAF0gwMf29IjnUuwUZbLhRfwJIUtDAq5ig01yaTq9sRN%2F%2FUPdQ%2F7tpxHN3JhDaJkvk7NiweXuf8t1Nml%2BlCPh0Aw%3D%3D&type=TransactionEnvelope&network=public))

Next step is to validate the response provided by a client. I'm not yet certain if the SDK will provide the resulting JWT, or if that is best handled by the web framework being employed. I suspect the latter. We'll see!


🍕 Planned (Jun-Aug)

~~SEP-007 - URI Scheme to Facilitate Delegated Signing~~
SEP-010 - Stellar Web Authentication
Ongoing SDK rebuild effort.
Number.range; Stage-1 proposal
Tags: javascript
Published: 2020-07-19 05:55:34

`Number.range()` [proposal](https://tc39.es/proposal-Number.range/) for ECMAScript in currently on `stage-1` and if it makes to `stage-4`(I strongly hope it will) one day we would be able to use `Number.range()` and `BigInt.range` in Javascript.

Currently in JavaScript, if we were to be implement `range` we would:

```js
const range = (start, end) => [...Array(end - start + 1)].map((_, indx) => start + indx);
```

Or use generators, [many other ways](https://stackoverflow.com/questions/3895478/does-javascript-have-a-method-like-range-to-generate-a-range-within-the-supp) or ended up libs like lodash, ramda or likes.

With this proposal we could do something like:

```js
[...Number.range(1, 100, 2)] // odd number from 1 to 99
```

```js
[...Number.range(0, 5, { step: 1.75 })];
//[0, 1.75, 3.5]
```

```js
[...Number.range(5, -6, -1)]
(11) [5, 4, 3, 2, 1, 0, -1, -2, -3, -4, -5]
```

So, it is basically: `Number.range(start, end, option)`

We can also use it with the iterator helper proposal.

```js
Number.range(0, Infinity)
    .take(10)
    .filter(x => !(x % 2))
    .toArray();

// [0, 2, 4, 6, 8]
```

Similarly with `BigInt.range`

```js
[...BigInt.range(-2n, 3n)]
// [-2n, -1n, 0n, 1n, 2n]
```

Hope you liked this proposal by Jack Works, feel free to provide your [feedback](https://github.com/tc39/proposal-Number.range/issues) as this on Stage-1 as of today.
Responsive Testimonial Cards UI Design using HTML and CSS only
Tags: css, beginners, tutorial, design
Published: 2020-07-19 06:55:18

{% youtube VhgXRNLbGVY %}

In this Tutorial, we'll build Responsive Testimonial Cards Design using HTML and CSS only. This Project-based Tutorial is suitable for all especially Beginners.

🧠 Concepts covered in this video:
 - Semantic HTML 5
 - Modern Web Design
 - CSS Flexbox
 - Transforms

[**SUBSCRIBE**](https://www.youtube.com/channel/UCBF2LIwr2Odb3-pRnNBRegA?sub_confirmation=1) our [**Youtube channel**](https://www.youtube.com/channel/UCBF2LIwr2Odb3-pRnNBRegA) if you want to get notified for more real-world **project-based tutorials**

Share this [video](https://youtu.be/VhgXRNLbGVY) with a friend

Let’s connect:
[Instagram](https://www.instagram.com/codeleague7)
[Twitter](https://www.twitter.com/codeleague7)
What is Docker? Explained!
Tags: docker, tutorial, webdev, codenewbie
Published: 2020-07-19 06:48:43

{% youtube IxU8ew7v8a0 %}
In this video, let's understand what is Docker and why we need docker?

Follow on
Github: https://github.com/codingx01
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/

Leave any questions in the comments section and don't forget to subscribe to be notified of new content! :)
https://www.youtube.com/c/codingx?sub_confirmation=1
Flutter: Scroll Content on Keypad appears
Tags: flutter, textfield, scrolling, keypad
Published: 2020-07-19 06:43:43

In the beginning for my Flutter journey, I struggled with scrolling the UI when Keypad appears on screen. Later I found out that it is pretty simple enough, I just have to use one single widget.

    SingleChildScrollView()

Below is entire gist code 

{% gist https://gist.github.com/momin96/b09b8fa45e7a0bc473113cae0392d789 %}


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3i3tetzd29cdhc329xvg.gif)
Responding to Crisis: Web Performance Style
Tags: image, performance
Published: 2020-08-04 11:38:08

---
title: Responding to Crisis: Web Performance Style
published: true
date: 2020-07-19 06:41:47 UTC
tags: image,Performance
canonical_url: https://dougsillars.com/2020/07/19/responding-to-crisis-web-performance-style/
---

When a crisis hits, as humans we feel an obligation to respond.  Whether we "stand with" those affected, or actually can aid those affected in some way - there is an innate desire to reach out and express our solidarity or willingness to help out in the face of a disaster. In 2020 we have … [Continue reading Responding to Crisis: Web Performance Style](https://dougsillars.com/2020/07/19/responding-to-crisis-web-performance-style/)
YouTube Video | CSS Crash Course - 2
Tags: css, webdev, showdev, youtube
Published: 2020-07-19 06:34:48

Welcome to another beginners course specially targeted at people, who want to start with web-development. You should first learn about HTML, before moving to CSS. **CSS** is known as **C**ascading **S**tyle **S**heets and is used to style websites.

Here is the second part of the series.

{% youtube GV-wghRqWu0 %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
Event Capturing
Tags: javascript, html, codenewbie, beginners
Published: 2020-07-19 06:27:46


Event capturing is the opposite of Event bubbling. In the case of event bubbling, events bubble up from the element parent and then its ancestors.

In the case of event capturing, it starts from the top, going down the DOM structure until it reaches the target element. The target element is common to bubbling and capturing. Capturing ends at target, and bubbling starts at target.

Event capturing is rarely used. To enable event capturing, we can pass the third parameter to `addEventListener`.

Example:

```javascript
const myButton = document.querySelector(".btn-primary");

myButton.addEventListener("click", function() {
    console.log("The button was clicked");
}, { capture : true });
```

The third parameter set to true enables the capturing phase. Now when an event happens, it starts at the top, trickles down to the target element, and eventually bubbles up.

The third parameter does not need to be an object. It can be a boolean `true`.

```javascript
myButton.addEventListener("click", function() {
    console.log("The button was clicked");
}, true);
```

To summarize, DOM Events have three phases:

1. Capturing
2. Target
3. Bubbling

We can determine the phase we are in by using `event.eventPhase` or the event handler.

🚨If `addEventListener` used `true` as the third parameter for event capturing, we mention the same phase in `removeEventListener` to remove the handler correctly.