teleren/devto huggingface dataset:
Hello W—
Tags: beginners, programming, codenewbie
Published: 2022-11-05 18:21:50

I never liked that phrase, those two inescapable words every new programmer is instructed to use in their first `console.log`, for their first function's return value, as the content of their first HTML element, or what have you.

My earliest encounter with the immortal phrase came from my cousin, a childhood friend, always (and still) much more savvy and capable with tech than myself. I don't recall exactly when I first beheld the words, but presumably I saw them in some bit of programming my cousin showed me, probably when we were in middle school. Something about it always struck me as silly or frivolous in a way I found off-putting—though I never could put my finger on exactly why.

Now, many years later, _I_ am the new programmer, typing those words myself as I begin to learn JavaScript, React, and other things in rapid succession at the Flatiron School. As I do, I can't help but feel that phrase take on new meaning for me. I'm acquiring new skills to take a new tack professionally, and in so doing I will re-introduce myself as something of a new person. Despite my lingering dislike for the phrase, I am indeed saying a new hello to the world.

Or at least here I am saying hello to you.

For the record, though, any test `console.log` of mine will always say 'oink'.
Testing the tool
Tags: testing, opensource, javascript, jest
Published: 2022-11-05 17:20:18

## Overview

For my [SSG ](https://github.com/mnosov622/simple-ssg1)tool I used [Jest](https://jestjs.io/), because it was made for JavaScript language(language my tool is using) and pretty straightforward to use.

## Set up 

1) To start using jest simply run:

```
npm install --save-dev jest
```

2) Create JavaScript file(e.g. sum.js) and add the following code:

```
function sum(a, b) {
  return a + b;
}
module.exports = sum;
```

3) Create testing file(sum.test.js) and add the following code:

```
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});
```


4) Add the following to your package.json file:

```
"scripts": {
    "test": "jest"
  }
```

6) Run 

```
npm test
```


### Testing the tool

It was quite fun to test the tool for unpredictable behavior by passing invalid parameters to the function and checking the output.

Testing requires a lot of code, we need to consider covering most of testing scenarios to make sure that application doesn't crash.

### Testing is crucial

I never worked with testing libraries before, but it's very important for any application.

People say, that it could be never guaranteed that your application will be bug free, but we can reduce amount of bugs by having significant amount of test cases. 

To make sure we are testing all lines of code, we can use **jest coverage**. It makes possible to spot untested paths in our code.

### Sum up

Testing application requires a lot of time, but it's required to provide high quality software. For future projects I will consider writing test.

Lastly, it's important not to overuse jest: run tests for your tests :)

Thank you for reading!
My Arch linux desktop configuration
Tags: linux, qtile, python, haskell
Published: 2022-11-05 17:18:08

Hi, want to share with you some configuration of my ***Arch Linux desktop***

## So here are [Qtile](http://www.qtile.org/) configurations
> Qtile A full-featured, hackable tiling window manager written and configured in Python

1.Basic Qtile config with some unicode decoration for powerline effect

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

2. This configuration uses [Qtile extra package](https://github.com/elParaguayo/qtile-extras) and one of my favourite picom [fork](https://github.com/jonaburg/picom) for minimalistic look with rounded-corners 

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

## And here is my [Xmonad](https://xmonad.org/) configuration
> A dynamically tiling X11 window manager that is written and configured in Haskell.

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

**finally** if you are a new user and have an experience with some python stuff then I highly recommend to use some basic Qtile configuration, I will share my dotfiles when documentation will be ready **and** if you dont have any experience with WM(window manager)s, then I highly recommend you to not install Xmonad because it's written in haskell, and for configuration you have to know haskell, and haskell is not an easy and user friendly language for start, so be carefull

stay tuned for dotfiles:)
tRPC: Move Fast and Break Nothing – useReactNYC
Published: 2022-11-05 17:03:38

TypeScript is extremely popular nowadays but making sure the front end and back end speak the same schema is still a challenge. tRPC tries to help with that. In this talk, we're going to explore what tRPC is, how it compares with other solutions, and dive deep into a demo application showcasing its power to help keep types in sync on your entire application.


