teleren/devto huggingface dataset:
Coding Period GSoC'23 | Week 9 + 10
Tags: javascript, webdev, gsoc23, circuitverse
Published: 2023-08-13 10:23:41

Welcome back to another progress update on my GSoC'2023 journey.

### **Work Done (26th July - 10th August):**

Let's begin with a dive into the work that's been accomplished. As I mentioned in my previous blog post, my primary focus this week was to complete a significant task: [PR](https://github.com/CircuitVerse/CircuitVerse/pull/3781). This pull request involved designing and implementing a modal for an enhanced simulation area, where users could edit erroneous circuits. Over the course of 4-5 days, I brainstormed different approaches and attempted their implementation.

My goal was to create a modal that allowed users to edit erroneous circuits directly in the simulation area. This required careful thought and effort, and I explored various techniques to achieve this. However, I encountered challenges in finding an effective solution. Seeking guidance, I had a discussion with my mentors, where I shared my ideas and concerns. They advised me that implementing a simulation area with error editing functionality could be quite complex, and suggested prioritizing the core functionality and addressing UI concerns later.

Taking their advice, I focused on ensuring the proper working of the state machine and retaining the initially planned UI design. Essentially, whenever an error exists within the circuit, all tabs will remain hidden. Once the erroneous component is removed, all tabs become visible. This ensures a seamless user experience during circuit editing.

Moving forward, I tackled two key tasks related to data integrity:

**- Delay 0 on Non-Input/Output Components:**
The challenge here was that components could be set with a delay of 0, but this setting couldn't be saved. To address this, I implemented a solution by introducing a condition that allows components with a propagation delay of zero to be saved with the appropriate value. This ensures that components behave as expected, even with a delay of zero.

**- Maintaining Wire Connections While Moving Components**
In this challenge, I encountered issues with connected wires becoming disarrayed when moving a component. The existing system only checked if a component's nodes had moved to different y or x-coordinates. To prevent overlapping or collisions, I'm in the process of developing a more robust collision detection system. While this task is still a work in progress, I'm dedicated to finding a comprehensive solution.

### **What's Next?**

As the end of the Google Summer of Code (GSoC) program draws near, I have a clear roadmap for the remaining tasks. With only a few days left, I have one task left to tackle:
- Identifying areas where defensive coding practices are needed instead of assuming data will always be in the proper format.

This task will be my focus in the upcoming weeks. Additionally, I'll be working on completing the pending work in [PR](https://github.com/CircuitVerse/CircuitVerse/pull/3928).

Stay tuned for more updates and progress in the coming weeks!
DSA+Subjects traversal in 10 days
Published: 2023-08-13 10:17:13

This is a self accouting blog series that I am writing to get up and running in DSA very quickly. The aim is to be able to give new grad interviews with ease.

## Initial Targets
- DSA with C++
- C,C++,Js,Nodejs,SQL in programming languages
- OOPS, DBMS, OS, CN
- Web Concepts

### Situation
- I have not done DSA in 4 years of so called bactech

### Resources
- Algorithms in a Nutshell book
- Abdul Bari on Udemy
- GFG DSA Course
- Competitve Programming Handbook by someone that sounds lik e Eli Jang
- Lots of Online Resources on bookmarks
Redirecting Your Domains using Cloudflare
Tags: webdev, tutorial, beginners, learning
Published: 2023-08-13 10:16:06

> I was not available for some time, so I haven't written about anything in a long time, recently I bought a [new domain](https://blankparticle.in) so I had to redirect my old domain and its subdomains to my new domain, This small blog is about how to do that.

> You can expect regular blog posts from me starting in September.

I recently had to redirect my `.me` domain to `.in` domain, so I had to do Cloudflare domain redirects. Here is how to do it.
## Adding DNS Records
First you need to add some **DNS Records**, follow this table and create new records or edit your existing records.

| Type | Name | Content   | Proxy Status | TTL  |
| ---- | ---- | --------- | ------------ | ---- |
| A    | `*`    | 192.0.2.1 | Proxied      | Auto |
| A    | `@`    | 192.0.2.1 | Proxied      | Auto |

> You should not edit non-conflicting Records until you know what you are doing

## Setting Up Page Rules
Once you have DNS setup, go to **Rules > Page Rules**, Add a new rule with the config defined below,

URL: `*olddomain.com/*`
Setting: Forwarding URL
Status Code: `301` / `302`
Destination URL: `https://$1newdomain.com/$2`

Now save the page rule and enable if already not enabled, This might take up to an hour to reflect on all devices due to DNS Caches.

## Effects
With this config all URLs and subdomains of `olddomain.com` will be redirected to `newdomain.com`

| From                                              | Redirected To                                     |
| -------------------- | ------------------------- |
| `https://olddomain.com`                           | `https://newdomain.com`                           |
| `https://olddomain.com/anypage?with=query_string` | `https://newdomain.com/anypage?with=query_string` |
| `https://www.olddomain.com`                       | `https://www.newdomain.com`                      |
| `https://anything.olddomain.com`                  | `https://anything.newdomain.com`                  |

## Sources
- [Cloudflare Docs - Manage Domains](https://developers.cloudflare.com/fundamentals/get-started/basic-tasks/manage-domains/redirect-domain/)
- [Cloudflare Docs - Page Rules](https://developers.cloudflare.com/support/page-rules/configuring-url-forwarding-or-redirects-with-page-rules/)
- [Cloudflare Forum](https://community.cloudflare.com/t/redirecting-one-domain-to-another/81960)
window.confirm component in react
Tags: react
Published: 2023-08-13 09:55:46

In web app we frequently use window.confirm() which return a promise and when resolved we do something base on the user input. I tried doing the same thing with context api. The context provider redender the children and a confirmation modal componet. The context gives an useConfirm() method which returns an async function lets say confirm(). Now calling this confirm() method with an await, the confirmation modal gets rendered.

I have created a npm library of this implementation and also added some customisation feature.

Check this link for full details: https://www.npmjs.com/package/react-confirm-window
Cooking for Programmers
Tags: cooking, gift, birthday
Published: 2023-08-13 09:51:12

A funny cookbook written in Javascript, C++, PHP, Typescript, Python, R, MATLAB(r), Ruby, C#, Rust, GO, Java, Perl, Smalltalk, Haskell and Ada.

Each recipe is written as source code in a different programming language, making it not only delicious but educational as well.

[A funny gift for coders!](https://www.amazon.de/Cooking-Programmers-0x00-Tech-savvy-Languages/dp/B0BS8HJRW9)
Unlocking Opportunities: My Oasis-Infobyte Internship Journey and Beyond
Tags: oasisinfobyte, webdev, javascript
Published: 2023-08-13 09:50:32

Embarking on an internship journey is a pivotal moment in any aspiring developer's life. It's a chance to dive into the real-world applications of your skills, learn from industry experts, and contribute to meaningful projects. In this blog post, I'm excited to share my personal experience as a web development intern at Oasis-Infobyte (oasisinfobyte.com) and shed light on the diverse internship programs they offer, from Android development to graphics designing.

My Journey into Web Development at Oasis-Infobyte:
My journey with Oasis-Infobyte began with a web development internship that opened a gateway to a world of learning and growth. From day one, I was immersed in a collaborative and dynamic environment where creativity and innovation were not only encouraged but celebrated helping me navigate through complex projects and empowering me to overcome challenges.

The Multifaceted Internship Programs:
One of the most exciting aspects of Oasis-Infobyte is its diverse range of internship programs. Whether you're passionate about Android development, graphics designing, or other fields, Oasis-Infobyte has an internship tailored to your interests. This multifaceted approach not only exposes you to different aspects of the tech industry but also allows you to explore your passions and discover new talents.
What does a good Software Architecture support?
Published: 2023-08-13 09:05:41

**Use Case and Operation System**

A well-designed architecture serves as a robust foundation for accommodating diverse use cases and operating systems. It ensures that the software application is adaptable to various scenarios and user interactions. By carefully structuring the architecture to separate concerns and define clear interfaces, developers can seamlessly integrate new use cases without disrupting the existing functionality. Additionally, a thoughtfully crafted architecture facilitates cross-platform compatibility, enabling the software to run smoothly across different operating systems, enhancing user experience and broadening the application's reach.

**System Development**

An effective architecture significantly eases the process of system development. It provides a structured roadmap for developers to follow, breaking down the software into modular components with distinct responsibilities. This modularity fosters collaborative development, where teams can work concurrently on different modules without stepping on each other's toes. With a clear architecture in place, developers can better understand the codebase, streamline collaboration, and reduce the chances of code duplication. This leads to faster development cycles, fewer bugs, and higher overall code quality.

**System Deployment**

A strong architecture directly contributes to successful system deployment. It enables the development of deployable units that can be independently tested and packaged. This modularity facilitates continuous integration and deployment pipelines, allowing for automated testing, validation, and deployment of individual components or modules. A well-structured architecture also considers scalability and resource allocation, ensuring that the system can handle increased loads without compromising performance or stability during deployment. This results in smoother rollouts, quicker response to changes, and minimized downtime.

**System Maintenance**

A good architecture greatly simplifies the task of system maintenance. The separation of concerns inherent in a well-designed architecture means that updates or fixes can be targeted to specific components without affecting the entire system. This reduces the risk of unintended consequences when making changes. Maintenance tasks become more manageable and less error-prone as developers can easily identify and isolate issues within specific modules. The clear structure also aids in onboarding new developers, as they can navigate the codebase more effectively and understand the system's architecture, leading to efficient maintenance and timely updates.
Test Blog
Published: 2023-08-13 09:00:03


### Testing blog upload from notion


## Heading 2

- bullet 1
- bullet 2

```javascript
// Code BLock

const a = 'test';
```


> Quote


---

1. 1 a
2. 2 b
3. 3 c
4. 4 d
5. 5 e

![image](https://images.unsplash.com/photo-1609501886186-d4de01248beb?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb)
Self Discovery and Goal Setting
Tags: podcast
Published: 2023-08-13 08:56:03


Embark on an Exciting Journey of Self-Discovery and Goal Setting! 🚀✨ Uncover your potential, define your aspirations, and set the course for a fulfilling future. Join us in Episode 1 of the Personal Development Series as we delve into the realms of growth and achievement. Let's ignite the spark of progress together! 🔥🌱
Welcome to the “Personal Development Series” brought to you by orioninsist! In this enlightening episode, we dive deep into the world of self-discovery and goal setting, two essential pillars of personal growth. Join us on this journey to unlock your true potential and create a more fulfilling life. Don’t forget to hit the like button, subscribe, and ring the notification bell for more empowering content! 🔔✨

🎙️ Episode Highlights 🎙️
The art of understanding yourself and its role in personal development. The significance of aligning your goals with your values and passions. Unveiling the S.M.A.R.T. method: Crafting goals that lead to success. Tips to overcome obstacles and stay motivated on your journey. Insights into turning self-awareness into a catalyst for positive change.

🚀 Join the Discussion! 🚀
Share your thoughts in the comments:

What’s your biggest takeaway from this episode? How do you plan to apply self-discovery in your life? Have you set S.M.A.R.T. goals before? Share your experience!

Subscribe for more episodes that empower you to become the best version of yourself! 🔔

🎓 Stay tuned for more Self-Improvement Podcasts and make sure to LIKE 👍, COMMENT 💬, and SUBSCRIBE to our channel to support us and stay updated with the latest tech content! 📺

[Podcast](https://youtu.be/Nv173G6Rnt0
)
React JS Interview Questions - Part 1
Tags: webdev, javascript, react, beginners
Published: 2023-08-13 08:55:00

## What is React JS?
🚀 Welcome to the world of **React JS**, a powerful JavaScript library for building dynamic user interfaces! Let's break down the essence of React JS step by step.

### React JS: Library or Framework?

React JS stands as a **versatile JavaScript library**. While comparisons with frameworks like Angular or Vue are common, React is akin to a toolbox, offering a diverse set of tools that can be added as needed. It's like building your toolkit for a custom-tailored framework experience.

💼 For **routing**, dive into **React Router**.
🔮 For **state management**, explore the realm of **Redux**.
🎨 To add stylish icons, discover the world of **React-Icons**.

The beauty lies in the flexibility. As you integrate these tools, React transforms into a full-fledged framework tailored to your needs.

### Components: The Building Blocks

At the heart of React lies the concept of **components**. These are the Lego blocks of your UI architecture. Just like Lego, you build amazing structures by combining these pieces.

![React Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/weuic0ov90gyeepn00yc.png)

In the image above, different components are color-coded, illustrating the art of breaking down a website into manageable modules.

## Why Components?

Think of components as your superpower. They eliminate repetition and promote consistency. 

![Reusable Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esy0f78eqbix2z36ky07.png)

![Reusable Components 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6wxgfsso5szqo1kmo0i.png)

Check out my [portfolio](https://mursalfk.com) as an example. The popup component? Used multiple times with unique data. The navbar and footer? Created once, used universally. 

Efficiency meets elegance, as time is saved and branding remains cohesive throughout.

## Until Next Time

That concludes Part 1 of our journey. 

![See You Soon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axb6lwvs0wmpc26ubel7.gif)

Found this insightful? Smash that like button! Share your thoughts in the comments. Stay tuned for more as we unravel the magic of React JS in upcoming articles.

🎉 *Happy Coding!* 👋
How to pretty print json with golang ?
Tags: go, json, backend, backenddevelopment
Published: 2023-08-13 08:44:56

As you know by default in Go you will use `fmt` to print json data, this is ok but the data will be not beuatiful in the terminal, take this util function to print your json data in a pretty format:

```golang
// PrettyPrintData takes a single argument 'data' of any type (interface{}).
func PrettyPrintData(data interface{}) {
	// Convert data to pretty-printed JSON.
	if prettyOutput, err := json.MarshalIndent(data, "", "  "); err == nil {
		fmt.Println(string(prettyOutput))
	} else {
		// Handle error
	}
}
```

## This is how it will look in the terminal:

Before:

```
{"id":1,"name":"John","address":{"city":"New York","zipcode":"10001"},"friends":[{"name":"Mike"},{"name":"Anna"}]}

```
After:

```json
{
    "id": 1,
    "name": "John",
    "address": {
        "city": "New York",
        "zipcode": "10001"
    },
    "friends": [
        {
            "name": "Mike"
        },
        {
            "name": "Anna"
        }
    ]
}

```
I hope this will help you, and thanks for reading.
Compile cpython on M2
Tags: cpython, python, mac, m2
Published: 2023-08-13 08:20:12

---
title: Compile cpython on M2 
published: true
description: Short troubleshooter for compile cpython from source 
tags: cpython, python, mac, M2
# cover_image: 
# Use a ratio of 100:42 for best results.
#published_at: 2023-08-13 07:35 +0000
---
Short instruction how to succefully complie cpython from source code on M2.  

You need to sure that xcode installed or 

```shell
xcode-select --install
```

We need to install with brew:

```shell
brew install openssl xz zlib gdbm sqlite gcc
```

Git clone cpython. My case is `heads/v3.9.0b1`

```shell
git clone https://github.com/python/cpython
```

CD to cpython folder
Compile:

```shell
CPPFLAGS="-I$(brew --prefix zlib)/include" \ 
LDFLAGS="-L$(brew --prefix zlib)/lib" \
CC=/opt/homebrew/bin/gcc-13 \ 
arch -x86_64 \ 
./configure --with-openssl=$(brew --prefix openssl) \
--with-pydebug
```
What the heck am I building?
Published: 2023-08-13 07:32:48

Before answering the question, let's start with the problem.

1. Our files are scattered everywhere.
I send files via Gmail to friends, upload them to Slack and Discord for work, and store personal documents in Google Drive and on my local machine. I even have tons of notes in OneNote. Finding a specific file, like my 2 a.m. thoughts, becomes a challenge. Was it in OneNote or Google Docs? And if it's in Google Docs, which of the hundreds of folders? Maybe I sent it to a friend via email or even Discord?
This problem is magnified in teams where files are constantly sent across members, making search and management a daunting task. In a large company, it's common to send the same file multiple times to the same employee simply because they couldn't find it.

2. Inefficient use of stored information.
In one way or another, we all have a vast internal knowledge base. Most internet users store files in storage systems like Google Drive, Obsidian, or Notion. But we often don't make good use of these stored knowledge bases. Consider this scenario: I'm struggling to solve a complex Calculus question. I have my Calculus book, which contains information on how to solve such problems. Even if it doesn't have the answer to the specific question I'm working on, it has the steps, rules, and information needed to solve it. Why can't I simply ask my book for the steps that would lead me to the solution? Additionally, if I want to write an article about the Amazon forest and have related materials in my Google Drive, why can't I use them to help write the article?

These are the two main problems we are trying to solve at The Drive AI. First, we aim to be a Dropbox for your knowledge base. Users can simply upload or sync documents to create a structured repository of information. Currently, you must manually manage these documents into files and folders, but our goal is to automatically organize them by content. For example, all content related to music theory would be found in one specific folder.

We treat each folder as a knowledge base, a single source of truth to draw information from. So, if you forgot what notes are in Misolydian mode, you can simply ask the music theory knowledge base. Sure you can search the internet for notes in Misolydian mode, but the core idea holds for internal teams and personal documents. Imagine an emergency at a company, and you need to find information on what protocols to follow in the face of an emergency.

With access to this knowledge base, we can tackle the second problem. We can use those files while reading to understand concepts better, search over them to quickly find information, and write new content with sources drawn from them.

This is what we are working on at https://thedrive.ai

Full article here: https://thedrive.ai/publish/ebfb16a7d2cfde880df194bfd72178c2:9f7272e3919e859c34e796679a9206b896594e0834888db4a18ee7b50cda83407c011872e6dff7dae582bdc83996e386
VueUse and VueJS OPTION API
Tags: vueuse, vue
Published: 2023-08-13 08:10:21

_This is my 7th write up on dev.to site. I have tried two functions - useStorage and useColorMode - and it works even with VueJS Option API. Source code of important parts as a simple example is included._

## VueUse ##
VueUse is an library of functions, it covers a wide spectrum of useful enhancements for VueJS apps. It describes itself as a **Collection of Vue Composition Utilities** and it's documentation begins with **VueUse is a collection of utility functions based on Composition API.** 
Since I have used VueJS from it's 1.x version, I still use as a developer of mobile apps Option API. Call me conservative person but I like it.

## VueUSE + VueJS: useStorage, useColorMode ##
I show you a simple example of both functions on web/mobile app (HTML + CSS + JS).

First declare two objects outside of any VueJS app or component. OK, declaration doesn't look as an classic object, you can verify it by console.log(typeof state) and console.log(typeof colorMode) and it says **object.**

``` js
const state = VueUse.useStorage('state', 
  {age: 21, numbers: []}, 
  localStorage,
  {mergeDefaults: true}
);

const colorMode = VueUse.useColorMode({
  modes: {
    dark: 'dark',
    dim: 'dim',
    cafe: 'cafe',
  },
  attribute: 'theme',
});
```
Next step is to declare two variables inside Vue main app, both are assigned to above declared objects.
``` js
const app = Vue.createApp({
  template: "#main",
  data: function(){
    return {
      state: state,
      colorMode: colorMode,
    }
  },
...
});
```
Now I can use state.age and state.numbers (from first object, state) as persistent values. It means I can reload app, close it and open again and all data stored in state object (age, numbers) are loaded back from localstorage. For more information see [documentation](https://vueuse.org/core/useStorage/#usestorage).

``` html
<label for="age">age: </label>
<input v-model="state.age" id="age" >
<p>You are {{state.age}} years old.</p>
```

The same is for colorMode object, it persist color mode of user's choice. Add simple button to your app, call function on click event and change actual color mode.

``` html
<button @click="changeTheme()">{{colorMode}}</button>
```
``` js
changeTheme: function(){
  var newTheme = "";
      
  if (this.colorMode == "light") newTheme = "dark";
  if (this.colorMode == "dark") newTheme = "dim";
  if (this.colorMode == "dim") newTheme = "cafe";
  if (this.colorMode == "cafe") newTheme = "light";

  this.colorMode = newTheme;
},
```
It works together with CSS rules:
``` css
[theme='dark'] {
  background: #252525;
  color: white;
}
[theme='dim'] {
  background: gray;
  color: white;
}
[theme='cafe'] {
  background: #c0acac;
  color: black;
}
```
And that's it. Simple example of VueUse with VueJS OPTION API. Hope this inspires you.