teleren/devto huggingface dataset:
Getting Hooked on Stoxy
Tags: javascript, react, preact, webdev
Published: 2021-04-22 17:48:36

Stoxy is a modern state management library built around creating reactive, stateful and persistent web experiences.

Stoxy allows you to easily control the global state of your application, and tap into said state when needed.

The newest addition to Stoxy is a new add-on library: **Stoxy Hooks**. 

Stoxy Hooks are a easy way to integrate Stoxy to any **React** or **Preact** application.

### Examples

Here I'll show a few simple examples of Stoxy Hooks in action

#### A Simple Clicker

```jsx
import { useStoxy } from "@stoxy/hooks";
import React from "react";

export function Clicker() {
    const { state, update } = useStoxy(React, {
        key: "demo.counter",
        state: 0
    });

    function inc() {
        update(c => c += 1);
    }

    return (
        <div>
          <p>Pushed {state} times</p>
          <button onClick={inc} type="button">Click</button>
        </div>
    );
}
```

#### A Todo List


```jsx
import { useStoxy } from "@stoxy/hooks";
import * as preact from "preact/hooks";
export function TodoList() {
    const { state } = useStoxy(preact, {
        key: "todo-list",
        state: {
            items: []
        },
        init: true,
        persist: true
    });

    return (
        <ul>
            {state.items.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
    );
}
```

```jsx
import { useStoxy } from '@stoxy/hooks';
import React from 'react';

export function AddToList() {
    const { add } = useStoxy(React, { key: 'todo-list' });

    function addItem(e) {
        e.preventDefault();
        const formData = new FormData(e.target);
        const taskName = formData.get('task');

        add({ created: Date.now(), name: taskName });

        const inputField = document.querySelector("input[name='task']")
        inputField.value = "";
    }

    return (
        <form onSubmit={addItem}>
            <input type="text" name="task" />
            <input type="submit" value="Add" />
        </form>
    );
}
```

### Get Started

You can easily get started using Stoxy hooks with just one quick install:

```bash
npm install @stoxy/hooks
```

And you're all set!

The whole Stoxy ecosystem is extremely lightweight, in package size and when writing code.

Read more about the subject on the [Stoxy Website](https://stoxy.dev/)


If you like how Stoxy makes managing state simple, [Join the almost 50 Stargazers on GitHub](https://github.com/stoxy-js/stoxy/stargazers)
Connect to a Private network via proxy server from macOS
Tags: proxy, macos, squid, docker
Published: 2021-04-22 17:44:53

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzpumfbtuex8tnojm0bf.png)
 
In this post, we will see how to connect from mac to another machine (as a forwarding proxy) then to the internet (or to a private network 😉). 

The steps will focus to macos client, but it can be any other OS.

First, You need to install squid proxy on your Windows/Linux box (the jump box). there are many ways to do so, in my case I used a docker image for squid proxy.

```
docker run -d -p 3128:3128 --restart unless-stopped cosmicq/docker-squid
```

Now, go to macOS, and you need to change the proxy settings in two places, the `System Preferences > Network` and in the shell.

#### System Preferences

For `System Preferences > Network`, Click Advanced, then go to the proxy tab and in the `http` and `https` sections, enter the ip/port of the proxy:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bd1sjq1jv7ke35cvohi6.png)

>Note, you can use commands to set the proxy instead of using GUI, as follows:

```
networksetup -setwebproxy wi-fi 192.168.100.39 3128
networksetup -setwebproxystate wi-fi on
networksetup -setsecurewebproxystate wi-fi on
```
This will make it easy to enable/disable the proxy setting on a user basis.

#### The shell

The last step is to set the `http_proxy` and `https_proxy` in your shell.

You can append the following at the end of your `~/.zshrc` file:

```
export http_proxy="192.168.100.39:3128"
export https_proxy=$http_proxy
```

Happy proxying!

### Update
The squid proxy works well for HTTP/HTTPS traffic. however, some traffic is TCP traffic. There are different solutions to this problem, but I fixed it by using a native port-forward solution in windows using the command `netsh`.

In my case, I needed to access a DB server accessible from windows machine by _192.168.100.100/1433_, so I run the following command in windows cmd (as administrator)

```
netsh interface portproxy add v4tov4 listenport=14330 connectport=1433 connectaddress=192.168.100.100
```
which will open port _14330_ on the windows machine and forward traffic to the DB server at _192.168.100.100_ on port _1433_.

