teleren/devto huggingface dataset:
Building Web3 Dapps with no code tool :(Bunzz)
Tags: blockchain, javascript, web3, dapp
Published: 2022-07-22 09:47:45

As a newbie or developer in the web2 space interested in developing blockchain applications , building DApp can get overwhelming because you need to learn a lot of new concepts before you can start building your DApp, in order to make the transition easy there are no code-tool that can assist you in building DApp. without prior knowledge of writing smart contracts. I will take you through bunzz a no code tool for creating DApp.


What is Bunzz

Bunzz is a development platform that makes it easy to use smart contracts that build DApp as modules. Its security is audited, so developers can launch a DApp quickly and easily with confidence.

You can compare bunzz to firebase in web2 ,since Developers can get to create DApp without writing smart contract from scratch instead by selecting or editing pre-written smart contracts Modules and integrating them to a Frontend .



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1leqtuvoq36tdwhvpbpj.jpeg)


For newbies the Frontend can be developed via bubble using bubble plug-in, while web2 developers can create the frontend using html, css, JavaScript, React or Vue.

Bunzz use cases

NFTs market place can be built by combining a module that generates NFTs(ERC 721) with a module that trades NFTs.
Lending DeFi service can be built using a module that generates ERC20 tokens and a lending module.


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

Extra:

A walk through video of bunzz dashboard and the creation of a cryptocurrency to see how the platform works https://youtu.be/1WwPJmwtZCY

A guide to building DApp with bubble and bunzz https://asteroid.ac/articles/pp5bnhM43
CSS TYPOGRAPHY
Published: 2022-07-22 09:45:00

What is Typography: Typography is the art of arranging type or text so that it is easy to read and supports the overall design of a project. In CSS we can use the font family property to define a font stack. if a computer or device does not have the first font, that will list will fall back and use the next font. Now a key of concept in the font stack is to make sure that the last item in your list is not a font in and of itself but is instead a keyword. one of the most common font stack is to try and use Helvetica and if it is not available use Arial, and if Arial is not available then we will just let the browser use whatever system default san-serif it wants to use.so if you save we can see that page is using Helvetica, A technology named @fontface to use any font that you have license to use. you can control the size of text by using the font size property. When it comes to values for this property we have many different units of measurement at our disposal. so we can use percentages or pixels of 17, To manage the boldness of text we can use the font weight property. The most vital properties is one of the most important parts of typography is creating a vertical rhythm and a very important part of vertical rhythm is line spacing or lettering. It refers to the space between each line of the text, In CSS it is called line height.
Chart JS in Nuxt JS
Tags: vue, chartjs, nuxt
Published: 2022-07-22 09:37:00

Check out how I use **Chart JS** in **Nuxt JS** using **vue-chartjs 3.5.1**. By the way, I use **Nuxt 2** with **Vue 2** in it, and I use **Tailwind CSS** in my project. Make sure the **Chart JS** documentation that you open is version *2.9.4* because this tutorial tells you aboutu version *2.9.4*.
***
## 1. Add these two dependencies to our package.json

```json
{
  ...
  "dependencies": {
    "chart.js": "2.9.4",
    "vue-chartjs": "^3.5.1"
  }
  ...
}
```

Run **yarn install** or **npm install**
***
## 2. chart.js plugin file

![chart.js file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5srenzfq5n77iljbdxy6.png)

Create a new file in the **plugins** folder in our Nuxt project, if the **plugins** folder doesn't exist yet, just create it. This new file can be given any name, but we will name it **chart.js**.

The content of the **chart.js** file:

```javascript
import Vue from 'vue'
import { Bar } from 'vue-chartjs'

Vue.component('BarChart', {
  extends: Bar,
  props: {
    data: {
      type: Object,
      required: true,
    },
    options: {
      type: Object,
      required: false,
      default: () => ({
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false,
        },
      }),
    },
  },
  watch: {
    data() {
      this.renderChart(this.data, this.options)
    },
  },
  mounted() {
    this.renderChart(this.data, this.options)
  },
})
```
***
## 3. nuxt.config.js

