teleren/devto huggingface dataset:
Starchart: release 0.1 planning
Published: 2023-01-28 04:58:08

This week, after some discussion, a plan was made for release 0.1 of [starchart](https://github.com/Seneca-CDOT/starchart). This involved getting an initial app setup using Remix's [blues stack](https://github.com/remix-run/blues-stack) so that people could code on top of it. Next step involved creating some issues which could be addressed in release 0.1 release 0.2 and some for further releases. As I am mostly focused on front-end and testing, I created the following issues: 

- [Setup Chakra UI for Remix](https://github.com/Seneca-CDOT/starchart/issues/24)
- [Add jest for unit testing](https://github.com/Seneca-CDOT/starchart/issues/26)
- [Add playwright for end-to-end testing](https://github.com/Seneca-CDOT/starchart/issues/25)
- [Add a healthcheck route for the server](https://github.com/Seneca-CDOT/starchart/issues/45)
- [Add a user domain management page](https://github.com/Seneca-CDOT/starchart/issues/46)
- [Add a domain creation page](https://github.com/Seneca-CDOT/starchart/issues/48)
- [Add an Admin Dashboard page](https://github.com/Seneca-CDOT/starchart/issues/23)

The first three issues are the ones that I plan to address in the next few days for release 0.1, which would be next Friday. These could be done in any order but I think setting up Chakra UI with Remix should come first since this would allow the use of Chakra UI components for building the pages. 

This could be followed by adding jest and playwright for testing. Part of this also involves removing any unneeded dependencies that the Remix blues stack comes with, such as [Cypress](https://www.cypress.io/), which is another end-to-end testing framework.
Adding a healthcheck route could also be done in release 0.1 or release 0.2. This would be a `/healthcheck` route that returns a 200 response with a message stating that the server is running. 

The other issues would take longer to address. The user domain management page is supposed to be a page which allows users to view and manage their existing domains. This page also links to the domain creation page, which has a form to allow creation of new domains.

The admin dashboard would serve as a place for admins to view all the certificates, domains, and users. This also includes the ability to search and filter through this data, and update any records. Some aspects of the user dashboard could be reused for this page as well.

Adding these pages requires a design to be created first. One such issue is being worked on to create designs for user dashboard pages using figma ([#36 Create user dashboard pages design](https://github.com/Seneca-CDOT/starchart/issues/36)).
Data types 2.0
Tags: programming, python, news
Published: 2023-01-28 04:58:06

                           Mapping type
Mapping type - dict
1.1.Misol:
dict:x = {"name" : "John", "age" : 36}

1.2.ekranga chiqarish - display x:
print(x)

1.3.ekranga qanday turdaligini chiqarish - display the data type of x:
print(type(x))
                        Set types
set types - set and frozenset
2.1.set:x = {"apple", "banana", "cherry"}

2.2.ekranga chiqarish - display x:
print(x)

2.3.ekranga qanday turdaligini chiqarish - display the data type of x:
print(type(x))

2.4.frozenset:x = frozenset({"apple", "banana", "cherry"})

2.5.ekranga chiqarish - display x:
print(x)

2.6.ekranga qanday turdaligini chiqarish - display the data type of x:
print(type(x))
                      Boolesn type 
Boolesn type - bool
3.1.x = True

3.2.ekranga chiqarish - display x:
print(x)

3.3.ekranga qanday turdaligini chiqarish - display the data type of x:
print(type(x))
                          Binary types
Binary types - bytes,bytearray, memoryview
4.1.bytes:x = b"Hello"

4.2.ekranga chiqarish - display x:
print(x)

4.3.ekranga qanday turdaligini chiqarish - display the data type of x:
print(type(x))

4.5.bytearray:x = bytearray(5)

4.6.ekranga chiqarish - display x:
print(x)

4.7.ekranga qanday turdaligini chiqarish - display the data type of x:
print(type(x))

4.8.memoryview:x = memoryview(bytes(5)) 

4.9.ekranga chiqarish - display x:
print(x)

4.10.ekranga qanday turdaligini chiqarish - display the data type of x:
print(type(x))

                       None type
None type - None
5.1.None:x = None

5.2.ekranga chiqarish - display x:
print(x)

5.3.ekranga qanday turdaligini chiqarish - display the data type of x:
print(type(x))
Drupal 10 and PHPMyAdmin database quick look
Tags: webdev, beginners, tutorial, drupal
Published: 2023-01-28 04:33:38

{% embed https://youtu.be/Dx8GwUpp2og %}

In my last video I created a new FAQ content type, added an image field then created the first FAQ node.

Now let's look into the database to see where Drupal stores it's content.

Leave me comments for specific requests!
Create an FAQ Content Type in Drupal 10
Tags: beginners, tutorial, webdev, drupal
Published: 2023-01-28 04:28:28

{% embed https://youtu.be/oybUyxK3PRI %}

Before creating great content in Drupal you need great Content Types!

In just a few minutes I introduce you to creating a basic FAQ content type in Drupal 10.

Bonus: I get an error uploading a .webp file and show you how to fix it  :)
Creating an open source DAW - part 1
Published: 2023-01-24 18:33:40

As a developer, I have always been fascinated by digital audio workspaces (DAWs) and the endless possibilities they offer for creating and manipulating sound. That is why I am excited to announce my latest project: an open-source DAW built using JavaScript and HTML, packaged in a single downloadable HTML file.

The goal of this project is to create a simple, user-friendly DAW that can be run offline and on any device with a browser. Some of the features I hope to implement include:

- A record button that exports audio in the WAV format
- A basic synthesizer that can receive live MIDI data from a MIDI output device
- A recorder that can capture audio from the default computer microphone

I am reaching out to the community for help and collaboration on this project. While I am experienced in JavaScript, I am still learning and would welcome any contributions, ideas, or feedback. This project is built on the open-source spirit, and I am excited to see what we can create together.

One of the main reasons for choosing a single HTML file is its convenience and ease of use. It can be easily downloaded and run offline, eliminating the need for any additional setup. Additionally, this format allows the DAW to be run on any device with a browser, making it accessible to a wide range of users.

Stay tuned for updates on this project, and please feel free to reach out if you are interested in contributing or have any questions. I am excited to see where this project goes and can't wait to share it with the world.

You can view the current demo on my website:
https://www.aliraza.cloud/apps/cloudcore-daw

Or alternatively find the code on GitHub:
https://github.com/cloudmaking/CloudCore

Sadly I have been sick on and off for the past week so I haven't had much time of motivation to code, looking forward to getting back at it soon, if you do want to contribute or help feel free to DM me on Twitter or Instagram @Cloudmaking

As this is an ongoing project, make sure to follow me so you can stay up to date. Thank you for Reading and Have an amazing day!
The U&ME Terminal Game (Python)
Tags: python, computerscience, gamedev
Published: 2023-01-28 03:38:52

This is the final project of CS101 (Computer Science - Introduction to Programing) from CodeCademy that I've developed.

**It's a terminal game to exercise my python skills, just a simple way to express what I can do.**

_Your partner will write 3 specific questions about anything and you'll have to answer.

1. Your partner write 3 questions and the respective answers.
2. You have to answer these 3 questions.
3. You gain 1 point for a correct answer._


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


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


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


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

You can access this project on GitHub: [U&ME](https://github.com/ativux/ume)

I've also practiced some of my Git and GitHub skills in this project:


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

Contact me on LinkedIn: [Ricardo Matias](https://www.linkedin.com/in/ricardo-matias-567610132/)

Thank you so much for the attention!
How To Dynamically Import Image in Vue Vite
Published: 2023-01-28 03:37:06

The JavaScript function below takes a parameter name and returns a URL for an image file with the specified name. It uses the URL constructor to create a new URL object, with the first argument being the path to the image file, which is constructed by concatenating the directory name "./dir/", the name passed as a parameter, and the file extension ".png". The second argument passed to the URL constructor is import.meta.url, which is a property that contains the base URL of the current module.

You can read more about importing statics assets at
https://vitejs.dev/guide/assets.html

`function getImageUrl(name) {
     return new URL(`../assets/images/${name}`, import.meta.url).href
      }`

By calling the href property of the returned URL object, the function will return a string containing the full URL of the image file, including the protocol (e.g. "https:"), the hostname (e.g. "www.example.com"), and the path to the file.

This function can be used in your Vue component to set the image url. For example, you can create a computed property that returns the import statement for the image you want to use as the background, and then bind that property to the "style" binding of a div element.
Here is an example for static image:

```
<template>
      <img :src="getImageUrl(img )">
    </div>
</template>

<script>
 setup() {
const getImageUrl{
    new URL(`../assets/images/image.jpg`, import.meta.url)
      } 
return {
getImageUrl 
}
}
</script>
```
Here is an example for dynamic image using option api:

```
<template>
  <div id="bg" 
     :style="{background:`url(${getImageUrl(ImageNow) })` + `no-repeat center  center/cover`}">
</div>
</template>

<script>
  export default {
    data () {
      return {
        images: ['city.jpg', 'house3.jpg','family.jpg'],
         currentImage: 0,
         interval: null
 }
},

  methods: {
  changeImage () {
  this.interval = setInterval(() => {
  this.currentImage++
  }, 10000);
    },
  
   getImageUrl(name) {
     return new URL(`../assets/images/${name}`,import.meta.url).href
      }
  },
 computed: {
      ImageNow () {
      return this.images[Math.abs(this.currentImage)% this.images.length] 
      }
  } 
}
</script>`

```
With Dynamic URL & absolute Path using composition api:

```
<template>
 <div class="gallery">
        <img v-for="img in gallery" :key="img " :src=" getImageUrl(img )">
    </div>
</template>

<script>
import {ref} from 'vue';

export default {
 setup() {
 const gallery= ref([
  'gallery1.jpg' ,'gallery2.jpg',
 'gallery3.jpg','gallery 4.jpg',
 'gallery5.jpg' ,'gallery6.jpg',
    ] ) ,

function getImageUrl(name) {
     return new URL(`../assets/images/${name}`, import.meta.url).href
      } ,

return {
getImageUrl , summary 
}
}
}
</script>

```

## Summary
It's important to declare the  getIamgeUrl function in script. Then pass parameters from data. The parameters(image URL) can either be loop using Vue v-for, computed or pass directly incase of single image path.
Read more about handling statics assets at
https://vitejs.dev/guide/assets.html
Must know CSS code.
Tags: webdev, css, html
Published: 2023-01-28 03:11:32

1. display:flex;

2.justify-content:center;

3.align-items:center;

4.background-image:url(./whatever-image-you-have);

5.background-repeat:no-repeat;

6.font-weight:bold;

7.background-size:cover;
  
Lets Go!
Partai literasi
Tags: writing, blog, books, speaking
Published: 2023-01-28 02:16:12

[Partai literasi](https://literasipartai.blogspot.com/) adalah wadah untuk memberikan motivasi membaca dan menulis generasi milenial. Berdiri awal tahun 2022 dengan semangat membudayakan semangat berliterasi. Harapannya bisa menjadi komunitas yang menginspirasi banyak orang.
A Novel Way to Look at Binary Tree
Published: 2023-01-28 00:47:24

---
title: A Novel Way to Look at Binary Tree
published: true
description: Just experimenting with visualization of a binary tree as after many year in IT I found the traditional way of doing it boring and not satisfying anymore
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g50ee4n11cvs1efsxemc.png
# Use a ratio of 100:42 for best results.
published_at: current
---

Just having a Friday night fun experimenting with the way to visualize a binary tree in a way I haven't seen it done before :-).

Also demonstrating that simple zoom tool can add a new pseudo dimension into your data visualization. As we have this zoom feature in many tools like Miro, Figma and many other - why don't we use it in our advantage?

Have a great weekend everyone.

{% youtube oilOtzDvGkw %}
Sharing a Website with a Client During Development
Published: 2023-01-28 00:32:21

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

## Sharing a Website with a Client During Development

When developing a website, it’s often necessary to share it with a client for feedback and approval. However, this can be a challenge if the website is not yet hosted and ready to be accessed by the public. Fortunately, there are a number of ways to share a website with a client while it is still in development.

## Introduction

Sharing a website with a client while it is still in development can be a challenging task, as the website is not yet hosted and ready to be accessed by the public. However, there are a number of ways to share a website with a client during development, such as using a local development server, a cloud-based development environment, a version control system, and so on.

## Methods of sharing a website during a development

1. Using a local development server: This method involves installing a local development server such as XAMPP, WAMP, or MAMP on your computer and running the website on it. Your client can then access the website by visiting your IP address on their computer.

2. Using a service like ngrok: This service allows you to expose a local web server to the internet. You can use it to share your website with your client by giving them the ngrok URL.

3. Using a cloud-based development environment: Services like CodePen, JSFiddle, and Glitch allow you to create and host web projects online. You can use these services to share your website with your client while it is still in development.

4. Using a version control system: You can use a version control system like Git to version your code and share it with your client via Github, Gitlab, Bitbucket, and other similar services.

5. Using a local network: If both you and your client are on the same local network, you can share the website by giving your client the local IP address of your machine.

## Pros and Cons

**Pros:**

Enables real-time collaboration and feedback from the client
Allows for quick iterations and adjustments to the website
Allows for testing of the website in a live environment

**Cons:**

Some methods may require some technical knowledge from the client
The website may not be fully functional or accessible as it would be in a live environment

## Conclusion

Sharing a website with a client during development is an important step in the development process. By using a local development server, a service like Ngrok, a cloud-based development environment, a version control system, or a local network, you can share your website with your client while it is still in development and get feedback and approval. While some methods may require some technical knowledge, they allow for real-time collaboration, quick iterations, and testing of the website in a live environment.
Best Brokers to Buy PayPal Shares:
Tags: webdev, share, paypal, broker
Published: 2023-01-28 00:20:50


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9em7emqeeuqs9zrr0tef.jpg)
Interactive Brokers: A US-based discount broker that is regulated by several authorities, including the FCA and SEC.
Zacks Trade: A US-based discount broker that allows international clients to open accounts. Regulated by the SEC and FINRA and protected by the SIPC scheme.

Mexem: A European-based global stockbroker for traders and investors. An introducing broker of Interactive Brokers IE, which the Central Bank of Ireland regulates.
Steps for Buying PayPal Shares:

Step 1: Find a Suitable Online Broker

Research and compare different factors like broker fees, trading platforms, accessible markets, and ease of account opening.
Look for a broker that is reliable and regulated.
Step 2: Open a Brokerage Account

Open an account with your chosen online broker.
The process is like opening a regular bank account and is usually digital.
Step 3: Deposit Money into Your Account

Transfer money to your broker account using methods such as bank transfer or credit/debit card.
Some brokers also allow deposits from electronic wallets like PayPal.
Step 4: Buy the PayPal Share

Log in to your online broker and search for the PayPal share.
Insert the number of shares you wish to buy and click the “buy” button to execute the purchase.
Consider different order types, such as market or limit orders.
Step 5: Regularly Review Your PayPal Position

Check your investments by following your investment strategy.
Use position management tools, such as setting target prices or stop-loss orders.
Note: Take the time to review and consider the top brokers recommended for purchasing PayPal shares.
Scrimba's JavaScript Deep Dive - Part II
Published: 2023-01-28 00:08:18

Types & Conditionals:
- If, else if or else -> as usual
- Switch (something) {case break and default}: can be more useful 
- Primitive types (string, number, boolean, undefined, null & symbol) or Object (everything else). We can look for type with `typeof`
- explicit type conversion (with functions) or implicit (automatic // coercion)
- In conditionality, java script will convert to boolean. All value will be "truthy" (coercion to true) and "falsy" (coercion to false). Remember that: "false", "0", " '' " (empty), "null", "undefined" and "NaN" are the falsy values.
- For direct comparison, we need to use `===` as other equals change types. And avoid direct comparison (`=`)
- Ternaries do not allow actions. They are nice with value assignment with conditionals
- `&&` has higher precedent than `||`, unless we are using `()`
How I fixed the React Router Issue
Tags: javascript, programming, react, beginners
Published: 2023-01-27 23:44:14

In my [previous post](https://dev.to/taepal467/help-with-react-router-1gm), I was having problems with my React project not showing when uploaded to Github. Turns out, all I had to do was add the 'basename' attribute to BrowserRouter.

```
<BrowserRouter basename="project-name">
//Code
</ BrowserRouter>
```
According to [React Router](https://reactrouter.com/en/main/router-components/router), 

> The <Router basename> prop may be used to make all routes and links in your app relative to a "base" portion of the URL pathname that they all share.

Let's say for example, your project URL is `"https://username.github.io/myProject"`
When using 'BrowserRouter', make sure to pay attention to the local host URL after running **npm start**. If it looks like this, `localhost:3000/myProject`This means that the base portion of the URL pathname is 'myProject'.

So in your App.js or index.js file, or wherever you have imported BrowserRouter, make sure to add the basename attribute so your project can work.

```
<BrowserRouter basename="/myProject" >
//code
</BrowserRouter>
```

Hopefully this will help those who had the same issues I had. Happy Coding!
Device Authorization - Zoom Use Cases
Published: 2023-01-27 23:13:56

## Introduction

In my [Device Authorization article](https://dev.to/zoom/device-authorization-zoom-4id2), I shared how to utilize this feature as well as how users can set up and execute simple testing. So what exactly are the potential use cases for users using Device Authorization rather than the conventional OAuth process? Let's explore them here.

---

## Use Case 1 - Smart TV

Recall your login in experience the last time you logged in to your Youtube or Netflix account on your Smart TV.  How was the login process user experience?

![Sign In Page](https://drive.google.com/uc?export=view&id=1ryC6LSPmxMnVbfCg_FQOXMi1qA-IQMZE)

Imagine having to manually navigate to each of the characters of your email and password for a simple login process. For those with a secure combination of digits or even symbols, this entire sign-in process can be extremely frustrating.

We certainly do not want Zoom's user experience to be frustrating. This is where the magic of Device Authorization comes in. With this feature, a QR code is generated from Zoom's login page for users to scan. This allows users to utilize their Zoom account on their mobile device to grant access to your application with ease.

---

## Use Case 2 - Automotive Touch Screen Display

The same use case above can also be applied to automotive touch screen display! Even with a touch screen keyboard function available, the user can simply scan the same QR code generated from Zoom's login page for application access for additional simplicity.

![Automotive Touch Screen Display](https://drive.google.com/uc?export=view&id=1Cwyub3InXCGIhEAkODt2cu6Z0W85jyLK)

---

## Use Case 3 - Smart Glasses / AR/VR

Users can face a frustrating challenge in use cases with no virtual or touch-screen keyboard. For example, when using smart glasses for augmented reality (AR) or virtual reality (AR). The Device Authorization Grant solves this!

![Smart Glasses](https://drive.google.com/uc?export=view&id=1T7E6vaM7DnSOIFQ5dIbIX3tVaLLPJSxr)

---

## Video on how can it be done on these use cases

<video 
 src="https://drive.google.com/uc?id=1pzUbwFREs72YIF1kgDWqLXCrIev20wh-" controls>
</video>

---

## Conclusion

The Device Authorization Grant helps your users easily access your application by removing the painful process of manual credentials and replacing it with Zoom’s simple log-in process. This streamlined log-in process minimizes frustrations and facilitates a positive long-in experience for your users.