Forem: Christopher Duran

My X List For developers and designers

Christopher Duran — Thu, 02 Jan 2025 01:59:27 +0000

Recently, social media platforms have introduced the list feature, which allows you to group your favorite profiles based on different themes. This feature not only helps with organization but also allows you to share these lists with other users who have similar interests, enabling them to follow profiles related to those topics.

One of the advantages i find in this option is that by adding profiles to a list, you no longer need to follow them individually. This streamlines the management of the profiles you follow, as you can keep up with their content through the lists instead of interacting with each profile separately. Below, i'll share some of the lists i've created, organized by areas of interest, covering topics such as programming, design, marketplace sites, and more.

2D Top Global Profile: This list includes profiles related to the creation of 2D projects, such as DeviantArt, ArtStation, WLOP, Clip Studio Paint, and others: link

CGI Top Global Profile: This list includes profiles related to CGI content creation, such as Unreal Engine, CG Channel, Blender Studio, The Gnomon Workshop, and more: link

Dev Top Global Profiles: If you're interested in staying updated with profiles like HackerOne, VS Code, Free Software Foundation, Python Software Foundation, then this is your list: link

Mobile Dev Top Global: If you're focused on mobile development, this list is made for you. It will show feedback from profiles like Android Developers News, Kotlin by JetBrains, React Native, and much more: link

Stores Top Global Profile: This list contains all profiles related to the creation and sale of digital content, or at least features related to it. Profiles like Gumroad, Mintable, Buy Me A Coffee, Ko-Fi, and Patreon are included here: link

Job Opportunities Top Global Profile: If you're interested in staying updated with profiles related to job offerings and employment, this link includes profiles such as LinkedIn, Fiverr, Seek, Upwork, and much more.

3D Earth Visualization with Three.js: A GitHub-Inspired Approach

Christopher Duran — Mon, 07 Oct 2024 01:18:39 +0000

Recently, i had the idea of implementing a 3D Earth on my website using Three.js. I was inspired by GitHub's landing page, where they use a similar visualization.

I wanted to take that idea a step further by adding the ability to define specific places on the globe based on their latitude and longitude coordinates. However, when i started researching, i realized that there were very few examples available online that offered the design and functionality i had in mind. Although i found some similar implementations, most were outdated or did not meet the technical requirements I was looking for.

The uniqueness of this project is that it is not simply limited to a visual representation of the planet. My main goal was to be able to define real-world locations, marking starting and destination points that could be used to highlight projects i have worked on, or even point out places of interest in a personalized way. This adds a layer of interactivity, allowing users to visually explore the places mentioned on the site, enhancing the browsing experience. I firmly believe that 3D visualizations have great potential to transform the way we interact with geographic information on the web.

What makes this project special is that it is built using the latest versions of Node.js, ensuring compatibility with the most modern development environments and offering optimal performance. Node.js has evolved significantly in recent years, and using its most recent versions allowed me to take advantage of major improvements in speed and module handling. By developing with this technology, i ensure that the project is scalable and easily adaptable to future updates, which is crucial for any software aiming for long-term maintenance.

A key part of the project was the implementation of basic interactions such as rotation and zoom. These features give the user complete control over the visualization of the planet, which is especially useful when it comes to detailed exploration of geographical locations.

An important next step will be the implementation of a REST API that allows the project to access data about interesting places dynamically.

For more detail read the awesome article created by @alextheedom

This API will provide up-to-date information on global points of interest, such as historical landmarks, tourist spots, or even relevant projects from different industries. Users will be able to interact with the API to get additional details about each location marked on the globe. I believe this functionality will add a very interesting layer of value to the project, making it much more than just a simple 3D visualization.

This is my result:

Video demo

In summary, this project has not only allowed me to explore new capabilities of Three.js and Node.js, but it has also challenged me to find innovative solutions to common technical problems in creating 3D graphics for the web. Through this process, i have been able to improve my skills in TypeScript and strengthen my ability to solve compatibility and code optimization issues. My goal is to continue developing new features, such as the possibility of further customizing interactions and adding support for mobile devices, which will make this 3D experience accessible from any platform.

🪙 You can buy my projects and support me on:

Destiny or Coincidence: Based on Shannon Perry s Experiment.

Christopher Duran — Thu, 11 Jul 2024 00:50:12 +0000

TL;DR: I developed a project to determine if you have ever crossed paths with ‘that’ person before meeting them in your life based on your mobile.

Background

I often read Xataka to stay updated on the latest technological developments and news. One thing that i readed and has intrigued me the most is Shannon Perry’s experiment — a data analyst who used location data from her and her boyfriend’s histories to determine if they had ever been close before meeting each other.

How did she do it?

She exported her and her boyfriend’s data from Google Takeout. For more information, you can visit her website. The approach is simple yet fascinating: finding all instances where two people were close within a specific distance, on the same day, and at the same time.

Now it’s my turn

Considering the approach is straightforward, I was intrigued to develop a similar tool — easy to use and accessible for anyone interested in experimenting with it

Although Shannon explains the procedures to obtain results, as a programmer, I set myself the challenge of doing it on my own, using my own logic.

Tools Used:

