teleren/devto huggingface dataset:
Cara Membuat Helpers di Larave Terbaru
Tags: laravel, php, beginners, indonesia
Published: 2022-08-27 05:36:00

## Apa Itu Traits ?
Dengan menggunakan Traits kita bisa membuat method yang dapat digunakan / wariskan di banyak kelas, cukup menggunakan keyword `use` untuk menggunakanya.

## Contoh implementasi Traits
disini saya memberikan contoh cara membuat helpers di laravel menggunakan Traits agar code kita `reusable`.


```
<?php
namespace App\Helpers;

trait Helpers
{
 public function getMessage($name){
     return "Hay, Terimakasi ". $name;
 }
}
```

## Cara Menggunakan helper 
cara menggunakan helper pada controller laravel dengan cara `use Helpers` pada controller tersebut.

contohnya :

```
<?php
namespace App\Http\Controllers;

class UserController extends Controller
{
  use Helpers;

  public function sendMessage(Request $request)
  {
      $message = $this->getMessage($request->customer_name);
      return $message;
  }
}
```


referensi : 
https://www.php.net/manual/en/language.oop5.traits.php
Browser extensions - Messaging
Tags: javascript, webdev, beginners, html
Published: 2022-08-27 05:28:28

In this article, we'll look at how message sending works.
You'll often want to send some data from your popup script to the background worker, where the worker will say something with the data and return it.

Let's take a look at how that works.
If you wish to follow along, take the following [GitHub branch](https://github.com/rebelchris/popup-extension/tree/page-modifications) as your starting point.

## Messaging inside browser extensions

For this article, we want to send a message from our popup script to the background worker.

The background worker will then process and return something based on the query.

![Browser extensions - Messaging](https://cdn.hashnode.com/res/hashnode/image/upload/v1660718358581/zPmZyAzG9.gif)

We first want to modify our `src/App.jsx` file to include this new button for sending the message.

```js
<button onClick={backgroundRequest}>Background request</button>
```

While here, we can also add a state that will keep track of the message we get in response from the background worker.

```js
const [message, setMessage] = useState(null);
```

And then add a rendering part for this text:

```js
{
  message && (
    <>
      <p className='text-white'>{message}</p>
      <br />
    </>
  );
}
```

Now we can move on to add this function.

```js
const backgroundRequest = () => {
  chrome.runtime.sendMessage({ color }, (response) => {
    setMessage(response.msg);
  });
};
```

Easy enough, right? We call the chrome runtime and invoke the `sendMessage` function.
We pass the currently picked color as our parameter and, in response, set the message.

For the next step, we need to move over to our `background.js` script and create the receiving end for these messages.

```js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (!request.color) {
    sendResponse({ msg: `You didn't set any color` });
  }

  sendResponse({ msg: `You must really like the color ${request.color}` });
});
```

Here we add a listener to the onMessage callback. We first want to ensure that the request includes a color. If not, we respond that the user didn't pick a color.

If they did send a color, we send our actual response.

And that's it. We can now communicate from our popup script to our background worker.

If you'd like to see the completed code, check out the following [GitHub repo](https://github.com/rebelchris/popup-extension/tree/messaging).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
363. Leetcode Solution in Java
Tags: java
Published: 2022-08-27 05:28:00

```
class Solution {
  public int maxSumSubmatrix(int[][] matrix, int k) {
    final int m = matrix.length;
    final int n = matrix[0].length;
    int ans = Integer.MIN_VALUE;

    for (int baseCol = 0; baseCol < n; ++baseCol) {
      // sums[i] := sum(matrix[i][baseCol..j])
      int[] sums = new int[m];
      for (int j = baseCol; j < n; ++j) {
        for (int i = 0; i < m; ++i)
          sums[i] += matrix[i][j];
        // find the max subarray no more than k
        TreeSet<Integer> accumulate = new TreeSet<>(Arrays.asList(0));
        int prefix = 0;
        for (final int sum : sums) {
          prefix += sum;
          final Integer lo = accumulate.ceiling(prefix - k);
          if (lo != null)
            ans = Math.max(ans, prefix - lo);
          accumulate.add(prefix);
        }
      }
    }

    return ans;
  }
}

