teleren/devto huggingface dataset:
CSS border in Images
Tags: css, html, design
Published: 2021-06-20 16:54:30

Let's learn about CSS border with images

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


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


![color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xeguktnayw8ih6veahw.png)


![side](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgutx2rwf5ylor35wxfa.png)
![shorthand](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epz172i3un8izfui0wjx.png)
Dependency Injection: Register your service with fewer code.
Tags: dotnet, csharp, nuget, dependencyinjection
Published: 2021-06-20 16:42:03

Today I have decided to create a simple library after getting inspired by watching a video in <a href="https://www.youtube.com/watch?v=4e83trumwcM">Youtube (Nick Chapsas)</a>.

Whenever I decide to make something I used to leave them incomplete, pushing the code to the repository without any documentations or the readme file. So thought of creating a nuget package with proper documentation and readme file.

You can download the package from <a href="https://www.nuget.org/packages/AutoResolver/">AutoResolver</a>

Thankyou
Smart Contracts
Published: 2021-06-20 16:31:29

Lets discuss what a smart contract is and how to write a simple one.  **Smart Contracts** are simply programs stored on a blockchain that run when predetermined conditions are met. They typically are used to automate the execution of an agreement so that all participants can be immediately certain of the outcome, without any intermediary's involvement or time loss. This is a great definition given by IBM. 

Smart contracts are pretty cool. You do not need a middle person to conduct business. Instead all you need to do is implement all the terms and conditions within the contract and it will be executed. You can create contracts for pretty much anything that you can think of, such as for selling something, for finances, the thing is that the contract will never be lost or tampered with and it will be permanent on the blockchain.

Here is a sample of an actual contract using the programing language solidity.

