teleren/devto huggingface dataset:
How to create a percentage calculator using JavaScript
Tags: javascript, tutorial
Published: 2022-02-18 00:55:39

In this tutorial we’ll create 3 different types percentage calculators using JavaScript.

- X is what % of Y?
- What is X% of Y?
- What is the % increase or decrease between X & Y?

Each calculator has almost identical HTML markup and the only difference in the JavaScript is the maths used to calculate the solution. If you just looking for a copy and paste solution a working HTML file with the 3 calculators can be downloaded from [here](https://gist.github.com/w3collective/8b472f79af15ac26ad57567aa7477a68).

### 1 – X is what % of Y?

Example – 50 is 20% of 250 || (50 / 250) * 100 = 20%

```html
<form id="calc1">  
  <input id="calc1-num-x" type="number" /> is what percent of
  <input id="calc1-num-y" type="number" /> ?
  <input id="calc1-submit" type="submit" value="Calculate" />
  <input id="calc1-solution" type="number" readonly="readonly" />
</form>
```

```javascript
document.getElementById("calc1-submit")
  .addEventListener("click", function (e) {
    e.preventDefault();
    const numX = document.getElementById("calc1-num-x").value;
    const numY = document.getElementById("calc1-num-y").value;
    const percentage = (numX / numY) * 100;
    document.getElementById("calc1-solution").value = percentage;
});
```

### 2 – What is X% of Y?

Example – 50% of 250 = 125 || (50 / 100) * 250 = 125

```html
<form id="calc2">
  What is <input id="calc2-num-x" type="number" /> % of
  <input id="calc2-num-y" type="number" /> ?
  <input id="calc2-submit" type="submit" value="Calculate" />
  <input id="calc2-solution" type="number" readonly="readonly" />
</form>  
```
```javascript
document.getElementById("calc2-submit")
  .addEventListener("click", function (e) {
    e.preventDefault();
    const numX = document.getElementById("calc2-num-x").value;
    const numY = document.getElementById("calc2-num-y").value;
    const percentage = (numX / 100) * numY;
    document.getElementById("calc2-solution").value = percentage;
});
```

### 3 – What is the % increase or decrease between X & Y?

Example – 50 to 75 = 50% || (75 / 50) / 50 * 100 = 50%

```html
<form id="calc3">
  What is the percentage increase or decrease from
  <input id="calc3-num-x" type="number" /> to
  <input id="calc3-num-y" type="number" /> ?
  <input id="calc3-submit" type="submit" value="Calculate" />
  <input id="calc3-solution" type="number" readonly="readonly" />
</form>
```
```javascript
document.getElementById("calc3-submit")
  .addEventListener("click", function (e) {
    e.preventDefault();
    const numX = document.getElementById("calc3-num-x").value;
    const numY = document.getElementById("calc3-num-y").value;
    const percentage = (numY - numX) / numX * 100;
    document.getElementById("calc3-solution").value = percentage;
});
```

For each of the calculators we’ve added a `click` event listener to the submit buttons. When these buttons are clicked the 2 numbers entered into the form are saved as variables. We then perform the percentage calculation on these numbers and output the value into the solution input field.
Day 533 : Wild
Tags: hiphop, code, coding, lifelongdev
Published: 2022-02-18 00:27:42

_liner notes_:
- Professional : Whew today was WILD! haha So I didn't go to sleep last night. I had to finish up some stuff for my workshop and my examples were not working! haha So I stayed up to troubleshoot. I haven't pulled an all-nighter in years haha. Next thing I know, I'm finally finished, pushed my changes, double checked things and had like an hour before my workshop. So I meet with the event organizer to make sure the tech works to be able to do the presentation. Everything is good. I'm tired, but ready to do the workshop. I created a site where the workshop attendees can visit and follow along with the slides, ask questions, answer poll questions, send thumbs up, and listen to the audio in case the video took up too much bandwidth. Everything was going great until I noticed that my slides started to move on their own. I thought it was latency or a bug, but someone hopped on the call and said they were able to move the slides by pressing the arrow keys on the keyboard. I thought my setting the "controls" parameter to false in the presentation software that I disabled others from changing the slides. Guess not. That was only for the onscreen controls. I had the organizer cover for me by talking about the events happening tomorrow while I searched for a solution. Found that there is a separate parameter to disable the keyboard controls. So I set that and pushed the code and tried again. On my end, I wasn't able to use keyboard control, but still had the onscreen controls. That's what I was expecting. But had the same issue. In all the rush, I don't remembered if I changed the "listening channel" that control the viewers slide so that the slides would only respond to my actions. So to get things back on track, I changed the channel and password and did the presentation and shared my screen. Then my computer decided to go all slow on me. haha I'm going to do more testing and get it working for my next workshop next month. This will teach me to put together a project in a week and throw it out there for the public to mess with it. haha. After the workshop, I was wiped! haha Had a couple of other meetings, then I basically took a nap. Overall, I think it went well. I got through the presentation and more people are familiar with the awesomeness of Web Components. Can't complain.

- Personal : Basically spent the night working on my workshop.

![Two huge trees with branches almost touching the ground in Warm Woodland with the sun shining between the trunks.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pc7o5y6ep6ulgocewgw2.jpg)

Yeah, I'm probably going to do some light coding if any at all. There's some stuff coming up that I want to plan for. Maybe watch some anime and call it an early night.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube lpiYRIcjAxQ %}
My lastest websites that i have created
Published: 2022-02-18 00:09:32

