teleren/devto huggingface dataset:
Understanding CSS Box Sizing: A Guide to 'content-box' and 'border-box'
Tags: css, webdev, html, javascript
Published: 2024-01-02 00:14:08



CSS Box Sizing is a fundamental concept in web development that influences how the dimensions of an element are calculated. The box-sizing property allows developers to specify whether an element's declared width and height include its padding and border. There are two main values for box-sizing: 'content-box' and 'border-box'. In this blog post, we'll delve into these values, their implications, and how to use them effectively in your web projects.

### The Default: 'content-box'

By default, when you set a width or height for an element in CSS, you are using the 'content-box' model. This means that the specified width and height apply only to the content area of the element, excluding padding and border. Let's illustrate this with an example:

```css
div {
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 2px solid black;
}
```

In this scenario, the total width of the `div` would be 100px (content width) + 20px (padding) + 4px (border) = 124px. This default behavior can sometimes lead to unexpected results, especially when dealing with responsive designs or precise layout requirements.

### Taking Control with 'border-box'

To simplify sizing calculations and achieve more predictable layouts, the 'border-box' value comes into play. When you set an element's box-sizing to 'border-box', the declared width and height now include the content, padding, and border. Here's an example:

```css
div {
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 2px solid black;
}
```

With 'border-box', the total width of the `div` is now strictly 100px, encompassing both the content and the space taken by padding and border. This can be particularly advantageous in scenarios where you want a more intuitive way to control the dimensions of your elements.

### Practical Use Cases

1. **Responsive Design:** When working on responsive layouts, 'border-box' can simplify calculations. Elements will respond to changes in width or height without unexpected variations caused by padding or border adjustments.

2. **Consistent Sizing:** Ensuring a consistent sizing model across different elements can be crucial. 'border-box' makes it easier to maintain a uniform appearance without constant adjustments for padding and border differences.

3. **Easier Grids and Flexboxes:** When creating grids or using flexbox layouts, 'border-box' can streamline the process. The specified dimensions directly represent the space an element occupies, simplifying alignment and spacing considerations.

### Conclusion

Understanding and leveraging the box-sizing property in CSS can significantly contribute to a smoother development process and more maintainable code. By choosing between 'content-box' and 'border-box' based on your specific needs, you gain greater control over how elements are sized and how they interact within your layout. Whether you're aiming for responsive designs or consistent spacing, box-sizing is a powerful tool in your CSS toolkit.
Bandit Level 21 Level 22
Tags: ctf, writeup, overthewire, bandit
Published: 2024-01-02 00:00:42

## Introduction

Welcome back, fearless hacker, to the Bandit challenges! In this level, we'll learn to exploit cron jobs and bashscript files.

## Previous Flag

```
NvEJF7oVjkddltPSrdKEFOllh9V1IBcq
```

### Exploring Cron Jobs

Our path to the next flag begins with exploring the cron jobs on the system. Let's list the contents of the `/etc/cron.d/` directory:

```bash
ls -la /etc/cron.d/
```

This reveals the existence of a cron job named `cronjob_bandit22`.

### Analyzing Cron Job Configuration

Let's examine the configuration of the `cronjob_bandit22`:

```bash
cat /etc/cron.d/cronjob_bandit22
```

The output indicates that there's a scheduled job running every minute as `bandit22`:

```
* * * * bandit22 /usr/bin/cronjob_bandit22.sh &> /dev/null
```

### Understanding the Script

```bash
cat /usr/bin/cronjob_bandit22.sh

```

The script does two things: it changes the permissions of a file in `/tmp/` and then copies the password for Bandit level 22 into that file.

```bash
#!/bin/bash
chmod 644 /tmp/t7O6lds9S0RqQh9aMcz6ShpAoZKF7fgv
cat /etc/bandit_pass/bandit22 > /tmp/t7O6lds9S0RqQh9aMcz6ShpAoZKF7fgv
```

### Retrieving the Flag

Now, let's check the contents of the file in `/tmp/`:

```bash
ls -la /tmp/t7O6lds9S0RqQh9aMcz6ShpAoZKF7fgv
cat /tmp/t7O6lds9S0RqQh9aMcz6ShpAoZKF7fgv
```

