teleren/devto huggingface dataset:
Making a percentage-based scroll to the top indicator
Tags: javascript, programming, tutorial, webdev
Published: 2023-09-18 17:29:47

This is a fairly simple thing to get done once you know how.
At the time that I first encountered this, I was very curious as to how this would work and how I would go about implementing this.

**So here is what I did**
First, I had to determine how far I had scrolled & how far I still needed to scroll to reach the end of the page.

To do this I added a function that would use either the `document.docmentElement` or the `document.body` depending on which had a value.

**Then a little bit of math**
I then did a calculation in shorthand which is hard to read so I will write it out a bit better here.

`(document.documentElement.scrollTop || document.body.scrollTop) / (document.documentElement.scrollHeight|| document.body.scrollHeight) - document.documentElement.clientHeight) * 100;`

This is not much of an improvement over the Codepen version, but it is a lot more readable.

**How & when should I trigger this function**
I added an event listener on the scroll on the window & that would then trigger the final function to either show or hide the scroll to the top indicator.
The event listener I added looks like this:

`window.addEventListener("scroll", function() {
   const svgElement = document.getElementsByClassName('progress-circle')[0]
  svgElement.firstElementChild.style["stroke-dashoffset"] = percentage(getScrollPercent(), 307.919);
}, false)`

As seen here the final function would return a number that I can then use to set the `stroke-dashoffset` of the SVG, sure that makes sense. 

soooooo what is the 307.919 for?

Well, I don't know, if someone reading this does know and can explain it in more Layman's terms, please leave a comment and I will adjust this part and you will have my thanks.
The way I go to this is just playing around with the values and this worked without issue so I kept it in.

This function would then go on to take these two values and do a calculation to determine if the page has been scrolled and by how much compared to the total available y-axis to scroll.

`var t = totalValue - (totalValue * (percent / 100));`

If this resulting number is larger than 0 but smaller than 306, then the indicator will come into view in the bottom right-hand corner.
Otherwise, it will fade away. 

**Finishing touches**
All I really had to do now was to make everything comically large so that nothing was missed.
Add in a simple animation or two.
Last but not least, to make the page scroll to the top nice and smooth once the indicator has been clicked & here is how I did that: 
`document.getElementById('wrap').addEventListener('click', function() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});`

**Codepen Below**
Please feel free to go through the Codepen below, check the code, and play around. This was more a proof of concept to satisfy my curiosity and I would advise a lot of testing before using this in a production environment.