```javascript
export default {
  ...
  plugins: ['@/plugins/chart.js'],
  ...
}
```

Add the **chart.js** plugin to the **nuxt.config.js** file in the **plugins** property.
***
## 4. Create the component

```vue
<template>
  <div class="p-2 border border-gray-500 mt-4">
    <label class="block mb-2 font-bold"> Coba Chart </label>

    <client-only>
      <BarChart :data="chartData" />
    </client-only>
  </div>
</template>

<script>
export default {
  props: {
    penilaian: {
      type: Object,
      required: true,
    },
  },
  computed: {
    chartData() {
      return {
        labels: [1, 2, 3, 4, 5],
        datasets: [
          {
            label: '',
            data: [2, 1, 16, 3, 2],
            backgroundColor: 'rgba(20, 255, 0, 0.3)',
            borderColor: 'rgba(100, 255, 0, 1)',
            borderWidth: 2,
          },
        ],
      }
    },
  },
}
</script>
```

Try this example component.
***
## 5. The result

![Chart JS in Nuxt JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zra491bohaly7uykg2w3.png)

More or less it looks like this. This chart is called **BarChart**, there are also other types of charts in **Chart JS**. To know more and learn about the configuration, you can check the documentation:

*https://www.chartjs.org/docs/2.9.4/*
Add images to a React project with Typescript
Tags: react, javascript, typescript, webpack
Published: 2022-07-22 09:34:23

---
title: Add images to a React project with Typescript
published: true
description: In every single project, usually, you need to add an image to your React project how to do it with Typescript?
tags: React, javascript, Typescript, webpack
cover_image: https://miro.medium.com/max/1400/1*Gh4eaAQU432ZQH7qsVbJ_A.png
canonical_url: https://minompi.medium.com/add-images-to-a-react-project-with-typescript-2338c28bf5d9
---

In every single project, usually, you need to add an image to your React project to show something or to represent a graph and create a beautiful page for your audience.

