teleren/devto huggingface dataset:
Use custom python scripts from any directory in windows
Tags: python, tutorial, beginners, productivity
Published: 2022-05-19 18:12:10

In this one I am going to be showing you how you can run your python scripts from the terminal in directory on windows.

But first we shall look at what a PATH variable means and what ENVIRONMENTAL variables mean

**Environmental Variable**
An _environment variable_ is a variable whose value is set outside the program, typically through functionality built into the operating system or microservice. An environment variable is made up of a name/value pair, and any number may be created and available for reference at a point in time.

**PATH Variable**
The _PATH variable_ is an environment variable that contains an ordered list of paths that Linux will search for executables when running a command. Using these paths means that we do not have to specify an absolute path when running a command.

Now that we know what these terms mean we can get into the actual work
First step is to write our custom script, in this case I am using a script I developed to kill annoying tasks because task manager sometimes does not respond
![Code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6jrqc19d2gq0lkajsqs.png)
```python
import os
import sys

if len(sys.argv) < 2:
	print("[!] Usage: kill.py 'program name'")
	sys.exit()

program = sys.argv[1]
print(f"[*] Killing {program}")
os.system(f'taskkill -f -im {program}.exe')
sys.exit()
```
Next step is to create a folder for our custom scripts and add the folder path to environmental variables
![create folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqjpjdekxqc8we9bmd21.png)
After copying folder path click windows button and
![next step](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4iy7q3psoeldfmn9dprb.png)
Next step click on environmental variables
![click on env varibles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbkle3jbq9lwtmal905g.png)
click on path and then edit at the bottom
![click on path and edit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78v985mf73flaamaxvd9.png)
click on new and then paste in the path to our custom folder
![paste path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/los95f3bj25oob1dzrvg.png)
And voila we are ready to go. So to test this we open a new terminal and type out the name of our script in this case `kill.py` you should see the error output
Anyways we go ahead and test this
![code results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bmv7p8r5wyyqhx3lp87.png)

Use this to automate your boring tasks, Happy Coding Everyone :)
GitIcons - add folder icons to your repos
Tags: mac, github, icons
Published: 2022-05-19 17:26:40

---
title: GitIcons - add folder icons to your repos
published: true
description: Mac App that adds folder icons to your repos
tags: mac, github, icons
cover_image: https://raw.githubusercontent.com/samdenty/git-icons/master/banner.gif
---

