teleren/devto huggingface dataset:
D3 Building Blocks #4: SVG Groups
Tags: d3, javascript, svg, codenewbie
Published: 2020-12-04 17:05:41

Now that we can draw individual elements on the SVG, we can start to group them and apply attributes and styling to the entire group at once.

# Groups
Imagine you are creating a document that has multiple drawings, with text associated with each drawing. As you start to format attributes and move items around, it would be helpful to group each drawing with its associated text, and apply styling to the collection all at once. This is what groups allow us to in our SVGs. They act a as a container that holds other SVG elements together.

## Setting Up A Group to Apply Common Attributes
To create a group, simply use a `<g>` tag to enclose all of the elements that you would like to group together. Then, assign attributes to the group, rather than to the individual elements.

### Example 1: Groups in HTML
```html
<svg>
    <g fill="red" stroke="orange" stroke-width="3px">
      <circle cx="20" cy="30" r="15"></circle>
      <rect x="10" y="70" width="20" height="20"></rect>
    </g>

    <g fill="blue" stroke="green" stroke-width="5px">
      <circle cx="80" cy="30" r="15"></circle>
      <rect x="70" y="70" width="20" height="20"></rect>
    </g>
  </svg>
```
In the example above, we have set up two groups, which each include a circle and a rectangle element. Within each group, the circle and the rectangle have the same styling, since we applied the styling to the group rather than to the individual elements.

### Example 2: Groups in D3
```javascript
d3.select("svg")
  .append("g")
  .attr("id", "red");

d3.select("g#red")
  .append("circle")
  .attr("cx", 20)
  .attr("cy", 30)
  .attr("r", 15);

d3.select("g#red")
  .append("rect")
  .attr("x", 10)
  .attr("y", 70)
  .attr("width", 20)
  .attr("height", 20);

d3.select("g#red")
  .attr("fill", "red")
  .attr("stroke", "orange")
  .attr("stroke-width", "3px");


d3.select("svg")
  .append("g")
  .attr("id", "blue");

d3.select("g#blue")
  .append("circle")
  .attr("cx", 80)
  .attr("cy", 30)
  .attr("r", 15);

d3.select("g#blue")
  .append("rect")
  .attr("x", 70)
  .attr("y", 70)
  .attr("width", 20)
  .attr("height", 20);

d3.select("g#blue")
  .attr("fill", "blue")
  .attr("stroke", "green")
  .attr("stroke-width", "5px");
```
In the example above, we have created the same drawing including two groups, a red group and a blue group. Note how we can assign each group a different id in order to style each group individually. In this example, we have applied styling using the D3 attribute method, but this styling could also be applied using CSS.

