teleren/devto huggingface dataset:
THE BOX MODEL AND BOX-SIZING.
Tags: beginners, css
Published: 2024-03-13 17:27:12

The box-model and box-sizing are css elements that needs to be used together in many occasions if not all.

Lets dive on what they are: 

-The box model is used for design and layouts that wraps around every html element.

The box-model consist of the content, padding, border and margin as seen below.


![The box model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lk0zu51nkaofcavqlaah.png)

The content area contains the content of the the box.

Padding adds more background around the content.

Border creates a visible border around the content and its padding.

Margin creates more background outside the border.

example in code 
```
.content {
background-color: aqua;
padding: 2em;
border: 2px solid red;
margin: 2em;
}
```
One properties that is important to note when using the box model is width.
The width sets the width of the content area only.
This means when adding some units in padding and border they are not accounted for-they are added on top of the width of the content.

i.e if width is 200px and padding-left and padding-right are 10px and the border is 5px the resulting width will be 230px.

N/B: Margin is not included when calculating the width since it is outside the border.The primary use of margin is to separate elements.

This is where the box-sizing can be useful.
When we declare 

```
* {
box-sizing: border-box;
}
```
The width accounts for the padding and the border which allows us to get the intended width we wanted.

##MORE WIDTH TIPS

The default width value is auto which lets the browsers to control the width of the elements.


But it can be tricky when we set the width to 100% since this results to overflows issues.
When we declare a width of 100% and add border and margin the content starts to overflow.This is because the content is set to 100% and takes all the space making the addition of border and margin make it to overflow.

```
.content {
width: 100%;
background-color: aqua;
padding: 2em;
border: 2px solid red;
margin: 2em;
}
```
Using the box-sizing  helps a bit in this scenario-it includes the padding and border in it but the remedy is to leave the width to default-auto.

```
* { box-sixing: border-box;}

.content {
background-color: aqua;
padding: 2em;
border: 2px solid limegreen;
margin: 2em;
}
```

Thanks for reading this far I hope you enjoyed.
New capabilities for New Relic Interactive Application Security Testing (IAST) 🔒
Tags: devops, security, tutorial
Published: 2024-03-13 17:21:33

Hi, devs!

Today we’re sharing exciting new capabilities for New Relic Interactive Application Security Testing (IAST)! 🔓

You can now find exploitable vulnerabilities with a unique-in-the-industry ability to reproduce the problem and remediate the specific threat vector before shipping new code.
New updates include:

- 
Proof-of-exploit reporting: Find, fix, and verify exploitable vulnerabilities with dynamic assessment capabilities that pinpoint the API calls, method calls, and traces with vulnerabilities by simulating real-world attacks.

- 
Secure by design: The new risk exposure and assessment feature provides visibility into every code change showing potential vs. detected exposures so developers can quickly replicate, remediate, and validate fixes.

- 
Instant ROI: New Relic IAST is the only application security solution available out of the box in a full consumption model, so users no longer pay for security shelfware that can take months to deploy.

- 
Instant Impact Analysis: Know the number of applications impacted by a vulnerability and the potential severity of the identified risk with APM telemetry integrated with vulnerability management.

