teleren/devto huggingface dataset:
Day 23 - Hierarchical Inheritance
Tags: 100daysofcode, solidity, web3, blockchain
Published: 2022-06-20 17:27:00

{% embed https://github.com/Envoy-VC/30-Days-of-Solidity noreadme %}

This is Day `23` of `30` in Solidity Series
Today I Learned About Hierarchical Inheritance in Solidity.

## Hierarchical Inheritance

In Hierarchical inheritance, a parent contract has more than one child contracts. It is mostly used when a common functionality is to be used in different places.

**Example**: In the below example, contract A is inherited by contract B, contract A is inherited by contract C, thus demonstrating Hierarchical Inheritance.


```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

// Defining parent contract A
contract A {
    string internal x;

    function getA() external {
        x = "Hierarchical Inheritance";
    }

    uint256 internal sum;

    function setA() external {
        uint256 a = 10;
        uint256 b = 20;
        sum = a + b;
    }
}
```
```solidity
// Defining child contract B inheriting parent contract A
contract B is A {
    // Defining external function to return state variable x
    function getAstr() external view returns (string memory) {
        return x;
    }
}
```
```solidity
// Defining child contract C inheriting parent contract A
contract C is A {
    // Defining external function to return state variable sum
    function getAValue() external view returns (uint256) {
        return sum;
    }
}
```
```solidity
// Defining calling contract
contract caller {
    // Creating object of contract B
    B contractB = new B();

    // Creating object of contract C
    C contractC = new C();

    // Defining public function to
    // return values of state variables
    // x and sum
    function testInheritance() public view returns (string memory, uint256) {
        return (contractB.getAstr(), contractC.getAValue());
    }
}
```

Output:

when we call the testInheritance function, the output is ("Hierarchical Inheritance", 30).

---
TypeFast | Made with React JS
Published: 2022-06-20 17:16:24

![TypeFast | Made with Javascript | React JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1655467166/large_type_fast_made_with_react_js_498528d045.png "TypeFast | Made with Javascript | React JS")


### Typefast. Test your typing speed here.

> An online typing speed test website.
> 
> 

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [TypeFast on Twitter](https://twitter.com/withjavascript/status/1538932346245853184?s=20&t=t6yMKOBxjvBMnhi4YNAn4w)
 |
| Medium | [TypeFast on Medium](https://medium.com/@madewithjavascript/typefast-made-with-react-js-90cfd8f7b1a2)
 |
| Facebook | [TypeFast on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid02JNeUycP9SJGk3Mfo1Vz2kxiEKBmYge6TPafvc8EzJYPbZiMWRojn7af238LBvHbAl)
 |
| Tumblr | [TypeFast on Tumblr](https://www.tumblr.com/blog/view/madewithjavascript/687598594032893952?source=share)
 |
| LinkedIn | [TypeFast on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6944698116692471808)
 |
| Pinterest | [TypeFast on Pinterest](https://pin.it/24HYWmR)
 |


Filled Under:

 - [Made with Javascript](https://madewithjavascript.club)
 - [Made with React JS](https://madewithjavascript.club/categories/react-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
How to share DEV.to drafts
Tags: devto, featurerequest, webdev, discuss
Published: 2022-06-20 17:10:07

---
title: How to share DEV.to drafts
published: true
description: Seeking ideas on how to share dev.to post drafts with others for review
tags: devto, featurerequest, webdev, discuss
cover_image: https://res.cloudinary.com/allspaces/image/upload/v1655744980/evan-dennis-i--IN3cvEjg-unsplash_kzltvr.jpg
---

We can all benefit from reviews from friends, colleagues or specialists when authoring blog posts. Platforms like Hashnode and Medium has the `Share draft` feature that allows you to share a WIP post without publishing to the world. 

This might already exist on DEV (or not) but I just can't seem to find it.

Anyone know how to do this? or if it exists? Otherwise it'll be really nice to have
What I Learned This Week. Week 17.
Tags: python, datascience, weeklyretro
Published: 2022-06-20 16:49:50

Welcome back to another week. I am actually writing this the following Monday. Over the weekend I fell short on pretty much all my responsibilities. If I had a job I would have taken a mental health week. However, I have a hard time not hating myself when I don't accomplish things throughout the week. So I tried to do a half load or so, and I just felt overwhelmed by the sheer amount of intrusive thoughts that I have to combat. Telling me I am lazy, useless, dumb, will never get a job, etc. On a daily basis, I usually deal with it sporadically, but needing to combat my mean thoughts with self love and encouragement is exhausting. Oh and just incase you couldn't figure it out from the tone of how I am writing. I wasn't selected for the project phase of the Twitch apprenticeship. I fully believe that if given the chance, I would have rocked the project and been chosen for the job. But alas I did not get picked. I made it to the top 1.3%. This was no easy feat and I should be proud of myself for making it that far. The work I put into it gave me many opportunities to learn that have already been shown to be important. I learned how to correctly use a temporary table in SQL and even got a chance to apply it in a real life situation. Ever since I got rejected I was able to dive into my new projects where I get to showcase my skills. One of which I haven't had a chance to practice with, which is creating data pipelines. For my new project, I am using the League of Legends API to source my own dataset. In order to have the data be actionable, I need to preprocess every row I insert and set up a script to source the data itself. Doing this is definitely more fun compared to learning new SQL techniques, so I am excited to have a change of pace. All I need to do is keep up on my personal responsibilities and continue love myself.
Why I Switched from Notion to Webflow
Tags: webdev, programming, productivity, showdev
Published: 2022-06-20 16:16:24

I started my business using [Notion](https://www.notion.so/) for absolutely everything. Notion is a place where I organize my thoughts and put together all the resources I provide for the Hackpack community.  When it was time for me to make a website, I turned to [Super](https://super.so/) (+ [Undraw](https://undraw.co/illustrations) for graphics), which allowed me to simply make a website off of Notion pages. It was great tool in the beginning and allowed me to spin up a landing page super easily. But, as I ran into some reliability and scaling issues, I had to look for another solution. 

After a bit of initial research (& a lot of recommendations) I finally looked into [Webflow](https://webflow.com/?r=0). What I found was a no-code website builder. As a developer, I was very excited to see this. I have used no-code tools in the past like Zapier, that felt like I had a secret weapon as I worked. When developers, who already have an understanding of how computers work, are able to use these tools we move so much faster. It made starting with Webflow super easy for me to use. 

In the end, I decided to switch over our website from Notion to Webflow because of a few points. 

### 1. Dynamic Content 

We needed a CMS (content management system) that knew how to handle dynamic content. In Notion you need to go through every single page manually to make any changes and it ended up taking way more time than it was worth. 

### 2. Blog

As our business leaned into our blog and started optimizing certain articles for SEO, we needed a platform that would host a readable blog. Notion is a good start, but the content was portrayed on the page versus Webflow was incomparable. Webflow also makes it easy to do SEO in bulk, embed links in each page, ect. The result was a much cleaner look with way less work. 

### 3. Scalability

Webflow is meant to grow with you as your company changes and grows. There are millions of templates and the customization options are endless. We often felt stuck using Notion and it took more time to manually make changes then it was worth. 

Another perk is that the Webflow tutorial videos are some of the best i’ve seen. Super interactive and funny they almost have a personality. There is of course a learning curve when you start using a new program but Webflow made it easy to learn more about the program. 

### Conclusion

Don’t get me wrong, if you need a simple landing page really fast you should just use Super/ Notion because it really is super easy, but anything more complicated I would use Webflow. 

The entire process took ~3 weeks to migrate. I was working on it part time for ~2 and then spent one full week working on it. Definitely worth it. 

### Roasts Please

Feel free to check our new site out: [https://www.hackpack.io/](https://www.hackpack.io/) all roasts are welcome 😄
How to use require() in ECMAScript modules
Tags: javascript, node, programming, codenewbie
Published: 2022-06-20 16:12:14

ECMAScript modules are now becoming the new way of import/exporting modules in NodeJS ecosystem. This allows you to import and export modules using `import` statements rather than using `require`

**Example 01**

```js
//multiple.js
const multiple = (num1, num2) => {
  return num1 * num2;
};
```
This can be imported as 
```js
import { multiple } from "./multiple.js";

console.log(multiple(10, 50));
```

**Example 02 (Default Export)**

Also ECMAScript modules introduces default exports which can be used as

```js
//multiple.js
const multiple = (num1, num2) => {
    return num1 * num2;
};

export default multiple;
```

Can be imported as 

```js
import multiple from "./multiple.js";

console.log(multiple(10, 50));
```

We can't use ECMAScript modules in a NodeJS app by default. To do this there are two ways.

1. You need to change the file extension of the files from `*.js` to `*.ejs`
![Module JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkxnhavplbsk26564295.png)
 
2. You can add `"type": "module"` in your `package.json` file
```json
{
  "name": "ECMAScript-modules",
  "version": "1.0.0",
  "description": "",
  "type": "module", 
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
```
Most of the modules in NodeJS now supports ECMAScript module imports. But there may be some occasions that we still want to use `require`. 

:red_circle:If you use `require` in ECMAScript module. it will throw an error.

```javascript
import crypto from 'crypto'
const fs = require('fs')
```
Above code will throw following error.
 
```shell
require is not defined in ES module scope, you can use import instead.
```
 
## Solution :tada:

you can use [createRequire](https://nodejs.org/api/module.html#modulecreaterequirefilename) to overcome this issue. Following is a sample code how to use it.

```js
import { createRequire } from "module";
const require = createRequire(import.meta.url);

import crypto from 'crypto'
const fs = require('fs')
```

You can also define this in a separate file and reuse it afterwards.

```js
import { createRequire } from "module";
const require = createRequire(import.meta.url);

export default require;
```

Then this can be used as

```js
import require from "./cjs-require.";
const crypto = require("crypto");
```

Hope you've enjoyed reading.


Please comment if you face any problems. I'm happy to help. Also connect with me on [twitter](https://twitter.com/erandakarachchi)
Por que troquei a advocacia pela programação.
Tags: beginners, programming
Published: 2022-06-20 16:08:40

**Sobre meu descontentamento sobre a advocacia**


Alguns podem pensar que é loucura largar a advocacia para tornar programador, sabe 5 anos de faculdade, fazer a prova da OAB,  pós-graduação, depois decidir mudar da área. Não compartilho desse pensamento, a advocacia tem resultados muito demorados, já tomei conta de processos simples que demoraram 1 ano para o juiz dar uma resposta.

Além do mais, a incompatibilidade entre a remuneração em escritórios e o trabalho exercido, faz com que muitos advogados  realizarem outras tarefas e saiam  da área jurídica. 

**Como foi meu inicio de vida de programador**



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


Como a maioria das pessoas, meu contanto com a programação foi com cursos na Internet, comprei uns cursos, vi umas vídeos aulas e gostei do desafio de aprender uma nova habilidade. Porém, queria evoluir de forma mais rápida, então, decidi fazer um bootcamp para ter maior contanto com os desafios de ser um programador.

Na primeira aula do bootcamp, encontrei pessoas com dificuldades em programar e outras que já tinham mais vivência com a vida de programador. Desse modo, uma das dicas mais importantes, é não se comparar durante o curso, cada um está em um nível de aprendizado diferente, sendo assim o mais importante é você olhar para o seu desenvolvimento pessoal.

**Incertezas pós bootcamp** 


Você não saí de um bootcamp com certezas, mas com novas incertezas e creio que nessa nova jornada você terá novas incertezas o tempo todo. Isso não é ruim, pois faz parte do processo, todo dia como programador, você vai encontrar um erro que não sabe de imediato resolver, uma nova linguagem ou programa que você ainda não tem o domínio. 

Fascinante, não é ? Claro que é, imagine, todo o dia ter um novo desafio e saber procurar respostas para novas questões.

Então, aqueles que desejam mudar de área,saibam que haverá incertezas todo dia quando codar, mas haverá crescimento com o erros e resultados para quem se esforça e se mantem atualizado.


Gabriel Alvino
Ex-advogado em transição de carreira.
Laravel 9 - Rate Limiting: Global and for Guests/Users
Tags: laravel, webdev, programming, php
Published: 2022-06-20 16:07:36

You can limit some URL to be called a maximum of 60 times per minute, with `throttle:60,1`:
```
Route::middleware('auth:api', 'throttle:60,1')->group(function () {
    Route::get('/path', function () {
        // code here
    });
});
```

But also, you can do it separately for public and for logged-in users:

```
// maximum of 10 requests for guests, 60 for authenticated users

Route::middleware('throttle:10|60,1')->group(function () {
    // code here
});
```
Also, you can have a DB field users.rate_limit and limit the amount for specific user:
```
Route::middleware('auth:api', 'throttle:rate_limit,1')->group(function () {
    Route::get('/path', function () {
        // code here
    });
});
```
Laravel 9 - API Resources: With or Without "data"?
Tags: laravel, php, webdev, programming
Published: 2022-06-20 16:02:17

If you use Eloquent API Resources to return data, they will be automatically wrapped in '**data**'. 

If you want to remove it, add `JsonResource::withoutWrapping();` in `app/Providers/AppServiceProvider.php.`

```
class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        JsonResource::withoutWrapping();
    }
}
```
Ktor で Application.kt の test を作成して実行する
Tags: kotlin, ktor
Published: 2022-06-20 15:57:48


## 前提

Ktor のプロジェクトを web で作成して、IntelliJ で起動して
Chrome で動作が確認できている。

## App のテストをする

https://ktor.io/docs/testing.html#overview

プロジェクト生成後の testApplication の中身は空なので、
ktor 公式の docs の通りに実装する。

src/kotlin/com/exmaple/ApplicationTest.kt

ここに Application.kt のテストファイルを書く。

```kotlin
import io.ktor.http.*
import kotlin.test.*
import io.ktor.server.testing.*
import com.example.plugins.*
import io.ktor.client.request.*
import io.ktor.client.statement.*
```

- kotlin の test
- ktor の http
- ktor の server の testing
- ktor の client の request
- ktor の client の statement

これらの必要なライブラリを import

```kotlin
class ApplicationTest {
    @Test
    fun testRoot() = testApplication {
        val response = client.get("/")
        assertEquals(HttpStatusCode.OK, response.status)
        assertEquals("Hello from Kotlin Ktor", response.bodyAsText())
    }
}
```

ファイル名でクラスを定義。
@Test と宣言
testApplication を使って testRoot という関数の中身に書く。
その後、client.get で Route ファイルと同じく / から取って
HttpStatusCode が OK... 200 ？と
response の中身が True なことをテストしていると推測
response の body が 期待されたテキストなのを確認

```php
expected:<200 OK> but was:<404 Not Found>
Expected :200 OK
Actual   :404 Not Found
```

しかしこのまま実行してもうまくいかなかった。

```kotlin
class ApplicationTest {
    @Test
    fun testRoot() = testApplication {
        application {
            configureRouting()
        }
// ......
```

Routing が結び付けられていなかったので
このように application の configure を結べつけた。

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kn6kcqa764rybeajqx34.png)
 
これで無事、最初のテストが通った。


## まとめ

Ktor でテストを書くためには
http, server, client の ktor ライブラリを import して

application の configureRouting を結びつけて
/ から response を取って
StatusCode と response の status
response の body のテキスト

これらをチェックするコードを書く。
angular migration tips
Published: 2022-06-20 15:49:27

I have inherited a small angularjs project which is expected to have a total of 2-4 developers. Client wants us to migrate it to angular.
Its a very small project. We hope to complete it in 2 months by rewriting functionality use case by use case.

Does it make sense to leverage micro-front end and keep the old unmigrated code available along with new migrated code so that whole application can be accessed all the time. If I understand correctly micro-front end is meant where there are many independent teams working on many front ends. So will it not amount to creating a complex setup that will only slow things down?

The older application is anyways available and hosted elsewhere.

Also what do you think of using ngUpgrade tool for such small migration projects
How To Install Docker on Ubuntu 20.04
Tags: webdev, linux, ubuntu, docker
Published: 2022-06-20 15:44:24

**[Docker](https://www.docker.com/)** is an application that simplifies the process of managing application processes in containers. Containers run your applications in resource-isolated processes. Containers are similar to virtual machines, but they are more portable, resource-friendly, and dependent on the host operating system.

In this tutorial, we will install Docker on **Ubuntu 20.04** and use basic commands to get you started.

## Prerequisites

- Ubuntu 20.04 Installed on 64-bit operating system
- A user account with sudo privileges

## Installing Docker from Official Repository

**Step 1: Updating the Software Repository**

`sudo apt update`

**Step 2: Downloading Dependencies**

`sudo apt-get install apt-transport-https ca-certificates curl software-properties-common`

**Step 3: Adding Docker’s GPG Key**

`curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -`

**Step 4: Installing the Docker Repository**

`sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu  $(lsb_release -cs)  stable"`


**Step 5: Installing the Latest Docker**

`sudo apt-get install docker-ce`

**Step 6: Verifying Docker Installation**

`docker --version`

![Docker Version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ks2x0n6a0d8nblc4cxwm.png)

**Step 7: Enable Docker Service**

To start the Docker service run the following commands:

`sudo systemctl start docker`

Enable Docker to run at startup with:

`sudo systemctl enable docker`

To check the status of the service, use the command:

`sudo systemctl status docker`


![Docker Running Status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0g5hc5l1hfwf81c0ibgg.png)

If this tutorial helps you, please hit the Clap button or comment if you have any suggestion or feedback.
React and Node.js E-Commerce Admin Dashboard - Free Course 🔥
Tags: react, node, webdev, javascript
Published: 2022-06-20 15:41:23

In this course we are going to create a complete ecommerce Admin dashboard using React and Node.js

You will Learn:
- React Recharts (create beautiful line charts)
- Advanced MongoDB Operations (aggregation)
- CRUD Operations in React and Node.js (express framework)
- Material UI Data Tables
- Redux Toolkit

and much more 🚀

Here is the video course 👇

{% youtube vHFybJGDxII %}
Best Learning Technique
Tags: beginners, productivity, career, codenewbie
Published: 2022-06-20 15:23:06

If You think that reading the same article over and over is the best solution to memorizing, You are wrong. For some people, this method will work, someone would be enough to read once. Why did it happen and how do find the best solution?

- Learning Techniques
- Retrieval Practice
- Spaced Practice
- Words and Visuals

## Retrieval Practice
After reading, close Your resource (Book, browser tab, etc.) and try to retrieve information. This method is great for people who have a good memory. If Your memory is not the best try to take a smaller piece of information. Small tip, after closing the learning resource, say to Yourself, what You have learned.

## Spaced Practice
There is a forgetting curve, after time we forget old information. To solve this problem after learning, practice. As Example, this works perfectly for programmers. After finishing the tutorial, create something. Tip, take a paper and pencil, and write the most important facts/moments. After repeating the same action over and over You will remember keywords, which will help to recreate the information.

## Words and Visuals
When learning new words sometimes it can be hard to understand, what they mean. To have better understanding use synonyms and images. It makes understanding way easier and faster.

## Everyone is Different
One person can memorize information after reading it. Second, uses practice for better understanding, etc. If someone recommends a method, first of all, make sure it works for You. This will prevent You from wasting time and will boost Your productivity. In the other case, You will waste a lot of time.

I am available on social media: [Twitter](https://twitter.com/Oscar_Sherelis) [LinkedIn](https://www.linkedin.com/in/oscar-sherelis) [Instagram](https://www.instagram.com/oscar_sherelis)

Support me: buymeacoffee.com/oscarWeb
Vuejs Login and Register Form
Tags: vue, javascript, webdev
Published: 2022-06-20 15:15:21


We made the Login and Register Form in CSS/JS framework and also made it in pain HTML and CSS. But here we made it in the Vuejs framework with the help of HTML/CSS.

In this form, we use plain HTML & CSS and for the responsive side, we used CSS media queries. To make it clickable and functionality we used Vuejs events. This is responsive Login and Register Form for mobile and tablet views.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/vuejs-login-and-register-form/)