teleren/devto huggingface dataset:
How to setup Cloudflare R2 bucket & generate access key
Published: 2024-05-11 14:06:45

Since R2 is S3 compatible, I am using Cloudflare R2 with the AWS Node S3 SDK. But I realised Cloudflare’s website is not very intuitive when it comes to getting the details you need. So I made a walkthrough.

Typically you need the below details to initialise access.

```jsx
S3_ACCESS_KEY=
S3_SECRET_KEY=
S3_BUCKET_NAME=
S3_ENDPOINT=
S3_REGION=
```

In this tutorial, I’ll show you how to get them

## Step 1: Create a Cloudflare account

Go to https://dash.cloudflare.com/sign-up

## Step 2: Go to R2 on the left hand panel

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

*Note: You may need to put your credit card details here.*

## Step 3: Create a bucket

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

Set a bucket name and either pick a location or leave it automatic.

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

## Step 4: Make a note of the public details on the settings page

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

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

In this case, we make a note of:

- Name: my-bucket
- Region: weur
- S3 Endpoint: [https://1995adfbb10a5f8c4b3407a8be2a66ab.r2.cloudflarestorage.com](https://1995adfbb10a5f8c4b3407a8be2a66ab.r2.cloudflarestorage.com/)
    - Note: make sure you don’t include /bucket-name at the end or you might end up with it twice.

## Step 5: Access (secrets)

Go back to R2 main page and you should see your list of buckets.

Then click ‘Manage R2 API Tokens’

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

Create API Token

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

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

1. Set the name of your token to something you can remember. 
2. Give it access to Object Read & Write
3. Apply to only the bucket you just created

Then press ‘Create API Token’

On the next page, you will be given your 

- Access Key ID
- Secret Access Key

So now we have everything we need to make API calls to R2.

## Troubleshooting
* For some reason, Cloudflare display region in upper case in some places. But you must use lower case or it won't work. I.e. use 'weur'. Do not use 'WEUR'.
Differences between CSS transitions, transforms, and animations
Tags: css, cssanimatio
Published: 2024-05-11 13:38:28

Here are some differences between CSS transitions, transforms, and animations:
Transitions
Transitions are state changes that move from one state to another, like a :hover state. They require a trigger to run, and they run forwards when triggered and in reverse when the trigger is removed. Transitions have properties for the name of the property, the duration, any delay, and timing functions.
Transforms
Transforms change the shape and position of content by modifying the coordinate space. They can rotate, move, skew, and scale elements.
Animations
Animations can have multiple stages and are better for more complex movements. They don't require a trigger to run, and they can be played forwards, backwards, or in alternate cycles. Animations have the same properties as transitions, but with the word "animation" instead of "transition".
Video, Live Chat & Help Center widget for the website
Tags: widget, ai, saas, free
Published: 2024-05-11 13:21:11


**[Mixcode](https://www.mixcode.io/)** provides embeddable widgets that users can place on their websites, blogs, or social media pages etc. This allows them to seamlessly integrate interactive Video, Chat, and Help Center into their existing online presence. Use each product individually or all functions at once. Configure with just a few clicks. Rapid guided setup in less than 5 minutes.

😎 Video
🔥 Free & Unlimited Live Chat
🔥 Free & Unlimited Help Center


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8iyy00hq8ol4sl9d2zw.png)
**Video**: Users can record and show their customers, clients, or followers video messages. This adds a personal touch to communication, making it more engaging and memorable


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2b2a8h15d6eqocrur4qs.png)
**Live Chat**: Mixcode enables businesses to have real-time conversations with their website visitors or app users. This allows companies to provide immediate support and address any queries or issues customers may have.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0wdm5kldun8h2vce3js.png)
**Help Center**: Helps answer customer questions using FAQs, instructions, directions, and guides.

**Customer Data and Analytics:** Mixcode gathers data about user interactions, behavior, and feedback, providing businesses with valuable insights to improve their products and services.The platform offers analytics and insights on how users interact with the videos and surveys. This data can be valuable in understanding audience behavior and preferences.

**Customization**: Mixcode may provide various customization options to match the branding and style of the user's business or personal brand.

**Integration:** Mixcode is a simple, one-time code embed, like a Facebook Pixel.

Take a moment to fill out a concise questionnaire, and in return, receive 1 year of free access once the product is launched 🚀 https://lnkd.in/dKydr72S
MAKING PEOPLE MOVE IN SCRATCH
Tags: webdev, javascript, beginners
Published: 2024-05-11 13:19:38

