teleren/devto huggingface dataset:
F1 app made in react
Tags: react, showdev, junior, f1
Published: 2024-06-21 17:54:38

Hello! I am new in this world of programming and I have decided to join two of my passions: programming and formula 1. to create this app I have used the [ergast](https://ergast.com/mrd/) api and as framework I have used React, the project is still in process, there is still a lot to do but it is on the right track 😊
you can see the web [here](https://f1-app-sigma.vercel.app) and the github repository [here](https://github.com/ItzAle/f1-app)

any help and opinion is welcome （*＾-＾*）
Remote-first companies we should know about 🤔
Tags: discuss, beginners, programming, career
Published: 2024-06-21 17:49:39

Hi everyone, I'm not sure how many of u are working remotely, but I'm sure there is quite a bit of you.

I want to create a <u>[directly of software companies with a remote-first  culture](https://github.com/devs-on-remote/remote-first-software-companies)</u>, that don't treat this just as a fancy word, but actually mean it. 

I've created a [repo](https://github.com/devs-on-remote/remote-first-software-companies) where I'll be adding them one by one **with some meaningful information** like:

- language used within the organisation
- size
- careers page
- most used tech stack 

**Does anyone of u have some suggestions? Who should I add? :D**

---
PS: btw I'm building a job board for remote developers and companies with remote-first culture. If you are interested here is a link: [devsonremote.com](https://devsonremote.com/)
Production Level Context with Next.js (Typescript) 🔥
Tags: webdev, nextjs, javascript, react
Published: 2024-06-21 17:42:52

## Connect 👋
- [Xam](https://github.com/Subham-Maity)
- [LinkedIn](https://www.linkedin.com/in/subham-xam/)

### Setup 

First, let's create a file for defining the context (let's call it `app-context.ts`):

```tsx
import React from "react";

export interface ContextState {
  name: string;
}

export interface ContextDispatch {
  setName: React.Dispatch<React.SetStateAction<string>>;
}

type ContextProps = ContextState & ContextDispatch;

const defaultState: ContextState = {
  name: "Hello",
};

const defaultDispatch: ContextDispatch = {
  setName: () => {},
};

const defaultContext: ContextProps = {
  ...defaultState,
  ...defaultDispatch,
};

const AppContext = React.createContext<ContextProps>(defaultContext);

export default AppContext;
```

Now, let's create a file for the provider component (let's call it `app-context-provider.tsx`):

```tsx
"use client";
import React, { useState } from "react";
import AppContext, { ContextState, ContextDispatch } from "./appContext";

interface AppProviderProps {
  children: React.ReactNode;
}

const AppProvider: React.FC<AppProviderProps> = ({ children }) => {
  const [name, setName] = useState<string>("Hello");

  const contextState: ContextState = {
    name,
  };

  const contextDispatch: ContextDispatch = {
    setName,
  };

  return (
    <AppContext.Provider value={{ ...contextState, ...contextDispatch }}>
      {children}
    </AppContext.Provider>
  );
};

export default AppProvider;
```

Finally, let's create a custom hook for using the context (you can put this in a separate file or in the `index.ts` file):

```tsx
import { useContext } from "react";
import AppContext from "./appContext";

export function useAppContext() {
  return useContext(AppContext);
}
```

Now you can use it in your application like this:

Wrap your app or a part of it with the `AppProvider`:
`layout.tsx`

```tsx
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${inter.className} bg`}>
        <AppProvider>{children}</AppProvider>
      </body>
    </html>
  );
}
```

### Use the context in your components:
`a-component.tsx`
```tsx
"use client";
import React from "react";
import { useAppContext } from "@/context";

const AComponent = () => {
  const { setName } = useAppContext();
  return (
    <div>
      <button
        className="default-button"
        onClick={() => {
          setName("Subham Maity");
        }}
      >
        Change The Name
      </button>
    </div>
  );
};

export default AComponent;
```
`b-component.tsx`
```tsx
"use client";
import React from "react";
import { useAppContext } from "@/context";

const BComponent = () => {
  const { name } = useAppContext();
  return (
    <div>
      <p>{name}</p>
    </div>
  );
};

