teleren/devto huggingface dataset:
Be your own light in the darkness
Published: 2020-05-19 19:30:34



<center>_Cover image by [Nadine Shaabana](https://unsplash.com/@nadineshaabana?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/)_</center>

---

I'm most likely not the first person to do this kind of practice, but I would like to share it in case it might help anyone else.

I'm well aware of my incredible ability to forget things. It has always been like this since I was a kid. So in order to counter attack my weakness, I've come up with different practices like using To-Do lists, taking notes, writing things in paper, using a bunch of different calendar apps and yet I had to find something else that would help me to get back into old projects that are just sitting there in my GitHub profile collecting dust.

So here's where I introduce you to...

Writing.

Amazing, who would have thought, right?

Well... more specifically, writing to yourself in your tasks descriptions.

I've had a really nice relationship with apps like [Trello](https://trello.com/), which are really easy to get into and get things going with a few minutes of trying them out. 

So for me, I've used the good old To-Do, In Progress, On Hold, Done statuses for each task related to my projects.

But there's one thing that I came across and it's that none of those cards had any actual detail description of their progress. Sure, you can tell when it changed from one state to the other, but what happened there? I can't remember what I had for breakfast yesterday, so how the hell am I going to remember that.

Here's the trick: every time you are going to take a break, whether it is for a day or just for lunch, go ahead an write a comment on that card with your new findings, concerns, possible solutions or crazy ideas why something is not done yet.

And most importantly, write it down like a normal conversation to yourself, you don't need to be super formal and go all [Grammarly](https://www.grammarly.com/) mode.

You could even go deeper into it and take it as a self loving practice, if you will.

"Oh! your past-self is there to help you, to protect you from getting lost in the sea of ideas and symbols that we so cleverly wrote without ever questioning how the heck it will affect us in the future"

Yeah, we've all done it, and we still do. But hopefully this tip will make things just a bit better this time around :)
What is Terraform? How to write Infrastructure as Code with Terraform
Tags: terraform, aws, iac, devops
Published: 2020-05-19 19:15:24

Terraform and it's features
Terraform Scripts to deploy infra on EKS Kubernetes on AWS.
Check the link: https://youtu.be/9wRaFwKEUKI

{%youtube 9wRaFwKEUKI %}
itertools
(python3)
Published: 2020-05-19 19:07:18

itertools

The module itertools is a standard library that contains several functions that are useful in functional programming. 
One type of function it produces is infinite iterators. 
The function count counts up infinitely from a value. 
The function cycle infinitely iterates through an iterable (for instance a list or string). 
The function repeat repeats an object, either infinitely or a specific number of times.
Ultimate Jquery Speed enhacements for your website
Tags: jquery, dom, website, speed
Published: 2020-05-19 19:01:51

The DOM can get pretty slow quickly, especially if it becomes large. When we start accessing and manipulating elements within deep children of the DOM tree, these actions become extremely expensive, resulting in slow processing and loading speeds of your website or web app.

Fortunately there exists a few really good optimizing techniques to speed up the manipulation of the DOM considerably, making a noticeable speed up of your website when used properly. Let's get to it.

1. Caching selectors

Caching selectors can improve the DOM speed as it caches your selectors in memory instead of accessing its contents deep inside the DOM tree.
Here's how we can achieve selector caching:
```javascript
var mydiv = $('.mydiv');
```
Simple yet powerful.

2. Using stylesheets for changing CSS for many elements

Jquery documents that if you're changing up to 20 element's styles, it can damage your page speed a lot. instead there's a nifty technique that will result in a 60% speed increase.
```javascript
//if we have more than 20 elements that have the class 'box'
$('.box').css('color','red'); //this will be slow
//instead we append a style tag with the desired properties for that class
$( "<style type=\"text/css\">.box { color: red}</style>").appendTo('head');
```
Pretty neat, huh?

3. Optimizing Selectors
Since accessing and manipulating selectors can get really expensive, there are some cool and very simple tricks:
```javascript
$('.box > *'); //this can become very expensive
//instead use .children method
$('.box').children(); //much faster

//use .find instead of selector "finding"
$('.box p'); //slow
$('.box').find('p'); //fast

//avoid selector specifying
$('.box.container .text span'); //slow
$('.box span'); //better
```

4. Detach elements when working complex processes

I can't stress this enough, the DOM is slow, we constantly need to optmize it. When we are processing a large element inthe DOM, we can detach that element while we work on it
```javascript
var box = $('.box');
var tempbox = box.parent();
tempbox.detach(); //detach the element from the DOM 
// add a ton of elements here...
tempbox.append(box); //re-attach or append the element to the box element
```
A powerful yet not too complicated  technqiue

Conclusion
With these techniques we can considerably optimize the DOM speed of our web page. These are very usable and the opportunities come up very often, so take advantage of them and enjoy.

Like always, see you in the next post!

Uriel Bitton
Website: www.flexrweb.com
Email: info@flexrweb.com
A month into my coding journey
Published: 2020-05-19 18:56:56

About a month ago, i made the decision to learn to code mostly because i had reflected on my qualifications and it scared me that they seemed pretty basic, maybe even inadequate. It began from a conversation I had with a friend, and in it the idea of coding was seeded. i contacted my old college roommates who are already seasoned programmers and they gave me the down low about programming. As they spoke, my mind kept getting opened to the possibilities. Prior to this day, i had no idea what front-end or back-end meant as i was a total novice. suddenly the feeling of being lost disappeared. For the first time, this was something i actually wanted and was excited about, and it started to seem like I might finally find my path. Before long, they set me up with tutorials (thank goodness for amazing friends, right?) and thus began the journey.

 i installed the necessary softwares and my journey began. i went through each tutorial video like my life depended on it(lol, it did). A few days in, when the initial excitement and bravado began to wane, i started to feel something i later came to know as impostor syndrome. As the tutorials got harder, i began to wonder if this was really what i wanted to do. i rang up my buddies who were programmers one by one and they helped calm my mind down. i came to discover the developer community on social media. Tweets from Danny Thompson a developer whose story is an inspiration on its own were exactly what i needed to see everyday.

Fast forward to one month later, i look back and i see that I've come a long way from the scared novice i was a month ago. i can now write codes in HTML and CSS comfortably, I'm presently learning JavaScript as i plan to focus on the back-end of web development. I couldn't have done any of this without the help of the amazing people around me. this is just the first step in a million steps to come. for the first time in a long time, i'm excited about what the future holds for me. i say BRING IT ON!
Watch out for web dev scams!
Tags: webdev, emails, scam
Published: 2020-05-19 18:51:39

**You can't trust _anyone_. ** 

Okay, well, that's not exactly true.  I trust a lot of people day to day, but really: the Internet is a dangerous place, filled with scammers and people who'd just love to con you out of all your hard-earned money.  I never thought I'd be scammed as a web developer, though.  

Two days ago, I received a message from a person who called themselves Neil Obrien (notice the lack of an apostrophe).  This is the contents of the email:

> Micah,
> I stumbled across your portfolio and I decided to email you,  Off course I do have website to be create. 
 Below are my project details.
> Here are the job details I have small scale business which i want to turn into large scale business now it located in Minnesota and the company is based on importing and exporting of Sport wears such as running jacket, jersey,dance wear,socks, boots etc for both adult youth ladies and girls so i need a best of the best layout design for it. Can you handle that for me ? The site would only be informational, so i need you to give me an estimate based on my want below, the estimate should include hosting and i have a private project consultant, he has the text content and the logos for the site.

The email went on to detail exactly what Neil wanted on the website and ended with asking if I would accept credit card payments.

I was wary from the start.  I'm no idiot, and I've received several scam emails.  I generally consider myself good at sniffing out phishing, but this was my first job offer for web development!  I was happy!  So after an hour, I put together a PDF that contained an estimate for the job, what I would need to complete it, and the fact that I _did not_, in fact, accept credit cards.  I attached the PDF to an email and shot it off to Neil.  

When I woke up the next morning, there was no email in my inbox, so I waited a few hours and finally got a reply from Neil: 
> The price sounds good to me and I will like to proceed with you. But for the payment I do have issue making payment through PayPal and Venmo but you can set up an account with stripe.com. 

I finally came to terms that this was a classic credit card scam.  I would build the website, and "Neil" would supposedly pay me through Stripe.  His payment would end up being invalid, and I would have built a website for free for someone that would never reply to me nor pay me.  

So moral of the story?  Watch out for scams, guys.  The web isn't always a friendly place.  Luckily I ended communication before giving this scammer any of my time.  If you've ever experienced a scam like this, let me know in the comments.  I'd be really interested to know how many of you this has happened to.  

**Thanks for reading, and if you liked this post or thought it was useful, be sure to drop a follow if you're viewing on Dev.to or Hashnode, or put my [RSS feed](https://blog.micahlindley.com/rss.xml) through your favorite feed reeder!**
Signing Commits in `git`
Tags: tutorials, programming, git, coding
Published: 2020-05-19 17:45:26

---
title: Signing Commits in `git`
published: true
description: There are a few ways to sign commits in `git`
tags: tutorials,programming,git,coding
---

I found myself googling how to set it up a couple of times. Here are my notes on how to set up `git` so you are now in compliance.

I should make it clear that the difference between `signoff` and `gpg-sign` are significant but subtle. `signoff`  doesn't require the GPG key and is just the line: "Signed-off by" which is covered in the following quote.

DCO process only requires:

> Moving forward all commits to open source software projects must include a "Signed-off-by" line indicating the name and email address of the contributor signing off on the change.

For a [detailed description][detailed] or you can just do the following:

```bash
$ git commit -s
$ # Or
$ git commit --signoff
```
If you already have the commit, use `git commit --amend` or `git rebase -i` to edit your commit message, and add the above signoff line.

## .gitconfig

If you would like something more permanent, you can add to your `~/.gitconfig` something like the following:

```
[alias]
  amend = commit -s --amend
  cm = commit -s -m
  commit = commit -s
```

Or you can do something like [Dave Parfitt][dave] suggests; which is surprisingly easy. You can add this to your `~/.gitconfig`: (be sure to change your name and email address)

```
[commit]
    template = ~/.gitmessage
```

followed by:

```bash
~$ cat ~/.gitmessage

Signed-off-by: Your Name <email@addre.ss>
```

## magit

If you are attempting to do it in emacs with [magit][magit] you need to
the following:

`c - s RET` and you'll notice the `(--signoff)` switch become highlighted.


[detailed]: http://stackoverflow.com/questions/13457203/how-to-add-the-signed-off-by-field-in-the-git-patch
[magit]: https://magit.vc/
[gpg]: https://harryrschwartz.com/2014/11/01/automatically-signing-your-git-commits.html
[dave]: https://twitter.com/metadave
Understanding Istio: part 1 – Istio Components
Tags: kubernetes, devops, docker, beginners
Published: 2020-05-19 18:30:54

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

Understanding Cloud technologies, like Kubernetes, can be difficult or time-consuming. In order to spread knowledges about it, I started to create [sketchnotes about Kubernetes](https://dev.to/aurelievache/kubernetes-sketchnotes-pods-4ib0) and know it's time to talk about a perfect companion of Kubernetes, a service mesh, Istio.

We start our new serie of Sketchnotes about Istio, let's start with Istio components.

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

If you are interested, I published a book with all the sketchnotes on Istio (and new ones!): ["Understanding Istio in a visual way"](https://gumroad.com/aurelievache#vJYhM).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
Hi Dev Community, 👋 What's your UX methodology and approach process?
Tags: ux, design, startup, showdev
Published: 2020-05-19 18:20:13

**Hey my new fam,**

I love to be here and feel so good to be part of the community. I am a UX lover, and I would love to share my knowledge here within this developer community portal, and would also love to learn your UX-centered approach and process method.

**Much Love,**
Chaman Sharma, Director of Product @[DotnikStudio](https://dotnikstudio.com)
and Lead of Product Design at the [University of Delhi](http://www.du.ac.in)

{% user ux4web %}
Build REST API with Deno MongoDB and Oak 🦕
Tags: deno, mongodb, typescript, javascript
Published: 2020-05-19 18:16:15

Hi, everyone let's look at the new javascript/typescript runtime made by creators of Node. In the video, I will show how to make restful APIs using Deno, MongoDB, and Oak. 

{% youtube qU8BLXA6Bf4 %}

If you like the video please like the video and subscribe to the channel for Frontend Design and Development related videos.
Mastering GIT step-by-step: back to basics
Tags: git, github, codenewbie
Published: 2020-05-19 18:11:22

Do you start freaking out when you have to use git commands? You're not alone, we've all been there. I still am to be honest 🙈. I am writing this as much for me as for you! 

So I wanted to make a few articles to simply go over the basics and some less known - yet useful - commands. Let's go! 🤓

#What's git?#

It's a **version control tool that allows you to take snapshots of your files at specific moments**, so that you can easily go from a version to another. 

Since it's not tangible, it can be hard to apprehend. But you can think of it as the revision history feature on Google Docs for example.
You can see all the modifications that were made on a document and choose to go back to the state of the document at any point of those revisions.

![alt Google doc history](https://zappy.zapier.com/22818562-FAAC-4B69-9C9E-10E7E015FE80.png "Google doc history")

#Who uses it & why?#

It is mainly used by software engineers in order to:
* keep track of files & files' modifications
* be able to rollback to a previous version of your files if a bug occured
* have several people working on a same project AND at the same time


#The basic git commands: add, commit & push#

In order to understand the basic commands, we need to understand the different component of a .git project:
- **Workspace**: your file system, where you can view and modify files
- **Staging area**: where git keeps the modified files before they are committed. After committing, your Staging area will be empty.
- **Local repository**: it is the area that saves everything, where you will find all of your checkpoints or *commits* *.
```
💡 A *COMMIT IS A SNAPSHOT OF ALL YOUR FILES AT A POINT IN TIME
```
- **Remote repository**: server where changes made to files are uploaded (usually shared with collaborators).

![Alt Git schema](https://dev-to-uploads.s3.amazonaws.com/i/cn2b2qqygh9sl8f2xg15.png)

You can see the 4 different components on the diagram: **workspace, staging area, local repository & remote repository**.

##But how do we move our files from one stage to the other?##

By using the 3 following commands (also on the diagram). And yes, the order matters:

1 - `Git add <filename>`: the command will stage the file
💡 If you want to add all files, you can type `Git add *`

2 - `Git commit -m "commit message"`: the command will take all the files in the staging area and save them in the commit (snapshot). Your modified files are now saved, yaaayyy 🎉!
```
💡 WRITE IN THE COMMIT MESSAGE WHAT MODIFICATIONS YOU MADE. 
THIS WILL BE USEFUL IF YOU NEED TO GO BACK TO A SPECIFIC COMMIT.
```
3 - `Git push`: this command will send the modified files to a distant instance - the remote repository - and make it accessible to other developers

---

That's it for the basics. I hope you don't hate git yet & you got to understand some concepts better.

In the next articles, I want to cover the **good practices when working in a team (branches, merging,...), & some other useful commands**! Stay tuned if you're interested in that topic 👋
FastAPI on GCP App Engine
Tags: fastapi, gcp, python
Published: 2020-05-19 18:05:27

---
title: FastAPI on GCP App Engine
published: true
description: Deploy FastAPI on to App Engine
tags: FastAPI, GCP, Python
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/xc5iyxsado11xh7xv1k4.png
---

I made a 20 min video (link at the bottom) that demonstrates how to deploy a simple FastAPI app to App Engine on Google Cloud Platform. 
This tutorial can be followed along to practice on your own provided that you have a billing enabled GCP account.
This tutorials covers very basic details like 
- Creating a project in GCP,
- Accessing the Cloud shell,
- Clone the repository on to Cloud Shell VM, 
- Do a Sanity hosting of the FastAPI on Cloud Shell VM and explain about worker processes
- Create an App Engine
- Deploy FastAPI on to App Engine
- Check Logs of App Engine
- Clean up and Shutdown Project once practiced the tutorial.

### Some notes about billing
I have performed this deployment and shutdown the project after I'm done with deployment and learning a couple of months ago. So no bill has been generated for me. I do not even have credits active at the time of performing this tutorial.

### Link for tutorial
[Deploy FastAPI Python app to Google Cloud Platform on App Engine
](https://bit.ly/3g0VwFE "Deploy FastAPI Python app to Google Cloud Platform on App Engine")
Deploy JHipster with PostgreSQL in less than a minute
Tags: jhipster
Published: 2020-05-19 17:56:36

JHipster is one of the most popular Java frameworks. Build on top of Spring Boot, it is very convenient to bootstrap a web project. And now it's possible to deploy it in production in less than a minute. 

ps: I can't copy/paste the generated markdown due to custom components used

[Read more](https://docs.qovery.com/guides/tutorial/deploy-jhipster-with-postgresql/)
Using a Custom React based Modal, how can I pass a dynamic triggering function so I can re-use the component?
Tags: react, webdev
Published: 2020-05-19 17:49:49

I have the following component which makes up my modal:

````
import React from 'react';
import { ModalBody, Button, Alert } from 'bootstrap';
import { AppModalHeader } from '../../common/AppModalHeader';
import ModalWrapper from './ModalWrapper';

const QuestionModal= ({
    title,
    noText = 'No',
    yesText = 'Yes',
    questionText,
    onYesAction
    children
}) => {
    const { toggle, isOpen, openModal } = useModalForm();
    return (
        <React.Fragment>
            <ModalWrapper className={className} isOpen={isOpen} toggle={toggle}>
                <AppModalHeader toggle={toggle}>{modalTitle}</AppModalHeader>
                {isOpen ? (
                    <ModalBody>
                        <p>{questionText}</p>
                        <Button
                            className="float-right"
                            color="primary"
                            onClick={() => {
                                if (onYesAction !== undefined) {
                                    onYesAction(toggle);
                                }
                            }}
                        >
                            {yesText != null ? yesText : 'Yes'}
                        </Button>
                    </ModalBody>
                ) : null}
            </ModalWrapper>
            {children({
                triggerModal: () => openModal({ id: undefined }),
                toggle
            })}
        </React.Fragment>
    );
};

export default QuestionModal;
````
I want to use it as such, where I can dynamically choose the name of the trigger that opens the modal:

In use e.g. (note: the inner question modal would be repeated, used 4 or 5 times in my application):
````
....
<QuestionModal
     //....params that match up with above
    >
    {({ triggerModal }) => (
    <QuestionModal
         //....params that match up with the component
    >
        {({ triggerModal2 }) => (
        <>
           <Button onClick={()=>triggerModal();}>Trigger Modal 1</Button>
           <div>
               <Button onClick={()=>triggerModal2();}>Trigger Modal 2</Button>
           </div>
        </>
    </>
    )}
</QuestionModal>
....
````
How could I achieve this, by extending the question modal to pass a dynamic function? Just because I keep getting stuck in having to think about duplicating the original component, I want to make this component as reusable as I can. Any help would be greatly appreciated.

Thanks in advance