teleren/devto huggingface dataset:
Exploring the Distinctions: forEach vs. map in JavaScript Arrays
Tags: javascript, arrays, webdev, programming
Published: 2023-09-08 19:46:57


![javascript image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjwzpr4t8f7hfgovfhs4.jpg)

JavaScript, as a versatile and powerful programming language, offers several methods for working with arrays. Two of the most commonly used iteration methods are **forEach** and **map**. These functions serve as essential tools for developers when it comes to manipulating and processing arrays efficiently.

In this article, we will dive into the world of **forEach** and **map**, exploring their differences, use cases, and how they can help you streamline your array operations. Whether you're a seasoned developer looking to sharpen your skills or a newcomer eager to harness the full potential of JavaScript arrays, understanding the nuances of **forEach** and **map** is crucial.

Let’s embark on this journey to uncover the unique characteristics of these loop functions and discover when to employ each one to achieve your programming goals. Whether you aim to transform array elements or simply perform actions on them, by the end of this article, you’ll have a clear understanding of how **forEach** and **map** can be your allies in array manipulation.

**1. Purpose**:

- **forEach**: The primary purpose of **forEach** is to iterate over the elements of an array and perform a specified action or operation on each element **without creating a new array**. It's ideal for side effects like logging, updating values, or performing actions.


- **map**: **map**, on the other hand, is designed to iterate over an array, apply a provided function to each element, and create a new array with the results of those function calls. Its primary use case is **transforming array elements** and **generating a new array** based on those transformations.



**2. Return Value:**

- **forEach**: **forEach** always returns **undefined**. It does not produce a new array.


- **map**: **map** **returns a new array** with the same length as the original array, where each element is the result of applying the provided function to the corresponding element in the original array.



**3. Use Cases:**

- **forEach**: Use **forEach** when you need to iterate over an array to perform actions or side effects on its elements. For instance, you might use it for logging, updating elements in place, or triggering some other function for each item in the array.


- **map**: Use **map** when you want to **transform the elements** of an array and **create a new array with the transformed values**. This is useful when you need to maintain the original array intact and produce a modified copy of it.



**4. Examples:**

- **forEach:**

![forEach example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qfkvlir9totlb27g2i0.png)


- **map:**

![map example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19nj1e2bdsks74r6whnw.png)
What is a Laravel Macro, and how can you write an IDE Helper for a Macro?
Tags: laravel, idehelper, tips
Published: 2023-09-08 19:45:28

---
title: What is a Laravel Macro, and how can you write an IDE Helper for a Macro?
published: true
description: What is a Laravel Macro, and how can you write an IDE Helper for a Macro?
tags: laravel, idehelper, tips
canonical_url: https://ariaieboy.ir/blog/16-what-is-laravel-macro/
---

## What is a Macro in Laravel?

Macro is a simple mechanism that lets you add extra functionality to the classes that use the Macroable trait.

