teleren/devto huggingface dataset:
Using Regex Search for MongoDB Queries
Tags: mongodb, regex, javascript
Published: 2024-03-11 16:13:08


![Mongo DB](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wt5yvzg93ebisvy7b46o.png)


As a developer, I often find myself in situations where I need to perform case-insensitive searches on data stored in MongoDB. This can be particularly useful when dealing with user information, such as names or emails. Fortunately, MongoDB provides a powerful feature called "regular expressions search" that can help us achieve this goal.

Here's the code snippet I wrote:

```javascript
function getSearchFilter(queryStringParameters: APIGatewayProxyEventQueryStringParameters) {
  const params = [
    'companyId',
    'jobNo',
    'engineer.email',
    'customer.address.postcode',
    'jobStatus',
  ];

  let filter = new Map<string, string | number | object>();
  params.forEach((key) => {
    if (queryStringParameters && queryStringParameters[key]) {
      const value = queryStringParameters[key];
      if (typeof value === 'number') {
        filter.set(key, parseInt(queryStringParameters[key]));
      } else {
        filter.set(key, { $regex: new RegExp(queryStringParameters[key], 'i') });
      }

      return;
    }
  });

  return filter;
}
```

In this code snippet, we define a function `getSearchFilter` that takes an object `queryStringParameters` as input. This object contains the parameters passed in the query string of a request.

The function first defines an array `params` containing the keys we want to search for. Then, it creates an empty `Map` called `filter`.

Next, we loop through each key in the `params` array. If the `queryStringParameters` object contains a value for the current key, we check if the value is a number or not.

If the value is a number, we simply add it to the `filter` map with the corresponding key.

However, if the value is not a number, we create a regular expression object using the `new RegExp()` constructor. We pass the value from `queryStringParameters` as the first argument and the `'i'` flag as the second argument. The `'i'` flag makes the regular expression case-insensitive.

We then add this regular expression object to the `filter` map, using the `$regex` operator provided by MongoDB. This tells MongoDB to perform a regular expression search for the given key and value.

Finally, we return the `filter` map, which can be used in a MongoDB query to perform a case-insensitive search.

By leveraging regular expressions in this way, I was able to easily search for user names and emails, regardless of their capitalization. This approach can be applied to various scenarios where case-insensitive searches are required, making it a valuable tool in a developer's arsenal.
ตั้งค่า nginx ให้รับ IP จริง จาก client เมื่อเว็บเราอยู่หลัง Cloudflare
Published: 2024-03-11 16:07:14

เมื่อเราผูกโดเมนกับ dns server ของ cloudflare ซึ่ง cloudflare จะทำหน้าที่เป็นด่านหน้าแทน web server ของเราอีกชั้นนึง ทำหน้าที่เป็น reverse proxy เป็น cdn ช่วยให้เว็บเข้าได้เร็วจากทั่วทุกมุมโลก ทำหน้าที่เป็น web application firewall ป้องกันการโจมตีให้เราได้เบื้องต้น ป้องกันการ ddos ให้เราได้ค่อนข้างดี cloudflare มีให้เรามากขนาดนี้ตั้งแต่แพคเกจฟรี แบบว่าให้ใช้ฟรีซะจนเกรงใจ

เมื่อมี cloudflare มาทำหน้าที่เป็นด่านหน้าให้ web server ของเรา ข้อจำกัดอย่างหนึ่งก็คือ โดยปกติฝั่ง web server จะไม่ได้รับข้อมูล IP ของ client หรือของผู้เข้าชมเว็บไซต์ที่แท้จริงโดยตรง แต่กลายเป็นว่าได้รับ IP ของ cloudflare ซะเองที่กั้นหน้าอยู่ ทำให้การเก็บ access log หรือ audit log ในฝั่ง web server ได้รับข้อมูลไม่ตรงตามความจริง แต่ cloudflare ก็ยังใจดีแปะ Original IP ของ Client มากับ Header ให้เราด้วย 

