teleren/devto huggingface dataset:
[Public Beta] Meercode, a beautiful dashboard and monitoring tool for Github Actions.
Tags: devops, githubactions, dashboard, monitoring
Published: 2020-10-15 07:00:45

---
title: [Public Beta] Meercode, a beautiful dashboard and monitoring tool for Github Actions.
published: true
description: 
tags: devops, githubactions, dashboard, monitoring
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/q4s200x29l913qf10t94.jpg
---

#The Product

Meercode is a dashboard and monitoring tool for your [Github Actions](https://github.com/features/actions) workflows. It lets you visualize the status of running and completed builds, on a clean and beautiful UI. The project started as an internal tool and turned out to be a SaaS product.

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

#Our Motivation

Github Actions is the powerful CI/CD and automation solution from Github. It is simple, flexible, and affordable. Right after it’s launch, it has become the go-to automation tool for our development team.

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

As the number of managed repositories and workflows grew rapidly, we needed a solution to monitor the status of workflow runs. Unfortunately, no built-in tools or existing solutions provided us the results we expected. So we decided to develop our own plug-in.

>The funny name and logo derive from [Meerkats](https://en.wikipedia.org/wiki/Meerkat), animals famous for their upright postures to watch their environment. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tzxzup8lhysqwjqq26cp.jpg)
 
#The Challenge

Github exposes a comprehensive API for the Actions product. Our initial version of Meercode started as a *React* front-end directly consuming this endpoint. On the next iteration, we started to develop our backend service to increase the performance, avoiding the rate-limits of Github API’s and provide customization options to users. 

As we decided to share our work with the world as a product, we started with a total redesign of the UI using *neumorphistic* components. We added critical features like publicly shareable dashboards and responsive layout supporting big office TV’s. 

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

#Public Beta


At this stage of product development, we wanted to start a public beta program to let you join our journey and get the most valuable feedback from the DevOps and developers community.
Public beta users will be rewarded with **3-month premium** plans, allowing you to get the full experience of the product.

#Getting started

Visit [meercode.io](https://meercode.io) to signup with your Github account and start adding your repositories and watching your workflows. We greatly appreciate your feedback including bug reports, feature requests, and product ideas. To contact us, you may use the feedback form on the "dashboard" page or leave a comment below.
Hacktoberfest Completed
Published: 2020-10-15 07:00:09

Hi, my name is yash and I am a beginner in the world of coding and Hacktoberfest is my first hackathon and I successfully completed it😊. I learnt from this month long coding drill that one don't need to be perfect to help others and helping gives extreme satisfaction.

From technical perspective my biggest lesson was that HTML has special codes for special characters. I admit, I didn't knew that and I don't know many tags and sequences but this world is not ending tomorrow so I am going to learn them soon😊.
Completed the Hacktoberfest challenge
Tags: hacktoberfest
Published: 2020-10-15 06:57:58

## What I Learned From Hacktoberfest

Got to learn so many things from the fest. I had no idea on what is github all about and what does pull request, fork really meant but due to this fest, now I've gained an interest on github and now I'm even contributing to open source projects too.
HACKTOBERFEST COMPLETED
Tags: hacktoberfest
Published: 2020-10-15 06:57:06

## What I Learned From Hacktoberfest

Hi, my name is Yash Gour and I am a beginner in the world of coding and Hacktoberfest is my first hackathon and I successfully completed it😊. I learnt from this month long coding drill that one don't need to be perfect to help others and helping gives extreme satisfaction.

From technical perspective my biggest lesson was that HTML has special codes for special characters. I admit, I didn't knew that and I don't know many tags and sequences but this world is not ending tomorrow so I am going to learn them soon😊.
Great Motivator
Tags: hacktoberfest
Published: 2020-10-15 06:52:22

## What I Learned From Hacktoberfest
Creating a PR and getting it accepted is a great motivator and everyone should strive for it. Contributing to this massive community of developers makes you self aware. Also it a lot of fun :). Thanks hacktoberfest for this opportunity.
\#codingislife \#PRforFun
HACKTOBER FEST 2K20-experience
Tags: opensource, hacktoberfest, github
Published: 2020-10-15 06:49:52

I started this challenge with no to little expectation of how would it go and if I would even finish it. 4 pull requests later, here I stand in my new favorite thing, DEV, posting about a challenge I knew nothing about! got excited when my PR was merged, and that encouraged me to look into other issues. Also, the appreciations and the competition motivated me to do more.

Above all else, my participation is Hacktoberfest'20 has made me a better developer with a greater desire to contribute. I’ve seen that there is room in these projects for new contributors.

Contributing to projects is a great way to improve your skills, gain confidence and practice coding. While finding the right project may take a bit of searching, it will be well worth your while.

Looking forward to get my hacktober badge over my GitHub :)
Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-10-15 06:49:37

Hacktoberfest 2020 journey was amazing for me. I have seen so many open-source code and try to debug and suggest some changes. I also get to know about different terminology in GitHub.
#Hacktoberfest2020
Hactoberfest motivates all to contribute someone's other project and suggest changes. Its enhances the debugging capability of an individual which will surely going to help in my corporate life.
Completed Hacktoberfest drill
Tags: hacktoberfest
Published: 2020-10-15 06:40:16

## What I Learned From Hacktoberfest

Hi, my name is Tanya and I am a beginner in the world of coding and Hacktoberfest is my first hackathon and I successfully completed it😊. I learnt from this month long coding drill that one don't need to be perfect to help others and helping gives extreme satisfaction.

From technical perspective my biggest lesson was that HTML has special codes for special characters. I admit, I didn't knew that and I don't know many tags and sequences but this world is not ending tomorrow so I am going to learn them soon😊.
Hack @hacktoberfest!!
Tags: hacktoberfest
Published: 2020-10-15 06:29:42

## Exciting and amazing voyage!!

Hacktoberfest gave a very good opportunity to get me known to some advanced issues and things, and while doing it I learnt a lot!....Really love this initiative, it's a great opportunity for both newbie and pro devs to improve their skills to more extent. Thanks to DigitalOcean to provide this awesome fest!!!
Experimental visual blog on LOTR
Tags: amp, google, nocode, experiments
Published: 2020-10-15 06:27:39

---
title: Experimental visual blog on LOTR
published: true
description: Experimental visual blog on LOTR
canonical_url: https://www.prakashsellathurai.com/blog/2020/10/14/why-lotr-is-great
tags: amp,google,nocode,experiments
cover_image: https://storage.googleapis.com/makestories-202705.appspot.com/rFvtNauUC3Y1wry4TGGQECzc6Ll1/Monochrome%20Eye%20Donation%20Poster-ms-zuytxmxoou.png
---

checkout my new visual blog post built with amp story on

https://www.prakashsellathurai.com/blog/2020/10/14/why-lotr-is-great
Understanding Docker: part 9 – Docker Search
Tags: docker, devops, beginners, cloud
Published: 2020-10-15 06:24:17

---
title: Understanding Docker: part 9 – Docker Search
published: true
description: Serie of sketchnotes about Docker. Explaining in a visual way Docker principles.
tags: Docker, DevOps, beginners, Cloud
series: Understanding Docker in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/r2cfdmniy3xt2iqcmcur.jpg
---

Understanding Docker can be difficult or time-consuming. In order to spread knowledge about Cloud technologies I started to create sketchnotes about Docker. I think it could be a good way, more visual, to explain Docker (and other technologies like Kubernetes and Istio).

We continue the series of Docker sketchnotes with a focus about Docker search CLI.

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

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

If you are interested, I published all the sketchnotes on Docker (and new ones!) to make a "book" of 93 pages: ["Understanding Docker in a visual way"](https://gumroad.com/aurelievache#YTLzM).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
Hactoberfest #2020
Tags: hacktoberfest
Published: 2020-10-15 06:21:21

## What I Learned From Hacktoberfest
Hacktoberfest was very much innovating for me. l personally learned a lot ! from this fest. How to do PRs on repository around the world. How to write an effective Readme And many more. The thing I liked the most regarding this Fest is the Prize it made sure that participants remain motivated
Hacktober Fest 2020
Tags: hacktoberfest
Published: 2020-10-15 06:19:23

## What I Learned From Hacktoberfest

 I had fixed many issues & bugs of open source IDE and website of Zubi.io[https://zubi.io/]. Improving what I could, I submitted a pull request that added value to the project. This is important. The size or scope of your pull request doesn’t matter but it should provide value to the project. It was merged into the project in a few hours.

I got excited when my PR was merged, and that encouraged me to look into other issues. Also, the appreciations and the competition motivated me to do more.

Above all else, my participation is Hacktoberfest'20 has made me a better developer with a greater desire to contribute. I’ve seen that there is room in these projects for new contributors.

Contributing to projects is a great way to improve your skills, gain confidence and practice coding. While finding the right project may take a bit of searching, it will be well worth your while.

Looking forward to get my hacktober badge over my GitHub :)
Github url:- https://github.com/abhishekdoifode1

#dev #opensource #contribute #learn #enjoy #compete! 
#hacktoberfest2020
Watch me live code a new feature into my roguelike game Asterogue
Tags: roguelike, gamedev, javascript, webdev
Published: 2020-10-15 06:14:16

I committed to releasing my game [Asterogue](https://chr15m.itch.io/asterogue) for Android and Windows on October 30th so I am crunching to get all the features done in time. In this video I live-code a new directional sprite animation feature. Enjoy!

{% youtube Cn0KPQcgDFQ %}

Made with [Roguelike Browser Boilerplate](https://chr15m.itch.io/roguelike-browser-boilerplate).
hacktoberfest
Tags: hacktoberfest
Published: 2020-10-15 05:57:59

## What I Learned From Hacktoberfest

<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->
It was amazing. I was able to learn new things, get more exposure to the open source community, meet new people and had tons of fun taking part in the hacktoberfest festival.
Use Humans.txt to credit your team for a project
Tags: webdev, projectmanagement, webdesign
Published: 2020-10-16 12:38:28

---
title: Use Humans.txt to credit your team for a project
published: true
date: 2020-10-15 05:49:58 UTC
tags: webdevelopment,projectmanagement,webdesign
canonical_url: https://www.ravsam.in/blogs/use-humans-txt-to-credit-your-team-for-a-project/
---

We all love to take credit for the work that we are proud of and there is nothing wrong with that. Whenever we work on the project, we put our team/company name in the **footer of the website** , or in the **about section**. However, this doesn’t take into consideration the members of the team who worked on the project. These members can be Designers, Developers, SEOs, QAs, etc. To attribute the team behind the project, there is a thing called [**humans.txt**](http://humanstxt.org/)

#### What is humans.txt?

Humans.txt is a great initiative for listing the individuals who worked behind a project. It’s an initiative for knowing the people behind a website. Basically, it is just a .txt file that contains information about individuals and their roles in a particular project.

#### Humans.txt Example

```txt
/* TEAM */
 Project Lead: John Smith
 Contact: johnsmith [at] gmail.com
 Twitter: @johnsmith
 From: New York, USA

 UI Designer: Tim Jacob
 Contact: timjacob [at] gmail.com
 Twitter: @timjacob
 From: New York, USA

 Project Lead: Jennifer Jaine
 Contact: jenniferjaine [at] gmail.com
 Twitter: @jenniferjaine
 From: Toronto, Cananda

/* SITE */
 Last update: 2020/10/05
 Language: English
 Doctype: HTML5
 IDE: VSCode
 Technologies: Jekyll, Python
```

#### Should we always humans.txt?

Humans.txt is **completely optional**. It is not related to SEO. But it is a way to tell the world about the individuals who worked hard behind the website.

#### Who to mention on humans.txt?

We can mention anyone on the humans.txt. We can attribute our designers, developers, SEOs, Project Manager, .etc. On an Open Source project, we can add all the contributors in the humans.txt by automating it through CI/CD.

#### Where should I add humans.txt?

Humans.txt lives at the **root of the website**. We can add a <link> tag in the <head> of our website.

```html
<link type="text/plain" rel="author" href="http://example.com/humans.txt">
```

We hope that you will use the humans.txt in your current or upcoming project and attribute your team for what they do. Cheers!

#### About RavSam Web Solutions

Looking for a Web Design company to build your next project? We welcome you. Reach out to us to know more about our website development services, or anything else.

We provide Web Design, Web Development, Mobile App Development, Software Development, and Automation Services. We have been rated as one of the fastest-growing companies in India. We have been able to generate seven-figure revenue due to our customer-centric services powered by passion and skillset. We are always looking forward to work on great ideas. If you are looking for [an application development company](https://wwww.ravsam.in/services/), you are most welcome to get in touch with our team.
Completed hacktoberfest !
Tags: hacktoberfest
Published: 2020-10-15 05:34:04

## What I Learned From Hacktoberfest

It was a great experience to be a part of #hacktoerfest
I am a newbie in programming, but was contributing to open source quite some time before hacktoberfest too.
Hacktoberfest was a brilliant kickoff to this journey as it propelled me to love opensource more and more.
Happy and excited for the T-shirt !
React/Redux Form Cheat Sheet
Tags: react, redux, beginners
Published: 2020-10-15 05:28:29

I don't often create forms; but when I do, this cheat sheet helps. It limits you (and me) from missing the major routine parts.

I assume you have some understanding of React/Redux/React-Router/React-Redux and using forms.  Take this and build on off it. And then let me know. Maybe yours is better. :)   

### 1. Import
`import React from 'react';`
`import { Link } from 'react-router-dom'`  and any other components 
`import {connect} from 'react-redux'`  and any other components
`import {ToCartDevExample} from '../../redux/actions'` The Redux actions for `mapStateToProps` or `mapDispatchToProps`
`Any other needed components `

### 2. Create a Class function for local state in order to have controlled form.  
`class nameOfClass extends React.Component {render() {
    return ( <div> </div> ) } }`

### 3. Create `handleChange` arrow function to `setState` locally
Each form fields should have a `name="somethingUnique"` and `value="fromTheState" `
You might need to pass `event` aka `‘e’` to the `handleChange` 

### 4. Create `handleSubmit` to send `this.state` to your `fetch` and/or Redux action(s)

### 5. Render the form in the `render(){  return (  form stuff here  ) }` with required fields (remember the name and values set to the local state).

### 6. `mapDispatchToProps` w/ the appropriate action and the state
`const mapStateToProps = (state) => {
  return {cartItems: state.cartReducer.cartItems }
}`

### 7. Export the dispatch and the class 
`export default connect(null, mapDispatchToProps)(Login)` if state does NOT requiring exporting; 
Or   `export default connect(mapStateToProps)(CartCheckout)`	

### 8. Create Redux actions

### 9. Create/Update the appropriate Reducer with the new `CASE` with `return { new/updated state code here }` statement with the new state from the payload.  Reducer needs action and state.

Have thoughts on this cheat sheet or other useful cheat sheets? Drop note. I'd love to hear and see your examples (or counterpoints).
A different Hacktoberfest
Tags: hacktoberfest
Published: 2020-10-15 05:26:14

## What I Learned From Hacktoberfest

This year, with campusing and placement activities in full flow, contributing to projects that would require lots of time and effort was a bit of a challenge. I was focusing mostly on Data Structures and Algorithms for interview preparation. As I browsed through the repositories tagged with Hacktoberfest, I found a few where the maintainers were aiming to create a repo that can serve as a go-to place to find the implementation of all the important algorithms and that too in different languages. So, I contributed to some of those repositories as my participation in the Hacktoberfest. Though this was not what a normal open source contribution would be, I learned a lot from the codes submitted by other contributors and it served both purposes, preparation for jobs as well as open-source contribution.

<!--  -->
Template Method Pattern
Tags: behavioral, pattern, java, designpatterns
Published: 2020-10-15 04:49:52

Define the skeleton of an algorithm in an operation, deferring some steps to subclasses. Template Method lets subclasses redefine certain steps of an algorithm without changing the algorithm's structure.

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

#Participants#
* AbstractClass: defines abstract primitive operations that concrete subclasses define to implement steps of an algorithm. Implements a template method defining the skeleton of an algorithm. The template method calls primitive operations as well as operations defined in AbstractClass or those of other objects.
* ConcreteClass: implements the primitive operations ot carry out subclass-specific steps of the algorithm

#Code#
```java
public class Main {

	public static void main(String[] args) {
		AbstractClass aA = new ConcreteClassA();
		aA.templateMethod();
		AbstractClass aB = new ConcreteClassB();
		aB.templateMethod();
	}
}

public abstract class AbstractClass {

	public abstract void primitiveOperation1();

	public abstract void primitiveOperation2();

	public void templateMethod() {
		primitiveOperation1();
		primitiveOperation2();
	}
}

public class ConcreteClassA extends AbstractClass {

	@Override
	public void primitiveOperation1() {
		System.out.println("ConcreteClassA.primitiveOperation1()");
	}

	@Override
	public void primitiveOperation2() {
		System.out.println("ConcreteClassA.primitiveOperation2()");
	}
}

public class ConcreteClassB extends AbstractClass {

	@Override
	public void primitiveOperation1() {
		System.out.println("ConcreteClassB.primitiveOperation1()");
	}

	@Override
	public void primitiveOperation2() {
		System.out.println("ConcreteClassB.primitiveOperation2()");
	}
}
```

#Output#
```
ConcreteClassA.primitiveOperation1()
ConcreteClassA.primitiveOperation2()
ConcreteClassB.primitiveOperation1()
ConcreteClassB.primitiveOperation2()
```

{% github https://github.com/eidherjulian61/design-patterns no-readme %}
{% link https://dev.to/eidher/principales-patrones-de-diseno-13ao
 %}
#Completed Hacktober FEST 2k20!
Tags: hacktoberfest, github, contributorswanted, requestforpost
Published: 2020-10-15 04:48:12

It was really an amazing experience. 
Until the Hacktober FEST 2k20 started, I didn't knew about the Git Pull and Merge Requests, but once I did it, I found it really useful for contributing towards a Repo. Keep up the great work.
Make it flash ⚡️ in HTML Canvas
Tags: html, javascript, showdev, codepen
Published: 2020-10-15 04:31:51

Hey guys, after the [Make it Rain with HTML Canvas](https://dev.to/soorajsnblaze333/make-it-rain-in-html-canvas-1fj0), I am back with another fun canvas experiment. This time I created flashes of lightning using the line method of canvas. The creativity of canvas is unlimited and it's up to you to explore the possibilities.

{% codepen https://codepen.io/SoorajSnBlz/pen/LYZGjBj %}
*(If pen doesn't run or is windowed, please click re-run. Sometimes there is an issue where the pen doesn't run.)*

I just used the same concept when we draw a squiggly line on a piece of paper.
- Draw a line.
- Use the ending point of the previous line as the start of the next line.
- Keep repeating this.

You can check out the code in the codepen above. 

I added this configuration to play around with the types of bolts generated.
```javascript
const interval = 3000;
const lightningStrikeOffset = 5;
const lightningStrikeLength = 100;
const lightningBoltLength = 5;
const lightningThickness = 4;
```

`interval` - creates a lightning strike after the specified milliseconds
`lightningStrikeOffset` - determines how angled each bolt is. The more the offset, the more slanted the bolts look. I found 5 to be a good enough value.
`lightningStrikeLength` - determines how many bolts the strike will have.
`lightningBoltLength` - determines the length of a single line.
`lightningThickness` - determines the thickness of each line.

For the fade effect, I am just looping through the bolt and decreasing the opacity and thickness of the bolt.

```javascript
for (let i = 0 ; i < lightning.length ; i++) {
  lightning[i].opacity -= 0.01;
  lightning[i].thickness -= 0.05;
  if (lightning[i].thickness <= 2) {
    lightning[i].end.y -= 0.05;
  }
  lightning[i].draw();
}
```
Hacktober Fest 2020
Tags: hacktoberfest
Published: 2020-10-15 04:26:03

Hey! I successfully completed my hactoberfest challenge and it was a great learning & working experience for me.

## What I learned by diving into Hacktoberfest for the first time

<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->
I had fixed many issues & bugs of open source IDE and BOSS'20 website of coding blocks[https://codingblocks.com/]. Improving what I could, I submitted a pull request that added value to the project. This is important. The size or scope of your pull request doesn’t matter but it should provide value to the project. It was merged into the project in a few hours.

I got excited when my PR was merged, and that encouraged me to look into other issues. Also, the appreciations and the competition motivated me to do more.

Above all else, my participation is Hacktoberfest'20 has made me a better developer with a greater desire to contribute. I’ve seen that there is room in these projects for new contributors.

Contributing to projects is a great way to improve your skills, gain confidence and practice coding. While finding the right project may take a bit of searching, it will be well worth your while.

Looking forward to get my hactober badge over my github :)
Github url:- https://github.com/mnb27

 #dev #opensource #contribute #learn #enjoy #compete