teleren/devto huggingface dataset:
Understanding Overcommit Memory in Linux Kernel
Tags: linux, memory, webdev, beginners
Published: 2024-03-30 10:06:09

Overcommit memory, a crucial feature in the Linux kernel, enables processes to allocate memory beyond the system's physical limits. This mechanism relies on the premise that most applications still need to utilize the memory they request fully. Let’s investigate how overcommit memory works and its system performance and stability implications.

When a process requests memory, the Linux kernel reserves address space without immediately allocating physical memory. Instead, it defers physical memory allocation until the memory is accessed. This approach allows the system to appear to have more available memory than it physically possesses.

The `vm.overcommit_memory` setting in the Linux kernel governs the behavior of memory overcommitment. It offers three distinct values:

- 0 (default): This setting implements heuristic memory overcommitment. It permits memory allocation to surpass the sum of available physical memory and swap space but within a configurable limit defined by `vm.overcommit_ratio`.
- 1: Enabling full overcommitment, this setting allows memory allocation to exceed the total amount of physical RAM and swap space. While advantageous for specific workloads, it heightens the risk of encountering out-of-memory (OOM) errors when the system exhausts physical and swap space.
- 2: Disabling memory overcommitment: This setting mandates that the kernel allocate memory only if sufficient physical and swap space is available to fulfill the request.

Setting `vm.overcommit_memory` to `1` facilitates full overcommitment, offering flexibility for memory-intensive applications. However, it necessitates careful monitoring of system resources to prevent OOM errors under heavy loads.

Overcommit memory in the Linux kernel is vital in optimizing memory utilization by allowing processes to allocate memory beyond physical constraints. By understanding the implications of `vm.overcommit_memory`, system administrators can tailor memory management strategies to suit specific workloads, effectively balancing performance and stability.
Have you checked FlutterFlow's product roadmap?
Tags: flutter, flutterflow, google, lowcode
Published: 2024-03-30 10:03:24

 They're gearing up to release new features that will enhance the user experience.

 👉 Simplifying the process of debugging and troubleshooting your app during test mode sessions. 🛠️
 👉 Makes it easier for users to connect and adds git features for smoother collaboration. 👥
 👉 Enhancing the FlutterFlow code editor to ensure a delightful experience similar to working in VSCode. 👌

 Flutterflow is using artificial intelligence (AI) 🤖 to make things even better. They're constantly looking for new ways to solve problems and make development easier. Flutterflow is more than just a low-code tool, it's a visual development environment. 🌍

The main aim of Flutterflow includes:
- Incorporate and promote best practices in software development. 📚
- Streamlining complex IDE tasks with an intuitive UI. 🖥️

Additionally, Flutterflow encourages users to provide feedback to the Flutterflow team. If you think a feature is missing or the platform needs improvement, your feedback can help Flutterflow understand users better and solve issues for a better development experience.

Flutterflow is creating the best development environment for users all around the world, making the user experience better than ever and empowering us to make better products.
Geolocation, a browser API
Tags: frontendchallenge, devchallenge, javascript, webdev
Published: 2024-03-30 10:00:21

Geolocation API provides the user's geographic location through the browser. Uses navigator.geolocation.getCurrentPosition() to access latitude and longitude coordinates. Useful for location-based applications like mapping or proximity search services.


_This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature._

## Explainer
<!-- I choise the Geolocation API-->
<!-- Explain a browser API or feature in 256 characters or less. -->

## Additional Context
<!-- Please share any additional context you think the judges should take into consideration as it relates to your One Byte Explainer. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image to your post (if you want). -->


<!-- Thanks for participating! -->
Running a Secure Web Server on AWS EC2
Tags: aws, ec2, webserver, nginx
Published: 2024-03-30 09:59:07

## Overview

This article seeks to describe how to run a sophisticated web server on AWS using Infrastructure-as-a-Service (IaaS) architecture. 

## The Architecture

Set up a Virtual Private Cloud (VPC). This cloud local network will contain two public subnets and two private subnets. Create an AWS Elastic Compute Cloud (EC2) instance running Ubuntu 20.04 LTS, and configure the security groups to allow your local machine to connect to it via SSH. Download and save the key pair. This machine will be used as a Bastion Host from which you can securely connect to the web server. Then launch another EC2 instance running Ubuntu 20.04 LTS in one of the private subnets. Download and save the key pair. This instance will host the web server. Launching the instance in a private subnet will give the web server some level of security, since it will only be reachable to only hosts/devices within the same Virtual Private Cloud (VPC). Be sure to configure the security group of this instance to allow SSH traffic from the Bastion Host.


