teleren/devto huggingface dataset:
Frontend components with Golang
Tags: go, webdev, tooling, programming
Published: 2021-04-24 08:25:48

---
title: Frontend components with Golang
published: true
description: Concept of Golang HTML render engine with frontend components and dynamic behavior
tags: golang, webdev, tooling, programming
cover_image: https://upload.wikimedia.org/wikipedia/commons/d/d1/Go_gopher_model_sheet.jpg
---

First of all, thank you for attention!
I'd like to present you HTML render engine concept, that brings frontend-like components experience to the server side with native html/template on steroids. Supports any serving basis (nethttp/Gin/etc), that provides io.Writer for response.

{% github yuriizinets/go-ssc no-readme %}

Please, keep in mind that it's work-in-progress, but already used in [BrokerOne](https://mybrokerone.com/) for some parts of our frontend and already shows good prospects.  

## Why?

I'm trying to minimize usage of popular SPA/PWA frameworks where it's not needed at all because it adds a lot of complexity and overhead. Nowadays JS ecosystem is overcomplicated and huge. I don't want to separately implement API, API communication layer, bring large runtime, state management engine, VirtualDOM and webpack into project with minimal dynamic frontend behavior.
This project proves posibility to keep most of the logic on the server side.

## What problems it solves? Why not plain GoKit?

While developing website's frontend with Go I realised some downsides of such approach:

- With plain html/template your're starting to repeat yourself. It's harder to define reusable parts
- You must to repeat DTO calls for each page, where you're using reusable parts
- With Go's routines approach it's hard to make async-like DTO calls in the handlers
- For dynamic things, you still need to use JS and client-side DOM modification

Complexity is much higher when all of them combined.

This engine tries to bring components and async experience to the traditional server side rendering.

## Features

- Component approach in mix with `html/template`
- Asynchronous operations
- Component methods, that can be called from client side (Server Side Actions, SSA)
- Different types of components communication (parent, cross)
build a social media website with Next JS and Firebase
Tags: showdev, javascript, nextjs, webdev
Published: 2021-04-24 08:14:37

Hello Everyone,

As the title say I created a social media website with Next JS framework and Firebase. Its a basic and simple social media just for learning new stuff about Next JS and Firebase.