หลายๆคนอาจจะมองข้ามเรื่องการเก็บ access logs แต่ถ้าหากเกิดอะไรขึ้นกับเว็บและข้อมูลสำคัญบน server ยังสามารถสืบหา hacker ได้จาก IP Address ซึ่งก็เคยมีประสบการณ์ในการติดตาม hacker จาก IP Address และส่งข้อมูลให้ตำรวจดำเนินคดีกับ hacker มาแล้ว  
และเพื่อสอดคล้องไปกับกฎหมาย PDPA จำเป็นจะต้องมีแบบฟอร์มขอความยินยอม(Consent)ในการเก็บข้อมูลส่วนบุคคลบนเว็บไซต์ด้วย ซึ่งข้อมูลหนึ่งในนั้นก็คือ IP Address

มาเข้าเรื่องการตั้งค่าใน nginx กันครับ

สำหรับ nginx จำเป็นจะต้องใช้โมดูลที่ชื่อว่า ngx_http_realip_module ซึ่งถ้าติดตั้ง nginx ปกติ หรือรัน docker nginx ก็จะมี built in มาให้พร้อมแล้วในตัว เว้นแต่ใครที่เอา source code ของ nginx มา compile เองก็อย่าลืม enable module นี้ด้วย

1.เริ่มจากสร้างไฟล์ config ไว้ที่ /etc/nginx/cloudflare.conf เพิ่มข้อมูลไฟล์ตามด้านล่างนี้

