teleren/devto huggingface dataset:
Bikin website murah profesional
Tags: webdev, news, wordpress
Published: 2022-04-07 11:28:26

## Bikin Website Murah
[Bikin website murah](https://mokacode.com/jasa-website-murah/) dengan kualitas bagus apakah bisa? Tentu orang kritis akan bertanya seperti itu. Pepatah lama mengatakan: 

> Ada harga, ada barang

Yang artinya barang bagus sudah tentu harganya mahal.

## Web Murah Bagus
**[Mokacode](https://mokacode.com/)** secara formal berdiri tahun 2016. Tapi anggota timnya sudah mulai mengerjakan website sejak masih mahasiswa. Tahun 2010 mengerjakan tugas Kerja Praktek dan dilanjutkan dengan Tugas Proyek. Tugasnya real. Harus mendapatkan projek dari perusahaan. 

Sejak saat itu kami fokus membuat website, saking terbiasanya, tim Mokacode mampu mengerjakan satu buah website landing page hanya dalam hitungan hari saja. Dan tentunya dibantu dengan CMS wordpress. 

Masalah kualitas? Kami berani diadu dengan agency lain yang menawarkan harga lebih mahal untuk spek yang sama.

1. Desain web premium
2. SEO Friendly
3. Copy writing spesial. Kami fahami niche mendalam
4. Menggunakan server sendiri. Bukan shared host
5. Menggunakan cloudflare. CDN dan tambahan keamaanan.
6. Masih banyak segudang fitur premium untuk harga yang murah.


![Template Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6wiidlvdgg775u4q84z.png)
I Stand with Ukraine
Tags: ukraine, conference, codepen, showdev
Published: 2022-04-07 11:27:27


![Devs for Ukraine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/540fnkdvebasddrqmsgo.png)

Devs For Ukraine is an online conference raising funds to provide support for Ukraine during this time. There will be 9 front-end speakers and 8 back-end speakers. Even though their donation goal is 40k and have only received 301 donations, the cause has already raised 38k! It would be incredible to continue raising to support Ukraine.

You can find the schedule of the [speaker panels listed here](https://www.devsforukraine.io/) along with the link to register with your [GitHub account](https://www.devsforukraine.io/tickets/tmchuynh).

The above ticket was created on codepen:
{% codepen https://codepen.io/tmch00/pen/bGavRWv %}

This was my version of the following codepen project:

{% codepen https://codepen.io/lucas-rocha-the-looper/pen/vYmPqOg %}

Happy coding!
Hardhat: How to Test ETH Balance Change.
Tags: solidity, testing, web3, hardhat
Published: 2022-04-07 10:18:10

#### UPDATED: May 23, 2022

We can use this quick way to do it. Read more here: https://ethereum-waffle.readthedocs.io/en/latest/matchers.html

```js
expect(() => contract.connect(owner).withdrawAllETH())
  .to.changeEtherBalance(owner, parseEther(10));
```

----

Let's say you are implementing the NFT selling contract. And the owner can withdraw the ETH to herself. 

Something like this.

```solidity
// solidity
function withdrawAllETH() onlyOwner {
    uint256 balance = address(this).balance;
    Address.sendValue(payable(owner()), balance);
}
```
 
### What do we want to test? 🧑‍🔧
One of them is to check if the owner receive the ETH correctly! 🤑 

Let's do it together! 🔥

> Note: I am using [Hardhat](https://hardhat.org/tutorial/testing-contracts.html) here as a sample of testing.

```js
// javascript
it('owner can withdraw all ETH', async () => {
  // let's say contract has 5 ETH, owner has 10 ETH
  
  // 1. let's do a withdrawal
  await contract.connect(owner).withdrawAllETH()

  // 2. Now owner should have 15 ETH, right?
  expect(await owner.getBalance()).to.eq(parseEther(15))
})
```

And when we run it.

```
❌ AssertionError: Expected "14999957824852287212" to be equal 15000000000000000000
```

### What the bug!? 🐞🐞🐞

The test says the actual balance is `14.999.. ETH` not `15 ETH`. Well... I forgot to check about the gas spent. But how do we do it? 

Thanks to our beloved [StackOverflow thread](https://ethereum.stackexchange.com/a/118422/76945) (as always 😂), we got a solution.

```
Gas Spent = Gas Used x Effective Gas Price
```

And we can get the data from the transaction receipt!

> Note: we can use `cumulativeGasUsed` instead of `gasUsed` if you want to get the gas spent from the whole block.

### The Solution 🌟

Ok, now I know it, let's do this instead.

```js
// 2nd attempt
it('owner can withdraw all ETH', async () => {
  // let's say contract has 5 ETH, owner has 10 ETH
  
  // 1. let's do a withdrawal
  const tx = await contract.connect(owner).withdrawAllETH()

  // 2. Let's calculate the gas spent
  const receipt = await tx.wait()
  const gasSpent = receipt.gasUsed.mul(receipt.effectiveGasPrice)

  // 3. Now we know, it is 15 ETH minus by gasSpent! 
  expect(await owner.getBalance()).to.eq(parseEther(15).sub(gasSpent))
})
```

And when we run it.

```
✔ owner can withdraw all ETH
```

Yey! And now it works! 🥳🥳🥳
XYZ of versioning 🚀
Tags: version
Published: 2022-04-07 11:23:45

![version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j782jhu60y8v183ucd53.png)
 
- A Major release is represented by the first number in a version
- A Minor release is represented  by the second in a version
- A Patch release is represented  by the third in a version

<u>**Major release version:**</u> If there are any major changes in a package, such as breaking modifications or new features, a release is made by upgrading this major version number.

**<u>Minor release version:</u>** If any modifications are made that are backward-compatible or deprecate any functionality, a release is made by changing this minor version number.

<u>**Patch release version:**</u> If just bug fixes are included, a release is completed by updating this minor version number.
Mix
Tags: javascript, webdev, typescript, studio
Published: 2022-04-07 11:12:29

**_[](`

```
`

https://accounts.google.com/ServiceLogin/webreauth?service=accountsettings&passive=1209600&osid=1&continue=https%3A%2F%2Fmyaccount.google.com%2Fu%2F2%2Fb%2F113043590935423852190%2Fpermissions&followup=https%3A%2F%2Fmyaccount.google.com%2Fu%2F2%2Fb%2F113043590935423852190%2Fpermissions&authuser=2&flowName=GlifWebSignIn&flowEntry=ServiceLogin)_**
`
```
`
https://telemost.yandex.ru/j/21618852882147

```
``
```
Build a React application using yarn package manager
Tags: yarn, react
Published: 2022-04-07 10:52:11

#### Install via npm
You can use npm to install the yarn package.
`npm install --global yarn`
#### In Debian / Ubuntu
You can install Yarn from Debian package repository on Debian or Ubuntu Linux. You’ll need to set up the repository first:
`curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list`
Then simply type 
`sudo apt update && sudo apt install yarn`
#### Examine installation
`yarn --version`
#### Create React application
`yarn create react-app <application_name>`
yarn create is available in Yarn 0.25+
#### Starting React application
`cd <application_name>
yarn start`

Credits: [https://reactjs.org/](https://reactjs.org/) , [https://classic.yarnpkg.com/en/docs/](https://classic.yarnpkg.com/en/docs/install#debian-stable)
2 months on, 170 members later: What I have learnt when building my discord server.
Tags: community, discord, webdev, design
Published: 2022-04-07 10:52:02

## A bit of backstory
So, last year, I decided to launch a forem, [Easy UI](https://easyui.dev). I had money to host it on DigitalOcean for a year. As the year progressed, we barely gained 30 people. And the only post published, was in fact plagiarased from dev.to. Soon, the 12 months ended, and I was left looking for options. I decided to go for Discord, the only option we could think of. Today we are at **170 members**, and growing.

## So what helped us grow

### 1. [Disboard](https://disboard.org)
![Screenshot of Disboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1t20r8v49b8w2tj1sxni.jpeg)
Disboard was crucial in acquiring our initial members. Disboard is a search engine for Discord servers, allowing our server to attain organic growth from Discorders interested in user interface design. These original users then invited people they knew to the server, further boosting our Disboard presence, stimulating a snowball effect.

### 2. [Buildergroop](https://buildergroop.com)
![Screenshot of Buildergroop website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y070xukfso0rc83s1iyj.jpeg)
Buildergroop is a discord server for Gen-Z entrepreneurs and builders. I had been a regular member for the past few weeks, and decided to share Easy UI to the community. It was there I found my board team, lots of members, and a mod team.

### 3. An amazing board Team
The first board member was [@monitrr](https://moni.is-a.dev). He made huge changes to the server, including setting up many channels and setting up bots for verification. Moni also helped with the website design (https://easyui.dev). The next board member to join was `wyzlle#6081`. He helps with keeping the server active. After that, `Ryuˢᶠ#0091` joined to help moderate the server and keep it safe for all. With this, the member count of Easy UI grew past 100. `rohak.#9378` also joined our board team to help with social media. `Big Don#2322` has also joined our board team to help with marketing and content creation.

### 4. Supportive friends
I had great friends around me to give feedback on Easy UI (including negative feedback - Easy UI was not perfect).

## What the future looks like
The future of Easy UI is a bright one. User interface design is a vital part of digital product design, and educating people on it makes the web just that little bit nicer on the eyes. We plan on developing an integrated platform around Easy UI, and have plans on methods in which we can add value to this space. Easy UI will be the number one place to go to connect with other UI designers, learn about UI design, and grow as UI designers.

Make sure to be on the lookout for our standalone blog, coming soon 😉

## Psst...
You can join Easy UI using [this link](https://discord.gg/qwrFem9TtT)

```
Happy coding 🥳
```
How the TypeScript Readonly Type Works
Tags: typescript, javascript, webdev, tutorial
Published: 2022-04-07 10:51:55

TypeScript has a number of utility types, which are types specifically created by TypeScript to solve a problem. In this article, let's look at the Readonly type.

## TypeScript Readonly Type
As the name suggests, the `Readonly` type in TypeScript suggests that a particular type is read-only.

Let's look at an example. Below, we don't want anyone to update any part of myObject. We can make it a read-only object like so:

```javascript
type User = {
    firstName: string,
    lastName: string
}

let firstUser:Readonly<User> = {
    firstName: "John",
    lastName: "Doe"
}
```

If you try to change a property of firstUser, you'll get the following error:

```
Cannot assign to 'firstName' because it is a read-only property.
```

### Readonly variables don't work in TypeScript
When we define the type User above, we are creating a custom interface - i.e. something which objects have to conform to. Readonly only works with interfaces or custom types like the one we've used. As such, we can still edit Readonly variables:

```javascript
let myVariable:Readonly<string> = "Hello World";
myVariable = "Goodbye World";
console.log(myVariable); // console logs "Goodbye World"
```

The above code is valid and will work in TypeScript. If you need read only variables, you can simply use const instead, i.e:

```javascript
const myVariable:string = "Hello World";
// Throws error: Cannot assign to 'myVariable' because it is a constant.
myVariable = "Goodbye World";
```
HTML DOM vs Virtual DOM
Tags: html, dom
Published: 2022-04-07 10:51:42

#### DOM
Document Object Model (DOM) is an abstraction of structured text. This text is an HTML code for web developers, and the DOM is simply referred to as HTML DOM. HTML elements are transformed into nodes in the DOM.

#### The HTML DOM is Expensive
Each web page is internally represented as a tree of objects. This type of representation is known as a Document Object Model. Furthermore, it is a language-independent interface through which programming languages (such as JavaScript) can access HTML elements.

In simple words,
The HTML DOM is a standard for obtaining, changing, adding, or deleting HTML elements.

#### Virtual DOM is a possible solution
So the React team came up with the idea of abstracting the HTML DOM and creating its own Virtual DOM in order to compute the minimum number of operations we need to apply on the HTML DOM to replicate our application's current state.
The Virtual DOM saves time by eliminating the need for unnecessary DOM modifications.

#### Exactly how?
React's application state is represented as a Virtual DOM at all times. These are the steps that React takes to optimise performance whenever the application state changes.
Create a new Virtual DOM to represent our application's new state.

Contrast the old Virtual DOM (representing the current HTML DOM) with the new Virtual DOM. Determine the smallest number of operations required to transform the old Virtual DOM (which represents the current HTML DOM) into the new Virtual DOM. After those operations are identified, they are mapped into their equivalent HTML DOM operations .Remember, the Virtual DOM is merely an abstraction of the HTML DOM, and the two are isomorphic.

The minimum number of operations discovered and transferred to their equivalent HTML DOM operations are now directly applied to the application's HTML DOM.

##### Note: Because the Virtual DOM is a JavaScript Object, operations performed on it are inexpensive.
Reference : React JS Notes for Professionals
How the TypeScript Record Type Works
Tags: typescript, javascript, webdev, tutorial
Published: 2022-04-07 10:50:36

TypeScript Records are a great way to ensure consistency when trying to implement more complex types of data. They enforce key values, and allow you to create custom interfaces for the values.

That sounds confusing, but let's see how it works in practice.

### Utility Types
A Record is a utility type - that means it is a type especially defined by TypeScript to help with a certain problem.

## How Typescript Record Types Work

Suppose you have a data set like this:

```javascript
const myData = {
    "123-123-123" : { firstName: "John", lastName: "Doe" },
    "124-124-124" : { firstName: "Sarah", lastName: "Doe" },
    "125-125-125" : { firstName: "Jane", lastName: "Smith" }
}
```

Our data set has an ID for its key, which is of type string. All of the values have the same format - that is, they have a firstName and lastName.

For this data structure, a Record is the best utility type to use. We can define our data structure type as follows:

```javascript
type User = {
    firstName: string,
    lastName: string
}

const myData:Record<string, User> = {
    "123-123-123" : { firstName: "John", lastName: "Doe" },
    "124-124-124" : { firstName: "Sarah", lastName: "Doe" },
    "125-125-125" : { firstName: "Jane", lastName: "Smith" }
}
```

A Record takes the form `Record<K, T>`, where `K` is the type of the key, and `T` is the type of the values.

Above, we defined a new type User for our values, and set our keys to type string.

## Record Types and Union Types
Sometimes, we can have an object with a predefined set of possible keys. This is particularly true when calling from an API. For example:

```javascript
const myData = {
    "uk" : { firstName: "John", lastName: "Doe" },
    "france" : { firstName: "Sarah", lastName: "Doe" },
    "india" : { firstName: "Jane", lastName: "Smith" }
}
```

Let's presume that for our data set above, the key can only be three values: uk, france or india. In this case, we can define a type for User, and a union type for our key:

```javascript
type User = {
    firstName: string,
    lastName: string
}
type Country = "uk" | "france" | "india";

const myData:Record<Country, User> = {
    "uk" : { firstName: "John", lastName: "Doe" },
    "france" : { firstName: "Sarah", lastName: "Doe" },
    "india" : { firstName: "Jane", lastName: "Smith" }
}
```

Using this method, we can enforce strict rules about the values the key is allowed to be, along with the type our values should conform to.
Running Chrome with all shields down
Tags: chrome, cors, macos, webdev
Published: 2022-04-07 10:30:10

`/Applications/Google Chrome.app/Contents/MacOS/Google\ Chrome --disable-site-isolation-trials --disable-web-security --user-data-dir="~/tmp"`

...lets you run Chrome with a fresh disposeable profile and all security down.

This comes in handy if you just need to get around all these CORS errors for a minute... ;-)
We launched on Product Hunt 🎉
Tags: product, news, showdev, productivity
Published: 2022-04-07 10:26:21

Hey everyone after a year of hard work on our product in the team of two people, we're happy to announce [Product Hunt launch of our product](https://www.producthunt.com/posts/stage-68f97f54-452c-4867-9127-8f590553c181)

Stage is UI/UX design & prototyping tool for non-designers, that helps people without designing experience to design beautiful and efficient mobile apps!

This launch is important to us. Please share some support by upvoting or writing a comment!

https://www.producthunt.com/posts/stage-68f97f54-452c-4867-9127-8f590553c181
Display: none Vs Visibility: hidden
Tags: javascript, webdev, beginners, programming
Published: 2022-04-07 10:03:05

_Coding is all about practical knowledge_, so let's understand difference between display: none; and visibility: hidden; property  practically 😍😍.

👀[My GitHub](https://github.com/deepakydv9315)
👀[My Insta](https://www.instagram.com/syco_coders/)




## step:1 Let's make three circle with different color i.e. _Red, Green, and Blue._


![Main img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjtph9wjsajlvqjwnecc.png)

## Step:2
**Now apply display: none; property to Green color circle**

```
#green{
    display: none;
}
```
![display: none; img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wejx2b4w4ywvyj166o7e.png)

> _display: none;_ means that the tag will not appear on the page at all (although you can still interact with it through the Dom). There will be no space allocated for it between the other tags.

## Step:3
**Now apply visibility: hidden; property to green color circle**

```
#green{
    visibility: hidden;
}
```

![visibility: hidden; img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6fyplw955ab082ixyi6.png)

> _visibility: hidden_ means that unlike display: none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.



Hopefully you find this useful.
Share your thoughts in comment section 👇.
Slack: Turn off sending and receiving notification sound.
Tags: slack, notification, sound
Published: 2022-04-07 09:58:21

Steps:
1. Click on your profile picture.
2. Go to Preferences.
3. Go to Accessibility tab.
4. Scroll and look for "Direct message announcements"
5. Un-check both:

- Play a sound when you send a message
- Play a sound when you receive a direct message
Android — 9 Useful Kotlin Flow Operators You Need to Know
Tags: android, kotlin, flow, operator
Published: 2022-04-07 09:30:42

9 very important but less known [Kotlin](https://blog.canopas.com/introduction-to-unit-testing-viewmodels-with-kotlin-coroutine-367630e95831) Flow operators with graphics and examples.

1. Reduce
2. Fold
3. Debounce
4. Sample
5. flatmapMerge
6. flatmapConcat
7. Buffer
8. Combine
9. zip

Read full version of this blog post with source code on our blog.[https://blog.canopas.com/android-9-useful-kotlin-flow-operators-you-need-to-know-b9daef4b630f](https://blog.canopas.com/android-9-useful-kotlin-flow-operators-you-need-to-know-b9daef4b630f)
Easy fix for webpack ERROR in Plugin "react" was conflicted ...
Tags: react, webpack, npm
Published: 2022-04-07 09:03:36

Regardless whether you just upgraded to _React 18_ or some of your _Node dependencies_ in `package.json`, version conflicts are very annoying!

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

But there's an easy fix:
```
#webpack-dev-server-client-overlay {
  display: none;
}
```

Just insert these three lines of code in any top level CSS file (such as your `index.css`) and the error – at least its overlay – will be gone!

**IRONY OFF**
What was your latest temp fix that you accidentally pushed into a Git repo?
It’s 2022, Don’t Use the console.log() Anymore 😎
Tags: javascript, beginners, programming, tutorial
Published: 2022-04-07 09:00:51

We as JavaScript developers usually use console.log() to test the output or just for fun. Even I can bet that our (including mine) first code was “Hello world” logged in the console.

```
console.log("Hello World!")
```

This piece of code has been nostalgic for all fellow JS developers. But now it’s 2022, let’s make it a little handy and comfortable for our fingers.

In this article, I have discussed a simple and common method that has rarely been used by developers.

**Let’s get started**

As we know, we all use to log the data to the console like this:

```
console.log("I love js") // I love js
console.log(4 + 4) // 8
console.log(!true)  // false
```

**Let’s work smartly and efficiently as shown below:**

```
const log = (arg) => console.log(arg)
```

Here, we have created a function with a shorter name — log relative to console.log(), you can even use a shorter name, something like this:

```
const l = (arg) => console.log(arg)

```

So, you might be wondering what’s the benefit of writing code like this? Let’s discuss the benefits.

**Benefits**

Keeps your code clean and slick
Improve readability
Relief to your fingers, don’t have to write a long thing
Comment more benefits if you can.

**Let’s test 🚗**

```
log("Hello world") // Hello world
log(4 + 4) // 8
log(!false) // true
log(Math.PI) // 3.141592653589793
```

**Conclusion**

So, this was a quick tip to save your time and make your code look cleaner. Let me know in the comments if you will use this tip.

You can try the same thing for the console.info(), console.warn(), console.error().

**🌏 Let’s connect**

[LinkedIn](https://www.linkedin.com/company/braincuber/)

[Twitter](https://twitter.com/braincuber_tech)

**Read More**

[**A Complete Guide to WEB 3.0**
](https://blog.braincuber.com/a-complete-guide-to-web-3-0)

[**How to upload files to aws s3 using nodejs lambda and api gateway**](https://blog.braincuber.com/how-to-upload-files-to-aws-s3-using-nodejs-lambda-and-api-gateway)
[Starbucks E gift card] Looking for a Web Developer Inverviewee
Published: 2022-04-07 08:54:12

Hello. We are students in Seoul National University studying about online job skill up platforms.
Our main interest is about us web developer skill up market, and we need some interviewees for that.
The interview will take about 20 ~ 30 minutes and 5$ amount of starbucks E gift card will be received as you join the interview.
If you are interested, contact me at yjw5788@naver.com
Thank you for reading this!