DEV Community: Ajetunmobi Isaac

Open Digital Culture & History Museum To Preserve Digital Heritage

Ajetunmobi Isaac — Fri, 04 Oct 2024 22:10:41 +0000

As our lives become increasingly digital, there is a growing need to preserve our cultural and digital history. A Global Digital Cultural Museum. This aims to create a virtual space dedicated to preserving and showcasing the rich tapestry of human culture in the digital realm.

What is the Global Digital Cultural Museum?

Imagine a vast online repository. where you can:

Watch a traditional dance performance from a remote village in Thailand
Listen to oral histories from Indigenes of another country
View digitized ancient manuscripts from libraries in Egypt
Explore street art from urban centers in different countries

The project can be designed to be this and more, a growing archive of human cultural expression in the digital age.

Why is this important?

Digital Preservation: As our lives move online, so does our culture. We risk losing invaluable digital artifacts without proper archiving.
Global Access: Physical museums are limited by geography. Our digital museum will be accessible to anyone with an internet connection.
Educational Resource: Students, researchers, and curious minds worldwide will have incredible resources of cultural information at their fingertips.
Community Engagement: Users can contribute their own digital artifacts, making this a truly collaborative, global effort.

How will it work?

The Open Global Digital Cultural Museum will be:

User-Driven: Anyone can submit and contribute a diverse range of digital artifacts, including personal and historical videos, photographs, digitized books, and scanned documents, showcasing rich culture & history. Users who share these are referenced and tagged
Curated: A team of volunteers will ensure submissions are appropriate, authentic, and properly categorized.
Interactive: Users can create virtual exhibitions, add context to artifacts, and engage in discussions.
Multilingual: The platform will be accessible in as many languages as possible.
Open-Source: The entire project will be open-source, allowing for continuous improvement and adaptation.

What does this hope to achieve?

Create the world's largest, most diverse digital archive of cultural artifacts
Foster cross-cultural understanding and appreciation
Preserve digital cultural heritage for future generations
Provide a valuable resource for education and research
Build a global community passionate about cultural preservation

The project is open to passionate individuals to help bring this vision to life. Whether you're a developer, designer, cultural expert, or simply someone who cares about preserving our shared digital heritage.

As a community, we can build a digital time capsule that captures the beauty, diversity, and richness.

How to Create Instagram Explore Grid Layout with React Native

Ajetunmobi Isaac — Sun, 03 Mar 2024 07:22:09 +0000

This tutorial will guide you on how to replicate Instagram Explore Grid layout in React Native application.

Introduction

Instagram Explore page exemplifies the complexities of grid layouts in mobile app design, it features an engaging mix of images and videos in varying sizes for an immersive user experience. In React Native, replicating this dynamic grid layout presents challenges, particularly when dealing with items of uneven sizes. react-native-flexible-grid simplifies this process and can effortlessly create responsive, captivating grid layouts. It addresses common issues related to item size variability, enabling developers to achieve an Instagram-like mosaic with minimal effort.

Setup

Ensure you have react-native-flexible-grid installed in your project:



npm install react-native-flexible-grid

Or, if you prefer using Yarn:



yarn add react-native-flexible-grid

Implementing the Instagram Explore Layout

Let's dive into the code required to create this layout. We'll start by preparing our data source and then move on to rendering the grid.

Data Preparation

First, define an array of objects representing the images you want to display. Each object can contain an imageUrl which will be used in renderItem for the image, and optionally, widthRatio and heightRatio to control the size of each item in the grid.



const data = [

  {

    imageUrl: 'https://picsum.photos/200/300?random=1',

  },

  {

    imageUrl: 'https://picsum.photos/200/300?random=2',

  },

  {

    imageUrl: 'https://picsum.photos/200/300?random=3',

    widthRatio: 1,

    heightRatio: 2,

  },

  // Add more items...

];

Rendering the Grid

Using the ResponsiveGrid component from react-native-flexible-grid, you can easily render this data into a grid layout.
Here's a full example:



import * as React from 'react';

import { StyleSheet, View, Text, Image } from 'react-native';

import { ResponsiveGrid } from 'react-native-flexible-grid'; 

export default function InstagramExploreExample() {

const data = [

  {

    imageUrl: 'https://picsum.photos/200/300?random=1',

  },

  {

    imageUrl: 'https://picsum.photos/200/300?random=2',

  },

  {

    imageUrl: 'https://picsum.photos/200/300?random=3',

    widthRatio: 1,

    heightRatio: 2,

  },

];

// Repeat data to fill the grid for demonstration

  const repeatedData = Array(5).fill(data).flat();

const renderItem = (item, index) => (

    <View style={styles.boxContainer}>

      <Image

       source={{ uri: item.imageUrl }} 

       style={styles.box} resizeMode="cover" />

    </View>

  );

  return (

    <View style={{ flex: 1 }}>

      <ResponsiveGrid

        maxItemsPerColumn={3}

        data={repeatedData}

        renderItem={renderItem}

        style={{ padding: 5 }}

      />

    </View>

  );

const styles = StyleSheet.create({

  boxContainer: {

    flex: 1,

    margin: 1,

  },

  box: {

    width: '100%',

    height: '100%',

    backgroundColor: 'transparent',

  },

  });

}

