teleren/devto huggingface dataset:
Essential Software Design Principles You Should Know Before the Interview!
Tags: webdev, beginners, architecture, softwareengineering
Published: 2023-05-25 21:41:52



Software design principles are a collection of guidelines, best practices, and concepts that assist developers in creating well-structured, maintainable, and efficient software systems.

These principles provide a solid foundation for writing code that is easy to understand, modify, and extend, ultimately leading to improved software quality.

The key objectives of software design principles include:

* Encouraging code reusability and modularity.
* Promoting loose coupling between components or modules.
* Ensuring code readability and understandability.
* Enhancing testability, maintainability, and scalability.
* Facilitating effective collaboration among team members.

Several well-known software design principles are:

1. SOLID: A set of five object-oriented design principles that focus on creating maintainable and scalable code.

2. DRY (Don't Repeat Yourself): A principle that emphasizes avoiding code duplication to reduce maintenance complexity and potential inconsistencies.

3. KISS (Keep It Simple, Stupid): A principle that encourages simplicity in code and design, avoiding unnecessary complexity.

4. YAGNI (You Aren't Gonna Need It): A principle that advises developers to focus on delivering the features that are currently needed, rather than over-engineering or anticipating future requirements.

5. Composition Over Inheritance: A design principle that encourages the use of composition (combining simple objects to create more complex ones) instead of inheritance (creating new classes by inheriting properties and methods from a parent class) for code reuse and extensibility.

6. Law of Demeter (Principle of Least Knowledge): A principle that promotes reducing coupling between components by limiting the knowledge an object has about other objects in the system.
Swift Multiline Magic: Say Goodbye to Annoying Line Breaks!"
Published: 2023-05-25 20:40:38

If you are new to Swift and find yourself encountering those annoying \n characters after each statement in multiline code, fret not. While they indicate a new line, there's a simple trick to remove them and still maintain clean code formatting.
By adding a backslash (\) at the end of each line, you can effectively break multiline statements without the unwanted line breaks:

`let greeting = "Hello, " +
               "world!"  `

However, keep in mind that Swift doesn't allow a backslash at the end of the last line in a multiline statement. So, remember to avoid that to prevent any errors.
That's it for this quick tip! Stay tuned for more exciting Swift insights in our next blog.
Peace out! ✌️
Como trilhar uma carreira de sucesso
Published: 2023-05-25 20:05:41

Participei de um evento inspirador, o Explore Nitro, ao lado do incrível time da Lovel. O tema do dia foi "Como trilhar uma carreira de sucesso" e fiquei extremamente motivado com as discussões e insights compartilhados.

Aprendi que definir metas claras e específicas é fundamental para orientar nossa jornada profissional. Traçar um plano bem estruturado torna mais tangível o caminho que precisamos percorrer para alcançar nossos sonhos.

Além disso, descobri a importância do desenvolvimento contínuo de habilidades. Para ter sucesso em nossas carreiras, é essencial estar sempre atualizado e disposto a aprender e evoluir. Participar de cursos, workshops e programas de desenvolvimento nos mantém preparados para os desafios do mercado de trabalho.

Outro ponto destacado foi a relevância das conexões e relacionamentos profissionais. Construir uma rede sólida nos permite acessar oportunidades, receber mentoria e obter suporte em momentos cruciais.
Responsive typography
Tags: css, responsivedesign, beginners
Published: 2023-05-25 20:38:36

I have experience as a developer but I get surprise because every time you can discover new things, in my case I discover the power of font-size as size base for HTML document or web page

let me explain, everybody knows 1rem = 16px, but.... why.
this is thanks to font-size base in HTML that is 16px by default, then if you change your font-size to 20px, now 1rem = 20px, and then instead of changing all our typography classes or styles, we can simplify this task making the following to create a fully responsive typography:

Imagine that you have the following styles for you typography 

```
p {margin-bottom: 1rem;}

h1, h2, h3, h4, h5 {
  margin: 3rem 0 1.38rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 1.3;
}

h1 {
  margin-top: 0;
  font-size: 3.052rem;
}

h2 {font-size: 2.441rem;}

h3 {font-size: 1.953rem;}

h4 {font-size: 1.563rem;}

h5 {font-size: 1.25rem;}

small, .text_small {font-size: 0.8rem;}
```
Now to become our styles to a fully responsive typography we only have to add a media queries to change our font-size base
example:

```
/* Base style */
html {
  font-size: 16px;
}

/* Media queries */
@media (max-width: 768px) {
  html {
    font-size: 12px;
  }
}
```

And then we have a typography fully responsive for our website, where for small devices 1rem = 12px and for other device sizes 1rem = 16px.

I hope this blog helps someone.
DTO - Data Transfer Object
Tags: projectpattern, java, softwareengineering
Published: 2023-05-25 20:28:07

O **DTO - Data Transfer Object** é um padrão de projeto utilizado para transferir dados entre diferentes camadas de uma aplicação, permitindo comunicação eficiente e desacoplada. Geralmente, possui apenas atributos e métodos de acesso (_getters_ e _setters_) e não contém lógica de negócio.

**Exemplo no back-end (Java)**:

```java
public class Customer {

}

public class Address {

}
```

**Exemplo no front-end**:
Terraform Unimport : The Terraform command that does not exist !
Tags: terraform, devops
Published: 2023-05-25 20:23:56

Terraform import is a great feature to import existing resources into terraform state. But, what if we accidentally imported some resource into terraform state and we want to unimport them again. 
Well, terraform does not really have a command/feature that does exactly that but here's one cool trick you can use to quickly unimport some resources from Terraform state.

### terraform state rm

While running the terraform command to remove a resource from the state, make sure you quote(`'`) the resource id appropriately like so,
```
terraform state rm 'module.s3.module.s3_bucket["my-s3-bucket-name"].aws_s3_bucket.this[0]'  
```

Terraform state list can often be very long. If you need to remove a group of resources sharing a common name you can use the following bash oneliner,
```
terraform state rm $(terraform state list | grep production-files)
```
For example, the command above will remove a aws_s3_bucket, aws_s3_bucket_policy, aws_s3_bucket_cors_configuration and so on. 

### Bonus
Utilize the `-dry-run` flag before performing a potentially destructive operation like this. 
```
terraform state rm 'resource_id' -dry-run
```
Output:
```
Acquiring state lock. This may take a few moments...
Would remove module.s3.module.s3_bucket["production-files"].aws_s3_bucket.this[0]
Releasing state lock. This may take a few moments...
```

Happy Terraforming !

Note: This [SO](https://stackoverflow.com/a/75071263/10498418) answer i posted recently inspired me to share this here !

If you found this post helpful, CLICK BELOW 👇 <a href="https://www.buymeacoffee.com/ashiqurrahman" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Beer" style="height: 80px !important;width: 240px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
What is the Lobotomized Owl Selector in CSS?
Tags: webdev, css, html, tutorial
Published: 2023-05-25 20:19:51

Have you ever heard of the lobotomized owl selector in CSS? Despite being a lesser-known selector, it can sometimes prove to be a useful tool in web development. Let's discuss this selector in depth.

> Read this article on my [blog](https://salehmubashar.com/blog/the-owl-selector-in-css)

---

## Understanding the Owl Selector

The owl selector that allows us to apply styles to any and all elements that have an adjacent sibling which they follow. The selector looks like this:

```css
* + * { 
  padding-top: 15px;
}
```

The `*` is the universal selector which allows us to select all elements in the DOM and style them. The `+` is the Adjacent sibling combinator and is used to select the next sibling of an element, provided that they both have the same parent element. For example, in the following markup:

```html
<div class="parent">
  <h1>Heading</h1>
  <p>Paragraph</p>
</div>
```
The paragraph comes immediately after the h1. So, we can select this paragraph tag like this:

```css
/* Paragraphs that come immediately after the heading */
h1 + p {
  color: red;
}
```

To put it simply, the owl selector applies styles to all elements in the document that follow/proceed other elements, provided they are on the same level. The illustration below may help clarify this concept:

![Owl Selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbm1vavm0q6hqaxt07mv.png)

In the above illustration, all three elements are on the same level (have the same parent element). The second and third elements have a preceding sibling. However the first element does not have a previous sibling so it will not be selected. 


## Usage

One of the most common use cases for this selector is to add spacing between sections and paragraphs in blog/content websites. For example, adding padding or margin between paragraphs. Traditional methods almost always have unwanted effects for this use case (for example, adding spacing after the last element or above the first element).

This is illustrated here:

![Use Case](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1nulatipv94lqoben6b.png)

The example above can be coded like this:
```html
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
```
```css
.parent > * + * {
  margin-top: 1.5em;
}

.child {
  width: 150px;
  height: 50px;
  background: red;
}
```

Other possible use cases could include:
- Apply a style to an element only when it comes after another element on the page.
- Add some spacing between rows in a table.

## Nested Layouts

Another useful feature is that the owl selector works pretty well with nested elements, as illustrated below:

![Nested Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asli4dv0mqdbn9vfc4r5.png)

---

I hope you learned something new about CSS today!

> Check out this article on my [blog](https://salehmubashar.com/blog/the-owl-selector-in-css)
Thank you for reading
ESLint: Plugins vs Rules (EN)
Tags: javascript, beginners, node
Published: 2023-05-25 19:40:07

Article from my personal blog: [https://devcenter.space/](https://devcenter.space/)

ESLint is a powerful tool for checking code quality in JavaScript projects. However, the two main concepts that ESLint users encounter are "rules" and "plugins". Let's find out the differences between them.

## Rules

Rules in ESLint are a set of rules that define the correct or incorrect style of writing code. They help identify potential code problems and stylistic flaws such as missing semicolons, use of undeclared variables, use of forbidden functions, etc. ESLint has a built-in set of rules that you can use by default. However, you can also customize the rules according to your own needs.

For example, here are some examples of rules:

- `semi` - this rule requires the use of a semicolon at the end of each statement.
- `no-console` - this rule prohibits the use of the `console.log()` function and other `console` methods in production code.

## Plugins

Plugins in ESlint are additional modules that allow you to extend the functionality of ESlint. They provide additional rules and code inspection capabilities that are not included in the core ruleset. Plugins can be developed by the ESLint community or created by you. To use a plugin, you must first install it via a package manager such as npm or yarn.

For example, the `eslint-plugin-react` plugin is a popular plugin for checking React code.

## Summary

Rules and plugins are important components of ESlint. Rules help ensure correct code style and identify potential problems, while plugins allow you to extend ESlint's functionality and use specific rules for specific technologies or frameworks. With the right rules setup and use of plugins, you can improve the quality of your code and ensure a more consistent development style.

## More on this topic

- How to install ESLint: [link](https://devcenter.space/posts/eslint-setup).
- Official ESLint documentation: [link](https://eslint.org/docs/latest/).

[More articles](https://devcenter.space/).
Academic Dissertations - Tips, Support, and Discussion
Tags: academic, dissertation, thesis, writting
Published: 2023-05-25 19:10:23

Hello fellow learners and scholars,
Let's dedicate this forum thread to the fascinating world of academic dissertations! Whether you're currently working on one, have completed yours, or simply have questions or insights to share, this is the place to be. Feel free to discuss various aspects related to academic dissertations, such as: 
Choosing a research topic and formulating research questions.
Developing a solid research methodology.
Managing time and staying organized throughout the process.
Dealing with writer's block and staying motivated.
Seeking guidance from mentors and advisors.
Sharing helpful resources, tips, and strategies.
Overcoming challenges and celebrating successes.
Let's support and learn from each other's experiences in the realm of [academic dissertations](https://www.academicdissertations.co.uk). Share your thoughts, questions, or any advice you have to offer!
How to create a Virtual Machine and Resource Group using Azure Command-line Interface
Tags: azure, cloud, cli, devops
Published: 2023-05-25 19:03:08

The Azure Command-line Interface is a cross-platform open source command-line tool that we may use to build and manage resources in the Azure portal.

This application allows us to issue commands and manage Azure resources directly from the Windows command prompt. Since this application is cross-platform users can easily install it on windows, linux or macOS.

It is nearly identical to Azure Powershell in capability and function.

In this guide we will be using Azure CLI to create a resource group and virtual machine, execute commands in the cloud shell.

**_Creating Resource Group and Virtual Machine with Azure CLI_**

**Step 1:**
Visit [portal.azure.com](url), login or sign up if you don't have an account, you can get a free account at [azure.microsoft.com/en-us/free/](url)

**Step 2:**
On the Azure portal page **click the icon on the top right corner**, then **select bash**

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

**Step 3:**
**Click confirm** to switch to bash

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

**Step 4:**
To create a resource group paste these codes into your Azure CLI:

```
az group create --name mycoolRg --location EastUS
```

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

**Step 5:**
To create a Virtual Machine paste these codes into your Azure CLI:

```
az vm create \
--resource-group mycoolRg \
--name myVMcli \
--image UbuntuLTS \
--generate-ssh-keys
```
in the code above i used mycoolRg and myVMcli as my resource group name and my virtual machine name respectively, you can use any name of your choice

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

**_Confirming the Resource group and Virtual Machine created_**

**Step 1:**
Go to Azure portal page and **search for resource group** and **click it**

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

**Step 2:**
Here is the resource group created, **click it**

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

**Step 3:**
As you can see here is the Virtual Machine we created with Azure CLI

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

**Thank you for reading!!!** 🙏
Developer training Developers!
Tags: webdev, javascript, beginners, programming
Published: 2023-05-25 19:01:56

3 months went by so fast....
I recently started out as an instructor at [techtenum](https://techtenum.com/) for frontend web development.
Weirdly, I never thought of myself as a teacher or trainer. Yes this was my first official gig as a trainer. 

My main role was to ensure students learn web development from 0 to 100. The students did not have any knowledge on web dev, they had never interacted with the IDE or even written their first line of code. 

Our first class was introduction to the web and it was interesting to see how they yearned to learn more and become experts. We did a bit of UI/UX, an introduction to Version Control then went ahead to learn HTML, CSS and JS. We also introduced the students to webhosting on ghpages and netlify

The program included from theory, practicals and projects. This ensured that the students are able to apply what they learn practicaly and build real life projects.

Some of the projects the students worked on included a personal portfolio, a school website, a calculator, IG clone, EPL table clone(they love football) and two projects of their choice. This projects ensured that whatever they learnt in class was implemented.

### My favorite parts of the program included....

- **Lesson Prep**: This included coming up with notes for the next class. This made me learn more and more concepts, which I believe has even made me a better developer. For concepts that seemed complex I had to do before hand and hence making me an expert at it.

- **Implementation of JS concepts**: This was quite interesting to see the students implement the concepts they didnt think they could use before. Eg creating a responsive navbar using JS.

- **CSS Layouts**: I did not make lots of practice on CSS layouts before and after going through the session I felt am ready to go back to CSS and use it all the time. I literally learnt all over again.

- **Project presentation** and Reviews: Our mode of reviews involved the students presenting what they worked with and everyone would give feedback on how they felt about it and changes they wanted to see.

- **Debugging**: By the end of month one, the students owned the debbuging sessions and it was interesting to see the different approaches they take in bug solving.

## Conclusion


![> Software development is a commitment to continous learning - Wayne Gakuo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ek92p6lqyjqfcvv3p36h.png)

The entire three months was impactful for me! I was both an instructor and learner. I would do this again and again. The satisfaction that come with seeing beginners become experts...
Huge shoutout to the students for taking time to learn and never giving up on the difficult concepts. I can't wait to see what the latest web developers achieve in the next few months and years. Thanks to techtenum for the opportunity to train! 

Will I do this again? Yes and even much more better!

Thanks for reading through😊 Adios👋
Manage multiple Node.js versions
Tags: pnpm, node, tooling
Published: 2023-05-25 18:30:25

If you are working on various projects, you have likely encountered situations where you need to have multiple versions of Node.js installed on your computer.

You might not know it, but managing multiple Node.js versions is something you can do with pnpm, using the [`pnpm env`](https://pnpm.io/fr/cli/env) command.

## An example

```bash
pnpm env use -g lts 
```

This example demonstrates how to install the LTS version of Node.js.

Additionally, you can install specific versions of Node.js, view the versions already present on your computer, or remove one.

## Why use pnpm as your Node version manager?

Because managing your Node.js version is built into pnpm: if you already use pnpm as your npm package manager, you don't need to install another tool.

But there is absolutely nothing wrong with using another Node version manager if you prefer. I was using [nvm-windows](https://github.com/coreybutler/nvm-windows) before and I was happy with it. I just don't see the point of installing it anymore as similar functionality is already available in pnpm.

## Good to know

To specify a Node.js version to use in a project/folder, you can add an [`.npmrc`](https://pnpm.io/fr/npmrc) file `use-node-version`[​](https://pnpm.io/fr/npmrc#use-node-version) setting, like that:

```bash
use-node-version=16.16.0
```
How to create a Virtual Machine and Resource Group using Azure Powershell
Tags: azure, cloud, powershell, devops
Published: 2023-05-25 18:16:42

**_Creating Resource Group and Virtual Machine with Powershell_**

**Step 1:**
Visit [portal.azure.com](url), login or sign up if you don't have an account, you can get a free account at [azure.microsoft.com/en-us/free/](url)

**Step 2:**
On the Azure portal page **click the icon on the top right corner**, then **click powershell**

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

**Step 3:**
**Click show advanced settings** to create a storage account if you don't have one

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

**Step 4:**
On the storage account field **enter a storage name** of your choice, also **enter a file share** name of your choice, then **click create storage**

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

**Step 5:**
To create a resource group paste this codes into your powershell:

```
New-AzResourceGroup -Name ‘mycoolerRg’ -Location ‘EastUS’
```

for the resource group name i will be using **"mycoolerRg"** you can use any name of your choice

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

**Step 6:**
To create a Virtual Machine paste these codes into your powershell:

```
New-AzVm `
    -ResourceGroupName "myCoolerRg” `
    -Name "myVMps” `
    -Location "East US" `
    -VirtualNetworkName "myVnetPS” `
    -SubnetName "mySubnetPS” `
    -SecurityGroupName "myNSGPS” `
    -PublicIpAddressName "myPublicIpPS”
```
for user enter anyname of your choice, password also use any password of your choice

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

**_Confirming the Resource Group and Virtual Machine created_**

**Step 1:**
Go to Azure portal page **search for resource group** and **click resource group**

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

**Step 2:**
Here is the resource group created, **click it**

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

**Step 3:**
As you can see here is the Virtual Machine we created with Azure Powershell

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

**Thank you for reading!!!**