teleren/devto huggingface dataset:
Event Delegation with JavaScript (In Simple Terms)
Tags: javascript, events, vanillajs
Published: 2020-06-01 15:15:57

---
title: "Event Delegation with JavaScript (In Simple Terms)"
published: true
description: "Event Delegation with JavaScript"
tags: ['javascript', 'events', 'vanillajs']
---

**Event Delegation** can be said to be a way of adding event listeners where you add a single event handler to a parent element in order to avoid having to add event handlers to multiple child elements.

This is particularly useful when we are dealing with elements that are dynamically added to the DOM, i.e they are not present when the page is initially loaded.

I recently worked on a project where I had to add list items to a page from a script, and each item needed some interaction, after trying to just target each list item unsuccessfully I decided to make a research and then I saw event delegation (mind you, I have come across this in a course before, but it didn't stick).

Anyways i started playing around with the concept and eventually got a hang of the terms and methodology and so I want to put it into writing here.

Using the below example: I have to access `<li>` tags in a `<ul>` tag with JavaScript and each `<li>` needs an event listener for the'click', event.
What I did was add the event listener to the `<ul>`

So: 
``` Javascript
ul.addEventListener('click', (e) => {
  console.log(e.target)
})
```

What this does is:
1. The event listener is added to the ul element.
2. An event parameter is passed in `(e)`
3. Using the `e` parameter we can now access the target element (i.e the exact element being clicked in this case using e.target.
4. When each `li` is clicked we get different values for e.target, this is to show that each `li` has it's own event listener now and we can do what we want with them.

I tried to make this as simple enough for beginners like me so I really hope it is understandable.

`
Swift: How to get file size using FileManager + formatting
Tags: swift, ios
Published: 2020-06-01 16:20:23

If you need to get file size programmatically in Swift using the file's URL then it is just a matter of a few lines of code. Let's see how. All we need is an URL for the file in question.

## Getting file size with FileManager

We are going to use method `attributesOfItem` available on the `FileManager`. As the naming suggests this will return attributes for item. In our case a file. We need to supply a path to the file which we can get from the URL.

```swift
if let fileAttributes = try? FileManager.default.attributesOfItem(atPath: fileURL.path) {
}
```

This method can throw so we are using `try?` to safely get the attributes or `nil` in case of an issue. In this case that would most likely be incorrect path or for some reason unreadable file.

`fileAttributes` is a dictionary and we can get size like so:

```swift
if let bytes = fileAttributes[.size] as? Int64 {
}
```

The whole thing is in bytes meaning it is not very human-readable number. 

### Extension

We can also create handy extension to abstract away all this code. 
Feel free to use it in your project 🙂

```swift
extension FileManager {
	func sizeOfFile(atPath path: String) -> Int64? {
	        guard let attrs = try? attributesOfItem(atPath: path) else {
	            return nil
	        }
	        
	        return attrs[.size] as? Int64
	}
}
```

It depends whether you need to use file size internally (to maybe estimate upload time etc) or if you want to present the result to the user.

In the latter case do not display number of bytes but instead convert it to readable number.

## Presenting file size to the user with ByteCountFormatter

Swift has really cool and useful class called `ByteCountFormatter` which can format byte count to readable string.

Let's use it to format our file size.

#### ByteCountFormatter usage
```swift
let bcf = ByteCountFormatter()
bcf.allowedUnits = [.useMB]
bcf.countStyle = .file
let string = bcf.string(fromByteCount: bytes)
```

We first create instance, then set `allowedUnits` in this case to only megabytes because we are expecting files bigger than 1 MB and smaller than 1 GB and set `countStyle` to `.file`.

Then it is just a matter of getting the resulting string. `ByteCountFormatter` will automatically append unit (in this case "MB") so we don't have to do any post-formatting. 👏

The result will be something like "24,4 MB" with either "," or "." as a separator depending on the user's locale settings.

For frequent usage I would recommend creating something like a static instance to avoid creating instances over and over again and have centralized configuration.

```swift
private let fileByteCountFormatter: ByteCountFormatter = {
        let bcf = ByteCountFormatter()
        bcf.allowedUnits = [.useMB]
        bcf.countStyle = .file
        return bcf
}()
```

And that is it!

_Thanks for reading!_
Hello Hello!
Tags: beginners, javascript, css, webdev
Published: 2021-09-22 01:09:54

#Hi everybody!

![Aidan's Selfie](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cae5e1vvkkc4uzt1y1bf.jpg)
My name is Aidan, and I'm a Software boot camp student at Flatiron School. I'm here to keep everybody in the loop as I go through my coding journey, and to let you know more about me each and every day as I make this life changing experience happen. 

###Here's a bit of information about me:###

- I'm from Minnesota, USA but I recently moved down to Fort Worth, Texas in order to pursue software engineering and be closer to my friends. It's WAY too hot down here, but I'll get used to it.

- I have a 12 year old pup named Mousseboy. He's deaf and a bit grouchy, but he likes to sleep near the desk and watch as I plug away on my coding challenges and projects. I'll make sure to keep everybody updated on him too. 
![Mousseboy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/meig9qtaprhbdftnsq1i.JPG)

- Some of my hobbies include: fitness, playing the harp, video games, and cleaning house (I LOVE TO CLEAN).

Since I'm here to keep you all updated on my coding journey, I want to share a small little To-do list that I put together. That can be found here: [To-do list](https://aidanmargo.github.io/Aidan-s-To-do-List/)
This list allows you to add different items to your list, where they'll all be cataloged underneath. from there, you can select them, delete them, and more along with some nice basic styling and CSS animations to spruce it up a bit. 

Thanks for reading and I hope to get to know some of you as I progress in this amazing part of my life!
WhatsApp Contact Online Monitoring Tool
Tags: javascript, Extension, WhatsApp, python
Published: 2020-06-02 05:27:13



 <h2 align="center"><a href="https://github.com/rizwansoaib/whatsapp-monitor/">Github WhatsApp Monitor</a></h2>


<p align="center">


<img src="https://user-images.githubusercontent.com/29729380/78868276-3ef64f00-7a60-11ea-8231-9cf08908cdf6.png" >


  
</p>







<h4 align="center" >When your crush 💕 be online 🤳 on Whatsapp 👀  get notification 🔔 in your Desktop 🖥️ and  cross platform notification without any installed app in Smartphone 📱 and more </h4>

<h2 align="center" > Features </h2>
 <ul>
 <li>Play Sound 🔉 When Contact online</li >
  <li>Online History 📜 Download in CSV</li >
 <li>Desktop Notification 🔔</li >
 <li>Cross Platform Notification 📲 💻  e.g. Android,iOS,iPAD,Macbook,Linux,Windows (No need Install App)</li >
 <li>Monitor Without Save Number 🔢 in Your WhatsApp</li >
  <li>Multiple Contacts 👪 Tracking with Mobile Number</li >
 <li>Message Bomber 💣</li >
</ul>
 

  <h4  align="center">
 <a href="https://addons.mozilla.org/en-US/firefox/addon/whatsapp-online-monitor/"><img src="https://user-images.githubusercontent.com/29729380/78387807-8cf0fa00-75fd-11ea-9ef4-b49550b192ca.png" ></a><br> 
 <a href="https://addons.mozilla.org/en-US/firefox/addon/whatsapp-online-monitor/">Install Firefox Add on</a>
</h4>


![](DeployAWS/noti.gif)

<h3 align="center"> Extension 🌐 </h3>
<h4 align="center"> Play Sound 🔉 when Contact become Online 🤳  and Web  Push Notification 📳 and  Cross Platform Notification e.g. Android(No need to Install any App)  Download 📥 History 📜  of Online in CSV Format</h4>

[![video3](https://user-images.githubusercontent.com/29729380/75627593-7ff47b80-5bf7-11ea-9f20-4ed6b81d4d1d.png)
](https://youtu.be/5xlrjh3poqs)


 

<h2 align="center"> Notification 🔕 </h2>
 
   <h4 align="center">Extension and Windows App (Cross Platform) 📳</h4>
   
![mobile](https://user-images.githubusercontent.com/29729380/74177733-5384b980-4c60-11ea-8b86-a40267588194.png)
  
   <h4 align="center">Extension (Windows) 🖥️</h4>
 
 ![Windows](https://user-images.githubusercontent.com/29729380/74180771-115e7680-4c66-11ea-9939-b9eca7e4b646.png)
  

<h5 align="center"> If you 👍  the project, support us by 🌟 Thank You 🙏 </h5>
Tired of Bootstrap? Try Metrojs. 
Tags: css, javascript, opensource, beginners
Published: 2020-06-03 06:12:35

I personally like metrojs. Wonderfully crafted in Ukraine.

**So what is it?**

Are you tired of Bootstrap? Get started with Metro 4, the popular framework for building responsive, mobile-first sites in Metro style, with the Metro CDN and a template starter page.


Sleek, intuitive, and powerful front-end framework for faster and easier web development. Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style.

Quick start
Looking to quickly add Metro 4 to your project? Use Metro CDN, provided for free by the folks at KeyCDN.

`<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4.3.2/css/metro-all.min.css">`

*Some Examples:*

Official examples visit [here](https://metroui.org.ua/examples.html)

*A desktop UI : Yes a desktop UI by Metrojs*

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/uoit4q5hpmes3q0ew9l5.png)

* A Datatable UI: Supereasy by Metro:*

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/beg6hwilqx5zmgbg8jyq.png)

* Admin Panel: in just an hour* :)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/b430up8lslaoy6i5rlju.jpg)