export default BComponent;
```

This structure provides better type safety, separates concerns, and is more scalable. It's easier to add new state variables and update functions as your app grows.
What is Adobe Experience Manager(AEM) & it's Features
Tags: aem, webdev
Published: 2024-06-21 17:24:56


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

> Adobe experience manager(AEM) is a content management systems(CMS)
> for building website , mobile aaps , forms . It enables organizations to create, manage, and deliver digital experiences across various channels, ensuring consistency and relevance.

## Key features
**Content Management **: AEM Provides powerful tools for creating , editing and managing web content. It allows content authors to build and update websites with a WYSIWYG editor, without needing extensive technical knowledge.

**Digital Asset Management(DAM)**: AEM include DAM system for managing rich media like images , videos , documents.

**Multi-site Management**: AEM support managing multiple websites from a single platform. It allows for content reuse, localization, and regionalization, making it easier to maintain consistency across global sites.

**Responsive Design**: AEM provides tools for creating responsive and adaptive designs, ensuring that websites look and function well on various devices and screen sizes.

**Forms and Documents**: AEM Forms enables the creation and management of forms and documents, supporting use cases like applications, surveys, and customer correspondence.

**Commerce Integration**: AEM integrates with e-commerce platforms to deliver personalized and consistent shopping experiences across all digital touchpoints.

**Extensibility**: AEM is highly extensible, allowing developers to create custom components, templates, and services. It supports integration with third-party systems through APIs and connectors.

## Use Cases for AEM
**Corporate Websites**: AEM is used to build and manage large corporate websites that require frequent updates, localization, and integration with marketing tools.

**E-commerce**: Online retailers use AEM to deliver personalized shopping experiences, integrate with back-end systems, and manage digital assets.

**Government Portals**: Government agencies use AEM for managing large volumes of content, ensuring accessibility, and delivering services to citizens.

**Media and Entertainment**: Media companies use AEM to manage digital assets, streamline content workflows, and deliver engaging multimedia experiences.

**Financial Services**: Banks and financial institutions use AEM to create secure, compliant, and personalized digital experiences for customers.
🗞 Rapyd Developer Newsletter: June 2024 💳 🔗 Rapyd Payment Gateways + Save Card Details Toolkit Integration
Tags: rapydnews, fintech, payments, tutorial
Published: 2024-06-21 17:39:16

##### [**API Changelog**](https://docs.rapyd.net/en/api-changelog.html) | [**Product Changelog**](https://docs.rapyd.net/en/product-changelog.html)

---

[**Building an Ecommerce Travel Agency Website with the Rapyd Payment Gateway**](https://community.rapyd.net/t/building-a-travel-agency-website-with-the-rapyd-payment-gateway/59353) – Use the Rapyd Payment Gateway to support your online business. From travel agencies to e-commerce, the payment possibilities through Rapyd Collect are limitless. 

[**High-Opportunity Industries Payments Report**](https://community.rapyd.net/t/73-of-businesses-struggle-with-payment-delays-according-to-rapyd-s-2024-state-of-payments-for-high-opportunity-industries/59349) – Essential insights from Rapyd's latest report every developer should know. Discover how high-opportunity industries are fast-growing, highly profitable, and have unmet payment needs.

[**Python Beta Testers Program **](https://community.rapyd.net/t/join-our-python-beta-testers-program/59354) – Demonstrate your skills as a Python developer by joining the Beta Testers Program. Access the latest features and tools while networking with other Python developers.

[**Integrate With the Hosted Save Card Details Toolkit**](https://docs.rapyd.net/en/hosted-save-card-details-page.html) – Check out our updated documentation for the Save Card Details Toolkit. Integrate seamlessly and embed the best solution for your business website.

[**Historical FX Rates**](https://community.rapyd.net/t/query-regarding-access-to-historical-foreign-exchange-rates-via-rapyd-api/59287) – See your questions get answered in the Rapyd Developer Community. Utilize the Rapyd API and our documentation to find out about historical FX rates. 

[**KYB Application Updates**](https://docs.rapyd.net/en/activating-your-account--kyb-.html) – The user experience for the Know Your Business (KYB) Application has been updated. Learn how to quickly verify your business to begin transacting with Rapyd. 

---

Do you have ideas for improving this newsletter, or do you wish to contribute an article or join a panel? Let us know by responding. 

Thanks for reading, 
Drew, McKay, and the entire Rapyd team
💅🏻CSS-in-JS is Making a Comeback: What’s New?
Tags: javascript, css, webdev, design
Published: 2024-06-21 17:35:41

So, it looks like we are changing the direction of how we write CSS.

At first, I didn't like writing CSS-in-JS. It seemed unnecessary, but then I had a job where they only used styled-components, and I guess I adapted. 

I didn't understand why we needed a library to write CSS when we could just use stylesheets directly or something like Tailwind CSS. But now that I’m a more experienced developer (I think), I kind of get why people love these libraries so much.

JavaScript frameworks are always changing direction from time to time, and now with React Server Components and React 19 supporting style hoisting, it feels like we’re heading into a new era. React 19 introduces new features that handle `<script>` and `<style>` tags inside components more intelligently, moving them to the document's head based on their precedence. This works seamlessly with concurrent rendering on the client and streaming rendering on the server, marking a significant shift in how we manage styles and scripts.

Some of these cool libraries are really embracing this change:

- [Panda CSS](https://panda-css.com/)
- [Stylex](https://stylexjs.com/blog/introducing-stylex)
- [Pigment CSS](https://mui.com/blog/introducing-pigment-css/)
- [ReStyle](https://www.restyle.dev/)
- [Stitches](https://stitches.dev/)

---

Inspiration

- [Bytes](https://bytes.dev/archives/298)

<p align="center"><em>This article was crafted and tailored with ChatGPT help.</em> 🤖💡</p>
Teste do Capítulo 1
Tags: java, javaprogramming, javaparainiciantes
Published: 2024-06-21 17:27:26

Apêndice A Respostas dos testes (página 604)

**1. O que é bytecode e por que ele é importante para o uso de Java em programação na Internet?**
Bytecode é um conjunto de instruções altamente otimizado que é executado pela Máquina Virtual Java. Ele ajuda Java a fornecer portabilidade e segurança.

**2. Quais são os três princípios básicos da programação orientada a objetos?** Encapsulamento, polimorfismo e herança

**3. Onde os programas Java começam a ser executados?**
Os programas Java começam a ser executados em main( )

**4. O que é uma variável?**
Uma variável é um local nomeado na memória. O conteúdo de uma variável pode ser alterado durante a execução de um programa.

**5. Qual dos nomes de variável a seguir é inválido?**
 A. count
 B. $count
 C. count27
 D. 67count
R: A variável inválida é a da opção D. Nomes de variável não podem começar com um dígito.

**6. Como se cria um comentário de linha única? E um comentário de várias linhas?** Um comentário de linha única começa com // e termina no fim da linha. Um comentário de várias linhas começa com /* e termina com */.

**7. Mostre a forma geral da instrução if. Mostre também a do laço for.**
Forma geral de if:
if(condição) instrução
Forma geral de for:
for(inicialização; condição; iteração) instrução;

**8. Como se cria um bloco de código?**
Um bloco de código começa com uma chave de abertura e termina com uma chave de fechamento.

**9. A gravidade da Lua é cerca de 17% a da Terra. Crie um programa que calcule seu peso na Lua.**

```
/*
 Calcula seu peso na Lua.
 Chame este arquivo de Moon.java.
*/
class Moon {
 public static void main(String args[]) {
    double earthweight; // peso na Terra
    double moonweight; // peso na Lua
    earthweight = 165;
    moonweight = earthweight * 0.17;
    System.out.println(earthweight + " earth-pounds is equivalent to " + moonweight + " moon-pounds.");
   }
}