[Check it out](https://newrelic.com/blog/nerdlog/iast-owasp-benchmark?utm_source=devto&utm_medium=community&utm_campaign=global-fy24-q4-IAST)

_-Daniel_
Why Redux ?
Tags: redux, react, statemanagement, javascript
Published: 2024-03-13 17:01:40

## Why Use Redux in Your React Application

React is a fantastic library for building user interfaces, but as your application grows in complexity, managing application state can become a challenge. Redux steps in as a predictable state container that helps you write scalable and maintainable React applications.

Here are some key reasons to consider using Redux in your React project:

* **Centralized State Management:** Redux provides a single source of truth for your application's state. This eliminates the need to pass data down through multiple component levels using props, making your components more independent and easier to reason about.

* **Improved Predictability:** Redux enforces a unidirectional data flow. Changes to the state are made by dispatching actions, which are pure functions describing what happened. This predictability makes debugging and testing your application significantly easier.

* **Scalability:** As your application grows, managing complex state logic within components can become cumbersome. Redux helps you centralize state logic and keep your components focused on rendering UI. 

* **Performance Optimizations:** React Redux implements optimizations that ensure your components only re-render when the data they rely on actually changes. This helps maintain a smooth user experience.

* **Official React Bindings:** Redux has an official binding library, React Redux, that provides hooks for your React components to interact with the Redux store. This ensures compatibility and simplifies integration.

**Here are some additional factors to consider:**

* **Learning Curve:** Redux adds complexity to your application. There's a learning curve involved in understanding Redux concepts and patterns.

* **Alternatives:** Consider simpler state management solutions like React Context for smaller applications.

**Overall, Redux is a powerful tool for managing application state in complex React applications. It promotes predictable data flow, scalability, and maintainability.**
JavaScript Array Map()
Tags: javascript, frontend
Published: 2024-03-13 16:56:42


Map() is an array method that applies a function we provide to each element of an array and creates a new array with the result.

Example

```
const products = ['Burger', 'Beef’, 'Pizza', 'Chicken']
const mappedProducts = products.map (product = '${product}*')

console.log(mappedProducts) 

// Output: ['Burger *', 'Beef *', 'Pizza *', 'Chicken *']

```

The Map() method takes an array of elements and returns a new array after transforming the element based on a function we supplied.

In simple English, this line of code is:
Given an array called products, take each element in the array and add an asterisk to it. Then return a new array with all the transformed elements. When finished, store the new array in a variable called'mappedProducts'.

How to map an array without the map() method
To map an array without using the map() method, you can use a for loop to iterate through each element of the array.

Example

```
const number = [2, 4, 6, 8, 10]
const mappedNumbers = [ ];

for (let i = 0; i < numbers.length; i++) {
   mappedNumbers.push(numbers[ i ] * 2);
}

console.log(mappedNumbers);

// output: [4, 8, 12, 16, 20]
```
This example shows the number of arrays [2, 4, 6, 8, 10].

You create an empty array called mappedNumbers to store the mapped values. Use a for loop to iterate through each element of the number array and multiply by 2. 

Push the result value into the mappedNumbers array. Finally, log the mappedNumbers array to the console, which gives you the mapped array [4, 8, 12, 16, 20].
Advantages of Next.JS
Tags: nextjs, react, javascript, developers
Published: 2024-03-13 16:56:28

Next.js offers several advantages for building web applications:

Server-side rendering (SSR): Next.js supports SSR out of the box, which improves SEO, performance, and initial page load times by generating HTML on the server and sending it to the client. This ensures that search engines can crawl and index your content effectively and provides a faster perceived loading experience for users.

Static site generation (SSG): Next.js allows you to pre-render pages at build time, generating static HTML files for improved performance and scalability. This is particularly beneficial for content-driven websites, blogs, or e-commerce platforms where the content doesn't change frequently.

Automatic code splitting: Next.js automatically splits your JavaScript bundles based on the page boundaries, resulting in smaller initial bundle sizes and faster page loads. This optimization improves the overall performance of your application, especially for larger projects with multiple pages and components.

Client-side routing: Next.js provides a powerful client-side routing system that allows for seamless navigation between pages without full-page reloads. This improves the user experience by providing a more fluid and responsive feel to your web application.

Built-in CSS and Sass support: Next.js has built-in support for CSS modules and Sass, making it easy to style your components with scoped CSS and leverage advanced CSS features such as variables, mixins, and nesting.

API routes: Next.js allows you to create API routes alongside your pages, making it easy to build backend functionality directly within your application. This simplifies the development process by eliminating the need for a separate server or backend framework.

TypeScript support: Next.js has excellent TypeScript support out of the box, allowing you to write type-safe code and catch errors early in the development process. This improves code quality, maintainability, and developer productivity.

Developer experience: Next.js provides a great developer experience with features like fast refresh, which automatically updates the page as you edit your code, and built-in support for popular tools like ESLint and Prettier. This helps streamline the development workflow and reduces the time spent on tedious tasks.

Overall, Next.js offers a powerful and flexible framework for building modern web applications with enhanced performance, SEO, and developer productivity.
Second system effect
Tags: refactoring, designsystem, legacy, architecture
Published: 2024-03-13 16:55:26

Have you faced a situation where an old/legacy system becomes a bottleneck for a business, and you want to rewrite everything from scratch by introducing a second system?

It's called the "Second-system effect," and it poses high risks for your business.


- The project often takes much longer than anticipated to achieve feature parity.

- While the new design may address architectural issues in the original system, it unexpectedly introduces new architectural challenges.

- Development resources are divided between maintaining the old system and launching the new one, prolonging the process.

- As delays accumulate, project managers may be tempted to shut down the old system prematurely, even if users still prefer it.

- The original developers may have left and new team, lacking experience with the original system, may tackle the replacement with unwarranted confidence.

This path can result in years of frustration.

Instead, **consider refactoring** and **extracting isolated business logic** into separate, loosely coupled services — a less painful approach in the long run.

Do you have good examples of solving this issue from your past experience? 



Instead, consider refactoring and extracting isolated business logic into separate, loosely coupled services—a less painful approach in the long run.
Learning AWS Day by Day - Day 4 - Creating an EC2 instance
Tags: aws, cloud, cloudcomputing, learning
Published: 2024-03-13 16:47:56

Exploring AWS!!

Day 4:

As discussed we now know what is EC2, so let’s go through the demo on creating an EC2 instance.

To create an instance we need AMIs, what are these AMIs?
Amazon Machine Image(AMI) is a template that contains software configurations like OS, application server and storage required to launch your instance.

Launching an instance:
1. Open Management Console, click on services drop down, and choose EC2.
2. Click Launch Instance, choose an AMI (Amazon Machine Image, here Ubuntu).
3. Choose Instance Type (Free Tier) and Next.
4. Configure instance and add storage and unique tags.
5. Configure network group (Choose Create New Group), Review and Launch.
6. Next, choose Create a New Key Pair, give name and download it.
7. Click on Launch Instance and until it initializes.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/582md5bajey23t7oowsf.png)
Learning AWS Day by Day - Day 4 - Creating an EC2 instance
Tags: aws, cloud, cloudcomputing, learning
Published: 2024-03-13 16:47:55

