teleren/devto huggingface dataset:
Simplify Shadow DOM with setHTMLUnsafe
Published: 2024-05-03 21:52:06

It's typical for Web developers to create encapsulated DOM elements in order to isolate both styles and functionality within a component. To achieve this, the `element.attachShadow` method is used to create a shadow DOM: a hidden subtree attached to an element. While powerful, it can be somewhat verbose and complex to set up:

```js
const sectionElement = document.querySelector('section');
const shadowTemplate = document.createElement('template');
shadowTemplate.innerHTML = `
  <style>
    /* Shadow styles applied only within the shadow DOM */
    h2 { color: blue; }
  </style>
  <h2>Shadow Content</h2>
`;
shadowTemplate.content.shadowRootMode = 'open'
const shadowHost = document.createElement('div');
const shadowRoot = shadowHost.attachShadow({
  mode: 'open'
});
shadowRoot.appendChild(shadowTemplate.content.cloneNode(true));
sectionElement.appendChild(shadowHost);
sectionElement.insertAdjacentHTML('beforeend', `
  <h2>Light Content</h2>
`);
```

This produces the following rendered HTML:

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

Notice how we must create the shadow DOM using the `.attachShadow` method first and <b>then</b> we can access the shadow root and use `.innerHTML` to populate the content.
 
Also note how `.innerHTML` cannot be used to directly create this output. This method is not designed to understand shadow elements within the template. Further, it also prevents this content from rendering due to a browser security restriction. If user-generated content is inserted with `.innerHTML`, it could contain malicious scripts that execute within your page. Shadow DOM creates a separate DOM tree that prevents styles and scripts from leaking into the main page.

However, if we understand and accept the security implications, we can take advantage of the new `setHTMLUnsafe` method to directly set HTML content, including shadow DOM declarations, bypassing the need for separate shadow DOM attachment methods like `.attachShadow`:

```js
document.querySelector('section').setHTMLUnsafe(`
  <div>
    <template shadowrootmode="open">
      <style>
        /* Shadow styles applied only within the shadow DOM */
        h2 { color: blue; }
      </style>
      <h2>Shadow Content</h2>
    </template>
  </div>
  <h2>Light Content</h2>
`)
```

With `setHTMLUnsafe`, you don't need to manage separate template elements, shadow hosts, or shadow roots manually. This can reduce the complexity of your codebase and make it easier to maintain, especially in larger projects where encapsulation of DOM elements is a common practice.

`setHTMLUnsafe` is available now in Chrome 124 (and supported in Edge, Safari, and Firefox).
# Const x Final em Dart. Você sabe a diferença?
Tags: flutter, braziliandevs, dart
Published: 2024-05-03 21:34:09

### Em Dart, temos as palavras-chave `final` e `const`, o que pode parecer confuso à primeira vista, mas há uma diferença bem sutil entre elas, que é a seguinte:

`const` é imutável e é instanciada em tempo de compilação, ou seja, sempre antes do seu programa rodar, os valores constantes serão  inseridos na memória, fazendo com que o compilador faça uma otimização inicial. Portanto, sempre que você tem certeza de que o valor de x nunca vai mudar, pode declará-lo como const.
```dart
const pi = 3.14;
```

- `final` também é imutável, mas é instanciada em tempo de execução, ou seja, sempre que seu aplicativo estiver rodando você quer pegar um input do usuário, ou precisa fazer um fetch de valores vindo do servidor, qualquer valor que você não conhece, use o final.
```dart
final time = DateTime.now();
```
#### foi um Texto bem curtinho mas é sempre bom pra quem está começando no mundo do dart/flutter, aprender essa diferença logo de cara, estudem dart antes do flutter, sempre!
I made a whooping 1.60$ from my books-for-indies app and... it's totally fine.
Tags: books, community, startup
Published: 2024-05-03 21:33:05


![IndiesReadIt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9lcc01vw1nr2fr5jvpz.jpeg)

## The Intro

First, a little look back at 4 months ago. 

