teleren/devto huggingface dataset:
First Hacktoberfest: A challenge!
Tags: hacktoberfest, opensource, github, codenewbie
Published: 2020-10-15 16:09:10

# Story Behind This!!

![Hacktoberfest Completed](https://dev-to-uploads.s3.amazonaws.com/i/mcvolfbex6jtvjbl418l.PNG)

# Hacktoberfest: A Challenge!

Well, frankly speaking I created my GitHub profile in the last week of September. I am new to this world of Dev and GitHub Community. I hardly knew anything of open source contribution. I had just heard of it so far. Yes, this seems little hard to believe for me as I am soon to graduate in 2021 and I have not been in these platforms so far.

I didn't even know anything from creating repository or doing any commits. Pull requests, Stars, Forks, all these terms were completely new for me. So, I started learning on GitHub's Learning Lab. From creating my first repository, to adding few lines of code so that my markdown pages look beautiful. Editing every README files were also challenging for me. I didn't know if I would learn so soon. So far, by the end of 1st day, I had learnt pretty few things and checked out nice repositories of various developers. 

I then thought to add some of my files to GitHub. I made it a habit that I will commit something to my profile everyday. Till date as of today, I have made 200 contributions in 22 days. As said for the beginners they should try to see any flaws in the documentation first, then they should contribute. I went through many repos, but couldn't find anything syntactically wrong. I was disappointed at first. 

![Contributions](https://dev-to-uploads.s3.amazonaws.com/i/06aypayo1g8ru7b1vy1n.PNG)

Then, I found a repo where you just had to add a JavaScript file mentioning your name and profile as a pull request. I gave it a try and seeing my PR getting merged was immensely satisfying. Till then, I didn't know anything of Hacktoberfest. I just wanted to contribute of any kind. I started searching for repositories of any kind, whether it was contributing an idea or adding your algorithms. Soon, few of my PRs started getting merged and seeing that made me happy everyday. 

I wanted to make the most of it and registered for this fest. All you needed was to make 4 PRs to any public repository but since I was a bit familiar with the community I thought of adding some reasonable pull requests. I added few algorithms related to Data-Structures, few ideas, few resources for the beginners and yay I had done the required PRs but yes, while contributing to well known-repositories of various technologies, you need to be a bit careful.

Today marks the day, where all my PRs have been qualified as part of Hacktoberfest and will be soon receiving my goodies. I just wanted to write up this post on DEV community.

I am grateful to everyone in the process involved. 

![Thank You](https://dev-to-uploads.s3.amazonaws.com/i/wp0e6a0wi7glpgbypc7d.png)
First ever Hacktoberfest
Tags: hacktoberfest
Published: 2020-10-15 16:08:26

It was my first time that i got to know about hacktoberfest and I just participated , tried to do 4PR's goal . I don't know much in developing but I tried and I completed the challenge successfully. 

I also learned that it is also hurting the dev community as most people are just spamming projects which I found out is not good . We should be focusing on quality not quantity . I'm also focusing on this and everyone should .
thanks for reading this .
CSS Silhouette
Tags: codepen, css, html, showdev
Published: 2020-10-15 16:07:35

---
title: CSS Silhouette
published: true
description: Illustration of a profile's silhouette done with HTML and CSS, only using circles.
tags: codepen,css,html,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/4kuvrym10j78ysc8w8gh.png
---

Today's CSS illustration is a person's profile silhouette:

{% codepen https://codepen.io/alvaromontoro/pen/abZdjjg %}

The are two interesting things about it:

1. It was done with HTML and CSS.
2. It only uses circles to generate the illustration (hover over to see the circles).

Just using circles to draw an image is something that I've done ([and written about](https://dev.to/alvaromontoro/drawing-homer-simpson-using-circles-in-css-4gc1)) in the past, but it was a more "cartoony" type of thing.

I recorded the process (it took around 20-25 minutes) and put  a video together. It is at 8x with a couple of alternatives that were considered:

{% youtube geQdX9MBZ6M %}
HacktoberFest
Tags: hacktoberfest
Published: 2020-10-15 16:06:30

## What I Learned From HacktoberFest
I think HacktoberFest is a great initiative by @digitalOcean to  encourage more students to contribute to the open source community.

This year i have contributed to the interview-bit solution(an online coding platform) which may help the students looking for solution and looking forward to contribute more.
Contribute to your 1st Hacktober Fest
Tags: hacktoberfest, flutter, github, git
Published: 2020-10-15 16:06:28

Is this your 1st Hacktoberfest? Don't worry! I have your back.
Here are the steps for generating your 1st legit pull request!
1. You need to register yourself at [Hacktober Fest Website](http://hacktoberfest.digitalocean.com/)
2. After you register yourself, go to [Github] (github.com)
3. Now, in the search box, you can search for **Hacktober Fest** label. There will come a list of Repositories/Issues in the result.
4. If you don't find that interesting, you can simply go in **Explore** and checkout various repositories.
5. If that repository has a **Hacktober Fest** topic, congrats, you got a repo for contribution.
6. Now, as you have repository, let's start contribution!

    - Fork this repo to your account.
    - Clone the repo to your pc.
    - Now, make changes or do your contributions to the cloned repo.
    - After you have done your contributions, commit the changes and push the commit to your repo.
    - Now, go to your repo on github website and generate a **Pull Request**
    - Go to [Hacktober Fest Profile Page] (http://hacktoberfest.digitalocean.com/profile) and you will see the PR generated there.
    - Now, you need to wait for the Review period to end. 
    - If your PR gets merged, congrats, you have got 1 PR counted for Hacktober Fest!!

**Happy Open Sourcing!!**
Hack With PR's
Tags: hacktoberfest
Published: 2020-10-15 16:04:13

## Learning From Hacktoberfest

#Hacktoberfest

####Introduction
Hi there,
I am Priyanshu and currently a student as well as back-end web-developer. I am always ready to learn something new as approx 10 to 12 years back I always think how any website or application will be developed and accessed, so easily to us.
So, this craziness gives me a path of Engineer to learn and get knowledge of these stuffs. So, talking my current situation I have understood a bit about these things (this is so and so vast :) ) and want to take more & more knowledge about these stuffs.

####Acquintance with Hacktoberfest
 A month ago, I saw an advertisement and get aware of the Hacktoberfest event and made my mood to participate in this awesome event. I am always ready to take part in this type events.

####Participation and Outcome
I have some knowledge of github before also. But my contributions to it were few. So, due to this event I have participated and enhanced my github as well. Now, I am working regularly on it. After participating, it gives me immense pleasure that I get a chance to _win a prize of cool T-shirt and other swags_ and have a plant. I learned how to contribute to open-source projects and make good pull requests which helps someone to make his project more scalable.

####End
Thank You **HACKTOBERFEST** for providing such a great chance which ends with a lot of learning as well as prize. Eagerly waiting for those swags :).


Thank You for reading
[Connect me](https://github.com/goel28priyanshu)
The Best 3 Angular Conference Talks this Year
Tags: angular, webdev, productivity, tech
Published: 2020-10-15 16:02:26

Earlier this year I was privileged to be able to help put on ng-conf Hardwired, a last-minute, seat of our pants scramble to turn an in-person conference into an online conference that was all duct tape and baling wire behind the scenes, but turned out great for the audience.

Anyway, I thought I'd just put out there that there were a few talks given at the conference that were truly epic and are absolute must-sees. These are pretty Angular-centric, FYI.

So here's my list in no particular order:

1. [Farewell Entry Components](https://yj685.infusion-links.com/api/v1/click/6585070011547648/5570275139911680) by Yvonne Allen. Yvonne, who happens to be a Thinkster author, gave one of the most unique talks I've ever seen at a conference. It's not your typical lecture, but instead, a fake newscast where she discusses new features in Angular 9. It's as informative as it is entertaining. Go check it out.
2. [Resilient Angular Testing](https://yj685.infusion-links.com/api/v1/click/6401168739401728/5570275139911680) - Jaw-Dropping Magic Tricks by the Magnificent Shai Rezniko. As the name implies, this is another one of those talks that has to be experienced to be understood. It's got great information on Angular unit testing and is again a fully entertaining talk.
3. [How Ivy Will Improve Your Application Architecture](https://yj685.infusion-links.com/api/v1/click/4772559117352960/5570275139911680). Manfred Steyer is one of the superheroes of Angular. His in-depth technical knowledge is nearly unsurpassed. This talk lays out some of the ways that the new Ivy engine will affect your Angular applications. Be sure to get rid of any distractions, this is a deep and esoteric talk.

So if you get some time, be sure to check out these talks.

Happy coding!

Signup for my newsletter [here](https://thinkster.io/?previewmodal=signup?utm_source=devto&utm_medium=blog&utm_term=best3angulartalks&utm_content=&utm_campaign=blog).

Visit Us: [thinkster.io](https://thinkster.io?utm_source=devto&utm_medium=blog&utm_term=best3angulartalks&utm_content=&utm_campaign=blog) | Facebook: @gothinkster | Twitter: @GoThinkster
Completed HacktoberFest2020!!😍🤩
Tags: hacktoberfest
Published: 2020-10-15 16:00:42

## What I Learned From Hacktoberfest

   This was the first time I participated in HacktoberFest2020 ❤❤.It was such a nice and exciting experience 💝💝. Learned a lot about new tech stuff and how to implement them . Hacktoberfest is not only about submitting PR's to make other's project clean and organised , but it also ensures that you are learning along the ways . NEWTON's 3rd law is definitely true here too : If you do Good to other Developers , then dear you have also made one step ahead in being a good developer 😍🤩. I thank all the organizers , mentors and all who worked soo hard!!!
Thanking you all once again🤗🤗
📢 EuroPython 2021 will be online
Tags: europython, news
Published: 2020-10-15 15:56:48

In the last few weeks, we had a close look at the how the situation around COVID-19 is panning out. Unfortunately, things are not moving in a direction where we’d feel confident to hold next year’s conference as an in-person event in Dublin.

# EuroPython 2022 in Dublin

After discussion with the venue, we decided to postpone the in-person conference for another year, to July 11-17 2022 in Dublin, Ireland. We are currently finalizing the details.

Since going online has proven to work well, we also want to keep the momentum for EuroPython 2022 and are planning to run the event in a hybrid version, where both speakers and attendees can optionally join online.

# EuroPython 2021 Online

Given the experience with running EuroPython 2020 online this year, we are sure that EuroPython 2021 will be a success as well.

We will take the experience we’ve gained from this year’s event to improve the online version next year, simplify some aspects, reactivate finaid and enable joining it in smaller groups to create a distributed experience.

![ep21](https://dev-to-uploads.s3.amazonaws.com/i/bazlopmy9tcpqv2hfbep.jpg)

We’re still collecting ideas, so if you have any suggestions, we’d love to hear them. Please write to helpdesk@europython.eu.

Enjoy,
–
[EuroPython Society](http://www.europython-society.org/)
Shrinking SVG code: ❮path❯ not always bigger
Tags: svg, design, vectorgraphics, todayilearned
Published: 2020-10-15 15:52:42

I love vector graphics. I love SVG. And I love a good session of byte squeezing.

When I was triggered by [Medium's new logo][m-logo], I played around with their SVG source for the symbol icon, what they call "Unfinished Ellipses" — let's not go into the "beauty" of it … <small>_(to be honest I don't like it; it does not look very inspiring to me)_</small>

This post is more about some tiny revelation I had during my [SVG icon optimization][svgsess] session earlier today.

Most of the time the `<path>` element is used for more or less complex graphics. But in the case of Medium's symbol, it was clear they could have used very simple shapes (aka primitives) like `<circle>`, `<ellipse>` (yes, Medium, that is a thing! :P), and others.

And most of the time the final code with such primitives should be much shorter, as a `circle` or `ellipse` can be described in a very concise fashion, while a `path` only knows how to draw straight lines, curves, and arcs. All of them involve usually more data than the primitive version. 

## Example: circle vs path

```xml
<!-- simple shape: a circle -->
<circle cx="500" cy="500" r="500"/>

<!-- converted to path -->
<path d="M1000 500a500 500 0 01-500 500A500 500 0 010 500 500 500 0
         01500 0a500 500 0 01500 500z"/>
```

So all is good and we can go home, right?

Well, not so fast.

`TIL` There are exceptions when the code of your primitive can be bigger than a complete path definition. And I think the `line` element will be always heavier compared to its path counterpart.

## Example: line vs path

```xml
<!-- line primitive: -->
<line x1="0" y1="80" x2="100" y2="20" />
<!-- path equivalent: -->
<path  d="M0 80l100-60"/><!-- 16 chr -->
```

A single line would not make such a difference, but with many of them that can add up easily. And given that you usually combine many lines into a single path you will start saving even more.

So, unless you draw only a few circles, ellipses, and rectangles you will probably be better off with a single or combined `path` element.

Oh, and a very easy way to optimize your SVG code is the site [SVGOMG][svgomg]. I know I can install `svgo`, but for a quick and dirty pass I always visit that page and paste my source and see how much it can reduce.

Final note: **Always verify your assumptions.** I was not 100 % sure about the overhead or savings of the primitive shapes, I'm glad I ran tests to get some proof. And don't be afraid if your experiments tells that you were wrong. That's life. 🤷🏻‍♂️


[m-logo]: https://medium.com/markentier-tech/mediums-new-logo-what-a-strange-looking-thing-d2ddad63fa97
[svgsess]: https://markentier.tech/posts/2020/10/medium-icon-svg/
[svgomg]: https://jakearchibald.github.io/svgomg/
My 1st Hactoberfest Experience!
Tags: hacktoberfest
Published: 2020-10-15 15:52:26

## What I Learned From Hacktoberfest

So basically this was my first Hactoberfest or something like that.
It was a new and rewarding experience for me.
I have been helping in opensource projects but never thought that something like this would encourage it more!
Thank you Digital Ocean!
Introducing FicusJS
Tags: javascript, webdev, typescript, ficus
Published: 2020-10-15 15:52:17

FicusJS is a set of lightweight functions for developing applications using web components.

- A function for creating fast, lightweight web components (1.88 KB gzipped)
- A function for creating fast, lightweight stores for application state (1.21 KB gzipped)
- A function for creating a fast, lightweight publish/subscribe event bus (271 B gzipped)

If you are looking for a fast, lightweight way to build web applications using native browser APIs, FicusJS might be what you are looking for!

Browsers have improved a lot over the past years. It's now possible to do web development without requiring any build tools, using the native module loader of the browser. We think this is a great fit for FicusJS, and we recommend this as a general starting point.

## Aligns with standards

FicusJS aligns with standard browser APIs which means it is not based on any proprietary code or libraries.

As it is based on standards, it has longevity and is a good choice for enterprise web applications.

## Features

- Functional programming patterns
- Declarative component creator
- Reactive components
- Choose your own renderer
- Extend components using functions
- Application state management with stores
- Application event bus
- Small footprint
    - All features - 3.54 KB gzipped
    - Components - 1.88 KB gzipped
    - Stores - 1.21 KB gzipped
    - Event bus - 271 B gzipped
- Features can be loaded independently or use the all features bundle
- No dependencies
- Works with all server-side and client-side frameworks

## Documentation

The full documentation is available at https://docs.ficusjs.org

## Getting started

To get started, you can use the FicusJS starter kit at [WebComponents.dev](https://webcomponents.dev/create/ficus)

## FicusJS router

Looking for a lightweight standalone client-side router that supports history and hash routing plus web components?

[Try FicusJS router!](https://router.ficusjs.org)

## FicusJS script loader

Looking for a lightweight script loader for lazy loading ES modules and ES5 scripts or both based on dynamic paths?

[Try FicusJS script loader!](https://script.ficusjs.org)
Experience on Hacktoberfest
Tags: hacktoberfest
Published: 2020-10-15 15:52:12

## What I Learned From Hacktoberfest
#AnaswaraAshok
This is my first time contributing to Hacktoberfest. I am really happy and proud to be a part of it. 

GitHub id :  https://github.com/AnaswaraAshok
Is anyone using `Yarn 2`? 
Tags: help
Published: 2020-10-15 15:49:56

---
title:Is anyone using `Yarn 2`? 
published: true
tags: help
---
With the release of NMP 7 today I'm curious if anyone is using Yarn 2?  I tried moving a couple projects to Yarn 2 but had even when using `nodeLinker: node-modules` to keep things relatively similar to Yarn Classic.

When searching for tutorials there are pretty much none.
There are only [14 Questions with the yarn-v2 tag on stackoverflow](https://stackoverflow.com/questions/tagged/yarn-v2).

There are seemingly a ton of benefits to Yarn 2 but maybe the differences are too hard to overcome?

It also doesn't help that React Native isn't close to working with the new PnP features.

Anyway... just curious if anyone is using Yarn 2 yet!

Thanks.
Looking Shiney
Tags: watercooler
Published: 2020-10-15 15:29:46

Does it get on your nerves when people around you are trying so hard to look shiney. It probably works too, I never get promoted. :(

But it makes me sad to see people doing "the right thing" out of context, answering questions directed at other people and "helping" when it takes a little tact to know when you can or should help somebody.

Or maybe I'm jealous and should try harder, get on the band waggon and be more annoying they everyone else?

Id rather stay genuine and be me and never be promoted I think.
My favorite tricks with Sass
Tags: css, webdev, tutorial
Published: 2020-10-15 15:25:16

## 1. Dynamically create component variants based on theme colors

```scss
// Create a map containing all the important colors
$theme-colors: (
  "danger": #ff0000,
  "success": #00ff00,
  "info": #0000ff,
) !default;

// Loop through the map to create a variant per color
.button {
  // ...

  @each $colorName, $color in $theme-colors {
    &--#{$colorName} {
      background: $color;
      // ...
    }
  }
}
```

**CSS result**
```css
.button--danger {
  background: #ff0000;
}

.button--success {
  background: #00ff00;
}

.button--info {
  background: #0000ff;
}
```

## 2. Pick the right text color automatically

```scss
@function text-color($color) {
  @if (lightness($color) > 40) {
    @return #000;
  } @else {
    @return #fff;
  }
}

// Use the function anywhere
.button--primary {
  background: #ff0000;
  color: text-color(#ff0000);
}
```

**CSS result**
```css
.button--primary {
  background: #ff0000;
  color: black;
}
```

## 3. Simplify the use of breakpoints

```scss
// Create a map containing your breakpoints
$breakpoints: (
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px,
) !default;

// Create a mixin to simplify the use of the breakpoints
@mixin breakpoint-down($screen-size) {
  $breakpoint-size: map-get(
    $map: $breakpoints,
    $key: $screen-size,
  );

  @media (max-width: $breakpoint-size) {
    @content;
  }
}

// Use the breakpoints anywhere
.square {
  width: 100px;
  @include breakpoint-down(sm) {
    width: 50px;
  }
}
```

**CSS result**
```css
.square {
  width: 100px;
}

@media (max-width: 576px) {
  .square {
    width: 50px;
  }
}
```

## 4. Simplify the use of spacers

```scss
// Create a map containing you spacings
// Name them from 0 to n
$spacers: (
  0: 0,
  1: 0.5rem,
  2: 1rem,
  3: 1.5rem,
  4: 2rem,
  5: 3rem,
) !default;

// Create a function to simplify the use of the spacers
@function getSpace($space) {
  @return map-get($map: $spacers, $key: $space);
}

// Use the function anywhere
.square {
  margin-top: getSpace(0);
  margin-bottom: getSpace(5);
}
```

**CSS result**
```css
.square {
  margin-top: 0;
  margin-bottom: 3rem;
}
```
How to Make Your Open Source Project Top Tier
Tags: opensource, github
Published: 2020-10-15 15:18:40

As I begin work on my [own](https://github.com/DangerousUserDB/DangerousUserDB) open-source project and create pull requests for Hacktoberfest, I wanted to share what I think makes a great open-source repo. 

I boiled down what I want to see in an open source project down into three points. Here they are:

## 1 - Keep it to GitHub

Please don't make me go to your bug reporting site that was last updated in 1995. Staying on GitHub makes my life much easier and allows me to see all of my contributions in one spot, which makes it easier to create a resume.

## 2 - Listen

Don't slap the Hacktoberfest tag on your report and then run for the hills. Review pull requests and issues. If you can't help out a user right away, tell them that you are working on it.

## 3 - Give Feedback

If an issue gets denied, tell me why it was denied and how I can improve in the future. That helps everyone out!
#CodepenChallenge Webring in Modern Card
Tags: codepen, html, css, showdev
Published: 2020-10-15 15:14:29

<p>This is an implementation of webring using the modern designing technique; card.</p>

<p>Honestly, I don't know much about webring, so I tried to look on the internet (and the "Ideas" section), how does it work. So maybe, this what I call webring is not as similar as what the real webring is.</p>

<p>I used card, because based on how I understand it, webring looks like an advertisement, but it was built on the owner's website.</p>

{% codepen https://codepen.io/takaneichinose/pen/rNLxmXv %}