teleren/devto huggingface dataset:
Blackjack Game!
Tags: python, beginners, programming, gamedev
Published: 2022-10-27 22:31:04

I decided to try and complete this program simulating a player (you) vs dealer match of Blackjack because with my group of friends, we always like to meet up to play some card games like Blackjack, Poker, or a local one from my country called 'Truco' (you can search it through Google, I'm sure you will like it, it's a traditional game from South America)

Basically, I created two classes, one for the player and the other for the house (or dealer).
Then, depending of the player willing, we can hit (to get another card) or stand (no more cards).
Automatically, the dealer following the Blackjack rules, hit or stands, and in the end, depending of who has the highest number without overpassing 21, we have our winner!

https://github.com/AgusR7/Blackjack

In conclussion, I think we all learn a lot, by programming, by doing our own proyects. So keep up the pace you all!
Hacktoberfest Week 4
Tags: vue, opensource, hacktoberfest, github
Published: 2022-10-27 22:30:33

My final week, and a new experience, because this is my first time coding in **vue**. I had to do some reading trying to figure out how it is used as a framework and how it builds on top of standard **HTML**, **CSS** and **JavaScript**.

### About the Repo
[dcall](http://mukundan.io/dcall/#/) is an app that allows for a person to create a meeting room, creating a name, and allowing them to toggle camera and voice. 

### Contributions
[Issue](https://github.com/Mukundan314/dcall/issues/1)
[Pull Request](https://github.com/Mukundan314/dcall/pull/2)
For this contribution I had to find a way on how to properly set up the **Vue** files. I had to find out which files I had to modify in order to modify the correct pages and update the files without error.

After tracking down which files I had to modify I had to decide on what I wanted to change so that the UI looks better. So I opted to change the background as a solid color but dark color because of my plan for the bar so people can enter the room name. 

My first update I changed some of the buttons within a room to be able to have a gradient flow when a mouse is hovering over. But the owner did not want any gradients so I opted out for a more simple look for the button.

Then the search bar when inputting the rooms name. I decided that it would have a glow affect when the mouse is hovering over it. It took some time to explain to the owner that the shadow casting was necessary to be there for that effect to properly animate.

### Thoughts
It took a bit of time to understand how **vue** properly worked but it worked out in the end. There were several modifications due to the owners perspective for his app but it was easily fixed. Though this means there's still for me to learn.
Funny Animals: Coloring Book For Kids Ages 3-7
Published: 2022-10-27 21:56:38

[Funny Animals: Coloring Book For Kids Ages 3-7](https://kiddycromic.com)

This book contains 100 cute and funny animal illustrations

Coloring offers children the following benefits:

This develops the ability to concentrate.

This stimulates creativity and artistic expression.

This helps the development of fine motor skills.

Coloring develops visual spatial intelligence in children.

This increases self-esteem.

This helps children to relax.

This activity balances thought and causes endorphins to be released.

Children learn while having fun.

And they will be entertained for weeks.

Your children will remember this book fondly when they are older.
Migrating databases from Heroku to Render
Tags: heroku, render, paas, postgres
Published: 2022-10-27 21:33:07

---
title: Migrating databases from Heroku to Render
published: true
description: An experience report about migrating data from Heroku to Render's Postgres service
tags: heroku, render, paas, postgres
---

One of the more interesting aspects of Heroku ending its free service is that there is no simple way to enter your credit card and simple switch your data over to a paid plan. You have to migrate from the free to the paid servers.

On that basis it makes sense to look at what the alternatives are before deciding to make a decision.

[Render](https://render.com) has had a lot of positive comments for picking up the mantle of Heroku's promise of developer friendly PaaS and making good the deficits. It's Postgres service does allow you to move between the trial and paid for database service for example just by entering payment details.

It also allows you to host multiple databases in the same instance which is what I want for a lot of my hobby apps as they don't really have a lot of data.

The service exposes a standard database URL and so far I have been able to use standard Postgres tools for everything I've wanted to do with the database. You can even just cut and paste a string to connect with `pgcli`.

The [documentation for migrating from Render to Heroku](https://render.com/docs/migrate-from-heroku) is excellent and worked just as advertised.

Having imported the databases I then detached the Heroku instances and replaced the `DATABASE_URL` environment variable with the new URL from Render, restarted my dynos and every application I had worked perfectly.

The only issue I had was in my local setup where I needed to use the `pg_restore` from a matching version which I needed to specify the exact `/usr/lib/postgresql/<version>/bin` path.

Overall a great migration experience and I can't really fault it. I wish I had made the change sooner.
Day 645 : Where I Go
Tags: hiphop, code, coding, lifelongdev
Published: 2022-10-27 21:27:17

_liner notes_:
- Professional : Had a couple of meetings and worked on a new feature for a demo application. Pretty much it.

- Personal : Last night, I played around with the Meta Quest Pro some more and figured out how to get the home room to be passthrough. Once I got that working, I was actually able to play with some WebXR augmented reality demos and they worked (mostly), but it's a start in the right direction for where I go. Worked on the layout for the front page of my side project. Then watched some anime and went to sleep.

![Orange sand dunes of Souss-Massa-Drâa, Morocco desert with a little vegetation under a night sky filled with stars.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bou884mej5jipylam6q6.png)

Going to start putting together the radio show. I want to watch more of this WebXR course I started. Maybe some anime and then bed.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube -w7Kve9SqUo %}
How to show Loading wrapper in ReactJS / React Native while api call !
Published: 2022-10-27 21:17:50

No Introduction, Let's cut to the chase

You have an API and a component to show with data provided by API. Now the problem is, that component gets called before the API call is completed resulting in throwing an undefined or null error while calling children keys in a component.

To Resolve this we use something called a Loading Wrapper. Now, this method works on both React and React Native as it uses common useState and Reacts LifeCycles to work.

&nbsp;

## Step 1 - Maintaining a Loading State

Let's start by making a loading state to check and update our application whenever the loading starts and ends.

```jsx

const [isLoading, setIsLoading] = useState(false)

```

Now we will update it to `true` when the call starts and `false` when the call ends.

&nbsp;

## Step 2 - Calling APi with Loading State

In this step, we will simply update the `isLoading` state to true and false to tell our application the current loading condition.

```javascript

useEffect(()=>{
     getData()
},[])

const [isLoading, setIsLoading] = useState(false)
const [data, setData] = useState(null)

const getData = async()=>{
   setIsLoading(true)

   await axios.get(url).then((res)=>{
           setIsLoading(false)
           setData(res.data)
  })
  .catch(err=>{
           setIsLoading(false)
  })
}

```

_**What the hell did you do here ????????**_

Well I started by setting `isLoading` to `true` when our API call started ( just before Axios) and then to `false` when our promise finally ended ( either with success or failure )

&nbsp;

## Step 3 - Showing Loading wrapper based on this api call

Now our application knows if the API is loading or not, let's move to the rendering part.

We will use conditional rendering to render the diff UI based on diff cases. 

```javascript

return(
   !isLoading ?
      data!==null?
        <YourComponent data={data} />
      :
       <h1> Can't connect to server ! </h1>
   :
   <span> Loading... </span>
)
```

Here, we are first checking is `isLoading` is false, which means the API call has ended. So we will move to render our component. If `isLoading` is true it will show a `span` tag with text as Loading...

Then, we are checking if `data!==null` which means the API call has been success full and populated with backend data. If it is null that means the API call is failed and there is some error in the API call.

It is not really a part of Loading Wrapper but it is most commonly used with loading states to avoid crashes and undefined errors.


**So Now our loading wrapper is ready, and each time the `getData()` function gets called it will again trigger the loading and our render function will act accordingly.**

    
&nbsp;

### ❤️🧑🏻‍💻Thanks for reading , If you liked this blog please drop a like and comment !
ws-emit: easy websocket microservice
Tags: websocket, socketio, python, webdev
Published: 2022-10-27 14:58:22

[WS-Emit](https://github.com/yaroslaff/ws-emit) is simple to use microservice app to send instant messages (websocket events) from backend to frontend web applications running in browser (one way). 

ws-emit handles CORS configuration and authentication mechanism for different room-spaces (Alice cannot receive messages sent to Bob, but they both can receive public messages).

{% embed https://www.youtube.com/watch?v=yQCIBFuogg4 %}

### Example usage

- ecommerce website may update prices, stock and orders information on page in realtime, without need to refresh.
- social network may show user if someone is writing new comment right now and display comment when it will be submitted
- backend may update frontend about status of long-running requests, such as 'build is N% ready', 'deploying'

### WS-Emit benefits

- ws-emit is isolated microservice, not requires any integration with your application
- Compatible with application in any programming languages (if they can send HTTP requests or publish data to redis), any frameworks, any application web server

WS-Emit is based on [Flask-SocketIO](https://github.com/miguelgrinberg/Flask-SocketIO) and sending message is as simple as in any other flask-socketio application:

```javascript
socketio.emit('update', data, room='time')
```
or via HTTP interface:
```
curl -d @x.json -H "Content-Type: application/json" -X POST http://localhost:8899/emit
```
More info in github repo: https://github.com/yaroslaff/ws-emit
cd Back Multiple Directories in One Line
Tags: tutorial, bash, linux, productivity
Published: 2022-10-27 21:16:25

Having to `cd..` over and over again in sub directories can be a tedious and annoying thing to do. Although it may be cool when you can quickly navigate through multiple directories it can be really annoying if you are trying to be efficient in your terminal. 

Every time you open up a new session if your terminal there are custom-loaded preferences that are loaded into that session, whether that be for programs you have or for your bash environment. For example, every time I open up `Vim` in my terminal I have the `:set number` property to always be on, so I can see what line I am on or want to go to, for example:

![Vim Pic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3c6mnig0i2znp945xsim.png)

## Creating Your Own Custom Bash Command File
1. So in order to make your own custom commands you should make your own `Custom Bash Commands File` and you can call this whatever you want. As long as it is memorable, so `tomato_soup.sh` would not be a good file name. 😉
   - Also, since you don’t want to see this file every time you `ls` in your system. You should preface the name of your file with a `.` so that it is a hidden file in your system. If you wanted to view the hidden files in the current directory you are in you can use the `ls` command along with the `-a` or the `--all` flag, which just means list all the files in the current working directory. 

2. Once you created your own file with the `touch` command such as `touch .custom_bash.sh` you can use `Vim` or `Nano` to edit the file and make changes to it. (Use `Vim` its cooler 😉)

3. Now that you are inside the file you created, use this code in order to `cd..` back multiple directories.
```bash
#!/bin/bash
 
function cd_up(){
    cd $(printf "%0.s../" $(seq 1 $1));
}

alias 'cd..'='cd_up'
```
Place that code anywhere inside your custom file and remember to save before you exit.

After you have saved we need to test out the command to make sure it works.
Use the `source` command along with the custom bash file you made so, `souce ~/.custom_bashcommands.sh`

Then `cd` into some subdirectories and try `cd.. 2` to see if it works or not.

Although, using this method you would need to run the `source` command every time you open up a new terminal instance, to avoid this we can link our custom bash file into our bash profile so that every time we open up a new terminal our custom commands are preloaded. 

To do this open your `.bash_profile` file and place the preceding command anywhere in the file, 
so in our case you would put `souce ~./custom_bashcommands.sh` into `.bash_profile`. Exit `.bash_profile` and close and reopen your terminal to see changes. 

DEMO:
![CD Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6eco6a9kcr94iji54oj6.gif)

_Hope this was useful to you!_
Run Nav2 in a Docker Container
Tags: ros2, gazebo, docker
Published: 2022-10-27 20:57:17

Nav2 is the Navigation stack for ROS2 (foxy). This post lists out the step required to setup and test Nav2 stack inside a Docker container.

Install Docker by going though the Docker Docs.

Pull the ROS2 docker image from hub.docker.com:
```docker pull tsadarsh/ros2-foxy```

To view the GUI applications like RViz and Gazebo, enable clients to access your device XServer:
```xhost +```

Set DISPLAY variable and mount X11 unix-domain socket to pipe the GUI applications outside the container:
```docker run -it -e DISPLAY=$DISPLAY -v /tmp/.X11-unix/:/tmp/.X11-unix/ tsadarsh/ros2-foxy```

Run a `sudo apt update`

Follow the Getting started guide from the official ROS2 [docs](https://navigation.ros.org/getting_started/index.html) and install:
```
sudo apt install ros-foxy-navigation2
sudo apt install ros-foxy-nav2-bringup
```

Install the Turtlebot 3 packages:
```sudo apt install ros-foxy-turtlebot3*```

To run the example, first source the foxy `setup.bash` and set the environment variables:
```
source /opt/ros/<ros2-distro>/setup.bash
export TURTLEBOT3_MODEL=waffle
export GAZEBO_MODEL_PATH=$GAZEBO_MODEL_PATH:/opt/ros/<ros2-distro>/share/turtlebot3_gazebo/models
```

Finally launch the example turtlebot3 simulation:
```ros2 launch nav2_bringup tb3_simulation_launch.py headless:=False```

Note: Gazebo initially takes 5-10 minutes to start, download and cache all the required models. Until then the screen appears to be frozen.

If you encounter this error: `libGL error: MESA-LOADER: failed to open amdgpu: /usr/lib/dri/amdgpu_dri.so: cannot open shared object file: No such file or directory (search paths /usr/lib/x86_64-linux-gnu/dri:\$${ORIGIN}/dri:/usr/lib/dri, suffix _dri)`, then mount `/dev/dri` to your container:
```docker run -it -e DISPLAY=$DISPLAY -v /tmp/.X11-unix/:/tmp/.X11-unix/ -v /dev/dri:/dev/dri tsadarsh/ros2-foxy```
Video: Using Github Copilot to write Hugging Face code
Tags: tutorial, machinelearning, vscode, github
Published: 2022-10-28 12:35:48

---
title: Video: Using Github Copilot to write Hugging Face code
published: true
date: 2022-10-27 20:45:56 UTC
tags: tutorial,machinelearning,vscode,github
canonical_url: https://julsimon.medium.com/video-using-github-copilot-to-write-hugging-face-code-c071247b2d49
---

And now for something completely different! With a few hours to kill in the speaker room, I decided to take a stab at writing [Hugging Face](http://huggingface.co) code with [Github Copilot](https://github.com/features/copilot). No speech on this one, just a light rock music track, I hope you’ll enjoy it.

{% youtube HxyG896swQU %}

This video was recorded in one take, with very little editing (kernel crashes, etc.). I didn’t script anything to make Copilot look good or bad. I just opened VS Code, picked a simple example, and played ball. IMHO Copilot did very well. Some suggestions definitely felt like it was reading my mind.
JS defer or how to free resources at the end of code block (fun way).
Tags: javascript, typescript, tutorial, go
Published: 2022-10-27 20:40:26

Interesting feature of the Go language is to delay the execution of a function until the current function returns - defer keyword.

It allows to declare resource cleanup near the place it created i.e.

```go
file, err := os.Create(fileName)
if err != nil {
  return err
}
defer file.Close()
...
file.Close will be called at the end of function
...
```

The similar feature in js is `finally` keyword. The issue with `finally` that you open resource in one place but need to close it far far away from opening position. 
- easy to make mistake
- in case of dependent resources easy to break order etc. 

In js we can have similar behavior like defer using generators, see example:
```typescript
async function* createResource<T>(open: () => T, close: (a: T) => void) {
  let r: T | null = null;
  try {
    r = open();
    yield r;
  } finally {
    if (r != null) {
      close(r);
    }
  }
}

const open = () => {
  console.log('open');
  return 'somehandle';
};

const close = (handle: string) => {
  console.log(handle, 'closed');
};

for await (let x of createResource(open, close)) {
  console.log(1);
  await new Promise(x => setTimeout(x, 1000));
  console.log(2);
  // throw new Error();
}
```

Output will be: 'open', 1, 2, 'somehandle closed'

Now our resource lifecycle is bounded to "for" block. We declared `open`, `close` in same place and it's somehow looks like `defer`. 

PS: `createResource` should rethrow Error so its just small simple version to show the idea.

PPS: All above is just for fun to show generators power.
Learning About Full Stack
Published: 2022-10-27 20:24:28

Diving into Full Stack Development

When you look at these different skills, you can see that they actually represent the main skills of both a backend developer and a frontend developer. For example, programming and security are commonly backend development work, but a full stack developer can be responsible for both. Web design, coding, and user experience are typically frontend development work, but a full-stack developer can do these as well.
Programming

Programming usually takes place behind the scenes but involves languages like Ruby, PHP, and Python. For a full stack developer, it’s important to have a good understanding of at least the basics of these languages so you can build the background of the website or at least keep it up and running if there’s a full backend developer who creates it in the first place.
Security

The security aspects of development are extremely important because if something gets into your website and is able to cause problems it could be damaging for your business and your users. This is why a full-stack developer needs to understand not only the basics of security but the best practices as well, so they can make sure that your website is up to the standards of the average website.
Web Design

Making your website look good is extremely important and it’s what most people are going to notice when they first see your page. It’s what people are going to judge your company based on. So, you want someone who can take care of making sure the entire website looks good. This is typically a frontend aspect, but a full stack developer would be able to work on the design elements as well, or at least update them along the way.
Coding

This is another aspect that’s primarily based on the frontend developer role. It usually uses languages such as HTML, CSS, or JavaScript and goes into the process of making sure that the website looks good for any potential users. You want your full-stack developer to have a good understanding of coding languages so that they can update things on your website along the way to keep up with any changes you want to make.
User Experience

The user experience is the most important aspect of your website. Without a positive user experience, your users aren’t going to stick around. They’ll look for someone else that can give them the same or better information in an easier-to-use format. So, you need a full-stack developer that can capitalize on the user experience and make sure it’s as positive as possible.

tags: [full stack developer](https://upstackhq.com/hire-developers/full-stack-development)
Notion Template to Track Your Leetcode Progress & Improve Productivity 🚀
Tags: leetcode, coding, programming, productivity
Published: 2022-10-27 20:08:14

I have created a very simple template for everyone to use. This template is generally created for programmers who want to track their Leetcode Progress.

This is a notion template for keeping track of your Leetcode question, This was made for people who aren’t able to properly track their Leetcode Progress. This one of the best template ever made on Notion.

**What problems does the template address?**

By using this template, you can track your leetcode progress and challenge yourself again and again till you get better at Data Structures.

**How to use this template?**

All you have to do is make a duplicate for this template and then you can easily edit, modify and do whatever you want with it.

**Features of this template:**

- 100 days (you can add more)
- Add your Problems with Links
- Topic Selector
- Difficulty Selector
- Time & Space Complexity
- Programming Languages
- Time Tracker
- How much time it took to finish
- Progress Tracker
- Quick Links
- Notes - To add your notes for every single question

**_The person who does one Leetcode question every single day regardless of how they feel will always beat the person who does it when they feel like doing it._**

**How does the template address these issues?**

It helps you think like a Sigma male/female and builds confidence.

**_[Get it here :)](https://github.com/itsOwen/leetcode-tracker-helper)_**