Grid Configuration

The ResponsiveGrid component configuration for creating an Instagram Explore-like layout is straightforward. The maxItemsPerColumn prop specifies the maximum number of items per column, ensuring a uniform appearance across different device sizes. The data prop feeds the grid with a list of items to display, while the renderItem function determines how each item is rendered. Lastly, the style prop allows for additional styling of the grid parent container, such as padding, to fine-tune its appearance on the screen.

Conclusion

With react-native-flexible-grid, creating a dynamic and responsive grid layout like the Instagram Explore page is straightforward. By adjusting the widthRatio and heightRatio for your items, you can achieve varied item sizes, contributing to an engaging and visually appealing layout

The full implementation of this Instagram Explore-like grid layout example file is available here.

A Software Solution Concept For Server Access Control & Host Monitoring

Ajetunmobi Isaac — Sat, 20 Jan 2024 18:24:01 +0000

Introduction:
This article explores a software concept for efficient server access, control and host monitoring. Specifically tailored for both Linux and Windows hosts, this solution is ideal for managing servers through API access and a web UI interface (Optional).

In environments where servers run headlessly, resource consumption is a key concern. The software addresses this by providing a lightweight, web-based interface, which is statically served, alongside a robust REST API for comprehensive host management. Whether for routine monitoring or critical management tasks.

Low-Level Language Choice and Cross-Platform Compatibility:
The choice of a low-level programming language is key to the software's performance and functionalities. Such
languages allow direct hardware manipulation, leading to optimized resource usage and faster
execution times.
Rust, known for its memory safety features, is an excellent choice. Ensuring that the language and libraries are
compatible with both Linux and Windows platforms is crucial for broader applicability.

Efficiency and Security:
Security features like encrypted communication and robust
authentication protocols are key (SSL, IP whitelisting, etc).
Some implementations are listed below:

Multi-factor authentication (MFA) for added security. Employ role-based access control (RBAC) to manage user permissions, ensuring users have access only to the features necessary for their role.
TLS/SSL encryption for all communications between the server and the client, including API calls and data transfer. This encryption ensures that sensitive data, such as login credentials and server configurations, are not exposed during transit.
Configure local and remote access to the internet to prevent exposure to online threats.

The software can act as a secure gateway, managing and filtering internet access for updates or necessary external communications.

Infrastructure as a Service (IaaS) and API Functionality:
This embraces the IaaS model, the software can provide an API-first approach, allowing administrators to
manage infrastructure programmatically. This API-driven design simplifies the automation of varieties of host functionality and management offers a customizable user experience. This approach aligns with modern DevOps practices.

Docker Image and Streamlined Host Integration:
Docker encapsulation ensures consistent deployment across different environments. The software can
packaged as a Docker image, containing all necessary dependencies. Integration with host systems
is then designed for efficient resource use and seamless network configurations.

Development
A basic sample application has been built in Rust and is available on Github

Conclusion
This software solution represents a considerable process in server host management, focused on efficiency,
security, and ease of use.

[Open Source Project] A binary executable system for providing dependencies for cross language/framework compatibility

Ajetunmobi Isaac — Sat, 19 Feb 2022 16:19:14 +0000

Introduction

Software applications are built majorly on their language dependencies/modules. These dependencies/modules are tied to the language environment and not flexible enough to be used in another language environment. For example, a file converter module available on npm can't be used directly in a PHP project, you would have to use an equivalent module/dependency in composer or serve its feature through an API system.

A binary dependency system can help bridge these gaps and create a new way to work around dependencies across languages. Binaries (executable console applications) can be created as dependencies and then any backend application or software can execute these binaries and get results directly from the executed binary into their application. The response and output can be formatted using the language core libraries and also these binaries can be sorted into a common folder.
This common folder would contain the binaries and wrappers that help execute and return responses from binaries into a backend application or software.

With a central binary module system, this will help:

Create a global repository that can be used across different languages and frameworks.
Open a new world to application development: Software developers (regardless of language source) can build console applications as binaries modules and shared to a global repository.
Provide flexibility for projects: Projects built on binary dependencies can port to a new language or framework without worrying about recreating or searching for equivalent modules in the new language or framework. They can directly integrate the binary modules they used in the old project.

Relevant Technology

Package Publisher Website ( Web )
Github can be used as a code repository, software developers who create binary dependencies can provide the configurations of their binaries, create their usage and then publish on a web platform created for binary module publishers.
Package Management Software (Desktop Application)
This will work like other package management systems e.g npm, composer, etc. It will be used to pull binary modules and their dependencies and also link them to your project. A module.json file (this will include all the module names and configurations) will be required at the project root.
Documentation
Proper documentation is needed for the project and all sections of it

Project Test Case

A simple binary module created in Go lang for generating hashes (md4, md5, sha512, etc) was published here and used as a test case for the project.

The module was created with a custom wrapper to use the modules directly in the projects below:

Summary

The project test case was a success and was able to function without any error on live hosting like Heroku. We hope to bring more developers to join this project to help share their experience and skills to make the project beneficial to everyone