Exploring AWS!!

Day 4:

As discussed we now know what is EC2, so let’s go through the demo on creating an EC2 instance.

To create an instance we need AMIs, what are these AMIs?
Amazon Machine Image(AMI) is a template that contains software configurations like OS, application server and storage required to launch your instance.

Launching an instance:
1. Open Management Console, click on services drop down, and choose EC2.
2. Click Launch Instance, choose an AMI (Amazon Machine Image, here Ubuntu).
3. Choose Instance Type (Free Tier) and Next.
4. Configure instance and add storage and unique tags.
5. Configure network group (Choose Create New Group), Review and Launch.
6. Next, choose Create a New Key Pair, give name and download it.
7. Click on Launch Instance and until it initializes.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/582md5bajey23t7oowsf.png)
Mastering Soft Skills: The Key to Excelling as a DevOps Engineer
Published: 2024-03-13 16:21:52

Being a successful DevOps engineer requires more than just coding skills. While technical prowess is undoubtedly important, possessing essential soft skills is equally crucial for thriving in this role. Let's explore the key soft skills that set apart exceptional DevOps engineers from the rest.

1. **Communication Skills**: Effective communication lies at the heart of DevOps. DevOps engineers must communicate seamlessly with various stakeholders, including developers, operations teams, and project managers. Clear communication ensures smooth collaboration, enhances problem-solving, and facilitates the implementation of DevOps practices across teams.

2. **Collaboration and Teamwork**: DevOps is all about fostering collaboration and teamwork. DevOps engineers work closely with cross-functional teams to streamline processes, automate tasks, and improve software delivery. Strong collaboration skills enable DevOps engineers to build trust, resolve conflicts, and drive collective success.