![enter image description here](https://arpitmathur.files.wordpress.com/2018/04/solidity.png)
 You have to make sure that you start your contract with pragma and the version. Since solidity is a statically typed language you have to define the key words such as with the next line the key word **contract** followed by the name of the contract.  We have contracts that are excepted and used widely, such as Erc-20 token and Erc-721 tokens. I am going to discuss what is needed to create a Erc-20 Token.
 Erc-20 requirements:
 **- Events**
 - Transfer event
-  approve event

 **- Mandatory Functions**
 -   totalSupply ( ) function
-   balanceOf ( ) function
-   transfer ( ) function
-   transferFrom ( ) function
-   approve ( ) function
-   allowance ( ) function

This is what has to be in every Erc-20 token in order for it to be valid.
Add new method to Abstract Base Class C++ and Extend them 

Published: 2021-06-20 16:08:18

This question already has answers here:
Pure virtual functions and binary compatibility (4 answers)
Your post has been associated with a similar question. If this question doesn’t resolve your question, ask a new one.

Closed 2 days ago.

(Private feedback for you)

I have a abstract base class . There are many abstract classes which derived from this Abstract Base class

class Base
{
public:
  virtual void food() =0
};
for example

class Derived1: public Base
{
};
Suppose i want to add new method to it, without breaking binary compatibility. The only way is to extend this class

class Base_Ext : public Base
{
public:
  virtual void food1()=0;
};
The problem is the already existing derived classes implementation wont be able to access this food1(). How to solve this problem How can Abstract Derived classes see this new method

One solution i have in mind is : - Lets say the original Derived class was Derived1......

class Derived1: public Base 
 {
 } ;
Now i would need to extend Derived1.......

class Derived2 : public Derived1, public Base_Ex
{ 
} ;
again here to solve diamond problem, I will have to change

class Derived1: public Base to

 class Derived1: public virtual Base {} 
which i dont want to do.. as it would again break binary compatibility of existing derived classes.so stuck at it
Minimize Gas in Your Smart Contracts
Tags: ethereumblockchain, smartcontractblockch, ethereum, cryptocurrency
Published: 2021-06-26 02:19:53

---
title: Minimize Gas in Your Smart Contracts
published: true
date: 2021-06-20 16:08:11 UTC
tags: ethereumblockchain,smartcontractblockch,ethereum,cryptocurrency
canonical_url: https://medium.com/coinmonks/minimize-gas-in-your-smart-contracts-bb9a89db1052
---

![](https://cdn-images-1.medium.com/max/1024/0*TyrlIzN3ITJJUE3j)<figcaption>Photo by <a href="https://unsplash.com/@jessbaileydesigns?utm_source=medium&amp;utm_medium=referral">Jess Bailey</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption>

#### Simple Hacks to reduce the Gas you pay for Smart Contracts

**I went from paying excessive amounts in gas to paying a reasonable amount after doing a course on solidity development.**

I’ll tell you the main tricks here so you don’t waste your time doing the entire [course](https://cryptozombies.io/).

### 1. Smaller uints

If you’ve got multiple uints inside a struct use a small-sized uint. This allows Solidity to use less storage.

Convert this:

```

struct NormalStruct {
 uint a;
 uint b;
 uint c;
}
```

To this:

```
struct MiniMe {
 uint32 a;
 uint32 b;
 uint c;
}
```

MiniMe will cost less gas than `NormalStruct` because of struct packing

### 2. View Functions Don’t Cost You a Thing

View functions don’t cost any gas when they’re called externally by a user.

This is because view functions don’t actually change anything on the blockchain — they only read the data.

Wherever possible use a view function. Here’s an example:

```
# [https://github.com/spiyer99/CryptoZombies/blob/master/contracts/zombie\_helper.sol#L36](https://github.com/spiyer99/CryptoZombies/blob/master/contracts/zombie_helper.sol#L36)

function getZombiesByOwner(address _owner) external view returns(uint[] memory) {
  uint[] memory result = new uint[](ownerZombieCount[_owner]);
  uint counter = 0;
  for (uint i = 0; i < zombies.length; i++) {
    if (zombieToOwner[i] == _owner) {
      result[counter] = i;
      counter++;
    }
  }
  return result;
}
```

This function allows us to find all the zombies that someone owns.

We do this by iterating through every single zombie.

Yes this is naive. We could simply create a hash map. That would reduce the lookup to O(1).

But it’s also cheaper than a hash map. So it’s better. The end.

### Conclusion

And that’s it! These two things saved me a considerable amount of gas. I hope they help you too.

* * *
How to remove falsy values from array
Published: 2021-06-20 16:02:04

In this article we will remove falsy values from array.there are only six falsy values in javascript:
- [x] undefined 
- [x] null 
- [x] NaN 
- [x] 0 
- [x] "" (empty string)
- [x] and false

Passing Boolean in filter will remove all falsy values.

```javascript
let users = ['Abu jaid', 0, 'Tarun', null, 'Amit', false, undefined, '', NaN];
let filtered = users.filter(Boolean);
console.log(filtered); // ["Abu jaid", "Tarun", "Amit"]
```
Mock 工具介紹 — Mockoon
Tags: testing, mock
Published: 2021-06-20 15:35:23

Mockoon 是一款具有 UI 隨裝即的 Mock API 工具。本身就包含了 Proxy 及 Mock 的功能，在做前端測試時是很方便的工具。

## Proxy
在開發新功能時，需要 Mockoon 的只有新 API 而已，所以 Mockoon 本身帶有 Proxy 功能就是很方便的工具。
點擊右上 [齒輪] 可以開啟 Proxy mode 設定介面。只要不是我們要 mock 的目標就是丟回原本的 server 處理。
![Proxy Config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jb3k9wpydmrcbo7cnv2z.png)

## Mock
Mock 回傳內容除了可以在 UI 上直接輸入預期要回傳的內容，當回傳的內容很大時，也可以使用讀取本地檔案的方式回傳回容。回傳檔案的功能特別適合前端的 JS/CSS 還在開發階段時使用。

## Rule
Mock 的 Rule 的條件可以用 Request 的 Query string、Body、Header、Router params 或是 Request Number 設定提供很大的彈性。

Rule 的比對方式是只要合符就不會再往下比對，所以在設定多組 Rule 時應該將條件較嚴格的 Rule 放在條件寬鬆的 Rule 之前。

例如我想要在 Create user 時依據有沒有使用 refer code 來回傳不同的內容，就可以設定兩組不同的 Rule 回傳不同的內容。

Rule: Create user with refer
![Create user with refer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/smdy4zsolvql2imgox4e.png)

Rule: Create user without refer
![Create user without refer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1pidul91solwzibv0eby.png)


Create user with refer 應該排在 Create user without refer 之前，直接用滑鼠拖拉就可以改變順序
![用滑鼠拖拉就可以改變順序](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffnehom4k9zv4ci2wm2b.png)

Templating
透過 Templating 可以將 Response 中指定的段落用 Request 的內容取代做出動態改變回傳內容，也可以改回傳本地檔案的檔案路徑。
下面範例為，用 Request 中的 username 及 refer 替換掉 Response 內容的做法。

```
{
  "data": {
    "index": 0,
    "username": {{body 'username'}},
    "refer": {{body 'refer' ''}}
  },
  "error_code": 0
}
```

搭配的Request：
```
POST /api/v1/users
Content-Type: application/json

{
  "username": "John", 
  "refer": "XDCJJU8"
}
```

Templating 套用在讀取本地端檔案
使用 url 讀取對應的本地端檔案，在原本 url 中檔案名稱的位置上加上 `:jsFile` 並在 File 的路徑中使用 `{{urlParam 'jsFileF'}}` 改變讀取的檔案路徑。
![Path Templating](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ievhgcgxyhjwe3ifrifd.png)


結語
Mockoon 在設定上十分簡單，功能也相完整，很值得前端的開發者導入開發流程之中。

參考資料：
Mockoon 官網
Chrome Omnibox
Tags: omnibox, chromium, ux, 100daysofcs
Published: 2021-06-20 15:27:14

I use the browser’s address bar several times a day but I never thought deeply about its design. It is after all a simple text input bar. But is it that simple?

Google Chrome calls it the `omnibox`. And it is designed with a specific UX philosophy: `reduce cognitive overhead`. In other words, reduce the number of decisions needed to be made to go to a certain page.

The primary outcome of this philosophy is combining the search and address bar. In the past, these two boxes were separated.

![Old Browser UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44hyx5zyx1sy4yhkztc3.png)

However, by combining them it's one less decision a user has to make. Omnibox's entire goal is to bounce the user to their destination as soon as possible similar to a Google search page.

As an aside, reducing decision-making is one-way apps are made more addictive. For example, paginations buttons at the end of a page are changed to infinite scrolling so there is no discreet stopping point and a conscious decision to go to the next page is not necessary.

Source: https://www.chromium.org/user-experience/omnibox
7 Awesome GitHub Repositories for JavaScript developers. A Thread 👇
Tags: beginners, javascript
Published: 2021-06-20 15:13:51

{% twitter 1406603632422707208 %}
{% twitter 1406603638085091331 %}
{% twitter 1406603644732985345 %}
{% twitter 1406603651171295237 %}
{% twitter 1406603657844383746 %}
{% twitter 1406603664102330368 %}
{% twitter 1406603670267985924 %}

 > this article is generated using https://github.com/Manitej66/twlog
CSS Only Direction Aware Hover Effect | Awesome CSS Hover Effect
Tags: html, css, beginners, codenewbie
Published: 2021-06-20 15:03:13

***Hello guys, today I am going to show you how to create an direction aware hover effect using Html css, in this video you will learn how do you create an awesome hover effect using css only.***

{% youtube mjcAyhgpPpY %}
Day 98 of 100 days of SwiftUI
Tags: swift, 100daysofcode
Published: 2021-06-20 14:50:18

I just completed day 98 of 100 days of swiftui. Today, I worked on adding new features to the snow seeker application. I implemented favouriting resorts and also added more details to the resort detail view. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/penqf1o8t2d8s7g6fx7q.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2ijwsrbq2gb8gpgvm50.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr4oh8scw6we5r34n1qa.png)
what is algorithm ?
Published: 2021-06-20 14:50:00

An algorithm is a step by step process that we use to perform a certain task . Algorithm is a step-by-step procedure, which defines a set of instructions to be executed in a certain order to get the desired output. Algorithms are generally created independent of underlying languages, i.e. an algorithm can be implemented in more than one programming language.  For example if we have to cook Maggie
1. we have to boil water
2 put Maggie and boil Maggie .
3 put masala and mix.
4 your task is complete 
This is a general concept used in competitive coding.
VPC Peering
Tags: aws, vpc, network, peering
Published: 2021-06-20 14:15:11

### Introduction
Often times, one logical group of virtual network (VPC) would want to interact with the other. AWS has provided options to connect between VPCs of the same region and also different regions.

### VPC Peering
VPC Peering is a networking connection provided by AWS to connect two VPCs. The VPCs can be from the same or different accounts. Since VPC is a region based entity, VPC Peering can also be established between VPCs from different regions in the same account. Once the peering is established, the instances in either of the VPCs can connect with each other as if they are in the same account.

![VPC Peering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hofgdv0xrmta61ttbs1n.png)
  
### VPC Peering - Same Region
  To create a Peering Connection, go to VPC dashboard and click on `Create Peering Connection`. The wizard looks like as below. We need to provide the local VPC which we are interested to peer with and its CIDR block. If we are connecting to the same region in the same account, then we can select `My Account` and `This region` and provide the VPC and its CIDR to be connected to.

![Create VPC Peering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u9qnrzpr624lj7eadby8.png)

After creating, the peering connection looks like below, and shows the peering connection status as `Active`.

![VPC Peering Config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4c9k1jx1erajjd8zoka4.png)

The next step after creating the VPC peering connection is to update the route table of the subnets in both the VPCs. 

![VPC Peering Route Table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qksygqwxvkmkahevxapv.png)

VPC peering is a one-to-one connection between VPCs. So, to connect to another VPC, another peering connection has to be created and the route tables to be updated. 


![Multiple VPC Peering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02oek9va7fc4df93zrcj.png)

  If VPC A has a connection with VPC B and VPC C, this does not mean that a peering connection is automatically available between VPC B and VPC C since B is connected to A. Another peering connection has to be created to establish this relationship.

![Multiple VPC Peering No Connection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8g5ei0nmrqra84imcu0d.png)

   
### Things to know

- VPC Peering allows to reference security groups from the peer VPC in the same region.
- Supports DNS hostname resolution to return private IP address.
- Supports peering of both IPv4 and IPv6 addresses.
- The VPCs cannot have overlapping IP addresses.
- No redundant Peering connection can be made between the same VPCs. Only one peering connection is supported.

### Can you answer the following questions?

 1. Can NACL be accessed among VPCs?
 2. How to health check the VPC Peering Connection?
 
 
### References
1. https://d1.awsstatic.com/events/reinvent/2019/REPEAT_2_AWS_networking_fundamentals_NET201-R2.pdf
'init is not a function' while React Codesplitting

Tags: react
Published: 2021-06-20 14:11:49


I have 'init is not a function error when I try to do codesplit. I have a folder named 'Pages' which has index.js from where 'Home is exported'. Pages folder also has another folder named 'PrivcacyPolicies' which contains a file 'PrivacyPolicy.js' from which 'PrivacyPolicy' is imported.
FS Blog #4: Skiller - My Rails Project
Published: 2021-06-20 14:08:33

For my Rails project, I'm building Skiller, a web application that helps students to learn technical skills through relevant courses. Students can use Skiller to sign up/create user accounts, log in and log out of their accounts, including 3rd party authentication, add and edit/update skills they want to learn and/or have already learned, add and edit/update courses they are taking or have taken in order to gain those skills. They would also be able to filter courses for specific skills, search for skills and courses, and rank their courses by importance or progress. By using Skiller, students will be able to better track and manage their technical skills and courses.

This is a lot more complex and dynamic web application than my previous very simple Sinatra project Course Tracker, where the students can only manage their courses, in addition to the basic sign in, log in, log out, validations, etc.  For the Rails project, there needs to be at least 3 models, with several relationships, including one has_many relationship, one belongs_to relationship, two has_many through relationships,  and one many_to_many relationship. There was also requirements for 3rd party signup/login, user authentication, validations for attributes, ActiveRecord scope method using ActiveRecord Query methods, nested resources with RESTful URLs, displaying validate errors, etc.

Building this project took me much longer than the Sinatra project, and there were many more challenges and and bug fixes. But the project and the process of building it was exciting, as I felt it was getting closer and closer to a fully functional real world application, compared with my previous two projects. I also loved figuring things out and debugging the code, because the feedback was immediate: the web app was either working or not working after I made changes to the code, and I could instantly see and interact with it. As the developer and a beta "user", this was pretty amazing. :) 

For the building the Rails app, I primarily used Rails, the Ruby on Rails framework, ActiveRecord, Sqlite3, Omniauth, Puma, HTML, CSS, Bycrpt, and Byebug.

![https://image.flaticon.com/icons/png/512/862/862528.png](https://image.flaticon.com/icons/png/512/862/862528.png)
Creating Beautiful REST APIs using Python Flask and Swagger UI
Published: 2021-06-20 14:03:43

In this video I'm going to show you how to create RESTful APIs using Flask and document it by generating API specification in Open API aka Swagger format using apispec and configure Swagger UI.

{% youtube k10ILjUyWuQ %}

You can find the `app.py` file code at: https://gist.github.com/arundhaj/5f4c0f8c9a8efba9f92f81adea9fd4d7
JavaScript Recursion
Tags: javascript, react, reactnative
Published: 2021-06-20 13:57:02

UnderStand Recursion ...Understand Recursion..Until you really UnderStand

Recursion is nothing but an Function which is Calling itself until it Complete its Work ... So how do we Keep it  in Simple  terms to understand ... Let me Explain it by Code , So Consider a Scernario of Function calling itself from 10 to 1 
 
```
  var givenNumber = 10
  function CountDown(num){
      if(num === 0){
           return console.log('Done');
      }else{
           console.log(num)
      }  
           CountDown(num-1);
  }
  CountDown(givenNumber);
  
 OutPut:
    10
    9
    8
    7
    6
    5
    4
    3
    2
    1
 "Done"

```
So in the Above Code We See that , We call the Function like an mirror where it reflects its own Action on itself Until it Has
Some Condition to Stop it  , Well This is it Recursion is ...
An alias to learn aliases
Tags: bash, productivity
Published: 2021-06-20 13:46:56

*This article was previously posted on [my blog](https://blog.charlesdesneuf.com?utm_medium=social&utm_source=dev_to&utm_campaign=article-learn-aliases).*

I’m trying to save some time by reducing the number of keystrokes I need to do something.

I’m pretty efficient with my IDE’s shortcuts, but I have vast room for improvement in my console.

The obvious solution there is relying on aliases.

I’ve been using the git ssh plugin for several years, but I only use a handful of the provided aliases, mostly because I never took the time to memorize past the few main ones.

Now that I’m trying to save some typing, I’m learning the other ones. I have an issue, though: I spend a lot of time looking at the documentation to know which alias shortens the command I want to enter. In that case, it means I switch to my browser, get the right tab, or go to the website, use the search to find the suitable alias by typing part of the command. I don’t save a lot of keystrokes, and I’m surely not gaining time.

Please don’t take me wrong; time spend learning or practicing to improve in the long run is time well spent. Nevertheless, I decided to find a way to enhance my learning process.

The best way to reduce the amount of time needed to find the proper alias for a command is to stay in the console and avoid looking at the documentation.

After a quick search, I discovered that the `alias` command lists all aliases set up. That’s a start.

Combining `alias` and `grep` makes it efficient to find the correct alias for the job.

That still requires some typing, if your shell doesn’t have some sort if autocomplete at least.

As I’m in a quest for laziness and poking around with aliases, I decided to add a new one, `fa`, for “find alias” defined as `alias fa='alias | grep'`.

An example: searching for all aliases about stash

![Typing fa stash returns a list of aliases containing stash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a54b9m1mv8e9tktc3g9v.png)

Just two letters, no more windows switching, and a lot of time saved.

Do you have some tips about productivity as well?
Understanding Kubernetes in a visual way (in 🎥 video): part 17 – Kubernetes Components
Tags: kubernetes, devops, docker, beginners
Published: 2021-06-20 13:26:13

---
title: Understanding Kubernetes in a visual way (in 🎥 video): part 17 – Kubernetes Components
published: true
description: Serie of videos about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in a visual way - (in video) in video
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzjryla58milrgcij2ej.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes, then I've auto-published a book and since now I've started a new serie of video! :-)

I imagined a serie of short videos with a mix of sketchnotes and speech.

I think it could be a good way, more visual, with audio & video to explain Kubernetes (and others technologies).

This episode is focused on Kubernetes internal Components: etcd, Scheduler, Kubelet...

{% youtube oeQtgtAVtGg %}

The video is in French BUT I done the subtitles in english (and french too).

If you liked the video and are interested to watch another ones, please give me some feedbacks (and you can also subscribe to [my Youtube channel](https://www.youtube.com/channel/UCrRk0kOP58lBMl9B8ZS8Vlg), if you want to ❤️).

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 165 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

If you like theses sketchnotes, you can follow me, I will publish others sketchs shortly :-).