## Prerequisite Software

Copy the command to connect to your bastion host from the AWS console and run the command in your local Linux shell. 

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

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

Once connected to the Bastion EC2, run the following command to copy the downloaded server key pair file to the bastion host. This will allow you to connect to the web server host.

```
scp -i "~/path-to-key/keypair.pem" /part-to-key/keypair.pem  ubuntu@<dns-of-ec2>:~/.
```

Then copy the command to connect to your bastion host from the AWS console and run the command:

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

Once you gain access to the web server instance, run the following commands to install NGINX server on it:

```
sudo apt update
sudo apt install nginx
sudo ufw allow 'Nginx HTTP'
systemctl status nginx
```

## Output 


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

Run the following command to see the server IP address: 
`curl -4 icanhazip.com`

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

Verify that the sever is up and running by pasting the IP in your web browser.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yk41qvgvvnmjo0ik9xaf.png)
Why do people have curtain bangs?
Published: 2024-03-30 09:58:07

Slim face shapes you can cut that son of guns all the way back to your sideburns Basically because you’re gonna want to open up your face and let people see what you got. Now texture-wise if you have a fine hair texture be prepared for some styling.

 You’re gonna have to because you’re not gonna be able to just wash and wear. Odds are your hair is gonna be pretty straight and it’s gonna stick out in weird places so be ready with a round brush or a curling iron to shape those curtain bangs into something that looks nice. Now you [thick hair girls](https://cheapbuyertoday.com/curtain-bangs-easy-guide/) it’s kind of the same problem but for a different reason. Yours are gonna be heavy, they’re gonna be clunky,
Why Use Redux?
Tags: webdev, beginners, tutorial
Published: 2024-03-30 09:52:36

Well, an application has its state, which can be a combination of the states of its internal components.

- **State Management in Applications**: Applications have their state, which can be a combination of the states of various internal components. For example, in an e-commerce website, components like the cart, user profile, and previously viewed sections each have their own states.

- **Example with Cart Component**: Let's focus on the cart component. Its state includes all items the user has added and the total number of those items. The cart component needs to show the updated number of items in the user's cart at all times while the application is running.

- **Handling User Actions**: When a user adds or removes an item from the cart, the application must handle these actions internally by updating the cart object's state. It also needs to reflect these changes in the UI by showing the updated total number of items in the cart.

- **Sharing State Between Components**: As applications grow, they may need to share state between components, not just for display purposes, but also for managing, updating, or performing logic based on state values. Managing multiple states from multiple components efficiently becomes challenging as the application size increases.

- **Redux as a Solution**: Redux is a state management library that addresses the challenge of handling multiple states in large applications. It stores and manages all application states centrally, providing APIs to make changes to the existing state and fetch the current state of the application.

In summary, Redux simplifies state management in applications by centralizing state storage and providing APIs for state manipulation, which becomes crucial as applications grow larger and more complex.
The Frontend Challenge
Tags: frontendchallenge, devchallenge, javascript, webdev
Published: 2024-03-30 09:38:37

_This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature._

## Explainer
<!-- Explain a browser API or feature in 256 characters or less. -->
Geolocation API provides location data based on device GPS or network signals. It enables web apps to tailor experiences based on user location, such as finding nearby services or displaying location-specific content.

## Additional Context
<!-- Please share any additional context you think the judges should take into consideration as it relates to your One Byte Explainer. -->

The geolocation API retrieves device location based on GPS or network signals. It allows web apps to offer location-based services like maps, weather, and local search, enhancing user experience and functionality.

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image to your post (if you want). -->


<!-- Thanks for participating! -->
Mastering React Hooks: A Comprehensive Guide for Frontend Developers
Published: 2024-03-30 09:20:11

Introduction:
In recent years, React Hooks have revolutionized the way developers build React applications. With their introduction, functional components gained the ability to manage state and side-effects, previously exclusive to class components. This paradigm shift has not only simplified React development but also unlocked powerful patterns for building more scalable, readable, and maintainable codebases. In this guide, we'll delve into mastering React Hooks, exploring their core concepts and demonstrating practical examples to level up your frontend development skills.

Understanding React Hooks:

Brief overview of React Hooks and their importance in modern React development.
Explanation of useState, useEffect, useContext, and other built-in Hooks.
Discuss the rules of using Hooks and common pitfalls to avoid.
State Management with useState:

Detailed explanation of useState Hook for managing component state.
Practical examples showcasing how to utilize useState for various use cases, such as form handling, toggling UI elements, and managing input values.
Side Effects with useEffect:

Deep dive into useEffect Hook for handling side effects in functional components.
Demonstrations of using useEffect for tasks like data fetching, event listeners, and DOM manipulation.
Best practices for cleanup and avoiding memory leaks when using useEffect.
Context and useContext Hook:

Introduction to React Context API and its significance for managing global state.
Utilizing useContext Hook to consume context values within functional components.
Examples illustrating how to create and consume context for themes, authentication, and localization.
Custom Hooks for Reusability:

Concept of custom Hooks for encapsulating logic and promoting reusability.
Step-by-step guide on creating custom Hooks tailored to specific use cases.
Showcase of real-world scenarios where custom Hooks can streamline code and enhance maintainability.
Advanced Techniques and Patterns:

Advanced tips and tricks for optimizing React Hooks usage.
Exploring patterns like compound components, render props, and higher-order components with Hooks.
Integration of third-party libraries and utilities to extend the capabilities of Hooks.
Testing React Hooks:

Strategies for testing components that use Hooks.
Overview of popular testing libraries like Jest and React Testing Library.
Writing unit tests and integration tests for Hooks-based components.
Conclusion:
Mastering React Hooks opens up a world of possibilities for frontend developers, enabling them to build more robust, efficient, and scalable React applications. By understanding the core principles and applying best practices, you can harness the full potential of React Hooks to elevate your development workflow and deliver exceptional user experiences. Keep experimenting, learning, and embracing the power of React Hooks in your frontend projects. Happy coding!
My First Full-Stack Project ZeusConnect
Tags: webdev, javascript, nextjs, opensource
Published: 2024-03-30 09:18:42


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/boqvpp9qu86qr4jxda2i.png)
## ZeusConnect: My Full-Stack Online Conference Application

