teleren/devto huggingface dataset:
I Made my First App in JavaScript!
Tags: beginners, javascript, codenewbie, css
Published: 2020-05-07 11:44:14

Today marks the 85th day of my Journey of #100DaysOfCode. For those of you who don't know, #100DaysOfCode is a challenge started by Alex Kallaway in which you have to code daily for at least an hour a day for the next 100 days.{% user ka11away %}

## My Journey
I started my journey by learning HTML and CSS on [FreeCodeCamp](https://www.freecodecamp.org). At the end of the first course, I made 5 Responsive Web Designs needed to get the certificate and I got it. 

Then I started learning JavaScript on the same platform but I just couldn't get the gist of JavaScript, especially ES6. It drove me nuts so I stopped and started a [Web Developer Bootcamp by Colt Steele](https://www.udemy.com/course/the-web-developer-bootcamp) on Udemy. He taught JavaScript with DOM Manipulation which made it fun but it was simple stuff and ES6 was not covered and neither the complex stuff like Array methods, fetch API, promises etc.

So I bought another course: [The Modern JavaScript Bootcamp](https://www.udemy.com/course/modern-javascript) by Andrew Mead and I gotta say, this is the best investment I have ever made in my life! During the course, there are numerous challenges that you have to do by yourself and it pushes you to write your own code.

I learned a lot and for the first time, I was totally into JavaScript. When the course ended, Andrew suggested that the students make a Recipe App. I thought it's going to be a piece of cake. But boy was I wrong! It took me FIVE days!
### The work begins!
![Welding Image](https://images.unsplash.com/photo-1514300546238-fc275971c073?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1932&q=80)
First I worked on the HTML and CSS part of the app, but I wasn't so interested in the design and I just wanted to move on to the JavaScript part. Worked on the logic for the next 3 days. It took me this long because I'm relatively new to this stuff. On the 5th day, I debugged my app and uploaded it. Now I know, it doesn't look anything like an app with a perfect design and logic but still for me, a JS and CSS CodeNewbie, I deserve a pat on the back for building something.
I am going to keep building trivial projects like this one to hone my skills and get a grip on knowledge. Check out [My Recipe App](https://www.app.recipe.hassansuhaib.com)

### Why am I telling you this?
Because I want to give this advice to all the Code Newbies and beginners out there to get out of the loop of endless tutorials and build stuff of your own. You will get stuck frequently, it's part of the process. Google it until you find the solution. This will improve your problem-solving skills and build your confidence and once you complete something decent, it will boost your morale and motivate you.

## Conclusion
In the end, I will say that no matter how many tutorials you watch, the real learning starts when you open an IDE on your own, create a new file, and start writing code. You will learn all those little things that aren't and can't be covered in tutorials. Good luck and happy coding!
Run remote retrospectives using Trello
Tags: tutorial, trello, atlassian, retrospective
Published: 2020-05-07 11:39:05

Here's quick walkthrough how we run retrospectives using Trello boards. It's fairly simple workflow, and can be adapted with easy. 

Few things to add,

* this approach turns out works well for both remote and in office environments;
* can be highly customized depends on needs;
* I haven't say that in video, but it's removes frictions with post-its, and use cards instead, and creates a possibilities to have issues to discuss in advance, prior to retrospective.


I'm using [Playbook framework](https://www.atlassian.com/team-playbook/plays/retrospective) by Atlassian as an example for this board

---
If you have any questions, please let me know in comments below.
Webpack 5 Boilerplate
Tags: webpack, javascript, webdev, react
Published: 2020-05-07 11:24:36

---
title: Webpack 5 Boilerplate
published: true
description: Webpack 5.x.x Boilerplate setup
tags: Webpack, Javascript, Web development, React, webdev
---

Post:
https://medium.com/@zural143/basic-webpack-4-and-es5-to-es6-transpiler-using-babel-dc66e72c86c6

Github:
https://github.com/sivaraj-v/react-webpack-starter-kit

I need to get rid of the following error in build, Looking for a solution.

> npm run build or yarn build

```
$ webpack --mode production
10% building(node:94651) [DEP_WEBPACK_MAIN_TEMPLATE_GET_ASSET_PATH] DeprecationWarning: MainTemplate.getAssetPath is deprecated (use Compilation.getAssetPath instead)
95% emitting HtmlWebpackPlugin(node:94651) [DEP_WEBPACK_MAIN_TEMPLATE_GET_PUBLIC_PATH] DeprecationWarning: MainTemplate.getPublicPath is deprecated (use Compilation.getAssetPath(compilation.outputOptions.publicPath, options) instead)
```
IP Packet Sniffing Project Start :D
Tags: c, pcap, beginners
Published: 2020-05-07 11:18:17

In this part of my project, I am trying to create a program to sniff packets from multiple adapters using libpcap. These packets should be able to be piped to different programs with ease.

##Current Plan
My current plan for this is to create 3 different major functions,
sniff(), alter(), send(). 

##Sniff() Objectives:
1. can analyze multiple adapters at once
2. should be able to read packets
3. analyze packet type, flags, and data
4. pipe packets out at minimal latency
5. doesn't read the same packets twice over a network

To start with the sniffing code, there are a couple important pcap functions that are used in code in the following order.

pcap_open_live(), pcap_lookupnet(), pcap_compile(), pcap_next().

We are not using pcap_loop() or pcap_lookupdev() for the following reasons:
1. pcap_loop will only run through a single adapter thus preventing us from running this program from altering packets.
2. pcap_lookupdev() will only grab the top adapter, without allowing us to choose which, this makes it harder choose which packets to run where.

A big problem I encountered  was trying to create an array of (pcap_t*) devices to make my job easier on looping them. But I always encountered segfaults because `pcap_t *device[size]` will throw me into inaccessible addresses. A rather inelegant way that I "bypassed" this is by creating a (char*) array and point these to the pcap_t devices via hardcode. If you know better methods, please do drop them down below.

`ptr[a] = pcap_open_live(d->name, snaplen, 1, 1000, ebuf);`
This function creates a device of "d->name" which is a string containing the interface name with a capture length of snaplen which is specified to 1500. This 'pcap_t *' is saved to an array via reference so that we can scroll through different interfaces for packet write out.

`(pcap_lookupnet(d->name, &localnet, &netmask, ebuf)`
This function grabs the netmask and IPv4 network number from the interface "d->name".

`(pcap_compile(ptr[a], &fcode, cmdbuf, 1, netmask)`
This function begins pcap functionality and to grab the data, we have to use `pcap_next`.

```
while(run){
        for(i = 0; i < deviceEnteredCount; i++){
            packet[i] = pcap_next(ptr[0], &header);
		    raw_print(pcap_userdata, &header, packet[i]);
        }	
}
```

To roll through all the pcap_t devices, we use a pointer to point towards the devices and simply run it in a loop. This loop is stopped by a Ctrl-C command.

####Self-reminders:
1. Always read manpages whenever you use libraries so you don't waste time when implementing functions.
2. Check code for memory leaks and hopefully prevent segfaults.
3. Learn how to use malloc properly.

####Notes for the future self:
1. Try multithreading it to increase performance.
2. Minimize a function size for more adaptability.
3. Try to not hardcode please :( It's not pretty.

{% github irrafie/PCAP-Sniff-and-Alter %}
40: HTTP 
Tags: webdev
Published: 2020-05-07 11:17:40

**HTTP is a protocol that allows the fetching of resources, such as HTML documents. It is the foundation of any data exchange on the Web and it is a client-server protocol, which means requests are initiated by the recipient, usually the Web browser. A complete document is reconstructed from the different sub-documents fetched, for instance, text, layout description, images, videos, scripts, and more.**


*Clients and servers communicate by exchanging individual messages (as opposed to a stream of data). The messages sent by the client, usually a Web browser, are called requests and the messages sent by the server as an answer are called responses.*



--- 
##**Components of HTTP-based systems** 
HTTP is a client-server protocol: requests are sent by one entity, the user-agent (or a proxy on behalf of it). Most of the time the user-agent is a Web browser, but it can be anything, for example, a robot that crawls the Web to populate and maintain a search engine index.

Each individual request is sent to a server, which handles it and provides an answer, called the response. Between the client and the server, there are numerous entities, collectively called proxies, which perform different operations and act as gateways or caches,

In reality, there are more computers between a browser and the server handling the request: there are routers, modems, and more. 

Thanks to the layered design of the Web, these are hidden in the network and transport layers. HTTP is on top, of the application layer. Although important to diagnose network problems, the underlying layers are mostly irrelevant to the description of HTTP.

[Futhermore, Resource From MDN An overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)
How to deploy Discourse in Cloud
Tags: discourse, opensource, cloud, automation
Published: 2020-05-07 11:03:25

### As an open-source community forum platform, **Discourse** proposes an out of the box approach. It is developed as a social interaction method looking to empower the community mindset. It uses an automatic trust system that encourages the members of the community to vote out trolls and spammers.

In this step by step tutorial, we are going to show you how to deploy Discourse in Cloud by using Bunnyshell, the easiest tool to manage your technology stack on **multiple clouds**. Since it is the same interface, the commands are similar on different clouds, including Azure and Digital Ocean, AWS.

**Step 1**: Log in your Bunnyshell account (cloud.bunnyshell.com) and open the Dashboard.

On the left side of the page you will see the main menu where you can find environments (you can see the environment as projects in your business e.g tracking, production), package bundles (a package contains apps that are already configured and ready to use), and one-click apps (apps like Jorani,  Jenkins, WordPress a which are ready to deploy).

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

**Step 2**: Go to **RESOURCES** and select **One Click Apps**

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

**Step 3**: Here you will find a variety of apps that you can deploy on your cloud. If you can’t find the app you are looking for, you can use the search bar located on top of the apps. When you found the app you need, click on it.

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

**Step 4**: Press **“Launch in Cloud”** button:

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

**Step 5**: Give the app a name, and choose: the location of the server, a virtual network, and the server size.

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

**Step 6**: Next, you need to look at the bottom of the page. There you will find the application secrets that you have to complete. 

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

**Step 7**: Once you are done, all you have to do is to click on **DEPLOY**. Then you will be redirected to a page where you can see that Discourse is deploying. You can click on View logs to see how the app is deployed.


Your job here is done. You can now focus on creating the best forum for your visitor. Give yourself some time to learn how to use all of the functionalities of Discourse.

See? You can easily deploy *Discourse* in Cloud with Bunnyshell!
6. Annotations in Java
Tags: java, annotations, devops, beginners
Published: 2020-05-07 10:58:17

# 6.1. Annotations in Java
Annotations provide data about a class that is not part of the programming logic itself. They have no direct effect on the code they annotate. Other components can use this information.

Annotations can be preserved at runtime (RetentionPolicy.RUNTIME) or are only available at development time (RetentionPolicy.SOURCE).

# 6.2. Override methods and the @Override annotation
If a class extends another class, it inherits the methods from its superclass. If it wants to change these methods, it can override these methods, i.e., redeclare the methods. This is necessary for an abstract method unless the class itself is defined as abstract.

The @Override annotation can be added to such a method. It is used by the Java compiler to check if the annotated method really overrides a method of an interface or the extended class.

To override a method, you use the same method signature in the source code of the subclass.

To indicate to the reader of the source code and the Java compiler that you have the intention to override a method, you can use the @Override annotation.

The following code demonstrates how you can override a method from a superclass.

package com.vogella.javaintro.base;

class MyBaseClass {

    public void hello() {
        System.out.println("Hello from MyBaseClass");
    }
}
package com.vogella.javaintro.base;

class MyExtensionClass2 extends MyBaseClass {

    @Override
    public void hello() {
        System.out.println("Hello from MyExtensionClass2");
    }
}
It is good practice to always use the @Override annotation. This way the Java compiler validates if you did override all methods as intended and prevents errors.

# 6.3. The @Deprecated annotations
The @Deprecated annotation can be used on a field, method, constructor or class and indicates that this element is outdated and should not be used anymore. Adding @Deprecated to the class does not deprecate automatically all its fields and methods.

# 6.4. Type annotations
Java supports that annotations can be placed on any type. The following gives several examples assuming the annotations exists.

@NonNull String name;
List<@NonNull String> names;
class UnmodifiableList<T> implements @Readonly List<@Readonly T> {...}
email = (@Email String) input;
new @Information MyObject();
void doSomething() throws @ImportantForMe MyException { ... }
Contact Us In Bootstrap 4
Tags: css, webdev, design, beginners
Published: 2020-05-07 10:55:53


Contact Us form use is for a user to helping purpose. How the website owner gets in touch with you and much more. So here we designed simple and responsive contact us form using bootstrap 4.

In this form, we used the bootstrap grid class and one image HTML tag. Also, we used CSS3 properties and media queries to make this element responsive. Here we used the box-shadow effect in a form and we also modify bootstrap input filed classes. We used some attractive background color and also used for texts.
 
Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Get Source Code Now](https://w3hubs.com/contact-us-in-bootstrap4/)
Dynamic Bar Charts Example Using Google Charts in Laravel 7
Tags: laravel, barChart, chart
Published: 2020-05-07 10:53:59

Hello Artisan

Hope you are doing well. In this tutorial i am going to discuss about laravel charts. That in this tutorial i will show you how we can display bar chart or how we can create bar chart dynamically in laravel 7. 

To do this laravel dynamic bar charts i will use google charts. Google Charts provides a perfect way to visualize data on your website.Using this google charts i will show you how we can show our product data info in bar charts. I will be a simple demo tutorial on laravel bar charts.

https://www.codechief.org/article/dynamic-bar-charts-example-using-google-charts-in-laravel-7
Cloud DevOps Leaner ... Looking for great shout out on this topic from community members...
Published: 2020-05-07 10:50:43

I am working currently with AWS SA or AWS Networking Speciality Certification and very much interested in DevOps... I also finish my docker training and so far going good. Now Next working for the kubernet CSA certification.. I would like to know which path will be better for me as there are alot to learn but i want to start with DevOps career asap..
I am thinking to do as below and appreciate feedback--
1. AWS Associate - Completed 
2.Docker- 90% Completed 
3.Kubernet Administration - Yet to start and will finish till June End..

what next--- I am thinking for the Google Kubernet and Azure Kubernet....Do i need again google/Azure cloud knowledge or can work without that...
Advice needed
Tags: javascript, beginners, frontend
Published: 2020-05-07 10:48:10

Hi, I'm new in this field and I'm a beginner. I know HTML and CSS and I've been struggling with knowing JavaScript.

I don't feel good copying code from site to build a simple basic project. 

Most days, I feel stupid. I question myself most times and wondering if I made the right decision of wanting to become a frontend developer. These days, I'm feel discouraged. My educational background is Mass Communication and everything about programming seems new and very foreign, although I've been on this journey for more than a year now.

Please, what tips do you have for me that will help me improve? How do I code without copying other people's code? I want to be better at this.
GitHub's online IDE
Tags: news
Published: 2020-05-07 10:44:56

GitHub, oh how we love GitHub ⭐

Well here's some news about a new feature that GitHub is rolling out.

Online Visual Studio Code that runs in the browser, isolates your code in a virtual environment and makes collaboration even easier.

Gone are the days of fixing merge conflicts on your phone on the train.

Gone are the days of long explanations when pairing. Just log in, code and collaborate.

It's called Codespaces 🧙🏽‍♂️
spacy: TEXT = data.Field(tokenize = 'spacy')
Published: 2020-05-07 10:23:05

Why the code execution varies on this way of code:
code 1: 
tokenize = 'spacy'
TEXT = data.Field(tokenize)
code 2:
TEXT = data.Field(tokenize = 'spacy')
code 2 was giving error for missing 'en' from spacy while code 1 did not.
Any idea why?
It's time to understand the code visually
Tags: python, javascript, typescript, codenewbie
Published: 2020-05-07 09:56:27

Yeah, you heard me right, it's time to visualize the code.


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

When I started learning to code it was quite difficult for me to even understand the working of simple loops, data structures, how the iterations work, etc, especially when it comes to understanding the complete code. The reason for this post is that I see many other people facing the same problem.

I found a tool  [Python Tutor](http://www.pythontutor.com/) by  [Philip J. Guo](http://pgbovine.net/)   through which the code can be executed step by step and understood visually and the tool is easy to use. 


![final_5cf2c124b11a53001491b73f_951079.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1559413289980/F9rDUJFvJ.gif)

I have used this tool extensively when I started learning python and even now when I see some complicated code ;). Currently, it provides visualization for

1. Python
2. Java
3. C
4. C++
5. JavaScript
6. TypeScript
7. Ruby

Along with visualization, it has live programming mode for  [Python](http://www.pythontutor.com/live.html#mode=edit)  and other languages mentioned above. One of the interesting features that I like about this is while visualizing the code I can get live help from the coders around the world. 

I am in love with this tool, it's a bookmark in my browser and I guess it deserves bookmark in your browser too. Now we can say that coding is easy.

![tenor.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1559414470877/pYavMfSCL.gif)

I would love to hear from you about your favorite tools. Always remember 
> Whether you draw diagrams that generate code or you type at a browser, you are coding.
-Kent Beck

I hope you liked this article. You can follow me on  [DEV](https://dev.to/kedark)  or  [Twitter](https://twitter.com/KodgireKedar) to get updates on future articles.

Happy Coding.


---

### Further Reads

{% link https://dev.to/kedark/free-illustrations-resources-for-the-web-make-your-next-project-cooler-525c %}

{% link https://dev.to/kedark/things-to-consider-for-good-typography-on-the-web-22nm %} 

{%  link https://dev.to/kedark/three-dots-in-js-spread-and-rest-explained-40e %}
If you have error logs when starting shell with tfenv on anyenv.
Tags: bash
Published: 2020-05-07 09:51:44

# TL;DR

You can use [anyenv-tfenv-init](https://github.com/rugamaga/anyenv-tfenv-init).
```shell
mkdir -p $(anyenv root)/plugins
git clone https://github.com/rugamaga/anyenv-tfenv-init.git $(anyenv root)/plugins/anyenv-tfenv-init
```

# What is the issue?

If you are using tfenv installed via anyenv,
maybe, you seen in each startup of your shell following message:

```shell
No such command 'init'
Usage: tfenv <command> [<options>]

Commands:
   install       Install a specific version of Terraform
   use           Switch a version to use
   uninstall     Uninstall a specific version of Terraform
   list          List all installed versions
   list-remote   List all installable versions
```

This message is happen by interface mismatch between anyenv and tfenv.
Anyenv expect `init` subcommand for each *env, but tfenv have no `init` subcommand.

Each(anyenv, tfenv) upstream repository aware this problem, but no movement for 1~2 years.
https://github.com/tfutils/tfenv/issues/53
https://github.com/anyenv/anyenv/pull/81

# How solve it?

`tfenv` can extend by user, by placing binary named `tfenv-*` in PATH directories.
This anyenv plugin adapting these interface mismatch by placing `tfenv-init`.