## MAKING PEOPLE WALK
MAKING PEOPLE WALK IS SO DIFFICULT. WE HAVE TO CHANGE THE COSTUME FREQUENTLY AND TYPE THE CODE SEVERAL TIMES. I CHOSE THE SPRITE AVERY AND MADE HER WALK 1000 STEPS BY WRITE THE CODE
MOTION 5 STEPS,NEXT COSTUME AND WAIT 0.1 SEC

https://scratch.mit.edu/projects/1017592305/editor/
Wix Pro Studio Brisbane
Tags: webdev
Published: 2024-05-11 13:10:31

[Wix Pro Studio Brisbane](https://www.wix-pro.com.au/) epitomizes excellence in website design and development within the vibrant cityscape of Brisbane, Australia. As a hub of innovation and creativity, [Wix Pro Studio Brisbane](https://www.wix-pro.com.au/) stands out as a premier destination for individuals and businesses seeking to elevate their online presence. 
[https://www.wix-pro.com.au/](https://www.wix-pro.com.au/)

With a team of skilled professionals who are not only Wix experts but also deeply attuned to the unique needs and aspirations of local clientele, the studio offers tailored solutions that seamlessly blend form and function. Whether it's crafting captivating visuals, optimizing for search engines, or integrating advanced functionalities, Wix Pro Studio Brisbane delivers results that exceed expectations.
I feel lost...
Tags: frontend, react, typescript, developer
Published: 2024-05-11 13:04:27

## Who am I
I'm a Computer Systems Engineering student in my 3rd year based in Palestine. I did start quite well with problem-solving in my first year, then I started to seek new skills. 


## What did I start
I saw people entering the world of front-end development. So, I took my chance and started taking courses like **HTML, CSS, and JavaScript**. I started well and I felt great designing web pages with cool interactions and responsive designs, so I wanted to learn more, so I took a **React.js** course. And one more time felt good about the pages I've created.

I took a Fullstack course on **Udemy** called "The Web Development Course 2024" to learn some back-end using Node.js and to be a **MERN** stack developer.


## What am I doing now
After learning a lot about front-end & back-end development, learning some good folder structure and all the SOLID principles in React + Express, and started creating useful projects to help me out in college.


**Why am I lost **
Here in my country Palestine, there aren't a lot of opportunities for developers, as there are a lot of front-end and back-end developers in addition I can't get internships in well-known companies. I need something to learn that is actually useful in the tech stack industry.
A Technical Writing Professional
Published: 2024-05-11 13:00:51


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0wda68ndg74z017b6n50.jpg)
I am honored today to share my journey as a technical writer. With a passion for communication and a keen eye for detail, I have established myself as an invaluable asset in the field of technical writing.

Growing up, I always had a fascination with language and its ability to convey complex ideas in simple terms. This interest led me to pursue a degree in English, where I honed my writing and communication skills. After graduating, I began my career as a technical writer, quickly realizing that this was the perfect profession for my unique blend of creativity and analytical thinking.

Over the years, I have had the privilege of working with numerous companies across various sectors, including technology, engineering, and manufacturing. My expertise lies in creating user manuals, instructional guides, and other technical documentation that are both informative and easy to follow. I believe that understanding complex systems and processes is essential for effective communication, which is why I strive to break them down into clear instructions that even the most novice users can understand.

One of the key attributes that sets me apart from other technical writers is my dedication to research. I take great care in ensuring that all information provided is accurate and up-to-date. This commitment to accuracy has earned me the respect of my colleagues and clients alike.

In addition to my technical writing skills, I am also proficient in various software tools such as MadCap Flare, Adobe Creative Suite, and Microsoft Office. These tools enable me to efficiently produce high-quality documents while meeting tight deadlines.

But beyond just the technical aspects of my job, I believe that collaboration within teams is essential for successful projects. Effective communication is key to achieving our goals together. That's why I strive to maintain open lines of communication with both team members and clients.

In summary, my profession as a technical writer has allowed me to combine my passion for clear communication with my attention to detail. With a proven track record of producing exceptional documentation for diverse industries, I am proud to be an invaluable asset in any team focused on delivering top-notch products or services.

Thank you for your attention.
Apache SOLR
Tags: peviitor, backend, index
Published: 2024-05-11 12:55:02

## Despre Apache SOLR
_Solr este platforma populară de căutare enterprise, open source, ultra-rapidă, construită pe Apache Lucene._
[Apache SOLR website](https://solr.apache.org/)

---

## Apache SOLR în proiectul peviitor.ro
_Test environment:_
[zimbor.go.ro:8985](http://zimbor.go.ro:8985)
_Prod environment:_
[zimbor.go.ro](http://zimbor.go.ro)

**COREs:**
<u>Test environment:</u>

- firme

- jobs

<u>Prod environment:</u>

- jobs

- shaqodoon

---
HORROR GAME IN SCRATCH
Tags: webdev, javascript, beginners, programming
Published: 2024-05-11 12:48:21

## THOUGHT
I SEARCHED THROUGH THE SCRATCH WEBSITE AND SAW THAT THERE WERE NO HORROR GAMES AND I DECIDED TO MAKE ONE HORROR GAME IN SCRATCH

## PLAN
THE FIRST THING I DID WAS TO MAKE A ROOM FOR OUR HORROR GAME. I CAME ON A VERY AMAZING PLAN. THE PLAN WAS TO MAKE A SMALL HOLE AND A PICTURE AS THE ROOM AND THEN SENT THE ROOM BACK OF . THE HOLE HERE ACTS AS A CAMERA . THE GAME IS NOW FINISHED SUCESSFULLY.

## LINK:https://scratch.mit.edu/projects/1018190268
useEffect Hook
Published: 2024-05-11 12:46:01

UseEffect Hook React:


useEffect  - Hook, Which can be used in Functional Component.

- We can do API calls
- We can Update State here
- We have dependency Array 
	- Empty [] => Called only once when component is loaded
	- [props / state] => Called everytime when prop /state changes

The useEffect hook will replace method of Class Component
-componentDidMount --> []
-componentDidUpdate --> [props/state]
-componentWillUnmount --> return ()=>{ //cleanup }

```js

// React Importing useEffect
import React, { useEffect } from "React";


// HOOK CALLED HERE
useEffect(() => {
  // code
  // effect
  // API call
  // logic


  // return will be called only when components UNMOUNT

  return () => {
    // Cleanup timer etc.
  };
}, []);
```



```js
useEffect(() => {
  let timerId = setTimeout(() => {
    // perform an action like state update
    timerId = null;
  }, 5000);

  // clear the timer when component unmouts
  return () => clearTimeout(timerId);
}, []);

```
Basic concepts in Cloud Computing
Tags: azure, cloudcomputing, deveops, basiconcept
Published: 2024-05-11 12:43:30

1.  What is Virtualization?
It is the process of creating a virtual version of something like computer hardware. It involves using specialized software to create a virtual or software-created version of a computing resource in place the actual version of the same resource. With the help of Virtualization, multiple operating systems and applications can run on the same machine and its same hardware at the same time, increasing the utilization and flexibility of hardware.  
That is to say, it is one of the major economical, hardware-reducing, and energy-efficient approach used by cloud providers

2.Scalability:
 the ability of an organization (or a system, such as a computer network) to perform well under an increased or amplifying workload.
Hence, it is the ability to increase or decrease IT resources as needed to meet changing demand
3.Agility
the ability to quickly develop, test, and launch applications in a cloud-based environment.

4.High Availability:
means that an IT system, component, or application have the ability to operate at a high level, continuously, without intervention, for a given time period,
a quality of computing infrastructure that allows it to continue functioning, even when some of its components fail.
High Availability in cloud computing is the ability of a system or application to remain accessible and operational for a long period of time. It is a key characteristic of cloud services that ensures they can handle different load levels and recover quickly from any failures.

5.Fault Tolerant:
a process that enables an operating system to respond to a failure in hardware or software. This fault-tolerance definition refers to the system's ability to continue operating despite failures or malfunctions.
It is about designing a blueprint for continuing the ongoing work whenever a few parts are down or unavailable. This helps the enterprises to evaluate their infrastructure needs and requirements, and provide services when the associated devices are unavailable due to some cause.

6.Global Reach:
The cloud transcends geographical boundaries, enabling organizations to establish a global footprint without the constraints of physical infrastructure.  its ability to have customers in many different parts of the world without the restraint of of physical facilities.

7.What is the difference between Elasticity and Scalability
Basically, scalability is about building up or down, like someone would with, say, a Lego set. Elasticity, meanwhile, entails stretching the boundaries of a cloud environment, like you would stretch a rubber band, to ensure end users can do everything they need, even in periods of immensely high traffic.
Elasticity refers to how fast your application can scale up or down based on demand, while scalability refers to how the system can handle much load. Elasticity and scalability are two critical factors to consider when building your application on the cloud.
PC Plumbing, Heating & Air
Published: 2024-05-11 12:30:48

Welcome to PC Plumbing, Heating & Air, your trusted one-stop solution for all your plumbing, heating, and cooling needs in Framingham. With years of expertise, we specialize in furnace repair, bathroom remodeling, kitchen remodeling, and air conditioning repair services. Whether it's fixing a faulty furnace, transforming your bathroom into a sanctuary, upgrading your kitchen, or ensuring your home stays cool during the summer months, our dedicated team is committed to delivering top-notch craftsmanship and exceptional service. Visit our website for more information and let us make your home comfort our priority.
01 Functional Programming in Javascript.
Tags: javascript, react, functional
Published: 2024-05-11 12:14:12

---
title: 01 Functional Programming in Javascript.
published: true
description: 
tags: #javascript #react #fp
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-05-11 11:30 +0000
---

> I am going to write a series of blogs on functional Programming in Javascript.

Javascript has the most important features needed for Functional Programming.

**1. First class function-** In JavaScript, you can treat functions like regular data. This means you can pass functions around as if they were just variables, give them as inputs to other functions, get them back as outputs from functions, and even store them in variables or inside objects. This feature lets you create what are called "higher-order functions," which can do cool things like filling in some function arguments for you (partial application), breaking functions into smaller parts (currying), and combining functions together (composition).

**2. Anonymous Function-** Arrow function or lambda function it makes easier to work with the Higher order function.

```javascript
 a => a * a
```

**3. Closure-** Closures are created at a function creation time. Closures are how partial applications get their fixed Arguments.

##### Whats Javascript missing to be a Functional Programming 


> JavaScript is a multi-paradigm language, meaning it supports programming in different styles. However, the disadvantage of this is that imperative programming, for example, tends to imply that almost everything needs to be mutable.

```javascript
const foo = {
  bar : 'baz'
}
foo.bar = 'wow'
```
the object properties are mutable so that object can modify them.
**1. Purity-** In some Functional Programming language purity is enforced by default, any expressions which contains side-effects are not allowed.

**2. Immutability-** In some fp language you can't mutate the data directly, you have to return a data each time.


 In upcoming blogs we will discuss about the Pure functions in depth.

Happy Learning!!
10 Ferramentas de Produtividade para Desenvolvedores Experimentarem em 2024
Published: 2024-05-11 12:03:23



No mundo dinâmico do desenvolvimento de software, a produtividade é crucial para o sucesso. Com tantas ferramentas disponíveis, pode ser difícil escolher as melhores para você. Para ajudar, preparei uma lista das 10 melhores ferramentas de produtividade para desenvolvedores experimentarem em 2024:

1. [Trello](https://trello.com/pt-BR): Organize suas tarefas e projetos com kanban, ideal para metodologias ágeis.

2. [Git](https://git-scm.com/): Um sistema de controle de versão essencial para colaboração e gerenciamento de código.

3. [GitHub](https://github.com/): Hospedagem de repositórios Git, gerenciamento de código e colaboração em projetos.

4. [Visual Studio Code](https://code.visualstudio.com/download): Um editor de código leve e personalizável com muitos recursos.

5. [Postman](https://www.postman.com/): Teste e depure APIs com facilidade.

6. [Docker](https://www.docker.com/): Crie e gerencie contêineres para portabilidade e implantação de aplicativos.

7. [Slack](https://slack.com/): Comunicação e colaboração em equipe em tempo real.

8. [Google Meet](https://meet.google.com/): Reuniões online e videochamadas com recursos de colaboração.

9. [LastPass](https://lastpass.com/?ac=1): Gerencie senhas com segurança e facilidade.

10. [1Password](https://1password.com/): Outra ótima opção de gerenciador de senhas com recursos adicionais.

**Bônus:**

- **Linhas de comando:** Aprenda a usar a linha de comando para automatizar tarefas e aumentar sua produtividade.
- **Ferramentas de automação:** Explore ferramentas como o Zapier ou Integromat para automatizar tarefas repetitivas.

**Lembre-se:**

- Escolha as ferramentas que melhor atendem às suas necessidades e estilo de trabalho.
- Experimente diferentes ferramentas para encontrar as que você mais gosta.
- Invista em treinamento e tutoriais para aproveitar ao máximo as ferramentas escolhidas.

Com as ferramentas certas, você pode aumentar sua produtividade, melhorar o fluxo de trabalho e alcançar seus objetivos de desenvolvimento de software com mais eficiência.
Caption This! 🤔💭
Tags: watercooler, discuss
Published: 2024-05-11 12:00:00

Time to show off your captioning chops! We need your genius to bring this captivating moment to life!

![Person with an alien mask looking at a husky dog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9e7pcv33fs3bumr08x9.jpg)

Follow the DEVteam for more online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
Angular: MaxListenersExceededWarning
Tags: help
Published: 2024-05-11 11:58:54


Hi


I get the following Error while starting.

```(node:20640) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [Server]. 

Use emitter.setMaxListeners() to increase limit
(Use `node --trace-warnings ...` to show where the warning was created)```
What can I do?

Thanks for any help