```
#Cloudflare

# - IPv4
set_real_ip_from 173.245.48.0/20;
set_real_ip_from 103.21.244.0/22;
set_real_ip_from 103.22.200.0/22;
set_real_ip_from 103.31.4.0/22;
set_real_ip_from 141.101.64.0/18;
set_real_ip_from 108.162.192.0/18;
set_real_ip_from 190.93.240.0/20;
set_real_ip_from 188.114.96.0/20;
set_real_ip_from 197.234.240.0/22;
set_real_ip_from 198.41.128.0/17;
set_real_ip_from 162.158.0.0/15;
set_real_ip_from 104.16.0.0/13;
set_real_ip_from 104.24.0.0/14;
set_real_ip_from 172.64.0.0/13;
set_real_ip_from 131.0.72.0/22;

# - IPv6
set_real_ip_from 2400:cb00::/32;
set_real_ip_from 2606:4700::/32;
set_real_ip_from 2803:f800::/32;
set_real_ip_from 2405:b500::/32;
set_real_ip_from 2405:8100::/32;
set_real_ip_from 2a06:98c0::/29;
set_real_ip_from 2c0f:f248::/32;

real_ip_header CF-Connecting-IP;
```
ในที่นี้จะเป็นตั้งค่า trusted IPs เพื่อรับ real ip header จาก cloudflare 
อัพเดท list ips ของ cloudflare ได้จาก link นี้ [https://www.cloudflare.com/ips/](https://www.cloudflare.com/ips/)


2.แก้ไขไฟล์ /etc/nginx/nginx.conf และเพิ่ม include ให้อยู่ภายใน http{....} block ตามตัวอย่างด้านล่าง

```
http {

    include /etc/nginx/cloudflare.conf; 
    
}
```
3.แก้ไขเสร็จแล้วก็ให้ restart nginx 
```bash
sudo systemctl nginx restart
```

reference [https://developers.cloudflare.com/support/troubleshooting/restoring-visitor-ips/restoring-original-visitor-ips/](https://developers.cloudflare.com/support/troubleshooting/restoring-visitor-ips/restoring-original-visitor-ips/)
Unraveling the Mysteries of Predictive Analytics: A Data Science Perspective
Published: 2024-03-11 15:55:42


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7bv51v7wbvecsd2dn53.jpg)
Now, let's talk certifications. In the ever-evolving landscape of data science, having the **[best online data science courses](https://www.learningsaint.com/professional-in-data-science)** can be a game-changer. One of the most reputable certifications in the field is the Certified Analytics Professional (CAP) credential. It's recognized globally and demonstrates proficiency in analytics, including predictive analytics. Another popular certification is the Data Science Certification from the Data Science Council of America (DASCA). This certification covers a wide range of topics, including predictive modeling, machine learning, and data mining.

But certifications alone won't make you a data science wizard. You need the right skills and knowledge to wield the power of predictive analytics effectively. So, what's the best way to learn data science? Well, there's no one-size-fits-all answer, but here are some tried-and-true methods:

Online Courses: Platforms like Coursera, edX, and Udacity offer a plethora of courses on data science and predictive analytics. Look for courses that cover topics like machine learning, statistical analysis, and data visualization. These courses often include hands-on projects that allow you to apply what you've learned in real-world scenarios.

Books and Tutorials: Don't underestimate the power of good old-fashioned books. There are plenty of excellent resources out there, from beginner-friendly guides to in-depth textbooks on advanced topics. Websites like Kaggle and Towards Data Science also offer a treasure trove of tutorials and articles written by industry experts.

Bootcamps and Workshops: If you're looking for a more immersive learning experience, consider enrolling in a data science bootcamp or attending workshops and seminars. These intensive programs often provide hands-on training and mentorship from seasoned professionals.
What is a Video Huddle and how to implement one
Tags: videosdk, superviz, webdev, tutorial
Published: 2024-03-11 15:47:22

Discord has set a benchmark for creating a virtual environment where people can enter an audio or video meeting for real-time sharing and collaboration, previously such tools were used mostly for meetings and not focusing on the content everyone was working on. Primarily used for gaming, it creates a sense of togetherness, enabling activities like code review, teaching, and team productivity, even when physically apart. Many tools, like Slack Huddle, came along later.

As a developer, using [SuperViz SDK](https://superviz.com/), you can implement a video conference at the place the participants would collaborate. 

Collaboration mode is a feature that allows participants to interact with the content loaded on the web page while still on a call. It provides a huddle-like experience where the video meeting is overlaid on the same page. It can offer significant benefits in various scenarios. For instance:

- Real estate agents can [guide potential buyers through properties in real time](https://docs.superviz.com/demos/real-estate).
- Customer service representatives can provide personal and straightforward tech assistance
- Team members can [collaborate on projects in real time](https://docs.superviz.com/demos/whiteboard).
- Gamers can have fun together with their friends while still immersed in the game.
- Teachers can guide students through learning materials.
- And many more.

## **How to enable or disable Collaboration mode**

When using the Video SDK from SuperViz, you can enable it by changing the `collaborationMode` when creating a new [Video Conference](https://docs.superviz.com/sdk/video/video-conference). The `enabled` flag controls the activation of collaboration mode. By default, this mode is enabled, providing a huddle-like experience. If the collaboration mode is turned off, the video conference will occupy the entire page with a familiar experience of video conferencing, altering the user experience.

```tsx
collaborationMode: {
  enabled: true,
}
```

## Options for Collaboration mode[](https://docs.superviz.com/guides/video/collaboration-mode#options-for-collaboration-mode)

Depending on the page you are building, you will need to have the freedom to adjust your layout by setting position for the camaras, layouts and more. In this section, you will learn how to use the `position`, `initialView`, and `modalPosition` to better suit your application.


![Possible layout choices](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfpw42tzxrzznmc14x85.png)



To learn more about how to best utilize these options and tweak your video huddle according to your needs, check out the [Video SDK documentation](https://docs.superviz.com/guides/video/collaboration-mode). It provides in-depth information on all the features and configurations available.
Guest Lecture for Delta-N at Haagse Hogeschool in Den Haag
Tags: pairprogramming, lecture, students, community
Published: 2024-03-11 15:35:55

---
title: Guest Lecture for Delta-N at Haagse Hogeschool in Den Haag
published: true
description: 
tags: pairprogramming, lecture, students, community
cover_image: https://raw.githubusercontent.com/StacyCash/blog-posts/main/general/2024/guest-lecture-2023/cover-image.jpg
# published_at: 2024-03-11 15:28 +0000
---

One of the things that I love about being in the developer comminity is that I get the chance to (hopefully) get people excited about software development.

Whenever I take to the stage to talk about my favorite technologies, or ways of working, my whole goal is to try and show what is possible and hopefully inspire someone to give it a try.

When a friend from [DeltaN](https://www.delta-n.nl/) asked me if I would be interested to give a guest lecture at their  [DevOps course at the Haagse Hoogschool](https://www.delta-n.nl/colleges-devops-aan-de-haagse-hogeschool/) I jumped at the chance!

Back in December 2024 I was invited to give a lecture for the second time - talking about pair programming:

- How it can go wrong
- Ways to make it go right
- Some of the benefits that you get it right

It's a subject close to my heart, after seeing work really well, and also seeing it kind of not 😅 And whilst I know that there are some opposing views on this, I have found that when you can make it work, you can really make the team better than the sum of their indivudual skills.

Getting the chance to share my learnings and experience with students, whilst they were still learing, was a huge honour - I'm so happy that I got the chance to do it!

Even if speaking to a group of about 50 students is so much more nervewracking than speaking to a 1000 people at a developer conference 😅 

As well as being invited to give the lecture, I was also invited to see the students final presentations for the course. Split into groups and coming up with an idea for a new web application, work on the design, build and deploy it.

Seeing the ideas that the students came up with was an eye opener. All of them were about, in some way, making the world a better place. Either through services to pepole to allow them to communicate better or ways to reduce our impact on the plannet. I loved the sense of civic responsibility in all of the ideas.

Looking at the quaity of the presentations I was overawed at the presentation skills of the teams, and the solutions that they came up with. Kudos to everyone! Far better than I remember either giving when I was a student, or seeing from others.

And then just to make the day perfect, when I was leaving to go home I ran into one of the teams in the car park and had a great conversation about the work they had done.

It's a long time since I was one of those students, but being involved again was such a refreshing experience!
10 FREE Udemy courses on web development you will regret not taking
Published: 2024-03-11 15:25:09

10 FREE Udemy courses on web development you will regret not taking:

**1. Foundations of Front-End Web Development**

Learn the skills to quickly start a career in Front-End Development today!
https://www.udemy.com/course/foundations-of-front-end-development/

**2. JavaScript Essentials**

Learn how JavaScript works, some basic APIs, and finally create a mini project.
https://www.udemy.com/course/javascript-essentials/

**3. Advanced and Object-Oriented JavaScript and ES6**

Master the internals of JavaScript and use it more effectively.
https://www.udemy.com/course/advanced-and-object-oriented-javascript/

**4. JavaScript DOM Dynamic Web**

This course will show you how to master JavaScript and learn dynamic web design using JavaScript.
https://www.udemy.com/course/javascript-dom-dynamic-web-interactive-content-boot-camp/

**5. Build a Quiz App with HTML, CSS, and JavaScript**

Learn how to build a quiz application without the assistance of libraries or frameworks.
https://www.udemy.com/course/build-a-quiz-app-with-html-css-and-javascript/

**6. React vs Angular vs Vue.js**

With all of the various JavaScript libraries and frameworks, decide for yourself which one you like the best.
https://www.udemy.com/course/react-vs-angular-vs-vuejs-by-example/

**7. React JS Frontend Web Development for Beginners**

Learn React JS along with modern JavaScript from absolute scratch.
https://www.udemy.com/course/react-tutorial/

**8. Your custom React component**

Create your custom reusable React component with Webpack and Storybook.
https://www.udemy.com/course/your-custom-react-component/

**9. React with Redux, React-Router, Hooks and Auth0**

Learn the complete React-Redux front end system.
https://www.udemy.com/course/modern-react/

**10. Intro to Node JS & Express**

Start your full-stack developer career by learning the popular Javascript web framework.
https://www.udemy.com/course/intro-to-node-js-express/

That's a wrap!

If You liked this post then.

1. Follow for more such content around web development, resources, tips and cheat sheet.

2. Repost & save post.
Different ways of using Images in ReactJs
Tags: webdev, beginners, tutorial, react
Published: 2024-03-11 15:10:01




In React, pictures make your app look cool! This guide will show you easy ways to use different types of images. Whether they're from your computer, change when you click, or load super fast, we'll learn simple tricks to make your React app awesome.

**Local Charm: Importing Images**

1.1 Importing Local Images:

The easiest way to use images stored within your React project is by importing them directly into your components. Imagine having a folder named 'images' with your local gems:

import localImage from './images/local-gem.jpg';


```jsx
const LocalImageComponent = () => {
  return <img src={localImage} alt="Local Gem" />;
};
```
**Distant Dreams: Hosted Images**

2.1 Including Images from URLs:

Easily include images from external URLs to add a touch of the web to your project:

```jsx
const HostedImageComponent = () => {
  return <img src="https://example.com/web-image.jpg" alt="Web Image" />;
};
```

**Dynamic Delights: Loading Images Dynamically**

3.1 Dynamically Loading Images:

When your images need to change dynamically based on conditions or data, React has your back:

```jsx
const DynamicImageComponent = ({ imageIndex }) => {
  const imageArray = ['url1.jpg', 'url2.jpg', 'url3.jpg'];
  const dynamicImage = imageArray[imageIndex];

  return <img src={dynamicImage} alt="Dynamic Gem" />;
};
```

**SVG Stories: Reacting to SVGs**

4.1 Using SVGs in React:

SVGs, the heroes of vector graphics, find a cozy home in React components:

```jsx
import { ReactComponent as Logo } from './images/logo.svg';

const SvgImageComponent = () => {
  return (
    <div>
      {/* Using an imported SVG */}
      <Logo />

      {/* Using an inline SVG */}
      <svg width="100" height="100" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="40" fill="green" />
      </svg>
    </div>
  );
};
```


**Performance Pilots: Optimizing for Speed**

5.1 Lazy Loading Images:

For a smoother user experience, consider lazy loading images not immediately visible on the screen:

```jsx
const LazyLoadImage = () => {
  return <img src="lazy-gem.jpg" alt="Lazy Gem" loading="lazy" />;
};
```
Images in React are not just visuals; they're the heroes of your story. With these easy tricks, you're all set to make your React app a visual masterpiece. Try them out, mix things up, and enjoy your journey with React! Happy coding! 🚀📸
This tutorial is brought to you by [Jsconfig.com](https://jsconfig.com/), specializing in [Next.Js training](https://jsconfig.com/nextjs-course-live-classes).

Feel free to contribute any additional methods you're familiar with in the comment section.
Use callback in setState when referencing the previous state.eslintreact/no-access-state-in-setstate
Tags: eslint
Published: 2024-03-11 15:06:03

**Example**

```
       const actions = this.state.actions.filter((item) => item.key !== key2);
       this.setState({ actions, more_action: 'add' });

```
**Solution**

```
      this.setState((prevState) => {
        const newActions = prevState.actions.filter((item) => item.key !== key2);
        return { actions: newActions, more_action: 'add' };
      });
```
**Note**
prevState is available in setState callback, which is important for avoiding race conditions and ensuring that state updates are based on the latest values.
What are your goals for week 11 of 2024?
Published: 2024-03-11 15:03:24

It's week 11 of 2024. March is here it's almost Spring! It's actually Spring Break in Nashville. So my son is at home and I have to schedule lunchtime. 


## What are your goals for this week? 

- What are you building? 
- What will be a good result by week's end?
- What events are happening this week? 
  * any suggestions for in person or virtual events?
- Any special goals for the quarter?


### Last Week's Goals
 

- [:white_check_mark:] Continue Job Search. 
- Project work 
   * [:white_check_mark:] Got an idea to revive an old inventory project. Need to start brain storming and wire framing.
   * [:white_check_mark:] Started a CSS piece of art
- [:white_check_mark:] Blog wrote about [7 years on DEV](https://dev.to/jarvisscript/7-years-on-dev-3ec1) Used to lurk, now I write.
- Events 
  * [:x:] Thursday Virtual Coffee 
- [:white_check_mark:] Spring time Need to cut some bushes down. Moved brush I cut to the curb for pick up. It rained most the week so nit much done.
- [:white_check_mark:] This is Virtual Coffee's month of get job ready. I'll run a goal setting thread on Slack. 

 
### This Week's Goals

 

- Continue Job Search. 
- Project work 
   * Got an idea to revive an old inventory project. Need to make progress.
- Blog 
- Events 
  * Thursday Virtual Coffee 
- Spring time Need to cut some bushes down.
- This is Virtual Coffee's month of get job ready. I'll run a goal setting thread on Slack. 



### Your Goals for the week 

Your turn what do you plan to do this week? 

- What are you building? 
- What will be a good result by week's end?
- What events are happening any week? 
  * in person or virtual?


```html
-$JarvisScript  git commit -m "What are your goals?"
```
Podcast Palooza— What are you listening to? (Interview Edition)
Tags: watercooler, podcast
Published: 2024-03-11 15:00:00

It's me, Rachel (they/them), and I am back again with another Podcast Palooza. You know the deal, we are talking all things podcasts.

If you're not feeling like sharing a podcast today, we also have a [Music Monday](https://dev.to/michaeltharrington/series/17887) here for ya to join! 🎶

## What We Are Working With

This week we are going back to basics— interview podcasts. We are talking bare-to-the-bones, sitting on a couch with a mic and a sheet of questions, interview show. Send me your favorite interview series, episode of someone specific, video/podcast-style-content, and all the like.

Broad interpretations encouraged and completely random and unrelated podcasts are also encouraged.


![Video of Barry Keogan on Hot Ones clapping and saying Thank You](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vs7legwpez4bfe7z15rt.gif)

---

_Hey! We also have a podcast tag for your listening musings, sharing your very special new episodes, and finding new things from people on the internet. Woohoo! Check it out._

{% embed https://dev.to/t/podcast %}


Thank you and excited to hear what ya have to say,
-**Rachel**
Today's Coin Master Free Spins Updated Coins & Links
Published: 2024-03-11 14:49:51

If you're searching for[ daily coin master free spins](https://freecoinmaster.xyz/) links today, then look no further. This is the ultimate destination for all coin master fans who want to collect daily free spin links. We gather these links from the coin master's official social media accounts and other game communities. Rest assured, every spin link is safe and tested before we update it on this page.
comprehension in python
Published: 2024-03-11 14:44:45

```
liste = [1, 2, 3, 4, 5]

liste_carpilmis = [x * 2 for x in liste]

print(liste_carpilmis)
```



Bu kod, liste adlı listenin içindeki her bir elemanı 2 ile çarpar ve yeni bir liste olan liste_carpilmis içine bu çarpılmış değerleri ekler. Sonuç olarak, liste_carpilmis içindeki elemanlar, liste içindekilerin iki katı olacaktır. Yukarıdaki kod örneği çıktı olarak [2, 4, 6, 8, 10] verecektir.

Bu işleme comprehension denir.
What to learn after MERN Stack?
Tags: webdev, mern, react, node
Published: 2024-03-11 14:43:47

I have finished learning the MERN Stack. I have also implemented a project based on the MERN stack. I want to increase my web development capabilities so want to keep learning more amazing and useful technologies. I am totally confused in what should I start learning next. 
What will you suggest me to learn next?