Website Link : [http://emote.vercel.app/](http://emote.vercel.app/)
Github Link : [https://github.com/NV404/Emote](https://github.com/NV404/Emote)

This website is still in development.

##What I am Going To Add
+ All post by user on profile
+ Like and comment system
+ Suggestions system
+ Follow System
++ And many more stuff

**Tell me what you think about it.**
**Feel free to contribute.**
**Star the Repo If you like**
Angular: Inline Styles & Tests Setting
Tags: angular
Published: 2021-04-24 08:13:37

Every time when I create a component, I usually skip creating test and external CSS files by supplying following switches to the `ng` command

`ng g c my-component --inlineStyle=true --skipTests=true`

However, I can easily avoid this by setting it in  `angular.json` file

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fprwsuol8s91b438wi3.png)

The `inlineTemplate` setting help us to chose should I need a separate HTML file for UI or going to write HTML code inside the `.ts` file (like we do in React).
Debug Adapter Of VScode
Tags: vscode, editor, dlv, dlvdap
Published: 2021-04-24 07:47:27

The story comes from the issue:

https://github.com/golang/vscode-go/issues/1450

IF you are a Golang developer, you should know how to debug the Golang code. And we know that there many IDE or Editor we can use, some like:
* Goland
* Vscode
* Some people use Emacs, I guessed

But Goland is not free, except you are an open-source engineer and keeping active on the project which you contributed all time. And you can apply for the open-source License.

I'd like to say thanks to [Jetbrains](https://www.jetbrains.com)

So, if we use Vscode in order to debug our code, may need to pay more attention some issue from the language extensions.

As you can saw from the issue that some issues with the debug adapter. 


### Finally

If you debug Golang with Vscode, you should care about some issues.

I personally like both of them I mentioned above. And I'd like to help Vscode Golang debug adapter better. 

### Tip

There a tip I'd like to share with more people

When we want to use Vscode run the test functions like below

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

We should not like the `debug test` which locate on the function name. So, how should we do?

* Creating a debug configuration

```
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Test",
            "type": "go",
            "request": "launch",
            "mode": "test",
            // <Should be replace:The folder includes the test files like `xxx_test.go`>
            "program": "${workspaceFolder}/pkg/teams",
            "debugAdapter": "dlv-dap",
            "showLog": true,
            "logOutput": "dap",
            "trace": "verbose"
        }
    ]
}
```

And open the file location where you want to run(your cursor on the test method is good), tap `shift+command+p` MacOS, input `Debug Test At Cursor`, the Vscode would run the test methods which at your cursor, this is useful.
TCP/IP MODEL
Published: 2021-04-24 07:26:00

the TCP/IP model consists of five layers:
1.application layer
2.transport layer
3.network layer
4.data link layer
5.physical layer

TCP/IP is a hierarchical protocol made up of interactive modules, and each of them provides specific functionality. here, hierarchical means that each upper layer protocol is supported by two or more level protocols.

1.APPLICATION LAYER:
  the application layer is the higher abstraction layer of TCP/IP model that provides the interfaces and protocols needed by the users. it combines the functionality of  session layer, the presentation and application layer of OSI model. it facilitates the user to use the service of the network.

2. TRANSPORT LAYER:
 the transport layer in TCP/IP model
1.it facilitates the communicating host to  carry on a conversation.
2.it provides an interface for the users to the underlying network.
3.it can provide for a reliable connection. it can also carry out error checking, flow control, and verification.

3.NETWORK LAYER:
The Network layer is the third layer of the TCP/IP protocal stack from the bottom. The TCP/IP model network layers functions are similar to the network layer of the OSI model.

4.DATA LINK LAYER:
In the internet protocol suite , the data link layer functionality is contained within the link layer , the lowest layer of the descriptive model, which also includes the functionality encompassed in the OSI models physical layer 

5.PHYSICAL LAYER:
The physical layer places the bit stream on network media.On the destination device, the physical layer reassembles these signals into frame and transfers to its upper layer (Datalink layer , layer 2) of TCP/IP model for further processing .physical layer specifies the physical characteristics of network medium.
Share your website with others without hosting it on cloud!!!
Tags: localtunnel, hosting, react, npm
Published: 2021-04-24 07:24:30

## 1. Overview

The method discussed in this article is not an alternative to hosting sites on cloud, its just a temporary way of sharing the website while it is under development phase.

## 2. Setup

We are going to use *localtunnel* to expose our localhost to the internet.
* Step-1: Download and Install *npm* from [here](https://nodejs.org/en/download/).
**Note: Node installer includes npm.**
* Step-2: Install *localtunnel* using following command
``` 
npm install -g localtunnel
```
**Note: You may need to add 'sudo' before npm in linux/mac systems.**

This will install localtunnel globally. Read more about localtunnel [here](https://www.npmjs.com/package/localtunnel).

## 3. Expose localhost

For demo I am going to use a react based website, and run it on port **3001**.

![Screenshot_20210424_122806](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5rtgrpwhufply98hmtl.png)

Now the site is running on localhost, next step is to expose this localhost's port to internet, to do this we will run the following command on terminal
```
npx localtunnel -p 3001
```
**Replace '3001' with the port number your site running on**
 
This command will generate a link, this link can be visited in any device in any location and will redirect to the localhost's port on our localsystem. 
**Note: We need to keep serving the website on our localsystem's port**.

![Screenshot_20210424_124023](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dd8bw5gq7pcx481veo2.png)

## 4. Conclusion

Clearly this method is not an alternative to hosting the site on cloud, but can be very helpful for sharing websites/webapps, while they are under development. While setting up OAuth using facebook it requires redirect url with 'https' so localtunnel can be helpfull in this scenario too.

---
### [1]: [localtunnel](https://github.com/localtunnel/localtunnel#readme)
---
How to Push Commits to a Github Repo Using Git Bash?
Tags: github, git, python
Published: 2021-04-24 07:20:59

The lines on the command line should go as follows:
pwd >>> This is to check the current directory

cd /c/Users/... >>> This is to change it to whatever the name of the designated directory is

get init >>> This is to initialize your local directory as a Git repository 

git add . >>> This is to add the files to your newly created repo as well as stage them for the first commit 

git commit -m "initial commit" >>> This is to commit the files from the previous step to the local repo

git remote add origin HTTPS://URL >>> This is written in the command prompt to push the local repo to your online one

git remote -v >>> This is a continuation of the step above

git push -f origin master >>> This is to finally push the changes that you made to your local repo to your online one


#Git_It
Memblokir no telepon penipu secara online
Tags: scam, scammer, fraud, scamalert
Published: 2021-04-24 07:11:11

Dewasa ini sangat banyak kita dapatkan SMS penipuan yang berkedok hadiah undian, ataupun permintaan transfer yang mengatasnamakan operator seluler. 


Seperti mama minta pulsa, agen pulsa murah, atau sekarang yang marak kita temui, SMS cashback Shopee 75 juta.


Namun sayangnya masih banyak orang disekitar kita yang menjadi korban.


Sebenarnya kita bisa mengurangi tindak para pelaku tersebut dengan memblokir nomor handphone nya secara permanen.


Yaitu dengan mengirimkan SMS berisi laporan atau pengaduan penipuan pada masing masing operator, seperti yang saya uraikan di bawah ini:


1.Cara memblokir no telepon penipu XL

Jika pelaku menggunakan operator XL, formatnya: 
**Ketik**: Lapor#Nomor HP Pelaku# ISI SMS PENIPUAN lalu kirim ke 588. 	


Info ini bisa kita dapatkan melalui twitter resmi XL di @myXL


2.Cara memblokir no telepon penipu telkomsel

Untuk penipuan yang mengatas namakan operator telkomsel, menggunakan format:


**Ketik**: PENIPUAN#No HP Pelaku#ISI SMS PENIPUAN lalu kirim ke 1166


3.Cara memblokir no telepon penipu Indosat

Dan untuk penipuan yang mengatasnamakan operator Indosat, menggunakan format:


**Ketik**: SMS(spasi)No HP Pelaku(spasi)SMS Penipuan lalu kirim ke 726 


*Jika bingung no pelaku menggunakan operator apa, kirim saja kesemuanya toh layanan ini gratis. hehe


Sumber ini diambil dari Kompas.com, sehingga dapat kita simpulkan layanan pengaduan selain dari Call Center diatas, **SALAH**!!


(Karena masih banyak saya temukan di google, artikel yang menuliskan selain sumber diatas)

kompas.com/tren/read/2020/09/12/155306665/klarifikasi-pesan-catut-polri-soal-tips-blokir-nomor-ponsel-sms-penipuan?page=all#:~:text=Sementara%2C%20Telkomsel%20mengumumkan%20pelanggan%20yang,dapat%20mengirimkan%20SMS%20ke%20726.


Di [Myblog](https://irrin.web.id/) kita juga dapat mengetahui [ciri ciri penipu](https://irrin.web.id/ciri-ciri-penipu-dari-waktu-ke-waktu/), dan [cara melapor dan memblokir rekening penipu](https://irrin.web.id/lapor-dan-blokir-rekening-penipu/).

Semoga artikel ini bermanfaat😊
DataCamp Free Week
Tags: datascience, computerscience, database, machinelearning
Published: 2021-04-24 07:08:43

##DataCamp is giving unlimited access to all the courses for free for one week starting from 23rd April through 30th April 2021, 12 PM EST.

--------------------------------------------------------------

##So this would literally be the best time to grab some yearly subscriptions(which I have) which basically have unlimited access to all the courses and other things on DataCamp and make fruitful use of your time sitting at home during this Pandemic.

--------------------------------------------------------------

#So go for it folks and Happy learning


#https://www.datacamp.com/?tap_a=5644-dce66f&tap_s=841152-474aa4
Asynchronous HTTP client requests are coming in Laravel 8.x

Tags: laravel
Published: 2021-04-24 06:39:31

Back in March 2020, when Laravel 7 got released, a brand new HTTP client was introduced which was essentially a wrapper of Guzzle HTTP client. This made the developer experience a lot smoother and easier.

[Async HTTP client Requests are Coming in Laravel 8.x](https://www.codecheef.org/article/async-http-client-requests-are-coming-in-laravel-8x)

#YOU MAY ALSO LIKE
[How to Declare Class and Object in PHP](https://www.codecheef.org/article/how-to-define-a-class-and-object-in-php)
[PHP Login Script Using MySQLi jQuery and Ajax](https://www.codecheef.org/article/ajax-login-form-using-jquery-php-and-mysqli)
[Setting Up a Local Web Server for PHP](https://www.codecheef.org/article/setting-up-a-local-web-server-for-php)
[Curl Get Request with Parameters Example](https://www.codecheef.org/article/curl-get-request-with-parameters-example)
[PHP Connect to MySQL Database](https://www.codecheef.org/article/php-connect-to-mysql-database)
[Class Abstraction | Abstract class in PHP](https://www.codecheef.org/article/class-abstraction-abstract-class-in-php.html)
[Insert Data Into MySQL Database Table using PHP](https://www.codecheef.org/article/insert-data-into-mysql-database-table-using-php)
[PHP in_array() Array Function Example](https://www.codecheef.org/article/php-in-array-array-function-example)
[json_encode() Function | Convert PHP Array to JSON](https://www.codecheef.org/article/json-encode-function-convert-php-array-to-json)
[Don't use if else ladder in php rather use this method](https://www.codecheef.org/article/dont-use-if-else-ladder-in-php-rather-use-this-method)
[When to Choose Composition Over Inheritance in PHP](https://www.codecheef.org/article/when-to-choose-composition-over-inheritance)
[Refactor Your Conditions to a Method in PHP](https://www.codecheef.org/article/refactor-your-conditions-to-a-method-in-php)
[Way to Access Private Property or Method In PHP](https://www.codecheef.org/article/way-to-access-private-property-or-method-in-php)
[PHP Method Chaining Explanation with Example](https://www.codecheef.org/article/php-method-chaining-explanation-with-example)
[Prevent Spam Form Submissions by Bots in PHP](https://www.codecheef.org/article/prevent-spam-form-submissions-by-bots-in-php)
[How to Count PHP Array Avoiding Empty Value](https://www.codecheef.org/article/how-to-count-php-array-avoiding-empty-value)
[Pass by Value and Pass by Reference Example in PHP](https://www.codecheef.org/article/pass-by-value-and-pass-by-reference-example-in-php)
[How to Download File from URL in PHP](https://www.codecheef.org/article/how-to-download-file-from-url-in-php)
What are your favourite learning resources?
Tags: watercooler, discuss, beginners, codenewbie
Published: 2021-04-24 06:24:26

# Introduction

Every day we come across a lot of new & amazing things, some technical and some not. And if we find something which matches our vibe then we dive deep into it. Now here the real problem starts, if something is very popular then definitely there are a lot of resources out there to learn it but out of all those resources, which ones worth your precious time?

![2Confused](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rtdj2p9yhu7gv3ujmok.gif)
 
So we created this blog post to help you share all your favourite learning resources. It could be anything, a platform, some software, an app, a website or any of your favourite creators out there.

Let's get started.

## My Way

This is the specific sequence, I usually like to follow to learn new stuff.

- I read blogs on the topic - An introduction, its uses, problems it overcomes, pros & cons. I usually do a google search to find these blogs 📝.

- If the topic seems interesting, then I have a look on [freeCodeCamp](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ)'s YouTube Channel to see if there's a course available on the topic I am interested in 👨‍💻.

- If freeCodeCamp doesn't have a course on it or it seems to be outdated then I look for another good course on YouTube▶️.

- [Udemy](https://www.udemy.com/) is also a great place to find some really cool courses🏫.

- That's pretty much how I like to find learning resources for myself 📚.

# Discussion

Let's start the discussion on:

- What are your favourite resources to learn something new?

- How do you utilize those resources to make the most of them?
Laravel Sanctum Authentication Example with Product Api
Tags: laravel, sanctum
Published: 2021-04-24 06:14:00

Hello,

Here, i will show you laravel sanctum spa authentication. This article will give you simple example of laravel sanctum api authentication. you can understand a concept of laravel sanctum api auth. i would like to share with you laravel sanctum api tutorial. Here, Creating a basic example of laravel sanctum mobile authentication.

you can easily create api using sanctum in laravel 6, laravel 7 and laravel 8 version.

Laravel Sanctum provides a simple authentication system for SPAs (single page applications), mobile applications, and simple, token based APIs. Sanctum also allows each user of your application to generate multiple API tokens for their account.

So you also want to create api for your mobile application than you can follow this tutorial for how to create rest api step by step with laravel and sanctum. If you are new than don't worry about that i written tutorial step by step.

Follow bellow few steps to create restful api example in laravel 8 app.

[Laravel Sanctum Authentication Example with Product Api](https://www.codecheef.org/article/laravel-sanctum-authentication-example-with-product-api)
What are Pointers in C/C++?
Tags: cpp, c, programming, computerscience
Published: 2021-04-24 06:08:55

In this article, I will explain what pointers are and how to use them. But to understand pointers, we need a quick overview on how a computer handles/stores data.

<h3>RAM</h3> 

RAM (Random Access Memory) is a component in your computer that stores data. 

Here is what it looks like:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qk4dbxfdm9vcar90hhc.jpg)

<ul>
<li>RAM allows for direct-access to memory cells.</li>
<li>These memory cells store data in a binary-format</li>
<li>Each memory cell has an address where the data can be accessed.</li>
<li>A pointer just "points" to that specific memory address where that data is stored.
</ul> 

<hr/>

<h3>Street Address Analogy</h3>
Now, that you understand what RAM is, how data is stored and accessed, this analogy will make more sense. 

Think of the RAM in your machine as a long street full of houses. 

Each house is different, unique and has its own address. 

Now, let's say you are expecting mail. Well, how does the mailman know where to bring your mail?

Well, every house has a mailbox with a specific address on it with your house number. This specific house address is the "pointer". It says "Hey!, I am right here!."

<hr/>

<h3>So, What is a pointer? </h3>

In short, pointers are special data types just that store the memory address rather than a value. 

To create a pointer variable, all we do is a put an * before the variable name. Simple as that!

<hr/>

<h3>Variables</h3>
Why do we declare variables in programming? This may sound like a silly question on the surface but there is more to it!

The memory address of data is a hexadecimal value. 

It would be tedious, difficult to read and annoying if we had to use the hexadecimal value every time. 

This is where variables come in. Instead of "0x9FFF0", we could give a meaningful name. If we named "0x9FFF0" to age, now it is easier to work with. Under the hood, it is still "0x9FFF0" and the computer understands it because it is still a valid address but for human readability and productivity, we just set it to a specific and meaningful name to work with. 

<hr/>

<h3>Code Example</h3>

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjtojbqhxkvd72pgy2em.jpg)
How to clone object except for one or some keys
Tags: javascript, beginners
Published: 2021-04-24 06:06:55

Let say you have an object that you want to use it as payload to make a request
```js
const payload = {
    'username': 'Mark',
    'Hash' :'8fafasdf8afadsf',
    'redirectUrl':'/'
}
```
but you want to exclude `redirectUrl` from your object before make request, and you don't want to delete this key, hmmm it is easy doesn't it, just destructuring the object and rearrange it to a new variable
```js
    const {username,Hash} = payload;
    const newPayload = {username,Hash}
```
but wait, what if your object is actually updated and now look like this
```js
const payload = {
    'username': 'Mark',
    'Hash' :'8fafasdf8afadsf',
    'redirectUrl':'/',
    'firstname':'mark',
    'lastname':'brown',
    'birthdate':'01/12/2000',
    'gender':'MALE',
    'address':'planet earth'
}
```
seems like destructuring and rearrange is kind of hardwork to do.


#### "Put rest to the last" technique to the rescue 


simply put keys that you don't want to use and put the rest of it in the last
```js
const payload = {
    'username': 'Mark',
    'Hash' :'8fafasdf8afadsf',
    'redirectUrl':'/',
    'firstname':'mark',
    'lastname':'brown',
    'birthdate':'01/12/2000',
    'gender':'MALE',
    'address':'planet earth'
}
let{redirectUrl, ...newPayload} = payload
newPayload
/*
    {
        'username': 'Mark',
        'Hash' :'8fafasdf8afadsf',
        'firstname':'mark',
        'lastname':'brown',
        'birthdate':'01/12/2000',
        'gender':'MALE',
        'address':'planet earth'
    }
*/

```
If you want to add another key to exclude just simply put keys name after `redirectUrl`
Laravel One to Many Eloquent Relationship Tutorial
Tags: laravel, programming, tutorial, php
Published: 2021-04-24 06:03:58

In this tutorial, I Will explain you how to create laravel one to Many eloquent relationship. We will create one to many relationship in laravel. We will learn how we can create migration with foreign key schema, retrieve records, insert new records, update records etc. I will show you laravel hasMany relationship example.
more..
https://itwebtuts.blogspot.com/2021/04/laravel-one-to-many-eloquent.html