teleren/devto huggingface dataset:
How to develop under the TON using Javascript
Tags: javascript, blockchain, ton, web3
Published: 2022-09-03 20:58:52

This was originally posted on stackoverflow, but was later removed by the moderators because they called it a recommendation.

I thought, ok, if it considered as a recommendation I should not throw it out. I do see value in it, why not to post it here. In the hope, that it might help someone.

---

## Tiny disclaimer about what is TON

[TON](https://ton.org/) (The Open Network) is a layer 1 blockchain, originally designed by Nikolay Durov and the [Telegram](https://telegram.org/) team, now being created by the open community. It has all the potential to include all other blockchains under one roof and and change the rules of the game in the way people set up contracts with each other.To learn more, I recommend checking out the [analysis](https://ton.org/analysis), where it compares to other chains.

---

## Question 

> As Javascript developer, I'm curious how to bootstrap and start working with TON blockchain without any knowledge of Func. Could you recommend any SDK, libraries and/or examples?

## Answer

It depends on how you want to interact with the TON blockchain.


### 📥 I just need to get some info from the blockchain

Then it would be enough just to use **HTTP API**. There are several open APIs which you could use:

- https://toncenter.com/api/v2/
- https://tonapi.io/swagger-ui

You can find more detailed and up-to-date information about the API in dev docs: https://ton.org/docs/#/apis/


### 🧾 I not only need to get information, but also publish (maybe even smart contracts)

Every community discussion will advise you to use **Func**, and they will be right. Simply because it is a native language for dealing with data structures and abstractions, which was originally designed for smart contracts in TON. It seems complicated, but only when you first start. Try out the first part of [step by step first contract on Func](https://society.ton.org/ton-hello-world-step-by-step-guide-for-writing-your-first-smart-contract-in-func).

But we're talking about **Javascript** in this thread, so here's a list of available **JS SDKs**:

- https://github.com/toncenter/tonweb
- https://github.com/tonwhales/ton - _works nice with TS_
- https://github.com/tonstack/ton3

All of the tools listed are **open source**, so you can contribute.


### 🧠 I'm ready to learn something new, but Func is too complicated. How about Solidity?

I can understand you. Unfortunately, because of the [actor model](https://en.wikipedia.org/wiki/Actor_model) and some other key concepts, **it's impossible** to use Solidity to write smart contracts for TON.

Fortunately, several enthusiasts are now working on [Tact-lang](https://tact-lang.org/), which should be much easier to understand and use. You can already use it for learning now, and then share feedback and contribute.
Svelte : declare component without tags
Published: 2022-09-03 20:47:32

### INTRO

No, this is not one more example of `<svelte:component this={Child} />` . This is example whereas you can instantiate Svelte component keeping "React-_ish_" vibe on the line . 

---

> **PREREQS** : The only prerequisite is that <u>new App({target}) inside **index.js**</u> & <u>new Component({target}) inside **App.svelte**</u> would share same target property e.g. as follows :

> **TIP** : try to open codesandbox in the seperate tab, or copy paste to your local environment, as you may experience error "props is not defined" which is not true ;

> **NOTE BEFORE CODEBASE EXAMINATION** : we use refs.js to share target dynamically, although if it's only couple of targets, common sense, we can hard-coded in , although hardcoding is considered bad practice whatsoever ; 

{% codesandbox svelte-component--no-tags-fnsnz0 %}

> NOTE : doing this way we exclude use props, apply inline styling through attributes, moreover this is just some alternative way of instatiating components rather than the mentioned way in the Intro or as e.g. self closing tags `<Child />`
Javascript: Var vs Const vs Let 👍💯
Tags: javascript, webdev, beginners
Published: 2022-09-03 20:43:37

A lot of shiny new features came out with ES2015 (ES6). And now, since it's 2022, it's assumed that a lot of JavaScript developers have become familiar with and have started using these features.

## Var: Pros & Cons

A `var` (short for variable) is a global variable that can be accessed from anywhere, it is also able to be assigned different values.

```js
var hello = "Hi!";
```

### Pros:

- It can be re-declared and updated
- It's globally scoped (can be accessed from anywhere)

### Cons:

- It can be a pain to have to re-define other variables since it's globally scoped.

## Const: Pros & Cons

Variables declared with the const maintain constant values. `const` declarations share some similarities with `let` declarations.  

#### `Const` declarations are block scoped
Like let declarations, const declarations can only be accessed within the block they were declared.

#### `Const` cannot be re-declared or updated

This means the value set for a `const` will always stay the same and cannot be updated.

### Pros:

- It is block scoped
- You can assign sub-variables like: `const.message = "Hello"` without issues.

### Cons:

- It cannot be re-declared or updated

```js
const hello = "Hi!";
hello = "Ciao!" // Const cannot be updated.
```

## Let: Pros & Cons

`let` is now preferred for variable declaration. It's no surprise as it comes as an improvement to `var` declarations. It also solves the problem with var that we just covered. Let's consider why this is so.

#### `let` is block scoped

So a variable declared in a block with `let` is only available for use within that block. Let me explain this with an example:

```js
function test1() {
  let test = "ee";
  console.log(test); // returns "ee"
}

function test2() {
  let test = "ff";
  console.log(test); // returns "ff"
}
```

#### it can be updated but not re-declared

For example, this would return an error:

```js
let test = "Hello!";
let test = "Robot."; // Error ❌
```

However, a let variable can be re-declared in different blocks. For example, a function and another function could use the same variable name without issue.

This makes `let` the primary choice for developers in **2022** since it's so easy-to-use and has a ton of upsides. 

### Pros:

- Can be re-declared in different blocks
- `let` is the *modern* version of `var` with a ton of improvements. 

### Cons:

- It can be updated but it cannot be re-declared
- Not much downsides since `let` is a great choice.

## Thanks for reading 👋

> If you like my content, please leave a ❤️ or even a **Comment** 💬
Hello Dev.to
Published: 2022-09-03 20:09:56

## Intro
Hello I’m Koshiro from Japan. I’m a college student who studying web frontend things.

Since 2018, I’ve been working as a freelance designer and web developer in the city of Kumamoto, Japan. To start learning new skills for new job possibilities in abroad, I decided to study at college in Vancouver, Canada from this summer.


## A little bit about me
Initially I was not tech-related person, but in 2017 I knocked the door of course of Web Design / Development at the vocational school for 8 months in my hometown Kumamoto. After I graduated that school, I worked at the web development agency for a little bit, and started freelance work in 2018. I made a tons of websites for client by using html, css, JS, bootstrap, Wordress etc. Now I'm learning modern web frontend technology such as React, Three.js, etc.

Also I sometimes worked as a nun-full time teacher at the same vocational school since 2018 (not many, sometimes I helped). Now I'm in Canada, so I cannot work there for a while... :(


## Something else
Before I moved to Canada, I was doing several part time jobs and some side hustles in order to make money for college.

I often work as a freelance photographer as the one of my side hustles and hobbies. I love traveling, so I like to share my travel photography. I also take some conceptual creative photos, Editorial, food, etc.

Here is a little bit of my travel photos:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98963dyo35y8qzzwjede.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/29mvjl09todhb82ovmj5.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4epnjzyqt0a125r3irf3.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e07v9li13dw7j388m8t1.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxda5ajj4zkkaf3mdvx5.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kyo46a47enkangibon5.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4i5k7i3ik2vn2rxvuhky.jpg)



Also I love drinking beer in pub (let me know if you know the good place in Vancouver), playing video game, design and art etc. I’m interested in a large number of things, especially love creative materials or topics.


## Thank you

I want to talk with people about tech! I hope I can share my experiences and also learn somethings from you guys. Thank you :)
How to extend WordPress Media Library [Updated Version 2022]
Tags: wp, wordpress, php, javascript
Published: 2022-09-03 20:08:51

Have you been looking for a simple way to extend WP POP UP Media Library Upload Tabs? This video is for you.

Copy the source code or watch my step by step video 

{% embed https://www.youtube.com/watch?v=LEr-WmVMkAQ %}

```javascript
var frame = wp.media.view.MediaFrame.Post;
wp.media.view.MediaFrame.Post = frame.extend({
  initialize: function () {
    frame.prototype.initialize.apply(this, arguments);

    var State = wp.media.controller.State.extend({
      insert: function () {
        console.log("Something...");
        this.frame.close();
      }
    });

    this.states.add([
      new State({
        id: "ademedia",
        search: false,
        title: "Ade Media"
      })
    ]);

    //on render
    this.on("content:render:ademedia", this.renderAdemediaContent, this);
  },
  browseRouter: function (routerView) {
    routerView.set({
      upload: {
        text: wp.media.view.l10n.uploadFilesTitle,
        priority: 20
      },
      ademedia: {
        text: "Ade Media",
        priority: 30
      },
      browse: {
        text: wp.media.view.l10n.mediaLibraryTitle,
        priority: 40
      }
    });
  },
  renderAdemediaContent: function () {
    var AdemediaContent = wp.Backbone.View.extend({
      tagName: "div",
      className: "ademediacontent",
      template: wp.template("ademedia"),
      active: !1,
      toolbar: null,
      frame: null
    });

    var view = new AdemediaContent();

    this.content.set(view);
  }
});


```
AWS Private vs Public vs Elastic IP
Published: 2022-09-03 19:55:56

Networking has two sorts if IPs:

_**IPv4**: 192.168.1.1
**IPv6**: 1900:4545:1:101:f8fa:f2op:12ef_

Let talk about Public IP, there are different type of IP like,

If we have a web server that is public IP _79.216.59.75_ and we have another server with have another IP _211.139.37.43_, these server is accessible on www using this IP and using these public IPs these server can talk with each other.

Lets consider we have an company A who have an private network like _192.168.0.1/22_. Private network have some private IP ranges and all the computers inside that private network can talk to each other using the private IP. But these IPs are not accessible on WWW, to make it accessible on WWW we use [Internet Gateway](https://docs.aws.amazon.com/vpc/latest/userguide/VPC_Internet_Gateway.html) (public). Internet Gateway enable private network to talk to other server.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1o8uwnkacy5v1jgf3xi.png)




**Private / Public / Elastic IP Difference :**

**Private IP (IPv4):**

- Public IP means the machine can be identified on internet (WWW).
- Must be unique across the whole web (not two machine can have the same public IP).
- Can be geo-location easily.

**Public IP (IPv4):**

- Private IP means the machine can be only be identified on a private network only.
- The IP must be unique across the private network.
- But two different private networks (two companies) can have the same IPs.
- Machines connect to WWW using an internet gateway (a proxy).
- Only a specified range of IPs can be used as a private IP.

**Elastic IP:**

- With the Elastic IP address, you can mask the failure of an instance or software by rapidly remapping the address to another instance in your account.
- You can only have 5 elastic ip in you account (you can ask AWS to increase that).
- Overall, try to avoid using elastic IP:
    1) They often reflect poor architectural decision.

    2) Instead use a random public IP and register a DNS name to it.

    3) Or as we’ll see later, use a Load Balancer and don’t use a public IP.

**Private and Public IP (IPv4) In AWS EC2 — Hands On**

By default, you EC2 machine comes with

- A private IP for the internal AWS Network.
- A public IP for the WWW
When we are doing SSH into our EC2 machines:

We can’t use a private IP, because we are not in the same network.

- We can only use the public IP.
- If your machine is stopped and then started the public IP can change
How does Docker Layer Cache (DLC) work on CircleCI
Published: 2022-09-03 23:55:01

---
title: How does Docker Layer Cache (DLC) work on CircleCI
published: true
date: 2022-09-03 10:39:35 UTC
tags: 
canonical_url: https://write.as/kelvintaywl/how-does-docker-layer-cache-dlc-work-on-circleci?pk_campaign=rss-feed
---

This is an attempt to explain CircleCI's [Docker Layer Cache (DLC) feature](https://circleci.com/docs/docker-layer-caching#how-dlc-works) in simple terms.

## What is Docker Layer Cache

Docker creates an image via layers. Each layer is created via Dockerfile commands like `RUN`, `COPY` and `ADD`, and they represent a unit of filesystem change.

When Docker builds an image, the built layers are stored. Rebuilding the same image becomes faster because Docker can now retrieve the stored layers as cache. This is known as layer caching on Docker, or Docker Layer Cache (DLC).

DLC is useful when we are rebuilding the same images. It works well when we build images on the **same machine** ; The stored layers are still there when we build a second time.

However, this becomes tricky on CI/CD systems, since most CI/CD pipelines run on [ephemeral environments](https://pipelinedriven.org/article/ephemeral-environment-why-what-how-and-where). The execution environment is destroyed once your pipeline completes.

## How does CircleCI implement DLC

For DLC to work on CI/CD systems, we need to ensure stored/cached layers can be shared between CI/CD pipelines.

To achieve this, CircleCI assigns **an external volume (store)** to a job when we [enable DLC](https://circleci.com/docs/docker-layer-caching#overview)._Think of it like passing around an external hard drive amongst friends._

This external volume will store the built Docker images' layers in a job. When CircleCI assigns same external volume to the next job, we should see faster image builds since the cached layers can be found.

An external volume can be assigned only to one job at a time. Hence, a job may see cache misses when building images due to a different volume being assigned.

A cache miss will mean a longer time taken to build the Docker image, which translates to a longer job duration. However, it does not and **should not** cause a job on CircleCI to fail.

[#docker](https://write.as/kelvintaywl/tag:docker) [#dockerlayercache](https://write.as/kelvintaywl/tag:dockerlayercache) [#circleci](https://write.as/kelvintaywl/tag:circleci) [#explanation](https://write.as/kelvintaywl/tag:explanation)
ocean of knowledge
Published: 2022-09-03 19:53:03

[](https://www.instagram.com/p/Ch9BIe6o5uD/?hl=en)

Check out my page named 

**@globalnsta**
 on instagram for amazing informative and education contents around the world .
Please do check it out and do follow if you feel value the dedication to spread knowledge 🙏🙏🙏
Setting up TypeScript with NodeJS
Tags: typescript, node, javascript, yarn
Published: 2022-09-03 19:45:38

# Welcome!

The other day when I was setting up TypeScript with a Node project, I thought that I could write a simple guide that could help you doing this in a hopefully smooth way.

To start do the following:

First make sure that you have TypeScript by running:

```javascript
tsc -v
```

If you need to install TypeScript run:
```javascript
yarn add typescript
```

Now we need to add a package.json file. In your project folder:

```javascript
yarn init -y
```

To add TypeScript run the following command:

```javascript
yarn add -D typescript @types/node
```

Next, we need to initialize our project with TypeScript. The command below will generate a file called `tsconfig.json`. Make sure to read and understand this file since it contains useful information and is well documented.

```javascript
yarn tsc --init
```

Now create a new file in your project and make sure that the file extension is `.ts`. I will create a file called `app.ts` inside a `src` folder.

```javascript
mkdir src
touch src/app.ts
```

Add `console.log('Hello World');` inside app.ts.

Now we need to configure so that the TypeScript files is compiled into JavaScript files. Go to the file `package.json` and replace the content in the `scripts` block with the following which will execute our TypeScript files and build them into JavaScript files.

```javascript
"scripts": {
    "build": "tsc"
}
```

Now we can build our project and when we do this, we will get a `.js` file which we can use to run our application.

```javascript
yarn build // to build
node app.js // to run
```

But this is kind of annoying to do it this way when we can run our TypeScript files directly by adding a library who handles this. Run the following command:

```javascript
yarn add -D ts-node
```

Now go into your `package.json` file and the the following line in `scripts`:

```javascript
"scripts": {
  "start": "ts-node src/app.ts",
  "build": "tsc"
}
```

You can delete the previously generated `.js` file and now directly running your TypeScript files:

```javascript
yarn start
```

# Bonus
If you’re developing and want the changes to be updated each time you save, then you can add the following library which will restart the server each time you make a change:

```javascript
yarn add -D ts-node-dev
```

Now head into the `package.json` file and update the `scripts.start`:

```javascript
"scripts": {
  "start": "ts-node-dev --respawn src/app.ts",
  "build": "tsc"
}
```

Now run:

```javascript
yarn start
```

Develop and save and your changes will appear automatically without having to build each time.

# Summary
That's it, you have now set up TypeScript with Node.

Any comments, questions or discussions are always welcome!
Mock Config in Laravel
Tags: laravel, php, testing, mocking
Published: 2022-09-03 19:45:19

Hi all. If you are testing your application and you need to make your config constant or change it to a specific value for testing you can mock it simply!
`Config` facade of Laravel has a method named `set()` which overwrites the default value of configs like this:
```
Config::set('name', 'Laravel');
```

So in testing env you can do something like this:
```
public function test_that_home_page_is_working()
{
    Config::set('name', 'Laravel');
    $this->get('/')->assertSee("Laravel");
}
```
Generally **Laravel facades** have several benefits because of their testability. You can **[Mock](https://laravel.com/docs/9.x/mocking)** all facades of Laravel easily. Also if you want to have deeper knowledge about testing tools you can take a look at [PHP Mockery](http://docs.mockery.io/en/latest/).
How to Embed CodePen on Various Blogs
Tags: productivity, codepen, webdev, tutorial
Published: 2022-09-03 19:44:00

[CodePens](https://codepen.io/your-work/) are a great way to interactively demonstrate a code concepts in a blog post. Here are the current methods to achieve this on platforms like [Dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), [Medium](https://medium.com/), and website platforms like [Wordpress](https://wordpress.com/).

## Dev.to
Two ways to share specific CodePen on Dev.to:

- Post URL
- Paste the Liquid tag directly into the page. Do not surround it with any other Markdown code formatting tags like the triple or single backticks.
![CodePen URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/si2n4qaaozw5ch1isjgn.png) ![CodePen URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6tjfeksliphdr5i6chb.png)


- Click "Share" on the bottom right of your CodePen pen.
- "Share on DEV" button give you a liquid link
![CodePen Share](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fg663xeqqi4743og6ypm.png) ![CodePen URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3z5hq0nbls3zqvj7xy9.png)

## Hashnode
-Click Embed at the bottom right of your pen
-Go to iFrame & copy code to paste into Hashnode blog
![Hashnode iFrame Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxroopvo8hjznsa56w2g.png)

## Medium
Press enter for a new line. The plus icon in a circle will appear to the left of the line. Click this and choose the embed option icon, which is the angle brackets like this: `<>`. Paste the url for your CodePen, then press enter afterwards. Pressing enter is important even if you immediately delete the line, otherwise the CodePen won’t load into the page.
![Medium](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swqcud3qnpa03gaw359p.png)

## WordPress
To embed a Pen from CodePen, you will need to create or edit a Post or Page on your site.

Next, copy the URL of your Pen and paste it on a line by itself in your Visual editor. Make sure that it is not hyperlinked.

That’s it! The update will preview live in the Visual Editor so you can see what it looks like without having to click Preview Changes.

##Summary 
I hope this blog saves you time moving forward with utilizing CodePen to make your blogs more attractive.

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)
Adding gcc to git bash
Tags: hugo
Published: 2022-09-07 02:11:11

---
title: Adding gcc to git bash
published: true
date: 2022-09-03 19:43:41 UTC
tags: "hugo"
canonical_url: https://shindakun.dev/posts/adding-gcc-to-git-bash/
---

So today I was working on my “main” computer which didn’t have much set up on it. Basically only [git bash](https://git-scm.com/downloads). Problem is I wanted to work on my Hugo site and theme. To do that I needed to install the version of Hugo with extended support for SCSS. This requires `gcc`. The quickest solution I found was to just install [`msys2`](https://www.msys2.org/). Once installed it was just a matter of changing to the Hugo directory and running `go install --tags extended`.

```
$ cd /d/Code/hugo/
$ go install --tags extended
$ hugo version
hugo v0.103.0-DEV-06c3ac67411e2faaf1545427d4df4e326fffd3c0+extended windows/amd64 BuildDate=2022-09-03T09:38:03Z

```

* * *

| Enjoy this post? |
| --- |
| [How about buying me a coffee?](https://ko-fi.com/shindakun) |

* * *