teleren/devto huggingface dataset:
First steps
Tags: beginners, devops, pbl, techstack
Published: 2023-05-13 18:01:01

I'm excited to take you along the first steps of my journey. I'll be diving into PBL (Project-Based Learning) projects focused on web stacks and Linux administration.

As a software engineer, I've come to understand that most of what I'll be working on revolves around software, websites, applications, and other tech-related solutions. To achieve this, there are various stacks of technologies that work together seamlessly, and these are commonly referred to as technology stacks. I'll need to understand and implement all of these as I progress in my journey.

In particular, I'll be checking the following tech stacks:

1. LAMP (Linux, Apache, MySQL, PHP or Python, or Perl)
2. LEMP (Linux, Nginx, MySQL, PHP or Python, or Perl)
3. MERN (MongoDB, ExpressJS, ReactJS, NodeJS)
4. MEAN (MongoDB, ExpressJS, AngularJS, NodeJS).

While I already have some knowledge of Python and Linux, I'll also be sharing documentation and resources for beginners. For example, if you're new to these topics, I highly recommend checking out these free video tutorials:

[Python Tutorial for Beginners - Learn Python in 5 Hours FULL COURSE - FREE](https://www.youtube.com/watch?v=t8pPdKYpowI)

[The Complete Linux Course: Beginner to Power User! - FREE](https://www.youtube.com/watch?v=wBp0Rb-ZJak)

In the upcoming posts, I'll be documenting my experience with implementing these tech stack projects. I hope that my future posts will serve as helpful tutorials for those looking to expand their skills.

Thanks for reading and stay tuned for more updates!
Refresh Filament Relation Manager After an Action
Tags: laravel, php, filamentphp, livewire
Published: 2023-06-05 08:49:49

In my FilamentPHP project, I have an action button that creates relationships for my resource. However, after the relationships are created, the relationship manager needs to be updated. In this article, we will solve this problem.

The Relationship Manager is a Livewire component. By emitting an event to that component, we can refresh it. You can find more information in the [Livewire Documentation](https://laravel-livewire.com/docs/2.x/events).

Let's take an example where we create an action that performs certain tasks and then refreshes the relation manager. First, create the action:

```php
Actions\Action::make('example')
    ->action(function ($livewire) {
        // ... Your action code
        $livewire->emit('refreshExampleRelationManager');
    }),
```

Next, listen to this event in your relation manager:

```php

class ExampleRelationManager extends RelationManager
{
    ...
    protected $listeners = ['refreshExampleRelationManager' => '$refresh'];
    ...
}
```
By following these steps, you can ensure that the relationship manager gets updated after the creation of relationships.

Edit: emit method changed to dispatch in Livewire v3.
Weekly Roundup 007 (May 29): 🔥Hot Topics🔥 in #workplace, #sharepoint, and #powerplatform
Tags: roundup, workplace, sharepoint, powerplatform
Published: 2023-06-05 07:55:00

Hey fellow developers! It's @jaloplo, here to give you the latest scoop on what's been happening in the [#workplace](https://dev.to/t/workplace), [#sharepoint](https://dev.to/t/sharepoint), and [#powerplatform](https://dev.to/t/powerplatform) communities. 😎

## [#workplace](https://dev.to/t/workplace)

- [Beyond 5G: The Next-Generation Of Technology Revolutionising Communication and Connectivity](https://dev.to/iamokoli/beyond-5g-the-next-generation-of-technology-revolutionising-communication-and-connectivity-4jd5) by [Chibuikem](https://dev.to/iamokoli)

## [#sharepoint](https://dev.to/t/sharepoint)

- [Control Node.js versions with Node Version Manager (NVM) to develop SPFx solutions for different SharePoint environments](https://dev.to/williamramirez/control-nodejs-versions-with-node-version-manager-nvm-to-develop-spfx-solutions-for-different-sharepoint-environments-31l) by [WilliamRamirez](https://dev.to/williamramirez)
- [Game On! Creating a Lively Workplace with a Microsoft 365-Powered Riddle Game](https://dev.to/jaloplo/game-on-creating-a-lively-workplace-with-a-microsoft-365-powered-riddle-game-2eil) by [Jaime López](https://dev.to/jaloplo)

## [#powerplatform ](https://dev.to/t/powerplatform)

- [Automating Changing Solution Owner in the Power Platform](https://dev.to/wyattdave/automating-changing-solution-owner-155p) by [david wyatt](https://dev.to/wyattdave)
- [Environments in Power Apps. Setup your development environment and manage access](https://dev.to/williamramirez/environments-in-power-apps-and-16o1) by [WilliamRamirez](https://dev.to/williamramirez)
- [How to Send Automated Emails with Power Automate](https://dev.to/citizendevacad/how-to-send-automated-emails-with-power-automate-468i) by [Citizen Development Academy](https://dev.to/citizendevacad)
- [Adaptive Cards with Power Automate](https://dev.to/seenakhan/adaptive-cards-with-power-automate-5bcm) by [Seena Khan](https://dev.to/seenakhan)
- [What are Variables in Power Automate?](https://dev.to/citizendevacad/what-are-variables-in-power-automate-13g6) by [Citizen Development Academy](https://dev.to/citizendevacad)


That's all for this week's roundup! Thanks for tuning in, and remember to keep the discussions lively and informative in our tags. 💬 If you have any suggestions for future topics, feel free to drop them in the comments below. See you next week! 👋
Examples of Dependency Tracking Tools for App Security
Tags: security, programming, cybersecurity, beginners
Published: 2023-06-05 07:41:03

**As software developers, one of our top priorities is to ensure that our projects are secure and free of vulnerabilities. One way to achieve this is to use dependency tracking tools that help us identify outdated or vulnerable dependencies in our code. In this article, we'll introduce you to some of the most popular dependency-tracking tools you can use in your projects.**

## Dependency tracking tools to consider

These are 3 tools that you should at least try if you are serious about the software security of your product.

### [Dependabot](https://docs.github.com/en/code-security/dependabot)

* A popular tool built into GitHub.
* Alerts you when your repository uses a vulnerable dependency or malware.
* Available for all repository types.
* Can run pull requests based on test results.
* Notifies you when packages are outdated.
* Allows you to decide whether to merge the pull requests or not.
* Must-have for GitHub repositories.
* Possible to use with other providers but requires more work to integrate.

### [OWASP Dependency-Check](https://owasp.org/www-project-dependency-check/)

* Open-source and free software.
* More platform agnostic than Dependabot.
* Easily incorporated into your CI/CD pipeline.
* Generates an HTML report about dependencies.
* Checks and downloads the entire NVD vulnerabilities database.
* Requires correct configuration to avoid time-consuming work.
* It can be run on a local development machine.

### [Retire.js](https://retirejs.github.io/retire.js/)

* Dependency check tool for client-side JavaScript code.
* Provides a Chrome extension to analyze the code of visited websites.
* Checks for outdated dependencies on example sites.
* Provides you with a list of outdated dependencies.
* Useful for ensuring that client-side code is free of vulnerabilities.

## It’s up to you to choose the dependency tool

Dependency-tracking tools are essential for any software project. Whether you're using GitHub, client-side JavaScript, or a package manager, there's a tool that can help you keep your dependencies up-to-date and secure. Just choose something for your product! 🙂

## Discover even more tools

Discover the tools and tactics you need to keep your app secure with our [free security ebook](https://brightinventions.pl/blog/app-security-free-ebook/?utm_source=dev.to&utm_medium=referral&utm_campaign=article_dependency).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrogsmcthiow24j0uao8.png)
Is Google Analytics 4 The Best Solution For Ecommerce?
Tags: googleanalytics, googleanalytics4, ga4, nocode
Published: 2023-06-05 07:40:47

Is Google Analytics 4 the best solution for Ecommerce Stores? Are they really that insightful? Read the blog to find out!

https://www.conversios.io/blog/everything-you-should-know-about-google-analytics-4-for-e-commerce/
7 Tips To Optimize Google Product Feed
Tags: googleproductfeed, productfeed, googlemerchantcenter, productfeedmanager
Published: 2023-06-05 07:35:10

Learn how you can optimize the product feed for Woocommerce without any code in few steps. Read the blog to find out!


https://www.conversios.io/blog/tips-to-optimize-google-feed-for-woocommerce/
We made it easier to setup Facebook Conversions API
Tags: facebookconversionsapi, facebook, api, ads
Published: 2023-06-05 07:30:06

We have made a brief blog to help you setup Facebook Conversions API for Woocommerce Store without writing any code. Do check out and try it out yourself.


https://www.conversios.io/blog/setup-facebook-conversion-api-for-woocommerce/
Understanding JavaScript Strict Mode
Tags: javascript, tutorial, programming, webdev
Published: 2023-06-05 07:29:38

In JavaScript, the language provides a feature known as 'strict mode', introduced in ECMAScript 5 (ES5), that helps developers avoid common JavaScript pitfalls. In this article, we will dive into what strict mode is, how to enable it, and the benefits it provides.

For a more in-depth article you can check out the counter-part to this article over on our website: [Understanding JavaScript Strict Mode on Accreditly](https://accreditly.io/articles/understanding-javascript-strict-mode).

## What is Strict Mode?
Strict mode is a way to opt into a restricted variant of JavaScript. In strict mode, JavaScript eliminates some JavaScript silent errors by changing them to throw errors. It fixes mistakes that make it difficult for JavaScript engines to perform optimizations, and it prohibits some syntax likely to be defined in future versions of ECMAScript.

## Enabling Strict Mode
To enable strict mode in JavaScript, you use the string "use strict". This can be done for an entire script or within an individual function.

For an entire script:

```javascript
"use strict";
var v = "Hello, I'm in strict mode!";
```

For an individual function:

```javascript
function strictFunc() {
  "use strict";
  var v = "Hello, I'm in strict mode inside a function!";
}
```

The `"use strict"` directive is only recognized at the beginning of a script or a function.

## The Benefits of Using Strict Mode
Strict mode helps out in a couple of ways:

1. It catches common coding mistakes and "unsafe" actions. 

For instance variables must be declared with `var`, `let`, or `const`. A variable that has not been declared will cause an error.

```javascript
"use strict";
x = 3.14; // This will cause an error because x is not declared
```

2. It prevents the use of future ECMAScript reserved words. For example:

```javascript
"use strict";
var let = "Hello"; // This will cause an error because "let" is a reserved word in ES6
```

3. It simplifies `eval()` and arguments. 

In strict mode, variables declared within an `eval()` statement will not create variables in the surrounding scope.

```javascript
"use strict";
eval("var x = 10;");
// This will cause an error because x is not defined outside the scope of eval()
console.log(x); 
```

4. It restricts this to undefined for functions that are not methods or constructors. 

In non-strict mode, `this` will default to the global object, `window` in a browser context.


```javascript
"use strict";
function myFunction() {
  console.log(this); // Will output: undefined
}
myFunction();
```

Using strict mode can help you catch errors that would otherwise have been silently ignored. It also helps prevent you from using potentially problematic syntax and making inefficient coding decisions. Strict mode can make your JavaScript code more robust and maintainable, and it's a best practice to start your scripts with the "use strict" directive.
Understanding Docker: part 42 – Docker Scout
Tags: docker, devops, beginners, cloud
Published: 2023-06-05 07:18:20

---
title: Understanding Docker: part 42 – Docker Scout
published: true
description: Serie of sketchnotes about Docker. Explaining in a visual way Docker principles.
tags: Docker, DevOps, beginners, Cloud
series: Understanding Docker in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozlhbjyr447uk2skfitr.jpg
---

Understanding Docker can be difficult or time-consuming. In order to spread knowledge about Cloud technologies I started to create sketchnotes about Docker. I think it could be a good way, more visual, to explain Docker (and other technologies like Kubernetes and Istio).

We continue the series of Docker sketchnotes with a focus about Docker Scout: the new way to scan vulnerabilities of an image and display recommendations.

![Docker Scout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozlhbjyr447uk2skfitr.jpg)
![Docker Scout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ccfkib3evnmvlj5thgmx.jpg)
![Docker Scout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5g3phw4f87twct6odxzm.jpg)
![Docker Scout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zuxx2i0a0f6tz9cp6j6.jpg)

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).

If you are interested, I published the book in a paperbook version on Amazon: [Understanding Docker in a visual way](https://www.amazon.fr/Understanding-Docker-visual-way-sketchnotes/dp/B0BT6ZXR1W/ref=sr_1_1) and also in a PDF/ebook version on [GumRoad](https://gumroad.com/aurelievache#YTLzM).

![Understanding Docker in a visual way](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xs45orcsh2og8rnbi2b.jpg)

If Kubernetes interest you too, the book [Understanding Kubernetes in a visual way](https://www.amazon.fr/dp/B0BB619188/ref=cm_cr_arp_d_product_top?ie=UTF8) is available also.
Git - Resources for visual learners
Tags: kristiyanvelkov, webdev, programming, git
Published: 2023-06-05 07:11:25

Git is free and open source version control and has become the industry standard for keeping track of changes in software. Many people end up learning Git either on the job or on their own.

I propose you my list of of sites to learn Git, whether you’re brand-new to it or you need to improve your skills. 

1. [Oh My Git](https://ohmygit.org)

Oh My Git is a gamified way of learning Git commands that includes a visualization of what effect your actions have on the repository. It’s card-based for early beginners. Think of it like Hearthstone or Magic the Gathering, but better for learning. It can also be played by using the command line as well. Start playing today!

2. [Learn Git Branching](https://learngitbranching.js.org)

Sometimes, the complicated part of Git is understanding what is actually happening when you’re creating or working with multiple branches. This visualization tool helpfully creates a real-time display of changes to commit trees.

3. [A Visual Git Reference](https://marklodato.github.io/visual-git-guide/index-en.html)

A brief, visual reference for the most common commands in git. Once you know a bit about how git works, this site may solidify your understanding. 

4. [git-school ](https://git-school.github.io/visualizing-git/)

This visualization tool helpfully creates a real-time display of changes to commit trees.

5. [A Grip on Git](https://agripongit.vincenttunru.com/)

This how-to will help you level up in Git, going from being able to use Git to properly understanding it, getting a better grip on what is arguably one of the most important tools in software development at the moment.

---

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


[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/kristiyan-velkov-763130b3/)

<a href="https://revolut.me/kristiyanvelkov" target="_blank">
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxmsw2d2ooukhdg8x5ar.png)
</a>

If you like my work and want to support me to work hard, please donate via:

<a href="https://revolut.me/kristiyanvelkov" title="Link to Revolut">Revolut website payment</a> or use the QR code above.                                                                                                                           


**Thanks a bunch for supporting me! It means a LOT 😍**
What is Problem-solving skills in UX design?
Tags: ux, ui
Published: 2023-06-05 07:11:13

Problem-solving skills are crucial in UX design as they involve the ability to identify and address user problems and challenges through thoughtful and effective design solutions. UX designers utilize problem-solving skills to understand user needs, conduct user research, analyze data, and create intuitive and user-centered designs.

**Here are some key aspects of problem-solving skills in UX design:**

**1. User Research:** UX designers employ problem-solving skills to gather insights about users through research techniques such as interviews, surveys, and usability testing. They analyze the data collected to identify pain points, user goals, and areas for improvement.

**2. User Empathy:** Understanding the users' perspective and empathizing with their needs and challenges is essential in problem-solving. UX designers employ empathy to put themselves in the users' shoes, which helps them identify and address design problems effectively.

**3. Ideation and Prototyping:** Problem-solving in UX design involves generating creative ideas and concepts to solve user problems. Designers use techniques like brainstorming and sketching to come up with innovative solutions. They then create prototypes to test and refine their ideas.

**4. Iterative Design:** Problem-solving in UX design is an iterative process. Designers continuously gather feedback, test their designs, and make improvements based on user insights. They apply problem-solving skills to refine and optimize the user experience throughout the design cycle.

**5. Collaboration:** Problem-solving in UX design often requires collaboration with stakeholders, developers, and other team members. Designers need to effectively communicate and collaborate with others to align on problem definition and work towards shared solutions.

[UX design course](https://www.edureka.co/ui-ux-design-certification-course) cover the principles, methodologies, and practical techniques involved in user experience design. These courses provide comprehensive training on user research, user-centered design, information architecture, interaction design, usability testing, and more.

When choosing a UX design course, consider the course content, the expertise of the instructors, the learning format (online or in-person), and any specific UX design tools or methodologies covered. UX design courses are available from various reputable organizations, universities, and online learning platforms.

By enrolling in a UX design course, you can develop and enhance your problem-solving skills in the context of user experience design. You will gain practical knowledge and hands-on experience in solving design problems, creating intuitive interfaces, and delivering exceptional user experiences.
JavaScript - toReversed() Method
Tags: javascript, kristiyanvelkov, webdev, programming
Published: 2023-06-05 07:11:06

The **toReversed() method** is used to create a new array that is the reverse of the original array. The original array remains unchanged.

Here's an example to illustrate the difference between toReversed and reverse:

```typescript
const numbers = [1, 2, 3, 4, 5]; 
const reversedNumbers = numbers.toReversed(); 

console.log(numbers); // Output: [1, 2, 3, 4, 5] 
console.log(reversedNumbers); // Output: [5, 4, 3, 2, 1]
```


The toReversed method returns a new array with the elements in reverse order, while the original array remains unchanged.

On the other hand, the reverse method **modifies** the original array in place. Here's an example:

```typescript
const numbers = [1, 2, 3, 4, 5]; 
numbers.reverse(); 

console.log(numbers); // Output: [5, 4, 3, 2, 1]
```

 **toReversed() creates a new array while reverse() modifies the original array.**

---
### Browser's compatibility


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


---

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


[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/kristiyan-velkov-763130b3/)

<a href="https://revolut.me/kristiyanvelkov" target="_blank">
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxmsw2d2ooukhdg8x5ar.png)
</a>

If you like my work and want to support me to work hard, please donate via:

<a href="https://revolut.me/kristiyanvelkov" title="Link to Revolut">Revolut website payment</a> or use the QR code above.                                                                                                                           


**Thanks a bunch for supporting me! It means a LOT 😍**
The Coding Language Personality Test: What Would It Look Like?
Tags: discuss, codenewbie, beginners
Published: 2023-06-05 07:00:00

Hey, devs! Have you ever wondered, what if there was a personality test tailored to determine your perfect coding language? How accurate and reliable would such a test be? Would it consider the specific project domains, industry trends, or future job prospects associated with different programming languages? Would it accurately match our traits with the right language, or would it limit our exploration? 

Do you believe in the magic of a coding language personality test? (And if so, could you get working on it?) Let the debate begin!

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more awesome discussions and online camaraderie!

*{% embed* [https://dev.to/codenewbieteam](https://dev.to/codenewbieteam) *%}*