---

_Recorded at a useReactNYC meetup on August 2022._
Javascript Ordinals: Adding st, nd, rd and th suffixes to a number
Published: 2022-11-05 16:52:17

In Javascript it's usually considered best practice to work with absolute numbers, as `number` is a defined type. However, when expressing these numbers in user interfaces, it's more likely we'll want to express them differently. For example, consider I have the following list of numbers. I want to still store them as numbers, but then add `nd`, `st`, `rd`, or `th` when showing them to the user:
```javascript
let x = [ 1, 13, 22, 100, 1204, 133 ];
```

I could of course do this manually, and store each number of a specific prefix, or define custom rules, but this gets a little messy - and what if I need to support multiple languages. Although in english we write `3rd` to represent `3rd` place, this may not be the same in other languages.

Fortunately there is a solution in Javascript - the use of `Intl.PluralRules`. This will define plural rules based on locale:
```javascript
let plurals = Intl.PluralRules();
let x = plurals.select(0) // Returns "other"
let y = plurals.select(1) // Returns "one"
let z = plurals.select(2) // Returns "other"
```

By default, `PluralRules` is configured as `cardinal`, which means anything above 1 is considered plural. Above, as you can see, `PluralRules` lets us differentiate whether a number is plural or not. 

Things get more interesting when we set it to `ordinal`, which takes into consideration the ways we use numbers. Here, it will tell us language specific rules on how to handle each number - so we can do things like `2nd`, `3rd`, and `4th`
```javascript
const plurals = new Intl.PluralRules('en-US', { type: 'ordinal' });
let a = plurals.select(0); // Returns "other"
let b = plurals.select(1); // Returns "one"
let c = plurals.select(2); // Returns "two"
let d = plurals.select(3); // Returns "few"
let e = plurals.select(4); // Returns "other"
```

Now we can customize our outputs based on locale, so we don't run into weird issues. Here, we're using `en-US`, but any other valid locale will also work. To map our numbers to `1st`, `2nd`, `3rd`, etc, we only have to create a mapping like this:

```javascript
let x = [ 1, 13, 22, 100, 1204, 133 ];

const plurals = new Intl.PluralRules('en-US', { type: 'ordinal' });

let pluralMapping = {
    "one" : "st",
    "two" : "nd",
    "few" : "rd",
    "other" : "th"
}

let y = [];
x.forEach((item) => {
    let getPlural = plurals.select(item);
    let pluralEnding = pluralMapping[getPlural]
    y.push(`${item}${pluralEnding}`)
})

console.log(y); // ['1st', '13th', '22nd', '100th', '1204th', '133rd']
```
Passing Credentials to Deployed Streamlit Apps using Streamlit Secrets
Published: 2022-11-05 16:32:52

Often as programmers, we get to deal with credentials, for instance, when we need to connect to a database or ingest data from sources besides our local computers. Hence, it becomes imperative to find a way to securely pass the credentials such that they are not exposed in our code scripts.

In this short article, I will explain how I used #StreamlitSecrets to resolve a problem with passing credentials to a #MachineLearning system I deployed to the web using #Streamlit. Before fixing the problem, the deployed app worked fine on my local computer while testing it because the credentials were passed to the ingestion pipeline using an environment variable file (.env); however, upon deploying to the web, the system failed to work due to unavailability of the credentials. Some steps in solving this problem include removing the environment variable file from **gitignore**and creating a Python (.py) file; since the programming language I was working with was Python. Upon taking these steps, I could not push the local repository to the remote repository as **pre-commit hook** detected that credentials had been exposed and did not allow the push. Hence, I finally had to use the #StreamlitSecrets file (secrets.toml) to pass the credentials while updating the credentials on the app settings section of the deployed streamlit app. The steps taken to achieve this are listed below:

1. Create the directory **.streamlit/**
2. Create the secret file **secrets.toml**
3. In the created secret file, type in the credentials in the below format:

```
[db_credentials]
user = 'someuser'
password = 'somepassword'
host = 'somehost'
database = 'somedatabase'
```

PS: You can include other credentials as needed.

4. In the python file, pass in the credentials with the following lines of code:

```
host=st.secrets.db_credentials.host,
user=st.secrets.db_credentials.user,
password=st.secrets.db_credentials.password,
db=st.secrets.db_credentials.database
```
 
5. Navigate to the url link of the deployed app, open settings, and type in the provided credentials in **.streamlit/secrets.toml**


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

The above steps ensure that your streamlit app works seamlessly on your local computer and the Streamlit deployed version.

If you find the article helpful, kindly click the like button and comment.

You can follow me on [LinkedIn](https://www.linkedin.com/in/muhammad-abiodun-sulaiman) and [Twitter](https://www.twitter.com/prince_Analyst) for more updates.
How To Build a Quiz App With HTML CSS and JavaScript
Tags: html, css, javascript, webdev
Published: 2022-11-05 16:00:22

In this article, we will Build a Quiz App With HTML CSS and JavaScript. This will be a simple quiz application where we will have a button to start quiz, then after we will have information and rules about quiz, After that we will add questions, and lastly we will result page. This quiz also contains a timer, so if the timer ran out then the answer will be considered as wrong.
[Read More](https://rocoderes.com/how-to-build-a-quiz-app-with-html-css-and-javascript/)
The Best Heroku Alternative for Your Application Development
Tags: heroku, herokualternative
Published: 2022-11-05 09:44:36

Heroku has been one of the most popular platforms as a service or PaaS options available out there. It was a revolution back in the day because it gave developers the option to develop an application under a single roof. It helped them in making things easier which helped them in creating better and much more effective mobile and web applications. It has been the stepping stone for PaaS but in recent times, its appeal to it has changed. Due to the stagnant behaviour and lack of dynamic changes with the technology, many people are looking for an alternative to Heroku.

There are so many [valuable Heroku alternatives](https://www.back4app.com/) that are available out there. They have got much more than what Heroku offered to its users. Finding the right one is going to help you in the better development of your mobile and web applications. All you need to understand is the one for you which is going to be the best choice.

## Some Of The Alternatives Are As Follows:

**1.Back4App**

It is one of the most popular and effective Heroku alternatives available out there. It is an open-source platform where developers will get the opportunity to develop freely which Heroku hasn’t been able to offer. It has got a free tier as well and for different APIs, they are going to charge a minimal amount to you. 

**2.Google App Engine**

It has been the go-to option for a lot of developers out there. Being offered by Google itself, it is an open-source platform that is responsible for a lot of application development out there. The best part about it is that you can handle all the google cloud services under one roof.

These are two of the most popular options that are available out there. There are other likes Parse, Elastic Beanstalk by AWS, etc. that can prove to be the most suitable PaaS for you. All you need to do is understand the need that you have and the kind of ease you are looking for. Once you can do that, everything else is going to be much easier and it is going to give you the best alternative that you can find to Heroku for your application development processes.
Is it necessary to hit the server every time I need lookup data ?!
Tags: webdev, angular, react, javascript
Published: 2022-11-05 15:40:41

## Is it important to hit the server anytime you need lookup data?

• We were facing an issue that we have many of collapsed tabs and every collapse has its own lookup data and we handle to fetch this data by open each collapse and here the actual problem as with every single click to open the collapsed tab we are going to hit the server.



## Example with issue:


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

• Here we have the service in which we call GetAllCaseCategory() and it’ll hit the server by default.


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

• Here we opened the collapsed tab three times which lead to call this Case Categories three time from the server and certainly it’ll effect on the performance.


##How can we solve this issue?
• We can solve this issue by taking a copy of this lookup data inside my project so once I had it I do not need to hit the server anymore.

• We can manage it using shareReply() operator which imported from Rxjs library, Then it’ll give this data as observable to any component need it.

• To use shareReply() with the observable we need to use it inside pipe() chaining operator.

## Example after solve issue:

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

• Here we defined GetAllCaseCategoryHolded of observable type to contain the returned data from the server and there is a condition once I get data no more hitting the server and I am going to share it through the application, so I can subscribe to this data through any component call it.


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

• Here we can see that we hit the server just one time even if we opened the collapsed tab several time to get the data.

## Additional:
• We can also use BehaviorSubject() to carry the desired data as it returned an observable data which I can subscribe.

• BehaviorSubject([ ]) must have an initial value as we see it’s an empty for first time and then after subscription we pass the data to it.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skyw6ngy2ffwaunfefqw.png)
Basic Git Command
Published: 2022-11-05 15:40:36


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

This essential Git commands you must know if you are a beginner in web dev….

Let’s start.


## **1. git config [options]**


👉 Sets the username and email address for commits.


git config –global user.name “jag”


git config –global user.email youremail@gmail.com



## 2. git init 

👉 Initialize repository as git repository

git init




## 3. git clone [url]


👉 Clone repository from any server like Github Gitlab


git clone https://github.com/yourusername/hello.git



## 4. git status


👉 Check the current status of working tree 


git status




## 5. git add [filename(s)]

👉Puts the unstage files to staging area

git add index.js

git add .




 

## 6. git commit –m [message]

👉 Records changes to the git repository

git commit –m “make it better”




git commit –a // commit all files without message




## 7. git remote [options] [variables] [url]

👉Connect your local repo to remote over server

git remote add

origin https://github.com/yourusername/repo.git



## 8. git push [options] [variables] [branch]

👉Push the contents of your local repo to the remote repo

git push –u origin main






## 9. git pull [variables] [branch] [url]


👉 Fetch and integrate the content of the remote repo to local repo..


git pull origin main


git pull https://github.com/username/repo



## 10. git checkout [branch]

👉 Move from one branch to another

git checkout roj




## 11. git checkout [options] [branch]

👉 Create specific branch and simultaneously switches to it

git checkout –b jagroj




## 12. git branch [options] [branch]

👉 Performs operations over the specified branch

git branch –d jagroj
What I've been reading (week 44, 2022)
Tags: watercooler, news, discuss
Published: 2022-11-05 08:00:15

I [keep a record](https://wolstenhol.me/#reading) of articles, blog posts, videos etc that I've enjoyed this week. Here's a sample of five of them:

## [Mixing It Up: Remix Joins Shopify to Push the Web Forward](https://shopify.engineering/remix-joins-shopify)

Didn't see this one coming! This is really interesting, good news for Remix's longevity, and interesting implications for the level of adoption of React Server Components vs Remix's approach of route-level data loading on the server.

## [Don't remove a fence until you know why it was put up in the first place](https://rachsmith.com/dont-remove-a-fence)

TIL about 'Chesterton’s Fence'

## [Open Questions](https://www.gwern.net/Questions)

A list of questions with links to related reading/research. More about bogeys, cats loving human earwax (but dogs not), and furries being "the Quakers of fetishists" than I expected to be reading on a Monday night. See also https://patrickcollison.com/questions

## [iA Presenter](https://ia.net/presenter)

This looks really cool - write slides in Markdown and then get them automatically designed for you (with responsive layouts and graphics, tables etc). I like how the speaker view becomes a sort of teleprompter-like display.

## [Holograms, light-leaks and how to build CSS-only shaders](https://robbowen.digital/wrote-about/css-blend-mode-shaders)

You think, 'oh, I'm a creative person that understands and likes playing with CSS' – and then you see something like this…

---

I also [tweet these as I find them (@philw_)](https://twitter.com/philw_) and post them on my personal site at https://wolstenhol.me/#reading.

What were your favourites? Was there anything you found useful?

{% user philw_ %}
React Native - Android build failures
Tags: reactnative, android, javascript, react
Published: 2022-11-05 15:27:46

Since React-Native is  becoming one of the most popular framework for writing mobile applications, The development team is making a lot of changes and improvements.

Lately `v0.70` came up, but they are working hard to prepare new version `v0.71.0-rc0`.

This caused some issues building your React-Native android application

I will leave a link to the issue that is raised and helped me build my application and continue to work.

Link to the issue - [Issue 36210](https://github.com/facebook/react-native/issues/35210)

Check the link above!
Como abrir o Visual Studio Code (VSCode) dentro do GitHub
Tags: braziliandevs, beginners, github, tutorial
Published: 2022-11-05 15:16:36

Todo dev já precisou em algum momento editar um arquivo dentro do GitHub e se deparou com essa tela de edição padrão do próprio GitHub:

![Tela de edição padrão do GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3kximxr5ck48anftm7b.png)

No primeiro momento ela parece uma tela "OK" para fazermos uma edição rápida, mas quando precisamos pesquisar mais coisas dentro do repositório, essa tela não nos ajuda muito e é por isso que vou mostrar como abrir o Visual Studio Code(VSCode) direto do GitHub.

É bem simples, basta apertar a tecla `.` **(ponto)** do seu teclado e voilá, vai abrir magicamente um VSCode direto do seu navegador e dentro do seu repositório com quase todas as funcionalidades que o VSCode tem.

![Tela de carregamento do VSCode dentro do navegador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3fkli1ddemzshin31m6.png)

![VSCode aberto dentro do navegador mostrando o repositório](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oaiou6k7vvaufog1rsgh.png)

Agora você consegue fazer quantas pesquisas quiser, mexer em quantos arquivos forem necessários e também vai poder fazer commits, instalar extensões, mudar o tema, entre outras várias funcionalidades.

## Outras maneiras de abrir o VSCode direto do GitHub

Outras maneiras de abrir qualquer repo do GitHub no `github.dev` (VSCode do GitHub) são:

- Alterando a URL de `github.com` para `github.dev`
- Apertando a tecla `.` dentro de algum repositório
- Ao abrir um arquivo dentro de algum repositório, selecione o menu suspenso ▼ e clique em abrir com (open with) `github.dev`.
  ![Print da tela do github que mostra o menu suspenso e o botão de abrir com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jinx6wgkatgmocwaubzb.png)

Essa foi a dica de hoje, espero ter ajudado, tmj! 😎

_Originalmente postado em [https://thayto.com](https://thayto.com/blog/como-abrir-o-vscode-direto-do-github) dia 5 de novembro de 2022._
How to send Multiple Messages on whatsapp through Python ?
Tags: python, coding, whatsapp
Published: 2022-11-05 15:08:47

Write this command on Terminal and Press Enter:

``` python
pip install pyautogui
```

**Python Code**

``` python
import pyautogui
import time
time.sleep(3)

count = 0
while(count <= 100):
    pyautogui.typewrite('hi')
    pyautogui.press('enter')
    count += 1

```
Here Messages send on those whatsapp group where your mouse cursor is available. 

**Output**

![Output Imag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpggwqhmmavb5i1b8u36.png)

Thank You.
You can follow us on:
[Youtube ](https://www.youtube.com/c/ULTIMATEPROGRAMMING)
[Instagram](https://www.instagram.com/full_stack_web_developer1/)
JavaScript Engine, Heap, Call Stack, Web APIs, Event loop and Callback queue
Published: 2022-11-05 15:06:23

![Javascript workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea86sabu8adpx3gfyjv1.png)

A **Javascript engine** is a program that executes JavaScript code, a popular one is Google V8 engine.

It is composed by two main components the heap and callstack.
**The heap** is used for memory allocation of variables and objects, at the top of the current scope, a process called hoisting.

During the phase of function execution, an execution context is created, which includes: 
- a global object window (in case of the browser) 
- a special object called 'this' and 
- a ref to the outer environement.

A **callstack** is a list that tracks functions that have been called during the execution of the code.
JavaScript it is single threaded and it has one CallStack.
If a function is called is pushed at the top of the call stack list, and when it is executed, it's removed from the list.

Asynchronous tasks are placed in a so called **callback queue** and executed only when the call stack is empty.
The job of the **event loop** is to check if the call stack is empty and in this case it executes tasks from the callback queue.
**Web API** calls are added from callstack to the web api container until an action is triggered (e.g. DOM, ajax call, button click).
Once an action is triggered, a callback function is added to the callback queue, and executed when the call stack is empty.

[interactive demo](http://latentflip.com/loupe)