```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/max-sum-of-rectangle-no-larger-than-k
What exactly is Ethereum ?
Tags: eth, web3, bitc, crypto
Published: 2022-08-27 05:00:54

**Ethereum **(⟠) & **Bitcoin** (₿) have nearly become household names. However, while they're often mentioned in tandem, they're far from the same. 
Bitcoin was created as an alternative, decentralized currency. Ethereum draws inspiration from Bitcoin but has bigger aspirations: To create a software platform that supports cryptocurrencies and any decentralized application that can run without a third party, thus giving people more control over their data. 

## So, what is Ethereum?
The easiest way to think of the Ethereum network is as a secure database accessible to anyone. When new _"blocks"_ of data get added, they're cryptographically _"chained"_ to a parent block, effectively making an _uneditable_ record of the previous changes. Ethereum is considered one of the largest cryptocurrencies (next to ₿) because ether is the second largest crypto next to bitcoin by market capitalization. 

But what makes Ethereum so exciting to users and enthusiasts is the network's potential to do more than handle financial transactions. Ethereum takes the Bitcoin blockchain further by allowing developers to run programs _(known as "smart contracts")_ that can host any decentralized application _(known as "DApps")_. 

> "Bitcoin was the pioneer of blockchain technology, used to create a peer-to-peer payment system".

Ethereum uses similar blockchain technology but added the ability to create decentralized applications on its platform." 

## How does Ethereum work? 
Ethereum relies on node operators to process transactions on the Ethereum network.

>  "These operators collect a fee for running the hardware and software necessary to facilitate these transactions." 

The fees are called gas fees because they keep the network running. And they're paid in ether (ETH). 

- Consider the many ways that you could use an extensive network of computers. Like Bitcoin, Ethereum uses it to power peer-to-peer transactions and track who owns the ether cryptocurrency.
- Additionally, developers can create and run DApps on the network.  
- The DApps connect to the Ethereum blockchain with "smart contracts," which are more like computer programs than contracts in the traditional sense.

> "Smart contracts are small programs stored on the Ethereum blockchain that can self-execute when certain conditions are met".
 
- An excellent way to think about it is that the DApp is the program's front end, and the smart contract is the program's back end.
- Also, DApps rely on the decentralized and open-source Ethereum network and can't be controlled by a single entity. 
- Once a DApp is added to the Ethereum platform, it can't be taken down — even if the original creator wants to remove or disbands it entirely. 
- The decentralized system can lead to more anonymity for users, who may be able to use DApps pseudonymously. And it can also result in less control and censorship from third parties, including corporations and governments.
VS Code PSA: You Can Autowrap Selected Text In HTML Tags
Tags: vscode, webdev, html
Published: 2022-08-27 04:59:00

> Why did I not care enough to try and optimize my experience writing HTML for the past decade?

So you can select text in VS Code, open the command palette (`ctrl + shift + p`) and select `Emmet: Wrap with Abbreviation`, which will open an input box that you can start typing your desired tag into. Then press enter and it will autowrap your selected text.

![Emmet Autowrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y29as2nxvuzeyn9sreqn.gif)

#### You Only Just Discovered This? Are You Stupid, Shane?
Yes, I'm sorry. This entire time I never realized I could do this. I regret all of the needless suffering my wrists have endured.

# [Emmet](https://emmet.io/)
VS Code has something called Emmet built into it, which apparently has all sorts of fun looking functionality. I only discovered it because of the HTML autowrap that I saw someone use in a YouTube video, but it looks like it even has its own integrated "language" for auto-generating HTML by defining "abbreviations".

![Emmet Abbreviation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fyvccgk6th1ixnvmujqg.gif)
Service Mesh wars
Tags: kubernetes, devops, istio, linkerd
Published: 2022-08-27 04:25:57

After using Istio in production for almost 2 years, we’re saying goodbye to it. Learn why, as well as the current state of the Service Mesh Wars.

{% embed https://ericfossas.medium.com/service-mesh-wars-goodbye-istio-b047d9e533c7 %}
es posible cambiar el .env cuando ya se ha realizado un build?
Tags: react
Published: 2022-08-27 04:20:24



Buenas tardes compañeros Dev,
tengo un archivo .env donde he colocado mi ip local para realizar mis pruebas y una ip para producción.

he realizado un yarn build para pasarlo a producción. la pregunta es: el personal de producción puede cambiar la ip de un build que les he pasado? es decir querer colocar otra que ellos quieran?
es posible cambiar el .env cuando ya se ha realizado un build?
Published: 2022-08-27 04:13:00

Buenas tardes compañeros Dev,
tengo un archivo .env donde he colocado mi ip local para realizar mis pruebas y una ip para producción.

he realizado un yarn build para pasarlo a producción. la pregunta es:   el personal de producción puede cambiar la ip de un build que les he pasado? es decir querer colocar otra que ellos quieran?
Web's working principles
Tags: beginners, vietnameseblogs
Published: 2022-08-27 03:02:00

*Web's working principles theo 4 bước:
- Client sử dụng giao thức TCP/IP để connect server.
- Client gửi package HTTP request đến server.
- Server trả về package HTTP response đến client. Nếu trong package request có chứa dynamic scripts, server sẽ chạy scripts trước.
- Client nhận package HTTP response và mất kết nối từ server, bắt đầu rendering HTML.	
URLs: truy cập web pages.
DNS: domain name server sẽ lấy địa chỉ IP của host.
Các thông báo đến client:

1. 1xx Informational
2. 2xx Success
3. 3xx Redirection
4. 4xx Client Error
5. 5xx Server Error


REST là các phương thức của truyền tải http:
GET - display <=> Read
POST - create <=> Create
PUT - update  <=> Update
DELETE - delete <=> Delete

------

*Policy CORS
Cors là cơ chế hỗ trợ bảo mật cho các đường truyền request-origin và chuyển dữ liệu giữa client và servers. Nó cho phép truy cập across domain khác.
- Lỗi CORS policy:
Khi bạn call API tới server mà không có header Access-Control-Allow-Origin hoặc giá trị không hợp lệ thì phát sinh lỗi không lấy dữ liệu từ API. 
- Cách khắc phục:
Enable CORS tại server
Tại nginx:
 add_header Access-Control-Allow-Origin *;


Tại web application(ví dụ go):
 func enableCors(w *http.ResponseWriter) {
(*w).Header().Set("Access-Control-Allow-Origin", "*")
}
và thêm enableCors(&w) tại các hàm handler

------
Nuts and bolts
Tags: beginners, productivity
Published: 2022-08-27 02:51:34

I love quick keys. On mac, command + {tab, c, v, f} are some of my best friends. 

I'm currently setting up a new IDE and watching tutorials for the absolute basics and I noticed something that really bothers me. 

I can easily get into the preferences menu (command + ",": easy) and I can search for the thing that I want to change (search bar: just as easy). And then I see hieroglyphics that are supposed to show me the quick key combo for executing its associated command.

It would be cool if I could hover my mouse over those symbols and get a mouseover message with full words written out. I usually get discouraged when I can't figure out these key combos and tell myself I'll try again later.

Anyways, I finally found out that " ^ " signifies "control". That symbol appears above the 6 on my keyboard, so I found this to be obnoxious. 

Anyways part 2; I just made a flash card to remind myself that "^" means "control". When I'm in charge, I'll force developers to only use "ctrl" if they need to abbreviate it :P
What is Trailing Lambda and Comma in Kotlin?
Tags: kotlin, android, beginners
Published: 2022-08-27 02:47:00

**Trailing lambda and trailing comma are the 2 important Kotlin features that you must know if you're new to Kotlin!**

[Trailing lambda](https://kotlinlang.org/docs/lambdas.html#passing-trailing-lambdas) is something new in Kotlin that other programming language doesn't have. At least, I do not aware of any other programming language that supports it. 

When you see code like this:
```kotlin
var result = operateOnNumbers(a, b) { input1, input2 ->
    input1 + input2
}
println(result)
```

It means `operateOnNumbers()` has 3 parameters. The last parameter is a function definition, which you usually either pass in the [function reference](https://vtsen.hashnode.dev/prefer-function-reference-over-lambda-in-kotlin-wrong#heading-objects-function-reference) or [lambda](https://vtsen.hashnode.dev/complete-c-to-kotlin-syntax-comparisons#heading-lambda-methods-functions).

```kotlin
var result = operateOnNumbers(
    input1 = a,
    input2 = b,
    operation = { input1, input2 ->
        input1 + input2
    }
)
println(result)
```
> Somehow I am still not getting used to this trailing lambda syntax. It looks like a function implementation.

> So my mind always needs to automatically map to this (the code outside the parentheses is the last parameter of the function) every time I see the Trailing Lambda syntax.

The signature and implementation of `operateOnNumbers()` looks like this:

```kotlin
fun operateOnNumbers(
    input1: Int,
    input2: Int,
    operation: (Int, Int) -> Int): Int {

    return operation(input1, input2)
}
```

On the other hand, [trailing commas](https://kotlinlang.org/docs/coding-conventions.html#trailing-commas) is pretty common in other languages. 

**With Trailing Comma**
```kotlin
var result = operateOnNumbers(
    a, 
    b, // trailing comma here
) { input1, input2 ->
    input1 + input2
}
```

**Without Trailing Comma**
```kotlin
var result = operateOnNumbers(
    a, 
    b // no trailing comma here
) { input1, input2 ->
    input1 + input2
}
```
The benefit of using it is allowing easier diff and merge. For me, it makes my copy-and-paste life easier. Yupe, I do a lot of copy & paste!

## Conclusion
I hope you enjoy this short post. I want to blog about this (especially Trailing Lambda) because it sometimes looks confusing to me. The function call is a bit complex. I always need to remind myself, the **code outside the parentheses is the last parameter of the function**.

---

*Originally published at [https://vtsen.hashnode.dev](https://vtsen.hashnode.dev/what-is-trailing-lambda-and-comma-in-kotlin)*.
I'll code a TikTok video scrapper, so let me tell you why
Tags: javascript, node, programming, tutorial
Published: 2022-08-27 02:35:18

Yeah! as the title of this article suggests. I will be creating a TikTok video scrapper, so **the biggest question here, is why?**

![asking_chicken.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1661462751652/pR6Zn_Bjz.gif)

To be completely honest with you guys. I want to start uploading videos on YouTube, but growing a YT channel from scratch is actually hard and takes a lot of time and dedication **" which I'm surely lacking "**


![whatever.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1661463099236/LJZNmOqno.gif)

So after I watched a guy over on TikTok suggesting re-upload TikToks to youtube shorts to get a bunch of subscribers faster, and later deleting them. In order, to start uploading your own content. I gave it a try and **Oh Lord! to my surprise It actually works** one of my videos got **9k views on the first-day**, and even I got more than 20 subscribers on the first day, as well. 


![doubt.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1661463717563/TyA8vxfEx.gif)

Here is some proof:

![fitness_cat_statistics.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661464082779/8eXrxM-tU.png)

Here is my channel name and link as well: [YT got memes?](https://www.youtube.com/channel/UCr3tKe4wjqDsgu743QUFLDw/videos), by the way, I upload memes:

![got_memes_logo.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661464142329/iDRUuwFF5.png)

So when I see this working I decided to automate the process so I can accelerate the process even more, and after thinking a lot I decided to do it, and that's why you see this post. Because I came to a conclusion and of course seeing that there is an ongoing contest by Hashnode.

**I decided to create a series following the process of becoming a YouTuber in a short period of time** of course, all the series will be more oriented to the technical standpoint and not the marketing one (but if you want something related to marketing in tech, comment it). 


![bye_homero.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1661464919906/eh_VsQUmk.gif)

So to close the introduction of this series, I want to spam you with my personal blog in which I will be updating the series faster than I will do in Hasnode.

😝⚡ Here is the link: https://www.thismar.xyz/
Chrome插件开发 - Adding browser notifications
Published: 2023-08-13 02:17:44

---
title: Chrome插件开发 - Adding browser notifications
published: true
date: 2022-08-27 00:00:00 UTC
tags: 
canonical_url: https://manon.icu/blog/translate/build-chrome-extensions/adding-browser-notification
---

在这篇文章中将学习给浏览器添加通知推送事件，如下视频：

<video
  src="https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/notification_qlwotx.webm"
  autoPlay
/>

## 添加通知推送

[Browser notifications](https://web.dev/push-notifications-overview/)类似于手机上的消息通知。

添加权限

```json
{
  "permissions": ["notifications"]
}
```

修改`src/App.jsx`

```jsx
export function App() {
  const createNotification = () => {
    chrome.notifications.create({
      type: 'basic',
      iconUrl: 'icons/icon-48.png',
      title: 'Hi there 👋',
      message: 'Just a reminder that you rock!',
      buttons: [{title: 'I know ☺️'}],
      priority: 0
    })
  }

  return (
    <div className="flex flex-col items-center justify-center w-screen h-auto bg-indigo-400 p-4">
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 text-2xl px-4 rounded"
        onClick={createNotification}
      >
        Surprise me 🎉
      </button>
    </div>
  )
}
```

`chrome.notifications`创建浏览器通知

![ACK4uA](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/ACK4uA.jpg)

## Source Code

[【Source Code】](https://github.com/rebelchris/popup-extension/tree/weather)
Building GamifyMe - Redis x Dev Hackathon [Update - 0]
Tags: redishackathon, redis, webdev, javascript
Published: 2022-08-27 00:54:00

With roughly about 2.5 days left to submission of the Hackathon, we aim to build a platform powered by Redis that'll allow anyone to gamify almost anything quickly and easily. Let's see how it goes!

This is the update for now:

Started the project, initialized the repository with frontend 
pages (login and signup)


Repo: [GamifyMe](https://github.com/devnm21/gamify-me)
4 "10 minute mail" you will like
Published: 2022-08-27 00:49:51

**What is 10 minute mail?**
[10 minute mail](https://10-minutemail.com/) is a service that allows receiving email at a temporary address that self-destructed after 10 minutes. It is also known by names like tempmail, 10minutemail, throwaway email, fake-mail or trash-mail. Many forums, Wi-Fi owners, websites and blogs ask visitors to register before they can view content, post comments or download something. [temp mail](https://tempmail.ink) is the most advanced throwaway email service that helps you avoid spam and stay safe.

**Why do you need anonymous [10 minutes mail](https://10-minutemail.net/)?**
When we discover that an anonymous email exists, we do not fully understand how usefulness it can be. And the most important question is, “Why do we need a [temporary email](https://10-minutemail.com/) if we already have regular email service providers (gmail.com, yahoo.com, …)?” If both the regular emails and anonymous emails are completely free, then, “What’s the difference?” you might ask. When you register to get a regular email, you will need to provide personal information. However, using a [temporary email](https://10-minutemail.net/) you don't need to do it. A regular email address will never delete your emails, while all the letters will be automatically deleted after 10 minutes when you are using a temporary email. A regular email can't be completely removed. On the other hand, disposable email gives you this option without any problems.

4 good [10 minute mail](https://10-minutemail.net/) websites

1 10 minutes mail https://10-minutemail.com

2 temp mail  https://tempmail.ink

3 10 minutes mail https://email10min.net

4 10 minutes mail https://tenminutesmail.net
News on MKProj.com & TexCreate v3
Tags: rust, opensource
Published: 2022-08-26 23:43:00

I have been reticent, and that is because of having a jam-packed summer, considering two jobs, writing a book, and summer school. That doesn't stop me from planning the future, and that's why mkproj.com & TexCreate haven't been maintained in months. 

This post will not go into details of TexCreate v3 new features because there's still a lot to figure out, but here is one of my new concepts that will solve some key issues: 

- Difficulty of adding new prebuilt templates 
- Not the best way to add custom templates 

My solution to this problem is to have a server built into mkproj.com to manage templates using either TOML or JSON files. How would this be possible? Well, TexCreate v3 will use TexCore as the way to build LaTeX code in Rust and will use it to create a document using an array of **Any** structs. 

My idea is to add a tool in TexCreate to allow users a way to create a cargo project, edit a _template.rs_  file, and when you run the project, it will proceed to process and send a file to the server. 

My goal is to allow TexCreate to be more modular, and mkproj.com to be more complex. I want to properly create a page processor, public archive of custom & prebuilt LaTeX templates, and I want to build it in a way that I can keep working on it without it being a pain. 

This work is very ambitious, will take a long time, and may not even happen, this is a concept. But I'm very excited to try to make it a reality. 

If there is any features you'd like in TexCreate v3 or mkproj.com, please make sure to comment!
Javascript Tagalog - Math.trunc
Tags: javascript, tagalog, pinoy, trunc
Published: 2022-08-26 23:33:48


**Ano ngaba ang Math.trunc sa Javascript?**
Math Function siya na basta aalisin niyalang yung mga decimal places na number. (also i ta-try ni js na i convert ang mga binigay na value as a number if hindi number data-type yung binigay)

```javascript
console.log( Math.trunc(1.2) ) // 1

console.log( Math.trunc('7.8') ) // 7

console.log( Math.trunc(0.1) ) // 0

console.log( Math.trunc(1.0002) ) // 1

console.log( Math.trunc(-4.004) ) // -4

console.log( Math.ceil('-2.001') ) // 2

```

NaN kapag nag tinry mo mag pass ng hindi number or any na hindi pwede maconvert as a number
```javascript
console.log( Math.trunc() ) // NaN
console.log( Math.trunc({}) ) // NaN
```

**More tagalog Javascript Learning Resources:**
https://javascript-methods-in-tagalog.vercel.app/