teleren/devto huggingface dataset:
React Context Hook
Published: 2022-12-07 00:05:26

React Context is a vital tool that allows for easy sharing of data throughout your application.

## What is React Context?

React Context is a method in which data can be shared without having to manually pass down props through several nested children components.

From reactjs.org

> Context provides a way to pass data through the component tree without having to pass props down manually at every level.


## When to use React Context?

Context is best used when sharing data that is considered "global."

Some examples may include:

User authentication
User settings
Language
Themes

React Context helps us solve the problem of **prop drilling**, a term used to describe when props are passed down through multiple levels of components.

Let's look at an example of this. Here, we have some data living in ComponentA and we need that data passed to ComponentD.

```
const ComponentA = () => {
	const [data, setData] = useState("")
	return (
		<ComponentB data={ data } />
	)
}

const ComponentB = ({ data }) => {
	return (
		<ComponentC  data={ data } />
	)
}

const ComponentC = ({ data }) => {
	return (
		<ComponentD  data={ data } />
	)
}

const ComponentD = ({ data }) => {
	return (
		<h1>"Hello World!"</h1>
		<h1>{ data }</h1>
	)
}
```

As you can see, data is being passed at each level, but is not actually used in the middle components. This process can be tedious.

## Using React Context

When using React Context, we must do three things: create, provide, and consume.

1. Create

Create a new file that uses `createContext` and exports a `Provider` wrapper:

```
import React, { createContext, useState } from 'react'

export const Context = createContext()

export const ContextProvider = ({ children }) => {
	const [data, setData] = useState({})
	
        return (
                <ContextProvider.Provider value={{ data }} >
                        { children }
                </ContextProvider.Provider>
	)
}
```

Within our provider wrapper, we are able to pass a value prop that will contain our data.

2. Provide

Now that we have our context created, lets add it to our example.
To do this, we will have to import the provider to one level above the consuming component. In this case, ComponentD only needs the data, so we have to import our provider to ComponentC.

```
import React from 'react'

import { ContextProvider } from './Context'
import { ComponentD } from './ComponentD'

const ComponentC = () => {
        return (
                <ContextProvider>
                        <ComponentD />
                </ContextProvider>
        )
}
```




3. Consume

And finally, we can now consume the data in ComponentD by using the `useContext` hook.

```
import React, { useContext } from 'react'

import { Context } from './Context'

const ComponentD = () => {
        const { data } = useContext(Context)
	return (
		<h1>"Hello World!"</h1>
		<h1>{ data }</h1>
	)
}
```

And that is it!

## Conclusion

Context can be a great tool to use for supplying child components with global data, regardless of how deeply they are nested.
The Easiest Way to Clone a PostgreSQL Database
Published: 2022-12-07 00:00:32

