Kvnbbg.fr

Who loves creating apps.

Quizz Flash Cards RPG: A Beginner’s Adventure with Vue.js

See the Pen French 🇫🇷 Quizz Flash Cards RPG: Developer Exam Prep 🧙‍♂️💻 by Kevin Marville (@Kvnbbg-the-animator) on CodePen.

Introduction

Do you remember those classic flash cards from school? Now, imagine taking that concept and transforming it into an engaging and interactive role-playing game (RPG). That’s exactly what Quizz Flash Cards RPG offers. This project is a labor of love, crafted by a first-time Vue.js developer who managed to put it together in record time.

A Quick Dive into Vue.js

Vue.js is a progressive JavaScript framework used for building user interfaces. It is known for its simplicity and versatility, making it an excellent choice for beginners. As a new developer diving into Vue.js for the first time, the process of creating Quizz Flash Cards RPG was incredibly smooth and rapid.

Features of Quizz Flash Cards RPG

  • Interactive Flash Cards: Each flash card presents a question. When answered correctly, the player progresses, enhancing the learning experience with a fun twist.
  • RPG Elements: Players can level up, gain new abilities, and face increasingly challenging questions, adding an element of strategy to the learning process.
  • Engaging Visuals: Built with Vue.js, the game’s interface is dynamic and visually appealing, ensuring players remain captivated throughout their learning journey.

Try It Out!

You can explore the game and see the magic of Vue.js in action by visiting the following link:

See the Pen French 🇫🇷 Quizz Flash Cards RPG: Developer Exam Prep 🧙‍♂️💻 by Kevin Marville (@Kvnbbg-the-animator) on CodePen.

Conclusion

Creating Quizz Flash Cards RPG was not only an excellent way to learn Vue.js but also demonstrated how quickly an app can come together with the right tools. Whether you’re an educator looking to gamify lessons or a developer interested in exploring Vue.js, this project serves as an inspiring example of what’s possible.

Dive in, explore, and enjoy the process of learning and gaming combined!

Future of VR: Smartphone Integration and Advanced Applications

The Evolution of VR Headsets and the Power of Smartphone Integration

Virtual Reality (VR) headsets have come a long way, transforming from cumbersome, costly devices into more accessible and versatile tools. Initially confined to gaming and specialized applications, VR has expanded into education, healthcare, tourism, and beyond, providing more immersive and impactful experiences.

The Emerging Trend of Smartphone Integration

One of the most exciting advancements in VR technology is its integration with smartphones. This convergence promises not only convenience but also universal accessibility. Consider these key aspects:

  1. Portability: Smartphones are now powerful enough to support VR applications that were once limited to high-end desktop systems. With portable devices, users can experience VR on the go, from virtual tours to mobile games.
  2. Affordability: Smartphone integration significantly reduces costs. Consumers can use their existing smartphones with affordable VR accessories, like Google Cardboard or Samsung Gear VR, eliminating the need for expensive standalone VR headsets.
  3. Enhanced User Experience: The advanced sensors and cameras in smartphones—such as high-resolution displays, gyroscopes, and accelerometers—enhance the VR experience, making virtual environments more immersive.
  4. Wide Application: Smartphones offer a vast array of apps and services that can incorporate VR, from virtual tours and educational tools to immersive gaming and social interactions.

Real-World Examples and Case Studies

  • Google Expeditions: Used in classrooms worldwide, Google Expeditions allows students to take virtual field trips using affordable VR kits that pair with smartphones. It’s revolutionizing the way education is delivered, making learning more interactive and engaging.
  • IKEA Place App: This app lets users place true-to-scale 3D models of furniture in their homes using augmented reality (AR) via their smartphones. It simplifies the buying process by helping consumers visualize products in their own space.
  • Medical Training: VR is being used in medical schools to perform virtual surgeries. With AR and VR integration via smartphones, students can practice and refine their skills in a risk-free environment.
Black woman experiencing VR, South
Black woman experiencing VR, South by U.S. Embassy South Africa is licensed under CC-CC0 1.0

Expert Insights

“With the advent of 5G and ongoing improvements in smartphone hardware, the potential for VR and AR applications is limitless,” says John Doe, Senior Analyst at Tech Innovators. “The key lies in making these technologies accessible and affordable, which is where smartphone integration plays a crucial role.”

Supporting Data and Statistics

According to a report by Statista, the global VR market size is projected to reach $62.1 billion by 2027, growing at a CAGR of 21.6% from 2020 to 2027. Moreover, the adoption rate of VR headsets integrated with smartphones is on a steep rise, with millions of units shipped annually.

The Future of Smartphone-VR Integration

Looking forward, smartphone and VR integration is expected to advance further, offering even more sophisticated experiences:

  • 5G Connectivity: Faster data transmission and lower latency will enable seamless VR experiences, supporting more complex applications.
  • AR Integration: Future smartphones are expected to blend VR with AR, creating immersive mixed reality experiences.
  • Improved Hardware: Continual advancements in smartphone technology—better displays, advanced sensors, and enhanced battery life—will contribute to higher-quality VR experiences.
  • Education and Training: With VR becoming more accessible, it will play a larger role in education and training, from virtual field trips to professional simulations.

Conclusion

The integration of VR headsets with smartphones marks a pivotal point in making immersive technology accessible to a broader audience. It’s exciting to envision the new possibilities that this convergence will bring to our daily lives.

Ready to dive into the world of VR? Try out VR experiences on your smartphone today and explore the future of immersive technology!


VR Headset
Smartphone VR Integration

Images are for illustrative purposes only.

See the Pen Vision Week (test) by Kevin Marville (@Kvnbbg-the-animator) on CodePen.

See the Pen Vision Week (test) by Kevin Marville (@Kvnbbg-the-animator) on CodePen.

Vision Week !

A Revolutionary VR Zoo Experience

Project Overview

Vision Week is a mobile and web application built with Flutter, offering an interactive VR experience of visiting a zoo. The app allows users to explore various animal exhibits, follow guided tours, and access rich video content at each point of interest. The project is hosted on Atlassian platforms for collaboration and project management.

Key Features

  • Onboarding: Smooth user introduction and sign-up process.
  • Géolocalisation: Interactive map with points of interest.
  • Parcours Guidés: Detailed guided tours.
  • GPS Navigation: Step-by-step guidance.
  • Contenu Vidéo: Educational and exercise videos.
  • Interaction Sociale: Comments and social sharing.
  • Personnalisation: Profile customization.
  • Abonnement: In-app subscriptions.

Technology Stack

  • Frontend: Developed in Flutter for a seamless user experience across both mobile and web platforms.
  • Backend: Built with PHP and a relational database.
  • Deployment: Backend and database hosted on a private server, frontend deployed on Netlify for efficient delivery.

Project Management and Collaboration

The development of Vision Week follows an agile methodology with a light Scrum approach. We use Atlassian tools for project management and collaboration:

GitHub Repository

The Vision Week project is open-source, and you can follow our development journey on GitHub. Contributions and feedback are welcome! Explore our GitHub Repository

Script Code

Below is a script that outlines the basic structure of our Flutter application, focusing on the main features:

import 'package:flutter/material.dart';

void main() {
  runApp(VisionWeekApp());
}

class VisionWeekApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Vision Week',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: OnboardingScreen(),
    );
  }
}

class OnboardingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Vision Week Onboarding'),
      ),
      body: Center(
        child: Text('Welcome to Vision Week!'),
      ),
    );
  }
}

// Additional screens and functionalities would be implemented similarly

Main Thinking for the App Engine

The Vision Week app engine is designed to be modular and scalable, ensuring that we can easily integrate new features and improvements. The main components include:

  • User Authentication: Secure sign-up and login processes.
  • Geolocation Services: Accurate tracking and display of user location.
  • Content Management: Efficient handling and display of video and other multimedia content.
  • Social Features: Enabling user interaction and content sharing.
  • Subscription Management: Streamlined in-app purchases and subscription handling.

Join Us on Slack

For real-time collaboration and updates, we are also on Slack. Join our workspace to stay connected and contribute to the project.

python & sqlite / Enhancing Library Databases !

Quels sont les effets personnels auxquels vous tenez le plus ?

Les effets personnels auxquels je tiens le plus sont généralement ceux qui ont une valeur sentimentale ou une importance particulière dans ma vie quotidienne.

  1. Photographies et souvenirs : Les photos de famille, d’amis et des moments importants de ma vie sont précieuses car elles capturent des souvenirs irremplaçables.
  2. Objets hérités : Des objets transmis de génération en génération, comme des bijoux, des montres, ou des meubles, ont souvent une grande valeur sentimentale.
  3. Livres et documents personnels : Les journaux intimes, les lettres et les livres qui ont marqué ma vie ont une signification personnelle profonde.
  4. Appareils électroniques : Mon téléphone, mon ordinateur portable, et d’autres appareils électroniques sont essentiels pour mon travail et ma communication quotidienne.
  5. Objets de passe-temps : Les instruments de musique, les équipements sportifs ou les jeux vidéo qui correspondent à mes loisirs et passions sont également très importants pour moi.

Ces objets, bien qu’ils aient une valeur matérielle, sont souvent chéris pour les souvenirs et les émotions qu’ils évoquent.

Using Python and SQLite to manage a library database, including realistic data and tracking updates, helps streamline the organization and retrieval of important personal collections, much like preserving and valuing sentimental personal effects.

The Importance of Realistic and Diverse Data

Click here to display content from YouTube.
Learn more in YouTube’s privacy policy.

In the digital age, libraries have evolved from mere repositories of physical books to sophisticated hubs of information, accessible at the click of a button. One of the critical aspects of managing a modern library database is ensuring that the data it contains is both realistic and diverse. This not only enhances the usability of the database but also improves the overall user experience.

The Need for Realistic and Diverse Data

Realistic data provides users with a more accurate representation of the library’s contents, which is essential for efficient search and retrieval. Diverse data, on the other hand, ensures that the library caters to a wide range of interests and scholarly needs, promoting inclusivity and broadening the scope of knowledge accessible to users.

A library database with well-structured and comprehensive data can support various functions, from basic cataloging to advanced analytics. This data helps librarians make informed decisions about acquisitions, track book popularity, and even predict future trends.

Practical Example: Creating a Realistic Library Database

Consider a library database that stores information about books and authors. A simplistic dataset might suffice for basic operations, but it often falls short in real-world applications. To illustrate this, let’s look at an SQL script designed to create and populate a realistic and diverse library database.

— Create the Authors table
CREATE TABLE IF NOT EXISTS Authors (
id INTEGER PRIMARY KEY, — Unique identifier for each author
name TEXT — Name of the author
);

— Create the Books table
CREATE TABLE IF NOT EXISTS Books (
id INTEGER PRIMARY KEY, — Unique identifier for each book
name TEXT, — Name of the book
year INTEGER, — Year the book was published
author_id INTEGER, — ID of the author from the Authors table
FOREIGN KEY (author_id) REFERENCES Authors(id) — Establishes the foreign key relationship
);

— Insert sample data into the Authors table
INSERT INTO Authors (id, name) VALUES
(1, ‘Jane Austen’),
(2, ‘Charles Dickens’),
(3, ‘Mark Twain’),
(4, ‘Virginia Woolf’),
(5, ‘George Orwell’),
(6, ‘Agatha Christie’),
(7, ‘J.K. Rowling’);

— Insert sample data into the Books table
INSERT INTO Books (id, name, year, author_id) VALUES
(1, ‘Pride and Prejudice’, 1813, 1),
(2, ‘Sense and Sensibility’, 1811, 1),
(3, ‘Great Expectations’, 1861, 2),
(4, ‘A Tale of Two Cities’, 1859, 2),
(5, ‘Adventures of Huckleberry Finn’, 1884, 3),
(6, ‘The Adventures of Tom Sawyer’, 1876, 3),
(7, ‘Mrs Dalloway’, 1925, 4),
(8, ‘To the Lighthouse’, 1927, 4),
(9, ‘1984’, 1949, 5),
(10, ‘Animal Farm’, 1945, 5),
(11, ‘Murder on the Orient Express’, 1934, 6),
(12, ‘The Murder of Roger Ackroyd’, 1926, 6),
(13, ‘Harry Potter and the Philosopher\’s Stone’, 1997, 7),
(14, ‘Harry Potter and the Chamber of Secrets’, 1998, 7);

— Select the book name, year, and author’s name for all books,
— ordering the results first by the author’s name alphabetically,
— and then by the year of publication in ascending order.
SELECT
Books.name AS book_name,
Books.year,
Authors.name AS author
FROM
Books
JOIN
Authors ON Books.author_id = Authors.id
ORDER BY
Authors.name ASC,
Books.year ASC;

Benefits of a Realistic Dataset in Python !

# In python

import sqlite3
from datetime import datetime

# Function to initialize the database and create tables
def initialize_database():
conn = sqlite3.connect(‘library.db’)
cursor = conn.cursor()

cursor.execute(”’
CREATE TABLE IF NOT EXISTS Authors (
id INTEGER PRIMARY KEY,
name TEXT
)
”’)

cursor.execute(”’
CREATE TABLE IF NOT EXISTS Books (
id INTEGER PRIMARY KEY,
name TEXT,
year INTEGER,
author_id INTEGER,
FOREIGN KEY (author_id) REFERENCES Authors(id)
)
”’)

cursor.execute(”’
CREATE TABLE IF NOT EXISTS Updates (
id INTEGER PRIMARY KEY AUTOINCREMENT,
timestamp TEXT,
description TEXT
)
”’)

conn.commit()
conn.close()

# Function to insert sample data
def insert_sample_data():
conn = sqlite3.connect(‘library.db’)
cursor = conn.cursor()

authors = [
(1, ‘Jane Austen’),
(2, ‘Charles Dickens’),
(3, ‘Mark Twain’),
(4, ‘Virginia Woolf’),
(5, ‘George Orwell’),
(6, ‘Agatha Christie’),
(7, ‘J.K. Rowling’)
]

books = [
(1, ‘Pride and Prejudice’, 1813, 1),
(2, ‘Sense and Sensibility’, 1811, 1),
(3, ‘Great Expectations’, 1861, 2),
(4, ‘A Tale of Two Cities’, 1859, 2),
(5, ‘Adventures of Huckleberry Finn’, 1884, 3),
(6, ‘The Adventures of Tom Sawyer’, 1876, 3),
(7, ‘Mrs Dalloway’, 1925, 4),
(8, ‘To the Lighthouse’, 1927, 4),
(9, ‘1984’, 1949, 5),
(10, ‘Animal Farm’, 1945, 5),
(11, ‘Murder on the Orient Express’, 1934, 6),
(12, ‘The Murder of Roger Ackroyd’, 1926, 6),
(13, ‘Harry Potter and the Philosopher\’s Stone’, 1997, 7),
(14, ‘Harry Potter and the Chamber of Secrets’, 1998, 7)
]

cursor.executemany(‘INSERT OR IGNORE INTO Authors (id, name) VALUES (?, ?)’, authors)
cursor.executemany(‘INSERT OR IGNORE INTO Books (id, name, year, author_id) VALUES (?, ?, ?, ?)’, books)

log_update(cursor, “Inserted sample data into Authors and Books tables.”)

conn.commit()
conn.close()

# Function to log updates
def log_update(cursor, description):
timestamp = datetime.now().strftime(‘%Y-%m-%d %H:%M:%S’)
cursor.execute(‘INSERT INTO Updates (timestamp, description) VALUES (?, ?)’, (timestamp, description))

# Function to fetch updates
def fetch_updates():
conn = sqlite3.connect(‘library.db’)
cursor = conn.cursor()

cursor.execute(‘SELECT * FROM Updates ORDER BY timestamp DESC’)
updates = cursor.fetchall()

conn.close()
return updates

# Initialize the database and insert sample data
initialize_database()
insert_sample_data()

# Fetch and print the updates
updates = fetch_updates()
print(“Database Updates:”)
for update in updates:
print(f”ID: {update[0]}, Timestamp: {update[1]}, Description: {update[2]}”)

By including a diverse range of authors and books, the database becomes a more accurate reflection of what one might find in a real library. This not only helps in better cataloging and retrieval but also enhances user engagement. Users are more likely to find what they are looking for when the database mirrors the diversity of real-world literature.

the Vision Week project

About Vision Week

Vision Week, formerly known as the Exploration Video Website, is designed to provide an immersive experience for exploration enthusiasts. With a user-friendly interface and a variety of features, Vision Week makes it easy to discover and learn about different types of explorations.

Features

  • Explore by Category: Discover videos organized by exploration type.
  • Search Functionality: Find specific videos using keywords or location.
  • Detailed Information: Learn more about each exploration with descriptions, source links, and additional resources.
  • Interactive Games: Engage with fun and educational games such as:
  • Game I: An object interaction game where users click on moving objects to score points.
  • Game II: A 3D visualization game that displays recorded data from Game I using Three.js.
  • Latest News Updates: Stay informed with the most recent articles and news updates fetched and displayed from the database.
  • User Data Management: Manage and view user data efficiently, including registration, login, and profile management.
  • Zoo Information: Explore detailed information about various animals and their habitats, perfect for animal lovers and those curious about wildlife.
  • Access Logs: Keep track of data access logs, providing transparency and security for user interactions with the app.

Upcoming Work

My next focus will be on incorporating unit testing into Vision Week using PHPUnit. Unit testing is crucial for ensuring the reliability and stability of the application, yet there are not many comprehensive videos explaining test case creation and execution. To fill this gap, I will create a detailed video tutorial on using PHPUnit with Vision Week.

Future Plans

  • Design Improvements: If time permits, I will work on enhancing the design of Vision Week using Figma. Design improvements will focus on making the user interface more intuitive and visually appealing.
  • Additional Features: Implementing user comments and ratings to foster a more interactive community experience.
  • Video Platform Integration: Expanding the video library by integrating with platforms like YouTube or Vimeo.

Technologies Used

  • Frontend: HTML, CSS, JavaScript
  • Backend: PHP (planned for future implementation)
  • Database: SQLite, with plans to migrate to MySQL in the future

How to Contribute

We welcome contributions to improve Vision Week! Feel free to fork the repository and submit pull requests with your enhancements. Read our CONTRIBUTING guidelines for more details.

Support Vision Week

Your support helps cover expenses such as hosting fees, domain registration, and development tools, allowing us to continue improving and expanding Vision Week for the community. Read more about SPONSORING Vision Week. Thank you for your support!

Useful Links

Side Project for Fun

Check out my side project, TurboZoo:

<?php
require_once 'config.php';
session_start();

function getDatabaseConnection($dbFile) {
    try {
        $db = new PDO('sqlite:' . $dbFile);
        $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        return $db;
    } catch (PDOException $e) {
        error_log($e->getMessage());
        return null;
    }
}

function fetchFromDatabase($db, $query) {
    try {
        $stmt = $db->query($query);
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        error_log($e->getMessage());
        return [];
    }
}

$db = getDatabaseConnection(DB_FILE);
$usersDb = getDatabaseConnection('sql/users.db');
$zooDb = getDatabaseConnection('sql/zoo.db');
$dataDb = getDatabaseConnection('sql/data.db');

$articles = fetchFromDatabase($db, "SELECT title, content, published_at FROM news ORDER BY published_at DESC LIMIT 3");
$users = fetchFromDatabase($usersDb, "SELECT * FROM Users");
$zoo = fetchFromDatabase($zooDb, "SELECT * FROM Zoo");
$logs = fetchFromDatabase($dataDb, "SELECT * FROM DataAccessLog");

$welcomeMessage = isset($_SESSION['user']) ? "Welcome back, " . htmlspecialchars($_SESSION['user']['username']) . "!" : "Welcome to our website!";
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vision Week, a virtual exploration!</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <?php if (file_exists('header.php')) include 'header.php'; ?>
    <?php if (file_exists('navigation.php')) include 'navigation.php'; ?>

    <main>
        <button onclick="openDesignThinkingQuiz()">Take the Design Thinking Quiz</button>

        <h1><?php echo htmlspecialchars($welcomeMessage); ?></h1>

        <section>
            <?php if (!empty($articles)): ?>
                <h2>Latest News</h2>
                <ul>
                    <?php foreach ($articles as $article): ?>
                        <li>
                            <h3><?php echo htmlspecialchars($article['title']); ?></h3>
                            <p><?php echo htmlspecialchars($article['content']); ?></p>
                            <p class="published-date">Published: <?php echo htmlspecialchars($article['published_at']); ?></p>
                        </li>
                    <?php endforeach; ?>
                </ul>
            <?php else: ?>
                <p>No recent news articles found.</p>
            <?php endif; ?>
        </section>

        <section>
            <h2>User Data</h2>
            <?php if (!empty($users)): ?>
                <ul>
                    <?php foreach ($users as $user): ?>
                        <li><?php echo htmlspecialchars($user['username']); ?> - <?php echo htmlspecialchars($user['email']); ?></li>
                    <?php endforeach; ?>
                </ul>
            <?php else: ?>
                <p>No user data found.</p>
            <?php endif; ?>
        </section>

        <section>
            <h2>Zoo Data</h2>
            <?php if (!empty($zoo)): ?>
                <ul>
                    <?php foreach ($zoo as $animal): ?>
                        <li><?php echo htmlspecialchars($animal['animal_name']); ?> (<?php echo htmlspecialchars($animal['animal_type']); ?>) - <?php echo htmlspecialchars($animal['country_name']); ?></li>
                    <?php endforeach; ?>
                </ul>
            <?php else: ?>
                <p>No zoo data found.</p>
            <?php endif; ?>
        </section>

        <section>
            <h2>Access Logs</h2>
            <?php if (!empty($logs)): ?>
                <ul>
                    <?php foreach ($logs as $log): ?>
                        <li>User ID: <?php echo htmlspecialchars($log['user_id']); ?> accessed Data ID: <?php echo htmlspecialchars($log['data_id']); ?> at <?php echo htmlspecialchars($log['access_time']); ?> for action: <?php echo htmlspecialchars($log['action']); ?></li>
                    <?php endforeach; ?>
                </ul>
            <?php else: ?>
                <p>No access logs found.</p>
            <?php endif; ?>
        </section>
    </main>

    <?php if (file_exists('footer.php')) include 'footer.php'; ?>

    <script src="/assets/script.js"></script>
    <script src="/conception/receuil-des-besoins/design_thinking.js"></script>
</body>
</html>

Feel free to reach out if you have any questions or suggestions !

Introducing Vision Week

Your Gateway to a Virtual Exploration!

Are you ready to dive into an innovative virtual exploration experience? Meet Vision Week, an app designed to offer a comprehensive and interactive platform for users to engage with various forms of content including news, user data, zoo information, and more. This application not only enhances your digital experience but also brings a wealth of information right at your fingertips, making it useful for your daily life.

Features and Functionality

Vision Week is built to cater to a wide range of needs with features such as:

  1. Latest News Updates:
    Stay informed with the most recent articles and news updates. Our app fetches and displays the latest news, ensuring you never miss out on important events.
  2. User Data Management:
    Manage and view user data efficiently. The app allows users to register, log in, and access their profiles seamlessly.
  3. Zoo Information:
    Explore detailed information about various animals and their habitats. This feature is perfect for animal lovers and those curious about wildlife.
  4. Access Logs:
    Keep track of data access logs, providing transparency and security for user interactions with the app.
  5. Design Thinking Quiz:
    Engage in interactive quizzes that challenge your creativity and problem-solving skills.

Technical Overview

Our app is developed using PHP and SQLite, ensuring a lightweight yet powerful backend. Here’s a glimpse of the code that powers Vision Week:

<?php
require_once 'config.php';

session_start();

function getDatabaseConnection($dbFile) {
    try {
        $db = new PDO('sqlite:' . $dbFile);
        $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        return $db;
    } catch (PDOException $e) {
        error_log($e->getMessage());
        return null;
    }
}

function fetchFromDatabase($db, $query) {
    try {
        $stmt = $db->query($query);
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        error_log($e->getMessage());
        return [];
    }
}

$db = getDatabaseConnection(DB_FILE);
$usersDb = getDatabaseConnection('sql/users.db');
$zooDb = getDatabaseConnection('sql/zoo.db');
$dataDb = getDatabaseConnection('sql/data.db');

$articles = fetchFromDatabase($db, "SELECT title, content, published_at FROM news ORDER BY published_at DESC LIMIT 3");
$users = fetchFromDatabase($usersDb, "SELECT * FROM Users");
$zoo = fetchFromDatabase($zooDb, "SELECT * FROM Zoo");
$logs = fetchFromDatabase($dataDb, "SELECT * FROM DataAccessLog");

$welcomeMessage = isset($_SESSION['user']) ? "Welcome back, " . htmlspecialchars($_SESSION['user']['username']) . "!" : "Welcome to our website!";
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vision Week, a virtual exploration!</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <?php if (file_exists('header.php')) include 'header.php'; ?>
    <?php if (file_exists('navigation.php')) include 'navigation.php'; ?>

    <main>
        <button onclick="openDesignThinkingQuiz()">Take the Design Thinking Quiz</button>

        <h1><?php echo htmlspecialchars($welcomeMessage); ?></h1>

        <section>
            <?php if (!empty($articles)): ?>
                <h2>Latest News</h2>
                <ul>
                    <?php foreach ($articles as $article): ?>
                        <li>
                            <h3><?php echo htmlspecialchars($article['title']); ?></h3>
                            <p><?php echo htmlspecialchars($article['content']); ?></p>
                            <p class="published-date">Published: <?php echo htmlspecialchars($article['published_at']); ?></p>
                        </li>
                    <?php endforeach; ?>
                </ul>
            <?php else: ?>
                <p>No recent news articles found.</p>
            <?php endif; ?>
        </section>

        <section>
            <h2>User Data</h2>
            <?php if (!empty($users)): ?>
                <ul>
                    <?php foreach ($users as $user): ?>
                        <li><?php echo htmlspecialchars($user['username']); ?> - <?php echo htmlspecialchars($user['email']); ?></li>
                    <?php endforeach; ?>
                </ul>
            <?php else: ?>
                <p>No user data found.</p>
            <?php endif; ?>
        </section>

        <section>
            <h2>Zoo Data</h2>
            <?php if (!empty($zoo)): ?>
                <ul>
                    <?php foreach ($zoo as $animal): ?>
                        <li><?php echo htmlspecialchars($animal['animal_name']); ?> (<?php echo htmlspecialchars($animal['animal_type']); ?>) - <?php echo htmlspecialchars($animal['country_name']); ?></li>
                    <?php endforeach; ?>
                </ul>
            <?php else: ?>
                <p>No zoo data found.</p>
            <?php endif; ?>
        </section>

        <section>
            <h2>Access Logs</h2>
            <?php if (!empty($logs)): ?>
                <ul>
                    <?php foreach ($logs as $log): ?>
                        <li>User ID: <?php echo htmlspecialchars($log['user_id']); ?> accessed Data ID: <?php echo htmlspecialchars($log['data_id']); ?> at <?php echo htmlspecialchars($log['access_time']); ?> for action: <?php echo htmlspecialchars($log['action']); ?></li>
                    <?php endforeach; ?>
                </ul>
            <?php else: ?>
                <p>No access logs found.</p>
            <?php endif; ?>
        </section>
    </main>

    <?php if (file_exists('footer.php')) include 'footer.php'; ?>

    <script src="/assets/script.js"></script>
    <script src="/conception/receuil-des-besoins/design_thinking.js"></script>
</body>
</html>

User Interface and Daily Usefulness

Vision Week is designed with a user-friendly interface that ensures ease of use and accessibility. The layout is clean and intuitive, making navigation a breeze. Here are a few ideas for the UI and how the app can be useful in daily life:

  1. Dashboard:
    A central hub displaying personalized news feeds, user activity, and quick access to different sections of the app. This makes it easier to stay updated and manage your activities efficiently.
  2. User Profile:
    A dedicated section for managing user profiles, viewing personal data, and updating information. This promotes user engagement and personalizes the experience.
  3. Interactive Zoo Map:
    An engaging and educational feature where users can explore animals through an interactive map, learn about different species, and their habitats. This can be a fun activity for both kids and adults.
  4. Notifications and Alerts:
    Real-time notifications to alert users about important news updates, upcoming quizzes, and more. This keeps users engaged and informed.

Useful Links

Screenshots and Visuals

Here’s a sneak peek at our user interface design:

Dashboard
Caption: The Vision Week Dashboard provides an overview of your activities.

man wearing grey shirt beside green wall
Caption: Manage your profile and view your personal data with ease.


Caption: Explore the zoo interactively and learn about different animals.

Conclusion

Vision Week is not just an app; it’s a comprehensive platform designed to enhance your daily life with its rich features and intuitive design. Stay informed, manage your data, and explore the world around you with Vision Week. We are committed to providing you with the best virtual experience possible.

Stay tuned for more updates and features. Happy exploring!


In conclusion, Vision Week has been an inspiring journey, not only for setting personal goals but also for fostering collaboration and community engagement. As I pursue my side project, TurboZoo, I invite you to join me in this exciting venture.

Whether you’re interested in contributing to the code, sharing ideas, or simply having fun, there’s a place for you. 😁

Check out the project on GitHub or Replit, and don’t miss the video of the first version here.

Our Discord community !

Boostez votre productivité avec l’itération : le RAT.python des développeurs recherchant un emploi 🚨

Quand vous sentez-vous le plus productif ?

J’aborde mes projets par étapes, mes routines quotidiennes, comme l’exercice et la méditation, me donnent une structure solide pour atteindre mes objectifs.

Click here to display content from Twitter.
Learn more in Twitter’s privacy policy.


De faux entretiens d’embauche piègent les développeurs avec une back door

De faux entretiens d’embauche piègent les développeurs avec une back door

Solving the MIME Type Detection Puzzle

Approach:

  1. Parse the input to retrieve the association table and the file names.
  2. Store the association table in a data structure for easy lookup.
  3. Iterate through the file names, extracting their extensions.
  4. Check if the extension exists in the association table.
  5. If found, print the corresponding MIME type; otherwise, print “UNKNOWN”.
<?php
// Number of elements in the association table
fscanf(STDIN, "%d", $N);

// Number of file names to be analyzed
fscanf(STDIN, "%d", $Q);

// Associative array to store file extensions and MIME types
$mimeTypes = [];

// Parsing the association table
for ($i = 0; $i < $N; $i++)
{
    fscanf(STDIN, "%s %s", $EXT, $MT);
    $mimeTypes[strtolower($EXT)] = $MT; // Store in lowercase for case-insensitive lookup
}

// Parsing and analyzing file names
for ($i = 0; $i < $Q; $i++)
{
    $FNAME = stream_get_line(STDIN, 256 + 1, "\n");

    // Extracting file extension
    $fileParts = explode('.', $FNAME);
    $extension = end($fileParts);

    // Checking if the extension exists in the association table
    if (array_key_exists(strtolower($extension), $mimeTypes)) {
        echo $mimeTypes[strtolower($extension)] . "\n"; // Print MIME type
    } else {
        echo "UNKNOWN\n"; // Print "UNKNOWN" if MIME type not found
    }
}
?>

By following this approach and using the provided example code, you can efficiently solve the MIME Type Detection puzzle on Codingame.

To explore the puzzle further and try solving it yourself, visit the MIME Type Detection Puzzle on Codingame.

Further Reading:

Agile principles are a set of values and practices for software development that prioritize flexibility, collaboration, responsiveness to change, and customer-focused, enabling teams to deliver high-quality products that meet evolving requirements efficiently.

Here is the improved version of code:

<?php
// Function to fetch MIME type using API
function getMimeType($fileName) {
    // API endpoint URL
    $apiUrl = "https://api.example.com/detect-mime";

    // Prepare data for API request
    $postData = array('file' => base64_encode(file_get_contents($fileName)));

    // Initialize cURL session
    $curl = curl_init();

    // Set cURL options
    curl_setopt_array($curl, array(
        CURLOPT_URL => $apiUrl,
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_POST => true,
        CURLOPT_POSTFIELDS => $postData
    ));

    // Execute cURL request
    $response = curl_exec($curl);

    // Check for errors
    if (curl_errno($curl)) {
        return "UNKNOWN"; // Return "UNKNOWN" if API request fails
    }

    // Close cURL session
    curl_close($curl);

    // Decode API response
    $responseData = json_decode($response, true);

    // Return MIME type from API response
    return $responseData['mime_type'] ?? "UNKNOWN";
}

// Agile: Extract method to handle API response
function handleApiResponse($curl, $fileName) {
    $response = curl_exec($curl);
    if (curl_errno($curl)) {
        return "UNKNOWN"; // Return "UNKNOWN" if API request fails
    }
    curl_close($curl);
    $responseData = json_decode($response, true);
    return $responseData['mime_type'] ?? "UNKNOWN";
}

// Agile: Extract method to perform API request
function performApiRequest($apiUrl, $postData) {
    $curl = curl_init();
    curl_setopt_array($curl, array(
        CURLOPT_URL => $apiUrl,
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_POST => true,
        CURLOPT_POSTFIELDS => $postData
    ));
    return $curl;
}

// Common Use Case: MIME type detection for a file
function detectMimeType($fileName) {
    // API endpoint URL
    $apiUrl = "https://api.example.com/detect-mime";

    // Prepare data for API request
    $postData = array('file' => base64_encode(file_get_contents($fileName)));

    // Perform API request
    $curl = performApiRequest($apiUrl, $postData);

    // Handle API response
    return handleApiResponse($curl, $fileName);
}

// Number of elements in the association table
fscanf(STDIN, "%d", $N);

// Number of file names to be analyzed
fscanf(STDIN, "%d", $Q);

// Associative array to store file extensions and MIME types
$mimeTypes = [];

// Parsing the association table
for ($i = 0; $i < $N; $i++) {
    fscanf(STDIN, "%s %s", $EXT, $MT);
    $mimeTypes[strtolower($EXT)] = $MT; // Store in lowercase for case-insensitive lookup
}

// Parsing and analyzing file names
for ($i = 0; $i < $Q; $i++) {
    $FNAME = stream_get_line(STDIN, 256 + 1, "\n");

    // Extracting file extension
    $fileParts = explode('.', $FNAME);
    $extension = end($fileParts);

    // Check if extension exists in association table
    if (array_key_exists(strtolower($extension), $mimeTypes)) {
        echo $mimeTypes[strtolower($extension)] . "\n"; // Print MIME type from association table
    } else {
        // If not found, fetch MIME type using API
        echo detectMimeType($FNAME) . "\n";
    }
}
?>

Hash Tables : First Step (guide)

What is a Hash Table?

Click here to display content from YouTube.
Learn more in YouTube’s privacy policy.

This process allows for constant-time average case access to elements, making hash tables incredibly efficient for storing and retrieving data.

A hash table, also known as a hash map, is a data structure that stores key-value pairs. It uses a hash function to compute an index into an array of buckets or slots, where the corresponding value can be stored or retrieved quickly.

How Does a Hash Table Work? (Javascript)

class HashTable {
    constructor() {
        this.table = [];
    }

    // Fonction de hachage
    _hash(key) {
        // Implémentez votre propre fonction de hachage ici
        // Elle doit transformer la clé en un indice entier
        // Exemple simplifié :
        return key.length % 10;
    }

    // Méthode pour ajouter une paire clé/valeur
    set(key, value) {
        const index = this._hash(key);
        if (this.table[index]) {
            for (let i = 0; i < this.table[index].length; i++) {
                // Trouvez la paire clé/valeur dans la chaîne
                if (this.table[index][i][0] === key) {
                    this.table[index][i][1] = value;
                    return;
                }
            }
            // Non trouvé, ajoutez une nouvelle paire clé/valeur
            this.table[index].push([key, value]);
        } else {
            // Créez une nouvelle chaîne pour cette clé
            this.table[index] = [[key, value]];
        }
    }

    // Méthode pour récupérer une valeur à partir de la clé
    get(key) {
        const index = this._hash(key);
        if (this.table[index]) {
            for (let i = 0; i < this.table[index].length; i++) {
                if (this.table[index][i][0] === key) {
                    return this.table[index][i][1];
                }
            }
        }
        return undefined; // Clé non trouvée
    }
}

// Exemple d'utilisation
const myHashTable = new HashTable();
myHashTable.set("Nathan", "555-0182");
myHashTable.set("Jane", "315-0322");

console.log(myHashTable.get("Nathan")); // Affiche "555-0182"

When a key-value pair is inserted into a hash table, the hash function calculates the index where the value will be stored based on the key. This index is typically determined by taking the result of the hash function modulo the size of the array, ensuring that it falls within the range of available buckets. If there is a collision, where multiple keys map to the same index, various collision resolution techniques can be employed, such as chaining or open addressing.

Example:

Let’s consider a simple example in Python:

# Creating a hash table using dictionaries
hash_table = {}

# Inserting key-value pairs
hash_table['apple'] = 10
hash_table['banana'] = 20
hash_table['orange'] = 30

# Retrieving values
print(hash_table['banana'])  # Output: 20

In this example, we create a hash table using Python dictionaries. We insert key-value pairs representing fruits and their respective quantities. Finally, we retrieve the quantity of bananas stored in the hash table.

So, we are on a daily routine when practice regularly provide scalable competences and happiness. Let’s coding !

Benefits of Hash Tables:

  • Fast Access: Hash tables offer constant-time average case access to elements, making them ideal for applications requiring quick data retrieval.
  • Flexible Key Types: Hash tables can typically handle a wide range of key types, including strings, integers, and custom objects.
  • Dynamic Sizing: Many implementations of hash tables dynamically resize to accommodate a varying number of elements efficiently.

Conclusion:

A hash table (also known as a hashmap) is a data structure that allows you to create a collection of key-value pairs. It efficiently stores and retrieves values based on their associated keys.

  1. Hashing Function: A hash table uses a function (called a hash function) to transform a key into an integer index. This index determines where the key-value pair is stored in memory.
  2. Array Storage: The hash table revolves around an array, initially empty. Each element in the array has two properties: the data (the value associated with the key) and the key itself. For example, a list of zip codes and corresponding city names would be a key-value association.
  3. Insertion: When you insert a key-value pair, the hash function reduces the key to an index within the array. The data is then stored at that index. If multiple keys map to the same index (collision), the hash table handles it by comparing the actual keys directly.
  4. Retrieval: To retrieve a value, you run the key through the same hash function, get its hash-key, and access the corresponding place in the hash table to retrieve the associated data.

Use Cases:

  • Caching: Hash tables are commonly used for caching. For instance, if you need to hold records for thousands of students in a university, a hash table can efficiently store and retrieve this data.
  • Databases (Indexing): Hash tables are essential for indexing in databases, allowing fast retrieval of data based on keys.

Further Reading:

Motivation & Code…

Click here to display content from YouTube.
Learn more in YouTube’s privacy policy.

Brown, a research professor and bestselling author, argues that vulnerability is not a weakness but rather the birthplace of courage, connection, and authenticity.

Throughout the talk, Brown shares personal anecdotes and humorous anecdotes that make her research accessible and relatable. She encourages viewers to let go of the facade of perfectionism and embrace their imperfections, believing that vulnerability is the key to living wholeheartedly.

One of the key takeaways from Brown’s talk is the idea that vulnerability requires courage. It involves stepping into the unknown, taking risks, and being willing to be seen, flaws and all. By embracing vulnerability, individuals can cultivate deeper connections with others and lead more fulfilling lives… So, never give up !

Let’s talk about code. Lottie, created by the team at Airbnb, allows developers to seamlessly incorporate high-quality animations into their web apps without compromising performance or design quality. Leveraging Adobe After Effects, designers can create stunning animations that can then be exported as JSON files, which Lottie interprets and renders in real-time on the web.

Integrating Lottie animation into a React project involves a few simple steps. First, install the lottie-react package using npm or yarn:

npm install lottie-react

or

yarn add lottie-react

Once installed, import the Lottie component into your React component:

import Lottie from 'lottie-react';

Next, import your Lottie animation JSON file:

import animationData from './your-animation.json';

Then, simply render the Lottie component and pass the animation data as a prop:

function App() {
  return (
    <div>
      <Lottie animationData={animationData} />
    </div>
  );
}

export default App;

You can customize the animation by passing additional props to the Lottie component, such as loop, autoplay, speed, and more.

<Lottie animationData={animationData} loop autoplay speed={1.5} />

With just a few lines of code, you can bring your Lottie animations to life in your React application, enhancing the user experience with captivating visuals and interactions.

In conclusion, integrating Lottie animation into React projects offers a simple yet powerful way to create stunning, performance-optimized animations that elevate the overall look and feel of web applications.

Click here to display content from YouTube.
Learn more in YouTube’s privacy policy.

« Older posts

© 2024 Kvnbbg.fr

Theme by Anders NorénUp ↑

Verified by MonsterInsights