teleren/devto huggingface dataset:
Why did I decide to blog?
Tags: firstpost, intro
Published: 2021-04-22 19:08:34

## Introduction

The thought of starting my own blog has followed me for years now. It's not about trying to get recognised, it's more about having so much to say, but no place to put it, so it can be useful for others. It's also an important achievement - overcoming the fear of failing.

Fear is what stops most of us, it helps us avoid irreversible mistakes, but it's also one of the most crucial reasons why it's so hard to succeed at something. There have been so many occasions where I was too afraid to continue working on project, because -

> What if it doesn't succeed? It is just wasted time.

A couple months pass, and the idea I originally had is now making millions, but I am sitting here, regretting not taking the risk at the right time.

This is the time I finally take the risk, but not for just myself - I want to educate people who are new to the industry, drive amateurs forward and help experienced specialists to argument their own opinion by referencing to my articles or sometimes even solve a problem of their's. 

## What kind of content should we expect from You?

I will be writing my blog in a "systematic chaos" approach that is my life as a software engineer and CTO, by simply telling You how my day went, maybe making a rant and then explaining what problems I had and how I solved them. 

## Will You be talking about code?

Absolutely, code is my bread and butter, let me share some of it with You too. 

## What technologies can we learn from You?

I mostly code in TypeScript (Node,React) and PHP, but don't worry, I have plenty of tricks up my sleeve. 

Thank You for reading this short post! Let's see where this journey leads us!
From Rails scaffold listing to Hotwire infinite scroll
Tags: ruby, 5days5blogposts, rails, programming
Published: 2021-04-22 19:06:01

Rails scaffold is a technique for quickly generating a typical CRUD UI. 

It's a server-side rendered html which allows listing/editing/creating/deleting records.

One of the promises of the modern approach to building UI (like hotwire or stimulus reflex) is how easy it is to just tweak the backend logic, without using JavaScript at all.

Let's look at the example of infinite scroll - full tutorial how to do it is [here](https://lewisyoul.github.io/infinitely-scrolling-lists-with-hotwire-and-zero-javascript) and [here](https://dev.to/stevepolitodesign/create-an-infinite-scrolling-blog-roll-in-rails-with-hotwire-2a8n).

I just want to focus on the "diff" how to make it work.


This is a typical Rails scaffold preparing all the posts to be displayed.

```ruby
  def index
    @posts = Post.all
  end
```

This is the equivalent Rails view (rendering html).

```erb
  <% @posts.each do |post| %>
    <div>
      <h1><%= post.title %></h1>
      <p><%= post.body %></p>
    </div>
  <% end %>
```

Now, in order to use Hotwire (actually Turbo Frame) we change the controller to this:

```ruby
  def index
    @page = params[:page] ? params[:page].to_i : 1
    offset = (@page - 1) * PER_PAGE
    @posts = Post.offset(offset).limit(PER_PAGE)
    @next_page = @page + 1 if @posts.size == PER_PAGE
  end
```

In short, we pass 3 parameters to the view: page, posts, next_page.

And the view changes to this:

```erb
<%= turbo_frame_tag "posts_#{@page}" do %>
  <% @posts.each do |post| %>
    <div>
      <h1><%= post.title %></h1>
      <p><%= post.body %></p>
    </div>
  <% end %>

  <% if @next_page %>
    <%= turbo_frame_tag "posts_#{@next_page}", loading: :lazy, src: posts_path(page: @next_page) %>
  <% end %>
<% end %>
```

We wrap the whole thing with a `turbo_frame_tag` and we append more such frames for next pages. That's it.

As you can see the middle of the view stayed the same. 

The UI now lists posts and keeps appending them when we scroll down.

I'm not claiming that it's amazing or something. But the practicality of getting our app more interactive, while not jumping to JavaScript is simple yet powerful.

I like it as it allows me to gradually extend my app with new features. 

If you like audio to educate yourself then I recommend this podcast to learn more how it works:

