teleren/devto huggingface dataset:
Simple Free Flexible Styled SVG Icons in React
Published: 2023-09-15 14:17:17

## Simple Pattern to Use SVG Icons in a React App

When building a React app, it's common to need a variety of icons. You might use them for buttons, navigation, or simply for decoration. One of the best resources for free, high-quality icons is [Tabler Icons](https://tabler-icons.io/).

In this blog post, I'll show you the simplest way to use svg icons in a React application, especially if you're already comfortable with creating React components.

## Creating an Icon Component

Firstly, navigate to the [Tabler Icons website](https://tabler-icons.io/) and find an icon that you like, and  copy the SVG code. 

_Note: If you are using your own .svg files, you can copy the html out of the file and place it directly in the component. Loading svg files in react can be overly complex, so I usually opt for this._ 

Create a new React component within the `icons` folder and paste the SVG code inside of a new component.

For example, let's create a search icon component:

```tsx
// SearchIcon.tsx
const SearchIcon = ({ className = "" }: { className?: string }) => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" className={`${className} icon icon-tabler icon-tabler-search`} width="24" height="24" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
      <path d="M21 21l-6 -6"></path>
    </svg>
  );
};
export default SearchIcon;
```

## Customizing the Icon

Notice the optional `className` prop. This allows us to pass any Tailwind CSS classes (or any other classes) to style our icon, making it versatile. We can adjust the text color, background color, dimensions, and margins.

### Basic Usage 

```tsx
import SearchIcon from './icons/SearchIcon';

const App = () => {
  return (
    <div>
      <SearchIcon />
    </div>
  );
};
```

### Styled with Tailwind CSS with text, margin, and color

```tsx
import SearchIcon from './icons/SearchIcon';

const App = () => {
  return (
    <div>
      Search<SearchIcon className="ms-2 text-blue-500" />
    </div>
  );
};
```
_Note: We can also use this pattern for other .svg images which may have additional styling requirements._

## Conclusion
This pattern is simple, flexible, and free. If you found this valuable, or have a better pattern for icons, let me know!
VPN vs. Zero Trust Network: Which is More Secure for Remote Access?
Tags: networking, devops, cloud, anurag
Published: 2023-09-15 14:14:23

Remote access is a crucial feature for many businesses and organizations that need to enable their employees, partners, or customers to access their network resources from anywhere. However, remote access also poses significant security challenges, as it exposes the network to potential attacks from unauthorized or malicious users.

One of the traditional ways to secure remote access is to use a virtual private network (VPN). A VPN creates a secure tunnel between the user's device and the network, encrypting the traffic and hiding the user's IP address. However, VPNs have some limitations and drawbacks, such as:

- VPNs can be difficult to configure and maintain, especially for large or complex networks.
- VPNs can introduce performance issues, such as latency, bandwidth consumption, and compatibility problems with some applications or devices.
- VPNs can create a false sense of security, as they assume that anyone who has access to the network is trustworthy. This can lead to a lack of visibility and control over the network activity and expose the network to insider threats or compromised credentials.

A more modern and innovative approach to secure remote access is to use a zero trust network (ZTN). A ZTN is based on the principle of "never trust, always verify", which means that every user, device, and request is verified before granting access to the network. A ZTN uses various technologies and methods, such as:

- Multi-factor authentication (MFA), which requires the user to provide more than one piece of evidence to prove their identity, such as a password, a code, or a biometric factor.
- Device posture assessment, which checks the device's health and compliance with the security policies before allowing access to the network.
- Micro-segmentation, which divides the network into smaller zones with different levels of access and protection, based on the user's role, location, and context.
- Continuous monitoring and auditing, which tracks and records the network activity and alerts or blocks any suspicious or anomalous behaviour.

A ZTN offers several advantages over a VPN, such as:

- A ZTN is easier to deploy and manage, as it does not require complex configurations or hardware installations.
- A ZTN provides better performance, as it does not add any overhead or interference to the network traffic.
- A ZTN enhances security, as it reduces the attack surface and prevents unauthorized or malicious access to the network.

Therefore, a ZTN is more secure than a VPN for remote access, as it provides a more granular, dynamic, and adaptive way to protect the network from internal and external threats. A ZTN also enables a better user experience, as it allows users to access the network resources they need without compromising speed or quality.
React Component library with Storybook + Anima
Tags: webdev, react, programming, tutorial
Published: 2023-09-15 13:54:15

Components are the building blocks of your website. They should be efficiently reusable to improve development speed and consistency.

To streamline your web design process and create visually appealing user interfaces, it’s essential to have a robust component library in place.

## Storybook and Anima

[Storybook](https://storybook.js.org/): Storybook is a tool for developing and documenting UI components. It provides an interactive environment where you can build, view, and test individual components in isolation. Storybook is widely used in the industry to create and maintain component libraries.

[Anima](https://www.animaapp.com/): It is a design-to-code platform that allows designers to convert their design files directly into responsive code. It helps bridge the gap between design and development, making it easier to create web interfaces that match the original design.

- Table Of Contents 
- Storybook and Anima
- Component library in React App
  -  Install and set up the storybook
  -  Setting up Anima
  -  Add component in the storybook
  -  Directory structure
  -  Example of Button component from anima
  -  Customise component
  -  Run storybook
  -  How to use these components?
- Conclusion

In this blog post, we’ll walk you through the process of building a component library with Anima and Storybook. In just a few steps, without code, you will have a ready-to-use component library for your website.

It helps bridge the gap between design and development, making it easier to create web interfaces that match the original design.

Your journey to web development excellence starts here, so let's build something amazing together. 

Visit [Canopas Blog](https://blog.canopas.com/react-component-library-with-storybook-anima-35ee689577fa) now to read the full article.

Follow [Canopas](https://blog.canopas.com/) for our latest technical blog posts!
Web3 backend and smart contract development for Python developers: Musical NFTs part 2
Tags: ethereum, python, django, blockchain
Published: 2023-09-15 13:52:04

We will build few versions of this project: 

1) Pure Django + postgres sql db; 

2) Django REST, React for frontend + sql database; 

3) Django REST, React front-end and Google cloud service's (firestore noSql db, google storage and authentication). 

What means in third version we will avoid whole ORM layer of Django and substitute with Google services.     


There will be two options here:

### Simple Git clone
In this option you can simple git clone project, run Django server locally and  play with functionalities and code. 

    # make dir and clone project github repo
    $md musical_nft_thumbnails && cd musical_nft_thumbnails 
    
    $git clone https://github.com/ilijapet/musical_nft_thumbnails.git .

    # you need to have env or similar enviroment manager
    $python -m venv env && source env/bin/activate
    
    # you need to have pip installed
    $pip install -r requirements.txt
    
    # run django server
    $python manage.py runserver

Now you can go to `http://127.0.0.1:8000/` and play with app. Or change source code as you find most suitable. 

### Step by step guide

Second option is focused more on process for devs interested in how to put all this things together.

    $md musical_nft_thumbnails && cd musical_nft_thumbnails
    $git init
    # Create .gitignore with our future env folder
    $echo "env/" > .gitignore
    $git add -A
    $ git commit -m "First commit"
    $git branch -M main

Go go Github repo and create new repo:

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

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


<br/>
<br/>

Now from command line =>

    # add name of your branch
    $git remote add origin https://github.com/ilijapet/musical_nft_thumbnails.git
    $git push -u origin main

At this point we have local git repo, initial commit and code in your github repo. 


Lets create virtual environment and activate them: 

    $python -m venv env && source env/bin/activate

Now we have local git, dedicated and with local git connected Github repo as well as local virtual environment created and activated. 

Lets install Django and create our requirements.txt  

    # install django
    $pip install django

    # create requirements.txt
    $pip freeze > requirements.txt


Basically from this point on we are ready to start coding. But before that here is overall architecture. In short: client send some request to our backend server, routed through urls our app views will handle the call. Read and write from sql database. Communicate with our smart contract when needed. Mix together all this processed data and return page to client. Fairly standard flow except web3 element with Polygon testnet Mumbai.   


Code can be found in github [repo](https://github.com/ilijapet/musical_nft_thumbnails)
Balancing Artistry and Efficiency: My Journey from Design to Web Development
Tags: webdev
Published: 2023-09-15 13:49:59

So… it has been 2 years since I transitioned from design to web development and I have gone from frontend to full stack (without a full-time job) and deep down, I still think and behave like a designer. It’s great but I have seen how it limits me from achieving more. You see, I have been freelancing and I’ve had a habit of taking so much time with products because I have to design the UI first and then the backend and the frontend. That has been my reason but I have come to realize that it’s been that way because the designer in me causes me to obsess over the tiniest detail which shouldn’t be that much of a thing.

You see, I was designing a flyer for my sister when she walked in and saw me manually creating patterns with the pen tool and she said “You are a perfectionist” No, I don’t think I am, I just think the tiniest detail even when not noticed has a way of bringing life to art (Art, not a web application). After she left, I kept thinking about this and thought to apply it to my next project. Lo and behold, I was working on my alma mater’s alumni directory, I designed the UI and built the whole thing while figuring out Firebase and GraphQL in less than 3 weeks all just because I decided to GO! Build, learn, launch and iterate.

“Build, learn, launch, and iterate.”
I have been noticing this as a pattern of behavior for technical founders (that’s the goal). The point is to launch as fast as possible and iterate post-launch, not the other way around and it hasn’t been that way for me. I have always been the guy who obsesses about features, beauty, and perfection. Mind you, this is not necessarily a bad thing, I think it is great to execute good UI, but I also now think that shouldn’t be the initial focus when you’re trying to get things done with speed. Perfectionism can be a double-edged sword. While it's important to pay attention to details and create a polished product, it can also lead to delays and over-engineering. Finding a balance between delivering quality and speed is crucial in the fast-paced world of web development.

You see, I run a small outlet called GreatR Works and what we try to do is help founders build their MVPs as fast as possible and I have been failing at this because, well, I am a perfectionist. You see, Understanding the specific needs of clients is essential. While some projects may require a high level of design and attention to detail, others may prioritize speed and functionality. Being able to adapt to these different requirements is a valuable skill.

From here on out, we build and learn as we go.
How to use WebSocket in FastAPI and Python
Tags: python, fastapi, api, programming
Published: 2023-09-14 20:22:14

## Hi 🙂🖐

Welcome to a new post, Today I will share with you how to use WebSocket in FastAPI and Python in an easy way.


## Step 1

Import modules 

```python
from fastapi import FastAPI
from fastapi import WebSocket
from fastapi.responses import HTMLResponse
```

## Step 2

Create a route for the Send Messages web page.

```python
app = FastAPI()

@app.get('/test', response_class = HTMLResponse)
def test():
    return HTMLResponse(""" 
        <!DOCTYPE html>
        <html>
            <head>
                <title>Test</title>
            </head>
            <body>
                <input type="text" placeholder="write any text" id="msg">
                <button id="btn">send</button>
                <script>
                    
                    let ws = new WebSocket('ws://localhost:8000/ws')

                    ws.onmessage = function (event) {
                        console.log(event.data)
                    }

                    document.getElementById('btn').onclick = function () {
                        let msg = document.getElementById('msg').value
                        ws.send(msg)
                        msg = ''
                    }
                </script>
            </body>
        </html>
        """)
```

## Step 3

Create web socket route

```python
@app.websocket('/ws')
async def websocket_endpoint(websocket : WebSocket):
    await websocket.accept()
    while True:
        text = await websocket.receive_text()
        await websocket.send_text(f"Message text was: {text}")
```

## result

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


## full code
```python

from fastapi import FastAPI
from fastapi import WebSocket
from fastapi.responses import HTMLResponse

app = FastAPI()

@app.get('/test', response_class = HTMLResponse)
def test():
    return HTMLResponse(""" 
        <!DOCTYPE html>
        <html>
            <head>
                <title>Test</title>
            </head>
            <body>
                <input type="text" placeholder="write any text" id="msg">
                <button id="btn">send</button>
                <script>
                    
                    let ws = new WebSocket('ws://localhost:8000/ws')

                    ws.onmessage = function (event) {
                        console.log(event.data)
                    }

                    document.getElementById('btn').onclick = function () {
                        let msg = document.getElementById('msg').value
                        ws.send(msg)
                        msg = ''
                    }
                </script>
            </body>
        </html>
        """)

@app.websocket('/ws')
async def websocket_endpoint(websocket : WebSocket):
    await websocket.accept()
    while True:
        text = await websocket.receive_text()
        await websocket.send_text(f"Message text was: {text}")
```



**Now we're done 🤗**

**Don't forget to like and follow 🙂**

**Support me on PayPal 🤗**
https://www.paypal.com/paypalme/amr396
Laravel 10 Facebook Login Tutorial
Tags: laravel, facebook, login
Published: 2023-09-15 13:46:04

Login with facebook in laravel 10; Now you will get complete guide on how to add facebook login in laravel 10 apps.

## Laravel 10 Login with Facebook Account Tutorial

To log in with Facebook in Laravel 10, you can follow these steps:

- Install Laravel 10.
- Install JetStream.
- Install Socialite.
- Create a Facebook app.
- Add database details.
- Add the Facebook ID to the Users table.
- Add the Facebook app ID and secret.
- Generate and configure a controller.
- Set up a route.
- Add Facebook Login Button in View
- Start Development Server

Read More [Laravel 10 Login with Facebook Account Tutorial](https://www.tutsmake.com/laravel-10-facebook-login-tutorial-step-by-step)
Talking with a client about Tailwind.
Published: 2023-09-15 13:38:20

I've been working on a 6wk contract gig to shore up some code, and the previous developer decided to go with Tailwind.  I've mentioned why I think that's a bad idea before, but I had to explain to my new clients some of the problems that have happened because of that initial poor choice:

---

ME: So - I realise that it was another {my contractor} developer who chose to add Tailwind to this project. I don't know his or her reasoning. I can tell you, however, that one of the big problems with using Tailwind to create UI components is that it is extremely difficult (near impossible) to overwrite those properties assigned by tailwind utility classes when trying to extend a component to have the same functionality but different styles.

I think for now it's best to just create a seperate "TransparentButton" and "RippleButton" components which are independent of the Button component defined in {our UI library}. 

Response: 
> I believe the overall goal with adding tailwind was to reduce the number of components and or css classes/styling we have to maintain. Ideally we maintain "nothing" outside of our core value prop and can just plug & play industry standard components & libraries.

I think that is a noble goal.  Unfortunately, in practice, I find Tailwind to actually be _counterproductive_ to that goal, because since you can't just make minor tweaks to existing libraries, or existing components, you end up having to recreate entire components from scratch.

This is mostly because CSS does something Tailwind doesn't - it cascades.

That is, if the library has a button called "Button" with the className of "bg-orange", it will have an orange background.  I can't then modify Button with react props or adding more Tailwind classes to create a button that is identical except it has different styling, (such as a transparent background).

On the other hand, if the library's Button component were created with a CSS file associated with the class `.button`, where button was defined as 

```css
.button { 
  background-color: orange; 
}
```

I could simply use that component, add another class name (`.transparent-button`, for example) and then define the .transparent-button with 

```css
.transparent-button { 
  background-color: transparent;
}
```

The computer will read `<button class="button transparent-button">Button</button>` as "First apply the `.button` styles.  Then apply the `.transparent-button` styles, overwriting any styles that are different."

Tailwind doesn't have that functionality, in part because a design choice of tailwind is that it sorts class definitions according to it's own criteria (which I presume is alphabetical) in the tailwind postprocessor, not based on the order in which you write them.  

So, If you were to define `<button class="bg-orange bg-transparent"/>` then Tailwind would apply the orange. Because (I presume) "bg-o" comes before "bg-t"  alphabetically.
I hold back on job applications, compensating with tech dev blogging and ongoing side projects – this ain't effective innit?
Tags: discuss, career
Published: 2023-09-15 13:25:32

> I am a Python programmer. I consider myself a jack of all trades, but I tend to work on data-related or AI projects over software engineering. The thing is, I feel like I cannot see my own strengths. I don't feel like I meet the job market's skills when I apply for a job. I cope with it by writing a lot of tech dev posts, if they are ever considered as proper portfolios. Before writing, I need to practice the technical aspect of it, which both takes a long time. My main problem now is that I back off from applying to jobs since I still cannot convince myself that I am enough for the job market. I make up for that by writing tech blogs and finishing perpetual side projects as portfolios, which also take a long time. I don't even have the courage to find a client as a freelancer, although I successfully finished one freelance job last month. I know my approach is not effective and is more like escaping at this point. **If you were in my shoes, what would you do to solve this mess?**
Making a clone of your WSL environment (and using it in parallel)
Tags: wsl, windows, tutorial
Published: 2023-09-15 13:25:00

## 1. List installed distributions

`wsl --list`

## 2. Export Linux Distro to clone
Pick the distribution you want to clone and add use the name in the following command. It will take a snapshot of the distribution to a selected location.

Pro Tipp: You can also use this command to back up your WSL state so you can restore later, or use it on an other Windows instance.

`wsl --export <DistributionName> <FileName>`

> Example:
> `wsl --export Ubuntu ubuntu.tar.gz`

## 3. Import snapshot as WSL image
In this step, you will install the archive file as a WSL distribution package on the computer, as it would be an app. The InstallationLocation is not optional, you can select any folder freely. The the default location when downloading a distribution image from the app store is _C:\Users\<WindowsUserName>\AppData\Local\Packages\_, so I tend to select that folder for this purpose as well.
The DistributionName should be different from the original distribution name. In my case I suffixed it with a 2, you might want to choose something more descriptive.
FileName is the exporter archive from the previous step.
`wsl --import <InstallationLocation> <DistributionName> <FileName>`

> Example:
> `wsl --import C:\Users\dangernoodle\AppData\Local\Packages\Ubuntu-LTS ubuntu-2 rootfs.tar.gz`

## 4. Install and Start distribution
`wsl -d <DistributionName>`

> Example:
> `wsl -d ubuntu-2`

## 5. Done!