teleren/devto huggingface dataset:
MongoDB Atlas Hackathon 2022 on DEV - Cold Storage Monitoring
Tags: atlashackathon22
Published: 2022-12-08 18:23:21

## What I built
Cold Storage monitoring dashboard built using React and Atlas App


### Category Submission:
About Real-time

### App Link
https://comfy-puppy-a3633b.netlify.app/


### Screenshots

Home Page:
![Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33x80tqhn4aloyi9f3f8.png)

Alerts Page:
![Alerts Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5gc1fbwhzyagqdtd28k.png)


### Description
The dashboard makes use of MongoDB changestreams to capture the realtime changes in the database and shows the realtime updates and alerts. This project also includes the simulator to simulate the Cold Storage IoT device data. Alerts are triggered using Atlas Trigger
 

### Link to Source Code
https://github.com/naveen-25/mongodb-atlas-cold-storage-monitoring


### Contributors
{% embed https://dev.to/sureshkannan_m %}
{% embed https://dev.to/naveen_66 %}


### Permissive License
MIT License


## Background
(What made you decide to build this particular app? What inspired you?)
Atlas App Service [formerly Realm] is a cool service offered MongoDB Atlas to build the application with serverless architecture. IoT is one of the best usecase for event driven application. Changestreams serves the purpose to act based on the events. Cold storage monitoring is one of the critical application where the immediate necessary actions has to be taken in case of any alerts like power outages or increase in temperature. Atlas trigger provides the serverless way to trigger alerts and capable of acting as a light weight rule engine. These features of MongoDB Atlas together driven me to think of this use case.


### How I built it
(How did you utilize MongoDB Atlas? Did you learn something new along the way? Pick up a new skill?)
Below features of MongoDB atlas is used to build the application
- Atlas App Service [Formerly Atlas Realm]
- Atlas Trigger

Learnt how to build the UI application without the backend APIs to communicate to the DB and how to react to the events using Atlas trigger.
MongoDB Atlas Hackathon 2022 on DEV
Tags: atlashackathon22, javascript, python, react
Published: 2022-12-08 18:10:06

## Multiplayer Math Game | Hackathon Submission

Multiplayer Math Game is an online game, that anyone can play with their friends. The application is Build using the FARM(FastAPI, React, and MongoDB).

---

### Category Submission: Think Outside the JS Box

---

### App Link

The game is live at: [mathmind.netlify.app](https://mathmind.netlify.app/)

**NOTE:** The online version may have a different version running. So, it is recommended to clone the repository and check the project out locally.

---

### Screenshots

| Home Page                                 | Lobby Page                                                     |
| ----------------------------------------- | ---------------------------------------------------------------- |
| ![Home Page](https://raw.githubusercontent.com/RajeshJ3/multiplayer-math-game/main/assets/images/01.Home.png) | ![Screenshot of Lobby](https://raw.githubusercontent.com/RajeshJ3/multiplayer-math-game/main/assets/images/02.Lobby.png) |

---

| Game Page                                                         | Results Page                        |
| ---------------------------------------------------------------------- | --------------------------------------------- |
| ![Game Page](https://raw.githubusercontent.com/RajeshJ3/multiplayer-math-game/main/assets/images/03.Game.png) | ![Results Page](https://raw.githubusercontent.com/RajeshJ3/multiplayer-math-game/main/assets/images/04.Results.png) |

---

### Description

Multiplayer Math Game is an online game, that anyone can play with their friends or with the world. The application is Build using the FARM(FastAPI, React, and MongoDB). Using MongoDB Cloud as the primary database to save the game and it's stats.



---

### Link to Source Code

GitHub Link: [RajeshJ3/multiplayer-math-game](https://github.com/RajeshJ3/multiplayer-math-game)

---

### Permissive License

[MIT Licence](https://github.com/RajeshJ3/multiplayer-math-game/blob/main/LICENSE)

---

## Background

As I am a big fan of Mathematics since childhood, I always wanted to build something that can be used by Mathematics students.

---

### How I built it

I definitely learnt a lot of things while building this amazing project in FARM stack.

---

Thank you

cheers
The Future of Programming: What to Expect in the Next Decade (by AI)
Published: 2022-12-08 18:03:50

⚠️ **Important note:** All the text of this post (excluding this note) is genarated using openGPT. I am only testing it's abilities to write something detailed.

***

The field of programming is constantly evolving, and the next decade is likely to bring many exciting changes and developments. Here are some key trends and predictions for the future of programming:

Increased focus on artificial intelligence and machine learning. As AI and ML technologies continue to advance, it's likely that we'll see more and more programming focused on developing and improving these systems. This could include new programming languages and frameworks specifically designed for working with AI and ML, as well as a greater emphasis on incorporating these technologies into existing applications.

Continued growth of cloud computing. The use of cloud-based services has exploded in recent years, and this trend is likely to continue in the coming decade. As a result, programming for the cloud will become increasingly important, with developers needing to have a strong understanding of cloud-based technologies and how to use them effectively.

Greater emphasis on security. As more and more personal and sensitive information is stored and transmitted online, the need for secure and reliable programming will become even more critical. This will require programmers to have a strong understanding of security best practices and to be constantly on the lookout for potential vulnerabilities and threats.

The rise of the "citizen programmer". While professional programmers will still be in high demand, the proliferation of tools and resources for learning to code means that more and more people who aren't trained as programmers will be able to develop their own applications and solutions. This could lead to the rise of a new class of "citizen programmers" who are able to create and deploy their own code without the need for a formal computer science education.

Overall, the next decade is likely to bring many exciting developments in the world of programming. As technology continues to advance at a rapid pace, the role of the programmer will become increasingly important and in-demand, and the tools and technologies available to them will continue to evolve and improve.
Data attributes in CSS
Published: 2022-12-08 17:59:30

⚠️ **Important note:** All the text of this post (excluding this note) is genarated using openGPT. I am only testing it's abilities to write something detailed.

***

In CSS, data attributes are used to store additional information about an element that can be used for various purposes. These attributes are added to the HTML elements and are typically in the form of data-*, where the asterisk is replaced with a descriptive name for the attribute. For example, you might have a data-product-id attribute on an HTML element that represents a product on an e-commerce website.

Data attributes are often used to store information that is not directly related to the visual presentation of the page, such as metadata or other auxiliary data. They can also be used to store information that is used by CSS or JavaScript to manipulate the page in some way. For example, you might use data attributes to store the initial position of an element that is being animated using JavaScript, or to store the URL of a larger version of an image that should be displayed in a modal window when the user clicks on the thumbnail.

In CSS, you can access the value of a data attribute using the attr function. For example, if you have an element with a data-product-id attribute, you can use the following syntax to retrieve its value:

```
element[data-product-id] {
  /* styles go here */
}
```
Alternatively, you can use the :before or :after pseudo-elements to insert the value of the data attribute into the page. For example:

```
element:before {
  content: attr(data-product-id);
}
```

Overall, data attributes are a useful tool for storing additional information about an element that can be used in a variety of ways in CSS and JavaScript. They allow you to keep your HTML clean and well-structured, while still being able to add custom data that can be used to enhance the functionality of your website.
Advent of Code 2022 Day 1
Tags: adventofcode, rust
Published: 2022-12-03 01:04:43

---
title: "Advent of Code 2022 Day 1"
published: true
description: "Advent of Code 2022 Day 1: Calorie Counting"
tags: 
- "adventofcode"
- "rust"
series: "Advent of Code 2022"
canonical_url: "https://nickymeuleman.netlify.app/garden/aoc2022-day01"
---

## Day 1: Calorie Counting

https://adventofcode.com/2022/day/1


> TL;DR: [my solution in Rust](https://github.com/NickyMeuleman/scrapyard/blob/main/advent_of_code/2022/src/day_01.rs)

We're on an expedition with the elves.
The input file represents the amount of calories each elf carries with them.
Each elf has several items.
The inventories of each elf is seperated by two line breaks.

```txt
1000
2000
3000

4000

5000
6000

7000
8000
9000

10000
```

## Part 1

Find the Elf carrying the most Calories.
How many total Calories is that Elf carrying?

For each elf we want to calculate the sum of the items they are carrying.
Then, find the largest of those sums.

I did today with one iterator chain.

Get the input string.
Split it on double newlines.
Each iterator element is now a string that represents the inventory of a single elf.

For every element: split on a single linebreak.
Turn that line into a number.
Take the sum of every number.

Now, every element is the sum a single elf is carrying.
Find the maximum of those sums.

```rust
pub fn part_1() -> u32 {
    let input = std::fs::read_to_string("src/day01.txt").unwrap();

    input
    .split("\n\n")
    .map(|elf| {
        elf.lines()
            .filter_map(|s| s.parse::<u32>().ok())
            .sum::<u32>()
    })
    .max()
    .unwrap()
}
```

## Part 2

Part 2 is very similar.

Find the top three Elves carrying the most Calories.
How many Calories are those Elves carrying in total?

Get the input string.
Split it on double newlines.
Each iterator element is now a string that represents the inventory of a single elf.

For every element: split on a single linebreak.
Turn that line into a number.
Take the sum of every number.

Now, every element is the sum a single elf is carrying.
Sort those sums.
Take the 3 largest sums, and sum those.

To sort the iterator directly, I used the `sorted()` method from the `itertools` crate.
I could have also called `.collect()` on the iterator of all sums, and store that result in a variable with type `Vec<u32>`.
Then sort that resulting vector with `.sort()`.

This sorts in ascending order, and I want the sum of the 3 last ones.
So I reverse the iterator.
Take 3 items of that iterator.
Sum those.

```rust
use itertools::Itertools;

pub fn part_2() -> u32 {
    let input = std::fs::read_to_string("src/day01.txt").unwrap();

    input
    .split("\n\n")
    .map(|elf| {
        elf.lines()
            .filter_map(|s| s.parse::<u32>().ok())
            .sum::<u32>()
    })
    .sorted()
    .rev()
    .take(3)
    .sum::<u32>()
}
```
MongoDB Atlas Hackathon 2022 on DEV
Tags: atlashackathon22
Published: 2022-12-08 17:53:55

## What I built
Social Media App - Twitter Clone

### Category Submission:
Choose Your Own Adventure

### App Link
[LIVE](https://birdie-kappa.vercel.app)

### Screenshots

* On first time opening this website/or after logging out, user will be redirected to **Login Page** and will ask to login using google account

![Imgur](https://imgur.com/2B1oCUd.jpg)


* User can see all the posts and replies on the Home Page

![Imgur](https://imgur.com/BZiYQeO.jpg)


* User can post **Text and Images**(Drag and Drop).

![Imgur](https://imgur.com/kfBozc2.jpg)


* User can change their cover image by dragging the image from local drive dropping to the the cover area.

![Before](https://imgur.com/BvbGci4.jpg)
![After](https://imgur.com/mokY2tc.jpg)


* User can **Reply** on the post as well as **Reply** on the **Replies**

![Imgur](https://imgur.com/eX7fMfj.jpg)
![Imgur](https://imgur.com/QarXGi5.jpg)


* User can **Like** the **Posts** and **Replies**

![Imgur](https://imgur.com/eTb7rC7.jpg)


* User can edit their **Bio**, **Username**, and **Display Name** on their User Page.

![Edit](https://imgur.com/6iHZQ0X.jpg)


* User can see their user posts and replies on the user page(user can access their page by clicking on their name or image).

![Imgur](https://imgur.com/QQ0FzYJ.jpg)


* User can Logout using Logout button under the posts of the Home Page.

![Logout](https://imgur.com/QoPBvMq.jpg)

### Description
It is a social media app where users can make their account using a google account and create posts, like posts, and reply to posts. 

### Link to Source Code
[GITHUB](https://github.com/sandyabhi/Twitter-clone)

### Permissive License
MIT License

## Background
What made you decide to build this particular app? What inspired you?
=> Today everyone's everyday life almost getting connected to Social Media either it be connection to people , work, money, advertising etc. So I decided to make Social Media Clone.

### How I built it
How did you utilize MongoDB Atlas?
=> I used MongoDB Atlas to store user account details,  posts, likes, comments. Fetched the users info and posts from MongoDB Atlas.
Did you learn something new along the way? Pick up a new skill?
=> I understand how to set up and use @next-auth/mongodb-adapter(MongoDB Adapter) in NextJS.


### Additional Resources/Info
TODO:
* Updating and Uploading image didn't work sometime(not fixed yet).
* Add update image to profile
* Add Trending/News/Weather to fill Side White Space
* Search Functionality to Search Users
MongoDB Atlas Hackathon 2022 on DEV
Tags: atlashackathon22
Published: 2022-12-08 17:50:29

## What I built
I built an LotteryGame API, it is typically used for selecting winners as per there contribution to the community to award them with special NFTs 

### Category Submission:
The category of my submission is Choose Your Own Adventure, as i like to go freestyle with my work, not being bounded my anything

### App Link
https://web-production-22ee.up.railway.app/



### Description
 Waffle is a API combination which powers few websites and a discord bots it is connected to, it takes in information from its servers and maps individuals work, awards them and later also selects them for lucky draw with a weighted average like method as in NBA drafts

### Link to Source Code
https://github.com/ishanjain1502/The-Odd-Waffles

### Permissive License
ISC

## Background
The rise in NFT marketplace and evolution of discord servers around it, and the very nature of all this tech prioritizing people on the basis of their contribution gave me this idea

### How I built it
I used MongoDB Atlas to create my own online database, where I can store all of my data
I have an authentication process which onboards users, and save there details on my DB, then later as per there contribution on there servers, they are given points, these points help them in participating in drops, here this list of participants selected for drop are on a different collection, from this collection we randomly select lucky winners with the help of weighted selection and get our luck winners

These lucky winners are then marked as won in the DB so that later they cant participate in next 3 drops, so as to allow other people to win too
How to detect a click outside a React component
Published: 2022-12-08 17:46:54

How to detect a click outside a React component

```
import React, { useEffect, useRef } from 'react';
import { FiSearch } from 'react-icons/fi';
import { useDispatch, useSelector } from 'react-redux';
import { focusToggle } from '../Redux/actionsCreators/searchAction';

const SearchAutoComplete = () => {
    const state = useSelector((state) => state.searchReducer);
    const dispatch = useDispatch();

    const { suggestions, isFocus } = state;

    console.log(isFocus);

    const ref = useRef(null);
    useEffect(() => {
        const handleClickOutside = (event) => {
            if (ref.current && !ref.current.contains(event.target)) {
                dispatch(focusToggle(false));
            }
        };
        document.addEventListener('click', handleClickOutside, true);
        return () => {
            document.removeEventListener('click', handleClickOutside, true);
        };
    }, [dispatch]);

    return (
        <>
            <div className="flex justify-center items-center direction flex-col ">
                <p className="text-[20px] mb-6 font-bold">Search Product</p>
                <div className=" relative ">
                    <div ref={ref} className="flex items-center relative">
                        <FiSearch className=" absolute left-2 text-white-700 " />
                        <input
                            autocomplete="off"
                            onFocus={() => dispatch(focusToggle(true))}
                            className="bg-white-500 py-2 text-[14px] p-[5px] pl-7 min-w-[500px] shadow-boxSad rounded-sm px-6 outline-none"
                            type="text"
                            name="search"
                            placeholder="search..."
                        />
                    </div>
                    <div className=" shadow-boxSad bg-white-100 absolute w-full">
                        {suggestions.map((item, i) =>
                            isFocus ? (
                                <div className="px-7 text-[14px] py-2 bg-white-500 hover:bg-white-100 duration-300 ease-in-out cursor-pointer rounded-sm" key={i}>
                                    {item}
                                </div>
                            ) : null
                        )}
                    </div>
                </div>
            </div>
        </>
    );
};

export default SearchAutoComplete;
```
Had issues with my Database
Published: 2022-12-08 17:44:37

Today I had a problem with my rails sample data appearing in MSM sign in. The real issue was that I was not adding rails db:migrate to the terminal after adding tables.Also, I was not adding the: 

 rails generate migration AddImageToMovies Image:string

rails db:migrate

this adds to the tables in your schema which will help the rails sample_data to appear in your app, because it has somewhere to go to.
Here are insights I wish I had before graduating and through my learning journey
Tags: tips, learning
Published: 2022-12-08 17:42:47

> **Networking is key.**

Building relationships with professionals in your field, whether through internships, job opportunities, or industry events, can be incredibly valuable for your career. These connections can provide valuable insights, advice, and even job opportunities in the future.

> **Don't be afraid to take risks**. 

Sometimes, the best learning opportunities come from stepping out of your comfort zone and trying something new. Whether it's pursuing an internship in a new field or taking a course outside of your major, taking risks can help you gain new skills and experiences that can benefit your career.

> **Always be learning**. 

The world is constantly changing, and the skills that were valuable in the past may not be as valuable in the future. Make sure to stay up to date with new developments in your field and continuously improve your skills to remain competitive in the job market.

> **Focus on transferable skills**. 

While it's important to develop expertise in your specific field, it's also valuable to build a diverse set of skills that can be applied to a variety of situations. These "soft skills," such as communication, teamwork, and problem-solving, can be useful in any career and can help you stand out to employers.

> **Don't be afraid to ask for help**. 

Whether you're struggling with a difficult course or are unsure about what career path to pursue, it's okay to ask for help. Reach out to mentors, career advisors, or even friends and family for advice and support. These individuals can provide valuable insights and guidance that can help you succeed.
Caching Repetitive UDF Access to Request Scope Using Argument Stringified+Hashed Key
Tags: cfml, coldfusion, java
Published: 2022-12-08 17:38:23

While viewing [FusionReactor](https://www.fusion-reactor.com/) logs for a ColdFusion app, I noticed lots of repetitive JDBC entries in a request that contained the same exact SQL statement and was taking **42ms** per execution.  I checked the UDF that was performing the query (using [QB](https://github.com/coldbox-modules/qb)) and the query was configured to be cached for 5 minutes... but overhead-wise, it was still taking **42ms** each time. The "Number of Queries" for the request was 57 and most of the queries were similar cached 40ms lookups and it started adding up to **1,452ms** overall.  I wondered if there was anything I could do to add self-contained caching to UDFs that could benefit from them. I didn't want to save the response to the session (YIKES! I've seen some code that does this) or use `cachePut`/`cacheGet` since the caching only needs to live for a single request of "repetitive access".

I've been playing with the java `hashCode()` function to convert strings to a unique signed integer and wondered if I could stringify the arguments passed to create a cacheable key and very temporarily store the result in the request scope. This works (for me) and I'm happy with the results, but I wonder if there are any potential issues or side effects that I'm not considering (besides the rare chance of hashing entropy).

Here's a sample UDF with some slow/fake business logic (emulated using `sleep(1000)`). The first request is normally slow (as expected) whereas all repeat accesses with the same exact arguments are **0ms**. I believe that this approach may also work in environments that use multithreaded processing on a single request, but I'm not 100% sure. (ie, in a multithreaded environment, would it be recommended to use `CFLock` with request scope locking?)


## Source Code

https://gist.github.com/JamoCA/62f8535cfcf5dacd4e7f5ea678038330

{% gist https://gist.github.com/JamoCA/62f8535cfcf5dacd4e7f5ea678038330 %}
No More Visual Studio - Hello CodeSpaces
Tags: programming, ubuntu, powershell, github
Published: 2022-12-08 17:31:50


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o732f3f5syhjc5mnv0ku.jpg)[](https://josephdeblasio.substack.com/p/no-more-visual-studio-say-hello-codespaces)

https://josephdeblasio.substack.com/p/no-more-visual-studio-say-hello-codespaces/