For example, in my [filament-jalali-datetime](https://github.com/ariaieboy/filament-jalali-datetime) plugin for filament, I added a `jalaliDate` method to the filament `TextColumn` class using the code below:

```php
TextColumn::macro('jalaliDate', function (?string $format = null, ?string $timezone = null): static {
            $format ??= config('filament-jalali-datetime.date_format');

            $this->formatStateUsing(static function (Column $column, $state) use ($format, $timezone): ?string {
                /** @var TextColumn $column */

                if (blank($state)) {
                    return null;
                }

                return Jalalian::fromCarbon(Carbon::parse($state)
                    ->setTimezone($timezone ?? $column->getTimezone()))
                    ->format($format);
            });

            return $this;
        });

```

You can add new functionality to any class that uses the `Illuminate\Support\Traits\Macroable` trait.

It's valuable, especially when you want to add new functionality to the core components of the framework and share it as a package.

## The IDE-Helper

Laravel Macros are magical, and your IDE might not detect them correctly, so to have better IDE support, you must create some IDE helpers so the IDE can see your macros.

The simplest way I found is an `ide_helpers.stubs.php` on the root that contains the signature of your macros; for example, for my `jalaliDate` method, I created this file, and my IDE can detect this method without any problem:
```php
<?php

namespace Filament\Tables\Columns {
    class TextColumn
    {
        /**
         * @source packages/filament-jalali-datetime/src/FilamentJalaliDatetimeServiceProvider.php:28
         */
        public function jalaliDate(?string $format = null, ?string $timezone = null): self
        {
            return $this;
        }
}
```

There is also a package to create automatic IDE-Helpers for macros named [tutorigo/laravel-ide-macros](https://github.com/KristofMorva/laravel-ide-macros).

If you have any other option to create IDE-Helpers for Laravel macros, you can share it in the comments.atabases, Object Storage, and git repositories.
I need to check the integrity of the backup files.
Enhance Your Fast.com Experience with the DraculaFast Dark Theme 🌙
Tags: themes, customization, dracula
Published: 2023-09-08 19:39:34

Fast.com is a go-to tool for checking your internet speed. But have you ever wished it looked a bit more appealing and was easier on the eyes during those late-night speed tests? Well, your wish has come true! Introducing the Dracula Dark Theme for Fast.com, a project that combines functionality with aesthetics.

## Why Use the Dracula Theme for Fast.com?:
Our Dracula-themed CSS brings a fresh new look to fast.com, following the popular Dracula color scheme. Not only does it make your speed tests easier on the eyes with its dark theme, but it also adds a touch of style. Whether you're a night owl or just appreciate a sleek design, this theme is for you.

## How to Install: 
Installing the Dracula Dark Theme for Fast.com is a breeze. Simply visit the [userstyles.world page here](https://userstyles.world/style/8066/dracula-dark-theme-for-fast-com) and click the "Install Style" button. Voilà! Your fast.com experience just got a major upgrade. 

We've also provided [step-by-step installation instructions in the project's GitHub repository here](https://github.com/Abir-Tx/DraculaFast) for your convenience.
<br />


![it's open sourced](https://refinepro.com/images/blog/opensource.png)

## Contribution and Feedback:
This project is open source, and we welcome contributions from the community. If you have ideas for improvements or want to get involved, head over to our GitHub repository. We appreciate feedback, bug reports, and, of course, pull requests. Together, we can make this theme even better!

## Closing Thoughts:
Thank you for taking the time to explore our project. If you have any questions, suggestions, or just want to connect, feel free to reach out. Stay tuned for more updates, and happy speed testing with the Dracula Dark Theme for Fast.com! 🌐💻

<code>Mushfiqur Rahman Abir
_Computer Science Engineer_</code>
The Start to Exploring the World of Open Source
Tags: beginners, javascript, meteor, programming
Published: 2023-09-08 19:26:06

Hi, my name is [Stephen Ditta](https://www.linkedin.com/in/stephen-ditta/), I am a 4th-year Software Developer at Seneca Polytechnic. I have a passion for both front-end and back-end development and aspire to establish my career in the field of full-stack development. In my spare time I find joy in two activities: fishing and painting. When not occupied by other responsibilities, you can find me casting away for the perfect catch. Additionally, if not fishing, I immerse myself in art, painting away at canvases and even miniatures.

I enrolled in the open source course to get a deeper understanding of collaborative software development as well as contribute to projects. While progressing through the course and expanding my knowledge, I predict valuable learning experiences through active engagement with a diverse global community. What attracted me to open source was working and collaborating with other developers on projects we are all passionate about. I enjoy the sense of empowerment and the ability to contribute to a global community of creators. It's a place where knowledge is freely shared, and everyone can collectively work together to build the future of technology.

In this term, my primary objective is to advance my software development skills by building upon my existing knowledge. I am hoping to contribute to open source code editors like Microsoft’s VS code or Notepad ++ and embark on development of extensions for these editors. My aim is to engage with the community, gain valuable insights, and make contributions I am truly proud of.

The GitHub trending repository I researched is known as [Meteor](https://github.com/meteor/meteor). It is an ultra-simple environment for building modern web applications. Meteor uses data on the wire, where the server sends the data (not HTML), and the client renders it. I decided to pick Meteor as it is a full-stack JavaScript platform for developing modern web and mobile applications.

**Meteor provides:**
- Modern JavaScript to create applications.
- Integration with technology such as frameworks that you already use, to reduce configuring disparate components yourself. Some integrated frameworks are:
      * React
      * Blaze
      * Vue
      * Svelte
- Flexible code for building apps for any device – web, IOS, Android, and desktop.
Today's Tithi Telugu | Eroju Tithi | Tithi Today Telugu
Published: 2023-09-08 19:16:31

Here one can find the [Today's Tithi Telugu](https://erojutithi.com/tithi-today-telugu/) is a vital idea in the Hindu calendar system. It is a lunar date, which is utilized to compute the advantageous as well as unpromising days for religious and get-togethers. In Hinduism,one can look into [Eroju Tithi for Tithi Today Telugu](https://erojutithi.com/tithi-today-telugu/) are utilized to establish the moment for carrying out religious ceremonies, festivals, and various other crucial occasions.
Introducing OpenBio - An Open Source Link in Bio Page Builder
Tags: webdev, typescript, nextjs, tailwindcss
Published: 2023-09-08 19:02:31

[OpenBio](https://openbio.app) is an [open source](https://github.com/vanxh/openbio) beautiful link in bio page builder.

Star [OpenBio](https://openbio.app) ⭐️ on [GitHub](https://github.com/vanxh/openbio).

[Announcement Tweet](https://twitter.com/Vanxhh/status/1696948312148943128)

## Tech Stack
It is made using latest tech stack such as
- NextJS App Router
- Tailwind CSS
- Typescript
- TRPC
- Clerk (Auth)
- shadcn UI
- Upstash (Serverless Redis)
- Drizzle ORM
- Neon (Serverless PostgreSQL)
- Resend (Emails)

## Showcase
You can check out my OpenBio [here](https://openbio.app/vanxh).
![Vanxh's OpenBio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dh8yq35gbdexl1najxzo.png)
Simple beginner friendly roadmap for devops
Tags: webdev, devops, javascript, kubernetes
Published: 2023-09-08 18:31:17


![Devops Roadmap description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzq4m87htogysj3rbguk.jpg)

Exciting news for the #DevOps community! 🌐 Explore the simplified DevOps roadmap that's transforming the way we work. Let's embrace efficiency and collaboration. #TechInnovation #DigitalTransformation"
Using static files in ASP.NET Core
Tags: csharp, dotnet, dotnetcore
Published: 2023-09-09 13:09:26

---
title: Using static files in ASP.NET Core
published: true
date: 2023-09-08 18:30:00 UTC
tags: Csharp,DOTNET,DOTNETCore
canonical_url: http://www.codetolive.in//c%23/.net/Using-static-files-in-ASP-NET-Core/
---

# INDEX

- Context
- Static files
- WWWroot folder
- Enable the static files in the ASP.NET Core project
- Reading static files

## 1. Context

Using static files in an ASP.NET Core project from the wwwroot folder using the IwebHostEnvironment’ interface inside the controller or service

## 2. Static file

The static files are the assets of the project, like HTML, CSS, JS, images, Excel, etc.

## 3. WWWroot folder

The static files are stored in the wwwroot folder in the project directory. The web root folder, i.e., wwwroot is the base path of the public and static resource files like Javascript (.JS), stylesheet (.css), etc.

## 4. Enable the static files in the ASP.NET Core project

‘UseStaticFiles’ in the startup will enable the static files to be served in the application.

Program.cs,

```
var builder = WebApplication.CreateBuilder(args);

var app = builder.Build();

app.UseStaticFiles();

```

## 5. Reading static files

You can use the ‘IwebHostEnvironment’ interface to read the static files from the wwwroot folder in the ASP.Core project. Inject the interface through dependency injection from the startup class and access it in the controller or service class.

The below code snippet reads the static files from the web root folder using the IwebHostEnvironment interface.

UserController.cs,

```
using Microsoft.AspNetCore.Hosting;

IWebHostEnvironment WebHostEnvironment;

// User controller constructor
public UserController(IWebHostEnvironment webHostEnvironment) {
    WebHostEnvironment = webHostEnvironment;
}

// Get user list
[HttpGet]
public void GetUserList(string fileName){
  // Read the static file from the wwwroot folder
    var serverPath = WebHostEnvironment.WebRootPath + "\\image\\business\\" + fileName;
}

```

Thanks for reading the article on using static files in an ASP.NET Core project. Please feel free to drop your comments below, and you can follow us on Twitter ([@Codetoliveblog](https://twitter.com/codetoliveblog)) to receive the latest updates from this blog.
What are the primary benefits and limitations of using 2D and 3D animated videos as a marketing or educational tool?
Published: 2023-09-08 18:24:42

[2D and 3D animated videos](https://animation-inc.com/2d-animation-company/) offer several advantages when used as marketing or educational tools. They excel at engaging audiences, simplifying complex ideas for better understanding, and leaving a lasting impact due to their visual appeal. Additionally, these animations are flexible, allowing for easy updates and modifications, which is particularly beneficial for dynamic content needs. They also contribute to brand recognition by maintaining consistent visual elements. However, there are limitations to consider, such as the potential high cost, longer production times for complex animations, technical requirements, risk of viewer fatigue with overuse, and the possibility of not resonating equally with all audiences due to language or cultural differences. Despite these limitations, animated videos remain a valuable means of conveying information and promoting products or ideas in a visually compelling manner.
How can I enhance my website's performance in Lighthouse?
Tags: frontend, webdev, javascript, react
Published: 2023-09-08 18:23:05

Greetings! I am a JavaScript engineer with more than 3 years of commercial experience and I recently encountered an issue with the performance of a project on React. The mobile version of the project was not performing well on Lighthouse, while the computer version was functioning properly. I had optimized everything within my capacity and yet, Lighthouse was still showing an error suggesting to _"Reduce unused JavaScript"_. I was unsure of how to solve this error and although I had seen several projects with good optimization and speed, they all had the same warning. However, when my team lead instructed me to _"Do something"_, I tried two actions and managed to improve the performance by +20 points.

## More than one
The project utilizes **GSAP** and **ThreeJS** for 3D models. Initially, the mobile version of the site had removed all 3D models while some libraries for 3D were still loading. This was the main issue. To tackle this, I created two similar components - one for the computer version and the other for the mobile version. The component for the computer version loads libraries for 3D and 3D models, while the mobile version of the component does not load the library and 3D models. Our mobile version uses static JSX instead of the 3D models for the desktop version. If a user has a mobile device with a screen size of 768 or less, an easy version of our component is displayed, while the full version with 3D is displayed for screens larger than 768. The first screen displays the result after changes, and the second displays the result before.


![First action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjckmtodnmt60s3dk6hj.png)

## Need more libraries for the library god
Additionally, I replaced the small library **react-intersection-observer**, which our project uses, with an easy custom hook and this helped to increase my Performance score by +10 points. I did it because I didn't know how to improve my performance in Lighthouse, and I did everything I could to boost the score. The result is on the next screen.


![Second action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjm5acugy75qlgno101a.png) 


## Conclusion
It is important to create two versions of your component - full for the computer version and simplified for mobile if you have some libraries that are only used on the computer version and not on mobile versions. Also, try not to use extra libraries if you can do it by yourself.

That's all for now. If you have any propositions, or ideas, or would just like to say _"Hello"_, feel free to write to me on [linkedin.com](https://www.linkedin.com/in/denis-chemeris-288a8a202/).
Open-Source Introduction
Tags: opensource, beginners, osd600, programming
Published: 2023-09-08 18:02:23

Hey, my name is Ian and I am a programming student at Seneca College in the 6th semester of the CPA program and am going to get my start in the world of open-source development through this course. 

I took this course because I want a good introduction to the open-source development community as I've only worked on more closed projects for assignments and personal learning. It also will teach me to interact more with open source communities and work on related projects which will help me with a future career in software development.

My goals in this term are to learn the proper methods and etiquette for contributing to open-source projects while also testing the many programming languages and skills that I have acquired during my time in college with real-world projects.

I'm not sure what types of projects I would like to contribute to exactly and would like to research and experiment with many different types of projects. I do however have a focus on tools that help with back-end development and useful tools that perform a task simply and efficiently. This leads to the project that I've chosen to research for this post.

[scrcpy](https://github.com/Genymobile/scrcpy) is a program written mainly in C that allows you to view and control your mobile device on your computer. I first came across this project a year ago when trying to find a program to emulate my mobile device for a school assignment. When I first downloaded it was extremely easy to set up and start and worked seamlessly, and besides allowing you to view your mobile's screen it also allowed you to control your phone with your mouse and keyboard which I found great as many other screen capturing methods don't have this level of emulation. 

The project is located at https://github.com/Genymobile/scrcpy and was created by [Genymoblie] (https://www.genymotion.com/aboutus/) which is a company specializing in Android emulation that has other similar projects that allow for the use of Android devices on other platforms include in the cloud. 

I find companies like these that specialize in efficient software to be very interesting and insightful for an open-source project as one of the reasons it works so well may have come from help from the open-source community and it inspires me to participate in projects like these in the open-source community.
#LearnedToday: Drag&Drop API
Tags: webdev, learnedtoday, javascript, html
Published: 2023-09-08 17:58:04

👀 I have never used **drag&drop** functionality with vanilla JavaScript. 

In the enterprise applications I work on every day, I usually rely on frameworks such as _Angular_, _React_, or _Vue_ that provide easier ways to handle it and, in addition, solve the classic problems that I would have to handle by hand.

💡 That's why I wanted to give it a try, developing a very basic project in HTML and JS.

Here, briefly, is what I figured out:

- In order to activate the dragging functionality on a element, it must be set the `draggable` attribute on it.

```html
<div class="item" draggable="true">Drag me</div>
```
- If we need to add some actions (e.g. save element's data for future purpose) once the element is "grabbed", a listener to the `dragStart` event must be added to it.

```html
<div 
  id="my-item"
  class="item"
  draggable="true" 
  ondragstart=handleDragStart(event)
>Drag me</div>

<script>
handleDragStart(e) {
  console.log('You are dragging ', e.target.id)
}
</script>
```

- If we want to drop the selected element somewhere, we need to create one or more drop zones in the HTML. 
In order to create them, we need to make the target element listen to `dragOver` and `drop` events.

```html
<div 
  class="dropzone"
  ondrop="handleDrop(event)"
  ondragover="handleDragOver(event)"
>
  Drop the dragging element here!
</p>

<script>
handleDrop(e) {
  e.preventDefault(); // prevent default action (e.g. open as link for some elements)
  // CODE HERE (e.g. append element to the drop zone)
}
handleDragOver(e) {
  e.preventDefault(); // Required to allow Drop event
}
</script>
```

That's pretty much it!

## Demo

As usual, I created a [stackblitz project](https://stackblitz.com/edit/dz-drag-drop?file=index.js) where you can use drag&drop to switch placements in a podium and choose which is the best 🏆 framework/library among Angular🥇, Vue🥈, and React🥉! (Try to guess what my ranking is 😁)

And here is the link to the [demo](https://dz-drag-drop.stackblitz.io) if you just want to play with it!

P.S. I did not use the [dataTransfer](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent/dataTransfer) property, but I will create a more "data-driven" demo to explain this function as well in the future.