teleren/devto huggingface dataset:
Bugfix: Multiple Vite Storybooks from Same node_modules
Tags: vite, storybook, node, bugfix
Published: 2023-05-12 17:02:05

## tl;dr

Encountering `Failed to fetch dynamically imported module` or `ENOTEMPTY: directory not empty` errors that reference `.vite-storybook` while running multiple Vite-builder Storybooks in a single package?

In `.storybook/main.[js/ts/tsx]`, add:

```js
  async viteFinal(config) {
    config.cacheDir = path.join(__dirname, '../node_modules/.vite-unique-name')
    return config;
  },
```

Don't forget to add `import path from 'path';` to the top of the file.


## What is this bug?

When running multiple Vite-builder Storybooks in the same repository or package, and each Storybook is built from the same set of `node_modules`, you may see errors like this:

`Failed to fetch dynamically imported module: http://localhost:6001/node_modules/.cache/.vite-storybook/deps/@storybook_preact_preview.js?v=a6ee60c2`

or

`Error: ENOTEMPTY: directory not empty, rename '/Users/.../node_modules/.cache/.vite-storybook/deps_temp...' -> '/Users/.../node_modules/.cache/.vite-storybook/deps'`

or

`ENOENT: no such file or directory, realpath '/Users/.../node_modules/.cache/vite-plugin-externals/@storybook/preview-api.js' [plugin vite:dep-pre-bundle]`

## Why is this bug?

That's a lot of different errors! And while they maybe be caused by a different problem, I have seen them all be caused by a multi-Storybook environment where all Storybooks use Vite builder.

So assuming your error is a bug caused by the Vite-bundler used by Storybook - it's because Vite's setup is not expecting there to be more than one Storybook instance in a repo.

Vite uses a cache directory to store the compiled code required to run Storybook. When multiple Storybooks are built from the same set of `node_modules`, the cache directory is shared between them. This causes the error above and will allow only one instance of Storybook to run at a time.

## How to fix this bug

The default cache directory is `<package-root>/node_modules/.cache/.vite-storybook`. You can change this by setting Vite's `cacheDir` option in your Storybook's `.storybook/main.[js/ts/tsx]` file:

```js
  import path from 'path';
  ... // rest of main Storybook config
  async viteFinal(config) {
    // Ensures that the cache directory is unique
    config.cacheDir = path.join(__dirname, '../node_modules/.vite-unique-name')
    return config;
  },
```

