teleren/devto huggingface dataset:
My First Post [Welcome to my Blog!]
Tags: blog, firstpost
Published: 2022-06-25 22:01:50

---
title: My First Post [Welcome to my Blog!]
published: true
date: 2022-06-21 02:00:12 UTC
tags: blog,firstpost
canonical_url: 
cover_image: https://cdn-images-1.medium.com/max/1024/0*QznLAeTsbGNWbTVf
---

Hey all, my name is Jaiden and I’d like to welcome you to the beginning of my blog journal! I’m a full stack software developer with most of my web development experience using the MERN stack (MongoDB, Express, React, Node). I love learning new technologies and I’m always on the hunt for new project ideas.

As I continue my journey into the life of a software engineer, I will be updating this blog with things I’ve learned along the way. I’m creating this blog to document my progress while also hopefully providing useful information to my fellow computer geeks.

My initial roadmap for things I’ll be writing about will mostly involve features I’ve implemented within the projects I’ve worked on (as well as projects I’m currently developing). These posts will likely align more closely to frontend development, but I will also include the occasional backend feature as well. As an excuse to freshen up on my data-structures and algorithms, I may include the recurring writeup on Leetcode questions I run through as I prepare myself for coding interviews.

Thanks for reading,

Jaiden (aka PvtGandalf)
Web3 Solidity + JavaScript 32 hour course recap #14
Tags: blockchain, solidity, devjournal
Published: 2022-06-21 01:51:36

timestamps 4:33:33 - 4:50:26

