teleren/devto huggingface dataset:
The Twelve-Factor App: Dev/prod parity
Tags: learning, writing, architecture, devjournal
Published: 2024-01-04 15:18:00

### Keep development, staging, and production as similar as possible

---

Historically, significant disparities have existed between development and production environments, manifesting in several ways:

- The Time Gap: Code often takes days, weeks, or even months to reach production, whereas it should ideally be deployed within hours or minutes.
- The Personnel Gap: Developers create code while DevOps engineers handle deployment. Ideally, developers would be closely engaged in deploying and observing its behavior in the production environment.
- The Tools Gap: Local development setups might utilize stacks like `Nginx`, `SQLite`, and OS X, while production environments employ `Apache`, `MySQL`, and Linux. Let's keep development and production as similar as possible.

**The Twelve-Factor app is engineered for continuous deployment, aiming to narrow the gap between these environments.**

Developers adhering to **the twelve-factor principles resist the temptation to use different backing services in development versus production.** This stems from the appeal developers find in using lightweight services locally versus more robust ones in production. Discrepancies between these services often lead to minor incompatibilities, causing code that passed testing in dev or staging to fail in production. This discourages continuous deployment and results in considerable friction that incurs significant costs throughout an application's lifecycle. Additionally, modern packaging systems like `Homebrew` and `apt-get` have made installing and running modern backing services less challenging.

Many programming languages offer libraries that streamline access to backing services, providing adapters for various service types. For instance, `ActiveRecord` for `Ruby/Rails` includes database adapters such as `MySQL`, `PostgreSQL`, and `SQLite`. While adapters to different backing services simplify porting to new services, it's essential for all deployments (developer environments, staging, production) to use the same type and version of each backing service.