See [Storybook's Vite builder configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration) for more in-depth understanding of how to configure Vite for Storybook.

## Impact of the Fix

This fix gives each Storybook instance a unique cache directory. 

before:

```
node_modules
├── .cache
│   └── sb-manager
│   └── storybook
│   └── vite-plugin-externals
│   └── .vite-storybook
│       ├── deps
```

after:

```
node_modules
├── .cache
│   └── sb-manager
│   └── storybook
│   └── vite-plugin-externals
├── .vite-unique-name
│   ├── deps
```

## Conclusion

I hope this helps you fix your Storybooks! The bugs listed above could definitely be caused by something else, but this idea is def worth a copy-paste-reload attempt 😉.
Who's looking for open source contributors? (week 41)
Tags: discuss, opensource, contributorswanted
Published: 2023-05-12 17:00:00

---
title: Who's looking for open source contributors? (week 41)
published: true
description: Discover which opensource projects are actively seeking contributors. Learn how you can make a meaningful contribution to the open source community and gain valuable experience. Find out who's looking for opensource contributors now.
tags: discuss, opensource, contributorswanted
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
published_at: 2023-05-12 17:00 +0000
---
Restarting something Ben was doing for a while, and we plan on doing this every Friday! 

Open Source is about the community. Whether you have a project or you're looking to make your first PR.  

## Tell us about your project
_Promote your project by providing a link to the repo. Everyone who posted in previous weeks is welcome back this week, as always 😄_

Open Source should be a welcoming space for contributors. The README is the front door of your project. If you'd like to check out an example of a README, here's our [OpenSauced/insights README](https://github.com/open-sauced/insights).

If you submit please have the following in your repo to make it welcoming and helpful for contributors:

1. README.md
2. CONTRIBUTING.md

Finally, consider reading the [Best Practices for Maintainers](https://opensource.guide/best-practices/).

Happy coding!
Maximizing Your Influence as a Software Engineer
Tags: career, beginners, softwareengineering, programming
Published: 2023-05-12 16:50:14

As a software developer, you might be eager to dive into projects and prove your skills. However, one of the most valuable skills you can develop in the industry is the ability to strategically build systems and libraries while simultaneously creating products. This gives you significant leverage to negotiate with the product organization regarding which features can be implemented faster and with less effort.

Stakeholders are always happy to hear that a task can be done more easily by leveraging existing resources. So, how can you achieve this? By focusing on building the core building blocks for your organization.

There are simplified version of getting all of this - [Game about software development](https://devmanager.carrd.co)

Imagine working for a company that develops social media apps. Key functionalities in such an app include feeds, posts, and analytics about impressions. By building a library that streamlines these core functions, you can demonstrate your value and significantly reduce the time and effort required to implement new features. Start small, any library of starts with 500 lines of code or less.

To systematize core functionality effectively, follow these steps:

**Identify Core Features:** Determine the essential features and components that form the backbone of your product. In a social media app, these could include user profiles, authentication, and content sharing.

**Develop Reusable Code:** Write or move from other part of the project code that can be easily adapted and scaled for various requirements. This includes creating functions, classes, or libraries that address specific problems or tasks, making it simpler to integrate new features. 

**Communicate Your Achievements:** Share your newly created library with the product organization, highlighting how your work has streamlined processes and improved productivity. By showcasing your contributions, you can gain the trust and respect of stakeholders and enhance your negotiating power.

By systematizing core functionality and building a foundation of reusable code, you not only optimize the development process but also empower yourself as a software developer. This proactive approach demonstrates your value to the organization, enabling you to negotiate more effectively when discussing project scope, timelines, and resources. So, take the initiative to build the essential building blocks for your organization and propel your career forward. 

If you are not completely satisfied with the article, leave a comment below so I can adjust the next one to meet your needs.
I Boosted the Site's Performance with Better Images
Tags: webdev, astro, performance
Published: 2023-05-12 16:01:17

I optimized the images on [my personal blog](https://tomoviktor.com/). Let me tell you the goals of this series.

## Introduction
On my site, every blog or series has a thumbnail. These are used no matter what and loaded in for everyone. They are also present in the [OG meta tags](https://tomoviktor.com//posts/meta-tags#image-and-alt-text). 

Because of their high usage it is essential to optimize them by creating [responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). It is good for the client and the server too. The client gets a better performance (load time). The server's bandwidth will not be overloaded.

Before the update I made, I had to manipulate images manually. Compress and remove metadata from them. It was really annoying. I automated this process (also made it better). In this series I will share how I've done it.

## Goals
There will be two parts of the implementation. First, in order to use different sized images, they need to be generated. Second, use our new fancy images on the site. More details can be seen in each part of the series.

## Note
I am using the [Astro web framework](https://astro.build/), so some parts of the series will be Astro specific. I am going to use typescript.
Background-Color Library
Tags: css, webdev, javascript, beginners
Published: 2023-05-12 15:31:43

> In modern web development, UI components play a crucial role in creating visually appealing and inter...

[
![background-color-library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4sfopkcy6xpxcbujvy6.png)](https://www.webdeveloperblogs.com/2023/05/background-color.html)
How to Build an Internal Company Wiki from Scratch
Tags: generalprogramming, cms, frontend, nextjs
Published: 2023-05-12 15:21:12

A company wiki is a knowledge hub where organization-specific information can be easily accessed by the individuals working in an organization. Information in the hub can be related to engineering operations, hiring procedures, employee information, and other company-specific information. Creating and maintaining a company wiki can be complex, but tools like GraphQL and Hygraph (previously GraphCMS) can make it easier.

[**GraphQL**](https://graphql.org/) is a query language for APIs that allows you to request and fetch only the data that you want.

[**Hygraph**](https://hygraph.com/) is a cloud platform for creating databases, tables, and powerful GraphQL APIs. It allows you to create content on the fly with features such as text editors, workflows, and advanced roles.

In this tutorial, you’ll learn to create an internal company wiki from scratch. The backend and content management will be implemented with [**Hygraph**](https://hygraph.com/), and the frontend with [**Next.js**](https://nextjs.org/).

Read the full blog on [Hygraph](https://hygraph.com/blog/build-company-wiki).

Thanks for reading 💜

---

I publish a [monthly newsletter](https://www.ravsam.in/newsletter/) in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I come across while surfing the web.

Connect with me through [Twitter](https://twitter.com/ravgeetdhillon) • [LinkedIn](https://linkedin.com/in/ravgeetdhillon) • [GitHub](https://github.com/ravgeetdhillon) or send me an [Email](mailto:ravgeetdhillon@gmail.com).

— [Ravgeet](https://www.ravgeet.in/), *Full Stack Developer and Technical Content Writer*
Drupal: Custom EntityReferenceSelection plugin to solve issue with new EntityReference views filter.
Tags: drupal, webdev, opensource
Published: 2023-05-12 14:26:30

I'm a big fan of the work going on at https://www.drupal.org/project/drupal/issues/3347343.

This issue is attempting to add a new Views filter to core that will treat any entity reference field the same way a taxonomy term reference field is treated. Specifically, you will be able to use a select dropdown or autocomplete exposed filter on any of your entity reference fields.

I have been successfully using various versions of this patch in production for a while now (I believe, starting with Drupal 9.3.x). Unfortunately, now I am building a number of custom entities that do not have bundles and there appears to be a possible issue for "bundle-less" entities:
https://www.drupal.org/project/drupal/issues/3347343#comment-15048501

My simple workaround is a custom EntityReferenceSelection plugin that comes out like this:

```php
<?php

namespace Drupal\my_module\Plugin\EntityReferenceSelection;

use Drupal\Core\Entity\Annotation\EntityReferenceSelection;
use Drupal\Core\Entity\Plugin\EntityReferenceSelection\DefaultSelection;

/**
 *
 * @EntityReferenceSelection(
 *   id = "bundleless_selection",
 *   group = "bundleless_selection",
 *   label = @Translation("Bundle-less Entity Selection"),
 *   weight = 0,
 *   entity_types = { }
 * )
 */
class BundlelessSelection extends DefaultSelection {

  /**
   * @inheritDoc
   */
  protected function buildEntityQuery($match = NULL, $match_operator = 'CONTAINS') {
    $configuration = $this->getConfiguration();
    $target_type = $configuration['target_type'];
    $entity_type = $this->entityTypeManager->getDefinition($target_type);

    // For entities without bundles, $this->configuration['target_bundles']
    // will likely be an empty array, but according to comments in
    // DefaultSelection, it should be NULL.    
    if (empty($entity_type->getKey('bundle'))) {
      $this->configuration['target_bundles'] = NULL;
    }

    return parent::buildEntityQuery($match, $match_operator);
  }

}
```

Note: There appears to be an issue with the discovery of EntityReferenceSelection plugins. Always make the `group` and `id` properties match. (https://www.drupal.org/project/drupal/issues/2649712)
¿Sabes algo de las apps de Mi Vodafone? Visite el enlace para más detalles
Tags: webdev, free, ispan
Published: 2023-05-12 14:47:09

**Hello Mr.**
¿Sabes algo de las apps de Mi Vodafone?  [

---

```
{% embed https://win4500cashferr1thytuhugyg.my.canva.site/mivodafonm`

> 
` %}
```
](https://win4500cashferr1thytuhugyg.my.canva.site/mivodafonm)

```

```
Why Frontend Developers Should Use Figma
Tags: webdev, frontend, html, css
Published: 2023-05-12 14:45:38


When I was working in the office and we needed so many versions of the same page I choose the wrong approach. I just start to code them instead of designing them first. And every change takes a lot of time plus different versions. I said something needs to change. I decided it was time to learn Figma. You can ask me. What is Figma?

Figma is a design tool that helps you to create UI/UX designs for any app. I had a missing perspective about learning Figma because I’m not a web designer and I thought it will be a waste of time. I was so wrong because you don’t need to be a designer to use it. Let’s talk about a few reasons why you want to use it even if you are not a designer, but a web developer or frontend developer.


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

**Reason number one is to save time**
Doesn’t matter how fast you can code it is beyond easier and quicker to change things in the design stage. Even if you are not a designer you can create and compare so many versions on the same page very easily.


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

**Reason number two you learn a new skill and tool**
As a developer, we always learning new things, and know the basics of Figma and design will benefit you in the future. Some developers become creative developers and create so beautiful pages with 3d models and mind-blowing animation.


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

**The final reason is that Figma is easy and fast to learn**
You can learn the basics and start to create a real design after a few hours of learning. Compare this to old times when everyone used only Photoshop for design. If you wanted to create something decent in Photoshop you needed to spend so much time learning things. Figma saves a lot of nervousness with that because it was designed to create only UI/UX for apps.

**Final Thoughts**
I am personally so happy with Figma and now I have an extra tool in my toolbox. Even though I’m not technically a Web Designer, it helps me to understand design more and don’t limit myself if I want to use it. I don’t believe that learning something new and especially when it can help you at work is a waste of time. I wanted to share my thoughts about that. I hope you will find this information useful for you. Thank you for reading it!
Creating S3 IAM roles for an EC2 Instance
Tags: aws, devops, cloud
Published: 2023-05-12 14:38:55

# Challenge 005

As a cloud engineer you need to grant permissions to an EC2 instance to access an S3 bucket. EC2 instances, by default, do not have permission to access any S3 bucket. To allow an EC2 instance to access an S3 bucket, you need to configure the necessary permissions. You also need to query the S3 buckets from the EC2 instances and manipulate the S3 bucket.

# Solution

The solution will be implemented through the use of AWS Console

You will login in into the console and head to the IAM tab:

-On the left panel click Roles

We are going to create a new role for the ec2 instance

- Click Create Role
- Choose AWS Service
- for use case choose EC2
- Click Next

In this step we are going to add permissions policies, you have the option to use the AWS provided ones or create a new policy based on your needs

As per the instructions  that we need to create a new policy that would specific to a bucket, we will create a new policy through

Select create Policy and use the json tab, I will specify the following according to my needs which are List, Read and Write. I will specify basic actions for the policy and specify the bucket arn as the resource

```
{ 
    "Version": "2012-10-17", 
    "Statement": [ 
        { 
            "Sid": "VisualEditor0", 
            "Effect": "Allow", 
            "Action": [ 
                "s3:PutObject", 
                "s3:GetObject", 
                "s3:ListBucket" 
            ], 
            "Resource": [ 
                "arn:aws:s3:::cloudforcebucketnew",  
                "arn:aws:s3:::cloudforcebucketnew/*" 
            ] 
        } 
    ] 
}
```

- Click Next
- Review and Create the policy and role
- The new role will be created.
The next step would be to attach the role to your EC2 instance

Head over to your EC2 instance

- Select the EC2 instance you would like to attach the role
- In the actions tab, select security and click modify IAM role
- Select the role you created using the name
- click update IAM role

The IAM role is now attached to the EC2 instance

We can now access S3 through the EC2 instance

Connect to the instance

You can test it by listing all the S3 buckets
```
aws s3 ls s3://cloudforcebucketnew
```
You can also list all objects in the sub directory with
```
aws s3 ls s3://cloudforcebucketnew --recursive
```

![S3 Challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdtsz9jq34qxxi1462w9.png)

And that's how you can create an IAM role for your EC2 instance to access S3 bucket
The consistent learning of a developer
Tags: webdev, javascript, programming, productivity
Published: 2023-05-12 14:33:52

![How many Googling will appear in you output😂](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dw17fer5vpn6ny8wz515.png)
It’s crucial for developers to stay current with the newest hardware, software, and frameworks. For your development and success in the field of software development, consistent learning is essential.
I can assure you that while learning a new talent or specializing in a new one may take a week, you will utilize it throughout your entire career. Therefore, consider again before quitting.

**Why you need Consistent Learning**
As a developer, you must stay current with the most recent developments in order to remain useful. You can stay ahead of the curve and learn new talents that can help you solve challenging situations if you are constantly learning.

Additionally, persistent learning might increase your productivity and efficiency. You may apply new skills and resources to your work as you learn them, which will help you find new methods to organise your workflow. This may eventually result in shorter development periods and higher-caliber code.

**How to Consistently Learn**
There are many ways to consistently learn as a developer. Here are a few tips:

**1. Establish goals**
You may maintain motivation and focus on your objectives by setting goals. Setting goals can assist you in keeping track of your progress and remaining on course, whether you're learning a new programming language or a new framework.

**2. Participate in workshops and conferences**
Attending conferences and seminars is a great way to network with other developers and gain knowledge from subject matter experts. These events usually feature opportunities for questions and feedback as well as hands-on training.

**3. Read books and articles**
Reading books and articles will help you stay current on the newest trends and best practises in software development. Blogs, forums, and online organisations are just a few of the fantastic resources available on the internet.


**4. Practise makes perfect**
Like any other skill, software development also requires practise to become proficient. You can develop your skills and boost your confidence by either creating your own projects or contributing to open-source ones.

**Conclusion**
Continuous learning is crucial for developers who want to keep on top of trends and improve in their fields. By establishing objectives, attending seminars and conferences, reading books and articles, and sharpening your current ones, you can acquire new abilities and stay current in a sector that is constantly changing.
The PiCast: Connect a Raspberry Pi Pico W to an Anvil app
Tags: webdev, tutorial, raspberrypi, python
Published: 2023-05-12 14:22:08

# Connect a Pico W to an Anvil app

The Pico W is Raspberry Pi's powerful WiFi-enabled microcontroller board. Using the [Anvil Uplink](https://anvil.works/docs/uplink/pico?utm_source=crosspost:dev.to:/blog/picast-video), you can connect your Pico W to an Anvil app. Meredydd sat down with the lovely people from [Tom's Hardware](https://www.tomshardware.com/) to demonstrate how to do just that. 

In his episode of [The PiCast](https://www.tomshardware.com/news/introducing-pi-cast), Meredydd builds two projects, live on stream:

1. Displaying a message on an e-ink display

2. Logging data from a sensor

Watch the episode to learn how it's done:

{% embed  https://youtu.be/y7AQiLbLyck %}

---

## Build your own app with Anvil 

[Anvil](https://anvil.works?utm_source=crosspost:dev.to:/blog/picast-video) is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks – just **build it all in Python**.

[Sign up for Anvil](https://anvil.works/build?utm_source=crosspost:dev.to:/blog/picast-video)

Want to build an app of your own? Get started with one of our [tutorials](https://anvil.works/learn/tutorials?utm_source=crosspost:dev.to:/blog/picast-video).