Here is Github Resporitory:

{% github olton/Metro-UI-CSS %}



Please also check my previous posts regarding creating your cloud service like digital ocean or google cloud. [Part 1](https://dev.to/manishfoodtechs/creating-your-cloud-infrastructure-like-google-cloud-and-digital-ocean-from-scratch-part-1-3gnm) and  [Part-2](https://dev.to/manishfoodtechs/creating-your-cloud-infrastructure-like-google-cloud-and-digital-ocean-from-scratch-part-2-5f7f) and [Part-3](https://dev.to/manishfoodtechs/creating-your-cloud-infrastructure-like-google-cloud-and-digital-ocean-from-scratch-part-3-coding-stuff-20eo) . Also most important listening your VMs on external IPs [here -4](https://dev.to/manishfoodtechs/networking-is-easy-connecting-multiple-vms-servers-containers-devices-on-single-external-ip-in-one-command-139a)

In Part-3 we have also seen how to install opennebula. Opennebula is an alternative to openstack/ cloudstack.


I hope you people like the above article and learned something.

You are most welcome to join my team [ form for joining ](https://forms.gle/pSCALuEWHus3pg9F6).


Contact email: Manishfoodtechs@gmail.com. 

If you have any problem, our team is also engaged in professional consultancy and delivery.

Don't forget to Follow, like or tag me :).
Custom tooltip generator on Vue.js

Tags: vue, javascript, webdev, showdev
Published: 2020-06-02 12:01:29

Hey devs 👋

I created a tool to generate custom tooltips.
This is my first independent project 👩‍💻. 
It was a great experience 😅
I hope this will be helpful to you.

I will be glad to any feedback.

Demo: https://viashchuk.github.io/tooltip-generator
Repo: https://github.com/viashchuk/tooltip-generator

Thank you 🦄
⚡⚡⚡ FAST MAKING NOTEBOOK ⚡⚡⚡
Tags: game, indiedev, gamedev, dev
Published: 2020-06-03 11:13:25

⚡⚡⚡ https://youtu.be/YB59DjffPFI ⚡⚡⚡

Hi, these are the materials from the development of the game PAPER TANKS. In this video we showed the complete process of creating a model for the game.

Support our development :)
https://store.steampowered.com/app/1213020/PAPER_TANKS/
https://twitter.com/PAPERTANKS2
From 0 to Dev Team Of the Year
Tags: devops, techtalks, webdev
Published: 2020-06-03 12:48:28

10.06.2020 19:00 PM EEST This is an online event. Register and few hours prior to the event you'll receive an attendance link.

About this Event
*The event will be in English.

This event is part of the DEV.BG IT Team Leads user group.

Program:

This talk is to share the story about how we started from 2 bare desks and grew to a winning team of 40 people for 18 months.

>>> How it starts - what is that you need to be on the right path for a successful team.

>>> The stronger you hire the better your team will be.

>>> There is no recipe for success - there is a vision and hard work.

>>> Have fun but never forget about the business.

>>> Q&A part;

Speaker: Ivaylo Hristov

>>> Ivo started his career 11 years ago as a network engineer, 8 years ago moved to Software Development and loves it ever since.

>>> He is one of the first two people to start NewsUK Sofia office.

>>> He hired 40% of the team members and is now leading two of the back-end JS teams there.

>>> His teams are taking care of two of the core back-end systems in the company serving millions of GraphQL queries per day.

>>> Ivo’s interests extend in technology, being a leader and taking care of his people.

>>> NewsUK is the company behind big media brands such as The Times, The Sun, Virgin radio, talkSPORT and many others. As such is striving to use cutting edge technology such as GraphQL, React, TypeScript, Jest, AWS, Docker, K8s, CircleCi, Github

Supported by: Ontotext & Uber & Ocado Technology

Ontotext is a global developer of semantic artificial intelligence based technologies that apply to the management and use of data sets and textual analysis.

Uber develops the largest technology platform that enables the transportation of people, cargo, shipments and food. It is one of the most advanced technologies for autonomous vehicles. The company is historically one of the fastest growing technology organizations in the world.

Ocado Technology develops world-class systems and solutions in the fields of robotics, machine learning, simulation, forecasting and routing, real-time control and more.
https://www.eventbrite.com/e/webinar-it-tl-from-0-to-dev-team-of-the-year-tickets-103219803210?utm_source=ref&utm_medium=organic&utm_content=devto&utm_campaign=ITTL

This is an online event. Register and few hours prior to the event you’ll receive an attendance link.

User group: IT Team Leads

Organized by DEV.BG
ranked update & 3 new extreme challenges
Tags: javascript, computerscience
Published: 2020-06-03 13:55:57

I've made a subtle improvement to our ranked mode regarding answer validation. In the past, when entering wrong answers, all input boxes were highlighted as wrong in red. Even if they were potentially correct answers. I say "potentially" because some challenges can have multiple correct answers. Our validation mechanism evaluates the code with the provided answers on the server, the final answer determines whether your choice(s) are right or wrong. To make matters more clear, upon validating wrong answers, only the validation button will be highlighted as wrong in red:

![codr changed wrong answer demo](https://dev-to-uploads.s3.amazonaws.com/i/fk8qt9qnkvkjdgerwinb.png)

Three new challenges of extreme difficulty have been added to codr's ranked mode. Two of these are related to interesting optimization problems, the third one is simple yet challenging. Below you can find a demo of the latter challenge, the key to solving it is to find a pattern, because the actual problem has a much larger value for `i`.

```JS
let i = 81;
let A = 0;
while (i-- > 0)
  if (((i / 9) >> 0) % 3 !== (i % 9) % 3)
    ++A
// A = ?
```

As of today we have 27 easy, 40 medium, 25 hard and 8 extreme challenges in ranked mode. Do note that these are merely templates, each time you play a unique problem is generated for you from this set. The number of combinations range in the thousands.
Be a software developer with an associate's degree?
Tags: discuss, career
Published: 2020-06-04 00:13:15

While I'm still in high school, I'm looking ahead as to what I'm going to to.

Because of the TN Promise program, and some scholarships, I can get an associate's degree for just about free. Local community colleges offer an AAS Programming degree. Has anyone gone this route? How did it go? Would you recommend it? Also, if you're the one hiring, would you consider someone with an AAS?
Beginner Python tips Day - 01 Enumerate
Tags: python, beginners, codenewbie, tips
Published: 2020-06-04 03:49:47

```python
# Day 01 - Enumerate
# Provides counter that matches
# the number of items in the list

my_list = ['hello', 'world', '!']

# Without enumerate
for index in range(len(my_list)):
    print(index, my_list[index])
'''
Prints
0 hello
1 world
2 !
'''

# With enumerate
for counter, value in enumerate(my_list):
    print(counter, value)
'''
Prints
0 hello
1 world
2 !
'''

# Don't confuse it with index
# because, the counter can start from any integer
for counter, value in enumerate(my_list, 2):
    print(counter, value)
'''
Prints
2 hello
3 world
4 !
'''
```
I have created this platform for programmers and others.
Tags: startup, python, react, webdev
Published: 2020-06-04 04:49:24

Hii, I have created this website www.sharely.in  for saving and sharing contents. Just take a look at it. It helps programmers, Youtubers, Online instructors to save and share their contents with their users, Fans, colleague, Subscribers or for personal bookmark.
Please let me know your comments.
Build a PWA learning JS DOM - Video tutorial series
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-06-10 15:00:53

> This is a YouTube series on building a Progressive Web App which also refreshes your JavaScript DOM concepts.

In the current world of technologies, one of the technologies that is currently booming is the PWA. It was introduced by Google in 2015 and since then plenty of websites have adopted this technology. And the result obtained through this are also marvelous.

## What are Progressive Web Apps?

Progressive Web Apps ( PWA ) lets you create websites with Native Apps like experience and features. These features include:
- A mobile app-like experience
- Offline capabilities
- Push Notifications
- Background Sync
and more
All of these can be created with the same technology that you use to build your websites. Yes, JavaScript I mean.

PWA stands for **Progressive Web Apps**. PWA is a web app, which can be displayed in the form of a regular App on a phone ( platform-independent) and also works like a regular responsive website on the internet. It is like building a usual website, using the same technologies that you would use, but giving that extra functionalities and advantages of Progressive Web Apps. It is light, fast and secure.

## Prerequisites

1. *HTML :* [HTML Revision](https://www.youtube.com/watch?v=-6l6Hl9h7Mo&list=PLQTwHWAmj18Yn7KKUtyFyj5OUydnomeyf&index=21)
2. *CSS :* [CSS YouTube Playlist](https://www.youtube.com/playlist?list=PLQTwHWAmj18bYQrGQBhzaxZi9gbe5vvmL) 
[My Udemy Paid Course on CSS](https://udemy.com/web-dev-css)
3. *JavaScript ES6 :* [JavaScript ES6 YouTube Playlist](https://www.youtube.com/playlist?list=PLQTwHWAmj18Y2dfj-8PkIogD9hrBzp4M9)
[The Complete JavaScript ES6 Course](https://udemy.com/javascript-tharunshiv)
4. *JavaScript DOM :* [Free JavaScript DOM Course](https://udemy.com/web-dev-dom)

## The project:

http://bit.ly/stick-it-notes

## The YouTube Project Playlist

**The Playlist:** [The link to the PlayList](https://www.youtube.com/playlist?list=PLQTwHWAmj18ae8PvWbW7kJ9KCO-yCg1u8)

**Video One:**
{% youtube Vg7sijOj2E0 %}

**Video Two:**
{% youtube mGyMu0PJSqc %}

**Video Three:**
{% youtube -ja0XiVbsVM %}

**Video Four:**
{% youtube LTeWOmbeICw %}

**Video Five:**
{% youtube cKk6yDK1dEQ %}

**Video Six:**
{% youtube Kklrnc6EXZg %}

**Video Seven:**
{% youtube u2f8s17Aip4 %}

**Video Eight:**
{% youtube 0GOsyqjFZA8 %}

**Video Nine:**
{% youtube Hj67Zpj__KU %}

Hope this helps. 😊 
{% user developertharun %}
GSoC 2020: Dhall Documentation Generator
Tags: haskell, gsoc, dhall
Published: 2020-06-10 23:30:49

Hi everyone!

This is my very first post here and I'd like to start with something really great that happened recently.

I've submitted a proposal for a GSoC and got accepted! My concrete proposal summary can be found [here](https://summerofcode.withgoogle.com/projects/#5366051979657216). In summary, I'm going to develop a Dhall Documentation Generator as this post title suggests. The milestones of this project are:

* Generate a simple HTML folder with the documentation of a dhall package;
* Render the dhall source code as haddock (the documentation generator for haskell) does;
* Jump to definition on both documentation and source code;
* Type on hover on both documentation and source code

I'll try to write several posts each time I accomplish a milestone of a project, so I might end up writing at least 4 posts. This post will contain a "table of contents" for all the development of the project.

If you don't know what the `dhall` configuration language is, a good place to learn is its [website](https://dhall-lang.org)
Customize GitHub’s code font
Tags: github, fonts, styling
Published: 2020-06-11 01:31:13

---
title: Customize GitHub’s code font
published: true
date: 2020-05-17 00:00:00 UTC
tags: github, fonts, styling
canonical_url: https://alexsaveau.dev/blog/tips/github/2020/05/17/customize-github-code-font/
---

It occurred to me yesterday that I’ve spent way too much time nitpicking over my IDE’s font, but then come time for code reviews… not a ligature in sight. Here’s a quick guide to change that.

## Prerequisites

Install [Refined GitHub](https://github.com/sindresorhus/refined-github#install). It’s probably a sin at this point to not use that extension. 😉

## Change your font

In Refined GitHub’s settings (`chrome://extensions/?options=hlepfoohegkhhmjieoechaddaejaokhf`), paste in this custom CSS:

```css
/*
The wght@450 part is the font weight.
If you want less or more boldness, decrease or increase this number.
*/
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@450&display=swap");

pre, code, .blob-code, .blob-code-marker {
  font-family: 'Fira Code', monospace !important;
}
```

I personally love Fira Code, but you can change this to whatever you want as long as the font is hosted somewhere.

| Before | After |
| --- | --- |
| [![Default GitHub font](https://alexsaveau.dev/assets/general/default-github-code-font.webp)](https://alexsaveau.dev/assets/general/default-github-code-font.webp) | [![Custom GitHub code font](https://alexsaveau.dev/assets/general/custom-github-code-font.webp)](https://alexsaveau.dev/assets/general/custom-github-code-font.webp) |

* * *

That’s it! Enjoy.
Devops Là Gì Và Tất Cả Những Kiến Thức Cần Biết
Published: 2020-06-11 07:54:10

Chu trình phát triển phần mềm gồm có hai giai đoạn phát triển sản phẩm và vận hành sản phẩm. Thông thường, hai giai đoạn này sẽ không liên quan đến nhau. Nhưng trước nhu cầu cải tiến sản phẩm và sự phát triển của thị trường đòi hỏi cần có sự liên kết. Devops chính là sự kết nối giữa hai quá trình đóng vai trò vô cùng quan trọng. Vậy tìm hiểu devops là gì là rất cần thiết.
http://laptrinhvacongnghe.com/devops-la-gi/