I just shipped my first-ever product, a fantastic AI app that gives you everything you need to fill your e-commerce product page with enhanced images and automatic descriptions!

Woohoo what a banger... No. 🙃

Second to last on the ProductHunt launch, no users, no feedback, no nothing. And DDoS attacks. Noice!

Disappointing right? But anyway **I was starting to get annoyed** by this messy codebase and product. 

Time to move on.

## The building process

I needed to improve ALOT of skills, so naturally I searched for cool books on Amazon.
 
Did you ever try to find business or even niche books blindly on Amazon? 
It's a mess. 
Like really, wtf? 🥴

So I decided to make that app, "scratch your own itch" as they say. 

And that's what I made, **I applied everything I learned from my previous failure**, and I decided to build a simple, clean, and useful app. 

I even made terrible wireframes and hasardous database tables and relations on a little notebook like a grown man!

Motivated like I was I made a [blog series](https://majorleaguebaguette.com/tags/indiesreadit) about it!

## The money

Cool story bro, how about money now? 💰 
Don't worry I'm smart. It will be Amazon Affiliate links. My idea is so nice that the entire indie community will use it and I will be rich!

Lol.

I made **1.20**$ on the ProductHunt launch and... that's all folks.
*(no, actually, a lost one bought 1 another book for a massive 0.40$ this month!)*
![money](https://storage.googleapis.com/depikt_outputs/718shots_so.png)

And you know what? **I don't even give a fck!**

## The learning

I made a product that I'm proud of, that I use myself, that I know is useful for others, and that I can improve. I learned a lot, I improved a lot, and I'm happy with that.

While building this very product I had at least 3 app ideas, with the one I'll start working on very soon.
I gained confidence in crucial aspects (marketing, communication, SEO...) and technologies (LemonSqueezy, Loops, SSR/SSG...) so **I'm no more scared of the next project**.

And most importantly, I met so many cool people from the indie community, and I'm so grateful for that. Thank you guys. 🤜🤛

## The conclusion

So, if you're like me, a little indie dev with a lot of ideas and a lot of motivation, don't be scared of failure. It's not the end of the world, it's the beginning of the next project and the next success. 💪

And if you need good books to achieve your goals like your favorite #indiehackers, just go check what they read: [IndiesRead.it](https://indiesread.it)
Navigating Through Slow Connections in Java
Tags: java
Published: 2024-05-03 21:05:03

Slow connections can be a significant bottleneck for Java applications, especially when dealing with network operations. Inspired by “The Java Workshop,” let’s explore strategies to optimize Java applications for slow connections.

#Understanding the Challenge
Slow connections can lead to timeouts, slow data transfer, and a poor user experience. The key is to write Java code that is resilient and can handle these conditions gracefully.

#Setting Timeouts
Java’s `HttpURLConnection` class provides methods to set timeouts for establishing a connection and reading data:
![Setting Timeouts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/st30cdfagmq3pc2foofm.png)

#Asynchronous Processing
Asynchronous processing allows your application to handle other tasks while waiting for a slow connection to respond. This can be achieved using Java’s `CompletableFuture`:
![Asynchronous Processing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fk43yo05dfdytz2083fl.png)

#Caching and Proxy Servers
Implementing caching mechanisms and using proxy servers like nginx can help absorb responses quickly, freeing up worker threads to handle other requests1.

#Chunked Output
Sending data in chunks rather than a single large response can improve throughput and manage slow connections more effectively.

#Conclusion
Dealing with slow connections requires a multifaceted approach. By setting appropriate timeouts, using asynchronous processing, leveraging caching, and chunking data, you can enhance the performance of your Java applications under suboptimal network conditions.
There was an error while hydrating this Suspense boundary. Switched to client rendering. Next.js 14
Tags: webdev, nextjs, fix, react
Published: 2024-05-03 20:24:46

The error also looks like this:

Error: Text content does not match server-rendered HTML. See more info here: https://nextjs.org/docs/messages/react-hydration-error

If you look through the link you will se that it is mostly because you nested a `<p>` tag in another `<p>` tag or `<div>`

But for some reason you checked and that this is not the case here is the solution.

```
export default function Component(){
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }


  return(
    <div>
      KeremG is the best
    </div>
  )
}
```

I spent quite a bit of time figuring this out, just use this mounting method, and you are good to go.
Elevate Your Online Presence: Choosing the Top Website Development Company in Kasur
Published: 2024-05-03 20:19:15

Are you looking to establish a strong online presence for your business in Kasur? Look no further! **AudienceTarget.net** is your trusted partner for [website development services](https://audiencetarget.net/website-development/) tailored to meet your unique needs.

With a team of experienced developers and designers, we specialize in creating dynamic, user-friendly websites that not only showcase your brand but also drive results. Whether you're a small startup or a large enterprise, we have the expertise to bring your vision to life.

## Why choose AudienceTarget.net?
**Customized Solutions:** We understand that every business is different. That's why we take the time to understand your specific requirements and tailor our solutions to suit your needs.

**Cutting-Edge Technology:** Our team stays up-to-date with the latest trends and technologies in web development to ensure that your website is built using the most advanced tools and techniques.

**SEO-Friendly Designs:** We design websites with search engine optimization (SEO) in mind, helping you rank higher on search engine results pages and attract more organic traffic.

**Responsive Design:** In today's mobile-driven world, it's essential that your website looks great and functions seamlessly on all devices. Our responsive designs ensure that your website looks and performs flawlessly across desktops, tablets, and smartphones.

**Affordable Pricing:** We believe that high-quality web development services shouldn't break the bank. That's why we offer competitive pricing packages to suit businesses of all sizes and budgets.
💰 Unleash ollama potential w. data and LLM capabilities
Tags: ai, opensource, opendata, python
Published: 2024-05-03 20:10:42

## 💭 First thoughts

Since I discovered `ollama` many months ago, day after day the feeling that the number of models (and tags) was going ever bigger...somewhat _out of control_.

Lastly, news were so rich and models were landing at an ever increasing pace:

{% twitter 1780598146470379880 %}

In the mean time, I was not the only one to find _the were a lot of models out there_ : 

{% twitter 1781431672262525094 %}

👉 So I started to build a place to **put all `ollama` library data altogether so anyone can use datascience on top of it for any purpose.**

This post is all about this.

## 🎯 Goals

1. **Get** data together
2. **Link** data together
3. **Schedule data delivery** as Kaggle Dataset
4. **Make some datastorytelling** around MT-Bench and [`duckdb` `FTS` (Full-Text Search Extension)](https://duckdb.org/docs/extensions/full_text_search.html) and the automation opportunities we have

## 🍿 Demo

Below the full dataset unboxing

{% youtube -I9DBQRhsjo %}

## 🤖 About automation, agentic, MT-Bench

{% youtube xvQItI-eEZc %}

## 🏆 Most trending models

{% youtube sAW9KIN0Xug %}

## 🎨 Dataviz inspiration

{% twitter 1782799567689232764 %}
4 Reasons why your LinkedIn isn't grabbing recruiters attention
Tags: linkedin, career, developer, webdev
Published: 2024-05-03 20:06:40

Are you wondering why recruiters are not giving your LinkedIn profile the attention it deserves? 🙊 I was there too and this was what I have learned:

###🔸Photo
Your LinkedIn profile photo is often the first thing recruiters notice. It's important to take a clear photo, with a simple background and from the front. You can even use editing tools like <a href="https://www.remove.bg/" target="_blank">remove bg</a> to add some magic to your photo.

###🔸Headline
Your LinkedIn headline is like a mini elevator pitch – it should quickly communicate who you are and what you have to offer. Make sure to add a clear introduction of who you are and how you can contribute, using some personality and key words, while keeping it concise.

###🔸About me
The "About me" section is your opportunity to showcase your unique story, skills, and passions. Write a simple and original text that connects to you as a person, highlighting who you are, where you came from and your biggest career achievements.

###🔸Skills
Ensure that your skills accurately reflect your expertise and consider reaching out to colleagues and connections for endorsements. Avoid using generic phrases and instead, be highly specific to your industry and dream role description.

✨ If you would like a review of your LinkedIn and some tips on how to improve it, [I'm here to help 😊](https://ko-fi.com/monicafidalgo/commissions)
Maximum Average Subarray I | LeetCode | Java
Tags: slidingwindow, java, algorithms, beginners
Published: 2024-05-03 19:50:17

## Approach
This is actually a beginner friendly version of **_Sliding Window_** algorithm. Because we will run a loop from 0 till K, calculate the sum. From K we will start eliminating and adding elements at the same time. 

<br>

> Try to learn this using pen and paper. 

## Code

``` java
class Solution {
    public double findMaxAverage(int[] nums, int k) {
        
        double res = 0;
        
        double sum = 0;
        
        for(int i=0; i<k; i++){
            sum += nums[i];
        }
        
        res = sum/k;
        
        int n = nums.length;
        
        for(int i=k; i<n; i++){
            sum = sum + nums[i] - nums[i-k];
            res = Math.max(res, sum/k);
        }
        
        return res;
    }
}
```











_Thanks for reading :)
Feel free to comment and like the post if you found it helpful
Follow for more 🤝 && Happy Coding 🚀_

If you enjoy my content, support me by following me on my other socials:
https://linktr.ee/tanujav7
Autos8
Tags: netlifychallenge, devchallenge, webdev, javascript
Published: 2024-05-03 19:30:26

*This is a submission for the [Netlify Dynamic Site Challenge](https://dev.to/challenges/netlify): Visual Feast.*


## What I Built
<!-- Share an overview about your project. -->
Auto mata
## Demo
<!-- Share a link to your Netlify app and include some screenshots here. -->

https://autos8.vercel.app
## Platform Primitives
<!-- Tell us how you leveraged the Netlify Image CDN. -->
auto
<!-- Did you implement additional platform primitives like Netlify Blobs or Cache Control? Tell us about that too! You may qualify for more than one prompt. -->
No
<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->
N.A

<!-- Don't forget to add a cover image (if you want). -->


<!-- Thanks for participating! -->
What is the right way to do microservice ??
Tags: javascript, beginners, discuss, microservices
Published: 2024-05-03 19:23:26

I am exploring microservice-based architecture and have a doubt:

### Should all my microservices have a common database?

While designing the application, I can take either of the following two approaches:


![Approach 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbgsabpi93wj0butz3vc.png)
Approach 1: All microservices have a common database


![Approach 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ic7iu5x8xfwrn0hltzj.png)
Approach 2: All microservices have their database

**With approach 1:**

- I can take advantage of the relational schema of the database.
- However, since the database is common, when it comes to scalability, I am afraid it would act as a bottleneck.
- Also there would be unnecessary code duplications and I don’t think this approach falls in line with the mantra of “Separation of Concern”, that is the main motivation behind choosing microservices in first place.

whereas with approach 2:

- I think this approach would be more scalable and easier to maintain separation of concern.
- However, with this approach I don’t get to enjoy the benefits of Relational Schema which would add to the code complexity.

Dear readers, I understand that the system requirements play a significant role in making any design decision, however I wonder, which of this two approaches would be more preferred in terms of scalability and be considered to be a better system design?
Cracking the AWS Certified Database - Specialty Exam: My Tips and Tricks
Published: 2024-05-03 19:17:42


Hey everyone,
I recently passed the AWS Certified Database - Specialty (DBS-C01) exam, and I wanted to share my experience and some tips that helped me along the way. If you're planning to take this exam, keep reading!

- Know the Exam Guide:
  First things first, make sure you read the [AWS Certified 
  Database - Specialty (DBS-C01) Exam Guide](https://d1.awsstatic.com/training-and-certification/docs-database-specialty/AWS-Certified-Database-Specialty_Exam-Guide.pdf). It tells you 
  exactly what services and topics you need to know before 
  taking the exam. Trust me, it's a lifesaver!

- Use AWS FAQs and Whitepapers:
  AWS has a ton of FAQs and [whitepapers](https://repost.aws/questions?view=all&search=databases&sort=relevant) that can help you 
  prepare. Focus on the FAQs for the services mentioned in the 
  exam guide. They often have information that can help you 
  answer exam questions. And don't forget to check out the 
  whitepapers for a deeper understanding of database services 
  and best practices.

- Practice with Tutorial Dojo:
  [Tutorial Dojo](https://portal.tutorialsdojo.com/product-category/aws-practice-exams/) is awesome for practice questions. What I love 
  about them is that they explain why each answer is right or 
  wrong. They also have cheat sheets and other helpful 
  resources. Definitely check them out!

- Use free exam topics questions:
  Head over to [examtopics.com](https://www.examtopics.com/exams/amazon/aws-certified-database-specialty/) and join the discussions. Even 
  though they might not give you the exact answers, following 
  other people discussions who have taken the exam can be 
  super helpful. 
  You can learn from their experiences and get a better idea 
  of what to focus on.

Exam Day Tips:

If you're taking the online exam from home, make sure you have a valid ID, a clean desk, and a quiet room. You can only use one screen during the exam.

Be ready for a lot of questions on [TimeStream DB](https://aws.amazon.com/timestream/). Make sure you know this topic well.
Expect some tough questions on database migration and design, especially moving from on-premises to the cloud.
Don't panic if you come across difficult questions. Remember, there are 15 questions that don't count towards your score, but you won't know which ones they are. Let's hope it's the hardest ones and do your best on each question.




Preparing for the AWS Certified Database - Specialty exam takes time and effort, but with the right resources and practice, you can totally do it! Follow the tips I mentioned and use the study materials I suggested. Even if you feel unsure during the exam, trust yourself and keep going. When you pass, you'll feel so proud of yourself, and it will all be worth it. You've got this!
Good luck on your exam!
Manual Testing.Advantages & Disadvantages of in Manual Testing
Published: 2024-05-03 19:10:13

Software Testing:

Software testing is the step by step process to check the quality, process and function of these things that works according to the client's expected requirements by writing the test case for each and every scenario by applying the analytical skills.

Software testing types:
Manual testing
Automation testing

1.Manual testing:
	Manual testing is a type of software testing where testers evaluate software quality manually without using any automated testing tools.To test a software application to find bugs manually.

Characteristics of Manual Testing
Human Performance:
	The product the same easy testing two side.manually tester provide the input finding the bugs and error. 
Investigative Testing:
 This method is locating problems and evaluating the user experience.
Flexibility: 
		Testers can change the conditions and requirements as they need.
Initial Testing: 
The tester starts the testing of the application from the initial stage.
Testing User Interfaces (UI): 
		Manual testing is a good way to access the application interface. From a user point of view teaster can evaluate the design ,appearance.

Steps in Manual Testing:

Requirement Analysis: 
	Study the project document.Analyze the requirement from SRS.
Test Plan Creation: 
		Create a test plan covering all the requirements.
Test Case Creation:
 Design the test cases that cover all the requirements 
Test Case Execution:
	Execute the test cases on the application under test.
Defect Bugs: 
Detect the bugs and report to the developers. 

Defect Fix and Re-verification:
	When bugs are fixed, again execute the test cases to verify the application.

Advantages of Manual Testing:
Fast and accurate visual feedback:
Its finding all the bugs in the software manually.
Less expensive: 
It does not need any high-level skill or a specific tool. 
No coding is required:
 No programming knowledge is required.Its easy to test  a software. 
Efficient for unplanned changes:
 Manual testing is a  case of unplanned changes to the application, as it can be easily adopted.








Disadvantages of Manual Testing:
Less reliable:
 Manual testing is less reliable 
Can not be reused: 
There is a need to develop separate test cases for each new software.Not used old test cases for these.
Large human resources required:
 Manual testing requires more humans for testing.
Needs experience: 
The tester needs to know the application well.Then only check old application conditions.
Time-consuming:
 If the project is large, then the testing process takes too much time.