teleren/devto huggingface dataset:
Top 6 Free Services to Help You Deploy Your App
Tags: development, html, webdev, frontend
Published: 2023-10-12 01:45:14

Bringing your app from development to deployment can be a complex process, especially if you're new to the world of web and mobile applications. Fortunately, there are a plethora of free services available to make the deployment process more manageable and cost-effective. In this article, we'll explore some of the top free services that can help you deploy your app, whether it's a web application, a mobile app, or something in between.

### 1. **GitHub Pages** (Link: [GitHub Pages](https://pages.github.com/)):
   
   GitHub Pages is a free hosting service provided by GitHub, one of the leading platforms for version control and collaborative coding. It's an excellent choice for deploying static websites or web apps. By creating a repository on GitHub and enabling GitHub Pages, you can easily host your project, complete with custom domain support.

### 2. **Heroku** (Link: [Heroku](https://www.heroku.com/)):

   Heroku is a cloud platform that offers a free tier to help you deploy web applications effortlessly. It supports multiple programming languages and offers a straightforward interface. Heroku's free tier allows you to deploy and host your app with some limitations on resources, making it ideal for small to medium-sized projects.

Update: Herok no longer supports Free plan.

### 3. **Netlify** (Link: [Netlify](https://www.netlify.com/)):

   Netlify is a popular hosting and automation platform designed for modern web projects. With its free plan, you can deploy static sites, serverless functions, and even full-stack web applications. Netlify offers continuous deployment, easy integration with version control systems, and a content delivery network (CDN) for optimized performance.

### 4. **Vercel (formerly Zeit Now)** (Link: [Vercel](https://vercel.com/)):

   Vercel is another fantastic option for hosting web applications, particularly those built with popular JavaScript frameworks like React, Vue, and Next.js. The platform offers a free tier with continuous deployment, global content distribution, and easy custom domain setup.

### 5. **Firebase Hosting** (Link: [Firebase Hosting](https://firebase.google.com/products/hosting)):

   Firebase Hosting is Google's hosting service tailored to mobile and web developers. It's particularly well-suited for hosting web apps, progressive web apps (PWAs), and mobile apps. Firebase Hosting provides a generous free plan that includes features like SSL, CDN support, and seamless integration with Firebase's other services.

### 6. **AWS Free Tier** (Link: [AWS Free Tier](https://aws.amazon.com/free/)):

   Amazon Web Services (AWS) offers a free tier that provides limited, but still substantial, resources for deploying and hosting web applications. While it's not entirely free for every service, the AWS Free Tier includes options like Amazon S3 for static websites, AWS Lambda for serverless functions, and Amazon Amplify for mobile app backends.

---