The websites i have created :

[ Montre Tommy Hilfiger Homme](https://www.chic-time.fr/651-montre-homme-tommy-hilfiger)

[Ampoules LED H7 voiture](https://www.next-tech-france.com/52-ampoule-led-h7)

[Avocat sérieux mulhouse](https://ac-jurisconsulte.fr/)

Other ones: 

https://april77.fr/
https://betcmusic.fr/
https://entreprises-particuliers.fr/
https://www.espritrecup.fr/
https://www.freshmode.fr/
https://guillaume-schaeffer.fr/
https://jac-cerdacc.fr/
https://le-nouveau-monde.fr/
https://lenouveauring.fr/
leshautsdelamode.fr/
https://www.lookbooks.fr/
https://luluetcie.fr/
https://meilleures-entreprises.fr/
https://www.montupet.fr/
https://www.mountain-men.fr
pikock.fr/
https://www.stockfamily.fr/
https://tourisme-coeurdepuisaye.fr/
https://yuzu-melodies.fr/
Software development is inherently unpredictable
Tags: agile, softwaredevelopment
Published: 2022-08-10 20:38:24

---
title: Software development is inherently unpredictable
published: true
date: 2022-02-18 00:00:00 UTC
tags: agile,softwaredevelopment
canonical_url: https://jhall.io/archive/2022/02/18/software-development-is-inherently-unpredictable/
---

Software development is inherently unpredictable.

You probably agree with this, at some level. “Yes, we’ll run into unexpected bugs” or “Of course, we don’t know what the customer will request next week” or even “Obviously, people get sick sometimes, and that may push the schedule back.”

Those are all valid examples of unpredictability affecting software development, of course.

But that’s not what I mean.

I mean that software development, by its very nature, is unpredictable.

Think of it this way: When you write software, what are you doing? You’re inventing something new. It may have similarities to something you’ve done before, of course. But if you had done _the exact same thing_ before, you wouldn’t be writing software now. You’d be _copying_ software, which takes a few milliseconds typically.

So here’s the thing:

If we already know exactly what our software should look like before we write it, it’s because we’ve already written that exact software before. And then we’re done! There’s nothing more to do!

The act of writing software is an act of discovery. We’re discovering what software we need to write, as we write it.

That’s inherently unpredictable.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Understanding Azure Synapse Analytics
Tags: azure, analytics, dataanalytic, datascience
Published: 2022-02-17 23:56:25

Azure Synapse Analytics is not just a data warehouse. It also provides the capability for big data analytics, data integration, and data visualization along with data warehousing, and all of these features are available at one stop. 

You can persist the data in Azure Synapse and perform the following types of analytics:

- Descriptive analytics helps you describe what is happening in the business using the data ingested in the Azure Synapse data warehouse. You can leverage the dedicated SQL pool or the serverless SQL pool to store the data and perform descriptive analytics.
 
- Diagnostic analytics helps you diagnose why a particular phenomenon occurs in the business. You can leverage the serverless SQL pool to perform diagnostic analytics on data stored in a data lake or data warehouse.

- Predictive analytics helps you predict what will happen in the future based on the trends and patterns studied from the business data. You can leverage Spark pool and Azure Machine Learning services or Azure Databricks to perform these analytics.

- Prescriptive analytics helps you execute actions based on real-time or near real-time analysis of the data. You can leverage Spark pool and Azure Stream Analytics or any other real-time streaming technology to perform these analytics.

You can use any of the following languages to perform data analytics using Azure Synapse and easily build Big data engineering and Machine learning solutions:

- SQL
- Python
- .NET
- Java
- R 
- Scala

You can either use provisioned or serverless infrastructure to perform analytics using Azure Synapse. Azure Synapse supports SQL and Spark Analytics Runtime. Azure Synapse Pipelines help you integrate with various data sources like Azure Data Lake, Azure Cosmos DB, Azure SQL, and many more, and help you perform ETL (extract, transform, load) operations. Azure Synapse pipelines are based on Azure Data Factory. You can perform all these actions using Synapse Analytics Studio. You can also use Azure Databricks and Azure Synapse pipelines to perform rich analytics on complex data sets.

Hope this was helpful.
Suggest the most up to date React course available
Published: 2022-02-17 23:23:49

I've been trying to learn React but it seems like every popular course that I get recommended/find is outdated.

I've been taking the Stephen Grider course and it's been teaching me class-based components and using things that are no longer in practice like mapStateToProps when using Redux. 

So I had to refer to documentations and other videos in order to use hooks and whatnot.

Is there a good course that goes deep into React and is also up to date?
GraphQL: Should You Care?
Tags: webdev, programming, coredna, graphql
Published: 2022-02-17 23:01:05

As new technological innovations continue to emerge, buoyed by an explosion of digital devices and changing consumer habits, businesses continue to search for the fastest and most effective means of keeping up with the changing digital ecosystem.

Many have adopted new technology stacks, including API-driven headless CMS platforms as a means of producing and delivering content for all of the right channels.

But just as all CMS platforms aren’t created equally, neither are all APIs. Several organizations are already using GraphQL for their API needs, but what is it, and how does it compare to API standards such as REST?

Check out our free guide:
[What is GraphQL: And why it's actually developers and marketers secret weapon](https://www.coredna.com/guides/what-is-graphql-guide).

In this guide, you'll learn:

- 
What is GraphQL?

- 
How does GraphQL querying work?

- 
What is REST (and is it old news)?

- 
GraphQL vs REST

- 
 Why marketers should care about GraphQL

- 
GraphQL in action: How Netflix used GraphQL for its marketing tech team

- 
Using GraphQL with Core dna and more! 

Anything on this topic you would like us to cover? Let us know below!
Servidor Oracle DB + APEX + ORDS + JasperReports desde cero (Parte 4)
Tags: oracle, apex, spanish
Published: 2022-02-17 22:28:23

En la que sería ya la última publicación de esta serie, veamos los pasos para la instalación de JasperReports y su integración con la base de datos.
## Jasper Reports Integration 2.7

Permite la integración de APEX con el motor de reportes Jasper. La versión más reciente de JRI se encuentra [aquí](https://github.com/daust/JasperReportsIntegration/releases) y las instrucciones para la instalación están [aquí](https://github.com/daust/JasperReportsIntegration/blob/main/src/doc/github/installation-full.md)

Como usuario root creamos un nuevo directorio para almacenar los binarions de las aplicacion

```bash
mkdir -p /u01/JasperReportsIntegration
chown tomcat:tomcat /u01/JasperReportsIntegration/
```

Usarmos el comando `tar` para extraer el contenido del archivo que descargamos y lo copiamos al directorio

```bash
tar xvf jri-2.7.0-jasper-6.16.0.tar
cp -R jri-2.7.0-jasper-6.16.0/* /u01/JasperReportsIntegration/
```

Agregramos al archivo `.bash_profile` del usuario tomcat

```bash
export OC_JASPER_CONFIG_HOME=/u01/JasperReportsIntegration
```

Cerramos sesión del usuario tomcat, volvemos a iniciarla y reiniciamos el servicio.

Modificamos el archivo `/u01/JasperReportsIntegration/conf/application.properties` para indicar los parámetros de conexión a la base de datos. Buscamos la sección `[datasource:default]` y modificamos los campos necesarios

```
[datasource:default]
type=jdbc
name=default
url=jdbc:oracle:thin:@//orcl-server:1521/XEPDB1
username=testing
password=Password01
```

Finalmente copiamos el archivo `/u01/JasperReportsIntegration/webapps/jri.war` en el directorio `webapps` de Tomcat

```bash
cp jri.war $CATALINA_BASE/webapps/.
```

El despliege de la aplicación debería hacerse de forma automática y a partir de este momento debería ser posible ingresar a la página de inicio en `http://ip-servidor:8080/jri`

El siguiente paso es instalar los objetos de base de datos, este proceso se divide en dos, una parte se ejecuta con el usuario SYS y el otro con el usuario dueño de la aplicación.

Descomprimimos el archivo que descargamos en algún sitio que sea accesible por el usuario `oracle` e ingresamos al directorio sql. Allí ingresamos a la base de datos usando SQL\*Plus

```bash
sqlplus sys@localhost:1521/XEPDB1 as sysdba
```

Ejecutamos los siguientes comandos (en este caso *testing* es el esquema de base de datos dueño de la aplicación, deberá cambiarse por el nombre de esquema correcto en producción)

```
@sys_install testing
@sys_install_acl_12_and_above.sql testing orcl-server
```

Luego iniciamos una nueva conexión a la base de datos, esta vez con el usuario dueño de la aplicación.

```
sqlplus testing@localhost:1521/XEPDB1
```

Y ejecutamos
```
@user_install.sql
```

En una próxima publicación les mostraré cómo crear reportes PDF con JasperReports y APEX
Day 1 of 100 days of code
Tags: javascript, webdev, beginners, programming
Published: 2022-02-17 21:58:50

I am starting this journey to document my journey on frontend development. I actually started yesterday so this is day 2. I will talk on what I did yesterday with JavaScript. I am learning with [Scrimba](scrimba.com) as it to me very explanatory and fun. I created a passenger counter app with the JavaScript skills I learnt which included variable declaration, strings, Document Object Model and function creation.
100 días de código: 72, un día ocupado
Published: 2022-02-17 21:55:37

¡Hey hey hey!

Seré breve puesto que no cuento con mucho tiempo pero de igual forma me gustaría dedicar un poco a escribir, hoy ha sido un día ocupado entonces tratare de ser breve.

Logre avanzar con el curso de Redux aprendiendo cuales son las diferencias entre reducers y actions y pude dedicarme al menos una hora a codificar pero me hubiera gustado dedicarle mucho mas tiempo.

### Hoy
- Aprendí algunos conceptos de Redux como el patrón de los Ducks.
- Practique creando un proyecto propio en el cual uso el estado de redux.
- Practique un poco de Touch Typing.

Espero que tengan mucho éxito en sus proyectos, animo con todo y hasta la próxima!

Créditos del cover: mi gata durmiendo.
What coding language do you want to learn this year, and why?
Tags: discuss, watercooler, programming, devrel
Published: 2022-02-17 21:13:16

I’m pretty much a polyglot programmer. Working as a Developer Advocate, I often find that I’m asked to help developers to integrate with our API in a language of their choice, but maybe one I don’t know so well. This is one of the coolest and most fun parts of my job, by the way - I get to learn new stuff, or go back and sharpen older skills, all the time. Most days, if I’m coding, I find myself in the worlds of Python, JavaScript, or C#.

From [my DEV bio / profile page sidebar](https://dev.to/andypiper):

> Generally capable across a range of languages... grew up on BBC BASIC and C, migrated into Perl, PHP, Java, Python, JS etc. with side dabblings in Ruby, Swift, Go and others...

I know quite a few things, but I rarely spend long enough in a programming space, to get to know it really deeply.

Most recently, I’ve been learning about MicroPython, and sharing my progress in [a series here on DEV](https://dev.to/andypiper/series/16659).

{% embed https://dev.to/andypiper/bringing-the-bling-with-micropython-hn1 %}

This year, I really want to do something with Rust. It has been interesting to me for a while, but I’ve yet to do anything with it. I admit, Jack Dorsey’s Tweet got me *more* interested…

{% embed https://twitter.com/jack/status/1474263588651126788 %}

I’ve done quite a bit with C in the past, working on things for Linux and GNOME, and I still do a lot of IoT and microprocessor stuff, so I think I’d like to spend time with Rust this year.

Tell me what _you_ want to learn in 2022, and why? I’d love to chat about it in the comments!
Scrape any website Using PHP code
Tags: php, codenewbie
Published: 2022-02-17 21:12:43

Im Scraping [Momix apk](https://momixapk.com) Website.

<?php
# curl.php

// Initialize a connection with cURL (ch = cURL handle, or "channel")
$ch = curl_init();

// Set the URL
curl_setopt($ch, CURLOPT_URL, 'http://momixapk.com');

// Set the HTTP method
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');

// Return the response instead of printing it out
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

// Send the request and store the result in $response
$response = curl_exec($ch);

echo 'HTTP Status Code: ' . curl_getinfo($ch, CURLINFO_HTTP_CODE) . PHP_EOL;
echo 'Response Body: ' . $response . PHP_EOL;

// Close cURL resource to free up system resources
curl_close($ch);
JPGs and URL.createObjectURL()
Tags: javascript, html
Published: 2022-02-17 20:49:20

#CreatingImageUrls
Lets say for some abstract reason completely unrelated to this other post of mine ([Hmmm](https://dev.to/bjupfield/javascript-sql-and-file-saving-53dn)) you have a javascript File object that is of image and you want to display it on your site instead of simply pulling an url for and image. Now if you had this image you could use this cool Url method, URL.createObjectURL(). The code would be 
```
const interpretedImage = URL.createObjectURL(imgFile);
```
And to use this created url image on your html image element use the interpretedImage variable as the src. However do make sure the file is unnamed as the name of the file will appear in the image if you name it.
How to manage your cheatsheets?
Tags: javascript, webdev, beginners, tips
Published: 2022-02-17 20:43:13

TL;DR; [The-cheat.com](https://the-cheat.com/) launching on 2022 March 4th


Recently i've started my [Year of Hustle](https://stackingthebricks.com/year-of-hustle/). I was trying to come up with something worthwhile for my first mini-projects. 

I thought to myself:
## I know i'll create some cheat sheets for Elixir/Phoenix/Liveview 

And as any good lazy programmer i've went on to google and searched:

## Cheat sheet generator

To my horror there are no tools out there that are easy to use or don't require a sign up before even trying anything.

So i've decided to make it myself as my first project, hence [The-cheat.com](https://the-cheat.com/) was born.

While doing it i've realized something. I've been missing a place to manage all my cheat sheets. They're all over the place. And for the few that I have printed I feel like i could make them a bit better.

Like:
- Hide some cards that i've memorised.
- Rearange the cards so i have the most importants ones on the first page
- Add more cards from other cheat sheets so that i would have the information i need the most


And while printing is the main focus, i've though about, wouldn't it be nice to have all those sheets in once place, where i can sort/search/combine them reprint them.


Hence i'm setting out on a journey to create this tool.


Thank you for reading my post. If you have any suggestions or any comment please let me know!

And if this sounds like an app you'd like to use please sign up at [The-cheat.com](https://the-cheat.com/)


Have a nice day!
5 jogos gratuitos para praticar CSS
Tags: beginners, css, braziliandevs, gamedev
Published: 2022-02-17 20:39:35

## Olá, pessoal 👋🏻

Para o post de hoje, eu separei 5 jogos gratuitos para você praticar CSS.

Por aqui você vai encontrar guias sobre Flexbox, Grid, Seletores no CSS, e tudo isso enquanto se diverte jogando.

## 1. Flexbox Froggy

Nesse primeiro jogo você precisará levar os sapinhos aos seus destinos. Contará com <u>24 fases</u> e <u>3 níveis de dificuldade</u>, que vai desde o iniciante com dicas sobre cada propriedade do Flexbox, até o experiente que são níveis sem dicas.

![Flexbox Froggy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2qyx9gz2x00xmnlsgcb.png)

Encontre esse jogo clicando [aqui](https://flexboxfroggy.com/).
 

## 2. CSS Diner

Nosso segundo jogo é sobre os seletores no CSS. O CSS Diner é composto por <u>32 níveis</u> e, possui exemplos de como cada seletor funciona.

![CSS Diner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/naph84wtahwxdeb0n6t2.png)
 
Encontre esse jogo clicando [aqui](https://flukeout.github.io/).

## 3. Flexbox Defense

Já o terceiro jogo dessa lista, é também para praticar as propriedades do Flexbox. Só que agora você precisará posicionar bem as suas torres, usando os alinhamentos, para defendê-las. O jogo conta com <u>12 fases</u>.

![Flexbox Defense](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nn4wluiiray3np2i0fb1.png)
 
Encontre esse jogo clicando [aqui](http://www.flexboxdefense.com/).

## 4. Grid Garden

O quarto jogo é o Grid Garden. Nele você pode praticar sobre as propriedades do Grid no CSS. Esse jogo conta com <u>28 fases</u>, onde você vai precisar direcionar as cenourinhas e cultivá-las.

![Grid Garden](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0t6dhcm70wuacuoqmb5c.png)

Encontre esse jogo clicando [aqui](https://cssgridgarden.com/).

## 5. Flexbox Zombies
 
Chegamos então ao quinto jogo. Flexbox Zombies é um jogo de sobrevivência contra os ataques de zumbis que conta com <u>12 capítulos</u>, sendo <u>cada capitulo de múltiplas fases</u> e, um guia no aprendizado das propriedades do Flexbox.

![Flexbox Zombies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79rk1b28hz2p99hnrkzw.png)

Encontre esse jogo clicando [aqui](https://mastery.games/flexboxzombies/).

## Conclusão
Por enquanto essas são as indicações de jogos sobre CSS que eu queria passar para vocês. Espero que tenham gostado!

Sintam-se a vontade para comentar quais desses jogos você já conhecia e, se já jogou algum, quais desses você já zerou.

Obrigada por ler!