```

**10. Adapte o código da seção Tente isto 1-2 para que ele exiba uma tabela de conversões de polegadas para metros. Exiba 12 pés de conversões, polegada a polegada. Gere uma linha em branco a cada 12 polegadas.** (Um metro é igual à aproximadamente 39,37 polegadas.)

```
/*
 Este programa exibe uma tabela de
 conversão de polegadas para metros.
 Chame-o de InchToMeterTable.java.
*/
class InchToMeterTable {
 public static void main(String args[]) {
     double inches, meters;
     int counter;
     counter = 0;
         for(inches = 1; inches <= 144; inches++) {
             meters = inches / 39.37; // converte para metros
             System.out.println(inches + " inches is " + meters + " meters.");
            counter++;
            // a cada 12 linhas, exibe uma linha em branco
            if(counter == 12) {
                System.out.println();
                counter = 0; // zera o contador de linhas
            }
          }
         }
}
```

**11. Se você cometer um engano na digitação ao inserir seu programa, isso vai resultar em que tipo de erro?** Erro de sintaxe. 

**12. É importante o local onde inserimos uma instrução em uma linha?**
Não, Java é uma linguagem de forma livre.
Palavras-Chaves
Tags: java, javaprogramming, javaparainiciantes
Published: 2024-06-21 17:21:01

**Conceitos Chave de Java:**

**- Palavras-chave:**
 Java possui 50 palavras-chave reservadas, como int, for, if, etc.

**- Identificadores:**
 Nomes de variáveis, métodos ou classes que devem ser significativos e não podem começar com dígitos ou usar palavras-chave reservadas.

**- Bibliotecas de Classes:**
 Java fornece diversas bibliotecas padrão, como System, que contém métodos println() e print(), fundamentais para operações básicas de I/O.


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

Além das palavras-chave, Java reserva as palavras a seguir: true, false e null. São valores definidos pela linguagem. Você não pode usar essas palavras em nomes de variáveis, classes e assim por diante.
Top 10 Futuristic Gadgets of 2024 That Are Redefining Technology
Tags: webdev, futuretech, technology, ai
Published: 2024-06-21 17:20:06

In 2024, technology is advancing at an unprecedented rate, bringing futuristic gadgets to life that promise to revolutionize how we live, work, and play. Here are ten real-life products set to amaze and inspire in the near future:

1. Tesla Bot: Elon Musk’s Tesla Bot is a humanoid robot designed by Tesla, led by Elon Musk. It aims to automate tasks that are repetitive, dangerous, or tedious for humans.

2. Meta (formerly Facebook) Reality Labs Glasses: Meta’s Reality Labs is developing augmented reality (AR) glasses that integrate digital information with the physical world.

3. IBM Quantum System Two: IBM’s Quantum System Two represents a leap forward in quantum computing, offering enhanced capabilities for solving complex problems. It’s paving the way for breakthroughs in fields like cryptography, materials science, and drug discovery.

4. Microsoft HoloLens 3: The Microsoft HoloLens 3 is an advanced mixed reality headset that combines virtual and augmented reality experiences.

5. Amazon Astro: Amazon Astro is a home robot equipped with  AI and sensors to assist with household tasks and entertainment.

6. Apple AR Glasses: Apple’s AR Glasses are rumored to revolutionize augmented reality experiences with seamless integration into Apple’s ecosystem.

7. Neuralink: Neuralink, founded by Elon Musk, aims to develop brain-computer interface technology to connect the human brain directly with machines. In 2024, advancements could enable individuals to control devices and interact with computers directly through their thoughts, with potential  applications in healthcare and accessibility.

8. Boston Dynamics Stretch: Boston Dynamics’ Stretch is a robotic arm designed for warehouse automation and logistics  applications.

9. Samsung Freestyle Projector: Samsung’s Freestyle Projector is a portable smart projector capable of projecting images onto any surface.

10. Sony Airpeak S1: Sony Airpeak S1 is a professional-grade drone designed for filmmakers and content creators.



[Read the complete article for more details.](https://futuristicgeeks.com/top-10-futuristic-gadgets-of-2024-that-are-redefining-technology/)
Tente Isto 1-2 Melhore o conversor
Tags: java, javaprogramming, javaparainiciantes
Published: 2024-06-21 17:17:37


**Resumo do Artigo sobre a Criação de um Conversor de Galões para Litros em Java**

**- Objetivo:**
Criar uma versão aprimorada do conversor de galões para litros utilizando laço for, instrução if e blocos de código. A nova versão exibe uma tabela de conversão de 1 a 100 galões, inserindo uma linha em branco a cada 10 galões.

- Passos para Implementação:

**- Criar o Arquivo Java:**

Nomeie o arquivo como GalToLitTable.java.

**- Código do Programa:**

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

**Compilação e Execução:**

- Compile o programa com o comando:
javac GalToLitTable.java

- Execute o programa com o comando:
java GalToLitTable

- Funcionamento do Programa:

1. Inicialização do Contador: 
O contador de linhas começa com zero.

- Loop de Conversão:
 O loop for vai de 1 a 100 galões, calculando a conversão para litros.

- Contagem e Linha em Branco:
 A cada 10 iterações (linhas), uma linha em branco é exibida e o contador é resetado para zero.

**- Exemplo de Saída:**

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

até 100
Top 10 Security Tips to Avoid Becoming a Victim of Cybercrime
Tags: cybersecurity, cyberawareness, onlinefraud, webdev
Published: 2024-06-21 17:15:21

In an increasingly digital world, the threat of cybercrime is ever-present, affecting individuals, businesses, and governments globally. Here are ten essential security tips, bolstered by facts and figures, to help safeguard yourself against cyber threats.

1. Understanding the Scale of Cybercrime

2. Use Strong, Unique Passwords

3. Enable Two-Factor Authentication (2FA)

4. Keep Software Updated

5. Beware of Phishing Scams

6. Secure Your Devices

7. Limit Information Sharing

8. Backup Important Data

9. Educate Yourself and Others

10. Monitor Financial Accounts

[Click here](https://futuristicgeeks.com/top-10-security-tips-to-avoid-becoming-a-victim-of-cybercrime/) Explore the full article here.
Made a Assignment Generator
Tags: python, flask, webdev, javascript
Published: 2024-06-21 17:11:07

I had just one day left to submit my semester-long assignment. The requirement was that it had to be a handwritten note that was typed out. Feeling completely lost and too lazy to do it myself, I remembered a project I saw years ago. It involved users inputting text, and a program generating a realistic image of a handwritten assignment. At the time, I dismissed it as unnecessary, but now it inspired me. So, I decided to create my own code to generate the assignment with minimal effort.

Website: https://homeworkai.adarshgupta.co/

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

It's very simple to use just paste whatever you want and it will generate a realistic image of your homework. I am planning to add an AI feature to complete all the work just by prompt using open API.
What was your win this week?
Tags: weeklyretro
Published: 2024-06-21 17:08:26

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Finding a moment to decompress 😄

![person relaxing in a pool](https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExemswY295bWF2M3BqMXhiYmtuY3IxOG9xZ2o1bTZvb3V5dG85Z2VpMCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/rt80ZWx34AZdPEc23o/giphy.gif)

Happy Friday!
🧩 JavaScript Closures 🧩
Tags: techlife, javascript, 100daysofcode, codinglife
Published: 2024-06-21 16:59:44

I've been exploring the power of JavaScript closures. Closures are a fundamental concept in JavaScript that allow functions to retain access to their lexical scope, even when executed outside of that scope. This can be incredibly useful for creating private variables and functions.

Here's a simple example to illustrate closures:


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

What's Next?

I'm currently enhancing my skills in JavaScript and React, and I'm eager to transition into the full-stack space. The journey has been challenging but incredibly rewarding, and I'm excited about the new opportunities and knowledge that lie ahead.

Thank you all for your support and encouragement! Feel free to ask me anything about my journey or the tech concepts I'm exploring. Let's keep pushing the boundaries of what's possible with code! 💻✨

#TechJourney #FullStackDeveloper #JavaScript #React #CodingLife #SelfTaughtDeveloper  #100DaysOfCode
Configuring and Deploying VPCs
Tags: aws
Published: 2024-06-21 16:48:20

🚀 Exciting News! 🚀

I'm thrilled to announce that I've achieved AWS certification! 🎉

After months of dedicated learning and hard work, I am now officially certified with this certificate. This journey has been incredibly rewarding, and I'm looking forward to leveraging this knowledge to drive innovation and efficiency in cloud computing.

A huge thank you to everyone who supported me along the way. Your encouragement and guidance meant the world to me.

Let's continue to push boundaries and explore new possibilities with AWS! 💡
Migration Evaluator Overview of Customers
Tags: aws
Published: 2024-06-21 16:47:36

🚀 Exciting News! 🚀

I am thrilled to announce that I have achieved my AWS certification! 🎉 After months of hard work and dedication, I am now certified with this certificate. This accomplishment signifies my commitment to mastering AWS services and best practices, enhancing my skills in cloud computing and infrastructure management.

I am grateful for the support of my colleagues, mentors, and the invaluable resources provided by AWS. This journey has been incredibly rewarding, and I look forward to applying my knowledge to deliver innovative solutions and contribute effectively to our projects.

Thank you all for your encouragement and belief in my abilities. Let's continue to strive for excellence together!
Amazon EBS Primer
Tags: aws
Published: 2024-06-21 16:43:08

🚀 Exciting News! 🚀

I'm thrilled to announce that I've achieved AWS certification! 🎉

After months of dedicated learning and hard work, I am now officially certified with this certificate. This journey has been incredibly rewarding, and I'm looking forward to leveraging this knowledge to drive innovation and efficiency in cloud computing.

A huge thank you to everyone who supported me along the way. Your encouragement and guidance meant the world to me.

Let's continue to push boundaries and explore new possibilities with AWS! 💡