teleren/devto huggingface dataset:
Frontend x Backend [em Português]
Published: 2021-05-17 17:14:41

# O que são?

Esses dois termos se referem às diferentes partes de uma aplicação. São mais usados em desenvolvimento web, mas também podem ser usados no desenvolvimento de aplicações para outras plataformas. Neste artigo, eu vou falar sobre frontend e backend na perspectiva do desenvolvimento web.

# Frontend

Toda a parte da aplicação com a qual o usuário interage. A estrutura e o comportamento do que é visto na tela são responsabilidade do desenvolvedor que atua nessa parte.

## Linguagens de programação

- HTML
- CSS
- Javascript

Cada uma dessas linguagens tem a sua função e você precisará das três para se tornar um desenvolvedor front-end.

### HTML

O HTML é responsável pela estrutura da página. É usando-o que você define quais elementos vão aparecer na tela.

### CSS

O CSS é responsável pela estilização da página. Desde cores, bordas e margens até animações são criadas com essa linguagem.

### Javascript

O Javascript é responsável pelo comportamento da página. Você precisará usar essa linguagem para realizar ações em cliques de botão ou para enviar formulários, entre outras coisas.

## Frameworks

Os frameworks ajudam facilitar e agilizar o desenvolvimento. Eles contém código pronto de coisas que precisamos usar em vários projetos (ex: barra de menu) ou de tarefas trabalhosas (ex: receber dados de uma base e mostrar em uma tabela).

### CSS

- Bootstrap
- Materialize

### Javascript

- Angular
- React
- Vue.js

# Backend

A parte que lida com os dados e a lógica de negócio da aplicação. O usuário não tem contato direto com essa parte da aplicação. Geralmente, o backend trata de tarefas que exigem um certo nível de segurança, ex: autenticação.

## Linguagens de programação

- Java
- Javascript
- PHP
- Python
- Ruby

Os frameworks de backend seguem o mesmo conceito dos frameworks de frontend mas desempenham funções diferentes. O Express, por exemplo, é um framework do ambiente em tempo de execução (JRE) Node.js que auxilia em funções como o tratamento de rotas.

## Frameworks

- Django
- Laravel
- Ruby on Rails
- Spring Boot
Frontend x Backend
Tags: brazil, english, webdev, beginners
Published: 2021-05-17 17:14:28

# What they are?

These two terms refer to different parts of an application. They are more used in web development, but can be used in development of applications in another platforms. In this article I will talk about frontend and backend in the perspective of web development.

# Frontend

The whole part of the application with which the user interacts. The structure and the behavior of what appears on the screen are responsibility of the developer that works at this part.

## Programming languages

- HTML
- CSS
- Javascript

## HTML

HTML is responsible for the structure of the page. It's using it that you define which element are going to appear on the screen.

### CSS

CSS is responsible for styling the page. From colors, borders and margins to animations are created with this language.

### Javascript

Javascript is responsible for the behavior of the page. You will need to use this language to perform actions on button clicks or to submit forms, among other things.

## Frameworks

Frameworks help facilitate and streamline development. They contain ready-made code for things we need to use in various projects (eg, menu bar) or laborious tasks (eg, receiving data from a database and displaying it in a table).

### CSS

- Bootstrap
- Materialize

### Javascript

- Angular
- React
- Vue.js

# Backend

The part that handle data and business logic of the application. The user does not have direct contact with that part of the application. Usually, the backend of an application deals with tasks that require a certain level of security, i.e.: authentication.

## Programming languages

- Java
- Javascript
- PHP
- Python
- Ruby

Backend frameworks follow the same concept as frontend frameworks but perform different functions. Express, for example, is a framework for the runtime environment (JRE) Node.js that assists in functions such as handling routes.

## Frameworks

- Django
- Laravel
- Ruby on Rails
- Spring Boot
🧩 State Management in Vue 2 Applications
Tags: vue, devrel
Published: 2021-05-17 17:12:06

#### 📚 In this tutorial, you will learn and demonstrate how to perform state management in Vue 2 applications using Vue's standard state management library, Vuex.