[Bitesapp Developers](https://bitesapp.co/?utm_source=devto)
Azure Open AI in VNet
Tags: azure, openai, security
Published: 2023-10-12 00:53:47

GPT models are hosted in multiple service vendor at the moment, and Microsoft Azure is one of them.

Even though the models themselves are the same, there are many differences including:

- cost
- functionalities
- type of models and versions
- geo location
- security
- support
- etc.

One of the most important aspects when we use it in an Enterprise Environment is, of course, security.

By using Azure network security features with Azure Open AI, customers can consume the Open AI service from and within the VNet, therefore no information is flowing in public.

## Sample Deployment

Azure Sample repo provides a sample bicep files to deploy Azure Open AI into VNet environment.

[GitHub: openai-enterprise-iac](https://github.com/Azure-Samples/openai-enterprise-iac)

The key features the bicep uses are:

- VNet
- VNet integration for Web App
- Private Endpoint for Azure Open AI
- Private Endpoint for Cognitive Search
- Private DNS Zone

By using these features, all the outbound traffic from the Web App only routed inside the VNet and all the names are resolved into private IP addresses. Open AI and Cognitive Search shut down the public IP address, thus there is not public interface endpoint available anymore.

## Deploy

The bicep file will deploy following Azure Resources.


![architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hyitrdt8eeihpjo8g6a.png)

Let's deploy and confirm how it works. I create a resource group in East US region for my own test.

```shell
git clone https://github.com/Azure-Samples/openai-enterprise-iac
cd openai-enterprise-iac
az group create -n openaitest -l eastus
az deployment group create -g openaitest -f .\infra\main.bicep
```
Once I run the commend above, I see the deployment started.

Wait until the deployment completes.

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

## Test

Let's see if the deployment was succeeded.

### Azure Open AI

Let's try public access first.

I could create a deployment without any issue. But when I try from the Chat playground in my Azure Portal, I see the following error.

![Chat failed with an error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fize2esjy7q1zoad5xum.png)

How about access via the Web API?

From an advanced tool of the App Service, I login to Bash session, and first I ping the service URL.

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

I see the private IP address assigned to the Private Endpoint is returend.

Then I use curl command to send request to the endpoint.
[zsh] alias is fine, but use 'abbr'
Tags: beginners, productivity
Published: 2023-10-12 01:10:38

## Introduction

Hi everyone, do you use alias? it's very convenient, isn't it? Today, I'll introduce you to use 'abbr'.

## Summary
* abbr is almost like alias, but it extends commands.
* abbr is implemented in Fish shell
* if you use Zsh, you can install it from  https://github.com/olets/zsh-abbr

## What's 'abbr'?
This is similar to an alias but extends commands when they are executed. the name 'abbr' come from 'abbreviation'. this function is implemented in Fish shell.

For example, I think that alias is often used with git commands

like this:
```
alias g='git'
```

abbr can do the same thing.

```
abbr -a -g g git
```

However, the behavior is different from that of alias.
Try typing 'g' and press enter; in this case, the Git command is executed, and the command is logged as 'git,' not 'g'.

like this (this is the result of pressing 'g'):
```
~ via 🐹 v1.21.3 via  v20.8.0
❯ git
usage: git [-v | --version] [-h | --help] [-C <path>] [-c <name>=<value>]
           [--exec-path[=<path>]] [--html-path] [--man-path] [--info-path]
           [-p | --paginate | -P | --no-pager] [--no-replace-objects] [--bare]
           [--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>]
           [--config-env=<name>=<envvar>] <command> [<args>]
```

logged like this:
```
~ via 🐹 v1.21.3 via  v20.8.0
❯ history | tail -n 1
 1479  git
```

of course, it can be used with commands that have subcommands or arguments, like 'git status'.

As we have seen so far, abbr has three advantages:

* less typing (similar to alias!)
* communicates exact commands when you share your screen
* properly recognizes commands you type

## What's zsh-abbr?

thanks to this extension, zsh is able to use abbr
https://github.com/olets/zsh-abbr

## Install zsh-abbr

Homebrew is the easiest way to install 'zsh-abbr'
```
brew install olets/tap/zsh-abbr
```

## Let's use abbr

"Let's configure 'abbr' by adding the settings to ~/.zshrc.

These are the example settings I use:

```
abbr -S l='exa -F'
abbr -S ll='exa -Fl'
abbr -S la='exa -Fa'
abbr -S lla='exa -Fla'
abbr -S v='vim'
abbr -S g='git'
abbr -S b='bat'
abbr -S venv='source venv/bin/activate'
abbr -S ra='rails'
abbr -S gr='grep'
abbr -S k='kubectl'
abbr -S t='tmux'

# docker
abbr -S d='docker'
abbr -S dps='docker container ls'
abbr -S dimgs='docker image ls'
abbr -S drun='docker container run'
abbr -S dcd='docker compose -d'

# git
abbr -S ga='git add'
abbr -S gacm='git add -A && git commit'
abbr -S gst='git status'
abbr -S gbr='git branch'
abbr -S gcm='git commit'
abbr -S gco='git checkout'
abbr -S gdf='git diff'
abbr -S gl='git log'
abbr -S ggr='git grep'
abbr -S gul='git pull'
abbr -S gsw='git switch'
abbr -S gush='git push'
abbr -S gget='ghq get'
```

## Reference

https://girigiribauer.com/tech/20200420/
https://fishshell.com/docs/current/cmds/abbr.html
Clean Code Cookbook is Out
Tags: programming, books, javascript, cleancode
Published: 2023-10-12 01:00:36

*It is finally here!!!*

> TL;DR: Go get the book!

I began crafting the initial draft of *Clean Code Cookbook* during the COVID-19 lockdown.

A couple of years later, Melissa Duffield and Louise Corrigan contacted me and encouraged to write a book about clean code.

The journey was incredibly smooth, thanks to the invaluable assistance of Sara Hunter and the entire O'Reilly team.

Now, I am happy to have it on my shelf and share it with you.
You can find it at the following links:

# O'Reilly: 

[O'Reilly](https://learning.oreilly.com/library/view/clean-code-cookbook/9781098144715/)

# Amazon: 

[Amazon](https://amzn.to/44s1XdO)

The book covers many software desing recipes useful for small and large scale systems.

The target audience is any programmer willing to write clean, robust and mainatainable code.

Let me know what you think.
A React application made for hobbists/enthusiasts of playing piano
Tags: pianokeyboard, apps
Published: 2023-10-28 15:12:46

---
title: A React application made for hobbists/enthusiasts of playing piano
published: true
date: 2023-10-12 00:26:00 UTC
tags: PianoKeyboard,Apps
canonical_url: https://reactjsexample.com/a-react-application-made-for-hobbists-enthusiasts-of-playing-piano/
---

# React Piano Player/Visualizer/Analyzer
 ![A React application made for hobbists/enthusiasts of playing piano](https://reactjsexample.com/content/images/2023/10/Code_2023-10_19-21-11.jpg)

PianoBlocksApp is a web application made for hobbists/enthusiasts of playing piano. This app provides a very simple way to visualize a persons piano playing, by reading his midi File.

**Link to latest version [https://react-piano-player-63qjc9wca-tzmcion.vercel.app/](https://react-piano-player-63qjc9wca-tzmcion.vercel.app/)**

###### Github version is not always up-to-date.

### Last Update 5/05/2023

## Description

### What does this app do ?

I always wanted to create piano Tutorials like big youtubers, but I didn’t want to pay for professional software, so I created it myself :). This app makes it super easy to create piano tutorials, it delivers some basic effects, basic sound, and if you can’t record a midi file with softwares, you can record it there. Also with recording app gives you basic (super basic) sheet music. On top of that, app gives you plenty of ways to customize effects, colors, spped of playing. With this app you can learn and have fun.

### Technologies used

- **React**
- **Typescript**
- **HTML/CSS**
- **Sass (scss)**
- **Redux (a little)**
- **NPM library**

### How does the app work ?

![A React application made for hobbists/enthusiasts of playing piano](https://user-images.githubusercontent.com/64361206/156896648-36977f49-34ac-4b7c-ade3-990c13f6612d.JPG)

1. **User input** User Drags/chooses Midi file. He can configure options before that, or he can play demo file, then the Midi file is automatically imported 
2. **Website proceses it** Website saves the file to localstorage and it procesess it. It uses a “/helpers/getNoteEventsJSON.ts” file (function) to remove all unnecesarry events. 
3. **Website creates canvas animation** Canvas animation is created, frame rate is 60fps or 144 fps (depends on the screen type). 

## Installation

Just like every other github repo

```
git init
git pull https://github.com/tzmcion/ReactPianoPlayer
npm i 

```

Or git clone

```
git clone https://github.com/tzmcion/ReactPianoPlayer

```

## Note !

- In Official version you can find Donation page, but I deleted it here
- Some dependencies in `package.lock` are not used
- Please report every issue and bug
- If you’d like to work on this app, I will explain how every file works to you with pleasure, just write 🙂

## Resources

- **soundfont-player**
- **midi-parser-js**
- **react-youtube**
- **rgb-hex**
- **sass**

## License

**MIT** license

## GitHub

[View Github](https://github.com/luckydevn16/react-piano-player?ref=reactjsexample.com)
VS Code Still Doesn't Have Vertical Tabs??
Tags: vscode
Published: 2023-10-12 00:17:35

>I recently discovered one of my colleagues was a vertical tab zealot, running vertical tab layouts on Chrome, Visual Studio, Windows, virtually everything. It was actually kind of neat, so I started reconfiguring my layouts to emulate it, only to find out... VS Code still doesn't support it? In 2023??

I remember trying to move over to vertical tab layouts a few years ago, only to find VS Code had no support for it. And naturally, I wouldn't want to obligate my already feeble mind into constantly context-switching between horizontal and vertical tab layouts, so I just decided against it entirely.

But in my latest effort I had absolutely no doubt in my mind that VS Code had added support by now. After all, VS Code is great and they've added support for practically every popular feature request!

## Why Is This Issue Still Open?

![](https://cdn.shaneduffy.io/blog/vertical-tab-github-issue.png)

[This issue](https://github.com/microsoft/vscode/issues/108264) that was created in 2020 has almost 400 upvotes and has had active discussion since it was opened.

I remember seeing it shortly after it was posted. And I remember seeing another issue opened for this in 2017. In fact, it might be one of the 3 other related (closed as duplicate) issues listed in *this* issue. What the heck Microsoft?

The problem is I'd already configured my Visual Studio and Chrome to be vertical tabs. So I looked into some alternatives.

## The Most Viable Alternative

Thankfully after about 5 seconds of Googling, I came upon [Dominik Weber's blog post](https://domysee.com/blogposts/vscode-vertical-tabs), showing the closest thing to vertical tabs you're gonna get:

![](https://cdn.shaneduffy.io/blog/vs-code-vertical-tab.png)

This just takes advantage of the secondary sidebar (toggled via `View > Appearance > Secondary Sidebar`) and the `Open Editors` panel.

Then you can just hide the standard horizontal tabs with the `workbench.editor.showTabs` setting.

It's not a bad workaround, and it should be sufficient to appease my wanting. But it isn't nearly as customizable as Visual Studio's vertical tabs, where you're able to sort items in alphabetical order or group items by their project, instead only allowing us to group by code panels.

/rant
Sloan's Inbox: How to stand out as a beginner dev?
Tags: discuss, codenewbie, beginner, help
Published: 2023-10-12 00:00:00

---
published_at : 2023-10-12 00:00 +0000
---
Hi there! Sloan, DEV Moderator and resident mascot, back with another question submitted by a DEV community member. 🦥

For those unfamiliar with the series, this is another installment of Sloan's Inbox. You all send in your questions, I ask them on your behalf anonymously, and the community leaves comments to offer advice. Whether it's career development, office politics, industry trends, or improving technical skills, we cover all sorts of topics here. If you want to send in a question or talking point to be shared anonymously via Sloan, that'd be great; just scroll down to the bottom of the post for details on how.

Let's see what we got...

### Today's question is:

> I'm a beginner dev in what feels like a sea of beginner devs. How can I make myself stand out from the crowd? What would you recommend I do to better my chances of success and being hired? 
>

Share your thoughts and let's help a fellow DEV member out! Remember to keep kind and stay classy. 💚

---

*Want to submit a question for discussion or ask for advice? [Visit Sloan's Inbox](https://docs.google.com/forms/d/e/1FAIpQLSc6wgzJ1hh2OR4WsWlJN9WHUJ8jV4dFkRDF2TUP32urHSAsQg/viewform)! You can choose to remain anonymous.*
Which is Better: In-Person or Remote Coding Interviews?
Tags: discuss, codenewbie, beginner
Published: 2023-10-12 00:00:00

---
published_at : 2023-10-12 00:00 +0000
---
In today's tech-driven world, the format of coding interviews has become a hot topic. Should companies stick with traditional in-person interviews for assessing technical talent, or is the future remote? Join the discussion to share your thoughts and experiences on what truly works best in identifying top coding talent.

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more discussions and online camaraderie!

*{% embed* https://dev.to/codenewbieteam *%}*
How Do You Sleep (Better)?
Tags: discuss
Published: 2023-10-12 00:00:00

---
published_at : 2023-10-12 00:00 +0000
---
How does your sleep affect your work and demeanor? Share your nightly sleep hours and the difference quality sleep makes in your work performance and mood the following day.

Follow the DEVteam for more discussions and online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
Time Complexity
Tags: datastructures
Published: 2023-10-11 23:57:04

Time Complexity
So, I'm going to be explaining time complexity to the best of my knowledge.
Time complexity is simply the amount of time it takes to run a particular code, and I'm going to be explaining which and which takes time and which does not. Now, by default, JavaScript provides us with two structures, which are Arrays([]), and Object({}).

Now, the amount of time it takes to load a particular code in an array may take longer depending on the way you choose to go about it. For example, we want to add a new element to an array, you can either use the .push() method to do so, or the .unshift() method. While push adds new element from the back, unshift add from the front. Using unshift will take time to execute, compared to push, because while unshift is adding from the front, it changes and iterates through the array to give each and every one of them an index position. And push just adds from the back and not have to go through that process.

Now, for Objects, there are really nothing that could cause slow execution of task, as we can easily access anything in it without having to iterate through it like an array does.
Well, then… [Bug Hunter #2]
Tags: watercooler
Published: 2023-10-11 23:13:27

I found another one! So, I want a HomePod (basically Apple’s Alexa). I went to the HomePod Mini page on Apple’s site and this came up:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tokyqktsenqq0wxaj4sk.jpeg)
The maddening part is this is after 1m of waiting! I reloaded the page, same thing. Waited for it to render, nothing. So Apple, I found a bug! Thanks for reading Episode 2 of Bug Hunter, and I’ll catch you in the next one. Also, please put any bugs you find in the comments, I will do “Featured Bugs” episodes with bugs that readers found! Thanks again. Peace.
Day 830 : Take It EZ
Tags: hiphop, code, coding, lifelongdev
Published: 2023-10-11 22:48:44

_liner notes_:
- Professional : Got up pretty early to catch a coworker practice their upcoming talk. I always like to see other folks' presentation style. Went to sleep afterwards and got back up to start my day. Had another meeting with some folks to see their application that we will be getting private beta access to try out. Worked on updating a demo application to use a new SDK. Had a conversation about a feature of the new Client SDK with the engineering team to iron out some details. Finished the day reaching out to meetup organizers to see if there are any events happening in the places I'll be travelling to.

- Personal : Last night, I went through some tracks for the radio show. Spent the rest of the night fixing a couple of side projects. One was https://whatsthat.in which is a currency converter. I noticed that it stopped working during my last trip. Turns out that the API I was using changed and is now paid. I found a free one, but had to do a little more math to get the same result. I changed the way I deployed the site to Deno Deploy by using GitHub actions. Now I can just push my changes to the repo and it will build and deploy the updates I make. Previously, I was doing it from my local machine with a CLI command. Thing is that I forgot how to do it. I think I needed a token or something because it wasn't working. The second one was my travel site https://dwane.in . I noticed that some of the map tiles weren't loading and had a message that, again, the service I was using was bought by another company and now they are charging for it. I found a similar free map with a similar style and replaced it. Thing was that my project was using such an old version of Astro that it wouldn't even run anymore. So I worked on updating and rewriting files to get things working. After some time, I finally got it working. Felt pretty accomplished, and tired, but accomplished.

![The Oregon Coast, USA at what looks at low tide because there's pools of water on the beach with some cloud covered mountains in the distance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ys68nr9mkej4dacv7av2.jpg)

Going to go through more tracks and start experimenting with the layout for my new side project. If there's time, maybe watch some anime. Looking to keep it easy but also productive.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube C8aTvSbI4Ds %}