_This Twelve-Factor App post series is a means for me to
consolidate the knowledge I've gained while studying these
rules. Please feel free to visit [the site (https://12factor.net/) for more detailed explanations. That's all folks!_
My message to the community
Published: 2024-01-04 15:15:57

So, if you didn’t see my last post, which is this one (see below)
{% embed https://dev.to/thatcomputerguy/my-future-on-dev-566m %}
I said that I’m slowing down my workings on DEV. And that’s true. **I am still going to be around, guys, just posting a bit less often and changing up how I do things, but it will be different, and you will see me less.** I just wanted to take the time to say a couple of thank-yous to some of the people who have supported me along my journey. 

First, to my first follower, who is 
{% embed https://dev.to/sonicx180 %} 
You were reading me since the beginning, so thanks a lot. While you aren’t around on DEV anymore, I still want to say thanks, and hope you are doing well.

Next, to the fellow mods on my tags. First, #gamedev. Thank you to 
{% embed https://dev.to/karlstens %}
{% embed https://dev.to/rizmyabdulla %}
{% embed https://dev.to/missamarakay %}
{% embed https://dev.to/shindakun %}
{% embed https://dev.to/godot %}
Funny note, Godot is a framework whos profile is a mod. Cool!

Now, #watercooler. The only other tag mod is Mr. Founder himself, Ben Halpern.
{% embed https://dev.to/ben %}
Which segways me into my next group, the DEV team. There are a few who have stood out far to me and have been hugely helpful in my time here.

{% embed https://dev.to/ben %}
{% embed https://dev.to/michaeltharrington %}
And of course, all of the other mods. These guys are just super community active and have been super supportive, especially @michaeltharrington.  Thanks.

And the big one, all of the friends I’ve made along my way here at DEV. I hope to continue making new ones (Just links to their profile this time, as embeds would take hours to do :P)

@michaeltharrington 
@best_codes 
@wraith
@vulcanwm 
@renancferro 
and a lot more. If I left you out and you believe we are friends, PLEASE HIT ME UP AND I WILL ADD YOU!!! I want to include as many people as possible. And finally,

To the community. All one million of you. You are all amazing, brilliant people, and I want to extend one big thanks. So, again,

Thank you. For everything.
Maui Tip - Resolve a dependancy in MauiProgram.cs
Tags: maui, dotnet, dependencyinjection, mobiledev
Published: 2024-01-04 15:13:18

 Need to resolve a dependency in `CreateMauiApp()` method in `MauiProgram.cs`?

If you google around you find you need to get an instance of IServiceProvider, this can be achived using the snippet bellow  

```csharp

var serviceProvider = builder.Services.BuildServiceProvider();

var myService = serviceProvider.GetService<MyService>()

```
> MauiProgram.cs
Angular @defer Interactive Examples
Tags: angular, frontend, architecture, performance
Published: 2024-01-04 15:12:01

One of the Angular 17 awesome features shipped is the **defer block** which allows to **lazy load components, directives and pipes**, while configuring it on the **template level** via `@defer`.

If you already know the theory and want to **get your hands dirty** with `@defer`, here's an app you can see various usecases and combinations:

# [ducin.github.io/angular-defer](https://ducin.github.io/angular-defer)

{% youtube NPcpXuaZe30 %}

See how does application runtime and user interaction trigger `@defer` and what certain bundles get loaded into the browser.

It includes:

⚡️ components, directives, pipes
⚡️ multiple triggers and their combinations
⚡️ practical usecases (🪗 accordion, 📦 npm package and many more)
⚡️ analyze with devtools
⚡️ explanations included

{% youtube Kj4IxRa5duI %}

Usecases implemented:
⚡️ when condition: `@defer (when isVisible) {...}`
⚡️ on idle: `@defer (on idle) {...}`
⚡️ on viewport: `@defer (on viewport) {...}`
⚡️ on interaction: `@defer (on interaction) {...}`
⚡️ on hover: `@defer (on hover) {...}`
⚡️ on immediate: `@defer (on immediate) {...}`
⚡️ on timer: `@defer (on timer(2000ms)) {...}`
🪗 accordion: `@defer (on hover(accordion); on timer(5s)) {...}` (**before** accordion section gets clicked)
👫 multiple deferrable
📦 npm package: `<link rel="modulepreload" href="chunk-BYHJVGJ4.js">`
🗃️ nested defer: `@defer (on timer(2s)) { @defer (on interaction) {...} }`
⏱️ prefetch: `@defer (on interaction; prefetch on idle) {...}`
🚚 loading vs placeholder: `placeholder (minimum 500ms) {...}` & `@loading (minimum 1s; after 10ms) {...}`
💥 defer error: `@error {...}`

So open your browser devtools `Network` tab and have a play with the interactive examples 💪

[Follow me on twitter](https://twitter.com/tomasz_ducin) for more frontend (js, ts, react, angular etc.) deep dives!
Beginner's TypeScript #16
Tags: programming, beginners, typescript
Published: 2024-01-04 15:00:00

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

⭐ **Selectively Construct Types from Other Types** ⭐

We have looked at inheriting and combining types.

Given this User interface, create a new object type that only includes the **firstName** and **lastName** properties:

```ts
interface User {
  id: string;
  firstName: string;
  lastName: string;
}
```

There are a couple of solutions here that both make use of TypeScript's built-in helpers.

1️⃣ **Use Omit**

The first solution is to **Omit**.

According to TypeScript, this constructs a type with the properties of **T** except for those in type **K**.

Here is what the syntax looks like:

```ts
type MyType = Omit<User, "id">;
```

What we are saying here is to create a type with everything that **User** has except for **id**.

2️⃣ **Use Pick**

The second solution is to use **Pick**, which is the inverse of **Omit**:

```ts
type MyType = Pick<User, "firstName" | "lastName">;
```

Here we are taking User and picking its **firstName** and **lastName** properties.

> Note that **Pick** provides autocompletion while **Omit** does not.

This is because you are able to omit keys that are not present on the original type, which means you end up with all of its properties. This is an advanced problem that we will tackle down the road

For now, just know that both **Omit** and **Pick** are globally available in TypeScript and are extremely useful tools.

---

I hope you found it useful. Thanks for reading. 🙏

Let's get connected! You can find me on:
- **Medium:** https://medium.com/@nhannguyendevjs/
- **Dev**: https://dev.to/nhannguyendevjs/
- **Hashnode**: [https://nhannguyen.hashnode.dev](https://nhannguyen.hashnode.dev/)/
- **Linkedin:** https://www.linkedin.com/in/nhannguyendevjs/
- **X (formerly Twitter)**: https://twitter.com/nhannguyendevjs/
What Is AWS RDS? Key Features, Advantages, and Connection Guide
Tags: amazonrds, aws, awsrds
Published: 2024-01-04 14:56:58

Migrating from on-premises to cloud databases has become a prevailing trend. The advantages are clear: cloud databases not only match the functionality of their on-premises counterparts but also offer superior flexibility, scalability, and availability. Additionally, cloud database services offer secure, easy access from any location and manage the entire infrastructure, relieving users of such concerns.

Amazon Relational Database Service (Amazon RDS) stands out as a particularly popular web service. It supports a range of tasks associated with setting up and managing relational databases in the cloud, offering a user-friendly and cost-effective approach. In this article, we will delve into Amazon RDS, exploring its unique features and benefits.

Read in full: https://blog.devart.com/what-is-amazon-rds.html
AWS Lambda Guide (Lesson 02)
Tags: tutorial, aws, lambda
Published: 2024-01-04 14:55:16

AWS Lambda Guide Lesson 01: [Lesson 01](https://dev.to/randiakm/aws-lambda-guide-lesson-01-1i5n)

series

## 2. Lambda Fundamentals

**2.4 Creating a Lambda Function**

In this section, we are going to create a lambda function in the AWS console test it, and generate a log that we'll view in CloudWatch.

This lambda function will check whether a website is up or not and generate logs in CloudWatch. 


![Lambda-fun](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2g7fmjcz60oe873o6v0.png)

Step 01:

Go to your AWS console and navigate for the Lambda. 

![step01](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hha3rsh36tuhtq4rys8k.png)

Step 02: 

Click "Create Function" and create a function with the below details. 

![step02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qrlmogkncro8i2yurdoh.png)

Click on the "Change default execution role" and expand it. After that select "Create a new role with basic Lambda permissions".

![step02-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cagg5s5cm9y832bv8avi.png)

Create the function. 

Step 03: 

Create a basic hello-world test event to test the Lambda function. This test will invoke the function and determine the HTTP response code for the website in the code. Feel free to modify the Lambda code to test other websites and review the response codes within the function.

add the below code in the "index.js" file. 

```
import https from 'https';

let url = "https://www.amazon.com";

export async function handler(event) {
    let statusCode;
    await new Promise((resolve, reject) => {
        https.get(url, (res) => {
            statusCode = res.statusCode;
            resolve(statusCode);
        }).on('error', (e) => {
            reject(Error(e));
        });
    });
    console.log(statusCode);
    return statusCode;
}
```

Now click the "Deploy" button. 

Step 04: 

We will create a test event and execute the Lambda.

![step04](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/su2x9k85mzi3jmvwd5bi.png)

Give a name for the test event and save it. 

![step04-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1ev2tm1b4radf6v5pbt.png)

Step 05:

Now test the function. After clicking the test button you will able to see **"Response 200"**

![step05](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5nj32x4okg81wcsemtec.png)

Step 06:

After you've tested the function, navigate to CloudWatch to review the logs for the test event.
Understanding CSS Media Types: Making Your Website Look Good on Different Devices
Tags: css, media, screen
Published: 2024-01-04 14:38:25

When you design a website, you want it to look nice and work well, whether people are viewing it on a computer, phone, or even if they're printing it out. CSS (Cascading Style Sheets) helps with this, and one important part of CSS is something called "media types."

**What Are CSS Media Types?**

In the world of websites, not all screens are the same. There are big computer screens, small phone screens, and even printers. Each of these devices is different, and that's where media types come in.

- "screen" Media Type: For Devices with Screens

The most common media type is "screen." This one is all about making your website look good on screens, like computers and phones. When you design a website, you mainly focus on this media type because that's where people see your website visually.

By using "screen" media type, you can make sure your website adjusts to different screen sizes and shapes. This way, your website will look great and work properly, no matter what device someone is using.

- "print" Media Type: Getting Ready for Printing

Sometimes people want to print web pages. That's where the "print" media type comes in handy. It's like making a special version of your website that's easy to print. This ensures that when someone prints your web page, it looks neat and is easy to read on paper.

- "speech" Media Type: Helping Those Who Can't See the Screen

Accessibility is important in web design. The "speech" media type helps people who can't see the screen. It's for those who use special tools that read web content out loud. By using this media type, you can tell these tools how to read your content, making it easier for everyone to understand.

**Why Media Types Are Important**

Media types are like tools that help you make sure your website works well for everyone. Here's why they matter:

**Better for Everyone**: When you use media types, your website works nicely on all sorts of devices. This makes more people happy when they visit your site.

**Easy to Print**: The "print" media type helps people get good printouts of your web content.

**Accessible**: "Speech" media type makes sure everyone, including those with disabilities, can access your content.

Knowing how to use CSS media types is a big deal in web design. It helps you create a website that looks good and works well on different devices. It's not just about making it pretty; it's about making sure your website reaches as many people as possible in a friendly way.

So, in the world of web design, don't forget about media types. They're like a superpower that makes your website awesome for everyone.
How to recover your money after falling victim to a scam
Published: 2024-01-04 14:36:20

The sinking feeling in my stomach was unlike anything I'd ever experienced. My fingers hovered over the keyboard, paralyzed by disbelief. The words on the screen screamed like a digital siren: "Wallet Error. Funds Unavailable." At that moment, my entire crypto portfolio, years of careful investment, and meticulous trading, evaporated into thin air. Once a symbol of financial freedom, Bitcoin had turned into a harsh warning about the harsh realities of the digital world. Your wealth may disappear like a ghost in the blockchain with just one lost private key or forgotten password. A ray of hope appeared amid the debris, Daniel Meuli Web Recovery, just as despair was about to submerge me. Drawn by whispers of digital salvation, I ventured into the uncharted territory of crypto recovery. Daniel Meuli Web Recovery, with its promise of Bitcoin resurrection, felt like a lifeline thrown across a churning sea. But skepticism, a hardened shell forged in the fires of disappointment, held me back. Could this be real? Was this just another mirage in the desert of despair? With a deep breath and a heavy heart, I embarked on the arduous journey of recovery. The Daniel Meuli  Web Recovery interface, surprisingly user-friendly, guided me through the process with a gentle firmness. Each step, from data analysis to algorithm selection, felt like a tentative bridge being built across the chasm of loss. Weeks stretched into days, each one a torturous test of patience. Then there was a light flicker. "Potential Recovery Identified" flashed on my screen, a beacon in the digital night. The report was a comprehensive map that would guide me back to my lost treasure, and it made my heart pound against my ribs. With trembling hands, I followed the instructions, each click a prayer whispered into the void. And then, the miracle. My wallet. My Bitcoin. Alive and well, nestled within the secure confines of Daniel Meuli Web Recovery's digital vault. Tears welled up in my eyes, not just from relief, but from gratitude. Daniel Meuli Web Recovery had not just retrieved my Bitcoin; it had retrieved a piece of my faith in the digital world. It has shown me that even in the darkest depths of the cyber abyss, hope can still flicker, and sometimes, it can even bloom into a second chance. There is Daniel Meuli Web Recovery and within its algorithms and interfaces lies the potential to turn despair into triumph, and loss into a second chance.  Contact Daniel Meuli web recovery via: D.A.N.I.E.L.M.E.U.I.L.W.E.B.R.E.C.O.V.E.R.Y.@.E.M.A.I.L.C.O.M.E
Verdadeiro significado do emoji coração preto 🖤
Tags: emojis
Published: 2024-01-04 14:35:28

O [emoji coração preto](https://emojisparacopiar.com/%f0%9f%96%a4-emoji-coracao-negro/) 🖤, muitas vezes associado à morbidez e tristeza, revela-se como uma expressão versátil de emoções. Embora seja comumente compartilhado para indicar um estado de melancolia, também serve como veículo para manifestações mais sombrias, como luto e dor pela perda de entes queridos.

Amiga, hoje optei por ficar em casa 🖤, não estou no clima para sair.
Às vezes, parece que ninguém compreende o que estou passando 🖤.
Definitivamente, hoje não foi o melhor dos dias 🖤.
Sinto tanta saudade do meu pai 🖤.
Que Deus conforte os corações daqueles que perderam entes queridos nesta tragédia 🖤.

Não obstante, pessoas com senso de humor duvidoso, que se orgulham de seu mal humor, encontram no coração preto uma representação de sua atitude peculiar.

Adoro quando a pessoa chega atrasada 🖤 (contém ironia).
A pessoa já conhece meu jeito 🖤, mas ainda fica chateada se leva um fora.

Surpreendentemente, o coração preto transcende o âmbito negativo e pode ser utilizado de maneira positiva. Os amantes do rock, por exemplo, o adotam com entusiasmo para expressar sua paixão por músicas, bandas ou pelo próprio gênero. Além disso, ele frequentemente denota apreço pela cor preta ou por elementos que compartilhem dessa tonalidade, como café, roupas, animais, entre outros. Em última análise, o emoji revela-se como uma representação multifacetada, capaz de traduzir uma variedade de emoções e preferências.
Ansible Lint vs. Steampunk Spotter
Tags: ansiblelint, ansible, steampunkspotter, ansibleplaybooks
Published: 2024-01-04 14:30:00

Steampunk Spotter has often been compared to Ansible Lint. But it’s not about how these tools differ, rather than how they complement each other. Spotter picks where Ansible Lint leaves off and using both tools is a winning combination for your workflow, guaranteeing you reliable automation.  

We’ve prepared a detailed feature comparison to see what sets the tools apart: 

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

And there's more. [See all.](https://steampunk.si/spotter/spotter-vs-lint-comparison/?utm_source=devto&utm_medium=social)
Unleashing the Power of Full-Stack Development with Python 🐍: A Comprehensive Guide for Beginners
Published: 2024-01-04 14:27:15

Introduction:
Python has taken the world of full-stack development by storm, becoming an indispensable tool for building robust and scalable web applications. Its versatile libraries and user-friendly syntax make it an ideal choice for developers of all levels, from beginners to seasoned experts.

Diving into Python's Full-Stack Toolbox:

1. Front-End Foundations 💻:
   - HTML and CSS: The Cornerstones of Web Design
   - JavaScript: Bringing Interactivity to Life
   - ReactJS and Angular: Unlocking Dynamic UIs
   - Code Snippet: A Simple React Component in Action

2. Back-End Mastery ⚙️:
   - Flask and Django: Your Gateway to Powerful Web Frameworks
   - SQLAlchemy: Simplifying Database Interactions
   - RESTful APIs: Building the Foundation for Data Exchange
   - Code Snippet: Creating a REST API with Flask

3. Full-Stack Integration 🤝:
   - Front-End and Back-End Communication: Bridging the Gap
   - Real-Time Applications: Unleashing the Power of WebSockets
   - Deployment and Hosting: Bringing Your App to the World
   - Code Snippet: Setting Up a Production-Ready Deployment

4. Resources for Beginners 🎓:
   - Online Courses and Tutorials: A Roadmap to Python Mastery
   - Books and E-Books: In-Depth Knowledge at Your Fingertips
   - Python Communities: Joining a Network of Support and Collaboration

5. Contributing to Open Source Projects 🚀:
   - The Importance of Open Source: Giving Back to the Community
   - Finding Projects to Contribute to: Unleashing Your Potential
   - Code Snippet: Making Your First Contribution to an Open Source Project

Conclusion:

With this comprehensive guide, you're now equipped to embark on your full-stack development journey with Python. Embrace the vast opportunities that await you in this exciting realm of technology. Remember, continuous learning and practice are key to unlocking your full potential as a full-stack developer.

TL;DR & CTC:

- Python is a versatile language for full-stack development, offering powerful libraries and a user-friendly syntax.
- Front-end technologies like HTML, CSS, and JavaScript form the foundation of web design and interactivity.
- Back-end frameworks like Flask and Django simplify web development, enabling the creation of robust applications.
- Full-stack integration involves combining front-end and back-end components to create cohesive and dynamic web applications.
- Resources for beginners include online courses, books, and communities, providing a structured learning path.
- Contributing to open source projects offers opportunities for collaboration, learning, and giving back to the community.

CTC (Call to Action):

Are you ready to dive deep into the world of full-stack development with Python? Explore our comprehensive Python courses, tutorials, and resources to kick-start your journey today!