## <br>
**TL;DR:** In today's world of front-end applications and their component-based architectures, components will most often need to share data amongst themselves to be displayed or used to achieve certain functionality. Keeping data synced and up-to-date amongst components in a modern front-end application can quickly become a tedious and frustrating task if not tackled using a battle-tested strategy. This has led to the development of quite a several state management libraries with certain frameworks having a de-facto state management library that they naturally work well with (e.g. [Redux](https://redux.js.org/) for [Reactjs](https://reactjs.org/)). In this tutorial, you will learn and demonstrate how to perform state management in [Vue 2](https://vuejs.org/) applications using Vue's standard state management library, [Vuex](https://vuex.vuejs.org/).

## What We Are Going to Build

In this tutorial, you will be implementing state management in a shopping cart built with Vue 2. You will begin with an already built e-commerce application that sells different types of wares; however, this application is yet to be complete as its shopping features for adding products to the cart, and managing cart items are not implemented yet. Using the Vuex state management library, you will be adding the following features to the application:

- Loading the products from a central state store
- Adding items to the shopping cart
- Displaying items added to the shopping cart
- Calculate the total price of items in the cart
- Increase and decrease the quantity of the items in the cart
- Remove items from the cart

## Prerequisites

To follow along with this exercise, there is a couple of setup/knowledge required:

- [Node.js](https://nodejs.org) installed on your system. You can visit the website and install a suitable version for your operating system [here](https://nodejs.org/en/).
- [Vue CLI](https://cli.vuejs.org/) installed on your system. You can install this by running the command: `npm install -g @vue/cli`
- Basic knowledge of Vue and using Vue [components](https://vuejs.org/v2/guide/components.html).

With all these in place, you can proceed with the exercise.


[Read more...](https://auth0.com/blog/vue2-state-management/?utm_source=content_synd&utm_medium=sc&utm_campaign=vue)
Edit a previous commit during an Interactive Rebase
Tags: git
Published: 2021-05-17 17:01:22

Before starting make sure you commit and push your code (see rebase --abort and hard reset in case you mess up and just want to start over). You should also create a backup `git branch backup-your-branch-name`

#Steps:
1. `git fetch`

2. `git rebase --interactive HEAD~20` **NOTE:** on `HEAD~20` this is the number of commits into the past you will look at while inside the --interactive rebase. 

3. Locate the commit in question 

4. All commits will have the word `pick` next to them in your text editor. Change the `pick` next to chosen commit to `edit`. Save and exit. (in Nano this is ctrl-x then Y then enter). **NOTE:** Now if you type `git log` you will see that you are sitting at the place in time right after you made the commit you want to change.
 
5. `git commit --amend` will allow you to make changes to the previous commit 

6. Enter `git log` to check and make sure your target commit is at the top of the log list. 

7. Make your changes and run `git add .` to add those changes. 

8. Run `git commit --amend` to open the commit message in your editor, save it, and exit. This will squash your changes into the target commit. This will change the commit hash code. 

9. Run `git rebase --continue` and you should get the message `Successfully rebased and updated refs/heads/<your_branch_name>`.

10. Check to make sure everything seems normal and then do `git push -f` to replace the remote copy of your branch with your fixed local copy. 

#Prerequisites: 
##How is fetch different from pull? 

**git fetch** is the command that tells your local git to retrieve the latest meta-data info from the original (yet doesn't do any file transferring. It's more like just checking to see if there are any changes available)

**git pull** on the other hand does that AND brings (copies) those changes from the remote repository.

##What is a rebase? 

`git rebase` rewrites the commit history in order to produce a straight, linear succession of commits. Basically what it does is take the fetched commits and your commits and reorders them in the correct way (it is actually creating new commits to do that but for a basic understanding we won't get into any of that). 

The reason we do a rebase is so that when you push up your code and merge it with the `main` or `master` branch you won't rewrite anything anyone else added before you. 

##Tried this and it got totally f'd? 

First, try to do `git rebase --abort` this will cancel the rebase and let you start over. If this doesn't fix your issue you can do a hard reset. 

A hard reset will replace your local branch with the branch that is stored remotely. !!!BE CAREFUL!!! only do this if you are 100% sure your local branch doesn't have important new info you don't have stored remotely. You can make a backup of your branch if you're concerned. `git reset --hard origin/<your-branch>`
Some basic terminologies in Java
Tags: java, codenewbie, motivation, goal
Published: 2021-05-17 17:00:17

So it's **day 2** of the learning journey and today we will get to know some of the basic terminologies used frequently in java.

1. **Classes** -
  + classes can be identified as Nouns in the problem statement
 + they are also called the **blueprint of an object**.
 + as per the rule every single class should define the single object and should contain data related to that object only.
 + For example - A human
2. **Objects** -
  + also called as an instance of the class.
  + consists of the exact values of the fields/properties defined by a class
 + objects are always related to the class.
 + For example - If humans are class then John is one of its objects.
3. **Fields** - 
  + fields can be of both objects as well as classes they are also called attributes or property.
  + they define actual values that an object of a class can hold.
  + only a method of an object should be allowed to change values of a field of the same object.
4. **Methods** - 
  + it can also be of both classes and objects.
  + can be understood as behaviours of an object or procedures.
  + are functions associated with an object.
  + changes values of fields of an object.
5. **Naming Convention in Java:-**
  + **PascalCase** => used for naming Class.
  + **camelCase** => used for naming Fields, Methods.
  + **SCREAM_CASE** => used for naming Constant Values.
  + **lowercase** => used for naming packages.
6. **Some key features of Java:-**

  i. Object-Oriented
  ii. Platform Independent
  iii. Simple and Easy to learn
  iv. Architecture Neutral
  v. Portable
  vi. Robust
  vii. Multi-threaded
  viii. Interpreted-byte code
  ix. High performance
  x. Distributed
  xi. Dynamic
My Custom Http Error In Golang
Tags: notes, go, errors, http
Published: 2021-05-18 19:56:41

---
title: My Custom Http Error In Golang
published: true
date: 2021-05-17 17:00:00 UTC
tags: Notes,golang,error,http
canonical_url: https://clavinjune.dev/en/blogs/my-custom-http-error-in-golang/
---

This is how I handle error with golang on http server

```go
package e

import (
	"errors"
	"fmt"
	"net/http"
	"runtime"
)

// Error implements built in error with status code, caller, and message attribute
type Error struct {
	Err error
	statusCode int
	message string
	caller string
}

// New wraps err with defined statusCode and message
func New(err error, statusCode int, message string) error {
	return &Error{
		Err: err,
		statusCode: statusCode,
		message: message,
		caller: getCaller(),
	}
}

// Wrap wraps err with custom message
// Wrap's result inherit statusCode from err if err equals *Error
func Wrap(err error, msg string) error {
	var e *Error
	statusCode := http.StatusInternalServerError

	if errors.As(err, &e) {
		statusCode = e.statusCode
	}

	return &Error{
		Err: err,
		statusCode: statusCode,
		message: msg,
		caller: getCaller(),
	}
}

// From creates new error from defined statusCode
// if statusCode doesn't have any status text
// statusCode changed to http.StatusInternalServerError
func From(statusCode int) error {
	text := http.StatusText(statusCode)

	if text == "" {
		text = http.StatusText(http.StatusInternalServerError)
		statusCode = http.StatusInternalServerError
	}

	return &Error{
		Err: errors.New(text),
		statusCode: statusCode,
		message: "",
		caller: getCaller(),
	}
}

// Error returns error message with caller
func (e Error) Error() string {
	if e.message == "" {
		return e.Err.Error()
	}

	return fmt.Sprintf("%v\n[%v] > %v", e.Err, e.caller, e.message)
}

// Unwrap enables errors.As and errors.Is
func (e Error) Unwrap() error {
	return e.Err
}

// StatusCode returns e.statusCode
func (e Error) StatusCode() int {
	return e.statusCode
}

// getCaller uses log.Lshortfile to format the caller
func getCaller() string {
	_, file, line, ok := runtime.Caller(2)
	if !ok {
		file = "???"
		line = 0
	}

	short := file
	for i := len(file) - 1; i > 0; i-- {
		if file[i] == '/' {
			short = file[i+1:]
			break
		}
	}
	file = short

	return fmt.Sprintf("%s:%d", file, line)
}
```

Usage:

```go
package main

import (
	"database/sql"
	"errors"
	"fmt"

	"e"
)

func main() {
	base := e.New(sql.ErrNoRows, 404, "user not found")
	base2 := e.Wrap(base, "bleh")
	concrete := e.Wrap(base2, "there's no user with such credentials")

	fmt.Println(concrete)
	fmt.Println(errors.Is(concrete, base))

	var ee *Error
	if errors.As(concrete, &ee) {
		fmt.Println(ee.StatusCode())
	}
}
```

Result:

```bash
sql: no rows in result set
[main.go:11] > user not found
[main.go:12] > bleh
[main.go:13] > there's no user with such credentials
true
404
```
Ruby's quirky load order for mixins
Tags: ruby
Published: 2021-05-17 16:52:23

Ruby modules are a great way to define [mixins](https://www.geeksforgeeks.org/ruby-mixins/). This construct offers a way to share logic using [composition](https://en.wikipedia.org/wiki/Object_composition).  
  
As it is usually the case with Ruby, there's two ways of mixing (or `include`ing) ruby modules into your class:  
  

```ruby
class Post
  include Categorizable
  include Copyable 
end
```

  
OR  
  

```ruby
class Post
  include Categorizable, Copyable 
end
```

At first glance you might think those two syntax are identical, but Ruby has a quirk that isn't immediately obvious. To demonstrate this, let's print out a line from those two module when they're included:  
  

```ruby
module Categorizable
  def self.included(base) 
    puts "Categorizable included"
  end
end

module Copyable
  def self.included(base) 
    puts "Copyable included"
  end
end
```
  
Now we can see the what's going on under the hood when these modules are included.  
  

```ruby
class Post
  include Categorizable
  include Copyable
end
 
Post.new # =>
# Categorizable included
# Copyable included
```

  

```ruby
class Post
  include Categorizable, Copyable
end
 
Post.new # =>
# Copyable included
# Categorizable included
```

  
As demonstrated by those above snippets, the load order of the modules in the two examples is different. The first syntax option loads from top to bottom as you'd expect. The second example however load from right to left.  
  
In most cases this shouldn't matter as mixins should usually be independent of each other. However it's easy to get tripped up by this if a module depends on another module being loaded.  
  
Here's an example from HEY shared by DHH on how to manage this quirk without making a mess:  
<figure class="attachment attachment--preview attachment--jpeg">
  <img src="https://cdn.chapter24.blog/1620914186fCpOXKHLkX8-NwljH_jGRw">
</figure>  
It's usually best to use a combination of the two syntax as demonstrated in the image above. This makes any dependencies between the mixins blatantly obvious to anyone reading the code.  
  
I love Ruby and it's weird quirks like this; but it's always good to know when something subtle like this might trip you up!

_This article was initially published on [my blog](https://binarysolo.chapter24.blog/rubys-quirky-load-order-for-mixins/)_
Custom util to call functions `n` times
Tags: javascript, webdev, codenewbie, beginners
Published: 2021-05-17 16:34:20

```js
const repeatFn = (n, fn) => {
  const results = [];
  for (let i = 0; i < n; i++) {
    results.push(fn());
  }
  return results;
};

const result = repeatFn(3, () => Math.random());
console.log(result); // [ 0.50.., 0.25.., 0.08.. ]
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for more.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack  
**[codedrops.tech](https://www.codedrops.tech/)**

---
**Projects**  
[File Ops](https://marketplace.visualstudio.com/items?itemName=mehullakhanpal.file-ops) - A VS Code extension to easily tag/alias files & quick switch between files
Local Storage: Store data into the user’s browser
Tags: javascript, webdev, browser, frontend
Published: 2021-05-17 16:21:06

**To avoid the long process of store a user's simple activities in the database is to store them in his/her browser.**

Local Storage is key-value pairs and it’s read-only. So you can access Local Storage in Javascript via the window.localStorage property.

For storing data you need to use setItem() which takes two parameters: a key and a value.
```
localStorage.setItem(‘name’, ‘Jonh Doe’);
```
If you want to store an array or an object you need to convert them into a string.

```
const seatsIndex= [1,4,5]
localStorage.setItem(‘selectedSeats’, JSON.stringify(seatsIndex));
```

For getting back the data from the Local Storage, use getItem() method. This one only accepts the key parameter.

```
localStorage.getItem(‘name’);
```

And if you converted array or object to a string, for retrieving, you should convert it back.

```
const selectedSeats = JSON.parse(localStorage.getItem(‘selectedSeats’));
```

For removing a single item, use removeItem() method.

```
localStorage.removeItem(‘name’)
```

And For clearing all items, use clear() method.

```
localStorage.clear()
```

Web browsers also have another storage called Session Storage and the difference between them is the Local Storage has no expiration date so the data not be deleted when the browser refreshed or closed, but the Session Storage deletes data when the tab is closed.

note: do not store user’s sensitive data in Local Storage.
Application of NLP
Tags: nlp, machinelearning, datascience, python
Published: 2021-05-17 16:13:05

Read more about natural language processing at my website 😊
https://buggyprogrammer.com/what-is-natural-language-processing/
![application fb](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkup6icp2rgc2kbuw2fb.png)
Test Webhook on localhost serve using Laragon
Tags: laravel, paystack, php, ngrok
Published: 2021-05-17 15:54:20

Webhooks are a simple way to communicate different services, So if you are a web developer, you will need to understand how Webhooks work to use it in your web applications. Now, taking Paystack Nigeria as cast study you will see the integration and how to handle Webhooks with Laravel (PHP) and [Largaon ](https://laragon.org/). Without taking much of our time I'm let get started. 

[dont miss out how to improve the performance on laravel web app](https://dev.to/donejeh/improve-performance-by-deleting-laravel-log-file-via-routes-artisan-exec-1pe6)

**NOTE: This tutorial can be use on any system or web app that provides webhooks event deriving..**

## Requirements:
**=> [Largaon ](https://laragon.org/)**
**=> [Paystack Account] (https://paystack.com/)**

**Step 1:** if you have Download and install laragon, by default it comes **ngrok** per-installed. _ngrok provides a real-time web UI where you can introspect all HTTP traffic running over your tunnels_.

**Step 2:** open your laravel project on your laragon, and then we are going to use ngrok and expose of localhost host to live by I simply right click on the laragon icon then go to the following: , www ,share, share your project. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxmt9z1wmifv46ide4i8.png).

_ngrok expose your laragon local tunneling_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/loopvxy4ptpa1qlabyqh.PNG)

Copy the SSL url provided by ngrok and keep it some where safe.

**Step 3:** Goto your paystack dashboard under settings or any web application you are working with that has webhooks event as shown below using paystack webhooks as example.. 

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

replace your real domain name with ngrok domain name / the fullpath of your laravel roure example as shown below

**https://example.com/payment/webhooks**

with

**https://12ad5fbf1740.ngrok.io/payment/webhooks**

As a step 3, you must disable the CSRF token validation for the route we just configured. Because the request comes out of the session and does not contain the CSRF token. We add the path to exceptions where validation is not necessary. Open the **VerifyCsrfToken.php** file from _app/Http/Middleware_ and add the path to the $ except property.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yx8mbsz6kefehza57t4.PNG)

The webhooks will send requests to the URL (endpoint) that you indicated via your route which you will hander the payload and take a proper action on it. 

I think that it's, for comment and questioning you can drop it below else share and like ... :)

**
## UPDATE 21/092023
**

IF YOU CAN NOT EXPOSE DIRECTLY VIA LARAGON AS OF THIS DATE, THEN YOU CAN DOWNLOAD ngrok AND RUN THIS COMMAND BELOW 
ngrok `http --host-header=<your_domain_name> 80` 

**_NOTE: don't include http eg ngrok http --host-header=laravelbackend.test 80_**
Hi! 
Tags: beginners, blockchain
Published: 2021-05-17 15:53:15

Hello. I'm new here and am currently working on pivoting out of my old career into a new one. I believe the upcoming rise in blockchain related tech will give me an opportunity to make that change by focusing on a narrow skill set. From there I hope to broaden my education.

Currently I'm reading everything I can on the subject and working through tutorials, such as [cryptozombies](https://cryptozombies.io/). I'm also trying to feel out the landscape of dev-space to know where people that do this work spend their time. I see github is super important and am working through the labyrinth of various Discord, Telegram,and Keybase channels.

Any help, guidance, or criticism would be appreciated. One of my biggest concerns is once I've read/tutorial-ed/experimented with coding, how can I participate in a project to get my hands dirty?