{% codepen https://codepen.io/Murdo/pen/NWvwzga default-tab=result %}
Noob confounded by 'on:mouseenter' code example, please help...
Tags: help, svelte
Published: 2023-09-18 17:27:02

Hi, I'm a visual effects artist developing a website for my portfolio. I'm enjoying the challenge of web development and diving into svelte to do so. 

I'm looking for a way to make things happen when the mouse is hovering over a given element. 
I found this snippet of code in the Svelte REPL, which has the functionality I am looking for, which is great. But I'm actually really confused as to how it's working and wondering if someone can help me understand.
```
<script>
	let active = false;	
</script>

<style>
.active {
	background:red;
}
</style>

<h1 class:active on:mouseenter={() => {
	active = true;
}}
on:mouseleave={() => {
	active = false;
}} >Hover or click me!</h1>
```
In this snippet of code it seems to me that the variable 'active', when set to true also sets the '.active' class to be true as well?
Basically if I set the variable 'active' to be any other name then the behavior stops working and I don't understand why. 
 I can't find any documentation that explains this, so hoping someone can shed some light on it for my confused noob brain. 

The original snippet of code is a bit longer, and was grabbed from here: https://svelte.dev/repl/698309456ba84ec48dba0d7a29dd7faf?version=3.38.3
Research in English News
Tags: webdev, news, ai, javascript
Published: 2023-09-18 17:04:14

[Research in English](https://researchinenglish.com) is a website I threw together over the course of a couple months. The website uses AI to read research papers and write news articles about them that are readable to the general public. The idea came to me after I was researching niche topics and managed to find a publication which was writing about research which was exactly what I was looking for but they didn't have any of the numbers or any other relevant information that I needed and didn't cite their sources or anything else. Further I read many other articles where the author neither read nor understood the paper that they were writing about. With these problems in mind I created Research in English.

I'm admittedly not a huge fan of AI-generated articles taking up all of the search results on the internet but in this case I genuinely think that it's providing value as the articles are definitely more readable. Each article is fairly cheap to generate and the papers are all provided under permissive licenses through various preprint services. Using preprints does open up the result of limited accuracy but I have noticed that most papers that eventually get shot down in review do eventually get withdrawn from the preprint services. So by writing about slightly dated papers (ie - 1 month delay) we significantly reduce the already small quantity of inaccuracies.

## How it Works
Here is a simplified overview of how an article comes to be.

### Finding Papers
We use a number of sources for finding research papers to write about. We of course have to filter out the ones which don't have permissive licenses. We then categorize them, collect additional metadata, add them into our database.

### Reading Papers
Because PDF is not particularly conducive to automated reading systems (ie - columns can be read a number of different ways), we have a manual phase where a human does the following:
- look at the paper
- decide if it's newsworthy or not
- copy and paste sections from the paper (usually just a few fields)

### Writing Articles
After we the paper in an AI friendly format we use OpenAI's API to generate the article, headline, description, etc.

### Manual Review
The final step before the article is published is that a human can skim it and choose a relevant thumbnail.

### Static site generation
Finally, the articles in the database are converted into a complete static HTML website.

## Example Page
Take a look at this page and the research paper it was created from: https://researchinenglish.com/article/2023.7/new-research-shows-interethnic-contact-in-public-pools--d0fe3ell/


---

You can also find this post on [my blog](https://blog.dvtt.net/post/researchinenglish.html).
From Domain to Tasks
Tags: ddd, learning
Published: 2023-09-18 16:45:02

Not long ago, I had a discussion with a colleague. I told him that if he can’t explain his planned work to his peers, he should probably work on his plan. Kind of paraphrasing  Richard Feymann:

> If you can't explain something to a first year student, then you haven't really understood it. 
[https://en.wikiquote.org/wiki/Talk:Richard_Feynman]

The problem seems easy enough, but in this context the problem was also finding what to do. Kind of a “Full Stack Engineer” for a whole slice of a domain. Maybe “Full Domain Engineer”?

As a Full Domain Engineer getting your list of tasks is not merely structuring around ready made requirements, but finding those requirements in the first place. This needs a lot of communication. To put all that information into a form that can be understood and be worked with we require models = representations.

Event Storming helps with some definitions and ways to put them together. (see https://miro.com/miroverse/event-storming/ for a nice walk-through). But the transition from a model to a list of tasks is pretty hard. Some problems I had were the following:

- Leaking technical decisions, especially past ones, into the model. For example some events which only occur because of a workaround.
- Document decisions on the semantics of the model. Even though I feel like a wiki page should do, that failed me on follow ups.
- Differentiating between the domain and technical things. That was especially hard, when my team was providing technical infrastructure. The domain is infrastructure, but the technical things are the infrastructure. So what is the domain?
- Our Brains need time to process. Don't transition into task mode right after a modelling session.

Last but not least, I think the whole modeling session is to inform, not to create tasks. Finally we need tasks, but I always felt they are created way too early.

{% embed https://twitter.com/KentBeck/status/339435106961854464 %}
Top high rated service based company in Noida (India)
Published: 2023-09-18 16:55:46

## Pay good to freshers and experiance.
Vehant Technologies ⭐ 

3Pillar Global ⭐

 Nickelfox Technologies ⭐

 Monotype ⭐

 Gemalto ⭐

 Barclays Global Service Centre ⭐

 Knoldus Inc ⭐



## Others 
Glorious Insight,

 Fluper,

 Polestar Solutions & Services India,

 Appsierra,

 Biz 2 Credit Info Services,

 Path Infotech, Impressico Business Solutions,

 AWC Software,

 Claritus Management Consulting,

 E2logy Software Solutions,

 SDG Software, SPARX IT Solutions,

 Hestabit Technologies, Infoicon Technologies,

 DigiLantern,

 Velocity Software Solutions,

 Finoit Technologies,

 Velocity Software Solutions,

 Hic Global Solutions,

 Snap-on Business Solutions,

 Crestech Software,

 Risk Management Solutions,

 AltezzaSys,

 Techugo,

 ISKPRO,

 WebMobril Technologies,

 i2k2 Networks,

 Williams Commerce,

 Prologic Web Solutions,

 Argil DX,

 Mobulous Technologies,

 Argil DX,

 Xotiv Technologies,

 Nippon Data Systems,

 inMorphis Services,

 Designoweb Technologies,

 Quovantis Technologies,

 Acro Technologies,

 Sourcefuse Technologies,

 Girikon, Flyweis Technology,

 Avalara Technologies,

 Redian Software,

 Quadrafort Technologies,

 Brain Technosys,

 Sonet Microsystems,

 RipenApps Technologies,

 Ornate TechnoServices,

 W3Villa Technologies,

 AKS WebSoft.
Action Verbs for a Technical Resume
Tags: resume, beginners, tutorial, programming
Published: 2023-09-18 16:51:44

## Intro

Using technical action verbs in your resume is crucial when applying for jobs in today's competitive job market. These powerful verbs not only make your accomplishments stand out but also convey a sense of expertise and confidence to potential employers. By employing specific, action-oriented language, you can effectively demonstrate your skills and accomplishments, allowing recruiters to quickly grasp the value you can bring to their organization, we'll explore the importance of these verbs in crafting a compelling resume that captures the attention of hiring managers and increases your chances of landing your dream job.

### List of Action Verbs

• Accelerated
• Cleansed
• Evaluated
• Mechanized
• Qualified
• Rotated
• Adapted
• Cleared
• Expunged
• Merged
• Ranked
• Routed
• Adopted
• Coded
• Extended
• Migrated
• Realigned
• Safeguarded
• Aggregated
• Computed
• Extracted
• Mined
• Rebooted
• Scanned
• Analyzed
• Configured
• Extrapolated
• Mirrored
• Rebuilt
• Scoped
• Applied
• Consolidated
• Finalized
• Mobilized
• Reconciled
• Scrubbed
• Assembled
• Constructed
• Formatted
• Modeled
• Reconstructed
• Secured
• Authenticated
• Converted
• Functionalized
• Modified
• Recovered
• Selected
• Automated
• Debugged
• Grouped
• Moved
• Rectified
• Sequenced
• Backed-up
• Decoded
• Hosted
• Networked
• Re-engineered
• Solved
• Balanced
• Dedicated
• Identified
• Operated
• Refreshed
• Stabilized
• Blocked
• Delivered
• Implemented
• Optimized
• Reinforced
• Standardized
• Boosted
• Deployed
• Initialized
• Overhauled
• Released
• Systematized
• Branched
• Developed
• Installed
• Packaged
• Remodeled
• Tested
• Bridged
• Discovered
• Integrated
• Patched
• Replicated
• Traced
• Built
• Dispatched
• Isolated
• Penetrated
• Restored
• Transitioned
• Bundled
• Distributed
• Launched
• Pinpointed
• Retooled
• Updated
• Calculated
• Duplicated
• Licensed
• Prevented
• Retrieved
• Upgraded
• Calibrated
• Enabled
• Linked
• Prioritized
• Retrofitted
• Validated
• Certified
• Engineered
• Loaded
• Processed
• Revamped
• Verified
• Changed
• Enhanced
• Maintained
• Programmed
• Revised
• Virtualized
• Checked
• Estimated
• Manufactured
• Protected
• Road mapped
• Web-enabled
• Classified
• Equipped
• Mapped
• Prototyped
• Rolled out
• Created

### Conclusion

In conclusion, incorporating action verbs into your resume is a vital strategy for showcasing your qualifications and making a lasting impression on potential employers. These dynamic words breathe life into your accomplishments, emphasizing your active contributions and impact in previous roles. By choosing the right action verbs, you can effectively communicate your skills, achievements, and potential to prospective employers, ultimately increasing your chances of securing the job opportunities you desire. So, remember, when crafting your resume, don't underestimate the power of action verbs—they can be the key to unlocking your professional success.
Introduction to array
Published: 2023-09-18 16:51:40

In C programming, when declaring a variable, you typically start by specifying its data type followed by the variable name and, optionally, an initial value. For example, int a = 1; declares an integer variable named "a" with an initial value of 1.

This approach works well when dealing with a small number of variables. However, when you need to work with a large number of variables, it can become cumbersome to declare each one individually. This is where arrays come in handy. An array is a container that can hold multiple values of the same data type. To declare an array, you specify the data type, followed by the array name and its size in square brackets. For example, int ar[5000]; declares an array named "ar" capable of holding 5000 integers.

The way arrays work is that they only declare the first element, and the other elements are located in adjacent memory locations. In example, if the first element of the array is stored at memory location 410 bytes, the next element will be at 414 bytes, with a 4-byte gap, assuming each element is an integer. This contiguous memory arrangement allows for efficient access and manipulation of array elements.
What is an Octal Number?
Tags: whatis, octal
Published: 2023-09-18 16:42:01

---
image:
title: What is an Octal Number?
description: An octal number is a number that uses the base-8 numbering system. This means that each digit in an octal number represents a power of 8. Octal numbers are not as commonly used as decimal or hexadecimal numbers, but they are still used in some areas of computing.
tags:
  - whatis
  - octal
author: ilihub
series: Number System
---

An octal number is a number that uses the `base-8` numbering system. This means that each digit in an octal number represents a power of 8. Octal numbers are not as commonly used as [decimal][Decimal Number] or [hexadecimal numbers][Hexadecimal Number], but they are still used in some areas of computing.

In the octal numbering system, the digits 0-7 represent the values 0-7. For example, the octal number 123 can be represented as:

{% katex %}
1 \times 8^2 + 2 \times 8^1 + 3 \times 8^0
{% endkatex %}

In this representation, the first digit (1) represents 64 ({% katex inline %}1 \times 8^2{% endkatex %}), the second digit (2) represents 16 ({% katex inline %}2 \times 8^1{% endkatex %}), and the third digit (3) represents 3 ({% katex inline %}3 \times 8^0{% endkatex %}). When you add these values together, you get the decimal number 83.

{% katex %}
1 \times 8^2 + 2 \times 8^1 + 3 \times 8^0 = 64 + 16 + 3 = 83
{% endkatex %}

In addition to octal numbers, there are other numbering systems, such as [binary][Binary Number] and [hexadecimal][Hexadecimal Number], that are used in computing. However, octal numbers are not as commonly used as these other numbering systems.

## Examples

The following table shows the decimal, binary & octal representations of the numbers 0 through 7:

| Decimal | Binary | Octal |
| ------- | ------ | ----- |
| 0       | 000    | 0     |
| 1       | 001    | 1     |
| 2       | 010    | 2     |
| 3       | 011    | 3     |
| 4       | 100    | 4     |
| 5       | 101    | 5     |
| 6       | 110    | 6     |
| 7       | 111    | 7     |

---

## References

- [Octal Number Wikipedia](https://en.wikipedia.org/wiki/Octal)
- [Binary Number][Binary Number]
- [Decimal Number][Decimal Number]
- [Hexadecimal Number][Hexadecimal Number]

---

[Binary Number]: https://ilihub.tech/blog/what-is/binary-number "What is a Binary Number?"
[Decimal Number]: https://ilihub.tech/blog/what-is/decimal-number "What is a Decimal Number?"
[Hexadecimal Number]: https://ilihub.tech/blog/what-is/hexadecimal-number "What is a Hexadecimal Number?"
What is a Hexadecimal Number?
Tags: whatis, hexadecimal
Published: 2023-09-18 16:37:43

---
image:
title: What is a Hexadecimal Number?
description: A hexadecimal number is a number that uses the base-16 numbering system. This means that each digit in a hexadecimal number represents a power of 16. Hexadecimal numbers are often used in computing because they can represent large numbers in a compact form.
tags:
  - whatis
  - hexadecimal
author: ilihub
series: Number System
---

A hexadecimal number is a number that uses the `base-16` numbering system. This means that each digit in a hexadecimal number represents a power of 16. Hexadecimal numbers are often used in computing because they can represent large numbers in a compact form.

In the hexadecimal numbering system, the digits 0-9 represent the values 0-9, and the letters A-F represent the values 10-15. For example, the hexadecimal number 1A can be represented as:

{% katex %}
1 \times 16^1 + A \times 16^0
{% endkatex %}

In this representation, the first digit (1) represents 16 ({% katex inline %}1 \times 16^1{% endkatex %}), and the second digit (A) represents 10 ({% katex inline %}10 \times 16^0{% endkatex %}). When you add these values together, you get the decimal number 26.

{% katex %}
1 \times 16^1 + A \times 16^0 = 16 + 10 = 26
{% endkatex %}

In addition to hexadecimal numbers, there are other numbering systems, such as [binary][Binary Number] and [decimal][Decimal Number], that are used in computing. However, hexadecimal numbers are particularly useful because they can represent large numbers in a compact form and are easy to convert to binary.

## Examples

The following table shows the decimal, binary & hexadecimal representations of the numbers 0 through 15:

| Decimal | Binary | Hexadecimal |
| ------- | ------ | ----------- |
| 0       | 0000   | 0           |
| 1       | 0001   | 1           |
| 2       | 0010   | 2           |
| 3       | 0011   | 3           |
| 4       | 0100   | 4           |
| 5       | 0101   | 5           |
| 6       | 0110   | 6           |
| 7       | 0111   | 7           |
| 8       | 1000   | 8           |
| 9       | 1001   | 9           |
| 10      | 1010   | A           |
| 11      | 1011   | B           |
| 12      | 1100   | C           |
| 13      | 1101   | D           |
| 14      | 1110   | E           |
| 15      | 1111   | F           |

---

## References

- [Hexadecimal Number Wikipedia](https://en.wikipedia.org/wiki/Hexadecimal)
- [Binary Number][Binary Number]
- [Decimal Number][Decimal Number]

---

[Binary Number]: https://ilihub.tech/blog/what-is/binary-number "What is a Binary Number?"
[Decimal Number]: https://ilihub.tech/blog/what-is/decimal-number "What is a Decimal Number?"
Herança e Classes Abstratas em Java
Tags: java, poo, beginners, braziliandevs
Published: 2023-09-18 16:31:14

## Herança em Java:

Em Java, a herança é implementada usando a palavra-chave extends. Aqui está um exemplo simples:

Suponha que você tenha uma classe Animal:

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

Agora, você pode criar uma classe Cachorro que herda de Animal:


![Image h 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av0jvfltqp300qfvyyx8.png)

Neste exemplo, a classe Cachorro herda o método comer da classe Animal. Você pode criar uma instância de Cachorro e chamar tanto comer quanto latir:


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

## Classes Abstratas em Java:

_Não esqueça de deixar seu like_ ❤️

Uma classe abstrata em Java é uma classe que não pode ser instanciada diretamente, mas pode ser usada como um modelo para outras classes. Você declara uma classe abstrata usando a palavra-chave abstract. Aqui está um exemplo:

Suponha que você tenha uma classe abstrata Forma que representa formas geométricas:

![Image a 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zidgw6kvrk3jqgmk69jj.png)

Observe que o método calcularArea é declarado como abstract, o que significa que qualquer classe que herde de Forma deve implementar esse método.

Agora, você pode criar classes concretas que herdam de Forma e implementam o método calcularArea, como Circulo:

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

Neste exemplo, a classe Circulo herda de Forma e implementa o método calcularArea. Você pode criar instâncias de Circulo e calcular a área:


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

Lembre-se de que você não pode criar uma instância direta de uma classe abstrata, mas pode criar instâncias de suas subclasses concretas, como Circulo.

_Agora vocês já está pronto para aprender sobre encapsulamento_
[Clique aqui para aprender](https://dev.to/antoniorws/o-que-e-encapsulamento-em-java-2i6k)🚀

Repositório com a trilha de java: https://github.com/antoniorws/basic-java

Linkedin: https://www.linkedin.com/in/antonio-rodrigo-wanderley-serra/
GitHub: https://github.com/antoniorws
What is a Decimal Number?
Tags: whatis, decimal
Published: 2023-09-18 16:30:39

---
image:
title: What is a Decimal Number?
description: A decimal number is a number that uses the base-10 numbering system. This means that each digit in a decimal number represents a power of 10.
tags:
  - whatis
  - decimal
author: ilihub
series: Number System
---

A decimal number is a number that uses the `base-10` numbering system. This means that each digit in a decimal number represents a power of 10. For example, the number 1234 is a decimal number because it can be represented as:

{% katex %}
1 \times 10^3 + 2 \times 10^2 + 3 \times 10^1 + 4 \times 10^0
{% endkatex %}

In this representation, the first digit (1) represents 1,000 ({% katex inline %}10^3{% endkatex %}), the second digit (2) represents 200 ({% katex inline %}2 \times 10^2{% endkatex %}), the third digit (3) represents 30 ({% katex inline %}3 \times 10^1{% endkatex %}), and the fourth digit (4) represents 4 ({% katex inline %}4 \times 10^0{% endkatex %}). When you add these values together, you get the decimal number 1234.

{% katex %}
1 \times 10^3 + 2 \times 10^2 + 3 \times 10^1 + 4 \times 10^0 = 1000 + 200 + 30 + 4 = 1234
{% endkatex %}

In addition to decimal numbers, there are other numbering systems, such as [binary][Binary Number] and [hexadecimal][Hexadecimal Number], that are used in computing. However, decimal numbers are the most commonly used numbering system in everyday life and in computing.

---

## References

- [Decimal Number Wikipedia](https://en.wikipedia.org/wiki/Decimal)
- [Binary Number][Binary Number]
- [Hexadecimal Number][Hexadecimal Number]

---

[Binary Number]: https://ilihub.tech/blog/what-is/binary-number "What is a Binary Number?"
[Hexadecimal Number]: https://ilihub.tech/blog/what-is/hexadecimal-number "What is a Hexadecimal Number?"