Google Takeout: Used Google Takeout to export my location history data. Once the export process was completed, Google provided a download link.
Replit: Opted to run the code in the cloud to avoid overloading my laptop. While other options like Google Colab exist, I found Replit worked best for me with the free account. It’s important to interact with the page regularly to prevent the session from timing out.
Firebase: Since my JSON location records file was approximately 400 MB, I uploaded it to Firebase. I chose to process the JSON files via a URL instead of downloading the file directly.
CodePen: Used CodePen to visualize the information obtained from Replit. I decided to use a heatmap to visualize most of the matches, along with options like lists and checkboxes to examine the positions of the two individuals in detail.

Let’s get to work.

Go to...

Visit my Medium post to keep reading... 😊

Simulate a black hole for React Native app?

Christopher Duran — Sat, 20 Apr 2024 17:13:45 +0000

Hi everyone, i´ve created this interesting article on my Medium, check it out ♥

https://chriisduran.medium.com/simulate-a-black-hole-for-react-native-app-96c4d12ced83

Is React Native really flexible? Unexpected ending 💦

Christopher Duran — Sat, 20 Apr 2024 17:11:52 +0000

Hello everyone, i´ve create this interesting article on my Medium, check it out ♥´

https://chriisduran.medium.com/is-react-native-really-flexible-dfcf15de5b70

Java developer try Jetpack Compose for first time

Christopher Duran — Sat, 20 Apr 2024 17:07:11 +0000

Hi everyone, i've created this interesting article in my Medium, check it out ♥

https://chriisduran.medium.com/java-developer-try-jetpack-compose-for-first-time-f2c87faba8d5

The power of CSS

Christopher Duran — Sat, 20 Apr 2024 17:01:09 +0000

Hello, i´ve created this interesting article on my Medium, check it out

https://chriisduran.medium.com/the-power-of-css-323334bd3629

I created a blender add-on for beginner artists

Christopher Duran — Sat, 20 Apr 2024 16:59:13 +0000

Hello everyone, i create this article on Medium about how i created an add-on for beginner artist, check it out:

https://chriisduran.medium.com/i-created-a-blender-add-on-for-beginner-artists-dc9e5b991436

Chat Room Project - Christopher Duran

Christopher Duran — Sat, 08 Jul 2023 20:46:09 +0000

Introduction
Technologies
Project Setup

Introduction:

Building interactive and real-time web applications has revolutionized the way we communicate and collaborate online. One of the most popular technologies for achieving this interactivity is Socket.IO, a JavaScript library that enables bidirectional real-time communication between the server and the client. In this article, we will explore how to build a web chat project using Node.js, React, and Socket.IO. We'll discover the benefits of this technological combination and how they can be leveraged to create an engaging real-time chat experience.

Technologies:

Node.js is a server-side JavaScript runtime environment that allows us to build scalable and high-performance web applications. Its event-driven approach and ability to handle requests in parallel make it an excellent choice for real-time applications like chat.
React is a JavaScript library for building interactive user interfaces. With its focus on building reusable components, React enables us to create dynamic and responsive UIs that efficiently update when data changes.
Socket.IO is a JavaScript library that makes real-time communication between the server and the client easy. It utilizes WebSocket, a technology that allows for a persistent, bidirectional connection between the server and the client, enabling instant data transmission.

Project Setup:

Before getting started with building the web chat, we need to set up our development environment. Make sure to have Node.js installed and create a new React project using Create React App. Then, install the necessary dependencies, including Socket.IO, for real-time communication.

In summary, creating a web chat project using Node.js, React, and Socket.IO has been an exciting experience. The opportunity to get the source code and the project idea on my webpages is available for those interested in acquiring it offer you a good and easy option if you need a chat feature. We invite you to be part and explore new technologies together!

Mongo Client-Side Field Level Encryption Project Sample - Christopher Duran

Christopher Duran — Wed, 18 Jan 2023 14:17:40 +0000

Introducción:

Client-Side Field Level Encryption (CSFLE) es una característica que te permite cifrar datos en tu aplicación antes de enviarlos a través de la red MONGO.

Con CSFLE habilitado ningún producto de MONGODB tiene acceso a sus datos sin cifrar. Documentación

Proyecto PRE Requesítos:

Ejecuta el proyecto:

Activa el servicio de la base de datos con el comando:

> mongod

Si MONGO Shell está correctamente configurado verás un resultado como el siguiente:

Ubícate el la raíz del proyecto y ejecuta el comando:

> python3 app.py

Si Flask está corriendo perfectamente verás un resultado como el siguiente:

Abre MONGO Compass, normalmente no verás ninguna base de datos creada:

Abre Postman, usaremos una solicitud POST para guardar un nuevo usuario:

Realizada la solicitud anterior podremos visualizar en la base de datos que se ha guardado un nuevo usuario con los campos encriptados:

Si deseamos consultar el usuario por id podemos realizar la siguiente solicitud en postman:

Línea amarilla: enviamos como solicitud de cuerpo JSON la llave con la cual se decidió encriptar los campos del usuario.
Línea azul: Se solicita al usuario por id, este será el ObjectId que se ha guardado en la base de datos.
Zona roja: Si no se utiliza el código de desencriptación FLE, la base de datos mostrará al usuario encriptado.
Zona verde: Utilizando el proceso de desencriptado de FLE, podremos visualizar de manera legible los datos del usuario.

Descarga el proyecto aquí.
El código de este ejemplo se encuentra en la rama chris/devfledemo.
El commit se llama: feat(app.py): fle demo

En caso de tener problemas con Python, y Windows no reconoce python3 en la terminal, se recomienda descargar Python desde el Microsoft Store el cual contiene python3.

Artículo disponible también en: Hashnode