git-icons is built in Rust,  and uses the Rust Crate [`repo_icons`](https://github.com/samdenty/repo_icons) to fetch the icons for a given repository.

Once the icons are fetched, it writes them to the `Icon?` file inside all your repo directories.

It also has SQLite persistence with [Diesel.rs](http://diesel.rs/). This allows you to use a custom icon for a repository, or switch between the different icons returned by `repo_icons`

[Download the app for Mac now](https://github.com/samdenty/git-icons/releases) or [give it a star](https://github.com/samdenty/git-icons)


{% embed https://www.youtube.com/watch?v=jrO3qSEpAFU %}
How to parse HTML to React
Tags: javascript, react, tutorial, webdev
Published: 2022-05-19 17:24:07

Recently, I have been working on a project, one of the requirement was that I should implement a Rich Text Editor and render the text firstly in a preview card as truncated text as shown in the image below

![text truncated preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyi9jhlqqaqwlxvc1gni.png)

Secondly, The main view, is where users get to read the content in detail. This was not a problem in particular as React provides us with a built-in solution to render raw HTML. `dangerouslySetInnerHTML`.

## Problem
React built-in solution to my problem `dangerouslySetInnerHTML` works same way like vanilla JavaScript `innerHTML`. this is a risky solution because:

- This solution by default exposes you to Cross Site Scripting ([XSS](https://portswigger.net/web-security/cross-site-scripting)), to be safe you'd have to use it alongside another package `dom-purify` to sanitize your HTML input.

- The text rendered by this solution cannot be truncated because the way `dangerouslySetInnerHTML` works is by passing it as an attribute to a JSX element 

```jsx
<div dangerouslySetInnerHTML={{
__html: //htmlInput
}}> </div>
```
and one of my project requirement is to have a preview of the content.

## Solution
After doing so many research, I bumped into a package called `html-to-react` it's available on NPM, actively maintained and about 577k weekly downloads perfect! 

The best thing about this package is that it solves the two problems I listed above. 

I can now do 

```js
import HtmlToReactParser from "html-to-react";
import ReactTruncate from "react-truncated-component";
// other imports
function Wiki({body}) {
// other functions
return (
   <div className="wiki-card"> 
     <ReactTruncate numberOfLines={3} lineHeight={23}. 
       ellipsis="..." >
            <p className="w-hero__desc">. 
             {HtmlToReactParser.Parser().parse(
              body)}
            </p>
     </ReactTruncate>
   </div>
)
}
```
Using the package this way, you will be able to truncate you r text anyhow you want and also render your HTML content nice and clean.

Peace ✌🏽.
Seeking Help about Web Dev
Tags: webdev, html, discuss, help
Published: 2022-05-19 17:06:11

About 9 months ago, I learned HTML and CSS. Then I started learning Python and then Django for Backend Web Development. 
Now, I have quite forgotten the concepts and syntax of HTML & CSS. 
Now should I learn HTML, CSS & Javascript (i.e. frontend dev) or move to MongoDB?
Any help would be appreciated!
Star Wars 88B Droid | Pure CSS
Tags: codepen, css, tutorial, beginners
Published: 2022-05-19 16:57:09

Who hasn't seen a Star Wars movie? For me, the cute little BB-8 droid stole the show. Today we draw and animate BB-8 using HTML+CSS while using **keyframes** to animate the clouds as well!.

You can check more Star Wars themed stuff [here](https://codepen.io/collection/GoNBRq).

{% codepen https://codepen.io/rembertdesigns/pen/rNYRwOG %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
Discussion and Comment of the Week - v5
Tags: bestofdev
Published: 2022-05-19 16:39:31

**This weekly roundup highlights what we believe to be the most thoughtful and/or interesting discussion of the week. We're also be highlighting one particularly cool comment in each installment. 🙌**

The DEV Community is particularly special because of the kind and thoughtful discussions happening between community members. As such, we want to encourage folks to participate in discussions and reward those who are initiating or taking part in conversations across the community. After all, a community is made possible by the people interacting inside it.

## Discussion of the Week

We'd like to put the spotlight on @shahednasser's [#discuss](https://dev.to/t/discuss) post with the topic "[What Tool Do You Wish Was Open Source?](https://dev.to/medusajs/what-tool-do-you-wish-was-open-source-i67)": 

{% embed https://dev.to/medusajs/what-tool-do-you-wish-was-open-source-i67 %}

It's always fun reading through the comments section on posts like these to get a sense of different software tastes out there. Plenty of folks out there wishing [Notion](https://dev.to/stonith404/comment/1oe70) and the [Adobe](https://dev.to/murtuzaalisurti/comment/1oe6h) suite were OSS, and lots of folks chiming in with open source alternatives to each.

I'd like to second @moopet's suggestion:
{% embed https://dev.to/moopet/comment/1oe95 %}

Wouldn't that be nice! 😀 One can wish...

Also, for those that don't already know, the platform that DEV is built on, Forem, is open source! Check it out on [GitHub](https://github.com/forem/forem) and if you have ideas for how we might improve our tech, consider starting up [a discussion](https://github.com/forem/forem/discussions).

## Comment of the Week

For this week's pick, I gotta give it up for @inhuofficial who responded with some incredibly thoughtful advice to @nombrekeff's excellent prompt "[How to tell a Junior Dev that what they've done is wrong?](https://dev.to/nombrekeff/how-to-tell-a-junior-dev-that-what-theyve-done-is-wrong-4igo)"

{% embed https://dev.to/inhuofficial/comment/1ogm3 %}

The points they highlighted here are seriously helpful: asking folks how they like to receive criticism + giving them constructive reasons so that they know why they were wrong and can improve. But beyond the advice itself, the way it was stated felt so incredibly self-aware and empathetic. To quote a Forem team member (@erinposting) who pointed this comment out to me:

> The more managers that have candid conversations about this stuff, the better off all the juniors of the world will be.

So true!

## What are your picks?

There's loads of great discussions and comments floating about in this community. These are just a few we chose to highlight. 🙂

I urge you all to share your favorite comment and/or discussion of the past week below in the comments. And if you're up for it, give the author an @mention — it'll probably make 'em feel good. 💚
How to restrict country to access your website with Netlify?
Tags: webdev, netlify, security, webhosting
Published: 2022-05-19 16:39:29

Why to restrict website access to specific/multiple countries or only allow one country to access your website [read more](https://www.sitepoint.com/how-to-block-entire-countries-from-accessing-website/)

If you are using netlify to host your website then there is pretty good way to restrict access with certain conditions using redirect and rewrites [read more](https://docs.netlify.com/routing/redirects/)

add `_redirects` file without any extension in dir that will serve your website

```Text
# _redirects
# serve blocked.html with beautiful url
/blocked  /blocked.html  200

# Redirect users from US to blocked page
/*  /blocked  301  Country=us

```

netlify will use the first matching route to redirect so make sure you prioritize the routes.
In above code block
1. Rule to serve static `blocked.html` with `/blocked` route
2. Rule to redirect all US the visitors to `/blocked`

`blocked.html` with appropriate message.
Lambda@Edge
Tags: serverless, cloud, aws, computing
Published: 2022-05-19 16:35:07

● It is the feature of Amazon CloudFront which allows you to run your code
closer to the location of Users of your application.
● It improves performance and reduces latency.
● Just like lambda, you don’t have to manage and provision the infrastructure around the world.
● Lambda@Edge runs your code in response to the event created by the CDN.
Apps for Small Things that Matter
Tags: productivity
Published: 2022-05-19 16:33:20

---
title: Apps for Small Things that Matter
published: true
description: 
tags: #productivity
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0eoxoyrwk1r1uku29urg.jpeg
---

Some apps that help me stay sane and healthy on weeks when there is a lot going on and it is easy to get stuck on VSCode, Slack or Twitter for 14h straight:

* **Routinery**: Lets you configure a routine with steps, and it has a timer per step, so you don't get stuck on one thing or get distracted. This helps me remember to drink tea, meditate and sort out my schedule for the day before turning to any inbox. Routinery also reminds me to get off work at 6pm, move my body, eat and spend time with humans. I ignore it more often than I want to admit (very tempting to just keep going on an interesting problem or the pile of small tasks), but it feels good when I don't.

* **DayStamp:** it is the least judgmental "habits app" that I know. I added about 20 things I'd love to do on a regular basis. Some I do daily, some weekly, some rarely. I use it to check if things got out of balance (didn't work out in a week, didn't code or publish anything in a week, didn't read anything meaningful in a month...)

* **Wakeout:** 1-5 min workouts that can be done at the desk or couch. I have no excuse not to do them (1 minute is nothing!), and it helps me move a bit few times a day. It did wonder to my back/shoulder which used to get stiff after long days. Some of the workouts in the app are very silly, but I love the "office yoga" one. 

* **Sweepy:** Prioritizes cleaning tasks and tracks how bad my home got. I can see when the sink is full, but I don't actually see if the floor or bathroom mirror got dirty (I think this is a common problem). As a result, sometimes my house gets to the point where my friends visit and become seriously concerned ("how can you live like this? it is like a pigsty!"). This app helps me "see" that I didn't clean the floor in a while and it is certainly dirty.

* **Whatsapp, Facetime, SMS, email:** My family and close friends are the most important thing in my life, and definitely the most important contributor to my happiness. Grateful for the apps and protocols that help us stay in touch despite time and distance challenges.

Apps that I don't use:

* Pomodoro apps: I like the 25 minute or 50 minute work spans followed by a quick break. But I didn't find an app that I like, so I just use my alarm clock. 

* Meditation apps: You can't convince me to pay money for an app that tells me to close my eyes and breath. I use a timer for this one too.
Nvidia Docker安裝說明(含WSL2)
Tags: docker, wsl2
Published: 2022-05-19 15:33:52

- 訂閱patreon即可看到更多文章 https://www.patreon.com/wade3c
- Youtube頻道 https://www.youtube.com/c/增廣建文

---

Linux下如果還沒裝過docker的話可以參考

> [https://docs.docker.com/engine/install/ubuntu/](https://docs.docker.com/engine/install/ubuntu/)

```other
curl -fsSL https://get.docker.com -o get-docker.sh
```

```other
sudo sh get-docker.sh
```

## WSL2

![image.png](https://res.craft.do/user/full/71bea674-0503-893e-0a7a-91e236797ff9/doc/2f657a57-eac6-4ee3-8387-736d50fd789b/e96079d8-e0e5-4765-958f-e6bde0bd2a90)

- > WSL2在多次更新後也適用和Linux一樣的安裝方式了
- > 21H2後也不用去安裝特殊版的Nvidia driver了
- > docker desktop在3.1版後內建支援WSL2上的nvidia-docker

WSL內的Docker也可以用Linux的裝法，但有時候可能會遇到小問題

## Linux

要先把nvidia的package server給加進apt的source list

```shell
distribution=$(. /etc/os-release;echo $ID$VERSION_ID) \
      && curl -fsSL https://nvidia.github.io/libnvidia-container/gpgkey | sudo gpg --dearmor -o /usr/share/keyrings/nvidia-container-toolkit-keyring.gpg \
      && curl -s -L https://nvidia.github.io/libnvidia-container/$distribution/libnvidia-container.list | \
            sed 's#deb https://#deb [signed-by=/usr/share/keyrings/nvidia-container-toolkit-keyring.gpg] https://#g' | \
            sudo tee /etc/apt/sources.list.d/nvidia-container-toolkit.list
```

然後就可以直接去裝nvidia-docker套件了

```shell
sudo apt-get update
sudo apt-get install -y nvidia-docker2
```

裝好後記得要去把舊有的docker服務給關掉

```shell
sudo service docker restart
```

用Ubuntu裝的話就不用去設定`/etc/docker/daemon.json`

```json
"default-runtime":"nvidia","runtimes":{"nvidia":{"path":"nvidia-container-runtime","runtimeArgs":[]}}
```

## Test

有多種image可以進行測試，挑一個自己喜歡的就行

最簡單的就是去看nvidia-smi能不能順利運作

```shell
sudo docker run --rm --gpus all nvidia/cuda:11.0-base nvidia-smi
```

## Reference

[Installation Guide — NVIDIA Cloud Native Technologies  documentation](https://docs.nvidia.com/datacenter/cloud-native/container-toolkit/install-guide.html#docker)

[WSL 2 GPU Support for Docker Desktop on NVIDIA GPUs - Docker](https://www.docker.com/blog/wsl-2-gpu-support-for-docker-desktop-on-nvidia-gpus/)
Learn Django REST Framework Part5 Class Based Views. (Generic API Views And Model Mixins)
Tags: python, api, rest, django
Published: 2022-05-19 16:27:48

In this video we look at class-based API views in the Django REST Framework. We also look at some of the benefits of using them compared to function based API views. We also look at how to use model mixins to allow us easily carry our CRUD on our data.
{% youtube 1fLILivusl8 %}
Build C# Web Apps using a Designer in Wisej.NET
Tags: javascript, webdev, programming, productivity
Published: 2022-05-19 16:26:24

Design and build powerful C# and VB.NET web applications using [Wisej.NET](https://wisej.com). The Wisej Designer is a Visual Studio plugin that enables developers to visualize their web application in real-time, connect events, and build complex layouts.
![Wisej Designer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gcd9kf6i0jwnydija89l.png)
 
**About Wisej.NET**
Wisej.NET is the most advanced, enterprise-scale, ASP.NET and ASP.NET Core development system in .NET. It covers just about the entire spectrum of features that business developers need to build and manage complex web applications.
It is also a Rapid Web Development system, thanks to its unique WYSIWYG pixel-perfect designer integrated into Visual Studio, and its familiar component object model. 
Developers can achieve in a few days what would take months, if at all possible, with any other web framework. The power and versatility of Wisej.NET also mean that it's a large and sophisticated system, with hundreds of features and several ways to accomplish most tasks.
Day-91 Training At Ryaz
Tags: javascript, webdev, beginners, programming
Published: 2022-05-19 16:24:51

Date:19/05/2022
Day:Thursday

today, I started at about 10:30 am as I was in progress to complete the java script cource and the bidding project so, today I started with the left over task. so, firstly I started with the java script cource and instructor started with new operator  The new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.after this I started with prototypes as JavaScript is a prototype based language, so, whenever we create a function using JavaScript, JavaScript engine adds a prototype property inside a function, Prototype property is basically an object also known as Prototype object, where we can attach methods and properties in a prototype object, which enables all the other objects to inherit these methods and properties.after this I started with prototype inheritance The Prototypal Inheritance is a feature in javascript used to add methods and properties in objects. It is a method by which an object can inherit the properties and methods of another object and If a prototype value is changed, then all the new objects will have the changed property value it is down as prototype changing. so, this way my day ended up and I got to learn various new things.
Leveraging the `key` prop to re-render Storybook stories
Tags: msw, react, storybook, reactquery
Published: 2022-05-19 16:07:29

I've written a fair amount about combining [Storybook (SB)](https://storybook.js.org/), [react-query (RQ)](https://react-query.tanstack.com/), and [Mock Service Worker (MSW)](https://mswjs.io/) (see related posts below). I finally solved another piece of the puzzle for a better developer experience: **forcing RQ queries to refetch after changing a control in SB that influences a response from MSW**.

A lot of times, the stories I write only leverage controls/args to influence the result of a mock response handled by MSW. Because of this, changing controls within the story does not update the UI because no props have changed. In order to demonstrate different states, I'll write separate stories with different `args` configurations.

E.g.,

```tsx
export type Args = ChecklistsSummaryProps & {
  isLoading: boolean;
  isEmpty: boolean;
  bigNumbers: boolean;
  avgCompletionMinutes: number;
};

// ...

const Template: SB.StoryObj<Args> = {
  render: _args => <ChecklistsSummary />,
};

export const Default: typeof Template = {
  ...Template,
};

export const Loading: typeof Template = {
  ...Template,
  args: { isLoading: true },
};

export const Empty: typeof Template = {
  ...Template,
  args: { isEmpty: true },
};

export const BigNumbers: typeof Template = {
  ...Template,
  args: { bigNumbers: true },
};
```

It's a bit tedious, but ends up being very declarative and descriptive in tandem with `composeStories` from SB's [testing-react](https://storybook.js.org/addons/@storybook/testing-react) addon.

But for cases where you want to have that nice and snappy feedback of SB controls that we know and love, you can leverage the `key` property on the component to force the component to refresh and run all its queries again.

```tsx
const Template: SB.StoryObj<Args> = {
  render: args => <ChecklistsSummary key={JSON.stringify(args)} />,
};
```
Demo!

{% embed https://www.loom.com/share/7f359748574e45408693a5af0c1c3863 %}

{% embed https://dev.to/tmikeschu/integration-stories-elevating-storybook-with-mock-service-worker-22m3 %}{% embed https://dev.to/tmikeschu/accessing-unique-queryclients-in-storybook-based-jest-tests-4ibg %}{% embed https://dev.to/tmikeschu/accessing-unique-queryclients-in-storybook-based-jest-tests-4ibg %}
Star Wars Red Lightsaber
Tags: codepen, css, javascript, tutorial
Published: 2022-05-19 16:22:17

Build A Star-Wars Lightsaber with HTML, CSS & Javascript. An easy guide to creating an awesome looking, animated star wars lightsaber from scratch, with html, css and javascript.

You can check more Star Wars themed stuff [here](https://codepen.io/collection/GoNBRq). For this tutorial, all we need is some basic HTML and CSS with a little help from Javascript.

{% codepen https://codepen.io/rembertdesigns/pen/qBVvrva %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
Star Wars Mandalorian | Pure CSS
Tags: codepen, css, tutorial, beginners
Published: 2022-05-19 16:09:51

Today we create a Star Wars themed Mandalorian art with CSS that almost looks like it could be a picture. Though this is just a fun tutorial, you can practice CSS art to improve your CSS skills. CSS art has been a fun way for me to learn new properties and improve my CSS skills. I have a bunch of CSS art tutorials. You can check more Star Wars themed stuff [here](https://codepen.io/collection/GoNBRq). For this tutorial, all we need is some basic HTML and CSS.

{% codepen https://codepen.io/rembertdesigns/pen/WNXmNVd %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
Hi, I'm Atef Bedhiafi
Published: 2022-05-19 16:07:09

I have been coding almost for a decade.

You can find me on GitHub as atefbed1004.

I live now in Tunisia.

I work for electro tounes ([vente smartphone tunisie](https://electrotounes.tn/smartphones)).

I mostly program in these languages: PHP, JS, CSS , cms


Nice to meet you.