3. **Adaptability and Flexibility**: In today's rapidly evolving tech landscape, adaptability is key. DevOps engineers must be flexible and open to change, readily embracing new technologies, tools, and methodologies. Being adaptable allows DevOps engineers to respond effectively to shifting priorities, emerging challenges, and evolving business requirements.

4. **Problem-Solving Skills**: DevOps engineers are problem solvers at heart. They encounter complex technical issues on a daily basis and must devise innovative solutions to overcome them. Strong problem-solving skills enable DevOps engineers to troubleshoot issues, optimize processes, and ensure the smooth functioning of software systems.

5. **Time Management and Prioritization**: With multiple tasks and projects on their plate, DevOps engineers must excel in time management and prioritization. They must effectively allocate their time and resources, balancing competing demands and deadlines. Prioritizing tasks ensures that critical issues are addressed promptly, minimizing downtime and maximizing productivity.

When comparing [DevOps engineer vs software engineer](https://www.clickittech.com/devops/devops-engineer-vs-software-engineer/?utm_source=backlinks&utm_medium=referral
), it's evident that while technical skills are essential for both roles, soft skills play a significant role in the success of DevOps engineers. By honing communication, collaboration, adaptability, problem-solving, and time management skills, DevOps engineers can excel in their roles, drive organizational success, and contribute positively to the software development lifecycle.
TechnBrains: Leading App Development Company Near Me in New York
Published: 2024-03-13 16:19:03

For businesses in New York seeking a reputable [app development company near me](https://www.technbrains.com/locations/mobile-app-development-new-york), TechnBrains is your top choice. Our experienced team crafts custom mobile apps tailored to your specific needs. Contact us today to discuss your project requirements!
Build a CRUD REST API with Rust Axum | Tutorial
Tags: rust, webdev, restapi, axum
Published: 2024-03-13 16:14:07

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

Do you want to learn how to create a powerful backend application using Rust? 

This is a tutorial on building a CRUD (Create, Read, Update, Delete) application from scratch using the Axum framework and Postgres database.

### Video Highlights:

#### 1. Project Setup 
Learn how to create a new Rust project using cargo new. Configure your development environment with necessary tools.

#### 2. Database Connection
Establish a connection to your Postgres database. Create a table to store your data.

#### 3. Axum Framework
Discover the Axum framework for building web applications in Rust. Understand how to handle routes and requests.

#### 4. CRUD Operations
Implement logic for creating, reading, updating, and deleting data entries. Utilize SQLx for interacting with the Postgres database.

#### 5. Error Handling
Learn how to gracefully handle potential errors during the development process.
Unleashing the Future: AWS-sponsored STEAM Event Ignites Passion for Machine Learning
Published: 2024-03-13 16:03:10


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

On January 23rd, 2024, the Mid Antrim Museum in Ballymena hosted an inspiring AWS-sponsored event, immersing students in robotics and machine learning. Physicist Brian Cox inspired four groups to explore the captivating world of machine learning, focusing on the AWS DeepRacer League—an intersection of technology and education. 

A key highlight for me was to demystify machine learning and mathematics for the students attending the track, using the AWS DeepRacer kit to demonstrate real-world applications in autonomous racing. 

The event’s comprehensive curriculum provided students with a holistic understanding of machine learning and robotics. They engaged with the AWS DeepRacer kit, designing and racing models on the track, bridging theory and application. 

Professor Brian Cox, renowned for science education, enthusiastically joined the DeepRacer fun, winning second place in a friendly competition. 

I had a fantastic day representing OpenData Belfast and AWS by teaching students more about opportunities in data and machine learning. On the track we had a lot of engagement throughout the day with a personal highlight of having Professor Brian Cox getting hands on and even asking a few questions about ODB!” 

The Mid Antrim Museum transformed into an innovation hub, underscoring the connection between technology and education. This AWS-supported event delivered an exhilarating day of learning and discovery, spotlighting the dedicated support for STEAM education!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l5z25x06elkm7emqzgi.jpg)
Best AI Tools for Programmers in 2024
Tags: coding, programming, ai, python
Published: 2024-03-13 16:01:36

