teleren/devto huggingface dataset:
Git tutorial - how to handle merge conflicts
Tags: programming, git, beginners
Published: 2022-11-30 13:29:50

## Ch3. Interactions with other changes
Git is pretty straightforward until we start working with others. 

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

Like you see, it doesn't take long for the git history to start confusing when multiple people are involved. The common scenario we encounter is `merge conflicts`  , which means your changes to the target branch is conflicting. Without resolving it, you cannot merge it. So let's see how to resolve the them with an example.

You start working on your branch `feature` off the master. If someone updated master while you are working on your branch, master and your branch will start diverging. When it's time to put your change to master, you have to figure out which changes you should take. To do so, follow the steps 

1. Identify the conflicting parts
Let's run `git status`. If there are any conflicts, this command will say `Unmerged path`. If you open up those, you can see something similar to this. 
```
<<<<<<< HEAD
// this is some content to mess with
a := b
fmt.Println("test")
=======
// totally different content to merge later
a := c 
>>>>>>> Master
```
`===` is the divider between current branch and master in this example. 

2. Think well and decide which parts to take
You want to take either part of it. Or you want to take little bit of each part and combine them together. Situation can vary. So judge based on your context. 

3. Now remove symbols `<<< , >>>, ===` and commit 
Once you determine which parts to take, the rest is simple. Let's say you want to take your current implementation, then delete parts down `===` to avoid merge conflicts. The last step is to commit change with the meaningful message. 

You are good to go! You can do this quickly if you know - which branch you are taking clearly. For example, if you you want to take all changes from master, you can simply run `git merge -X theirs master`. Be careful about the relative term `theirs`. The opposite is `git merge -X ours master`.

Now you learn about merge issues and how to resolve them. You level up once again! For more useful content, follow me @bitethecode  or on [Github](github.com/bitethecode or dev.to/bitethecode)!
What you need to know before using Ruby on Rails
Tags: webdev, beginners, ruby
Published: 2022-11-30 13:18:31



## Ruby on Rails

Dive into backend development with Ruby on Rails and experience a world of possibilities! 🤩

Ruby on Rails is a powerful open-source web application framework written in Ruby. It follows the Model View Controller (MVC) architecture, allowing developers to quickly build robust applications that can handle complex tasks.

With Ruby on Rails, you can create dynamic websites and applications that are faster to launch, easier to maintain and secure. You’ll also benefit from an expansive library of gems to help you extend the functionality of your apps or even get started with development quicker.

So, if you’re looking to get into backend development, why not give Ruby on Rails a try? With its amazing features and flexibility it can offer, there’s no telling what you could develop!

## Key Features of Ruby on Rails

Ready for the ultimate developer power-up?

Ruby on Rails is here with an unprecedented set of features that will turbocharge your productivity and help you develop amazing applications!

Here's why:

- Robust MVC architecture: create simple, maintainable codebases with a clear separation between models, views and controllers.

- Secure out-of-the box: Rails comes with built-in security features such as automatic CSRF protection and XSS prevention.

- Simple testing processes: write tests quickly and cleanly by leveraging test helpers and built-in assertions.

- Powerful ORM capabilities: connect to databases easily with ActiveRecord; manage records, perform complex queries and much more.

With Ruby on Rails, you can blaze through complex projects at lightning speed - get ready for your development journey to hit warp speed!

Ah, Ruby on Rails...

It's the framework we can all love to hate.

Sure, it can help you to quickly build a web application and get prototypes off the ground faster than ever before.

But don't be fooled, there are downsides.

For one, the language is often seen as too 'opinionated' which means that it can be difficult to customize the code.

Also, since it's so popular, many potential security issues have been overlooked.

And of course, with all that flexibility comes complexity - particularly when dealing with larger applications or multiple databases.

So if you're looking for a versatile and reliable platform for your next project, you might want to do a bit of research before going all-in on Ruby on Rails!
Студия дизайна интерьера: PRO Interior Design — PROID.studio
Tags: design
Published: 2022-11-30 12:44:10