Now I can connect to the DB server from mac on the windows IP address (in my case *192.168.100.39*) on port *14330*.

To delete the port-forwarding:
```
netsh interface portproxy delete v4tov4 listenport=14330
```

To list port-forwarding:
```
netsh interface portproxy show v4tov4
```

References:
https://github.com/CosmicQ/docker-squid
https://docs.microsoft.com/en-us/previous-versions/windows/it-pro/windows-server-2008-R2-and-2008/cc731068(v=ws.10)?redirectedfrom=MSDN
CSS Battle #2 level #16
Tags: css, html, webdev, tutorial
Published: 2021-04-22 17:38:00

Link: https://cssbattle.dev/play/16

```
<p b><p a>
<style>
  *{
    background: #0B2429;
    margin: 0;
    position: fixed;
  }
  p[a] {
    background: #0B2429;
    width: 50;
    height: 50;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 45px #F3AC3C, 0px 0px 0px 65px #0B2429, 0px 0px 0px 75px #998235;
    top: 125;
    left: 175;
  }
  p[b]{
    width: 0;
    height: 0;
    border: 65px solid transparent;
    border-right-color: #998235;
    top: 85;
    left: -7;
    -webkit-box-reflect: right 154px;
  }
</style>
```
How to share environment variables in Linux across Bash, Python, .NET and more.
Tags: linux, productivity, opensource, python
Published: 2021-04-22 17:37:43

---
title: How to share environment variables in Linux across Bash, Python, .NET and more. 
published: true
description: Learn how to share environment variables in Linux across shell scripts, Python and .NET apps
tags: linux, productivity, opensource, python
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jj4ra4r5gl5vijvlbots.png
---

Hello everyone, 

The `export` command in Linux is used to set Environment variables, but you may not be aware that you can use the variables in other programming languages to prevent secrets from leaking in GitHub commits, etc.

Take the following example:

You've set an environment variable such as:

```shell
export EMAIL=youremail@domain.com
```
On your terminal prompt, you can check to ensure this variable works by running:

```shell
echo $EMAIL
```

You can also take that same environment variable and make it accessible in Python with: 

```python
import os
print(os.environ['HOME'])
```

on the flip side, you can do the same thing with .NET

```csharp
var value = Environment.GetEnvironmentVariable("EMAIL");
Console.WriteLine(value);
```

Pretty neat, huh?

You can also checkout the video that I made showing this off in action before trying it on your own:

Video (5 mins)

{% youtube uvFMzqRIuSA%}

Conclusion