[https://www.codewithjason.com/rails-with-jason-podcast/episodes/092-vladimir-dementyev-5fK__ZQf/](https://www.codewithjason.com/rails-with-jason-podcast/episodes/092-vladimir-dementyev-5fK__ZQf/)
Java 9 Factory Method for Collections: List, Set, Map
Tags: java9, factory, collections
Published: 2021-04-22 17:35:46

https://grokonez.com/java/java-9/java-9-factory-method-for-immutable-collections-list-set-map

Java 9 Factory Method for Collections: List, Set, Map

Java 9 provides new static factory methods for creating instances of collections and maps conveniently with small number of elements. In this tutorial, we're gonna look at how to create List, Set, Map with Java 9 Factory Method for Collections.

<!--more-->
<div id="tuttoc" class="jsa-toc"></div>

<div id="tutcontents">
<h2>I. List</h2>
To create a List, we use those static methods:
<pre><code class="language-java">
// for empty list
static <E> List<E> of()
// for list containing one element
static <E> List<E> of(E e1)
// for list containing two element
static <E> List<E> of(E e1, E e2)
// ...
// for list containing an arbitrary number of elements
static <E> List<E> of(E... elements)
</code></pre>
For example:
<pre><code class="language-java">
List<String> immutableList = List.of();
immutableList = List.of("one", "two", "three");
</code></pre>
If we try to create list with <strong>null</strong> element, a <code>java.lang.NullPointerException</code> will be thrown:
<pre><code class="language-java">
List<String> immutableList = List.of("one", "two", "three", null);

Exception in thread "main" java.lang.NullPointerException
	at java.base/java.util.Objects.requireNonNull(Objects.java:221)
	at java.base/java.util.ImmutableCollections$ListN.<init>(ImmutableCollections.java:233)
	at java.base/java.util.List.of(List.java:859)
</code></pre>
Because the list created with static factory method is immutable, so if we try to add an element to list, it also throws an <code>java.lang.UnsupportedOperationException</code>

More at:

https://grokonez.com/java/java-9/java-9-factory-method-for-immutable-collections-list-set-map

Java 9 Factory Method for Collections: List, Set, Map
What's New in Codesphere Version 1.8.0
Tags: changelog, webdev, cloud, programming
Published: 2021-04-22 18:40:56

>The latest Codesphere updates!

##What's New?

###Features
* Added Python support
* Ability to create an app from a GitHub URL
* Added FAQ page

Starting today, Codesphere **supports Python** and allows users to create an app directly from a **GitHub URL**. The feature works in the following way: navigate to [codeshere.com](codesphere.com/?utm_source=devto&utm_medium=article&utm_campaign=release1.8.0) and append a `#`, followed by a GitHub URL of any public repository. This will create an app by cloning the repository. The final URL will look something like this: http://codesphere.com/#https://github.com/

You can now also find a brand new **[FAQ page](https://codesphere.com/faq)** on our website with answers to any questions you may have.

In addition, our team is working on allowing users to connect their own domains to your Codesphere apps, which you can expect in the coming week along with a tutorial video on our [YouTube channel](https://www.youtube.com/channel/UCct2nMF-TNjVFz5-hDnln7w/videos). 

We are working hard to make Codesphere even more enjoyable to use. Stay tuned for future releases!

As always, thanks for using Codesphere.

Happy coding!
How to Build Q&A Models in Python (Transformers)
Tags: python, datascience, machinelearning, deeplearning
Published: 2021-04-22 18:27:02

{% youtube scJsty_DR3o %}

Asking a question to a machine and receiving an answer was always the stuff of sci-fi in the not too distant past.

Now, things have changed, and we find ourselves using Q&A systems everywhere — without even realizing it.

Google search is the best example — although in most cases Google is used to find information and will simply point you in the right direction, many other queries are direct questions — to which Google often provides direct answers.

Of course, Google is ahead of the game. But that doesn’t mean that we can’t produce great Q&A systems — we can — and we can even use the exact same models that Google uses in their search.

In this video, we will learn how to use state-of-the-art transformer models for Q&A. We will take a look at Google’s Bert and how to use it.
Web Components are the Future
Published: 2021-04-22 18:26:32

# Introduction: What are Web Components?
Didn't you read the title? Web Components are the future. They're basically technologies used to create reusable custom elements. They're kind of like plugins, but for web development rather than software. Web Components can be used with any JavaScript library or framework that works with HTML.

**Web Components are based on four major specifications:**
- **Custom Elements:** Foundation for designing new DOM elements.
- **Shadow DOM:** Defines how to use encapsulated style and markup in Web Components.
- **ES Modules:** Defines inclusion and reuse of JS docs.
- **HTML Templates:** Handles instantiation of fragments of markup for later use.

## So why are Web Components "The Future"?
### Improved Accessibility
Accessibility is crucial in web development. If your application is not widely accessible to anyone and everyone, you're doing something wrong. Creating and using custom elements can allow you to tailor your application to account for all users. Using a custom element is extremely simple. All you need to do is import it and use the new tags in an HTML document. So once you've made an element (or someone else has publicly), it's just about as easy as copying and pasting. Compared to writing an entire web page from scratch, importing a Web Component is MUCH easier and faster, and it makes it more widely accessible to everyone. 

### Future Proof
As hardware and software change, older methods often get left in the past. Web Components will stand the test of time for one major reason: they are adaptable. At their core, Web Components are literally made for serving multiple purposes. Compared to frameworks, which change frequently and render older versions useless, Web Components can be easily altered at any moment to fit the current situation.

### Who's using Web Components?
A lot of big names, actually.
Heard of Google?
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r0j1keu28fdb0bh7o4ht.png)
 
How about EA?
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpu7gxc9n9hqq0y9qbzy.png)
 
What about YouTube?
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otzdn17ll4jfolqd077e.png)
 