Основатели студии дизайна интерьера Ерыков Артём Андреевич и Фролочкина Ирина Алексеевна с опытом работы более 15 лет.
Главная особенность дизайн-студии интерьера PROID.studio — это профессиональное проектирование интерьеров и воплощение в жизнь только продуманных идей!
Важен не только красивый дизайн интерьера, но и подробная проработка технической части дизайн-проекта для его реализации.
Все проекты мы ведем от первого чертежа до финального декорирования.
Официальная дизайн-студия интерьера «PRO Interior Design»: [https://proid.studio](https://proid.studio)
+79035801914
771547835506
319774600678033
ИП Фролочкина Ирина Алексеевна
freeRASP for Cordova
Tags: cordova, mobile, security
Published: 2022-11-30 12:39:42

Highly recognized freeRASP SDK providing app protection and threat monitoring for mobile devices arrived in the Cordova ecosystem! This article will help you understand runtime application self-protection, explore freeRASP capabilities, and shield your app against threats!

https://medium.com/@talsec/freerasp-meets-cordova-48e8df038971?source=friends_link&sk=142ac5b103f4ed77b764a89bb20e58c3
Tailwind CSS tutorial #23: List Style Type
Published: 2022-11-30 12:19:38

In the article, we will go into detail on how to use `List Style Type`.

## List Style Type
**Format**
> `list-style-type-{none|disc|decimal}`

| Tailwind Class | CSS Property |
| ------ | ------ |
| `list-none` | ` list-style-type: none;`|
| `list-disc	` | `list-style-type: disc;`|
| `list-decimal		` | `list-style-type: decimal;`|

## **Code**
```html
 <ul class="container mx-auto divide-y divide-gray-400 divide-dotted" style="font-family: Raleway">
  <li class="flex items-center justify-between px-4 py-2">
    <ul class="list-none">
    <li>Now this is a story all about how, my life got flipped-turned upside down</li>
     <li>Now this is a story all about how, my life got flipped-turned upside down</li>
     <li>Now this is a story all about how, my life got flipped-turned upside down</li>
    </ul>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">list-none	</div>
  </li>
 <li class="flex items-center justify-between px-4 py-2">
    <ul class="list-disc">
    <li>Now this is a story all about how, my life got flipped-turned upside down</li>
     <li>Now this is a story all about how, my life got flipped-turned upside down</li>
     <li>Now this is a story all about how, my life got flipped-turned upside down</li>
    </ul>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">list-disc</div>
  </li>
  <li class="flex items-center justify-between px-4 py-2">
    <ul class="list-decimal	">
    <li>Now this is a story all about how, my life got flipped-turned upside down</li>
     <li>Now this is a story all about how, my life got flipped-turned upside down</li>
     <li>Now this is a story all about how, my life got flipped-turned upside down</li>
    </ul>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">list-decimal</div>
  </li>
</ul
     
```
**Full code:**
The overall code will be attached to [repo ](https://github.com/codewithshubhi/learn-tailwind-css/blob/main/List%20Style%20Type.html)link.

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


**Resources:**
[tailwind.css](https://tailwindcss.com/docs)

Thank you for reading :), To learn more, check out my blogs on [Flex Direction](https://dev.to/shubhicodes/tailwind-css-tutorial-13-flex-direction-i8j), [Hackathons](https://dev.to/shubhicodes/all-about-hackathons-how-to-find-participate-win-42kk) and [Flex Wrap](https://dev.to/shubhicodes/tailwind-css-tutorial-14-flex-wrap-kee).
If you liked this article, consider following me on [Dev.to](https://dev.to/shubhicodes) for my latest publications. You can reach me on [Twitter](https://twitter.com/heyShubhi).

Keep learning! Keep coding!! 💛
1207. Leetcode Solution in CPP
Tags: cpp
Published: 2022-11-30 12:08:31

```cpp
class Solution {
public:
    bool uniqueOccurrences(vector<int>& A) {
        unordered_map<int, int> m;
        for (int n : A) m[n]++;
        unordered_set<int> s;
        for (auto &p : m) {
            if (s.count(p.second)) return false;
            s.insert(p.second);
        }
        return true;
    }
};
```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/unique-number-of-occurrences/
UI Framework for Flutter. What should be included in?
Tags: flutter, opensource, discuss, design
Published: 2022-11-30 11:56:14

Hello everyone! 
I'm tired of doing the same type of things for each of my pet projects. 

And I thought about creating a UI microframework for Flutter with common and base widgets / theming and flows which are most often found in all applications.

Flutter packages infrastructure already have solutions for this issue

**1) [GetWidget](https://github.com/ionicfirebaseapp/getwidget)**
![GetWidget](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hkjkbvmdof1zg3bavaj6.png)

"GetWidget has 1000+ pre-build widgets that you can reuse to develop both Flutter mobile app and web app. Our motto is to provide the best Flutter UI library to the Flutter community to speed up their development process and build awesome apps with pre-build Flutter Library Components."

![GetWidget preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lw7alxbs0vd1gdfurfyw.png)

This solution is cool!
But for me, this package has overloaded functionality.

When I talk about standard functions, I don't mean creating a million types of buttons on top of the standard Flutter buttons

**2) [FLUI](https://github.com/Rannie/flui)**
![FLUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnp7vdlat8mew51nyo5x.png)

"A powerful UI framework for Google Flutter"

![FLUI example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8nxyowb0ody67vtdpoe.png)

For me it is an similar library to the previous one.
The components look very ordinary. And it won't speed up development time for me.

**3) [flutter_neumorphic](https://github.com/Idean/Flutter-Neumorphic)**
![flutter_neumorphic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iin8b9wpggm2mwi18la1.png)

"A complete, ready to use, Neumorphic ui kit for Flutter"


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

A wonderful package that I have used a few times. But that's not what I need either. This package is useful when you need to make a neumorphic UI.

## Result

As a result, I can either: 
- Make up the functionality I need from scratch. 
⚠️ For a very long time for a pet project 

- Or take it from different packages. 
⚠️ What does it mean to expand the list of dependencies of your application to exorbitant sizes

## What do I want?
I will definitely create such a framework for my own purposes.
But before that I want to hear your opinion

- What do you expect from such a solution in general and what would be a reason to use it?

- What kind of flows would you like to see in this framework?
(Authorization, Menu, Products Cart, ...)

- What widgets would you like to see in this framework ?
(Buttons, TextForms, Modals, ...)

I am waiting for your opinion to discuss in the comments !
Thanks a lot for your reactions ❤️
New MERN Stack Boilerplate
Tags: node, react, typescript, showdev
Published: 2022-11-30 11:39:54

---
title: New MERN Stack Boilerplate
published: true
description: Modern MERN Stack Boilerplate
tags: node, react, typescript, showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1g46et7x2ip847mur5tl.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-30 11:02 +0000
---

I'm introducing MERN-SEED, an advanced boilerplate using Node, React, and TypeScript inside Docker containers. It takes advantage of the latest technologies and best practices to make your development process as efficient as possible.

I released the original project in 2019 as MERN Boilerplate. Since then, there have been a lot of changes to the frameworks and packages it uses, so I decided to rewrite it to be more recent. In the following, I will discuss the features and benefits of the release.

---

## Highlights

It is built with clean and consistent code, keeping scalability and performance in mind. The advanced structure allows you to build applications of any size.

- JWT Authentication
- TypeScript on both ends
- Modern EcmaScript features
- Clean, consistent code
- Folder by Features structure
- Simplified production builds
- Docker containers
- Automated setup
- End-to-end tests

---

## Features

The project has been written in TypeScript, a superset of JavaScript that adds static type checking and other features that can be useful in large-scale applications and make the code more maintainable.

The Folder-by-Features structure increases scalability and ease of collaboration. It has complete End-to-End testing, which will help to ensure that the application is fully functional before release.

It uses Docker containers to be portable and simple to set up all the tools needed for development and production.

### Backend

The backend includes global error handling with internal error codes and custom errors, as well as standardized request responses to maintain consistency. JWT is used for authentication and authorization to reduce the workload on the server. It uses Node v18 LTS, so the code is more stable and reliable.

### Frontend

The frontend uses hooks rather than class components. This approach is more efficient and will make the code easier to understand and maintain. It has light and dark themes prepared to use and extend. In addition, it uses React v18 and Redux Toolkit to make the application more modern.

### Setup

I have included a bash script to simplify the process of setting up and running the project in under 5 minutes by automating the process of installing the dependencies and setting up the configurations.

---

## Summary

Thank you for taking the time to read about my project. Any feedback or support is appreciated. I hope you find it useful!

Read the detailed [documentation](https://github.com/tamasszoke/mern-seed#readme) for more.
GitHub repo: https://github.com/tamasszoke/mern-seed
Top 𝟱 𝗙𝗿𝗲𝗲 𝗔𝗣𝗜𝘀 𝗙𝗼𝗿 𝗬𝗼𝘂𝗿 𝗣𝗿𝗼𝗷𝗲𝗰𝘁𝘀
Tags: api, webdev, javascript, beginners
Published: 2022-11-30 11:54:27

𝟱 𝗙𝗿𝗲𝗲 𝗔𝗣𝗜𝘀 𝗙𝗼𝗿 𝗬𝗼𝘂𝗿 𝗣𝗿𝗼𝗷𝗲𝗰𝘁𝘀 🔥

💥 𝐅𝐚𝐤𝐞 𝐒𝐭𝐨𝐫𝐞 𝐀𝐏𝐈 🔗 fakestoreapi.com

💥 𝐖𝐨𝐫𝐝𝐬 𝐀𝐏𝐈 🔗 wordsapi.com

💥 𝐑𝐚𝐧𝐝𝐨𝐦 𝐔𝐬𝐞𝐫 𝐃𝐚𝐭𝐚 🔗 randomuser.me

💥 𝐃𝐮𝐦𝐦𝐲 𝐀𝐏𝐈 🔗 dummyapi.io

💥 𝐒𝐞𝐣𝐝𝐚 🔗 sejda.com
How much salary does a Kubernetes engineer get?
Tags: kubernetes, devops, webdev, career
Published: 2022-11-30 11:44:49

**_$250,000 is the maximum salary offered for a Kubernetes job in our dataset!_**

Then, what is the average salary for a Kubernetes Engineer? Are the metrics vastly different between the US and Europe?

Let's try to answer some of the above questions (and perhaps more) with [Kube Careers](https://kube.careers) job listings data for Q3 2022 (July to September).

Before you read further, know that:
- At Kube Careers, we only include job listings with a clear salary range, and which have *Kubernetes* as a requirement and not a *nice to have/plus*.
- Our dataset is small, with **86** job listings from July to September 2022.
- We have divided the salary ranges into two categories: North American Kubernetes jobs (normalised to be in USD), and
European Kubernetes jobs (normalised to be in EUR).

## Salary ranges for American jobs in USD

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

The minimum salary offered in America, on average, stands at **$139,269**, while the maximum salary (on average) offered stands at **$174,246**.

The minimum average salary has increased by **13%**, while the maximum average salary has increased by **12%** over Q3 of 2021, which is a definite positive sign.

The highest salary range for Q3 2022 is between **$200,000-250,000**, which is also a whopping **25%** increase over the highest salary range for Q3 2021.

Overall, it's good to see that the average minimum salaries are increasing at a reasonable rate so that not only the positions at the top but the entry-level positions also seem desirable.

## Salary ranges for European jobs in Euros


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

The minimum salary offered in Europe, on average, stands at **€89,729**, while the maximum salary (on average) is at **€114,337**.

We have recently started analysing the salary ranges for Europe and America differently, so we can't compare these numbers with Q3 2021.

However, the minimum salary range has increased more than **7%** over the last quarter, i.e., Q2 2022, which is encouraging.

Note: Europe is a vast, diverse continent with varied living costs, economies, and technological status. Thus, we can't be conclusive with these numbers, but we can get a decent representation of the state of salaries in Europe.

Like what you read?

Click [here](https://kube.careers/kubernetes-trend-report-2022-q3) if you'd like to read our detailed job trends report for Q3 2022, which includes salary ranges, popular technologies, popular skills listed in job descriptions, and much more.
CSS management is easy with <web-component/>
Tags: css, webcomponents, webdev, frontend
Published: 2022-11-30 11:19:29

I've coded **CSS** for more than 15 years. **CSS** in complex **WebApp** nowadays is getting messy. That's why many **CSS** methodologies have been invented so far such as OOCSS, BEM, SMACSS, Atomic CSS. However, each methodology still has it's own advantages and disadvantages to debate.

Although there're many methodologies to choose. I still feel pain to manage **CSS** which make me always think that there's something still missing. After thinking and researhing, I think I've found the conclusion that **CSS** is just a styling language. It lacks of **Object Oriented** features. That's why it's hard to maintain and scale.

What's so close to make **CSS** becomes like **Object** is **OOCSS**. However, **CSS** methodology alone can't help much. That's why I've created [**Adapter**](https://keenlycode.github.io/adapter/) project to introduce a new concept which use **Javascript** and **\<web-component/\>** technology together with **CSS** . Start with simple **APIs** :

```javascript
// Javascript
define('el-card', Card);
Card.tagStyle(`background-color: white;`);
Card.classStyle('lift', `
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%);
`);

const card_id_highlight = document.querySelector('#highlight');
card_id_highlight.addStyle(`font-size: 1.5rem;`);
```

```html
<!-- HTML -->
<el-card id="highlight">
    Card content goes here.
</el-card>

<el-card class="lift">
    Lifted card.
</el-card>
```

I think that's a very interesting idea. With this implementation, I can use **CSS** in **Object-Oriented** space. `import` `export` `variables` `function` `scope` `class` `module` `packaging` .. that's a lot of features which can help to maintain and scale **CSS**.

The rest of this story is in **Adapter** project. You can take a look at [Adapter : Adaptive Style Web Component](https://keenlycode.github.io/adapter/) . Hope that it can blow **CSS** pain away. ;)
How to attach event handlers to dynamically created elements using vanilla JavaScript.
Published: 2022-11-30 11:18:47

There are many ways to solve the JavaScript common error: “Cannot read property `addEventListener` of null” one of them being event delegation.

Are you trying/ or have you ever tried adding an event handler to a dynamically created element and get the error "Cannot read property addEventListener of null"? In this article I will walk you through on how to solve this common error.

The answer to your question (The element is already on the screen, so why is it returning null?) is simple that your element is not on the dom when your JS file runs. When your page loads also your JavaScript files will run, and the element will not be on the dom at that moment hence when trying to access the element with `document.querySelector` you will get a value of null. Now that you know why you are getting this error, I will walk you through how to solve this error using a common technique known as event delegation.

According to the learn.jquery.com, “event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future”. I know what you are thinking, yes this is the answer to our problem. But how do we do this event delegation?

As it stated above, we will look for an element that is a parent or or descendants that exist in the dom, meaning is added with html, and we will add the event to that element. Example you have an element with a class of container, we will add the event listener to that element. Then we add an if statement checking for the event target if it contains that particular element (eg if the element has an id of button, we check the id of the target event) and we add our event listener like: 

```
document.querySelector(“.container”).addEventListner(‘click’, (event)=>{
	if(event.target.id === “button”){
		// Add your logic here…
	}
}

```

Congratulations, you have just learned how to solve the JS common error : “Cannot read property `addEventListener` of null” using event delegation.
React-admin as a low code library to build CRM
Tags: nocode, lowcode, crm, react
Published: 2022-11-30 10:33:43

**LowCode tools** let you generate code files of an application in a structured way using a visual drag and drop tool.

**NoCode tools** let you generate an app with a visual drag and drop tool which but may not have the code structured in a way which can be continued/maintained manually. 

So choosing a #nocode platform sometimes becomes risky. 


While building a CRM for our D2C brand, we have multiple options like ERPNext or Strapi. 

we at [Harold Electricals](https://haroldelectricals.com/) went for a simple mongo,express and react setup to start with. 

While choosing a react library we came across [react-admin](https://marmelab.com/react-admin/).

This is an amazing #lowcode tool which gives you full customization control along with lowcode development feel.

Check out a 30 minute guide on [this link](https://marmelab.com/react-admin/Tutorial.html) 

If you are using lowcode tools, then [strapi](strapi.io), [rowy](https://rowy.app/) are some good tools for building #lowcode backend systems.