This should unveil the password for Bandit level 22:

Flag:

```
WdDozAdTM2z9DiFEQ2mGlwngMfj4EZff
```
How Have You Contributed to the DEV Community?
Tags: devresolutions2024, discuss
Published: 2024-01-02 00:00:00

---
published_at : 2024-01-02 00:00 +0000
---
Consider a specific action you took within the DEV community. How do you think it might have created a ripple effect, impacting others or shaping the community?
<br>
Follow the DEVteam for more discussions and online camaraderie!
{% embed https://dev.to/devteam %}
Decentralization Dynamics: Mastering the 3.2.1-1 Rule for Blockchain Resilience
Published: 2023-12-02 02:21:40

---
title: Decentralization Dynamics: Mastering the 3.2.1-1 Rule for Blockchain Resilience
published: true
date: 2024-01-02 00:00:00 UTC
tags: 
canonical_url: https://simeononsecurity.com/articles/decentralization-dynamics-3-2-1-rule-blockchain/
---

 ![](https://simeononsecurity.com/img/cover/blockchain-decentralization-illustration.png)

**Decentralization Dynamics: Navigating the 3.2.1-1 Rule in Blockchain**

## Introduction: [#](#introduction)

Blockchain technology, lauded for its decentralization, is a realm where security and resilience reign. However, the effectiveness of decentralization, particularly within Proof of Work (PoW) chains, demands a closer examination. This article explores the “3.2.1-1” rule, examining the delicate balance between decentralization benefits and the complications that may arise.

* * *

## The 3.2.1-1 Rule: Unveiling the Blueprint for Blockchain Resilience [#](#the-321-1-rule-unveiling-the-blueprint-for-blockchain-resilience)

The **“3.2.1-1” rule** emphasizes the distribution of data across multiple copies (3), storage mediums (2), and offsite locations (1) for every country. While this strategy initially enhances redundancy and security, a critical question emerges: does decentralization continue to offer significant advantages beyond this point?

### Power of Decentralization in PoW Chains [#](#power-of-decentralization-in-pow-chains)

Decentralization, particularly on PoW chains, provides a robust defense against **single points of failure**. It prevents malicious actors from compromising the network by distributing authority among various nodes. This not only enhances security but also ensures that the system can resist censorship and external attacks.

The “3.2.1-1” rule, in its essence, reflects a thoughtful approach to safeguarding data. By having multiple copies on diverse storage mediums and locations, the system becomes more resilient to hardware failures, data corruption, and even localized disasters.

* * *

## Diminishing Returns: The Tipping Point of Redundancy [#](#diminishing-returns-the-tipping-point-of-redundancy)

However, the law of diminishing returns comes into play as decentralization is pushed to extremes. Beyond a certain point, the benefits of additional redundancy diminish while the complications increase. 

<a href="https://simeononsecurity.com/articles/decentralization-dynamics-3-2-1-rule-blockchain/">Read More at https://simeononsecurity.com</a>
Coding Wisdom: Insights from Your Interview Experiences?
Tags: discuss, codenewbie, beginner
Published: 2024-01-02 00:00:00

---
published_at : 2024-01-02 00:00 +0000
---
Share the interview mistakes you've learned from and corrected. What lessons can others apply to improve their performance in future interviews?
<br>
Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more discussions and online camaraderie!

*{% embed* https://dev.to/codenewbieteam *%}*
Flutter todo app with Riverpod
Tags: dart, flutter, showdev, beginners
Published: 2022-09-23 15:45:39

Hello 👋. I am a novice mobile Flutter developer. Made my first app and would like to share it with you. Of course, like everyone else I started with a simple Todo list, but to make something interesting I changed the idea a bit.
I played around with the dynamic Material 3 theme, the colors adjust to the theme)

As for a state management I choose Riverpod as a easy and quick way to interact with the logic. 

If you want to participate in the project, test, suggest features, help with development, link to the github repository.

[https://github.com/ytskk/taskline](https://github.com/ytskk/taskline)


## Screenshots
*Actual for version 1.0.0*

Theme adapts to your device theme. 


### Home screen

Light        |  Dark
:-------------------------:|:-------------------------:
![Home screen light](https://user-images.githubusercontent.com/57366771/188496615-3f869da4-77ff-4761-a8d8-9f63604a8723.png)  |  ![Home screen dark](https://user-images.githubusercontent.com/57366771/188496765-cb5ecb5a-4fee-4981-aa92-72ce60f4f5d1.png)


### Task creation

Light        |  Dark
:-------------------------:|:-------------------------:
![Task creation light](https://user-images.githubusercontent.com/57366771/188496813-d4a0c7b3-4c06-42b8-8861-981de87c273e.png)  |  ![Task creation dark](https://user-images.githubusercontent.com/57366771/188496827-1daa089e-03ad-4244-bcfa-824aa1438b57.png)


### Home screen with tasks

Light        |  Dark
:-------------------------:|:-------------------------:
![Home screen with tasks light](https://user-images.githubusercontent.com/57366771/188496922-75f10eb9-8d96-44bf-bb11-024dc48e1808.png)  |  ![Home screen with tasks dark](https://user-images.githubusercontent.com/57366771/188496932-28cf5a24-afb5-48df-a2fe-a4b7477a01db.png)


### Filters

Light        |  Dark
:-------------------------:|:-------------------------:
![Filters light](https://user-images.githubusercontent.com/57366771/188496989-a79430c8-ba58-4c9b-8847-a6cdf416770e.png)  |  ![Filters dark](https://user-images.githubusercontent.com/57366771/188497010-4029bd01-a28a-4c9e-9916-5eb41bb5ba27.png)



### Task edit

Light        |  Dark
:-------------------------:|:-------------------------:
![Task edit light](https://user-images.githubusercontent.com/57366771/188497218-19fca88c-cd7c-4f24-8379-54ad11f4a62c.png)  |  ![Task edit dark](https://user-images.githubusercontent.com/57366771/188497251-af8d9278-9b75-4008-9f02-758e419387fd.png)
writing interactive games because we can
Tags: gamedev, writing
Published: 2024-02-25 21:27:04

---
title: writing interactive games because we can
published: true
date: 2024-01-02 00:00:00 UTC
tags: [ 'gamedev', 'writing' ]
canonical_url: https://onwriting.games/daily/20240102-2016-writing-interactive-games-because-we-can/
---

> Writing is telepathy.
> 
> - Stephen King

What better advantage than the flexibility of words to **create images in our minds**.

The production effort for a video game to visually represent complex things can be **prohibitive**.

Words, on the other hand, are _cheap_.

With just a paragraph we can, in less than a minute, create visual images that would take **hundreds of hours** to draw, animate, etc.

Even with a static image, we can set the visual anchor and bring it to life with our words.

Let's use that superpower!

I propose something to you:

Write a paragraph that can serve as a trigger for a new game.

But let it be a game that would be **very expensive** to produce.

Either because the art would be very costly or because the programming would be very complex.

For you, that is.

It doesn't have to be something that a professional can't do, or that Microsoft can't pay for it.

Just write something.

Let's start the year with something written.

You in?

Here goes mine:

```
I never thought that temporal paradoxes were so annoying.
I liked them so much in movies.
It was last week, I think.
I fell asleep.
And I woke up 10 years ago.
When I went back to sleep, I woke up 20 years in the future.
On and on.
Every.
Damned.
Day.
Just by breathing in the past, the future changes drastically.

```

Feel free to share yours!
Supabase: Firebase Alternative
Tags: supabase, firebase, realtimedatabase, baas
Published: 2024-01-01 23:59:04

![Supabase: Firebase Alternative](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90nqgqchmyncnqg4v4fb.png)

When you simultaneously hear words like database, authentication, file storage, and auto-generated APIs, know that the speaker is talking about Supabase.

But what actually is it? Well, it's an **open-source alternative to Firebase** that can serve as a complete backend. It's also called backend as a platform (BaaS) service.

On their official website, in bold letters, it's written, 'Build in a weekend. Scale to millions. Thankfully, SupaBase is living up to its words. Developers can spin up their backend in literally a few hours. And unlike Firebase, Supabase doesn't use a NoSQL database. It utilizes a relational database management system called PostgreSQL. That's why it's best suited for apps that have complex and structured data.

**Fun fact: If you want Supabase to use some other language apart from PostgreSQL, you can vote for it on their official website.**

Now as per Supabase officials, JavaScript and Flutter are the only two languages that they support. The good thing is that Supabase is free. However, its cloud option is paid. Using the latter, you can directly import bulk data - that's something alien for Firebase users. That's because there are no inbuilt services that allow bulk data uploads in Firebase. Developers have to use third-party Node scripts.

And if they don't want to manage infrastructure, there won't be any problem in SupaBase. That's because, in SupaBase, not only can you query data from the client but also make real-time changes to the data. This way user behavior, engagement, and conversion rates can be tracked. And as far as Supabase speed is concerned, it reads 4 times faster than Firebase. Result? Improved data retrieval and responsiveness of apps.

There's also an authorization system in Supabase using which you can authenticate users and assign them roles. In other words, you can customize access levels in different parts of the application. SupaBase also provides an API based on the PostgreSQL language. This means developers can write custom functions. And don't you worry? Since SupaBase is open source, all its tools and products, including storage and Edge functions, can be used without paying a penny.

And it seems that among the developer community, Supabase is gaining traction. Apart from all the above features, Supabase's intuitive user interface might be one reason. Many Firebase users are also seen using Supabase because it allows them to use tables. On GitHub, Supbase currently has 61k stars. Their client list is glowing with names like Quivr, Chatbase, and GoodTape.

#### But is Supabase easy to learn?
**Well, yes**. As per Supabase users, you don't need to be an expert in the database. All thanks to their comprehensive doc that makes it easy for even non-techies to work in Supabase.
Day 1:Docker Unveiled:Simplifying Software Deployment for Everyone
Tags: beginners, docker, containerization, devops
Published: 2024-01-01 23:57:30

**In the dynamic world of software development in India,** there's a common headache for many developers and IT experts: how to make sure software works well in different settings. Imagine a chef who needs to cook their special dish in various kitchens across India, each with different tools and spices.

That's where Docker steps in. Docker isn't just another tool; it's a groundbreaking method called containerization that's really changing how things are done. But what's so special about Docker, and why is it becoming a must-have in the world of software development?

## **Understanding Docker: Changing the Software Game**

Docker isn't just a tool; it's a whole new way of creating, deploying, and running applications. Imagine Docker as the blocks in a Lego set. Each block is a part of an app or software. Docker lets you build these parts in one place and then move and put them together easily in another place, just like building something amazing with Lego.

## **The Docker Revolution: Why It's Important**

Let's take an example of "QuickDeploy Inc.," a make-believe small business. Before Docker, QuickDeploy had a tough time making sure their software worked the same on every developer’s computer as it did when customers used it. With Docker, they could put their software into containers, which meant it worked the same everywhere. This change led to fewer unexpected issues, saved money, and made the team happier and more productive.


## **Docker Decoded: Containers and Images**

At the core of Docker are two main ideas: Docker containers and Docker images. Think of a Docker image as a detailed recipe and a Docker container as the dish made using that recipe. You can share your recipe (image) with others, and they can make the dish (container) just right. Docker Hub is like a big library, full of Docker images that people have shared.

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


## **Docker's Impact on Development and Operations**

Let's follow the story of Emily, a developer at a modern tech startup. Before Docker, Emily and her team often had problems because the software worked on one person's computer but not another's. After they started using Docker, they found a great rhythm in their work. Docker made sure that the software worked the same on every team member’s computer, which made everything smoother.

## **Conclusion: Docker, Opening a New Chapter in Software Deployment**

Docker is changing the way we deploy software, making it consistent, efficient, and simple. In our next part, we'll explore how to set up Docker, preparing you to create your own 'portable homes' for software.


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


_Stay tuned as we continue our journey with Docker. Let us know your thoughts and what you'd like to learn in this series!_

---
Blog 1: The Procrastinating Mage
Tags: firstpost
Published: 2024-01-01 22:33:12

Hey there and welcome!


This is my first post on DEV, so let me introduce myself:

They call me the procrastinating Mage, just as my name suggests, I'm a magic enthusiast.

I encountered DEV while I was on the search for a site where I could document my game development journey for other people to see.

That's right! I'm also a hobbyist game developer, who possesses knowledge in the languages **LUA** and **C++**. While I might lack experience, I plan on making a variety of prototypes and small games on **Unreal Engine 5** and then maybe work on a dream game of mine in the future.

My interest in **Fighting Game**s, **RPG**'s, **Roguelike**s and **Horror Game**s will be reflected the most in the games I'll make. If you're interested in the same genres and want to see cool things then make sure to follow me, as I will show off my progress every now and then!

My plan was to publish one Blog or Devlog every one or two weeks. This may differ as issues in my real life might slow down posts, as well as Holidays increasing the number, but I'll try my best!

[The next Blog will be in 2 weeks.]

This is all for my first blog, 
thank you for reading and have a nice day!
Let’s implement a Debounce function in Javascript
Tags: javascript, leetcode, tutorial, programming
Published: 2024-01-01 22:21:57

A debounce function is used to limit the rate at which a function can fire.

Previously I used [Lodash’s debounce function](https://lodash.com/docs/4.17.15#debounce), so I didn’t know how it worked and decided to implement it myself. I think it would be a good exercise and maybe help someone else come up with a better understanding of how it works.

Check how debounce works:
{% codesandbox vnnplw %}

### Real-life examples:

- Doing an API call on every keypress in an input. If the user types fast, we will fire a lot of API calls, which is not good. We can use debounce to limit the rate at which the API calls are made.
- A button click is handled by a function that will only run once in a given period, such as the Save button. If the user clicks the button multiple times, we will only run the function once.
- When a user resizes a window or scrolls a page, which can trigger dozens or hundreds of calls in a small period of time.

Implementing a debounce function is not that hard. Two key concepts are used: closures and setTimeout.

```typescript
export function debounce(callback: () => void, interval: number) {
  let timeout: number | null = null;
  return function (...args: unknown[]) {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => callback(...args), interval);
  };
}
```

**Closure** is a function that has access to the parent scope, even after the parent function has closed. In our case, the parent function is the debounce function and the child function is the function that will be called after the wait time has passed. The child function will have access to the parent function’s scope, even after the parent function has closed.

**SetTimeout** is a function that will call a function after a given time has passed. SetTimeout returns a timer ID that can be used to cancel the timer by calling the clearTimeout function. We will use this to reset the timer if the function is called again before the wait time has passed.

---

I'm always open to making new connections! Feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/aleksandr-efimenko)
My first post
Tags: newbie
Published: 2024-01-01 21:58:06

Hey everyone, and welcome to my first ever blog post!  I'm Ashraf, a junior developer still finding my way through the code wilderness, but hey, I'm here now! This feels like cracking open a fresh can of energy drink on New Year's Eve – exciting, and little scary.

Let's be honest, starting this blog has been on my to-do list since last year. You know how it goes – life gets busy, imposter syndrome, and suddenly it's December again. But not this time! 2024 is the year I stop lurking in the shadows and say "hello world" to the whole tech community.

This year, I'm setting my sights on some serious code conquests:

- Golang
- Htmx
- DevOps

Cheers to new beginnings, endless possibilities, and a whole lot of code 🚀 👨‍💻
MLOps project setup: Supabase
Tags: mlops, dataengineering
Published: 2024-01-01 21:29:13

Go get yourself a [supabase](https://supabase.com) account.

Once logged in to your account, create a new project and while creating it make sure to remember the db password you provide.

![Supabase dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xaq0hvql2s20nk2fed5o.png)

Go into project settings -> database and grab the following out of connection info:

- Host
- Database name
- Port
- User
- Password

![Supabase db connection info](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l8kj0d1s11i1ro8kgg1.png)

You'll need them later for setting up an airbyte destination.

That's it for supabase.