If you use a managed database service like AWS RDS or Google Cloud SQL, it is super easy to create a snapshot and create a new instance based on this snapshot, but there is an even easier way to clone a database. At [Redactics](https://www.redactics.com) our use case was building automated workflows to test your database migrations against a copy of your production database (and, incidentally, this is free for use in case this is of interest to you), but there are likely dozens of additional use cases. For example, you may want to A/B test against a particular database or query optimization.

This approach leverages PostgreSQL's support for Linux pipes, and the fact that `pg_dump` output can be directed into `pg_restore` as input. This approach means that what would normally be two steps can be combined into one, and you don't need to set aside a bunch of disk space for this task.

```sql
pg_dump -h [DB_hostname] -U [username] -W -d [source_database] -v -Fc | pg_restore -h [DB_hostname] -U [username] -W -v -d [destination_database]
```

Since you likely need for this to be run without interaction, i.e. entering the database password, you might need to create a [.pgpass file](https://www.postgresql.org/docs/current/libpq-pgpass.html) or leverage [environment variables](https://www.postgresql.org/docs/current/libpq-envars.html) for storing this info. This will allow you to remove the `-h`, `-U`, and `-W` arguments.
PHAISTOS - A generalized data exchange framework and validation tool
Tags: json, data, javascript, programming
Published: 2022-12-06 23:17:38

PHAISTOS is a platform with which you can create validation models (schemas) for any kind/type of information, structured in JSON, and then share/exchange any data using the predefined model you define.

When sending or receiving, both sides (providers & consumers), can validate the data and make sure it conforms to the original schema as originally defined.

Now, all of that is useful when you have big data platforms acting as data brokers and/or aggregators, because it helps simplify internal operations on data before it reaches storage (like a database).

PHAISTOS is also a good utility that can be used alongside FIWARE.

Finally, with the same logic, you can use it to define confirmation models for functions/methods that have many parameters so that you don't waste infinite time with "if, then, else" so that you make sure the data that are passed arguments have indeed, the correct data type, size, etc.

The only thing that PHAISTOS does not do is to control the logic... Oh and also does not make coffee!
In a future version maybe though! 😛

Here's a real-life example that showcases PHAISTOS functionality.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x60vwpytpvvmgfcxamtl.PNG)

We start with: `var my_validator = new phaistos();`
You will see the model (schema) that I am creating to tell to the system what structure I expect and with what data, size, etc. what are the optional fields and how many are the parameters.

Then, I write the following code to set my definition model to the system: `my_validator.define(config_defintion_model);`

Finally, I write a configuration that "sits" on the schema. The entire validation process is done by PHAISTOS with:
`my_validator.validate(taurus_config);`

To do all the above in one line (define and validate) I write:
`my_validator.verify(config_defintion_model, taurus_config);`

So, practically speaking, we would say that PHAISTOS introduces and reconstructs, peripherally, the logic of a code in a stricter "Design by contract" philosophy, which obviously has much fewer errors.

FYI, the PHAISTOS core and libraries, are part of the micro-MVC framework.

Download PHAISTOS from https://github.com/g0d/PHAISTOS
Pickvisa.com - Passport full of stamps, rather than a house full of stuff
Tags: ecommerce, travel
Published: 2022-12-06 23:48:32

Pickvisa is an online visa services platform for travelers worldwide. The startup provides automated services in travel, education, and business trip visas to various countries.

Visa application processes are complex, time-consuming, and require a detailed approach. Pickvisa does its best to help its customers to get a visa and minimizes their involvement in the process. The user-friendly interface of the website, specialization exclusively in visa issues, and wide database consisting of all information about visa requirements of any country worldwide make Pickvisa unique in the service market.

[https://pickvisa.com](https://pickvisa.com)
Advent of Code and Dash API Browser
Tags: dash
Published: 2022-12-06 23:44:37

---
title: Advent of Code and Dash API Browser
published: true
description: Sharing my experience with Dash
tags: dash
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-06 23:38 +0000
---

Each year when I do the [Advent of Code challenge](https://adventofcode.com/) I use it as an opportunity to learn a new language or tool chain. This year I am writing in Java 17 (I have not used Java since Java 8), along with [Eclipse Collections](https://www.eclipse.org/collections/), and using VS Code as my IDE.

Since I have never used Eclipse Collections before, I have installed the API documentation into [Dash for macOS](https://kapeli.com/dash), which is an API Documentation Browser and Code Snippet Manager. I have used Dash for a long time, and love the integration with Alfred to quickly lookup documentation for a method/class.

![Basic Alfred Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75oesnookloi833eljlg.gif)

Despite using Dash for years, I only just discovered the [search profiles feature](https://kapeli.com/dash_guide#searchProfiles), which allows you to define a custom collection of docsets search, rather than all documentation. Very handy when wanting to filter down and ignore other large docsets like Spring or Kotlin. The custom docset can be triggered by multiple things like a keyword, or the fact that an application like VS Code is open.

![Access Search Profiles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bx0x391d1qrpvr3im3d.gif)

Another nice touch is that the keyword is integrated into Alfred.

![AOC Alfred Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chg93mg1hlvb10qwxi2d.gif)

The only frustration I have with Dash is that it does not understand inherited methods for Java types. So for a while there I was struggling to understand the true power of Eclipse Collections, as I could not see all the available methods on a type. The only workaround I have is search on the page to find "Methods Inherited". It is rather sub-optimal.

![Find Methods Inherited](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yo4jlhh7fp11oyi6z517.gif)

eom.
Leadership in Software Engineering
Tags: programming, productivity, career, management
Published: 2022-12-06 23:37:31

Leadership in programming is a crucial but often overlooked aspect of software development. Effective leadership can help teams produce higher quality code, stay organized, and meet deadlines. It can also create a positive work environment and improve morale among team members.

But what makes a good leader in the world of programming? Here are a few key qualities to look for:

Technical expertise: A good leader in programming should have a deep understanding of the technical aspects of the work. This includes not just knowing how to write code, but also being familiar with industry best practices, design patterns, and new technologies. This expertise allows the leader to make informed decisions, provide guidance to team members, and troubleshoot problems as they arise.

Communication skills: In a team setting, clear and effective communication is essential for success. A good leader in programming should be able to communicate complex technical ideas in a way that is understandable to both technical and non-technical team members. They should also be able to listen to others, ask the right questions, and provide constructive feedback.

Collaboration: Programming is a collaborative endeavor, and a good leader should be able to work well with others. This includes not only the members of their own team, but also other stakeholders such as project managers, designers, and business leaders. A good leader should be able to foster collaboration and create an environment where team members feel comfortable contributing their ideas and working together towards a common goal.

Mentorship: As a leader in programming, you should be able to provide guidance and support to team members. This can include helping them develop their technical skills, providing career advice, and serving as a sounding board for their ideas. A good leader should be able to foster a culture of learning and growth within the team.

Overall, effective leadership in programming is essential for the success of any software development project. By possessing the qualities outlined above, a leader can help their team produce high-quality code, stay organized and on track, and create a positive and collaborative work environment.
Olá mundo
Tags: webdev, frontend, css
Published: 2022-12-06 23:34:53

Este é meu primeiro post, espero estar compartilhando aqui todos os dias algo novo. 
O blog em sí já é algo novo para min vou deixar aqui soluções de problemas , hacksinhos e dicas relacionadas ao front end inicialmente. 

Hoje vou mostrar como escrever olá mundo na tela com CSS, e quebrar a maldição de não ser um bom blogueiro .

No html vou deixar somente uma tagsinha de span para fazer essa brincadeira : 

```
<span></span>
```
A estrutura base do html é importante para que o navegador reconheça a tabela de caracteres, lingua e versão do html, mas para rodar na sua maquina local não tem problema colocar só o span. 
Agora vamos ao CSS: 
```
span::before{
  content:"Olá "
}
span::after{
  content:"mundo"
}
```

Aqui nos temos pseudo elementos indicados por ` ::before ::after ` , um  significa antes e o outro depois, ou seja, da nossa tag spam. 
O content significa o conteudo, que nesse caso é um texto. Ao fazer a inserção do texto pelo css ele é inserido na folha de html e impresso no navegador, porêm não aparece no resultado das buscas dos navegadores, portanto não são semanticos, é bom ter isso em mente caso use essa tecnica para inserir texto 😉. 

Ai está nosso olá mundo, e a maldição de ser um mal blogueiro está quebrada rs.
Meta-Script :: A meta-language for the Meta-OS (GreyOS)
Tags: webdev, javascript, os, opensource
Published: 2022-12-06 23:30:15

"Let's learn meta-scripting..."

I truly believe that the Meta-OS is the future, and GreyOS may be the first of its kind, but certainly not the last.

Therefore, I feel the necessity to introduce the concept of meta-scripting with the language Meta-Script on GreyOS (worlds' first Meta-OS).

Meta-Script is essentially JavaScript that obeys, "lives" and works in GreyOS and within very specific contexts.

With Meta-Script one can write applications with a few lines in the GreyOS environment using Cloud Edit (the default text and code editor, for now).

In the following images you will see the example of an application, a service and a program that combines all. Additionally, another two images illustrate the Meta-Script API for applications and services.


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3o47523c0c7fnai25kce.PNG)

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ay99qhcto1ph3tvpz7y.PNG)
Realtime multi user chat in react and node.js
Tags: tutorial, react, node, programming
Published: 2022-12-06 23:27:52

It is possible to implement realtime multi-user chat in React and Node.js. There are several libraries and frameworks that you can use to do this, such as Socket.io, which provides a simple and easy-to-use interface for realtime bi-directional communication between clients and servers.

Here is an example of how you might go about implementing realtime chat using Socket.io in a React and Node.js application:

First, install the Socket.io library on the server side by running the following command:

```
npm install socket.io
```

Then, in your server-side code, create a Socket.io instance and listen for incoming connections:

```
const io = require('socket.io')(server);

io.on('connection', socket => {
  // Handle incoming messages
  socket.on('message', message => {
    // Broadcast the message to all connected clients
    io.emit('message', message);
  });
});

```
On the client side, install the Socket.io client library:

```
npm install socket.io-client

```

In your React code, create a Socket.io client instance and listen for incoming messages:

```
import io from 'socket.io-client';

const socket = io('http://localhost:3000');

socket.on('message', message => {
  // Handle incoming messages
});

```

To send a message, simply use the send() method on the Socket.io client instance:

```
socket.send('Hello, world!');

```
This is just a simple example of how you can implement realtime chat using Socket.io in a React and Node.js application. There are many other libraries and frameworks that you can use for this purpose, and the specific implementation details will vary depending on your requirements and preferences.
Why Reading Documentation is Important
Tags: javascript, webdev, react, programming
Published: 2022-12-06 23:06:19

_**INTRODUCTION**_
Documentation is one of the most important resource a developer can have. When a new technology, framework  or library is designed, the developers make a documentation explaining how to use that technology.

**MY EXPERIENCE**
When I started learning React I never really read the documentation. I always watched tutorials, which is good. But I later realized I missed quit a number of lessons I would have learnt if I had also reported to the official react documentation. Recently I developed a project and used an npm package ( react-intersection-observation) for detecting the presence of a component in the view port. I came across this package in a youtube tutorial which did exactly what I wanted and I never saw the importance in reading the documentation. During the project, I wanted to trigger the detection once but I couldn't. I did a try and error using useState and useEffect here and there but to no avail. I finally decided to check the documentation only to find out there was a triggerOnce property that would do what I wanted. I had already wasted the time and I could never retrieve it.

**HOW TO LEARN FROM DOCUMENTATION**
Whichever way you prefer to learn a new technology, whether by watching tutorials, reading a book or having someone teach you always take time to go through the official documentation. Take an example like learning React, after learning react hooks by watching tutorial or otherwise, refer to the section o the official documentation about hooks. Take time and go through, chances are you'll find something new or get a clearer explanation on something you didn't quite get which will save you hours of debugging.

**CONCLUSION**
I would like to conclude with this qoute.
`10 hours of debugging can save you 1 hour of reading documentation `- Anonymous 
- Sounds funny but I have experienced this many times. It's still not a habit to me but though conscious effort I know it'll become an habit. Also try visiting official documentation when you receive unusual error and chances are you'll find the solution hidden there. 
- Please don't forget to buy me a coffee, [Mathias Martey](https://www.buymeacoffee.com/mathiasmartey). Follow me on twitter [@blaq_xcobar](https://twitter.com/blaq_xcobar)
An alternative PHP & JS framework for building frameworks, web apps and websites
Tags: webdev, framework, mvc, programming
Published: 2022-12-06 23:04:09

[micro-MVC](https://github.com/g0d/micro-MVC) is an agile, small, productive and robust MVC framework for PHP (with integrated AJAX support).

micro-MVC is a simple, agile and powerful MVC framework that empowers developers to write AJAX-based or MVC-based code very quickly. Although there are tons of free and open source MVC frameworks out there, they usually end up becoming too complicated as they are stuffed with a bunch of infinite extensions that only 5% of developers really use them at some point.

micro-MVC is trying to be hassle free, straightforward and helps you stay on track. micro-MVC API is robust and solves roughly 95% of all the everyday issues you face under development with PHP and JS.

micro-MVC is optimized, secure, lightning fast and consumes the least resources possible. The framework runs on nearly any platform including embedded systems and has been tested extensively in several hardware configurations. Also, it comes with out-of-the-box configurations for Apache and NGINX offering enterprise-ready security, smart caching and compression.

The latest release comes with the "Awesome!" platform that acts as a shorthand for micro-MVC folder structure and provides an easy way for developers to access and manage their front-end and back-end code separately and the designers to work without conflicts almost in parallel.

Finally, on Dec-10-2020, micro-MVC has been audited, tested thoroughly for security vulnerabilities and put under stress with thousands of requests per minute from all over the globe. The results proved that micro-MVC is dependable and highly secure.

Enjoy!

George Delaportas (G0D)
Copyright (C) 2015 - 2022 micro-MVC
Open Software License (OSL 3.0)
Supported by PROBOTEK
Audited for web security & certified by OCTAGON
Cloud Native Buildpack for ARM64 and AMD64
Tags: arm64, multiarch, buildpacks, spring
Published: 2022-12-06 22:31:40



# Version 7.41.0

This builder works with Intel/AMD architectures and ARM64 architectures like Apple M1 and Raspberry Pi.

With this release I was able to use a little more automation on my side, to get my `unsupported` builder even closer to the [upstream at Paketo](https://paketo.io).

## Links

- [Docker](https://hub.docker.com/r/dashaun/java-native-builder-multiarch)
- [Daniel Mikusa GitHub Repo](https://github.com/dmikusa/paketo-arm64)

## Roadmap

I'm trying to make each of the buildpacks as similar as possible to each other and upstream.
I'm also working on delivering newer versions of the stack, which is currently Ubuntu Focal.

## Feedback welcome

Please let me know how it is working for you, all of [my socials/contact info can be found here](https://dashaun.com).