Watch this video if you'd like to see me show how these sites implement Web Components:
https://youtu.be/lFVY6qh7yQI

If you're interested in where I'm getting this information, hit these links (Because I sure as hell didn't figure all this out on my own)
https://www.webcomponents.org/
https://dev.to/bennypowers/lets-build-web-components-part-1-the-standards-3e85
Install node using NVM in under 3 mins
Tags: node, nvm, linux, unix
Published: 2021-04-22 18:12:39

# Hey There!🙋‍ 
### This article is about installing Node on a Unix/Linux based system. We are using NVM to do this 


### You can also follow this video by me....(Don't forget to subscribe!)
{%youtube XMNeu6Oggd8 %}

##### This guide can be followed on: > 1) Linux based distributions like Ubuntu, Debian, Red Hat, Fedora > 2) Unix distros MacOS ... etc. 
## Step 1 
#### Visit [https://github.com/nvm-sh/nvm](https://github.com/nvm-sh/nvm) to visit nvm's github repository ![Image](https://i.postimg.cc/fyBVZK50/Screenshot-from-2021-04-21-19-48-22.png) "Nvm github" 

#### Now we can scroll down untill we find a list of commands ![Installation commands](https://i.postimg.cc/j529Zqm0/Screenshot-from-2021-04-21-19-51-50.png) 

## Step 2 
#### Now, we just have to run these commands. 

##### Command 1: Use curl/Wget to run the Install/Update script.

###### Using Curl: ``` curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash ``` 

###### Using Wget: 
``` wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash ```
#### We have to export some ENV (Enviornment variables)... Run these 2 commands ```export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" ``` 
```sh [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm ```

## Step 3 
#### Use NVM to install Node! 
#### Now we have successfully installed NVM. Time to use It. 
##### To install the latest LTS version of node, run: ```nvm install --lts ``` 
##### To install latest version of node, Run: ```nvm install node ``` 
##### To install a specific version of node, run: ```nvm install 12.0.0 # This istalls node v12.0.0 ``` 
##### To use a specific version: ```nvm use 12.0.0 # Uses node v12.0.0 ``` 
### That's It! Now you have node running on your system! 
-------


###### Encountered an error? Comment below!
From Zero to Hero (▀̿Ĺ̯▀̿ ̿) in Authentication | Part 2
Tags: beginners, webdev, security, computerscience
Published: 2021-04-22 18:09:21

Authentication in simple word is just saying "Who you are😕?" for an Application. Authentication is the first step while developing an application so it is very important to understand it. In previous post we understand **What is Authentication & its type.!**. In this post, we're going to dive deep and understand various ways to implement authentication.

## What we're going to discuss
- ⛑Basic Auth
- 🍪Cookie/Session Based Auth. 
- 🔑JWT
- 🌐OpenID Connect 

# ⛑Basic Auth
The basic authentication scheme is built into the HTTP protocol. UserID and password are Base64 encoded and send to the server with every subsequent request. The client sends HTTP requests with the Authorization header that contains the word Basic word followed by a space and a base64-encoded string username:password. 
For example, to authorize as `xyz:pass` the client would send
```
Authorization: Basic eHl6OnBhc3M=
```
As it should only be used with HTTPS/SSL or anyone can read the credentials.

# 🍪Cookie/Session Based Auth. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvp4udi6h08em783zdbo.png)
In this method, After a user securely authenticates a session ID is generated and stored in the server memory. Then that session ID is stored in the cookie in the client browser. While the user remains logged in, the cookie is sent with every subsequent request.
At each request, the server takes a look at the session cookie to read the session ID. If it matches the data stored in its memory, it sends a response back to the browser letting it know everything’s okay and ready to go.

# 🔑JWT
![JWT Token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvxh3zj6hpjhca7igu5s.png)
[JSON Web Token (JWT)](https://jwt.io/introduction) is an open standard ([RFC 7519](https://tools.ietf.org/html/rfc7519)) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the HMAC algorithm) or a public/private key pair using RSA or ECDSA.

JSON web tokens work in a similar way as a bank account number on a cheque, and the signature that’s placed on it to approve the transfer of money with the cheque.

# 🌐OpenID Connect 
OpenID Connect is a simple identity layer on top of the OAuth 2.0 protocol. It allows Clients to verify the identity of the End-User based on the authentication performed by an Authorization Server, as well as to obtain basic profile information about the End-User in an interoperable and REST-like manner.
Java Date Time – How to build SpringBoot RestApi – Post/Get request with Java Date Time using Jackson
Tags: java, springboot, datetime
Published: 2021-04-22 18:06:13

https://grokonez.com/spring-framework/spring-boot/java-date-time-how-to-build-springboot-restapi-post-get-request-with-java-date-time-using-jackson-and-make-query-with-spring-jpa-in-mysql-postgresql-examples

Java Date Time – How to build SpringBoot RestApi – Post/Get request with Java Date Time using Jackson and Make Query with Spring JPA example

[no_toc]
In the tutorial, we build a SpringBoot RestAPIs example that post/get data with <code>java.util.Date</code> time and save it to MySQL/PostgreSQL database using Spring JPA. Working with Java Date Time is an exciting part but also not easy task, fortunately we have the supporting from utilities of Jackson lib, now the job can be done in an easy way.

Let's do details by steps!

<!--more-->
<h2>Format Java Date Time with Jackson</h2>
<h3>Set the Format with @JsonFormat</h3>
With the <code>@JsonFormat</code> annotation of Jackson, we can use it to format a specific field in Java model:

<pre><code class="language-java">
public class DateTimeModel {	
    
    @JsonFormat(pattern="yyyy-MM-dd")
    private Date date;
    
    @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss")
    private Date datetime;
	
	...
}
</code></pre>
<h3>Set TimeZone with @JsonFormat</h3>
For setting Time Zone, we use <code>timezone</code> attribute of the <code>@JsonFormat</code>:

<pre><code class="language-java">
@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss", timezone="Europe/Paris")
private Date datetimewithzone;
</code></pre>
<h3>Set Default Format</h3>
We can configure a default format & time-zone for all dates in <code>application.properties</code>:

https://grokonez.com/spring-framework/spring-boot/java-date-time-how-to-build-springboot-restapi-post-get-request-with-java-date-time-using-jackson-and-make-query-with-spring-jpa-in-mysql-postgresql-examples

Java Date Time – How to build SpringBoot RestApi – Post/Get request with Java Date Time using Jackson and Make Query with Spring JPA example
Let's stop talking SQL
Tags: watercooler, devjournal, architecture, agile
Published: 2021-04-22 18:02:12

Communication is often underestimated in our job. That's because when we start our journey with software engineering, we focus on the hard skills, such as backend language, frontend language, CI/CD, databases, infrastructure, and all the other sexy stuff. But as our seniority level increases and we get more and more experienced, we should start thinking about our soft skills as well. Because our job stops being just writing the code. Communicating with other team members and business gets more and more important.

In this post, I will use business interchangeably with the Product Owner, Manager, or anyone that should bring application requirements, in your company.

## Unhealthy relation
Have you ever experienced when a business or Product Owner / Manager came to you and said that he wants you to display certain columns from the database on UI? Or that you should simply select, insert, whatever value into the database?

This is just an example. I hope you see where I am going. The business often gives us **workarounds** or what they think is the best *technical* solution, instead of requirements.

**I truly believe that we need to understand the problem first before we solve it.**

And let's be clear here. I don't mean that you need to learn about CROSS-JOINS to solve the problem. I mean to understand the purpose. The WHAT of what the person that talks with you want to achieve.

It might involve some discussions. It might require some time. Especially when you'll start digging for the first few times.


## Looking through the prism of what we currently know

What I noticed is that the business or users of our application often look through the prism of the current system. Many times, it's not what the business or users really want. Talking with users or the business will lead to a better solution. 

Ask few questions. Try to truly understand a problem. You might get surprised when during discussions you'll run into a solution that doesn't require writing a single line of code.

Let's stop talking SQL.
Tools to Visualize your Terraform plan
Tags: terraform, visualize, tooling, shortposts
Published: 2021-04-22 17:50:40

It all started with this [code sample with Terraform scripts](https://github.com/VidyasagarMSC/vpc-private-k8s-public-lb) 

For starters,[Terraform](https://www.terraform.io) is open-source software, developed by HashiCorp, that enables predictable and consistent provisioning of IBM Cloud platform, classic infrastructure, and VPC infrastructure resources by using a high-level scripting language. You can use Terraform to automate your IBM Cloud resource provisioning, rapidly build complex, multi-tier cloud environments, and enable Infrastructure as Code (IaC).

Think of a scenario in which you are revisiting your own Terraform scripts and scratching your head to understand what resources it provisions. 

To simplify this, there is an in-built Terraform command 

```sh
terraform graph
```

> The [terraform graph](https://www.terraform.io/docs/cli/commands/graph.html) command is used to generate a visual representation of either a configuration or execution plan. The output is in the DOT format, which can be used by [GraphViz](http://www.graphviz.org/) to generate charts.

You can use the command to generate a `.png` file from the dot output 

```sh
terraform graph -type=plan | dot -Tpng > graph.png
```
or 
```sh
terraform graph -type=plan | dot -Tpng -o graph.png
```

If there are too many resources, then the graph will look something like this.

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

As you can see, readability is a challenge and also there are extra nodes in the graph that are not required. So, you need better tools to visualize your Terraform plan. 

### Blast radius 
    
[Blast Radius](https://28mm.github.io/blast-radius-docs/) is a tool for reasoning about Terraform dependency graphs through interactive visualizations. Awesome tool but couldn't make it work with the newer versions of Terraform. As per the Dockerfile in the respective repository and the comments in the issues, the last Terraform version that worked fine was `0.12.x`.

### Terraform Visual

[Terraform Visual](https://hieven.github.io/terraform-visual/) is a simple but powerful tool to help you understand your Terraform plan easily.

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

[Click here](https://github.com/VidyasagarMSC/vpc-private-k8s-public-lb/blob/master/diagrams/terraform_visual.png) to see the large image

![](https://raw.githubusercontent.com/hieven/terraform-visual/master/docs/demo.gif)

> Needs additional steps like generating `plan.dot` file and then `plan.json` file. but, a pretty good tool for any version of Terraform.

### Inframap
[Inframap](https://github.com/cycloidio/inframap) reads your `tfstate` or HCL to generate a graph specific for each provider, showing only the resources that are most important/relevant.

If you know any other visualization tools, please drop in a comment below and would love to give it a try :smile: