teleren/devto huggingface dataset:
Toronto MongoDB User Group Meeting Sept 5
Published: 2023-09-08 01:46:08

I had a great time co-organizing the Toronto MUG event this past week!

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

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kzgypockry8cqj6riyy.JPG)

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

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

Event Summary
Toronto MUG Organizers: Chris Dellaway, Grace Gong
Agenda:
6:00PM Doors Open, Supper and Networking
6:30PM Prashant (MongoDB) Amplifying Retail Operations with Generative AI: The Untapped Potential
7:00PM Lachlan (Community) - Company journey with MongoDB
7:20PM Devang (Community) Using MongoDB Clustered Collection to Boost Query Performance
7:30PM Networking

The event was held at the Microsoft Toronto headquarters from 6-8pm on Tuesday September 5 2023 with the aim of fostering connections and sharing knowledge among members of the MongoDB Community.
The crowd was truly engaged, and the diversity of the attendees resulted in vibrant discussions and insightful questions. 

Learned

Attendance Accuracy: Future events should either emphasize the importance of accurate RSVPing or anticipate a specific turnout percentage to prevent underutilisation of space.
Improving Check-in: An advanced and digital check-in system can greatly improve the event’s commencement process.
Balancing Time: A clear mechanism to ensure speakers stick to their allocated time can make the event more streamlined.
Loved

Speakers: They were highly informative, and their sessions were greatly appreciated by all attendees.
Community Connection: Attendees left the event feeling more connected with the MongoDB Community and inspired.
Feedback: The considerable number of feedback forms received demonstrated the attendees’ involvement and commitment to improving future events.
Diverse Discussions: The diverse background of attendees enriched the discussions and questions during the event.
Ideas/Action Items for the Next Event

Allocate budget for name tags and markers to facilitate easier recognition and networking. Also next time we can introduce volunteers and have the slide for them as well
Explore advanced check-in systems for a smoother start to the event.
Liaise with adjacent event organisers to coordinate and ensure both events run seamlessly without confusion for attendees.
Core to your Global Presence - AWS VPC
Tags: aws, security, vpc, architecture
Published: 2023-09-08 01:19:39


VPC, is ideally, the logical isolation of your solution design on AWS Cloud. If you are marking your cloud debut, then post selecting the right AWS Region for your workloads, the next thing is to have logical isolation of where your business solutions' resources in AWS will be placed, for example, Compute, Storage etc

But often, VPC design is left to networking experts other than mentioning in the solution architecture diagrams, but this is one vital back bone, I would say. A VPC is multi-faceted, it scopes to be looked at from Networking, Security, Cost & Design scaling perspectives and these are the key factors to be under consideration while choosing the VPC design

There are lot of web definitions, HowTo guides for creating VPC and its components but this post is to discuss about the key pointers to be focused for a reliable VPC

With the Solution Design experience, I am listing few points that needs to be considered for VPC designs. Also, I do confess, that I am not an expert in VPC core networking implementation but the thoughts drafted here would suit most of the VPC implementations as essential factors

_**Vision**_
Firstly, on deciding to be on cloud, design needs good strategy for segregating resources for to be public, private and how scalable the workload is going to be, as this decides the CIDR IP address range, split of Public facing & Private facing subnets. Ultimately, having all the requirements considered, a good vision helps in getting a scalable network


_**Security**_
As per AWS Shared Responsibility Model, cloud presence of resources on cloud, is with the customer and hence proper enforcement of Public Access resources, Internet Access, Firewall, Security Groups, Route Tables all contributes a well secured network


_**Cost**_
Connectivity between VPCs, connect between on-premise network to AWS Cloud, End points for direct access to resources like S3, Direct Connect all these options to be gauged during design for estimating the cost in operating such network of systems


_**Monitoring**_
Well, all in place, and when your application is functioning perfectly on cloud, still we need to monitor the traffic in & out into the networks via VPC Flow Logs. This logging mechanism helps us in tracking the traffic and prevent attacks



Hope these helps in creating better VPC design !!
How do I change variant options in Shopify?
Published: 2023-09-07 16:38:45

To adjust variant options in Shopify, some of my fellow merchants have found success with apps available in the Shopify app store like **[Smart Product Options](https://spo.transverser.com/?utm_source=quora&utm_medium=social&utm_campaign=organicpost)**, Variant Option Product Options, Globo Product Options, Variant .These apps provide a seamless solution for modifying variant options on product pages. One notable advantage is the ease with which merchants can make changes, without being limited by the number of options they wish to incorporate. This adaptability proves valuable in retaining customers on their websites.
These apps often feature user-friendly interfaces that allow merchants to alter variant details such as colors, sizes, and styles effortlessly. Moreover, they provide the convenience of adding an extensive range of variant choices without encountering any restrictions. This level of customization enhances the overall shopping experience and can potentially lead to increased conversions.

By leveraging these apps, merchants gain the ability to respond swiftly to market trends, update product offerings, and tailor variant options based on customer preferences. This dynamic approach not only promotes customer retention but also fosters a user-friendly and engaging environment, ultimately contributing to improved customer satisfaction and business growth.
A fully responsive Nike Store App built using React.js
Tags: shopping, website, ecommerce
Published: 2023-09-09 11:23:24

---
title: A fully responsive Nike Store App built using React.js
published: true
date: 2023-09-08 00:51:00 UTC
tags: Shopping,WebSite,Ecommerce
canonical_url: https://reactjsexample.com/a-fully-responsive-nike-store-app-built-using-react-js/
---

 ![A fully responsive Nike Store App built using React.js](https://reactjsexample.com/content/images/2023/09/Code_2023-09_13-45-47.jpg)

```
# Nike Store App

## Project Setup

This project is built using Vite.js and React.js with Tailwind CSS for styling.

To set up the project, follow these steps:

1. Clone the repository to your local machine:

   ```bash
   git clone https://github.com/your-username/nike-store-app.git
```

1. Navigate to the project directory:

2. Install the project dependencies:

3. Start the development server:

## About

This project is a fully responsive Nike fake store app, beautifully styled with Tailwind CSS. It provides a user-friendly interface for browsing Nike products and includes basic sign-up and sign-in functionality using local storage.

## Features

- Stunning and responsive user interface crafted with Tailwind CSS.
- Browse and view Nike products.
- Basic sign-up and sign-in functionality using local storage for user authentication.

## Technologies Used

- Vite.js
- React.js
- Tailwind CSS

## Preview

You can access the live project [here](https://nike-store-app-omega.vercel.app/).

## Screenshots

 ![A fully responsive Nike Store App built using React.js](https://user-images.githubusercontent.com/52382395/265273819-ff8384e6-f6c5-44f8-a95d-83881b20f0cb.png) ![A fully responsive Nike Store App built using React.js](https://user-images.githubusercontent.com/52382395/265274188-51339300-626b-4541-ac4f-dd175a94bea7.png) ![A fully responsive Nike Store App built using React.js](https://user-images.githubusercontent.com/52382395/265273868-c75e885c-419a-4d34-81ca-01eb5740eae8.png) ![A fully responsive Nike Store App built using React.js](https://user-images.githubusercontent.com/52382395/265274247-391128af-1559-44e9-a120-28badc1ca72f.png)

## Usage

To use the Nike Store App, follow these steps:

1. Open the app in your web browser by clicking on the [live project link](https://nike-store-app-omega.vercel.app/).

2. Browse the Nike products available in the store.

3. Sign up for an account using the “Sign Up” feature.

4. Log in to your account using the “Sign In” feature.

5. Enjoy shopping for Nike products!

## GitHub

[View Github](https://github.com/ChandanSahu98/nikeStoreApp?ref=reactjsexample.com)
A youtube clone made using ReactJS, Redux Toolkit, Tailwind CSS and Youtube API
Tags: youtube
Published: 2023-09-09 11:23:16

---
title: A youtube clone made using ReactJS, Redux Toolkit, Tailwind CSS and Youtube API
published: true
date: 2023-09-08 00:48:00 UTC
tags: youtube
canonical_url: https://reactjsexample.com/a-youtube-clone-made-using-reactjs-redux-toolkit-tailwind-css-and-youtube-api/
---

# Streamy ~ Youtube Clone
 ![A youtube clone made using ReactJS, Redux Toolkit, Tailwind CSS and Youtube API](https://reactjsexample.com/content/images/2023/09/Code_2023-09_13-43-03.jpg)

A youtube clone made using ReactJS, Redux Toolkit, Tailwind CSS and Youtube API

[View Demo](https://streamy-youtube-clone.vercel.app/)[View Github](https://github.com/keshavop/Streamy-Youtube-Clone?ref=reactjsexample.com)

### 🌟 Features that Set Streamy Apart:

- ✅YouTube API Integration: We’ve seamlessly integrated the YouTube API to offer you access to an extensive library of videos. It’s like having YouTube at your fingertips!
- ✅ Network Calls, Supercharged: Thanks to React Query, we’ve elevated performance by caching network calls. Say goodbye to sluggish loading times!
- ✅ Effortless Searching: Our search feature is lightning-fast, thanks to debouncing and caching. Find your favourite videos in the blink of an eye.
- ✅Responsive Design: Whether you’re on a desktop, tablet, or mobile, Streamy’s responsive design ensures a seamless experience on all devices.
- ✅Dark Mode: Protect your eyes during late-night binging sessions with our built-in dark mode. Your comfort is our priority!

💻 Tech Stack Used :

- React, JavaScript
- Redux ,Redux Toolkit
- Tailwind CSS
- React-Router-Dom
- Functional Components
- Vercel hosting

### Streamy represents the future of video streaming platforms. We’ve combined the latest technologies, including React.js, Redux Toolkit, React Query, and Tailwind CSS, to create a user-centric, feature-rich application that mirrors the best of YouTube.
Intro to Ruby in the Browser (Talk Video)
Tags: ruby, web, webassembly, opal
Published: 2023-09-08 00:46:17

Matz mentioned in his RubyConf 2022 keynote speech that in the future of Ruby, maybe we could start replacing JavaScript with Ruby in the browser... 

YouTube Video:

{% embed https://youtu.be/4AdcfbI6A4c?si=hkHElMC-5sPHZ2Lz %}

Blog Post:

https://andymaleh.blogspot.com/2023/09/montrealrb-sep-2023-intro-to-ruby-in.html
Javascript VS TypeScript : Going Back to JavaScript and stop using TypeScript
Tags: discuss, javascript, typescript, webdev
Published: 2023-09-08 00:36:08

In recent years, TypeScript has emerged as a popular choice for many developers due to its extra layer of static typing. However, this article will explore the reasons why you should reconsider using TypeScript and shift back to pure JavaScript. We aim to spark thought-provoking discussions and encourage users to share their opinions in the comments section.

## React.js was written with Javascript


[![Javascript VS TypeScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8hwz5rn4hqqca1e51gn.png)](https://github.com/facebook/react)



**Simplicity and Flexibility:**
JavaScript, being a dynamically typed language, offers a greater degree of flexibility by allowing developers to write code more intuitively without the overhead of type annotations. By reverting to JavaScript, developers can embrace the simplicity of the language, focusing solely on achieving desired outcomes rather than wrestling with complex type systems.

**Rapid Prototyping:** 
One of the major drawbacks of TypeScript is its learning curve and initial setup time. JavaScript, on the other hand, provides an ideal environment for rapid prototyping, enabling developers to quickly iterate and experiment with different ideas. Returning to JavaScript would empower developers to hack together ideas faster and get immediate feedback.

**Larger Talent Pool:**
TypeScript, being a relatively new addition to the JavaScript ecosystem, limits the available talent pool of developers. By embracing JavaScript, you open up opportunities to collaborate with a larger community of developers who are proficient in the language. This advantage not only facilitates better knowledge sharing but also enhances the potential for finding skilled team members and contributors.

**Reduced Code Complexity:**
Although TypeScript promotes type safety and catches potential errors during compile-time, this additional layer of complexity can make the codebase harder to understand and maintain. In contrast, JavaScript's dynamic nature allows for more concise and readable code, reducing overall complexity and improving collaboration within development teams.

**Vibrant Ecosystem:**
JavaScript boasts an extensive ecosystem of libraries, frameworks, and tools carefully crafted over the years. While TypeScript does support JavaScript libraries, not all of them have TypeScript type definitions readily available. By transitioning back to JavaScript, developers gain access to a vast array of battle-tested resources and community-driven solutions.

We hope this article has ignited a conversation, and we eagerly await your thoughts and comments on this topic ? 

Join  us @ [IDURAR : JS Open Source project](https://github.com/idurar/idurar-erp-crm)
Cloud Run
Tags: docker, devops, cloud, googlecloud
Published: 2023-09-08 05:23:20

---
title: Cloud Run
published: true
date: 2023-09-08 00:35:51 UTC
tags: docker, devops, cloud, googlecloud
canonical_url: https://scooting.dev/cloud-run
---

## The case for Cloud Run

I'm sure by now you have heard the tales of the magical land called Kubernetes and all the benefits that come along with it. What may have slipped the cracks is the darker side of Kubernetes. Yes, I am referring to the proper maintenance and securing of a cluster, along with the laborious setup process. What if your app doesn't have enough moving parts to warrant all of that effort? Thanks to Cloud Run, you are not stuck with Elastic Beanstalk any more!

## What is Cloud Run?

According to Google's documentation,

> Cloud Run is a managed compute platform that lets you run containers directly on top of Google's scalable infrastructure.

Some of those phrases should sound familiar to anyone who has scanned through a Kubernetes walkthrough or quick-start. Google Cloud Run essentially allows you to have the core flexibility of Kubernetes combined with the scale of Google Cloud and best of all, this service allows scaling to zero, which is great for dev environments as well as apps that are infrequently used.

## How to get started

Cloud Run makes it super simple to get started. I personally always use a Docker image and that is the route that I will describe here but there are language-defaults such as for [Node](https://cloud.google.com/run/docs/quickstarts/build-and-deploy/deploy-nodejs-service) which can be used to steer clear of writing a Dockerfile. Once you have a Dockerfile written, just make sure that your service is accepting HTTP requests at `0.0.0.0:$PORT` and you're off to the races. Head to [https://console.cloud.google.com/run](https://console.cloud.google.com/run), hit Create and link your GitHub repository. Did I mention that using this method also bundles Continuous Deployment with Google Cloud Builds with no extra effort?

## Common pitfalls

One of the only scary things about Google Cloud Run is runaway billing. There have been some examples of this in the past ([the unlucky guinea pig](https://blog.tomilkieway.com/72k-1/), [meta article](https://www.infoq.com/news/2022/08/recursive-serverless-functions/)) and this, at least in theory, is very preventable by setting a reasonable maximum number of instances.
Mastering ES6 - Map, Filter, and Reduce
Tags: webdev, javascript, beginners, tutorial
Published: 2023-09-08 00:31:39

## Introduction

ES6 (ECMAScript 2015) introduced several powerful array methods that significantly simplify working with arrays in JavaScript. Among these methods, **`map`**, **`filter`**, and **`reduce`** stand out as versatile tools for transforming, filtering, and aggregating data in arrays. In this guide, we'll explore these three methods and demonstrate how to use them effectively.

## The `map` Method

The `map` method is used to create a new array by applying a provided function to each element of an existing array. It's particularly useful for transforming data in an array without modifying the original array.

### Syntax:

```javascript
const newArray = array.map(callback(currentValue[, index[, array]]) {
  // Transformation logic here
}, thisArg);
```

### Example:

```javascript
const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map((number) => number * 2);

console.log(doubled); // Outputs: [2, 4, 6, 8, 10]
```

## The `filter` Method

The `filter` method is used to create a new array containing all elements that pass a provided test (predicate) function. It's a powerful tool for selecting specific elements from an array.

### Syntax:

```javascript
const newArray = array.filter(callback(element[, index[, array]]) {
  // Test logic here
}, thisArg);
```

### Example:

```javascript
const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter((number) => number % 2 === 0);

console.log(evenNumbers); // Outputs: [2, 4]
```

## The `reduce` Method

The `reduce` method is used to reduce an array to a single value by applying a provided function to each element, accumulating the result. It's often used for tasks like summing values, finding the maximum or minimum, or concatenating strings.

### Syntax:

```javascript
const result = array.reduce(callback(accumulator, currentValue[, index[, array]]) {
  // Accumulation logic here
}, initialValue);
```

### Example:

```javascript
const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentNumber) => accumulator + currentNumber, 0);

console.log(sum); // Outputs: 15
```

## Combining Methods

These array methods can be combined to perform complex operations on arrays. For example, you can use `filter` to select specific elements from an array and then `map` to transform those selected elements.

```javascript
const numbers = [1, 2, 3, 4, 5];

const squaredEvenNumbers = numbers
  .filter((number) => number % 2 === 0) // Select even numbers
  .map((number) => number ** 2); // Square them

console.log(squaredEvenNumbers); // Outputs: [4, 16]
```

## Conclusion

The `map`, `filter`, and `reduce` methods are powerful tools for manipulating arrays in JavaScript. They enable you to write concise and expressive code for transforming, filtering, and aggregating data. Understanding these methods and when to use them is crucial for mastering ES6 and writing more efficient and readable JavaScript code.

*Estimated Reading Time: 5 minutes*
🚀 Discover the Rust Revolution for Shell Scripts with Mush 🚀
Tags: rust, shell, bash, zsh
Published: 2023-09-08 00:16:18

Hello dear dev.to-ers! Are you ready for an epic revolution in the world of shell scripts? We have a surprise for you! 🎉

🌟 **Mush**: *The Future of Shell Scripts is Here!* 🌟

Have you ever wished for a better and more robust way to organize your shell scripts? Tired of compatibility issues between BASH and ZSH? Well, sit back and get ready to be blown away by the storm of innovation sweeping through the world of shell scripting, courtesy of **Mush**.

🐚 **Mush: Rust-Inspired Shell Scripting Reinvented** 🐚

Mush is a powerful and flexible tool for creating shell scripts, inspired by Rust. This tool is completely transforming how we organize and write shell scripts. With Mush, forget about compatibility worries across different shells and embrace the beauty of Rust-inspired syntax and security.

🎨 **Key Features of Mush** 🎨

- 🌈 Intuitive and clean syntax inspired by Rust.
- 💪 Enhanced security and stability thanks to Rust.
- 🚀 A project management system to organize your scripts.
- 🌐 Multi-shell compatibility for effortless portability.
- 🛠️ Extensible and customizable to fit your needs.

⭐ **Star Mush on GitHub!** ⭐

If you're as excited as we are about this shell script revolution, take action! Star the [Mush GitHub page](https://github.com/javanile/mush) to show your support. Help us spread the word about this incredible resource for shell script enthusiasts.

💡 **Conclusion** 💡

Mush is the future of shell scripts and is about to change how we write and organize BASH and ZSH scripts. Join the Rust-Inspired revolution and make a difference in the world of shell scripting.

Don't wait! Start using Mush today and experience the power of shell scripting like never before! 🔥🚀
Autoformat in VSCode on Auto-Saves
Published: 2023-09-08 23:46:16

---
title: Autoformat in VSCode on Auto-Saves
published: true
date: 2023-09-08 00:00:00 UTC
tags: 
canonical_url: https://coreyja.com/til/vscode-autoformat-autosaves
---

I've had VS Code setup to format my code on save for a while now, and I love it!

Recently though I had a few files slip through my auto-formatting and be caught in CI. When I investigated it turns out that my VS Code settings were prevening auto-formatting from running on auto-save.

I had `files.autoSave` set to `afterDelay` and `files.autoSaveDelay` set to `300`. Which meant that after 300ms my code would auto-save. However, auto-formatting would only run on manual saves, not auto-saves triggered by `afterDelay`.

The fix was pretty simple! I switched from `afterDelay` to `onFocusChange`! Now my files get changed anytime I switch to a different window or file, and even better auto-formatting runs as well!

Here is a snippet from my new config with a comment I left for future me:

```
"files.autoSave": "onFocusChange",
// By setting files.autoSave to `onFocusChange` the delay below isn't needed
// We need to use `onFocusChange` (or `onWindowChange`) since auto formatting isn't
// applied when using `afterDelay` :sadnerd:
// "files.autoSaveDelay": 300,
```
French Fridays for Developers - 015
Published: 2023-12-14 18:53:13

---
title: French Fridays for Developers - 015
published: true
date: 2023-09-08 00:00:00 UTC
tags: 
canonical_url: https://gingerkiwi.dev/blog/2023-09-08-french-fridays-for-developers-015/
---

In March, 2023 started French for Devs Fridays to celebrate getting to 400 days on Duolingo. Here you'll find weekly useful and/or amusing French phrases for developers. This one is for all my fellow devs who are also doing DSA/technical interview prep.

Today is my:

- 🇫🇷 **588th day of French** ,
- 🇳🇱 247th day of Dutch,
- 🏴󠁧󠁢󠁷󠁬󠁳󠁿 86th day of Welsh,
- 🇩🇪 8th day of German,
- 🇳🇴 2nd day of Norwegian,

Here's this week's French for Devs quote and translation. I was reading Apple news and came across a brilliantly worded article by Tristian Cross of The Guardian. A link to his article is below.

Week 15, 08 septembre 2023

> _« La confusion fait partie de la programmation » <br> ~ Felienne Hermans, [The Programmer's Brain](https://www.felienne.com/book)(2021)_

English: French for Devs #015, September 08, 2023

_"Confusion is part of programming”_– Felienne Hermans, [The Programmer's Brain](https://www.felienne.com/book)(2021)