teleren/devto huggingface dataset:
Watch a snake-eating🐍 my contribution graph on Github
Tags: github, opensource
Published: 2021-07-15 18:38:13

GitHub Actions to build and update a user's contribution graph, and then has a snake eat all your contributions. The output generates a gif file, that you can then show on your GitHub Profile README. I thought this was pretty cool, so I set about adding this to my profile.

{% twitter 1413355450607620107 %}

<br>

## Step 1. Setting up GitHub Actions
Head to your Profile and ensure the GitHub "Actions" is setup.
![action button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/caj2e1bwicwpalc224sr.jpg)
<br>
## Step 2. Create a yaml file on your GitHub Actions
Make sure you create a new *.yml file under the following directory:

YOUR_GITHUB_USERNAME --> .github --> workflows --> FILE_NAME.yml

(code and further details are here -)
https://dev.to/mishmanners/how-to-enable-github-actions-on-your-profile-readme-for-a-contribution-graph-4l66

<br>

## Step 3. Running GitHub Actions

Once you've added the code above (don't forget to rename your-user name instead of mine) and committed it, head to your Actions tab. Under "Workflows", you should see the "Generate Snake" Action you created above.
Now, you should have received a green ✅ "build" checkmark. If so, this means your Action is working nicely. If not then follow this for more detailed explanation - 

<br>
## Step 4. Adding a contribution-eating snake to your profile


You will find your something like this 
 https://github.com/YOUR_USERNAME/YOUR_USERNAME/blob/output/github-contribution-grid-snake.gif 

<br>
Watch a snake-eating🐍 my contribution graph on Github
![snake gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/233m04x0r0lv60payria.gif)
<br>
Once your action is live, then github will automatically commit the updated graph in every 6 hours.
![Screenshot (250)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvuuxc68qeuups6o3ki4.png)
Method Chaining - JavaScript
Tags: javascript, webdev
Published: 2021-07-15 18:33:46

Chaining Method (also known as Cascading),  means repeatedly calling one method after another on an object, in one continuous line of code eventually reducing the redundancy. (Skyrocketing the code quality 🚀)


> If you don’t know jQuery then ignore the next line 😉

You will also understand the concept of functional training in jQuery And how we mimic the same behaviour in Javascript 

Let's get started
```javascript
class User {
  constructor(username) {
    this.username = username;
    this.score = 0;
  }
  login() {
    console.log(this.username, "has logged in");
  }
  logout() {
    console.log(this.username, "has logged out");
  }
  updateScore() {
    this.score++;
    console.log(this.username, "score is now", this.score);
  }
}

let noemi = new User("Noemi");
let jack = new User("Jack");

// Run it in Browser

noemi.login() 
// "noemi has logged in"
// undefined

noemi.updateScore() 
// "noemi score is now 1"
// undefined

```

We also get the undefined because our methods are not returning any value.

Let's chain it now
```javascript
noemi.login().updateScore()

//console
//Noemi has logged in
//Uncaught TypeError: Cannot read property 'updateScore' 
//of undefined
//    at <anonymous>:1:14
```


**Why chaining is not working?**
The reason is, methods run on the instance of object, as our methods are returning undefined, no instance is available for updateScore() to run on 
**Solution: **
Simply, return instance of the object from methods, as we all know it is store in *this*

Updated code is
```javascript
class User {
  constructor(username) {
    this.username = username;
    this.score = 0;
  }
  login() {
    console.log(this.username, "has logged in");
    return this; //new
  }
  logout() {
    console.log(this.username, "has logged out");
    return this; //new
  }
  updateScore() {
    this.score++;
    console.log(this.username, "score is now", this.score);
    return this; //new
  }
}

let noemi = new User("Noemi");
let jack = new User("Jack");

// Run it in Browser

noemi.login() 
// "noemi has logged in"

noemi.updateScore() 
// "noemi score is now 1"

```

Let's chain it again
```javascript
noemi.login().updateScore()

//console
//Noemi has logged in
//Noemi score is now 1

noemi.login().updateScore().logout() //chain as many methods as you want
```

## Conclusion:
You can also chain methods using objects, do you guys want that implmentation too?
New Clojure Morsels!
Tags: clojure, news, beginners
Published: 2021-07-15 18:22:23