I'm proud to share my recent project, **ZeusConnect**.  It's a full-stack online conference application built with a blend of practical necessity and genuine enthusiasm.

**Project Highlights-**
**Core Conferencing:** Robust video/audio, screen-sharing, and all the essentials for productive online meetings.
**Desktop Focus:** Designed for a seamless user experience on desktops and laptops.
**Customization Potential:** Adaptable for organizations looking for a unique, branded solution.

**My Motivations:**
**Financial Stability:** Projects like ZeusConnect help me pave the way towards consistent, fulfilling work.
**Portfolio Growth:** A testament to my dedication and full-stack development capabilities.
**Software Development Career:** I'm eager to join a team and contribute to impactful projects.

I'm actively exploring opportunities in software development. If you value motivated developers with a proven track record, let's connect!

[Github](https://github.com/hasin-codes/ZeusConnect)  [Website](zeus-connect-delta.vercel.app)
The Frontend Challenge
Tags: frontendchallenge, devchallenge, css, javascript
Published: 2024-03-30 09:17:23

_This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities_

## What I Built

<!-- Tell us what you built and what you were looking to achieve. -->
I built a  form using HTML,CSS and JAVASCRIPT . My main goal was to create a clean and user-friendly interface for users 

To achieve a polished look, I focused on styling the form elements with appropriate colors, fonts, and spacing to enhance readability and usability. Additionally, I implemented CSS transitions to add smooth animations when users interact with the form, such as hovering over the login button.

Overall, my aim was to design a  form that not only meets the functional requirements but also provides a visually appealing and intuitive experience for users.





## Demo
<!-- Show us your project! You can directly embed an editor into this post (see the FAQ section from the challenge page) or you can share an image of your project and share a public link to the code. -->
{% codepen https://codepen.io/Neerat/pen/qBwPJRY %}

## Journey
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->

Throughout this process, I learned the importance of attention to detail and the impact of subtle design choices on overall user perception. I'm particularly proud of achieving a balance between aesthetics and usability, creating a form that not only looks good but also functions effectively.

I also aim to continue learning and incorporating new CSS techniques and design trends to stay current and improve my skills.

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- We encourage you to consider adding a license for your code. -->

<!-- Don't forget to add a cover image to your post (if you want). -->


<!-- Thanks for participating! -->
The Frontend Challenge
Tags: frontendchallenge, devchallenge, css
Published: 2024-03-30 08:54:15

_This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack._

## Inspiration
<!-- What snack are you highlighting today? -->

Doughnuts are a delightful treat that bring joy with every bite! Whether glazed, powdered, filled, or plain, they're an iconic snack enjoyed around the world. What's your favorite type of doughnut?

## Demo 
<!-- Show us your CSS Art! You can directly embed an editor into this post (see the FAQ section of the challenge page) or you can share an image of your project and share a public link to the code. -->
{% codepen https://codepen.io/Neerat/pen/yLrzRYJ %}

## Journey 
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->
My journey with CSS has been quite an adventure! Starting from the basics of styling elements with colors and fonts, I gradually delved into more advanced techniques like flexbox and grid layouts to create responsive and visually appealing designs.

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- We encourage you to consider adding a license for your code. -->

<!-- Don't forget to add a cover image to your post (if you want). -->

<!-- Thanks for participating! -->
TensorFlow Transfer Learning: Classify Images with Mobilenet and Python
Tags: python, transferlearning
Published: 2024-03-30 09:06:18

In this video, we'll show you how to use TensorFlow and Mobilenet to train an image classification model through transfer learning. 
We'll guide you through the process of preprocessing image data, fine-tuning a pre-trained Mobilenet model, and evaluating its performance using validation data. 


The link for the video tutorial is here : https://youtu.be/xsBm_DTSbB0
I also shared the Python code in the video description.

Enjoy,
Eran

#TensorFlow #Mobilenet #ImageClassification #TransferLearning #Python #DeepLearning #MachineLearning #ArtificialIntelligence #PretrainedModels #ImageRecognition #OpenCV #ComputerVision #Cnn
LiveView + WebComponents = 🚀
Tags: liveview, elixir, webdev, javascript
Published: 2024-03-30 08:59:01

I really think LiveView is really amazing.
It has some interop with javascript.
But i think for the most cases the Hooks api is much to overkill.

You need to start managing ids and make sure there are no duplicates even for simple things.

Example a lazy loaded image to be replaced when loaded.

This is a gist of how the hook could look like:

{% gist https://gist.github.com/Neophen/27a694155c430acfb8e9be3433887a47.js file=x_image.ts %}

And this is how you would need to use it:

```html
<picture id={@id} alt={@alt} class={@class} style={"--preview-image: url(#{@preview})"} phx-hook="XImage">
  <%!-- truncated... --%>
  <img src={@image} alt={@alt} class="x-image" loading={@loading} />
</picture>
```

Now it's easy to forget that you need to assign a unique id to a picture, but it's even harder to come up with unique ids for multiple images which are from a same entry. and we're not really using anything from the hook apart from the fact that we need some javascript.

Also the hook only starts working when the livesocket initializes.

So of course there is a better way, enter WebComponents.

{% gist https://gist.github.com/Neophen/27a694155c430acfb8e9be3433887a47.js file=marko_image.ts %}

and here's how you would use that:

```html
<marko-image>
  <picture alt={@alt} class={@class} style={"--preview-image: url(#{@preview})"}>
    <%!-- truncated... --%>
    <img src={@image} alt={@alt} class="x-image" loading={@loading} />
  </picture>
</marko-image>
```

And voila, you get the same functionality which starts working as soon as the browser registers the component, you don't need extra attributes to make it work, no ids/no phx-hook.

I've created menus/dropdowns/modals with webcomponents and it's much nicer as the webcomponents api is somewhat nicer to work with.

here's something maybe a bit more interesting a counter for an input:

```html
<x-counter>
  <div class="flex items-center justify-between">
    <label class="flex justify-between">Counter</label>
    <p x-counter-value class="text-xs text-slate-500"></p>
  </div>
  <input type="text" id="counter" class="block w-full rounded-md border" />
</x-counter>
```

Here's what it looks like:

{% embed https://youtu.be/ozsNKhbkoZ8 %}

and here's the code for the web-component:

{% gist https://gist.github.com/Neophen/27a694155c430acfb8e9be3433887a47.js file=x-counter.js %}

When i have time i'll write about those components too!

Thank you and have a nice day.