teleren/devto huggingface dataset:
First Week of Hacktoberfest
Tags: opensource
Published: 2020-10-13 03:40:53

I was very excited to start contributing to the open-source community but after 2 days of searching, I had found no repos to contribute to. I was feeling very estranged. After the 2 days, I found an issue under the [first issues label for c++]( https://github.com/search?l=C%2B%2B&q=label%3A%22good+first+issue%22&type=Issues) . There I found this [Issue](https://github.com/utkarshpant/telemetry/issues/6). The feeling was very familiar as I am very familiar with data structures and that to with destructors in c++. I had found the perfect first issue for me. 


Two days after, I had submitted a [pull request](https://github.com/utkarshpant/telemetry/pull/7). After, A couple of hours it had been accepted and merged. My first pr to an open-source project wait this is where is went all wrong. I found out the the repo I had contributed to did not have an open-source license. Which felt like it wasn't open-source. So, I then added an [issue](https://github.com/utkarshpant/telemetry/issues/8) to add an open-source license and the repo owner agreed with me and added one the very next day. 


While, I was waiting for the issue to be resolved I tried to find another project I could contribute to. This time I checked good first issues for JavaScript. After, going through many school projects I found a boiler plate for react. I found this [issue](https://github.com/crimson-med/react-prisma2-graphql-boilerplate/issues/2) on the repo. It was to change the graphql point to .env file. I know what .env files are I am not that familiar with graphql but I wanted to give it a try. So, I asked if I could do it with a positive response. So, this week I will work on this issue and try to find another repo I can contribute to.

The week was full of ups and downs. I hope I can stay on track and not feel estranged again.
Remote Compilation for Instant Build
Published: 2020-10-13 03:34:26

Hi, 

Do you want to upgrade your system because your local code compilation is taking time?

I created a product that cuts your build time by 70% so that you can just focus on writing code and shipping faster.

Get the early access over here https://stormyapp.com

Guys Show me some love, please share it with your friends.

Thanks

#react #android #javascript #compile #build
it's just html/css
Tags: shopify, webdev, html, css
Published: 2020-10-13 03:32:48

Sometimes I think about all the time and energy I spent learning the ins and outs of advanced web technologies and niche codebases.

I then go back to adding my horizontal rules.

![adding html shopify](https://dev-to-uploads.s3.amazonaws.com/i/3da05gube2gpaiwdfp9x.gif)
Working with Branches adding Features 
Tags: opensource
Published: 2020-10-13 03:13:00

# The start
This week, I set out to add 2 feature to my FireLinker release 0.1. The feature I choose to add was json output and proper exit codes. I also wanted to gain a greater understanding of working with branches previously in my data structures class I had used them for my labs while I was working on them. This was however my first time using it on an active project so at the start of last week I started trying to implement 2 feature using branches.

# Feature 1  - JSON output
To implement JSON output at first at I though it was going to be easy. Where all I need to do was just use JSON.stringfy(links). That is what I did but the trouble I encountered was with yargs my command line interpreter. This was going to be the first option flag that did not come with yargs. So, after reading the documentation for a long time I finally figured out. How I would implement the option flag  for the tool. This was to check both the j flag argument and the first argument. Yargs is smart enough to not add them in the same structure. With, this I implemented the feature. I added the source file to staging area but I forgot to commit and quit for the day.

# Feature 2 - exit codes
This feature was simple I just have to exit with non-zero code if not all links are successful. I implemented this with a global variable called exitCode with the initial value of 0 and then I incremented it for every un-successful link. The source file was then added to the staging area and I committed the feature to branch 2 and then I merged to the master branch.

# The End
After, I merged branch 2 I checked my source file and had a mini heart-attack. I did not see the changes I made but the I membered I had not committed and merged the changes in branch 1 and I final saw the fruits of my effort both features on the master branch. It was then committed to GitHub.
Taskord Changelog - Oct 13
Tags: opensource, productivity, changelog, showdev
Published: 2020-10-13 03:04:16

Welcome to **Taskord Changelog** 📜, This is a weekly post where we share what we shipped to [Taskord](https://taskord.com) this week.

Visit Taskord: https://taskord.com

**This week on Taskord**

- Implemented Abuse detection and prevention system to prevent DOS and bad users

![Screenshot (24)](https://dev-to-uploads.s3.amazonaws.com/i/58et5qm81elinf7o4sg1.png)

- Fix alert's close buttons

![Screenshot 2020-10-12 084244](https://dev-to-uploads.s3.amazonaws.com/i/hjgaf8gq7abtz2m5pfju.png)

- Display Product members in the product card

![Screenshot (24)](https://dev-to-uploads.s3.amazonaws.com/i/avv4qno4l4wm8q8xjt5s.png)

- Able to post tasks from the product page for that particular product without the hashtag
- Turbolinks is back now with more fluidity
- Fixed webhook bugs no more 500
- Git webhook allow only commits from the default branch

Make sure to signup today! https://taskord.com/register

### Thanks 🙏

For providing constant feedback and feature requests!

{% user filiptronicek %}

Happy shipping ❤️
Hacktoberfest Week 1
Published: 2020-10-13 03:02:15

This is the first week of hecktoberfest, I really don't want to work on the projects with the label just for this event. As a newbie in the opensource world, It's really hard to find a project, although there's plenty of them need help.

## How I found the project to work on

I want to start with something familiar to me. As a [hugo](https://gohugo.io/) user. I was looking for a simple template for my website. Then I found this [theme](https://github.com/LukasJoswiak/etch) is really what I want. When I check the readme file, the installation method is a little bit different from the official way to install themes. 

## How I started. 

Then I filed an issue to ask the maintainer what's his option. At the same time, I forked the repository and started working on the project. I appended the installation method to the end of readme file and made a [PR](https://github.com/LukasJoswiak/etch/pull/11)

I discussed the issue with  @LukasJoswiak inside the PR channel. And followed the instruction to make several more commits. I found Github is very smart with the PR. The additional commits automatically show on the conversation. After the review and comment by the maintainer, I finally met all the requirements. And everything merged to the master branch.

I'm excited to contribute to the real open source world. Even it's only a small contribution. The hardest thing is getting started.

```go
fmt.Println("hello, opensource")
```
3D Planets Animation
Tags: codepen, webdev, html, css
Published: 2020-10-13 01:45:20

<p>Revolving 3D planet in CSS3 (WIP). </p>

<p>Inspired from works of 
Jack Rugile <a href="http://codepen.io/jackrugile/pen/sadvF">http://codepen.io/jackrugile/pen/sadvF</a>
and
Tim Holman <a href="http://cssdeck.com/labs/animated-map-icon">http://cssdeck.com/labs/animated-map-icon</a></p>

{% codepen https://codepen.io/zmdevelop/pen/xoWGoN %}
AppStore Connect API ใหม่ กับ fastlane เจ้าเดิม
Published: 2020-10-13 01:29:35

หลังจากที่ AppStore Connect เปลี่ยน API เลิกการใช้ Username, password, OTP, และ app-password ไปทำให้ถึงเวลาที่ fastlane ต้องยกเครื่อง ต้องใช้ fastlane [2.162.0](https://newreleases.io/project/github/fastlane/fastlane/release/2.162.0) ขึ้นไปเท่านั้น

## Create API KEY

ขั้นแรกเราต้องเข้าไปที่ https://appstoreconnect.apple.com/access/api ก่อน หรือ
1. Login ที่ https://appstoreconnect.apple.com ครั้งแรกที่ทำต้องใช้ **Account Holder เท่านั้น** ใช้ Admin ไม่พอนะ ใครที่ทำหายไปแล้วไปตามหามาด้วย
2. เข้าไปที่ https://appstoreconnect.apple.com/access/api หรือ Login > Users and Access > Keys > 
3. กด Request Access

![Screen Shot 2563-10-13 at 08.09.08](https://dev-to-uploads.s3.amazonaws.com/i/6nlxnu42e04hc09man3p.png)

4. อ่านให้เรียบร้อย แล้วติ๊กยอมรับ แล้วกด Submit หลังจากตรงนี้ใช้ Admin ขึ้นไปได้ละ

![Screen Shot 2563-10-13 at 08.10.04](https://dev-to-uploads.s3.amazonaws.com/i/lvsmgra4pf5n68llied2.png)

5. กด Generate API Key
6. ตั้งชื่อ เช่น Fastlane, Access เลือกเป็น level ของ user ที่เราจะให้ใช้ API Key ตัวที่กำลังจะสร้าง เลือก Developer หรือ Admin​ ไม่เป็นไรถ้าสร้างแล้วใช้ไม่ได้มาสร้างใหม่ได้เรื่อย ๆ
7. กด Download API Key ดาวโหลดได้ครั้งเดียวนะ ทำหายให้ Revoke แล้วสร้างใหม่

![Screen Shot 2563-10-13 at 08.13.55](https://dev-to-uploads.s3.amazonaws.com/i/tpf7ea6yu85bkwbyjjud.png)

8. เอา key ที่ได้มาไปเก็บไว้ที่ปลอดภัย เช่น AWS Key Management แต่ถ้า ไม่ได้สนใจ security อะไรมากก็โพสขึ้่น pantip (หยอกนะ)

## Create JSON file for App Store config in Fastlane

ต่อมาเราจะมาสร้าง .json file ที่เก็บตัวข้อมูลที่ใช้ในการต่อกับ App Store Connect

```json
{
"key_id": "<KEY_ID>",
"issuer_id": "<ISSURE_ID>",
"key": "-----BEGIN PRIVATE KEY-----\nKEY_PART1\nKEY_PART2\n...\n-----END PRIVATE KEY-----",
"duration": 1200,
"in_house": false
}
```

โดยให้แทนค่า KEY_ID, ISSUE_ID ที่มาจากหน้า https://appstoreconnect.apple.com/access/api หนะแหละ แล้วเปิดไว้ .p8 ที่ดาวโหลดมาได้แล้วเอาไปแทน value ตรง key และแทนการขึ้นบรรทัดใหม่ด้วยการ `\n`

## Use it

เหมือนเดิมเอาไปวางไว้ใน Key Management หรือ เอาง่าย ๆ ก็วางไว้กับ Fastfile เลยก็ได้ ในกรณีนี้วางไว้ที่ `fastlane/app-store-connect.json`

เสร็จแล้วใน Deliverfile, Matchfile, Precheckfile, หรือไฟล์ที่เกี่ยวกับ App Store Connect ว่า `api_key_path("fastlane/app-store-connect.json")` 

เท่านี้ก็ใช้งานได้แล้ว ให้ลองใช้ distribute, match อะไรพวกนี้ดูว่าสามารถใช้งานได้หรือไม่

## ปล.
จริง ๆ มีอีกวิธีคือเขียน Code ใน Fastfile แต่เราพบว่า code มันยั๊วเยี๊ยไปหมด เราเลยนำเสนอแค่แบบการใช้ config json เท่านั้น

ถ้าใครเจอ `Unresolved conflict between options: 'api_key' and 'username'` ให้ลองลบพวก username หรือ `FASTLANE_USERNAME` ออกไปเพราะมันชนกัน

Reference:
- https://github.com/fastlane/fastlane/pull/17291
- https://docs.fastlane.tools/actions
Curated list of Performance Testing Tools
Tags: webperf, testing, performance, tools
Published: 2020-10-13 01:12:21

🛠 Curated list of Performance Testing Tools 🛠

![Curated list of Performance Testing Tools](https://raw.githubusercontent.com/QAInsights/Performance-Testing-Tools/main/assets/PerformanceTestingTools.jpg)

{% github QAInsights/Performance-Testing-Tools %}

Catch my other performance articles at [QAInsights.com](https://qain.si).
What's the front-end rol
Tags: help, webdev
Published: 2020-10-13 01:07:19

Hello, I have a small project I don't have so much experience just 7 months how front end, but my question is, I knot HTML is for structure and CSS design, but I also know JavaScript is so important just I don't understand in what situation front-end use JS, I have to do a filter bottom for cost and games category but I wonder if it's a front end role or back end, Honestly I don't understand so much difference roles (what I should do and learn and what no). thank you so much for helping me :)
Everyone Can Improve a Life
Tags: leadership, giving
Published: 2020-10-13 00:56:14

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0df6ta1we14nmzlga5dg.jpg)
A bit of a #humblebrag but I'm very proud to share... 

My youngest son recently concluded his first ever fundraising activity for the [American Foundation for Suicide Prevention](https://afsp.org/), that he organized and led with the support of several of his Twitch streaming and gaming friends. Together and with the help of their various communities, they drove $600.00 in donations to an organization that is battling a problem which has directly impacted our family and so many others.

My help in that idea and execution? None. I found out an hour before he started his first charity game stream that he had put this together. I donated. I wasn't even the top donor. He and his friends had 30+ donors over 3 weeks pitching in everything from a couple dollars to a lot more. It all helped. And many more spread the word or contributed their time. 

I like to think that I've been an example for his sense of giving and helping where there is need. In my own case I was inspired by a 20 year career at Microsoft, their matching of employee volunteer hours with cash, and dollar for dollar donation matching. And behind their philanthropic giving culture and helping where help is needed - is Bill Gates.

Everyone can have an impact on someone's life or need or circumstance. It just takes the desire and the willingness to put in the work. 

Well done kid. Now please step away from the screen and go outside and play for a while. 

> "If you can't feed a hundred people, then feed just one." -Mother Teresa
ESLint Shows Weird Errors on VSCode
Published: 2020-10-13 00:51:31

The ESLint shows me weird errors that doesn't follow the configuration and I couldn't find out why.

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

Here is my configuration and my package.json

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5xa19avewd7ja3mw0pr1.png)
An Introduction To The Apt Package Manager
Tags: linux, ubuntu, tutorial, beginners
Published: 2020-10-13 00:16:48

[*Original article published on my blog, onyxcode.net*](https://onyxcode.net/apt-intro)
# An Introduction to the Apt Package Manager 

What is Apt? Apt is the default package manager on Ubuntu, a Linux distribution based on the popular Linux operating system, Debian. In this article we will be going over a couple basic features of Apt in order to give you, the user, a basic ability to install, uninstall and update packages.

## 1. Installing packages

Installing a package with Apt is pretty straightforward. First, you need the package name. Let’s use “sl” as an example. sl is a small Linux package that prints a moving steam locomotive across the screen when you type “sl” in the terminal. One thing to always remember. In most cases, unless you are logged in as “root”, you will need to type “sudo” before such a command, because it requires administrator privileges. With this information, to install a package, you need to type the following:

```
sudo apt install sl
```

It should output something similar to this:

(Image on original post)


If it asks you if you wish to continue, press Y on your keyboard. Otherwise, if the output is similar to this, congratulations! You’ve successfully installed your first package with Apt! Type “sl” and press Enter to watch the steam locomotive go by. Choo choo!


> Tip

> Install multiple packages at once by adding a space between each package name.

## 2. Uninstalling packages

Uninstalling packages is just as easy as installing them. Instead of “install”, you simply replace it with “remove”. Let’s use our “sl” package from earlier as an example.

```
sudo apt remove sl
```

Your output should look something like this:

(Image on original post)

As before, if it asks you if you wish to continue, press Y on your keyboard. Otherwise, if the output is similar to this, congratulations! You’ve successfully removed a package with Apt!

## 3. Updating packages
With Apt, updating is a simple process, and it updates all installed packages at once. Simply run this command:

```
sudo apt full-upgrade
```

I won’t attach an image here because depending on how m
any packages you have installed, the output can get quite lengthy. However, it will most likely ask for confirmation, so press Y on your keyboard when prompted. full-upgrade checks all mirrors for the latest version of each package and installs it if the mirror’s version number is higher than your system’s.

## In conclusion
In this tutorial you learned you to install, uninstall and update packages with the Apt Package Manager. If you enjoyed this article, please comment and share!
How to serve different image formats in websites using the HTML5 picture tag?
Tags: html
Published: 2020-10-13 00:00:00

---
  title: How to serve different image formats in websites using the HTML5 picture tag?
  published: true
  tags: HTML5
  date: Tue Oct 13 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/serve-different-image-formats-using-picture-tag-html5
  cover_image: https://melvingeorge.me/_next/static/images/main-e25214eff61b32e6da7d8412286b4357.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/serve-different-image-formats-using-picture-tag-html5)
  
## Why do we need to serve different image formats?

Since the introduction of `WebP` image format by Google, many of the sites are converting to use WebP format to increase performance, Since `JPEG` images are larger than `WebP` and the loading times are horrible for `JPEG` images.

But still, WebP is not supported by many of the browsers and we want to show the `JPEG` if the `WebP` image is not supported.

`WebP` Provides lossless and lossy compression to images.

To know more about the performance of WebP image format, you can check out the blog [WebP Images & Performance on davidwalsh.name](https://davidwalsh.name/webp-images-performance).

## How to use this?

To serve different image formats, you use the `<picture>` HTML tag and provide different sources using the `<source>` tag. The source tag acts like fallbacks. Let's look at how it's done.

Let's say I have one image, one in `jpeg` format and one in `webp` format.

Our goal is to show the `webp` image if it is supported and if it's not supported by the browser then it should show the `jpeg` image.

First let's write the `picture` tag like this,

```html
<picture>
  <!-- Picture Tag -->
</picture>
```

After that you need to make a `source` tag and with `srcset` and `type` attribute like this,

```html
<picture>
  <source srcset="" type="" />
</picture>
```

You need to pass the source of the `webp` image in the `srcset` attribute and the type of the image i.e `image/webp` like this.

```html
<picture>
  <source srcset="myImage.webp" type="image/webp" />
</picture>
```

Let's also provide the `jpeg` format if the browser doesn't support the `webp` format.

```html
<picture>
  <source srcset="myImage.webp" type="image/webp" />
  <source srcset="myImage.jpeg" type="image/jpeg" />
</picture>
```

It's actually done, But what if the browser doesn't support the `<picture>` tag itself so let's add an `img` tag inside the `picture` tag so that the image is guaranteed to show in every browser. 😃

```html
<picture>
  <source srcset="myImage.webp" type="image/webp" />
  <source srcset="myImage.jpeg" type="image/jpeg" />
  <img src="myImage.jpeg" alt="A JPEG Image" />
</picture>
```

That's all! 🌟.

To understand it better I have made this [JSBin](https://jsbin.com/henoyuposu/1/edit?html,output).

If you view this link in the Chrome browser it will show an image of a House (WebP Image) and if you view it in the Safari browser (Not supports WebP image format yet!) it will show an Image of a Squirrel (JPEG Image).

### Feel free to share if you found this useful 😃.

---
Energy Management
Tags: productivity
Published: 2023-01-01 04:59:40

---
title: Energy Management
published: true
date: 2020-10-13 00:00:00 UTC
tags: productivity
canonical_url: https://orochena.net/productivity/energy-management/
---

When it comes to productivity, one of the biggest issues I deal with regularly is energy management. I generally feel like I have enough time to accomplish my goals, however, I don't always feel like I'm up for doing them. For the past couple of years, I've started to focus on how various activities affect my energy levels and developed a small framework for it. I mentally categorize all activities into three categories which I describe below.

## **Work**

This is defined as time and energy spent working towards goals in my life. I want to maximize the amount of work I can perform in order to more effectively reach my goals and live a fuller, happier life.

- Working at my job
- Side projects or hobbies
- Cleaning, tidying up, errands
- Exercising
- Socializing or spending time with family

## **Active Rest**

Active Rest describes activities that make me feel re-energized after I've done them, which will allow me to do more work. 

- Taking a nap
- Chilling in a hammock
- Going on a walk
- Playing with my dogs
- Having a fun chat with a friend

## **Passive Rest (the bad stuff)**

These activities are similar to Active Rest activities, in that they are things I do when I need a break from working. The difference is, these don't make me feel recharged. At best, I'm recharged a little - at worst, I actually have less energy than when I started. These will vary from person to person, but for reference, these are things I consider Passive Rest activities:

- Browsing social media / Reddit
- Most video games
- Watching TV / shows

## **Conclusion**

Like I mentioned before, my goal is to maximize my ability to do Work. I view it similar to a mana bar - working decreases my energy over time, and both Active Rest and Passive Rest increase it. However, Active Rest is much more effective at restoring energy than Passive Rest.

**TLDR;** Focus on activities that lead you towards your goals. If you don't have the energy to work on those things, effectively rest and avoid activities that aren't truly recharging.