Feel free to checkout my [Twitch streams](https://twitch.tv/mbcrump) as we learn about security and app development or you can watch the condensed version of all of my streams by subscribing to my [YouTube](https://youtube.com/mbcrump). 

Stay connected with me on social platforms for daily software development news.

-[Twitter](https://twitter.com/intent/follow?screen_name=mbcrump) | [Twitch](https://twitch.tv/mbcrump) | [Instagram](https://instagram.com/mbcrump) | [YouTube](https://youtube.com/mbcrump) | [GitHub](https://github.com/mbcrump) | [Website](https://www.michaelcrump.net)
State machines for the rescue
Tags: javascript, react, vue
Published: 2021-04-22 17:35:32

Most of the features we are creating in our applications can be described in finite state machines. When we think about web applications we are thinking about the state in which our application is. Then we have ways we can go and modify the state of the application.

The login page is a great example. When you enter valid credentials, you were transitioned from the “_not logged in”_ state into the “_logged in_”. Let’s see how knowledge about that can help us create more predictable and less error-prone applications.

***

## What exactly are finite state machines?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxs4cqmhdttk7c0ucztv.png)

Definition of this you can read on [Wikipedia page](https://en.wikipedia.org/wiki/Finite-state_machine). There you can find more information about how they are defined and what they really are. But to make a long story short. Your application has a current state. You can transition to other states that are available in the current state. When transition you preserve metadata why this transition happens, eg. request is _rejected_ or _resolved_.

Let’s see it in action:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlc2vm7fxph0dtwgbo0e.gif)

## What is XState?

[XState](https://github.com/davidkpiano/xstate) is a library to create the finite state machine for JavaScript. It can help you describe states and available transitions in your application. It can be used in plain JavaScript but also has first-class support for the most popular frontend frameworks.

## Why XState?

It can help you describe the behavior of your application. You can restrict access to the events in a certain state. It’s easy to use and straightforward.

When we want to create a toggle, for example when we are showing the user a _popover._

```js
import { createMachine } from 'xstate';

createMachine({
  id: 'popover-toggle',
  initial: 'inactive',
  states: {
    inactive: { on: { TOGGLE: 'active' } },
    active: { on: { TOGGLE: 'inactive' } }
  }
})
```

We need to define at least 3 fields:

* `id` — identifier of the state machine among others, should be unique
* `initial` — initial state which will be your state machine, should be one of the defined states
* `states` — available states in which your machine can be your machine

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03vx3rq304cos8h28qh4.gif)

We must be creating one small piece of application state instead of the whole application component. This state machine works only for popover, not for modals, or others components on your site. Keep it on the same level as a component that is for.

## Summary

XState can help you with managing requests, keep states of modal, popovers, or other components in your application. Smooth transition to available state and visualizer helps you build better, more predictable, and less error-prone applications. Check more in [XState docs](https://xstate.js.org/docs/) on how to use finite state machines.
Website Designing Process: A Guide To Design A Perfect Website
Tags: website, webdesign
Published: 2021-04-22 17:23:30

Website designing has always been a star in the marketing business. Whether it is a local store or a famous brand, every business right now needs a website to get started and function. When a website project comes, every website designer has a specific strategy ready. For instance, a banner, content, contact details, and social media icons. But remember that a great website should add great value to the client’s business.

A website that successfully attracts customers and helps them understand the brand, products, and services with the help of navigation, content, and visuals, is termed as a perfect website. To create a great website, you do not need to focus on the aesthetic but need to work on a well-planned strategy. To make it a piece of cake for you, we already have a 7-step website designing strategy ready.

Identify the goal:
Being the first step of the designing process, you must give it utmost attention and importance. For this, you must get in touch with the clients, and understand their requirements. Ask them questions to understand what they are expecting as the final product. To get a clearer picture, understand the purpose of the site, and how they want to be.

Identify the scope:
Once you have the goals list in hand, you are ready to identify the scope of the project. For instance, how many web pages do you need to satisfy the goals, what features will be necessary and how long will it take to complete the site.

Create a sitemap:
Creating a sitemap of your website will help you plan your design process better and make it easy to add different features on the site. It will help you navigate more efficiently, and also; you will get an overall idea of what content needs to be curated.

Create content:
Now that you have a bigger picture in mind with the help of sitemap and other requirements, you can head towards creating content. Whenever you start with the content, do not forget to consider SEO. Keep your SEO strategy ready and aligned with the content. Also, keep your content real, and plagiarism-free to avoid any future problems.

Align your visual elements:
With everything in place, you can now proceed with the visual elements. Though the visuals might depend on the client's requirements, you can still add your touch. You can make use of different tools available online to create images, GIFs, videos, and much more.

Test your product:
Before delivering the product, you must test it yourself first. Put your product to test and view it from the customer’s point of view. Check if it’s working perfectly on all the devices. It will help you identify the user experience issues and broken links in advance.

Launch:
Once everything is in place and perfectly alright, it is time to launch the site. Before launching, ask your client about the execution time and the communication strategy.

This 7-step website designing process will help you design the website that will drive your sales and attract customers.
What would you like to understand about the history of the cloud? Answer for the chance to be featured on our podcast!
Tags: podcast, cloud, history, discuss
Published: 2021-04-22 17:22:56

---
title: What would you like to understand about the history of the cloud? Answer for the chance to be featured on our podcast!
published: true
description: podcast, cloud, history, discuss
tags: podcast, cloud, history, discuss
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpymyrdz3fa9f5i66o33.png
---

The [DevDiscuss Podcast](dev.to/devdiscuss) begins with an interview and ends with commentary from listeners — and we like to feature the actual voices from our community!

To inform an upcoming episode of the show, we'd like to know...

> ### **“What would you like to know about the history of the cloud?”**

For your chance to hear your actual comments on an upcoming episode, answer the question above by:

- Calling our Google Voice at +1 (929)500-1513 and leave a message 📞

- Sending a voice memo to pod@dev.to 🎙

- OR, leaving a comment here (we'll read your response aloud for you) 🗣

Please send in your recordings by Wednesday, April 28th at Midnight, ET (9 PM PT, 4 AM UTC)

#### Voice recordings will be given priority placement 😉
How to use Java 8 Encode (Decode) an Image to Base64
Tags: java8, base64, image, decode
Published: 2021-04-22 17:20:49

https://grokonez.com/java/java-advanced/java-8-encode-decode-an-image-base64

How to use Java 8 Encode (Decode) an Image to Base64

For some purpose like transfering an image through RestfulAPI or saving an image to a DataBase, We need Encoder (Decode) the image to  Base64. In the tutorial, <strong>JavaSampleApproach</strong> will guide you how to use Java 8 for converting.

Related post: <a href="https://grokonez.com/java/java-8-base64">Java 8 Base64</a>

<!--more-->

<iframe width="853" height="480" src="https://www.youtube.com/embed/bl532AUqzNk?rel=0" frameborder="0" allowfullscreen></iframe>

<h2>I. Technologies for Java 8 Encode Decode an Image to Base64 tutorial</h2>
- Eclipse
- Java 8

<strong>Note:</strong> Prepare an Image at folder <strong>C:\\base64\\image.jpg</strong>

<h2>II. Java 8 Encode an Image to Base64</h2>
<pre><code class="language-java">
public static String encoder(String imagePath) {
	String base64Image = "";
	File file = new File(imagePath);
	try (FileInputStream imageInFile = new FileInputStream(file)) {
		// Reading a Image file from file system
		byte imageData[] = new byte[(int) file.length()];
		imageInFile.read(imageData);
		base64Image = Base64.getEncoder().encodeToString(imageData);
	} catch (FileNotFoundException e) {
		System.out.println("Image not found" + e);
	} catch (IOException ioe) {
		System.out.println("Exception while reading the Image " + ioe);
	}
	return base64Image;
}
</code></pre>
<h2>III. Java 8 Decode an Base64 String to an Image</h2>

https://grokonez.com/java/java-advanced/java-8-encode-decode-an-image-base64

How to use Java 8 Encode (Decode) an Image to Base64
Java – Read/write Properties from/to .properties file
Tags: java, properties, file
Published: 2021-04-22 17:12:46

https://grokonez.com/java/java-read-write-properties-object-properties-file-properties-file

Java – Read/write Properties from/to .properties file

In the post, we show how to read/write Properties object from/to Properties File (.properties file).

<!--more-->
<h2>I. Java - Write Properties object to Properties File</h2>
<h3>1. Properties store() method</h3>
We use <code>java.util.Properties.store()</code> methods:

<pre><code class="language-java">
// 1.
public void store(OutputStream out,
	                  String comments)
	           	throws IOException

-> Writes this property list (key and element pairs) in this Properties table 
to the output stream in a format suitable for loading into a Properties table using the load(InputStream) method.

// 2.
public void store(Writer writer,
					String comments)
				throws IOException
		        
-> Writes this property list (key and element pairs) in this Properties table 
to the output character stream in a format suitable for using the load(Reader) method.
</code></pre>
<h3>2. Program - write Properties to File</h3>
<pre><code class="language-java">
package com.javasampleapproach.propertiesfile;

import java.io.FileOutputStream;
import java.io.FileWriter;
import java.io.IOException;
import java.io.OutputStream;
import java.io.Writer;
import java.util.Properties;

public class JavaWriteProperties2File {
	public static void main(String[] args) {
		Properties properties = new Properties();
		properties.put("db.username", "username");
		properties.put("db.password", "password");
		properties.put("db.driver", "org.postgresql.Driver");
		properties.put("db.url", "jdbc:postgresql://localhost/testdb");
		
		/*
		 * 	Approach 1: 
		 * 	use -> 'java.util.Properties.store(OutputStream out, String comments) throws IOException'
		 */
		String propertiesFile = System.getProperty("user.dir") + "\\file.properties";
		try(OutputStream propertiesFileWriter = new FileOutputStream(propertiesFile)){
			properties.store(propertiesFileWriter, "save to properties file");
		}catch(IOException ioe){
			ioe.printStackTrace();
		}
		
		/*
		 * 	Approach 2: 
		 * 	use -> 'java.util.Properties.store(Writer writer, String comments) throws IOException'
		 */
		propertiesFile = System.getProperty("user.dir") + "\\file_1.properties";
		try(Writer propertiesFileWriter = new FileWriter(propertiesFile)){
			properties.store(propertiesFileWriter, "save to properties file");
		}catch(IOException ioe){
			ioe.printStackTrace();
		}
	}
}</code></pre>

-> <code>.properties</code> output file:

More at:

https://grokonez.com/java/java-read-write-properties-object-properties-file-properties-file

Java – Read/write Properties from/to .properties file
On giving and receiving Feedback
Tags: softskills
Published: 2021-04-22 17:07:54

Without a doubt, one of the most difficult soft skills to develop. And though I don't claim to be an expert on the topic, here are some simple rules that worked well for me.

## Giving feedback

1. **Don’t delay giving feedback**
2. **Avoid anonymous feedback** — It feels fake and dishonest.
3. **Always give it in private**
4. **Actively prepare for one-on-one meetings**
5. **Write down questions you want to ask**
6. **Give concrete examples**
7. **Deliver the bad news**
8. **Avoid shit sandwich** — It does not work. It feels dishonest.
9. **Explain why you deliver given feedback** — _“I believe you can be great…, because …”_ is better than just dry feedback. But you also have to mean it, don't be fake.

## When asking for a feedback

10. **Get well with receiving difficult feedback** — It's the view of the person delivering it.
11. **Ask specific questions** — Generic questions lead to generic answers.
12. **Ask for advice rather than feedback** — People tend to talk more when they are asked for advice. And it does not have a negative tone to it.

## Other “hacks”

13. **_“When you do X, it makes me feel like Y”_** — Feels more genuine.
14. **As a leader or manager always explain your decisions** — No matter if you incorporated received feedback or ignored it. People want to know why.

Let me know which ones you like and whether you have some that work well for you.
Why Developer Advocates Should Try New Things
Tags: devrel
Published: 2021-04-27 01:51:10

---
title: Why Developer Advocates Should Try New Things
published: true
date: 2021-04-22 17:05:37 UTC
tags: DevRel, developerrelations
canonical_url: https://maxkatz.org/2021/04/22/why-developer-advocates-should-try-new-things/
---

Developer Advocates at many organization can usually work on different things. One day they can build a demo application, help with support, improve the documentation, work on an SDK, work on a blog post or a tutorial, and host an event. I love this about Developer Advocacy – you usually have flexibility and freedom to work on and help with different things.

[![](https://katzmax.files.wordpress.com/2021/04/pexels-photo-6062504.jpeg?w=1024)](https://katzmax.files.wordpress.com/2021/04/pexels-photo-6062504.jpeg)<figcaption>Photo by Julia Volk on <a href="https://www.pexels.com/photo/air-balloon-flying-over-rocky-highlands-6062504/" rel="nofollow">Pexels.com</a></figcaption>

I always encourage my team to take this even further and try new things. For example, do you want to host an event with a new partner, just go for it. Do you want to host an event but change the time to late in the evening (or early in the morning) to get folks from other parts of the world to attend, go for it. Do you want to publish an article on a new web site, or write about a new interesting use case, why not? In other words, don’t be afraid to try and experiment to see what works (and what doesn’t). If what you tried didn’t work, that’s absolutely fine. Learn from it. The key is not be afraid to try new things.

What happens when what you tried didn’t work? Not much. Yes, you spent time working on it. As long as you can learn from it (what worked or what didn’t work), there is still value in it. If you are in a different profession such as a doctor or a NASA engineer – trying new things and failing is usually not an option. It can be very expnsive and potentially deadly.

That’s again why I love Developer Advocacy – we can try new things, fail, learn and move on.
Django custom html class in form easy way.
Tags: django, html, djangodeveloper
Published: 2021-04-22 16:55:54

---
title: Django custom html class in form easy way.
published: True
description: 
tags: django, html,djangoDeveloper
//cover_image: https://direct_url_to_image.jpg
---

I have spent so much time to do it, just got quick way installing 

```
pip install django-widget-tweaks 
```

after install it we have to put it in settings

``` 
INSTALLED_APPS =[
      'widget_tweaks',

]
 ```

and in html 

```
{% load widget_tweaks %}

{% for r in register %}
<div class="form-group mb-2">
    <label for="" class="form-label">{{r.label}}</label>
    {{r|add_class:"form-control"}}
</div>

{% endfor %}

```

that's enough.
for more details about it <a href="https://pypi.org/project/django-widget-tweaks/"> https://pypi.org/project/django-widget-tweaks/ </a>