![](https://miro.medium.com/max/1400/1*Gh4eaAQU432ZQH7qsVbJ_A.png)

Adding an image with React is very simple and fast, this is an example:

```
import React from "react";
import imageToAdd from "./../assets/images/logo.png";
function YourComponent() {
   return <img src={imageToAdd} alt="Image" />;
}
export default YourComponent;
```

This works like a charm in a React project built using [CRA](https://create-react-app.dev/) or [Vite](https://vitejs.dev/).
but if your project has a custom bundler, created using **Typescript** + **Webpack**, with the code above you will receive this error:

```
Cannot find module  './../assets/images/logo.png'
```

The first time I saw that error, I thought “It’s a bug!”, but after searching and understanding typescript well, I discovered that receiving an error is the correct behavior.

By default in typescript, the [**module resolution**](https://www.typescriptlang.org/docs/handbook/module-resolution.html) resolves the import using only the files with extension: **.ts** **.tsx** or **.d.ts** and this is the reason why in the previous case the module couldn't be found.

So, how can we fix the problem?
To solve the problem, usually, you have to:

1. add a directory called *types* on your project's root

2. create inside of that folder a file called *index.d.ts* with the following content

```
declare module "*.jpg";
declare module "*.png";
```

*N.B. the extension depends on the file type you are adding.*

3. install the *file-loader* dependence using **npm**, **yarn** or **pnpm**

```
npm install --save-dev file-loader
```

4. update your **webpack** config file to use the file-loader module like this

```
...
{ test: /\\.(png|jp(e*)g|svg|gif)$/, use: ['file-loader'], }
...
```

Then, you can run your application, your build will succeed and your image will appear! 🎩

![](https://miro.medium.com/max/1320/1*fERuNYOYofhptxfy3AAeSA.jpeg)
Event loop and Call stack in JavaScript
Tags: javascript, webdev, beginners
Published: 2022-07-22 09:28:00

Event Loop is a confusing enough topic to beginners and is often misunderstood.  Here I am going to explain some terms so that you can better understand how things work and what the Event loop is.

## Introduction 

We hear all the time that JavaScript is a single-threaded programming language which means JavaScript can execute one thing at a time. JavaScript engine executes one line at a time from the top of the file synchronously.  So does it means If a function takes a long time to execute, you cannot interact with the web browser during the function’s execution because the page hangs?

The web browser also has other components, not just the JavaScript engine.

When you make a fetch request, call the setTimeout() function, or click a button, the web browser can do these activities concurrently and synchronously.

The setTimeout(), fetch requests, and DOM events are parts of the Web APIs of the web browser. These Web APIs are not part of JavaScript. They are part of Browser.


![event loop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eidmed7j7096n1hyw076.png)

Let's understand each part individually so that we can get an idea of how things work asynchronously.

## Call Stack and Heap 

As we can see here JavaScript engine has a memory heap and a Call Stack. The memory Heap allocates memory for functions and variables and updates the values as per the logic. 
The Call Stack is present inside the JavaScript engine and it can execute one thing at a time and all the code gets executed inside this Call Stack. Call Stack follows the Last-In-First-Out (LIFO) sequence.

## Web API

The Web APIs are provided by the web browser which gives additional functionality. The Web API calls are added to the Web API container from the Call Stack. So let's suppose we call a set timeout function then 
these results don't instantly get inserted into the Call Stack because that would disturb the flow of execution. Rather, it gets added at the end of the Task Queue.

## Task Queue 

This is a queue that holds all of the tasks which come from the Web API. Task Queue follows the First-In-First-Out (FIFO) sequence.

## Event Loop

The Event Loop is essentially an infinite while loop that continuously runs and checks for two things-


1. If the Call Stack is empty.
2. If there is any task in Task Queue.

When both these conditions become true, the event loop picks up the first element in the queue and puts it on the call stack for the main thread to execute it.


Thanks for reading! Hope that this makes you feel a bit more comfortable with the event loop!
Feel free to reach out to me if you have any questions on [Twitter](https://twitter.com/jeetsdev) 😊.
I'm not sure how this CSS Class code works!
Tags: css, webdev, html, react
Published: 2022-07-22 09:17:00

I'm new to Web Development, and i've made a good progress so far.
I've encountered this in a recent CSS tutorial while building my Portfolio:

`.container {
    width: var(--container-width-lg);
    margin: 0 auto;
 }`

`.container.contact__container {
    width: 50%;
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 12rem;
}`

I have the .container Class in the main index.css file, which has **width** and **margin** as properties that's it. But in my Contact component, in contact.jsx I have one div element with the classes **contact__container** and **container**, and it's only div that has the **contact__container**! :

```
<div className="container contact__container">
        <div className="contact__options"> 
         {stuff here}
        </div>

        <form>
          {Stuff here}
        </form>

</div>
```

My question is why we need to be specefic and write both the container class and the contact__container class ? In the video he said he needs to be specefic to be able to change the width, but what does that mean please? why I can't just do:

`.contact__container {
    width: 50%;
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 12rem;
}`

Thanks a bunch
casual-markdown: lightweight regexp-base markdown parser (+TOC, scrollspy and frontmatter)
Tags: javascript, markdown, regex, toc
Published: 2022-07-22 09:15:00

Just release casual-markdown v0.85 - a super lightweight RegExp-based markdown parser, with TOC, scrollspy and frontmatter support

* simple, super lightweight (less than 190 lines)
* vanilla javascript, no dependence
* support all browsers (IE9+, Chrome, Firefox, Brave, etc..)
* straight-forward coding style, hopefully readable.
* support [basic syntax](https://casualwriter.github.io/casual-markdown/casual-markdown-syntax.html) according [Basic Markdown Syntax (markdownguide.org)](https://www.markdownguide.org/basic-syntax/)  
* support subset of [extended-syntax](https://casualwriter.github.io/casual-markdown/casual-markdown-syntax.html#enhanced-syntax)
* table-of-content (TOC) and scrollspy support
* auto highlight comment and keyword in code-block
* frontmatter for simple YAML
* extendable (by override md.before, md.after, md.formatCode, md.formatYAML)

### Usage

just simply include [casual-markdown.js](https://github.com/casualwriter/casual-markdown/blob/main/source/casual-markdown.js) 
 from local or CDN.  

```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/casualwriter/casual-markdown/dist/casual-markdown.css">
<script src="https://cdn.jsdelivr.net/gh/casualwriter/casual-markdown/dist/casual-markdown.js"></script>
```

Then call markdown-parser by md.html(), or TOC by md.toc()

```
// get markdown source from element
var mdText = document.getElementById('source').innerHTML

// parse markdown, and render content
document.getElementById('content').innerHTML = md.html( mdText )

// render TOC, add scrollspy to document.body
md.toc( 'content', 'toc', { css:'h2,h3,h4', title:'Table of Contents', scrollspy:'body' } )

// render TOC, title=Index, add scrollspy to <div id=content>
md.toc( 'content', 'toc', { title:'Index', scrollspy:'content' } )
```  

Please visit [github](https://github.com/casualwriter/casual-markdown) for more details, or check [Supported Syntax of Casual-Markdown](https://casualwriter.github.io/casual-markdown/casual-markdown-syntax.html)


a little rush work, please let me know if have any bug.


have a nice day,
What companies should care about when it comes to employees
Tags: management, environment, homeoffice, remotework
Published: 2022-07-22 09:14:24

---
title: What companies should care about when it comes to employees
published: true
description: This is entirely my opinion and how I see the post-pandemic world and I would like to hear your opinion on this topic
tags: #management #environment #homeoffice #remotework
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3j5xexhbbgjbl58n9bm.jpg
# Use a ratio of 100:42 for best results.
---

What happened to the world, especially IT, in 2020? COVID-19 has changed a lot in company management. Due to the risk of getting sick, companies switched from the office to full remote. Employees moved their entire work environment to their home office. Indeed, many complained that it was unproductive and work could not be combined with the family, but after some time most of the employees (about half) began to notice the core benefits of remote work. I have been working remotely for a long time, at first, I did not like it and when COVID restrictions weren't so strict and companies started going back to their offices I decided that I should quit my job and get a job at another company to work from the office. So I got a job, returned to the office style of work and realized that I was wrong. I worked less when I was a remote worker, but I was twice as productive. Now I work more, but now my work is less productive. I found that remote work is much more enjoyable, you work when you want, where you want, and at the end of the day your task is done, but in general, you spend much less time on work. I'm not the only one who thinks so. The year is 2022, and many are leaving for remote work. People have changed, and companies should consider moving to a hybrid way of working.

I believe that companies should start caring about the well-being of employees, and not about their presence in the office. IT is a sphere of freedom, you should be comfortable working and being creative. Development/engineering is a creative job, and isolation or lack of comfort is bad for it. The pandemic has shown us that we must spend time with people we love and make choices that are good for our families.

Companies SHOULD BE concerned about:
- the quality of the final product
- employees' well-being and environment
- employees' happiness

Companies SHOULD NOT worry about:
- who and when comes and goes from the office
- how much time the employee spends at work
- planning restrictions and penalties for staff
Build a Group Video Call System using PHP,Javascript + WebRTC Day 8
Tags: webdev, webrtc, javascript, tutorial
Published: 2022-07-22 09:07:22

WebRTC unlocks the possibility that people can create any video chat app they like. The freedom that WebRTC grants makes the technology highly competitive against traditional video chat apps like Skype. In this video we'll cover getting Started with mediaDevices
{% youtube dnRaBxh1xG4 %}
This Week In Python
Tags: python, discuss
Published: 2022-07-22 09:04:34


**Fri, July 22, 2022**


This Week in Python is a concise reading list about what happened in the past week in the Python universe. 


## Python Articles

- [Organize Python code like a PRO](https://guicommits.com/organize-python-code-like-a-pro/) – Python does not enforce a specific file or directory structure. This article helps to establish good practices on how to organize code.
- [LISP.py](https://khamidou.com/compilers/lisp.py/) – Build a LISP in Python.
- [Pretty Maps in Python](https://tech.marksblogg.com/pretty-maps-in-python.html) – Create beautiful maps.
- [Logging in Python: A Developer’s Guide](https://blog.sentry.io/2022/07/19/logging-in-python-a-developers-guide) – Best practices for logging.
- [Ways to Improve Your Monolith Before Transitioning to Microservices](https://semaphoreci.com/blog/monolith-microservices) – Before moving on to microservices it is worth trying to improve a monolithic architecture.



## Projects

- [django-readers](https://github.com/dabapps/django-readers/) – A lightweight function-oriented toolkit for better organisation of business logic and efficient selection and projection of data in Django projects
- [quart](https://github.com/pallets/quart) – An async Python micro framework for building web applications
- [django-awl](https://github.com/cltrudeau/django-awl) – Miscellaneous django tools
- [tasktiger](https://github.com/closeio/tasktiger) – Python task queue using Redis
- [reloadium](https://github.com/reloadware/reloadium) – Advanced Hot Reloading & Profiling for Python
Always `prepend: true` for `before_destroy` callbacks
Tags: rails, callbacks, trick, todayilearned
Published: 2022-07-22 08:46:54

---
title: Always `prepend: true` for `before_destroy` callbacks
published: true
description: Avoid 
tags: Rails, callbacks, trick, TIL
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

Today I encountered a gotcha where a spec for a `before_destroy` callback started to fail after I moved the callback definition to after associations, as is [good form](https://www.rubydoc.info/gems/rubocop/0.58.1/RuboCop/Cop/Layout/ClassStructure).  

Turns out, association `dependent: :destroy` options define `before_destroy` callbacks themselves and since callbacks are normally executed in order of definition, they started to take precedence over the callback that was failing.

The fix for this problem is easy, add a `prepend: true` option to the callback. In fact, it's probably a good, future-proof practice to always define `before_destroy :my_callback, prepend: true`.

See also a [Rails thread](https://github.com/rails/rails/issues/670) on this topic, and an [SO thread](https://stackoverflow.com/questions/33809336/before-destroy-for-model-that-destroys-dependent-records/73077447#73077447) (where I've weighed in).
Amazon EC2 : Protect instances from unintentional shutdown
Published: 2022-07-29 18:35:21

---
title: Amazon EC2 : Protect instances from unintentional shutdown
published: true
date: 2022-07-22 08:45:05 UTC
tags: 
canonical_url: https://venkatesh111.hashnode.dev/amazon-ec2-protect-instances-from-unintentional-shutdown
---

You can now enable accidental stop protection for EC2 Instance just like [accidental termination protection](https://docs.aws.amazon.com/AWSEC2/latest/WindowsGuide/terminating-instances.html#Using_ChangingDisableAPITermination)

here is how you can do in 6 easy steps

1. **Select** your EC2 Instance
2. Click on **Actions**
3. Click **Instance Settings**
4. Click **Change stop protection** ( this is the new feature added)
5. Select **Enable** under Stop protection
6. Click **Save**

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658473028009/RrxTf34C6.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658473052740/RbCSQcM3Q.png)

To disable the feature just uncheck the "Enable" option at Step 5

Special Considerations:

- Not applicable for Scheduled Event that stops the instance
- No change to Auto scaling behavior ( if instance is unhealthy instance will be terminated per ASG rules)
- Not applicable for instance store-backed instances
- Not applicable for Spot Instances.

for more details check AWS announcement page and AWS documentation

[https://aws.amazon.com/about-aws/whats-new/2022/05/amazon-ec2-enables-protect-instances-unintentional-stop-actions](https://aws.amazon.com/about-aws/whats-new/2022/05/amazon-ec2-enables-protect-instances-unintentional-stop-actions)

[https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/Stop\_Start.html#Using\_StopProtection](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/Stop_Start.html#Using_StopProtection)
Pure CSS Woman With Long Earrings
Tags: codepen, html, css, webdev
Published: 2022-07-22 08:43:27

---
title: Pure CSS Woman With Long Earrings
published: true
tags: codepen,html,css,webdev
---

{% codepen https://codepen.io/AsyrafHussin/pen/wvmeGJj %}

<p>Speed Code Video
<a href="https://twitter.com/asyrafhussin4/status/1550396813177368576" target="_blank">https://twitter.com/asyrafhussin4/status/1550396813177368576</a></p>