As an aside, I applied for the gitcoin grant program, and then pretty much immediately had to put this training on hiatus. I was launching my new website (Banned Books Art)[https://www.bannedbooks.art]. It's a VR art gallery that advocates for free speech, and I decided to make the VR from scratch using the A-Frame library. It was a lot of work, and there's still some cleanup, but overall the launch went well.

So this is more of a review than usual for me....

Anyways, the first thing we did was go to a previous version of Solidity to demonstrate what safe numbers are. It's a little wild that we could accidentally reset everything to zero before Solidity 8.

The unchecked keyword makes our code a little bit more gas efficient.

We instantiated a pretty standard for loop to reset the funders after we withdraw the funds.

for (uint256 i = 0; i < funders.length; i++) {}

which, I know how to do from basic javascript, but that's a little old school for JS, and we now favor forEach, entries, and mappings.

We also reset the array like this: `funders = new address[](0);`

Arrays can be tricky when you don't actually assign them as new objects, so this makes sense that we're setting it to a new array with 0 elements - which makes it empty.

Apparently we went over 3 ways to Ethereum to a wallet, but the third way is to use the call statement. Which is the preferred method in version 8+.

(bool callSuccess, ) = payable(msg.sender).call{value: address(this).balance}("");
        require(callSuccess, "Call Failed");


I'm going to wind up rewatching this portion because I'm pretty sure the ("") is because we don't actually have a callback function that we want to use. We're only checking on the balance.
Redux: Uncaught TypeError: Cannot read properties of undefined (reading 'mySlice')
Tags: redux
Published: 2022-06-21 01:05:07

Oh man, I just had a really annoying redux-toolkit error...
```
Uncaught TypeError: Cannot read properties of undefined (reading 'mySlice')
```

This was caused by a circular dependency in my file structure. I have a file structure like this...
```
stuff
  -> store
    -> index.ts
       reducer.ts
       selectors.ts
  feature
    -> store
      -> index.ts
         slice.ts
         selectors.ts
```
Any code outside of the store files references store stuff via the index.tx which just exports all the other files.

My problem was a selector referencing a selector from a higher level in my store structure via another index.ts.  The reducer at this higher level was referencing the slice at the lower level, again via index.ts.
This is a circular reference.  To fix it, I chose to remove the higher level index.ts and reference the selector file directly.

Hope this helps somebody.
Auto dismissing alert
Tags: webdev, javascript, html, productivity
Published: 2022-06-21 00:04:00


This is part on my mini series(["How to AlpineJS"](https://dev.to/parables/how-to-alpinejs-i91)) on how to build reusable component that can be used in any web framework.


## Auto dismissing alert
{% embed https://gist.github.com/Parables/549a51f6f579cd2ee1957b984a20c297.js %}



> [!Tip]
> Any arguments you pass after the duration for `setTimeout` will be passed to the callback function. In the code snippet above, we passed [`$this.root`](https://alpinejs.dev/magics/root) magic property so that we can auto dismiss it after 5000ms(5 seconds)


Next: [Multipurpose TextField]()
Day 73: Hoo... Frontend 🤷‍♂️
Published: 2022-06-20 23:27:19

Hi!
so the frontend is back and gosh I hate it, well I don't hate it per se I just can't be satisfied with my own work I feel like there's always something to improve and it takes a lot of time. but I think this week I will have no escape since I have many things to work on frontend related that's actually why I'm late today
tomorrow I will be working on the Login and signup pages and validations 
Gotta run (so tired)

Signing off...
One line of CSS to add basic dark/light mode
Tags: css, darkmode, trick
Published: 2022-06-20 22:29:21

---
title: One line of CSS to add basic dark/light mode
published: true
description: using html {color-scheme: dark light;} you can force the browser to show the page differently for users with different modes enabled
tags: css, darkmode, trick
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

When you have your OS set up in dark mode seeing bright form elements is grating. By starting your style sheet with a single line of CSS, you can make sure that people using dark mode get dark form elements and backgrounds and those using light mode, light ones.

![Codepen showing the difference the line of CSS makes - offering the page in a dark and light mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzkrp4z4yv22m0ogvv4m.gif)
 

You can see it in this [codepen](https://codepen.io/codepo8/pen/ZErNKNP):

{% codepen https://codepen.io/codepo8/pen/ZErNKNP %}

You can also use the browser developer tools to [simulate the different modes](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/accessibility/preferred-color-scheme-simulation) to see the difference.

![Emulating different modes in browser developer tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f68fgo7z03yzl4rln3v4.gif)
 
Read more about [color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) on the MDN web docs.
A Vue Shorthand for Slots
Tags: vue, slot
Published: 2022-06-20 22:25:54

Named Slots has a shorthand that isn't necessarily shorter but maybe cleaner.

This is the regular way:

` <Todo>
   <template :description>
   <Item/>
   </template>
   </Todo>
`

This is the cleaner way:

` <Todo>
   <template #description>
   <Item/>
   </template>
   </Todo>
`

[Follow me on Twitter](https://twitter.com/KevinCotoDev) to get more pieces of advice about Vue.js
Why Stateless Architecture is better than Stateful Architecture when scaling web applications
Published: 2022-06-20 21:48:34

A stateful and stateless server has some key differences. A stateful server remembers client data from one request to the next. A stateful server retain states and needs to remember the past and apply it to current operations.

The following image shows how a stateful architecture is designed.

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

From the diagram Client A data are stored in server 1. For Client A to be authenticated all http requests must be routed to server 1. Client B data are stored in server 2. For Client B to be authenticated all http requests must be routed to server 2 if a request is sent to server 1 or any other server the request will fail because those other servers does not contain Client B information. Same goes for Client A, Client C and Client D.

This makes it very difficult to scale because of every request from the same client must be routed to the same server. Adding and removing servers are very difficult with this approach and it is difficult to handle if your server should fail.

## STATELESS SERVERS
In stateless architecture http request from a user can be sent to any web server which fetches data from the same data store. Below is an image of a stateless architecture.

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

The stateless system is more robust and scalable and it is also more simple than the stateful system.

The added flexibility of autoscaling the web servers on the application layer depending on the network traffic allows you to not worry about overhead.
React setState without Render
Tags: setstate, onpress, onchange
Published: 2022-06-20 21:45:04

Since setstate is defined in onpress, it renders again and the ones with input are deleted.

`<View style={styles.container}>
            <View>
              <Text>TAKSİT SEÇENEKLERİ</Text>
            </View>
            {this.state.List.map((item, key) => {
              return (
                <TouchableOpacity
                  style={styles.paymentItemTaksit}
                  key={key}
                  onPress={() => {
                    this.setState({
                      checked: key,
                      taksitsayisi: item.value,
                      surcharge: (cart.total * item.value) / 100,
                    });
                  }}>
                  <View style={styles.shippingItemTitle}>
                    {this.state.checked === key ? (
                      <View>
                        <Icon
                          name="radio-button-checked"
                          style={styles.checkIcon}
                        />
                        {item.value == 1 ? (
                          <Text style={styles.paymentItemText}>
                            {item.taksit} {cart.total} {cart.total}
                          </Text>
                        ) : (
                          <Text style={styles.paymentItemText}>
                            {item.taksit}{' '}
                            {(
                              (cart.total + (cart.total * item.value) / 100) /
                              item.value
                            ).toFixed(2)}{' '}
                            {(
                              cart.total +
                              (cart.total * item.value) / 100
                            ).toFixed(2)}
                          </Text>
                        )}
                      </View>
                    ) : (
                      <View>
                        <Icon
                          name="radio-button-unchecked"
                          style={styles.uncheckIcon}
                        />
                        {item.value == 1 ? (
                          <Text style={styles.paymentItemText}>
                            {item.taksit} {cart.total} {cart.total}
                          </Text>
                        ) : (
                          <Text style={styles.paymentItemText}>
                            {item.taksit}{' '}
                            {(
                              (cart.total + (cart.total * item.value) / 100) /
                              item.value
                            ).toFixed(2)}{' '}
                            {(
                              cart.total +
                              (cart.total * item.value) / 100
                            ).toFixed(2)}
                          </Text>
                        )}
                      </View>
                    )}
                  </View>
                </TouchableOpacity>
              );
            })}
          </View>`
How to create a PiBox Template
Published: 2022-06-20 21:19:12

---
title: How to create a PiBox Template
published: true
description: We look into how to create a PiBox Template and install it on my PiBox. The procedure is very similar to creating a Kubernetes deployment, so that subject is also covered in this video.
tags:
cover_image: https://i.ytimg.com/vi/lTR6Fm37pn4/maxresdefault.jpg
---

{% youtube lTR6Fm37pn4 %}

We look into how to create a PiBox Template and install it on my PiBox. The procedure is very similar to creating a Kubernetes deployment, so that subject is also covered in this video.
How to AlpineJS - Introduction
Tags: webdev, html, design, javascript
Published: 2022-06-20 21:16:41

If you haven't tried [Alpine.js](https://alpinejs.dev/) yet you are missing out on the fun side of Javascript.

Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going.


This post was inspired by [Svelta](https://github.com/parables/svelta), a copy-paste component library I made for Svelte(worth checking it out if you are using Svelte/SvleteKit). 

I am in the process of rewriting those components and so instead of depending on Svelte for certain functionality, I decided to try Alpine.js. This way, you can still use the components in any framework.

In this series, I will share some tips on how to build simple components using this tiny but powerful framework and hopefully you may find some of it handy.

Wait there is more...
How to use async function in useEffect?
Tags: react, jsx, webdev, javascript
Published: 2022-06-20 21:06:54

In React we all must have used useEffect hook which runs after performing DOM updates and helps us to perform some operation after render.

Before exploring different ways to make async calls inside useEffect let's discuss the problem behind it.

### Why we should not use `async` keyword with useEffect?
Let's take an example to understand this.

```jsx
const [state, setState] = useState(0)

useEffect(async () => {
    await setState((state) => state + 1);
}, []);
```
The above piece of code will give error because the **async function returns promise and the useEffect doesn't expect callback function to return promise. It should return nothing or a function.**

### How we can call an asynchronous function inside useEffect? 🤔 

In order to make the async call inside useEffect hook we can use the following approaches.

- Defining async function inside useEffect.

```js
 useEffect(() => {
   const fetchData = async()=> {
     const data = await getData()

     return data
   }
   fetchData()
 }, []);
```

- Defining async function outside useEffect.

```js
  const [state, setState] = useState(0)

  const fetchData = useCallback(async()=> {
    const data = await getData();
    setState(data)
  }, [])
  
  useEffect(() => {
    fetchData()
  }, [fetchData]);
```
In this case we need to wrap our async function in useCallback to map it with dependency array.

**Note - If we do not wrap the function using `useCallback` hook it will re-render on every update which will result in triggering the useEffect hook again.**


I have used these two approaches to use async function with useEffect. Feel free to add any important point or another approach with respect to this topic. 🙌🏻


Happy Learning! 👩🏻‍💻
Mithril JS + Quasar CSS? Here is the proof.
Tags: mithril, component, css, quasar
Published: 2022-06-20 20:52:25

_This is my 3rd write up on dev.to site. This article shows proof-of-concept joining Mithril JS and Quasar CSS._

## Quasar CSS
[Quasar](https://quasar.dev/start/umd) is an excellent framework for web and mobile apps. It consists of two parts: JS (depends on [VueJS](https://vuejs.org/)) and CSS.
CSS part of Quasar defines large number of classes (css rules) and practically covers everything we need to write nice and user-friendly apps.

## Mithril JS
[Mithril](https://mithril.js.org/) is another JS framework for building web and mobile apps.
As mentioned on it's site:

> Mithril.js is a modern client-side JavaScript framework for building Single Page Applications. It's small (< 10kb gzip), fast and provides routing and XHR utilities out of the box.

## Mithril's components, definition
As with other frameworks we can define [components](https://mithril.js.org/components.html). Combining Mithril JS code (component) with Quasar CSS we are able to use them together.

For example:

- qslider

```
// mithril component qslider
var qslider = {
  view: function (vnode) {
    return m("input[type=range]", {oninput: vnode.attrs.oninput, min: vnode.attrs.min, max: vnode.attrs.max, step: vnode.attrs.step, value: vnode.attrs.value})
  }
};
```

- qbtn
```
// mithril component qbtn
var qbtn = {
    view: function(vnode) {
        return m("button", {class: "q-btn q-btn-item non-selectable no-outline q-btn--standard q-btn--rectangle q-btn--actionable q-focusable q-hoverable q-btn--no-uppercase btn-roll q-btn__content text-center items-center q-anchor--skip justify-center row q-focus-helper " + vnode.attrs.class, onclick: vnode.attrs.onclick, disabled: vnode.attrs.disabled}, vnode.attrs.title)
    }
};
```
As you can see we define components with Quasar's CSS classes and we can even pass attributes. 

A few notes:
Pay attention to class attribute...
```
{class: "class1 class2 class3 " + vnode.attrs.class}
```
... values end with space; this way we can append another classes via vnode.attrs.class

Function called on click event is passed as another attribute
```
onclick: vnode.attrs.onclick
```

Using those attributes we can modify and define behaviour of components.

## Mithril's components, use
An app written with Mithril JS is a view function which returns virtual DOM. Uses special Mithril's m() function.
We can use our new components as they were normal HTML tags.

```
m(qslider, {oninput: function(e){count2 = e.target.value}, min: -20, max: 20, step: step, value: count2})
```
```
m(qbtn, {onclick: function(){count1 = 0}, disabled: count1 == 0, class: "full-width bg-primary text-white", title: "reset value 1"})
```

## Real example
As I said before, this is proof-of-concept only. I have written an small demonstration of this two components, [here is a very small code at my replit](https://replit.com/@Pablo74/Mithril#index.html).

## Improvements?
There is a fully functional solution (link above) but... maybe I'm complicated and awkward so your comments are welcome!
Become a Python Web Developer in 2022
Tags: softwaredevelopment
Published: 2022-06-20 20:28:48

## Based on the learning path bellow we train interns and staff to become Python Web Developers. The path is getting constantly updated due to new feedback and new upcoming technologies.




To kick off your learning experience a fundamental knowledge of Python will be required. Beginning with the basic program, the learning path focuses on improving knowledge in code and data in the first couple of months. Later during the advanced program Django will be introduced as a main web framework.

**Basics (Existing knowledge):**  
- Python Beginner

**Basic Program Code (1-2 months):**  
- Git  
- Pycharm  
- Standardized Projekt Structure  
- Project Planing and Documentation  
- Python Associate  
- API Beginner

**Basic Program Data (1-2 months):**  
- SQL  
- NoSQL  
- API Associate  
- ETL

**Advanced Program Web Development 1 (2-4 months):**  
- Django Beginner, e.g.  
 - MVT  
 - Django Forms  
 - Django Models  
- Docker Beginner  
- Bash CLI  
- Unit Testing  
- Frontend: HTML/CSS/JS

**Advanced Program Web Development 2 (6-12 months):**  
- Django Associate, e.g.  
 - Django Admin  
 - Django Annotations  
- Azure Cloud Beginner  
- DevOps (Staff only)

**Advanced Program Web Development 3 (12-24 months):**  
- Azure Cloud Associate  
- Dagster  
- Data Warehouse, with dbt  
- Frontend Frameworks  
- Kubernetes

 

*Find the original article here: [https://blogbeat.app/blog/maxonce/article/learning-path-python-web-developer-2022](https://blogbeat.app/blog/maxonce/article/learning-path-python-web-developer-2022)*
blindnet is now on dev.to!
Tags: privacy, blog, encryption, trust
Published: 2022-06-20 20:11:08

---
title: blindnet is now on dev.to!
published: true
description: A new blog about privacy and trust, by developers, for developers.
tags: privacy, blog, encryption, trust
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9t4pk59eh2b40xqd79h.jpg
# Use a ratio of 100:42 for best results.
---

Finally :tada: !

Our new engineering blog, made by developers, for developers, is coming to both [blindnet.dev](https://blindnet.dev/blog) and [dev.to](https://dev.to/blindnet)!

[Stay tuned](twitter.com/blindnet_io) for more content about trust and privacy. They'll follow very, very soon :wink:

In the meantime, go check [blindnet.dev](https://blindnet.dev) for more dev content, or [our companies' blog](https://medium.com/blindnet) to learn more about blindnet itself with generic content with no tech jargon.
API: FREE Exchange Rates
Tags: api, exchangerates, json
Published: 2022-06-20 19:56:50

## ⚡ Exchange Rates API

Free, easy-to-use REST API interface delivering worldwide exchange rate data in JSON format. Our API was created for developers who want to implement their ideas quickly and no-limits.

### Request URL

```TEXT
https://cdn.moneyconvert.net/api/latest.json
```

### Response

```JSON
{
    "base": "USD",
    "rates": {
        "AED": 3.67297,
        "AFN": 89.647021,
        "ALL": 104.709024,
        "AMD": 476.665393,
        "ANG": 1.789593,
        "AOA": 597.455,
        "ARS": 99.2347,
        "AUD": 1.338279,
        [supporting 183+ currencies ...]
    },
}
```

Source: https://moneyconvert.net/pages/api
Flutter WillPopScope 💫 🌌 ✨
Tags: flutter, dart, willpopscope, navigation
Published: 2022-06-20 19:51:40

Kullanıcı geri düğmesine bastığında herhangi bir işlevi çağırmanız ya da bir takım kontroller yapmanız gerekebilir. Bu gibi durumlarda `WillPopScope` widget'ını kullanırız.

Örneğin kullanıcı geri düğmesine bastığında kaydedilmemiş bir değişikliğin olması durumunda aşağıdaki gibi bir dialog göstermek isteyebilirsiniz.


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

`WillPopScope` widget'ı kullanıcı geri düğmesine tıkladığında çağrılan `onWillPop` isimli bir callback fonksiyonuna sahiptir.

Kullanıcı, geri düğmesine bastığında mevcut route'dan çıkmasını istiyorsanız bu fonksiyonun `true` döndürmesi, aksi durumda da `false` döndürmesi gerekir.



```
 return WillPopScope(
      onWillPop: () async {
        if (isPristine) {
          return true; //mevcut route kapatılır
        } else {
          return false; //mevcut ekranda kalmaya devam edilir.
        }
      },
      child: Scaffold(...),
);
```




 resource :) https://github.com/gulsenkeskin
How to deal with feeling stuck?
Tags: webdev, react, beginners, discuss
Published: 2022-06-20 19:39:07

Since I've started my developer journey 2 months agos I feared this day would come: I feel stuck.

I learned HTML, CSS and Javascript, then I started learning React because that's what's popular. Now I think I have a basic understanding of how React works, enough at least to make single page applications with simple functionality. But then it begs the question: What's next?

I truly don't know. I guess that's one of the big problems with being self taught.

I tried looking around for projects to build but they all seem too complicated for my level of knowledge and seem to require technologies I didn't think I would need to learn such as MongoDB, GraphQL. 

I'm sure some of you have had this issue. What to do in this situation?