Read the [SVG documentation](https://developer.mozilla.org/en-US/docs/Web/SVG) to learn more about the Scalable Vector Graphics group element.

- [SVG Group Element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g)
What was your win this week?
Tags: discuss, weeklyretro
Published: 2020-12-04 16:58:58

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Another week is coming to a close!


**Looking back on your week — what was something you're proud of?**

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Landing a new job
- Getting some exercise... or whatever else might spark joy ❤️

---

I hope you all have a great weekend!

![Hip Hop Friday](https://media.giphy.com/media/TfizjuBxsXFuPNb4Ch/giphy.gif)
A journey into the world of codes <!DOCTYPE html> 
Tags: webdev, javascript, html, css
Published: 2020-12-04 16:55:24

It's a sunny day in the heartbeat of Africa, Lagos, Nigeria. My name is Bayode, a UI/UX, Brand Identity designer and most importantly, aspiring to be a web developer. I'm here to share my journey into the world of codes(HTML,CSS, Bootstraps, JavaScript and so on)

My experience so far, considering where I was coming from is nothing but tasking. I see why most developers would get mad at product design guys, I can relate with how much of a work it could be developing just a landing page of a website. If you won't get bored reading my post, I promise to avoid being too verbose and to be succinct as possible, so without further ado, lets get started.

Why do I wanna write in codes? I decided to learn codes because, in this side of the world, being just a product designer isn't enough, job posters needed more. For instance, you would see a job post for UI/UX and the job description will entails knowing how to write in JavaScript with more than five years experience...sad right? so this is one of the reasons driving me to become a full web developer and yeah, who do not want to earn six figures in dollars(winks).

How has writing in codes being so far? To be honest I would say it's a whole different experience compare to my designing career, where I don't need to know some syntax, where I only need my creativity to come to play, so I would say this, if you have plan to do this, be intentional about it, It will help a lot. With all sincerity I enjoyed when the class was all about HTML and CSS, reason being that I could relate with some terms from the end of the product designers. But it has been a roller-coaster since the beginning of this JavaScript class. By the way, I'm not learning on my own, I'm attending a bootcamp here in Lagos but trust me, you have buck of the learning to do on your own.


![surface-n3g2ZbQYo3o-unsplash (1)](https://dev-to-uploads.s3.amazonaws.com/i/2o3js2b46j92vukrzfbg.jpg)

Although the journey seems tough already but quitting is not an option for me, so you will get to read more of my journey articles subsequently. 

Finally, I'm elated to join this community of more than half a million awesome Devs and I would like to make mentors, friends and people that we share the same ideas. So, feel free to invade my space.

http://www.instagram.com/bayothedeveloper
http://www.twitter.com/bayothedesigner
http://www.behance.com/bayodeog
https://www.youtube.com/channel/UCMx0C8e5xH2jKMzC5jlXAJA
Handling Files in Python 🐍
Tags: python, django, webdev, beginners
Published: 2020-12-04 16:50:24

This post was originally posted [here](https://bit.ly/handling-files-in-python), you can eat the complete post here.


File handling is one of the most important part of a programmer's life let him/her be a data scientist, web developer or even a cyber security expert. So I have decided to write this post all about handling files in python. 



To open files and bring them in python we have the following syntax,

```python
file = `open(file_name, mode)`
```

To open a file in read mode we use the following syntax,  . The first argument is obviously the `file_name` and the second one is a bit more interesting in  it is the mode in which you want to open the file and it determines whether we can `read`,`append`, `write` , `open in binary` and so on we will see it down.



For the entirety of this blog post we are going to assume that our python file and our text file which we will be using to perform operations upon are located in the same folder, and the content of the text file is as follows, I have not written it just copied it from a random text generator online as I don't like lorem ipsum that much.



`readme.txt`

```text
He found himself holding onto the worst type. 
It was the type of secret that could gnaw away at your insides if you didn't tell someone about it, but it could end up getting you killed if you did.
```



### Reading Files

Reading files in python is damn simple, let's understand it by an example, in this example we will be reading our text file readme.txt` and is located in the same folder as our python files is located.

To open file in read mode we pass `'r'`  place of mode in the `open` file syntax, to read the the file don't worry about these modes I will provide a list at the end of the post with all of the them along with their functions.  

`main.py`


    file = open('readme.txt', 'r')
    
    if file.mode == 'r':
        fileContent = file.read()
        print(fileContent)


In above code we are opening a file in read mode and then checking whether it is open in read mode and if it is then we are reading the content of file by using `.read()` method in it and then printing it. 

---

Sorry to interrupt you but I want to tell you one thing that I have started a small blog you may continue reading it [here](https://bit.ly/handling-files-in-python) it will help me a lot.
Crafting the ideal line length
Tags: a11y, css, webdev
Published: 2020-12-04 16:48:27

---
title: Crafting the ideal line length
published: true
description: How to achieve the ideal line length using css
tags: a11y, css, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9wluxj9m7p4qc7v3n42p.png
---

Robert Bringhurst, in [The Elements of Typographic Style](https://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881792063/ref=sr_1_1?ie=UTF8&qid=1317888735&sr=8-1), puts a comfortable line-length between 45 and 75 characters. Thanks to the [well-supported css value `ch`](https://caniuse.com/#feat=ch-unit) we can achieve this much more simply than before.

Declaring the `font-size` in `rem` (relative elastic measurements) means that [all of the users who change their font size in the browser](https://nicolas-hoizey.com/2016/03/people-don-t-change-the-default-16px-font-size-in-their-browser.html) will have this change reflected in your website. In addition, using `rem` for other values (such as padding and margins) will adjust these in accordance making for a more fluid and, ultimately, more comfortable experience.

Finally, add to this a generous line-height (leading) to give the user enough negative space to comfortably read the content. These values are declared in `em` (elastic measurements) which means they will take their base value from the font-size of the element they have been applied to (as opposed to the `rem` which takes its base value from the font-size on the `<html>` element). `em` will help with maintenance in the future as values need only be changed in one place instead of two or three - nobody wants a 32px font on an 18px line-height!

```css
p {
  display: block;
  width: 100%;
  max-width: 67ch;
  font-size: 1rem;
  line-height: 1.5em;
}
```

With headings, the principles remain the same though the values change. Headings should be larger than regular body copy to provide visual feedback that this is a delineator - marking the start of a new section of content.

```css
h2 {
  display: block;
  width: 100%;
  font-size: 1.25rem;
  max-width: calc(67ch / 1.25);
  line-height: 1.5em;
}
```

To ensure all of your typographical elements have a nice comfortable space around them, use [Heydon Pickering](http://twitter.com/@heydonworks)'s [Lobotomised Owl Selector](https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/)!

```css
*+* {
  margin-top: 1.5em;
}
```

## Conclusion
For larger blocks of text (think article body copy or legal pages), these settings provide a comfortable experience for the great majority of readers.
Tool of the Week: Typingclub
Tags: productivity, selfimprovement
Published: 2020-12-04 16:33:35

---
title: Tool of the Week: Typingclub
published: true
description: Type faster, code faster
tags: productivity, selfimprovement
cover_image: https://images.unsplash.com/photo-1508780709619-79562169bc64?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80
---

# Introduction
Once a week i want to show you my personal Tool of the Week.
I start this series with [Typingclub](https://www.typingclub.com/).

As a programmer typing on our keyboards is our daily bread and if we can improve our typing speed and accuracy we improve our productivity. For the past years i just typed as i wanted and most of the time with 2-4 fingers. This works but compared with others it is pretty slow. So in the past few weeks i thought about improve my typing by learning touch typing. 

*Whats that?*

# Touch Typing
Its a style of typing. It means that you use all ten fingers and type without using your eyes. Your keyboard will become a part of your body.
This is very useful as you free your mind from a task so your brain can think about the important stuff.

[Typingclub](https://www.typingclub.com/) is a very cool website to start learning it and provides exercises and short informative videos about this topic. You can choose your keyboard style, language etc. and dive into the lectures.

Your progress will be saved (when you logged in) and you can see your typing speed (WPM = Word per Minutes) from last week compared with the current week as well as your accuracy.

# Resources
Other useful sites for learning touch typing are:

- [10fastfingers](https://10fastfingers.com/)
- [keybr](https://www.keybr.com/)

Im using 10fastfingers on a daily basis. Challenge yourself and try to beat your highscore. I started at 15-20 WPM and now im at around 50.

Top typers can score over 200 WPM! But even 150 is hella fast.

# Summary
You are coding with your keyboard every single day.
By improving your typing speed and efficiency you will become more productive and can focus on your task instead of finding the rights keys.
I love to improve myself every single day even if its just a tiny bit!

And as always: develop yourself!
Radicle หนทางใหม่ของ code collaboration
Tags: git, radicle
Published: 2020-12-04 16:33:33

> "FREE YOUR CODE" 
นี่คือประโยคแรกที่เราจะเจอ หลังจากเข้าไปที่เว็บไซต์  [radicle.xyz](https://radicle.xyz) 

เมื่อวันที่ 30 พฤศจิกายน 2020 radicle ได้ทำการปล่อย first beta release แรก หลังจากที่ซุ่มทำมานาน ซึ่งผมคิดว่านี่มันวันแห่งประวัติศาสตร์ชัด ๆ ! 

{% twitter 1333403629961797635 %}

### Radicle คืออะไร?

Radicle เป็น decentralized application สำหรับการแชร์โค้ดนั่นเอง ถ้าใครนึกไม่ออกมันคือเหมือนกับ Github, Gitlab ที่เป็น decentralized นั่นเอง สิ่งที่ radicle ต้องการก็คือต้องการให้ทุกคนสามารถแชร์โค้ดได้ โดยไม่ต้องพึ่งตัวกลางที่เป็น third-party และจะไม่มีใครมาสามารถปิด repository ของเราลงได้ ถ้าเราไม่ยอม (จริง ๆ น่าจะเป็นการแซะถึงเหตุการณ์ที่ youtube-dl โดนปิดบน Github เมื่อไม่นานที่ผ่านมา ถึงทาง Github จะเอากลับมาแล้วก็เถอะ [อ่านเพิ่มเติม](https://www.theverge.com/2020/11/17/21571473/github-youtube-dl-downloader-riaa-copyright-1201-takedown-reinstated#:~:text=The%20Recording%20Industry%20Association%20of,the%20Digital%20Millennium%20Copyright%20Act.))

โดยตัว Radicle ถูกสร้างขึ้นมาโดยใช้ git เหมือนเดิม ทำให้คนที่เคยใช้ git มาแล้วไม่จำเป็นต้องเปลี่ยน workflow อะไร ยังคง commit, push, merge, branch ได้เหมือนเดิม

### แล้ว Radicle แชร์โค้ดแบบ peer-to-peer ได้ยังไง?
แทนที่จะเอาโค้ดเนี่ยไปเก็บบน central server เหมือนปกติทั่วไป Radicle ใช้ Radicle Link เป็น protocol ในการทำ peer discovery โดยเครื่องแต่ละเครื่องจะทำหน้าที่เก็บและแชร์โค้ดที่ตัวเองสนใจไว้นั่นเอง

แล้วคนอาจจะคิดว่าอ้าวแล้วแบบนี้โปรเจ็คมันจะไม่หายเรอะ ถ้าพลาดแล้วไม่มีใครเก็บไว้สักคน คำตอบก็คือมันก็ต้องหายนั่นแหละ ถ้าเราเป็นบริษัทล่ะ? อยากจะให้แบบมีที่เก็บโค้ดตัวกลางของบริษัท ที่คนในบริษัทสามารถเห็นโปรเจ็คทั้งหมดได้ทำยังไง เราสามารถตั้ง seed node เองได้ โดย seed node สามารถเซตให้เห็นเฉพาะ peer ได้ด้วย

ถ้าใครอยากลอง วันนี้ก็สามารถเข้าไปที่ [radicle.xyz](https://radicle.xyz) แล้วโหลดมาลองกันได้เลย


อ้างอิง

- Radicle: [radicle.xyz](https://radicle.xyz) 
- Radicle Link: [https://docs.radicle.xyz/docs/what-is-radicle.html](https://docs.radicle.xyz/docs/what-is-radicle.html)
Repost All Your Dev Blogs on Qvault for More Traffic?
Tags: writing, productivity
Published: 2020-12-04 16:32:08

Hey Dev friends! My name's Lane and I'm the founder of [Qvault.io](https://qvault.io). I'm thinking about adding a new feature to the platform that will give all of you wonderful tech writers a great way to get some more visibility for your posts!

I would love your feedback on the idea I'm about to outline, please let me know in the comments and with your upvotes if it's something you'd like to see!

## Quick Overview on Qvault

Qvault.io consists of computer science articles and courses that are targeted towards junior and mid-level developers that are looking to become senior engineers.

## How the new feature works

In your [Qvault account](https://app.qvault.io) you'll be able to add an RSS feed, similar to how the republishing works here on Dev.to. All the posts from the RSS feed will *automatically* be republished on your blog on Qvault (with the canonical links set correctly to help with that sweet SEO juice).

Posts that get the most traffic on the site will be featured on a special section of Qvault's website to help you with more visibility.

tl;dr

I'm thinking of adding a feature that lets you automatically republish your tech posts on Qvault and if your posts do will you will be featured for extra traffic.

Thanks for reading! Please let me know in the comments if you'd be interested.
Iterables & Iterators in JS, Part II - Creating custom iterable/iterator (YouTube tutorial)
Published: 2020-12-04 16:25:48

Hey guys, Mateusz here!

Last week I've posted the [first part](https://www.youtube.com/watch?v=keBYj0Un--k) of my YouTube iterables & iterators series.

This week comes part II, in which we will finally write our own, custom iterable and iterator, which will teach us a lot about how they actually work underneath!

So make some popcorn, sit comfortably and enjoy the video!

{% youtube r-NHOtcgtOY %}
Orange button
Tags: codepen, css, html, javascript
Published: 2020-12-04 16:12:31

<p>
<a href="https://codepen.io/Jonas2007/full/rNLZrWZ" For 
targett="_blank">Click it for better view</a></p>

{% codepen https://codepen.io/Jonas2007/pen/rNLZrWZ %}
Do you have any career regrets? What are they?
Tags: watercooler, discuss, learning
Published: 2020-12-04 16:09:46

Maybe regret is too strong of a word to use. Let's face it, we're all human beings at the end of the day. At some point we all make some mistakes in our careers. But not all mistakes are all bad, in fact it's a great learning opportunity because we knew what went wrong.

For me, I learnt that when the task you're handling is going south, it's better to share the news as early as possible and ask teammates for help instead of wrecking my head trying to figure it out on my own. There's no shame in asking for help. 😀
 
If you had a chance to go back "re-do" it, how would you have done it better/ to avoid it?
Page of my interests
Tags: codepen, blog, css, html
Published: 2020-12-04 16:05:37

<p>For better view:
<a href="https://codepen.io/Jonas2007/full/rNLZKJG" target="_blank">Click it for better view</a>
<a href="https://codepen.io/Jonas2007/debug/rNLZKJG" target="_blank">Click it for better view</a></p>
<b>Or choose to 0.5x view 😉</b>
<b>In mobile I'll recommend 0.25x view 😉 </b>
{% codepen https://codepen.io/Jonas2007/pen/rNLZKJG %}
Follow #adventofcode if you're into that kind of thing
Tags: adventofcode, meta
Published: 2020-12-04 15:50:10

Advent of code is going on, and I just felt like nudging folks towards that DEV tag if you're interested in following along.

{% link https://dev.to/mileswatson/why-you-should-be-doing-advent-of-code-it-s-not-too-late-to-start-3n83 %}

{% tag adventofcode %}

Happy coding ❤️
Advent of Code 2020 Solution Megathread - Day 4: Passport Processing
Tags: adventofcode, challenge
Published: 2020-12-04 15:44:53

---
title: Advent of Code 2020 Solution Megathread - Day 4: Passport Processing
published: true
description: Today, we're blending in with normal non-North Pole people who have actual passports.  By hacking!  Sort of.
series: Advent of Code 2020
tags: adventofcode, challenge
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/aglv22vwe3zp26euz3dl.png
---

Day 4!  I was worried as I was reading the first problem yesterday that I would have to optimize for *any* rational slope.  I'm thankful he decided to take it easier than that for Day 3.

## The Puzzle

In [today’s puzzle](https://adventofcode.com/2020/day/4), we're just trying to get through airport security, which is jam-packed because, obviously, Santa's magic keeps the North Pole COVID-free.  It's classified as a hum-bug.  🥁  Anyways.  The passport scanner is broken and we're doing a good deed by "fixing" it.  And by "fixing," we mean "hacking it to let us through but also mostly fixing it."

Y'all.  We are **THIS** close to validating YAML and I am **here for it.**

## The Leaderboards

As always, this is the spot where I’ll plug any leaderboard codes shared from the community.

```
Ryan's Leaderboard: 224198-25048a19
```

If you want to generate your own leaderboard and signal boost it a little bit, send it to me either in a DEV message or in a comment on one of these posts and I'll add it to the list above.

## Yesterday’s Languages

Updated 03:06PM 12/12/2020 PST.

| Language   | Count |
|------------|-------|
| Python     |     8 |
| JavaScript |     3 |
| Rust       |     2 |
| Haskell    |     2 |
| C#         |     1 |
| Raku       |     1 |
| COBOL      |     1 |
| PHP        |     1 |
| Ruby       |     1 |
| Elixir     |     1 |
| Go         |     1 |
| C          |     1 |

Merry Coding!
How does a React class-based component perform cleanup?
Tags: react, javascript, webdev
Published: 2020-12-04 15:42:05

## Why is it necessary?
When a component is subscribed to an event listener, initializes an interval, or does any other asynchronous task, it uses resources. These resources are used by the component when it is active. 

But, once the component's work is done and it is removed from the DOM, cleanup is needed to free up those resources. All the asynchronous tasks the component had been running, might still continue executing even though the component instance has already been unmounted and destroyed. This might cause memory leaks and result in errors. To plug up these memory leaks, clearing out these tasks is crucial.

## How is this cleanup done?
In React, class-based components have various methods that are invoked during the different stages of a component's lifecycle. Using these lifecycle methods, we can even perform asynchronous tasks. 

Right before a component is unmounted, the `componentWillUnmount()` lifecycle method is invoked. This method is the place for any necessary cleanups. If we have any timers, event listeners, or ongoing network requests, they should be closed or canceled in this lifecycle method.

Here is a simple example of removing an event subscription to free some memory.

![Cleaning up event listener subscription](https://dev-to-uploads.s3.amazonaws.com/i/el4xuzpp6ctssum66s2c.png)

## Wrapping up
Resources occupied by tasks that are no longer needed can slow down the performance of an application significantly. To avoid this, cleanup is necessary. While in a class-based component, we have the `componentWillUnmount()` lifecycle method, this can also be done with Hooks. I will write an article on how to perform cleanup in a React application using Hooks.

If you have any questions or suggestions feel free to leave them in the comments below. 😃
Hacktoberfest Badge
Tags: hacktoberfest, hacktoberfestbadge
Published: 2020-12-04 15:39:17

Yeah!!!. This is My 2nd badge 🙌😆😆 Hacktoberfest Badge
I've just complete the hacktoberfest event in the last october of this year, don't worry for all of you who missed for this event, cause it would conducted every year especially in october.
Thanks