I just pushed our [first widely distributed edition](https://mailchi.mp/clojuremorsels/2021-07-15-4clojure-4ever-fresh-new-clojure-morsels) of [Clojure Morsels](https://www.clojuremorsels.com/)!

![New edition of Clojure Morsels](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9n2uohieyjmhb3vqswum.png)

I'm **really** proud of this one (*especially the cupcake*), so check it out!
Are you starting with microservices? Forget the DRY principle and embrace redundancy!
Tags: microservices, antipattern, bestpractices
Published: 2021-07-15 18:13:22

###### I am always posting provoking post on my Linkedin, and I have decided to replicate those here. [Let's socialize!](https://www.linkedin.com/in/alexsandro-souza-dev)

Are you starting with microservices? Forget the DRY programming principle and embrace redundancy!

Extracting common code to a library seems to be the best practice. However, if two microservices share a library, they are coupled and not independent anymore. 

That will increase the coordination effort, and a trivial change in the library will become very hard because it has to be coordinated among the microservice teams.

Someone may suggest adding versioning; then it will add restrictions and may lead to painful version conflicts.

Developers will fear adding improvements and refactoring the code because they will not know how their changes can affect other microservices.

Accept redundancy. It's ok to have redundancy to stay independent.  This way, we will avoid technical and organizational coupling, speed up the development and enable modernization.

You can find more [here](https://phauer.com/2016/dont-share-libraries-among-microservices/)
Hugo Shortcodes to Embed Anything
Tags: webdev
Published: 2021-07-15 18:08:15

### Introduction

Hugo is a static site generator suitable for personal websites and blogs. Being an open source project it lets users to manipulate the presentation layer to great extent. Strong theme support and customization options makes it a perfect platform to host almost any kind of web object.

### Shortcodes

Hugo [shortcodes](https://gohugo.io/content-management/shortcodes/) lets developers embed any snippet into a markdown article. It comes with a lot of in built shortcodes to embed widgets from most popular sharing platforms. Shortcodes can embed a complete HTML document as well not just script tags and small snippets. This makes it possible to natively embed a small standalone project.

Shortcodes are `html` files which are, by convention, placed in `/layouts/shortcodes` directory. Once placed the shortcode can be included in any page using `{{\< filename \>}}`

### Passing argument

It is possible to pass arguments while including a shortcode. Just add any number of positional arguments like in a command line and hugo will capture them as string on rendering.

For example, the first argument can be captured as a zeroth positional argument inside the shortcode file.
```txt
{{- $arg0 := .Get "arg0" | default (.Get 0) -}}
```

and can be accessed anywhere in the html document as such
```html
<a href={{ $arg0 }}></a>
```

### Adding Style

Shortcodes get the style definition from the selected theme of custom css. A shortcode specific CSS can be included in the HTML as usual and place in `/static/` folder

### JavaScript and Minification

The generated HTML gets minified naturally while compiling for production using `--minify` option. To make sure the javascript used in the shortcode is minified as well, place them in the `/assets` folder and include using hugo minification pipe.

```javascript
    {{ $customjs := resources.Get "/custom.js" | resources.Minify }}
    <script src="{{ $customjs.Permalink }}"></script>
```
#CloudGuruChallenge Improve application performance using Amazon Elasticache Redis
Published: 2021-07-15 17:56:56

Just completed my first [#CloudGuruChallenge] (https://acloudguru.com/blog/engineering/cloudguruchallenge-improve-application-performance-using-amazon-elasticache)

**Why?**
As terraform and python are really popular topics in the industry, so I wanted to expand my knowledge on these topics and of course, to take on challenges that put me to the test.

**How?**
All work was done using the [ACG Cloud Playground](https://acloudguru.com), using Terraform to provision resources.

I used the VPC module to provision subnets, simple and fast:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bma98zi8nhzicy0akpx2.png)

I used http datasource to populate security groups with my ip:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tg0t7phwm6skkws26bhe.png)
 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1iwqa4bu19duhiduwpp7.png)
 
DB names and adresses are passed to userdata using templatefile:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bw7v63qflgllfxqa140p.png) 
 

After creation, the instance installs dependencies, clones the repo, runs sql commands, populates the ini file and nginx config file.
The new app file is copied from S3, and then the app is run:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhgn51fmuvym4dlhqzd5.png) 

Modification to the app to cache the query:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ktob5jbos32jlyuprxn.png)  
 
At this point I had some hard time converting the tuple to be stored and retrieved from redis.

**Pre- and post-cache page load times:**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blc06yggltey1zfg6dzr.png)
5.05238s
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08wb10aw6k0j8ur0okrf.png) 
0.00397s

Thanks #acloudguru for this challenge. It was a really fun experience and I learned a lot.
12 Unique Python Project Ideas for Your Resume
Tags: python, programming, datascience, machinelearning
Published: 2021-07-15 17:39:17

There are two ways to get a decent job in IT:
1. With a certificate
2. With knowledge and the projects you have built

In my opinion, projects speak louder than certificates. In this article, we are going to see 12 Python project ideas for your resume. Every idea is from a different domain and contains some information about the different projects you can build in it.

First, remember one thing:
“A project is complete when it starts working for you, rather than you working for it.” — Scott Allen

