teleren/devto huggingface dataset:
JS Plays With Emojis!
Tags: javascript, socialmedia
Published: 2023-04-26 17:45:09


Do you see the cover image? I saw that in a post, someone wondered about why it happens as if he had suddenly discovered one of Javascript's hidden features. But what is really happening there?

---

Let's have some fun with emojis:
```js
const family = '👨‍👩‍👧‍👦'
console.log([...family])
// ['👨', '‍', '👩', '‍', '👧', '‍', '👦']
```
As you see, we have seven elements in the array, not only the member families; We got some emojis glued together with the [zero with joiner character](https://unicode-explorer.com/c/200D).

```js
console.log(family.includes('👦'))
// do they have a son? returns true!

let familyWithTwoDoughters = family.replace('👦', '👧')
// we get this: 👨‍👩‍👧‍👧
```

Happily this is true not only about family emojis, but also for many emojies we may never use. Here is the technologist emoji (👨‍💻) that is made of 👨 and 💻! After googling some stuff, I explored this file on Github:
https://github.com/unicode-org/icu/blob/main/icu4c/source/data/unidata/emoji-zwj-sequences.txt
that contains a long list of them.


> An Emoji ZWJ Sequence is a combination of multiple emojis which display as a single emoji on supported platforms.


The formula is to combine multiple emojis using the zero width joiner character:
👨 + ZWJ + 🔬 = 👨‍🔬
🐻 + ZWJ + ❄ = 🐻‍❄️
🐈 + ZWJ + ⬛ = 🐈‍⬛

You can play with them in Telegram or any other application that supports them. It is not as magical as some people may think and has nothing to do with JS. We can do all of this using PHP, and any programming language supports strings:
```PHP
$family = '👨‍👩‍👧‍👦';
var_dump(mb_str_split($family));
```

Thank you.
Railway Deployment Using Dockerfile Not Working
Published: 2023-04-26 17:37:50

I'm deploying a django app using Railway. I'm having some trouble with my Dockerfile. Specifically, All commands execute except the last one specified by CMD("gunicorn" , "mysite.wsgi"). My health check is failing without showing wat's causing the error. When deploying using railway, if one fails to include a Dockerfile, railway will build using Nixpacks as defined in the railway.json file. This works fine and my site is deployed successfully but I need to install  Solr(for search) and to do that, I should use a Dockerfile. When I deploy using the dockerfile, the healthcheck fails and my site isn't deployed.
First look at my Coding Boot Camp
Tags: webdev, beginners, javascript
Published: 2023-04-26 17:36:43

I enrolled in a coding boot camp offered by UPenn this week. Everything is a bit overwhelming but I am eager to begin the journey I am about to partake on. I have a history in CompSci and am fairly familiar with coding in general so I should not be totally confused.

In this boot camp we will be learning front-end things like HTML, CSS, and JS and we wil also be learning back-end things like MySQL, Node.JS, etc. I will try to update this blog weekly talking more about the things I have learned that week. It's more of a place for me to reflect and look back on what I have done, but if anyone else is reading this thanks for joining me on my adventure
Let’s play a Javascript Frontend Game
Tags: frontend, javascript, webdev, tutorial
Published: 2023-04-26 17:35:52

## Under the Hood
The story begins last week I got a technical assignment for a full-time position as a part of an interview process.

I am not putting the entire assignment here but the problem statement is the real-world case scenario and that is what we will play around with today.

## Question
You have one JSON file that represents the file system of any directory in the world.

Now the questions revolve around this one JSON

Each question will represent the stages of the game.

Passing one stage will allow you to go to the next stage and therefore complete the game.

## Stage One
Show file structure as a Tree on the screen from JSON

- How will you iterate over the JSON and render it on the website just like Javascript DOM or binary tree?
- The tree should contain all the directories and folders mentioned in the file structure
- The tree should have accordion functionality just like any file folder you s
ee on the browser.

## Stage Two
Collapse/Expand directories
- Define a method to collapse and expand all directories.

## Stage Three
Add Delete file/folder functionality
- Write a javascript function to remove a file/folder from the JSON described above.

## Stage Four
Edit the name of any file/folder
- How will you update the name of any of the files/folders,

## Stage Five
Create a new file/folder for any position
- How will you add a new file/folder to the required position, for example, inside the directory name components or in the root directory?

## The last stage — Stage Six
Add Drag and Drop functionality to the file structure
- You have the children key in the file structure which is an array. Now define a way to move the elements of this array to the position given as an input parameter.

## It’s not OVER
Once this is OVER you have successfully completed the GAME.

But that’s not why this GAME is developed.

Now that you have written each method, simply convert those methods into a React code.

Meaning writes each method in whatever frontend language or framework you are comfortable with and your own CODE editor is ready just like codesandbox.

If you are wondering how is this even possible just TRY it on your own.

## Advanced
The more advanced version will certainly enable more stages.

Stage 7 can also include the content of each file and you have to show the content to the editor on the screen.

The editor should allow developers to edit the content and save the entire JSON and sends it back to the server.

The server then stores this JSON in the database. Keep playing the game until you want it to end. I mean it can go to whatever extent you want it to take.

But I’ve to certainly end here only.

Cheers
Shrey
[iHateReading](ihatereading.in)
Mozilla Multiple Page Cross browser PDF Viewer
Tags: mozilla, pdf, javascript, pdfjs
Published: 2023-04-26 17:34:59

[https://github.com/amith-moorkoth/mozilla-pdf-demo](https://github.com/amith-moorkoth/mozilla-pdf-demo)

[PDF.js](https://github.com/mozilla/pdf.js/) is a Portable Document Format (PDF) viewer that is built with HTML5.

We have tried to bind multiple pages for the pdf renderer to show for a demo purpose, it is just a few lines of code which extends the above library.

Please let me know this is interesting, will try to enhance the viewer.
Dev Github hackathon
Tags: githubhack23
Published: 2023-04-26 17:33:59

## What I built 

### Category Submission: 

### App Link

### Screenshots 

### Description 

### Link to Source Code 

### Permissive License 

## Background (What made you decide to build this particular app? What inspired you?) 

### How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?) 

### Additional Resources/Info
BLACKJACK Game
Tags: codecademy, gamedev
Published: 2023-04-26 17:32:46

I have developed the blackjack game in python.

![BlackJack Sample Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6paiu797svwtuqv2gpnk.png)

GITHUB link: [BlackJack](https://github.com/varshini39/BlackJack)
Control a 3D Model with Your Phone: A React, Three.js, and Socket.io Project 🚀
Tags: showdev, javascript, react, 3d
Published: 2023-04-26 17:22:22

As a fan of 3D models and technology, I wanted to create a website that allows you to control a 3D model using your phone's movements on a local network. Here's how I did it

First, I found a 3D model of a phone online and downloaded it. Then, I used Three.js to display the model on the screen, React.js for the frontend, and Express Node for the backend. I utilized Socket.io to transmit data on the local network.

here is the result:
![demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f335uzhbps1d1v7jexz6.gif)

To sync the 3D model movement with the phone, I used the phone's gyro sensor data and transmitted it to the phone using Socket.io. However, I ran into a problem where I wasn't able to run the application on a local IP due to Chrome's security rules not allowing sensor data on an unsecured site. After some research, I forwarded my PC port to my Android device to access my page as localhost.

If you're interested in more projects like this, be sure to follow me on Twitter where I share my latest tech explorations!

[https://twitter.com/gitrevert/status/1651234806783528960](https://twitter.com/gitrevert/status/1651234806783528960)
My favorite tmux prefix
Tags: tmux, prefix
Published: 2023-04-26 17:20:39

For a long time I used `screen`, but now `tmux` is my favorite terminal multiplexer. But my fingers could not get used to the `Ctrl+b` combination, so I decided to please them. An internet search revealed that the most popular prefix combinations are `Ctrl+a`, `Ctrl+Space`, `Backtic`, `CapsLock` followed by many others.

My wishes: 
- the keys for the prefix were located side by side;
- it was not necessary to twist the fingers to press them; 
- there were two symmetrical combinations for the right and left hand. 

The most promising combination at first seemed to be `Ctrl+Space`, and at first it even seemed convenient, but after experimenting I found it.

So my favorites: `Alt+z` and `Ctrl+/`

My usual `tmux` workflow is: open multiple panes, select a layout, switch between panes, expand/collapse a pane, minimize `tmux`, expand `tmux`, detach the session.

`LAlt+z`, `LShift+'`, `LAlt+z`, `LShift+'`, `RCtrl+/`, `RAlt+2`, `LAlt+z` `z`, `LAlt+z` `z` ,  `LAlt+🠕`, `LAlt+🠗`, `LAlt+z` `RCtrl+z`, `fg`, `RCtrl+z` `d`

Almost like playing the piano :)

Explanation:
(`LAlt` - left Alt key, `LShift` - left Shift key, `RCtrl` - right Ctrl key, `RAlt` - right Alt key)
- `LAlt+z`, `LShift+'`   # Split the current pane into two, top and bottom
- `LAlt+z`, `LShift+'`   # Split the current pane into two, top and bottom
- `RCtrl+/`, `RAlt+2`   # Arrange panes even-vertical
- `LAlt+z` `z`   # Zoom current pane
- `LAlt+z` `z`   # Unzoom current pane
- `LAlt+🠕`   # Switch to pane above
- `LAlt+🠗`   # Switch to pane below
- `LAlt+z` `RCtrl+z`   # Suspend the `tmux` client
- `fg`   # Bring `tmux` to foreground (`bash` command)
- `RCtrl+z` `d`   # Detach the current client

Here is my config file

```bash
# reload config after changes
# tmux source-file ~/.tmux.conf

# colors
set -g default-terminal "screen-256color"
# set -g default-terminal "tmux-256color"

# prefix keys
unbind C-b
set-option -g prefix C-_                # Ctrl+/
set-option -g prefix2 M-z
bind-key C-_ send-prefix
bind-key M-z send-prefix -2

# mouse mode on
set-option -g mouse on

# key bindings
bind r source-file ~/.tmux.conf         # reload config

# switch panes using Alt-arrow without prefix
bind -n M-Left select-pane -L
bind -n M-Right select-pane -R
bind -n M-Up select-pane -U
bind -n M-Down select-pane -D
```

I hope this proves useful to someone.
What is MVC pattern?
Tags: development
Published: 2023-04-26 17:20:07

**What is the MVC pattern?**

MVC pattern is a famous software architecture that separates the system and the development in 3 components - Model, View and Controller. Each component has its own function and communicates with others. MVC allows the code to be more organized and simple to keep and update.

_Model_

In the Model, we process the data, make connections with the database and store data. Model is independent from View, that is, Model isn’t responsible for the way we show this data to the user. 

_View_

View is responsible for showing to the user the data, through an interface. That is, View is the user’s part. The user can send data, see data and take actions. In other words, the View is the front-end part.

_Controller_

Controller is responsible for making a bridge between View and Model. Controller gets data, processes this data and sends this data to the Model. A simple and daily example is a login system. We have the Model, with a database and one table User. We have the interface, with two fields, maybe one is password field and a button. Between these two, we have the Controller. When we press the button ‘login’, We take this data and send it to the Controller, and it will check if this data exists in the database, and will make all the processes, if it exists or not.
Python 🐍 challenge_28⚔️
Tags: python, challenge, webdev, beginners
Published: 2023-04-26 17:01:51

##  Moving Zeros To The End

-  Write an algorithm that takes an array and moves all of the zeros to the end preserving the order of the other elements.

#### Examples:

```
move_zeros([1, 0, 1, 2, 0, 1, 3]) => returns [1, 1, 2, 1, 3, 0, 0]

```

###### Task URL: [Link](https://www.codewars.com/kata/52597aa56021e91c93000cb0)


## My Solution:

```
def move_zeros(array):
    zeros = [zero for zero in array if zero == 0]
    new_array = [number for number in array if number != 0]
    new_array.extend(zeros)
    return new_array
```

## Another solution

```
def move_zeros(arr):
    l = [i for i in arr if isinstance(i, bool) or i != 0]
    return l+[0] * (len(arr)-len(l))
```

### Code Snapshot:


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

### Learn Python

######  Python top free courses from Coursera🐍💯🚀

🎥 {% youtube 2VRXU2H4q0c%}


### Connect with Me 😊

#### 🔗 Links

[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/mahmoud-el-kariouny-822719149/)

[![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/Mahmoud42275)
GitHub PortFolio
Tags: beginners, webdev, html, css
Published: 2023-04-26 17:00:34

> As the saying goes, "less is more", and my simple UI-based HTML page deployed on GitHub embodies that sentiment perfectly. With a clean and minimalist design, my portfolio proves that sometimes simple things are the most attractive. As a web developer with a passion for streamlining and automating tasks, I believe that the user experience should always be at the forefront of development. That's why I have crafted a portfolio that is not only visually appealing but also easy to use and navigate. So if you're looking for a no-nonsense, straightforward approach to web development, look no further than my GitHub page. You might just find that the simplest solution is often the best one.

[Git Repository](https://github.com/vikas-parmar/portfolio)
[Demo](https://vikas-parmar.github.io/portfolio/)
Okta's auth0
Tags: authentication, auth, webdev, security
Published: 2023-04-26 17:00:25

**Set up authentication in the most efficient way with Okta's auth0**

`We often deal with this requirement where we're ready with the website be it coding it's features and functionalities  but authentication is yet to be configured on the website`

**And authentication probably is the last feature to be configured yet the most important one.**

> I've come across one of the most efficient ways to configure this feature to your application.
With the help of auth0 of Okta, one need not to sit and write the code for all the logic required.

**Okta's auth0**

- reduces the manual effort to a large extent.

- No manual coding required.

- No need to set up separate database.

- Provides best authentication out there.


 
**Documentation to configure auth0 to your application is available [here](https://auth0.com/docs/)**

> Feel free to comment below in case you get stuck, I'll be pleased to be of any assistance here.

Hope you find this helpful.

Cheers!
Robusta Installation
Tags: devops, kubernetes, robusta, monitoring
Published: 2023-04-26 16:59:29

Robusta is the CNCF member, Which is **open source** and used on monitoring layer for Kubernetes and automations. Provides **valuable insights into Kubernetes clusters** and integrates with various monitoring and alerting tools Commonly used with Prometheus but not limited.


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



First as the source of truth to check parent website for updated templates https://docs.robusta.dev/master/installation.html

Installation steps
There are few ways of installations like Robusta cli and docker, Currently we are using Robusta CLI

By default, on Linux and mac you have python install or else check and install python before the Robusta.

Step 1 : 
$ helm repo add robusta https://robusta-charts.storage.googleapis.com && helm repo update

$ pip install -U robusta-cli --no-cache
(check the python version, coz Python 3.7 and higher is required)


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



Step 2 : Robusta configurations required sink (automations in place to handle alerts in your Kubernetes cluster by sending them to sinks with added enrichments that tell you what is happening in your cluster. It also suggests common fixes that give us better alerts)
Sinks Available : https://docs.robusta.dev/master/catalog/sinks/index.html

$ robusta gen-config

will ask for y or n popup, once y is been choosed on browser ask to add on channel slack.


It will create the generated_values.yaml in current path


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


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


Step 3 : Run the following commands to install Helm charts

$ helm install robusta robusta/robusta -n your_namespace -f ./generated_values.yaml \
    --set clusterName=<YOUR_CLUSTER_NAME>

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

Step 4 : To check the deployments on robusta

$ kubectl get pods -n your_namespace
$ robusta logs


Step 5 : To check the Robusta create some error like crashing pod

$ kubectl apply -f https://gist.githubusercontent.com/robusta-lab/283609047306dc1f05cf59806ade30b6/raw

$ kubectl get pods -n your_namespace

Step 6 : Use Robusta UI that we enabled in Step 2 option

URL : https://platform.robusta.dev/

Two options to choose like Google and Azure, provide the mail id which is given in Step 2


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


Continue......
iOS App developers
Tags: appwritehack, css, javascript
Published: 2023-04-26 16:41:08

I need a best priced and fair app ios based to connect the site. The site helps clinicians to have an overview about the [Standard treatment guidelines Zambia](https://www.pamulomo.com/2023/07/download-pdf.html). Mostly it should be easy to use with great navigation.
Any recommendations please i will appreaciate.
Create JSON Web Tokens for development and testing
Tags: aspdotnet, dotnet, webdev, security
Published: 2023-04-26 16:32:03

It can be challenging to test an API that requires authentication through a [JSON Web Token](https://jwt.io/introduction) _(JWT)_. To obtain a valid access token that can be used with your API, you typically need to setup/use an entire identity and access management system. 

Using the [`dotnet-devjwt`](https://github.com/Phoesion/Phoesion.DevJwt) tool you can simplify this process. It allows you to generate custom JSON Web Tokens that can be used during development and _(system)_ testing of your JWT-Protected API endpoints.

Let's go through the steps of using this new tool.
 

## Getting started

Let's create a small ASP.NET Core application, configured to use JTW Bearer authentication:
```cs
var builder = WebApplication.CreateBuilder(args);

builder.Services.AddAuthentication()
                .AddJwtBearer(o =>
                {
                    o.Authority = "https://login.microsoftonline.com/common";
                    o.Audience = "myApi";
                });

builder.Services.AddAuthorization();

var app = builder.Build();

app.UseAuthorization();

app.MapGet("/protected", (ClaimsPrincipal user) => $"Hello {user.FindFirst(ClaimTypes.Email)?.Value}")
   .RequireAuthorization();

app.Run();
```

To test our endpoint we would need a valid token from our authority _(in this case login.microsoftonline.com)_. Getting this token is not always easy or even possible. This becomes even more difficult when we want to run isolated system tests in different environments.

Let's use the **DevJwt** lib/tool to create a token for local development.
 

## Using Phoesion.DevJwt
 
1. Install the dotnet tool
	```sh
	dotnet tool install --global phoesion.devjwt.cli
	```
	 

2. Generate token using
	```sh
	dotnet devjwt create myApi --email user@mail.com
	```
	![Console output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ni92rem76h4rookdsj7y.png)

3. Configure your service `appsettings.Development.json`
	```json
	"Authentication": {
	   "Schemes": {
	      "Bearer": {
	         "ValidIssuer": "phoesion.devjwt",
	         "SigningKeys": [
	          {
	             "Issuer": "phoesion.devjwt",
	             "Value": "c29tZV9kZWZhdWx0X2tleV9mb3JfZGV2cw=="
	          }
	         ]
	      }
	   }
	}
	```
	 


Now we can call our API by passing the generated JWT token:
`curl -i -H "Authorization: Bearer {token}" http://localhost:5256/protected`
![Postman window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r47sa37n3ciw1xkbqqa2.png)

You can find [more samples here](https://github.com/Phoesion/Phoesion.DevJwt/tree/main/Samples)

If you want to learn more, check out [the project documentation](https://github.com/Phoesion/Phoesion.DevJwt)

Happy Coding!

[_Join Discord Group_](https://discord.com/invite/YJxdPbvdUj)