The Future of Programming: AI Tools Revolutionize Development 🤖
⠀
Gone are the days of painstakingly writing code line by line. In 2024, programming has been transformed by the power of artificial intelligence tools, making it easier, faster, and more efficient than ever before. Here's a roundup of the best AI tools for programmers leading the charge in 2024:

**Devin:** Devin can learn how to use unfamiliar technologies.
Devin can contribute to mature production repositories.
Devin can train and fine tune its own AI models.
Even tried giving Devin real jobs on Upwork and it could do those too!
⠀
**👨‍✈️ Copilot:** Your ultimate coding assistant, helping you write code faster and more accurately than ever before.
⠀
**✍️ Polycode:** Say goodbye to manual coding with Polycode, the text-to-code generator that transforms plain text into functional code.
⠀
**🦾 OpenAI Codex:** Need a little help completing your code? Look no further than OpenAI Codex, the go-to tool for code autocompletion.
⠀
**📈 AlphaCode:** Optimizing code for performance and efficiency is a breeze with AlphaCode.
⠀
**🐞 Deepcode:** Debugging is a thing of the past with Deepcode, the AI tool that identifies and fixes bugs before they become a problem.
⠀
**🔎 Codiga:** Security is paramount in today's digital landscape, and Codiga is here to help.
⠀
**👶 Smol Developer:** Need to build an entire app from scratch? Smol Developer has got you covered.
⠀
**👓 Cody (Sourcegraph):** By providing detailed explanations and insights into your codebase, Cody helps you understand and navigate even the most complex code.
⠀
**💬 CodeWhisperer:** With its intelligent suggestions and recommendations, CodeWhisperer guides you through the coding process, helping you write better code in less time.
⠀
With these cutting-edge AI tools at your disposal, programming has never been easier or more exciting. Whether you're a seasoned developer or just starting out, harnessing the power of AI can take your coding skills to the next level. Welcome to the future of programming! 🌟👩‍💻🚀

---
Subscribe to our [Big Data News Weekly Newsletter](https://bigdatanewsweekly.com)  getting for insights on Big Data 📊, Data science 📈, AI 🧠, Machine learning  , AI News, AI Tools, AI updates, Tech, No Code, and Side Hustles. **[https://bigdatanewsweekly.com](https://bigdatanewsweekly.com)**
Miss you game dev
Tags: gamedev, programming, beginners, discuss
Published: 2024-03-13 15:59:06

When I started to take an interest in development, I was immediately interested in game dev. After all, I've been playing games since I was a kid! So I started to teach myself how to make little rpg-type games, in Python at first, which was so much fun!

It's probably thanks to this that I decided to change careers and that I'm now doing a master's degree in game development. 

However, with my master's degree in software development engineering and architecture, and my work-study placement in a company where I'm doing full stack (more back than front), I've lost sight of game dev, and the more I think about it, the more I think about how much fun I was having, and how much I wanted to keep coding. 

Today, I'd like to force myself to free up some time to get back to it, but I have the feeling that I won't have the time or the energy, and that it'll stay in the closet forever.

That makes me kinda sad, so I wanted to share this with someone somewhere ahah 

Hope you're fine and you're enjoying whatever you do ! 
Keep safe

Bertrand
JWT Authentication in Rust [Full Guide: Axum and Actix]
Tags: rust, jwt, axum, actixweb
Published: 2024-03-13 15:49:43

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

This is a tutorial on implementing JWT (JSON Web Token) based authentication in Rust using two popular web frameworks: Axum and Actix Web. 

It demonstrates essential functionalities like
* JWT encoding/decoding
* User information extraction from tokens
* Axum and Actix web request header extractors
* Route handling in Axum and Actix Web
* JSON response creation

While focusing on the implementation, the video also touches upon concepts like asynchronous programming, cargo workspaces, and dependency management in Rust.

Here's the github repo, you can view and star https://github.com/cudidotdev/JWT-Authentication-with-Rust-Axum-and-Actix.git