### 1. Desktop Assistant
A desktop assistant can be a good project for your resume. It shows the interviewer how wise you are. You know how to use resources and make something good with them.
You don’t have to be very technical or an advanced Python developer to create one. It can be created with just the help of a few different Python packages.
There are many available in Python that you can use, like Pyttsx3 for reading text, os for adding facilities like playing music or starting an application, Wikipedia for finding answers on the web, and more. Keep one thing in mind: Every package you use must provide a feature to your assistant.
You can even make your assistant more advanced by adding web scraping and automation facilities. Write a script that can scrape Google Search results. You can add this to your script to make it look more advanced.
This project has no end to it. The more features you add, the more professional and useful it becomes.
To get some insight into how all this will work, check out this article.

Check Out Other 11 Unique Project Ideas By From [Here](https://betterprogramming.pub/12-unique-python-project-ideas-for-your-resume-eb23c77c500a).

> Believe Me You Will Not Regret It.
problem
Tags: funcao
Published: 2021-07-15 17:27:21

   //cadastrando um novo usuario
    async function signUp(email, password, nome) {
        //setLoadingAuth(true);
        await firebase.auth().createUserWithEmailAndPassword(email, password)
            .then(async (value) => {
                let uid = value.user.uid;
                //Insiro registro na tabela users
                await firebase.firestore().collection('users')
                    .doc(uid).set({
                        nome: nome,
                        avatarUrl: null
                    });
                //insiro uma empresa fictícia        
                await firebase.firestore().collection('empresas')
                    .doc().set({
                        cpfcnpj: "",
                        email_contato: "",
                        endbairro: "",
                        endcep: "",
                        endcomplemento: "",
                        endnumero: "",
                        endrua: "",
                        enduf: "",
                        idlexfinance: '',
                        logourl: "",
                        nomefantasia: "Minha empresa",
                        staempresa: '',
                        telcontato: ""
                    })
                    .then((value) => console.log(value))
//todo:
//Inserir uid da empresa e uid do usuário em um novo documento

                    .then(() => {
                        let data = {
                            uid: uid,
                            nome: nome,
                            email: value.user.email,
                            avatarUrl: null,
                        };
                        setUser(data);
                        storageUser(data);
                        setLoadingAuth(false);
                        toast.success('Bem vindo ao nosso sistema');
                    })
            })
            .catch((error) => {
                console.log(error);
                toast.error('Ops, algo deu errado !!');
                setLoadingAuth(false);
            })
    }
EPNS Partners with Snapshot to Deliver Notifications to Improve Community Governance
Published: 2021-07-15 16:42:00

Decentralized Autonomous Organisations (DAOs) are becoming increasingly popular with more and more projects becoming one. DAOs can be thought of as an internet-business that is managed by its community. DAOs allow the community to decide the future of the organization by submitting and voting on proposals, ensuring that everyone’s voice is heard.

Snapshot allows the community to propose and vote off-chain, meaning that users can use Snapshot to easily participate in governance without having to pay for transaction fees.

We’re excited to partner with Snapshot. With this collaboration EPNS will be creating notifications for proposals on Snapshot which will be triggered for all the token holder delegates of a specific governance project. We will also be implementing an EPIP to create a notification that can also allow these users to not only use call to action but to also sign these proposals right from the notifications if they want to.

Working together will also give us the opportunity to further refine our protocol, and expand its core features and functionalities to cope up with the dynamics of governance.

### About Snapshot
Snapshot defines itself as an off-chain, gasless, multi-governance client that allows the community to create and vote on proposals as well as to verify its results. The project enables communities to run token holder votes on an off-chain level.

There are no charges to create a proposal and to vote on Snapshot. Proposals and votes are signed messages which are stored on IPFS.
Snapshot is fully customizable allowing users to customize domain names, to choose a voting strategy, the proposal threshold (the minimum number of tokens required to create a proposal) and even to add the POAP plugin to reward the community members who voted in a proposal.
HTML Dom Parser to find all links
Tags: php
Published: 2021-07-15 16:39:22

First of all you need to download html dom parser file from sourceforge. Then this code will work for you best.
Here is the code you can find all links and text in the [Free Fire Apk](https://freefireapk.download) url. 

##PHP Code

<?php
include('simplehtmldom/simple_html_dom.php');

// Create DOM from URL or file
$html = file_get_html('https://freefireapk.download/');

// Find all links, and their text
foreach($html->find('a') as $elm) {
  echo $elm->href .' ('.$elm->plaintext. ')<br/>';
}
?>
CSS Grid Cheat Sheet 🔥
Tags: webdev, css, beginners, productivity
Published: 2021-07-15 16:39:06

Hi dev friends!

I made this CSS Grid Cheat Sheet that fits on one page. I hope this will help you learn the grid layout. Please let me know what you think of it :)  

If you want to see more resources like this one and coding tips, you can follow me on [Twitter](https://twitter.com/simonpaix "Twitter") 🚀 

![learnpine_grid_cheat_sheet](https://github.com/simonpaix/images/blob/main/blog/LearnPine_Grid_CheatSheet.png?raw=true)
TrueFi Taking DeFi to New Horizons with EPNS
Published: 2021-07-15 16:10:32

DeFi is a space where maximum disruption happens every day. Thanks to the powerful composability of Ethereum, new solutions emerge quickly, and enable more people to participate in this financial revolution. When it comes to loans, collateralized and uncollateralized loans have attracted new kinds of players to the DeFi space.

With the mutual goal to grow this exciting space, we are thrilled to announce that we are working with TrueFi to develop the core EPNS protocol. TrueFi is a team with a notable trajectory building cutting-edge products for Web3, and we are looking forward to working with the team to refine the EPNS protocol to create sustainable, decentralized notifications.

Our pilot program with TrueFi will consist of: Creating a standard for the TrueFi platform that will enable sending notifications based on predefined thresholds and conditions.

1. For borrowers: Notifications around when rates are changing and when their existing loans are coming due
2. For stakers and lenders: Creating a communication channel to keep token holders aware of new loan requests that require voting and provide stakers with a fast and efficient way to go to the app and vote for/against a loan.
Working with the TrueFi team to enable technical discussion towards building the decentralized communication layer that is scalable and powerful. TrueFi brings a new concept to the DeFi scene with the idea to attract major industry players and institutions as borrowers looking to secure high-value long term loans. We are grateful to be partnering with one of the most innovative teams in the space to help take DeFi beyond.

## About TrueFi
TrueFi is a DeFi Protocol for on-chain, unsecured lending, which allows earning high yields on stablecoin loans and borrowing capital without collateral. You can stay in touch with TrueFi on Twitter and Discord. About Ethereum Push Notification Service EPNS is a decentralized notification protocol that enables users (wallet addresses) to receive notifications. Using the protocol, any dApp, service or smart contract can send notifications to users in a platform-agnostic fashion (mobile, tablet, web, user wallets, etc).
Try to use functional component over class component in react
Tags: react, javascript, beginners
Published: 2021-07-15 16:06:08

1. Functional component are much easier to read.
2. Class components are stateful while Functional are stateless.
3. You end up with less code. Fewer lines = better performance
4. It will get easier to separate container and presentational components because you need to think more about your component’s state if you don’t have access to setState() in your component
5. Class component has lifecycle it has to run the lifecycle methods where functional components doesn't have any life c
6. No need of `this`
7. React dev team said that there may be a performance boost for functional component in coming versions.
UI/UX TIPS TO DESIGN FORMS IN WEB APPLICATIONS
Tags: uiux, webdev, devops, app
Published: 2021-07-15 16:00:24

**Hello to everyone!**

Forms are one of the common ways the user interacts with applications, they are almost everywhere. While making a purchase, creating a profile, or signing up for newsletters, building forms the right way can easily boost your user interaction as the application becomes more friendly. I will be giving some minor and easy tips that can help you build better forms as a frontend developer or even as UI/UX designer.

In our article we've noticed some forms, I think you'll find it interesting, so you can click to the [link](https://exceed-team.com/tech/ui-ux-tips-to-design-forms-in-web-applications?s=de&a=d).
You are welcome!
How I created in-memory DOM?
Tags: react, javascript, webdev, html
Published: 2021-07-15 15:51:31

![Virtual DOM](https://i.morioh.com/200626/b35254e4.jpg)
[Img Credits](https://morioh.com)  

## Introduction
Few weeks back, I had a task to create an online code editor for HTML, CSS, JS and show the output on the same screen.

### Why I needed in-memory DOM?
I stored different codes in different variables and for showing the output on same screen, I had to create a virtual DOM and merge all the codes (HTML + CSS + JS) together and inject it into an iframe.

## Code

{% gist https://gist.github.com/abhishekraj272/ca3f3096756e7cb7f3f75d08ca9533a7 %}

The above code takes HTML, CSS and Javascript as string and then combines them together in HTML. It returns the merged code as a string then it is injected into an iframe.

## Demo
You can see the working of the above code in this app.
[Web Code Editor](https://abhishekraj272.github.io/Bro-Code-Web-IDE/)

*Edit 1.*
Changed the title from VDOM to in-memory DOM, as I mistook it for a VDOM.
Thanks @lukeshiru for the suggestion.


#### Img Credits
1. [Crello](https://crello.com)
2. [Morioh](https://morioh.com)